/* LeakyButton landing. Cool light ground, ink type, one leak red.
   Unbounded carries the voice, Hanken Grotesk the prose, JetBrains Mono the data. */
@font-face { font-family: 'Unbounded'; src: url('/fonts/unbounded.woff2') format('woff2'); font-weight: 500 800; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('/fonts/hanken-roman.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  --sc-canvas: #EEF1F5;
  --sc-surface: #FFFFFF;
  --sc-ink: #0E1318;
  --sc-ink-soft: #46515E;
  --sc-accent: #E8352A;
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: 'Unbounded', 'Hanken Grotesk', system-ui, sans-serif;
  --sc-font-text: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sc-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --sc-shadow-color: 215 30% 18%;
  --red: #E8352A;
  --red-deep: #B42318;
  --red-soft: #FDE7E4;
  --line: #D9DFE7;
  --dark: #0E1318;
  --dark-2: #161C23;
  --dark-line: #27303A;
  --bar-h: 64px;
}
body { font-size: 17px; }
.sc-display { font-weight: 600; letter-spacing: -0.03em; }
.sc-display--md { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); line-height: 1.08; }
code { font-family: var(--sc-font-mono); font-size: .9em; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--dark); color: #fff; padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-sc-progress] { top: var(--bar-h); }

/* ------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 12px;
  padding: 10px 18px; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 140ms var(--sc-ease-out), transform 100ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out); }
.btn:active { transform: translateY(1px); }
.btn--lg { padding: 14px 22px; font-size: 16px; border-radius: 14px; }
.btn--sm { padding: 6px 12px; font-size: 13px; border-radius: 9px; }
.btn--red { background: var(--red); color: #fff; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), 0 6px 16px -6px rgba(232,53,42,.55); }
.btn--red:hover { background: #D42C22; }
.btn--ink { background: var(--dark); color: #fff; }
.btn--ink:hover { background: #262F39; }
.btn--ghost { background: rgba(255,255,255,.7); color: var(--sc-ink); border-color: var(--line); }
.btn--ghost:hover { background: #fff; }
.btn:disabled { opacity: .55; cursor: wait; }

/* ------------------------------------------------------------ bar */
.bar { position: fixed; inset: 0 0 auto 0; height: var(--bar-h); z-index: 60; display: flex; align-items: center; gap: 22px;
  padding: 0 clamp(16px, 3vw, 36px); background: rgba(238, 241, 245, .84); backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid rgba(14,19,24,.07); }
.bar__brand { display: flex; align-items: center; gap: 10px; color: var(--sc-ink); text-decoration: none; }
.bar__brand b { font: 700 16px var(--sc-font-display); letter-spacing: -.02em; }
.bar__nav { display: flex; gap: 22px; flex: 1; }
.bar__nav a { color: var(--sc-ink-soft); text-decoration: none; font-weight: 600; font-size: 15px; }
.bar__nav a:hover { color: var(--sc-ink); }
.bar__in { color: var(--sc-ink); font-weight: 650; text-decoration: none; font-size: 15px; }
.meter { position: relative; overflow: hidden; display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); color: var(--sc-ink); text-decoration: none; font-size: 13px; white-space: nowrap; }
.meter__drop { width: 16px; height: 16px; fill: var(--red); flex: none; position: relative; z-index: 1; }
.meter__text { position: relative; z-index: 1; }
.meter__k { color: var(--sc-ink-soft); }
.meter b { font: 600 13px var(--sc-font-mono); letter-spacing: -.02em; }
.meter__fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--red-soft); transition: width 400ms var(--sc-ease-out); }
.meter.is-hot { border-color: #F2B5AE; animation: meterPulse 900ms var(--sc-ease-out); }
@keyframes meterPulse { 30% { transform: scale(1.06); } }
@media (max-width: 1060px) { .bar__nav { display: none; } .bar { gap: 12px; } .meter { margin-left: auto; } }
@media (max-width: 560px) { .bar__in, .meter__k { display: none; } .bar__cta { padding: 8px 12px; font-size: 14px; } .bar__brand b { display: none; } }

/* ------------------------------------------------------------ the button (shared) */
.press { --w: var(--press-w, 300px); position: relative; display: block; width: var(--w); height: calc(var(--w) * .66); padding: 0; border: 0; background: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.press:focus-visible { outline: 3px solid var(--red); outline-offset: 8px; border-radius: 50%; }
.press__base { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, #4A5462 0%, #1C232B 52%, #0A0D11 100%);
  box-shadow: 0 30px 50px -18px rgba(14, 19, 24, .55), 0 10px 18px -8px rgba(14,19,24,.4), inset 0 2px 0 rgba(255,255,255,.14); }
.press__base::after { content: ''; position: absolute; left: 7%; right: 7%; top: 10%; height: 64%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #07090C 0%, #12171D 70%, transparent 72%); }
.press__cap { position: absolute; left: 10%; width: 80%; bottom: 19%; height: 58%; border-radius: 50% / 30%;
  background: linear-gradient(180deg, #CE2E23 0%, #A11E16 70%, #8C1912 100%);
  box-shadow: inset 0 -6px 10px rgba(0,0,0,.25);
  transition: transform 70ms cubic-bezier(.3,.7,.4,1), height 70ms cubic-bezier(.3,.7,.4,1); }
.press__cap::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 60%; border-radius: 50%;
  background: radial-gradient(ellipse at 36% 28%, #FF8E83 0%, #F4453A 30%, #E2311F 62%, #C2251B 100%);
  box-shadow: inset 0 -4px 8px rgba(110, 10, 4, .35), inset 0 3px 3px rgba(255,255,255,.35); }
.press__label { position: absolute; left: 0; right: 0; top: 30%; transform: translateY(-50%) scaleY(.78); color: #fff; text-align: center;
  font: 700 clamp(13px, calc(var(--w) * .06), 19px) var(--sc-font-display); letter-spacing: .02em; text-shadow: 0 1px 0 rgba(120,10,4,.5); }
.press:hover .press__cap::before { background: radial-gradient(ellipse at 36% 28%, #FF9A90 0%, #F6503F 30%, #E5361F 62%, #C2251B 100%); }
.press.is-down .press__cap, .press:active .press__cap { transform: translateY(14%); height: 46%; }
.press--lab { --w: min(340px, 74vw); }
.press--small { --w: 190px; }
.press.is-blocked .press__cap::before { background: radial-gradient(ellipse at 36% 28%, #9FE1C5 0%, #33B07F 34%, #198A5E 70%, #136E4B 100%); }
.press.is-blocked .press__cap { background: linear-gradient(180deg, #168055 0%, #0E5F3E 100%); }

/* drips */
.drops { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.drop { position: absolute; width: 14px; height: 14px; border-radius: 0 50% 50% 50%; background: var(--red); transform: rotate(45deg);
  box-shadow: inset -2px -2px 3px rgba(0,0,0,.18), inset 2px 2px 2px rgba(255,255,255,.35); animation: fall var(--t, 900ms) cubic-bezier(.5,0,.9,.6) forwards; }
@keyframes fall {
  0% { transform: translate(0, 0) rotate(45deg) scale(.4); opacity: 0; }
  12% { transform: translate(0, 6px) rotate(45deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, 220px)) rotate(45deg) scale(.9); opacity: 0; }
}
.cost-pop { position: absolute; font: 700 13px var(--sc-font-mono); color: var(--red-deep); white-space: nowrap; pointer-events: none;
  animation: pop 1100ms var(--sc-ease-out) forwards; }
@keyframes pop { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46px); } }

/* ------------------------------------------------------------ 1 hero */
.hero__stage { background:
  radial-gradient(60rem 40rem at 78% 46%, #FFFFFF 0%, rgba(255,255,255,0) 62%),
  linear-gradient(180deg, #E6EBF1 0%, var(--sc-canvas) 40%); }
.hero__copy { position: absolute; z-index: 20; left: clamp(20px, 6vw, 96px); top: calc(var(--bar-h) + clamp(28px, 10vh, 120px)); max-width: min(40rem, 50vw); }
.hero__h1 { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.6rem); line-height: 1.02; }
.hero__sub { margin: 22px 0 0; font-size: clamp(1.05rem, .98rem + .35vw, 1.28rem); line-height: 1.55; color: var(--sc-ink-soft); max-width: 36ch; text-wrap: pretty; }
.hero__ctas { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero__small { margin: 16px 0 0; font-size: 14px; color: #5F6A77; max-width: 44ch; }
.hero__app { position: absolute; z-index: 2; right: clamp(-60px, -2vw, 0px); top: calc(var(--bar-h) + 6vh); width: min(560px, 44vw); }
.mock { border-radius: 16px; background: #fff; border: 1px solid #DCE2EA; box-shadow: 0 30px 60px -30px rgba(14,19,24,.35); overflow: hidden;
  transform: rotate(-3deg) scale(.94); filter: saturate(.8); opacity: .72; }
.mock__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #F4F6F9; border-bottom: 1px solid #E5E9EF; font: 12px var(--sc-font-mono); color: #8A94A0; }
.mock__bar i { width: 9px; height: 9px; border-radius: 50%; background: #D5DBE3; }
.mock__bar span { margin-left: 10px; }
.mock__body { padding: 22px 22px 26px; }
.mock__line { height: 10px; border-radius: 6px; background: #E8ECF1; margin-bottom: 10px; }
.w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; } .w90 { width: 90%; }
.mock__ai { margin: 18px 0; padding: 14px; border-radius: 10px; background: #F6F3FF; border: 1px dashed #D9CEF7; }
.mock__ai .mock__line { background: #E4DCFB; }
.mock__btns { display: flex; gap: 8px; }
.mock__btn { font: 600 12px var(--sc-font-text); padding: 6px 12px; border-radius: 8px; border: 1px solid #DCE2EA; color: #66707C; }
.mock__btn--hot { background: linear-gradient(135deg, #7B5CFF, #A64BE0); color: #fff; border-color: transparent; }
.hero__button { position: absolute; z-index: 6; right: clamp(32px, 9vw, 180px); top: calc(var(--bar-h) + 29vh); --press-w: clamp(280px, 25vw, 400px); }
.hero__stage[data-sc-spotlight]::after { display: none; }
.puddle { position: absolute; z-index: -1; left: 50%; top: calc(var(--press-w, 300px) * .5); width: calc(var(--press-w, 300px) * 1.3); height: calc(var(--press-w, 300px) * .26); margin-left: calc(var(--press-w, 300px) * -.65); border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(232,53,42,.34), rgba(232,53,42,.12) 58%, transparent 71%); transform: scale(var(--puddle, 0)); transform-origin: 50% 40%; transition: transform 600ms var(--sc-ease-out); }
.lean { transform: translate3d(calc((var(--sc-mx, .5) - .5) * -14px), calc((var(--sc-my, .5) - .5) * -10px), 0) rotateX(calc((var(--sc-my, .5) - .5) * 6deg)); transition: transform 300ms var(--sc-ease-out); position: relative; }
.press__hint { margin: 16px auto 0; max-width: 30ch; text-align: center; font-size: 14px; color: var(--sc-ink-soft); }
.hero__near { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.ticket { position: absolute; right: clamp(60px, 7vw, 140px); top: calc(var(--bar-h) + 20vh); font: 700 13px var(--sc-font-mono); color: var(--red-deep);
  background: #fff; border: 1px solid #F3C2BC; padding: 4px 10px; border-radius: 999px; box-shadow: 0 8px 18px -10px rgba(180,35,24,.5); opacity: .9; }
.ticket--b { right: clamp(300px, 31vw, 560px); top: calc(var(--bar-h) + 68vh); opacity: .55; transform: scale(.85); }
.ticket--c { right: clamp(12px, 3vw, 48px); top: calc(var(--bar-h) + 58vh); opacity: .7; }
@media (max-width: 900px) {
  .hero__copy { left: 20px; right: 20px; max-width: none; top: calc(var(--bar-h) + 22px); }
  .hero__h1 { font-size: clamp(2rem, 7.4vw, 2.8rem); }
  .hero__sub { font-size: 1rem; margin-top: 14px; }
  .hero__ctas { margin-top: 18px; }
  .hero__small { display: none; }
  .hero__app { display: none; }
  .hero__button { right: auto; left: 50%; top: auto; bottom: 7vh; transform: translateX(-50%); }
  .hero__button { --press-w: 210px; }
  .press__hint { font-size: 13px; }
  .ticket--b { display: none; }
  .ticket { top: auto; bottom: 34vh; }
  .ticket--c { bottom: 18vh; }
}
@media (max-width: 900px) and (max-height: 700px) { .hero__button { --press-w: 170px; } .press__hint { display: none; } }

/* ------------------------------------------------------------ 2 calculator */
.calc { padding-block: clamp(4rem, 8vw, 8rem); }
.calc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 6vw, 90px); align-items: center; }
.calc__note { font-size: 14px; color: #5F6A77; }
.calc__box { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: clamp(18px, 3vw, 30px); box-shadow: var(--sc-e2); display: grid; gap: 20px; }
.calc__row { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.calc__row legend, .calc__lab { font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; gap: 10px; padding: 0; margin-bottom: 10px; }
.calc__lab output { font: 700 15px var(--sc-font-mono); }
.chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; }
.chips span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 10px; border-radius: 12px; border: 1px solid var(--line); font-size: 12.5px; color: var(--sc-ink-soft); cursor: pointer; transition: border-color 140ms, background 140ms; }
.chips b { font: 700 15px var(--sc-font-mono); color: var(--sc-ink); }
.chips input:checked + span { border-color: var(--dark); background: #F4F6F9; box-shadow: inset 0 0 0 1px var(--dark); }
.chips input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
input[type=range] { width: 100%; accent-color: var(--red); }
.calc__toggle { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--sc-ink-soft); }
.calc__toggle input { margin-top: 4px; accent-color: var(--red); width: 16px; height: 16px; }
.calc__out { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px dashed var(--line); padding-top: 18px; }
.calc__k { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6A7480; }
.calc__out b { font: 600 clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem) var(--sc-font-mono); letter-spacing: -.05em; color: var(--red-deep); }
@media (max-width: 900px) { .calc__grid { grid-template-columns: minmax(0, 1fr); } .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------ 3/4 lab (the peak) */
.lab { --sc-ink: #EEF2F6; --sc-ink-soft: #A9B4C0; color: var(--sc-ink); }
.lab__stage { background: radial-gradient(70rem 40rem at 30% 70%, #1B232C 0%, var(--dark) 60%); color: var(--sc-ink); }
.lab__grid { position: absolute; inset: calc(var(--bar-h) + 3vh) clamp(20px, 5vw, 80px) 4vh; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.lab__h { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3.2rem); line-height: 1.06; max-width: 15ch; }
.lab__p { margin: 18px 0 0; color: var(--sc-ink-soft); max-width: 44ch; font-size: 16.5px; }
.lab__btnwrap { position: relative; margin-top: clamp(20px, 5vh, 54px); width: fit-content; }
.lab .press__base { box-shadow: 0 30px 60px -18px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.12); }
.lab__answer { margin-top: 16px; min-height: 2.6em; max-width: 40ch; font-size: 14.5px; color: #CFD7E0; font-style: italic; }
.panel { background: var(--dark-2); border: 1px solid var(--dark-line); border-radius: 18px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); overflow: hidden; }
.panel__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--dark-line); font-weight: 700; font-size: 14px; }
.panel__dot { width: 9px; height: 9px; border-radius: 50%; background: #56606C; }
.panel__dot.on { background: #31C48D; box-shadow: 0 0 0 4px rgba(49,196,141,.18); }
.panel__sid { margin-left: auto; font: 500 12px var(--sc-font-mono); color: #8995A2; }
.panel__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--dark-line); }
.panel__stats div { padding: 14px 18px; }
.panel__stats div + div { border-left: 1px solid var(--dark-line); }
.panel__stats span { display: block; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: #8995A2; font-weight: 700; }
.panel__stats b { font: 600 26px var(--sc-font-mono); letter-spacing: -.04em; }
.panel__threshold { padding: 12px 18px; font-size: 13px; color: #A9B4C0; border-bottom: 1px solid var(--dark-line); }
.panel__threshold i { display: block; height: 6px; border-radius: 99px; background: #26303A; margin-top: 8px; overflow: hidden; }
.panel__threshold b { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #F59E0B, var(--red)); border-radius: 99px; transition: width 300ms var(--sc-ease-out); }
.panel__log { list-style: none; margin: 0; padding: 6px 0; font: 12.5px/1.5 var(--sc-font-mono); height: clamp(150px, 30vh, 290px); overflow: hidden; display: flex; flex-direction: column-reverse; }
.panel__log li { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 10px; padding: 5px 18px; color: #C6D0DA; animation: logIn 260ms var(--sc-ease-out); }
.panel__log li .t { color: #6F7C89; }
.panel__log li .c { color: #FF8A80; font-weight: 700; }
.panel__log li.blocked .c { color: #4ADE9F; }
.panel__log li.click { color: #fff; }
.panel__log .panel__empty { display: block; color: #6F7C89; font-style: italic; font-family: var(--sc-font-text); }
@keyframes logIn { from { opacity: 0; transform: translateY(-6px); } }
.caught { margin-top: 16px; background: #fff; color: var(--dark); border-radius: 18px; padding: 20px 22px; box-shadow: 0 40px 80px -30px rgba(232,53,42,.55); border: 2px solid var(--red);
  animation: caughtIn 520ms cubic-bezier(.2,1.2,.3,1); }
.caught[hidden] { display: none; }
@keyframes caughtIn { from { opacity: 0; transform: translateY(18px) scale(.96); } }
.caught__top { display: flex; gap: 10px; align-items: center; }
.sev { background: var(--red-soft); color: var(--red-deep); font-weight: 800; font-size: 12px; padding: 3px 10px; border-radius: 999px; }
.caught__kind { font-size: 12.5px; color: #6A7480; font-weight: 600; }
.caught__that { margin: 12px 0 2px; font: 700 clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem)/1.05 var(--sc-font-display); letter-spacing: -.03em; color: var(--red-deep); }
.caught__title { margin: 6px 0 0; font-size: 18px; font-weight: 800; }
.caught__sum { margin: 6px 0 0; color: #3E4955; font-size: 15px; }
.caught__foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font: 12.5px var(--sc-font-mono); color: #6A7480; flex-wrap: wrap; }
.caught__foot a { font-family: var(--sc-font-text); font-weight: 700; color: var(--red-deep); }
.caught--other { border-color: #3A4450; box-shadow: none; background: #F4F6F9; }
.caught--other .caught__that { color: var(--dark); font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); }
@media (max-width: 900px) {
  .lab__grid { position: absolute; inset: calc(var(--bar-h) + 12px) 16px 12px; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; overflow: hidden; }
  .lab__h { font-size: 1.6rem; }
  .lab__p { font-size: 14px; margin-top: 8px; }
  .lab__btnwrap { margin: 10px auto 0; }
  .press--lab { --w: 170px; }
  .lab__answer { display: none; }
  .panel__log { height: 96px; }
  .panel__stats b { font-size: 20px; }
  .panel__stats div { padding: 10px 12px; }
  .caught { margin-top: 10px; padding: 14px 16px; }
  .caught__sum { font-size: 13.5px; }
  .lab__right.has-caught .panel { display: none; }
}

/* ------------------------------------------------------------ 5 report */
.report__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 90px); align-items: center; }
.report__fine { font-size: 14px; color: #5F6A77; }
.report__card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: clamp(22px, 3vw, 34px); box-shadow: var(--sc-e3); min-height: 260px; }
.report__k { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #6A7480; }
.report__empty p { margin: 12px 0 0; color: var(--sc-ink-soft); }
.report__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.report__body h3 { margin: 16px 0 10px; font: 600 clamp(1.3rem, 1rem + 1vw, 1.8rem)/1.15 var(--sc-font-display); letter-spacing: -.03em; }
.report__body p { margin: 0 0 12px; color: #2E3843; }
.report__fix { background: #F4F6F9; padding: 12px 14px; border-radius: 12px; font-size: 15px; }
.report__by { font-size: 12.5px; color: #6A7480; margin: 0 !important; }
.verdict { font: 700 11px var(--sc-font-display); letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: #E2F5EC; color: #0E8A5F; }
.verdict.leaking { background: var(--red); color: #fff; }
.verdict.watch { background: #FFF3D6; color: #8A5600; }
@media (max-width: 900px) { .report__grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------ 6 fix */
.fix__stage { background: linear-gradient(180deg, #E3E9F1, #DCE4EE); }
.fix__grid { position: absolute; inset: calc(var(--bar-h) + 4vh) 0 4vh; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.fix__try { display: flex; align-items: center; gap: 26px; margin-top: 28px; flex-wrap: wrap; }
.switch-row { display: inline-flex; align-items: center; gap: 12px; font-weight: 750; font-size: 16px; cursor: pointer; }
.switch-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch { width: 52px; height: 30px; border-radius: 99px; background: #AEB8C4; position: relative; flex: none; transition: background 160ms; }
.switch::after { content: ''; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform 180ms var(--sc-ease-out); }
.switch-row input:checked + .switch { background: #0E8A5F; }
.switch-row input:checked + .switch::after { transform: translateX(22px); }
.switch-row input:focus-visible + .switch { outline: 2px solid var(--red); outline-offset: 3px; }
.fix__status { margin-top: 18px; font-weight: 650; min-height: 1.6em; }
.fix__status.ok { color: #0B6E4A; }
.prompt { background: #FFFBF2; border: 1px solid #EDDDB4; border-radius: 18px; box-shadow: var(--sc-e2); overflow: hidden; }
.prompt__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #EFE3C5; font-size: 13px; font-weight: 700; color: #7A6630; }
.prompt__head .btn { background: var(--dark); color: #fff; }
.prompt__text { margin: 0; padding: 16px 18px; white-space: pre-wrap; font: 13.5px/1.6 var(--sc-font-mono); color: #3D3420; max-height: 46vh; overflow: auto; }
.fix__fine { font-size: 14px; color: var(--sc-ink-soft); margin-top: 14px; }
@media (max-width: 900px) {
  .fix__grid { inset: calc(var(--bar-h) + 10px) 0 10px; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; overflow: hidden; }
  .fix__left .sc-body { font-size: 14.5px; }
  .fix__try { margin-top: 12px; gap: 16px; }
  .press--small { --w: 130px; }
  .prompt__text { max-height: 24vh; font-size: 12px; }
  .fix__fine { display: none; }
}

/* ------------------------------------------------------------ 7 catches */
.catches__head { max-width: 760px; }
.catches__list { list-style: none; padding: 0; margin: clamp(32px, 5vw, 56px) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 5vw, 72px); border-top: 1px solid var(--line); }
.catches__list li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.catches__list b { font-weight: 800; font-size: 16.5px; }
.catches__list span { color: var(--sc-ink-soft); font-size: 15.5px; }
.catches__extra { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: clamp(20px, 4vw, 56px); margin-top: clamp(40px, 6vw, 72px); }
.catches__extra h3 { font: 600 1.2rem/1.2 var(--sc-font-display); letter-spacing: -.02em; margin: 0 0 10px; }
.catches__extra p { margin: 0; color: var(--sc-ink-soft); font-size: 15.5px; }
@media (max-width: 900px) { .catches__list, .catches__extra { grid-template-columns: minmax(0, 1fr); } .catches__list li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ------------------------------------------------------------ 8 install, pricing */
.install { padding-top: clamp(2rem, 4vw, 4rem); }
.install__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.install__code { background: var(--dark); color: #E6EDF3; border-radius: 20px; padding: clamp(20px, 3vw, 30px); box-shadow: var(--sc-e3); }
.install__code code { display: block; font-size: clamp(12px, .7rem + .35vw, 15px); overflow-x: auto; white-space: nowrap; padding-bottom: 16px; border-bottom: 1px solid var(--dark-line); color: #FFB4AC; }
.install__facts { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; font-size: 14.5px; color: #B7C2CD; }
.install__facts li::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: 10px; vertical-align: 2px; }
.install__facts a { color: #fff; }
@media (max-width: 900px) { .install__grid { grid-template-columns: minmax(0, 1fr); } .install__facts { grid-template-columns: minmax(0, 1fr); } }
.plans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); margin-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.plan { padding: 26px clamp(16px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 14px; }
.plan + .plan { border-left: 1px solid var(--line); }
.plan h3 { margin: 0; font: 600 1.15rem var(--sc-font-display); }
.plan__price { margin: 0; color: var(--sc-ink-soft); }
.plan__price b { font: 600 2.4rem var(--sc-font-mono); letter-spacing: -.05em; color: var(--sc-ink); }
.plan ul { margin: 0; padding-left: 18px; color: var(--sc-ink-soft); font-size: 15px; display: grid; gap: 6px; flex: 1; }
.plan .btn { align-self: flex-start; }
.plan--pick { background: #fff; box-shadow: var(--sc-e2); border-radius: 18px; margin-block: -14px; padding-block: 40px; position: relative; z-index: 1; border-left: 0 !important; }
.plan--pick + .plan { border-left: 0; }
@media (max-width: 900px) { .plans { grid-template-columns: minmax(0, 1fr); border-bottom: 0; } .plan + .plan { border-left: 0; border-top: 1px solid var(--line); } .plan--pick { margin: 0; } }
.faq { margin-top: clamp(48px, 7vw, 88px); max-width: 860px; }
.faq__h { font: 600 1.4rem var(--sc-font-display); margin: 0 0 12px; letter-spacing: -.02em; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 750; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 600 20px var(--sc-font-mono); color: var(--red); }
.faq details[open] summary::after { content: '-'; }
.faq details p { margin: 0 0 18px; color: var(--sc-ink-soft); max-width: 70ch; }

/* ------------------------------------------------------------ 9 close: the receipt */
.close { --sc-ink: #EEF2F6; }
.close__stage { background: radial-gradient(60rem 40rem at 50% 30%, #1B232C, var(--dark) 65%); color: #EEF2F6; }
.close__inner { position: absolute; inset: calc(var(--bar-h) + 2vh) 16px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.receipt { width: min(460px, 100%); background: #FBFAF7; color: var(--dark); padding: 26px 26px 22px; position: relative; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7);
  --notch: radial-gradient(circle at 10px 0, transparent 7px, #FBFAF7 7.5px);
  -webkit-mask: radial-gradient(circle 7px at 50% 0, transparent 98%, #000) top / 20px 51% repeat-x, radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) bottom / 20px 51% repeat-x;
  mask: radial-gradient(circle 7px at 50% 0, transparent 98%, #000) top / 20px 51% repeat-x, radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) bottom / 20px 51% repeat-x; }
.receipt__k { margin: 6px 0 0; text-align: center; font: 700 11px var(--sc-font-mono); letter-spacing: .14em; text-transform: uppercase; color: #6A7480; }
.receipt__h { margin: 6px 0 0; text-align: center; font: 700 1.6rem var(--sc-font-display); letter-spacing: -.03em; }
.receipt__sid { margin: 4px 0 14px; text-align: center; font: 12px var(--sc-font-mono); color: #6A7480; }
.receipt__lines { margin: 0; border-top: 1px dashed #BFC7D0; padding-top: 10px; }
.receipt__lines div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14.5px; }
.receipt__lines dt { color: #3E4955; }
.receipt__lines dd { margin: 0; font: 600 14.5px var(--sc-font-mono); }
.receipt__total { border-top: 1px dashed #BFC7D0; margin-top: 6px; padding-top: 10px !important; }
.receipt__total dt, .receipt__total dd { font-weight: 800 !important; color: var(--red-deep); font-size: 16px !important; }
.signup { margin-top: 16px; border-top: 1px dashed #BFC7D0; padding-top: 16px; display: grid; gap: 8px; }
.signup__h { margin: 0 0 4px; font-weight: 800; font-size: 16px; }
.signup input { width: 100%; border: 1px solid #CDD4DC; border-radius: 10px; padding: 11px 12px; font-size: 15px; background: #fff; }
.signup input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(232,53,42,.15); }
.signup .btn { margin-top: 4px; }
.foot { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; align-items: center; font-size: 13.5px; color: #8995A2; padding-bottom: 16px; }
.foot a { color: #C6D0DA; text-decoration: none; }
.foot a:hover { color: #fff; }
.foot__fine { flex-basis: 100%; text-align: center; font-size: 12.5px; }
@media (max-width: 900px) and (max-height: 760px) { .receipt__lines div { padding: 2px 0; font-size: 13px; } .receipt { padding: 18px 18px 14px; } .signup__h { font-size: 14px; } .receipt__h { font-size: 1.3rem; } }

@media (prefers-reduced-motion: reduce) {
  .drop, .cost-pop { animation: none; display: none; }
  .lean { transform: none !important; }
  .caught { animation: none; }
}
.lab__right.has-caught .panel__log, .lab__right.has-caught .panel__threshold { display: none; }