/* ── Crest RTO — Marketing Site Styles ── */
/* Layered on top of brand/brand.css tokens. Site-specific layout only. */

:root {
  --content-max: 1240px;
  --rail-w: 152px;

  --r-btn:   8px;
  --r-card:  14px;
  --r-panel: 18px;
  --r-chip:  999px;

  /* Shadows that are actually visible against a beige ground.
     The previous set sat at 0.04–0.05 alpha and read as nothing. */
  --lift-sm: 0 1px 2px rgba(26,24,21,0.05), 0 3px 10px rgba(26,24,21,0.06);
  --lift-md: 0 2px 5px rgba(26,24,21,0.06), 0 10px 30px rgba(26,24,21,0.10);
  --lift-lg: 0 4px 10px rgba(26,24,21,0.07), 0 26px 64px rgba(26,24,21,0.15);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
}
/* At rail widths the wrap is indented so the rail has a home. Sections stay
   full-bleed — only their inner content moves. */
@media (min-width: 1360px) {
  body.has-rail .wrap { padding-left: calc(var(--rail-w) + var(--space-md)); }
}

/* Clip rather than left:-9999px — an offscreen box still widens scrollWidth. */
.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 200;
  background: var(--forest);
  color: var(--paper);
  padding: 10px 18px;
  border-radius: var(--r-btn);
  font-size: 14px;
  text-decoration: none;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}
.skip-link:focus { clip-path: none; opacity: 1; pointer-events: auto; }

/* ── Section rail — labelled, tracks scroll (Superpower pattern) ── */
.index-rail { display: none; }
@media (min-width: 1360px) {
  .index-rail {
    display: block;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    left: max(var(--space-md), calc((100vw - var(--content-max)) / 2 + var(--space-md)));
    width: var(--rail-w);
    z-index: 90;
    padding-right: 20px;
  }
  .rail-list { list-style: none; display: flex; flex-direction: column; gap: 3px; }
  .rail-list a {
    display: grid;
    grid-template-columns: 1fr 20px;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0 6px 12px;
    text-decoration: none;
    border-left: 1.5px solid transparent;
    transition: border-color 260ms ease, opacity 260ms ease;
    opacity: 0.42;
  }
  .rail-label {
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-align: right;
  }
  .rail-num {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: var(--muted);
  }
  .rail-list a:hover { opacity: 0.75; }
  .rail-list a.is-active {
    opacity: 1;
    border-left-color: var(--forest);
  }
  .rail-list a.is-active .rail-label { font-weight: 600; }
  .rail-list a.is-active .rail-num { color: var(--forest); }

  /* Inverted over dark sections */
  .index-rail.is-over-dark .rail-label { color: var(--paper); }
  .index-rail.is-over-dark .rail-num { color: rgba(242,238,229,0.55); }
  .index-rail.is-over-dark .rail-list a.is-active { border-left-color: var(--forest-soft); }
  .index-rail.is-over-dark .rail-list a.is-active .rail-num { color: var(--forest-soft); }
}

/* ── Nav ── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 320ms ease, box-shadow 320ms ease, border-color 320ms ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(242,238,229,0.97);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom-color: var(--line);
}
.nav.is-menu-open {
  background: var(--paper-lift);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  height: 76px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
}
@media (min-width: 1360px) {
  body.has-rail .nav-inner { padding-left: calc(var(--rail-w) + var(--space-md)); }
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}
.nav-mark { width: 26px; height: 26px; flex-shrink: 0; color: var(--ink); }
.nav-word {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.nav-links { display: none; align-items: center; gap: 4px; margin-right: auto; }
@media (min-width: 980px) { .nav-links { display: flex; } }
.nav-links > a, .nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 9px 14px;
  border-radius: var(--r-btn);
  transition: color 160ms ease, background 160ms ease;
}
.nav-links > a:hover, .nav-trigger:hover { color: var(--forest); background: rgba(31,61,43,0.05); }
.nav-trigger .caret { width: 11px; height: 11px; transition: transform 220ms var(--ease); }
.nav-trigger[aria-expanded="true"] { color: var(--forest); background: rgba(31,61,43,0.06); }
.nav-trigger[aria-expanded="true"] .caret { transform: rotate(180deg); }

.nav-actions { display: none; align-items: center; gap: 8px; }
@media (min-width: 980px) { .nav-actions { display: flex; } }
.nav-login {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 9px 14px;
  border-radius: var(--r-btn);
  transition: color 160ms ease;
}
.nav-login:hover { color: var(--forest); }

.nav-toggle {
  display: inline-flex;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--r-chip);
}
@media (min-width: 980px) { .nav-toggle { display: none; } }
.nav-toggle svg { width: 22px; height: 22px; stroke: var(--ink); }

/* ── Mega-menu ── */
.mega {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--paper-lift);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--lift-md);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 240ms var(--ease);
}
.mega[hidden] { display: none; }
.mega.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

.mega-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: var(--space-xl);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}
.mega-grid-solutions { grid-template-columns: 0.9fr 1.6fr; }

.mega-mark { width: 26px; height: 26px; color: var(--forest); margin-bottom: 14px; }
.mega-lead h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}
.mega-lead p { font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 34ch; }
.mega-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--forest);
  text-decoration: none;
}
.mega-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.mega-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.mega-col { display: flex; flex-direction: column; gap: 2px; }
.mega-entry {
  display: block;
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: var(--r-btn);
  text-decoration: none;
  transition: background 160ms ease;
}
.mega-entry:hover { background: rgba(31,61,43,0.05); }
.me-name {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 3px;
}
.me-meta { display: block; font-size: 13px; line-height: 1.5; color: var(--muted); }
.me-std {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--forest);
}
.mega-note {
  margin-top: var(--space-md);
  padding: 14px 16px;
  border-radius: var(--r-btn);
  background: rgba(31,61,43,0.05);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.mega-note .mn-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: 5px;
}

/* Mobile menu sheet */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-md);
  padding: 90px var(--space-lg) var(--space-lg);
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  overflow-y: auto;
  transition: opacity 220ms ease, transform 220ms ease;
}
.mobile-menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mobile-menu > a {
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
}
.mobile-menu .m-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--forest);
  margin-right: 12px;
}
.mobile-actions { display: flex; gap: 10px; margin-top: var(--space-md); flex-wrap: wrap; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--r-btn);
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 200ms var(--ease), background 180ms ease,
              border-color 180ms ease, color 180ms ease, box-shadow 220ms ease;
  touch-action: manipulation;
}
.btn:active { transform: scale(0.975); }
.btn-primary {
  background: var(--forest);
  color: var(--paper);
  box-shadow: 0 1px 2px rgba(20,41,28,0.18), 0 6px 18px rgba(20,41,28,0.20);
}
.btn-primary:hover {
  background: var(--forest-deep);
  box-shadow: 0 2px 5px rgba(20,41,28,0.20), 0 14px 32px rgba(20,41,28,0.26);
  transform: translateY(-1px);
}
.btn-ghost { background: var(--paper-lift); border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--forest); color: var(--forest); }
.btn-lg { padding: 16px 32px; font-size: 15.5px; }

/* ── Sections ── */
section { position: relative; }
.section-pad { padding: clamp(84px, 11vw, 152px) 0; }

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}
@media (min-width: 760px) {
  .section-head { grid-template-columns: 110px 1fr; align-items: baseline; gap: var(--space-lg); }
}
.section-folio {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--forest);
}
.section-folio .of { color: var(--muted); }
.section-head h2 { max-width: 780px; }

/* ── Hero ── */
.hero {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: 132px 0 72px;
  /* The scan-stage glow bleeds past its column by design; clip (not hidden,
     which would create a scroll container) so it cannot widen the page. */
  overflow-x: clip;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: 1.08fr 0.92fr; gap: var(--space-xl); }
}
.hero-copy { max-width: 640px; }
.hero-copy h1 { margin: 16px 0 var(--space-md); }
.hero-copy .t-lede { max-width: 530px; margin-bottom: var(--space-lg); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }


/* Live scan mock */
.scan-stage { position: relative; }
.scan-stage::before {
  content: "";
  position: absolute;
  inset: -14% -10% -18%;
  background:
    radial-gradient(ellipse 58% 52% at 62% 34%, rgba(31,61,43,0.18), transparent 68%),
    radial-gradient(ellipse 48% 44% at 30% 76%, rgba(214,207,191,0.6), transparent 70%);
  filter: blur(30px);
  z-index: 0;
  pointer-events: none;
}
.scan-panel {
  position: relative;
  z-index: 1;
  background: var(--paper-lift);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  box-shadow: var(--lift-lg);
  overflow: hidden;
}
.scan-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
}
.scan-panel-head .dot-row { display: flex; gap: 6px; }
.scan-panel-head .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(26,24,21,0.14); }
.scan-title { font-size: 12.5px; color: var(--muted); }
.scan-body { padding: 4px 0; }
.scan-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(26,24,21,0.06);
}
.scan-row:last-child { border-bottom: none; }
.scan-ref { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.scan-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.scan-name .pillar { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.scan-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--r-chip);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 420ms ease, transform 420ms ease, background 420ms ease, color 420ms ease;
}
.scan-status.is-in { opacity: 1; transform: translateY(0); }
.scan-status.pending,
.scan-status.scanning { background: rgba(107,102,96,0.10); color: var(--muted); }
.scan-status.green { background: var(--rag-green-bg); color: var(--rag-green); }
.scan-status.amber { background: var(--rag-amber-bg); color: var(--rag-amber); }
.scan-status.red { background: var(--rag-red-bg); color: var(--rag-red); }
.scan-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  border-top: 1px solid var(--line);
  background: rgba(232,226,212,0.55);
}
.scan-summary { font-size: 12.5px; color: var(--muted); }
.scan-summary b { color: var(--forest); font-weight: 600; }

/* ── Problem — dark editorial band, deliberately tighter than its neighbours ── */
.problem {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(72px, 8.5vw, 116px) 0;
}
.problem .section-folio { color: var(--forest-soft); }
/* ── Pricing ── */
.plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: start;
}
@media (min-width: 700px)  { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .plans { grid-template-columns: repeat(4, 1fr); gap: var(--space-md); } }
.plan {
  background: var(--paper-lift);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--lift-sm);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.plan-feature {
  background: var(--ink);
  border-color: transparent;
  box-shadow: var(--lift-lg);
  color: var(--paper);
}
@media (min-width: 1080px) { .plan-feature { transform: translateY(-14px); padding-bottom: calc(var(--space-lg) + 14px); } }
.plan-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest-soft);
  background: rgba(107,149,119,0.16);
  padding: 5px 11px;
  border-radius: var(--r-chip);
  margin-bottom: var(--space-md);
}
.plan-name { font-size: 21px; font-weight: 600; letter-spacing: -0.028em; margin-bottom: 8px; }
.plan-for { font-size: 14px; line-height: 1.6; color: var(--muted); min-height: 44px; }
.plan-feature .plan-for { color: rgba(242,238,229,0.62); }
.plan-price {
  margin: var(--space-md) 0;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--line);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--forest);
}
.plan-feature .plan-price { color: var(--forest-soft); border-bottom-color: rgba(242,238,229,0.14); }
.plan-list { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: var(--space-lg); }
.plan-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.plan-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 8px;
  width: 8px; height: 4px;
  border-left: 1.5px solid var(--forest);
  border-bottom: 1.5px solid var(--forest);
  transform: rotate(-45deg);
}
.plan-feature .plan-list li { color: rgba(242,238,229,0.82); }
.plan-feature .plan-list li::before { border-color: var(--forest-soft); }
.plan-cta { margin-top: auto; width: 100%; }
.plan-feature .btn-primary { background: var(--paper); color: var(--forest-deep); box-shadow: none; }
.plan-feature .btn-primary:hover { background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.22); }

.pricing-note {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.62;
  color: var(--muted);
  max-width: 70ch;
}

/* ── About — asymmetric split ── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-lg);
}
@media (min-width: 900px) {
  .about-grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-2xl); align-items: start; }
}
.about-quote {
  font-family: var(--font-serif);
  font-size: clamp(21px, 2.3vw, 27px);
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: var(--ink);
  border-left: 2px solid var(--forest);
  padding-left: var(--space-md);
  margin: var(--space-md) 0 var(--space-lg);
  max-width: 46ch;
}
.about-sig { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 12px; }
.about-sig .name { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.about-sig .role { color: var(--muted); font-size: 13.5px; }
.about-proof { display: grid; grid-template-columns: 1fr; gap: 2px; }
@media (min-width: 560px) and (max-width: 899px) { .about-proof { grid-template-columns: 1fr 1fr; gap: var(--space-md); } }
.about-proof .pf {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--line);
}
.about-proof .pf:last-child { border-bottom: none; }
.about-proof .pf-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest);
  margin-bottom: 7px;
}
.about-proof .pf-body { font-size: 14.5px; line-height: 1.62; color: var(--muted); }

/* ── Contact — dark close ── */
.contact { background: var(--forest); color: var(--paper); }
.contact .section-folio { color: var(--forest-soft); }
.contact .section-folio .of { color: rgba(242,238,229,0.5); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-lg);
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1fr 0.9fr; gap: var(--space-2xl); align-items: start; }
}
.contact-head { color: var(--paper); }
.contact-head .t-quiet { color: var(--forest-soft); }
.contact-lede { color: rgba(242,238,229,0.68); margin-top: var(--space-md); max-width: 44ch; }
.contact-direct { margin-top: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); }
.cd-item { display: block; text-decoration: none; }
.cd-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forest-soft);
  margin-bottom: 5px;
}
.cd-value { display: block; font-size: 16px; color: var(--paper); }
a.cd-item:hover .cd-value { text-decoration: underline; text-underline-offset: 4px; }

.contact-form {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(242,238,229,0.14);
  border-radius: var(--r-panel);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.cf-row { display: flex; flex-direction: column; gap: 7px; }
.cf-split { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 520px) { .cf-split { grid-template-columns: 1.4fr 1fr; } }
.contact-form label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(242,238,229,0.72);
}
.contact-form input,
.contact-form textarea {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--paper);
  background: rgba(0,0,0,0.16);
  border: 1px solid rgba(242,238,229,0.16);
  border-radius: var(--r-btn);
  padding: 12px 14px;
  width: 100%;
  transition: border-color 180ms ease, background 180ms ease;
  resize: vertical;
}
.contact-form input:hover,
.contact-form textarea:hover { border-color: rgba(242,238,229,0.3); }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--forest-soft);
  background: rgba(0,0,0,0.24);
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible { outline: 2px solid var(--forest-soft); outline-offset: 2px; }
.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] { border-color: #E08585; }
.cf-submit { background: var(--paper); color: var(--forest-deep); box-shadow: none; margin-top: 4px; }
.cf-submit:hover { background: #fff; box-shadow: 0 10px 28px rgba(0,0,0,0.22); }
.cf-note { font-size: 12.5px; color: rgba(242,238,229,0.5); text-align: center; }
.cf-note.is-error { color: #F0AFAF; }
.cf-note.is-ok { color: var(--forest-soft); }

/* ── Footer ── */
footer { padding: var(--space-lg) 0; border-top: 1px solid var(--line); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: space-between;
  align-items: center;
}
.footer-brand { display: inline-flex; align-items: center; gap: 10px; }
.footer-mark { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.footer-links a { color: var(--muted); text-decoration: none; font-size: 13.5px; }
.footer-links a:hover { color: var(--forest); }

/* ══════════════════════════════════════════════════════════════
   Rebuild, Aug 2026. Sections below replace the old problem /
   timeline / solutions blocks. Ordered to match the page.
   ══════════════════════════════════════════════════════════════ */

/* ── Hero: the rotating value word ──
   The sizer is a hidden copy of the LONGEST word, holding the inline box
   open so the headline never reflows mid-swap. The visible word is
   absolutely positioned over it. */
.hero-h1 {
  font-family: var(--font-sans);
  font-size: clamp(36px, 4.2vw, 58px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.038em;
  text-wrap: balance;
}
.rotator {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  color: var(--forest);
}
.rot-sizer { visibility: hidden; }
.rot-word {
  position: absolute;
  left: 0; top: 0;
  white-space: nowrap;
}
.rot-word.is-out { animation: rotOut 300ms var(--ease) forwards; }
.rot-word.is-in  { animation: rotIn  420ms var(--ease) forwards; }
@keyframes rotOut {
  to { opacity: 0; transform: translateY(-34%); filter: blur(2px); }
}
@keyframes rotIn {
  from { opacity: 0; transform: translateY(40%); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0);   filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .rot-word.is-out, .rot-word.is-in { animation: none; }
}

.hero-lede { margin-top: var(--space-md); max-width: 54ch; }

.hero-offer {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: var(--space-lg);
  padding: 8px 15px 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-chip);
  background: var(--paper-lift);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}
.ho-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--forest);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(31,61,43,0.5);
  animation: hoPulse 2.6s infinite;
}
@keyframes hoPulse {
  0%   { box-shadow: 0 0 0 0 rgba(31,61,43,0.42); }
  70%  { box-shadow: 0 0 0 8px rgba(31,61,43,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,61,43,0); }
}
@media (prefers-reduced-motion: reduce) { .ho-dot { animation: none; } }

.scan-count { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }

/* ── The fix card ──
   The old hero stopped at a verdict. A verdict is not the product; the
   remediation is. This overlaps the panel so the two read as one object. */
.scan-stage { position: relative; }
.fix-card {
  position: relative;
  margin: -18px 0 0 auto;
  width: min(94%, 420px);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-card);
  box-shadow: var(--lift-lg);
  padding: var(--space-md);
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
@media (min-width: 900px) { .fix-card { margin-right: -22px; } }
.fix-card.is-in { opacity: 1; transform: translateY(0) scale(1); }
.fix-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.fix-card .badge-red { background: rgba(160,28,28,0.18); color: #f0a3a3; }
.fix-std { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: rgba(242,238,229,0.5); }
.fix-what { font-size: 14.5px; line-height: 1.55; color: rgba(242,238,229,0.9); }
.fix-do {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(242,238,229,0.14);
}
.fix-do-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest-soft);
  margin-bottom: 7px;
}
.fix-do p { font-size: 14.5px; line-height: 1.55; color: var(--paper); }

/* ── Problem: three figures you can open ── */
.problem-head { margin-top: var(--space-md); color: var(--paper); }
.ph-accent { color: var(--forest-soft); }
.problem-sub { margin-top: 14px; color: rgba(242,238,229,0.6); max-width: 46ch; }

.prob-cards {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 780px) { .prob-cards { grid-template-columns: repeat(3, 1fr); } }
.prob-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  padding: var(--space-md);
  background: rgba(242,238,229,0.045);
  border: 1px solid rgba(242,238,229,0.13);
  border-radius: var(--r-card);
  cursor: pointer;
  font-family: inherit;
  transition: background 220ms ease, border-color 220ms ease, transform 320ms var(--ease);
}
.prob-card:hover {
  background: rgba(242,238,229,0.075);
  border-color: rgba(107,149,119,0.5);
  transform: translateY(-3px);
}
.pc-fig {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--forest-soft);
  line-height: 1.1;
}
.pc-label { font-size: 14.5px; line-height: 1.5; color: rgba(242,238,229,0.72); }
.pc-more {
  margin-top: auto;
  padding-top: 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--paper);
  opacity: 0.55;
  transition: opacity 200ms ease;
}
.prob-card:hover .pc-more { opacity: 1; }

/* ── Value: thesis holds still, evidence scrolls past it ── */
.value { padding: clamp(80px, 9vw, 130px) 0; }
.value-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); }
@media (min-width: 940px) {
  .value-grid { grid-template-columns: 0.85fr 1fr; gap: clamp(48px, 6vw, 96px); align-items: start; }
  .value-sticky { position: sticky; top: 130px; }
}
.value-cta { margin-top: var(--space-lg); }
.value-scroll { display: flex; flex-direction: column; gap: var(--space-md); }
.vpanel {
  background: var(--paper-lift);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--lift-sm);
  padding: var(--space-lg);
}
.vp-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--forest);
  margin-bottom: 12px;
}
.vpanel h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.026em; margin-bottom: 9px; }
.vpanel p { font-size: 15px; line-height: 1.62; color: var(--muted); max-width: 52ch; }

/* ── What we check: three cards that open ── */
.check-cards {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 820px) { .check-cards { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } }
.check-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  background: var(--paper-lift);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--lift-sm);
  padding: 0 0 var(--space-md);
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  transition: box-shadow 300ms var(--ease), transform 300ms var(--ease), border-color 220ms ease;
}
.check-card:hover {
  box-shadow: var(--lift-md);
  transform: translateY(-4px);
  border-color: var(--line-strong);
}
/* Abstract art rather than stock imagery: each one draws the shape of the
   thing being checked, a file, a unit grid, a set of web pages. */
.cc-art {
  display: flex;
  height: 132px;
  background: var(--forest-deep);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  overflow: hidden;
}


















.cc-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 var(--space-md);
  margin-bottom: 8px;
}
.cc-name {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.028em;
  padding: 0 var(--space-md);
  margin-bottom: 8px;
}
.cc-desc {
  font-size: 14.5px;
  line-height: 1.58;
  color: var(--muted);
  padding: 0 var(--space-md);
  margin-bottom: var(--space-md);
}
.cc-open {
  margin-top: auto;
  padding: 0 var(--space-md);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--forest);
}
.check-card:hover .cc-open { text-decoration: underline; text-underline-offset: 3px; }
.checks-note {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
  max-width: 70ch;
}

/* ── How it works ── */
.how { background: var(--paper-warm); }
.steps {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 680px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-md); } }
.step-art {
  position: relative;
  height: 168px;
  border-radius: var(--r-card);
  background: var(--forest-deep);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  margin-bottom: 18px;
  color: var(--forest-soft);
}
.sa-card {
  width: 100%;
  background: rgba(242,238,229,0.1);
  border: 1px solid rgba(242,238,229,0.16);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sa-line { height: 7px; border-radius: 3px; background: rgba(242,238,229,0.22); width: 58%; }
.sa-line-w { width: 84%; background: rgba(242,238,229,0.4); }
.sa-pill {
  align-self: flex-start;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--forest-deep);
  background: var(--forest-soft);
  padding: 4px 10px;
  border-radius: var(--r-chip);
}
.sa-stack { display: flex; gap: 8px; }
.sa-doc {
  width: 34px; height: 46px;
  background: rgba(242,238,229,0.16);
  border: 1px solid rgba(242,238,229,0.2);
  border-radius: 4px;
}
.sa-doc:nth-child(2) { transform: translateY(-7px); background: rgba(242,238,229,0.26); }
.sa-doc:nth-child(3) { transform: translateY(4px); }
.sa-chip {
  position: absolute;
  bottom: 20px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--forest-deep);
  background: var(--forest-soft);
  padding: 4px 10px;
  border-radius: var(--r-chip);
}
.sa-rows { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.sa-row {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 5px;
  background: rgba(242,238,229,0.09);
}
.sa-dot { width: 9px; height: 9px; border-radius: 50%; display: block; }
.sa-dot.g { background: #63b37f; }
.sa-dot.a { background: #d8a544; }
.sa-dot.r { background: #cf6b6b; }
.sa-loop svg { width: 74px; height: 74px; color: var(--forest-soft); }
.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11.5px;
  margin-bottom: 11px;
}
.step h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.026em; margin-bottom: 7px; }
.step p { font-size: 14.5px; line-height: 1.58; color: var(--muted); }

/* ── ROI ── */
.roi-head { max-width: 760px; }
.roi-sub { margin-top: 14px; }
.roi-control {
  margin-top: var(--space-xl);
  background: var(--paper-lift);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  box-shadow: var(--lift-sm);
  padding: var(--space-lg);
}
.rc-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: 14px; }
.rc-row-2 { margin-top: var(--space-lg); }
.rc-row label { font-size: 15px; font-weight: 500; }
.rc-out {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 500;
  color: var(--forest);
  letter-spacing: -0.02em;
}
.rc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--bone);
  outline: none;
  cursor: pointer;
}
.rc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--forest);
  border: 3px solid var(--paper-lift);
  box-shadow: var(--lift-sm);
  cursor: grab;
}
.rc-range::-webkit-slider-thumb:active { cursor: grabbing; }
.rc-range::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--forest);
  border: 3px solid var(--paper-lift);
  cursor: grab;
}
.rc-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
}

.roi-cards {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 820px) { .roi-cards { grid-template-columns: repeat(3, 1fr); } }
.rcard {
  background: var(--paper-lift);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--lift-sm);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
}
.rcard-crest { background: var(--ink); color: var(--paper); border-color: transparent; box-shadow: var(--lift-lg); }
.rcard-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-md);
}
.rcard-crest .rcard-label { color: var(--forest-soft); }
.rcard-fig {
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rcard-crest .rcard-fig { color: var(--forest-soft); }
.rcard-unit {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--muted);
}
.rcard-crest .rcard-unit { color: rgba(242,238,229,0.6); }
.rcard-band {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(107,149,119,0.2);
  color: var(--forest-soft);
  padding: 3px 9px;
  border-radius: var(--r-chip);
}
.rcard-note {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}
.rcard-crest .rcard-note { border-top-color: rgba(242,238,229,0.14); color: rgba(242,238,229,0.66); }

.roi-verdict {
  margin-top: var(--space-lg);
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.02em;
  max-width: 60ch;
}
.roi-verdict b { color: var(--forest); font-weight: 600; }

.roi-assumptions {
  margin-top: var(--space-lg);
  border-top: 1px solid var(--line);
  padding-top: var(--space-md);
}
.roi-assumptions summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--forest);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.roi-assumptions summary::-webkit-details-marker { display: none; }
.roi-assumptions summary::before {
  content: "+";
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1;
}
.roi-assumptions[open] summary::before { content: "\2212"; }
.ra-body { margin-top: var(--space-md); max-width: 78ch; }
.ra-body p { font-size: 14px; line-height: 1.65; color: var(--muted); }
.ra-body ul { list-style: none; margin: 14px 0; display: flex; flex-direction: column; gap: 11px; }
.ra-body li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.ra-body li::before {
  content: "";
  position: absolute;
  left: 2px; top: 9px;
  width: 6px; height: 1.5px;
  background: var(--forest);
}
.ra-body li b { color: var(--ink); font-weight: 600; }
.ra-caveat { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-style: italic; }

/* ── Pricing additions ── */
.offer-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
  padding: 14px var(--space-md);
  border-radius: var(--r-card);
  background: var(--forest-deep);
  color: var(--paper);
}
.ob-flag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--forest-soft);
  color: var(--forest-deep);
  padding: 4px 10px;
  border-radius: var(--r-chip);
  flex-shrink: 0;
}
.ob-text { font-size: 14.5px; font-weight: 500; }

.pp-per { font-size: 14px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.plan-feature .pp-per { color: rgba(242,238,229,0.55); }
.plan-price { font-size: 30px; }
.plan-est {
  margin-top: -8px;
  margin-bottom: var(--space-md);
  font-size: 13px;
  color: var(--muted);
}
.plan-est s { opacity: 0.6; }
.plan-est b { color: var(--forest); font-weight: 600; }
.plan-feature .plan-est { color: rgba(242,238,229,0.6); }
.plan-feature .plan-est b { color: var(--forest-soft); }
.plan-for { min-height: 40px; }

/* Highlighted by the ROI slider so the two sections stay in step */
.plan.is-match { border-color: var(--forest); box-shadow: var(--lift-md); }
.plan.is-match::after {
  content: "Matches your scope";
  position: absolute;
  top: -10px; right: var(--space-md);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--forest);
  color: var(--paper);
  padding: 4px 10px;
  border-radius: var(--r-chip);
}
.plan { position: relative; }
.pricing-note a { color: var(--forest); font-weight: 500; }

/* ── Modal ── */
.modal-root {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}
.modal-root[hidden] { display: none; }
.modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(26,24,21,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 260ms ease;
}
.modal-root.is-open .modal-scrim { opacity: 1; }
.modal {
  position: relative;
  width: min(100%, 600px);
  max-height: min(86vh, 780px);
  overflow-y: auto;
  background: var(--paper-lift);
  border-radius: var(--r-panel);
  box-shadow: var(--lift-lg);
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 280ms var(--ease), transform 320ms var(--ease);
}
.modal-root.is-open .modal { opacity: 1; transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .modal, .modal-scrim { transition: none; }
}
.modal-x {
  position: absolute;
  top: 16px; right: 16px;
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--paper-lift);
  color: var(--ink);
  cursor: pointer;
  transition: background 180ms ease;
}
.modal-x:hover { background: var(--paper-warm); }
.modal-x svg { width: 16px; height: 16px; }
.modal-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest);
  background: rgba(31,61,43,0.08);
  padding: 5px 11px;
  border-radius: var(--r-chip);
  margin-bottom: var(--space-md);
}
.modal-body h3 {
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.14;
  margin-bottom: 10px;
}
.modal-lede { font-size: 16px; line-height: 1.55; color: var(--muted); max-width: 48ch; }
.modal-para { margin-top: var(--space-md); font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
.modal-list {
  list-style: none;
  margin: var(--space-lg) 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.modal-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.modal-list li:last-child { border-bottom: none; }
.modal-list b { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; }
.modal-list span { font-size: 14px; line-height: 1.55; color: var(--muted); }
.modal-std {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--forest);
}
body.modal-open { overflow: hidden; }

/* ── Contact form: date and time ── */
.contact-form select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--paper);
  background: rgba(242,238,229,0.06);
  border: 1px solid rgba(242,238,229,0.18);
  border-radius: var(--r-btn);
  padding: 11px 13px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8 9.5 4.5' fill='none' stroke='%23D6CFBF' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}
.contact-form select option { color: var(--ink); background: var(--paper-lift); }
.contact-form input[type="date"] { color-scheme: dark; }

/* ── Footer: the rail must not collide with it ── */
@media (min-width: 1360px) {
  .index-rail.is-parked { opacity: 0; pointer-events: none; }
  .index-rail { transition: opacity 300ms ease; }
}

/* ── Standalone pages (about) ── */
.page-main { padding-top: 76px; }
.nav-cta-mobile { display: inline-flex; margin-left: auto; }
@media (min-width: 980px) { .nav-cta-mobile { display: none; } }

/* Both of these sections end on a quiet element (a disclosure line, a sticky
   column that has run out of content). Full section padding under them read as
   dead air, so trim the bottom only. */
.roi   { padding-bottom: clamp(52px, 5vw, 76px); }
.value { padding-bottom: clamp(52px, 5vw, 80px); }

/* ══════════════════════════════════════════════════════════════
   Feedback round 2, 22 Aug 2026.
   ══════════════════════════════════════════════════════════════ */

/* ── Section rail, rebuilt ──
   It used to inherit the page ground, so its labels went dark-on-dark every
   time it crossed a band and vanished entirely at the end of the page. Giving
   it its own translucent surface means it never has to know what is behind it,
   which also lets the light/dark inversion logic go away completely. */
@media (min-width: 1360px) {
  .index-rail {
    left: max(12px, calc((100vw - var(--content-max)) / 2 - 26px));
    width: var(--rail-w);
    padding-right: 0;
  }
  .rail-list {
    background: rgba(251, 250, 246, 0.86);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--lift-sm);
    padding: 9px 10px;
    gap: 1px;
  }
  .rail-list a { padding: 5px 8px; border-left: none; border-radius: 7px; opacity: 0.5; }
  .rail-list a:hover { opacity: 0.85; background: rgba(26,24,21,0.04); }
  .rail-list a.is-active { opacity: 1; background: rgba(31,61,43,0.09); }
  .rail-label { color: var(--ink); }
  .rail-list a.is-active .rail-label { color: var(--forest-deep); }
  .rail-list a.is-active .rail-num { color: var(--forest); }

  /* The capsule carries its own contrast, so the old inversion is a no-op.
     Kept as explicit resets so a stray is-over-dark cannot re-break it. */
  .index-rail.is-over-dark .rail-label { color: var(--ink); }
  .index-rail.is-over-dark .rail-num { color: var(--muted); }
  .index-rail.is-over-dark .rail-list a.is-active .rail-num { color: var(--forest); }
}

/* ── Hero ──
   The old top padding left a visible band of nothing under the fixed nav. */
.hero { padding-top: 104px; }
@media (min-width: 1000px) { .hero { padding-top: 116px; } }

.hero-offer {
  display: inline-block;
  margin-top: var(--space-lg);
  padding: 11px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--paper-lift);
}
.ho-main {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--forest-deep);
}
.ho-fine { margin-top: 3px; padding-left: 16px; font-size: 12.5px; color: var(--muted); }

/* ── Problem ── */
.problem-eyebrow { display: block; color: var(--forest-soft); margin-bottom: var(--space-md); }
.pc-kind {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(242,238,229,0.45);
  margin-bottom: 4px;
}
.prob-card .pc-fig { margin-bottom: 2px; }

/* ── Why Crest ── */
.value-sticky .t-eyebrow { display: block; margin-bottom: var(--space-md); }

/* ── Shared section head ──
   One heading block used by coverage, process, numbers and pricing so all four
   start on the same left edge as the content beneath them. The old folio sat in
   its own column and pushed each heading further right than its own cards. */
.checks-head { margin-bottom: var(--space-xl); max-width: 700px; }
.checks-head .t-eyebrow { display: block; margin-bottom: 12px; }
.roi .checks-head, .pricing .checks-head { max-width: 780px; }

/* ── Coverage artwork ──
   Each panel draws the artefact being checked rather than decorating the card. */
.cc-art { align-items: center; justify-content: center; }

.art-matrix { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.am-row { display: flex; align-items: center; gap: 6px; }
.am-h { width: 26px; height: 9px; border-radius: 2px; background: rgba(107,149,119,0.5); flex-shrink: 0; }
.am-c { flex: 1; height: 9px; border-radius: 2px; background: rgba(107,149,119,0.16); }
.am-c.on { background: var(--forest-soft); }

.art-scope { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.as-line { display: flex; align-items: center; gap: 8px; }
.as-code { width: 30px; height: 10px; border-radius: 2px; background: rgba(107,149,119,0.55); flex-shrink: 0; }
.as-bar { height: 10px; border-radius: 2px; background: rgba(107,149,119,0.2); }
.as-bar.w1 { width: 58%; }
.as-bar.w2 { width: 44%; }
.as-bar.w3 { width: 66%; }
.as-tick { width: 10px; height: 10px; border-radius: 50%; margin-left: auto; flex-shrink: 0; }
.as-tick.ok  { background: var(--forest-soft); }
.as-tick.bad { background: #cf6b6b; }

.art-site { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.ast-node { width: 26px; height: 13px; border-radius: 3px; background: rgba(107,149,119,0.3); display: block; }
.ast-node.root { width: 46px; height: 15px; background: var(--forest-soft); }
.ast-node.flag { background: #cf6b6b; }
.ast-branch { width: 1px; height: 11px; background: rgba(107,149,119,0.4); }
.ast-row { display: flex; gap: 10px; }
.ast-row.sm .ast-node { width: 18px; height: 10px; background: rgba(107,149,119,0.2); }

/* ── In beta ── */
.beta-block {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line);
}
.beta-head { max-width: 56ch; margin-bottom: var(--space-lg); }
.beta-head h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.026em; margin-bottom: 6px; }
.beta-head p { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.beta-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 820px) { .beta-cards { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } }
.beta-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-card);
  background: transparent;
}
.beta-chip {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest);
  background: rgba(31,61,43,0.08);
  padding: 4px 10px;
  border-radius: var(--r-chip);
  margin-bottom: 14px;
}
.bc-name { font-size: 17px; font-weight: 600; letter-spacing: -0.022em; margin-bottom: 6px; }
.bc-desc { font-size: 14px; line-height: 1.55; color: var(--muted); }

/* ── How it works ── */
.sa-hands { display: flex; gap: 9px; align-items: flex-end; }
.sa-hands .sa-doc:nth-child(1) { transform: rotate(-6deg); }
.sa-hands .sa-doc:nth-child(2) { transform: translateY(-8px); background: rgba(242,238,229,0.3); }
.sa-hands .sa-doc:nth-child(3) { transform: rotate(6deg); }

/* ── The numbers ──
   The figures were the point of the section and were reading as body text. */
.rcard { padding: var(--space-lg) var(--space-lg) calc(var(--space-lg) + 4px); }
.rcard-label {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  margin-bottom: 14px;
}
.rcard-crest .rcard-label { color: rgba(242,238,229,0.72); }
.rcard-fig {
  font-size: clamp(38px, 4.4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.04em;
}
.rcard-unit { margin-top: 8px; font-size: 13px; }

/* ── Pricing ── */
.offer-banner {
  display: block;
  padding: 16px var(--space-lg);
  text-align: center;
}
.ob-text {
  display: block;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 600;
  letter-spacing: -0.028em;
  color: var(--paper);
}
.ob-fine { display: block; margin-top: 5px; font-size: 13px; color: rgba(242,238,229,0.62); }

@media (min-width: 700px)  { .plans { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .plans { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); } }

.plan-large {
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--paper-lift);
}
.plan-large.is-match { border-color: var(--forest); box-shadow: var(--lift-md); }
.pl-copy h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.026em; margin-bottom: 4px; }
.pl-copy p { font-size: 14.5px; line-height: 1.55; color: var(--muted); max-width: 62ch; }
.pl-cta { flex-shrink: 0; }

/* Honeypot. Bots fill any field they find; humans never see this one.
   Positioned off-canvas rather than display:none, because some bots skip
   hidden inputs entirely and the point is that they DO fill it in. */
.cf-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}