/* ==========================================================================
   PointForge Pro – site design system
   Graphite. The site sits in the same tonal world as the application itself,
   so the product screenshots read as continuous with the page rather than
   pasted onto it. Colour comes from the scan data, not from the chrome.
   No gradients, no glow, one restrained accent.
   ========================================================================== */

:root {
  /* Taken from the application's own chrome: charcoal panels, thin separators.
     Charcoal dominates. Blue appears only where the app uses it - on values and
     the active state - never as a wash over the page. */
  --bg:        #1B1D1F;   /* window ground */
  --bg-2:      #232629;   /* panels: Explorer, Properties */
  --bg-3:      #2B2F33;   /* hover, raised rows */
  --line:      #34383C;   /* panel separators */
  --line-2:    #41464B;

  /* text */
  --fg:        #E4E6E7;
  --fg-2:      #9EA3A7;
  --fg-3:      #71767A;

  /* the application's functional blue, used sparingly */
  --accent:    #3E9BD6;
  --accent-2:  #6FB9E4;
  --accent-ink:#0B1620;   /* text on a blue fill */
  --status:    #0F6CBD;   /* the app's status bar */

  /* numeric values, exactly as the Properties panel renders them */
  --figure:    #3E9BD6;

  --sans: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", -apple-system,
          BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --sans-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI",
          -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", "Liberation Mono", monospace;

  --page: 1180px;
  --prose: 62ch;

  --s1:.375rem; --s2:.75rem; --s3:1.125rem; --s4:1.75rem;
  --s5:2.75rem; --s6:4.5rem; --s7:7rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.sheet { max-width: var(--page); margin: 0 auto; padding: 0 var(--s4); }
@media (max-width: 640px) { .sheet { padding: 0 var(--s3); } }

/* ---------- type: modern sans, sentence case, tight display tracking ---------- */
h1, h2, h3, h4 { font-family: var(--sans-display); margin: 0; text-wrap: balance; }

h1 {
  font-size: clamp(2.35rem, 5.6vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -.026em;
  font-weight: 600;
}
h2 {
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  line-height: 1.14;
  letter-spacing: -.018em;
  font-weight: 600;
}
h3 { font-size: 1.06rem; line-height: 1.35; letter-spacing: -.008em; font-weight: 600; }

p { margin: 0 0 var(--s3); max-width: var(--prose); }
.lede { font-size: 1.16rem; line-height: 1.6; color: var(--fg-2); max-width: 56ch; }

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* small label – no longer a drawing callout, just a quiet eyebrow */
.callout {
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--fg-3);
  margin: 0 0 var(--s2);
}
.callout--accent { color: var(--accent); }

/* ---------- masthead ---------- */
.masthead {
  border-bottom: 1px solid var(--line);
  background: rgba(23,25,27,.88);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 50;
}
.masthead-in {
  max-width: var(--page); margin: 0 auto; padding: var(--s2) var(--s4);
  display: flex; align-items: center; gap: var(--s4);
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand-mark { width: 26px; height: 26px; display: block; }
.brand-name {
  font-family: var(--sans-display); font-size: 1.02rem; font-weight: 600;
  letter-spacing: -.01em; color: var(--fg);
}

.nav { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
.nav a {
  font-size: .92rem; color: var(--fg-2); text-decoration: none; padding: .35rem 0;
  border-bottom: 1px solid transparent; white-space: nowrap;
}
.nav a:hover { color: var(--fg); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); }
@media (max-width: 860px) { .nav { gap: var(--s2); } .nav .nav-hide { display: none; } }
/* At phone width the three remaining links have to fit on one line beside the
   wordmark, or "Sign in" breaks in half. */
@media (max-width: 620px) {
  .masthead-in { gap: var(--s2); padding-left: var(--s3); padding-right: var(--s3); }
  .nav { gap: .8rem; }
  .nav a { font-size: .85rem; }
  .brand-name { font-size: .96rem; }
}

/* ---------- status ribbon ---------- */
.ribbon { background: var(--bg-2); border-bottom: 1px solid var(--line); color: var(--fg-2); font-size: .82rem; }
.ribbon-in {
  max-width: var(--page); margin: 0 auto; padding: .55rem var(--s4);
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
}
.ribbon strong { color: var(--accent); font-weight: 600; letter-spacing: .02em; }
.ribbon button {
  margin-left: auto; background: none; border: 1px solid var(--line-2); color: var(--fg-2);
  font: inherit; font-size: .78rem; padding: .2rem .6rem; cursor: pointer; border-radius: 2px;
}
.ribbon button:hover { color: var(--fg); border-color: var(--fg-3); }

/* ---------- hero ---------- */
.hero { padding: var(--s5) 0 var(--s5); }
.hero-lead { max-width: 46rem; }
/* .hero-lead is also used outside .hero (the 404 page), where the heading would
   otherwise have no gap at all before the paragraph under it. */
.hero-lead h1 { margin-bottom: var(--s3); }
.hero h1 { font-size: clamp(2.35rem, 5.4vw, 4rem); margin-bottom: var(--s3); }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede { max-width: 60ch; }

/* The hero shot carries the page. The chrome is deliberately grey so the only
   colour above the fold is the scan itself. */
.hero-shot { margin: var(--s5) 0 0; }
.hero-shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line-2); border-radius: 4px;
  background: var(--bg-2);
}
.hero-shot figcaption {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3);
  margin-top: var(--s2); font-size: .82rem; color: var(--fg-3);
}
.hero-shot figcaption b { color: var(--fg-2); font-weight: 600; }

/* format chips – what it reads, said plainly and early */
.chips { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); list-style: none; margin: var(--s4) 0 0; padding: 0; }
.chips li {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .02em;
  color: var(--fg-2); background: var(--bg-2);
  border: 1px solid var(--line-2); border-radius: 2px; padding: .22rem .5rem;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--sans-display); font-size: .96rem; font-weight: 600; letter-spacing: -.005em;
  padding: .72rem 1.35rem; text-decoration: none; border-radius: 3px;
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent);
  cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--accent-2); border-color: var(--accent-2); text-decoration: none; }
.btn--ghost { background: none; color: var(--fg); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--bg-3); border-color: var(--fg-3); color: var(--fg); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }

/* ---------- product imagery ---------- */
.plate { padding: var(--s5) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.plate h2 { color: var(--fg); }

/* ---------- sections ---------- */
.section { padding: var(--s5) 0; }
.section-head { margin-bottom: var(--s4); }
.section-head h1,
.section-head h2 { margin-bottom: var(--s2); }

/* On wide screens the supporting sentence sits beside the heading rather than
   under it: the page stops drifting left and loses a good deal of height. */
@media (min-width: 1000px) {
  .section-head { display: grid; grid-template-columns: 1.05fr 1fr; column-gap: var(--s5); align-items: end; }
  .section-head > .panel-head { grid-column: 1 / -1; }
  .section-head > h1,
  .section-head > h2 { grid-column: 1; margin-bottom: 0; }
  .section-head > .lede { grid-column: 2; margin-bottom: .35rem; }
}

.specs { display: grid; gap: var(--s4); }
@media (min-width: 760px) { .specs { grid-template-columns: 1fr 1fr; column-gap: var(--s5); } }
.spec { padding-top: var(--s3); border-top: 1px solid var(--line); }
.spec h3 { margin-bottom: .4rem; }
.spec p { margin: 0; font-size: .96rem; color: var(--fg-2); max-width: 44ch; }

/* ---------- who it's for ---------- */
.cases { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 3px; }
@media (min-width: 700px) { .cases { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .cases { grid-template-columns: repeat(3, 1fr); } }
.case { background: var(--bg-2); padding: var(--s3) var(--s4) var(--s4); }
.case h3 { margin-bottom: .35rem; }
.case p { margin: 0; font-size: .92rem; color: var(--fg-2); max-width: none; }

/* ---------- workflow: a real sequence, so it is numbered ---------- */
/* Six stages: two rows of three, so nothing is orphaned on a short last row. */
.steps { display: grid; gap: var(--s4); counter-reset: step; }
@media (min-width: 620px) { .steps { grid-template-columns: 1fr 1fr; column-gap: var(--s4); } }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); column-gap: var(--s5); } }
.step { counter-increment: step; padding-top: var(--s3); border-top: 2px solid var(--line-2); }
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block; font-family: var(--mono); font-size: .78rem; color: var(--accent);
  margin-bottom: .5rem;
}
.step h3 { margin-bottom: .3rem; }
.step p { margin: 0; font-size: .92rem; color: var(--fg-2); max-width: 34ch; }

/* ---------- compatibility ---------- */
.compat { display: grid; gap: var(--s4); }
@media (min-width: 760px) { .compat { grid-template-columns: 1fr 1fr; gap: var(--s5); } }
.compat h3 { margin-bottom: var(--s2); }
.compat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.compat li {
  display: flex; justify-content: space-between; gap: var(--s3);
  padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .94rem;
}
.compat li span:last-child { font-family: var(--mono); font-size: .84rem; color: var(--fg-3); text-align: right; }

/* ---------- FAQ: the app's own collapsible panels, reused ---------- */
.faq { border: 1px solid var(--line); border-radius: 3px; background: var(--bg-2); overflow: hidden; }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: baseline; gap: .6rem; cursor: pointer;
  padding: var(--s3) var(--s4); font-family: var(--sans-display); font-weight: 600;
  font-size: 1rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: ""; flex: none; width: 0; height: 0; margin-top: .45rem;
  border-left: 5px solid var(--accent);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .14s ease;
}
.faq details[open] summary::before { transform: rotate(90deg); }
.faq summary:hover { background: var(--bg-3); }
.faq .faq-body { padding: 0 var(--s4) var(--s3) calc(var(--s4) + 1.1rem); }
.faq .faq-body p { margin: 0; font-size: .95rem; color: var(--fg-2); }

/* ---------- closing call to action ---------- */
.cta-band { border-top: 1px solid var(--line); background: var(--bg-2); padding: var(--s5) 0; }
.cta-band .sheet { display: grid; gap: var(--s4); }
@media (min-width: 860px) { .cta-band .sheet { grid-template-columns: 1.2fr auto; align-items: center; } }
.cta-band h2 { margin-bottom: var(--s2); }
.cta-band p { margin: 0; color: var(--fg-2); }
.cta-band .btn-row { margin-top: 0; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 3px; background: var(--bg-2); }
table { width: 100%; border-collapse: collapse; font-size: .94rem; }
caption { caption-side: top; text-align: left; font-size: .82rem; color: var(--fg-3); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
th, td { text-align: left; padding: .62rem var(--s3); border-bottom: 1px solid var(--line); vertical-align: baseline; }
thead th { font-size: .8rem; color: var(--fg-2); font-weight: 600; background: var(--bg-3); white-space: nowrap; }
tbody th { font-weight: 500; color: var(--fg); }
td.num, th.num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--figure); }
thead th.num { color: var(--fg-2); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }

/* ---------- pricing ---------- */
.prices { display: grid; gap: var(--s3); }
@media (min-width: 900px) { .prices { grid-template-columns: repeat(3, 1fr); gap: var(--s3); } }
.price {
  display: flex; flex-direction: column; gap: var(--s2);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 3px; padding: var(--s4);
}
.price--featured { border-color: var(--accent); }
.price-term { font-family: var(--sans-display); font-size: 1.2rem; font-weight: 600; }
.price-fig { font-family: var(--sans-display); font-size: 2.1rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--fg); }
.price-fig span { font-family: var(--sans); font-size: .44em; font-weight: 400; letter-spacing: 0; color: var(--fg-3); }
.price p { margin: 0; font-size: .94rem; color: var(--fg-2); max-width: none; }
/* the figure-and-button block is the last child, and is pushed to the bottom so
   that all three cards line up however long the description runs */
.price > div:last-child { margin-top: auto; padding-top: var(--s2); }
.price-act { padding-top: 0; }
.price-act .btn { width: 100%; justify-content: center; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: var(--s5) 0; margin-top: var(--s6); background: var(--bg-2); }
.foot-grid { display: grid; gap: var(--s4); }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.foot h2 { font-size: .82rem; color: var(--fg-3); font-weight: 600; margin-bottom: var(--s2); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.foot a { font-size: .94rem; color: var(--fg-2); }
.foot a:hover { color: var(--accent-2); }
.foot-legal { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: .82rem; color: var(--fg-3); }

/* ---------- panel header: echoes the app's collapsible section headers ---------- */
.panel-head {
  display: flex; align-items: center; gap: .55rem;
  font-size: .84rem; color: var(--accent); font-weight: 600;
  margin: 0 0 var(--s2);
}
.panel-head::before {
  content: ""; width: 0; height: 0; flex: none;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transform: rotate(90deg); /* open, as the app draws an expanded section */
}

/* ---------- status bar: the strip along the bottom of the application ---------- */
.statusbar {
  background: var(--status); color: #EAF3FA;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .01em;
}
.statusbar-in {
  max-width: var(--page); margin: 0 auto; padding: .34rem var(--s4);
  display: flex; flex-wrap: wrap; gap: .35rem var(--s4);
}
.statusbar b { font-weight: 600; color: #fff; }
.statusbar .sb-sep { opacity: .5; }

/* ---------- format flow: what comes in, what goes out ---------- */
.flow {
  display: grid; gap: var(--s4); align-items: start;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 3px;
  padding: var(--s4);
}
/* content-sized so the "opens" list does not leave a hole beside itself */
@media (min-width: 940px) { .flow { grid-template-columns: max-content max-content minmax(0, 1fr); align-items: center; } }
.flow-side h3 {
  font-size: .78rem; color: var(--fg-3); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; margin-bottom: var(--s2);
}
.flow-side .chips { margin: 0; }
.flow-arrow { color: var(--accent); font-family: var(--mono); font-size: 1.5rem; line-height: 1; }
@media (min-width: 940px) { .flow-arrow { text-align: center; } }

/* ---------- feature cards ---------- */
.cards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 3px; }
@media (min-width: 700px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--bg-2); padding: var(--s4); display: flex; flex-direction: column; }
.card h3 { margin-bottom: .4rem; }
.card p { margin: 0; font-size: .94rem; color: var(--fg-2); max-width: none; }
.card .chips { margin-top: auto; padding-top: var(--s3); }

/* ---------- alternating prose and imagery ---------- */
.split { display: grid; gap: var(--s4); align-items: center; }
@media (min-width: 940px) { .split { grid-template-columns: 1fr 1.15fr; gap: var(--s5); } }
@media (min-width: 940px) { .split--rev > :first-child { order: 2; } }
.split figure { margin: 0; }
.split img { display: block; width: 100%; height: auto; border: 1px solid var(--line-2); border-radius: 3px; }
.split figcaption { margin-top: var(--s2); font-size: .8rem; color: var(--fg-3); }
.split h2 { margin-bottom: var(--s2); }

/* ---------- marker lists ---------- */
.ticks { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: .5rem; }
.ticks li { position: relative; padding-left: 1.05rem; font-size: .94rem; color: var(--fg-2); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 5px; height: 5px; background: var(--accent); border-radius: 1px;
}
.ticks--2 { }
@media (min-width: 700px) { .ticks--2 { grid-template-columns: 1fr 1fr; column-gap: var(--s4); } }

/* ---------- capability reference page ---------- */
.docs { display: grid; gap: var(--s5); }
/* on the legal pages a "last updated" note sits between the heading and the index */
.note + .docs { margin-top: var(--s5); }
@media (min-width: 1000px) { .docs { grid-template-columns: 214px 1fr; gap: var(--s6); } }
.toc { align-self: start; font-size: .9rem; }
@media (min-width: 1000px) { .toc { position: sticky; top: 5.2rem; } }
.toc h2 {
  font-size: .78rem; color: var(--fg-3); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; margin-bottom: var(--s2);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--line);
}
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .28rem; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { color: var(--fg-2); display: flex; gap: .5rem; }
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono); font-size: .76rem; color: var(--fg-3); flex: none;
}
.toc a:hover { color: var(--accent-2); text-decoration: none; }
.toc a:hover::before { color: var(--accent); }

.fgroup { scroll-margin-top: 5rem; }
.fgroup + .fgroup { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); }
.fgroup > h2 { margin-bottom: var(--s2); }
.fgroup > p { color: var(--fg-2); }
.fsub { margin-top: var(--s4); }
.fsub h3 { margin-bottom: var(--s2); color: var(--fg); }
.fsub .ticks { margin-top: 0; }

/* One measure for every kind of running text in a reference page, so paragraphs
   and list items share a right edge. Tables stay full width. */
.fgroup p,
.fgroup .ticks li,
.fgroup .proc > li,
.fgroup .note,
.fgroup .warn { max-width: 72ch; }

/* ---------- documentation: procedures, keys, warnings ---------- */

/* numbered procedure – the reader is meant to do these in order */
.proc { margin: var(--s3) 0 0; padding-left: 0; list-style: none; counter-reset: proc; display: grid; gap: .6rem; }
.proc > li {
  counter-increment: proc; position: relative; padding-left: 2.1rem;
  font-size: .95rem; color: var(--fg-2);
}
.proc > li::before {
  content: counter(proc);
  position: absolute; left: 0; top: 0;
  width: 1.45rem; height: 1.45rem; border-radius: 2px;
  background: var(--bg-3); border: 1px solid var(--line-2);
  color: var(--accent); font-family: var(--mono); font-size: .74rem;
  display: flex; align-items: center; justify-content: center;
}
.proc strong { color: var(--fg); font-weight: 600; }

kbd {
  font-family: var(--mono); font-size: .78rem; line-height: 1;
  color: var(--fg); background: var(--bg-3);
  border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 3px;
  padding: .22rem .4rem; white-space: nowrap;
}
.keys { display: inline-flex; align-items: center; gap: .28rem; flex-wrap: wrap; }
.keys .plus { color: var(--fg-3); font-size: .72rem; }

/* a consequence the reader cannot undo */
.warn {
  margin: var(--s3) 0 0; padding: var(--s2) var(--s3);
  font-size: .9rem; color: var(--fg-2); max-width: 74ch;
  background: var(--bg-3); border: 1px solid var(--line-2);
  border-left: 3px solid var(--accent); border-radius: 2px;
}
.warn strong { color: var(--fg); }

/* A detail only the business owner can supply - company name, jurisdiction, a
   retention period. Deliberately conspicuous: a legal page must not go live with
   one of these still in it, so it should be impossible to skim past. */
.fill {
  color: var(--accent);
  background: rgba(62, 155, 214, .09);
  border-bottom: 1px dashed var(--accent);
  padding: 0 .2em;
  font-size: .94em;
}

/* ---------- odds and ends ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink);
  padding: .5rem 1rem; font-size: .9rem; border-radius: 0 0 3px 0;
}
.skip:focus { left: 0; text-decoration: none; }

/* qualifying note – the honest small print that follows a bold claim */
.note {
  margin: var(--s3) 0; font-size: .88rem; color: var(--fg-3);
  max-width: 74ch; padding-left: var(--s3); border-left: 2px solid var(--line-2);
}
.foot-blurb { margin-top: .6rem; font-size: .94rem; color: var(--fg-2); max-width: 34ch; }

.hidden { display: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

/* Sits under the hero buttons: the free viewer is genuinely free, but a download is tied to an
   account so it can be recorded, and saying so up front avoids a surprise at the sign-in wall. */
.hero-free-note { font-size: .86rem; color: var(--fg-3); max-width: 52ch; margin: .6rem 0 0; }

/* ---- free-download lead capture (added 2026-08-12) ----------------------
   Asked for, not enforced: there is a visible way past it, and the download
   proceeds even if recording the lead fails. */
.lead-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 200;
  display: grid; place-items: center; padding: var(--s3); }
.lead-panel { width: min(440px, 100%); background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: 6px; padding: var(--s4); position: relative; max-height: 90vh; overflow-y: auto; }
.lead-panel h2 { font-size: 1.25rem; margin: 0 0 .35rem; }
.lead-sub { font-size: .9rem; color: var(--fg-2); margin: 0 0 .5rem; }
.lead-meta { font-family: var(--mono); font-size: .8rem; color: var(--fg-3); margin: 0 0 var(--s3); }
.lead-close { position: absolute; top: .5rem; right: .6rem; background: none; border: 0;
  color: var(--fg-3); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: .2rem .4rem; }
.lead-close:hover { color: var(--fg); }
.lead-field { margin-bottom: .7rem; }
.lead-field label { display: block; font-size: .82rem; color: var(--fg-2); margin-bottom: .2rem; }
.lead-input { font: inherit; font-size: .95rem; width: 100%; background: var(--bg-3); color: var(--fg);
  border: 1px solid var(--line-2); border-radius: 3px; padding: .45rem .6rem; }
.lead-input:focus { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.lead-consent { display: flex; gap: .5rem; align-items: flex-start; font-size: .84rem;
  color: var(--fg-2); margin: .8rem 0 1rem; }
.lead-consent input { margin-top: .2rem; }
.lead-form .btn { width: 100%; justify-content: center; }
.lead-msg { font-size: .85rem; margin-top: .6rem; }
.lead-msg--bad { color: var(--error); }
.lead-skip { display: block; width: 100%; margin-top: .8rem; background: none; border: 0;
  color: var(--fg-3); font: inherit; font-size: .82rem; text-decoration: underline; cursor: pointer; }
.lead-skip:hover { color: var(--fg-2); }

/* A download button with nothing behind it. Set by free-download.js only when the server
   definitely reports no published build, never merely because a request failed. */
.btn[aria-disabled="true"] { opacity: .55; cursor: default; pointer-events: none; }