/* redesign.css — the 2026 app redesign applied to the site.
   Loaded after landing.css on every page. Source: Figma file WtAEqmtXI5wJxASABH6Dsc,
   page "Design system" (snapshot: superproject design/figma-reference/design-system/tokens.md).

   - Type: Inter only. Headlines are Bold/SemiBold with slight negative tracking; the old
     serif display (Marcellus) and parchment italic (IM Fell English) are retired here.
   - Color: Dark basic #443838 text, Accent blue #3F6DF8, "Gradient blue" #3F6DF8 → #7E6EE8
     for emphasis, "Gradient progress" #FECB12 → #EA8149 for progression/XP.
   - Surfaces: white and frosted glass (backdrop-blur), capsule buttons, no warm parchment. */

:root{
  --font-sans:'Inter',-apple-system,system-ui,'Segoe UI',sans-serif;
  --font-display:'Inter',-apple-system,system-ui,'Segoe UI',sans-serif;
  --font-old:'Inter',-apple-system,system-ui,'Segoe UI',sans-serif;

  --ink:#443838;                 /* Color/Primary/Dark basic */
  --ink-2:rgba(68,56,56,.78);
  --ink-3:rgba(68,56,56,.6);     /* DS secondary-text treatment */
  --faint:#c8c2bd;               /* Color/Additional/Grey */

  --bg:#f4f6fb;
  --surface:#ffffff;
  --surface-2:#eef2fc;

  --line:rgba(68,56,56,.1);
  --line-2:rgba(68,56,56,.06);
  --fill-soft:rgba(63,109,248,.08);
  --fill-track:rgba(68,56,56,.2);  /* Dark opacity 20 */

  --accent:#3f6df8;              /* Color/Primary/Accent blue */
  --accent-d:#2f58d6;
  --accent-tint:rgba(63,109,248,.13);
  --accent-soft:#6b8ae2;         /* Color/Additional/Blue */
  --gold:#ea8149;                /* text-safe end of Gradient progress */
  --yellow:#e7c55d;              /* Color/Additional/Yellow */
  --pink:#df91d7;                /* Color/Additional/Pink */
  --up:#3f6df8;

  --grad-blue:linear-gradient(98.88deg,#3f6df8 29.4%,#7e6ee8 82.07%);
  --grad-progress:linear-gradient(153.64deg,#fecb12 16.18%,#ea8149 91.19%);

  --shadow-s:0 1px 2px rgba(68,56,56,.05),0 4px 14px rgba(68,56,56,.06);
  --shadow-m:0 8px 28px rgba(68,56,56,.10),0 2px 6px rgba(68,56,56,.05);
  --shadow-l:0 24px 60px rgba(40,50,90,.18);
  --shadow-accent:0 8px 22px rgba(63,109,248,.35);

  --radius-l:999px;              /* buttons are capsules in the redesign */
  --radius-xl:20px;
  --radius-2xl:28px;
}

html.dark{
  --ink:#f3eeee;
  --ink-2:rgba(243,238,238,.78);
  --ink-3:rgba(243,238,238,.58);
  --faint:rgba(243,238,238,.4);
  --bg:#141521;
  --surface:#1d1f2e;
  --surface-2:#191a27;
  --line:rgba(255,255,255,.1);
  --line-2:rgba(255,255,255,.06);
  --fill-soft:rgba(107,138,226,.14);
  --fill-track:rgba(255,255,255,.14);
  --accent:#6b8ae2;
  --accent-d:#5a7ad6;
  --accent-tint:rgba(107,138,226,.18);
  --gold:#fecb12;
  --up:#6b8ae2;
}

html{overflow-x:clip;}   /* decorative glows/halos must never create sideways scroll */
body{font-size:17px;line-height:1.5;letter-spacing:-.005em;}
html.dark body{background:var(--bg);}

/* ambient "mist" — soft blue/violet light instead of the warm parchment wash */
body::before,html.dark body::before{
  opacity:1;
  background:
    radial-gradient(circle at 12% 8%, rgba(63,109,248,.10), transparent 40%),
    radial-gradient(circle at 88% 30%, rgba(126,110,232,.09), transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(223,145,215,.07), transparent 45%);
}

/* ─── type ─── */
.display{font-weight:700;letter-spacing:-.03em;line-height:1.08;}
.serif-italic{font-style:normal;}
/* The emphasis word: Gradient blue text instead of the old serif italic. */
.hero h1 em,.feat-copy h2 em,.pull .q em,.pricing-head h2 em{
  font-style:normal;font-family:inherit;color:var(--accent);
  background:var(--grad-blue);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
html.dark .hero h1 em,html.dark .feat-copy h2 em,html.dark .pull .q em,html.dark .pricing-head h2 em{
  background:linear-gradient(98.88deg,#7f9bff 20%,#b4a7ff 85%);-webkit-background-clip:text;background-clip:text;
}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.08em;}  /* Caption uppercase extra bold */
.eyebrow::before{display:none;}
.eyebrow{background:var(--accent-tint);padding:8px 14px;border-radius:999px;}
.eyebrow.gold{color:#b2541e;background:rgba(254,203,18,.18);}
html.dark .eyebrow.gold{color:var(--gold);}

/* ─── buttons ─── */
.btn{font-weight:700;letter-spacing:.02em;border-radius:999px;}
.btn-primary{background:var(--grad-blue);}
.btn-primary:hover{background:var(--grad-blue);filter:brightness(1.06);}
.btn-ghost{border:1.5px solid var(--line);border-radius:999px;}
.btn-ghost:hover{border-color:var(--accent);}

/* ─── header: frosted glass like the app's map chrome ─── */
.hdr.scrolled{background:rgba(255,255,255,.62);backdrop-filter:blur(35px) saturate(160%);-webkit-backdrop-filter:blur(35px) saturate(160%);}
html.dark .hdr.scrolled{background:rgba(20,21,33,.7);}
.brand{text-decoration:none;font-family:var(--font-sans);font-weight:800;font-size:22px;letter-spacing:-.02em;}
.brand-mark{background:none;box-shadow:var(--shadow-s);border-radius:8px;overflow:hidden;}
.brand-mark img{width:100%;height:100%;display:block;}

/* ─── hero ─── */
.hero-glow{background:radial-gradient(circle,rgba(126,110,232,.18),rgba(126,110,232,0) 62%);}
.hero-glow.two{background:radial-gradient(circle,rgba(63,109,248,.16),rgba(63,109,248,0) 62%);}
.hero h1{font-size:64px;}
.hero-sub{font-size:19px;}
.cta-note svg{color:var(--accent);}
.float-chip{background:rgba(255,255,255,.72);backdrop-filter:blur(35px);-webkit-backdrop-filter:blur(35px);
  border:2px solid rgba(255,255,255,.9);border-radius:20px;color:var(--ink);}
html.dark .float-chip{background:rgba(29,31,46,.75);border-color:var(--line);}
.float-chip .ic{border-radius:999px;}
.float-chip .ic.xp{background:var(--grad-progress);}

/* ─── features ─── */
.feat-copy h2{font-size:44px;}
.feat-list .tick{border-radius:999px;}
.feat-halo{background:radial-gradient(circle,rgba(63,109,248,.12),transparent 60%);}
.feature.flip .feat-halo{background:radial-gradient(circle,rgba(223,145,215,.14),transparent 60%);}
.capture-video{background:#dfe5f2;}
html.dark .capture-video{background:#141521;}
.pull .q{font-weight:700;letter-spacing:-.03em;}

/* feature card grid (all App Store feature groups, as indexable text) */
.cards{padding:90px 0;position:relative;z-index:1;}
.cards-head{text-align:center;margin:0 auto 46px;max-width:44em;}
.cards-head .eyebrow{justify-content:center;}
.cards-head h2{font-size:42px;margin:16px 0 0;}
.cards-head p{color:var(--ink-2);font-size:18px;margin:16px auto 0;}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.fcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-2xl);padding:28px;box-shadow:var(--shadow-s);}
.fcard h3{font-size:18px;font-weight:700;line-height:1.33;margin:16px 0 8px;letter-spacing:-.01em;}  /* Headline 4 */
.fcard p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.5;}
.fcard .ic{width:48px;height:48px;border-radius:999px;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--grad-blue);}
.fcard .ic svg{width:24px;height:24px;}
.fcard .ic.y{background:var(--grad-progress);}
.fcard .ic.p{background:linear-gradient(150deg,#df91d7,#7e6ee8);}

/* ─── pricing ─── */
.price-name{font-weight:700;letter-spacing:-.01em;}
.price-amount .amt{font-weight:800;letter-spacing:-.03em;}
.price-badge{background:var(--grad-progress);color:#443838;box-shadow:0 6px 16px rgba(234,129,73,.35);}
.price-card.featured{border-color:var(--accent);}

/* ─── final CTA: the onboarding blue gradient ─── */
.final-card{background:linear-gradient(135deg,#3f6df8 10%,#7e6ee8 90%);box-shadow:var(--shadow-l);}
.final-card::before{opacity:.6;background:
  radial-gradient(circle at 80% 15%,rgba(255,255,255,.22),transparent 45%),
  radial-gradient(circle at 10% 95%,rgba(223,145,215,.35),transparent 45%);}
.final-card .eyebrow{color:#fff;background:rgba(255,255,255,.2);}
.final-card h2{font-weight:700;letter-spacing:-.03em;}
.final-card h2 em{font-style:normal;font-family:inherit;color:#fecb12;}
.final-card p,.final .cta-note{color:rgba(255,255,255,.85);}
.final .cta-note svg{color:#fff;}
html.dark .final-card{background:linear-gradient(135deg,#2f4fbf 10%,#5a4cb8 90%);}

/* ─── FAQ / footer ─── */
.qa summary{font-weight:600;font-size:18px;}
.foot{background:#2c2424;}
html.dark .foot{background:#0e0f18;}
.foot-tag{font-family:var(--font-sans);font-style:normal;font-weight:500;}
.cc-title{font-weight:700;}
.cc-btn{border-radius:999px;}

/* ─── sticky mobile CTA ─── */
.sticky-cta{background:rgba(255,255,255,.72);backdrop-filter:blur(35px);-webkit-backdrop-filter:blur(35px);}
html.dark .sticky-cta{background:rgba(20,21,33,.8);}

@media (max-width:920px){
  .card-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:620px){
  .hero h1{font-size:40px;}
  .feat-copy h2,.cards-head h2{font-size:32px;}
  .card-grid{grid-template-columns:1fr;}
  .cards{padding:64px 0;}
}

/* Phones sit flat. Any rotate() makes the browser resample every pixel of the capture,
   which undoes the exact-DPR srcset (282/564/846 px = 1:1 paint) and softens UI text in
   the videos. The redesign is flat anyway. */
.hero .phone,.feature .phone,.feature.flip .phone{transform:none;}