:root{
  /* ══ ZAMIA V3 ═══════════════════════════════════════════════════════════
     The premium lever is scale and space, not colour. V1 ran a 1.5x
     display-to-body ratio (24/16) and 24px section rhythm — that, not the
     hues, is why it read like a settings page. V3 runs 5x and 92px.

     Colour discipline: ONE accent. Orchid is retired from brand use — the
     --accent* names are kept and remapped to wine so every existing component
     follows without being hunted down. Gold is verification ONLY (the seal, a
     checked date, a tier) and is never a button; the moment it becomes one,
     the brand has spent its only precious signal on an ordinary action.
     Sage/warn/block survive as small semantic marks, never as surfaces.

     Ground is unbleached cotton with a faint rose cast — not the clinical
     white of V1 (reads as an admin panel), not kraft cream (where every
     generic "warm brand" lands). */
  --bg:#FBF7F5; --surface:#F4EDE8; --cream:#F7F1ED; --paper:#FBF7F5;
  --ink:#2A171C; --muted:#6A5459; --faint:#94807F;
  --line:#E7DCD6; --line-soft:#F0E8E3;
  --primary:#6E1834; --primary-press:#4E0F24;      /* wine — THE accent */
  --accent:#6E1834; --accent-2:#6E1834; --accent-soft:#F4E8EC;  /* was orchid */
  --plum:#6E1834; --plum-soft:#F4E8EC;             /* legacy alias → wine */
  --gold:#A87C2E; --gold-soft:#F2E8D6; --amber:#A8632E;  /* verification only */
  --sage:#2C7A52; --sage-soft:#E7F1EA;
  --warn:#A8632E; --warn-soft:#F7EEDE; --warn-line:#EAD8BF;
  --block:#A8392A; --block-soft:#F6E2DD;
  --sunrise:#6E1834;
  --glow:#FBF7F5;
  /* type */
  --serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* shape & depth */
  --r-sm:10px; --r:14px; --r-lg:18px;
  --shadow:0 1px 2px rgba(42,23,28,.04),0 8px 28px rgba(42,23,28,.06);
  --shadow-lg:0 24px 70px rgba(42,23,28,.18);
  --maxw:780px;
  /* rhythm — space is the material */
  --gap-sec:92px; --gap-blk:34px;
}

/* ── V3 type scale ─────────────────────────────────────────────────────
   Six steps, one family. Fraunces' optical-size axis keeps the 86px display
   and the 19px quote from looking like the same face at two sizes. */
.z-display{font:300 clamp(44px,8vw,86px)/.94 var(--serif);letter-spacing:-.04em;
  color:var(--ink);margin:0;font-variation-settings:"opsz" 144}
.z-display i,.z-display em{font-style:italic;color:var(--primary)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
/* in-app "Reduce motion" toggle (Settings) — mirrors the OS media query */
.reduce-motion *,.reduce-motion *::before,.reduce-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
/* My Routine — Morning/Evening segment (glanceable, no scroll-to-switch) */
.rt-seg{display:inline-flex;border:1px solid var(--line);border-radius:99px;overflow:hidden;margin:16px 0 14px;background:var(--surface)}
.rt-seg button{border:0;background:transparent;font:600 14px/1 var(--sans);color:var(--muted);padding:10px 20px;cursor:pointer;transition:background .16s,color .16s}
.rt-seg button.on{background:var(--primary);color:#fff}
.rt-panel{animation:z-fadeup .2s ease both}
/* My Profile — editable field cards */
.pf-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-bottom:10px}
.pf-card .k{font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pf-card .v{font-size:15px;color:var(--ink);margin-top:4px}
.pf-edit{flex:none;background:none;border:0;cursor:pointer;color:var(--accent-2);font:600 13px/1 var(--sans);display:flex;align-items:center;gap:5px}
.pf-edit:hover{text-decoration:underline}
/* Skin Journal — diary timeline */
.jt{position:relative;margin:18px 0 0;padding-left:22px}
.jt::before{content:"";position:absolute;left:6px;top:4px;bottom:8px;width:2px;background:var(--line)}
.jt-entry{position:relative;padding:0 0 16px}
.jt-entry::before{content:"";position:absolute;left:-22px;top:2px;width:11px;height:11px;border-radius:50%;background:var(--primary);border:2px solid var(--bg)}
.jt-date{font:600 12px/1 var(--sans);color:var(--muted)}
.jt-body{font-size:14.5px;color:var(--ink);margin-top:3px;line-height:1.45}
/* Shelf group header */
.shelf-group{font:700 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);margin:18px 2px 8px}
/* empty-state spot art */
.z-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.z-empty-art{width:104px;height:104px;margin-bottom:8px;opacity:.92}
/* My Skin section-nav — navigation row between the four decoupled screens */
.skin-nav{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 18px;padding-bottom:2px}
.skin-nav a{flex:none;font:600 13px/1 var(--sans);color:var(--muted);text-decoration:none;padding:8px 13px;border:1px solid var(--line);border-radius:99px;background:var(--surface);white-space:nowrap}
.skin-nav a.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.skin-nav a:hover{color:var(--ink)}.skin-nav a.on:hover{color:#fff}
/* one global focus ring (accessibility) */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--accent-2);outline-offset:2px;border-radius:4px}

/* ── Premium polish system (motion + loading) ───────────────────────── */
@keyframes z-fadeup{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes z-pop{0%{transform:scale(.96);opacity:0}60%{transform:scale(1.02)}100%{transform:scale(1);opacity:1}}
@keyframes z-spin{to{transform:rotate(360deg)}}
@keyframes z-shimmer{to{background-position:-200% 0}}
.z-fadeup{animation:z-fadeup .24s ease both}
.z-pop{animation:z-pop .2s ease both}
.z-btn,.z-chip,.card,.z-tile{transition:transform .16s ease, box-shadow .16s ease, background .16s ease}
.z-btn:active{transform:scale(.97)}
.z-btn.primary:hover{box-shadow:0 4px 14px rgba(91,26,58,.18);transform:translateY(-1px)}
/* button working state: <button class="z-btn primary is-busy"> with data-busy label */
.z-btn.is-busy{position:relative;color:transparent!important;pointer-events:none}
.z-btn.is-busy::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border:2px solid #fff;border-top-color:transparent;border-radius:50%;animation:z-spin .7s linear infinite}
.z-btn.ghost.is-busy::after{border-color:var(--accent-2);border-top-color:transparent}
/* skeleton shimmer */
.z-skel{background:linear-gradient(90deg,var(--surface) 25%,var(--line) 37%,var(--surface) 63%);background-size:200% 100%;animation:z-shimmer 1.3s linear infinite;border-radius:10px;height:14px;margin:8px 0}
/* "Updated" pill */
.z-updated{display:inline-flex;align-items:center;gap:5px;font:600 12px/1 var(--sans);color:var(--accent-2);background:var(--accent-soft);padding:5px 10px;border-radius:99px;animation:z-pop .22s ease both}

/* ── Account control (Claude-style, pinned bottom-left) ─────────────── */
.z-acct-wrap{margin-top:auto;padding-top:10px;border-top:1px solid var(--line-soft);position:relative}
.z-acct-feedback{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;cursor:pointer;color:var(--muted);font:500 13px/1 var(--sans);padding:9px 8px;border-radius:8px;text-decoration:none}
.z-acct-feedback:hover{background:var(--surface);color:var(--ink)}
.z-acct-feedback svg{width:17px;height:17px;flex:none}
.z-acct-chip{display:flex;align-items:center;gap:10px;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:12px;cursor:pointer;padding:8px 10px;text-align:left}
.z-acct-chip:hover{background:var(--cream)}
.z-acct-av{flex:none;width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;font:600 12px/30px var(--sans);text-align:center}
.z-acct-id{flex:1;min-width:0}
.z-acct-id b{display:block;font:600 13.5px/1.2 var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.z-acct-id span{font-size:12.5px;color:var(--muted)}
.z-acct-chev{flex:none;color:var(--muted)}
.z-acct-menu{position:absolute;left:0;right:0;bottom:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 40px rgba(36,16,36,.16);padding:8px;display:none}
.z-acct-menu.open{display:block;animation:z-fadeup .16s ease both}
.z-acct-menu .hd{padding:8px 10px 10px;border-bottom:1px solid var(--line-soft);margin-bottom:6px}
.z-acct-menu .hd b{display:block;font:600 14px/1.2 var(--sans);color:var(--ink)}
.z-acct-menu .hd span{font-size:12px;color:var(--muted)}
.z-acct-menu a,.z-acct-menu button{display:flex;align-items:center;gap:10px;width:100%;text-decoration:none;color:var(--ink);font:500 13.5px/1 var(--sans);padding:9px 10px;border-radius:8px;border:0;background:none;cursor:pointer;text-align:left}
.z-acct-menu a:hover,.z-acct-menu button:hover{background:var(--surface)}
.z-acct-menu .sep{height:1px;background:var(--line-soft);margin:6px 4px}
.z-acct-menu svg{width:16px;height:16px;flex:none;color:var(--muted)}

/* ── Inline Zahra bubble (every page except Talk) ──────────────────── */
.z-bubble-fab{position:fixed;right:18px;bottom:78px;z-index:60;width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;background:var(--primary);color:#fff;box-shadow:0 8px 24px rgba(91,26,58,.28);display:flex;align-items:center;justify-content:center}
.z-bubble-fab:hover{transform:translateY(-2px)}
.z-bubble{position:fixed;right:18px;bottom:78px;z-index:61;width:min(340px,calc(100vw - 36px));background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 48px rgba(36,16,36,.2);padding:14px;display:none}
.z-bubble.open{display:block;animation:z-fadeup .18s ease both}
.z-bubble .bx{position:absolute;top:8px;right:8px;background:none;border:0;cursor:pointer;color:var(--muted)}
.zb-head{display:flex;align-items:center;gap:8px;font:600 14px/1 var(--sans);color:var(--ink);padding:2px 0 10px;border-bottom:1px solid var(--line-soft);margin-bottom:10px}
.zb-av{width:24px;height:24px;border-radius:50%;background:var(--primary);color:#fff;font:600 11px/24px var(--sans);text-align:center}
.zb-body{max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.zb-z{background:var(--surface);color:var(--ink);font-size:14px;line-height:1.5;padding:9px 12px;border-radius:12px;align-self:flex-start;max-width:90%}
.zb-u{background:var(--primary);color:#fff;font-size:14px;line-height:1.5;padding:9px 12px;border-radius:12px;align-self:flex-end;max-width:90%}
.zb-form{display:flex;gap:8px;align-items:center}
.zb-form .z-field{margin:0;flex:1}
.zb-form .z-btn{flex:none;padding:10px 12px}
@media(min-width:900px){.z-bubble-fab,.z-bubble{bottom:24px}}

*{box-sizing:border-box}
html,body{margin:0}
/* NO global zoom. A `zoom:.8` used to scale the whole document to shrink apparent
   density — but zoom scales TEXT too, so the 16px inputs below rendered at 12.8px
   and iOS zoomed the viewport on every focus, which is the exact thing the
   font-size rule further down exists to prevent. Body copy also landed at 12.8px
   and the smallest labels at 8.8px. Density is a spacing problem; it is now
   solved with spacing, and type is left at a legible size. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--muted);
  font:400 17px/1.72 var(--sans);-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none}
a{color:var(--accent-2)}
/* A <button> that reads like an inline link — used for in-place "ask Zahra" (opens the bubble, never redirects). */
.z-linkbtn{background:none;border:none;color:var(--accent-2);font:inherit;cursor:pointer;text-decoration:underline;padding:0}
.z-linkbtn:hover{color:var(--ink)}
/* Mobile: inputs must be ≥16px or iOS zooms in on focus (jarring). */
@media(max-width:600px){input,textarea,select{font-size:16px!important}}
img{max-width:100%}
.z-wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.z-serif{font-family:var(--serif)}
.z-muted{color:var(--muted)}

/* ── Consistent top nav (every page; brand always returns home) ───────── */
.z-topnav{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:14px;
  padding:11px 16px;margin:0 -16px 16px;background:rgba(255,253,251,.92);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.z-topnav .brand{display:flex;align-items:center;gap:8px;font:700 16px/1 var(--serif);
  letter-spacing:-.2px;color:var(--ink);text-decoration:none}
.z-topnav .brand .z-mark{width:28px;height:28px;font-size:15px}
.z-topnav .links{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:14px}
.z-topnav .links a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}
.z-topnav .links a{color:var(--muted);text-decoration:none}
.z-topnav .links a:hover{color:var(--ink)}
@media(max-width:560px){.z-topnav .links{gap:11px;font-size:12.5px}.z-topnav .links .hide-sm{display:none}}

/* ── App header ───────────────────────────────────────────────────────── */
.z-header{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:11px;
  padding:11px 16px;background:var(--paper);border-bottom:1px solid var(--line)}
/* the bloom mark IS the avatar everywhere (no more "Z"): bloom.svg as background, text hidden */
.z-mark{width:34px;height:34px;border-radius:50%;background:var(--accent-soft) url("bloom.9164537be692.svg") center/58% no-repeat;
  color:transparent;font-size:0;flex:none;border:1px solid var(--line)}
.z-header .name{font-weight:600;font-size:15px;line-height:1.1}
.z-header .sub{font-size:12px;color:var(--muted)}
.z-beta{margin-left:auto;font:700 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-2);background:var(--accent-soft);border-radius:999px;padding:5px 9px}

/* ── Headings ─────────────────────────────────────────────────────────── */
.z-kicker{font:500 12.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.z-h1{font:300 clamp(30px,5vw,44px)/1.06 var(--serif);margin:6px 0 0;letter-spacing:-.03em;color:var(--ink);font-variation-settings:"opsz" 120}
.z-h2{font:500 12.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0}
.z-section{display:flex;align-items:center;gap:14px;margin:var(--gap-sec) 0 var(--gap-blk)}
.z-section .ln{flex:1;height:1px;background:var(--line)}
.z-section .ic{font-size:17px}

/* ── Card / Tile ──────────────────────────────────────────────────────── */
.z-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);overflow:hidden}
.z-tile{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:22px 24px;margin-bottom:14px}
.z-tile.hero{border-color:var(--accent-soft);box-shadow:0 2px 4px rgba(91,26,58,.08),0 10px 30px rgba(91,26,58,.08)}
.z-tile h3{margin:0 0 4px;font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.z-tile.hero h3{color:var(--accent-2)}

/* ── Step (within routine card) ──────────────────────────────────────── */
.z-step{padding:30px 26px}
.z-step+.z-step{border-top:1px solid var(--line-soft)}
.z-step .topline{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.z-step .name{font:300 clamp(24px,3.4vw,34px)/1.08 var(--serif);letter-spacing:-.025em;color:var(--ink);font-variation-settings:"opsz" 120}
.z-step .ingredient{color:var(--accent-2);font-weight:600;font-size:13.5px;margin-top:5px}
.z-step .why{color:var(--muted);font-size:14px;margin-top:4px}
.z-step .freq{color:var(--muted);font-size:12.5px;margin-top:5px}

/* ── Badges ───────────────────────────────────────────────────────────── */
.z-badge{font:700 12px/1 var(--sans);letter-spacing:.04em;border-radius:6px;padding:3px 6px;
  display:inline-flex;align-items:center;gap:3px;text-transform:uppercase;vertical-align:middle}
.z-badge.first{background:var(--accent);color:#fff}
.z-badge.research{background:var(--sage-soft);color:var(--sage);cursor:pointer;border:none}
.z-badge.mf{color:var(--accent-2);background:var(--accent-soft)}
/* the universal info affordance — opens the evidence drawer everywhere */
.z-info{appearance:none;border:none;background:none;cursor:pointer;color:var(--accent);
  font-size:13px;padding:0 2px;line-height:1;vertical-align:middle}
.z-info::before{content:"ⓘ"}

/* ── Product card (PRICES HIDDEN until the real catalog lands) ─────────── */
.z-product{display:block;background:var(--cream);border:1px solid var(--line-soft);
  border-radius:var(--r-sm);padding:10px 12px;text-decoration:none;color:inherit;margin-top:8px}
.z-product .pn{font-size:14px;font-weight:600}
.z-product .pn .brand{color:var(--muted);font-weight:400}
.z-product .meta{display:flex;gap:8px;align-items:center;margin-top:4px;flex-wrap:wrap}
.z-product .why{color:var(--muted);font-size:13px;margin-top:4px}
.z-product .buy{color:var(--muted);font-size:12.5px;margin-top:6px}

/* ── Chips ────────────────────────────────────────────────────────────── */
.z-chips{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0}
.z-chip{background:var(--accent-soft);border:none;color:var(--accent-2);border-radius:999px;
  padding:12px 15px;min-height:44px;font:500 14px/1.2 var(--sans);cursor:pointer;text-align:left}
.z-chip:active{background:#e3d5f0}
.z-chip.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.z-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:none;border-radius:13px;padding:13px 18px;font:600 15px/1 var(--sans);
  cursor:pointer;text-decoration:none;min-height:44px}
.z-btn.primary{background:var(--primary);color:#fff}
.z-btn.primary:active{background:var(--primary-press)}
.z-btn.ghost{background:var(--accent-soft);color:var(--accent-2)}
.z-btn.block{width:100%}
.z-btn:disabled{opacity:.5;cursor:default}
.z-btn-row{display:flex;gap:9px;flex-wrap:wrap}

/* ── Verdict (Product Check) ──────────────────────────────────────────── */
.z-verdict{border-radius:var(--r);padding:14px 16px;margin-top:12px;font-size:15px}
.z-verdict .v-head{font:600 16px/1.2 var(--serif);display:flex;align-items:center;gap:8px}
.z-verdict.good{background:var(--sage-soft);color:var(--sage)}
.z-verdict.fine{background:var(--gold-soft);color:#7a5a36}
.z-verdict.skip{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn-line)}
.z-verdict.unsafe{background:var(--block-soft);color:var(--block);border:1px solid var(--warn-line)}

/* ── Notes / disclaimers / escalation ─────────────────────────────────── */
.z-note{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--r);padding:12px 15px;font:italic 16px/1.6 var(--serif);color:var(--ink)}
.z-adjust{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 15px;color:var(--muted);font-size:13.5px}
.z-esc{background:var(--warn-soft);border:1px solid var(--warn-line);border-radius:var(--r);
  padding:13px 15px;color:var(--warn);font-size:14px;display:flex;gap:9px}
.z-disclaimer{color:var(--muted);font-size:12.5px;line-height:1.5}
.z-lock{color:var(--muted);font-size:12.5px;text-align:center;padding:6px 0}

/* ── Progress meter (fade journey / completeness) ─────────────────────── */
.z-meter{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted);margin:8px 0}
.z-meter .track{flex:1;height:7px;border-radius:999px;background:var(--line);overflow:hidden}
.z-meter .fill{height:100%;background:var(--sunrise);transition:width .6s cubic-bezier(.2,.8,.2,1)}

/* ── Rating (👍/👎) ───────────────────────────────────────────────────── */
.z-rate{display:flex;gap:8px;align-items:center;margin-top:10px;color:var(--muted);font-size:12.5px}
.z-rate button{appearance:none;border:1px solid var(--line);background:var(--paper);border-radius:999px;
  width:34px;height:30px;font-size:15px;cursor:pointer}
.z-rate button.on{border-color:var(--accent);background:var(--accent-soft)}

/* ── Evidence drawer (bottom-sheet; same content as /learn entry) ─────── */
.z-drawer-scrim{position:fixed;inset:0;background:rgba(43,33,28,.38);opacity:0;
  pointer-events:none;transition:opacity .22s;z-index:40}
.z-drawer-scrim.open{opacity:1;pointer-events:auto}
.z-drawer{position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--paper);
  border-radius:20px 20px 0 0;max-width:var(--maxw);margin:0 auto;max-height:86vh;overflow:auto;
  transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1);
  padding:8px 18px calc(20px + env(safe-area-inset-bottom))}
.z-drawer.open{transform:translateY(0)}
.z-drawer .handle{width:40px;height:4px;border-radius:999px;background:var(--line);margin:6px auto 12px}
.z-drawer h4{font:600 20px/1.2 var(--serif);margin:0}
.z-drawer .grade{font:700 12px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;
  padding:3px 7px;border-radius:6px;display:inline-block;margin-top:6px}
.z-drawer .grade.verified{background:var(--sage-soft);color:var(--sage)}
.z-drawer .grade.emerging{background:var(--gold-soft);color:#7a5a36}
.z-drawer .grade.traditional{background:var(--line-soft);color:var(--muted)}
.z-drawer .lbl{font:700 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:16px 0 5px}
.z-drawer .src{background:var(--cream);border:1px solid var(--line-soft);border-radius:var(--r-sm);
  padding:10px 12px;font-size:13.5px;margin-top:7px}
.z-drawer .src .doi{color:var(--accent);font-size:12.5px}

/* ── Floating feedback button (bottom-left, every page; clear of header & send) ─ */
.z-fab-feedback{position:fixed;bottom:calc(14px + env(safe-area-inset-bottom));left:14px;z-index:30;
  border:none;cursor:pointer;background:var(--ink);color:#fff;border-radius:999px;
  font:600 12px/1 var(--sans);padding:10px 13px;display:flex;align-items:center;gap:6px;
  box-shadow:0 4px 14px rgba(44,29,36,.28);opacity:.94}
.z-fab-feedback:active{opacity:1}

/* ── Toast ────────────────────────────────────────────────────────────── */
.z-toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(8px);
  background:var(--ink);color:#fff;padding:9px 15px;border-radius:999px;font-size:13px;z-index:60;
  opacity:0;pointer-events:none;transition:.25s}
.z-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Modal (beta shell, whatsapp, feedback, forget-me) ───────────────── */
.z-modal-scrim{position:fixed;inset:0;background:rgba(28,17,22,.5);z-index:50;
  display:flex;align-items:center;justify-content:center;padding:18px;
  opacity:0;pointer-events:none;transition:.18s}
.z-modal-scrim.open{opacity:1;pointer-events:auto}
.z-modal{background:var(--paper);border-radius:22px;width:100%;max-width:430px;
  padding:26px 22px calc(24px + env(safe-area-inset-bottom));max-height:90vh;overflow:auto;
  box-shadow:0 24px 70px rgba(28,17,22,.32);transform:translateY(10px) scale(.985);transition:.2s}
.z-modal-scrim.open .z-modal{transform:none}
.z-field{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;
  background:var(--cream);margin:8px 0}
.z-field:focus{outline:none;border-color:var(--accent)}

/* ── Footnote footer (every content page) ─────────────────────────────── */
.z-footer{border-top:1px solid var(--line);margin-top:40px;background:#fff;
  padding:20px 16px calc(22px + env(safe-area-inset-bottom))}
.z-footer-in{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:9px 18px;align-items:center;font-size:12.5px}
.z-footer-in a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.z-footer-in a:hover{color:var(--ink)}
.z-footer-c{color:var(--muted);font-size:12.5px;width:100%;margin-top:2px}


/* ── The Ritual: full-screen, calm, one step at a time (eyes on the mirror).
   Shared by the chat workspace and the /r/<token> share page. ─────────────── */
.ritual{position:fixed;inset:0;z-index:60;background:var(--bg);display:none;flex-direction:column;padding:16px 18px}
body.ritual-open{overflow:hidden}
body.ritual-open .ritual{display:flex}
.ritual-top{display:flex;align-items:center;gap:9px;flex:none}
.ritual-top .sp{flex:1}
.r-ibtn{background:none;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font:600 13px/1 var(--sans);cursor:pointer;color:var(--muted)}
.r-ibtn.on{border-color:var(--accent);color:var(--accent-2)}
.ritual-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:13px;max-width:560px;margin:0 auto;width:100%}
.r-dots{display:flex;gap:6px;justify-content:center;margin-bottom:6px}
.r-dot{width:7px;height:7px;border-radius:50%;background:var(--line);transition:.2s}
.r-dot.on{background:var(--accent);transform:scale(1.25)}
.r-dot.done{background:var(--accent-soft)}
.r-kick{font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.r-name{font:600 clamp(24px,5vw,32px)/1.1 var(--serif);color:var(--ink);margin:0}
.r-ing{color:var(--accent-2);font-weight:600;font-size:16px}
.r-why{color:var(--muted);font-size:15px;max-width:450px;line-height:1.55;margin:0}
.r-prod{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;font-size:14px}
.r-line{font:italic 500 19px/1.4 var(--serif);color:var(--ink);max-width:460px}
.ritual-foot{flex:none;display:flex;flex-direction:column;align-items:center;gap:9px;padding:14px 0 calc(8px + env(safe-area-inset-bottom))}
.ritual-foot .z-btn{min-width:200px}
.r-soon{font-size:12px;color:var(--muted);max-width:420px;text-align:center;line-height:1.5}
/* GRWZ camera mirror (opt-in; never stored) + anti-pilling timer */
.r-mirror{width:100%;max-width:320px;aspect-ratio:3/4;object-fit:cover;border-radius:18px;
  margin:10px auto 0;display:block;transform:scaleX(-1);background:#1a0f14;flex:none}
.r-timer{font:700 clamp(44px,13vw,72px)/1 var(--serif);color:var(--accent-2);margin:4px 0 2px}

/* ── Intake: focused full-screen guided start (creates the journey) ──────── */
.intake{position:fixed;inset:0;z-index:61;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(40,16,30,.34);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.intake-card{background:#fff;border-radius:20px;box-shadow:0 24px 70px rgba(36,16,36,.32);width:min(480px,100%);max-height:88vh;overflow-y:auto;display:flex;flex-direction:column;padding:14px 16px 18px;animation:z-pop .22s ease both}
.ik-opts{display:flex;flex-direction:column;gap:9px;width:100%;max-width:430px;margin:6px auto 0}
.ik-opt{appearance:none;border:1px solid var(--line);background:#fff;border-radius:12px;padding:14px 16px;
  font:500 15px/1.25 var(--sans);color:var(--ink);cursor:pointer;text-align:left}
.ik-opt:hover{border-color:var(--accent)}
.ik-opt.sel{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-2);font-weight:600}

/* intake free-type input */
.ik-type{width:100%;max-width:430px;margin:8px auto 0;display:block;border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;font:inherit;background:#fff;color:var(--ink)}
.ik-type::placeholder{color:var(--muted)}
.ik-type:focus{outline:none;border-color:var(--accent)}

/* ── Unified app shell for content pages (matches the chat sidebar) ───────── */
.z-app{display:flex;min-height:100vh}
.z-sidebar{width:248px;flex:none;background:var(--surface);border-right:1px solid var(--line);
  position:sticky;top:0;height:100vh;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column}
.z-side-brand{display:flex;align-items:center;gap:9px;font:700 18px/1 var(--serif);color:var(--ink);text-decoration:none;padding:4px 8px 12px;letter-spacing:-.3px}
.z-side-brand .z-mark{width:30px;height:30px}
.z-side-link{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;border-radius:10px;padding:11px;font-size:14.5px;min-height:44px}
.z-side-link:hover{background:var(--accent-soft)}
.z-side-link svg{width:17px;height:17px;color:var(--muted);flex:none}
.z-side-link.cta{background:var(--primary);color:#fff;justify-content:center;font-weight:600;margin-bottom:8px}
.z-side-link.cta:hover{background:var(--primary-press)}
.z-side-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.z-side-foot a{display:block;color:var(--muted);text-decoration:none;padding:3px 2px}
.z-side-foot a:hover{color:var(--ink)}
.z-main{flex:1;min-width:0;display:flex;flex-direction:column}
.z-main>.z-wrap{flex:1;width:100%;padding-top:22px}
.z-mobtop{display:none;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:saturate(140%) blur(8px);z-index:6}
.z-mobtop .menu{background:none;border:none;font-size:20px;cursor:pointer;color:var(--ink);padding:0}
.z-mobtop b{font:700 15px/1 var(--serif)}
.z-scrim{display:none}
@media(max-width:820px){
  .z-sidebar{position:fixed;inset:0 auto 0 0;z-index:40;transform:translateX(-100%);transition:transform .22s;box-shadow:var(--shadow-lg)}
  body.zs-open .z-sidebar{transform:none}
  .z-scrim{display:block;position:fixed;inset:0;background:rgba(30,17,22,.4);z-index:39;opacity:0;pointer-events:none;transition:.2s}
  body.zs-open .z-scrim{opacity:1;pointer-events:auto}
  .z-mobtop{display:flex}
}

/* owner vs visitor on a shared routine page */
.visitor-only{display:none}
body.visitor .visitor-only{display:block}
body.visitor .owner-only{display:none}

/* "What I'm using" shelf add form */
.shelf-add{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.shelf-add input{border:1px solid var(--line);border-radius:10px;padding:11px 13px;font:inherit;background:#fff;color:var(--ink)}
.shelf-add input:focus{outline:none;border-color:var(--accent)}

/* ── Final polish: tactile press + gentle entrance (honors reduced-motion) ── */
.z-btn,.ik-opt,.z-chip,.card,.rt-row,.grwz-strip{transition:transform .08s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease}
.z-btn:active,.ik-opt:active,.z-chip:active,.card:active,.grwz-strip:active{transform:translateY(1px)}
@keyframes z-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.row,.z-tile,.z-verdict{animation:z-rise .26s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion: reduce){.row,.z-tile,.z-verdict{animation:none}}

/* ── v3 mobile bottom tab bar (phones only; desktop uses the sidebar) ───── */
.z-tabbar{display:none}
@media(max-width:820px){
  .z-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:35;
    background:rgba(255,255,255,.96);backdrop-filter:saturate(140%) blur(10px);
    border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .z-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    background:none;border:none;cursor:pointer;text-decoration:none;color:var(--muted);
    font:600 12px/1 var(--sans);padding:5px 2px}
  .z-tab svg{width:22px;height:22px}
  .z-tab.on{color:var(--accent-2)}
  /* keep page content clear of the fixed bar */
  .z-main{padding-bottom:64px}
  body.has-tabbar{padding-bottom:64px}
}
/* "You" sheet (bottom) */
.z-sheet-scrim{position:fixed;inset:0;background:rgba(43,33,28,.38);z-index:45}
.z-sheet{position:fixed;left:0;right:0;bottom:0;z-index:46;background:var(--paper);
  border-radius:20px 20px 0 0;max-width:var(--maxw);margin:0 auto;
  padding:8px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:var(--shadow-lg)}
.z-sheet-grab{width:40px;height:4px;border-radius:999px;background:var(--line);margin:6px auto 12px}
.z-sheet-h{font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2);margin:0 2px 8px}
.z-sheet-link{display:block;color:var(--ink);text-decoration:none;padding:12px 4px;border-bottom:1px solid var(--line-soft);font-size:15px}
.z-sheet-link:hover{color:var(--accent-2)}

/* ── Tabbed dashboard (the /r "Your skin" page) ───────────────────────── */
.pchips{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 0}
.pchip{font:600 12.5px/1 var(--sans);color:var(--ink);background:#f0ecf3;border-radius:999px;padding:7px 11px;text-transform:capitalize}
.aj{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-top:14px}
.aj-h{font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2);margin-bottom:6px}
.aj-goal{font:600 17px/1.3 var(--serif);color:var(--ink);text-transform:capitalize}
.aj-when{font-size:12.5px;color:var(--muted);margin-top:7px}
.dash-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:22px 0 18px;overflow-x:auto}
.dash-tab{appearance:none;background:none;border:none;cursor:pointer;padding:11px 12px;font:600 14px/1 var(--sans);
  color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.dash-tab:hover{color:var(--ink)}
.dash-tab.on{color:var(--ink);border-bottom-color:var(--accent)}
.dash-actions{display:flex;flex-direction:column;gap:8px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
/* Collapsible "My Routine" sections (native <details> accordion) */
.dash-sec{border-top:1px solid var(--line)}
.dash-sec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  padding:16px 2px;font:600 17px/1 var(--serif);color:var(--ink)}
.dash-sec>summary::-webkit-details-marker{display:none}
.dash-sec>summary::after{content:"›";margin-left:auto;color:var(--muted);font-size:20px;transition:transform .2s}
.dash-sec[open]>summary::after{transform:rotate(90deg)}
.dash-secbody{padding:2px 2px 20px}
/* Top-right account avatar + dropdown menu */
.acct{position:relative;display:flex;align-items:center}
.acct-av{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--accent-soft);
  color:var(--accent-2);font:600 13px/1 var(--sans);cursor:pointer;display:flex;align-items:center;justify-content:center}
.acct-menu{position:absolute;top:38px;right:0;background:var(--paper);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);min-width:190px;padding:6px;z-index:50}
.acct-menu a{display:block;padding:9px 11px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:14px}
.acct-menu a:hover{background:var(--accent-soft)}
.acct-email{padding:7px 11px;font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line-soft);
  margin-bottom:4px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Trust seal — the shop/derm network's verification badge ──────────────
   Four tiers, four honest states: an empty outline for "just prospected" all
   the way up to a pressed, gold-ringed seal for "gold." Never a single flat
   checkmark — the whole point is that trust here is earned in stages, and the
   badge should look like it, not just say it. Compact enough for inline use
   in a listing row; .z-seal.lg for anywhere it's the whole point (e.g. a shop
   profile header). Gold stays exactly where the v3.1 refresh put it: a note,
   never a button. */
.z-seal{--sz:28px;width:var(--sz);height:var(--sz);border-radius:50%;flex:none;position:relative;
  display:inline-flex;align-items:center;justify-content:center}
.z-seal.lg{--sz:64px}
/* The monogram inverts with the tier: dark on the two light/outline tiers,
   cream on the two pressed burgundy ones. One rule per ground, so it can never
   go invisible on whichever half it lands on. */
.z-seal .mk{font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:calc(var(--sz) * .42);line-height:1}
.z-seal.unverified .mk{color:var(--line)}
.z-seal.self_reported .mk{color:var(--gold)}
.z-seal.spot_checked .mk,.z-seal.gold .mk{color:var(--gold-soft)}
.z-seal.unverified{border:1.5px dashed var(--line)}
.z-seal.self_reported{border:1.5px solid var(--gold)}
.z-seal.self_reported::after{content:"";position:absolute;inset:22%;border-radius:50%;border:1px solid var(--gold-soft)}
.z-seal.spot_checked,.z-seal.gold{
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.32), transparent 45%),
    conic-gradient(from 210deg, #7a2a4a, var(--primary) 40%, var(--primary-press) 70%, #7a2a4a);
  box-shadow:0 1px 2px rgba(30,17,22,.15), 0 3px 8px rgba(30,17,22,.18);
}
.z-seal.gold{box-shadow:0 0 0 2px var(--gold), 0 1px 2px rgba(30,17,22,.15), 0 3px 8px rgba(30,17,22,.18)}
.z-seal-row{display:inline-flex;align-items:center;gap:8px}
.z-seal-label{font:700 12px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.z-seal.spot_checked~.z-seal-label,.z-seal.gold~.z-seal-label{color:#7a5a20}

/* ── Shop network — consumer surfaces ─────────────────────────────────────
   "Available near you" sits inside a routine step, so it must read as a quiet
   aside, not a second CTA competing with the routine itself. Gold hairline,
   no fill: present, not shouting. */
.near-you{margin-top:10px;border-top:1px solid var(--line-soft);padding-top:9px}
.near-you-h{font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:7px}
.near-shop{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:10px;
  text-decoration:none;color:inherit;border:1px solid transparent}
.near-shop:hover{background:var(--cream);border-color:var(--line)}
.near-shop .z-seal{--sz:22px}
.near-shop-b{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.near-shop-b b{font-size:13.5px}
.near-shop-m{font-size:12.5px;color:var(--muted)}
.near-shop-p{font:600 13px/1 var(--sans);color:var(--ink);flex:none}

/* shop profile */
.shop-head{display:flex;align-items:center;gap:14px;margin-top:14px}
.shop-tier{margin-top:12px;background:var(--gold-soft);border:1px solid #e2cfa4;border-radius:var(--r);
  padding:10px 13px;font-size:13.5px;color:#6d5120}
.shop-tier-link{display:block;margin-top:3px;font-size:12.5px;color:var(--accent-2)}
.shop-flag{background:none;border:0;color:var(--muted);font:500 12.5px/1 var(--sans);
  cursor:pointer;text-decoration:underline;padding:4px 0 0}
.shop-flag:hover{color:var(--block)}

/* directory */
.dir-filter{margin:14px 0 6px}
.dir-filter select{font:inherit;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.dir-row{display:flex;align-items:center;gap:11px;padding:12px 10px;border-bottom:1px solid var(--line-soft);
  text-decoration:none;color:inherit}
.dir-row:hover{background:var(--cream)}
.dir-b{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.dir-b span{font-size:12.5px}
.dir-n{font:600 12px/1 var(--sans);color:var(--muted);flex:none}
.dir-cta{margin-top:26px;padding:18px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);display:flex;flex-direction:column;gap:3px;text-align:center;align-items:center}
.dir-cta span{font-size:13px}

/* trust explainer */
.trust-tiers{display:flex;flex-direction:column;gap:16px;margin-top:22px}
.trust-tier{display:flex;gap:14px;align-items:flex-start}
.trust-tier>div{display:flex;flex-direction:column;line-height:1.5}
.trust-tier b{font-size:14.5px}
.trust-tier span{font-size:13.5px;color:var(--muted)}

/* invite codes — these get read aloud and typed, so they're monospace-wide
   and tappable, not decorative. */
.invite-codes{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.invite-code{font:700 13px/1 var(--sans);letter-spacing:.06em;background:var(--paper);
  border:1.5px solid var(--gold);color:#6d5120;border-radius:999px;padding:10px 15px;cursor:pointer}
.invite-code:hover{background:var(--gold-soft)}
.invite-code.copied{background:var(--sage-soft);border-color:var(--sage);color:var(--sage)}