/* ============================================================
   biz.css v4 — meil.no for bedrift
   Mercury-aligned (real values from cdn.mercury.com):
   font-weight 480 (not bold), letter-spacing 0, line-height 110%,
   warm off-white #FEFBFC, charcoal #1C1C23, blue-gray #6F7396.
   2026-05-20
   ============================================================ */

/* ---------- 1. TOKENS — exact Mercury palette ---------- */
body.biz {
  /* Surfaces — pale warm/cool off-white variations */
  --bg:           #FEFBFC;
  --surface:      #F8FCFD;
  --surface-2:    #F4F5F9;
  --surface-3:    #EDEDF3;

  /* Ink (dark moment for manifesto) */
  --ink:          #1C1C23;
  --ink-2:        #2A2B33;
  --ink-deep:     #06070A;

  /* Text */
  --text:         #1C1C23;
  --text-2:       #4A4C64;
  --text-muted:   #6F7396;
  --text-faint:   #C3C3CC;
  --on-ink:       #F8FCFD;
  --on-ink-2:     #C3C3CC;
  --on-ink-3:     #6F7396;

  /* Signal — used only on dark CTAs + manifesto accent */
  --signal:       #2A4FA6;
  --signal-2:     #1E3A8A;
  --signal-soft:  #E5EAF4;
  --signal-ink:   rgba(42,79,166,0.18);

  /* Functional */
  --ok:           #047857;
  --warn:         #B45309;

  /* Lines */
  --line:         rgba(28,28,35,0.07);
  --line-2:       rgba(28,28,35,0.13);
  --line-ink:     rgba(248,252,253,0.10);
  --line-ink-2:   rgba(248,252,253,0.18);

  /* Shadows — Mercury subtle */
  --sh-xs:        0 1px 2px rgba(28,28,35,0.03);
  --sh-sm:        0 2px 4px rgba(28,28,35,0.04), 0 4px 12px rgba(28,28,35,0.04);
  --sh:           0 2px 6px rgba(28,28,35,0.05), 0 16px 40px -8px rgba(28,28,35,0.10);
  --sh-lg:        0 6px 16px rgba(28,28,35,0.08), 0 40px 100px -20px rgba(28,28,35,0.18);
  --sh-xl:        0 10px 24px rgba(28,28,35,0.10), 0 80px 160px -32px rgba(28,28,35,0.24);

  /* Radii — Mercury larger */
  --r-btn: 8px;
  --r:     16px;
  --r-lg:  24px;
  --r-xl:  32px;

  /* Type */
  --font-sans:    "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --display-weight: 480;
  --display-tracking: 0;
  --display-leading: 1.10;

  --accent:       var(--signal);
  --accent-2:     var(--signal-2);
  --accent-soft:  var(--signal-soft);
  --accent-glow:  rgba(42,79,166,0.20);
  --border:       var(--line);
  --border-2:     var(--line-2);
  --border-strong:var(--line-2);

  background: var(--bg);
  background-image: none;
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  overflow-y: visible !important;
}
html:has(body.biz) {
  overflow-y: auto !important;
  overflow-x: clip;
}
body.biz .nav { padding: 0 !important; }
body.biz .nav-inner { padding-block: 14px !important; }

body.biz .aurora,
body.biz .dot-grid,
body.biz .biz-dark::before { display: none !important; }

/* ---------- 2. CONTAINER ---------- */
body.biz .container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding-inline: clamp(24px, 5vw, 64px);
}
body.biz .container-narrow {
  max-width: 920px;
  margin: 0 auto;
  padding-inline: clamp(24px, 5vw, 64px);
}

/* ---------- 3. SECTIONS — Mercury spacing scale ---------- */
body.biz .sx { position: relative; padding-block: clamp(64px, 7vw, 120px); }
body.biz .sx-paper    { background: var(--bg); }
body.biz .sx-surface  { background: var(--surface); }
body.biz .sx-surface-2{ background: var(--surface-2); }
body.biz .sx-ink      { background: var(--ink); color: var(--on-ink); }
body.biz .sx-ink-deep { background: var(--ink-deep); color: var(--on-ink); }

body.biz .sx-head { margin-bottom: clamp(40px, 5vw, 72px); max-width: 800px; }
body.biz .sx-head h2 {
  font-family: var(--font-sans);
  font-weight: var(--display-weight);
  font-size: clamp(2.25rem, 0.79rem + 3.66vw, 5.25rem); /* 36 → 84 */
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  margin: 0 0 24px;
  max-width: 20ch;
  color: var(--text);
}
body.biz .sx-ink .sx-head h2 { color: var(--on-ink); }
body.biz .sx-head .lede {
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.3125rem); /* 18 → 21 */
  line-height: 1.55;
  margin: 0;
  max-width: 56ch;
  color: var(--text-muted);
}
body.biz .sx-ink .sx-head .lede { color: var(--on-ink-2); }

body.biz .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 28px;
}
body.biz .sx-ink .eyebrow { color: var(--on-ink-2); }
body.biz .eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--signal);
}

/* ---------- 4. NAV — refined ---------- */
body.biz .nav {
  position: sticky;
  top: 0; z-index: 50;
  background: rgba(254,251,252,0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms, background 200ms;
}
body.biz .nav.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(254,251,252,0.94);
}
body.biz .nav-inner {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: clamp(20px, 4vw, 40px);
  padding-block: 14px !important;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: clamp(20px, 3vw, 40px);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.biz .nav-brand {
  display: inline-flex; align-items: baseline; gap: 10px;
  color: var(--text);
  text-decoration: none;
}
body.biz .nav-logo {
  height: 20px;
  width: auto;
  display: block;
}
body.biz .nav-brand-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
  position: relative;
  top: -1px;
}

body.biz .nav-menu {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
body.biz .nav-menu-link {
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--r-btn);
  transition: color 160ms, background 160ms;
}
body.biz .nav-menu-link:hover { color: var(--text); background: var(--surface-2); }
@media (max-width: 900px) {
  body.biz .nav-menu { display: none; }
  body.biz .nav-inner { grid-template-columns: auto 1fr auto; gap: 12px; }
  body.biz .nav-toggle { justify-self: center; }
  body.biz .nav-brand-sub { display: none; }
}
@media (max-width: 620px) {
  body.biz .nav-inner {
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand actions" "toggle toggle";
    row-gap: 10px;
  }
  body.biz .nav-brand { grid-area: brand; }
  body.biz .nav-actions { grid-area: actions; justify-self: end; }
  body.biz .nav-toggle { grid-area: toggle; justify-self: center; }
}

body.biz .nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.biz .nav-login {
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--r-btn);
  transition: background 160ms;
}
body.biz .nav-login:hover { background: var(--surface-2); }
body.biz .nav-cta {
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-weight: 500;
  border-radius: var(--r-btn);
  gap: 6px;
}
body.biz .nav-cta .arrow { font-size: 12px; }

/* ---------- 5. BUTTONS — Mercury dark-on-light ---------- */
body.biz .btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px;
  border-radius: var(--r-btn);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 160ms, color 160ms, border-color 160ms, box-shadow 160ms, transform 200ms;
  white-space: nowrap;
}
body.biz .btn--lg { padding: 15px 26px; font-size: 15px; }
body.biz .btn--primary {
  background: var(--ink);
  color: var(--on-ink);
  border-color: var(--ink);
}
body.biz .btn--primary:hover { background: var(--ink-2); transform: translateY(-1px); box-shadow: var(--sh-sm); }
body.biz .sx-ink .btn--primary { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
body.biz .sx-ink .btn--primary:hover { background: white; }
body.biz .btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-2);
}
body.biz .btn--ghost:hover { border-color: var(--text); background: var(--surface); }
body.biz .sx-ink .btn--ghost { color: var(--on-ink); border-color: var(--line-ink-2); }
body.biz .sx-ink .btn--ghost:hover { border-color: var(--on-ink); background: var(--ink-2); }
body.biz .btn .arrow { display: inline-block; transition: transform 200ms; }
body.biz .btn:hover .arrow { transform: translateX(2px); }


/* ---------- 6. HERO + SHOWCASE — single sticky laptop, scrolling content left ---------- */
body.biz .hero-shared {
  position: relative;
  background: var(--bg);
  overflow: visible;
}
body.biz .hero-shared-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas:
    "text laptop"
    "feats laptop";
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  padding-left: clamp(56px, 6vw, 120px);
  padding-right: clamp(40px, 4vw, 80px);
}
body.biz .hero-shared-grid > .hero-block { grid-area: text; }
body.biz .hero-shared-grid > .hero-shared-content { grid-area: feats; }
body.biz .hero-shared-grid > .hero-shared-laptop { grid-area: laptop; }
body.biz .hero-shared-content {
  display: flex;
  flex-direction: column;
}
body.biz .hero-block,
body.biz .feature-block {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(40px, 6vh, 80px);
}
body.biz .hero-block {
  justify-content: flex-start;
  padding-top: clamp(120px, 18vh, 240px);
  padding-left: clamp(16px, 2vw, 48px);
}
body.biz .hero-block h1 {
  font-family: var(--font-sans);
  font-size: clamp(2.25rem, 0.6rem + 3.2vw, 4.25rem);
  font-weight: var(--display-weight);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 0 0 36px;
  color: var(--text);
}
body.biz .hero-block h1 .br { display: block; white-space: normal; }
body.biz .hero-block h1 .accent { color: var(--signal); }
body.biz .feature-block h2 {
  font-family: var(--font-sans);
  font-weight: var(--display-weight);
  font-size: clamp(2rem, 0.5rem + 3.5vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 24px;
  color: var(--text);
  max-width: 14ch;
}
body.biz .feature-block p {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 42ch;
  margin: 0 0 28px;
}

/* RIGHT: sticky laptop. CSS-only scroll-driven scale transition (no JS, no CSP issues). */
@keyframes hero-laptop-scale-in {
  from { transform: translateY(-50%) scale(0.72); }
  to   { transform: translateY(-50%) scale(1);    }
}
body.biz .hero-shared-laptop {
  position: sticky;
  top: 50%;
  align-self: start;
  height: max-content;
  /* Fallback for browsers without scroll-driven animations: static at start size */
  transform: translateY(-50%) scale(0.72);
  transform-origin: center center;
  transition: none;
  will-change: transform;
}
@supports (animation-timeline: scroll()) {
  body.biz .hero-shared-laptop {
    animation: hero-laptop-scale-in linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 70vh;
  }
}
body.biz .hero-shared-laptop .device-row {
  display: block;
  width: 100%;
}
body.biz .hero-shared-laptop .device-laptop {
  width: 100%;
  position: relative;
}
body.biz .hero-shared-laptop .cine-shots {
  position: relative;
  width: 100%; height: 100%;
}
body.biz .hero-shared-laptop .cine-shot {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.biz .hero-shared-laptop .cine-shot.is-active { opacity: 1; }

/* PHONE MOCKUP — design-matched to laptop (same dark gradient bezel, same shadow language)
   On desktop (≥1000px): hidden, laptop only.
   On mobile (<1000px): shown, laptop hidden. */
body.biz .hero-shared-laptop .device-phone {
  display: none;
  position: relative;
  width: 70%;
  max-width: 320px;
  margin: 0 auto;
}
body.biz .hero-shared-laptop .device-phone-bezel {
  background: linear-gradient(180deg, #1A1B22 0%, #0A0B0D 100%);
  border-radius: 28px;
  padding: 8px;
  position: relative;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 0 0 1px rgba(0,0,0,0.5),
    0 24px 40px -16px rgba(28,28,35,0.30),
    0 60px 100px -30px rgba(28,28,35,0.35);
}
body.biz .hero-shared-laptop .device-phone-camera {
  /* matches laptop's camera-dot but pill-shaped for phone */
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  height: 6px;
  border-radius: 4px;
  background: #06070A;
  z-index: 2;
}
body.biz .hero-shared-laptop .device-phone-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg);
}
body.biz .hero-shared-laptop .cine-shots-phone {
  position: relative;
  width: 100%; height: 100%;
}
body.biz .hero-shared-laptop .cine-shot-phone {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 28% top;
  opacity: 0;
  transition: opacity 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.biz .hero-shared-laptop .cine-shot-phone.is-active { opacity: 1; }

@media (max-width: 1000px) {
  /* Single column: hero text → phone (in hero, not sticky) → features */
  body.biz .hero-shared-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "laptop"
      "feats";
    padding-inline: clamp(24px, 4vw, 48px);
  }
  body.biz .hero-block {
    position: static;
    transform: none;
    min-height: auto;
    padding-block: clamp(56px, 10vh, 96px) clamp(24px, 4vh, 40px);
    padding-left: 0;
  }
  /* Phone shows after hero text, scrolls away naturally — no sticky */
  body.biz .hero-shared-laptop {
    position: static;
    transform: none;
    animation: none;
    margin: 0 auto clamp(40px, 8vh, 80px);
    width: 70%;
    max-width: 320px;
    padding-block: 0;
  }
  body.biz .feature-block {
    min-height: auto;
    padding-block: 56px;
  }
  body.biz .hero-shared-laptop .device-laptop { display: none; }
  body.biz .hero-shared-laptop .device-phone {
    display: block;
    width: 100%;
    max-width: none;
  }
}

/* Hide legacy hero-cine (now merged into hero-shared) */
body.biz .hero-cine { display: none !important; }
body.biz .hero-cine-old {
  position: relative;
  background: var(--bg);
  min-height: 420vh;
  border-top: 1px solid var(--line);
}
body.biz .cine-intro {
  padding-block: clamp(72px, 8vw, 120px) clamp(40px, 5vw, 64px);
  text-align: left;
  max-width: 920px;
  padding-inline: clamp(56px, 6vw, 120px);
}
body.biz .cine-intro .eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 20px;
  display: inline-flex; align-items: center; gap: 8px;
}
body.biz .cine-intro .eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--signal);
  display: inline-block;
}
body.biz .cine-intro h2 {
  font-family: var(--font-sans);
  font-weight: var(--display-weight);
  font-size: clamp(2.25rem, 1rem + 3.5vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 20px;
  color: var(--text);
}
body.biz .cine-intro h2 .accent { color: var(--signal); }
body.biz .cine-intro .lede {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  max-width: 56ch;
}

body.biz .hero-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 80% 15%, rgba(255,213,170,0.32) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 15% 30%, rgba(220,233,255,0.28) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 95% 70%, rgba(232,222,245,0.22) 0%, transparent 60%);
  z-index: 0;
}

body.biz .hero-cine-pin {
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  width: 100%;
  display: flex;
  align-items: center;
  z-index: 2;
}

body.biz .hero-cine-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  width: 100%;
  padding-left: clamp(56px, 6vw, 120px);
  padding-right: clamp(40px, 4vw, 80px);
}

/* LEFT info stack */
body.biz .cine-info-stack {
  position: relative;
  min-height: 460px;
}
body.biz .cine-info-pane {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* opacity + transform set by JS continuously for smooth cross-fade */
  transition: none;
  will-change: opacity, transform;
}

body.biz .cine-info-pane[data-frame="0"] h1 {
  font-family: var(--font-sans);
  font-size: clamp(2.5rem, 1rem + 4.2vw, 5.5rem);
  font-weight: var(--display-weight);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 0 0 36px;
  color: var(--text);
}
body.biz .cine-info-pane[data-frame="0"] h1 .br { display: block; }
body.biz .cine-info-pane[data-frame="0"] h1 .accent { color: var(--signal); }

body.biz .cine-info-pane h2 {
  font-family: var(--font-sans);
  font-weight: var(--display-weight);
  font-size: clamp(2rem, 0.5rem + 3.5vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 24px;
  color: var(--text);
  max-width: 14ch;
}
body.biz .cine-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 18px;
}
body.biz .cine-info-pane p {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 42ch;
  margin: 0 0 28px;
}
body.biz .cine-bullets {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 12px;
}
body.biz .cine-bullets li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  max-width: 44ch;
}
body.biz .cine-bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-soft);
}

/* RIGHT laptop wrapper — JS adds subtle scroll-driven motion */
body.biz .cine-laptop-wrap {
  position: relative;
  width: 100%;
  will-change: transform;
}
body.biz .cine-laptop-wrap .device-laptop { width: 100%; }
body.biz .cine-shots {
  position: relative;
  width: 100%; height: 100%;
}
body.biz .cine-shot {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  /* JS sets opacity each frame */
  transition: none;
  will-change: opacity;
}

/* Responsive */
@media (max-width: 1400px) {
  body.biz .cine-info-pane[data-frame="0"] h1 { font-size: clamp(2rem, 0.25rem + 3.6vw, 4rem); }
  body.biz .cine-info-pane h2 { font-size: clamp(1.75rem, 0.5rem + 2.8vw, 3.5rem); }
  body.biz .hero-cine-grid { padding-left: clamp(32px, 4vw, 80px); padding-right: clamp(24px, 3vw, 64px); }
}
@media (max-width: 1100px) {
  body.biz .hero-cine-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; }
  body.biz .cine-info-pane[data-frame="0"] h1 { font-size: clamp(1.75rem, 0.5rem + 2.8vw, 2.75rem); }
}
@media (max-width: 1000px) {
  body.biz .hero-cine { min-height: auto; }
  body.biz .hero-cine-pin { position: static; height: auto; padding-block: clamp(48px, 6vw, 88px); }
  body.biz .hero-cine-grid { grid-template-columns: 1fr; gap: 48px; padding: 0 clamp(20px, 4vw, 48px); }
  body.biz .cine-info-stack { position: relative; min-height: auto; }
  body.biz .cine-info-pane { position: relative; opacity: 1; transform: none; pointer-events: auto; }
  body.biz .cine-info-pane:not([data-frame="0"]) { display: none; }
}

body.biz .hero-split > .container.hero-split-grid {
  max-width: none;
  padding-left: clamp(80px, 7vw, 144px);
  padding-right: clamp(56px, 5vw, 96px);
  width: 100%;
}

body.biz .hero-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 80% 15%, rgba(255,213,170,0.32) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 15% 30%, rgba(220,233,255,0.28) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 95% 70%, rgba(232,222,245,0.22) 0%, transparent 60%);
  z-index: 0;
}

body.biz .hero-split-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.05fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
@media (max-width: 1000px) {
  body.biz .hero-split-grid {
    grid-template-columns: 1fr;
    gap: 56px;
    text-align: center;
  }
}

body.biz .hero-text {
  position: relative;
  z-index: 2;
  margin-left: clamp(0px, 2vw, 40px);
}
body.biz .hero-text .eyebrow { margin-bottom: 24px; }
@media (max-width: 1000px) {
  body.biz .hero-text .eyebrow { justify-content: center; }
}
body.biz .hero-split h1,
body.biz .hero-cine h1 {
  font-family: var(--font-sans);
  font-size: clamp(2.5rem, 1rem + 4.2vw, 5.5rem);
  font-weight: var(--display-weight);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 0 0 40px;
  color: var(--text);
  max-width: none;
  width: 100%;
}
body.biz .hero-cine h1 .br { display: block; }
body.biz .hero-cine h1 .accent { color: var(--signal); }
body.biz .hero-cine .hero-text { position: relative; z-index: 4; }
@media (max-width: 1000px) {
  body.biz .hero-split h1 { margin-inline: auto; }
}
body.biz .hero-split h1 .br { display: block; }
body.biz .hero-split h1 .accent { color: var(--signal); }
body.biz .hero-sub {
  font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);
  line-height: 1.55;
  max-width: 38ch;
  color: var(--text-muted);
  margin: 0 0 44px;
}
@media (max-width: 1000px) { body.biz .hero-sub { margin-inline: auto; } }
body.biz .hero-ctas {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Device — right column. Sticky: stays in view while text+content scroll past */
body.biz .hero-device {
  position: sticky;
  top: clamp(96px, 12vh, 140px);
  width: 100%;
  max-width: none;
  margin-left: auto;
  align-self: start;
  transform: translateY(calc(var(--p, 0) * -8px)) scale(calc(1 + var(--p, 0) * 0.015));
  transform-origin: center center;
  transition: transform 80ms linear;
  z-index: 1;
}
@media (max-width: 1000px) {
  body.biz .hero-device {
    position: relative;
    top: auto;
    margin-inline: auto;
    max-width: 720px;
  }
}

/* Phone — overlapping bottom-left of laptop, in front, straight */
body.biz .device-phone {
  position: absolute;
  left: -4%;
  bottom: -8%;
  width: 20%;
  min-width: 160px;
  aspect-ratio: 9 / 19.5;
  z-index: 3;
  filter:
    drop-shadow(0 4px 8px rgba(15,16,20,0.12))
    drop-shadow(0 22px 32px rgba(15,16,20,0.20))
    drop-shadow(0 48px 72px rgba(15,16,20,0.18));
}
body.biz .device-phone-bezel {
  position: relative;
  width: 100%; height: 100%;
  background: linear-gradient(180deg, #1A1B22 0%, #0A0B0D 100%);
  border-radius: 14% / 6.5%;
  padding: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 1px rgba(0,0,0,0.5);
}
body.biz .device-phone-notch {
  position: absolute;
  top: 8px; left: 50%;
  width: 32%; height: 16px;
  background: #06070A;
  border-radius: 999px;
  transform: translateX(-50%);
  z-index: 2;
}
body.biz .device-phone-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 12% / 5.6%;
  overflow: hidden;
  background: var(--bg);
}
body.biz .device-phone-screen img {
  width: 280%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: left top;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

@media (max-width: 720px) {
  body.biz .device-phone { width: 30%; min-width: 140px; left: -6%; bottom: -10%; }
}

/* Trust strip section — own section after hero-cinematic, white bg over device */
body.biz .hero-trust-section {
  position: relative;
  z-index: 2;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
body.biz .hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 32px;
  align-items: center;
  padding-block: clamp(20px, 3vh, 32px);
}
body.biz .hero-trust-item {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
body.biz .hero-trust-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }

@media (max-width: 720px) {
  body.biz .hero-cinematic { min-height: 160vh; }
  body.biz .hero-device { width: 92vw; bottom: -2vh; }
}

/* ---------- 6b. LAPTOP MOCKUP ---------- */
body.biz .device-laptop {
  position: relative;
  width: 100%;
}
body.biz .device-laptop-bezel {
  background: linear-gradient(180deg, #1A1B22 0%, #0A0B0D 100%);
  border-radius: 14px 14px 4px 4px;
  padding: 14px 14px 6px;
  position: relative;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 0 0 1px rgba(0,0,0,0.5),
    0 30px 60px -20px rgba(28,28,35,0.30),
    0 80px 140px -40px rgba(28,28,35,0.35);
}
body.biz .device-laptop-bezel::before {
  /* Camera dot */
  content: "";
  position: absolute;
  top: 6px; left: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #2A2B33;
  transform: translateX(-50%);
}
body.biz .device-laptop-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg);
}
body.biz .device-laptop-screen img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
body.biz .device-laptop-hinge {
  height: 6px;
  width: 100%;
  background: linear-gradient(180deg, #1A1B22 0%, #2A2B33 100%);
  position: relative;
}
body.biz .device-laptop-hinge::after {
  /* Hinge notch */
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 100px; height: 6px;
  background: #06070A;
  border-radius: 0 0 6px 6px;
  transform: translateX(-50%);
}
body.biz .device-laptop-base {
  height: 18px;
  width: 108%;
  margin: 0 -4%;
  background: linear-gradient(180deg, #C9CBD3 0%, #A6A9B3 60%, #6F7396 100%);
  border-radius: 0 0 16px 16px;
  position: relative;
  box-shadow:
    0 24px 40px -16px rgba(28,28,35,0.25),
    0 60px 90px -30px rgba(28,28,35,0.25);
}
body.biz .device-laptop-base::after {
  /* Trackpad slot */
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 18%; height: 5px;
  background: linear-gradient(180deg, #6F7396, #4A4C64);
  border-radius: 0 0 6px 6px;
  transform: translateX(-50%);
}

@media (max-width: 720px) {
  body.biz .device-laptop-base { width: 110%; margin: 0 -5%; }
}

/* ---------- 7. TRUST BAND ---------- */
body.biz .trust { padding-block: clamp(48px, 5vw, 72px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); }
body.biz .trust-lede {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 32px;
  text-transform: uppercase;
}
body.biz .trust-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
@media (max-width: 720px) { body.biz .trust-grid { grid-template-columns: repeat(3, 1fr); } }
body.biz .sector {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 12px;
  padding: 18px 12px;
  border-radius: var(--r);
  background: transparent;
  text-align: center;
  transition: background 160ms, color 160ms;
}
body.biz .sector:hover { background: var(--surface); color: var(--text); }
body.biz .sector svg { width: 18px; height: 18px; color: var(--text-2); opacity: 0.6; transition: opacity 160ms; }
body.biz .sector:hover svg { opacity: 1; }
body.biz .sector-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 500;
}

/* ---------- 8. PRODUCT MODULE ---------- */
body.biz .pm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  padding-block: clamp(48px, 7vw, 96px);
}
body.biz .pm + .pm { border-top: 1px solid var(--line); padding-top: clamp(48px, 7vw, 96px); }
body.biz .pm-text h3 {
  font-family: var(--font-sans);
  font-weight: var(--display-weight);
  font-size: clamp(2rem, 0.75rem + 3.126vw, 4.563rem); /* 32 → 73 */
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  margin: 0 0 24px;
  color: var(--text);
}
body.biz .pm-text p {
  font-size: 1.125rem; /* 18 */
  line-height: 1.6;
  margin: 0 0 32px;
  color: var(--text-muted);
  max-width: 46ch;
}
body.biz .pm-bullets { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 14px; }
body.biz .pm-bullets li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 14px;
  align-items: start;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text);
}
body.biz .pm-bullets li::before {
  content: "";
  width: 14px; height: 14px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 4px var(--signal-soft);
}
body.biz .pm-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px;
  transition: border-color 160ms, gap 200ms;
}
body.biz .pm-link:hover { border-color: var(--text); gap: 12px; }
body.biz .pm-link::after { content: "→"; transition: transform 200ms; }

body.biz .pm-visual {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line-2);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  box-shadow: 0 1px 2px rgba(28,28,35,0.06), 0 12px 32px -6px rgba(28,28,35,0.12), 0 48px 80px -24px rgba(28,28,35,0.18);
}
body.biz .pm-visual::after {
  /* Inset highlight + bottom edge for definition against cream */
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), inset 0 -1px 0 rgba(28,28,35,0.08);
}
body.biz .pm-visual img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
body.biz .pm--reverse .pm-text { order: 2; }
body.biz .pm--reverse .pm-visual { order: 1; }
@media (max-width: 960px) {
  body.biz .pm { grid-template-columns: 1fr; gap: 48px; }
  body.biz .pm--reverse .pm-text, body.biz .pm--reverse .pm-visual { order: initial; }
}
body.biz .pm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 32px; }
body.biz .pm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text);
}

/* ---------- 9. COMPARISON ---------- */
body.biz .cmp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.biz .cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: var(--bg);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
}
body.biz .cmp-table th, body.biz .cmp-table td {
  padding: 22px 24px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
body.biz .cmp-table thead th {
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 1px solid var(--line-2);
}
body.biz .cmp-table th.us, body.biz .cmp-table td.us-col {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 500;
}
body.biz .cmp-table th.us {
  border-bottom-color: var(--signal);
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font-sans);
  font-size: 14px;
}
body.biz .cmp-table tr:last-child th, body.biz .cmp-table tr:last-child td { border-bottom: 0; }
body.biz .cmp-table .y::before { content: "✓"; display: inline-block; margin-right: 8px; color: var(--ok); font-weight: 700; }
body.biz .cmp-table .n::before { content: "—"; display: inline-block; margin-right: 8px; color: var(--text-faint); font-weight: 500; }
body.biz .cmp-table .row-h { font-weight: 500; color: var(--text); }

/* ---------- 10. MANIFESTO (the dark moment) ---------- */
body.biz .manif { text-align: left; }
body.biz .manif-quote {
  font-family: var(--font-sans);
  font-weight: var(--display-weight);
  font-size: clamp(2.625rem, 0.979rem + 4.116vw, 6rem); /* 42 → 96 */
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  margin: 0 0 64px;
  max-width: 18ch;
  color: var(--on-ink);
}
body.biz .manif-quote .accent { color: var(--signal); }
body.biz .manif-body {
  font-size: 1.1875rem; /* 19 */
  line-height: 1.7;
  color: var(--on-ink-2);
  max-width: 62ch;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
body.biz .manif-body strong { color: var(--on-ink); font-weight: 500; }
body.biz .manif-sign { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line-ink); display: flex; flex-direction: column; gap: 4px; }
body.biz .manif-sign-name { font-size: 15px; font-weight: 500; color: var(--on-ink); letter-spacing: -0.005em; }
body.biz .manif-sign-role { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--on-ink-2); text-transform: uppercase; }

/* ---------- 11. MIGRATION ---------- */
body.biz .mig-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 820px) { body.biz .mig-steps { grid-template-columns: 1fr; } }
body.biz .mig-step {
  position: relative;
  padding: 32px;
  border-radius: var(--r-lg);
  background: var(--bg);
  border: 1px solid var(--line);
  transition: border-color 200ms, transform 200ms, box-shadow 200ms;
}
body.biz .mig-step:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--sh); }
body.biz .mig-step-num {
  position: absolute;
  top: 28px; right: 32px;
  font-family: var(--font-mono);
  font-size: 64px;
  font-weight: 400;
  color: var(--surface-3);
  letter-spacing: -0.04em;
  line-height: 1;
}
body.biz .mig-day { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--signal); text-transform: uppercase; margin-bottom: 20px; display: block; }
body.biz .mig-step h4 {
  font-family: var(--font-sans);
  font-weight: var(--display-weight);
  font-size: clamp(1.5rem, 0.5vw + 1.375rem, 1.75rem);
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0 0 14px;
  color: var(--text);
}
body.biz .mig-step p { font-size: 15px; line-height: 1.6; color: var(--text-muted); margin: 0; }
body.biz .mig-callout {
  margin-top: 48px;
  padding: 24px 28px;
  border-radius: var(--r);
  background: var(--ink);
  color: var(--on-ink);
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
body.biz .mig-callout strong { color: var(--on-ink); font-weight: 500; }
body.biz .mig-callout .small { font-size: 14px; color: var(--on-ink-2); }

/* ---------- 12. PRICING ---------- */
body.biz .pricing-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  margin-bottom: 56px;
}
body.biz .pricing-toggle button {
  padding: 9px 20px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 160ms, color 160ms;
}
body.biz .pricing-toggle button.is-active { background: var(--bg); color: var(--text); box-shadow: var(--sh-xs); }
body.biz .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 980px) { body.biz .pricing-grid { grid-template-columns: 1fr; } }
body.biz .plan {
  position: relative;
  padding: 40px 36px 36px;
  border-radius: var(--r-lg);
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}
body.biz .plan:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--sh); }
body.biz .plan--featured { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--sh); }
body.biz .plan-badge {
  position: absolute;
  top: -13px; left: 28px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}
body.biz .plan-name { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; margin: 0 0 8px; color: var(--text); }
body.biz .plan-tag { font-size: 14.5px; color: var(--text-muted); margin: 0 0 36px; line-height: 1.5; }
body.biz .plan-price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 36px; }
body.biz .plan-price {
  font-family: var(--font-sans);
  font-weight: var(--display-weight);
  font-size: clamp(3rem, 0.5vw + 2.875rem, 3.75rem); /* 48 → 60 */
  letter-spacing: var(--display-tracking);
  line-height: 1;
  color: var(--text);
}
body.biz .plan-unit { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; color: var(--text-muted); }
body.biz .plan-feats { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
body.biz .plan-feats li { display: grid; grid-template-columns: 16px 1fr; gap: 12px; font-size: 14.5px; line-height: 1.55; color: var(--text); }
body.biz .plan-feats li::before {
  content: "";
  width: 14px; height: 14px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--ok);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7l3 3 5-6'/></svg>");
}
body.biz .plan-cta { width: 100%; justify-content: center; }

/* ---------- 13. CUSTOMER STORY ---------- */
body.biz .story {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(48px, 7vw, 96px);
  align-items: center;
  position: relative;
}
@media (max-width: 960px) { body.biz .story { grid-template-columns: 1fr; gap: 56px; } }
body.biz .story-quote {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 0.5vw + 1.375rem, 2.25rem); /* 24 → 36 */
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: var(--display-weight);
  margin: 0 0 40px;
  color: var(--text);
}
body.biz .story-quote::before {
  content: "\201C";
  display: block;
  font-size: 96px;
  line-height: 0.6;
  color: var(--signal);
  margin-bottom: 20px;
}
body.biz .story-attr { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; }
body.biz .story-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--signal), #6366F1);
  display: grid; place-items: center;
  font-weight: 500; font-size: 18px;
  color: white;
}
body.biz .story-name { font-weight: 500; font-size: 15.5px; color: var(--text); letter-spacing: -0.005em; }
body.biz .story-role { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--text-muted); }
body.biz .story-stats { display: grid; grid-template-columns: 1fr; gap: 0; }
body.biz .story-stat { padding: 28px 0; border-bottom: 1px solid var(--line); }
body.biz .story-stat:last-child { border-bottom: 0; }
body.biz .story-stat-val {
  font-family: var(--font-sans);
  font-size: clamp(2.5rem, 1vw + 2.25rem, 4rem);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 1;
  color: var(--text);
}
body.biz .story-stat-label { font-size: 14.5px; margin-top: 12px; color: var(--text-muted); line-height: 1.5; }
body.biz .dummy-banner {
  position: absolute;
  top: 24px; right: 24px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(180,83,9,0.08);
  border: 1px solid rgba(180,83,9,0.3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warn);
}

/* ---------- 14. FAQ ---------- */
body.biz .faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
body.biz .faq-item { border-bottom: 1px solid var(--line); }
body.biz .faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 32px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--text);
  position: relative;
}
body.biz .faq-item summary::-webkit-details-marker { display: none; }
body.biz .faq-item .faq-q { flex: 1; }
body.biz .faq-item .faq-toggle {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  position: relative;
  transition: background 160ms, border-color 160ms;
  flex-shrink: 0;
}
body.biz .faq-item .faq-toggle::before,
body.biz .faq-item .faq-toggle::after {
  content: "";
  position: absolute;
  background: var(--text);
  transition: transform 200ms;
}
body.biz .faq-item .faq-toggle::before { width: 12px; height: 1.5px; }
body.biz .faq-item .faq-toggle::after { width: 1.5px; height: 12px; }
body.biz .faq-item[open] .faq-toggle::after { transform: scaleY(0); }
body.biz .faq-item[open] .faq-toggle { background: var(--ink); border-color: var(--ink); }
body.biz .faq-item[open] .faq-toggle::before { background: var(--on-ink); }
/* The answer belongs to its question, so it sits closer to it than the 32px
   that separates one item from the next. The summary keeps that 32px while
   closed and gives most of it back when open; the body carries no top
   padding of its own, only the space before the next item's border. */
/* style.css tints an open item — .faq-item[open] there is unscoped, so it lands
   on this page too. It works on the front page because that accordion carries
   1.1rem of horizontal padding; here the row has none, so the fill sits flush
   against the question, the answer and the toggle. Text, hairlines and the
   section heading all align on the same left edge, so the row cannot take an
   inset without breaking that alignment — it takes no fill instead. Open state
   is already carried by the filled toggle. */
body.biz .faq-item[open] { background: transparent; }
body.biz .faq-item[open] summary { padding-bottom: 10px; }
body.biz .faq-body { font-size: 16px; line-height: 1.7; color: var(--text-muted); padding: 0 0 32px; max-width: 70ch; }

/* ---------- 15. FINAL CTA ---------- */
body.biz .final { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(48px, 7vw, 96px); align-items: start; }
@media (max-width: 960px) { body.biz .final { grid-template-columns: 1fr; gap: 64px; } }
body.biz .final-headline {
  font-family: var(--font-sans);
  font-weight: var(--display-weight);
  font-size: clamp(2.25rem, 0.79rem + 3.66vw, 5.25rem); /* 36 → 84 */
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  margin: 0 0 28px;
  color: var(--on-ink);
}
body.biz .final-sub { font-size: 1.1875rem; line-height: 1.6; color: var(--on-ink-2); margin: 0 0 56px; max-width: 50ch; }
body.biz .final-emails { display: flex; flex-direction: column; gap: 0; }
body.biz .final-email {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-ink);
  text-decoration: none;
  color: var(--on-ink);
  transition: color 160ms;
}
body.biz .final-email:hover { color: white; }
body.biz .final-email:hover .final-arrow { transform: translateX(4px); }
body.biz .final-email-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink-2); }
body.biz .final-email-addr { font-family: var(--font-mono); font-size: 15px; font-weight: 500; letter-spacing: -0.005em; display: inline-flex; align-items: center; gap: 8px; }
body.biz .final-arrow { transition: transform 200ms; }
body.biz .final-promise {
  margin-top: 40px;
  padding: 20px 24px;
  border-radius: var(--r);
  background: var(--ink-2);
  border: 1px solid var(--line-ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--on-ink-2);
  line-height: 1.6;
}
body.biz .final-promise strong { color: var(--on-ink); font-weight: 500; }

/* New checklist style — replaces the monospace .final-promise box */
body.biz .final-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 44ch;
}
body.biz .final-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--on-ink-2);
}
body.biz .final-checklist li svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--signal);
}

body.biz .final-form {
  background: var(--ink-2);
  border: 1px solid var(--line-ink);
  border-radius: var(--r-lg);
  padding: 40px;
  box-shadow: var(--sh-lg);
}
body.biz .final-form fieldset { border: 0; padding: 0; margin: 0 0 28px; }
body.biz .final-form legend { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-ink-2); margin-bottom: 14px; }
body.biz .final-topics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
body.biz .final-topic {
  padding: 14px 16px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line-ink);
  background: var(--ink);
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  font-size: 14px;
  color: var(--on-ink);
  transition: border-color 160ms, background 160ms;
}
body.biz .final-topic:has(input:checked) { border-color: var(--on-ink); background: var(--ink-2); }
body.biz .final-topic input { display: none; }
body.biz .final-topic svg { color: var(--on-ink-2); flex-shrink: 0; }
body.biz .final-topic:has(input:checked) svg { color: var(--on-ink); }
body.biz .final-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
body.biz .final-field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink-2); }
body.biz .final-field input, body.biz .final-field textarea {
  background: var(--ink);
  border: 1px solid var(--line-ink);
  border-radius: var(--r-btn);
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--on-ink);
  resize: vertical;
  transition: border-color 160ms, background 160ms;
}
body.biz .final-field input:focus, body.biz .final-field textarea:focus {
  outline: none;
  border-color: var(--on-ink);
}
body.biz .final-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px) { body.biz .final-row { grid-template-columns: 1fr; } }
body.biz .final-send {
  width: 100%;
  margin-top: 8px;
  justify-content: center;
  background: var(--on-ink);
  color: var(--ink);
  border-color: var(--on-ink);
}
body.biz .final-send:hover { background: white; border-color: white; }

/* ---------- 16. FOOTER ---------- */
body.biz .site-footer { background: var(--ink-deep); color: var(--on-ink); padding: clamp(64px, 8vw, 112px) 0 36px; margin-top: 0; border-top: 0; }
body.biz .footer-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(32px, 4vw, 72px);
  max-width: 1320px;
  margin: 0 auto;
  padding-inline: clamp(24px, 5vw, 64px);
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line-ink);
}
@media (max-width: 720px) { body.biz .footer-inner { grid-template-columns: 1fr 1fr; } }
body.biz .footer-brand .footer-logo {
  display: inline-flex; align-items: baseline; gap: 10px;
  color: var(--on-ink);
  text-decoration: none;
  margin-bottom: 16px;
}
body.biz .footer-logo-img { height: 22px; width: auto; display: block; }
body.biz .footer-brand .footer-logo .sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink-2); position: relative; top: -1px; }
body.biz .footer-tagline { font-size: 14px; line-height: 1.6; color: var(--on-ink-2); max-width: 32ch; margin: 0; }
body.biz .footer-col h4 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-ink-2); margin: 0 0 18px; }
body.biz .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
body.biz .footer-col a { color: var(--on-ink); font-size: 14px; text-decoration: none; transition: color 160ms; }
body.biz .footer-col a:hover { color: var(--on-ink-2); }
body.biz .footer-bottom {
  max-width: 1320px; margin: 0 auto;
  padding: 32px clamp(24px, 5vw, 64px) 0;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--on-ink-2);
}
body.biz .footer-bottom a { color: var(--on-ink-2); text-decoration: none; }
body.biz .footer-bottom a:hover { color: var(--on-ink); }
body.biz .footer-legal { list-style: none; padding: 0; margin: 0; display: flex; gap: 24px; flex-wrap: wrap; }

/* ---------- 17. REVEAL ---------- */
html.js body.biz .reveal { opacity: 0; transform: translateY(8px); transition: opacity 320ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1); }
html.js body.biz .reveal.is-in { opacity: 1; transform: translateY(0); }
html.js body.biz .reveal[data-delay="1"] { transition-delay: 80ms; }
html.js body.biz .reveal[data-delay="2"] { transition-delay: 160ms; }
html.js body.biz .reveal[data-delay="3"] { transition-delay: 240ms; }
html.js body.biz .reveal[data-delay="4"] { transition-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
  html.js body.biz .reveal { opacity: 1; transform: none; transition: none; }
  body.biz .btn, body.biz .nav { transition: none; }
}

/* ---------- 18. UTILITIES ---------- */
body.biz .dot-accent { color: var(--signal); }
body.biz .skip-link {
  position: absolute !important;
  top: -100px !important;
  left: 16px;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--r-btn);
  font-size: 14px;
  z-index: 100;
  text-decoration: none;
  transition: top 160ms;
  pointer-events: none;
}
body.biz .skip-link:focus { top: 8px !important; pointer-events: auto; }
body.biz ::selection { background: var(--ink); color: var(--on-ink); }

/* Fordeler-liste (bedrift "Derfor velger") — dark text on light section */
.why-list{list-style:none;margin:1.5rem auto 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1rem 2.2rem;max-width:780px;}
.why-list li{display:flex;align-items:flex-start;gap:.7rem;color:#1c1c23;font-size:1.02rem;line-height:1.5;}
.why-list li svg{flex:0 0 auto;width:22px;height:22px;margin-top:1px;color:#3b82f6;}
@media (max-width:640px){.why-list{grid-template-columns:1fr;gap:.9rem;}}

/* Bedrift contact-form submit status (final section is dark) */
.final-status{margin:.9rem 0 0;font-size:.95rem;line-height:1.45;display:none;}
.final-status.is-shown{display:block;}
.final-status.is-ok{color:#6ee7b7;}
.final-status.is-err{color:#fca5a5;}

/* ---------- 18. TAP TARGETS ---------- */
/* Nothing moves and nothing repaints: each link keeps its painted size and
   gets a transparent overlay for the touch box. Every overlay is sized to
   half the gap it sits in, so a link can never swallow a tap meant for its
   neighbour. Padding was rejected: on these inline links it also pulls in the
   line box, which would have loosened the footer columns by 6px per row. */

/* footer columns: 16px -> 28px (12px gap, 6px each side) */
body.biz .footer-col a { position: relative; }
body.biz .footer-col a::before { content: ""; position: absolute; top: -6px; bottom: -6px; left: 0; right: 0; }

/* bottom row, legal + company: 13px -> 25px (16px row gap) */
body.biz .footer-bottom a { position: relative; }
body.biz .footer-bottom a::before { content: ""; position: absolute; top: -6px; bottom: -6px; left: 0; right: 0; }

/* section links "Se hvordan ...": 26px -> 44px, underline stays put */
body.biz .pm-link { position: relative; }
body.biz .pm-link::before { content: ""; position: absolute; top: -9px; bottom: -9px; left: 0; right: 0; }

/* logo links: 20px / 26px -> 44px */
body.biz .nav-brand, body.biz .footer-brand .footer-logo { position: relative; }
body.biz .nav-brand::before { content: ""; position: absolute; top: -12px; bottom: -12px; left: 0; right: 0; }
body.biz .footer-brand .footer-logo::before { content: ""; position: absolute; top: -9px; bottom: -9px; left: 0; right: 0; }