/* ==========================================================================
   FileSway · Scan a document with iPhone
   Self-contained page styles (fonts, media and HDR assets live in ../).
   Visual thesis: scanning told as light finding an edge. Blue corner
   brackets "lock on" to what matters; a bright capture line marks the
   moments the real screen recording proves.
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* brand */
  --blue: #3866D6;
  --r1: #274CC4; --r2: #487DEE; --r3: #77A5FF; --r4: #9EC5FF; --r5: #BDD7FF;
  --light: #F4F6FA;
  --navy: #17223B;
  --dark: #101722;
  /* roles */
  --ink: var(--navy);
  --ink-2: #44506B;           /* 7.2:1 on --light */
  --rule: #D6DDEA;
  --paper: #FFFFFF;
  --on-dark: #F4F6FA;
  --on-dark-2: #AEBAD4;       /* 9:1 on --dark */
  --rule-dark: rgba(189, 215, 255, .16);
  --link-dark: #9EC5FF;
  --focus: #77A5FF;

  /* light: SDR values first. Upgraded below for HDR-capable screens. */
  --glow: #FFFFFF;
  --glow-soft: rgba(255, 255, 255, .55);
  --glow-blue: rgba(119, 165, 255, .45);

  /* type */
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --text: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* layout */
  --gutter: clamp(20px, 4.4vw, 64px);
  --max: 1240px;
  --header-h: 72px;
  --r-control: 999px;
  --r-tile: 18px;
  --r-media: 28px;
  --r-island: clamp(24px, 3vw, 40px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

/* ---------- HDR "magic white" (progressive enhancement) ----------
   1) Only on screens that report HDR (dynamic-range: high)
   2) Only where the browser parses extended color() values.
   CSS Color 4 lets color() channels go above 1; CSS Color HDR defines
   values above reference white (1.0) as brighter-than-white on HDR
   displays. Today most engines still gamut-map these to plain white, so
   the visible HDR light comes from the PQ-encoded PNG layers (.hdr-img)
   gated further down. These tokens light up automatically as engines
   ship CSS HDR colors, and are simply white everywhere else. */
@media (dynamic-range: high) {
  @supports (color: color(display-p3 1 1 1)) {
    :root {
      --glow: color(display-p3 2.4 2.5 2.7);            /* ~ +1.3 stops */
      --glow-soft: color(display-p3 1.6 1.7 1.9 / .55);
      --glow-blue: color(display-p3 .6 .8 1.6 / .5);
    }
  }
  @supports (color: color(rec2100-linear 1 1 1)) {
    :root {
      /* rec2100-linear: 1.0 = 203 nit reference white. 4 ≈ 812 nits (+2 stops). */
      --glow: color(rec2100-linear 3.6 3.8 4);
    }
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--light);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
/* Photos and screen recordings stay at SDR brightness on HDR screens, so
   only the intentional glow layers can exceed reference white. */
img, video, picture { dynamic-range-limit: standard; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.04; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: min(100% - var(--gutter) * 2, var(--max)); margin-inline: auto; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--paper); color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }

.eyebrow { font: 600 13px/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin: 0 0 18px; display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.on-dark .eyebrow { color: var(--r4); }

.pro {
  display: inline-flex; align-items: center; gap: 4px;
  font: 700 11px/1 var(--text); letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: linear-gradient(135deg, var(--r1), var(--r2));
  padding: 5px 8px 4px; border-radius: 6px; vertical-align: .15em; white-space: nowrap;
}

/* ---------- Signature: edge-detection corner brackets ---------- */
.lock { position: relative; }
.lock > .c { position: absolute; width: var(--c-size, 22px); height: var(--c-size, 22px); border: 0 solid var(--c-color, var(--r3)); pointer-events: none; }
.lock > .c:nth-of-type(1) { top: var(--c-in, -14px); left: var(--c-in, -14px); border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 6px; }
.lock > .c:nth-of-type(2) { top: var(--c-in, -14px); right: var(--c-in, -14px); border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 6px; }
.lock > .c:nth-of-type(3) { bottom: var(--c-in, -14px); left: var(--c-in, -14px); border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 6px; }
.lock > .c:nth-of-type(4) { bottom: var(--c-in, -14px); right: var(--c-in, -14px); border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 6px; }

/* ---------- Buttons ---------- */
.store {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 9px 22px 9px 16px;
  border-radius: 16px; text-decoration: none;
  background: var(--paper); color: var(--dark);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 10px 30px -12px rgba(56,102,214,.55);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.store svg { width: 26px; height: 26px; flex: none; }
.store span { display: grid; line-height: 1.1; text-align: left; }
.store small { font: 500 12px/1.2 var(--text); color: #4A5878; }
.store strong { font: 700 17px/1.2 var(--display); letter-spacing: -.01em; }
.store:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 16px 34px -12px rgba(56,102,214,.7); }
.store[aria-disabled="true"] { cursor: default; }
.store.is-blue { background: var(--blue); color: #fff; }
.store.is-blue small { color: #DDE8FF; }

.btn-line {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 6px;
  font-weight: 600; text-decoration: none; color: inherit;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
}
.btn-line svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.btn-line:hover svg { transform: translateY(2px); }

/* ---------- Header ---------- */
.site-header {
  position: absolute; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  color: var(--on-dark);
}
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 21px/1 var(--display); letter-spacing: -.02em; text-decoration: none; color: inherit; }
.brand img { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; list-style: none; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 15px; font-weight: 500; color: var(--on-dark-2); text-decoration: none; border-radius: 10px; }
.nav a:hover { color: var(--on-dark); background: rgba(255,255,255,.06); }
.header-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: var(--r-control); background: rgba(255,255,255,.08); border: 1px solid var(--rule-dark); color: var(--on-dark); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.header-cta svg { width: 18px; height: 18px; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 12px; border: 1px solid var(--rule-dark); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { position: relative; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.menu summary span::before, .menu summary span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s var(--ease); }
.menu summary span::before { top: -6px; } .menu summary span::after { top: 6px; }
.menu[open] summary span { background: transparent; }
.menu[open] summary span::before { transform: translateY(6px) rotate(45deg); }
.menu[open] summary span::after { transform: translateY(-6px) rotate(-45deg); }
/* Mobile menu sheet: fixed to the viewport (not to the button), so it can never hang off the left edge.
   Insets respect the safe area; the header has no transform/filter, so "fixed" resolves to the viewport. */
.menu summary { position: relative; z-index: 1; }
.menu[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(6, 10, 18, .74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); cursor: default; }
.menu-panel {
  position: fixed; z-index: 2;
  top: calc(var(--header-h) + 6px);
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  width: auto; max-height: calc(100vh - var(--header-h) - 24px); overflow-y: auto; overscroll-behavior: contain;
  padding: 10px; border-radius: 20px; background: #172036; border: 1px solid rgba(189, 215, 255, .22);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.85);
}
@media (min-width: 560px) { .menu-panel { left: auto; width: 320px; right: max(var(--gutter), env(safe-area-inset-right)); } }
.menu-panel a { display: flex; min-height: 48px; font-size: 16px; align-items: center; padding: 0 14px; border-radius: 10px; color: var(--on-dark); text-decoration: none; font-weight: 500; }
.menu-panel a:hover { background: rgba(255,255,255,.06); }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  background:
    radial-gradient(60% 55% at 78% 38%, rgba(56,102,214,.30), transparent 70%),
    radial-gradient(40% 40% at 8% 100%, rgba(39,76,196,.22), transparent 70%),
    var(--dark);
  color: var(--on-dark);
  padding: calc(var(--header-h) + clamp(24px, 4vw, 56px)) 0 0;
  overflow: hidden;
}
.hero::before { /* faint document grid, like the scanner's alignment field */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: linear-gradient(rgba(189,215,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(189,215,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 40%, #000, transparent 75%);
  mask-image: radial-gradient(70% 70% at 70% 40%, #000, transparent 75%);
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
  padding-bottom: clamp(40px, 5vw, 72px);
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--on-dark-2); margin-bottom: clamp(22px, 3vw, 36px); }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.crumbs a { color: var(--on-dark-2); text-decoration: none; }
.crumbs a:hover { color: var(--on-dark); text-decoration: underline; }
.crumbs [aria-current] { color: var(--on-dark); }

.h1-lock { display: inline-block; --c-in: clamp(-22px, -1.6vw, -12px); --c-size: clamp(16px, 2vw, 28px); margin: 6px 0 clamp(24px, 3vw, 36px) clamp(12px, 1.6vw, 22px); }
.hero h1 {
  font-size: clamp(2.65rem, 1.1rem + 5.3vw, 6.4rem);
  line-height: .93; letter-spacing: -.045em; font-weight: 750;
}
.hero h1 .l { display: block; }
.hero h1 .soft { color: var(--r4); font-weight: 600; }
.lead { font-size: clamp(18px, 1rem + .35vw, 21px); line-height: 1.55; color: var(--on-dark-2); max-width: 34em; margin-bottom: 30px; }
.lead strong { color: var(--on-dark); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.hero .btn-line { color: var(--on-dark); }
.privacy-line { display: flex; gap: 10px; align-items: flex-start; margin: 28px 0 0; font-size: 14.5px; color: var(--on-dark-2); max-width: 34em; }
.privacy-line svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--r4); }

/* Hero proof: real recording + annotation rail */
.proof { display: grid; grid-template-columns: auto minmax(0, 300px); gap: 22px; align-items: center; justify-content: end; margin: 0; }
.screen {
  position: relative; aspect-ratio: 540 / 1174; width: 100%;
  border-radius: clamp(26px, 3vw, 40px); overflow: hidden; background: #0B1019;
  box-shadow: 0 0 0 1px rgba(189,215,255,.16), 0 0 0 8px rgba(16,23,34,.9), 0 0 0 9px rgba(189,215,255,.10), 0 40px 90px -30px rgba(39,76,196,.65);
}
.screen img, .screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen video { opacity: 0; transition: opacity .5s var(--ease); }
.screen video.is-on { opacity: 1; }
.rail { list-style: none; position: relative; display: grid; gap: 34px; padding-left: 22px; font-size: 13.5px; line-height: 1.35; color: var(--on-dark-2); max-width: 168px; }
.rail::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--rule-dark); }
.rail li { position: relative; transition: color .3s; }
.rail li::before { content: ""; position: absolute; left: -22px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--dark); border: 1.5px solid var(--r3); transition: background .3s, box-shadow .3s; }
.rail b { display: block; font: 600 11px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--r4); margin-bottom: 5px; }
.rail li.is-now { color: var(--on-dark); }
.rail li.is-now::before { background: var(--glow); border-color: var(--glow); box-shadow: 0 0 10px 2px var(--glow-blue); }
.proof figcaption { grid-column: 1 / -1; justify-self: end; max-width: 440px; font-size: 13px; color: var(--on-dark-2); text-align: right; margin-top: 4px; }

/* Quick answer: ruled strip on dark */
.qa { border-top: 1px solid var(--rule-dark); background: rgba(10,15,24,.45); }
.qa-inner { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px 48px; padding: clamp(28px, 3.5vw, 44px) 0; }
.qa h2 { font-size: 22px; letter-spacing: -.01em; }
.qa .updated { font-size: 13px; color: var(--on-dark-2); margin-top: 10px; }
.qa ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; counter-reset: qa; }
.qa li { counter-increment: qa; padding: 4px 22px 4px 18px; border-left: 1px solid var(--rule-dark); font-size: 15px; line-height: 1.5; color: var(--on-dark); }
.qa li::before { content: counter(qa, decimal-leading-zero); display: block; font: 600 12px/1 var(--text); letter-spacing: .1em; color: var(--r3); margin-bottom: 10px; }
.qa li .pro { margin-left: 2px; }

/* Capture line: the hand-off between the dark scan and the light page */
.capture-line { position: relative; height: 2px; background: linear-gradient(90deg, transparent, var(--r2) 20%, var(--r4) 50%, var(--r2) 80%, transparent); }
.capture-line::after { /* bright glint, HDR-capable via --glow */
  content: ""; position: absolute; left: 50%; top: 50%; width: min(36vw, 420px); height: 2px; translate: -50% -50%;
  background: linear-gradient(90deg, transparent, var(--glow), transparent);
  box-shadow: 0 0 18px 2px var(--glow-blue);
  dynamic-range-limit: standard;
  dynamic-range-limit: dynamic-range-limit-mix(standard 50%, no-limit 50%);
}

/* ---------- Generic sections ---------- */
.section { padding: clamp(72px, 9vw, 136px) 0; }
.section-head { max-width: 46rem; margin-bottom: clamp(36px, 4vw, 56px); }
.section h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); }
.section-head p { font-size: 18px; color: var(--ink-2); margin-top: 18px; }
.prose a, .section a:not(.store):not(.btn-line) { color: var(--blue); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }

/* Steps */
.steps-grid { display: grid; grid-template-columns: minmax(250px, 340px) minmax(0, 1fr); gap: clamp(40px, 7vw, 112px); align-items: start; }
.steps-media { position: sticky; top: 32px; }
.steps-media .screen { box-shadow: 0 0 0 1px rgba(23,34,59,.08), 0 0 0 8px #fff, 0 0 0 9px rgba(23,34,59,.08), 0 40px 80px -36px rgba(23,34,59,.55); }
.media-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; font-size: 13px; color: var(--ink-2); }
.toggle { display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: var(--r-control); border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font: 600 13px/1 var(--text); cursor: pointer; }
.js .toggle { display: inline-flex; }
.toggle svg { width: 14px; height: 14px; }
.steps { list-style: none; counter-reset: s; border-bottom: 1px solid var(--rule); }
.step { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 0 24px; padding: 30px 0 32px; border-top: 1px solid var(--rule); }
.step::before { /* progress line that fills while this step plays */
  content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%;
  background: var(--blue); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .25s linear;
}
.step .n { --c-size: 12px; --c-in: -2px; --c-color: transparent; position: relative; width: 56px; height: 56px; display: grid; place-items: center; font: 700 22px/1 var(--display); color: #8A97B4; transition: color .25s; }
.step h3 { font-size: clamp(22px, 1rem + .8vw, 28px); margin: 12px 0 10px; letter-spacing: -.02em; }
.step p { color: var(--ink-2); margin: 0; max-width: 38em; }
.step .seek { display: none; margin-top: 16px; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 10px; border-radius: var(--r-control); border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font: 600 13px/1 var(--text); cursor: pointer; }
.js .step .seek { display: inline-flex; }
.step .seek svg { width: 18px; height: 18px; color: var(--blue); }
.step .seek:hover { border-color: var(--blue); }
.step.is-now .n { color: var(--blue); --c-color: var(--blue); }
.step-note { margin-top: 26px; font-size: 14px; color: var(--ink-2); max-width: 40em; }

/* Scan vs photo: editorial split */
.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.split .section-head { margin: 0; position: sticky; top: 32px; }
.rows { list-style: none; border-bottom: 1px solid var(--rule); }
.rows li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding: 24px 0; border-top: 1px solid var(--rule); }
.rows .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #E6ECF8; color: var(--blue); }
.rows .ico svg { width: 22px; height: 22px; }
.rows h3 { font-size: 20px; letter-spacing: -.015em; margin: 9px 0 6px; }
.rows p { margin: 0; color: var(--ink-2); }

/* After the scan: output index */
.band-white { background: var(--paper); }
.outputs { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.outputs li { position: relative; display: flex; flex-direction: column; padding: 24px 22px 26px; border-radius: var(--r-tile); background: var(--light); border: 1px solid #E2E8F3; }
.outputs .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--paper); color: var(--blue); box-shadow: 0 1px 0 rgba(23,34,59,.06); }
.outputs .ico svg { width: 22px; height: 22px; }
.outputs h3 { font-size: 19px; letter-spacing: -.015em; margin: 44px 0 8px; text-wrap: wrap; }
.outputs p { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.5; }
.outputs .pro { position: absolute; top: 24px; right: 20px; }
.outputs-foot { margin-top: 28px; font-size: 15px; color: var(--ink-2); }

/* Tips: quiet passage with an atmospheric photo */
.tips-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.photo { position: relative; margin: 0; }
.photo picture, .photo img { border-radius: var(--r-media); width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.photo .lock { position: absolute; inset: 12.2% 13.9% 10.6% 13.2%; --c-size: clamp(18px, 2.4vw, 30px); --c-in: 0px; --c-color: var(--r3); }
.photo figcaption { font-size: 13px; color: var(--ink-2); margin-top: 12px; }
.tips { list-style: none; counter-reset: t; }
.tips li { counter-increment: t; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-top: 1px solid var(--rule); }
.tips li:last-child { border-bottom: 1px solid var(--rule); }
.tips li::before { content: counter(t, decimal-leading-zero); font: 700 15px/1.6 var(--display); color: var(--blue); }

/* Built-in vs FileSway */
.compare2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-radius: var(--r-island); overflow: hidden; border: 1px solid var(--rule); background: var(--paper); }
.compare2 > div { padding: clamp(28px, 4vw, 52px); }
.compare2 > div + div { background: linear-gradient(180deg, #EEF3FD, #F7F9FE); border-left: 1px solid var(--rule); }
.compare2 h3 { font-size: 24px; margin-bottom: 14px; letter-spacing: -.02em; }
.compare2 .tag { display: inline-block; font: 600 12px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 18px; }
.checks { list-style: none; display: grid; gap: 14px; }
.checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; color: var(--ink); }
.checks svg { width: 22px; height: 22px; color: var(--blue); margin-top: 2px; }

/* Free vs Pro: dark inset island */
.island-wrap { padding: 0 clamp(10px, 1.6vw, 24px); }
.island {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-island); background: var(--dark); color: var(--on-dark);
  padding: clamp(56px, 7vw, 104px) 0;
}
.island::before { content: ""; position: absolute; inset: auto -10% -40% 40%; height: 80%; z-index: -1; background: radial-gradient(closest-side, rgba(56,102,214,.35), transparent); }
.island .section-head p { color: var(--on-dark-2); }
.island-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.section-head p.price { color: var(--on-dark); font: 700 clamp(3.4rem, 2rem + 4vw, 5.6rem)/1 var(--display); letter-spacing: -.05em; margin: 8px 0 6px; }
.section-head p.price small { font: 500 18px/1 var(--text); letter-spacing: 0; color: var(--on-dark-2); margin-left: 8px; }
.section-head p.price-note { color: var(--on-dark-2); font-size: 15px; max-width: 30em; }
.island a { color: var(--link-dark); }
.table-scroll { overflow-x: auto; border-radius: 20px; border: 1px solid var(--rule-dark); }
table.plans { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 420px; }
.plans caption { caption-side: bottom; text-align: left; padding: 16px 20px; font-size: 13.5px; color: var(--on-dark-2); border-top: 1px solid var(--rule-dark); }
.plans th, .plans td { padding: 17px 20px; text-align: left; border-top: 1px solid var(--rule-dark); vertical-align: middle; }
.plans thead th { border-top: 0; font: 700 16px/1.2 var(--display); color: var(--on-dark); background: rgba(255,255,255,.03); }
.plans thead th:last-child { color: var(--r4); }
.plans tbody th { font-weight: 500; color: var(--on-dark); }
.plans tbody th small { display: block; font-size: 13px; color: var(--on-dark-2); font-weight: 400; margin-top: 3px; }
.plans td { width: 24%; text-align: center; }
.plans thead th:not(:first-child) { text-align: center; }
.yes, .no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.yes { background: rgba(119,165,255,.18); color: var(--r4); }
.no { color: #6F7B96; }
.yes svg, .no svg { width: 14px; height: 14px; }
.plans .txt { font-weight: 600; color: var(--on-dark); }

/* Privacy statement */
.statement { text-align: center; max-width: 52rem; margin-inline: auto; }
.statement .ico { width: 52px; height: 52px; margin: 0 auto 22px; border-radius: 16px; display: grid; place-items: center; background: #E6ECF8; color: var(--blue); }
.statement .ico svg { width: 24px; height: 24px; }
.statement p.big { font: 600 clamp(1.6rem, 1rem + 1.7vw, 2.5rem)/1.2 var(--display); letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.statement p { color: var(--ink-2); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-aside { position: sticky; top: 32px; }
.faq-aside p { color: var(--ink-2); margin-top: 18px; }
.faq-list { border-bottom: 1px solid var(--rule); }
.faq-list details { border-top: 1px solid var(--rule); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font: 600 clamp(18px, 1rem + .3vw, 20px)/1.35 var(--display); letter-spacing: -.01em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--rule); background:
  linear-gradient(var(--ink), var(--ink)) center / 12px 2px no-repeat,
  linear-gradient(var(--ink), var(--ink)) center / 2px 12px no-repeat; transition: transform .25s var(--ease), background-color .25s; }
.faq-list details[open] summary::after { transform: rotate(45deg); background-color: #E6ECF8; }
.faq-list summary:hover { color: var(--blue); }
.faq-list .answer { padding: 0 56px 24px 0; color: var(--ink-2); }
.faq-list .answer p { margin: 0; }

/* Final */
.final { position: relative; isolation: isolate; overflow: hidden; background: var(--dark); color: var(--on-dark); padding: clamp(88px, 11vw, 168px) 0; }
.final-photo { position: absolute; inset: 0 0 0 34%; z-index: -2; -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%); mask-image: linear-gradient(90deg, transparent, #000 32%); }
.final-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; filter: saturate(1.05) brightness(1.18) contrast(1.05); }
.final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--dark) 36%, rgba(16,23,34,.7) 52%, rgba(16,23,34,0) 78%); }
.final-inner { max-width: 40rem; }
.icon-lock { position: relative; width: 92px; height: 92px; margin: 0 0 34px 12px; --c-size: 18px; --c-in: -12px; --c-color: var(--r4); }
.icon-lock img { width: 92px; height: 92px; border-radius: 22px; position: relative; z-index: 1; box-shadow: 0 20px 40px -16px rgba(0,0,0,.6); }
.icon-lock .bloom { position: absolute; inset: -60%; z-index: 0; pointer-events: none; }
.icon-lock .bloom::before { content: ""; position: absolute; inset: 25%; border-radius: 50%; background: radial-gradient(closest-side, var(--glow-blue), transparent); }
.final h2 { font-size: clamp(2.6rem, 1.2rem + 4.4vw, 5.4rem); line-height: .95; letter-spacing: -.045em; margin-bottom: 24px; }
.final p { color: var(--on-dark-2); font-size: 18px; max-width: 32em; }
.final-actions { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; margin-top: 34px; }
.final .btn-line { color: var(--on-dark); }

/* Footer */
.site-footer { background: var(--dark); color: var(--on-dark-2); border-top: 1px solid var(--rule-dark); padding: 44px 0 40px; font-size: 14.5px; }
.footer-grid { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 28px 48px; }
.site-footer .brand { color: var(--on-dark); margin-bottom: 12px; }
.site-footer p { margin: 0; max-width: 30em; }
.site-footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.site-footer a { color: var(--on-dark-2); text-underline-offset: 3px; }
.site-footer a:hover { color: var(--on-dark); }
.footer-base { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--rule-dark); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 13px; }

/* ---------- HDR image layers (PQ PNG, cICP 9/16/0/1) ----------
   Hidden by default. Shown only when the screen is HDR AND the engine
   implements dynamic-range-limit (Chrome/Edge 136+, Safari 26+), which is
   the same set of engines that render HDR images above SDR white. Firefox
   and SDR screens keep the CSS glow only, so a PQ image can never show up
   as a grey smear in an engine that ignores cICP. */
.hdr-img { display: none; }
@media (dynamic-range: high) {
  @supports (dynamic-range-limit: no-limit) {
    .hdr-img { display: block; }
  }
}

/* ==========================================================================
   INTRO: scanning beam + edge-lock + capture flash (≈1.5 s, once per session)
   Present in the HTML but display:none. Only the inline head script turns it
   on (html.intro-on), so with JavaScript off it never appears; with reduced
   motion it is skipped. The page underneath is fully rendered the whole time
   (the veil is translucent and is cut away by the beam), so the H1 paints
   immediately for users, crawlers and LCP.
   ========================================================================== */
.intro, .intro-skip { display: none; }
html.intro-on .intro { display: block; }
html.intro-on .intro-skip { display: inline-flex; }

.intro { position: fixed; inset: 0; z-index: 100; pointer-events: none; --t: 1.5s;
  animation: intro-out .3s ease 1.25s forwards; }
.intro-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(189,215,255,.06) 1px, transparent 1px) 0 0 / 100% 56px,
    rgba(11, 16, 25, .88);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: veil-cut .9s cubic-bezier(.65, 0, .25, 1) .1s both;
}
@keyframes veil-cut { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(100% 0 0 0); } }

/* the beam rides exactly on the veil's cut edge */
.intro-beam { position: absolute; left: 0; right: 0; top: 0; height: 48px; margin-top: -24px;
  animation: beam-move .9s cubic-bezier(.65, 0, .25, 1) .1s both; }
@keyframes beam-move { from { transform: translateY(0); opacity: 1; } 92% { opacity: 1; } to { transform: translateY(100vh); opacity: 0; } }
.beam-sdr { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, transparent, var(--glow) 12%, var(--glow) 88%, transparent);
  box-shadow: 0 0 10px 2px var(--glow-soft), 0 0 42px 12px var(--glow-blue);
  dynamic-range-limit: no-limit; }
.intro .hdr-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: fill; dynamic-range-limit: no-limit; }

/* edge-lock brackets: start at the viewport edges, converge on the H1 frame
   (JS writes --lx/--ly/--lw/--lh from the H1's box; defaults are a guess). */
.intro-lock { position: absolute; left: var(--lx, 8vw); top: var(--ly, 22vh); width: var(--lw, 60vw); height: var(--lh, 30vh);
  --c-size: 28px; --c-in: 0px; --c-color: var(--r3);
  animation: lock-in .55s cubic-bezier(.2, .8, .2, 1) .45s both; }
@keyframes lock-in {
  from { opacity: 0; transform: scale(1.35); }
  60% { opacity: 1; }
  to { opacity: 1; transform: scale(1); }
}
.intro-lock .c { animation: lock-flash .5s ease 1s both; dynamic-range-limit: no-limit; }
@keyframes lock-flash {
  0% { border-color: var(--r3); }
  25% { border-color: var(--glow); filter: drop-shadow(0 0 6px var(--glow)) drop-shadow(0 0 16px var(--glow-blue)); }
  100% { border-color: var(--r3); }
}
/* capture flash: the "auto-capture" moment, a short bloom over the locked area */
.intro-flash { position: absolute; left: var(--lx, 8vw); top: var(--ly, 22vh); width: var(--lw, 60vw); height: var(--lh, 30vh);
  opacity: 0; animation: flash .45s ease-out 1s both; dynamic-range-limit: no-limit; }
.intro-flash::before { content: ""; position: absolute; inset: -30% -10%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow-soft), rgba(119,165,255,.18) 55%, transparent); }
.intro-flash .hdr-img { position: absolute; inset: -40% -10%; width: 120%; height: 180%; object-fit: fill; dynamic-range-limit: no-limit; }
@keyframes flash { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }

.intro-skip { position: fixed; right: 16px; bottom: 16px; z-index: 101; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(189,215,255,.3); background: rgba(16,23,34,.7); color: #F4F6FA; font: 600 13px/1 var(--text); cursor: pointer;
  animation: intro-out .3s ease 1.25s forwards; }
html.intro-done .intro, html.intro-done .intro-skip { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .outputs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .nav { display: none; }
  .menu { display: block; margin-left: auto; }
  .header-cta { order: 3; }
  .hero-grid { align-items: start; }
  .proof { grid-template-columns: minmax(0, 250px); justify-content: center; }
  .rail { grid-auto-flow: column; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; padding: 18px 0 0; gap: 14px; order: 2; }
  .rail::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
  .rail li::before { left: 0; top: -23px; }
  .proof figcaption { text-align: center; justify-self: center; order: 3; }
}
@media (max-width: 900px) {
  :root { --header-h: 64px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .proof { grid-template-columns: minmax(0, 300px); }
  .proof { justify-content: start; grid-template-columns: minmax(0, 300px); }
  .proof figcaption { justify-self: start; text-align: left; }
  .qa-inner { grid-template-columns: minmax(0, 1fr); }
  .qa ul { grid-template-columns: minmax(0, 1fr); }
  .qa li { border-left: 0; border-top: 1px solid var(--rule-dark); padding: 16px 0 16px 44px; position: relative; }
  .qa li::before { position: absolute; left: 0; top: 19px; margin: 0; }
  .steps-grid, .split, .tips-grid, .island-grid, .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .steps-media { position: relative; top: 0; display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 20px; align-items: end; }
  .steps-media .media-bar { flex-direction: column; align-items: flex-start; }
  .split .section-head, .faq-aside { position: static; }
  .compare2 { grid-template-columns: minmax(0, 1fr); }
  .compare2 > div + div { border-left: 0; border-top: 1px solid var(--rule); }
  .outputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .final-photo { inset: 0 0 45% 0; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
  .final::before { background: linear-gradient(180deg, rgba(16,23,34,.35) 0%, var(--dark) 52%); }
  .final { padding-top: clamp(220px, 50vw, 360px); }
}
@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .header-cta span.long { display: none; }
  .brand { font-size: 19px; }
  .rail { font-size: 12.5px; }
  .proof { grid-template-columns: minmax(0, 1fr); }
  .proof .screen { width: min(78vw, 300px); }
  .step { grid-template-columns: 52px minmax(0, 1fr); gap: 0 14px; padding: 24px 0 26px; }
  .step .n { width: 44px; height: 44px; font-size: 18px; }
  .step h3 { margin-top: 6px; }
  .steps-media { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .steps-media .screen { width: min(70vw, 260px); }
  .steps-media .media-bar { align-items: center; text-align: center; }
  .outputs { grid-template-columns: minmax(0, 1fr); }
  .outputs li { min-height: 0; }
  .outputs h3 { margin-top: 18px; }
  .faq-list .answer { padding-right: 0; }
  table.plans { min-width: 0; font-size: 14.5px; }
  .plans th, .plans td { padding: 14px 12px; }
  .plans td { width: 64px; }
  .store { width: 100%; justify-content: center; }
  .hero-actions .btn-line { width: auto; }
}
@media (max-width: 360px) {
  .header-cta { display: none; }
  .rail { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; }
  .rail li::before { display: none; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
  .intro, .intro-skip { display: none !important; }
}