/* Hyperdesk home page (option I), articles and legal pages: the content of option H, set in the design system
   recovered from conduit.ai's production CSS. Tokens and type scale are Conduit's verbatim values; see
   content/conduit-reference.md. */
:root {
  --ink: #29251e;
  --ink-muted: #69655f;
  --ink-faint: #29251e29;
  --coal: #28241e;
  --canvas: #fff;
  --surface: #f7f6f6;
  --line: #d9d7d1;
  --success: #17833a;
  --sky: #85e3fc;
  --sky-2: #b7edfd;
  --radius: 10px;
  --radius-md: 8px;
  --radius-xl: 14px;
  --radius-2xl: 18px;
  --gradient-ai: linear-gradient(135deg, #fb7185 0%, #d946ef 50%, #fbbf24 100%);
  --heading: 'Season Mix', 'Instrument Sans', Inter, ui-sans-serif, system-ui, sans-serif;
  --body: 'PP Neue Montreal', Geist, ui-sans-serif, system-ui, sans-serif;
  --product: Inter, ui-sans-serif, system-ui, sans-serif;
  --mono-font: 'Geist Mono', 'SFMono-Regular', Consolas, monospace;
  --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
  --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Names the shared film stylesheet reads */
  --serif: var(--heading);
  --sans: var(--body);
  --mono: var(--mono-font);
  --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2317833a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --check-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23b7edfd' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' fill='none' stroke='%2329251e' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 500 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-x: clip; }
h1, h2, h3 { margin: 0; font-family: var(--heading); font-weight: 400; }
img, canvas { display: block; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--sky-2); color: var(--ink); }
.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; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: var(--radius-md); background: var(--coal); color: #fff; text-decoration: none; font-size: 14px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 40px; }

/* Buttons: shadcn proportions on Conduit's coal */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: var(--radius-md); font: 500 14px/16px var(--body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease); }
.btn.coal { background: var(--coal); color: #fff; }
.btn.coal:hover { background: #404040; }
.btn.light { background: #fff; color: var(--ink); }
.btn.light:hover { background: var(--surface); }
.btn.sm { height: 36px; padding: 0 14px; }
.btn.block { width: 100%; height: 48px; }

/* Header */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color 0.2s var(--ease); }
.hdr.scrolled { border-color: var(--line); }
.hdr-in { height: 64px; display: flex; align-items: center; gap: 40px; }
.brand { flex: none; }
.brand img { width: auto; height: 22px; }
.nav { display: flex; gap: 28px; margin-right: auto; }
.nav a { color: var(--ink); font-size: 14px; line-height: 16px; font-weight: 500; text-decoration: none; opacity: 0.8; transition: opacity 0.15s; }
.nav a:hover, .nav a[aria-current] { opacity: 1; }

/* Hero */
.hero { padding: 96px 0 0; }
.hero-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-muted); font-size: 12px; line-height: 14px; font-weight: 500; }
.eyebrow .yc-mark { width: 14px; height: 14px; border-radius: 2px; font-size: 9px; line-height: 1; }
.h1 { max-width: 820px; margin-top: 24px; font-size: 60px; line-height: 1; letter-spacing: -0.03em; text-wrap: balance; }
.mark { background: var(--gradient-ai); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { max-width: 520px; margin: 20px 0 0; color: var(--ink-muted); font-size: 18px; line-height: 1.32; }

.get { width: 100%; max-width: 480px; margin-top: 32px; text-align: left; }
.get-label { display: block; margin: 0 0 8px 2px; color: var(--ink-muted); font-size: 12px; line-height: 14px; }
.get-row { position: relative; display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px #0000000d; transition: border-color 0.15s, box-shadow 0.15s; }
.get-row:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-faint); }
.get-ic { position: absolute; left: 16px; top: 50%; translate: 0 -50%; color: var(--ink-muted); pointer-events: none; }
.get input { flex: 1; min-width: 0; height: 44px; padding: 0 8px 0 36px; border: 0; outline: 0; background: transparent; font-size: 16px; }
.get input::placeholder { color: #a3a09a; }
.get input:focus-visible { outline: 0; }
.get-tip { min-height: 16px; margin: 8px 0 0 2px; color: var(--ink); font-size: 12px; line-height: 14px; }
.price-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; margin: 12px 0 0; font-size: 14px; line-height: 16px; }
.price-line b { font-weight: 500; }
.price-line span { color: var(--ink-muted); }
.checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 14px 0 0; padding: 0; list-style: none; color: var(--ink-muted); font-size: 14px; line-height: 16px; }
.checks li, .trade-list li, .plan-list li, .ai-list li { padding-left: 22px; background: var(--check) left center / 16px 16px no-repeat; }
.next { margin: 14px 0 0; color: var(--ink-muted); font-size: 12px; line-height: 14px; }

/* The product shot on the blurred gradient */
.stage { position: relative; margin: 64px 0 0; padding: 64px 72px 0; border-radius: var(--radius-2xl); overflow: hidden; isolation: isolate; }
.stage-bg { position: absolute; inset: -80px; z-index: -1; background: radial-gradient(38% 46% at 18% 34%, #8fdcaa 0, rgba(143, 220, 170, 0) 100%), radial-gradient(42% 52% at 82% 28%, var(--sky) 0, rgba(133, 227, 252, 0) 100%), radial-gradient(46% 44% at 52% 92%, #ffb57a 0, rgba(255, 181, 122, 0) 100%), radial-gradient(30% 34% at 50% 40%, var(--sky-2) 0, rgba(183, 237, 253, 0) 100%), #eef3ef; filter: blur(36px) saturate(1.05); }
.stage figcaption { position: relative; padding: 18px 0 20px; color: var(--ink); font-size: 12px; line-height: 14px; text-align: center; opacity: 0.72; }
.win { overflow: hidden; border: 1px solid rgba(41, 37, 30, 0.08); border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-xl), 0 40px 80px -40px rgba(41, 37, 30, 0.35); font-family: var(--product); }
.win-bar { height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-bottom: 1px solid #e5e5e5; background: #fafafa; }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: #e5e5e5; }
.win-url { display: inline-flex; align-items: center; gap: 6px; margin: 0 auto; padding: 4px 12px; border: 1px solid #e5e5e5; border-radius: 6px; background: #fff; color: #646465; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.win.sm .win-bar { height: 34px; }

/* Before and after (driven by direct.js: the picture takes the pointer; up-and-down swipes still scroll the page) */
.cmp { --x: 40%; position: relative; aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size; user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: ew-resize; -webkit-tap-highlight-color: transparent; }
.cmp-after, .cmp-before { position: absolute; inset: 0; }
.cmp-before { clip-path: inset(0 calc(100% - var(--x)) 0 0); will-change: clip-path; }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--x); z-index: 2; width: 2px; translate: -1px 0; will-change: left; background: #fff; box-shadow: 0 0 0 1px rgba(41, 37, 30, 0.12); pointer-events: none; }
.cmp-handle b { position: absolute; top: 74%; left: 50%; width: 40px; height: 40px; translate: -50% -50%; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: var(--shadow-md); }
.cmp:has(.cmp-range:focus-visible) .cmp-handle b { outline: 2px solid var(--ink); outline-offset: 2px; }
.cmp-range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.cmp-tag { position: absolute; bottom: 12px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: rgba(41, 37, 30, 0.8); color: #fff; font: 500 12px/14px var(--mono-font); text-transform: uppercase; letter-spacing: 0.04em; pointer-events: none; }
.t-before { left: 12px; }
.t-after { right: 12px; background: var(--coal); }

.old { position: absolute; inset: 0; display: flex; flex-direction: column; background: #e9e6df; color: #333; font-family: 'Times New Roman', Times, serif; }
.old-top { padding: 2cqw; background: #2b3a8c; color: #fff6a0; font-size: 3.4cqw; font-weight: 700; letter-spacing: 0.12em; text-align: center; }
.old-menu { padding: 1.2cqw; background: #d2cec4; color: #1a0dab; font-size: 1.9cqw; text-align: center; }
.old-title { margin: 4cqw 0 3cqw; color: #b22222; font-size: 4.2cqw; font-weight: 700; text-align: center; }
.old-body { display: flex; gap: 3cqw; padding: 0 4cqw; }
.old-img { flex: none; width: 36%; aspect-ratio: 4 / 3; border: 0.5cqw ridge #a9a49a; background: repeating-linear-gradient(45deg, #bdb8ae 0 6px, #c9c4ba 6px 12px); }
.old-lines { flex: 1; display: flex; flex-direction: column; gap: 1.8cqw; font-size: 1.9cqw; }
.old-lines i { display: block; height: 1.5cqw; background: #bab5ab; }
.old-lines i:nth-child(4) { width: 62%; }
.old u { color: #1a0dab; }

.ns { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fbfaf7; color: #10151f; }
.ns-nav { display: flex; align-items: center; gap: 3cqw; padding: 2.2cqw 3.6cqw; border-bottom: 1px solid #ece9e2; font-size: 1.6cqw; }
.ns-logo { display: inline-flex; align-items: center; gap: 1cqw; font: 600 2.1cqw/1 var(--product); letter-spacing: -0.02em; }
.ns-logo i { width: 2.2cqw; height: 2.2cqw; border-radius: 0.6cqw; background: #2c4eb8; }
.ns-links { display: flex; gap: 2.4cqw; margin-left: auto; color: #5a6270; }
.ns-links i { font-style: normal; }
.ns-call { padding: 1cqw 1.8cqw; border-radius: 99px; background: #10151f; color: #fff; font-weight: 600; }
.ns-hero { flex: 1; min-height: 0; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 3.4cqw; padding: 3.4cqw 3.6cqw; }
.ns-text { display: flex; flex-direction: column; justify-content: center; gap: 1.6cqw; }
.ns-kick { color: #2c4eb8; font-size: 1.4cqw; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.ns-h { font: 400 4.8cqw/1 var(--heading); letter-spacing: -0.03em; }
.ns-p { max-width: 32ch; color: #4a5260; font-size: 1.7cqw; line-height: 1.45; }
.ns-btns { display: flex; gap: 1.2cqw; margin-top: 0.4cqw; }
.ns-btns b, .ns-btns i { padding: 1.1cqw 2cqw; border-radius: 99px; font-size: 1.5cqw; font-style: normal; font-weight: 600; }
.ns-btns b { background: #2c4eb8; color: #fff; }
.ns-btns i { border: 1px solid #d5d1c8; }
.ns-chips { display: flex; gap: 1cqw; margin-top: 0.8cqw; }
.ns-chips i { padding: 0.6cqw 1.2cqw; border-radius: 99px; background: #eef1f8; color: #2c4eb8; font-size: 1.3cqw; font-style: normal; font-weight: 500; }
.ns-img { order: -1; width: 100%; height: 100%; min-height: 0; border-radius: 1.6cqw; }

/* Facts, set like Conduit's logo wall */
.facts { padding: 96px 0 0; }
.facts-cap { margin: 0 0 28px; color: var(--ink-muted); font-size: 14px; line-height: 16px; text-align: center; }
.facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.fact { padding: 32px 24px; border-left: 1px solid var(--line); text-align: center; }
.fact:first-child { border-left: 0; }
.fact b { display: block; font: 400 40px/1.2 var(--heading); letter-spacing: -0.03em; }
.fact span { display: block; margin-top: 6px; color: var(--ink-muted); font-size: 14px; line-height: 1.32; }

/* Sections */
.sec { padding: 128px 0; }
.surface { background: var(--surface); }
.sh { max-width: 760px; margin-bottom: 56px; }
.sh.center { margin-inline: auto; text-align: center; }
.tag { margin: 0; color: var(--ink-muted); font: 500 12px/14px var(--mono-font); letter-spacing: 0.04em; text-transform: uppercase; }
.tag span { margin-right: 8px; color: var(--ink); }
.h2 { margin-top: 20px; font-size: 48px; line-height: 1; letter-spacing: -0.03em; text-wrap: balance; }

/* Three steps: a number, a title and a picture of that step on a light sky panel. The picture is drawn
   from one unit, --u, tied to the card's width, so it scales as one piece and tops out at 14px. */
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.card { display: flex; flex-direction: column; padding: 30px 18px 28px; border: 1px solid var(--line); border-radius: 20px; background: #fff; container-type: inline-size; }
.card .num, .card h3 { margin-inline: 9px; }
.card .num { color: var(--ink-muted); font-size: 16px; line-height: 1; font-weight: 400; }
.card h3 { margin-top: 16px; font-size: min(9cqw, 32px); line-height: 1.08; letter-spacing: -0.03em; }
.tile { position: relative; display: grid; place-items: center; margin: 20px 0; aspect-ratio: 4 / 3; border-radius: var(--radius-xl); overflow: hidden; isolation: isolate; }
.tile.sky::before { content: ""; position: absolute; inset: -40px; z-index: -1; background: radial-gradient(50% 60% at 25% 30%, var(--sky) 0, rgba(133, 227, 252, 0) 100%), radial-gradient(55% 60% at 80% 75%, var(--sky-2) 0, rgba(183, 237, 253, 0) 100%), #e7f6fb; filter: blur(24px); }

.step-tile { --u: min(3.87cqw, 14px); position: relative; display: grid; place-items: center; margin-top: 20px; border-radius: 16px; background: #e6f7fc; overflow: hidden; }
.board { position: relative; width: calc(var(--u) * 25.75); height: calc(var(--u) * 24.45); color: var(--ink); font: 500 var(--u)/1.2 var(--product); }
.board > *, .b-win > * { position: absolute; }
.board svg { flex: none; }
.b-cap { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 1.75); margin: 0; color: var(--ink-muted); font: 400 calc(var(--u) * 1.1)/1.2 var(--product); text-align: center; }
/* 01: the field, then the call */
.b-label { left: calc(var(--u) * 1.65); top: calc(var(--u) * 3.4); color: var(--ink-muted); font-size: calc(var(--u) * 0.85); font-weight: 400; }
.b-field, .b-call, .b-win, .b-note, .b-live { border: 1px solid #dcdad5; background: #fff; box-shadow: 0 2px 6px rgba(41, 37, 30, 0.05); }
.b-field { left: calc(var(--u) * 1.5); top: calc(var(--u) * 5.25); width: calc(var(--u) * 22.75); height: calc(var(--u) * 3.75); display: flex; align-items: center; gap: var(--u); padding-left: calc(var(--u) * 1.1); border-radius: calc(var(--u) * 0.7); color: #3a3731; }
.b-field svg { width: calc(var(--u) * 1.15); height: calc(var(--u) * 1.15); color: var(--ink-muted); }
.b-field b { display: grid; place-items: center; height: calc(var(--u) * 2.75); margin: 0 calc(var(--u) * 0.5) 0 auto; padding: 0 calc(var(--u) * 0.6); border-radius: calc(var(--u) * 0.45); background: var(--coal); color: #fff; font-size: calc(var(--u) * 0.85); font-weight: 500; white-space: nowrap; }
.b-rule { left: calc(var(--u) * 1.5); top: calc(var(--u) * 10.45); width: calc(var(--u) * 22.75); height: 1px; background: #cde5ee; }
.b-call { left: calc(var(--u) * 1.5); top: calc(var(--u) * 11.95); width: calc(var(--u) * 22.75); height: calc(var(--u) * 8.2); display: flex; flex-direction: column; padding: calc(var(--u) * 1.45) calc(var(--u) * 1.25) calc(var(--u) * 1.25); border-radius: calc(var(--u) * 0.7); }
.b-call-h { display: flex; align-items: center; gap: calc(var(--u) * 0.9); padding-left: calc(var(--u) * 0.35); font-size: calc(var(--u) * 1.1); }
.b-call-h svg { width: calc(var(--u) * 1.2); height: calc(var(--u) * 1.2); color: var(--ink-muted); }
.b-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 0.9); margin-top: auto; }
.b-times i { display: grid; place-items: center; height: calc(var(--u) * 2.75); border: 1px solid #cfccc6; border-radius: calc(var(--u) * 0.45); color: var(--ink-muted); font-size: calc(var(--u) * 0.95); font-style: normal; font-weight: 400; }
.b-times i.on { border: 2px solid var(--coal); color: var(--ink); font-weight: 500; }
/* 02: the private preview, with a note on top */
.b-win { left: calc(var(--u) * 1.8); top: calc(var(--u) * 1.95); width: calc(var(--u) * 22.2); height: calc(var(--u) * 15.55); border-color: #d8d6d1; border-radius: calc(var(--u) * 0.55); overflow: hidden; }
.b-bar { left: 0; right: 0; top: 0; height: calc(var(--u) * 2.75); display: flex; align-items: center; gap: calc(var(--u) * 0.45); padding-left: calc(var(--u) * 0.95); border-bottom: 1px solid #e6e4df; background: #fafaf9; }
.b-bar i { width: calc(var(--u) * 0.6); height: calc(var(--u) * 0.6); border-radius: 50%; background: #cfccc6; }
.b-url { position: absolute; left: calc(var(--u) * 5.8); top: calc(var(--u) * 0.45); width: calc(var(--u) * 10.4); height: calc(var(--u) * 1.85); display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 0.45); border: 1px solid #dcdad5; border-radius: calc(var(--u) * 0.35); background: #fff; color: var(--ink-muted); font-size: calc(var(--u) * 0.85); font-weight: 400; }
.b-url svg { width: calc(var(--u) * 0.7); height: calc(var(--u) * 0.7); }
.b-page-h { left: calc(var(--u) * 1.55); top: calc(var(--u) * 4.1); font: 500 calc(var(--u) * 1.9)/1.08 var(--heading); letter-spacing: -0.03em; }
.b-line { left: calc(var(--u) * 1.55); top: calc(var(--u) * 9.3); width: calc(var(--u) * 9.75); height: calc(var(--u) * 0.55); border-radius: 99px; background: #e6e4df; }
.b-line.short { top: calc(var(--u) * 10.45); width: calc(var(--u) * 8.1); }
.b-btn { left: calc(var(--u) * 1.55); top: calc(var(--u) * 12.15); width: calc(var(--u) * 6.2); height: calc(var(--u) * 2.1); border-radius: calc(var(--u) * 0.35); background: var(--coal); }
.b-img { left: calc(var(--u) * 13.55); top: calc(var(--u) * 4.05); width: calc(var(--u) * 7.35); height: calc(var(--u) * 8.65); border-radius: 2px; background: radial-gradient(circle at 0 100%, #e0f6fc 0 calc(var(--u) * 6.4), #0000 0), #b3eaf8; }
.b-note { right: calc(var(--u) * 0.75); top: calc(var(--u) * 14.95); height: calc(var(--u) * 4.35); display: flex; align-items: center; gap: calc(var(--u) * 0.8); padding: 0 calc(var(--u) * 1.3); font-weight: 400; white-space: nowrap; border-radius: calc(var(--u) * 0.5); box-shadow: 0 4px 12px rgba(41, 37, 30, 0.08); font-size: calc(var(--u) * 0.95); }
.b-note svg { width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); }
/* 03: approve, then live */
.b-go { left: calc(var(--u) * 3.75); top: calc(var(--u) * 2.4); width: calc(var(--u) * 18.35); height: calc(var(--u) * 3.55); display: grid; place-items: center; border-radius: calc(var(--u) * 0.45); background: var(--coal); color: #fff; font-size: calc(var(--u) * 1.1); box-shadow: 0 2px 6px rgba(41, 37, 30, 0.12); }
.b-go::after { content: ""; position: absolute; left: calc(50% - 1px); top: 100%; width: 2px; height: calc(var(--u) * 1.45); background: var(--coal); }
.b-live { left: calc(var(--u) * 2.35); top: calc(var(--u) * 7.4); width: calc(var(--u) * 21.1); height: calc(var(--u) * 11.75); display: flex; flex-direction: column; border-radius: calc(var(--u) * 0.6); }
.b-row { flex: 1; display: flex; align-items: center; justify-content: space-between; margin: 0 calc(var(--u) * 0.75); padding: 0 calc(var(--u) * 0.75); border-bottom: 1px solid #ecebe7; }
.b-row:last-child { border-bottom: 0; }
.b-row b { display: inline-flex; align-items: center; gap: calc(var(--u) * 0.75); font-weight: 500; }
.b-row:first-child b { font-size: calc(var(--u) * 1.1); }
.b-row em { display: inline-flex; align-items: center; gap: calc(var(--u) * 0.45); color: var(--success); font-size: calc(var(--u) * 1.05); font-style: normal; }
.b-row em::before { content: ""; width: calc(var(--u) * 0.6); height: calc(var(--u) * 0.6); border-radius: 50%; background: #1f9d55; }
.b-row.ok b::before { content: ""; width: calc(var(--u) * 1.2); height: calc(var(--u) * 1.2); background: var(--check) center / contain no-repeat; }
.b-row.ok span { color: var(--ink-muted); font-weight: 400; }

/* Dark band: the film and AI search */
.band-dark { background: var(--coal); color: #fff; }
.band-dark .tag { color: rgba(255, 255, 255, 0.56); }
.band-dark .tag span { color: #fff; }
.band-dark .h2 { color: #fff; }
.film-sec { padding-bottom: 64px; }
.film-sec .film { max-width: 1080px; margin: 0 auto; border-radius: var(--radius-2xl); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6); }
.f-title, .wire-h, .fp-h, .f-price span { font-weight: 400; letter-spacing: -0.03em; }
.f-title em { font-style: normal; color: var(--sky-2); }
.film-runtime, #film-time { font-family: var(--mono-font); font-weight: 500; }
.ai { padding-top: 64px; }
.ai-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.ai-p { max-width: 46ch; margin: 20px 0 0; color: rgba(255, 255, 255, 0.7); font-size: 18px; line-height: 1.32; }
.ai-list { display: grid; gap: 12px; margin: 28px 0 32px; padding: 0; list-style: none; color: rgba(255, 255, 255, 0.9); font-size: 16px; line-height: 1.32; }
.ai-list li { background-image: var(--check-light); }
.chat { position: relative; margin: 0; padding: 48px; border-radius: var(--radius-2xl); overflow: hidden; isolation: isolate; }
.chat-bg { position: absolute; inset: -40px; z-index: -1; background: radial-gradient(50% 60% at 25% 30%, var(--sky) 0, rgba(133, 227, 252, 0) 100%), radial-gradient(55% 60% at 80% 75%, var(--sky-2) 0, rgba(183, 237, 253, 0) 100%), #d8f2fa; filter: blur(28px); }
.chat-box { display: grid; gap: 14px; padding: 20px; border-radius: var(--radius-xl); background: #fff; color: #222; box-shadow: var(--shadow-xl); font-family: var(--product); }
.chat-top { display: flex; align-items: center; gap: 8px; margin: 0; color: #646465; font-size: 12px; font-weight: 500; }
.chat-mark { width: 14px; height: 14px; border-radius: 50%; background: var(--gradient-ai); }
.msg { margin: 0; }
.msg.you { justify-self: end; max-width: 82%; padding: 10px 14px; border-radius: 12px 12px 4px 12px; background: var(--coal); color: #fff; font-size: 14px; line-height: 1.4; }
.msg.bot p { max-width: 92%; margin: 0; padding: 10px 14px; border-radius: 12px 12px 12px 4px; background: #f5f5f5; color: #333; font-size: 14px; line-height: 1.45; }
.msg.bot b { color: #222; font-weight: 600; }
.chat figcaption { position: relative; margin-top: 16px; color: var(--ink); font-size: 12px; line-height: 14px; opacity: 0.7; }

/* Industries */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 32px; }
.tab { height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 14px; line-height: 16px; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.tab:hover { background: var(--surface); }
.tab[aria-selected="true"] { border-color: var(--coal); background: var(--coal); color: #fff; }
.trade { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.trade-shot { margin: 0; aspect-ratio: auto; padding: 40px; border-radius: var(--radius-2xl); }
.trade-shot .win { width: 100%; }
.trade-copy h3 { margin-bottom: 20px; font-size: 32px; line-height: 1; letter-spacing: -0.03em; }
.trade-list { display: grid; gap: 12px; margin: 0 0 32px; padding: 0; list-style: none; font-size: 18px; line-height: 1.32; }
.note { margin: 16px 0 0; color: var(--ink-muted); font-size: 12px; line-height: 14px; }
.trade .ts-body, .trade-copy h3, .trade-list { transition: opacity 0.2s var(--ease), translate 0.25s var(--ease); }
.trade.fade .ts-body, .trade.fade .trade-copy h3, .trade.fade .trade-list { opacity: 0; translate: 0 6px; }

.ts { --t: #2c4eb8; --t-bg: #fbfaf7; --t-ink: #10151f; position: relative; aspect-ratio: 16 / 10; display: grid; grid-template-columns: 1.05fr 1fr; grid-template-rows: auto minmax(0, 1fr); container-type: inline-size; background: var(--t-bg); color: var(--t-ink); transition: background 0.4s; }
.ts-nav { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 2.6cqw 3.6cqw; border-bottom: 1px solid rgba(0, 0, 0, 0.06); font-size: 2cqw; }
.ts-logo { display: inline-flex; align-items: center; gap: 1.1cqw; font: 600 2.3cqw/1 var(--product); letter-spacing: -0.02em; }
.ts-logo i { width: 2.6cqw; height: 2.6cqw; border-radius: 0.7cqw; background: var(--t); transition: background 0.4s; }
.ts-cta { padding: 1.2cqw 2cqw; border-radius: 99px; background: var(--t-ink); color: var(--t-bg); font-size: 1.8cqw; font-weight: 600; }
.ts-body { display: flex; flex-direction: column; justify-content: center; gap: 2.2cqw; padding: 3cqw 3cqw 4cqw 3.6cqw; }
.ts-kick { color: var(--t); font-size: 1.7cqw; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.4s; }
.ts-h { font: 400 5.4cqw/1 var(--heading); letter-spacing: -0.03em; }
.ts-btn { align-self: flex-start; padding: 1.6cqw 2.8cqw; border-radius: 99px; background: var(--t); color: #fff; font-size: 2cqw; font-weight: 600; transition: background 0.4s; }
.ts-img { width: calc(100% - 3.6cqw); height: calc(100% - 3.6cqw); align-self: start; border-radius: 1.6cqw; }
.trade[data-trade="law"] .ts { --t: #8a5a2b; --t-bg: #f7f3ec; --t-ink: #1e1710; }
.trade[data-trade="tax"] .ts { --t: #1e7a6a; --t-bg: #f2f7f5; --t-ink: #0e1f1b; }
.trade[data-trade="dental"] .ts { --t: #1c70a0; --t-bg: #f3f8fb; --t-ink: #0b2433; }
.trade[data-trade="yard"] .ts { --t: #467a42; --t-bg: #f5f6ee; --t-ink: #172414; }
.trade[data-trade="salon"] .ts { --t: #9a4d8a; --t-bg: #fbf4f8; --t-ink: #2a1426; }
.trade[data-trade="agency"] .ts { --t: #d6461e; --t-bg: #fbf5f1; --t-ink: #1f0f0a; }
.trade[data-trade="home"] .ts { --t: #8c4a2c; --t-bg: #f8f4ef; --t-ink: #241510; }

/* Compared */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vs-card { padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-2xl); background: #fff; }
.vs-card.vs-new { border-color: var(--coal); background: var(--coal); color: #fff; }
.vs-name { margin: 0 0 16px; color: var(--ink-muted); font: 500 12px/14px var(--mono-font); letter-spacing: 0.04em; text-transform: uppercase; }
.vs-new .vs-name { color: rgba(255, 255, 255, 0.56); }
.vs-row { display: grid; gap: 6px; padding: 20px 0; border-top: 1px solid var(--line); }
.vs-new .vs-row { border-color: rgba(255, 255, 255, 0.16); }
.vs-row b { font: 400 40px/1.2 var(--heading); letter-spacing: -0.03em; }
.vs-old .vs-row b { color: var(--ink-muted); }
.vs-row span { color: var(--ink-muted); font-size: 16px; line-height: 1.32; }
.vs-new .vs-row span { color: rgba(255, 255, 255, 0.7); }
.vs-row sup { line-height: 0; }
.vs-row sup a { padding: 0 2px; color: var(--ink); font: 500 11px var(--mono-font); text-decoration: none; }
.vs-plus { margin: 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.16); font-size: 16px; line-height: 1.32; }
.sources { display: grid; gap: 6px; margin: 24px 0 0; padding-left: 18px; color: var(--ink-muted); font-size: 12px; line-height: 1.4; }
.sources a { color: var(--ink); }

/* Pricing */
.plans { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.plan { padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-2xl); background: #fff; }
.plan-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.plan-price { display: grid; gap: 8px; margin: 0; }
.plan-price b { font: 400 56px/1 var(--heading); letter-spacing: -0.03em; }
.plan-price span { max-width: 20ch; color: var(--ink-muted); font-size: 14px; line-height: 1.32; }
.plan-plus { margin: 0 0 30px; color: var(--ink-muted); font: 400 32px/1 var(--heading); }
.plan-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 28px 0 32px; padding: 0; list-style: none; font-size: 16px; line-height: 1.32; }
.plan-due { margin: 12px 0 0; color: var(--ink-muted); font-size: 12px; line-height: 14px; text-align: center; }
.extras { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.extra { display: flex; flex-direction: column; gap: 6px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-2xl); background: #fff; }
.x-ic { width: 32px; height: 32px; display: grid; place-items: center; margin-bottom: 10px; border-radius: var(--radius-md); background: var(--surface); color: var(--ink); }
.extra-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; }
.extra-top b { font: 400 18px/1.2 var(--heading); letter-spacing: -0.02em; }
.extra-top span { color: var(--ink-muted); font-size: 14px; line-height: 16px; white-space: nowrap; }
.extra > p:not(.extra-top) { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 1.32; }
.extra.promise .x-ic { background: #dcfce7; color: var(--success); }
.extra.promise p b { color: var(--ink); font-weight: 500; }

/* Questions */
.faq-in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.faq-in .sh { margin: 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { position: relative; padding: 22px 40px 22px 0; list-style: none; font: 400 20px/1.2 var(--heading); letter-spacing: -0.02em; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 16px; height: 16px; translate: 0 -50%; background: var(--plus) center / contain no-repeat; transition: rotate 0.2s var(--ease); }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { max-width: 62ch; margin: 0 0 22px; color: var(--ink-muted); font-size: 16px; line-height: 1.32; }

/* Closing: gradient banner with halftone dots */
.final { padding: 128px 0; }
.final-card { position: relative; padding: 104px 32px; border-radius: var(--radius-2xl); overflow: hidden; isolation: isolate; color: #fff; text-align: center; }
.final-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 90% at 12% 20%, #0f6f6b 0, rgba(15, 111, 107, 0) 100%), radial-gradient(55% 80% at 88% 85%, #e2483d 0, rgba(226, 72, 61, 0) 100%), radial-gradient(50% 70% at 60% 30%, #f29a52 0, rgba(242, 154, 82, 0) 100%), #1d4f50; }
.final-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1.6px) 0 0 / 7px 7px; -webkit-mask-image: linear-gradient(160deg, #000 0%, transparent 55%, #000 100%); mask-image: linear-gradient(160deg, #000 0%, transparent 55%, #000 100%); }
.final-in { display: flex; flex-direction: column; align-items: center; }
.final-mark { width: 36px; height: 36px; border-radius: 8px; }
.final .h2 { max-width: 16ch; color: #fff; }
.get.dark { margin-top: 32px; }
.get.dark .get-label { color: rgba(255, 255, 255, 0.8); }
.get.dark .get-row { border-color: transparent; color: var(--ink); box-shadow: var(--shadow-xl); }
.get.dark .get-tip { color: #fff; }
.final .price-line span { color: rgba(255, 255, 255, 0.6); }

/* Footer: the same on every page */
.ftr { padding: 80px 0 40px; background: var(--coal); color: rgba(255, 255, 255, 0.64); font-size: 14px; line-height: 1.32; }
.ftr-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: 64px; }
.ftr-brand img { width: auto; height: 22px; filter: invert(1); }
.ftr-brand p { max-width: 30ch; margin: 16px 0 24px; }
.ftr-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.ftr-h { margin: 0 0 14px; color: #fff; font: 500 12px/14px var(--mono-font); letter-spacing: 0.04em; text-transform: uppercase; }
.ftr-cols a { display: block; padding: 5px 0; color: inherit; text-decoration: none; transition: color 0.15s; }
.ftr-cols a:hover, .ftr-bottom a:hover { color: #fff; }
.ftr-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 13px; }
.ftr-bottom a { color: inherit; text-decoration: none; }
.yc { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: #fff; }
.yc-mark { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 3px; background: #f26522; color: #fff; font-size: 12px; font-weight: 600; }

/* Articles and legal pages */
.page-hero { padding-top: 88px; padding-bottom: 40px; }
.page-hero .h1 { max-width: 900px; margin-top: 20px; font-size: 56px; line-height: 1.02; text-wrap: balance; }
.page-hero .lede { max-width: 640px; }
.tag a { color: inherit; text-decoration: none; }
.tag a:hover { color: var(--ink); }
.page-actions { margin: 32px 0 0; }
.post-meta { margin: 24px 0 0; color: var(--ink-muted); font: 500 12px/14px var(--mono-font); letter-spacing: 0.04em; text-transform: uppercase; }
.prose { max-width: 700px; padding-bottom: 96px; font-size: 18px; font-weight: 400; line-height: 1.6; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 56px 0 14px; font-size: 32px; line-height: 1.1; letter-spacing: -0.03em; }
.prose h3 { margin: 32px 0 8px; font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; }
.prose p, .prose ul, .prose ol { margin: 0 0 18px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 8px 0; padding-left: 4px; }
.prose li::marker { color: var(--ink-muted); }
.prose strong { font-weight: 600; }
.prose code { padding: 2px 6px; border-radius: 6px; background: var(--surface); font: 500 0.86em var(--mono-font); }
.prose a { color: var(--ink); text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--ink); }
.prose .callout { margin: 28px 0; padding: 20px 24px; border-radius: var(--radius-xl); background: var(--surface); font-size: 16px; line-height: 1.5; }
.prose .callout p:last-child { margin: 0; }
.prose .sources { margin-top: 40px; padding: 20px 0 0 18px; border-top: 1px solid var(--line); }
.prose mark.fill { padding: 0 4px; border-radius: 4px; background: #fef3c7; color: var(--ink); }
.post-cta { margin: 56px 0 0; padding: 36px 32px; border-radius: var(--radius-2xl); background: var(--coal); color: #fff; }
.post-cta h2 { margin: 0 0 10px; color: #fff; }
.post-cta p { margin: 0 0 24px; color: rgba(255, 255, 255, 0.7); font-size: 16px; }
.posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0 0 128px; list-style: none; }
.post-card { height: 100%; display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-2xl); background: #fff; color: inherit; text-decoration: none; transition: border-color 0.15s var(--ease); }
.post-card:hover { border-color: var(--ink); }
.post-card .tile { margin: 0 0 22px; aspect-ratio: 16 / 7; }
.post-card .num { color: var(--ink); font: 400 64px/1 var(--heading); letter-spacing: -0.03em; }
.post-card h2 { margin: 0 4px 10px; font-size: 26px; line-height: 1.08; letter-spacing: -0.03em; }
.post-card p { margin: 0 4px 18px; color: var(--ink-muted); font-size: 16px; line-height: 1.32; }
.post-card .post-meta { margin: auto 4px 4px; }

/* Reveals */
.js [data-reveal] { opacity: 0; translate: 0 16px; transition: opacity 0.6s var(--ease), translate 0.7s var(--ease); }
.js [data-reveal].in { opacity: 1; translate: none; }

/* Option switcher */
.looks { position: fixed; left: 50%; bottom: 16px; z-index: 60; translate: -50% 0; display: flex; gap: 2px; max-width: calc(100vw - 24px); overflow-x: auto; padding: 4px; border-radius: 999px; background: rgba(10, 10, 10, 0.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5); scrollbar-width: none; }
.looks:empty { display: none; }
.looks a { flex: none; padding: 8px 14px; border-radius: 999px; color: rgba(255, 255, 255, 0.75); font: 500 12.5px/1 var(--body); text-decoration: none; white-space: nowrap; }
.looks a:hover { color: #fff; }
.looks a[aria-current] { background: #fff; color: var(--ink); }

@media (max-width: 1080px) {
  .ai-in, .trade, .plans, .faq-in { grid-template-columns: 1fr; gap: 40px; }
  .ftr-top { grid-template-columns: 1fr; gap: 48px; }
  .stage { padding: 40px 32px 0; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .hdr .btn { margin-left: auto; }
  .h1 { font-size: 48px; }
  .h2 { font-size: 40px; line-height: 1.05; }
  .sec { padding: 96px 0; }
  .cards3, .vs { grid-template-columns: minmax(0, 1fr); }
  .facts-grid { grid-template-columns: 1fr 1fr; }
  .fact:nth-child(3) { border-left: 0; }
  .fact:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: -40px; padding-inline: 40px; scrollbar-width: none; }
  .tab { flex: none; }
  .ftr-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-hero .h1 { font-size: 44px; }
  .posts { grid-template-columns: minmax(0, 1fr); }
}
/* Booking page (/book): step 2 of the free-preview form, with the Calendly calendar on a light sky panel */
.bk-hero { padding-bottom: 32px; }
.bk-site { display: flex; align-items: center; gap: 8px; margin: 20px 0 0; color: var(--ink-muted); font-size: 16px; overflow-wrap: anywhere; }
.bk-site[hidden] { display: none; }
.bk-site svg { flex: none; }
.bk-open { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; padding-bottom: 2px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 15px; text-decoration: none; }
.bk-open:hover { border-color: var(--ink); }
.bk-body { padding-bottom: 96px; }
.bk-stage { padding: 16px; border-radius: 24px; background: #e6f7fc; }
.bk-frame { position: relative; border: 1px solid var(--line); border-radius: var(--radius-2xl); background: #fff; box-shadow: var(--shadow-md); overflow: hidden; }
.bk-frame iframe { display: block; width: 100%; height: 720px; border: 0; opacity: 0; transition: opacity 0.4s var(--ease); }
.bk-frame.ready iframe { opacity: 1; }
.bk-wait { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--ink-muted); font-size: 15px; }
.bk-frame.ready .bk-wait { display: none; }
.bk-back { margin-top: 20px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.bk-back:hover { border-color: var(--ink); }
@media (max-width: 1000px) {
  .bk-frame iframe { height: 1040px; }
}

/* Tablets: each step as a row, its picture beside the title */
@media (min-width: 561px) and (max-width: 900px) {
  .card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: 24px; padding: 18px; }
  .card .num { margin-top: 14px; }
  .step-tile { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .hdr-in { gap: 12px; }
  .brand img { height: 20px; }
  .hdr .btn.sm { padding: 0 12px; font-size: 13px; }
  .tabs { margin-inline: -16px; padding-inline: 16px; }
  .hero { padding-top: 56px; }
  .bk-body { padding-bottom: 72px; }
  .bk-stage { margin-inline: -8px; padding: 8px; border-radius: 20px; }
  .h1 { font-size: 40px; line-height: 1.02; }
  .h2 { font-size: 32px; line-height: 1.05; }
  .lede { font-size: 16px; }
  .get-row { flex-direction: column; }
  .get-ic { top: 26px; }
  .get input { flex: none; height: 44px; }
  .get .btn { width: 100%; }
  .price-line .sep { display: none; }
  .price-line .pay { flex-basis: 100%; text-align: center; }
  .stage { margin-top: 48px; padding: 24px 12px 0; }
  .facts { padding-top: 64px; }
  .fact { padding: 24px 12px; }
  .fact b { font-size: 32px; }
  .sec { padding: 80px 0; }
  .sh { margin-bottom: 40px; }
  .vs-card, .plan { padding: 22px; }
  .card { padding: 24px 14px 14px; }
  .card .num, .card h3 { margin-inline: 8px; }
  .chat { padding: 24px; }
  .trade-shot { padding: 20px; }
  .trade-copy h3 { font-size: 28px; }
  .plan-top { flex-wrap: nowrap; gap: 10px; }
  .plan-price b { font-size: 44px; }
  .plan-plus { margin-bottom: 26px; font-size: 24px; }
  .plan-list, .extras { grid-template-columns: 1fr; }
  .final { padding: 80px 0; }
  .final-card { padding: 64px 18px; }
  .faq summary { font-size: 18px; }
  .ftr { padding-top: 64px; }
  .ftr-cols { gap: 28px 16px; }
  .page-hero { padding-top: 56px; padding-bottom: 28px; }
  .page-hero .h1 { font-size: 36px; line-height: 1.04; }
  .prose { font-size: 17px; padding-bottom: 72px; }
  .prose h2 { margin-top: 44px; font-size: 26px; }
  .post-cta { padding: 28px 22px; }
  .posts { padding-bottom: 80px; }
  /* Before and after on phones: a taller picture, both sites stacked and sized to the phone */
  .stage { padding: 16px 8px 0; }
  .win-bar { height: 34px; padding: 0 10px; }
  .win-url { font-size: 11px; }
  .cmp { aspect-ratio: 3 / 4; }
  .cmp-handle b { top: 50%; width: 44px; height: 44px; }
  .cmp-tag { bottom: 10px; }
  .ns-nav { gap: 3cqw; padding: 3.6cqw 5cqw; font-size: 3.4cqw; }
  .ns-logo { gap: 2cqw; font-size: 4.2cqw; }
  .ns-logo i { width: 4.4cqw; height: 4.4cqw; border-radius: 1.2cqw; }
  .ns-links { display: none; }
  .ns-call { margin-left: auto; padding: 2cqw 3.4cqw; }
  .ns-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 5cqw; padding: 5cqw 5cqw 14cqw; }
  .ns-img { border-radius: 3cqw; }
  .ns-text { justify-content: flex-start; gap: 3cqw; }
  .ns-kick { font-size: 3cqw; }
  .ns-h { font-size: 9.4cqw; }
  .ns-p { max-width: none; font-size: 3.7cqw; }
  .ns-btns { gap: 2.4cqw; margin-top: 1cqw; }
  .ns-btns b, .ns-btns i { padding: 2.6cqw 4.4cqw; font-size: 3.6cqw; }
  .ns-chips { gap: 2cqw; margin-top: 0; }
  .ns-chips i { padding: 1.4cqw 2.6cqw; font-size: 3cqw; }
  .old-top { padding: 4cqw; font-size: 6cqw; }
  .old-menu { padding: 2.4cqw; font-size: 3.4cqw; }
  .old-title { margin: 7cqw 0 5cqw; font-size: 7.4cqw; }
  .old-body { flex-direction: column; gap: 5cqw; padding: 0 6cqw; }
  .old-img { width: 100%; aspect-ratio: 16 / 9; }
  .old-lines { gap: 3cqw; font-size: 3.6cqw; }
  .old-lines i { height: 3cqw; }
}
@media (max-width: 360px) {
  .win-bar i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; translate: none; transition: none; }
}