/* ==========================================================================
   KONCISE GUIDED SCOPING EXPERIENCE
   Tokens mirror the main site (index.html) so the two stay in step.
   Deliberate departures from the site are marked.
   ========================================================================== */

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

:root {
  --black:        #000000;
  --off-black:    #060c0d;
  --deep:         #0c1a1d;
  --teal:         #21484E;
  --teal-dark:    #152e32;
  --accent:       #42BFD2;
  --accent-light: #72d4e3;
  --accent-dim:   rgba(66,191,210,0.12);
  --accent-glow:  rgba(66,191,210,0.28);
  --purple:       #9B84FC;
  --yellow:       #F8F666;
  --white:        #ffffff;
  --off-white:    #f0eee8;
  --muted:        #7a8890;
  --light-muted:  #b8c4c8;
  --border:       rgba(255,255,255,0.07);
  --border-bright:rgba(255,255,255,0.13);
  --border-teal:  rgba(66,191,210,0.18);
  --glass:        rgba(33,72,78,0.22);
  --glass-hover:  rgba(33,72,78,0.38);

  --nav-h: 62px;

  /* Scrollbar: teal at low opacity, so it reads as part of the page rather
     than a browser chrome element sitting on top of it. */
  --scroll-thumb:       rgba(66,191,210,0.20);
  --scroll-thumb-hover: rgba(66,191,210,0.42);
}

/* ---- scrollbars ----------------------------------------------------------
   The flow has three independently scrolling regions: the question column,
   the "Your assessment" panel, and the printable-summary overlay. The first
   two sit on near-black; the third is a light document on a light desk.

   Default scrollbars are pale and heavy against the dark ground, which is
   exactly where the page stops looking like the rest of the site.

   color-scheme does the load-bearing work. It is not only about scrollbars:
   it also darkens the native date picker on the deadline question and the
   default form-control rendering, which otherwise arrive white. The WebKit
   rules then refine width and colour on top, and the standard
   scrollbar-width / scrollbar-color properties cover Firefox, so no engine
   falls back to the default treatment. */

:root { color-scheme: dark; }

html, body, .flow-main, .flow-doc {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}

.flow-main::-webkit-scrollbar,
.flow-doc::-webkit-scrollbar,
body::-webkit-scrollbar { width: 11px; height: 11px; }

.flow-main::-webkit-scrollbar-track,
.flow-doc::-webkit-scrollbar-track,
body::-webkit-scrollbar-track { background: transparent; }

/* The transparent border plus background-clip insets the thumb, so it reads
   as a slim pill in the gutter rather than a bar filling it. */
.flow-main::-webkit-scrollbar-thumb,
.flow-doc::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 100px;
}

.flow-main::-webkit-scrollbar-thumb:hover,
.flow-doc::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
  border: 3px solid transparent;
  background-clip: content-box;
}

/* The summary overlay is a light document, so it keeps a light scrollbar -
   a dark one there would look like a rendering fault rather than a choice. */
.scope-doc {
  color-scheme: light;
  scrollbar-width: thin;
  scrollbar-color: rgba(34,31,31,0.26) transparent;
}
.scope-doc::-webkit-scrollbar { width: 11px; }
.scope-doc::-webkit-scrollbar-track { background: transparent; }
.scope-doc::-webkit-scrollbar-thumb {
  background: rgba(34,31,31,0.26);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 100px;
}
.scope-doc::-webkit-scrollbar-thumb:hover { background: rgba(34,31,31,0.42); background-clip: content-box; border: 3px solid transparent; }

html { background: var(--black); }

body {
  font-family: 'Montserrat', system-ui, sans-serif;
  background: var(--black);
  color: var(--white);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  /* Departure from the site: the main site hides the cursor for its custom
     one. This flow is input-heavy, so the native cursor stays. */
  cursor: auto;
}

::selection { background: var(--accent); color: var(--black); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- nav ---------------------------------------------------------------- */

.sc-nav {
  position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(18px, 3vw, 44px);
  background: rgba(4,10,11,.94);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.sc-logo img { display: block; height: 34px; width: auto; }
.sc-exit {
  font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; transition: color .2s;
}
.sc-exit:hover { color: var(--white); }

/* ---- split ------------------------------------------------------------- */

.flow {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  padding-top: var(--nav-h);
}

.flow-main {
  overflow-y: auto;
  padding: clamp(26px, 4vw, 56px) clamp(20px, 4.5vw, 76px) 96px;
  scroll-behavior: smooth;
}

.flow-doc {
  overflow-y: auto;
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(33,72,78,.34), transparent 70%),
    var(--off-black);
  border-left: 1px solid var(--border-teal);
  display: flex; flex-direction: column;
}

/* ---- progress rail ------------------------------------------------------ */

.rail-wrap { margin-bottom: clamp(30px, 5vw, 54px); }
body.at-intro .rail-wrap { display: none; }

.rail { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.rail li {
  display: flex; align-items: center; gap: 8px;
  font-size: 9.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.22);
  transition: color .3s;
}
.rail-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  transition: background .3s, box-shadow .3s, transform .3s;
}
.rail li.done { color: var(--muted); }
.rail li.done .rail-dot { background: var(--teal); }
.rail li.skipped { color: rgba(255,255,255,.18); text-decoration: line-through; }
.rail li.on { color: var(--accent); }
.rail li.on .rail-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim), 0 0 12px var(--accent-glow);
  transform: scale(1.25);
}

/* ---- intro -------------------------------------------------------------- */

.intro { max-width: 620px; padding-top: clamp(8px, 4vw, 40px); }

.eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 22px;
  display: flex; align-items: center; gap: 11px;
}
.eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--accent); }

.intro h1 {
  font-size: clamp(31px, 5.2vw, 55px);
  font-weight: 800; line-height: 1.04; letter-spacing: -.028em;
  text-wrap: balance; margin-bottom: 26px;
}

.lede {
  font-size: clamp(15px, 1.6vw, 17px); font-weight: 300;
  color: var(--light-muted); line-height: 1.78;
  max-width: 56ch;
}
.lede + .lede { margin-top: 15px; }

.intro-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: 3px;
  margin: 40px 0 38px; overflow: hidden;
}
.intro-meta div {
  background: var(--off-black); padding: 18px 20px;
  font-size: 12px; font-weight: 300; color: var(--muted); line-height: 1.55;
}
.intro-meta span {
  display: block; font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 7px;
}

/* ---- resuming a draft ----------------------------------------------------
   Offered in place of the start button, not beside it. Someone returning to a
   half-finished assessment wants the one they were doing; making them pick
   between two equally weighted buttons is a decision they did not ask for. */

.resume-draft {
  margin: 0 0 30px; padding: 20px 22px;
  border: 1px solid var(--border-teal); border-left: 2px solid var(--accent);
  background: var(--accent-dim); border-radius: 3px;
}
.resume-draft-lead {
  font-size: 14px; font-weight: 300; line-height: 1.65;
  color: var(--light-muted); margin-bottom: 16px;
}
.resume-draft-lead b { color: var(--white); font-weight: 600; }
.resume-draft-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ---- scoping process ----------------------------------------------------
   Where Build Your Assessment sits in the engagement. Four stages, always all
   four, at every width - the reassurance only works if the customer can see
   that the detail they are unsure about has a later home.

   Layout goes vertical → 2x2 → horizontal as room allows rather than scaling
   one drawing down, because the stage descriptions are the payload and
   shrinking them to fit is the one outcome worth avoiding. The current stage
   carries a text label and aria-current as well as colour. */

.proc { margin: 0 0 38px; }

.proc-title {
  font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px;
}

.proc-steps { list-style: none; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }

.proc-step {
  position: relative; background: var(--off-black);
  padding: 16px 18px 17px; display: flex; gap: 13px; align-items: flex-start;
}

.proc-n {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  color: var(--muted); padding-top: 2px; flex: none;
}

.proc-body { display: block; min-width: 0; }

.proc-step-title {
  display: block; font-size: 13px; font-weight: 600; line-height: 1.4;
  color: var(--white); letter-spacing: -.005em;
}

.proc-step-text {
  display: block; margin-top: 5px;
  font-size: 11.5px; font-weight: 300; line-height: 1.6; color: var(--muted);
}

/* Current stage: accent rule, lifted ground and an explicit label. */
.proc-here { background: var(--glass); box-shadow: inset 2px 0 0 var(--accent); }
.proc-here .proc-n { color: var(--accent); }
.proc-here .proc-step-text { color: var(--light-muted); }

.proc-here-tag {
  display: inline-block; margin-top: 9px;
  font-size: 8.5px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--border-teal);
  background: var(--accent-dim); border-radius: 100px; padding: 4px 10px;
}

.proc-foot {
  margin-top: 13px; font-size: 11.5px; font-weight: 300; line-height: 1.65;
  color: var(--muted); max-width: 60ch;
}

@media (min-width: 760px) {
  .proc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Horizontal four-stage journey once the column can hold it without
   squeezing the descriptions. The accent moves to the top edge so the four
   read as one left-to-right run. */
@media (min-width: 1180px) {
  .proc-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .proc-step { flex-direction: column; gap: 9px; padding: 16px 15px 18px; }
  .proc-here { box-shadow: inset 0 2px 0 var(--accent); }
  .proc-step-title { font-size: 12.5px; }
  .proc-step-text { font-size: 11px; }
}

@media (prefers-reduced-motion: no-preference) {
  .proc-step { transition: background .25s ease; }
}

/* ---- question ----------------------------------------------------------- */

.q { max-width: 640px; }

.q-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 16px; min-height: 20px;
}
.q-stage {
  font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent);
}
.q-amending {
  font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--yellow); border: 1px solid rgba(248,246,102,.3);
  padding: 3px 9px; border-radius: 100px;
}

.q-ask {
  font-size: clamp(23px, 3.2vw, 34px);
  font-weight: 700; line-height: 1.16; letter-spacing: -.022em;
  text-wrap: balance; margin-bottom: 16px;
  outline: none;
}

.q-why {
  font-size: 13.5px; font-weight: 300; color: var(--muted);
  line-height: 1.75; max-width: 54ch; margin-bottom: 30px;
  padding-left: 15px; border-left: 2px solid var(--border-teal);
}
.q-why b { color: var(--light-muted); font-weight: 600; }
/* Helper text is occasionally two thoughts - the second is usually the
   reassurance, and it needs air around it rather than a run-on. */
.q-why p + p { margin-top: 11px; }

/* ---- informational screen ------------------------------------------------
   A screen with nothing to answer: context the customer needs before the
   scoping call. Deliberately quieter than a question so it does not read as
   one, and never a place to ask for credentials or secrets. */

.q-note {
  padding: 22px 24px 24px;
  border: 1px solid var(--border-teal); border-left: 2px solid var(--accent);
  border-radius: 3px; background: var(--accent-dim);
}
.q-note-title { font-size: clamp(19px, 2.4vw, 25px) !important; margin-bottom: 14px !important; }
.q-note-p {
  font-size: 14px; font-weight: 300; line-height: 1.75;
  color: var(--light-muted); max-width: 58ch;
}
.q-note-p + .q-note-p { margin-top: 13px; }
.q-note-em {
  margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--border-teal);
  font-size: 13.5px; line-height: 1.65; color: var(--white);
}

.q-hint {
  font-size: 11.5px; font-weight: 300; color: var(--muted); margin-top: 13px;
}

/* ---- options ------------------------------------------------------------ */

.opts { display: grid; gap: 8px; }

.opt {
  display: flex; align-items: flex-start; gap: 13px;
  width: 100%; text-align: left;
  font-family: inherit; font-size: 14.5px; font-weight: 400; line-height: 1.5;
  color: var(--light-muted);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 15px 18px;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .12s;
}
.opt:hover { background: var(--glass-hover); border-color: var(--border-bright); color: var(--white); }
.opt:active { transform: scale(.994); }

.opt-mark {
  flex: none; width: 15px; height: 15px; margin-top: 3px;
  border: 1px solid var(--border-bright); border-radius: 2px;
  position: relative; transition: border-color .18s, background .18s;
}
.opts:not(.opts-multi) .opt-mark { border-radius: 50%; }

.opt.on {
  background: rgba(66,191,210,.09);
  border-color: var(--accent);
  color: var(--white);
}
.opt.on .opt-mark { border-color: var(--accent); background: var(--accent); }
.opt.on .opt-mark::after {
  content: ''; position: absolute; inset: 0;
  background: var(--black);
  clip-path: polygon(19% 48%, 40% 68%, 82% 26%, 88% 34%, 40% 82%, 12% 55%);
}

.opt-unsure {
  margin-top: 6px;
  border-style: dashed;
  color: var(--muted);
  font-style: italic;
}
.opt-unsure:hover { color: var(--light-muted); }
.opt-unsure.on {
  background: rgba(155,132,252,.09);
  border-color: var(--purple);
  border-style: solid;
  font-style: normal;
}
.opt-unsure.on .opt-mark { border-color: var(--purple); background: var(--purple); }

/* ---- text inputs -------------------------------------------------------- */

.ta, .ti, .field input, .field textarea {
  width: 100%;
  font-family: inherit; font-size: 14.5px; font-weight: 300; line-height: 1.7;
  color: var(--white);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 14px 16px;
  resize: vertical;
  transition: border-color .18s, background .18s;
}
.ta:focus, .ti:focus, .field input:focus, .field textarea:focus {
  border-color: var(--accent); background: var(--glass-hover); outline: none;
}
.ta::placeholder, .ti::placeholder { color: rgba(255,255,255,.22); }

.q-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.field { display: grid; gap: 7px; }
.field-wide, .field:has(textarea) { grid-column: 1 / -1; }
.field > span {
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.field > span i { font-style: normal; color: rgba(255,255,255,.2); font-weight: 500; }
.field-missing input { border-color: var(--purple); }

/* Honeypot. Off-screen rather than display:none, because some bots skip
   fields that are not rendered at all. Hidden from assistive tech and from
   the tab order too, so no real person ever meets it. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---- resumed from an emailed link --------------------------------------- */

.resume-note {
  background: rgba(66,191,210,.07);
  border: 1px solid var(--border-teal);
  border-left: 2px solid var(--accent);
  border-radius: 3px;
  padding: 15px 18px;
  margin-bottom: 28px;
  font-size: 13px; font-weight: 300; line-height: 1.7;
  color: var(--light-muted);
  max-width: 58ch;
}
.resume-note b { color: var(--white); font-weight: 600; }

.resume-bad {
  background: rgba(155,132,252,.07);
  border-color: rgba(155,132,252,.28);
  border-left-color: var(--purple);
  margin: 26px 0 0;
}

/* Only staff ever see this: it explains which of the two amendment actions
   emails the customer. Quiet, because it sits under the buttons it describes. */
.rev-staff-note {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 12.5px; font-weight: 300; line-height: 1.65;
  color: var(--muted);
}

/* Arriving from a service page: says which route has been pre-selected and
   that it can be changed, so nothing has been decided on their behalf without
   them being told. */
.source-note { margin-top: 26px; }

/* The Privacy Notice, at the two points somebody might want it: where their
   details are asked for, and beside the button that sends them. Quiet enough
   not to read as a consent wall the rest of the site does not have. */
.q-privacy {
  margin: 16px 0 0;
  max-width: 62ch;
  font-size: 12px; font-weight: 300; line-height: 1.6;
  color: var(--muted);
}
.q-privacy a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.q-privacy a:hover, .q-privacy a:focus-visible { color: var(--accent); }

/* ---- save and come back later -------------------------------------------

   An escape hatch, not a third button. It sits below the nav and reads as a
   quiet line, because almost everybody should carry on to the end - but the
   few who cannot need to find it without hunting. */

.q-save-line { margin: 16px 0 0; }

.link-save {
  font-family: inherit; font-size: 12.5px; font-weight: 300;
  background: none; border: none; padding: 0;
  color: var(--muted); cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.14);
  transition: color .2s, border-color .2s;
}
.link-save:hover, .link-save:focus-visible { color: var(--accent); border-bottom-color: var(--accent); }

.save-panel .q-fields { grid-template-columns: 1fr; max-width: 42ch; }
.field-hint {
  font-style: normal; font-size: 11.5px; font-weight: 300;
  letter-spacing: 0; text-transform: none; color: var(--muted);
}

/* Long, and never something to retype: it has to wrap rather than force the
   panel sideways on a phone. */
.save-link {
  margin: 0 0 20px;
  font-size: 13px; line-height: 1.6;
  word-break: break-all;
}
.save-link a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--border-teal); }
.save-link a:hover { border-bottom-color: var(--accent); }

/* ---- nav buttons -------------------------------------------------------- */

.q-nav { display: flex; align-items: center; gap: 12px; margin-top: 34px; }

.btn-primary {
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--accent); color: var(--black);
  border: none; border-radius: 2px;
  padding: 15px 32px; cursor: pointer;
  box-shadow: 0 0 26px var(--accent-glow);
  transition: background .2s, box-shadow .2s, transform .15s;
}
.btn-primary:hover { background: var(--accent-light); box-shadow: 0 0 38px var(--accent-glow); }
.btn-primary:active { transform: scale(.975); }

.btn-ghost {
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  background: none; color: var(--muted);
  border: 1px solid var(--border-bright); border-radius: 2px;
  padding: 15px 26px; cursor: pointer;
  transition: color .2s, border-color .2s, transform .15s;
}
.btn-ghost:hover:not(:disabled) { color: var(--white); border-color: var(--accent); }
.btn-ghost:active:not(:disabled) { transform: scale(.975); }
.btn-ghost:disabled { opacity: .28; cursor: not-allowed; }

/* ---- review ------------------------------------------------------------- */

.rev-block { margin-bottom: 30px; }
.rev-block h3 {
  font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
.rev-block p {
  font-size: 14.5px; font-weight: 300; color: var(--light-muted);
  line-height: 1.8; max-width: 58ch;
}
.rev-block p + p { margin-top: 10px; }

.rev-clarify {
  background: rgba(155,132,252,.05);
  border: 1px solid rgba(155,132,252,.18);
  border-left: 2px solid var(--purple);
  border-radius: 3px; padding: 22px 24px;
}
.rev-clarify h3 { color: var(--purple); }
.rev-clarify ul { list-style: none; display: grid; gap: 9px; }
.rev-clarify li {
  font-size: 14px; font-weight: 300; color: var(--light-muted);
  padding-left: 18px; position: relative; line-height: 1.65;
}
.rev-clarify li::before {
  content: ''; position: absolute; left: 0; top: .68em;
  width: 6px; height: 1px; background: var(--purple);
}
.rev-note { font-size: 12.5px !important; color: var(--muted) !important; margin-top: 15px; }

.rev-error {
  margin-top: 18px; padding: 15px 18px;
  background: rgba(155,132,252,.08);
  border-left: 2px solid var(--purple);
  border-radius: 3px;
  font-size: 13px; font-weight: 300; line-height: 1.7;
  color: var(--light-muted); max-width: 58ch;
}

.done-ref {
  font-size: 12px; color: var(--muted); margin-top: 14px;
  letter-spacing: .04em;
}
.done-ref b {
  color: var(--accent); font-weight: 600;
  font-family: ui-monospace, monospace; letter-spacing: .06em;
}

/* ---- done --------------------------------------------------------------- */

.done-mark {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--accent); position: relative;
  margin-bottom: 26px;
  box-shadow: 0 0 24px var(--accent-glow);
}
.done-mark::after {
  content: ''; position: absolute; inset: 13px;
  background: var(--accent);
  clip-path: polygon(19% 48%, 40% 68%, 82% 26%, 88% 34%, 40% 82%, 12% 55%);
}

.done-actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }

.done-internal {
  margin-top: 48px; padding: 22px 24px;
  border: 1px dashed var(--border-bright); border-radius: 3px;
  background: rgba(255,255,255,.015);
}
.done-internal-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 16px;
}
.done-internal dl { display: grid; gap: 10px; }
.done-internal dl > div {
  display: grid; grid-template-columns: 160px 1fr; gap: 16px;
  font-size: 13px;
}
.done-internal dt { color: var(--muted); font-weight: 400; }
.done-internal dd { color: var(--white); font-weight: 500; }
.done-internal dd i { color: var(--muted); font-style: normal; font-weight: 300; }
.done-internal dd.pending { color: var(--muted); font-weight: 300; font-style: italic; }
.done-internal code {
  font-family: ui-monospace, monospace; font-size: 10.5px;
  background: rgba(155,132,252,.12); color: var(--purple);
  padding: 3px 7px; border-radius: 2px; margin-right: 4px;
  display: inline-block; margin-bottom: 3px;
}

/* ---- the document pane -------------------------------------------------- */

.doc-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: clamp(24px, 3.4vw, 40px) clamp(22px, 3.4vw, 44px) 20px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 2;
  background: rgba(6,12,13,.93);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.doc-kicker {
  font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent);
}
.doc-org { font-size: 11px; color: var(--muted); font-weight: 300; margin-top: 5px; }

.doc-close {
  display: none;
  background: none; border: none; color: var(--muted);
  font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px;
}

.doc-body {
  flex: 1;
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3.4vw, 44px);
}

.doc-empty {
  font-size: 13.5px; font-weight: 300; font-style: italic;
  color: rgba(255,255,255,.2); line-height: 1.8; max-width: 32ch;
  padding-top: 20px;
}

.doc-sec { margin-bottom: 30px; }
.doc-sec h3 {
  font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 9px; margin-bottom: 13px;
  border-bottom: 1px solid var(--border);
}

.doc-line {
  font-size: 13.5px; font-weight: 300; line-height: 1.82;
  color: var(--light-muted);
  padding: 7px 11px; margin: 0 -11px 2px;
  border-radius: 3px;
  border-left: 2px solid transparent;
  animation: docIn .42s cubic-bezier(.2,.7,.3,1) both;
  transition: background .18s, border-color .18s, color .18s;
}

.doc-lead {
  color: var(--white); font-weight: 400; font-size: 14.5px;
  border-left-color: var(--accent);
  background: rgba(66,191,210,.05);
}

.doc-jump { cursor: pointer; }
.doc-jump:hover {
  background: var(--glass); color: var(--white);
  border-left-color: var(--accent);
}
.doc-jump:hover::after {
  content: 'change';
  font-size: 8.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-left: 9px; vertical-align: middle;
}

/* Wording and affordance differ by input, not by screen size: a touch
   laptop should read "tap" too. */
.on-touch { display: none; }

@media (hover: none) {
  .on-pointer { display: none; }
  .on-touch { display: inline; }

  /* There is no hover to reveal the affordance, so every changeable line
     carries a permanent one. Without it nothing signals they are tappable. */
  .doc-jump { border-left-color: var(--border-teal); }
  .doc-jump::after {
    content: '';
    display: inline-block;
    width: 5px; height: 5px;
    margin-left: 8px; vertical-align: middle;
    border-top: 1px solid var(--accent);
    border-right: 1px solid var(--accent);
    transform: rotate(45deg);
    opacity: .65;
  }
  .doc-lead::after { display: none; }
}

@keyframes docIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

.doc-foot {
  font-size: 10.5px; font-weight: 300; color: rgba(255,255,255,.22);
  padding: 16px clamp(22px, 3.4vw, 44px) clamp(22px, 3vw, 32px);
  border-top: 1px solid var(--border);
}

/* ---- mobile drawer ------------------------------------------------------ */

.doc-toggle {
  display: none;
  position: fixed; right: 16px; bottom: 16px; z-index: 70;
  font-family: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--accent); color: var(--black);
  border: none; border-radius: 100px;
  /* 44px is the smallest reliable touch target; this is the one control on
     the page that is only ever used with a thumb. */
  min-height: 48px;
  padding: 0 26px; cursor: pointer;
  box-shadow: 0 4px 24px rgba(0,0,0,.5), 0 0 22px var(--accent-glow);
}

@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; }
  .flow-main { padding-bottom: 96px; }
  .flow-doc {
    position: fixed; inset: var(--nav-h) 0 0 0; z-index: 65;
    transform: translateY(100%);
    transition: transform .34s cubic-bezier(.3,.8,.3,1);
    border-left: none; border-top: 1px solid var(--border-teal);
  }
  body.doc-open .flow-doc { transform: none; }
  .doc-close { display: block; }
  .doc-toggle { display: block; }
  body.doc-open .doc-toggle { display: none; }
  .q-fields { grid-template-columns: 1fr; }
  .done-internal dl > div { grid-template-columns: 1fr; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .flow-main { scroll-behavior: auto; }
}

/* ---- the finished scope of works --------------------------------------- */

.scope-doc {
  position: fixed; inset: 0; z-index: 90;
  background: #e9edee;
  overflow-y: auto;
  padding: 0 0 60px;
}

/* On a phone the document takes the full width, because reading measure
   matters more than the paper effect. From tablet up it sits on the desk
   again, which otherwise disappears at exactly the page's max-width. */
@media (min-width: 700px) {
  .scope-doc { padding-left: 24px; padding-right: 24px; }
}

.scope-bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 14px clamp(16px, 3vw, 34px);
  background: rgba(6,12,13,.96);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border-teal);
}
.scope-bar-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }

.scope-fallback {
  font-size: 12px; font-weight: 300; line-height: 1.55;
  color: var(--yellow); max-width: 46ch; text-align: right;
}

/* The page itself: a document, on paper.
   Palette taken from Koncise Brand Guidelines 2026 rather than from the
   website's dark tokens. The guidelines' primary dark is a warm #221F1F and
   the ground a warm #FDFCFA, neither of which is the near-black and pure
   white a screen UI would default to. */

.scope-page {
  --sp-ink:    #221F1F;
  --sp-ground: #FDFCFA;
  --sp-teal:   #21484E;
  --sp-accent: #42BFD2;
  --sp-body:   #4A4646;
  --sp-mute:   #7C7C7C;
  --sp-rule:   #E2DFDA;

  background: var(--sp-ground);
  color: var(--sp-ink);
  max-width: 820px;
  margin: clamp(18px, 3vw, 44px) auto;
  box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 22px 60px rgba(0,0,0,.32);
  /* Backgrounds and tints must survive the print pipeline. */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.sp-head {
  background: var(--sp-ink);
  padding: clamp(22px, 3.4vw, 30px) clamp(24px, 5vw, 66px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.sp-lockup { height: 34px; width: auto; display: block; }
.sp-unit {
  font-size: 9px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--sp-accent);
}

.sp-titleblock {
  padding: clamp(30px, 4.6vw, 46px) clamp(24px, 5vw, 66px) 0;
  border-bottom: 3px solid var(--sp-accent);
  padding-bottom: 22px;
}
.sp-title {
  font-size: clamp(28px, 4.2vw, 40px); font-weight: 800;
  letter-spacing: -.028em; line-height: 1.05; color: var(--sp-ink);
  text-wrap: balance;
}
.sp-standfirst {
  font-size: 13px; font-weight: 400; color: var(--sp-mute);
  margin-top: 10px; max-width: 56ch;
}

.sp-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px 24px;
  margin: 0 clamp(24px, 5vw, 66px);
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--sp-rule);
}
.sp-meta dt {
  font-size: 8px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sp-teal); margin-bottom: 6px;
}
.sp-meta dd { font-size: 13.5px; font-weight: 600; color: var(--sp-ink); }

.sp-sec { margin: 0 clamp(24px, 5vw, 66px) 26px; }
.sp-sec:first-of-type { margin-top: 28px; }
.sp-sec h2 {
  font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sp-teal);
  padding-bottom: 8px; margin-bottom: 14px;
  border-bottom: 1px solid var(--sp-rule);
}
.sp-sec p {
  font-size: 13px; font-weight: 400; line-height: 1.78; color: var(--sp-body);
  max-width: 70ch;
}
.sp-sec p + p { margin-top: 10px; }

.sp-lead {
  font-weight: 600 !important; color: var(--sp-ink) !important; font-size: 14.5px !important;
  background: rgba(66,191,210,.10);
  border-left: 3px solid var(--sp-accent);
  padding: 13px 18px; margin-bottom: 12px;
}

.sp-caveat {
  margin: 34px clamp(24px, 5vw, 66px) 0;
  padding: 22px 24px;
  background: #F2F0EC;
  border-left: 3px solid var(--sp-teal);
}
.sp-caveat p { font-size: 11.5px; line-height: 1.72; color: var(--sp-body); max-width: 74ch; }
.sp-caveat p + p { margin-top: 9px; }
.sp-caveat b { color: var(--sp-ink); font-weight: 700; }

.sp-foot {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin: 34px clamp(24px, 5vw, 66px) 0;
  padding: 14px 0 clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--sp-rule);
  font-size: 8.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sp-mute);
}

@media (max-width: 620px) {
  .scope-bar { flex-direction: column; align-items: stretch; }
  .scope-bar-right { justify-content: stretch; flex-direction: column; }
  .scope-fallback { text-align: left; max-width: none; }
}

/* ---- print --------------------------------------------------------------
   Only the document prints. Everything else, including the flow behind it,
   is removed from the page rather than merely hidden, so no blank leading
   page is produced.                                                        */

@media print {
  @page { margin: 16mm 15mm; }

  html, body { background: #fff !important; }

  .sc-nav, .flow, .doc-toggle, .scope-bar { display: none !important; }

  .scope-doc {
    position: static; inset: auto;
    background: #fff !important;
    overflow: visible; padding: 0;
  }
  .scope-doc[hidden] { display: none !important; }

  .scope-page {
    max-width: none; margin: 0;
    box-shadow: none;
    background: var(--sp-ground) !important;
  }
  /* Sections carry horizontal padding on screen; the page margin covers it
     in print, so pull it back to keep the measure honest on paper. */
  .sp-head, .sp-titleblock, .sp-meta, .sp-sec, .sp-caveat, .sp-foot {
    margin-left: 0; margin-right: 0;
    padding-left: 0; padding-right: 0;
  }
  .sp-head { padding: 14px 16px; }
  .sp-lead, .sp-caveat { padding-left: 14px; padding-right: 14px; }
  .sp-titleblock { padding-top: 22px; }

  .sp-sec, .sp-caveat, .sp-meta { break-inside: avoid; }
  .sp-title { font-size: 24pt; }
  .sp-sec p { font-size: 10.5pt; }
  .sp-lead { font-size: 11.5pt !important; }
  .sp-foot { position: fixed; bottom: 0; left: 0; right: 0; }
}

/* ---- diagnostics (?diag=1 only) ----------------------------------------- */

.diag {
  margin-top: 34px; padding: 20px 22px;
  border: 1px dashed var(--border-bright); border-radius: 3px;
  background: rgba(255,255,255,.015);
}
.diag-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px;
}
.diag dl { display: grid; gap: 9px; }
.diag dl > div { display: grid; grid-template-columns: 150px 1fr; gap: 14px; font-size: 13px; }
.diag dt { color: var(--muted); font-weight: 400; }
.diag dd { color: var(--white); }
.diag b { font-weight: 600; }
.diag-ok   { color: var(--accent); }
.diag-skip { color: var(--yellow); }
.diag-bad  { color: var(--purple); }
.diag-note {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 12.5px; font-weight: 300; color: var(--light-muted); line-height: 1.7;
}
@media (max-width: 900px) {
  .diag dl > div { grid-template-columns: 1fr; gap: 2px; }
}
.diag-why {
  display: block; margin-top: 6px;
  font-family: ui-monospace, monospace; font-size: 11.5px; font-weight: 400;
  line-height: 1.6; color: var(--light-muted);
  background: rgba(155,132,252,.08); border-left: 2px solid var(--purple);
  padding: 8px 11px; border-radius: 2px;
  overflow-wrap: anywhere;
}
.diag-val {
  font-family: ui-monospace, monospace; font-size: 11.5px;
  color: var(--accent); overflow-wrap: anywhere;
}