/* =============================================================================
   Jafix Design System — Colors & Type
   Source of truth: tailwind.config.js + base.css from the Jafix Drupal theme.
   ============================================================================= */

/* ---------- FONTS ---------- */
@font-face {
  font-family: 'Graphik';
  src: url('/digitale-assistent-mkb-bedrijf-reparatie/assets/fonts/graphik/Graphik-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Graphik';
  src: url('/digitale-assistent-mkb-bedrijf-reparatie/assets/fonts/graphik/Graphik-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Graphik';
  src: url('/digitale-assistent-mkb-bedrijf-reparatie/assets/fonts/graphik/Graphik-RegularItalic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Graphik';
  src: url('/digitale-assistent-mkb-bedrijf-reparatie/assets/fonts/graphik/Graphik-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Graphik';
  src: url('/digitale-assistent-mkb-bedrijf-reparatie/assets/fonts/graphik/Graphik-Semibold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Graphik';
  src: url('/digitale-assistent-mkb-bedrijf-reparatie/assets/fonts/graphik/Graphik-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Graphik';
  src: url('/digitale-assistent-mkb-bedrijf-reparatie/assets/fonts/graphik/Graphik-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* ---------- BRAND PALETTE ---------- */
  /* Greens — primary brand */
  --jafix-dark-green:        #194E3A;
  --jafix-dark-green-darker: #16332f;
  --jafix-dark-green-lighter:#2a6659;
  --jafix-mid-green:         #1D7050;
  --jafix-mid-green-darker:  #195842;
  --jafix-mid-green-lighter: #358f70;
  --jafix-turquoise:         #61B0AA;
  --jafix-turquoise-lighter: #75C5BF;
  --jafix-turquoise-darker:  #2e6e69;
  --jafix-fresh-green:       #3EFFBB;
  --jafix-fresh-green-lighter:#99FFDD;
  --jafix-fresh-green-darker:#2FCC96;

  /* Accents — yellow + orange (CTA / warning) */
  --jafix-yellow:            #FFC620;
  --jafix-yellow-lighter:    #FFDC73;
  --jafix-yellow-lightest:   #FFE7A3;
  --jafix-yellow-darker:     #F7B500;
  --jafix-orange:            #F79400;
  --jafix-orange-lighter:    #FFA620;
  --jafix-orange-darker:     #A06000;

  /* Neutrals */
  --jafix-white:             #FFFFFF;
  --jafix-light-grey:        #F4F4F4;
  --jafix-mid-grey:          #D9D9D9;
  --jafix-grey:              #6E6E6E;
  --jafix-grey-darker:       #666666;
  --jafix-dark-grey:         #2B2B2B;
  --jafix-black:             #000000;

  /* Warm neutral — used as section background */
  --jafix-beige:             #F3EBE5;
  --jafix-beige-lighter:     #FAF4F1;
  --jafix-beige-darker:      #D9CEC3;

  /* ---------- SEMANTIC ROLES ---------- */
  --fg-1:        var(--jafix-dark-grey);     /* primary text */
  --fg-2:        var(--jafix-grey-darker);   /* secondary text */
  --fg-muted:    var(--jafix-grey);          /* tertiary / metadata */
  --fg-brand:    var(--jafix-dark-green);    /* brand headings, links */
  --fg-link:     var(--jafix-mid-green);
  --fg-link-hover: var(--jafix-dark-green);
  --fg-on-dark:  var(--jafix-white);

  --bg-page:     var(--jafix-white);
  --bg-section:  var(--jafix-beige);         /* warm section */
  --bg-soft:     var(--jafix-light-grey);    /* cool section / sidebar */
  --bg-brand:    var(--jafix-mid-green);     /* dark hero, meta box */
  --bg-brand-deep: var(--jafix-dark-green);

  --accent-cta:  var(--jafix-yellow);        /* primary CTA */
  --accent-cta-hover: var(--jafix-yellow-lighter);
  --accent-positive: var(--jafix-fresh-green);
  --accent-rule: var(--jafix-turquoise);

  --border-soft: var(--jafix-mid-grey);
  --border-rule: var(--jafix-turquoise);
  --focus-ring:  var(--jafix-fresh-green);

  /* ---------- TYPE ---------- */
  --font-sans: 'Graphik', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Graphik Super', 'Graphik', ui-sans-serif, system-ui, sans-serif;

  /* Type scale (Tailwind defaults the theme rides on) */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.25rem;   /* 20 */
  --fs-2xl:  1.5rem;    /* 24 */
  --fs-3xl:  1.875rem;  /* 30 */
  --fs-4xl:  2.25rem;   /* 36 */
  --fs-5xl:  3rem;      /* 48 */
  --fs-6xl:  3.75rem;   /* 60 */

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relaxed:1.65;

  /* ---------- RADIUS / SHADOW / SPACING ---------- */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;   /* rounded-md — default for cards, buttons */
  --radius-lg: 0.5rem;     /* rounded-lg — buttons, panels */
  --radius-xl: 0.75rem;    /* logo frame, large cards */
  --radius-pill: 9999px;

  --shadow-button:  0 0 5px  rgba(0, 0, 0, 0.2);
  --shadow-teaser:  0 0 10px rgba(0, 0, 0, 0.2);
  --shadow-logo:    0 0 15px rgba(0, 0, 0, 0.1);
  --shadow-sm:      0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md:      0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-modal:   0 4px 20px rgba(0,0,0,0.15);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Container — matches max-w-7xl in the theme */
  --container-max: 80rem;

  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- BASE TYPE STYLES (matching jafix/base.css) ---------- */
body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  color: var(--fg-1);
  background: var(--bg-page);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-medium);
  color: var(--fg-brand);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-8) 0;
  text-wrap: balance;
}
h2, .h2 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-4) 0;
  text-wrap: balance;
}
h3, .h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
}
h4, h5, h6 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
}

p { margin: 0 0 var(--space-6) 0; }
p:last-child { margin-bottom: 0; }
p > a { text-decoration: underline; color: var(--fg-link); }
p > a:hover { color: var(--fg-link-hover); }

.eyebrow {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-brand);
}

.display {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.lede {
  font-size: var(--fs-xl);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9em;
}


/* =========================================================
   Jafix Assistent — Landing Page Styles
   ========================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Smooth scrolling for in-page anchor jumps (header nav). Disabled under
   prefers-reduced-motion below so reduced-motion users get instant jumps. */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-page);
}
img { display: block; max-width: 100%; }

/* containers */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
.container-tight {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 32px;
}

/* utility */
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-lg { padding: 128px 0; }
.bg-beige { background: var(--jafix-beige); }
.bg-soft  { background: var(--jafix-light-grey); }
.bg-dark  { background: var(--jafix-dark-green); color: var(--jafix-white); }
.bg-mid   { background: var(--jafix-mid-green); color: var(--jafix-white); }
.bg-white { background: var(--jafix-white); }

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jafix-dark-green);
}
.eyebrow-light {
  color: var(--jafix-fresh-green);
}

/* type scale for big drama */
.display-xl {
  font-family: var(--font-sans);
  font-size: clamp(40px, 5.2vw, 74px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.display-lg {
  font-size: clamp(36px, 4.4vw, 60px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}
.display-md {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
.lede {
  font-size: 20px;
  line-height: 1.55;
  color: var(--jafix-grey-darker);
  max-width: 640px;
}
.lede-dark { color: rgba(255,255,255,0.78); }

/* accent emphasis — bold, coloured, NOT italic.
   class kept named `italic-flourish` for backwards-compat with markup. */
.italic-flourish {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  color: var(--jafix-fresh-green);
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--radius-lg);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  border: 0;
  text-decoration: none;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
  white-space: nowrap;
}
.btn-cta {
  background: var(--jafix-yellow);
  color: var(--jafix-dark-grey);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 6px 18px rgba(0,0,0,0.08);
}
.btn-cta:hover { background: var(--jafix-yellow-lighter); }
.btn-ghost {
  background: transparent;
  color: var(--jafix-white);
  border: 1.5px solid rgba(255,255,255,0.32);
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); }
.btn-light {
  background: var(--jafix-white);
  color: var(--jafix-dark-green);
}
.btn-light:hover { background: var(--jafix-fresh-green); }
.btn-mid {
  background: var(--jafix-mid-green);
  color: var(--jafix-white);
}
.btn-mid:hover { background: var(--jafix-mid-green-darker); }
.btn-sm { padding: 10px 16px; font-size: 14px; }
.btn-lg { padding: 18px 28px; font-size: 17px; }

/* header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(25, 78, 58, 0.92);
  backdrop-filter: blur(8px);
  color: var(--jafix-white);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-header.is-light {
  background: rgba(255,255,255,0.92);
  color: var(--jafix-dark-green);
  border-bottom: 1px solid var(--jafix-mid-grey);
}
.site-header .nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.site-header .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
  font-size: 18px;
}
/* Logo bounce — a wooden-block "plock-plock" settle, triggered by app.js when the
   user scrolls back to the top: it tips onto its left corner (plock), rocks onto
   its right corner (plock), then drops flat. Two contacts, no springy overshoot.
   Each contact briefly dwells and the swing accelerates into the next plock
   (per-keyframe easing) so it reads as a hard object, not a spring. app.js jitters
   the two tilt angles + duration a little per bounce for a natural feel. Pivots at
   the base; guarded by prefers-reduced-motion below. */
@keyframes logo-bounce {
  /* Hop and rotation are one coupled arc: it launches up while already tilting
     toward the left, so by the time it falls back down the left corner is lowest
     and lands first (plock 1); the impact rocks it over to the right corner
     (plock 2); then it drops flat. translateY and rotate move together — never in
     separate phases. */
  0%   { transform: translateY(0) rotate(0deg);                                              animation-timing-function: ease-out; }  /* launch up, begin tilting left */
  26%  { transform: translateY(var(--bounce-hop, -6px)) rotate(calc(var(--bounce-left, -7deg) * 0.5)); animation-timing-function: ease-in; }  /* peak — airborne, half-tilted */
  52%  { transform: translateY(0) rotate(var(--bounce-left, -7deg));                          animation-timing-function: ease-out; }  /* left corner taps the floor — plock (no pause) */
  100% { transform: translateY(0) rotate(0deg); }                                                                                    /* right side drops away briskly, eases flat */
}
.site-header .brand.is-bouncing {
  transform-origin: 50% 100%;
  animation: logo-bounce var(--bounce-dur, 0.47s);
}
.site-header .brand-mark {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-header .brand-tag {
  font-weight: 400;
  font-size: 12px;
  opacity: 0.75;
  padding: 4px 8px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  margin-left: 4px;
  letter-spacing: 0.04em;
}
.site-header nav {
  display: flex;
  gap: 36px;
  flex: 1;
  margin-left: 20px;
  font-size: 15px;
}
.site-header nav a {
  color: inherit;
  text-decoration: none;
  opacity: 0.82;
}
.site-header nav a:hover { opacity: 1; }
/* scrollspy: the link for the section currently in view (set by app.js).
   Underline accent rather than a weight/border change so geometry stays stable. */
.site-header nav a.is-active {
  opacity: 1;
  text-decoration: underline;
  text-decoration-color: var(--jafix-fresh-green);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.site-header .nav-right {
  display: flex;
  gap: 12px;
  align-items: center;
}
/* nav-menu wraps the links + actions so they collapse together on mobile */
.site-header .nav-menu {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 32px;
}
/* hamburger — hidden on desktop, shown below the breakpoint */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  margin-left: auto;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  color: inherit;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav-toggle { display: flex; }
  .site-header .nav-inner { gap: 16px; }
  .site-header .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 24px;
    background: var(--jafix-dark-green);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 16px 32px rgba(0,0,0,0.22);
    display: none;
  }
  .site-header .nav-menu.is-open { display: flex; }
  .site-header nav {
    flex: none;
    flex-direction: column;
    gap: 0;
    margin-left: 0;
    font-size: 16px;
  }
  .site-header nav a {
    padding: 13px 2px;
    opacity: 1;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .site-header .nav-right {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 16px;
  }
  .site-header .nav-right a:first-child { text-align: center; padding: 6px; }
  .site-header .nav-right .btn { justify-content: center; }
}

/* HERO */
.hero {
  position: relative;
  background:
    radial-gradient(ellipse at 70% 45%, rgba(4, 46, 40, 0.86) 0%, rgba(5, 54, 47, 0.46) 30%, transparent 60%),
    linear-gradient(180deg, #033c34 0%, #04372f 56%, #07372f 100%);
  color: var(--jafix-white);
  overflow: hidden;
  min-height: 760px;
  padding: 106px 0 156px;
}
.hero::before {
  /* organic noise glow */
  content: "";
  position: absolute;
  top: -240px; right: -240px;
  width: 720px; height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(3, 38, 33, 0.78), rgba(4, 48, 42, 0.36) 48%, rgba(4, 48, 42, 0) 72%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -160px; left: -120px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(97,176,170,0.18), rgba(97,176,170,0) 70%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-eyebrow-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-pill);
  color: var(--jafix-fresh-green);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 28px;
}
.hero-eyebrow-row .dot {
  width: 8px; height: 8px;
  background: var(--jafix-fresh-green);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(62,255,187,0.16);
}
.hero h1.display-xl {
  color: var(--jafix-white);
  max-width: 14ch;
}
.hero h1.display-xl em {
  font-style: normal;
  color: var(--jafix-fresh-green);
  font-weight: 600;
}
.hero .hero-subtitle {
  margin-top: 16px;
  margin-bottom: 0;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.35;
  color: #fff;
  font-weight: 500;
  letter-spacing: -0.008em;
  max-width: 28ch;
  text-wrap: balance;
}
.hero .kernzin {
  margin-top: 24px;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.84);
  max-width: 540px;
  font-weight: 400;
}
.hero .kernzin strong {
  color: var(--jafix-white);
  font-weight: 500;
}
.hero-cta-row {
  margin-top: 40px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.hero-meta {
  margin-top: 28px;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
}
.hero-meta .meta-dot {
  width: 5px; height: 5px;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
}

/* hero grid layout — copy left, visual right (50/50);
   visual is bottom-aligned so it sits below the H1 instead of beside the headline */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: end;
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; align-items: stretch; }
}

/* hero eyebrow — inline .eyebrow span sits above the H1, so give it block
   flow and breathing room (the H1 .display-xl has margin: 0) */
.hero .eyebrow {
  display: block;
  margin-bottom: 20px;
}

/* small assistent badge */
.assistent-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-pill);
  color: var(--jafix-white);
  font-size: 14px;
  margin-bottom: 16px;
}
.assistent-badge .av {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--jafix-fresh-green);
  color: var(--jafix-dark-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
}
.assistent-badge .tag {
  background: rgba(62,255,187,0.18);
  color: var(--jafix-fresh-green);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* supplied PNG hero visual — variant chosen by app.js (?hero=v1|v2) */
.hero-grid:has(.hero-visual) {
  position: relative;
  display: block;
  min-height: 498px;
}
.hero-grid:has(.hero-visual) > div:first-child {
  position: relative;
  z-index: 2;
  max-width: 580px;
  padding-top: 34px;
}
.hero-visual {
  margin: 0;
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: -156px;
  width: clamp(546px, 46.2vw, 693px);
  pointer-events: none;
}
.hero-visual-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: saturate(1.02) contrast(1.01);
}
@media (max-width: 1180px) {
  /* Tablet / portrait "in-between" band (881px–1180px). The absolute overlay
     used on full desktop has no room left here, so switch to a real two-column
     grid: copy and visual now co-reserve space. The visual hugs the right of
     the container and slides left + shrinks with the viewport (never bleeding
     off-screen), the copy takes the remaining track and scales down with it,
     and the hero hugs its content instead of towering over a shrunken image.
     At 880px this snaps to the stacked mobile layout below. */
  .hero {
    min-height: 0;
    padding: 96px 0 64px;
  }
  .hero-grid:has(.hero-visual) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    align-items: start;
    column-gap: 32px;
    min-height: 0;
  }
  .hero-grid:has(.hero-visual) > div:first-child {
    max-width: none;
    padding-top: 0;
  }
  .hero-visual {
    position: relative;
    right: auto;
    bottom: auto;
    align-self: end;
    width: clamp(360px, 44vw, 560px);
  }
}
@media (max-width: 880px) {
  .hero {
    min-height: 0;
    padding: 88px 0 0;
  }
  .hero-grid:has(.hero-visual) {
    /* drop back out of the band's two-column grid into the stacked flow */
    display: block;
    min-height: 0;
  }
  .hero-grid:has(.hero-visual) > div:first-child {
    max-width: 100%;
    padding-top: 0;
  }
  .hero-visual {
    position: relative;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(calc(100vw - 32px), 620px);
    margin: 34px 0 0;
    transform: translateX(-50%);
  }
}
@media (max-width: 560px) {
  .hero-visual {
    width: min(calc(100vw - 24px), 500px);
    margin-top: 28px;
  }
}

/* ----------------------------------------------------------------
   HERO FLOW — inbound channels → AI-assistant orb → outcome cards
   Connector arrows are drawn by app.js (initHeroFlow), snapping to each
   node's live layout box via an offsetParent walk (transform-proof) and
   redrawn on resize / font load. The corona is animated SVG (feTurbulence
   displacement) + CSS; honored down to a still frame under reduced motion.
   ---------------------------------------------------------------- */
.hero-flow {
  position: relative;
  display: grid;
  grid-template-columns: max-content minmax(150px, 1fr) clamp(264px, 23vw, 300px);
  align-items: center;
  column-gap: 12px;
  min-height: 400px;
}

/* arrow overlay — paths injected by JS, sits behind the nodes */
.hf-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.hf-wire { fill: none; }
.hf-wire-in  { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.5; }
.hf-wire-out { stroke: #3EFFBB; stroke-opacity: 0.82; stroke-width: 2; marker-end: url(#hf-arrowhead); }
.hf-wire-flow {
  stroke: var(--jafix-fresh-green-lighter);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 0.5 17;
  opacity: 0.9;
  animation: hf-bead 1.7s linear infinite;
}
@keyframes hf-bead { to { stroke-dashoffset: -17.5; } }

.hf-side, .hf-core { position: relative; z-index: 1; }
.hf-side-in { width: max-content; }
.hf-side-out { justify-self: end; }

.hf-axis-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.3;
  max-width: 15ch;
  margin-bottom: 20px;
}
.hf-side-out .hf-axis-label { margin-left: auto; text-align: right; max-width: none; white-space: nowrap; }

/* left — channel icons */
.hf-channels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.hf-node-ic {
  width: 60px; height: 60px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.hf-node-ic svg { width: 24px; height: 24px; }

/* center — badge, orb, caption */
.hf-core { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hf-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: rgba(20, 46, 38, 0.7);
  border: 1px solid rgba(62, 255, 187, 0.25);
  border-radius: var(--radius-pill);
  color: var(--jafix-fresh-green);
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.hf-badge svg { width: 14px; height: 14px; fill: currentColor; }

.hf-orb {
  position: relative;
  width: 210px; height: 210px;
  display: flex; align-items: center; justify-content: center;
}
.hf-corona, .hf-dashring { position: absolute; inset: -28%; pointer-events: none; }
.hf-corona { z-index: 0; inset: -33%; transition: transform 520ms var(--ease-out), filter 520ms var(--ease-out); }
/* static dashed ring hugging the orb (no rotation — matches the design) */
.hf-dashring { z-index: 1; inset: -19%; }
.hf-corona .hf-flames { transform-box: fill-box; transform-origin: center; animation: hf-spin-rev 24s linear infinite; }
.hf-corona .hf-bloom  { transform-box: fill-box; transform-origin: center; animation: hf-breathe 5.5s ease-in-out infinite; }

/* hover — the green corona swells and brightens; no colour shift. */
.hf-orb:hover .hf-corona { transform: scale(1.12); filter: brightness(1.3) saturate(1.06); }
.hf-orb:hover .hf-orb-face {
  box-shadow:
    inset 0 2px 28px rgba(62, 255, 187, 0.42),
    inset 0 -10px 30px rgba(0, 0, 0, 0.45),
    0 0 0 1.5px rgba(62, 255, 187, 0.72),
    0 0 76px rgba(62, 255, 187, 0.52);
}

.hf-orb-face {
  position: relative;
  z-index: 2;
  width: 178px; height: 178px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #20785a 0%, #173a30 68%, #14302a 100%);
  box-shadow:
    inset 0 2px 26px rgba(62, 255, 187, 0.30),
    inset 0 -10px 30px rgba(0, 0, 0, 0.45),
    0 0 0 1.5px rgba(62, 255, 187, 0.45),
    0 0 48px rgba(62, 255, 187, 0.30);
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow 520ms var(--ease-out);
}
.hf-mark {
  width: 88px; height: 88px;
  color: var(--jafix-fresh-green);
  filter: drop-shadow(0 0 9px rgba(62, 255, 187, 0.55));
}
.hf-mark path { fill: currentColor; }

.hf-core-caption { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.hf-core-line { font-size: 15px; font-weight: 500; color: #fff; }
.hf-core-line.is-accent { color: var(--jafix-fresh-green); }

/* right — outcome cards (light, like the design) */
.hf-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.hf-result {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 13px; align-items: center;
  padding: 13px 15px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
}
.hf-result-ic {
  width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: #d6f5e8;
  color: var(--jafix-mid-green);
}
.hf-result-ic svg { width: 19px; height: 19px; }
/* per-card icon tints — green / gold / lavender / blue, as in the design */
.hf-result:nth-child(1) .hf-result-ic { background: #d6f5e8; color: var(--jafix-mid-green); }
.hf-result:nth-child(2) .hf-result-ic { background: #fdeecb; color: #a06a00; }
.hf-result:nth-child(3) .hf-result-ic { background: #e7e3f6; color: #6c5ec0; }
.hf-result:nth-child(4) .hf-result-ic { background: #dceaf7; color: #3a6ea8; }
.hf-result-body { min-width: 0; display: flex; flex-direction: column; }
.hf-result-title { font-size: 15px; font-weight: 600; color: var(--jafix-dark-green); line-height: 1.25; letter-spacing: -0.005em; }
.hf-result-sub { font-size: 12.5px; color: var(--jafix-grey-darker); margin-top: 2px; }
.hf-result-check {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--jafix-fresh-green-darker); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.hf-result-check svg { width: 12px; height: 12px; }

/* give the visual a bit more room than the copy, and center it vertically */
.hero-grid:has(.hero-flow) {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: center;
}

/* reveal stagger — only when JS opts in (.hf-js); no-JS renders fully */
.hf-js .hf-channel, .hf-js .hf-result { opacity: 0; transform: translateY(10px) scale(0.97); }
.hf-js .hf-orb { opacity: 0; transform: scale(0.9); }
.hf-js .hf-wires { opacity: 0; }
.hf-js.is-revealed .hf-channel,
.hf-js.is-revealed .hf-result {
  opacity: 1; transform: none;
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: calc(var(--i) * 90ms);
}
.hf-js.is-revealed .hf-orb {
  opacity: 1; transform: none;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.hf-js.is-revealed .hf-wires { opacity: 1; transition: opacity 0.6s ease 0.55s; }

@keyframes hf-spin-rev { to { transform: rotate(-360deg); } }
@keyframes hf-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.08); opacity: 1; }
}

/* responsive */
@media (max-width: 1180px) {
  .hf-orb { width: 184px; height: 184px; }
  .hf-orb-face { width: 154px; height: 154px; }
  .hf-mark { width: 76px; height: 76px; }
}
@media (max-width: 980px) {
  .hero-grid:has(.hero-flow) { grid-template-columns: 1fr; align-items: stretch; }
  .hero-flow { max-width: 580px; margin: 0 auto; }
}
@media (max-width: 600px) {
  /* mobile: ditch the wires and stack the diagram into centered rows —
     label · icons-in-a-row · assistant orb · stacked cards. */
  .hf-wires { display: none; }
  .hero-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    min-height: 0;
    max-width: 420px;
  }
  .hf-side-in, .hf-side-out {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hf-axis-label,
  .hf-side-out .hf-axis-label {
    font-size: 11px;
    max-width: none;
    text-align: center;
    white-space: normal;
    margin: 0 0 16px;
  }
  .hf-channels { flex-direction: row; gap: 18px; justify-content: center; }
  .hf-node-ic { width: 52px; height: 52px; }
  .hf-node-ic svg { width: 21px; height: 21px; }
  .hf-orb { width: 168px; height: 168px; }
  .hf-orb-face { width: 142px; height: 142px; }
  .hf-mark { width: 70px; height: 70px; }
  .hf-results { width: 100%; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-header .brand.is-bouncing { animation: none !important; }
  .hf-corona .hf-flames, .hf-corona .hf-bloom, .hf-wire-flow { animation: none !important; }
  .hf-js .hf-channel, .hf-js .hf-result, .hf-js .hf-orb, .hf-js .hf-wires { opacity: 1 !important; transform: none !important; }
}

/* generic section header */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 56px;
}
.section-head h2 { margin: 0; }
.section-head .lede { margin-top: 4px; }

/* "Wat doet de medewerker" — bullet cards */
.task-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) { .task-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px)  { .task-grid { grid-template-columns: repeat(2, 1fr); } }
.task-card {
  background: var(--jafix-white);
  border: 1px solid var(--jafix-mid-grey);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 220px;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.task-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-teaser);
}
.task-card .icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--jafix-dark-green);
  color: var(--jafix-fresh-green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.task-card h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--jafix-dark-green);
}
/* small "beta" pill next to the "Beheert je website" card title */
.task-beta {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--jafix-light-grey);
  color: var(--jafix-grey-darker);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.task-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--jafix-grey-darker);
}

/* DEMO FLOW =================================== */
.demo-shell {
  background: var(--jafix-light-grey);
  border-radius: 24px;
  padding: 56px 32px 64px;
  position: relative;
  overflow: hidden;
}
/* hint above the demo toggle — belongs to the toggle frame, not the lede */
.demo-toggle-hint {
  margin: 0 auto 24px;
  text-align: center;
  font-size: 14px;
  color: var(--jafix-grey-darker);
}
/* Static transcript — crawler-visible, no-JS fallback for the demo conversation */
.demo-transcript {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* `display: flex` above outranks the UA `[hidden]` rule — restore it so the
   JS can hand off from the static fallback to the interactive demo. */
.demo-transcript[hidden] { display: none; }
.dt-msg {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 12px 14px;
  background: var(--jafix-white);
  border: 1px solid var(--jafix-mid-grey);
  border-radius: 14px;
}
.dt-msg.dt-customer { border-left: 3px solid var(--jafix-beige-darker); }
.dt-msg.dt-bot      { border-left: 3px solid var(--jafix-fresh-green-darker); }
.dt-msg.dt-owner {
  border-left: 3px solid var(--jafix-mid-green);
  background: var(--jafix-light-grey);
}
.dt-speaker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--jafix-dark-green);
}
.dt-time {
  font-size: 11px;
  color: var(--jafix-grey);
  text-align: right;
}
.dt-text {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--jafix-dark-grey);
}
.dt-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jafix-mid-green);
  margin-right: 6px;
}

/* intake + quote blocks rendered inside the transcript */
.dt-card {
  grid-column: 1 / -1;
  margin-top: 8px;
  border: 1px solid var(--jafix-mid-grey);
  border-radius: 10px;
  padding: 12px;
  background: var(--jafix-beige-lighter);
}
.dt-card-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--jafix-dark-green);
}
.dt-intake-card dl { margin: 0; }
.dt-intake-card .dt-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  font-size: 13px;
}
.dt-intake-card dt { color: var(--jafix-grey-darker); flex-shrink: 0; }
.dt-intake-card dd {
  margin: 0;
  font-weight: 500;
  color: var(--jafix-dark-grey);
  text-align: right;
}
.dt-quote-card { background: var(--jafix-white); }
.dt-quote-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--jafix-mid-grey);
}
.dt-quote-nr { font-size: 12px; font-weight: 600; color: var(--jafix-dark-green); }
.dt-quote-org { font-size: 10px; color: var(--jafix-grey); }
.dt-quote-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--jafix-grey-darker);
  margin: 2px 0;
}
.dt-quote-line span:last-child { color: var(--jafix-dark-grey); }
.dt-quote-total {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--jafix-mid-grey);
  font-size: 13px;
  font-weight: 600;
  color: var(--jafix-dark-green);
}
.dt-quote-meta {
  margin: 6px 0 0;
  font-size: 10px;
  color: var(--jafix-grey);
}
.dt-photo {
  grid-column: 1 / -1;
  margin-top: 8px;
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--jafix-mid-grey);
}

.demo-tabs {
  display: inline-flex;
  background: var(--jafix-white);
  border: 1px solid var(--jafix-mid-grey);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 4px;
  margin-bottom: 40px;
}
.demo-tab {
  border: 0;
  background: transparent;
  color: var(--jafix-grey-darker);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.demo-tab.is-active {
  background: var(--jafix-dark-green);
  color: var(--jafix-white);
}

.demo-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  position: relative;
}

/* phone frame */
.phone {
  width: 340px;
  height: 700px;
  background: #1a1a1a;
  border-radius: 44px;
  padding: 12px;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.18),
    0 8px 18px rgba(0,0,0,0.1),
    inset 0 0 0 2px rgba(255,255,255,0.04);
  position: relative;
}
.phone-screen {
  width: 100%;
  height: 100%;
  background: #ECE5DD;
  border-radius: 34px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.phone-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 28px;
  background: #1a1a1a;
  border-radius: 16px;
  z-index: 10;
}

/* WhatsApp UI */
.wa-status {
  height: 32px;
  background: #075E54;
  color: rgba(255,255,255,0.92);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 4px 24px 4px 28px;
  font-size: 13px;
  font-weight: 500;
  font-feature-settings: "tnum" 1;
}
.wa-status .icons {
  display: flex;
  gap: 6px;
  align-items: center;
}
.wa-header {
  background: #075E54;
  color: #fff;
  padding: 10px 14px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.wa-header .avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--jafix-fresh-green);
  color: var(--jafix-dark-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.wa-header .name { font-size: 15px; font-weight: 500; line-height: 1.2; }
.wa-header .status { font-size: 11px; opacity: 0.78; line-height: 1.2; }
.wa-header .actions { margin-left: auto; display: flex; gap: 14px; opacity: 0.85; }

.wa-body {
  flex: 1;
  background: #ECE5DD;
  background-image:
    radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
  background-position: 0 0, 12px 12px;
  padding: 14px 12px 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scroll-behavior: smooth;
}
.wa-day {
  align-self: center;
  background: rgba(255,255,255,0.85);
  color: var(--jafix-grey-darker);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 8px;
  margin: 6px 0 10px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}
.wa-msg {
  max-width: 82%;
  padding: 7px 9px 6px;
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.35;
  box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
  position: relative;
  white-space: pre-wrap;
  word-break: break-word;
}
.wa-msg.bot {
  background: #fff;
  align-self: flex-start;
  border-top-left-radius: 0;
}
.wa-msg.me {
  background: #DCF8C6;
  align-self: flex-end;
  border-top-right-radius: 0;
}
.wa-msg .time {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  color: rgba(0,0,0,0.45);
  vertical-align: bottom;
  float: right;
  margin-top: 4px;
}
.wa-msg .ticks {
  font-size: 10px;
  color: #4FC3F7;
  margin-left: 2px;
}
.wa-msg .label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--jafix-mid-green);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.wa-card {
  background: #f6f5f1;
  border-left: 3px solid var(--jafix-mid-green);
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 4px;
  font-size: 12.5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wa-card .row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.wa-card .k { color: var(--jafix-grey-darker); flex-shrink: 0; }
.wa-card .v { font-weight: 500; color: var(--jafix-dark-grey); text-align: right; word-break: normal; overflow-wrap: anywhere; }

/* image bubble — real photo inside a chat bubble */
.wa-msg-wide { max-width: 94%; }
.wa-msg-img { padding: 4px; }
.wa-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.wa-img-cap {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  padding: 5px 4px 1px;
  font-size: 11px;
  line-height: 1.3;
  color: rgba(0,0,0,0.55);
}
.wa-img-time { flex-shrink: 0; font-size: 10px; color: rgba(0,0,0,0.42); }

.wa-quick-replies {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.wa-quick-reply {
  background: #fff;
  border: 1px solid var(--jafix-mid-grey);
  color: var(--jafix-mid-green);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.wa-quick-reply:hover { background: var(--jafix-fresh-green-lighter); }
.wa-quick-reply.primary {
  background: var(--jafix-mid-green);
  color: #fff;
  border-color: transparent;
}
.wa-quick-reply.primary:hover { background: var(--jafix-mid-green-darker); }

.wa-typing {
  align-self: flex-start;
  background: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  gap: 4px;
  border-top-left-radius: 0;
  box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
}
.wa-typing .dot {
  width: 6px; height: 6px;
  background: var(--jafix-grey);
  border-radius: 50%;
  animation: bounce 1.2s infinite;
}
.wa-typing .dot:nth-child(2) { animation-delay: 0.15s; }
.wa-typing .dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
  30% { transform: translateY(-3px); opacity: 1; }
}

.wa-composer {
  background: #f1ece4;
  padding: 8px 10px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.wa-composer .field {
  flex: 1;
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-size: 13px;
  color: var(--jafix-grey);
  box-shadow: 0 1px 0.5px rgba(0,0,0,0.1);
}
.wa-composer .send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #075E54;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* msg appear — bubbles fade in via opacity; transform via React mount.
   No animation-fill-mode tricks (they got stuck mid-state under React re-renders). */
.wa-msg, .wa-typing, .wa-day { opacity: 1; }

/* Demo — two-perspective player (phone + beat timeline + controls) */
.demo-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
  width: 100%;
}
.demo-caption {
  width: 240px;
  text-align: right;
}
.demo-kicker {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jafix-mid-green);
  margin-bottom: 10px;
}
.demo-caption h3 {
  margin: 0 0 10px;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--jafix-dark-green);
}
.demo-caption p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--jafix-grey-darker);
}
.demo-side { width: 200px; }
.demo-timeline {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.demo-beat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--jafix-grey);
  transition: color 200ms var(--ease-out);
}
.demo-beat-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--jafix-mid-grey);
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.demo-beat.is-done { color: var(--jafix-grey-darker); }
.demo-beat.is-done .demo-beat-dot {
  border-color: var(--jafix-mid-green);
  background: var(--jafix-mid-green);
  color: #fff;
}
.demo-beat.is-active { color: var(--jafix-dark-green); font-weight: 600; }
.demo-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 8px 6px 18px;
  background: #fff;
  border: 1px solid var(--jafix-mid-grey);
  border-radius: var(--radius-pill);
}
.demo-controls-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--jafix-grey-darker);
  min-width: 96px;
}
.demo-controls-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-family: inherit;
  color: #fff;
  background: var(--jafix-mid-green);
}
.demo-controls-toggle:hover { background: var(--jafix-dark-green); }
.demo-controls-toggle:focus-visible {
  outline: 2px solid var(--jafix-dark-green);
  outline-offset: 2px;
}
/* The track is a generous hit area; the visible rail is a centered pseudo-row
   so clicking anywhere on the band seeks. `overflow: hidden` clips the fill to
   the rounded rail. */
.demo-controls-track {
  position: relative;
  width: 150px;
  height: 14px;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--radius-pill);
}
.demo-controls-track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: var(--jafix-light-grey);
  border-radius: var(--radius-pill);
}
.demo-controls-track:focus-visible {
  outline: 2px solid var(--jafix-dark-green);
  outline-offset: 2px;
}
.demo-controls-bar {
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 4px;
  transform: translateY(-50%);
  background: var(--jafix-mid-green);
  border-radius: var(--radius-pill);
  transition: width 400ms var(--ease-out);
}
.demo-controls-reset {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--jafix-mid-green);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}
.demo-controls-reset:hover { background: var(--jafix-fresh-green-lighter); }

/* phone — customer ("site") theme: Jafix-green chrome instead of WhatsApp teal */
.phone.is-site .wa-status,
.phone.is-site .wa-header { background: var(--jafix-dark-green); }
.phone.is-site .wa-composer .send { background: var(--jafix-dark-green); }

/* in-phone quote card */
.wa-quote {
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 4px;
}
.wa-quote-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed #d9d9d9;
}
.wa-quote-nr { font-weight: 600; font-size: 12px; color: var(--jafix-dark-green); }
.wa-quote-org { font-size: 10px; color: #888; }
.wa-quote-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  color: #666;
  margin: 2px 0;
}
.wa-quote-line span:last-child { color: #2b2b2b; }
.wa-quote-total {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid #d9d9d9;
  font-size: 13px;
  font-weight: 600;
  color: var(--jafix-dark-green);
}
.wa-quote-meta { font-size: 10px; color: #888; margin-top: 6px; }

@media (max-width: 920px) {
  .demo-caption { width: 100%; max-width: 440px; text-align: center; }
  .demo-side { width: 100%; max-width: 340px; }
  .demo-timeline { flex-flow: row wrap; justify-content: center; gap: 10px 18px; }
}
@media (max-width: 480px) {
  .phone { width: 300px; height: 620px; }
  .demo-shell { padding: 40px 12px 48px; }
  .demo-controls { gap: 10px; padding: 6px 8px 6px 14px; }
  .demo-controls-track { width: 100px; }
}

/* Manifesto pull-quote =================================================== */
.manifesto {
  background: var(--jafix-dark-green);
  color: #fff;
  padding: 96px 0 100px;
  position: relative;
  overflow: hidden;
}
.manifesto::before {
  content: "";
  position: absolute;
  top: -120px; left: -120px;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(62,255,187,0.18), transparent 70%);
  pointer-events: none;
}
.manifesto::after {
  content: "";
  position: absolute;
  bottom: -180px; right: -120px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(97,176,170,0.18), transparent 70%);
  pointer-events: none;
}
.manifesto .container { position: relative; z-index: 1; }
.manifesto-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 56px;
  align-items: center;
}
.manifesto .hero-flow {
  width: 100%;
  min-height: 380px;
}
@media (max-width: 980px) {
  .manifesto-grid { grid-template-columns: 1fr; gap: 44px; }
  .manifesto .hero-flow { max-width: 580px; margin: 0 auto; }
}

.manifesto .pull {
  color: #fff;
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.014em;
  text-wrap: balance;
  margin: 0;
  max-width: 22ch;
}
.manifesto .pull strong {
  color: var(--jafix-fresh-green);
  font-weight: 600;
}
.manifesto .pull .quote-mark {
  display: inline-block;
  color: var(--jafix-fresh-green);
  font-weight: 600;
  margin-right: 8px;
  opacity: 0.7;
}
.manifesto .attrib {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
}
.manifesto .attrib .rule {
  width: 40px; height: 1px;
  background: rgba(255,255,255,0.3);
}

/* "Jij blijft de baas" callout (replaces "Het verschil") */
.control-callout {
  margin-top: 40px;
  padding: 28px 32px;
  background: #fff;
  border-radius: 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  border: 1px solid var(--jafix-mid-grey);
}
@media (max-width: 780px) {
  .control-callout { grid-template-columns: 1fr; }
}
.control-callout .badge-ic {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--jafix-fresh-green);
  color: var(--jafix-dark-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.control-callout .label {
  font-size: 12px;
  font-weight: 600;
  color: var(--jafix-dark-green);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.control-callout p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--jafix-dark-grey);
}
.control-callout p strong {
  color: var(--jafix-dark-green);
  font-weight: 600;
}
.control-callout .checks {
  display: flex;
  gap: 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--jafix-mid-green);
  white-space: nowrap;
  flex-wrap: wrap;
}
.control-callout .checks span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Trust section — Veilig, privé, van jou ================================ */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 8px;
}
@media (max-width: 1024px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .trust-grid { grid-template-columns: 1fr; } }
.trust-card {
  background: #fff;
  border: 1px solid var(--jafix-mid-grey);
  border-radius: var(--radius-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.trust-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-teaser);
}
.trust-card .ic {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--jafix-beige);
  color: var(--jafix-dark-green);
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-card h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--jafix-dark-green);
}
.trust-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--jafix-grey-darker);
}
.trust-card .meta {
  margin-top: auto;
  padding-top: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--jafix-mid-green);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.trust-card.is-control { border-color: var(--jafix-fresh-green); }
.trust-card.is-control .ic { background: var(--jafix-fresh-green); }

/* compact "lampje" hint — replaces the old big green "Geen website?" panel */
.website-hint {
  margin: 28px auto 0;
  max-width: 760px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--jafix-grey-darker);
}
.website-hint-ic {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--jafix-mid-green);
}

/* "Anders dan" comparison */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 780px) { .compare-grid { grid-template-columns: 1fr; } }
.compare-solo {
  max-width: 620px;
  margin: 0 auto;
}
.compare-card {
  background: #fff;
  border: 1px solid var(--jafix-mid-grey);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.compare-card.is-them { background: var(--jafix-light-grey); border-color: transparent; }
.compare-card.is-us {
  background: var(--jafix-dark-green);
  color: var(--jafix-white);
  border-color: transparent;
}
.compare-card h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  color: inherit;
}
.compare-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
  line-height: 1.4;
}
.compare-card li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.compare-card li .icon { flex-shrink: 0; margin-top: 2px; }
.compare-card.is-them li { color: var(--jafix-grey-darker); }
.compare-card.is-them .icon { color: var(--jafix-orange); }
.compare-card.is-us .icon { color: var(--jafix-fresh-green); }

/* Network — R-ladder */
.ladder {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 24px;
}
@media (max-width: 900px) { .ladder { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .ladder { grid-template-columns: repeat(2, 1fr); } }
.ladder-step {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 140px;
}
.ladder-step.is-you {
  background: var(--jafix-fresh-green);
  color: var(--jafix-dark-green);
  border-color: transparent;
}
.ladder-step .num {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.ladder-step.is-you .num { opacity: 0.9; }
.ladder-step .name {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
}
.ladder-step .desc {
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.78;
  margin-top: auto;
}
.ladder-step.is-you .desc { opacity: 1; color: var(--jafix-dark-green); font-weight: 500; }

/* Pricing */
.price-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 780px) { .price-grid { grid-template-columns: 1fr; } }
.price-card {
  background: #fff;
  border: 1px solid var(--jafix-mid-grey);
  border-radius: var(--radius-lg);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.price-card.is-featured {
  background: var(--jafix-dark-green);
  color: #fff;
  border-color: transparent;
  position: relative;
}
.price-card.is-featured .ribbon {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--jafix-yellow);
  color: var(--jafix-dark-grey);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.price-card h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  opacity: 0.85;
}
.price-card .amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.price-card .amount .num {
  font-size: 56px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.price-card .amount .unit { font-size: 14px; opacity: 0.7; }
.price-card .price-meta { font-size: 13px; opacity: 0.7; }
.price-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.4;
}
.price-card li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.price-card li .check { flex-shrink: 0; margin-top: 2px; color: var(--jafix-mid-green); }
.price-card.is-featured li .check { color: var(--jafix-fresh-green); }

/* Pricing: the relocated green "Waarom kiezen" card sits beside the plan.
   It reuses .compare-card.is-us; align it to the price-grid rhythm and let
   the bullet list push the testimonial bubble to the bottom. */
.price-grid .compare-card { padding: 36px; }
.price-grid .compare-card ul { margin-bottom: auto; }
.price-quote {
  margin: 24px 0 0;
  padding: 18px 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
}
.price-quote q {
  display: block;
  font-size: 15px;
  line-height: 1.45;
  color: #fff;
  quotes: "“" "”";
}
.price-quote q::before { content: open-quote; }
.price-quote q::after { content: close-quote; }
.price-quote figcaption {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--jafix-fresh-green);
}

/* Testimonials */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 980px) { .testimonial-grid { grid-template-columns: 1fr; } }
.testimonial {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: var(--shadow-teaser);
}
.testimonial q {
  font-size: 17px;
  line-height: 1.45;
  color: var(--jafix-dark-grey);
  quotes: "“" "”";
}
.testimonial q::before { content: open-quote; }
.testimonial q::after { content: close-quote; }
.testimonial .who {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: auto;
}
.testimonial .av {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--jafix-beige);
  display: flex; align-items: center; justify-content: center;
  color: var(--jafix-dark-green);
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
}
.testimonial .name { font-size: 14px; font-weight: 500; color: var(--jafix-dark-green); }
.testimonial .role { font-size: 13px; color: var(--jafix-grey-darker); }
/* two testimonials side by side — a balanced 2-up row, centered */
.testimonial-row {
  grid-template-columns: repeat(2, 1fr);
  max-width: 880px;
  margin: 0 auto;
}
@media (max-width: 980px) { .testimonial-row { grid-template-columns: 1fr; max-width: 560px; } }

/* FAQ */
.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--jafix-mid-grey);
}
.faq-item {
  border-bottom: 1px solid var(--jafix-mid-grey);
}
.faq-item button,
.faq-item summary {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 22px 0;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  color: var(--jafix-dark-green);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}
/* suppress the native <details> disclosure marker */
.faq-item summary { list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item .plus {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--jafix-beige);
  color: var(--jafix-dark-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  transition: transform 200ms;
}
.faq-item.is-open .plus,
.faq-item[open] .plus { transform: rotate(45deg); background: var(--jafix-dark-green); color: #fff; }
.faq-item .answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms var(--ease-out);
}
.faq-item.is-open .answer,
.faq-item[open] .answer { grid-template-rows: 1fr; }
.faq-item .answer-inner {
  overflow: hidden;
  font-size: 15px;
  line-height: 1.55;
  color: var(--jafix-grey-darker);
  max-width: 720px;
}
.faq-item.is-open .answer-inner,
.faq-item[open] .answer-inner { padding-bottom: 22px; }

/* Waitlist CTA */
.waitlist {
  background: var(--jafix-dark-green);
  color: var(--jafix-white);
  border-radius: 24px;
  padding: 72px 56px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
@media (max-width: 880px) {
  .waitlist { grid-template-columns: 1fr; padding: 56px 32px; }
}
.waitlist::after {
  content: "";
  position: absolute;
  top: -160px; right: -160px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(62,255,187,0.18), transparent 70%);
  pointer-events: none;
}
.waitlist .form {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.waitlist .form .row {
  display: flex;
  gap: 10px;
  flex-direction: column;
}
.waitlist .form label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jafix-fresh-green);
}
.waitlist .form input {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  color: #fff;
  outline: 0;
  /* let the input shrink with its column instead of forcing its
     intrinsic ~20-char width — otherwise the form overflows on mobile */
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.waitlist .form input::placeholder { color: rgba(255,255,255,0.4); }
.waitlist .form input:focus { border-color: var(--jafix-fresh-green); }
/* Honeypot anti-spam field — visually removed but still in the DOM and
   focusable by bots. Off-screen positioning (not display:none) so naive
   bots that skip hidden fields still fill it. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.waitlist .form .grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
@media (max-width: 560px) {
  .waitlist .form .grid { grid-template-columns: 1fr; }
}
.waitlist .form .submit-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
}
.waitlist .form small { color: rgba(255,255,255,0.6); font-size: 12px; }

/* Footer */
.site-footer {
  background: var(--jafix-dark-green);
  color: rgba(255,255,255,0.7);
  padding: 56px 0 32px;
}
.site-footer .row {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.site-footer .col h3 {
  color: var(--jafix-white);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 14px;
  line-height: var(--lh-snug);
}
.site-footer .col a {
  display: block;
  color: inherit;
  text-decoration: none;
  font-size: 14px;
  padding: 4px 0;
}
.site-footer .col a:hover { color: var(--jafix-fresh-green); }
.site-footer .legal {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  flex-wrap: wrap;
  gap: 12px;
}
.site-footer .legal .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--jafix-white);
  font-weight: 500;
}

/* tiny utilities */
.muted { color: var(--jafix-grey); }
.kbd-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--jafix-beige);
  color: var(--jafix-dark-green);
  font-size: 12px;
  font-weight: 500;
}
.section-divider {
  height: 1px;
  background: var(--jafix-mid-grey);
  border: 0;
  margin: 0;
}