/* umeed landing.css | build ARTICLES-2 | 2026-09-28
   The article pages need this build or newer. If they look unstyled,
   this line is the first thing to check. */
/* umeed-public/assets/landing.css
   Shared by the chat (index.html) and the about page (about.html). */

:root{
  --ground:#FCFAF7; --surface:#FFFFFF; --surface-2:#F5F2F8; --rail:#F7F4F1;
  --ink:#1D1626; --ink-2:#5A5170; --ink-3:#6E6685;   /* 2026-10-21: was #8F87A0, which read at 3.0 to 3.4 against the paper panels. Small print is where legibility is actually lost. */
  --line:#EAE5EF; --line-2:#DBD4E3;
  --violet:#6A34D1; --violet-soft:#F0EAFC; --on-violet:#FFFFFF;
  --gold:#8F6208; --gold-soft:#FBF1DC;   /* 2026-10-21: was #C98A12 at 2.6 on its own soft background. Only ever used as text on --gold-soft. */
  --mint:#15866A; --mint-soft:#DFF3EC;
  --alert:#C0243C; --alert-soft:#FCEBEE; --alert-line:#EFB3BE;
  --serif:'Fraunces', Georgia, serif;
  --sans:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --shadow:0 1px 2px rgba(29,22,38,.05), 0 10px 30px rgba(29,22,38,.05);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#151019; --surface:#1C1622; --surface-2:#251E2E; --rail:#181220;
    --ink:#F5F1F8; --ink-2:#BAB0C7; --ink-3:#8B8397;
    --line:#2E2638; --line-2:#3E3449;
    --violet:#B79AF5; --violet-soft:#2C2240; --on-violet:#1A1229;
    --gold:#E7B44A; --gold-soft:#372A12;
    --mint:#5FCFA8; --mint-soft:#143229;
    --alert:#FF93A5; --alert-soft:#381A21; --alert-line:#642934;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.28);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button{font:inherit}
:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* =============================================================== shell */
.shell{display:grid;grid-template-columns:262px minmax(0,1fr);height:100dvh}
.rail{background:var(--rail);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:14px 12px;gap:4px;overflow-y:auto}
.railtop{display:flex;align-items:center;gap:9px;padding:6px 8px 14px}
.mark{width:30px;height:30px;flex:none;border-radius:8px;display:block}
.wordmark{font-family:var(--serif);font-size:18px;font-weight:700;letter-spacing:-.01em}

.newbtn{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:var(--surface);
  border:1px solid var(--line-2);border-radius:11px;padding:10px 12px;font-size:14px;font-weight:600;
  color:var(--ink);cursor:pointer;box-shadow:var(--shadow)}
.newbtn:hover{border-color:var(--violet);color:var(--violet)}

.railnav{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.railitem{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;font-size:14px;
  font-weight:500;color:var(--ink-2);text-decoration:none;background:none;border:0;cursor:pointer;text-align:left;width:100%}
.railitem:hover{background:var(--surface-2);color:var(--ink)}
.railitem[aria-current="page"]{background:var(--violet-soft);color:var(--violet);font-weight:600}
.railitem svg{flex:none;opacity:.75}
.railitem .ext{margin-left:auto;opacity:.5}
.raillabel{font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);padding:16px 12px 6px}
.railfoot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:7px}
.railnote{font-size:11.5px;color:var(--ink-3);line-height:1.5;padding:4px 12px 0}

.btn{border-radius:10px;padding:9px 14px;font-size:14px;font-weight:600;cursor:pointer;
  border:1px solid transparent;text-decoration:none;display:inline-block;text-align:center}
.btn-ghost{background:var(--surface);color:var(--ink-2);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--violet);color:var(--violet)}
.btn-solid{background:var(--violet);color:var(--on-violet)}
.btn-solid:hover{filter:brightness(1.07)}
.btn-code{background:var(--gold-soft);color:var(--gold);font-family:var(--mono);font-size:12.5px}

/* =============================================================== main */
.stage{display:flex;flex-direction:column;min-width:0;height:100dvh}
.topbar{display:flex;align-items:center;gap:9px;justify-content:flex-end;padding:13px 22px}
.topbar .who{margin-right:auto;font-size:13px;color:var(--ink-3)}
.scroller{flex:1;overflow-y:auto;padding:0 22px}
.col{max-width:720px;margin:0 auto;width:100%;padding-bottom:20px}

/* ------------------------------------------------------------- the hero
   One question, on a place. The landscape is an inline SVG rather than an
   image: nothing to download, nothing to go stale, and no character, so the
   page does not promise a particular game. The words sit on the hill, which
   is why they are white and why there is a soft shadow under them. */
.opening{position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(520px,74vh,700px);display:flex;flex-direction:column;justify-content:flex-end;
  text-align:center;border-radius:22px;margin:4px 0 10px;padding:0}
.opening .scene{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block}
/* just enough darkening at the foot of the hill to hold text at any size */
/* The text block grows when the starter chips load, so the shading has to
   reach further up than the text ever does, not just to the hill. */
.opening::after{content:"";position:absolute;left:0;right:0;bottom:0;height:82%;z-index:-1;
  background:linear-gradient(180deg,
    rgba(18,46,20,0) 0%,
    rgba(18,46,20,.14) 28%,
    rgba(18,46,20,.34) 52%,
    rgba(16,42,18,.50) 100%)}
.openinner{position:relative;padding:0 26px 34px}
.opening h1{font-family:var(--serif);font-size:clamp(26px,3.4vw,40px);font-weight:600;
  letter-spacing:-.022em;margin:0 0 10px;line-height:1.16;color:#fff;
  text-shadow:0 2px 14px rgba(12,34,14,.42)}
.opening p{margin:0 auto 20px;max-width:46ch;font-size:clamp(14.5px,1.3vw,16.5px);
  color:rgba(255,255,255,.94);text-shadow:0 1px 10px rgba(12,34,14,.4)}
.opening .starters{max-width:600px;margin:0 auto}
/* the starter chips read as glass on the hill rather than cards on paper */
.opening .starters > *{background:rgba(255,255,255,.90)!important;
  border-color:rgba(255,255,255,.55)!important;
  box-shadow:0 2px 12px rgba(12,34,14,.18)}
.opening .starters > *:hover{background:#fff!important}

@media (max-width:760px){
  .opening{min-height:clamp(440px,68vh,560px);border-radius:18px}
  .openinner{padding:0 16px 24px}
  .opening p{margin-bottom:15px}
}
@media (prefers-reduced-motion:no-preference){
  .opening .scene{animation:sceneIn .9s ease-out both}
  @keyframes sceneIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
}

/* =============================================================== thread */
.thread{display:flex;flex-direction:column;gap:22px;padding:22px 0 4px}
.turn-u{align-self:flex-end;max-width:78%;background:var(--violet-soft);color:var(--ink);
  padding:11px 16px;border-radius:16px 16px 5px 16px;font-size:15px;animation:rise .2s ease-out}
.turn-a{display:flex;gap:12px;align-items:flex-start;animation:rise .2s ease-out}
@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.miniLogo{width:26px;height:26px;flex:none;margin-top:3px;border-radius:7px;display:block}
.bub{min-width:0;flex:1}
.bub p{margin:0 0 13px;font-size:15.5px;line-height:1.72}
.bub p:last-child{margin-bottom:0}
.bub .caveat{font-size:13px;color:var(--ink-3);border-left:2px solid var(--line-2);padding-left:13px;margin-top:15px}
.caret{display:inline-block;width:2px;height:1em;background:var(--violet);vertical-align:-2px;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.dots{display:inline-flex;gap:5px;padding:5px 0}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);opacity:.35;animation:pulse 1.1s infinite}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
@keyframes pulse{0%,60%,100%{opacity:.3}30%{opacity:1}}
.srcline{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:15px}
.srclab{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:800}
.srcchip{font-family:var(--mono);font-size:10.5px;padding:3px 9px;border-radius:999px;background:var(--mint-soft);color:var(--mint);font-weight:500}

.bub.alert{background:var(--alert-soft);border:1px solid var(--alert-line);border-radius:14px;padding:17px 19px}
.bub.alert p{color:var(--alert)}
.bub.alert p:first-of-type{font-weight:700}
.bub.alert .caveat{border-left-color:var(--alert-line);color:var(--alert);opacity:.85}
.bub.alert .srcchip{background:transparent;border:1px solid var(--alert-line);color:var(--alert)}
.alerthead{display:flex;align-items:center;gap:7px;color:var(--alert);font-weight:800;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;margin-bottom:10px}

.bub.redirect{background:var(--surface-2);border-radius:14px;padding:16px 18px}
.bub.redirect p{font-size:14.5px}
.gotoabout{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:14px;font-weight:700;
  color:var(--violet);text-decoration:none}
.gotoabout:hover{text-decoration:underline;text-underline-offset:3px}

/* =============================================================== media */
.shot{margin:16px 0 0;padding:0}
.shot img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line);background:var(--surface-2)}
.shot figcaption{margin-top:9px;font-size:12.5px;color:var(--ink-3);line-height:1.55}
.shot iframe{display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--line);border-radius:14px}
.playwrap{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:14px;overflow:hidden;line-height:0}
.playwrap:hover .playbtn{transform:translate(-50%,-50%) scale(1.06)}
.playbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;
  background:var(--violet);color:var(--on-violet);display:grid;place-items:center;
  box-shadow:0 6px 22px rgba(29,22,38,.32);transition:transform .14s;padding-left:4px}
.playlabel{position:absolute;left:13px;bottom:12px;background:rgba(18,12,26,.76);color:#fff;
  font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;line-height:1.4}

/* =============================================================== composer */
.dock{padding:6px 22px 18px;background:linear-gradient(to bottom,transparent,var(--ground) 32%)}
.cbox{max-width:720px;margin:0 auto;display:flex;gap:9px;align-items:flex-end;background:var(--surface);
  border:1px solid var(--line-2);border-radius:22px;padding:7px 7px 7px 18px;box-shadow:var(--shadow)}
.cbox:focus-within{border-color:var(--violet)}
.cbox textarea{flex:1;border:0;background:none;font:inherit;font-size:15.5px;color:var(--ink);outline:none;
  min-width:0;resize:none;padding:11px 0;max-height:160px;line-height:1.55}
.cbox textarea::placeholder{color:var(--ink-3)}
.send{border:0;background:var(--violet);color:var(--on-violet);border-radius:50%;width:36px;height:36px;
  flex:none;cursor:pointer;display:grid;place-items:center;margin-bottom:3px}
.send:disabled{opacity:.35;cursor:not-allowed}
.dockrow{max-width:720px;margin:11px auto 0;display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center}
.meter{font-family:var(--mono);font-size:11px;font-weight:500;padding:5px 11px;border-radius:999px;background:var(--gold-soft);color:var(--gold)}
.meter.out{background:var(--alert-soft);color:var(--alert)}
.meter.free{background:var(--mint-soft);color:var(--mint)}
.linkish{background:none;border:0;padding:0;color:var(--violet);font-size:12.5px;font-weight:700;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.fine{max-width:720px;margin:10px auto 0;text-align:center;font-size:11.5px;color:var(--ink-3);line-height:1.55}

/* =============================================================== starters */
/* Whimsy stands beside the four questions and is exactly as tall as they are,
   which is why the row stretches rather than centers. */
.askrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:stretch;
  max-width:700px;margin:28px auto 0}
.whimsy{height:100%;width:auto;max-height:290px;object-fit:contain;object-position:bottom;align-self:end}
.starters{display:flex;flex-direction:column;gap:9px;min-width:0}
.starter{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);
  border-radius:13px;padding:14px 16px;font-size:14.5px;color:var(--ink);cursor:pointer;text-align:left;
  flex:1;transition:border-color .12s,transform .12s}
.starter:hover{border-color:var(--violet);transform:translateY(-1px)}
.starter[disabled]{opacity:.4;cursor:not-allowed;transform:none;border-color:var(--line)}
.starter .arr{margin-left:auto;color:var(--ink-3);flex:none}

/* =============================================================== cards */
.card{background:var(--surface);border:1px solid var(--violet);border-radius:16px;padding:20px 22px;
  box-shadow:var(--shadow);margin:20px 0 0}
.card.good{border-color:var(--mint);background:var(--mint-soft)}
.card h3{font-family:var(--serif);font-size:19px;font-weight:600;margin:0 0 7px}
.card p{margin:0 0 13px;font-size:14.5px;color:var(--ink-2)}
.card p:last-child{margin-bottom:0}
.unlock{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:8px}
.unlock li{display:flex;gap:9px;font-size:14px}
.tick{color:var(--mint);font-weight:800}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row input{flex:1;min-width:190px;font:inherit;font-size:14.5px;padding:10px 15px;border:1px solid var(--line-2);
  border-radius:10px;background:var(--surface);color:var(--ink)}
.err{background:var(--alert-soft);color:var(--alert);border-radius:12px;padding:11px 16px;font-size:14px;margin:14px 0 0}

/* =============================================================== mobile */
.railtoggle{display:none;background:none;border:0;padding:6px;cursor:pointer;color:var(--ink-2)}
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .rail{position:fixed;inset:0 auto 0 0;width:270px;z-index:50;transform:translateX(-100%);transition:transform .2s}
  .rail.open{transform:none;box-shadow:0 0 40px rgba(29,22,38,.25)}
  .railtoggle{display:grid;place-items:center;margin-right:auto}
  .topbar .who{display:none}
  .opening h1{font-size:26px}
  .turn-u{max-width:88%}
  /* CHANGED 2026-09-30. Whimsy used to drop underneath the questions on a
     phone, which put her below the fold and made the opening read as four
     plain buttons. She now stands beside them as she does on desktop, on a
     narrow fixed column so the questions keep the width they need. */
  .askrow{grid-template-columns:minmax(0,1fr) 104px;gap:14px;max-width:none}
  /* CHANGED 2026-09-30. align-self:end left him glued to the bottom of a
     question stack twice his height, which looked like he had slipped off
     the end of it. Centred on both axes he reads as standing beside the
     questions. object-position matters too: if the box ever letterboxes he
     centres inside it rather than dropping to its floor. */
  .whimsy{max-height:none;width:104px;height:auto;
    align-self:center;justify-self:center;object-position:center}
  .starter{padding:12px 13px;font-size:13.5px;gap:8px}
}

/* Smallest phones: she gets narrower rather than being dropped. Below this
   the questions would wrap to four lines each, which is worse than a
   slightly smaller character. */
@media (max-width:380px){
  .askrow{grid-template-columns:minmax(0,1fr) 78px;gap:10px}
  .whimsy{width:78px;align-self:center;justify-self:center;object-position:center}
  .starter{padding:11px 12px;font-size:13px}
  .starter .arr{display:none}
}

/* ============================================================ about page */
body.aboutpage{height:auto}
.about{max-width:860px;margin:0 auto;padding:0 24px 24px}
.aboutbar{position:sticky;top:0;z-index:10;background:var(--ground);border-bottom:1px solid var(--line);padding:13px 24px}
.aboutbar .inner{max-width:860px;margin:0 auto;width:100%;display:flex;align-items:center;gap:10px}
.brand{display:flex;align-items:center;gap:10px;flex:1;text-decoration:none;color:inherit}

/* One measure for prose, one for headings, and enough air between sections
   that a reader can tell where one idea stops. Headings balance their line
   breaks rather than leaving one word stranded on the last line. */
.hero{padding:84px 0 62px;border-bottom:1px solid var(--line)}
.hero h1{font-family:var(--serif);font-size:42px;font-weight:700;letter-spacing:-.025em;
  line-height:1.16;margin:0 0 20px;max-width:19ch;text-wrap:balance}
.hero p{font-size:18.5px;line-height:1.66;color:var(--ink-2);margin:0;max-width:56ch;text-wrap:pretty}

.sec{padding:68px 0;border-bottom:1px solid var(--line)}
.sec:last-of-type{border-bottom:0}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--violet);margin-bottom:15px}
.sec h2{font-family:var(--serif);font-size:30px;font-weight:700;letter-spacing:-.02em;
  line-height:1.26;margin:0 0 20px;max-width:26ch;text-wrap:balance}
.sec p{font-size:16px;line-height:1.75;color:var(--ink-2);margin:0 0 18px;max-width:66ch;text-wrap:pretty}
.sec p:last-child{margin-bottom:0}
.sec .lead{font-size:18px;line-height:1.66;color:var(--ink);margin-bottom:24px}
.quiet{font-size:14px;line-height:1.7;color:var(--ink-3);border-left:2px solid var(--line-2);
  padding-left:18px;margin-top:36px;max-width:64ch}
/* Prose that follows a row of cards needs its own air. Without this the
   paragraph sits flush against the card edges and the section reads as one
   undifferentiated block. */
.grid3 + p, .figures + p, .doors + p{margin-top:34px}

.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin:34px 0 4px}
.figure{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px}
.figure b{display:block;font-family:var(--serif);font-size:36px;font-weight:700;line-height:1;
  color:var(--violet);letter-spacing:-.02em}
.figure span{display:block;margin-top:11px;font-size:13.5px;color:var(--ink-2);line-height:1.6}

.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:32px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px}
.tile h3{font-family:var(--serif);font-size:18.5px;font-weight:700;line-height:1.32;
  margin:0 0 11px;text-wrap:balance}
.tile p{font-size:14px;line-height:1.72;margin:0;max-width:none}
.stepn{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--violet);
  color:var(--on-violet);font-size:13px;font-weight:800;margin-bottom:14px}

.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.door{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:24px;text-decoration:none;color:inherit;transition:border-color .12s}
.door:hover{border-color:var(--violet)}
.door.pick{border-color:var(--violet)}
.door h3{font-family:var(--serif);font-size:19px;font-weight:700;margin:0}
.door p{font-size:14px;line-height:1.7;margin:0;flex:1;max-width:none}
.door-go{font-size:14px;font-weight:700;color:var(--violet)}

.foot{border-top:1px solid var(--line);padding:38px 24px 54px}
.foot .inner{max-width:860px;margin:0 auto;display:flex;gap:30px;justify-content:space-between;flex-wrap:wrap}
.foot p{font-size:13.5px;line-height:1.65;color:var(--ink-3);margin:8px 0 0;max-width:42ch}
.foot nav{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.foot nav a{font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none}
.foot nav a:hover{color:var(--violet)}

@media (max-width:640px){
  /* FIXED 2026-09-30. The top bar was a single non-wrapping flex row, so on
     a 390px phone "Start free" sat 54px off the right edge and the whole
     page scrolled sideways. It predates the privacy page; the new page just
     inherited it. The bar now wraps to a second line instead. */
  .aboutbar{padding:11px 16px}
  .aboutbar .inner{flex-wrap:wrap;gap:7px}
  .aboutbar .brand{flex:1 0 100%}
  .aboutbar .btn{padding:7px 11px;font-size:12.5px}

  .about{padding:0 20px 20px}
  .hero{padding:50px 0 40px}
  .hero h1{font-size:30px;max-width:none}
  .hero p{font-size:17px}
  .sec{padding:48px 0}
  .sec h2{font-size:25px;max-width:none}
  .foot .inner{gap:22px}
}

.policylinks{display:flex;gap:20px;flex-wrap:wrap;margin-top:6px}
.policylinks a{font-size:14.5px;font-weight:600;color:var(--violet);text-decoration:underline;text-underline-offset:3px}

/* ============================================================== sign in
   signin.html. The form's ids are fixed by umeed-auth/auth.js, so the
   markup there is not free to change; only the dressing is ours. */
.authpage{max-width:860px;margin:0 auto;padding:52px 24px 70px}
.authwrap{display:grid;grid-template-columns:minmax(0,1fr) 384px;gap:46px;align-items:start}
.authside h1{font-family:var(--serif);font-size:34px;line-height:1.15;letter-spacing:-.02em;
  margin:6px 0 16px;max-width:15ch;text-wrap:balance}
.authside p{color:var(--ink-2);font-size:15px;line-height:1.7;margin:0 0 14px;max-width:38ch;text-wrap:pretty}
.authside .authnote{font-size:13.5px;color:var(--ink-3);border-left:2px solid var(--line-2);padding-left:14px}

.authcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:26px 24px 22px;box-shadow:var(--shadow)}
.authcard h3{font-family:var(--serif);font-size:21px;letter-spacing:-.01em;margin:0 0 6px}
.authcard .authsub{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin:0 0 18px}

.authcard .field{margin-bottom:14px}
.authcard .field label{display:block;font-size:12px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.authcard input,.authcard select{width:100%;background:var(--ground);color:var(--ink);
  border:1px solid var(--line-2);border-radius:10px;padding:11px 13px;font:inherit;font-size:14.5px}
.authcard input:focus,.authcard select:focus{outline:none;border-color:var(--violet);
  box-shadow:0 0 0 3px var(--violet-soft)}
.authcard input::placeholder{color:var(--ink-3)}

.rolepick{display:flex;gap:7px;flex-wrap:wrap}
.rolepick button{flex:1 1 auto;background:var(--ground);border:1px solid var(--line-2);border-radius:10px;
  padding:9px 10px;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
.rolepick button:hover{border-color:var(--violet);color:var(--violet)}
.rolepick button.selected{background:var(--violet-soft);border-color:var(--violet);color:var(--violet)}

.btn-wide{width:100%;display:block;text-align:center;margin-top:4px}
.authcard .btn-wide + .btn-wide{margin-top:9px}

.auth-message{border-radius:10px;padding:10px 13px;font-size:13px;font-weight:600;
  line-height:1.5;margin-bottom:15px}
.auth-message.error{background:var(--alert-soft);color:var(--alert);border:1px solid var(--alert-line)}
.auth-message.success{background:var(--mint-soft);color:var(--mint)}
.auth-message.info{background:var(--surface-2);color:var(--ink-2)}

.auth-toggle{text-align:center;font-size:13.5px;color:var(--ink-3);margin:16px 0 0}
.auth-toggle a{color:var(--violet);font-weight:700;text-decoration:none}
.auth-toggle a:hover{text-decoration:underline}

@media (max-width:760px){
  .authpage{padding:32px 20px 54px}
  .authwrap{grid-template-columns:minmax(0,1fr);gap:26px}
  .authside h1{font-size:28px;max-width:none}
  .authside p{max-width:none}
}

/* contact.html reuses the sign-in card. Two additions only. */
.authcard textarea{width:100%;background:var(--ground);color:var(--ink);border:1px solid var(--line-2);
  border-radius:10px;padding:11px 13px;font:inherit;font-size:14.5px;min-height:118px;resize:vertical}
.authcard textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}
.authcard .field.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}


/* A pasted URL or token with no spaces used to overflow the column and force
   the whole chat sideways: max-width cannot constrain an unbreakable word. */
.turn-u,.bub p,.bub li,.srcchip{overflow-wrap:anywhere;word-break:break-word}

/* ---------------------------------------------------------------- FAQ list
   Native <details>, so it works with no JavaScript and a screen reader
   announces the open/closed state without us inventing anything. */
.faq{margin-top:30px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:17px 34px 17px 0;position:relative;
  font-size:16px;font-weight:600;color:var(--ink);line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:24px;width:9px;height:9px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .18s ease}
.faq details[open] summary::after{transform:rotate(-135deg);top:28px}
.faq summary:hover{color:var(--violet)}
.faq summary:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px}
.faq details p{font-size:15px;line-height:1.75;color:var(--ink-2);margin:0 0 18px;max-width:64ch}

/* The model disclaimer under the composer, the way every assistant carries
   one. Deliberately small and always present rather than dismissible. */
.disclaimer{font-size:11.5px;line-height:1.5;color:var(--ink-3);text-align:center;
  margin:9px 0 0;max-width:none}



/* ============================================================== articles

   Built to the pattern the agency newsrooms settled on, because it is the
   pattern their readers already know how to read: a kicker, a large
   headline, a standfirst, a byline with a share row, then one wide image
   with its credit, then a narrow column of text that pull quotes and figures
   break out of.

   Two widths do all the work. 1120px for anything full width, 680px for
   anything that is read. Everything else is spacing. */
.artpage .aboutbar .inner{max-width:1120px}
.hub-in,.story-top-in,.story-stats-in,.story-cta-in,.story-more-in{
  max-width:1120px;margin:0 auto;padding:0 24px;width:100%}
.story-col{max-width:728px;margin:0 auto;padding:0 24px}

/* The headline block and the text column share one left edge. They did not
   at first: the header ran to 1120 and the body to 680, and the two halves
   of the same article read as two different pages. Only the photograph, the
   figures band and the cards are allowed to be wider than the reading
   column. */
.story-top-in{max-width:728px}
.story-hero,.story-stats-in,.story-cta-in,.story-more-in,.hub-in{max-width:1120px}

/* ------------------------------------------------------------- the hub */
.hub{padding-bottom:72px}
.hub-top{padding:72px 0 40px}
.hub-top h1{font-family:var(--serif);font-size:clamp(38px,6vw,58px);font-weight:700;
  letter-spacing:-.03em;line-height:1.06;margin:0 0 16px;max-width:16ch;text-wrap:balance}
.hub-stand{font-size:19px;line-height:1.6;color:var(--ink-2);margin:0;max-width:48ch}
.story-kicker{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--violet);margin:0 0 14px}

/* the lead story, the one thing on the page that is allowed to be big */
.lead{display:block;max-width:1120px;margin:0 auto 44px;padding:0;text-decoration:none;color:inherit}
.lead-img{display:block;width:100%;aspect-ratio:16/7;border-radius:20px;overflow:hidden;
  background:var(--violet-soft) center/cover no-repeat;border:1px solid var(--line)}
/* No photograph is not a missing photograph. An article without art gets a
   tinted panel and a bigger headline, which looks like a decision; an empty
   grey rectangle where a picture should be looks like a bug. */
.lead--bare{padding:0}
.lead--bare .lead-body{background:linear-gradient(135deg,var(--violet-soft),var(--surface));
  border:1px solid var(--line);border-radius:20px;padding:40px 42px 38px}
.lead--bare .lead-body b{font-size:clamp(28px,3.8vw,42px);max-width:20ch}
.lead-body{display:block;padding:22px 2px 0}
.lead-body em{display:block;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--violet);margin-bottom:11px}
.lead-body b{display:block;font-family:var(--serif);font-size:clamp(25px,3.4vw,36px);font-weight:700;
  letter-spacing:-.025em;line-height:1.18;margin-bottom:12px;max-width:24ch;text-wrap:balance}
.lead-sum{display:block;font-size:16.5px;line-height:1.66;color:var(--ink-2);max-width:62ch;margin-bottom:12px}
.lead-body small,.ncard-body small{display:block;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.lead:hover .lead-body b{text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------------------------ the cards */
.cardgrid{display:grid;gap:30px 26px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
/* The articles page runs two across, not four. With the evaluation holding
   the panel above them, four narrow columns made the short posts look like
   footnotes; two gives each one enough room to be read as a piece in its own
   right. Extra posts wrap into further rows of two. */
.cardgrid--wide{border-top:1px solid var(--line);padding-top:46px;
  grid-template-columns:repeat(2,1fr);gap:44px 36px}
.cardgrid--wide .ncard-body b{font-size:23px}
.cardgrid--wide .ncard-sum{font-size:15.5px;line-height:1.62}
.cardgrid--wide .ncard-img{aspect-ratio:16/9}
@media (max-width:760px){ .cardgrid--wide{grid-template-columns:1fr;gap:34px} }
.ncard{display:block;text-decoration:none;color:inherit}
.ncard-img{display:block;width:100%;aspect-ratio:16/10;border-radius:14px;
  background:var(--surface-2) center/cover no-repeat;border:1px solid var(--line)}
.ncard--bare .ncard-body{border-top:3px solid var(--violet);padding-top:17px}
.ncard-body{display:block;padding:15px 1px 0}
.ncard-body em{display:block;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--violet);margin-bottom:8px}
.ncard-body b{display:block;font-family:var(--serif);font-size:20px;font-weight:700;letter-spacing:-.02em;
  line-height:1.28;margin-bottom:8px;text-wrap:balance}
.ncard-sum{display:block;font-size:14.5px;line-height:1.6;color:var(--ink-2);margin-bottom:9px}
.ncard:hover .ncard-body b{text-decoration:underline;text-underline-offset:3px}

/* ----------------------------------------------------------- the story */
.story{padding-bottom:0}
.story-top{padding:34px 0 30px}
.story-top--bare{background:linear-gradient(180deg,var(--violet-soft),transparent);padding-bottom:40px}
.story-back{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;
  color:var(--ink-3);text-decoration:none;margin-bottom:26px}
.story-back:hover{color:var(--violet)}
.story-h1{font-family:var(--serif);font-size:clamp(33px,5.4vw,54px);font-weight:700;
  letter-spacing:-.03em;line-height:1.08;margin:0 0 20px;text-wrap:balance}
.story-stand{font-size:20px;line-height:1.55;color:var(--ink-2);margin:0 0 30px;text-wrap:pretty}

.story-by{display:flex;align-items:center;gap:13px;padding-top:22px;border-top:1px solid var(--line)}
.story-av{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;
  background:var(--violet);color:#fff;font-weight:800;font-size:16px}
.story-by-t{flex:1;min-width:0}
.story-by-t b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.story-by-t small{display:block;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:2px}
.story-share{display:flex;gap:7px;flex:none}
.story-share a,.story-share button{display:grid;place-items:center;width:34px;height:34px;padding:0;
  border-radius:50%;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-3);cursor:pointer}
.story-share a:hover,.story-share button:hover{border-color:var(--violet);color:var(--violet)}
.story-copy.ok{border-color:var(--violet);color:var(--violet)}
.story-copy.ok::after{content:"Copied";position:absolute;margin-top:-52px;font-family:var(--mono);
  font-size:10.5px;background:var(--ink);color:var(--ground);padding:4px 8px;border-radius:6px}

.story-hero{margin:0 auto 8px;max-width:1120px;padding:0 24px}
.story-hero img{width:100%;height:auto;max-height:560px;object-fit:cover;
  border-radius:20px;border:1px solid var(--line);display:block}
.story-hero figcaption{margin:11px 2px 0;font-size:12.5px;line-height:1.55;color:var(--ink-3);max-width:70ch}

/* the figures band, the thing that makes an evidence piece look like one */
.story-stats{margin:40px 0 4px;padding:34px 0;background:var(--surface-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.story-stats-in{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.stat b{display:block;font-family:var(--serif);font-size:clamp(30px,3.6vw,40px);font-weight:700;
  letter-spacing:-.03em;line-height:1;color:var(--violet);margin-bottom:9px}
.stat span{display:block;font-size:14px;line-height:1.55;color:var(--ink-2);max-width:32ch}

/* --------------------------------------------------------- the reading */
.artbody{padding-top:40px}
.artbody p{font-size:18px;line-height:1.75;color:var(--ink-2);margin:0 0 24px;text-wrap:pretty}
.artbody > p:first-child{font-size:20px;line-height:1.62;color:var(--ink)}
.artbody h2{font-family:var(--serif);font-size:28px;font-weight:700;letter-spacing:-.022em;
  line-height:1.26;margin:52px 0 18px;color:var(--ink);max-width:26ch;text-wrap:balance}
.artbody h3{font-size:19px;font-weight:700;margin:38px 0 13px;color:var(--ink)}
.artbody h4{font-size:16px;font-weight:700;margin:28px 0 10px;color:var(--ink)}
.artbody ul,.artbody ol{margin:0 0 24px;padding-left:23px}
.artbody li{font-size:18px;line-height:1.7;color:var(--ink-2);margin:0 0 10px}
.artbody blockquote{margin:0 0 26px;padding:2px 0 2px 22px;border-left:3px solid var(--line-2)}
.artbody blockquote p{font-size:17px;line-height:1.7;color:var(--ink-2);margin:0}
.artbody a{color:var(--violet);text-underline-offset:2px}
.artbody code{font-family:var(--mono);font-size:.86em;background:var(--surface-2);padding:1px 5px;border-radius:5px}
.artbody hr{border:0;border-top:1px solid var(--line);margin:44px 0}
.artbody figure{margin:0 0 30px}
.artbody figure img,.artbody p img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.artbody figcaption{margin-top:10px;font-size:12.5px;color:var(--ink-3);line-height:1.55}

/* a pull quote breaks the column, which is the whole reason it exists */
.artbody .pull{margin:40px 0;padding:0}
.artbody .pull p{font-family:var(--serif);font-size:clamp(23px,3vw,30px);font-weight:600;
  line-height:1.32;letter-spacing:-.02em;color:var(--ink);margin:0;
  padding-left:22px;border-left:4px solid var(--violet);text-wrap:balance}
@media (min-width:900px){ .artbody .pull{margin-left:-90px;margin-right:-90px} }

.artdraft{margin:28px 0 0;padding:12px 15px;border-radius:11px;background:var(--surface-2);
  border:1px dashed var(--line-2);font-size:13px;line-height:1.6;color:var(--ink-3)}

/* ------------------------------------------------------------ the foot */
.artdl{display:flex;align-items:center;gap:16px;margin:48px 0 0;padding:18px 20px;
  border:1px solid var(--line-2);border-radius:16px;background:var(--surface);
  text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.artdl:hover{border-color:var(--violet);transform:translateY(-1px)}
.artdl-ico{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;
  background:var(--violet-soft);color:var(--violet)}
.artdl-txt{flex:1;min-width:0}
.artdl-txt b{display:block;font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.35}
.artdl-txt small{display:block;margin-top:3px;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.artdl-go{flex:none;padding:9px 16px;border-radius:999px;background:var(--violet);color:#fff;
  font-size:13.5px;font-weight:700;white-space:nowrap}

.story-cta{margin-top:64px;padding:40px 0;background:var(--surface-2);border-top:1px solid var(--line)}
.story-cta-in{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.story-cta-in p{flex:1 1 320px;margin:0;font-size:15.5px;line-height:1.65;color:var(--ink-2);max-width:54ch}

.story-more{padding:60px 0 76px}
.story-more h2{font-family:var(--serif);font-size:25px;font-weight:700;letter-spacing:-.02em;margin:0 0 30px}

@media (max-width:640px){
  .hub-top{padding:48px 0 30px}
  .story-top{padding:24px 0 22px}
  .story-stand{font-size:17.5px}
  .artbody p,.artbody li{font-size:17px}
  .artbody > p:first-child{font-size:18.5px}
  .story-share{width:100%;justify-content:flex-start;padding-top:4px}
  .story-by{flex-wrap:wrap}
  .artdl{flex-wrap:wrap;gap:13px}
  .artdl-go{width:100%;text-align:center}
}
.artdl--view .artdl-ico{background:rgba(240,180,41,.16);color:#a8760a}
.artdl--view:hover{border-color:var(--amber,#f0b429)}

/* --------------------------------------------------------------- video

   A still with a play button, and the real player only after a click. The
   page loads nothing from LinkedIn or YouTube until somebody asks it to,
   which is the same rule the study video on the front page follows. */
.artbody .vid{margin:36px 0 30px}
.vid-face,.vid iframe{display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--line);
  border-radius:16px}
.vid-face{position:relative;cursor:pointer;background:linear-gradient(135deg,var(--violet-soft),var(--surface-2));
  display:grid;place-content:center;gap:12px;justify-items:center;padding:0}
.vid-face:hover .vid-play{transform:scale(1.06)}
.vid-play{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:var(--violet);color:#fff;padding-left:3px;transition:transform .15s;
  box-shadow:0 6px 18px rgba(31,24,54,.18)}
.vid-note{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);max-width:34ch;text-align:center;
  line-height:1.5;padding:0 18px}
/* a whole post, not a clip: narrow, tall, centred, and it scrolls inside */
.vid--post{max-width:520px;margin-left:auto;margin-right:auto}
.vid--post .vid-face,.vid--post iframe{aspect-ratio:auto;height:var(--vh,640px)}
.vid--post .vid-play{background:#0a66c2}
.vid--post figcaption{text-align:center}
.vid iframe{border:0}

.artdl--vid .artdl-ico{background:rgba(10,102,194,.12);color:#0a66c2}
.artdl--vid{margin:34px 0 30px}
.artdl--vid:hover{border-color:#0a66c2}

/* ======================================================= example reports
   ADDED 2026-09-30. The companion on this page cannot see a child, which is
   correct, but it meant a visitor never saw the thing they would actually be
   paying for: the report. These cards show the shape of one, for each of the
   three kinds of adult, without pretending any child is real. */
.exwrap{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow);margin:20px 0 0;overflow:hidden}
.exhead{padding:18px 22px 0}
.exhead h3{font-family:var(--serif);font-size:19px;font-weight:600;margin:0 0 5px}
.exhead p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.extabs{display:flex;gap:6px;padding:14px 22px 0;flex-wrap:wrap}
.extab{background:none;border:1px solid var(--line-2);border-radius:999px;padding:6px 14px;
  font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;
  transition:border-color .12s,color .12s,background .12s}
.extab:hover{border-color:var(--violet)}
.extab[aria-selected="true"]{background:var(--violet);border-color:var(--violet);color:#fff}
.expanel{padding:18px 22px 22px;border-top:1px solid var(--line);margin-top:14px}
.exmeta{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);margin:0 0 10px}
.exstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:9px;margin:0 0 16px}
.exstat{border:1px solid var(--line);border-radius:11px;padding:10px 12px;background:var(--ground)}
.exstat .k{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.exstat .v{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.15;margin-top:2px}
.exstat .d{font-size:11.5px;color:var(--ink-3);margin-top:2px;line-height:1.45}
.exsec{margin:0 0 15px}
.exsec:last-child{margin-bottom:0}
.exsec h4{font-size:12px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;
  color:var(--violet);margin:0 0 6px}
.exsec p{margin:0 0 8px;font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.exsec p:last-child{margin-bottom:0}
.exquote{border-left:3px solid var(--line-2);padding:2px 0 2px 13px;margin:0 0 9px;
  font-size:14.5px;line-height:1.6;color:var(--ink)}
.exquote span{display:block;font-size:12px;color:var(--ink-3);margin-top:4px}
.exfoot{border-top:1px solid var(--line);padding:13px 22px;background:var(--ground);
  font-size:12.5px;color:var(--ink-3);line-height:1.6}
.exfoot b{color:var(--ink-2)}
@media (max-width:640px){
  .exhead,.extabs,.expanel,.exfoot{padding-left:16px;padding-right:16px}
  .exstats{grid-template-columns:1fr 1fr}
}

/* Contents list at the top of the policy. A reader who lands on a plain
   language policy assumes a longer legal one is hiding somewhere; showing
   the whole scope in twelve lines answers that before it is asked. */
.toc{display:flex;flex-wrap:wrap;gap:7px 14px;align-items:baseline;margin:22px 0 0;
  padding:16px 18px;border:1px solid var(--line);border-radius:13px;background:var(--surface)}
.toc b{flex:1 0 100%;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:2px}
.toc a{font-size:14px;color:var(--violet);text-decoration:none;font-weight:600}
.toc a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){ .toc{padding:14px;gap:9px 12px} .toc a{font-size:13.5px} }


/* The hero no longer has a character or a two-column ask row. These rules
   are left disarmed rather than deleted so an older cached index.html does
   not render a broken layout mid-deploy. */
.askrow{display:block}
.whimsy{display:none !important}

/* ===========================================================================
   LANDING, rebuilt: one question in the middle of a place.
   The scene is the page, not a panel. Everything that used to live down the
   left is behind the button in the top right. The example questions are
   gone; the box is the invitation.
   =========================================================================== */

.scene{position:fixed;inset:0;width:100vw;height:100vh;z-index:-2;display:block;
  pointer-events:none}
/* enough darkening to hold white type anywhere it lands */
/* A pool of shade behind the words rather than a wash over the whole lower
   half: the slab look was half the gradient and half the flat ground. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(118% 62% at 50% 46%,
    rgba(12,32,14,.46) 0%, rgba(12,32,14,.30) 38%,
    rgba(12,32,14,.10) 66%, rgba(12,32,14,0) 100%)}

/* The rail is a fixed drawer now, so the shell must stop reserving a column
   for it: everything was being squeezed into 262px of page. */
.shell{display:block!important;grid-template-columns:none!important;
  background:transparent!important;height:100dvh}
.stage{background:transparent!important;height:100dvh}
.scroller{padding:0 22px}
.col{max-width:860px}

/* ---------------------------------------------------------- the drawer */
.rail{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(330px,86vw);
  transform:translateX(104%);transition:transform .22s ease;
  z-index:60;background:var(--paper,#FBF9F4);border-left:1px solid var(--line);
  box-shadow:-18px 0 50px rgba(16,30,18,.22);overflow-y:auto;
  display:flex;flex-direction:column;gap:14px;padding:18px 16px 22px}
.rail.open{transform:none}
.scrim{position:fixed;inset:0;z-index:55;background:rgba(10,26,12,.38);
  backdrop-filter:blur(2px)}
.railbtn{display:block;width:100%;text-align:center;margin-bottom:9px}
.railfoot{margin-top:auto}

/* the only thing left on the page chrome */
.topbar{position:fixed;top:14px;right:16px;left:auto;z-index:50;
  display:flex;gap:8px;justify-content:flex-end;padding:0;background:none;border:0}
.railtoggle{display:inline-flex!important;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:13px;cursor:pointer;
  background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.7);
  color:#1C2A1E;box-shadow:0 4px 18px rgba(14,38,16,.22)}
.railtoggle:hover{background:#fff}

/* ------------------------------------------------- the middle of the page */
.scroller{display:flex;flex-direction:column;justify-content:center;min-height:100vh}
.dock{background:none!important;border:0!important;box-shadow:none!important}

/* the hero state: headline and box together, centred, nothing else */
body:has(#opening:not([hidden])) .stage{
  display:flex;flex-direction:column;justify-content:center;min-height:100vh}
body:has(#opening:not([hidden])) .scroller{min-height:0;flex:0 0 auto;overflow:visible}
body:has(#opening:not([hidden])) .dock{order:2;padding-top:4px}
body:has(#opening:not([hidden])) .col{padding-bottom:0}

.opening{position:static;min-height:0!important;overflow:visible;border-radius:0;
  margin:0;padding:0;display:block;text-align:center}
.opening::after{content:none}
.opening .scene{display:none}
.openinner{padding:0 20px 18px}
.opening h1{font-family:var(--serif);font-size:clamp(30px,4.6vw,54px);font-weight:600;
  letter-spacing:-.024em;line-height:1.1;margin:0 0 12px;color:#fff;
  text-shadow:0 3px 22px rgba(10,30,12,.5)}
.opening p{margin:0 auto;max-width:46ch;font-size:clamp(15px,1.5vw,18px);
  color:rgba(255,255,255,.95);text-shadow:0 2px 14px rgba(10,30,12,.46)}
/* the example questions are gone */
.starters{display:none!important}
.askrow{display:none!important}

/* ------------------------------------------------------------- the box */
.cbox{max-width:720px;margin:0 auto;background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.8);border-radius:18px;
  box-shadow:0 14px 44px rgba(10,30,12,.28)}
.dockrow{justify-content:center}
.dockrow .linkish{color:#fff;text-shadow:0 1px 10px rgba(10,30,12,.5)}
.fine,.disclaimer{color:rgba(255,255,255,.82)!important;
  text-shadow:0 1px 10px rgba(10,30,12,.5);max-width:62ch;margin-left:auto;margin-right:auto}

/* once a conversation starts, the page becomes a page again */
body:has(#opening[hidden]) .scroller{justify-content:flex-start;min-height:0}
body:has(#opening[hidden]) .bub,
body:has(#opening[hidden]) .turn-a{background:rgba(255,255,255,.96);border-radius:16px;
  padding:16px 18px;box-shadow:0 6px 26px rgba(10,30,12,.18)}
body:has(#opening[hidden]) .turn-u{background:rgba(255,255,255,.92)}

@media (max-width:760px){
  .topbar{top:10px;right:10px}
  .railtoggle{width:42px;height:42px}
  .openinner{padding:0 14px 14px}
  .cbox{max-width:none}
}

/* On a narrow screen the placeholder wraps to two lines and was being cut
   off by a box sized for one. */
@media (max-width:760px){
  .cbox{align-items:center}
  #cinput{min-height:52px}
  .openinner{padding:0 14px 16px}
}

/* --------------------------------------------- the fine print, trimmed */
/* Two short lines instead of five, and the row above them collapses when
   the meter is hidden, which it is until a question is asked. */
.dockrow{margin:0;min-height:0;gap:0}
.fine{margin:12px auto 0;font-size:11px;max-width:52ch;line-height:1.5}
.disclaimer{margin:3px auto 0;font-size:11px;max-width:52ch;line-height:1.5;padding:0}

/* ------------------------------------------- let the picture stay bright */
/* The old wash dimmed the whole scene to make the headline legible. Shade
   only what sits behind the words, and let the type carry its own shadow. */
body::before{background:radial-gradient(64% 30% at 50% 40%,
  rgba(10,28,12,.42) 0%, rgba(10,28,12,.26) 48%, rgba(10,28,12,0) 100%)!important}
.opening h1{text-shadow:0 2px 20px rgba(8,26,10,.55),0 1px 3px rgba(8,26,10,.35)}
.opening .sub,.opening p{text-shadow:0 1px 14px rgba(8,26,10,.55)}

/* ------------------------------------------------- the mark, on every page */
/* about, contact, sign in and privacy carry it in the top bar. The landing
   page had it only inside the drawer, so it was the one page with nothing
   on it saying whose page this is. */
.sitebrand{position:fixed;top:15px;left:18px;z-index:40;
  display:flex;align-items:center;gap:10px;text-decoration:none;
  padding:7px 14px 7px 8px;border-radius:15px;
  background:rgba(22,12,42,.30);border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2)}
.sitebrand:hover{background:rgba(22,12,42,.40)}
.sitebrand .mark{width:30px;height:30px;border-radius:9px;object-fit:cover;display:block;flex:none}
.sitebrand .wordmark{color:#fff;font-family:var(--serif);font-size:18px;font-weight:700;
  letter-spacing:-.01em;text-shadow:0 1px 6px rgba(14,6,32,.45)}
@media (max-width:560px){
  .sitebrand{top:10px;left:10px;padding:6px 10px 6px 6px}
  .sitebrand .wordmark{display:none}
}
/* Once a conversation starts the page turns pale, so the mark needs ink. */
body:has(#opening[hidden]) .sitebrand{background:rgba(255,255,255,.88);
  border-color:var(--line)}
body:has(#opening[hidden]) .sitebrand .wordmark{color:var(--violet-2);text-shadow:none}

/* ============================================= UMEED THEME · 2026-10-18
   One background across the whole site, taken from the children's play page
   so the adult side and the child side are visibly the same product. The
   floating emoji mascots stay on the play page: they belong to the child's
   half, not to a teacher's or a funder's.                                  */
:root{
  --ground:#FAF7FE; --surface:#FFFFFF; --surface-2:#F2EDFB; --rail:#F6F2FD;
  --line:#E7E0F4; --line-2:#D6CBEC;
  --violet:#6A34D1; --violet-2:#3C1A8A; --violet-soft:#EFE8FD;
  --u-ink:#2B2140;
  --u-sky:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.14) 0, transparent 40%),
    radial-gradient(circle at 88% 12%, rgba(243,196,80,0.28) 0, transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(63,174,107,0.22) 0, transparent 42%),
    radial-gradient(circle at 8% 82%, rgba(246,165,192,0.25) 0, transparent 42%),
    linear-gradient(160deg, #5B3AC4, #8455F6 60%);
}

/* ------------------------------------------------------- the landing page */
.scene{display:none!important}
html,body{min-height:100%}
/* longhands, not the shorthand: a var() holding several comma-separated
   layers is invalid inside `background:` and the whole declaration is
   dropped, silently, which is why this painted nothing at first. */
body{background-color:#5B3AC4;background-image:var(--u-sky);
  background-attachment:fixed;background-repeat:no-repeat;background-size:cover}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(62% 32% at 50% 40%,
    rgba(26,14,58,.40) 0%, rgba(26,14,58,.20) 52%, rgba(26,14,58,0) 100%)}
.shell{display:block!important;grid-template-columns:none!important;
  background:transparent!important;height:100dvh}
.starters,.askrow{display:none!important}
.cbox{max-width:720px;margin:0 auto;background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.8);border-radius:18px;
  box-shadow:0 14px 44px rgba(26,14,58,.30)}
.dockrow{margin:0;min-height:0;gap:0;justify-content:center}
.fine{margin:12px auto 0;font-size:11px;max-width:52ch;line-height:1.5}
.disclaimer{margin:3px auto 0;font-size:11px;max-width:52ch;line-height:1.5;padding:0}
.fine,.disclaimer{color:rgba(255,255,255,.86)!important;
  text-shadow:0 1px 10px rgba(14,6,32,.5)}
.opening h1{text-shadow:0 2px 20px rgba(14,6,32,.5),0 1px 3px rgba(14,6,32,.3)}
.opening .sub,.opening p{text-shadow:0 1px 14px rgba(14,6,32,.5)}

/* the mark, on every page */
.sitebrand{position:fixed;top:15px;left:18px;z-index:40;
  display:flex;align-items:center;gap:10px;text-decoration:none;
  padding:7px 14px 7px 8px;border-radius:15px;
  background:rgba(43,33,64,.34);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2)}
.sitebrand:hover{background:rgba(43,33,64,.46)}
.sitebrand .mark{width:30px;height:30px;border-radius:9px;object-fit:cover;display:block;flex:none}
.sitebrand .wordmark{color:#fff;font-family:var(--serif);font-size:18px;font-weight:700;
  letter-spacing:-.01em;text-shadow:0 1px 6px rgba(14,6,32,.45)}
@media (max-width:560px){
  .sitebrand{top:10px;left:10px;padding:6px 10px 6px 6px}
  .sitebrand .wordmark{display:none}
}
body:has(#opening[hidden]) .sitebrand{background:rgba(255,255,255,.9);border-color:var(--line)}
body:has(#opening[hidden]) .sitebrand .wordmark{color:var(--violet-2);text-shadow:none}
body:has(#opening[hidden]) .scroller{justify-content:flex-start;min-height:0}
body:has(#opening[hidden]) .bub,
body:has(#opening[hidden]) .turn-a{background:rgba(255,255,255,.97);border-radius:16px;
  padding:16px 18px;box-shadow:0 6px 26px rgba(26,14,58,.20)}
body:has(#opening[hidden]) .turn-u{background:rgba(255,255,255,.93)}

/* ------------------------------- about, contact, privacy and sign in pages */
body.aboutpage{background-color:#5B3AC4;background-image:var(--u-sky);
  background-attachment:fixed;background-repeat:no-repeat;background-size:cover}
.aboutbar{position:sticky;top:0;z-index:10;
  background:rgba(43,33,64,.40);border-bottom:1px solid rgba(255,255,255,.16);
  backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px)}
.aboutbar .wordmark{color:#fff}
.aboutbar .btn-ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.32)}
.aboutbar .btn-ghost:hover{background:rgba(255,255,255,.24);color:#fff;border-color:#fff}

/* the reading pages put their text on paper, over the sky */
.about{background:var(--ground);max-width:860px;margin:0 auto;
  border-radius:0 0 22px 22px;box-shadow:0 20px 60px rgba(26,14,58,.30)}
.about .hero{border-bottom:1px solid var(--line);padding:72px 34px 54px}
.about .sec{padding:56px 34px}
.hero h1{color:var(--violet-2)}
.sec h2{color:var(--violet-2)}
.eyebrow{color:var(--violet)}

/* sign in and contact float their card on the sky */
.authpage{position:relative;max-width:900px;padding:64px 24px 80px}
.authside h1{color:#fff;text-shadow:0 2px 20px rgba(14,6,32,.5),0 1px 3px rgba(14,6,32,.3)}
.authside p{color:rgba(255,255,255,.93);text-shadow:0 1px 12px rgba(14,6,32,.5)}
.authside .authnote{color:rgba(255,255,255,.88);border-left-color:rgba(255,255,255,.45)}
.authside a{color:#F0E2A1}
.authcard{background:rgba(255,255,255,.97);border:1px solid rgba(255,255,255,.8);
  border-radius:20px;box-shadow:0 18px 54px rgba(26,14,58,.34)}
.authcard h3{color:var(--violet-2)}
body.aboutpage:has(.authpage){display:flex;flex-direction:column;min-height:100vh}
body.aboutpage:has(.authpage) main.authpage{flex:1 0 auto}
body.aboutpage:has(.authpage) .foot{flex:none}

/* ------------------------------------------------------------- the violet */
.btn-solid{background:linear-gradient(180deg,#8455F6 0%,#6A34D1 100%);
  border-color:transparent;box-shadow:0 2px 10px rgba(91,58,196,.34)}
.btn-solid:hover{filter:brightness(1.06);box-shadow:0 4px 16px rgba(91,58,196,.42)}
.wordmark{color:var(--violet-2)}
.foot{border-top:1px solid var(--line);background:var(--surface-2)}
.rolepick button.selected{background:var(--violet-soft);border-color:var(--violet);
  color:var(--violet);font-weight:700}

@media (max-width:820px){
  .authwrap{grid-template-columns:minmax(0,1fr)}
  .authpage{padding-top:40px}
  .about{border-radius:0}
  .about .hero,.about .sec{padding-left:20px;padding-right:20px}
}

/* ===========================================================================
   ARTICLES BACK ON PAPER                                        2026-10-21

   My fault, and worth writing down. When the site background became the
   kid page's purple sky, every page that had been designed on white kept
   its dark ink and lost its surface. On /articles and on each story that
   meant the kicker, the standfirst and the whole body of the piece sat as
   near-black text on #5B3AC4: measured contrast between 1.0 and 2.4, where
   4.5 is the floor for body copy. The writing was effectively invisible.

   The fix is the surface, not the ink. Giving the article its paper back
   restores the design the pieces were written for and leaves every colour,
   quote block and card in them untouched. Measured again afterwards:
   nothing on either page is now below 4.5.
   =========================================================================== */
body.artpage article.story,
body.artpage main.hub{
  background:#FBF9FE;
  border-radius:22px;
  margin:14px auto 60px;
  padding:28px clamp(18px,4vw,44px) 44px;
  max-width:1120px;
  box-shadow:0 22px 60px rgba(20,8,48,.26);
}
@media (max-width:760px){
  body.artpage article.story,
  body.artpage main.hub{
    border-radius:16px;
    margin:8px auto 36px;
    padding:20px 16px 32px;
  }
}