/* meno.scita.health — Scita Design System v3 (6 Sep 2026).
   Web surface: linen-25 ground, Montserrat only, Dark Cyan actions, coral as warmth never a control.
   Values are the v3 tokens verbatim from handoff/scita-marketing/globals.css. */

@import url("fonts.css");

:root {
  /* Teal spine */
  --cyan-900:#0E3234; --cyan-800:#133F41; --cyan-700:#1B5155; --cyan-600:#2A6A6D;
  --cyan-500:#4E7E81; --cyan-400:#6D9EA1; --cyan-100:#DEEAE8; --cyan-50:#EEF4F3;
  /* Coral — warmth, never a control */
  --coral-600:#BE4C2E; --coral-500:#D9603F; --coral-300:#F2B8A2; --coral-50:#FEF4F0;
  /* Linen — warm neutrals */
  --linen-25:#FEFCFA; --linen-100:#F5EEE6; --linen-200:#EDE3D8;
  /* Ink — exactly three text tiers, nothing fainter */
  --ink-900:#1A2C2C; --ink-700:#3C4E49; --ink-500:#626B69;
  /* Hairlines */
  --line-soft:#EBE2D7; --line:#DCD2C6; --line-cool:#C9DAD9;

  /* Web-surface semantics: components read these, never a ramp directly */
  --paper:var(--linen-25);
  --card:#FFFFFF;
  --sunk:var(--linen-100);
  --ink:var(--ink-900);
  --ink-2:var(--ink-700);
  --ink-3:var(--ink-500);
  --accent:var(--cyan-800);        /* actions */
  --accent-2:var(--cyan-600);      /* action hover LIGHTENS, deliberate inversion */
  --accent-bg:var(--cyan-50);
  --rule-accent:var(--coral-500);
  --text-eyebrow:var(--coral-600);
  --focus-ring:var(--cyan-500);

  /* Alert tiers — bordered bands with text labels, never bare colour */
  --alert-referral:#BE4C2E; --alert-referral-bg:var(--coral-50);
  --flag:var(--alert-referral); --flag-bg:var(--alert-referral-bg);

  /* Domain colours, desaturated below coral so a control always wins against data */
  --d-cog:#8B77B8; --d-metab:#5D9A67; --d-cardio:#C4584A; --d-msk:#6287B7; --d-immune:#A87B45;

  /* Warm shadows only. A cool shadow on a warm ground undoes the palette. */
  --shadow-warm:0 1px 2px rgba(126,77,52,.05), 0 1px 3px rgba(126,77,52,.07);
  --shadow-warm-md:0 4px 10px rgba(126,77,52,.07), 0 2px 4px rgba(126,77,52,.05);

  /* Radius by intent */
  --r-pill:9999px; --r-card:20px; --r-tile:16px; --r-chip:13px; --r-data:12px;
  --radius:var(--r-card);

  --mast:52px; --measure:68ch;
  --ease:cubic-bezier(.22,.61,.36,1);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink);
  font-family:Montserrat,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16px; line-height:1.58; -webkit-font-smoothing:antialiased; }
:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; border-radius:3px; }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:8px; top:8px; z-index:200; background:var(--accent); color:#fff; padding:10px 16px; }

.masthead { height:var(--mast); position:sticky; top:0; z-index:40; background:var(--paper);
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:16px; padding:0 20px; }
.brand { font-family:Montserrat,system-ui,sans-serif; font-size:22px; color:var(--ink); text-decoration:none; }
.reasoning-toggle { margin-left:auto; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-size:13.5px; color:var(--ink-2); user-select:none; }
.reasoning-toggle input { width:34px; height:20px; appearance:none; -webkit-appearance:none; margin:0;
  background:var(--line); border-radius:999px; position:relative; cursor:pointer; transition:background .18s ease; }
.reasoning-toggle input::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:50%; background:var(--card); transition:transform .18s ease; }
.reasoning-toggle input:checked { background:var(--accent); }
.reasoning-toggle input:checked::after { transform:translateX(14px); }
.reasoning-toggle input:checked + span { color:var(--ink); font-weight:600; }

/* Two independent scrollers on desktop: the map never scrolls away from the reading, and the
   conversation has a column of its own rather than a strip across the bottom. */
.shell { display:grid; grid-template-columns:54fr 46fr; height:calc(100vh - var(--mast)); }
.stage { padding:22px 24px 30px; border-right:1px solid var(--line); overflow-y:auto; }
.reading { position:relative; min-height:0; overflow:hidden; }
.reading-scroll { height:100%; overflow-y:auto; padding:22px 24px 104px; }

.focusbar { min-height:78px; margin-bottom:14px; }
#headline { font-family:Montserrat,system-ui,sans-serif; font-size:clamp(23px,2.4vw,31px); font-weight:500;
  line-height:1.15; letter-spacing:-.012em; margin:0 0 6px; text-wrap:balance; transition:opacity .2s ease; }
#subline { margin:0; color:var(--ink-2); font-size:15.5px; transition:opacity .2s ease; min-height:24px; }
.fading { opacity:0; }

.controls { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.switcher-btn, .skip-btn { min-height:44px; display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:999px;
  padding:0 16px; font:inherit; font-size:14.5px; font-weight:500; cursor:pointer; }
.switcher-btn:hover, .skip-btn:hover { border-color:var(--accent-2); }
.switcher-btn .dot, #switch-count { color:var(--ink-3); font-weight:400; }
.skip-btn .beats { display:inline-flex; gap:4px; margin-left:3px; }
.skip-btn .beats i { width:4px; height:4px; border-radius:50%; background:var(--line); display:block; }
.skip-btn .beats i.on { background:var(--accent); }
.skip-btn[hidden] { display:none; }

.picker-lead { font-size:14.5px; color:var(--ink-2); margin:0 0 8px; max-width:60ch; }
.chiprow { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; transition:opacity .4s ease; }
.chip { min-height:36px; border-radius:var(--r-chip); border:1px solid var(--line); background:var(--card); border-radius:999px;
  padding:0 14px; font:inherit; font-size:14px; color:var(--ink-2); cursor:pointer;
  display:inline-flex; align-items:center; gap:5px; }
.chip:hover { border-color:var(--accent-2); color:var(--ink); }
.chip.is-on { background:var(--accent); border-color:var(--accent); color:#fff; }
.chip .age { color:var(--ink-3); font-size:13px; }
.chip.is-on .age { color:rgba(255,255,255,.75); }
.chip.missing { border-style:dashed; border-color:var(--accent-2); color:var(--accent); }

.root-plate { display:none; }

.fanwrap { margin:4px 0 12px; }
#fan { width:100%; height:auto; display:block; overflow:visible; }
#fan text { font-family:Montserrat,system-ui,sans-serif; fill:var(--ink); }
#fan .nlab { font-size:12px; }
#fan .nbox { fill:var(--card); stroke:var(--line); }
#fan .nbox.root { fill:var(--sunk); }
#fan .symicon { fill:none; stroke:var(--ink-3); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
#fan g.node { cursor:pointer; }
#fan g.node.flat { cursor:default; }
#fan g.node, #fan path.edge { transition:opacity .28s ease; }
#fan .bloodmark { fill:var(--accent); }
#fan .badge { font-size:9.5px; fill:var(--ink-3); }

.tailline { font-size:14px; color:var(--ink-2); margin:0 0 14px; max-width:var(--measure); }
.tailline b { color:var(--ink); }

.legend { border-top:1px solid var(--line-soft); padding-top:12px; }
.legend p { margin:0 0 4px; font-size:12.5px; color:var(--ink-3); line-height:1.45; }
.legend-keys { display:flex; flex-wrap:wrap; gap:14px; margin-top:8px !important; }
.legend-keys span { display:inline-flex; align-items:center; gap:6px; }
.legend-keys i { display:inline-block; width:20px; height:0; border-top:3px solid var(--ink-3); }
.legend-keys i.k2 { border-top-width:2.4px; border-top-style:dashed; }
.legend-keys i.k1 { border-top-width:1.8px; border-top-style:dotted; }
.legend-keys i.kb { width:9px; height:9px; border:0; border-radius:2px; background:var(--accent); }

.card h2 { font-family:Montserrat,system-ui,sans-serif; font-size:25px; font-weight:500; line-height:1.18;
  margin:0 0 4px; text-wrap:balance; }
.card .eyebrow { font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3);
  font-weight:600; margin:0 0 6px; }
.card p { margin:0 0 .85em; max-width:var(--measure); }
.card .narr { font-family:Montserrat,system-ui,sans-serif; font-size:19px; line-height:1.5; }
/* Portrait head: illustration left, words right. The image is decorative and sized in CSS;
   it must never push the name below the fold on a phone. */
.persona-head { display:grid; grid-template-columns:clamp(104px,26%,150px) 1fr; gap:16px;
  align-items:stretch; margin:0 0 18px; }
.persona-image { margin:0; border-radius:var(--radius); overflow:hidden; background:var(--sunk);
  border:1px solid var(--line); min-height:150px; }
/* Height comes from the text beside it, so the pair reads as one intro block. object-position is
   biased upwards so the figure survives a tall crop. */
.persona-image img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 28%; }
.persona-words { min-width:0; }
.persona-words .eyebrow, .persona-words h2, .persona-words p { max-width:none; }
.persona-words p:last-child { margin-bottom:0; }
.card .turn { border-left:3px solid var(--accent); padding-left:15px; margin:0 0 18px; }
.card .turn p { margin:0 0 .5em; } .card .turn p:last-child { margin:0; }
.card .turn .em { font-weight:600; }
.card h3 { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
  font-weight:600; margin:20px 0 7px; }
.relief { background:var(--accent-bg); border-radius:var(--radius); padding:13px 16px; margin:0 0 18px; font-size:15px; }
.relief b { color:var(--accent); }
.tests { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; padding:0; }
.tests li { list-style:none; font-size:12.5px; background:var(--sunk); border-radius:999px; padding:4px 11px; color:var(--ink-2); }
.flagblock { border:1px solid var(--line); border-left:3px solid var(--flag); background:var(--flag-bg);
  border-radius:7px; padding:12px 15px; margin:0 0 14px; font-size:15px; }
.flagblock h4 { margin:0 0 4px; font-size:14px; color:var(--flag); }
.flagblock p { margin:0; color:var(--ink-2); }
.condlist { list-style:none; padding:0; margin:0 0 16px; border-top:1px solid var(--line); }
.condrow { display:grid; grid-template-columns:1fr auto; gap:3px 12px; align-items:baseline;
  padding:11px 4px; border-bottom:1px solid var(--line-soft); cursor:pointer; }
.condrow:hover { background:var(--sunk); }
.condrow .cn { font-size:15.5px; font-weight:600; display:flex; align-items:center; gap:8px; }
.condrow .cn i { width:3px; height:15px; border-radius:2px; display:inline-block; }
.condrow .cw { grid-column:1/-1; font-size:13.5px; color:var(--ink-3); }
.condrow .ct { font-size:12px; color:var(--accent); background:var(--accent-bg); border-radius:999px;
  padding:2px 9px; white-space:nowrap; }
.note { font-size:13.5px; color:var(--ink-3); margin:0 0 10px; }
.morebtn { border:0; background:none; color:var(--accent); font:inherit; font-size:14.5px; font-weight:600;
  cursor:pointer; padding:8px 0; }

/* Newest last, as a conversation reads, inside the drawer's own scroller. */
.transcript { padding-bottom:8px; }
.qa { border-top:1px solid var(--line); padding-top:16px; margin-top:16px; }
.qa:first-child { border-top:0; padding-top:4px; margin-top:0; }
.qa .asked { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin:0 0 5px; }
.qa .qtext { font-size:15.5px; margin:0 0 12px; color:var(--ink-2); }
.qa .ans p { font-size:16px; margin:0 0 .8em; }
.qa .ans ol, .qa .ans ul { font-size:16px; margin:0 0 .8em; padding-left:1.4em; }
.qa .ans li { margin:0 0 .45em; }
.qa .ans li > ul { margin:.4em 0 0; }
.qa .ans .ans-h { font-weight:600; margin-bottom:.35em; }
.qa .ans.safety { background:var(--flag-bg); border-left:3px solid var(--flag); padding:12px 15px; border-radius:7px; }
.qa .ans.notice { color:var(--ink-3); font-size:14.5px; }
.srcs { margin-top:10px; }
.src { padding:9px 0; border-top:1px solid var(--line-soft); }
.grade { display:inline-block; font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:999px; margin-bottom:5px; }
.g-high { background:var(--accent-bg); color:var(--accent); }
.g-mod { background:var(--sunk); color:var(--ink-2); }
.g-low { background:var(--sunk); color:var(--ink-3); }
.src-t { margin:0 0 2px; font-size:14.5px; line-height:1.4; }
.src-t a { color:var(--ink); }
.src-m { margin:0; font-size:12.5px; color:var(--ink-3); }
.thinking { color:var(--ink-3); font-size:14.5px; }

/* Chat drawer: sits over the lower half of the reading column, slides down to a bar. */
.chatpanel { position:absolute; left:0; right:0; bottom:0; height:52%; min-height:280px;
  display:flex; flex-direction:column; background:var(--card);
  border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(126,77,52,.10);
  transition:transform .26s cubic-bezier(.2,.7,.3,1); z-index:20; }
/* Collapsed is header plus ask box, with the conversation hidden, so the input is always
   reachable. Sliding the whole panel down would push the input off the bottom. */
.chatpanel.is-down { height:auto; min-height:0; }
.chatpanel[hidden] { display:none; }
.chatpanel.is-down .chat-scroll { display:none; }
.chat-head { flex:0 0 auto; display:flex; align-items:center; gap:10px; width:100%;
  border:0; background:none; font:inherit; cursor:pointer; padding:9px 24px 8px; text-align:left; }
.chat-head .grip { width:30px; height:4px; border-radius:999px; background:var(--line); flex:0 0 auto; }
.chat-title { font-size:14px; font-weight:600; color:var(--ink); }
.chat-count { font-size:12.5px; color:var(--ink-3); margin-left:auto; }
.chat-head .chev { color:var(--ink-3); transition:transform .26s ease; }
.chatpanel.is-down .chat-head .chev { transform:rotate(180deg); }
.chat-scroll { flex:1; overflow-y:auto; padding:0 24px; min-height:0; }
.askdock { flex:0 0 auto; background:var(--card); border-top:1px solid var(--line-soft); padding:10px 24px 12px; }
.ask-privacy { margin:8px 0 0; font-size:11.5px; color:var(--ink-3); line-height:1.45; }
.ask-privacy b { color:var(--ink-2); }
.ask-row { display:flex; gap:9px; align-items:flex-end; max-width:1000px; }
.ask-row textarea { flex:1; border:1px solid var(--line); border-radius:9px; padding:10px 13px; font:inherit;
  font-size:15.5px; resize:none; background:var(--paper); color:var(--ink); min-height:44px; max-height:120px; }
.btn { min-height:44px; border:1px solid var(--accent); background:var(--accent); color:#fff;
  border-radius:9px; padding:0 20px; font:inherit; font-size:15px; font-weight:600; cursor:pointer; }
.btn:hover { background:var(--accent-2); }
.btn[disabled] { opacity:.5; cursor:default; }

.furniture { padding:16px 24px 110px; border-top:1px solid var(--line); background:var(--sunk); }
.furniture p { margin:0 0 6px; font-size:13px; color:var(--ink-2); line-height:1.5; max-width:90ch; }
.furniture p:last-child { color:var(--ink); font-weight:600; margin:0; }

.sheet { position:fixed; inset:0; z-index:60; background:rgba(26,44,44,.38); display:flex;
  justify-content:center; align-items:flex-end; }
.sheet[hidden] { display:none; }
.sheet-in { background:var(--paper); width:100%; max-width:620px; max-height:88vh; border-radius:16px 16px 0 0;
  display:flex; flex-direction:column; overflow:hidden; }
.sheet-head { display:flex; gap:10px; padding:14px; border-bottom:1px solid var(--line); }
.sheet-head input { flex:1; border:1px solid var(--line); border-radius:9px; padding:11px 13px; font:inherit;
  font-size:16px; background:var(--card); color:var(--ink); }
.sheet-close { border:0; background:none; font-size:26px; line-height:1; color:var(--ink-3); cursor:pointer; padding:0 8px; }
.sheet-list { overflow-y:auto; padding-bottom:20px; }
.sheet-group { font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
  font-weight:600; padding:14px 18px 5px; position:sticky; top:0; background:var(--paper); }
.sheet-row { width:100%; min-height:52px; display:flex; align-items:center; justify-content:space-between;
  gap:14px; border:0; border-bottom:1px solid var(--line-soft); background:none; font:inherit;
  font-size:15.5px; color:var(--ink); text-align:left; padding:10px 18px; cursor:pointer; }
.sheet-row:hover { background:var(--sunk); }
.sheet-row .n { font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; }

.boot { position:fixed; inset:0; display:grid; place-items:center; background:var(--paper); color:var(--ink-3); z-index:90; }
.boot.err { color:var(--flag); padding:30px; text-align:center; }
.boot[hidden] { display:none; }

@media (max-width: 900px) {
  .shell { grid-template-columns:1fr; }
  .shell { grid-template-columns:1fr; height:auto; }
  .stage { border-right:0; border-bottom:1px solid var(--line); overflow:visible; padding:18px 16px 22px; }
  .reading { display:block; overflow:visible; position:static; }
  .reading-scroll { height:auto; overflow:visible; padding:18px 16px 20px; }
  .chatpanel { position:fixed; height:72vh; min-height:0; z-index:45; }
  .chat-head { padding:9px 16px 8px; }
  .chat-scroll { padding:0 16px; }
  .askdock { padding:8px 14px 10px; }
  .ask-privacy { display:none; }
  .furniture { padding:16px 16px 140px; }
  .askdock { padding:8px 14px 10px; }
  .ask-privacy { display:none; }
  .root-plate { display:block; position:sticky; top:var(--mast); z-index:20; background:var(--paper);
    border-bottom:1px solid var(--line); margin:0 -16px 8px; padding:9px 16px 8px; }
  .root-plate p { margin:0; }
  #root-label { font-size:16px; font-weight:600; line-height:1.3; }
  #root-count { font-size:13px; color:var(--ink-3); margin-top:2px !important; }
  .persona-head { grid-template-columns:112px 1fr; gap:13px; }
  .persona-image { min-height:130px; }
}

@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }

/* ---------- for her doctor: method only, never extra clinical content ---------- */
.ledger[hidden] { display:none; }
.ledger { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; padding:11px 14px; margin:0 0 16px;
  background:var(--sunk); border:1px solid var(--line); border-radius:var(--radius); }
.ledger .lstat { display:inline-flex; align-items:baseline; gap:5px; font-size:13px; }
.ledger .lstat b { font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; }
.ledger .lstat i { font-style:normal; color:var(--ink-3); }
.ledger .lwarn { font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--flag); background:var(--flag-bg); border-radius:999px; padding:3px 10px; }
.ledger .llead { flex-basis:100%; margin:2px 0 0; font-size:13px; color:var(--ink-2); }

.method { border-top:2px solid var(--ink); margin-top:26px; padding-top:14px; }
.method h3 { margin:0 0 10px; }
.method .mnote { font-size:13.5px; color:var(--ink-2); margin:0 0 9px; max-width:none; }
.method .mflag { font-size:13.5px; margin:12px 0; padding:10px 13px; border-left:3px solid var(--flag);
  background:var(--flag-bg); border-radius:0 7px 7px 0; color:var(--ink-2); max-width:none; }
.method .masking { font-size:13.5px; color:var(--ink); font-weight:600; margin:12px 0 0; max-width:none; }
.method .mh4 { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
  font-weight:600; margin:18px 0 7px; font-family:Montserrat,system-ui,sans-serif; }
.method .mgaps { margin:0; padding-left:18px; }
.method .mgaps li { font-size:13.5px; color:var(--ink-2); margin-bottom:5px; }
.mtwrap { overflow-x:auto; border:1px solid var(--line); border-radius:7px; margin:0 0 10px; }
.mtable { border-collapse:collapse; width:100%; font-size:12.5px; min-width:520px; }
.mtable th { text-align:left; font-weight:600; color:var(--ink-3); background:var(--sunk);
  padding:7px 9px; border-bottom:1px solid var(--line); white-space:nowrap; font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; }
.mtable td { padding:7px 9px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.mtable tr:last-child td { border-bottom:0; }
.mtable td.mno { color:var(--flag); font-weight:600; }
body.doc-mode #fan .badge { fill:var(--ink-2); font-weight:600; }

.workpoint { background:var(--sunk); border-left:3px solid var(--ink-3); border-radius:0 7px 7px 0;
  padding:10px 14px; margin:0 0 16px; }
.workpoint p { margin:0; font-size:13.5px; color:var(--ink-2); max-width:none; }

.outside { background:var(--sunk); border-radius:var(--radius); padding:14px 17px; margin:0 0 18px; }
.outside h3 { margin:0 0 5px; }
.outside p { margin:0; font-size:15px; color:var(--ink-2); max-width:none; }
.clinlabel { font-family:"JetBrains Mono",ui-monospace,Menlo,monospace; font-size:12.5px;
  color:var(--ink-3); margin:-2px 0 12px !important; }
.condrow .cw.clin { font-family:ui-monospace,Menlo,monospace; font-size:11.5px; color:var(--ink-3); opacity:.85; }

/* ---------- domain signature ---------- */
.signature { margin:0 0 18px; }
.signature h3 { margin:0 0 8px; }
.sigrow { display:flex; flex-direction:column; gap:6px; }
.sigitem { display:grid; grid-template-columns:22px 118px minmax(60px,1fr); gap:10px; align-items:center; }
.sigico { display:inline-flex; }
.signame { font-size:14px; color:var(--ink); }
.sigbar { height:7px; border-radius:999px; background:var(--sunk); overflow:hidden; max-width:200px; }
.sigfill { display:block; height:100%; border-radius:999px; }
.signote { font-size:12.5px; color:var(--ink-3); margin:8px 0 0; }
.standing { color:var(--ink-2) !important; }
.tests li.more { color:var(--ink-3); }
.relief .tests { margin:9px 0 0; }

/* ---------- what can be done: two tracks, different provenance ---------- */
.dobox { border-top:1px solid var(--line); margin-top:22px; padding-top:16px; }
.dobox h3 { margin:0 0 10px; }
.dotabs { display:inline-flex; gap:3px; background:var(--sunk); border-radius:999px; padding:3px; margin:0 0 12px; }
.dotab { border:0; background:none; font:inherit; font-size:13.5px; font-weight:500; color:var(--ink-2);
  padding:6px 15px; border-radius:999px; cursor:pointer; }
.dotab.is-on { background:var(--card); color:var(--ink); box-shadow:var(--shadow-warm); }
.dopane[hidden] { display:none; }
.dolead { font-size:13.5px; color:var(--ink-2); margin:0 0 12px; }
.dolist { list-style:none; padding:0; margin:0 0 10px; }
.dolist li { display:grid; grid-template-columns:132px 1fr; gap:12px; align-items:start;
  padding:11px 0; border-top:1px solid var(--line-soft); }
.isotag { font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  color:var(--accent); background:var(--accent-bg); border-radius:4px; padding:3px 8px;
  justify-self:start; line-height:1.3; }
.isotext { font-size:14.5px; color:var(--ink); }
.dopending { border:1px dashed var(--line); border-radius:var(--radius); background:var(--sunk); padding:14px 16px; }
.dopending p { margin:0 0 9px; font-size:14px; color:var(--ink-2); max-width:none; }
.dopending a { font-size:14px; font-weight:600; }
@media (max-width:900px){ .dolist li { grid-template-columns:1fr; gap:5px; } }

/* ---------- v3 eyebrow motif: coral text with a 26x3 coral rule ---------- */
.eyebrow, .card .eyebrow, .dobox .eyebrow, .waitbox .eyebrow {
  display:flex; align-items:center; gap:10px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-eyebrow); margin:0 0 8px;
}
.eyebrow::before { content:""; width:26px; height:3px; border-radius:2px; background:var(--rule-accent); flex:0 0 auto; }

.dopending { border:1px solid var(--line); border-radius:var(--r-card); background:var(--sunk); padding:15px 17px; }
.dopending p { margin:0 0 9px; font-size:14.5px; color:var(--ink-2); max-width:none; }
.dopending a { font-size:14.5px; font-weight:600; color:var(--cyan-800); }
.dopending .cite { font-size:12.5px; color:var(--ink-3); margin:9px 0 0; }

/* ---------- waitlist: the ask, after the value ---------- */
.waitbox { border-top:1px solid var(--line); margin-top:26px; padding-top:18px; }
.waitbox[hidden] { display:none; }
.waitlead { font-size:15px; color:var(--ink-2); margin:0 0 12px; max-width:var(--measure); }
.waitrow { display:flex; gap:9px; flex-wrap:wrap; margin:0 0 9px; }
.waitrow a.btn { display:inline-flex; align-items:center; text-decoration:none; }
.waitrow input { flex:1; min-width:200px; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:11px 18px; font:inherit; font-size:15px; background:var(--card); color:var(--ink); }
.btn.pill { border-radius:var(--r-pill); padding:0 22px; }
.waitprivacy { font-size:12.5px; color:var(--ink-3); margin:0 0 6px; }
.waitdecline { border:0; background:none; padding:6px 0; font:inherit; font-size:13.5px;
  color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.waitdecline:hover { color:var(--ink); }

.pilot { font-size:12px; color:var(--ink-3); margin-top:8px !important; font-style:italic; }

/* Faces on the landing screen: the six women are the strongest asset and should not
   be hidden behind a click. */
.chip-face { padding-left:5px; gap:8px; }
.chipav { width:28px; height:28px; border-radius:50%; object-fit:cover; object-position:50% 22%;
  background:var(--sunk); flex:0 0 auto; }
.chip.is-on .chipav { outline:2px solid var(--card); outline-offset:-1px; }


/* ---------- standing orientation: never behind the one-time reveal ---------- */
.brand img { display:block; height:39px; width:auto; }
.intro { margin:0 0 18px; max-width:var(--measure); }
#site-title { font-size:clamp(24px,2.5vw,32px); font-weight:600; letter-spacing:-.015em;
  line-height:1.15; margin:0 0 8px; text-wrap:balance; }
.site-lead { font-size:16px; color:var(--ink-700); margin:0 0 12px; }
.howto { list-style:none; counter-reset:h; padding:0; margin:0 0 10px; display:flex;
  flex-direction:column; gap:6px; }
.howto li { counter-increment:h; display:grid; grid-template-columns:22px 1fr; gap:10px;
  align-items:baseline; font-size:14px; color:var(--ink-700); }
.howto li::before { content:counter(h); width:20px; height:20px; border-radius:50%;
  background:var(--cyan-50); color:var(--cyan-800); font-size:11.5px; font-weight:600;
  display:grid; place-items:center; }
.no-ask { font-size:12.5px; color:var(--ink-500); margin:0; }
.focusbar { min-height:auto; margin:0 0 14px; padding-top:14px; border-top:1px solid var(--line-soft); }
.focus-name { font-size:20px; font-weight:600; letter-spacing:-.01em; margin:0 0 2px;
  transition:opacity .2s ease; }
.focus-sub { font-size:14px; color:var(--ink-500); margin:0; transition:opacity .2s ease; min-height:20px; }

/* ---------- the fold: the map is the first thing on every screen ---------- */
.intro { margin:0 0 12px; }
.site-lead { font-size:15px; margin:0 0 4px; }
.no-ask { margin:0 0 6px; }
.howto-wrap summary, .method-wrap summary { display:inline-flex; align-items:center; gap:6px; cursor:pointer; list-style:none;
  font-size:13px; font-weight:600; color:var(--accent); min-height:28px; }
.howto-wrap summary::-webkit-details-marker, .method-wrap summary::-webkit-details-marker { display:none; }
.howto-wrap summary::after, .method-wrap summary::after { content:""; width:6px; height:6px; border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .18s ease; }
.howto-wrap[open] summary::after, .method-wrap[open] summary::after { transform:rotate(-135deg) translateY(-1px); }
.howto-wrap .howto { margin:6px 0 4px; }
.method-wrap { margin-top:10px; }
.legend .method p { margin:8px 0 0; font-size:14px; color:var(--ink-2); line-height:1.55; max-width:68ch; }
/* The focus title and the switcher share one row, under one hairline. */
.shell > * { min-width:0; }
.focusrow { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:8px 14px;
  border-top:1px solid var(--line-soft); padding-top:10px; margin:0 0 10px; }
.focusrow .focusbar { border-top:0; padding-top:0; margin:0; flex:1 1 300px; min-width:0; }
.focusrow .controls { margin:0; }
#headline { font-size:clamp(20px,1.7vw,24px); margin:0 0 2px; }
.picker-lead { margin:0 0 6px; font-size:13.5px; max-width:none; }
.chiprow { margin-bottom:10px; }

@media (max-width: 900px) {
  /* On a phone the six faces come before the instructions, in one scrolling row, and the lead
     that repeats what the faces show is dropped, so the map is on the first screen. */
  .stage { display:flex; flex-direction:column; }
  .stage > .ledger { order:0; } .stage > .intro { order:1; } .stage > .chiprow { order:2; }
  .stage > .focusrow { order:3; } .stage > .root-plate { order:5; }
  /* After the opening sequence the sticky plate carries the same title, so the bar steps aside. */
  body.reveal-done .stage .focusbar { display:none; }
  .stage > .fanwrap { order:6; } .stage > .tailline { order:7; } .stage > .legend { order:8; }
  .stage > .picker-lead { display:none; }
  #site-title { font-size:22px; margin:0 0 4px; }
  .site-lead { font-size:14px; }
  .chiprow { flex-wrap:nowrap; overflow-x:auto; margin:0 -16px 8px; padding:2px 16px 6px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .chiprow::-webkit-scrollbar { display:none; }
  .chip { flex:0 0 auto; }
}

/* ---------- invitation code ---------- */
.askdock[hidden] { display:none; }
.code-label { display:block; font-size:13.5px; font-weight:600; color:var(--ink); margin:0 0 7px; }
.code-in { flex:1; border:1px solid var(--line); border-radius:9px; padding:10px 13px; font:inherit; font-size:15.5px;
  letter-spacing:.06em; text-transform:uppercase; background:var(--paper); color:var(--ink); min-height:44px; min-width:0; }
.code-msg { margin:7px 0 0; font-size:13px; color:var(--flag); min-height:0; }
.code-msg:empty { display:none; }
.linkbtn { border:0; background:none; padding:0; font:inherit; font-size:inherit; font-weight:600; color:var(--accent);
  cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.qa .ans.notice .linkbtn { font-size:14px; margin-top:2px; }
@media (max-width: 900px) {
  /* The transparency line stays visible next to the box on a phone. */
  .askdock .ask-privacy { display:block; font-size:11px; margin-top:6px; }
}