:root {
  color-scheme: light;

  /* Type families */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Core palette - neutral, crisp, one accent */
  --bg-top:         #FAFAF9;
  --bg-bottom:      #FAFAF9;
  --surface:        #FFFFFF;
  --surface-strong: #F5F5F4;
  --text:           #1A1A18;
  --muted:          #63635E;
  --border:         rgba(26, 26, 24, 0.13);
  --border-strong:  rgba(26, 26, 24, 0.2);
  --primary-start:  #1A1A18;
  --primary-end:    #2E2E2A;
  --primary-text:   #FFFFFF;
  --pill:           #1A1A18;
  --pill-text:      #FFFFFF;
  --shadow:         0 16px 40px rgba(26, 26, 24, 0.08);

  /* Brand accent */
  --teal:        #2F8C79;
  --teal-600:    #1F6B5B;
  --teal-tint:   rgba(47, 140, 121, 0.08);
  --gold:        #B98A1E;
  --gold-tint:   rgba(185, 138, 30, 0.10);
  --orange:      #C25E2E;
  --orange-tint: rgba(194, 94, 46, 0.10);
  --lime:        #2F8C79;
  --sand:        #F5F5F4;

  /* One gap between every section. See the note on .soft-panel below. */
  --gap-section: 1.5rem;

  /* Scales */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem;   --s7:3rem;  --s8:4rem;   --s9:6rem;
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-pill:999px;
  --shadow-1: 0 1px 2px rgba(26,26,24,.04);
  --shadow-2: 0 4px 16px rgba(26,26,24,.06);
  --shadow-3: 0 16px 40px rgba(26,26,24,.08);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-top);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.5;
  font-feature-settings: "cv11", "ss01";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(47, 140, 121, 0.18);
}

/* Default link treatment for prose; buttons and card-links are exempt */
.lead a:not(.button),
.section-heading a:not(.button),
.content-section a:not(.button):not(.resource-card),
.content-panel a:not(.button),
.content-list a,
.content-steps a,
.content-callout a:not(.button),
.faq-item a,
.update-card a:not(.button),
.compare-note a,
.bench-col-desc a,
.legal-section a,
.upgrade-success a:not(.button) {
  color: var(--teal-600);
  text-decoration: underline;
  text-decoration-color: rgba(47, 140, 121, 0.35);
  text-underline-offset: 0.18em;
  transition: text-decoration-color 120ms ease;
}

.lead a:not(.button):hover,
.section-heading a:not(.button):hover,
.content-section a:not(.button):not(.resource-card):hover,
.content-panel a:not(.button):hover,
.content-list a:hover,
.content-steps a:hover,
.content-callout a:not(.button):hover,
.faq-item a:hover,
.update-card a:not(.button):hover,
.compare-note a:hover,
.bench-col-desc a:hover,
.legal-section a:hover,
.upgrade-success a:not(.button):hover {
  text-decoration-color: var(--teal-600);
}

/* Card-links nested in content sections keep card styling */
.content-section a.resource-card,
.content-section a.resource-card h3,
.content-section a.resource-card p {
  text-decoration: none;
  color: inherit;
}

.content-section a.resource-card p:last-child {
  color: var(--muted);
}

.content-section a.resource-card .resource-card__eyebrow {
  color: var(--teal-600);
}

.flash-stack {
  width: min(1120px, calc(100% - 2.5rem));
  margin: 0 auto 1.5rem;
}

.flash {
  margin: 0;
  padding: 0.8rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 0.92rem;
  box-shadow: var(--shadow-1);
}

.flash-notice {
  border-color: rgba(47, 140, 121, 0.4);
  background: var(--teal-tint);
  color: var(--teal-600);
}

.flash-alert {
  border-color: rgba(194, 94, 46, 0.4);
  background: var(--orange-tint);
  color: var(--orange);
}

/* ── Topbar ──────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 250, 249, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  width: min(1120px, calc(100% - 2.5rem));
  margin: 0 auto;
  min-height: 3.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-left: auto;
}

.topbar-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 120ms ease;
}

.topbar-nav-link:hover {
  color: var(--text);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand-mark {
  width: 1.6rem;
  height: 1.6rem;
}

.topbar-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  padding: 0.3rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ── Page shell ──────────────────────────────────────────── */

.page {
  width: min(1120px, calc(100% - 2.5rem));
  margin: 0 auto;
  padding: 2.5rem 0 4rem;
  text-align: center;
}

.hero {
  display: block;
}

.soft-panel {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

/* ── Section rhythm ──────────────────────────────────────────
   One gap for every section. This was briefly a three-step scale
   (tight/section/chapter) on the theory that unequal gaps create
   hierarchy. They do, but only when the sections they separate have
   consistent edges. Against a stack of panels a 1.5rem gap read as
   cramped and an 8rem gap read as a hole, so the page just looked
   unresolved. The panels already carry the structure; the spacing
   between them should be quiet and even. */
.problem,
.how-it-works,
.benchmarks,
.savings-calc,
.testimonials,
.compare,
.pricing,
.lineage,
.resources,
.closing-cta {
  margin-top: var(--gap-section);
}

.hero-copy {
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.5rem);
  position: relative;
  border: none;
  background: transparent;
  box-shadow: none;
}

/* Hero backdrop: token streams, noisy in on the left, compressed out on the right */
.hero-stream {
  display: block;
  position: absolute;
  top: 2.5rem;
  left: 0;
  right: 0;
  height: 17rem;
  pointer-events: none;
  z-index: -1;
}

.hero-stream__band {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  overflow: hidden;
  opacity: 0.65;
}

.hero-stream__band--in {
  left: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 18%, black 78%, transparent);
          mask-image: linear-gradient(90deg, transparent, black 18%, black 78%, transparent);
}

.hero-stream__band--out {
  right: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 22%, black 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, black 22%, black 82%, transparent);
}

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .hero-stream {
    display: none;
  }
}

.hero-brandline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
}

.logo {
  width: 3rem;
  height: 3rem;
  display: block;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.75rem;
  text-transform: uppercase;
  font-weight: 600;
}

/* Sans, not mono: monospace section labels are the tell of a generated page.
   Mono stays on numbers, code, and log output where it earns its keep. */
.eyebrow {
  margin: 1.25rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal-600);
  font-weight: 650;
}

h1 {
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.035em;
  max-width: 100%;
}

.headline-highlight {
  position: relative;
  display: inline-block;
  padding: 0;
  z-index: 0;
  color: var(--teal-600);
}

.headline-highlight::before {
  content: none;
}

.headline-highlight::after {
  content: "";
  position: absolute;
  left: 0.03em;
  right: 0.05em;
  bottom: 0.01em;
  border-bottom: 0.055em dashed rgba(47, 140, 121, 0.45);
}

.lead {
  margin: 1.25rem 0 0;
  max-width: 44rem;
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.65;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.hero .lead + .lead {
  margin-top: 0.35rem;
}

.lead strong {
  color: var(--text);
  font-weight: 600;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 2rem;
}

.hero-rating {
  margin: 1.5rem auto 0;
  max-width: 360px;
}

.laurel-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  color: var(--muted);
}

.laurel-rating__laurel {
  flex: none;
  width: 26px;
  height: auto;
  opacity: 0.3;
  transform: rotate(12deg);
}

.laurel-rating > .laurel-rating__laurel:last-child {
  transform: scaleX(-1) rotate(12deg);
}

.laurel-rating__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.laurel-rating__count {
  font-family: var(--font-sans);
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.laurel-rating__label {
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--muted);
}

.laurel-rating__stars {
  display: flex;
  gap: 0.12rem;
  color: var(--gold);
}

.laurel-rating__stars svg {
  width: 14px;
  height: 14px;
}

.ph-badge {
  display: flex;
  justify-content: center;
  margin-top: 1.1rem;
}

.download-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.download-cta__notice {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

.download-cta__platforms a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.download-cta__platforms a:hover {
  color: inherit;
  border-bottom-color: currentColor;
}

.download-cta-topbar {
  align-items: flex-end;
  gap: 0.3rem;
  text-align: right;
}

.download-cta__notice-topbar {
  font-size: 0.72rem;
}

.hero-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.25rem;
  margin-top: 2.75rem;
}

.lineage {
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.lineage a {
  color: var(--text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.lineage a:hover {
  color: var(--teal-600);
}

/* ── Buttons ─────────────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.6rem 1.25rem;
  border-radius: var(--r-md);
  text-decoration: none;
  font-weight: 550;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
}

.button-primary {
  background: var(--primary-start);
  color: var(--primary-text);
  border: 1px solid var(--primary-start);
  box-shadow: 0 1px 2px rgba(26, 26, 24, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.button-primary:hover {
  background: var(--primary-end);
}

.button-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-1);
}

.button-secondary:hover {
  border-color: rgba(26, 26, 24, 0.28);
}

.button-compact {
  min-height: 2.25rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--r-md);
  font-size: 0.85rem;
  white-space: nowrap;
}

.button-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.hint {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.screenshot-placeholder span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--surface-strong);
  color: var(--muted);
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
}

/* ── Section shells ──────────────────────────────────────── */

.screenshots {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.screenshots {
  margin-top: 1.25rem;
  padding: clamp(1.25rem, 2.6vw, 2rem);
}

.resources,
.pricing {
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 2.6vw, 2.5rem);
}

/* Features page: alternating text + screenshot detail rows */
.feature-detail {
  margin-top: 1.25rem;
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.5rem);
}

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  text-align: left;
}

.feature-row + .feature-row {
  margin-top: clamp(2rem, 4vw, 3.25rem);
  padding-top: clamp(2rem, 4vw, 3.25rem);
  border-top: 1px solid var(--border);
}

.feature-row__body .eyebrow {
  margin-top: 0;
}

.feature-row__body h2 {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 640;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.feature-row__body p {
  margin: 0.85rem 0 0;
  color: var(--muted);
  line-height: 1.7;
}

.feature-row--flip .feature-row__media {
  order: -1;
}

@media (max-width: 760px) {
  .feature-row {
    grid-template-columns: 1fr;
  }

  .feature-row--flip .feature-row__media {
    order: 0;
  }
}

/* The page's one dark section. Ten light sections in a row have no beat, and
   the last thing before the footer is the right place to put one. Everything
   here is scoped to .closing-cta, so no other page is affected. */
.closing-cta {
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--r-xl);
  background: linear-gradient(158deg, #14332E 0%, #1C1C19 58%, #2A2318 100%);
  color: #FFFFFF;
}

.closing-cta .eyebrow {
  color: #7FD4BC;
}

.closing-cta .section-heading h2 {
  color: #FFFFFF;
}

/* :last-child included on purpose. The generic ".section-heading p:last-child"
   rule below sets var(--muted) at the same specificity and later in the file,
   so it wins the tie and paints near-black text on the dark panel. */
.closing-cta .section-heading p,
.closing-cta .section-heading p:last-child,
.closing-cta .download-cta__notice {
  color: rgba(255, 255, 255, 0.82);
}

/* Inverted: a dark button on a dark panel would vanish. White on near-black
   is a higher-contrast target than the light-mode original. */
.closing-cta .button-primary {
  background: #FFFFFF;
  color: #1A1A18;
  border-color: transparent;
  /* The base rule's inset white highlight reads as grime on a white fill. */
  box-shadow: none;
}

.closing-cta .button-primary:hover {
  background: #F0EFEC;
}

.download-cta-bottom {
  margin-top: 1rem;
}

.lead-left {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

.section-heading {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0.5rem 0 1rem;
}

.section-heading h2 {
  margin: 0.65rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.8vw, 2.35rem);
  font-weight: 640;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.section-heading p:last-child {
  margin: 0.85rem 0 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.65;
}

.screenshot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.75fr);
  gap: 1rem;
}

.screenshot-stack {
  display: grid;
  gap: 1rem;
}

.screenshot-frame {
  padding: 0.5rem;
  border-radius: var(--r-lg);
  background: var(--surface-strong);
  border: 1px solid var(--border);
}

.screenshot-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

.screenshot-frame-primary,
.screenshot-image-primary {
  min-height: 28rem;
}

.screenshot-image-small {
  min-height: 13.1rem;
}

.feature-card {
  text-align: left;
}

.feature-card h3 {
  margin: 0 0 0.4rem;
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* ── Resource / content cards ────────────────────────────── */

.resource-grid,
.content-grid {
  display: grid;
  gap: 0.9rem;
}

.resource-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.content-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.resource-card {
  display: block;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: inherit;
  text-align: left;
  text-decoration: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.resource-card:hover {
  border-color: rgba(26, 26, 24, 0.22);
  box-shadow: var(--shadow-2);
}

.resource-card__eyebrow {
  margin: 0 0 0.45rem;
  color: var(--teal-600);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.resource-card h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
}

.resource-card p:last-child {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* ── Content pages ───────────────────────────────────────── */

.content-page {
  max-width: 56rem;
  margin: 1.5rem auto 0;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
  text-align: left;
}

.content-intro {
  max-width: none;
}

.content-intro h1 {
  max-width: 46rem;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
}

.content-intro .lead {
  max-width: 44rem;
}

.content-article {
  margin-top: 2.25rem;
}

/* One submit per onboarding-issue reason; the labels are sentences, so stack
   them rather than letting three of them wrap mid-phrase. */
.issue-reasons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
}

.content-section + .content-section {
  margin-top: 2.75rem;
}

.update-card {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.update-card + .update-card {
  margin-top: 1.25rem;
}

.update-card h2 {
  margin-top: 0.35rem;
}

.content-date {
  margin: 0 0 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-600);
}

.content-section h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 640;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.content-section p {
  margin: 1rem 0 0;
  color: var(--muted);
  line-height: 1.7;
  max-width: 46rem;
}

.content-panel {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-strong);
}

.content-panel h2,
.faq-item h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 620;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.content-panel p,
.faq-item p {
  margin: 0.75rem 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.content-panel-wide {
  margin-top: 1.25rem;
}

.content-followup-grid {
  margin-top: 1rem;
}

.content-list,
.content-steps {
  margin: 1rem 0 0;
  padding-left: 1.2rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 46rem;
}

.content-list li + li,
.content-steps li + li {
  margin-top: 0.6rem;
}

.content-callout {
  background: var(--teal-tint);
  border-color: rgba(47, 140, 121, 0.2);
}

.content-cta {
  background:
    radial-gradient(80% 120% at 50% 0%, var(--teal-tint), transparent 70%),
    var(--surface);
}

.actions-left {
  justify-content: flex-start;
}

.faq-jump {
  margin-top: 1.75rem;
  padding: 1.2rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-strong);
}

.faq-jump ul {
  columns: 2;
  column-gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-jump li {
  font-size: 0.94rem;
  line-height: 1.45;
  margin-bottom: 0.35rem;
  break-inside: avoid;
}

@media (max-width: 640px) {
  .faq-jump ul {
    columns: 1;
  }
}

.faq-jump a {
  color: var(--muted);
  text-decoration: none;
}

.faq-jump a:hover {
  color: var(--text);
  text-decoration: underline;
}

.faq-list {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.75rem;
}

.faq-item {
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  scroll-margin-top: 5rem;
}

/* ── Benchmarks ─────────────────────────────────────────── */

.benchmarks {
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.bench-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 0;
  margin-top: 2.25rem;
  text-align: left;
  align-items: start;
}

.bench-col {
  padding: 0 2.5rem 0 0;
}

.bench-col + .bench-col {
  padding: 0 0 0 2.5rem;
  border-left: 1px solid var(--border);
}

.bench-col-title {
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.bench-col-desc {
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.bench-bars {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.bench-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.bench-label {
  font-size: 0.88rem;
  font-weight: 550;
  color: var(--text);
}

.bench-label-sub {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.8rem;
}

.bench-badge {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--teal-600);
  background: var(--teal-tint);
  border: 1px solid rgba(47, 140, 121, 0.18);
  padding: 0.18rem 0.5rem;
  border-radius: var(--r-sm);
  letter-spacing: 0.02em;
}

.bench-track {
  position: relative;
  height: 8px;
  background: var(--surface-strong);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.bench-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  border-radius: var(--r-pill);
  background: var(--teal);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.bench-fill.is-animated {
  transform: scaleX(var(--target-scale));
}

.bench-row-nums {
  display: flex;
  justify-content: space-between;
  margin-top: 0.45rem;
  font-size: 0.75rem;
}

.bench-num-remaining {
  color: var(--muted);
}

.bench-num-saved {
  color: var(--teal-600);
  font-weight: 500;
}

.bench-legend {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.bench-legend-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.bench-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.bench-legend-dot-after {
  background: var(--teal);
}

.bench-legend-dot-before {
  background: var(--surface-strong);
  border: 1px solid var(--border-strong);
}

.bench-acc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.bench-acc-card {
  padding: 1.1rem 1.25rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.bench-acc-highlight {
  grid-column: span 2;
  padding: 1.25rem 1.4rem;
  background: var(--teal-tint);
  border-color: rgba(47, 140, 121, 0.2);
}

.bench-acc-value {
  font-family: var(--font-sans);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--text);
  font-weight: 650;
  letter-spacing: -0.03em;
}

.bench-acc-label {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}

.bench-acc-detail {
  margin-top: 0.25rem;
  font-size: 0.77rem;
  color: var(--muted);
  line-height: 1.5;
}

.bench-attribution {
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}

.bench-attribution a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bench-attribution a:hover {
  color: var(--text);
}

/* ── Benchmarks responsive ──────────────────────────────── */

@media (max-width: 900px) {
  .bench-grid {
    grid-template-columns: 1fr;
  }

  .bench-col {
    padding: 0;
  }

  .bench-col + .bench-col {
    padding: 2rem 0 0;
    border-left: none;
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 640px) {
  .bench-acc-grid {
    grid-template-columns: 1fr 1fr;
  }

  .bench-acc-highlight {
    grid-column: span 2;
  }
}

/* ── Savings Calculator ─────────────────────────────────── */

.savings-calc {
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.testimonials {
  padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 2.6vw, 2rem) clamp(1.25rem, 2.6vw, 2rem);
}

.calc-controls {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: flex-start;
}

.calc-slider-row {
  flex: 1 1 280px;
  min-width: 0;
}

.calc-slider-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.88rem;
  font-weight: 550;
  color: var(--text);
  margin-bottom: 0.65rem;
}

.calc-slider-label strong {
  font-size: 1.05rem;
  color: var(--teal-600);
  font-variant-numeric: tabular-nums;
}

.calc-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--teal) var(--pct, 18%), var(--border-strong) var(--pct, 18%));
  outline: none;
  cursor: pointer;
}

.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--border-strong);
  box-shadow: 0 1px 4px rgba(26, 26, 24, 0.18);
  cursor: pointer;
}

.calc-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--border-strong);
  box-shadow: 0 1px 4px rgba(26, 26, 24, 0.18);
  cursor: pointer;
}

.calc-slider-ticks {
  position: relative;
  height: 1.1em;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--muted);
}

.calc-slider-ticks span {
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* 9 steps (indices 0–8): left = 10px + i/8 * (100% - 20px) */
.calc-slider-ticks span:nth-child(1) { left: calc(10px + 0 * (100% - 20px) / 8); }
.calc-slider-ticks span:nth-child(2) { left: calc(10px + 1 * (100% - 20px) / 8); }
.calc-slider-ticks span:nth-child(3) { left: calc(10px + 2 * (100% - 20px) / 8); }
.calc-slider-ticks span:nth-child(4) { left: calc(10px + 3 * (100% - 20px) / 8); }
.calc-slider-ticks span:nth-child(5) { left: calc(10px + 4 * (100% - 20px) / 8); }
.calc-slider-ticks span:nth-child(6) { left: calc(10px + 5 * (100% - 20px) / 8); }
.calc-slider-ticks span:nth-child(7) { left: calc(10px + 6 * (100% - 20px) / 8); }
.calc-slider-ticks span:nth-child(8) { left: calc(10px + 7 * (100% - 20px) / 8); }
.calc-slider-ticks span:nth-child(9) { left: calc(10px + 8 * (100% - 20px) / 8); }

.calc-plan-tabs {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  align-self: center;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.25rem;
}

.calc-tab {
  display: flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  user-select: none;
}

.calc-tab input[type="radio"] {
  display: none;
}

.calc-tab:hover {
  color: var(--text);
}

.calc-tab.is-active {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  box-shadow: var(--shadow-1);
}

.calc-results {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.calc-result-card {
  padding: 1.1rem 1.25rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.calc-result-highlight {
  background: var(--teal-tint);
  border-color: rgba(47, 140, 121, 0.2);
}

.calc-result-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-600);
  margin-bottom: 0.4rem;
}

.calc-result-value {
  font-family: var(--font-sans);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--text);
  font-weight: 650;
  letter-spacing: -0.03em;
}

.calc-result-value--large {
  font-size: 2.1rem;
}

.calc-result-unit {
  font-size: 0.95rem;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--muted);
}

.calc-result-label {
  margin-top: 0.45rem;
  font-size: 0.8rem;
  font-weight: 450;
  color: var(--muted);
  line-height: 1.5;
}

.calc-footnote {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 900px) {
  .calc-results {
    grid-template-columns: 1fr 1fr;
  }

  .calc-result-highlight {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .calc-controls {
    flex-direction: column;
    gap: 1.25rem;
  }

  .calc-slider-row {
    flex: 0 0 auto;
    width: 100%;
  }

  .calc-slider-ticks {
    font-size: 0.6rem;
  }

  .calc-results {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Pricing ─────────────────────────────────────────────── */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
}

.pricing-enterprise-row {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-align: left;
}

.pricing-card-enterprise {
  width: 100%;
}

.pricing-card-featured {
  border-color: rgba(47, 140, 121, 0.35);
  box-shadow: 0 0 0 1px rgba(47, 140, 121, 0.2), var(--shadow-2);
}

.pricing-card__header {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.pricing-card__header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 620;
  letter-spacing: -0.01em;
}

.pricing-card__header p {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Billing period toggle */
.billing-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0.25rem;
  gap: 0.15rem;
  margin: 2rem 0 1.25rem;
}

.billing-toggle__btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 0.35rem 0.9rem;
  font-family: inherit;
  font-size: 0.87rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.15s, color 0.15s;
}

.billing-toggle__btn.is-active {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  box-shadow: var(--shadow-1);
}

.billing-toggle__save {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--teal-600);
  background: var(--teal-tint);
  border-radius: var(--r-sm);
  padding: 0.1rem 0.35rem;
}

/* Period visibility */
[data-billing="annual"] .pricing-period--monthly,
[data-billing="monthly"] .pricing-period--annual {
  display: none;
}

.pricing-sale-banner {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.35rem 0.85rem;
  background: var(--teal-tint);
  border: 1px solid rgba(47, 140, 121, 0.25);
  border-radius: var(--r-pill);
  font-size: 0.88rem;
  font-weight: 550;
  color: var(--teal-600);
}

.pricing-card__sale-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-basis: 100%;
  margin-bottom: -0.4rem;
}

.pricing-card__original-price {
  color: var(--muted);
  font-size: 0.92rem;
  text-decoration: line-through;
}

.pricing-card__sale-badge {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--teal-600);
  background: var(--teal-tint);
  border: 1px solid var(--teal);
  padding: 0.12rem 0.4rem;
  border-radius: var(--r-sm);
}

.pricing-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  justify-content: flex-start;
}

.pricing-ladder {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1rem;
  max-width: 720px;
  margin: 1.5rem auto 0;
  padding: 0;
  list-style: none;
}

.pricing-ladder__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
}

.pricing-ladder__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: calc(100% + 1rem);
  height: 1px;
  background: var(--border-strong);
  z-index: 0;
}

.pricing-ladder__node {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border-strong);
}

.pricing-ladder__pct {
  font-weight: 620;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  color: var(--text);
}

.pricing-ladder__status {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.pricing-ladder__step--sold_out .pricing-ladder__pct {
  color: var(--muted);
  text-decoration: line-through;
}

.pricing-ladder__step--sold_out .pricing-ladder__node {
  background: var(--border-strong);
  border-color: var(--border-strong);
}

.pricing-ladder__step--active .pricing-ladder__node {
  background: var(--teal);
  border-color: var(--teal-600);
  box-shadow: 0 0 0 4px rgba(47, 140, 121, 0.15);
}

.pricing-ladder__step--active .pricing-ladder__status,
.pricing-ladder__step--active .pricing-ladder__status strong {
  color: var(--teal-600);
  font-weight: 600;
}

.pricing-card__price strong {
  font-family: var(--font-sans);
  font-size: 2.1rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}

.pricing-card__price span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

/* The billing note (direct child only, NOT the sale badge inside the sale
   row) always gets its own row: whether it fits beside the price depends on
   the price string's width ("$2.50" wraps, "$10" doesn't), which made
   sibling cards render differently. */
.pricing-card__price > span {
  flex-basis: 100%;
}

.pricing-card__price-note {
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.pricing-card__price-note strong {
  font-family: inherit;
  font-size: 1.05rem;
  color: var(--text);
  font-weight: 600;
  line-height: 1.2;
}

.pricing-card__features {
  text-align: left;
}

.pricing-card__features p {
  margin: 0 0 0.5rem;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
}

.pricing-card__features ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
}

.pricing-card__features li {
  font-size: 0.86rem;
  line-height: 1.45;
}

.pricing-card__features li + li {
  margin-top: 0.45rem;
}

.pricing-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  margin-top: auto;
  padding: 0.55rem 1rem;
  border-radius: var(--r-md);
  background: var(--primary-start);
  border: 1px solid var(--primary-start);
  color: var(--primary-text);
  font-weight: 550;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
}

.pricing-card__button:hover {
  background: var(--primary-end);
}

.pricing-card__button-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
}

.contact-request__form {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

/* Honeypot: off-screen for people, visible to form-spam bots that fill every input. */
.contact-request__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.contact-request__input,
.contact-request__textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
}

.contact-request__input:focus,
.contact-request__textarea:focus {
  outline: 2px solid rgba(47, 140, 121, 0.25);
  outline-offset: 1px;
  border-color: var(--teal);
}

.contact-request__textarea {
  resize: vertical;
  min-height: 6rem;
}

.contact-request__submit {
  width: 100%;
  border: 1px solid var(--border-strong);
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
}

.contact-request__submit.is-ready {
  border-color: var(--primary-start);
  background: var(--primary-start);
  color: var(--primary-text);
  cursor: pointer;
  opacity: 1;
}

.contact-request__submit.is-ready:hover {
  background: var(--primary-end);
}

.contact-request__submit:disabled {
  pointer-events: none;
}

@media (max-width: 900px) {
  .screenshot-grid,
  .hero-features,
  .proof-strip,
  .pricing-grid,
  .resource-grid,
  .content-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 901px) {
  .pricing-card-enterprise {
    width: min(100%, calc(50% - 0.5rem));
  }
}

@media (max-width: 640px) {
  .topbar-inner {
    min-height: auto;
    padding: 0.75rem 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.6rem;
  }

  .topbar-pill {
    font-size: 0.66rem;
  }

  .topbar-nav {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem 1rem;
    margin-left: 0;
  }

  .download-cta-topbar {
    width: 100%;
    margin-top: 0.25rem;
  }

  .page {
    padding-top: 1.5rem;
  }

  .hero-copy,
  .closing-cta {
    border-radius: var(--r-lg);
  }

  .hero-brandline {
    align-items: center;
    flex-direction: column;
  }

  .download-cta-topbar {
    align-items: flex-start;
    text-align: left;
  }

  .download-cta__notice-topbar {
    font-size: 0.68rem;
  }

  .screenshot-frame-primary,
  .screenshot-image-primary,
  .screenshot-placeholder {
    min-height: 0;
  }

  .screenshot-placeholder-small {
    min-height: 0;
  }
}

/* ── Footer ──────────────────────────────────────────────── */

.site-footer {
  padding: 3.5rem 0 1.5rem;
  font-size: 0.85rem;
  color: var(--text);
  width: min(1120px, calc(100% - 2.5rem));
  margin: 3rem auto 0;
  border-top: 1px solid var(--border);
}

.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 1.5rem;
  margin-bottom: 2.5rem;
  text-align: left;
}

.site-footer__column {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.site-footer__heading {
  font-family: var(--font-sans);
  font-weight: 650;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 0.35rem;
}

.site-footer a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 450;
  transition: color 120ms ease;
}

.site-footer a:hover {
  color: var(--text);
  text-decoration: none;
}

.site-footer__downloads {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  margin-bottom: 1.5rem;
}

.site-footer__downloads .site-footer__heading {
  margin: 0;
}

.site-footer__downloads-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.site-footer__bottom p {
  margin: 0;
}

.site-footer__legal {
  display: flex;
  gap: 1rem;
}

@media (max-width: 860px) {
  .site-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .site-footer__columns {
    grid-template-columns: 1fr;
  }
}

.site-footer__tagline {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 2rem;
  color: var(--text);
  text-align: left;
}

/* ─── Problem section ────────────────────────────────────── */

/* Compact: this section is a heading and a lead, with no grid under it, so it
   takes less vertical padding than the sections that hold content. */
.problem {
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

/* ─── Comparison table ───────────────────────────────────── */

.compare {
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.compare-scroll {
  margin-top: 1.5rem;
  overflow-x: auto;
}

.compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}

.compare-table th,
.compare-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  vertical-align: middle;
}

.compare-table thead th {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text);
  border-bottom: 1px solid var(--border-strong);
}

.compare-table tbody th[scope="row"] {
  font-weight: 550;
  color: var(--text);
}

.compare-corner {
  border-bottom: 1px solid var(--border-strong);
}

.compare-col-hr {
  background: var(--teal-tint);
}

.compare-table thead .compare-col-hr {
  color: var(--teal-600);
  border-bottom-color: var(--teal);
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: none;
}

.compare-yes {
  color: var(--teal-600);
  font-weight: 600;
}

.compare-no {
  color: var(--orange);
  font-weight: 500;
}

.compare-mid {
  color: var(--muted);
}

.compare-note {
  margin: 1.5rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.compare-note a {
  color: var(--teal-600);
}

/* ─── How It Works diagram ───────────────────────────────── */

.how-it-works {
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.hiw-screenshots {
  margin-top: 2rem;
}

/* ── App showcase (the app window in the hero) ───────────── */

.app-showcase {
  margin-top: 2.75rem;
}

.app-showcase__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Desktop the window sits on: warm dusk wallpaper in the brand palette */
.app-stage {
  max-width: 1020px;
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 3.5rem);
  border-radius: var(--r-xl);
  /* Full brand colour on a single directional axis: deep teal into warm gold.
     What read as generated here was never the colour, it was the three soft
     radial corner blobs. A gradient with one direction reads as chosen; blobs
     sprayed into the corners read as sprayed into the corners. */
  background: linear-gradient(122deg, #0B4A3C 0%, #16332C 34%, #1E1C18 58%, #4A3410 100%);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  /* Two-stage entrance: the desktop settles first, then the window rises into it */
  animation: app-stage-in 0.8s ease-out 0.25s both;
}

@keyframes app-stage-in {
  from { opacity: 0; transform: scale(0.99); }
  to   { opacity: 1; transform: none; }
}

.app-window {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.38), 0 2px 6px rgba(0, 0, 0, 0.22);
  animation: app-window-in 1.4s cubic-bezier(0.16, 0.84, 0.32, 1) 0.65s both,
             app-window-float 9s ease-in-out 3.2s infinite alternate;
}

@keyframes app-window-in {
  from { opacity: 0; transform: translateY(64px) scale(0.955); }
  to   { opacity: 1; transform: none; }
}

/* Title bar belongs to the app window itself, not to an outer frame */
.app-window__bar {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.55rem 0.8rem;
  background: linear-gradient(180deg, #F3F3F1, #E4E4E0);
  border-bottom: 1px solid rgba(26, 26, 24, 0.12);
}

.app-window__dots {
  display: flex;
  gap: 0.4rem;
}

.app-window__dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  /* Brand-invariant macOS traffic lights */
  background: #FF5F57;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
}

.app-window__dots i:nth-child(2) { background: #FEBC2E; }
.app-window__dots i:nth-child(3) { background: #28C840; }

.app-window__title {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 500;
  color: rgba(26, 26, 24, 0.55);
  pointer-events: none;
}

.app-window__title::after { content: "Headroom - Home"; }
#app-shot-activity:checked  ~ .app-stage .app-window__title::after { content: "Headroom - Activity"; }
#app-shot-learnings:checked ~ .app-stage .app-window__title::after { content: "Headroom - Optimize"; }
#app-shot-addons:checked    ~ .app-stage .app-window__title::after { content: "Headroom - Add-ons"; }

.app-window__screen {
  position: relative;
  aspect-ratio: 1522 / 1122;
  background: var(--surface-strong);
}

/* Panels stay stacked and crossfade: opacity only, so it composites instead of repainting */
.app-showcase__panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

#app-shot-dashboard:checked ~ .app-stage .app-showcase__panel:nth-of-type(1),
#app-shot-activity:checked  ~ .app-stage .app-showcase__panel:nth-of-type(2),
#app-shot-learnings:checked ~ .app-stage .app-showcase__panel:nth-of-type(3),
#app-shot-addons:checked    ~ .app-stage .app-showcase__panel:nth-of-type(4) {
  opacity: 1;
}

.app-showcase__image {
  display: block;
  width: 100%;
  height: 100%;
}

/* Click targets over the app's own sidebar items */
.app-nav label {
  position: absolute;
  top: var(--top);
  left: 0.6%;
  width: 8.2%;
  height: 10.7%;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}

.app-nav label:hover {
  background: rgba(47, 140, 121, 0.14);
  box-shadow: inset 0 0 0 1.5px rgba(47, 140, 121, 0.55);
}

.app-nav span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#app-shot-dashboard:focus-visible ~ .app-stage .app-nav label[for="app-shot-dashboard"],
#app-shot-activity:focus-visible  ~ .app-stage .app-nav label[for="app-shot-activity"],
#app-shot-learnings:focus-visible ~ .app-stage .app-nav label[for="app-shot-learnings"],
#app-shot-addons:focus-visible    ~ .app-stage .app-nav label[for="app-shot-addons"] {
  box-shadow: inset 0 0 0 2px var(--teal);
}

@media (prefers-reduced-motion: reduce) {
  .app-stage,
  .app-window {
    animation: none;
  }

  .app-showcase__panel {
    transition: none;
  }
}


.hiw-diagram {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 860px;
  margin: 1.5rem auto 0;
  gap: 0;
}

/* Nodes */
.hiw-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  flex-shrink: 0;
  min-width: 120px;
  text-align: center;
  box-shadow: var(--shadow-1);
}

.hiw-node--hr {
  background: var(--primary-start);
  border-color: var(--primary-start);
}

.hiw-node--claude .hiw-node-icon {
  background: var(--teal-tint);
  color: var(--teal-600);
}

.hiw-node-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--surface-strong);
  color: var(--muted);
  flex-shrink: 0;
}

.hiw-node--hr .hiw-node-icon {
  background: rgba(255, 255, 255, 0.08);
  color: #7FD4BC;
}

.hiw-node-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.hiw-node--hr .hiw-node-name {
  color: #FFFFFF;
}

.hiw-node-sub {
  font-size: 0.67rem;
  color: var(--muted);
  line-height: 1.4;
}

.hiw-node-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: center;
}

.hiw-node-tags span {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.1rem 0.35rem;
}

.hiw-savings-chip {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7FD4BC;
  background: rgba(127, 212, 188, 0.12);
  border: 1px solid rgba(127, 212, 188, 0.25);
  padding: 0.18rem 0.5rem;
  border-radius: var(--r-sm);
}

/* Channels */
.hiw-channel {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-width: 0;
  margin: 0 -1px;
}

/* Subtle "pipe" band behind the particles */
.hiw-channel::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 28px;
  transform: translateY(-50%);
  border-radius: 0;
}

.hiw-channel--in::before {
  background: linear-gradient(90deg,
    rgba(26, 26, 24, 0.045) 0%,
    rgba(26, 26, 24, 0.02) 100%);
}

.hiw-channel--out::before {
  background: linear-gradient(90deg,
    rgba(47, 140, 121, 0.07) 0%,
    rgba(47, 140, 121, 0.03) 100%);
}

.hiw-rail {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg,
    rgba(26, 26, 24, 0.22) 0%,
    rgba(26, 26, 24, 0.1) 100%);
}

.hiw-rail--clean {
  background: linear-gradient(90deg,
    rgba(47, 140, 121, 0.4) 0%,
    rgba(47, 140, 121, 0.18) 100%);
}

.hiw-arrowhead {
  position: absolute;
  top: 50%;
  right: 0;
  width: 0;
  height: 0;
  transform: translateY(-50%);
}

.hiw-arrowhead--in {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid rgba(26, 26, 24, 0.25);
}

.hiw-arrowhead--out {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid rgba(47, 140, 121, 0.45);
}

/* Tokens / Particles */
.hiw-tok {
  position: absolute;
  top: var(--y, 50%);
  left: 0;
  width: var(--w, 20px);
  height: var(--h, 8px);
  border-radius: var(--r, 3px);
  background-color: var(--bg, #c4b8ac);
  filter: saturate(0) brightness(1.06);
  transform: translateY(-50%);
  animation: hiw-flow var(--dur, 2s) var(--d, 0s) linear infinite;
}

.hiw-tok--clean {
  --bg: #2F8C79;
  --r: 3px;
  filter: none;
  animation-name: hiw-flow-clean;
}

@keyframes hiw-flow {
  0%   { transform: translate(-80px, -50%); opacity: 0; }
  6%   { opacity: 0.7; }
  90%  { opacity: 0.7; }
  100% { transform: translate(600px, -50%); opacity: 0; }
}

@keyframes hiw-flow-clean {
  0%   { transform: translate(-20px, -50%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate(600px, -50%); opacity: 0; }
}

/* Responsive: stack vertically on small screens */
@media (max-width: 620px) {
  .hiw-diagram {
    flex-direction: column;
    gap: 0;
    max-width: 320px;
  }

  .hiw-node {
    width: 100%;
  }

  .hiw-channel {
    height: 48px;
    flex: none;
    margin: 0;
  }

  .hiw-channel::before {
    display: none;
  }

  .hiw-rail {
    left: 50%;
    right: auto;
    top: 0;
    bottom: 0;
    width: 1px;
    height: 100%;
    transform: translateX(-50%);
  }

  .hiw-arrowhead {
    top: auto;
    bottom: 0;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .hiw-arrowhead--in,
  .hiw-arrowhead--out {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid rgba(26, 26, 24, 0.25);
    border-bottom: none;
  }

  .hiw-arrowhead--out {
    border-top-color: rgba(47, 140, 121, 0.45);
  }

  .hiw-tok {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────── */

.upgrade-success {
  max-width: 42rem;
  margin: 6rem auto 0;
  text-align: center;
}

/* ── Admin ───────────────────────────────────────────────── */

.admin-body {
  min-height: 100vh;
  background: var(--bg-top);
}

.admin-shell {
  width: min(1120px, calc(100% - 2.5rem));
  margin: 0 auto;
  padding: 2rem 0 4rem;
}

.admin-shell__header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(12px);
  background: rgba(250, 250, 249, 0.85);
  border-bottom: 1px solid var(--border);
}

.admin-shell__header-inner {
  width: min(1120px, calc(100% - 2.5rem));
  margin: 0 auto;
  min-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.admin-shell__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.admin-shell__header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.admin-shell__identity {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 500;
}

.admin-shell__header-actions form {
  margin: 0;
}

.admin-flash-stack {
  width: 100%;
  margin-bottom: 1.5rem;
}

.admin-login {
  min-height: 70vh;
  display: grid;
  place-items: center;
}

.admin-login__panel {
  width: min(28rem, 100%);
  padding: 2rem;
}

.admin-login__eyebrow,
.admin-page__eyebrow {
  margin: 0 0 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--teal-600);
  font-weight: 600;
}

.admin-login h1,
.admin-page h1 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.1;
}

.admin-login__copy,
.admin-page__lede {
  margin: 0.75rem 0 0;
  color: var(--muted);
  max-width: 46rem;
}

.admin-login__form {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
}

.admin-field {
  display: grid;
  gap: 0.45rem;
}

.admin-field label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
}

.admin-field input {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.admin-field input:focus {
  outline: 2px solid rgba(47, 140, 121, 0.25);
  outline-offset: 1px;
  border-color: var(--teal);
}

.admin-page {
  display: grid;
  gap: 1.5rem;
}

.admin-page__heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.admin-stat-card {
  padding: 1.25rem;
  display: grid;
  gap: 0.35rem;
}

.admin-stat-card__label {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.admin-stat-card strong {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.admin-table-card {
  padding: 1.25rem;
}

.admin-table-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1rem;
}

.admin-table-card__header h2 {
  margin: 0;
  font-size: 1.15rem;
}

.admin-table-card__header p:last-child {
  margin: 0;
  color: var(--muted);
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: 0.65rem 0.75rem;
  text-align: left;
  border-top: 1px solid var(--border);
  white-space: nowrap;
}

.admin-table th {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.admin-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  padding: 0.2rem 0.6rem;
  background: var(--teal-tint);
  color: var(--teal-600);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
}

@media (max-width: 860px) {
  .admin-page__heading,
  .admin-table-card__header,
  .admin-shell__header-inner,
  .admin-shell__header-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .admin-shell {
    padding-top: 1.25rem;
  }

  .admin-stats {
    grid-template-columns: 1fr;
  }
}

/* ── Proof strip (users + tokens saved) ──────────────────── */

.proof-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 2.75rem;
  border: none;
  background: transparent;
}

.proof-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 1.4rem 1rem;
  border: none;
  border-radius: 0;
  background: transparent;
}

.proof-stat + .proof-stat {
  border-left: 1px solid var(--border);
}

.proof-stat__num {
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.proof-stat__label {
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}

/* Stack + separators on small screens */
@media (max-width: 560px) {
  .proof-strip {
    grid-template-columns: 1fr;
  }

  .proof-stat + .proof-stat {
    border-left: none;
    border-top: 1px solid var(--border);
  }

  .proof-stat__num {
    font-size: 1.5rem;
  }

  .proof-stat__label {
    font-size: 0.78rem;
  }
}

@media (min-width: 561px) and (max-width: 900px) {
  .proof-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── Logo ribbon (used by team members of …) ─────────────── */

.logo-ribbon {
  margin-top: 2.25rem;
}

.logo-ribbon__label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.8;
}

.logo-ribbon__viewport {
  overflow: hidden;
  max-width: 52rem;
  margin: 1.1rem auto 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}

.logo-ribbon__track {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: max-content;
  animation: logo-ribbon-scroll 30s linear infinite;
}

.logo-ribbon__viewport:hover .logo-ribbon__track {
  animation-play-state: paused;
}

@keyframes logo-ribbon-scroll {
  to { transform: translateX(calc(-50% - 1.5rem)); }
}

.logo-ribbon__list {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  padding: 0;
  margin: 0;
  color: #A3A39E;
}

@media (prefers-reduced-motion: reduce) {
  .logo-ribbon__track {
    animation: none;
    width: auto;
    flex-direction: column;
  }

  .logo-ribbon__viewport {
    -webkit-mask-image: none;
            mask-image: none;
  }

  .logo-ribbon__list {
    flex-wrap: wrap;
    gap: 1rem 2.75rem;
  }

  .logo-ribbon__list[aria-hidden="true"] {
    display: none;
  }
}

.logo-ribbon__list li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.logo-ribbon__mark {
  height: 20px;
  width: auto;
  display: block;
}

.logo-ribbon__icon {
  height: 20px;
  width: 20px;
  border-radius: 5px;
  filter: grayscale(1) brightness(1.55);
  opacity: 0.9;
}

.logo-ribbon__name {
  font-size: 1.05rem;
  font-weight: 620;
  letter-spacing: -0.015em;
  line-height: 1;
}

/* ── HIW savings stat bar (below the pipeline animation) ── */

.hiw-stat-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  max-width: 860px;
  margin: 1.75rem auto 0;
  padding: 0;
}

.hiw-stat-bar__top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.hiw-stat-bar__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
  animation: hiw-pulse-dot 2.2s ease-in-out infinite;
}

@keyframes hiw-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 140, 121, 0.45); }
  50%      { box-shadow: 0 0 0 4px rgba(47, 140, 121, 0); }
}

.hiw-stat-bar__num {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.hiw-stat-bar__label {
  font-size: 0.8rem;
  color: var(--muted);
}

/* ── Numeric polish ──────────────────────────────────────── */

.proof-stat__num,
.calc-result-value,
.bench-acc-value {
  font-variant-numeric: tabular-nums;
}

.bench-badge,
.bench-num-saved,
.bench-num-remaining {
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

/* ── Exit-intent capture dialog ─────────────────────────── */

.exit-capture {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xl);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-3);
  padding: 32px;
  max-width: 420px;
  width: calc(100vw - 48px);
}

.exit-capture::backdrop {
  background: rgba(26, 26, 24, 0.4);
}

.exit-capture__close-form {
  position: absolute;
  top: 10px;
  right: 12px;
  margin: 0;
}

.exit-capture__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0.25rem;
}

.exit-capture__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 640;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

.exit-capture__body {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 1.25rem;
}

.exit-capture__form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.exit-capture__input {
  flex: 1 1 180px;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
}

.exit-capture__input:focus {
  outline: 2px solid rgba(47, 140, 121, 0.25);
  outline-offset: 1px;
  border-color: var(--teal);
}

.exit-capture__submit {
  border: none;
  cursor: pointer;
  font: inherit;
}

.exit-capture__error {
  color: var(--orange);
  font-size: 0.85rem;
  margin: 0.6rem 0 0;
}

@media (max-width: 640px) {
  .exit-capture {
    padding: 24px;
  }
}

/* ── Topbar dropdown ─────────────────────────────────────── */

.nav-dropdown {
  position: relative;
}

.nav-dropdown__trigger {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.nav-dropdown__trigger::-webkit-details-marker {
  display: none;
}

.nav-dropdown__trigger::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-left: 0.2rem;
}

.nav-dropdown[open] .nav-dropdown__trigger {
  color: var(--text);
}

.nav-dropdown__panel {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  padding: 1.25rem 1.5rem;
  width: max-content;
  max-width: min(720px, calc(100vw - 2rem));
}

.nav-dropdown__group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.nav-dropdown__heading {
  font-family: var(--font-sans);
  font-weight: 650;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 0.2rem;
}

.nav-dropdown__panel a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 450;
  white-space: nowrap;
  transition: color 120ms ease;
}

.nav-dropdown__panel a:hover {
  color: var(--text);
  text-decoration: none;
}

.topbar-nav-link--icon {
  gap: 0;
}

@media (max-width: 900px) {
  .nav-dropdown__panel {
    grid-template-columns: 1fr;
    max-height: 60vh;
    overflow-y: auto;
  }

  .nav-dropdown__panel a {
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .topbar-inner {
    position: relative;
  }

  .nav-dropdown {
    position: static;
  }

  .nav-dropdown__panel {
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }
}

/* ── Articles hub ────────────────────────────────────────── */

.articles-group h2 {
  margin-bottom: 1rem;
}

.articles-group + .articles-group {
  margin-top: 2.75rem;
}

/* ── Dropdown "all articles" link ────────────────────────── */

.nav-dropdown__all {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border);
  padding-top: 0.85rem;
  font-size: 0.85rem;
  font-weight: 550;
  color: var(--teal-600) !important;
  text-decoration: none;
}

/* ── Resources "all articles" link ───────────────────────── */

.resources-all {
  text-align: center;
  margin: 1.75rem 0 0;
}

.resources-all a {
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--teal-600);
  text-decoration: none;
}

.resources-all a:hover {
  text-decoration: underline;
}

/* ── Get-started checkout wizard ─────────────────────────── */

.wizard-hero {
  display: flex;
  justify-content: center;
  padding: 3.5rem 1.25rem 4.5rem;
}

.wizard {
  max-width: 720px;
  width: 100%;
  padding: 3rem 2.5rem;
  text-align: center;
}

.wizard-step[hidden],
.wizard-options[hidden] {
  display: none;
}

.wizard-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 640;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0.5rem 0 1.75rem;
}

.wizard-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.wizard-options--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.wizard-option {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  color: var(--text);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.wizard-option:hover {
  border-color: rgba(26, 26, 24, 0.25);
  box-shadow: var(--shadow-2);
}

.wizard-option__name {
  font-size: 0.95rem;
  font-weight: 600;
}

.wizard-icons {
  display: flex;
  gap: 0.4rem;
}

.wizard-option__logo {
  display: inline-flex;
  width: 34px;
  height: 34px;
  margin-bottom: 0.35rem;
}

.wizard-option__logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

.wizard-option__logo--claude {
  color: #D97757;
}

.wizard-option__logo--chatgpt {
  color: #1A1A18;
}

.wizard-option__plan-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  margin-bottom: 0.35rem;
  color: var(--teal-600);
}

.wizard-option__plan-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wizard-option__plan-icon--usage {
  color: var(--orange);
}

.wizard-option__plan-icon--business {
  color: var(--gold);
}

.wizard-option__plan-icon--api {
  color: var(--pill);
}

.wizard-option__hint {
  font-size: 0.82rem;
  color: var(--muted);
}

.wizard-summary {
  color: var(--muted);
  margin: -0.75rem 0 1.25rem;
}

.wizard-form {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.wizard-form__email {
  min-width: 260px;
  flex: 1;
  max-width: 340px;
}

.wizard-back {
  background: none;
  border: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  margin-top: 0.5rem;
}

.wizard-back:hover {
  color: var(--text);
}

@media (max-width: 640px) {
  .wizard {
    padding: 2rem 1.25rem;
  }
  .wizard-options,
  .wizard-options--two {
    grid-template-columns: 1fr;
  }
}

.wizard-options--four {
  grid-template-columns: repeat(2, 1fr);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.wizard-option--price {
  position: relative;
  padding-top: 1.5rem;
}

.wizard-option__badge {
  position: absolute;
  top: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pill);
  color: var(--pill-text);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.wizard-option__price {
  font-family: var(--font-sans);
  font-size: 1.6rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.wizard-option__price span {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
}

.wizard-checkout {
  margin-top: 0.5rem;
}

.wizard-options--one {
  grid-template-columns: 1fr;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.wizard-options + .wizard-options {
  margin-top: 0.75rem;
}

.wizard-title[hidden] {
  display: none;
}

/* pricing_price partial inside wizard price cards: hidden-toggle per tier,
   centered instead of pricing-card's left alignment */
[data-tier-price][hidden] {
  display: none;
}

.wizard-option--price .pricing-card__price {
  align-items: center;
  text-align: center;
}

.wizard-option--price .pricing-card__sale-row {
  justify-content: center;
}

.wizard-sale-banner {
  margin: -0.5rem auto 1.25rem;
}

/* ===== Docs section (/docs) ===== */
/* GitBook-style docs shell: sticky nav tree + wide reading column + an
   "on this page" rail built from the h2s. Reuses the site tokens;
   deliberately quieter than the marketing/blog pages. Also wraps the
   article pages via _article_shell. */

.docs-page {
  width: min(1280px, calc(100% - 2.5rem));
  text-align: left;
}

.docs-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 190px;
  gap: var(--s6);
  align-items: start;
  margin-top: var(--s5);
}

.docs-sidebar {
  position: sticky;
  top: 5.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s4) 0;
  font-size: 0.9rem;
}

.docs-sidebar__title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  text-decoration: none;
}

.docs-sidebar__title.is-active,
.docs-sidebar__link.is-active {
  color: var(--teal-600);
}

.docs-sidebar__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--border);
  padding-top: var(--s3);
}

.docs-sidebar__heading {
  margin: 0 0 var(--s1);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.docs-sidebar__link {
  display: block;
  padding: 4px var(--s2);
  margin-left: calc(-1 * var(--s2));
  border-radius: var(--r-sm);
  color: var(--muted);
  text-decoration: none;
  line-height: 1.45;
}

.docs-sidebar__link:hover {
  color: var(--text);
  background: var(--surface-strong);
}

.docs-sidebar__link.is-active {
  font-weight: 600;
  background: var(--teal-tint);
}

.docs-main {
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.75rem);
  min-width: 0;
}

.docs-breadcrumb {
  display: flex;
  gap: var(--s2);
  align-items: center;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: var(--s4);
}

.docs-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.docs-breadcrumb a:hover {
  color: var(--teal-600);
  text-decoration: underline;
}

.docs-header h1 {
  margin: 0 0 var(--s3);
  font-size: clamp(1.55rem, 2.6vw, 2rem);
  line-height: 1.2;
}

.docs-lead {
  margin: 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.65;
}

.docs-section {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
}

.docs-section h2 {
  margin: 0 0 var(--s3);
  font-size: 1.15rem;
  line-height: 1.3;
}

.docs-section p {
  margin: 0 0 var(--s3);
  line-height: 1.7;
  font-size: 0.96rem;
}

.docs-section p:last-child {
  margin-bottom: 0;
}

.docs-section a:not(.button),
.docs-lead a:not(.button) {
  color: var(--teal-600);
  text-decoration: underline;
  text-decoration-color: rgba(47, 140, 121, 0.35);
  text-underline-offset: 0.18em;
  transition: text-decoration-color 120ms ease;
}

.docs-section a:not(.button):hover,
.docs-lead a:not(.button):hover {
  text-decoration-color: var(--teal-600);
}

.docs-section code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 0.1em 0.35em;
  white-space: nowrap;
}

.docs-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-top: var(--s6);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-strong);
}

.docs-cta p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}

/* "On this page" rail (built client-side from the h2s; stays hidden when a
   page has fewer than two sections). */
.docs-rail {
  position: sticky;
  top: 5.5rem;
  padding: var(--s4) 0;
  font-size: 0.8rem;
}

.docs-rail__heading {
  margin: 0 0 var(--s2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.docs-rail__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--s3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 1px solid var(--border);
}

.docs-rail__list a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  line-height: 1.45;
}

.docs-rail__list a:hover {
  color: var(--teal-600);
}

@media (max-width: 1100px) {
  .docs-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .docs-rail {
    display: none;
  }
}

@media (max-width: 860px) {
  .docs-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .docs-sidebar {
    position: static;
    padding: var(--s4) var(--s5);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
  }
}

/* ===== Blog index cards ===== */
/* Editorial treatment: one featured hero for the newest post, a card grid
   for the rest. Text-first (no cover art yet); the chip carries category. */

.blog-card {
  display: block;
  padding: var(--s5) var(--s5) var(--s4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-decoration: none;
  color: var(--text);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.blog-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
}

.blog-card--featured {
  margin-top: var(--s5);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background:
    radial-gradient(90% 120% at 0% 0%, var(--teal-tint), transparent 60%),
    var(--surface);
}

.blog-card--featured h2 {
  margin: var(--s3) 0;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.25;
}

.blog-card h3 {
  margin: var(--s3) 0;
  font-size: 1.1rem;
  line-height: 1.35;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

.blog-card__chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--teal-tint);
  color: var(--teal-600);
  font-weight: 600;
  font-size: 0.75rem;
}

.blog-card__excerpt {
  margin: 0 0 var(--s3);
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.blog-card--featured .blog-card__excerpt {
  font-size: 1rem;
  max-width: 46rem;
}

.blog-card__byline {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s4);
  margin-top: var(--s4);
  text-align: left;
}

/* Byline under each post's h1. */
.blog-post-meta {
  margin: var(--s2) 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.blog-post-meta strong {
  color: var(--text);
  font-weight: 600;
}

/* ===== Wide resource pages ===== */
/* GitBook-style treatment for the top-level text pages (/articles, guides,
   comparisons, blog posts, legal): the panel spans wide so tables, card
   grids, callouts, and figures breathe, while running prose keeps a
   readable measure. Docs pages have their own shell and are unaffected. */

.content-page {
  max-width: 74rem;
}

.content-page .content-intro h1 {
  max-width: 54rem;
}

.content-page .content-intro .lead,
.content-page .content-section > p,
.content-page .content-section .content-list,
.content-page .content-section .content-steps,
.content-page .content-article > p {
  max-width: 48rem;
}

/* Cards get the same hover affordance as the blog cards. */
.resource-card {
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.resource-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
}

/* At the wider measure the library grid can afford real columns. */
.articles-group .resource-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Blog posts are essays, not scannable resources: keep them at the classic
   centered reading measure. The byline marker identifies a post page. */
.content-page:has(.blog-post-meta) {
  max-width: 56rem;
}

/* ── Motion layer ────────────────────────────────────────────
   Inspired by miromiro.app: staggered fade-and-rise on the hero copy,
   scroll-triggered reveals on section headings and card grids, springy
   hover lifts on cards, and a slow float on the hero app window. All of
   it degrades to static: reveals only hide content once JS has tagged
   the root with .js-sr, and reduced-motion turns everything off. */

@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.rise-in {
  animation: rise-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) var(--rise-d, 0s) both;
}

@keyframes app-window-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-7px); }
}

/* Scroll reveals: .sr reveals as one unit, .sr-stagger reveals its
   children left-to-right. The IO script adds .sr-visible. */
html.js-sr .sr,
html.js-sr .sr-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

html.js-sr .sr.sr-visible,
html.js-sr .sr-stagger.sr-visible > * {
  opacity: 1;
  transform: none;
}

html.js-sr .sr-stagger > :nth-child(2) { transition-delay: 90ms; }
html.js-sr .sr-stagger > :nth-child(3) { transition-delay: 180ms; }
html.js-sr .sr-stagger > :nth-child(4) { transition-delay: 270ms; }
html.js-sr .sr-stagger > :nth-child(5) { transition-delay: 360ms; }
html.js-sr .sr-stagger > :nth-child(n+6) { transition-delay: 450ms; }

/* Hover lifts with a springy ease; .resource-card keeps its existing
   border/shadow transition and gains the same lift. */
.pricing-card,
.feature-card,
.calc-result-card {
  transition:
    translate 0.45s cubic-bezier(0.34, 1.56, 0.42, 1),
    box-shadow 0.3s ease;
}

.pricing-card:hover,
.feature-card:hover,
.calc-result-card:hover {
  translate: 0 -4px;
  box-shadow: var(--shadow-2);
}

.resource-card {
  transition:
    translate 0.45s cubic-bezier(0.34, 1.56, 0.42, 1),
    border-color 120ms ease,
    box-shadow 0.3s ease;
}

.resource-card:hover {
  translate: 0 -3px;
}

@media (prefers-reduced-motion: reduce) {
  .rise-in {
    animation: none;
  }

  html.js-sr .sr,
  html.js-sr .sr-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .pricing-card,
  .feature-card,
  .calc-result-card,
  .resource-card {
    transition: none;
    translate: none;
  }
}

/* ── Dark hero shell ─────────────────────────────────────────
   The visual lesson from miromiro.app: the hero is an immersive
   rounded dark panel on the light page, with the product window
   emerging from its bottom edge. The gradient is the same brand
   dusk the app window used to sit on, promoted to the whole shell. */

.hero-shell {
  --window-bleed: clamp(3rem, 12vw, 6rem);
  position: relative;
  /* flow-root stops the showcase's negative bottom margin collapsing
     through the shell edge - without it the shell background follows
     the window down and the bleed never shows */
  display: flow-root;
  border-radius: 1.75rem;
  /* Brand gradient, theme-invariant like the app-stage it came from,
     layered under a top glow, soft vertical aurora bands, and a darker
     floor so the copy zone and the window zone read differently */
  background:
    radial-gradient(85% 55% at 50% -8%, rgba(63, 165, 141, 0.5), transparent 62%),
    repeating-linear-gradient(90deg, transparent 0px, rgba(255, 255, 255, 0.05) 45px, transparent 90px, transparent 150px),
    repeating-linear-gradient(90deg, transparent 0px, rgba(255, 255, 255, 0.03) 28px, transparent 56px, transparent 89px),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.38) 100%),
    linear-gradient(138deg, #0B4A3C 0%, #16332C 36%, #1E1C18 62%, #4A3410 100%);
  isolation: isolate;
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem) 0;
}

.hero-shell h1 {
  color: #fff;
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}

.hero-shell .headline-highlight {
  color: #6FCDB6;
}

.hero-shell .headline-highlight::after {
  border-bottom-color: rgba(111, 205, 182, 0.55);
}

.hero-shell .lead {
  color: rgba(255, 255, 255, 0.75);
}

.hero-shell .lead strong {
  color: #fff;
}

/* CTA, miromiro-style: one flat brand color, a white shine sweeping
   across on their exact 3s cadence, and nothing else - no gradient,
   no glow ring, no inset highlight. */
.hero-shell .button-primary {
  position: relative;
  overflow: hidden;
  padding: 0.7rem 1.7rem;
  font-size: 1rem;
  border-radius: var(--r-pill);
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  transition: translate 0.3s cubic-bezier(0.34, 1.56, 0.42, 1), background 150ms ease, box-shadow 0.3s ease;
}

.hero-shell .button-primary:hover {
  background: #35997F;
  border-color: #35997F;
  translate: 0 -2px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
}

.hero-shell .button-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.35), transparent 80%);
  transform: translateX(-100%);
  animation: cta-shine 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cta-shine {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-shell .button-primary::after {
    animation: none;
  }
}

.hero-shell .download-cta__notice {
  color: rgba(255, 255, 255, 0.55);
}

.hero-shell .laurel-rating {
  color: rgba(255, 255, 255, 0.75);
}

.hero-shell .laurel-rating__laurel {
  opacity: 0.4;
}

.hero-shell .laurel-rating__count {
  color: #fff;
}

.hero-shell .laurel-rating__label {
  color: rgba(255, 255, 255, 0.6);
}

/* Token stream reads as faint light streaks on the dark ground */
.hero-shell .hero-stream {
  height: 30rem;
}

.hero-shell .hero-stream__band {
  opacity: 0.45;
}

.hero-shell .hiw-tok--clean {
  --bg: #63C4AA;
}

/* The shell itself is the desktop now: the stage flattens and the
   window sits flush on the bottom edge, cropped by the shell radius. */
.hero-shell .app-stage {
  background: none;
  box-shadow: none;
  padding: clamp(1rem, 2.5vw, 2rem) 0 0;
}

.hero-shell .app-showcase {
  margin-top: 1.25rem;
  margin-bottom: calc(-1 * var(--window-bleed));
}

.hero-shell .app-window {
  border-radius: 10px;
  /* Straddles the shell edge: shadow must read on light page too */
  box-shadow: 0 24px 52px rgba(26, 26, 24, 0.3), 0 2px 6px rgba(26, 26, 24, 0.16);
  /* Anchored to the shell edge, so no idle float here */
  animation: app-window-in 1.4s cubic-bezier(0.16, 0.84, 0.32, 1) 0.65s both;
}

/* Light band under the shell: stats, logos, feature cards */
.hero-after {
  padding: calc(clamp(3rem, 12vw, 6rem) + 1.5rem) clamp(1.5rem, 3vw, 2.5rem) 0;
}

/* Section tags: small rotated gradient pill over the heading */
.eyebrow--tag {
  display: inline-block;
  padding: 0.4rem 0.95rem;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--teal), var(--teal-600));
  color: #fff;
  transform: rotate(-2deg);
  box-shadow: 0 6px 16px rgba(47, 140, 121, 0.3);
}

@media (max-width: 640px) {
  .hero-shell {
    border-radius: var(--r-lg);
  }
}

/* The .hero-shell .app-window override outranks the site-wide
   reduced-motion opt-out above, so repeat it at equal specificity. */
@media (prefers-reduced-motion: reduce) {
  .hero-shell .app-window {
    animation: none;
  }
}

/* 1: the shell breaks out wider than the page column on large screens */
@media (min-width: 1180px) {
  .hero {
    margin-inline: min(0px, calc((100% - min(1400px, 100vw - 3rem)) / 2));
  }
}



/* 2: one aurora band layer drifts slowly (seamless: shift = one period) */
.hero-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -2;
  background: repeating-linear-gradient(90deg, transparent 0px, rgba(255, 255, 255, 0.07) 45px, transparent 90px, transparent 150px);
  animation: aurora-drift 22s linear infinite;
  pointer-events: none;
}

@keyframes aurora-drift {
  to { background-position-x: -150px; }
}

/* 1: the shell steps back to the page column around the window - the
   page bites into the bottom corners with inverted-radius fillets,
   miromiro's "edge" trick in Headroom's page color */
.hero-shell__edge {
  display: none;
  position: absolute;
  bottom: 0;
  z-index: 1;
  /* Window is 1020px wide and ~49rem tall: a 1180px opening leaves an
     80px dark mat beside it, and 34rem starts the funnel about a third
     of the way down the window. */
  height: 34rem;
  width: calc((100% - 1180px) / 2);
  background: var(--bg-top);
}

@media (min-width: 1180px) {
  .hero-shell__edge {
    display: block;
  }
}

.hero-shell__edge--left {
  left: 0;
  border-top-right-radius: 2rem;
}

.hero-shell__edge--right {
  right: 0;
  border-top-left-radius: 2rem;
}

.hero-shell__edge::before {
  content: "";
  position: absolute;
  top: -2.5rem;
  width: 2.5rem;
  height: 2.5rem;
}

.hero-shell__edge--left::before {
  left: 0;
  background: radial-gradient(circle at top right, transparent 2.49rem, var(--bg-top) 2.5rem);
}

.hero-shell__edge--right::before {
  right: 0;
  background: radial-gradient(circle at top left, transparent 2.49rem, var(--bg-top) 2.5rem);
}



.hero-shell__edge::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 2rem;
  height: 2rem;
}

.hero-shell__edge--left::after {
  right: -2rem;
  background: radial-gradient(circle at top right, transparent 1.99rem, var(--bg-top) 2rem);
}

.hero-shell__edge--right::after {
  left: -2rem;
  background: radial-gradient(circle at top left, transparent 1.99rem, var(--bg-top) 2rem);
}

@media (prefers-reduced-motion: reduce) {
  .hero-shell::before {
    animation: none;
  }
}