/* AI Check — page-unique material only, loaded after site.css.
   Paper identity. The dark act asks the question; everything below is lit —
   the intake, the run log, and the result, which reads as what it is: the
   firm putting your market on paper. Semantic status colors (--good/--mid/
   --bad) mark diagnostic states only; the logo note marks what is yours. */

/* ============ ACT I · ASK IT YOURSELF (dark, colorless) ============
   Opens the page, so it plays on load, not on scroll — same reasoning as
   home's Act I. --p only drives the vignette and the scroll cue. */

@keyframes check-in { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
.act-in { opacity: 0; animation: check-in 0.85s var(--ease-entrance) forwards; animation-delay: var(--d, 0s); }
@media (prefers-reduced-motion: reduce) { .act-in { opacity: 1; animation: none; } }
.no-js .act-in { opacity: 1; animation: none; }

/* The question: a white chat bubble, the one lit object in the dark room. */
.check-q {
  display: block;
  background: var(--card); color: var(--ink);
  font-weight: 800; letter-spacing: var(--tracking-tight);
  font-size: clamp(1.3rem, 0.95rem + 1.8vw, 2.3rem);
  line-height: 1.15;
  padding: var(--space-4) var(--space-6);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
  width: min(680px, 100%);
  min-height: calc(2.3em + 2 * var(--space-4));
}
.stage-dark .check-q { color: var(--ink); }
.check-q::after {
  content: ""; display: inline-block; width: 3px; height: 0.9em;
  margin-left: 0.1em; vertical-align: -0.08em;
  background: var(--ink);
  animation: check-caret 1.1s steps(2, end) infinite;
}
@keyframes check-caret { 50% { opacity: 0; } }

/* The assistant's reply — arrives under scroll, one name at a time. The
   answer bubble to .check-q's question bubble: same room, other speaker.
   Role labels, never invented business names (honesty grammar of home's
   Act II). Sub windows live in the markup. */
.check-reply {
  margin-top: var(--space-5);
  width: min(560px, 100%);
  margin-left: auto;
  background: var(--surface-2); border: 1px solid var(--surface-line);
  border-radius: 16px; padding: var(--space-5) var(--space-6);
}
.check-reply__head { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--slate); }
.check-reply__lede { margin-top: var(--space-2); font-size: var(--text-small); color: var(--slope); }
.check-reply__list { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.check-reply__item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  border-top: var(--rule-dark-soft); padding-top: var(--space-2); }
.check-reply__name { font-weight: 700; color: var(--paper); font-size: var(--text-body); }
.check-reply__note { font-size: var(--text-caption); color: var(--slate); text-align: right; }
.check-reply__tail { margin-top: var(--space-4); font-size: var(--text-small); color: var(--slope); }
.check-reply__tail strong { color: var(--paper); }

.checkfork { display: grid; gap: var(--space-5); margin-top: var(--space-8); max-width: 900px; }
@media (min-width: 760px) { .checkfork { grid-template-columns: 1fr 1fr; } }
.checkfork__side {
  border-radius: 16px; padding: var(--space-6);
  background: var(--surface); border: 1px solid rgba(236,237,236,0.1);
}
.checkfork__k { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--slate); }
.checkfork__biz { display: block; margin-top: var(--space-3); font-weight: 800;
  font-size: var(--text-body-lg); color: var(--paper); }
.checkfork__side--win { border-color: color-mix(in srgb, var(--good) 40%, rgba(236,237,236,0.1)); }
.checkfork__side--win .checkfork__biz { color: var(--good); }
.checkfork__side--lose .checkfork__biz { color: var(--slope); }
.checkfork__note { margin-top: var(--space-2); font-size: var(--text-small); color: var(--slope); }

.check-act__cta { margin-top: var(--space-10); max-width: 46ch; }
.check-act__cta p { font-size: var(--text-body-lg); color: var(--slope); }
.check-act__cta strong { color: var(--paper); }
/* The early jump-to-form CTA (added 2026-08-11): a real button, not just an
   instruction to scroll -- on mobile the form sat 1.6 screens down, so a
   high-intent visitor (this page is the sitewide ad CTA's destination) had
   no way to reach the tool from the first screen. The full hero still plays
   for anyone who scrolls normally; this is just an early exit. */
.check-act__btn { margin-top: var(--space-6); width: max-content; }

/* Mobile tightening (added 2026-08-11): the form sat 1.6 screens down on a
   375px-wide phone before this. site.css's generic mobile .act padding
   (--space-24, 96px top+bottom) is sized for a full pinned act with room to
   breathe; this hero has four stacked cards and doesn't need that much air.
   Scoped to .act--static specifically so no other page's act is affected. */
@media (max-width: 640px) {
  .act--static { padding-block: var(--space-12); }
  .check-reply { margin-top: var(--space-4); padding: var(--space-4) var(--space-5); }
  .check-reply__list { gap: var(--space-1); margin-top: var(--space-2); }
  .checkfork { margin-top: var(--space-6); gap: var(--space-3); }
  .checkfork__side { padding: var(--space-5); }
  .check-act__cta { margin-top: var(--space-6); }
}

/* ============ INTAKE (lit) ============ */

.checkform-wrap { display: grid; gap: var(--space-16); align-items: start; }
@media (min-width: 960px) { .checkform-wrap { grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: var(--space-24); } }

.checkform {
  background: var(--card); border: 1px solid rgba(14,19,24,0.1);
  border-radius: 20px; padding: var(--space-8);
  display: grid; gap: var(--space-5);
  box-shadow: 0 2px 10px rgba(14,19,24,0.04);
}
.checkform__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
  font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--label-ink); }
.checkform h2 { font-size: var(--text-h3); margin-top: var(--space-1); }
.checkform__sub { color: var(--body-ink); font-size: var(--text-small); }
.checkform__engines { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.checkform__engines span { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--label-ink); }
.checkform__engines b { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 700;
  color: var(--ink); padding: 3px 11px; border: 1px solid rgba(14,19,24,0.16); border-radius: 999px; }

/* Inputs carry an intrinsic preferred width from the browser's default size
   attribute, and as grid items their automatic minimum size refuses to shrink
   below it, so they burst the card's right edge. min-width:0 lets them shrink;
   minmax(0,1fr) stops the two-up row resolving its own minimum to that same
   intrinsic width. Both are needed — either alone still overflows. */
.cf-row { display: grid; gap: var(--space-2); min-width: 0; }
.cf-2 { display: grid; gap: var(--space-5); min-width: 0; }
@media (min-width: 520px) { .cf-2 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.cf-lbl { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--label-ink); }
.cf-in {
  width: 100%; min-width: 0;
  background: #fff; border: 1px solid rgba(14,19,24,0.16); border-radius: 10px;
  color: var(--ink); padding: var(--space-3) var(--space-4); font-size: var(--text-body);
  transition: border-color var(--dur-fast) var(--ease-entrance);
}
.cf-in::placeholder { color: var(--slate); }
.cf-in:focus { border-color: var(--logo); outline: none; }
.cf-hint { font-size: var(--text-caption); color: var(--label-ink); }
.hpf { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.checkform button[type="submit"] { margin-top: var(--space-2); border: none; width: max-content; }
.checkform button[type="submit"]:disabled { opacity: 0.55; transform: none; cursor: default; box-shadow: none; }
.cf-note { font-size: var(--text-small); color: var(--label-ink); }
.cf-err { font-size: var(--text-small); color: var(--bad); }
.cf-err:empty { display: none; }

.checkhelp { display: grid; gap: var(--space-10); align-content: start; }
.checkhelp h3 { font-size: var(--text-h4); }
.checkhelp ul { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.checkhelp li { font-size: var(--text-small); color: var(--body-ink); padding-left: var(--space-5); position: relative; }
.checkhelp li::before { content: "—"; position: absolute; left: 0; color: var(--slate); }
.checkhelp li b { color: var(--ink); }
.checkhelp__expect { margin-top: var(--space-6); padding: var(--space-5); border-radius: 12px;
  background: color-mix(in srgb, var(--logo) 7%, transparent);
  border: 1px dashed color-mix(in srgb, var(--logo) 45%, transparent);
  font-size: var(--text-small); color: var(--body-ink); }
.checkhelp__expect b { color: var(--logo); }

/* Subgrid (added 2026-08-11): without it, each .fact stacks its own
   label/heading/paragraph independently, so as soon as one column's
   heading wraps to a different number of lines than its neighbors (exactly
   what happened once this column narrowed to ~190px inside checkform-wrap's
   two-up layout), the rows below stop lining up across columns — found via
   a real screenshot at a wide viewport, not a hypothetical. Subgrid locks
   all three .fact columns to the SAME row boundaries (label row, heading
   row, paragraph row, note row) regardless of how much any one heading
   wraps, so this can't recur as copy changes over time. */
.factsrow { display: grid; gap: var(--space-8); margin-top: var(--space-4); grid-template-rows: auto auto auto auto; }
@media (min-width: 700px) { .factsrow { grid-template-columns: repeat(3, 1fr); } }
.fact { display: grid; grid-template-rows: subgrid; grid-row: span 4; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid rgba(14,19,24,0.12); }
.fact__lbl { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--label-ink); }
.fact__val { font-weight: 700; color: var(--ink); }
.fact p { font-size: var(--text-small); color: var(--body-ink); }
.fact a { color: var(--logo); border-bottom: 1px solid color-mix(in srgb, var(--logo) 40%, transparent); }
.fact__note { font-size: var(--text-caption); color: var(--label-ink); font-style: normal; }

/* ============ RUNNING STATE (lit) ============ */

.checkrun { }
.checkrun .tm-container { max-width: 860px; }
.checkrun__card { background: var(--card); border: 1px solid rgba(14,19,24,0.1); border-radius: 20px; padding: var(--space-10);
  box-shadow: 0 2px 10px rgba(14,19,24,0.04); }
.checkrun__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
  font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--label-ink); }
.checkrun__title { margin-top: var(--space-3); }
.checkrun__title .dots::after { content: ""; display: inline-block; width: 0; animation: check-ellipsis 1.4s steps(4,end) infinite; }
@keyframes check-ellipsis { to { content: "..."; width: 1.2em; } }
.checkrun__log { margin-top: var(--space-6); display: grid; gap: var(--space-2);
  font-family: var(--font-label); font-size: var(--text-small); color: var(--body-ink); }
.checkrun__log > div { padding-block: 2px; }
.checkrun__log > div.ok { color: var(--good); font-weight: 700; margin-top: var(--space-2); }

/* ============ RESULT STATE (lit — the report, on paper) ============ */

.reswrap { display: grid; gap: var(--space-16); }

.verdict { border-top: 2px solid var(--ink); padding-top: var(--space-8); }
.vline { font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3rem); font-weight: 800; letter-spacing: var(--tracking-tight);
  color: var(--ink); margin-top: var(--space-4); line-height: 1.08; }
.vline b { color: var(--logo); }
.vline .lose { color: var(--label-ink); }
.vsub { margin-top: var(--space-4); color: var(--body-ink); max-width: 62ch; font-size: var(--text-body-lg); }

.scoreband[hidden], .vengines[hidden], .whyframe[hidden], .ansdrop[hidden] { display: none !important; }

/* Counted fact, not an invented score: no dial, no percentage. */
.scoreband { margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid rgba(14,19,24,0.12);
  display: flex; align-items: baseline; gap: var(--space-8); flex-wrap: wrap; }
.countfig {
  font-family: var(--font-label); font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: clamp(2.6rem, 2rem + 2.6vw, 4rem); line-height: 1;
  letter-spacing: -0.03em; color: var(--ink); flex: none;
}
.scoremeta { max-width: 44ch; }
.scoremeta .sk { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--label-ink); }
.scoremeta .sv { font-weight: 700; color: var(--ink); margin-top: var(--space-1); }
.scoremeta .sn { font-size: var(--text-small); color: var(--body-ink); margin-top: var(--space-2); }

.vengines { margin-top: var(--space-8); display: grid; gap: var(--space-4); }
@media (min-width: 700px) { .vengines { grid-template-columns: repeat(2, 1fr); } }
.veng { background: var(--card); border: 1px solid rgba(14,19,24,0.1); border-radius: 12px; padding: var(--space-5);
  box-shadow: 0 2px 10px rgba(14,19,24,0.04); }
.vk1 { display: flex; justify-content: space-between; font-family: var(--font-label); font-size: var(--text-caption);
  font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--label-ink); }
.vq { margin-top: var(--space-2); font-size: var(--text-small); color: var(--body-ink); }
.vs { margin-top: var(--space-4); font-weight: 700; font-size: var(--text-small); }
.vs.win { color: var(--good); } .vs.lose { color: var(--label-ink); }
.vlk { margin-top: var(--space-4); font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--label-ink); }
.vlist { margin-top: var(--space-2); display: grid; gap: var(--space-2); }
.vitem { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--text-small); color: var(--body-ink); }
.vitem .vn { font-family: var(--font-label); color: var(--slate); font-variant-numeric: tabular-nums; }
.vitem.you { color: var(--ink); font-weight: 700; }
.ytag { font-family: var(--font-label); font-size: 10px; letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: #fff; background: var(--logo); padding: 1px 6px; border-radius: var(--radius-round); }
.vmiss { margin-top: var(--space-2); font-size: var(--text-small); color: var(--label-ink); }

.whyframe { padding: var(--space-6); border-radius: 12px;
  background: var(--card); border: 1px solid rgba(14,19,24,0.1); }
.whyframe .wk { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--label-ink); margin-bottom: var(--space-3); }
.whyframe p { color: var(--body-ink); font-size: var(--text-small); max-width: 68ch; }
.whyframe b { color: var(--ink); }

/* Competitors reuse the .sov ranked-bar component; every row here is a rival,
   so bars run slope-grey — nobody on this chart gets to be the ink. */
.reswrap .sov__bar { background: var(--slope); }
.compnote { margin-top: var(--space-6); padding: var(--space-5); border-radius: 12px;
  background: color-mix(in srgb, var(--logo) 8%, transparent);
  border-left: 2px solid var(--logo); font-size: var(--text-small); color: var(--body-ink); }
.compnote b { color: var(--ink); }

/* Evidence */
.ansdrop { border-top: 1px solid rgba(14,19,24,0.12); padding-top: var(--space-6); }
.ansdrop summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  align-items: baseline; gap: var(--space-4); font-weight: 700; color: var(--ink); }
.ansdrop summary::-webkit-details-marker { display: none; }
.ansdrop .ahint { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--logo); }
.answers { margin-top: var(--space-6); display: grid; gap: var(--space-4); }
.ans { background: var(--card); border: 1px solid rgba(14,19,24,0.1); border-radius: 12px; padding: var(--space-6); }
.ak { display: flex; justify-content: space-between; font-family: var(--font-label); font-size: var(--text-caption);
  font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--label-ink); }
.aq { margin-top: var(--space-3); color: var(--body-ink); font-size: var(--text-small); }
.at { margin-top: var(--space-4); color: var(--body-ink); font-size: var(--text-small); white-space: pre-wrap; line-height: var(--leading-body); }

/* Offer: the $39 module grid */
.offer { display: grid; gap: var(--space-8); }
.offer h2 { max-width: 20ch; }
.offer .osub { color: var(--body-ink); max-width: 62ch; }
.ostart { padding: var(--space-5); border-radius: 12px; background: var(--card); border: 1px solid rgba(14,19,24,0.1); }
.osk { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--logo); }
.ostart p { margin-top: var(--space-2); color: var(--body-ink); font-size: var(--text-small); }
.ostart b { color: var(--ink); }

.mods { display: grid; gap: var(--space-5); }
@media (min-width: 760px) { .mods { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mods { grid-template-columns: repeat(3, 1fr); } }
.mcard { background: var(--card); border: 1px solid rgba(14,19,24,0.1); border-radius: 14px; padding: var(--space-6);
  box-shadow: 0 2px 10px rgba(14,19,24,0.04);
  transition: border-color var(--dur-fast) var(--ease-entrance); }
.mcard.lead { border-color: var(--logo); box-shadow: 0 8px 30px color-mix(in srgb, var(--logo) 14%, transparent); }
.mn { display: flex; justify-content: space-between; gap: var(--space-2); font-family: var(--font-label);
  font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--label-ink); }
.mcard.lead .mn span:last-child { color: var(--logo); }
.mcard h4 { margin-top: var(--space-3); font-size: var(--text-h4); }
.mcard p { margin-top: var(--space-2); font-size: var(--text-small); color: var(--body-ink); }
.mmeta { margin-top: var(--space-4); font-family: var(--font-label); font-size: var(--text-caption); color: var(--label-ink); }

.oanchor { color: var(--body-ink); font-size: var(--text-small); max-width: 68ch; }
.oanchor b { color: var(--ink); }

.obuy { display: grid; gap: var(--space-8); padding: var(--space-8); border-radius: 20px;
  background: var(--card); border: 1px solid rgba(14,19,24,0.1);
  box-shadow: 0 2px 10px rgba(14,19,24,0.04); }
@media (min-width: 800px) { .obuy { grid-template-columns: minmax(0,7fr) minmax(0,3fr); align-items: start; } }
.obuy h3 { font-size: var(--text-h3); margin-top: var(--space-2); }
.obuy p { margin-top: var(--space-3); color: var(--body-ink); font-size: var(--text-small); }
.obuy .tm-cta { margin-top: var(--space-5); }
.ofine { margin-top: var(--space-3); font-size: var(--text-caption); color: var(--label-ink); }

/* Two offers now, not one (2026-08-11): the $299/mo Monitoring subscription
   is the primary sell off the free check, and the $297 one-time Finding sits
   directly beneath it as the deliberate downsell. The hierarchy has to be
   readable at a glance without shouting, so it is carried by weight and the
   one chromatic note the palette allows -- the primary card keeps the lit
   card surface and gains a --logo edge (this is the live, ongoing, "yours"
   thing, which is exactly what --logo is reserved to mark); the downsell
   drops to the page field with no shadow, so it reads as the quieter,
   secondary choice rather than a competing pitch. */
.obuy { border-left: 3px solid var(--logo); }

/* The free call sits above both paid cards (2026-08-16). Measured: 89 leads
   produced 2 checkout clicks, and the site carried no way to book a call at
   all -- so the lowest-commitment action available to someone thirty seconds
   into learning they have a problem was to spend money. This band is the
   missing rung.

   The scheduler is embedded rather than linked out, so the booking happens on
   the result screen while the verdict is still on the page, instead of asking
   someone to leave and come back. That trades away click tracking -- what is
   inside a cross-origin iframe is not observable -- so the real booking count
   lives in 17hats, not here.

   It outranks the $299 card without a second accent colour: order, the word
   Free, and a low-alpha --logo wash. --logo already marks what is live and
   yours, and a booked conversation qualifies, so this is the same note at
   lower volume rather than a new one. */
.bookband { border-radius: 20px; padding: var(--space-8);
  background: linear-gradient(0deg, rgba(61,76,92,0.05), rgba(61,76,92,0.05)), var(--card);
  border: 1px solid rgba(14,19,24,0.1); border-left: 5px solid var(--logo);
  box-shadow: 0 2px 10px rgba(14,19,24,0.04); }
.bookband__head { max-width: 60ch; }
.bookband__head h3 { font-size: var(--text-h3); margin-top: var(--space-2); }
.bookband__head p { margin-top: var(--space-3); color: var(--body-ink); font-size: var(--text-small); }
.bookband__fine { list-style: none; margin: var(--space-4) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  font-size: var(--text-caption); color: var(--label-ink); }
.bookband__fine li { position: relative; padding-left: 14px; }
.bookband__fine li::before { content: ""; position: absolute; left: 0; top: 0.45em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--logo); }

/* The scheduler is third-party and sets its own height through iframeSizer,
   so this reserves a sane minimum and lets the sizer grow it rather than
   fighting it with a fixed height. */
.bookband__frame { margin-top: var(--space-6); border-radius: 14px; overflow: hidden;
  background: var(--paper); border: 1px solid rgba(14,19,24,0.1); min-height: 620px; }
.bookband__frame iframe { display: block; width: 100%; border: 0; min-height: 620px; }
.bookband__frame .ofine { padding: var(--space-6); }

/* PROOF BLOCK — added 2026-08-17. The result screen previously asked for money
   with no evidence on it at all; this is the firm's first published client
   outcome. Figures are VERIFIED and dated, attribution stated in the footer. */
.oproof { display: grid; gap: var(--space-6); padding: var(--space-8);
  border: 1px solid var(--mist); border-radius: 20px; background: var(--card); }
.oproof__head h3 { font-size: calc(var(--text-h3) * 0.92); margin-top: var(--space-3); max-width: 34ch; }
.oproof__sub { margin-top: var(--space-4); font-size: var(--text-small); color: var(--body-ink); }
.oproof__date { color: var(--label-ink); font-variant-numeric: tabular-nums; }
.oproof__figs { display: grid; gap: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--mist); }
@media (min-width: 720px) { .oproof__figs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); } }
.oproof__fig { display: grid; gap: var(--space-2); align-content: start; }
.oproof__num { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.3rem); font-weight: 800;
  letter-spacing: -0.02em; color: var(--logo); line-height: 1;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.oproof__lbl { font-size: var(--text-caption); line-height: 1.45; color: var(--body-ink); }
.oproof__foot { padding-top: var(--space-6); border-top: 1px solid var(--mist);
  font-size: var(--text-caption); line-height: 1.6; color: var(--label-ink); max-width: 76ch; }

/* OFFER ORDERING — ONE primary ask for every visitor: the $299/mo managed tier.
   Reverted 2026-08-17 (evening) from the tier-split, $39-first stack shipped
   that morning, on Ryan's call after a live read of every system.

   The split was not what failed, and neither was the price. Across 100 leads
   the screen produced 2 InitiateCheckouts and 0 sales, and Stripe shows no
   self-serve sale has EVER occurred at any price. Meanwhile the first ask had
   moved twice in six days while the traffic had never changed once. The
   arithmetic decides it: at $5.50 CPL a $39 tripwire needs ~200 raw leads to
   earn $39, so it cannot carry cold paid traffic at any take-rate; a $299/mo
   subscription at four-month retention clears the same acquisition cost roughly
   four times over. So $39 is demoted to a quiet last rung and the subscription
   is the ask, for every tier. Tier still decides the framing copy (OFFER_COPY
   in ai-check.js), which is where segmentation belongs.

   .offer is a grid, so this reorders without moving any DOM node (and so
   without touching the ids ai-check.js writes into).

   SUPERSEDED 2026-08-21: the one-time products stopped being sold. Watch
   now occupies the .obuy--alt primary slot, the $39 tripwire block was
   deleted outright, and the $297 Finding is no longer a standalone ask
   anywhere on this screen. .obuy--trip is retained only so the rule below
   cannot misorder a future block that reuses the class; nothing carries it.

   SUPERSEDED AGAIN 2026-08-22: Watch is $99/mo FLAT (the $7 first month and
   its WATCH7 coupon are retired), and $299/mo Visibility Monitoring is
   retired outright -- its card is gone from this screen, so the generic
   .obuy rule below now matches nothing. Watch is the single paid local ask.

   AND A REAL BUG, fixed the same day: this comment used to CLOSE right after
   "...writes into)." above, which left the SUPERSEDED paragraph sitting in
   the stylesheet as raw text. CSS error recovery then swallowed tokens until
   it could resync -- and what it ate was `.offer .oproof { order: 1 }`, which
   was absent from document.styleSheets entirely. It looked fine only because
   DOM order happened to put the proof block where order:1 intended, so any
   reorder inside .offer would have moved it with no visible cause. Found by
   reading the live CSSOM rather than the file. One comment, one close. */
.offer .oproof     { order: 1; }
.offer .obuy--alt  { order: 2; }                             /* Watch $99/mo — THE ask */
.offer #bookband   { order: 3; }                             /* the free call */
.offer .obuy:not(.obuy--alt):not(.obuy--trip) { order: 4; }  /* nothing carries this since Monitoring was retired 2026-08-22 */
.offer .obuy--trip { order: 5; }                             /* unused since 2026-08-21 */
.offer .oalt       { order: 6; }

/* FIRM MODE — the mid-market stack. Added 2026-08-19 with the reposition.
   Same grid, same DOM, same convention as the ordering above: a class on
   .offer re-orders and hides, so no JS moves a node and no id ai-check.js
   writes into can go missing. Default (no class) is the local ladder exactly
   as it shipped.

   In firm mode the free call leads, because the Diagnostic is sold by
   conversation and has no checkout to send anyone to. The three local price
   cards and the Local Engine band come out entirely rather than being
   demoted -- a $2-20M owner shown a $39 download is the message-match break
   this whole change exists to close. */
/* The Finding's module cards and the Local Engine anchor line both argue for
   products firm mode does not offer -- the anchor still had "$1,750 a month"
   on screen after the first pass of this change, which a price sweep caught. */
.offer--firm .mods,
.offer--firm .oanchor,
.offer--firm .obuy--trip,
.offer--firm .obuy:not(.obuy--alt):not(.obuy--trip):not(.obuy--firm),
.offer--firm .obuy--alt,
.offer--firm .oalt              { display: none; }
.offer--firm .oproof            { order: 1; }
.offer--firm #bookband          { order: 2; }
.offer--firm .obuy--firm        { order: 3; display: grid; }

/* The firm card borrows the promoted-ask emphasis rather than inventing a
   third card style. */
.obuy--firm { border-color: var(--logo); box-shadow: 0 10px 34px color-mix(in srgb, var(--logo) 14%, transparent); }
.obuy--firm .osk { color: var(--logo); }
.ofirmproof { margin-top: var(--space-4); font-size: var(--text-small); color: var(--label-ink); }
.ofirmproof b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* The segment switch. Quiet by design: it is a way across for the minority
   who need it, not a second call to action competing with the ask. */
.segswitch { margin-top: var(--space-5); font-size: var(--text-small); color: var(--label-ink); }
.seglink {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--logo);
  border-bottom: 1px solid color-mix(in srgb, var(--logo) 45%, transparent);
}
.seglink:hover { border-bottom-color: var(--logo); }

/* Emphasis follows the ask. The $297 card carries .obuy--alt, which is styled
   as a quiet alternate further down this file (it was the downsell until now),
   so its de-emphasis is undone here rather than by editing that base rule --
   .obuy--alt is the DOM hook ai-check.js and the markup both rely on, and
   renaming it to match its new job would touch more than it is worth. */
.offer .obuy--alt { background: var(--card); box-shadow: 0 2px 10px rgba(14,19,24,0.04);
  border: 1px solid rgba(14,19,24,0.1); border-left: 3px solid var(--logo); }
.offer .obuy--alt h3 { font-size: var(--text-h3); }
.offer .obuy--alt .oprice .amt { font-size: clamp(2.3rem, 1.8rem + 1.8vw, 3rem); color: var(--ink); }

/* The two demoted rungs lose their emphasis so there is only ever one primary. */
.offer .obuy:not(.obuy--alt):not(.obuy--trip),
.offer .obuy--trip { background: transparent; box-shadow: none;
  border: 1px solid rgba(14,19,24,0.12); border-left-width: 1px; border-left-color: rgba(14,19,24,0.12); }
.offer .obuy:not(.obuy--alt):not(.obuy--trip) h3,
.offer .obuy--trip h3 { font-size: calc(var(--text-h3) * 0.86); }
.offer .obuy:not(.obuy--alt):not(.obuy--trip) .oprice .amt,
.offer .obuy--trip .oprice .amt { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.4rem); color: var(--body-ink); }

.obuy--alt { background: transparent; box-shadow: none;
  border: 1px solid rgba(14,19,24,0.12); border-left-width: 1px; border-left-color: rgba(14,19,24,0.12); }
.obuy--alt .oprice .amt { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.4rem); color: var(--body-ink); }
.obuy--alt h3 { font-size: calc(var(--text-h3) * 0.86); }

/* Ghost CTA: same letterpress geometry as .tm-cta, inverted to an outline so
   the downsell's button cannot out-shout the primary's solid pill. */
.tm-cta--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tm-cta--ghost:hover { background: var(--ink); color: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--ink); } /* keep the inset: .tm-cta:hover would otherwise restore the big drop shadow */
.oprice { display: grid; justify-items: start; gap: var(--space-1); }
@media (min-width: 800px) { .oprice { justify-items: end; text-align: right; } }
.oprice .amt { font-family: var(--font-label); font-weight: 800; font-size: clamp(2.4rem, 1.8rem + 2vw, 3.2rem);
  color: var(--ink); font-variant-numeric: tabular-nums; }
.oprice .amtsub { font-size: var(--text-small); color: var(--label-ink); }

/* The buyer's own result, restated right at the point of decision. Diagnostic
   --bad, same as the rest of the loss language on this page — not invented
   urgency, just their own finding put where it counts. */
.obuynamed { margin-top: var(--space-3); font-size: var(--text-small); font-weight: 600; color: var(--bad); }

.oalt { font-size: var(--text-small); color: var(--label-ink); }
/* The middle rung, mentioned once at the highest-intent moment: a quiet line
   between the $39 primary and the inbox note — never a competing block. */
.omid { margin-bottom: var(--space-4); max-width: 62ch; color: var(--body-ink); }
.omid a { color: var(--logo); font-weight: 700;
  border-bottom: 1px solid color-mix(in srgb, var(--logo) 40%, transparent); }
.omid--small { max-width: 46ch; font-size: var(--text-caption); }

/* Secondary: Local Engine, a dark bookend panel before the footer. Colorless,
   per the dark-stage rule. Compact variant, added when the $39 System became
   the page's one dominant ask — same content, less padding, no pillar grid,
   so it reads as a footnote option rather than a third competing offer. */
.leband { background: var(--ink); border-radius: 20px; padding: var(--space-10); }
.leband--compact { padding: var(--space-6) var(--space-8); }
.leband--compact .leh { font-size: var(--text-h4, var(--text-body-lg)); }
.leband--compact .lesub { font-size: var(--text-small); }
.leband--compact .lecta { margin-top: var(--space-5); }
.lek { font-family: var(--font-label); font-size: var(--text-caption); font-weight: 600;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--slope); }
.leh { margin-top: var(--space-4); font-size: var(--text-h3); font-weight: 700; color: var(--paper); }
.leh b { color: var(--paper); }
.leh .lose { color: var(--slope); font-weight: 700; }
.lesub { margin-top: var(--space-4); color: var(--slope); max-width: 62ch; font-size: var(--text-body-lg); }
.lepillars { margin-top: var(--space-8); display: grid; gap: var(--space-6); }
@media (min-width: 760px) { .lepillars { grid-template-columns: repeat(3, 1fr); } }
.lep { padding-top: var(--space-4); border-top: 1px solid rgba(236,237,236,0.12); }
.lpn { font-family: var(--font-label); font-size: var(--text-caption); color: var(--slope); font-variant-numeric: tabular-nums; }
.lph { display: block; margin-top: var(--space-2); font-weight: 700; color: var(--paper); }
.lep p { margin-top: var(--space-2); font-size: var(--text-small); color: var(--slope); }
.lecta { margin-top: var(--space-8); display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.leband .tm-arrow { color: var(--paper); }
.leband .tm-arrow:hover { color: #fff; border-color: var(--paper); }
.lenote { font-size: var(--text-small); color: var(--slope); }

@media (prefers-reduced-motion: reduce) {
  .check-q::after { display: none; }
  .checkrun__title .dots::after { animation: none; content: "…"; width: auto; }
}
.no-js .check-q::after { display: none; }