/* ─────────────────────────────────────────────────────────────────────────────
   Legal Engine — Directories
   Built on the LE brand guide: warm greys, not black on white. Poppins for
   headings, Inter for body. #f5f5f5 page, #fff cards, #eaeaea borders,
   #454545 text. Pure black text and pure white page backgrounds are the two
   things the guide names as making it look like a different company.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --charcoal: #454545;
  --blue: #3a8dff;
  --blue-dark: #2a7ae5;
  --coral: #ff6b5e;
  --gold: #ffd666;
  --green: #4caf50;

  --page: #f5f5f5;
  --card: #ffffff;
  --surface: #fafafa;
  --border: #eaeaea;
  --border-soft: #f0f0f0;

  --text: #454545;
  --text-strong: #2f2f2f;
  --text-mid: #555555;
  --text-muted: #999999;
  --text-faint: #bbbbbb;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lift: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-blue: 0 4px 16px rgba(58, 141, 255, 0.28);

  --wrap: 1160px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text-strong);
  margin: 0;
}
h1 { font-size: clamp(2.3rem, 4.2vw, 3.4rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.12; }
h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
p { margin: 0 0 1rem; }
a { color: var(--blue); }

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

/* ── Header ─────────────────────────────────────────────────────────────── */
header.site {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.nav-row { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand img { height: 34px; width: auto; transition: transform 0.3s var(--ease); }
.brand:hover img { transform: scale(1.08); }

nav.primary { display: flex; gap: 26px; align-items: center; }
nav.primary a {
  color: var(--text); text-decoration: none; font-size: 0.95rem; font-weight: 500;
  letter-spacing: -0.01em; padding: 6px 0; position: relative; white-space: nowrap;
}
nav.primary a:hover { color: var(--blue); }
nav.primary a.active { color: var(--blue); font-weight: 600; }
nav.primary a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--blue); border-radius: 2px;
}
.tag-new {
  display: inline-block; margin-left: 7px; padding: 2px 7px; border-radius: 20px;
  background: var(--coral); color: #fff; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle;
}

/* The mobile menu is a checkbox, so it works with JavaScript disabled and has
   no state to get out of step with the DOM. */
.nav-toggle, .nav-toggle-label { display: none; }

.subnav { background: var(--surface); border-bottom: 1px solid var(--border); }
.subnav .wrap { display: flex; gap: 30px; overflow-x: auto; scrollbar-width: none; }
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav a {
  color: var(--text-muted); text-decoration: none; font-size: 0.92rem; font-weight: 500;
  padding: 14px 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.subnav a:hover { color: var(--text); }
.subnav a.active { color: var(--text-strong); border-bottom-color: var(--coral); font-weight: 600; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--radius-sm); font-size: 0.97rem;
  font-weight: 600; text-decoration: none; border: 1px solid transparent;
  cursor: pointer; transition: all 0.2s var(--ease); white-space: nowrap;
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.btn-primary:hover { background: var(--blue-dark); transform: translateY(-1px); box-shadow: var(--shadow-blue); }
.btn-ghost { background: var(--card); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface); border-color: #ddd; transform: translateY(-1px); }
.btn-sm { padding: 10px 20px; font-size: 0.9rem; }
.btn:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(58,141,255,0.35); outline-offset: 2px;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { padding: 84px 0 76px; }
.hero-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
  padding: 7px 15px; border-radius: 20px; background: rgba(58,141,255,0.09);
  color: var(--blue); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em;
}
.lede { font-size: 1.18rem; line-height: 1.62; color: var(--text-mid); max-width: 42ch; margin-bottom: 30px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cta-note { font-size: 0.85rem; color: var(--text-muted); margin: 18px 0 0; }

.video-frame {
  border-radius: var(--radius-lg); overflow: hidden; background: #0f172a;
  border: 1px solid var(--border); box-shadow: var(--shadow-lift); line-height: 0;
}
.video-frame video { width: 100%; height: auto; display: block; }

/* ── Sections ───────────────────────────────────────────────────────────── */
.block { padding: 88px 0; }
.block.wash { background: var(--surface); border-block: 1px solid var(--border); }
.section-head { max-width: 62ch; margin-bottom: 48px; }
.section-head p { color: var(--text-mid); font-size: 1.08rem; margin: 14px 0 0; }

/* ── Steps ──────────────────────────────────────────────────────────────── */
/* Everything is visible. The previous version hid the substance behind hover,
   which does not exist on a phone, so the entire explanation was unreachable
   for anyone reading this between meetings. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow-card); transition: all 0.25s var(--ease);
}
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: #dfe6ee; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: rgba(58,141,255,0.1);
  color: var(--blue); font-weight: 700; font-size: 0.85rem; margin-bottom: 16px;
}
.step h3 { margin-bottom: 10px; }
.step p { color: var(--text-mid); font-size: 0.98rem; margin: 0; }
.step p + p { margin-top: 12px; }
.step .detail { font-size: 0.93rem; color: var(--text-muted); }

/* ── Showcase ───────────────────────────────────────────────────────────── */
/* The old page described a document filling itself in body copy. This is the
   most persuasive thing the product does, so it is shown. */
.showcase { display: grid; gap: 72px; }
.show-row { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 52px; align-items: center; }
/* Alternating rows must swap the COLUMNS, not just the order of the children.
   Reordering alone put the image into the 0.8fr column on every other row, so
   the middle screenshot rendered visibly smaller than the two around it and the
   section read as three unrelated shots rather than one sequence. */
.show-row:nth-child(even) { grid-template-columns: 1.2fr 0.8fr; }
.show-row:nth-child(even) .show-copy { order: 2; }
.show-shot {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border);
  box-shadow: var(--shadow-lift); background: var(--surface); line-height: 0;
  padding: 10px;
}
.show-shot img { border-radius: 6px; border: 1px solid var(--border-soft); }
.show-shot img { width: 100%; height: auto; display: block; }
.show-copy h3 { font-size: 1.5rem; margin-bottom: 12px; }
.show-copy p { color: var(--text-mid); }
.show-label {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--coral); margin-bottom: 10px;
}

/* ── Export ─────────────────────────────────────────────────────────────── */
.export-panel {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 48px; box-shadow: var(--shadow-card);
}
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.chip {
  padding: 6px 14px; border-radius: 20px; background: var(--surface);
  border: 1px solid var(--border); font-size: 0.8rem; font-weight: 600; color: var(--text-mid);
}
.mini-table { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; font-size: 0.88rem; }
.mini-table .row { display: grid; grid-template-columns: 1.6fr 1fr 0.8fr; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border-soft); }
.mini-table .row:last-child { border-bottom: none; }
.mini-table .row.head { background: var(--charcoal); color: #fff; font-weight: 600; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; }
.mini-table .row:not(.head):nth-child(even) { background: var(--surface); }

/* ── Trust ──────────────────────────────────────────────────────────────── */
.trust { background: var(--card); border-block: 1px solid var(--border); padding: 26px 0; }
.trust-row { display: flex; gap: 20px 34px; justify-content: center; flex-wrap: wrap; font-size: 0.88rem; color: var(--text-mid); }
.trust-row span { display: inline-flex; align-items: center; gap: 9px; }
.sw { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: 0 0 auto; }

/* ── Pricing ────────────────────────────────────────────────────────────── */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.tier {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 34px 28px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-card);
  transition: all 0.25s var(--ease); position: relative;
}
.tier:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.tier.featured { border-color: var(--blue); box-shadow: 0 4px 20px rgba(58,141,255,0.14); }
.tier-flag {
  position: absolute; top: -11px; left: 28px; padding: 3px 12px; border-radius: 20px;
  background: var(--blue); color: #fff; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.tier-name { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); }
.tier-band { font-size: 1.02rem; font-weight: 600; color: var(--text-strong); }
.tier-price { font-family: "Poppins", sans-serif; font-size: 2.6rem; font-weight: 700; letter-spacing: -0.03em; color: var(--text-strong); margin-top: 10px; }
.tier-price sup { font-size: 1.1rem; font-weight: 600; top: -0.7em; margin-right: 2px; }
.tier-per { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 20px; }
.tier .btn { margin-top: auto; }

.included {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px; box-shadow: var(--shadow-card);
}
.included ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 28px; }
.included li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.97rem; color: var(--text-mid); }
.tick { color: var(--green); font-weight: 700; flex: 0 0 auto; }

.addons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 26px; }
.addon {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-card);
}
.addon-price { font-family: "Poppins", sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--text-strong); margin-top: auto; }
.addon-price span { display: block; font-family: "Inter", sans-serif; font-size: 0.82rem; font-weight: 400; color: var(--text-muted); }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq-group { margin-bottom: 44px; }
.faq-group > h2 { font-size: 1.35rem; margin-bottom: 18px; }
details.faq {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 10px; overflow: hidden;
}
details.faq summary {
  padding: 18px 22px; cursor: pointer; font-weight: 600; color: var(--text-strong);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 1rem;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+"; color: var(--blue); font-size: 1.3rem; font-weight: 400; flex: 0 0 auto;
  transition: transform 0.2s var(--ease);
}
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq .answer { padding: 0 22px 20px; color: var(--text-mid); font-size: 0.97rem; }
details.faq .answer p:last-child { margin-bottom: 0; }

/* ── Closer + footer ────────────────────────────────────────────────────── */
.closer { padding: 92px 0; text-align: center; background: var(--card); border-top: 1px solid var(--border); }
.closer p { color: var(--text-mid); font-size: 1.08rem; max-width: 52ch; margin: 16px auto 30px; }
footer.site { background: var(--card); border-top: 1px solid var(--border); padding: 26px 0; }
.footer-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 0.86rem; color: var(--text-muted); }
.footer-links { display: flex; gap: 20px; }
.footer-links a { color: var(--text-muted); text-decoration: none; }
.footer-links a:hover { color: var(--blue); }

/* ── Mobile ─────────────────────────────────────────────────────────────── */
/* The previous version dropped the primary nav entirely below 900px with no
   replacement, so Home, Agents, Pricing and Security were unreachable on a
   phone, and hid the hero video, which was the only demonstration on the page. */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .lede { max-width: none; }
  .hero { padding: 52px 0 48px; }
  .steps { grid-template-columns: 1fr; }
  .show-row, .export-panel { grid-template-columns: 1fr; gap: 32px; }
  .show-row:nth-child(even) .show-copy { order: 0; }
  .export-panel { padding: 32px; }
  .tier-grid, .addons { grid-template-columns: 1fr; }
  .included ul { grid-template-columns: 1fr; }
  .block { padding: 60px 0; }
  .wrap { padding: 0 22px; }

  .nav-toggle-label {
    display: flex; flex-direction: column; gap: 5px; cursor: pointer;
    padding: 10px; margin: -10px -10px -10px auto;
  }
  .nav-toggle-label span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: all 0.25s var(--ease); }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-row { flex-wrap: wrap; height: auto; padding: 12px 0; }
  .brand { margin-right: 0; }
  nav.primary {
    display: none; order: 3; flex-basis: 100%; flex-direction: column;
    align-items: flex-start; gap: 0; padding-top: 8px;
  }
  .nav-toggle:checked ~ nav.primary { display: flex; }
  nav.primary a { width: 100%; padding: 13px 0; border-bottom: 1px solid var(--border-soft); }
  nav.primary a.active::after { display: none; }
  .nav-row > .btn { display: none; }
  .nav-toggle:checked ~ .btn { display: inline-flex; width: 100%; order: 4; margin-top: 12px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; }
  .trust-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .export-panel, .included, .addon, .tier { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }

/* ── Hero loop + the film on demand ─────────────────────────────────────── */
.film-toggle {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 14px;
  background: none; border: none; padding: 6px 0; cursor: pointer;
  font-family: inherit; font-size: 0.92rem; font-weight: 500; color: var(--text-mid);
}
.film-toggle:hover { color: var(--blue); }
.play-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: rgba(58,141,255,0.12);
  color: var(--blue); font-size: 0.6rem; padding-left: 2px;
}
.film-len { color: var(--text-faint); font-size: 0.85rem; }
.film-panel { padding: 8px 0 40px; }
.film-panel .video-frame { max-width: 900px; margin: 0 auto; }

/* ── The arithmetic ─────────────────────────────────────────────────────── */
.maths-panel {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card);
}
.maths-inputs { padding: 40px; display: flex; flex-direction: column; gap: 20px; }
.maths-inputs label { display: flex; flex-direction: column; gap: 7px; }
.maths-inputs label > span { font-size: 0.9rem; font-weight: 600; color: var(--text-strong); }
.maths-inputs input {
  padding: 12px 14px; font-family: "Poppins", sans-serif; font-size: 1.15rem; font-weight: 600;
  color: var(--text-strong); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); width: 100%;
}
.maths-inputs input:focus {
  outline: none; border-color: var(--blue); background: #fff;
  box-shadow: 0 0 0 3px rgba(58,141,255,0.1);
}
.maths-inputs small { font-size: 0.82rem; color: var(--text-muted); }
.maths-note { font-size: 0.82rem; color: var(--text-muted); margin: auto 0 0; }

.maths-result {
  padding: 40px; background: var(--surface); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 14px;
}
.maths-line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.maths-line span { font-size: 0.92rem; color: var(--text-mid); }
.maths-line strong { font-family: "Poppins", sans-serif; font-weight: 600; color: var(--text-strong); font-size: 1.1rem; white-space: nowrap; }
.maths-line.big strong { font-size: 2.4rem; letter-spacing: -0.03em; line-height: 1.1; }
.maths-result hr { border: none; border-top: 1px solid var(--border); margin: 6px 0; width: 100%; }
.maths-verdict {
  font-size: 0.95rem; color: var(--text-mid); padding: 14px 16px; border-radius: var(--radius-sm);
  background: rgba(58,141,255,0.06); border: 1px solid rgba(58,141,255,0.14);
}
.maths-verdict.good { background: rgba(76,175,80,0.08); border-color: rgba(76,175,80,0.2); color: #2f6d32; }
.maths-verdict.level { background: rgba(255,214,102,0.14); border-color: rgba(255,214,102,0.4); color: #7a5c00; }
.maths-result .btn { margin-top: auto; }

@media (max-width: 980px) {
  .maths-panel { grid-template-columns: 1fr; }
  .maths-result { border-left: none; border-top: 1px solid var(--border); }
  .maths-inputs, .maths-result { padding: 28px; }
  .maths-line.big strong { font-size: 2rem; }
}

/* The pause control. Present because WCAG 2.2.2 requires a way to stop moving
   content that starts on its own and runs past five seconds, not because it
   looked like a nice touch. */
.loop-frame { position: relative; }
.loop-toggle {
  position: absolute; right: 12px; bottom: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(15, 23, 42, 0.62); color: #fff;
  border: none; cursor: pointer; font-size: 0.7rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s var(--ease), background 0.2s var(--ease);
  backdrop-filter: blur(4px);
}
.loop-frame:hover .loop-toggle,
.loop-toggle:focus-visible { opacity: 1; }
.loop-toggle:hover { background: rgba(15, 23, 42, 0.85); }
/* Never hidden from keyboard users or on touch, where there is no hover. */
.loop-toggle:focus-visible { outline: 3px solid rgba(58,141,255,0.6); outline-offset: 2px; }
@media (hover: none) { .loop-toggle { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .loop-toggle { opacity: 1; } }

/* ── Mobile defects found by measuring, not by looking ───────────────────── */
/* Measured across iPhone SE, Android 360, iPhone 15, Pro Max and iPad. Every
   one of these renders fine in a screenshot, which is why none of them was
   caught by looking at the page. */
@media (max-width: 980px) {
  /* THE PAGE SLID SIDEWAYS. A -10px right margin on the menu button pushed its
     edge to 400px inside a 390px viewport, so every page scrolled horizontally.
     The one defect here a visitor would notice within a second, and the one
     least visible in a screenshot. */
  .nav-toggle-label {
    margin: 0 0 0 auto;
    padding: 11px;
    min-width: 44px; min-height: 44px;
    align-items: center; justify-content: center;
  }

  /* Tap targets. 44x44 is the floor at which a thumb hits what it aimed at;
     below it, mis-taps are the norm rather than the exception. */
  .brand { min-height: 44px; align-items: center; }

  .subnav a { padding: 14px 12px; min-height: 44px; display: inline-flex; align-items: center; }
  .subnav .wrap { padding-left: 10px; padding-right: 10px; }

  .footer-links { gap: 4px 18px; flex-wrap: wrap; }
  .footer-links a { padding: 11px 0; min-height: 44px; display: inline-flex; align-items: center; }
  .footer-row { align-items: center; }

  .trust-row a { padding: 11px 0; min-height: 44px; display: inline-flex; align-items: center; }

  .film-toggle { min-height: 44px; padding: 10px 0; }
  .loop-toggle { width: 44px; height: 44px; font-size: 0.8rem; }
}

/* ── Try it now ──────────────────────────────────────────────────────────── */
/* The primary action on the page. It gets a second line rather than a bigger
   font, because "five minutes, live" answers the question that stops the click
   ("how long is this going to take me?") and a larger button does not. */
.btn-try { flex-direction: column; gap: 2px; padding: 13px 30px; line-height: 1.25; }
.btn-try .btn-sub { font-size: 0.76rem; font-weight: 500; opacity: 0.82; letter-spacing: 0.01em; }

/* The band after the showcase, where they have just watched it work and the
   question in their head is "would it do that for me". */
.try-band {
  background: linear-gradient(135deg, #3a8dff 0%, #2a7ae5 100%);
  color: #fff; padding: 52px 0;
}
.try-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.try-inner h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 8px; }
.try-inner p { color: rgba(255,255,255,0.88); margin: 0; max-width: 46ch; }
.try-band .btn-primary { background: #fff; color: #2a7ae5; border-color: #fff; }
.try-band .btn-primary:hover { background: #f2f7ff; color: #1f6fe0; box-shadow: 0 6px 20px rgba(0,0,0,0.18); }

/* Sticky bar. Hidden while the hero is on screen: covering the thing you are
   advertising with an advert for it is a common and self-defeating pattern. */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(255,255,255,0.97); backdrop-filter: blur(20px);
  border-top: 1px solid var(--border); box-shadow: 0 -4px 24px rgba(0,0,0,0.07);
  animation: stickyIn 0.28s var(--ease);
}
@keyframes stickyIn { from { transform: translateY(100%); } to { transform: none; } }
.sticky-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 12px; padding-bottom: 12px; }
.sticky-copy { font-size: 0.95rem; font-weight: 500; color: var(--text-strong); }
.sticky-actions { display: flex; gap: 10px; flex-shrink: 0; }

@media (max-width: 780px) {
  .try-inner { flex-direction: column; align-items: flex-start; gap: 22px; }
  .try-inner .btn { width: 100%; }
  .sticky-copy { display: none; }        /* the action matters, the sentence does not */
  .sticky-inner { justify-content: stretch; }
  .sticky-actions { width: 100%; }
  .sticky-actions .btn { flex: 1; min-height: 48px; }
  .sticky-book { display: none; }        /* one thumb-sized action, not two cramped ones */
  /* The bar sits over the footer, so give the page room to scroll clear of it. */
  body { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) { .sticky-cta { animation: none; } }

/* The film occupies the same frame as the loop, so only one video is ever on
   screen and there is nothing to press play on by mistake. */
.loop-frame video { width: 100%; height: auto; display: block; }
.loop-frame video[hidden] { display: none; }


/* ---- Section rail -------------------------------------------------------
   A fixed table of contents in the left gutter. Appears only where there IS a
   gutter: below 1100px the content already uses the full width and the sticky
   CTA owns the bottom of the screen. */
.rail { position: fixed; left: 24px; top: 50%; transform: translateY(-50%);
        z-index: 60; display: none; }
.rail ul { list-style: none; margin: 0; padding: 0; }
.rail li + li { margin-top: 4px; }
.rail a { display: flex; align-items: center; gap: 10px; padding: 6px 8px;
          min-height: 32px; text-decoration: none; border-radius: 8px;
          color: #999; transition: color .2s, background .2s; }
.rail a:hover, .rail a:focus-visible { color: #454545; background: rgba(255,255,255,.9); }
.rail-dot { width: 8px; height: 8px; border-radius: 50%; background: #d8d8d8;
            flex: 0 0 8px; transition: background .2s, transform .2s; }
.rail-label { font-size: .8rem; font-weight: 500; letter-spacing: -.01em;
              opacity: 0; transform: translateX(-4px);
              transition: opacity .2s, transform .2s; white-space: nowrap; }
.rail a:hover .rail-label, .rail a:focus-visible .rail-label,
.rail a.is-current .rail-label { opacity: 1; transform: none; }
.rail a.is-current { color: #454545; }
.rail a.is-current .rail-dot { background: #3a8dff; transform: scale(1.3); }
@media (min-width: 1100px) { .rail { display: block; } }
@media (prefers-reduced-motion: reduce) {
  .rail a, .rail-dot, .rail-label { transition: none; }
}

/* Marks copy that is standing in until the real wording arrives, so a
   placeholder can never quietly become the published version. */
.draft-note { font-size: .8rem; color: #b98900; background: #fffbeb;
              border: 1px solid #fcd34d; border-radius: 6px; padding: 6px 10px;
              display: inline-block; margin-top: 8px; }