/* EOMeasy marketing site — engineered-tool aesthetic, matched to the desktop
   dashboard (volume_software/web/static/styles.css). Swap the :root tokens to
   rebrand. */
:root {
  --bg: #14181f;
  --bg-raise: #1c222c;
  --bg-card: #202834;
  --bg-sink: #0f131a;
  --line: #303a49;
  --line-soft: #262f3c;
  --text: #dde4ee;
  --text-dim: #8b96a8;
  --accent: #e8a13a;        /* survey-vest amber — the one bold colour */
  --accent-ink: #1a1408;
  --cut: #d1604f;           /* cut = red, from the volume render */
  --fill: #4f86d1;          /* fill = blue */
  --ok: #57b26a;
  --mono: "Cascadia Code", "Consolas", ui-monospace, monospace;
  --sans: "Segoe UI", system-ui, -apple-system, sans-serif;
  --maxw: 1120px;
  --radius: 12px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
img { max-width: 100%; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* eyebrow — the mono "instrument label" voice */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.dim { color: var(--text-dim); }
.mono { font-family: var(--mono); }

/* buttons — match the dashboard */
.btn {
  display: inline-block;
  padding: 13px 22px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-raise);
  color: var(--text);
  font: 500 15px var(--sans);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, filter .15s ease;
}
.btn:hover { border-color: var(--text-dim); text-decoration: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.block { width: 100%; text-align: center; }

/* header */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(20, 24, 31, 0.82);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .wrap { display: flex; align-items: center; gap: 16px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; display: block; }
.site-header nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.site-header nav a { color: var(--text-dim); font-size: 14px; }
.site-header nav a:hover { color: var(--text); text-decoration: none; }
.site-header nav .btn { padding: 9px 16px; font-size: 14px; }
@media (max-width: 720px) { .site-header nav .navlink { display: none; } }

/* section rhythm. Fluid rather than fixed: at 88px top and bottom, two stacked
   sections put 176px between one heading and the next, which is right on a wide
   screen and close to a full phone viewport of dead space on a narrow one. The
   clamp holds the desktop figure from about 1170px up and eases to 52px on a
   phone. .help overrides the padding entirely (see the help-page block). */
section { padding: clamp(52px, 7.5vw, 88px) 0; border-top: 1px solid var(--line-soft); }
section:first-of-type { border-top: none; }
.section-head { max-width: 640px; margin-bottom: clamp(26px, 3.4vw, 40px); }
.section-head h2 { font-size: clamp(24px, 3.2vw, 34px); margin: 12px 0 0; }
.section-head p { color: var(--text-dim); margin-top: 14px; font-size: 17px; }

/* hero */
#hero { padding: clamp(44px, 6.2vw, 72px) 0 clamp(56px, 8.2vw, 96px); }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  grid-template-areas: "head head" "body video";
  column-gap: 56px; row-gap: 40px; align-items: center;
}
.hero-head { grid-area: head; }
.hero-body { grid-area: body; }
.app-video { grid-area: video; }
.hero h1 { font-size: clamp(34px, 5.2vw, 56px); line-height: 1.05; margin: 18px 0 0; }
.hero .sub { color: var(--text-dim); font-size: 18px; margin-top: 22px; max-width: 40ch; }
.hero-body .sub { margin-top: 0; }
.hero .cta-row { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.hero .reassure { margin-top: 18px; font-family: var(--mono); font-size: 12.5px; color: var(--text-dim); letter-spacing: .02em; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; grid-template-areas: "head" "body" "video"; gap: 40px; }
}

/* signature: the reconciliation readout */
.readout {
  background: var(--bg-sink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  font-family: var(--mono);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.7);
}
.readout .r-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-dim); letter-spacing: .1em; }
.readout .r-tag { color: var(--cut); }
.readout .r-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; font-size: 15px; }
.readout .r-row .label { color: var(--text-dim); }
.readout .r-row .val { font-size: 20px; letter-spacing: .01em; }
.readout .r-row.eom .val { color: var(--accent); }
.readout .r-row.pkg .val { color: var(--text); }
.readout .r-rule { height: 1px; background: var(--line); margin: 18px 0; }
.readout .r-recon { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.readout .r-recon .delta { color: var(--text-dim); }
.readout .r-recon .ok { color: var(--ok); display: inline-flex; align-items: center; gap: 7px; }
.readout .r-recon .ok::before { content: "✓"; color: var(--accent); font-weight: 700; }
.readout .r-foot { margin-top: 16px; font-size: 11.5px; color: var(--text-dim); letter-spacing: .04em; }

/* value */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
.card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
}
.card h3 { font-size: 17px; }
.card p { color: var(--text-dim); margin-top: 10px; font-size: 15px; }
.card .k { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 820px) { .cards-3 { grid-template-columns: 1fr; } }

/* value section: the heading pairs with a plan-view render, cards span below */
.value-grid {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  grid-template-areas: "head visual" "cards cards";
  column-gap: clamp(28px, 4vw, 52px);
  row-gap: clamp(30px, 3.6vw, 44px);
  align-items: center;
}
.value-grid > .section-head { grid-area: head; margin-bottom: 0; max-width: none; }
.value-grid > .cards-3 { grid-area: cards; margin-top: 0; }
.value-figure { grid-area: visual; margin: 0; }
.value-figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-sink);
}
.value-figure figcaption {
  margin-top: 10px; font-family: var(--mono); font-size: 12px;
  color: var(--text-dim); letter-spacing: .02em;
}
@media (max-width: 900px) {
  .value-grid { grid-template-columns: 1fr; grid-template-areas: "head" "visual" "cards"; }
  .value-figure { max-width: 540px; }
}

/* how it works — a real sequence, so numbered */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { border-top: 2px solid var(--accent); padding-top: 18px; }
.step .num { font-family: var(--mono); font-size: 13px; color: var(--accent); letter-spacing: .1em; }
.step h3 { font-size: 18px; margin-top: 10px; }
.step p { color: var(--text-dim); margin-top: 10px; font-size: 15px; }
.step .fmt { font-family: var(--mono); font-size: 12px; color: var(--text-dim); margin-top: 12px; }
.step .fmt b { color: var(--fill); font-weight: 600; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

/* pricing */
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
@media (max-width: 820px) { .price-grid { grid-template-columns: 1fr; } }
.price-card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px; display: flex; flex-direction: column; gap: 8px;
}
.price-card.featured { border-color: var(--accent); }
.price-card .tier-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price-card .tier-name {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-dim); display: flex; align-items: center; gap: 10px;
}
.price-card .tier-rrp {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-dim); white-space: nowrap;
}
.price-card .tier-rrp s { opacity: .85; }
.price-card .tier-tag {
  font-family: var(--sans); letter-spacing: .04em; text-transform: none; font-size: 11px;
  color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 2px 9px; font-weight: 600;
}
/* pin the CTA to the bottom so both cards' buttons align at equal height */
.price-card > .btn.block { margin-top: auto; }
.price-card .amount { font-family: var(--mono); font-size: clamp(36px, 6vw, 52px); color: var(--accent); letter-spacing: -0.02em; }
.price-card .amount span { color: var(--text-dim); font-size: 18px; letter-spacing: 0; }
.price-card .anchor { font-family: var(--mono); font-size: 13px; color: var(--text-dim); }
.price-card .fx { font-family: var(--mono); font-size: 12px; color: var(--text-dim); letter-spacing: 0.01em; }
.price-card ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.price-card li { position: relative; padding-left: 26px; color: var(--text-dim); font-size: 15px; }
.price-card li::before { content: "+"; position: absolute; left: 0; font-family: var(--mono); color: var(--accent); }
.price-card .roi { margin-top: 18px; font-size: 13.5px; color: var(--text-dim); border-top: 1px solid var(--line); padding-top: 16px; }
.price-card .guarantee { margin-top: 12px; font-size: 12.5px; color: var(--text-dim); text-align: center; }
/* Guarantee sits above both cards, not inside one: it applies to either plan. The measure
   is wide enough to hold the line on a desktop and still wrap sensibly on a phone. The
   full terms live in the FAQ, so this stays a one-liner. */
.pricing-guarantee { margin: 0 0 34px; max-width: 96ch; font-size: 13.5px; color: var(--text-dim); }

/* forms */
.buy-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 20px; align-items: start; }
@media (max-width: 820px) { .buy-grid { grid-template-columns: 1fr; } }
.form-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.form-card.lead { border-color: var(--accent); }
.form-card h3 { font-size: 19px; }
.form-card .blurb { color: var(--text-dim); font-size: 14.5px; margin-top: 8px; }
.form-card form { margin-top: 18px; display: grid; gap: 10px; }
.form-card .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .form-card .two { grid-template-columns: 1fr; } }
input, textarea, select {
  width: 100%; background: var(--bg-sink); color: var(--text);
  border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px;
  font: 15px var(--sans);
}
input::placeholder, textarea::placeholder { color: #5f6b7d; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
textarea { min-height: 84px; resize: vertical; }

/* Native select restyled to match the inputs: dark field, custom chevron, and
   color-scheme:dark so the opened option list is dark too, not the OS-white box. */
select {
  appearance: none; -webkit-appearance: none; color-scheme: dark;
  cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%238b96a8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 12px;
}
select:has(option[value=""]:checked) { color: #5f6b7d; }  /* dim the placeholder like ::placeholder */
select option { color: var(--text); background: var(--bg-raise); }
.form-card .status { font-family: var(--mono); font-size: 13px; color: var(--text-dim); min-height: 18px; margin: 0; }

/* FAQ */
.faq { display: grid; gap: 0; max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line-soft); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--accent); transition: transform .15s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--text-dim); margin-top: 12px; font-size: 15px; }

/* trust */
#trust { background: var(--bg-sink); }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
.trust-item h3 { font-size: 16px; display: flex; align-items: center; gap: 10px; }
.trust-item h3::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.trust-item p { color: var(--text-dim); margin-top: 10px; font-size: 15px; }
@media (max-width: 820px) { .trust-grid { grid-template-columns: 1fr; } }

/* contact + download split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.panel { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.panel h3 { font-size: 20px; }
.panel p { color: var(--text-dim); margin-top: 10px; font-size: 15px; }
.panel .btn { margin-top: 18px; }

/* footer — a brand block plus vertical link columns. The markup is duplicated in
   every page under public/ (there is no templating), so test/site_chrome.test.js
   asserts the twelve copies are byte-identical. */
footer { border-top: 1px solid var(--line-soft); padding: 48px 0 40px; color: var(--text-dim); font-size: 14px; }
footer a { color: var(--text-dim); }
footer a:hover { color: var(--text); }
/* auto columns rather than fractions: the two link lists size to their content and
   sit against the right edge of the wrap, so the brand block absorbs the slack
   instead of leaving a dead third on wide screens. */
.footer-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 32px 64px; align-items: start; }
/* 40ch, not 34: the longest line ("(c) 2026 EGB Digital Pty Ltd. All rights
   reserved.") needs 286px and 34ch clamped the box to 257px, so it wrapped on
   every page regardless of viewport. The narrowest column this block sits in is
   375px (document pages cap the footer wrap at 780px), so 40ch still fits. */
.footer-brand { display: grid; gap: 6px; max-width: 40ch; }
.footer-col ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.footer-heading {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text);
}
/* Document pages set a 780px measure on .wrap; the footer is outside main, so
   without this it runs 340px wider than the text above it and reads as a
   different page. The markup stays identical either way, which is the point. */
main.help ~ footer .wrap { max-width: 780px; }
#thanks ~ footer .wrap { max-width: 640px; }
/* Narrow: the two link columns still sit side by side (they are short lists and a
   single 11-item stack reads as a wall), with the brand block above them. */
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .footer-brand { grid-column: 1 / -1; max-width: none; }
}

/* thanks page */
#thanks { max-width: 640px; margin: 14vh auto; padding: 0 24px; }
#thanks h1 { font-size: 32px; }
#thanks-body { margin-top: 16px; color: var(--text-dim); font-size: 17px; }
#thanks-body .key { font-family: var(--mono); font-size: 20px; color: var(--accent); background: var(--bg-sink); border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; margin-top: 12px; display: inline-block; letter-spacing: .04em; }

/* scroll reveal (respect reduced motion) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* hero: the product itself, framed as an app window */
.app-video { display: grid; gap: 12px; }
.video-frame {
  background: var(--bg-sink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.7);
}
.vf-chrome {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--bg-raise);
  border-bottom: 1px solid var(--line-soft);
}
.vf-dots { display: inline-flex; gap: 7px; }
.vf-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); display: block; }
.vf-title { font-family: var(--mono); font-size: 12px; color: var(--text-dim); letter-spacing: .04em; }
.vf-media { position: relative; aspect-ratio: 1200 / 802; background: var(--bg-sink); }
.vf-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vf-play {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border: 0; background: transparent; cursor: pointer;
  transition: background .15s ease;
}
.vf-play:hover { background: rgba(0,0,0,.22); }
.vf-play:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.vf-play-ico {
  width: 66px; height: 66px; border-radius: 50%;
  background: rgba(20,24,31,.62); border: 1px solid rgba(232,161,58,.55);
  backdrop-filter: blur(2px);
  display: grid; place-items: center;
  transition: transform .15s ease, background .15s ease;
}
.vf-play:hover .vf-play-ico { transform: scale(1.06); background: rgba(20,24,31,.78); }
.vf-play-ico::after {
  content: ""; margin-left: 4px;
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--accent);
}
.vf-play-txt {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; color: var(--text);
  background: rgba(15,19,26,.6); padding: 4px 10px; border-radius: 999px;
}
.vf-cap { color: var(--text-dim); font-size: 12.5px; letter-spacing: .02em; }

/* report showcase */
/* desktop: heading + readout stack on the left, the report spans the right at
   the same top so the two columns are about the same height. */
.report-grid {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  grid-template-areas: "head show" "proof show";
  column-gap: 44px;
  row-gap: 28px;
  align-items: start;
}
.report-grid > .section-head { grid-area: head; margin-bottom: 0; max-width: none; }
.report-showcase { grid-area: show; }
.report-proof { grid-area: proof; }
/* The quarry page carries five paragraphs of proof text where the homepage
   carries one, so the readout stacked under that text sits most of a screen
   below the report and leaves the right column ending early. There the readout
   goes under the report instead and the text takes the full left column. The
   homepage keeps the original arrangement, where the short heading would look
   stranded beside a tall right column. */
.report-grid.proof-under-report { grid-template-areas: "head show" "head proof"; }
/* mobile: one column, stacked heading -> report -> readout. */
@media (max-width: 900px) {
  .report-grid,
  .report-grid.proof-under-report {
    grid-template-columns: 1fr; grid-template-areas: "head" "show" "proof"; row-gap: 34px;
  }
}
.report-lead {
  display: block; padding: 0; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; overflow: hidden; cursor: pointer; position: relative;
  max-width: 400px; width: 100%;
  box-shadow: 0 24px 60px -32px rgba(0,0,0,.75);
  transition: transform .15s ease, box-shadow .15s ease;
}
.report-lead img { display: block; width: 100%; height: auto; }
.report-lead:hover { transform: translateY(-2px); box-shadow: 0 30px 66px -30px rgba(0,0,0,.8); }
.report-lead:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.report-zoom {
  position: absolute; left: 12px; bottom: 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .03em; color: var(--accent-ink);
  background: var(--accent); padding: 6px 12px; border-radius: 999px;
  opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease;
}
.report-lead:hover .report-zoom, .report-lead:focus-visible .report-zoom { opacity: 1; transform: none; }
.report-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.report-thumb {
  width: 58px; padding: 0; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; overflow: hidden; cursor: pointer; opacity: .62;
  transition: opacity .15s ease, border-color .15s ease;
}
.report-thumb img { display: block; width: 100%; height: auto; }
.report-thumb:hover { opacity: 1; border-color: var(--text-dim); }
.report-thumb[aria-current="true"] { opacity: 1; border-color: var(--accent); }
.report-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; opacity: 1; }
.report-dl { margin-top: 22px; }
.report-dl-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.report-dl-row .report-dl { margin-top: 0; flex: 1 1 200px; text-align: center; }
.report-proof { display: grid; gap: 18px; }
.proof-note { color: var(--text-dim); font-size: 14px; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; }
.lightbox[hidden] { display: none; }
body.lb-open { overflow: hidden; }
.lb-backdrop { position: absolute; inset: 0; background: rgba(6,8,12,.88); backdrop-filter: blur(3px); }
.lb-panel { position: relative; z-index: 1; display: grid; gap: 16px; justify-items: center; max-width: 100%; max-height: 100%; }
.lb-close {
  position: fixed; top: 18px; right: 20px; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg-raise); color: var(--text);
  font-size: 16px; cursor: pointer;
}
.lb-close:hover { border-color: var(--text-dim); }
.lb-close:focus-visible, .lb-nav button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lb-stage { display: flex; align-items: center; justify-content: center; max-width: 92vw; max-height: 84vh; }
.lb-stage video { max-width: 92vw; max-height: 84vh; width: auto; height: auto; border-radius: 10px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); background: #000; }
.lb-stage img { max-width: min(680px, 92vw); max-height: 84vh; width: auto; height: auto; border-radius: 8px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); background: #fff; }
.lb-nav { display: flex; align-items: center; gap: 20px; }
.lb-nav[hidden] { display: none; }
.lb-nav button {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg-raise); color: var(--text);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.lb-nav button:hover:not(:disabled) { border-color: var(--text-dim); }
.lb-nav button:disabled { opacity: .35; cursor: default; }
.lb-count { color: var(--text-dim); font-size: 13px; min-width: 52px; text-align: center; }

/* purchase modals */
.modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 4vw; overflow-y: auto; }
.modal[hidden] { display: none; }
body.modal-open { overflow: hidden; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(6,8,12,.88); backdrop-filter: blur(3px); }
.modal-panel { position: relative; z-index: 1; width: 100%; max-width: 940px; background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.85); }
.modal-panel.narrow { max-width: 460px; }
.modal-panel > .eyebrow { display: block; }
.modal-panel h3 { font-size: 22px; margin-top: 6px; }
.modal-sub { color: var(--text-dim); font-size: 15px; margin-top: 8px; }
.modal-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--line); color: var(--text); font-size: 15px; cursor: pointer; line-height: 1; }
.modal-close:hover { border-color: var(--text-dim); }
.modal-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.modal-forms { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; margin-top: 22px; align-items: start; }
@media (max-width: 720px) { .modal-forms { grid-template-columns: 1fr; } }
.modal-panel.narrow > form { display: grid; gap: 13px; margin-top: 20px; }
/* Flatten the .two wrappers so every field is a direct grid item and gets the
   same 13px gap — otherwise the paired inputs touch and their focus rings collide. */
.modal-panel.narrow .two { display: contents; }
.modal-panel.narrow .status { font-family: var(--mono); font-size: 13px; color: var(--text-dim); min-height: 18px; margin: 0; }

/* trial reveal — shown in the download modal after a successful POST /trial. The
   key itself is never shown here (email-only, see trial_request.js); this is just
   the confirmation message + download button. */
#trial-key-reveal { margin-top: 18px; }
#trial-key-reveal .trial-reveal-message { color: var(--text-dim); font-size: 13px; margin: 0 0 14px; }

/* help pages */
.help { padding: 56px 0 8px; }
.help .wrap { max-width: 780px; }
.help .eyebrow { display: block; }
.help h1 { font-size: clamp(28px, 4vw, 40px); margin: 12px 0 0; }
.help .lede { color: var(--text-dim); font-size: 18px; margin-top: 16px; line-height: 1.6; }
/* The global rule above gives every section 88px of padding top and bottom, which
   is right for a landing page you scroll through and far too airy for a document
   you read top to bottom: it left roughly 220px and a divider between one heading
   and the next. Keep the divider, lose the canyon. */
.help section { margin-top: 36px; padding: 36px 0 0; border-top: 1px solid var(--line-soft); }
.help h2 { font-size: 22px; margin: 0; }
.help h3 { font-size: 17px; margin: 26px 0 0; }
.help p { color: var(--text-dim); margin-top: 12px; line-height: 1.6; }
.help ul, .help ol { color: var(--text-dim); margin-top: 12px; padding-left: 22px; line-height: 1.6; }
.help li { margin-top: 8px; }
.help li::marker { color: var(--accent); }
.help code { font-family: var(--mono); font-size: .9em; background: var(--line-soft); padding: 2px 6px; border-radius: 5px; color: var(--text); }
.help .back { display: inline-block; margin-top: 44px; }
/* A screenshot inside a help topic: bordered so a pale application window
   does not bleed into the page background, captioned in the dim body colour. */
.help-figure { margin: 24px 0 0; }
/* A near-square dialog crop: at the full 732px column it renders larger than its
   own 703px capture and swallows the section it belongs to. Cap it, as .shot-inline
   does for the same reason. */
.help-figure img { display: block; width: 100%; max-width: 520px; height: auto; border: 1px solid var(--line-soft); border-radius: 10px; }
.help-figure figcaption { color: var(--text-dim); font-size: 14px; margin-top: 10px; }
/* .help h2 carries no bottom margin (paragraphs supply their own top margin), so a
   block that opens with its own rule or border sits flush against the heading and
   reads as part of it. Used by the steps and FAQ on /affiliates/. */
.help .steps, .help .faq { margin-top: 24px; }
.help .topics { display: grid; gap: 14px; margin-top: 28px; }
.help .topic { display: block; border: 1px solid var(--line-soft); border-radius: 12px; padding: 20px 22px; }
.help .topic:hover { border-color: var(--text-dim); text-decoration: none; }
.help .topic h2 { font-size: 18px; color: var(--text); }
.help .topic p { margin-top: 6px; }

/* Walkthrough facade on /help/getting-started. A button until pressed, then it
   replaces itself with a youtube-nocookie iframe: a real iframe on page load
   would pull about a megabyte of script onto the first page a trial user sees. */
.walkthrough { margin: 28px 0 8px; }
/* The still is self-hosted rather than pulled from i.ytimg.com, so the promise
   above holds literally: no request reaches Google until the button is pressed. */
.walkthrough .video-facade {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; aspect-ratio: 16 / 9; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-sink) center / cover no-repeat;
  background-image: linear-gradient(rgba(9, 12, 17, .55), rgba(9, 12, 17, .55)), var(--facade-still);
  color: var(--text); font-family: var(--sans); font-size: 15px;
  transition: border-color .15s ease;
}
.walkthrough .video-facade:hover { border-color: var(--accent); }
.walkthrough .video-facade:hover .video-facade-play { transform: scale(1.12); }
/* The label and arrow sit on a photograph, so they need their own ground. */
.walkthrough .video-facade-play,
.walkthrough .video-facade-label {
  position: relative; z-index: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.walkthrough .video-facade-play {
  font-size: 26px; color: var(--accent); line-height: 1;
  transition: transform .15s ease;
}
.walkthrough .walkthrough-frame {
  width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: var(--radius); background: var(--bg-sink);
}

/* Help-page furniture, first used by /help/spreadsheet-templates. Scoped to .help
   so the admin and affiliate tables keep their own denser treatment. */
.help .shot { margin: 28px 0; }
.help .shot img,
.help .shot .shot-clip {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-sink);
}
.help .shot figcaption {
  margin-top: 10px; font-size: 13px; color: var(--text-dim);
}
/* A dialog crop sits inside a callout: full width would blow it up well past
   its native 611px and turn a crisp screenshot into a soft one. */
.help .shot-inline { margin: 18px 0 16px; }
.help .shot-inline img { max-width: 611px; }
/* The clips are walkthroughs rather than decoration, so they carry controls and
   start on a click. preload="none" keeps a help page off the critical path for a
   megabyte nobody has asked to watch yet. */
/* Wide tables scroll inside their own box rather than pushing the page sideways. */
.help .tablewrap { overflow-x: auto; margin: 18px 0; }
.help table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.help th, .help td {
  text-align: left; vertical-align: top;
  padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line-soft);
}
.help th { color: var(--text-dim); font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.help tbody tr:last-child td { border-bottom: 0; }
.help .callout {
  margin: 22px 0; padding: 18px 20px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
}
.help .callout h3 { margin: 0 0 10px; font-size: 16px; }
.help .callout p:last-child, .help .callout ol:last-child { margin-bottom: 0; }
/* The macro block is the one most likely to stop somebody, so it reads as a
   warning rather than as another tip. */
.help .callout-warn { border-left-color: var(--cut); }
/* Paired download buttons. Equal width so neither reads as the afterthought,
   and they stack rather than shrink on a narrow screen. */
.help .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 8px; }
.help .cta-row .btn { flex: 1 1 240px; text-align: center; }