/* ───────────────────────── Appix · pastel-soft system ───────────────────────── */

:root{
  /* Type */
  --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Surfaces — Lilac Wash (default) */
  --bg: #FCFAF7;
  --bg-tint: #F4F0FA;          /* soft lilac wash */
  --surface: #FFFFFF;
  --ink: #1A1426;
  --ink-soft: #45395A;
  --muted: #8278A0;
  --line: #ECE6F4;
  --line-strong: #DCD3E8;

  /* Brand */
  --primary: #7C3AED;          /* Symptra purple */
  --primary-deep: #5B21B6;
  --primary-soft: #EDE3FF;
  --accent: #F26B1F;           /* warm orange */
  --accent-soft: #FCE3CF;
  --studio: #0F8F66;

  /* Pastel auras — the visual signature */
  --aura-pink:  #F4C2EB;
  --aura-blue:  #BDC7F8;
  --aura-sky:   #C3DBFC;
  --aura-peach: #FCE3CF;
  --aura-mint:  #C8EDDD;
  --aura-lilac: #DCC8FE;

  /* Density */
  --section-pad: clamp(48px, 5vw, 88px);
  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1240px;

  /* Shape */
  --r-card: 28px;
  --r-card-sm: 18px;
  --r-pill: 999px;
  --r-phone: 44px;

  --shadow-card: 0 1px 0 rgba(122, 84, 209, .04), 0 18px 40px -16px rgba(45, 26, 80, .12);
  --shadow-phone: 0 50px 100px -28px rgba(45, 26, 80, .32), 0 18px 40px -16px rgba(45, 26, 80, .18);
  --shadow-pop: 0 1px 0 rgba(0,0,0,.04), 0 4px 12px -2px rgba(45, 26, 80, .08);
}

/* Palette — Warm Paper (legacy / cozy) */
html[data-palette="warm"]{
  --bg:#FAF7F1; --bg-tint:#F4EFE5; --surface:#FFFFFF;
  --ink:#14110D; --ink-soft:#3A342B; --muted:#7A7367;
  --line:#E8E1D2; --line-strong:#D8CFB9;
  --primary:#6D28D9; --primary-deep:#4C1D95; --primary-soft:#EDE6FE;
  --accent:#F26B1F; --accent-soft:#FCE3CF;
  --aura-pink:#F8D8C6; --aura-blue:#DCD0EC; --aura-sky:#EFE6FF; --aura-peach:#FCE3CF; --aura-lilac:#E6D7FE;
}
/* Palette — Cool Mist */
html[data-palette="mist"]{
  --bg:#F6FAFA; --bg-tint:#EAF2F2; --surface:#FFFFFF;
  --ink:#0E1B22; --ink-soft:#2A3A45; --muted:#6A7C86;
  --line:#DBE6E6; --line-strong:#C2D2D4;
  --primary:#0E7C6B; --primary-deep:#0A5A4D; --primary-soft:#D6F2EC;
  --accent:#F26B1F; --accent-soft:#FCE3CF;
  --aura-pink:#C8EDDD; --aura-blue:#BDD9F8; --aura-sky:#D6EEF8; --aura-peach:#FCE3CF; --aura-lilac:#D0E7E0;
}
/* Palette — Bold Symptra (high-contrast purple) */
html[data-palette="bold"]{
  --bg:#FFFFFF; --bg-tint:#F5EEFF; --surface:#FFFFFF;
  --ink:#10071F; --ink-soft:#2D1D49; --muted:#6E5F88;
  --line:#ECE0FB; --line-strong:#D6BEFA;
  --primary:#7C3AED; --primary-deep:#5B21B6; --primary-soft:#EDE3FF;
  --accent:#F26B1F; --accent-soft:#FCE3CF;
  --aura-pink:#F4C2EB; --aura-blue:#BDC7F8; --aura-sky:#C3DBFC; --aura-peach:#FCE3CF; --aura-lilac:#DCC8FE;
}

/* Density */
html[data-density="airy"]{ --section-pad: clamp(112px, 11vw, 180px); }
html[data-density="dense"]{ --section-pad: clamp(56px, 6vw, 96px); }

/* ───────── Base ───────── */
*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; -webkit-tap-highlight-color: transparent }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-sans);
  font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","ss03","cv11";
  overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font-family:inherit }
::selection{ background:var(--primary); color:#fff }

/* ───────── Typography ───────── */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); font-weight:500;
}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--primary) 22%, transparent);
}
.eyebrow.orange .dot{ background:var(--accent); box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent) }
.eyebrow.studio .dot{ background:var(--studio); box-shadow:0 0 0 4px color-mix(in oklab, var(--studio) 22%, transparent) }

h1,h2,h3,h4{ margin:0; color:var(--ink); font-family:var(--font-display); font-weight:700; letter-spacing:-.028em }
.display{
  font-size: clamp(46px, 7.4vw, 104px);
  line-height: 1.0;
  letter-spacing:-.035em;
  font-weight:700;
}
.display em{ font-style:normal; color:var(--primary-deep); font-weight:700 }
.display .soft{ color:var(--muted); font-weight:600 }

h2.section-title{
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.02;
  letter-spacing:-.028em;
  font-weight:700;
}
h2.section-title em{ font-style:normal; color:var(--primary-deep) }
h2.section-title .soft{ color:var(--muted); font-weight:600 }

h3{ font-size:20px; line-height:1.25; font-weight:700; letter-spacing:-.015em }
h4{ font-weight:600 }

.lede{
  font-size: clamp(17px, 1.4vw, 20px);
  line-height:1.55; color:var(--ink-soft);
  max-width:54ch;
  text-wrap:pretty;
}
.tiny{ font-size:13px; color:var(--muted) }
.mono{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.02em }

/* ───────── Layout ───────── */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); position:relative }
section{ padding-top:var(--section-pad); padding-bottom:var(--section-pad); position:relative }
.section-head{ display:flex; flex-direction:column; gap:14px; margin-bottom:32px; max-width:62ch }
.section-head.center{ margin-left:auto; margin-right:auto; align-items:center; text-align:center }

/* ───────── Aura blobs (the visual signature) ───────── */
.aura{ position:absolute; pointer-events:none; z-index:0; filter: blur(60px); opacity:.78; border-radius:50%; }
.aura.pink  { background: radial-gradient(circle at 50% 50%, var(--aura-pink) 0%, transparent 70%); }
.aura.blue  { background: radial-gradient(circle at 50% 50%, var(--aura-blue) 0%, transparent 70%); }
.aura.sky   { background: radial-gradient(circle at 50% 50%, var(--aura-sky)  0%, transparent 70%); }
.aura.peach { background: radial-gradient(circle at 50% 50%, var(--aura-peach) 0%, transparent 70%); }
.aura.mint  { background: radial-gradient(circle at 50% 50%, var(--aura-mint) 0%, transparent 70%); }
.aura.lilac { background: radial-gradient(circle at 50% 50%, var(--aura-lilac) 0%, transparent 70%); }
.aura-stage{ position:relative; isolation:isolate }
.aura-stage > *{ position:relative; z-index:1 }

/* ───────── Buttons ───────── */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:var(--r-pill);
  font-size:15px; font-weight:600; letter-spacing:-.005em;
  border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--ink); color:#fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 18px -8px rgba(26,20,38,.45);
}
.btn-primary:hover{ background:#000; transform:translateY(-1px) }
.btn-purple{ background:var(--primary); color:#fff; box-shadow: 0 8px 18px -8px color-mix(in oklab, var(--primary) 60%, transparent) }
.btn-purple:hover{ background:var(--primary-deep); transform:translateY(-1px) }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong) }
.btn-ghost:hover{ background:var(--surface); border-color:var(--ink) }

/* Store buttons */
.store-btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:12px 22px 12px 18px; border-radius:18px;
  background:#0B0B0C; color:#fff;
  border:1px solid #0B0B0C; transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  box-shadow: 0 12px 22px -10px rgba(11,11,12,.5);
}
.store-btn:hover{ transform:translateY(-1px); background:#1a1a1d }
.store-btn .icn{ width:24px; height:24px; flex:0 0 24px }
.store-btn .lbls{ display:flex; flex-direction:column; line-height:1.1; text-align:left }
.store-btn .lbls .top{ font-size:10.5px; opacity:.78; letter-spacing:.04em; text-transform:uppercase; font-family:var(--font-mono); font-weight:500 }
.store-btn .lbls .btm{ font-size:16px; font-weight:700; letter-spacing:-.01em }

/* ───────── Nav ───────── */
.nav{
  position:sticky; top:0; z-index:50;
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom:1px solid color-mix(in oklab, var(--line) 60%, transparent);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--gutter); max-width:var(--maxw); margin:0 auto;
}
.brand{ display:inline-flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.02em; font-size:18px; font-family:var(--font-display) }
.brand-mark{
  width:30px; height:30px;
  background: url('favicon.svg') center/contain no-repeat;
  font-size:0;          /* hide the text 'a' inside the <span> — SVG renders the glyph */
  flex-shrink: 0;        /* don't shrink in flex parent */
  box-shadow: 0 4px 10px -2px color-mix(in oklab, var(--primary) 55%, transparent);
  border-radius:50%;    /* safeguard if SVG fails to load — keeps round mask for box-shadow */
}
.nav-links{ display:flex; align-items:center; gap:28px }
.nav-links a{ font-size:14.5px; color:var(--ink-soft); transition:color .15s; font-weight:500 }
.nav-links a:hover{ color:var(--ink) }
.nav-links a.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:var(--r-pill);
  background:var(--ink); color:#fff; font-size:13.5px; font-weight:600;
  transition: background .15s, transform .15s; box-shadow: 0 8px 18px -8px rgba(26,20,38,.5);
}
.nav-links a.nav-cta:hover{ background:#000; transform:translateY(-1px) }

/* ───────── Hero ───────── */
.hero{
  padding-top: clamp(48px, 6vw, 90px);
  padding-bottom: clamp(72px, 8vw, 120px);
  position:relative; overflow:hidden;
  isolation:isolate;
}
.hero-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(32px, 5vw, 80px);
  align-items:center;
}
.hero-left{ display:flex; flex-direction:column; gap:28px }
.hero-meta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.hero-cta-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center }
.hero-trust{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-top:6px;
  font-size:13px; color:var(--muted);
}
.hero-trust .pill{
  padding:7px 14px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line); color:var(--ink-soft);
  font-size:12.5px; font-weight:500; box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.hero-stars{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-soft); font-weight:500 }
.hero-stars .stars{ color:#F2B441 }
.hero-stars .num{ font-weight:700; color:var(--ink) }

/* ── Hero right · single phone in soft glow ── */
.hero-stage{
  position:relative;
  min-height: clamp(520px, 64vw, 720px);
  display:grid; place-items:center;
}
.hero-stage .aura{ width:560px; height:560px }
.hero-stage .aura.a1{ top:-6%;  left:-12%; }
.hero-stage .aura.a2{ bottom:-10%; right:-14%; }
.hero-stage .aura.a3{ top:14%; right:8%; width:380px; height:380px }
.hero-stage .aura.a4{ bottom:8%; left:-2%; width:300px; height:300px }

/* Phone & hand */
.hero-phone-wrap{
  position:relative; z-index:2;
  width: clamp(260px, 34vw, 380px);
  aspect-ratio: 9/19.2;
  transform: rotate(-5deg);
}
.hero-phone-wrap.straight{ transform:none }
.hero-phone-frame{
  position:absolute; inset:0; border-radius:var(--r-phone); overflow:hidden;
  background:#000; border:6px solid #0F0A14;
  box-shadow:
    var(--shadow-phone),
    inset 0 0 0 1px rgba(255,255,255,.06);
}
.hero-phone-frame img{ width:100%; height:100%; object-fit:cover; object-position:top center }
.hero-phone-frame .hp-screen{
  position:absolute; inset:0;
  transform: translateX(100%);
  transition: transform .55s cubic-bezier(.32,.72,.27,1), filter .55s linear;
  will-change: transform, filter;
  filter: brightness(1);
}
.hero-phone-frame .hp-screen.is-active{
  transform: translateX(0);
  /* subtle inner shadow on left edge mimics iOS push */
  box-shadow: -12px 0 24px -8px rgba(0,0,0,.18);
}
.hero-phone-frame .hp-screen.is-prev{
  /* outgoing screen drifts slightly left and dims, like iOS nav pop */
  transform: translateX(-22%);
  filter: brightness(.72);
}
.hero-phone-frame .hp-screen.no-anim{ transition: none !important }
.hero-phone-frame::before{
  content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:96px; height:24px; background:#0F0A14; border-radius:14px; z-index:2;
}
.hero-phone-frame::after{
  content:""; position:absolute; top:14px; left:50%; transform:translateX(28px);
  width:8px; height:8px; border-radius:50%; background:#1F1428; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 0 0 1px rgba(120, 90, 200, .25);
  z-index:3;
}

/* Hand silhouette behind phone (simple SVG) */
.hero-hand{
  position:absolute; bottom:-6%; left:50%; transform:translateX(-50%); width:120%; z-index:1;
  filter: drop-shadow(0 30px 40px rgba(45,26,80,.18));
}
.hero-hand svg{ width:100%; height:auto; display:block }

/* Hero variant — 3-phone stack */
.hero-phone-stack{
  position:relative; width:100%; aspect-ratio: 1/1;
  max-width: 520px; min-height: 480px;
}
.hero-phone-stack .hero-phone-wrap{ position:absolute; width:auto }
.hero-phone-stack .stack-lead{
  left:50%; top:0; transform: translateX(-50%) rotate(-2deg);
  width: 58%; z-index:3;
}
.hero-phone-stack .stack-left{
  left:-2%; top:18%; transform: rotate(-9deg);
  width: 40%; z-index:2;
}
.hero-phone-stack .stack-right{
  right:-2%; top:22%; transform: rotate(7deg);
  width: 40%; z-index:2;
}

/* Hero variant — phone + giant mascot beside */
.hero-mascot-companion{
  position:relative; width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  min-height: 520px;
}
.hero-mascot-companion .hero-phone-wrap{
  position:relative; z-index:2; width: clamp(220px, 26vw, 300px); aspect-ratio: 9/19.2;
}
.hero-mascot-big{
  position:relative; z-index:1; align-self:flex-end;
  margin-bottom: 6%;
  filter: drop-shadow(0 30px 50px rgba(122,84,209,.32));
  animation: float 6s ease-in-out infinite;
}

/* Floating chip badges around the phone (meagain style) */
.hero-chip{
  position:absolute; z-index:3;
  background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:12px 14px;
  box-shadow: var(--shadow-pop);
  display:flex; align-items:center; gap:10px;
  font-size:13.5px; font-weight:600; color:var(--ink);
  animation: float 6s ease-in-out infinite;
}
.hero-chip.c1{ top:6%; left:-8%; animation-delay: -2s }
.hero-chip.c2{ top:42%; right:-14%; }
.hero-chip.c3{ bottom:10%; left:-12%; animation-delay: -4s }
.hero-chip .ic{
  width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  background: var(--primary-soft); color: var(--primary-deep);
}
.hero-chip .ic.peach{ background:var(--aura-peach); color:#A14A13 }
.hero-chip .ic.mint { background:var(--aura-mint); color:#0E5C3F }
.hero-chip .v{ font-family:var(--font-mono); font-weight:600; font-size:12px; color:var(--muted); letter-spacing:.02em }

@keyframes float{
  0%,100%{ transform: translateY(0) }
  50%   { transform: translateY(-8px) }
}

/* ───────── Mascot (Pip) — kept for legacy refs but no longer rendered ───────── */
.mascot{ display:none }

/* ───────── Stack-deck — sticky card stacking on scroll ───────── */
.feature-grid.stack-deck,
.amb-grid.stack-deck{
  display: block;
  /* trail so the last card has room to release */
  padding-bottom: clamp(10px, 4vw, 220px);
}
.feature-grid.stack-deck > .feature,
.amb-grid.stack-deck > .amb-card{
  position: sticky;
  top: calc(var(--stack-top, 96px) + var(--i, 0) * 18px);
  /* solid background ensures stacked cards hide ones beneath */
  background: var(--surface);
  /* keep the card's own display (flex column for .feature, flex column for .amb-card) —
     sticky positioning is fully compatible with flex, and we need flex for inner gap to work */
  margin: 0 0 14px;
}
.feature-grid.stack-deck > .feature:last-child,
.amb-grid.stack-deck > .amb-card:last-child{ margin-bottom: 0 }
/* On wide viewports we keep the original grid */
@media (min-width: 721px){
  .feature-grid.stack-deck{
    display:grid; grid-template-columns: repeat(4, 1fr); gap:20px;
    padding-bottom:0;
  }
  .amb-grid.stack-deck{
    display:grid; grid-template-columns: repeat(4, 1fr); gap:18px;
    padding-bottom:0;
  }
  .feature-grid.stack-deck > .feature,
  .amb-grid.stack-deck > .amb-card{
    position: relative;
    top: auto;
    margin: 0;
  }
}
@media (min-width: 721px) and (max-width: 1080px){
  .feature-grid.stack-deck,
  .amb-grid.stack-deck{ grid-template-columns: repeat(2, 1fr) }
}

/* ───────── Articles hub — meagain-style content shelf ───────── */
.library-band{ position:relative; overflow:hidden; background: linear-gradient(180deg, var(--bg), var(--bg-tint)); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.library-band .aura{ opacity:.55 }
.library-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-bottom: 28px;
}
.library-head .meta{
  display:flex; gap:10px; flex-wrap:wrap; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.library-head .meta strong{ color:var(--ink); font-weight:700 }

.topic-chips{
  display:flex; gap:8px; flex-wrap:wrap; margin: 6px 0 26px;
}
.topic-chip{
  padding:7px 14px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--line);
  color:var(--ink-soft); font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease;
  cursor:pointer;
}
.topic-chip:hover{ border-color:var(--line-strong); transform: translateY(-1px) }
.topic-chip.is-active{ background:var(--ink); color:#fff; border-color:var(--ink) }
.topic-chip .count{
  display:inline-block; margin-left:6px; padding:0 6px; border-radius:999px; background:var(--bg-tint);
  color:var(--muted); font-weight:600; font-size:10.5px;
}
.topic-chip.is-active .count{ background: rgba(255,255,255,.15); color:#C8BFD9 }

.library-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: auto auto;
  gap:18px;
}
.lib-card{
  position:relative; display:flex; flex-direction:column; gap:14px;
  padding:24px; background:var(--surface); border:1px solid var(--line); border-radius:24px;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, border-color .15s ease, box-shadow .2s ease;
  min-height: 240px;
  overflow:hidden;
}
.lib-card:hover{ transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 24px 50px -20px rgba(45,26,80,.18), 0 1px 0 rgba(122,84,209,.04) }
.lib-card[hidden]{ display:none !important }
.lib-card .cat-chip{ align-self:flex-start }
.lib-card h3{ font-size:21px; line-height:1.2; letter-spacing:-.015em }
.lib-card p{ margin:0; font-size:14.5px; color:var(--ink-soft); line-height:1.5; text-wrap:pretty }
.lib-card .foot{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600;
}
.lib-card .read{ color:var(--primary-deep); display:inline-flex; align-items:center; gap:6px }
.lib-card .soon{ color:var(--muted) }
.lib-card.is-feature{ grid-row: 1 / span 2; min-height: 0; padding:0; overflow:hidden; background: linear-gradient(165deg, var(--primary-soft), var(--surface) 70%) }
.lib-card.is-feature .feature-art{
  position:relative; height: 220px; border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 80% at 20% 20%, color-mix(in oklab, var(--aura-pink) 70%, transparent), transparent 70%),
    radial-gradient(80% 80% at 90% 90%, color-mix(in oklab, var(--aura-lilac) 80%, transparent), transparent 70%),
    linear-gradient(180deg, var(--surface), var(--bg-tint));
  overflow:hidden;
}
.lib-card.is-feature .feature-art .stamp{
  position:absolute; top:14px; left:14px;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:var(--r-pill);
  background: var(--ink); color:#fff;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
}
.lib-card.is-feature .feature-art .glyph{
  position:absolute; bottom:-30px; right:-20px;
  width: 220px; height:220px; border-radius:50%;
  background: radial-gradient(120% 120% at 30% 25%, #FFC2D9 0%, var(--primary) 55%, var(--primary-deep) 100%);
  filter: blur(0); opacity:.85;
  box-shadow: 0 24px 60px -16px color-mix(in oklab, var(--primary) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.4);
}
.lib-card.is-feature .feature-art .marks{
  position:absolute; inset:0; padding:18px 22px; display:flex; flex-direction:column; justify-content:flex-end;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); font-weight:600;
}
.lib-card.is-feature .feature-body{ padding: 24px 26px 26px; display:flex; flex-direction:column; gap:12px }
.lib-card.is-feature h3{ font-size: 26px; line-height: 1.1; letter-spacing:-.02em }

.library-foot{
  margin-top: 32px; padding-top:24px; border-top:1px dashed var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600;
}
.library-foot .browse{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:var(--r-pill);
  background:var(--ink); color:#fff;
  font-size:13.5px; letter-spacing:-.005em; text-transform:none; font-weight:600;
  transition: background .15s, transform .15s;
}
.library-foot .browse:hover{ background:#000; transform: translateY(-1px) }

@media (max-width: 1080px){
  .library-grid{ grid-template-columns: 1fr 1fr; grid-template-rows: auto }
  .lib-card.is-feature{ grid-column: 1 / -1; grid-row: auto }
  .lib-card.is-feature .feature-art{ height: 180px }
}
@media (max-width: 620px){
  .library-grid{ grid-template-columns: 1fr }
  .lib-card.is-feature .feature-art{ height: 160px }
  .lib-card.is-feature h3{ font-size: 22px }
}

/* Topic chips can be <button> on filterable pages — strip the UA chrome */
button.topic-chip{
  font-family: inherit; line-height: inherit;
  appearance: none; -webkit-appearance: none;
}
button.topic-chip:focus-visible{
  outline: 2px solid var(--primary-deep); outline-offset: 2px;
}

/* Full library variant — no feature card, equal-size cards in a flex grid */
.library-grid--all{
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: none;
  grid-auto-rows: 1fr;
}
@media (max-width: 1080px){
  .library-grid--all{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 620px){
  .library-grid--all{ grid-template-columns: 1fr }
}

/* Empty state for the filter */
.library-empty{
  margin-top: 32px; padding: 40px 24px;
  border:1px dashed var(--line); border-radius:24px;
  text-align:center; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.library-empty[hidden]{ display:none }
.library-empty p{ margin:0; font-size:15px }
.library-empty .browse{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:var(--r-pill);
  background:var(--ink); color:#fff;
  font: 600 13.5px/1 var(--font-sans);
  letter-spacing:-.005em; text-transform:none;
  border:0; cursor:pointer;
  transition: background .15s, transform .15s;
}
.library-empty .browse:hover{ background:#000; transform: translateY(-1px) }

/* ───────── Generic phone screens (used throughout) ───────── */
.phone-card{
  position:relative; border-radius:var(--r-phone); overflow:hidden;
  background:#000; border:6px solid #0F0A14;
  aspect-ratio: 9/19.2; max-width:380px;
  box-shadow: var(--shadow-phone);
}
.phone-card img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block }
.phone-card::before{
  content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:96px; height:22px; background:#0F0A14; border-radius:14px; z-index:2;
}

/* ───────── Feature strip (4 cards) ───────── */
.features{ background: linear-gradient(180deg, var(--bg-tint), var(--bg)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; overflow-x:clip; overflow-y:visible }
.feature-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:20px }
.feature{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); padding:28px; display:flex; flex-direction:column; gap:14px;
  min-height: 200px; position:relative; overflow:hidden;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature:hover{ transform: translateY(-3px); box-shadow: 0 24px 50px -20px rgba(45,26,80,.18), 0 1px 0 rgba(122,84,209,.04) }
.feature .badge{
  align-self:flex-start;
  padding:5px 10px; border-radius:var(--r-pill);
  background:var(--primary-soft); color:var(--primary-deep);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:500;
}
.feature h3{ font-size:21px; line-height:1.15 }
.feature p{ margin:0; font-size:14.5px; color:var(--ink-soft); line-height:1.5 }
.feature .scrn{
  margin-top:auto;
  border-radius:18px; overflow:hidden;
  border:1px solid var(--line); background:#fff;
  height:200px;
  position:relative;
}
.feature .scrn img{ width:100%; height:100%; object-fit:cover; object-position:top center }

/* ───────── Insight block ───────── */
.insight-grid{ display:grid; grid-template-columns: 1.05fr .95fr; column-gap: clamp(32px, 5vw, 80px); row-gap: 24px; align-items:center }
.insight-phone{ justify-self:end }
.insight-bullets{ display:flex; flex-direction:column; gap:14px; margin-top:24px }
.insight-bullet{
  display:flex; gap:14px; align-items:flex-start;
  padding:18px 20px; background:var(--surface); border:1px solid var(--line); border-radius:18px;
  box-shadow: var(--shadow-card);
}
.insight-bullet .b-ico{
  width:32px; height:32px; flex:0 0 32px; border-radius:10px;
  display:grid; place-items:center;
  background:var(--primary-soft); color:var(--primary-deep);
  font-size:14px; font-weight:700; font-family:var(--font-mono);
}
.insight-bullet p{ margin:0; font-size:15px; line-height:1.5; color:var(--ink-soft) }
.insight-bullet strong{ color:var(--ink); font-weight:700 }

/* ───────── Meds row ───────── */
.meds-band{
  background: linear-gradient(180deg, #14102A 0%, #1A1426 100%);
  color:#fff; position:relative; overflow:hidden;
}
.meds-band .aura{ opacity:.18 }
.meds-band .display em{ color:#FFCFA8 }
.meds-band .lede{ color:#C8BFD9 }
.meds-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-top:40px }
.med{
  border:1px solid rgba(255,255,255,.10); border-radius:20px; padding:20px 20px 18px;
  background:rgba(255,255,255,.04); display:flex; flex-direction:column; gap:6px;
  backdrop-filter: blur(10px);
}
.med .name{ font-size:18px; font-weight:700; letter-spacing:-.01em; font-family:var(--font-display) }
.med .sub{ font-size:13px; color:#A89FB8; font-family:var(--font-mono); letter-spacing:.02em }
.med .pill{
  margin-top:8px; font-size:11.5px; padding:4px 10px; border-radius:var(--r-pill); align-self:flex-start;
  background:rgba(255,255,255,.07); color:#C8BFD9; border:1px solid rgba(255,255,255,.08);
  font-family:var(--font-mono); letter-spacing:.04em; text-transform:uppercase; font-weight:500;
}
.meds-foot{ margin-top:32px; font-size:13px; color:#A89FB8; max-width:64ch; line-height:1.55 }

/* ───────── Real-time / steps ───────── */
.rtg-grid{ display:grid; grid-template-columns: 1.1fr .9fr; column-gap: clamp(32px, 5vw, 72px); row-gap: 24px; align-items:center }
.rtg-phone{ justify-self:end }
.steps{ display:flex; flex-direction:column; gap:18px; margin-top:28px }

/* ───────── Phone-stage wrapper (desktop default) ─────────
   On desktop, .phone-stage is invisible to layout — its children (phone-card
   and the cards container) flatten into the parent grid via `display: contents`.
   Phone takes col 2 spanning both rows; cards land in col 1 row 2.
   To prevent the gap between text-block and cards from inflating (because the
   tall phone forces rows to stretch), we align text-block to end-of-row-1
   and cards to start-of-row-2 — they pull together at the middle. Empty space
   ends up at top/bottom of the grid (filled visually by the phone in col 2).
   On mobile (≤720px), .phone-stage gets backdrop styling (in mobile media block). */
.phone-stage{ display: contents }
.insight-grid > div:first-child,
.rtg-grid > div:first-child{
  grid-row: 1;
  grid-column: 1;
  align-self: end;
}
.insight-grid > .phone-stage > .phone-card,
.rtg-grid > .phone-stage > .phone-card{
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
}
.insight-grid > .phone-stage > .insight-bullets,
.rtg-grid > .phone-stage > .steps{
  grid-row: 2;
  grid-column: 1;
  align-self: start;
  margin-top: 0; /* rely on grid row-gap only */
}
.step{
  display:flex; gap:16px; align-items:flex-start;
  padding:18px 20px; background:var(--surface); border:1px solid var(--line); border-radius:18px;
  box-shadow: var(--shadow-card);
}
.step .num{
  width:36px; height:36px; flex:0 0 36px; border-radius:50%;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--aura-blue), var(--aura-lilac));
  color: var(--primary-deep);
  font-family:var(--font-display); font-size:15px; font-weight:700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.step p{ margin:0; font-size:15.5px; color:var(--ink-soft); line-height:1.5 }
.step strong{ color:var(--ink); font-weight:700 }

/* ───────── Privacy band ───────── */
.privacy{ background:var(--bg-tint); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.privacy-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-top:36px }
.priv{
  background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:24px;
  display:flex; flex-direction:column; gap:6px; box-shadow: var(--shadow-card);
}
.priv .k{
  width:36px; height:36px; border-radius:12px;
  display:grid; place-items:center;
  background:var(--primary-soft); color:var(--primary-deep);
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  margin-bottom:8px;
}
.priv .v{ font-size:18px; font-weight:700; letter-spacing:-.01em; font-family:var(--font-display) }
.priv p{ margin:6px 0 0; font-size:13.5px; color:var(--muted); line-height:1.5 }

/* ───────── FAQ ───────── */
.faq{ display:flex; flex-direction:column; gap:12px; margin-top:24px }
.faq details{
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  padding:0; transition: background .15s, border-color .15s;
}
.faq details[open]{ border-color: color-mix(in oklab, var(--primary) 22%, var(--line)) }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  gap:24px; padding:22px 24px;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary h3{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(17px, 1.6vw, 21px); letter-spacing:-.015em; line-height:1.25;
}
.faq summary .plus{
  width:30px; height:30px; flex:0 0 30px; border-radius:50%;
  border:1px solid var(--line-strong); position:relative;
  color:var(--ink-soft); transition:transform .25s ease, background .15s, color .15s, border-color .15s;
  font-size:0; /* hide the text "+" — we draw it via pseudo-elements for perfect centering */
}
.faq summary .plus::before,
.faq summary .plus::after{
  content:""; position:absolute; top:50%; left:50%;
  background: currentColor; border-radius:1px;
  transform: translate(-50%, -50%);
}
.faq summary .plus::before{ width:11px; height:1.5px } /* horizontal bar */
.faq summary .plus::after{ width:1.5px; height:11px }  /* vertical bar */
.faq details[open] summary .plus{ transform:rotate(45deg); background:var(--primary); color:#fff; border-color:var(--primary) }
.faq .ans{ padding:0 24px 22px; max-width:64ch; color:var(--ink-soft); font-size:15px; line-height:1.6 }

/* ───────── Studio + others ───────── */
.studio-band{ background:var(--bg-tint); border-top:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; overflow:hidden }
.studio-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 80px); align-items:start }
.others{ display:grid; grid-template-columns: 1fr; gap:14px; margin-top:18px }
.other{
  display:flex; align-items:center; gap:14px;
  padding:18px 20px; border-radius:20px; background:var(--surface); border:1px solid var(--line);
  transition: border-color .15s, transform .15s, box-shadow .15s;
  box-shadow: var(--shadow-card);
}
.other:hover{ border-color:var(--line-strong); transform:translateY(-1px) }
.other .ic{
  width:44px; height:44px; flex:0 0 44px; border-radius:14px;
  display:grid; place-items:center; font-family:var(--font-display); font-size:20px; font-weight:700; color:#fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.other .nm{ font-size:16px; font-weight:700; letter-spacing:-.01em }
.other .ds{ font-size:13px; color:var(--muted); font-family:var(--font-mono); letter-spacing:.02em; margin-top:2px }

/* ───────── Ambassadors / Real journeys ───────── */
.ambassadors{ position:relative; overflow-x:clip; overflow-y:visible }
.amb-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; margin-top:40px;
}
.amb-card{
  position:relative; border-radius:24px; overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  box-shadow: var(--shadow-card);
  display:flex; flex-direction:column;
  min-height: 460px;
}
.amb-photo{
  position:relative; aspect-ratio: 5/3;
  background: linear-gradient(135deg, var(--aura-pink), var(--aura-lilac));
  overflow:hidden;
}
.amb-photo .placeholder{
  position:absolute; inset:0; display:grid; place-items:center;
  color: var(--primary-deep); font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:500; opacity:.6;
}
.amb-photo .placeholder::before{
  content:""; position:absolute; inset:18px;
  border:1.5px dashed currentColor; border-radius:18px; opacity:.4;
}
.amb-loss{
  position:absolute; top:14px; left:14px;
  padding:6px 12px; border-radius:var(--r-pill);
  background: rgba(255,255,255,.92); color: var(--ink);
  font-family:var(--font-display); font-weight:700; font-size:13.5px;
  letter-spacing:-.01em;
  backdrop-filter: blur(8px);
}
.amb-body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1 }
.amb-quote{ font-size:14.5px; line-height:1.5; color:var(--ink-soft); text-wrap:pretty }
/* Identity block (name + meta wrapper, second flex child) sticks to the bottom
   so cards with shorter quotes don't leave empty space under the name. */
.amb-body > *:nth-child(2){ margin-top:auto }
.amb-name{ font-weight:700; font-size:15px; letter-spacing:-.01em }
.amb-meta{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted); letter-spacing:.05em; text-transform:uppercase }
.amb-foot{ display:flex; justify-content:space-between; align-items:baseline; padding-top:6px; border-top:1px dashed var(--line) }
.amb-foot .since{ font-family:var(--font-mono); font-size:11px; color:var(--muted); letter-spacing:.04em }
.amb-foot .delta{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); font-weight:600 }

/* ───────── Press / proof row ───────── */
.proof-row{
  display:flex; gap: clamp(20px, 2vw, 56px); align-items:center; justify-content:center; flex-wrap:wrap;
  margin-top: 40px; padding: 24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.proof-row .item{ display:flex; align-items:center; gap:10px; color:var(--muted); font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:500 }
.proof-row .item strong{ color:var(--ink-soft); font-weight:700 }

/* ───────── Footer ───────── */
.footer{ padding:80px 0 36px; border-top:1px solid var(--line); position:relative; overflow:hidden }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:32px }
.footer h4{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600; font-family:var(--font-mono); margin-bottom:14px }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px }
.footer li a{ font-size:14px; color:var(--ink-soft) }
.footer li a:hover{ color:var(--ink) }
.footer-bottom{ display:flex; justify-content:space-between; gap:24px; padding-top:32px; margin-top:48px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted) }
.disclaimer{ font-size:12.5px; color:var(--muted); line-height:1.55; max-width:64ch; margin-top:18px }

/* ───────── Symptra-specific bits (kept and modernized) ───────── */
.symptra-mark{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 16px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line);
  font-size:13.5px; font-weight:600; color:var(--ink-soft);
  box-shadow: var(--shadow-pop);
}
.symptra-mark .glyph{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background: radial-gradient(120% 120% at 30% 25%, #FFC2D9 0%, var(--primary) 55%, var(--primary-deep) 100%);
  color:#fff; font-family:var(--font-display); font-size:13px; line-height:1; font-weight:700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}

/* How-it-works numbered cards (Symptra page) */
.how{ background:var(--bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; overflow:hidden }
.how-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:14px; margin-top:48px;
}
.how-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:24px; padding:24px; display:flex; flex-direction:column; gap:14px;
  min-height:280px; position:relative; box-shadow: var(--shadow-card);
}
.how-card .num{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-display); font-size:19px; font-weight:700;
  color:var(--primary-deep);
  background: linear-gradient(135deg, var(--aura-pink), var(--aura-lilac));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.how-card:nth-child(2) .num{ background: linear-gradient(135deg, var(--aura-blue), var(--aura-sky)) }
.how-card:nth-child(3) .num{ background: linear-gradient(135deg, var(--aura-peach), var(--aura-pink)) }
.how-card:nth-child(4) .num{ background: linear-gradient(135deg, var(--aura-sky), var(--aura-mint)) }
.how-card:nth-child(5) .num{ background: linear-gradient(135deg, var(--aura-lilac), var(--aura-blue)) }
.how-card h3{ font-size:18px; line-height:1.2 }
.how-card p{ margin:0; font-size:14px; color:var(--ink-soft); line-height:1.5 }
.how-card .tag{
  align-self:flex-start; margin-top:auto;
  padding:6px 10px; border-radius:var(--r-pill); background:var(--bg-tint);
  color:var(--ink-soft); font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:500;
}

/* Promise band */
.promise{ background: linear-gradient(180deg, #14102A 0%, #1A1426 100%); color:#fff; position:relative; overflow:hidden }
.promise .display{ color:#fff }
.promise .display em{ color:#FFCFA8 }
.promise .lede{ color:#C8BFD9 }
.promise-cta{ margin-top:32px; display:flex; gap:12px; flex-wrap:wrap }
.promise .aura{ opacity:.22 }

/* Big quote band */
.quote-band{ background:var(--bg-tint); border-top:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; overflow:hidden }
.quote{
  font-family:var(--font-display); font-weight:700;
  font-size: clamp(28px, 3.6vw, 52px); line-height:1.1; letter-spacing:-.025em;
  color:var(--ink); max-width:22ch;
}
.quote-grid{ display:grid; grid-template-columns: 1fr auto; gap:48px; align-items:center }
.quote-meta{ font-size:12px; color:var(--muted); font-family:var(--font-mono); letter-spacing:.08em; text-transform:uppercase; font-weight:500 }
.quote-author{ font-size:15px; color:var(--ink-soft); margin-top:6px }

/* ───────── Article page ───────── */
.article-shell{ position:relative; overflow:hidden }
.article-shell .top-aura{ position:absolute; top:-200px; right:-180px; width:560px; height:560px; opacity:.55; z-index:0; pointer-events:none; filter: blur(60px); border-radius:50%; background: radial-gradient(circle at 50% 50%, var(--aura-pink) 0%, transparent 70%); }
.article-shell .top-aura-2{ position:absolute; top:-100px; left:-160px; width:480px; height:480px; opacity:.5; z-index:0; pointer-events:none; filter: blur(60px); border-radius:50%; background: radial-gradient(circle at 50% 50%, var(--aura-blue) 0%, transparent 70%); }

.article-back{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px 8px 12px;
  border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--line);
  font-size:13.5px; font-weight:500; color:var(--ink-soft);
  box-shadow: var(--shadow-pop);
  transition: transform .15s ease, border-color .15s ease;
}
.article-back:hover{ transform: translateY(-1px); border-color: var(--line-strong) }

.article-hero{
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 72px);
  position:relative;
}
.article-hero .wrap{ max-width: 880px }
.article-cat-row{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top: 22px;
}
.cat-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:var(--r-pill);
  background:var(--primary-soft); color:var(--primary-deep);
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
}
.cat-chip .glyph{ width:8px; height:8px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent) }

.evidence-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:var(--r-pill);
  background: var(--surface); border:1px solid var(--line); color: var(--ink-soft);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
}
.evidence-chip[data-level="high"] .bars span:nth-child(-n+3){ background: var(--studio) }
.evidence-chip[data-level="moderate"] .bars span:nth-child(-n+2){ background: var(--accent) }
.evidence-chip[data-level="low"] .bars span:nth-child(-n+1){ background: var(--rose, #E04545) }
.evidence-chip .bars{ display:inline-flex; gap:2px; align-items:flex-end }
.evidence-chip .bars span{ width:3px; background: var(--line-strong); border-radius:1px }
.evidence-chip .bars span:nth-child(1){ height:6px }
.evidence-chip .bars span:nth-child(2){ height:9px }
.evidence-chip .bars span:nth-child(3){ height:12px }

.article-title{
  font-family:var(--font-display); font-weight:800;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.02; letter-spacing:-.035em;
  margin: 24px 0 18px;
  text-wrap: balance;
}
.article-preview{
  font-size: clamp(18px, 1.55vw, 22px);
  line-height:1.5; color:var(--ink-soft);
  max-width:62ch;
  text-wrap:pretty;
}
.article-meta{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin-top:28px; padding-top:24px; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:500;
}
.article-meta .dot{ width:4px; height:4px; border-radius:50%; background: var(--line-strong) }
.article-meta strong{ color: var(--ink-soft); font-weight:600 }

/* ── Article layout — body + sticky TOC ── */
.article-layout{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: clamp(40px, 5vw, 80px);
  max-width: 1100px; margin: 0 auto;
  padding: clamp(20px, 3vw, 40px) var(--gutter) clamp(60px, 7vw, 100px);
  position:relative;
}
.article-toc{
  position: sticky; top: 88px; align-self: start;
  font-family:var(--font-mono); font-size:12px;
  max-height: calc(100vh - 120px); overflow-y:auto;
}
.article-toc .toc-label{
  font-size: 10.5px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--muted); font-weight:600; margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
.article-toc .toc-label::before{ content:""; width:18px; height:1px; background: var(--line-strong) }
.article-toc ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; border-left:1px solid var(--line) }
.article-toc li a{
  display:block; padding: 6px 14px;
  font-family: var(--font-sans); font-size: 13.5px; letter-spacing: -.005em; font-weight: 500;
  color: var(--muted);
  border-left: 2px solid transparent; margin-left:-1px;
  transition: color .15s, border-color .15s;
}
.article-toc li a:hover{ color: var(--ink) }
.article-toc li a.is-active{ color: var(--primary-deep); border-left-color: var(--primary) }

/* ── Article body typography ── */
.article-body{
  font-size: 17.5px; line-height: 1.7; color: var(--ink-soft); max-width: 68ch;
}
.article-body > *{ margin: 0 0 1.1em }
.article-body p{ text-wrap: pretty }
.article-body p strong, .article-body li strong{ color: var(--ink); font-weight: 700 }
.article-body a{ color: var(--primary-deep); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, var(--primary) 40%, transparent) }
.article-body a:hover{ text-decoration-color: var(--primary) }

.article-body h2{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -.025em;
  margin: 2.2em 0 .8em; color: var(--ink);
  scroll-margin-top: 88px;
}
.article-body h3{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(20px, 1.6vw, 22px); line-height: 1.2; letter-spacing: -.015em;
  margin: 1.8em 0 .5em; color: var(--ink);
  scroll-margin-top: 88px;
}
.article-body h2 + h3{ margin-top: 1.2em }

.article-body ul, .article-body ol{ padding-left: 1.4em; display: flex; flex-direction: column; gap: 10px }
.article-body ul li::marker{ color: var(--primary); content: "•  " }
.article-body ol{ counter-reset: ol; list-style: none; padding-left: 0 }
.article-body ol > li{ counter-increment: ol; padding-left: 2.4em; position: relative }
.article-body ol > li::before{
  content: counter(ol);
  position:absolute; left: 0; top: 2px;
  width: 26px; height: 26px; border-radius: 50%;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--aura-pink), var(--aura-lilac));
  color: var(--primary-deep); font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}

/* Pull-quote — meagain-style italic community voice */
.article-body blockquote, .article-pullquote{
  position:relative;
  margin: 1.8em 0; padding: 22px 26px 22px 28px;
  background: linear-gradient(180deg, var(--primary-soft), color-mix(in oklab, var(--aura-pink) 30%, var(--surface)));
  border: 1px solid color-mix(in oklab, var(--primary) 18%, var(--line));
  border-radius: 22px;
  font-size: 17px; line-height: 1.55;
  color: var(--ink); font-style: italic;
  font-family: var(--font-display); font-weight: 500; text-wrap: pretty;
}
.article-body blockquote::before{
  content: "“"; position: absolute; top: -4px; left: 14px;
  font-family: var(--font-display); font-size: 60px; line-height: 1; color: var(--primary); opacity: .35;
}
.article-body blockquote p{ margin: 0 }

/* Callout — "Track in Symptra" */
.article-callout{
  margin: 1.8em 0; padding: 20px 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  display:flex; gap:16px; align-items:flex-start;
  box-shadow: var(--shadow-card);
}
.article-callout .mascot-slot{ flex: 0 0 56px }
.article-callout .body{ font-size: 15.5px; line-height: 1.5; color: var(--ink-soft) }
.article-callout .body strong{ color: var(--ink); font-weight: 700 }
.article-callout .body .label{
  display: block; margin: 0 0 10px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--primary-deep); font-weight: 600;
}
.article-callout .body > strong:first-of-type{
  display: block; margin-bottom: 6px;
  font-size: 16.5px; line-height: 1.4; color: var(--ink);
}

/* Tables */
.article-body table{
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 14.5px; line-height: 1.45;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.article-body thead{ background: var(--bg-tint) }
.article-body th, .article-body td{
  padding: 12px 16px; text-align: left;
  border-bottom: 1px solid var(--line);
}
.article-body tbody tr:last-child td{ border-bottom: 0 }
.article-body th{
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600;
}
.article-body td{ color: var(--ink-soft) }
.article-body td:first-child{ color: var(--ink); font-weight: 600 }

/* Cross-reference card */
.article-xref{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 14px 18px; margin: 14px 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  transition: border-color .15s ease, transform .15s ease;
  text-decoration: none !important;
}
.article-xref:hover{ border-color: var(--line-strong); transform: translateY(-1px) }
.article-xref .left{ display:flex; flex-direction:column; gap:4px }
.article-xref .label{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--primary-deep); font-weight: 600 }
.article-xref .title{ font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -.005em }
.article-xref .arrow{ font-size: 18px; color: var(--ink-soft) }

/* Changelog version date */
.article-body p.changelog-date{
  margin: -1em 0 1.8em;
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.article-body hr{
  border: 0; height: 1px;
  background: var(--line);
  margin: 3em 0;
}

/* Disclaimer at end */
.article-disclaimer{
  margin: 3em 0 0; padding: 18px 22px;
  background: var(--bg-tint); border: 1px solid var(--line); border-radius: 18px;
  font-size: 13px; color: var(--muted); line-height: 1.5; font-style: italic;
}
.article-disclaimer a{ color: var(--primary-deep); text-decoration: underline; text-underline-offset: 3px }

/* Sources / citations block — appears just before the disclaimer */
.article-sources{
  margin: 3em 0 1.6em;
  padding: 22px 26px 26px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 22px;
}
.article-sources h2{
  margin: 0 0 14px; padding: 0;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--primary-deep); font-weight: 700;
  border: 0;
}
.article-sources ol{
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 12px;
  counter-reset: src;
}
.article-sources ol > li{
  display: grid; grid-template-columns: 28px auto 1fr; gap: 10px 12px;
  align-items: baseline;
  font-size: 14.5px; line-height: 1.5; color: var(--ink-soft);
  counter-increment: src;
  padding-left: 0; position: static;
}
.article-sources ol > li::before{
  content: counter(src, decimal-leading-zero);
  position: static; width: auto; height: auto; border-radius: 0;
  display: inline; background: none; box-shadow: none;
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .08em; color: var(--muted); font-weight: 600;
  padding-top: 3px;
}
.article-sources a{
  color: var(--ink); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--line-strong);
  transition: text-decoration-color .15s ease, color .15s ease;
  word-break: break-word;
}
.article-sources a:hover{ color: var(--primary-deep); text-decoration-color: var(--primary-deep) }
.article-sources .src-label{
  display: inline-block;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
  margin-right: 8px;
}
@media (max-width: 720px){
  .article-sources{ padding: 18px 18px 20px; border-radius: 18px }
  .article-sources ol > li{ grid-template-columns: 22px 1fr; gap: 6px 10px; font-size: 14px }
  .article-sources ol > li .src-label{ grid-column: 2 }
  .article-sources ol > li a{ grid-column: 2 }
}

/* ── Related articles ── */
.related-band{ background: var(--bg-tint); border-top:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; overflow:hidden }
.related-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px }
.related-card{
  display:flex; flex-direction:column; gap:14px;
  padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, border-color .15s ease;
  min-height: 240px;
}
.related-card:hover{ transform: translateY(-3px); border-color: var(--line-strong) }
.related-card .cat-chip{ align-self:flex-start }
.related-card h3{ font-size: 19px; line-height: 1.2 }
.related-card p{ margin:0; font-size: 14px; color: var(--ink-soft); line-height: 1.5; text-wrap: pretty }
.related-card .read{
  margin-top:auto; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--primary-deep); font-weight: 600;
  display:flex; align-items:center; gap:6px;
}

/* ── Open-in-Symptra CTA band ── */
.app-cta{
  background: linear-gradient(180deg, #14102A 0%, #1A1426 100%);
  color: #fff; position: relative; overflow: hidden;
}
.app-cta .aura{ opacity: .22 }
.app-cta .wrap{ display:grid; grid-template-columns: 1fr auto; gap: clamp(24px, 4vw, 48px); align-items:center }
.app-cta h2{ font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3vw, 40px); line-height: 1.1; letter-spacing: -.025em; color: #fff; max-width: 18ch; text-wrap: balance }
.app-cta p{ margin: 12px 0 0; color: #C8BFD9; font-size: 15.5px; max-width: 48ch }
.app-cta .actions{ display:flex; gap: 12px; flex-wrap: wrap }

/* ───────── Responsive ───────── */
@media (max-width: 1080px){
  .feature-grid{ grid-template-columns: repeat(2, 1fr) }
  .amb-grid{ grid-template-columns: repeat(2, 1fr) }
  .how-grid{ grid-template-columns: repeat(3, 1fr) }
  .article-layout{ grid-template-columns: 1fr; gap: 0 }
  .article-toc{ display: none }
  .related-grid{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; gap:48px }
  .hero-stage{ min-height: 560px }
  /* insight-grid + rtg-grid stay 2-column above mobile breakpoint (720px).
     Their mobile single-col with .phone-stage backdrop is in @media (max-width:720px). */
  .meds-grid{ grid-template-columns: repeat(2,1fr) }
  .privacy-grid{ grid-template-columns: repeat(2,1fr) }
  .studio-grid{ grid-template-columns: 1fr }
  .others{ grid-template-columns: 1fr }
  .footer-grid{ grid-template-columns: 1fr 1fr }
  .quote-grid{ grid-template-columns: 1fr; gap:20px }
  .how-grid{ grid-template-columns: repeat(2,1fr) }
  .app-cta .wrap{ grid-template-columns: 1fr }
}
@media (max-width: 620px){
  .feature-grid{ grid-template-columns: 1fr }
  .amb-grid{ grid-template-columns: 1fr }
  .how-grid{ grid-template-columns: 1fr }
  .meds-grid{ grid-template-columns: 1fr 1fr }
  .privacy-grid{ grid-template-columns: 1fr }
  .nav-links a:not(.nav-cta){ display:none }
  .footer-grid{ grid-template-columns: 1fr }
  .hero-chip.c1, .hero-chip.c3{ left:auto; right:auto }
  .hero-chip{ font-size:12.5px; padding:10px 12px }
  .related-grid{ grid-template-columns: 1fr }
  .article-title{ font-size: clamp(34px, 9vw, 44px) }
  .article-body{ font-size: 16.5px }
}

/* ───────── Mobile polish — meagain-style scale & rhythm ───────── */
@media (max-width: 720px){
  :root{
    --gutter: 22px;
    --section-pad: 84px;
    --r-card: 24px;
  }

  /* Bigger, tighter display type */
  .display{
    font-size: clamp(56px, 13vw, 76px);
    line-height: .96;
    letter-spacing: -.04em;
    text-wrap: balance;
  }
  h2.section-title{
    font-size: clamp(40px, 9vw, 56px);
    line-height: 1.0;
    letter-spacing: -.032em;
    text-wrap: balance;
  }
  .lede{ font-size: 16.5px; line-height: 1.55 }

  /* Centered, generous hero */
  .nav-inner{ padding: 12px var(--gutter) }
  .nav-links a.nav-cta{ padding: 9px 14px; font-size: 13px }

  .hero{ padding-top: 28px; padding-bottom: 32px }
  .hero-grid{ gap: 36px }
  .hero-left{
    text-align: center; align-items: center; gap: 22px;
    max-width: 520px; margin: 0 auto;
  }
  .hero-meta{ justify-content: center }
  .symptra-mark{ font-size: 12.5px }
  .hero-cta-row{
    width: 100%; gap: 10px; justify-content: center;
  }
  .hero-cta-row .store-btn{
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
    padding: 11px 14px;
    justify-content: center;
    border-radius: 16px;
  }
  .hero-cta-row .store-btn .lbls .btm{ font-size: 14px }
  .hero-cta-row .store-btn .lbls .top{ font-size: 9.5px }
  .hero-cta-row .store-btn .icn{ width: 20px; height: 20px; flex: 0 0 20px }
  .hero-stars{ justify-content: center; font-size: 13px }
  .hero-trust{ justify-content: center; gap: 8px }
  .hero-trust .pill{ font-size: 11.5px; padding: 6px 11px }

  /* Phone in hand — sized to fit comfortably inside the device frame */
  .hero-stage{ min-height: 500px; padding-top: 8px }
  .hero-stage .aura.a1{ width: 380px; height: 380px }
  .hero-stage .aura.a2{ width: 320px; height: 320px }
  .hero-stage .aura.a3, .hero-stage .aura.a4{ width: 240px; height: 240px }
  .hero-phone-wrap{ width: min(58vw, 230px); transform: rotate(-3deg) }

  /* Compact chip badges — visible but not crowding */
  .hero-chip{
    padding: 7px 10px; font-size: 11.5px; border-radius: 12px; gap: 8px;
  }
  .hero-chip .ic{ width: 24px; height: 24px; border-radius: 7px; font-size: 12px }
  .hero-chip .v{ display: none }
  .hero-chip.c1{ top: 2%;  left: -22%; right: auto }
  .hero-chip.c2{ top: 44%; right: -22%; left: auto }
  .hero-chip.c3{ bottom: 6%; left: -18%; right: auto }

  /* Larger sections rhythm */
  section{ padding-top: var(--section-pad); padding-bottom: var(--section-pad) }
  .section-head{ margin-bottom: 28px; max-width: none }

  /* Proof row reads as 2-up grid, not jammed inline */
  .proof-row{
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px;
    padding: 22px 0;
  }
  .proof-row .item{ font-size: 11px; flex-direction: column; align-items: flex-start; gap: 4px }
  .proof-row .item strong{ font-size: 22px; letter-spacing: -.02em; font-family: var(--font-display) }

  /* Feature cards — bigger imagery, comfortable padding */
  .feature{ min-height: 0; padding: 22px; gap: 16px }
  .feature h3{ font-size: 22px }
  .feature .scrn{ height: 280px; border-radius: 18px }

  /* Pip card — tighter padding, larger touch targets */
  .pip-grid{ gap: 28px !important }
  .pip-card{ padding: 22px !important; border-radius: 24px !important; gap: 14px !important }

  /* Default phone-card centering (used in places not overridden below) */
  .phone-card{
    max-width: min(60vw, 240px) !important;
    margin: 0 auto !important; justify-self: center !important;
  }

  /* Contextual phones (Insight + Real-time guidance):
     phone + cards are wrapped in .phone-stage and laid out independently
     of heading/lede. Phone is an absolute backdrop sized by the stage;
     cards are vertically centered inside via flex. This decouples phone
     position from cards content length — both sections render identically. */
  .insight-grid,
  .rtg-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    position: relative !important;
  }
  /* Phone-stage = positioning context. min-height controls stage height.
     overflow:hidden crops the phone's bottom.
     CSS variables tie cards width to phone width: cards = phone × overhang. */
  .phone-stage{
    --phone-w: 80%;          /* phone width relative to stage */
    --phone-max: 280px;      /* phone max-width cap */
    --cards-overhang: 1.2;   /* cards = phone × this (so 20% wider) */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: 24px 0 0 0;
    overflow: hidden;
  }
  /* Phone = absolute backdrop anchored to TOP of stage. Native 9/16 aspect.
     Phone height exceeds stage min-height, so bottom cropped by overflow:hidden. */
  .phone-stage .phone-card{
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: var(--phone-w) !important;
    max-width: var(--phone-max) !important;
    aspect-ratio: 9/16 !important;
    height: auto !important;
    margin: 0 !important;
    z-index: 0 !important;
    opacity: 0.55 !important;
    pointer-events: none !important;
  }
  /* Cards = relative, on top of phone, +20% wider than phone, centered by flex parent.
     align-self: center !important overrides desktop rule (`align-self: start` for grid row 2). */
  .phone-stage .insight-bullets,
  .phone-stage .steps{
    position: relative;
    z-index: 1;
    width: calc(var(--phone-w) * var(--cards-overhang));
    max-width: calc(var(--phone-max) * var(--cards-overhang));
    margin: 0 !important;
    align-self: center !important;
  }
  /* Cards have a solid background to cleanly cover the phone behind them */
  .insight-bullet,
  .step{ background: var(--surface) }
  /* Remove section's bottom padding so the next section starts immediately
     after the cropped phone — creating the "phone cut by next content" effect. */
  section[data-screen-label="Insights"],
  section[data-screen-label="Real-time guidance"]{
    padding-bottom: 0 !important;
  }

  .insight-bullet, .step{ padding: 16px 16px; border-radius: 16px }

  /* Ambassador cards — single column, photo prominent */
  .amb-card{ min-height: 0; border-radius: 24px }
  .amb-photo{ aspect-ratio: 5/4 }
  .amb-loss{ font-size: 15px; padding: 7px 14px }
  .amb-body{ padding: 18px 20px 22px; gap: 10px }
  .amb-quote{ font-size: 15.5px; line-height: 1.5 }
  .amb-name{ font-size: 16px }

  /* Meds tiles — readable at 2-up */
  .meds-grid{ gap: 10px; margin-top: 28px }
  .med{ padding: 16px; border-radius: 18px; gap: 4px }
  .med .name{ font-size: 16px }
  .med .sub{ font-size: 12px }
  .med .pill{ font-size: 10.5px; padding: 3px 8px; margin-top: 6px }
  .meds-foot{ margin-top: 24px; font-size: 12px }

  /* Privacy cards comfier */
  .priv{ padding: 22px; border-radius: 20px }
  .priv .v{ font-size: 19px }

  /* FAQ */
  .faq summary{ padding: 18px 20px }
  .faq summary h3{ font-size: 17px }
  .faq .ans{ padding: 0 20px 18px; font-size: 14.5px }

  /* Studio "others" cards stack */
  .other{ padding: 16px 18px; border-radius: 18px }

  /* Footer */
  .footer{ padding: 56px 0 28px }
  .footer-bottom{ flex-direction: column; gap: 8px; align-items: flex-start; padding-top: 24px; margin-top: 32px }

  /* Tweaks Hero variants tighten on mobile */
  .hero-phone-stack{ max-width: 90vw }
  .hero-mascot-companion{ gap: 4px; min-height: 460px }
  .hero-mascot-big{ width: 180px !important; height: auto !important }
  .hero-mascot-companion .hero-phone-wrap{ width: 55vw; max-width: 240px }

  /* Article page polish */
  .article-hero{ padding-top: 32px; padding-bottom: 32px }
  .article-title{ font-size: clamp(42px, 11vw, 56px); line-height: .98; letter-spacing: -.035em }
  .article-preview{ font-size: 17px }
  .article-meta{ gap: 10px; font-size: 11px }
  .article-meta .dot{ display: none }
  .article-layout{ padding-top: 16px; padding-bottom: 64px }
  .article-body{ font-size: 17px; line-height: 1.7 }
  .article-body h2{ font-size: 26px; margin-top: 1.6em }
  .article-body h3{ font-size: 19px }
  .article-body blockquote, .article-pullquote{
    padding: 22px 22px 22px 26px; border-radius: 20px; font-size: 16.5px;
  }
  .article-callout{ flex-direction: row; gap: 14px; padding: 18px; border-radius: 20px }
  .article-callout .mascot-slot{ flex: 0 0 48px }
  .article-callout .body{ font-size: 15px }
  .article-xref{ padding: 14px 16px; border-radius: 14px; gap: 14px }
  .article-xref .title{ font-size: 14.5px }

  .related-card{ padding: 22px; min-height: 0; border-radius: 22px }
  .related-card h3{ font-size: 21px }

  .app-cta .wrap{ grid-template-columns: 1fr; text-align: center }
  .app-cta .actions{ justify-content: center; width: 100% }
  .app-cta .actions .store-btn{ flex: 1 1 calc(50% - 6px); justify-content: center }
  .app-cta h2{ margin: 0 auto; font-size: 30px }
  .app-cta p{ margin: 12px auto 0 }
}