/* === WPP FONT FACE DECLARATIONS ===
   Only weights actually used: 300 (body), 400 (default + italic for <em>), 500 (display).
   Drop Thin/Black/Bold and most italics — bandwidth + parse savings. */
@font-face {
  font-family: 'WPP';
  src: url('assets/fonts/WPP-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'WPP';
  src: url('assets/fonts/WPP-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'WPP';
  src: url('assets/fonts/WPP-RegularItalic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'WPP';
  src: url('assets/fonts/WPP-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* === CSS VARIABLES & DESIGN SYSTEM === */
:root {
  /* Satalia.com Color Palette — cool-tinted neutrals */
  --bg-dark: #130d26;
  --bg-light: oklch(99.5% 0.003 255);
  --bg-tinted: oklch(97% 0.005 255);

  --text-dark: #ffffff;
  --text-dark-muted: rgba(255, 255, 255, 0.6);

  --text-light: oklch(15% 0.012 255);
  --text-light-muted: #5a6168; /* AA-compliant on white */
  --text-strike: oklch(65% 0.02 255);

  /* Semantic Brand Accent — vivid cool blue per brand spec */
  --brand-accent: oklch(65% 0.14 255);
  --brand-accent-hover: oklch(58% 0.16 255);

  /* Secondary Accents */
  --color-cyan: #00E5FF;
  --color-green: #00FFA6;
  --color-deep-purple: #6B15D5;

  /* The Iridescent / Holographic Accents — Purple-Blue bias */
  --gradient-iridescent: linear-gradient(135deg, #6B15D5 0%, #9B4CFF 30%, #4A90E2 60%, #00E5FF 100%);
  --gradient-iridescent-hover: linear-gradient(135deg, #00E5FF 0%, #4A90E2 30%, #9B4CFF 60%, #6B15D5 100%);

  --grid-line-color-light: rgba(0, 0, 0, 0.12);
  --grid-line-color-dark: rgba(255, 255, 255, 0.08);

  /* Typography System — WPP */
  --font-display: 'WPP', system-ui, sans-serif;
  --font-body: 'WPP', system-ui, sans-serif;
  --text-base: 1rem;
  
  /* Modular Fluid Type Scale (Tighter Desktop ~1.25 / Mobile ~1.2) */
  --text-sm: clamp(0.875rem, 0.8vw + 0.6rem, 0.95rem);
  --text-body: clamp(0.95rem, 1vw + 0.75rem, 1.05rem);
  --text-lead: clamp(1.125rem, 1.5vw + 1rem, 1.25rem);
  --text-h3: clamp(1.25rem, 2vw + 1rem, 1.5rem);
  --text-h2: clamp(1.75rem, 3.5vw + 1.25rem, 2.5rem);
  --text-h1: clamp(2.5rem, 5vw + 0.75rem, 4rem);

  --lh-tight: 1.15;
  --lh-base: 1.6;
  --lh-loose: 1.7;

  /* Animation & Easing */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  
  --transition-fast: 150ms var(--ease-out-quart);
  --transition-base: 300ms var(--ease-out-quint);
  --transition-slow: 600ms var(--ease-out-expo);

  /* Spacing System */
  --space-3xs: 0.25rem; /* 4px */
  --space-2xs: 0.5rem;  /* 8px */
  --space-xs:  0.75rem; /* 12px */
  --space-sm:  1rem;    /* 16px */
  --space-md:  1.5rem;  /* 24px */
  --space-lg:  2rem;    /* 32px */
  --space-xl:  2.5rem;  /* 40px */
  --space-2xl: 3rem;    /* 48px */
  --space-3xl: 4.5rem;  /* 72px */
  --space-4xl: 6rem;    /* 96px */
  --space-5xl: 8rem;    /* 128px */
  --space-6xl: 10rem;   /* 160px */

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
}

/* === RESET & BASE STYLES === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 300;
  line-height: var(--lh-base);
  color: var(--text-light);
  background-color: var(--bg-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

html {
  overflow-x: clip;
}

/* === TIMELINE GRID BACKGROUND === */
.timeline-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  display: flex;
  justify-content: space-evenly;
  pointer-events: none;
}

.timeline-column {
  width: 1px;
  height: 100%;
  background-color: var(--grid-line-color-light);
  position: relative;
}



/* === LAMBDA SUPERGRAPHIC === */
.frame-supergraphic {
  position: fixed;
  top: 10%;
  right: -10vw;
  width: 80vw;
  height: 80vw;
  z-index: -1;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(15deg);
  opacity: 0.45;
}

.frame-supergraphic svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 600px) {
  .break-md { display: none; }
}

.break-mobile-only { display: none; }
@media (max-width: 600px) {
  .break-mobile-only { display: inline; }
}

@media (max-width: 720px) {
  .frame-supergraphic {
    top: 4%;
    right: -30vw;
    width: 110vw;
    height: 110vw;
    opacity: 0.6;
  }
}

/* === UTILITIES === */
.container {
  width: 100%;
  max-width: 1200px; /* Unified globally to align navbar, hero, and datablocks */
  margin: 0 auto;
  padding: 0 var(--space-lg);
  position: relative;
}

.container-sm {
  max-width: 800px;
}

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }

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

.section-dark .timeline-column {
  background-color: var(--grid-line-color-dark) !important; /* Force override for fixed grid illusion */
}

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

.data-block {
  border-left: 2px solid currentColor;
  padding-left: var(--space-lg); /* 32px */
}

.timeline-divider {
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.15;
  margin: var(--space-lg) 0;
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.04em;
  margin-bottom: 0.5em;
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.lead {
  font-size: var(--text-lead);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  max-width: 65ch;
}

.subtitle {
  font-size: var(--text-lead);
  color: var(--text-light-muted);
  max-width: 65ch; /* Optical readability max-width */
  margin-bottom: 3rem;
  line-height: var(--lh-loose);
  text-wrap: pretty;
}

.section-dark .subtitle,
.section-dark .system-desc {
  color: var(--text-dark-muted);
}

p {
  max-width: 65ch; /* standard reading width limit */
  margin-left: 0;
  text-wrap: pretty;
}

/* === BUTTONS === */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  padding: var(--space-xs) var(--space-md);
  font-weight: 500;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 999px;
  transition: all var(--transition-base);
  cursor: pointer;
  border: 1px solid currentColor;
  text-align: center;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  background: transparent;
  color: inherit;
  transform: translateZ(0);
}

/* Keyboard Accessibility Polish */
.btn:focus-visible {
  outline: 2px solid var(--text-light);
  outline-offset: 4px;
}
.section-dark .btn:focus-visible {
  outline: 2px solid var(--text-dark);
}

.btn-primary {
  background: var(--bg-dark);
  color: var(--text-dark);
  border-color: var(--bg-dark);
  z-index: 1;
}

.section-dark .btn-primary {
  background: var(--text-dark);
  color: var(--bg-dark);
  border-color: var(--text-dark);
}

.btn-primary:hover {
  background: var(--brand-accent);
  color: white;
  border-color: var(--brand-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px color-mix(in oklch, var(--brand-accent) 25%, transparent);
}

.btn-primary:active {
  transform: scale(0.97);
  background: var(--brand-accent-hover);
  color: white;
  border-color: var(--brand-accent-hover);
}

.btn-large {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-body);
}

.btn-iridescent::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--gradient-iridescent);
  z-index: -1;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--transition-base);
}
.btn-iridescent:hover::before {
  transform: scaleY(1);
}
.btn-iridescent:hover {
  color: white !important;
  border-color: transparent !important;
}

/* === NAVBAR === */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

.skip-link {
  position: absolute;
  left: var(--space-md);
  top: var(--space-md);
  z-index: 1000;
  padding: var(--space-sm) var(--space-md);
  background: var(--text-dark);
  color: var(--bg-light);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  letter-spacing: -0.01em;
  transform: translateY(-150%);
  transition: transform var(--transition-fast);
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

.logo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-lead);
  letter-spacing: -0.05em;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-light);
  text-decoration: none;
  white-space: nowrap;
}

.logo:focus-visible {
  outline: 2px solid var(--text-light);
  outline-offset: 4px;
}
.section-dark .logo:focus-visible {
  outline-color: var(--text-dark);
}

.logo-sub {
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: -0.02em;
  color: var(--text-light-muted);
  margin-left: calc(-1 * var(--space-xs));
}

.frame-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* Quiet nav CTA — primary action lives in the hero form */
.nav-cta-link {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-lead);
  letter-spacing: -0.02em;
  color: var(--text-light);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  line-height: 1;
  white-space: nowrap;
  transition: color var(--transition-fast);
}
.nav-cta-link .nav-cta-short { display: none; }
@media (max-width: 480px) {
  .nav-cta-link .nav-cta-full { display: none; }
  .nav-cta-link .nav-cta-short { display: inline-block; }
}
.nav-cta-link span {
  transition: transform var(--transition-fast);
  display: inline-block;
}
.nav-cta-link:hover { color: var(--brand-accent); }
.nav-cta-link:hover span { transform: translateX(4px); }
.nav-cta-link:focus-visible {
  outline: 2px solid var(--text-light);
  outline-offset: 4px;
}

/* === HERO SECTION ===
   Linear-style: hero owns the full viewport; the packshot peeks in from below
   via negative margin-top on the next section. No bottom border (the packshot
   blurs the seam). Hero canvas/metaball hidden — stillness is the confidence. */
.hero {
  padding: calc(var(--space-4xl) + var(--space-md)) 0 var(--space-3xl);
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Single-column composition; the headline does the work. */
.hero-split {
  display: block;
  position: relative;
  z-index: 2;
}

.hero-text-wrapper {
  position: relative;
  max-width: min(88%, 1180px);
}

@media (max-width: 900px) {
  .hero-text-wrapper {
    max-width: 100%;
  }
}

.hero-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-light-muted);
  margin: 0 0 var(--space-md);
  opacity: 0;
  animation: fadeUp var(--transition-slow) forwards;
}

.hero-title {
  /* Caps near --text-h1 — the headline is descriptive prose, not a punchline,
     so 96px reads as shouting and pushes the form below the fold. */
  font-size: clamp(2.25rem, 4.5vw + 0.75rem, 4rem);
  line-height: 1.02;
  margin-bottom: var(--space-sm);
  letter-spacing: -0.045em;
  text-wrap: balance;
  opacity: 0;
  animation: fadeUp var(--transition-slow) forwards;
}

/* Hairline iridescent rule — single static brand moment ATF */
.hero-title::after {
  content: "";
  display: block;
  width: 120px;
  height: 1px;
  margin-top: var(--space-lg);
  background: var(--gradient-iridescent);
  opacity: 0.85;
}

.hero-subtitle {
  font-size: var(--text-lead);
  color: var(--text-light-muted);
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
  line-height: var(--lh-base);
  max-width: 56ch;
  opacity: 0;
  animation: fadeUp var(--transition-slow) 0.15s forwards;
}

.hero-actions {
  opacity: 0;
  animation: fadeUp var(--transition-slow) 0.3s forwards;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.hero-form-wrapper {
  opacity: 0;
  animation: fadeUp var(--transition-slow) 0.3s forwards;
  max-width: 520px;
  margin-bottom: var(--space-4xl);
}

.hero-form-wrapper .hubspot-card {
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

/* Hero form: hide EMAIL label */
.hero-form-wrapper .hs_email > label {
  display: none !important;
}

/* Email field + submit as one inline row */
.hero-form-wrapper .hs_email {
  position: relative !important;
  margin-bottom: 0 !important;
}

.hero-form-wrapper .hs_email input[type="email"] {
  padding-right: 180px !important;
  height: 56px !important;
  font-size: var(--text-body) !important;
  background: var(--bg-light) !important;
  border: 2px solid var(--text-light) !important;
  border-radius: 999px !important;
}

.hero-form-wrapper .hs_email input[type="email"]:focus {
  border-color: var(--brand-accent) !important;
}

.hero-form-wrapper .hs-submit {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 2 !important;
}

.hero-form-wrapper .hs-submit input[type="submit"],
.hero-form-wrapper .hs-submit .hs-button {
  height: 56px !important;
  padding: 0 var(--space-lg) !important;
  margin-top: 0 !important;
  width: auto !important;
  font-size: var(--text-sm) !important;
  letter-spacing: 0.06em !important;
}

/* Consent checkboxes: quiet fine print under the form */
.hero-form-wrapper .legal-consent-container {
  margin-top: var(--space-sm) !important;
  font-family: var(--font-body) !important;
  font-size: 0.8125rem !important;
  color: var(--text-light-muted) !important;
  line-height: 1.5 !important;
}

.hero-form-wrapper .legal-consent-container * {
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
}

.hero-form-wrapper .legal-consent-container .hs-form-booleancheckbox-display {
  display: flex !important;
  align-items: flex-start !important;
  gap: var(--space-2xs) !important;
  margin-bottom: var(--space-2xs) !important;
}

.hero-form-wrapper .legal-consent-container input[type="checkbox"] {
  width: 14px !important;
  height: 14px !important;
  margin-top: 2px !important;
  accent-color: var(--brand-accent) !important;
  flex-shrink: 0 !important;
}

/* === HERO FORM: SUCCESS STATE ===
   HubSpot replaces the form with .submitted-message after a successful submit.
   Treatment: iridescent 1px top rule + eyebrow "STATUS: REQUEST RECEIVED" so
   the confirmation registers as a status moment, not stray body copy. */
.hero-form-wrapper .submitted-message {
  padding: var(--space-md) 0 0;
  background-image: var(--gradient-iridescent);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: top left;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-light);
  line-height: 1.55;
  animation: fadeUp var(--transition-slow) forwards;
}

.hero-form-wrapper .submitted-message::before {
  content: "STATUS: REQUEST RECEIVED";
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-light-muted);
  margin-bottom: var(--space-xs);
}

/* === HERO FORM: ERROR STATE ===
   HubSpot renders .hs-error-msgs <ul> below the input row. The submit button
   is absolutely positioned over the right of the input, so the default tiny
   red text reads as ambiguous on mobile. Bumped size + 2px left accent (the
   .data-block motif) makes it unmissable without screaming. */
#hubspot-form-hero .hs-error-msgs,
.hero-form-wrapper .hs-error-msgs {
  list-style: none !important;
  margin: var(--space-sm) 0 0 !important;
  padding: var(--space-2xs) 0 var(--space-2xs) var(--space-sm) !important;
  border-left: 2px solid oklch(55% 0.18 25) !important;
}

#hubspot-form-hero .hs-error-msgs li {
  margin: 0 !important;
  padding: 0 !important;
}

#hubspot-form-hero .hs-error-msg,
#hubspot-form-hero .hs-error-msgs label,
.hero-form-wrapper .hs-error-msg {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  color: oklch(55% 0.18 25) !important;
  line-height: 1.5 !important;
}

/* Qualifier — quiet footnote below the form */
.hero-cta-qualifier {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--text-light-muted);
  line-height: 1.5;
  margin-top: var(--space-sm);
}

/* === PRODUCT PREVIEW SECTION ===
   Peeks into the hero from below. Negative margin-top pulls the packshot up
   so its top edge sits ~80vh from the top of the page — the Linear pattern.
   The product is the scroll affordance and the proof simultaneously. */
.product-preview-section {
  margin-top: 0;
  padding: var(--space-4xl) 0 var(--space-3xl);
  background-color: var(--bg-light);
  position: relative;
  z-index: 1;
}

.product-preview-wrapper {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  position: relative;
}

.product-preview-frame {
  position: relative;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  /* Iridescent 1px gradient border via background-origin trick */
  background:
    linear-gradient(var(--bg-light), var(--bg-light)) padding-box,
    var(--gradient-iridescent) border-box;
  border: 1px solid transparent;
  box-shadow: 0 24px 60px -20px oklch(60% 0.04 255 / 0.18);
}

.product-preview-image {
  display: block;
  width: 100%;
  height: auto;
}

.product-preview-caption {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-light-muted);
  text-align: center;
  max-width: 64ch;
  margin: var(--space-lg) auto 0;
}

/* === CANVAS DETAIL FILMSTRIP ===
   One enlarged frame + four thumbnails. Click a thumb to swap.
   Sits on the tinted surface so it doesn't visually echo the hero packshot. */
.canvas-filmstrip-section .container {
  text-align: center;
}

.canvas-filmstrip-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-light-muted);
  margin: 0 0 var(--space-md);
  padding-left: 0.14em;
  max-width: none;
}

.canvas-filmstrip-title {
  margin: 0 auto var(--space-md);
  max-width: 22ch;
}

.canvas-filmstrip-intro {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-light-muted);
  max-width: 56ch;
  margin: 0 auto var(--space-2xl);
}

.canvas-filmstrip {
  max-width: 1120px;
  margin: 0 auto;
}

/* Stepper above the viewport: numbered nodes connected by a progress line.
   --progress (0..1) is set by JS and drives the iridescent fill width. */
.canvas-filmstrip-stepper {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0 0 var(--space-xl);
  padding: 0;
  position: relative;
  --progress: 0;
  --node-size: 32px;
}

.canvas-filmstrip-stepper::before,
.canvas-filmstrip-stepper::after {
  content: "";
  position: absolute;
  top: calc(var(--node-size) / 2);
  height: 1px;
  pointer-events: none;
  transform: translateY(-50%);
}

.canvas-filmstrip-stepper::before {
  left: 12.5%;
  right: 12.5%;
  background: oklch(88% 0.01 255);
}

.canvas-filmstrip-stepper::after {
  left: 12.5%;
  width: calc(var(--progress) * 75%);
  height: 2px;
  background: var(--gradient-iridescent);
  transition: width 420ms cubic-bezier(0.65, 0, 0.35, 1);
}

.canvas-filmstrip-step {
  margin: 0;
}

.canvas-filmstrip-step-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  color: var(--text-light-muted);
  font-family: var(--font-display);
  transition: color 200ms ease;
}

.canvas-filmstrip-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--node-size);
  height: var(--node-size);
  border-radius: 50%;
  background: var(--bg-light);
  border: 1px solid oklch(85% 0.01 255);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-light-muted);
  position: relative;
  z-index: 1;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
}

.canvas-filmstrip-step-btn:hover .canvas-filmstrip-step-num {
  border-color: var(--text-light);
  color: var(--text-light);
}

.canvas-filmstrip-step-btn.is-active {
  color: var(--text-light);
}

.canvas-filmstrip-step-btn.is-active .canvas-filmstrip-step-num {
  background: var(--text-light);
  color: var(--bg-light);
  border-color: var(--text-light);
}

.canvas-filmstrip-step-btn:focus-visible {
  outline: 2px solid var(--brand-accent, oklch(65% 0.14 255));
  outline-offset: 6px;
}

.canvas-filmstrip-step-label {
  font-size: 0.9375rem;
  font-weight: 500;
}

.canvas-filmstrip-viewport {
  position: relative;
  width: 100%;
  border: 1px solid oklch(88% 0.01 255);
  background-color: var(--bg-light);
  overflow: hidden;
}

.canvas-filmstrip-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: oklch(18% 0.01 255 / 0.78);
  color: var(--bg-light);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background 180ms ease, opacity 180ms ease;
}

.canvas-filmstrip-nav--prev { left: 0; }
.canvas-filmstrip-nav--next { right: 0; }

/* iOS Safari can swallow taps on SVG children of buttons. Forward the hit to
   the button itself. */
.canvas-filmstrip-nav svg {
  pointer-events: none;
}

.canvas-filmstrip-nav:hover {
  background: oklch(10% 0.01 255 / 0.92);
}

.canvas-filmstrip-nav:focus-visible {
  outline: 2px solid var(--brand-accent, oklch(65% 0.14 255));
  outline-offset: -2px;
}

.canvas-filmstrip-nav[disabled] {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 640px) {
  .canvas-filmstrip-nav {
    width: 44px;
    height: 44px;
  }
}

.canvas-filmstrip-track {
  display: flex;
  width: 100%;
  transform: translateX(calc(var(--slide-index, 0) * -100%));
  transition: transform 520ms cubic-bezier(0.65, 0, 0.35, 1);
}

.canvas-filmstrip-slide {
  flex: 0 0 100%;
  min-width: 0;
}

.canvas-filmstrip-slide picture,
.canvas-filmstrip-slide img {
  display: block;
  width: 100%;
  height: auto;
}

.canvas-filmstrip-image {
  display: block;
  width: 100%;
  height: auto;
}

.canvas-filmstrip-caption {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-light);
  text-align: center;
  max-width: 64ch;
  margin: var(--space-lg) auto 0;
  min-height: 3em;
}

@media (max-width: 640px) {
  .canvas-filmstrip-step-label {
    display: none;
  }
  .canvas-filmstrip-stepper {
    margin-bottom: var(--space-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .canvas-filmstrip-track,
  .canvas-filmstrip-stepper::after {
    transition: none;
  }
}

/* === WHY A WORKSPACE, NOT A CHATBOT — comparison table === */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.compare-section {
  padding: var(--space-5xl) 0;
}

.reasons-title {
  margin-bottom: var(--space-2xl);
  max-width: 18ch;
}

.reasons-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--text-light);
}

.reasons-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--space-2xl);
  padding: var(--space-xl) 0;
  border-bottom: 1px solid oklch(92% 0.004 255);
}

.reasons-item-title {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: 500;
  color: var(--text-light);
  margin: 0;
  letter-spacing: -0.01em;
}

.reasons-item-body {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: var(--lh-loose);
  color: var(--text-light-muted);
  margin: 0;
}

@media (max-width: 720px) {
  .reasons-item {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

}

@media (max-width: 900px) {
  .product-preview-section {
    /* On smaller viewports the hero content fills the page; stop the peek */
    margin-top: var(--space-2xl);
    padding-bottom: var(--space-3xl);
  }
}

/* No missing frames anymore natively. */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === SECTIONS GENERAL === */
section {
  padding: var(--space-3xl) 0;
  position: relative;
}

/* Alternating section tints for rhythm */
.section-tinted {
  background-color: var(--bg-tinted);
}

/* Narrative break — extra breathing room */
.section-break {
  padding: var(--space-5xl) 0;
}

h2.section-title {
  font-size: var(--text-h2);
  margin-bottom: var(--space-sm);
}

/* === PROBLEM SECTION === */
.problem-stacked {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  max-width: 64ch;
  margin: 0 auto;
}

.problem-statement {
  font-size: clamp(1.75rem, 2.5vw + 0.5rem, 2.25rem);
  line-height: var(--lh-tight);
  letter-spacing: -0.04em;
  margin: 0;
  text-wrap: balance;
}

.problem-point-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text-light);
  margin: 0 0 var(--space-2xs);
  letter-spacing: -0.01em;
}

.problem-point-body {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  line-height: var(--lh-loose);
  color: var(--text-light-muted);
  margin: 0;
}

/* === HOW IT WORKS === */
.how-it-works-section {
  border-top: 1px solid var(--grid-line-color-light);
  border-bottom: 1px solid var(--grid-line-color-light);
}

.how-header {
  max-width: 720px;
  margin-bottom: var(--space-3xl);
}

.how-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 2px solid var(--text-light);
}

.how-step {
  padding: var(--space-xl) var(--space-lg) var(--space-xl) 0;
  border-right: 1px solid var(--grid-line-color-light);
  position: relative;
}

.how-step:last-child {
  border-right: none;
}

.how-step-number {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--brand-accent);
  margin-bottom: var(--space-md);
  line-height: 1;
}

.how-step-title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: var(--lh-tight);
  margin-bottom: var(--space-sm);
  color: var(--text-light);
}

.how-step-desc {
  font-size: var(--text-body);
  color: var(--text-light-muted);
  line-height: var(--lh-loose);
}

/* Step connectors — arrow between steps */
.how-step::after {
  content: '\2192';
  position: absolute;
  right: -0.6em;
  top: var(--space-xl);
  font-size: var(--text-h3);
  color: var(--grid-line-color-light);
  z-index: 1;
  line-height: 1;
  font-family: var(--font-display);
}

.how-step:last-child::after {
  display: none;
}

/* === PROOF / WHY SATALIA (Dark Section) === */
.proof-section {
  border-top: none;
}

.proof-section .proof-header .section-title {
  color: var(--text-dark);
}

.proof-section .subtitle {
  color: var(--text-dark-muted);
}

.proof-section .proof-row-label {
  color: var(--text-dark);
}

.proof-section .proof-row-desc {
  color: var(--text-dark-muted);
}

.proof-header {
  max-width: 720px;
  margin-bottom: var(--space-3xl);
}

.proof-rows {
  border-top: 2px solid var(--text-dark);
}

.proof-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2.2fr;
  column-gap: var(--space-2xl);
  align-items: baseline;
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--grid-line-color-dark);
}

.proof-row:last-child {
  border-bottom: none;
}

.proof-row-label {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  color: var(--text-light);
  margin: 0;
}

.proof-row-desc {
  font-size: var(--text-body);
  color: var(--text-light-muted);
  line-height: var(--lh-loose);
  margin: 0;
  max-width: 60ch;
}

@media (max-width: 768px) {
  .proof-row {
    grid-template-columns: 1fr;
    row-gap: var(--space-sm);
  }
}

/* === PULL QUOTE === */
.quote-section {
  padding: var(--space-3xl) 0;
  border-top: 2px solid var(--text-light);
  border-bottom: 2px solid var(--text-light);
  position: relative;
}

.quote-section::before {
  content: none;
}

.pull-quote {
  max-width: 800px;
  margin: 0;
  border-left: 2px solid var(--text-light);
  padding-left: var(--space-xl);
}

.pull-quote-text {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: var(--lh-tight);
  color: var(--text-light);
  margin-bottom: var(--space-md);
  max-width: none;
}

.pull-quote-cite {
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-light-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}


/* === THREE SYSTEMS SECTION === */
.systems-section {
  border-top: 1px solid var(--grid-line-color-light);
  border-bottom: 1px solid var(--grid-line-color-light);
}

.systems-header {
  margin-bottom: var(--space-3xl);
}

.systems-asymmetric {
  border-top: 1px solid var(--grid-line-color-light);
  display: flex;
  flex-direction: column;
}

.system-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-bottom: 1px solid var(--grid-line-color-light);
}
.system-row:last-child {
  border-bottom: none;
}

.system-row.reverse .system-text {
  order: 2;
  border-left: 1px solid var(--grid-line-color-light);
  border-right: none;
}
.system-row.reverse .system-visual {
  order: 1;
}

.system-text {
  padding: var(--space-2xl) var(--space-xl);
  border-right: 1px solid var(--grid-line-color-light);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.system-visual {
  padding: var(--space-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,0.02);
}

.system-packshot {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}

.system-title {
  font-size: var(--text-h3);
  margin-bottom: var(--space-md);
  color: var(--text-light);
}

.system-desc {
  font-size: var(--text-body);
  line-height: var(--lh-base);
  color: var(--text-light-muted);
}


/* === OBJECTION SECTION === */
.objection-section {
  padding: var(--space-4xl) 0;
  border-top: 1px solid var(--grid-line-color-light);
}

.objection-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.objection-quote {
  font-size: clamp(2.5rem, 5vw + 1rem, 3.5rem);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.04em;
  margin-bottom: 0;
  color: var(--text-light);
  text-wrap: balance;
}

.objection-response {
  padding-left: var(--space-3xl);
  border-left: 1px solid var(--grid-line-color-light); /* Use border separator instead of full datablock */
}

.objection-response p {
  font-size: 1rem;
  line-height: var(--lh-loose);
  color: var(--text-light-muted);
  margin: 0;
}

/* === WORKED EXAMPLE — WORK LOG === */
.example-section {
  padding: var(--space-5xl) 0;
}

.example-container {
  max-width: 1040px;
}

.example-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-light-muted);
  margin: 0 0 var(--space-md);
  padding-left: 0.14em;
  max-width: none;
}

.example-title {
  margin-bottom: var(--space-md);
  max-width: 820px;
}

.example-intro {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-loose);
  color: var(--text-light-muted);
  max-width: 680px;
  margin: 0 0 var(--space-2xl);
}

.worklog {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--text-light);
}

.worklog-row {
  display: grid;
  grid-template-columns: 96px minmax(180px, 1fr) 1.4fr;
  column-gap: var(--space-xl);
  align-items: baseline;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--grid-line-color-light);
  position: relative;
}

.worklog-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 0;
  height: 1px;
  background: var(--text-light);
  transition: width 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.worklog-row:hover::before {
  width: 96px;
}

.worklog-row[data-continued] .worklog-time {
  visibility: hidden;
}

.worklog-time {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light-muted);
  font-variant-numeric: tabular-nums;
}

.worklog-label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-light);
}

.worklog-detail {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: var(--lh-base);
  color: var(--text-light-muted);
}

.worklog-rule {
  height: 2px;
  background: var(--gradient-iridescent);
  margin: var(--space-2xl) 0 var(--space-xl);
}

.worklog-outcome {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  color: var(--text-light);
  max-width: 720px;
  margin: 0;
}

@media (max-width: 720px) {
  .worklog-row {
    grid-template-columns: 1fr;
    row-gap: var(--space-3xs);
    padding: var(--space-md) 0;
  }
  .worklog-row:hover::before {
    width: 64px;
  }
  .worklog-time {
    font-size: 0.7rem;
  }
  .worklog-row[data-continued] .worklog-time {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .worklog-row::before {
    transition: none;
  }
}

/* === FAQ SECTION === */
.faq-section {
  padding: var(--space-6xl) 0;
}

.faq-wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Arrange skill: Replace centered stack with structural grid */
  gap: var(--space-4xl);
  align-items: start;
}

.faq-section h2.section-title {
  margin-bottom: var(--space-sm);
}

.faq-accordion {
  border-top: 1px solid var(--grid-line-color-light);
}

.faq-item {
  border-bottom: 1px solid var(--grid-line-color-light);
}

.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--space-lg) 0;
  font-size: var(--text-lead);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-light);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color var(--transition-fast);
}

.faq-question:focus-visible {
  outline: 2px solid var(--text-light);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

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

.faq-question::after {
  content: '+';
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: 500;
  flex-shrink: 0;
  line-height: 1;
  transition: transform var(--transition-base);
}

.faq-question[aria-expanded="true"]::after {
  content: '\2212';
}

.faq-answer-shell {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-slow);
}

.faq-question[aria-expanded="true"] + .faq-answer-shell {
  grid-template-rows: 1fr;
}

.faq-answer {
  min-height: 0;
  overflow: hidden;
  color: var(--text-light-muted);
  font-size: var(--text-body);
  padding-right: var(--space-lg);
  padding-bottom: 0;
  transition: padding-bottom var(--transition-slow);
}

.faq-question[aria-expanded="true"] + .faq-answer-shell .faq-answer {
  padding-bottom: var(--space-lg);
}

/* === CTA SECTION === */
.iridescence-bg {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--grid-line-color-dark);
}

.iridescence-bg::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient-iridescent);
  z-index: 0;
}

.iridescence-bg {
  background-color: var(--bg-tinted);
}

.cta-container {
  padding: var(--space-3xl) 0 var(--space-2xl);
  position: relative;
  z-index: 1;
}

.cta-title {
  font-size: var(--text-h2);
  margin-bottom: var(--space-sm);
}

.cta-desc {
  font-size: var(--text-lead);
  color: var(--text-light-muted);
  margin-bottom: var(--space-xl);
  max-width: 50ch;
  margin-inline: auto;
}

.cta-form-context {
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--text-light-muted);
  letter-spacing: -0.01em;
  margin-bottom: 0;
  max-width: 500px;
  margin-inline: auto;
}

/* HubSpot Embed Wrapper */
.hubspot-embed {
  width: 100%;
  max-width: 500px;
  margin: var(--space-xl) auto 0;
  text-align: left; /* Keep form fields aligned normally despite centered parent */
}

.hubspot-card {
  background: var(--bg-light);
  padding: var(--space-xl) var(--space-2xl);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}


/* === FOOTER === */
.footer {
  padding: var(--space-3xl) 0 var(--space-2xl);
  border-top: 1px solid var(--grid-line-color-light);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

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

.logo-footer {
  font-size: var(--text-body);
  color: var(--text-light);
}

.footer-tagline {
  font-size: var(--text-sm);
  color: var(--text-light-muted);
  margin: 0;
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xs);
}

.footer-links {
  display: flex;
  gap: var(--space-lg);
}

.copyright {
  font-size: var(--text-sm);
  color: var(--text-light-muted);
  letter-spacing: 0.02em;
}

.footer-link {
  font-size: var(--text-sm);
  color: var(--text-light-muted);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-link:hover,
.footer-link:focus-visible {
  color: var(--text-light);
}
.footer-link:focus-visible {
  outline: 2px solid var(--text-light);
  outline-offset: 4px;
}

/* === HUBSPOT FORM OVERRIDES === */
.hubspot-embed input[type="text"],
.hubspot-embed input[type="email"],
.hubspot-embed input[type="tel"],
.hubspot-embed textarea,
.hubspot-embed select {
  font-family: var(--font-body) !important;
  font-size: var(--text-body) !important;
  border-radius: 0 !important;
  border: 1px solid oklch(70% 0.01 255) !important;
  background: oklch(97% 0.005 255) !important;
  padding: var(--space-sm) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color var(--transition-fast) !important;
}

.hubspot-embed input:focus,
.hubspot-embed textarea:focus,
.hubspot-embed select:focus {
  outline: 2px solid var(--brand-accent) !important;
  outline-offset: 2px !important;
  border-color: var(--brand-accent) !important;
}
.hubspot-embed input[type="submit"]:focus-visible,
.hubspot-embed .hs-button:focus-visible {
  outline: 2px solid var(--brand-accent) !important;
  outline-offset: 3px !important;
}

.hubspot-embed label {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  color: var(--text-light) !important;
  text-transform: uppercase !important;
}

/* Consent/checkbox labels: sentence case, not shouting */
.hubspot-embed .hs-form-booleancheckbox label,
.hubspot-embed .legal-consent-container label,
.hubspot-embed .hs-form-booleancheckbox-display label,
.hubspot-embed .inputs-list label {
  text-transform: none !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--text-light-muted) !important;
}

/* Remove default bullet markers from checkbox lists */
.hubspot-embed .inputs-list,
.hubspot-embed .hs-form-booleancheckbox ul,
.hubspot-embed .legal-consent-container ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.hubspot-embed .inputs-list li,
.hubspot-embed .hs-form-booleancheckbox li {
  list-style: none !important;
  padding-left: 0 !important;
  margin-bottom: var(--space-2xs) !important;
}

/* Custom checkbox styling */
.hubspot-embed input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  border: 1px solid var(--grid-line-color-light) !important;
  border-radius: 0 !important;
  background: var(--bg-light) !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  margin-right: var(--space-2xs) !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

.hubspot-embed input[type="checkbox"]:checked {
  background: var(--bg-dark) !important;
  border-color: var(--bg-dark) !important;
}

.hubspot-embed input[type="checkbox"]:checked::after {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 5px !important;
  width: 4px !important;
  height: 8px !important;
  border: solid white !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

.hubspot-embed input[type="submit"],
.hubspot-embed .hs-button {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: var(--text-body) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: 999px !important;
  background: var(--bg-dark) !important;
  color: var(--text-dark) !important;
  border: 1px solid var(--bg-dark) !important;
  padding: var(--space-sm) var(--space-xl) !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: all var(--transition-base) !important;
  margin-top: var(--space-sm) !important;
}

.hubspot-embed input[type="submit"]:hover,
.hubspot-embed .hs-button:hover {
  background: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
}

/* === RESPONSIVE === */
@media (max-width: 1200px) {
  .hero-split {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1024px) {
  .system-row {
    grid-template-columns: 1fr;
  }
  .system-row.reverse .system-text {
    order: 1;
    border-left: none;
  }
  .system-row.reverse .system-visual {
    order: 2;
  }
  .system-text {
    border-right: none;
    border-bottom: 1px solid var(--grid-line-color-light);
  }
  .how-steps {
    grid-template-columns: 1fr 1fr;
  }
  .how-step:nth-child(2) {
    border-right: none;
  }
  .how-step:nth-child(2n)::after {
    display: none;
  }
  .how-step:nth-child(3),
  .how-step:nth-child(4) {
    border-top: 1px solid var(--grid-line-color-light);
  }

  .objection-response {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--grid-line-color-light);
    padding-top: var(--space-xl);
  }
  .objection-quote {
    font-size: clamp(1.75rem, 4vw + 0.5rem, 2.5rem);
  }
  .metric-grid,
  .objection-container,
  .faq-wrapper,
  .hero-split {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .hero-text-wrapper {
    padding-bottom: var(--space-lg);
  }
  /* Hero is single-column on mobile; ambient canvas continues to fill background */

}

@media (max-width: 768px) {
  .how-steps {
    grid-template-columns: 1fr;
  }
  .how-step {
    border-right: none;
    border-bottom: 1px solid var(--grid-line-color-light);
    padding: var(--space-lg) 0;
  }
  .how-step:last-child {
    border-bottom: none;
  }
  .how-step:nth-child(2) {
    border-right: none;
  }
  .how-step:nth-child(3),
  .how-step:nth-child(4) {
    border-top: none;
  }
  .how-step::after {
    display: none;
  }

  .hero {
    padding-top: var(--space-4xl);
  }
  /* Remove absolute overrides relying on fluid type clamp */
  .data-block {
    padding-left: var(--space-sm);
  }
  .hero-packshot {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
  }
  /* Quote section less aggressive on mobile */
  .quote-section {
    border-width: 1px;
  }
  .pull-quote {
    padding-left: var(--space-md);
  }
}

/* === GENERAL JS ANIMATION CLASSES === */
.reveal-on-scroll {
  opacity: 0;
  transition: opacity var(--transition-base);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
}

/* === HERO PACKSHOT === */
.hero-packshot {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.06);
  opacity: 0;
  animation: fadeUpLift 0.9s var(--ease-out-expo) 0.45s forwards;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hero-packshot:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.16), 0 12px 32px rgba(0, 0, 0, 0.08);
}

@keyframes fadeUpLift {
  from { opacity: 0; transform: translateY(50px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* === REDUCED MOTION SAFEGUARD === */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal-on-scroll {
    opacity: 1;
    transition: none;
  }
  .hero-packshot,
  .hero-form-wrapper {
    opacity: 1;
    animation: none;
    transform: none;
  }
  .hero-packshot:hover {
    transform: none;
  }
  .metaball-canvas {
    display: none;
  }
}


/* === IUBENDA CONSENT WIDGET — restraint overrides ===
   Suppress iubenda's default floating preferences chip; privacy + cookie links
   already live in the footer, so the chip is redundant and visually off-brand. */
/* iubenda's own rules use :not() chains which push specificity to (0,0,3,0).
   Stacking the class selector bumps ours above that. */
html body .iubenda-tp-btn.iubenda-tp-btn.iubenda-tp-btn,
html body .iub-floating-button.iub-floating-button,
html body .iubenda-tp-btn-floating.iubenda-tp-btn-floating,
html body [class*="iubenda-cs-preferences-link"]:not(footer *) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Quote-statement: paragraph-length copy that was previously misused as <h2>.
   Inherits .section-title visual weight but is semantically <p>. */
.quote-statement {
  display: block;
}

/* Hero noscript fallback — appears in place of HubSpot embed when JS is off. */
.hero-noscript {
  font-size: var(--text-base);
  color: var(--text-light-muted);
  margin: 0 0 var(--space-md);
}
.hero-noscript a {
  color: var(--text-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}