/* Everly landing — styles. Palette and type mirror the phone app (app/src/theme). */
  /* Palette = the app's theme/colors.ts (2026-07 "hearth" rebrand): parchment ground,
     white paper cards, cocoa type, 柿子红 coral accent, amber and pine as supporting tones. */
  :root{
    --bg:#F8F4EE; --surface:#FFFFFF; --sand:#EFE7DD; --ink:#2B211B; --ink-2:#655C55; --subtle:#8C847D; --divider:#E8DED3;
    --accent:#B86B3F; --accent-hover:#965332; --accent-deep:#7F4629; --accent-soft:rgba(184,107,63,.10); --accent-tint:#F3E5DB;
    --amber:#D99A58; --amber-soft:#F1D8B9; --pine:#647B73; --pine-tint:#E4ECE8;
    --footer:#EFE7DD;
    --r:14px; --r-lg:20px; --r-xl:28px;
    --sh-md:0 4px 12px rgba(0,0,0,.06),0 2px 4px rgba(0,0,0,.04);
    --sh-lg:0 12px 32px rgba(0,0,0,.08),0 4px 8px rgba(0,0,0,.04);
    --font:"Public Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
    --font-display:"Newsreader",Georgia,"Times New Roman",serif;
    --maxw:1140px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}
  body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);font-size:17px;line-height:1.47;letter-spacing:-.005em;overflow-x:hidden;}
  a{color:inherit;text-decoration:none;}
  h1,h2,h3,p{margin:0;}
  ::selection{background:rgba(184,107,63,.18);}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
  .eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:980px;font-size:16px;font-weight:500;border:0;cursor:pointer;transition:background .2s ease,transform .2s ease,box-shadow .2s ease,opacity .2s ease;font-family:var(--font);}
  .btn-primary{background:var(--accent);color:#fff;}
  .btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 8px 22px rgba(184,107,63,.28);}
  .btn-secondary{background:rgba(43,33,27,.06);color:var(--ink);}
  .btn-secondary:hover{background:rgba(43,33,27,.10);}
  .btn-ghost{background:transparent;color:var(--accent);padding:14px 8px;}
  .btn-ghost:hover{opacity:.65;}
  .btn-white{background:#fff;color:var(--accent);}
  .btn-white:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(43,33,27,.18);}
  .btn-ghost-w{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);}
  .btn-ghost-w:hover{background:rgba(255,255,255,.12);}
  :focus-visible{outline:none;box-shadow:0 0 0 3px rgba(184,107,63,.5);border-radius:6px;}

  /* ---------- Nav ---------- */
  nav{position:fixed;top:0;left:0;right:0;z-index:50;height:52px;display:flex;align-items:center;
    background:rgba(248,244,238,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid transparent;transition:border-color .3s ease,background .3s ease;}
  nav.scrolled{border-bottom:1px solid var(--divider);background:rgba(248,244,238,.85);}
  nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%;}
  .brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:18px;letter-spacing:-.02em;color:var(--ink);}
  .brand .dot{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--amber),var(--accent));box-shadow:0 0 12px rgba(184,107,63,.45);}
  .navlinks{display:flex;gap:30px;align-items:center;}
  .navlinks a{font-size:13.5px;color:var(--subtle);transition:color .2s ease;}
  .navlinks a:hover{color:var(--ink);}
  .nav-cta{font-size:13.5px;font-weight:500;padding:7px 16px;border-radius:980px;background:var(--accent);color:#fff !important;transition:background .2s ease;}
  .nav-cta:hover{background:var(--accent-hover);}
  @media(max-width:760px){.navlinks{display:none;}}

  /* ---------- Hero (light) ---------- */
  .hero{position:relative;min-height:94svh;display:flex;align-items:center;
    background:radial-gradient(120% 100% at 72% 8%,rgba(184,107,63,.10),transparent 52%),linear-gradient(180deg,#FFFFFF 0%,var(--bg) 68%,var(--bg) 100%);
    overflow:hidden;}
  #voice{position:absolute;inset:0;width:100%;height:100%;z-index:0;}
  .hero-veil{position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;background:linear-gradient(180deg,transparent,var(--bg));}
  .hero .wrap{position:relative;z-index:3;padding-top:120px;padding-bottom:64px;width:100%;}
  .hero-inner{max-width:660px;}

  /* ===== VERSION B ONLY (index-b.html) — the stores in the hero ==========
     Nothing here is used by index.html, so the two versions can be compared
     without one disturbing the other. The hero .wrap becomes two columns and
     the right one, empty in version A, carries the codes and badges.
     Badges are Apple's and Google's own artwork: sized and placed, never
     restyled. App Store first, per Apple's guidelines. */
  .hero .wrap:has(.hero-get){display:flex;gap:64px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
  .hero-get{flex:0 0 auto;background:rgba(255,255,255,.72);border:1px solid rgba(184,107,63,.16);
    border-radius:28px;padding:30px 34px 26px;backdrop-filter:blur(8px);
    box-shadow:0 18px 50px rgba(76,54,38,.08);text-align:center;}
  .hero-get-title{font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--accent,#B86B3F);margin:0 0 20px;}
  .hero-get-row{display:flex;gap:34px;align-items:flex-start;justify-content:center;}
  .hero-get-col{display:flex;flex-direction:column;align-items:center;gap:14px;}
  .hero-qr{display:block;line-height:0;}
  .hero-qr img{display:block;}
  .hero-badge{display:inline-flex;}
  .hero-badge img{height:44px;width:auto;display:block;}
  .hero-get-note{font-size:13px;color:#8C847D;margin:22px 0 0;}
  .hero-qr-slot{display:flex;width:124px;height:124px;align-items:center;justify-content:center;
    border:2px dashed #B86B3F;border-radius:6px;color:#B86B3F;font-size:12px;font-weight:700;
    text-align:center;line-height:1.3;}
  .hero-badge-slot{display:flex;height:44px;min-width:132px;align-items:center;justify-content:center;
    border:2px dashed rgba(43,33,27,.35);border-radius:6px;color:#655C55;font-size:11px;font-weight:600;
    padding:0 12px;}
  /* Narrow: the panel drops under the copy, and the codes go — a phone does
     not scan a code pointed at itself. */
  @media (max-width:980px){
    .hero .wrap:has(.hero-get){gap:40px;}
    .hero-get{width:100%;}
  }
  @media (max-width:720px){
    .hero-qr, .hero-qr-slot{display:none;}
    .hero-get{padding:22px 20px 18px;}
    .hero-get-row{gap:18px;}
  }
  /* ===== end version B ================================================= */
  .hero h1{margin-top:18px;font-family:var(--font-display);font-size:clamp(46px,7.6vw,92px);line-height:1;letter-spacing:-.015em;font-weight:400;color:var(--ink);text-wrap:balance;}
  .hero h1 .grad{background:linear-gradient(90deg,var(--amber),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;}
  .hero p.sub{margin-top:26px;font-size:clamp(18px,2.2vw,21px);line-height:1.5;color:var(--subtle);max-width:30em;}
  .hero .cta-row{margin-top:34px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
  .scrollcue{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:2;color:var(--subtle);font-size:11px;letter-spacing:.18em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.7;}
  .scrollcue span{width:1px;height:24px;background:linear-gradient(var(--subtle),transparent);animation:cue 2s ease-in-out infinite;}
  @keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6);}50%{opacity:1;transform:scaleY(1);}}

  /* ---------- Sections ---------- */
  section.block{padding:clamp(84px,11vh,132px) 0;}
  .lead{max-width:720px;}
  .lead h2{font-family:var(--font-display);font-size:clamp(32px,4.6vw,56px);line-height:1.06;letter-spacing:-.012em;font-weight:400;margin-top:16px;text-wrap:balance;color:var(--ink);}
  .lead p{font-size:clamp(18px,2vw,21px);line-height:1.55;color:var(--subtle);margin-top:22px;}
  .lead p + p{margin-top:18px;}

  .idea{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;}
  .orb{aspect-ratio:1;width:100%;max-width:380px;justify-self:center;border-radius:50%;position:relative;
    background:radial-gradient(circle at 38% 32%,#FBF6F0,#F3E5DB 46%,#EAD7C6 64%,#fff 100%);
    box-shadow:0 30px 80px rgba(184,107,63,.16),inset 0 0 60px rgba(255,255,255,.7);overflow:hidden;}
  .orb canvas{position:absolute;inset:0;width:100%;height:100%;}
  @media(max-width:820px){.idea{grid-template-columns:1fr;gap:44px;}.orb{max-width:300px;}}

  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:56px;}
  .step{position:relative;padding-top:26px;border-top:1px solid var(--divider);}
  .step .n{font-size:13px;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:.02em;}
  .step h3{font-size:22px;font-weight:600;letter-spacing:-.015em;margin-top:12px;color:var(--ink);}
  .step p{color:var(--subtle);font-size:16px;line-height:1.5;margin-top:10px;}
  @media(max-width:820px){.steps{grid-template-columns:1fr;gap:0;}.step{padding:24px 0;}}

  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;}
  .card{background:var(--surface);border:1px solid var(--divider);border-radius:var(--r-xl);padding:34px 30px;box-shadow:var(--sh-md);transition:transform .3s ease,box-shadow .3s ease;}
  .card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);}
  .card .ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);margin-bottom:20px;}
  .card h3{font-size:20px;font-weight:600;letter-spacing:-.012em;color:var(--ink);}
  .card p{color:var(--subtle);font-size:15.5px;line-height:1.55;margin-top:12px;}
  @media(max-width:820px){.cards{grid-template-columns:1fr;}}

  .voices{background:var(--surface);border-top:1px solid var(--divider);border-bottom:1px solid var(--divider);}
  .quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:52px;}
  .quote{padding:30px;border-radius:var(--r-lg);background:var(--bg);border:1px solid var(--divider);}
  .quote p{font-size:18px;line-height:1.5;letter-spacing:-.01em;color:var(--ink);}
  .quote .who{margin-top:16px;font-size:14px;color:var(--subtle);}
  @media(max-width:760px){.quotes{grid-template-columns:1fr;}}

  .faq{max-width:820px;margin:52px auto 0;}
  details{border-bottom:1px solid var(--divider);}
  summary{list-style:none;cursor:pointer;padding:24px 40px 24px 0;position:relative;font-size:19px;font-weight:500;letter-spacing:-.012em;color:var(--ink);}
  summary::-webkit-details-marker{display:none;}
  summary::after{content:"+";position:absolute;right:6px;top:22px;font-size:24px;font-weight:400;color:var(--subtle);transition:transform .25s ease;}
  details[open] summary::after{transform:rotate(45deg);}
  /* with js/vendor/morph.js running, the plus is a morphing icon instead */
  html.morph-on summary::after{display:none;}
  summary .faq-ic{position:absolute;right:4px;top:27px;width:22px;height:22px;color:var(--subtle);}
  summary .faq-ic svg{display:block;}
  details p{color:var(--subtle);font-size:16px;line-height:1.6;padding:0 40px 26px 0;margin-top:-4px;}

  /* ---------- CTA (the single bold coral moment) ---------- */
  .cta{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);color:#fff;text-align:center;position:relative;overflow:hidden;}
  .cta::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 50% 0%,rgba(255,255,255,.18),transparent 55%);}
  .cta .wrap{position:relative;z-index:1;}
  .cta h2{font-family:var(--font-display);font-size:clamp(34px,5.2vw,62px);line-height:1.04;letter-spacing:-.012em;font-weight:400;text-wrap:balance;max-width:16em;margin:0 auto;color:#fff;}
  .cta p{color:rgba(255,255,255,.85);font-size:19px;margin:22px auto 0;max-width:30em;}
  .cta .cta-row{margin-top:36px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

  /* --- getting the app: two columns, App Store first (Apple's rule) ---
     The badges are Apple's and Google's own artwork and are never restyled:
     no border-radius, no shadow, no colour of ours on top. Their guidelines
     let us choose a size and a position, nothing else. Clear space here is
     18px against a 52px badge, over Apple's quarter-height minimum. */
  .store-row{margin-top:40px;display:flex;gap:56px;align-items:flex-start;justify-content:center;flex-wrap:wrap;}
  .store-col{display:flex;flex-direction:column;align-items:center;gap:18px;}
  .qr{display:block;background:#fff;border-radius:14px;padding:12px;line-height:0;}
  .qr img{display:block;}
  .store-badge{display:inline-flex;padding:18px 0 0;}
  .store-badge img{height:52px;width:auto;display:block;}
  .store-note{font-size:15px;color:rgba(255,255,255,.62);margin-top:30px;}
  .store-alt{font-size:15px;color:rgba(255,255,255,.62);margin-top:10px;}
  .store-alt a{color:#fff;text-decoration:underline;text-underline-offset:3px;}

  /* Placeholders — visible only while the real files are missing. They are
     deliberately ugly so nobody ships the page with them still in. */
  .qr-slot{display:flex;width:132px;height:132px;align-items:center;justify-content:center;
    border:2px dashed #B86B3F;border-radius:6px;color:#B86B3F;font-size:13px;
    font-weight:700;text-align:center;line-height:1.3;letter-spacing:.02em;}
  .badge-slot{display:flex;height:52px;min-width:172px;align-items:center;justify-content:center;
    border:2px dashed rgba(255,255,255,.5);border-radius:6px;color:rgba(255,255,255,.75);
    font-size:12px;font-weight:600;letter-spacing:.02em;padding:0 14px;}

  /* A phone can install; it does not need a code pointed at itself. The badge
     stays, and tapping it is the whole interaction there. */
  @media (max-width:720px){
    .store-row{gap:26px;}
    .qr, .qr-slot{display:none;}
    .store-badge{padding-top:0;}
  }

  /* ---------- Footer (light) ---------- */
  footer{background:var(--footer);color:var(--subtle);border-top:1px solid var(--divider);padding:56px 0 40px;}
  footer .wrap{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start;}
  footer .brand{color:var(--ink);}
  footer .tag{margin-top:12px;font-size:14px;max-width:22em;line-height:1.5;color:var(--subtle);}
  footer .cols{display:flex;gap:64px;flex-wrap:wrap;}
  footer h4{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--subtle);margin-bottom:14px;font-weight:600;}
  footer a{display:block;font-size:14px;color:var(--ink);opacity:.72;margin-bottom:10px;transition:opacity .2s ease;}
  footer a:hover{opacity:1;}
  .legal{max-width:var(--maxw);margin:44px auto 0;padding:22px 24px 0;border-top:1px solid var(--divider);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--subtle);}

  /* ---------- Watch (two videos) ---------- */
  .videos{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:52px;}
  .video{background:var(--surface);border:1px solid var(--divider);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-md);}
  .video video{display:block;width:100%;aspect-ratio:16/9;background:var(--sand);object-fit:cover;}
  .video .cap{padding:20px 24px 24px;}
  .video h3{font-size:19px;font-weight:600;letter-spacing:-.012em;color:var(--ink);}
  .video p{color:var(--subtle);font-size:15px;line-height:1.5;margin-top:6px;}
  @media(max-width:820px){.videos{grid-template-columns:1fr;gap:20px;}}

  .reveal{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
  .reveal.in{opacity:1;transform:none;}
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1 !important;transform:none !important;transition:none;}.scrollcue span{animation:none;}}

  /* ==========================================================================
     LANGUAGE
     ==========================================================================
     Three real pages (/, /zh/, /yue/), so this is two things: the switcher in
     the nav, and the type corrections CJK needs from a layout that was drawn
     around a Latin serif. */

  /* The switcher sits with the CTA in one group, so nav .wrap keeps its three
     children and space-between still puts brand left / actions right. */
  .nav-right{display:flex;align-items:center;gap:12px;}
  .langs{display:flex;align-items:center;gap:2px;padding:2px;border-radius:980px;
    background:rgba(43,33,27,.06);}
  .langs a{display:inline-flex;align-items:center;justify-content:center;
    min-width:30px;height:24px;padding:0 8px;border-radius:980px;
    font-size:12.5px;font-weight:500;line-height:1;color:var(--subtle);white-space:nowrap;
    transition:color .2s ease,background .2s ease,box-shadow .2s ease;}
  .langs a:hover{color:var(--ink);}
  .langs a[aria-current]{background:var(--surface);color:var(--ink);
    box-shadow:0 1px 2px rgba(43,33,27,.10);}
  /* The CJK labels (中 / 粵) sit slightly small next to "EN" at the same px. */
  .langs a[lang^="zh"] .lang-short,.langs a[lang^="yue"] .lang-short{font-size:13.5px;}
  @media(max-width:420px){
    .langs a{min-width:26px;padding:0 6px;}
    .nav-right{gap:8px;}
    .nav-cta{padding:7px 13px;}
  }

  /* ---- Simplified Chinese ---- */
  html.lang-zh{
    --font:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,sans-serif;
    --font-display:"Noto Serif SC","Songti SC",SimSun,Georgia,serif;
  }
  /* ---- Cantonese, in Traditional characters ---- */
  html.lang-yue{
    --font:"Noto Sans TC","PingFang HK","PingFang TC","Microsoft JhengHei",-apple-system,BlinkMacSystemFont,sans-serif;
    --font-display:"Noto Serif TC","Songti TC",PMingLiU,Georgia,serif;
  }

  /* Corrections that apply to both CJK pages.
     Negative tracking is a Latin device — in CJK it collides the glyphs, so
     every letter-spacing the page sets goes back to 0. CJK also needs more
     leading at the same size, and headline sizes come down a step because a
     character occupies a full em where a Latin letter occupies about half. */
  html.lang-zh body,html.lang-yue body{letter-spacing:0;line-height:1.75;}
  html.lang-zh .hero h1,html.lang-yue .hero h1{
    letter-spacing:0;line-height:1.2;font-size:clamp(38px,6.2vw,74px);}
  html.lang-zh .lead h2,html.lang-yue .lead h2{
    letter-spacing:0;line-height:1.32;font-size:clamp(27px,3.9vw,46px);}
  html.lang-zh .cta h2,html.lang-yue .cta h2{
    letter-spacing:0;line-height:1.3;font-size:clamp(28px,4.4vw,52px);max-width:18em;}
  html.lang-zh .hero p.sub,html.lang-yue .hero p.sub{line-height:1.8;max-width:24em;}
  html.lang-zh .lead p,html.lang-yue .lead p{line-height:1.85;}
  html.lang-zh .cta p,html.lang-yue .cta p{line-height:1.8;}
  html.lang-zh .step p,html.lang-yue .step p,
  html.lang-zh .card p,html.lang-yue .card p,
  html.lang-zh .video p,html.lang-yue .video p,
  html.lang-zh details p,html.lang-yue details p{line-height:1.85;}
  html.lang-zh .step h3,html.lang-yue .step h3,
  html.lang-zh .card h3,html.lang-yue .card h3,
  html.lang-zh .video h3,html.lang-yue .video h3,
  html.lang-zh summary,html.lang-yue summary,
  html.lang-zh .brand,html.lang-yue .brand{letter-spacing:0;}
  html.lang-zh .quote p,html.lang-yue .quote p{letter-spacing:0;line-height:1.8;}
  /* uppercase does nothing to a Chinese character, and .14em tracking on four
     of them reads as four separate words. */
  html.lang-zh .eyebrow,html.lang-yue .eyebrow,
  html.lang-zh footer h4,html.lang-yue footer h4{letter-spacing:.06em;font-size:12.5px;}
  html.lang-zh .scrollcue,html.lang-yue .scrollcue{letter-spacing:.22em;}
  html.lang-zh footer .tag,html.lang-yue footer .tag{line-height:1.8;max-width:20em;}
  /* 「」 already carry their own side bearing; the quote block does not need
     the extra optical indent a Latin “ would want. */
  html.lang-zh .quote,html.lang-yue .quote{padding:28px 26px;}
  /* Chrome ships text-wrap:pretty; where it lands it stops a two-character
     orphan line, which CJK produces often because every glyph is the same
     width and the line has no short words to absorb. Silently ignored
     elsewhere. */
  html.lang-zh .hero p.sub,html.lang-yue .hero p.sub,
  html.lang-zh .lead p,html.lang-yue .lead p,
  html.lang-zh .cta p,html.lang-yue .cta p{text-wrap:pretty;}

/* The leaf mark, inline in the nav and the footer (2026-09-18). Sized by
   height so the wordmark beside it sets the scale. Its gap and veins are
   knocked out in var(--bg), not transparency, so it sits correctly on any
   surface that declares a background. */
.brand{display:flex;align-items:center;gap:9px;}
.brand .leaf{height:26px;width:auto;display:block;flex:0 0 auto;}
footer .brand .leaf{--bg:var(--footer);}   /* the footer is its own surface */

/* Footer (2026-09-26): brand, line and address on the left; Product, Help and Social
   on the right (Help carries the privacy and delete-account links a store
   listing points at); the bottom row is the copyright alone. Its rule is
   drawn to the width of the content above it, not 24px past either side. */
footer .cols{gap:clamp(48px,7vw,96px);}
footer .cols h4{margin-top:4px;}
.foot-mail{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;}
footer .tag{text-wrap:pretty;}          /* no lone 單。 on the last line */
html.lang-zh footer .tag,html.lang-yue footer .tag{max-width:22em;}
.foot-mail svg{flex:0 0 auto;opacity:.8;}
footer .social-link{display:inline-flex;align-items:center;gap:8px;min-height:24px;}
footer .social-link svg{flex:0 0 auto;}
.legal{width:calc(100% - 48px);max-width:calc(var(--maxw) - 48px);padding:22px 0 0;}

/* Download. The codes are for someone on a laptop to scan with a phone; on a
   phone they are useless (it cannot scan its own screen), so below 720px they
   go and the buttons carry it. The Android card keeps its shape while Play is
   pending, so the layout does not jump the day the real code arrives. */
.dl-row{margin-top:40px;display:flex;gap:22px;justify-content:center;flex-wrap:wrap;}
.dl-card{width:264px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);
  border-radius:var(--r-xl);padding:26px 24px 24px;display:flex;flex-direction:column;align-items:center;}
.dl-os{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.92);margin-bottom:16px;}
.dl-qr{display:block;line-height:0;background:#fff;border-radius:18px;padding:10px;box-shadow:0 14px 32px rgba(43,33,27,.20);transition:transform .2s ease;}
.dl-qr:hover{transform:translateY(-2px);}
.dl-qr img{display:block;width:168px;height:168px;}
.dl-placeholder{width:188px;height:188px;border-radius:18px;border:1.5px dashed rgba(255,255,255,.48);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.80);font-size:15px;font-weight:500;letter-spacing:.02em;}
.cta .dl-hint{font-size:14px;color:rgba(255,255,255,.84);margin:14px 0 18px;max-width:none;}
.dl-btn{width:100%;white-space:nowrap;padding-left:18px;padding-right:18px;}
.dl-soon{background:rgba(255,255,255,.06);}
.dl-btn .dl-ic{display:inline-flex;vertical-align:-3px;margin-right:8px;}
.dl-btn .dl-ic svg{display:block;}
.cta .dl-note{font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.74);margin:12px 0 0;max-width:none;}
@media(max-width:720px){
  .dl-qr,.dl-placeholder,.cta .dl-scan{display:none;}
  .dl-card{width:100%;max-width:340px;padding:20px 20px 18px;}
  .dl-os{margin-bottom:6px;}
}

/* Product story: real app screens, short chapters, scroll-linked movement. */
.product-story { --subtle:#786F67; }
.product-story section[id],.product-story #idea { scroll-margin-top:72px; }
.product-story .navlinks { gap:28px; }
.product-story nav .wrap { min-height:60px; }
.product-story nav { height:60px; }
.product-story .hero { min-height:min(850px,100svh); background:radial-gradient(ellipse at 78% 46%,#F0DECD 0,transparent 42%),linear-gradient(145deg,#FFFDFA,var(--bg)); }
.product-story .hero-grid { display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:50px;padding-top:112px;padding-bottom:100px; }
.product-story .hero-inner { max-width:630px; }
.product-story .hero h1 { font-size:clamp(60px,6.7vw,92px);line-height:1.02;letter-spacing:-.045em; }
.product-story .hero p.sub { font-size:19px;line-height:1.6;max-width:26em;color:var(--ink-2);margin-top:24px; }
.product-story .hero .cta-row { margin-top:28px;gap:12px; }
.product-story .hero-note { font-size:11.5px;color:var(--subtle);line-height:1.7;margin-top:24px;max-width:32em; }
.product-story #voice { opacity:.45; }
.hero-product { position:relative;min-height:560px;display:grid;place-items:center;isolation:isolate; }
.hero-tree { min-height:600px; }
#tree { position:absolute;inset:-10px -32px 28px;display:grid;align-items:center;pointer-events:none; }
.tree-art { position:relative;aspect-ratio:1/1; }
.tree-art.tree-live::before { display:none; }   /* the 3D tree draws its own contact shadow */
.tree-art::before { content:"";position:absolute;bottom:1.7%;left:42%;width:24%;height:2%;border-radius:50%;background:#394A3938;filter:blur(8px); }
.tree-art img { position:absolute;inset:0;display:block;width:100%;height:100%;transform-origin:52% 98%;animation:tree-breeze 6s ease-in-out infinite; }
.tree-art img:not([src]) { visibility:hidden; }   /* the painted fallback is fetched only if WebGL cannot run */
.tree-canvas { position:absolute;inset:-15%;width:130%;height:130%;opacity:0; }   /* room for the crown to spread past the column */
@media (max-width:720px) { .tree-canvas { inset:-6%;width:112%;height:112%; } }
.tree-live .tree-canvas { opacity:1; }
.tree-live img { opacity:0;animation:none; }
.tree-paused img { animation-play-state:paused; }
@keyframes tree-breeze {
  0%,100% { transform:skewX(-.7deg); }
  50% { transform:skewX(.9deg); }
}
.device { position:relative;background:#302B27;border-radius:42px;padding:8px;box-shadow:inset 0 0 0 1px #777069,0 28px 60px -18px #48352350,0 8px 12px #48352314; }
.device > img { display:block;width:100%;height:auto;border-radius:34px; }
.product-caption { position:absolute;bottom:4px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--subtle); }
.product-story .scrollcue { bottom:14px;font-size:9px; }
.product-story section.block { padding:84px 0; }
.product-story .lead h2 { font-size:clamp(36px,4.3vw,58px);line-height:1.07;letter-spacing:-.035em; }
.product-story .lead p { font-size:18px;line-height:1.6; }
.product-story #how { position:relative;background:#FFFDFA;border-radius:32px 32px 0 0;z-index:2;padding-bottom:32px; }
.story-heading { text-align:center;margin:0 auto 36px;max-width:780px; }
.story-heading p { max-width:34em;margin-left:auto;margin-right:auto; }
.how-track { position:relative; }
.steps { margin-top:0; }
.product-story .step { padding:28px 0; }
.product-story .step h3 { font-family:var(--font-display);font-size:32px;line-height:1.12;font-weight:400;letter-spacing:-.025em;margin-top:18px; }
.product-story .step p { font-size:16px;line-height:1.65;max-width:27em;margin-top:22px; }
.step-shot { display:block;max-width:180px;width:100%;height:auto;margin:28px auto 0;border-radius:22px;border:1px solid var(--divider);box-shadow:var(--sh-md); }
.story-visual,.story-controls { display:none; }

/* The complete three-card layout above is also the no-JS/reduced-motion view. */
html.story-on .product-story #how { padding:0; }
html.story-on .how-track { height:460svh; }
html.story-on .how-stage { position:sticky;top:60px;height:calc(100svh - 60px);min-height:500px;max-height:1000px;display:grid;grid-template-columns:1.05fr 1fr;grid-template-rows:1fr auto;align-items:center;column-gap:64px;padding:26px 30px 30px;overflow:clip;isolation:isolate; }
html.story-on .story-heading { position:absolute;inset:0;z-index:3;max-width:none;margin:0;padding:30px 20px 80px;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none; }
html.story-on .product-story .story-heading h2 { font-size:clamp(56px,8.2vw,108px);line-height:1.02;letter-spacing:-.05em;width:100%; }
html.story-on .story-heading .story-line { overflow:visible;padding:0;margin:0; }
html.story-on .story-heading .story-line > span { display:inline;background:linear-gradient(90deg,var(--ink) var(--ink-fill,0%),#D7D0C8 var(--ink-fill,0%));background-clip:text;-webkit-background-clip:text;color:transparent; }
html.story-on .story-heading .story-line:last-child > span { --ink:var(--accent); }
html.story-on .story-heading p { max-width:30em;margin-top:30px; }
html.story-on.lang-zh .product-story .story-heading h2,html.story-on.lang-yue .product-story .story-heading h2 { font-size:clamp(42px,6.2vw,80px);line-height:1.25;letter-spacing:-.025em; }
html.story-on .steps { display:grid;grid-template-columns:1fr;min-width:0;margin:0;opacity:0; }
html.story-on .step { grid-area:1/1;border:0;padding:0;opacity:0;visibility:hidden; }
html.story-on .step.on { opacity:1;visibility:visible; }
html.story-on .step h3 { font-size:clamp(40px,4.3vw,60px);line-height:1.08; }
html.story-on .step p { font-size:18px; }
.story-line { display:block; }
html.story-on .story-line { overflow:clip;padding-bottom:.13em;margin-bottom:-.13em; }
html.story-on .story-line > span { display:block; }
html.story-on .step .n,html.story-on .story-line > span,html.story-on .step p { will-change:transform,opacity; }
html.story-on .step-shot { display:none; }
html.story-on .story-visual { display:grid;place-items:center;align-self:stretch;position:relative;isolation:isolate; }
.story-orbit { position:absolute;width:110%;aspect-ratio:1;max-height:90%;border-radius:50%;background:radial-gradient(ellipse,#EBDCC8AA,transparent 68%);z-index:-1; }
.story-orbit::after { content:"";position:absolute;inset:8%;border:1px solid #D5BEA447;border-radius:50%; }
.story-orbit::before { content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse,#CBE1D7,transparent 68%);opacity:var(--cool,0); }
.phone { width:clamp(210px,34svh,320px);padding:8px; }
html.story-on .phone,html.story-on .story-orbit { opacity:0; }
.phone-screen { position:relative;aspect-ratio:720/1485;border-radius:34px;overflow:hidden;background:var(--bg); }
.phone-screen img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.phone-screen img:not(:first-child) { transform:translateY(100%); }
html.story-on .story-controls { grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:24px;position:relative;z-index:4; }
.story-controls button { position:relative;border:1px solid transparent;border-radius:980px;background:transparent;color:var(--subtle);font:500 13px var(--font);padding:13px 20px;cursor:pointer;transition:color .2s,background .2s; }
.story-controls button span { font-size:10px;margin-right:8px;color:var(--accent); }
.story-controls button[aria-current="step"] { background:var(--sand);color:var(--ink); }
.story-controls button:hover { background:var(--accent-soft); }
.story-controls button::after { content:"";position:absolute;height:2px;background:var(--accent);bottom:4px;left:20px;right:20px;border-radius:2px;transform:scaleX(var(--progress,0));transform-origin:left; }

.product-story #watch { background:#241F1B;color:#FFF8F0; }
.product-story #watch .lead { max-width:800px; }
.product-story #watch .eyebrow { color:var(--amber); }
.product-story #watch h2,.product-story #watch h3 { color:#FFF8F0; }
.product-story #watch .lead p,.product-story #watch .video p { color:#BFB3A8; }
.product-story .videos { grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:24px;margin-top:40px; }
.product-story .video { margin:0;background:transparent;border:0;box-shadow:none;border-radius:20px; }
.product-story .video video { border-radius:20px; }
.product-story .video .cap { padding:18px 4px 0; }
.product-story .video h3 { font-size:17px; }
.product-story .video p { font-size:14px; }
.product-story #who .lead { max-width:660px; }
.product-story .cards { margin-top:40px;gap:32px; }
.product-story .card { padding:0 24px 0 0;background:transparent;box-shadow:none;border:0;border-right:1px solid var(--divider);border-radius:0; }
.product-story .card:last-child { border-right:0; }
.product-story .card:hover { transform:none;box-shadow:none; }
.product-story .card .ic { width:36px;height:36px;background:transparent;margin-bottom:16px;justify-content:flex-start; }
.product-story .card h3 { font-size:19px; }
.product-story .card p { font-size:15px; }
.family-quotes { margin:64px auto 0;padding-top:38px;border-top:1px solid var(--divider); }
.family-quote { text-align:center;max-width:780px;margin:0 auto; }
.family-quotes-many { display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px; }
.family-quotes-many .family-quote { text-align:left;max-width:none;margin:0;background:var(--surface);border:1px solid var(--divider);border-radius:var(--r-lg);padding:26px 28px 24px;display:flex;flex-direction:column;justify-content:space-between; }
.family-quotes-many .family-quote blockquote { font-size:clamp(19px,1.6vw,22px);line-height:1.45; }
.family-quotes-many .family-quote figcaption { margin-top:16px; }
.family-quote blockquote { font-family:var(--font-display);font-size:clamp(24px,2.4vw,32px);line-height:1.4;margin:0;text-wrap:pretty; }
.family-quote figcaption { font-size:12px;color:var(--subtle);margin-top:18px; }
.product-story #faq { padding:64px 0;background:#FFFDFA; }
.product-story #faq .wrap { display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start; }
.product-story .faq { margin:0;width:100%; }
.product-story summary { font-size:17px;padding-top:23px;padding-bottom:23px; }
.product-story details p { font-size:15px; }
.product-story #download { padding:64px 0; }
.product-story .cta h2 { font-size:clamp(42px,5vw,68px);letter-spacing:-.035em; }
.product-story .cta > .wrap > p { font-size:17px; }
.product-story .dl-row { margin-top:30px;gap:20px; }
.product-story .dl-card { width:248px;padding:20px; }
.product-story .dl-qr img { width:130px;height:130px; }
.product-story .dl-qr { border-radius:13px;box-shadow:none; }
.product-story .dl-hint { font-size:12px;margin:12px 0 16px; }
.product-story .dl-note { font-size:11px; }
.product-story footer { padding-top:42px;padding-bottom:28px; }
.product-story .legal { margin-top:30px; }
/* Keep the hero in document flow; only the bounded product stage should stick. */
html.story-on .hero { transform-origin:50% 30%; }
.product-story main,.product-story footer { position:relative;z-index:2; }
.product-story .reveal { opacity:1;transform:none; }
.product-story .reveal-ready:not(.in) { opacity:0;transform:translateY(20px); }
.product-story .reveal.in { transition-delay:0s!important; }
.product-story .scroll-enter { opacity:var(--enter,1);transform:translate3d(0,var(--rise,0px),0);transition:none; }
.product-story .scroll-enter:focus-within { opacity:1;transform:none; }
html.lang-zh .product-story .hero h1,html.lang-yue .product-story .hero h1 { font-size:clamp(40px,5.2vw,64px);letter-spacing:-.035em;line-height:1.25; }
html.lang-zh .product-story .hero p.sub,html.lang-yue .product-story .hero p.sub { line-height:1.85; }
html.lang-zh .product-story .step h3,html.lang-yue .product-story .step h3 { line-height:1.4;letter-spacing:0; }
html.lang-zh .product-story .lead h2,html.lang-yue .product-story .lead h2 { font-size:clamp(28px,3.5vw,44px);line-height:1.45;letter-spacing:0; }
html.lang-zh .family-quote blockquote,html.lang-yue .family-quote blockquote { line-height:1.8;font-size:24px; }
html.lang-zh .family-quotes-many .family-quote blockquote,html.lang-yue .family-quotes-many .family-quote blockquote { font-size:18px;line-height:1.8; }
@media(max-width:979px) {
  .product-story .hero-grid { gap:20px;grid-template-columns:1.15fr 1fr; }
  .product-story .hero h1 { font-size:60px; }
  .hero-product { min-height:490px; }
  #tree { inset:0 -8px 28px; }
  .product-story .navlinks { gap:18px; }.product-story .navlinks a { font-size:12px; }
  html.story-on .how-stage { column-gap:30px;padding-left:0;padding-right:0; }
  html.story-on .step h3 { font-size:40px; }
}
@media(max-width:799px) {
  .product-story .navlinks { display:none; }
  .product-story .hero-grid { display:flex;flex-direction:column;gap:18px;padding-top:104px;padding-bottom:58px; }
  .product-story .hero { min-height:0; }.product-story .hero-inner { max-width:540px;width:100%; }
  .product-story .hero h1 { font-size:clamp(48px,9vw,64px);margin-top:16px; }
  .product-story .hero p.sub { font-size:16px;line-height:1.65;margin-top:20px;max-width:29em; }
  .product-story .hero .cta-row { margin-top:22px;gap:12px; }.product-story .btn { font-size:14px;padding:12px 20px; }
  .product-story .btn-ghost { padding-left:0;padding-right:0; }
  .product-story .hero-note { margin-top:16px;font-size:10px;max-width:none; }
  .hero-product { min-height:360px;width:100%;max-width:370px; }
  #tree { inset:0 0 24px; }
  .product-caption { bottom:0;font-size:8px; }
  .product-story .scrollcue { display:none; }
  .product-story section.block { padding:54px 0; }.product-story #how { padding-bottom:20px;border-radius:24px 24px 0 0; }
  .story-heading { text-align:left;margin-bottom:28px; }.product-story .lead p { font-size:16px; }
  .product-story .steps { display:block; }
  .product-story .step { display:grid;grid-template-columns:minmax(0,1fr) 116px;align-items:center;column-gap:22px;padding:30px 0; }
  .product-story .step h3 { font-size:27px;line-height:1.16; }.product-story .step p { font-size:14px;line-height:1.65;margin-top:16px; }
  .product-story .step .n { font-size:10px;letter-spacing:.1em; }.step-shot { margin:0;border-radius:14px; }
  .product-story .videos { grid-template-columns:1fr;gap:32px;margin-top:28px; }
  .product-story .video video { border-radius:16px; }.product-story .video .cap { padding:14px 0 0; }
  .product-story .cards { grid-template-columns:1fr;gap:24px;margin-top:30px; }
  .product-story .card { border:0;border-bottom:1px solid var(--divider);padding:0 0 24px; }
  .product-story .card:last-child { padding-bottom:0;border:0; }.product-story .card .ic { margin-bottom:8px; }
  .family-quotes { margin-top:36px;padding-top:30px; }.family-quote blockquote { font-size:25px; }.family-quotes-many .family-quote blockquote { font-size:19px; }
  .product-story #faq { padding:48px 0; }.product-story #faq .wrap { grid-template-columns:1fr;gap:20px; }
  .product-story summary { font-size:16px; }.product-story .cta h2 { font-size:42px; }
  .product-story .cta > .wrap > p { font-size:15px; }.product-story #download { padding:48px 0; }
  .product-story .dl-row { gap:12px; }.product-story .dl-card { width:100%;max-width:340px;padding:16px 20px; }
  .product-story .dl-os { font-size:10px;margin-bottom:10px; }.product-story .dl-note { margin-top:10px; }
  .product-story footer .cols { gap:48px; }.product-story .legal { font-size:11px; }
  html.lang-zh .product-story .hero h1,html.lang-yue .product-story .hero h1 { font-size:40px; }
  html.lang-zh .product-story .step h3,html.lang-yue .product-story .step h3 { font-size:24px; }
}
@media(max-width:360px) {
  .product-story .wrap { padding-left:18px;padding-right:18px; }.product-story .brand { font-size:16px;gap:6px; }
  .product-story .nav-right { gap:5px; }.product-story .nav-cta { padding:7px 10px;font-size:12px; }
  .product-story .step { grid-template-columns:minmax(0,1fr) 95px;gap:16px; }.product-story .hero h1 { font-size:46px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }.product-story *, .product-story *::before,.product-story *::after { transition:none!important;animation:none!important; }
  .product-story .reveal-ready:not(.in) { opacity:1;transform:none; }
  .product-story .scroll-enter { opacity:1;transform:none; }
}
/* Keep touch scrolling native; Lenis only smooths wheel input. */
html.lenis,html.lenis body { height:auto; }html.lenis { scroll-behavior:auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow:clip; }
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch] { overscroll-behavior:contain; }
.lenis.lenis-smooth iframe { pointer-events:none; }

/* The company line beside the copyright: a paragraph, not a label. */
.legal .company{flex:1 1 34em;min-width:0;max-width:62em;line-height:1.6;text-wrap:pretty;overflow-wrap:anywhere;}

/* ---------------------------------------------------------------------------
   Help chat (js/support-chat.js, 2026-10-13): a "Questions?" button bottom
   right and a small panel over the page; a full-screen sheet on phones. */
.help-launch{position:fixed;right:22px;bottom:22px;z-index:70;display:inline-flex;align-items:center;gap:8px;
  padding:12px 18px 12px 15px;border:0;border-radius:980px;background:var(--accent);color:#fff;font:600 15px/1 var(--font);
  letter-spacing:-.005em;cursor:pointer;box-shadow:0 10px 26px rgba(150,83,50,.30),0 2px 6px rgba(0,0,0,.08);
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease;}
.help-launch:hover{background:var(--accent-hover);transform:translateY(-1px);}
.help-launch:focus-visible{outline:3px solid var(--amber-soft);outline-offset:3px;}
html.help-open .help-launch{background:var(--ink);box-shadow:0 8px 20px rgba(43,33,27,.25);}
.help-panel{position:fixed;right:22px;bottom:84px;z-index:71;width:384px;height:min(620px,calc(100svh - 120px));
  display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--divider);border-radius:24px;overflow:hidden;
  box-shadow:0 24px 60px rgba(43,33,27,.18),0 6px 16px rgba(43,33,27,.08);font-family:var(--font);color:var(--ink);transform-origin:100% 100%;}
.help-panel[hidden]{display:none;}
.help-panel.help-in{animation:help-in .22s cubic-bezier(.2,.8,.2,1);}
@keyframes help-in{from{opacity:0;transform:translateY(10px) scale(.97);}to{opacity:1;transform:none;}}
.help-head{display:flex;align-items:center;gap:12px;padding:14px 12px 14px 16px;background:var(--surface);border-bottom:1px solid var(--divider);}
.help-mark{width:36px;height:36px;border-radius:50%;background:var(--accent-tint);padding:6px;flex:none;}
.help-head-words{flex:1;min-width:0;}
.help-title{margin:0;font:600 16px/1.25 var(--font);letter-spacing:-.01em;}
.help-sub{margin:2px 0 0;font-size:12.5px;line-height:1.3;color:var(--subtle);}
.help-sub::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#5BAA7D;margin-right:6px;vertical-align:1px;}
.help-icon-btn{flex:none;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--ink-2);cursor:pointer;}
.help-icon-btn:hover{background:var(--sand);color:var(--ink);}
.help-log{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px 8px;display:flex;flex-direction:column;gap:10px;}
.help-msg{max-width:86%;padding:10px 14px;font-size:15px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;}
.help-msg a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.help-msg-bot{align-self:flex-start;background:var(--surface);border:1px solid var(--divider);border-radius:18px 18px 18px 6px;}
.help-msg-me{align-self:flex-end;background:var(--accent);color:#fff;border-radius:18px 18px 6px 18px;}
.help-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px;}
.help-chip{border:1px solid #E7CDBB;background:var(--surface);color:var(--accent-deep);border-radius:980px;padding:8px 13px;font:500 13.5px/1.2 var(--font);cursor:pointer;text-align:left;}
.help-chip:hover{background:var(--accent-tint);}
.help-contact{display:flex;flex-direction:column;gap:8px;align-self:flex-start;width:86%;}
.help-contact-btn{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--divider);
  color:var(--ink);font:500 14.5px/1.2 var(--font);text-decoration:none;}
.help-contact-btn:hover{border-color:#D9C3B2;}
.help-contact-wa{background:#E7F5EC;border-color:#CBE7D5;color:#1D6B3F;}
.help-typing{display:flex;gap:5px;align-items:center;padding:14px 16px;}
.help-typing span{width:7px;height:7px;border-radius:50%;background:var(--subtle);opacity:.35;animation:help-dot 1.1s infinite ease-in-out;}
.help-typing span:nth-child(2){animation-delay:.15s;}
.help-typing span:nth-child(3){animation-delay:.3s;}
.help-slow{font-style:normal;font-size:13px;line-height:1.3;color:var(--subtle);margin-left:6px;}
@keyframes help-dot{0%,80%,100%{opacity:.25;transform:none;}40%{opacity:.9;transform:translateY(-2px);}}
.help-problem{align-self:center;display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-2);background:var(--sand);border-radius:12px;padding:8px 12px;}
.help-retry{border:0;background:transparent;color:var(--accent-deep);font:600 13.5px var(--font);cursor:pointer;padding:2px 4px;}
.help-compose{display:flex;align-items:flex-end;gap:8px;margin:4px 12px 0;padding:6px 6px 6px 14px;background:var(--surface);border:1px solid var(--divider);border-radius:22px;}
.help-compose:focus-within{border-color:#D9B49B;box-shadow:0 0 0 3px var(--accent-soft);}
.help-input{flex:1;border:0;outline:0;resize:none;background:transparent;font:15px/1.45 var(--font);color:var(--ink);padding:7px 0;max-height:120px;}
/* The page's own focus ring would draw a box inside the pill; the pill shows focus instead. */
.help-input:focus-visible{box-shadow:none;border-radius:0;}
.help-send{flex:none;width:36px;height:36px;border:0;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;cursor:pointer;}
.help-send:disabled{opacity:.45;cursor:default;}
.help-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 16px 12px;font-size:11.5px;line-height:1.35;color:var(--subtle);}
.help-person{flex:none;color:var(--accent-deep);font-weight:600;text-decoration:none;}
.help-person:hover{text-decoration:underline;}
html.lang-zh .help-msg,html.lang-yue .help-msg{line-height:1.65;}
@media (max-width:600px){
  .help-launch{right:16px;bottom:16px;padding:12px 16px 12px 14px;}
  .help-panel{inset:0;width:auto;height:100%;border-radius:0;border:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);}
  html.help-open .help-launch{display:none;}
  html.help-open,html.help-open body{overflow:hidden;}
}
@media (prefers-reduced-motion:reduce){
  .help-panel.help-in{animation:none;}
  .help-typing span{animation:none;opacity:.6;}
}

/* ---------- News, posts, press (news/, built by build-news.mjs) ----------
   Same palette and type as the rest of the site. These pages have no hero, so
   the nav sits on the parchment ground from the first pixel. */
.page-news nav{border-bottom:1px solid var(--divider);background:rgba(248,244,238,.85);}
.navlinks a[aria-current]{color:var(--ink);}
.page-news main{padding-bottom:clamp(72px,10vh,120px);}
.page-head{padding:124px 0 8px;}
.page-head h1{font-family:var(--font-display);font-size:clamp(40px,6.4vw,76px);line-height:1.02;letter-spacing:-.015em;font-weight:400;margin-top:16px;text-wrap:balance;color:var(--ink);}
.page-head .sub{margin-top:20px;font-size:clamp(17px,2vw,20px);line-height:1.5;color:var(--subtle);max-width:36em;}
.news-section{padding:clamp(40px,6vh,64px) 0;}
.news-section.alt{background:var(--surface);border-top:1px solid var(--divider);border-bottom:1px solid var(--divider);}
.news-section .lead h2{font-size:clamp(28px,3.6vw,42px);margin-top:10px;}
.news-empty{margin-top:22px;color:var(--subtle);font-size:16px;}

/* auto-fit, not auto-fill: two posts fill the row as two wide cards instead of leaving a gap */
.news-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px;margin-top:28px;}
.news-card{background:var(--surface);border:1px solid var(--divider);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease;}
.news-card:hover{transform:translateY(-2px);box-shadow:var(--sh-lg);}
.news-card .pic{display:block;line-height:0;}
.news-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.news-card .body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1;}
.news-card h3{font-family:var(--font-display);font-size:25px;line-height:1.15;font-weight:400;letter-spacing:-.01em;color:var(--ink);text-wrap:pretty;}
.news-card h3 a:hover{color:var(--accent);}
.news-card p{color:var(--ink-2);font-size:15.5px;line-height:1.5;}
.news-card .more{margin-top:auto;padding-top:6px;color:var(--accent);font-size:14px;font-weight:500;}

.news-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--subtle);}
.news-meta .by::before{content:"·";margin-right:12px;}
.kind{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:3px 9px;border-radius:980px;}

.press-list{list-style:none;margin:28px 0 0;padding:0;max-width:820px;}
.press-list li{display:grid;grid-template-columns:140px 1fr auto;gap:18px;align-items:baseline;padding:16px 0;border-top:1px solid var(--divider);}
.press-list li:last-child{border-bottom:1px solid var(--divider);}
.press-list .outlet{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--subtle);}
.press-list a{font-family:var(--font-display);font-size:21px;line-height:1.25;color:var(--ink);}
.press-list a:hover{color:var(--accent);}
.press-list time{font-size:13px;color:var(--subtle);white-space:nowrap;}
@media(max-width:620px){.press-list li{grid-template-columns:1fr;gap:6px;}}

.presskit{background:var(--surface);border:1px solid var(--divider);border-radius:var(--r-xl);padding:clamp(24px,4vw,40px);display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,5vw,56px);margin-top:28px;}
.presskit h3{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 8px;}
.presskit h3 + p,.presskit h3 + ul{margin-bottom:26px;}
.presskit p{font-size:16px;line-height:1.6;color:var(--ink-2);}
.presskit a{color:var(--accent);}
.kit-links{list-style:none;margin:0;padding:0;}
.kit-links li{padding:6px 0;border-bottom:1px solid var(--divider);font-size:15.5px;}
.kit-links li:last-child{border-bottom:0;}
@media(max-width:760px){.presskit{grid-template-columns:1fr;}}

/* One post */
.post .wrap{max-width:780px;}
.post-head{padding:124px 0 28px;}
.post-head .crumb{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;}
.post-head .crumb::before{content:"←";margin-right:6px;}
.post-head h1{font-family:var(--font-display);font-size:clamp(34px,5.2vw,58px);line-height:1.06;letter-spacing:-.012em;font-weight:400;margin-top:14px;text-wrap:balance;color:var(--ink);}
.post-head .sub{margin-top:18px;font-size:clamp(17px,2vw,20px);line-height:1.5;color:var(--subtle);}
.post-hero{margin:8px 0 36px;line-height:0;}
.post-hero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lg);display:block;}

.prose{font-size:18px;line-height:1.65;color:var(--ink);}
.prose p{margin:0 0 1.25em;}
.prose h2{font-family:var(--font-display);font-size:clamp(26px,3vw,32px);font-weight:400;line-height:1.15;letter-spacing:-.01em;margin:1.7em 0 .6em;}
.prose h3{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:1.5em 0 .5em;}
.prose h4{font-size:17px;font-weight:600;margin:1.4em 0 .4em;}
.prose a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
.prose a:hover{color:var(--accent-hover);}
.prose strong{font-weight:600;}
.prose blockquote{margin:1.5em 0;padding:2px 0 2px 22px;border-left:3px solid var(--accent);color:var(--ink-2);}
.prose blockquote p{font-family:var(--font-display);font-size:22px;line-height:1.4;}
.prose ul,.prose ol{margin:0 0 1.25em;padding-left:1.4em;}
.prose li{margin:.35em 0;}
.prose figure{margin:1.6em 0;}
.prose img{max-width:100%;height:auto;border-radius:var(--r);display:block;}
.prose figcaption{font-size:13.5px;color:var(--subtle);margin-top:10px;}
.prose hr{border:0;border-top:1px solid var(--divider);margin:2.2em 0;}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--sand);padding:2px 6px;border-radius:6px;}
html.lang-zh .prose,html.lang-yue .prose{line-height:1.9;}

.share{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:44px;padding-top:24px;border-top:1px solid var(--divider);font-size:13.5px;color:var(--subtle);}
.share span{margin-right:6px;}
.share a{padding:7px 14px;border-radius:980px;border:1px solid var(--divider);background:var(--surface);color:var(--ink);font-size:13.5px;font-weight:500;transition:border-color .2s ease,color .2s ease;}
.share a:hover{border-color:var(--accent);color:var(--accent);}
.post-nav{display:flex;justify-content:space-between;gap:16px;margin-top:28px;}
.post-nav a{max-width:46%;font-family:var(--font-display);font-size:19px;line-height:1.25;color:var(--ink);}
.post-nav a:hover{color:var(--accent);}
.post-nav a span{display:block;font-family:var(--font);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--subtle);margin-bottom:6px;}
.post-nav .newer{text-align:right;margin-left:auto;}