/* ClickBeacon design tokens — generated from DESIGN.md. Every page loads this file. */

@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/lexend-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/source-sans-3-var.woff2') format('woff2');
}

:root {
  /* Tells the browser this page has both a light and dark theme of its own,
     so it renders native form controls (checkboxes, inputs, scrollbars) to
     match instead of guessing or force-darkening a page it thinks is
     light-only. */
  color-scheme: light dark;
  /* Color -- light (default) */
  --ink: #1E3A8A;           /* Harbor Navy -- headings, wordmark, primary UI ink */
  --text: #0F172A;          /* Near-Black Ink -- running body text */
  --text-soft: #475569;     /* secondary text, captions */
  --paper: #F8FAFC;         /* Overcast White -- page background */
  --surface: #FFFFFF;
  --line: #E2E8F0;
  --gold: #A16207;          /* Beacon Gold -- CTAs, beacon motif, emphasis only */
  --gold-bright: #D99A1F;
  --gold-soft: #FEF3E2;
  --navy-soft: #EAF0FB;
  --danger: #DC2626;
  --shadow: 0 4px 6px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.06);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  /* Spacing */
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Type */
  --font-display: 'Lexend', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-label: "SF Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #7FA6F0;
    --text: #E8EDF6;
    --text-soft: #9AA7BD;
    --paper: #0B1220;
    --surface: #131C2E;
    --line: #233047;
    --gold: #F0B429;
    --gold-bright: #FFCF5C;
    --gold-soft: #2E2410;
    --navy-soft: #152238;
    --danger: #F87171;
    --shadow: 0 4px 10px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #7FA6F0; --text: #E8EDF6; --text-soft: #9AA7BD;
  --paper: #0B1220; --surface: #131C2E; --line: #233047;
  --gold: #F0B429; --gold-bright: #FFCF5C; --gold-soft: #2E2410;
  --navy-soft: #152238; --danger: #F87171; --shadow: 0 4px 10px rgba(0,0,0,.4);
}
:root[data-theme="light"] {
  color-scheme: light;
  --ink: #1E3A8A; --text: #0F172A; --text-soft: #475569;
  --paper: #F8FAFC; --surface: #FFFFFF; --line: #E2E8F0;
  --gold: #A16207; --gold-bright: #D99A1F; --gold-soft: #FEF3E2;
  --navy-soft: #EAF0FB; --danger: #DC2626;
  --shadow: 0 4px 6px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.06);
}

*, *::before, *::after { box-sizing: border-box; }
/* Clears the sticky header when jumping to an in-page anchor (#social, #webdesign, etc.)
   so the target section's heading isn't hidden underneath it. */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
  color: var(--text);
}
h5, h6 { font-family: var(--font-display); font-weight: 600; margin: 0; }
p { margin: 0 0 var(--space-md); max-width: 68ch; text-wrap: pretty; }
a { color: var(--ink); }
img, svg { max-width: 100%; display: block; }

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

.mono {
  font-family: var(--font-label);
  font-variant-numeric: tabular-nums;
}

.label {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Buttons -- from DESIGN.md components */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: background-color .2s ease, transform .15s ease;
  min-height: 48px;
}
.btn-primary { background: var(--gold); color: #FFFFFF; }
.btn-primary:hover { background: var(--gold-bright); }
.btn-primary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn-primary:active { transform: scale(0.98); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--ink); }
.btn-ghost:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Card -- package-pricing cards sitewide (Starters, Web Design, Social Media
   offer cards; the .buy-card below on individual product pages). Frosted
   liquid glass: the same translucent-fill + gradient-hairline-border
   technique as the header nav pill, tuned for a light backdrop. Cards that
   sit on a dark band (see pricing.html's Social Media section) override this
   with a darker variant scoped to that section. */
.card {
  background: rgba(255,255,255,.6);
  background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 34px rgba(30,58,138,.10), inset 0 1px 1px rgba(255,255,255,.7);
  padding: var(--space-lg);
  position: relative;
}
.card::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; padding: 1.2px;
  background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.3) 30%, rgba(255,255,255,0) 55%,
    rgba(255,255,255,0) 70%, rgba(240,180,41,.25) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* Pill / badge -- Badges/Pills component, DESIGN.md */
.pill {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--gold);
  color: #FFFFFF;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
/* Pill used as a "featured" flag hanging off a card's top edge; the card needs position:relative. */
.card-badge { position: absolute; top: -13px; right: 20px; }

/* Product detail pages -- shared shell for every individual package/plan page
   (ad-kit.html, landing-page.html, bundle.html, social-*.html). One template,
   product-specific copy per page. */
.breadcrumb { font-family: var(--font-label); font-size: 0.75rem; color: var(--text-soft); margin-bottom: var(--space-md); }
.breadcrumb a { color: var(--text-soft); }
.breadcrumb a:hover { color: var(--ink); }

.buy-card {
  background: rgba(255,255,255,.6); background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: none; border-radius: var(--radius-md);
  box-shadow: 0 10px 34px rgba(30,58,138,.10), inset 0 1px 1px rgba(255,255,255,.7);
  padding: var(--space-xl);
  position: relative;
}
.buy-card::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; padding: 1.2px;
  background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.3) 30%, rgba(255,255,255,0) 55%,
    rgba(255,255,255,0) 70%, rgba(240,180,41,.25) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
/* Dark-mode variant: the light glass fill above is a translucent WHITE tint,
   which turns into a washed-out, barely-readable card once the page's own
   dark-mode text colors (light on light) render on top of it. Swap to the
   dark-glass recipe already used on pricing.html's dark Social Media band,
   so cards stay legible when the visitor's OS/browser is in dark mode.
   Placed after both .card and .buy-card's own definitions so it wins the
   cascade (equal specificity, later wins). */
@media (prefers-color-scheme: dark) {
  .card, .buy-card {
    background: rgba(255,255,255,.035);
    background-blend-mode: luminosity;
    box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.12);
  }
  .card::before, .buy-card::before {
    background: linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.14) 20%, rgba(255,255,255,0) 42%,
      rgba(255,255,255,0) 60%, rgba(255,255,255,.12) 82%, rgba(255,255,255,.4) 100%);
  }
}
:root[data-theme="dark"] .card, :root[data-theme="dark"] .buy-card {
  background: rgba(255,255,255,.035);
  background-blend-mode: luminosity;
  box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.12);
}
:root[data-theme="dark"] .card::before, :root[data-theme="dark"] .buy-card::before {
  background: linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.14) 20%, rgba(255,255,255,0) 42%,
    rgba(255,255,255,0) 60%, rgba(255,255,255,.12) 82%, rgba(255,255,255,.4) 100%);
}
:root[data-theme="light"] .card, :root[data-theme="light"] .buy-card {
  background: rgba(255,255,255,.6);
  background-blend-mode: luminosity;
  box-shadow: 0 10px 34px rgba(30,58,138,.10), inset 0 1px 1px rgba(255,255,255,.7);
}
:root[data-theme="light"] .card::before, :root[data-theme="light"] .buy-card::before {
  background: linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.3) 30%, rgba(255,255,255,0) 55%,
    rgba(255,255,255,0) 70%, rgba(240,180,41,.25) 100%);
}

.buy-card .price { font-family: var(--font-label); font-size: 2rem; font-weight: 700; color: var(--ink); }
.buy-card .cadence { font-family: var(--font-body); font-size: 0.875rem; font-weight: 400; color: var(--text-soft); margin-left: 4px; }
.buy-card .timeline { font-size: 0.875rem; color: var(--text-soft); margin: 4px 0 var(--space-lg); }
.buy-card .btn { width: 100%; }
.buy-card .btn + .btn { margin-top: 10px; }
.buy-card .trust-line { font-size: 0.75rem; color: var(--text-soft); text-align: center; margin-top: var(--space-md); }
.buy-card hr { border: none; border-top: 1px solid var(--line); margin: var(--space-lg) 0; }
.buy-card .mini-list { list-style: none; margin: 0; padding: 0; }
.buy-card .mini-list li { padding: 8px 0; font-size: 0.875rem; color: var(--text-soft); display: flex; gap: 8px; align-items: flex-start; }
.buy-card .mini-list svg { width: 16px; height: 16px; stroke: var(--gold); flex: none; margin-top: 2px; }

.feature-detail { display: grid; gap: var(--space-xl); }
.feature-detail .reveal.play:nth-child(1) { animation-delay: 0s; }
.feature-detail .reveal.play:nth-child(2) { animation-delay: .06s; }
.feature-detail .reveal.play:nth-child(3) { animation-delay: .12s; }
.feature-detail .reveal.play:nth-child(4) { animation-delay: .18s; }
.feature-detail .reveal.play:nth-child(5) { animation-delay: .24s; }
.feature-detail .reveal.play:nth-child(6) { animation-delay: .3s; }
.feature-detail-item { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-md); align-items: start; }
.feature-detail-item .icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--navy-soft); display: flex; align-items: center; justify-content: center; }
.feature-detail-item .icon svg { width: 20px; height: 20px; stroke: var(--ink); }
.feature-detail-item h3 { font-size: 1.125rem; margin-bottom: 4px; }
.feature-detail-item p { color: var(--text-soft); margin: 0; }

.tier-nudge {
  background: var(--gold-soft); border: 1px solid var(--gold); border-radius: var(--radius-md);
  padding: var(--space-lg); display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-md); flex-wrap: wrap;
}
.tier-nudge p { margin: 0; font-size: 0.875rem; color: var(--text); }
.tier-nudge p strong { display: block; margin-bottom: 2px; }

/* Supported-integrations badge row -- generic line-icon glyphs paired with the platform
   name, not reproductions of third-party logo marks. */
.integrations-row { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.integration-badge {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 12px 18px; font-family: var(--font-label); font-weight: 700; font-size: 0.875rem; color: var(--ink);
}
.integration-badge svg { width: 20px; height: 20px; stroke: var(--gold); flex: none; }
.integration-badge.muted { color: var(--text-soft); font-weight: 400; font-family: var(--font-body); border-style: dashed; }

/* Integrations marquee -- continuous scrolling wordmark band. The track is the item list
   duplicated once in markup; animating to -50% makes the loop seamless. Motion is the only
   enhancement here (see reduced-motion override below), the row is a normal static list
   without it. */
.integrations-band { padding: var(--space-lg) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.integrations-band .label {
  text-align: center; font-family: var(--font-label); font-size: 0.75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); margin-bottom: var(--space-md);
}
.integrations-track-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.integrations-track { display: flex; align-items: center; gap: var(--space-xl); width: max-content; animation: cb-marquee 26s linear infinite; }
.integrations-track span { font-family: var(--font-label); font-weight: 700; font-size: 1.125rem; color: var(--text-soft); white-space: nowrap; }
@keyframes cb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .integrations-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .integrations-track-wrap { -webkit-mask-image: none; mask-image: none; }
}

/* Site header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: 16px var(--space-lg);
  max-width: 1120px;
  margin: 0 auto;
}
.brand-mark {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--text);
  text-decoration: none;
}
.brand-mark .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.site-nav { display: flex; align-items: center; gap: var(--space-lg); }
/* Glass pill cluster — the same liquid-glass language as the hero nav/buttons,
   tuned for a light bar: translucent fill, blur, pill hover states. */
.site-nav-links {
  display: flex; align-items: center; gap: 2px;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: var(--radius-pill);
  padding: 6px;
}
.site-nav a {
  color: var(--text-soft);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  transition: background-color .2s ease, color .2s ease;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.nav-toggle { display: none; }

/* Locks background scroll while the mobile glass panel is open. The class is
   only ever toggled by the (hidden-above-800px) nav-toggle button, so this
   rule is inert on desktop regardless of scope. */
html.nav-open { overflow: hidden; }

/* Full-viewport scrim behind the mobile glass panel -- dims and softly blurs
   the page so the panel reads as a floating glass surface, not a dropdown
   sitting flush on the content. Sits below the header's own z-index (so the
   toggle button stays crisp and tappable) but above ordinary page content. */
.nav-scrim {
  position: fixed; inset: 0; z-index: 39;
  background: rgba(15,23,42,.28); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility 0s linear .28s;
}
.nav-scrim.open { opacity: 1; visibility: visible; transition: opacity .28s ease, visibility 0s linear 0s; }
@media (min-width: 801px) { .nav-scrim { display: none; } }

/* Floating liquid-glass header, over a dark cinematic hero -- transparent
   pill that sits on top of the hero (fixed, out of document flow, so the
   hero starts at the very top of the viewport underneath it) and deepens
   to a solid glass panel once scrolled past the hero. Scoped to
   body.home-dark so plain-content pages keep the default opaque header;
   the hero itself needs enough top padding on its own content to clear
   the header's height, which each hero already provides. Shared sitewide
   (any page with a dark hero can opt in) rather than duplicated per page. */
body.home-dark .site-header {
  position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 50;
  width: calc(100% - 32px); max-width: 1120px;
  background: transparent; border: none; backdrop-filter: none;
  transition: top .3s ease;
}
body.home-dark .site-header .bar {
  position: relative; max-width: none; padding: 10px 10px 10px 22px;
  background: rgba(255,255,255,.045); background-blend-mode: luminosity;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-radius: 999px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.14);
  transition: background .3s ease;
}
body.home-dark .site-header .bar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px;
  background: linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.1) 30%, rgba(255,255,255,0) 55%,
    rgba(255,255,255,0) 70%, rgba(255,255,255,.14) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
body.home-dark .site-header.scrolled .bar { background: rgba(8,12,22,.74); }
body.home-dark .site-header .brand-mark { color: #fff; gap: 10px; }
body.home-dark .site-header .site-nav-links a { color: rgba(245,248,253,.78); }
body.home-dark .site-header .site-nav-links a:hover, body.home-dark .site-header .site-nav-links a[aria-current="page"] { color: #fff; }
body.home-dark .site-header .btn-primary { border-radius: 999px; background: var(--gh-gold, #F0B429); color: #0a0f1c; box-shadow: 0 4px 18px rgba(240,180,41,.4); }
body.home-dark .site-header .btn-primary:hover { background: #ffc94a; }
body.home-dark .site-header .nav-toggle { border-radius: 999px; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; }
@media (max-width: 800px) {
  body.home-dark .site-header { top: 0; left: 0; transform: none; width: 100%; max-width: none; }
  body.home-dark .site-header .bar { border-radius: 0; padding: 14px var(--space-lg); }
  body.home-dark .site-header .bar::before { display: none; }
  body.home-dark .site-nav-links {
    background: rgba(10,17,32,.74); background-blend-mode: luminosity;
    -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
    border-color: rgba(255,255,255,.14);
    box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 1px rgba(255,255,255,.14);
  }
  body.home-dark .site-header .site-nav-links a { color: rgba(245,248,253,.78); }
  body.home-dark .site-header .site-nav-links a:hover,
  body.home-dark .site-header .site-nav-links a[aria-current="page"] { color: #fff; background: rgba(240,180,41,.16); }
  body.home-dark .nav-scrim { background: rgba(3,5,10,.5); }
}

@media (max-width: 800px) {
  /* Glass overlay panel -- same frosted, translucent, soft-bordered language
     as the desktop pill and the hero's glass buttons, just bigger and
     detached from the header edge so it reads as a floating card. */
  .site-nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: calc(100% + 10px); left: var(--space-lg); right: var(--space-lg);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    border-radius: 20px;
    padding: var(--space-sm);
    box-shadow: 0 24px 60px rgba(15,23,42,.16), inset 0 1px 1px rgba(255,255,255,.5);
    opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.97);
    transition: opacity .28s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1), visibility 0s linear .28s;
  }
  .site-nav-links.open {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .28s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1), visibility 0s linear 0s;
  }
  .site-nav-links a {
    padding: 13px 14px; width: 100%; border-top: none; border-radius: var(--radius-md);
    opacity: 0; transform: translateY(6px);
    transition: background-color .2s ease, color .2s ease;
  }
  .site-nav-links a:first-child { border-top: none; }
  .site-nav-links a:hover, .site-nav-links a[aria-current="page"] { background: color-mix(in srgb, var(--gold) 12%, transparent); }
  /* Staggered entrance only applies while opening -- once .open is removed
     these selectors stop matching, so the close fade is instant and uniform
     instead of trailing off link by link. */
  .site-nav-links.open a {
    opacity: 1; transform: none;
    transition: opacity .32s cubic-bezier(.16,1,.3,1), transform .32s cubic-bezier(.16,1,.3,1), background-color .2s ease, color .2s ease;
  }
  .site-nav-links.open a:nth-child(1) { transition-delay: .04s; }
  .site-nav-links.open a:nth-child(2) { transition-delay: .08s; }
  .site-nav-links.open a:nth-child(3) { transition-delay: .12s; }
  .site-nav-links.open a:nth-child(4) { transition-delay: .16s; }
  .site-nav-links.open a:nth-child(5) { transition-delay: .2s; }
  .site-nav-links.open a:nth-child(6) { transition-delay: .24s; }
  .site-nav-links.open a:nth-child(7) { transition-delay: .28s; }
  .site-header .bar { position: relative; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--radius-pill);
    border: 1px solid var(--line); background: var(--surface); cursor: pointer;
    position: relative; z-index: 1; -webkit-tap-highlight-color: transparent;
  }
}

/* Below ~370px, the brand mark + "See pricing" CTA + toggle no longer fit
   on one row (a pre-existing gap this pass turned up while checking narrow
   phones) -- drop the header CTA there since Pricing is still one tap away
   inside the menu itself. */
@media (max-width: 400px) {
  .site-header .btn-primary { display: none; }
}

/* Animated hamburger-to-X crossfade, shared by both the light and dark
   (home-dark) toggle button skins -- only the icon's own opacity/rotation
   changes, so it works identically regardless of which colors apply. */
.nav-toggle .icon-open, .nav-toggle .icon-close {
  transition: opacity .22s ease, transform .22s cubic-bezier(.16,1,.3,1);
  transform-box: fill-box; transform-origin: center;
}
.nav-toggle .icon-close { opacity: 0; transform: rotate(-45deg) scale(.5); }
.nav-toggle.is-open .icon-open { opacity: 0; transform: rotate(45deg) scale(.5); }
.nav-toggle.is-open .icon-close { opacity: 1; transform: rotate(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .site-nav-links, .site-nav-links.open, .site-nav-links a, .site-nav-links.open a,
  .nav-scrim, .nav-scrim.open, .nav-toggle .icon-open, .nav-toggle .icon-close {
    transition: none !important;
  }
}

/* Category tabs -- secondary sticky nav for pages with more than one product
   category (pricing.html). Sticks just below the main site header, not at the
   viewport top, so both bars stay visible while scrolling. */
.category-tabs {
  position: sticky;
  top: 83px;
  z-index: 30;
  background: color-mix(in srgb, var(--paper) 95%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.category-tabs-inner { display: flex; gap: var(--space-xl); max-width: 1120px; margin: 0 auto; padding: 0 var(--space-lg); }
.category-tab {
  font-family: var(--font-label); font-size: 0.8125rem; font-weight: 700; letter-spacing: .03em;
  color: var(--text-soft); text-decoration: none; padding: 16px 0; border-bottom: 2px solid transparent;
}
.category-tab:hover { color: var(--text); }
.category-tab.active { color: var(--ink); border-bottom-color: var(--gold); }
@media (max-width: 480px) {
  .category-tabs-inner { gap: var(--space-lg); }
}

/* Site footer -- same navy (#0a1120) as the cinematic hero bands sitewide
   (see the shared theme-color meta tag), so the page closes on the same
   dark note it opened on rather than snapping back to a bare light strip. */
.site-footer {
  background: #0a1120;
  padding: var(--space-lg);
  margin-top: 48px;
}
.site-footer .container {
  display: flex; flex-wrap: wrap; gap: var(--space-lg);
  justify-content: space-between; align-items: center;
}
.site-footer nav { display: flex; gap: var(--space-lg); flex-wrap: wrap; }
.site-footer .brand-mark { color: #fff; }
.site-footer a { color: rgba(245,248,253,.7); text-decoration: none; font-size: 0.875rem; }
.site-footer a:hover { color: #fff; }
.site-footer .fine-print { font-size: 0.75rem; color: rgba(245,248,253,.5); margin-top: var(--space-md); width: 100%; }

/* Motion: the beacon sweep, reusable everywhere -- default visible, animation is enhancement only */
.sweep-wrap { position: relative; display: inline-block; }
.sweep-target {
  position: relative; display: inline-block;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 90%, transparent 100%);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.sweep-target.play { animation: cb-reveal-text .75s cubic-bezier(.16,1,.3,1) both; }
@keyframes cb-reveal-text {
  from { -webkit-mask-size: 0% 100%; mask-size: 0% 100%; }
  to   { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
}
.glint {
  position: absolute; top: 50%; left: 0; width: 30px; height: 30px; margin-top: -15px;
  background: radial-gradient(circle, var(--gold-bright) 0%, rgba(217,154,31,.5) 42%, transparent 72%);
  filter: blur(3px); opacity: 0; pointer-events: none;
}
.glint.play { animation: cb-glint-travel .75s cubic-bezier(.16,1,.3,1) both; }
@keyframes cb-glint-travel {
  0% { left: -3%; opacity: 0; }
  10% { opacity: 1; }
  75% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
.reveal { opacity: 1; transform: none; }
.reveal.pending { opacity: 0; transform: translateY(12px); }
.reveal.play { animation: cb-fade-up .35s cubic-bezier(.16,1,.3,1) both; }
@keyframes cb-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .sweep-target.play, .glint.play, .reveal.play { animation: none !important; }
  .glint.play { opacity: 0 !important; }
  .reveal.pending { opacity: 1 !important; transform: none !important; }
}

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--space-lg); top: var(--space-lg); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }