/* ReadyKnock site. Direction C (Mike, Nov 11 2026: "c is my favorite"): white canvas, cool greys, Geist, thin Lucide icons,
   emerald is the one accent (palette option 6, Nov 11). Tokens and motion from the brand kit "11 Final Kit - C". No tan anywhere.
   Strict CSP: no inline styles or scripts. Motion plays FROM a start state, so no-JS and reduced-motion users see finished content. */
/* ===== PALETTE: every accent color lives in this ONE block. Mike, Nov 11 2026: palette option 6, EMERALD + black/ink, the only
   palette. Values from the brand kit tokens (11 Final Kit - C/tokens/readyknock-tokens.css). SOLID colors only: no two-hue gradients.
   The --rk-grad-* and --rk-rose* names are kept as aliases and hold ONE solid color each.
   Emerald #10B981 is for fills only (2.5:1 on white); emerald text on white is #047857 (5.5:1). Ink on the emerald CTA is 7.8:1.
   Canvas colors (hero and header street grids, map pings) are read from --rk-ping / --rk-ping-soft as r,g,b. ===== */
:root {
  --rk-emerald: #10B981; --rk-emerald-deep: #047857; --rk-emerald-ink: #065F46; --rk-emerald-tint: #ECFDF5; --rk-emerald-line: #A7F3D0;
  --rk-ink-green: #0B1D17;       /* bold dark bands: final CTA, compare header, Recommended pill, selected chip. White text 17.5:1 */
  --rk-cta-bg: #10B981; --rk-cta-text: #0A0A0B; --rk-cta-hover: #0EA371;   /* the main CTA */
  --rk-accent: var(--rk-emerald);          /* fills: score rings, dots, bars, the logo glint. Never text. */
  --rk-accent-text: var(--rk-emerald-deep);/* accent text on white: eyebrows, step numbers, READY, the one colored word */
  --rk-accent-strong: var(--rk-emerald-ink);
  --rk-accent-soft: #34D399;     /* emerald on dark bands (10.6:1 on ink, 9.4:1 on the ink-green band) */
  --rk-accent-tint: var(--rk-emerald-tint); --rk-accent-line: var(--rk-emerald-line);
  --rk-grad-a: var(--rk-emerald); --rk-grad-b: var(--rk-emerald);         /* aliases, solid */
  --rk-grad: var(--rk-emerald);                 /* underlines, squares, progress bars */
  --rk-grad-text: var(--rk-emerald-deep);       /* the one colored word per headline */
  --rk-grad-text-dark: #34D399;                 /* colored words on dark bands */
  --rk-grad-band: var(--rk-ink-green);          /* CTA band, compare header, selected chip */
  --rk-rose: var(--rk-emerald); --rk-rose-deep: var(--rk-emerald-deep); --rk-rose-tint: var(--rk-emerald-tint); --rk-rose-line: var(--rk-emerald-line);
  --rk-aurora-1: rgba(16,185,129,.30); --rk-aurora-2: rgba(16,185,129,.18);   /* hero glow: one hue, slow drift */
  --rk-aurora-3: rgba(16,185,129,.22); --rk-aurora-4: rgba(52,211,153,.24);
  --rk-tint: var(--rk-emerald-tint); --rk-tint-line: var(--rk-emerald-line); --rk-tint-soft: #F6FBF8;  /* section tint, pale cells */
  --rk-glow: rgba(16,185,129,.35);              /* colored shadows */
  --rk-dark-glow: rgba(16,185,129,.16);         /* corner glow on dark bands */
  --rk-ping: 16,185,129; --rk-ping-soft: 52,211,153;                         /* canvas: lit house dot, ping ring */
}
@font-face { font-family: "Geist"; src: url("/assets/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/geist-mono-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --ink: #0A0A0B; --ink2: #2B2D31; --muted: #5F6269; --subtle: #696C74; /* kit #767981 is 4.35:1 on white; darkened for WCAG AA */ --faint: #A1A3AA; --line: #EAEAEC; --line2: #F1F1F3; --line3: #E4E4E7;
  --alt: #FAFAFA; --sunk: #F4F4F5; --white: #FFFFFF;
  --rose: var(--rk-accent); --rose-deep: var(--rk-accent-text); --rose-tint: var(--rk-accent-tint); --rose-line: var(--rk-accent-line); /* follow the palette block */
  --green: #17784F; --green-tint: #EAF6F0; --live: #3DD68C;
  --f: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --shadow-card: 0 1px 2px rgba(10,10,11,.04), 0 12px 32px -12px rgba(10,10,11,.12);
  --shadow-pop: 0 8px 20px -10px rgba(10,10,11,.2);
  --shadow-hero: 0 0 0 1px rgba(10,10,11,.02), 0 2px 4px rgba(10,10,11,.04), 0 24px 48px -12px rgba(10,10,11,.16), 0 60px 120px -30px rgba(10,10,11,.22);
  --rk-ease: cubic-bezier(.2,.7,.2,1); --rk-ease-io: cubic-bezier(.65,0,.35,1);
  --rk-dur-fast: 150ms; --rk-dur: 250ms; --rk-dur-slow: 450ms; --rk-dur-reveal: 700ms; --rk-stagger: 70ms;
  /* aliases used by preview.css / tour.css / picker.css (the dashboard tour and rate card) */
  --graphite: var(--ink); --paper: var(--white); --stone: var(--sunk); --pebble: var(--muted); --dot: var(--faint); --tint: var(--rose-tint); --ease: var(--rk-ease); --shadow: var(--shadow-card);
  --max: 1160px; --wide: 1240px; --narrow: 720px; --gut: 24px; --sec: 128px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--white); color: var(--ink); font: 16px/1.6 var(--f); letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4 { margin: 0 0 .4em; text-wrap: balance; }
h1 { font-weight: 620; letter-spacing: -0.052em; line-height: 1.0; font-size: clamp(44px, 7.2vw, 92px); }
h2 { font-weight: 600; letter-spacing: -0.042em; line-height: 1.05; font-size: clamp(34px, 4.6vw, 58px); }
h3 { font-weight: 600; letter-spacing: -0.025em; font-size: 18px; line-height: 1.25; }
p { margin: 0 0 1em; }
a { color: var(--ink); text-decoration-color: var(--faint); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: max(var(--gut), env(safe-area-inset-left, 0px)); }
.wrap-wide { max-width: var(--wide); margin: 0 auto; padding-inline: var(--gut); }
.wrap-narrow { max-width: var(--narrow); margin: 0 auto; padding-inline: var(--gut); }
.sr, .hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.skip { position: absolute; left: -10000px; } .skip:focus { left: 16px; top: 12px; z-index: 100; background: var(--white); padding: 8px 12px; border-radius: 8px; box-shadow: var(--shadow-pop); }
.lede, .one, .sub { color: var(--muted); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; max-width: 56ch; }
.fine, .hint { font: 500 12.5px/1.5 var(--mono); color: var(--subtle); letter-spacing: 0; }
.preview-bar { background: var(--ink); color: #EDEDEF; font: 500 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; /* system mono: staging-only bar, no web-font wait */ text-align: center; padding: 7px 16px; }
svg.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.ic.s { width: 15px; height: 15px; }
.nb { white-space: nowrap; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 9px; font: 550 15px/1 var(--f); letter-spacing: -0.006em; white-space: nowrap; text-decoration: none; cursor: pointer;
  background: var(--ink); color: var(--white); border: 1px solid transparent; transition: background var(--rk-dur-fast), border-color var(--rk-dur-fast), transform .1s; }
.btn:hover { background: var(--ink2); color: var(--white); }
.btn:active { transform: translateY(1px); }
.btn.dark { background: var(--rk-cta-bg); color: var(--rk-cta-text); } /* main CTA: emerald with ink text, 7.8:1 */
.btn.dark:hover { background: var(--rk-cta-hover); color: var(--rk-cta-text); box-shadow: 0 0 0 4px var(--rk-accent-line), 0 10px 28px -10px var(--rk-glow); }
.btn.ghost { background: var(--white); color: var(--ink); border-color: var(--line); box-shadow: 0 1px 2px rgba(10,10,11,.04); }
.btn.ghost:hover { border-color: #D4D4D8; background: var(--white); }
.btn.light { background: var(--white); color: var(--ink); } .btn.light:hover { background: #E6E6E8; }
.btn.ghostd { background: transparent; border-color: #2E2E33; color: #EDEDEF; } .btn.ghostd:hover { border-color: #4A4A50; background: transparent; }
.btn.small, .btn.sm { height: 34px; padding: 0 13px; font-size: 14px; border-radius: 8px; }
.btn[disabled] { opacity: .6; cursor: wait; }
.cta-row, .ctas { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 28px 0 14px; }
.lnk { font-size: 14.5px; font-weight: 550; text-decoration: underline; text-decoration-color: var(--faint); }
.more { display: inline-flex; align-items: center; gap: 6px; margin-top: 56px; font-weight: 550; font-size: 15.5px; color: var(--ink); text-decoration: none; }
.more:hover { text-decoration: underline; text-underline-offset: 4px; }
svg.arr { width: 16px; height: 16px; }
.nextlink { margin: 40px 0 0; font-weight: 550; font-size: 15px; }
.nextlink a { text-decoration: none; } .nextlink a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nextlink .ar { display: inline-block; transition: transform var(--rk-dur) var(--rk-ease); } .nextlink a:hover .ar { transform: translateX(3px); }

/* Header: sticky, frosted, hairline after 8px of scroll */
.top { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.8); -webkit-backdrop-filter: saturate(1.8) blur(14px); backdrop-filter: saturate(1.8) blur(14px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 30px; height: 64px; max-width: var(--max); }
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }
.brand .logo { height: 21px; width: auto; display: block; }
.logo .ink { fill: var(--ink); } .logo .inks, .slogo .inks { stroke: var(--ink); } .logo .acc, .slogo .acc { fill: var(--rose); }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a { font-size: 14.5px; text-decoration: none; color: var(--ink2); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { font-weight: 550; }
.menu { display: none; background: none; border: 0; width: 44px; height: 44px; margin-right: -10px; cursor: pointer; }
.menu i, .menu i::before, .menu i::after { display: block; width: 18px; height: 1.5px; background: var(--ink); margin: 0 auto; position: relative; transition: transform var(--rk-dur) var(--rk-ease); }
.menu i::before, .menu i::after { content: ""; position: absolute; left: 0; } .menu i::before { top: -5px; } .menu i::after { top: 5px; }
.menu[aria-expanded="true"] i { background: transparent; } .menu[aria-expanded="true"] i::before { transform: translateY(5px) rotate(45deg); } .menu[aria-expanded="true"] i::after { transform: translateY(-5px) rotate(-45deg); }
.crumbs { font: 500 12.5px var(--mono); color: var(--subtle); padding-top: 20px; } .crumbs a { color: var(--subtle); text-decoration: none; } .crumbs a:hover { color: var(--ink); }

/* Sections */
main > section, .final { padding: var(--sec) 0; border-top: 1px solid var(--line); }
main > section:first-child { border-top: 0; }
.s-alt { background: var(--rk-tint); border-top-color: var(--rk-tint-line); box-shadow: inset 0 -1px 0 var(--rk-tint-line); }
.eyebrow { font: 500 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--rk-accent-text); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--rk-grad); flex: none; }
.sh h2 { max-width: 16ch; margin: 0; } .sh .sub { margin: 18px 0 0; }
.sh.center { text-align: center; } .sh.center h2, .sh.center .sub { margin-inline: auto; } .sh.center .eyebrow { justify-content: center; }
.s-dark { background: var(--ink); color: #EDEDEF; border-top-color: var(--ink); --line: #232327; --muted: #8E9099; --subtle: #8E9099; --faint: #6B6E76; }
.s-dark { background: radial-gradient(60% 70% at 100% 0%, var(--rk-dark-glow), transparent 60%), radial-gradient(45% 55% at 0% 100%, var(--rk-dark-glow), transparent 60%), var(--ink); }
.s-dark .eyebrow { color: var(--rk-accent-soft); } .s-dark .more, .s-dark a { color: #EDEDEF; } .s-dark h2 { color: #EDEDEF; }
.grid-bg { position: relative; } .grid-bg::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent); mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent); }
.grid-bg > .wrap { position: relative; }
.final { text-align: center; padding: 120px 0; }
.final h2 { margin: 0 auto; max-width: 18ch; font-size: clamp(40px, 5.6vw, 72px); }
.final .lede { margin: 18px auto 0; }
.final .ctas { justify-content: center; margin-top: 34px; }
/* closing CTA band: the accent gradient from the palette block, white text (>= 5.1:1) */
.rk-cta-band { background: var(--rk-grad-band); color: #fff; border-top: 0; position: relative; overflow: hidden; isolation: isolate; }
.rk-cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 90% at 85% 0%, rgba(16,185,129,.28), transparent 65%); } /* one emerald glow */
.rk-cta-band h2 { color: #fff; } .rk-cta-band .lede { color: #fff; opacity: .92; }
.rk-cta-band .btn.light { background: var(--rk-cta-bg); color: var(--rk-cta-text); } .rk-cta-band .btn.light:hover { background: var(--rk-cta-hover); }
.rk-cta-band .btn.ghostd { border-color: rgba(255,255,255,.6); color: #fff; } .rk-cta-band .btn.ghostd:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.rk-cta-band :focus-visible { outline-color: #fff; }

/* Hero: headline, one line, two buttons, then the product, tilted, flattening as you scroll */
.hero { position: relative; padding: 96px 0 0; text-align: center; overflow: hidden; }
.hero > .wrap, .hero .stage { position: relative; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.hero h1 { max-width: 17ch; margin: 22px auto 0; }
.hero .lede { max-width: 46ch; margin: 24px auto 0; }
.hero .ctas { justify-content: center; margin-top: 34px; }
.hero .more { margin-top: 26px; }
.announce { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 99px; padding: 4px 12px 4px 4px; font-size: 13.5px; color: var(--ink2); background: var(--white); box-shadow: 0 1px 2px rgba(10,10,11,.04); text-decoration: none; transition: border-color var(--rk-dur); }
.announce span { background: var(--ink); color: var(--white); font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; } .announce:hover { border-color: #D4D4D8; }
/* Hero (FINAL, Mike Nov 11): aurora from the palette tokens behind the headline, with a white halo so text stays AA */
.mesh { position: absolute; inset: 0 0 auto 0; height: 1150px; overflow: hidden; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.mesh i { position: absolute; border-radius: 50%; filter: blur(64px); will-change: transform; }
.mesh i:nth-child(1) { left: -4%; top: -80px; width: 780px; height: 640px; background: radial-gradient(closest-side, var(--rk-aurora-1), transparent); animation: m1 18s ease-in-out infinite alternate; }
.mesh i:nth-child(2) { right: -6%; top: -20px; width: 760px; height: 620px; background: radial-gradient(closest-side, var(--rk-aurora-2), transparent); animation: m2 22s ease-in-out infinite alternate; }
.mesh i:nth-child(3) { left: 22%; top: 420px; width: 900px; height: 600px; background: radial-gradient(closest-side, var(--rk-aurora-3), transparent); animation: m1 26s ease-in-out infinite alternate-reverse; }
.mesh i:nth-child(4) { left: 44%; top: 60px; width: 520px; height: 460px; background: radial-gradient(closest-side, var(--rk-aurora-4), transparent); animation: m2 20s ease-in-out infinite alternate-reverse; }
.hero { isolation: isolate; }
.hood { position: absolute; left: 0; top: 0; width: 100%; height: 1000px; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .8s var(--rk-ease); }
.hood.on { opacity: 1; }
.hero > .wrap, .hero .stage { z-index: 2; }
.hero-in::before { content: ""; position: absolute; left: 50%; top: 10px; width: min(820px, 96%); height: 460px; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,.4) 60%, rgba(255,255,255,0)); }
@keyframes m1 { to { transform: translate(90px,-50px) scale(1.12); } } @keyframes m2 { to { transform: translate(-110px,40px) scale(.92); } }
/* hero entrance: CSS only (no JS needed, never hides the LCP headline for long) */
.hero-in > * { animation: rise 700ms var(--rk-ease) both; }
.hero-in > :nth-child(2) { animation-delay: 70ms; } .hero-in > :nth-child(3) { animation-delay: 140ms; } .hero-in > :nth-child(4) { animation-delay: 210ms; } .hero-in > :nth-child(5) { animation-delay: 280ms; }
.stage { animation: rise 900ms var(--rk-ease) 300ms both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.stage { position: relative; margin: 72px auto 0; max-width: 1240px; padding: 0 24px; perspective: 2400px; }
.glow { position: absolute; inset: 0 8% 24% 8%; background: radial-gradient(closest-side, var(--rk-aurora-1), var(--rk-aurora-2) 60%, transparent); filter: blur(48px); pointer-events: none; opacity: .8; }
/* The card floats tilted and flattens as you scroll (--rx, --sc); on desktop it also leans toward the cursor (--px, --py, eased). */
@property --px { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --py { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.tilt { position: relative; transform-origin: 50% 0; transform: rotateX(calc(var(--rx, 0deg) + var(--px, 0deg))) rotateY(var(--py, 0deg)) scale(var(--sc, 1)); will-change: transform; transition: --px .5s var(--rk-ease), --py .5s var(--rk-ease); }
.stage .screen { box-shadow: 0 0 0 1px var(--rk-accent-line), 0 30px 70px -24px var(--rk-glow), 0 12px 24px -12px rgba(10,10,11,.12); }
.motion .tilt { --rx: 14deg; --sc: .97; }
.works { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 28px; margin: 56px auto 96px; font-size: 14.5px; color: var(--muted); }
.wl { font-size: 13px; color: var(--subtle); } .wk { display: inline-flex; gap: 8px; align-items: center; } .wk b { font-weight: 600; color: var(--ink2); letter-spacing: -0.01em; font-size: 16px; }
.wk em { font-style: normal; font-size: 11px; font-weight: 550; border: 1px solid var(--line); border-radius: 99px; padding: 1px 7px; color: var(--subtle); } .wk em.av { color: var(--ink); border-color: #D4D4D8; }

/* Product screen (example data) */
.screen { display: grid; grid-template-columns: 200px minmax(0,1fr); text-align: left; background: var(--white); border: 1px solid var(--line3); border-radius: 14px; overflow: hidden; font-size: 13px; letter-spacing: -0.004em; box-shadow: var(--shadow-hero); }
.sc-side { border-right: 1px solid var(--line); background: #FBFBFB; padding: 14px 10px; display: flex; flex-direction: column; gap: 12px; }
.slogo { width: 26px; height: 26px; margin: 2px 6px; }
.sc-ws { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: var(--white); }
.sc-ws i { width: 24px; height: 24px; border-radius: 6px; background: var(--ink); color: var(--white); font: 600 10px var(--mono); font-style: normal; display: grid; place-items: center; }
.sc-ws b { display: block; font-size: 12px; font-weight: 600; line-height: 1.2; } .sc-ws small { color: var(--muted); font-size: 11px; }
.sc-side nav { display: grid; gap: 1px; } .sc-side nav span { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 6px; color: var(--ink2); }
.sc-side nav span .ic { color: var(--faint); } .sc-side nav span.on { background: #EFEFF1; color: var(--ink); font-weight: 600; } .sc-side nav span.on .ic { color: var(--ink); }
.sc-side nav em { margin-left: auto; font: 500 10.5px var(--mono); font-style: normal; color: var(--rose-deep); background: var(--rose-tint); padding: 1px 6px; border-radius: 99px; }
.sc-top { display: flex; align-items: center; gap: 14px; padding: 10px 18px; border-bottom: 1px solid var(--line); color: var(--faint); }
.crumb { color: var(--muted); margin-right: auto; } .crumb b { color: var(--ink); font-weight: 600; }
.live { display: inline-flex; align-items: center; gap: 6px; font: 500 11px var(--mono); color: var(--muted); } .live i { width: 6px; height: 6px; border-radius: 50%; background: #22A06B; }
.exd { font: 600 10px var(--mono); letter-spacing: .1em; color: var(--muted); border: 1px solid var(--line); padding: 3px 7px; border-radius: 5px; }
.sc-body { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,1fr); }
.sc-col { padding: 20px 20px 22px; display: grid; gap: 16px; align-content: start; border-right: 1px solid var(--line); }
.sc-h { font-size: 19px; font-weight: 600; letter-spacing: -0.03em; margin: 0; line-height: 1.3; }
.kpis { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.kpis div { padding: 9px 12px; border-left: 1px solid var(--line); display: grid; gap: 2px; } .kpis div:first-child { border-left: 0; }
.kpis small { color: var(--muted); font-size: 11px; } .kpis b { font: 600 16px var(--f); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; } .kpis b i { font-style: normal; color: var(--subtle); font-weight: 500; font-size: 12.5px; }
.roll { display: inline-block; }
.list { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .list-h { display: flex; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--line); background: #FBFBFB; } .list-h b { font-weight: 600; } .list-h span { color: var(--muted); font-size: 12px; }
.lr { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line2); position: relative; transition: background var(--rk-dur), box-shadow var(--rk-dur); } .lr:last-child { border-bottom: 0; }
.lr.sel { background: var(--alt); box-shadow: inset 2px 0 0 var(--rose); }
.lr-m { min-width: 0; display: grid; } .lr-m b { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lr-m span { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbtn { font-size: 12px; font-weight: 550; border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px; white-space: nowrap; }
.ring { position: relative; width: 34px; height: 34px; display: inline-grid; place-items: center; flex: none; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); } .ring circle { fill: none; stroke-width: 3; } .ring .trk { stroke: #EDEDEF; } .ring .val { stroke: var(--rose); stroke-linecap: round; }
.ring b { font: 600 12px var(--mono); position: relative; } .ring.big { width: 48px; height: 48px; } .ring.big b { font-size: 15px; }
.sc-detail { padding: 20px; display: grid; gap: 10px; align-content: start; }
.dh { display: flex; gap: 12px; align-items: center; } .dh b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; } .dh small { color: var(--muted); font-size: 12px; }
.ready { margin-left: auto; font: 600 10.5px var(--mono); letter-spacing: .12em; color: var(--rose-deep); background: var(--rose-tint); border: 1px solid var(--rose-line); padding: 3px 8px; border-radius: 5px; font-style: normal; }
.lbl { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--subtle); margin: 6px 0 0; }
.why { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } .why li { padding-left: 16px; position: relative; color: var(--ink2); }
.why li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #D4D4D8; } .why li:first-child { color: var(--ink); font-weight: 500; } .why li:first-child::before { background: var(--rose); }
.bars { display: grid; grid-template-columns: 52px 1fr 26px; gap: 6px 10px; align-items: center; font-size: 12px; color: var(--muted); width: 100%; }
.bars i { height: 5px; background: #EFEFF1; border-radius: 99px; overflow: hidden; } .bars b { display: block; height: 100%; background: var(--ink); border-radius: 99px; } .bars b.r { background: var(--rose); } .bars em { font: 500 11.5px var(--mono); font-style: normal; color: var(--ink2); text-align: right; }
.w84 { width: 84%; } .w86 { width: 86%; } .w88 { width: 88%; } .w90 { width: 90%; } .w92 { width: 92%; } .w94 { width: 94%; } .w96 { width: 96%; }
.msg { background: var(--alt); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; color: var(--ink2); line-height: 1.5; }
.dbtns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .dbtns .b { border: 1px solid var(--line); border-radius: 7px; padding: 6px 11px; font-weight: 550; font-size: 12.5px; } .dbtns .b.pri { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* Live signal map (dark band) */
.mapw { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); margin-top: 56px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: rgba(13,13,15,.7); }
.mapc { position: relative; padding: 24px 24px 40px; border-right: 1px solid var(--line); }
.mside { padding: 26px; display: grid; gap: 10px; align-content: start; }
.livetag { display: inline-flex; gap: 8px; align-items: center; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #EDEDEF; margin: 0; }
.livetag i { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px rgba(61,214,140,.15); } .asof { color: #8E9099; font-size: 13px; margin: 0; }
.mside .lbl { color: #8E9099; }
.alist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .alist li { display: grid; grid-template-columns: 12px 1fr; gap: 2px 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.alist li.none { display: block; color: #8E9099; }
.alist .adot { width: 7px; height: 7px; border-radius: 50%; background: var(--rose); margin-top: 7px; } .alist b { font-weight: 550; } .alist span { grid-column: 2; color: #8E9099; font-size: 12.5px; }
.msrc { font: 500 10.5px/1.6 var(--mono); color: #8E9099; margin: 10px 0 0; }
/* Lower-48 map (Nov 11): state outlines in SVG, county dots on a canvas (v2.js). */
.mapw.us { grid-template-columns: 1fr; } .mapw.us .mapc { border-right: 0; border-bottom: 1px solid var(--line); padding: 28px 28px 18px; }
.usmap { position: relative; width: 100%; max-width: 1000px; margin: 0 auto; aspect-ratio: 960 / 603; } .usst, #uscv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.usst path { fill: #141417; stroke: #2C2C31; stroke-width: .8; stroke-linejoin: round; }
#uscv { cursor: crosshair; touch-action: manipulation; }
.ustip { position: absolute; z-index: 2; pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); background: #EDEDEF; color: var(--ink); border-radius: 9px; padding: 8px 11px; font-size: 12.5px; line-height: 1.4; white-space: nowrap; box-shadow: 0 8px 24px -8px rgba(0,0,0,.6); left: var(--tx, 50%); top: var(--ty, 50%); }
.ustip b { display: block; font-weight: 600; font-size: 13px; } .ustip em { font-style: normal; color: var(--rose-deep); font-weight: 550; } .ustip small { display: block; color: var(--muted); font: 500 10.5px var(--mono); }
.mnow { display: flex; gap: 8px; align-items: center; margin: 10px 0 0; font: 500 12px var(--mono); color: #8E9099; min-height: 18px; } .mnow i { width: 7px; height: 7px; border-radius: 50%; background: var(--rose); flex: none; } .mnow b { color: #EDEDEF; font-weight: 500; }
.livetag.stale i { background: #8E9099; box-shadow: none; animation: none; }
.mbig b { display: block; font-size: 40px; font-weight: 600; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; line-height: 1.05; margin-top: 8px; } .mbig > span { color: #8E9099; font-size: 13px; }
.tops { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .tops li { display: grid; grid-template-columns: 96px 1fr 54px; gap: 10px; align-items: center; font-size: 13px; }
.tops i { height: 4px; background: #232327; border-radius: 99px; overflow: hidden; } .tops i b { display: block; height: 100%; background: #C9CBD1; border-radius: 99px; } .tops em { font: 500 12px var(--mono); font-style: normal; color: #A9ABB2; text-align: right; }
.tops i b.w5 { width: 5%; } .tops i b.w10 { width: 10%; } .tops i b.w15 { width: 15%; } .tops i b.w20 { width: 20%; } .tops i b.w25 { width: 25%; } .tops i b.w30 { width: 30%; } .tops i b.w35 { width: 35%; } .tops i b.w40 { width: 40%; } .tops i b.w45 { width: 45%; } .tops i b.w50 { width: 50%; } .tops i b.w55 { width: 55%; } .tops i b.w60 { width: 60%; } .tops i b.w65 { width: 65%; } .tops i b.w70 { width: 70%; } .tops i b.w75 { width: 75%; } .tops i b.w80 { width: 80%; } .tops i b.w85 { width: 85%; } .tops i b.w90 { width: 90%; } .tops i b.w95 { width: 95%; } .tops i b.w100 { width: 100%; }
.cover { font-size: 13px; color: #D4D4D8; margin: 6px 0 0; } .cover a { color: #EDEDEF; text-decoration: underline; text-underline-offset: 3px; }
.us3 { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 32px; padding: 26px 28px; } .us3 > div { display: grid; gap: 9px; align-content: start; } .us3 .lbl.first { margin-top: 0; } .us3 .alist { grid-template-columns: 1fr 1fr; column-gap: 18px; }

/* Walkthrough: steps on the left, pinned screen on the right */
.walk { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 64px; margin-top: 24px; }
.wstep { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: .35; transition: opacity .4s var(--rk-ease); } .wstep.on { opacity: 1; }
.wn { font: 500 12px var(--mono); color: var(--subtle); } .wstep h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.035em; margin: 10px 0 12px; } .wstep p { color: var(--muted); font-size: 17px; max-width: 40ch; margin: 0; }
.wpin { position: sticky; top: calc(50vh - 200px); align-self: start; margin-top: 18vh; }
.wscr { background: var(--white); border: 1px solid var(--line3); border-radius: 14px; overflow: hidden; font-size: 13px; box-shadow: 0 2px 4px rgba(10,10,11,.04), 0 24px 48px -16px rgba(10,10,11,.16); text-align: left; }
.wbar { display: flex; gap: 6px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #FBFBFB; } .wbar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line3); } .wbar span { margin-left: 8px; font: 500 11px var(--mono); color: var(--subtle); }
.wbody { padding: 22px; display: grid; gap: 12px; } .wbody .rk-seq, .wbody .rk-draw { display: grid; gap: 12px; }
.sig { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 12px; } .sig.dim { opacity: .5; }
.sico { width: 34px; height: 34px; border-radius: 8px; background: var(--sunk); display: grid; place-items: center; } .sig b { display: block; font-weight: 600; } .sig small { color: var(--muted); }
.tagm { font: 500 10.5px var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; white-space: nowrap; }
.wnote { color: var(--muted); font-size: 12.5px; margin: 0; }
.sent { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 12px; } .sent > span { width: 30px; height: 30px; border-radius: 8px; background: var(--sunk); display: grid; place-items: center; }
.sent b { display: block; font-weight: 600; } .sent small { color: var(--muted); } .sent em { color: var(--green); }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 56px; }
.bc { position: relative; border: 1px solid var(--line); border-radius: 16px; padding: 22px; background: var(--white); display: grid; gap: 6px; align-content: start; overflow: hidden; }
.bc.wide { grid-column: span 2; }
.bc h3 { font-size: 17px; margin: 16px 0 0; } .bc p { color: var(--muted); font-size: 14.5px; margin: 0; }
.soon { font: 500 11.5px var(--mono); color: var(--subtle); border: 1px solid var(--line); border-radius: 99px; padding: 0 7px; white-space: nowrap; }
.mini { min-height: 132px; border: 1px solid var(--line2); background: var(--alt); border-radius: 12px; padding: 16px; display: grid; gap: 8px; align-content: center; justify-items: start; font-size: 13px; }
.mini.row { grid-auto-flow: column; grid-template-columns: auto 1fr; gap: 18px; align-items: center; justify-items: stretch; }
.mini.flagrow { grid-template-columns: 1fr auto 1fr; } .mini.flagrow > .ic { color: var(--faint); }
.chip { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-weight: 550; } .chip.g { font: 500 11px var(--mono); color: var(--muted); }
.toastm { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow-pop); width: 100%; }
.toastm > span { width: 28px; height: 28px; border-radius: 7px; background: var(--rose-tint); color: var(--rose-deep); display: grid; place-items: center; } .toastm b { display: block; font-weight: 600; } .toastm small { color: var(--muted); }
.pc { width: 100%; aspect-ratio: 1.6; max-height: 110px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 12px; display: grid; align-content: space-between; box-shadow: 0 6px 16px -10px rgba(10,10,11,.25); transform: rotate(-2deg); transition: transform var(--rk-dur) var(--rk-ease); }
.bc:hover .pc { transform: rotate(0deg) translateY(-2px); }
.pc b { font-size: 13px; } .pc small { color: var(--muted); } .pc i { font: 500 10px var(--mono); font-style: normal; color: var(--subtle); justify-self: end; }
.sync { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .sync span { background: var(--white); border: 1px solid var(--line); border-radius: 7px; padding: 5px 9px; font-weight: 550; } .sync em { color: var(--faint); display: inline-flex; }
.sync b { flex-basis: 100%; display: inline-flex; gap: 6px; align-items: center; font: 500 11.5px var(--mono); color: var(--green); margin-top: 4px; }
.flag { background: var(--white); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; display: grid; } .flag span { font-weight: 600; } .flag em { font-style: normal; color: var(--muted); font-size: 12px; } .flag.ok em { color: var(--green); }
.roadmap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 28px; }
.roadmap .wl { margin-right: 6px; } .rm { font-size: 13.5px; font-weight: 550; color: var(--ink2); border: 1px dashed #D4D4D8; border-radius: 99px; padding: 4px 11px; }

/* Stats */
.stg { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 56px; border-top: 1px solid var(--line); }
.st { padding: 28px 24px 8px 0; display: grid; gap: 8px; align-content: start; } .st + .st { padding-left: 24px; border-left: 1px solid var(--line); }
.st b { font-size: clamp(44px, 5.2vw, 68px); font-weight: 600; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; } .st p { color: var(--ink2); font-size: 15px; margin: 0; } .st > span { font: 500 11px var(--mono); color: var(--subtle); }
.st.st-live b { transition: color var(--rk-dur); } .st.st-live.wait b { color: #B4B6BC; font-family: var(--mono); font-weight: 500; }

/* Compare flip */
.flip { max-width: 760px; margin: 48px auto 0; display: grid; gap: 18px; justify-items: center; }
.seg2 { display: inline-flex; background: #EDEDEF; border-radius: 10px; padding: 4px; gap: 2px; } .seg2 button { border: 0; background: transparent; padding: 8px 16px; border-radius: 7px; font: 550 14px var(--f); color: var(--muted); cursor: pointer; transition: background var(--rk-dur), color var(--rk-dur), box-shadow var(--rk-dur); }
.seg2 button[aria-pressed="true"] { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(10,10,11,.1); }
.fcard { width: 100%; background: var(--white); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 40px -24px rgba(10,10,11,.2); transition: box-shadow var(--rk-dur-slow); }
.fh { padding: 18px 22px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 16px; display: grid; }
.fh > span, .tr > b { grid-area: 1 / 1; transition: opacity var(--rk-dur-slow) var(--rk-ease-io), transform var(--rk-dur-slow) var(--rk-ease); }
.fh > span { display: inline-flex; gap: 10px; align-items: center; } .fh .ready { margin-left: 6px; }
.tr { display: grid; grid-template-columns: .9fr 1.4fr; border-top: 1px solid var(--line2); } .tr:first-of-type { border-top: 0; } .tr > * { padding: 15px 22px; } .tr > span { color: var(--muted); font-size: 14.5px; grid-row: 1; } .tr > b { font-weight: 550; grid-column: 2; grid-row: 1; }
.tr > b:nth-of-type(2) { transition-delay: calc(var(--rk-i, 0) * 40ms); }
.flip[data-mode="1"] .v0, .flip[data-mode="0"] .v1 { opacity: 0; transform: translateY(6px); visibility: hidden; }
.flip[data-mode="0"] .tr b { color: var(--muted); font-weight: 500; } .flip[data-mode="0"] .fcard { box-shadow: none; }
.fnote { padding: 12px 22px; margin: 0; font: 500 11px var(--mono); color: var(--subtle); border-top: 1px solid var(--line2); }
#compare .more { display: flex; width: max-content; margin-inline: auto; }

/* Pricing cards (home) */
.plans { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 56px; }
.plan { padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.plan.rec, .rate .tier.featured { border-color: transparent; box-shadow: 0 0 0 1.5px var(--rk-accent), 0 18px 40px -18px var(--rk-glow); background: var(--white); }
.plan.rec .pill, .rate .tier.featured .pick { background: var(--rk-grad-band); color: #fff; border-color: transparent; }
.btn.rec-btn { background: var(--rk-cta-bg); color: var(--rk-cta-text); } .btn.rec-btn:hover { background: var(--rk-cta-hover); box-shadow: 0 0 0 4px var(--rk-accent-line), 0 10px 28px -8px var(--rk-glow); }
.plan.match { box-shadow: inset 0 2px 0 var(--rose); }
.plan .ph { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .plan h3 { font-size: 16px; margin: 0; }
.pill { font-size: 11.5px; font-weight: 550; border: 1px solid var(--line); background: var(--white); padding: 2px 8px; border-radius: 99px; color: var(--ink2); white-space: nowrap; }
.plan .price { margin: 0; } .plan .price b { font-size: 42px; font-weight: 600; letter-spacing: -0.045em; } .plan .price span { color: var(--muted); } .pl { color: var(--ink2); font-size: 14.5px; min-height: 2.6em; margin: 0; }
.plan .btn { width: 100%; } .plan ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 9px; font-size: 14px; color: var(--ink2); } .plan li { display: flex; gap: 9px; } .plan li .ic { margin-top: 3px; color: var(--rk-accent-text); }

/* Trust + founder line */
.trust-grid { margin: 56px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.trust-grid div { padding: 22px 22px 22px 0; border-bottom: 1px solid var(--line); }
.trust-grid div:not(:nth-child(3n+1)) { padding-left: 22px; border-left: 1px solid var(--line); }
.trust-grid dt { font-weight: 600; margin-bottom: 6px; letter-spacing: -0.015em; } .trust-grid dd { margin: 0; color: var(--muted); font-size: 15px; }
.story { font-size: clamp(18px, 1.9vw, 22px); line-height: 1.5; letter-spacing: -0.015em; max-width: 60ch; margin: 56px 0 0; color: var(--ink2); }
.sig { display: block; font: 500 13px var(--mono); color: var(--subtle); margin-top: 14px; letter-spacing: 0; }

/* FAQ */
.faqw { display: grid; grid-template-columns: 1fr 1.5fr; gap: 56px; align-items: start; } .faqw .more { margin-top: 32px; }
.faq { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); position: relative; padding-left: 16px; }
details[open]::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 20px; width: 3px; border-radius: 3px; background: var(--rk-grad); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 22px 0; font-weight: 550; font-size: 17px; letter-spacing: -0.015em; transition: color var(--rk-dur-fast); }
summary:hover, details[open] summary .ic { color: var(--rk-accent-text); }
summary::-webkit-details-marker { display: none; }
summary .ic { transition: transform var(--rk-dur) var(--rk-ease); color: var(--muted); margin-top: 4px; } details[open] summary .ic { transform: rotate(180deg); }
details p { color: var(--muted); padding: 0 0 22px; margin: 0; max-width: 60ch; }
details[open] p { animation: rise 350ms var(--rk-ease); }

/* Forms (snapshot, waitlist, trial, newsletter) */
.card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: clamp(20px, 3vw, 32px); box-shadow: var(--shadow-card); }
.snap-card { margin-top: 48px; }
.form { display: grid; gap: 16px; }
.form label { display: grid; gap: 6px; font-size: 14px; font-weight: 550; color: var(--ink2); }
.form.inline { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }
.form.inline .form-status { grid-column: 1 / -1; margin: 0; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
input, select, textarea { font: 16px var(--f); color: var(--ink); background: var(--white); border: 1px solid var(--line3); border-radius: 9px; padding: 11px 12px; width: 100%; max-width: 100%; transition: border-color var(--rk-dur-fast), box-shadow var(--rk-dur-fast); box-shadow: 0 1px 2px rgba(10,10,11,.03); }
input:hover, select:hover { border-color: #D4D4D8; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(10,10,11,.08); }
.form .consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 13.5px; color: var(--muted); }
.form .consent input { width: auto; margin-top: 3px; accent-color: var(--ink); box-shadow: none; }
.form .btn { justify-self: start; }
.form-status { font-size: 14px; margin: 0; min-height: 1em; } .form-status.ok { color: var(--green); } .form-status.err { color: #B42318; }
.seg { display: inline-flex; gap: 2px; background: #EDEDEF; border-radius: 10px; padding: 4px; justify-self: start; }
.seg label { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; border-radius: 7px; padding: 7px 14px; cursor: pointer; font-weight: 550; color: var(--muted); }
.seg label:has(input:checked) { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(10,10,11,.1); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; } .seg label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.snap-out { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 24px; }
.snap-total { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.snap-total b { font: 600 clamp(48px, 6vw, 68px)/1 var(--f); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; } .snap-total span { color: var(--muted); }
.snap-types { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line2); }
.snap-types li { padding: 10px 0; border-bottom: 1px solid var(--line2); font-size: 15px; color: var(--ink2); } .snap-types li b { font: 600 15px var(--mono); color: var(--rose-deep); margin-right: 2px; }
.snap-when { color: var(--muted); } .snap-types li.snap-ctx b { color: var(--ink); }
.snap-samples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.snap-sample { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--alt); } .snap-sample p { margin: 0 0 4px; }
.ss-type { font-weight: 600; } .ss-meta { font: 500 12px var(--mono); color: var(--muted); }
.ss-hidden { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 6px !important; }
.redact { display: inline-block; height: .9em; background: var(--ink); opacity: .75; border-radius: 2px; filter: blur(1.5px); }
.ss-lock { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--rose-deep); }
.snap-none { color: var(--muted); } .snap-ask { font-weight: 600; margin: 0; }
.snap-out.go .snap-types li, .snap-out.go .snap-sample { animation: rise 500ms var(--rk-ease) both; }
.snap-out.go .snap-types li:nth-child(2), .snap-out.go .snap-sample:nth-child(2) { animation-delay: 120ms; } .snap-out.go .snap-types li:nth-child(3), .snap-out.go .snap-sample:nth-child(3) { animation-delay: 240ms; }
.who-line { margin: 32px 0 0; color: var(--muted); font-size: 15px; max-width: 70ch; } .who-line a { color: var(--ink2); }
.other-box[hidden], .snap-total[hidden], .snap-total b[hidden] { display: none !important; }

/* Start (waitlist / trial) */
.start-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.start-in.solo { grid-template-columns: minmax(0, 720px); justify-content: center; }
.start h2 { margin: 0; } .start .sub { margin: 14px 0 0; } .start .card { margin-top: 28px; }
.news { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }

/* Calculator + quiz (pricing page) */
.calc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); margin-top: 40px; align-items: start; }
.calc-in { display: grid; gap: 18px; } .calc-in label { display: grid; gap: 6px; font-size: 14px; font-weight: 550; color: var(--ink2); }
input[type="range"] { padding: 0; background: none; border: 0; box-shadow: none; accent-color: var(--ink); }
.calc-out { border: 1px solid var(--line); border-radius: 16px; background: var(--white); padding: 24px; position: sticky; top: 96px; box-shadow: var(--shadow-card); }
.big { margin: 0 0 22px; display: grid; gap: 4px; } .big span { font: 500 12px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.big b { font: 600 clamp(48px, 7vw, 76px)/1 var(--f); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.big.dim b { color: var(--muted); font-size: clamp(32px, 4.4vw, 48px); }
.quiz { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr); gap: 24px; margin-top: 40px; align-items: start; }
.quiz fieldset { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 16px 0 0; display: grid; gap: 10px; min-width: 0; }
.quiz legend { font-weight: 600; padding: 0; margin-bottom: 8px; font-size: 15px; }
.quiz label { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--muted); cursor: pointer; }
.quiz label:has(input:checked) { color: var(--ink); } .quiz input { width: auto; accent-color: var(--ink); margin-top: 4px; box-shadow: none; }
.quiz-out { border: 1px solid var(--line); border-radius: 16px; padding: 20px; background: var(--white); box-shadow: var(--shadow-card); }
.pick-label { font: 500 12px var(--mono); color: var(--muted); margin: 0; text-transform: uppercase; letter-spacing: .06em; } .pick { font-size: 2rem; font-weight: 600; letter-spacing: -0.035em; margin: 2px 0 6px; }

/* Inner pages */
.page-hero { padding: clamp(56px, 8vw, 104px) var(--gut) 24px; }
.page-hero h1 { font-size: clamp(40px, 5.6vw, 68px); margin-bottom: 18px; }
.page-hero .lede { margin-bottom: 0; }
main > .page-hero, main > section.wrap, main > section.wrap-narrow, main > section.wrap-wide, main > article { padding-top: 0; padding-bottom: 0; border-top: 0; }
main > .page-hero { padding-top: clamp(56px, 8vw, 104px); padding-bottom: 24px; }
main > :last-child:not(.final) { padding-bottom: var(--sec); }
main > section.calc2, main > section.quizband, main > section.mapband { padding: 96px 0; border-top: 1px solid var(--line); margin-top: 72px; }
main > section.calc2 { margin-top: 0; }
.calc2 h2, .quizband h2, .mapband h2 { font-size: clamp(30px, 3.6vw, 44px); margin: 0 0 12px; }
.content { padding-top: clamp(48px, 7vw, 96px); }
.content h1 { font-size: clamp(38px, 5.2vw, 60px); }
.content .meta { font: 500 12.5px var(--mono); color: var(--subtle); }
.c-sec { margin-top: 48px; } .c-sec h2 { font-size: clamp(24px, 2.8vw, 32px); letter-spacing: -0.035em; } .c-sec p, .c-sec li { color: var(--ink2); } .c-sec li { margin: 6px 0; }
.c-sec.faq { border-top: 0; } .c-sec.faq h2 { margin-bottom: 12px; }
.c-cta { margin: 48px 0 0; } .c-cta .btn { background: var(--rk-cta-bg); color: var(--rk-cta-text); }
.draft { display: inline-block; font: 600 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--rose-deep); background: var(--rose-tint); border: 1px solid var(--rose-line); border-radius: 6px; padding: 5px 10px; }
.related { margin-top: 56px; border-top: 1px solid var(--line); padding-top: 14px; display: grid; }
.related h2 { font: 500 12px var(--mono); color: var(--subtle); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 6px; }
.related a { padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 550; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.how-steps { display: grid; gap: 0; margin-top: 24px; border-top: 1px solid var(--line); }
.hstep { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; border-bottom: 1px solid var(--line); padding: 28px 0; }
.hstep .n { font: 500 13px var(--mono); color: var(--subtle); padding-top: 6px; } .hstep h2 { font-size: clamp(24px, 2.6vw, 30px); margin-bottom: 6px; letter-spacing: -0.035em; } .hstep .one { color: var(--ink); font-weight: 550; margin-bottom: 6px; font-size: 17px; } .hstep p { color: var(--muted); }
.rules2 { margin-top: 72px; } .rules2 h2 { font-size: clamp(26px, 3vw, 34px); } .rules2 ul { padding-left: 1.2em; } .rules2 li { margin: 10px 0; color: var(--ink2); }
.nocredits, .trialline { max-width: 62ch; } .nocredits { margin-top: 24px; } .trialline { color: var(--muted); }
.cards { display: grid; gap: 14px; margin-top: 24px; }
.gcard { display: block; padding: 22px 24px; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; background: var(--white); }
.gcard h2 { font-size: 20px; letter-spacing: -0.025em; margin-bottom: 6px; } .gcard p { color: var(--muted); margin: 0; }
.nf .code { font: 600 13px var(--mono); color: var(--rose-deep); }

/* Pricing page: rate card */
.rate .group { font: 500 12px var(--mono); color: var(--subtle); letter-spacing: .06em; text-transform: uppercase; margin: 56px 0 16px; }
.rate .tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rate .tier { padding: 26px 24px; position: relative; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.rate .tier { display: flex; flex-direction: column; } .rate .tier .btn { margin-top: auto; align-self: stretch; } .rate .tier .fee { margin-bottom: 18px; }
.rate .tier h4 { margin: 0 0 6px; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; } .rate .pick { font: 500 11.5px var(--mono); color: var(--ink2); margin: 0 0 8px; display: inline-block; border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; }
.rate .price { font: 600 42px/1.1 var(--f); letter-spacing: -0.045em; margin: 0; } .rate .price span { font-size: 15px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.rate .cpl { font: 500 12.5px var(--mono); color: var(--muted); }
.rate ul { list-style: none; padding-left: 0; font-size: 14.5px; color: var(--ink2); } .rate li { margin: 6px 0; padding-left: 22px; position: relative; }
.rate li::before { content: ""; position: absolute; left: 3px; top: 5px; width: 5px; height: 9px; border: solid var(--rk-accent-text); border-width: 0 1.75px 1.75px 0; transform: rotate(45deg); } .rate .fee { font-size: 14px; color: var(--muted); margin: 0; }
.rate .promise-box { margin-top: 56px; border: 1px solid var(--line); border-radius: 16px; padding: 24px; max-width: 760px; background: var(--alt); } .rate .promise-box h3 { font-size: 18px; }
.rate .note { color: var(--muted); font-size: 15px; max-width: 75ch; margin-top: 24px; }

/* Legal pages (Terms, Privacy Policy, DPA summary) */
.legal { padding-bottom: 72px; color: var(--ink2); }
.legal h2 { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.03em; margin: 2.2em 0 .6em; scroll-margin-top: 96px; color: var(--ink); }
.legal h2.part { font-size: clamp(26px, 3vw, 34px); }
.legal h3 { margin: 1.6em 0 .5em; color: var(--ink); }
.legal a { color: var(--rk-accent-text); text-decoration-color: var(--rk-accent-line); text-decoration-thickness: 1.5px; } .legal a:hover { text-decoration-color: var(--rk-accent-text); }
.legal blockquote { margin: 0 0 1.6em; padding: 16px 20px; border: 1px solid var(--line); border-left: 2px solid var(--rk-accent); border-radius: 0 12px 12px 0; background: var(--alt); }
.legal blockquote p:last-child { margin: 0; }
.legal ul, .legal ol { padding-left: 1.3em; margin: 0 0 1em; } .legal li { margin: .3em 0; }
.legal hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.table-scroll { overflow-x: auto; margin: 0 0 1.4em; border: 1px solid var(--line); border-radius: 12px; }
.legal table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line2); }
.legal th { background: var(--alt); border-bottom: 1px solid var(--line); font-weight: 600; color: var(--ink); }
.legal tr:last-child td { border-bottom: 0; }
.dpa dt { font-weight: 600; margin-top: 1.2em; color: var(--ink); } .dpa dd { margin: .3em 0 0; color: var(--muted); }

/* Street map on /dashboard (OpenStreetMap streets + example pins) */
.map-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; margin-bottom: 28px; }
.smap { position: relative; margin: 0; container-type: inline-size; }
.sm-frame { position: relative; aspect-ratio: 756 / 540; overflow: hidden; border-radius: 14px; border: 1px solid var(--line3); background: var(--alt); box-shadow: var(--shadow-card); }
.sm-base { position: absolute; width: 132.275%; height: 155.556%; left: -26.455%; top: -24.074%; max-width: none; filter: grayscale(1); }
.hmap { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hmap .sm-terr { fill: var(--rose); fill-opacity: .1; stroke: var(--rose-deep); stroke-width: 2; stroke-linejoin: round; }
.hmap .sm-terr-lbl { font: 600 12px var(--mono); letter-spacing: .1em; fill: var(--rose-deep); paint-order: stroke; stroke: var(--white); stroke-width: 4px; }
.hmap .sm-out { fill: var(--white); stroke: var(--faint); stroke-width: 1.5; }
.hmap .sm-watch { fill: var(--white); stroke: var(--ink); stroke-width: 2; }
.hmap .sm-grp circle { fill: var(--ink); } .hmap .sm-grp .halo { fill: var(--ink); fill-opacity: .14; }
.hmap .sm-grp text { font: 600 13px var(--mono); fill: var(--white); text-anchor: middle; dominant-baseline: central; }
.hmap .sm-hot .dot { fill: var(--rose); fill-opacity: 1; stroke: var(--white); stroke-width: 2.5; }
.hmap .sm-hot .gl { fill: var(--white); }
.hmap .sm-hot .sc { font: 700 14px var(--mono); fill: var(--rose-deep); dominant-baseline: central; paint-order: stroke; stroke: var(--white); stroke-width: 3.5px; }
.hmap .sm-hot.is-card .dot { stroke: var(--ink); }
.hmap .rip { fill: none; stroke: var(--rose); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.hmap .sm-route { fill: none; stroke: var(--ink); stroke-opacity: .12; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.sm-card { position: absolute; left: calc(57.4% + 26px); top: calc(32.6% - 34px); width: 236px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 4px; font-size: 13px; line-height: 1.4; box-shadow: var(--shadow-pop), 0 2px 6px rgba(10,10,11,.06); }
.sm-card p { margin: 0; } .sm-k { font: 500 11px var(--mono); color: var(--muted); display: flex; gap: 8px; align-items: center; }
.sm-ready { background: var(--rose-tint); color: var(--rose-deep); font-weight: 700; border-radius: 5px; padding: 2px 6px; letter-spacing: .04em; }
.sm-next { font-size: 12px; color: var(--muted); }
.sm-card::after { content: ""; position: absolute; left: -6px; top: 29px; width: 10px; height: 10px; background: var(--white); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }
.sm-legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); }
.sm-legend li { display: flex; align-items: center; gap: 7px; } .sm-legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.sm-legend .k-hot { background: var(--rose); } .sm-legend .k-grp { background: var(--ink); } .sm-legend .k-terr { border-radius: 3px; background: var(--rk-accent-tint); border: 1.5px solid var(--rose-deep); }
.sm-legend .k-route { width: 18px; height: 7px; border-radius: 4px; background: rgba(10,10,11,.14); }
.sm-note { margin-top: 6px; font: 500 11px var(--mono); color: var(--subtle); } .sm-note a { color: inherit; }
@container (max-width: 520px) { .sm-card { position: static; width: auto; margin-top: 10px; } .sm-card::after { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .map-stage.in .hmap .sm-hot .rip { animation: sm-ripple .6s ease-out calc(var(--i-d, 0s) + .45s) 1 both; } .map-stage.in .hmap .sm-hot .rip.b { animation-delay: calc(var(--i-d, 0s) + 1.05s); }
  @keyframes sm-ripple { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(2.6); opacity: 0; } }
  html.motion .map-stage:not(.in) .drop { opacity: 0; transform: translateY(-14px); }
  html.motion .map-stage .drop { transition: opacity .4s var(--rk-ease) var(--i-d, 0s), transform .4s var(--rk-ease) var(--i-d, 0s); }
  html.motion .map-stage .sm-route { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
  html.motion .map-stage.in .sm-route { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset .6s var(--rk-ease) 1.5s, opacity .4s var(--rk-ease) 1.5s; }
  html.motion [data-reveal]:not(.in):not(.map-stage):not(.slip-stage) { opacity: 0; transform: translateY(14px); }
  html.motion [data-reveal] { transition: opacity var(--rk-dur-reveal) var(--rk-ease), transform var(--rk-dur-reveal) var(--rk-ease); }
}
.hero-visual { margin-top: 24px; }
.tour-cta { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.tour-cta .for { font: 500 12.5px var(--mono); color: var(--muted); }
.tour-cta .btn[aria-pressed="true"] { background: var(--white); color: var(--ink); border-color: var(--ink); }
.hero-visual .browser { box-shadow: var(--shadow-hero); }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 64px 0 120px; font-size: 14px; position: relative; }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--rk-accent); opacity: .55; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr)); gap: 28px; }
.foot-brand .logo { height: 20px; width: auto; display: block; }
.foot-brand p { color: var(--muted); margin-top: 12px; max-width: 24ch; }
.foot nav { display: grid; gap: 9px; align-content: start; } .foot nav h2 { font: 600 14px var(--f); letter-spacing: -0.01em; color: var(--ink); margin: 0 0 4px; }
.foot nav a { text-decoration: none; color: var(--muted); } .foot nav a:hover { color: var(--ink); }
.foot-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--subtle); margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12.5px; }
.foot-base p { margin: 0; } .foot-base a { color: var(--subtle); }

/* Phone bottom bar, consent, exit offer */
.mbar { display: none; }
.cookie { position: fixed; left: 16px; bottom: 16px; z-index: 60; max-width: 420px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-card); padding: 16px 18px; font-size: 14px; animation: rise 450ms var(--rk-ease) both; }
.cookie[hidden] { display: none; }
.cookie p { margin: 0; color: var(--ink2); } .cookie .cta-row { margin: 12px 0 0; }
.cookie .btn.small:not(.ghost) { background: var(--ink); }
.exit { border: 1px solid var(--line); border-radius: 16px; padding: 32px 28px 28px; max-width: 440px; box-shadow: var(--shadow-hero); background: var(--white); color: var(--ink); }
.exit[open] { animation: rise 350ms var(--rk-ease); }
.exit::backdrop { background: rgba(10,10,11,.4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.exit h2 { font-size: 26px; letter-spacing: -0.035em; } .exit p { color: var(--muted); }
.exit .x { position: absolute; right: 10px; top: 8px; background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); width: 40px; height: 40px; }

/* ---------- Brand-kit motion (readyknock-motion.css). The .js class is set by v2.js. ---------- */
.js .rk-reveal:not(.in) { opacity: 0; transform: translateY(14px); }
.rk-reveal { transition: opacity var(--rk-dur-reveal) var(--rk-ease), transform var(--rk-dur-reveal) var(--rk-ease); transition-delay: calc(min(var(--rk-i, 0), 6) * var(--rk-stagger)); }
.rk-ring .val { transition: stroke-dashoffset 900ms var(--rk-ease); }
.rk-bars b { transition: width 800ms var(--rk-ease); transition-delay: calc(var(--rk-bi, 0) * 80ms + 150ms); }
.js .rk-draw:not(.in) .rk-ring .val { stroke-dashoffset: 100 !important; }
.js .rk-draw:not(.in) .rk-bars b { width: 0 !important; }
.rk-seq > * { transition: opacity 400ms var(--rk-ease), box-shadow 400ms var(--rk-ease); transition-delay: calc(var(--rk-i, 0) * 140ms); }
.js .rk-seq:not(.in) > * { opacity: .35; }
.rk-seq.in > .rk-hot { box-shadow: inset 2px 0 0 var(--rose); }
.rk-arrive { animation: rk-arrive 700ms var(--rk-ease) both; } @keyframes rk-arrive { from { opacity: 0; transform: translateY(-10px); } }
.rk-bump { display: inline-block; animation: rk-bump 600ms var(--rk-ease); } @keyframes rk-bump { from { opacity: 0; transform: translateY(60%); } }
.rk-swap { display: grid; } .rk-swap > * { grid-area: 1 / 1; transition: opacity var(--rk-dur-slow) var(--rk-ease-io), transform var(--rk-dur-slow) var(--rk-ease), visibility var(--rk-dur-slow); }
.rk-swap > :not(.on) { opacity: 0; transform: translateY(6px); pointer-events: none; visibility: hidden; }
@media (hover: hover) {
  .rk-lift { transition: transform var(--rk-dur) var(--rk-ease), box-shadow var(--rk-dur) var(--rk-ease), border-color var(--rk-dur); }
  .rk-lift:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(10,10,11,.04), 0 12px 32px -12px rgba(10,10,11,.16); border-color: #D4D4D8; }
  .plan.rec.rk-lift:hover { box-shadow: inset 0 2px 0 var(--ink), 0 1px 2px rgba(10,10,11,.04), 0 12px 32px -12px rgba(10,10,11,.16); }
  .rk-arrow-link svg, .more svg { transition: transform var(--rk-dur) var(--rk-ease); } .rk-arrow-link:hover svg, .more:hover svg, .announce:hover svg { transform: translateX(3px); }
  .announce svg { transition: transform var(--rk-dur) var(--rk-ease); }
  .gcard, .rate .tier { transition: transform var(--rk-dur) var(--rk-ease), box-shadow var(--rk-dur) var(--rk-ease), border-color var(--rk-dur); }
  .gcard:hover, .rate .tier:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -12px rgba(10,10,11,.16); border-color: #D4D4D8; }
}
.rk-glow::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity var(--rk-dur);
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(10,10,11,.32), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@media (hover: hover) { .rk-glow:hover::before { opacity: 1; } }
.rk-map .dot, .rk-map .pulse { transform-box: fill-box; transform-origin: center; }
.rk-map.in .dot { animation: rk-dot 600ms var(--rk-ease) both; animation-delay: calc(var(--rk-i, 0) * 18ms); }
.rk-map .pulse { opacity: 0; } .rk-map.in .pulse { animation: rk-pulse 2.4s ease-out 1.4s 4; }
@keyframes rk-dot { from { opacity: 0; transform: scale(.2); } } @keyframes rk-pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(4.5); } }
.rk-live-dot { animation: rk-breathe 2.4s ease-in-out infinite; } @keyframes rk-breathe { 50% { opacity: .35; } }
/* Nav hides on scroll down and comes back on scroll up (every page); always shown at the top, or while it has focus / the menu is open. */
.rk-nav { transition: border-color var(--rk-dur), transform 220ms var(--rk-ease); will-change: transform; } .rk-nav:not(.scrolled) { border-bottom-color: transparent !important; }
.rk-nav.rk-nav-hide { transform: translateY(-100%); }
.rk-glint { transform-box: fill-box; transform-origin: center; animation: rk-knock 2.8s ease-out 1; }
@keyframes rk-knock { 0% { transform: scale(.7); opacity: .45; } 8% { transform: scale(1); opacity: .65; } 16% { transform: scale(.8); opacity: .5; }
  26% { transform: scale(1.15); opacity: .82; } 34% { transform: scale(.9); opacity: .7; } 46% { transform: scale(1.35); opacity: 1; } 60%, 100% { transform: scale(1); opacity: 1; } }
/* Smooth page transitions between site pages (same-origin, supporting browsers only) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: var(--rk-ease-io); }

/* ---------- Final look (brand kit C, Nov 11 2026): accent word, ticker, header band, rhythm, compare, legal, trades ---------- */
/* ONE accent word per headline: solid emerald-deep text + an underline that draws in once (v2.js adds .in when it is on screen) */
.rk-hl { position: relative; color: var(--rk-grad-text); padding-bottom: .04em; }
.rk-hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.02em; height: max(3px, .07em); border-radius: 3px; background: var(--rk-grad);
  transform: scaleX(0); transform-origin: left; transition: transform 1s var(--rk-ease) .35s; }
.rk-hl.in::after, html:not(.js) .rk-hl::after { transform: scaleX(1); }
.s-dark .rk-hl, .rk-cta-band .rk-hl { color: var(--rk-grad-text-dark); } .s-dark .rk-hl::after { background: var(--rk-grad-text-dark); }

/* "Live public signals" ticker (real data, rendered on the server; hidden entirely under 3 items) */
.ticker { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 760px; min-width: 0; margin: 26px auto 0; padding: 6px 6px 6px 8px; border: 1px solid var(--rk-accent-line); border-radius: 999px; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); text-align: left; }
.tk-lab { flex: none; font: 500 10.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--rk-accent-strong); background: var(--rk-accent-tint); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.tk-win { overflow: hidden; flex: 1; min-width: 0; border-radius: 99px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.tk-win:focus-visible { outline-offset: 2px; }
.tk-track { display: flex; width: max-content; }
.motion .tk-track { animation: tk var(--tk-dur, 60s) linear infinite; } .ticker:hover .tk-track, .tk-win:focus .tk-track, .hero.off .tk-track { animation-play-state: paused; }
.tk-list { display: flex; list-style: none; margin: 0; padding: 0; }
.tk { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; color: var(--ink2); padding: 0 18px; border-right: 1px solid var(--rk-tint-line); }
.tk .ic { width: 14px; height: 14px; color: var(--rk-accent-text); } .tk b { font-weight: 600; color: var(--ink); } .tk em, .tk time { font-style: normal; color: var(--muted); font-family: var(--mono); font-size: 11.5px; }
@keyframes tk { to { transform: translateX(-50%); } }
html:not(.motion) .tk-dup { display: none; } html:not(.motion) .tk-win { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }

/* Inner-page header band: a lighter version of the home hero (aurora, faint street grid on canvas, pings every 3-4 s) */
.rk-pagehead { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: 28px 0 72px; background: var(--white); }
.rk-pagehead .rk-aurora { position: absolute; inset: 0; z-index: -2; pointer-events: none; -webkit-mask-image: linear-gradient(#000 50%, transparent); mask-image: linear-gradient(#000 50%, transparent); }
.rk-pagehead .rk-aurora i { position: absolute; border-radius: 50%; filter: blur(60px); }
.rk-pagehead .rk-aurora i:nth-child(1) { left: 2%; top: -90px; width: 560px; height: 420px; background: radial-gradient(closest-side, var(--rk-aurora-3), transparent); animation: rk-drift-a 20s ease-in-out infinite alternate; }
.rk-pagehead .rk-aurora i:nth-child(2) { right: 0; top: -70px; width: 560px; height: 420px; background: radial-gradient(closest-side, var(--rk-aurora-2), transparent); animation: rk-drift-b 24s ease-in-out infinite alternate; }
.rk-pagehead .rk-aurora i:nth-child(3) { left: 38%; top: 20px; width: 420px; height: 320px; background: radial-gradient(closest-side, var(--rk-aurora-4), transparent); animation: rk-drift-b 22s ease-in-out infinite alternate-reverse; }
@keyframes rk-drift-a { to { transform: translate(70px, 30px) scale(1.08); } } @keyframes rk-drift-b { to { transform: translate(-80px, 20px) scale(.94); } }
.rk-pagehead canvas.rk-streets { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .8s var(--rk-ease);
  -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.rk-pagehead canvas.rk-streets.on { opacity: 1; }
.rk-pagehead .crumbs { padding: 0 var(--gut) 40px; text-align: left; }
.rk-pagehead > .rk-inner { position: relative; max-width: 780px; margin: 0 auto; padding-inline: var(--gut); }
.rk-pagehead > .rk-inner::before { content: ""; position: absolute; inset: -30px -40px; z-index: -1; background: radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,.35) 65%, transparent); }
.rk-pagehead .eyebrow { justify-content: center; }
.rk-pagehead h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.04; letter-spacing: -0.045em; font-weight: 640; margin: 0 auto; max-width: 18ch; }
.rk-pagehead .lede { color: #4A4D54; max-width: 52ch; margin: 18px auto 0; }
.rk-pagehead .cta-row { justify-content: center; } .rk-pagehead .nextlink { margin-top: 20px; }
.rk-pagehead .nocredits, .rk-pagehead .trialline, .rk-pagehead .ph-note { margin: 18px auto 0; max-width: 62ch; color: var(--ink2); font-size: 15.5px; }
.rk-pagehead .trialline { color: var(--muted); }
.rk-pagehead .draft { margin-top: 18px; } .rk-pagehead .meta { font: 500 12.5px var(--mono); color: var(--subtle); margin: 14px 0 0; }
.rk-pagehead.nf .eyebrow { font-size: 13px; }
/* quiet variant (legal pages): aurora only, no grid, no accent word, left-aligned */
.rk-pagehead.quiet { text-align: left; padding-bottom: 44px; } .rk-pagehead.quiet > .rk-inner { max-width: calc(1000px + 2 * var(--gut)); }
.rk-pagehead.quiet .rk-aurora i { opacity: .6; } .rk-pagehead.quiet .eyebrow { justify-content: flex-start; }
.rk-pagehead.quiet h1 { font-size: clamp(34px, 4.5vw, 48px); max-width: none; } .rk-pagehead.quiet .lede { margin-left: 0; font-size: 16.5px; }
.rk-pagehead.quiet > .rk-inner::before { display: none; }
.rk-pagehead + * { border-top: 0 !important; }
.rk-pagehead + .content { padding-top: 32px; }
.rk-pagehead + .how-steps, .rk-pagehead + .rate, .rk-pagehead + .hero-visual, .rk-pagehead + .cards, .rk-pagehead + .status-body { margin-top: 8px; }
.how-steps { border-top: 1px solid var(--line); }

/* Section rhythm on inner pages: white, tint, white; at most one dark band; end with the CTA band */
main > section.rk-sec { padding: 96px 0; border-top: 0; margin-top: 0; }
.rk-sec.tint { background: var(--rk-tint); box-shadow: inset 0 1px 0 var(--rk-tint-line), inset 0 -1px 0 var(--rk-tint-line); }
main > section.rk-sec + .content { padding-top: 72px; }
.content + section.rk-sec { margin-top: 72px !important; }
.rk-sec .faq { border-top: 1px solid var(--rk-tint-line); margin-top: 20px; } .rk-sec.tint details { border-bottom-color: var(--rk-tint-line); }
.rk-sec h2 { font-size: clamp(30px, 3.6vw, 44px); }
.related-after .related { margin-top: 0; padding-top: 48px; border-top: 0; }
.rules2 ul { padding-left: 1.2em; } .rules2 li::marker { color: var(--rk-accent-text); }
.status-body h2 { font-size: clamp(24px, 2.8vw, 32px); margin-top: 32px; }
.cta-row.center { justify-content: center; }
.rk-glowsec { position: relative; isolation: isolate; overflow: hidden; }
.rk-glowsec::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -120px; width: 900px; height: 520px; transform: translateX(-50%); pointer-events: none; filter: blur(40px);
  background: radial-gradient(closest-side, var(--rk-aurora-4), transparent), radial-gradient(40% 60% at 20% 50%, var(--rk-aurora-3), transparent); opacity: .7; }

/* Compare table: the ReadyKnock column header uses the band gradient; its cells are tinted */
.rk-compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white); font-size: 14.5px; }
.table-scroll .rk-compare { border: 0; }
.rk-compare th, .rk-compare td { padding: 13px 16px; border-bottom: 1px solid var(--line2); text-align: left; vertical-align: top; } .rk-compare tr:last-child > * { border-bottom: 0; }
.rk-compare thead th { font: 500 11.5px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--alt); }
.rk-compare tbody th { font-weight: 600; color: var(--ink); width: 30%; }
.rk-compare td.us { background: var(--rk-tint-soft); color: var(--rk-accent-strong); font-weight: 550; } .rk-compare thead th.us { background: var(--rk-grad-band); color: #fff; }
.rk-compare.two td.us { font-weight: 450; color: var(--ink2); } .rk-compare td.them { color: var(--muted); }
.rk-sec .table-scroll { margin-top: 28px; background: var(--white); border-color: var(--rk-tint-line); }
.fnote2 { font: 500 11.5px var(--mono); color: var(--muted); margin: 12px 0 0; }
.c-sec .table-scroll { margin-top: 16px; }

/* Legal pages: sticky table of contents with an accent bar on the section in view */
.rk-legal { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; max-width: calc(1000px + 2 * var(--gut)); margin: 0 auto; }
.rk-toc { position: sticky; top: 88px; align-self: start; display: grid; gap: 1px; font-size: 13.5px; max-height: calc(100vh - 110px); overflow-y: auto; padding: 4px 0 12px; }
.rk-toc .lbl { margin: 0 0 8px 12px; }
.rk-toc a { padding: 5px 10px; border-left: 2px solid var(--line); color: var(--muted); text-decoration: none; line-height: 1.35; }
.rk-toc a:hover { color: var(--ink); border-left-color: var(--rk-accent-line); } .rk-toc a[aria-current="true"] { border-left-color: var(--rk-accent-text); color: var(--ink); font-weight: 550; }
.rk-legal .legal { padding-bottom: 0; } .rk-legal .legal > :first-child { margin-top: 0; } .rk-legal .content { padding-top: 0; }
.rk-legal .c-sec:first-child { margin-top: 0; } .rk-legal .c-sec h2 { scroll-margin-top: 96px; }
.rk-legal .dpa dt { scroll-margin-top: 96px; } .rk-legal .dpa dt:first-child { margin-top: 0; }
.rk-pagehead.quiet .lede a { color: var(--rk-accent-text); text-decoration-color: var(--rk-accent-line); }

/* Trade demos (home "Pick your trade" + industry "See it for your trade"). Example data, labeled on every card. */
.rk-ex { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; background: var(--white); white-space: nowrap; }
.rk-trades { margin-top: 8px; }
.rk-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 32px 0 32px; }
.rk-chip-btn { border: 1px solid var(--line); background: var(--white); color: var(--ink2); border-radius: 999px; padding: 0 16px; height: 40px; font: 550 14px var(--f); white-space: nowrap; flex: none; cursor: pointer; transition: border-color .2s, box-shadow .2s, color .2s, background .2s; }
.rk-chip-btn:hover { border-color: var(--rk-accent); color: var(--ink); }
.rk-chip-btn[aria-selected="true"] { background: var(--rk-grad-band); border-color: transparent; color: #fff; box-shadow: 0 8px 20px -10px var(--rk-glow); }
.rk-tr-panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; max-width: 1060px; margin: 0 auto; text-align: left; }
.rk-tr-panel[hidden], .rk-view[hidden] { display: none; }
.rk-tr-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 0 0 1px var(--rk-accent-line), 0 30px 60px -28px var(--rk-glow); overflow: hidden; font-size: 14px; }
.rk-tr-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line2); background: var(--alt); font: 500 11px var(--mono); color: var(--muted); }
.rk-tr-top i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--live); margin-right: 6px; }
.rk-tr-lead { display: flex; gap: 12px; align-items: center; padding: 16px 16px 6px; }
.rk-tr-lead b { display: block; font-size: 16px; letter-spacing: -.01em; } .rk-tr-lead small { color: var(--muted); font-size: 13px; }
.rk-tr-why { padding: 6px 16px 16px; } .rk-tr-why .lbl { margin: 8px 0 8px; }
.rk-tr-why ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .rk-tr-why li { display: flex; gap: 8px; font-size: 14.5px; color: var(--ink2); }
.rk-tr-why li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--line3); margin-top: 7px; } .rk-tr-why li:first-child { color: var(--ink); font-weight: 500; } .rk-tr-why li:first-child::before { background: var(--rk-accent); box-shadow: 0 0 0 4px var(--rk-accent-tint); }
.rk-tr-act { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--line2); }
.rk-tr-act span { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 7px; font: 600 13px var(--f); border: 1px solid var(--line); }
.rk-tr-act span.pri { background: var(--ink); color: #fff; border-color: var(--ink); } .rk-tr-act span.pri::after { content: "→"; color: var(--rk-accent-soft); margin-left: 6px; }
.rk-tr-side { display: grid; gap: 14px; }
.rk-tr-box { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 16px; } .rk-tr-box .lbl { margin: 0 0 8px; }
.rk-sig { display: flex; gap: 10px; align-items: center; padding: 7px 0; } .rk-sig + .rk-sig { border-top: 1px solid var(--line2); }
.sico2 { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--rk-accent-tint); color: var(--rk-accent-text); }
.rk-sig b, .frow b { display: block; font-size: 14px; font-weight: 600; } .rk-sig small, .frow small { color: var(--muted); font-size: 12.5px; }
.rk-post { position: relative; border-radius: 12px; padding: 16px 16px 16px 20px; background: var(--rk-tint-soft); border: 1px solid var(--rk-accent-line); }
.rk-post::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--rk-grad); }
.rk-post em { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--rk-accent-strong); font-style: normal; }
.rk-post q { display: block; margin-top: 6px; font-size: 16px; line-height: 1.45; font-weight: 550; color: var(--ink); }
.rk-worth { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 14px; color: var(--muted); padding: 2px 4px; }
.rk-worth b { font: 600 13.5px var(--mono); color: var(--rk-accent-strong); white-space: nowrap; }
.motion .rk-anim > * { animation: rk-rise .55s var(--rk-ease) both; } .motion .rk-anim > :nth-child(2) { animation-delay: .08s; } .motion .rk-anim .rk-tr-side > :nth-child(2) { animation-delay: .16s; } .motion .rk-anim .rk-tr-side > :nth-child(3) { animation-delay: .24s; }
@keyframes rk-rise { from { opacity: 0; transform: translateY(12px); } }
#trades .more { display: flex; width: max-content; margin-inline: auto; }
/* industry demo */
.rk-demo { max-width: 1060px; margin: 40px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 28px; align-items: start; text-align: left; }
.rk-steps { display: grid; gap: 8px; }
.rk-step { text-align: left; border: 1px solid var(--line); background: var(--white); border-radius: 12px; padding: 14px 16px 14px 18px; cursor: pointer; position: relative; overflow: hidden; font: inherit; color: inherit; transition: border-color .2s, box-shadow .2s; }
.rk-step b { display: block; font-size: 15.5px; } .rk-step small { color: var(--muted); font-size: 13.5px; }
.rk-step i { font: 600 12px var(--mono); font-style: normal; color: var(--rk-accent-text); display: block; margin-bottom: 2px; }
.rk-step[aria-selected="true"] { border-color: var(--rk-accent); box-shadow: 0 12px 30px -16px var(--rk-glow); }
.rk-step[aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rk-grad); }
.rk-step .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--rk-grad); transform: scaleX(0); transform-origin: left; }
.rk-step[aria-selected="true"] .bar.run { animation: rk-bar var(--rk-step-ms, 3600ms) linear forwards; } @keyframes rk-bar { to { transform: scaleX(1); } }
.rk-stage { min-height: 300px; }
.frow { display: flex; gap: 10px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line2); } .frow:last-child { border-bottom: 0; }
.frow.hot { background: var(--rk-tint-soft); box-shadow: inset 2px 0 0 var(--rk-accent); }
.rk-tr-done { display: grid; gap: 12px; }
.rk-sent { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--green); background: var(--green-tint); border-radius: 10px; padding: 10px 12px; } .rk-sent .rk-ex { margin-left: auto; }
/* ROI calculator: never pre-fills close rate or job value */
.roi-h { margin: 0 0 4px; font-weight: 600; font-size: 17px; letter-spacing: -.015em; }
.rk-sec .cta-row.center { margin-top: 28px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .bento { grid-template-columns: repeat(2, 1fr); } .plans { grid-template-columns: repeat(2, 1fr); }
  .quiz { grid-template-columns: 1fr 1fr; } .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; }
}

/* ===== Kit "useful touches" (motion/readyknock-touches.css), adapted: ROI slider, mega-menu previews, phone sticky CTA. Colors from the palette block. ===== */
.rk-roislide { max-width: 1060px; margin: 28px auto 0; border: 1px solid var(--line); border-radius: 16px; background: var(--white); padding: 20px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.rk-rs-row { display: grid; gap: 8px; padding: 10px 0; } .rk-rs-row + .rk-rs-row { border-top: 1px solid var(--line2); }
.rk-rs-row .lab { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 550; }
.rk-rs-row output { font: 600 15px var(--mono); color: var(--ink); } .rk-rs-row output.unset { color: var(--subtle); font-weight: 500; font-size: 13px; }
.rk-rs-row input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; --p: 0%; margin: 0; }
.rk-rs-row input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--rk-emerald-deep) var(--p), #EDEDEF var(--p)); }
.rk-rs-row input[type=range]::-moz-range-track { height: 6px; border-radius: 6px; background: #EDEDEF; } .rk-rs-row input[type=range]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--rk-emerald-deep); }
.rk-rs-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff; border: 2px solid var(--rk-emerald-deep); box-shadow: 0 2px 6px rgba(10,10,11,.2); transition: box-shadow .15s; }
.rk-rs-row input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--rk-emerald-deep); }
.rk-rs-row input[type=range]:focus-visible { outline: none; } .rk-rs-row input[type=range]:focus-visible::-webkit-slider-thumb, .rk-rs-row input[type=range]:active::-webkit-slider-thumb { box-shadow: 0 0 0 6px var(--rk-glow); }
.rk-rs-row input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 6px var(--rk-glow); }
.rk-rs-row input[type=range].unset::-webkit-slider-thumb { border-style: dashed; } .rk-rs-row input[type=range].unset::-moz-range-thumb { border-style: dashed; }
.rk-rs-row small { font-size: 12px; color: var(--muted); }
.rk-rs-out { border-radius: 14px; background: var(--rk-ink-green); color: #fff; padding: 22px; display: grid; gap: 4px; min-height: 150px; align-content: center; }
.rk-rs-out span { font-size: 13px; color: #B4B6BD; } .rk-rs-out b { font-size: clamp(32px, 4vw, 44px); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.rk-rs-out em { font-style: normal; font-size: 13px; color: var(--rk-accent-soft); font-family: var(--mono); }
.rk-rs-out .fine { font-size: 11.5px; color: #A9ACB3; margin: 6px 0 0; }

.rk-mega-wrap { position: relative; display: flex; align-items: center; }
.rk-mega-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; font: 400 14.5px var(--f); letter-spacing: -0.006em; color: var(--ink2); padding: 0; cursor: pointer; }
.rk-mega-btn::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; opacity: .6; }
.rk-mega-btn:hover, .rk-mega-btn[aria-expanded="true"] { color: var(--ink); } .rk-mega-btn[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.rk-mega { position: absolute; top: calc(100% + 22px); left: -16px; width: min(720px, 92vw); background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 30px 60px -20px rgba(10,10,11,.25), 0 0 0 1px rgba(10,10,11,.02); padding: 10px; z-index: 50;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top left; pointer-events: none; visibility: hidden; transition: opacity .16s, transform .2s var(--rk-ease), visibility 0s .2s; }
.rk-mega.r { left: auto; right: -16px; transform-origin: top right; }
.rk-mega.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .16s, transform .2s var(--rk-ease); }
.nav .rk-mega a { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 12px; text-decoration: none; color: var(--ink); font-size: 14px; }
.nav .rk-mega a:hover, .nav .rk-mega a:focus-visible { background: var(--alt); outline: none; } .nav .rk-mega a:focus-visible { box-shadow: inset 0 0 0 2px var(--rk-emerald-deep); }
.rk-mega b { display: block; font-size: 14px; font-weight: 600; } .rk-mega small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.rk-prev { height: 70px; border-radius: 9px; border: 1px solid var(--line); background: #fff; position: relative; overflow: hidden; padding: 7px; display: grid; gap: 4px; align-content: start; }
.rk-prev i { display: block; height: 6px; border-radius: 3px; background: #EDEDEF; } .rk-prev i.a { background: var(--rk-emerald); width: 40%; } .rk-prev i.s { width: 70%; } .rk-prev i.t { width: 55%; }
.rk-prev .dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--rk-emerald); box-shadow: 0 0 0 4px var(--rk-glow); }
.rk-prev .dot.d1 { left: 30%; top: 40%; } .rk-prev .dot.d2 { left: 64%; top: 62%; } .rk-prev .dot.d3 { left: 78%; top: 24%; }
.rk-prev .ring { position: absolute; right: 7px; top: 7px; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--rk-emerald); border-left-color: #EDEDEF; }
.rk-prev.map { background-image: linear-gradient(rgba(10,10,11,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(10,10,11,.06) 1px, transparent 1px); background-size: 14px 14px; }
.rk-prev.card { background: var(--rk-emerald-tint); border-color: var(--rk-emerald-line); }
.rk-mega .ex { grid-column: 1 / -1; font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); padding: 6px 8px 2px; margin: 0; }
.rk-mega.ind { width: min(560px, 92vw); } .nav .rk-mega.ind a { grid-template-columns: minmax(0, 1fr); padding: 9px 10px; }

.mbar { transition: transform 240ms var(--rk-ease); }

@media (max-width: 860px) {
  .rk-tr-panel, .rk-demo { grid-template-columns: minmax(0, 1fr); } .rk-roislide { grid-template-columns: minmax(0, 1fr); }
  .rk-chips { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; margin: 24px calc(-1 * var(--gut)) 22px; padding: 2px var(--gut) 6px; scrollbar-width: none; }
  .rk-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rk-step small { display: none; } .rk-step { padding: 10px 10px 10px 12px; } .rk-step b { font-size: 13.5px; } .rk-stage { min-height: 0; }
  .rk-legal { grid-template-columns: minmax(0, 1fr); gap: 20px; } .rk-toc { position: static; display: flex; overflow-x: auto; max-height: none; gap: 0; padding: 0 0 4px; } .rk-toc .lbl { display: none; }
  .rk-toc a { border-left: 0; border-bottom: 2px solid var(--line); white-space: nowrap; } .rk-toc a[aria-current="true"] { border-bottom-color: var(--rk-accent-text); }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 64px; background: var(--white); border-bottom: 1px solid var(--line); flex-direction: column; gap: 0; padding: 6px var(--gut) 18px; box-shadow: var(--shadow-pop); }
  .nav.open { display: flex; animation: rise 250ms var(--rk-ease); } .nav a { padding: 13px 0; font-size: 16px; font-weight: 550; color: var(--ink); border-bottom: 1px solid var(--line2); }
  .menu { display: block; } .top .start { margin-left: auto; }
  .mapw { grid-template-columns: 1fr; } .mapc { border-right: 0; border-bottom: 1px solid var(--line); padding: 14px; } .mtip { position: static; margin-top: 8px; }
  .us3 { grid-template-columns: 1fr; } .us3 .alist { grid-template-columns: 1fr; } .mapw.us .mapc { padding: 14px; } .tops li { grid-template-columns: 84px 1fr 50px; } .mbig b { font-size: 34px; } .ustip { white-space: normal; width: 220px; }
  .walk { grid-template-columns: 1fr; gap: 0; } .wpin { position: static; margin-top: 8px; } .wstack { display: grid; gap: 14px; } .wstack > * { grid-area: auto; opacity: 1 !important; transform: none !important; visibility: visible !important; pointer-events: auto; } .wstep { min-height: 0; opacity: 1; padding: 22px 0; }
  .stg { grid-template-columns: 1fr 1fr; } .st, .st + .st { padding: 22px 12px 18px 0; border-left: 0; border-bottom: 1px solid var(--line); } .st:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
  .faqw, .start-in, .calc-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .calc-out { position: static; }
  .trust-grid { grid-template-columns: 1fr 1fr; } .trust-grid div:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; } .trust-grid div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); }
  .rate .tiers { grid-template-columns: minmax(0, 1fr); }
  .mbar { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.92); border-top: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .mbar .btn { flex: 1; height: 48px; }
  .mbar .btn:not(.ghost) { background: var(--rk-cta-bg); color: var(--rk-cta-text); }
  .cookie { left: 12px; right: 12px; bottom: 80px; max-width: none; }
}
@media (max-width: 760px) {
  :root { --gut: 20px; --sec: 84px; }
  .top-in { height: 58px; } .nav { top: 58px; }
  .rk-pagehead { padding-bottom: 48px; } .rk-pagehead .crumbs { padding-bottom: 28px; } .rk-pagehead .rk-aurora i { width: 340px; height: 280px; }
  .mesh i:nth-child(1) { width: 420px; height: 420px; left: -30%; } .mesh i:nth-child(2) { width: 420px; height: 420px; right: -30%; } .mesh i:nth-child(3) { width: 520px; height: 420px; left: -10%; } .mesh i:nth-child(4) { width: 320px; height: 300px; left: 30%; }
  main > section.rk-sec { padding: 72px 0; } .rk-compare { font-size: 13.5px; } .rk-compare th, .rk-compare td { padding: 10px 12px; } .rk-compare tbody th { width: auto; }
  .ticker { margin-top: 18px; } .tk { font-size: 12px; padding: 0 12px; } .tk-lab { font-size: 9.5px; padding: 3px 7px; }
  .hero { padding-top: 56px; } .hero .ctas .btn { width: 100%; height: 48px; } .announce { font-size: 12.5px; }
  .stage { padding: 0 12px; margin-top: 52px; perspective: none; } .tilt, .motion .tilt { --rx: 0deg; --sc: 1; transform: none; }
  .screen { grid-template-columns: 1fr; font-size: 12.5px; } .sc-side, .sc-detail, .crumb, .sc-top .ic { display: none; } .sc-top { justify-content: space-between; } .sc-body { grid-template-columns: 1fr; } .sc-col { border-right: 0; padding: 16px 14px; }
  .kpis { grid-template-columns: 1fr 1fr; } .kpis div:nth-child(3) { border-left: 0; } .kpis div:nth-child(n+3) { border-top: 1px solid var(--line); } .lbtn { display: none; }
  .works { gap: 10px 18px; margin: 40px auto 64px; } .wk b { font-size: 14.5px; }
  .bento, .plans { grid-template-columns: 1fr; } .bc.wide { grid-column: auto; } .mini.row { grid-auto-flow: row; grid-template-columns: auto 1fr; } .mini.flagrow { grid-template-columns: 1fr; grid-auto-flow: row; }
  .tr { grid-template-columns: 1fr; } .tr > * { padding: 4px 18px; } .tr > span { padding-top: 14px; font-size: 12.5px; grid-row: 1; } .tr > b { grid-column: 1; grid-row: 2; padding-bottom: 14px; } .fh { padding: 16px 18px; font-size: 15px; }
  .seg2 button { padding: 8px 11px; font-size: 13px; }
  .top .start { display: none; } .menu { margin-left: auto; }
  .form.inline, .form .row { grid-template-columns: minmax(0, 1fr); }
  .snap-samples { grid-template-columns: 1fr; }
  .quiz { grid-template-columns: minmax(0, 1fr); } .trust-grid { grid-template-columns: minmax(0, 1fr); } .trust-grid div, .trust-grid div:nth-child(even) { padding-left: 0; border-left: 0; }
  .foot-grid { grid-template-columns: 1fr 1fr; } .btn { height: 48px; } .btn.small, .btn.sm { height: 38px; }
  .final { padding: 96px 0; } .final .ctas .btn { width: 100%; }
  .hero-visual { padding: 0 8px; }
}

/* Reduced motion: final state at once; no transitions, loops or count-ups (v2.js skips them) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rk-reveal:not(.in), .js .rk-seq:not(.in) > * { opacity: 1; transform: none; }
  .tilt, .motion .tilt { transform: none !important; }
  .rk-hl::after { transform: scaleX(1); }   .tk-dup { display: none; } .tk-win { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* Low-power devices (4 or fewer cores, or Save-Data): static aurora and grids (v2.js adds .lowpower) */
.lowpower .mesh i, .lowpower .rk-pagehead .rk-aurora i { animation: none; }
.lowpower .tk-track { animation-duration: calc(var(--tk-dur, 60s) * 1.6); }
/* touches: phone layout and reduced motion */
@media (max-width: 760px) {
  html.js .mbar:not(.on) { transform: translateY(110%); }
  .rk-mega-wrap { display: block; } .rk-mega-btn { width: 100%; justify-content: space-between; padding: 13px 0; font-size: 16px; font-weight: 550; color: var(--ink); border-bottom: 1px solid var(--line2); }
  .rk-mega { position: static; width: auto; box-shadow: none; border: 0; padding: 0 0 0 12px; grid-template-columns: 1fr; display: none; opacity: 1; transform: none; visibility: visible; }
  .rk-mega.open { display: grid; } .nav .rk-mega a { grid-template-columns: 1fr; padding: 11px 0; border-radius: 0; }
  .rk-prev, .rk-mega small, .rk-mega .ex { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mbar, .rk-mega, .rk-mega.open { transition: none; } }
main > section.rk-formsec { padding-top: 48px; padding-bottom: 56px; }
.rate .tier .pick { align-self: flex-start; width: auto; }

/* ===== Why ReadyKnock is different (home + pricing), Coming soon (pricing + home teaser), waitlist banner ===== */
.wl-banner { background: var(--rk-ink-green); color: #fff; text-align: center; font-size: 13.5px; padding: 8px 16px; }
.wl-banner p { margin: 0; } .wl-banner a { color: var(--rk-accent-soft); font-weight: 550; text-decoration-color: rgba(52,211,153,.5); }
.wl-banner a:hover { color: #fff; } .wl-banner :focus-visible { outline-color: #fff; }
.rk-soon { display: inline-flex; align-items: center; gap: 5px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--rk-emerald-ink); background: var(--rk-emerald-tint); border: 1px solid var(--rk-emerald-line); border-radius: 99px; padding: 2px 8px; white-space: nowrap; vertical-align: middle; }
.rk-soon::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--rk-emerald); }
.rk-why .sh.center { text-align: center; margin-inline: auto; } .rk-why .sh.center .eyebrow { justify-content: center; }
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.why { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow var(--rk-dur) var(--rk-ease), border-color var(--rk-dur); }
.why.wide { grid-column: span 2; }
.why h3 { margin: 0; display: flex; align-items: baseline; gap: 10px; } .why h3 i { font: 500 11.5px var(--mono); font-style: normal; color: var(--rk-accent-text); }
.why > p { margin: 0; color: var(--muted); font-size: 15px; }
@media (hover: hover) { .why:hover { border-color: var(--rk-emerald-line); box-shadow: var(--rk-ring-hover, 0 0 0 1px var(--rk-emerald-line), 0 12px 32px -12px rgba(16,185,129,.35)); } }
.why-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.why-vs > div { border-radius: 12px; padding: 16px; } .why-vs p { margin: 0; } .why-vs .lbl { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.why-vs .them { background: var(--sunk); color: var(--muted); } .why-vs .them .lbl { color: var(--subtle); }
.why-vs .us { background: var(--rk-ink-green); color: #fff; } .why-vs .us .lbl { color: var(--rk-accent-soft); }
.why-vs p:not(.lbl) { font-size: 16.5px; font-weight: 550; letter-spacing: -.01em; line-height: 1.35; }
.why-lock { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; } .why-lock span { font: 500 12px var(--mono); padding: 4px 9px; border-radius: 99px; border: 1px dashed #D4D4D8; color: var(--subtle); text-decoration: line-through; }
.why-lock span.on { text-decoration: none; border: 1px solid var(--rk-emerald-line); background: var(--rk-emerald-tint); color: var(--rk-emerald-ink); font-weight: 600; }
.why-lead, .why-proof { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--alt); position: relative; margin-top: auto; }
.why-lead > .rk-ex, .wp-top { position: absolute; top: 10px; right: 10px; } .wp-top { display: flex; gap: 6px; }
.wl-top { display: flex; gap: 10px; align-items: center; margin-top: 24px; } .wl-top b { display: block; font-size: 14px; } .wl-top small { color: var(--muted); font-size: 12px; }
.wl-why { margin: 10px 0 0; font-size: 13px; color: var(--rk-emerald-ink); background: var(--rk-emerald-tint); border-radius: 8px; padding: 6px 9px; }
.wp-l { margin: 26px 0 0; font-size: 12.5px; color: var(--muted); } .wp-n { margin: 0; font-size: 32px; font-weight: 600; letter-spacing: -.04em; color: var(--rk-accent-text); } .wp-n small { font-size: 13px; color: var(--muted); letter-spacing: 0; font-weight: 450; }
.wp-bars { display: flex; align-items: flex-end; gap: 6px; height: 34px; margin-top: 6px; } .wp-bars i { flex: 1; background: var(--rk-emerald-line); border-radius: 3px 3px 0 0; }
.wp-bars i:nth-child(1) { height: 30%; } .wp-bars i:nth-child(2) { height: 45%; } .wp-bars i:nth-child(3) { height: 40%; } .wp-bars i:nth-child(4) { height: 65%; } .wp-bars i:nth-child(5) { height: 85%; background: var(--rk-emerald); }
.why-auto { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 6px; }
.why-auto li { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; font-weight: 550; padding: 7px 10px; border: 1px solid var(--line2); border-radius: 9px; background: var(--white); }
.why-auto .live { font: 500 10.5px var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--rk-ink-green); border-radius: 99px; padding: 2px 8px; }
.cs-h { margin: 36px 0 14px; font-size: 15px; font-weight: 600; } .rk-cs .sh.center { text-align: center; margin-inline: auto; } .rk-cs .sh.center .eyebrow { justify-content: center; }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; } .cs-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-card { background: var(--white); border: 1px solid var(--rk-emerald-line); border-radius: 14px; padding: 18px; }
.cs-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .cs-top b { font-size: 15.5px; }
.cs-price { margin: 8px 0 6px; font: 600 14px var(--mono); color: var(--rk-accent-text); } .cs-card p:last-child { margin: 0; font-size: 14px; color: var(--muted); }
.cs-note { margin: 14px 0 0; font-size: 13.5px; color: var(--ink2); }
.cs-biz { margin-top: 36px; border-radius: 16px; background: var(--rk-ink-green); color: #fff; padding: 26px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; align-items: center; }
.cs-biz .eyebrow { color: var(--rk-accent-soft); } .cs-biz .eyebrow::before { background: var(--rk-accent-soft); } .cs-biz h3 { color: #fff; font-size: 22px; margin: 0 0 8px; } .cs-biz p { margin: 0; color: #C9CCD2; font-size: 14.5px; }
.cs-biz ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .cs-biz li { font-size: 13.5px; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; padding: 5px 12px; color: #EDEDEF; }
.cs-plan { margin: 24px 0 0; display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 15px; }
.cs-teaser { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 28px; } .cs-teaser .rk-arrow-link { margin-left: 4px; }
@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr 1fr; } .cs-grid.three { grid-template-columns: minmax(0, 1fr); } .cs-biz { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .why-grid { grid-template-columns: minmax(0, 1fr); } .why.wide { grid-column: auto; } .why-vs { grid-template-columns: minmax(0, 1fr); } }
.why-grid > .why.wide:last-child { grid-column: 1 / -1; }
.why-auto li::before { display: none; }

/* Pricing v2: plan family switcher + bundle families */
.families { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 8px auto 0; padding: 0 20px; }
.families a { font-size: 14px; font-weight: 550; color: var(--ink); text-decoration: none; border: 1px solid var(--line); background: var(--white); border-radius: 99px; padding: 7px 14px; min-height: 36px; display: inline-flex; align-items: center; }
.families a:hover { border-color: var(--rk-accent); }
.rate.bundles { padding-top: 8px; }
.rate.bundles .note { margin: 0 0 18px; }
.rate .pick .soon { border: 0; padding: 0; }
.rate [id] { scroll-margin-top: 90px; }
.rate .tier.featured .pick .soon { color: #fff; }