/* The AI Lab brand tokens + base, copied from the marketing site's style.css
   so the adoption site is self-contained (it deploys as its own Static Web App
   with app_location "adoption", which does not include the repo-root CSS). */
:root {
  --teal:        #1B1917;
  /* THE SAME GREEN, DARK ENOUGH TO READ. Brand teal is 2.94:1 against the page
     background where WCAG AA wants 4.5:1 for body text, so every eyebrow, link,
     score and band set in --teal was failing. This is 4.82:1 and passes.

     NEITHER THE COLOUR NOR THE NAME IS NEW, and that is the point of adopting
     both rather than inventing either. `docs/hub-accessibility-brief.md` settled
     this on 5 August 2026 - brand teal becomes #1f7d60 wherever it carries text
     on a light surface - and `launch/style.css` has carried `--teal-deep` for
     the same value since. This file had the value TWICE, hard-coded, on the
     "Not you?" link and the invitee's opt-out: the same fix made in place twice
     by somebody who hit the problem and had no token to reach for. Now it has
     one, under the name the rest of the estate already uses.

     THE RULE: --teal-deep for anything made of letters, --teal for fills,
     borders and accents, where what matters is the contrast of whatever sits ON
     it rather than behind it. The button is the open question that rule does not
     settle - see the brief, which lists the white-on-teal fill as a failure
     too. */
  --teal-deep:   #1B1917;
  --teal-light:  #D8D0C0;
  --teal-pale:   #EFE9DC;
  --navy:        #1B1917;
  --navy-mid:    #37332C;
  --white:       #ffffff;
  --off-white:   #FBF8F1;
  --text:        #1B1917;
  --text-muted:  #57534A;
  /* #6E675C, Benchmark Lab's own --faint (the website's and report.css's),
     since 2 October 2026: the #8F887B it replaced was 3.31:1 on the page, and
     it sets the 13px footer and the .note line, which are read. 5.27:1. */
  --faint:       #6E675C;
  --border:      #D8D0C0;
  /* The research beta's stroke (docs/brand-identity.md, "The research beta
     device"), and Benchmark Lab's canvas. --rule-strong is 3.4:1 on the page:
     a border, a radio ring or a dashed line, NEVER text. */
  --rule-strong: #8F8778;
  --paper:       #F6F2EA;
  --body:        #37332C;
  /* The interview's rust (26 October 2026). --ember-ink is the site's
     --rust-ink: where the rust is text or the fill behind a cream label (the
     hovers, the listening label), #C8471C is 4.30:1 on the paper and below
     AA; #C2451B is 4.52:1 (type-and-contrast.test.js). --ember stays for the
     listening dot, where 3:1 is the bar. The warning icon in interview.js
     draws the same #C8471C as a literal: move both together. */
  --ember:       #C8471C;
  --ember-ink:   #C2451B;
  --font: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  /* SQUARE, RULED, NO SHADOW (v8's system, 24 September 2026, the day the hub
     took it, #147). The tokens keep their names and every rule below
     keeps reading them, so the geometry is one decision here rather than
     forty edits; a shadow is now `none`. The focus ring below is not a
     shadow in the design's sense and stays. */
  --radius-sm: 0;
  --radius:    0;
  --radius-lg: 0;
  --pill: 0;
  --shadow-sm: none;
  --shadow:    none;
  --shadow-teal: none;
  --focus-ring: 0 0 0 3px rgba(27,25,23,.15);
  --transition: .25s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--off-white);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-deep);
}

/* Partner co-brand (D62). Quieter than the eyebrow beneath it, and that is the
   design rather than a lack of one: the partner introduced this check, they did
   not publish it, and a badge that competes with the product name starts to
   read as a white label - which D59 rules out. Muted, small, above everything,
   and no logo: an image would be a per-partner asset to hold, size and keep
   current, for a line of text that says the same thing. */
.cobrand {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.cobrand strong { color: var(--navy); font-weight: 600; }

/* THE PLATFORM COLOPHON (D188). The partner co-brand above answers "who
   introduced you to this check"; this answers "what produced this document",
   and they are different claims that must not compete - so this one is at the
   foot, under a hairline, in the footer's own grey, and carries no colour of
   its own. The mark is the Benchmark Lab glyph as inline SVG on `currentColor`,
   so it is one line of markup rather than a per-page asset and it takes
   whatever colour the text around it has.

   NOT The AI Lab's teal, and not Benchmark Lab's cream and rust either. This
   report is The AI Lab's document; the platform signs it, it does not restyle
   it. Anything louder than this is the white label D59 rules out.

   `[hidden]` needs saying because display:flex would otherwise beat the
   attribute's own display:none, and the colophon would show on the two screens
   that have no report to sign. */
.colophon {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 24px;
  text-align: left;
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}
.colophon[hidden] { display: none; }

/* THE RESEARCH STAMP (/standard/, "Version stamps"): the index's lifecycle
   state and version when this reading was taken, under the verdict. Quiet like
   the co-brand, because it qualifies the result rather than competing with it;
   the state name carries the weight, in the text colour. */
.stamp { font-size: 13px; color: var(--text-muted); margin: -12px 0 24px; }
.stamp strong { color: var(--text); font-weight: 600; }
/* A research beta's stamp: the device's panel, compact (docs/brand-identity.md). */
.stamp--beta { display: flex; flex-direction: column; gap: 8px; max-width: 560px; margin: -4px auto 24px; padding: 14px 16px;
  border: 1px dashed var(--rule-strong); text-align: left; }
.stamp--beta p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--body); }
.stamp--beta .rb-label { font-size: 12px; line-height: 1.2; color: var(--text); }
.colophon__platform { display: inline-flex; align-items: center; gap: 7px; }

/* THE PLATFORM LINE ALONE, for pages that are not issued documents (D188). The
   questionnaire, the about page and the 90-day plan have no issuer to name -
   nothing is issued there - so they carry the right-hand half only, centred in
   the footer they already have. No hairline: the footer is separation enough,
   and a second rule above a rule is noise. */
.colophon--platform { justify-content: center; margin-top: 0; padding-top: 0; border-top: 0; }
.colophon__mark { flex: none; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  padding: 16px 40px;
  border-radius: var(--pill);
  background: var(--teal);
  color: var(--white);
  box-shadow: var(--shadow-teal);
  transition: transform var(--transition), box-shadow var(--transition);
  text-decoration: none;
}
.btn:hover { transform: translateY(-2px); background: var(--navy-mid); }
/* HOVER WAS WHITE ON --teal-light (#D8D0C0), 1.53:1, since the AI Lab teal
   became ink and --teal-light became a cream rule colour. --navy-mid keeps
   the lift and the change of shade and reads at 12.56:1 (2 October 2026).
   ⚠ AND THE FOCUS RING WAS THE PALE ONE ALONE: 3px of 15% ink beside the page
   is about 1.4:1, so a keyboard reader could not see which button had focus.
   An ink outline clear of the button does it; the ring stays inside it. */
.btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; box-shadow: var(--focus-ring); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 22px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}
.chip .dot { width: 4px; height: 4px; border-radius: 50%; background: #D8D0C0; }

/* ---- Questionnaire app ------------------------------------------------- */
.stage {
  position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; padding: 48px 24px 20px; overflow: hidden;
}
.blob {
  position: absolute; top: -200px; right: -160px; width: 560px; height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(27,25,23,.04), rgba(27,25,23,0) 70%);
  pointer-events: none;
}
/* AT THE TOP, NOT CENTRED (11 October 2026). It was centred by auto margins
   top and bottom, so a short screen ("One team, or several?") sat 120px
   lower than a long one and the logo, the bar and Back jumped on every other
   question. The bottom margin alone takes the spare height, which still keeps
   the footer at the foot of the stage (see `.stage footer`). */
.stage__inner { position: relative; width: 100%; max-width: 640px; text-align: center; margin: 0 0 auto; }
.logo { width: 128px; margin-bottom: 36px; }
h1 { font-size: clamp(32px, 5vw, 50px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; margin: 16px 0 18px; }
h2.qtext { font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; margin: 14px 0 26px; }
.lede { font-size: 18px; color: var(--text-muted); margin-bottom: 28px; }
/* Whose profile this becomes. Quiet, because it confirms rather than warns -
   but the address itself is not quiet, since it is the one word on the screen
   somebody might need to disagree with. */
.who { font-size: 14px; color: var(--text-muted); margin: -14px 0 26px; }
.who strong { color: var(--text); font-weight: 600; }
.who a { color: var(--teal-deep); font-weight: 600; }
.meta { margin-bottom: 32px; }
.note { margin-top: 16px; font-size: 14px; color: var(--faint); min-height: 18px; }
footer { font-size: 13px; color: var(--faint); text-align: center; padding: 36px 24px 12px; }
/* Explicit: no global `a` rule here, so the link would inherit the footer's
   faint grey and be indistinguishable from the copyright text beside it. */
footer a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
/* THE QUESTIONNAIRE'S FOOTER IS IN THE FLOW, like the report and migration
   pages', and sits at the foot of the stage because `.stage__inner` above it
   takes the spare height with auto margins. It used to be pinned with
   `position: absolute; bottom: 20px`, which worked only while the footer was a
   single line: on a phone the legal line wraps to two or three, the footer
   grows upwards from its pinned bottom, and it paints over the last line of the
   welcome screen (the "Your answers are private to you" note, 27 September
   2026). A fixed bottom padding could only ever match one wrap width, so the
   footer flows instead; the 20px it used to sit above the edge is now the
   stage's bottom padding. The stage's `100svh` fallback measures it against
   the small viewport, so the footer is on screen with the iOS toolbar shown
   and nothing reflows as the toolbar collapses on scroll (which `100dvh`
   would cause). */
.stage footer { padding: 36px 0 0; }

/* Cookie consent banner and the footer's "Cookie settings" control. A copy of
   the rules in launch/style.css, which these pages do not load - the same
   reason this file copies the brand tokens. The banner is built by
   /assets/consent.js at the top of the page, in the normal flow and never
   fixed over the questionnaire. Keep the two copies in step. */
.cookie-consent { background: #1B1917; color: #F6F2EA; border-bottom: 1px solid rgba(255, 255, 255, .12); text-align: left; }
.cookie-consent[hidden] { display: none; }
.cookie-consent-inner {
  max-width: 1120px; margin: 0 auto; padding: 14px 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
}
.cookie-consent-text { margin: 0; flex: 1 1 320px; font-size: 14px; line-height: 1.55; }
.cookie-consent-text a { color: #F6F2EA; text-decoration: underline; }
.cookie-consent-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cookie-consent .c-btn {
  font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 10px 18px; border-radius: 0; border: 1px solid transparent; cursor: pointer;
}
.cookie-consent .c-accept { background: #F6F2EA; color: #1B1917; }
.cookie-consent .c-accept:hover { background: #E5E2D9; }
.cookie-consent .c-reject { background: transparent; color: #F6F2EA; border-color: rgba(255, 255, 255, .35); }
.cookie-consent .c-reject:hover { border-color: rgba(255, 255, 255, .6); }
@media (max-width: 480px) {
  .cookie-consent-inner { padding: 12px 16px; }
  .cookie-consent-actions { width: 100%; }
  .cookie-consent .c-btn { flex: 1; }
}
.cookie-settings-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px;
}

.eyebrow--area { color: var(--teal-deep); }
/* THE HEAD OF EVERY SCREEN IN THE TAKE (11 October 2026): Back on the left
   and the bar across the rest of the row, then the count and what the screen
   is about. In the same place on every screen, whatever its length, so Back
   is never hunted for at the foot of a long list and the bar is full width
   on a phone rather than the 80px a shared row left it. */
.journey { margin: 0 0 22px; text-align: left; }
.journey__top { display: flex; align-items: center; gap: 16px; min-height: 44px; }
.journey .counter { display: block; margin: 4px 0 0; }
.counter { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.progress { flex: 1; height: 6px; background: #EFE9DC; border-radius: var(--pill); overflow: hidden; }
.progress__fill { height: 100%; background: var(--teal); border-radius: var(--pill); transition: width .35s ease; }

.options { display: flex; flex-direction: column; gap: 12px; text-align: left; }
/* A screen of several unscored questions (index trims, 12 October 2026):
   each question and its answers a block, with room between them. */
.question__part + .question__part { margin-top: 36px; }
.question--group .actions { margin-top: 28px; }
.option {
  display: flex; align-items: center; gap: 14px; width: 100%; cursor: pointer;
  font-family: inherit; font-size: 16px; color: var(--text); text-align: left;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.option:hover { border-color: var(--teal-light); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.option--selected { border-color: var(--teal); box-shadow: var(--focus-ring); }
.option__radio {
  flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #D8D0C0;
  display: flex; align-items: center; justify-content: center; transition: all var(--transition);
}
.option--selected .option__radio { border-color: var(--teal); background: var(--teal); }
.option__check { width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.option__label { flex: 1; }
.option__score { font-size: 12px; font-weight: 700; color: var(--teal-deep); }
/* THE RESEARCH BETA DEVICE (docs/brand-identity.md, "The research beta
   device"; Research Beta Device handoff, 6 October 2026). One rule: in the
   participant flow a 1px dashed --rule-strong stroke means "about the
   questions, optional, never scored". The chip under the lockup says the index
   is in research beta on every screen; a panel wraps each research-only
   element - the notice, the clarity check, the probe. The handoff's 11px
   label is set at 12px here, the caption step of this page's scale
   (type-and-contrast.test.js holds the scale). "Don't know" is NOT
   dashed: it scores 0, so it is an answer, not research. Nothing here has a
   hover: the chip and the labels are statements, not controls. */
.rb-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 8px; border: 1px dashed var(--rule-strong);
  font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); }
.rb-chip[hidden] { display: none; }
.rb-flask { flex: none; display: block; }
.rb-label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 600; line-height: 1.2;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text); }
.rb-label--muted { color: var(--text-muted); }
.research-beta { display: flex; flex-direction: column; gap: 10px; margin: 0 0 32px; padding: 20px 24px; border: 1px dashed var(--rule-strong);
  border-radius: 0; text-align: left; }
.research-beta .fine { margin: 0; font-size: 14px; line-height: 1.6; color: var(--body); }
.research-beta label { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.4; cursor: pointer; }
.clarity { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; padding: 18px 20px 20px; border: 1px dashed var(--rule-strong); text-align: left; }
.clarity__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.clarity__ask { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.clarity__options { display: flex; flex-wrap: wrap; gap: 8px; }
.clarity__option { font-family: inherit; font-size: 14px; padding: 10px 15px; background: var(--off-white); color: var(--text);
  border: 1px solid var(--rule-strong); border-radius: 0; cursor: pointer; }
.clarity__option:hover { border-color: var(--text); }
.clarity__option--selected { padding: 9px 14px; border: 2px solid var(--text); background: var(--white); font-weight: 500; }
.clarity__comment { display: block; width: 100%; box-sizing: border-box; padding: 12px 14px; font-family: inherit; font-size: 14px;
  border: 1px solid var(--rule-strong); border-radius: 0; background: var(--off-white); color: var(--text); }
.clarity .termserror:empty { display: none; }
/* The way forward: the solid button the probe screen's Next already is, on
   the right where forward is, at the handoff's smaller size inside the panel
   (design_handoff_research_beta_device 1d). */
.clarity__next { align-self: flex-end; padding: 11px 20px; font-size: 14px; }
.probe .research-beta { margin-bottom: 20px; }
.probe .research-beta .probe__text { margin: 4px 0 0; }
/* The question the probe is about reads as the question: full colour, a
   step up; the probe's own ask is a step down from a question screen's. */
.probe__repeat { margin: 6px 0; font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--text); }
/* Weight 700, not the question screen's 800: on a phone the clamp sits at
   its 20px floor, two pixels above the question, and the lighter weight keeps
   the question the stronger of the two. (Margins add to the panel's 10px gap.) */
h2.qtext.probe__ask { font-size: clamp(20px, 2.6vw, 24px); font-weight: 700; margin: 10px 0 20px; }
.probe__text { display: block; width: 100%; box-sizing: border-box; margin: 14px 0 16px; padding: 10px 12px; font-family: inherit;
  font-size: 16px; line-height: 1.5; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); color: var(--text); resize: vertical; }
/* Back and Skip: text buttons with a 44px target. Back was 18px tall. */
.linkbtn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 4px; margin: 0 -4px;
  background: none; border: none; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--text-muted); white-space: nowrap;
}
.linkbtn:hover { color: var(--text); }
.linkbtn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.skip { text-decoration: underline; text-underline-offset: 2px; }
/* THE BUTTONS UNDER A SCREEN, one row the same on every screen: the button on
   the left edge of the answers above it, Skip beside it. They were centred
   on some screens, left on others, and on a tick-all question "Continue" and
   "Back" touched. On a phone the button is full width and Skip under it. */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 28px; text-align: left; }
@media (max-width: 560px) {
  .actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .actions > .btn { justify-content: center; }
}

.capture { text-align: left; }
.fieldrow { display: block; margin-bottom: 16px; }
.fieldrow span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
/* How to answer this particular field, between its label and its control.

   The SAME SIZE as the label and not bold, which is the distinction doing the
   work now that the scale has been collapsed: weight and colour separate a
   question from its guidance, and a half-step of type size was never really
   doing it. `.fieldrow span` above is 14px/600 and would otherwise capture this,
   so the weight is stated rather than inherited.

   The negative top margin pulls it under the label it belongs to; the bottom
   margin keeps it off the control it explains. */
.fieldrow .fieldhint { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--text-muted); margin: -2px 0 8px; }
.fieldrow input, .fieldrow textarea, .fieldrow select {
  width: 100%; font-family: inherit; font-size: 16px; padding: 13px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); color: var(--text);
}
/* The benchmark dropdowns. `appearance: none` would strip the chevron and leave
   a select that looks like a text box, so the native control is kept and only
   its box is styled - the three dropdowns have to read as answerable, not as
   fields to type in. 16px on the font is not cosmetic: anything smaller makes
   iOS Safari zoom the whole page when the picker opens. */
.fieldrow select { cursor: pointer; }
.fieldrow textarea { resize: vertical; }
.fieldrow input:focus, .fieldrow textarea:focus, .fieldrow select:focus { outline: none; border-color: var(--teal); box-shadow: var(--focus-ring); }
/* Data-use line, shown above the submit so consent is informed. Muted rather
   than faint: it has to be readable, not decorative. The link is coloured and
   underlined explicitly - brand.css sets no global `a` rule, so it would
   otherwise inherit the paragraph's grey and read as plain text. */
.capture .fine { margin: 4px 0 14px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.capture .fine a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 2px; }
/* What we already hold, on the dimensions step.

   It was set at 16px to escape being read as fine print, which was the right
   complaint and the wrong remedy - it bought legibility by adding a seventh step
   to the type scale. The scale has since been collapsed and `.fine` brought up
   to the same 14px body size, so there is no fine print left to be mistaken for
   and no reason to sit above the body text to prove it.

   The margin closes the gap to the first field, so the sentence reads as
   belonging to the fields rather than trailing the lede. */
.capture .dims-held { margin: -12px 0 20px; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.capture .btn { margin-top: 8px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn--ghost { background: none; color: var(--teal-deep); box-shadow: none; border: 1px solid var(--border); }
.btn--ghost:hover { background: var(--teal-pale); }

.result__profile { color: var(--navy); margin-bottom: 12px; }
.stats { display: flex; gap: 16px; justify-content: center; margin: 8px 0 24px; }
.statcard { background: var(--teal-pale); border-radius: var(--radius); padding: 18px 26px; min-width: 120px; }
.statcard__value { font-size: 30px; font-weight: 800; color: var(--navy); }
.statcard__label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.result__next { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 24px; text-align: left; }
.result__ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* "This is saved to your profile." Sits BELOW the calls to action and quieter
   than them - it is reassurance, not a competing ask. A separated rule rather
   than a filled panel, so it does not read as a third thing to do. */
.keepnote { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--border); text-align: center; }
.keepnote p { color: var(--text-muted); font-size: 14px; max-width: 52ch; margin: 0 auto 16px; }

/* ---- Report page ------------------------------------------------------- */
.page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 48px 24px 80px; }
.page__inner { width: 100%; max-width: 760px; text-align: center; }
.whereyousit { color: var(--text-muted); font-size: 16px; max-width: 600px; margin: 0 auto 26px; }
.statcard__band { font-size: 12px; font-weight: 700; color: var(--teal-deep); margin-top: 2px; }
.charts { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; margin: 12px 0 28px; }
.chartbox { flex: 1; min-width: 280px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.chartbox h3 { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
/* "Beta result · indicative only" on each of the beta's pictures (Finlay,
   12 October 2026), inside the box so a screenshot keeps it. */
.betatag { display: inline-block; margin: 0 0 8px; padding: 2px 8px; border: 1px dashed var(--rule-strong, #B5AE9F);
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.chartbox__caption { margin-top: 8px; }
.legend { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.legend__item { display: inline-flex; align-items: center; gap: 6px; }
.legend__swatch { width: 14px; height: 4px; border-radius: 0; display: inline-block; }
.areabars { text-align: left; margin: 8px 0 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.areabar__top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.areabar__pct { color: var(--teal-deep); }
.areabar__track { height: 7px; background: #EFE9DC; border-radius: var(--pill); overflow: hidden; }
.areabar__fill { height: 100%; background: var(--teal); border-radius: var(--pill); }
.nextmoves { text-align: left; background: var(--teal-pale); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 26px; }
.nextmoves h3 { font-size: 16px; font-weight: 800; margin-bottom: 10px; }
.nextmoves ol { padding-left: 20px; }
.nextmoves li { margin-bottom: 10px; line-height: 1.5; }
.clientnote { font-weight: 600; color: var(--navy); align-self: center; }

/* The research dimensions ask. Foot of the report, below every call to action -
   see report.js for why that placement is the argument rather than an
   afterthought. Deliberately QUIET: muted, no card, no accent fill, nothing
   that reads as a second conversion. It is the least important thing on the
   page and it should look it. */
.dimensions { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--border); text-align: left; max-width: 460px; margin-left: auto; margin-right: auto; }
.dimensions h3 { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.dimensions p { color: var(--text-muted); font-size: 14px; line-height: 1.5; margin-bottom: 16px; }
.dimensions__field { display: block; margin-bottom: 14px; }
.dimensions__field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.dimensions__field select {
  width: 100%; font-family: inherit; font-size: 16px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white); color: var(--text);
}
.dimensions__field select:focus { outline: none; border-color: var(--teal); box-shadow: var(--focus-ring); }
.dimensions__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dimensions__status { font-size: 13px; margin: 0; }

@media (max-width: 560px) { .areabars { grid-template-columns: 1fr; } }

/* ---- Migration plan page ---------------------------------------------- */
.tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.tab { font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 9px 18px; border-radius: var(--pill); border: 1px solid var(--border); background: var(--white); color: var(--text-muted); }
.chartbox--center { max-width: 340px; margin: 8px auto 24px; }
.toggle { display: inline-flex; gap: 4px; padding: 4px; background: #EFE9DC; border-radius: var(--pill); margin: 6px auto 8px; }
.section { font-size: clamp(20px, 3vw, 26px); font-weight: 800; margin: 30px 0 6px; }
.plantitle { color: var(--text-muted); margin-bottom: 18px; }
.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: left; margin-bottom: 28px; }
.phase { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.phase__when { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-deep); }
.phase__title { font-weight: 800; margin: 6px 0 8px; }
.phase p { font-size: 14px; color: var(--text-muted); line-height: 1.5; }
.mt { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; text-align: left; margin-bottom: 28px; }
.panel { border-radius: var(--radius); padding: 20px 22px; }
.panel h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; }
.panel ul { padding-left: 18px; }
.panel li { margin-bottom: 9px; line-height: 1.5; }
.panel--teal { background: var(--teal-pale); }
.panel--teal h3 { color: var(--teal-deep); }
@media (max-width: 640px) { .phases, .mt { grid-template-columns: 1fr; } }

/* "Don't know" (C1). Set apart from the four scoring options: it is not a
   fifth rung on the ladder, it is a different kind of answer. A step back -
   the canvas colour behind a solid hairline, muted words - so it reads as an
   escape hatch rather than a tempting default; it scores zero, so a
   respondent reaching for it out of laziness costs the business its score.

   ⚠ SOLID, NEVER DASHED. It was dashed until 6 October 2026, and in this flow
   dashed now means research that never changes a score (the research beta
   device, above). "Don't know" scores 0 (api/shared/scoring.js), so a dashed
   one would tell the respondent something false. Selected, it is drawn as any
   other selected option. */
.option--unknown {
  margin-top: 10px;
  background: var(--paper);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.option--unknown.option--selected { background: var(--white); border-color: var(--teal); color: var(--text); }
/* "Not applicable" (adoption-indices-build-plan.md WP1b) reuses the "Don't
   know" look, set apart from the rungs for the same reason, under the "Or:"
   the questionnaire prints. It is left out of the mean, never scored 0. */
.options__or { margin: 16px 0 0; }
.options__or + .option--na { margin-top: 6px; }

/* The screener and barriers block (Launch Gap Audit #62). A tick-any list draws
   its markers square, so it does not look like a pick-one list. */
.option__radio--box { border-radius: 6px; }
.option__radio--box .option__check { border-radius: 2px; }


/* The welcome screen's two additions: the employer-visibility statement (D34)
   and the terms tick. Both are left-aligned inside an otherwise centred screen,
   because they are read rather than glanced at, and centred prose over three
   paragraphs is harder work than it looks. */
.visibility {
  text-align: left; margin: 22px 0 18px; padding: 16px 18px;
  background: var(--teal-pale); border-radius: var(--radius-sm);
}
.visibility-heading { font-size: 16px; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.visibility .fine { margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.visibility .fine:last-child { margin-bottom: 0; }
/* The invitee's way out, under a hairline so it reads as an action rather than
   a fourth sentence. Underlined and in the link colour because it has to be
   recognisably clickable - an exit somebody has to hunt for is not much of an
   exit - and left at the statement's own type size because it is not competing
   with Start the check and should not look as though it were. */
.visibility-out {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(20, 33, 46, 0.09);
}
/* --teal-deep AND NOT var(--teal), which is the whole point of the control.

   Written as a bare #1f7d60 when this shipped, because the token did not exist
   here yet; it does now, and this rule was one of the two places whose
   hand-made fix is the reason for it.

   Brand teal on the pale panel measures 2.83:1 against the 4.5:1 AA needs -
   hub-accessibility-brief.md lists that exact pairing as a known failure. An
   opt-out that somebody with low vision cannot pick out of the paragraph above
   it is the same defect this change fixed, in a quieter form: present in the
   markup, absent in practice.

   #1f7d60 is 4.65:1 here and is already the link colour in body copy on these
   pages - see `.who a` - so this is the existing convention rather than a new
   one. It is the value the brief calls teal-deep.

   No :focus rule on purpose. --focus-ring is a 15%-alpha glow built for inputs
   and buttons that also carry a border change; on a bare inline link it would
   REPLACE the browser's own outline with something weaker. The default is
   better than anything worth writing here. */
.visibility-out a {
  color: var(--teal-deep); text-decoration: underline; text-underline-offset: 2px;
  font-weight: 600;
}

/* The tick sits directly above the button it gates, so the thing being agreed
   to and the act of agreeing are not separated by anything. */
.termsrow {
  display: flex; align-items: flex-start; gap: 10px;
  text-align: left; margin: 0 0 16px; font-size: 14px; line-height: 1.5; cursor: pointer;
}
/* 18px, not the browser default 13px. This is the only required control in the
   check and it is the one most often missed on a phone; the WCAG target-size
   floor is what the padding on the label is really for. */
.termsrow input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--teal); }
.termsrow a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 2px; }

/* Empty until it has something to say, so it occupies no space and causes no
   reflow when it appears. Red on white at this size clears 4.5:1. */
.termserror { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: #b3261e; }
.termserror:empty { display: none; }

/* The consent boxes at capture (WP11c). They reuse .termsrow for the row itself
   - same 18px target, same alignment - so only the grouping needs styling.
   Separated from the privacy line above them because the line states the
   purposes and these ask about them: run together, they read as one block of
   fine print, and the tick that follows fine print is the tick nobody sees. */
/* Us asking nicely, above the ticks. Body size and full text colour rather than
   muted: it is addressed to the reader, and a request set quieter than the
   notice it follows reads as something we did not much mean.

   NO TEAL, NO PANEL, NO ICON. It has to be legible as OURS - a sentence from us
   about why we would like a yes - and anything that dresses it up starts to look
   like a fourth consent statement, which is the one thing it must never be
   mistaken for. Set apart by space alone. */
.capture .consent-urge { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.consents { margin: 14px 0 0; }
/* No bottom margin on the last row: .termsrow carries 16px for the terms tick,
   which stands alone, and three of them stacked above the button push it out
   of reach on a phone. */
.consents .termsrow:last-child { margin-bottom: 4px; }

/* ---- "What it measures" page ------------------------------------------- */
/* The explainer behind each index card in the Account Hub (about.js). It is
   drawn from the instrument's own definition, so the styling has to survive six
   areas or eight, one scope or two, and four outcomes named anything at all.

   No new type sizes: 16 for a tile heading, 14 for body, 13 for the scope line,
   which are the steps the scale already has. */
.areagrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; margin-bottom: 28px; }
.areatile { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.areatile h3 { font-size: 16px; font-weight: 700; line-height: 1.3; }
.areatile p { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-top: 5px; }
/* The method panel reuses .panel--teal, and only needs the two things that
   panel leaves to its container: prose alignment and the space beneath it. */
.aboutmethod { text-align: left; margin-bottom: 28px; }
.aboutmethod li { font-size: 14px; }
/* The outcomes, as a list of rungs rather than cards: four bordered boxes read
   as four things to choose between, and these are four places one reader ends
   up in. */
.outcomes { text-align: left; margin-bottom: 8px; }
.outcome { padding: 16px 0; border-top: 1px solid var(--border); }
.outcome:first-child { border-top: none; padding-top: 4px; }
.outcome__name { font-size: 16px; font-weight: 800; color: var(--navy); }
.outcome__blurb { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin-top: 4px; }
@media (max-width: 640px) { .areagrid { grid-template-columns: 1fr; } }

/* Headings in Archivo, the wordmark's face (docs/brand-identity.md section 3). */
h1, h2, h3 { font-family: 'Archivo', 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: -0.02em; }

/* THE BENCHMARK LAB LOCKUP (docs/brand-identity.md section 1): the mark, then
   the wordmark in Archivo 700 tracked -2%, both in ink. The wordmark is live
   text rather than part of the image, because an SVG loaded through <img>
   cannot use the page's webfont and would draw it in whatever face the system
   has. */
.lockup { display: inline-flex; align-items: center; gap: 8px; color: #1B1917; text-decoration: none; }
.lockup img { width: 22px; height: 22px; display: block; }
.lockup__word { font: 700 17px/1 'Archivo', 'IBM Plex Sans', system-ui, sans-serif; letter-spacing: -0.02em; white-space: nowrap; color: #1B1917; }
.logo.lockup { width: auto; margin-bottom: 36px; }
/* THE REPORT PAGES' LOCKUP (B26, 22 October 2026): the organisation report's
   (company-report.js lockup; docs/brand-identity.md section 4), partner first,
   a 1px rule, then ours, with no words. Inline, so it sits where the lockup
   alone sat (centred until the report layout left-aligns the page), and it
   carries the lockup's 36px, so a report with no partner is laid out exactly
   as before. The sizes are company-report.js partnerHalf's and hub/report.css
   `.lockup`'s, which these pages do not load: change one, change all three.
   The rule is a border, not a background, so it prints (print drops
   backgrounds; brand identity section 4: separation never depends on
   colour). */
.rlockup { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 36px; vertical-align: top; }
.rlockup .logo.lockup { margin-bottom: 0; }
.rlockup__partner { display: block; height: 28px; width: auto; max-width: 180px; object-fit: contain; }
.rlockup__rule { display: block; width: 0; height: 28px; border-left: 1px solid #1B1917; flex: none; }
.rlockup__partner[hidden], .rlockup__rule[hidden] { display: none; }

/* THE PARTNER-LED HEAD ON A CO-BRANDED ENTRY PAGE.

   docs/brand-identity.md section 4 is "partner first, publisher second", and
   until now the entry page was the one surface that inverted it: our lockup on
   top, the partner's NAME in small grey type beneath. That was right while the
   partner had no mark to draw - a name set above our own wordmark would read as
   a white label (D59), which is what the note on `.cobrand` above argues. A
   licensed mark changes the composition rather than the argument: the partner
   introduced this check, so their mark leads, and ours is the one carrying the
   sentence that says who publishes it.

   ⚠ THE PARTNER'S MARK IS DELIBERATELY THE LARGER. Section 4's equal-optical-
   height rule governs the side-by-side lockup with its 1px rule, where the two
   marks are peers on one line. This is the stacked form, where the whole point
   is which one leads, and equal weight here would read as neither.

   The wrapper carries the 36px the lockup used to carry, so the uncobranded
   page is laid out exactly as it was; the lockup's own margin is dropped only
   INSIDE the wrapper, because the report, about and migration pages still use
   it standalone. */
.brandhead { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 36px; }
.brandhead .logo.lockup { margin-bottom: 0; }
.brandhead__line { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: center; }
.brandhead__lede { font-size: 13px; color: var(--text-muted); }
/* ⚠ AN EXPLICIT HEIGHT, BECAUSE A MAXIMUM ONLY EVER SHRINKS. This shipped as
   `height:auto;max-height:52px` and would have drawn every mark at whatever
   size its exporter happened to choose: Utilize's is intrinsically 111x70 and
   so lands at 52px, but a partner exporting at 100x34 draws at 34px - about the
   height of the Benchmark Lab lockup beneath it, which is precisely "partner
   first" failing to read. hub/chrome.js records the same lesson the expensive
   way, in the note on the header mark's own `height`, where raising a cap from
   48 to 72 to 96 changed nothing on the screen three times running. (Named
   rather than cited by line: that comment moved the week this was written.)

   ⚠ AND height + max-width DISTORTS WITHOUT object-fit. When the width clamp
   binds on a wide wordmark the used width shrinks while the explicit height
   does not, and a replaced element asked for both stretches to fill them.
   `contain` letterboxes inside the box instead. This is section 4's "wide and
   square logos each have a layout", expressed as one box both fit.

   The one cost, and it is the right trade: a small raster gets scaled UP and
   will soften, where an SVG does not care. That is a note for whoever prepares
   the asset - D163 already requires a review step - not a reason to let one
   partner's mark lead the page and the next one's sit level with ours.

   ⚠ 84px, RAISED FROM 52 (Finlay, 18 September 2026). Rendered at 52, 68, 84
   and 100 against Utilize's mark: 52 read as a badge above our lockup rather
   than as the party leading the page, and 100 pushed the headline far enough
   down that the eyebrow and the first line stopped arriving together. 84 also
   lands beside the hub header's 88, which is the other surface where a
   partner's mark leads, so a partner meets one size across the two.

   The width cap moves with it - 320 is 200 at the same ratio - or raising the
   height alone would tighten the box on wide wordmarks and letterbox them
   smaller than they were before.

   `[hidden]` needs saying because a display rule beats the attribute, and the
   overwhelming majority of visitors have no partner at all. */
.brandhead__partner { display: block; width: auto; height: 84px; max-width: 320px; object-fit: contain; }
.brandhead__partner[hidden], .brandhead__lede[hidden] { display: none; }
/* A phone is not a small desktop here: 320px of mark on a 390px screen leaves
   no page either side of it, so the cap comes down further than the height
   does. */
@media (max-width: 480px) { .brandhead__partner { height: 64px; max-width: 240px; } }

/* ---- Reduced motion (2 October 2026) ---------------------------------- *
   The buttons lift on hover, the answers slide, the progress bar glides. All
   of it is decoration, so a device set to reduce motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
  .btn, .option, .option__radio, .progress__fill { transition: none; }
  .btn:hover, .option:hover { transform: none; }
}

/* ---- Print (2 October 2026) -------------------------------------------- *
   The report and the 90-day plan are documents people print or save as PDF,
   and with the browser's default of no backgrounds they lost things that
   carry meaning: the bars behind each area's figure, the legend's colour keys
   (so "You now", "Best practice" and "Your potential" named nothing), and the
   six-month target, white text on an ink panel, which printed white on white.
   Those keep their colours. What only works on screen goes: the cookie
   banner, the calls to action, the tabs and the view toggle, the research ask
   and its form. A chart, a card or a panel is not split across two pages. */
@media print {
  .cookie-consent, .cookie-settings, .result__ctas, .keepnote .btn,
  .tabs, .toggle, .dimensions, .back { display: none !important; }
  .stage, .page { min-height: 0; padding-top: 0; }
  .legend__swatch, .areabar__track, .areabar__fill, .progress, .progress__fill,
  .statcard, .nextmoves, .panel {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .chartbox, .areabar, .statcard, .nextmoves, .phase, .panel { break-inside: avoid; }
}

/* Report action hierarchy: plan, share, then quiet profile access. */
.result__share:empty { display: none; }
.result__share { display: inline-flex; }
.keepnote--inline { border-top: 0; padding-top: 0; margin-top: 24px; }
.keepnote--inline p { max-width: none; }
.keepnote--inline a { color: inherit; text-decoration: underline; }
@media (max-width: 560px) {
  /* Centred as well as full width: .btn is inline-flex, so stretched to the
     row its label sat at the left, 40px in, under a centred paragraph. */
  .result__ctas > .btn, .result__share, .result__share > .btn { width: 100%; justify-content: center; }
}

/* The research beta's text interview (S5), from the handoff
   design_handoff_research_interview (6 October 2026): the invitation on the
   report (1a) and the conversation on its own page (1c-1f). A transcript, not
   a form: the interviewer's turns have no box, the respondent's are solid ink
   like the buttons, a question from the index is a SOLID card because it is
   the real question, and DASHED stays the research and offer layer. No radius,
   no shadow. The handoff's 11px labels are set at 12px and its 15px text at
   16px (14px for the waiting line), and the phone question at 18px not 19px: this page's scale (type-and-contrast.test.js). */

/* 1a, the invitation */
.iv-offer { display: flex; flex-direction: column; gap: 14px; margin: 40px 0; padding: 24px 26px; border: 1px dashed var(--rule-strong);
  text-align: left; }
.iv-offer__title { margin: 0; font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; color: var(--navy); }
.iv-offer__body { margin: 0; font-size: 16px; line-height: 1.6; color: var(--body); }
.iv-offer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding-top: 4px; }
.iv-offer__where, .iv-offer__thanks { font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.iv-offer__thanks { color: var(--body); }
.iv-btn { display: inline-flex; align-items: center; height: 48px; padding: 0 20px; border: 0; background: var(--navy); color: var(--paper);
  font-family: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.iv-btn:hover { background: var(--ember-ink); }
.iv-btn:disabled { background: var(--paper); color: var(--text-muted); border: 1px solid var(--rule-strong); cursor: default; }
.iv-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin: 0 -4px; border: 0; background: none;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.iv-link:hover { color: var(--ember-ink); }
.iv-link:disabled { color: var(--text-muted); cursor: default; }
.iv-link--quiet { font-weight: 400; color: var(--body); }
.iv-btn:focus-visible, .iv-link:focus-visible, .iv-send:focus-visible, .iv-back:focus-visible, .iv-input:focus-visible, .iv-mic:focus-visible {
  outline: 2px solid var(--navy); outline-offset: 2px; }

/* The page: the header and the composer stay put; the log between scrolls.
   100svh, the height with the browser's toolbars SHOWN, as `.stage` above:
   100dvh put the composer under the bottom toolbar of Chrome on iPhone
   (13 October 2026). The body stays in the flow, so on a screen too short for
   the header and composer (landscape, high zoom) the page still scrolls. */
.iv-body { margin: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; background: var(--paper); color: var(--text); }
.iv-head { flex: none; border-bottom: 1px solid var(--navy); background: var(--paper); }
.iv-head__inner, .iv-column, .iv-composer__inner { box-sizing: border-box; width: 100%; max-width: 680px; margin: 0 auto; padding: 0 48px; }
.iv-head__inner { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.iv-head .lockup img { width: 22px; height: 22px; }
.iv-back { display: inline-flex; align-items: center; height: 44px; padding: 0 4px; font-size: 14px; font-weight: 600; color: var(--navy);
  text-decoration: underline; text-underline-offset: 4px; }
.iv-back:hover { color: var(--ember-ink); }
.iv-back[hidden] { display: none; }
.iv-hint--narrow { display: none; }
.iv-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.iv-titleblock { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 40px 0 24px; border-bottom: 1px solid var(--border); }
.iv-title { margin: 0; font-size: 30px; line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }

/* The log */
.iv-log { display: flex; flex-direction: column; gap: 28px; padding: 28px 0 40px; }
.iv-turn { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.iv-turn--you { align-self: flex-end; align-items: flex-end; gap: 6px; max-width: 440px; }
.iv-who { margin: 0; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.iv-said { margin: 0; max-width: 560px; font-size: 16px; line-height: 1.6; color: var(--text); text-wrap: pretty; white-space: pre-wrap; }
.iv-bubble { margin: 0; padding: 12px 16px; background: var(--navy); color: var(--paper); font-size: 16px; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.iv-waiting { margin: 0; font-size: 14px; line-height: 1.5; font-style: italic; color: var(--text-muted); }
.iv-q { box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; width: 100%; padding: 20px 22px;
  border: 1.5px solid var(--navy); background: var(--off-white); }
.iv-q__count { margin: 0; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.iv-q__text { margin: 0; font-size: 21px; line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }
.iv-q__options { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.iv-q__options li { display: flex; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--body); }
.iv-q__n { min-width: 14px; font-weight: 600; color: var(--navy); }
.iv-q__dk { margin: 0; padding-top: 4px; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.5; color: var(--text-muted); }
/* A question answered in the index: what was chosen marked, and the
   sentence that said it (interview.js questionCard). */
.iv-q--known .iv-q__options li { color: var(--text-muted); }
.iv-q--known .iv-q__options li.iv-q__chosen { margin-left: -10px; padding-left: 7px; border-left: 3px solid var(--navy); color: var(--text); font-weight: 600; }
.iv-q__said { color: var(--text); font-weight: 600; }
/* A checklist's card awaiting a reply: each option a tick box that writes the
   reply box (interview.js liveTicks). Square, as the card is. */
.iv-q--ticks .iv-q__options { gap: 2px; margin: 0 -8px; }
.iv-q--ticks .iv-q__none { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.iv-tick { display: flex; align-items: flex-start; gap: 12px; width: 100%; margin: 0; padding: 6px 8px; border: 0; border-radius: 0;
  background: transparent; color: inherit; font: inherit; line-height: 1.5; text-align: left; cursor: pointer; }
.iv-tick:hover:not(:disabled) { background: var(--paper); }
.iv-tick:disabled { cursor: default; }
.iv-tick:disabled .iv-tick__box { border-color: var(--rule-strong); background: var(--paper); }
.iv-tick[aria-pressed="true"]:disabled .iv-tick__box { border-color: var(--text-muted); background: var(--text-muted); }
.iv-tick:focus-visible { outline: 2px solid var(--navy); outline-offset: 0; }
.iv-tick__box { flex: none; box-sizing: border-box; width: 18px; height: 18px; margin-top: 3px; border: 1.5px solid var(--navy); background: var(--white);
  display: flex; align-items: center; justify-content: center; }
.iv-tick[aria-pressed="true"] .iv-tick__box { background: var(--navy); }
.iv-tick[aria-pressed="true"] .iv-tick__box::after { content: ""; width: 5px; height: 9px; margin-top: -2px; border: solid var(--paper);
  border-width: 0 2px 2px 0; transform: rotate(45deg); }
.iv-end { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1.5px solid var(--navy); }
.iv-end__title { margin: 0; font-size: 18px; line-height: 1.3; letter-spacing: -0.02em; }
.iv-end__line { margin: 0; font-size: 16px; line-height: 1.55; color: var(--body); }
.iv-end__links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.iv-log .iv-offer { margin: 0; }

/* The composer */
.iv-composer { flex: none; border-top: 1px solid var(--navy); background: var(--paper); }
.iv-composer[hidden] { display: none; }
.iv-composer__inner { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; padding-bottom: 20px; }
.iv-composer__row { display: flex; align-items: flex-end; gap: 8px; }
.iv-input { box-sizing: border-box; flex: 1; min-width: 0; min-height: 73px; margin: 0; padding: 13px 14px; border: 1px solid var(--rule-strong);
  border-radius: 0; background: var(--off-white); color: var(--text); font-family: inherit; font-size: 16px; line-height: 1.4; resize: none; }
.iv-input::placeholder { color: var(--faint); }
.iv-input:disabled { border-color: var(--border); background: var(--paper); }
.iv-input:disabled::placeholder { color: var(--text-muted); }
.iv-mic-slot { flex: none; width: 48px; height: 48px; }
/* Voice (handoff 1g): the reserved column's toggle, and the box that stands
   in for the reply box while listening. No waveform, no pulse. */
.iv-mic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--navy); border-radius: 0; background: var(--off-white); color: var(--navy); cursor: pointer; }
.iv-mic:hover { background: #FFFFFF; }
.iv-mic[aria-pressed="true"] { background: var(--navy); color: var(--paper); }
.iv-mic:disabled { border-color: var(--rule-strong); background: var(--off-white); color: var(--text-muted); cursor: default; }
.iv-listen { box-sizing: border-box; flex: 1; min-width: 0; min-height: 73px; display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px; border: 1px solid var(--navy); background: var(--off-white); }
.iv-listen[hidden] { display: none; }
.iv-listen__status { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; font-weight: 600; line-height: 1;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember-ink); }
.iv-listen__status::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--ember); }
.iv-listen__words { margin: 0; font-size: 16px; line-height: 1.4; color: var(--text-muted); }
.iv-typeinstead { gap: 6px; font-size: 13px; }
.iv-typeinstead[hidden] { display: none; }
.iv-send { flex: none; height: 48px; padding: 0 20px; border: 0; background: var(--navy); color: var(--paper); font-family: inherit;
  font-size: 16px; font-weight: 600; cursor: pointer; }
.iv-send:hover { background: var(--ember-ink); }
.iv-send:disabled { border: 1px solid var(--rule-strong); background: var(--paper); color: var(--text-muted); cursor: default; }
.iv-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--navy); }
.iv-note[hidden] { display: none; }
.iv-note svg { flex: none; margin-top: 2px; }
.iv-composer__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; min-height: 44px; }
.iv-hint { font-size: 13px; color: var(--text-muted); }
.iv-stop { margin-left: auto; }
.iv-body footer { padding: 24px 16px 20px; }

@media (max-width: 560px) {
  .iv-head__inner, .iv-column, .iv-composer__inner { padding-left: 16px; padding-right: 16px; }
  .iv-head__inner { height: 56px; }
  .iv-head .lockup img { width: 20px; height: 20px; }
  .iv-hint--wide { display: none; }
  .iv-hint--narrow { display: inline; }
  .iv-titleblock { padding: 24px 0 20px; }
  .iv-title { font-size: 24px; line-height: 1.15; }
  .iv-log { gap: 24px; padding-top: 24px; }
  .iv-turn--you { max-width: 280px; }
  .iv-said { line-height: 1.55; }
  .iv-q { gap: 12px; padding: 16px; }
  .iv-q__text { font-size: 18px; }
  .iv-q__options li { gap: 10px; }
  .iv-tick { gap: 10px; }
  .iv-end { padding-top: 20px; }
  .iv-composer__inner { gap: 8px; padding-top: 12px; padding-bottom: 14px; }
  .iv-input, .iv-listen { min-height: 48px; }
  .iv-listen { padding: 10px 12px; }
  /* The voice column stands empty until voice ships; at this width it would
     cost the reply box a third of itself, so it is not kept here yet. */
  .iv-mic-slot { display: none; }
  .iv-send { padding: 0 16px; }
  .iv-hint { font-size: 12px; }
  .iv-composer__foot { gap: 12px; }
  .iv-offer { padding: 20px; }
}

/* The research beta chip's flask sits in a span (app.js draws it as markup). */
.rb-chip > span, .rb-label > span { display: inline-flex; }

/* B55: the personal result's privacy line, and the follow-on offer's two buttons. */
.onlyyou { font-size: 14px; color: var(--text-muted); margin: -6px 0 22px; }
.followon .result__ctas { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- WP4c: the Personal AI Index v0.2 ------------------------------------
   Screen one, the questions' page lines and notes, the folded definition of
   AI, and the headline report. */
.screenone { text-align: left; margin: 8px 0 20px; }
.screenone__heading { font-size: 18px; font-weight: 800; margin: 18px 0 6px; }
.screenone__examples { font-style: italic; }
.qlead { font-style: italic; color: var(--text-muted); margin: 10px 0 0; }
.qnote { margin-top: 12px; }
.definefold { margin-top: 18px; text-align: left; font-size: 14px; color: var(--text-muted); }
.definefold summary { cursor: pointer; font-weight: 600; }
.definefold p { margin: 8px 0 0; }
.headlines { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 24px; text-align: left; }
.headline { background: var(--teal-pale); border-radius: var(--radius); padding: 18px 22px; }
.headline__value { font-size: 30px; font-weight: 800; color: var(--navy); }
.headline__value--none { font-size: 18px; }
.headline__label { font-size: 16px; font-weight: 800; color: var(--text); }
.headline__areas { font-size: 13px; color: var(--text-muted); margin: 4px 0 0; }
.headline__why { font-size: 13px; color: var(--text-muted); margin: 8px 0 0; }
.areabar__pct--none { color: var(--text-muted); font-weight: 600; }
.lookat, .contextprofile { text-align: left; margin: 0 0 24px; }
/* WP11a: the drafted next moves, each carrying the beta label itself. */
.moves { margin: 12px 0 0; padding-left: 20px; }
.move { margin: 0 0 14px; }
.move__text { margin: 0; }
.move__beta { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); font-style: italic; }
/* WP11b: "Was this useful?" on each move, one tap, yes or no. 44px targets. */
.move__useful { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 14px; }
.move__useful-ask { color: var(--text-muted); }
.move__useful-taps { display: inline-flex; gap: 8px; }
.move__tap { min-height: 44px; min-width: 64px; padding: 6px 14px; font: inherit; font-weight: 600; color: var(--teal-deep);
  background: none; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.move__tap:hover { background: var(--teal-pale); }
.move__tap:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.move__tap:disabled { opacity: 0.6; cursor: default; }
/* The status line stays in the page while empty (a live region a screen
   reader can hear when the answer is written into it); it just takes no room. */
.move__useful-status { margin: 0; color: var(--text-muted); }
.contextprofile dt { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-top: 10px; }
.contextprofile dd { margin: 2px 0 0; }
@media (max-width: 640px) { .headlines { grid-template-columns: 1fr; } }