/* Fonts are served from this site, not a third party (privacy, 2026-10-21). Inter and JetBrains Mono, SIL OFL 1.1:
   licenses in /assets/fonts/. Variable files, Latin subset, every weight in one file each. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter-latin-wght.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('/assets/fonts/jetbrains-mono-latin-wght.woff2') format('woff2'); }
/* ==========================================================================
   Design tokens. Change brand colors here; everything else derives from them.
   ========================================================================== */
:root {
  --ink: #090d11;          /* page background */
  --ink-2: #0d1318;        /* alternate section */
  --panel: #121a21;        /* cards */
  --panel-2: #172129;      /* raised */
  --panel-3: #1d2932;      /* hover / inputs */
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.12);
  --text: #e9eff2;
  --text-2: #b4c0c8;
  --muted: #7f8f9a;
  --accent: #A6FF00;       /* Kisheet Lime (docs/branding/COLOR-RESEARCH.md) */
  --accent-hi: #C4FF4D;    /* hover / links on dark */
  --accent-lo: #659E06;    /* graphics on light surfaces */
  --accent-ink: #04170b;   /* text on lime */
  --accent-glow: rgba(166, 255, 0, 0.22);
  --accent-wash: rgba(166, 255, 0, 0.08);
  --warn: #f59e0b;
  --danger: #ef4444;
  --info: #38bdf8;
  --violet: #a78bfa;
  --paper: #f5f7f9;
  --paper-ink: #0f1820;

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --max: 1240px;
  --gutter: clamp(16px, 4vw, 32px);
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--line);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; } /* in-page links and focus clear the 68px sticky header (site audit 2026-10-22, nav #9) */
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; color: var(--text-2); }
h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.12; letter-spacing: -0.025em; font-weight: 650; color: var(--text); }
h1 { font-size: clamp(2.4rem, 5.4vw, 4.25rem); letter-spacing: -0.04em; font-weight: 700; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.9rem); letter-spacing: -0.035em; }
h3 { font-size: 1.2rem; letter-spacing: -0.015em; }
h4 { font-size: 1rem; letter-spacing: -0.01em; }
ul { padding: 0; margin: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--accent-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 10px 14px; border-radius: 8px; font-weight: 600; }
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.container-wide { max-width: 1440px; }
/* One gap between sections, the same above and below each dividing line and before the footer (owner feedback
   2026-10-21, 10:29 recording): about half what it was, so the next section is always in view. */
:root { --gap: clamp(32px, 4vw, 52px); }
.section, .section-tight { padding: var(--gap) 0; position: relative; }
:is(.section, .section-tight) + :is(.section, .section-tight) { padding-top: 0; }
/* One continuous background (owner feedback 2026-10-21 #17): no bands. Sections part with space and a hairline inside
   the content width; cards and the closing call to action keep their own surface. */
.section-alt { background: none; border: 0; }
:is(.section, .section-tight) + :is(.section, .section-tight) > .container::before { content: ""; display: block; height: 1px; background: var(--line); margin-bottom: var(--gap); }
.mono { font-family: var(--mono); font-feature-settings: normal; }
.accent { color: var(--accent-hi); }
.muted { color: var(--muted); }
.center { text-align: center; }
.grad-text {
  background: linear-gradient(180deg, #ffffff 0%, #b8c6cf 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-green {
  background: linear-gradient(92deg, var(--accent), var(--accent-hi));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Section headings */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-hi); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: 0.7; }
.section-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head.center { margin-left: auto; margin-right: auto; }
.section-head.center .eyebrow::after { content: ""; width: 18px; height: 1px; background: currentColor; opacity: 0.7; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--text-2); line-height: 1.65; }

/* ==========================================================================
   Buttons, badges, chips
   ========================================================================== */
.btn {
  --h: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h); padding: 0 20px; border-radius: 10px; border: 1px solid transparent;
  font-weight: 600; font-size: 0.95rem; letter-spacing: -0.005em; white-space: nowrap;
  transition: transform 0.15s var(--ease), background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-primary {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 0 0 1px rgba(196, 255, 77, 0.4) inset, 0 10px 30px -10px var(--accent-glow);
}
.btn-primary:hover { background: var(--accent-hi); box-shadow: 0 0 0 1px rgba(255,255,255,0.3) inset, 0 12px 36px -8px rgba(166, 255, 0, 0.45); }
.btn-ghost { background: rgba(255, 255, 255, 0.04); border-color: var(--line-2); color: var(--text); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); }
.btn-link { padding: 0; height: auto; color: var(--accent-hi); font-weight: 600; }
.btn-link:hover { color: #fff; }
.btn-sm { --h: 36px; padding: 0 14px; font-size: 0.875rem; border-radius: 8px; }
.btn-lg { --h: 54px; padding: 0 26px; font-size: 1.02rem; border-radius: 12px; }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid var(--line-2); color: var(--text-2); background: rgba(255,255,255,0.03); white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-available { color: var(--accent-hi); border-color: rgba(196, 255, 77, 0.35); background: var(--accent-wash); }
.badge-planned { color: var(--info); border-color: rgba(56, 189, 248, 0.35); background: rgba(56, 189, 248, 0.08); }
.badge-concept { color: var(--violet); border-color: rgba(167, 139, 250, 0.35); background: rgba(167, 139, 250, 0.08); }
.badge-plain::before { display: none; }

.pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px;
  border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255,255,255,0.03);
  font-size: 0.85rem; color: var(--text-2); transition: border-color 0.2s, background 0.2s;
}
.pill:hover { border-color: rgba(196, 255, 77, 0.4); background: var(--accent-wash); }
.pill b { background: var(--accent); color: var(--accent-ink); font-size: 0.7rem; padding: 3px 8px; border-radius: 999px; letter-spacing: 0.04em; text-transform: uppercase; }

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(9, 13, 17, 0.72);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color 0.2s, background 0.2s;
}
.site-header.scrolled { border-bottom-color: var(--line); background: rgba(9, 13, 17, 0.88); }
.nav { display: flex; align-items: center; gap: 28px; height: 68px; }
/* Header and footer show the wordmark alone: it already opens with the drawn KI, so the KI tile
   (brand.logo) beside it would repeat it. The tile is for icon spots: favicon, app icon, avatars. */
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.02em; font-size: 1.3rem; flex: none; }
/* Header wordmark is set large; one step down on narrow laptops where the full nav still shows,
   and back up once the nav collapses into the menu button (max-width 1020px below). */
.site-header .logo { font-size: 2rem; }
@media (max-width: 1180px) {
  .site-header .logo { font-size: 1.6rem; }
  .nav { gap: 20px; }
  .site-header .nav-links a { padding-left: 9px; padding-right: 9px; }
  .site-header .nav-links a.nav-top { padding-right: 3px; }
}
@media (max-width: 1020px) { .site-header .logo { font-size: 1.85rem; } }
/* Wordmark: drawn "KI" (brand.wordmarkLead) + live caps text (brand.wordmarkTail, "SHEET").
   The SVG is exactly cap height (Inter caps = 0.73em) and its bottom edge is the baseline. */
.wordmark { display: inline-flex; align-items: baseline; }
.wordmark > span { letter-spacing: 0.05em; }
.wm-lead { flex: none; height: 0.73em; width: 0.792em; margin-right: 0.05em; }
.logo small { font-weight: 500; color: var(--muted); }
.nav-links { display: flex; gap: 4px; align-items: center; flex: 1; }
.nav-links a, .nav-links button.nav-chevron {
  white-space: nowrap;
  padding: 8px 12px; border-radius: 8px; font-size: 0.92rem; color: var(--text-2); font-weight: 500;
  background: none; border: 0; display: inline-flex; align-items: center; gap: 4px; transition: color 0.15s, background 0.15s;
}
.nav-links a:hover, .nav-links button.nav-chevron:hover, .nav-links a[aria-current] { color: var(--text); background: rgba(255,255,255,0.05); }
/* Product and Solutions: the word is a link to the overview and the chevron beside it opens the panel; the two read as
   one pill (owner video 2026-10-30). The ::before bridge keeps hover alive across the gap down to the panel. */
.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-item::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; pointer-events: none; }
.nav-item.open::before { pointer-events: auto; }
.nav-links a.nav-top { padding-right: 4px; border-radius: 8px 0 0 8px; }
.nav-links button.nav-chevron { width: 28px; height: 36px; padding: 0; justify-content: center; border-radius: 0 8px 8px 0; cursor: pointer; }
.nav-item:hover > a.nav-top, .nav-item.open > a.nav-top, .nav-item:hover > .nav-chevron, .nav-item.open > .nav-chevron, .nav-item > a[aria-current] + .nav-chevron { color: var(--text); background: rgba(255,255,255,0.05); }
.nav-chevron svg { flex: none; width: 14px; height: 14px; opacity: 0.6; transition: transform 0.2s; }
.nav-item.open .nav-chevron svg { transform: rotate(180deg); }
.mega {
  position: absolute; top: calc(100% + 10px); left: -12px; width: 560px; padding: 10px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: var(--shadow);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
/* Open only through .open, which main.js keeps in step with aria-expanded; no :focus-within, so Escape closes it (site audit 2026-10-22 #6). */
.nav-item.open .mega { opacity: 1; visibility: visible; transform: none; }
.mega a { display: flex; gap: 12px; padding: 12px; border-radius: 10px; align-items: flex-start; white-space: normal; min-width: 0; } /* the descriptions wrap inside the panel, not past its edge (owner video 2026-10-22) */
.mega a:hover { background: var(--panel-3); }
.mega .ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent-hi); flex: none; border: 1px solid rgba(196, 255, 77,0.18); }
.mega .ico svg { width: 18px; height: 18px; }
.mega strong { display: block; color: var(--text); font-size: 0.92rem; font-weight: 600; line-height: 1.3; }
.mega span { display: block; color: var(--muted); font-size: 0.82rem; line-height: 1.4; margin-top: 2px; }
/* Solutions: grouped columns, each with a small heading (site audit 2026-10-22 #8). */
.mega-groups { gap: 4px 12px; padding: 14px 10px 10px; }
.mega-col { min-width: 0; }
.mega-h { margin: 0; padding: 0 12px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.mega-col ul + .mega-h { margin-top: 10px; }
.mega-sub { margin: 4px 0 6px; padding: 0 12px; font-size: 0.82rem; line-height: 1.4; color: var(--text-2); }
.mega-trades a { padding: 9px 12px; min-height: 40px; align-items: center; color: var(--text); font-size: 0.92rem; font-weight: 500; }
.mega-trades a.mega-all { color: var(--accent-hi); font-weight: 600; }
.nav-cta { display: flex; gap: 10px; align-items: center; }
/* Sign in: a quiet text link beside the one button (owner video 2026-10-30). Off until launch.accountsAvailable is true,
   hidden on narrow laptops where the bar is tight (it is in the phone menu), and the last row of the phone menu. */
.nav-signin[data-accounts="False"] { display: none !important; }
.nav-cta .nav-signin { margin-right: 6px; padding: 8px 4px; font-size: 0.92rem; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.nav-cta .nav-signin:hover { color: var(--text); }
@media (max-width: 1180px) { .nav-cta .nav-signin { display: none; } }
.menu-toggle { display: none; background: none; border: 1px solid var(--line-2); border-radius: 9px; width: 42px; height: 42px; place-items: center; }
.menu-toggle svg { width: 20px; height: 20px; }
.mobile-nav { display: none; }

@media (max-width: 1020px) {
  .nav-links, .nav-cta .btn-ghost { display: none; }
  .nav { justify-content: space-between; }
  .menu-toggle { display: grid; }
  .mobile-nav {
    display: block; position: fixed; inset: 68px 0 0 0; background: var(--ink); z-index: 49;
    padding: 20px var(--gutter) 40px; overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  }
  body.nav-open .mobile-nav { opacity: 1; visibility: visible; transform: none; }
  body.nav-open { overflow: hidden; }
  .mobile-nav a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: 1.05rem; font-weight: 500; }
  .mobile-nav .group-label { margin-top: 22px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
  .mobile-nav .btn { width: 100%; margin-top: 24px; }
  .mobile-nav .mobile-nav-cta { margin-top: 0; margin-bottom: 8px; border-bottom: 0; }
  /* The menu's button looks like every other primary button (site audit 2026-10-22, nav #4). */
  .mobile-nav a.btn { display: flex; justify-content: center; height: 48px; padding: 0 20px; font-weight: 600; border-bottom: 0; }
  /* Product and Solutions fold away so Pricing and the company links fit one screen (nav #3). */
  .mobile-nav .mnav-trigger { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 14px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); font-size: 1.05rem; font-weight: 500; text-align: left; }
  .mnav-trigger svg { width: 18px; height: 18px; opacity: 0.7; transition: transform 0.2s; }
  .mnav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
  .mnav-sub { padding-left: 14px; border-bottom: 1px solid var(--line); }
  .mnav-sub[hidden] { display: none; }
  .mnav-sub a { font-size: 0.98rem; color: var(--text-2); padding: 12px 4px; }
  .mnav-sub a:last-child { border-bottom: 0; }
  .mnav-sub .group-label { margin-top: 14px; }
}
@media (max-width: 460px) { .nav-cta .btn-primary { display: none; } }

/* Announcement bar */
.announce { background: linear-gradient(90deg, rgba(166, 255, 0,0.12), rgba(166, 255, 0,0.03)); border-bottom: 1px solid var(--line); font-size: 0.85rem; color: var(--text-2); }
.announce .container { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 34px; text-align: center; white-space: nowrap; overflow: hidden; padding-top: 4px; padding-bottom: 4px; }
/* One line everywhere: on phones only the link shows (site audit #9). */
@media (max-width: 560px) { .announce .announce-text { display: none; } }
.announce a { color: var(--accent-hi); font-weight: 600; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; padding: clamp(36px, 6vw, 72px) 0 0; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% -5%, rgba(166, 255, 0, 0.18), transparent 70%),
    radial-gradient(ellipse 40% 35% at 85% 20%, rgba(56, 189, 248, 0.06), transparent 70%);
}
.hero-grid-bg {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 30%, transparent 75%);
}
.hero-copy { position: relative; text-align: center; max-width: 900px; margin: 0 auto; }
.hero-copy h1 { margin: 22px 0 22px; }
.hero-copy .lead { max-width: 660px; margin: 0 auto 34px; }
.hero-copy .btn-row { justify-content: center; }
.hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-top: 26px; font-size: 0.86rem; color: var(--muted); }
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta svg { width: 15px; height: 15px; color: var(--accent); }
.hero-visual { position: relative; margin-top: clamp(48px, 7vw, 80px); }
.hero-visual::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 30%;
  background: linear-gradient(transparent, var(--ink)); pointer-events: none; z-index: 3;
}
.concept-label {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--muted);
  letter-spacing: 0.04em; margin-top: 12px;
}
.concept-label svg { width: 13px; height: 13px; }

/* App window mockup lives in app.css */

/* ==========================================================================
   Generic card grids
   ========================================================================== */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  position: relative; background: linear-gradient(180deg, var(--panel) 0%, rgba(18,26,33,0.6) 100%);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
  transition: border-color 0.25s, transform 0.25s var(--ease), background 0.25s;
}
.card:hover { border-color: var(--line-2); }
a.card:hover { transform: translateY(-3px); border-color: rgba(196, 255, 77,0.3); }
.card h3 { margin-top: 18px; }
.card p { font-size: 0.95rem; margin: 0; }
.card .ico {
  width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent-wash); color: var(--accent-hi); border: 1px solid rgba(196, 255, 77,0.2);
}
.card .ico svg { width: 22px; height: 22px; }
.card .more { margin-top: 18px; display: inline-flex; gap: 6px; align-items: center; color: var(--accent-hi); font-weight: 600; font-size: 0.9rem; }
.card .more svg { width: 14px; height: 14px; transition: transform 0.2s; }
a.card:hover .more svg { transform: translateX(3px); }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }

/* Check lists */
.checks li { position: relative; padding-left: 28px; margin: 10px 0; color: var(--text-2); font-size: 0.95rem; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--accent-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat;
  border: 1px solid rgba(196, 255, 77,0.3);
}
.checks.dim li::before { filter: grayscale(1); opacity: 0.6; }

/* ==========================================================================
   Workflow steps strip
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.step { padding: 28px; border-right: 1px solid var(--line); position: relative; }
.step:last-child { border-right: 0; }
.step .num { font-family: var(--mono); font-size: 0.8rem; color: var(--accent-hi); margin-bottom: 14px; display: block; }
.step h3 { font-size: 1.05rem; margin-bottom: 6px; }
.step p { font-size: 0.9rem; margin: 0; }
.step .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); transition: width 0.6s var(--ease); }
.step.lit .bar { width: 100%; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } .step:nth-child(2) { border-right: 0; } .step:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } .step { border-right: 0; border-bottom: 1px solid var(--line); } .step:last-child { border-bottom: 0; } }

/* ==========================================================================
   Feature rows (alternating copy + visual)
   ========================================================================== */
.feature-row { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.feature-row + .feature-row { margin-top: clamp(80px, 11vw, 140px); }
.feature-row.flip .feature-copy { order: 2; }
.feature-copy h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.feature-copy .checks { margin-top: 22px; }
.feature-visual { position: relative; }
@media (max-width: 900px) {
  .feature-row { grid-template-columns: 1fr; }
  .feature-row.flip .feature-copy { order: 0; }
}

/* Panel visuals used inside feature rows */
.vpanel {
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8); overflow: hidden; font-size: 0.82rem;
}
.vpanel-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--text); font-weight: 600; font-size: 0.85rem; }
.vpanel-head .dots { display: flex; gap: 6px; }
.vpanel-head .dots i { width: 9px; height: 9px; border-radius: 50%; background: #26323b; display: block; }
.vtable { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.vtable th { text-align: left; font-weight: 500; color: var(--muted); padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.vtable td { padding: 9px 14px; border-bottom: 1px solid var(--line); color: var(--text-2); white-space: nowrap; }
.vtable tr:last-child td { border-bottom: 0; }
.vtable td.num, .vtable th.num { text-align: right; font-family: var(--mono); }
.vtable tr.hl td { background: var(--accent-wash); color: var(--text); }
.vtable .sw { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 8px; vertical-align: middle; }
.table-scroll { overflow-x: auto; }

/* ==========================================================================
   Stats / proof strip (no fabricated numbers: product facts only)
   ========================================================================== */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.fact { background: var(--ink-2); padding: 28px; }
.fact b { display: block; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.03em; font-weight: 650; color: var(--text); }
.fact span { color: var(--muted); font-size: 0.9rem; }
@media (max-width: 860px) { .facts { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   Pricing
   ========================================================================== */
.billing-toggle {
  display: inline-flex; padding: 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line-2); position: relative;
}
.billing-toggle button {
  position: relative; z-index: 1; border: 0; background: none; padding: 10px 18px; border-radius: 9px;
  color: var(--text-2); font-weight: 600; font-size: 0.9rem; transition: color 0.2s;
}
.billing-toggle button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); }
.billing-toggle button small { font-weight: 500; opacity: 0.8; margin-left: 4px; }
/* Owner review 2026-10-22: two plans, centred; min(100%, 300px) keeps one column from overflowing at 320px. */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 380px)); justify-content: center; gap: 20px; align-items: stretch; }
.price-card { display: flex; flex-direction: column; padding: 32px; }
.price-card.featured { border-color: rgba(196, 255, 77,0.45); background: linear-gradient(180deg, rgba(166, 255, 0,0.09), var(--panel) 40%); box-shadow: 0 0 0 1px rgba(196, 255, 77,0.15), 0 30px 80px -30px var(--accent-glow); }
.price-card .tag { position: absolute; top: -12px; left: 32px; background: var(--accent); color: var(--accent-ink); font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; letter-spacing: 0.05em; text-transform: uppercase; }
.price-card h3 { margin: 0 0 4px; font-size: 1.15rem; }
.price-card .aud { color: var(--muted); font-size: 0.9rem; min-height: 2.9em; }
.price { display: flex; align-items: baseline; gap: 6px; margin: 18px 0 4px; }
.price b { font-size: 2.8rem; letter-spacing: -0.04em; font-weight: 700; }
.price span { color: var(--muted); font-size: 0.9rem; }
.price-note { color: var(--muted); font-size: 0.82rem; min-height: 2.6em; }
.price-card .btn { margin: 20px 0 24px; width: 100%; }
.price-card .checks { margin-top: auto; }

/* Dual purchase path */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.path { padding: 36px; }
.path .big { font-size: clamp(1.4rem, 2.5vw, 1.8rem); font-weight: 650; letter-spacing: -0.03em; color: var(--text); margin: 14px 0 10px; line-height: 1.2; }
@media (max-width: 800px) { .paths { grid-template-columns: 1fr; } }

/* ==========================================================================
   Comparison table
   ========================================================================== */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.92rem; }
.compare th, .compare td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; }
.compare thead th { position: sticky; top: 68px; background: var(--ink); z-index: 2; font-size: 0.85rem; color: var(--text); font-weight: 600; }
.compare thead th.us { color: var(--accent-hi); }
.compare td.us { background: var(--accent-wash); color: var(--text); }
.compare tbody th { font-weight: 500; color: var(--text-2); }
.compare .yes { color: var(--accent-hi); font-weight: 600; }
.compare .no { color: var(--muted); }
.compare .part { color: var(--warn); }
.compare caption { caption-side: bottom; text-align: left; color: var(--muted); font-size: 0.8rem; padding-top: 14px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { max-width: 860px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; font-weight: 600; font-size: 1.05rem; color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1px solid var(--line-2);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4c0c8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/12px no-repeat;
  transition: transform 0.2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 22px; color: var(--text-2); max-width: 760px; }
.faq details > div p:last-child { margin: 0; }

/* ==========================================================================
   CTA band + forms
   ========================================================================== */
.cta-band {
  position: relative; overflow: hidden; border-radius: 22px; padding: clamp(40px, 7vw, 80px);
  background: radial-gradient(ellipse 80% 120% at 50% 0%, rgba(166, 255, 0,0.2), transparent 60%), var(--panel);
  border: 1px solid rgba(196, 255, 77,0.22); text-align: center;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; opacity: 0.4; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px; mask-image: radial-gradient(ellipse at center, #000, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 70%);
}
.cta-band > * { position: relative; }
.cta-band h2 { max-width: 760px; margin-left: auto; margin-right: auto; }
.cta-band .lead { max-width: 600px; margin: 0 auto 30px; }
.cta-band .btn-row { justify-content: center; }

.form { display: grid; gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; height: 46px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2);
  background: var(--ink-2); color: var(--text); font: inherit; font-size: 0.95rem; transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { height: 120px; padding: 12px 14px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.form-note { font-size: 0.8rem; color: var(--muted); }
.form-success { display: none; padding: 16px; border-radius: 10px; background: var(--accent-wash); border: 1px solid rgba(196, 255, 77,0.3); color: var(--text); }
.form.sent .form-success { display: block; }

/* Notice box (honest status labels) */
.notice { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(56,189,248,0.25); background: rgba(56,189,248,0.06); color: var(--text-2); font-size: 0.88rem; align-items: flex-start; }
.notice svg { width: 18px; height: 18px; flex: none; color: var(--info); margin-top: 2px; }
.notice strong { color: var(--text); }

/* Page hero for inner pages */
.page-hero { padding: clamp(40px, 6vw, 80px) 0 clamp(28px, 4vw, 48px); position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 60% at 50% -10%, rgba(166, 255, 0,0.14), transparent 70%); pointer-events: none; }
.page-hero .container { position: relative; }
.page-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); max-width: 900px; }
.page-hero .lead { max-width: 680px; text-wrap: balance; } /* no lone word on its own line (owner video 2026-10-23) */
.page-hero.center h1, .page-hero.center .lead { margin-left: auto; margin-right: auto; }
.breadcrumbs { font-size: 0.85rem; color: var(--muted); margin-bottom: 18px; }
.breadcrumbs a:hover { color: var(--text); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { border-top: 1px solid var(--line); padding: var(--gap) 0 28px; background: var(--ink); margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 4fr; gap: 32px; }
.footer-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer-grid .footer-h { font-size: 0.8rem; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 600; margin: 0 0 16px; }
.footer-grid .footer-h-next { margin-top: 28px; }
.footer-grid li { margin: 10px 0; }
.footer-grid li a { color: var(--text-2); font-size: 0.92rem; }
.footer-grid li a:hover { color: var(--text); }
.footer-brand p { font-size: 0.9rem; max-width: 300px; margin-top: 14px; }
.footer-bottom { margin-top: var(--gap); padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: var(--muted); font-size: 0.82rem; }
.footer-bottom a { color: var(--text-2); display: inline-block; padding: 4px 0; }
.footer-bottom a:hover { color: var(--text); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr; } .footer-nav { grid-template-columns: 1fr 1fr; gap: 28px 24px; } }
/* Phone rows at least 24px tall with room between them (WCAG 2.5.8; nav audit). */
@media (max-width: 760px) { .footer-grid li { margin: 0; } .footer-grid li a { display: inline-block; padding: 7px 0; } }

/* ==========================================================================
   Tabs (feature explorer)
   ========================================================================== */
.tabbar { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 32px; }
.tabbar button {
  border: 1px solid var(--line-2); background: rgba(255,255,255,0.02); color: var(--text-2);
  padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: 0.9rem; display: inline-flex; gap: 8px; align-items: center;
  transition: all 0.2s;
}
.tabbar button svg { width: 16px; height: 16px; }
.tabbar button:hover { color: var(--text); border-color: rgba(255,255,255,0.2); }
.tabbar button[aria-selected="true"] { background: var(--accent-wash); border-color: rgba(196, 255, 77,0.45); color: var(--accent-hi); }
.tabpanel[hidden] { display: none; }
.tabpanel { animation: fadeup 0.4s var(--ease); }
@keyframes fadeup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Scroll reveal */
/* Owner feedback 2026-10-21 #10: headings always show; the rest of a block comes in part by part, from a faint outline,
   a little before it scrolls into view, so the page never looks empty. main.js staggers the parts. */
.reveal > * { opacity: 0.18; transform: translateY(12px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.reveal.in > * { opacity: 1; transform: none; }
.reveal > :is(h1, h2, h3, .eyebrow, .badge, .breadcrumbs) { opacity: 1; transform: none; }
/* Printed pages show every block, scrolled to or not (UI audit 2026-10-30). */
@media print { .reveal > * { opacity: 1 !important; transform: none !important; } }

/* Logo strip of supported trades (not customer logos) */
.trades { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.trades span, .trades a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-2); font-size: 0.88rem; background: rgba(255,255,255,0.02); }

/* Icons from the sprite */
.i { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: middle; }

/* Add-on cards (rendered from site.config.json) */
.addon-card { display: flex; flex-direction: column; padding: 24px; }
.addon-card h3 { margin-top: 16px; font-size: 1.08rem; }
.addon-card p { flex: 1; }
.addon-meta { display: grid; gap: 6px; margin: 16px 0 18px; font-size: 0.82rem; color: var(--muted); }
.addon-meta span { display: flex; gap: 8px; align-items: center; }
.addon-meta .i { width: 15px; height: 15px; color: var(--text-2); }
.addon-card .btn { align-self: flex-start; }

/* Utility spacing */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; } .mt-5 { margin-top: 64px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; } .mb-4 { margin-bottom: 40px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal > * { opacity: 1; transform: none; }
  .draw-in { stroke-dashoffset: 0; }
  .fill-in { fill-opacity: 1; }
  .pop-in { opacity: 1; }
}

/* Integration fixes */
.table-scroll .compare thead th { top: 0; }
.feature-row > * { min-width: 0; }

/* ==========================================================================
   Site audit 2026-10-20
   ========================================================================== */
/* Sticky call to action on phones (#9). */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(9, 13, 17, 0.96); border-top: 1px solid var(--line-2);
  font-size: 0.9rem; color: var(--text-2); backdrop-filter: blur(8px); }
.sticky-cta[hidden] { display: none; }
.sticky-cta em { color: var(--muted); font-style: normal; font-size: 0.8rem; white-space: nowrap; }
.sticky-cta .sticky-price { line-height: 1.25; min-width: 0; color: var(--text); }
.sticky-cta .sticky-price em { display: block; margin-top: 2px; }
.sticky-cta .btn { flex: none; }
@media (min-width: 760px) { .sticky-cta { display: none !important; } }

/* Real screenshots (#1): a plain window frame with a caption saying what it is. */
.shot { margin: 0; }
.shot-frame { border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: #0d1217; box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7); }
.shot-frame img { display: block; width: 100%; height: auto; }
.shot figcaption { margin-top: 10px; font-size: 0.82rem; color: var(--muted); text-align: center; }
.hero-shot { position: relative; max-width: 1120px; margin: 44px auto 0; }
.shot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 760px) { .shot-grid { grid-template-columns: 1fr; } }

/* Problem and plan (#2). */
.steps-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: step; }
.steps-3 > div { padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel, rgba(255,255,255,0.02)); }
.steps-3 > div::before { counter-increment: step; content: counter(step); display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent-wash); color: var(--accent-hi); font-weight: 700; margin-bottom: 12px; }
.steps-3 h3 { margin: 0 0 6px; font-size: 1.05rem; }
.steps-3 p { margin: 0; color: var(--text-2); }
@media (max-width: 760px) { .steps-3 { grid-template-columns: 1fr; } }
.pain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.pain-list li { padding-left: 28px; position: relative; color: var(--text-2); }
.pain-list li::before { content: "\2715"; position: absolute; left: 0; color: #ff7a6b; font-weight: 700; }

/* Sign-up form (#3). */
.form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form details.more { margin: 4px 0 14px; }
.form details.more summary { cursor: pointer; color: var(--accent-hi); font-weight: 600; font-size: 0.92rem; }
.form [data-plan-shown] { display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: 999px; background: var(--accent-wash); color: var(--accent-hi); font-size: 0.85rem; font-weight: 600; }
.form [data-plan-shown][hidden] { display: none; }
.form-success .btn { margin: 10px 8px 0 0; }
.form-success ol { margin: 10px 0 0; padding-left: 20px; }

/* Comparison pages (#7): tables scroll on phones instead of squeezing. */
.fact-src { font-size: 0.78rem; color: var(--muted); }
.trades a:hover { border-color: var(--accent); color: var(--text); }
.risk-row .card { padding: 18px 20px; } .risk-row h3 { font-size: 1rem; margin: 0 0 6px; } .risk-row p { margin: 0; font-size: 0.9rem; }
/* Two-product comparisons fit a phone without sideways scrolling (#7). */
.table-scroll .compare.cmp-2 { min-width: 0; }
.cmp-2 th[scope="row"] { width: 28%; }
.better-box { border-left: 3px solid var(--info, #38bdf8); }
.cmp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 860px) { .cmp-cards { grid-template-columns: 1fr; } }
.indie-deal { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 24px; } .indie-deal h3 { margin: 0 0 4px; } .indie-deal p { margin: 0; }
.accent-strong { color: var(--accent-hi); font-weight: 650; }
/* Screenshot lightbox (owner feedback 2026-10-21 #7). */
.shot-frame[role="button"] { cursor: zoom-in; position: relative; transition: border-color .2s, transform .5s var(--ease), opacity .5s var(--ease); }
.shot-frame[role="button"]:hover, .shot-frame[role="button"]:focus-visible { border-color: var(--accent); }
/* The enlarge chip is always shown, so touch and keyboard users can see it too (site audit 2026-10-22 #13). */
.shot-frame[role="button"]::after { content: "Enlarge"; position: absolute; right: 10px; bottom: 10px; height: 28px; padding: 0 10px 0 30px; border-radius: 999px; display: inline-flex; align-items: center;
  background: rgba(9,13,17,.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9eff2' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4-4M11 8v6M8 11h6'/%3E%3C/svg%3E") 9px center/15px no-repeat;
  border: 1px solid var(--line-2); color: var(--text); font-size: .78rem; font-weight: 600; line-height: 1; opacity: .92; transition: opacity .2s, border-color .2s; pointer-events: none; }
.shot-frame[role="button"]:hover::after, .shot-frame[role="button"]:focus-visible::after { opacity: 1; border-color: var(--accent); }
.lb-zoom { position: absolute; top: 10px; right: 64px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); font-size: .88rem; font-weight: 600; cursor: pointer; }
.lb-zoom:hover, .lb-close:hover { border-color: var(--accent); }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(4,6,8,.98); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 16px max(16px, env(safe-area-inset-bottom)); }
.lightbox[hidden] { display: none; }
.lb-stage { max-width: 100%; max-height: calc(100vh - 110px); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.lb-stage img { max-width: 100%; max-height: calc(100vh - 110px); cursor: zoom-in; border-radius: 8px; }
.lightbox.zoomed .lb-stage { overflow: auto; width: 100%; height: calc(100vh - 110px); display: block; }
.lightbox.zoomed .lb-stage img { max-width: none; max-height: none; cursor: zoom-out; }
.lb-cap { color: var(--muted); font-size: .85rem; margin: 10px 0 0; text-align: center; }
.lb-close { position: absolute; top: 10px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); font-size: 1.5rem; line-height: 1; cursor: pointer; }
body.lb-open { overflow: hidden; }

/* ===== Owner feedback 2026-10-21, reviewed against the site-audit principles ===== */
/* Hero chips: five on every screen, the last two only where there is room. */
@media (max-width: 900px) { .hero-meta .hm-more { display: none; } }

/* "Sound familiar?": each problem beside its answer. */
.vs-head, .vs-list li { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.vs-head { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); padding-bottom: 10px; }
.vs-list { list-style: none; margin: 0; padding: 0; }
.vs-list li { padding: 14px 0; border-top: 1px solid var(--line); align-items: start; }
.vs-no, .vs-yes { position: relative; padding-left: 28px; }
.vs-no { color: var(--text-2); }
.vs-no::before { content: "\2715"; position: absolute; left: 0; color: #ff7a6b; font-weight: 700; }
.vs-yes { color: var(--text); font-weight: 600; }
.vs-yes::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent);
}
.vs-yes::after { content: ""; position: absolute; left: 5px; top: 7px; width: 6px; height: 3px; border-left: 2px solid var(--accent-ink, #0b1014); border-bottom: 2px solid var(--accent-ink, #0b1014); transform: rotate(-45deg); }
@media (max-width: 700px) {
  .vs-head { display: none; }
  .vs-list li { grid-template-columns: 1fr; gap: 8px; padding: 14px; margin-bottom: 10px; border: 0; background: var(--panel); border-radius: 10px; }
  .vs-no { font-size: 0.9rem; color: var(--muted); }
}

/* Screenshots side by side: one frame shape, the picture whole inside it, captions in line (feedback #21). */
.shot-grid .shot { display: flex; flex-direction: column; }
.shot-grid .shot-frame { aspect-ratio: 16 / 10; display: grid; place-items: center; background: #0d1217; }
.shot-grid .shot-frame img { width: 100%; height: 100%; object-fit: contain; }
.shot-grid figcaption { margin-top: 12px; text-align: left; min-height: 2.6em; }
.shot-date { text-align: center; color: var(--muted); font-size: 0.85rem; margin: 14px 0 0; }

/* Two ways to buy. */
.buy-ticks { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; padding: 0; margin: 24px 0 0; color: var(--text-2); font-size: 0.92rem; }
.buy-ticks li::before { content: "\2713"; color: var(--accent); font-weight: 700; margin-right: 8px; }

/* Steps inside the closing call to action. */
.cta-steps { list-style: none; counter-reset: cs; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0; margin: 20px auto 26px; max-width: 860px; text-align: left; }
.cta-steps li { counter-increment: cs; position: relative; padding-left: 38px; color: var(--text-2); font-size: 0.95rem; }
.cta-steps li::before { content: counter(cs); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent-hi); font-weight: 700; font-size: 0.85rem; }
.cta-steps b { color: var(--text); }
@media (max-width: 760px) { .cta-steps { grid-template-columns: 1fr; } }

/* Trade pages. */
.trade-sample { grid-template-columns: 3fr 2fr; align-items: start; }
@media (max-width: 900px) { .trade-sample { grid-template-columns: 1fr; } }
.trade-svg { display: block; width: 100%; height: auto; }
.trade-table { width: 100%; }
.trade-table td.r { white-space: nowrap; }
.needs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.need { padding: 16px 0 16px 28px; border-top: 1px solid var(--line); position: relative; }
.need::before { content: "\2713"; position: absolute; left: 0; top: 16px; color: var(--accent); font-weight: 700; }
.need h3 { font-size: 1rem; margin: 0 0 4px; }
.need p { margin: 0; color: var(--text-2); font-size: 0.93rem; }
/* An odd last item spans both columns so the grid ends level (UI audit 2026-10-30). */
.needs > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 760px) { .needs { grid-template-columns: 1fr; } }
.not-yet { color: var(--text-2); font-size: 0.92rem; border-left: 3px solid var(--warn, #f59e0b); padding: 8px 0 8px 14px; max-width: 820px; }
.trade-steps { list-style: none; counter-reset: ts; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 0; margin: 0; }
/* The whole tile is the link, with a large step number (owner video 2026-10-30). */
.trade-steps li { counter-increment: ts; display: flex; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); font-weight: 600; font-size: 0.95rem; transition: border-color 0.15s, opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.trade-steps a { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border-radius: inherit; color: inherit; text-decoration: none; }
.trade-steps a::before { content: counter(ts); font-family: var(--mono); font-size: 1.75rem; line-height: 1; font-weight: 700; color: var(--accent-hi); }
.trade-steps li:has(a:hover, a:focus-visible) { border-color: var(--accent); }
.trade-steps { grid-auto-rows: 1fr; } /* equal cards; the last fills its row, no empty slot (UI audit 2026-10-22) */
.trade-steps li:last-child:nth-child(4n+3) { grid-column: span 2; } .trade-steps li:last-child:nth-child(4n+2) { grid-column: span 3; } .trade-steps li:last-child:nth-child(4n+1) { grid-column: span 4; }
/* Phones: two columns. :nth-child(n) matches the desktop span rules' specificity and comes later, so a 6-step list no
   longer spans 3 columns of a 2-column grid (site audit 2026-10-22 #7); an odd last card still fills its row. */
@media (max-width: 760px) {
  .trade-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 12px; }
  .trade-steps a { padding: 16px; }
  .trade-steps a::before { font-size: 1.4rem; }
  .trade-steps li:last-child:nth-child(n) { grid-column: auto; }
  .trade-steps li:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (max-width: 359px) { .trade-steps { grid-template-columns: 1fr; } .trade-steps li:last-child:nth-child(odd) { grid-column: auto; } }
.trade-hub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .trade-hub { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .trade-hub { grid-template-columns: 1fr; } }
.trade-hub .card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.trade-hub .card p { margin: 0; color: var(--text-2); font-size: 0.9rem; }
@media (max-width: 600px) {
  .trade-table td.r { white-space: normal; }
  .trade-table th, .trade-table td { padding-left: 8px; padding-right: 8px; }
  .trade-sample .feature-copy { min-width: 0; }
  .trade-table { table-layout: fixed; }
  .trade-table th, .trade-table td { overflow-wrap: anywhere; font-size: 0.8rem; }
}
/* Small print that says exactly when Kisheet uses the internet (privacy research 2026-10-21). */
.fine-print { max-width: 760px; margin: 18px auto 0; text-align: center; color: var(--muted); font-size: 0.8rem; line-height: 1.55; }
.fine-print a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.privacy-summary { border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); padding: clamp(20px, 3vw, 32px); margin: 24px 0 36px; }
.privacy-summary h2 { margin: 0 0 14px; font-size: 1.35rem; }
.privacy-summary dl { margin: 0; display: grid; gap: 14px; }
.privacy-summary dt { font-weight: 650; color: var(--text); }
.privacy-summary dd { margin: 4px 0 0; color: var(--text-2); }
/* About page: one readable column (research: 500–800 words, summary first). */
.about-narrow { max-width: 760px; }
.about-prose h2 { font-size: 1.45rem; margin: 40px 0 12px; }
.about-prose p { color: var(--text-2); line-height: 1.7; }
.about-prose p b { color: var(--text); }
.about-promises { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.about-promises li { position: relative; padding-left: 28px; color: var(--text-2); }
.about-promises li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.about-promises b { color: var(--text); }
.kish-figure { margin: 8px 0 20px; }
.kish-figure img { display: block; width: 100%; max-width: 560px; height: auto; border-radius: 10px; }
.kish-figure figcaption { font-size: 0.8rem; color: var(--muted); margin-top: 6px; }
.about-sources summary { cursor: pointer; color: var(--muted); font-size: 0.88rem; }
.about-sources li { color: var(--muted); font-size: 0.84rem; margin: 6px 0; }
/* Homepage trade chooser (owner feedback 2026-10-21). */
.trade-chooser-q { font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--text); margin: 0 0 6px; }
.trade-chooser-sub { color: var(--text-2); margin: 0 0 22px; font-size: 1.05rem; }
.trades-lg { gap: 12px; }
.trades-lg a { padding: 11px 20px; font-size: 1rem; color: var(--text); border-color: var(--line-2); background: var(--panel); font-weight: 550; }
.trades-lg a:hover, .trades-lg a:focus-visible { border-color: var(--accent); color: var(--accent-hi); }

/* Trade walkthroughs (/solutions/<trade>/walkthrough/): numbered steps, words beside the real app picture. */
/* No divider under the trade hero: the spacing matches the feature pages (owner video 2026-10-30). */
.walk-sample { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); font-size: 0.9rem; max-width: 720px; }
.walk-sample .i { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.walk { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.walk-step { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (min-width: 1100px) { .walk-step { grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); } } /* bigger screenshots where the copy keeps 280px+ (site audit 2026-10-22 #13) */
.walk-copy { position: sticky; top: 96px; } /* the label stays beside a tall screenshot (UI audit 2026-10-22) */
.walk-copy h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: 10px 0 12px; }
.walk-copy p { color: var(--muted); }
.walk-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.walk-how { display: flex; gap: 8px; align-items: flex-start; font-size: 0.88rem; color: var(--text) !important; background: rgba(255,255,255,0.04); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 12px; }
.walk-how .i { flex: none; width: 14px; height: 14px; margin-top: 4px; color: var(--accent); }
/* Every second step puts the screenshot on the left, as the feature pages alternate (owner video 2026-10-30). */
@media (min-width: 861px) {
  .walk-step:nth-child(even) { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }
  .walk-step:nth-child(even) .walk-copy { order: 2; }
}
@media (min-width: 1100px) { .walk-step:nth-child(even) { grid-template-columns: minmax(0, 64fr) minmax(0, 36fr); } }
@media (max-width: 860px) { .walk-step { grid-template-columns: 1fr; } .walk-copy { position: static; } }
.walk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; margin-bottom: 32px; }
@media (max-width: 640px) { .walk-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); } .walk-chips a { flex: none; } }
.walk-chips a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text); font-size: 0.86rem; text-decoration: none; }
.walk-chips a:hover { border-color: var(--accent); }
.walk-chips span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-wash); color: var(--accent-hi); font-weight: 700; font-size: 0.78rem; }

/* ==========================================================================
   Feature list (/features/ #all-features): every shipped feature, styled like the app's How To A–Z list.
   Rows: src/partials/feature-list.html (tools/sync-feature-list.ps1). Script: assets/js/feature-list.js.
   ========================================================================== */
.fl { max-width: 920px; color-scheme: dark; }
.fl-search label { display: block; font-size: 0.85rem; font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
.fl-search input {
  width: 100%; height: 46px; padding: 0 14px 0 42px; border-radius: 10px; border: 1.5px solid rgba(196, 255, 77, 0.4);
  background: var(--ink-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4c0c8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 14px center/18px no-repeat;
  color: var(--text); font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none;
}
.fl-search input::placeholder { color: var(--muted); }
.fl-search input:focus { outline: none; border-color: var(--accent); }
.fl-search input:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; border-radius: 10px; }
.fl-search input::-webkit-search-cancel-button { cursor: pointer; }
.fl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.fl-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); color: var(--text-2); font-size: 0.875rem; font-weight: 550;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.fl-chip:hover { border-color: rgba(196, 255, 77, 0.4); color: var(--text); }
.fl-chip .fl-n { font-size: 0.78rem; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.fl-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.fl-chip[aria-pressed="true"] .fl-n { color: var(--accent-ink); opacity: 0.75; }
.fl-chip.fl-zero:not([aria-pressed="true"]) { opacity: 0.7; }
.fl-count { margin: 14px 0 10px; font-size: 0.875rem; color: var(--muted); }
.fl-list { border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.fl-row { border-top: 1px solid var(--line); margin-top: -1px; content-visibility: auto; contain-intrinsic-size: auto 60px; }
.fl-row summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 16px;
  transition: background 0.12s;
}
.fl-row summary::-webkit-details-marker { display: none; }
.fl-row details { scroll-margin-top: 96px; }
.fl-row summary:hover { background: var(--panel-3); }
.fl-row summary:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -2px; border-radius: 0; }
.fl-row details[open] { box-shadow: inset 3px 0 0 var(--accent); background: var(--panel-2); }
.fl-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--text-2); }
.fl-ico .i { width: 20px; height: 20px; }
.fl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fl-name { font-size: 0.94rem; font-weight: 600; color: var(--text); line-height: 1.35; }
.fl-desc { font-size: 0.875rem; color: var(--text-2); line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details[open] .fl-desc { white-space: normal; }
.fl-tag { flex: none; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-hi); border: 1px solid rgba(196, 255, 77, 0.35); background: var(--accent-wash); border-radius: 999px; padding: 2px 8px; }
.fl-chev { flex: none; width: 18px; height: 18px; color: var(--muted); transition: transform 0.2s var(--ease); }
details[open] .fl-chev { transform: rotate(180deg); }
.fl mark { background: var(--accent-glow); color: var(--text); border-radius: 2px; padding: 0 1px; }
.fl-body { padding: 2px 16px 18px 66px; }
.fl-body p { margin: 10px 0 0; font-size: 0.9rem; max-width: 680px; }
.fl-where b { color: var(--text); font-weight: 600; }
.fl-body .fl-cat { font-size: 0.8rem; color: var(--muted); }
.fl-media { margin: 8px 0 4px; max-width: 640px; }
.fl-frame { position: relative; width: 100%; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); background: var(--ink); }
.fl-frame img, .fl-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.fl-media figcaption { margin-top: 8px; font-size: 0.85rem; color: var(--text-2); }
.fl-media figcaption span { display: block; font-size: 0.78rem; color: var(--muted); }
.fl-play {
  position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); background: rgba(9, 13, 17, 0.82); color: var(--text);
}
.fl-play:hover { border-color: var(--accent); }
.fl-play span { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.fl-play.is-playing span { width: 12px; height: 14px; border: 0; margin: 0; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.fl-empty { margin-top: 10px; padding: 24px; border: 1px dashed var(--line-2); border-radius: var(--radius); text-align: center; }
.fl-empty p { color: var(--text); margin-bottom: 12px; }
.fl-empty .btn-row { justify-content: center; }
@media (max-width: 640px) {
  .fl-row summary { gap: 12px; padding: 10px 12px; }
  .fl-body { padding: 2px 12px 16px; }
  .fl-tag { padding: 1px 6px; font-size: 0.62rem; }
}
@media (prefers-reduced-motion: reduce) { .fl-chev, .fl-chip, .fl-row summary { transition: none; } }

/* ==========================================================================
   Owner review 2026-10-22: pricing calculator, Bluebeam tier match, compare
   headcount row and "Where we fit", /download/ status line, /try/.
   (Added by the pricing/compare pass; the feature-list block above is separate.)
   ========================================================================== */
/* Calculator: result first, numbered steps, method folded away */
.calc-head .badge { flex: none; white-space: nowrap; }
.calc-head h3 { flex: 1 1 12rem; min-width: 0; }
.calc .calc-result { padding: 18px 20px; }
.calc-result .calc-big { font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; color: var(--text); }
.calc-result.is-saving .calc-big { color: var(--accent-hi); }
.calc-result.is-empty .calc-big { font-size: 1.4rem; }
.calc-result .calc-sub { font-size: 1rem; color: var(--text-2); margin: 0; }
.calc-result.is-more, .calc-result.is-empty, .calc-result.is-level { background: var(--panel-2); border-color: var(--line-2); }
.calc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.calc .field.calc-step label { justify-content: flex-start; align-items: center; gap: 10px; flex-wrap: wrap; }
.calc .field.calc-step label output { margin-left: auto; }
.calc-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: 0.85rem; font-weight: 700; }
.calc-q { font-weight: 600; color: var(--text); }
.calc .field.calc-step input[type="range"] { height: 32px; min-height: 24px; }
.calc input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; }
.calc input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; }
.calc-price-row { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 10px; }
.calc-money { position: relative; display: block; }
.calc-money .calc-prefix { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.calc-money input { padding-left: 26px; width: 100%; }
.calc-mode { border: 0; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.calc-mode legend { width: 100%; font-size: 0.85rem; color: var(--text-2); margin-bottom: 6px; padding: 0; }
.calc-mode label { position: relative; display: inline-flex; cursor: pointer; }
.calc-mode input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.calc-mode span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 0.88rem; color: var(--text-2); background: var(--panel-2); }
.calc-mode input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.calc-mode input:focus-visible + span { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.calc-how summary { cursor: pointer; font-size: 0.88rem; font-weight: 600; color: var(--accent-hi); min-height: 24px; }
.calc .field output, .calc .bar-top b, .headcount-ctl input { font-family: var(--font); font-variant-numeric: tabular-nums; }
.price-grid .price-card .checks { margin-top: 24px; }
.table-note { margin: 12px 0 0; font-size: 0.8rem; color: var(--muted); }
.calc-how p { font-size: 0.8rem; color: var(--muted); margin: 8px 0 0; line-height: 1.55; }
@media (max-width: 420px) { .calc-price-row { grid-template-columns: 1fr; } }

/* Bluebeam tier match on /pricing/ */
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.tier-card { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 0 24px; padding: 24px; align-content: start; }
.tier-card.featured { border-color: rgba(196, 255, 77, 0.45); background: linear-gradient(180deg, rgba(166, 255, 0, 0.07), var(--panel) 45%); }
.tier-them { display: flex; flex-direction: column; gap: 2px; padding-right: 20px; border-right: 1px solid var(--line-2); color: var(--muted); }
.tier-them .tier-label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.tier-them b { font-size: 1.6rem; font-weight: 700; color: var(--text-2); }
.tier-them .tier-sum { margin-top: 10px; font-size: 0.85rem; }
.tier-them .tier-sum strong { color: var(--text-2); }
.tier-us h3 { margin: 0 0 6px; font-size: 1.05rem; }
.tier-price { margin: 0 0 10px; color: var(--text-2); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
.tier-price b { font-size: 2rem; font-weight: 700; color: var(--accent-hi); letter-spacing: -0.02em; }
.tier-gap { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 4px 0 10px; }
.tier-gap th, .tier-gap td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.tier-gap thead th { color: var(--muted); font-weight: 600; font-size: 0.78rem; }
.tier-gap tbody th { font-weight: 500; color: var(--text-2); }
.tier-gap td { color: var(--text); }
.tier-gap td.no { color: var(--muted); }
.tier-note { font-size: 0.9rem; margin: 0; }
.tier-card .checks { margin: 0; }
.tier-src { grid-column: 1 / -1; margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--muted); }
.tier-tm { margin: 16px 0 0; font-size: 0.78rem; color: var(--muted); }
@media (max-width: 520px) {
  .tier-card { grid-template-columns: 1fr; }
  .tier-them { padding: 0 0 14px; margin-bottom: 14px; border-right: 0; border-bottom: 1px solid var(--line-2); }
}

/* /compare/: estimator count that drives the "N estimators, per year" row */
.headcount { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 16px; }
.headcount label { font-weight: 600; color: var(--text); }
.headcount-ctl { display: inline-flex; align-items: stretch; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: var(--panel-2); }
.headcount-ctl button { width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--text); font-size: 1.25rem; cursor: pointer; }
.headcount-ctl button:hover { background: var(--panel-3); }
.headcount-ctl input { width: 4.5rem; min-height: 44px; border: 0; border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2); border-radius: 0; background: var(--ink); color: var(--text); text-align: center; font-family: var(--mono); font-size: 1rem; -moz-appearance: textfield; }
.headcount-ctl input::-webkit-outer-spin-button, .headcount-ctl input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.headcount-note { margin: 0; font-size: 0.85rem; color: var(--muted); flex-basis: 100%; }
.compare tr.row-total th, .compare tr.row-total td { border-top: 2px solid var(--line-2); }
.compare tr.row-total th { color: var(--text); font-weight: 600; }
.table-scroll[role="region"]:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
@media (max-width: 640px) {
  .table-scroll[role] .compare tbody th, .table-scroll[role] .compare thead th:first-child { min-width: 0; width: 7.5rem; max-width: 7.5rem; box-shadow: 1px 0 0 var(--line-2); }
  .table-scroll[role] .compare-glance td.us, .table-scroll[role] .compare-glance th.us { min-width: 9rem; }
}
/* Tables on phones (site audit 2026-10-22 #9): the first column stays put, the rest scrolls, and main.js adds a
   "swipe" line above any table that is wider than the screen. The fade marks the cut edge until the end is reached. */
.table-cue { display: none; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 0.82rem; color: var(--text-2); }
.table-cue svg { width: 14px; height: 14px; color: var(--accent-hi); }
.table-scroll.is-overflow { overscroll-behavior-x: contain; }
.table-cue.is-on { display: flex; }
.table-scroll.is-overflow:not(.is-end) { -webkit-mask-image: linear-gradient(to right, #000 86%, rgba(0, 0, 0, 0.45)); mask-image: linear-gradient(to right, #000 86%, rgba(0, 0, 0, 0.45)); }
.table-scroll.is-scrolled :is(.compare, .matrix) tbody th, .table-scroll.is-scrolled .compare thead th:first-child, .table-scroll.is-scrolled .matrix thead th:first-child { box-shadow: 6px 0 10px -6px rgba(0, 0, 0, 0.8), 1px 0 0 var(--line-2); }
@media (max-width: 640px) {
  .table-scroll .matrix { min-width: 0; font-size: 0.8rem; }
  .table-scroll .matrix th, .table-scroll .matrix td { padding: 10px 8px; }
  .table-scroll .matrix thead th:first-child { position: sticky; left: 0; z-index: 3; }
  .table-scroll .matrix tbody th, .table-scroll .matrix thead th:first-child { min-width: 0; width: 7rem; max-width: 7rem; box-shadow: 1px 0 0 var(--line-2); }
  .table-scroll .matrix td { min-width: 0; }
  /* Short columns stay narrow so the highlighted plan gets the room (UI audit after-review). */
  .table-scroll .matrix td:not(.hl), .table-scroll .matrix thead th:not(.hl):not(:first-child) { width: 5.25rem; }
  .table-scroll .matrix tr.grp th { width: auto; max-width: none; box-shadow: none; }
  .table-scroll .matrix .mx { white-space: normal; gap: 6px; font-size: 0.7rem; }
  /* "Not included" reads as a dash; the words stay for screen readers. */
  .table-scroll .matrix .mx-no { font-size: 0; }
  .table-scroll .matrix .mx-no::before { width: 14px; }
  .table-scroll .compare tbody th, .table-scroll .compare thead th:first-child { min-width: 0; width: 7.5rem; max-width: 7.5rem; padding-left: 12px; padding-right: 12px; }
  /* Captions stay readable instead of running off with the table's width. */
  .table-scroll caption:not(.sr-only) { position: sticky; left: 0; max-width: calc(100vw - 2 * var(--gutter) - 2px); }
}

/* /compare/: two claims, and the wider field folded away */
.fit-claim .badge { margin-bottom: 10px; }
.fit-claim h3 { margin: 0 0 8px; }
.fit-claim.featured { border-color: rgba(196, 255, 77, 0.45); }
.wider-field > summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; color: var(--text); padding: 14px 0; min-height: 44px; }
.wider-field > summary:hover { color: var(--accent-hi); }
.wider-field .tool-grid { margin-top: 12px; }

/* /download/ status line and /try/ */
.dl-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; padding: 10px 16px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); color: var(--text-2); font-size: 0.92rem; }
.dl-status .i { width: 18px; height: 18px; color: var(--accent-hi); }
.dl-status strong { color: var(--text); }
.try-hero { padding-bottom: clamp(64px, 10vw, 120px); }
.try-hero .badge { margin-bottom: 14px; }
.try-hero .btn-row { justify-content: center; }
.try-note { margin: 18px auto 0; max-width: 34rem; font-size: 0.9rem; }

/* ==========================================================================
   Site audit 2026-10-22 #9: comparison tables marked .stack-sm (cells carry data-label) become one card per row on
   phones, so each row compares like with like without sideways scrolling. Other wide tables keep the sticky first
   column and the "swipe" line from main.js.
   ========================================================================== */
@media (max-width: 640px) {
  .table-scroll:has(> .stack-sm) { border: 0; background: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .table-scroll .compare.stack-sm, .stack-sm tbody, .stack-sm tr { display: block; min-width: 0; width: 100%; }
  .stack-sm thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stack-sm caption:not(.sr-only) { display: block; position: static; max-width: none; padding: 0 0 12px; caption-side: top; }
  .stack-sm tbody tr { margin: 0 0 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); overflow: hidden; }
  .table-scroll .compare.stack-sm tbody th { display: block; position: static; width: auto; max-width: none; min-width: 0; padding: 12px 14px 8px; border: 0; background: none; box-shadow: none; color: var(--text); font-weight: 650; font-size: 0.95rem; }
  /* The label sits in a fixed left gutter so mixed text and <strong> in the cell flow as one paragraph. */
  .table-scroll .compare.stack-sm td { display: block; position: relative; min-width: 0; width: auto; padding: 9px 14px 9px calc(6.5rem + 26px); border: 0; border-top: 1px solid var(--line); font-size: 0.88rem; }
  .stack-sm td::before { content: attr(data-label); position: absolute; left: 14px; top: 10px; width: 6.5rem; color: var(--muted); font-size: 0.78rem; font-weight: 600; line-height: 1.5; }
  .table-scroll .compare.stack-sm td:not([data-label]) { padding-left: 14px; }
  .stack-sm td:not([data-label])::before { content: none; }
  .stack-sm td.us::before { color: var(--accent-hi); }
  .table-scroll .compare.stack-sm tr.row-total th, .table-scroll .compare.stack-sm tr.row-total td { border-top-width: 1px; }
  .table-scroll .compare.stack-sm tr.row-total { border-color: rgba(196, 255, 77, 0.35); }
}

/* Form problems the visitor can fix, said in place (docs/FORMS-WORKER.md). */
.form-problem { margin: 10px 0 0; color: var(--warn); font-size: 0.9rem; }

/* Clips: real-app animations on the feature pages (src/assets/js/clips.js; docs/CONVENTIONS.md "Clips"). */
.clip { position: relative; margin: 0; }
.clip-frame { position: relative; width: 100%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-2); background: var(--ink); box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8); }
.clip-frame { background: var(--panel-2); }
.clip-frame img, .clip-frame video { display: block; width: 100%; height: 100%; object-fit: contain; }
.clip-frame video { position: absolute; inset: 0; }
.clip-play { position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(9,13,17,0.85); color: var(--text); cursor: pointer; }
/* A play triangle, or two pause bars while it plays. */
.clip-play::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; margin-left: 2px; }
.clip-play.is-playing::before { width: 10px; height: 12px; border: 0; margin: 0; background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 7px, currentColor 7px 10px); }
.clip-play:hover, .clip-play:focus-visible { border-color: var(--accent); }
.clip figcaption { margin-top: 10px; font-size: 0.88rem; color: var(--text-2); }

/* ==========================================================================
   Markup page showcase: a list of tools beside one large picture (owner video 2026-10-22).
   src/pages/features/markup/index.html + src/assets/js/markup-showcase.js. Without JS (no .is-js) every item shows its
   text and picture; with JS, desktop is a two-column list + stage and phones are one-open disclosures.
   ========================================================================== */
.ms-intro { margin-bottom: 28px; }
.ms-intro h2 { margin: 12px 0 6px; }
.ms-intro p { margin: 0; }
.ms-item { margin: 0 0 40px; }
.ms-head { padding: 0; }
.ms-name { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 1.1rem; }
.ms-name .i { width: 20px; height: 20px; flex: none; color: var(--accent-hi); }
.ms-desc { margin: 0; color: var(--text-2); font-size: 0.95rem; }
.ms-more { margin: 6px 0 0; color: var(--muted); font-size: 0.88rem; line-height: 1.55; }
.ms-fig { margin-top: 16px; }
.ms-fig figcaption { min-height: 2.9em; }
/* Screenshots that aren't the frame's shape (a dialog) sit centred at 1x on the panel colour, never upscaled. */
.ms-fig .clip-frame.ms-dialog { display: grid; place-items: center; background: var(--panel); }
.ms-fig .clip-frame.ms-dialog img { width: auto; height: auto; max-width: min(722px, 92%); max-height: 92%; object-fit: contain; border-radius: 8px; box-shadow: 0 12px 40px -12px rgba(0,0,0,0.7); }
.ms-fig .clip-frame.shot-frame { border-radius: var(--radius); }
.ms-also { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.ms-also h3 { margin: 0 0 6px; font-size: 1rem; }
.ms-also p { margin: 0; color: var(--text-2); font-size: 0.92rem; }

/* No JS, wide screens: each item is its own row, text left and picture right. */
@media (min-width: 900px) {
  .ms:not(.is-js) .ms-item { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 40px; align-items: start; }
  .ms:not(.is-js) .ms-fig { margin-top: 0; }
}

/* With JS: the name is a button. */
.ms.is-js .ms-item { margin: 0; }
.ms.is-js .ms-name { margin: 0; font-size: inherit; }
.ms-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text-2); font: 600 1.02rem/1.3 var(--font); text-align: left; cursor: pointer; }
.ms-btn:hover { color: var(--text); }
.ms-btn > span { flex: 1; }
.ms-btn:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; border-radius: 4px; }
.ms-btn .ms-chev { width: 18px; height: 18px; color: var(--muted); transition: transform .2s; }
.ms-item.is-open .ms-btn { color: var(--text); font-weight: 700; }
.ms-item.is-open .ms-btn .ms-chev { transform: rotate(180deg); }
.ms.is-js .ms-item:not(.is-open) .ms-fig,
.ms.is-js .ms-item:not(.is-open) .ms-more { display: none; }

/* Desktop: the list on the left, one picture on the right that stays in view. */
@media (min-width: 900px) {
  .ms.is-js { display: grid; grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); grid-template-rows: repeat(var(--n), auto) 1fr; column-gap: 40px; row-gap: 8px; align-items: start; }
  .ms.is-js .ms-item { display: contents; }
  .ms.is-js .ms-btn { min-height: 32px; }
  .ms.is-js .ms-head { grid-column: 1; padding: 12px 16px 12px 13px; border-left: 3px solid transparent; border-radius: 0 10px 10px 0; cursor: pointer; transition: background .15s; }
  .ms.is-js .ms-head:hover { background: var(--panel); }
  .ms.is-js .ms-item.is-open .ms-head { background: var(--panel-2); border-left-color: var(--accent); cursor: default; }
  .ms.is-js .ms-desc { margin-top: 4px; padding-left: 30px; font-size: 0.9rem; }
  .ms.is-js .ms-more { margin-top: 6px; padding-left: 30px; }
  /* The caption needn't repeat the name selected beside it (the span stays for clips.js's button name). */
  .ms.is-js .ms-cap-name { display: none; }
  /* Keyboard focus on a selected row: one ring around the whole row, not a second outline inside the lime border. */
  .ms.is-js .ms-head:has(.ms-btn:focus-visible) { outline: 2px solid var(--accent-hi); outline-offset: -2px; }
  .ms.is-js .ms-head:has(.ms-btn:focus-visible) .ms-btn { outline: none; }
  .ms.is-js .ms-fig { grid-column: 2; grid-row: 1 / -1; margin: 0; position: sticky; top: 84px; }
  .ms-btn .ms-chev { display: none; }
}

/* Phones: one-open disclosures, each picture under its own item. */
@media (max-width: 899.98px) {
  .ms.is-js { border-top: 1px solid var(--line); }
  .ms.is-js .ms-item { border-bottom: 1px solid var(--line); padding: 6px 0; }
  .ms.is-js .ms-btn { min-height: 44px; }
  .ms.is-js .ms-desc { margin-top: -2px; padding: 0 0 8px 30px; font-size: 0.9rem; }
  .ms-btn:focus-visible { outline-offset: 0; }
  .ms.is-js .ms-more { padding-left: 30px; margin: 0 0 4px; }
  .ms.is-js .ms-item.is-open .ms-fig { margin: 12px 0 14px; }
}

/* Rows that show a real-app clip give the clip most of the width, so its numbers can be read (UI audit 2026-10-22:
   at 1fr / 1.15fr a 1280 px clip showed at about 43% and its figures blurred). Phones stack as before. */
@media (min-width: 901px) {
  .feature-row:has(.clip) { grid-template-columns: minmax(260px, 0.72fr) 1.6fr; gap: clamp(28px, 4vw, 52px); }
  .feature-row.flip:has(.clip) { grid-template-columns: 1.6fr minmax(260px, 0.72fr); }
}
.list-plain { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .35rem; }