/*
 * Befora — selling page styles.
 * Design language (locked 2026-07-01, see docs/brand/explorations.html):
 * ink-first register, Instrument Sans single family, brass accent.
 * Tokens below are the brand canon — do not invent values per-section.
 */

:root {
  --ink: #0E0F11;
  --ink-raised: #16181B;
  --ink-line: #26282C;
  --graphite: #8A8F98;
  --paper: #FAFAFA;
  --card: #FFFFFF;
  --line: #E7E8EA;
  --text: #111214;
  --text-muted: #6E7278;
  --brass: #E9A13B;
  --brass-deep: #B57718;
  --on-ink: #F5F6F7;
  --on-ink-muted: #9BA0A8;
  --radius-card: 20px;
  --radius-ctrl: 12px;
  --w: 1080px;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/instrument-sans-var-latin.woff2") format("woff2");
  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: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/instrument-sans-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--ink);
  color: var(--on-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

.wrap { max-width: var(--w); margin: 0 auto; padding: 0 24px; }

/* ---------- registers ---------- */
.reg-ink { background: var(--ink); color: var(--on-ink); }
.reg-paper { background: var(--paper); color: var(--text); }
section { padding: 96px 0; }
@media (max-width: 720px) { section { padding: 64px 0; } }

/* ---------- type scale ---------- */
/* Balanced wrapping on all headers — no orphan word on its own line
   (progressive enhancement; browsers without text-wrap just wrap normally). */
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: clamp(38px, 6vw, 68px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.06; }
h2 { font-size: clamp(30px, 4.4vw, 44px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.12; }
h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.kicker {
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 16px;
}
.reg-paper .kicker { color: var(--brass-deep); }
.lede { font-size: clamp(16px, 2vw, 19px); max-width: 620px; }
.reg-ink .lede { color: var(--on-ink-muted); }
.reg-paper .lede { color: var(--text-muted); }
.tag {
  display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
  padding: 4px 10px; border-radius: 6px; border: 1px solid;
}
.tag.before { color: var(--graphite); border-color: var(--ink-line); }
.reg-paper .tag.before { border-color: var(--line); }
.tag.after { color: var(--brass); border-color: var(--brass); }
.reg-paper .tag.after { color: var(--brass-deep); }

/* ---------- reveal on scroll ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14, 15, 17, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ink-line);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.wordmark { font-size: 19px; font-weight: 600; letter-spacing: 0.12em; text-decoration: none; }
.wordmark .ra { color: var(--brass); }
/* Finalist A split O (decided, Yendi 2026-07-03): white -> brass, left-to-right
   transformation logic. The circle fills its whole viewBox and sits a hair past
   the cap band top AND bottom (round-letter overshoot) so it reads the same
   height as the flat-topped caps instead of optically shorter. */
/* Optically centered between F and R: the F's open right side + "BEF"'s trailing
   letter-spacing fake extra space after the F, so the disc takes a slight
   negative left / larger right margin. */
.wordmark .o { display: inline-block; height: 0.76em; width: 0.76em; vertical-align: -0.02em; margin: 0 0.14em 0 -0.04em; }
.wordmark .o .l { fill: var(--on-ink); }
.wordmark .o .r { fill: var(--brass); }
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--on-ink-muted); text-decoration: none; transition: color 0.15s; }
.nav-links a:hover { color: var(--on-ink); }
.btn {
  display: inline-block; font-size: 15px; font-weight: 600; text-decoration: none;
  padding: 12px 24px; border-radius: var(--radius-ctrl); transition: transform 0.15s, background 0.15s;
}
.btn:active { transform: scale(0.98); }
.btn-brass { background: var(--brass); color: #231604; }
.btn-brass:hover { background: #F0B054; }
.btn-ghost { border: 1px solid var(--ink-line); color: var(--on-ink); }
.btn-ghost:hover { border-color: var(--graphite); }
.nav .btn { padding: 9px 18px; font-size: 14px; }
.lang-toggle {
  background: none; border: 1px solid var(--ink-line); border-radius: 8px;
  color: var(--on-ink-muted); font: inherit; font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em; padding: 8px 12px; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.lang-toggle:hover { color: var(--brass); border-color: var(--brass); }
.nav-burger { display: none; }
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-burger { display: block; background: none; border: 1px solid var(--ink-line); border-radius: 8px; padding: 7px 10px; color: var(--on-ink); font-size: 14px; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; gap: 0; position: absolute; left: 0; right: 0; top: 64px;
    background: var(--ink); border-bottom: 1px solid var(--ink-line); padding: 8px 24px 16px;
  }
  .nav.open .nav-links a { display: block; padding: 12px 0; font-size: 16px; }
}

/* ---------- hero ---------- */
.hero { padding: 88px 0 96px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }
.hero .lede { margin: 22px 0 32px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-note { font-size: 13px; color: var(--on-ink-muted); margin-top: 16px; }
.hero-note strong { color: var(--on-ink); font-weight: 600; }

/* before/after slider */
.ba {
  position: relative; border-radius: var(--radius-card); overflow: hidden;
  aspect-ratio: 4 / 3; user-select: none; touch-action: none; background: #000;
}
.ba > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.ba > svg.active { display: block; }
.ba-after { clip-path: inset(0 0 0 50%); }
.ba-seam {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--brass);
  transform: translateX(-50%); pointer-events: none;
}
.ba-knob {
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px;
  background: var(--brass); border-radius: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.ba-knob svg { position: static; width: 22px; height: 22px; }
.ba .tag { position: absolute; top: 14px; }
.ba .tag.before { left: 14px; background: rgba(14,15,17,0.55); }
.ba .tag.after { right: 14px; background: rgba(14,15,17,0.55); }
.ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0;
}
.ba-hint { text-align: center; font-size: 13px; color: var(--on-ink-muted); margin-top: 10px; }
.scene-tabs { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.scene-tab {
  background: none; border: 1px solid var(--ink-line); border-radius: 999px;
  color: var(--on-ink-muted); font: inherit; font-size: 13px; font-weight: 500;
  padding: 7px 16px; cursor: pointer; transition: color 0.15s, border-color 0.15s;
}
.scene-tab:hover { color: var(--on-ink); }
.scene-tab.active { color: var(--brass); border-color: var(--brass); }

/* verticals strip */
.verticals { margin-top: 84px; text-align: center; }
.verticals-line {
  font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-ink-muted); margin-bottom: 18px;
}
.verticals-chips { max-width: 760px; margin: 0 auto; }
.verticals-chips span {
  display: inline-block; border: 1px solid var(--ink-line); border-radius: 999px;
  padding: 6px 14px; margin: 4px 3px; font-size: 13px; color: var(--on-ink-muted);
}

/* ---------- pain ---------- */
.pain-head { max-width: 560px; margin-bottom: 48px; }
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .pain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pain-grid { grid-template-columns: 1fr; } }
.pain-card {
  background: var(--ink-raised); border: 1px solid var(--ink-line);
  border-radius: var(--radius-card); padding: 22px;
}
.pain-card figure { margin: 0 0 18px; border-radius: 12px; overflow: hidden; background: var(--ink); position: relative; aspect-ratio: 306 / 188; }
.pain-card h3 { margin-bottom: 6px; }
.pain-card p { font-size: 14px; color: var(--on-ink-muted); }
.pain-close { text-align: center; max-width: 720px; margin: 72px auto 0; }
.pain-close h2 .gold { color: var(--brass); }

/* ---------- pain card mockups (2026-07-11) — scoped under .pain-card, pm- prefixed ---------- */
.pain-card figure .mock { position:absolute; inset:0; }

/* 1 · the scroll — iPhone camera roll */
.pain-card .pm-back { position:absolute; inset:0; background:url("img/pain/scroll-b.webp") center/220% no-repeat; filter:blur(16px) brightness(.3) saturate(.9); transform:scale(1.1); }
.pain-card .pm-back::after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(14,15,17,.15), rgba(14,15,17,.78)); }
.pain-card .pm-phone { position:absolute; left:50%; top:14px; transform:translateX(-50%); width:162px; height:340px; background:#08080a; border-radius:33px; padding:5px; box-shadow:0 20px 46px rgba(0,0,0,.62), inset 0 0 0 1.5px #3a3b3f, 0 0 0 1px #000; }
.pain-card .pm-screen { position:relative; width:100%; height:100%; background:#0b0c0e; border-radius:28px; overflow:hidden; }
.pain-card .pm-island { position:absolute; z-index:6; top:9px; left:50%; transform:translateX(-50%); width:48px; height:15px; background:#000; border-radius:9px; }
/* The camera-roll scroll is driven by JS (landing.js §4) via the Web Animations
   API, because the exact distance to the strip's true bottom depends on the
   responsive window the figure clips the phone to. */
.pain-card .pm-track { position:absolute; z-index:1; top:62px; left:0; width:100%; display:flex; flex-direction:column; will-change:transform; }
.pain-card .pm-track img { width:100%; display:block; }
.pain-card .pm-top { position:absolute; z-index:4; inset:0 0 auto 0; height:62px; padding:0 13px; background:#0b0c0e; box-shadow:0 5px 9px rgba(11,12,14,.92); }
.pain-card .pm-status { display:flex; justify-content:space-between; align-items:center; height:24px; padding-top:5px; }
.pain-card .pm-status .pm-time { font-size:10px; color:#fff; font-weight:600; letter-spacing:.2px; }
.pain-card .pm-sys { display:flex; gap:2.5px; align-items:center; }
.pain-card .pm-sys .pm-sig { width:10px; height:6.5px; }
.pain-card .pm-sys .pm-wifi { width:10px; height:7px; }
.pain-card .pm-sys .pm-bat { width:15px; height:7.5px; }
.pain-card .pm-head { display:flex; align-items:baseline; gap:5px; padding:5px 2px 4px; }
.pain-card .pm-head b { font-size:14px; color:#fff; font-weight:700; letter-spacing:-.02em; }
.pain-card .pm-head span { font-size:9px; color:#8A8F98; }
.pain-card .pm-search { margin:0 2px; height:17px; border-radius:8px; background:rgba(255,255,255,.1); display:flex; align-items:center; gap:4px; padding:0 7px; }
.pain-card .pm-search svg { width:9px; height:9px; }
.pain-card .pm-search i { font-style:normal; font-size:9px; color:#8A8F98; }
.pain-card .pm-pill { position:absolute; z-index:6; left:12px; bottom:12px; background:rgba(14,15,17,.85); backdrop-filter:blur(6px); border:1px solid var(--ink-line); color:var(--on-ink); font-size:11px; font-weight:600; padding:5px 9px; border-radius:8px; }
.pain-card .pm-pill b { color:var(--brass); }

/* 2 · crooked before/after */
.pain-card .pm-crook { background:var(--ink); }
.pain-card .pm-crook .pm-ph { position:absolute; border-radius:7px; overflow:hidden; border:3px solid #1b1d21; box-shadow:0 12px 26px rgba(0,0,0,.55); background:#000; }
.pain-card .pm-crook .pm-ph img { width:100%; height:100%; object-fit:cover; display:block; }
.pain-card .pm-crook .pm-p1 { left:5%; top:27%; width:52%; aspect-ratio:4/3; transform:rotate(-7deg); }
.pain-card .pm-crook .pm-p2 { right:5%; top:13%; width:40%; aspect-ratio:3/4; transform:rotate(6deg); z-index:2; }
.pain-card .pm-crook .pm-cap { position:absolute; bottom:9px; left:50%; transform:translateX(-50%); z-index:5; font-size:10.5px; color:var(--on-ink-muted); background:rgba(14,15,17,.72); padding:3px 9px; border-radius:7px; white-space:nowrap; backdrop-filter:blur(3px); }

/* 3 · 9pm lock screen */
.pain-card .pm-lock { background:linear-gradient(160deg,#131418,#0b0c0e); padding:16px 16px 0; }
.pain-card .pm-lock .pm-moon { position:absolute; right:16px; top:14px; width:22px; height:22px; }
.pain-card .pm-lock .pm-clock { font-size:40px; font-weight:600; color:var(--on-ink); letter-spacing:-.02em; line-height:1; margin-top:6px; }
.pain-card .pm-lock .pm-date { font-size:13px; color:var(--on-ink-muted); margin-top:3px; }
.pain-card .pm-lock .pm-notif { position:absolute; left:14px; right:14px; bottom:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:9px 11px; display:flex; align-items:center; gap:9px; }
.pain-card .pm-lock .pm-notif .pm-ico { width:26px; height:26px; border-radius:7px; flex:none; background:linear-gradient(135deg,var(--brass),var(--brass-deep)); }
.pain-card .pm-lock .pm-notif .pm-tx b { display:block; font-size:11.5px; color:var(--on-ink); font-weight:600; }
.pain-card .pm-lock .pm-notif .pm-tx span { font-size:10.5px; color:var(--on-ink-muted); }
.pain-card .pm-lock .pm-notif .pm-tm { margin-left:auto; font-size:10px; color:var(--on-ink-muted); }

/* 4 · reviews */
.pain-card .pm-rev { background:var(--ink); padding:20px 18px; display:flex; flex-direction:column; justify-content:center; gap:18px; }
.pain-card .pm-rev .pm-name { font-size:13px; font-weight:600; color:var(--on-ink); margin-bottom:6px; }
.pain-card .pm-rev .pm-stars { display:flex; align-items:center; gap:8px; }
.pain-card .pm-rev .pm-stars .pm-s { color:var(--brass); font-size:15px; letter-spacing:1px; }
.pain-card .pm-rev .pm-stars .pm-n { font-size:12px; color:var(--on-ink-muted); }
.pain-card .pm-rev .pm-them .pm-n { color:var(--on-ink); font-weight:600; }

/* 5 · fossil 2000s site */
.pain-card .pm-foss { background:var(--ink); padding:13px; }
.pain-card .pm-fwin { position:absolute; inset:13px; border-radius:7px 7px 5px 5px; overflow:hidden; border:1px solid #26282C; background:#fff; display:flex; flex-direction:column; box-shadow:0 10px 24px rgba(0,0,0,.5); }
.pain-card .pm-fbar { height:20px; background:linear-gradient(#e9edf2,#c9d0d8); border-bottom:1px solid #9aa3ad; display:flex; align-items:center; gap:4px; padding:0 7px; flex:none; }
.pain-card .pm-fbar i { width:7px; height:7px; border-radius:50%; border:1px solid #7d858e; }
.pain-card .pm-fbar i:nth-child(1){background:#ff5f57} .pain-card .pm-fbar i:nth-child(2){background:#febc2e} .pain-card .pm-fbar i:nth-child(3){background:#28c840}
.pain-card .pm-furl { margin-left:5px; height:11px; flex:1; background:#fff; border:1px solid #9aa3ad; border-radius:2px; font:9px/11px "Times New Roman",serif; color:#31536b; padding:0 4px; overflow:hidden; white-space:nowrap; }
.pain-card .pm-fpage { flex:1; overflow:hidden; background:#8f949b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Crect width='12' height='12' fill='%238f949b'/%3E%3Crect width='6' height='6' fill='%239aa0a7'/%3E%3Crect x='6' y='6' width='6' height='6' fill='%239aa0a7'/%3E%3C/svg%3E"); font-family:"Times New Roman",Georgia,serif; position:relative; filter:saturate(.88); }
.pain-card .pm-fbanner { background:linear-gradient(#c0261f,#7d1712); border-bottom:3px ridge #ffd447; text-align:center; padding:3px 2px 4px; }
.pain-card .pm-fbanner h4 { font-family:"Comic Sans MS","Chalkboard SE",cursive; font-size:12px; color:#ffe14d; text-shadow:1px 1px 0 #000; margin:0; font-weight:700; line-height:1.05; }
.pain-card .pm-fbanner .pm-est { display:block; font-size:7.5px; color:#fff; font-style:italic; line-height:1; margin-top:1px; }
.pain-card .pm-fconstr { background:#ffd447; color:#000; text-align:center; font:bold 8px/1.5 "Comic Sans MS",cursive; border-bottom:1px solid #000; letter-spacing:.3px; }
.pain-card .pm-fbody { display:flex; gap:6px; padding:6px 6px 15px; }
.pain-card .pm-fnav { flex:none; width:46px; display:flex; flex-direction:column; gap:4px; }
.pain-card .pm-fnav a { font-size:9px; color:#0b3; text-decoration:underline; font-family:"Times New Roman",serif; }
.pain-card .pm-fnav a:nth-child(1){color:#00e} .pain-card .pm-fnav a:nth-child(3){color:#c0261f}
.pain-card .pm-fmain { flex:1; text-align:center; }
.pain-card .pm-fphoto { position:relative; border:2px solid #fff; outline:2px solid #001; background:#8a8f98 center/cover; height:40px; image-rendering:pixelated; }
.pain-card .pm-fphoto .pm-pcap { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.82); color:#fff; font:8.5px/1.5 "Times New Roman",serif; }
.pain-card .pm-fphoto .pm-pcap b { color:#ffd447; }
.pain-card .pm-ffoot { position:absolute; bottom:0; left:0; right:0; background:#001a33; color:#9fd; font-size:7.5px; text-align:center; padding:2px; font-family:"Times New Roman",serif; }
.pain-card .pm-ffoot .pm-hit { color:#0f0; font-family:"Courier New",monospace; letter-spacing:1px; }

/* 6 · vanished client */
.pain-card .pm-chat { background:var(--ink); padding:14px 14px 0; display:flex; flex-direction:column; gap:8px; }
.pain-card .pm-chat .pm-bub { max-width:74%; padding:8px 12px; border-radius:15px; font-size:12px; line-height:1.35; }
.pain-card .pm-chat .pm-inb { align-self:flex-start; background:var(--ink-line); color:var(--on-ink); border-bottom-left-radius:5px; }
.pain-card .pm-chat .pm-out { align-self:flex-end; background:linear-gradient(135deg,var(--brass),var(--brass-deep)); color:#1a1206; font-weight:600; border-bottom-right-radius:5px; }
.pain-card .pm-chat .pm-div { text-align:center; font-size:10.5px; color:var(--graphite); margin:6px 0 0; }
.pain-card .pm-chat .pm-ghost { align-self:flex-start; width:96px; height:30px; border-radius:15px 15px 15px 5px; border:1px dashed var(--ink-line); margin-top:2px; background:repeating-linear-gradient(90deg, transparent, transparent 4px, rgba(139,143,152,.16) 4px, rgba(139,143,152,.16) 8px); }

/* ---------- mechanism ---------- */
.mech-grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: 64px; align-items: center; }
@media (max-width: 900px) { .mech-grid { grid-template-columns: 1fr; gap: 40px; } }
.steps { list-style: none; margin-top: 36px; display: flex; flex-direction: column; gap: 22px; }
.steps li { display: flex; gap: 16px; }
.step-n {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--brass); color: #231604; font-weight: 600; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.steps h3 { margin-bottom: 2px; }
.steps p { font-size: 14.5px; color: var(--text-muted); max-width: 420px; }
.phone {
  width: min(320px, 82vw); margin: 0 auto; background: var(--ink);
  border-radius: 44px; padding: 12px; border: 1px solid #2E3035;
}
.phone-screen { border-radius: 34px; overflow: hidden; position: relative; }
.phone-screen > svg { width: 100%; height: auto; }

/* mechanism ghost-overlay: real roof photos (after = live feed, before = ghost)
   with the Anchor Shots capture mechanic — the ghost drifts handheld, locks into
   register, then the shutter flashes. Uses the launch video's own roof frames. */
.mech-cam { position: relative; aspect-ratio: 300 / 560; overflow: hidden; background: #0E0F11; }
.mech-cam img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
/* before = the ghost: PINNED reference, fixed in place; opacity quiets at the shutter.
   Zoomed to 1.2 so the drifting feed below it never uncovers an edge. */
.mech-ghost { opacity: .52; transform: scale(1.3); animation: mech-ghost-quiet 7s ease-out infinite; }
/* after = the live camera feed: drifts handheld, then locks into register with the ghost.
   Zoom 1.3 gives ~44px of margin per side so even the larger drift never reveals a cut edge. */
.mech-feed  { transform: scale(1.3) translate(16px,11px) rotate(2deg); animation: mech-align 7s ease-in-out infinite; }
.mech-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; animation: mech-flash 7s ease-out infinite; }
.mech-vf { position: absolute; inset: 0; width: 100%; height: 100%; }
/* live tilt-guide chip — the real CaptureView/TiltGuide instruction, not an
   invented label: an off-alignment instruction (white) while the feed drifts,
   crossfading to the real "Tilt matched" state (brass, checkmark) right as
   mech-align locks into register — same 7s loop, phase-matched. */
.mech-chip-off { animation: mech-chip-off 7s ease-in-out infinite; }
.mech-chip-on { animation: mech-chip-on 7s ease-in-out infinite; }
@keyframes mech-chip-off { 0%,60%{ opacity:1 } 72%,88%{ opacity:0 } 100%{ opacity:1 } }
@keyframes mech-chip-on { 0%,60%{ opacity:0 } 72%,88%{ opacity:1 } 100%{ opacity:0 } }
@keyframes mech-align {
  0%   { transform: scale(1.3) translate(16px,11px) rotate(2deg); }
  55%  { transform: scale(1.3) translate(11px,7px)  rotate(1.3deg); } /* handheld drift */
  74%  { transform: scale(1.3) translate(0,0)       rotate(0deg); }   /* locks into register with the ghost */
  87%  { transform: scale(1.3) translate(0,0)       rotate(0deg); }   /* held for the shutter */
  100% { transform: scale(1.3) translate(16px,11px) rotate(2deg); }   /* drift back → loop */
}
@keyframes mech-ghost-quiet { 0%,74%{ opacity:.5 } 87%{ opacity:.2 } 100%{ opacity:.5 } }
@keyframes mech-flash { 0%,79%{ opacity:0 } 82%{ opacity:.6 } 90%{ opacity:0 } 100%{ opacity:0 } }

/* ---------- outputs ---------- */
.out-head { max-width: 640px; margin-bottom: 56px; }
.out-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; align-items: stretch; }
.out-card {
  background: var(--ink-raised); border: 1px solid var(--ink-line); border-radius: var(--radius-card);
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
}
.out-card figure { margin: 0; border-radius: 12px; overflow: hidden; flex: 1; display: flex; align-items: center; justify-content: center; background: var(--ink); }
.out-card figure svg { width: 100%; height: auto; }
.out-card h3 { font-size: 16px; }
.out-card p { font-size: 13.5px; color: var(--on-ink-muted); }
.out-tap { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; color: var(--brass); }
.out-c1 { grid-column: span 2; }
.out-c2 { grid-column: span 2; grid-row: span 2; }
.out-c3 { grid-column: span 2; }
.out-c4 { grid-column: span 2; }
.out-c5 { grid-column: span 2; }
@media (max-width: 900px) {
  .out-grid { grid-template-columns: repeat(2, 1fr); }
  .out-c1, .out-c2, .out-c3, .out-c4, .out-c5 { grid-column: span 1; grid-row: auto; }
}
@media (max-width: 560px) { .out-grid { grid-template-columns: 1fr; } }

/* ---------- stack ---------- */
.stack-head { max-width: 620px; margin-bottom: 48px; }
.stack {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card);
  overflow: hidden;
}
.stack-row {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  padding: 18px 26px; border-bottom: 1px solid var(--line);
}
.stack-row h3 { font-size: 16.5px; }
.stack-row p { font-size: 13.5px; color: var(--text-muted); }
.stack-cost { font-size: 14px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.stack-total { background: var(--ink); color: var(--on-ink); border-bottom: none; }
.stack-total h3 { font-size: 17px; }
.stack-total .stack-cost { color: var(--on-ink); }
.stack-total .stack-cost s { color: var(--on-ink-muted); font-weight: 400; margin-right: 10px; }
.stack-total .gold { color: var(--brass); }
.stack-note { font-size: 12.5px; color: var(--text-muted); margin-top: 14px; }

/* ---------- comparison ---------- */
.cmp-head { max-width: 620px; margin-bottom: 48px; }
.cmp { overflow-x: auto; }
.cmp table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card);
  overflow: hidden; min-width: 560px;
}
.cmp th, .cmp td { padding: 14px 18px; font-size: 14.5px; text-align: left; border-bottom: 1px solid var(--line); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: none; }
.cmp thead th { font-size: 13px; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 500; }
.cmp thead th.hl { color: var(--brass-deep); font-weight: 600; }
.cmp tbody th { font-weight: 500; }
.cmp td.hl { background: #FDF6EA; font-weight: 600; }
.cmp .y { color: #2E6B34; }
.cmp .n { color: var(--text-muted); }

/* ---------- pricing ---------- */
.price-head { text-align: center; max-width: 560px; margin: 0 auto 56px; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
@media (max-width: 860px) { .price-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }
.price-card {
  background: var(--ink-raised); border: 1px solid var(--ink-line); border-radius: var(--radius-card);
  padding: 30px 26px; display: flex; flex-direction: column;
}
.price-card.hl { border-color: var(--brass); position: relative; }
.price-badge {
  position: absolute; top: -12px; left: 26px; background: var(--brass); color: #231604;
  font-size: 12px; font-weight: 600; padding: 3px 12px; border-radius: 999px;
}
.price-card h3 { font-size: 17px; margin-bottom: 12px; }
.price-num { font-size: 42px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.price-num small { font-size: 15px; font-weight: 400; color: var(--on-ink-muted); letter-spacing: 0; }
.price-sub { font-size: 13px; color: var(--on-ink-muted); margin: 8px 0 20px; }
.price-card ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.price-card li { font-size: 14px; color: var(--on-ink-muted); padding-left: 24px; position: relative; }
.price-card li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 10px; height: 6px; border-left: 2px solid var(--brass); border-bottom: 2px solid var(--brass); transform: rotate(-45deg); }
.price-card .btn { margin-top: auto; text-align: center; }
.price-note { text-align: center; font-size: 13.5px; color: var(--on-ink-muted); margin-top: 28px; max-width: 520px; margin-left: auto; margin-right: auto; }

/* ---------- faq ---------- */
.faq-head { max-width: 560px; margin-bottom: 48px; }
.faq { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 20px 4px; font-size: 16.5px; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--brass-deep); flex: none; transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 4px 22px; font-size: 15px; color: var(--text-muted); max-width: 640px; }

/* ---------- final cta ---------- */
.final { text-align: center; padding: 120px 0; }
.final h2 { max-width: 640px; margin: 0 auto 18px; }
.final .lede { margin: 0 auto 36px; }
.final .hero-ctas { justify-content: center; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--ink-line); padding: 36px 0; }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.foot p, .foot a { font-size: 13px; color: var(--on-ink-muted); text-decoration: none; }
.foot a:hover { color: var(--on-ink); }
.foot nav { display: flex; gap: 20px; }

/* real-imagery swap (2026-07-10) — hero photos + output screenshots */
.ba > img { position: absolute; inset: 0; width: 100%; height: 100%; display: none; object-fit: cover; }
.ba > img.active { display: block; }
/* out-card screenshots sit contained on the ink figure — no crop, no distort */
.out-card figure { min-height: 200px; }
.out-card figure img.out-real { max-width: 100%; max-height: 300px; width: auto; height: auto; display: block; border-radius: 6px; }
.out-c2 figure img.out-real { max-height: 520px; }

/* ---------- waitlist (pre-launch CTA) ----------
 * Reuses .btn/.btn-brass so the submit matches every other CTA on the page;
 * the input borrows the same radius and hairline as the rest of the ink
 * register rather than inventing a field style.
 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.waitlist { margin-top: 28px; }
.waitlist-row { display: flex; gap: 10px; flex-wrap: wrap; }
.waitlist-input {
  flex: 1 1 280px; min-width: 0;
  font-family: inherit; font-size: 15px;
  padding: 12px 16px;
  color: var(--on-ink);
  background: var(--ink-raised);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-ctrl);
}
.waitlist-input::placeholder { color: var(--on-ink-dim); }
.waitlist-input:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(233, 161, 59, 0.18);
}
.waitlist .btn { border: 0; cursor: pointer; font-family: inherit; }
.waitlist .btn[disabled] { opacity: 0.6; cursor: default; }
.waitlist-beta {
  display: flex; align-items: center; gap: 9px;
  margin-top: 12px; font-size: 14px; color: var(--on-ink-bright); cursor: pointer;
}
.waitlist-beta input { width: 17px; height: 17px; accent-color: var(--brass); cursor: pointer; }
.waitlist-note { margin-top: 10px; font-size: 13px; color: var(--on-ink-dim); }
.waitlist-msg { margin-top: 10px; font-size: 14px; min-height: 1.4em; }
.waitlist-msg.ok { color: var(--brass); }
.waitlist-msg.err { color: #E5484D; }