/* ==========================================================================
   Working Orders — site styles
   Calm, minimal, precise. Trust comes from restraint, not reassurance.
   No external fonts, no external anything. Light and dark.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */

:root {
  --paper:        #faf9f6;
  --paper-raised: #ffffff;
  --paper-sunk:   #f2f0ea;
  --ink:          #17211f;
  --ink-soft:     #4a5754;
  --ink-faint:    #7b8784;
  --rule:         #e2ded4;
  --rule-strong:  #cfcabd;

  --accent:       #1f5a50;
  --accent-soft:  #2c7266;
  --accent-wash:  #eaf2f0;
  --on-accent:    #faf9f6;

  --warn:         #8a5a12;
  --warn-wash:    #fdf4e3;
  --warn-rule:    #e5c98d;

  --stop:         #8c2f22;
  --stop-wash:    #fbecea;
  --stop-rule:    #e0a99f;

  --serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --measure: 34rem;
  --page:    72rem;
  --radius:  4px;

  --shadow: 0 1px 2px rgb(23 33 31 / 0.04), 0 4px 16px rgb(23 33 31 / 0.05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #0f1614;
    --paper-raised: #161f1c;
    --paper-sunk:   #0b1210;
    --ink:          #e7ece9;
    --ink-soft:     #a3b0ac;
    --ink-faint:    #75837f;
    --rule:         #26312e;
    --rule-strong:  #35423e;

    --accent:       #7cc0b1;
    --accent-soft:  #a3d5c9;
    --accent-wash:  #14231f;
    --on-accent:    #0f1614;

    --warn:         #e0b56a;
    --warn-wash:    #241d0f;
    --warn-rule:    #5c4820;

    --stop:         #e39288;
    --stop-wash:    #241310;
    --stop-rule:    #5e2c25;

    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 16px rgb(0 0 0 / 0.25);
  }
}

:root[data-theme="dark"] {
  --paper:        #0f1614;
  --paper-raised: #161f1c;
  --paper-sunk:   #0b1210;
  --ink:          #e7ece9;
  --ink-soft:     #a3b0ac;
  --ink-faint:    #75837f;
  --rule:         #26312e;
  --rule-strong:  #35423e;

  --accent:       #7cc0b1;
  --accent-soft:  #a3d5c9;
  --accent-wash:  #14231f;
  --on-accent:    #0f1614;

  --warn:         #e0b56a;
  --warn-wash:    #241d0f;
  --warn-rule:    #5c4820;

  --stop:         #e39288;
  --stop-wash:    #241310;
  --stop-rule:    #5e2c25;

  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 16px rgb(0 0 0 / 0.25);
}

/* --------------------------------------------------------------- base */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.15rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; font-family: var(--sans); font-weight: 600; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-soft); }

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

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--on-accent);
  padding: 0.6rem 1rem; z-index: 100; border-radius: var(--radius);
}
.skip:focus { left: 1rem; top: 1rem; }

/* Every number on this page is tabular. Misaligned digits read as amateurish. */
.num, td.num, .stat-value, .big-num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* --------------------------------------------------------------- layout */

.wrap { width: min(100% - 2.5rem, var(--page)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, 46rem); margin-inline: auto; }
.measure { max-width: var(--measure); }

section { padding-block: clamp(3rem, 8vw, 5.5rem); }
section + section { border-top: 1px solid var(--rule); }

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
  margin-bottom: 1rem;
}

.lede { font-size: 1.12rem; color: var(--ink-soft); }

/* --------------------------------------------------------------- risk banner */

.riskbar {
  background: var(--paper-sunk);
  border-bottom: 1px solid var(--rule);
  font-size: 0.82rem;
  color: var(--ink-soft);
  padding: 0.7rem 0;
  line-height: 1.45;
}
.riskbar strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- header */

.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: 1.4rem;
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--serif); font-size: 1.15rem; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none;
}
.wordmark:hover { color: var(--ink); }
.wordmark svg { display: block; color: var(--accent); }

.masthead nav { display: flex; gap: 1.6rem; align-items: center; }
.masthead nav a {
  font-size: 0.88rem; color: var(--ink-soft); text-decoration: none;
}
.masthead nav a:hover { color: var(--accent); }
@media (max-width: 46rem) { .masthead nav a.opt { display: none; } }

.theme-toggle {
  background: none; border: 1px solid var(--rule-strong); color: var(--ink-soft);
  width: 2rem; height: 2rem; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* --------------------------------------------------------------- hero */

/* Kept deliberately short: the certification gate must be reachable without
   scrolling on a normal desktop viewport, or nobody ever sees it. */
.hero { padding-block: clamp(2rem, 4vw, 3.2rem); }
.hero h1 { max-width: 20ch; }
.hero .lede { max-width: 58ch; font-size: 1.1rem; margin-top: 1.1rem; }

.proof {
  list-style: none; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem;
  margin: 1.5rem 0 0; font-size: 0.86rem; color: var(--ink-soft);
}
.proof li { display: flex; align-items: center; gap: 0.5rem; }
.proof li::before {
  content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}

#certify { padding-block: 0 clamp(3rem, 6vw, 4rem); }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 0 2.5rem;
  margin-top: 2.5rem; padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}
.hero-meta div { min-width: 9rem; }
.hero-meta dt {
  font-size: 0.72rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}
.hero-meta dd { margin: 0.3rem 0 0; font-family: var(--serif); font-size: 1.25rem; }

/* --------------------------------------------------------------- cards & grid */

.grid { display: grid; gap: 1.5rem; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }

.card {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.6rem;
}

.card h3 { margin-bottom: 0.4rem; }
.card p { font-size: 0.94rem; color: var(--ink-soft); }

/* The headline figure on a model card. Sized for one or two digits. */
.step-n {
  font-family: var(--serif); font-size: 2.4rem; line-height: 1;
  color: var(--accent); margin-bottom: 0.7rem;
  font-variant-numeric: tabular-nums lining-nums;
}

/* --------------------------------------------------------------- tiers */

.tiers { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

.tier {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.75rem;
  display: flex; flex-direction: column;
}
.tier--feature { border-color: var(--accent); box-shadow: var(--shadow); }

.tier-name { font-family: var(--serif); font-size: 1.3rem; }
.tier-account { font-size: 0.82rem; color: var(--ink-faint); margin-top: 0.15rem; }
.tier-price {
  font-family: var(--serif); font-size: 2.1rem; margin: 1.1rem 0 0.2rem;
  font-variant-numeric: tabular-nums lining-nums;
}
.tier-price span { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-faint); }
.tier-blurb { font-size: 0.9rem; color: var(--ink-soft); margin: 0.9rem 0 1.2rem; }

.tier ul { list-style: none; padding: 0; margin: 0 0 1.4rem; font-size: 0.88rem; }
.tier li {
  padding: 0.42rem 0 0.42rem 1.4rem; position: relative;
  border-top: 1px solid var(--rule); color: var(--ink-soft);
}
.tier li::before {
  content: ""; position: absolute; left: 0.15rem; top: 0.95rem;
  width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--accent);
}
.tier .badge { margin-top: auto; }

.badge {
  display: inline-block; font-size: 0.68rem; letter-spacing: 0.09em;
  text-transform: uppercase; font-weight: 700;
  padding: 0.28rem 0.55rem; border-radius: 2px;
  background: var(--accent-wash); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.badge--warn { background: var(--warn-wash); color: var(--warn); border-color: var(--warn-rule); }
.badge--muted { background: var(--paper-sunk); color: var(--ink-faint); border-color: var(--rule-strong); }

/* --------------------------------------------------------------- the gate */

dialog#gate-dialog {
  position: fixed;
  padding: 0; border: 0; background: transparent;
  max-width: min(46rem, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  overflow: visible;
  color: var(--ink);
}
dialog#gate-dialog::backdrop {
  background: rgb(10 16 15 / 0.55);
  backdrop-filter: blur(3px);
}
dialog#gate-dialog:not([open]) { display: none; }

.dialog-close {
  position: absolute; top: 0.6rem; right: 0.8rem; z-index: 2;
  background: none; border: 0; cursor: pointer; padding: 0.2rem 0.4rem;
  font-size: 1.6rem; line-height: 1; color: var(--ink-faint);
  border-radius: var(--radius);
}
.dialog-close:hover { color: var(--accent); }

/* The modal scrolls internally so the page behind it never does. */
.gate--modal {
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  box-shadow: 0 12px 48px rgb(0 0 0 / 0.35);
}

.gate {
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  box-shadow: var(--shadow);
}

.gate legend {
  font-family: var(--serif); font-size: 1.05rem; padding: 0;
  margin-bottom: 0.35rem;
}
.gate fieldset { border: 0; padding: 0; margin: 0 0 1.8rem; }

.gate .statute {
  font-size: 0.86rem; color: var(--ink-soft);
  background: var(--paper-sunk); border-left: 2px solid var(--rule-strong);
  padding: 0.9rem 1.1rem; margin: 0 0 1.5rem; border-radius: 0 2px 2px 0;
}

.criterion {
  display: flex; gap: 0.8rem; align-items: flex-start;
  padding: 0.85rem 0; border-top: 1px solid var(--rule);
  cursor: pointer;
}
.criterion:last-of-type { border-bottom: 1px solid var(--rule); }
.criterion input { margin-top: 0.35rem; flex-shrink: 0; accent-color: var(--accent); width: 1rem; height: 1rem; }
.criterion span { font-size: 0.91rem; color: var(--ink-soft); }
.criterion:hover span { color: var(--ink); }

.gate-fields { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

/* --------------------------------------------------------------- forms */

label.field { display: block; }
.field-label {
  display: block; font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 0.4rem;
}

input[type="text"], input[type="number"], input[type="date"], input[type="email"],
textarea, select {
  width: 100%; padding: 0.6rem 0.7rem;
  font-family: var(--sans); font-size: 0.95rem;
  font-variant-numeric: tabular-nums lining-nums;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  appearance: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); }

textarea { resize: vertical; min-height: 6rem; font-family: inherit; line-height: 1.55; }

.enquiry .inputs { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.enquiry .footnote { border-top: 1px solid var(--rule); }
#enq-status:empty { display: none; }
#enq-status.is-ok { color: var(--accent); }
#enq-status.is-bad { color: var(--stop); }

select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 55%, calc(100% - 0.75rem) 55%;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

/* the value readout that sits beside a slider's label */
.field-value {
  float: right; color: var(--accent); font-weight: 700;
  letter-spacing: 0; text-transform: none; font-size: 0.85rem;
}

/* (i) marker with a hover/focus bubble. Keyboard reachable via tabindex, and the
   text is duplicated into aria-label so it is not hover-only for assistive tech. */
.info {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 0.95rem; height: 0.95rem; margin-left: 0.35rem;
  border: 1px solid var(--rule-strong); border-radius: 50%;
  font-size: 0.62rem; font-weight: 700; font-style: normal;
  color: var(--ink-faint); cursor: help; vertical-align: middle;
  text-transform: none; letter-spacing: 0;
}
.info:hover, .info:focus-visible { border-color: var(--accent); color: var(--accent); }

.info-bubble {
  display: none; position: absolute; top: calc(100% + 0.45rem); left: -0.6rem;
  width: 15rem; max-width: 70vw; z-index: 30;
  background: var(--paper-raised); color: var(--ink-soft);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 0.7rem 0.85rem;
  font-size: 0.78rem; font-weight: 400; line-height: 1.5;
  text-transform: none; letter-spacing: 0; text-align: left;
}
.info:hover .info-bubble,
.info:focus-visible .info-bubble { display: block; }

.field-hint {
  display: block; margin-top: 0.4rem;
  font-size: 0.76rem; color: var(--ink-faint); line-height: 1.45;
}

.range-scale {
  display: flex; justify-content: space-between;
  font-size: 0.7rem; color: var(--ink-faint); margin-top: 0.1rem;
}

input[type="range"] {
  width: 100%; margin: 0.35rem 0 0; padding: 0;
  appearance: none; background: transparent; cursor: pointer;
}
input[type="range"]:disabled { cursor: not-allowed; opacity: 0.45; }

input[type="range"]::-webkit-slider-runnable-track {
  height: 0.3rem; border-radius: 99px;
  background: var(--paper-sunk); border: 1px solid var(--rule-strong);
}
input[type="range"]::-moz-range-track {
  height: 0.3rem; border-radius: 99px;
  background: var(--paper-sunk); border: 1px solid var(--rule-strong);
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--paper-raised);
  box-shadow: 0 0 0 1px var(--accent);
  margin-top: -0.37rem;
}
input[type="range"]::-moz-range-thumb {
  width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--paper-raised);
  box-shadow: 0 0 0 1px var(--accent);
}

.check {
  display: flex; gap: 0.65rem; align-items: flex-start;
  font-size: 0.9rem; color: var(--ink-soft); cursor: pointer;
}
.check input { margin-top: 0.25rem; accent-color: var(--accent); width: 1rem; height: 1rem; flex-shrink: 0; }

.btn {
  display: inline-block; font: inherit; font-size: 0.92rem; font-weight: 600;
  padding: 0.7rem 1.5rem; border-radius: var(--radius); cursor: pointer;
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
  text-decoration: none;
}
.btn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--on-accent); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--ghost { background: none; color: var(--accent); }
.btn--ghost:hover:not(:disabled) { background: var(--accent-wash); color: var(--accent); }
.btn--small { font-size: 0.82rem; padding: 0.45rem 0.9rem; }

/* --------------------------------------------------------------- calculator */

.calc { display: grid; gap: 1.75rem; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start; }
@media (max-width: 58rem) { .calc { grid-template-columns: 1fr; } }

.panel {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.panel--inputs { position: sticky; top: 1.5rem; }
@media (max-width: 58rem) { .panel--inputs { position: static; } }

.panel h3 {
  font-family: var(--sans); font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 1.2rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--rule);
}

.inputs { display: grid; gap: 1.05rem; }

.advanced { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.advanced summary {
  font-size: 0.8rem; color: var(--ink-faint); cursor: pointer;
  font-weight: 600; letter-spacing: 0.04em;
}
.advanced summary:hover { color: var(--accent); }
.advanced .inputs { margin-top: 1rem; }

/* results */

.stat-row {
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: var(--radius);
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  overflow: hidden; margin-bottom: 1.25rem;
}
.stat {
  background: var(--paper-raised); padding: 1rem 1.1rem;
}
.stat-label {
  font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; margin-bottom: 0.35rem;
}
.stat-value { font-family: var(--serif); font-size: 1.5rem; line-height: 1.15; }
.stat-note { font-size: 0.76rem; color: var(--ink-faint); margin-top: 0.25rem; }
.stat--wide { grid-column: 1 / -1; }
.stat--good .stat-value { color: var(--accent); }
.stat--warn .stat-value { color: var(--warn); }
.stat--stop .stat-value { color: var(--stop); }

/* the headroom meter */

.meter { margin: 0.7rem 0 0; }

/* Stacked: the money underwater and the margin held are different kinds of
   commitment and are shown as separate segments. Segments do not shrink, so a
   position needing more than the balance simply fills the track and the caption
   carries the true figure. */
.meter-track {
  height: 0.7rem; background: var(--paper-sunk); border-radius: 99px;
  overflow: hidden; border: 1px solid var(--rule);
  display: flex;
}
.meter-seg { height: 100%; flex-shrink: 0; }
.meter-seg--exposure { background: var(--warn); }
.meter-seg--exposure-over { background: var(--stop); }
.meter-seg--margin { background: var(--accent); }

.meter-scale {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: 0.72rem; color: var(--ink-faint); margin-top: 0.4rem;
}

.meter-key {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem;
  font-size: 0.74rem; color: var(--ink-soft); margin-top: 0.5rem;
}
.meter-key span { display: inline-flex; align-items: center; gap: 0.4rem; }
.meter-key i {
  width: 0.6rem; height: 0.6rem; border-radius: 2px; flex-shrink: 0;
}
.key--exposure { background: var(--warn); }
.key--exposure-over { background: var(--stop); }
.key--margin { background: var(--accent); }

/* --------------------------------------------------------------- messages */

.msg {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 0.85rem 1rem; border-radius: var(--radius);
  font-size: 0.88rem; line-height: 1.5; margin-bottom: 0.6rem;
  border: 1px solid;
}
.msg-icon { flex-shrink: 0; font-weight: 700; font-size: 0.9rem; line-height: 1.55; }
.msg--blocking { background: var(--stop-wash); border-color: var(--stop-rule); color: var(--stop); }
.msg--serious  { background: var(--warn-wash); border-color: var(--warn-rule); color: var(--warn); }
.msg--info     { background: var(--paper-sunk); border-color: var(--rule); color: var(--ink-soft); }
.msg strong { font-weight: 700; }

/* --------------------------------------------------------------- tables */

.table-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); }

table { width: 100%; border-collapse: collapse; font-size: 0.86rem; min-width: 34rem; }
caption {
  text-align: left; font-size: 0.8rem; color: var(--ink-faint);
  padding: 0.9rem 1rem; border-bottom: 1px solid var(--rule);
}
th, td { padding: 0.6rem 1rem; text-align: left; border-bottom: 1px solid var(--rule); }
th {
  font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700; white-space: nowrap;
}
td.num, th.num { text-align: right; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--paper-sunk); }
.row-flag { color: var(--warn); font-weight: 600; }


/* --------------------------------------------------------------- performance */

/* Collapsible detail inside a panel, e.g. the per-cycle breakdown. */
.disclosure {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper-raised); overflow: hidden;
}
.disclosure > summary {
  padding: 0.7rem 1rem; cursor: pointer; font-size: 0.85rem; font-weight: 600;
  color: var(--ink-soft); list-style: none; display: flex; align-items: center; gap: 0.5rem;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before {
  content: "\25B8"; color: var(--accent); font-size: 0.75rem;
  transition: transform 0.15s ease; display: inline-block;
}
.disclosure[open] > summary::before { transform: rotate(90deg); }
.disclosure > summary:hover { color: var(--accent); }

/* Raised when at least one market cycle breached the reader's risk buffer — the
   detail is collapsed by default, so the summary has to say it is worth opening. */
.disclosure--flagged { border-color: var(--warn-rule); background: var(--warn-wash); }
.disclosure--flagged > summary { color: var(--warn); }
.disclosure--flagged > summary::before { color: var(--warn); }
.disclosure--flagged > summary:hover { color: var(--warn); }
.disclosure .table-scroll { border: 0; border-top: 1px solid var(--rule); border-radius: 0; }

.cobs-warning {
  background: var(--warn-wash); border: 1px solid var(--warn-rule);
  border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1.5rem;
  font-size: 0.86rem; color: var(--warn); line-height: 1.55;
}
.cobs-warning strong { display: block; margin-bottom: 0.3rem; font-size: 0.9rem; }

/* The pair's eyebrow is the prominent "simulated" label required alongside
   simulated past performance, now that the amber block has moved inside the
   cells. It must not be softened to plain grey. */
#out-hero .eyebrow { color: var(--warn); font-size: 0.78rem; letter-spacing: 0.15em; }

/* Segmented control for the measurement basis. */
.segmented {
  display: inline-flex; margin-bottom: 1.25rem;
  border: 1px solid var(--rule-strong); border-radius: var(--radius); overflow: hidden;
}
.segmented button {
  font: inherit; font-size: 0.82rem; font-weight: 600;
  padding: 0.42rem 0.95rem; border: 0; cursor: pointer;
  background: var(--paper); color: var(--ink-soft);
}
.segmented button + button { border-left: 1px solid var(--rule-strong); }
.segmented button:hover:not(.is-on):not(:disabled) { color: var(--accent); }
.segmented button.is-on { background: var(--accent); color: var(--on-accent); }
.segmented button:disabled { opacity: 0.45; cursor: not-allowed; }

/* A note spanning both cells of the pair, inside its frame. */
.pair > .pair-full {
  grid-column: 1 / -1;
  font-size: 0.8rem; line-height: 1.55; color: var(--ink-soft);
}
.pair > .pair-full strong { color: var(--ink); }
.pair > .pair-full p { margin: 0 0 0.6rem; }
.pair > .pair-full p:last-child { margin-bottom: 0; }

/* A full-width cell carrying a figure block rather than prose. Resets the note-sized
   type the prose cells use, and keeps its headline below the two at the top. */
/* NOTE: no font-size override on .stat-value here. The risk figure is deliberately
   the same size as the return figures above it — profit and risk are reported as
   equals, and shrinking this one makes risk read as a subordinate detail. */
.pair > .pair-block { font-size: 1rem; color: var(--ink); }
.pair > .pair-block .stat-label { margin-bottom: 0.25rem; }

/* The position summary: one flowing line above the figures it qualifies. */
.pair > .pair-summary {
  font-size: 0.82rem; color: var(--ink-faint); line-height: 1.7;
}
.pair > .pair-summary strong { color: var(--ink); font-weight: 600; }

/* The headline pair. Deliberately the most emphatic frame on the page — a thicker,
   darker border than any other panel, so the two figures read as the summary. */
.pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: var(--rule-strong);
  border: 2px solid var(--ink-soft);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 1.25rem;
  box-shadow: var(--shadow);
}
@media (max-width: 40rem) { .pair { grid-template-columns: 1fr; } }
.pair > div { background: var(--paper-raised); padding: 1.2rem; }
/* Both figures in the pair share a size. Never let one dominate the other. */
.pair .stat-value { font-size: 2.2rem; line-height: 1.1; }
/* Long-form note inside a pair cell, e.g. what the drawdown figure does and
   does not mean. Sits under the stat-note, separated by a rule. */
.stat-aside {
  margin-top: 0.9rem; padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8rem; line-height: 1.55; color: var(--ink-soft);
}
.stat-aside strong { color: var(--ink); display: block; margin-bottom: 0.2rem; }

/* Do NOT add `align-self: start` here. Grid items default to `stretch`, which fills
   the row height while content still flows from the top — so the two figures stay
   aligned either way. Shrink-wrapping the cells leaves the shorter one short of the
   row height and exposes the grid's own background as a bar under it. */
.pair > div { padding: 1.3rem; }

.footnote {
  font-size: 0.8rem; color: var(--ink-faint); line-height: 1.55;
  padding-top: 1rem; border-top: 1px solid var(--rule); margin-top: 1.25rem;
}
.footnote p { margin-bottom: 0.6rem; }

.hidden { display: none !important; }

/* --------------------------------------------------------------- prose blocks */

.prose h3 { margin-top: 2rem; }
.prose h3:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul { padding-left: 1.1rem; }
.prose li { margin-bottom: 0.5rem; }
.prose strong { color: var(--ink); }

/* --------------------------------------------------------------- footer */

footer {
  border-top: 1px solid var(--rule);
  background: var(--paper-sunk);
  padding-block: 3rem 4rem;
  font-size: 0.85rem; color: var(--ink-faint);
}
footer h4 { color: var(--ink); margin-bottom: 0.6rem; }
footer p { margin-bottom: 0.9rem; }
footer .legal { max-width: 60rem; }
footer .legal p { line-height: 1.6; }