/* Verbiform marketing site — one shared sheet, no framework.
   Design system v2 (2026-07-31): modeled on the section rhythm of the
   category leaders (Jobber / Housecall Pro) — light hero with an animated
   product visual, stat band, alternating feature blocks, industry tiles,
   dark store band, pricing teaser, dark mega footer. One indigo accent,
   real shadows, hover lift. Legacy var/class names are kept so every page
   re-skins from this sheet alone. */

:root {
  /* Bone & Pine — aligned to the app default + the Signal homepage.
     Legacy names kept (--blue/--indigo → pine) so every page re-skins from here. */
  --blue: #4f8cff;
  --blue-dark: #2f6fde;   /* AA-contrast blue for white-text fills (buttons, badges) */
  --indigo: #4f8cff;
  --ink: #eef2fb;
  --body: #c7d0e0;
  --muted: #97a4bd;
  /* #857658 sat at ~4.24:1 on the warm-white surface — just under WCAG AA (4.5:1)
     for the small caption text it styles (card categories, field counts, chip
     counts). Darkened one step; still reads as the faint tier next to --muted. */
  --faint: #808da6;
  --line: #26324c;
  --bg: #16213a;          /* card / surface (raised dark) */
  --page: #0e1628;        /* page ground (midnight navy) */
  --bg-soft: #101b31;     /* alternating soft bands (deeper navy) */
  --good: #35c07f;
  --warn: #e0a52e;
  --bad: #ef5f57;
  --amber: #f0ab3a;
  --navy: #0a0f1c;        /* dark band / footer (deepest navy) */
  --radius: 16px;
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .45);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; margin: 0; }
@font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans-var.woff2') format('woff2'); font-weight: 100 1000; font-style: normal; font-display: swap; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--body);
  background: var(--page);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Links inside body text need a non-colour cue (WCAG "link-in-text-block"):
   underline in-paragraph links so they don't rely on colour alone. Nav, buttons
   and cards aren't inside <p>, so they're unaffected. */
p a:not(.btn) { text-decoration: underline; }
h1, h2, h3 { color: var(--ink); letter-spacing: -.02em; line-height: 1.12; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14, 22, 40, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
/* No flex `gap` here: the wordmark is Verbi<i>form</i>, so "Verbi" and "form"
   are two flex items — a gap would open a space mid-word. Space the logo from
   the wordmark with the logo's own margin instead. */
.brand { display: flex; align-items: center; font-weight: 800; font-size: 19px; color: var(--ink); letter-spacing: -.2px; }
.brand img { width: 30px; height: 30px; border-radius: 8px; margin-right: 10px; }
.brand:hover { text-decoration: none; }
/* Two-tone wordmark: "Verbi" in the surface's ink, "form" in pine. The <i> is
   the "form" half (markup uses Verbi<i>form</i>); reset its italic. On the dark
   footer the pine reads too dark, so lift it to a lighter green there. */
.brand i { font-style: normal; color: var(--indigo); }
.site-footer .brand i { color: #6ba0ff; }
.nav { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.nav a { font-size: 14.5px; font-weight: 600; color: var(--body); }
.nav a.active { color: var(--blue); }
.nav a:hover { color: var(--ink); text-decoration: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 14.5px;
  padding: 10px 20px; border-radius: 12px; white-space: nowrap;
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--blue-dark); color: #fff; box-shadow: 0 8px 24px rgba(79, 140, 255, .28); }
.btn-primary:hover { box-shadow: 0 12px 32px rgba(79, 140, 255, .38); }
/* The nav's `.nav a` color must not override the CTA's white text (a11y contrast:
   dark text on the indigo button was 1.42:1). Higher specificity wins it back. */
.site-header .nav a.btn-primary { color: #fff; }
.btn-ghost { border: 1.5px solid var(--line); color: var(--ink); background: var(--bg); }
.btn-ghost:hover { border-color: var(--faint); }
.btn-big { padding: 15px 28px; font-size: 16px; border-radius: 14px; }

/* ---------- HOME: light hero with the capture→document stage ---------- */
.hero { position: relative; overflow: hidden; padding: 86px 0 46px; background: var(--bg); color: var(--body); }
.hero::before {
  content: ''; position: absolute; inset: -40% -20% auto; height: 130%; pointer-events: none;
  background:
    radial-gradient(600px 400px at 18% 10%, rgba(79, 70, 229, .10), transparent 60%),
    radial-gradient(700px 480px at 85% 0%, rgba(245, 158, 11, .09), transparent 60%);
}
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding-top: 0; padding-bottom: 0; }
.hero h1 { font-size: clamp(40px, 5.4vw, 62px); font-weight: 850; color: var(--ink); }
.hero h1 .accent,
.hero h1 .grad {
  background: linear-gradient(100deg, var(--indigo), #7c3aed 60%, var(--amber));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lede { margin-top: 20px; font-size: 19px; color: var(--body); max-width: 30em; }
.hero .cta { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero .cta .fine { font-size: 13px; color: var(--faint); width: 100%; margin-top: 6px; }
.hero .cta .fine b { color: var(--body); }

/* the stage: phone capturing → finished document */
.stage { position: relative; min-height: 540px; }
.phone {
  position: absolute; left: 0; top: 26px; width: 250px; border-radius: 34px;
  background: #0d1526; padding: 14px 12px; box-shadow: var(--shadow-lg); transform: rotate(-4deg);
}
.phone .screen { border-radius: 24px; background: #101b30; overflow: hidden; padding: 16px 14px 20px; }
.ph-top { display: flex; justify-content: space-between; color: #7d8aa5; font-size: 9px; margin-bottom: 14px; }
.rec {
  display: flex; align-items: center; gap: 8px; width: max-content;
  background: rgba(239, 68, 68, .14); border: 1px solid rgba(239, 68, 68, .4);
  color: #b91c1c; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 6px 12px; margin-bottom: 14px;
}
.rec .dot { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; animation: vf-pulse 1.6s infinite; }
@keyframes vf-pulse { 50% { opacity: .3; } }
.wave { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-bottom: 16px; }
.wave i { flex: 1; background: linear-gradient(180deg, #6366f1, #312e81); border-radius: 2px; animation: vf-wave 1.2s ease-in-out infinite; }
@keyframes vf-wave { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.said { color: #c7d0e0; font-size: 11.5px; line-height: 1.55; }
.said b { color: #fff; }
.chipfill {
  display: inline-block; margin: 3px 3px 0 0;
  background: rgba(99, 102, 241, .16); border: 1px solid rgba(99, 102, 241, .4);
  color: #a5b4fc; font-size: 9px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
}
.hero-doc {
  position: absolute; right: 0; top: 0; width: 330px; background: #fff; border-radius: 10px;
  box-shadow: var(--shadow-lg); overflow: hidden; transform: rotate(2.5deg); border: 1px solid var(--line);
}
.hero-doc .bar { height: 6px; background: #1f5c4a; }
.hero-doc .in { padding: 20px 22px 22px; }
.d-head { display: flex; justify-content: space-between; margin-bottom: 12px; }
.d-co { font-weight: 800; color: #1f5c4a; font-size: 14px; }
.d-trust { font-size: 8px; color: var(--faint); margin-top: 2px; }
.d-meta { text-align: right; font-size: 8.5px; color: var(--faint); }
.d-meta b { display: block; color: #1f5c4a; font-size: 9.5px; letter-spacing: .05em; }
.d-title { font-weight: 800; color: var(--ink); font-size: 15px; margin-bottom: 10px; }
.d-cards { display: flex; gap: 8px; margin-bottom: 12px; }
.d-card { flex: 1; background: #f8fafc; border: 1px solid #eef1f6; border-radius: 6px; padding: 8px 9px; }
.d-card b { display: block; font-size: 6.5px; letter-spacing: .07em; color: #1f5c4a; margin-bottom: 3px; }
.d-card span { font-size: 9.5px; color: var(--ink); font-weight: 600; }
.d-card small { display: block; font-size: 8px; color: var(--faint); font-weight: 400; }
.d-k { font-size: 7.5px; font-weight: 800; letter-spacing: .07em; color: #1f5c4a; margin: 9px 0 3px; }
.d-v { font-size: 10px; color: var(--body); }
.d-total { margin-top: 13px; display: flex; justify-content: flex-end; }
.d-total span { background: #1f5c4a; color: #fff; font-weight: 800; font-size: 11px; padding: 7px 14px; border-radius: 4px; }
.stamp {
  position: absolute; left: 190px; bottom: 6px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow-md); padding: 10px 16px;
  display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; color: var(--ink);
}
.stamp .ok { width: 22px; height: 22px; border-radius: 50%; background: #d1fae5; color: var(--good); display: grid; place-items: center; font-size: 12px; font-weight: 900; }

/* legacy hero visual (kept for any page still using it) */
.demo { position: relative; }
.speech { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; font-size: 14px; color: var(--body); max-width: 420px; }
.speech .mic { color: #ef4444; font-weight: 800; letter-spacing: .06em; font-size: 10.5px; }
.arrow { text-align: center; color: var(--faint); font-size: 20px; margin: 10px 0; }
.paper-demo { background: #fff; color: #1e293b; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-lg); font-size: 10.5px; line-height: 1.5; transform: rotate(.6deg); border: 1px solid var(--line); }
.paper-demo .bar { height: 6px; background: #1f5c4a; }
.paper-demo .inner { padding: 18px 22px 16px; }
.pd-head { display: flex; justify-content: space-between; align-items: flex-start; }
.pd-brand { display: flex; gap: 8px; align-items: center; }
.pd-logo { width: 26px; height: 26px; border-radius: 6px; background: #1f5c4a; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; }
.pd-co { font-weight: 800; color: #111827; font-size: 12.5px; }
.pd-trust { font-size: 7px; color: #6b7280; }
.pd-meta { text-align: right; font-size: 7px; color: #9ca3af; }
.pd-meta b { display: block; color: #1f5c4a; font-size: 8px; letter-spacing: .18em; }
.pd-title { font-size: 15px; font-weight: 800; color: #111827; margin-top: 10px; }
.pd-rule { height: 2px; background: #1f5c4a; margin: 7px 0 9px; }
.pd-k { font-size: 6.6px; font-weight: 800; letter-spacing: .14em; color: #1f5c4a; }
.pd-v { color: #374151; margin-bottom: 7px; font-size: 9.5px; }
.pd-total { display: flex; justify-content: flex-end; margin-top: 6px; }
.pd-total span { background: #1f5c4a; color: #fff; font-weight: 800; font-size: 10px; padding: 5px 12px; border-radius: 6px; }

/* ---------- stat strip ---------- */
.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding-top: 30px; padding-bottom: 30px; }
.stat b { display: block; font-size: 30px; font-weight: 850; color: var(--ink); letter-spacing: -.02em; }
.stat span { font-size: 13.5px; color: var(--faint); }

/* ---------- sections ---------- */
section { padding: 92px 0; }
section.soft { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kicker {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--indigo); background: rgba(79, 140, 255, .15); border-radius: 999px; padding: 6px 14px; margin-bottom: 14px;
}
h2.title { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.02em; color: var(--ink); margin-top: 4px; font-weight: 800; }
p.sub { margin-top: 12px; font-size: 17px; color: var(--muted); max-width: 44em; }

.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 40px; }
.card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; transition: transform .18s, box-shadow .18s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card h3 { font-size: 17px; color: var(--ink); font-weight: 750; }
.card p { margin-top: 8px; font-size: 14.5px; color: var(--muted); }
.card .glyph { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--indigo); text-transform: uppercase; }

/* alternating feature blocks */
.feat .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.feat h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; margin-bottom: 16px; }
.feat p.big { font-size: 17px; margin-bottom: 18px; color: var(--body); }
.ticks { list-style: none; padding: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; font-size: 15px; }
.ticks .tk {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%;
  background: #eef2ff; color: var(--indigo); display: grid; place-items: center; font-size: 11px; font-weight: 900;
}
.microstat {
  margin-top: 22px; display: inline-flex; align-items: baseline; gap: 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 18px; box-shadow: var(--shadow-md);
}
.microstat b { font-size: 24px; font-weight: 850; color: var(--indigo); }
.microstat span { font-size: 13px; color: var(--faint); }
.shot {
  position: relative; border-radius: 18px; padding: 34px; min-height: 320px;
  background: linear-gradient(160deg, #eef2ff, #fdf4e7); display: grid; place-items: center;
}
.shot.warm { background: linear-gradient(160deg, #fdf4e7, #eef2ff); }
.shot .inner-card { width: min(380px, 100%); background: #fff; border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow-lg); padding: 18px; }

/* App screenshots & videos: framed like the homepage monitor — a grey bezel on a
   dark screen, sitting on the page instead of the old light mat. The bezel is a
   touch thicker (3px) than the homepage's 2px. Only shots holding a direct image
   or video are reframed; decorative .shot mocks (with an .inner-card) keep their
   mat via :has(). */
/* The figure itself is the monitor: a grey bezel on a dark screen. :has() gives
   this (0,1,1) specificity so it beats each guide page's inline `.shot` (0,1,0)
   regardless of source order, reframing every app image/video in one place and
   normalizing the dark screen behind media that some pages set and others don't. */
.shot:has(> img), .shot:has(> video) {
  background: #0b1220; padding: 0; min-height: 0; display: block;
  border: 3px solid #5a6577; border-radius: 14px; overflow: hidden;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .72);
}
.shot > img, .shot > video { display: block; width: 100%; height: auto; background: #0b1220; }
.shot > figcaption {
  margin: 0; padding: 12px 16px; font-size: 13.5px; line-height: 1.5;
  color: var(--muted); background: var(--bg); border-top: 1px solid var(--line);
}

/* eleven style minis (feature block) */
.styles-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.style-mini { width: 92px; }
.style-mini .pg { height: 118px; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow-md); position: relative; overflow: hidden; transition: transform .2s; }
.style-mini:hover .pg { transform: translateY(-4px); }
.style-mini figcaption { text-align: center; font-size: 11px; font-weight: 700; color: var(--body); margin-top: 8px; }
.pg i { position: absolute; display: block; background: #dbe2ea; border-radius: 1px; }
.pg.classic i:nth-child(1) { top: 0; left: 0; right: 0; height: 5px; background: var(--indigo); }
.pg.classic i:nth-child(2) { top: 12px; left: 8px; width: 26px; height: 5px; background: var(--indigo); }
.pg.classic i:nth-child(3) { top: 24px; left: 8px; right: 8px; height: 3px; }
.pg.classic i:nth-child(4) { top: 32px; left: 8px; right: 14px; height: 3px; }
.pg.classic i:nth-child(5) { top: 40px; left: 8px; right: 10px; height: 3px; }
.pg.ledger i:nth-child(1) { top: 8px; left: 8px; width: 34px; height: 7px; background: var(--indigo); }
.pg.ledger i:nth-child(2) { top: 22px; left: 8px; right: 8px; height: 7px; background: var(--indigo); }
.pg.ledger i:nth-child(3) { top: 34px; left: 8px; right: 8px; height: 3px; }
.pg.ledger i:nth-child(4) { top: 42px; left: 8px; right: 8px; height: 3px; }
.pg.ledger i:nth-child(5) { bottom: 26px; right: 8px; width: 38px; height: 8px; background: var(--indigo); }
.pg.grid i:nth-child(1) { top: 8px; left: 8px; right: 8px; height: 7px; background: var(--indigo); }
.pg.grid i:nth-child(2) { top: 22px; left: 8px; width: 36px; height: 16px; background: none; border: 1px solid #cbd5e1; }
.pg.grid i:nth-child(3) { top: 22px; left: 48px; width: 36px; height: 16px; background: none; border: 1px solid #cbd5e1; }
.pg.grid i:nth-child(4) { top: 42px; left: 8px; right: 8px; height: 22px; background: none; border: 1px solid #cbd5e1; }
.pg.report i:nth-child(1) { top: 10px; left: 22px; right: 22px; height: 5px; background: var(--indigo); }
.pg.report i:nth-child(2) { top: 20px; left: 14px; right: 14px; height: 1.5px; background: #94a3b8; }
.pg.report i:nth-child(3) { top: 30px; left: 8px; right: 12px; height: 3px; }
.pg.report i:nth-child(4) { top: 38px; left: 8px; right: 16px; height: 3px; }
.pg.report i:nth-child(5) { top: 46px; left: 8px; right: 10px; height: 3px; }
.pg.chart i:nth-child(1) { top: 0; left: 0; right: 0; height: 3px; background: var(--indigo); }
.pg.chart i:nth-child(2) { top: 14px; left: 8px; width: 20px; height: 3px; background: #94a3b8; }
.pg.chart i:nth-child(3) { top: 14px; left: 34px; right: 8px; height: 3px; }
.pg.chart i:nth-child(4) { top: 26px; left: 8px; width: 20px; height: 3px; background: #94a3b8; }
.pg.chart i:nth-child(5) { top: 26px; left: 34px; right: 8px; height: 3px; }
.pg.rail i:nth-child(1) { top: 0; bottom: 0; left: 0; width: 20px; background: var(--indigo); }
.pg.rail i:nth-child(2) { top: 14px; left: 28px; width: 34px; height: 5px; background: #64748b; }
.pg.rail i:nth-child(3) { top: 28px; left: 28px; right: 8px; height: 3px; }
.pg.rail i:nth-child(4) { top: 36px; left: 28px; right: 12px; height: 3px; }
.pg.exec i:nth-child(1) { top: 10px; left: 8px; width: 30px; height: 3px; background: #475569; }
.pg.exec i:nth-child(2) { top: 10px; right: 8px; width: 18px; height: 3px; }
.pg.exec i:nth-child(3) { top: 18px; left: 8px; right: 8px; height: 1.5px; background: #475569; }
.pg.exec i:nth-child(4) { top: 28px; left: 8px; width: 44px; height: 5px; background: #64748b; }
.pg.exec i:nth-child(5) { top: 40px; left: 8px; right: 12px; height: 3px; }
.pg.boldpg i:nth-child(1) { top: 0; left: 0; right: 0; height: 22px; background: var(--indigo); }
.pg.boldpg i:nth-child(2) { top: 6px; left: 8px; width: 40px; height: 8px; background: rgba(255,255,255,.9); }
.pg.boldpg i:nth-child(3) { top: 32px; left: 8px; width: 3px; height: 12px; background: var(--indigo); }
.pg.boldpg i:nth-child(4) { top: 34px; left: 15px; right: 12px; height: 3px; }
.pg.boldpg i:nth-child(5) { bottom: 24px; right: 8px; width: 34px; height: 8px; background: var(--indigo); }
.pg.compactpg i:nth-child(1) { top: 8px; left: 8px; right: 8px; height: 2px; background: var(--indigo); }
.pg.compactpg i:nth-child(2) { top: 14px; left: 8px; width: 36px; height: 12px; background: none; border: 1px solid #cbd5e1; }
.pg.compactpg i:nth-child(3) { top: 14px; left: 48px; width: 36px; height: 12px; background: none; border: 1px solid #cbd5e1; }
.pg.compactpg i:nth-child(4) { top: 29px; left: 8px; width: 36px; height: 12px; background: none; border: 1px solid #cbd5e1; }
.pg.compactpg i:nth-child(5) { top: 29px; left: 48px; width: 36px; height: 12px; background: none; border: 1px solid #cbd5e1; }
.pg.framepg i:nth-child(1) { top: 5px; left: 5px; right: 5px; bottom: 5px; background: none; border: 1.5px solid var(--indigo); }
.pg.framepg i:nth-child(2) { top: 14px; left: 26px; right: 26px; height: 4px; background: var(--indigo); }
.pg.framepg i:nth-child(3) { top: 24px; left: 34px; right: 34px; height: 2px; background: #94a3b8; }
.pg.framepg i:nth-child(4) { top: 32px; left: 14px; right: 14px; height: 3px; }
.pg.framepg i:nth-child(5) { top: 40px; left: 14px; right: 20px; height: 3px; }
.style-mini .pg.onyxpg { background: #16181d; border-color: #2a2e38; }
.pg.onyxpg i:nth-child(1) { top: 0; left: 0; right: 0; height: 3px; background: var(--indigo); }
.pg.onyxpg i:nth-child(2) { top: 12px; left: 8px; width: 34px; height: 4px; background: #cbd5e1; }
.pg.onyxpg i:nth-child(3) { top: 24px; left: 8px; right: 8px; height: 12px; background: #1f2229; border: 1px solid #2a2e38; }
.pg.onyxpg i:nth-child(4) { top: 40px; left: 8px; right: 8px; height: 12px; background: #1f2229; border: 1px solid #2a2e38; }
.pg.onyxpg i:nth-child(5) { bottom: 22px; right: 8px; width: 30px; height: 7px; background: var(--indigo); }

/* ---------- industry tiles ---------- */
.ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 36px; }
.ind {
  border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--bg);
  transition: transform .18s, box-shadow .18s; display: block;
}
.ind:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; }
.ind .sw { width: 34px; height: 6px; border-radius: 3px; margin-bottom: 12px; }
.ind b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 3px; }
.ind span { font-size: 12.5px; color: var(--faint); }

/* ---------- dark gallery band ---------- */
.gallery { background: var(--navy); color: #aab4c6; }
.gallery h2.title, .gallery h2 { color: #fff; }
.gallery .kicker { background: rgba(99, 102, 241, .18); color: #a5b4fc; }
.gallery p.sub { color: #8a94a6; }
.g-row { display: flex; gap: 14px; overflow-x: auto; padding: 26px 2px 18px; }
.g-card { flex: 0 0 200px; background: #101b30; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; overflow: hidden; }
.g-card .paper { height: 150px; background: #0d1526; display: grid; place-items: center; padding: 14px; }
.g-card .sheet { width: 100%; height: 100%; background: #fff; border-radius: 4px 4px 0 0; position: relative; overflow: hidden; box-shadow: 0 8px 22px rgba(0, 0, 0, .4); }
.g-card .sheet i { position: absolute; display: block; background: #dbe2ea; border-radius: 1px; }
.g-card .meta { padding: 12px 14px 14px; }
.g-card .meta b { display: block; color: #fff; font-size: 13px; }
.g-card .meta span { font-size: 11px; color: #7d8aa5; }
.g-price { display: inline-block; margin-top: 8px; font-size: 10px; font-weight: 800; color: #fbbf24; border: 1px solid rgba(251, 191, 36, .35); border-radius: 999px; padding: 2px 9px; }

/* steps (how it works) */
.steps { counter-reset: step; }
.step { position: relative; padding-left: 58px; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--blue-dark); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px;
  box-shadow: 0 8px 20px rgba(79, 140, 255, .28);
}

/* template gallery (store page cards) */
.tpl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.tpl {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 20px;
  background: var(--bg); display: flex; flex-direction: column; gap: 8px;
}
.tpl .cat { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.tpl h3 { font-size: 16px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.tpl p { font-size: 13.5px; color: var(--muted); flex: 1; }
.tpl .fields { font-size: 11.5px; color: var(--faint); }
.badge {
  display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
  padding: 2.5px 9px; border-radius: 999px; vertical-align: 2px;
}
.badge-pro { background: var(--blue-dark); color: #fff; }
.badge-free { background: #dfeae3; color: var(--blue-dark); }
/* Neutral format tag for templates that produce a designed layout. Not a plan
   or a rank — every template is free; this only says "this one comes out
   laid-out." Tied to the gold styled-card highlight. */
.badge-styled { background: rgba(79,140,255,.16); color: #9fc0ff; }

/* premium showcase paper cards */
.showcase { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-top: 40px; }
.mini-doc {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-md); font-size: 10px; line-height: 1.5; color: #1e293b;
  transition: transform .18s, box-shadow .18s;
}
.mini-doc:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.mini-doc .accent-bar { height: 5px; }
.mini-doc .inner { padding: 16px 20px; }
.md-cards { display: flex; gap: 8px; margin-top: 8px; }
.md-card { flex: 1; background: #f8fafc; border: 1px solid #eef1f5; border-radius: 7px; padding: 7px 9px; }
.md-card .k { font-size: 6px; font-weight: 800; letter-spacing: .14em; }
.md-card .n { font-weight: 700; color: #111827; font-size: 9px; }
.md-card .d { color: #64748b; font-size: 7.5px; }
.md-band { display: flex; gap: 6px; margin-top: 8px; }
.md-chip { flex: 1; text-align: center; border-radius: 6px; padding: 5px 0; font-weight: 800; }
.md-chip .n { font-size: 11px; } .md-chip .t { font-size: 5.5px; letter-spacing: .1em; }

/* pricing */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 22px; margin: 40px auto 0; max-width: 1240px; }
.billtoggle { display: inline-flex; gap: 4px; margin: 30px auto 0; border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.billtoggle button { border: none; background: none; cursor: pointer; border-radius: 999px; padding: 9px 18px; font-size: 13.5px; font-weight: 700; color: var(--faint); }
.billtoggle button.active { background: var(--blue-dark); color: #fff; }
.price .pa { display: none; }
body.annual .price .pm { display: none; }
body.annual .price .pa { display: inline; }
/* Billing cadence line under the price: both modes show a per-month figure, the
   note says how it's billed (and the annual total). */
.price .bill-note { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--muted); min-height: 1.2em; }
.price .bill-note small { font-size: 12.5px; font-weight: 500; color: var(--faint); }
.enterprise { max-width: 1060px; margin: 22px auto 0; border: 1px solid var(--line); border-radius: 18px; padding: 24px 30px; background: var(--bg); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.enterprise h3 { font-size: 18px; margin: 0 0 5px; }
.enterprise p { margin: 0; color: var(--faint); font-size: 14px; max-width: 640px; }
.price { border: 1px solid var(--line); border-radius: 18px; padding: 30px; background: var(--bg); }
.price.featured { border: 2px solid var(--indigo); position: relative; box-shadow: 0 0 0 1px var(--indigo), var(--shadow-md); }
.price .plan { font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.price .amount { font-size: 42px; font-weight: 850; color: var(--ink); margin-top: 6px; letter-spacing: -1px; }
.price .amount small { font-size: 15px; color: var(--muted); font-weight: 600; }
.price ul { margin: 22px 0 26px; padding: 0; list-style: none; }
.price li { padding: 7px 0 7px 26px; position: relative; font-size: 14.5px; }
.price li::before { content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 800; }
.price li.no::before { content: "—"; color: var(--faint); }
.price li.no { color: var(--faint); }
.soon {
  position: absolute; top: -13px; right: 22px;
  background: var(--blue-dark); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .06em;
  padding: 4px 14px; border-radius: 999px;
}

/* CTA band */
.cta-band { position: relative; overflow: hidden; background: var(--bg); color: var(--ink); text-align: center; padding: 110px 0; }
.cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(560px 320px at 50% 0%, rgba(79, 70, 229, .10), transparent 70%); }
.cta-band h2 { position: relative; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.02em; font-weight: 850; color: var(--ink); }
.cta-band p { position: relative; color: var(--muted); margin-top: 12px; font-size: 17px; }
.cta-band .btn { position: relative; margin-top: 28px; }

/* ---------- dark mega footer ---------- */
.site-footer { background: var(--navy); color: #8a94a6; padding: 64px 0 40px; border-top: 0; }
.site-footer .wrap { display: block; }
.site-footer .cols { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 40px; }
.site-footer h2 { color: #fff; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer a { display: block; color: #8a94a6; text-decoration: none; font-size: 14px; margin-bottom: 9px; }
.site-footer a:hover { color: #fff; text-decoration: none; }
.site-footer .cols .who { display: block; color: #8a94a6; font-size: 14px; margin-bottom: 9px; }

/* Accessibility: skip-to-content link (visible only on focus) + underline for
   in-content links that sit outside <p> (e.g. guide callouts), so they don't
   rely on colour alone. */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--blue-dark); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.skip-link:focus { left: 12px; top: 12px; }
.callout a { text-decoration: underline; text-underline-offset: 2px; }
.site-footer .brand { color: #fff; margin-bottom: 12px; display: inline-flex; }
.site-footer .desc { font-size: 13.5px; max-width: 280px; color: #8a94a6; }
.site-footer .legal {
  border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 22px; font-size: 12.5px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: #8791a4; width: auto; margin-top: 0;
}
/* The entity line. Small, but it is the thing that makes a footer read as a
   real business rather than a landing page — who you are actually buying from. */
.site-footer .entity { display: inline; color: #8a94a6; }
.site-footer .desc .where { display: block; margin-top: 10px; font-size: 12.5px; color: #8a94a6; }

/* ---------- compare all features ----------
   The cards are a pitch and list inclusions only; this is the spec sheet, for
   the reader who wants the whole truth before paying. Modelled on how Slack,
   Notion and Linear do it: included is a mark, NOT-included is a blank cell —
   never an X. A cross on the cheaper plan reads as scolding someone for
   considering it, at exactly the moment you want them to feel fine starting
   there. Numbers appear as numbers, because "25" answers the question that
   "limited" only raises. */
.compare-wrap { overflow-x: auto; margin: 46px auto 0; max-width: 1240px; }
.compare { width: 100%; min-width: 640px; border-collapse: collapse; text-align: left; }
.compare caption { text-align: left; font-size: 20px; font-weight: 800; color: var(--ink); padding-bottom: 4px; }
.compare th, .compare td { padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.compare thead th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--line); }
.compare thead th.plan-col, .compare td.cell { text-align: center; width: 132px; }
.compare thead th.is-pro { color: var(--indigo); }
.compare tr.group th {
  padding: 14px 14px; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--indigo); font-weight: 800;
  background: rgba(79, 140, 255, .10);
  border-top: 1px solid rgba(79, 140, 255, .32); border-bottom: 1px solid rgba(79, 140, 255, .32);
}
/* Each group repeats the plan names. A sticky <thead> would be the usual answer
   and it CANNOT work here: .compare-wrap needs overflow-x so the table scrolls
   inside itself on a phone instead of dragging the page sideways, and that
   overflow makes the wrapper the sticky containing block — the header would pin
   to a box that never scrolls vertically, i.e. never pin at all. Repeating the
   labels every few rows answers the same question ("which column is this tick
   in?") and survives horizontal scrolling, which a pinned header would not. */
.compare tr.group td {
  padding: 14px 14px; text-align: center; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); font-weight: 700;
  background: rgba(79, 140, 255, .10);
  border-top: 1px solid rgba(79, 140, 255, .32); border-bottom: 1px solid rgba(79, 140, 255, .32);
}
.compare td.feature { color: var(--body); }
.compare td.feature small { display: block; color: var(--faint); font-size: 12.5px; line-height: 1.45; }
/* Included. The tick is decorative — screen readers get the word. */
.compare .yes::before { content: "✓"; color: var(--good); font-weight: 800; font-size: 16px; }
.compare .val { color: var(--ink); font-weight: 700; font-size: 13.5px; }
/* Mobile plan selector. Four plan columns cannot stay legible side-by-side on a
   phone (the names break to FR/EE), and an internal horizontal scroller would
   make the wrapper wider than the viewport. Instead the visitor picks ONE plan
   with .plan-picker and the table shows just the feature column plus that plan,
   comfortably readable. The page itself never scrolls sideways. */
.plan-picker-wrap { display: none; }
@media (max-width: 700px) {
  .plan-picker-wrap { display: block; margin: 30px 0 -4px; }
  .plan-picker-wrap .pp-label {
    display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); font-weight: 700; margin: 0 0 8px;
  }
  .plan-picker { display: flex; gap: 6px; }
  .plan-picker button {
    flex: 1; padding: 10px 4px; border: 1px solid var(--line); background: var(--bg);
    border-radius: 10px; font: inherit; font-size: 13.5px; font-weight: 700;
    color: var(--muted); cursor: pointer; -webkit-appearance: none;
  }
  .plan-picker button.on { background: var(--blue-dark); color: #fff; border-color: var(--blue-dark); }

  .compare-wrap { overflow-x: visible; }
  .compare { min-width: 0; width: 100%; table-layout: fixed; }
  .compare th, .compare td { padding: 10px 6px; font-size: 13px; overflow-wrap: anywhere; vertical-align: top; }
  .compare td.feature, .compare thead th:first-child, .compare tr.group th { width: 62%; font-size: 13px; padding-left: 0; }
  .compare td.feature small { font-size: 11.5px; line-height: 1.45; }
  .compare thead th.plan-col, .compare td.cell { width: 38%; text-align: center; }
  .compare thead th { font-size: 12px; letter-spacing: .03em; }
  .compare .val { font-size: 12.5px; font-weight: 700; }
  /* hide every plan column, then reveal only the selected one */
  .compare thead th:nth-child(n+2), .compare tbody td:nth-child(n+2) { display: none; }
  .compare.sel-free  thead th:nth-child(2), .compare.sel-free  tbody td:nth-child(2),
  .compare.sel-basic thead th:nth-child(3), .compare.sel-basic tbody td:nth-child(3),
  .compare.sel-pro   thead th:nth-child(4), .compare.sel-pro   tbody td:nth-child(4),
  .compare.sel-team  thead th:nth-child(5), .compare.sel-team  tbody td:nth-child(5) { display: table-cell; }
}
/* Not included is EMPTY on purpose. .sr-only carries the meaning to a screen
   reader, which cannot see that a cell is blank. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* page hero (inner pages) */
.page-hero { padding: 72px 0 8px; position: relative; overflow: hidden; }
.page-hero::before {
  content: ''; position: absolute; inset: -60% -20% auto; height: 160%; pointer-events: none;
  background: radial-gradient(600px 320px at 20% 0%, rgba(79, 140, 255, .12), transparent 60%);
}
.page-hero h1 { position: relative; font-size: clamp(34px, 4vw, 46px); letter-spacing: -.02em; color: var(--ink); font-weight: 850; }
.page-hero p { position: relative; margin-top: 12px; font-size: 17px; color: var(--muted); max-width: 46em; }
/* hero with a color photo alongside the copy (a consistent color anchor on
   otherwise text-heavy pages) */
.page-hero.has-media .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.page-hero.has-media .hero-copy { position: relative; z-index: 1; }
.page-hero.has-media .hero-copy p { max-width: 40em; }
.hero-media { position: relative; z-index: 1; margin: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-md); }
.hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; background: #0b1220; }
@media (max-width: 820px) {
  .page-hero.has-media .wrap { grid-template-columns: 1fr; gap: 26px; }
  .hero-media img { aspect-ratio: 16 / 9; }
}

/* ---------- use-case sub-pages: benefit strip + role chips (/uses/*) ---------- */
.sp-benes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 46px 0 0; }
.sp-bene { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.sp-bene .ic { width: 40px; height: 40px; border-radius: 10px; background: rgba(79, 140, 255, .12); color: var(--blue); display: grid; place-items: center; margin-bottom: 12px; }
.sp-bene .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-bene h3 { margin: 0 0 6px; font-size: 16px; color: var(--ink); }
.sp-bene p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.55; }
.sp-who-h { margin-top: 26px; }
@media (max-width: 720px) { .sp-benes { grid-template-columns: 1fr; } }

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .hero .wrap, .feat .wrap { grid-template-columns: 1fr; }
  .stage { min-height: 500px; margin-top: 10px; }
}
@media (max-width: 900px) {
  .grid3, .tpl-grid { grid-template-columns: 1fr 1fr; }
  .showcase, .grid2, .price-grid { grid-template-columns: 1fr; }
  .ind-grid { grid-template-columns: repeat(2, 1fr); }
  .stats .wrap { grid-template-columns: repeat(2, 1fr); }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
  .nav a.hide-sm { display: none; }
}
@media (max-width: 600px) {
  .grid3, .tpl-grid { grid-template-columns: 1fr; }
  h2.title { font-size: 26px; }
  .stage { transform: scale(.82); transform-origin: top left; min-height: 460px; }
}