/* ============================================================================
   sales-methodology-simulator.css  ·  Sales Methodology Simulator landing
   (slug: sales-methodology-simulator)

   Register: BRAND / "The Instrument Plate". Sand paper, Geist, Geist Mono
   telemetry on hairlines, one live blue accent. The whole tool lives on one
   page as six screens; only one is on at a time.

   Colour doctrine carried over from the article system:
     blue  (--accent)     = the live state and THE answer. Covered evidence,
                            selected options, progress, the qualified score.
     wine  (--accent-alt) = the stretch that cannot be certified. Uncovered
                            variables, capping factors, missing evidence.
   Wine is never a fill and never a category chip.

   The embedded Zoho form is NATIVE (not an iframe). Zoho's own form.css is
   deliberately NOT loaded: it is a global reset that would flatten the page.
   Every .zf-* rule below is redefined on Sention tokens.

   Scoped to .sms-page. Loaded after base.css + sention.css.
   ========================================================================== */

/* ---- WordPress chrome fix (harmless in preview) --------------------------- */
.site-header { background-color: transparent !important; }
.site-header--scrolled { background-color: color-mix(in srgb, var(--bg-base) 82%, transparent) !important; }
@media (max-width: 899px) {
  .site-header--scrolled { background-color: var(--bg-base) !important; }
}
.site-footer { background-color: var(--bg-base) !important; }

/* ----------------------------------------------------------------------------
   PAGE SHELL + SCREENS
   -------------------------------------------------------------------------- */
.sms-page {
  background: var(--bg-base);
  color: var(--text-primary);
  overflow-x: clip;
}
/* author display rules outrank the UA rule for [hidden]; this puts it back,
   otherwise .sms-resume (display:flex) shows even while hidden */
.sms-page [hidden] { display: none !important; }
.sms-page .sms-screen { display: none; }
.sms-page .sms-screen.is-on { display: block; animation: sms-in 0.45s var(--ease-out) both; }
@keyframes sms-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.sms-page .sms-wrap {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
/* the working screens read like a document, not a dashboard */
.sms-page .sms-col { max-width: 46rem; }
.sms-page h1, .sms-page h2, .sms-page h3 { color: var(--ink); }
.sms-page p { margin: 0 0 1rem; }
.sms-page p:last-child { margin-bottom: 0; }
.sms-page strong { font-weight: 500; color: var(--ink); }

/* section-index spine: a plate on a rig */
.sms-page .sms-sec-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 clamp(1.4rem, 1rem + 1.4vw, 2.1rem);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
}
.sms-page .sms-sec-head__ix { color: var(--accent-alt); font-variant-numeric: tabular-nums; }
.sms-page .sms-sec-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.sms-page .sms-kicker {
  margin: 0 0 clamp(1rem, 0.8rem + 0.6vw, 1.5rem);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.sms-page .sms-kicker b { color: var(--accent); font-weight: 500; }

/* ----------------------------------------------------------------------------
   INTRO  ·  the landing. Asymmetric hero, one blue phrase, telemetry readout.
   -------------------------------------------------------------------------- */
.sms-page .sms-hero {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  padding-block: clamp(7.5rem, 5rem + 7vw, 8.5rem) clamp(3rem, 2rem + 4vw, 5rem);
}
/* the telemetry aligns to the lead, not to the bottom of the column: bottom
   alignment left a void under the CTA that read as a mistake, not as air */
@media (min-width: 900px) {
  .sms-page .sms-hero { grid-template-columns: minmax(0, 1fr) 15rem; align-items: start; }
  .sms-page .sms-hero .sms-tele { margin-top: clamp(9rem, 4rem + 9vw, 13rem); }
}
.sms-page .sms-title {
  margin: 0 0 clamp(1.2rem, 1rem + 1vw, 1.8rem);
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  max-width: 20ch;
}
.sms-page .sms-title__b { display: block; }
.sms-page .sms-title__cmd { color: var(--accent); }
.sms-page .sms-lead {
  margin: 0 0 1.2rem;
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.sms-page .sms-hero p:not(.sms-lead):not(.sms-kicker) { max-width: 54ch; line-height: var(--lh-body); }

/* telemetry: tabular value over a faint mono key */
.sms-page .sms-tele { margin: 0; border-top: 1px solid var(--line); }
.sms-page .sms-tele { border-bottom: 1px solid var(--line); }
.sms-page .sms-tele__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
}
.sms-page .sms-tele dt {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.sms-page .sms-tele dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.sms-page .sms-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.2rem;
  margin-top: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
}
.sms-page .sms-note {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 40ch;
}
/* ----------------------------------------------------------------------------
   CTA CONTROL SYSTEM
   Verbatim adoption of the shipped system in Assets/css/solutions.css (the one
   the five solution pages already run): a hairline-bracketed control at REST
   with no painted slab, the blue fill EARNED on engage, wiping in from the
   arrow edge; the corner ticks invert and survive on the fill; the arrow
   tracks. Blue because blue is the cryptex unlock light.

   Copied rather than imported: solutions.css carries unscoped .sol-* rules
   that would leak onto this page. If that file's control family changes, this
   block has to follow it.
   -------------------------------------------------------------------------- */
.sms-page .btn--control {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 0.75rem;
  min-height: 48px; padding: 1rem 1.35rem;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 0;
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  --fill: var(--accent); --tick: var(--ink);
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.sms-page .btn--control::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fill);
  transform: scaleX(0); transform-origin: right center;
  transition: transform var(--dur-base) var(--ease-out);
}
.sms-page .control__label { position: relative; z-index: 1; line-height: 1.1; transition: color var(--dur-base) var(--ease-out); }
.sms-page .btn--control .arrow { position: relative; z-index: 1; color: var(--accent); transition: transform var(--dur-fast) var(--ease-out), color var(--dur-base) var(--ease-out); }
.sms-page .control__tick { position: absolute; width: 7px; height: 7px; pointer-events: none; z-index: 2; transition: border-color var(--dur-base) var(--ease-out); }
.sms-page .control__tick--tl { top: -1px; left: -1px; border-top: 1px solid var(--tick); border-left: 1px solid var(--tick); }
.sms-page .control__tick--br { bottom: -1px; right: -1px; border-bottom: 1px solid var(--tick); border-right: 1px solid var(--tick); }
.sms-page .btn--control:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sms-page .btn--control:focus:not(:focus-visible) { outline: none; }

/* engage: fill wipes in, label, ticks and arrow invert to paper */
.sms-page .btn--control:hover,
.sms-page .btn--control:focus-visible { color: var(--text-inverse); border-color: var(--accent); }
.sms-page .btn--control:hover::after,
.sms-page .btn--control:focus-visible::after { transform: scaleX(1); }
.sms-page .btn--control:hover .control__label,
.sms-page .btn--control:focus-visible .control__label { color: var(--text-inverse); }
.sms-page .btn--control:hover .control__tick,
.sms-page .btn--control:focus-visible .control__tick { border-color: var(--text-inverse); }
.sms-page .btn--control:hover .arrow,
.sms-page .btn--control:focus-visible .arrow { color: var(--text-inverse); }

/* this page's controls point forward, so the arrow tracks on X, not Y */
.sms-page .sms-cta:hover .arrow,
.sms-page .sms-cta:focus-visible .arrow { transform: translateX(4px); }
.sms-page .sms-cta:active { transform: translateY(1px); }
.sms-page .sms-cta:active::after { background: var(--accent-ink); }

/* the quiet floor of the family: a bare mono type link. Its bareness is what
   makes the controls read as armed. A hairline draws in under the label. */
.sms-page .sms-quiet {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0; background: none; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.sms-page .sms-quiet::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.sms-page .sms-quiet:hover,
.sms-page .sms-quiet:focus-visible { color: var(--accent); outline: none; }
.sms-page .sms-quiet:hover::after,
.sms-page .sms-quiet:focus-visible::after { transform: scaleX(1); }

.sms-page .sms-bench {
  position: relative;
  margin-top: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  padding-left: 1.9rem;
  max-width: 54ch;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-muted);
}
.sms-page .sms-bench::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.85rem;
  height: 1px;
  background: var(--line-strong);
}

.sms-page .sms-sec { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }

/* the three methodologies: a hairline ledger, no cards */
.sms-page .sms-ledger { border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.sms-page .sms-ledger__row {
  display: grid;
  gap: 0.4rem 2rem;
  padding: clamp(1.1rem, 0.9rem + 1vw, 1.6rem) 0;
}
@media (min-width: 760px) {
  .sms-page .sms-ledger__row { grid-template-columns: 12rem minmax(0, 1fr); align-items: baseline; }
}
.sms-page .sms-ledger__name {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.sms-page .sms-ledger__body { margin: 0; max-width: 58ch; line-height: var(--lh-body); }
.sms-page .sms-ledger__body b { font-weight: 500; color: var(--ink); }

/* how it works: numeral-anchored steps */
.sms-page .sms-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-bottom: 1px solid var(--line-strong); }
.sms-page .sms-step {
  display: grid;
  gap: 0.3rem 1.6rem;
  padding: clamp(1.1rem, 0.9rem + 1vw, 1.6rem) 0;
}
@media (min-width: 760px) { .sms-page .sms-step { grid-template-columns: 4rem minmax(0, 1fr); } }
.sms-page .sms-step:first-child { border-top: 1px solid var(--line-strong); }
.sms-page .sms-step__n {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent-alt);
}
.sms-page .sms-step h3 { margin: 0 0 0.35rem; font-size: var(--fs-h3); font-weight: 500; letter-spacing: var(--tracking-heading); }
.sms-page .sms-step p { max-width: 58ch; line-height: var(--lh-body); }

/* what comes back: spec-sheet rows */
.sms-page .sms-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.sms-page .sms-list { border-bottom: 1px solid var(--line-strong); }
.sms-page .sms-list li {
  display: grid;
  gap: 0.4rem 1.6rem;
  padding: 0.75rem 0;
  line-height: var(--lh-body);
}
@media (min-width: 620px) { .sms-page .sms-list li { grid-template-columns: 4rem minmax(0, 1fr); } }
.sms-page .sms-list__ix {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.sms-page .sms-list li b { font-weight: 500; color: var(--ink); }

/* ---- partner tool: a pointer at the end, sized so it never competes ------- */
.sms-page .sms-partner { margin-top: clamp(3rem, 2.4rem + 3vw, 5rem); }
.sms-page .sms-partner__grid {
  display: grid;
  gap: clamp(1.2rem, 1rem + 1.4vw, 2rem);
  align-items: start;
}
@media (min-width: 760px) {
  .sms-page .sms-partner__grid { grid-template-columns: 15rem minmax(0, 1fr); }
}
.sms-page .sms-partner__media {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  /* the screenshot arrives in another brand's teal: hold it back so the page
     keeps its own temperature, and let it come up only on hover */
  filter: saturate(0.55);
  opacity: 0.88;
  transition: filter var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.sms-page .sms-partner__media:hover { filter: none; opacity: 1; }
.sms-page .sms-partner__media img { display: block; width: 100%; height: auto; }
.sms-page .sms-partner__body h2 {
  margin: 0 0 0.6rem;
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: var(--tracking-heading);
}
.sms-page .sms-partner__body p {
  max-width: 58ch;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.sms-page .sms-partner__offer { color: var(--text-primary); }
.sms-page .sms-partner__offer b { font-weight: 500; color: var(--ink); }
.sms-page .sms-partner__body [data-pending] {
  color: var(--accent-alt);
  border-bottom: 1px dashed color-mix(in oklab, var(--accent-alt) 45%, transparent);
}
.sms-page .sms-partner .sms-quiet { margin-top: 0.4rem; }

/* the quiet link carries an arrow too */
.sms-page .sms-quiet .arrow { transition: transform var(--dur-fast) var(--ease-out); }
.sms-page .sms-quiet:hover .arrow,
.sms-page .sms-quiet:focus-visible .arrow { transform: translateX(4px); }


/* ============================================================================
   THE REPORT  ·  analysis screen
   One sequential blue ramp carries every magnitude: more evidence, more ink.
   Validated for colour-vision separation (worst adjacent pair dE 15.3 normal,
   15.4 deutan) before use. The palest step sits under 3:1 against the sand, so
   every figure ships a legend and the ledger below is its table view.
   Wine is NOT a step in this ramp. It is the reserved status colour.
   ========================================================================== */
.sms-page {
  --ev-0: transparent;
  --ev-1: #9fb0d6;
  --ev-2: #5470b0;
  --ev-3: #26418f;
}

/* ---- the masthead: a readout, not a row of metric tiles ------------------- */
.sms-page .sms-mast {
  margin: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem) 0 clamp(2rem, 1.6rem + 2vw, 3rem);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.sms-page .sms-mast__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.42rem 0;
}
.sms-page .sms-mast dt {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.sms-page .sms-mast dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ---- figures --------------------------------------------------------------- */
.sms-page .sms-fig { margin: 0 0 clamp(2.4rem, 2rem + 2vw, 3.6rem); }
.sms-page .sms-fig__cap {
  display: flex;
  gap: 0.9rem;
  margin: 0 0 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sms-page .sms-fig__ix { color: var(--accent-alt); font-variant-numeric: tabular-nums; }
.sms-page .sms-fig__note {
  margin: 0.9rem 0 0;
  max-width: 62ch;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-muted);
}

/* ---- Fig. 01 · coverage matrix -------------------------------------------- */
.sms-page .sms-cov { border-top: 1px solid var(--line); }
.sms-page .sms-cov__row {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) 2.6rem;
  align-items: center;
  gap: 0.9rem;
  padding: 0.3rem 0;
}
.sms-page .sms-cov__name {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 2px of surface between cells: the gap separates them, never a stroke */
.sms-page .sms-cov__cells { display: flex; gap: 2px; }
.sms-page .sms-cell {
  flex: 1 1 0;
  height: 22px;
  min-width: 10px;
  border-radius: 1px;
  background: var(--ev-3);
}
.sms-page .sms-cell--0 { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.sms-page .sms-cell--1 { background: var(--ev-1); }
.sms-page .sms-cell--2 { background: var(--ev-2); }
.sms-page .sms-cell--3 { background: var(--ev-3); }
.sms-page .sms-cov__n {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--text-muted);
}
/* the legend is not optional: the palest step is under 3:1 on this surface */
.sms-page .sms-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sms-page .sms-key__item { display: inline-flex; align-items: center; gap: 0.5rem; }
.sms-page .sms-key .sms-cell { flex: 0 0 auto; width: 16px; height: 11px; }

/* ---- Fig. 01 · the meter ---------------------------------------------------
   A thin track, not a 30px slab: a saturated fill that size reads as a block,
   and the band tints underneath it were a second mark competing for the same
   pixels. Boundaries are hairline ticks drawn over the fill.
   -------------------------------------------------------------------------- */
.sms-page .sms-meter { position: relative; padding-top: 1.5rem; }
.sms-page .sms-meter__labels { position: relative; height: 1rem; }
.sms-page .sms-meter__blabel {
  position: absolute;
  bottom: 0;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.sms-page .sms-meter__blabel.is-on { color: var(--ink); }
.sms-page .sms-meter__track {
  position: relative;
  height: 12px;
  background: color-mix(in oklab, var(--ink) 6%, transparent);
  border-radius: 2px;
  overflow: hidden;
}
.sms-page .sms-meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--ev-3);
  border-radius: 0 4px 4px 0;
}
.sms-page .sms-meter__tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--bg-base);
}
.sms-page .sms-meter__val {
  position: absolute;
  top: 1.5rem;
  transform: translate(-50%, -1.35rem);
  padding: 0 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--bg-base);
}
.sms-page .sms-meter__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}

/* ---- the swatch that carries identity so the text does not ---------------- */
.sms-page .sms-swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 0.5rem;
  border-radius: 1px;
  vertical-align: baseline;
  background: var(--ev-3);
}
.sms-page .sms-swatch--partial { background: var(--ev-2); }
.sms-page .sms-swatch--weak { background: var(--ev-1); }
.sms-page .sms-swatch--blank { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }

@media (max-width: 620px) {
  .sms-page .sms-cov__row { grid-template-columns: 7rem minmax(0, 1fr) 2.4rem; gap: 0.6rem; }
  .sms-page .sms-cov__name { font-size: 0.62rem; }
}

/* resume banner when a session survives a reload */
.sms-page .sms-resume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
  margin-top: 2rem;
  padding: 1rem 1.2rem;
  background: var(--bg-raised);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
}
.sms-page .sms-resume p { margin: 0; font-size: var(--fs-small); color: var(--text-primary); }
.sms-page .sms-resume button {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.sms-page .sms-resume button:hover { color: var(--accent-ink); }
.sms-page .sms-resume button[data-resume-clear] { color: var(--text-faint); }
.sms-page .sms-resume button[data-resume-clear]:hover { color: var(--accent-alt); }

/* ----------------------------------------------------------------------------
   THE PLATE  ·  shared instrument frame (white panel, hairline, corner ticks).
   Used by the question card, the verdict and the gate.
   -------------------------------------------------------------------------- */
.sms-page .sms-plate {
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.sms-page .sms-plate::before,
.sms-page .sms-plate::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: var(--accent);
  border-style: solid;
  pointer-events: none;
}
.sms-page .sms-plate::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.sms-page .sms-plate::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

/* ----------------------------------------------------------------------------
   PROFILE  ·  eleven fields, hairline separated, no boxes around the group
   -------------------------------------------------------------------------- */
/* top padding clears the fixed site header, which is transparent at scroll 0 */
.sms-page .sms-work { padding-block: clamp(7rem, 5rem + 6vw, 10rem) clamp(4rem, 3rem + 5vw, 7rem); }

/* screen changes move focus to the new heading so screen readers follow along.
   Those headings are never keyboard-reachable, so the ring is pure noise. */
.sms-page [tabindex="-1"]:focus { outline: none; }

/* ----------------------------------------------------------------------------
   THE STEP RAIL  ·  fills the right column on the working screens and keeps
   the reader oriented through a six-minute flow. Pure telemetry, no chrome.
   -------------------------------------------------------------------------- */
/* one measure for the work column, the rail pushed to the far right. Every
   block on a working screen therefore shares a single right edge. */
@media (min-width: 1100px) {
  .sms-page .sms-work--rail {
    display: grid;
    grid-template-columns: minmax(0, 46rem) 13rem;
    justify-content: space-between;
    gap: clamp(2.5rem, 1rem + 5vw, 5rem);
    align-items: start;
  }
  .sms-page .sms-work--rail .sms-col { max-width: none; }
}
.sms-page .sms-work__main { min-width: 0; }
.sms-page .sms-rail { display: none; }
@media (min-width: 1100px) {
  .sms-page .sms-rail { display: block; position: sticky; top: 7.5rem; }
}
.sms-page .sms-rail__steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sms-page .sms-rail__steps li {
  display: flex;
  gap: 0.7rem;
  padding: 0.5rem 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.sms-page .sms-rail__n { font-variant-numeric: tabular-nums; }
.sms-page .sms-rail__steps li.is-done { color: var(--text-muted); }
.sms-page .sms-rail__steps li.is-done .sms-rail__n { color: var(--text-muted); }
.sms-page .sms-rail__steps li.is-now { color: var(--ink); }
.sms-page .sms-rail__steps li.is-now .sms-rail__n { color: var(--accent); }
.sms-page .sms-rail__tele { margin: 1.1rem 0 0; }
#scr-verdict .sms-rail__tele { display: none; }
.sms-page .sms-rail__tele:empty { display: none; }
.sms-page .sms-rail__tele { border-bottom: 1px solid var(--line); }
.sms-page .sms-rail__tele .sms-tele__row { padding: 0.5rem 0; }
.sms-page .sms-rail__tele dt {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.sms-page .sms-rail__tele dd {
  margin: 0.25rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.sms-page .sms-work__head { margin-bottom: clamp(2rem, 1.4rem + 2vw, 3rem); }
.sms-page .sms-work__head p { max-width: 54ch; line-height: var(--lh-body); }

/* ---- type roles -----------------------------------------------------------
   Four steps, each at least 1.3x from the next: display (intro) / screen title
   / section title / body, with the mono label system running underneath. The
   interactive prompt sits between section title and body because it is neither.
   -------------------------------------------------------------------------- */
.sms-page .sms-work__head h2,
.sms-page .sms-screen-title,
.sms-page .sms-gate__head h2,
.sms-page #sms-q-brief h2 {
  margin: 0 0 0.7rem;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.sms-page .sms-lead,
.sms-page .sms-title,
.sms-page .sms-verdict__name,
.sms-page .sms-card__q,
.sms-page .sms-group__t { text-wrap: balance; }
.sms-page p,
.sms-page .sms-ledger__body,
.sms-page .sms-diag__b p,
.sms-page .sms-move__b p { text-wrap: pretty; }

/* ---- group headers: three named clusters instead of one wall of eleven ---- */
.sms-page .sms-group {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: clamp(3.4rem, 2.4rem + 3vw, 5.5rem) 0 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line-strong);
}
.sms-page .sms-group:first-child { margin-top: 0; }
.sms-page .sms-group__ix {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  color: var(--accent-alt);
}
.sms-page .sms-group__t {
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  font-weight: 500;
  letter-spacing: var(--tracking-heading);
  color: var(--ink);
}

/* rhythm: fields inside a group sit close, groups are pushed far apart */
.sms-page .sms-field { padding-block: clamp(1.5rem, 1.2rem + 1.3vw, 2.2rem); }
.sms-page .sms-group + .sms-field { padding-top: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }

/* the index hangs in the gutter on wide screens so the question owns the line */
.sms-page .sms-field__ix {
  margin: 0 0 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 700px) {
  .sms-page .sms-field { position: relative; padding-left: 3.2rem; }
  .sms-page .sms-field__ix { position: absolute; left: 0; top: clamp(1.45rem, 1.2rem + 1.1vw, 2rem); margin: 0; }
}
.sms-page .sms-field__q {
  display: block;
  margin: 0 0 0.75rem;
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 40ch;
  text-wrap: balance;
}
.sms-page .sms-field__hint {
  margin: -0.35rem 0 0.85rem;
  max-width: 52ch;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-muted);
}

/* ---- the ordinal scale ----------------------------------------------------
   Four of the eleven fields are ranges, not sets. Rendering them as detached
   boxes threw away that information; connected segments on a shared baseline
   with a named axis put it back. */
.sms-page .sms-scale__strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-raised);
}
.sms-page .sms-scale__strip .sms-opt {
  border-left: 1px solid var(--line);
  border-radius: 0;
  justify-content: center;
  text-align: center;
  padding: 0.85rem 0.5rem;
  font-size: 0.9rem;
}
.sms-page .sms-scale__strip .sms-opt:first-child { border-left: 0; }
.sms-page .sms-scale__strip .sms-opt.is-sel {
  border-color: var(--line);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.sms-page .sms-scale__axis {
  display: flex;
  justify-content: space-between;
  margin: 0.5rem 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.sms-page .sms-scale__off { margin-top: 0.65rem; }
.sms-page .sms-scale__off .sms-opt { font-size: 0.9rem; padding: 0.6rem 0.9rem; }
@media (max-width: 559px) {
  .sms-page .sms-scale__strip { grid-auto-flow: row; grid-auto-columns: auto; }
  .sms-page .sms-scale__strip .sms-opt { border-left: 0; border-top: 1px solid var(--line); justify-content: flex-start; text-align: left; }
  .sms-page .sms-scale__strip .sms-opt:first-child { border-top: 0; }
}

/* ---- option buttons ----------------------------------------------------- */
.sms-page .sms-opts { display: grid; gap: 0.4rem; }
.sms-page .sms-opts--grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.sms-page .sms-opts--ranked { gap: 0.45rem; }

/* ---- options are not boxes ------------------------------------------------
   Sixty bordered rows meant two parallel hairlines inside every 7px gap, which
   is the printing error the rules budget exists to prevent. The state lives in
   a mark and a surface tint instead, so a whole field costs zero rules.
   -------------------------------------------------------------------------- */
.sms-page .sms-opt {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.45;
  text-align: left;
  color: var(--text-primary);
  background: var(--bg-raised);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
/* the mark: a hairline ring that fills with the accent when the answer lands */
.sms-page .sms-opts .sms-opt::before {
  content: "";
  flex: 0 0 auto;
  width: 0.62rem;
  height: 0.62rem;
  margin-top: 0.42rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.sms-page .sms-opt:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sms-page .sms-opt:hover::before { border-color: var(--text-muted); }
.sms-page .sms-opt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.sms-page .sms-opt.is-sel {
  background: color-mix(in oklab, var(--accent) 7%, var(--bg-raised));
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.sms-page .sms-opts .sms-opt.is-sel::before {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--bg-raised);
}
/* the strip and the ranked list carry their own marks: no ring on those */
.sms-page .sms-scale__strip .sms-opt::before,
.sms-page .sms-opt--ev::before { display: none; }

/* ranked evidence options carry their index: 1 to 4, weakest to strongest */
.sms-page .sms-opt__k {
  flex: 0 0 auto;
  min-width: 1.3rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-fast) var(--ease-out);
}
.sms-page .sms-opt.is-sel .sms-opt__k { color: var(--accent); }

/* ---- evidence colour ------------------------------------------------------
   A picked answer takes the colour of what it means, using the same three
   steps as the score bars: wine for evidence that cannot be certified, ink
   for the buyer's word, blue for something on the record.
   -------------------------------------------------------------------------- */
.sms-page .sms-opt--ev.is-sel[data-ev="0"],
.sms-page .sms-opt--ev.is-sel[data-ev="1"] { background: color-mix(in oklab, var(--accent-alt) 7%, var(--bg-raised)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent-alt) 60%, transparent); }
.sms-page .sms-opt--ev.is-sel[data-ev="0"] .sms-opt__k,
.sms-page .sms-opt--ev.is-sel[data-ev="1"] .sms-opt__k { color: var(--accent-alt); }
.sms-page .sms-opt--ev.is-sel[data-ev="2"] { background: color-mix(in oklab, var(--ink) 6%, var(--bg-raised)); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sms-page .sms-opt--ev.is-sel[data-ev="2"] .sms-opt__k { color: var(--ink); }

/* options arrive in reading order, 30ms apart */
.sms-page .sms-opts--ranked .sms-opt {
  animation: sms-opt-in 0.38s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 30ms + 40ms);
}
@keyframes sms-opt-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* multi-select industries: a real checkbox mark */
.sms-page .sms-opts .sms-opt--check::before {
  content: "";
  flex: 0 0 auto;
  width: 0.8rem;
  height: 0.8rem;
  margin-top: 0.33rem;
  border-radius: 1px;
  border: 1px solid var(--line-strong);
  border-radius: 1px;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.sms-page .sms-opts .sms-opt--check.is-sel::before {
  box-shadow: none;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l2.6 2.6L9 1.2' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E") center / 0.6rem no-repeat;
  border-color: var(--accent);
}

.sms-page .sms-err {
  display: none;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--accent-alt);
}
.sms-page .sms-err.is-on { display: block; }

/* ----------------------------------------------------------------------------
   VERDICT  ·  the answer. Blue, because this is what the reader came for.
   -------------------------------------------------------------------------- */
.sms-page .sms-verdict { padding: clamp(1.8rem, 1.4rem + 2vw, 3rem); }
.sms-page .sms-verdict__name {
  margin: 0 0 0.5rem;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  color: var(--accent);
}
.sms-page .sms-verdict__sub {
  margin: 0 0 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sms-page .sms-verdict__desc { max-width: 58ch; line-height: var(--lh-body); }

.sms-page .sms-why { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.sms-page .sms-why li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.4rem;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--text-primary);
}
.sms-page .sms-why li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35em;
  width: 0.5rem;
  height: 1px;
  background: var(--accent);
}

/* ----------------------------------------------------------------------------
   QUALIFICATION  ·  progress rail + one question per plate
   -------------------------------------------------------------------------- */
/* clears the fixed site header, which is ~5rem tall once scrolled */
.sms-page .sms-prog {
  position: sticky;
  top: 4.6rem;
  z-index: 5;
  padding: 0.9rem 0 1rem;
  background: linear-gradient(var(--bg-base) 76%, transparent);
}
@media (min-width: 900px) { .sms-page .sms-prog { top: 5.4rem; } }
.sms-page .sms-prog__track { height: 2px; background: var(--line); }
.sms-page .sms-prog__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width var(--dur-base) var(--ease-out);
}
.sms-page .sms-prog__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.sms-page .sms-prog__meta b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }

/* the question is not a card: it is type on the same left edge as the rail
   above it. Vertical air only, so nothing indents out of alignment. */
.sms-page .sms-card { padding: clamp(1.6rem, 1.3rem + 1.6vw, 2.6rem) 0 0; }
.sms-page .sms-card__var {
  margin: 0 0 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}
.sms-page .sms-card__q {
  margin: 0 0 1.5rem;
  max-width: 34ch;
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.9rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.024em;
}
/* the questionnaire holds one stable shape for all 28 questions: without a
   floor the card jumps and the footer rides up under short questions */
.sms-page #scr-qualify .sms-work__main { min-height: 30rem; }

/* ----------------------------------------------------------------------------
   SCORE
   -------------------------------------------------------------------------- */
.sms-page .sms-score-hero {
  display: grid;
  gap: 0.6rem 2.5rem;
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.2rem) clamp(2rem, 1.5rem + 2vw, 3rem);
  border-bottom: 1px solid var(--line-strong);
}
@media (min-width: 700px) {
  .sms-page .sms-score-hero { grid-template-columns: auto minmax(0, 1fr); align-items: end; }
}
.sms-page .sms-score-num {
  margin: 0;
  font-size: clamp(4.2rem, 2rem + 10vw, 9rem);
  font-weight: 600;
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: var(--ink);
}
.sms-page .sms-score-meta { padding-bottom: 0.55rem; }
/* the reveal: the number counts itself out in JS, the verdict lands after it */
.sms-page .sms-score-hero.is-revealed .sms-score-num { animation: sms-num-in 0.55s var(--ease-out) both; }
.sms-page .sms-score-hero.is-revealed .sms-score-meta { animation: sms-meta-in 0.5s var(--ease-out) 0.62s both; }
@keyframes sms-num-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sms-meta-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}
.sms-page .sms-score-band {
  margin: 0 0 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.sms-page .sms-score-method {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* the band colours the number and its label, nothing else */
.sms-page .sms-score-hero.is-solid .sms-score-num,
.sms-page .sms-score-hero.is-solid .sms-score-band { color: var(--accent); }
.sms-page .sms-score-hero.is-partial .sms-score-num,
.sms-page .sms-score-hero.is-partial .sms-score-band { color: var(--ink); }
.sms-page .sms-score-hero.is-weak .sms-score-num,
.sms-page .sms-score-hero.is-weak .sms-score-band,
.sms-page .sms-score-hero.is-blank .sms-score-num,
.sms-page .sms-score-hero.is-blank .sms-score-band { color: var(--accent-alt); }

/* the capping factors are an alert: a full hairline perimeter in wine plus a
   whisper of wine in the surface, never a side stripe */
.sms-page .sms-veto {
  margin: clamp(1.8rem, 1.4rem + 1.6vw, 2.8rem) 0;
  border: 1px solid color-mix(in oklab, var(--accent-alt) 34%, transparent);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--accent-alt) 4%, var(--bg-base));
}
.sms-page .sms-veto__head {
  margin: 0;
  padding: 0.75rem clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-alt);
}
.sms-page .sms-veto__body { padding-block: 0.35rem; }
.sms-page .sms-veto__body p {
  margin: 0;
  padding: 0.6rem clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
  font-size: 0.96rem;
  line-height: 1.6;
}

.sms-page .sms-bars { margin: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem) 0; }
/* the rows are always visible: only the fill is animated. An entrance that
   hides ten rows behind a delay means ten rows of nothing if the animation
   never runs, and the drawing fill already carries the "measured" feeling. */
.sms-page .sms-bars { border-bottom: 1px solid var(--line-strong); padding-block: 0 0.4rem; }
.sms-page .sms-bar { padding: 0.62rem 0; }
.sms-page .sms-bar__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.sms-page .sms-bar__name { font-size: 0.96rem; color: var(--ink); }
.sms-page .sms-bar__n {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.sms-page .sms-bar__track { height: 3px; background: var(--line); }
.sms-page .sms-bar__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--text-faint);
  /* each bar draws after its row has arrived, weakest first */
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 40ms + 180ms);
}
.sms-page .sms-bar.is-solid .sms-bar__fill { background: var(--ev-3); }
.sms-page .sms-bar.is-partial .sms-bar__fill { background: var(--ev-2); }
.sms-page .sms-bar.is-weak .sms-bar__fill { background: var(--ev-1); }
.sms-page .sms-bar.is-blank .sms-bar__fill { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.sms-page .sms-bar__fill { border-radius: 0 2px 2px 0; }

.sms-page .sms-gaps { max-width: 54ch; line-height: var(--lh-body); }
.sms-page .sms-gaps h3 {
  margin: 0 0 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ----------------------------------------------------------------------------
   THE GATE  ·  native Zoho form restyled as a Sention instrument.
   Zoho's form.css is NOT loaded; every .zf-* rule is defined here on tokens.
   -------------------------------------------------------------------------- */
.sms-page .sms-gate { margin-top: clamp(3rem, 2rem + 4vw, 5rem); }
.sms-page .sms-gate__head { margin-bottom: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.sms-page .sms-gate__head h2 {
  margin: 0 0 0.7rem;
  max-width: 26ch;
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
}
.sms-page .sms-gate__head p { max-width: 54ch; line-height: var(--lh-body); }

.sms-page .sms-gate__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  padding: 1rem clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem) 0.2rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.sms-page .sms-gate__bar b { font-weight: 500; color: var(--accent); }

.sms-page .sms-gate form,
.sms-page .sms-gate ul,
.sms-page .sms-gate li { margin: 0; padding: 0; list-style: none; }
.sms-page .zf-templateWidth { max-width: none; width: 100%; margin: 0; padding: 0; box-sizing: border-box; }
.sms-page .zf-templateWrapper { background: transparent; box-shadow: none; border-radius: 0; }
.sms-page .zf-backgroundBg { background: transparent; }
.sms-page .zf-tempHeadBdr { display: none; }        /* the page already pitches */
.sms-page .zf-subContWrap { padding: 0; }
.sms-page .zf-clearBoth { clear: both; }

.sms-page .zf-tempFrmWrapper {
  padding: clamp(1.2rem, 1rem + 1vw, 1.7rem) clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem);
  box-sizing: border-box;
}
.sms-page .zf-labelName {
  display: block;
  margin: 0 0 0.7rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sms-page .zf-important { color: var(--accent); font-size: 0.95rem; font-weight: 500; margin-left: 0.15em; }
.sms-page .zf-tempContDiv { margin: 0; padding: 0; }
.sms-page .zf-tempContDiv > span { display: block; }

.sms-page .zf-tempContDiv input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 0.65rem 0.15rem;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.sms-page .zf-tempContDiv input[type="text"]::placeholder { color: var(--text-faint); }
.sms-page .zf-tempContDiv input[type="text"]:hover { border-color: var(--text-muted); }
.sms-page .zf-tempContDiv input[type="text"]:focus {
  outline: none;
  border-bottom-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 4%, transparent);
}
/* Name: First / Last side by side, faint mono sub-labels */
.sms-page .zf-nameWrapper { display: flex; flex-wrap: wrap; gap: 1rem; }
.sms-page .zf-nameWrapper > span { flex: 1 1 12rem; display: block; }
.sms-page .zf-nameWrapper > span input[type="text"] { width: 100%; }
.sms-page .zf-nameWrapper > span label {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.sms-page .zf-instruction {
  margin: 0.55rem 0 0;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-muted);
}
.sms-page .zf-errorMessage {
  margin: 0.5rem 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--accent-alt);
}
/* the consent note Zoho ships as a rich-text block */
.sms-page .zf-note .zf-descFld,
.sms-page .zf-note .zf-descFld * {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-small) !important;
  font-style: normal !important;
  line-height: 1.55;
  color: var(--text-muted) !important;
}
.sms-page .zf-note .zf-descFld a { color: var(--accent) !important; text-decoration: underline; }

.sms-page .zf-fmFooter {
  padding: clamp(1.3rem, 1rem + 1.2vw, 1.9rem) clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem);
  text-align: left;
}
/* colour and hover live in the CTA block above; this is only its typography */
.sms-page .zf-submitColor {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radius);
  padding: 0.95rem 2.1rem;
  cursor: pointer;
}

.sms-page .sms-gate__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* the submit target. Visually hidden rather than display:none, so the POST
   into it is never skipped by a browser that skips non-rendered frames. */
.sms-sink {
  position: absolute;
  width: 0;
  height: 0;
  border: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ----------------------------------------------------------------------------
   ANALYSIS
   -------------------------------------------------------------------------- */
/* no rule between sections: each instrument inside already opens and closes
   with its own, and stacking a third within 50px breaks the rule budget */
.sms-page .sms-a-sec { padding-block: clamp(2.4rem, 1.8rem + 3vw, 4rem); }
.sms-page .sms-a-sec h2 {
  margin: 0 0 0.7rem;
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
}
.sms-page .sms-a-sec > p { max-width: 56ch; line-height: var(--lh-body); }

/* variable by variable: a disclosure row, not a card */
/* the rows separate by air, their marker and a hover surface, exactly like
   the options. The list keeps the two rules an instrument is allowed. */
.sms-page .sms-a-diag { border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); padding-block: 0.3rem; }
.sms-page .sms-diag { border-radius: var(--radius); }
.sms-page .sms-diag__h:hover { background: var(--bg-raised); }
.sms-page .sms-diag__h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.8rem 0.7rem;
  border-radius: var(--radius);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.sms-page .sms-diag__h::-webkit-details-marker { display: none; }
.sms-page .sms-diag__t {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
}
/* the open/close affordance: a mono plus that becomes a minus */
.sms-page .sms-diag__t::before {
  content: "+";
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-faint);
  transition: color var(--dur-fast) var(--ease-out);
}
.sms-page .sms-diag[open] .sms-diag__t::before { content: "\2013"; color: var(--accent); }
.sms-page .sms-diag__h:hover .sms-diag__t::before { color: var(--accent); }
.sms-page .sms-diag__s {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
}

/* prose keeps a reading measure, the panel keeps the column's right edge */
.sms-page .sms-diag__b { padding: 0 0.7rem 1.3rem; }
.sms-page .sms-diag__b > p { max-width: 58ch; line-height: var(--lh-body); }
.sms-page .sms-missing p { line-height: var(--lh-body); max-width: 62ch; }
/* opening a row slides its contents in; the height change stays the browser's */
.sms-page .sms-diag[open] .sms-diag__b { animation: sms-diag-in 0.34s var(--ease-out) both; }
@keyframes sms-diag-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: none; }
}
/* the missing evidence is the answer to the row: a blue surface wash, not a
   stripe. The tint is the accent doing meaning-work, still well under 10%. */
.sms-page .sms-missing {
  margin-top: 1rem;
  padding: 0.85rem clamp(0.9rem, 0.7rem + 0.8vw, 1.2rem);
  background: color-mix(in oklab, var(--accent) 6%, var(--bg-base));
  border-radius: var(--radius);
}
.sms-page .sms-missing__lbl {
  margin: 0 0 0.3rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}
.sms-page .sms-missing p:last-child { color: var(--ink); }

/* next two weeks */
.sms-page .sms-moves { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line-strong); }
.sms-page .sms-move {
  display: grid;
  gap: 0.4rem 1.6rem;
  padding: clamp(1.3rem, 1rem + 1.2vw, 1.9rem) 0;
}
@media (min-width: 700px) { .sms-page .sms-move { grid-template-columns: 4rem minmax(0, 1fr); } }
.sms-page .sms-move:first-child { border-top: 1px solid var(--line-strong); }
.sms-page .sms-move__n {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent-alt);
}
.sms-page .sms-move__b { max-width: 58ch; }
.sms-page .sms-move__b h3 { margin: 0 0 0.4rem; font-size: 1.05rem; font-weight: 500; letter-spacing: -0.01em; }
.sms-page .sms-move__b p { line-height: var(--lh-body); }
/* the words to say out loud. Marked as a quotation the typographic way: an
   oversize hanging blue quote mark and a hanging indent, no stripe. */
.sms-page .sms-move__ask {
  position: relative;
  margin: 1.1rem 0 0;
  padding-left: 1.7rem;
  font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.14rem);
  line-height: 1.48;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: pretty;
}
.sms-page .sms-move__ask::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -0.06em;
  font-size: 2.1em;
  line-height: 1;
  color: var(--accent);
}
.sms-page .sms-move__ask::after { content: "\201D"; color: var(--accent); }
.sms-page .sms-move__who {
  margin: 0.6rem 0 0 !important;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* no frame at all: the wine crosses already say "this is what it misses" */
.sms-page .sms-limits { margin-top: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); max-width: 56ch; }
.sms-page .sms-limits h3 {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-alt);
}
.sms-page .sms-limits ul { list-style: none; margin: 0.7rem 0 0; padding: 0; }
.sms-page .sms-limits li {
  padding: 0.4rem 0 0.4rem 1.1rem;
  position: relative;
  font-size: 0.95rem;
  line-height: 1.55;
}
.sms-page .sms-limits li::before { content: "\00D7"; position: absolute; left: 0; color: var(--accent-alt); }

.sms-page .sms-finds { border-bottom: 1px solid var(--line-strong); }
.sms-page .sms-find { padding: 1rem 0; max-width: 60ch; }
.sms-page .sms-find:first-child { border-top: 1px solid var(--line-strong); }
.sms-page .sms-find h3 { margin: 0 0 0.4rem; font-size: 1.02rem; font-weight: 500; color: var(--accent); letter-spacing: -0.01em; }
.sms-page .sms-find p { line-height: var(--lh-body); }

/* ============================================================================
   MOTION  ·  four moments, not scattered micro-animation
     1. the landing deals itself in on load, then reveals on scroll
     2. the verdict rises out of a mask: the answer to step one
     3. every answer confirms, the card leaves, the next deals in
     4. the score counts itself out (further up this file)
   Everything moves on opacity and transform only.
   ========================================================================== */

/* ---- 1. the landing, on load ---------------------------------------------- */
@keyframes sms-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes sms-fade { from { opacity: 0; } to { opacity: 1; } }

.sms-page #scr-intro .sms-hero > div > * { animation: sms-rise 0.8s var(--ease-out) both; }
.sms-page #scr-intro .sms-kicker { animation-delay: 0.05s; }
.sms-page #scr-intro .sms-title { animation-delay: 0.14s; }
.sms-page #scr-intro .sms-lead { animation-delay: 0.26s; }
.sms-page #scr-intro .sms-hero p:not(.sms-lead):not(.sms-kicker) { animation-delay: 0.34s; }
.sms-page #scr-intro .sms-actions { animation-delay: 0.46s; }
.sms-page #scr-intro .sms-resume { animation-delay: 0.5s; }
/* the telemetry keys in row by row, like a readout coming online */
.sms-page #scr-intro .sms-tele { animation: sms-fade 0.6s var(--ease-out) 0.5s both; }
.sms-page #scr-intro .sms-tele__row {
  animation: sms-rise 0.6s var(--ease-out) both;
  animation-delay: calc(0.56s + var(--r, 0) * 0.07s);
}
.sms-page #scr-intro .sms-tele__row:nth-child(1) { --r: 0; }
.sms-page #scr-intro .sms-tele__row:nth-child(2) { --r: 1; }
.sms-page #scr-intro .sms-tele__row:nth-child(3) { --r: 2; }
.sms-page #scr-intro .sms-tele__row:nth-child(4) { --r: 3; }

/* the section rules draw themselves rather than being there already */
.sms-page .sms-sec-head::after { transform-origin: left center; }
.sms-page .reveal .sms-sec-head::after,
.sms-page .sms-sec-head.reveal::after { transform: scaleX(0); transition: transform 0.9s var(--ease-out) 0.15s; }
.sms-page .reveal.is-in .sms-sec-head::after,
.sms-page .sms-sec-head.reveal.is-in::after { transform: scaleX(1); }

/* ---- 2. the verdict ------------------------------------------------------- */
.sms-page .sms-verdict__name { display: block; }
.sms-page .sms-verdict.is-revealed .sms-verdict__name {
  animation: sms-mask-rise 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
@keyframes sms-mask-rise {
  from { opacity: 0; transform: translateY(0.42em); clip-path: inset(0 0 100% 0); }
  to { opacity: 1; transform: none; clip-path: inset(0 0 -10% 0); }
}
.sms-page .sms-verdict.is-revealed .sms-verdict__sub { animation: sms-rise 0.6s var(--ease-out) 0.42s both; }
.sms-page .sms-verdict.is-revealed .sms-verdict__desc { animation: sms-rise 0.6s var(--ease-out) 0.52s both; }
.sms-page .sms-verdict.is-revealed .sms-why li {
  animation: sms-rise 0.55s var(--ease-out) both;
  animation-delay: calc(0.62s + var(--i, 0) * 0.07s);
}
/* the plate closes its ticks once the name has landed */
.sms-page .sms-verdict.is-revealed::before,
.sms-page .sms-verdict.is-revealed::after { animation: sms-tick 0.5s var(--ease-out) 0.85s both; }
@keyframes sms-tick { from { opacity: 0; } to { opacity: 1; } }

/* ---- 3. the questionnaire ------------------------------------------------- */
/* the answer registers: the rest of the options step back, the pick holds */
.sms-page #sms-q-box.is-locked .sms-opt:not(.is-sel) {
  opacity: 0.35;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.sms-page #sms-q-box.is-locked .sms-opt.is-sel { animation: sms-lock 0.26s var(--ease-out) both; }
@keyframes sms-lock {
  0% { transform: none; }
  38% { transform: translateX(3px); }
  100% { transform: none; }
}
/* and then it leaves, faster than it arrived */
.sms-page #sms-q-box.is-leaving {
  animation: sms-card-out 0.15s var(--ease-out) both;
  pointer-events: none;
}
@keyframes sms-card-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-10px); }
}
/* the variable label of the incoming card announces itself first */
.sms-page .sms-card__var { animation: sms-rise 0.45s var(--ease-out) both; }
.sms-page .sms-card__q { animation: sms-rise 0.5s var(--ease-out) 0.04s both; }



/* ----------------------------------------------------------------------------
   REDUCED MOTION
   Everything above animates opacity and transform only. This block collapses
   all of it to the final state; the live clock in the header keeps running
   because that is information, not decoration.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sms-page #scr-intro .sms-hero > div > *,
  .sms-page #scr-intro .sms-tele,
  .sms-page #scr-intro .sms-tele__row,
  .sms-page .sms-verdict.is-revealed .sms-verdict__name,
  .sms-page .sms-verdict.is-revealed .sms-verdict__sub,
  .sms-page .sms-verdict.is-revealed .sms-verdict__desc,
  .sms-page .sms-verdict.is-revealed .sms-why li,
  .sms-page .sms-verdict.is-revealed::before,
  .sms-page .sms-verdict.is-revealed::after,
  .sms-page .sms-card__var,
  .sms-page .sms-card__q,
  .sms-page #sms-q-box.is-leaving {
    animation: none;
    opacity: 1;
    transform: none;
    clip-path: none;
  }
  .sms-page #sms-q-box.is-locked .sms-opt:not(.is-sel) { opacity: 1; }
  .sms-page .sms-sec-head.reveal::after,
  .sms-page .reveal .sms-sec-head::after { transform: scaleX(1); transition: none; }
  .sms-page .sms-screen.is-on,
  .sms-page .sms-opts--ranked .sms-opt,
  .sms-page .sms-bar,
  .sms-page .sms-diag[open] .sms-diag__b,
  .sms-page .sms-score-hero.is-revealed .sms-score-num,
  .sms-page .sms-score-hero.is-revealed .sms-score-meta {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .sms-page .sms-prog__fill,
  .sms-page .sms-bar__fill,
  .sms-page .sms-opt,
  .sms-page .sms-opt__k { transition: none; }
}