/* Scanneo web. Tokens mirror DESIGN.md (v3 "Suite"): Geist, one cobalt accent, cool neutrals,
   file-type colour as identity, concentric radii, 0.96 press scale. */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --canvas: #f4f6f9;
  --surface: #ffffff;
  --sunken: #eceff3;
  --hairline: #e3e7ec;
  --ink: #12161b;
  --ink-2: #4a525c;
  --ink-3: #6a727d;
  --accent: #2160e0;
  --accent-ink: #ffffff;
  --accent-soft: #e6eefc;
  --drench: #2160e0;
  --rose: #d13b3b;
  --pdf: #d8383a;
  --word: #2b6be0;
  --sheet: #1f9d55;
  --slides: #e8651a;
  --text: #5b6672;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --lift: 0 1px 1px rgb(18 22 27 / 0.04), 0 2px 4px rgb(18 22 27 / 0.04), 0 14px 32px -12px rgb(18 40 90 / 0.22);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0e1013; --surface: #16191d; --sunken: #22272d; --hairline: #2a3037;
    --ink: #ecf0f3; --ink-2: #a5adb7; --ink-3: #7a838e;
    --accent: #6b9bff; --accent-ink: #0e1013; --accent-soft: rgb(107 155 255 / 0.16); --drench: #1d4bb5;
    --text: #8b97a4;
    --lift: 0 1px 1px rgb(0 0 0 / 0.3), 0 2px 4px rgb(0 0 0 / 0.25), 0 14px 32px -12px rgb(0 0 0 / 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --canvas: #0e1013; --surface: #16191d; --sunken: #22272d; --hairline: #2a3037;
  --ink: #ecf0f3; --ink-2: #a5adb7; --ink-3: #7a838e;
  --accent: #6b9bff; --accent-ink: #0e1013; --accent-soft: rgb(107 155 255 / 0.16); --drench: #1d4bb5;
  --text: #8b97a4;
  --lift: 0 1px 1px rgb(0 0 0 / 0.3), 0 2px 4px rgb(0 0 0 / 0.25), 0 14px 32px -12px rgb(0 0 0 / 0.6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px; line-height: 1.6; font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 650; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
p { text-wrap: pretty; }
.i { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: 12px; }
.skip:focus { left: 12px; }
.wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
section { position: relative; }

/* Buttons */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border: 0; border-radius: 16px; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
  transition-property: transform, background-color, box-shadow; transition-duration: 160ms; transition-timing-function: var(--ease);
}
.btn::after { content: ""; position: absolute; inset: -4px; } /* hit area */
.btn:active { transform: scale(0.96); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 1px rgb(0 0 0 / 0.1), 0 10px 24px -10px var(--accent); }
.btn-primary:hover { box-shadow: 0 1px 1px rgb(0 0 0 / 0.1), 0 16px 30px -10px var(--accent); }
.btn-quiet { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--hairline), 0 1px 2px rgb(18 22 27 / 0.05); }
.btn-quiet:hover { background: var(--sunken); }
.btn-play { background: var(--ink); color: var(--canvas); cursor: default; padding-inline: 20px 16px; }
.btn-play:active { transform: none; }
.btn-play small { display: block; font-size: 11px; font-weight: 500; opacity: 0.7; line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; }
.btn-play b { display: block; font-size: 16px; line-height: 1.15; }
.btn-play .soon { margin-left: 6px; padding: 4px 8px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 60; transition: background-color 200ms, box-shadow 200ms; }
.nav.scrolled { background: color-mix(in srgb, var(--canvas) 80%, transparent); backdrop-filter: saturate(1.5) blur(16px); box-shadow: 0 1px 0 var(--hairline); }
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 650; font-size: 20px; letter-spacing: -0.03em; }
.brand img { width: 36px; height: 36px; border-radius: 10px; }
.nav-links { display: flex; gap: 2px; }
.nav-links a { padding: 10px 16px; border-radius: 12px; font-size: 15px; font-weight: 500; color: var(--ink-2); transition: color 150ms, background-color 150ms; }
.nav-links a:hover { color: var(--ink); background: var(--sunken); }
.nav-end { display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 14px; background: transparent; color: var(--ink-2); cursor: pointer; transition: background-color 150ms, transform 160ms var(--ease); }
.icon-btn:hover { background: var(--sunken); color: var(--ink); }
.icon-btn:active { transform: scale(0.96); }
.theme-btn .moon { display: none; }
:root[data-theme="dark"] .theme-btn .sun { display: none; }
:root[data-theme="dark"] .theme-btn .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .sun { display: none; }
  :root:not([data-theme="light"]) .theme-btn .moon { display: block; }
}
@media (max-width: 900px) { .nav-links { display: none; } }
@media (max-width: 520px) { .nav-end .btn { display: none; } }

/* Android device frame (Pixel-style: punch-hole camera, thin bezel, side keys, gesture bar) */
.android { --w: 300px; position: relative; width: var(--w); flex: none; }
.android-body {
  position: relative; aspect-ratio: 720 / 1472;
  padding: calc(var(--w) * 0.026); border-radius: calc(var(--w) * 0.118);
  background: linear-gradient(160deg, #31363c 0%, #17191c 38%, #0c0d0f 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 1px 2px rgb(10 20 40 / 0.2), 0 30px 60px -24px rgb(10 25 60 / 0.55), 0 12px 24px -12px rgb(10 25 60 / 0.35);
}
.android-body::before, .android-body::after { content: ""; position: absolute; right: -3px; width: 4px; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #1b1d20, #3b4046); }
.android-body::before { top: 21%; height: 7%; }
.android-body::after { top: 31%; height: 13%; }
.android-screen {
  position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--bg, #fff);
  border-radius: calc(var(--w) * 0.092); /* outer radius minus bezel: concentric */
}
.android-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity 420ms var(--ease); }
.android-screen img.on { opacity: 1; }
.statusbar { position: absolute; inset: 0 0 auto 0; height: 6.3%; display: flex; align-items: center; justify-content: space-between; padding: 0 7%; color: var(--sb, #12161b); font-size: calc(var(--w) * 0.036); font-weight: 600; letter-spacing: 0; z-index: 2; transition: color 300ms; }
.statusbar .i { width: calc(var(--w) * 0.05); height: calc(var(--w) * 0.05); }
.statusbar .right { display: flex; gap: calc(var(--w) * 0.012); align-items: center; }
.punch { position: absolute; z-index: 3; top: calc(var(--w) * 0.032); left: 50%; width: calc(var(--w) * 0.04); height: calc(var(--w) * 0.04); border-radius: 50%; transform: translateX(-50%); background: radial-gradient(circle at 35% 35%, #26303d 0%, #07090b 55%); box-shadow: 0 0 0 calc(var(--w) * 0.004) #000; }
.gesture { position: absolute; z-index: 2; bottom: calc(var(--w) * 0.012); left: 50%; width: 34%; height: calc(var(--w) * 0.013); border-radius: 99px; transform: translateX(-50%); background: var(--sb, #12161b); opacity: 0.55; }
.android[data-dark="true"] { --sb: #ecf0f3; }

/* Rubber stamps: flat vector marks in file-type colour */
.stamp {
  --c: var(--rose); --r: -5deg;
  display: inline-flex; align-items: center; gap: 0.45em; padding: 0.5em 0.8em; border: 2px solid var(--c); border-radius: 8px; outline: 1.5px solid color-mix(in srgb, var(--c) 45%, transparent); outline-offset: 2px;
  color: var(--c); font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; white-space: nowrap;
  transform: rotate(var(--r)); background: color-mix(in srgb, var(--c) 6%, transparent);
}
.stamp .i { width: 1.2em; height: 1.2em; }
.stamp.pdf { --c: var(--pdf); } .stamp.word { --c: var(--word); } .stamp.sheet { --c: var(--sheet); } .stamp.slides { --c: var(--slides); } .stamp.text { --c: var(--text); } .stamp.acc { --c: var(--accent); }

/* Hero */
.hero { padding-block: clamp(24px, 4vw, 56px) clamp(64px, 8vw, 112px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(32px, 5vw, 80px); align-items: center; min-height: min(760px, calc(100svh - 120px)); }
.hero h1 { font-size: clamp(46px, 6.6vw, 96px); letter-spacing: -0.045em; line-height: 0.98; }
.hero h1 span { color: var(--accent); }
.hero-lead { margin-top: 28px; max-width: 34em; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55; color: var(--ink-2); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 36px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 36px; color: var(--ink-2); font-size: 15px; font-weight: 500; }
.hero-facts li { display: inline-flex; align-items: center; gap: 8px; }
.hero-facts .i { color: var(--accent); }
.hero-stage { position: relative; display: grid; place-items: center; padding-block: 24px; }
.hero-stage .android { --w: min(330px, 74vw); }
.hero-stage .stamp { position: absolute; z-index: 4; opacity: 0; transform: rotate(var(--r)) scale(0.96); transition: opacity 300ms, transform 500ms var(--ease); }
.hero-stage .stamp.on { opacity: 1; transform: rotate(var(--r)) scale(1); animation: thump 520ms var(--ease); }
@keyframes thump { 0% { transform: rotate(var(--r)) scale(1.45); opacity: 0; } 55% { transform: rotate(var(--r)) scale(0.97); opacity: 1; } 100% { transform: rotate(var(--r)) scale(1); } }
.st-pdf { top: 12%; left: 0; --r: -7deg; } .st-word { top: 34%; right: -2%; --r: 6deg; } .st-sheet { bottom: 28%; left: -3%; --r: 4deg; } .st-slides { bottom: 8%; right: 2%; --r: -5deg; }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-stage { margin-top: 16px; }
  .st-pdf { left: 4%; } .st-word { right: 3%; } .st-sheet { left: 3%; } .st-slides { right: 6%; }
}

/* The pile (problem) */
.pile { padding-block: clamp(72px, 9vw, 128px); border-top: 1px solid var(--hairline); }
.pile-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.pile h2 { font-size: clamp(34px, 4.6vw, 64px); position: sticky; top: 112px; }
.pile h2 em { font-style: normal; color: var(--ink-3); }
.pile-list li { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 0; border-bottom: 1px solid var(--hairline); }
.pile-list li:first-child { padding-top: 0; }
.pile-list p { font-size: clamp(22px, 2.4vw, 32px); font-weight: 560; letter-spacing: -0.025em; line-height: 1.2; max-width: 17em; }
.pile-list p span { color: var(--ink-3); font-weight: 500; }
.pile-end { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; font-size: 20px; font-weight: 560; letter-spacing: -0.02em; }
.pile-end .stamp { font-size: 14px; }
@media (max-width: 900px) { .pile-grid { grid-template-columns: 1fr; } .pile h2 { position: static; } .pile-list li { align-items: flex-start; flex-direction: column; gap: 18px; } }

/* The fix: committed cobalt field */
.fix { background: var(--drench); color: #fff; padding-block: clamp(72px, 9vw, 128px); border-radius: clamp(24px, 4vw, 48px); margin-inline: clamp(8px, 1.5vw, 20px); }
.fix-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px 48px; margin-bottom: clamp(36px, 5vw, 64px); }
.fix-head h2 { font-size: clamp(38px, 5.6vw, 80px); letter-spacing: -0.045em; max-width: 11em; }
.fix-head p { max-width: 26em; font-size: 19px; color: rgb(255 255 255 / 0.82); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.bc { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; background: var(--surface); color: var(--ink); box-shadow: 0 1px 1px rgb(0 0 0 / 0.08), 0 24px 40px -24px rgb(5 20 70 / 0.5); }
.bc-demo { position: relative; flex: 1; min-height: 250px; overflow: hidden; background: var(--sunken); margin: 8px 8px 0; border-radius: 20px; } /* 28 = 20 + 8: concentric */
.bc-copy { padding: 22px 24px 26px; }
.bc-copy h3 { font-size: 24px; letter-spacing: -0.03em; }
.bc-copy p { margin-top: 8px; color: var(--ink-2); font-size: 16px; max-width: 34em; }
.c7 { grid-column: span 7; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; }
@media (max-width: 900px) { .c7, .c5, .c6 { grid-column: span 12; } }

/* Demo: formats marquee */
.mq { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mq-row { display: flex; gap: 14px; width: max-content; animation: slide 46s linear infinite; }
.mq-row.rev { animation-direction: reverse; animation-duration: 54s; }
.bc:hover .mq-row { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.chip { display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 16px; background: var(--surface); box-shadow: 0 1px 2px rgb(18 22 27 / 0.06), 0 0 0 1px rgb(18 22 27 / 0.04); white-space: nowrap; }
.tile { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); flex: none; }
.chip b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.chip small { display: block; font-size: 12.5px; color: var(--ink-3); line-height: 1.2; }
.t-pdf { --c: var(--pdf); } .t-word { --c: var(--word); } .t-sheet { --c: var(--sheet); } .t-slides { --c: var(--slides); } .t-text { --c: var(--text); }

/* Demo: scan */
.scan { position: absolute; inset: 0; display: grid; place-items: center; }
.paper { position: relative; width: 56%; aspect-ratio: 210 / 262; background: #fff; border-radius: 8px; box-shadow: 0 10px 30px -12px rgb(18 40 90 / 0.35); padding: 11% 10%; display: flex; flex-direction: column; gap: 9%; overflow: hidden; }
.paper i { display: block; height: 6px; border-radius: 3px; background: #cfd6de; animation: ocr 4.4s infinite; animation-delay: var(--d); }
.paper i.h { height: 9px; width: 55%; }
.paper i.s { width: 70%; }
@keyframes ocr { 0%, 12% { background: #cfd6de; } 28%, 78% { background: #12161b; } 94%, 100% { background: #cfd6de; } }
.beam { position: absolute; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 0 0 transparent, 0 6px 16px -2px var(--accent); animation: sweep 4.4s var(--ease) infinite; z-index: 2; }
@keyframes sweep { 0% { top: 4%; opacity: 0; } 8% { opacity: 1; } 56% { top: 94%; opacity: 1; } 64%, 100% { top: 94%; opacity: 0; } }
.corners { position: absolute; inset: 14% 17%; pointer-events: none; z-index: 3; }
.corners b { position: absolute; width: 22px; height: 22px; border: 3px solid var(--accent); }
.corners b:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.corners b:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.corners b:nth-child(3) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.corners b:nth-child(4) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.scan .stamp { position: absolute; right: 8%; bottom: 10%; z-index: 4; animation: pop 4.4s infinite; opacity: 0; }
@keyframes pop { 0%, 55% { opacity: 0; transform: rotate(-6deg) scale(1.4); } 64%, 92% { opacity: 1; transform: rotate(-6deg) scale(1); } 100% { opacity: 0; transform: rotate(-6deg) scale(1); } }

/* Demo: tools list */
.feed { position: absolute; inset: 14px 16px 0; display: flex; flex-direction: column; gap: 10px; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.feed-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--surface); box-shadow: 0 1px 2px rgb(18 22 27 / 0.06), 0 0 0 1px rgb(18 22 27 / 0.04); animation: drop 500ms var(--ease) both; }
.feed-item b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.feed-item small { display: block; font-size: 12.5px; color: var(--ink-3); line-height: 1.2; }
.feed-item .stamp { margin-left: auto; font-size: 10.5px; padding: 0.4em 0.6em; --r: 0deg; outline: 0; }
@keyframes drop { from { opacity: 0; transform: translateY(-14px) scale(0.97); } }

/* Demo: reading themes */
.read { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 22px 20px 16px; transition: background-color 400ms; background: var(--rb, #fff); }
.read-page { width: min(100%, 360px); align-self: stretch; padding: 22px 24px; border-radius: 12px; color: var(--rt, #12161b); font-size: 14.5px; line-height: 1.6; transition: color 400ms; overflow: hidden; }
.read-page h4 { margin: 0 0 8px; font-size: 20px; letter-spacing: -0.03em; font-weight: 650; }
.read-page p { color: inherit; opacity: 0.82; }
.read[data-t="light"] { --rb: #f4f6f9; --rt: #12161b; }
.read[data-t="dark"] { --rb: #0e1013; --rt: #ecf0f3; }
.read[data-t="sepia"] { --rb: #f3eada; --rt: #4b3a22; }
.read[data-t="night"] { --rb: #000; --rt: #c9cfd6; }
.seg { display: inline-flex; padding: 4px; gap: 2px; border-radius: 16px; background: rgb(127 135 145 / 0.18); }
.seg button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 160ms, color 160ms, transform 160ms var(--ease); position: relative; }
.seg button::after { content: ""; position: absolute; inset: -2px; }
.seg button:active { transform: scale(0.96); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(18 22 27 / 0.15); }
.read .seg { color: var(--rt); }

/* Demo: word views */
.wv { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 20px 20px 16px; background: #e3e7ec; }
.wv-doc { position: relative; align-self: stretch; width: 100%; max-width: 380px; }
.wv-page { position: absolute; inset: 0; margin: auto; background: #fff; border-radius: 6px; box-shadow: 0 8px 24px -10px rgb(18 40 90 / 0.4); padding: 18px 20px; color: #12161b; width: 100%; height: 100%; overflow: hidden; font-size: 12px; line-height: 1.5; transition-property: opacity, transform; transition-duration: 420ms; transition-timing-function: var(--ease); }
.wv-page.p { width: 62%; padding: 16px 14px; }
.wv[data-v="read"] .wv-page.p { opacity: 0; transform: scale(0.94); }
.wv[data-v="page"] .wv-page.r { opacity: 0; transform: scale(1.04); }
.wv-page h4 { margin: 0 0 6px; font-size: 18px; color: var(--word); letter-spacing: -0.02em; }
.wv-page .tbl { margin-top: 10px; display: grid; grid-template-columns: 1.3fr 1fr 0.8fr; border: 1px solid #c9d3e6; border-radius: 4px; font-size: 11px; }
.wv-page .tbl span { padding: 4px 7px; border-bottom: 1px solid #dfe5f1; border-right: 1px solid #dfe5f1; }
.wv-page .tbl span:nth-child(-n+3) { background: #e7eefb; font-weight: 650; }
.wv .seg { margin-top: 14px; background: rgb(255 255 255 / 0.7); }
.wv .seg button { color: #4a525c; }

/* Comparison: a ledger */
.versus { padding-block: clamp(72px, 9vw, 128px); }
.versus h2 { font-size: clamp(34px, 4.6vw, 64px); max-width: 13em; }
.ledger { margin-top: clamp(32px, 4vw, 56px); border-radius: 28px; background: var(--surface); box-shadow: var(--lift); overflow: hidden; }
.ledger-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; border-top: 1px solid var(--hairline); transition: background-color 150ms; }
.ledger-row:not(.head):hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.ledger-row > * { padding: 22px 28px; }
.ledger-row.head { border-top: 0; background: var(--sunken); }
.ledger-row.head > * { padding-block: 18px; font-size: 14px; font-weight: 650; color: var(--ink-3); letter-spacing: 0.01em; display: flex; align-items: center; gap: 10px; }
.ledger-row.head .us { color: var(--accent); }
.ledger-row.head img { width: 24px; height: 24px; border-radius: 7px; }
.ledger-row dt { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.ledger-row dd { margin: 0; font-size: 16px; display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.ledger-row dd .i { margin-top: 1px; font-size: 22px; }
.ledger-row dd.us { font-weight: 600; background: color-mix(in srgb, var(--accent) 6%, transparent); align-self: stretch; align-items: center; }
.ledger-row dd.us .i { color: var(--sheet); }
.ledger-row dd.them { color: var(--ink-2); }
.ledger-row dd.them .i { color: var(--rose); }
.fine { margin-top: 16px; font-size: 14px; color: var(--ink-3); }
@media (max-width: 760px) {
  .ledger-row { grid-template-columns: 1fr; }
  .ledger-row.head { display: none; }
  .ledger-row > * { padding: 10px 20px; }
  .ledger-row dt { padding-top: 20px; }
  .ledger-row dd.us, .ledger-row dd.them { align-self: auto; }
  .ledger-row dd.us::before, .ledger-row dd.them::before { content: "Scanneo"; width: 82px; flex: none; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-top: 5px; }
  .ledger-row dd.them::before { content: "Typical"; color: var(--ink-3); }
  .ledger-row dd:last-child { padding-bottom: 22px; }
}

/* Screens showcase */
.show { padding-block: clamp(32px, 4vw, 64px) clamp(72px, 9vw, 128px); }
.show-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 96px); align-items: center; }
.show h2 { font-size: clamp(34px, 4.6vw, 64px); max-width: 11em; }
.tabs { margin-top: 36px; display: grid; gap: 4px; }
.tab { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; width: 100%; padding: 14px 16px; border: 0; border-radius: 20px; background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: background-color 180ms, transform 160ms var(--ease); }
.tab .tile { width: 44px; height: 44px; font-size: 24px; }
.tab b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.tab small { display: block; margin-top: 2px; font-size: 15px; color: var(--ink-3); line-height: 1.35; }
.tab:hover { background: var(--sunken); }
.tab:active { transform: scale(0.98); }
.tab[aria-selected="true"] { background: var(--surface); box-shadow: var(--lift); }
.show-stage { display: grid; place-items: center; padding: 24px; border-radius: 40px; background: var(--accent-soft); }
.show-stage .android { --w: min(340px, 70vw); }
@media (max-width: 980px) { .show-grid { grid-template-columns: 1fr; } .show-stage { order: -1; } }

/* Privacy diagram: a deliberate dark panel */
.private { padding-block: 0 clamp(72px, 9vw, 128px); }
.panel { border-radius: clamp(28px, 4vw, 48px); background: #0e1013; color: #ecf0f3; padding: clamp(32px, 6vw, 88px); overflow: hidden; }
.panel h2 { font-size: clamp(34px, 5vw, 72px); letter-spacing: -0.045em; max-width: 12em; }
.panel > p { margin-top: 20px; max-width: 34em; color: #a5adb7; font-size: 19px; }
.flow { margin-top: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 0.9fr) minmax(0, 0.8fr); gap: clamp(12px, 2vw, 28px); align-items: center; }
.node { border-radius: 24px; background: #16191d; padding: 24px; box-shadow: 0 0 0 1px #2a3037; }
.node h3 { font-size: 20px; display: flex; align-items: center; gap: 12px; letter-spacing: -0.02em; }
.node h3 .i { color: #6b9bff; font-size: 24px; }
.node ul { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.node li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: #22272d; font-size: 14.5px; font-weight: 550; }
.node li .i { color: #6b9bff; font-size: 17px; }
.node.far { opacity: 0.9; }
.node.far li .i { color: #a5adb7; }
.lines { display: grid; gap: 40px; }
.line { position: relative; height: 2px; border-radius: 2px; background: #2a3037; }
.line.blocked { background: repeating-linear-gradient(90deg, #4a525c 0 8px, transparent 8px 16px); height: 2px; }
.line.blocked::after { content: ""; position: absolute; left: 62%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); border-radius: 50%; background: #d13b3b; box-shadow: 0 0 0 6px #0e1013; }
.line.blocked .i { position: absolute; left: 62%; top: 50%; transform: translate(-50%, -50%); color: #fff; z-index: 1; font-size: 18px; }
.line.sent::before { content: ""; position: absolute; top: -1px; height: 4px; width: 38%; border-radius: 4px; background: linear-gradient(90deg, transparent, #6b9bff, transparent); animation: travel 3.2s linear infinite; }
@keyframes travel { from { left: -38%; } to { left: 100%; } }
.line-label { position: absolute; left: 0; right: 0; bottom: 14px; font-size: 13px; line-height: 1.3; color: #a5adb7; text-align: center; }
.priv-list { margin-top: clamp(36px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.priv-list li { padding-top: 22px; border-top: 1px solid #2a3037; color: #a5adb7; font-size: 16px; }
.priv-list b { display: block; margin-bottom: 6px; color: #ecf0f3; font-size: 18px; letter-spacing: -0.02em; }
.panel .more { margin-top: 36px; display: inline-flex; align-items: center; gap: 10px; color: #6b9bff; font-weight: 600; min-height: 44px; }
.panel .more:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 860px) { .flow { grid-template-columns: 1fr; } .lines { gap: 56px; padding: 24px 0; } .line { margin-inline: 8%; } .priv-list { grid-template-columns: 1fr; } }

/* Coming soon */
.coming { padding-block: clamp(72px, 9vw, 128px); }
.soon-head { max-width: 40em; }
.coming h2 { font-size: clamp(34px, 4.6vw, 64px); max-width: 12em; }
.soon-head p { margin-top: 20px; color: var(--ink-2); font-size: 19px; max-width: 32em; }
.drafts { margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.draft { position: relative; border-radius: 28px; padding: 8px; background: var(--surface); box-shadow: 0 0 0 1.5px var(--hairline); }
.draft-ui { border-radius: 20px; background: var(--sunken); padding: 16px; min-height: 240px; display: flex; flex-direction: column; gap: 14px; }
.toolbar { display: flex; gap: 6px; padding: 6px; border-radius: 16px; background: var(--surface); align-self: flex-start; box-shadow: 0 1px 2px rgb(18 22 27 / 0.06); }
.toolbar span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--ink-3); font-size: 22px; }
.toolbar span.act { background: var(--accent-soft); color: var(--accent); }
.doc-lines { flex: 1; border-radius: 12px; background: var(--surface); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.doc-lines i { display: block; height: 8px; border-radius: 4px; background: var(--sunken); }
.doc-lines i.h { width: 40%; height: 12px; background: var(--hairline); }
.doc-lines i.m { background: color-mix(in srgb, var(--accent) 28%, transparent); width: 52%; }
.draft-copy { padding: 22px 20px 20px; }
.draft-copy .stamp { position: absolute; top: 28px; right: 28px; z-index: 2; background: var(--surface); }
.draft-copy h3 { font-size: 28px; }
.draft-copy p { margin-top: 8px; color: var(--ink-2); max-width: 28em; }
.draft-copy ul { margin-top: 16px; display: grid; gap: 8px; }
.draft-copy li { display: flex; gap: 10px; align-items: center; color: var(--ink-2); font-size: 16px; }
.draft-copy li .i { color: var(--accent); }
@media (max-width: 860px) { .drafts { grid-template-columns: 1fr; } }

/* FAQ */
.faq { padding-block: 0 clamp(72px, 9vw, 128px); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq h2 { font-size: clamp(34px, 4.6vw, 64px); position: sticky; top: 112px; }
.qa details { border-top: 1px solid var(--hairline); }
.qa details:last-child { border-bottom: 1px solid var(--hairline); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 64px; padding: 20px 0; font-size: 20px; font-weight: 580; letter-spacing: -0.02em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .i { color: var(--ink-3); transition: transform 220ms var(--ease); }
.qa details[open] summary .i { transform: rotate(45deg); color: var(--accent); }
.qa details p { padding: 0 0 24px; max-width: 36em; color: var(--ink-2); }
.qa a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } .faq h2 { position: static; } }

/* Close + footer */
.close { padding-bottom: clamp(48px, 7vw, 96px); }
.close-card { position: relative; overflow: hidden; border-radius: clamp(28px, 4vw, 48px); background: var(--drench); color: #fff; padding: clamp(40px, 7vw, 104px) clamp(24px, 6vw, 88px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px; }
.close-card h2 { font-size: clamp(38px, 6vw, 84px); letter-spacing: -0.045em; max-width: 9em; }
.close-card p { margin-top: 20px; max-width: 28em; font-size: 19px; color: rgb(255 255 255 / 0.82); }
.close-actions { display: grid; gap: 12px; justify-items: start; }
.close-actions .btn-primary { background: #fff; color: #1b4fc4; box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.4); }
.close-actions .btn-play { background: rgb(255 255 255 / 0.14); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.28); }
.close-actions .btn-play .soon { background: #fff; color: #1b4fc4; }
footer { padding-block: 24px 48px; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 48px; padding-top: 40px; border-top: 1px solid var(--hairline); }
.foot p { margin-top: 12px; max-width: 34em; color: var(--ink-3); font-size: 15px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 28px; align-content: start; }
.foot nav a { min-height: 44px; display: inline-flex; align-items: center; color: var(--ink-2); font-size: 15px; transition: color 150ms; }
.foot nav a:hover { color: var(--accent); }
.legal { margin-top: 24px; color: var(--ink-3); font-size: 13.5px; max-width: 60em; }

/* Motion: content is visible by default; .js enables the reveal */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity 640ms var(--ease), transform 640ms var(--ease); transition-delay: var(--dl, 0ms); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .js .rv { opacity: 1; transform: none; }
  .hero-stage .stamp { opacity: 1; transform: rotate(var(--r)); }
  .paper i { background: #12161b; }
  .scan .stamp { opacity: 1; }
  .beam { display: none; }
}

/* Privacy document page */
.doc { padding-block: clamp(32px, 6vw, 80px) 0; }
.doc h1 { font-size: clamp(40px, 6vw, 80px); letter-spacing: -0.045em; }
.doc-meta { margin-top: 16px; color: var(--ink-3); font-size: 15px; }
.doc-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); margin-top: 56px; align-items: start; }
.toc { position: sticky; top: 104px; display: grid; gap: 2px; }
.toc a { padding: 9px 14px; border-radius: 12px; color: var(--ink-2); font-size: 15px; transition: background-color 150ms, color 150ms; }
.toc a:hover, .toc a.on { background: var(--accent-soft); color: var(--accent); }
.prose { max-width: 70ch; }
.prose h2 { margin-top: 56px; font-size: 28px; letter-spacing: -0.03em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { margin-top: 14px; color: var(--ink-2); }
.prose ul { margin-top: 12px; padding-left: 22px; list-style: disc; }
.prose li::marker { color: var(--accent); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.callout { margin-top: 20px; padding: 20px 22px; border-radius: 20px; background: var(--accent-soft); color: var(--ink); }
.data-table { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; border-radius: 16px; box-shadow: 0 0 0 1px var(--hairline); }
.data-table th, .data-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--hairline); vertical-align: top; color: var(--ink-2); }
.data-table th { background: var(--sunken); color: var(--ink); font-weight: 650; }
.data-table tr:last-child td { border-bottom: 0; }
@media (max-width: 860px) { .doc-layout { grid-template-columns: 1fr; gap: 24px; } .toc { position: static; grid-auto-flow: column; overflow-x: auto; } .toc a { white-space: nowrap; } }

.t-acc { --c: var(--accent); }
.lane { display: grid; gap: 14px; }
.line-label { position: static; margin: 0; text-align: center; font-size: 13px; line-height: 1.35; color: #a5adb7; }
.lines { gap: 36px; }

/* Demo: spreadsheet */
.sx { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; color: #12161b; font-size: 12.5px; }
.sx-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #e3e7ec; background: #f4f6f9; }
.sx-ref { min-width: 44px; padding: 4px 8px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px #e3e7ec; font-weight: 600; text-align: center; }
.sx-fx { color: #1f9d55; font-style: italic; font-weight: 700; }
.sx-val { font-weight: 550; }
.sx-grid { flex: 1; display: grid; grid-template-columns: 28px repeat(4, 1fr); grid-auto-rows: 1fr; }
.sx-grid span { display: flex; align-items: center; padding: 0 8px; border-right: 1px solid #e3e7ec; border-bottom: 1px solid #e3e7ec; font-variant-numeric: tabular-nums; position: relative; transition: background-color 200ms; }
.sx-grid span.h { background: #f4f6f9; color: #6a727d; justify-content: center; font-weight: 600; padding: 0; }
.sx-grid span.top { background: #2160e0; color: #fff; font-weight: 650; }
.sx-grid span.sel { background: #e6eefc; box-shadow: inset 0 0 0 2px #2160e0; }
.sx-grid span.n { justify-content: flex-end; }
.sx-tabs { display: flex; gap: 2px; padding: 0 8px; border-top: 1px solid #e3e7ec; background: #f4f6f9; }
.sx-tabs span { padding: 8px 12px; font-weight: 600; color: #6a727d; }
.sx-tabs span.on { color: #1f9d55; box-shadow: inset 0 -2px 0 #1f9d55; background: #fff; }

/* The privacy panel is dark in both themes; lift it off the dark canvas in dark mode */
:root[data-theme="dark"] .panel { background: #171a1f; box-shadow: 0 0 0 1px #262c33; }
:root[data-theme="dark"] .node { background: #1f2329; box-shadow: 0 0 0 1px #2d343c; }
:root[data-theme="dark"] .node li { background: #292f36; }
:root[data-theme="dark"] .line.blocked::after { box-shadow: 0 0 0 6px #171a1f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .panel { background: #171a1f; box-shadow: 0 0 0 1px #262c33; }
  :root:not([data-theme="light"]) .node { background: #1f2329; box-shadow: 0 0 0 1px #2d343c; }
  :root:not([data-theme="light"]) .node li { background: #292f36; }
  :root:not([data-theme="light"]) .line.blocked::after { box-shadow: 0 0 0 6px #171a1f; }
}