/* EasyPlay marketing site. Colors, type, radii and motion come from tokens.css (packages/brand).
   This file is layout and components only. Two-tone headlines use ink at reduced strength. */

:root {
  --wrap: 1200px;
  --gutter: 24px;
  --sec: clamp(88px, 10vw, 144px);
  --page: var(--white);
  --panel: var(--paper);
  --dim: color-mix(in srgb, var(--ink) 46%, transparent);   /* large text only (3:1+) */
  --hair: color-mix(in srgb, var(--ink) 8%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
html, body { background: var(--page); }
body { margin: 0; font-size: 16px; line-height: 1.6; color: var(--fg); overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; color: var(--fg); }
p { text-wrap: pretty; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: var(--radius-2); text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--text { max-width: calc(720px + var(--gutter) * 2); }

/* ---------- type ---------- */
.h1 { font-size: clamp(44px, 6.2vw, 82px); line-height: 0.98; letter-spacing: -0.045em; font-weight: 500; }
.h2 { font-size: clamp(34px, 4.3vw, 56px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 500; }
.h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.016em; font-weight: 500; }
.dim { color: var(--dim); }
.lead { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.5; letter-spacing: -0.011em; color: var(--fg-muted); max-width: 36em; }
.muted { color: var(--fg-muted); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; line-height: 1; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }
.chip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--radius-1); background: var(--panel); color: var(--fg); font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 500; font-variant-numeric: tabular-nums; }
.coin { display: inline-block; width: 12px; height: 5px; border-radius: 50%; background: var(--crimson); flex: none; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--control); padding: 0 16px; border: 0; border-radius: var(--radius-2); font-size: 15px; font-weight: 500; letter-spacing: -0.006em; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn:active { transform: scale(0.98); }
.btn--sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn--lg { height: 48px; padding: 0 20px; font-size: 16px; }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--soft { background: var(--panel); color: var(--fg); }
.btn--soft:hover { background: var(--bg-sunken); }
.btn--ghost { background: transparent; color: var(--fg); }
.btn--ghost:hover, .btn--ghost[aria-current] { background: var(--panel); }
.arr { display: inline-block; transition: transform var(--dur-base) var(--ease-out); }
a:hover > .arr, .btn:hover .arr, a:hover .arr { transform: translateX(3px); }
.link { color: var(--fg); font-weight: 500; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }

/* ---------- header ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--page) 82%, transparent); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); transition: box-shadow var(--dur-base) var(--ease-out); }
.nav.is-scrolled { box-shadow: 0 1px 0 var(--hair); }
.nav__in { display: flex; align-items: center; gap: 36px; height: 64px; }
.nav__logo { display: block; flex: none; border-radius: 4px; }
.nav__logo img { height: 22px; width: auto; }
.nav__links { display: flex; gap: 2px; }
.nav__links a { padding: 8px 12px; border-radius: var(--radius-2); font-size: 14px; color: var(--fg-muted); text-decoration: none; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.nav__links a:hover { color: var(--fg); background: var(--panel); }
.nav__links a[aria-current] { color: var(--fg); }
.nav__cta { display: flex; gap: 6px; margin-left: auto; }
.nav__menu { display: none; width: 40px; height: 40px; margin-left: auto; border: 0; border-radius: var(--radius-2); background: transparent; cursor: pointer; position: relative; }
.nav__menu span { position: absolute; left: 11px; right: 11px; height: 1.6px; background: var(--fg); border-radius: 2px; transition: transform var(--dur-base) var(--ease-out); }
.nav__menu span:first-child { top: 15px; }
.nav__menu span:last-child { top: 23px; }
.nav__menu[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__menu[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mnav { padding: 8px var(--gutter) 24px; display: grid; gap: 2px; background: var(--page); box-shadow: 0 1px 0 var(--hair); }
.mnav a:not(.btn) { padding: 14px 0; font-size: 18px; letter-spacing: -0.015em; text-decoration: none; box-shadow: 0 1px 0 var(--hair); }
.mnav .btn { margin-top: 16px; }

/* ---------- reveal (JS adds .rv only to elements below the fold, so no-JS pages stay visible) ---------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.hero__copy > * { animation: rise 0.9s var(--ease-out) both; }
.hero__copy > :nth-child(2) { animation-delay: 70ms; }
.hero__copy > :nth-child(3) { animation-delay: 140ms; }
.hero__copy > :nth-child(4) { animation-delay: 210ms; }

/* ---------- sections ---------- */
.sec { padding: var(--sec) 0; }
.sec--tight { padding-top: 0; }
.sec__head { max-width: 800px; margin-bottom: clamp(48px, 6vw, 80px); }
.sec__head .lead { margin-top: 24px; }
.sec__head--row { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.sec__head--row .lead { margin-top: 0; max-width: 26em; }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; padding-top: clamp(56px, 8vw, 112px); }
.hero::before { content: ""; position: absolute; inset: 0 0 30% 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(1.7px 0.8px at 50% 50%, color-mix(in srgb, var(--ink) 30%, transparent) 70%, transparent 100%);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 72% 18%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 75% 70% at 72% 18%, #000 10%, transparent 72%); }
.hero__copy .h1 { margin-top: 28px; max-width: 13em; }
.hero__copy .lead { margin-top: 28px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.hero--sub { padding-bottom: clamp(56px, 7vw, 96px); }
.hero--sub .h1 { font-size: clamp(42px, 5.6vw, 72px); }

/* ---------- stage + abstract art (SVG illustrations, no product screens) ---------- */
.stage { position: relative; margin-top: clamp(56px, 7vw, 88px); border-radius: var(--radius-4); background: var(--panel); overflow: hidden; animation: rise 1.1s var(--ease-out) 260ms both; }
.stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 70% at 50% 40%, color-mix(in srgb, var(--white) 75%, transparent), transparent 70%); }
.stage--net { display: flex; flex-direction: column; }
.stage__art { position: relative; padding: clamp(20px, 3vw, 40px) clamp(16px, 4vw, 56px) clamp(8px, 1vw, 16px); }
.stage--art { display: grid; place-items: center; padding: clamp(24px, 5vw, 64px); }
.net, .art { position: relative; display: block; width: 100%; height: auto; color: var(--ink); overflow: visible; }
.net--wide { max-height: 560px; margin: 0 auto; }
.net--tall { display: none; max-width: 420px; margin: 0 auto; }
.stage--art .art { max-width: 920px; }
.net-line { fill: none; stroke: color-mix(in srgb, var(--ink) 16%, transparent); stroke-width: 1.5; }
.net-line--route { stroke-width: 2; stroke-dasharray: 1 7; stroke-linecap: round; stroke: color-mix(in srgb, var(--ink) 28%, transparent); }
.ncoin, .beam { fill: var(--crimson); }
.tping { fill: none; stroke: var(--crimson); stroke-width: 1.2; }
.tile { fill: var(--white); stroke: color-mix(in srgb, var(--ink) 9%, transparent); stroke-width: 1; }
.tscreen { fill: color-mix(in srgb, var(--ink) 7%, transparent); }
.tdot, .okdot { fill: var(--ok); }
.tdot.w { fill: var(--warn-fill); }
.tdot.off { fill: var(--fg-faint); }
.hub { fill: var(--white); }
.hub-ring, .node-ring { fill: none; stroke: var(--crimson); stroke-width: 1.5; }
.device { fill: var(--white); stroke: color-mix(in srgb, var(--ink) 10%, transparent); stroke-width: 1; }
.device-base { fill: color-mix(in srgb, var(--ink) 10%, transparent); }
.bar { fill: color-mix(in srgb, var(--ink) 11%, transparent); }
.net-spark { fill: none; stroke: var(--fg); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.svg-label { font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; fill: var(--fg-muted); }
.notch { fill: var(--panel); }
.code { fill: color-mix(in srgb, var(--ink) 80%, transparent); }
.beam-grad { color: var(--crimson); }
.art-chart { position: relative; }
.art-chart svg { display: block; width: 100%; height: 170px; overflow: visible; }
.art-chart path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.art-chart .ln-in { stroke: var(--fg); }
.art-chart .ln-out { stroke: var(--fg-faint); }
.art-chart .area { fill: color-mix(in srgb, var(--ink) 5%, transparent); stroke: none; }
.art-chart .grid { stroke: var(--hair); stroke-width: 1; }
.art-chart__dot { position: absolute; right: -5px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--fg); box-shadow: 0 0 0 4px var(--panel); }
.art-chart__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--fg); animation: ping 2.4s var(--ease-out) infinite; }
@keyframes ping { from { transform: scale(0.6); opacity: 0.8; } to { transform: scale(2.2); opacity: 0; } }
.js-draw path.ln { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.6s var(--ease-out); }
.js-draw.in path.ln { stroke-dashoffset: 0; }
.card__art--center { display: grid; place-items: center; }

.ticker { display: flex; align-items: center; gap: 28px; height: 56px; padding: 0 28px; background: color-mix(in srgb, var(--white) 88%, transparent); box-shadow: 0 -1px 0 var(--hair); font-size: 11px; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; overflow: hidden; position: relative; }
.ticker > span { display: inline-flex; align-items: center; gap: 10px; }
.ticker > span + span { padding-left: 28px; box-shadow: inset 1px 0 0 var(--hair); }
.ticker__label { color: var(--fg); }

/* ---------- how it works ---------- */
.flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-top: 76px; }
.flow__track { position: absolute; top: 22px; left: 22px; right: 22px; height: 1px; background: var(--line); }
.flow__run { position: absolute; inset: 0; }
.flow__coin { position: absolute; left: 0; top: -6px; width: 14px; height: 13px; margin-left: -7px; border-radius: 50%; background: var(--crimson); animation: run 6s linear infinite, spin 0.9s linear infinite; }
@keyframes run { from { left: 0%; } to { left: 100%; } }
@keyframes spin { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.22); } }
.step { position: relative; }
.step__node { position: absolute; top: -76px; left: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--white); color: var(--fg); box-shadow: 0 0 0 1px var(--line), 0 2px 6px -2px color-mix(in srgb, var(--ink) 12%, transparent); animation: node 6s linear infinite; animation-delay: var(--d); }
@keyframes node { 0%, 9% { color: var(--crimson); box-shadow: 0 0 0 1px var(--crimson), 0 0 0 6px color-mix(in srgb, var(--crimson) 12%, transparent); } 16%, 100% { color: var(--fg); box-shadow: 0 0 0 1px var(--line), 0 2px 6px -2px color-mix(in srgb, var(--ink) 12%, transparent); } }
.step__no { font-size: 12px; font-weight: 500; color: var(--fg-muted); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.step .h3 { margin-top: 10px; }
.step p:last-child { margin-top: 10px; color: var(--fg-muted); font-size: 15px; }

/* ---------- split section (sticky heading + list) ---------- */
.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); }
.split__head { position: sticky; top: 112px; align-self: start; }
.split__head .lead { margin-top: 24px; }
.rows { display: grid; }
.row { display: grid; grid-template-columns: 44px 1fr; gap: 20px; padding: 32px 0; box-shadow: inset 0 1px 0 var(--hair); }
.row:last-child { box-shadow: inset 0 1px 0 var(--hair), inset 0 -1px 0 var(--hair); }
.row__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-2); background: var(--panel); }
.row p { margin-top: 8px; color: var(--fg-muted); }

/* ---------- feature cards ---------- */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.card { position: relative; display: flex; flex-direction: column; min-height: 500px; padding: clamp(28px, 3vw, 40px); border-radius: var(--radius-4); background: var(--panel); overflow: hidden; }
.card__title { font-size: clamp(22px, 2vw, 26px); line-height: 1.2; letter-spacing: -0.025em; font-weight: 500; max-width: 18em; }
.card__art { margin-top: auto; padding-top: 40px; }
.card--link { text-decoration: none; transition: background var(--dur-base) var(--ease-out); min-height: 0; }
.card--link:hover { background: var(--bg-sunken); }
.card__go { position: absolute; top: 24px; right: 24px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-2); background: var(--white); box-shadow: 0 0 0 1px var(--hair), 0 2px 6px -2px color-mix(in srgb, var(--ink) 14%, transparent); }
.card__go .ico { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-out); }
.card--link:hover .card__go .ico { transform: translate(2px, -2px); }
.card ul { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.card li { display: flex; gap: 12px; align-items: baseline; color: var(--fg-muted); }
.card li .coin { transform: translateY(-3px); }

.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 40px; margin-top: 80px; }
.feat .ico { color: var(--fg); }
.feat .h3 { margin-top: 18px; font-size: 18px; }
.feat p { margin-top: 8px; color: var(--fg-muted); font-size: 15px; }

/* ---------- audiences ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.duo .card { min-height: 520px; }
/* ---------- dark band ---------- */
.dark { position: relative; padding: clamp(48px, 6vw, 88px); border-radius: var(--radius-4); background: var(--ink); color: var(--paper); overflow: hidden; isolation: isolate; }
.dark::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(1.7px 0.8px at 50% 50%, color-mix(in srgb, var(--paper) 22%, transparent) 70%, transparent 100%);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 100% 0%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 80% at 100% 0%, #000 10%, transparent 70%); }
.dark .h2, .dark .h3 { color: var(--paper); }
.dark .dim { color: color-mix(in srgb, var(--paper) 50%, transparent); }
.dark .eyebrow { color: color-mix(in srgb, var(--paper) 64%, transparent); }
.dark__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 72px; }
.dark__grid > div { padding-top: 24px; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--paper) 14%, transparent); }
.dark__grid .coin { background: var(--crimson-bright); }
.dark__grid .h3 { margin-top: 18px; font-size: 18px; }
.dark__grid p { margin-top: 8px; color: color-mix(in srgb, var(--paper) 70%, transparent); font-size: 15px; }

/* ---------- three columns (support etc.) ---------- */
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.cols3 > div { padding-top: 24px; box-shadow: inset 0 1px 0 var(--hair); }
.cols3 .h3 { margin-top: 18px; font-size: 18px; }
.cols3 p { margin-top: 8px; color: var(--fg-muted); font-size: 15px; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact__aside .lead { margin-top: 24px; }
.contact__facts { margin-top: 40px; display: grid; gap: 18px; }
.contact__facts > div { display: flex; gap: 14px; align-items: flex-start; color: var(--fg-muted); }
.contact__facts .ico { margin-top: 1px; color: var(--fg); }
.contact__facts a { color: var(--fg); text-underline-offset: 3px; text-decoration-color: var(--line); }
.form { padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-4); background: var(--panel); display: grid; gap: 16px; }
.form__two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 13px; font-weight: 500; }
.field label span { color: var(--fg-muted); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; height: 46px; padding: 0 14px; border: 0; border-radius: var(--radius-2); background: var(--white); box-shadow: inset 0 0 0 1px var(--hair); font-size: 15px; transition: box-shadow var(--dur-fast) var(--ease-out); appearance: none; -webkit-appearance: none; }
.field textarea { height: 120px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%), linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field input:hover, .field select:hover, .field textarea:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--fg); }
.form .btn { width: 100%; margin-top: 4px; }
.form__note { font-size: 13px; color: var(--fg-muted); text-align: center; }
.form__note[data-state="sent"] { color: var(--ok); }

/* ---------- band (closing CTA) ---------- */
.band { display: flex; justify-content: space-between; align-items: end; gap: 40px; padding: clamp(40px, 5vw, 72px); border-radius: var(--radius-4); background: var(--panel); }
.band__ctas { display: flex; gap: 10px; flex: none; }

/* ---------- articles ---------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.post-card { display: flex; flex-direction: column; min-height: 300px; padding: 28px; border-radius: var(--radius-4); background: var(--panel); text-decoration: none; transition: background var(--dur-base) var(--ease-out); }
.post-card:hover { background: var(--bg-sunken); }
.post-card__meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--fg-muted); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.post-card__title { margin-top: 28px; font-size: 22px; line-height: 1.22; letter-spacing: -0.024em; font-weight: 500; }
.post-card__sum { margin-top: 12px; color: var(--fg-muted); font-size: 15px; }
.post-card__more { margin-top: auto; padding-top: 24px; font-weight: 500; font-size: 15px; }
.article { padding: clamp(48px, 7vw, 96px) 0 var(--sec); }
.back { display: inline-flex; gap: 8px; margin-bottom: 40px; font-size: 14px; color: var(--fg-muted); text-decoration: none; }
.back:hover { color: var(--fg); }
.back:hover .arr { transform: translateX(-3px); }
.h1--article { margin-top: 24px; font-size: clamp(38px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -0.04em; }
.article .lead { margin-top: 24px; }
.prose { margin-top: 56px; font-size: 17px; line-height: 1.7; color: var(--fg); }
.prose > * + * { margin-top: 20px; }
.prose h2 { margin-top: 56px; font-size: 28px; line-height: 1.2; letter-spacing: -0.028em; font-weight: 500; }
.prose h3 { margin-top: 40px; font-size: 20px; line-height: 1.3; letter-spacing: -0.016em; font-weight: 500; }
.prose p, .prose li { color: color-mix(in srgb, var(--ink) 82%, var(--white)); }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 8px; }
.prose a { color: var(--fg); text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--fg); }
.prose strong { font-weight: 600; color: var(--fg); }
.note { padding: 20px 22px; border-radius: var(--radius-3); background: var(--panel); font-size: 15px; color: var(--fg-muted); }
.note strong { color: var(--fg); }
.prose .src { font-size: 14px; color: var(--fg-muted); }
.legal { padding: clamp(48px, 7vw, 96px) 0 var(--sec); }
.legal .h1 { font-size: clamp(38px, 4.6vw, 56px); }
.legal .prose { margin-top: 40px; }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: var(--paper); padding: 80px 0 40px; margin-top: var(--sec); }
.foot__top { display: grid; grid-template-columns: 1.2fr 2fr; gap: 64px; }
.foot__brand img { height: 24px; width: auto; }
.foot__brand p { margin-top: 20px; max-width: 22em; color: color-mix(in srgb, var(--paper) 62%, transparent); font-size: 15px; }
.foot__mail { display: inline-block; margin-top: 20px; color: var(--paper); text-decoration: none; font-weight: 500; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--paper) 30%, transparent); }
.foot__mail:hover { box-shadow: inset 0 -1px 0 var(--paper); }
.foot__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.foot__cols > div { display: grid; align-content: start; gap: 12px; }
.foot__h { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 50%, transparent); margin-bottom: 6px; }
.foot__cols a { color: color-mix(in srgb, var(--paper) 82%, transparent); text-decoration: none; font-size: 15px; width: fit-content; }
.foot__cols a:hover { color: var(--paper); }
.foot__bottom { display: flex; justify-content: space-between; gap: 24px; margin-top: 80px; padding-top: 28px; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--paper) 12%, transparent); font-size: 13px; color: color-mix(in srgb, var(--paper) 50%, transparent); }
.foot__legal { display: flex; gap: 20px; flex: none; }
.foot__legal a { color: inherit; text-decoration: none; }
.foot__legal a:hover { color: var(--paper); }
.foot :focus-visible { outline-color: var(--crimson-bright); }

/* ---------- 404 ---------- */
.nf { padding: clamp(80px, 12vw, 160px) 0 0; }
.nf .lead { margin-top: 24px; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .nav__links { display: none; }
  .flow { grid-template-columns: 1fr 1fr; row-gap: 64px; padding-top: 0; }
  .flow__track { display: none; }
  .step { padding-top: 64px; }
  .step__node { top: 0; animation: none; }
  .bento, .duo { grid-template-columns: 1fr; }
  .feats { grid-template-columns: 1fr 1fr; }
  .posts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .nav__cta .btn--ghost { display: none; }
  .nav__cta { margin-left: auto; }
  .nav__menu { display: block; margin-left: 0; }
  .ticker { display: none; }
  .net--wide { display: none; }
  .net--tall { display: block; }
  .flow, .feats, .cols3, .dark__grid, .posts, .form__two { grid-template-columns: 1fr; }
  .split, .contact { grid-template-columns: 1fr; }
  .split__head { position: static; }
  .sec__head--row { display: block; }
  .sec__head--row .lead { margin-top: 20px; }
  .band { display: block; }
  .band__ctas { margin-top: 32px; }
  .card { min-height: 0; }
  .duo .card { min-height: 0; }
  .foot__top { grid-template-columns: 1fr; gap: 48px; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .foot__bottom { display: block; }
  .foot__legal { margin-top: 16px; }
}
@media (max-width: 420px) {
  .hero__ctas .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; }
}

/* spacing and timing that would otherwise be inline (the CSP blocks inline styles) */
.eyebrow + .h2, .eyebrow + .h1 { margin-top: 24px; }
.hero__copy .eyebrow + .h1 { margin-top: 28px; }
.dark .h2 { max-width: 15em; }
.flow > .step:nth-child(2) { --d: 0s; }
.flow > .step:nth-child(3) { --d: 1.6s; }
.flow > .step:nth-child(4) { --d: 3.2s; }
.flow > .step:nth-child(5) { --d: 4.8s; }

/* fixes after first look */
.mnav[hidden] { display: none; }
@media (min-width: 1025px) { .mnav { display: none !important; } }
.h1 { font-size: clamp(42px, 5.4vw, 70px); }
.hero__copy .h1 { max-width: none; }
.hero__copy .h1 .dim { display: block; }

/* big screens: 27" and 32" monitors get a wider column and slightly larger type */
@media (min-width: 1680px) {
  :root { --wrap: 1360px; }
  body { font-size: 17px; }
  .h1 { font-size: 80px; }
  .h2 { font-size: 62px; }
  .lead { font-size: 21px; }
  .net--wide { max-height: 620px; }
  .card { min-height: 540px; }
}
@media (min-width: 2200px) { body { zoom: 1.2; } }
@media (min-width: 3000px) { body { zoom: 1.45; } }

/* review fixes */
.foot { margin-top: 0; }
.nf { padding-bottom: var(--sec); }
.tile--node { stroke: color-mix(in srgb, var(--ink) 14%, transparent); }
.eyebrow { flex-wrap: wrap; row-gap: 10px; }
.chip { white-space: nowrap; }
@media (max-width: 760px) {
  .nav__in { gap: 12px; }
  .nav__cta .btn--sm { height: 36px; padding: 0 12px; }
}
@media (max-width: 760px) {
  .flow { row-gap: 0; }
  .step { padding: 0 0 36px 64px; min-height: 44px; }
  .step::before { content: ""; position: absolute; left: 21.5px; top: 52px; bottom: 6px; width: 1px; background: var(--line); }
  .step:last-child { padding-bottom: 0; }
  .step:last-child::before { display: none; }
  .step .h3 { margin-top: 6px; }
}

@media (max-width: 1024px) {
  .nav__menu { display: block; margin-left: 0; }
  .nav__in { gap: 12px; }
  .ticker { display: none; }
}
.back { display: flex; width: fit-content; }

/* footer entity block */
.foot__fine { margin-top: 14px; max-width: 46em; }
.foot__legal { flex-wrap: wrap; }
.prose code { font-family: var(--font-mono); font-size: 0.88em; padding: 2px 6px; border-radius: var(--radius-1); background: var(--panel); }

/* FAQ (native details/summary) */
.faq { display: grid; }
.faq details { box-shadow: inset 0 1px 0 var(--hair); }
.faq details:last-child { box-shadow: inset 0 1px 0 var(--hair), inset 0 -1px 0 var(--hair); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font-size: 18px; font-weight: 500; letter-spacing: -0.015em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 10px; height: 10px; flex: none; border-right: 1.6px solid var(--fg); border-bottom: 1.6px solid var(--fg); transform: translateY(-3px) rotate(45deg); transition: transform var(--dur-base) var(--ease-out); }
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq details p { padding: 0 48px 24px 0; color: var(--fg-muted); }
.faq details p a, a.inline { color: var(--fg); text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); }