/* =========================================================
   PerkMind — Design Tokens
   Palette grounded in the app's own visual system:
   midnight-emerald glass panels + brass "reward" gold,
   with brick-red / amber utility accents borrowed from the
   in-app icon language (leakage, missed rewards, renewal).

   Theming: raw palette tokens (--emerald-950, --parchment, etc.)
   stay constant — several are used as fixed chip-local contrast
   colors (e.g. dark text on a gold badge) that must not flip.
   Page-level theming instead goes through the semantic tokens
   below (--text-primary, --surface-page, --border-hairline, …),
   which are redefined under prefers-color-scheme: light.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..700&family=DM+Sans:opsz,wght@9..40,400..700&display=swap');

:root{
  /* core palette */
  --emerald-950:#071815;
  --emerald-900:#0B2420;
  --emerald-800:#0F332C;
  --emerald-700:#154438;
  --emerald-600:#1E5A49;
  --glass-line:rgba(231,201,137,0.16);

  --gold-300:#F0DCA8;
  --gold-400:#E7C989;
  --gold-500:#D2AA5C;

  --parchment:#F4EFE1;
  --parchment-dim:#E7E0CC;
  --ink-900:#0C1613;
  --ink-700:#33433D;

  --brick:#C1503B;
  --amber:#CC8B3C;
  --sky:#6FA1B8;
  --sage:#8FADA2;

  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:9px;

  --shadow-soft:0 24px 60px -30px rgba(4,20,17,0.65);
  --shadow-tight:0 10px 24px -14px rgba(4,20,17,0.55);

  --font-display:'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body:'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* small labels/figures use the body face with tabular figures, not a monospace */
  --font-mono:'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --maxw:1180px;

  /* semantic (theme-aware) tokens — dark theme is the default */
  --text-primary:var(--parchment);
  --text-lede:var(--parchment-dim);
  --text-secondary:var(--sage);
  --accent-label:var(--gold-400);
  --accent-label-2:var(--gold-300);

  --surface-page:var(--emerald-950);
  --surface-nav:rgba(7,24,21,0.82);
  --surface-nav-mobile:rgba(7,24,21,0.98);
  --surface-paper:var(--parchment);
  --surface-card:linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));

  --border-hairline:var(--glass-line);

  --hero-glow-1:rgba(231,201,137,0.14);
  --hero-glow-2:rgba(30,90,73,0.55);

  --ghost-bg:linear-gradient(165deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
  --ghost-bg-hover:linear-gradient(165deg, rgba(255,255,255,0.15), rgba(255,255,255,0.03));
  --ghost-border:rgba(255,255,255,0.22);
  --ghost-text:var(--parchment);
  --ghost-text-hover:var(--gold-300);
  --ghost-border-hover:var(--gold-400);
}

@media (prefers-color-scheme: light){
  :root{
    --text-primary:var(--ink-900);
    --text-lede:var(--ink-900);
    --text-secondary:var(--ink-700);
    --accent-label:var(--brick);
    --accent-label-2:var(--brick);

    --surface-page:#FAF6EC;
    --surface-nav:rgba(250,246,236,0.86);
    --surface-nav-mobile:rgba(250,246,236,0.98);
    --surface-paper:var(--parchment);
    --surface-card:linear-gradient(165deg, rgba(12,22,19,0.035), rgba(12,22,19,0.012));

    --border-hairline:rgba(12,22,19,0.13);

    --hero-glow-1:rgba(231,201,137,0.22);
    --hero-glow-2:rgba(30,90,73,0.1);

    --ghost-bg:linear-gradient(165deg, rgba(12,22,19,0.06), rgba(12,22,19,0.02));
    --ghost-bg-hover:linear-gradient(165deg, rgba(12,22,19,0.09), rgba(12,22,19,0.03));
    --ghost-border:rgba(12,22,19,0.2);
    --ghost-text:var(--ink-900);
    --ghost-text-hover:var(--brick);
    --ghost-border-hover:var(--brick);
  }
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overflow-x:hidden; width:100%;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  font-optical-sizing:auto;
  font-variant-numeric:tabular-nums lining-nums;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}
a{color:inherit;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-0.015em;
  font-optical-sizing:auto;
  color:var(--text-primary);
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-label);
  display:inline-flex;
  align-items:center;
  gap:.5em;
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:var(--accent-label);
  display:inline-block;
}

p{margin:0 0 1em; color:var(--text-secondary); max-width:60ch;}
.lede{font-size:1.15rem; color:var(--text-lede); max-width:52ch;}

:focus-visible{
  outline:2px solid var(--accent-label);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.section{padding:96px 0;}
.section--tight{padding:64px 0;}
.section--divider{border-top:1px solid var(--border-hairline);}

.grid{display:grid; gap:28px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

@media (max-width:900px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .section{padding:64px 0;}
}

@media (max-width:480px){
  .wrap{padding:0 20px;}
  .stats{gap:28px; padding:26px 0;}
  .stat strong{font-size:1.5rem;}
}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--surface-nav);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--border-hairline);
}
.nav__row{
  max-width:var(--maxw); margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:1.15rem;
  color:var(--text-primary); text-decoration:none;
}
.brand__mark{
  width:30px; height:30px; border-radius:8px;
  object-fit:cover; flex:none;
}
.nav__links{display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0;}
.nav__links a{
  text-decoration:none; font-size:.92rem; color:var(--text-secondary); font-weight:500;
  transition:color .15s ease;
}
.nav__links a:hover, .nav__links a[aria-current="page"]{color:var(--accent-label-2);}
.nav__cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:999px;
  background:linear-gradient(165deg, rgba(240,220,168,0.85), rgba(210,170,92,0.85));
  color:var(--emerald-950) !important;
  font-weight:700; font-size:.88rem; text-decoration:none;
  border:1px solid rgba(255,255,255,0.35);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 8px 22px -12px rgba(4,20,17,0.55), inset 0 1px 0 rgba(255,255,255,0.45);
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.nav__cta:hover{
  background:linear-gradient(165deg, rgba(240,220,168,0.95), rgba(210,170,92,0.95));
  transform:translateY(-1px);
  box-shadow:0 10px 26px -12px rgba(4,20,17,0.6), inset 0 1px 0 rgba(255,255,255,0.5);
}
.nav__toggle{display:none;}

@media (max-width:820px){
  /* backdrop-filter on .nav makes it a containing block for position:fixed
     descendants in WebKit, which breaks the fixed menu's full-viewport
     layering below — disable it here so the menu paints correctly. */
  .nav{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:var(--surface-nav-mobile);
  }
  .nav__links{
    position:fixed; inset:73px 0 0 0; z-index:40;
    background:var(--surface-page);
    flex-direction:column; align-items:stretch;
    padding:8px 28px 32px; gap:0;
    transform:translateY(-8px);
    opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
    overflow-y:auto;
  }
  .nav__links.is-open{opacity:1; pointer-events:auto; transform:translateY(0);}
  .nav__links li{list-style:none;}
  .nav__links li:not(:last-child){border-bottom:1px solid var(--border-hairline);}
  .nav__links a{display:block; padding:18px 2px; font-size:1.02rem;}
  .nav__links .nav__cta{
    display:flex; justify-content:center;
    margin-top:20px; padding:15px 18px;
  }
  .nav__toggle{
    display:inline-flex; background:none; border:1px solid var(--border-hairline);
    color:var(--text-primary); width:40px; height:40px; border-radius:10px;
    align-items:center; justify-content:center; cursor:pointer;
  }
}

/* ---------- buttons (glass) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:999px;
  font-weight:700; font-size:.95rem; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  font-family:var(--font-body);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
}
.btn--gold{
  background:linear-gradient(165deg, rgba(240,220,168,0.85), rgba(210,170,92,0.85));
  color:var(--emerald-950);
  border-color:rgba(255,255,255,0.35);
  box-shadow:0 10px 26px -12px rgba(4,20,17,0.55), inset 0 1px 0 rgba(255,255,255,0.45);
}
.btn--gold:hover{
  background:linear-gradient(165deg, rgba(248,232,190,0.92), rgba(210,170,92,0.92));
  transform:translateY(-2px);
  box-shadow:0 14px 32px -14px rgba(4,20,17,0.6), inset 0 1px 0 rgba(255,255,255,0.5);
}
.btn--ghost{
  background:var(--ghost-bg);
  color:var(--ghost-text);
  border-color:var(--ghost-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn--ghost:hover{
  border-color:var(--ghost-border-hover); color:var(--ghost-text-hover);
  background:var(--ghost-bg-hover);
}
.btn--block{width:100%;}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:120px 0 100px;
  overflow:hidden;
  background:
    radial-gradient(60% 55% at 82% 8%, var(--hero-glow-1), transparent 60%),
    radial-gradient(50% 50% at 10% 100%, var(--hero-glow-2), transparent 60%),
    var(--surface-page);
}
.hero__row{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
@media (max-width:980px){.hero__row{grid-template-columns:1fr;}}
.hero h1{font-size:clamp(2.4rem,4.6vw,3.6rem); max-width:14ch;}
.hero__actions{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
.hero__meta{
  margin-top:38px; display:flex; gap:28px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:.78rem; color:var(--text-secondary); letter-spacing:.02em;
}
.hero__meta strong{color:var(--accent-label-2); display:block; font-size:1rem; font-family:var(--font-mono);}

/* ---------- signature: card fan ---------- */
.cardfan{
  position:relative; height:380px;
  display:flex; align-items:center; justify-content:center;
  perspective:1400px;
  overflow:hidden;
  max-width:100%;
}

@media (max-width:560px){
  .cardfan{transform:scale(.72); height:280px;}
}
@media (max-width:390px){
  .cardfan{transform:scale(.6); height:230px;}
}
.cardfan__card{
  position:relative; overflow:hidden;
  position:absolute; width:250px; height:158px; border-radius:16px;
  padding:18px 20px; color:var(--parchment);
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -14px 20px -14px rgba(0,0,0,.4);
  border:1px solid rgba(255,255,255,0.22);
  backdrop-filter:blur(6px) saturate(160%); -webkit-backdrop-filter:blur(6px) saturate(160%);
  display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.cardfan__card::after{
  content:''; position:absolute; inset:0; border-radius:16px; z-index:1;
  background:linear-gradient(115deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.05) 30%, rgba(255,255,255,0) 55%);
  pointer-events:none;
}
/* EMV-style chip, same treatment as the homepage's orbit cards */
.cardfan__chip{
  position:absolute; top:14px; left:16px; z-index:2;
  width:22px; height:16px; border-radius:3px;
  background:linear-gradient(155deg, var(--gold-300), var(--gold-500));
  box-shadow:0 1px 1px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.6);
}
.cardfan__chip::before{
  content:''; position:absolute; inset:3px; border-radius:1.5px;
  background:
    linear-gradient(rgba(139,105,45,.55), rgba(139,105,45,.55)) padding-box,
    linear-gradient(90deg, transparent 49%, rgba(139,105,45,.55) 49%, rgba(139,105,45,.55) 51%, transparent 51%);
  opacity:.7;
}
.cardfan__label{position:relative; z-index:2; margin-top:22px; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; opacity:.85;}
.cardfan__rate{position:relative; z-index:2; font-family:var(--font-mono); font-size:1.5rem; font-weight:600;}
.cardfan__card--1{background:linear-gradient(155deg,#1E5A49,#0B2420); transform:rotate(-11deg) translate(-92px,18px);}
.cardfan__card--2{background:linear-gradient(155deg,#33433D,#0C1613); transform:rotate(-2deg) translate(0,-6px); z-index:2; box-shadow:0 30px 70px -28px rgba(4,20,17,0.8), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -14px 20px -14px rgba(0,0,0,.4);}
/* card--3 sits on the right of the fan, behind card--2: its content
   used to be left-aligned (like the other two), which put it entirely
   under card--2's overlap and made it look blank. Right-align it and
   move the chip to the right edge so it falls in the part that's
   actually visible. */
.cardfan__card--3{background:linear-gradient(155deg,#8A5A2E,#4A331B); transform:rotate(11deg) translate(92px,18px); align-items:flex-end; text-align:right;}
.cardfan__card--3 .cardfan__chip{left:auto; right:16px;}
.cardfan:hover .cardfan__card--1{transform:rotate(-16deg) translate(-108px,26px);}
.cardfan:hover .cardfan__card--3{transform:rotate(16deg) translate(108px,26px);}
.cardfan:hover .cardfan__card--2{transform:rotate(0deg) translate(0,-16px);}

/* ---------- hero orbit: P mark centered, cards circling it ---------- */
.orbit{
  --r:145px; --card-w:92px; --card-h:58px;
  position:relative; width:420px; height:420px; margin:0 auto;
  border-radius:50%;
  background:linear-gradient(165deg, rgba(231,201,137,0.07), rgba(231,201,137,0.015));
  border:1px solid var(--border-hairline);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:
    0 30px 70px -30px rgba(4,20,17,0.75),
    inset 0 1px 0 rgba(255,255,255,0.1);
}
.orbit__center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:108px; height:108px; border-radius:28px;
  background:linear-gradient(155deg,var(--gold-400),var(--gold-500) 60%, var(--brick) 130%);
  display:flex; align-items:center; justify-content:center;
  color:var(--emerald-950); font-family:var(--font-display); font-weight:600; font-size:2.6rem;
  box-shadow:0 20px 45px -18px rgba(4,20,17,0.6);
  z-index:2;
}
.orbit__card{
  position:absolute; top:50%; left:50%;
  width:var(--card-w); height:var(--card-h);
  margin-top:calc(var(--card-h) / -2);
  margin-left:calc(var(--card-w) / -2);
}
.orbit__card--1{transform:rotate(0deg) translateY(calc(var(--r) * -1));}
.orbit__card--2{transform:rotate(60deg) translateY(calc(var(--r) * -1));}
.orbit__card--3{transform:rotate(120deg) translateY(calc(var(--r) * -1));}
.orbit__card--4{transform:rotate(180deg) translateY(calc(var(--r) * -1));}
.orbit__card--5{transform:rotate(240deg) translateY(calc(var(--r) * -1));}
.orbit__card--6{transform:rotate(300deg) translateY(calc(var(--r) * -1));}

.orbit__inner{
  position:relative; overflow:hidden; isolation:isolate;
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  border-radius:10px;
  color:var(--parchment);
  border:1px solid rgba(255,255,255,0.32);
  text-align:center;
  /* credit-card glass: frosted, lightly saturated, with an inner rim
     highlight (top) + shadow (bottom) like an embossed card edge. */
  backdrop-filter:blur(7px) saturate(180%);
  -webkit-backdrop-filter:blur(7px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -10px 14px -10px rgba(0,0,0,.35),
    0 10px 20px -10px rgba(4,20,17,.55);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
/* diagonal glass sheen sweeping the card, like light off a laminated surface */
.orbit__inner::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.06) 30%, rgba(255,255,255,0) 55%);
}
/* EMV-style chip, upper-left, like a real card */
.orbit__chip{
  position:absolute; top:7px; left:7px; z-index:2;
  width:14px; height:10px; border-radius:2.5px;
  background:linear-gradient(155deg, var(--gold-300), var(--gold-500));
  box-shadow:0 1px 1px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.6);
}
.orbit__chip::before{
  content:''; position:absolute; inset:2px; border-radius:1px;
  background:
    linear-gradient(rgba(139,105,45,.55), rgba(139,105,45,.55)) padding-box,
    linear-gradient(90deg, transparent 49%, rgba(139,105,45,.55) 49%, rgba(139,105,45,.55) 51%, transparent 51%);
  opacity:.7;
}
.orbit__icon{width:16px; height:16px; flex:none; position:relative; z-index:2;}
.orbit__label{position:relative; z-index:2; font-family:var(--font-mono); font-size:.56rem; letter-spacing:.06em; text-transform:uppercase;}

.orbit__card--1 .orbit__inner{transform:rotate(0deg); background:linear-gradient(155deg,rgba(111,161,184,.88),rgba(46,70,80,.92));}
.orbit__card--2 .orbit__inner{transform:rotate(-60deg); background:linear-gradient(155deg,rgba(193,80,59,.88),rgba(110,44,32,.92));}
.orbit__card--3 .orbit__inner{transform:rotate(-120deg); background:linear-gradient(155deg,rgba(231,201,137,.9),rgba(138,106,50,.92)); color:var(--emerald-950);}
.orbit__card--3 .orbit__chip::before{background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)) padding-box, linear-gradient(90deg, transparent 49%, rgba(255,255,255,.5) 49%, rgba(255,255,255,.5) 51%, transparent 51%);}
.orbit__card--4 .orbit__inner{transform:rotate(-180deg); background:linear-gradient(155deg,rgba(143,173,162,.88),rgba(69,94,86,.92));}
.orbit__card--5 .orbit__inner{transform:rotate(-240deg); background:linear-gradient(155deg,rgba(51,67,61,.9),rgba(12,22,19,.94));}
.orbit__card--6 .orbit__inner{transform:rotate(-300deg); background:linear-gradient(155deg,rgba(30,90,73,.88),rgba(11,36,32,.92));}

/* dark system appearance: the disc's background (a later rule tints it
   with --surface-card/--brand-soft, both near-transparent in dark mode)
   and the center app icon (raw image, no fill of its own) both nearly
   vanish into the dark page. Give the disc real glass presence and ring
   the icon so it separates from the disc instead of blending into it. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .orbit{
    background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.12), rgba(63,208,160,.10));
    border-color:rgba(255,255,255,.16);
    box-shadow:0 30px 70px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.10);
  }
  :root:not([data-theme="light"]) .orbit__center{
    box-shadow:
      0 0 0 1.5px rgba(255,255,255,.6),
      0 0 44px -8px rgba(63,208,160,.55),
      0 22px 46px -18px rgba(0,0,0,.85);
  }
}

@media (max-width:980px){
  .orbit{width:300px; height:300px; --r:104px; --card-w:68px; --card-h:44px;}
  .orbit__center{width:78px; height:78px; border-radius:20px; font-size:1.9rem;}
  .orbit__icon{width:13px; height:13px;}
  .orbit__label{font-size:.48rem;}
}
@media (max-width:390px){
  .orbit{width:250px; height:250px; --r:86px; --card-w:56px; --card-h:36px;}
  .orbit__center{width:64px; height:64px; border-radius:16px; font-size:1.55rem;}
  .orbit__icon{width:11px; height:11px;}
  .orbit__label{font-size:.4rem;}
}

/* ---------- glass card ---------- */
.card{
  background:var(--surface-card);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg);
  padding:30px;
  box-shadow:var(--shadow-tight);
}
.card h3{font-size:1.15rem; margin-bottom:.4em;}
.card p{margin-bottom:0; font-size:.94rem;}
.card__icon{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; margin-bottom:18px;
  font-family:var(--font-mono); font-weight:700; font-size:.95rem;
  color:var(--emerald-950);
}
.ic-gold{background:var(--gold-400);}
.ic-brick{background:var(--brick); color:var(--parchment);}
.ic-amber{background:var(--amber); color:var(--emerald-950);}
.ic-sky{background:var(--sky); color:var(--emerald-950);}
.ic-sage{background:var(--sage); color:var(--emerald-950);}

/* ---------- stat strip ---------- */
.stats{
  display:flex; flex-wrap:wrap; gap:44px;
  border-top:1px solid var(--border-hairline); border-bottom:1px solid var(--border-hairline);
  padding:34px 0;
}
.stat strong{
  display:block; font-family:var(--font-mono); font-size:1.9rem; color:var(--accent-label-2); font-weight:600;
}
.stat span{font-size:.82rem; color:var(--text-secondary);}

/* ---------- parchment (light) section ---------- */
.section--paper{
  background:var(--surface-paper); color:var(--ink-900);
}
.section--paper h2, .section--paper h3{color:var(--ink-900);}
.section--paper p{color:var(--ink-700);}
.section--paper .card{
  background:#fff; border-color:#E4DCC5; box-shadow:0 18px 40px -28px rgba(12,22,19,0.25);
}
.section--paper .card p{color:var(--ink-700);}
.section--paper .eyebrow{color:var(--brick);}
.section--paper .eyebrow::before{background:var(--brick);}

/* ---------- footer ---------- */
.footer{
  border-top:1px solid var(--border-hairline);
  padding:56px 0 34px;
  background:var(--surface-page);
}
.footer__row{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;}
@media (max-width:820px){.footer__row{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.footer__row{grid-template-columns:1fr; gap:28px;}}
.footer h4{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-label); margin-bottom:14px;}
.footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.footer a{color:var(--text-secondary); text-decoration:none; font-size:.92rem;}
.footer a:hover{color:var(--accent-label-2);}
.footer__bottom{
  margin-top:46px; padding-top:24px; border-top:1px solid var(--border-hairline);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.8rem; color:var(--text-secondary);
}

/* ---------- misc components ---------- */
.pill{
  display:inline-block; padding:5px 12px; border-radius:999px;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--border-hairline); color:var(--accent-label-2);
}
.divider-line{height:1px; background:var(--border-hairline); border:0; margin:0;}

.faq{border-bottom:1px solid var(--border-hairline);}
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 0; font-family:var(--font-display); font-size:1.05rem; font-weight:600;
  color:var(--text-primary);
}
.section--paper .faq summary{color:var(--ink-900);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:'+'; font-family:var(--font-mono); font-size:1.3rem; color:var(--accent-label); transition:transform .2s ease;
}
.faq[open] summary::after{transform:rotate(45deg);}
.faq__body{padding:0 0 22px; color:var(--text-secondary); max-width:70ch;}
.section--paper .faq__body{color:var(--ink-700);}

/* ---------- forms ---------- */
.form-grid{display:grid; gap:18px;}
.field label{
  display:block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold-500); margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px; border-radius:10px;
  border:1px solid #D9D0B3; background:#fff; color:var(--ink-900);
  font-family:var(--font-body); font-size:16px;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--brick); outline-offset:1px;
}
.field textarea{resize:vertical; min-height:130px;}
.form-note{font-size:.82rem; color:var(--ink-700);}
.form-status{font-size:.88rem; margin-top:14px; font-weight:600;}
.form-status[data-state="ok"]{color:#1E5A49;}
.form-status[data-state="err"]{color:var(--brick);}

.contact-card{
  display:flex; gap:16px; align-items:flex-start;
  padding:20px 0; border-bottom:1px solid #E4DCC5;
}
.contact-card:last-child{border-bottom:0;}
.contact-card__icon{
  width:40px; height:40px; border-radius:10px; flex:none;
  display:grid; place-items:center; background:var(--emerald-900); color:var(--gold-300);
  font-family:var(--font-mono); font-weight:700; font-size:.85rem;
}

.badge-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}
.badge{
  font-family:var(--font-mono); font-size:.72rem; padding:6px 11px; border-radius:8px;
  border:1px solid var(--border-hairline); color:var(--text-secondary);
}

/* ---------- typography refinements (Fraunces + DM Sans) ---------- */
.eyebrow{font-weight:600; font-size:.74rem; letter-spacing:.14em;}
.stat strong,
.hero__meta strong,
.cardfan__rate{font-family:var(--font-display); font-weight:500; letter-spacing:-0.01em;}
.faq summary{font-weight:500;}
.lede{font-size:1.1rem; line-height:1.7;}
p{max-width:68ch;}
.grid p, .card p, .hero__row p{max-width:none;}

/* ---------- pricing + checklist (added for subscription details) ---------- */
.price{display:flex; align-items:baseline; gap:8px; margin:6px 0 4px;}
.price__amount{font-family:var(--font-display); font-size:3.2rem; font-weight:500; line-height:1; color:var(--accent-label-2);}
.price__unit{color:var(--text-secondary); font-size:1rem;}
.price__note{color:var(--text-secondary); font-size:.92rem; margin:0 0 16px;}
.checklist{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px;}
.checklist li{position:relative; padding-left:28px; color:var(--text-secondary); line-height:1.55;}
.checklist li::before{content:'✓'; position:absolute; left:0; top:0; color:var(--accent-label); font-weight:700;}
.legal h2{font-size:1.4rem; margin-top:2em;}
.legal ul{color:var(--text-secondary); padding-left:20px; line-height:1.9;}

/* stats: even 4-up grid, serif figures sized for the new typeface */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:28px 44px;}
.stat strong{font-size:1.5rem;}
.hero__meta strong{font-size:1.05rem;}

/* =========================================================
   DESIGN REFRESH — clean, modern, professional
   Light-first, cool neutrals + deep emerald primary, with a
   matching dark theme. Overrides the earlier "midnight glass /
   parchment" look; raw palette tokens above are kept only for
   card art and icon chips.
   ========================================================= */
:root{
  --surface-page:#FFFFFF;
  --surface-alt:#F3F7F5;
  --surface-nav:rgba(255,255,255,0.88);
  --surface-nav-mobile:#FFFFFF;
  --surface-paper:var(--surface-alt);
  --surface-card:#FFFFFF;

  --text-primary:#0E1B17;
  --text-lede:#22332D;
  --text-secondary:#4B5B56;

  --brand:#0B6B53;
  --brand-strong:#095642;
  --on-brand:#FFFFFF;
  --brand-soft:#E3F2EC;
  --link:#0B6B53;
  --accent-label:#0B6B53;
  --accent-label-2:#0B6B53;

  --border-hairline:#DDE6E2;
  --shadow-card:0 1px 2px rgba(14,27,23,.05), 0 8px 24px -12px rgba(14,27,23,.12);
  --shadow-card-hover:0 2px 4px rgba(14,27,23,.06), 0 18px 36px -16px rgba(14,27,23,.2);

  --hero-glow-1:rgba(11,107,83,0.10);
  --hero-glow-2:rgba(183,134,47,0.07);

  --ghost-bg:#FFFFFF;
  --ghost-bg-hover:var(--brand-soft);
  --ghost-border:#C9D6D1;
  --ghost-text:var(--text-primary);
  --ghost-text-hover:var(--brand-strong);
  --ghost-border-hover:var(--brand);

  --field-bg:#FFFFFF;
  --field-border:#C9D6D1;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --surface-page:#0A1311;
    --surface-alt:#0F1B18;
    --surface-nav:rgba(10,19,17,0.86);
    --surface-nav-mobile:#0A1311;
    --surface-card:#12211D;

    --text-primary:#F1F6F4;
    --text-lede:#D5E0DC;
    --text-secondary:#A7B8B2;

    --brand:#3FD0A0;
    --brand-strong:#66E0B7;
    --on-brand:#06231B;
    --brand-soft:rgba(63,208,160,0.12);
    --link:#66E0B7;
    --accent-label:#66E0B7;
    --accent-label-2:#66E0B7;

    --border-hairline:rgba(255,255,255,0.10);
    --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.6);
    --shadow-card-hover:0 2px 4px rgba(0,0,0,.35), 0 20px 40px -16px rgba(0,0,0,.7);

    --hero-glow-1:rgba(63,208,160,0.13);
    --hero-glow-2:rgba(231,201,137,0.06);

    --ghost-bg:rgba(255,255,255,0.04);
    --ghost-bg-hover:var(--brand-soft);
    --ghost-border:rgba(255,255,255,0.2);
    --ghost-text:var(--text-primary);
    --ghost-text-hover:var(--brand-strong);
    --ghost-border-hover:var(--brand);

    --field-bg:#0F1B18;
    --field-border:rgba(255,255,255,0.18);
  }
}

body{background:var(--surface-page); color:var(--text-primary);}
a{color:var(--link);}
p a, .faq__body a, .legal a{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}
::selection{background:var(--brand); color:var(--on-brand);}

/* accessibility + usability */
.skip{position:absolute; left:16px; top:-60px; z-index:100; background:var(--brand); color:var(--on-brand); padding:10px 16px; border-radius:10px; font-weight:600; text-decoration:none; transition:top .15s;}
.skip:focus{top:12px;}
:focus-visible{outline:3px solid var(--brand); outline-offset:3px;}
#main{scroll-margin-top:80px;}
[id]{scroll-margin-top:88px;}

/* nav */
.nav{background:var(--surface-nav); border-bottom:1px solid var(--border-hairline);}
.nav__links a{color:var(--text-secondary); padding:6px 2px;}
.nav__links a:hover, .nav__links a[aria-current="page"]{color:var(--brand);}
.nav__links a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--brand);}
.nav__cta{
  background:var(--brand) !important; color:var(--on-brand) !important;
  border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.nav__cta:hover{background:var(--brand-strong) !important; transform:none; box-shadow:0 6px 16px -8px rgba(11,107,83,.6);}
.nav__links a.nav__cta[aria-current="page"]{box-shadow:none;}
.brand{letter-spacing:-0.01em;}

/* buttons: solid primary + outlined secondary */
.btn{
  min-height:48px; padding:12px 26px; font-weight:600; font-size:1rem;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.btn--gold{
  background:var(--brand); color:var(--on-brand); border-color:var(--brand);
  box-shadow:0 1px 2px rgba(0,0,0,.12), 0 8px 20px -10px rgba(11,107,83,.55);
}
.btn--gold:hover{background:var(--brand-strong); border-color:var(--brand-strong); transform:translateY(-1px); box-shadow:0 12px 26px -12px rgba(11,107,83,.6);}
.btn--ghost{background:var(--ghost-bg); box-shadow:none;}
.btn--ghost:hover{transform:translateY(-1px);}

/* hero */
.hero{
  background:
    radial-gradient(55% 60% at 88% 0%, var(--hero-glow-1), transparent 65%),
    radial-gradient(40% 50% at 0% 100%, var(--hero-glow-2), transparent 70%),
    var(--surface-page);
  border-bottom:1px solid var(--border-hairline);
}
.hero h1{font-weight:500; letter-spacing:-0.025em;}
.hero__meta{gap:20px 36px; padding-top:26px; border-top:1px solid var(--border-hairline);}
.hero__meta > div{max-width:24ch; line-height:1.45;}
.hero__meta strong{color:var(--text-primary); font-family:var(--font-body); font-weight:700; font-size:.95rem; margin-bottom:2px;}

/* hero art: soft disc, cards keep their own colors */
.orbit{
  background:radial-gradient(circle at 50% 40%, var(--surface-card), var(--brand-soft));
  border:1px solid var(--border-hairline);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:var(--shadow-card-hover);
}
.orbit__center{background:linear-gradient(155deg,#12856A,#0B6B53); color:#fff; box-shadow:0 18px 40px -18px rgba(11,107,83,.7);}
.cardfan__card{box-shadow:var(--shadow-card-hover);}

/* cards */
.card{
  background:var(--surface-card); border:1px solid var(--border-hairline);
  border-radius:16px; box-shadow:var(--shadow-card);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow-card-hover);}
.card h3{font-size:1.15rem; font-weight:600; letter-spacing:-0.01em;}
.card__icon{border-radius:12px; font-family:var(--font-body); font-weight:700;}
.ic-gold,.ic-brick,.ic-amber,.ic-sky,.ic-sage{color:var(--on-brand);}
.ic-gold{background:var(--brand); color:var(--on-brand);}
.ic-sky{background:#2F7FA0; color:#fff;}
.ic-amber{background:#B7772A; color:#fff;}
.ic-brick{background:#C1503B; color:#fff;}
.ic-sage{background:#5C7C70; color:#fff;}

/* stats */
.stats{border-color:var(--border-hairline);}
.stat strong{color:var(--brand); font-weight:600;}

/* alt sections replace the old cream "paper" panels */
.section--paper{background:var(--surface-alt); color:var(--text-primary);}
.section--paper h2,.section--paper h3{color:var(--text-primary);}
.section--paper p,.section--paper .card p{color:var(--text-secondary);}
.section--paper .card{background:var(--surface-card); border-color:var(--border-hairline); box-shadow:var(--shadow-card);}
.section--paper .eyebrow{color:var(--brand);}
.section--paper .eyebrow::before{background:var(--brand);}
.section--paper .faq summary,.section--paper .faq__body{color:inherit;}
.section--divider{border-top:1px solid var(--border-hairline);}

/* labels + pills */
.eyebrow{color:var(--brand);}
.eyebrow::before{background:var(--brand); width:18px;}
.pill{background:var(--brand-soft); border-color:transparent; color:var(--brand-strong); font-weight:600; letter-spacing:.06em;}
.badge{background:var(--surface-card); color:var(--text-secondary);}

/* FAQ */
.faq summary{padding:20px 0; font-family:var(--font-body); font-weight:600; font-size:1.05rem; letter-spacing:-0.005em; min-height:56px;}
.faq summary:hover{color:var(--brand);}
.faq summary::after{color:var(--brand); font-weight:400;}

/* forms */
.field label{color:var(--text-secondary); font-weight:600; letter-spacing:.06em;}
.field input,.field select,.field textarea{
  background:var(--field-bg); color:var(--text-primary); border:1px solid var(--field-border);
  border-radius:12px; padding:14px 16px; min-height:48px;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--brand); outline-offset:0; border-color:var(--brand);}
.form-note{color:var(--text-secondary);}
.form-status[data-state="ok"]{color:var(--brand);}
.contact-card{border-bottom-color:var(--border-hairline);}
.contact-card__icon{background:var(--brand-soft); color:var(--brand-strong);}

/* pricing + checklist */
.price__amount{color:var(--text-primary); font-weight:500;}
.checklist li{color:var(--text-secondary);}
.checklist li::before{color:var(--brand);}

/* footer */
.footer{background:var(--surface-alt); border-top:1px solid var(--border-hairline);}
.footer h4{color:var(--text-primary); font-family:var(--font-body); font-weight:700; letter-spacing:.1em;}
.footer a{color:var(--text-secondary);}
.footer a:hover{color:var(--brand);}

/* nav/tap comfort on phones */
@media (max-width:820px){
  .nav__links{inset:73px 0 0 0;}
  .nav__links a{padding:18px 2px;}
}

/* polish */
.nav__links a.nav__cta{padding:10px 20px; color:var(--on-brand);}
.stat span{display:block; line-height:1.5; margin-top:4px;}
h2{text-wrap:balance;}

/* =========================================================
   LIQUID GLASS — every button and link gets a translucent,
   blurred, light-catching surface (Apple-style).
   Tokens first, then components.
   ========================================================= */
:root{
  --glass-bg:rgba(255,255,255,0.55);
  --glass-bg-hover:rgba(255,255,255,0.78);
  --glass-border:rgba(255,255,255,0.75);
  --glass-edge:rgba(14,27,23,0.10);
  --glass-shadow:0 1px 0 rgba(255,255,255,0.9) inset, 0 -1px 0 rgba(14,27,23,0.04) inset, 0 8px 22px -12px rgba(14,27,23,0.28);
  --glass-blur:blur(18px) saturate(180%);
  --sheen:linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0) 52%);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --glass-bg:rgba(255,255,255,0.07);
    --glass-bg-hover:rgba(255,255,255,0.13);
    --glass-border:rgba(255,255,255,0.20);
    --glass-edge:rgba(255,255,255,0.08);
    --glass-shadow:0 1px 0 rgba(255,255,255,0.22) inset, 0 -1px 0 rgba(0,0,0,0.25) inset, 0 10px 26px -12px rgba(0,0,0,0.7);
    --sheen:linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0) 52%);
  }
}

/* shared glass button base: sheen highlight + press feedback */
.btn, .nav__cta, .nav__toggle{
  position:relative; overflow:hidden; isolation:isolate;
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn::before, .nav__cta::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--sheen); pointer-events:none;
}
.btn:active, .nav__cta:active{transform:translateY(0) scale(.97);}

/* primary: tinted glass */
.btn--gold, .nav__cta{
  background:linear-gradient(180deg, rgba(22,146,112,0.94), rgba(11,107,83,0.90)) !important;
  border:1px solid rgba(255,255,255,0.38) !important;
  color:#fff !important;
  box-shadow:0 1px 0 rgba(255,255,255,0.55) inset, 0 -1px 0 rgba(0,0,0,0.16) inset, 0 12px 26px -10px rgba(11,107,83,0.7);
}
.btn--gold:hover, .nav__cta:hover{
  background:linear-gradient(180deg, rgba(30,162,126,0.96), rgba(9,86,66,0.92)) !important;
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset, 0 -1px 0 rgba(0,0,0,0.16) inset, 0 16px 30px -12px rgba(11,107,83,0.8);
}

/* secondary: clear frosted glass */
.btn--ghost{
  background:var(--glass-bg); color:var(--text-primary);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow), 0 0 0 1px var(--glass-edge);
}
.btn--ghost:hover{background:var(--glass-bg-hover); color:var(--brand-strong); transform:translateY(-1px);}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn--gold,
  :root:not([data-theme="light"]) .nav__cta{
    background:linear-gradient(180deg, rgba(90,228,184,0.95), rgba(48,190,148,0.90)) !important;
    color:#04231A !important;
    border-color:rgba(255,255,255,0.45) !important;
    box-shadow:0 1px 0 rgba(255,255,255,0.6) inset, 0 -1px 0 rgba(0,0,0,0.18) inset, 0 12px 28px -10px rgba(63,208,160,0.55);
  }
  :root:not([data-theme="light"]) .btn--gold:hover,
  :root:not([data-theme="light"]) .nav__cta:hover{
    background:linear-gradient(180deg, rgba(120,238,200,0.97), rgba(63,208,160,0.92)) !important;
  }
}

/* nav bar itself is a glass sheet; links become glass capsules */
@media (min-width:821px){
  .nav{background:var(--surface-nav); backdrop-filter:blur(22px) saturate(190%); -webkit-backdrop-filter:blur(22px) saturate(190%);}
  .nav__links{gap:6px;}
  .nav__links a:not(.nav__cta){
    padding:8px 15px; border-radius:999px; border:1px solid transparent;
    transition:background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
  }
  .nav__links a:not(.nav__cta):hover,
  .nav__links a[aria-current="page"]:not(.nav__cta){
    background:var(--glass-bg); border-color:var(--glass-border);
    box-shadow:var(--glass-shadow); color:var(--brand-strong);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  }
  .nav__links a[aria-current="page"]:not(.nav__cta){box-shadow:var(--glass-shadow), 0 0 0 1px var(--glass-edge);}
  .nav__cta{margin-left:8px;}
}
.nav__toggle{
  background:var(--glass-bg); border:1px solid var(--glass-border); box-shadow:var(--glass-shadow);
}

/* pills, badges, and footer / text links */
.pill, .badge{
  background:var(--glass-bg); border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
}
.pill{color:var(--brand-strong);}
.footer a{
  display:inline-block; padding:5px 12px; margin-left:-12px; border-radius:999px; border:1px solid transparent;
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.footer a:hover{
  background:var(--glass-bg); border-color:var(--glass-border); box-shadow:var(--glass-shadow); color:var(--brand-strong);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
}
.footer .brand{padding:0; margin-left:0; border:0; background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;}

/* FAQ rows behave like glass buttons on hover/focus */
.faq summary{padding-left:14px; padding-right:14px; margin:0 -14px; border-radius:14px; transition:background .18s ease, box-shadow .18s ease;}
.faq summary:hover, .faq[open] summary{
  background:var(--glass-bg); color:var(--text-primary);
  box-shadow:var(--glass-shadow), 0 0 0 1px var(--glass-edge);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
}
.faq__body{padding-left:0;}

/* text links inside paragraphs: glass underline chip on hover */
p a, .faq__body a, .legal a{border-radius:6px; transition:background .18s ease;}
p a:hover, .faq__body a:hover, .legal a:hover{background:var(--brand-soft);}

@media (prefers-reduced-transparency: reduce){
  :root{--glass-bg:var(--surface-card); --glass-bg-hover:var(--surface-alt);}
  *{backdrop-filter:none !important; -webkit-backdrop-filter:none !important;}
}

/* ---------- sliding liquid-glass nav indicator (desktop) ---------- */
.nav__glass{display:none;}
@media (min-width:821px){
  .nav__links{position:relative;}
  .nav__links a:not(.nav__cta){position:relative; z-index:1;}
  .nav__glass{
    display:block; position:absolute; top:0; left:0; z-index:0; pointer-events:none;
    border-radius:999px; opacity:0;
    background:var(--glass-bg-hover);
    border:1px solid var(--glass-border);
    box-shadow:var(--glass-shadow), 0 0 0 1px var(--glass-edge);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    transition:
      transform .45s cubic-bezier(.34,1.45,.5,1),
      width .45s cubic-bezier(.34,1.45,.5,1),
      height .3s ease,
      opacity .2s ease;
  }
  .nav__glass::before{
    content:''; position:absolute; inset:0; border-radius:inherit; background:var(--sheen); pointer-events:none;
  }
  .nav__glass.is-visible{opacity:1;}
  .nav__glass.is-pressed{scale:.94;}
  .nav__glass{transition-property:transform,width,height,opacity,scale;}

  /* the capsule provides the hover surface; links only change color */
  .nav__links a:not(.nav__cta):hover,
  .nav__links a[aria-current="page"]:not(.nav__cta){
    background:none; border-color:transparent; box-shadow:none;
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .nav__links a:not(.nav__cta):hover{color:var(--brand-strong);}
}
@media (prefers-reduced-motion: reduce){
  .nav__glass{transition:opacity .01ms !important;}
}

/* ---------- sliding liquid-glass footer indicator (desktop) ----------
   Same capsule mechanic as the header nav (.nav__glass), instantiated
   once per footer link column since each <ul> is its own independent
   list with no shared row to glide across. Rests hidden (no "current
   page" concept in the footer) rather than settling on a link. */
.footer__glass{display:none;}
@media (min-width:821px){
  .footer ul{position:relative;}
  .footer ul a{position:relative; z-index:1;}
  .footer__glass{
    display:block; position:absolute; top:0; left:0; z-index:0; pointer-events:none;
    border-radius:999px; opacity:0;
    background:var(--glass-bg-hover);
    border:1px solid var(--glass-border);
    box-shadow:var(--glass-shadow), 0 0 0 1px var(--glass-edge);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    transition:
      transform .45s cubic-bezier(.34,1.45,.5,1),
      width .45s cubic-bezier(.34,1.45,.5,1),
      height .3s ease,
      opacity .2s ease;
  }
  .footer__glass::before{
    content:''; position:absolute; inset:0; border-radius:inherit; background:var(--sheen); pointer-events:none;
  }
  .footer__glass.is-visible{opacity:1;}
  .footer__glass.is-pressed{scale:.94;}
  .footer__glass{transition-property:transform,width,height,opacity,scale;}

  /* the capsule provides the hover surface; links only change color,
     same as the header nav's a:not(.nav__cta):hover rule above */
  .footer ul a:hover{
    background:none; border-color:transparent; box-shadow:none;
    backdrop-filter:none; -webkit-backdrop-filter:none;
    transform:none;
  }
  .footer ul a:hover{color:var(--brand-strong);}
}
@media (prefers-reduced-motion: reduce){
  .footer__glass{transition:opacity .01ms !important;}
}

/* ---------- icon headers on cards ---------- */
.card__head{display:flex; align-items:center; gap:14px; margin-bottom:14px;}
.card__head h3{margin:0;}
.card__head .card__icon{margin:0; flex:none; width:48px; height:48px; border-radius:14px;
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset, 0 -1px 0 rgba(0,0,0,.14) inset, 0 8px 18px -8px rgba(14,27,23,.45);}
.card__icon svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}

/* =========================================================
   LIQUID GLASS — HOVER (iOS 26 feel)
   On hover the surface becomes more transparent, magnifies
   slightly, gains a bright rim + inner glow, and a specular
   highlight tracks the pointer (--mx/--my set in main.js).
   ========================================================= */
:root{
  --spot:rgba(255,255,255,0.85);
  --rim:rgba(255,255,255,0.95);
  --glass-lens:blur(26px) saturate(240%) brightness(1.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --spot:rgba(255,255,255,0.28); --rim:rgba(255,255,255,0.55); --glass-lens:blur(26px) saturate(220%) brightness(1.15); }
}

.btn::after, .nav__cta::after, .nav__glass::after, .footer__glass::after{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:0;
  background:radial-gradient(110px circle at var(--mx,50%) var(--my,0%), var(--spot), rgba(255,255,255,0) 68%);
  transition:opacity .25s ease;
}
.btn:hover::after, .nav__cta:hover::after, .nav__glass.is-visible::after, .footer__glass.is-visible::after{opacity:1;}
.nav__glass::after{z-index:0;}

.btn, .nav__cta{transition:transform .35s cubic-bezier(.34,1.56,.5,1), box-shadow .25s ease, background .25s ease, border-color .25s ease, backdrop-filter .25s ease;}
.btn:hover, .nav__cta:hover{
  transform:translateY(-2px) scale(1.045);
  backdrop-filter:var(--glass-lens); -webkit-backdrop-filter:var(--glass-lens);
  border-color:var(--rim) !important;
}
.btn--gold:hover, .nav__cta:hover{
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 14px 22px -10px rgba(255,255,255,0.45) inset,
    0 -1px 0 rgba(0,0,0,0.16) inset,
    0 0 0 4px rgba(15,127,98,0.12),
    0 20px 36px -12px rgba(11,107,83,0.75);
}
.btn--ghost:hover{
  background:linear-gradient(135deg, rgba(255,255,255,0.92), rgba(196,236,222,0.55));
  box-shadow:
    0 1px 0 #fff inset,
    0 12px 20px -10px rgba(255,255,255,0.9) inset,
    0 0 0 1px var(--glass-edge),
    0 0 0 4px rgba(15,127,98,0.10),
    0 18px 34px -14px rgba(14,27,23,0.35);
}
.btn:active, .nav__cta:active{transform:translateY(0) scale(.965); transition-duration:.12s;}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn--ghost:hover{
    background:linear-gradient(135deg, rgba(255,255,255,0.20), rgba(63,208,160,0.16));
    box-shadow:0 1px 0 rgba(255,255,255,0.4) inset, 0 12px 20px -10px rgba(255,255,255,0.18) inset, 0 0 0 4px rgba(63,208,160,0.10), 0 18px 34px -14px rgba(0,0,0,0.75);
  }
}

/* text-link glass surfaces get the same lens + tracking highlight */
.footer a:hover, .faq summary:hover, .faq[open] summary{
  background:radial-gradient(90px circle at var(--mx,50%) var(--my,50%), var(--spot), rgba(255,255,255,0) 70%), var(--glass-bg-hover);
  backdrop-filter:var(--glass-lens); -webkit-backdrop-filter:var(--glass-lens);
  border-color:var(--rim);
  box-shadow:0 1px 0 var(--rim) inset, 0 10px 18px -10px rgba(255,255,255,0.5) inset, 0 8px 22px -12px rgba(14,27,23,0.35);
}
.footer a{transition:background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease, transform .3s cubic-bezier(.34,1.56,.5,1);}
.footer a:hover{transform:scale(1.05);}
p a:hover, .faq__body a:hover, .legal a:hover{background:var(--brand-soft); box-shadow:0 0 0 3px var(--brand-soft);}

/* sliding nav capsule: stronger lens + pointer-following sheen */
@media (min-width:821px){
  .nav__glass{
    backdrop-filter:var(--glass-lens); -webkit-backdrop-filter:var(--glass-lens);
    border-color:var(--rim);
    box-shadow:0 1px 0 var(--rim) inset, 0 12px 18px -10px rgba(255,255,255,0.55) inset, 0 0 0 1px var(--glass-edge), 0 10px 24px -12px rgba(14,27,23,0.35);
  }
}

/* ---------- App Store badges ---------- */
.store-badge{display:inline-block; line-height:0; border-radius:10px; transition:transform .3s cubic-bezier(.34,1.56,.5,1), filter .25s ease;}
.store-badge img{height:40px; width:auto; display:block;}
.store-badge:hover{transform:translateY(-2px) scale(1.05); filter:drop-shadow(0 10px 18px rgba(14,27,23,.35));}
.store-badge:active{transform:scale(.97);}
.store-badge--lg img{height:56px;}
.nav__store{display:flex; align-items:center; margin-left:6px;}
.nav__store .store-badge img{height:38px;}
.nav__links a.store-badge, .nav__links a.store-badge:hover{padding:0; border:0; background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; border-radius:10px;}
.store-badge--disabled{pointer-events:none; cursor:default; opacity:.5; filter:grayscale(.25) !important; transform:none !important;}
.coming-soon-tag{display:inline-block; margin-left:10px; padding:4px 10px; border-radius:999px; font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; color:var(--accent-label); border:1px solid currentColor; background:transparent; vertical-align:middle; opacity:.9;}
.nav__store{flex-wrap:nowrap;}
.coming-soon-tag--lg{display:block; margin:14px auto 0; width:max-content; font-size:.76rem; padding:6px 16px;}
.get-app h2{margin-bottom:.4em;}
@media (max-width:980px) and (min-width:821px){ .nav__store{display:none;} }
@media (max-width:820px){ .nav__store{margin:18px 0 0; justify-content:center;} .nav__links li.nav__store{border-bottom:0;} }

/* =========================================================
   LIQUID GLASS v2
   What makes iOS glass read as glass:
   1) something colorful behind it  -> soft "aurora" page backdrop
   2) lighter tint, real blur + saturation, thin lensing
   3) a rim that catches light: bright top-left, dim sides,
      bright bottom-right (gradient border, masked to a ring)
   4) specular sheen + a highlight that follows the pointer
   5) refraction of what's underneath (Chromium: SVG displacement)
   6) springy magnify on hover, squish + brighten on press
   ========================================================= */
@property --spot-r{syntax:'<length>'; inherits:true; initial-value:0px;}

/* 1) aurora behind everything so glass has color to bend */
body::before{
  content:''; position:fixed; inset:-12%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(36% 40% at 12% 16%, rgba(63,208,160,.34), transparent 70%),
    radial-gradient(32% 38% at 90% 10%, rgba(47,127,160,.26), transparent 70%),
    radial-gradient(38% 42% at 80% 84%, rgba(231,201,137,.36), transparent 70%),
    radial-gradient(34% 38% at 8% 90%, rgba(11,107,83,.24), transparent 70%);
  animation:pm-aurora 26s ease-in-out infinite alternate;
}
@keyframes pm-aurora{to{transform:translate3d(3%,2.5%,0) scale(1.07);}}
@media (prefers-reduced-motion: reduce){ body::before{animation:none;} }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body::before{
    background:
      radial-gradient(36% 40% at 12% 16%, rgba(63,208,160,.22), transparent 70%),
      radial-gradient(32% 38% at 90% 10%, rgba(47,127,160,.22), transparent 70%),
      radial-gradient(38% 42% at 80% 84%, rgba(231,201,137,.13), transparent 70%),
      radial-gradient(34% 38% at 8% 90%, rgba(11,107,83,.30), transparent 70%);
  }
}
/* let the aurora show through page-level surfaces */
.hero{background:radial-gradient(55% 60% at 88% 0%, var(--hero-glow-1), transparent 65%), transparent;}
.section--paper{background:rgba(243,247,245,.55);}
.footer{background:rgba(243,247,245,.62); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .section--paper{background:rgba(15,27,24,.55);}
  :root:not([data-theme="light"]) .footer{background:rgba(10,19,17,.6);}
}

/* rim + sheen tokens (dark is the default here, matching the
   main token convention at the top of the file — this block
   used to do it backwards: light-safe values as the unconditional
   default with a dark override, the opposite of every other token
   block in the file. Values are unchanged, just reassigned to
   match the file-wide convention, so nothing renders differently.) */
:root{
  --rim-grad:linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.12) 26%, rgba(255,255,255,.03) 60%, rgba(255,255,255,.55) 100%);
  --glass-lite:blur(9px) saturate(180%) brightness(1.12);
  --glass-lite-hover:blur(12px) saturate(220%) brightness(1.2);
  --glass-bg:rgba(255,255,255,.08);
  --glass-bg-hover:rgba(255,255,255,.15);
}
@media (prefers-color-scheme: light){
  :root{
    --rim-grad:linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.22) 26%, rgba(255,255,255,.05) 60%, rgba(255,255,255,.9) 100%);
    --glass-lite:blur(9px) saturate(190%) brightness(1.05);
    --glass-lite-hover:blur(12px) saturate(230%) brightness(1.08);
    --glass-bg:rgba(255,255,255,.30);
    --glass-bg-hover:rgba(255,255,255,.46);
  }
}

/* 2–4) shared glass structure */
.btn, .nav__cta, .nav__toggle{
  border:0 !important; position:relative; isolation:isolate; overflow:hidden;
  transition:transform .4s cubic-bezier(.34,1.56,.5,1), background .25s ease, box-shadow .25s ease, --spot-r .4s ease, backdrop-filter .25s ease !important;
}
.btn::before, .nav__cta::before, .nav__toggle::before, .nav__glass::before, .footer__glass::before{
  content:''; position:absolute; inset:0; z-index:1; border-radius:inherit; padding:1.5px; pointer-events:none;
  background:var(--rim-grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:1;
}
.btn::after, .nav__cta::after, .nav__toggle::after, .nav__glass::after, .footer__glass::after{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:1;
  background:
    radial-gradient(var(--spot-r) circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.75), rgba(255,255,255,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 46%);
}
.btn:hover, .nav__cta:hover{--spot-r:120px;}

/* secondary = clear glass */
.btn--ghost, .nav__toggle{
  color:var(--text-primary);
  background:linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.10)) !important;
  backdrop-filter:var(--glass-lite); -webkit-backdrop-filter:var(--glass-lite);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 0 -10px 16px -10px rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(14,27,23,.07),
    0 0 0 1px rgba(14,27,23,.07),
    0 14px 30px -14px rgba(14,27,23,.38) !important;
}
.btn--ghost:hover{
  background:linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,.18)) !important;
  backdrop-filter:var(--glass-lite-hover); -webkit-backdrop-filter:var(--glass-lite-hover);
  transform:translateY(-2px) scale(1.045); color:var(--brand-strong);
  box-shadow:
    inset 0 1px 1px #fff, inset 0 -12px 18px -10px rgba(255,255,255,.75), inset 0 -1px 0 rgba(14,27,23,.07),
    0 0 0 1px rgba(14,27,23,.08), 0 22px 38px -14px rgba(14,27,23,.42) !important;
}

/* primary = tinted glass */
.btn--gold, .nav__cta{
  color:#fff !important;
  background:linear-gradient(135deg, rgba(22,152,118,.82), rgba(8,92,71,.80)) !important;
  backdrop-filter:var(--glass-lite); -webkit-backdrop-filter:var(--glass-lite);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.7),
    inset 0 -10px 16px -10px rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 0 1px rgba(8,80,62,.35),
    0 18px 34px -12px rgba(11,107,83,.7) !important;
}
.btn--gold:hover, .nav__cta:hover{
  background:linear-gradient(135deg, rgba(34,170,133,.86), rgba(9,100,77,.84)) !important;
  backdrop-filter:var(--glass-lite-hover); -webkit-backdrop-filter:var(--glass-lite-hover);
  transform:translateY(-2px) scale(1.045);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.85), inset 0 -12px 18px -10px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 0 1px rgba(8,80,62,.35), 0 0 0 5px rgba(15,127,98,.14), 0 26px 42px -14px rgba(11,107,83,.8) !important;
}
/* press: squish, get brighter/more transparent like iOS */
.btn:active, .nav__cta:active{transform:translateY(0) scale(.95) !important;}
.btn--gold:active, .nav__cta:active{background:linear-gradient(135deg, rgba(40,180,142,.72), rgba(14,120,92,.7)) !important;}
.btn--ghost:active{background:linear-gradient(135deg, rgba(255,255,255,.6), rgba(255,255,255,.28)) !important;}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn--ghost, :root:not([data-theme="light"]) .nav__toggle{
    background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04)) !important;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.4), inset 0 -10px 16px -10px rgba(255,255,255,.12), 0 0 0 1px rgba(255,255,255,.07), 0 14px 30px -14px rgba(0,0,0,.7) !important;
  }
  :root:not([data-theme="light"]) .btn--ghost:hover{
    background:linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,.08)) !important;
    color:var(--brand-strong);
  }
  :root:not([data-theme="light"]) .btn--gold, :root:not([data-theme="light"]) .nav__cta{
    color:#04231A !important;
    background:linear-gradient(135deg, rgba(102,232,190,.92), rgba(48,190,148,.86)) !important;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.75), inset 0 -10px 16px -10px rgba(255,255,255,.4), 0 0 0 1px rgba(63,208,160,.35), 0 18px 34px -12px rgba(63,208,160,.5) !important;
  }
  :root:not([data-theme="light"]) .btn--gold:hover, :root:not([data-theme="light"]) .nav__cta:hover{
    background:linear-gradient(135deg, rgba(130,240,204,.96), rgba(63,208,160,.9)) !important;
  }
}

/* nav capsule: floats ABOVE the link text so it lenses it, like the iOS tab bar */
@media (min-width:821px){
  .nav__links a:not(.nav__cta){z-index:1;}
  .nav__glass{
    z-index:2; border:0;
    background:linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.08));
    backdrop-filter:saturate(200%) brightness(1.06); -webkit-backdrop-filter:saturate(200%) brightness(1.06);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.95), inset 0 -10px 16px -10px rgba(255,255,255,.55),
      0 0 0 1px rgba(14,27,23,.07), 0 12px 26px -12px rgba(14,27,23,.4);
  }
  .nav__glass::after{z-index:0;}

  /* footer capsule: identical lensed-glass treatment as the nav capsule */
  .footer ul a{z-index:1;}
  .footer__glass{
    z-index:2; border:0;
    background:linear-gradient(135deg, rgba(255,255,255,.34), rgba(255,255,255,.08));
    backdrop-filter:saturate(200%) brightness(1.06); -webkit-backdrop-filter:saturate(200%) brightness(1.06);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.95), inset 0 -10px 16px -10px rgba(255,255,255,.55),
      0 0 0 1px rgba(14,27,23,.07), 0 12px 26px -12px rgba(14,27,23,.4);
  }
  .footer__glass::after{z-index:0;}
}
/* light system appearance: the capsule's rim (drawn by the shared
   --rim-grad pseudo-element border) is tuned bright white for dark
   glass — on a light background it reads as a hard white outline.
   Swap it for a faint dark hairline instead, in the same ink tone as
   the rest of the light theme's borders (--border-hairline), just
   for the nav/footer capsule. */
@media (prefers-color-scheme: light) and (min-width:821px){
  .nav__glass::before, .footer__glass::before{
    background:linear-gradient(135deg, rgba(12,22,19,.20) 0%, rgba(12,22,19,.05) 26%, rgba(12,22,19,.02) 60%, rgba(12,22,19,.16) 100%);
  }
}
@media (prefers-color-scheme: dark) and (min-width:821px){
  :root:not([data-theme="light"]) .nav__glass{
    background:linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.04));
    box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 0 0 1px rgba(255,255,255,.08), 0 12px 26px -12px rgba(0,0,0,.7);
  }
  :root:not([data-theme="light"]) .footer__glass{
    background:linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,255,255,.04));
    box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 0 0 1px rgba(255,255,255,.08), 0 12px 26px -12px rgba(0,0,0,.7);
  }
}

/* 5) refraction (Chromium only; JS adds .has-refraction) */
.has-refraction .btn--ghost,
.has-refraction .btn--gold,
.has-refraction .nav__cta{
  backdrop-filter:url(#pm-refract) blur(4px) saturate(190%) brightness(1.05);
}
.has-refraction .btn--ghost:hover,
.has-refraction .btn--gold:hover,
.has-refraction .nav__cta:hover{
  backdrop-filter:url(#pm-refract) blur(6px) saturate(230%) brightness(1.08);
}
.has-refraction .nav__glass{backdrop-filter:url(#pm-refract-strong) saturate(200%) brightness(1.06);}

@media (prefers-reduced-transparency: reduce){
  .btn--ghost,.nav__toggle{background:var(--surface-card) !important;}
  body::before{display:none;}
}

/* =========================================================
   FLAT BUTTONS — glass removed from buttons (kept on the
   sliding nav indicator only). Overrides Liquid Glass v1/v2.
   ========================================================= */
.btn, .nav__cta, .nav__toggle{
  overflow:visible; isolation:auto;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease !important;
}
.btn::before, .btn::after, .nav__cta::before, .nav__cta::after, .nav__toggle::before, .nav__toggle::after{content:none !important; display:none !important;}

.btn--gold, .nav__cta{
  background:var(--brand) !important; color:var(--on-brand) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.14), 0 6px 16px -8px rgba(11,107,83,.55) !important;
}
.btn--gold:hover, .nav__cta:hover{
  background:var(--brand-strong) !important; transform:translateY(-1px);
  box-shadow:0 1px 2px rgba(0,0,0,.14), 0 10px 22px -10px rgba(11,107,83,.6) !important;
}
.btn--ghost, .nav__toggle{
  background:var(--surface-card) !important; color:var(--text-primary);
  box-shadow:inset 0 0 0 1px var(--ghost-border) !important;
}
.btn--ghost:hover{
  background:var(--brand-soft) !important; color:var(--brand-strong); transform:translateY(-1px);
  box-shadow:inset 0 0 0 1px var(--brand) !important;
}
.btn:active, .nav__cta:active{transform:scale(.98) !important;}
.btn--gold:active, .nav__cta:active{background:var(--brand-strong) !important;}
.btn--ghost:active{background:var(--brand-soft) !important;}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn--gold, :root:not([data-theme="light"]) .nav__cta{
    background:var(--brand) !important; color:var(--on-brand) !important;
    box-shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 16px -8px rgba(63,208,160,.45) !important;
  }
  :root:not([data-theme="light"]) .btn--gold:hover, :root:not([data-theme="light"]) .nav__cta:hover{background:var(--brand-strong) !important;}
  :root:not([data-theme="light"]) .btn--ghost, :root:not([data-theme="light"]) .nav__toggle{
    background:rgba(255,255,255,.05) !important; box-shadow:inset 0 0 0 1px var(--ghost-border) !important;
  }
  :root:not([data-theme="light"]) .btn--ghost:hover{background:var(--brand-soft) !important; box-shadow:inset 0 0 0 1px var(--brand) !important;}
}

/* nav indicator: sits BEHIND the link text (no lensing, so no doubled text) */
@media (min-width:821px){
  .nav__glass{z-index:0; backdrop-filter:blur(10px) saturate(180%) !important; -webkit-backdrop-filter:blur(10px) saturate(180%) !important;}
  .nav__links a:not(.nav__cta):not(.store-badge){z-index:1;}
}

/* ---------- app screenshots in feature cards ---------- */
.card:has(> .screen){display:flex; flex-direction:column;}
.screen{margin:22px 0 0; padding-top:4px; display:flex; justify-content:center; margin-top:auto;}
.card > p + .screen{margin-top:22px;}
.phone{
  width:min(100%, 250px); border-radius:34px; padding:7px;
  background:linear-gradient(160deg,#2b3532,#0c1311);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 24px 44px -20px rgba(14,27,23,.55), 0 4px 10px rgba(14,27,23,.18);
}
.phone img{width:100%; height:auto; border-radius:27px; display:block; background:#f2f2f7;}
.card .screen{max-width:none;}

/* =========================================================
   BUTTON SYSTEM — single source of truth (last rule wins)
   Two variants everywhere: primary (brand fill) and secondary
   (white/outlined). Same radius, weight, height, hover, focus
   and press behaviour on every page, in light and dark.
   Applies to .btn--gold (primary), .nav__cta (primary),
   .btn--ghost and .nav__toggle (secondary).
   ========================================================= */
html:root:not([data-x]) .btn,
html:root:not([data-x]) .nav__cta{
  font-family:var(--font-body); font-weight:600; letter-spacing:0; text-decoration:none;
  border-radius:999px; border:0 !important; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:12px 26px; font-size:1rem; line-height:1.2;
  overflow:visible; isolation:auto;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  transition:background-color .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease !important;
}
html:root:not([data-x]) .nav__cta{min-height:44px; padding:10px 22px; font-size:.95rem;}
html:root:not([data-x]) .btn::before, html:root:not([data-x]) .btn::after,
html:root:not([data-x]) .nav__cta::before, html:root:not([data-x]) .nav__cta::after,
html:root:not([data-x]) .nav__toggle::before, html:root:not([data-x]) .nav__toggle::after{content:none !important; display:none !important;}

/* primary */
html:root:not([data-x]) .btn--gold,
html:root:not([data-x]) .nav__cta{
  background:var(--brand) !important; color:var(--on-brand) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.14), 0 6px 16px -8px var(--brand) !important;
}
html:root:not([data-x]) .btn--gold:hover,
html:root:not([data-x]) .nav__cta:hover,
html:root:not([data-x]) .btn--gold:active,
html:root:not([data-x]) .nav__cta:active{
  background:var(--brand-strong) !important; color:var(--on-brand) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.14), 0 10px 22px -10px var(--brand) !important;
}

/* secondary */
html:root:not([data-x]) .btn--ghost,
html:root:not([data-x]) .nav__toggle{
  background:var(--surface-card) !important; color:var(--text-primary) !important;
  box-shadow:inset 0 0 0 1px var(--ghost-border) !important;
}
html:root:not([data-x]) .btn--ghost:hover,
html:root:not([data-x]) .btn--ghost:active,
html:root:not([data-x]) .nav__toggle:hover{
  background:var(--brand-soft) !important; color:var(--brand-strong) !important;
  box-shadow:inset 0 0 0 1px var(--brand) !important;
}

/* shared states */
html:root:not([data-x]) .btn:hover, html:root:not([data-x]) .nav__cta:hover{transform:translateY(-1px);}
html:root:not([data-x]) .btn:active, html:root:not([data-x]) .nav__cta:active{transform:scale(.98) !important;}
html:root:not([data-x]) .btn:focus-visible, html:root:not([data-x]) .nav__cta:focus-visible, html:root:not([data-x]) .nav__toggle:focus-visible{outline:3px solid var(--brand); outline-offset:3px;}
html:root:not([data-x]) .btn[disabled], html:root:not([data-x]) .btn[aria-busy="true"]{opacity:.6; cursor:not-allowed; transform:none;}
html:root:not([data-x]) .btn--block{width:100%;}

/* mobile menu CTA matches the desktop button */
@media (max-width:820px){
  html:root:not([data-x]) .nav__links .nav__cta{display:flex; width:100%; min-height:48px; margin-top:20px; font-size:1rem;}
}

/* ---------- brand: bigger, clearer logo and wordmark ---------- */
.brand{gap:12px; font-size:1.6rem; font-weight:600; letter-spacing:-0.02em; line-height:1;}
.brand__mark{
  width:46px; height:46px; border-radius:12px; object-fit:cover; flex:none;
  box-shadow:0 0 0 1px rgba(14,27,23,.10), 0 8px 18px -8px rgba(11,27,60,.55);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brand__mark{box-shadow:0 0 0 1.5px rgba(255,255,255,.30), 0 8px 22px -6px rgba(102,224,183,.35);}
}
.footer .brand{font-size:1.8rem;}
.footer .brand__mark{width:58px; height:58px; border-radius:15px;}
@media (max-width:820px){
  .brand{font-size:1.4rem; gap:10px;}
  .brand__mark{width:40px; height:40px; border-radius:10px;}
}
/* real app icon as the hero centerpiece */
.orbit__center{padding:0; overflow:hidden; background:none !important; border-radius:26px; box-shadow:0 22px 46px -18px rgba(11,27,60,.65), 0 0 0 1px rgba(255,255,255,.35);}
.orbit__center img{width:100%; height:100%; object-fit:cover; border-radius:inherit;}

/* ---------- brand size step up ---------- */
.nav__row{padding-top:12px; padding-bottom:12px;}
.brand{font-size:1.9rem; gap:14px;}
.brand__mark{width:58px; height:58px; border-radius:15px;}
.footer .brand{font-size:2.1rem;}
.footer .brand__mark{width:72px; height:72px; border-radius:18px;}
[id]{scroll-margin-top:100px;}
.orbit__center{width:124px; height:124px; border-radius:30px;}
@media (max-width:980px){ .orbit__center{width:88px; height:88px; border-radius:22px;} }
@media (max-width:820px){
  .brand{font-size:1.5rem; gap:10px;}
  .brand__mark{width:46px; height:46px; border-radius:12px;}
  .nav__links{inset:72px 0 0 0;}
}

/* =========================================================
   WEBSITE BUTTONS: hover = the header's glass capsule look
   (header itself is unchanged). Resting colors stay as-is;
   on hover the button becomes the same frosted pill with a
   soft rim, shadow, and a pointer-following highlight.
   ========================================================= */
html:root:not([data-x]) .btn--gold:hover,
html:root:not([data-x]) .btn--gold:active,
html:root:not([data-x]) .btn--ghost:hover,
html:root:not([data-x]) .btn--ghost:active{
  background:
    radial-gradient(90px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
    linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.22)) !important;
  backdrop-filter:blur(8px) saturate(200%) !important; -webkit-backdrop-filter:blur(8px) saturate(200%) !important;
  color:var(--brand-strong) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 0 -10px 16px -10px rgba(255,255,255,.55),
    0 0 0 1px rgba(14,27,23,.08),
    0 12px 26px -12px rgba(14,27,23,.4) !important;
}
/* light system appearance: the values above are tuned for a dark
   page (bright white reads as frosted glass there). On the light
   parchment background they read as a flat, opaque white button
   instead, because the hover rule's `background` shorthand resets
   background-color to transparent — the white layers were painting
   over the page behind the button, not over the button's own green,
   so there was nothing for them to "tint". Ghost (secondary) buttons
   are meant to be white already, so just tone their glow down; gold
   (primary/CTA) buttons get an explicit green base layer under the
   frosted white so the brand color actually shows through the glass. */
@media (prefers-color-scheme: light){
  html:root:not([data-x]) .btn--ghost:hover,
  html:root:not([data-x]) .btn--ghost:active{
    background:
      radial-gradient(90px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.5), rgba(255,255,255,0) 70%),
      linear-gradient(135deg, rgba(255,255,255,.30), rgba(255,255,255,.10)) !important;
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.6),
      inset 0 -10px 16px -10px rgba(255,255,255,.3),
      0 0 0 1px rgba(12,22,19,.14),
      0 12px 26px -12px rgba(14,27,23,.28) !important;
  }
  html:root:not([data-x]) .btn--gold:hover,
  html:root:not([data-x]) .btn--gold:active{
    background:
      radial-gradient(90px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.45), rgba(255,255,255,0) 70%),
      linear-gradient(135deg, rgba(255,255,255,.30), rgba(255,255,255,.08)),
      linear-gradient(135deg, var(--brand), var(--brand-strong)) !important;
    color:#fff !important;
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.5),
      inset 0 -10px 16px -10px rgba(255,255,255,.22),
      0 0 0 1px rgba(8,80,62,.35),
      0 12px 26px -12px rgba(11,107,83,.5) !important;
  }
}
@media (prefers-color-scheme: dark){
  html:root:not([data-x]) .btn--gold:hover,
  html:root:not([data-x]) .btn--gold:active,
  html:root:not([data-x]) .btn--ghost:hover,
  html:root:not([data-x]) .btn--ghost:active{
    background:
      radial-gradient(90px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.28), rgba(255,255,255,0) 70%),
      linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.05)) !important;
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.4),
      inset 0 -10px 16px -10px rgba(255,255,255,.12),
      0 0 0 1px rgba(255,255,255,.10),
      0 12px 26px -12px rgba(0,0,0,.7) !important;
  }
}

/* ---------- tighter vertical rhythm ---------- */
.section{padding:60px 0;}
.section--tight{padding:40px 0;}
.hero{padding:76px 0 60px !important;}
.hero:has(.hero__row){padding:88px 0 64px !important;}
/* two plain sections in a row shouldn't stack both paddings */
.section:not(.section--paper):not(.section--divider) + .section:not(.section--paper):not(.section--divider){padding-top:8px;}
.hero + .section:not(.section--paper){padding-top:44px;}
@media (max-width:900px){
  .section{padding:44px 0;}
  .section--tight{padding:32px 0;}
  .hero{padding:52px 0 40px !important;}
  .hero:has(.hero__row){padding:60px 0 44px !important;}
}

/* ---------- "Beyond the basics": stronger card headers ---------- */
#beyond .card{padding:28px;}
#beyond .card__head{gap:16px; margin-bottom:16px;}
#beyond .card__head h3{font-size:1.4rem; font-weight:600; letter-spacing:-0.015em; line-height:1.2; color:var(--text-primary);}
#beyond .card__head .card__icon{width:54px; height:54px; border-radius:16px;}
#beyond .card__icon svg{width:28px; height:28px;}

/* ---------- site-wide: prominent card headers ---------- */
.card__head h3{font-size:1.3rem !important; font-weight:600; letter-spacing:-0.015em; line-height:1.2;}
.card__head .card__icon{width:50px; height:50px; border-radius:14px;}
.card__head .card__icon svg{width:26px; height:26px;}
.card > .card__head + p{margin-top:0;}

/* ---------- topical icons inside list boxes ---------- */
.contact-card__icon svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.contact-card__icon.is-no{background:rgba(193,80,59,.14); color:#C1503B;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .contact-card__icon.is-no{background:rgba(232,120,96,.16); color:#F0937D;} }
.iconlist li{padding-left:0; display:flex; gap:14px; align-items:flex-start;}
.iconlist li::before{content:none;}
.li-icon{flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand-strong);}
.li-icon svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.iconlist{gap:16px;}

/* ---------- topical icons inside list boxes ---------- */
.contact-card__icon svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.contact-card__icon.is-no{background:rgba(193,80,59,.14); color:#C1503B;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .contact-card__icon.is-no{background:rgba(232,120,96,.16); color:#F0937D;} }
.iconlist li{padding-left:0; display:flex; gap:14px; align-items:flex-start;}
.iconlist li::before{content:none;}
.li-icon{flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand-strong);}
.li-icon svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.iconlist{gap:16px;}

/* consistent reading width on long-form legal pages */
.legal ul, .legal ol:not([aria-label]){max-width:68ch;}

/* ---------- home: "Why we built PerkMind" ---------- */
.why__story{margin-top:22px; max-width:78ch;}
.why__story .lede{max-width:none; color:var(--text-lede);}
.why__story p{max-width:none;}
.why__label{margin:18px 0 4px; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-secondary); opacity:.85;}
.why__label--answer{color:var(--brand);opacity:1;}
#why-we-built .card p:not(.why__label){font-size:.98rem;}
.why__principles{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:34px; border-top:1px solid var(--border-hairline); border-bottom:1px solid var(--border-hairline);}
.why__principles > div{padding:22px 24px; border-left:1px solid var(--border-hairline);}
.why__principles > div:first-child{border-left:0; padding-left:0;}
.why__principles strong{display:block; font-family:var(--font-display); font-size:1.25rem; font-weight:500; margin-bottom:4px; color:var(--text-primary);}
.why__principles span{display:block; color:var(--text-secondary); line-height:1.5;}
.why__note{margin-top:18px; font-size:.86rem; color:var(--text-secondary); max-width:none;}
@media (max-width:820px){
  .why__principles{grid-template-columns:1fr;}
  .why__principles > div{border-left:0; border-top:1px solid var(--border-hairline); padding:18px 0;}
  .why__principles > div:first-child{border-top:0;}
}