/* Scan Instantly. White paper on a pale blue ground, printed in deep navy, with one strong blue
   for whatever is chosen or can be acted on. Colors are the ones in the app's Theme.swift. */

@font-face {
  font-family: "Familjen Grotesk";
  src: url("/assets/fonts/FamiljenGrotesk.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

/* Headlines and the wordmark, always in capitals. Text and anything showing the app stay in Familjen Grotesk. */
@font-face {
  font-family: "Saira";
  src: url("/assets/fonts/Saira-Black.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

:root {
  --display: "Saira", "Familjen Grotesk", system-ui, sans-serif;
  --main: #2847d9;
  --main-press: #1f39b4;
  --ground-top: #e6edfa;
  --ground-bottom: #f0f4fd;
  --sheet: #f9fbfe;
  --behind: #d7e1f7;
  --highlight: #99b4fd;
  --text: #121a33;
  --soft: #626a84;
  --outline: #b4c0dd;
  --rule: rgb(18 26 51 / 0.1);
  --paper: #fff;

  /* The app's paper shadow, and a deeper one for things that sit higher. */
  --shadow-paper: 0 1px 1px rgb(18 26 51 / 0.05), 0 6px 14px rgb(18 26 51 / 0.14);
  --shadow-lift: 0 1px 1px rgb(18 26 51 / 0.06), 0 14px 28px -8px rgb(18 26 51 / 0.2), 0 36px 70px -20px rgb(18 26 51 / 0.24);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --gutter: clamp(20px, 4vw, 48px);
  --section: clamp(72px, 10vw, 148px);
  --bar: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  color-scheme: light;
  scroll-behavior: smooth;
  scroll-padding-top: var(--bar);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--sheet);
  color: var(--text);
  font: 400 18px/1.5 "Familjen Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
  overflow-x: clip;
}

img, svg { display: block; }
img { max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
ul, ol { list-style: none; padding: 0; }
/* Icons come from one sprite. These inherit into each copy, which is the only way styles reach them. */
svg use { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

::selection { background: var(--highlight); color: var(--text); }

:focus-visible { outline: 2px solid var(--main); outline-offset: 3px; border-radius: 6px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  background: var(--main); color: #fff; padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 600;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

.wrap { width: min(100%, 1320px); margin-inline: auto; padding-inline: var(--gutter); }

h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(32px, 4vw, 53px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.body { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; color: var(--soft); text-wrap: pretty; margin-top: 22px; max-width: 34em; }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 30px; border-radius: 999px;
  background: var(--main); color: #fff; font-weight: 600; font-size: 18px; text-decoration: none;
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.button:active { transform: scale(0.97); }

.text-link {
  display: inline-block; font-weight: 500; color: var(--main);
  padding-block: 8px; margin-block: -8px;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  transition: color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--main-press); }
  .text-link:hover { color: var(--main-press); }
}

/* Header: pinned and plainly separate from the page. */
.bar {
  position: sticky; top: 0; z-index: 50;
  height: var(--bar);
  background: var(--sheet);
  border-bottom: 1px solid var(--outline);
}
.bar-inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 900; font-size: 15px; letter-spacing: -0.015em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.brand img { border-radius: 8px; }
.nav { display: flex; gap: 2px; margin-left: 12px; }
.nav a {
  font-weight: 500; font-size: 16px; text-decoration: none; color: var(--soft);
  padding: 8px 12px; border-radius: 999px;
  transition: color 150ms ease, background-color 150ms ease;
}
.bar-soon { margin-left: auto; font-size: 15px; font-weight: 500; color: var(--soft); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { color: var(--text); background: var(--ground-top); }
}
@media (max-width: 860px) { .nav { display: none; } }
@media (max-width: 460px) { .bar-soon { display: none; } }

/* Hero */
.hero {
  background: linear-gradient(var(--ground-top), var(--ground-bottom));
  overflow: clip;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding-block: clamp(36px, 5vw, 64px) clamp(56px, 6vw, 88px);
  min-height: calc(100svh - var(--bar));
}
.title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(58px, 7.18vw, 108px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-left: -0.02em;
}
.title span { display: block; }
.tagline {
  font-size: clamp(24px, 2.35vw, 34px);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.016em;
  color: var(--soft);
  margin-top: clamp(16px, 2vw, 26px);
  text-wrap: balance;
}
.lede { margin-top: 18px; max-width: 31em; font-size: clamp(17px, 1.42vw, 19px); text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 30px; }
.soon { font-weight: 600; font-size: 16px; line-height: 1.3; }
.soon span { display: block; font-weight: 400; color: var(--soft); }

.hero-copy { position: relative; z-index: 2; }
.hero-stage {
  --phone: min(clamp(270px, 25.5vw, 372px), calc((100svh - var(--bar) - 72px) * 0.473));
  position: relative; display: grid; justify-items: center;
}

/* The sheet of paper from the welcome screen and the app icon. Square corners, navy bars, one marked line. */
.sheet-art {
  position: absolute; z-index: 0;
  --sheet-w: min(41vw, 590px);
  width: var(--sheet-w);
  aspect-ratio: 0.77;
  left: calc(50% - var(--sheet-w) * 0.58);
  top: 1%;
  padding: calc(var(--sheet-w) * 0.13) calc(var(--sheet-w) * 0.09);
  background: var(--paper);
  box-shadow: var(--shadow-lift);
  transform: rotate(-4deg);
  display: flex; flex-direction: column; gap: calc(var(--sheet-w) * 0.054);
}
.sheet-art i {
  position: relative; display: block;
  width: calc(var(--w, 0) * 100%);
  height: calc(var(--sheet-w) * 0.031);
  background: var(--text);
}
.sheet-art i.gap { background: none; }
.sheet-art i.marked::before {
  content: ""; position: absolute; z-index: -1;
  inset: calc(var(--sheet-w) * -0.024) calc(var(--sheet-w) * -0.024);
  background: var(--highlight);
}
.sheet-art i.marked { z-index: 0; isolation: auto; }

.phone-slot {
  position: relative; z-index: 1;
  width: min(100%, var(--phone));
  aspect-ratio: 424 / 896;
}
.device {
  position: absolute; left: 0; top: 0;
  width: 424px; height: 896px;
  padding: 11px;
  border-radius: 68px;
  background: var(--text);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.14), var(--shadow-lift);
  transform-origin: 0 0;
}
.island {
  position: absolute; z-index: 5; left: 50%; top: 22px;
  width: 124px; height: 36px; margin-left: -62px;
  border-radius: 18px; background: #05070f;
}
.screen {
  position: relative; width: 402px; height: 874px;
  border-radius: 57px; overflow: hidden;
  background: linear-gradient(var(--ground-top), var(--ground-bottom));
  font-size: 16px; line-height: 1.3;
  user-select: none;
}
.screen svg { width: 100%; height: 100%; }

.statusbar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 2;
  height: 58px; padding: 19px 32px 0 48px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 17px; color: var(--text);
}
.statusbar b { font-weight: 600; letter-spacing: -0.01em; }
.statusbar.light { color: #fff; }
.sb-icons { display: flex; align-items: center; gap: 6px; }
.sb-signal { width: 18px; height: 12px; background: currentColor; clip-path: polygon(0 66%, 16% 66%, 16% 100%, 0 100%, 0 66%, 28% 44%, 44% 44%, 44% 100%, 28% 100%, 28% 44%, 56% 22%, 72% 22%, 72% 100%, 56% 100%, 56% 22%, 84% 0, 100% 0, 100% 100%, 84% 100%, 84% 0); }
.sb-wifi { width: 17px; height: 12px; background: currentColor; clip-path: polygon(50% 100%, 0 28%, 18% 12%, 50% 0, 82% 12%, 100% 28%); }
.sb-batt { width: 27px; height: 13px; border-radius: 4px; background: currentColor; }

.vf {
  position: absolute; left: 0; right: 0; top: 0; height: 530px;
  overflow: hidden; background: #3a2517;
  border-radius: 0 0 30px 30px;
}
.vf-scene { position: absolute; inset: -6px; }
.vf-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#vfOverlay { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); overflow: visible; }
#vfFill { fill: var(--highlight); fill-opacity: 0; }
#vfEdge { fill: none; stroke: var(--main); stroke-width: 2; stroke-linejoin: round; opacity: 0; }
#vfRing { fill: none; stroke: var(--main); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; }

.pill {
  position: absolute; z-index: 3; left: 50%; top: 74px;
  transform: translateX(-50%);
  height: 34px; padding: 0 16px;
  display: flex; align-items: center; white-space: nowrap;
  background: var(--paper); border-radius: 17px;
  font-size: 15px; font-weight: 500;
}
.cam-buttons { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 8px; }
.cam-btn {
  width: 42px; height: 42px; border-radius: 50%; padding: 10px;
  background: var(--paper); color: var(--text);
}
.cam-btn.right { margin-left: auto; opacity: 0; }

.intro { position: absolute; left: 20px; right: 20px; top: 554px; }
.intro b { display: block; font-size: 32px; line-height: 1.1; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.intro span { display: block; margin-top: 10px; font-size: 16px; color: var(--soft); }

.tray { position: absolute; left: 0; right: 0; top: 548px; height: 208px; opacity: 0; }
.tray-strip { position: absolute; left: 16px; top: 0; display: flex; gap: 10px; }
.tray-strip img { height: 208px; width: auto; background: #fff; box-shadow: var(--shadow-paper); }
.done-row {
  position: absolute; left: 16px; right: 16px; top: 772px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 17px; font-weight: 500; opacity: 0;
}
.done { display: flex; align-items: center; height: 54px; padding: 0 26px; border-radius: 27px; background: var(--main); color: #fff; font-weight: 600; }

.reveal { position: absolute; z-index: 6; left: 0; top: 0; transform-origin: 0 0; opacity: 0; max-width: none; background: #fff; box-shadow: var(--shadow-paper); }

.review {
  position: absolute; inset: 0; z-index: 7;
  background: linear-gradient(var(--ground-top), var(--ground-bottom));
  transform: translateX(100%);
  display: flex; flex-direction: column;
  padding-top: 58px;
  box-shadow: -12px 0 32px rgb(18 26 51 / 0.14);
}
.rv-head { position: relative; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 500; flex: none; }
.rv-head svg { position: absolute; left: 12px; top: 11px; width: 24px; height: 24px; }
.rv-pages { flex: 1 1 auto; min-height: 0; display: flex; gap: 14px; padding: 8px 38px; overflow: hidden; }
.rv-pages img { height: 100%; width: auto; max-width: none; flex: none; background: #fff; box-shadow: var(--shadow-paper); }
.rv-tools { display: flex; padding: 8px 8px 6px; flex: none; }
.rv-tools span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; font-weight: 500; }
.rv-tools svg { width: 24px; height: 24px; }
.rv-rule { height: 1px; background: var(--rule); margin: 2px 16px 8px; flex: none; }
.rv-label { font-size: 13px; color: var(--soft); padding: 0 18px 4px; flex: none; }
.rv-name { display: flex; gap: 10px; padding: 0 16px; flex: none; }
.rv-field { flex: 1; min-width: 0; height: 44px; padding: 0 14px 0 16px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--outline); border-radius: 22px; font-size: 15px; font-weight: 500; white-space: nowrap; }
.rv-field svg { width: 16px; height: 16px; flex: none; }
.rv-seg { height: 44px; padding: 3px; display: flex; align-items: stretch; border: 1px solid var(--outline); border-radius: 22px; font-size: 15px; font-weight: 500; }
.rv-seg b, .rv-seg span { display: flex; align-items: center; padding: 0 13px; border-radius: 19px; font-weight: 500; }
.rv-seg b { background: var(--main); color: #fff; font-weight: 600; }
.rv-incl { display: flex; justify-content: space-between; padding: 10px 18px 12px; font-size: 14px; flex: none; }
.rv-incl u { color: var(--main); font-weight: 500; text-underline-offset: 2px; }
.rv-actions { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 8px 30px; min-height: 124px; flex: none; }
.rv-actions > span { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; font-size: 13px; font-weight: 500; line-height: 1.2; }
.rv-actions i { width: 56px; height: 56px; padding: 15px; border-radius: 50%; background: var(--paper); box-shadow: 0 3px 10px rgb(18 26 51 / 0.14); display: block; }

.toast {
  position: absolute; z-index: 8; left: 50%; top: 64px;
  height: 40px; padding: 0 18px 0 12px; border-radius: 20px;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--main); color: #fff; font-size: 15px; font-weight: 500;
  transform: translate(-50%, -160%); opacity: 0;
}
.toast svg { width: 20px; height: 20px; flex: none; }

.touch {
  position: absolute; z-index: 9; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: rgb(18 26 51 / 0.32); box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.65);
  opacity: 0;
}

/* A note pinned to the phone, saying what is happening on it. */
.caption {
  position: absolute; z-index: 2;
  left: calc(50% - var(--phone) / 2 - 252px);
  bottom: 7%;
  width: 262px; padding: 16px 14px 16px 18px;
  display: grid; grid-template-columns: 1fr 34px; gap: 8px; align-items: start;
  background: var(--paper);
  border-radius: 18px;
  box-shadow: var(--shadow-lift);
}
.caption p { min-height: 86px; }
.caption b { display: block; font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; }
.caption span { display: block; margin-top: 4px; font-size: 15px; line-height: 1.32; color: var(--soft); }
.pause {
  position: relative; width: 34px; height: 34px; margin: -6px -4px 0 0; padding: 8px;
  border-radius: 50%; color: var(--soft);
  transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease;
}
/* Bigger to hit than to see. */
.pause::after { content: ""; position: absolute; inset: -6px; }
.pause:active { transform: scale(0.94); }
.pause svg { width: 100%; height: 100%; }
.pause .p-play { display: none; }
.pause[aria-pressed="true"] .p-pause { display: none; }
.pause[aria-pressed="true"] .p-play { display: block; }
@media (hover: hover) and (pointer: fine) {
  .pause:hover { background: var(--ground-top); color: var(--text); }
}

/* Keeps the note on the phone clear of the words beside it. */
@media (max-width: 1360px) {
  .hero-actions { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 1180px) {
  .hero-actions { flex-direction: row; align-items: center; }
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-stage { margin-top: 26px; --phone: min(76vw, 360px); }
  .hero-stage > .sheet-art { --sheet-w: min(88vw, 500px); left: calc(50% - var(--sheet-w) * 0.6); top: 2%; }
  .caption {
    position: relative; left: auto; bottom: auto; margin-top: -44px;
    width: min(100%, 400px);
  }
  .caption p { min-height: 78px; }
}

/* Search */
.search { background: var(--ground-bottom); padding-block: var(--section); }
.search-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px); gap: clamp(32px, 6vw, 96px); align-items: start; }
.search-copy { position: sticky; top: calc(var(--bar) + 40px); }
.find { margin-top: 30px; max-width: 480px; }
.find-field {
  position: relative; display: flex; align-items: center; height: 58px; padding: 0 8px 0 20px; gap: 12px;
  background: var(--paper); border: 1px solid var(--outline); border-radius: 29px;
  transition: border-color 150ms ease;
}
.find-field:focus-within { border-color: var(--main); box-shadow: 0 0 0 1px var(--main); }
.find-field > svg { width: 22px; height: 22px; flex: none; color: var(--soft); }
.find-field input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none;
  font-size: 19px; font-weight: 500;
}
.find-field input::placeholder { color: var(--soft); font-weight: 400; opacity: 1; }
.find-field button {
  position: relative; width: 36px; height: 36px; padding: 9px; border-radius: 50%; flex: none; color: var(--soft);
  transition: transform 160ms var(--ease-out), background-color 150ms ease;
}
.find-field button::after { content: ""; position: absolute; inset: -5px; }
.find-field button:active { transform: scale(0.92); }
.find-field button svg { width: 100%; height: 100%; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chips button {
  height: 40px; padding: 0 16px; border-radius: 20px;
  border: 1px solid var(--outline); background: transparent;
  font-size: 16px; font-weight: 500;
  transition: transform 160ms var(--ease-out), background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.chips button:active { transform: scale(0.97); }
.chips button[aria-pressed="true"] { background: var(--main); border-color: var(--main); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .chips button:not([aria-pressed="true"]):hover { background: var(--paper); border-color: var(--soft); }
  .find-field button:hover { background: var(--ground-top); }
}
.find-result { margin-top: 14px; min-height: 27px; font-weight: 500; font-variant-numeric: tabular-nums; }
.find-result.empty { color: var(--soft); font-weight: 400; }
.search-copy .text-link { margin-top: 10px; }

.scan-page {
  position: relative; container-type: inline-size;
  background: var(--paper);
  box-shadow: var(--shadow-lift);
}
.scan-page > img { width: 100%; pointer-events: none; user-select: none; }
.marks { position: absolute; inset: 0; pointer-events: none; }
.marks mark {
  position: absolute; display: block; background: var(--highlight);
  mix-blend-mode: multiply;
}
/* A click on a suggestion draws the highlight in, like a marker. Typing shows it at once. */
.marks.sweep mark {
  animation: mark-in 280ms var(--ease-out) both;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes mark-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

.textlayer { position: absolute; inset: 0; overflow: hidden; line-height: 1; cursor: text; }
.textlayer span {
  position: absolute; white-space: pre; color: transparent;
  transform-origin: 0 0;
  font-family: "Times New Roman", Times, serif;
}
.textlayer span::selection { background: rgb(153 180 253 / 0.55); color: transparent; }

@media (max-width: 1000px) {
  .search-grid { grid-template-columns: 1fr; }
  .search-copy { position: static; }
  .scan-page { max-width: 620px; margin-inline: auto; }
}

/* Cleanup: the app icon's blue, edge to edge. */
.cleanup { background: var(--main); color: #fff; padding-block: var(--section) calc(var(--section) + 40px); }
.cleanup ::selection { background: #fff; color: var(--main); }
.cleanup :focus-visible { outline-color: #fff; }
.cleanup-grid { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.cleanup .body { color: rgb(255 255 255 / 0.86); }

.compare {
  position: relative; aspect-ratio: 1200 / 1654;
  background: var(--paper);
  box-shadow: 0 20px 40px -12px rgb(9 18 77 / 0.5), 0 50px 90px -30px rgb(9 18 77 / 0.55);
  cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  outline-offset: 6px;
}
.compare-layer { position: absolute; inset: 0; overflow: hidden; }
.compare-layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare-layer.over { clip-path: inset(0 50% 0 0); }
.compare.settling .compare-layer.over { transition: clip-path 320ms var(--ease-out); }
.compare.settling .compare-handle { transition: transform 320ms var(--ease-out); }
.tag {
  position: absolute; top: 16px; height: 34px; padding: 0 14px; display: flex; align-items: center;
  border-radius: 17px; background: var(--text); color: #fff; font-size: 15px; font-weight: 500;
}
.tag-left { left: 16px; }
.tag-right { right: 16px; background: var(--main); }
.compare-handle { position: absolute; top: 0; bottom: 0; left: 0; width: 0; transform: translateX(310px); pointer-events: none; }
.compare-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--main); }
.knob {
  position: absolute; left: -26px; top: 50%; margin-top: -26px;
  width: 52px; height: 52px; padding: 13px; border-radius: 50%;
  background: var(--main); color: #fff;
  box-shadow: 0 0 0 3px #fff, 0 8px 22px rgb(9 18 77 / 0.4);
  transition: transform 200ms var(--ease-out);
}
.knob svg { width: 100%; height: 100%; }
.compare.dragging .knob { transform: scale(1.08); }

.facts { margin-top: 34px; border-top: 1px solid rgb(255 255 255 / 0.28); max-width: 34em; }
.facts > div { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgb(255 255 255 / 0.28); }
.facts dt { font-weight: 600; }
.facts dd { color: rgb(255 255 255 / 0.86); }

@media (max-width: 1000px) {
  .cleanup-grid { grid-template-columns: 1fr; }
  .compare-column { order: 2; max-width: 620px; width: 100%; margin-inline: auto; }
}

/* The sheet that rises over the blue, the way Settings rises over the camera. */
.sheet {
  position: relative; z-index: 1;
  margin-top: -40px;
  background: var(--sheet);
  border-radius: 40px 40px 0 0;
}
.send { padding-block: clamp(72px, 9vw, 128px) clamp(40px, 5vw, 72px); }
.send-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: clamp(32px, 6vw, 96px); align-items: start; }

.choice { margin-top: 32px; max-width: 480px; }
.choice-title { font-size: 17px; font-weight: 500; margin-bottom: 8px; }
.choice-note { margin-top: 8px; min-height: 42px; font-size: 15px; line-height: 1.38; color: var(--soft); text-wrap: pretty; }

.seg {
  position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr);
  height: 46px; padding: 3px;
  border: 1px solid var(--outline); border-radius: 23px;
  isolation: isolate;
}
.seg-thumb {
  position: absolute; z-index: -1; left: 3px; top: 3px; bottom: 3px;
  width: calc((100% - 6px) / var(--n));
  background: var(--main); border-radius: 19px;
  transition: transform 220ms var(--ease-out);
}
.seg label { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 19px; font-size: 15px; font-weight: 500; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.seg label::after { content: ""; position: absolute; inset: -4px 0; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { transition: color 160ms ease; }
.seg input:checked + span { color: #fff; font-weight: 600; }
.seg label:has(input:focus-visible) { outline: 2px solid var(--main); outline-offset: 2px; }

.actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; max-width: 480px; }
.actions li { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; line-height: 1.2; text-align: center; }
.action-icon { width: 58px; height: 58px; padding: 16px; border-radius: 50%; background: var(--paper); box-shadow: 0 3px 12px rgb(18 26 51 / 0.13); }
.action-icon svg { width: 100%; height: 100%; }

.chooser {
  background: var(--paper);
  border-radius: 30px;
  padding: 28px 24px 14px 24px;
  box-shadow: 0 0 0 1px var(--rule), 0 14px 40px -14px rgb(18 26 51 / 0.2);
}
.chooser h3 { font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -0.015em; }
.chooser-head p { margin-top: 4px; font-size: 15px; color: var(--soft); font-variant-numeric: tabular-nums; }
.pages { margin-top: 12px; }
.page-row {
  position: relative; display: flex; align-items: center; gap: 4px; height: 104px;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  transition: transform 220ms var(--ease-drawer), box-shadow 180ms ease;
}
.page-row:last-child { border-bottom-color: transparent; }
.page-toggle {
  flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  transition: transform 160ms var(--ease-out);
}
.page-toggle:active { transform: scale(0.985); }
.tick {
  flex: none; width: 28px; height: 28px; padding: 5px; border-radius: 50%;
  background: var(--main); color: #fff; box-shadow: inset 0 0 0 1.5px var(--main);
  transition: background-color 150ms ease, box-shadow 150ms ease;
}
.tick svg { width: 100%; height: 100%; stroke-width: 2.4; transition: opacity 120ms ease, transform 180ms var(--ease-out); }
.tick svg use { stroke-width: 2.4; }
.page-toggle img {
  width: 62px; height: 84px; flex: none; object-fit: contain;
  /* Follows the page's own outline, so a narrow receipt and a letter both cast the right shadow. */
  filter: drop-shadow(0 1px 1px rgb(18 26 51 / 0.1)) drop-shadow(0 4px 7px rgb(18 26 51 / 0.16));
  transition: opacity 180ms ease;
}
.page-text { min-width: 0; display: block; transition: opacity 180ms ease; }
.page-text b { display: block; font-size: 17px; font-weight: 500; }
.page-text small { display: block; font-size: 14px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-toggle[aria-pressed="false"] .tick { background: transparent; box-shadow: inset 0 0 0 1.5px var(--outline); }
.page-toggle[aria-pressed="false"] .tick svg { opacity: 0; transform: scale(0.8); }
.page-toggle[aria-pressed="false"] img,
.page-toggle[aria-pressed="false"] .page-text { opacity: 0.4; }
.page-grip {
  flex: none; width: 48px; height: 64px; padding: 20px 12px; color: var(--soft);
  cursor: grab; touch-action: none; border-radius: 12px;
}
.page-grip svg { width: 100%; height: 100%; }
.page-row.lifted {
  z-index: 2; transition: box-shadow 180ms ease; border-bottom-color: transparent;
  box-shadow: 0 16px 34px -10px rgb(18 26 51 / 0.32), 0 0 0 1px var(--rule);
  border-radius: 14px;
}
.page-row.lifted .page-grip { cursor: grabbing; }
.pages.instant .page-row { transition: none; }

@media (max-width: 1000px) {
  .send-grid { grid-template-columns: 1fr; }
  .chooser { max-width: 520px; width: 100%; }
}
@media (max-width: 460px) {
  .chooser { padding-inline: 16px; }
  .actions { gap: 6px; }
}

/* Business cards */
.cards { padding-block: clamp(48px, 6vw, 88px) var(--section); }
.cards-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.biz-card {
  position: relative;
  transform: rotate(-3deg);
  background: var(--paper);
  box-shadow: var(--shadow-lift);
}
.biz-mark {
  position: absolute; display: block; background: var(--highlight); mix-blend-mode: multiply;
  left: 0; top: 0; width: 0; height: 0; opacity: 0;
  transition: opacity 125ms ease-out;
}
.biz-mark.on { opacity: 1; }
.biz-mark.instant { transition-duration: 0ms; }
.contact { margin-top: 26px; max-width: 460px; }
.contact button { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; transition: color 120ms ease; }
.contact button:focus-visible { outline-offset: 1px; }
.contact-head button { min-height: 28px; color: var(--soft); }
.contact-head button b { color: var(--text); font-weight: 600; }
.contact-head .contact-name { font-size: clamp(28px, 3vw, 34px); font-weight: 700; letter-spacing: -0.015em; color: var(--text); margin-bottom: 4px; min-height: 42px; }
.contact ul { margin-top: 16px; border-top: 1px solid var(--rule); }
.contact li { border-bottom: 1px solid var(--rule); }
.contact li button { min-height: 52px; font-size: 17px; }
.contact li svg { width: 22px; height: 22px; color: var(--main); flex: none; }

@media (max-width: 1000px) {
  .cards-grid { grid-template-columns: 1fr; }
  .cards-art { order: 2; max-width: 560px; padding: 8px; }
}

/* Privacy */
.privacy { background: var(--behind); padding-block: var(--section); }
.privacy-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.privacy-head h2 { margin-bottom: 22px; }
.ledger { border-top: 2px solid var(--text); }
.ledger > div { display: grid; grid-template-columns: 170px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid rgb(18 26 51 / 0.2); }
.ledger dt { font-weight: 700; font-size: 19px; line-height: 1.3; }
.ledger dd { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.42; text-wrap: pretty; }
.retention { margin-top: 36px; max-width: none; background: var(--sheet); border-radius: 30px; padding: 24px; }
.retention .choice-note { margin-bottom: 0; }

@media (max-width: 1000px) { .privacy-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .ledger > div { grid-template-columns: 1fr; gap: 6px; }
  .seg label { font-size: 14px; }
  .retention { padding: 20px 16px; }
}

/* Questions. All open: nothing here is worth a click to reach. */
.questions { background: var(--sheet); padding-block: var(--section); }
.qa { margin-top: clamp(28px, 4vw, 48px); columns: 2; column-gap: clamp(32px, 6vw, 96px); }
.qa > div { break-inside: avoid; padding: 20px 0 22px; border-top: 1px solid var(--rule); }
.qa dt { font-size: 20px; font-weight: 700; letter-spacing: -0.006em; }
.qa dd { margin-top: 5px; color: var(--soft); text-wrap: pretty; }
@media (max-width: 760px) { .qa { columns: 1; } }

/* The end: the app icon, at full size. */
.end {
  position: relative; overflow: hidden;
  background: var(--main); color: #fff;
  padding-block: clamp(72px, 10vw, 136px) 28px;
}
.end :focus-visible { outline-color: #fff; }
.end ::selection { background: #fff; color: var(--main); }
.end-art { position: absolute; inset: 0; pointer-events: none; }
.sheet-art.big {
  --sheet-w: clamp(280px, 38vw, 560px);
  left: auto; right: max(calc(50% - 660px), 4vw); top: 13%;
  padding-top: calc(var(--sheet-w) * 0.15);
  gap: calc(var(--sheet-w) * 0.075);
  transform: rotate(4deg);
  box-shadow: 0 24px 50px -10px rgb(9 18 77 / 0.5);
}
.sheet-art.big i { height: calc(var(--sheet-w) * 0.052); }
.sheet-art.big i.marked::before { inset: calc(var(--sheet-w) * -0.034); }
.end-inner { position: relative; }
.end-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(49px, 6.42vw, 93px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-left: -0.02em;
  max-width: 5.65em;
}
.end-line { margin-top: 20px; font-size: clamp(19px, 2vw, 26px); font-weight: 500; line-height: 1.25; }
.end-foot {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px;
  margin-top: clamp(150px, 19vw, 280px);
  padding-top: 18px;
  font-size: 15px; color: rgb(255 255 255 / 0.88);
}
/* White words would vanish on the white paper, so the row wraps before it gets there. */
@media (min-width: 761px) { .end-foot { max-width: 48vw; } }
.end-foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.end-foot a { text-underline-offset: 3px; }
/* Small words, normal-sized targets. */
.end-foot a, .legal-end a { display: inline-block; padding-block: 11px; margin-block: -11px; }
.brand { padding-block: 6px; }
@media (max-width: 760px) {
  .sheet-art.big { --sheet-w: 58vw; right: -6vw; top: auto; bottom: 146px; }
  .end-foot { margin-top: 88vw; }
}

/* Entrances. One time only, and quick to get out of the way. */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero-copy > *,
  html.js .title span {
    animation: rise 620ms var(--ease-out) both;
  }
  html.js .title { animation: none; }
  html.js .title span:nth-child(2) { animation-delay: 50ms; }
  html.js .tagline { animation-delay: 110ms !important; }
  html.js .lede { animation-delay: 160ms !important; }
  html.js .hero-actions { animation-delay: 210ms !important; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }

  html.js .hero-stage > .sheet-art { animation: lay-down 760ms var(--ease-out) 120ms both; }
  @keyframes lay-down { from { opacity: 0; transform: translateY(20px) rotate(-1.5deg); } }
  html.js .phone-slot { animation: rise 760ms var(--ease-out) 60ms both; }
  html.js .caption { animation: rise 620ms var(--ease-out) 420ms both; }

  html.js .hero-stage > .sheet-art i:not(.gap) {
    animation: bar-in 420ms var(--ease-in-out) both;
    animation-delay: calc(240ms + var(--n, 0) * 45ms);
  }
  @keyframes bar-in { from { clip-path: inset(-40% 100% -40% -10%); } to { clip-path: inset(-40% -10% -40% -10%); } }

  html.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
  html.js [data-reveal].in { opacity: 1; transform: none; }
  html.js .search-copy[data-reveal].in { transform: none; }

  html.js [data-sweep] i { clip-path: inset(-40% 100% -40% -10%); }
  html.js [data-sweep].in i { clip-path: inset(-40% -10% -40% -10%); transition: clip-path 560ms var(--ease-in-out); transition-delay: calc(var(--n, 0) * 70ms); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal] { opacity: 0; transition: opacity 240ms ease; }
  html.js [data-reveal].in { opacity: 1; }
  .button, .chips button, .page-toggle, .page-row, .seg-thumb, .knob, .pause { transition-property: background-color, color, border-color, opacity !important; }
  .button:active, .chips button:active, .page-toggle:active, .pause:active { transform: none; }
  .marks.sweep mark { animation: none; }
  .pause { display: none; }
  .caption { grid-template-columns: 1fr; }
}

/* Legal pages */
.legal { background: var(--behind); padding-top: clamp(28px, 5vw, 56px); min-height: calc(100svh - var(--bar)); display: flex; flex-direction: column; }
.legal-sheet { flex: 1; background: var(--sheet); border-radius: 40px 40px 0 0; padding-block: clamp(40px, 6vw, 72px) var(--section); }
.legal-sheet .wrap { max-width: 780px; }
.legal h1 { font-family: var(--display); font-size: clamp(32px, 4vw, 53px); line-height: 1.04; letter-spacing: -0.02em; font-weight: 900; text-transform: uppercase; }
.legal-note { margin-top: 12px; color: var(--soft); }
.legal-text { margin-top: 34px; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.52; }
.legal-text p + p { margin-top: 18px; }
.legal-text b { font-weight: 700; }
.legal-foot { margin-top: 40px; }
.legal-end { background: var(--main); color: #fff; padding: 22px 0; font-size: 15px; }
.legal-end .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.legal-end nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.legal-end a { text-underline-offset: 3px; }
.legal-end :focus-visible { outline-color: #fff; }

/* Without scripts the phone can't be scaled or run, and the rest of the page still reads. */
html:not(.js) .phone-slot, html:not(.js) .caption, html:not(.js) .find, html:not(.js) .compare-handle { display: none; }