/* The Hand-off · motion and clarity layer. © 2026 Mousa Batarseh. All rights reserved. */

/* ---------- header: no one-sided line ---------- */
.header { border-bottom: 0; }

/* ---------- hero ---------- */
.hero.hx { min-height: 0; display: block; overflow: visible; padding-bottom: var(--s-8); }
.hero.hx::before { content: none; }
.hx-top { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-5) var(--s-8); align-items: end; padding-top: var(--s-6); }
.hx-eyebrow { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--grey-500); }
.hx-dot { width: 10px; height: 10px; background: var(--red); flex: none; }
.hx-h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 5.6vw, 88px); line-height: .92; letter-spacing: -.005em; font-variation-settings: "opsz" 96; max-width: 20ch; margin: 0; text-wrap: balance; }
.hx-lead { font-size: 20px; line-height: 1.5; max-width: 46ch; margin: 0 0 .4em; text-wrap: pretty; }

.hx-journey { margin-top: var(--s-6); }
.hx-stage { position: relative; height: 390px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.hx-panel { position: relative; padding: var(--s-5) var(--s-6); }
.hx-site { background: var(--grey-100); }
.hx-menu { background: var(--black); color: var(--white); }
.hx-tag { margin: 0; display: flex; align-items: baseline; gap: var(--s-3); font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1; font-variation-settings: "opsz" 40; }
.hx-tag span { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--grey-500); letter-spacing: .06em; }
.hx-menu .hx-tag span, .hx-menu .hx-sub { color: var(--grey-400); }
.hx-sub { margin: var(--s-2) 0 0; font-size: 15px; color: var(--grey-500); max-width: 44ch; }
.hx-seam { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; }
.hx-seam span { display: block; background: var(--white); color: var(--black); border: 1px solid var(--black); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; padding: 6px 10px; writing-mode: vertical-rl; transform: rotate(180deg); }
.hx-track { position: absolute; left: 25%; right: 25%; top: 50%; height: 2px; margin-top: -1px; z-index: 1; overflow: hidden; }
.hx-track i { display: block; height: 100%; width: 100%; background: repeating-linear-gradient(90deg, var(--grey-500) 0 8px, transparent 8px 14px); transform-origin: left center; transform: scaleX(0); }

.hx-card { position: absolute; z-index: 2; left: calc(25% - 150px); top: 50%; width: 300px; transform: translateY(-50%); padding: var(--s-4) var(--s-4) var(--s-4); display: grid; gap: var(--s-2); align-content: start; will-change: transform, clip-path; }
.hx-light { background: var(--white); color: var(--black); border: 1px solid var(--grey-200); }
.hx-dark { background: var(--grey-800); color: var(--white); border: 1px solid var(--grey-700); clip-path: inset(0 0 0 100%); }
.hx-kind { display: flex; justify-content: space-between; gap: var(--s-3); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--grey-500); }
.hx-dark .hx-kind { color: var(--grey-400); }
.hx-name { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.25; min-height: 2.5em; }
.hx-price { margin: 0; display: flex; align-items: baseline; gap: var(--s-2); }
.hx-price b { font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 1; font-variation-settings: "opsz" 48; font-variant-numeric: tabular-nums; }
.hx-price small { font-size: 13px; color: var(--grey-500); }
.hx-dark .hx-price small { color: var(--grey-400); }
.hx-buy { margin: var(--s-1) 0 0; background: var(--green); color: var(--black); text-align: center; font-weight: 700; font-size: 14px; letter-spacing: .06em; padding: 12px; transform-origin: center; }
.hx-chip { justify-self: start; margin: var(--s-1) 0 0; background: var(--red); color: var(--white); font-family: var(--font-mono); font-size: 12px; font-weight: 700; padding: 6px 10px; transform-origin: left center; }
.hx-dark.is-gone .hx-name { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; font-variation-settings: "opsz" 40; letter-spacing: .01em; }
.hx-dark.is-gone .hx-price { display: none; }
.hx-cursor { position: absolute; z-index: 4; left: 0; top: 0; opacity: 0; pointer-events: none; }
.hx-ring { position: absolute; z-index: 4; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 2px solid var(--black); border-radius: 50%; opacity: 0; pointer-events: none; }

.hx-steps { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.hx-steps li { display: grid; grid-template-columns: 32px 1fr; gap: var(--s-3); align-items: start; font-size: 15px; line-height: 1.45; color: var(--grey-400); transition: color var(--dur-ui) var(--ease-out); }
.hx-n { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--grey-400); font-family: var(--font-mono); font-size: 13px; font-weight: 700; transition: background var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out); }
.hx-steps li.is-on { color: var(--black); }
.hx-steps li.is-on .hx-n { background: var(--black); border-color: var(--black); color: var(--white); }
.hx-pause { margin-top: var(--s-4); font: 600 13px/1 var(--font-text); background: transparent; border: 1px solid var(--grey-200); padding: 10px 14px; cursor: pointer; }
.hx-pause:hover { border-color: var(--black); }
.hx-pause:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.hx-stats { margin-top: var(--s-8); display: grid; grid-template-columns: repeat(3, 1fr) 1.3fr; gap: 1px; background: var(--grey-200); border: 1px solid var(--grey-200); }
.hx-stat, .hx-cta { background: var(--white); padding: var(--s-5) var(--s-6); display: grid; align-content: start; gap: var(--s-2); }
.hx-stat p { margin: 0; font-size: 15px; color: var(--grey-500); max-width: 26ch; }
.hx-stat .hx-big { color: var(--black); display: flex; align-items: baseline; gap: var(--s-2); }
.hx-big b { font-family: var(--font-display); font-weight: 800; font-size: 72px; line-height: .9; font-variation-settings: "opsz" 72; font-variant-numeric: tabular-nums; }
.hx-stat:first-child .hx-big b, .hx-stat:nth-child(3) .hx-big b { color: var(--red); }
.hx-big span { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--grey-500); }
.hx-cta { align-content: center; gap: var(--s-3); }
.hx-cta .btn { width: 100%; justify-content: center; text-align: center; }
.hx-cta .small { margin: 0; }

@media (max-width: 1100px) {
  .hx-stats { grid-template-columns: repeat(3, 1fr); }
  .hx-cta { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .hx-cta .small { grid-column: 1 / -1; }
  .hx-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 834px) {
  .hx-top { grid-template-columns: 1fr; padding-top: var(--s-7); }
}
@media (max-width: 700px) {
  .hero.hx { padding-bottom: var(--s-7); }
  .hx-h1 { font-size: clamp(44px, 12.5vw, 64px); }
  .hx-lead { font-size: 18px; }
  .hx-journey { margin-top: var(--s-6); }
  .hx-stage { height: 540px; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; margin: 0 calc(var(--margin) * -1); }
  .hx-panel { padding: var(--s-4); }
  .hx-tag { font-size: 26px; }
  .hx-sub { display: none; }
  .hx-seam span { writing-mode: horizontal-tb; transform: none; }
  .hx-track { left: 50%; right: auto; top: 25%; bottom: 25%; width: 2px; height: auto; margin: 0 0 0 -1px; }
  .hx-track i { background: repeating-linear-gradient(180deg, var(--grey-500) 0 8px, transparent 8px 14px); transform-origin: center top; transform: scaleY(0); }
  .hx-card { left: 50%; top: 25%; width: min(300px, calc(100% - 32px)); transform: translate(-50%, -50%); }
  .hx-dark { clip-path: inset(100% 0 0 0); }
  .hx-card { padding: var(--s-3); gap: 6px; }
  .hx-name { font-size: 15px; min-height: 0; }
  .hx-price b { font-size: 34px; }
  .hx-buy { padding: 9px; font-size: 13px; }
  .hx-dark.is-gone .hx-name { font-size: 28px; }
  .hx-steps { grid-template-columns: 1fr; gap: var(--s-3); }
  .hx-stats { grid-template-columns: 1fr; }
  .hx-cta { grid-template-columns: 1fr; }
  .hx-big b { font-size: 60px; }
}

/* ---------- scroll reveals (initial states set by JS only, so no-JS shows everything) ---------- */
.mx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.mx-wi { display: inline-block; will-change: transform; }

/* tempting fixes: a red strike draws through each title once in view */
.not h3 { position: relative; justify-self: start; }
.not h3::after { content: ""; position: absolute; left: 0; top: 52%; height: 3px; width: 100%; background: var(--red); transform: scaleX(var(--strike, 0)); transform-origin: left center; }

/* mechanism: the gap between the two systems pulses red once both sides are in */
.mech .gap img { transition: transform var(--dur-beat) var(--ease-out); }
.mech.is-in .gap img { animation: mx-pulse 1.8s var(--ease-inout) 0.6s 2; }
@keyframes mx-pulse { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.08); } }

/* dividers drawn as full boxes, never one-sided lines */
.fixes { gap: 1px; background: var(--grey-200); }
.fix { border-top: 0; background: var(--white); }
.metrics { gap: 1px; background: var(--grey-200); }
.metric, .metric:nth-child(n) { border: 0; background: var(--white); }
.works { gap: 1px; background: var(--grey-200); }
.work { border-top: 0; background: var(--white); }
.price-sides { gap: 1px; background: var(--grey-200); }
.price-side + .price-side { border-left: 0; }
.on-black .metrics, .on-black .works, .on-black .fixes { background: var(--grey-700); }

/* ledger download sits clear of the demo box */
.ledger-download { margin-top: var(--s-5); }

@media (prefers-reduced-motion: reduce) {
  .not h3::after { --strike: 1; }
  .mech.is-in .gap img { animation: none; }
  .hx-steps li { color: var(--black); }
}
.hx-ghost { z-index: 2; }

/* ---------- hero cards carry the real product photo ---------- */
@media (min-width: 701px) { .hx-card { width: 320px; left: calc(25% - 160px); } }
.hx-row { display: grid; grid-template-columns: 72px 1fr; gap: var(--s-3); align-items: center; }
.hx-txt { display: grid; gap: var(--s-1); min-width: 0; }
.hx-row .hx-name { min-height: 0; font-size: 16px; }
.hx-ph { position: relative; width: 72px; height: 72px; background: var(--grey-100); display: grid; place-items: center; overflow: hidden; }
.hx-dark .hx-ph { background: #262626; }
.hx-img { width: 92%; height: 92%; object-fit: contain; }
.hx-void { display: none; position: absolute; inset: 8px; border: 1px dashed var(--grey-500); color: var(--grey-400); font-family: var(--font-display); font-weight: 800; font-size: 26px; place-items: center; }
.hx-dark.is-gone .hx-img { display: none; }
.hx-dark.is-gone .hx-void { display: grid; }
.hx-dark.is-gone .hx-row { align-items: center; }

/* ---------- product wall ---------- */
.wall { padding-top: var(--s-9); }
.wl-head { display: grid; grid-template-columns: 6fr 5fr; gap: var(--s-5) var(--s-8); align-items: end; }
.wl-head .hx-eyebrow { grid-column: 1 / -1; }
.wl-head .h2 { margin: 0; max-width: 18ch; }
.wl-lead { margin: 0; max-width: 46ch; }
.wl-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-7); }
.wl-filters button { font: 600 14px/1 var(--font-text); background: var(--white); color: var(--black); border: 1px solid var(--grey-200); padding: 12px 16px; cursor: pointer; display: inline-flex; gap: var(--s-2); align-items: center; transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.wl-filters button span { font-family: var(--font-mono); font-size: 12px; color: var(--grey-500); }
.wl-filters button:hover { border-color: var(--black); }
.wl-filters button.is-on { background: var(--black); color: var(--white); border-color: var(--black); }
.wl-filters button.is-on span { color: var(--grey-400); }
.wl-filters button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wl-grid { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1px; background: var(--grey-200); border: 1px solid var(--grey-200); }
.wl-tile { background: var(--white); display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.wl-tile.is-hidden { display: none; }
.wl-img { position: relative; margin: 0; aspect-ratio: 1; background: var(--grey-100); display: grid; place-items: center; overflow: hidden; }
.wl-img img { width: 76%; height: 76%; object-fit: contain; transition: transform 700ms var(--ease-out); }
.wl-tile:hover .wl-img img { transform: scale(1.07) rotate(-3deg); }
.nf .wl-img img { filter: grayscale(1); opacity: .35; }
.nf .wl-img::after { content: "PRODUCT NOT FOUND"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); background: var(--red); color: var(--white); font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: .02em; padding: 6px 10px; white-space: nowrap; }
.wl-body { padding: var(--s-3) var(--s-4) var(--s-4); display: grid; gap: 6px; align-content: start; }
.wl-meta { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--grey-500); }
.wl-chip { padding: 3px 7px; color: var(--white); background: var(--black); }
.nf .wl-chip { background: var(--red); }
.ok .wl-chip { background: var(--green); color: var(--black); }
.wl-name { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.wl-price { margin: 2px 0 0; display: flex; align-items: baseline; gap: var(--s-2); }
.wl-price s { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--grey-400); }
.wl-price b { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1; color: var(--red); }
.wl-price b.same { color: var(--black); }
.wl-price span { font-size: 12px; color: var(--grey-500); }
.wl-what { margin: 0; font-size: 13px; color: var(--grey-500); }
.wl-note { margin-top: var(--s-5); }
@media (max-width: 834px) { .wl-head { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .wall { padding-top: var(--s-8); }
  .wl-grid { grid-template-columns: 1fr 1fr; }
  .wl-body { padding: var(--s-3); }
  .wl-price b { font-size: 26px; }
  .nf .wl-img::after { font-size: 15px; }
}

/* ---------- 77 buy buttons, grouped by page ---------- */
.gx-links { margin: var(--s-5) 0 0; padding: var(--s-5); border: 1px solid var(--grey-700); display: grid; gap: 10px; }
.gx-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-2); font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--white); }
.gx-legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.gx-legend i, .gx-cells i { display: inline-block; width: 16px; height: 16px; background: var(--grey-700); }
.gx-row { display: grid; grid-template-columns: 170px 1fr; gap: var(--s-3); align-items: center; }
.gx-page { font-family: var(--font-mono); font-size: 11px; color: var(--grey-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-cells { display: flex; flex-wrap: wrap; gap: 4px; }
.gx-cells i { cursor: help; }
i.ok { background: var(--green); }
i.dead { background: var(--red); }
i.df { background: var(--white); }
i.nf { background: var(--red); }
.gx-links .label, .mp .label { margin-top: var(--s-2); color: var(--grey-400); }
@media (max-width: 700px) { .gx-row { grid-template-columns: 1fr; gap: 4px; } .gx-links { padding: var(--s-4); } }

/* ---------- state tile map ---------- */
.mp { margin: var(--s-5) 0 0; padding: var(--s-5); border: 1px solid var(--grey-700); }
.mp-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.mp-t { aspect-ratio: 1; display: grid; place-items: center; background: #1c1c1c; color: #4a4a4a; font-family: var(--font-mono); font-size: 10px; font-weight: 700; }
.mp-t.ok { background: var(--green); color: var(--black); cursor: help; }
.mp-t.df { background: var(--white); color: var(--black); cursor: help; }
.mp-t.nf { background: var(--red); color: var(--white); cursor: help; }
.mp-legend { margin: var(--s-4) 0 0; }
@media (max-width: 700px) { .mp { padding: var(--s-3); } .mp-t { font-size: 8px; } .mp-grid { gap: 3px; } .hx-row { grid-template-columns: 56px 1fr; } .hx-ph { width: 56px; height: 56px; } }
/* photo areas sit on white so product shots with their own white backdrop blend in */
.wl-img { background: var(--white); }
.hx-light .hx-ph { background: var(--white); border: 1px solid var(--grey-200); }
.wl-meta { line-height: 1.2; }
.wl-chip { white-space: nowrap; }
@media (max-width: 700px) { .wl-meta { flex-direction: column; align-items: flex-start; gap: 6px; } }
.wl-head .h2 { max-width: 22ch; }
.wl-grid { background: var(--white); border: 0; gap: 0; }
.wl-tile { outline: 1px solid var(--grey-200); }

/* ---------- hero: steps above the stage, more air under the text ---------- */
.hx-journey { margin-top: var(--s-8); }
.hx-steps { margin: 0 0 var(--s-5); }
@media (max-width: 700px) { .hx-journey { margin-top: var(--s-7); } .hx-steps { margin-bottom: var(--s-4); } }

/* ---------- one rhythm between sections: the same gap everywhere ---------- */
:root { --sec: 128px; }
@media (max-width: 700px) { :root { --sec: 80px; } }
#main-content section.section, #main-content section#symptoms { padding-top: var(--sec) !important; padding-bottom: 0 !important; }
#main-content section.hero.hx { padding-bottom: 0; }
#main-content section.section.on-black { padding-bottom: var(--sec) !important; margin-top: var(--sec); }
#main-content section#about { padding-bottom: var(--sec) !important; }

/* ---------- start heading: two sentences, one per line, each about half the page ---------- */
#start .h2.two-line { max-width: none !important; font-size: clamp(30px, 3.8vw, 55px); line-height: 1.02; }
.two-line .ln { display: block; }
@media (max-width: 700px) { #start .h2.two-line { font-size: clamp(26px, 7.2vw, 34px); } }

/* ---------- Hand-off Check: controls ride along like a drawer while results scroll ---------- */
@media (min-width: 835px) {
  #check .demo { align-items: start; }
  #check .demo .controls { position: sticky; top: calc(var(--header-h-min) + var(--s-5)); }
}

/* ---------- readability floor: no text under 15px anywhere ---------- */
.header .checked, footer :is(p, a, small, span) { font-size: 15px !important; }
#main-content :is(td, th, caption, dt, dd, label, small, figcaption, button, .label, .chip, .meta, .mono, .repro, .hx-eyebrow, .hx-kind, .hx-tag span, .hx-n, .hx-buy, .hx-chip, .hx-pause, .hx-price small, .hx-seam span, .wl-chip, .wl-what, .wl-meta, .wl-price span, .gx-page, .gx-legend, .mp-t, .vcap .small) { font-size: 15px !important; }
.mp-t { font-size: 15px !important; letter-spacing: -.02em; }
@media (max-width: 700px) { .mp-grid { gap: 2px; } .mp { padding: var(--s-2); } .mp-t { font-size: 15px !important; letter-spacing: -.06em; } }
.gx-row { grid-template-columns: 210px 1fr; }
.hx-n { width: 34px; height: 34px; }
.hx-steps li { grid-template-columns: 34px 1fr; }
.wl-filters button span { font-size: 15px !important; }

/* ---------- hero stage: bigger cards ---------- */
@media (min-width: 701px) {
  .hx-stage { height: 560px; }
  .hx-card { width: 480px; left: calc(25% - 240px); padding: var(--s-5); gap: var(--s-3); }
  .hx-kind { font-size: 16px !important; }
  .hx-row { grid-template-columns: 120px 1fr; gap: var(--s-4); }
  .hx-ph { width: 120px; height: 120px; }
  .hx-row .hx-name { font-size: 22px; }
  .hx-price b { font-size: 68px; }
  .hx-price small { font-size: 17px !important; }
  .hx-buy { font-size: 18px !important; padding: 18px; }
  .hx-chip { font-size: 17px !important; padding: 9px 14px; }
  .hx-void { font-size: 40px; }
  .hx-dark.is-gone .hx-name { font-size: 46px; }
}
@media (max-width: 700px) {
  .hx-stage { height: 720px; }
  .hx-card { width: min(360px, calc(100% - 32px)); top: calc(25% + 30px); }
  .hx-row { grid-template-columns: 76px 1fr; }
  .hx-ph { width: 76px; height: 76px; }
  .hx-row .hx-name { font-size: 17px; }
  .hx-price b { font-size: 44px; }
  .hx-buy { font-size: 15px !important; padding: 12px; }
}

/* ---------- mechanism heading: one line ---------- */
#mechanism h2 { max-width: none !important; white-space: nowrap; font-size: min(56px, calc((100vw - 32px) / 21)); line-height: 1.05; }


/* ---------- symptoms rail: five symptoms wired to one cause ---------- */
.symptoms .left.sy { align-content: center; gap: 22px; padding-top: 48px; padding-bottom: 48px; }
.sy-eye { margin: 0; font: 600 15px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--grey-500); display: flex; gap: 8px; align-items: baseline; }
.sy-eye .sy-now { color: var(--black); font-size: 15px; }
.symptoms .left.sy .body { margin: 0; max-width: 44ch; }
.sy-map { position: relative; padding-left: 34px; }
.sy-wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sy-wire path { fill: none; stroke: var(--grey-200); stroke-width: 2; transition: stroke .3s ease; }
.sy-wire path.on { stroke: var(--red); }
.sy-wire circle { fill: var(--white); stroke: var(--grey-400); stroke-width: 2; transition: fill .3s ease, stroke .3s ease; }
.sy-wire circle.on { fill: var(--red); stroke: var(--red); }
.symptoms .left .sy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: none; }
.symptoms .left .sy-list li { display: block; font: inherit; color: inherit; }
.symptoms .left .sy-list li::before { content: none; }
.sy-list a { position: relative; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; min-height: 58px; padding: 10px 16px; border: 1px solid var(--grey-200); background: var(--white); color: var(--grey-500); text-decoration: none; transition: background .3s cubic-bezier(.22,1,.36,1), color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.22,1,.36,1); }
.sy-list a:hover { border-color: var(--black); color: var(--black); }
.sy-k { font: 600 15px/1 var(--font-mono); }
.sy-t { font: 600 18px/1.2 var(--font-text); letter-spacing: -.01em; }
.sy-v { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; font-variation-settings: "opsz" 72; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sy-v small { display: block; font: 600 15px/1.2 var(--font-mono); letter-spacing: 0; color: inherit; opacity: .8; margin-top: 3px; }
.sy-list li.seen a { color: var(--grey-600, #555); }
.sy-list li[aria-current="step"] a { background: var(--black); border-color: var(--black); color: var(--white); transform: translateX(6px); }
.sy-list li[aria-current="step"] .sy-v { color: #FF5A4E; }
.sy-cause { position: relative; margin-top: 20px; padding: 18px 20px 20px; background: var(--red); color: var(--white); }
.sy-cl { display: block; font: 600 15px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .9; margin-bottom: 8px; }
.sy-cause p { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2vw, 30px); line-height: 1.05; font-variation-settings: "opsz" 72; }
@media (max-height: 820px) and (min-width: 1025px) { .symptoms .left.sy { gap: 14px; } .sy-list a { min-height: 50px; padding: 7px 14px; } .sy-v { font-size: 26px; } .sy-cause { margin-top: 12px; padding: 14px 18px; } .symptoms .left.sy .body { display: none; } }
@media (max-width: 1024px) { .sy-list li[aria-current="step"] a { transform: none; } .sy-map { padding-left: 28px; } }
@media (max-width: 600px) { .sy-list a { grid-template-columns: 28px 1fr auto; gap: 10px; padding: 10px 12px; } .sy-t { font-size: 16px; } .sy-v { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .sy-list a, .sy-wire path, .sy-wire circle { transition: none; } .sy-list li[aria-current="step"] a { transform: none; } }

/* ---------- prototype call-to-action at the end of the Fix section ---------- */
.ah-cta { margin-top: var(--s-7, 56px); display: grid; grid-template-columns: 5fr 7fr; border: 2px solid var(--black); background: var(--white); }
.ah-cta__txt { padding: 40px 40px 44px; display: grid; align-content: center; gap: 16px; }
.ah-cta__eye { margin: 0; display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--black); }
.ah-cta__eye::before { content: ""; width: 10px; height: 10px; background: #6DA738; border-radius: 50%; box-shadow: 0 0 0 0 rgba(109,167,56,.55); animation: ahPulse 2.4s ease-out infinite; }
@keyframes ahPulse { 70% { box-shadow: 0 0 0 10px rgba(109,167,56,0); } 100% { box-shadow: 0 0 0 0 rgba(109,167,56,0); } }
.ah-cta__h { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 3.2vw, 48px); line-height: .98; font-variation-settings: "opsz" 72; }
.ah-cta__p { margin: 0; font-size: 17px; line-height: 1.5; color: #333; max-width: 46ch; }
.ah-cta__btn { justify-self: start; margin-top: 8px; display: inline-flex; align-items: center; gap: 14px; background: var(--black); color: var(--white); padding: 18px 26px; font: 600 17px/1 var(--font-text); text-decoration: none; transition: background .25s ease, gap .25s cubic-bezier(.22,1,.36,1); }
.ah-cta__btn span { font-size: 20px; transition: transform .25s cubic-bezier(.22,1,.36,1); }
.ah-cta__btn:hover { background: var(--red); } .ah-cta__btn:hover span { transform: translateX(5px); }
.ah-cta__btn:focus-visible, .ah-cta__shot:focus-visible { outline: 3px solid var(--focus, #1F4BFF); outline-offset: 3px; }
.ah-cta__shot { position: relative; display: block; overflow: hidden; background: #111; border: 0 solid transparent; }
.ah-cta__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; transform: scale(1.001); transition: transform .6s cubic-bezier(.22,1,.36,1); }
.ah-cta__shot:hover img { transform: scale(1.035); }
.ah-cta__tog { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: inline-flex; border: 1px solid #fff; background: #111; font: 600 15px/1 var(--font-mono); }
.ah-cta__tog i { font-style: normal; color: #fff; padding: 9px 14px; }
.ah-cta__tog i.on { background: #1F4BFF; }
@media (max-width: 900px) { .ah-cta { grid-template-columns: 1fr; } .ah-cta__shot { order: -1; aspect-ratio: 16 / 10; } .ah-cta__txt { padding: 26px 20px 28px; } .ah-cta__btn { justify-self: stretch; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .ah-cta__eye::before { animation: none; } .ah-cta__shot img, .ah-cta__btn span { transition: none; } }

/* specificity fixes: beat .elementor a and .symptoms .left li a */
.symptoms .left .sy-list li a { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; }
@media (max-width: 600px) { .symptoms .left .sy-list li a { grid-template-columns: 28px 1fr auto; gap: 10px; } }
.elementor .symptoms .left .sy-list li a { color: var(--grey-500); }
.elementor .symptoms .left .sy-list li.seen a { color: var(--grey-600, #555); }
.elementor .symptoms .left .sy-list li a:hover { color: var(--black); }
.elementor .symptoms .left .sy-list li[aria-current="step"] a { color: var(--white); }
.elementor .ah-cta a.ah-cta__btn, .ah-cta a.ah-cta__btn { color: var(--white); }
.elementor .ah-cta a.ah-cta__btn:hover, .ah-cta a.ah-cta__btn:hover { color: var(--white); background: var(--red); }

/* Overpass: beat the site-wide Elementor kit (.elementor-kit-4) on this page only */
body.elementor-kit-4 { font-family: var(--font-text); }
#mechanism h2 { font-size: min(56px, calc((100vw - 32px) / 23.5)) !important; }
/* Overpass metrics: taller ascenders than the old condensed face */
.proof .lab { line-height: 1.15; }
.symptoms .left.sy .h2 { font-size: clamp(36px, 3.3vw, 48px); line-height: 1.02; }
@media (max-height: 940px) and (min-width: 1025px) { .symptoms .left.sy { gap: 14px; } .sy-list a { min-height: 50px; padding: 7px 14px; } .sy-v { font-size: 26px; } .sy-cause { margin-top: 12px; padding: 14px 18px; } .symptoms .left.sy .body { font-size: 15px; } }

/* ===== round 6 design notes (Oct 25) ===== */
/* 1. whole site 10% wider: 1280 -> 1408, tighter side margins on desktop */
:root { --container: 1408px; }
@media (min-width: 835px) { :root { --margin: 24px; } }

/* 2. hero headline: three lines at most */
.hx-h1 { font-size: clamp(40px, 4.5vw, 72px); line-height: .95; max-width: none !important; }
@media (min-width: 1101px) { .hx-top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) !important; } }
@media (max-width: 700px) { .hx-h1 { font-size: clamp(36px, 10vw, 52px); } }

/* 3. hero steps as cards: the key idea, read first */
.hx-steps { gap: 16px; }
.hx-steps li { grid-template-columns: 1fr !important; align-content: start; gap: 18px; padding: 22px 22px 26px; border: 1px solid var(--grey-200); background: var(--white); font-size: 18px; line-height: 1.4; font-weight: 500; color: #3A3A3A; min-height: 172px; transition: background .4s cubic-bezier(.22,1,.36,1), color .4s ease, border-color .4s ease; }
.hx-steps li .hx-n { width: 46px !important; height: 46px !important; font-size: 18px; font-weight: 600; border-color: var(--grey-400); }
.hx-steps li.is-on { background: var(--black); border-color: var(--black); color: var(--white); }
.hx-steps li.is-on .hx-n { background: var(--white); border-color: var(--white); color: var(--black); }
@media (max-width: 1100px) { .hx-steps li { min-height: 0; } }
@media (max-width: 700px) { .hx-steps li { padding: 18px 18px 20px; font-size: 17px; gap: 12px; grid-template-columns: 40px 1fr !important; align-items: center; } .hx-steps li .hx-n { width: 40px !important; height: 40px !important; } }

/* 4. product wall: "Not found" fits one line, red prices keep their size */
.wl-tile.nf .wl-price b { font-size: 22px; white-space: nowrap; }
@media (max-width: 700px) { .wl-tile.nf .wl-price b { font-size: 19px; } }

/* 5. tempting fixes: strike each line of the title, never across the box */
.not h3::after { content: none; }
.not h3 { text-decoration-line: line-through; text-decoration-thickness: 3px; text-decoration-color: rgb(194 0 0 / var(--strike, 0)); text-decoration-skip-ink: none; }
@media (prefers-reduced-motion: reduce) { .not h3 { --strike: 1; } }

/* 6. how this was checked: pinned left column, the list scrolls past */
@media (min-width: 835px) { #method .two { align-items: start; } #method .two > div:first-child { position: sticky; top: calc(var(--header-h, 72px) + 32px); } }

/* 7. the ledger: show what is inside before the download */
.lg { margin-top: var(--s-7, 56px); display: grid; grid-template-columns: 4fr 8fr; border: 2px solid var(--black); background: var(--white); }
.lg-txt { padding: 36px 36px 40px; display: grid; align-content: start; gap: 16px; }
.lg-eye { margin: 0; font: 600 15px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--grey-500); }
.lg-h { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 2.6vw, 40px); line-height: 1; }
.lg-p { margin: 0; font-size: 17px; line-height: 1.5; color: #333; }
.ah-cta a.ah-cta__btn, .lg a.lg-btn { color: var(--white); }
.lg a.lg-btn { justify-self: start; margin-top: 6px; display: inline-flex; align-items: center; gap: 14px; background: var(--black); padding: 17px 24px; font: 600 17px/1 var(--font-text); text-decoration: none; transition: background .25s ease; }
.lg a.lg-btn span { font: 500 15px/1 var(--font-mono); opacity: .75; }
.lg a.lg-btn:hover { background: var(--red); }
.lg a.lg-btn:focus-visible { outline: 3px solid var(--focus, #1F4BFF); outline-offset: 3px; }
.lg-note { margin: 0; font-size: 15px; line-height: 1.45; color: var(--grey-500); }
.lg-book { display: grid; grid-template-rows: 1fr auto; background: #F4F4F2; border: 0 solid transparent; }
.lg-grid { list-style: none; margin: 0; padding: 1px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--grey-200); }
.lg-grid li::before { content: none; }
.lg-s { margin: 0; padding: 20px 22px 22px; background: var(--white); display: grid; align-content: start; gap: 8px; transition: background .3s ease, color .3s ease; }
.lg-s:hover { background: var(--black); color: var(--white); }
.lg-s:hover .lg-sd, .lg-s:hover .lg-sn { color: #BDBDBD; }
.lg-sn { margin: 0; font: 600 15px/1 var(--font-mono); color: var(--grey-500); }
.lg-sv { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.lg-sv b { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; }
.lg-sv span { font-size: 15px; font-weight: 600; }
.lg-sd { margin: 0; font-size: 15px; line-height: 1.45; color: #555; }
.lg-tabs { display: flex; flex-wrap: wrap; gap: 0; padding: 0 1px 1px; background: var(--grey-200); }
.lg-tabs span { padding: 9px 14px; font: 500 15px/1 var(--font-mono); background: #EDEDEA; color: var(--grey-500); border: 1px solid var(--grey-200); margin: 0 -1px -1px 0; }
.lg-tabs span.on { background: var(--white); color: var(--black); font-weight: 600; }
@media (max-width: 1100px) { .lg { grid-template-columns: 1fr; } .lg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .lg-txt { padding: 24px 20px 26px; } .lg-grid { grid-template-columns: 1fr; } .lg a.lg-btn { justify-self: stretch; justify-content: center; } .lg-tabs { display: none; } }
@media (prefers-reduced-motion: reduce) { .lg-s, .lg a.lg-btn { transition: none; } }
@media (max-width: 600px) { .lg a.lg-btn { white-space: nowrap; font-size: 16px; padding: 16px 14px; gap: 10px; } }

/* study / prototype switch in the header (round 7) */
.header .hd-r { display: inline-flex; align-items: center; gap: 20px; justify-self: end; }
.header .sw { display: inline-flex; border: 1px solid var(--black); }
.elementor .header .sw a, .header .sw a { display: block; padding: 10px 14px; font: 600 15px/1 var(--font-text); color: var(--black); text-decoration: none; background: var(--white); transition: background .25s ease, color .25s ease; white-space: nowrap; }
.elementor .header .sw a:hover, .header .sw a:hover { background: #F0F0F0; }
.elementor .header .sw a[aria-current="page"], .header .sw a[aria-current="page"] { background: var(--black); color: var(--white); }
.header .sw a:focus-visible { outline: 3px solid var(--focus, #1F4BFF); outline-offset: 2px; }
@media (max-width: 1360px) { .header .hd-r .checked { display: none; } }
@media (max-width: 900px) { .header .container { grid-template-columns: auto 1fr auto auto; gap: 12px; } .header .hd-r { display: inline-flex; } }
@media (max-width: 600px) { .header .brand .name { display: none; } .elementor .header .sw a, .header .sw a { padding: 10px 10px; } }