/* Brand Narratives AI landing page.
   Everything is scoped under body.landing because the internal tool's layout
   uses stylesheet_link_tag :app, which globs every file in this directory. */

html:has(body.landing) {
  scroll-behavior: smooth;
}

body.landing {
  --bg: #FFFFFF;
  --surface: #F8F9FA;
  --brand: #2DB7CB;
  --brand-soft: #1A2F60;
  --brand-glow: rgba(45, 183, 203, 0.15);
  /* Text-safe teal. The brand teal is only ~2.3:1 on white — it fails WCAG AA
     at every size, so it's for fills, borders and glows only. Anything a user
     has to READ (links, eyebrows, figures) uses --brand-ink: 5.0:1 on white. */
  --brand-ink: #0E7A8C;
  --ink: #0B1B33;
  --text: #111111;
  --text-muted: #555555;
  --border: #E5E7EB;
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans: "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Film grain — felt, not seen */
body.landing::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 9999;
}

body.landing a {
  color: var(--brand-ink);
  text-decoration: none;
}

body.landing a:hover {
  color: var(--brand-soft);
}

/* ── Focus & skip link ─────────────────────────────────── */
/* Keyboard users need to see where they are. Never remove this outline. */

body.landing a:focus-visible,
body.landing button:focus-visible,
body.landing summary:focus-visible {
  outline: 3px solid var(--brand-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

body.landing .skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 10000;
  background: var(--ink);
  color: #FFFFFF;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 0 0 8px 8px;
  transition: top 0.15s ease;
}

body.landing .skip-link:focus {
  top: 0;
  color: #FFFFFF;
}

/* Available to screen readers, invisible on screen — for headings that are
   structurally required but visually redundant. */
body.landing .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Layout primitives ─────────────────────────────────── */

body.landing .section {
  padding: 120px 24px;
}

body.landing .container {
  max-width: 800px;
  margin: 0 auto;
}

body.landing .container-wide {
  max-width: 960px;
  margin: 0 auto;
}

/* ── Typography ────────────────────────────────────────── */

body.landing h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 60px;
  line-height: 1.1;
  color: var(--text);
  margin: 0 0 16px;
}

body.landing h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 40px;
}

body.landing h2.centered {
  text-align: center;
}

body.landing p {
  margin: 0 0 1em;
}

/* ── Site nav ──────────────────────────────────────────── */

body.landing .site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 24px;
}

body.landing .site-nav-brand {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--brand-soft);
}

body.landing .site-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

body.landing .site-nav-links a {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

body.landing .site-nav-links a:hover {
  color: var(--brand-ink);
}

body.landing .site-nav-cta {
  font-size: 14px !important;
  padding: 10px 22px !important;
  color: #FFFFFF !important;
}

@media (max-width: 700px) {
  body.landing .site-nav {
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
  }

  body.landing .site-nav-links {
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ── CTA button ────────────────────────────────────────── */

/* The gradient starts at --brand-ink, not --brand: white on the bright teal is
   2.3:1 and unreadable. Ink -> navy keeps white text above 5:1 across the whole
   sweep while looking identical in spirit. */
body.landing .cta-button {
  display: inline-block;
  background: linear-gradient(135deg, var(--brand-ink) 0%, var(--brand-soft) 100%);
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 16px 48px;
  border-radius: 6px;
  box-shadow: 0 4px 20px -6px rgba(11, 27, 51, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

body.landing .cta-button:hover {
  background: linear-gradient(135deg, var(--brand-soft) 0%, var(--brand-ink) 100%);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -8px rgba(11, 27, 51, 0.55);
}

body.landing .cta-button-lg {
  font-size: 19px;
  padding: 20px 56px;
}

/* Secondary CTA — same shape, quieter voice, so the featured tier stays the
   single most prominent thing in the pricing grid (Von Restorff). */
body.landing .cta-button-ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--border);
  box-shadow: none;
}

body.landing .cta-button-ghost:hover {
  background: transparent;
  color: var(--brand-soft);
  border-color: var(--brand-soft);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  body.landing .cta-button,
  body.landing .cta-button:hover {
    transform: none;
    transition: none;
  }
}

/* ── Hero ──────────────────────────────────────────────── */

body.landing .hero {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  position: relative;
}

body.landing .hero::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(700px, 90vw);
  height: 420px;
  background: radial-gradient(circle, var(--brand-glow) 0%, transparent 70%);
  pointer-events: none;
}

body.landing .hero-content {
  position: relative;
  /* Matches .site-nav's max-width so the headline spans the same left/right
     edges as the logo and the "Make my video" nav button above it. */
  max-width: 1100px;
}

body.landing .hero-sub {
  font-size: 20px;
  color: var(--text-muted);
  max-width: 600px;
  margin: 12px auto 24px;
}

body.landing .hero-note {
  font-size: 14px;
  color: var(--text-muted);
  margin: 12px 0 0;
}

body.landing .hero-examples {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
  margin: 28px 0 0;
}

body.landing .hero-example {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

body.landing .hero-example-thumb {
  width: 340px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, var(--brand-glow), var(--surface));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, transform 0.15s ease;
  overflow: hidden;
}

body.landing .hero-example-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

body.landing .hero-example:hover .hero-example-thumb {
  border-color: var(--brand);
  transform: translateY(-2px);
}

body.landing .hero-example-play {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--brand-ink);
  margin-left: 3px;
}

body.landing .hero-example-label {
  font-size: 12px;
  color: var(--text-muted);
}

body.landing .hero-social-proof {
  font-size: 13px;
  color: var(--text-muted);
  margin: 10px 0 0;
  opacity: 0.75;
}

/* ── Video embed ───────────────────────────────────────── */

body.landing .section-video {
  padding-top: 0;
}

body.landing .video-caption {
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 16px;
}

body.landing .video-frame {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 80px var(--brand-glow);
  background: var(--surface);
}

body.landing .video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── The problem ───────────────────────────────────────── */

body.landing .problem {
  border-left: 3px solid var(--brand);
  padding-left: 32px;
}

body.landing .problem p {
  font-size: 21px;
  line-height: 1.7;
  color: var(--text-muted);
}

body.landing .problem .problem-punchline {
  color: var(--text);
  font-weight: 600;
  margin-bottom: 0;
}

/* ── Steps ─────────────────────────────────────────────── */

body.landing .steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

body.landing .step {
  padding: 0 32px;
}

body.landing .step:first-child {
  padding-left: 0;
}

body.landing .step:last-child {
  padding-right: 0;
}

body.landing .step + .step {
  border-left: 1px solid var(--border);
}

body.landing .step-number {
  display: block;
  font-family: var(--serif);
  font-size: 48px;
  line-height: 1;
  color: var(--brand-ink);
  margin-bottom: 16px;
}

body.landing .step p {
  color: var(--text-muted);
  margin: 0;
}

/* ── Prose (under the hood) ────────────────────────────── */

body.landing .prose p {
  color: var(--text-muted);
}

body.landing .prose p:last-child {
  color: var(--text);
  margin-bottom: 0;
}

/* ── Example gallery ───────────────────────────────────── */

body.landing .gallery-upcoming {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}

body.landing .gallery-card {
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

body.landing .gallery-name {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--text);
}

body.landing .gallery-soon {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-ink);
}

/* ── Stat row ──────────────────────────────────────────── */

body.landing .stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 32px;
}

body.landing .stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px 20px;
  text-align: center;
}

body.landing .stat-card .icon {
  color: var(--brand-ink);
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
}

body.landing .stat-number {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.1;
  color: var(--brand-ink);
  margin: 0 0 6px;
}

body.landing .stat-caption {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

/* ── Benefits grid ─────────────────────────────────────── */

body.landing .benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

body.landing .benefit-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px 24px;
}

body.landing .benefit-icon {
  color: var(--brand-ink);
  margin-bottom: 14px;
}

body.landing .benefit-icon .icon {
  width: 32px;
  height: 32px;
}

body.landing .benefit-card h3 {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 8px;
}

body.landing .benefit-card p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

/* Inline icon in pricing feature list */
body.landing .pricing-features li .icon {
  color: var(--brand-ink);
  width: 20px;
  height: 20px;
  vertical-align: -4px;
  margin-right: 8px;
}

/* ── Who this is for ───────────────────────────────────── */

body.landing .audience-block + .audience-block {
  margin-top: 56px;
}

body.landing .audience-block h3 {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-ink);
  margin: 0 0 12px;
}

body.landing .audience-block p {
  font-size: 20px;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}

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

body.landing .section-pricing {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}

body.landing .price {
  font-family: var(--serif);
  font-size: 80px;
  line-height: 1;
  color: var(--brand-ink);
  margin: 0 0 40px;
}

body.landing .pricing-included {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 20px;
}

body.landing .pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
}

body.landing .pricing-features li {
  color: var(--text-muted);
  padding: 6px 0;
}

body.landing .pricing-note {
  font-size: 14px;
  color: var(--text-muted);
  margin: 20px 0 0;
}

/* ── FAQ ───────────────────────────────────────────────── */

body.landing .faq details {
  border-bottom: 1px solid var(--border);
}

body.landing .faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

body.landing .faq summary::-webkit-details-marker {
  display: none;
}

body.landing .faq summary::after {
  content: "+";
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: var(--brand-ink);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

body.landing .faq details[open] summary::after {
  transform: rotate(45deg);
}

body.landing .faq details p {
  color: var(--text-muted);
  margin: 0 0 20px;
  padding-right: 40px;
}

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

body.landing .footer {
  text-align: center;
  padding: 80px 24px;
  border-top: 1px solid var(--border);
}

body.landing .footer p {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 8px;
}

body.landing .footer-brand {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--text);
}

body.landing .footer-copy {
  margin-top: 24px;
}

/* ── Hero eyebrow ──────────────────────────────────────── */

body.landing .hero-eyebrow {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brand-ink);
  margin: 0 0 20px;
}

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

body.landing .price-unit {
  font-size: 32px;
  color: var(--text-muted);
}

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

body.landing .comparison-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.landing .comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  min-width: 640px;
}

body.landing .comparison-table th,
body.landing .comparison-table td {
  padding: 16px 20px;
  text-align: left;
  border: 1px solid var(--border);
  color: var(--text-muted);
  vertical-align: top;
}

body.landing .comparison-table thead th {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  color: var(--text);
}

body.landing .comparison-table tbody th {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

/* Highlight the Brand Narratives AI column */
body.landing .comparison-table .is-us {
  background: var(--brand-glow);
  color: var(--text);
  border-color: var(--brand);
}

body.landing .comparison-table thead .is-us {
  color: var(--brand-ink);
}

body.landing .comparison-pullquote {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.4;
  color: var(--text);
  text-align: center;
  max-width: 720px;
  margin: 48px auto 0;
}

/* ── Reveal on scroll ──────────────────────────────────── */
/* Hidden state only applies once the Stimulus controller connects
   (.reveal-ready), so content stays visible without JS. */

@media (prefers-reduced-motion: no-preference) {
  body.landing .reveal-ready {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  body.landing .reveal-ready.revealed {
    opacity: 1;
    transform: none;
  }
}

/* ── Mobile ────────────────────────────────────────────── */

@media (max-width: 768px) {
  body.landing {
    font-size: 17px;
  }

  body.landing .section {
    padding: 80px 24px;
  }

  body.landing h1 {
    font-size: 38px;
  }

  body.landing h1 br {
    display: none;
  }

  body.landing h2 {
    font-size: 30px;
    margin-bottom: 32px;
  }

  body.landing .hero-sub {
    font-size: 18px;
  }

  body.landing .hero-examples {
    gap: 20px;
    margin-top: 20px;
  }

  body.landing .hero-example-thumb {
    width: 220px;
  }

  body.landing .cta-button {
    display: block;
    text-align: center;
    font-size: 16px;
    padding: 16px 24px;
  }

  body.landing .problem {
    padding-left: 20px;
  }

  body.landing .problem p {
    font-size: 19px;
  }

  body.landing .steps {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  body.landing .step,
  body.landing .step:first-child,
  body.landing .step:last-child {
    padding: 0;
  }

  body.landing .step + .step {
    border-left: none;
  }

  body.landing .gallery-upcoming {
    grid-template-columns: 1fr;
  }

  body.landing .stat-row {
    grid-template-columns: repeat(2, 1fr);
  }

  body.landing .benefits {
    grid-template-columns: 1fr;
  }

  body.landing .audience-block p {
    font-size: 18px;
  }

  body.landing .price {
    font-size: 64px;
  }

  body.landing .price-unit {
    font-size: 24px;
  }

  body.landing .comparison-pullquote {
    font-size: 21px;
  }
}

/* ── Blog ──────────────────────────────────────────────── */

body.landing .blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px;
  margin-top: 40px;
}

body.landing .blog-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  text-decoration: none;
}

body.landing .blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.04);
  border-color: rgba(45, 183, 203, 0.3);
}

body.landing .blog-card-date {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
  margin-bottom: 12px;
}

body.landing .blog-card-title {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.25;
  color: var(--text);
  margin: 0 0 12px;
}

body.landing .blog-card-excerpt {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

body.landing .blog-article {
  max-width: 720px;
  margin: 0 auto;
  font-size: 21px;
  line-height: 1.75;
  color: var(--text-muted);
}

body.landing .blog-article h2 {
  font-family: var(--serif);
  font-size: 36px;
  color: var(--text);
  margin: 64px 0 24px;
  font-weight: 400;
}

body.landing .blog-article h3 {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--text);
  margin: 48px 0 20px;
  font-weight: 400;
}

body.landing .blog-article p {
  margin-bottom: 24px;
}

body.landing .blog-article a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 4px;
}

body.landing .blog-article a:hover {
  color: var(--brand-soft);
}

body.landing .blog-article ul,
body.landing .blog-article ol {
  margin-bottom: 32px;
  padding-left: 24px;
}

body.landing .blog-article li {
  margin-bottom: 12px;
}

body.landing .blog-article strong {
  color: var(--text);
  font-weight: 600;
}

body.landing .blog-header {
  text-align: center;
  padding: 80px 24px 40px;
  max-width: 800px;
  margin: 0 auto;
}

body.landing .blog-header-date {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
  margin-bottom: 24px;
  display: block;
}

body.landing .blog-header h1 {
  font-size: 52px;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  body.landing .blog-header h1 {
    font-size: 36px;
  }
  body.landing .blog-article {
    font-size: 19px;
  }
}

/* ══════════════════════════════════════════════════════════
   HOMEPAGE
   Section order mirrors the page: hero -> authority -> problem
   -> steps -> proof -> pricing -> benefits -> faq -> final.
   ══════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────── */

body.landing .hero-logo {
  margin-bottom: 16px;
}

/* The one word the whole pitch turns on. Serif italic + ink teal makes it the
   single visual anchor on the page (Von Restorff), without a second color. */
body.landing .hero h1 em {
  font-style: italic;
  color: var(--brand-ink);
}

body.landing .hero h1 {
  font-size: clamp(38px, 5.6vw, 64px);
  letter-spacing: -0.015em;
  /* No max-width of its own — fills .hero-content, so it spans the same
     width as the nav (logo to CTA) instead of sitting narrow and centered.
     Plain greedy wrap (not `balance`) so the first line actually runs out
     to that width instead of splitting into two evenly-short lines. */
  margin-inline: auto;
  text-wrap: wrap;
}

body.landing .hero-sub {
  max-width: 700px;
}

/* ── Trusted-by logo strip ─────────────────────────────── */
/* Social proof at the exact decision point: subtle enough not to steal focus
   from the hero CTA, prominent enough to register credibility.
   Grayscale → color on hover is the industry standard for logo strips because
   it reads as "real companies" without clashing with the page palette. */

body.landing .section-trusted {
  padding: 48px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

body.landing .trusted-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 28px;
  opacity: 0.7;
}

body.landing .trusted-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
}

body.landing .trusted-logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.3s ease, filter 0.4s ease, transform 0.3s ease;
  filter: grayscale(1) brightness(0.45);
  opacity: 0.55;
}

body.landing .trusted-logo-link:hover {
  filter: grayscale(0) brightness(1);
  opacity: 1;
  transform: scale(1.06);
}

body.landing .trusted-logo {
  height: 44px;
  width: auto;
  object-fit: contain;
}

/* When we only have an icon mark (no wordmark baked in), pair it with a text
   label so it matches the visual weight of full wordmarks like SMA's. */
body.landing .trusted-logo--icon {
  height: 36px;
}

body.landing .trusted-logo-name {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  opacity: 0.7;
}

/* The SMA logo is white-on-transparent; invert it so it reads as dark on the
   light background. Grayscale + dim keeps it cohesive with the Hadaa logo
   in its resting state. On hover, tint to the brand teal. */
body.landing .trusted-logo-link:nth-child(2) {
  filter: invert(1) grayscale(1) brightness(0.45);
}

body.landing .trusted-logo-link:nth-child(2):hover {
  filter: invert(1) grayscale(0) brightness(0.5) sepia(1) hue-rotate(140deg) saturate(2);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  body.landing .trusted-logo-link,
  body.landing .trusted-logo-link:hover {
    transition: none;
    transform: none;
  }
}

@media (max-width: 768px) {
  body.landing .section-trusted {
    padding: 36px 24px;
  }

  body.landing .trusted-logos {
    gap: 40px;
  }

  body.landing .trusted-logo {
    height: 36px;
  }

  body.landing .trusted-logo--icon {
    height: 28px;
  }

  body.landing .trusted-logo-name {
    font-size: 18px;
  }
}

/* ── Authority strip ───────────────────────────────────── */
/* Dark band directly under the hero: the credibility beat, landing at the moment
   the visitor is deciding whether to keep reading. */

body.landing .section-authority {
  background: var(--ink);
  color: #FFFFFF;
  padding-block: 88px;
}

body.landing .section-authority .authority-lede {
  font-family: var(--serif);
  font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.5;
  color: #FFFFFF;
  text-align: center;
  max-width: 40ch;
  margin: 0 auto 56px;
}

body.landing .authority-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 0;
}

body.landing .authority-stat {
  text-align: center;
  padding: 0 16px;
}

body.landing .authority-stat + .authority-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

/* The <dt> is the label, the <dd> is the figure — so the figure reads huge but
   the accessible name still says what it measures. */
body.landing .authority-stat dt {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* 76% white on #0B1B33 -> ~9:1. */
  color: rgba(255, 255, 255, 0.76);
  margin-bottom: 10px;
}

body.landing .authority-stat dd {
  margin: 0;
}

body.landing .authority-stat .authority-figure {
  display: block;
  font-family: var(--serif);
  font-size: clamp(38px, 4.6vw, 54px);
  line-height: 1;
  /* Bright teal is fine here: on the dark navy it hits 6.4:1. */
  color: var(--brand);
  margin-bottom: 10px;
}

body.landing .authority-stat .authority-desc {
  display: block;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.76);
}

/* ── Steps ─────────────────────────────────────────────── */

body.landing .section-steps {
  background: var(--surface);
  border-block: 1px solid var(--border);
}

/* .steps is an <ol> now — the order is meaningful, so it's a list in the markup
   and the numbers stay decorative in the CSS. */
body.landing ol.steps {
  list-style: none;
  padding: 0;
  margin: 0;
}

body.landing .step h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.3;
  color: var(--text);
  margin: 0 0 8px;
}

body.landing .steps-note {
  text-align: center;
  font-family: var(--serif);
  font-size: 24px;
  color: var(--text);
  margin: 56px 0 0;
}

/* ── Conversion proof ──────────────────────────────────── */

body.landing .section-proof {
  text-align: center;
}

body.landing .proof-figure {
  margin: 0 0 8px;
  line-height: 1;
}

body.landing .proof-figure span {
  font-family: var(--serif);
  font-size: clamp(72px, 11vw, 132px);
  line-height: 1;
  color: var(--brand-ink);
  /* Tabular-ish optical centering for a figure this large. */
  letter-spacing: -0.02em;
}

body.landing .proof-caption {
  font-size: 21px;
  line-height: 1.6;
  color: var(--text);
  max-width: 46ch;
  margin: 0 auto 20px;
}

body.landing .proof-caption em {
  font-style: italic;
  color: var(--brand-ink);
  font-weight: 600;
}

body.landing .proof-sub {
  color: var(--text-muted);
  max-width: 46ch;
  margin: 0 auto;
}

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

body.landing .pricing-lede {
  text-align: center;
  color: var(--text-muted);
  max-width: 46ch;
  margin: -20px auto 48px;
}

body.landing ul.pricing-tiers {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

body.landing .tier {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 36px 28px;
  text-align: left;
  position: relative;
}

/* The middle tier is the target. It's lifted, ringed, and the only one with a
   solid CTA — so the eye lands on it first and the flanking tiers read as the
   compare-against (anchoring + decoy). */
body.landing .tier-featured {
  border-color: var(--brand-ink);
  box-shadow: 0 24px 60px -28px rgba(11, 27, 51, 0.4);
  transform: translateY(-12px);
}

body.landing .tier-badge {
  position: absolute;
  top: -13px;
  left: 28px;
  background: var(--brand-ink);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 14px;
  border-radius: 999px;
  margin: 0;
}

body.landing .tier-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  color: var(--text);
  margin: 0 0 12px;
}

body.landing .tier-price {
  font-family: var(--serif);
  font-size: 52px;
  line-height: 1;
  color: var(--text);
  margin: 0 0 18px;
}

body.landing .tier-unit {
  display: block;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-ink);
  margin-top: 10px;
}

body.landing .tier-discount {
  display: inline-block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background-color: #10b981;
  padding: 4px 10px;
  border-radius: 20px;
  margin-top: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

body.landing .tier-blurb {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-muted);
  /* Pushes every CTA to the same baseline regardless of blurb length. */
  flex: 1 0 auto;
  margin: 0 0 28px;
}

body.landing .tier-cta {
  display: block;
  text-align: center;
  font-size: 15px;
  padding: 15px 20px;
}

body.landing .hero-note.centered {
  text-align: center;
  margin-top: 40px;
}

@media (prefers-reduced-motion: reduce) {
  body.landing .tier-featured {
    transform: none;
  }
}

/* ── Benefits ──────────────────────────────────────────── */

body.landing ul.benefits {
  list-style: none;
  padding: 0;
}

/* ── Final CTA ─────────────────────────────────────────── */
/* Peak-end: the last thing they see is the same promise as the first, with the
   same button. Dark band bookends the authority strip. */

body.landing .section-final {
  background: var(--ink);
  text-align: center;
  border: 0;
}

body.landing .section-final h2 {
  color: #FFFFFF;
  font-size: clamp(30px, 4vw, 44px);
  margin-bottom: 20px;
}

body.landing .final-sub {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.8);
  max-width: 46ch;
  margin: 0 auto 40px;
}

body.landing .section-final .hero-note {
  color: rgba(255, 255, 255, 0.66);
}

/* On navy, the ink->navy gradient would vanish. Invert to a solid light button
   so the primary action is still the brightest thing in the band. */
body.landing .section-final .cta-button {
  background: #FFFFFF;
  color: var(--ink);
  box-shadow: 0 10px 40px -12px rgba(45, 183, 203, 0.5);
}

body.landing .section-final .cta-button:hover {
  background: var(--brand);
  color: var(--ink);
}

body.landing .section-final a:focus-visible {
  outline-color: #FFFFFF;
}

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

body.landing .footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}

body.landing .footer-col {
  flex: 1;
  min-width: 200px;
}

body.landing .footer-tagline {
  max-width: 32ch;
}

body.landing .footer-heading {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
  margin: 0 0 16px;
}

body.landing .footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

body.landing .footer-col li + li {
  margin-top: 10px;
}

body.landing .footer-col a {
  font-size: 15px;
  color: var(--text-muted);
}

body.landing .footer-col a:hover {
  color: var(--brand-ink);
}

/* ── Homepage mobile ───────────────────────────────────── */

@media (max-width: 768px) {
  body.landing .authority-stats {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  body.landing .authority-stat + .authority-stat {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 40px;
  }

  body.landing ul.pricing-tiers {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Stacked, a lifted card just looks misaligned — the badge carries the
     emphasis on its own. */
  body.landing .tier-featured {
    transform: none;
  }

  body.landing .steps-note {
    font-size: 20px;
  }

  body.landing .proof-caption {
    font-size: 19px;
  }
}

/* The live product mock in the SaaS Showcases hero. The mock itself is styled in
   mocks.css (self-contained, because it renders inside the app too) — this only
   places it. */
body.landing .hero-mock {
  max-width: 640px;
  margin: 2.5rem auto;
}

/* ── Public watch page (/v/:token) ──────────────────────
   The page a stranger lands on from a shared link. Reuses the landing tokens so
   a shared video feels like the same company as the site it links back to, but
   the layout is deliberately barer than any marketing page: one video, one
   title, one way forward. */

body.landing .watch {
  max-width: 1000px;
  margin: 0 auto;
  padding: 32px 24px 8px;
}

/* Letterboxed on a dark ground so the video defines its own edges regardless of
   what aspect ratio came out of the renderer — 16:9 explainers and 9:16 ads both
   sit correctly without the page reflowing around them. */
body.landing .watch-stage {
  background: var(--ink);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px -20px rgba(11, 27, 51, 0.45);
  line-height: 0;
}

body.landing .watch-player {
  width: 100%;
  max-height: 78vh;
  display: block;
  /* `contain`, never `cover`: cropping someone's video to fit our box is the one
     unforgivable thing a watch page can do. */
  object-fit: contain;
  background: var(--ink);
}

body.landing .watch-meta {
  text-align: center;
  padding: 24px 0 0;
}

body.landing .watch-title {
  font-family: var(--serif);
  font-size: clamp(26px, 4vw, 40px);
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}

body.landing .watch-byline {
  font-size: 14px;
  color: var(--text-muted);
  margin: 8px 0 0;
}

body.landing .watch-actions {
  margin: 18px 0 0;
}

body.landing .watch-download {
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid transparent;
}

body.landing .watch-download:hover {
  border-bottom-color: currentColor;
}

/* The funnel. Separated by a rule and a lot of air so it reads as a footer to
   the video rather than as a claim on it. */
body.landing .watch-cta {
  max-width: 640px;
  margin: 56px auto 0;
  padding: 40px 24px 72px;
  border-top: 1px solid var(--border);
  text-align: center;
}

body.landing .watch-cta-eyebrow {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-ink);
  margin: 0 0 8px;
}

body.landing .watch-cta-title {
  font-family: var(--serif);
  font-size: clamp(24px, 3.5vw, 32px);
  color: var(--ink);
  margin: 0 0 10px;
}

body.landing .watch-cta-sub {
  font-size: 16px;
  color: var(--text-muted);
  margin: 0 0 24px;
}

/* Dead-link state. Same shape as the CTA block so a broken link still lands
   somewhere that looks designed rather than somewhere that looks crashed. */
body.landing .watch-missing {
  max-width: 560px;
  margin: 0 auto;
  padding: 88px 24px 120px;
  text-align: center;
}

body.landing .watch-missing-icon {
  font-size: 44px;
  margin: 0 0 12px;
  opacity: 0.55;
}

body.landing .watch-missing-title {
  font-family: var(--serif);
  font-size: clamp(24px, 4vw, 34px);
  color: var(--ink);
  margin: 0 0 12px;
}

body.landing .watch-missing-sub {
  font-size: 17px;
  color: var(--text-muted);
  margin: 0 0 28px;
}

@media (max-width: 640px) {
  body.landing .watch {
    padding: 16px 12px 8px;
  }

  /* Tighter on a phone: side gutters around a video on a 375px screen cost real
     pixels of the only thing on the page. */
  body.landing .watch-stage {
    border-radius: 8px;
  }

  body.landing .watch-player {
    max-height: 70vh;
  }
}

/* ── Tools index (/tools) ──────────────────────────────── */
/* Eight groups stacked on one page, so the usual 120px section rhythm would
   turn scanning into scrolling. These sit tighter and lean on the heading rule
   for separation instead of whitespace. */

body.landing .tools-group {
  padding: 56px 24px 8px;
}

body.landing .tools-group:first-of-type {
  padding-top: 24px;
}

body.landing .tools-group-heading {
  font-family: var(--serif);
  font-size: 1.6rem;
  margin: 0 0 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

body.landing .tools-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 24px;
}

body.landing .tools-link {
  display: block;
  padding: 14px 12px;
  margin: 0 -12px;
  border-radius: 8px;
  color: inherit;
  transition: background-color 120ms ease;
}

body.landing .tools-link:hover,
body.landing .tools-link:focus-visible {
  background: var(--surface);
  color: inherit;
}

body.landing .tools-link-title {
  display: block;
  color: var(--brand-ink);
  font-weight: 600;
  line-height: 1.35;
}

body.landing .tools-link:hover .tools-link-title {
  color: var(--brand-soft);
}

body.landing .tools-link-blurb {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

@media (max-width: 768px) {
  body.landing .tools-list {
    grid-template-columns: 1fr;
  }

  body.landing .tools-group {
    padding: 40px 24px 4px;
  }
}