/* ============================================
   Form Link — Design System & Global Styles
   ============================================ */

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
  /* Brand green ramp — 50-200 are tints for surfaces, 300/400 are the
     dark-theme accent stops, 500-900 are fills for white text. */
  --brand-50: #F1F8F4;
  --brand-100: #E3F0EA;
  --brand-200: #C1DED0;
  --brand-300: #24D67D;
  --brand-400: #20C073;
  --brand-500: #12824C;
  --brand-600: #0A6638;
  --brand-700: #085530;
  --brand-800: #064427;
  --brand-900: #042B18;

  /* Canonical accent vocabulary — same names as the extension's theme.css.
     The --brand-* ramp above is the tint scale; these are the roles. */
  --theme-accent: var(--brand-500);
  --theme-accent-hover: var(--brand-600);
  --theme-accent-subtle: var(--brand-50);
  --glow: rgba(18, 130, 76, 0.3);
  --glow-strong: rgba(18, 130, 76, 0.45);
  --shadow-glow: 0 4px 14px rgba(18, 130, 76, 0.25);
  --shadow-glow-strong: 0 6px 20px rgba(18, 130, 76, 0.35);

  /* Panel wash — the tint behind large sections and cards.
     Gold, not green, and deliberately a different role from --theme-accent-*.
     A green wash puts the green CTA button on a green ground, so the section
     reads monochrome and the button stops being the thing your eye lands on.
     Gold is the Triforce accent from the brand doc and sits in the same warm
     family as the cream page ground, so it recedes while the button advances.

     Use these for section/card BACKGROUNDS only. Accent hover feedback and
     brand iconography (.btn-secondary:hover, .testimonial-avatar,
     .hiw-step-num) stay on the green ramp — there the tint IS the accent.
     Data chips (.form-tag) use --chip-* instead. The homepage flow steps
     moved to a soft --accent-surface tint on 2026-08-18 at the owner's
     request; --chip-text still carries their labels. */
  --wash: #FBF6E8;          /* gold @ 10% over white */
  --wash-strong: #F7EED5;   /* gold @ 18% over white */

  /* RGB channels for inline opacity use */
  --accent-rgb: 18, 130, 76;       /* --brand-500 */
  --accent-dark-rgb: 4, 43, 24;    /* --brand-900 */
  --theme-gold-rgb: 212, 160, 23;
  --theme-info-rgb: 26, 86, 168;
  --white: #ffffff;

  /* Pre-mixed accent tints */
  --accent-tint-06: rgba(18, 130, 76, 0.06);
  --accent-tint-08: rgba(18, 130, 76, 0.08);
  --accent-tint-10: rgba(18, 130, 76, 0.10);
  --accent-tint-12: rgba(18, 130, 76, 0.12);
  --accent-tint-15: rgba(18, 130, 76, 0.15);
  --accent-tint-20: rgba(18, 130, 76, 0.20);
  --accent-tint-25: rgba(18, 130, 76, 0.25);
  --accent-dark-tint-10: rgba(4, 43, 24, 0.10);
  --accent-dark-tint-15: rgba(4, 43, 24, 0.15);
  --accent-dark-tint-20: rgba(4, 43, 24, 0.20);

  /* Data chips (form-type tags): quiet neutral metadata — icons and words
     carry them. Blue was tried (2026-08-11) and reverted: with the ink-blue
     rows living only in the hero, chips were the lone blue in the products
     viewport. Gold stays for emphasis. The homepage product-door flow steps
     are the one sanctioned exception — they take a soft green --accent-surface
     tint (2026-08-18) because they name the product's own sequence.
     These reference theme surface tokens, so no dark override is needed. */
  --chip-bg: var(--bg-alt);
  --chip-border: var(--border);
  --chip-text: var(--text-secondary);

  /* Hero gradient — forest green (left) + gold (right) */
  --gradient-hero:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(18, 130, 76, 0.18), transparent),
    radial-gradient(ellipse 65% 55% at 80% 15%, rgba(212, 160, 23, 0.20), transparent);
  --gradient-hero-2point: var(--gradient-hero);

  /* Status */
  --success: #12824C;
  --warning: #FBC02D;
  --error: #D32F2F;
  --info: #1A56A8;

  /* Accent roles — always use these for accent-colored TEXT, never the raw
     ramp. The ramp's 500–900 stops are dark greens built for white text on a
     green fill; used as text they need a light background behind them. These
     roles re-point at the ramp's light stops under [data-theme="dark"] so
     accent text stays legible when the surface underneath flips dark. */
  --accent-text: var(--brand-600);         /* 6.5:1 on --bg */
  --accent-text-hover: var(--brand-800);
  --accent-text-strong: var(--brand-700);  /* on --accent-surface */
  --accent-surface: var(--brand-50);
  --accent-surface-strong: var(--brand-100);
  --accent-border: var(--brand-200);

  /* Light theme (default) */
  --text-primary: #1C2E24;
  --text-secondary: #4A5E50;
  --text-tertiary: #7A8C7E;
  --border: #DDD8CC;
  --border-light: #EAE5D9;
  --bg: #FBF9F4;
  --bg-alt: #F3EEE3;
  --nav-bg: rgba(251, 249, 244, 0.85);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* Layout */
  --max-width: 1200px;
  --nav-height: 72px;

  /* Typography */
  --font-heading: 'Outfit', sans-serif;
  --font-body: -apple-system, 'BlinkMacSystemFont', 'SF Pro Display', 'Segoe UI', 'Roboto', sans-serif;
  --font-size-base: 18px;
  --line-height-base: 1.6;
  --line-height-heading: 1.15;
}

/* --- Dark Mode --- */
[data-theme="dark"] {
  /* Translucent rather than solid, so the wash composites over whatever ground
     it lands on instead of punching a lighter panel into the dark page. */
  --wash: rgba(212, 160, 23, 0.07);
  --wash-strong: rgba(212, 160, 23, 0.12);

  --text-primary: #EBECE1;
  --text-secondary: #A8B8AC;
  --text-tertiary: #6A8070;
  --border: #333533;
  --border-light: #252725;
  --bg: #131413;
  --bg-alt: #1A1C1A;
  --nav-bg: rgba(19, 20, 19, 0.85);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);

  /* Flip the accent roles to the ramp's light stops. The 500–900 greens are
     near-black against --bg and drop to ~1.6:1 as text; 300/400 clear 10:1. */
  --accent-text: var(--brand-400);         /* 11:1 on --bg */
  --accent-text-hover: var(--brand-300);
  --accent-text-strong: var(--brand-300);  /* on --accent-surface */
  --accent-surface: rgba(18, 130, 76, 0.14);
  --accent-surface-strong: rgba(18, 130, 76, 0.22);
  --accent-border: rgba(32, 192, 115, 0.30);
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: var(--line-height-base);
  color: var(--text-primary);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

body.menu-open {
  overflow: hidden;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

a {
  color: var(--accent-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--accent-text-hover);
}

ul, ol {
  list-style: none;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--text-primary);
}

h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  letter-spacing: -0.015em;
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

p {
  color: var(--text-secondary);
  max-width: 65ch;
}

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

/* --- Layout --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section {
  padding: var(--space-24) 0;
}

.section-alt {
  background-color: var(--bg-alt);
}

.section-purple {
  background-color: var(--wash);
}

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-16);
}

.section-header p {
  margin: var(--space-4) auto 0;
  font-size: 1.125rem;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background-color: var(--brand-500);
  color: var(--white);
  box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
  background-color: var(--brand-600);
  color: var(--white);
  box-shadow: var(--shadow-glow-strong);
}

.btn-secondary {
  background-color: transparent;
  color: var(--accent-text);
  border-color: var(--brand-500);
}

.btn-secondary:hover {
  background-color: var(--brand-50);
  color: var(--accent-text);
  border-color: var(--brand-600);
}

[data-theme="dark"] .btn-secondary:hover {
  background-color: var(--accent-tint-10);
}

.btn:disabled,
.btn-disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

.btn-lg {
  padding: var(--space-4) var(--space-12);
  font-size: 1.125rem;
}

.btn-sm {
  padding: var(--space-2) var(--space-6);
  font-size: 0.875rem;
}

/* --- Navigation --- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
  transition: background-color 0.3s ease;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--text-primary);
}

.nav-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--brand-500);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.nav-monogram img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nav-wordmark {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text-primary);
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav-link {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
  position: relative;
}

.nav-link:hover,
.nav-link.active {
  color: var(--text-primary);
}

.nav-link-disabled,
.mobile-menu-link-disabled,
.footer-link-disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

/* Nav dropdown */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  background: none;
  border: none;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-secondary);
  font-family: var(--font-body);
  transition: color 0.2s ease;
}

.nav-dropdown-trigger:hover {
  color: var(--text-primary);
}

.nav-dropdown-trigger svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.nav-dropdown:hover .nav-dropdown-trigger svg,
.nav-dropdown:focus-within .nav-dropdown-trigger svg,
.nav-dropdown.open .nav-dropdown-trigger svg {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
}

.nav-dropdown-item {
  display: block;
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
}

.nav-dropdown-item:hover {
  background-color: var(--brand-50);
  color: var(--accent-text);
}

[data-theme="dark"] .nav-dropdown-item:hover {
  background-color: var(--accent-tint-10);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.theme-toggle:hover {
  border-color: var(--brand-500);
  color: var(--accent-text);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

/* Mobile menu */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--text-primary);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.nav-hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.nav-hamburger.active span:nth-child(2) {
  opacity: 0;
}

.nav-hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

.mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  padding: var(--space-8) var(--space-6);
  overflow-y: auto;
  z-index: 999;
}

.mobile-menu.active {
  display: block;
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mobile-menu-link {
  display: block;
  padding: var(--space-4) 0;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-light);
}

.mobile-menu-group-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-6) 0 var(--space-2);
}

.mobile-menu-sublink {
  display: block;
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  font-size: 1rem;
  color: var(--text-secondary);
  text-decoration: none;
}

.mobile-menu-cta {
  margin-top: var(--space-8);
}

.mobile-menu-theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-light);
}

.mobile-menu-theme-label {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text-primary);
}

.mobile-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.mobile-theme-toggle:hover {
  border-color: var(--brand-500);
  color: var(--accent-text);
}

.mobile-theme-toggle svg {
  width: 20px;
  height: 20px;
}

/* --- Hero Section --- */
.hero {
  position: relative;
  padding: calc(var(--nav-height) + var(--space-24)) 0 var(--space-24);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: var(--gradient-hero);
  pointer-events: none;
}

.hero-content {
  position: relative;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.hero h1 {
  margin-bottom: var(--space-6);
}

.hero-subtitle {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto var(--space-8);
  line-height: 1.5;
}

.hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-16);
}

/* Demo CTA — the "Book a Demo" block used on /, /paper and how-it-works.
   Named for the waitlist it used to be until GAL-361 removed on-site signup;
   renamed in GAL-420 along with the input/success/error rules that belonged to
   that retired form and no longer matched any markup. */
.demo-cta {
  width: 100%;
}

.demo-cta-btn {
  white-space: nowrap;
}

/* The reassurance line under the Book-a-Demo button — was flush against
   the button (no rule at all, reset margins only). */
.demo-cta-note {
  margin-top: var(--space-4);
  font-size: 0.875rem;
  color: var(--text-tertiary);
}

/* Subtitle above a CTA-section button. */
.cta-sub {
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
  font-size: 1.1875rem;
  text-align: center;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* The demo CTA inside a CTA section (gradient bg) — narrower and centred. */
.demo-cta--centered {
  max-width: 360px;
  margin: 0 auto;
  text-align: center;
}

.hero-visual {
  position: relative;
  max-width: 700px;
  margin: var(--space-16) auto 0;
}

.hero-mockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-8);
}

.hero-phone {
  width: 140px;
  height: 280px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  box-shadow: var(--shadow-md);
  position: relative;
}

.hero-phone-notch {
  position: absolute;
  top: 8px;
  width: 50%;
  height: 16px;
  background: var(--border);
  border-radius: var(--radius-pill);
}

.hero-phone-icon {
  color: var(--accent-text);
}

.hero-phone-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.hero-arrow {
  color: var(--accent-text);
  flex-shrink: 0;
}

.hero-browser {
  width: 280px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.hero-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}

.hero-browser-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.hero-browser-dot:nth-child(1) { background: var(--error); }
.hero-browser-dot:nth-child(2) { background: var(--warning); }
.hero-browser-dot:nth-child(3) { background: var(--success); }

.hero-browser-content {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hero-form-field {
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--brand-100);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .hero-form-field {
  background: var(--accent-tint-15);
}

.hero-form-field::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 60%, var(--brand-200));
  animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.hero-form-field:nth-child(odd) {
  width: 85%;
}

.hero-checkmark {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  color: var(--success);
  font-size: 0.875rem;
  font-weight: 600;
}

/* --- Steps Section (How It Works brief) --- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  max-width: 960px;
  margin: 0 auto;
}

.section-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-12);
}

.step {
  text-align: center;
  padding: var(--space-8) var(--space-6);
}

.step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--accent-surface-strong);
  color: var(--accent-text-strong);
  border-radius: var(--radius-lg);
  margin: 0 auto var(--space-4);
}

.step-icon svg {
  width: 28px;
  height: 28px;
}

.step h3 {
  margin-bottom: var(--space-3);
}

.step p {
  margin: 0 auto;
  font-size: 1rem;
}

/* --- Value Proposition --- */
.value-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.value-content h2 {
  margin-bottom: var(--space-6);
}

.value-content p {
  margin-bottom: var(--space-4);
  font-size: 1.125rem;
}

.value-highlight {
  color: var(--accent-text);
  font-weight: 700;
}

.value-stat {
  background: linear-gradient(135deg, var(--wash), var(--wash-strong));
  /* Gold border to match the gold wash — a green tint here reads as a clash.
     Translucent gold holds on both themes, so no dark override needed. */
  border: 1px solid rgba(var(--theme-gold-rgb), 0.35);
  border-radius: var(--radius-xl);
  padding: var(--space-12);
  text-align: center;
}

.value-stat-number {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--accent-text);
  line-height: 1;
  margin-bottom: var(--space-3);
}

.value-stat-label {
  font-size: 1.125rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.value-stat-sub {
  font-size: 0.875rem;
  color: var(--text-tertiary);
  margin-top: var(--space-2);
}

/* --- Trust Section --- */
.trust-headline {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: var(--space-12);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  max-width: 800px;
  margin: 0 auto var(--space-8);
}

.trust-item {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
}

.trust-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.trust-icon {
  margin-bottom: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.trust-icon svg {
  width: 28px;
  height: 28px;
}

.trust-label {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary);
}

.trust-note {
  text-align: center;
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 500px;
  margin: 0 auto;
}

/* --- Use Cases Grid ---
   Two columns divided by hairlines rather than separated by gaps, so the set
   reads as one table of industries. */
.use-cases-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
}

.use-case-card {
  display: grid;
  grid-template-columns: 1fr;
  padding: var(--space-12) var(--space-8);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: background-color 0.2s ease;
}

.use-case-card:nth-child(odd) {
  border-right: 1px solid var(--border);
}

.use-case-card:hover {
  background-color: var(--bg-alt);
}

.use-case-card:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: -2px;
}

.use-case-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

/* Boxed icon — echoes the plate beside it at glyph scale. */
.use-case-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}

.use-case-icon svg {
  width: 20px;
  height: 20px;
}

.use-case-card h3 {
  font-size: 1.25rem;
  color: var(--text-primary);
}

.use-case-card p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: var(--space-6);
}

.use-case-explore {
  align-self: start;
  margin-top: auto;
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: var(--bg);
  border: 1px solid var(--border);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.use-case-card:hover .use-case-explore {
  border-color: var(--brand-500);
  background: var(--bg);
}

.use-case-copy {
  display: flex;
  flex-direction: column;
}

/* --- Testimonials --- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.testimonial-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}

.testimonial-quote {
  font-size: 1.0625rem;
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: var(--space-6);
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.testimonial-avatar {
  width: 40px;
  height: 40px;
  background: var(--brand-100);
  color: var(--accent-text);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
}

[data-theme="dark"] .testimonial-avatar {
  background: var(--accent-tint-15);
}

.testimonial-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary);
}

.testimonial-role {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

/* --- Social Proof Line --- */
.social-proof-line {
  text-align: center;
  font-size: 1rem;
  color: var(--text-tertiary);
  margin-top: var(--space-8);
}

/* --- CTA Section --- */
/* Carries the same gold ring as .value-stat and .roi-callout, so every washed
   panel reads as one framed family. The full-bleed mobile treatment below
   keeps its own radius rules. */
.cta-section {
  text-align: center;
  background: linear-gradient(135deg, var(--wash), var(--wash-strong));
  border: 1px solid rgba(var(--theme-gold-rgb), 0.35);
  border-radius: var(--radius-xl);
  padding: var(--space-16) var(--space-8);
  margin: 0 var(--space-6);
}

.cta-section h2 {
  margin-bottom: var(--space-6);
}

.cta-section .cta-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}

.cta-link {
  font-size: 1rem;
  color: var(--accent-text);
  font-weight: 500;
}

/* --- Footer --- */
.footer {
  border-top: 1px solid var(--border);
  padding: var(--space-16) 0 var(--space-8);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.footer-brand {
  max-width: 280px;
}

.footer-brand .nav-brand {
  margin-bottom: var(--space-4);
}

.footer-tagline {
  font-size: 0.9375rem;
  color: var(--text-tertiary);
}

.footer-column h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
}

.footer-column ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-column a {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-column a:hover {
  color: var(--accent-text);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-8);
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--text-tertiary);
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* --- Page Hero (sub-pages) --- */
.page-hero {
  position: relative;
  padding: calc(var(--nav-height) + var(--space-16)) 0 var(--space-16);
  text-align: center;
  overflow: hidden;
}

.page-hero .hero-bg {
  position: absolute;
  inset: 0;
  background: var(--gradient-hero-2point);
  pointer-events: none;
}

.page-hero-content {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
}

.page-hero h1 {
  margin-bottom: var(--space-6);
}

.page-hero p {
  font-size: 1.25rem;
  color: var(--text-secondary);
  margin: 0 auto;
}

.page-hero-cta {
  margin-top: var(--space-8);
}

.page-hero--centered {
  min-height: 60vh;
  display: flex;
  align-items: center;
}

/* --- Video Embed --- */
.video-embed {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- How It Works Page --- */
.hiw-section {
  padding: var(--space-16) 0;
}

.hiw-section:nth-child(even of .hiw-section) {
  background-color: var(--bg-alt);
}

.hiw-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
}

.hiw-content.reverse {
  direction: rtl;
}

.hiw-content.reverse > * {
  direction: ltr;
}

.hiw-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--brand-500);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}

.hiw-text h2 {
  margin-bottom: var(--space-6);
}

.hiw-steps-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.hiw-step-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.hiw-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--brand-100);
  color: var(--accent-text);
  font-weight: 700;
  font-size: 0.8125rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

[data-theme="dark"] .hiw-step-num {
  background: var(--accent-tint-15);
}

.hiw-step-text {
  font-size: 1rem;
  color: var(--text-primary);
  line-height: 1.5;
}

.hiw-visual {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-12);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.hiw-visual-icon {
  color: var(--brand-400);
  opacity: 0.5;
}

.hiw-visual-icon svg {
  width: 80px;
  height: 80px;
}

/* Comparison table */
.comparison-table {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.comparison-table th,
.comparison-table td {
  padding: var(--space-4) var(--space-6);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.comparison-table th {
  background: var(--bg-alt);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary);
}

.comparison-table th:first-child {
  color: var(--text-secondary);
  font-weight: 500;
}

.comparison-table td {
  font-size: 1rem;
}

.comparison-table tr:last-child td {
  border-bottom: none;
}

.comparison-table .without {
  color: var(--text-secondary);
}

.comparison-table .with {
  color: var(--accent-text);
  font-weight: 600;
}

.comparison-result {
  text-align: center;
  margin-top: var(--space-8);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-text);
}

/* --- Pricing Page --- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}

.pricing-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
}

.pricing-card-featured {
  border: 2px solid var(--brand-500);
  box-shadow: var(--shadow-glow);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-500);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pricing-tier {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.pricing-tier-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-tertiary);
}

.pricing-amount {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--accent-text);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.pricing-period {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.pricing-target {
  font-size: 0.875rem;
  color: var(--text-tertiary);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.pricing-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  text-align: left;
  flex-grow: 1;
}

.pricing-feature {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.9375rem;
  color: var(--text-primary);
}

.pricing-feature svg {
  width: 18px;
  height: 18px;
  color: var(--success);
  flex-shrink: 0;
}

.pricing-feature-muted {
  color: var(--text-tertiary);
}

.pricing-feature-muted svg {
  color: var(--text-tertiary);
}

.pricing-rate {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  margin-bottom: var(--space-6);
  text-align: center;
}

.pricing-all-plans {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  padding: var(--space-8);
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.pricing-all-plans h3 {
  font-size: 1.125rem;
  margin-bottom: var(--space-6);
}

.pricing-all-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  text-align: left;
}

.pricing-all-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.pricing-all-item svg {
  width: 16px;
  height: 16px;
  color: var(--success);
  flex-shrink: 0;
}

/* --- FAQ --- */
.faq-list {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-body);
}

.faq-question:hover {
  color: var(--accent-text);
}

.faq-question svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--text-tertiary);
}

.faq-item.open .faq-question svg {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-answer-inner {
  padding: 0 var(--space-6) var(--space-6);
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* --- About Page --- */
.about-story {
  max-width: 700px;
  margin: 0 auto;
}

.about-story h2 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  font-size: 1.5rem;
}

.about-story h2:first-child {
  margin-top: 0;
}

.about-story h3 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  font-size: 1.25rem;
}

.about-story p {
  font-size: 1.125rem;
  margin-bottom: var(--space-4);
  max-width: 100%;
}

.about-story ul {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

.about-story li {
  margin-bottom: var(--space-2);
}

.contact-form {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-group label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
}

.form-group input,
.form-group textarea {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text-primary);
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--accent-tint-10);
}

.form-group textarea {
  min-height: 140px;
  resize: vertical;
}

.contact-note {
  text-align: center;
  font-size: 1rem;
  color: var(--text-tertiary);
  margin-top: var(--space-4);
}

/* --- Use Case Page --- */
.use-case-hero {
  position: relative;
  padding: calc(var(--nav-height) + var(--space-16)) 0 var(--space-16);
  overflow: hidden;
}

.use-case-hero .hero-bg {
  position: absolute;
  inset: 0;
  background: var(--gradient-hero-2point);
  pointer-events: none;
}

.use-case-hero-content {
  position: relative;
  max-width: 700px;
}

.use-case-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.875rem;
  color: var(--text-tertiary);
  margin-bottom: var(--space-6);
}

.use-case-breadcrumb a {
  color: var(--accent-text);
}

.use-case-hero h1 {
  margin-bottom: var(--space-6);
}

.use-case-hero p {
  font-size: 1.25rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}

/* Problem section */
.problem-section {
  padding: var(--space-16) 0;
}

.problem-content {
  max-width: 700px;
}

.problem-content h2 {
  margin-bottom: var(--space-6);
}

.problem-content p {
  font-size: 1.125rem;
  line-height: 1.7;
}

/* Benefits */
.benefits-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 700px;
}

.benefit-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.benefit-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--accent-text);
  margin-top: 2px;
}

.benefit-text {
  font-size: 1.0625rem;
  color: var(--text-primary);
  line-height: 1.5;
}

/* Example forms */
.forms-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.form-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  background: var(--chip-bg);
  color: var(--chip-text);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-pill);
  border: 1px solid var(--chip-border);
}

/* ROI callout — the gold-panel language shared by .value-stat and .cta-section:
   --wash/--wash-strong are already theme-aware (solid gold-over-white in light,
   translucent gold in dark), and the translucent gold border holds on both
   grounds. The ring was briefly dropped on 2026-08-18 and restored the same
   day — the owner prefers the framed panel. */
.roi-callout {
  background: linear-gradient(135deg, var(--wash), var(--wash-strong));
  border: 1px solid rgba(var(--theme-gold-rgb), 0.35);
  border-radius: var(--radius-xl);
  padding: var(--space-12);
  text-align: center;
  max-width: 700px;
}

.roi-callout p {
  font-size: 1.25rem;
  color: var(--text-primary);
  font-weight: 500;
  margin: 0 auto;
  max-width: 100%;
}

/* Privacy note */
.privacy-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  max-width: 700px;
}

.privacy-note-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--success);
}

.privacy-note p {
  font-size: 1rem;
  color: var(--text-secondary);
}

/* Use case CTA */
.use-case-cta {
  text-align: center;
  padding: var(--space-16) 0;
}

.use-case-cta h2 {
  margin-bottom: var(--space-8);
}

/* --- Animations --- */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  animation: fade-up-fallback 0.5s 1s forwards;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}

@keyframes fade-up-fallback {
  to { opacity: 1; transform: none; }
}

/* --- Staggered reveals ---
   Sibling cards/steps revealing in sequence (~90ms apart) instead of popping in
   as one block. Two mechanisms:
   1. Groups whose children each carry .fade-up (product doors, steps, use-case
      cards): scoped transition-delays by child index. Non-.fade-up siblings
      (e.g. step arrows) still occupy an index, which just widens the gap — fine.
   2. Groups where .fade-up sits on the container (.stagger helper below). */
.product-doors > .fade-up:nth-child(2),
.steps > .fade-up:nth-child(2),
.use-cases-grid > .fade-up:nth-child(2) { transition-delay: 90ms; }
.product-doors > .fade-up:nth-child(3),
.steps > .fade-up:nth-child(3),
.use-cases-grid > .fade-up:nth-child(3) { transition-delay: 180ms; }
.product-doors > .fade-up:nth-child(4),
.steps > .fade-up:nth-child(4),
.use-cases-grid > .fade-up:nth-child(4) { transition-delay: 270ms; }
.product-doors > .fade-up:nth-child(5),
.steps > .fade-up:nth-child(5),
.use-cases-grid > .fade-up:nth-child(5) { transition-delay: 360ms; }
.product-doors > .fade-up:nth-child(6),
.steps > .fade-up:nth-child(6),
.use-cases-grid > .fade-up:nth-child(6) { transition-delay: 450ms; }

/* .stagger: put on a container that ALSO has .fade-up (so the IntersectionObserver
   still triggers it) — the container itself stays static and its direct children
   do the staggered rise instead. */
.stagger.fade-up {
  opacity: 1;
  transform: none;
  animation: none;
}
.stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  animation: fade-up-fallback 0.5s 1.2s forwards; /* no-JS fallback, mirrors .fade-up */
}
.stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}
.stagger.visible > :nth-child(2) { transition-delay: 90ms; }
.stagger.visible > :nth-child(3) { transition-delay: 180ms; }
.stagger.visible > :nth-child(4) { transition-delay: 270ms; }
.stagger.visible > :nth-child(5) { transition-delay: 360ms; }
.stagger.visible > :nth-child(6) { transition-delay: 450ms; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .pricing-all-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .use-cases-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .value-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .hiw-content {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .hiw-content.reverse {
    direction: ltr;
  }

  .hiw-visual {
    min-height: 200px;
  }
}

/* The nav's demo CTA is the first thing to go when the bar gets tight: below
   ~1024px the links + two buttons overflow (at 769px it pushed Log In 80px past
   the viewport, and under 768px it pushed the hamburger off-screen entirely).
   Nothing is lost — the mobile menu carries its own Book a Demo. */
@media (max-width: 1023px) {
  .nav-actions .nav-demo-link {
    display: none;
  }
}

@media (max-width: 768px) {
  :root {
    --nav-height: 64px;
  }

  .section {
    padding: var(--space-16) 0;
  }

  .section-header {
    margin-bottom: var(--space-12);
  }

  .nav-links {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .nav-actions .theme-toggle {
    display: none;
  }

  .hero {
    padding: calc(var(--nav-height) + var(--space-16)) 0 var(--space-16);
  }

  .hero-mockup {
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-6);
  }

  .hero-arrow {
    transform: rotate(90deg);
  }

  .hero-phone {
    width: 120px;
    height: 220px;
  }

  .hero-browser {
    width: 100%;
    max-width: 280px;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

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

  .use-cases-grid {
    grid-template-columns: 1fr;
  }

  /* Single column: no vertical hairline to draw, and the plate shrinks
     rather than crowding the copy off the screen. */
  .use-case-card:nth-child(odd) {
    border-right: none;
  }

  .use-case-card {
    grid-template-columns: 1fr 88px;
    gap: var(--space-6);
    padding: var(--space-8) var(--space-4);
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .pricing-all-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .cta-section {
    padding: var(--space-12) var(--space-6);
    margin: 0;
    border-radius: 0;
  }

  .comparison-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--space-6));
    padding: 0 var(--space-6);
  }

  .comparison-table {
    min-width: 480px;
  }

  .comparison-table th,
  .comparison-table td {
    padding: var(--space-3) var(--space-4);
    font-size: 0.875rem;
  }

  .mobile-menu-link,
  .mobile-menu-sublink {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .faq-question {
    min-height: 48px;
  }

  .btn-lg {
    padding: var(--space-4) var(--space-8);
  }

  .page-hero {
    padding: calc(var(--nav-height) + var(--space-12)) 0 var(--space-12);
  }

  .page-hero p {
    font-size: 1.0625rem;
  }

  .about-story h2 {
    font-size: 1.375rem;
  }

  .about-story h3 {
    font-size: 1.125rem;
  }

  .about-story p,
  .about-story li {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .hero-ctas {
    flex-direction: column;
    width: 100%;
  }

  .hero-ctas .btn {
    width: 100%;
  }

  .trust-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }

  .trust-item {
    padding: var(--space-4) var(--space-3);
  }
}

/* --- Accessibility --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .fade-up,
  .stagger > * {
    opacity: 1;
    transform: none;
  }
}

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

/* Skip to content */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background: var(--brand-500);
  color: var(--white);
  font-weight: 600;
  border-radius: var(--radius-md);
  z-index: 10000;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: var(--space-4);
  color: var(--white);
}

/* Booking widget (cal.com) — shared by /contact (demo) and /support (support call).
   Lived inline in contact.html until /support needed it too. */
.booking-embed {
  max-width: 860px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg);
}

/* Trademark attribution — the Google Workspace Marketplace branding terms require an
   attribution notice wherever we name Google's products. Sits quietly above the footer
   on the /sheets* pages; deliberately small, since it is a legal notice, not copy. */
.tm-attribution {
  padding: var(--space-8) 0 var(--space-12);
}

.tm-attribution p {
  max-width: 46rem;
  margin: 0 auto;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-secondary);
  text-align: center;
}