/* ============================================================
   Petnest AI — shared design system (v2, wave B)
   Grammar borrowed from alan.com and notion.com: audience-first
   navigation, one idea per section, product shown in coloured
   frames with floating chips, pastel bento tiles, airy rhythm.
   Palette 2026-11-09 (Les Plis, 9_BRAND/Identity/Mascotte_Les_Plis): ivory canvas #faf7f0, white cards,
   ink #252820, dark green #3e4c3a for titles and actions; dog green #9c9c6c and cat orange #d9824b for
   marks and illustrations only. Until 2026-11-08: white / soft grey canvas, sage accent and the
   pastel tints below. No black bands: "dark" tokens now resolve to
   a soft sage surface (see DARK TOKENS).
   ============================================================ */

:root {
  /* ---- canvas + ink ---- */
  --bg: #faf7f0;             /* Les Plis editorial background (was #ffffff) */
  --bg-2: #f3eee3;
  --bg-3: #e7e1d3;
  --panel: #ffffff;
  --ink: #252820;           /* Les Plis ink, never pure #000 — 14:1 on #faf7f0 */
  --ink-2: #545845;         /* secondary — 6.9:1 on #faf7f0, ≥5.8:1 on every tint */
  --mute: #62664f;          /* captions (Les Plis muted) — 5.6:1 on #faf7f0, ≥4.7:1 on every tint */
  --line: #d6d5c4;
  --line-2: #e7e3d6;

  /* ---- accent (sage, from the logo) ---- */
  --brand: #9c9c6c;         /* Les Plis green (the dog): marks + fills only, never small text */
  --brand-deep: #3e4c3a;    /* titles, buttons, links — 8.5:1 on #faf7f0, white text 9.1:1 */
  --brand-ink: #2e3a2b;     /* hover / pressed */
  --brand-soft: #e8e9da;
  --brand-soft-2: #f2f2e8;

  /* ---- DARK TOKENS — remapped to a soft sage surface (v2) ----
     Older markup still says var(--dark) / var(--on-dark): it now renders
     as a pastel band with dark text instead of a black band. */
  --dark: #e8e9da;
  --dark-2: #ffffff;
  --dark-3: #f2f2e8;
  --dark-line: #d6d5c4;
  --on-dark: #252820;
  --on-dark-2: #545845;
  --accent-dark: #3e4c3a;
  --accent-text: #6c6c3c;   /* serif accents in headings (large text only) — 5.1:1 on #faf7f0 */

  /* ---- tints, retuned 2026-11-09 to Les Plis: mint = green, peach = orange, sky = slate,
          lav = ivory, butter = sand, blush = terracotta; each -ink is ≥5.6:1 on its tint ---- */
  --mint:   #e8e9da;   --mint-ink:   #3e4c3a;   --mint-frame:   #cfd1b9;
  --peach:  #f8e6d7;   --peach-ink:  #8a4a26;   --peach-frame:  #efc9ab;
  --sky:    #e4eaed;   --sky-ink:    #3c5260;   --sky-frame:    #c5d1d8;
  --lav:    #f0e6d2;   --lav-ink:    #6a5431;   --lav-frame:    #e0d0b0;
  --blush:  #f6e2db;   --blush-ink:  #8e3a2b;   --blush-frame:  #ebc4b8;
  --butter: #f6eed9;   --butter-ink: #6f5a1c;   --butter-frame: #e8d7a8;
  --clay:   #f3e8de;   --clay-ink:   #7e4b2c;   --clay-frame:   #e3cdba;
  --teal:   #e2ebe7;   --teal-ink:   #2f5c55;   --teal-frame:   #c0d6ce;

  --focus: #0071e3;         /* focus ring — ≥4.3:1 on white and every tint */

  --ok: #248a3d;
  --warn: #8a4a26;
  --danger: #c1231b;

  /* ---- geometry ---- */
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --pill: 980px;
  --btn-radius: 14px;       /* rounded rectangles, as on alan.com — pills are for tags */

  /* ---- elevation: one faint shadow, depth comes from tone ---- */
  --shadow-sm: 0 1px 2px rgba(37,40,32,.05);
  --shadow: 0 1px 4px rgba(37,40,32,.06), 0 8px 24px rgba(37,40,32,.06);
  --shadow-lg: 0 1px 4px rgba(37,40,32,.06), 0 18px 48px rgba(37,40,32,.10);
  --shadow-chip: 0 1px 3px rgba(37,40,32,.08), 0 10px 28px rgba(37,40,32,.10);

  /* ---- motion ---- */
  --ease: cubic-bezier(.28,.11,.32,1);

  --maxw: 1200px;
  --maxw-text: 760px;
  --nav-h: 68px;
}

/* ---- type stack: Alan Sans (alan.com's typeface, SIL OFL 1.1, self-hosted) on every device ---- */
:root {
  --sans: 'Alan Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', 'IBM Plex Mono', Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans);
  font-size: 17px; line-height: 1.5; letter-spacing: 0;
  font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  overflow-wrap: break-word;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img, svg, canvas { display: block; max-width: 100%; }
::selection { background: var(--brand-deep); color: #fff; }

.mono { font-family: var(--mono); letter-spacing: 0; }
.nw { white-space: nowrap; }
.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; }

/* .serif is a legacy markup hook: renders as the display sans */
.serif,
.display,
.h-sec {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.05;
  font-style: normal;
}
.serif em, .display em, .h-sec em { font-style: normal; color: inherit; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.container-wide { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 700px){ .container, .container-wide { padding: 0 20px; } }

/* CJK tuning when 中文 is active */
html[lang^='zh'] body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', var(--sans); letter-spacing: 0; }
html[lang^='zh'] .serif,
html[lang^='zh'] .display,
html[lang^='zh'] .h-sec,
html[lang^='zh'] .h2,
html[lang^='zh'] .stat-n,
html[lang^='zh'] .tile .n { letter-spacing: 0; font-weight: 600; line-height: 1.16; }
html[lang^='zh'] .display, html[lang^='zh'] .h-sec, html[lang^='zh'] .h2 { line-break: strict; }

/* ----------------------------------------------------------------
   NAV + MEGA MENU — opaque white bar, audience-first
   ---------------------------------------------------------------- */
.nav { position: sticky; top: 0; z-index: 200; }
.nav-bar {
  background: rgba(250,247,240,.94);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color .3s var(--ease);
}
.nav.scrolled .nav-bar { border-bottom-color: var(--line-2); }
.nav-row { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); gap: 20px; }
.brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.brand img { height: 28px; width: auto; }

.nav-links { display: flex; align-items: stretch; gap: 2px; height: 100%; }
.nav-item { position: relative; display: flex; align-items: center; --np: 12px; --ng: 5px; }
/* n° 78: the section link (.nav-trigger) and its menu button (.nav-caret) share one pill (.nav-head), drawn exactly
   like the former single trigger: --np | label | --ng | 10px caret | --np. The compact bands below only change --np / --ng. */
.nav-head {
  display: inline-flex; align-items: stretch; border-radius: 10px; color: var(--ink-2);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav-trigger {
  display: inline-flex; align-items: center; gap: 5px; padding: 8px 0 8px var(--np); border-radius: 10px 0 0 10px;
  font-size: 15px; font-weight: 500; letter-spacing: 0; color: inherit; white-space: nowrap;
}
.nav-caret {
  display: inline-flex; align-items: center; margin: 0; padding: 0 var(--np) 0 var(--ng); border: 0; border-radius: 0 10px 10px 0;
  background: none; color: inherit; line-height: 1; cursor: pointer;
}
.nav-trigger .caret, .nav-caret .caret { width: 10px; height: 10px; flex-shrink: 0; transition: transform .3s var(--ease); opacity: .55; }
.nav-item:hover .nav-head,
.nav-item:focus-within .nav-head,
.nav-item.is-open .nav-head { background: var(--bg-2); color: var(--ink); }
.nav-trigger.active, .nav-trigger.active + .nav-caret { color: var(--ink); }
.nav-trigger.active::after { content: ''; position: absolute; left: var(--np); right: var(--np); bottom: 8px; height: 2px; border-radius: 2px; background: var(--brand); }
.nav-item.is-open .nav-caret .caret { transform: rotate(180deg); }
@media (hover: hover){ .nav-item:hover .nav-caret .caret { transform: rotate(180deg); } }
.nav-item.is-dismissed .nav-caret .caret { transform: none; }
.nav-item.is-dismissed .nav-head { background: none; }

.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* mega panel */
.mega {
  position: absolute; top: calc(100% + 6px); left: 0; transform: translateY(6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  background: var(--panel);
  border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 20px; z-index: 210;
}
.mega--right { left: auto; right: 0; }
/* n° 78: a panel opens on hover (pointer devices only, so a tap on a touch screen follows the link), from its menu
   button (.is-open, set by site.js: click, Enter, Space, ArrowDown) or, when scripts are off, on keyboard focus.
   With scripts, focus alone never opens a panel: Tab goes link -> button -> next link instead of through ~40 links. */
.nav-item.is-open .mega,
html:not(.js) .nav-item:focus-within .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
@media (hover: hover){
  .nav-item:hover .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
}
.nav-item.is-dismissed .mega { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px); }
.mega::before { content:''; position: absolute; top: -14px; left: 0; right: 0; height: 16px; }
.mega-grid { display: grid; gap: 18px; }
.mega-col-title { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--mute); margin: 4px 0 8px 11px; }
.mega-link { display: flex; gap: 12px; align-items: flex-start; padding: 10px 11px; border-radius: 14px; transition: background .2s var(--ease); }
.mega-link:hover { background: var(--bg-2); }
.mega-link .mi {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--bg-2); color: var(--ink);
}
.mega-link b { display: block; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.mega-link small { display: block; font-size: 13px; color: var(--mute); margin-top: 2px; line-height: 1.35; letter-spacing: 0; }
.mega-link .ml-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mega-link .ml-head .phase { font-size: 11px; padding: 2px 8px; }
.mega-promo {
  border-radius: 16px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between;
  gap: 14px; color: var(--ink); background: var(--bg-2);
}
.mega-promo .mega-h { font-size: 18px; margin: 0 0 6px; font-weight: 600; letter-spacing: 0; line-height: 1.2; color: inherit; }
.mega-promo p { font-size: 14px; margin: 0; color: var(--ink-2); letter-spacing: 0; }

/* mobile nav */
.nav-burger { display: none; width: 44px; height: 44px; border-radius: 12px; background: none; border: 0; place-items: center; flex-shrink: 0; }
.nav-burger:hover { background: var(--bg-2); }
.mobile-nav { display: none; }
@media (max-width: 1080px){
  .nav-links, .nav-actions .desktop-only { display: none; }
  .nav-burger { display: grid; }
  .mobile-nav.open { display: block; }
  .mobile-nav { position: fixed; inset: var(--nav-h) 0 0; background: var(--bg); z-index: 190; overflow-y: auto; overscroll-behavior: contain; padding: 12px 20px 60px; }
  .mobile-nav a { display: block; padding: 13px 4px; font-size: 18px; font-weight: 500; letter-spacing: 0; border-bottom: 1px solid var(--line-2); }
  .mobile-nav a small { display: block; font-size: 13px; font-weight: 400; color: var(--mute); margin-top: 2px; letter-spacing: 0; }
  .mobile-nav .mgrp { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--mute); margin: 26px 0 2px; }
  .mobile-nav .mobile-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
  .mobile-nav .mobile-cta .btn { display: flex; width: 100%; border-bottom: 0; }
  .nav-row { gap: 10px; }
  .nav-actions { gap: 8px; }
  .nav-actions .lang button { min-width: 44px; min-height: 40px; padding: 0 10px; font-size: 14px; }
  .nav-actions .nav-cta { min-height: 44px; padding: 0 16px; font-size: 15px; }
}
@media (max-width: 400px){
  .nav .container-wide { padding: 0 14px; }
  .nav-row { gap: 6px; }
  .nav-actions { gap: 4px; }
  .nav-actions .lang button { padding: 0 8px; }
  .nav-actions .nav-cta { padding: 0 12px; font-size: 14px; }
}
@media (max-width: 440px){
  .brand img { height: 24px; }
  .nav-actions .nav-cta { display: none; }   /* the menu and the hero carry the CTA */
}

/* ----------------------------------------------------------------
   BUTTONS — rounded rectangles, 48px primary size (alan.com)
   ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: var(--btn-radius);
  font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 1.2;
  border: 1px solid transparent;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
  white-space: nowrap;
}
.btn-lg { min-height: 52px; padding: 14px 24px; font-size: 17px; letter-spacing: 0; }
.btn-sm { min-height: 34px; padding: 6px 12px; font-size: 13px; border-radius: 10px; }
.btn-primary, .btn-brand { background: var(--brand-deep); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover, .btn-brand:hover { background: var(--brand-ink); }
/* secondary: white, quiet border (alan.com secondary button) */
.btn-outline { background: #fff; border-color: var(--line); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-outline:hover { border-color: var(--brand); background: var(--brand-soft-2); }
.btn-ghost { color: var(--brand-deep); padding-left: 12px; padding-right: 12px; }
.btn-ghost:hover { background: var(--bg-2); }
.btn-light { background: var(--bg-2); color: var(--ink); }
.btn-light:hover { background: var(--bg-3); }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
@media (max-width: 520px){
  body .btn { white-space: normal; text-align: center; max-width: 100%; }
}

/* chevron text link */
.arrowlink {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 500;
  color: var(--brand-deep); font-size: 16px; letter-spacing: 0;
}
.arrowlink svg { transition: transform .3s var(--ease); }
.arrowlink:hover { text-decoration: underline; text-underline-offset: 3px; }
.arrowlink:hover svg { transform: translateX(3px); }

/* language toggle */
.lang { display: inline-flex; flex-shrink: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; padding: 2px; gap: 2px; }
.lang button { display: inline-flex; align-items: center; justify-content: center; padding: 5px 10px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); line-height: 1.2; border-radius: 9px; }
.lang button:hover { color: var(--ink); background: var(--bg-2); }
.lang button.on { background: var(--ink); color: #fff; }
.lang button:focus-visible { outline-offset: -2px; }

/* ----------------------------------------------------------------
   TYPE + SECTION SCAFFOLDING
   ---------------------------------------------------------------- */
.display {
  font-size: clamp(42px, 6vw, 78px);
  line-height: 1.06; letter-spacing: 0; font-weight: 500; margin: 0;
  text-wrap: balance;
}
.h-sec, .h2 {
  font-family: var(--sans);
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.1; letter-spacing: 0; font-weight: 500; margin: 0 0 18px;
  text-wrap: balance;
}
.h2 em, .h-sec em { font-style: normal; color: inherit; }
.h3 { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: 0; font-weight: 500; margin: 0 0 14px; text-wrap: balance; }
section { padding: 112px 0; }
@media (max-width: 700px){ section { padding: 72px 0; } }

/* eyebrow: plain coloured text, no chip */
.eyebrow, .kicker {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--brand-deep); background: none; border: 0; padding: 0;
  margin-bottom: 14px;
}
.eyebrow .dot, .kicker::before { display: none; }
.kicker-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 14px; }
.kicker-row .kicker, .kicker-row .eyebrow { margin-bottom: 0; }
.shead { max-width: var(--maxw-text); margin-bottom: 56px; }
.shead.center { margin-left: auto; margin-right: auto; text-align: center; }
.shead p { font-size: 20px; line-height: 1.45; letter-spacing: 0; color: var(--ink-2); margin: 0; }
.lede { font-size: 20px; line-height: 1.45; letter-spacing: 0; color: var(--ink-2); }
@media (max-width: 700px){ .shead p, .lede { font-size: 18px; } .shead { margin-bottom: 40px; } }

/* ----------------------------------------------------------------
   CARDS + GRID HELPERS
   ---------------------------------------------------------------- */
.grid2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.grid3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.grid4 { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
@media (max-width: 940px){ .grid3, .grid4 { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px){ .grid2, .grid3, .grid4 { grid-template-columns: 1fr; } }

.card {
  background: var(--bg-2); border: 0; border-radius: var(--radius-lg);
  padding: 30px;
  transition: background .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.card.hover:hover { background: var(--bg-3); }
.card .ci { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px; background: #fff; color: var(--ink); }
.card h3 { font-size: 21px; margin: 0 0 8px; font-weight: 600; letter-spacing: 0; line-height: 1.2; }
.card p { font-size: 15px; line-height: 1.47; letter-spacing: 0; color: var(--ink-2); margin: 0; }
.on-grey .card, .band-grey .card { background: #fff; }
.on-grey .card .ci, .band-grey .card .ci { background: var(--bg-2); }

/* tinted panels */
.tint { border-radius: var(--radius-xl); padding: 44px; }
.tint-mint { background: var(--mint); } .tint-peach { background: var(--peach); }
.tint-sky { background: var(--sky); } .tint-lav { background: var(--lav); }
.tint-blush { background: var(--blush); } .tint-brand { background: var(--brand-soft); }
.tint-butter { background: var(--butter); } .tint-teal { background: var(--teal); }
.tint-clay { background: var(--clay); }

/* tags */
.tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500;
  letter-spacing: 0; padding: 4px 11px; border-radius: var(--pill);
  background: var(--bg-2); color: var(--ink-2);
}
.band-grey .tag, .on-grey .tag { background: #fff; }
.tag.s { font-size: 11px; padding: 3px 9px; }

/* ----------------------------------------------------------------
   PHASE BADGE — every product says where it stands
   ---------------------------------------------------------------- */
.phase.phase--dev, .phase.phase--next, .phase.phase--roadmap, .phase.phase--preview {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  font-family: var(--sans); font-size: 12px; font-weight: 600; line-height: 1.25; letter-spacing: 0;
  padding: 3px 10px; margin: 0; border: 1px solid transparent; border-radius: var(--pill);
  white-space: nowrap; box-shadow: none; text-transform: none;
}
.phase.phase--dev::before, .phase.phase--next::before, .phase.phase--roadmap::before, .phase.phase--preview::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0;
}
.phase.phase--dev { background: var(--mint); color: var(--mint-ink); }
.phase.phase--next { background: var(--butter); color: #7a5a00; }
.phase.phase--roadmap { background: transparent; color: var(--ink-2); border-color: var(--line); border-style: dashed; }
.phase.phase--roadmap::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.phase.phase--preview { background: #fff; color: var(--sky-ink); box-shadow: var(--shadow-sm); }
/* a dev badge sitting on a mint surface needs its own contrast */
.tint-mint .phase.phase--dev, .stage--mint .phase.phase--dev, .tile--mint .phase.phase--dev { background: #fff; }
.tint-butter .phase.phase--next, .tile--butter .phase.phase--next { background: #fff; }

/* stat */
.stat-n { font-family: var(--sans); font-weight: 600; font-size: clamp(32px, 9.5vw, 56px); line-height: 1.04; letter-spacing: 0; }
.stat-n em { font-style: normal; color: var(--accent-text); }
.stat-l { font-size: 15px; line-height: 1.42; letter-spacing: 0; color: var(--ink-2); margin-top: 10px; }

/* ----------------------------------------------------------------
   BANDS — white / soft grey / soft sage. No black.
   ---------------------------------------------------------------- */
.band-grey { background: var(--bg-2); }
.band-sage { background: var(--brand-soft); }
/* legacy dark band: renders as a soft sage band with dark text */
.band-dark { background: var(--dark); color: var(--on-dark); }
.band-dark .kicker, .band-dark .eyebrow { color: var(--brand-deep); }
.band-dark .h-sec em, .band-dark .display em, .band-dark .h2 em { color: var(--accent-text); }
.band-dark .shead p, .band-dark .lede { color: var(--ink-2); }
.band-dark .card { background: #fff; }
.band-dark .card p { color: var(--ink-2); }
.band-dark .card .ci { background: var(--brand-soft); color: var(--brand-deep); }
.band-dark .tag { background: #fff; color: var(--ink-2); }
.band-dark .stat-n em { color: var(--accent-text); }
.band-dark .arrowlink { color: var(--brand-deep); }
.band-dark .phase.phase--dev { background: #fff; }

/* ----------------------------------------------------------------
   HERO (home + audience pages) — text left, product stage right
   ---------------------------------------------------------------- */
.hero2 { padding: 64px 0 40px; }
.hero2-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.08fr); gap: 56px; align-items: center; }
@media (max-width: 980px){ .hero2-grid { grid-template-columns: 1fr; gap: 40px; } }
.hero2 .display { margin: 0 0 22px; }
.hero2 .lede { max-width: 560px; margin: 0 0 30px; }
.hero-cta, .cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.reassure { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; letter-spacing: 0; color: var(--ink-2); }
.reassure li { display: inline-flex; align-items: center; gap: 7px; }
.reassure li::before, .checks li::before {
  content: ''; width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%;
  background: var(--mint) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233a6b41' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 8.2l2.3 2.3 4.7-4.9'/></svg>") center/12px no-repeat;
}
.checks { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px; font-size: 17px; letter-spacing: 0; color: var(--ink); }
.checks li { display: flex; align-items: flex-start; gap: 10px; }
.checks li::before { margin-top: 3px; }
.hero-phase { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }

/* ----------------------------------------------------------------
   STAGE — a pastel panel that holds framed product screens + chips
   ---------------------------------------------------------------- */
.stage {
  position: relative; border-radius: var(--radius-2xl); overflow: hidden;
  background: var(--brand-soft); min-height: 460px;
  isolation: isolate;
}
.stage--mint  { background: radial-gradient(120% 90% at 85% 10%, #f4f4ec 0%, var(--mint) 55%, #dddecb 100%); }
.stage--peach { background: radial-gradient(120% 90% at 85% 10%, #fcf2eb 0%, var(--peach) 55%, #f4d9c3 100%); }
.stage--sky   { background: radial-gradient(120% 90% at 85% 10%, #f2f4f6 0%, var(--sky) 55%, #d6dfe4 100%); }
.stage--lav   { background: radial-gradient(120% 90% at 85% 10%, #f8f2e8 0%, var(--lav) 55%, #e9dcc3 100%); }
.stage--butter{ background: radial-gradient(120% 90% at 85% 10%, #faf6ec 0%, var(--butter) 55%, #f0e4c3 100%); }
.stage--sage  { background: radial-gradient(120% 90% at 85% 10%, #f4f4ec 0%, var(--brand-soft) 55%, #dddecb 100%); }
.stage .stage-flag { position: absolute; top: 18px; left: 18px; z-index: 6; }
.stage-inner { position: absolute; inset: 0; }

/* device frames (colour = product family) */
.dev-window {
  position: absolute; background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 0 0 8px var(--frame, var(--mint-frame)), var(--shadow-lg);
  display: flex; flex-direction: column;
}
.dev-window .wbar { height: 30px; flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid var(--line-2); background: #fbf9f4; font-size: 11px; color: var(--mute); letter-spacing: 0; }
.dev-window .wbar i { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-3); display: inline-block; }
.dev-window .wbar span { margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev-phone {
  position: absolute; aspect-ratio: 9 / 19; border-radius: 40px; padding: 9px;
  background: var(--frame, var(--peach-frame));
  box-shadow: var(--shadow-lg);
}
.dev-phone .scr { position: relative; width: 100%; height: 100%; border-radius: 31px; overflow: hidden; background: #fff; display: flex; flex-direction: column; letter-spacing: 0; }
.dev-phone .notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 34%; height: 15px; border-radius: 0 0 10px 10px; background: var(--frame, var(--peach-frame)); z-index: 3; }
.f-mint   { --frame: var(--mint-frame); }
.f-peach  { --frame: var(--peach-frame); }
.f-sky    { --frame: var(--sky-frame); }
.f-lav    { --frame: var(--lav-frame); }
.f-butter { --frame: var(--butter-frame); }
.f-sage   { --frame: #cfd1b9; }

/* floating chip — a product event, stated in 3–6 words */
.chipf {
  position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 16px; padding: 11px 15px 11px 11px;
  box-shadow: var(--shadow-chip); font-size: 13px; line-height: 1.3; letter-spacing: 0; color: var(--ink);
  max-width: 290px;
}
.chipf .ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.chipf b { display: block; font-weight: 600; }
.chipf small { display: block; color: var(--mute); font-size: 12px; }
.chipf .typing { display: inline-flex; gap: 3px; }
.chipf .typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--lav-ink); opacity: .35; display: inline-block; }
@media (prefers-reduced-motion: no-preference){
  html.js .stage .chipf { opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  html.js .stage.in .chipf, html.js .reveal.in .stage .chipf { opacity: 1; transform: none; }
  html.js .stage .chipf.d2 { transition-delay: .6s; }
  html.js .stage .chipf.d3 { transition-delay: 1.1s; }
  html.js .stage .chipf { animation: chip-failsafe .01s linear 4s forwards; }
  .chipf .typing i { animation: typing 1.2s var(--ease) 3; }
  .chipf .typing i:nth-child(2){ animation-delay: .15s; } .chipf .typing i:nth-child(3){ animation-delay: .3s; }
}
@keyframes chip-failsafe { to { opacity: 1; transform: none; } }
@keyframes typing { 0%,100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-2px); } }

/* ---- UI mock: clinic workspace (sample data) ---- */
.ui-clinic { flex: 1; display: flex; flex-direction: column; font-size: 11px; letter-spacing: 0; min-height: 0; }
.ui-clinic .mc-body { display: grid; grid-template-columns: 48px minmax(0,1fr) 168px; flex: 1; min-height: 0; }
.ui-clinic .mc-side { background: var(--bg-2); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 0; }
.ui-clinic .mc-side .i { width: 22px; height: 22px; border-radius: 7px; background: var(--bg-3); }
.ui-clinic .mc-side .i.on { background: var(--brand-deep); }
.ui-clinic .mc-main { padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ui-clinic .mc-kpis { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.ui-clinic .mc-kpi { background: var(--bg-2); border-radius: 10px; padding: 9px 10px; }
.ui-clinic .mc-kpi .l { font-size: 9.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-clinic .mc-kpi .v { font-weight: 600; font-size: 19px; line-height: 1; letter-spacing: 0; margin-top: 5px; }
.ui-clinic .mc-ai { background: var(--mint); border-radius: 10px; padding: 8px 10px; font-size: 10.5px; color: var(--mint-ink); display: flex; gap: 6px; align-items: center; }
.ui-clinic .mc-ai::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.ui-clinic .mc-table { background: var(--bg-2); border-radius: 10px; flex: 1; min-height: 0; overflow: hidden; }
.ui-clinic .mc-row { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 8px; padding: 8px 10px; align-items: center; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.ui-clinic .mc-row > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.ui-clinic .mc-row:last-child { border-bottom: 0; }
.ui-clinic .av { width: 22px; height: 22px; border-radius: 50%; display: inline-block; }
.ui-clinic .mc-right { background: var(--bg-2); padding: 14px 12px; display: flex; flex-direction: column; gap: 9px; border-left: 1px solid var(--line-2); }
.ui-clinic .mc-chip { font-size: 9.5px; padding: 3px 8px; border-radius: var(--pill); background: #fff; color: var(--ink-2); }
.ui-clinic .mc-chip.w { background: var(--peach); color: var(--peach-ink); }
.ui-clinic .mc-btn { background: var(--brand-deep); color: #fff; text-align: center; padding: 7px; border-radius: 9px; font-size: 10.5px; margin-top: auto; }

/* ---- UI mock: AI scribe (transcript → SOAP draft) ---- */
.ui-scribe { flex: 1; display: grid; grid-template-columns: minmax(0,0.95fr) minmax(0,1.05fr); min-height: 0; font-size: 11.5px; letter-spacing: 0; }
.ui-scribe .tr { background: var(--bg-2); padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ui-scribe .tr-h, .ui-scribe .soap-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--mute); margin-bottom: 2px; white-space: nowrap; }
.ui-scribe .rec { display: inline-flex; align-items: center; gap: 5px; color: var(--blush-ink); font-weight: 600; }
.ui-scribe .rec::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ui-scribe .bub { background: #fff; border-radius: 12px 12px 12px 3px; padding: 7px 9px; line-height: 1.4; box-shadow: var(--shadow-sm); }
.ui-scribe .bub.o { background: var(--lav); border-radius: 12px 12px 3px 12px; align-self: flex-end; }
.ui-scribe .bub small { display: block; font-size: 9.5px; color: var(--mute); margin-bottom: 1px; }
.ui-scribe .soap { padding: 14px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ui-scribe .sec { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 8px; align-items: start; }
.ui-scribe .sec .k { width: 20px; height: 20px; border-radius: 6px; background: var(--lav); color: var(--lav-ink); font-weight: 700; display: grid; place-items: center; font-size: 10.5px; }
.ui-scribe .sec p { margin: 0; line-height: 1.4; }
.ui-scribe .ph { display: block; height: 7px; border-radius: 4px; background: var(--bg-3); margin-top: 6px; }
.ui-scribe .ph.s { width: 62%; }
.ui-scribe .rev { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.ui-scribe .rev .st { font-size: 10.5px; color: var(--butter-ink); background: var(--butter); padding: 3px 8px; border-radius: var(--pill); white-space: nowrap; }
.ui-scribe .rev .go { background: var(--brand-deep); color: #fff; padding: 6px 10px; border-radius: 9px; font-size: 10.5px; white-space: nowrap; }

/* ---- UI mock: owner app home (phone) ---- */
.ui-owner .phh { padding: 30px 15px 10px; }
.ui-owner .g { font-size: 10px; color: var(--mute); }
.ui-owner .nm { font-weight: 600; font-size: 19px; line-height: 1.05; letter-spacing: 0; margin-top: 2px; }
.ui-owner .phcard { margin: 0 11px 10px; padding: 13px; border-radius: 16px; background: var(--butter); }
.ui-owner .pn { font-weight: 600; font-size: 22px; line-height: 1; letter-spacing: 0; }
.ui-owner .pb { font-size: 9.5px; color: var(--butter-ink); margin-top: 3px; }
.ui-owner .vr { display: flex; gap: 6px; margin-top: 11px; }
.ui-owner .v { background: rgba(255,255,255,.7); border-radius: 9px; padding: 6px; flex: 1; font-size: 8.5px; color: var(--butter-ink); white-space: nowrap; }
.ui-owner .v b { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.ui-owner .row { margin: 0 11px 8px; padding: 9px 10px; border-radius: 12px; background: var(--bg-2); font-size: 10px; display: flex; align-items: center; gap: 8px; }
.ui-owner .row .d { width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; }
.ui-owner .row b { display: block; font-size: 10.5px; font-weight: 600; }
.ui-owner .row small { color: var(--mute); font-size: 9px; }
.ui-owner .phai { margin: 0 11px 8px; padding: 9px 10px; border-radius: 12px; background: var(--mint); font-size: 9.5px; color: var(--mint-ink); }
.ui-owner .phtabs { margin-top: auto; border-top: 1px solid var(--line-2); padding: 8px 10px 14px; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; }
.ui-owner .phtabs .t { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 7.5px; color: var(--mute); }
.ui-owner .phtabs .t .d { width: 13px; height: 13px; border-radius: 4px; background: var(--bg-3); }
.ui-owner .phtabs .t.on { color: var(--ink); }
.ui-owner .phtabs .t.on .d { background: var(--brand-deep); }

/* ---- UI mock: consent sheet (phone) ---- */
.ui-consent { padding: 30px 14px 14px; display: flex; flex-direction: column; gap: 10px; height: 100%; font-size: 10.5px; }
.ui-consent .t { font-weight: 600; font-size: 16px; letter-spacing: 0; line-height: 1.15; }
.ui-consent .who { display: flex; align-items: center; gap: 8px; background: var(--bg-2); border-radius: 12px; padding: 8px 9px; }
.ui-consent .who .d { width: 24px; height: 24px; border-radius: 8px; background: var(--sky); flex-shrink: 0; }
.ui-consent .who b { display: block; font-size: 10.5px; }
.ui-consent .who small { color: var(--mute); font-size: 9px; }
.ui-consent .opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 2px; border-bottom: 1px solid var(--line-2); }
.ui-consent .sw { width: 26px; height: 15px; border-radius: 9px; background: var(--bg-3); position: relative; flex-shrink: 0; }
.ui-consent .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.ui-consent .sw.on { background: var(--brand-deep); }
.ui-consent .sw.on::after { left: 13px; }
.ui-consent .purpose { font-size: 9.5px; color: var(--mute); }
.ui-consent .ok { margin-top: auto; background: var(--brand-deep); color: #fff; text-align: center; padding: 8px; border-radius: 11px; font-weight: 600; }
.ui-consent .fine { text-align: center; font-size: 8.5px; color: var(--mute); }

/* ---- UI mock: owner assistant chat (phone) ---- */
.ui-chat { padding: 30px 12px 12px; display: flex; flex-direction: column; gap: 8px; height: 100%; font-size: 10.5px; line-height: 1.4; }
.ui-chat .h { font-weight: 600; font-size: 13px; letter-spacing: 0; display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.ui-chat .h .d { width: 18px; height: 18px; border-radius: 6px; background: var(--peach); }
.ui-chat .me { align-self: flex-end; background: var(--peach); border-radius: 12px 12px 3px 12px; padding: 7px 9px; max-width: 86%; }
.ui-chat .ai { align-self: flex-start; background: var(--bg-2); border-radius: 12px 12px 12px 3px; padding: 7px 9px; max-width: 90%; }
.ui-chat .ai ul { margin: 4px 0 0; padding-left: 13px; }
.ui-chat .vet { align-self: flex-start; font-size: 9.5px; color: var(--mint-ink); background: var(--mint); border-radius: 9px; padding: 5px 8px; }
.ui-chat .inp { margin-top: auto; border: 1px solid var(--line); border-radius: 12px; padding: 7px 9px; color: var(--mute); }

/* ---- UI mock: partner data request (card) ---- */
.ui-req { position: absolute; background: #fff; border-radius: 18px; box-shadow: 0 0 0 8px var(--frame, var(--sky-frame)), var(--shadow-lg); padding: 16px; font-size: 12px; letter-spacing: 0; display: flex; flex-direction: column; gap: 10px; }
.ui-req .rh { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--mute); white-space: nowrap; }
.ui-req .rt { font-size: 15px; font-weight: 600; letter-spacing: 0; line-height: 1.25; }
.ui-req dl { margin: 0; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 7px 12px; }
.ui-req dt { color: var(--mute); }
.ui-req dd { margin: 0; font-weight: 500; }
.ui-req .ok { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: var(--mint); color: var(--mint-ink); padding: 4px 10px; border-radius: var(--pill); font-weight: 600; font-size: 11px; }
.ui-req .ok::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ui-req .scope { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-req .scope span { background: var(--bg-2); border-radius: var(--pill); padding: 3px 9px; font-size: 11px; }
.ui-req .scope span.no { text-decoration: line-through; color: var(--mute); }

/* ----------------------------------------------------------------
   STAT TILES — alan.com proof bar, notion-style pastel bento
   ---------------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
@media (max-width: 980px){ .tiles { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.tile { border-radius: var(--radius-lg); padding: 26px 24px 24px; background: var(--bg-2); display: flex; flex-direction: column; gap: 10px; min-height: 196px; }
.tile .n { font-weight: 600; font-size: clamp(40px, 4.4vw, 58px); line-height: 1; letter-spacing: 0; white-space: nowrap; }
html[lang^='zh'] .tile .n { font-size: clamp(32px, 3.2vw, 44px); }
.tile .l { font-size: 15px; line-height: 1.42; letter-spacing: 0; color: var(--ink); margin-top: auto; }
.tile .l span { color: var(--ink-2); }
.tile--mint { background: var(--mint); } .tile--mint .n { color: var(--mint-ink); }
.tile--peach { background: var(--peach); } .tile--peach .n { color: var(--peach-ink); }
.tile--sky { background: var(--sky); } .tile--sky .n { color: var(--sky-ink); }
.tile--lav { background: var(--lav); } .tile--lav .n { color: var(--lav-ink); }
.tile--butter { background: var(--butter); } .tile--butter .n { color: var(--butter-ink); }
@media (max-width: 600px){
  .tiles { gap: 10px; }
  .tile { padding: 20px 18px 18px; min-height: 172px; border-radius: 20px; }
  .tile .n, html[lang^='zh'] .tile .n { font-size: 34px; }
  .tile .l { font-size: 14px; }
}
@media (max-width: 420px){
  /* "3126 亿元" is wider than a two-column tile: let the unit drop to a second line */
  html[lang^='zh'] .tile .n { font-size: 32px; white-space: normal; }
}
@media (max-width: 359px){
  .tiles { grid-template-columns: minmax(0,1fr); }
  .tile { min-height: 0; }
  .tile .l { margin-top: 14px; }
}
.src-note { font-size: 12.5px; line-height: 1.5; letter-spacing: 0; color: var(--mute); margin: 18px 0 0; }

/* ----------------------------------------------------------------
   MANIFESTO — one centred idea (alan.com "La santé ne se répare pas")
   ---------------------------------------------------------------- */
.manifesto { text-align: center; }
.manifesto .h2 { max-width: 900px; margin-left: auto; margin-right: auto; }
.manifesto p.lede { max-width: 680px; margin: 0 auto; }
/* a pile of paper records that becomes one record (notion "pile") */
.pile-row { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 28px; max-width: 860px; margin: 56px auto 0; }
@media (max-width: 720px){ .pile-row { grid-template-columns: 1fr; gap: 18px; justify-items: center; } .pile-row .arrow { transform: rotate(90deg); } }
.pile { position: relative; height: 230px; width: 100%; max-width: 340px; justify-self: end; }
@media (max-width: 720px){ .pile { justify-self: center; } }
.paper { position: absolute; width: 168px; padding: 14px; border-radius: 12px; background: #fff; box-shadow: var(--shadow); font-size: 11px; color: var(--ink-2); text-align: left; letter-spacing: 0; }
.paper b { display: block; font-size: 12px; color: var(--ink); margin-bottom: 8px; }
.paper i { display: block; height: 6px; border-radius: 3px; background: var(--bg-3); margin-top: 7px; }
.paper i.s { width: 60%; }
.paper.p1 { left: 4%; top: 22px; transform: rotate(-8deg); background: #fffdf6; }
.paper.p2 { left: 30%; top: 4px; transform: rotate(5deg); }
.paper.p3 { left: 16%; top: 76px; transform: rotate(-2deg); background: #fbfaf7; }
.pile-row .arrow { width: 54px; height: 54px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--brand-deep); box-shadow: var(--shadow); }
.record { justify-self: start; width: 100%; max-width: 320px; background: #fff; border-radius: 20px; box-shadow: 0 0 0 8px var(--mint-frame), var(--shadow-lg); padding: 18px; text-align: left; font-size: 12px; letter-spacing: 0; }
@media (max-width: 720px){ .record { justify-self: center; } }
.record .rh { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.record .rh .d { width: 36px; height: 36px; border-radius: 12px; background: var(--butter); }
.record .rh b { display: block; font-size: 15px; letter-spacing: 0; }
.record .rh small { color: var(--mute); }
.record .ev { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line-2); }
.record .ev i { width: 8px; height: 8px; border-radius: 50%; }
.record .ev span:last-child { color: var(--mute); font-size: 11px; white-space: nowrap; }

/* ----------------------------------------------------------------
   CHAPTER — one product, one idea (alan.com benefit block / chapter)
   ---------------------------------------------------------------- */
.chapter { display: grid; grid-template-columns: minmax(0,0.92fr) minmax(0,1.08fr); gap: 64px; align-items: center; }
.chapter + .chapter { margin-top: 112px; }
.chapter.rev > .chapter-text { order: 2; }
@media (max-width: 980px){ .chapter { grid-template-columns: 1fr; gap: 36px; } .chapter.rev > .chapter-text { order: 0; } .chapter + .chapter { margin-top: 80px; } }
.chapter-text p.body { font-size: 18px; line-height: 1.5; letter-spacing: 0; color: var(--ink-2); margin: 0 0 26px; max-width: 520px; }
.chapter .stage { min-height: 500px; }
@media (max-width: 600px){ .chapter .stage { min-height: 440px; } }
.statline { display: flex; align-items: flex-start; gap: 16px; padding: 18px 0 18px; margin: 0 0 26px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); max-width: 520px; }
.statline .n { font-weight: 600; font-size: 44px; line-height: 1; letter-spacing: 0; color: var(--brand-deep); white-space: nowrap; }
.statline .c { font-size: 15px; line-height: 1.42; color: var(--ink-2); padding-top: 3px; }
.mini-list { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--ink-2); max-width: 520px; }
.mini-list li { display: flex; gap: 10px; align-items: flex-start; }
.mini-list li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); margin-top: 8px; flex-shrink: 0; }
.chapter-links { display: flex; gap: 12px 22px; flex-wrap: wrap; align-items: center; }

/* audience band header (alan.com "Pour les entreprises") */
.aud-head { display: flex; align-items: center; gap: 12px; margin-bottom: 64px; }
.aud-head .dot { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
.aud-head .t { font-size: 15px; font-weight: 600; letter-spacing: 0; }
.aud-head .t small { display: block; font-weight: 400; color: var(--mute); font-size: 14px; }

/* ----------------------------------------------------------------
   ICON CARDS — four short promises (alan.com coin / shield / zap / heart)
   ---------------------------------------------------------------- */
.icards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-top: 56px; }
@media (max-width: 980px){ .icards { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 520px){ .icards { grid-template-columns: 1fr; } }
.icard { background: var(--bg-2); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.band-grey .icard { background: #fff; }
.icard .ii { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 8px; }
.icard h3 { font-size: 17px; font-weight: 600; letter-spacing: 0; margin: 0; line-height: 1.25; }
.icard p { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); margin: 0; }
.icard .phase { align-self: flex-start; margin-top: auto !important; }

/* ----------------------------------------------------------------
   BENTO — notion-style grid of tinted cards
   ---------------------------------------------------------------- */
.bento { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
@media (max-width: 940px){ .bento { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px){ .bento { grid-template-columns: 1fr; } }
.bcard { border-radius: var(--radius-lg); padding: 26px; background: var(--bg-2); display: flex; flex-direction: column; gap: 10px; min-height: 210px; }
.bcard.wide { grid-column: span 2; }
@media (max-width: 600px){ .bcard.wide { grid-column: auto; } }
.bcard .bi { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.75); display: grid; place-items: center; }
.bcard h3 { font-size: 20px; font-weight: 600; letter-spacing: 0; margin: 6px 0 0; line-height: 1.2; }
.bcard p { font-size: 15px; line-height: 1.47; color: var(--ink-2); margin: 0; }
.bcard .phase { align-self: flex-start; }
.bcard .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bcard--mint { background: var(--mint); } .bcard--lav { background: var(--lav); } .bcard--peach { background: var(--peach); }
.bcard--sky { background: var(--sky); } .bcard--butter { background: var(--butter); } .bcard--teal { background: var(--teal); }
.bcard--blush { background: var(--blush); } .bcard--clay { background: var(--clay); }
.bcard--mint .phase.phase--dev, .bcard--butter .phase.phase--next { background: #fff; }
.bcard--line { background: #fff; border: 1px dashed var(--line); }

/* ----------------------------------------------------------------
   TRUST — big promise + posture tiles
   ---------------------------------------------------------------- */
.promise { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: start; }
@media (max-width: 900px){ .promise { grid-template-columns: 1fr; gap: 28px; } }
.promise-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.promise-list li { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); }
.promise-list li:last-child { border-bottom: 1px solid var(--line); }
.promise-list .pi { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--brand-deep); }
.promise-list b { display: block; font-size: 18px; letter-spacing: 0; margin-bottom: 3px; }
.promise-list span { font-size: 15px; color: var(--ink-2); line-height: 1.45; }
.posture { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-top: 56px; }
@media (max-width: 900px){ .posture { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 480px){ .posture { grid-template-columns: 1fr; } }
.badge { border: 0; border-radius: var(--radius-lg); padding: 24px; background: #fff; }
.badge .bi { width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); display: grid; place-items: center; color: var(--brand-deep); margin-bottom: 16px; }
.badge h3 { font-size: 18px; margin: 0 0 6px; font-weight: 600; letter-spacing: 0; line-height: 1.2; }
.badge p { font-size: 14.5px; line-height: 1.45; letter-spacing: 0; color: var(--ink-2); margin: 0; }

/* ----------------------------------------------------------------
   PROGRAMME — the design-partner offer, in place of logos
   ---------------------------------------------------------------- */
.program { border-radius: var(--radius-2xl); background: #fff; box-shadow: var(--shadow); padding: 48px; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1.9fr); gap: 48px; }
@media (max-width: 940px){ .program { grid-template-columns: 1fr; padding: 32px; gap: 30px; } }
@media (max-width: 480px){ .program { padding: 24px; } }
.program .h2 { font-size: clamp(30px, 3.6vw, 44px); }
.program-cols { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
@media (max-width: 760px){ .program-cols { grid-template-columns: 1fr; } }
.pcol { border-radius: var(--radius-lg); padding: 22px; }
.pcol h3 { font-size: 15px; font-weight: 600; letter-spacing: 0; margin: 0 0 12px; }
.pcol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.42; letter-spacing: 0; }
.pcol li { display: flex; gap: 9px; align-items: flex-start; }
.pcol li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; margin-top: 8px; flex-shrink: 0; }

/* ----------------------------------------------------------------
   STEPS — three numbered steps
   ---------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; counter-reset: step; }
@media (max-width: 860px){ .steps { grid-template-columns: 1fr; } }
.step { border-radius: var(--radius-lg); background: var(--bg-2); padding: 26px; position: relative; }
.band-grey .step { background: #fff; }
.step .num { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-deep); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 15px; margin-bottom: 16px; }
.step h3 { font-size: 19px; font-weight: 600; letter-spacing: 0; margin: 0 0 6px; line-height: 1.25; }
.step p { font-size: 15px; line-height: 1.45; color: var(--ink-2); margin: 0; }

/* ----------------------------------------------------------------
   FAQ — objections in the buyer's own words
   ---------------------------------------------------------------- */
.faq-wrap { display: grid; grid-template-columns: minmax(0,0.8fr) minmax(0,1.2fr); gap: 56px; align-items: start; }
@media (max-width: 900px){ .faq-wrap { grid-template-columns: 1fr; gap: 24px; } }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 4px; font-size: 18px; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--bg-2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231d1d1f' stroke-width='1.8' stroke-linecap='round'><path d='M8 3.5v9M3.5 8h9'/></svg>") center/13px no-repeat; transition: transform .25s var(--ease), background-color .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--brand-soft); }
.faq summary:hover { color: var(--brand-deep); }
.faq .a { padding: 0 52px 22px 4px; font-size: 16px; line-height: 1.55; color: var(--ink-2); letter-spacing: 0; }
.faq .a p { margin: 0; }

/* ----------------------------------------------------------------
   FINAL CTA — one big pastel card (no black band)
   ---------------------------------------------------------------- */
.final { padding: 32px 0 112px; }
@media (max-width: 700px){ .final { padding: 16px 0 72px; } }
.final-card {
  position: relative; overflow: hidden; border-radius: var(--radius-2xl); text-align: center;
  padding: 96px 32px; isolation: isolate;
  background: radial-gradient(90% 120% at 15% 0%, #f4f4ec 0%, var(--mint) 45%, #dddecb 100%);
}
@media (max-width: 700px){ .final-card { padding: 64px 22px; border-radius: 28px; } }
.final-card .h2 { font-size: clamp(36px, 5.6vw, 68px); max-width: 860px; margin: 0 auto 18px; }
.final-card p { font-size: 20px; line-height: 1.45; letter-spacing: 0; color: var(--ink-2); max-width: 560px; margin: 0 auto 32px; text-wrap: balance; }
.final-card .cta-row { justify-content: center; }
.final-card .note { font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: 560px; margin: 24px auto 0; }
.final-card .note a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.final-card .chipf { position: absolute; }
.final-card .deco-l { left: 4%; top: 18%; transform: rotate(-4deg); }
.final-card .deco-r { right: 4%; bottom: 16%; transform: rotate(3deg); }
@media (max-width: 1100px){ .final-card .chipf { display: none; } }
/* legacy .cta band on older pages now renders like the final card */
.cta { text-align: center; }

/* ----------------------------------------------------------------
   PAGE HERO — simple pages (why, platform, resources, about)
   ---------------------------------------------------------------- */
.page-hero { padding: 72px 0 24px; }
@media (max-width: 700px){ .page-hero { padding: 48px 0 12px; } }

/* ----------------------------------------------------------------
   TEAM
   ---------------------------------------------------------------- */
.team { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
@media (max-width: 860px){ .team { grid-template-columns: 1fr; } }
.mem { background: var(--bg-2); border-radius: var(--radius-lg); padding: 26px; }
.band-grey .mem { background: #fff; }
.mem .av { width: 72px; height: 72px; border-radius: 50%; margin-bottom: 16px; display: grid; place-items: center; font-size: 22px; font-weight: 600; letter-spacing: 0; }
.mem h3 { font-size: 19px; margin: 0 0 3px; font-weight: 600; letter-spacing: 0; }
.mem .t { font-size: 15px; letter-spacing: 0; color: var(--mute); margin-bottom: 8px; }
.mem p { font-size: 15px; line-height: 1.45; letter-spacing: 0; color: var(--ink-2); margin: 0; }

/* ----------------------------------------------------------------
   FOOTER — alan.com-style columns on a soft grey band
   ---------------------------------------------------------------- */
.site-footer {
  padding: 64px 0 36px; background: var(--bg-2);
  font-size: 14px; line-height: 1.45; letter-spacing: 0; color: var(--ink-2);
}
.foot-grid { display: grid; grid-template-columns: minmax(0,1.6fr) repeat(5,minmax(0,1fr)); gap: 28px; margin-bottom: 40px; }
@media (max-width: 1080px){ .foot-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px 24px; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 560px){ .foot-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.site-footer .brand { margin-bottom: 14px; }
.site-footer .foot-tag { max-width: 340px; margin: 0 0 18px; color: var(--ink-2); text-wrap: balance; }
.site-footer .foot-tag .nw { white-space: nowrap; }
.site-footer .foot-contact { display: flex; flex-direction: column; gap: 4px; }
.site-footer .foot-contact a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.site-footer h5,
.site-footer .foot-h { font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: 1.3; text-transform: none; color: var(--ink); margin: 0 0 10px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.site-footer ul a { display: inline-block; padding: 4px 0; color: var(--ink-2); }
.site-footer ul a:hover { color: var(--ink); text-decoration: underline; }
.site-footer .foot-a11y { margin: 0 0 16px; color: var(--ink-2); }
.site-footer .foot-a11y a,
.site-footer .foot-bottom a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.foot-bottom {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding-top: 20px; border-top: 1px solid var(--line); color: var(--mute); font-size: 13px;
}

/* ----------------------------------------------------------------
   REVEAL — slow, soft rise. Content is visible without JS.
   ---------------------------------------------------------------- */
html.js .reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  animation: reveal-failsafe .01s linear 4s forwards;
}
html.js .reveal.in { opacity: 1; transform: none; }
@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }
.reveal[data-d="1"]{ transition-delay: .08s; } .reveal[data-d="2"]{ transition-delay: .16s; }
.reveal[data-d="3"]{ transition-delay: .24s; } .reveal[data-d="4"]{ transition-delay: .32s; }
@media (prefers-reduced-motion: reduce){
  html.js .reveal, .reveal { opacity: 1; transform: none; transition: none; animation: none; }
  html.js .stage .chipf { opacity: 1; transform: none; transition: none; animation: none; }
}

/* ----------------------------------------------------------------
   FOCUS + SKIP LINK
   ---------------------------------------------------------------- */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.skip-link {
  position: absolute; left: 12px; top: 10px; z-index: 1000;
  padding: 12px 18px; border-radius: 12px;
  background: var(--ink); color: #fff; font-size: 15px; font-weight: 500; letter-spacing: 0;
  transform: translateY(-160%); transition: transform .2s var(--ease);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){ .skip-link { transition: none; } }
main:focus { outline: none; }
[id] { scroll-margin-top: 84px; }

/* copy-link toast (owners page "Tell your vet") */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 400; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 14px; font-size: 15px; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ----------------------------------------------------------------
   STAGE LAYOUTS — where frames and chips sit, per composition
   ---------------------------------------------------------------- */
/* hero: scribe window + owner phone */
.lay-hero { min-height: 580px; }
.lay-hero .dev-window { left: 4%; top: 14%; width: 69%; height: 56%; }
.lay-hero .dev-phone { right: 4%; top: 38%; height: 58%; }
.lay-hero .chipf.a { right: 5%; top: 5.5%; }
.lay-hero .chipf.b { left: 4%; bottom: 7%; }
@media (max-width: 1180px) and (min-width: 981px){
  .lay-hero .ui-scribe { grid-template-columns: minmax(0,1fr); }
  .lay-hero .ui-scribe .tr { display: none; }
}
@media (max-width: 600px){
  .lay-hero { min-height: 520px; }
  .lay-hero .dev-window { left: 5%; top: 15%; width: 90%; height: 48%; }
  .lay-hero .ui-scribe { grid-template-columns: minmax(0,1fr); }
  .lay-hero .ui-scribe .tr { display: none; }
  .lay-hero .dev-phone { right: 6%; top: auto; bottom: -16%; height: 58%; }
  .lay-hero .chipf { display: none; }
}

/* scribe chapter: one wide window */
.lay-scribe .dev-window { left: 7%; top: 13%; width: 86%; height: 62%; }
.lay-scribe .chipf.a { right: 6%; bottom: 6%; }
.lay-scribe .chipf.b { left: 5%; bottom: 6%; }
@media (max-width: 600px){
  .lay-scribe .dev-window { left: 5%; top: 13%; width: 90%; height: 60%; }
  .lay-scribe .ui-scribe { grid-template-columns: minmax(0,1fr); }
  .lay-scribe .ui-scribe .soap { display: none; }
  .lay-scribe .chipf.a { display: none; }
  .lay-scribe .chipf.b { left: 5%; bottom: 5%; }
}

/* clinic workspace chapter */
.lay-clinic .dev-window { left: 6%; top: 13%; width: 88%; height: 64%; }
.lay-clinic .chipf.a { right: 5%; bottom: 6%; }
@media (max-width: 760px){
  .lay-clinic .ui-clinic .mc-body { grid-template-columns: 40px minmax(0,1fr); }
  .lay-clinic .ui-clinic .mc-right { display: none; }
}
@media (max-width: 600px){
  .lay-clinic .dev-window { left: 5%; top: 13%; width: 90%; height: 62%; }
  .lay-clinic .chipf.a { right: 4%; bottom: 5%; }
}

/* owner app chapter: phone + chips on its right */
.lay-owner .dev-phone { left: 14%; top: 9%; height: 82%; }
.lay-owner .chipf.a { right: 6%; top: 24%; }
.lay-owner .chipf.b { right: 9%; top: 50%; }
.lay-owner .chipf.c { right: 5%; top: 74%; }
@media (max-width: 600px){
  .lay-owner .dev-phone { left: 8%; top: 12%; height: 84%; }
  .lay-owner .chipf { max-width: 52%; }
  .lay-owner .chipf.a { right: 4%; top: 18%; }
  .lay-owner .chipf.b { right: 4%; top: 44%; }
  .lay-owner .chipf.c { display: none; }
}

/* consent / partner chapter: request card + consent phone */
.lay-partner .ui-req { left: 6%; top: 20%; width: 52%; }
.lay-partner .dev-phone { right: 6%; top: 9%; height: 82%; }
.lay-partner .chipf.a { left: 6%; bottom: 7%; }
@media (max-width: 760px){
  .lay-partner .ui-req { left: 5%; top: 14%; width: 64%; z-index: 4; }
  .lay-partner .dev-phone { right: 5%; top: 24%; height: 74%; }
  .lay-partner .chipf.a { left: 5%; bottom: 5%; max-width: 60%; }
}
@media (max-width: 600px){
  .stage.lay-partner, .chapter .stage.lay-partner { min-height: 390px; }
  .lay-partner .dev-phone { display: none; }
  .lay-partner .ui-req { left: 8%; top: 13%; width: 84%; }
  .lay-partner .chipf.a { left: auto; right: 6%; bottom: 5%; }
}

/* single phone, centred (owners page) */
.lay-phone .dev-phone { left: 50%; top: 8%; height: 84%; transform: translateX(-50%); }
.lay-phone .chipf.a { left: 5%; top: 22%; }
.lay-phone .chipf.b { right: 5%; top: 60%; }
@media (max-width: 600px){
  .lay-phone .chipf { max-width: 46%; }
  .lay-phone .dev-phone { left: auto; right: 7%; transform: none; }
  .lay-phone .chipf.a { left: 4%; top: auto; bottom: 7%; }
  .lay-phone .chipf.b { display: none; }
}

/* ----------------------------------------------------------------
   AUDIENCE PAGES (clinics / owners / partners) — alan.com segment pages
   ---------------------------------------------------------------- */
.tiles.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
@media (max-width: 980px){ .tiles.three { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 359px){ .tiles.three { grid-template-columns: minmax(0,1fr); } }
.steps-note { font-size: 15px; color: var(--ink-2); margin: 22px 0 0; letter-spacing: 0; }
.bcard .mini-list { margin: 8px 0 0; font-size: 14.5px; gap: 8px; }
.bcard .mini-list li::before { background: currentColor; opacity: .45; }
.bcard .mini-list .phase { margin-left: 4px; }
.faq-side p { font-size: 17px; line-height: 1.5; color: var(--ink-2); margin: 0 0 22px; letter-spacing: 0; }
.copy-url { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 14px; letter-spacing: 0; }
.copy-url code { font-family: inherit; background: rgba(255,255,255,.7); border-radius: 8px; padding: 2px 8px; }
.tell { border-radius: var(--radius-2xl); background: #fff; box-shadow: var(--shadow); padding: 48px; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); gap: 48px; align-items: center; }
@media (max-width: 900px){ .tell { grid-template-columns: 1fr; padding: 32px 24px; gap: 28px; } }
.tell .h2 { font-size: clamp(30px, 3.6vw, 44px); }
.tell p { font-size: 17px; line-height: 1.5; color: var(--ink-2); margin: 0 0 26px; letter-spacing: 0; }
.tell .pcol ul { color: var(--ink); }

/* ---- UI mock: API request / response (illustration only) ---- */
.ui-code { flex: 1; min-height: 0; padding: 14px 16px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; line-height: 1.7; color: var(--ink-2); overflow: hidden; display: flex; flex-direction: column; gap: 10px; letter-spacing: 0; }
.ui-code pre { margin: 0; font: inherit; white-space: pre; overflow: hidden; }
.ui-code .req { background: var(--bg-2); border-radius: 12px; padding: 10px 12px; }
.ui-code .m { color: var(--sky-ink); font-weight: 700; }
.ui-code .k { color: var(--lav-ink); }
.ui-code .s { color: var(--mint-ink); }
.ui-code .c { color: var(--mute); }
.ui-code .st { color: var(--mint-ink); font-weight: 700; }
.lay-api .dev-window { left: 6%; top: 13%; width: 88%; height: 66%; }
.lay-api .chipf.a { right: 5%; bottom: 6%; }
.lay-api .chipf.b { left: 5%; bottom: 6%; }
@media (max-width: 600px){
  .lay-api .dev-window { left: 5%; top: 13%; width: 90%; height: 64%; }
  .ui-code { font-size: 9.5px; padding: 12px; }
  .lay-api .chipf.b { display: none; }
}

/* hero stage on audience pages uses a chapter layout; give it hero height */
.hero2 .stage.lay-scribe, .hero2 .stage.lay-phone, .hero2 .stage.lay-partner { min-height: 540px; }
@media (max-width: 600px){
  .hero2 .stage.lay-scribe, .hero2 .stage.lay-phone { min-height: 460px; }
  .hero2 .stage.lay-partner { min-height: 390px; }
}
.ui-scribe.soap-only { grid-template-columns: minmax(0,1fr); }
@media (max-width: 600px){ .lay-scribe .ui-scribe.soap-only .soap { display: flex; } }
@media (max-width: 980px){ .tiles.three .tile:last-child:nth-child(odd) { grid-column: span 2; } }
@media (max-width: 359px){ .tiles.three .tile:last-child:nth-child(odd) { grid-column: auto; } }
.final-card .h2 em { color: inherit; font-style: normal; }

/* ================================================================
   WAVE C (2026-10-10) — photos, audience cards, forms, demo + sign-in
   Same palette, same fonts. What changes: real photos of dogs and cats
   in rounded pastel frames (alan.com), [2026-11-09: no more serif-italic
   accents in headlines], 1px-bordered cards where tone is not enough
   (notion). Everything below is additive; older rules are untouched.
   ================================================================ */

/* ---- headline <em> (2026-11-09): same typeface, weight and colour as the words around it, as on alan.com;
   the serif-italic accent of wave C is gone (Thomas: italics read as an AI-made page). ---- */
.display em, .h2 em, .h-sec em, .final-card .h2 em, .signin-h em, .demo-h em {
  font: inherit; color: inherit; letter-spacing: inherit;
}

/* ---- PHOTO — a real photo in a rounded frame; ratio set by modifier ---- */
.photo {
  position: relative; display: block; overflow: hidden; margin: 0;
  border-radius: var(--radius-2xl); background: var(--bg-2);
  isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(#fff, #000); /* Safari: clip children to the radius */
}
.photo img, .photo picture { display: block; width: 100%; height: 100%; }
.photo img { object-fit: cover; object-position: var(--focus-x, 50%) var(--focus-y, 50%); }
.photo--43 { aspect-ratio: 4 / 3; }
.photo--45 { aspect-ratio: 4 / 5; }
.photo--11 { aspect-ratio: 1 / 1; }
.photo--169 { aspect-ratio: 16 / 9; }
.photo--32 { aspect-ratio: 3 / 2; }
.photo-r-lg { border-radius: var(--radius-lg); }
.photo-r-xl { border-radius: var(--radius-xl); }
/* a pastel mat around the photo (alan.com portraits) */
.photo-mat { padding: 12px; border-radius: var(--radius-2xl); }
.photo-mat .photo { border-radius: calc(var(--radius-2xl) - 10px); }
.photo-mat--mint { background: var(--mint); } .photo-mat--peach { background: var(--peach); }
.photo-mat--sky { background: var(--sky); } .photo-mat--lav { background: var(--lav); }
.photo-mat--butter { background: var(--butter); } .photo-mat--blush { background: var(--blush); }
.photo-mat--sage { background: var(--brand-soft); } .photo-mat--teal { background: var(--teal); }
.photo-mat--clay { background: var(--clay); }
/* small caption under a photo (credit or context) */
.photo-cap { font-size: 12.5px; line-height: 1.45; letter-spacing: 0; color: var(--mute); margin: 10px 4px 0; }

/* ---- PHOTO STAGE — a photo that carries floating product chips (hero of audience pages) ---- */
.photo-stage { position: relative; isolation: isolate; }
.photo-stage .photo { border-radius: var(--radius-2xl); }
.photo-stage .chipf { position: absolute; }
.photo-stage .chipf.a { left: -4%; bottom: 12%; }
.photo-stage .chipf.b { right: -4%; top: 10%; }
.photo-stage .chipf.c { right: 6%; bottom: -5%; }
.photo-stage .stage-flag { position: absolute; top: 16px; left: 16px; z-index: 6; }
@media (prefers-reduced-motion: no-preference){
  html.js .photo-stage .chipf { opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  html.js .photo-stage.in .chipf, html.js .reveal.in .photo-stage .chipf, html.js .reveal.in.photo-stage .chipf { opacity: 1; transform: none; }
  html.js .photo-stage .chipf.d2 { transition-delay: .6s; }
  html.js .photo-stage .chipf.d3 { transition-delay: 1.1s; }
  html.js .photo-stage .chipf { animation: chip-failsafe .01s linear 4s forwards; }
}
@media (prefers-reduced-motion: reduce){ html.js .photo-stage .chipf { opacity: 1; transform: none; transition: none; animation: none; } }
@media (max-width: 980px){
  .photo-stage .chipf.a { left: 4%; bottom: 6%; }
  .photo-stage .chipf.b { right: 4%; top: 6%; }
  .photo-stage .chipf.c { display: none; }
}
@media (max-width: 600px){
  .photo-stage .chipf { max-width: 62%; font-size: 12px; }
  .photo-stage .chipf.b { display: none; }
}

/* ---- AUDIENCE CARDS — "who it's for", one photo card per audience (alan.com segment tiles) ---- */
.aud-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
@media (max-width: 900px){ .aud-cards { grid-template-columns: 1fr; gap: 14px; } }
.aud-card {
  display: flex; flex-direction: column; gap: 0; border-radius: var(--radius-xl); padding: 12px 12px 24px;
  background: var(--bg-2); color: var(--ink); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.aud-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.aud-card .photo { border-radius: calc(var(--radius-xl) - 6px); aspect-ratio: 4 / 5; }
@media (max-width: 900px){ .aud-card .photo { aspect-ratio: 16 / 10; } }
.aud-card .ac-body { padding: 22px 12px 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.aud-card .ac-kicker { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
.aud-card h3 { font-size: 24px; font-weight: 600; letter-spacing: 0; line-height: 1.15; margin: 0; }
.aud-card p { font-size: 15.5px; line-height: 1.45; letter-spacing: 0; color: var(--ink-2); margin: 0; }
.aud-card .arrowlink { margin-top: auto; padding-top: 14px; }
.aud-card--mint { background: var(--mint); } .aud-card--peach { background: var(--peach); }
.aud-card--sky { background: var(--sky); } .aud-card--lav { background: var(--lav); }
.aud-card--butter { background: var(--butter); } .aud-card--sage { background: var(--brand-soft); }

/* ---- PHOTO STRIP — three photos telling one story (why page: one record, a whole life) ---- */
.photo-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; align-items: end; }
@media (max-width: 700px){ .photo-strip { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; } }
.photo-strip figure { margin: 0; }
.photo-strip .photo { aspect-ratio: 4 / 5; border-radius: var(--radius-xl); }
.photo-strip figcaption { font-size: 14px; line-height: 1.4; letter-spacing: 0; color: var(--ink-2); margin: 12px 4px 0; }
.photo-strip figcaption b { display: block; color: var(--ink); font-weight: 600; }
@media (max-width: 700px){ .photo-strip figcaption { font-size: 12px; margin-top: 8px; } .photo-strip .photo { border-radius: 16px; } }

/* ---- SPLIT — text beside a photo (simple pages) ---- */
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: center; }
.split.rev > :first-child { order: 2; }
@media (max-width: 900px){ .split { grid-template-columns: 1fr; gap: 32px; } .split.rev > :first-child { order: 0; } }

/* ---- FINAL CARD with photo stickers (replaces the floating chips on wide screens) ---- */
.final-card .deco-photo { position: absolute; z-index: 1; width: 190px; border-radius: 22px; box-shadow: var(--shadow-lg); overflow: hidden; display: none; }
.final-card .deco-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.final-card .deco-photo.l { left: 4%; top: 14%; transform: rotate(-5deg); aspect-ratio: 4 / 5; }
.final-card .deco-photo.r { right: 4%; bottom: 12%; transform: rotate(4deg); aspect-ratio: 4 / 5; }
@media (min-width: 1101px){ .final-card .deco-photo { display: block; } }
.final-card > * { position: relative; z-index: 2; }
.final-card .deco-photo { z-index: 1; }

/* ---- 1px cards (notion): quiet border instead of a grey fill ---- */
.card--line, .bcard--line2 { background: #fff; border: 1px solid var(--line-2); }
.card--line:hover { border-color: var(--line); }

/* ================================================================
   FORMS — demo request, access request. Native controls, 48px tall.
   ================================================================ */
.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
@media (max-width: 560px){ .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label, .field > .lbl { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.field .opt { font-weight: 400; color: var(--mute); }
.field .hint { font-size: 13px; line-height: 1.4; letter-spacing: 0; color: var(--mute); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; margin: 0;
  font: inherit; font-size: 16px; line-height: 1.4; letter-spacing: 0; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 12px; appearance: none; -webkit-appearance: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23636368' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5L6 7.5L9 4.5'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
}
.field input::placeholder, .field textarea::placeholder { color: #6b6e5c; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #bcb9a6; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand-deep); box-shadow: 0 0 0 4px rgba(62,76,58,.16); outline: none; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--danger); }
.field .err { display: none; font-size: 13px; color: var(--danger); letter-spacing: 0; }
.field.is-invalid .err { display: block; }

/* segmented choice (radio cards) */
.seg-ctl { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
@media (max-width: 560px){ .seg-ctl { grid-template-columns: 1fr; } }
.seg-ctl label { position: relative; display: block; cursor: pointer; }
.seg-ctl input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.seg-ctl span {
  display: flex; flex-direction: column; gap: 2px; min-height: 48px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 1.3; color: var(--ink);
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.seg-ctl span small { font-size: 12.5px; font-weight: 400; color: var(--mute); }
.seg-ctl label:hover span { border-color: #bcb9a6; }
.seg-ctl input:checked + span { border-color: var(--brand-deep); background: var(--brand-soft-2); box-shadow: inset 0 0 0 1px var(--brand-deep); }
.seg-ctl input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 4px; }
.form-actions .btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.form-foot { font-size: 13.5px; line-height: 1.5; letter-spacing: 0; color: var(--mute); margin: 0; }
.form-foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* honeypot */

/* result panels (hidden until the script shows one) */
.form-panel { display: none; border-radius: var(--radius-xl); padding: 32px; }
.form-panel.on { display: block; }
.form-panel--ok { background: var(--mint); }
.form-panel--fallback { background: var(--butter); }
.form-panel .pi { width: 44px; height: 44px; border-radius: 14px; background: #fff; display: grid; place-items: center; margin-bottom: 18px; }
.form-panel h2, .form-panel h3 { font-size: 24px; font-weight: 600; letter-spacing: 0; line-height: 1.15; margin: 0 0 10px; }
.form-panel p { font-size: 16px; line-height: 1.5; letter-spacing: 0; color: var(--ink-2); margin: 0 0 18px; }
.form-panel .cta-row { margin-top: 6px; }
.form-panel .addr { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 15px; }
.form-panel .addr code { font-family: inherit; background: rgba(255,255,255,.75); border-radius: 8px; padding: 4px 10px; letter-spacing: 0; }
.form-panel .summary { background: rgba(255,255,255,.7); border-radius: 14px; padding: 14px 16px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; margin: 0 0 18px; color: var(--ink); }
.form-card.is-done form { display: none; }

/* ---- DEMO + SIGN-IN page layouts ---- */
.form-sec { padding: 56px 0 112px; }
@media (max-width: 700px){ .form-sec { padding: 36px 0 72px; } }
.form-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr); gap: 56px; align-items: start; }
@media (max-width: 980px){ .form-grid { grid-template-columns: 1fr; gap: 40px; } }
.form-intro { margin-bottom: 36px; }
.form-intro .display, .demo-h, .signin-h { font-size: clamp(36px, 4.6vw, 56px); line-height: 1.04; letter-spacing: 0; font-weight: 600; margin: 0 0 16px; text-wrap: balance; }
.form-intro .lede { margin: 0; max-width: 560px; }
.form-card { background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-xl); padding: 36px; box-shadow: var(--shadow); }
@media (max-width: 700px){ .form-card { padding: 24px 20px; border-radius: var(--radius-lg); } }
.form-card > h2 { font-size: 22px; font-weight: 600; letter-spacing: 0; margin: 0 0 22px; line-height: 1.2; }
.form-side { position: sticky; top: calc(var(--nav-h) + 24px); display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 980px){ .form-side { position: static; } }
.form-side .photo-mat { align-self: stretch; }
.expect { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; counter-reset: ex; }
.expect li { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 2px 14px; padding: 16px 0; border-top: 1px solid var(--line-2); counter-increment: ex; }
.expect li > b, .expect li > span { grid-column: 2; }
.expect li:last-child { border-bottom: 1px solid var(--line-2); }
.expect li::before { content: counter(ex); grid-column: 1; grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-deep); font-weight: 600; font-size: 14px; display: grid; place-items: center; }
.expect b { display: block; font-size: 16px; letter-spacing: 0; margin-bottom: 2px; }
.expect span { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); letter-spacing: 0; }
.side-title { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--ink); margin: 0 0 6px; }
.side-quote { font-size: 20px; line-height: 1.35; letter-spacing: 0; font-weight: 500; margin: 0; text-wrap: balance; }
.alt-card { border-radius: var(--radius-lg); background: var(--bg-2); padding: 24px; }
.alt-card h2, .alt-card h3 { font-size: 18px; font-weight: 600; letter-spacing: 0; margin: 0 0 6px; line-height: 1.25; }
.alt-card p { font-size: 15px; line-height: 1.45; letter-spacing: 0; color: var(--ink-2); margin: 0 0 14px; }
.alt-card .cta-row { gap: 10px; }
.note-row { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; letter-spacing: 0; color: var(--ink-2); margin: 0; }
.note-row svg { flex-shrink: 0; margin-top: 2px; }
.note-row a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* ---- small fixes found in the wave-C audit ---- */
.skip-link { transition: none; }                       /* appears the instant it has focus */
.mobile-nav.open ~ * { }                                /* (placeholder, no-op) */
/* burger shows a close icon while the overlay is open */
.nav-burger .ic-close { display: none; }
.nav-burger[aria-expanded="true"] .ic-open { display: none; }
.nav-burger[aria-expanded="true"] .ic-close { display: block; }
/* anchors inside a .reveal land under the sticky header while the rise animation runs: give them room */
[id] { scroll-margin-top: 96px; }

/* ---- home hero: photo + owner-app phone + one chip (phone sits on the empty left side of the photo) ---- */
.hero-photo { margin: 0 0 8% 6%; }
.hero-photo .photo { border-radius: var(--radius-2xl); }
.hero-photo .dev-phone { position: absolute; left: -7%; bottom: -9%; height: 64%; z-index: 4; }
.hero-photo .chipf.a { left: auto; right: -4%; top: 15%; bottom: auto; }
@media (max-width: 980px){
  .hero-photo { margin: 0 0 6% 8%; }
  .hero-photo .dev-phone { left: -8%; bottom: -6%; height: 60%; }
  .hero-photo .chipf.a { right: 3%; top: 14%; }
}
@media (max-width: 600px){
  .hero-photo { margin: 0 0 16% 8%; }
  .hero-photo .dev-phone { left: -5%; bottom: -14%; height: 68%; }
  .hero-photo .chipf.a { display: none; }
}

/* ---- wave D (n° 73) — clinics / partners heroes: a reduced product screen on the photo ----
   .hero-shot--scribe (clinics): a SOAP draft window kept in the flow, pulled up over the lower edge of the
     photo (the vet's hands, under the dachshund's head) and out past its left edge, like the home phone.
   .hero-shot--consent (partners): the owner's consent phone on the empty wall left of the golden retriever;
     at 600px and below it drops under the photo and overlaps only its lower edge (the chest), never the face.
   The screens are decorative copies of the mock-ups lower on each page (aria-hidden); the stage's aria-label
   describes them. */
.hero-shot .hs-screen { z-index: 4; }
/* clinics: SOAP draft */
.hero-shot--scribe .hs-window { position: relative; width: 58%; max-width: 360px; margin: -18% 0 0 -7%; }
.hs-window .wbar { height: 26px; font-size: 10.5px; }
.hs-window .ui-scribe { font-size: 12px; }
.hs-window .ui-scribe .soap { padding: 11px 14px 12px; gap: 6px; }
.hs-window .ui-scribe .sec { grid-template-columns: 20px minmax(0,1fr); }
.hs-window .ui-scribe .sec p { line-height: 1.38; }
.hs-window .ui-scribe .sec--vet .k { background: var(--butter); color: var(--butter-ink); }
.hs-window .ui-scribe .sec--vet p.left { border: 1px dashed var(--line); border-radius: 6px; padding: 1px 7px; font-style: normal; }
.hs-window .ui-scribe .rev { flex-wrap: wrap; gap: 6px; padding-top: 9px; margin-top: 2px; }
.hs-window .ui-scribe .rev .st { flex: 1 1 150px; white-space: normal; line-height: 1.35; border-radius: 8px; padding: 3px 8px; }
.hs-window .ui-scribe .rev .go { flex: none; }
/* partners: consent phone */
/* the phone's height follows its content (min. a phone's proportions), so longer English lines never clip the buttons */
.hero-shot--consent .hs-phone { left: -8%; bottom: -8%; width: clamp(150px, 29%, 176px); height: auto; aspect-ratio: auto; padding: 8px; border-radius: 34px; }
.hs-phone .scr { height: auto; border-radius: 27px; }
.hs-consent { height: auto; min-height: 292px; padding: 27px 11px 11px; gap: 7px; font-size: 10.5px; }
.hs-consent .t { font-size: 14.5px; line-height: 1.2; }
.hs-scope { margin: 0; display: flex; flex-direction: column; }
.hs-scope > div { padding: 5px 1px; border-bottom: 1px solid var(--line-2); }
.hs-scope dt { font-size: 9.5px; line-height: 1.3; color: var(--mute); }
.hs-scope dd { margin: 0; font-weight: 600; line-height: 1.3; color: var(--ink); }
.hs-consent .fine { margin-top: auto; font-size: 9.5px; color: var(--ink-2); }
.hs-btns { display: flex; gap: 6px; }
.hs-btns span { flex: 1 1 0; text-align: center; padding: 7px 4px; border-radius: 10px; font-weight: 600; white-space: nowrap; }
.hs-btns .ok { margin: 0; background: var(--brand-deep); color: #fff; }
.hs-btns .no { background: var(--bg-2); color: var(--ink); }
@media (prefers-reduced-motion: no-preference){
  html.js .hero-shot .hs-screen { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease) .3s, transform .7s var(--ease) .3s; animation: chip-failsafe .01s linear 4s forwards; }
  html.js .hero-shot.in .hs-screen, html.js .reveal.in .hero-shot .hs-screen { opacity: 1; transform: none; }
}
@media (max-width: 980px){
  .hero-shot--scribe .hs-window { width: 62%; max-width: 400px; margin: -17% 0 0 4%; }
  .hero-shot--consent { margin-left: 8%; margin-bottom: 4%; }
  .hero-shot--consent .hs-phone { left: -8.5%; bottom: -6%; width: clamp(150px, 26%, 184px); }
}
/* 981–1040px: the photo column is at its narrowest and the content-high phone reaches the "Preview" flag; drop it lower */
@media (min-width: 981px) and (max-width: 1040px){ .hero-shot--consent .hs-phone { bottom: -16%; } }
@media (max-width: 600px){
  .hero-shot--scribe .hs-window { width: auto; max-width: none; margin: -15% 3% 0 5%; }
  .hero-shot--consent { margin-left: 0; margin-bottom: 0; }
  .hero-shot--consent .hs-phone { position: relative; left: auto; bottom: auto; width: 158px; margin: -19% 0 0 5%; }
}
@media print { .hero-shot .hs-screen { display: none; } }

/* ── wave C: content helpers ───────────────────────────────── */
.demo-what { margin: 14px 0 0; max-width: 48ch; font-size: 13.5px; line-height: 1.5; letter-spacing: 0; color: var(--mute); }
.hero-cta + .demo-what + .reassure { margin-top: 16px; }
.final-card .demo-what { margin: 12px auto 0; text-align: center; max-width: 52ch; }
.pile-cap { margin: 16px 0 0; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--mute); }
.ui-scribe .sec p.left { color: var(--mute); }
.arrowlink { padding: 8px 0; }
@media (prefers-reduced-motion: reduce){ html { scroll-behavior: auto; } }


/* ==== China version (wave D) ====
   2026-10-13 — Chinese is the root language (zh at /, English under /en/).
   Everything below is additive: the palette, components and class names above
   are unchanged. Chinese overrides use html[lang^='zh'] (page language) so a
   raw preview toggled with site.js and the built zh tree behave the same.
   Contract (BRIEF 3.3/3.6): .lang a, .beian, .beian-psb, .sticky-cta,
   body.no-sticky, .wecom-qr, .ai-tag, .source, .field--check, .field-hint,
   .field-msg, .legal-doc, .legal-meta, .trust-grid, .trust-card, .data-flow,
   .data-flow .node, .data-flow .arrow, .foot-investor, .wx-share, .scribe-demo,
   .scribe-demo .line, print rules, :lang(zh) typography.
   ================================================================ */

/* ---- 0. Chinese punctuation: —— “ ” ‘ ’ …… take the system CJK glyphs (full-width, joined dashes)
   instead of the Latin ones from Alan Sans. local() only: nothing is downloaded; a device without
   any of these faces skips the rule and falls through to the stack below. Latin text keeps Alan Sans. ---- */
@font-face { font-family: 'CJK Punct'; font-weight: 100 500; font-style: normal;
  src: local('PingFang SC Regular'), local('PingFangSC-Regular'), local('PingFang SC'),
       local('Hiragino Sans GB W3'), local('HiraginoSansGB-W3'),
       local('Microsoft YaHei'), local('MicrosoftYaHei'),
       local('Noto Sans CJK SC Regular'), local('NotoSansCJKsc-Regular'), local('Noto Sans CJK SC'),
       local('Source Han Sans SC Regular'), local('SourceHanSansSC-Regular');
  unicode-range: U+2014, U+2018-2019, U+201C-201D, U+2026; }
@font-face { font-family: 'CJK Punct'; font-weight: 600 900; font-style: normal;
  src: local('PingFang SC Semibold'), local('PingFangSC-Semibold'),
       local('Hiragino Sans GB W6'), local('HiraginoSansGB-W6'),
       local('Microsoft YaHei Bold'), local('MicrosoftYaHei-Bold'),
       local('Noto Sans CJK SC Bold'), local('NotoSansCJKsc-Bold'),
       local('Source Han Sans SC Bold'), local('SourceHanSansSC-Bold');
  unicode-range: U+2014, U+2018-2019, U+201C-201D, U+2026; }

/* ---- 1. Font stacks: Alan Sans first for Latin, then the system CJK faces.
   PingFang SC on iOS/macOS, HarmonyOS Sans on Huawei, MiSans on Xiaomi, YaHei on Windows,
   Noto Sans CJK on Linux/Android. No CJK web font is loaded for body text. ---- */
:root {
  --cjk: 'PingFang SC', 'HarmonyOS Sans SC', 'MiSans', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans SC', 'Source Han Sans SC', sans-serif;
  --sans: 'Alan Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, var(--cjk);
  --sans-zh: 'CJK Punct', 'Alan Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, var(--cjk);
  --serif-zh: var(--sans-zh); /* no serif accent since 2026-11-09 */
}
html[lang^='zh'] body,
html[lang^='zh'] .serif, html[lang^='zh'] .display, html[lang^='zh'] .h-sec, html[lang^='zh'] .h2, html[lang^='zh'] .h3,
html[lang^='zh'] .stat-n, html[lang^='zh'] .phase, html[lang^='zh'] .field input, html[lang^='zh'] .field select, html[lang^='zh'] .field textarea {
  font-family: var(--sans-zh);
}

/* ---- 2. Chinese typography: no negative tracking, airy leading, strict CJK line breaking,
   long Latin tokens (URLs, e-mail) may break anywhere instead of overflowing. ---- */
html[lang^='zh'] *:not(.mono) { letter-spacing: 0; }
html[lang^='zh'] body { line-height: 1.75; line-break: strict; word-break: normal; overflow-wrap: anywhere; text-align: start; }
html[lang^='zh'] p, html[lang^='zh'] li, html[lang^='zh'] dd, html[lang^='zh'] dt, html[lang^='zh'] td, html[lang^='zh'] th, html[lang^='zh'] figcaption, html[lang^='zh'] blockquote,
html[lang^='zh'] .lede, html[lang^='zh'] .shead p, html[lang^='zh'] .card p, html[lang^='zh'] .faq .a, html[lang^='zh'] .foot-tag, html[lang^='zh'] .field .hint,
html[lang^='zh'] .form-foot, html[lang^='zh'] .src-note, html[lang^='zh'] .tile .l, html[lang^='zh'] .stat-l, html[lang^='zh'] .mini-list, html[lang^='zh'] .pcol ul,
html[lang^='zh'] .promise-list span, html[lang^='zh'] .expect span, html[lang^='zh'] .note-row, html[lang^='zh'] .demo-what, html[lang^='zh'] .photo-cap,
html[lang^='zh'] .steps-note, html[lang^='zh'] .reassure, html[lang^='zh'] .checks, html[lang^='zh'] .form-panel p, html[lang^='zh'] .final-card .note,
html[lang^='zh'] .site-footer, html[lang^='zh'] .mega-link small, html[lang^='zh'] .mega-promo p, html[lang^='zh'] .chapter-text p.body, html[lang^='zh'] .statline .c,
html[lang^='zh'] .icard p, html[lang^='zh'] .bcard p, html[lang^='zh'] .step p, html[lang^='zh'] .badge p, html[lang^='zh'] .mem p, html[lang^='zh'] .aud-card p,
html[lang^='zh'] .alt-card p, html[lang^='zh'] .faq-side p, html[lang^='zh'] .tell p, html[lang^='zh'] .final-card p, html[lang^='zh'] .photo-strip figcaption,
html[lang^='zh'] .seg-ctl span small, html[lang^='zh'] .foot-a11y, html[lang^='zh'] .foot-bottom, html[lang^='zh'] .pile-cap { line-height: 1.75; }
/* UI mocks keep their compact leading (tiny type inside device frames) */
html[lang^='zh'] .dev-window p, html[lang^='zh'] .dev-window li, html[lang^='zh'] .dev-phone p, html[lang^='zh'] .dev-phone li, html[lang^='zh'] .ui-req dd, html[lang^='zh'] .ui-req dt,
html[lang^='zh'] .ui-chat li, html[lang^='zh'] .ui-chat p, html[lang^='zh'] .ui-scribe .sec p, html[lang^='zh'] .chipf, html[lang^='zh'] .paper, html[lang^='zh'] .record,
html[lang^='zh'] .ui-code, html[lang^='zh'] .ui-consent, html[lang^='zh'] .ui-log { line-height: 1.45; }
html[lang^='zh'] .ui-code { line-height: 1.7; }
/* headlines: weight 600 (not 700), leading 1.3 for the display, 1.25 for section titles, 1.4 for card titles */
html[lang^='zh'] .display { font-size: clamp(32px, 8vw, 64px); line-height: 1.3; font-weight: 600; letter-spacing: 0; text-wrap: balance; }
html[lang^='zh'] .h-sec, html[lang^='zh'] .h2 { line-height: 1.25; font-weight: 600; letter-spacing: 0; }
html[lang^='zh'] .h3, html[lang^='zh'] .card h3, html[lang^='zh'] .bcard h3, html[lang^='zh'] .icard h3, html[lang^='zh'] .step h3, html[lang^='zh'] .mem h3,
html[lang^='zh'] .aud-card h3, html[lang^='zh'] .badge h3, html[lang^='zh'] .faq summary, html[lang^='zh'] .form-card > h2, html[lang^='zh'] .form-panel h2,
html[lang^='zh'] .form-panel h3, html[lang^='zh'] .alt-card h2, html[lang^='zh'] .alt-card h3, html[lang^='zh'] .mega-link b, html[lang^='zh'] .mega-promo .mega-h,
html[lang^='zh'] .promise-list b, html[lang^='zh'] .expect b, html[lang^='zh'] .side-quote, html[lang^='zh'] .trust-card h3 { line-height: 1.4; }
html[lang^='zh'] .form-intro .display, html[lang^='zh'] .demo-h, html[lang^='zh'] .signin-h { font-size: clamp(30px, 6vw, 48px); line-height: 1.3; letter-spacing: 0; }
html[lang^='zh'] .final-card .h2 { font-size: clamp(30px, 5.2vw, 52px); }
html[lang^='zh'] .program .h2, html[lang^='zh'] .tell .h2 { font-size: clamp(28px, 3.4vw, 40px); }
html[lang^='zh'] .btn { letter-spacing: 0; }
html[lang^='zh'] .btn-lg { font-size: 16px; }
/* "3126 亿元": the unit drops to the next line as one token, never 亿 / 元 */
html[lang^='zh'] .tile .n, html[lang^='zh'] .stat-n, html[lang^='zh'] .statline .n { word-break: keep-all; }
html[lang^='zh'] .nav-trigger, html[lang^='zh'] .mobile-nav a { letter-spacing: 0; }
/* Chinese punctuation compresses the line start a touch less harshly than a hanging indent would */
html[lang^='zh'] .display, html[lang^='zh'] .h-sec, html[lang^='zh'] .h2, html[lang^='zh'] .lede { hanging-punctuation: none; }

/* ---- 3. Chinese headlines: the <em> looks like the words around it (no serif accent since 2026-11-09). ---- */
html[lang^='zh'] .display em, html[lang^='zh'] .h2 em, html[lang^='zh'] .h-sec em,
html[lang^='zh'] .final-card .h2 em, html[lang^='zh'] .signin-h em, html[lang^='zh'] .demo-h em {
  font: inherit; color: inherit; letter-spacing: 0;
}

/* ---- 4. Language switch: the build turns the two buttons into links (<a class="on" aria-current="true">) ---- */
.lang a, .lang button { display: inline-flex; align-items: center; justify-content: center; padding: 5px 10px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); line-height: 1.2; border-radius: 9px; text-decoration: none; }
.lang a:hover, .lang button:hover { color: var(--ink); background: var(--bg-2); }
.lang a.on, .lang a[aria-current], .lang button.on { background: var(--ink); color: #fff; }
.lang a:focus-visible, .lang button:focus-visible { outline-offset: -2px; }
.lang a[lang^='zh'], .lang button[lang^='zh'] { font-family: var(--sans-zh); letter-spacing: 0; }
@media (max-width: 1080px){ .nav-actions .lang a, .nav-actions .lang button { min-width: 44px; min-height: 40px; padding: 0 10px; font-size: 14px; } }
@media (max-width: 400px){ .nav-actions .lang a, .nav-actions .lang button { padding: 0 8px; } }

/* ---- 5. 备案 line (ICP + 公安) under .foot-bottom — on every page, including print ---- */
.beian { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 10px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-2); letter-spacing: 0; }
.beian a { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; }
.beian a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.beian .beian-psb img { display: inline-block; width: 14px; height: 14px; flex-shrink: 0; color: inherit; }
.site-footer .beian a { color: var(--ink-2); text-decoration: none; }
.site-footer .beian a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 700px){ .foot-bottom { justify-content: center; text-align: center; } .beian { justify-content: center; text-align: center; } }
/* n° 27: 「产品状态更新于 2026年10月」 under the 备案 line — month from site.config.json "status_as_of", else the build month */
.site-footer .foot-status { margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-2); letter-spacing: 0; }
@media (max-width: 700px){ .site-footer .foot-status { text-align: center; } }
/* « 返回顶部 » (footer): site.js focuses the header after the scroll; a container needs no ring of its own */
.nav:focus { outline: none; }

/* ---- 6. Mobile sticky CTA bar (≤700px): two buttons, safe-area padding, hidden by body.no-sticky and in print ---- */
.sticky-cta { display: none; }
@media (max-width: 700px){
  .sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 180;
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(250,247,240,.94); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--line-2); box-shadow: 0 -8px 24px rgba(37,40,32,.06);
  }
  .sticky-cta .btn { min-height: 46px; padding: 8px 10px; font-size: 14px; line-height: 1.25; white-space: normal; text-align: center; width: 100%; }
  body:not(.no-sticky) { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  body:not(.no-sticky) .toast { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  body.no-sticky .sticky-cta { display: none; }
}

/* ---- 7. 企业微信 QR card (clinics, partners, demo, 404 — never on owners) ---- */
.wecom-qr { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; padding: 14px 14px 12px; max-width: 232px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-align: center; }
.wecom-qr img { width: 160px; height: 160px; border-radius: 10px; }
.wecom-qr figcaption { font-size: 13.5px; line-height: 1.5; font-weight: 500; color: var(--ink); letter-spacing: 0; }
.wecom-qr figcaption small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; line-height: 1.45; color: var(--mute); }
.band-grey .wecom-qr, .on-grey .wecom-qr, .form-side .wecom-qr, .alt-card .wecom-qr { border-color: transparent; box-shadow: var(--shadow); }

/* ---- 8. « AI生成 » label on assistant / scribe mock-ups (《人工智能生成合成内容标识办法》) ---- */
.ai-tag { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; padding: 1px 7px; border-radius: var(--pill); background: var(--lav); color: var(--lav-ink); font-family: var(--sans-zh); font-size: 10.5px; font-weight: 600; line-height: 1.5; letter-spacing: 0; white-space: nowrap; }
.ai-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; opacity: .85; }
.ui-chat .ai .ai-tag, .ui-scribe .ai-tag { font-size: 10px; padding: 0 6px; margin-bottom: 2px; }
.scribe-demo .ai-tag { font-size: 11px; padding: 1px 7px; }
.ui-chat .ai .ai-tag { display: inline-flex; margin: 0 0 3px; }
.ui-clinic .ai-tag, .ui-owner .ai-tag, .ui-scribe .soap-h .ai-tag { font-size: 10px; padding: 0 5px; margin: 0; flex-shrink: 0; }
.ui-clinic .mc-ai:has(.ai-tag)::before { display: none; }          /* the tag's own dot replaces the box's dot */
.ui-clinic .mc-ai { text-wrap: pretty; }                            /* no lone character under the 10px label */
.ai-tag.ai-tag--lg { font-size: 12px; padding: 3px 10px; }

/* ---- 9. Source line under market figures (广告法 art. 11) ---- */
.source { margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--mute); letter-spacing: 0; }
.source a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tiles + .source, .src-note + .source { margin-top: 12px; }
.tile .source { margin: 0; font-size: 12px; line-height: 1.45; }          /* inside a stat tile, after .l (C1) */
.statline + .source { margin-top: 0; }

/* ---- 10. Forms: consent checkboxes (separate, PIPL art. 14/39), hints and the "either e-mail or WeChat" message ---- */
.field.field--check { gap: 0; }
.field.field--check > label { display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 10px; align-items: start; font-size: 14px; font-weight: 400; line-height: 1.55; letter-spacing: 0; color: var(--ink-2); cursor: pointer; }
.field.field--check input[type='checkbox'] {
  appearance: auto; -webkit-appearance: checkbox; width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; padding: 0;
  border: 0; border-radius: 5px; box-shadow: none; background: none; accent-color: var(--brand-deep); cursor: pointer; flex-shrink: 0;
}
.field.field--check input[type='checkbox']:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.field.field--check a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.field.field--check.is-invalid > label { color: var(--danger); }
.field.field--check.is-invalid input[type='checkbox'] { outline: 2px solid var(--danger); outline-offset: 2px; }
.field.field--check .err { margin-left: 30px; }
.field-hint { margin: -8px 0 0; font-size: 13px; line-height: 1.5; color: var(--mute); letter-spacing: 0; }
.field-msg { margin: -8px 0 0; font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--danger); letter-spacing: 0; }
.field-msg[hidden], .field-hint[hidden] { display: none; }
/* hidden attribute must win over .btn { display:flex } (site.js hides the mailto button inside WeChat with el.hidden = true) */
.btn[hidden] { display: none; }
.field input::placeholder, .field textarea::placeholder { color: #6b6e5c; }   /* 5.2:1 on white (n° 36, Les Plis palette 2026-11-09) */
.form .alert[role='alert']:empty { display: none; }
.form .alert[role='alert'] { font-size: 14px; font-weight: 500; color: var(--danger); margin: 0; }

/* ---- 11. Legal documents: 法律声明 / 隐私政策 ---- */
.legal-doc { max-width: var(--maxw-text); margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink); letter-spacing: 0; }
.legal-doc > :first-child { margin-top: 0; }
.legal-doc h2 { font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: 0; margin: 44px 0 12px; text-wrap: balance; }
.legal-doc h3 { font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: 0; margin: 28px 0 8px; }
.legal-doc p { margin: 0 0 14px; color: var(--ink-2); }
.legal-doc ol, .legal-doc ul { margin: 0 0 16px; padding-left: 24px; color: var(--ink-2); }
.legal-doc li { margin: 0 0 8px; padding-left: 2px; }
.legal-doc li::marker { color: var(--mute); font-weight: 500; }
.legal-doc a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.legal-doc a:hover { color: var(--brand-deep); }
.legal-doc strong, .legal-doc b { color: var(--ink); font-weight: 600; }
.legal-doc dl { margin: 0 0 16px; display: grid; grid-template-columns: minmax(120px, auto) minmax(0,1fr); gap: 8px 20px; }
.legal-doc dt { font-weight: 600; color: var(--ink); }
.legal-doc dd { margin: 0; color: var(--ink-2); }
.legal-doc table { width: 100%; border-collapse: collapse; margin: 8px 0 24px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.legal-doc th, .legal-doc td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line-2); }
.legal-doc th { font-weight: 600; color: var(--ink); background: var(--bg-2); }
.legal-doc tr:last-child td { border-bottom-color: var(--line); }
.legal-doc .note, .legal-doc .legal-note { font-size: 14px; color: var(--mute); }
.legal-meta { margin: 0 0 28px; font-size: 14px; line-height: 1.6; color: var(--mute); letter-spacing: 0; }
.legal-doc .legal-meta { margin-bottom: 24px; }
@media (max-width: 700px){
  .legal-doc { font-size: 15.5px; }
  .legal-doc h2 { font-size: 21px; margin-top: 36px; }
  .legal-doc dl { grid-template-columns: 1fr; gap: 2px 0; }
  .legal-doc dd { margin-bottom: 10px; }
  .legal-doc table { table-layout: fixed; font-size: 13px; }
  .legal-doc th, .legal-doc td { padding: 8px 6px; overflow-wrap: anywhere; }
}
html[lang^='zh'] .legal-doc { line-height: 1.8; letter-spacing: 0; }
html[lang^='zh'] .legal-doc h2, html[lang^='zh'] .legal-doc h3 { letter-spacing: 0; line-height: 1.4; }

/* ---- 12. Trust centre: posture cards ---- */
.trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 940px){ .trust-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px){ .trust-grid { grid-template-columns: 1fr; gap: 12px; } }
.trust-card { display: flex; flex-direction: column; gap: 8px; background: var(--bg-2); border-radius: var(--radius-lg); padding: 26px; min-width: 0; }
.band-grey .trust-card, .on-grey .trust-card { background: #fff; }
.trust-card--mint { background: var(--mint); } .trust-card--sky { background: var(--sky); } .trust-card--lav { background: var(--lav); }
.trust-card--butter { background: var(--butter); } .trust-card--peach { background: var(--peach); } .trust-card--teal { background: var(--teal); }
.trust-card--line { background: #fff; border: 1px dashed var(--line); }
/* wave D build: a full-width card in the trust grid (trust.html #ai-training), so one long topic does not stretch a whole row of short cards */
.trust-card--wide { grid-column: 1 / -1; }
.trust-card--wide p { max-width: 78ch; }
.trust-card .ti { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.85); color: var(--brand-deep); display: grid; place-items: center; margin-bottom: 8px; }
.trust-card .kicker, .trust-card .eyebrow { margin-bottom: 0; font-size: 13px; }
.trust-card h3 { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: 0; margin: 0; }
.trust-card h2 { font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: 0; margin: 0; }
.trust-card p { font-size: 15px; line-height: 1.5; letter-spacing: 0; color: var(--ink-2); margin: 0; }
.trust-card ul { margin: 4px 0 0; padding-left: 18px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.trust-card li { margin: 0 0 6px; }
.trust-card .phase { align-self: flex-start; margin-top: auto; }
.trust-card a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.trust-card .arrowlink { text-decoration: none; color: var(--brand-deep); margin-top: auto; padding-top: 8px; font-size: 15px; }
html[lang^='zh'] .trust-card p, html[lang^='zh'] .trust-card ul { line-height: 1.7; }

/* ---- 13. Data-flow diagram (platform): nodes joined by arrows, stacked on mobile; the frame
   says « 设计上，数据留存于中国大陆境内 » and the label « 示意图 · 并非实际接口 » ---- */
.data-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px 6px; margin: 0; padding: 0; list-style: none; counter-reset: dfn; }
.data-flow .node {
  position: relative; flex: 1 1 148px; min-width: 0; display: flex; flex-direction: column; gap: 4px;
  background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-sm);
  font-size: 14.5px; line-height: 1.45; letter-spacing: 0; color: var(--ink);
}
.data-flow .node b, .data-flow .node strong { display: block; font-weight: 600; }
.data-flow .node small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--mute); }
.data-flow .node .ai-tag { align-self: flex-start; margin-top: 2px; }
.data-flow .node--mint { background: var(--mint); } .data-flow .node--sky { background: var(--sky); }
.data-flow .node--butter { background: var(--butter); } .data-flow .node--lav { background: var(--lav); }
.data-flow .node--peach { background: var(--peach); } .data-flow .node--teal { background: var(--teal); }
.data-flow .node--sage { background: var(--brand-soft); }
.data-flow.numbered .node::before { counter-increment: dfn; content: counter(dfn); width: 22px; height: 22px; border-radius: 50%; background: var(--brand-deep); color: #fff; font-size: 11.5px; font-weight: 600; display: grid; place-items: center; margin-bottom: 4px; }
.data-flow .arrow {
  flex: 0 0 auto; align-self: center; width: 22px; height: 22px; display: grid; place-items: center; color: var(--brand-deep); font-size: 0; line-height: 0;
}
.data-flow .arrow::before {
  content: ''; width: 18px; height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e6845' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h15M13 6l6 6-6 6'/></svg>") center/18px no-repeat;
}
.data-flow .arrow > * { display: none; }
.data-flow-frame { position: relative; border: 2px dashed var(--brand); border-radius: var(--radius-xl); padding: 34px 22px 22px; margin-top: 14px; background: rgba(255,255,255,.4); }
.band-grey .data-flow-frame, .on-grey .data-flow-frame { background: #fff; }
.data-flow-frame > .df-title, .data-flow-title { position: absolute; top: -13px; left: 18px; max-width: calc(100% - 36px); padding: 2px 10px; border-radius: var(--pill); background: var(--brand-soft); color: var(--brand-deep); font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.data-flow-frame > .phase, .data-flow-frame > .stage-flag { position: absolute; top: -13px; right: 18px; }
.data-flow-note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--mute); }
@media (max-width: 700px){
  .data-flow { flex-direction: column; gap: 6px; }
  .data-flow .node { flex-basis: auto; }
  .data-flow .arrow { transform: rotate(90deg); height: 18px; }
  .data-flow-frame { padding: 30px 14px 16px; }
  .data-flow-frame > .phase, .data-flow-frame > .stage-flag { position: static; display: inline-flex; margin: -14px 0 12px; }
}
html[lang^='zh'] .data-flow .node { line-height: 1.6; letter-spacing: 0; }

/* ---- 14. Footer investor/press line + WeChat share image hook ---- */
.site-footer .foot-investor { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); max-width: 340px; }
.site-footer .foot-investor a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.wx-share { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; opacity: 0; pointer-events: none; }

/* ---- 15. « 边说边起草 » scribe mock: three lines typed in sequence (clinics.html#scribe) ---- */
.scribe-demo { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-sm); font-size: 14.5px; line-height: 1.55; letter-spacing: 0; color: var(--ink); }
.band-grey .scribe-demo, .on-grey .scribe-demo { box-shadow: var(--shadow); }
.scribe-demo .sd-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; font-size: 12.5px; color: var(--mute); }
.scribe-demo .line { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 10px; align-items: start; margin: 0; }
.scribe-demo .line > .k, .scribe-demo .line > b:first-child { width: 24px; height: 24px; border-radius: 7px; background: var(--lav); color: var(--lav-ink); font-weight: 700; font-size: 12px; display: grid; place-items: center; margin-top: 1px; }
.scribe-demo .line p, .scribe-demo .line span { margin: 0; }
.scribe-demo .line.left, .scribe-demo .line .left { color: var(--mute); }
.scribe-demo .sd-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 12.5px; }
.scribe-demo .sd-foot .st { color: var(--butter-ink); background: var(--butter); padding: 3px 9px; border-radius: var(--pill); white-space: nowrap; }
.scribe-demo .sd-foot .go { background: var(--brand-deep); color: #fff; padding: 6px 11px; border-radius: 9px; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference){
  html.js .scribe-demo .line { animation: scribe-in .6s var(--ease) both; animation-delay: calc(var(--i, 0) * .7s + .2s); }
  html.js .reveal:not(.in) .scribe-demo .line { animation-play-state: paused; }
  html.js .scribe-demo .line:last-child > :last-child::after, html.js .scribe-demo .line.is-typing > :last-child::after { content: ''; display: inline-block; width: 2px; height: .95em; margin-left: 2px; vertical-align: -0.1em; background: var(--brand-deep); animation: scribe-caret 1s steps(2, start) 4; animation-delay: calc(var(--i, 0) * .7s + .6s); opacity: 0; }
}
@keyframes scribe-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes scribe-caret { 0% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce){ .scribe-demo .line { animation: none !important; opacity: 1; transform: none; } .scribe-demo .line::after { display: none; } }
html[lang^='zh'] .scribe-demo { line-height: 1.65; letter-spacing: 0; }

/* ---- 16. Owner mock: access log screen (owners.html#consent, second phone) — same scale as .ui-consent ---- */
.ui-log { padding: 30px 14px 14px; display: flex; flex-direction: column; gap: 8px; height: 100%; font-size: 10.5px; }
.ui-log .t { font-weight: 600; font-size: 15px; letter-spacing: 0; line-height: 1.2; margin-bottom: 2px; }
.ui-log .row { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 8px; align-items: start; padding: 7px 2px; border-bottom: 1px solid var(--line-2); }
.ui-log .row .d { width: 22px; height: 22px; border-radius: 7px; background: var(--sky); }
.ui-log .row .d.ins { background: var(--butter); }
.ui-log .row b { display: block; font-size: 10.5px; }
.ui-log .row small { display: block; color: var(--mute); font-size: 9px; line-height: 1.35; }
.ui-log .btn2 { margin-top: auto; text-align: center; padding: 8px; border-radius: 11px; border: 1px solid var(--line); color: var(--ink); font-weight: 600; background: #fff; }
.ui-log .fine { text-align: center; font-size: 8.5px; color: var(--mute); }

/* ---- 17. Jump bar under a hero (n° 74): the one rule set for every <nav class="jump"> (platform, partners, clinics;
   the copy that lived in platform.html's <style> is gone). site.js adds the scroll-spy: the link of the section in
   view gets aria-current="true" + .is-current — a sage pastel pill (--brand-soft) and a 2px --brand-deep underline
   (5.9:1 on white, 5.2:1 on the pill; the text is 5.2:1 too). The pill is a ::before, so the bar never moves.
   From 1081px (the nav breakpoint) the bar is pinned under the nav once it has scrolled away (.is-pinned; site.js
   puts a spacer of its height in its place); tablets and phones keep it in the page (no second bar under the
   mobile nav, no clash with the bottom sticky CTA). Anchors and focus then clear the nav + the pinned bar (--jump-h). ---- */
.jump { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-2); font-size: 14.5px; letter-spacing: 0; }
.jump .jl { font-weight: 600; color: var(--ink-2); }
.jump a { position: relative; z-index: 0; display: inline-flex; align-items: center; gap: 5px; color: var(--ink); font-weight: 500; text-decoration: none; }
.jump a::before { content: ''; position: absolute; inset: -5px -10px; z-index: -1; border-radius: var(--pill); background: var(--brand-soft); opacity: 0; transition: opacity .2s var(--ease); }
.jump a svg { color: var(--brand-deep); flex-shrink: 0; transition: transform .3s var(--ease); }
.jump a:hover { text-decoration: underline; text-underline-offset: 3px; }
.jump a:hover svg { transform: translateY(2px); }
.jump a[aria-current='true'] { color: var(--brand-deep); }
.jump a.is-current { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--brand-deep); text-underline-offset: 4px; }
.jump a.is-current::before { opacity: 1; }
@media (max-width: 720px){ .jump { gap: 10px 16px; font-size: 14px; } }
@media (prefers-reduced-motion: reduce){ .jump a::before, .jump a svg { transition: none; } }
.jump-spacer { display: block; height: 0; }
@media (min-width: 1081px){
  html.js .jump.is-pinned {
    position: fixed; top: var(--jump-top, var(--nav-h)); left: 0; right: 0; z-index: 150; margin: 0;
    padding: 11px max(32px, calc((100% - var(--maxw)) / 2 + 32px));
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; white-space: nowrap;
    gap: 10px 20px; font-size: 14px; border-top: 0; border-bottom: 1px solid var(--line-2);
    background: rgba(250,247,240,.94); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
    opacity: 1; transform: none; transition: none; animation: none;
  }
  html.js .jump.is-pinned::-webkit-scrollbar { display: none; }
  html.js .jump.is-pinned a, html.js .jump.is-pinned .jl { flex-shrink: 0; }
  /* the nav + the pinned bar are kept clear for anchors AND for focus scrolling (WCAG 2.4.11): scroll-padding on the
     scroller applies to both, scroll-margin only to anchors; anchors still land 20px under the bar */
  html.has-jump { scroll-padding-top: calc(var(--nav-h) + var(--jump-h, 46px) + 8px); }
  html.has-jump [id] { scroll-margin-top: 12px; }
  /* more links past the right (or left) edge of the pinned bar: a fade at that edge says so (site.js sets the classes).
     It is a sticky overlay in the bar's own colour, so the bar's background never thins out over the page. A sticky
     inset is measured inside the scroller's padding, so the inset is minus that padding (in vw: the bar is full width;
     with a classic scrollbar the fade overshoots the edge by half its width, which only clips it). */
  html.js .jump.is-pinned::before, html.js .jump.is-pinned::after {
    content: ''; position: sticky; z-index: 1; flex: 0 0 64px; align-self: stretch; margin: -11px 0; pointer-events: none;
    opacity: 0; transition: opacity .2s var(--ease);
  }
  html.js .jump.is-pinned::before { order: -1; left: calc(-1 * max(32px, calc((100vw - var(--maxw)) / 2 + 32px))); margin-right: -84px; background: linear-gradient(90deg, var(--bg) 20%, rgba(250,247,240,0)); }
  html.js .jump.is-pinned::after { right: calc(-1 * max(32px, calc((100vw - var(--maxw)) / 2 + 32px))); margin-left: -84px; background: linear-gradient(90deg, rgba(250,247,240,0), var(--bg) 80%); }
  html.js .jump.is-pinned.is-clip-start::before, html.js .jump.is-pinned.is-clip-end::after { opacity: 1; }
}
@media (min-width: 1081px) and (prefers-reduced-motion: reduce){ html.js .jump.is-pinned::before, html.js .jump.is-pinned::after { transition: none; } }
@media print { .jump-spacer { display: none; } }

/* ---- 18. Small helpers used by the China pages ---- */
.phase.phase--dev, .phase.phase--next, .phase.phase--roadmap, .phase.phase--preview { letter-spacing: 0; }
html[lang^='zh'] .phase { font-family: var(--sans-zh); }
.demo-note { font-size: 13px; color: var(--mute); }
.copy-addr { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.copy-addr code { font-family: inherit; background: rgba(255,255,255,.75); border-radius: 8px; padding: 4px 10px; user-select: all; -webkit-user-select: all; }

/* ---- 18a. API mock (partners): a long JSON line is never cut mid-token. It may scroll sideways
   in the window on wide screens and wraps at ≤700px, where the window is narrower than the lines. ---- */
.ui-code pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 700px){ .ui-code pre { white-space: pre-wrap; overflow-wrap: anywhere; } }

/* ---- 18b. Hidden mega panels no longer widen the document (C1 handoff): a closed panel is parked
   300vw to the left with the `translate` property (independent of the `transform` slide-in), moved back
   the instant it opens and parked again only after the .22s fade-out. site.js `place()` keeps working:
   it reads offsetWidth and the trigger's rect, not the panel's. Old engines without `translate` ignore it. ---- */
.mega { translate: -300vw 0; transition: opacity .22s var(--ease), transform .22s var(--ease), translate 0s linear .22s; }
.nav-item.is-open .mega, html:not(.js) .nav-item:focus-within .mega { translate: 0 0; transition-delay: 0s, 0s, 0s; }
@media (hover: hover){ .nav-item:hover .mega { translate: 0 0; transition-delay: 0s, 0s, 0s; } }
.nav-item.is-dismissed .mega { translate: -300vw 0; transition-delay: 0s, 0s, .22s; }
/* 18c. Desktop nav between the 1080 breakpoint and ~1200px: six EN triggers + 中文/EN + sign-in + CTA are ~1146px
   wide, i.e. wider than the row (overflow is clipped but inflates scrollWidth). Compact the row in that band. */
@media (min-width: 1081px) and (max-width: 1200px){
  .nav-row { gap: 12px; }
  .brand img { height: 24px; }
  .nav-links { gap: 0; }
  .nav-item { --np: 7px; --ng: 4px; }
  .nav-trigger { font-size: 14px; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn-ghost { padding-left: 8px; padding-right: 8px; font-size: 14px; }
  .nav-actions .nav-cta { padding: 0 14px; font-size: 14px; }
  .lang a, .lang button { padding: 5px 8px; }
}
/* 18d. The nav carets keep their 10px box (flex-shrink: 0, top of file). They used to absorb the ~60px the
   six EN triggers lack, down to a dot. EN only (the Chinese labels are shorter and fit at full size from 1081px):
   the compact row of 18c runs on to 1340px, is tightened again below 1180px, and the full row trims the trigger
   padding by 2px so it fits the 1256px container. */
@media (min-width: 1201px) and (max-width: 1340px){
  html:not([lang^='zh']) .nav-row { gap: 12px; }
  html:not([lang^='zh']) .brand img { height: 24px; }
  html:not([lang^='zh']) .nav-links { gap: 0; }
  html:not([lang^='zh']) .nav-item { --np: 7px; --ng: 4px; }
  html:not([lang^='zh']) .nav-trigger { font-size: 14px; }
  html:not([lang^='zh']) .nav-actions { gap: 6px; }
  html:not([lang^='zh']) .nav-actions .btn-ghost { padding-left: 8px; padding-right: 8px; font-size: 14px; }
  html:not([lang^='zh']) .nav-actions .nav-cta { padding: 0 14px; font-size: 14px; }
  html:not([lang^='zh']) .lang a, html:not([lang^='zh']) .lang button { padding: 5px 8px; }
}
@media (min-width: 1081px) and (max-width: 1180px){
  html:not([lang^='zh']) .nav-row { gap: 8px; }
  html:not([lang^='zh']) .nav-item { --np: 4px; --ng: 3px; }
  html:not([lang^='zh']) .nav-actions { gap: 4px; }
  html:not([lang^='zh']) .nav-actions .btn-ghost { padding-left: 6px; padding-right: 6px; }
  html:not([lang^='zh']) .nav-actions .nav-cta { padding: 0 12px; }
}
@media (min-width: 1341px){
  html:not([lang^='zh']) .nav-item { --np: 10px; }
}

/* ---- 20. Lead forms (n° 36): one error summary at the top of each form (role=alert, filled by site.js after a
   failed submit, hidden again as soon as the form is valid). Each line links to its field. ---- */
.form-errors { margin: 0; padding: 14px 16px 14px 18px; border: 1px solid rgba(193,35,27,.28); border-left: 4px solid var(--danger); border-radius: 12px; background: #fdf4f3; color: var(--ink); }
.form-errors[hidden] { display: none; }
.form-errors .fe-h { margin: 0 0 6px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--danger); letter-spacing: 0; }
.form-errors ul { margin: 0; padding: 0 0 0 18px; font-size: 14px; line-height: 1.5; letter-spacing: 0; }
.form-errors li + li { margin-top: 2px; }
.form-errors a { color: var(--danger); text-decoration: underline; text-underline-offset: 2px; }
html[lang^='zh'] .form-errors .fe-h { letter-spacing: 0; }

/* ---- 21. Demo page variants (n° 32): "I am… a clinic / a partner / something else" swaps the eyebrow, title, lede,
   message label and placeholder (and the side steps / success text). Above the form, all variants of a block share
   one grid cell ([data-kind-group]), so the block keeps the height of its longest variant from the first paint and
   choosing a kind never moves the form. Without scripts only the clinic variant shows (the others carry hidden). ---- */
[data-kind][hidden] { display: none; }   /* a class's display (.expect, .cta-row: flex) must not revive a hidden variant */
html.js [data-kind-group] { display: grid; }
html.js [data-kind-group] > [data-kind] { grid-area: 1 / 1; min-width: 0; }
html.js [data-kind-group] > [data-kind][hidden] { display: block; visibility: hidden; }
.expect span a { text-decoration: underline; text-underline-offset: 2px; }

/* ---- 19. Print: a page that still says who publishes it (备案 line), without nav, menus, sticky bar or QR ---- */
@media print {
  @page { margin: 16mm 14mm; }
  html { scroll-behavior: auto; }
  body { background: #fff !important; color: #000; padding-bottom: 0 !important; font-size: 12pt; line-height: 1.5; }
  .nav, .mobile-nav, .skip-link, .lang, .nav-actions, .sticky-cta, .wecom-qr, .toast, .nav-burger, .mega,
  .foot-grid > div:not(.foot-brand), .foot-a11y, .mobile-cta, .hp, .form-actions, .jump, .back-top,
  .final-card .deco-photo, .final-card .chipf, .chipf .typing, [data-copy-summary] { display: none !important; }
  .site-footer { background: #fff !important; padding: 16pt 0 0; border-top: 1px solid #999; }
  .foot-grid { grid-template-columns: 1fr; margin-bottom: 12pt; }
  .foot-bottom { border-top: 0; padding-top: 0; justify-content: flex-start; }
  .beian { display: flex; color: #333; }
  .beian a::after { content: none; }
  html.js .reveal, .reveal, html.js .stage .chipf, html.js .photo-stage .chipf, .chipf { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .scribe-demo .line { animation: none !important; opacity: 1 !important; transform: none !important; }
  .stage, .photo-stage, .card, .bcard, .icard, .step, .tile, .trust-card, .mem, .badge, .program, .tell, details, .legal-doc table, .data-flow .node, .form-card, .wecom-qr { break-inside: avoid; page-break-inside: avoid; }
  .band-grey, .band-sage, .band-dark, .card, .bcard, .icard, .step, .tile, .trust-card, .mem, .badge, .alt-card, .final-card, .stage, .tint { background: #fff !important; box-shadow: none !important; border: 1px solid #ccc; }
  .phase, .tag, .ai-tag, .data-flow .node { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .btn { border: 1px solid #000 !important; background: none !important; color: #000 !important; box-shadow: none !important; }
  a { color: inherit; }
  section { padding: 20pt 0; }
  /* the published URL after links in legal documents (the build rewrites hrefs to /x/) */
  .legal-doc a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 85%; color: #555; word-break: break-all; }
  .legal-doc a[href^='/']::after { content: ' (petnestdata.com' attr(href) ')'; font-size: 85%; color: #555; }
  .legal-doc a[href^='#']::after, .legal-doc a[href^='mailto:']::after { content: none; }
  /* phase label on every printed page, in the page language */
  body::before { display: block; margin: 0 0 14pt; padding: 0 0 6pt; border-bottom: 1px solid #ccc; font-size: 9pt; color: #555; }
  html[lang^='zh'] body::before { content: '本页打印自 petnestdata.com，产品均在研发中，界面为预览。'; }
  html:not([lang^='zh']) body::before { content: 'Printed from petnestdata.com. Products are in development; screens are previews.'; }
  .display, .h-sec, .h2 { font-size: 22pt; line-height: 1.25; }
  .lede, .shead p { font-size: 12pt; }
  img, .photo, .photo-stage, .dev-window, .dev-phone { max-width: 100%; }
  .hero2 .stage, .hero-photo .dev-phone, .lay-hero .dev-phone { display: none; }
}

/* ---- LES PLIS — illustrations (2026-11-09) ---- */
/* Folded-paper dog and cat (official edition, green #9C9C6C, orange #D9824B, ivory #F0E6D2) replace the stock photos.
   Transparent PNG/WebP shown whole (contain) on the editorial background #FAF7F0. */
.photo--plis { background: #fff; }   /* white card on the ivory canvas */
.photo--plis img { object-fit: contain; object-position: 50% 60%; padding: 7%; box-sizing: border-box; }
.photo-mat .photo--plis, .aud-card .photo--plis { background: rgba(255,255,255,.62); }
.photo-strip .photo--plis img { padding: 9% 6%; }
.hero-photo .photo--plis img { padding: 8% 4% 10% 16%; object-position: 100% 55%; }
.hero-shot .photo--plis img { padding: 6% 6% 8%; }
.final-card .deco-photo--plis { box-shadow: none; border-radius: 0; overflow: visible; background: none; width: 170px; }
.final-card .deco-photo--plis img { object-fit: contain; filter: drop-shadow(0 12px 18px rgba(37,40,32,.14)); }

/* ================================================================
   ALAN SANS, NO ITALIC (2026-11-09)
   Thomas: « utilise la même police que alan.com et pas de caractère en italique ».
   One typeface for every Latin character, as on alan.com: Alan Sans (variable, 300 to 900, upright only),
   default letter spacing everywhere. Nothing is italic: the browser defaults of em / i / cite / address / dfn / var
   are switched off, and a browser may not slant a face that has no italic.
   ================================================================ */
em, i, cite, address, dfn, var { font-style: normal; }
html { font-synthesis-style: none; }