/* =============================================================================
   PrintVault marketing site
   -----------------------------------------------------------------------------
   The palette is the app's "nebula" theme, lifted verbatim from
   X:\PrintVault\app\static\style.css so the site and the product read as one
   thing. The blueprint grid, the 135deg drafting hatch and the CAD corner
   marks on hover are the same three motifs the app uses.
   ========================================================================== */

/* ---------- tokens ------------------------------------------------------ */
:root {
  --bg:        #07080f;
  --bg2:       #10142a;
  --panel:     #171d3a;
  --panel2:    #212a4f;
  --line:      #33406e;
  --line-soft: #232c50;
  --text:      #e9ecff;
  --dim:       #8e97c6;
  --dimmer:    #6b74a3;
  --accent:    #8b5cf6;
  --accent2:   #c4b5fd;
  --accent-soft: rgba(139, 92, 246, .20);
  --accent-line: rgba(139, 92, 246, .38);
  --grid:       rgba(142, 151, 198, .07);
  --grid-major: rgba(142, 151, 198, .11);
  --glow:       rgba(139, 92, 246, .10);
  --cyan:  #22d3ee;
  --green: #4ade80;
  --red:   #fb7185;
  --gold:  #fbbf24;

  --radius:    12px;
  --radius-lg: 18px;
  --wrap:      1160px;

  --font: "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui,
          -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;

  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .35);
  --shadow:    0 12px 34px rgba(0, 0, 0, .45);
  --shadow-lg: 0 32px 90px rgba(0, 0, 0, .62);
}

/* ---------- reset ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: var(--accent2); text-decoration: none; }
a:hover { color: var(--text); }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent-soft); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 3px;
  border-radius: 4px;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--panel2); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--accent); color: #14092b; font-weight: 700;
  padding: 10px 18px; border-radius: 0 0 10px 10px; transition: top .15s;
}
.skip-link:focus { top: 0; color: #14092b; }

/* ---------- layout ------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.wrap-narrow { max-width: 820px; }

section { position: relative; }
.sec { padding: 96px 0; }
.sec-sm { padding: 64px 0; }
.sec-tight { padding-top: 0; }

/* The blueprint rule. Identical construction to the app's #main: a fine 26px
   grid, a heavier 130px major line, and one accent bloom for depth. */
.blueprint {
  background:
    repeating-linear-gradient(0deg,  var(--grid-major) 0 1px, transparent 1px 130px),
    repeating-linear-gradient(90deg, var(--grid-major) 0 1px, transparent 1px 130px),
    repeating-linear-gradient(0deg,  var(--grid) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 26px);
}

.hatch {
  background-image: repeating-linear-gradient(135deg, var(--grid) 0 1px, transparent 1px 9px);
}

.band {
  border-block: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--bg2), var(--bg));
}

.divider { height: 1px; background: var(--line-soft); border: 0; }

/* ---------- typography -------------------------------------------------- */
h1, h2, h3, h4 { line-height: 1.15; font-weight: 700; letter-spacing: -.022em; }

h1 { font-size: clamp(2.4rem, 5.6vw, 4.1rem); font-weight: 800; letter-spacing: -.032em; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.65rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); }
h4 { font-size: 1.02rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .72rem; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--accent2);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent));
}

.lede { font-size: clamp(1.05rem, 1.6vw, 1.24rem); color: var(--dim); max-width: 62ch; }
.sec-head { max-width: 66ch; margin-bottom: 46px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head p { color: var(--dim); font-size: 1.06rem; margin-top: 14px; }

.text-accent { color: var(--accent2); }
.text-dim { color: var(--dim); }
/* Filenames and paths are long and have no spaces. Left alone they set a
   min-content width that blows out the whole grid track on a phone. */
.mono { font-family: var(--mono); font-size: .88em; overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }

/* ---------- buttons ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: 11px; border: 1px solid transparent;
  font-size: .97rem; font-weight: 700; letter-spacing: -.005em;
  cursor: pointer; white-space: nowrap; text-align: center;
  transition: transform .15s ease, box-shadow .18s ease, background .18s, border-color .18s, color .18s;
}
.btn:active { transform: translateY(1px); }

/* Deeper violet + white text. The old pairing was #14092b on #9d72f8, which
   measured 4.9:1 - technically a pass, but dark-on-lavender reads muddy rather
   than clickable. White on violet-600/700 measures 6.4:1 and looks like a
   button. `a.btn-primary` (0,1,1) is deliberate: `.nav-links a` has the same
   specificity and was winning, painting the nav CTA in --dim on violet at
   1.36:1 - effectively invisible text on its own button. */
.btn-primary,
a.btn-primary {
  background: linear-gradient(180deg, #7c3aed, #6d28d9);
  color: #fff;
  box-shadow: 0 8px 26px rgba(109, 40, 217, .40), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-primary:hover,
a.btn-primary:hover {
  color: #fff; filter: brightness(1.12);
  box-shadow: 0 12px 34px rgba(109, 40, 217, .52), inset 0 1px 0 rgba(255, 255, 255, .26);
}

.btn-ghost {
  background: rgba(23, 29, 58, .72); color: var(--text); border-color: var(--line);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent2); background: var(--panel); }

.btn-link { padding: 0; background: none; color: var(--accent2); font-weight: 600; }
.btn-link:hover { color: var(--text); }
.btn-lg { padding: 17px 34px; font-size: 1.04rem; }
.btn-sm { padding: 9px 17px; font-size: .87rem; border-radius: 9px; }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn-row.center { justify-content: center; }

.cta-note { font-size: .84rem; color: var(--dimmer); margin-top: 16px; }
.cta-note strong { color: var(--dim); font-weight: 600; }

/* ---------- badges & chips ---------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent2); font-size: .78rem; font-weight: 600; letter-spacing: .01em;
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex: none; }
.badge-neutral { background: var(--panel); border-color: var(--line); color: var(--dim); }

.chip {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line-soft);
  color: var(--dim); font-size: .76rem; font-weight: 600;
  font-family: var(--mono); letter-spacing: .02em;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

kbd {
  font-family: var(--mono); font-size: .8em; padding: 2px 7px;
  background: var(--panel2); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 6px; color: var(--text);
}

/* ---------- header ------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background .25s, border-color .25s, backdrop-filter .25s;
}
.site-header.stuck {
  background: rgba(7, 8, 15, .82);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom-color: var(--line-soft);
}
.nav {
  display: flex; align-items: center; gap: 30px;
  height: 72px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 1.22rem; font-weight: 300; letter-spacing: .3px; color: var(--text);
  flex: none;
}
.brand:hover { color: var(--text); }
.brand b { font-weight: 700; color: var(--accent); }
.brand-mark { width: 26px; height: 26px; flex: none; }

.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links a {
  padding: 8px 14px; border-radius: 9px; color: var(--dim);
  font-size: .93rem; font-weight: 600; transition: color .15s, background .15s;
}
.nav-links a:hover { color: var(--text); background: var(--panel); }
.nav-links a.current { color: var(--accent2); background: var(--accent-soft); }
/* The buy button lives inside .nav-links, so `.nav-links a` above was painting
   it --dim on violet - 1.36:1, effectively invisible text on its own button.
   Same specificity as `a.btn-primary`, and it comes later, so it won. This
   override has to sit AFTER it, not just be more specific. */
.nav-links a.btn-primary { color: #fff; }
.nav-links a.btn-primary:hover { color: #fff; background: none; }
.nav-cta { margin-left: 12px; }

.nav-toggle {
  display: none; margin-left: auto;
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle span {
  display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--text);
  position: relative; transition: background .18s;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 2px;
  border-radius: 2px; background: var(--text); transition: transform .2s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------- hero -------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  padding: 76px 0 92px;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    repeating-linear-gradient(0deg,  var(--grid-major) 0 1px, transparent 1px 130px),
    repeating-linear-gradient(90deg, var(--grid-major) 0 1px, transparent 1px 130px),
    repeating-linear-gradient(0deg,  var(--grid) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 26px);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}
.hero::after {
  content: ""; position: absolute; z-index: -1;
  top: -340px; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 760px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(139, 92, 246, .19), transparent 72%);
}
.hero-inner { text-align: center; max-width: 880px; margin-inline: auto; }
.hero h1 { margin: 22px 0 20px; }
.hero h1 .grad {
  background: linear-gradient(100deg, var(--accent2) 5%, #7dd8ff 55%, var(--accent2) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lede { margin-inline: auto; font-size: clamp(1.06rem, 1.7vw, 1.28rem); }
.hero .btn-row { margin-top: 34px; }

.trust-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
  margin-top: 30px; font-size: .86rem; color: var(--dimmer);
}
.trust-row span { display: inline-flex; align-items: center; gap: 8px; }
.trust-row svg { width: 15px; height: 15px; color: var(--green); flex: none; }

/* ---------- app mockup (a CSS recreation of the real UI) ---------------- */
.shot {
  position: relative; margin-top: 58px;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: var(--bg);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(139, 92, 246, .1);
  overflow: hidden;
}
.shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.shot-glow {
  position: absolute; inset: -2px; z-index: -1; border-radius: calc(var(--radius-lg) + 2px);
  background: linear-gradient(120deg, var(--accent), transparent 40%, var(--cyan));
  opacity: .28; filter: blur(22px);
}
.shot-wrap { position: relative; }

.win-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--bg2));
}
.win-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.win-title {
  margin-inline: auto; font-size: .78rem; color: var(--dimmer);
  font-family: var(--mono); letter-spacing: .03em;
}

.mock { display: flex; min-height: 470px; font-size: 13px; }

.mock-side {
  width: 208px; flex: none; padding: 15px 11px;
  border-right: 1px solid var(--line);
  background:
    repeating-linear-gradient(135deg, var(--grid) 0 1px, transparent 1px 9px),
    radial-gradient(120% 60% at 50% -10%, var(--glow) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  display: flex; flex-direction: column;
}
.mock-logo { font-size: 17px; font-weight: 300; padding: 3px 7px 15px; letter-spacing: .3px; }
.mock-logo b { color: var(--accent); font-weight: 700; }
.mock-logo .cube { color: var(--accent); }
.mock-sec {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--dim); padding: 11px 8px 4px;
}
.mock-nav { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 8px; color: var(--text); }
.mock-nav.on {
  background: linear-gradient(90deg, var(--accent-soft), transparent);
  color: var(--accent2); box-shadow: inset 2px 0 0 var(--accent);
}
.mock-nav .pill {
  margin-left: auto; background: var(--panel2); color: var(--dim);
  border-radius: 20px; font-size: 10px; padding: 0 7px;
}
.mock-nav .pill.warn { background: rgba(251, 191, 36, .15); color: var(--gold); }
.mock-swatches { display: flex; gap: 6px; margin-top: auto; padding: 12px 5px 2px; }
.mock-swatches i {
  width: 17px; height: 17px; border-radius: 50%; outline: 1px solid var(--line);
}
.sw-fil { background: linear-gradient(135deg, #ff8a3d 50%, #12171f 50%); }
.sw-mol { background: linear-gradient(135deg, #ff7a1a 50%, #191310 50%); }
.sw-neb { background: linear-gradient(135deg, #8b5cf6 50%, #10142a 50%); border: 2px solid var(--text); }
.sw-wrk { background: linear-gradient(135deg, #ffb020 50%, #141821 50%); }

.mock-main {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  background:
    radial-gradient(90% 55% at 88% -8%, var(--glow) 0%, transparent 62%),
    repeating-linear-gradient(0deg,  var(--grid-major) 0 1px, transparent 1px 130px),
    repeating-linear-gradient(90deg, var(--grid-major) 0 1px, transparent 1px 130px),
    repeating-linear-gradient(0deg,  var(--grid) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 26px),
    var(--bg);
}
.mock-top {
  display: flex; gap: 9px; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.mock-search {
  flex: 1; max-width: 380px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 9px;
  padding: 7px 13px; color: var(--dimmer); font-size: 12.5px;
}
.mock-select {
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  padding: 7px 11px; color: var(--dim); font-size: 12px;
}
.mock-prog { margin-left: auto; font-size: 10.5px; color: var(--dimmer); font-family: var(--mono); }
.mock-crumbs {
  padding: 8px 16px; border-bottom: 1px solid var(--line);
  font-size: 11.5px; color: var(--dim); background: rgba(23, 29, 58, .45);
}
.mock-crumbs b { color: var(--text); font-weight: 600; }
.mock-body { padding: 15px; flex: 1; }
.mock-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}

.mcard {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; position: relative;
}
.mcard-thumb {
  height: 92px; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%,
    hsla(var(--h, 250), 45%, 55%, .16) 0%, hsla(var(--h, 250), 45%, 40%, .07) 45%, #131834 78%);
  border-bottom: 2px solid hsla(var(--h, 250), 45%, 60%, .35);
}
.mcard-thumb svg { width: 62%; height: 62%; opacity: .92; }
.mcard-ext {
  position: absolute; bottom: 5px; right: 6px;
  font-size: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: hsla(var(--h, 250), 60%, 74%, .95);
  background: hsla(var(--h, 250), 45%, 30%, .38);
  border: 1px solid hsla(var(--h, 250), 45%, 55%, .4);
  border-radius: 4px; padding: 0 5px;
}
.mcard-lock {
  position: absolute; top: 6px; left: 6px; font-size: 10px;
  background: rgba(251, 191, 36, .9); color: #40300a;
  border-radius: 5px; padding: 0 5px; font-weight: 700;
}
.mcard-body { padding: 8px 9px; }
.mcard-name {
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.mcard-meta { display: flex; align-items: center; gap: 5px; margin-top: 5px; }
.mcard-chip {
  font-size: 9px; background: var(--panel2); color: var(--dim);
  padding: 0 7px; border-radius: 20px;
}
.mcard-count {
  margin-left: auto; font-size: 10px; font-weight: 700; color: var(--accent2);
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: 20px; padding: 0 8px;
}
/* CAD viewport corner marks, exactly as the app draws them */
.mcard::before, .mcard::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  pointer-events: none; opacity: 0; transition: opacity .2s ease;
  border-color: var(--accent); border-style: solid; border-width: 0;
}
.mcard::before { top: 5px; right: 5px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 4px; }
.mcard::after  { bottom: 5px; left: 5px; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 4px; }
.mcard.hot::before, .mcard.hot::after, .mcard:hover::before, .mcard:hover::after { opacity: .9; }
.mcard.hot { border-color: var(--accent); box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 0 1px var(--accent-soft); }

/* list rows used by the sweep / activity mockups */
.mock-panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 13px; margin-bottom: 11px;
}
.mock-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 4px; border-bottom: 1px solid var(--line-soft); font-size: 12px;
}
.mock-row:last-child { border-bottom: 0; }
.mock-row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-box {
  width: 14px; height: 14px; border-radius: 4px; flex: none;
  border: 1px solid var(--line); background: var(--bg2);
}
.mock-box.on { background: var(--accent); border-color: var(--accent); position: relative; }
.mock-box.on::after {
  content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid #14092b; border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.tag { font-size: 9px; padding: 1px 7px; border-radius: 4px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; flex: none; }
.tag-folder { background: rgba(34, 211, 238, .15); color: var(--cyan); }
.tag-zip    { background: rgba(251, 191, 36, .15); color: var(--gold); }
.tag-single { background: rgba(74, 222, 128, .13); color: var(--green); }
.tag-undo   { background: rgba(139, 92, 246, .18); color: var(--accent2); }

.mock-btn {
  display: inline-block; padding: 6px 14px; border-radius: 9px;
  font-size: 11.5px; font-weight: 700;
  background: linear-gradient(180deg, #9d72f8, var(--accent)); color: #14092b;
}
.mock-btn.ghost { background: var(--panel2); color: var(--text); border: 1px solid var(--line); }

/* ---------- generic cards ----------------------------------------------- */
/* Grid and flex children default to min-width:auto, which refuses to shrink below
   their longest unbreakable word. Every overflow bug on this site traced back
   here, so it is fixed once, centrally. */
.grid > *, .split > *, .steps > *, .tiles > *, .foot-grid > *,
.docs-layout > *, .price-list li, .checks li { min-width: 0; }
.prose code, .prose a { overflow-wrap: anywhere; }
.card, .split-text, .price-card, .prose, .callout, .checks li, .price-list li { overflow-wrap: break-word; }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  position: relative; overflow: hidden;
  background: linear-gradient(170deg, var(--panel), rgba(16, 20, 42, .92));
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 26px 24px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.card:hover { border-color: var(--accent-line); transform: translateY(-3px); box-shadow: var(--shadow); }
/* CAD corner marks, same motif as the app's cards */
.card::before, .card::after {
  content: ""; position: absolute; width: 15px; height: 15px;
  pointer-events: none; opacity: 0; transition: opacity .2s ease;
  border-color: var(--accent); border-style: solid; border-width: 0;
}
.card::before { top: 8px; right: 8px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 4px; }
.card::after  { bottom: 8px; left: 8px; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 4px; }
.card:hover::before, .card:hover::after { opacity: .8; }

.card h3 { margin-bottom: 10px; font-size: 1.09rem; }
.card p { color: var(--dim); font-size: .95rem; }
.card p + p { margin-top: 12px; }

.card-icon {
  width: 44px; height: 44px; border-radius: 11px;
  display: grid; place-items: center; margin-bottom: 18px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent2);
}
.card-icon svg { width: 21px; height: 21px; }
.card-icon.cyan  { background: rgba(34, 211, 238, .13); border-color: rgba(34, 211, 238, .35); color: var(--cyan); }
.card-icon.green { background: rgba(74, 222, 128, .12); border-color: rgba(74, 222, 128, .32); color: var(--green); }
.card-icon.gold  { background: rgba(251, 191, 36, .12); border-color: rgba(251, 191, 36, .32); color: var(--gold); }

.card-flat { background: var(--panel); }
.card-quiet:hover { transform: none; }

/* stat tiles — the app's .tile */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tile {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 24px 16px; text-align: center;
}
.tile .big {
  font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; color: var(--accent2);
  letter-spacing: -.03em; line-height: 1.1;
}
.tile .lbl {
  font-size: .68rem; color: var(--dim); text-transform: uppercase;
  letter-spacing: .13em; margin-top: 7px; font-weight: 600;
}

/* ---------- split (text + visual) --------------------------------------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 62px; align-items: center;
}
.split.reverse .split-visual { order: -1; }
.split + .split { margin-top: 104px; }
.split-text h2 { font-size: clamp(1.6rem, 2.9vw, 2.15rem); margin-bottom: 16px; }
.split-text > p { color: var(--dim); font-size: 1.03rem; }
.split-text > p + p { margin-top: 14px; }

.checks { list-style: none; margin-top: 22px; display: grid; gap: 11px; }
.checks li { display: flex; gap: 11px; align-items: flex-start; font-size: .96rem; color: var(--dim); }
.checks li strong { color: var(--text); font-weight: 600; }
.checks svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--accent); }

/* ---------- steps ------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step { position: relative; padding-top: 8px; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  display: block; font-family: var(--mono); font-size: 1.9rem; font-weight: 700;
  color: var(--accent); opacity: .5; letter-spacing: -.04em; line-height: 1;
  margin-bottom: 14px;
}
.step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.step p { color: var(--dim); font-size: .93rem; }
.step-line { height: 1px; background: linear-gradient(90deg, var(--accent-line), transparent); margin-bottom: 26px; }

/* ---------- comparison table -------------------------------------------- */
.table-scroll { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line-soft); }
table.cmp { width: 100%; border-collapse: collapse; min-width: 720px; background: var(--panel); font-size: .93rem; }
table.cmp th, table.cmp td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line-soft); }
table.cmp thead th {
  background: var(--bg2); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--dim); font-weight: 700; white-space: nowrap;
}
table.cmp thead th.own { color: var(--accent2); background: rgba(139, 92, 246, .1); }
table.cmp tbody th { font-weight: 600; color: var(--text); width: 30%; }
table.cmp td { color: var(--dim); }
table.cmp td.own { color: var(--text); background: rgba(139, 92, 246, .06); font-weight: 600; }
table.cmp tr:last-child th, table.cmp tr:last-child td { border-bottom: 0; }
.yes { color: var(--green); font-weight: 700; }
.no  { color: var(--dimmer); }

/* ---------- pricing ----------------------------------------------------- */
.price-card {
  position: relative; max-width: 470px; margin-inline: auto;
  background: linear-gradient(170deg, var(--panel), var(--bg2));
  border: 1px solid var(--accent-line); border-radius: var(--radius-lg);
  padding: 40px 34px; box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.price-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 55% at 50% -12%, var(--glow), transparent 62%);
}
.price-card > * { position: relative; }
.price-flag {
  position: absolute; top: 20px; right: -38px; z-index: 2;
  background: var(--accent); color: #14092b; font-size: .7rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 44px; transform: rotate(38deg);
}
.price-amount { display: flex; align-items: flex-start; gap: 4px; justify-content: center; margin: 6px 0 4px; }
.price-amount .cur { font-size: 1.5rem; font-weight: 700; color: var(--dim); margin-top: 10px; }
.price-amount .num {
  font-size: clamp(3.2rem, 8vw, 4.4rem); font-weight: 800;
  letter-spacing: -.045em; line-height: 1; color: var(--text);
}
.price-was { text-align: center; color: var(--dimmer); text-decoration: line-through; font-size: 1.05rem; }
.price-sub { text-align: center; color: var(--dim); font-size: .93rem; margin-bottom: 14px; }

/* Forward-looking price notice. Deliberately NOT styled as a struck-through
   "was" price — it states where the price is going, not where it has been. */
.price-rising {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 24px; padding: 9px 14px; border-radius: 10px;
  background: rgba(251, 191, 36, .10); border: 1px solid rgba(251, 191, 36, .32);
  color: var(--gold); font-size: .86rem; font-weight: 600; text-align: center;
}
.price-rising svg { width: 15px; height: 15px; flex: none; }
.price-rising b { color: #fde68a; font-weight: 800; }
.price-list { list-style: none; display: grid; gap: 12px; margin: 26px 0 30px; }
.price-list li { display: flex; gap: 11px; align-items: flex-start; font-size: .95rem; color: var(--dim); }
.price-list li strong { color: var(--text); font-weight: 600; }
.price-list svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--green); }
.price-fine { text-align: center; font-size: .82rem; color: var(--dimmer); margin-top: 16px; }

.guarantee {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 24px; margin-top: 34px;
}
.guarantee svg { width: 34px; height: 34px; flex: none; color: var(--green); }
.guarantee h3 { font-size: 1.02rem; margin-bottom: 6px; }
.guarantee p { color: var(--dim); font-size: .93rem; }

/* ---------- FAQ (native details/summary) -------------------------------- */
.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .2s;
}
.faq details[open] { border-color: var(--accent-line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 19px 56px 19px 22px;
  font-weight: 600; font-size: 1.01rem; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 24px; top: 50%;
  width: 10px; height: 10px; margin-top: -6px;
  border-right: 2px solid var(--accent2); border-bottom: 2px solid var(--accent2);
  transform: rotate(45deg); transition: transform .22s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { color: var(--accent2); }
.faq .faq-body { padding: 0 22px 22px; color: var(--dim); font-size: .96rem; }
.faq .faq-body p + p { margin-top: 12px; }
.faq .faq-body a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- CTA band ---------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden; text-align: center;
  border-block: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--bg2), var(--bg));
  padding: 92px 0;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 100% at 50% 0%, var(--glow), transparent 66%);
}
.cta-band > * { position: relative; }
.cta-band h2 { margin-bottom: 16px; }
.cta-band p { color: var(--dim); max-width: 56ch; margin: 0 auto 32px; font-size: 1.06rem; }

/* ---------- footer ------------------------------------------------------ */
.site-footer {
  border-top: 1px solid var(--line-soft);
  background: var(--bg);
  padding: 62px 0 32px;
  font-size: .92rem;
}
.foot-grid {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 42px;
  padding-bottom: 42px;
}
.foot-brand p { color: var(--dim); margin-top: 16px; max-width: 34ch; font-size: .9rem; }
/* These are h2 for document outline reasons (an h4 straight after an h2 is a
   skipped level) but must look like small labels, not headings. */
.foot-col h4, .foot-col h2 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--dim); margin-bottom: 16px; font-weight: 700; line-height: 1.5;
}
.foot-col ul { list-style: none; display: grid; gap: 10px; }
.foot-col a { color: var(--dim); }
.foot-col a:hover { color: var(--accent2); }
.foot-bottom {
  display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line-soft); padding-top: 26px;
  color: var(--dimmer); font-size: .86rem;
}
.foot-bottom nav { display: flex; flex-wrap: wrap; gap: 20px; }

/* ---------- page header (inner pages) ----------------------------------- */
.page-head {
  position: relative; overflow: hidden;
  padding: 72px 0 56px; border-bottom: 1px solid var(--line-soft);
}
.page-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    repeating-linear-gradient(0deg,  var(--grid) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 26px),
    radial-gradient(80% 100% at 50% -30%, var(--glow), transparent 68%);
}
.page-head h1 { font-size: clamp(2.05rem, 4.4vw, 3.1rem); }
.page-head .lede { margin-top: 18px; }

/* ---------- prose (legal + docs) ---------------------------------------- */
.prose { color: var(--dim); font-size: 1rem; line-height: 1.78; }
.prose > * + * { margin-top: 18px; }
.prose h2 {
  color: var(--text); font-size: 1.42rem; margin-top: 52px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line-soft);
  scroll-margin-top: 100px;
}
.prose h3 { color: var(--text); font-size: 1.09rem; margin-top: 34px; scroll-margin-top: 100px; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 24px; display: grid; gap: 9px; }
.prose li::marker { color: var(--accent); }
.prose code {
  font-family: var(--mono); font-size: .86em; color: var(--accent2);
  background: var(--panel); border: 1px solid var(--line-soft);
  padding: 2px 7px; border-radius: 6px;
}
.prose pre {
  background: var(--bg2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; overflow-x: auto;
  font-family: var(--mono); font-size: .86rem; line-height: 1.65; color: var(--text);
}
.prose pre code { background: none; border: 0; padding: 0; color: inherit; font-size: 1em; }
.prose blockquote {
  border-left: 3px solid var(--accent); padding: 4px 0 4px 20px;
  color: var(--dim); font-style: italic;
}
/* Prose tables live inside a .table-scroll wrapper so a 3-column table scrolls
   on a phone instead of squashing to unreadable or pushing the page wide. */
.prose .table-scroll { border: 0; }
.prose .table-scroll table { min-width: 460px; }
.prose table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.prose th, .prose td { padding: 11px 14px; border: 1px solid var(--line-soft); text-align: left; }
.prose th { background: var(--bg2); color: var(--text); font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--line-soft); margin: 40px 0; }
.updated { font-size: .86rem; color: var(--dimmer); font-family: var(--mono); }

.callout {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--panel); border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
  padding: 18px 20px; color: var(--dim); font-size: .95rem;
}
.callout svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--accent2); }
.callout strong { color: var(--text); }
.callout.warn { border-left-color: var(--gold); }
.callout.warn svg { color: var(--gold); }
.callout.good { border-left-color: var(--green); }
.callout.good svg { color: var(--green); }

/* ---------- docs layout ------------------------------------------------- */
.docs-layout { display: grid; grid-template-columns: 232px 1fr; gap: 56px; align-items: start; }
.docs-toc { position: sticky; top: 100px; }
.docs-toc h4, .docs-toc h2 {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .13em;
  color: var(--dim); margin-bottom: 14px; font-weight: 700; line-height: 1.5;
}
.docs-toc ul { list-style: none; display: grid; gap: 2px; border-left: 1px solid var(--line-soft); }
.docs-toc a {
  display: block; padding: 7px 14px; color: var(--dim); font-size: .9rem;
  margin-left: -1px; border-left: 2px solid transparent;
}
.docs-toc a:hover { color: var(--text); }
.docs-toc a.active { color: var(--accent2); border-left-color: var(--accent); background: rgba(139, 92, 246, .07); }

/* ---------- misc -------------------------------------------------------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 12px; }
.mt-2 { margin-top: 24px; }
.mt-3 { margin-top: 40px; }
.mt-4 { margin-top: 64px; }
.mb-2 { margin-bottom: 24px; }
.hidden { display: none !important; }

.spec-list { list-style: none; display: grid; gap: 0; }
.spec-list li {
  display: flex; gap: 16px; justify-content: space-between;
  padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: .95rem;
}
.spec-list li:last-child { border-bottom: 0; }
.spec-list dt, .spec-list .k { color: var(--dim); flex: none; }
.spec-list .v { color: var(--text); text-align: right; font-weight: 500; }

.fmt-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.fmt {
  font-family: var(--mono); font-size: .82rem; font-weight: 700;
  padding: 7px 14px; border-radius: 9px; letter-spacing: .04em;
  background: var(--panel); border: 1px solid var(--line-soft); color: var(--dim);
}
.fmt.hi { color: var(--accent2); border-color: var(--accent-line); background: var(--accent-soft); }

.log-entry { border-left: 2px solid var(--line); padding: 0 0 34px 26px; position: relative; }
.log-entry:last-child { padding-bottom: 0; }
.log-entry::before {
  content: ""; position: absolute; left: -6px; top: 7px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--bg);
}
.log-entry.next::before { background: var(--line); }
.log-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.log-head h3, .log-head h2 { font-size: 1.15rem; }
.log-entry ul { list-style: none; display: grid; gap: 9px; }
.log-entry li { color: var(--dim); font-size: .95rem; padding-left: 20px; position: relative; }
.log-entry li::before { content: "▸"; position: absolute; left: 0; color: var(--accent); }

/* Reveal-on-scroll.
   Deliberately opt-in: content is visible by default and only starts hidden once
   site.js has confirmed it can actually animate it. A marketing page must never
   be able to end up blank because an observer didn't fire (backgrounded tab,
   prerender, blocked script). */
.reveal { transition: opacity .6s ease, transform .6s ease; }
html.js-reveal .reveal { opacity: 0; transform: translateY(18px); }
html.js-reveal .reveal.in { opacity: 1; transform: none; }

/* ---------- responsive -------------------------------------------------- */
@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps  { grid-template-columns: repeat(2, 1fr); }
  .tiles  { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .docs-layout { grid-template-columns: 1fr; gap: 34px; }
  .docs-toc { position: static; }
  .docs-toc ul { display: flex; flex-wrap: wrap; border-left: 0; border-top: 1px solid var(--line-soft); padding-top: 10px; }
  .docs-toc a { border-left: 0; border-bottom: 2px solid transparent; padding: 6px 12px; }
  .docs-toc a.active { border-left: 0; border-bottom-color: var(--accent); }
}

@media (max-width: 860px) {
  .nav-links {
    position: fixed; inset: 72px 0 auto; z-index: 99;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: rgba(7, 8, 15, .97); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line); padding: 16px 24px 26px;
    margin-left: 0;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    max-height: calc(100dvh - 72px); overflow-y: auto;
  }
  .nav-links.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav-links a { padding: 13px 14px; font-size: 1rem; }
  .nav-cta { margin: 10px 0 0; }
  .nav-toggle { display: flex; }

  .split, .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .split { gap: 40px; }
  .split.reverse .split-visual { order: 0; }
  .split + .split { margin-top: 72px; }
  .sec { padding: 68px 0; }
  .hero { padding: 48px 0 68px; }
  .mock-side { display: none; }
  .shot { margin-top: 42px; }
  .price-card { padding: 32px 24px; }
  .guarantee { flex-direction: column; gap: 12px; }
}

@media (max-width: 560px) {
  .wrap { padding-inline: 18px; }
  .grid-4, .tiles, .steps { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 30px; }
  .btn-row .btn { width: 100%; }
  .card { padding: 22px 20px; }
  .win-title { display: none; }
  .mock-select, .mock-prog { display: none; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .cta-band, .shot, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .prose, .prose h2, .prose h3, .prose strong { color: #000; }
}