/* ============================================================
   TOKENS — paper & ink base, bronze as a jewel accent
   ============================================================ */
:root {
  /* Accent (used sparingly) */
  --bronze:      #A9783E;
  --bronze-ink:  #8A5E2B;   /* accent text on light */
  --bronze-soft: #C49A63;
  --tint:        rgba(169, 120, 62, 0.08);

  /* Light — warm paper / ink */
  --paper:    #FBFAF6;
  --paper-2:  #F4F1E9;
  --card:     #FFFFFF;
  --card-2:   #F7F4EC;
  --ink:      #1B1A16;
  --ink-2:    #56514A;
  --ink-3:    #8C857A;
  --line:     #ECE7DC;
  --line-2:   #E0D9CB;
  --btn:      #1B1A16;
  --btn-text: #FBFAF6;
  --badge-bg: #161512;
  --badge-tx: #FBFAF6;

  --sh-sm: 0 1px 2px rgba(0,0,0,.05), 0 2px 6px rgba(0,0,0,.04);
  --sh-md: 0 10px 30px -10px rgba(0,0,0,.14), 0 4px 10px -4px rgba(0,0,0,.08);
  --sh-lg: 0 40px 80px -30px rgba(0,0,0,.30), 0 16px 36px -18px rgba(0,0,0,.18);
  --glow:  radial-gradient(50% 50% at 50% 40%, rgba(120,128,150,.05), transparent 70%);
  --phone-glow: radial-gradient(50% 46% at 50% 48%, rgba(0,0,0,.07), rgba(0,0,0,.025) 55%, transparent 72%);

  /* App-mockup tokens (flip with theme) */
  --app-bg:   #F6F3EC;
  --app-card: #FFFFFF;
  --app-2:    #F1ECE2;
  --app-ink:  #1B1A16;
  --app-soft: #6A6358;
  --app-faint:#9A9486;
  --app-line: #ECE6DA;
  --app-bar:  rgba(255,255,255,.78);
  --statusbar-bg: rgba(255,255,255,.7);   /* fixed device chrome — theme-only, never per-screen */

  --ease:  cubic-bezier(.22,1,.36,1);
  --ease2: cubic-bezier(.16,1,.3,1);
  --maxw: 1120px;
  color-scheme: light;
}

[data-theme="dark"] {
  --bronze:      #C99A5E;
  --bronze-ink:  #D7AC72;
  --bronze-soft: #B0824B;
  --tint:        rgba(201,154,94,.12);

  --paper:    #090A0C;   /* near-black, cool blue-grey undertone */
  --paper-2:  #0E1014;
  --card:     #13151A;
  --card-2:   #191C22;
  --ink:      #EBEDF1;
  --ink-2:    #99A0AA;
  --ink-3:    #666C76;
  --line:     #22252C;
  --line-2:   #2E323B;
  --btn:      #EBEDF1;
  --btn-text: #0E1014;
  --badge-bg: #EBEDF1;
  --badge-tx: #0E1014;

  --sh-sm: 0 1px 2px rgba(0,0,0,.55);
  --sh-md: 0 12px 30px rgba(0,0,0,.55);
  --sh-lg: 0 50px 100px -34px rgba(0,0,0,.82), 0 18px 40px -20px rgba(0,0,0,.7);
  --glow:  radial-gradient(50% 50% at 50% 40%, rgba(120,140,180,.07), transparent 70%);
  --phone-glow: radial-gradient(50% 46% at 50% 48%, rgba(140,160,205,.20), rgba(140,160,205,.07) 55%, transparent 72%);

  --app-bg:   #0A0C0F;
  --app-card: #14161B;
  --app-2:    #1D2027;
  --app-ink:  #E9EBEF;
  --app-soft: #99A0AA;
  --app-faint:#666C76;
  --app-line: #23262D;
  --app-bar:  rgba(19,21,26,.8);
  --statusbar-bg: rgba(9,10,12,.62);
  color-scheme: dark;
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

/* Interaction polish: no iOS gray tap-flash; visible keyboard focus everywhere */
a, button, input, textarea, select, [role="button"]{ -webkit-tap-highlight-color: transparent; }
:focus{ outline:none; }
button,input,textarea,select{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; border-radius:4px; }

body{
  margin:0;
  font-family:"Hanken Grotesk", system-ui, -apple-system, sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background .5s var(--ease), color .5s var(--ease);
}
h1,h2,h3{
  font-family:"EB Garamond", Georgia, serif;
  font-weight:500;
  letter-spacing:-.01em;
  line-height:1.06;
  margin:0;
  color:var(--ink);
}
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronze-ink); display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{ content:""; width:20px; height:1px; background:var(--bronze-soft); display:inline-block; }
.eyebrow.center{ }

.ac{ font-style:italic; color:var(--bronze-ink); }

/* ============================================================
   BUTTONS / BADGE
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-size:15px; font-weight:600; letter-spacing:-.01em;
  padding:14px 26px; border-radius:12px; border:1px solid transparent; cursor:pointer; white-space:nowrap;
  position:relative;
  /* asymmetric timing: settle out softly… */
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
/* …respond in fast */
.btn:hover{ transition-duration:.16s, .16s, .16s, .16s, .16s; }
.btn svg{ transition:transform .35s var(--ease); }
.btn:hover svg{ transform:translate(2px,-1px); }
/* Primary — solid, crisp, confident */
.btn-primary{ background:var(--btn); color:var(--btn-text); box-shadow:0 1px 2px rgba(20,16,10,.18), 0 8px 20px -8px rgba(20,16,10,.30); }
.btn-primary:hover{ transform:translateY(-1.5px); box-shadow:0 2px 4px rgba(20,16,10,.2), 0 14px 28px -10px rgba(20,16,10,.38); }
.btn-primary:active{ transform:translateY(0) scale(.985); box-shadow:0 1px 2px rgba(20,16,10,.2), 0 4px 10px -6px rgba(20,16,10,.3); transition-duration:.1s; }
/* Secondary — a substantial filled chip, not a thin outline */
.btn-secondary{ background:var(--card); color:var(--ink); border-color:var(--line-2); box-shadow:0 1px 2px rgba(20,16,10,.05); }
.btn-secondary:hover{ transform:translateY(-1.5px); border-color:var(--ink-3); box-shadow:0 10px 22px -12px rgba(20,16,10,.22); }
.btn-secondary:active{ transform:translateY(0) scale(.985); transition-duration:.1s; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{ transform:translateY(-1.5px); border-color:var(--ink-3); background:color-mix(in srgb, var(--ink) 4%, transparent); }
.btn-ghost:active{ transform:translateY(0) scale(.985); transition-duration:.1s; }
.btn-sm{ padding:9px 17px; font-size:13.5px; border-radius:8px; }

/* App Store badge — theme aware */
.appstore{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--badge-bg); color:var(--badge-tx);
  padding:9px 16px 9px 14px; border-radius:12px;
  border:1px solid color-mix(in srgb, var(--badge-tx) 16%, transparent);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.appstore:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); }
.appstore svg{ width:24px; height:24px; flex-shrink:0; }
.appstore .as-tx{ display:flex; flex-direction:column; line-height:1.05; text-align:left; }
.appstore .as-tx small{ font-size:9.5px; letter-spacing:.02em; opacity:.82; font-weight:500; }
.appstore .as-tx strong{ font-size:16px; font-weight:600; letter-spacing:-.01em; }
.soon-tag{
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bronze-ink); background:var(--tint); padding:4px 9px; border-radius:100px;
  border:1px solid color-mix(in srgb, var(--bronze) 22%, transparent);
}
/* Quiet, non-primary App Store mention for the hero */
.appstore-quiet{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--ink-2); padding:12px 6px; transition:color .3s var(--ease); }
.appstore-quiet svg{ width:16px; height:16px; }
.appstore-quiet .chev{ width:14px; height:14px; opacity:.6; transition:transform .35s var(--ease); }
.appstore-quiet:hover{ color:var(--ink); }
.appstore-quiet:hover .chev{ transform:translateX(3px); }

/* ============================================================
   NAV
   ============================================================ */
.nav{ position:fixed; inset:0 0 auto 0; z-index:100; border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease); }
.nav.scrolled{
  background:color-mix(in srgb, var(--paper) 76%, transparent);
  backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom-color:var(--line);
}
.nav-inner{ height:68px; display:flex; align-items:center; justify-content:space-between; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand-mark{ height:30px; width:auto; flex-shrink:0; display:block; transition:opacity .35s var(--ease); }
.brand:hover .brand-mark{ opacity:.82; }
/* logo mark is a flat near-black SVG (no currentColor) — invert it to near-white in dark theme */
[data-theme="dark"] .brand-mark{ filter:invert(1) brightness(1.1); }
.brand-name{ font-family:"EB Garamond", serif; font-weight:600; font-size:21px; letter-spacing:-.01em; }
.brand-name .ac-name{ color:var(--bronze-ink); }
.nav-mid{ display:flex; gap:30px; position:absolute; left:50%; transform:translateX(-50%); }
.nav-link{ font-size:14.5px; font-weight:500; color:var(--ink-2); transition:color .3s var(--ease); position:relative; }
.nav-link::after{ content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1.5px; background:var(--ink); transition:right .35s var(--ease); }
.nav-link:hover{ color:var(--ink); }
.nav-link:hover::after{ right:0; }
.nav-right{ display:flex; align-items:center; gap:12px; }
.theme-toggle{ width:38px; height:38px; border-radius:12px; border:1px solid var(--line-2); background:var(--card); cursor:pointer; display:grid; place-items:center; color:var(--ink-2);
  transition:transform .4s var(--ease), border-color .3s var(--ease), color .3s var(--ease); }
.theme-toggle:hover{ transform:translateY(-2px); border-color:var(--ink-3); color:var(--ink); }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .ico-moon{ display:none; }
[data-theme="dark"] .theme-toggle .ico-sun{ display:none; }
[data-theme="dark"] .theme-toggle .ico-moon{ display:block; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ overflow-x:clip; position:relative; text-align:center; }
.hero-glow{ position:absolute; top:60px; left:50%; transform:translateX(-50%); width:min(1100px,100vw); height:760px; background:var(--glow); pointer-events:none; z-index:0; }
.hero-lead{ position:relative; z-index:1; padding:104px 0 0; }
.hero-copy{ max-width:800px; margin:0 auto; }
.hero-stage-wrap{ position:relative; z-index:1; margin-top:-64px; }   /* pull the iPhone up closer to the scroll cue (desktop) */
.hero-status{ display:inline-flex; align-items:stretch; font-size:13px; font-weight:500; color:var(--ink-2); background:var(--card); border:1px solid var(--line-2);
  border-radius:100px; box-shadow:var(--sh-sm); margin-bottom:22px; overflow:hidden; transition:border-color .3s var(--ease), box-shadow .3s var(--ease); }
.hero-status:hover{ border-color:var(--ink-3); box-shadow:var(--sh-md); }
.hero-status .hs-a, .hero-status .hs-b{ display:inline-flex; align-items:center; gap:6px; padding:7px 14px; }
.hero-status .hs-a{ color:var(--ink); font-weight:600; border-right:1px solid var(--line); }
.hero-status .hs-b svg{ transition:transform .3s var(--ease); }
.hero-status:hover .hs-b svg{ transform:translateX(2px); }
h1.hero-title{ font-size:clamp(40px,5.2vw,68px); font-weight:500; letter-spacing:-.025em; line-height:1.03; margin-bottom:18px; }
.hero-sub{ font-size:clamp(16px,1.4vw,18px); color:var(--ink-2); line-height:1.6; max-width:46ch; margin:0 auto 24px; }
.hero-cta{ display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap; }

/* Single phone, centered, cycling screens */
.hero-visual{ display:flex; justify-content:center; position:relative; perspective:1400px; margin-top:60px; }
.phone-wrap{ position:relative; will-change:transform; }
.float{ animation:float 8s ease-in-out infinite; }
@keyframes float{ 0%,100%{ translate:0 0; } 50%{ translate:0 -12px; } }

.phone{
  width:300px; height:620px; border-radius:56px; padding:9px; position:relative;
  /* polished-titanium rail: bright specular corners, dark faces */
  background:linear-gradient(125deg,#6a6b6f 0%,#2a2b2f 9%,#414246 23%,#191a1d 50%,#45464a 77%,#222327 91%,#5a5b5f 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.20),
    inset 0 1px 1px rgba(255,255,255,.32),
    inset 0 -1px 1px rgba(0,0,0,.45),
    0 2px 2px rgba(0,0,0,.26),
    0 14px 26px -10px rgba(0,0,0,.30),
    0 40px 64px -22px rgba(0,0,0,.42),
    0 72px 100px -44px rgba(0,0,0,.40);
  transform-origin:center center;
  will-change:transform;
}
[data-theme="dark"] .phone{
  background:linear-gradient(125deg,#5b5d63 0%,#202226 9%,#34363c 23%,#121316 50%,#383a40 77%,#1a1b1f 91%,#4b4d53 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 1px 1px rgba(255,255,255,.24),
    inset 0 -1px 1px rgba(0,0,0,.5),
    0 2px 2px rgba(0,0,0,.5),
    0 14px 26px -10px rgba(0,0,0,.5),
    0 40px 64px -22px rgba(0,0,0,.6),
    0 72px 110px -44px rgba(0,0,0,.55);
}
.phone::before{ content:""; position:absolute; inset:-15% -22%; background:var(--phone-glow); z-index:-1; pointer-events:none; }
/* glass with a thin black bezel (the dark ring) inside the titanium rail */
.phone-screen{ width:100%; height:100%; border-radius:47px; background:var(--app-bg); overflow:hidden; position:relative; transition:background .5s var(--ease);
  box-shadow:0 0 0 6px #08090b, 0 0 0 7px rgba(255,255,255,.05); }
/* soft front-glass reflection — sits above the status bar (z-index 16 vs 10) and washes
   diagonally across the top-left, strongest exactly where the real screenshot content
   and our status-bar text live. That was fine over flat hand-drawn mockup colors, but
   over real screenshots it visibly lowers contrast there and reads as a blur/haze
   right below the status bar. Dialed way down so the "glass" feel survives without
   muddying real content underneath it. */
.phone-screen::after{ content:""; position:absolute; inset:0; z-index:16; pointer-events:none; border-radius:47px;
  background:linear-gradient(133deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 14%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 88%, rgba(255,255,255,.02) 100%); }
/* Dynamic-Island pill */
.notch{ position:absolute; top:13px; left:50%; transform:translateX(-50%); width:88px; height:26px; background:#060607; border-radius:14px; z-index:17; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
/* titanium side buttons */
.ph-btn{ position:absolute; z-index:1; border-radius:2px 1px 1px 2px; background:linear-gradient(to right,#65666a,#1b1c1f 70%); box-shadow:0 1px 1px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18); }
.ph-btn.r{ border-radius:1px 2px 2px 1px; background:linear-gradient(to left,#65666a,#1b1c1f 70%); }
.ph-action{ left:-2.5px; top:150px; width:3px; height:24px; }
.ph-volup{ left:-2.5px; top:196px; width:3px; height:50px; }
.ph-voldn{ left:-2.5px; top:256px; width:3px; height:50px; }
.ph-power{ right:-2.5px; top:204px; width:3px; height:88px; }

/* screen deck — screens crossfade rather than slide past one another. A slide briefly
   puts two DIFFERENT screenshots edge-to-edge mid-transition (a visible seam no color
   match can fix); a fade just blends opacity. (A scale/translate was tried here for
   extra "navigating" motion, but scaling the screenshot mid-transition shifts its
   content relative to the static status-bar overlay above it, briefly exposing a
   sliver of the hidden top content — not worth the seam. Plain opacity, held a bit
   longer, reads as a deliberate transition without that risk.) */
.deck{ position:absolute; inset:0; }
.scr{ position:absolute; inset:0; display:flex; flex-direction:column; background:var(--app-bg); opacity:0; z-index:1;
  transition:opacity .55s var(--ease); pointer-events:none; font-size:13px; will-change:opacity; }
.scr.is-active{ opacity:1; z-index:2; }
@media (prefers-reduced-motion: reduce){ .scr{ transition:none; } }

/* image-based screens: real app screenshots, theme swapped via JS (src swap on toggle).
   Cropping is anchored to the BOTTOM: source and frame are nearly the same aspect ratio,
   so only a sliver is ever trimmed — anchoring it to the bottom means that sliver always
   comes off the top (hidden under the status-bar overlay anyway) instead of clipping the
   app's own tab bar / input field at the bottom edge. A reserved strip at the very bottom
   (colored to match that screen, via JS) gives the home-indicator pill genuine clearance
   instead of sitting on top of the app's own tab-bar labels. The image itself fades out
   (mask, not a hard clip) into that reserved color, so there's no visible screenshot edge. */
.scr-img-wrap{ position:absolute; top:0; left:0; right:0; bottom:22px; overflow:hidden; }
.scr-img{ width:100%; height:100%; object-fit:cover; object-position:center bottom; display:block;
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 16px), transparent 100%);
          mask-image:linear-gradient(to bottom, #000 calc(100% - 16px), transparent 100%); }

/* dots + caption */
.phone-foot{ position:absolute; left:0; right:0; bottom:-46px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.phone-cap{ font-size:13.5px; color:var(--ink-2); font-weight:500; min-height:20px; transition:opacity .4s var(--ease); }
.dots{ display:flex; gap:7px; }
.dots b{ width:7px; height:7px; border-radius:50%; background:var(--line-2); cursor:pointer; transition:all .4s var(--ease); }
.dots b.on{ background:var(--bronze); width:22px; border-radius:100px; }

/* ---- Static device chrome (status bar + home indicator) ----
   One persistent element each, living outside the screen deck, so the time/icons
   never change when the active screenshot changes — exactly like a real iPhone,
   where this row is system UI, not something an individual app redraws.
   Its BACKGROUND, though, is set from JS to the exact color of whichever screen
   is currently active (the same value already used for the phone glass and the
   .scr background) — a solid, color-matched rectangle needs no blur or translucency
   to look seamless, it just IS the screenshot's own color, so it reads as though
   the real app were open rather than a UI chrome layer sitting on top of it. A
   translucent "frosted glass" tint was tried here first, but backdrop-filter has
   no fade-amount to animate — it blurs at full strength right up to the element's
   edge and stops, leaving a visible blur/no-blur seam no gradient trick fixes. */
.app-statusbar{ position:absolute; top:0; left:0; right:0; z-index:10; height:52px;
  background:linear-gradient(to bottom, var(--statusbar-bg) 0%, var(--statusbar-bg) 88%, transparent 100%);
  transition:height .3s var(--ease), background .3s var(--ease);
  pointer-events:none; }
.app-statusbar.is-tall{ height:80px;
  background:linear-gradient(to bottom, var(--statusbar-bg) 0%, var(--statusbar-bg) 92%, transparent 100%); }
.statusbar-row{ position:absolute; top:0; left:0; right:0; height:52px; display:flex; align-items:center; justify-content:space-between;
  padding:0 22px; font-size:12px; font-weight:600; color:var(--app-ink); }
.app-statusbar .status-icons{ display:flex; align-items:center; gap:5px; }
.scr-home-indicator{ position:absolute; left:50%; bottom:8px; transform:translateX(-50%); width:112px; height:5px; border-radius:3px;
  background:var(--app-ink); opacity:.32; z-index:10; pointer-events:none; }
.app-statusbar .ico-signal{ width:15px; height:11px; }
.app-statusbar .ico-wifi{ width:15px; height:15px; }
.app-statusbar .ico-battery{ width:23px; height:11px; }

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section-head{ max-width:620px; margin:0 auto 54px; text-align:center; }
.section-head h2{ font-size:clamp(30px,4.2vw,46px); margin:14px 0 14px; }
.section-head p{ font-size:17px; color:var(--ink-2); }

/* ============================================================
   TRUST BAND (Apple-style)
   ============================================================ */
.trust{ padding:104px 0 86px; }
.trust-inner{ text-align:center; }
.trust h2{ font-size:clamp(28px,3.8vw,42px); max-width:18ch; margin:14px auto 8px; }
.trust .lede{ font-size:16.5px; color:var(--ink-2); max-width:48ch; margin:0 auto 48px; }
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat-cell{ padding:34px 16px; position:relative; }
.stat-cell + .stat-cell::before{ content:""; position:absolute; left:0; top:24%; bottom:24%; width:1px; background:var(--line); }
.stat-cell .big{ font-family:"EB Garamond",serif; font-size:clamp(20px,2.2vw,26px); font-weight:600; letter-spacing:-.01em; line-height:1.15; color:var(--ink); }
.stat-cell .lab{ font-size:13.5px; color:var(--ink-2); margin-top:9px; font-weight:500; line-height:1.4; max-width:22ch; margin-left:auto; margin-right:auto; }
.stars{ display:inline-flex; gap:2px; color:var(--bronze); margin-top:9px; }
.stars svg{ width:14px; height:14px; }

/* ============================================================
   PILLARS
   ============================================================ */

/* ============================================================
   FEATURE ROWS
   ============================================================ */
.features{ padding:36px 0 50px; }
.feature{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:64px; padding:52px 0; }
.feature.reverse .feat-visual{ order:2; } .feature.reverse .feat-text{ order:1; }
.feat-text h2{ font-size:clamp(27px,3.4vw,38px); margin:15px 0 16px; }
.feat-text > p{ font-size:16.5px; color:var(--ink-2); margin-bottom:22px; }
.feat-list{ display:flex; flex-direction:column; gap:12px; padding:0; margin:0; }
.feat-list li{ display:flex; gap:12px; align-items:flex-start; list-style:none; font-size:15px; color:var(--ink-2); }
.feat-check{ width:18px; height:18px; color:var(--bronze-ink); display:grid; place-items:center; flex-shrink:0; margin-top:2px; }
.feat-check svg{ width:15px; height:15px; stroke-width:2.4; }
.feat-list li strong{ color:var(--ink); font-weight:600; }
.feat-pro{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); background:var(--card-2); border:1px solid var(--line); padding:3px 9px; border-radius:100px; margin-bottom:4px; }
.feat-visual{ display:flex; justify-content:center; position:relative; }
.feat-visual .glow-pad{ position:absolute; inset:-12% -6%; background:var(--glow); z-index:0; pointer-events:none; }
.feat-visual .phone{ position:relative; z-index:1; }
.feat-visual .scr{ position:static; opacity:1; transform:none; height:100%; }

/* ============================================================
   STORY — one phone carried through chapters (scrollytelling)
   ============================================================ */
.story{ position:relative; padding:40px 0 0; }
.story-head{ text-align:center; max-width:600px; margin:0 auto 12px; }
.story-head h2{ font-size:clamp(28px,4vw,44px); margin:14px 0 14px; }
.story-head p{ font-size:17px; color:var(--ink-2); }
.story-inner{ position:relative; }
.story-caption{ display:none; }   /* mobile-only: pinned crossfading copy under the phone */
.story-stage{ position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; z-index:1; pointer-events:none; }
.story-mover{ will-change:transform; perspective:1700px; }
.story-mover .phone{ pointer-events:auto; }
.story-glow{ display:none; }
.story-steps{ position:relative; z-index:2; margin-top:-100vh; }
.story-step{ min-height:100vh; display:flex; align-items:center; pointer-events:none; }
.story-step[data-side="left"]{ justify-content:flex-start; }
.story-step[data-side="right"]{ justify-content:flex-end; }
.story-step-inner{ width:min(330px,32vw); text-align:left; pointer-events:auto; opacity:.14; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.story-step.active .story-step-inner{ opacity:1; transform:none; }
.story-step h2{ font-size:clamp(26px,3.2vw,38px); margin:15px 0 16px; }
.story-step-inner > p{ font-size:16.5px; color:var(--ink-2); margin-bottom:22px; }

/* Centred intro beat */
.story-step--intro{ pointer-events:none; }

@media (max-width:860px){
  /* Mobile: the phone is PINNED (sticky) while you scroll; its screen and the caption beneath it
     crossfade between chapters. Only opacity/slide changes — smooth & seamless, Apple-style. */
  .hero-stage-wrap{ margin-top:0; }                  /* desktop-only pull-up reset */
  /* Pin height uses plain 100vh (the LARGE viewport) on purpose: it never re-measures while the
     iOS toolbar collapses mid-scroll. dvh/svh resize DURING the gesture and un-pin the stage
     (breaks scrolling down, "works" scrolling up). Content group is CENTERED in the pin
     (padding-top clears the fixed nav so the phone never clips). */
  .story-stage{ position:sticky; top:0; height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding-top:72px; padding-bottom:10px; z-index:2; pointer-events:none; }
  .story-mover{ perspective:none; height:auto; flex:0 0 auto; }
  .story-mover .phone{ transform:scale(.5) !important; transform-origin:top center; margin-bottom:-282px; }  /* collapse the layout gap left by the scale */
  .story-glow{ display:none; }
  /* min-height keeps the group's total height stable across chapters so the centred phone doesn't bob */
  .story-caption{ display:block; width:100%; max-width:440px; min-height:340px; padding:0 26px; margin-top:16px; text-align:center;
    opacity:0; transform:translateY(8px); transition:opacity .35s var(--ease), transform .4s var(--ease); will-change:opacity,transform; }
  .story-caption .feat-pro{ margin-bottom:9px; }
  .story-caption h2{ font-size:clamp(23px,6.2vw,29px); line-height:1.14; margin:8px 0 11px; }
  .story-caption > p{ font-size:14.5px; line-height:1.5; color:var(--ink-2); margin:0 auto 15px; max-width:38ch; }
  .story-caption .feat-list{ display:inline-flex; flex-direction:column; gap:9px; text-align:left; max-width:none; }
  .story-caption .feat-list li{ font-size:13.5px; }
  /* steps are invisible scroll-spacers that drive progress; their copy renders in the pinned caption */
  .story-steps{ margin-top:-100vh; position:relative; z-index:1; }   /* must match the vh pin exactly */
  .story-step{ min-height:72vh; }
  .story-step-inner{ display:none; }
  /* short phones (SE-class): shrink the device so phone + caption still fit the pin */
  @media (max-height:700px){
    .story-mover .phone{ transform:scale(.42) !important; margin-bottom:-356px; }
    .story-caption{ min-height:0; margin-top:12px; }
    .story-caption h2{ font-size:21px; }
    .story-caption > p{ font-size:13.5px; margin-bottom:12px; }
    .story-caption .feat-list{ gap:7px; }
    .story-caption .feat-list li{ font-size:12.5px; }
  }
}

/* ============================================================
   WHY (plain capability list: no cards, no quote styling)
   ============================================================ */
.why{ padding:80px 0; background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.why-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:0 56px; max-width:900px; margin:0 auto; }
.why-item{ padding:28px 0; border-top:1px solid var(--line-2); }
.why-item h3{ font-size:20px; margin-bottom:8px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.why-item p{ font-size:15.5px; line-height:1.6; color:var(--ink-2); max-width:46ch; }

/* ============================================================
   PRICING
   ============================================================ */
.pricing{ padding:88px 0; }
.price-switch{ display:flex; justify-content:center; align-items:center; gap:2px; max-width:220px; margin:0 auto 34px;
  background:var(--card-2); border:1px solid var(--line); border-radius:100px; padding:4px; }
.ps-btn{ flex:1; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--ink-2); background:none; border:none; border-radius:100px;
  padding:9px 14px; cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease); }
.ps-btn.is-active{ background:var(--btn); color:var(--btn-text); }
.price-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:860px; margin:0 auto; }
.price-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:32px 30px; position:relative;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.price-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); }
.price-card.pro{ border-color:var(--line-2); box-shadow:var(--sh-md); }
.price-name{ font-family:"EB Garamond",serif; font-size:21px; font-weight:600; }
.price-name{ display:flex; align-items:center; gap:10px; }
.coming-soon-label{ display:inline-block; font-family:var(--font-display); font-size:12px; font-weight:500; letter-spacing:0; color:var(--ink-2); border:1px solid var(--line-2); border-radius:100px; padding:4px 9px; vertical-align:middle; margin-left:8px; white-space:nowrap; }
.price-desc{ font-size:13.5px; color:var(--ink-2); margin-top:5px; min-height:40px; }
.price-amt{ display:flex; align-items:baseline; flex-wrap:wrap; gap:5px 10px; margin:16px 0 2px; }
.price-amt .amt{ font-size:42px; font-weight:700; letter-spacing:-.03em; color:var(--ink); }
.price-amt .per{ font-size:14px; color:var(--ink-3); font-weight:500; }
.price-save{ display:inline-flex; align-items:center; gap:8px; margin-left:2px; }
.price-strike{ font-size:14px; color:var(--ink-3); text-decoration:line-through; }
.tag-save{ font-size:12px; font-weight:600; color:var(--ink-2); background:var(--card-2); border:1px solid var(--line); padding:3px 9px; border-radius:100px; }
.price-ph{ font-size:13px; color:var(--ink-3); font-style:italic; margin-bottom:16px; }
.price-card .btn{ width:100%; margin:16px 0 22px; }
.price-feats{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
.price-feats li{ display:flex; gap:11px; align-items:flex-start; font-size:14px; color:var(--ink-2); }
.price-feats .pf{ width:18px; height:18px; flex-shrink:0; color:var(--bronze-ink); margin-top:1px; stroke-width:2.4; }
.price-feats li strong{ color:var(--ink); font-weight:600; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ padding:80px 0; }
.faq-list{ max-width:720px; margin:0 auto; border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; background:none; border:none; cursor:pointer; font-family:inherit; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 4px; color:var(--ink); font-size:17px; font-weight:600; }
.faq-q .ic{ width:26px; height:26px; border-radius:50%; border:1px solid var(--line-2); flex-shrink:0; display:grid; place-items:center; color:var(--bronze-ink); transition:transform .4s var(--ease), background .3s var(--ease); }
.faq-q .ic svg{ width:13px; height:13px; stroke-width:2.4; transition:transform .4s var(--ease); }
.faq-item.open .faq-q .ic{ transform:rotate(45deg); background:var(--tint); }
.faq-a{ overflow:hidden; height:0; transition:height .45s var(--ease2); }
.faq-a-inner{ padding:0 4px 24px; font-size:15.5px; color:var(--ink-2); max-width:60ch;
  opacity:0; transform:translateY(-4px); transition:opacity .35s var(--ease), transform .35s var(--ease); }
.faq-item.open .faq-a-inner{ opacity:1; transform:none; transition-delay:.08s; }

/* ============================================================
   PRIVATE BETA
   ============================================================ */
.beta{ padding:40px 0 100px; }
.beta-box{ display:grid; grid-template-columns:1.1fr .9fr; align-items:stretch; overflow:hidden; background:var(--card-2); border:1px solid var(--line); border-radius:24px; min-height:440px; }
.beta-copy{ padding:64px 56px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; text-align:left; }
.beta-copy h2{ font-size:clamp(30px,3.8vw,44px); line-height:1.08; margin-bottom:14px; }
.beta-copy > p{ font-size:17px; color:var(--ink-2); max-width:38ch; margin:0 0 28px; }
.beta-form{ display:flex; align-items:center; gap:6px; width:100%; max-width:420px; background:var(--card); border:1px solid var(--line-2); border-radius:100px; padding:5px 5px 5px 20px; margin-bottom:14px;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease); }
.beta-form:focus-within{ border-color:var(--ink-3); box-shadow:0 0 0 4px rgba(0,0,0,.05); }
.beta-form.is-error{ border-color:var(--ink); }
.beta-form input{ flex:1; min-width:0; font-family:inherit; font-size:15px; color:var(--ink); background:transparent; border:none; outline:none; padding:10px 0; }
.beta-form input::placeholder{ color:var(--ink-3); }
.beta-form .btn{ flex-shrink:0; border-radius:100px; }
.beta-ok{ font-size:15px; font-weight:600; color:var(--ink); display:none; margin:0 0 14px !important; }
.beta-ok.show{ display:block; }
.beta-note{ font-size:13px; color:var(--ink-3); margin:0 0 24px !important; }
.beta-link{ display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--line-2); padding-bottom:2px; transition:border-color .3s var(--ease); }
.beta-link:hover{ border-color:var(--ink); }
.beta-visual{ position:relative; display:flex; justify-content:center; align-items:flex-end; padding-top:44px; background:radial-gradient(70% 60% at 50% 100%, rgba(0,0,0,.06), transparent 70%); }
.beta-device{ width:min(250px,80%); height:340px; overflow:hidden; border:7px solid #151517; border-bottom:none; border-radius:38px 38px 0 0; background:#F5F5F5; box-shadow:0 30px 60px -20px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.12); }
[data-theme="dark"] .beta-device{ background:#1A1A1A; border-color:#2A2A2D; }
.beta-device img{ display:block; width:100%; height:auto; }
@media (max-width:860px){
  .beta-box{ grid-template-columns:1fr; }
  .beta-copy{ padding:44px 26px 8px; }
  .beta-visual{ padding-top:28px; }
  .beta-device{ height:280px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{ border-top:1px solid var(--line); padding:54px 0 40px; }
.foot-grid{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:36px; }
.foot-brand{ max-width:290px; }
.foot-brand p{ font-size:14px; color:var(--ink-2); margin-top:14px; }
.foot-cols{ display:flex; gap:60px; flex-wrap:wrap; }
.foot-col h4{ font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin:0 0 14px; }
.foot-col a{ display:block; font-size:14px; color:var(--ink-2); margin-bottom:10px; transition:color .3s var(--ease); }
.foot-col a:hover{ color:var(--ink); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-top:26px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-3); }
.foot-verse{ font-family:"EB Garamond",serif; font-style:italic; }

/* ============================================================
   REVEAL / MOTION
   ============================================================ */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .65s var(--ease), transform .65s var(--ease); transition-delay:calc(var(--d,0)*60ms); will-change:opacity,transform; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1!important; transform:none!important; } .float{ animation:none!important; } .story-step-inner{ opacity:1!important; transform:none!important; } .story-mover, .story-glow{ transition:none!important; } }
.hero-anim{ opacity:0; transform:translateY(18px); }
.loaded .hero-anim{ opacity:1; transform:none; transition:opacity .85s var(--ease), transform .85s var(--ease); }
.loaded .hero-anim.d1{ transition-delay:.05s; }
.loaded .hero-anim.d2{ transition-delay:.13s; }
.loaded .hero-anim.d3{ transition-delay:.21s; }
.loaded .hero-anim.d4{ transition-delay:.29s; }
.loaded .hero-anim.d5{ transition-delay:.40s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){ .nav-mid{ display:none; } }
@media (max-width:700px){ .why-grid{ grid-template-columns:1fr; } .why{ padding:54px 0; } }
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; gap:24px; text-align:center; padding-top:8px; }
  .hero-sub{ margin-left:auto; margin-right:auto; }
  .hero-cta{ justify-content:center; } .hero-actions-note{ justify-content:center; }
  .hero-visual{ margin-top:40px; }
  .feature, .feature.reverse{ grid-template-columns:1fr; gap:36px; }
  .feature .feat-visual, .feature.reverse .feat-visual{ order:0; }
  .feature .feat-text, .feature.reverse .feat-text{ order:0; text-align:center; max-width:540px; margin:0 auto; }
  .feat-list{ text-align:left; max-width:420px; margin:0 auto; } .feat-pro{ }
  .price-grid{ grid-template-columns:1fr; max-width:440px; }
}
@media (max-width:640px){
  .wrap{ padding:0 20px; }
  .hero{ padding:100px 0 44px; }
  h1.hero-title{ font-size:clamp(34px,10.5vw,46px); }
  .hero-sub{ font-size:16px; margin-bottom:26px; }
  .hero-visual{ margin-top:42px; }

  /* Cleaner header: drop the waitlist CTA on mobile (still reachable below) */
  .nav-right .btn{ display:none; }

  /* CTAs sit side by side while they fit */
  .hero-cta{ flex-direction:row; flex-wrap:wrap; gap:10px; }
  .hero-cta{ justify-content:center; }
  .hero-cta .btn{ flex:0 0 auto; }

  /* Stats stack */
  .stat-row{ grid-template-columns:1fr; border-bottom:none; }
  .stat-cell{ border-bottom:1px solid var(--line); padding:20px 16px; }
  .stat-cell:last-child{ border-bottom:none; }
  .stat-cell + .stat-cell::before{ display:none; }

  /* Pillars -> compact horizontal cards with clamped copy */

  /* Testimonials -> horizontal snap carousel (keeps the page short) */

  .price-grid{ grid-template-columns:1fr; max-width:440px; }
  .beta-form{ padding-left:16px; } .beta-form .btn{ padding:11px 16px; }

  /* Tighter mobile rhythm */
  .trust{ padding:18px 0 56px; }
  .story{ padding:18px 0 0; }
  .pricing{ padding:58px 0; }
  .faq{ padding:54px 0; }
  .beta{ padding:24px 0 70px; }
  .section-head{ margin-bottom:34px; }
  .section-head h2{ margin:12px 0 12px; }
}

/* ============================================================
   LEGAL DOC PAGES (privacy.html / terms.html)
   ============================================================ */
.legal-nav{ border-bottom:1px solid var(--line); }
.legal-main{ max-width:720px; margin:0 auto; padding:56px 24px 90px; }
.legal-main .eyebrow{ margin-bottom:10px; }
.legal-main h1{ font-family:"EB Garamond",serif; font-size:clamp(30px,4.4vw,44px); font-weight:600; margin-bottom:8px; }
.legal-updated{ font-size:13.5px; color:var(--ink-3); margin-bottom:6px; }
.legal-notice{ font-size:13.5px; color:var(--ink-2); background:var(--card-2); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:22px 0 40px; }
.legal-main h2{ font-family:"EB Garamond",serif; font-size:21px; font-weight:600; margin:38px 0 12px; }
.legal-main h2:first-of-type{ margin-top:0; }
.legal-main p{ font-size:15.5px; line-height:1.7; color:var(--ink-2); margin-bottom:16px; }
.legal-main ul{ margin:0 0 16px 20px; padding:0; }
.legal-main li{ font-size:15.5px; line-height:1.7; color:var(--ink-2); margin-bottom:8px; }
.legal-main strong{ color:var(--ink); }
.legal-main a{ color:var(--bronze-ink); text-decoration-line:underline; text-decoration-color:var(--bronze-soft); }
.legal-toc{ display:flex; flex-wrap:wrap; gap:8px 16px; margin:0 0 40px; padding:16px 18px; background:var(--card-2); border:1px solid var(--line); border-radius:12px; }
.legal-toc a{ font-size:13px; font-weight:600; color:var(--ink-2); text-decoration:none; }
.legal-toc a:hover{ color:var(--bronze-ink); }

/* ============================================================
   COMPLIANCE MICRO-COPY (AI/billing disclosures) + COOKIE NOTICE
   ============================================================ */
.story-fineprint{ font-size:12.5px; line-height:1.6; color:var(--ink-3); margin-top:16px; padding-top:14px; border-top:1px dashed var(--line-2); }
.story-fineprint a{ color:var(--ink-2); text-decoration:underline; text-decoration-color:var(--line-2); }
.price-legal{ text-align:center; font-size:12.5px; color:var(--ink-3); max-width:52ch; margin:26px auto 0; }
.price-legal a{ color:var(--ink-2); text-decoration:underline; }

.cookie-notice{ position:fixed; left:16px; right:16px; bottom:16px; z-index:200; max-width:460px;
  background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--sh-lg);
  padding:18px 20px; display:flex; flex-direction:column; gap:12px;
  transform:translateY(140%); opacity:0; transition:transform .5s var(--ease), opacity .5s var(--ease); }
.cookie-notice.show{ transform:translateY(0); opacity:1; }
.cookie-notice p{ font-size:13px; line-height:1.55; color:var(--ink-2); }
.cookie-notice a{ color:var(--bronze-ink); text-decoration:underline; }
.cookie-notice .cn-actions{ display:flex; gap:10px; }
.cookie-notice .cn-actions .btn{ flex:1; }
@media (prefers-reduced-motion: reduce){ .cookie-notice{ transition:none; } }

/* Icon tiles (neutral) */
.ico-tile{ width:44px; height:44px; border-radius:12px; background:var(--card-2); border:1px solid var(--line); color:var(--ink); display:grid; place-items:center; }
.ico-tile svg{ width:22px; height:22px; }
.stat-cell .ico-tile{ margin:0 auto 16px; }
.why-item .ico-tile{ margin-bottom:16px; }

/* Opaque tab bar painted over the screenshots' translucent iOS bar (content ghosted through it) */
.app-tabbar{ position:absolute; left:0; right:0; bottom:0; height:66px; z-index:11; background:#F7F7F7; border-top:1px solid rgba(0,0,0,.08);
  opacity:0; transition:opacity .35s var(--ease); pointer-events:none; }
[data-theme="dark"] .app-tabbar{ background:#1A1A1A; border-top-color:rgba(255,255,255,.08); }
.app-tabbar[data-active]:not([data-active=""]){ opacity:1; }
.app-tabbar .tb{ position:absolute; top:10px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:2px; color:#8A8A8E; }
.app-tabbar .tb svg{ width:17px; height:17px; }
.app-tabbar .tb em{ font-style:normal; font-size:8.5px; font-weight:500; letter-spacing:.01em; }
.app-tabbar[data-active="home"] .tb-home, .app-tabbar[data-active="sermons"] .tb-sermons{ color:#A9783E; }
[data-theme="dark"] .app-tabbar[data-active="home"] .tb-home, [data-theme="dark"] .app-tabbar[data-active="sermons"] .tb-sermons{ color:#C99A5E; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* The story chapters overlap the hero CTAs (pulled up by margin). Let pointer events fall through the empty layer so the buttons get hover and clicks. */
.hero-stage-wrap{ pointer-events:none; }
.story-step-inner{ pointer-events:auto; }

/* Pro / Save tags: true neutral grey (no parchment or bronze tint) */
.feat-pro, .tag-save{ color:#5A5A5F; background:rgba(0,0,0,.06); border:1px solid transparent; }
[data-theme="dark"] .feat-pro, [data-theme="dark"] .tag-save{ color:#C7C7CC; background:rgba(255,255,255,.10); border-color:transparent; }

h2 .ac-name{ color:var(--bronze-ink); }
.beta-link:hover{ color:var(--bronze-ink); border-color:var(--bronze-ink); }

/* ============================================================
   TYPE: EB Garamond headlines (option K), bronze italic accents
   ============================================================ */
h1, h2, h3, .brand-name, .price-name, .stat-cell .big{ font-family:"EB Garamond", Georgia, "Times New Roman", serif; font-weight:500; letter-spacing:-.015em; }
h1.hero-title{ font-size:clamp(44px,5.8vw,74px); line-height:1.02; letter-spacing:-.02em; }
h2{ font-size:clamp(34px,4.6vw,58px); line-height:1.05; }
.brand-name{ font-size:23px; font-weight:600; }
.price-name{ font-size:27px; }
.stat-cell .big{ font-size:clamp(24px,2.6vw,31px); }
.bn h3{ font-size:clamp(29px,2.9vw,38px); }
.ac, .hero-title .ac{ font-style:italic; font-size:1.08em; font-weight:400; color:var(--bronze-ink); letter-spacing:-.01em; padding-right:.04em; }

/* Rotating word (Built around how ___ work): all words stacked, width eases to the active word */
.rot{ position:relative; display:inline-block; vertical-align:bottom; height:1.2em; line-height:1.2; overflow:hidden; padding:0 .06em .14em; margin:0 -.06em -.14em; font-style:italic; font-weight:400; font-size:1.08em; color:var(--bronze-ink); white-space:nowrap; text-align:left; }
.rot.is-ready{ transition:width .55s cubic-bezier(.2,.7,.2,1); }
.rot-w{ position:absolute; left:.06em; top:0; opacity:0; transform:translateY(55%); filter:blur(3px); transition:transform .6s cubic-bezier(.2,.7,.2,1), opacity .45s ease, filter .45s ease; will-change:transform,opacity; }
.rot-w.is-on{ opacity:1; transform:none; filter:none; }
.rot-w.is-out{ opacity:0; transform:translateY(-55%); filter:blur(3px); }
.rot:not(.is-ready) .rot-w{ display:none; }
.rot:not(.is-ready) .rot-w:first-child{ display:inline; position:static; opacity:1; transform:none; filter:none; }
@media (prefers-reduced-motion: reduce){ .rot.is-ready{ transition:none; } .rot-w{ transition:none; } }

/* Phones: reserve two lines for the rotating heading so a short word never changes the section height */
@media (max-width:560px){ .why .section-head h2{ min-height:2.1em; } }

/* Hero accent line: bolder italic; icon tiles: true neutral grey (no parchment tint) */
.hero-title .ac{ font-weight:600; }
.ico-tile{ background:rgba(0,0,0,.05); border:1px solid transparent; }
[data-theme="dark"] .ico-tile{ background:rgba(255,255,255,.09); }

/* Pricing: neutral borders, sliding Annual/Monthly thumb, soft price swap */
.price-card, .price-switch{ border-color:#E5E5EA; }
.price-card.pro{ border-color:#C7C7CC; }
.btn-secondary, .btn-ghost{ border-color:#D2D2D7; }
.btn-secondary:hover, .btn-ghost:hover{ border-color:#8E8E93; }
.price-switch{ position:relative; background:rgba(0,0,0,.05); }
.ps-btn{ position:relative; z-index:1; background:none !important; transition:color .3s cubic-bezier(.2,.7,.2,1); }
.ps-btn.is-active{ color:var(--btn-text); background:none !important; }
.ps-thumb{ position:absolute; top:4px; bottom:4px; left:0; width:0; border-radius:100px; background:var(--btn); z-index:0; transition:transform .38s cubic-bezier(.2,.7,.2,1), width .38s cubic-bezier(.2,.7,.2,1); will-change:transform; }
.price-switch:not(.is-ready) .ps-btn.is-active{ background:var(--btn) !important; }
.price-amt .amt, .price-amt .per, .price-ph{ transition:opacity .16s ease, transform .16s ease; }
.is-swapping{ opacity:0; transform:translateY(5px); }
.price-save{ transition:opacity .25s ease, transform .25s ease; }
.price-save.is-off{ opacity:0; transform:translateY(5px); pointer-events:none; }
[data-theme="dark"] .price-card, [data-theme="dark"] .price-switch{ border-color:rgba(255,255,255,.12); }
[data-theme="dark"] .price-switch{ background:rgba(255,255,255,.08); }
[data-theme="dark"] .price-card.pro{ border-color:rgba(255,255,255,.28); }
[data-theme="dark"] .btn-secondary, [data-theme="dark"] .btn-ghost{ border-color:rgba(255,255,255,.18); }
@media (prefers-reduced-motion: reduce){ .ps-thumb, .ps-btn, .price-amt .amt, .price-amt .per, .price-ph, .price-save{ transition:none !important; } }

/* App Store badge (official Apple artwork, black on light / white on dark) */
.appstore-badge{ display:inline-block; margin:0 0 22px; line-height:0; border-radius:8px; transition:transform .2s cubic-bezier(.2,.7,.2,1), opacity .2s ease; }
.appstore-badge img{ height:50px; width:auto; }
.appstore-badge:hover{ transform:scale(1.03); }
.appstore-badge:focus-visible{ outline:none; box-shadow:0 0 0 4px color-mix(in srgb, var(--bronze) 38%, transparent); }
.appstore-badge--sm{ margin:18px 0 0; }
.appstore-badge--sm img{ height:40px; }
.badge-on-dark{ display:none; }
[data-theme="dark"] .badge-on-dark{ display:inline-block; }
[data-theme="dark"] .badge-on-light{ display:none; }
@media (prefers-reduced-motion: reduce){ .appstore-badge{ transition:none; } .appstore-badge:hover{ transform:none; } }

/* Dark mode: dark grey to charcoal gradient instead of near-black */
[data-theme="dark"]{ --paper:#161618; --paper-2:#1C1C1F; --card:#212124; --card-2:#1A1A1D; --line:#2D2D31; --line-2:#3A3A3F; }
[data-theme="dark"] body{ background:linear-gradient(180deg,#1E1E21 0%,#151517 55%,#121214 100%) fixed; }
[data-theme="dark"] .nav{ background:rgba(24,24,26,.72); }

/* ============================================================
   TYPE B4: sans headlines + Cormorant Garamond bold italic accent in dark grey
   Motion: masked line reveal (same idea as the portfolio), vertical-only word rotation
   ============================================================ */
:root{ --accent-grey:#505055; --sans-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",system-ui,sans-serif; }
[data-theme="dark"]{ --accent-grey:#BDBDC2; }
h1,h2,h3,.price-name,.stat-cell .big{ font-family:var(--sans-display); font-weight:600; letter-spacing:-.03em; }
h1.hero-title{ font-size:clamp(40px,5.4vw,68px); line-height:1.04; letter-spacing:-.032em; }
h2{ font-size:clamp(30px,4.2vw,50px); line-height:1.08; }
.bn h3{ font-size:clamp(24px,2.5vw,32px); }
.price-name{ font-size:24px; }
.stat-cell .big{ font-size:clamp(20px,2.2vw,26px); }
.ac, .hero-title .ac, .rot{ font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-weight:600; font-size:1.14em; color:var(--accent-grey); letter-spacing:-.01em; padding-right:.04em; }

/* Masked line reveal */
.mask{ display:block; overflow:hidden; padding:.08em .12em .18em 0; margin:-.08em -.12em -.18em 0; }
.mask-i{ display:inline-block; transform:translateY(112%); transition:transform .8s cubic-bezier(.22,1,.36,1); transition-delay:calc(var(--d,0)*90ms); will-change:transform; }
.mask.in .mask-i, .loaded .hero-title .mask-i{ transform:none; }
.reveal{ transform:translateY(14px); transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); transition-delay:calc(var(--d,0)*60ms); }
.reveal.in{ transform:none; }
@media (prefers-reduced-motion: reduce){ .mask-i{ transform:none !important; transition:none !important; } }

/* Rotating word v2: fixed-width slot, each word centered, vertical-only motion (no sideways drift) */
.rot{ position:relative; display:inline-block; vertical-align:bottom; height:1.2em; line-height:1.2; overflow:hidden; padding:0 .08em .16em; margin:0 -.08em -.16em; white-space:nowrap; text-align:center; }
.rot.is-ready{ transition:none; }
.rot-w{ position:absolute; left:0; right:0; top:0; opacity:0; transform:translateY(.34em); filter:blur(4px); transition:transform .7s cubic-bezier(.22,1,.36,1) .12s, opacity .5s ease .12s, filter .5s ease .12s; }
.rot-w.is-on{ opacity:1; transform:none; filter:none; }
.rot-w.is-out{ opacity:0; transform:translateY(-.34em); filter:blur(4px); transition:transform .45s cubic-bezier(.22,1,.36,1), opacity .3s ease, filter .3s ease; }

/* ============================================================
   V3: white page, bronze gradient accent with mouse-following shine, seamless word rotation
   ============================================================ */
:root{ /* bronze gradient stops: darkest and lightest still >= 3:1 on white (large text) */
  --g1:#7C5326; --g2:#98702F; --g3:#B08A45; --shine:rgba(255,236,190,.78); }
html:not([data-theme="dark"]){ --paper:#FFFFFF; --paper-2:#F5F5F7; --card-2:#F5F5F7; --line:#E5E5EA; --line-2:#D2D2D7; }
[data-theme="dark"]{ /* lighter stops so the text stays >= 4.5:1 on the dark grey */
  --g1:#A97F3F; --g2:#C79A55; --g3:#E0C082; --shine:rgba(255,242,208,.9); }

@property --mx{ syntax:'<percentage>'; inherits:true; initial-value:-60%; }
@property --my{ syntax:'<percentage>'; inherits:true; initial-value:50%; }
@property --bx{ syntax:'<percentage>'; inherits:true; initial-value:50%; }

.hero-title .ac, .rot-w{ font-family:"Cormorant Garamond",Georgia,serif; font-style:italic; font-weight:600; letter-spacing:-.01em;
  color:transparent; -webkit-text-fill-color:transparent; -webkit-background-clip:text; background-clip:text;
  background-image:linear-gradient(100deg, var(--g1) 0%, var(--g2) 36%, var(--g3) 62%, var(--g2) 82%, var(--g1) 100%); }
.hero-title .ac{ display:inline-block; font-size:1.14em; padding:0 .08em .16em 0; margin-bottom:-.16em;
  background-image:radial-gradient(circle 170px at var(--mx) var(--my), var(--shine) 0%, transparent 70%), linear-gradient(100deg, var(--g1) 0%, var(--g2) 25%, var(--g3) 50%, var(--g2) 75%, var(--g1) 100%);
  background-size:100% 100%, 220% 100%; background-position:0 0, var(--bx) 0; background-repeat:no-repeat;
  transition:--mx .7s cubic-bezier(.22,1,.36,1), --my .7s cubic-bezier(.22,1,.36,1), --bx .9s cubic-bezier(.22,1,.36,1); }

/* Rotating word v3: width eases to the word, word fades and lifts slightly (no big diagonal travel) */
.rot{ color:transparent; text-align:left; font-size:1.14em; padding:0 .08em .16em; margin:0 -.08em -.16em; transition:none; }
.rot.is-ready{ transition:width .6s cubic-bezier(.22,1,.36,1); }
.rot-w{ left:.08em; right:auto; transform:translateY(.14em); filter:blur(3px); transition:opacity .45s ease .1s, transform .6s cubic-bezier(.22,1,.36,1) .1s, filter .45s ease .1s; }
.rot-w.is-on{ opacity:1; transform:none; filter:none; }
.rot-w.is-out{ opacity:0; transform:translateY(-.14em); filter:blur(3px); transition:opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1), filter .3s ease; }
.rot:not(.is-ready) .rot-w:first-child{ position:static; }
@media (prefers-reduced-motion: reduce){ .rot.is-ready{ transition:none; } .hero-title .ac{ transition:none; } }

/* ============================================================
   V4: modern copper-to-gold bronze, gradient "Stor", brand-font heading, iPhone section
   ============================================================ */
:root{ --g1:#7C5326; --g2:#98702F; --g3:#B08A45; --shine:rgba(255,236,190,.78); }
[data-theme="dark"]{ --g1:#A97F3F; --g2:#C79A55; --g3:#E0C082; --shine:rgba(255,242,208,.9); }
.ac-name, .brand-name .ac-name, h2 .ac-name{ background-image:linear-gradient(100deg,var(--g1) 0%,var(--g2) 50%,var(--g3) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.brandfont{ font-family:"EB Garamond",Georgia,"Times New Roman",serif; font-weight:600; letter-spacing:-.015em; font-size:1.06em; }

.dl-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 26px; }
.dl-row .appstore-badge{ margin:0; }
.dl-row .btn{ height:50px; padding:0 26px; }
.updates-cap{ font-size:14px; color:var(--ink-2); margin:0 0 10px; }
.beta-note a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:2px; }
.beta-note{ margin:0 !important; font-size:12.5px; }
.beta-ok{ margin:0 0 12px !important; }
.beta-error{ font-size:13px; color:var(--ink); margin:0 0 10px; display:none; }
.beta-error.show{ display:block; }

/* Newest iPhone (the hero phone, scaled) inside the iPhone section */
.ip-device{ position:relative; margin-top:auto; align-self:center; width:262px; height:388px; overflow:hidden; flex-shrink:0; }
.ip-device .phone{ position:absolute; top:16px; left:50%; transform:translateX(-50%) scale(.87); transform-origin:top center; }
.ip-device .phone::before{ display:none; }
.ip-device .phone-screen{ background:var(--bar); }
[data-theme="dark"] .ip-device .phone-screen{ background:var(--bar-d); }
.mini-status{ background:linear-gradient(to bottom, var(--bar) 0%, var(--bar) 88%, transparent 100%); }
[data-theme="dark"] .mini-status{ background:linear-gradient(to bottom, var(--bar-d) 0%, var(--bar-d) 88%, transparent 100%); }
.mini-scroll{ position:absolute; inset:0 0 auto 0; }
.mini-scroll img{ display:block; width:100%; height:auto; }

/* ============================================================
   V5: muted biblical bronze, tan bands back, wordmark in the headline font, compact iPhone section
   ============================================================ */
:root{ --g1:#7C5326; --g2:#98702F; --g3:#B08A45; --shine:rgba(255,236,190,.78); }
[data-theme="dark"]{ --g1:#A97F3F; --g2:#C79A55; --g3:#E0C082; --shine:rgba(255,242,208,.9); }
html:not([data-theme="dark"]){ --paper-2:#F6F3EC; --card-2:#F6F3EC; }
.brand-name, .brandfont{ font-family:var(--sans-display); font-weight:600; letter-spacing:-.03em; }
.brand-name{ font-size:21px; }
.brandfont{ font-size:1em; }
.ip-device{ width:240px; height:340px; }
.ip-device .phone{ top:12px; transform:translateX(-50%) scale(.8); }
.beta-form{ margin-bottom:12px; }
.dl-row{ margin:6px 0 16px; }
.dl-row .btn{ gap:8px; }
.beta-note{ margin:0 !important; }

/* Bento: warm gradient cards with the newest-iPhone device peeking out (Bible-app feel) */
.bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:20px; max-width:1060px; margin:56px auto 0; }
.bn{ position:relative; overflow:hidden; border-radius:28px; padding:44px 40px 0; display:flex; flex-direction:column; min-height:520px;
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; }
.bn:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -28px rgba(60,40,10,.35); }
.bn-a{ grid-column:span 7; flex-direction:row; gap:20px; background:linear-gradient(155deg,#FBF1E4 0%,#F4DCC0 100%); }
.bn-b{ grid-column:span 5; background:linear-gradient(160deg,#F4F4F6 0%,#E8E9ED 100%); }
.bn-c{ grid-column:span 5; background:linear-gradient(160deg,#F6F3EF 0%,#E8E3DD 100%); }
.bn-d{ grid-column:span 7; flex-direction:row; gap:20px; color:#F4F1EA;
  background:radial-gradient(60% 70% at 78% 100%, rgba(201,154,94,.38), transparent 70%), linear-gradient(165deg,#2B2118 0%,#14110D 100%); }
.bn-copy{ flex:1; padding-bottom:36px; position:relative; z-index:1; }
.bn-a .bn-copy, .bn-d .bn-copy{ max-width:27ch; align-self:flex-start; }
.bn h3{ font-size:clamp(27px,2.7vw,36px); line-height:1.08; margin-bottom:12px; }
.bn p{ font-size:16px; line-height:1.55; color:rgba(29,29,31,.72); }
.bn-d h3{ color:#F4F1EA; }
.bn-d p{ color:rgba(244,241,234,.72); }

/* device: the hero phone, scaled, hanging into the card from below */
.bn-device{ position:relative; margin-top:auto; align-self:center; width:262px; height:388px; overflow:hidden; flex-shrink:0; }
.bn-a .bn-device, .bn-d .bn-device{ align-self:flex-end; }
.bn-device .phone{ position:absolute; top:16px; left:50%; transform:translateX(-50%) scale(.87); transform-origin:top center; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.bn-device .phone::before{ display:none; }
.bn:hover .bn-device .phone{ transform:translateX(-50%) translateY(-10px) scale(.87); }
.bn-device .phone-screen{ background:var(--bar); }
[data-theme="dark"] .bn-device .phone-screen{ background:var(--bar-d); }
.mini-status{ background:linear-gradient(to bottom, var(--bar) 0%, var(--bar) 88%, transparent 100%); }
[data-theme="dark"] .mini-status{ background:linear-gradient(to bottom, var(--bar-d) 0%, var(--bar-d) 88%, transparent 100%); }
.mini-scroll{ position:absolute; inset:0 0 auto 0; transform:translateY(var(--y,0)); }
.mini-scroll img{ display:block; width:100%; height:auto; }
[data-theme="dark"] .bn p{ color:rgba(244,241,234,.72); }
[data-theme="dark"] .bn h3{ color:#F4F1EA; }
[data-theme="dark"] .bn-a{ background:linear-gradient(155deg,#2D2417 0%,#1E1710 100%); }
[data-theme="dark"] .bn-b{ background:linear-gradient(160deg,#24262A 0%,#17191D 100%); }
[data-theme="dark"] .bn-c{ background:linear-gradient(160deg,#27231F 0%,#1A1714 100%); }
@media (max-width:860px){
  .bento{ grid-template-columns:1fr; }
  .bn, .bn-a, .bn-b, .bn-c, .bn-d{ grid-column:auto; flex-direction:column; min-height:0; padding:30px 26px 0; }
  .bn-a .bn-copy, .bn-d .bn-copy{ max-width:none; padding-bottom:28px; }
  .bn-a .bn-device, .bn-d .bn-device{ align-self:center; }
}


/* ============================================================
   V6: type system + app-matched bronze + iPhone hover
   Display (sans): hero headline and section titles only
   Title (EB Garamond serif): chapter titles, card titles, pricing names, stat headings
   Brand (Lora): the SermonStor wordmark only
   Accent (Cormorant italic, bronze gradient): one phrase in the hero and the rotating word
   ============================================================ */
:root{ --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",system-ui,sans-serif; --font-title:"EB Garamond",Georgia,"Times New Roman",serif; --font-brand:"Lora",Georgia,serif;
  /* matched to the app (sampled from the app screenshots): light #9C6940, dark #B57A4A */
  --bronze:#9C6940; --bronze-ink:#9C6940; --bronze-soft:#B8875F; --tint:rgba(156,105,64,.10);
  --g1:#7E5030; --g2:#9C6940; --g3:#B88458; --shine:rgba(255,232,196,.75); }
[data-theme="dark"]{ --bronze:#B57A4A; --bronze-ink:#B57A4A; --bronze-soft:#9A6A42; --tint:rgba(181,122,74,.14);
  --g1:#A9754A; --g2:#BC8350; --g3:#DDB087; --shine:rgba(255,240,215,.9); }
h1,h2,h3,h4,.price-name,.stat-cell .big{ font-family:var(--font-title); font-weight:500; letter-spacing:-.015em; }
h1.hero-title, .section-head h2, .trust h2, .beta-copy h2{ font-family:var(--font-display); font-weight:600; letter-spacing:-.03em; }
.story-step-inner h2{ font-size:clamp(32px,3.6vw,48px); line-height:1.08; }
.bn h3{ font-size:clamp(29px,2.9vw,38px); }
.price-name{ font-size:27px; }
.stat-cell .big{ font-size:clamp(24px,2.6vw,31px); }
.why-item h3{ font-size:22px; }
.brand-name, .brandfont{ font-family:var(--font-brand); font-weight:600; letter-spacing:-.015em; }
.brand-name{ font-size:22px; }
.brandfont{ font-size:1em; }

/* iPhone section: the phone hops up on hover, like the bento cards */
.ip-device .phone{ transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.beta-box:hover .ip-device .phone{ transform:translateX(-50%) translateY(-10px) scale(.8); }
@media (prefers-reduced-motion: reduce){ .ip-device .phone{ transition:none; } .beta-box:hover .ip-device .phone{ transform:translateX(-50%) scale(.8); } }

/* ============================================================
   V7: Apple-style compact email field, smaller fine print, even iPhone-card padding, metallic "Stor"
   ============================================================ */
:root{ --metal:#E9D3AE; }
[data-theme="dark"]{ --metal:#FFF1D6; }
.beta-form{ max-width:340px; height:46px; padding:4px 4px 4px 14px; gap:6px; border:1px solid #D2D2D7; border-radius:12px; background:var(--card); box-shadow:none; margin-bottom:14px; }
[data-theme="dark"] .beta-form{ border-color:rgba(255,255,255,.18); }
.beta-form:focus-within{ border-color:#8E8E93; box-shadow:0 0 0 4px color-mix(in srgb, var(--bronze) 28%, transparent); }
.beta-form.is-error{ border-color:var(--ink); }
.beta-form input{ font-size:15px; padding:0; height:100%; }
.beta-form .btn{ height:36px; padding:0 16px; font-size:14px; font-weight:500; border-radius:9px; }
.beta-note{ font-size:11.5px; color:var(--ink-3); line-height:1.4; }
.beta-note a{ color:var(--ink-3); }
.beta-copy{ padding:52px 56px; }
.beta-box{ min-height:0; }
.beta-copy h2{ margin-top:0; }
.beta-copy > p{ max-width:50ch; margin:0 0 22px; }
.dl-row{ margin:2px 0 14px; }
@media (max-width:860px){ .beta-copy{ padding:40px 26px 8px; } }

/* Metallic bronze "Stor": a bright band sweeps across on hover (wordmark and heading) */
.ac-name, .brand-name .ac-name, h2 .ac-name{
  background-image:linear-gradient(100deg,var(--g1) 0%,var(--g2) 26%,var(--g3) 44%,var(--metal) 50%,var(--g3) 56%,var(--g2) 74%,var(--g1) 100%);
  background-size:300% 100%; background-position:0% 0; background-repeat:no-repeat;
  transition:background-position .9s cubic-bezier(.22,1,.36,1); }
.brand:hover .ac-name, h2:hover .ac-name, .ac-name:hover{ background-position:100% 0; }
@media (prefers-reduced-motion: reduce){ .ac-name{ transition:none; } }

.beta-copy > p.beta-note{ font-size:11.5px; line-height:1.4; max-width:none; margin:0; color:var(--ink-3); }

/* Restored shared pill controls and compact iPhone signup. */
.btn{ border-radius:999px; font-weight:500; font-size:16px; padding:12px 24px; box-shadow:none; }
.btn-sm{ border-radius:999px; font-size:13px; padding:8px 16px; }
.btn-primary:hover{ background:color-mix(in srgb,var(--btn) 90%,var(--paper)); transform:translateY(-1px); box-shadow:none; }
.btn-secondary:hover,.btn-ghost:hover{ transform:translateY(-1px); box-shadow:none; }
.btn:active{ transform:scale(.98); box-shadow:none; }
.btn:focus-visible{ outline:2px solid var(--bronze-ink); outline-offset:4px; }
.beta-form{ width:100%; max-width:380px; height:auto; min-height:54px; border-radius:999px; padding:4px 4px 4px 18px; margin-bottom:8px; }
.beta-form .btn{ height:44px; padding:0 20px; border-radius:999px; font-size:14px; }
.beta-copy > p.beta-note{ font-size:12px; line-height:1.5; max-width:380px; margin:0 0 24px !important; }
.beta-copy .dl-row{ margin:0; }
.beta-copy .appstore-badge img{ height:40px; width:auto; }
@media(max-width:380px){ .beta-form{ padding-left:14px; gap:4px; } .beta-form .btn{ padding:0 14px; } }
@media(prefers-reduced-motion:reduce){ .btn,.btn:hover,.btn:active{ transform:none; transition:none; } }


/* Separate access introduction; the original four-card bento remains unchanged. */
.access-card{ max-width:1060px; margin:56px auto 0; border-radius:28px; background:linear-gradient(155deg,#FBF4E8,#F5DFC4); display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:24px; padding:40px; overflow:hidden; }
.access-copy h3{ font-size:clamp(29px,2.9vw,38px); line-height:1.08; margin:0 0 16px; }
.access-copy p{ font-size:16px; line-height:1.55; color:var(--ink-2); max-width:32ch; }
.access-copy .access-note{ font-size:12px; margin-top:16px; }
.access-art{ position:relative; width:100%; aspect-ratio:1.65; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.access-card:hover .access-art{ transform:translateY(-10px); }
.access-device{ position:absolute; filter:drop-shadow(0 12px 12px #15151726); }
.access-mac{ width:83%; left:12%; top:1%; aspect-ratio:3400 / 2240; }
.access-ipad{ width:43%; left:0; bottom:0; aspect-ratio:3000 / 2300; z-index:2; transform:rotate(-6deg); }
.access-phone{ width:18%; right:0; bottom:0; aspect-ratio:1470 / 3000; z-index:3; transform:rotate(5deg); }
.access-frame{ position:absolute; inset:0; width:100%; height:100%; z-index:2; }
.access-screen{ position:absolute; overflow:hidden; background:#F5F5F5; }
.access-screen img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.access-mac .access-screen{ left:12.32%; top:12.81%; width:75.33%; height:74.33%; border-radius:2% 2% 0 0; }
.access-ipad .access-screen{ left:4.1%; top:5.08%; width:91.77%; height:89.79%; border-radius:3%; }
.access-phone .access-screen{ left:5.03%; top:2.16%; width:89.87%; height:95.64%; border-radius:14% / 6.5%; }
.access-card + .bento{ margin-top:20px; }
[data-theme="dark"] .access-card{ background:linear-gradient(155deg,#2D2417,#1E1710); }
@media(max-width:860px){ .access-card{ grid-template-columns:1fr; padding:30px 26px; gap:28px; } .access-copy p{ max-width:46ch; } .access-art{ max-width:580px; margin:auto; } }
@media(prefers-reduced-motion:reduce){ .access-art{ transition:none; } .access-card:hover .access-art{ transform:none; } }

/* Closing access section: download first, email updates second. */
.beta-anywhere{ grid-template-columns:1fr 1.15fr; align-items:center; }
.beta-anywhere .beta-copy{ padding:48px 0 48px 40px; }
.beta-anywhere .beta-copy > .dl-row{ margin:0 0 28px; gap:18px; flex-wrap:wrap; }
.access-web-link{ display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:500; min-height:44px; text-underline-offset:4px; }
.access-web-link:hover{ text-decoration:underline; }
.access-web-link:focus-visible{ outline:2px solid var(--bronze-ink); outline-offset:4px; border-radius:4px; }
.beta-anywhere .anywhere-visual{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 30px; background:none; min-width:0; }
.anywhere-platforms{ font-size:12px; line-height:1.5; color:var(--ink-2); text-align:center; margin-top:22px; }
.beta-anywhere:hover .access-art{ transform:translateY(-10px); }
@media(max-width:860px){ .beta-anywhere{ grid-template-columns:1fr; } .beta-anywhere .beta-copy{ padding:36px 26px 0; } .beta-anywhere .anywhere-visual{ padding:32px 26px; } }
@media(prefers-reduced-motion:reduce){ .beta-anywhere:hover .access-art{ transform:none; } }

/* Theme-aware app icon and closing device screens. */
.brand-app-icon{ display:grid; place-items:center; width:40px; height:40px; flex-shrink:0; border-radius:10px; background:var(--card); border:1px solid var(--line-2); box-shadow:var(--sh-sm); }
.brand-app-icon .brand-mark{ width:29px; height:29px; object-fit:contain; }
[data-theme="dark"] .brand-app-icon{ background:var(--card-2); border-color:var(--line-2); }
/* Desktop/tablet captures have no native dark assets yet. Theme only their screen content, keeping official hardware untouched. */
[data-theme="dark"] .access-mac .access-screen img,
[data-theme="dark"] .access-ipad .access-screen img{ filter:invert(.92) hue-rotate(180deg); }
[data-theme="dark"] .access-screen{ background:#1A1A1A; }

/* App icon matches the supplied white tile; the mark follows the active theme. */
.brand-app-icon{ width:42px; height:42px; border-radius:11px; border:0; background:#FFFFFF; box-shadow:0 2px 4px rgba(0,0,0,.06); }
.brand-app-icon .brand-mark{ width:27px; height:27px; }
[data-theme="dark"] .brand-app-icon{ background:#242426; border:0; box-shadow:0 2px 5px rgba(0,0,0,.2); }
.closing-accent{ font-family:"Cormorant Garamond",Georgia,serif; font-weight:600; font-style:italic; font-size:1.14em; letter-spacing:-.01em; padding-right:.06em; color:transparent; -webkit-text-fill-color:transparent; background-clip:text; -webkit-background-clip:text; background-image:linear-gradient(100deg,var(--g1),var(--g2) 36%,var(--g3) 62%,var(--g2) 82%,var(--g1)); }
/* One synchronized dissolve includes gradients, screenshots and hardware overlays. */
html.theme-crossfade *,html.theme-crossfade *::before,html.theme-crossfade *::after{ transition:none !important; }
::view-transition-old(root){ animation:theme-out 700ms cubic-bezier(.4,0,.2,1) both; mix-blend-mode:normal; }
::view-transition-new(root){ animation:none; mix-blend-mode:normal; }
::view-transition-old(root){ z-index:2; }
::view-transition-new(root){ z-index:1; }
@keyframes theme-out{ from{opacity:1} to{opacity:0} }
@media(prefers-reduced-motion:reduce){ ::view-transition-old(root),::view-transition-new(root){ animation:none; } }

/* Keep the reference app icon white in either site theme. */
[data-theme="dark"] .brand-app-icon{ background:#FFFFFF; box-shadow:0 2px 4px rgba(0,0,0,.06); }
[data-theme="dark"] .brand-app-icon .brand-mark{ filter:none; }
.hero-title .ac, .rot-w, .ac-name, .brand-name .ac-name, h2 .ac-name, .closing-accent{
 background-image:radial-gradient(circle 170px at var(--mx) var(--my),var(--shine) 0%,transparent 70%),linear-gradient(100deg,var(--g1) 0%,var(--g2) 25%,var(--g3) 50%,var(--g2) 75%,var(--g1) 100%);
 background-size:100% 100%,220% 100%; background-position:0 0,var(--bx) 0; background-repeat:no-repeat;
 transition:--mx .7s cubic-bezier(.22,1,.36,1),--my .7s cubic-bezier(.22,1,.36,1),--bx .9s cubic-bezier(.22,1,.36,1);
}
@media(prefers-reduced-motion:reduce){ .hero-title .ac,.rot-w,.ac-name,.brand-name .ac-name,h2 .ac-name,.closing-accent{ transition:none; } }

/* Current captures contain native dark UI; no simulated recoloring. */
[data-theme="dark"] .access-mac .access-screen img,
[data-theme="dark"] .access-ipad .access-screen img{ filter:none; }

/* App captures own their navigation and FAB spacing. Device chrome gets reserved space. */
.scr-img-wrap{ top:52px; bottom:22px; }
.scr-img{ object-fit:contain; object-position:center top !important; -webkit-mask-image:none; mask-image:none; }
.app-tabbar{ display:none; }
.app-statusbar.is-tall{ height:52px; }
.mini-scroll{ top:52px; }
.access-phone .access-screen{ display:flex; align-items:center; background:#F5F5F5; }
.access-phone .access-screen img{ height:100%; object-fit:contain; }
[data-theme="dark"] .access-phone .access-screen{ background:#1A1A1A; }

/* Approved continuous captures: native UI owns all controls. */
.app-statusbar{visibility:hidden;}
.appstore-badge:hover{transform:none;opacity:.85;}
.download-main{min-height:100svh;max-width:1120px;margin:auto;padding:140px 40px 64px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:72px;}
.download-copy h1{font-family:var(--font-display);font-size:clamp(42px,5vw,64px);font-weight:600;letter-spacing:-.04em;line-height:1.06;margin:24px 0 16px;}
.download-copy>p{font-size:19px;color:var(--ink-2);margin-bottom:32px;}
.download-icon{width:80px;height:80px;border-radius:20px;background:white;display:grid;place-items:center;box-shadow:0 2px 8px #0000000d;}
.download-icon img{width:56px;height:56px;}
.download-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.download-actions .appstore-badge{margin:0;}
.store-pending{display:inline-flex;opacity:.65;cursor:default;}
.download-note{font-size:14px!important;margin:16px 0 32px!important;}
.qr-placeholder{width:180px;height:180px;border:1px dashed var(--line-2);border-radius:16px;display:grid;place-content:center;text-align:center;gap:8px;color:var(--ink-2);padding:20px;}
.qr-placeholder strong{font-size:16px;color:var(--ink);}.qr-placeholder span{font-size:13px;line-height:1.4;}
.download-phone{width:min(100%,350px);justify-self:center;filter:drop-shadow(0 20px 24px #00000012);}
.download-phone img{width:100%;height:auto;display:block;}
.download-back{font-size:14px;color:var(--ink-2);}
@media(max-width:700px){.download-main{grid-template-columns:1fr;padding:120px 24px 48px;gap:40px;text-align:center;}.download-icon{margin:auto;}.download-actions{justify-content:center;}.qr-placeholder{display:none;}.download-phone{width:260px;}.download-copy h1{font-size:44px;}.download-note{margin-bottom:0!important;}.download-nav .nav-mid{display:none;}}
@media(prefers-reduced-motion:no-preference){.download-phone img{animation:download-in .7s ease both;}@keyframes download-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}}

/* Download page brand and badge finish. */
.download-copy h1 .download-wordmark{font-family:var(--font-brand);font-weight:600;letter-spacing:-.015em;}
.download-page .store-pending{opacity:1;}
.download-page .appstore-badge{position:relative;overflow:hidden;border-radius:8px;}
.download-page .appstore-badge:hover{opacity:1;}
.download-page .appstore-badge::after{content:"";position:absolute;inset:-20% auto -20% -70%;width:35%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-18deg);pointer-events:none;}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.download-page .appstore-badge:hover::after{animation:badge-shine .8s ease;}@keyframes badge-shine{to{left:140%;}}}

.download-page .qr-placeholder{margin-top:36px;}

.download-qr{margin:36px 0 0;width:192px;}.download-qr a{display:block;padding:8px;background:#fff;border-radius:20px;box-shadow:0 4px 18px #0000000b;}.download-qr img{display:block;width:100%;height:auto;border-radius:12px;}.download-qr figcaption{text-align:center;margin-top:16px;font-size:14px;color:var(--ink-2);}.download-qr a:focus-visible{outline:2px solid var(--bronze);outline-offset:5px;}@media(max-width:700px){.download-qr{margin:32px auto 0;width:160px;}}

/* Silver sweep stays visible against the official white badge. */
html:not([data-theme="dark"]) .download-page .appstore-badge::after{width:48%;background:linear-gradient(100deg,transparent 0%,rgba(115,120,130,.12) 28%,rgba(115,120,130,.3) 50%,rgba(115,120,130,.12) 72%,transparent 100%);mix-blend-mode:multiply;}

/* Compact mobile download view: direct actions first, device fits remaining height. */
@media(max-width:700px){
 .download-page .nav-inner{min-height:64px;}
 .download-main{box-sizing:border-box;min-height:100svh;max-width:100%;padding:88px 24px 20px;gap:20px;grid-template-rows:auto minmax(0,1fr);align-content:start;align-items:start;}
 .download-icon{width:48px;height:48px;border-radius:12px;}.download-icon img{width:34px;height:34px;}
 .download-copy h1{font-size:32px;line-height:1.08;margin:14px 0 10px;}
 .download-copy>p{font-size:15px;margin-bottom:18px;}
 .download-actions{gap:16px;}.download-actions .appstore-badge img{height:40px;}.download-actions .webapp-link{font-size:14px;}
 .download-qr{display:none;}
 .download-phone{width:auto;max-width:100%;height:min(42svh,350px);align-self:center;}
 .download-phone img{height:100%;width:auto;max-width:100%;object-fit:contain;}
}
@media(max-width:700px) and (max-height:700px){
 .download-main{padding-top:76px;gap:12px;}
 .download-icon{display:none;}
 .download-copy h1{font-size:28px;margin-top:0;}
 .download-phone{height:min(40svh,290px);}
}

/* Standalone shell: persistent back action and one bounded viewport. */
body.download-page{height:100vh;height:100dvh;min-height:0;display:grid;grid-template-rows:64px minmax(0,1fr);overflow:hidden;}
.download-page .nav{position:static;inset:auto;background:transparent;border:0;backdrop-filter:none;}
.download-page .nav-inner{height:64px;min-height:0;max-width:none;padding:0 28px;display:flex;justify-content:space-between;}
.download-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;text-decoration:none;}
.download-back:hover{color:var(--ink);}.download-back:focus-visible{outline:2px solid var(--bronze);outline-offset:4px;border-radius:8px;}
.download-main{width:100%;height:100%;min-height:0;box-sizing:border-box;padding:24px 40px 32px;overflow:hidden;}
.download-phone{min-height:0;height:100%;max-height:720px;width:auto;align-self:center;}
.download-phone img{height:100%;width:auto;max-width:100%;object-fit:contain;}
@media(max-width:700px){
 .download-page .nav-inner{padding:0 20px;}
 .download-main{padding:8px 24px max(16px,env(safe-area-inset-bottom));gap:20px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-content:stretch;}
 .download-icon{display:none;}
 .download-copy h1{font-size:30px;line-height:1.08;margin:0 0 12px;}
 .download-copy>p{font-size:15px;margin:0 0 18px;}
 .download-actions{flex-wrap:nowrap;gap:16px;}
 .download-phone{height:100%;max-height:480px;max-width:100%;width:auto;align-self:center;}
 .download-phone img{height:100%;width:auto;max-width:100%;object-fit:contain;}
}
@media(max-height:650px) and (min-width:701px){.download-qr{display:none;}.download-copy h1{font-size:40px;}.download-icon{width:48px;height:48px;}.download-icon img{width:34px;height:34px;}}
@media(max-width:700px) and (max-height:500px){.download-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:center;gap:16px;padding-top:0;}.download-copy h1{font-size:24px;}.download-actions{flex-direction:column;gap:8px;}.download-copy>p{font-size:13px;margin-bottom:12px;}}

/* Static two-phone product preview, kept close to the download actions. */
.download-main{gap:32px;grid-template-columns:1fr 1fr;max-width:1040px;}
.download-phone{position:relative;aspect-ratio:1/1.55;width:100%;height:100%;max-height:660px;max-width:430px;filter:none;pointer-events:none;user-select:none;}
.download-phone img{position:absolute;height:88%;width:auto;max-width:none;object-fit:contain;filter:drop-shadow(0 12px 18px #00000014);animation:none;}
.download-phone #downloadPhone{right:0;bottom:0;z-index:2;transform:rotate(4deg);}
.download-phone #previewPhone{left:0;top:0;z-index:1;transform:rotate(-7deg);}
@media(max-width:700px){
 .download-main{gap:10px;grid-template-columns:minmax(0,1fr);}
 .download-phone{height:100%;width:auto;max-width:100%;max-height:440px;aspect-ratio:1/1.5;justify-self:center;align-self:start;}
 .download-phone img{height:90%;}
 .download-phone #downloadPhone{right:0;bottom:0;transform:rotate(4deg);}
 .download-phone #previewPhone{left:0;top:0;transform:rotate(-7deg);}
}
@media(max-width:700px) and (max-height:500px){.download-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;}.download-phone{align-self:center;}}

/* Mobile hierarchy: app identity, previews, then centered download choices. */
.download-actions{flex-direction:column;align-items:center;gap:16px;width:max-content;max-width:100%;}
@media(max-width:700px){
 .download-main{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:12px;}
 .download-copy{display:contents;}
 .download-identity{grid-row:1;}
 .download-icon{display:grid;width:44px;height:44px;border-radius:12px;margin:0 auto 10px;}
 .download-icon img{width:32px;height:32px;}
 .download-copy h1{font-size:28px;margin:0 0 8px;}
 .download-copy .download-identity>p{font-size:14px;color:var(--ink-2);margin:0;}
 .download-phone{grid-row:2;align-self:center;height:100%;max-height:420px;}
 .download-actions{grid-row:3;justify-self:center;width:100%;gap:12px;}
 .download-actions .webapp-link{min-height:32px;display:inline-flex;align-items:center;}
}
@media(max-width:700px) and (max-height:600px){
 .download-main{gap:8px;}
 .download-icon{width:32px;height:32px;margin-bottom:6px;border-radius:9px;}.download-icon img{width:24px;height:24px;}
 .download-copy h1{font-size:24px;}
 .download-actions{gap:6px;}
}

/* Refined single-device download composition. */
.download-main{max-width:1020px;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;padding:24px 40px 36px;}
.download-copy{align-self:center;}
.download-copy h1{font-size:clamp(36px,4vw,52px);margin:20px 0 14px;}
.download-identity>p{font-size:18px;color:var(--ink-2);margin:0 0 26px;}
.download-actions{flex-direction:row;justify-content:flex-start;align-items:center;gap:22px;width:100%;}
.download-phone{position:relative;height:100%;max-height:650px;width:auto;max-width:100%;aspect-ratio:1470/3000;pointer-events:none;filter:drop-shadow(0 18px 20px rgba(0,0,0,.18));}
.download-phone #downloadPhone{position:static;display:block;transform:none;width:auto;height:100%;max-width:100%;object-fit:contain;filter:none;}
.download-qr{width:224px;margin:32px 0 0;}
.download-qr a{padding:8px;background:white;border-radius:28px;box-shadow:0 8px 24px rgba(45,31,16,.12);}
.download-qr img{border-radius:0;}
.download-qr figcaption{width:300px;max-width:calc(100vw - 48px);margin:20px 0 0 -38px;font-size:15px;line-height:1.5;text-align:center;color:var(--ink-2);}
@media(min-width:701px) and (max-width:1024px){.download-main{gap:32px;padding:20px 32px 32px;}.download-copy h1{font-size:38px;}.download-icon{width:56px;height:56px;}.download-icon img{width:40px;height:40px;}.download-actions{gap:16px;}.download-actions .appstore-badge img{height:40px;}.download-actions .webapp-link{font-size:14px;}.download-qr{width:176px;margin-top:28px;}.download-qr figcaption{width:260px;margin-left:-42px;}}
@media(max-width:700px){
 .download-main{padding:8px 24px max(18px,env(safe-area-inset-bottom));grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:16px;}
 .download-copy{display:contents;}.download-identity{grid-row:1;}
 .download-icon{display:grid;width:40px;height:40px;margin:0 auto 8px;}.download-icon img{width:28px;height:28px;}
 .download-copy h1{font-size:28px;line-height:1.08;margin:0 0 10px;}
 .download-identity>p{font-size:14px;margin:0;}
 .download-phone{grid-row:2;height:100%;max-height:440px;width:auto;aspect-ratio:1470/3000;justify-self:center;align-self:center;filter:drop-shadow(0 12px 14px rgba(0,0,0,.16));}
 .download-actions{grid-row:3;flex-direction:row;justify-content:center;gap:20px;flex-wrap:nowrap;}
 .download-actions .appstore-badge img{height:40px;}.download-actions .webapp-link{font-size:14px;white-space:nowrap;min-height:44px;}
 .download-qr{display:none;}
}
@media(max-width:700px) and (max-height:600px){.download-main{gap:10px;}.download-icon{width:30px;height:30px;margin-bottom:6px;}.download-icon img{width:22px;height:22px;}.download-copy h1{font-size:24px;}}
@media(max-height:650px) and (min-width:701px){.download-qr{display:none;}}
@media(max-width:700px) and (max-height:450px){.download-main{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-rows:1fr auto;align-items:center;}.download-identity{grid-column:1;grid-row:1;}.download-actions{grid-column:1;grid-row:2;gap:12px;}.download-phone{grid-column:2;grid-row:1/3;}.download-actions .appstore-badge img{height:36px;}}

/* Keep download identity and device in one centered group. */
.download-main{max-width:900px;grid-template-columns:minmax(0,430px) minmax(0,310px);justify-content:center;gap:24px;padding-left:28px;padding-right:28px;}
.download-phone{max-height:610px;justify-self:start;}
.download-wordmark .ac-name{--mx:-100%;--my:50%;--bx:0%;display:inline-block;}
@media(max-width:1024px) and (min-width:701px){.download-main{gap:20px;grid-template-columns:minmax(0,390px) minmax(0,280px);}}
@media(max-width:700px){.download-main{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:10px;padding-left:24px;padding-right:24px;}.download-phone{justify-self:center;max-height:420px;}}
@media(max-width:700px) and (max-height:450px){.download-main{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-rows:1fr auto;}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.feat-check svg,.price-feats .pf{transition:color .18s ease,filter .18s ease;}.bronze-check-active{color:var(--g3)!important;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--shine) 60%,transparent));}}

/* Compact device composition and soft reference-style QR shadow. */
.download-qr a{box-shadow:0 7px 18px rgba(62,43,22,.11),0 2px 5px rgba(62,43,22,.035);}
.download-main{align-items:center;}
.download-phone{height:min(100%,560px);max-height:560px;align-self:center;}
@media(max-width:700px){
 .download-main{grid-template-rows:auto minmax(0,360px) auto;align-content:center;gap:14px;}
 .download-phone{height:100%;max-height:360px;align-self:center;}
}
@media(max-width:700px) and (max-height:740px){
 .download-main{grid-template-rows:auto minmax(0,1fr) auto;align-content:stretch;gap:10px;}
 .download-phone{height:100%;max-height:340px;}
}
@media(max-width:700px) and (max-height:450px){
 .download-main{grid-template-rows:minmax(0,1fr) auto;align-content:stretch;}
 .download-phone{height:100%;max-height:100%;}
}

/* Desktop breathing room; shared mobile/tablet composition. */
.download-main{max-width:1060px;grid-template-columns:minmax(0,440px) minmax(0,340px);gap:72px;padding:24px 48px 36px;}
.download-qr{width:184px;margin-top:28px;}
.download-qr figcaption{width:280px;margin:18px 0 0 -48px;font-size:14px;}
@media(max-width:1024px){
 .download-page .nav-inner{padding:0 clamp(24px,5vw,48px);}
 .download-main{max-width:680px;padding:12px clamp(24px,5vw,48px) max(24px,env(safe-area-inset-bottom));grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;align-content:stretch;gap:18px;text-align:center;}
 .download-copy{display:contents;}.download-identity{grid-column:1;grid-row:1;}
 .download-icon{display:grid;width:52px;height:52px;border-radius:14px;margin:0 auto 12px;}.download-icon img{width:36px;height:36px;}
 .download-copy h1{font-size:clamp(32px,4.8vw,42px);line-height:1.08;margin:0 0 12px;}
 .download-identity>p{font-size:clamp(15px,2.2vw,18px);margin:0;color:var(--ink-2);}
 .download-phone{grid-column:1;grid-row:2;justify-self:center;align-self:center;height:100%;width:auto;max-height:580px;max-width:100%;aspect-ratio:1470/3000;}
 .download-phone #downloadPhone{height:100%;width:auto;max-width:100%;object-fit:contain;}
 .download-actions{grid-column:1;grid-row:3;flex-direction:row;justify-content:center;align-items:center;gap:24px;flex-wrap:nowrap;width:100%;}
 .download-actions .appstore-badge img{height:44px;}
 .download-actions .webapp-link{font-size:15px;min-height:44px;white-space:nowrap;display:inline-flex;align-items:center;}
 .download-qr{display:none;}
}
@media(max-width:1024px) and (max-height:700px){
 .download-main{padding-top:4px;padding-bottom:18px;gap:12px;}
 .download-icon{width:36px;height:36px;margin-bottom:8px;}.download-icon img{width:26px;height:26px;}
 .download-copy h1{font-size:30px;margin-bottom:8px;}
 .download-identity>p{font-size:14px;}
 .download-actions{gap:20px;}.download-actions .appstore-badge img{height:40px;}
}
@media(max-width:1024px) and (max-height:450px){
 .download-icon{display:none;}.download-copy h1{font-size:24px;}.download-main{gap:8px;}.download-actions .appstore-badge img{height:36px;}
}

/* Soft ambient QR elevation, matching the supplied Bible App reference. */
.download-qr a{box-shadow:0 8px 26px rgba(60,44,26,.10),0 2px 6px rgba(60,44,26,.025);}
/* Shared mobile/tablet actions: badge first, web link underneath. */
@media(max-width:1024px){
 .download-main{gap:14px;}
 .download-actions{flex-direction:column;justify-content:center;gap:10px;}
 .download-actions .webapp-link{min-height:36px;justify-content:center;}
 .download-phone{max-height:520px;}
}
@media(max-width:1024px) and (max-height:700px){
 .download-main{gap:10px;}
 .download-actions{gap:6px;}
 .download-phone{max-height:340px;}
}

.download-qr a{border-radius:24px;box-shadow:0 4px 12px rgba(60,44,26,.09),0 1px 3px rgba(60,44,26,.025);}

/* Wordmark uses a localized highlight, fully outside the letters at rest. */
.ac-name,.brand-name .ac-name,.download-wordmark .ac-name{--mx:-400%;--my:50%;--bx:50%;background-image:radial-gradient(circle 58px at var(--mx) var(--my),var(--shine) 0%,transparent 70%),linear-gradient(100deg,var(--g1) 0%,var(--g2) 25%,var(--g3) 50%,var(--g2) 75%,var(--g1) 100%);background-size:100% 100%,220% 100%;background-position:0 0,var(--bx) 0;}
.brand:hover .ac-name,.ac-name:hover{background-position:0 0,var(--bx) 0;}
.download-qr a{box-shadow:0 4px 12px rgba(45,31,17,.18),0 1px 3px rgba(45,31,17,.07);}

/* Restore system chrome without touching the continuous app captures. */
.app-statusbar{visibility:visible;height:52px;}
.app-statusbar.is-tall{height:52px;}
.scr[data-screen="4"]{background:#F5F5F5;}
[data-theme="dark"] .scr[data-screen="4"]{background:#0F0F0F;}
/* Keep all assistant pixels inside the reserved system and home areas. */
.scr[data-screen="4"] .scr-img-wrap{top:52px;bottom:22px;overflow:hidden;}
.scr[data-screen="4"] .scr-img{object-fit:contain;object-position:50% 0!important;}
/* Lift the detail content slightly within the existing device, retaining the back control. */
.scr[data-screen="2"] .scr-img-wrap{top:44px;bottom:22px;}
.phone-screen:has(.scr.is-active[data-screen="2"]) .app-statusbar{height:44px;}

/* A sheet dims the backdrop above it; the composer safe area stays sheet-colored. */
.scr[data-screen="4"]{background:#F5F5F5!important;}
[data-theme="dark"] .scr[data-screen="4"]{background:#0F0F0F!important;}
.phone-screen:has(.scr.is-active[data-screen="4"]) .scr-home-indicator{background:#171717;}
[data-theme="dark"] .phone-screen:has(.scr.is-active[data-screen="4"]) .scr-home-indicator{background:#eee;}

/* Crossfade above an opaque outgoing screen, preventing background flashes. */
.scr{transition:opacity 680ms cubic-bezier(.4,0,.2,1);}
.scr.is-leaving{opacity:1;z-index:1;}
.scr.is-active{opacity:1;z-index:2;}
.scr[data-screen="4"] .scr-img-wrap{background-size:100% 100%;background-repeat:no-repeat;}
/* Status chrome changes with the same timing as the app screen. */
.app-statusbar{transition:background-color 680ms ease,color 680ms ease;}
@media(prefers-reduced-motion:reduce){.scr,.app-statusbar{transition:none;}}

/* White light-mode bands; bento gradients deliberately retain their own colors. */
html:not([data-theme="dark"]){--paper:#FFFFFF;--paper-2:#FFFFFF;--app-bg:#FFFFFF;}
/* System area is part of each screen so it blends with that screen. */
.deck .scr{transition:none!important;background:#F5F5F5;}
[data-theme="dark"] .deck .scr{background:#1A1A1A;}
.deck .scr.is-leaving{opacity:1;z-index:1;}
.deck .scr.is-active{opacity:1;z-index:2;}
.phone-screen:has(>.deck)> .app-statusbar{display:none!important;}
.deck .screen-chrome{display:block!important;visibility:visible!important;height:52px!important;background:var(--chrome-light)!important;transition:none!important;}
[data-theme="dark"] .deck .screen-chrome{background:var(--chrome-dark)!important;}
/* Keep one fixed app viewport throughout the story. */
.deck .scr .scr-img-wrap{top:52px;bottom:22px;}
.phone-screen:has(>.deck){background:var(--app-bg)!important;transition:none;}

/* Neutral backdrop behind the bento cards only. */
html:not([data-theme="dark"]) .why{background:#F5F5F7;}

/* QR geometry and elevation matched to Bible.com's app page. */
.download-qr{width:216px;margin:28px 0 0;}
.download-qr a{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:196px;height:196px;padding:20px;border-radius:24px;background:#fff;box-shadow:0 3px 12px #1212121a,0 1px 3px #12121205;}
.download-qr img{width:156px;height:156px;border-radius:0;}
.download-qr figcaption{width:216px;max-width:100%;margin:24px 0 0 -10px;font-size:13px;line-height:1.6;}
.download-identity>p{color:#636366;margin:0 0 24px;}
[data-theme="dark"] .download-identity>p{color:#AEAEB2;}
.download-copy h1{margin-top:18px;margin-bottom:14px;}
.download-actions .appstore-badge img{height:42px;width:auto;}
.download-actions{gap:20px;}
@media(max-width:1024px){.download-copy h1{margin:0 0 10px;}.download-identity>p{margin:0;}.download-actions .appstore-badge img{height:40px;}.download-actions{gap:10px;}.download-qr{display:none;}}

@media(min-width:1025px){.download-identity{margin-top:-20px;}.download-copy h1{margin-top:14px;}}

/* One proportional assistant image; never a second stretched copy behind it. */
.deck .scr[data-screen="4"] .scr-img-wrap{top:52px;bottom:auto;height:auto;aspect-ratio:1170/2232;background:none!important;overflow:hidden;}
.deck .scr[data-screen="4"] .scr-img{display:block;width:100%;height:auto;object-fit:contain;object-position:50% 0!important;}
/* Isolate screenshot compositing inside the existing rounded phone aperture. */
.phone-screen:has(>.deck){isolation:isolate;}
.deck{isolation:isolate;overflow:hidden;border-radius:inherit;}
.deck .scr{backface-visibility:hidden;will-change:opacity;}

/* Stable bronze base; only local pointer light changes, never background position. */
.ac-name,.brand-name .ac-name,.download-wordmark .ac-name,.brand:hover .ac-name,h2:hover .ac-name,.ac-name:hover{background-image:radial-gradient(circle 58px at var(--word-x,-100px) var(--word-y,0px),var(--word-light,transparent),transparent 70%),linear-gradient(100deg,var(--g1),var(--g2) 35%,var(--g3) 65%,var(--g2));background-size:100% 100%;background-position:0 0;transition:none!important;}

.story-heading-icon{display:block;color:var(--bronze-ink);margin:0 0 18px;flex-shrink:0;}

/* Only the active pair can paint; no hidden screenshot or extra assistant overlay. */
.deck .scr{visibility:hidden;}
.deck .scr.is-active,.deck .scr.is-leaving{visibility:visible;}
.deck .scr[data-screen="4"]::before,.deck .scr[data-screen="4"]::after{content:none!important;}
.deck .scr[data-screen="4"] .scr-img-wrap{background-image:none!important;}

/* Cool neutral reading colors; bronze remains reserved for brand accents. */
html:not([data-theme="dark"]){--ink:#1D1D1F;--ink-2:#636366;--ink-3:#6E6E73;--btn:#1D1D1F;--btn-text:#FFFFFF;--line:#E5E5EA;--line-2:#D2D2D7;}
html:not([data-theme="dark"]) .why{background:#F8F8FA;}
html:not([data-theme="dark"]) .bn:not(.bn-d) p{color:#636366;}
html:not([data-theme="dark"]) .bn:not(.bn-d) h3{color:#1D1D1F;}
html:not([data-theme="dark"]) .bn-d p{color:rgba(244,241,234,.82);}
html:not([data-theme="dark"]) .bn-d h3{color:#F4F1EA;}
.feat-check svg,.price-feats svg.pf{filter:none;transition:none;}
@media(prefers-reduced-motion:reduce){#storyMover .phone{animation:none;}}

.scroll-test{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--card);color:var(--ink);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 4px 20px #0002;font-size:13px;white-space:nowrap;}.scroll-test button{border:0;background:var(--card-2);color:var(--ink);padding:8px 10px;border-radius:8px;cursor:pointer;font:inherit;}

/* Keep chapter copy centred without a second delayed vertical animation. */
@media(min-width:861px){}

/* Native scroll physics with chapter-only proximity snaps. No wheel interception. */
@media(min-width:861px) and (prefers-reduced-motion:no-preference){
}

/* Manual scrolling with a nearby resting-position guide, never native snapping. */

/* Clear hierarchy for the three main screenshot chapters. */
#storySteps .story-step[data-screen="1"] h2,
#storySteps .story-step[data-screen="2"] h2,
#storySteps .story-step[data-screen="3"] h2,
#storySteps .story-step[data-screen="4"] h2{font-weight:700;}
.deck .scr{transition:none!important;}
@media(min-width:861px){}

/* Landing brand stays neutral; standalone wordmark retains bronze. */
.brand-stor-neutral{color:inherit;-webkit-text-fill-color:currentColor;background:none;}
/* Less white surround, larger scannable artwork, smaller QR card. */
.download-qr{width:204px;}
.download-qr a{width:184px;height:184px;padding:4px;border-radius:22px;}
.download-qr img{width:176px;height:176px;}
.download-qr figcaption{width:216px;margin-left:-16px;}

/* Standalone identity, actions, and QR are three distinct groups. */
@media(min-width:1025px){
 .download-copy{padding:8px 0;}
 .download-identity{margin-top:0;}
 .download-icon{width:56px;height:56px;border-radius:16px;margin-bottom:22px;}.download-icon img{width:40px;height:40px;}
 .download-copy h1{font-size:46px;line-height:1.08;margin:0 0 16px;}
 .download-identity>p{margin:0 0 30px;line-height:1.5;}
 .download-actions{gap:24px;}
 .download-qr{margin-top:38px;}
 .download-qr figcaption{margin-top:20px;line-height:1.5;}
}
@media(min-width:1025px) and (max-height:780px){.download-icon{width:44px;height:44px;margin-bottom:16px;}.download-icon img{width:32px;height:32px;}.download-copy h1{font-size:40px;}.download-identity>p{margin-bottom:24px;}.download-qr{margin-top:28px;}.download-qr figcaption{margin-top:16px;}}
@media(prefers-reduced-motion:no-preference){
 .download-wordmark .ac-name.is-intro-shine{background-image:linear-gradient(105deg,var(--g1) 0%,var(--g2) 35%,var(--g3) 44%,var(--shine) 50%,var(--g3) 56%,var(--g2) 65%,var(--g1) 100%);background-size:300% 100%;animation:standalone-shine 1800ms 250ms ease-in-out both;}
 @keyframes standalone-shine{from{background-position:100% 0;}to{background-position:0% 0;}}
}

/* Original story rendering restored; no snap, dwell, or scroll-input controller. */
.story-step-inner{opacity:.14;transform:translateY(14px);translate:none;transition:opacity .5s var(--ease),transform .5s var(--ease);}
.story-step.active .story-step-inner{opacity:1;transform:none;}
.story-stage{translate:none;}
.deck .scr{visibility:visible;opacity:0;transition:opacity .55s var(--ease)!important;}
.deck .scr.is-active{opacity:1;z-index:2;}
@media(prefers-reduced-motion:reduce){.deck .scr{transition:none!important;}.story-step-inner{opacity:1!important;transform:none!important;}}
#storySteps .story-step[data-screen="1"] h2,#storySteps .story-step[data-screen="2"] h2,#storySteps .story-step[data-screen="3"] h2,#storySteps .story-step[data-screen="4"] h2{font-weight:700;}

.seo-skip{position:fixed;top:8px;left:16px;z-index:10000;transform:translateY(-200%);background:var(--paper);color:var(--ink);padding:12px 18px;border:1px solid var(--line-2);border-radius:8px;}.seo-skip:focus{transform:none;}

.foot-col h4{font-family:var(--font-display);}
.pilot-actions{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:30px;flex-wrap:wrap;}.pilot-note{text-align:center;font-size:14px;color:var(--ink-2);margin:24px auto 0;max-width:52ch;}


/* Restore the original narrow paired price cards. */
.pilot-section .price-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:860px;margin:36px auto 0;align-items:stretch;}
.pilot-section .price-grid .price-card{grid-column:auto;width:100%;max-width:none;justify-self:stretch;}
.pilot-section .pro-coming-summary{font-size:16px;line-height:1.5;color:var(--ink-2);margin:18px 0 22px;}
@media(max-width:700px){.pilot-section .price-grid{grid-template-columns:1fr;max-width:440px;}.pilot-section .price-grid .price-card{grid-column:auto;width:100%;}}

/* Compact responsive request form for the standalone Pro trial page. */
.pro-trial-page{min-height:100svh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);}
.pro-trial-nav{width:min(100% - 48px,1120px);margin:0 auto;padding:22px 0;display:flex;align-items:center;justify-content:space-between;}
.pro-trial-back{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);font-size:14px;text-decoration:none;}
.pro-trial-back:hover{color:var(--ink);}
.pro-trial-main{width:min(100% - 40px,620px);margin:auto;padding:36px 0 72px;}
.pro-trial-card{padding:clamp(26px,5vw,44px);border:1px solid var(--line);border-radius:24px;background:var(--card);box-shadow:0 18px 55px rgba(20,20,24,.07);}
.pro-trial-kicker{display:inline-flex;padding:5px 11px;border:1px solid var(--line-2);border-radius:999px;color:var(--ink-2);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
.pro-trial-card h1{margin:16px 0 10px;font-size:clamp(32px,6vw,44px);line-height:1.05;}
.pro-trial-card>p{margin:0 0 25px;color:var(--ink-2);font-size:16px;line-height:1.6;}
.pro-trial-form{display:grid;gap:16px;}
.pro-trial-form[hidden]{display:none;}
.pro-trial-field{display:grid;gap:7px;}
.pro-trial-field label{font-size:13px;font-weight:600;color:var(--ink);}
.pro-trial-field input,.pro-trial-field textarea{width:100%;min-height:50px;padding:13px 15px;border:1px solid var(--line-2);border-radius:12px;background:var(--paper);color:var(--ink);font:inherit;}
.pro-trial-field textarea{min-height:94px;resize:vertical;}
.pro-trial-form .btn{width:100%;margin-top:4px;}
.pro-trial-note{margin:16px 0 0!important;font-size:12px!important;line-height:1.55!important;}
.pro-trial-confirm{display:none;margin-top:16px;padding:14px 16px;border-radius:12px;background:var(--card-2);color:var(--ink);font-size:14px;line-height:1.5;}
.pro-trial-confirm.show{display:block;}
@media(max-width:600px){.pro-trial-nav{width:calc(100% - 32px);padding:16px 0;}.pro-trial-main{width:calc(100% - 32px);padding:22px 0 36px;}.pro-trial-card{border-radius:20px;}}

/* Username-only Pro trial preview and its confirmation state. */
.pro-trial-card h1{margin:0 0 10px;}
.pro-trial-card #trial-description{margin:0 0 25px;color:var(--ink-2);font-size:16px;line-height:1.6;}
.pro-trial-field input{min-height:54px;border-radius:14px;font:500 16px var(--sans-display);}
.pro-trial-field input:focus{outline:2px solid color-mix(in srgb,var(--bronze) 40%,transparent);outline-offset:2px;border-color:var(--bronze-ink);}
.pro-trial-form .btn{min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:10px;}
.pro-trial-form .btn:disabled{opacity:.8;cursor:wait;}
.trial-spinner{width:17px;height:17px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:trial-spin .7s linear infinite;}
@keyframes trial-spin{to{transform:rotate(360deg)}}
.pro-trial-note{color:var(--ink-3);}
.pro-trial-success{display:flex;flex-direction:column;align-items:flex-start;animation:trial-success-in .42s cubic-bezier(.2,.7,.2,1) both;}
.pro-trial-success[hidden]{display:none;}
.pro-trial-success-icon{width:48px;height:48px;margin:0 0 20px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--bronze) 12%,var(--card));color:var(--bronze-ink);}
.pro-trial-success-icon svg{width:24px;height:24px;}
.pro-trial-success-eyebrow{margin:0 0 8px!important;color:var(--ink-3);font-size:12px!important;font-weight:600;letter-spacing:.09em;text-transform:uppercase;}
.pro-trial-success h2{margin:0 0 10px;font:600 clamp(28px,5vw,38px)/1.1 var(--sans-display);letter-spacing:-.035em;}
.pro-trial-success>p:not(.pro-trial-success-eyebrow){margin:0 0 14px;color:var(--ink-2);font-size:16px;line-height:1.6;}
.pro-trial-success-note{font-size:12px!important;color:var(--ink-3)!important;}
.pro-trial-success .btn{margin-top:12px;}
@keyframes trial-success-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.trial-spinner{animation:none;border-right-color:currentColor}.pro-trial-success{animation:none}}

/* Product feature headings use the same neutral sans as the display system. */
#storySteps .story-step[data-screen] h2,.story-caption h2,.bn h3{font-family:var(--font-display);font-weight:600;letter-spacing:-.035em;line-height:1.12;}
/* Request navigation follows the familiar back-left, brand-centred pattern. */
.pro-trial-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;}
.pro-trial-back{grid-column:1;grid-row:1;justify-self:start;min-height:44px;padding:10px 14px 10px 10px;border:1px solid var(--line);border-radius:999px;color:var(--ink);font:500 14px var(--font-display);transition:background-color .18s ease,border-color .18s ease;white-space:nowrap;}
.pro-trial-back:hover{background:var(--card-2);border-color:var(--line-2);}
.pro-trial-back:focus-visible{outline:2px solid var(--ink);outline-offset:4px;}
.pro-trial-back svg{width:18px;height:18px;flex-shrink:0;}
.pro-trial-mark{grid-column:2;grid-row:1;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);}
.pro-trial-mark img{width:36px;height:36px;padding:5px;border-radius:11px;background:#fff;object-fit:contain;}
.pro-trial-mark .pro-trial-wordmark{font-family:var(--font-brand);font-size:21px;font-weight:600;letter-spacing:-.015em;white-space:nowrap;}
.pro-trial-card h1{font-family:var(--font-display);font-weight:600;letter-spacing:-.035em;line-height:1.12;}
#trialConfirmationTitle:focus{outline:none;}
@media(max-width:480px){.pro-trial-nav{gap:8px;}.pro-trial-mark{gap:7px;}.pro-trial-mark img{width:28px;height:28px;border-radius:9px;}.pro-trial-mark .pro-trial-wordmark{font-size:18px;}.pro-trial-back{padding:10px 11px 10px 7px;gap:3px;}}

/* Official Lucide social link, using the existing footer type and color. */
.foot-col a.foot-social{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-bottom:0;}
.foot-social svg{width:16px;height:16px;flex-shrink:0;}
.foot-social:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px;}