/* Type scale. The root stays FIXED at 16px: an earlier fluid-root scheme
   used per-band formulas that only met 16px at each band's top edge, so
   the whole rem-based interface sawtoothed at breakpoints (19.7px root at
   480px viewport, 10.0px at 481px). Fluidity belongs on display elements
   via clamp(), never on the document root. */
html {
  font-size: 16px;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display type: Instrument Sans at weight 500 with tight tracking —
   single family across display and body. */
.landing-heading {
  font-family: "Instrument Sans", var(--font-sans), ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Continuous: 36px at 390px viewport -> 60px at 1280px, floor 34px.
   Anchored to the validated mobile and desktop sizes; every width in
   between interpolates with no jumps. This is the ONLY font-size rule
   for the hero title — don't add stepped overrides below. */
.landing-hero-title {
  font-size: clamp(2.125rem, 1.593rem + 2.697vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  /* Even line lengths when a segment wraps; markup keeps "firearm log"
     unbreakable so older browsers never orphan a word. */
  text-wrap: balance;
}

/* Phones: sized so each headline segment holds ONE line (two lines
   total, like the reference composition). 7.7vw fits "The private
   firearm log" at 390 (30px) down to 320 (24.6px); the 2rem cap stops
   growth before the >=40rem clamp takes over. */
@media (width < 40rem) {
  .landing-hero-title {
    font-size: clamp(1.45rem, 7.7vw, 2rem);
    line-height: 1.12;
  }
}

/* Quiet supporting voice: regular weight, a step smaller than the old
   lead, and dimmer than body copy so the headline and CTA carry. */
.landing-hero-lead {
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
}

@media (width >= 64rem) {
  .landing-hero-lead {
    font-size: 1.125rem;
    line-height: 1.6;
  }
}

.landing-section-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.landing-section-title {
  margin-top: 0.75rem;
  font-size: clamp(2rem, 3.55vw, 2.75rem);
  line-height: 1.12;
}

.landing-section-lead {
  margin-top: 1rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

@media (width >= 64rem) {
  .landing-section-lead {
    margin-top: 1.25rem;
  }
}

.landing-body-copy {
  line-height: 1.6;
}

/* LS-style spacing scale (rem-based, follows fluid root) */
.landing-mt-xs { margin-top: 0.5rem; }
.landing-mt-sm { margin-top: 1rem; }
.landing-mt-md { margin-top: 1.75rem; }
.landing-mt-lg { margin-top: 2.5rem; }
.landing-mt-xl { margin-top: 4rem; }

.landing-section-y {
  padding-block: 3rem;
}
@media (width >= 40rem) {
  .landing-section-y {
    padding-block: 4rem;
  }
}
@media (width >= 64rem) {
  .landing-section-y {
    padding-block: 5rem;
  }
}

.landing-page-pad {
  padding-inline: var(--landing-px);
}

/* Mobile nav drawer — LS: logo + CTA + menu, no second pill row */
.landing-nav-menu summary {
  list-style: none;
  cursor: pointer;
}
.landing-nav-menu summary::-webkit-details-marker {
  display: none;
}
.landing-nav-menu[open] summary {
  color: var(--color-blueprint-text);
  border-color: color-mix(in srgb, var(--color-blueprint-accent) 45%, transparent);
}
/* Hero depth: a faint grid + soft brand glow behind the content, masked so
   it's strongest toward the top and fades to clean black before the CTA.
   Purely decorative; content sits at z-10 above it. */
.landing-hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 68% 52% at 12% 4%, color-mix(in srgb, var(--color-blueprint-accent) 14%, transparent), transparent 55%),
    linear-gradient(to right, rgb(255 255 255 / 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.028) 1px, transparent 1px);
  background-size: 100% 100%, 58px 58px, 58px 58px;
  -webkit-mask-image: radial-gradient(128% 92% at 50% -6%, #000 30%, transparent 74%);
  mask-image: radial-gradient(128% 92% at 50% -6%, #000 30%, transparent 74%);
}

/* Legal pages (terms, privacy): long-form prose in the landing system.
   Element selectors are scoped under .legal-prose so nothing leaks. */
.legal-prose h1 {
  font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2rem, 3.55vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-blueprint-text);
  margin-bottom: 0.5rem;
  line-height: 1.12;
}
.legal-prose .last-updated {
  color: var(--color-blueprint-muted);
  font-size: 0.875rem;
  margin-bottom: 2.5rem;
}
.legal-prose .intro {
  font-size: 1.0625rem;
  color: var(--color-blueprint-muted);
  border-left: 2px solid var(--color-blueprint-accent);
  padding-left: 1.25rem;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}
.legal-prose h2 {
  font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-brand-700);
  letter-spacing: -0.01em;
  margin-top: 2.75rem;
  margin-bottom: 1rem;
}
.legal-prose h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-blueprint-text);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.legal-prose p {
  margin-bottom: 1rem;
  color: var(--color-blueprint-muted);
  line-height: 1.7;
}
.legal-prose ul,
.legal-prose ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}
.legal-prose ul {
  list-style: disc;
}
.legal-prose ol {
  list-style: decimal;
}
.legal-prose li {
  margin-bottom: 0.5rem;
  color: var(--color-blueprint-muted);
  line-height: 1.7;
}
.legal-prose a {
  color: var(--color-brand-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--color-blueprint-accent) 50%, transparent);
}
.legal-prose a:hover {
  color: var(--color-brand-800);
}
.legal-prose strong {
  color: var(--color-blueprint-text);
  font-weight: 600;
}
.legal-prose .warning-box {
  background-color: color-mix(in srgb, var(--color-blueprint-accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-blueprint-accent) 28%, transparent);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}
.legal-prose .warning-box p {
  margin-bottom: 0.5rem;
  color: var(--color-blueprint-text);
  font-weight: 500;
}
.legal-prose .warning-box p:last-child {
  margin-bottom: 0;
}

/* Same treatment tuned for the short, wide secondary-page hero (explore,
   pricing): the grid reads across the band and fades downward, rather than
   the tall home mask which fades within ~100px here. */
.landing-page-hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 52% 130% at 10% -20%, color-mix(in srgb, var(--color-blueprint-accent) 13%, transparent), transparent 62%),
    linear-gradient(to right, rgb(255 255 255 / 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.028) 1px, transparent 1px);
  background-size: 100% 100%, 58px 58px, 58px 58px;
  -webkit-mask-image: linear-gradient(to bottom, #000 42%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 42%, transparent 92%);
}

/* Hero: no OG poster flash — layered mesh fills frame; video fades in when ready */
.landing-hero-bg {
  position: absolute;
  inset: 0;
  background-color: var(--color-blueprint-ground);
  background-image:
    radial-gradient(ellipse 70% 60% at 15% 40%, color-mix(in srgb, var(--color-blueprint-accent) 9%, transparent), transparent 55%),
    radial-gradient(ellipse 55% 45% at 85% 25%, color-mix(in srgb, var(--color-blueprint-accent-deep) 6%, transparent), transparent 50%),
    radial-gradient(
      ellipse 50% 40% at 50% 100%,
      color-mix(in srgb, var(--color-blueprint-accent-deep) 4%, transparent),
      transparent 45%
    );
}

/* Subtle vignette grid */
.landing-hero-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--color-blueprint-text) 3%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-blueprint-text) 2.5%, transparent) 1px,
      transparent 1px
    );
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 75% 70% at 50% 40%, black, transparent);
  opacity: 0.22;
  pointer-events: none;
}

/* ============================================================
   HERO DEVICE MOCKUP — license-clean CSS/SVG tablet
   Real app screenshot is composited into .hero-tablet-screen.
   Tunable knobs live on .hero-tablet (--tablet-tilt etc.).
   ============================================================ */
.landing-hero-media {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.75rem 1.25rem 2.25rem;
}
@media (width >= 40rem) {
  .landing-hero-media {
    padding: 2.25rem 2rem 2.75rem;
  }
}
@media (width >= 64rem) {
  .landing-hero-media {
    flex: 0 0 40%;
    max-width: 40%;
    min-height: calc(100svh - 3.75rem);
    align-self: stretch;
    justify-content: flex-start;
    overflow: visible;
    /* right padding keeps the tablet off the viewport edge (was 0, so it sat
       flush against / just past the right edge with no breathing room) */
    padding: 3rem 2.5rem 3rem 1.5rem;
  }
}

.hero-device-stage {
  position: relative;
  width: 100%;
  max-width: 30rem;
  perspective: 2000px;
}
@media (width >= 64rem) {
  .hero-device-stage {
    /* intentionally wider than the column so the far edge bleeds past
       the hero's right edge (clipped by .landing-hero-section overflow) */
    width: min(44rem, 50vw);
    max-width: none;
  }
}

/* ambient brand glow behind the device */
.hero-device-stage::before {
  content: "";
  position: absolute;
  inset: -10% -8% -14%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(58% 54% at 58% 40%, color-mix(in srgb, var(--color-blueprint-accent-deep) 22%, transparent), transparent 70%);
  filter: blur(22px);
}

.hero-tablet {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: clamp(18px, 2.4vw, 30px);
  padding: clamp(8px, 1.05vw, 14px);
  background:
    linear-gradient(
      152deg,
      var(--color-brand-400) 0%,
      var(--color-blueprint-overlay) 34%,
      var(--color-blueprint-ground) 68%,
      var(--color-brand-300) 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.11),
    inset 0 0 0 2px rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.6),
    0 24px 44px -16px rgba(0, 0, 0, 0.6),
    0 54px 80px -42px rgba(0, 0, 0, 0.72);
  transform: rotateY(-9deg) rotateX(2.5deg) rotate(0.4deg);
  transform-origin: 62% 50%;
  transition: transform 300ms ease-out;
  will-change: transform;
}

.hero-tablet-screen {
  position: relative;
  overflow: hidden;
  border-radius: clamp(11px, 1.55vw, 19px);
  aspect-ratio: 2000 / 1140;
  background: var(--color-blueprint-ground);
  /* Small inset so the rounded corners never shave the app's collapsed
     rail (keeper tile top-left, avatar bottom-left). Corner intrusion of
     radius r is ~0.3r, so this stays just above that. Same color as the
     blueprint app canvas: the inset is invisible. */
  padding: clamp(5px, 0.6vw, 8px);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.92),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.04);
}

.hero-tablet-shot {
  display: block;
  width: 100%;
  height: 100%;
  /* contain, not cover: the padded box's aspect differs a hair from the
     shot's, and cover paid that difference by shaving the rail's bottom
     (avatar). The letterbox sliver is invisible on the matched ground. */
  object-fit: contain;
  object-position: top center;
  /* The unified UI runs darker than the old mockup; unlifted it reads
     murky inside a dark bezel on a dark page. */
  filter: brightness(1.16) contrast(1.03);
}

/* screen reflection — gentle diagonal sweep + corner sheen */
.hero-tablet-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    linear-gradient(
      105deg,
      rgba(255, 255, 255, 0.13) 0%,
      rgba(255, 255, 255, 0.04) 9%,
      rgba(255, 255, 255, 0) 24%,
      rgba(255, 255, 255, 0) 100%
    ),
    radial-gradient(130% 62% at 82% -12%, rgba(255, 255, 255, 0.07), transparent 60%);
}

/* seats the glass under the bezel lip */
.hero-tablet-screen-edge {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.06),
    inset 0 -12px 26px rgba(0, 0, 0, 0.16);
}

/* front camera, centered on the top (long) bezel */
.hero-tablet-cam {
  position: absolute;
  top: clamp(3px, 0.45vw, 6px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(4px, 0.45vw, 6px);
  height: clamp(4px, 0.45vw, 6px);
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    var(--color-blueprint-sidebar),
    var(--color-blueprint-ground) 72%
  );
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 1px rgba(120, 170, 200, 0.55);
}

/* flat + un-tilted on small screens for max legibility */
@media (width < 64rem) {
  .hero-device-stage {
    perspective: none;
  }
  .hero-tablet {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-tablet {
    transition: none;
  }
}

/* Mobile: stack copy + video tightly — no viewport-height centering gap */
@media (width < 64rem) {
  .landing-hero-section {
    min-height: 0;
  }

  .landing-hero-copy-panel {
    flex: 0 0 auto;
    justify-content: flex-start;
    /* Generous air above the headline on phones — the copy is centered
       there, and a tight start under the nav reads cramped. */
    padding-top: clamp(3rem, 8vh, 4.5rem);
    padding-bottom: 1.25rem;
  }

  .landing-hero-title {
    line-height: 1.08;
  }
}

/* Pricing toggle — CSS-only with checkbox hack */
#pricing-toggle:checked ~ .pricing-grid .price-annual { display: none; }
#pricing-toggle:checked ~ .pricing-grid .price-monthly { display: block; }
#pricing-toggle:not(:checked) ~ .pricing-grid .price-annual { display: block; }
#pricing-toggle:not(:checked) ~ .pricing-grid .price-monthly { display: none; }

#pricing-toggle:checked ~ .toggle-row .toggle-track .toggle-knob { transform: translateX(24px); }
#pricing-toggle:checked ~ .toggle-row .toggle-label-annual { color: var(--color-blueprint-faint); }
#pricing-toggle:checked ~ .toggle-row .toggle-label-monthly { color: var(--color-blueprint-text); }
#pricing-toggle:not(:checked) ~ .toggle-row .toggle-label-annual { color: var(--color-blueprint-text); }
#pricing-toggle:not(:checked) ~ .toggle-row .toggle-label-monthly { color: var(--color-blueprint-faint); }
#pricing-toggle:checked ~ .toggle-row .save-badge { opacity: 0.35; }

.toggle-knob { transition: transform 150ms ease; }

details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::marker { display: none; }
details[open] .faq-chevron { transform: rotate(180deg); }

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-blueprint-accent);
  outline-offset: 2px;
}

/* The focusable control is the sr-only checkbox; show its keyboard focus ring
   on the visible track (the label itself is not focusable). */
#pricing-toggle:focus-visible + .toggle-row .toggle-track {
  box-shadow: 0 0 0 3px var(--color-blueprint-accent);
}

/*
  Primary button — Lemon Squeezy interaction:
  shadow layer on .landing-btn-primary, face on .landing-btn-overlay;
  hover lifts overlay (-0.5rem) and slides icon (+0.5rem).
*/
.landing-btn-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

.landing-btn-primary {
  display: inline-block;
  border-radius: 10px;
  text-decoration: none;
  color: var(--color-blueprint-ground);
  background-color: var(--color-brand-300);
  padding: 0;
  transition: background-color 150ms ease;
}

.landing-btn-primary:focus-visible {
  outline: 2px solid var(--color-blueprint-accent);
  outline-offset: 3px;
}

/* Solid brand button (quiet rectangle, not a pill); the slide-reveal
   base underneath is a darker steel edge. */
.landing-btn-overlay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.875rem 1.375rem;
  border-radius: 10px;
  background: var(--color-blueprint-accent);
  font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 550;
  font-size: 1rem;
  line-height: 1;
  transition: transform 150ms ease, background-color 150ms ease;
}

.landing-btn-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  pointer-events: none;
  transition: transform 150ms ease;
}

.landing-btn-wrap.is-brand:hover .landing-btn-primary {
  background-color: var(--color-brand-400);
}

.landing-btn-wrap.is-brand:hover .landing-btn-overlay {
  transform: translate(-0.5rem, -0.5rem);
  background: var(--color-brand-700);
}

.landing-btn-wrap:hover .landing-btn-icon {
  transform: translate(0.5rem, 0);
}

.landing-btn-primary.landing-btn-sm .landing-btn-overlay {
  padding: 0.5625rem 1.125rem;
  font-size: 0.8125rem;
  gap: 0.5rem;
}

.landing-btn-wrap.is-brand:hover .landing-btn-primary.landing-btn-sm .landing-btn-overlay {
  transform: translate(-0.35rem, -0.35rem);
}

.landing-btn-primary.landing-btn-block {
  display: block;
  width: 100%;
}

/* Nav CTA on narrow phones: drop the arrow so the wordmark, 44px menu
   target, and button all clear a 320px viewport. */
@media (width < 40rem) {
  .landing-nav-cta .landing-btn-icon {
    display: none;
  }
  .landing-nav-cta .landing-btn-overlay {
    gap: 0;
  }
}

.landing-btn-primary.landing-btn-block .landing-btn-overlay {
  width: 100%;
}

.landing-btn-wrap-block {
  width: 100%;
}

.landing-cta-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-blueprint-text);
  border: 1px solid rgb(255 255 255 / 0.22);
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.landing-cta-outline:hover {
  border-color: rgb(255 255 255 / 0.38);
  background: rgb(255 255 255 / 0.05);
}

.landing-cta-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.landing-footer-cta {
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
  background: linear-gradient(
    118deg,
    color-mix(in srgb, var(--color-blueprint-accent) 16%, transparent) 0%,
    color-mix(in srgb, var(--color-blueprint-accent-deep) 8%, transparent) 38%,
    var(--color-blueprint-ground) 72%
  );
}

.landing-footer-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-blueprint-muted);
  margin-bottom: 1rem;
}

.landing-footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-blueprint-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.landing-footer-link:hover {
  color: var(--color-blueprint-text);
}

.landing-footer-link-icon {
  opacity: 0;
  transform: translateX(-0.15rem);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.landing-footer-link:hover .landing-footer-link-icon {
  opacity: 1;
  transform: translateX(0);
}

.landing-cta-text {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-blueprint-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.landing-cta-text:hover {
  color: var(--color-blueprint-text);
}
.landing-cta-text .cta-arrow {
  display: inline-block;
  transition: transform 150ms ease;
}
.landing-cta-text:hover .cta-arrow {
  transform: translateX(3px);
}

.landing-cta-card {
  width: 100%;
  font-size: 0.875rem;
  padding: 0.8125rem 1.25rem;
  min-height: 2.875rem;
}

.landing-cta-inline {
  font-size: 0.8125rem;
  padding: 0.5625rem 1rem;
  min-height: 2.375rem;
}

.landing-cta-note {
  font-size: 0.8125rem;
  color: var(--color-blueprint-muted);
}

/* Shared horizontal grid — nav logo and hero copy share the same left edge */
:root {
  --landing-max-w: 72rem;
  --landing-px: 1.25rem;
}
/* Widen the content column on large monitors so the page fills the screen
   instead of a fixed 72rem column marooned in the margins. Copy blocks keep
   their own inner max-widths, so line length stays readable; this mainly gives
   the hero split, nav, and section grids more room. */
@media (width >= 96rem) {
  :root {
    --landing-max-w: 80rem;
  }
}
@media (width >= 120rem) {
  :root {
    --landing-max-w: 88rem;
  }
}
@media (width >= 160rem) {
  :root {
    --landing-max-w: 96rem;
  }
}
/* Section containers share the same responsive column so the nav, hero, and
   every section align to one edge on large screens. `max-w-6xl` is a
   landing-only utility; scope to .marketing-page and match --landing-max-w
   (identical to 72rem below the first breakpoint, so laptops are unchanged). */
.marketing-page .max-w-6xl {
  max-width: var(--landing-max-w);
}
@media (width >= 40rem) {
  :root {
    --landing-px: 1.5rem;
  }
}
@media (width >= 64rem) {
  :root {
    --landing-px: 2rem;
  }
}

.landing-shell {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--landing-max-w);
  margin-inline: auto;
  padding-inline: var(--landing-px);
}

.landing-page-gutter {
  padding-left: max(var(--landing-px), calc((100vw - var(--landing-max-w)) / 2 + var(--landing-px)));
}

.landing-hero-copy-panel {
  flex: 1 1 auto;
  padding-inline: var(--landing-px);
}
@media (width >= 64rem) {
  .landing-hero-copy-panel {
    flex: 0 0 60%;
    max-width: 60%;
    padding-left: max(var(--landing-px), calc((100vw - var(--landing-max-w)) / 2 + var(--landing-px)));
    padding-right: 2.5rem;
  }
}

/* Split hero: copy left, video right — no full-bleed scrim */
.landing-hero-copy .landing-heading,
.landing-hero-copy > p {
  text-shadow: none;
}

/* Horizontal card strips — swipe on small screens, grid on lg+ */
.landing-mobile-hscroll {
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline: 1.25rem;
  scrollbar-width: thin;
}

/* Scrollbar-free horizontal rail (jump-nav pills on phones). */
.landing-hscroll {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.landing-hscroll::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-video-el {
    display: none !important;
  }
  .toggle-knob {
    transition: none;
  }
  .landing-btn-wrap.is-brand:hover .landing-btn-overlay {
    transform: none;
    background: var(--color-blueprint-text);
  }
  .landing-btn-wrap.is-brand:hover .landing-btn-primary {
    background-color: var(--color-blueprint-accent-deep);
  }
  .landing-btn-wrap:hover .landing-btn-icon,
  .landing-cta-text:hover .cta-arrow {
    transform: none;
  }
  .landing-scrolldown-key {
    animation: none !important;
  }
}

/* Scroll cue under hero CTAs stays static; persistent motion is not needed. */
.landing-scrolldown-key {
  opacity: 0.7;
}

/* Fixed chrome — single nav bar (LS pattern) */
:root {
  --landing-chrome-top: calc(3.75rem + 0.75rem);
}

/*
  scroll-margin aligns hashed section tops with sticky chrome (pill bar + navbar + air).
  (scroll-padding-top on html is omitted — combined with scroll-margin it can double the offset.)
*/
.landing-anchor-target {
  scroll-margin-top: var(--landing-chrome-top);
}

/* Short vertical viewports — tighten copy rhythm. Desktop-width ONLY:
   this targets 13" laptops, landscape tablets, and split-screen windows.
   Phones in portrait also have effective heights under 46rem once the
   browser chrome is counted, and these !important rules were crushing
   the mobile hero's breathing room.
   The heading lives inside a wrapper div, not as a direct child of the
   density container, so these use the heading's SIBLINGS (lead p, CTA
   stack, trust list) rather than child combinators that never matched. */
@media (max-height: 46rem) and (min-width: 64rem) {
  .landing-hero-copy.landing-hero-density .landing-heading {
    margin-top: clamp(0.75rem, 2vh, 1.5rem) !important;
  }
  .landing-hero-copy.landing-hero-density .landing-heading ~ p,
  .landing-hero-copy.landing-hero-density .landing-heading ~ div,
  .landing-hero-copy.landing-hero-density .landing-heading ~ ul {
    margin-top: clamp(0.5rem, 1.5vh, 1rem) !important;
  }
}

/* ── Pricing page: comparison matrix ── */
.pricing-compare-wrap {
  --pricing-feature-column-width: 12rem;

  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 1.25rem;
  border: 1px solid rgb(255 255 255 / 0.07);
  background: color-mix(in srgb, var(--color-blueprint-panel) 82%, transparent);
  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.04);
}

/* >=48rem the table fits without horizontal scroll, so the wrap stops
   being a scroll container (position:sticky can't escape one) and the
   plan-name header pins below the fixed 3.75rem nav while the long
   table scrolls. */
@media (width >= 48rem) {
  .pricing-compare-wrap {
    overflow-x: visible;
  }
  .pricing-compare {
    min-width: 0;
  }
}

/* Phones still h-scroll the table; vertical sticky can't work inside
   that scroll container, so the FEATURE column pins left instead to
   keep row context while swiping across plans. */
@media (width < 48rem) {
  .pricing-compare {
    table-layout: fixed;
  }

  .pricing-compare .pricing-compare-feature-column {
    width: var(--pricing-feature-column-width);
  }

  .pricing-compare-plan-column {
    width: 10rem;
  }

  .pricing-compare thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 7;
    background: var(--color-blueprint-overlay);
    box-shadow:
      1px 0 0 rgb(255 255 255 / 0.1),
      0 1px 0 rgb(255 255 255 / 0.1);
  }

  .pricing-compare td.feature-label,
  .pricing-compare .section-row > .pricing-section-label {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--color-blueprint-overlay);
    box-shadow: 1px 0 0 rgb(255 255 255 / 0.08);
  }
}

.pricing-compare {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.pricing-compare-feature-column {
  width: 38%;
}

.pricing-compare th,
.pricing-compare td {
  padding: 0.875rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
  vertical-align: middle;
}

/* Pins below the fixed 3.75rem nav once the wrap stops h-scrolling at
   >=48rem (see the media block above). Opaque bg: rows scroll under. */
.pricing-compare thead th {
  font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  color: var(--color-blueprint-text);
  background: var(--color-blueprint-overlay);
  position: sticky;
  top: 3.75rem;
  z-index: 5;
  box-shadow: 0 1px 0 0 rgb(255 255 255 / 0.1);
}

/* Inside the mobile horizontal scroller, the desktop nav offset creates an
   empty band above the headers. The frozen Feature header still sticks left;
   only its irrelevant vertical inset is disabled. */
@media (width < 48rem) {
  .pricing-compare thead th {
    top: auto;
  }
}

.pricing-compare tbody tr:last-child td {
  border-bottom: none;
}

.pricing-compare .section-row > * {
  padding-top: 1.25rem;
  padding-bottom: 0.5rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-blueprint-accent);
  background: transparent;
  border-bottom: none;
}

.pricing-compare .pricing-section-label {
  text-align: left;
}

.pricing-compare .feature-label {
  color: var(--color-blueprint-muted);
  font-weight: 500;
}

.pricing-compare .cell-yes {
  color: var(--color-blueprint-accent);
}

.pricing-compare .cell-no {
  color: var(--color-blueprint-faint);
}

.pricing-compare .cell-text {
  color: var(--color-blueprint-muted);
  font-size: 0.8125rem;
}

/* Shared page hero for secondary marketing pages (pricing, explore):
   identical top chrome so flipping between pages doesn't jump. */
.landing-page-hero {
  padding-top: calc(3.75rem + 2.5rem);
  padding-bottom: 2.5rem;
}

@media (width >= 64rem) {
  .landing-page-hero {
    padding-top: calc(3.75rem + 4rem);
    padding-bottom: 3.5rem;
  }
}

.pricing-included-strip {
  border-top: 1px solid rgb(255 255 255 / 0.06);
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
  background: color-mix(in srgb, var(--color-blueprint-header) 45%, transparent);
}

.pricing-included-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pricing-included-list li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-blueprint-muted);
}

.pricing-included-list li i {
  color: var(--color-blueprint-accent);
  font-size: 0.65rem;
}

.pricing-card-headline {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-blueprint-muted);
  margin-bottom: 0.75rem;
}

/* Price panels: modest min-height for toggle alignment (one visible at a time) */
.pricing-grid .price-annual,
.pricing-grid .price-monthly {
  min-height: 4.5rem;
}

@media (width >= 40rem) {
  .pricing-grid .price-annual,
  .pricing-grid .price-monthly {
    min-height: 4.75rem;
  }
}

/* Room for “Most popular” pill above Operator card */
.pricing-grid {
  padding-top: 0.75rem;
}

@media (width >= 40rem) {
  .pricing-grid {
    padding-top: 1rem;
  }
}

/* Product screenshots in the showcase rows: same luminance lift as the
   hero tablet shot, for the same reason (dark UI on a dark page). */
.landing-product-shot {
  filter: brightness(1.16) contrast(1.03);
}

/* ============================================================
   PUBLIC SITE — BLUEPRINT PRODUCT LANGUAGE

   The marketing and legal pages retain their existing information
   architecture and copy, but share the authenticated application's steel
   blue palette, square geometry, controls, and focus treatment. Scoping the
   remap to .marketing-page keeps the standalone referral surface isolated.
   ============================================================ */
.marketing-page {
  --control-radius: 2px;
  /* The steel --color-brand-* ramp is the tokens.css default now
     (2026-07 brand guide); the local override this block carried during
     the green-to-steel migration is gone. */
  --color-neutral-950: var(--color-blueprint-ground);
  --color-neutral-900: var(--color-blueprint-panel);
  --color-neutral-800: var(--color-blueprint-tile);
  --color-neutral-700: var(--color-blueprint-overlay);
  --color-neutral-600: var(--color-blueprint-faint);
  --color-neutral-500: var(--color-blueprint-muted);
  --color-neutral-400: var(--color-blueprint-muted);
  --color-neutral-300: var(--color-blueprint-text);
  --color-neutral-200: var(--color-blueprint-text);
  --color-neutral-100: var(--color-blueprint-text);
  --color-cream: var(--color-blueprint-text);
  --color-cream-dim: var(--color-blueprint-muted);
  --marketing-ground: var(--color-blueprint-ground);
  --marketing-panel: var(--color-blueprint-panel);
  --marketing-tile: var(--color-blueprint-tile);
  --marketing-overlay: var(--color-blueprint-overlay);
  --marketing-header: var(--color-blueprint-header);
  --marketing-text: var(--color-blueprint-text);
  --marketing-muted: var(--color-blueprint-muted);
  --marketing-accent: var(--color-blueprint-accent);
  --marketing-accent-hover: var(--color-brand-700);
  --marketing-border: var(--color-blueprint-border);
  --marketing-divider: var(--color-blueprint-divider);

  color: var(--marketing-text);
  background: var(--marketing-ground);
  color-scheme: dark;
}

.marketing-page :where(table, .pricing-grid) {
  font-variant-numeric: tabular-nums;
}

.marketing-page :where([class*="rounded-"]) {
  border-radius: 0 !important;
}

.marketing-page :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--marketing-accent) !important;
  outline-offset: 2px;
}

.marketing-page > nav[aria-label="Primary"] {
  border-bottom-color: var(--marketing-divider) !important;
  background: color-mix(in srgb, var(--marketing-header) 96%, transparent) !important;
  box-shadow: none !important;
}

.marketing-page > nav[aria-label="Primary"] a[href="/explore"],
.marketing-page > nav[aria-label="Primary"] a[href="/pricing"],
.marketing-page > nav[aria-label="Primary"] a[href="/login"]:not(.landing-btn-primary) {
  border-radius: var(--control-radius) !important;
}

.marketing-page > nav[aria-label="Primary"] a[aria-current="page"],
.marketing-page > nav[aria-label="Primary"] a[href="/explore"]:hover,
.marketing-page > nav[aria-label="Primary"] a[href="/pricing"]:hover,
.marketing-page > nav[aria-label="Primary"] a[href="/login"]:not(.landing-btn-primary):hover {
  color: var(--marketing-text);
  background: var(--marketing-tile);
}

.marketing-page .landing-hero-grid {
  background-image:
    radial-gradient(
      ellipse 68% 52% at 12% 4%,
      color-mix(in srgb, var(--marketing-accent) 16%, transparent),
      transparent 55%
    ),
    linear-gradient(to right, rgb(255 255 255 / 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.04) 1px, transparent 1px);
}

.marketing-page .landing-page-hero-grid {
  background-image:
    radial-gradient(
      ellipse 52% 130% at 10% -20%,
      color-mix(in srgb, var(--marketing-accent) 15%, transparent),
      transparent 62%
    ),
    linear-gradient(to right, rgb(255 255 255 / 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.04) 1px, transparent 1px);
}

.referral-hero-wash {
  background: radial-gradient(
    ellipse 80% 55% at 50% -5%,
    color-mix(in srgb, var(--color-blueprint-accent) 7%, transparent),
    transparent 55%
  );
}

.referral-features-wash {
  background: radial-gradient(
    ellipse 90% 50% at 70% -10%,
    color-mix(in srgb, var(--color-blueprint-accent) 7%, transparent),
    transparent 55%
  );
}

/* Public-page cadence: use the same blueprint palette as the product while
   making each major chapter legible at a glance. These selectors only affect
   direct page bands, so cards retain their own quieter surface hierarchy. */
.marketing-page #site-main > :is(section, header)[class*="bg-neutral-950"] {
  background-color: var(--marketing-ground) !important;
}

.marketing-page #site-main > section[class*="bg-neutral-950/95"] {
  background-color: var(--marketing-header) !important;
}

.marketing-page #site-main > section[class*="bg-neutral-900/"] {
  background-color: var(--marketing-tile) !important;
}

.marketing-page #site-main > :is(section, header) {
  border-color: var(--marketing-border) !important;
}

.marketing-page .landing-page-hero {
  border-bottom: 1px solid var(--marketing-border);
  background-color: var(--marketing-ground);
}

.marketing-page .pricing-included-strip {
  background-color: var(--marketing-header);
}

.marketing-page .pricing-faq-section {
  background-color: var(--marketing-panel) !important;
}

.marketing-page .product-tour-chapter {
  border-color: var(--marketing-divider) !important;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--marketing-accent) 10%, transparent),
      transparent 72%
    ),
    var(--marketing-panel);
}

.marketing-page .landing-hero-bg {
  background-color: var(--marketing-ground);
  background-image:
    radial-gradient(
      ellipse 70% 60% at 15% 40%,
      color-mix(in srgb, var(--marketing-accent) 11%, transparent),
      transparent 55%
    ),
    radial-gradient(
      ellipse 55% 45% at 85% 25%,
      color-mix(in srgb, var(--color-blueprint-accent-deep) 9%, transparent),
      transparent 50%
    ),
    radial-gradient(
      ellipse 50% 40% at 50% 100%,
      color-mix(in srgb, var(--marketing-accent) 5%, transparent),
      transparent 45%
    );
}

.marketing-page .hero-device-stage::before {
  background: radial-gradient(
    58% 54% at 58% 40%,
    color-mix(in srgb, var(--marketing-accent) 22%, transparent),
    transparent 70%
  );
}

.marketing-page .hero-tablet {
  background: linear-gradient(
    152deg,
    var(--color-brand-400) 0%,
    var(--color-blueprint-overlay) 34%,
    var(--color-blueprint-ground) 68%,
    var(--color-brand-300) 100%
  );
}

.marketing-page .hero-tablet-screen {
  background: var(--marketing-ground);
}

.marketing-page .hero-tablet-shot,
.marketing-page .landing-product-shot {
  filter: brightness(1.04) contrast(1.02);
}

.marketing-page .surface-panel,
.marketing-page .surface-panel-soft,
.marketing-page main .rounded-xl.border,
.marketing-page .pricing-grid article {
  border-color: var(--marketing-border) !important;
  background-color: var(--marketing-panel) !important;
  /* Same drafting-mark L brackets as the app panels (.app-panel), shared
     via --panel-corner-* in tokens.css. Was a "+" cross that drifted from
     the app's brackets; now they can't diverge again. */
  background-image:
    var(--panel-corner-tl), var(--panel-corner-tr),
    var(--panel-corner-bl), var(--panel-corner-br);
  background-position: left 0 top 0, right 0 top 0, left 0 bottom 0, right 0 bottom 0;
  background-repeat: no-repeat;
  box-shadow: none !important;
}

.marketing-page .pricing-grid article.order-first {
  border-top: 3px solid var(--marketing-accent) !important;
}

.marketing-page .pricing-grid article > div.bg-neutral-950 {
  background-color: transparent !important;
}

.marketing-page .landing-btn-wrap {
  display: inline-flex;
}

.marketing-page .landing-btn-primary {
  min-height: 2.75rem;
  color: var(--marketing-ground);
  border: 1px solid color-mix(in srgb, var(--marketing-accent) 72%, transparent);
  border-radius: var(--control-radius);
  background: var(--color-brand-400);
  box-shadow: none;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.marketing-page .landing-btn-overlay,
.marketing-page .landing-btn-primary.landing-btn-sm .landing-btn-overlay {
  min-height: 2.625rem;
  padding: 0.75rem 1.25rem;
  /* Nest inside the primary's 1px border: the face radius must equal the
     frame's INNER radius (outer control-radius minus the 1px border), or the
     rounder face corner exposes the darker base + page at each corner. */
  border-radius: calc(var(--control-radius) - 1px);
  background: var(--marketing-accent);
  transition:
    transform 150ms ease,
    background-color 150ms ease;
  will-change: transform;
}

.marketing-page .landing-btn-primary.landing-btn-sm .landing-btn-overlay {
  padding-inline: 1rem;
  font-size: 0.8125rem;
}

/* The primary action in the fixed nav should support the hierarchy, not
   compete with the hero. Keep the full-size treatment everywhere else. */
.marketing-page .landing-nav-cta .landing-btn-primary {
  min-height: 2.25rem;
}

.marketing-page .landing-nav-cta .landing-btn-primary.landing-btn-sm .landing-btn-overlay {
  min-height: 2.125rem;
  padding: 0.5rem 0.875rem;
  gap: 0.375rem;
  font-size: 0.75rem;
}

.marketing-page .landing-btn-wrap.is-brand:hover .landing-btn-primary {
  border-color: var(--color-brand-500);
  background: var(--color-brand-500);
}

.marketing-page .landing-btn-wrap.is-brand:hover .landing-btn-overlay,
.marketing-page .landing-btn-wrap.is-brand:hover .landing-btn-primary.landing-btn-sm .landing-btn-overlay {
  background: var(--marketing-accent-hover);
}

.marketing-page .landing-btn-wrap:hover .landing-btn-icon {
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .marketing-page .landing-btn-wrap.is-brand:hover .landing-btn-overlay {
    transform: translate(-0.4rem, -0.4rem);
  }

  .marketing-page .landing-btn-wrap.is-brand:hover .landing-btn-primary.landing-btn-sm .landing-btn-overlay {
    transform: translate(-0.3rem, -0.3rem);
  }

  .marketing-page .landing-btn-wrap:hover .landing-btn-icon {
    transform: translateX(0.4rem);
  }

  .marketing-page .landing-btn-wrap.is-brand:active .landing-btn-overlay,
  .marketing-page .landing-btn-wrap.is-brand:active .landing-btn-primary.landing-btn-sm .landing-btn-overlay {
    transform: translate(-0.12rem, -0.12rem);
    transition-duration: 150ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marketing-page .landing-btn-primary,
  .marketing-page .landing-btn-overlay,
  .marketing-page .landing-btn-primary.landing-btn-sm .landing-btn-overlay,
  .marketing-page .landing-btn-icon {
    transition: none;
  }

  .marketing-page .landing-btn-wrap.is-brand:hover .landing-btn-overlay,
  .marketing-page .landing-btn-wrap.is-brand:hover .landing-btn-primary.landing-btn-sm .landing-btn-overlay,
  .marketing-page .landing-btn-wrap:hover .landing-btn-icon {
    transform: none;
  }
}

.marketing-page .landing-cta-outline {
  min-height: 2.75rem;
  border-radius: var(--control-radius);
  border-color: var(--marketing-border);
  color: var(--marketing-text);
  background: var(--marketing-panel);
}

.marketing-page .landing-cta-outline:hover {
  border-color: var(--marketing-accent);
  color: var(--marketing-text);
  background: var(--marketing-tile);
}

.marketing-page .landing-cta-text:hover {
  color: var(--marketing-accent-hover);
}

.marketing-page .toggle-track {
  border-color: var(--marketing-border) !important;
  background: var(--marketing-tile) !important;
  box-shadow: none !important;
}

.marketing-page .toggle-knob {
  background: var(--marketing-accent) !important;
  box-shadow: none !important;
}

.marketing-page #pricing-toggle:focus-visible + .toggle-row .toggle-track {
  box-shadow: 0 0 0 2px var(--marketing-ground), 0 0 0 4px var(--marketing-accent) !important;
}

.marketing-page .pricing-compare-wrap {
  border-radius: 0;
  border-color: var(--marketing-border);
  background: var(--marketing-panel);
  box-shadow: none;
}

.marketing-page .pricing-compare thead th,
.marketing-page .pricing-compare thead th:first-child,
.marketing-page .pricing-compare td.feature-label,
.marketing-page .pricing-compare .pricing-section-label {
  background: var(--marketing-overlay);
}

.marketing-page .pricing-compare .section-row > *,
.marketing-page .pricing-compare .cell-yes,
.marketing-page .pricing-included-list li i {
  color: var(--marketing-accent);
}

.marketing-page .pricing-included-strip {
  border-color: var(--marketing-divider);
  background: var(--marketing-header);
}

.marketing-page .landing-footer-cta {
  border-color: var(--marketing-divider);
  background: linear-gradient(
    118deg,
    color-mix(in srgb, var(--marketing-accent) 16%, transparent) 0%,
    color-mix(in srgb, var(--color-brand-400) 10%, transparent) 38%,
    var(--marketing-ground) 72%
  );
}

.marketing-page > footer {
  border-color: var(--marketing-divider) !important;
  background: var(--marketing-ground) !important;
}

.marketing-page .legal-prose .intro {
  border-left-color: var(--marketing-accent);
}

.marketing-page .legal-prose h2,
.marketing-page .legal-prose a {
  color: var(--marketing-accent-hover);
}

.marketing-page .legal-prose h2 {
  padding-top: 2rem;
  border-top: 1px solid var(--marketing-divider);
}

.marketing-page .legal-prose a {
  text-decoration-color: color-mix(in srgb, var(--marketing-accent) 55%, transparent);
}

.marketing-page .legal-prose a:hover {
  color: var(--color-brand-900);
}

.marketing-page .legal-prose .warning-box {
  border-color: color-mix(in srgb, var(--marketing-accent) 34%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, var(--marketing-accent) 8%, transparent);
}