/* Gusi Studios
   Layout: a dark teal masthead band over a warm cream page, white cards, and
   real app screens in plain device frames. One accent per product.
   Type: a serif display against a humanist sans, both from the system stack,
   because the site's CSP admits no font host. */
:root {
  --ink:        #0E4749;   /* the studio teal, already used in the auth emails */
  --ink-deep:   #072E30;
  --ink-soft:   #16605F;
  --ground:     #F7F3E8;   /* warm cream, from the same emails */
  --surface:    #FFFFFF;
  --line:       #E4DFD1;
  --text:       #1B2231;
  --muted:      #6B7484;
  --budget:     #5B4EE0;   /* the indigo the Budget app actually uses */
  --portfolio:  #1F6F8B;   /* analytic blue, for the tracker */
  --on-ink:     #F4EFE2;
  --muted-ink:  #576174;   /* body prose on cream: 5.6:1, where --muted is 4.25:1 */
  --link-ink:   #16605F;   /* a link inside prose, on cream */
  --display: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap: 1080px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #0B3A3C; --ink-deep: #04201F; --ink-soft: #15514F;
    --ground: #10171A; --surface: #182125; --line: #27343A;
    --text: #ECEAE0; --muted: #9DA9AC;
    --budget: #9A92FF; --portfolio: #67B6D1; --on-ink: #EFEADC;
    --muted-ink: #9DA9AC; --link-ink: #9FBDB8;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #0B3A3C; --ink-deep: #04201F; --ink-soft: #15514F;
  --ground: #10171A; --surface: #182125; --line: #27343A;
  --text: #ECEAE0; --muted: #9DA9AC;
  --budget: #9A92FF; --portfolio: #67B6D1; --on-ink: #EFEADC;
    --muted-ink: #9DA9AC; --link-ink: #9FBDB8;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--ground); color: var(--text);
  font-family: var(--body); font-size: 16px; line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  /* a short page, such as the auth confirm page, otherwise leaves the footer
     halfway up the screen with bare body colour under it */
  min-height: 100vh; display: flex; flex-direction: column;
}
body > main { flex: 1 0 auto; }
.band > .wrap, .wrap {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
h1, h2, h3 { font-family: var(--display); font-weight: 600; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.2rem); line-height: 1.12; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem); line-height: 1.2; }
h3 { font-size: 1.15rem; line-height: 1.3; }
p { margin: 0; }
a { color: inherit; }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--budget); outline-offset: 3px; border-radius: 4px; }

/* ---------- masthead ---------- */
.masthead { background: var(--ink); color: var(--on-ink); }
.masthead .wrap {
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  align-items: center; justify-content: space-between; padding-block: 18px;
}
.wordmark { display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
.wordmark b { font-family: var(--display); font-size: 1.12rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.wordmark span { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: #9FBDB8; }
.navlinks { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 0.95rem; }
/* The product names are two and three words long, so without this a phone
   breaks them mid-name: "Gusi / Budget". Wrap BETWEEN links instead. */
.navlinks a { white-space: nowrap; text-decoration: none; color: #CFE3DE; padding-block: 4px; border-bottom: 1px solid transparent; }
.navlinks a:hover { color: #fff; border-bottom-color: #4E8F88; }
.navlinks a[aria-current="page"] { color: #fff; border-bottom-color: #4E8F88; }

/* ---------- hero ---------- */
.hero { background: linear-gradient(174deg, var(--ink) 0%, var(--ink-deep) 100%); color: var(--on-ink); }
.hero .wrap { padding-block: clamp(48px, 7vw, 86px); }
.eyebrow { font-size: 0.73rem; letter-spacing: 0.17em; text-transform: uppercase; color: #8FB6B0; margin-bottom: 18px; }
.hero p.lede { margin-top: 18px; max-width: 54ch; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.18rem); color: #D6E5E1; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn {
  display: inline-block; padding: 12px 22px; border-radius: 999px;
  font-size: 0.95rem; font-weight: 600; text-decoration: none; border: 1px solid transparent;
}
.btn-light { background: var(--on-ink); color: var(--ink-deep); }
.btn-light:hover { background: #fff; }
.btn-ghost { border-color: #4E8F88; color: var(--on-ink); }
.btn-ghost:hover { border-color: #87BDB5; }
.btn-ink { background: var(--ink); color: var(--on-ink); }
.btn-ink:hover { background: var(--ink-soft); }

/* ---------- the reading band, for a page that is one column of text ----------
   Cream in light, like every other band. In dark it takes --surface rather than
   --ground: a full page of body copy on #10171A reads as near-black, and the
   lighter band the homepage already uses below its hero is the tone to match.
   The reset card then has to invert with it or it disappears into the band. */
.band.reading { background: var(--ground); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .band.reading { background: var(--surface); }
  :root:not([data-theme="light"]) .band.reading .reset-card { background: var(--ground); }
}
:root[data-theme="dark"] .band.reading { background: var(--surface); }
:root[data-theme="dark"] .band.reading .reset-card { background: var(--ground); }

/* ---------- slim hero, for pages that are a document rather than a pitch ---------- */
.hero-slim .wrap { padding-block: clamp(32px, 4.4vw, 54px); }
.hero-slim h1 { font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.5rem); }
.hero-slim p.lede { margin-top: 10px; font-size: 1rem; }

/* ---------- legal and support documents ----------
   Privacy, terms and account deletion. Same cream band and serif headings as
   the rest of the site, in a narrower measure than .wrap so a long line of body
   text stays readable. Prose uses --muted-ink rather than --muted, which fails
   AA at this size on cream. */
.legal-doc { max-width: 68ch; }
.legal-doc section { margin-top: 40px; }
.legal-doc section:first-child { margin-top: 0; }
.legal-doc h2 {
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
  padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.legal-doc h3 { margin: 26px 0 8px; font-size: 1.08rem; color: var(--ink-soft); }
.legal-doc p { margin-top: 12px; color: var(--muted-ink); }
.legal-doc h2 + p, .legal-doc h3 + p { margin-top: 0; }
.legal-doc strong { color: var(--text); font-weight: 600; }
.legal-doc ul { margin: 12px 0 0; padding-left: 1.3em; color: var(--muted-ink); }
.legal-doc li { margin-bottom: 8px; }
.legal-doc a { color: var(--link-ink); }
.legal-doc .muted { font-size: 0.93rem; }
.legal-doc .btn { margin-top: 4px; }
/* --ink-soft is a dark teal: fine as a subheading on cream, unreadable on the
   dark reading band, so in dark it takes the pale tone instead. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .legal-doc h3 { color: #9FBDB8; }
}
:root[data-theme="dark"] .legal-doc h3 { color: #9FBDB8; }

/* ---------- password reset card ---------- */
.reset-card {
  max-width: 34rem; margin-inline: auto; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 36px 24px 32px; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.reset-card img { width: 64px; height: 64px; border-radius: 14px; }
.reset-card h2 { margin-bottom: 2px; }
.reset-card p { color: var(--muted-ink); }
.reset-card .btn-ink { margin-top: 14px; }
.reset-card .alt { color: var(--link-ink); font-size: 0.95rem; margin-top: 4px; }
.reset-card .small { font-size: 0.9rem; margin-top: 16px; }
/* on dark the teal button sits on a dark surface and goes flat, so it inverts */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-ink { background: var(--on-ink); color: #04201F; }
  :root:not([data-theme="light"]) .btn-ink:hover { background: #fff; }
}
:root[data-theme="dark"] .btn-ink { background: var(--on-ink); color: #04201F; }
:root[data-theme="dark"] .btn-ink:hover { background: #fff; }

/* ---------- sections ---------- */
.band { background: var(--ground); }
.band.alt { background: var(--surface); border-block: 1px solid var(--line); }
.section { padding-block: clamp(44px, 6vw, 76px); }
.section-head { max-width: 58ch; display: flex; flex-direction: column; gap: 12px; }
.section-head .kicker { font-size: 0.73rem; letter-spacing: 0.17em; text-transform: uppercase; color: var(--muted); }
.section-head p { color: var(--muted); }

/* ---------- product cards ---------- */
.products { display: grid; gap: 22px; margin-top: 34px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 26px; display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.band.alt .card { background: var(--ground); }
.card-top { display: flex; align-items: center; gap: 14px; }
.card-top img { width: 48px; height: 48px; border-radius: 11px; flex: none; }
.card h3 { font-size: 1.3rem; }
.card .role { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.card ul { margin: 0; padding-left: 1.1em; color: var(--muted); font-size: 0.95rem; display: grid; gap: 6px; }
.card .more { margin-top: auto; padding-top: 6px; font-weight: 600; text-decoration: none; font-size: 0.95rem; }
.card.budget .more { color: var(--budget); }
.card.portfolio .more { color: var(--portfolio); }
.card.budget { border-top: 3px solid var(--budget); }
.card.portfolio { border-top: 3px solid var(--portfolio); }

/* ---------- plan cards ---------- */
.card .price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.card .price b { font-family: var(--display); font-size: 2.1rem; line-height: 1; letter-spacing: -0.01em; }
.card .price span { color: var(--muted); font-size: 0.95rem; }
.card .year { color: var(--muted); font-size: 0.9rem; margin-top: -8px; font-variant-numeric: tabular-nums; }
.card .adds { font-weight: 600; font-size: 0.95rem; }
.plan-note { margin-top: 26px; color: var(--muted); font-size: 0.92rem; max-width: 64ch; }

/* ---------- screens ---------- */
.screens { display: grid; gap: 26px; margin-top: 36px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.screen { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.frame {
  border: 1px solid var(--line); border-radius: 20px; padding: 7px;
  background: var(--surface); box-shadow: 0 10px 28px rgba(7, 46, 48, 0.09);
}
.frame img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 13px; }
.screen figcaption { font-size: 0.9rem; color: var(--muted); }
.screen figcaption b { color: var(--text); font-weight: 600; }

/* ---------- feature list ---------- */
.features { display: grid; gap: 18px 30px; margin-top: 32px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.feature { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.feature b { font-size: 0.98rem; }
.feature span { color: var(--muted); font-size: 0.93rem; }

/* ---------- notes, prose ---------- */
.prose { max-width: 62ch; display: flex; flex-direction: column; gap: 16px; margin-top: 20px; color: var(--muted); }
.prose strong { color: var(--text); }
.note {
  margin-top: 28px; padding: 18px 20px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--ink-soft); font-size: 0.95rem; color: var(--muted);
}
.band.alt .note { background: var(--ground); }
.note b { color: var(--text); }
.status {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 26px;
  padding: 10px 16px; border-radius: 999px; border: 1px dashed #4E8F88;
  font-size: 0.9rem; color: #D6E5E1;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: #7FB6AE; flex: none; }

/* ---------- store links ---------- */
.stores { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.store-note { font-size: 0.88rem; color: #9FBDB8; margin-top: 14px; }

/* ---------- get-the-app QR codes ----------
   The white plate and the light border are literal, not tokens: a QR code has
   to stay dark-on-white to scan, so it must not follow the dark theme. */
.qr-row { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 34px; }
.qr { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.qr img { width: 168px; height: 168px; border-radius: 12px; background: #FFFFFF; padding: 10px; border: 1px solid var(--line); }
.qr b { color: var(--text); font-size: 0.95rem; }
.qr a { color: var(--portfolio); font-size: 0.9rem; }

/* ---------- contact ---------- */
.addr {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.02rem; color: var(--text); user-select: all;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 13px; display: inline-block; margin-top: 4px;
}
.band.alt .addr { background: var(--ground); }

/* ---------- legal row + footer ---------- */
.legal { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; font-size: 0.93rem; }
.legal a { color: var(--muted); }
.sitefoot { background: var(--ink-deep); color: #A9C6C1; font-size: 0.9rem; }
.sitefoot .wrap { padding-block: 30px; display: flex; flex-wrap: wrap; gap: 16px 30px; justify-content: space-between; }
.sitefoot a { color: #CFE3DE; text-decoration: none; }
.sitefoot a:hover { text-decoration: underline; }
.footlinks { display: flex; flex-wrap: wrap; gap: 10px 20px; }

/* ---------- mobile: features before screenshots ---------- */
/* On a phone the list of what the app does reads better than a column of
   shrunken screenshots, so the two sections swap. Desktop keeps the order
   it has: .flip is only a flex container inside this query. */
@media (max-width: 760px) {
  .flip { display: flex; flex-direction: column; }
  .flip > .flip-screens { order: 2; }
  .flip > .flip-features { order: 1; }
  /* the bands have to swap with them, or two of the same tone end up adjacent */
  .flip > .flip-screens.band.alt { background: var(--ground); border-block: 0; }
  .flip > .flip-features.band { background: var(--surface); border-block: 1px solid var(--line); }
  .flip > .flip-features.band .note { background: var(--ground); }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }