:root{
  --paper:#f3eee5; --paper-soft:#efe8db; --ink:#26221d; --ink-soft:rgba(38,34,29,.62);
  --accent:#bd5138; --accent-strong:#a23f29; /* darker accent for AA on small text */
  --hairline:rgba(38,34,29,.10); --measure:34rem;
  /* system sans — matches the app's eyebrow / Preferences headers (SF Pro on Apple platforms) */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,sans-serif;
}
*{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{overflow-x:hidden}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:Iowan Old Style,Palatino,Georgia,"Times New Roman",serif;font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* accent on paper is ~4.13:1 (under AA for body) -> body/small links use the darker accent */
a{color:var(--accent-strong);text-decoration:none} a:hover{text-decoration:underline}
.wrap{max-width:var(--measure);margin:0 auto;padding:0 1.5rem}
.site-top{padding:1.2rem 0}
.site-logo{height:1.5rem;width:auto;display:block}        /* small header logo on legal/support pages */
.wrap-wide{max-width:56rem;margin:0 auto;padding:0 1.5rem}
header.hero{padding:clamp(3.5rem,12vh,8rem) 0 clamp(2.5rem,8vh,5rem)}
/* Hero is two columns: intro (logo + copy + store badge) on the left, the phone video on the right. */
.hero-grid{display:flex;flex-wrap:wrap;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero-intro{flex:1 1 20rem}
.hero-logo{width:clamp(11rem,42vw,16rem);height:auto;display:block}  /* one-line wordmark */
.tagline{font-size:clamp(1.25rem,4.5vw,1.6rem);color:var(--ink);margin:1.6rem 0 0;max-width:26rem;line-height:1.35}
.lede{color:var(--ink-soft);margin:1.1rem 0 0;max-width:28rem}
.store-badge{display:inline-block;line-height:0;margin-top:2rem}
.store-badge img{height:48px;width:auto}
.store-badge--below{display:none}        /* desktop: badge lives in the intro; mobile swaps (below the video) */
.cta{display:inline-block;margin-top:2rem;padding:.7rem 1.3rem;border:1px solid var(--accent-strong);
  border-radius:999px;color:var(--accent-strong);font-weight:600}
.cta:hover{background:var(--accent-strong);color:var(--paper);text-decoration:none}
.phone{flex:0 1 17rem;max-width:min(17rem,72vw);margin:0}
/* iPhone-style frame (dark bezel) around the demo video */
.phone .frame{background:#15120f;border-radius:2.6rem;padding:.5rem;box-shadow:0 14px 38px rgba(38,34,29,.22)}
.phone video,.phone img{width:100%;height:auto;border-radius:2.15rem;display:block}
.phone img.poster{display:none}        /* hidden by default; shown (CSS-only) under reduced motion */
/* Stack on narrow screens. Keep align-items:stretch (default) so the intro fills the width and the
   copy wraps — flex-start made items shrink to content width and overflow the viewport. */
@media (max-width:680px){
  .hero-grid{flex-direction:column;align-items:stretch;flex-wrap:nowrap}
  .hero-intro{width:100%;min-width:0;flex:0 0 auto}
  .tagline,.lede{max-width:100%}
  .phone{margin-top:1.5rem;align-self:center;max-width:min(13rem,60vw)}
  .store-badge--intro{display:none}
  .store-badge--below{display:inline-block;align-self:center;margin-top:1.3rem}
}
section{padding:clamp(2.5rem,7vh,4rem) 0;border-top:1px solid var(--hairline)}
.page{padding:clamp(1.5rem,5vh,3rem) 0}    /* legal/support body — no divider under the header logo */
/* subpage header / section eyebrow — system sans to match the app's Preferences headers */
.kicker{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 1.1rem}
h1,h2{letter-spacing:-.01em;font-weight:600}
h2{font-size:clamp(1.6rem,6vw,2.1rem);margin:0 0 1rem}
h3{font-size:1.12rem;font-weight:600;margin:1.8rem 0 .4rem}
p{margin:0 0 1rem} ul{margin:0 0 1rem;padding-left:1.2rem} li{margin:0 0 .5rem}
.muted{color:var(--ink-soft)} .small{font-size:.85rem}
/* Footer: centered, no divider above; nav + signoff use the sans eyebrow style (matches app headers). */
.site-footer{padding:2.5rem 0;margin-top:2rem;text-align:center}
.footer-nav{margin-bottom:1.1rem}
.footer-nav a{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 .55rem}
.signoff{display:block;margin-top:1.1rem;font-family:var(--sans);font-size:.85rem;color:var(--ink-soft)}
.lang-toggle{margin:1rem 0;font-size:.9rem} .lang-toggle .current{color:var(--ink-soft)}
.funnel{padding:clamp(3rem,12vh,7rem) 0;border-top:0}   /* no divider under the header — matches the legal/support .page pages */
.funnel .invite-quest{font-size:clamp(1.5rem,6vw,2.1rem);line-height:1.3;margin:1rem 0 2rem}
/* "Open in sidequest" — a calm, on-brand editorial link (terracotta, gently underlined) */
.funnel-open{display:inline-block;color:var(--accent-strong);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.funnel-open[hidden]{display:none}   /* the display rule above otherwise overrides the hidden attribute */
.funnel-open:hover{color:var(--accent)}
/* App Store badge on the funnel: small, left-aligned, with breathing room above the footer */
.funnel-badge{display:block;width:-moz-fit-content;width:fit-content;margin:1.2rem 0 0}
.funnel-badge img{height:40px;width:auto;display:block}
/* Reduced motion: hide the video, show the poster — CSS-only, works without JS. */
@media (prefers-reduced-motion: reduce){ .phone video{display:none} .phone img.poster{display:block} }