/* Fonts are served from this origin, not from a third party.
   ------------------------------------------------------------
   The page used to pull Afacad and Barlow Condensed from fonts.googleapis.com
   and fonts.gstatic.com. That made every visitor's browser announce itself to
   Google on the way to reading a coaching page, put two origins into the
   content security policy that nothing else needed, and turned a font into a
   processor that had to be disclosed in the privacy notice.

   These are the latin subsets only, which is what this site's copy uses, so the
   four files come to about 88 kB in total. They are versioned by path and
   served immutable for a year from netlify.toml. font-display:swap keeps text
   readable while they load; the stack in --head and --text falls back to
   system faces if they never arrive.

   Licensing is unresolved: both families are published under the SIL Open Font
   License 1.1 as far as can be seen, but that has not been verified against the
   files actually committed here. See docs/legal-approvals.md, TECH-3.

   One thing changed with version 1.1 of the legal wording. The notice used to
   name a font processor and used to say there was no third-party script or
   service on the site, and those two sentences meant that putting Google Fonts
   back would have made the notice false. Version 1.1 deleted both, correctly,
   because self-hosting made them obsolete. The effect is that the notice is now
   silent on the subject: nothing in it would contradict a stylesheet link to
   fonts.googleapis.com. What is left holding this line is font-src 'self' in
   netlify.toml, the forbidden-host list in tools/check-origins.mjs, and
   tests/headers.test.mjs and tests/privacy.test.mjs. Do not treat those as
   tidiness. They are the whole guard now. */
@font-face{
  font-family:"Afacad";
  src:url("/assets/fonts/afacad-latin-var.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Afacad";
  src:url("/assets/fonts/afacad-italic-latin-var.woff2") format("woff2");
  font-weight:400 700;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Barlow Condensed";
  src:url("/assets/fonts/barlow-condensed-600-latin.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Barlow Condensed";
  src:url("/assets/fonts/barlow-condensed-700-latin.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Starbuck Coach - the Starbuck & Associates colour system.
   ---------------------------------------------------------------------------
   One set of tokens for the whole site. Components reference these and never a
   loose hex value, so a brand change is one edit here rather than an audit.

   The brand is light-first: white for reading, --brand-surface for the page
   behind it, and --brand-ink reserved for the header and footer. The bright
   brand teal is an accent and a large-type colour, not a background for
   running text: white on #06979D measures 3.54:1, which clears AA for large
   text and fails it for normal text, so --link-default (#04777B, 5.4:1 on
   white) carries anything at body size.

   Two documented exceptions, both driven by a measured failure rather than a
   preference:

   1. Focus. The brand gold #EEB127 on white measures 1.92:1, well under the
      3:1 that WCAG 2.1 1.4.11 asks of a focus indicator. The gold is kept,
      because it is the recognisable Starbuck focus colour, and an ink hairline
      is drawn immediately outside it so the indicator always has a 3:1 edge
      against whatever it sits on, light or dark. See --focus-ring below.

   2. Control borders. --border-default (#D3DEDC, 1.3:1) and --border-strong
      (#A8C2C0, 1.88:1) are both below 3:1 on white. They are used for
      decorative card and section edges, which 1.4.11 does not cover. Anything
      that is the visible boundary of a control uses --control-border
      (#5C7070, 5.18:1) instead.

   #06474A survives as --link-hover, the tested dark hover and active teal.
   #022528, #14201F and #B5FAFC are gone: see the mapping block below. */
:root{
  /* ---- brand ---- */
  --brand-teal:#06979D;
  --brand-teal-dark:#04777B;
  --brand-ink:#2B4141;
  --brand-gold:#EEB127;
  --brand-gold-deep:#ECAB13;
  --brand-cyan-pale:#BBEEF6;
  --brand-cyan-soft:#E6FDFE;
  --brand-surface:#F0F5F5;
  --brand-white:#FFFFFF;

  /* ---- text ---- */
  --text-primary:#2B4141;
  --text-secondary:#334D4D;
  --text-muted:#5C7070;

  /* ---- lines ---- */
  --border-default:#D3DEDC;
  --border-strong:#A8C2C0;
  --control-border:#5C7070;

  /* ---- interaction ---- */
  --focus-ring:#EEB127;
  --focus-edge:#2B4141;
  --link-default:#04777B;
  --link-hover:#06474A;

  /* ---- state ---- */
  --success:#2F6B4F;
  --success-surface:#EDF5F0;
  --warning:#8A5A00;
  --warning-surface:#FDF6E6;
  --error:#8E2F2F;
  --error-surface:#FBF2F0;

  /* ---- disabled ----
     WCAG exempts disabled controls from the text-contrast rule. That exemption
     is not taken here: the start button is disabled on the one screen where a
     person most needs to read why they cannot proceed. --text-muted on this
     surface measured 4.09:1, so the label is a step darker and measures
     4.80:1. The state is never signalled by colour alone: the cursor changes
     and a live region says what is still outstanding. */
  --disabled-surface:#DCE5E4;
  --disabled-text:#526565;
  --disabled-border:#C2D0CF;

  /* ---- mapping from the previous palette ----
     Each legacy name is kept and pointed at the token that carries its role,
     so every existing rule resolves through the system above. Nothing here
     introduces a new colour.

       --slate    was the dark ground            -> --brand-ink
       --slate-d  was a darker ground            -> --link-hover (tested)
       --slate-x  was #022528, near-black teal   -> --brand-ink (drift removed)
       --teal     stays the bright brand accent  -> --brand-teal
       --teal-d   was #04676B                    -> --brand-teal-dark
       --teal-l   was #B5FAFC, near-duplicate    -> --brand-cyan-pale
       --gold     was #ECAB13                    -> --brand-gold
       --pale/--paper were two near-white greys  -> --brand-surface / white
       --ink      was #14201F, near-black        -> --text-primary
       --body     was #31423F                    -> --text-secondary
       --warn     was error red                  -> --error */
  --slate:var(--brand-ink);
  --slate-d:var(--link-hover);
  --slate-x:var(--brand-ink);
  --teal:var(--brand-teal);
  --teal-d:var(--brand-teal-dark);
  --teal-l:var(--brand-cyan-pale);
  --gold:var(--brand-gold);
  --gold-d:var(--brand-gold-deep);
  --gold-l:#F7BC2E;
  --pale:var(--brand-surface);
  --paper:var(--brand-white);
  --white:var(--brand-white);
  --line:var(--border-default);
  --line-2:#E6EDEB;
  --ink:var(--text-primary);
  --body:var(--text-secondary);
  --muted:var(--text-muted);
  --warn:var(--error);
  --warn-bg:var(--error-surface);
  --ok:var(--success);
  --ok-bg:var(--success-surface);

  --head:"Barlow Condensed",Impact,"Arial Narrow",sans-serif;
  --text:"Afacad",Seravek,"Gill Sans",Calibri,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,monospace;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--pale);color:var(--body);
     font-family:var(--text);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
button{font-family:inherit;font-size:inherit;cursor:pointer}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--teal-d)}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.skip{position:absolute;left:-9999px;background:var(--gold);color:var(--slate-x);padding:10px 16px;z-index:99}
.skip:focus{left:10px;top:10px}
.hide{display:none!important}
/* Present to a screen reader, absent to the eye. Used for the suffix that tells
   somebody a footer link will open a new tab while a session is running. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;border:0}
h1,h2,h3{font-family:var(--head);font-weight:700;text-transform:uppercase;color:var(--ink);
         margin:0;line-height:1;letter-spacing:.015em;text-wrap:balance}

/* ---------------- header ---------------- */
.top{background:var(--slate);color:#fff;border-bottom:4px solid var(--gold);position:sticky;top:0;z-index:30}
.top .in{max-width:var(--wrap);margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:14px}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;flex:none}
.markimg{width:42px;height:42px;flex:none}
.mark b{display:block;color:#fff;font-family:var(--head);font-weight:700;font-size:25px;
        letter-spacing:.05em;text-transform:uppercase;line-height:1}
.mark i{display:block;font-style:normal;font-size:12px;letter-spacing:.17em;
        text-transform:uppercase;color:var(--teal-l);margin-top:2px}
.grow{flex:1}
.aichip{font-size:13px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
        border:1px solid rgba(181,250,252,.5);color:var(--teal-l);padding:5px 11px;white-space:nowrap}
.btn{border:none;text-decoration:none;display:inline-block;text-align:center;
     font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.07em;
     font-size:17px;padding:12px 22px;line-height:1.15}
.btn-gold{background:var(--gold);color:var(--slate-x)}
.btn-gold:hover{background:var(--gold-l)}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:var(--teal-d)}
.btn-line{background:transparent;color:var(--slate);border:2px solid var(--slate)}
.btn-line:hover{background:var(--slate);color:#fff}
.btn-sm{font-size:15px;padding:8px 15px}
.btn:disabled{background:#A6BAB9;color:#F0F5F5;cursor:not-allowed}
.top .btn-line{color:#fff;border-color:rgba(255,255,255,.55)}
.top .btn-line:hover{background:#fff;color:var(--slate)}

/* ---------------- landing ---------------- */
.hero{background:var(--slate);color:#fff;padding:66px 22px 74px}
.hero .in{max-width:var(--wrap);margin:0 auto}
.kicker{font-family:var(--head);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
        font-size:14px;color:var(--gold);margin:0 0 18px}
.hero h1{color:#fff;font-size:clamp(38px,6.4vw,74px);line-height:.92;max-width:15ch}
.hero .sub{font-size:clamp(19px,2.3vw,24px);color:#C3D8D6;max-width:52ch;margin:22px 0 0;line-height:1.4}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.reassure{margin:30px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.2);
          color:#9FBAB8;font-size:16.5px;max-width:60ch}

section.band{padding:62px 22px}
section.band .in{max-width:var(--wrap);margin:0 auto}
.band h2{font-size:clamp(30px,4.4vw,46px);margin-bottom:14px}
.band .intro{max-width:62ch;font-size:19px;margin:0 0 32px}
.band.alt{background:var(--white)}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:20px}
.step{background:var(--white);border:1px solid var(--line);border-top:4px solid var(--teal);padding:22px}
.band.alt .step{background:var(--paper)}
.step .n{font-family:var(--head);font-weight:700;font-size:46px;line-height:.8;color:var(--gold);display:block;margin-bottom:8px}
.step h3{font-size:21px;letter-spacing:.05em;margin-bottom:7px}
.step p{margin:0;font-size:16.5px}
.step .eg{margin:12px 0 0;padding-top:11px;border-top:1px solid var(--line-2);
          font-size:16px;color:var(--muted);font-style:italic}

.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.plain{background:var(--white);border-left:4px solid var(--gold);padding:20px 24px}
.plain.no{border-left-color:var(--warn)}
.plain h3{font-size:19px;letter-spacing:.05em;margin-bottom:9px}
.plain ul{margin:0;padding-left:20px;font-size:16.5px}
.plain li{margin-bottom:6px}

/* ---------------- coach ---------------- */
.app{max-width:var(--wrap);margin:0 auto;padding:20px 22px 40px;
     display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start}
.card{background:var(--white);border:1px solid var(--line)}
.card > h2{font-size:16px;letter-spacing:.07em;padding:12px 16px;background:var(--slate);color:#fff}
.pad{padding:16px}

/* progress */
.prog{background:var(--white);border:1px solid var(--line);margin-bottom:20px;grid-column:1/-1}
.track{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.track div{background:var(--paper);padding:11px 13px;border-top:4px solid var(--line)}
.track div.on{background:var(--white);border-top-color:var(--gold)}
.track div.done{border-top-color:var(--teal)}
.track b{display:block;font-family:var(--head);font-weight:700;text-transform:uppercase;
         letter-spacing:.06em;font-size:15px;color:var(--muted)}
.track div.on b{color:var(--ink)}
.track div.done b{color:var(--teal-d)}
.track span{font-size:14.5px;color:var(--muted);line-height:1.3;display:block}
.now{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:14px;
     align-items:center;flex-wrap:wrap;background:var(--paper)}
.now p{margin:0;flex:1;min-width:220px;font-size:16.5px}
.now b{color:var(--ink)}

/* conversation */
.convo{display:flex;flex-direction:column;min-height:460px}
.stream{flex:1;overflow-y:auto;padding:20px;max-height:56vh}
.turn{margin-bottom:18px;max-width:640px}
.who{font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
     font-size:13px;color:var(--muted);margin-bottom:4px}
.coach .txt{border-left:3px solid var(--gold);padding-left:14px}
.you{margin-left:auto}
.you .who{text-align:right}
.you .txt{background:var(--pale);border:1px solid var(--line);padding:10px 14px}
.txt p{margin:0 0 .6em}
.txt p:last-child{margin-bottom:0}
.wait .txt{border-left-color:var(--teal);color:var(--muted);font-style:italic}
.starters{display:flex;flex-wrap:wrap;gap:9px;margin:2px 0 20px;max-width:640px}
.starters button{background:var(--paper);border:1px solid var(--line);padding:9px 14px;
                 text-align:left;font-size:16px;color:var(--body);line-height:1.3}
.starters button:hover{border-color:var(--teal);background:var(--white);color:var(--ink)}
.compose{border-top:1px solid var(--line);padding:14px;background:var(--paper)}
.row{display:flex;gap:11px;align-items:flex-end}
.row textarea{flex:1;border:1px solid var(--line);background:#fff;padding:11px 13px;
              resize:none;min-height:54px;max-height:180px;line-height:1.45}
.tools{display:flex;gap:9px;flex-wrap:wrap;margin-top:11px}
.msg{padding:11px 14px;margin:0 0 16px;max-width:640px;font-size:16.5px}
.msg.bad{background:var(--warn-bg);border:1px solid var(--warn);color:var(--warn)}
.msg.good{background:var(--ok-bg);border:1px solid var(--ok);color:var(--ok)}

.crisis{border:2px solid var(--warn);background:var(--warn-bg);padding:16px 18px;margin:0 0 18px;max-width:640px}
.crisis h3{font-size:18px;letter-spacing:.06em;color:var(--warn);margin-bottom:8px}
.crisis ul{margin:8px 0 12px;padding-left:19px}
.crisis li{margin-bottom:4px}

/* notes rail */
.lbl{display:block;font-family:var(--head);font-weight:600;text-transform:uppercase;
     letter-spacing:.07em;font-size:14px;color:var(--muted);margin:0 0 5px}
.fld{width:100%;border:1px solid var(--line);background:var(--paper);padding:9px 10px;
     resize:vertical;min-height:58px;line-height:1.4}
.fld:focus{background:#fff}
input.fld{min-height:0;padding:10px}
.note{font-size:15px;color:var(--muted);margin:8px 0 0;line-height:1.4}
.rail section + section{margin-top:20px}

/* dialog */
dialog{border:none;padding:0;max-width:720px;width:calc(100% - 32px);
       background:var(--white);color:var(--body);border-top:5px solid var(--gold)}
dialog::backdrop{background:rgba(20,32,31,.86)}
.dlg{padding:26px 30px}
.dlg h2{font-size:29px;margin-bottom:6px}
.dlg h3{font-size:19px;letter-spacing:.05em;margin:24px 0 8px}
.dlg p{margin:0 0 13px}
.dlg ul,.dlg ol{padding-left:22px;margin:0 0 13px}
.dlg li{margin-bottom:6px}
.dlgbar{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;
        padding:14px 30px;background:var(--paper);border-top:1px solid var(--line);
        position:sticky;bottom:0}
.close{background:none;border:1px solid var(--line);color:var(--muted);
       width:34px;height:34px;font-size:20px;line-height:1;float:right}
.close:hover{background:var(--pale);color:var(--ink)}
.consent{background:var(--paper);border:1px solid var(--line);padding:15px 17px;margin:0 0 16px}
.consent label{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.consent input{width:22px;height:22px;flex:none;margin-top:3px;accent-color:var(--teal-d)}
.consent span{font-size:16.5px}
.preview{background:var(--paper);border:1px solid var(--line);padding:14px;
         white-space:pre-wrap;font-size:16px;max-height:230px;overflow-y:auto;line-height:1.45}
.tabs{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.tabs button{flex:1;min-width:130px;background:var(--paper);border:none;padding:12px 10px;
             font-family:var(--head);font-weight:600;text-transform:uppercase;
             letter-spacing:.06em;font-size:15px;color:var(--muted)}
.tabs button[aria-selected="true"]{background:var(--white);color:var(--ink);box-shadow:inset 0 -3px 0 var(--gold)}
.draft{background:var(--warn-bg);border:1px solid var(--warn);color:var(--warn);
       padding:11px 14px;margin:0 0 16px;font-size:16px}

/* footer */
footer{background:var(--slate);color:#A8C2C0;padding:34px 22px 44px;font-size:16px}
footer .in{max-width:var(--wrap);margin:0 auto;display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start}
.lockup{width:104px;height:104px;flex:none}
footer a{color:var(--teal-l)}
footer nav{display:flex;flex-wrap:wrap;gap:18px}
footer nav button{background:none;border:none;color:var(--teal-l);text-decoration:underline;padding:0;font-size:16px}
.reg{font-size:14.5px;color:#97B1AF;max-width:60ch;line-height:1.5}

/* ---------------- added for the launch-readiness pass ---------------- */

/* Available to a screen reader, not to the eye. Not display:none, which would
   remove it from the accessibility tree and silence the live regions. */
.sr,.offscreen{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
     overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* The AI disclosure inside a session. Always rendered, never dismissible, and
   above the conversation rather than in the header, so it stays with the thing
   it is describing when the page is scrolled or zoomed. */
.aibar{margin:0 0 14px;background:var(--slate);color:var(--teal-l);
       font-family:var(--head);font-weight:600;font-size:17px;letter-spacing:.09em;
       text-transform:uppercase;padding:10px 16px;border-left:5px solid var(--gold)}

.lead{font-size:19.5px;color:var(--ink);margin:0 0 20px}
.tight{margin:0 0 9px}
.mt{margin-top:18px}
.wh{color:#fff}
.foot-body{max-width:62ch}
.after{margin:18px 0 0;font-family:var(--head);font-weight:600;text-transform:uppercase;
       letter-spacing:.06em;font-size:16px}
.btn-ghost{border-width:2px}
.hero .btn-line,.btn-ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.hero .btn-line:hover,.btn-ghost:hover{background:#fff;color:var(--slate)}

.notice{background:var(--paper);border-left:5px solid var(--teal);padding:15px 18px;margin:0 0 16px}
.notice h3{font-size:19px;letter-spacing:.05em;margin-bottom:6px}
.notice p{margin:0}

.wipedone{max-width:var(--wrap);margin:18px auto;padding:18px 22px}
/* Not a heading element. It appears and disappears, and a heading that comes
   and goes above the page's h1 breaks the document outline for anybody
   navigating by headings. */
.wd-h{font-family:var(--head);font-weight:700;text-transform:uppercase;
      letter-spacing:.05em;font-size:24px;color:var(--ok);margin:0 0 8px}
.wipedone p{margin:0 0 12px}

/* Accountable roles and review dates. Rendered from config.js, so it is empty
   until a real name or a real date exists. */
.roles{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 20px;
       align-items:baseline;max-width:70ch}
.roles dt{font-family:var(--head);font-weight:600;text-transform:uppercase;
          letter-spacing:.06em;font-size:16px;color:var(--muted)}
.roles dd{margin:0;color:var(--ink)}
.roles:empty{display:none}

.fld-one{width:100%;max-width:22ch;border:1px solid var(--line);background:var(--paper);
         padding:10px 11px;min-height:44px}
.fld-tall{min-height:210px;font-size:16.5px;line-height:1.5}

.fmt{border:1px solid var(--line);background:var(--paper);padding:14px 17px;margin:0 0 16px}
.fmt legend{font-family:var(--head);font-weight:600;text-transform:uppercase;
            letter-spacing:.07em;font-size:16px;color:var(--ink);padding:0 6px}
.fmt label{display:flex;gap:12px;align-items:flex-start;cursor:pointer;padding:7px 0;min-height:44px}
.fmt input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--teal-d)}
.fmt span{font-size:16.5px}

/* A failure is a block with its own actions, so it needs a heading and room to
   breathe rather than the single-line treatment .msg gives a status. */
.fail{padding:15px 18px}
.fail h3{font-size:19px;letter-spacing:.05em;color:var(--warn);margin:0 0 8px}
.fail p{margin:0 0 10px}
.fail .note{color:var(--warn)}
.starters-lead{width:100%;margin:0 0 4px;font-size:15px;color:var(--muted)}

/* WCAG 2.2 target size. Every control the session depends on is at least 24px
   in both directions with spacing around it, and the primary ones clear 44px.
   2.5.8 is the AA requirement; 44px is the AAA figure and is cheap here. */
.btn{min-height:44px}
.btn-sm{min-height:38px}
.close{min-width:44px;min-height:44px}
.consent label{padding:4px 0;min-height:44px}

/* Forced colours. The brand is carried by borders and layout rather than by
   background fills that the user agent is about to override anyway, so the
   things that must not disappear are pinned to system colours. */
@media (forced-colors:active){
  .btn{border:2px solid ButtonText}
  .aibar{border-left-width:5px;border-left-style:solid}
  .crisis,.msg,.notice,.fail{border:2px solid CanvasText}
  .track li.on,.track li.done{outline:2px solid Highlight}
  :focus-visible{outline:3px solid Highlight;outline-offset:2px}
}

/* Reflow at 320px. Nothing scrolls sideways: the grid is already one column
   below 900px, so what is left is the header, the stage track and long words. */
@media (max-width:420px){
  body{font-size:17px}
  h1{font-size:34px}
  .hero{padding:40px 16px 46px}
  .band{padding:38px 16px}
  .track{grid-template-columns:1fr}
  .cta{flex-direction:column;align-items:stretch}
  .cta .btn{width:100%}
  .dlg{padding:20px 17px}
  .dlgbar{padding:14px 17px;justify-content:stretch;flex-direction:column-reverse}
  .dlgbar .btn{width:100%}
  .roles{grid-template-columns:1fr;gap:2px 0}
  .roles dd{margin-bottom:10px}
  .aibar{font-size:15px;letter-spacing:.05em}
  .fld-one{max-width:100%}
}

/* Standalone legal and explanatory pages. One column, measured line length,
   and headings that come out of the approved copy unchanged. */
.doc{background:var(--paper);padding:52px 22px 70px}
.doc .in{max-width:74ch;margin:0 auto}
.doc h1{font-size:40px;margin:0 0 22px;line-height:1.02}
.doc h2{font-size:23px;letter-spacing:.045em;margin:34px 0 10px}
.doc p{margin:0 0 14px}
.doc ul,.doc ol{padding-left:22px;margin:0 0 16px}
.doc li{margin-bottom:7px}
.doc a{color:var(--teal-d)}
.doc table{border-collapse:collapse;width:100%;margin:0 0 18px;font-size:16.5px}
.doc th,.doc td{border:1px solid var(--line);padding:8px 11px;text-align:left;vertical-align:top}
.doc th{background:var(--pale);font-family:var(--head);font-weight:600;
        text-transform:uppercase;letter-spacing:.05em}
.ver{margin-top:40px;padding-top:18px;border-top:1px solid var(--line);
     font-size:15px;color:var(--muted)}
footer nav a[aria-current="page"]{font-weight:700;text-decoration-thickness:2px}

@media (max-width:420px){
  .doc{padding:34px 16px 48px}
  .doc h1{font-size:31px}
  .doc table{font-size:15px}
  .doc th,.doc td{padding:6px 8px}
}

/* Printing the page is not the way to keep a summary, that is what the PDF is
   for, but somebody will try it. Drop the furniture and let the conversation
   and the notes run. */

/* ===========================================================================
   Brand alignment, 27 August 2026.
   The rules below are the places where the previous dark-first treatment had
   to change rather than simply resolve through the new tokens. Every value is
   a token. Contrast figures in the comments are measured, not estimated.
   =========================================================================== */

/* ---- focus ----
   Gold at 3px with an ink hairline immediately outside it. The gold alone is
   1.92:1 on white; the hairline guarantees a 3:1 edge on any surface, so the
   indicator is visible on white, on --brand-surface and on --brand-ink. */
:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:2px;
  box-shadow:0 0 0 5px var(--focus-edge);
  border-radius:2px;
}
.top :focus-visible,footer :focus-visible{box-shadow:0 0 0 5px var(--brand-white)}

/* ---- hero: light, not dark ----
   The brand is primarily light and open. The hero keeps its weight through
   type size and a gold rule rather than through a dark block.
   --text-primary on --brand-surface measures 9.9:1. */
.hero{
  background:var(--brand-surface);
  color:var(--text-primary);
  border-bottom:4px solid var(--brand-gold);
}
.hero h1{color:var(--text-primary)}
.hero .sub{color:var(--text-secondary)}            /* 8.5:1 on --brand-surface */
.hero .fine,.hero .note{color:var(--text-muted)}   /* 4.8:1 on --brand-surface */
/* The kicker was gold, which reads at 1.8:1 on the light hero. Gold survives
   as the rule under the header and as the featured action; the kicker takes
   the tested dark teal instead, at 5.0:1. */
.hero .kicker,.kicker{color:var(--link-default)}
/* Both were light values chosen for a dark hero and are unreadable on a light
   one. --text-secondary is 8.3:1 here, --text-muted is 4.8:1. */
.hero .sub{color:var(--text-secondary)}
.reassure{color:var(--text-muted);border-top:1px solid var(--border-strong)}
.hero .btn-line,.btn-ghost{
  color:var(--link-default);
  border-color:var(--link-default);
  background:var(--brand-white);
}
.hero .btn-line:hover,.btn-ghost:hover{
  background:var(--brand-cyan-soft);
  color:var(--link-hover);
}

/* ---- primary and secondary buttons ---- */
.btn-teal{
  background:var(--brand-teal-dark);               /* white on it: 5.4:1 */
  color:var(--brand-white);
  border:2px solid var(--brand-teal-dark);
}
.btn-teal:hover{background:var(--link-hover);border-color:var(--link-hover)}
.btn-teal:active{background:var(--brand-ink);border-color:var(--brand-ink)}

.btn-line{
  background:var(--brand-white);
  color:var(--link-default);
  border:2px solid var(--link-default);
}
.btn-line:hover{background:var(--brand-cyan-soft);color:var(--link-hover)}

/* Gold is the single featured action, and it takes ink text. Never white:
   white on gold is 2.1:1. Ink on gold is 5.66:1. */
.btn-gold{background:var(--brand-gold);color:var(--brand-ink);border:2px solid var(--brand-gold)}
.btn-gold:hover{background:var(--brand-gold-deep);border-color:var(--brand-gold-deep);color:var(--brand-ink)}

/* ---- disabled ----
   Genuinely disabled controls, not just styled ones. The label stays readable
   at 4.6:1, the surface is visibly inert, and the state is not signalled by
   colour alone: the cursor changes and, for the consent gate, a live region
   says what is still outstanding. */
.btn:disabled,.btn[disabled]{
  background:var(--disabled-surface);
  color:var(--disabled-text);
  border:2px solid var(--disabled-border);
  cursor:not-allowed;
  box-shadow:none;
}
.btn:disabled:hover,.btn[disabled]:hover{
  background:var(--disabled-surface);
  color:var(--disabled-text);
}

/* ---- the AI label ----
   Informative, not a warning. Red is reserved for genuine errors. */
.aichip{background:transparent;border-color:rgba(255,255,255,.55);color:var(--brand-white)}
.aibar{
  background:var(--brand-cyan-pale);               /* ink on it: 8.9:1 */
  color:var(--brand-ink);
  border-left:5px solid var(--brand-gold);
}

/* ---- cards and sections ---- */
.card{background:var(--brand-white);border:1px solid var(--border-default)}
.card > h2{background:var(--brand-teal-dark);color:var(--brand-white)}
.band.alt{background:var(--brand-surface)}
.notice{background:var(--brand-cyan-soft);border-left:5px solid var(--brand-teal-dark)}

/* ---- controls ----
   A control's visible boundary needs 3:1, which --border-default does not
   reach. Inputs use --control-border (5.18:1) and take a teal edge when
   active, with the gold ring on focus. */
.row textarea,.fld,.fld-one,input[type="text"],textarea,select{
  border:1px solid var(--control-border);
  background:var(--brand-white);
  color:var(--text-primary);
}
.row textarea:focus,.fld:focus,.fld-one:focus,input[type="text"]:focus,textarea:focus{
  border-color:var(--brand-teal-dark);
  background:var(--brand-white);
}
.consent input[type="checkbox"]{accent-color:var(--brand-teal-dark)}
.consent{margin-bottom:18px}

/* The gate hint sits in the action bar, outside the dialog's scrolling body,
   so it is beside the button it describes rather than somewhere above the
   fold. role="status" makes it a live region, so the state change is heard as
   well as seen. */
.dlgbar{flex-wrap:wrap}
.gatehint{flex:1 0 100%;margin:0 0 10px;font-size:15.5px;color:var(--text-secondary)}

/* ---- links ---- */
a{color:var(--link-default)}
a:hover{color:var(--link-hover)}
.doc a,.dlg a,p a{text-decoration:underline;text-underline-offset:2px}

/* ---- footer: the one dark area besides the header ---- */
footer{background:var(--brand-ink);color:var(--brand-white);border-top:4px solid var(--brand-gold)}
footer a{color:var(--brand-cyan-pale)}             /* 8.6:1 on --brand-ink */
footer nav button{color:var(--brand-cyan-pale)}
.reg{color:#C7D8D6}                                /* 7.4:1 on --brand-ink */
.wh{color:var(--brand-white)}

/* ---- state colours ---- */
.msg.bad,.err{color:var(--error);background:var(--error-surface);border-color:var(--error)}
.msg.warn{color:var(--warning);background:var(--warning-surface)}
.msg.ok{color:var(--success);background:var(--success-surface)}

/* ---- forced colours ----
   In Windows high contrast the system palette wins. What matters is that the
   focus indicator survives, because ours is drawn with box-shadow, which
   forced-colours mode discards. */
@media (forced-colors:active){
  :focus-visible{outline:3px solid Highlight;outline-offset:2px;box-shadow:none}
  .btn:disabled,.btn[disabled]{color:GrayText;border-color:GrayText}
}

@media print{
  .top,footer nav,.compose,.now button,.tools,.skip,.aichip,.prog .now button{display:none!important}
  body{background:#fff;font-size:12pt}
  .app{display:block;padding:0}
  .stream{max-height:none;overflow:visible}
  .card{border-color:#999;break-inside:avoid}
  .rail section+section{margin-top:12pt}
}

@media (max-width:900px){
  .app{grid-template-columns:1fr;padding:14px}
  .track{grid-template-columns:repeat(2,1fr)}
  .top .in{flex-wrap:wrap}
  .aichip{order:5;width:100%;text-align:center}
  .stream{max-height:none}
  .lockup{width:84px;height:84px}
}