/* Fandeck: the app's own palette, type and card skins, carried onto the web. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* App palette (Paper) */
  --ground: #f4efe6;
  --ground-2: #ebe4d7;
  --surface: #fbf8f2;
  --ink: #201c16;
  --ink-soft: #6b6355;
  --line: #201c1614;
  --action: #d8452b;
  --action-pressed: #b03a22;

  /* Card skins, exactly as the app draws them */
  --terracotta: #d8452b;  --terracotta-ink: #fff2ec;
  --ochre: #e9a31b;       --ochre-ink: #2a1d04;
  --moss: #2e5b47;        --moss-ink: #eaf2e7;
  --indigo: #2b3a5b;      --indigo-ink: #e7ecf8;
  --plum: #5a3560;        --plum-ink: #f6e9f4;
  --sand: #e3d3b8;        --sand-ink: #2b2419;

  --radius-card: 12px;
  --radius-sheet: 18px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Archivo", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-stretch: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; max-width: 64ch; }
h1, h2, h3 { margin: 0; line-height: 1.02; letter-spacing: -0.02em; font-stretch: 118%; font-weight: 800; }
h2 { font-size: clamp(34px, 5.4vw, 68px); }
h3 { font-size: clamp(20px, 2vw, 24px); font-stretch: 105%; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-soft);
}
.lede { font-size: clamp(18px, 1.7vw, 21px); color: var(--ink-soft); max-width: 46ch; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; border: 0;
  transition: transform 0.25s var(--ease), background-color 0.2s;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--action); color: #fff8f3; box-shadow: 0 8px 22px -10px #d8452b99; }
.btn-primary:hover { background: var(--action-pressed); }
.btn-ghost { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1.5px #201c1629; }
.btn-ghost:hover { background: #201c160a; }
/* Stand-ins for Apple's and Google's official badges, which replace these before launch.
   Both are drawn the same: one black badge, one size, so the pair reads as a set. */
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store {
  display: inline-flex; align-items: center; gap: 12px; width: 188px; height: 58px; padding: 0 18px;
  border-radius: 14px; background: var(--ink); color: var(--ground); text-decoration: none;
  transition: transform 0.25s var(--ease);
}
.store:hover { transform: translateY(-2px); }
/* Google Play until the listing exists: the same badge, quieter, and not clickable. */
.store.soon { opacity: 0.5; cursor: default; }
.store.soon:hover { transform: none; }
.launch-note { margin: 14px 0 0; font-size: 15px; color: var(--ink-soft, var(--ink)); max-width: 46ch; }
/* Icons are files used as masks, so they take the badge's text colour. Kept out of the page's
   HTML because scanners read the digits in inline path data as IP addresses (MetaDefender, Oct 2026). */
.store-icon { width: 26px; height: 26px; flex: none; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.store-icon.apple { --icon: url("img/store-apple.svg"); }
.store-icon.play { --icon: url("img/store-play.svg"); }
.store small { display: block; font-size: 11px; opacity: 0.75; line-height: 1; letter-spacing: 0.01em; }
.store b { display: block; font-size: 19px; font-weight: 700; line-height: 1.15; font-stretch: 105%; white-space: nowrap; }
.closing .store { background: var(--terracotta-ink); color: var(--ink); }
.text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--ink); font-weight: 700; font-size: 16px; text-decoration: none; }
.text-link span { transition: transform 0.25s var(--ease); }
.text-link:hover span { transform: translateY(3px); }
.closing .stores { margin-top: 0; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.nav.scrolled { border-bottom-color: var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 22px; font-stretch: 108%; letter-spacing: -0.02em; }
.brand img { width: 34px; height: auto; }
/* Header: half as big again, to stand level with the Get the app button. */
.nav .brand { font-size: 33px; gap: 14px; }
.nav .brand img { width: 51px; }
@media (max-width: 400px) { .nav .brand { font-size: 27px; gap: 11px; } .nav .brand img { width: 42px; } }
.nav nav { display: flex; gap: 26px; margin-left: auto; }
.nav nav a { text-decoration: none; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.nav nav a:hover { color: var(--ink); }
.nav .btn { min-height: 42px; padding: 0 18px; font-size: 14px; }
@media (max-width: 860px) { .nav nav { display: none; } .nav .btn { margin-left: auto; } }

/* ---------- Hero ---------- */
.hero { padding: clamp(32px, 5vw, 72px) 0 clamp(56px, 7vw, 104px); position: relative; overflow-x: clip; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(44px, 5.9vw, 88px); font-stretch: 120%; letter-spacing: -0.035em; line-height: 0.94; margin: 18px 0 26px; }
.hero h1 .accent { color: var(--action); }
.hero .ctas { margin-top: 34px; }
.hero .facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px; padding: 0; list-style: none; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.hero .facts li { display: flex; align-items: center; gap: 8px; }
.hero .facts li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--action); transform: rotate(12deg); }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } }

/* The fan: the app's home screen idea, and its mark, as the hero object. */
.fan { position: relative; height: clamp(360px, 42vw, 540px); }
.fan .card {
  position: absolute; left: 50%; top: 50%;
  width: clamp(250px, 27vw, 370px); aspect-ratio: 1.62;
  margin: calc(clamp(250px, 27vw, 370px) / -3.24) 0 0 calc(clamp(250px, 27vw, 370px) / -2);
  transform-origin: 18% 92%;
  transform: rotate(0deg) translate(0, 0);
  transition: transform 1.1s var(--ease), box-shadow 0.4s;
  z-index: var(--z, 1);
}
.fan.open .card { transform: rotate(var(--r)) translate(var(--x), var(--y)); }
.fan.open .card:hover { transform: rotate(var(--r)) translate(var(--x), calc(var(--y) - 22px)); }
@media (prefers-reduced-motion: reduce) { .fan .card { transition: none; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.card {
  border-radius: var(--radius-card);
  background: var(--f); color: var(--i);
  padding: 7% 7.5%;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 1px 0 #ffffff26 inset, 0 18px 40px -18px #201c1680, 0 3px 8px -3px #201c1640;
  overflow: hidden; position: relative; isolation: isolate;
}
.card::after {
  /* the app's quiet geometric skin, drawn with gradients */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.16;
  background:
    radial-gradient(circle at 82% 18%, transparent 0 22%, currentColor 22.4% 23%, transparent 23.4% 31%, currentColor 31.4% 32%, transparent 32.4%),
    linear-gradient(118deg, transparent 0 58%, #ffffff40 58% 100%);
}
.card.dots::after { background: radial-gradient(currentColor 1.3px, transparent 1.6px) 0 0 / 14px 14px, linear-gradient(118deg, transparent 0 60%, #ffffff30 60%); }
.card.grid::after { background: linear-gradient(currentColor 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, currentColor 1px, transparent 1px) 0 0 / 22px 22px; opacity: 0.1; }
.card.lines::after { background: repeating-linear-gradient(135deg, currentColor 0 1px, transparent 1px 12px); opacity: 0.1; }
.card .top { display: flex; align-items: center; gap: 10px; }
.card .mono {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; background: color-mix(in srgb, currentColor 16%, transparent);
}
.card .name { font-weight: 700; font-size: clamp(15px, 1.35vw, 19px); letter-spacing: -0.01em; }
.card .tag {
  margin-left: auto; font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb, currentColor 14%, transparent);
}
.card .role { font-size: clamp(11px, 0.95vw, 13px); font-weight: 500; opacity: 0.85; }
/* Cards painted by cardart.js: the app's own generative art, drawn as SVG behind the text. */
.card.has-art::after { display: none; }
.card > svg.art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.card.has-art .role { color: var(--i-soft); opacity: 1; font-weight: 600; }
.card.has-art .mono, .card.has-art .tag { background: var(--badge); }

/* ---------- Every card is an original ---------- */
.art .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.art-copy p { max-width: 58ch; color: var(--ink-soft); }
.art-copy .lede { color: var(--ink); margin-top: 22px; }
.art-demo { display: grid; justify-items: center; gap: 18px; }
.art-stage { width: min(100%, 460px); aspect-ratio: 1.62; perspective: 1400px; }
.art-flipper { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.7s var(--ease); }
.art-stage.flipped .art-flipper { transform: rotateY(180deg); }
.art-flipper > * { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.art-card { width: 100%; height: 100%; transition: transform 0.5s var(--ease); }
/* The scan as it was printed: fitted, not cropped, on the app's dark ground. */
.art-photo { transform: rotateY(180deg); background: #1A1815; border-radius: var(--radius-card); overflow: hidden; display: grid; place-items: center;
  box-shadow: 0 18px 40px -18px #201c1680, 0 3px 8px -3px #201c1640; }
.art-photo img { width: 100%; height: 100%; object-fit: contain; }
/* The typed name, printed onto the sample photo where the card's name and email lines sit.
   Positions are the photo's own (1296x800): name baseline at y 401, Arial Bold 78; email
   baseline at y 645, Arial 32; left edge x 96. Units are % of the photo via container units. */
.scan-print { position: absolute; inset: 0; container-type: size; pointer-events: none; color: #201e24;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; filter: blur(0.3px); }
.scan-print span { position: absolute; left: 7.41cqw; line-height: 1; white-space: nowrap; }
.scan-name { top: 41.87cqh; font-size: 9.75cqh; font-weight: 700; letter-spacing: -0.005em; max-width: 86cqw; }
.scan-email { top: 77.24cqh; left: 7.56cqw; font-size: 4cqh; }
/* Same size and corner as the monogram badge, mirrored bottom-right (the app's scan badge). */
.scan-badge {
  position: absolute; right: 7.5%; bottom: 7%; width: 30px; height: 30px; border-radius: 8px; border: 0; padding: 0;
  display: grid; place-items: center; cursor: pointer; color: var(--i); background: var(--badge, #ffffff33);
  transition: transform 0.2s var(--ease);
}
.scan-badge:hover { transform: scale(1.08); }
.scan-badge:focus-visible { outline: 2px solid var(--i); outline-offset: 2px; }
.scan-badge svg { width: 15px; height: 15px; }
.scan-badge.on { color: #fff; background: #0000008c; right: 4.5%; bottom: 5%; }
.art-card .name { font-size: clamp(17px, 1.6vw, 22px); }
.art-card .role { font-size: clamp(12px, 1vw, 14px); }
.art-card.turn { transform: rotateY(6deg) scale(0.985); }
.art-controls { display: flex; gap: 10px; width: min(100%, 460px); }
.art-controls input {
  flex: 1; min-width: 0; height: 52px; padding: 0 18px; border-radius: 999px; border: 0;
  font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line);
}
.art-controls input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--action); }
.art-note { display: flex; gap: 10px; align-items: flex-start; width: min(100%, 460px); margin: 4px 0 0; padding: 14px 16px;
  border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.art-note svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--action); }
.art-caption { margin: 0; font-size: 13px; color: var(--ink-soft); letter-spacing: 0.02em; min-height: 1.4em; }
@media (max-width: 860px) { .art .wrap { grid-template-columns: 1fr; } }
@media (max-width: 400px) { .art-controls { flex-direction: column; } .art-controls .btn { justify-content: center; } }
.skin-terracotta { --f: var(--terracotta); --i: var(--terracotta-ink); }
.skin-ochre { --f: var(--ochre); --i: var(--ochre-ink); }
.skin-moss { --f: var(--moss); --i: var(--moss-ink); }
.skin-indigo { --f: var(--indigo); --i: var(--indigo-ink); }
.skin-plum { --f: var(--plum); --i: var(--plum-ink); }
.skin-sand { --f: var(--sand); --i: var(--sand-ink); }

/* ---------- Marquee of names / places ---------- */
.ticker { border-block: 1px solid var(--line); overflow: hidden; padding: 18px 0; background: var(--surface); }
.ticker ul { display: flex; gap: 48px; margin: 0; padding: 0; list-style: none; width: max-content; animation: tick 60s linear infinite; }
.ticker li { font-size: 15px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; display: flex; gap: 12px; align-items: center; }
.ticker li span { color: var(--ink); }
@keyframes tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker ul { animation: none; } }

/* ---------- Section rhythm ---------- */
section { position: relative; }
.sec { padding: clamp(80px, 11vw, 160px) 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(40px, 6vw, 80px); }
.sec-head .label { grid-column: 1 / -1; }
@media (max-width: 860px) { .sec-head { grid-template-columns: 1fr; } }

/* ---------- Phone frame ---------- */
.phone {
  width: 100%; max-width: 300px; border-radius: 42px; padding: 9px;
  background: #1b1814; box-shadow: 0 0 0 1.5px #3a342c inset, 0 40px 80px -40px #201c16a8, 0 10px 24px -12px #201c1660;
}
.phone img { width: 100%; height: auto; aspect-ratio: 1320 / 2868; border-radius: 34px; }

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); counter-reset: step; }
.step { display: flex; flex-direction: column; gap: 22px; }
.step .num { font-size: 15px; font-weight: 700; color: var(--action); }
.step h3 { margin: 6px 0 8px; }
.step p { color: var(--ink-soft); font-size: 16px; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; }
  .step:nth-child(n) { margin-top: 0; display: grid; grid-template-columns: 140px 1fr; align-items: start; gap: 20px; }
}

/* ---------- Drenched sections ---------- */
.drench { background: var(--f); color: var(--i); }
.drench .label, .drench .lede, .drench p { color: color-mix(in srgb, var(--i) 78%, transparent); }
.drench h2 { color: var(--i); }

/* Privacy */
.privacy .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.privacy h2 { font-size: clamp(36px, 4.4vw, 64px); }
.promises { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.promises li { padding: 22px 0; border-top: 1px solid color-mix(in srgb, var(--i) 18%, transparent); display: grid; grid-template-columns: 44px 1fr; gap: 16px; }
.promises li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--i) 18%, transparent); }
.promises b { display: block; font-size: 19px; font-weight: 700; color: var(--i); margin-bottom: 4px; }
.promises span { font-size: 16px; color: color-mix(in srgb, var(--i) 72%, transparent); }
.promises .ix { font-weight: 700; font-size: 14px; color: var(--ochre); padding-top: 4px; }
@media (max-width: 860px) { .privacy .wrap { grid-template-columns: 1fr; } }

/* ---------- Features: an uneven arrangement, each tile sized by what it shows ---------- */
.features { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.feat { background: var(--surface); border-radius: var(--radius-sheet); padding: clamp(22px, 2.6vw, 34px); position: relative; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.feat h3 { margin-bottom: 10px; }
.feat p { color: var(--ink-soft); font-size: 16px; margin: 0; }
.feat.big { grid-column: span 4; display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 28px; align-items: end; min-height: 440px; }
.feat.big .phone { max-width: 210px; align-self: center; }
.feat.tall { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; gap: 22px; }
.feat.tall .phone { max-width: 220px; margin: auto auto 0; }
.feat.third { grid-column: span 2; }
.feat.half { grid-column: span 3; }
.feat .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; background: var(--ground-2); color: var(--ink); }
.chip.on { background: var(--action); color: #fff6f0; }
.feat .scripts { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.feat .scripts span { font-size: 17px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--ground-2); font-family: "Archivo", system-ui, "Hiragino Sans", "Apple SD Gothic Neo", "Geeza Pro", sans-serif; }
@media (max-width: 980px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat.big, .feat.tall, .feat.half, .feat.third { grid-column: span 2; grid-row: auto; }
  .feat.big { grid-template-columns: 1fr; min-height: 0; }
  .feat.big .phone, .feat.tall .phone { margin: 8px auto 0; }
}

/* ---------- Business ---------- */
.biz h2 { max-width: 14ch; }
.flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 8px 0 clamp(56px, 7vw, 96px); }
.flow figure { margin: 0; padding: clamp(22px, 3vw, 36px); border-radius: var(--radius-sheet); background: color-mix(in srgb, var(--i) 7%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--i) 14%, transparent) inset; }
.flow figure.ours { background: var(--i); color: var(--moss); box-shadow: none; }
.flow figcaption { font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 26px; opacity: 0.8; }
.pipe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pipe .node { padding: 12px 16px; border-radius: 12px; font-weight: 700; font-size: 15px; background: color-mix(in srgb, currentColor 10%, transparent); white-space: nowrap; }
.pipe .node.vendor { text-decoration: line-through; text-decoration-thickness: 2px; opacity: 0.55; }
.flow figure:not(.ours) .pipe .node.vendor { text-decoration: none; opacity: 1; background: color-mix(in srgb, var(--ochre) 30%, transparent); }
.pipe .arrow { font-weight: 700; opacity: 0.6; }
.flow .note { margin: 22px 0 0; font-size: 15px; }
.flow figure.ours .note { color: var(--moss); opacity: 0.85; }
@media (max-width: 860px) { .flow { grid-template-columns: 1fr; } }

.biz-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.biz-shots { display: flex; gap: 18px; justify-content: center; align-items: flex-start; }
.biz-shots .phone { max-width: 230px; }
.biz-shots .phone:nth-child(2) { margin-top: 70px; }
.biz-points { list-style: none; margin: 0; padding: 0; }
.biz-points li { padding: 20px 0; border-top: 1px solid color-mix(in srgb, var(--i) 18%, transparent); }
.biz-points b { display: block; font-size: 19px; color: var(--i); margin-bottom: 4px; }
.biz-points span { color: color-mix(in srgb, var(--i) 74%, transparent); font-size: 16px; }
.biz .who { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.biz .who span { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; background: color-mix(in srgb, var(--i) 12%, transparent); color: var(--i); }
@media (max-width: 860px) { .biz-grid { grid-template-columns: 1fr; } .biz-shots .phone { max-width: 46%; } }

/* ---------- Compare ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-sheet); box-shadow: 0 0 0 1px var(--line); background: var(--surface); -webkit-overflow-scrolling: touch; }
table.compare { width: 100%; border-collapse: collapse; min-width: 820px; font-size: 15px; }
.compare th, .compare td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-size: 13px; font-weight: 700; background: var(--ground-2); position: sticky; top: 0; }
.compare tbody th { font-weight: 600; color: var(--ink-soft); width: 22%; }
.compare tr:last-child > * { border-bottom: 0; }
.compare .us { background: color-mix(in srgb, var(--action) 7%, var(--surface)); font-weight: 600; }
.compare thead .us { background: var(--action); color: #fff6f0; }
.yes { color: var(--moss); font-weight: 700; }
.compare tr.group th { background: var(--indigo); color: var(--indigo-ink); font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; width: auto; }
.compare sup { font-size: 10px; color: var(--ink-soft); }
.fine a { color: var(--ink-soft); }
.no { color: var(--ink-soft); }
.fine { font-size: 13px; color: var(--ink-soft); margin-top: 14px; }
/* Under the compare table: as wide as the table, and quiet. */
.compare-note { max-width: none; font-weight: 400; color: color-mix(in srgb, var(--ink-soft) 75%, transparent); }

/* ---------- Pricing ---------- */
.billing { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--ground-2); margin-bottom: 36px; }
.billing button { font: inherit; font-size: 14px; font-weight: 700; border: 0; background: transparent; padding: 10px 18px; border-radius: 999px; cursor: pointer; color: var(--ink-soft); }
.billing button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px -3px #201c1640; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { border-radius: var(--radius-sheet); padding: clamp(24px, 3vw, 36px); background: var(--surface); box-shadow: 0 0 0 1px var(--line); display: flex; flex-direction: column; }
.plan.pro { background: var(--ink); color: var(--ground); box-shadow: none; }
.plan.pro .label, .plan.pro li, .plan.pro .per { color: #f4efe6b3; }
.plan .price { font-size: clamp(44px, 5vw, 60px); font-weight: 800; font-stretch: 115%; letter-spacing: -0.03em; line-height: 1; margin: 18px 0 6px; }
.plan .per { font-size: 14px; color: var(--ink-soft); min-height: 42px; }
.plan ul { list-style: none; margin: 22px 0 28px; padding: 0; display: grid; gap: 10px; font-size: 15px; color: var(--ink-soft); }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.plan li::before { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--action); border-bottom: 2px solid var(--action); transform: rotate(-45deg) translate(2px, 6px); }
.plan .btn { margin-top: auto; justify-content: center; }
.plan.pro .btn-ghost { color: var(--ground); box-shadow: inset 0 0 0 1.5px #f4efe64d; }
.plan .badge { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--action); color: #fff6f0; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }

/* ---------- About ---------- */
.about .wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); }
.about .big-quote { font-size: clamp(26px, 2.5vw, 36px); font-weight: 700; font-stretch: 110%; line-height: 1.12; letter-spacing: -0.02em; }
.about .big-quote em { font-style: normal; color: var(--action); }
@media (max-width: 860px) { .about .wrap { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 24px 48px 24px 0; font-size: clamp(18px, 1.8vw, 21px); font-weight: 700; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--action); border-bottom: 2px solid var(--action); transform: translateY(-70%) rotate(45deg); transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { color: var(--ink-soft); padding-bottom: 20px; }

/* ---------- Closing + footer ---------- */
.closing { text-align: left; }
.closing .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 40px; align-items: end; }
.closing h2 { font-size: clamp(40px, 5.4vw, 80px); }
@media (max-width: 860px) { .closing .wrap { grid-template-columns: 1fr; } }
footer { padding: 56px 0 40px; font-size: 14px; color: var(--ink-soft); }
footer .wrap { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
footer h4 { margin: 0 0 12px; font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink); }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); }
footer .legal { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
@media (max-width: 760px) { footer .wrap { grid-template-columns: 1fr 1fr; } }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

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

/* Very narrow screens (small phones, a squeezed window): keep the header button on one
   line and stack each step's screenshot above its text instead of beside it. */
@media (max-width: 400px) {
  .nav .btn { white-space: nowrap; padding-inline: 14px; }
  .step:nth-child(n) { grid-template-columns: 1fr; }
  .step:nth-child(n) .phone { max-width: 220px; }
}