/* ═══════════════════════════════════════════════════════════════
   cleanthis.io — home.css  (homepage + the file-result view)
   Boards: "Homepage · desktop" (Main), "Homepage · mobile" (Mobile),
   "File result" (Results / ResultsM). Builds on site.css tokens.
   ═══════════════════════════════════════════════════════════════ */

.skip:focus { position: fixed !important; left: 12px; top: 12px; width: auto; height: auto; clip: auto; margin: 0; z-index: 100; padding: 8px 12px; background: var(--surf); color: var(--ink); border: 2px solid var(--frame); border-radius: var(--radius-sm); font-family: var(--font-mono); }

/* Sections carry their own dither strip so mobile can reorder them. */
.home { display: flex; flex-direction: column; }
.hsec { position: relative; padding: 96px var(--gutter-r) 96px var(--gutter); }
.hsec + .hsec::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background-image: conic-gradient(var(--line) 25%, transparent 0 50%, var(--line) 0 75%, transparent 0); background-size: 8px 8px; }
.hsec--alt { background-color: var(--bg2); }
.hsec__head { display: flex; flex-direction: column; gap: 14px; max-width: 46em; }

/* Desktop: every section fills the screen below the header, content
   centred, so a section never shows slices of its neighbours. The page
   snaps section by section (html.snap-sections, set on index.html only).
   Sections taller than the screen (short laptop screens) still scroll
   freely inside themselves before snapping on. The result view turns
   snapping off. To undo the snapping only, remove class="snap-sections"
   from <html> in index.html. */
@media (min-width: 1024px) {
  .hsec {
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100dvh - var(--header-h));
    display: flex; flex-direction: column; justify-content: center;
    padding-top: clamp(28px, 4.5vh, 88px); padding-bottom: clamp(28px, 4.5vh, 88px);
  }
  .hsec.hero { padding-top: clamp(28px, 4.5vh, 88px); padding-bottom: clamp(28px, 4.5vh, 88px); }
  .s-demo .demo__row { margin-top: clamp(16px, 2.6vh, 36px); }
  /* the hero has the most in it: let the headline and gaps follow the screen height too */
  .hero .hero__h1 { font-size: clamp(38px, min(5.2vw, 6.6vh), 66px); }
  .hero .hero__text { gap: clamp(16px, 2.6vh, 28px); }
}
@media (min-width: 1024px) and (min-height: 600px) {
  html.snap-sections { scroll-snap-type: y mandatory; scroll-padding-top: var(--header-h); }
  html.snap-sections:has(body.is-result) { scroll-snap-type: none; scroll-padding-top: 80px; }
  html.snap-sections .hsec { scroll-snap-align: start; }
  html.snap-sections .site-footer { scroll-snap-align: end; }
}

/* ── 1 · Hero: the machine ──────────────────────────────────────── */
.hero { padding-top: 72px; padding-bottom: 88px; }
.hero__grid { display: flex; flex-wrap: wrap; gap: 56px; align-items: stretch; }
.hero__text { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.hero__h1 { font-size: clamp(38px, 5.2vw, 66px); }
.hero__lead { font-size: 19px; max-width: 30em; }
.hero__machine { flex: 1 1 500px; min-width: 0; position: relative; padding-top: 44px; display: flex; flex-direction: column; }
.hero__ticks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: auto; padding-top: 22px; font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.hero__ticks a { color: inherit; }

/* neofetch stats window */
.neo { max-width: 520px; margin-top: auto; font-family: var(--font-mono); }
.neo__body { display: flex; gap: 22px; padding: 18px; align-items: flex-start; flex-wrap: wrap; }
.neo__lines { flex: 1 1 260px; min-width: 0; font-size: 14px; line-height: 1.75; font-variant-numeric: tabular-nums; }
.neo__lines .k { color: var(--teal); display: inline-block; min-width: 9.5em; }
.neo__user { color: var(--teal); }
.neo__user span { color: var(--ink2); }
.neo__rule { color: var(--muted); overflow: hidden; white-space: nowrap; }
.neo__strip { display: flex; margin-top: 10px; }
.neo__strip i { display: block; width: 26px; height: 6px; }
.neo__strip i:nth-child(1) { background: var(--a0); } .neo__strip i:nth-child(2) { background: var(--a1); }
.neo__strip i:nth-child(3) { background: var(--a2); } .neo__strip i:nth-child(4) { background: var(--a3); }
.neo__strip i:nth-child(5) { background: var(--a4); } .neo__strip i:nth-child(6) { background: var(--a5); }
.neo__strip i:nth-child(7) { background: var(--a6); } .neo__strip i:nth-child(8) { background: var(--a7); }

/* Boo above the drop window (+ the idle peek / walk / vanish) */
.mz { position: absolute; top: -8px; right: 40px; width: 80px; height: 80px; z-index: 3; pointer-events: none; }
.mz img { position: absolute; left: 0; top: 0; width: 80px; height: 80px; }
.mz .g-mag-l, .mz .g-mag-r, .mz .g-poof1, .mz .g-poof2, .mz .g-alt { opacity: 0; }
.mz .g-main { animation: bob 1.4s steps(2) infinite; }
.mz.is-mood .g-main { opacity: 0; }
.mz.is-mood .g-alt { opacity: 1; animation: bob 1.4s steps(2) infinite; }
.mz.idle-peek { animation: peekMove 2.4s steps(4) infinite; }
.mz.idle-peek .g-main { opacity: 0; }
.mz.idle-peek .g-mag-l { animation: magL 2.4s steps(1) infinite; }
.mz.idle-peek .g-mag-r { animation: magR 2.4s steps(1) infinite; }
.mz.idle-walk { z-index: 1; animation: walkBehind 6s ease-in-out both; }
.mz.idle-vanish .g-main { animation: vanish 3.2s ease-in-out both; }
.mz.idle-vanish .g-poof1 { animation: poofA 3.2s steps(1) both; }
.mz.idle-vanish .g-poof2 { animation: poofB 3.2s steps(1) both; }
@keyframes peekMove { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-12px); } 50% { transform: translateX(0); } 75% { transform: translateX(12px); } }
@keyframes magL { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes magR { 0%, 49.9% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes walkBehind { 0% { transform: translate(0, 0); } 10% { transform: translate(0, 16px); } 45%, 55% { transform: translate(-360px, 16px); } 90% { transform: translate(0, 16px); } 100% { transform: translate(0, 0); } }
@keyframes vanish { 0% { opacity: 1; transform: none; } 40% { opacity: 0; transform: translateY(-6px); } 74% { opacity: 0; transform: scale(.5); } 86% { opacity: 1; transform: scale(1.12); } 94%, 100% { opacity: 1; transform: none; } }
@keyframes poofA { 0%, 69% { opacity: 0; } 70%, 77% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes poofB { 0%, 77% { opacity: 0; } 78%, 87% { opacity: 1; } 88%, 100% { opacity: 0; } }

/* the drop window */
.drop { position: relative; z-index: 2; }
.drop__body { padding: 24px; display: flex; flex-direction: column; gap: 22px; }
.zone {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  min-height: 200px; padding: 24px; text-align: center; cursor: pointer;
  border: 2px dashed var(--frame); border-radius: var(--radius-ctl); background: var(--bg2);
}
.zone:hover, .zone:focus-within, .zone.is-drag { border-color: var(--teal); background: var(--teal-bg); }
.zone:focus-within { box-shadow: 0 0 0 3px var(--ring); }
.zone__title { font-family: var(--font-mono); font-size: 22px; color: var(--ink); }
.zone__title .cursor { color: var(--lime-ink); }
.zone__hint { font-size: 15px; color: var(--muted); }
.zone__ico { width: 36px; height: 36px; image-rendering: pixelated; }
.zone--url { cursor: default; align-items: stretch; text-align: left; gap: 10px; }
.zone--url:hover, .zone--url:focus-within { border-color: var(--frame); background: var(--bg2); box-shadow: none; }
.zone--url label { font-family: var(--font-mono); font-size: 13px; color: var(--muted); letter-spacing: .06em; }
.zone--url .field-hint { font-size: 13.5px; }

/* chosen file chip */
.fchip { display: flex; align-items: center; gap: 14px; padding: 16px; border: 2px solid var(--lime-ink); border-radius: var(--radius-ctl); background: var(--lime-bg); min-width: 0; }
.fchip__ico { width: 36px; height: 36px; image-rendering: pixelated; flex: none; }
.fchip__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.fchip__name { font-family: var(--font-mono); font-size: 16.5px; color: var(--ink); display: flex; min-width: 0; }
.fchip__base { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fchip__ext { flex: none; white-space: nowrap; }
.fchip__size { font-size: 14px; color: var(--ink2); }
.fchip__x { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 2px solid var(--frame); border-radius: var(--radius-sm); background: var(--surf); color: var(--ink); font-family: var(--font-mono); font-size: 18px; cursor: pointer; }
.fchip__x:hover { color: var(--red); border-color: var(--red); }

/* in-progress panel */
.prog { display: flex; flex-direction: column; gap: 14px; }
.prog__head { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 14px; color: var(--ink); min-width: 0; }
.prog__head img { flex: none; }
.prog__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prog__pct { margin-left: auto; flex: none; color: var(--ink2); font-variant-numeric: tabular-nums; }
.prog__log { position: relative; min-height: 132px; padding: 14px 16px; border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--surf); font-size: 13px; }
.prog__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.prog__meta .btn { margin-left: auto; }

.level { display: flex; flex-direction: column; gap: 10px; }
.level__desc { font-size: 15px; color: var(--ink2); min-height: 1.5em; }
.level .seg__opt { padding-block: 12px; }

/* nested-content options (archives / email) */
.arch { display: flex; flex-direction: column; gap: 10px; }
.arch__q { font-size: 14.5px; color: var(--ink2); }
.arch__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.arch__opt { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 12px 14px; border: 2px solid var(--frame); border-radius: var(--radius-ctl); background: var(--surf); cursor: pointer; }
.arch__opt b { font-family: var(--font-mono); font-weight: 400; font-size: 14px; color: var(--ink); }
.arch__opt span { font-size: 13px; color: var(--muted); line-height: 1.45; }
.arch__opt[aria-checked="true"] { border-color: var(--lime-ink); background: var(--lime-bg); box-shadow: inset 0 -3px 0 var(--lime); }
.arch__opt--risky[aria-checked="true"] { border-color: var(--amber); background: var(--amber-bg); box-shadow: inset 0 -3px 0 var(--amber); }
.arch__opt[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.arch__note { font-size: 13.5px; color: var(--ink2); }
.page-note { font-size: 13.5px; color: var(--ink2); line-height: 1.55; }

/* ── 2 · Watch it work ─────────────────────────────────────────── */
.demo__row { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; margin-top: 36px; }
.demo__samples { flex: 1 1 240px; display: flex; flex-direction: column; }
.demo__log { flex: 1.3 1 320px; display: flex; flex-direction: column; }
.demo__find { flex: 1.6 1 380px; display: flex; flex-direction: column; position: relative; }
.samples { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.sample { display: flex; align-items: center; gap: 12px; padding: 12px; width: 100%; text-align: left; cursor: pointer; border: 2px solid var(--frame); border-radius: var(--radius-ctl); background: var(--bg2); }
.sample[aria-pressed="true"] { border-color: var(--lime); background: var(--lime-bg); }
.sample:hover { border-color: var(--teal); }
.sample img { width: 27px; height: 27px; flex: none; image-rendering: pixelated; }
.sample__t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sample__file { font-family: var(--font-mono); font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.sample__kind { font-size: 13px; color: var(--muted); }
.demo__logbody { position: relative; flex: 1; padding: 16px; min-height: 260px; background: var(--surf); }
.demo__findbody { padding: 16px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.demo__boo { display: flex; align-items: center; gap: 14px; }
.demo__boo img { flex: none; }
.demo__line { font-family: var(--font-mono); font-size: 15px; line-height: 1.5; color: var(--ink); }
.fchips { display: flex; flex-direction: column; gap: 8px; }
.fc { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 2px solid var(--frame); border-radius: var(--radius-ctl); background: var(--bg2); min-width: 0; }
.fc--threat { border-color: var(--red); background: var(--red-bg); }
.fc img { width: 18px; height: 18px; flex: none; image-rendering: pixelated; }
.fc__l { font-family: var(--font-mono); font-size: 13px; color: var(--ink); flex: none; min-width: 7.5em; }
.fc__v { font-size: 14px; color: var(--ink2); min-width: 0; overflow-wrap: anywhere; }
.fc.is-cleaning .fc__v { text-decoration: line-through; text-decoration-color: var(--lime-ink); }
.fc__tag { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--muted); flex: none; }
.fc--threat .fc__tag { color: var(--red); }
.fc.is-cleaning .fc__tag { color: var(--lime-ink); }
.fchips__more { font-family: var(--font-mono); font-size: 12px; color: var(--muted); padding-left: 4px; }
.demo__done { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: auto; padding-top: 8px; }
.demo__done .stamp { font-size: 22px; padding: 6px 12px; }
.demo__verdict { font-size: 15px; color: var(--ink2); flex: 1 1 200px; }

/* ── 3 · What does your photo know ─────────────────────────────── */
.photo__grid { display: flex; flex-wrap: wrap-reverse; gap: 56px; align-items: center; }
.photo__win { flex: 1 1 520px; min-width: 0; }
.photo__text { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.stage { position: relative; aspect-ratio: 64 / 44; overflow: hidden; background: var(--bg2); }
.slide { position: absolute; inset: 0; will-change: transform; transform: scale(.93); opacity: 0; z-index: 1; }
.slide img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.slide.is-cur { transform: none; opacity: 1; z-index: 3; transition: transform .8s cubic-bezier(.22, .8, .2, 1), opacity .5s ease; }
.slide.is-prev { transform: translateX(118%) rotate(7deg); opacity: 1; z-index: 4; transition: transform .8s cubic-bezier(.6, 0, .3, 1); box-shadow: 0 24px 48px rgba(0, 0, 0, .28); }
.slide.is-next { transform: scale(.93); opacity: 1; z-index: 2; transition: transform .8s cubic-bezier(.22, .8, .2, 1), opacity .5s ease; }
.bubble { position: absolute; display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-family: var(--font-mono); font-size: 12px; line-height: 1.2; color: var(--ink); background: var(--surf); border: 2px solid var(--frame); border-radius: var(--radius-ctl); white-space: nowrap; transform-origin: 16px 100%; box-shadow: var(--soft-win); opacity: 0; }
.bubble::after { content: ""; position: absolute; left: 12px; bottom: -8px; width: 11px; height: 11px; background: var(--surf); border-right: 2px solid var(--frame); border-bottom: 2px solid var(--frame); transform: rotate(45deg); }
.bubble img { width: 18px; height: 18px; image-rendering: pixelated; }
.slide.is-cur .bubble { animation: bubIn .55s cubic-bezier(.2, .9, .3, 1.2) both; }
.slide.is-prev .bubble { opacity: 1; }
.slide.is-cur .bubble:nth-of-type(1) { animation-delay: .55s; }
.slide.is-cur .bubble:nth-of-type(2) { animation-delay: .77s; }
.slide.is-cur .bubble:nth-of-type(3) { animation-delay: .99s; }
@keyframes bubIn { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 100% { opacity: 1; transform: none; } }
.pips { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-top: 2px solid var(--frame); font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.pip { width: 22px; height: 8px; border: 0; padding: 0; background: var(--line); border-radius: var(--radius-sm); cursor: pointer; }
.pip[aria-current="true"] { background: var(--lime); }
.pips__count { margin-left: auto; }
.exif { font-family: var(--font-mono); font-size: 14px; line-height: 2; border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); padding-block: 10px; font-variant-numeric: tabular-nums; }
.exif .k { color: var(--teal); }
.exif .n { color: var(--amber); }
.photo__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.photo__cta span { font-size: 15px; color: var(--muted); }

/* ── 4 · Webpage scanner teaser ────────────────────────────────── */
.scanx__top { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-end; }
.scanx__head { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.scanx__form { flex: 1 1 440px; min-width: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.scanx__form .field { flex: 1 1 260px; font-size: 14px; padding: 14px; }
.scanx__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 36px; }
.vcard__body { padding: 18px; display: flex; gap: 16px; }
.vcard__t { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vcard__v { font-family: var(--font-mono); font-size: 18px; }
.vcard__d { font-size: 14px; line-height: 1.6; color: var(--ink2); }
.scanx__foot { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; margin-top: 36px; }

/* ── 5 · How deep ─────────────────────────────────────────────── */
.levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 36px; }
.lcard { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.lcard__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-family: var(--font-mono); }
.lcard__name { font-size: 22px; }
.lcard__meter { font-size: 16.5px; letter-spacing: 2px; }
.lcard p { font-size: 15px; line-height: 1.6; color: var(--ink2); }
.lcard .for { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.checks { max-width: 760px; margin-top: 36px; font-family: var(--font-mono); }
.checks__body { padding: 16px 18px; font-size: 14px; line-height: 2; }
.checks__body .box { color: var(--lime-ink); }
.checks__body .n { color: var(--muted); }

/* ── 6 · Why I built this ─────────────────────────────────────── */
.why__grid { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.vim { flex: 1.4 1 480px; }
.vim__main { display: flex; }
/* gutter fills whatever height the text needs; the numbers never stretch the card */
.vim__nums { position: relative; flex: none; width: 36px; overflow: hidden; color: var(--muted); font-family: var(--font-mono); font-size: 13px; line-height: 1.9; border-right: 2px solid var(--line); user-select: none; }
.vim__nums > span { position: absolute; top: 20px; right: 10px; text-align: right; }
.vim__text { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.vim__text p { font-size: 17px; line-height: 1.75; color: var(--ink2); }
.vim__enjoy { font-family: var(--font-mono); color: var(--lime-ink); }
.vim__sig { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.vim__av { width: 44px; height: 44px; background: var(--teal); color: var(--bg); border: 2px solid var(--frame); display: inline-grid; place-items: center; font-family: var(--font-mono); font-size: 22px; }
.vim__by { font-family: var(--font-mono); font-size: 14px; color: var(--ink); }
.vim__status { padding: 4px 10px; background: var(--sel); color: var(--on-sel); font-family: var(--font-mono); font-size: 12px; display: flex; justify-content: space-between; }
.why__list { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.ticklist { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 14.5px; line-height: 1.6; }
.ticklist li { display: flex; gap: 12px; }
.ticklist li::before { content: "[x]"; color: var(--lime-ink); flex: none; }

/* ── 7 · Extension ─────────────────────────────────────────────── */
.ext__grid { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.ext__text { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-family: var(--font-mono); font-size: 14.5px; counter-reset: st; }
.steps li { display: flex; gap: 12px; counter-increment: st; }
.steps li::before { content: counter(st); color: var(--on-lime); background: var(--lime); padding: 0 6px; height: fit-content; border-radius: var(--radius-sm); }
.ext__mock { flex: 1.2 1 480px; min-width: 0; }
.browser__bar { gap: 10px; padding: 8px 12px; }
.browser__url { flex: 1; min-width: 0; background: var(--bg); border: 2px solid var(--frame); border-radius: var(--radius-sm); padding: 4px 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.browser__ct { background: var(--lime); color: var(--on-lime); padding: 2px 6px; border-radius: var(--radius-sm); }
.browser__page { position: relative; padding: 22px; min-height: 300px; background: var(--bg2); }
.browser__lines { display: flex; flex-direction: column; gap: 12px; max-width: 52%; }
.browser__lines i { display: block; height: 10px; background: var(--line); border-radius: 2px; }
.popup { position: absolute; top: 12px; right: 14px; width: min(270px, 52%); }
.popup__body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.popup__v { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 16px; color: var(--amber); }
.popup__bars { font-family: var(--font-mono); font-size: 12px; line-height: 1.8; color: var(--ink2); white-space: pre; }
.popup__opt { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-top: 2px solid var(--line); padding-top: 10px; font-size: 13px; color: var(--ink2); }
.on-pill { font-family: var(--font-mono); background: var(--lime); color: var(--on-lime); padding: 2px 6px; font-size: 11px; border-radius: var(--radius-sm); }

/* ── 8 · Developers ────────────────────────────────────────────── */
.dev__grid { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.dev__code { flex: 1.4 1 500px; }
.dev__code pre { margin: 0; padding: 20px; overflow-x: auto; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.8; color: var(--ink2); }
.dev__text { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* ── 8b · Mobile only: use it on your computer too ─────────────── */
.later { display: none; }

/* ── 9 · FAQ + loop back ───────────────────────────────────────── */
.faq__grid { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.faq__list { flex: 1.3 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.again { flex: 1 1 380px; min-width: 0; position: relative; padding-top: 48px; }
.again > .spr { position: absolute; top: 0; left: 24px; z-index: 2; }
.again__zone { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 18px; width: calc(100% - 36px); font: inherit; color: var(--ink); padding: 32px 18px; border: 2px dashed var(--frame); border-radius: var(--radius-ctl); background: var(--bg2); cursor: pointer; text-align: center; }
.again__zone:hover, .again__zone:focus-visible { border-color: var(--teal); background: var(--teal-bg); }
.again__zone b { font-family: var(--font-mono); font-weight: 400; font-size: 22px; }
.again__zone span { font-size: 14px; color: var(--muted); }

/* Whole-page drag overlay */
.drag-overlay { display: none; }
body.page-drag-overlay .drag-overlay { display: grid; place-items: center; position: fixed; inset: 0; z-index: 80; background: var(--scrim); pointer-events: none; }
.drag-overlay__box { padding: 40px 56px; border: 3px dashed var(--lime); border-radius: var(--radius-win); background: var(--surf); font-family: var(--font-mono); font-size: 22px; color: var(--ink); }

/* ═══ Result view (board "File result") ═════════════════════════ */
.result { display: none; padding: 40px var(--gutter-r) 96px var(--gutter); }
body.is-result .result { display: block; }
body.is-result .home { display: none; }
.result__in { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.result__back { align-self: flex-start; background: none; border: 0; padding: 0; font-family: var(--font-mono); font-size: 14px; color: var(--teal); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.result__back:hover { color: var(--lime-ink); }
.result__grid { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.result__main { flex: 999 1 640px; min-width: 0; }
.result__body { padding: 28px; display: flex; flex-direction: column; gap: 26px; }
.verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 24px; }
.verdict > .spr { flex: none; }
.verdict__t { flex: 1 1 280px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.verdict__line { font-size: 20px; line-height: 1.45; }
.verdict__strength { font-size: 14.5px; line-height: 1.6; color: var(--ink2); }
.dlrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.dlrow__note { font-size: 13px; color: var(--muted); }
.statgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 2px solid var(--frame); border-radius: var(--radius-ctl); overflow: hidden; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.statgrid > div { padding: 16px; border-right: 2px solid var(--frame); min-width: 0; }
.statgrid > div:last-child { border-right: 0; }
.statgrid .n { font-size: 33px; line-height: 1.1; }
.statgrid .n--sm { font-size: 20px; padding-top: 8px; overflow-wrap: anywhere; }
.statgrid .n--red { color: var(--red); }
.statgrid .l { font-size: 12px; color: var(--muted); margin-top: 6px; }
.removed { display: flex; flex-direction: column; gap: 10px; }
.removed__h { font-family: var(--font-mono); font-size: 22px; }
.removed .disc__body p { font-size: 15px; line-height: 1.6; color: var(--ink2); }
.threat { display: flex; flex-direction: column; gap: 8px; }
.threat + .threat { padding-top: 10px; border-top: 2px solid var(--line); }
.threat__t { font-size: 15px; line-height: 1.6; color: var(--ink); }
.nofind { padding: 22px; border: 2px dashed var(--frame); border-radius: var(--radius-ctl); font-family: var(--font-mono); font-size: 15px; line-height: 1.7; color: var(--ink2); }
.nofind span { color: var(--muted); }
.notes { display: flex; flex-direction: column; gap: 10px; }
.advanced { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; padding-top: 14px; border-top: 2px solid var(--line); font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.advanced button { background: none; border: 0; padding: 0; font: inherit; color: var(--teal); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.advanced button:hover { color: var(--lime-ink); }
.techrep { display: flex; flex-direction: column; gap: 10px; }
.techrep__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.techrep__list > li { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 2px solid var(--line); border-radius: var(--radius-ctl); background: var(--bg); font-size: 14px; line-height: 1.55; color: var(--ink2); }
.techrep__list > li.is-danger { border-color: var(--red); background: var(--red-bg); }
.techrep__list > li.is-danger b { color: var(--red); font-weight: 600; }
.techrep__type { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.techrep__sum { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.members { display: flex; flex-direction: column; gap: 8px; }
.members__h { font-family: var(--font-mono); font-size: 14px; color: var(--ink); }
.member > summary .badge { flex: none; }
.member__path { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
.result__aside { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.pitch { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.pitch__head { display: flex; align-items: center; gap: 14px; }
.pitch p { font-size: 15px; line-height: 1.6; color: var(--ink2); }
.checksrun { padding: 18px; font-family: var(--font-mono); font-size: 13px; line-height: 1.9; color: var(--ink2); }
.checksrun__h { color: var(--ink); margin-bottom: 6px; }
.checksrun .on { color: var(--lime-ink); }
.checksrun .off { color: var(--muted); }
.gotlink { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.gotlink b { font-family: var(--font-mono); font-weight: 400; font-size: 13px; color: var(--ink); }
.gotlink span { font-size: 14px; line-height: 1.6; color: var(--ink2); }
.rbar { display: none; }

/* ── Preview modal ─────────────────────────────────────────────── */
.pv { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px var(--gutter-r) 24px var(--gutter); }
.pv.hidden { display: none; }
.pv__scrim { position: absolute; inset: 0; background: var(--scrim); }
.pv__dialog { position: relative; width: min(980px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; }
.pv__bar { gap: 12px; flex-wrap: wrap; }
.pv__title { font-family: var(--font-mono); font-size: 13px; color: var(--ink); margin: 0; font-weight: 400; }
.pv__meta { color: var(--muted); }
.pv__zoom { display: flex; gap: 6px; margin-left: auto; }
.pv__zoom button, .pv__close { font-family: var(--font-mono); font-size: 13px; min-width: 32px; height: 28px; padding: 0 8px; border: 2px solid var(--frame); border-radius: var(--radius-sm); background: var(--surf); color: var(--ink); cursor: pointer; }
.pv__zoom button:disabled { opacity: .45; cursor: default; }
.pv__close { margin-left: 6px; }
.pv__zoom + .pv__close { margin-left: 0; }
.pv__body { flex: 1; min-height: 240px; overflow: auto; background: var(--bg2); padding: 18px; }
.pv__body.is-panning { cursor: grabbing; }
.pv__status { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 200px; font-family: var(--font-mono); font-size: 14px; color: var(--ink2); text-align: center; }
.pv__status.is-error { color: var(--red); }
.cti-preview-spinner { width: 40%; max-width: 260px; height: 14px; border: 2px solid var(--frame); border-radius: var(--radius-sm); background: repeating-linear-gradient(90deg, var(--lime) 0 10px, transparent 10px 20px); background-size: 40px 100%; animation: pvStripe .8s steps(4) infinite; }
@keyframes pvStripe { to { background-position: 40px 0; } }
.pv__ext { margin-bottom: 14px; }
.pv__pages { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pv__pages figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.pv__pages img { display: block; width: 100%; height: auto; background: #fff; border: 2px solid var(--frame); }
.pv__pages.is-zoomed figure { width: auto; }
.pv__pages.is-zoomed img { width: var(--preview-page-width, auto); max-width: none; }
.pv__pages figcaption { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.cti-preview-expired { padding: 24px; font-family: var(--font-mono); font-size: 13px; color: var(--amber); border: 2px dashed var(--amber); border-radius: var(--radius-ctl); }
.pv__trunc { padding: 10px 14px; border-top: 2px solid var(--frame); font-family: var(--font-mono); font-size: 12px; color: var(--amber); background: var(--surf); }
body.cti-modal-open { overflow: hidden; }

/* ═══ Responsive ════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  .mz.idle-walk { animation: none; }
}
@media (max-width: 767px) {
  .hsec { padding-top: 40px; padding-bottom: 40px; }
  .hero { padding-top: 32px; padding-bottom: 36px; }
  .hero__grid { gap: 20px; }
  .hero__text { gap: 20px; }
  .hero__h1 { font-size: 33px; line-height: 1.12; }
  .hero__lead { font-size: 16px; }
  .hero .neo { display: none; }
  .hero__machine { padding-top: 40px; }
  .mz { width: 60px; height: 60px; right: 18px; top: 0; }
  .mz img { width: 60px; height: 60px; }
  .drop__body { padding: 16px; gap: 14px; }
  .zone--file { display: none; }
  .zone--url { padding: 14px; }
  .fchip { padding: 12px; gap: 10px; }
  .fchip__ico { width: 27px; height: 27px; }
  .fchip__name { font-size: 14px; }
  .level__label { display: none; }
  .level .seg__opt { font-size: 13px; padding: 10px 4px; }
  .level .seg__meter { display: none; }
  .level__desc { font-size: 14px; }
  .hero__ticks { padding-top: 0; font-size: 12px; gap: 6px 14px; }
  .hero__ticks .t-scan { display: none; }
  .hsec__head { gap: 12px; }

  /* mobile order: hero, photo, demo, scanner, levels, why, later, faq */
  .s-hero { order: 1; } .s-photo { order: 2; } .s-demo { order: 3; } .s-scan { order: 4; }
  .s-how { order: 5; } .s-why { order: 6; } .s-later { order: 7; } .s-faq { order: 8; background-color: var(--bg2); }
  .s-ext, .s-dev { display: none; }
  .s-photo { background-color: var(--bg2); background-image: none; }
  .s-demo { background-color: var(--bg); }
  .s-how { background-color: var(--bg); }

  .demo__row { margin-top: 18px; gap: 18px; }
  .demo__log { display: none; }
  .demo__samples { flex-basis: 100%; border: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
  .demo__samples .win__bar, .sample__kind, .sample img, .samples .btn { display: none; }
  .samples { flex-direction: row; overflow-x: auto; padding: 0 0 4px; gap: 8px; }
  .sample { flex: none; width: auto; padding: 10px 12px; }
  .sample__file { font-size: 12px; white-space: nowrap; }
  .demo__find { flex-basis: 100%; }
  .demo__findbody { padding: 12px; gap: 8px; }
  .demo__boo img { width: 48px; height: 48px; }
  .demo__line { font-size: 14px; }
  .fc { gap: 10px; padding: 9px 10px; }
  .fc__l { font-size: 12px; min-width: 0; }
  .fc__v { font-size: 13px; flex: 1; }
  .fc__tag { font-size: 10px; }
  .fc:nth-child(n+4) { display: none; }
  .demo__done { display: none; }

  .photo__grid { flex-direction: column; flex-wrap: nowrap; gap: 18px; align-items: stretch; }
  .photo__text { display: contents; }
  .photo__text > .eyebrow { order: 1; }
  .photo__text > .h2 { order: 2; }
  .photo__win { order: 3; flex: none; }
  .photo__text > .exif { order: 4; }
  .photo__text > .photo__cta { order: 5; }
  .photo__lead, .photo__cta span { display: none; }
  .exif { font-size: 13px; line-height: 1.9; border: 0; padding: 0; }
  .exif .n { display: none; }
  .photo__cta .btn { flex: 1 1 100%; }
  .bubble { font-size: 11px; padding: 4px 8px; }
  .bubble img { width: 14px; height: 14px; }
  .slide .bubble:nth-of-type(3) { display: none; }
  .pip { pointer-events: none; }

  .scanx__top { gap: 16px; }
  .scanx__head .lead { display: none; }
  .scanx__form { flex-direction: column; }
  .scanx__form .field { flex-basis: auto; min-height: 48px; }
  .scanx__cards { margin-top: 16px; gap: 12px; }
  .vcard--ok, .vcard--sus { display: none; }
  .vcard .win__bar { display: none; }
  .vcard__body { padding: 14px; gap: 12px; }
  .vcard__v { font-size: 16px; }
  .scanx__foot { margin-top: 16px; }

  .levels { margin-top: 18px; gap: 14px; }
  .lcard { padding: 14px; gap: 6px; }
  .lcard__name { font-size: 16px; }
  .lcard__meter { font-size: 14px; }
  .lcard p { font-size: 14px; line-height: 1.5; }
  .lcard .for, .checks { display: none; }
  .s-how .go { display: none; }

  .vim__nums { display: none; }
  .vim__text { padding: 16px; gap: 12px; }
  .vim__text p { font-size: 15px; line-height: 1.7; }
  .vim__av { display: none; }
  .vim__by { font-size: 13px; }
  .vim__status span + span { display: none; }
  .why__grid { gap: 18px; }
  .why__list { gap: 12px; }
  .ticklist { font-size: 13.5px; gap: 10px; }
  .ticklist li:last-child { display: none; }

  .later { display: flex; flex-direction: column; gap: 14px; }
  .later .h3 { font-size: 22px; }
  .later p { font-size: 15px; line-height: 1.6; color: var(--ink2); }

  .faq__grid { gap: 32px; }
  .again { padding-top: 40px; }
  .again > .spr { width: 52px; height: 52px; left: 18px; }
  .again__zone { margin: 14px; width: calc(100% - 28px); padding: 26px 14px; }
  .again__zone b { font-size: 20px; }
  .again__zone .d-only { display: none; }

  .result { padding-top: 32px; padding-bottom: 56px; }
  .result__body { padding: 16px; gap: 20px; }
  .verdict > .spr { width: 64px; height: 64px; }
  .verdict .stamp { font-size: 26px; }
  .verdict__line { font-size: 17px; }
  .statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statgrid > div { padding: 12px; }
  .statgrid > div:nth-child(2) { border-right: 0; }
  .statgrid > div:last-child { grid-column: 1 / -1; border-top: 2px solid var(--frame); }
  .statgrid .n { font-size: 26px; }
  .dlrow .btn { flex: 1 1 100%; }
  .dlrow .btn--lg { font-size: 16.5px; padding: 16px; }
  .rbar { display: flex; position: sticky; bottom: 0; z-index: 40; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surf); border-top: 2px solid var(--lime); font-family: var(--font-mono); }
  body:not(.is-result) .rbar { display: none; }
  .rbar__stamp { border: 2px solid var(--lime); color: var(--lime-ink); padding: 3px 7px; font-size: 13px; border-radius: var(--radius-sm); flex: none; }
  .rbar__line { font-size: 12px; color: var(--ink2); flex: 1; min-width: 0; }
  .rbar .btn { padding: 12px; font-size: 13px; flex: none; }

  .pv { padding: 0; }
  .pv__dialog { max-height: 100vh; height: 100%; border-radius: 0; }
}
@media (hover: none) { .mz.idle-peek, .mz.idle-walk, .mz.idle-vanish { animation: none; } }
@media (prefers-reduced-motion: reduce) {
  .slide { transition: none !important; }
  .bubble { opacity: 1 !important; }
}
.result:focus { outline: none; }