/* =====================================================================
   Leakproof design kit · landing.css  (the landing page only: _landing-views.js)
   Loads after tokens.css + kit.css + site.css and before mockups.css (sitePage styles).
   Every window is the kit's Window (mockups.css); tags, pins and counts are the kit's
   Tag / MarkerBadge / CountsBar / CountsKey (kit.css). Only tokens: no raw colours, and font
   sizes from the locked scale (tokens.css) except a few clamp()s for the display moments.
   The meaning system: the red pen marks leaks only (plus the hero's "leaks" circle); calm blue is
   upside (the worksheet's estimate); decorative handwriting and every tick are ink.
   ===================================================================== */

/* ---------- the rhythm: shorter gaps between sections than the other pages ---------- */
.landing .sec { padding-block: clamp(56px, 6.5vw, 84px); }

/* ---------- URL forms (hero, the strip, the worksheet, final) ---------- */
.urlform { max-width: 620px; }
.urlform-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.urlform-row { display: flex; align-items: stretch; background: var(--lp-sheet); box-shadow: inset 0 0 0 1.5px var(--lp-ink); border-radius: var(--lp-r-1); padding: 6px; gap: 6px; transition: box-shadow .15s ease; position: relative; }
.urlform-row:focus-within { box-shadow: inset 0 0 0 2px var(--lp-accent), 0 0 0 4px color-mix(in srgb, var(--lp-accent) 16%, transparent); }
.urlform input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--lp-ink); font: 500 var(--lp-t-lede)/1.2 var(--lp-f-body); padding: 12px 8px 12px 14px; outline: none; }
.urlform input::placeholder { color: var(--lp-ink-3); }
.urlform .btn { padding-inline: 22px; }
.urlform-hint { margin-top: 12px; font-size: var(--lp-t-small); color: var(--lp-ink-2); max-width: 58ch; }
.urlform-hint:empty { display: none; }
/* a refused address: ink with a rule (red means a leak, never a form error) */
.urlform-error { margin-top: 10px; padding-left: 10px; border-left: 2px solid var(--lp-ink); font-size: var(--lp-t-small); color: var(--lp-ink); font-weight: var(--lp-w-strong); }
.urlform-error:empty { display: none; }
.urlform .ts-box { margin: 12px 0 0; }
.urlform--compact { max-width: none; }
@media (max-width: 560px) {
  .urlform-row { flex-wrap: wrap; }
  .urlform input { flex-basis: 100%; padding: 12px 10px; }
  .urlform .btn { flex: 1 1 100%; padding-block: 16px; }
}

/* ---------- hero ---------- */
.hero { padding-block: clamp(28px, 3.4vw, 44px) clamp(64px, 7vw, 96px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7.4fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.hero-kicker { margin-bottom: 18px; white-space: nowrap; }
.hero-title { position: relative; }
.hero-title h1 { font-size: var(--lp-t-h1); font-weight: var(--lp-w-display-heavy); font-stretch: var(--lp-display-stretch); letter-spacing: -.018em; line-height: .94; text-wrap: wrap; }
.h1-line { display: block; }
/* "Your ads work. / Your funnel / leaks." on every width, so the circle never touches "funnel" */
.h1-leaks { display: block; width: fit-content; }
/* "after the click" sits right of the circled word (landing.js places it), on every width */
.h1-note { position: absolute; left: 4.2em; bottom: .3em; font-size: clamp(22px, 2.1vw, 32px); transform: rotate(-4deg); transform-origin: left bottom; white-space: nowrap; }
@media (max-width: 1060px) { .hero-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .hero-kicker { white-space: normal; } }

/* FIG. 1: the example scan in the kit's browser window (a phone on narrow screens), the audit log
   overlapping the frame, the four counts under it */
.exhibit { margin: 0; padding-top: 4px; min-width: 0; }
.exhibit .notes-row--above { margin-bottom: 18px; }
.exhibit .notes-row--below { margin-top: 18px; }
.exhibit .notes-row .lp-marker { flex: none; }
.exhibit .notes-row li.is-waiting { visibility: hidden; }
/* the hero's notes stay at the small end of the pen size, so they fit beside the audit log */
.exhibit .notes-row .note-text { font-size: clamp(20px, 1.5vw, 22px); }
.ex-stage { position: relative; }
.ex-frame .shot, .ex-frame .shot--phone { background: none; box-shadow: none; outline: 0; border-radius: 0; padding: 0; }
.ex-frame .shot-view { border-radius: 0; }
/* the phone: centred under its notes (the kit's .mk resets margins, hence the extra class) */
.exhibit .ex-frame--phone { display: none; width: 100%; max-width: 264px; margin-inline: auto; }
.ex-frame--phone .mk-phone-screen { min-height: 0; }
.ex-log { position: absolute; right: -16px; bottom: -64px; z-index: 5; width: 240px; padding: 10px 12px 4px; background: var(--lp-sheet); border: 1px solid var(--lp-rule-2); border-radius: var(--lp-r-2); box-shadow: var(--lp-shadow); }
.ex-log-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; white-space: nowrap; padding-bottom: 7px; border-bottom: 1.5px solid var(--lp-ink); font: var(--lp-w-mono-strong) var(--lp-t-label-sm)/1.3 var(--lp-f-mono); font-stretch: var(--lp-mono-stretch); letter-spacing: .05em; text-transform: uppercase; color: var(--lp-ink); }
.ex-log-head span + span { font-weight: var(--lp-w-mono); letter-spacing: 0; text-transform: none; color: var(--lp-ink-2); font-variant-numeric: tabular-nums; }
.ex-log-list { list-style: none; height: calc(6 * 28px); overflow: hidden; }
.ex-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 28px; border-bottom: 1px solid var(--lp-rule); font-size: var(--lp-t-label); color: var(--lp-ink); }
.ex-row-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-row .lp-tag { flex: none; padding: 1px 5px; }
.ex-row.is-pending { display: none; }
.ex-row.is-new { animation: ex-row-in .32s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes ex-row-in { from { opacity: 0; transform: translateY(-8px); } }
/* a narrower figure: the log sits under the notes instead (landing.js fitLog) */
.exhibit[data-log="after"] .ex-log { position: static; width: auto; margin-top: 22px; box-shadow: none; }
.exhibit[data-log="after"] .ex-log-list { height: calc(4 * 28px); }
.exhibit[data-log="after"] .ex-counts { margin-top: 18px; }
.ex-counts { margin-top: 30px; }
.ex-counts .lp-counts-bar { height: 10px; }
.ex-counts .lp-counts-bar i { transition: background-color .2s ease, box-shadow .2s ease; }
.ex-counts .lp-counts-bar i.is-dim { background: var(--lp-rule); box-shadow: none; }
.exhibit .fig-cap { margin-top: 14px; }
.ex-replay { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: var(--lp-t-xs); }
.ex-replay svg { width: 15px; height: 15px; }
/* phones: the phone with its two pins, the notes, then three log rows and the counts */
@media (max-width: 700px) {
  .exhibit { display: flex; flex-direction: column; }
  .ex-stage { display: contents; }
  .exhibit .notes-row--above { order: 1; }
  .ex-frame--desk { display: none; }
  .exhibit .ex-frame--phone { display: block; order: 2; }
  .exhibit .notes-row--below { order: 3; }
  .ex-log { order: 4; position: static; width: auto; margin-top: 22px; box-shadow: none; }
  .ex-log-list { height: calc(3 * 28px); }
  .ex-counts { order: 5; margin-top: 18px; }
  .exhibit .fig-cap { order: 6; }
}
@media (prefers-reduced-motion: reduce) { .ex-row.is-new { animation: none; } }

/* ---------- the trust band: who runs this, and what the scan does ---------- */
.trust { border-top: 1px solid var(--lp-rule); padding-block: clamp(36px, 4.5vw, 56px); }
.trust-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.trust-k { display: flex; align-items: center; gap: 10px; }
.trust-k .label { color: var(--lp-ink); }
.brand-drop { width: 34px; height: 34px; flex: none; }
.brand-drop .d { fill: var(--lp-ink); }
.brand-drop .r { stroke: var(--lp-pen); }
.trust-text { margin-top: 14px; max-width: 34ch; font-size: var(--lp-t-d5); line-height: 1.45; color: var(--lp-ink); }
.trust-links { margin-top: 14px; font-size: var(--lp-t-small); }
.trust-links a::after { content: " →"; }
.spec { margin: 0; padding: 16px 20px 14px; background: var(--lp-sheet); border: 1px solid var(--lp-rule); border-radius: var(--lp-r-2); box-shadow: var(--lp-shadow); }
.spec-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1.5px solid var(--lp-ink); }
.spec-head .label { color: var(--lp-ink); }
.spec-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin-top: 14px; }
.spec-k { margin-bottom: 8px; font: var(--lp-w-mono-strong) var(--lp-t-label-sm)/1.3 var(--lp-f-mono); font-stretch: var(--lp-mono-stretch); letter-spacing: .05em; text-transform: uppercase; color: var(--lp-ink-2); }
.spec-list { list-style: none; display: grid; gap: 7px; font-size: var(--lp-t-xs); line-height: 1.4; color: var(--lp-ink); }
.spec-list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; align-items: start; }
.spec-list svg { width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: var(--lp-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.spec-list--no li { color: var(--lp-ink-2); }
.spec-list--no svg { stroke: var(--lp-ink-3); stroke-width: 2; }
.spec-cap { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--lp-rule); font-size: var(--lp-t-xs); line-height: 1.5; color: var(--lp-ink-2); }
@media (max-width: 900px) { .trust-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .spec-cols { grid-template-columns: minmax(0, 1fr); } .spec { padding-inline: 16px; } }

/* ---------- §01: FIG. 2 (where 100 leads go) ---------- */
.ledger { margin: 0; background: var(--lp-sheet); border: 1px solid var(--lp-rule); border-radius: var(--lp-r-2); box-shadow: var(--lp-shadow); padding: 18px 22px 16px; position: relative; }
.ledger-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding-bottom: 10px; border-bottom: 1.5px solid var(--lp-ink); }
.ledger-head .label { color: var(--lp-ink); }
.ledger ol { list-style: none; }
.ledger li { display: grid; grid-template-columns: 64px minmax(0, 1fr) 52px; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--lp-margin); font-size: var(--lp-t-small); }
.ledger .lg-loss, .ledger .lg-left { font: var(--lp-w-mono) var(--lp-t-small)/1 var(--lp-f-mono); font-stretch: var(--lp-mono-stretch); text-align: right; color: var(--lp-ink); }
.ledger .lg-left { color: var(--lp-ink-2); }
.ledger li.lg-start .lg-loss, .ledger li.lg-end .lg-loss { font-family: var(--lp-f-figure); font-stretch: var(--lp-figure-stretch); font-weight: var(--lp-w-display-heavy); font-size: clamp(26px, 2.2vw, 30px); }
.ledger li.lg-end { border-bottom: 0; border-top: 1.5px solid var(--lp-ink); margin-top: -1px; }
.ledger li.lg-end span:nth-child(2) b { font-weight: 700; }
.ledger-note { display: block; width: fit-content; margin: 6px 4px 0 auto; transform: rotate(-3deg); transform-origin: right; }
.ledger figcaption { margin-top: 12px; font-size: var(--lp-t-xs); color: var(--lp-ink-2); }

/* ---------- §01: the six leaks as a funnel strip of small windows ---------- */
.fstrip-wrap { margin-top: clamp(44px, 5vw, 64px); }
.fstrip-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
.fstrip-head .label { color: var(--lp-ink); }
.fstrip { list-style: none; position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 30px 18px; }
/* the funnel line through the pins, left to right, with an arrowhead at the call */
.fstrip::before { content: ""; position: absolute; left: 12px; right: 2px; top: 12px; border-top: 1.5px solid var(--lp-ink); }
.fstrip::after { content: ""; position: absolute; right: 1px; top: 8px; width: 9px; height: 9px; border-top: 1.5px solid var(--lp-ink); border-right: 1.5px solid var(--lp-ink); transform: rotate(45deg); }
.fs-item { position: relative; min-width: 0; display: flex; flex-direction: column; }
.fs-pin { position: relative; z-index: 1; display: flex; align-items: center; gap: 0; margin-bottom: 16px; }
/* 6px of paper after each pin, so the funnel line never runs into the label ("1 THE AD", not "1—THE AD") */
.fs-pin .lp-marker { box-shadow: 0 0 0 3px var(--lp-paper); }
.fs-when { margin-left: 3px; padding: 0 8px 0 6px; background: var(--lp-paper); font: var(--lp-w-mono) var(--lp-t-label-sm)/1.2 var(--lp-f-mono); font-stretch: var(--lp-mono-stretch); letter-spacing: .05em; text-transform: uppercase; color: var(--lp-ink-2); }
.fs-win .mk-frame { box-shadow: var(--lp-shadow-sm); }
/* a long address in a small window ends in an ellipsis, never a hard cut */
.fs-win .mk-addr b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fs-win .mk-addr span, .fs-win .mk-addr svg { flex: none; }
.fs-win .mk-win-body { height: 112px; overflow: hidden; display: grid; align-content: center; }
.fs-note { margin-top: 12px; min-height: 2.1em; font-size: var(--lp-t-d5); line-height: 1.05; transform: rotate(-2deg); transform-origin: left; }
.fs-name { margin-top: 10px; font-size: var(--lp-t-d5); line-height: 1.1; }
.fs-line { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 6px; margin-top: 7px; font-size: var(--lp-t-xs); line-height: 1.4; color: var(--lp-ink-2); }
.fs-k { font: var(--lp-w-mono) var(--lp-t-label-sm)/1.55 var(--lp-f-mono); font-stretch: var(--lp-mono-stretch); letter-spacing: .05em; text-transform: uppercase; color: var(--lp-ink-3); }
.fs-line--target, .fs-line--target .fs-k { color: var(--lp-ink); }
.fs-more { margin-top: 10px; font-size: var(--lp-t-xs); line-height: 1.5; }
.fs-more summary { display: inline-flex; gap: 6px; list-style: none; cursor: pointer; color: var(--lp-ink); text-decoration: underline; text-underline-offset: 3px; }
.fs-more summary::-webkit-details-marker { display: none; }
.fs-more summary::after { content: "+"; text-decoration: none; }
.fs-more[open] summary::after { content: "−"; }
.fs-more p { margin-top: 6px; color: var(--lp-ink-2); }
/* the mini pages inside the windows (pictures: small type is fine here) */
.fs-ad { display: grid; gap: 7px; padding: 10px 11px; }
.fs-ad-head { display: flex; align-items: center; gap: 7px; }
.fs-ad-head > span:last-child { display: grid; line-height: 1.15; }
.fs-ad-head b { font-size: var(--lp-t-label-sm); color: var(--lp-ink); }
.fs-ad-head small { font-size: var(--lp-t-label-sm); color: var(--lp-ink-3); }
.fs-ad-text { font-size: var(--lp-t-label); font-weight: var(--lp-w-strong); line-height: 1.35; color: var(--lp-ink); }
.fs-ad-media { display: block; height: 22px; border-radius: var(--lp-r-1); background: var(--lp-sunk); }
.fs-sms { display: grid; gap: 9px; padding: 10px 11px; }
.fs-sms-when { text-align: center; font: var(--lp-w-mono) var(--lp-t-label-sm)/1.3 var(--lp-f-mono); font-stretch: var(--lp-mono-stretch); color: var(--lp-ink-2); }
.fs-bubble { justify-self: start; max-width: 94%; padding: 6px 9px 7px; border-radius: 12px 12px 12px 4px; background: var(--lp-sunk); font-size: var(--lp-t-label); line-height: 1.35; color: var(--lp-ink); }
.fs-page { display: grid; gap: 8px; padding: 14px 12px; }
.fs-page-h { font: var(--lp-w-display) var(--lp-t-small)/1.15 var(--lp-f-display); font-stretch: var(--lp-display-stretch); color: var(--lp-ink); }
.fs-ph { display: block; height: 6px; border-radius: var(--lp-r-1); background: var(--lp-sunk); }
.fs-ph.is-short { width: 60%; }
.fs-mail { list-style: none; }
.fs-mail li { display: grid; gap: 1px; min-height: 30px; padding: 7px 10px; border-bottom: 1px solid var(--lp-rule); font-size: var(--lp-t-label); line-height: 1.3; color: var(--lp-ink); }
.fs-mail li:last-child { border-bottom: 0; }
.fs-mail li b { font-size: var(--lp-t-label-sm); }
.fs-mail li.is-empty::after { content: ""; align-self: center; width: 70%; height: 6px; border-radius: var(--lp-r-1); background: var(--lp-sunk); }
.fs-dns { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 8px; padding: 16px 10px; }
.fs-dns-miss { display: inline-flex; }
.fs-search { display: grid; gap: 8px; padding: 14px 12px; }
.fs-search-box { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--lp-rule-2); border-radius: var(--lp-r-pill); font-size: var(--lp-t-label); color: var(--lp-ink); }
.fs-search-box svg { width: 12px; height: 12px; flex: none; color: var(--lp-ink-2); }
@media (max-width: 1100px) {
  .fstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 22px; }
  .fstrip::before, .fstrip::after { display: none; }
}
@media (max-width: 640px) { .fstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; } }

/* a scan form right after the strip */
.mid-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 16px 32px; align-items: center; margin-top: clamp(44px, 5vw, 60px); padding: 20px 24px; background: var(--lp-sheet); border: 1.5px solid var(--lp-ink); border-radius: var(--lp-r-2); }
.mid-cta-h { font: var(--lp-w-display) var(--lp-t-d4)/1.1 var(--lp-f-display); font-stretch: var(--lp-display-stretch); color: var(--lp-ink); }
.mid-cta-h span { display: block; margin-top: 8px; font: var(--lp-w-body) var(--lp-t-xs)/1.4 var(--lp-f-body); font-stretch: normal; color: var(--lp-ink-2); }
@media (max-width: 860px) { .mid-cta { grid-template-columns: minmax(0, 1fr); padding: 18px; } }

/* ---------- §02 how it works: short steps, the prices on one baseline ---------- */
.steps-wrap { margin-top: clamp(40px, 5vw, 64px); padding-top: 90px; position: relative; }
.loop-note { position: absolute; top: 0; left: 50%; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; position: relative; padding-top: 34px; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; border-top: 1.5px solid var(--lp-ink);
  background: repeating-linear-gradient(90deg, var(--lp-margin-2) 0 1px, transparent 1px 12px) 0 0 / 100% 7px no-repeat; }
.step { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.step-dot { position: absolute; top: -41px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--lp-paper); border: 2px solid var(--lp-ink); }
.step-when { font: var(--lp-w-mono) var(--lp-t-label)/1.3 var(--lp-f-mono); font-stretch: var(--lp-mono-stretch); color: var(--lp-ink-2); letter-spacing: .02em; }
.step h3 { font-size: clamp(24px, 2.2vw, 30px); margin: 12px 0; display: flex; align-items: baseline; gap: 10px; }
.step-n { font: var(--lp-w-mono) var(--lp-t-label)/1 var(--lp-f-mono); font-stretch: var(--lp-mono-stretch); color: var(--lp-ink-2); transform: translateY(-.7em); }
.step p { color: var(--lp-ink-2); font-size: var(--lp-t-small); line-height: 1.5; margin-bottom: 16px; }
.step-key { margin: -4px 0 16px; }
.step-more { margin: -6px 0 16px; font-size: var(--lp-t-xs); }
.step-more::after { content: " →"; }
.step-price { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--lp-rule); font: var(--lp-w-mono) var(--lp-t-label-sm)/1.2 var(--lp-f-mono); font-stretch: var(--lp-mono-stretch); color: var(--lp-ink); }
.steps--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px; }
/* without the Deep Dive offer: scan, top 3, the build */
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1180px) { .steps--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) {
  .steps, .steps--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; padding-top: 0; }
  .steps::before, .step-dot { display: none; }
  .step { border-top: 1.5px solid var(--lp-ink); padding-top: 18px; }
  .steps-wrap { padding-top: 0; }
  .loop-note { position: static; transform: rotate(-2deg); display: inline-block; margin-top: 36px; white-space: normal; }
}
/* phones: one column on a vertical ruler; the pen draws the "test it again" arrow back up it */
@media (max-width: 640px) {
  .steps, .steps--3, .steps--5 { grid-template-columns: minmax(0, 1fr); row-gap: 36px; padding-left: 46px; }
  .step { border-top: 0; padding-top: 0; }
  .steps::before, .step-dot { display: block; }
  .steps::before { left: 18px; right: auto; top: 6px; bottom: 6px; width: 9px; height: auto; border-top: 0; border-left: 1.5px solid var(--lp-ink);
    background: repeating-linear-gradient(180deg, var(--lp-margin-2) 0 1px, transparent 1px 12px) 0 0 / 7px 100% no-repeat; }
  .step-dot { top: 6px; left: -34px; }
  .loop-note { margin: 22px 0 0 46px; }
}

/* ---------- §03 the worksheet, and a scan form for the estimate ---------- */
.worksheet { margin-top: clamp(40px, 5vw, 60px); background: var(--lp-sheet); border: 1px solid var(--lp-rule); border-radius: var(--lp-r-2); box-shadow: var(--lp-shadow); padding: clamp(20px, 3vw, 40px); }
.ws-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1.5px solid var(--lp-ink); }
.ws-head .label:first-child { color: var(--lp-ink); }
.ws-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); margin-top: 8px; }
.ws-inputs { display: grid; }
.ws-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; border-bottom: 1px solid var(--lp-margin); cursor: text; }
.ws-lab { font-size: var(--lp-t-small); color: var(--lp-ink); }
.ws-field { display: inline-flex; align-items: center; gap: 4px; font-family: var(--lp-f-mono); font-stretch: var(--lp-mono-stretch); font-size: var(--lp-t-small); flex: none; }
.ws-unit { color: var(--lp-ink-2); }
.ws-field input { width: 6.2em; text-align: right; font: inherit; font-variant-numeric: tabular-nums; color: var(--lp-ink); background: transparent; border: 0; border-bottom: 1.5px solid var(--lp-rule-2); padding: 8px 2px 6px; border-radius: 0; }
.ws-field input:hover { border-bottom-color: var(--lp-ink-3); }
.ws-field input:focus { outline: none; border-bottom-color: var(--lp-accent); background: color-mix(in srgb, var(--lp-accent) 7%, transparent); }
.ws-field input:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.ws-line--after .ws-lab { font-weight: var(--lp-w-strong); }
.ws-out { padding-top: 12px; position: relative; }
.ws-row { display: flex; justify-content: space-between; gap: 16px; min-height: 58px; align-items: center; border-bottom: 1px solid var(--lp-margin); font-size: var(--lp-t-small); color: var(--lp-ink-2); }
.ws-row .mono { font-size: var(--lp-t-small); color: var(--lp-ink); }
.ws-total { padding-top: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ws-total b { font-family: var(--lp-f-figure); font-stretch: var(--lp-figure-stretch); font-weight: var(--lp-w-display-heavy); font-size: clamp(54px, 6vw, 84px); line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ws-note { margin-top: 30px; transform: rotate(-2deg); transform-origin: left; }
.ws-foot { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--lp-rule); font-size: var(--lp-t-xs); color: var(--lp-ink-2); max-width: 78ch; }
.ws-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 14px 32px; align-items: center; margin-top: 24px; padding-top: 22px; border-top: 1.5px solid var(--lp-ink); }
.ws-cta-h { font: var(--lp-w-display) var(--lp-t-d4)/1.12 var(--lp-f-display); font-stretch: var(--lp-display-stretch); color: var(--lp-ink); }
.ws-cta-h b { font-weight: inherit; color: var(--lp-opp); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .ws-cta { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 800px) { .ws-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .ws-field input { width: 5.2em; } }

/* ---------- §04 what the Deep Dive delivers (FIG. 3 / 4, the kit's windows) ---------- */
.inside-gal + .inside-gal { margin-top: 26px; }
.inside-grid { display: grid; gap: 34px; align-items: start; }
.inside-grid--ai { grid-template-columns: minmax(0, 1fr) 244px; grid-template-areas: "zoom chat" "mail chat" "cmp cmp"; }
/* FIG. 4: the lock screen on the left; the video (top-aligned) and the lock screen's caption beside
   the phone on the right, so no column is left empty */
.inside-grid--live { grid-template-columns: 244px minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "lock video" "lock cap"; row-gap: 26px; }
.ig-zoom { grid-area: zoom; min-width: 0; } .ig-chat { grid-area: chat; min-width: 0; } .ig-mail { grid-area: mail; min-width: 0; } .ig-cmp { grid-area: cmp; min-width: 0; }
.ig-lock { grid-area: lock; min-width: 0; } .ig-video { grid-area: video; min-width: 0; }
.ig-lock-cap { grid-area: cap; min-width: 0; align-self: start; padding-top: 16px; border-top: 1px solid var(--lp-rule); }
.ig-lock-cap .mk-cap { margin-top: 0; }
/* on a wide screen the caption sits beside the phone it describes: a small pointer says so */
.ig-lock-cap .mk-k::before { content: "← "; }
.ig-lock-key { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--lp-t-xs); color: var(--lp-ink-2); }
.ig-lock-swatch { flex: none; width: 22px; height: 14px; border-radius: var(--lp-r-1); background: var(--lp-sheet); box-shadow: inset 0 0 0 2px var(--lp-pen); }
.inside-gal--live { border-style: dashed; border-color: var(--lp-rule-2); }
@media (max-width: 680px) {
  .inside-grid--ai { grid-template-columns: minmax(0, 1fr); grid-template-areas: "zoom" "chat" "mail" "cmp"; gap: 30px; }
  /* phones: the caption goes back under its phone */
  .inside-grid--live { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "lock" "cap" "video"; gap: 0; }
  .ig-chat, .ig-lock { justify-self: center; width: 100%; max-width: 284px; }
  .ig-lock-cap { justify-self: center; width: 100%; max-width: 284px; padding-top: 0; border-top: 0; margin: 10px 0 30px; }
  .ig-lock-cap .mk-k::before { content: none; }
}
/* the drafted email reads to its sign-off: no fade over the text */
.ig-mail .mk-mail-body { max-height: none; }
.ig-mail .mk-mail-body::after { display: none; }
/* the competitor table: ink "Yes" with a tick; "No" for you is the one signal (red pen) */
.mk-win--cmp .lp-cmp th, .mk-win--cmp .lp-cmp td { text-align: center; vertical-align: middle; }
.mk-win--cmp .lp-cmp tbody th { text-align: left; font-weight: var(--lp-w-strong); color: var(--lp-ink); }
.mk-win--cmp .lp-cmp td { color: var(--lp-ink-2); font-variant-numeric: tabular-nums; }
.mk-win--cmp .lp-cmp td.is-yes { color: var(--lp-ink); font-weight: var(--lp-w-strong); white-space: nowrap; }
.lp-cmp td.is-yes svg { width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; fill: none; stroke: var(--lp-ink); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.mk-win--cmp .lp-cmp td.is-you { color: var(--lp-leak); font-weight: var(--lp-w-strong); text-decoration: underline wavy var(--lp-pen); text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (max-width: 480px) { .mk-win--cmp .lp-cmp th, .mk-win--cmp .lp-cmp td { padding: 8px 5px; } .lp-cmp td.is-yes svg { display: none; } }
/* the video review: their dimmed confirmation page in the player, one play control under its
   headline (never over it), the length; the chapters under the player */
.lp-video { display: grid; grid-template-columns: minmax(0, 1fr); }
.lp-video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--lp-sheet); border-bottom: 1px solid var(--lp-rule); container-type: inline-size; }
.lp-video-page { position: absolute; inset: 0; display: grid; align-content: start; gap: 2.6cqw; padding: 7cqw 10cqw 0; }
.lp-video-host { font: var(--lp-w-mono) var(--lp-t-label-sm)/1.2 var(--lp-f-mono); font-stretch: var(--lp-mono-stretch); color: var(--lp-ink-3); }
.lp-video-h { font-family: var(--lp-f-display); font-weight: var(--lp-w-display-heavy); font-stretch: var(--lp-display-stretch); font-size: clamp(16px, 5.4cqw, 34px); line-height: 1.05; color: var(--lp-ink); }
.lp-video-frame::after { content: ""; position: absolute; inset: 0; background: var(--lp-surface-inverse); opacity: .5; }
.lp-video-play { position: relative; z-index: 2; justify-self: center; display: grid; place-items: center; margin: 2cqw 0 3cqw; }
.lp-video-play svg { width: clamp(40px, 10cqw, 60px); height: clamp(40px, 10cqw, 60px); }
.lp-video-play circle { fill: var(--lp-on-inverse); }
.lp-video-play path { fill: var(--lp-surface-inverse); }
.lp-video-time { position: absolute; z-index: 2; right: 10px; bottom: 10px; padding: 2px 6px; border-radius: var(--lp-r-1); background: var(--lp-surface-inverse); color: var(--lp-on-inverse); font: var(--lp-w-mono) var(--lp-t-label-sm)/1.4 var(--lp-f-mono); font-stretch: var(--lp-mono-stretch); }
.lp-video-parts { list-style: none; margin: 0; padding: 6px 14px 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.lp-video-parts li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--lp-rule); font-size: var(--lp-t-label); line-height: 1.35; color: var(--lp-ink); }
.lp-video-parts li:nth-last-child(-n+2) { border-bottom: 0; }
.lp-video-parts .mono { font-size: var(--lp-t-label-sm); color: var(--lp-ink-2); padding-top: 1px; }
@media (max-width: 560px) {
  .lp-video-parts { grid-template-columns: minmax(0, 1fr); }
  .lp-video-parts li:nth-last-child(2) { border-bottom: 1px solid var(--lp-rule); }
}

/* ---------- §05 pricing ---------- */
.est-more { margin-top: 14px; font-size: var(--lp-t-small); }
.est-more a { color: var(--lp-ink); font-weight: var(--lp-w-strong); }
.est-key { margin-top: 14px; }
.est-row--tiers { grid-template-columns: 52px minmax(0, 1fr); }
/* one bullet for every list: a short ink rule on a whole-pixel line, so no row renders heavier */
.landing .est-list { gap: 4px 28px; line-height: 24px; }
.landing .est-list li { align-items: flex-start; }
.landing .est-list li::before { width: 10px; height: 2px; margin-top: 11px; transform: none; background: var(--lp-ink); opacity: .5; }
@media (max-width: 640px) {
  .est-row--tiers { grid-template-columns: 30px minmax(0, 1fr); }
  /* the free row keeps its price beside the title */
  .est-row--free { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .est-row--free .est-price { grid-column: 3; grid-row: 1; flex-direction: column; align-items: flex-end; padding: 2px 10px 0 0; }
}

.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 72px); margin-top: clamp(56px, 7vw, 88px); }
.fit h3 { font-size: var(--lp-t-d4); padding-bottom: 14px; border-bottom: 1.5px solid var(--lp-ink); }
.marks { list-style: none; }
.marks li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--lp-rule); font-size: var(--lp-t-small); }
.marks svg { width: 24px; height: 24px; fill: none; stroke: var(--lp-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.marks--no svg { stroke: var(--lp-ink-3); }
@media (max-width: 760px) { .fit { grid-template-columns: minmax(0, 1fr); } }

/* ---------- §06 ask us first: one line and the contact address (the trust band says who runs this) ---------- */
.landing .sec--note { padding-block: clamp(40px, 5vw, 64px); }
.honest { width: fit-content; max-width: 100%; position: relative; }
.honest-text { font-size: clamp(21px, 2.1vw, 27px); line-height: 1.45; color: var(--lp-ink); letter-spacing: -.005em; overflow-wrap: anywhere; }
.honest-sign { margin-top: 14px; }
@media (max-width: 900px) { .honest { padding-left: 22px; } }

/* ---------- §07 questions: a two-column accordion (one column on phones) ---------- */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); margin-top: clamp(28px, 4vw, 44px); }
.faq-col { min-width: 0; border-top: 1.5px solid var(--lp-ink); }
.faq-item { border-bottom: 1px solid var(--lp-rule); }
.faq-item summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 18px 0; list-style: none; cursor: pointer; font-size: var(--lp-t-body); font-weight: var(--lp-w-strong); line-height: 1.35; color: var(--lp-ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { position: relative; flex: none; width: 14px; height: 14px; margin-top: 5px; }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--lp-ink); }
.faq-plus::after { transform: rotate(90deg); transition: transform .2s ease; }
.faq-item[open] .faq-plus::after { transform: rotate(0deg); }
.faq-item p { max-width: 60ch; padding: 0 30px 20px 0; font-size: var(--lp-t-small); line-height: 1.6; color: var(--lp-ink-2); }
@media (max-width: 800px) { .faq { grid-template-columns: minmax(0, 1fr); } .faq-col + .faq-col { border-top: 0; } }

/* ---------- the final form, on the one full-bleed navy band ---------- */
.final { padding-block: clamp(64px, 8vw, 112px); background: var(--lp-surface-inverse); color: var(--lp-on-inverse); border-block: 1px solid var(--lp-inverse-rim); }
.final .label { color: var(--lp-on-inverse-2); }
.final-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 80px); align-items: center; }
.final h2 { font-size: var(--lp-t-h2); margin-top: 14px; max-width: 12ch; color: var(--lp-on-inverse); }
.final-sheet { padding: clamp(18px, 2.4vw, 28px); background: var(--lp-sheet); color: var(--lp-ink); border-radius: var(--lp-r-2); box-shadow: var(--lp-shadow); }
.final-sheet .label { color: var(--lp-ink-2); }
@media (max-width: 900px) { .final-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- phones: a slim "Find my leaks" bar once the hero form has scrolled away ---------- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--lp-gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--lp-sheet); border-top: 1.5px solid var(--lp-ink); box-shadow: var(--lp-shadow); }
.sticky-cta p { font-size: var(--lp-t-xs); color: var(--lp-ink-2); }
.sticky-cta b { color: var(--lp-ink); }
@media (min-width: 701px) { .sticky-cta { display: none !important; } }

/* Decorative handwriting is ink (tokens.css --lp-pen-note); the estimate's note is upside (calm
   blue). The red pen stays for the leaks: the strip's notes, the ledger's losses, the hero circle. */
.h1-note, .loop-note, .honest-sign { color: var(--lp-pen-note); }
.ws-note { color: var(--lp-opp); }