/* ====================================
   HAUSTACK — Brand System (Rebrand 2026)
   Warm editorial palette · Geist · Sharp buttons
==================================== */

:root {
  --ink: #0A0A0A;
  --ink-2: #1a1a1a;
  --ink-3: #2b2b2b;
  --paper: #F5F3EE;
  --paper-2: #EDEAE0;
  --signal: #F5C518;
  --signal-deep: #D9A800;
  --mute: #6b6557;
  --mute-2: #8a8374;
  --line: #e5e1d7;
  --line-2: #d7d2c4;
  --white: #ffffff;

  /* Legacy aliases for compatibility */
  --black: var(--ink);
  --charcoal: var(--ink-2);
  --card-dark: var(--ink-3);
  --slate: var(--mute);
  --mist: var(--paper-2);
  --amber: var(--signal);
  --amber-hover: var(--signal);
  --amber-dark: var(--signal-deep);
  --amber-text: var(--mute);
  --border-dark: rgba(255, 255, 255, 0.08);
  --border-light: var(--line);

  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --serif: 'Instrument Serif', Georgia, serif;

  --max: 1200px;
  --radius: 2px;
  --radius-sm: 2px;
  --radius-xs: 2px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { max-width: 100%; display: block; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ========== NAV ========== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 14px 0;
  background: rgba(245, 243, 238, 0.88);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.logo-mark {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 22px;
}

.stack-line {
  height: 3px;
  border-radius: 2px;
}

.stack-line:nth-child(1) { width: 73%; background: var(--signal); }
.stack-line:nth-child(2) { width: 100%; background: var(--ink); }
.stack-line:nth-child(3) { width: 100%; background: var(--ink); }

.logo-text { color: var(--ink); }

.nav-links {
  display: flex;
  gap: 32px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mute);
  align-items: center;
}

.nav-links a:hover { color: var(--ink); }

/* ─── Industries dropdown ─── */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  background: transparent;
  border: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--mute);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.15s;
}
.nav-dropdown-trigger:hover,
.nav-dropdown[data-open="true"] .nav-dropdown-trigger {
  color: var(--ink);
}
.nav-dropdown-caret {
  font-size: 9px;
  line-height: 1;
  transition: transform 0.18s var(--ease, ease);
}
.nav-dropdown[data-open="true"] .nav-dropdown-caret {
  transform: rotate(180deg);
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 320px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 44px -14px rgba(10,14,26,0.20);
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  z-index: 200;
}
.nav-dropdown[data-open="true"] .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  display: block;
  padding: 12px 16px;
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.12s;
}
.nav-dropdown-menu a:hover {
  background: rgba(10,14,26,0.04);
  color: var(--ink);
}
.nav-dropdown-item-label {
  display: block;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.nav-dropdown-item-sub {
  display: block;
  font-size: 12.5px;
  color: var(--mute);
  margin-top: 3px;
  font-weight: 400;
}

.nav-signin {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--mute);
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: all 0.2s var(--ease);
}
.nav-signin:hover { color: var(--ink); border-color: var(--ink); }

.mobile-menu-signin {
  padding: 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--mute);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 2px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  transition: all 0.25s var(--ease);
  white-space: nowrap;
}

.btn-sm { padding: 8px 14px; font-size: 10px; }

.btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover {
  background: var(--ink-2);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px -8px rgba(0, 0, 0, 0.3);
}
/* Safety net: on any dark section, a black-on-black primary button is invisible.
   Auto-swap to the yellow CTA palette so we never ship another ghost button. */
.section-dark .btn-primary,
.hero-text .btn-primary {
  background: var(--signal);
  color: var(--ink);
}
.section-dark .btn-primary:hover,
.hero-text .btn-primary:hover {
  background: var(--signal-deep, #D9A800);
  color: var(--ink);
}

.btn-cta {
  background: var(--signal);
  color: var(--ink);
}
.btn-cta:hover {
  background: var(--signal-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px -8px rgba(245, 197, 24, 0.4);
}

.btn-ghost {
  color: var(--ink);
  font-weight: 500;
  padding: 12px 18px;
  border: 1px solid var(--ink);
  border-radius: 2px;
}
.btn-ghost:hover { color: var(--signal-deep); border-color: var(--signal-deep); }

.btn-dark {
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  border: 1px solid rgba(255,255,255,0.1);
}
.btn-dark:hover {
  background: var(--ink-2);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px -8px rgba(0,0,0,0.4);
  border-color: rgba(255,255,255,0.2);
}

.btn-white {
  background: var(--white);
  color: var(--ink);
  padding: 16px 28px;
  border: 1px solid var(--white);
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 8px 24px -10px rgba(0,0,0,0.18);
}
.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 18px 40px -12px rgba(0,0,0,0.28);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 12px 18px;
}
.btn-outline:hover {
  border-color: var(--signal);
  color: var(--signal);
  transform: translateY(-2px);
}

/* ========== EYEBROW ========== */
.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--mute);
  text-transform: uppercase;
  margin-bottom: 24px;
}

.eyebrow-light {
  color: var(--signal);
}
.eyebrow-dark { color: var(--mute); }

.pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 0 rgba(245, 197, 24, 0.7);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(245, 197, 24, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(245, 197, 24, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 197, 24, 0); }
}

/* ========== HERO: AUTO-PLAY VIDEO ========== */
.hero-outer {
  position: relative;
  /* Fill the full viewport so the ticker/rest of the page sits below the
     fold — prospects land on the headline only, then discover as they scroll. */
  min-height: 100vh;
  min-height: 100dvh;
  padding: 128px 24px 88px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bg-dark {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--ink);
  z-index: 0;
}

/* Video container — full-screen intro that plays once then fades out */
.hero-video-wrap {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2;
  overflow: hidden;
  opacity: 1;
  pointer-events: none;
  transition: opacity 1000ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero-video-wrap.hs-faded {
  opacity: 0;
}

.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  /* Crop bottom 10% to hide Kling watermark */
  clip-path: inset(0 0 10% 0);
}

/* Hero text — fades in after stack assembles */
/* Fallback: show hero text if JS hasn't triggered it after 4s */
@keyframes heroFallback {
  to { opacity: 1; transform: translateY(0); }
}
.hero-text {
  position: relative; z-index: 3;
  text-align: center;
  color: var(--white);
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
  /* Hidden until the intro video ends or the fallback timer fires */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-text.hs-reveal {
  opacity: 1;
  transform: translateY(0);
}
.hero-micro {
  margin-top: 20px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}

/* Tab labels in the work-example scroll-steps. Default to the full label;
   the mobile breakpoint below swaps to the short version so 1/3-width tabs
   stay readable. */
.lbl-short { display: none; }
.lbl-full { display: inline; }

/* Industries band — separate dark section below the hero. Was previously
   inline at the bottom of .hero-text, but on mobile that pushed it into the
   visible viewport. Pulling it out keeps the landing view focused on the
   headline + CTA, and the band reveals naturally as you scroll. */
.industries-band {
  background: var(--ink);
  color: rgba(255,255,255,0.55);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.industries-band-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.hero-industries-label {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  color: rgba(255,255,255,0.40);
}
.hero-industries-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
.hero-industries a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.20);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}
.hero-industries a:hover {
  color: var(--white);
  border-color: var(--signal);
}
.hero-industries-audit {
  color: var(--signal) !important;
  border-color: rgba(245,197,24,0.35) !important;
}

/* ─── Mobile: stack the band into clean rows ─────────────────
   On phones the inline-link wall reads as messy. Stack three rows:
   label, industries (no underlines, dot-separated), audit CTA. */
@media (max-width: 720px) {
  .industries-band-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 24px 20px;
    font-size: 12px;
  }
  .hero-industries-list {
    gap: 0;
    flex-wrap: wrap;
  }
  /* Drop the underline on industry links — looks cleaner as a list */
  .hero-industries-list a {
    border-bottom: none;
    padding-bottom: 0;
    color: rgba(255,255,255,0.78);
    font-size: 12.5px;
  }
  /* Dot separators between industries (except after the last) */
  .hero-industries-list a:not(:last-child)::after {
    content: '·';
    margin: 0 8px;
    color: rgba(255,255,255,0.32);
  }
  /* Audit CTA on its own row, slightly more presence */
  .hero-industries-audit {
    margin-top: 4px;
    font-size: 13px;
  }
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em;
  color: var(--signal); text-transform: uppercase;
  margin-bottom: 24px;
}

.hero-text .hero-title {
  font-family: var(--sans);
  font-size: clamp(40px, 7vw, 88px);
  font-weight: 600; line-height: 1.2;
  letter-spacing: -0.04em; margin-bottom: 32px;
  padding-top: 4px;
}

/* Typewriter cursor — matches the React component's blink behavior */
.typewriter-wrap { display: inline-block; }
#typewriterTarget { white-space: pre; }
.typewriter-cursor {
  display: inline-block;
  margin-left: 0.05em;
  animation: hsTypewriterBlink 1s steps(1) infinite;
}
@keyframes hsTypewriterBlink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.hero-text .hero-sub {
  font-size: 18px; color: rgba(255,255,255,0.72);
  max-width: 560px; margin: 0 auto 40px; line-height: 1.6;
}

.hero-text .hero-cta {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-bottom: 0; flex-wrap: wrap;
}

.hero-text .btn-ghost { color: var(--white); border-color: rgba(255,255,255,0.3); }
.hero-text .btn-ghost:hover { color: var(--signal); border-color: var(--signal); }

.hero-text .hero-proof {
  display: none; /* stats moved to proof-strip section below hero */
}

.hero-text .proof-num {
  font-family: var(--sans);
  font-size: 36px; font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.3; margin-bottom: 6px;
  overflow: visible;
}

.hero-text .proof-label {
  font-size: 12px; color: rgba(255,255,255,0.5); max-width: 160px;
}

/* (hero 768px rules moved to consolidated responsive section) */

.accent { color: var(--signal); }
.section:not(.section-dark) .accent { color: var(--signal-deep); }
.section-accent .accent { color: var(--ink); }

/* ========== PROOF STRIP (below hero, all screen sizes) ========== */
.proof-strip {
  display: block;
  background: var(--ink);
  padding: 48px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.proof-strip-inner {
  display: flex;
  justify-content: space-between;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}
.proof-strip-num {
  font-family: var(--sans);
  font-size: 36px; font-weight: 600;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1.3;
  margin-bottom: 6px;
  overflow: visible;
}
.proof-strip-label {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.4;
  max-width: 160px;
}

@media (max-width: 768px) {
  .proof-strip { padding: 32px 0; }
  .proof-strip-inner { gap: 0; justify-content: space-between; }
  .proof-strip-item { flex: 1; }
  .proof-strip-num { font-size: 28px; }
  .proof-strip-label { font-size: 11px; max-width: none; line-height: 1.3; }
}
@media (max-width: 480px) {
  .proof-strip { padding: 24px 0; }
  .proof-strip-num { font-size: 24px; }
  .proof-strip-label { font-size: 10px; }
}

/* ========== TICKER (matches brand identity) ========== */
.ticker {
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  position: relative;
}

.ticker-track {
  display: flex;
  gap: 40px;
  white-space: nowrap;
  animation: tickerScroll 40s linear infinite;
  padding: 18px 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 44px;
  letter-spacing: -0.02em;
  line-height: 1;
  width: max-content;
  align-items: center;
}

.ticker-track span {
  flex-shrink: 0;
}

.ticker-track em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal);
}

.ticker-dot {
  width: 10px;
  height: 10px;
  background: var(--signal);
  border-radius: 99px;
  display: inline-block;
  flex-shrink: 0;
}

@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Keep old classes for compatibility */
.industries { display: none; }

/* ========== SECTIONS ========== */
.section {
  padding: 72px 0;
  position: relative;
  border-bottom: 1px solid var(--ink);
}

.section-dark {
  background: var(--ink);
  color: var(--white);
  border-bottom-color: rgba(255,255,255,0.08);
}

.section-head {
  max-width: 780px;
  margin-bottom: 48px;
  overflow: visible;
}

.section-head h2 {
  font-family: var(--sans);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
}

.section-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--mute);
  max-width: 640px;
}

.section-dark .section-sub { color: rgba(255, 255, 255, 0.7); }

/* ========== PROBLEM ========== */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--border-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  overflow: hidden;
}

.problem-card {
  background: var(--ink-2);
  padding: 48px 40px;
  transition: background 0.35s var(--ease);
}

.problem-card:hover {
  background: rgba(255,255,255,0.06);
}

.problem-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--signal);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 24px;
  letter-spacing: 0;
}

.problem-card h3 {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.problem-card p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 15px;
  line-height: 1.6;
}

/* ========== SECTION IMAGES ========== */
.before-after-img {
  margin-top: 64px;
  border-radius: var(--radius);
  overflow: hidden;
}
.before-after-img img {
  width: 100%;
  height: auto;
  display: block;
}

.solution-img {
  margin-bottom: 64px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.solution-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}

.process-img {
  margin-bottom: 64px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  background: var(--paper);
  border-radius: var(--radius);
  padding: 32px;
  border: 1px solid rgba(255,255,255,0.08);
}
.process-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* ========== SOLUTION ========== */
.solution-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.feature {
  padding: 40px 36px;
  background: var(--paper);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  transition: all 0.35s var(--ease);
}

.feature:hover {
  border-color: var(--line-2);
  background: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.08);
}

.feature-icon {
  color: var(--signal);
  font-size: 16px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(245, 197, 24, 0.12);
  border-radius: 2px;
  border: 1px solid rgba(245, 197, 24, 0.25);
  line-height: 1;
}

.feature h3 {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.feature p {
  color: var(--mute);
  font-size: 15px;
  line-height: 1.6;
}

/* ========== MOCKUP SYSTEM (SHARED WITH CASE STUDIES) ========== */
.app {
  height: 100%;
  background: #FAFAFA;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  font-size: 8px;
  color: #1A1A1A;
}
.app-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: #F0F0F0;
  border-bottom: 1px solid #E4E4E7;
  flex-shrink: 0;
}
.app-dot { width: 8px; height: 8px; border-radius: 50%; }
.app-dot.r { background: #FF5F57; }
.app-dot.y { background: #FEBC2E; }
.app-dot.g { background: #28C840; }
.app-url {
  flex: 1; background: #FFFFFF; border-radius: 4px;
  padding: 2px 8px; font-size: 7px; color: #888;
  margin-left: 6px; border: 1px solid #E4E4E7;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-body { flex: 1; display: flex; overflow: hidden; }
.app-side {
  width: 110px; background: #0A0A0A; color: #fff;
  padding: 10px 6px; display: flex; flex-direction: column; gap: 1px;
  flex-shrink: 0;
}
.app-side-logo {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 6px 10px;
  font-family: var(--sans);
  font-weight: 700; font-size: 10px;
  color: var(--brand, var(--signal)); letter-spacing: -0.02em;
}
.app-side-logo::before {
  content: ""; width: 12px; height: 12px;
  background: var(--brand, var(--signal));
  border-radius: var(--brand-radius, 3px);
  flex-shrink: 0;
}
.app-side-heading {
  font-size: 6px; text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4); padding: 6px 6px 3px; font-weight: 600;
}
.app-side-item {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 6px; border-radius: 3px;
  font-size: 8px; color: rgba(255,255,255,0.7); font-weight: 500;
}
.app-side-item::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px;
  background: rgba(255,255,255,0.2); flex-shrink: 0;
}
.app-side-item.active {
  background: var(--brand-soft, rgba(245,197,24,0.15));
  color: var(--brand, var(--signal));
}
.app-side-item.active::before { background: var(--brand, var(--signal)); }
.app-side-badge {
  margin-left: auto;
  background: var(--brand, var(--signal));
  color: var(--brand-text, #fff);
  font-size: 6px; padding: 1px 4px; border-radius: 100px; font-weight: 700;
}

.app-main {
  flex: 1; overflow: hidden;
  display: flex; flex-direction: column; background: #FAFAFA;
}
.app-top {
  padding: 8px 14px;
  border-bottom: 1px solid #E4E4E7;
  display: flex; justify-content: space-between; align-items: center;
  background: #fff; flex-shrink: 0;
}
.app-title {
  font-family: var(--sans);
  font-weight: 700; font-size: 11px; letter-spacing: -0.01em;
}
.app-sub { font-size: 7px; color: #888; margin-top: 2px; }
.app-btn {
  padding: 3px 8px;
  background: var(--brand, var(--signal));
  color: var(--brand-text, #fff);
  border-radius: 3px; font-size: 7px; font-weight: 600;
}
.app-btn.ghost { background: #F4F4F5; color: #666; }
.app-content {
  flex: 1; padding: 10px 14px; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
}
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.kpi {
  background: #fff; border: 1px solid #E4E4E7; border-radius: 5px;
  padding: 6px 8px; display: flex; flex-direction: column; gap: 2px;
}
.kpi-label {
  font-size: 6px; color: #737373; text-transform: uppercase;
  letter-spacing: 0.04em; font-weight: 600;
}
.kpi-value {
  font-family: var(--sans);
  font-size: 12px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
}
.kpi-delta { font-size: 6px; font-weight: 600; }
.kpi-delta.up { color: #16A34A; }
.kpi-delta.down { color: #DC2626; }

.chart {
  background: #fff; border: 1px solid #E4E4E7; border-radius: 5px;
  padding: 8px 10px; flex: 1;
  display: flex; flex-direction: column; gap: 5px; min-height: 0;
}
.chart-top { display: flex; justify-content: space-between; align-items: center; }
.chart-title { font-size: 8px; font-weight: 600; }
.chart-legend {
  display: flex; gap: 6px; font-size: 6px; color: #737373;
}
.chart-legend span { display: flex; align-items: center; gap: 3px; }
.chart-legend span::before {
  content: ""; width: 5px; height: 5px; border-radius: 2px; background: var(--signal);
}
.chart-legend span.alt::before { background: #D4D4D8; }
.chart-svg { flex: 1; min-height: 0; position: relative; }

.tbl {
  background: #fff; border: 1px solid #E4E4E7; border-radius: 5px;
  overflow: hidden; display: flex; flex-direction: column;
  flex: 1; min-height: 0;
}
.tbl-head {
  display: grid; padding: 6px 8px;
  background: #FAFAFA; border-bottom: 1px solid #E4E4E7;
  font-size: 6px; font-weight: 700; color: #737373;
  text-transform: uppercase; letter-spacing: 0.06em; gap: 6px;
}
.tbl-row {
  display: grid; padding: 5px 8px;
  border-bottom: 1px solid #F4F4F5;
  font-size: 7px; align-items: center; gap: 6px;
}
.tbl-row:last-child { border-bottom: none; }
.tbl-row.active { background: var(--brand-softer, rgba(245,197,24,0.08)); }
.tbl-row strong { font-weight: 700; }
.tbl-row .muted { color: #888; }

.badge {
  display: inline-block; padding: 1px 5px; border-radius: 100px;
  font-size: 6px; font-weight: 600; white-space: nowrap;
}
.badge.green { background: #DCFCE7; color: #16A34A; }
.badge.amber { background: #FEF3C7; color: #B45309; }
.badge.red { background: #FEE2E2; color: #DC2626; }
.badge.blue { background: #DBEAFE; color: #2563EB; }
.badge.gray { background: #F4F4F5; color: #525252; }

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--brand, var(--signal));
  color: var(--brand-text, #fff);
  font-size: 6px; font-weight: 700;
  flex-shrink: 0;
}
.avatar.b { background: #60A5FA; color: #fff; }
.avatar.g { background: #34D399; color: #000; }
.avatar.p { background: #C084FC; color: #fff; }
.avatar.r { background: #F87171; color: #fff; }
.name-cell {
  display: flex; align-items: center; gap: 5px;
  min-width: 0; overflow: hidden; white-space: nowrap;
}

.kanban { display: flex; gap: 6px; flex: 1; min-height: 0; }
.kcol {
  flex: 1; background: #F4F4F5; border-radius: 5px;
  padding: 6px; display: flex; flex-direction: column; gap: 5px; min-width: 0;
}
.kcol-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 2px 3px;
  font-size: 7px; font-weight: 700; color: #1a1a1a;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.kcol-count {
  background: rgba(10,10,10,0.1); border-radius: 100px;
  padding: 1px 5px; font-size: 6px; font-weight: 600;
}
.kitem {
  background: #fff; border-radius: 4px; padding: 5px 7px;
  border-left: 3px solid #A3A3A3;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.kitem.amber { border-left-color: var(--signal); }
.kitem.green { border-left-color: #16A34A; }
.kitem.blue { border-left-color: #2563EB; }
.kitem.red { border-left-color: #DC2626; }
.kitem-t {
  font-weight: 700; font-size: 7px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kitem-s {
  font-size: 6px; color: #737373;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ========== SCROLL-PINNED WORK SECTION ========== */
.section-work-scroll {
  background: var(--mist);
  border-top: 1px solid var(--border-light);
}
.work-intro { padding: 72px 0 40px; }

.scroll-project { border-top: 1px solid var(--border-light); }
.scroll-track { min-height: 280vh; position: relative; }
.scroll-sticky {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; align-items: center;
  gap: 48px;
  max-width: 1400px; margin: 0 auto;
  padding: 80px 32px 40px;
}
.scroll-left {
  flex: 0 0 380px; max-width: 380px;
  display: flex; flex-direction: column;
  overflow: visible;
}
.scroll-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--slate); margin-bottom: 32px; flex-wrap: wrap;
}
.scroll-tag {
  padding: 4px 14px; color: #fff; border-radius: 100px;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em;
}
.scroll-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; overflow: visible; }
.scroll-step {
  display: flex; gap: 16px; padding: 12px 4px;
  border-radius: 0; border: none;
  transition: opacity 0.35s var(--ease), color 0.3s var(--ease);
  opacity: 0.55; cursor: pointer;
  overflow: visible; background: transparent;
}
.scroll-step.active {
  opacity: 1;
  background: transparent;
  border: none;
  box-shadow: none;
}
.step-num {
  width: 44px; height: 44px; border-radius: 50%;
  background: #E4E4E7; color: #737373;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans);
  font-weight: 700; font-size: 15px; flex-shrink: 0;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
  margin-top: 0;
  line-height: 1;
  box-sizing: border-box;
  /* Ensure the circle always fully contains its digit regardless of font metrics */
  padding: 0; overflow: visible;
}
.scroll-step.active .step-num {
  background: var(--brand, var(--amber)); color: #fff;
}
.scroll-step h3 {
  font-family: var(--sans);
  font-size: 20px; font-weight: 600; letter-spacing: -0.02em;
  margin-bottom: 6px; line-height: 1.3;
}
.scroll-step p {
  font-size: 14px; color: var(--slate); line-height: 1.5;
  display: none;
}
.scroll-step.active p { display: block; }
.scroll-stats {
  display: flex; gap: 24px; font-size: 13px; color: var(--slate);
  padding-bottom: 20px; border-bottom: 1px solid var(--border-light);
  margin-bottom: 16px;
  overflow: visible;
}
.scroll-stats strong {
  display: block; font-family: var(--sans);
  font-size: 20px; font-weight: 600; color: var(--black);
  line-height: 1.3; letter-spacing: -0.02em;
  overflow: visible;
}
.scroll-cta {
  font-size: 15px; font-weight: 600; color: var(--black);
  transition: color 0.2s var(--ease);
}
.scroll-cta:hover { color: var(--brand, var(--amber)); }

.scroll-right {
  flex: 1; min-width: 0;
  position: relative;
  height: 75vh;
  max-height: 600px;
}
.scroll-screen {
  position: absolute; inset: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}
.scroll-screen.active {
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
}

/* Screen mockup (larger, more detailed) */
.scrn {
  width: 100%; height: 100%;
  background: var(--grad, linear-gradient(135deg,#0A0A0A,#1a1a1a));
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.5);
}
.s-app {
  width: 100%; height: 100%;
  background: #FAFAFA;
  border-radius: 10px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  font-size: 11px; color: #1A1A1A;
}
.s-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 16px; background: #F0F0F0;
  border-bottom: 1px solid #E4E4E7; flex-shrink: 0;
}
.s-dot { width: 10px; height: 10px; border-radius: 50%; }
.s-dot.r { background: #FF5F57; }
.s-dot.y { background: #FEBC2E; }
.s-dot.g { background: #28C840; }
.s-url {
  flex: 1; background: #fff; border-radius: 5px;
  padding: 4px 12px; font-size: 10px; color: #888;
  margin-left: 10px; border: 1px solid #E4E4E7;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s-body { flex: 1; display: flex; overflow: hidden; }
.s-side {
  width: 150px; background: #0A0A0A; color: #fff;
  padding: 14px 10px; display: flex; flex-direction: column;
  gap: 2px; flex-shrink: 0; overflow: hidden;
}
.s-logo {
  font-family: var(--sans);
  font-weight: 700; font-size: 14px;
  padding: 4px 8px 12px; letter-spacing: -0.02em;
}
.s-nav-label {
  font-size: 8px; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35); padding: 10px 8px 4px; font-weight: 600;
}
.s-nav {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 5px;
  font-size: 11px; color: rgba(255,255,255,0.6); font-weight: 500;
}
.s-nav.active {
  background: var(--brand-soft, rgba(245,197,24,0.15));
  color: var(--b, var(--signal));
}
.s-badge {
  margin-left: auto; color: #fff;
  font-size: 8px; padding: 1px 6px; border-radius: 100px; font-weight: 700;
}
.s-main {
  flex: 1; overflow: hidden;
  display: flex; flex-direction: column; background: #FAFAFA;
}
.s-header {
  padding: 12px 20px; border-bottom: 1px solid #E4E4E7;
  display: flex; justify-content: space-between; align-items: center;
  background: #fff; flex-shrink: 0;
}
.s-title {
  font-family: var(--sans);
  font-weight: 700; font-size: 14px; letter-spacing: -0.01em;
}
.s-sub { font-size: 10px; color: #888; margin-top: 2px; }
.s-btn {
  padding: 5px 12px; border-radius: 5px;
  font-size: 10px; font-weight: 600; white-space: nowrap;
}
.s-content {
  flex: 1; padding: 14px 20px; overflow: hidden;
  display: flex; flex-direction: column; gap: 12px;
}

/* KPIs */
.s-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.s-kpi {
  background: #fff; border: 1px solid #E4E4E7; border-radius: 7px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 3px;
}
.s-kpi-label { font-size: 8px; color: #737373; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.s-kpi-val { font-family: var(--sans); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.s-kpi-delta { font-size: 9px; font-weight: 600; }
.s-kpi-delta.up { color: #16A34A; }
.s-kpi-delta.dn { color: #DC2626; }

/* Chart */
.s-chart-box {
  background: #fff; border: 1px solid #E4E4E7; border-radius: 7px;
  padding: 12px 14px; flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.s-chart-head { display: flex; justify-content: space-between; align-items: center; }
.s-chart-title { font-size: 11px; font-weight: 600; }
.s-chart-legend { font-size: 9px; color: #737373; display: flex; align-items: center; gap: 6px; }
.s-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 2px; }
.s-chart { flex: 1; min-height: 0; }

/* Table */
.s-table {
  background: #fff; border: 1px solid #E4E4E7; border-radius: 7px;
  overflow: hidden; flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}
.s-thead {
  display: grid; padding: 8px 12px;
  background: #FAFAFA; border-bottom: 1px solid #E4E4E7;
  font-size: 9px; font-weight: 700; color: #737373;
  text-transform: uppercase; letter-spacing: 0.06em; gap: 8px;
}
.s-trow {
  display: grid; padding: 8px 12px;
  border-bottom: 1px solid #F4F4F5;
  font-size: 11px; align-items: center; gap: 8px;
}
.s-trow:last-child { border-bottom: none; }
.s-trow.hl { background: rgba(245,197,24,0.06); }
.s-name {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.s-avatar {
  width: 22px; height: 22px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700; flex-shrink: 0;
}
.s-pill {
  display: inline-block; padding: 2px 8px; border-radius: 100px;
  font-size: 9px; font-weight: 600;
}
.s-pill.green { background: #DCFCE7; color: #16A34A; }
.s-pill.amber { background: #FEF3C7; color: #B45309; }
.s-pill.red { background: #FEE2E2; color: #DC2626; }
.s-pill.blue { background: #DBEAFE; color: #2563EB; }
.s-pill.gray { background: #F4F4F5; color: #737373; }

/* Kanban */
.s-kanban { display: flex; gap: 10px; flex: 1; min-height: 0; }
.s-kcol {
  flex: 1; background: #F4F4F5; border-radius: 7px;
  padding: 10px; display: flex; flex-direction: column;
  gap: 7px; min-width: 0; overflow: hidden;
}
.s-khead {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 2px 6px;
  font-size: 10px; font-weight: 700; color: #1a1a1a;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.s-kcount {
  background: rgba(10,10,10,0.1); border-radius: 100px;
  padding: 2px 7px; font-size: 9px; font-weight: 600;
}
.s-kcard {
  background: #fff; border-radius: 6px; padding: 8px 10px;
  border-left: 3px solid #A3A3A3;
  display: flex; flex-direction: column; gap: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.s-kcard.amber { border-left-color: var(--signal); }
.s-kcard.green { border-left-color: #16A34A; }
.s-kcard.blue { border-left-color: #2563EB; }
.s-kcard.red { border-left-color: #DC2626; }
.s-kname { font-weight: 700; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-ksub { font-size: 9px; color: #737373; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Timeline (for lead detail) */
.s-timeline { display: flex; flex-direction: column; gap: 8px; flex: 1; overflow: hidden; }
.s-tl-item {
  display: flex; gap: 10px; padding: 8px 10px;
  background: #fff; border: 1px solid #E4E4E7; border-radius: 6px;
}
.s-tl-dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: #E4E4E7; flex-shrink: 0; margin-top: 2px;
}
.s-tl-dot.green { background: #16A34A; }
.s-tl-dot.amber { background: var(--signal); }
.s-tl-dot.blue { background: #2563EB; }
.s-tl-body { flex: 1; min-width: 0; }
.s-tl-body strong { font-size: 11px; }
.s-tl-time { font-size: 9px; color: #737373; margin-top: 2px; }

/* ═══════ REALISM POLISH — device chrome + screen content depth ═══════ */

/* Device frame: subtle gradient sheen, darker inset edge, glass-like inner highlight */
.scrn {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 18%),
    var(--grad, linear-gradient(135deg,#0A0A0A,#1a1a1a));
  box-shadow:
    0 48px 120px -30px rgba(0,0,0,0.55),
    0 8px 24px -8px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}
/* Speaker/camera bar on the top bezel */
.scrn::before {
  content: '';
  position: absolute;
  top: 9px; left: 50%; transform: translateX(-50%);
  width: 60px; height: 4px; border-radius: 3px;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
}
/* Pinhole front camera dot */
.scrn::after {
  content: '';
  position: absolute;
  top: 11px; left: calc(50% + 40px);
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
  pointer-events: none;
}

/* Screen glass-edge highlight on the inner panel */
.s-app {
  box-shadow:
    0 10px 40px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.7);
}

/* Browser chrome: small lock icon in URL bar via SVG mask */
.s-url {
  display: inline-flex; align-items: center; gap: 5px;
}
.s-url::before {
  content: '';
  flex-shrink: 0;
  width: 8px; height: 9px;
  background-color: #9ca3af;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 12"><path fill="black" d="M5 0a3 3 0 00-3 3v2H1a1 1 0 00-1 1v5a1 1 0 001 1h8a1 1 0 001-1V6a1 1 0 00-1-1H8V3a3 3 0 00-3-3zm0 1.5A1.5 1.5 0 016.5 3v2h-3V3A1.5 1.5 0 015 1.5z"/></svg>') no-repeat center / contain;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 12"><path fill="black" d="M5 0a3 3 0 00-3 3v2H1a1 1 0 00-1 1v5a1 1 0 001 1h8a1 1 0 001-1V6a1 1 0 00-1-1H8V3a3 3 0 00-3-3zm0 1.5A1.5 1.5 0 016.5 3v2h-3V3A1.5 1.5 0 015 1.5z"/></svg>') no-repeat center / contain;
}

/* KPIs: soft resting-on-surface shadow */
.s-kpi {
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 2px 8px rgba(15,23,42,0.04);
}
/* A subtle colored accent bar on the top of KPI cards */
.s-kpi { position: relative; overflow: hidden; }
.s-kpi::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--b, var(--signal)) 0%, transparent 80%);
  opacity: 0.35;
}

/* Chart and table: match KPI depth */
.s-chart-box,
.s-table {
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 2px 8px rgba(15,23,42,0.04);
}

/* Kanban cards: slightly stronger lift for the "pick me up" feeling */
.s-kcard {
  box-shadow:
    0 1px 2px rgba(15,23,42,0.06),
    0 3px 10px rgba(15,23,42,0.045);
}

/* Timeline items: same resting depth as cards */
.s-tl-item {
  box-shadow: 0 1px 2px rgba(15,23,42,0.03);
}

/* Sidebar: active nav gets a colored left accent bar */
.s-nav { position: relative; }
.s-nav.active {
  background: var(--brand-soft, rgba(245,197,24,0.12));
}
.s-nav.active::before {
  content: '';
  position: absolute; left: -10px; top: 6px; bottom: 6px;
  width: 2px; border-radius: 0 2px 2px 0;
  background: var(--b, var(--signal));
}

/* Primary buttons in screen chrome — soft 3D feel */
.s-btn {
  box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
  transition: none;
}

/* Table highlighted row: use a gradient, not a flat tint */
.s-trow.hl {
  background: linear-gradient(90deg, rgba(245,197,24,0.08) 0%, rgba(245,197,24,0.04) 100%);
}


@media (max-width: 1024px) and (min-width: 769px) {
  /* Tablet landscape — keep scroll effect but adjust proportions */
  .scroll-sticky { padding: 60px 20px 20px; gap: 32px; }
  .scroll-left { flex: 0 0 320px; max-width: 320px; }
  .scroll-right { height: 65vh; }
  .scroll-track { min-height: 260vh; }
  .s-side { width: 110px; }
  .s-app.theme-hubspot .s-side { width: 48px; }
  .s-app.theme-airtable .s-side { width: 110px; }
}
/* (768px scroll rules moved to consolidated responsive section) */

/* ========== THEME VARIANTS — 4 UNIQUE DASHBOARD STYLES ========== */

/* --- THEME: NOTION (Westbrook) — Minimal, spacious, breadcrumbs --- */
.s-app.theme-notion .s-side {
  background: #FAFAFA; border-right: 1px solid #E4E4E7;
}
.s-app.theme-notion .s-logo { color: #1a1a1a; }
.s-app.theme-notion .s-nav-label { color: #999; }
.s-app.theme-notion .s-nav {
  color: #555; font-size: 11px;
}
.s-app.theme-notion .s-nav.active {
  background: rgba(30,64,175,0.08); color: #1E40AF;
}
.s-app.theme-notion .s-nav:hover:not(.active) { background: #f0f0f0; }
.s-app.theme-notion .s-badge { color: #fff; }
.s-app.theme-notion .s-header {
  border-bottom: 1px solid #E4E4E7;
  flex-wrap: wrap;
}
.s-app.theme-notion .s-breadcrumb {
  display: block;
  font-size: 9px;
  color: #999;
  margin-bottom: 4px;
  width: 100%;
  order: -1;
}
.s-app.theme-notion .s-kpi {
  border: none;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* --- THEME: COMMAND (REDLINE) — Dense, dark header, operational --- */
.s-app.theme-command { background: #111; }
.s-app.theme-command .s-bar { background: #1a1a1a; border-color: #333; }
.s-app.theme-command .s-url { background: #222; border-color: #444; color: #999; }
.s-app.theme-command .s-main { background: #181818; }
.s-app.theme-command .s-header {
  background: linear-gradient(135deg, #1a1a1a, #2d1010);
  color: #fff; border-bottom: 2px solid #DC2626;
}
.s-app.theme-command .s-title { color: #fff; }
.s-app.theme-command .s-sub { color: rgba(255,255,255,0.6); }
.s-app.theme-command .s-header .s-btn {
  background: #DC2626; color: #fff;
  box-shadow: 0 2px 8px rgba(220,38,38,0.3);
}
.s-app.theme-command .s-kpi {
  background: #1a1a1a; color: #fff; border-color: #333;
}
.s-app.theme-command .s-kpi-label { color: rgba(255,255,255,0.5); }
.s-app.theme-command .s-kpi-val { color: #fff; }
.s-app.theme-command .s-kpi-delta.up { color: #4ADE80; }
.s-app.theme-command .s-kpi-delta.dn { color: #F87171; }
.s-app.theme-command .s-kcol { background: #222; }
.s-app.theme-command .s-khead { color: rgba(255,255,255,0.7); }
.s-app.theme-command .s-kcount { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }
.s-app.theme-command .s-kcard {
  background: #2a2a2a; color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.s-app.theme-command .s-kname { color: #fff; }
.s-app.theme-command .s-ksub { color: rgba(255,255,255,0.5); }
.s-app.theme-command .s-content { background: #181818; }
.s-app.theme-command .s-chart-box {
  background: #1a1a1a; border-color: #333; color: #fff;
}
.s-app.theme-command .s-chart-title { color: #fff; }
.s-app.theme-command .s-chart-legend { color: rgba(255,255,255,0.5); }
.s-app.theme-command .s-table {
  background: #1a1a1a; border-color: #333;
}
.s-app.theme-command .s-thead {
  background: #222; border-color: #333; color: #999;
}
.s-app.theme-command .s-trow {
  color: #fff; border-color: #333;
}
.s-app.theme-command .s-trow.hl { background: rgba(220,38,38,0.1); }
.s-app.theme-command .s-trow:hover { background: rgba(255,255,255,0.04); }

/* Status bar for command theme */
.s-app.theme-command .cmd-status {
  display: flex; gap: 12px; padding: 6px 20px;
  background: #111; font-size: 9px; color: rgba(255,255,255,0.7);
  border-bottom: 1px solid #333;
}
.cmd-status-item { display: flex; align-items: center; gap: 5px; }
.cmd-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
}
.cmd-status-dot.green { background: #4ADE80; box-shadow: 0 0 6px rgba(74,222,128,0.5); animation: statusGlow 2s ease-in-out infinite; }
.cmd-status-dot.amber { background: #FBBF24; box-shadow: 0 0 6px rgba(251,191,36,0.5); animation: statusGlow 2s ease-in-out infinite 0.5s; }
.cmd-status-dot.red { background: #F87171; box-shadow: 0 0 6px rgba(248,113,113,0.5); animation: statusGlowRed 1.5s ease-in-out infinite; }

@keyframes statusGlow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
@keyframes statusGlowRed {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(248,113,113,0.5); }
  50% { opacity: 0.7; box-shadow: 0 0 10px rgba(248,113,113,0.8); }
}

/* --- THEME: AIRTABLE (Coastal) — Light sidebar, colorful, toolbar --- */
.s-app.theme-airtable .s-side {
  background: #fff; border-right: 1px solid #E4E4E7;
  width: 140px;
}
.s-app.theme-airtable .s-logo { color: #0D9488; font-size: 13px; }
.s-app.theme-airtable .s-nav-label { color: #aaa; font-size: 7px; }
.s-app.theme-airtable .s-nav {
  color: #555; font-size: 11px;
  padding-left: 14px;
  border-left: 2px solid transparent;
  border-radius: 0;
}
.s-app.theme-airtable .s-nav.active {
  background: rgba(13,148,136,0.06);
  color: #0D9488;
  border-left-color: #0D9488;
}
.s-app.theme-airtable .s-nav:hover:not(.active) {
  background: #FAFAFA; color: #333;
}
.s-app.theme-airtable .s-badge { color: #fff; }
.s-app.theme-airtable .s-main { background: #FAFAFA; }

/* Toolbar row */
.s-toolbar {
  display: flex; gap: 6px; align-items: center;
  padding: 8px 20px; background: #fff;
  border-bottom: 1px solid #E4E4E7;
}
.s-toolbar-btn {
  padding: 4px 10px; border-radius: 5px;
  background: #F4F4F5; font-size: 9px; font-weight: 600;
  color: #555; border: 1px solid #E4E4E7;
}
.s-toolbar-btn.active { background: #0D9488; color: #fff; border-color: #0D9488; }
.s-toolbar-search {
  margin-left: auto; padding: 4px 10px; border-radius: 5px;
  background: #F4F4F5; border: 1px solid #E4E4E7;
  font-size: 9px; color: #999; width: 120px;
}

/* Colored row indicators for airtable theme */
.s-app.theme-airtable .s-trow {
  border-left: 3px solid transparent; border-radius: 4px;
  margin-bottom: 2px; background: #fff;
}
.s-app.theme-airtable .s-trow:nth-child(2) { border-left-color: #0D9488; }
.s-app.theme-airtable .s-trow:nth-child(3) { border-left-color: #0D9488; }
.s-app.theme-airtable .s-trow:nth-child(4) { border-left-color: #3B82F6; }
.s-app.theme-airtable .s-trow:nth-child(5) { border-left-color: #F59E0B; }
.s-app.theme-airtable .s-trow:nth-child(6) { border-left-color: #0D9488; }
.s-app.theme-airtable .s-trow:nth-child(7) { border-left-color: #EF4444; }
.s-app.theme-airtable .s-thead { background: #E8E8E8; }
.s-app.theme-airtable .s-trow.hl { background: rgba(13,148,136,0.06); }
.s-app.theme-hubspot .s-trow.hl { background: rgba(124,58,237,0.06); }

/* --- THEME: HUBSPOT (Kinetica) — Icon sidebar, tabs in header, split view --- */
.s-app.theme-hubspot .s-side {
  width: 52px; padding: 10px 4px;
  align-items: center;
}
.s-app.theme-hubspot .s-logo {
  font-size: 0; /* hide text */
  width: 28px; height: 28px;
  background: #7C3AED; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px; padding: 0;
}
.s-app.theme-hubspot .s-logo::after {
  content: "K"; font-size: 14px; color: #fff;
  font-family: var(--sans); font-weight: 700;
}
.s-app.theme-hubspot .s-nav-label { display: none; }
.s-app.theme-hubspot .s-nav {
  width: 36px; height: 36px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 14px;
  color: rgba(255,255,255,0.4);
}
.s-app.theme-hubspot .s-nav.active {
  background: rgba(124,58,237,0.2); color: #C084FC;
}
.s-app.theme-hubspot .s-nav:hover:not(.active) { background: rgba(255,255,255,0.06); }
.s-app.theme-hubspot .s-badge { display: none; }

/* Tabs in header */
.s-header-tabs {
  display: flex; gap: 0;
  width: calc(100% + 40px); margin: 8px -20px -12px;
  border-top: 1px solid #E4E4E7;
}
.s-header-tab {
  padding: 8px 14px; font-size: 10px; font-weight: 600;
  color: #888; border-bottom: 2px solid transparent;
  cursor: pointer; transition: color 0.15s;
}
.s-header-tab:hover { color: #555; }
.s-header-tab.active { color: #7C3AED; border-bottom-color: #7C3AED; }

/* Header needs wrap for tabs row in hubspot theme */
.s-app.theme-hubspot .s-header {
  flex-wrap: wrap;
}

/* Header avatar */
.s-avatar-header {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff;
  flex-shrink: 0; letter-spacing: 0.02em;
}

/* Icon-only nav items (HubSpot theme) */
.s-nav-icon { font-family: sans-serif; }

/* ========== INTERACTIVE MOCKUP STATES ========== */
.s-nav { cursor: pointer; transition: all 0.15s var(--ease); border-radius: 5px; }
.s-nav:hover:not(.active) {
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.9);
}
.s-trow { cursor: default; transition: background 0.15s var(--ease); }
.s-trow:hover { background: rgba(245,197,24,0.04); }
.s-kcard { cursor: grab; transition: all 0.2s var(--ease); }
.s-kcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -4px rgba(0,0,0,0.12);
}
.s-kpi { cursor: default; transition: all 0.2s var(--ease); }
.s-kpi:hover {
  border-color: #bbb;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.06);
}
.s-btn {
  cursor: pointer; transition: all 0.2s var(--ease);
}
.s-btn:hover { opacity: 0.85; transform: scale(1.02); }
.s-chart-box { transition: border-color 0.2s var(--ease); }
.s-chart-box:hover { border-color: #ccc; }

/* Kanban drag hint */
.s-kcard:active { cursor: grabbing; transform: translateY(-4px) rotate(1deg); box-shadow: 0 12px 28px -8px rgba(0,0,0,0.2); }

/* Sidebar click interaction */
.s-nav:active { transform: scale(0.97); }

/* Tooltip hint on KPI hover */
.s-kpi { position: relative; }
.s-kpi::after {
  content: "Click to expand";
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%) translateY(100%);
  padding: 3px 8px; background: var(--black); color: #fff;
  border-radius: 4px; font-size: 8px; font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s var(--ease);
  white-space: nowrap; z-index: 10;
}
.s-kpi:hover::after { opacity: 0.7; }
.s-app.theme-command .s-kpi::after { background: #fff; color: #0A0A0A; }

/* (Old work section styles removed — now using scroll-pinned layout) */

/* ========== HOW IT WORKS ========== */
.steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.step {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 40px;
  padding: 40px 0;
  border-top: 1px solid var(--border-dark);
  overflow: visible;
}

.step:last-child { border-bottom: 1px solid var(--border-dark); }

.step-num {
  font-family: var(--sans);
  font-size: 48px;
  font-weight: 600;
  color: var(--amber);
  letter-spacing: -0.03em;
  line-height: 1.3;
  overflow: visible;
}

.step-body h3 {
  font-family: var(--sans);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.step-body p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 12px;
  max-width: 680px;
}

.step-meta {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--amber);
  text-transform: uppercase;
}

/* ========== PRICING ========== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

.pricing-card {
  position: relative;
  padding: 40px 36px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: all 0.35s var(--ease);
  overflow: visible;
  display: flex;
  flex-direction: column;
}
.pricing-card .btn {
  margin-top: auto !important;
}

.pricing-card:hover {
  border-color: var(--line-2);
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.08);
}

.pricing-card--featured {
  background: var(--ink);
  color: var(--white);
  border-color: rgba(245,197,24,0.2);
  transform: scale(1.03);
}

.pricing-card--featured:hover {
  transform: scale(1.03) translateY(-6px);
  border-color: var(--signal);
  box-shadow: 0 24px 48px -16px rgba(245,197,24,0.15);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--signal);
  color: var(--ink);
  padding: 6px 16px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.pricing-tier {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--slate);
  margin-bottom: 16px;
}

.pricing-card--featured .pricing-tier { color: var(--signal); }

.pricing-price {
  font-family: var(--sans);
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.3;
  margin-bottom: 8px;
  overflow: visible;
}

.pricing-price span {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate);
  margin-top: 4px;
  letter-spacing: 0;
}

.pricing-card--featured .pricing-price span { color: rgba(255,255,255,0.6); }

.pricing-monthly {
  font-size: 16px;
  font-weight: 600;
  color: var(--signal-deep);
  margin-bottom: 24px;
}

.pricing-desc {
  font-size: 15px;
  color: var(--slate);
  margin-bottom: 24px;
  line-height: 1.55;
}

.pricing-card--featured .pricing-desc { color: rgba(255,255,255,0.7); }

.pricing-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pricing-list li {
  display: flex;
  align-items: start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
}

.pricing-list li::before {
  content: "✓";
  color: var(--signal);
  font-weight: 700;
  flex-shrink: 0;
}

.pricing-note {
  text-align: center;
  font-size: 15px;
  color: var(--slate);
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 32px;
  background: var(--mist);
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
}

.pricing-note strong { color: var(--black); }

/* ========== PRICING HOW-IT-WORKS (Build / Run / Own) ========== */
.pricing-how {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1000px; margin: 0 auto 48px;
}
.pricing-how-item {
  padding: 28px 24px;
  background: var(--mist);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  position: relative;
}
.pricing-how-step {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px; font-weight: 600;
  color: var(--amber, #F5C518);
  letter-spacing: 0.14em;
  margin-bottom: 10px;
}
.pricing-how-item h3 {
  font-size: 20px; font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.pricing-how-item p {
  font-size: 14px; color: var(--slate);
  line-height: 1.55;
}

/* ========== FOUNDING CUSTOMER BOX ========== */
.pricing-founding {
  max-width: 860px; margin: 48px auto 32px;
  padding: 32px 36px;
  background: linear-gradient(135deg, rgba(245,197,24,0.08) 0%, rgba(245,197,24,0.02) 100%);
  border: 1px solid rgba(245,197,24,0.35);
  border-radius: var(--radius);
  position: relative;
}
.pricing-founding-tag {
  display: inline-block;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8b6a05;
  background: rgba(245,197,24,0.2);
  padding: 5px 10px; border-radius: 3px;
  margin-bottom: 14px;
}
.pricing-founding h3 {
  font-size: 24px; font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  color: var(--black);
}
.pricing-founding p {
  font-size: 15px; color: var(--slate);
  line-height: 1.6;
}
.pricing-founding strong { color: var(--black); font-weight: 600; }

/* Responsive */
@media (max-width: 768px) {
  .pricing-how { grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; }
  .pricing-how-item { padding: 20px 18px; }
  .pricing-how-item h3 { font-size: 18px; }
  .pricing-founding { margin: 32px 0; padding: 22px 20px; }
  .pricing-founding h3 { font-size: 20px; }
  .pricing-founding p { font-size: 14px; }
}

/* ========== AUDIT CTA ========== */
.section-accent {
  background: var(--signal);
  color: var(--ink);
  border-bottom-color: var(--signal-deep);
}

.audit-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.audit-inner .eyebrow-dark { margin-bottom: 0; }

.audit-title {
  font-family: var(--sans);
  font-size: clamp(30px, 4.6vw, 50px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0;
}

.audit-sub {
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
  max-width: 560px;
  color: rgba(10, 10, 10, 0.72);
}

.audit-inner .btn-white {
  margin-top: 8px;
  font-size: 16px;
  padding: 18px 32px;
}

.cta-mini-form {
  width: 100%;
  max-width: 620px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.cta-mini-field {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 6px;
}
.cta-mini-field span {
  font-size: 12px;
  font-weight: 500;
  color: rgba(10,10,10,0.7);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cta-mini-field input {
  padding: 14px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(10,10,10,0.18);
  border-radius: 2px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.cta-mini-field input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(10,10,10,0.08);
}
.cta-mini-submit {
  grid-column: 1 / -1;
  margin-top: 8px;
  opacity: 0.55;
  transition: opacity 0.25s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.cta-mini-submit.ready {
  opacity: 1;
}
.cta-mini-submit[disabled] {
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 640px) {
  .cta-mini-form { grid-template-columns: 1fr; max-width: 100%; gap: 10px; }
}

.audit-micro {
  font-size: 13px;
  color: rgba(10, 10, 10, 0.55);
  margin: 0;
  letter-spacing: 0.01em;
}

/* ========== FOOTER ========== */
.footer {
  background: var(--ink);
  color: var(--white);
  padding: 80px 0 32px;
}

.footer .logo-text { color: var(--white); }
.footer .stack-line:nth-child(1) { background: var(--signal); }
.footer .stack-line:nth-child(2) { background: var(--white); }
.footer .stack-line:nth-child(3) { background: var(--white); }

.footer-top {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--border-dark);
  margin-bottom: 32px;
}

.footer-brand p {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  max-width: 280px;
}

.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.footer-links h4 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 16px;
}

.footer-links a {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 12px;
  transition: color 0.2s var(--ease);
}

.footer-links a:hover { color: var(--signal); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.01em;
}
.footer-legal a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-legal a:hover { color: var(--signal); }

/* ========== MOBILE MENU ========== */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  cursor: pointer;
  z-index: 101;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.mobile-menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--black);
  border-radius: 2px;
  transition: all 0.3s var(--ease);
}
.mobile-menu-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
}
.mobile-menu-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 0;
  padding: 8px 24px 24px;
  background: rgba(245,243,238,0.98);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
}
.mobile-menu.open {
  display: flex;
}
.mobile-menu a {
  padding: 14px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--black);
  border-bottom: 1px solid var(--border-light);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.mobile-menu a:last-child {
  border-bottom: none;
}
.mobile-menu-section {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mute);
  padding: 18px 0 6px;
  border-bottom: 1px solid var(--border-light);
}

/* ========== MARKETING SERVICES ========== */
.marketing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.marketing-card {
  padding: 36px;
  background: var(--ink-2);
  border-radius: var(--radius);
  border: 1px solid var(--border-dark);
  transition: border-color 0.3s var(--ease);
  display: flex;
  flex-direction: column;
}

.marketing-card:hover {
  border-color: rgba(255,255,255,0.15);
}

.marketing-icon {
  color: var(--signal);
  font-size: 14px;
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border-radius: 50%;
  border: 1px solid rgba(245, 197, 24, 0.4);
}

.marketing-card h3 {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  color: var(--white);
}

.marketing-card p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  flex: 1;
  margin-bottom: 20px;
}

.marketing-price {
  font-family: var(--sans);
  font-size: 28px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.marketing-price span {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.5);
}

.marketing-bundle {
  margin-bottom: 40px;
}

.marketing-bundle-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 40px;
  background: var(--ink-2);
  border: 1px solid var(--signal);
  border-radius: var(--radius);
}

.marketing-bundle-inner h3 {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.marketing-bundle-inner p {
  font-size: 15px;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  max-width: 520px;
}

.marketing-bundle-price {
  text-align: center;
  flex-shrink: 0;
}

.marketing-price-big {
  font-family: var(--sans);
  font-size: 40px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1.3;
  margin-bottom: 16px;
}

.marketing-price-big span {
  font-size: 16px;
  font-weight: 400;
  color: rgba(255,255,255,0.5);
}

.marketing-footer {
  text-align: center;
  padding-top: 16px;
}

@media (max-width: 768px) {
  .marketing-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .marketing-card { padding: 28px 24px; }
  .marketing-card h3 { font-size: 18px; }
  .marketing-price { font-size: 24px; }
  .marketing-bundle-inner {
    flex-direction: column;
    text-align: center;
    padding: 32px 24px;
    gap: 24px;
  }
  .marketing-bundle-inner p { max-width: none; }
  .marketing-price-big { font-size: 32px; }
}

@media (max-width: 480px) {
  .marketing-grid { grid-template-columns: 1fr; gap: 12px; }
  .marketing-card { padding: 24px 20px; }
  .marketing-bundle-inner { padding: 24px 20px; }
  .marketing-bundle-inner h3 { font-size: 20px; }
  .btn-cta { width: 100%; justify-content: center; }
}

/* ========== FAQ SECTION ========== */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.faq-item {
  padding: 28px 32px;
  background: var(--ink-2);
  border-radius: var(--radius);
  border: 1px solid var(--border-dark);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
  cursor: pointer;
  user-select: none;
}
.faq-item:hover {
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.02);
}
.faq-item.open {
  border-color: rgba(255,255,255,0.18);
}
.faq-q {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: margin-bottom 0.3s var(--ease);
}
.faq-toggle {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  position: relative;
  opacity: 0.5;
  transition: opacity 0.25s var(--ease), transform 0.3s var(--ease);
}
.faq-item:hover .faq-toggle { opacity: 0.9; }
.faq-toggle::before,
.faq-toggle::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 12px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease), opacity 0.25s var(--ease);
}
.faq-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.faq-item.open .faq-toggle {
  opacity: 1;
  transform: rotate(180deg);
}
.faq-item.open .faq-toggle::after { opacity: 0; }
.faq-item.open .faq-q { margin-bottom: 16px; }
.faq-a {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.65);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  transition: max-height 0.4s var(--ease), opacity 0.3s var(--ease);
}
.faq-item.open .faq-a {
  max-height: 240px;
  opacity: 1;
}

/* Hover-to-expand on devices with a real pointer (desktop).
   Touch devices fall back to tap via the click handler. */
@media (hover: hover) and (pointer: fine) {
  .faq-item:hover { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.03); }
  .faq-item:hover .faq-q { margin-bottom: 16px; }
  .faq-item:hover .faq-a { max-height: 240px; opacity: 1; }
  .faq-item:hover .faq-toggle { opacity: 1; transform: rotate(180deg); }
  .faq-item:hover .faq-toggle::after { opacity: 0; }
}

/* ============================================================
   RESPONSIVE — TABLET (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* -- Global -- */
  .container { padding: 0 20px; }
  .section { padding: 72px 0; }
  .section-head { margin-bottom: 40px; }
  .section-head h2 { font-size: clamp(30px, 6vw, 48px); }
  .section-sub { font-size: 16px; }

  /* -- Nav -- */
  .nav-links { display: none; }
  .nav-cta-desktop { display: none; }
  .nav-signin { display: none; }
  .mobile-menu-btn { display: flex; }

  /* -- Hero -- */
  .hero-outer {
    /* No overshoot now that the industries band lives below the hero
       as its own section. Hero is exactly 100dvh — the band starts
       right at the fold so visitors have to scroll one tap to see it. */
    min-height: 100vh; min-height: 100dvh;
    padding-top: 80px; padding-bottom: 24px;
    align-items: stretch; /* let .hero-text fill vertical space on mobile */
  }
  .hero-video-wrap { display: none; }
  .hero-text {
    /* Eyebrow pinned near the top of the dark area — the previous 100px
       top padding pushed everything down into the middle. */
    max-width: 100%; padding: 24px 24px 0px;
    opacity: 1 !important; transform: none !important; animation: none !important;
    text-align: left;
    display: flex; flex-direction: column;
    width: 100%;
  }
  .hero-eyebrow { justify-content: flex-start; order: 1; }
  /* Header (eyebrow → title → sub) sits at the top with natural flow.
     CTA is pushed to the bottom by margin-top: auto, so all extra
     vertical space lands between the header and the buttons. */
  .hero-text .hero-title {
    font-size: 36px; line-height: 1.15; order: 2; padding-top: 0;
    margin-top: 0; margin-bottom: 0;
  }
  /* Keep the line break on mobile so "Stop paying for" sits on its own
     line and the typewriter word gets its own full row below. */
  .hero-text .hero-title br { display: inline !important; }
  .typewriter-wrap {
    display: inline-block;
    white-space: nowrap;
    max-width: 100%;
  }
  /* Shrink the whole title a touch on small screens so "15 different tools"
     always fits on one line without wrapping mid-phrase. */
  .hero-text .hero-title { font-size: clamp(28px, 8.5vw, 36px); }
  .hero-text .hero-sub {
    font-size: 16px; text-align: left; margin-left: 0; order: 3;
    margin-top: 14px; /* stays tight with title — no auto margin */
  }
  /* Hide proof stats from hero on mobile — they show in the next section */
  .hero-text .hero-proof {
    display: none;
  }
  .hero-text .hero-cta {
    flex-direction: column; width: 100%; justify-content: flex-start;
    order: 5; margin-top: auto; margin-bottom: 0;
    padding-top: 0;
  }
  .hero-text .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-micro { order: 6; }
  .hero-text .proof-item { flex: 1; }
  .hero-text .proof-num { font-size: 28px; }
  .hero-text .proof-label { font-size: 11px; max-width: none; }

  /* -- Ticker -- */
  .ticker-track {
    font-size: 28px;
    gap: 24px;
    padding: 14px 0;
  }
  .ticker-dot { width: 7px; height: 7px; }

  /* -- Problem -- */
  .problem-grid { grid-template-columns: 1fr; }
  .problem-card { padding: 36px 28px; }

  /* -- Solution features -- */
  .solution-features { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .feature { padding: 32px 24px; }

  /* -- Work section — TABBED mobile layout -- */
  .section-work-scroll { padding-bottom: 0; }
  .work-intro { padding: 64px 0 24px; }
  .work-intro .section-head { margin-bottom: 0; }
  .work-intro .section-head h2 { font-size: 26px; }
  .work-intro .section-sub { font-size: 14px; }

  .scroll-project { border-top: 1px solid var(--line); }
  .scroll-track { min-height: auto !important; height: auto !important; }
  .scroll-sticky {
    position: relative !important;
    flex-direction: column;
    padding: 24px 0;
    gap: 16px;
    height: auto !important;
    min-height: auto !important;
  }

  /* Flatten scroll-left so its children become flex items of scroll-sticky —
     lets us reorder everything (meta, stats, steps, cta) next to the iPad. */
  .scroll-left { display: contents; }
  .scroll-meta   { padding: 0 20px; order: 1; margin-bottom: 4px; }
  .scroll-stats  { padding: 0 20px; order: 2; margin: 0 0 12px; }
  /* Bump horizontal margin from 12px → 20px so the tab row doesn't touch
     the screen edge. Matches the rest of the page's mobile gutter. */
  .scroll-steps  { padding: 4px !important; margin: 0 20px 10px !important; order: 3; }
  /* On mobile, swap to the shorter labels to keep the 3-up segmented
     control readable. */
  .scroll-step .lbl-full { display: none; }
  .scroll-step .lbl-short { display: inline; }
  .scroll-right  {
    height: auto; width: 100%; max-width: 100%; max-height: none;
    position: relative; padding: 0 20px; overflow: hidden; box-sizing: border-box;
    order: 4;
  }
  .scroll-cta    { padding: 0 20px; order: 5; margin-top: 18px !important; }

  /* Screens — JS toggles .active */
  .scroll-screen {
    position: absolute !important;
    top: 0; left: 0; right: 0;
    width: auto; max-width: 100%; box-sizing: border-box;
    opacity: 0 !important; transform: none !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease;
  }
  .scroll-screen.active {
    position: relative !important;
    width: 100%; max-width: 100%;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Hide step descriptions, step-nums — just use text tabs */
  .scroll-step p { display: none !important; }
  .scroll-step .step-num { display: none !important; }

  /* iPad-style frame — grows with content; nothing spills past the bottom */
  .scrn {
    padding: 18px 14px 14px;
    border-radius: 22px;
    width: 100%; max-width: 360px; margin: 0 auto; box-sizing: border-box;
    aspect-ratio: auto !important;
    height: auto !important; min-height: 0;
    position: relative;
    box-shadow:
      0 24px 60px -20px rgba(0,0,0,0.55),
      0 2px 0 rgba(255,255,255,0.08) inset,
      0 -1px 0 rgba(0,0,0,0.5) inset;
  }
  /* Faux iPad status bar — sells the "this is a device" look */
  .scrn::before {
    content: '';
    position: absolute;
    top: 7px; left: 50%; transform: translateX(-50%);
    width: 48px; height: 3px; border-radius: 2px;
    background: rgba(255,255,255,0.12);
  }
  .s-app {
    width: 100%; max-width: 100%;
    height: 440px; min-height: 440px; max-height: 440px; /* identical height across every project/tab */
    overflow: hidden; box-sizing: border-box; min-width: 0;
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset;
  }
  /* Inner layout fills the fixed-height app so every iPad renders identically */
  .s-body { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; }
  .s-main { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
  .s-content { flex: 1 1 auto; overflow: hidden; min-height: 0; }
  .scroll-right { overflow: visible; }
  .s-app { font-size: 9px; border-radius: 6px; }
  .s-side { display: none; }
  .s-bar { padding: 6px 10px; }
  .s-url { font-size: 7px; padding: 2px 6px; }
  .s-dot { width: 7px; height: 7px; }
  .s-header { padding: 8px 12px; flex-wrap: wrap; gap: 4px; }
  .s-title { font-size: 11px; }
  .s-sub { font-size: 8px; }
  .s-btn { font-size: 8px; padding: 3px 8px; }
  .s-content { padding: 8px 12px; gap: 8px; }
  .s-kpis { grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .s-kpi { padding: 6px 8px; }
  .s-kpi-label { font-size: 6px; }
  .s-kpi-val { font-size: 13px; }
  .s-kpi-delta { font-size: 7px; }
  .s-kpi::after { display: none; }
  .s-chart-box { padding: 8px; }
  .s-chart-title { font-size: 8px; }
  .s-chart-legend { font-size: 7px; }
  .s-kanban { gap: 4px; }
  .s-kcol { padding: 5px; gap: 3px; }
  .s-khead { font-size: 7px; padding: 0 2px 3px; }
  .s-kcount { font-size: 6px; padding: 1px 4px; }
  .s-kcard { padding: 5px 6px; }
  .s-kname { font-size: 8px; }
  .s-ksub { font-size: 6px; }
  .s-table { font-size: 8px; }
  .s-thead { font-size: 6px; padding: 5px 6px; }
  .s-trow { font-size: 8px; padding: 5px 6px; }
  .s-avatar { width: 16px; height: 16px; font-size: 6px; }
  .s-pill { font-size: 6px; padding: 1px 5px; }
  .s-name { gap: 4px; }
  .s-breadcrumb { font-size: 6px; }
  .s-avatar-header { width: 18px; height: 18px; font-size: 7px; }
  .cmd-status { font-size: 7px; padding: 3px 10px; gap: 6px; }
  .cmd-status-dot { width: 4px; height: 4px; }
  .s-toolbar { padding: 5px 10px; gap: 3px; }
  .s-toolbar-btn { font-size: 7px; padding: 2px 6px; }
  .s-toolbar-search { font-size: 7px; width: 60px; padding: 2px 6px; }
  .s-tl-item { padding: 5px 6px; gap: 6px; }
  .s-tl-dot { width: 14px; height: 14px; }
  .s-tl-body strong { font-size: 8px; }
  .s-tl-time { font-size: 6px; }
  .s-header-tabs { margin: 4px -12px -8px; }
  .s-header-tab { padding: 5px 8px; font-size: 7px; }
  .s-nav-label { font-size: 6px; }

  /* Tab bar — iOS-style segmented control (grid = every button exactly equal) */
  .scroll-meta { margin-bottom: 14px; }
  .scroll-meta .scroll-tag { font-size: 10px; padding: 3px 10px; }
  .scroll-meta span { font-size: 12px; }
  .scroll-steps {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    margin: 0 0 18px;
    background: rgba(10,10,10,0.06);
    border: none !important;
    border-radius: 10px;
    padding: 4px;
    overflow: visible;
    width: 100%;
    box-sizing: border-box;
  }
  .scroll-step {
    width: 100%;
    min-width: 0;
    padding: 8px 4px;
    gap: 0;
    background: transparent !important;
    border: none !important;
    border-right: none !important;
    box-shadow: none !important;
    border-radius: 7px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 38px;
    height: 38px;
    cursor: pointer;
    opacity: 1 !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none; user-select: none;
    transition: background 0.24s cubic-bezier(0.4,0,0.2,1), color 0.2s ease, box-shadow 0.24s cubic-bezier(0.4,0,0.2,1), transform 0.1s ease;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
  }
  .scroll-step:active {
    transform: scale(0.97);
  }
  .scroll-step.active {
    background: #ffffff !important;
    box-shadow:
      0 1px 2px rgba(10,10,10,0.08),
      0 2px 8px rgba(10,10,10,0.06) !important;
  }
  .scroll-step h3 {
    font-size: 10.5px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-weight: 500;
    color: var(--mute);
    transition: color 0.2s ease, font-weight 0.2s ease;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .scroll-step.active h3 {
    color: var(--ink);
    font-weight: 600;
  }
  .scroll-stats {
    display: flex; gap: 0; font-size: 11px;
    flex-wrap: nowrap; justify-content: space-between;
    margin: 0 0 14px !important; /* sit above the buttons */
    padding: 12px 16px;
    background: var(--paper-2);
    border-radius: 8px;
  }
  .scroll-stats > div { flex: 1; text-align: center; }
  .scroll-stats strong { font-size: 15px; display: block; }
  .scroll-cta {
    font-size: 13px;
    display: inline-block;
    padding: 10px 0;
    font-weight: 600;
  }

  /* -- How it Works -- */
  .step {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 32px 0;
  }

  /* -- Pricing -- */
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card--featured {
    transform: none;
  }
  .pricing-card--featured:hover {
    transform: translateY(-4px);
  }

  /* -- FAQ -- */
  .faq-grid { grid-template-columns: 1fr; }

  /* -- Audit CTA -- */
  .audit-form { flex-direction: column; }
  .audit-form input { width: 100%; min-width: 0; }
  .audit-form .btn { width: 100%; justify-content: center; }

  /* -- Footer -- */
  .footer-top {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .footer-bottom { flex-direction: column; gap: 8px; }
}

/* ============================================================
   RESPONSIVE — PHONE (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {
  .container { padding: 0 20px; }

  .section { padding: 56px 0; }
  .section-head { margin-bottom: 36px; }
  .section-head h2 { font-size: clamp(26px, 7vw, 36px); }
  .section-sub { font-size: 15px; }

  /* -- Nav -- */
  .nav-inner { padding: 0 16px; }
  .logo { font-size: 18px; gap: 8px; }
  .logo-mark { width: 18px; }

  /* -- Hero -- */
  .hero-text { padding: 20px 20px 0px; }
  .hero-text .hero-title { font-size: 30px; }
  .hero-text .hero-sub { font-size: 15px; margin-bottom: 16px; }
  .hero-eyebrow { font-size: 10px; gap: 6px; }
  .hero-text .hero-cta { margin-bottom: 0; gap: 12px; }
  .hero-text .hero-proof { padding: 20px 0; margin-bottom: 20px; }
  .hero-text .proof-num { font-size: 24px; }
  .hero-text .proof-label { font-size: 10px; }

  /* -- Ticker -- */
  .ticker-track {
    font-size: 24px;
    gap: 20px;
    padding: 12px 0;
  }
  .ticker-dot { width: 6px; height: 6px; }

  /* -- Problem -- */
  .problem-card { padding: 28px 20px; }
  .problem-card h3 { font-size: 20px; }
  .problem-card p { font-size: 14px; }
  .problem-num { font-size: 13px; margin-bottom: 16px; }

  /* -- Solution -- */
  .solution-features { grid-template-columns: 1fr; gap: 16px; }
  .feature { padding: 28px 20px; }
  .feature h3 { font-size: 19px; }
  .feature p { font-size: 14px; }

  /* -- Scroll work (480px refinements) -- */
  .scroll-sticky { padding: 20px 0; gap: 12px; }
  .scroll-left { padding: 0 16px; }
  .scroll-right { padding: 0 16px; }
  .scroll-step h3 { font-size: 10px; }
  .scroll-stats strong { font-size: 14px; }
  .scroll-stats { font-size: 10px; }
  .scroll-cta { font-size: 12px; }

  /* -- How it Works -- */
  .step { padding: 28px 0; gap: 12px; }
  .step > .step-num { font-size: 36px; }
  .step-body h3 { font-size: 22px; }
  .step-body p { font-size: 15px; }

  /* -- Mid-page CTA button — full width on small screens -- */
  #how + .section-dark .btn,
  .section-dark .container[style*="text-align:center"] .btn {
    width: 100%;
    justify-content: center;
  }

  /* -- Pricing -- */
  .pricing-card { padding: 28px 20px 32px; }
  .pricing-price { font-size: 36px; }
  .pricing-desc { font-size: 14px; }
  .pricing-list { margin-bottom: 8px; }
  .pricing-list li { font-size: 14px; }
  .pricing-card .btn { margin-top: 28px !important; padding: 14px 18px; }
  .pricing-note { padding: 20px; font-size: 14px; }

  /* -- FAQ -- */
  .faq-item { padding: 24px 20px; }
  .faq-q { font-size: 16px; }
  .faq-a { font-size: 14px; }

  /* -- Audit CTA -- */
  .section-accent { padding: 48px 0; }
  .audit-inner { gap: 16px; }
  .audit-title { font-size: clamp(24px, 7vw, 36px); }
  .audit-sub { font-size: 15px; }

  /* -- Footer -- */
  .footer { padding: 56px 0 24px; }
  .footer-top { gap: 32px; padding-bottom: 40px; }
  .footer-links { grid-template-columns: 1fr; gap: 24px; }
  .footer-links a { min-height: 44px; display: flex; align-items: center; }
}

/* ============================================================
   RESPONSIVE — SMALL PHONE (max-width: 375px)
   ============================================================ */
@media (max-width: 375px) {
  .container { padding: 0 16px; }
  .nav-inner { padding: 0 12px; }

  .hero-text { padding: 16px 16px 0px; }
  .hero-text .hero-title { font-size: 26px; }
  .hero-text .hero-sub { font-size: 14px; }
  .hero-eyebrow { font-size: 9px; }
  .hero-text .proof-num { font-size: 22px; }
  .hero-text .proof-label { font-size: 10px; }

  .section-head h2 { font-size: 24px; }
  .section-sub { font-size: 14px; }

  .ticker-track { font-size: 20px; gap: 16px; padding: 10px 0; }
  .ticker-dot { width: 5px; height: 5px; }

  .problem-card { padding: 24px 16px; }
  .problem-card h3 { font-size: 18px; }
  .problem-card p { font-size: 14px; }

  .feature { padding: 24px 16px; }
  .feature h3 { font-size: 18px; }
  .feature p { font-size: 14px; }

  /* Scroll work — DO NOT reintroduce fixed height; 768px set it to auto */
  .scroll-sticky { padding: 20px 12px; gap: 16px; }
  .scroll-step h3 { font-size: 13px; }
  .scroll-step .step-num { width: 22px; height: 22px; font-size: 10px; }
  .scroll-stats strong { font-size: 14px; }
  .scroll-stats { font-size: 10px; }
  .scroll-cta { font-size: 12px; }

  .step-body h3 { font-size: 20px; }
  .step-body p { font-size: 14px; }
  .step > .step-num { font-size: 32px; }

  .pricing-card { padding: 24px 16px; }
  .pricing-price { font-size: 32px; }
  .pricing-tier { font-size: 13px; }
  .pricing-monthly { font-size: 15px; }
  .pricing-desc { font-size: 14px; }
  .pricing-list li { font-size: 13px; }

  .faq-item { padding: 20px 16px; }
  .faq-q { font-size: 15px; }
  .faq-a { font-size: 14px; }

  .audit-title { font-size: 22px; }
  .audit-sub { font-size: 14px; }

  .footer-brand p { font-size: 13px; }
  .footer-links a { font-size: 14px; }
  .footer-bottom { font-size: 12px; }
}

/* ============================================================
   GLOBAL MOBILE SAFETY — Prevent horizontal scroll
   ============================================================ */
/* overflow-x: hidden only on mobile — breaks position:sticky on desktop */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
}