/* ==========================================================================
   SALES QUALIFICATION ENGINE — productized landing.
   Loaded AFTER base.css + sention.css (tokens) + solutions.css (.sol-faq).
   Own .sqe-* architecture. Inherits the Instrument Plate system: Geist +
   Geist Mono, warm off-white, blue unlock accent, hairline frame, mono HUD
   only where functional. No conceptual kickers. Zero em dashes. No dark
   sections. Single objective: book a 30-min call.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page scaffolding + section rhythm
   -------------------------------------------------------------------------- */
.sqe-page {
  overflow-x: clip;
  /* the global --text-faint (#9a9aa1) is only ~2.5:1 on the surface (fails WCAG
     AA); the page uses it for informational telemetry (spec labels, gauge ticks,
     readout foot), so darken it page-wide to ~4.7:1. Scoped here so the shared
     header/footer keep their own token. */
  --text-faint: #696a71;
}

.sqe-section { padding-block: var(--section-gap); }
.sqe-section--raised { background: var(--bg-raised); }

/* Functional plate-edge rule: a hairline with a position coordinate at the
   right and an optional functional readout at the left. NOT a kicker. */
.sqe-rule {
  display: flex; align-items: baseline; gap: 1rem;
  border-top: 1px solid var(--line-strong);
  padding-top: 0.85rem;
  margin-bottom: clamp(2.25rem, 1.5rem + 2.2vw, 3.75rem);
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.sqe-rule__tag { color: var(--accent); }
.sqe-rule__coord { margin-left: auto; color: var(--text-faint); }

/* Section heading + prose primitives */
.sqe-head {
  margin: 0;
  font-size: var(--fs-h2); color: var(--ink); font-weight: 600;
  line-height: 1.06; letter-spacing: var(--tracking-heading);
  max-width: 22ch; text-wrap: balance;
}
.sqe-head--wide { max-width: 26ch; }
.sqe-lit { color: var(--accent); }

/* two-column editorial: headline left, body right */
.sqe-prose__grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2.5vw, 3.25rem);
}
@media (min-width: 880px) {
  .sqe-prose__grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(2.5rem, 1rem + 4vw, 5rem); }
}
.sqe-prose__body > p { margin: 0 0 1.2rem; max-width: 60ch; color: var(--text-primary); line-height: var(--lh-body); }
.sqe-prose__body > p:last-child { margin-bottom: 0; }
.sqe-prose__body > p + p { margin-top: 1.2rem; }

/* --------------------------------------------------------------------------
   Shared instrument corner ticks (frames the readout, gauge, guarantee, verdict)
   -------------------------------------------------------------------------- */
.sqe-tick { position: absolute; width: 9px; height: 9px; pointer-events: none; z-index: 2; }
.sqe-tick--tl { top: -1px; left: -1px; border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
.sqe-tick--tr { top: -1px; right: -1px; border-top: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); }
.sqe-tick--bl { bottom: -1px; left: -1px; border-bottom: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
.sqe-tick--br { bottom: -1px; right: -1px; border-bottom: 1px solid var(--line-strong); border-right: 1px solid var(--line-strong); }

/* small live pip (reuses pulse-sq keyframe from sention.css) */
.sqe-hero__pip, .sqe-readout__pip, .sqe-final__pip {
  display: inline-block; width: 6px; height: 6px; background: var(--accent);
  vertical-align: middle; animation: pulse-sq 1.2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   CTA — instrument control with a blue "locked-on" reticle. Solid for
   prominence (single-objective page); the final one resolves to blue.
   -------------------------------------------------------------------------- */
.sqe-cta {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem;
  padding: 1.18rem 2.05rem; min-height: 56px;
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; text-align: center;
  color: var(--text-inverse); background: var(--ink);
  border: 1px solid var(--ink); border-radius: 0;
  box-shadow: 0 1px 2px rgba(19, 20, 25, 0.10), 0 12px 28px -14px rgba(19, 20, 25, 0.40);
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
/* accent "arming" wipe on hover, behind the label */
.sqe-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}
.sqe-cta:hover, .sqe-cta:focus-visible {
  border-color: var(--accent); transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(38, 65, 143, 0.20), 0 20px 44px -16px rgba(38, 65, 143, 0.52);
}
.sqe-cta:hover::before, .sqe-cta:focus-visible::before { transform: scaleX(1); }
.sqe-cta:active { transform: translateY(0) scale(0.99); }
.sqe-cta__arrow { color: var(--accent); transition: transform var(--dur-fast) var(--ease-out), color var(--dur-base) var(--ease-out); }
.sqe-cta:hover .sqe-cta__arrow, .sqe-cta:focus-visible .sqe-cta__arrow { transform: translateX(4px); color: var(--text-inverse); }
.sqe-cta__tick { position: absolute; width: 9px; height: 9px; pointer-events: none; z-index: 1; transition: border-color var(--dur-base) var(--ease-out); }
.sqe-cta__tick--tl { top: -1px; left: -1px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.sqe-cta__tick--br { bottom: -1px; right: -1px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.sqe-cta:hover .sqe-cta__tick, .sqe-cta:focus-visible .sqe-cta__tick { border-color: var(--text-inverse); }
@media (prefers-reduced-motion: reduce) { .sqe-cta:active, .sqe-cta:hover, .sqe-cta:focus-visible { transform: none; } }

/* final CTA: the blue unlock; darkens on the wipe */
.sqe-cta--solid { background: var(--accent); border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(38, 65, 143, 0.22), 0 16px 38px -16px rgba(38, 65, 143, 0.55); }
.sqe-cta--solid::before { background: var(--accent-ink); }
.sqe-cta--solid .sqe-cta__arrow { color: var(--text-inverse); }
.sqe-cta--solid .sqe-cta__tick { border-color: color-mix(in srgb, var(--text-inverse) 55%, transparent); }
.sqe-cta--solid:hover, .sqe-cta--solid:focus-visible { border-color: var(--accent-ink); }
.sqe-cta--solid:hover .sqe-cta__tick, .sqe-cta--solid:focus-visible .sqe-cta__tick { border-color: var(--text-inverse); }

/* ==========================================================================
   1 · HERO
   ========================================================================== */
.sqe-hero {
  padding-top: clamp(6rem, 4.5rem + 3.5vw, 8.5rem);
  padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
}
.sqe-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  align-items: center;
}
@media (min-width: 940px) {
  .sqe-hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 1rem + 3vw, 4rem); }
}
.sqe-hero__label {
  display: inline-flex; align-items: center; gap: 0.55rem; margin: 0 0 clamp(1.25rem, 1rem + 1vw, 1.9rem);
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted);
}
.sqe-hero__label-sep { color: var(--text-faint); }
.sqe-hero__headline {
  margin: 0; color: var(--ink); font-weight: 600;
  /* slightly smaller cap + opened leading: 0.98 on a 6-line headline collided
     descenders into the next line's caps. 1.04 lets it breathe, stays tight. */
  font-size: clamp(2.35rem, 1rem + 4vw, 4.5rem); line-height: 1.05; letter-spacing: -0.03em;
  text-wrap: balance;
}
.sqe-hero__sub {
  margin: clamp(1.4rem, 1rem + 1.4vw, 2rem) 0 0; max-width: 52ch;
  /* lighter than the old 1.44rem lead so the headline clearly dominates */
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); line-height: 1.58; color: var(--text-primary);
}
.sqe-hero__actions { margin-top: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); }

/* hero functional spec rail (telemetry, not button microcopy) */
.sqe-hero__spec {
  display: flex; flex-wrap: wrap; gap: 0 clamp(1.5rem, 1rem + 2vw, 3rem); margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;
  border-top: 1px solid var(--line); padding-top: 1.1rem;
}
.sqe-hero__spec-cell { display: flex; flex-direction: column; gap: 0.25rem; }
.sqe-hero__spec dt {
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-faint);
}
.sqe-hero__spec dd { margin: 0; font-family: var(--font-sans); font-weight: 500; font-size: 1rem; color: var(--ink); letter-spacing: -0.01em; }

/* hero load entrance: a staggered rise so the top of the page isn't flat on
   arrival (precise, no bounce). Reduced-motion leaves everything in place. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes sqe-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .sqe-hero__label    { animation: sqe-rise 0.65s var(--ease-out) 0.05s both; }
  .sqe-hero__headline { animation: sqe-rise 0.85s var(--ease-out) 0.13s both; }
  .sqe-hero__sub      { animation: sqe-rise 0.80s var(--ease-out) 0.28s both; }
  .sqe-hero__actions  { animation: sqe-rise 0.80s var(--ease-out) 0.40s both; }
  .sqe-hero__spec     { animation: sqe-rise 0.80s var(--ease-out) 0.50s both; }
}

/* ---- the specimen: a featured deal's MEDDPICC scorecard (score climbs, the
   semaforo turns red -> amber -> green) plus a pipeline split, the "which half".
   Mirrors the CRM the client actually uses. ---- */
.sqe-scope {
  position: relative; margin: 0; padding: clamp(1.15rem, 0.8rem + 1.1vw, 1.7rem);
  background: var(--bg-raised); border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  /* literal CRM-style signal colours, nudged to sit on the warm surface */
  --sig-red: #cf3b2e; --sig-amber: #d8941a; --sig-green: #2f9e52;
  --sig-dim: color-mix(in srgb, var(--ink) 12%, transparent);
}
.sqe-section--raised .sqe-scope { background: var(--bg-base); }

.sqe-scope__bezel {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-bottom: 0.8rem; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
}
.sqe-scope__bezel-k { color: var(--text-muted); }
.sqe-scope__bezel-v { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--text-faint); }
.sqe-scope__pip { width: 6px; height: 6px; background: var(--accent); animation: pulse-sq 1.2s ease-in-out infinite; }

/* featured deal card */
.sqe-card { padding-top: 0.95rem; }
.sqe-card__head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.sqe-card__id { margin: 0; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; color: var(--text-faint); }
.sqe-card__name { margin: 0; font-size: 1.12rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.sqe-card__meter { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.7rem 0 0.55rem; }
.sqe-card__score { display: flex; align-items: baseline; gap: 0.3rem; }
.sqe-card__score-num {
  font-family: var(--font-sans); font-weight: 600; line-height: 1; color: var(--ink);
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.2rem); letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.sqe-card__score-of { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--text-faint); }

/* the semaforo: three lamps, the active band lit */
.sqe-light { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.55rem; border: 1px solid var(--line); border-radius: 999px; }
.sqe-light__lamp { width: 10px; height: 10px; border-radius: 50%; background: var(--sig-dim); transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.sqe-light[data-state="red"]   .sqe-light__lamp--r { background: var(--sig-red);   box-shadow: 0 0 0 3px color-mix(in srgb, var(--sig-red) 22%, transparent); }
.sqe-light[data-state="amber"] .sqe-light__lamp--a { background: var(--sig-amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sig-amber) 22%, transparent); }
.sqe-light[data-state="green"] .sqe-light__lamp--g { background: var(--sig-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sig-green) 24%, transparent); }

/* score bar with the 60 pursue-threshold; fill colour tracks the band */
.sqe-card__bar { position: relative; height: 8px; background: color-mix(in srgb, var(--ink) 7%, transparent); overflow: hidden; }
.sqe-card__fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(var(--score-frac)); background: var(--sig-green); }
.sqe-card__bar[data-state="red"]   .sqe-card__fill { background: var(--sig-red); }
.sqe-card__bar[data-state="amber"] .sqe-card__fill { background: var(--sig-amber); }
.sqe-card__bar[data-state="green"] .sqe-card__fill { background: var(--sig-green); }
.sqe-card__thresh { position: absolute; top: -2px; bottom: -2px; left: 60%; width: 1px; background: var(--line-strong); z-index: 1; }

/* MEDDPICC criteria, two columns */
.sqe-meddpicc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.4rem; margin: 0.9rem 0 0; }
.sqe-crit { display: flex; align-items: center; gap: 0.55rem; padding: 0.42rem 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.sqe-crit__k { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; color: var(--text-muted); border: 1px solid var(--line); }
.sqe-crit__v { flex: 1; font-size: 0.82rem; color: var(--text-muted); letter-spacing: -0.01em; }
.sqe-crit__dot { flex: 0 0 auto; width: 12px; height: 12px; position: relative; }
.sqe-crit.is-met .sqe-crit__dot::before { content: ""; position: absolute; top: 1px; left: 2px; width: 7px; height: 3.5px; border-left: 1.5px solid var(--sig-green); border-bottom: 1.5px solid var(--sig-green); transform: rotate(-45deg); }
.sqe-crit.is-partial .sqe-crit__dot::before { content: ""; position: absolute; inset: 1px; border-radius: 50%; border: 1.5px solid var(--sig-amber); }
.sqe-crit.is-met .sqe-crit__k { color: var(--ink); border-color: var(--line-strong); }
.sqe-crit.is-met .sqe-crit__v { color: var(--ink); }

/* pipeline split: the "which half" */
.sqe-pipe { margin: 1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.sqe-pipe__label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 0.6rem; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.sqe-pipe__count { color: var(--text-muted); }
.sqe-pipe__bars { display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; gap: 0.4rem; height: 36px; }
.sqe-pipe__bar { align-self: end; width: 100%; height: calc(var(--h) * 100%); min-height: 4px; transform-origin: bottom; }
.sqe-pipe__bar.is-real { background: var(--sig-green); }
.sqe-pipe__bar.is-out { background: var(--sig-dim); }

.sqe-scope__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 1rem;
  margin: 0.9rem 0 0; padding-top: 0.8rem; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint);
}

/* the score, criteria + pipeline are SEQUENCED by the inline script (it adds
   .sqe-scope--anim, then .is-on per criterion one at a time, then --scored), so
   each item validates visibly as the score climbs. Final state is the default,
   so no-JS / reduced-motion render the scored card with no empty frame. */
@media (prefers-reduced-motion: no-preference) {
  /* the score fill is driven frame-by-frame from the script (no transform
     transition, or it would lag the rAF); only the band colour eases */
  .sqe-scope--anim .sqe-card__fill { transition: background-color var(--dur-base) var(--ease-out); }
  .sqe-scope--anim .sqe-crit__dot { opacity: 0; transform: scale(0.4); transition: opacity 0.34s var(--ease-out), transform 0.34s var(--ease-out); }
  .sqe-scope--anim .sqe-crit.is-on .sqe-crit__dot { opacity: 1; transform: none; }
  .sqe-scope--anim .sqe-pipe__bar { transform: scaleY(0); transition: transform 0.5s var(--ease-out); }
  .sqe-scope--scored .sqe-pipe__bar { transform: scaleY(1); transition-delay: calc(var(--n, 0) * 0.045s); }
}

/* ==========================================================================
   2 · THE PROBLEM — one deal / three incomparable reads + the two-sided cost
   ========================================================================== */
.sqe-problem__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2.5vw, 3.25rem); }
@media (min-width: 880px) {
  .sqe-problem__top { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(2.5rem, 1rem + 4vw, 5rem); align-items: start; }
}
.sqe-problem__intro { margin: 0; max-width: 60ch; color: var(--text-primary); line-height: var(--lh-body); }

/* the device: same deal, three reps, three reads with no shared scale */
.sqe-reads {
  position: relative; margin: clamp(2.75rem, 1.75rem + 3vw, 4.5rem) auto 0; max-width: 880px;
  padding: clamp(1.25rem, 0.9rem + 1.3vw, 2rem);
  background: var(--bg-base); border: 1px solid var(--line-strong);
}
.sqe-reads__bezel {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: 0.85rem; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
}
.sqe-reads__bezel-k { color: var(--text-muted); }
.sqe-reads__bezel-q { color: var(--text-faint); letter-spacing: 0.08em; }
.sqe-reads__rows { display: grid; }
.sqe-reads__row {
  display: grid; align-items: center;
  grid-template-columns: 4.2rem minmax(0, 1fr) auto;
  grid-template-areas: "rep verdict conf";
  gap: 0.4rem 1.1rem; padding: clamp(0.85rem, 0.6rem + 0.5vw, 1.1rem) 0;
}
.sqe-reads__row + .sqe-reads__row { border-top: 1px solid var(--line); }
.sqe-reads__rep { grid-area: rep; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.sqe-reads__verdict { grid-area: verdict; font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.12rem); color: var(--ink); letter-spacing: -0.01em; }
/* three deliberately DIFFERENT confidence formats = nothing is comparable */
.sqe-reads__conf { grid-area: conf; justify-self: end; }
.sqe-reads__conf--pct { font-family: var(--font-mono); font-weight: 500; font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.sqe-reads__conf--grade { font-family: var(--font-mono); font-weight: 500; font-size: 0.95rem; color: var(--ink); display: inline-grid; place-items: center; min-width: 2rem; padding: 0.18rem 0.45rem; border: 1px solid var(--line-strong); }
.sqe-reads__conf--word { font-style: italic; font-size: 1.05rem; color: var(--text-muted); }
.sqe-reads__foot {
  margin: 0.5rem 0 0; padding-top: 0.85rem; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-alt);
}
@media (max-width: 520px) {
  .sqe-reads__row { grid-template-columns: 1fr auto; grid-template-areas: "rep conf" "verdict verdict"; row-gap: 0.5rem; }
}

/* the two-sided cost, two named blocks */
.sqe-problem__cost { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.sqe-problem__cost-lead { margin: 0 0 1.25rem; font-size: var(--fs-h3); font-weight: 600; color: var(--ink); letter-spacing: -0.015em; }
.sqe-cost2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
@media (min-width: 720px) { .sqe-cost2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 1rem + 2vw, 3rem); } }
.sqe-cost2__item { display: flex; align-items: baseline; gap: 1rem; padding: 1.1rem 0; border-top: 2px solid var(--ink); }
.sqe-cost2 > .sqe-cost2__item + .sqe-cost2__item { border-top: 2px solid var(--ink); }
.sqe-cost2__idx { flex: 0 0 auto; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; color: var(--accent); }
.sqe-cost2__text { margin: 0; max-width: 46ch; color: var(--text-muted); line-height: 1.55; }
.sqe-cost2__lede { color: var(--ink); font-weight: 500; }

/* ==========================================================================
   3 · THE VEHICLE — what installs in the CRM
   ========================================================================== */
.sqe-mech {
  display: grid; grid-template-columns: 1fr; gap: 0; margin: 1.75rem 0 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 620px) { .sqe-mech { grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 2rem); } }
.sqe-mech__item {
  display: flex; align-items: baseline; gap: 0.7rem; padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 620px) { .sqe-mech__item { flex-direction: column; gap: 0.5rem; border-bottom: none; padding-top: 1.1rem; } }
.sqe-mech__k { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); letter-spacing: 0.06em; }
.sqe-mech__v { font-size: 0.95rem; color: var(--ink); letter-spacing: -0.01em; }

/* ==========================================================================
   4 · HOW IT WORKS — five sprint stations on a spine
   ========================================================================== */
.sqe-flow__intro {
  margin: 0 0 clamp(2rem, 1.25rem + 2.5vw, 3.5rem); max-width: 40ch;
  font-size: var(--fs-h3); font-weight: 500; color: var(--ink); line-height: 1.3; letter-spacing: -0.015em;
}
.sqe-stations { position: relative; }
.sqe-stations::before { /* the spine */
  content: ""; position: absolute; top: 0.4rem; bottom: 0.4rem;
  left: clamp(3rem, 7vw, 5rem); width: 1px; background: var(--line);
}
.sqe-station {
  position: relative; display: grid; align-items: start;
  grid-template-columns: clamp(3rem, 7vw, 5rem) 1fr;
  grid-template-areas: "num week" "num main";
  column-gap: clamp(1.4rem, 1rem + 2vw, 2.75rem);
  padding-block: clamp(1.5rem, 1.1rem + 2vw, 2.6rem);
  border-top: 1px solid var(--line);
}
.sqe-station:first-child { border-top: none; }
.sqe-station__num {
  grid-area: num; font-family: var(--font-sans); font-weight: 600;
  font-size: clamp(1.65rem, 1rem + 2.7vw, 2.95rem); line-height: 1; color: var(--text-faint);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.sqe-station::before { /* node on the spine */
  content: ""; position: absolute; top: clamp(1.7rem, 1.3rem + 2vw, 2.85rem);
  left: clamp(3rem, 7vw, 5rem); width: 9px; height: 9px; transform: translate(-50%, -50%);
  background: var(--bg-raised); border: 1px solid var(--line-strong); transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.sqe-station.is-in::before { background: var(--accent); border-color: var(--accent); }
.sqe-station__week {
  grid-area: week; align-self: center; justify-self: start; margin-bottom: 0.4rem;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
}
.sqe-station__main { grid-area: main; }
.sqe-station__title { margin: 0 0 0.5rem; font-size: var(--fs-h3); color: var(--ink); font-weight: 600; letter-spacing: -0.015em; }
.sqe-station__body { margin: 0; max-width: 60ch; color: var(--text-primary); line-height: var(--lh-body); }

/* ==========================================================================
   5 · WHAT CHANGES — three movements
   ========================================================================== */
.sqe-moves { margin: 0; display: grid; gap: 0; }
.sqe-move {
  display: grid; grid-template-columns: 1fr; gap: 0.5rem 2rem;
  padding-block: clamp(1.4rem, 1rem + 1.8vw, 2.4rem); border-top: 1px solid var(--line);
}
.sqe-move:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .sqe-move { grid-template-columns: clamp(6rem, 12vw, 9rem) 1fr; align-items: baseline; } }
.sqe-move__mark {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
}
.sqe-move__text { margin: 0; max-width: 64ch; color: var(--text-primary); line-height: var(--lh-body); }
.sqe-move__lede { color: var(--ink); font-weight: 500; }

/* ==========================================================================
   6 · WHY THIS WORKS — the proof. The self-test gauge dominates.
   ========================================================================== */
/* lead: headline + the setup paragraphs */
.sqe-proof__lead { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2.5vw, 3.25rem); }
@media (min-width: 880px) {
  .sqe-proof__lead { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 1rem + 4vw, 5rem); align-items: start; }
}
.sqe-proof__intro > p { margin: 0 0 1.15rem; max-width: 60ch; color: var(--text-primary); line-height: var(--lh-body); }
.sqe-proof__intro > p:last-child { margin-bottom: 0; }

/* the proof claim + the 90%+ gauge, paired as one unit */
.sqe-proof__claim {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 1.25rem + 2.5vw, 3rem);
  margin-top: clamp(2.5rem, 1.75rem + 3vw, 4.5rem); align-items: center;
}
@media (min-width: 880px) { .sqe-proof__claim { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(2rem, 1rem + 3vw, 4rem); } }
.sqe-proof__claim-text {
  margin: 0; max-width: 42ch; color: var(--ink); font-weight: 500;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); line-height: 1.5; letter-spacing: -0.01em;
}

.sqe-gauge {
  position: relative; padding: clamp(1.75rem, 1.25rem + 2.5vw, 3rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--bg-raised); border: 1px solid var(--line-strong);
}
.sqe-section--raised .sqe-gauge { background: var(--bg-base); }
.sqe-gauge__label {
  margin: 0; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted);
}
.sqe-gauge__figure {
  margin: 0.5rem 0 0; font-family: var(--font-sans); font-weight: 600; line-height: 0.95;
  font-size: clamp(3.6rem, 2rem + 7.4vw, 6.25rem); color: var(--ink); letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
}
.sqe-gauge__unit { font-family: var(--font-sans); font-size: 0.44em; font-weight: 500; color: var(--text-muted); margin-left: 0.06em; vertical-align: baseline; letter-spacing: -0.02em; }
.sqe-gauge__plus { color: var(--accent); }
.sqe-gauge__scale {
  position: relative; height: 8px; margin: clamp(1.25rem, 1rem + 1vw, 1.75rem) 0 0;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.sqe-gauge__fill { position: absolute; inset: 0 auto 0 0; width: 90%; background: var(--accent); transform-origin: left; }
.sqe-gauge__mark { position: absolute; top: -3px; bottom: -3px; left: var(--at, 90%); left: calc(var(--at) * 1%); width: 1px; background: var(--ink); }
.sqe-gauge__ticks {
  display: flex; justify-content: space-between; margin: 0.5rem 0 0;
  font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.08em; color: var(--text-faint);
}
.sqe-gauge__sub {
  margin: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem) 0 0; padding-top: 0.85rem; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint);
}
@media (prefers-reduced-motion: no-preference) {
  .sqe-gauge__fill { transition: transform 1s var(--ease-out); }
  .sqe-gauge.reveal:not(.is-in) .sqe-gauge__fill { transform: scaleX(0); }
}

/* ==========================================================================
   7 · WHO IT'S FOR — qualified vs not, the readout's logic applied to the reader
   ========================================================================== */
.sqe-fit__grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  margin-top: clamp(2rem, 1.25rem + 2.5vw, 3.25rem);
}
@media (min-width: 820px) { .sqe-fit__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); } }
.sqe-fit__col { padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); border: 1px solid var(--line); }
.sqe-fit__col--in { background: var(--bg-raised); border-color: var(--line-strong); }
.sqe-section--raised .sqe-fit__col--in { background: var(--bg-base); }
.sqe-fit__col--out { background: transparent; }
.sqe-fit__col-head {
  margin: 0 0 1.1rem; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.sqe-fit__col--in .sqe-fit__col-head { color: var(--accent); }
.sqe-fit__col--out .sqe-fit__col-head { color: var(--text-faint); }
.sqe-fit__list { display: grid; gap: 0; }
.sqe-fit__item {
  display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.75rem; align-items: start;
  padding: 0.85rem 0; line-height: 1.45;
}
.sqe-fit__item + .sqe-fit__item { border-top: 1px solid var(--line); }
.sqe-fit__col--in .sqe-fit__item { color: var(--text-primary); }
.sqe-fit__col--out .sqe-fit__item { color: var(--text-muted); }
.sqe-fit__mark { position: relative; width: 1.4rem; height: 1.45em; }
/* in = blue check */
.sqe-fit__col--in .sqe-fit__mark::before {
  content: ""; position: absolute; top: 0.18em; left: 2px; width: 9px; height: 5px;
  border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg);
}
/* out = faint dash */
.sqe-fit__col--out .sqe-fit__mark::before {
  content: ""; position: absolute; top: 0.62em; left: 0; width: 11px; height: 1.5px; background: var(--text-faint);
}

/* ==========================================================================
   8 · THE OFFER — the commercial core. Ledger + investment + guarantee.
   ========================================================================== */
.sqe-offer__grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
  margin-top: clamp(2rem, 1.25rem + 2.5vw, 3.25rem);
}
@media (min-width: 900px) { .sqe-offer__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; gap: clamp(2rem, 1rem + 3vw, 3.5rem); } }

.sqe-ledger { margin: 0; border-top: 1px solid var(--line-strong); }
.sqe-ledger__row {
  display: flex; align-items: baseline; gap: 0.5rem; padding: 0.95rem 0; border-bottom: 1px solid var(--line);
}
.sqe-ledger__label { color: var(--text-primary); }
.sqe-ledger__dots { flex: 1 1 auto; align-self: stretch; border-bottom: 1px dotted var(--line-strong); transform: translateY(-0.32em); min-width: 1.5rem; }
.sqe-ledger__val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.98rem; color: var(--ink); white-space: nowrap; }
.sqe-ledger__row--total .sqe-ledger__label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.sqe-ledger__val--struck { color: var(--text-faint); text-decoration: line-through; text-decoration-thickness: 1px; }

/* the investment + CTA sit as a full-width row below the ledger box: the price
   (blue, USD) on the left, the booking control to its right. */
.sqe-invest {
  margin-top: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); padding-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  border-top: 2px solid var(--ink);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); align-items: center;
}
@media (min-width: 760px) { .sqe-invest { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 1rem + 3vw, 4rem); } }
.sqe-invest__main { min-width: 0; }
.sqe-invest__label {
  margin: 0; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
}
.sqe-invest__figure {
  margin: 0.35rem 0 0; font-family: var(--font-sans); font-weight: 600; line-height: 0.95;
  font-size: clamp(3.1rem, 1.8rem + 6.4vw, 5.5rem); color: var(--accent); letter-spacing: -0.045em; font-variant-numeric: tabular-nums;
}
.sqe-invest__cur { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0.1em; margin-left: 0.35rem; }
.sqe-invest__pay { margin: 0.85rem 0 0; max-width: 44ch; color: var(--text-muted); font-size: 0.95rem; line-height: 1.55; }
.sqe-invest__action { justify-self: start; }
@media (min-width: 760px) { .sqe-invest__action { justify-self: end; } }

.sqe-guarantee {
  position: relative; padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem) clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
  background: var(--bg-raised); border: 1px solid var(--accent);
}
.sqe-section--raised .sqe-guarantee { background: var(--bg-base); }
.sqe-guarantee .sqe-tick { width: 10px; height: 10px; }
.sqe-guarantee .sqe-tick--tl { border-color: var(--accent); }
.sqe-guarantee .sqe-tick--tr { border-color: var(--accent); }
.sqe-guarantee .sqe-tick--bl { border-color: var(--accent); }
.sqe-guarantee .sqe-tick--br { border-color: var(--accent); }
.sqe-guarantee__seal {
  margin: 0 0 0.9rem; font-size: var(--fs-h3); font-weight: 600; color: var(--ink); letter-spacing: -0.015em;
}
.sqe-guarantee__seal::before {
  content: "14-day promise"; display: block; margin-bottom: 0.7rem;
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
.sqe-guarantee__body { margin: 0; color: var(--text-primary); line-height: var(--lh-body); }

.sqe-offer__cta { margin-top: clamp(2rem, 1.5rem + 2.5vw, 3.25rem); }

/* ==========================================================================
   9 · COST OF INACTION
   ========================================================================== */
.sqe-cost__quarters {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin: 1.75rem 0 0;
}
@media (min-width: 620px) { .sqe-cost__quarters { grid-template-columns: repeat(4, 1fr); } }
.sqe-cost__q {
  display: flex; flex-direction: column; gap: 0.3rem; padding: 0.9rem 1rem;
  border: 1px solid var(--line); background: transparent;
  font-family: var(--font-mono); font-size: 0.95rem; color: var(--text-faint); letter-spacing: 0.02em;
}
.sqe-cost__q span { font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; }
.sqe-cost__q--now { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }

/* ==========================================================================
   10 · FAQ — reuses .sol-faq grammar from solutions.css
   ========================================================================== */
.sqe-faq .sol-faq { margin-top: 0; border-top: none; padding-top: 0; }
.sqe-faq .sol-faq__title { color: var(--ink); }

/* ==========================================================================
   11 · FINAL CTA — full-width closing panel; readout resolved; status OPEN
   ========================================================================== */
.sqe-final {
  background: var(--bg-base); border-top: 1px solid var(--line-strong);
  padding-block: clamp(3.75rem, 2.5rem + 6vw, 7.5rem);
}
.sqe-final__grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); align-items: center;
}
@media (min-width: 880px) { .sqe-final__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.sqe-final__status {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1.25rem;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted);
}
.sqe-final__open { color: var(--accent); }
.sqe-final__head {
  margin: 0; color: var(--accent); font-weight: 600;
  font-size: clamp(2rem, 1.2rem + 3.6vw, 3.6rem); line-height: 1.02; letter-spacing: -0.035em; max-width: 18ch; text-wrap: balance;
}
.sqe-final__body { margin: clamp(1.25rem, 1rem + 1vw, 1.75rem) 0 0; max-width: 56ch; color: var(--text-primary); line-height: var(--lh-body); }
.sqe-final__actions { margin-top: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); }

/* closing verdict instrument: the readout resolved */
.sqe-final__verdict {
  position: relative; margin: 0; padding: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
  background: var(--bg-raised); border: 1px solid var(--line);
}
.sqe-final__verdict-k {
  margin: 0; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted);
}
.sqe-final__verdict-fig {
  margin: 0.3rem 0 1.1rem; display: flex; align-items: baseline; gap: 0.6rem;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.sqe-final__verdict-real { font-family: var(--font-sans); font-size: clamp(2.9rem, 2rem + 4.2vw, 4.25rem); color: var(--accent); font-weight: 600; line-height: 1; letter-spacing: -0.04em; }
.sqe-final__verdict-of { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.sqe-final__verdict-rows { display: grid; gap: 0; border-top: 1px solid var(--line); }
.sqe-final__vrow {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.62rem 0; border-bottom: 1px solid var(--line);
  font-size: 0.92rem; letter-spacing: -0.01em;
}
.sqe-final__vrow span { flex: 0 0 auto; width: 8px; height: 8px; }
.sqe-final__vrow--keep { color: var(--ink); }
.sqe-final__vrow--keep span { background: var(--accent); }
.sqe-final__vrow--clear { color: var(--text-faint); }
.sqe-final__vrow--clear span { background: transparent; border-top: 1px solid var(--text-faint); width: 10px; height: 0; align-self: center; }
.sqe-final__vrow:last-child { border-bottom: none; }

/* ==========================================================================
   RESPONSIVE — mobile collapses to one column; phone never inherits density
   ========================================================================== */
@media (max-width: 767px) {
  .sqe-hero__headline { font-size: clamp(2.4rem, 1.4rem + 6vw, 3.4rem); }
  .sqe-cta { width: 100%; }
  .sqe-invest__action .sqe-cta, .sqe-final__actions .sqe-cta, .sqe-hero__actions .sqe-cta { width: 100%; }
  .sqe-scope { padding: 1.1rem 1rem; }
}

@media (max-width: 419px) {
  /* very narrow: MEDDPICC criteria fall to a single column */
  .sqe-meddpicc { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   REDUCED MOTION — collapse instrument entrances to final state
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sqe-hero__pip, .sqe-scope__pip, .sqe-final__pip { animation: none; }
  .sqe-card__fill { transition: none; transform: scaleX(var(--score-frac, 1)); }
  .sqe-gauge__fill { transform: none; }
  .sqe-station.is-in::before { transition: none; }
}

/* ==========================================================================
   INTERACTION LAYER  ·  "the live plate"
   --------------------------------------------------------------------------
   Additive only. Nothing above is rewritten. This switches the page ON: the
   inert instruments acknowledge the cursor and the keyboard in ONE consistent
   blue corner-tick language, and the surface gains engineered material.

   TWO-TIER GRAMMAR (codified, so hover never reads as generic "everything is a
   card"):
     · CONTROLS  — .sqe-cta, FAQ summary, header CTA: full reticle, cursor:
       pointer, press/detent. They go somewhere.
     · READOUTS  — scope, reads, gauge, guarantee, verdict, spec, mech, station,
       move, fit, ledger, cost: a QUIETER acknowledgement (ticks brighten, a
       faint 1px lift, an accent edge draws on). NO pointer cursor: they are
       live instruments, not links.

   All motion is transform / opacity / box-shadow / border-color only. Easing is
   var(--ease-out). Every :hover has a twin :focus-visible. Reduced-motion keeps
   the colour/reticle state and drops only movement.
   ========================================================================== */

/* ---- shared elevation ladder (warm-neutral, material not decorative) ----- */
.sqe-page {
  --sqe-lift: translateY(-2px);
  --sqe-shadow-rest: var(--shadow-md);
  --sqe-shadow-hover: 0 2px 6px rgba(19, 20, 25, 0.06), 0 18px 40px -18px rgba(19, 20, 25, 0.34);
  --sqe-shadow-accent: 0 2px 6px rgba(38, 65, 143, 0.10), 0 20px 44px -18px rgba(38, 65, 143, 0.34);
  /* the engineered measurement field: a faint hairline grid that fails a squint
     test (reads as texture, never as decoration). Pure --ink tint, no hue. */
  --sqe-grid: color-mix(in srgb, var(--ink) 3.2%, transparent);
}

/* ---- the measurement-field surface (texture, not pattern) ---------------- */
.sqe-section, .sqe-final {
  position: relative;
  background-image:
    linear-gradient(to right, var(--sqe-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--sqe-grid) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
}
/* raised plates read as solid material lifted OFF the field: clip the grid */
.sqe-section--raised, .sqe-final { background-blend-mode: normal; }
.sqe-section--raised {
  background-image:
    linear-gradient(to right, var(--sqe-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--sqe-grid) 1px, transparent 1px);
}
@media (max-width: 767px) { .sqe-section, .sqe-final { background-size: 48px 48px; } }

/* keep section CONTENT above the field */
.sqe-section > .container, .sqe-final > .container { position: relative; z-index: 1; }

/* ==========================================================================
   READOUT-PLATE reticle  ·  the shared quiet acknowledgement
   Applied to every framed instrument that carries .sqe-tick L-shapes. On hover
   or focus-within the four ticks go blue + scale up a hair, and the plate lifts
   on its shadow. No pointer: these are instruments, not links.
   ========================================================================== */
.sqe-scope, .sqe-reads, .sqe-gauge, .sqe-final__verdict {
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.sqe-scope .sqe-tick, .sqe-reads .sqe-tick,
.sqe-gauge .sqe-tick, .sqe-final__verdict .sqe-tick {
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  transform-origin: center;
}

/* hover + keyboard focus share the lit state (instruments are focusable via
   tabindex on the figure where present; focus-within covers nested controls) */
.sqe-scope:hover, .sqe-scope:focus-visible, .sqe-scope:focus-within,
.sqe-reads:hover, .sqe-reads:focus-visible, .sqe-reads:focus-within,
.sqe-gauge:hover, .sqe-gauge:focus-visible, .sqe-gauge:focus-within,
.sqe-final__verdict:hover, .sqe-final__verdict:focus-visible {
  transform: var(--sqe-lift);
  box-shadow: var(--sqe-shadow-accent);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line-strong));
}
.sqe-scope:hover .sqe-tick, .sqe-scope:focus-visible .sqe-tick, .sqe-scope:focus-within .sqe-tick,
.sqe-reads:hover .sqe-tick, .sqe-reads:focus-visible .sqe-tick, .sqe-reads:focus-within .sqe-tick,
.sqe-gauge:hover .sqe-tick, .sqe-gauge:focus-visible .sqe-tick, .sqe-gauge:focus-within .sqe-tick,
.sqe-final__verdict:hover .sqe-tick, .sqe-final__verdict:focus-visible .sqe-tick {
  border-color: var(--accent);
  transform: scale(1.5);
}
/* the scope's live pips brighten so the "running" reading sharpens on hover */
.sqe-scope:hover .sqe-scope__pip, .sqe-scope:focus-within .sqe-scope__pip,
.sqe-scope:hover .sqe-light__lamp, .sqe-scope:focus-within .sqe-light__lamp {
  filter: saturate(1.18) brightness(1.04);
}

/* the guarantee's ticks are ALREADY blue at rest, so it cannot brighten them.
   It acknowledges the cursor by lifting + thickening its blue L-shapes instead,
   staying inside the same plate system. */
.sqe-guarantee {
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.sqe-guarantee .sqe-tick {
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  transform-origin: center;
}
.sqe-guarantee:hover, .sqe-guarantee:focus-within {
  transform: var(--sqe-lift);
  box-shadow: var(--sqe-shadow-accent);
  border-color: var(--accent-ink);
}
.sqe-guarantee:hover .sqe-tick, .sqe-guarantee:focus-within .sqe-tick {
  border-color: var(--accent-ink);
  transform: scale(1.55);
}

/* the gauge fill nudges 1px brighter on hover (it is the proof centerpiece) */
.sqe-gauge:hover .sqe-gauge__fill, .sqe-gauge:focus-within .sqe-gauge__fill {
  filter: saturate(1.1) brightness(1.03);
}

/* ==========================================================================
   PER-ROW affordances inside the readouts
   Mousing across a multi-row instrument should physically isolate each line.
   Pure background / accent-edge / transform. A pseudo left-edge draws in from
   the top so it reads as a drafting mark, not a menu highlight.
   ========================================================================== */

/* generic accent left-edge primitive (scaleY draw-on from top) ------------- */
.sqe-reads__row, .sqe-mech__item, .sqe-move,
.sqe-fit__item, .sqe-ledger__row, .sqe-final__vrow {
  position: relative;
}
.sqe-reads__row::before, .sqe-mech__item::before, .sqe-move::before,
.sqe-fit__item::before, .sqe-final__vrow::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(-1 * clamp(0.6rem, 0.4rem + 0.6vw, 1rem)); width: 2px;
  background: var(--accent); transform: scaleY(0); transform-origin: top center;
  transition: transform var(--dur-base) var(--ease-out);
  pointer-events: none;
}

/* — the three incomparable reads: isolate each on hover ——————————————————— */
.sqe-reads__row {
  transition: background-color var(--dur-base) var(--ease-out);
  /* pad so the faint raised tint has room to read inside the framed plate */
  padding-inline: clamp(0.6rem, 0.4rem + 0.6vw, 1rem);
  margin-inline: calc(-1 * clamp(0.6rem, 0.4rem + 0.6vw, 1rem));
}
.sqe-reads__row:hover, .sqe-reads__row:focus-within {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.sqe-reads__row:hover::before, .sqe-reads__row:focus-within::before { transform: scaleY(1); }
.sqe-reads__row:hover .sqe-reads__rep, .sqe-reads__row:focus-within .sqe-reads__rep {
  color: var(--accent);
}

/* — the mechanism triad: three engageable moving parts ———————————————————— */
.sqe-mech__item {
  transition: transform var(--dur-fast) var(--ease-out);
}
.sqe-mech__item::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}
@media (min-width: 620px) { .sqe-mech__item::after { bottom: auto; top: -1px; } }
.sqe-mech__item:hover, .sqe-mech__item:focus-within { transform: translateY(-1px); }
.sqe-mech__item:hover::after, .sqe-mech__item:focus-within::after { transform: scaleX(1); }
.sqe-mech__item:hover .sqe-mech__k, .sqe-mech__item:focus-within .sqe-mech__k {
  color: var(--accent-ink); font-weight: 500;
}
/* the generic top-edge primitive is not wanted on mech (it uses ::after rule) */
.sqe-mech__item::before { content: none; }

/* — what-changes movements: walk the sequence ————————————————————————————— */
.sqe-move {
  transition: background-color var(--dur-base) var(--ease-out);
  padding-inline: clamp(0.6rem, 0.4rem + 0.6vw, 1rem);
  margin-inline: calc(-1 * clamp(0.6rem, 0.4rem + 0.6vw, 1rem));
}
.sqe-move:hover, .sqe-move:focus-within { background: color-mix(in srgb, var(--accent) 3.5%, transparent); }
.sqe-move:hover::before, .sqe-move:focus-within::before { transform: scaleY(1); }
.sqe-move:hover .sqe-move__mark, .sqe-move:focus-within .sqe-move__mark { color: var(--accent-ink); }

/* — who-it-is-for: the reader scores themselves off ——————————————————————— */
.sqe-fit__col {
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.sqe-fit__col--in:hover, .sqe-fit__col--in:focus-within {
  transform: var(--sqe-lift);
  box-shadow: var(--sqe-shadow-accent);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line-strong));
}
.sqe-fit__col--out:hover, .sqe-fit__col--out:focus-within {
  border-color: var(--line-strong);
}
.sqe-fit__item {
  transition: background-color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  padding-inline: clamp(0.5rem, 0.35rem + 0.5vw, 0.85rem);
  margin-inline: calc(-1 * clamp(0.5rem, 0.35rem + 0.5vw, 0.85rem));
}
/* IN rows: hovering one "ticks" it — check brightens, faint row lift */
.sqe-fit__col--in .sqe-fit__item:hover, .sqe-fit__col--in .sqe-fit__item:focus-within {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.sqe-fit__col--in .sqe-fit__item:hover::before,
.sqe-fit__col--in .sqe-fit__item:focus-within::before { transform: scaleY(1); }
.sqe-fit__col--in .sqe-fit__item:hover .sqe-fit__mark::before,
.sqe-fit__col--in .sqe-fit__item:focus-within .sqe-fit__mark::before {
  border-color: var(--accent-ink);
}
.sqe-fit__mark::before { transition: border-color var(--dur-base) var(--ease-out); }
/* OUT rows: hovering one DIMS it — reinforces exclusion, no accent edge */
.sqe-fit__col--out .sqe-fit__item::before { content: none; }
.sqe-fit__col--out .sqe-fit__item:hover, .sqe-fit__col--out .sqe-fit__item:focus-within {
  opacity: 0.62;
}

/* — the ledger: connect-the-dots as the eye tracks a row to its value —————— */
.sqe-ledger__row { transition: background-color var(--dur-base) var(--ease-out); }
.sqe-ledger__dots { transition: border-color var(--dur-base) var(--ease-out); }
.sqe-ledger__val { transition: transform var(--dur-fast) var(--ease-out); }
.sqe-ledger__row:hover:not(.sqe-ledger__row--total),
.sqe-ledger__row:focus-within:not(.sqe-ledger__row--total) {
  background: color-mix(in srgb, var(--accent) 3%, transparent);
}
.sqe-ledger__row:hover .sqe-ledger__dots,
.sqe-ledger__row:focus-within .sqe-ledger__dots {
  border-bottom-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong));
}
.sqe-ledger__row:hover .sqe-ledger__val,
.sqe-ledger__row:focus-within .sqe-ledger__val { transform: translateX(-2px); }

/* — cost-of-inaction: the Q4 alternative reads as a selectable path ———————— */
.sqe-cost__q--now {
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.sqe-cost__q--now:hover {
  transform: var(--sqe-lift);
  border-color: var(--accent-ink);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  box-shadow: var(--sqe-shadow-accent);
}

/* — the closing verdict's keep rows brighten their pips on row hover ——————— */
.sqe-final__vrow { transition: color var(--dur-base) var(--ease-out); }
.sqe-final__vrow span { transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.sqe-final__vrow--keep:hover::before, .sqe-final__vrow--keep:focus-within::before { transform: scaleY(1); }
.sqe-final__vrow--keep:hover span {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.sqe-final__vrow--clear::before { content: none; }

/* ==========================================================================
   HERO SPEC RAIL  ·  a live instrument cluster, near-subliminal
   The mono dt label shifts to accent on cell hover. No layout move.
   ========================================================================== */
.sqe-hero__spec-cell { transition: transform var(--dur-fast) var(--ease-out); }
.sqe-hero__spec dt { transition: color var(--dur-base) var(--ease-out); }
.sqe-hero__spec-cell:hover, .sqe-hero__spec-cell:focus-within { transform: translateY(-1px); }
.sqe-hero__spec-cell:hover dt, .sqe-hero__spec-cell:focus-within dt { color: var(--accent); }

/* ==========================================================================
   HOW-IT-WORKS STATIONS  ·  couple a row to its spine node on demand
   On hover/focus-within, light THIS station's node exactly like the scroll
   .is-in treatment, and pull its week label to accent-ink. Makes the spine a
   live circuit the cursor can probe.
   ========================================================================== */
.sqe-station {
  transition: background-color var(--dur-base) var(--ease-out);
  padding-inline: clamp(0.6rem, 0.4rem + 0.6vw, 1rem);
  margin-inline: calc(-1 * clamp(0.6rem, 0.4rem + 0.6vw, 1rem));
}
.sqe-station__num { transition: color var(--dur-base) var(--ease-out); }
.sqe-station__week { transition: color var(--dur-base) var(--ease-out); }
.sqe-station:hover, .sqe-station:focus-within {
  background: color-mix(in srgb, var(--accent) 3%, transparent);
}
.sqe-station:hover::before, .sqe-station:focus-within::before {
  background: var(--accent); border-color: var(--accent);
}
.sqe-station:hover .sqe-station__num, .sqe-station:focus-within .sqe-station__num {
  color: var(--text-muted);
}
.sqe-station:hover .sqe-station__week, .sqe-station:focus-within .sqe-station__week {
  color: var(--accent-ink);
}

/* ==========================================================================
   CTA  ·  sharper "thrown switch" press detent (control tier)
   Keep the arming wipe + tick inversion + arrow nudge already in place; add a
   crisper 1px press so the commit registers as a physical detent. The wipe now
   keys off the cursor side via a custom prop the script could set, but defaults
   to the existing left-origin, so behaviour is unchanged without JS.
   ========================================================================== */
.sqe-cta:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: inset 0 2px 5px rgba(19, 20, 25, 0.28),
              0 1px 2px rgba(19, 20, 25, 0.10);
}
.sqe-cta--solid:active {
  box-shadow: inset 0 2px 6px rgba(28, 50, 112, 0.45),
              0 1px 2px rgba(38, 65, 143, 0.20);
}
@media (prefers-reduced-motion: reduce) {
  .sqe-cta:active { transform: none; }
}

/* ==========================================================================
   FAQ  ·  the page's highest-traffic control gets the page's own reticle
   Blue corner-tick reticle on hover/focus-visible + a 1px accent left edge.
   The inherited [open] tick rotation is preserved (solutions.css). Explicit
   :focus-visible makes keyboard expand/collapse first-class.
   ========================================================================== */
.sqe-faq .sol-faq__item summary { position: relative; }
.sqe-faq .sol-faq__item summary::before {
  content: ""; position: absolute; left: -1px; top: 0.5rem; bottom: 0.5rem; width: 2px;
  background: var(--accent); transform: scaleY(0); transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.sqe-faq .sol-faq__item summary:hover::before,
.sqe-faq .sol-faq__item summary:focus-visible::before,
.sqe-faq .sol-faq__item[open] summary::before { transform: scaleY(1); }

/* corner-tick reticle pair on the summary — the page's signature on the FAQ */
.sqe-faq .sol-faq__item summary::after {
  content: ""; position: absolute; right: -2px; top: -1px; width: 9px; height: 9px;
  border-top: 1px solid var(--accent); border-right: 1px solid var(--accent);
  opacity: 0; transform: scale(0.6); transform-origin: top right;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.sqe-faq .sol-faq__item summary:hover::after,
.sqe-faq .sol-faq__item summary:focus-visible::after { opacity: 1; transform: scale(1); }

/* first-class keyboard focus in the instrument language (not the UA outline) */
.sqe-faq .sol-faq__item summary:focus-visible {
  outline: none;
  color: var(--accent);
}
.sqe-faq .sol-faq__item summary:focus-visible .sol-faq__tick::before,
.sqe-faq .sol-faq__item summary:focus-visible .sol-faq__tick::after { background: var(--accent-ink); }

/* ==========================================================================
   HEADER  ·  the shared header keeps its original LOCKED -> OPEN flip (driven
   by reveal.js, status stays blue); wine is reserved for the rarest emphasis
   (the problem-section foot only). We only add a press detent to the booking
   CTA so it shares the page's tactile feedback family.
   ========================================================================== */
/* keep the header CTA in the same feedback family as .sqe-cta: ensure its lift
   reads as a sibling, not a weaker button (shared blue reticle already exists in
   sention.css; this only matches the press detent so the two never conflict) */
body:has(.sqe-page) .site-header__cta:active { transform: translateY(1px) scale(0.99); }
@media (prefers-reduced-motion: reduce) {
  body:has(.sqe-page) .site-header__cta:active { transform: none; }
}

/* ==========================================================================
   :focus-visible safety  ·  every newly-interactive READOUT plate gets a
   visible, on-brand keyboard ring (the figures carry tabindex="0" in markup).
   ========================================================================== */
.sqe-scope:focus-visible, .sqe-reads:focus-visible,
.sqe-gauge:focus-visible, .sqe-final__verdict:focus-visible,
.sqe-cost__q--now:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 3px;
}

/* ==========================================================================
   REDUCED MOTION  ·  keep every reticle's COLOUR/border end-state, drop motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sqe-scope, .sqe-reads, .sqe-gauge, .sqe-guarantee, .sqe-final__verdict,
  .sqe-fit__col, .sqe-cost__q--now, .sqe-hero__spec-cell, .sqe-mech__item,
  .sqe-station, .sqe-ledger__val {
    transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  }
  .sqe-scope:hover, .sqe-scope:focus-within,
  .sqe-reads:hover, .sqe-reads:focus-within,
  .sqe-gauge:hover, .sqe-gauge:focus-within,
  .sqe-guarantee:hover, .sqe-guarantee:focus-within,
  .sqe-final__verdict:hover,
  .sqe-fit__col--in:hover, .sqe-fit__col--in:focus-within,
  .sqe-cost__q--now:hover,
  .sqe-hero__spec-cell:hover, .sqe-mech__item:hover, .sqe-station:hover {
    transform: none;
  }
  /* reticle ticks: keep them lit, but do not scale */
  .sqe-scope:hover .sqe-tick, .sqe-reads:hover .sqe-tick, .sqe-gauge:hover .sqe-tick,
  .sqe-guarantee:hover .sqe-tick, .sqe-final__verdict:hover .sqe-tick { transform: none; }
  /* accent edges / underlines: resolve instantly to the drawn state */
  .sqe-reads__row:hover::before, .sqe-move:hover::before, .sqe-fit__item:hover::before,
  .sqe-final__vrow--keep:hover::before, .sqe-station:hover::before,
  .sqe-faq .sol-faq__item summary:hover::before { transition: none; }
  .sqe-mech__item:hover::after { transition: none; }
  .sqe-ledger__row:hover .sqe-ledger__val { transform: none; }
}

/* ==========================================================================
   COLOUR DIRECTION (Carlos) · more colour, kept legible, on the brand's blue +
   wine. Appended last so it overrides the layers above. Semantics: blue = go /
   qualified / unlock; wine-red = stop / excluded / "won't close".
   ========================================================================== */

/* CTAs · a WHITE control with a blue arrow-key on the cream surface; on hover the
   whole control INVERTS to blue. Keeps the lift + the shadow.
   rest:  white body, blue border, blue label, blue arrow-key with a white arrow, blue reticle.
   hover: blue body, white label, white arrow-key with a blue arrow, white reticle. */
.sqe-cta {
  justify-content: space-between; gap: 1rem;
  padding: 0.95rem 0.7rem 0.95rem 1.85rem;
  background: var(--bg-raised); border: 1px solid var(--accent); color: var(--accent);
  box-shadow: 0 1px 2px rgba(19, 20, 25, 0.08), 0 14px 30px -16px rgba(19, 20, 25, 0.20);
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.sqe-cta::before { display: none; }   /* no wipe: the whole control inverts cleanly */
.sqe-cta__label { color: var(--accent); transition: color var(--dur-base) var(--ease-out); }
/* the arrow sits in a key block */
.sqe-cta__arrow {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 1.9rem; height: 1.9rem; font-size: 0.95rem; line-height: 1; border-radius: 1px;
  background: var(--accent); color: var(--text-inverse);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.sqe-cta__tick--tl, .sqe-cta__tick--br { border-color: var(--accent); transition: border-color var(--dur-base) var(--ease-out); }

/* invert on hover / keyboard focus */
.sqe-cta:hover, .sqe-cta:focus-visible {
  background: var(--accent); border-color: var(--accent); transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(38, 65, 143, 0.20), 0 20px 44px -16px rgba(38, 65, 143, 0.55);
}
.sqe-cta:hover .sqe-cta__label, .sqe-cta:focus-visible .sqe-cta__label { color: var(--text-inverse); }
.sqe-cta:hover .sqe-cta__arrow, .sqe-cta:focus-visible .sqe-cta__arrow {
  background: var(--text-inverse); color: var(--accent); transform: translateX(3px);
}
.sqe-cta:hover .sqe-cta__tick, .sqe-cta:focus-visible .sqe-cta__tick { border-color: var(--text-inverse); }

/* how-it-works spine nodes: red (the page's wine) -------------------------- */
.sqe-station.is-in::before,
.sqe-station:hover::before, .sqe-station:focus-within::before {
  background: var(--accent-alt); border-color: var(--accent-alt);
}

/* coloured section headings: "What changes" blue, the proof line wine-red --- */
.sqe-head--blue { color: var(--accent); }
.sqe-head--red  { color: var(--accent-alt); }

/* hero headline in blue, with "which half" in wine-red (scoped: the global
   .sqe-lit stays blue for the product name in the vehicle section) */
.sqe-hero__headline { color: var(--accent); }
.sqe-hero__headline .sqe-lit { color: var(--accent-alt); }

/* who-it-is-for: a blue GO panel vs a red STOP panel, white text, legible --- */
.sqe-fit__col--in { background: var(--accent); border-color: var(--accent-ink); }
.sqe-fit__col--in .sqe-fit__col-head,
.sqe-fit__col--in .sqe-fit__item { color: var(--text-inverse); }
.sqe-fit__col--in .sqe-fit__item + .sqe-fit__item { border-top-color: color-mix(in srgb, var(--text-inverse) 24%, transparent); }
.sqe-fit__col--in .sqe-fit__mark::before { border-color: var(--text-inverse); }
.sqe-fit__col--in .sqe-fit__item::before { background: var(--text-inverse); }

.sqe-fit__col--out { background: var(--accent-alt); border-color: color-mix(in srgb, var(--accent-alt) 65%, var(--ink)); }
.sqe-fit__col--out .sqe-fit__col-head,
.sqe-fit__col--out .sqe-fit__item { color: var(--text-inverse); }
.sqe-fit__col--out .sqe-fit__item + .sqe-fit__item { border-top-color: color-mix(in srgb, var(--text-inverse) 26%, transparent); }
.sqe-fit__col--out .sqe-fit__mark::before { background: var(--text-inverse); }

/* fit hover re-tuned for the solid colour panels (white overlay, keep lift) - */
.sqe-fit__col--in:hover, .sqe-fit__col--in:focus-within { border-color: var(--accent-ink); }
.sqe-fit__col--in .sqe-fit__item:hover,
.sqe-fit__col--in .sqe-fit__item:focus-within { background: color-mix(in srgb, var(--text-inverse) 13%, transparent); }
.sqe-fit__col--out:hover, .sqe-fit__col--out:focus-within { border-color: var(--ink); }
.sqe-fit__col--out .sqe-fit__item:hover,
.sqe-fit__col--out .sqe-fit__item:focus-within { opacity: 1; background: color-mix(in srgb, var(--text-inverse) 11%, transparent); }