/* =========================================================
   Nemchatbot v2 — editorial design (cream + olive accent)
   Port of designer's Nemchatbot.html into standalone css
   ========================================================= */

:root{
  --bg: #f6f3ec;
  --bg-2: #efeadf;
  --bg-3: #e6dfd0;
  --bg-elevated: #fdfbf6;
  --fg: #15140f;
  --fg-dim: #6b665c;
  --fg-dimmer: #a39e92;
  --line: rgba(21,20,15,0.10);
  --line-strong: rgba(21,20,15,0.22);
  --accent: #2d6a4f;
  --accent-warm: #52a071;
  --highlight: #74c69d;
  --accent-ink: #fffaf4;
  --warn: #c65a3a;
  --serif: "Instrument Serif", "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 22px;
  --ease: cubic-bezier(.2,.7,.2,1);

  /* Spacing — 4px-baseret skala */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 80px;
  --space-10: 120px;
  --space-11: 160px;

  /* Semantic spacing — sektion- og kort-rytme */
  --section-y: clamp(80px, 10vw, 120px);
  --section-y-tight: clamp(56px, 8vw, 80px);
  --card-pad: clamp(24px, 3vw, 36px);
  --card-pad-tight: clamp(16px, 2vw, 22px);

  /* Shadow-skala — én farvelogik (grøn-tonet, matcher --accent) */
  --shadow-sm: 0 4px 12px -4px rgba(45, 106, 79, 0.08);
  --shadow-md: 0 12px 32px -12px rgba(45, 106, 79, 0.14);
  --shadow-lg: 0 24px 60px -20px rgba(45, 106, 79, 0.20);
  --shadow-xl: 0 40px 80px -32px rgba(45, 106, 79, 0.28);
}
[data-theme="cream"]{
  --bg:#f6f3ec; --bg-2:#efeadf; --bg-3:#e6dfd0; --bg-elevated:#fdfbf6;
  --fg:#15140f; --fg-dim:#6b665c; --fg-dimmer:#a39e92;
  --line:rgba(21,20,15,0.10); --line-strong:rgba(21,20,15,0.22);
  --accent:#2d6a4f; --accent-warm:#52a071; --highlight:#74c69d; --accent-ink:#fffaf4;
}
[data-theme="sage"]{
  --bg:#edefe7; --bg-2:#e4e7da; --bg-3:#d7dcc9; --bg-elevated:#f6f8f1;
  --fg:#1a1e16; --fg-dim:#5d6354; --fg-dimmer:#96998c;
  --line:rgba(26,30,22,0.10); --line-strong:rgba(26,30,22,0.24);
  --accent:#2f6a3a; --accent-ink:#f3f5ec;
}
[data-theme="sand"]{
  --bg:#f1ebdd; --bg-2:#e8e0ce; --bg-3:#ddd2b9; --bg-elevated:#fbf6e9;
  --fg:#1f1a10; --fg-dim:#6e6552; --fg-dimmer:#a8a08a;
  --line:rgba(31,26,16,0.10); --line-strong:rgba(31,26,16,0.22);
  --accent:#c85a2b; --accent-ink:#fdf8ea;
}
[data-theme="dark"]{
  --bg:#0a0a0a; --bg-2:#111111; --bg-3:#181816; --bg-elevated:#1d1d1c;
  --fg:#f4f1ea; --fg-dim:#9a968e; --fg-dimmer:#5d5a53;
  --line:rgba(244,241,234,0.12); --line-strong:rgba(244,241,234,0.22);
  --accent:#74c69d; --accent-ink:#0a0a0a;
}
[data-theme="brand"]{
  --bg:#2d6a4f; --bg-2:#266048; --bg-3:#1e4d38; --bg-elevated:#357057;
  --fg:#f4f1ea; --fg-dim:rgba(244,241,234,0.72); --fg-dimmer:rgba(244,241,234,0.5);
  --line:rgba(244,241,234,0.18); --line-strong:rgba(244,241,234,0.32);
  --accent:#74c69d; --accent-ink:#1e4d38;
}
[data-theme="forest-deep"]{
  --bg:#1e4d38; --bg-2:#173f2d; --bg-3:#103024; --bg-elevated:#265842;
  --fg:#f4f1ea; --fg-dim:rgba(244,241,234,0.72); --fg-dimmer:rgba(244,241,234,0.5);
  --line:rgba(244,241,234,0.18); --line-strong:rgba(244,241,234,0.32);
  --accent:#74c69d; --accent-ink:#103024;
}
[data-theme="olive"]{
  --bg:#4a5b3a; --bg-2:#3f4f31; --bg-3:#344228; --bg-elevated:#566739;
  --fg:#f4f1ea; --fg-dim:rgba(244,241,234,0.72); --fg-dimmer:rgba(244,241,234,0.5);
  --line:rgba(244,241,234,0.18); --line-strong:rgba(244,241,234,0.32);
  --accent:#c4d68f; --accent-ink:#2a341f;
}
[data-theme="sage-saturated"]{
  --bg:#a8b89a; --bg-2:#9aab8c; --bg-3:#8a9c7c; --bg-elevated:#b6c3a8;
  --fg:#1f2a18; --fg-dim:rgba(31,42,24,0.72); --fg-dimmer:rgba(31,42,24,0.5);
  --line:rgba(31,42,24,0.16); --line-strong:rgba(31,42,24,0.28);
  --accent:#1e4d38; --accent-ink:#f4f1ea;
}
[data-theme="terracotta"]{
  --bg:#b87a5a; --bg-2:#a86d4f; --bg-3:#945e44; --bg-elevated:#c4866a;
  --fg:#fdf6ee; --fg-dim:rgba(253,246,238,0.78); --fg-dimmer:rgba(253,246,238,0.55);
  --line:rgba(253,246,238,0.18); --line-strong:rgba(253,246,238,0.32);
  --accent:#fdd6a8; --accent-ink:#5a3422;
}
[data-theme="cream-yellow"]{
  --bg:#f0e8c8; --bg-2:#e6dcb8; --bg-3:#d8cca0; --bg-elevated:#f6efd4;
  --fg:#3a2e10; --fg-dim:rgba(58,46,16,0.7); --fg-dimmer:rgba(58,46,16,0.45);
  --line:rgba(58,46,16,0.14); --line-strong:rgba(58,46,16,0.28);
  --accent:#7d6a1f; --accent-ink:#f0e8c8;
}
[data-theme="navy"]{
  --bg:#1f2d3d; --bg-2:#192634; --bg-3:#131e2a; --bg-elevated:#283546;
  --fg:#e8edf2; --fg-dim:rgba(232,237,242,0.7); --fg-dimmer:rgba(232,237,242,0.5);
  --line:rgba(232,237,242,0.16); --line-strong:rgba(232,237,242,0.3);
  --accent:#7ab3d8; --accent-ink:#0f1822;
}
[data-theme="burgundy"]{
  --bg:#4d2a30; --bg-2:#412328; --bg-3:#341c20; --bg-elevated:#583239;
  --fg:#f4ebe8; --fg-dim:rgba(244,235,232,0.72); --fg-dimmer:rgba(244,235,232,0.5);
  --line:rgba(244,235,232,0.16); --line-strong:rgba(244,235,232,0.3);
  --accent:#e0a48d; --accent-ink:#341c20;
}
[data-theme="teal-dark"]{
  --bg:#1f3d3d; --bg-2:#193535; --bg-3:#132929; --bg-elevated:#284848;
  --fg:#e8f0ee; --fg-dim:rgba(232,240,238,0.72); --fg-dimmer:rgba(232,240,238,0.5);
  --line:rgba(232,240,238,0.16); --line-strong:rgba(232,240,238,0.3);
  --accent:#7accc4; --accent-ink:#0f2424;
}
[data-theme="warm-cream"]{
  --bg:#ede0c8; --bg-2:#e3d4b8; --bg-3:#d4c2a0; --bg-elevated:#f3e8d2;
  --fg:#3a2818; --fg-dim:rgba(58,40,24,0.72); --fg-dimmer:rgba(58,40,24,0.5);
  --line:rgba(58,40,24,0.14); --line-strong:rgba(58,40,24,0.28);
  --accent:#8a4a26; --accent-ink:#fdf6ee;
}
[data-font="editorial"]{ --serif:"Instrument Serif", Georgia, serif; --sans:"Inter", sans-serif; }
[data-font="fraunces"]{ --serif:"Fraunces", Georgia, serif; --sans:"Inter", sans-serif; }
[data-font="mono"]{ --serif:"IBM Plex Mono", monospace; --sans:"IBM Plex Mono", monospace; }

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html{scroll-behavior:auto;scroll-padding-top:80px;scroll-snap-type:y proximity}
header.hero,
.primer,
.diff,
.demo-video,
.kpis,
.roi,
.pricing,
.faq,
.contact,
.about{scroll-snap-align:start;scroll-snap-stop:normal}
body{overflow-x:hidden;cursor:none}
@media (pointer: coarse){ body{cursor:auto} }
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:none}
img{display:block;max-width:100%}
::selection{background:var(--accent);color:var(--accent-ink)}

/* ---------- cursor ---------- */
.cur-dot, .cur-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;transform:translate(-50%,-50%);mix-blend-mode:difference}
.cur-dot{width:6px;height:6px;background:#fff;transition:width .25s var(--ease),height .25s var(--ease),background .25s var(--ease)}
.cur-ring{width:34px;height:34px;border:1px solid #fff;transition:width .25s var(--ease),height .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}
body.cur-hover .cur-ring{width:64px;height:64px;background:rgba(255,255,255,.1)}
body.cur-press .cur-ring{width:24px;height:24px}
body.cur-text .cur-dot{width:2px;height:22px;border-radius:1px}
body.cur-text .cur-ring{opacity:0}
body.cur-chat .cur-ring{width:110px;height:70px;border-radius:20px 20px 20px 4px}
body.cur-chat .cur-dot{width:0;height:0}
[data-cursor="arrow"] .cur-dot,[data-cursor="arrow"] .cur-ring{display:none}
[data-cursor="arrow"] body,[data-cursor="arrow"]{cursor:auto}
[data-cursor="crosshair"] .cur-dot{width:14px;height:14px;background:transparent;border-top:1px solid #fff;border-bottom:1px solid #fff}
[data-cursor="crosshair"] .cur-ring{width:14px;height:14px;border:none;border-left:1px solid #fff;border-right:1px solid #fff;border-radius:0}
[data-cursor="blob"] .cur-dot{display:none}
[data-cursor="blob"] .cur-ring{width:48px;height:48px;background:var(--accent);border:none;mix-blend-mode:multiply;opacity:.6;filter:blur(.5px)}
@media (pointer: coarse){ .cur-dot,.cur-ring{display:none !important} }

/* ---------- layout ---------- */
.wrap{max-width:1440px;margin:0 auto;padding:0 88px}
@media (max-width:1200px){ .wrap{padding:0 56px} }
@media (max-width:900px){ .wrap{padding:0 32px} }
@media (max-width:720px){ .wrap{padding:0 20px} }

/* ---------- tweak panel (FAQ color picker, dev tool) ---------- */
.tweak-panel{
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:80;
  background:rgba(15,20,15,0.92);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  border:1px solid rgba(244,241,234,0.12);
  border-radius:14px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  box-shadow:0 16px 40px -12px rgba(0,0,0,0.5);
  pointer-events:auto;
  cursor:none;
  max-width:280px;
}
.tweak-panel-head{
  font-family:"JetBrains Mono", monospace;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(244,241,234,0.7);
  padding:0 4px;
}
.tweak-panel-grid{
  display:grid;
  grid-template-columns:repeat(6, 26px);
  gap:6px;
}
.tweak-swatch{
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--sw);
  border:2px solid rgba(244,241,234,0.18);
  cursor:none;
  transition:transform .2s var(--ease), border-color .2s var(--ease);
  padding:0;
  font:inherit;
}
.tweak-swatch:hover{transform:scale(1.15);border-color:rgba(244,241,234,0.5)}
.tweak-swatch.active{
  border-color:#fff;
  transform:scale(1.1);
  box-shadow:0 0 0 2px rgba(0,0,0,0.4);
}
@media (max-width:720px){ .tweak-panel{display:none} }

/* ---------- scroll dots (right side section nav) ---------- */
.scroll-dots{
  position:fixed;
  right:24px;
  top:50%;
  transform:translateY(-50%);
  z-index:70;
  display:flex;
  flex-direction:column;
  gap:14px;
  pointer-events:auto;
}
.scroll-dot{
  display:block;
  width:10px;
  height:10px;
  border-radius:50%;
  border:1.5px solid rgba(15,20,15,0.35);
  background:transparent;
  cursor:none;
  transition:transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
  position:relative;
}
.scroll-dot:hover{transform:scale(1.4);border-color:var(--accent)}
.scroll-dot.active{
  background:var(--accent);
  border-color:var(--accent);
  transform:scale(1.5);
}
.scroll-dot span{
  position:absolute;
  right:calc(100% + 14px);
  top:50%;
  transform:translateY(-50%) translateX(8px);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#15140f;
  background:#fdfbf6;
  border:1px solid rgba(15,20,15,0.12);
  padding:6px 10px;
  border-radius:999px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
  box-shadow:0 4px 12px -4px rgba(0,0,0,.18);
}
.scroll-dot:hover span,
.scroll-dot.active span{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}
/* dark/brand mode — flip dot color so it's visible on dark bg */
.scroll-dots.on-dark .scroll-dot{
  border-color:rgba(244,241,234,0.45);
}
.scroll-dots.on-dark .scroll-dot:hover{border-color:#74c69d}
.scroll-dots.on-dark .scroll-dot.active{
  background:#74c69d;
  border-color:#74c69d;
}
@media (max-width:900px){ .scroll-dots{display:none} }

/* ---------- top bar ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;background:transparent;transition:border-color .3s var(--ease)}
.nav.scrolled{border-color:var(--line)}
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:92px}
.nav-inner > .nav-cta{justify-self:end}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:26px;letter-spacing:-.01em}
.logo-mark{width:28px;height:28px;border-radius:7px;background:var(--accent);display:inline-block;position:relative;overflow:hidden}
.logo-mark::after{content:"";position:absolute;inset:7px 5px 5px 5px;background:var(--accent-ink);border-radius:3px 3px 3px 1px}
.nav-links{display:flex;gap:44px;font-size:16px;color:var(--fg);justify-content:center}
.nav-links a:hover,.nav-links a.nav-current{color:var(--fg)}
.nav-cta{display:flex;gap:10px;align-items:center}
.nav-toggle{display:none}
.nav-backdrop{display:none}
@media (max-width:900px){
  /* hamburger (porteret fra live) */
  .nav-toggle{
    display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:2.4rem;height:2.4rem;padding:0;
    background:transparent;border:0;cursor:pointer;flex-shrink:0
  }
  .nav-toggle-bar{display:block;width:100%;height:2px;background:var(--fg);border-radius:2px;transition:transform .3s ease, opacity .3s ease}
  .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)}

  /* bottom-sheet drawer (porteret fra live) */
  .nav-links{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:500;
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    padding:.5rem 1.5rem calc(env(safe-area-inset-bottom,0) + 1.5rem);
    background:color-mix(in oklab, var(--bg) 97%, transparent);
    -webkit-backdrop-filter:blur(32px);backdrop-filter:blur(32px);
    border-top:1px solid var(--line);
    border-radius:var(--radius-l) var(--radius-l) 0 0;
    box-shadow:0 -8px 40px rgba(21,20,15,.1);
    transform:translateY(100%);visibility:hidden;
    transition:transform .35s cubic-bezier(.22,1,.36,1), visibility .35s ease
  }
  .nav-links::before{
    content:"";width:2.5rem;height:4px;
    background:var(--line);border-radius:2px;
    margin:.5rem auto 1rem;flex-shrink:0
  }
  .nav-links.open{transform:translateY(0);visibility:visible}
  .nav-links a{
    padding:1rem .5rem;
    font-size:1.2rem;font-weight:500;
    color:var(--fg);text-align:center;
    border-radius:var(--radius-m);
    transition:background 150ms ease
  }
  .nav-links a:hover,.nav-links a:active{background:rgba(45,106,79,.06)}

  /* backdrop (porteret fra live) */
  .nav-backdrop{
    display:block;position:fixed;inset:0;z-index:499;
    background:rgba(21,20,15,.3);
    opacity:0;visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease
  }
  .nav-backdrop.open{opacity:1;visibility:visible}

  body.nav-open{overflow:hidden}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;font-size:14px;font-weight:500;letter-spacing:.01em;border:1px solid var(--line-strong);transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);will-change:transform;position:relative;overflow:hidden}
.btn.primary{
  color:var(--accent-ink);
  background:linear-gradient(135deg, var(--accent), var(--accent-warm), var(--highlight), var(--accent));
  background-size:300% 300%;
  border-color:transparent;
  box-shadow:0 20px 38px rgba(45,106,79,.26);
  animation:gradient-shift 7s ease infinite, cta-pulse 2.8s ease-in-out infinite;
  font-weight:600;
}
.btn.primary::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease);
}
.btn.primary > *{position:relative;z-index:2}
.btn.primary:hover{animation-play-state:paused;transform:translateY(-1px)}
.btn.primary:hover::before{transform:translateX(120%)}
.btn.ghost:hover{background:var(--bg-3)}
.btn.sm{padding:9px 16px;font-size:13px}
.btn.sm.primary{box-shadow:0 12px 24px rgba(45,106,79,.22)}
/* nav CTA: mørk pill, ingen gradient/animation */
.nav-cta .btn.ghost{display:none}
.nav-cta .btn.primary{
  background:var(--fg);
  color:var(--bg);
  border-color:var(--fg);
  box-shadow:0 10px 24px rgba(21,20,15,.18);
  animation:none;
  padding:14px 24px;
  font-size:14px;
}
.nav-cta .btn.primary::before{display:none}
.nav-cta .btn.primary:hover{background:#000;border-color:#000;transform:translateY(-1px)}

/* Nav-inversion når over mørk sektion */
.nav .logo,.nav .logo-mark,.nav .logo-mark::after,.nav-links a,.nav-toggle-bar,.nav-cta .btn.primary{transition:color .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease)}
.nav.over-dark .logo{color:#fff}
.nav.over-dark .logo-mark{background:#fff}
.nav.over-dark .logo-mark::after{background:#0a0a0a}
.nav.over-dark .nav-links a{color:rgba(255,255,255,.78)}
.nav.over-dark .nav-links a:hover,.nav.over-dark .nav-links a.nav-current{color:#fff}
.nav.over-dark .nav-toggle-bar{background:#fff}
.nav.over-dark .nav-cta .btn.primary{background:#fff;color:#0a0a0a;border-color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.nav.over-dark .nav-cta .btn.primary:hover{background:#f4f1ea;border-color:#f4f1ea}
.btn .arrow{display:inline-block;transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn:active{transform:scale(0.97)}

@keyframes gradient-shift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes cta-pulse{
  0%,100%{box-shadow:0 20px 38px rgba(45,106,79,.26)}
  50%{box-shadow:0 8px 36px rgba(45,106,79,.38), 0 0 0 6px rgba(45,106,79,.08)}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .btn.primary::before{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative;padding:140px 0 var(--space-9);min-height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hero-grid{position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 80%);
  opacity:.55;
}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;color:var(--fg-dim);letter-spacing:.08em;text-transform:uppercase;margin-bottom:28px}
.hero-eyebrow .pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent)}70%{box-shadow:0 0 0 12px transparent}100%{box-shadow:0 0 0 0 transparent}}

.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(44px, 7.4vw, 120px);line-height:1.08;letter-spacing:-.025em;max-width:14ch}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero h1 .word{display:inline-block;overflow:hidden;padding:.22em 0 .05em;margin:-.18em 0 -.05em;vertical-align:top}
.hero h1 .word > span{display:inline-block;transform:translateY(104%);transition:transform .9s var(--ease)}
.hero.revealed h1 .word > span{transform:translateY(0)}
.no-anim .hero h1 .word > span{transform:translateY(0) !important}
.hero h1 .word:nth-child(2) > span{transition-delay:.08s}
.hero h1 .word:nth-child(3) > span{transition-delay:.16s}
.hero h1 .word:nth-child(4) > span{transition-delay:.24s}
.hero h1 .word:nth-child(5) > span{transition-delay:.32s}
.hero h1 .word:nth-child(6) > span{transition-delay:.4s}
.hero h1 .word:nth-child(7) > span{transition-delay:.48s}

.hero-sub{margin-top:36px;font-size:18px;line-height:1.55;max-width:52ch;color:var(--fg-dim)}
.hero-cta{display:flex;gap:14px;margin-top:40px;flex-wrap:wrap}

.hero-main{display:grid;grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);gap:60px;align-items:center;position:relative;z-index:2}
@media (max-width:980px){ .hero-main{grid-template-columns:minmax(0,1fr)} }

/* chat panel */
.chat{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-l);padding:var(--card-pad-tight);position:relative;box-shadow:var(--shadow-lg), 0 0 0 1px var(--line) inset;height:560px;max-height:560px;display:flex;flex-direction:column}
@media (max-width:980px){ .chat{height:480px;max-height:480px} }
.chat::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 30%, transparent), transparent 50%);-webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.8}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px}
.chat-id{display:flex;align-items:center;gap:12px}
.chat-avatar{width:36px;height:36px;border-radius:10px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--serif);font-size:22px}
.chat-name{font-size:14px;font-weight:600}
.chat-status{font-family:var(--mono);font-size:11px;color:var(--fg-dim);display:flex;align-items:center;gap:6px}
.chat-status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2.2s infinite}
.chat-dots{display:flex;gap:6px}
.chat-dots span{width:8px;height:8px;border-radius:50%;background:var(--line-strong)}

.chat-stream{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;overflow:hidden;padding-right:4px;min-height:0}
.msg{max-width:85%;padding:12px 16px;border-radius:18px;font-size:14.5px;line-height:1.5;opacity:0;transform:translateY(10px);filter:blur(3px);transition:opacity .35s var(--ease), transform .35s var(--ease), filter .35s var(--ease)}
.msg.show{opacity:1;transform:translateY(0);filter:blur(0)}
.msg.user{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:6px}
.msg.bot{align-self:flex-start;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-bottom-left-radius:6px}
.msg.bot.typing{display:inline-flex;gap:4px;align-items:center;min-height:36px}
.msg.bot.typing span{width:6px;height:6px;border-radius:50%;background:var(--fg-dim);animation:blink 1.2s infinite}
.msg.bot.typing span:nth-child(2){animation-delay:.2s}
.msg.bot.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

.chat-input{margin-top:16px;display:flex;gap:10px;align-items:center;border:1px solid var(--line);background:var(--bg-3);border-radius:14px;padding:10px 10px 10px 16px}
.chat-input input{flex:1;background:none;border:none;color:var(--fg);font:inherit;font-size:16px;outline:none;cursor:none}
.chat-input input::placeholder{color:var(--fg-dimmer)}
.chat-send{width:36px;height:36px;border-radius:10px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center}
.chat-tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.chat-tab{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:6px 10px;border-radius:999px;border:1px solid var(--line);color:var(--fg-dim)}
.chat-tab.active{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* hero mini stats */
.hero-stats-wrap{margin-top:80px;position:relative;z-index:2}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-top:32px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--fg-dim);letter-spacing:.06em;text-transform:uppercase}
.hero-stats div b{display:block;font-family:var(--serif);font-size:clamp(36px,5vw,52px);color:var(--fg);font-weight:400;margin-top:8px;letter-spacing:-.02em}
@media (max-width:720px){
  .hero-stats-wrap{margin-top:48px}
  .hero-stats{grid-template-columns:1fr;gap:20px;padding-top:24px}
  .hero-stats div b{font-size:32px;margin-top:4px}
}

/* ---------- section chrome ---------- */
section{position:relative}
.section-head{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;padding:var(--section-y) 0 var(--space-8);border-top:1px solid var(--line)}
@media (max-width:900px){ .section-head{grid-template-columns:1fr} }
.eyebrow{font-family:var(--mono);font-size:12px;color:var(--fg-dim);letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--accent)}
.section-title{font-family:var(--serif);font-weight:400;font-size:clamp(40px, 5.2vw, 72px);line-height:1;letter-spacing:-.02em;max-width:18ch}
.section-title em{color:var(--accent);font-style:italic}

/* proces section — handwritten marginalia ved h2 */
.proc-handwritten{
  grid-column:2;
  display:flex;
  align-items:flex-end;
  gap:6px;
  margin-top:8px;
  padding-left:30%;
  pointer-events:none;
}
.proc-handwritten-note{
  font-family:"Caveat", "Patrick Hand", cursive;
  font-weight:500;
  font-size:clamp(26px, 2.4vw, 36px);
  color:var(--accent);
  transform:rotate(-3deg);
  transform-origin:left center;
  white-space:nowrap;
  line-height:1.05;
  display:inline-block;
}
.proc-handwritten-note em{font-style:italic;color:color-mix(in oklab, var(--accent) 70%, var(--fg) 30%)}
.proc-handwritten-arrow{
  width:54px;
  height:42px;
  color:color-mix(in oklab, var(--accent) 85%, var(--fg) 15%);
  flex-shrink:0;
  margin-bottom:4px;
  overflow:visible;
}
.proc-handwritten-line{
  stroke-dasharray:140;
  stroke-dashoffset:140;
}
.proc-handwritten-head{
  stroke-dasharray:40;
  stroke-dashoffset:40;
}
.proc-handwritten.in .proc-handwritten-line{
  animation:doodle-draw 1.1s var(--ease) .3s forwards;
}
.proc-handwritten.in .proc-handwritten-head{
  animation:doodle-draw .4s var(--ease) 1.4s forwards;
}
@media (max-width:900px){
  .proc-handwritten{grid-column:1;padding-left:0;justify-content:flex-end}
  .proc-handwritten-note{font-size:24px}
}

/* ---------- ticker ---------- */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;overflow:hidden;background:var(--bg)}
.ticker-track{display:flex;gap:60px;animation:slide 48s linear infinite;white-space:nowrap;font-family:var(--serif);font-size:28px;color:var(--fg-dim)}
.ticker-track span em{color:var(--accent);font-style:italic}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}

/* ---------- proces (Karla-style accordion med auto-cycle) ---------- */
#how{padding-block:40px 140px;overflow:hidden}
.proc-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:18px;
  margin-top:64px;
  padding:24px 28px;
  transition:grid-template-columns .8s var(--ease);
}
.proc-grid::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:36px;
  z-index:0;
  pointer-events:none;
}
.proc-card{z-index:1}
.proc-grid[data-active="1"]{grid-template-columns:1.6fr 1fr 1fr}
.proc-grid[data-active="2"]{grid-template-columns:1fr 1.6fr 1fr}
.proc-grid[data-active="3"]{grid-template-columns:1fr 1fr 1.6fr}

.proc-card{
  background:var(--bg-elevated);
  border:1px solid var(--line);
  border-radius:28px;
  padding:var(--card-pad);
  min-height:380px;
  display:flex;flex-direction:column;
  position:relative;
  overflow:hidden;
  min-width:0;
  box-shadow:var(--shadow-sm);
  transition:background .5s var(--ease), border-color .3s var(--ease), box-shadow .5s var(--ease);
}
/* Active card: samme lyse baggrund, men stærkere løft (matcher Karla) */
.proc-grid[data-active="1"] .proc-card[data-step="1"],
.proc-grid[data-active="2"] .proc-card[data-step="2"],
.proc-grid[data-active="3"] .proc-card[data-step="3"]{
  background:var(--bg-elevated);
  border-color:var(--line-strong);
  box-shadow:var(--shadow-lg);
}
.proc-num{font-family:var(--mono);font-size:13px;color:var(--fg-dim);letter-spacing:.06em;position:relative;z-index:3}
.proc-body{margin-top:auto;position:relative;z-index:3;max-width:26ch}
.proc-title{font-family:var(--serif);font-size:clamp(34px,3.4vw,48px);line-height:1.0;letter-spacing:-.02em;font-weight:400;margin-bottom:14px;transition:font-size .5s var(--ease)}
.proc-desc{color:var(--fg-dim);font-size:15px;line-height:1.55}

/* Mockup-float — flush mod kortets top/højre/bund-kant */
.proc-float{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:46%;
  z-index:2;
  pointer-events:none;
  opacity:0;
  transform:translateY(10px) scale(.97);
  filter:blur(3px);
  transition:opacity .5s var(--ease), transform .6s var(--ease), filter .5s var(--ease);
}
.proc-grid[data-active="1"] .proc-card[data-step="1"] .proc-float,
.proc-grid[data-active="2"] .proc-card[data-step="2"] .proc-float,
.proc-grid[data-active="3"] .proc-card[data-step="3"] .proc-float{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
  transition-delay:.2s;
}
/* Card 03: same contained positioning as the others */

/* Phone-shell-agtig wrapper bag mockup-cards (matcher Karla) */
.mock-shell{
  position:relative;
  height:100%;
  padding:14px 0 14px 14px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.25) 100%);
  box-shadow:
    var(--shadow-lg),
    inset 0 0 0 1px rgba(20,30,20,.05);
  display:flex;flex-direction:column;gap:10px;
  overflow:hidden;
}
.mock-card{
  background:#fff;
  border-radius:18px;
  padding:18px 16px;
  display:flex;flex-direction:column;gap:8px;
  flex:1;
  box-shadow:
    var(--shadow-sm),
    0 0 0 1px rgba(20,30,20,.04);
  font-family:var(--sans);
}
.mock-label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  color:var(--fg-dim);
  text-transform:uppercase;
  padding:2px 4px 4px;
}
.mock-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;
  border-radius:14px;
  border:1.5px solid transparent;
  background:#fff;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.mock-row--active{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(45,106,79,.08);
}
.mock-icon{
  width:32px;height:32px;border-radius:10px;
  background:rgba(20,30,20,.05);
  color:var(--fg-dim);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.mock-icon svg{width:18px;height:18px}
.mock-row--active .mock-icon{
  background:rgba(45,106,79,.12);
  color:var(--accent);
}
.mock-row-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.mock-row-text strong{
  font-size:13px;font-weight:600;color:var(--fg);
  letter-spacing:-.005em;
}
.mock-row-text em{
  font-size:11px;color:var(--fg-dim);font-style:normal;
  font-family:var(--mono);
}

/* Card 02: to stablede paneler — regel-bobble + spam-kategorier */
.mock-card--rules{padding:14px 14px 16px;gap:8px}
.mock-rule-bubble{
  background:rgba(20,30,20,.04);
  border-radius:14px;
  padding:12px 14px;
  font-size:12.5px;line-height:1.45;color:var(--fg);
  letter-spacing:-.005em;
}
.mock-card--filters{padding:14px 14px 16px;gap:8px}
.mock-pills{
  display:flex;gap:6px;flex-wrap:wrap;padding:0 2px;
}
.mock-pill{
  font-size:11px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--fg-dim);
  background:#fff;
  font-family:var(--mono);
  letter-spacing:.02em;
}
.mock-pill--on{
  border-color:rgba(45,106,79,.35);
  color:var(--accent);
  background:rgba(116,198,157,.18);
}

/* Card 03: succes-notifikation */
.mock-card--success{padding:20px 18px;gap:12px;flex-direction:row;align-items:flex-start}
.mock-success-icon{
  width:42px;height:42px;border-radius:50%;
  background:rgba(116,198,157,.30);
  color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.mock-success-icon svg{width:20px;height:20px}
.mock-success-text{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.mock-success-text strong{
  font-size:14px;font-weight:600;color:var(--fg);
  letter-spacing:-.01em;
}
.mock-success-text em{
  font-size:11px;color:var(--fg-dim);font-style:normal;
  font-family:var(--mono);
}

@media (max-width:1080px){
  .proc-grid{gap:14px;padding:18px 20px}
  .proc-grid::before{inset:0;border-radius:28px}
  .proc-card{padding:var(--card-pad);min-height:460px;border-radius:22px}
  .proc-title{font-size:clamp(28px,3.4vw,40px)}
  .proc-float{top:28px;right:-32%;width:64%}
  .proc-card[data-step="3"] .proc-float{right:-40%;width:66%}
  .mock-card{padding:18px 14px;gap:8px}
  .mock-row{padding:10px 12px}
}
@media (max-width:760px){
  #how{padding-block:30px 80px;overflow:visible}
  .proc-grid{grid-template-columns:1fr;gap:12px;margin-top:36px;padding:0;transition:none}
  .proc-grid::before{display:none}
  .proc-grid[data-active="1"],.proc-grid[data-active="2"],.proc-grid[data-active="3"]{grid-template-columns:1fr}
  .proc-card{min-height:0;padding:var(--card-pad);border-radius:22px;flex-direction:column;gap:32px;justify-content:flex-start;overflow:visible;background:var(--bg-elevated)!important;border-color:var(--line)!important;box-shadow:var(--shadow-sm)!important}
  .proc-card .proc-body{margin-top:0;max-width:none}
  .proc-title{font-size:clamp(28px,8vw,38px)}
  .proc-desc{max-width:none;font-size:17px;line-height:1.55}
  .proc-float{display:none}
}

/* ---------- KPI counter section ---------- */
.kpis{padding:var(--section-y) 0 var(--section-y);border-top:1px solid var(--line);min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:60px}
@media (max-width:900px){ .kpi-grid{grid-template-columns:repeat(2,1fr)} }
.kpi{border-top:1px solid var(--line);padding-top:24px}
.kpi b{font-family:var(--serif);font-size:clamp(56px,7vw,104px);line-height:.9;display:block;letter-spacing:-.03em;font-weight:400;color:var(--fg)}
.kpi b .unit{font-size:.5em;color:var(--fg-dim);margin-left:.05em;letter-spacing:0;font-family:inherit;font-weight:inherit;display:inline;vertical-align:baseline}
.kpi b .num{display:inline;font-size:inherit;font-family:inherit;color:var(--fg);vertical-align:baseline}
.kpi > span{display:block;margin-top:16px;color:var(--fg-dim);font-size:14px;line-height:1.5;max-width:28ch}

/* ---------- ROI calculator ---------- */
.roi{padding:var(--section-y-tight) 0 var(--section-y);border-top:1px solid var(--line);min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.roi-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:60px;align-items:start}
@media (max-width:900px){ .roi-grid{grid-template-columns:1fr} }
.roi-inputs{display:flex;flex-direction:column;gap:32px;position:relative;isolation:isolate}

/* marginalia: handwritten "prøv at flytte på dem" + curved arrow pointing at first slider */
.roi-doodle{
  position:absolute;
  top:-80px;left:-30px;
  width:220px;height:230px;
  pointer-events:none;
  z-index:0;
}
.roi-doodle-note{
  position:absolute;top:0;left:0;
  font-family:"Caveat", "Patrick Hand", cursive;
  font-weight:500;
  font-size:30px;line-height:1.05;
  color:var(--accent);
  transform-origin:top left;
  white-space:nowrap;
  opacity:0;
  filter:blur(2px);
  transform:rotate(-4deg) translateY(8px);
  transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
.roi-doodle-note em{font-style:italic;color:color-mix(in oklab, var(--accent) 70%, var(--fg) 30%)}
.roi-inputs.in .roi-doodle-note{
  opacity:1;
  transform:rotate(-4deg) translateY(0);
  filter:blur(0);
  transition-delay:.2s;
}

.roi-doodle-arrow{
  position:absolute;
  top:36px;left:50px;
  width:140px;height:180px;
  color:color-mix(in oklab, var(--accent) 80%, var(--fg) 20%);
  opacity:.7;
  pointer-events:none;
  overflow:visible;
  z-index:0;
  filter:drop-shadow(0 1px 0 rgba(45,106,79,.06));
}
.roi-doodle-note{z-index:2}
.roi-doodle-arrow-line{stroke-dasharray:240;stroke-dashoffset:240}
.roi-doodle-arrow-head{stroke-dasharray:60;stroke-dashoffset:60}
.roi-inputs.in .roi-doodle-arrow-line{animation:doodle-draw 1.1s var(--ease) .9s forwards}
.roi-inputs.in .roi-doodle-arrow-head{animation:doodle-draw .4s var(--ease) 1.85s forwards}

@media (prefers-reduced-motion: reduce){
  .roi-doodle-note{opacity:1;transform:rotate(-4deg);filter:none;transition:none}
  .roi-doodle-arrow path{stroke-dashoffset:0;animation:none}
}
@media (max-width:900px){
  .roi-doodle{display:none}
}
.roi-field{display:flex;flex-direction:column;gap:8px}
.roi-field-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.roi-field-head label{font-family:var(--mono);font-size:11px;color:var(--fg-dim);letter-spacing:.08em;text-transform:uppercase}
.roi-field-head output{font-family:var(--serif);font-size:24px;color:var(--fg);letter-spacing:-.01em}
.roi-hint{font-size:13px;line-height:1.5;color:var(--fg-dim);margin:0 0 8px;max-width:46ch}
.roi-range-labels{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--fg-dimmer);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;outline:none;cursor:none;padding:0;margin:0;--pct:50%}
input[type="range"]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right, var(--accent) 0 var(--pct), var(--line-strong) var(--pct) 100%)}
input[type="range"]::-moz-range-track{height:4px;border-radius:2px;background:var(--line-strong)}
input[type="range"]::-moz-range-progress{height:4px;border-radius:2px;background:var(--accent)}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:var(--accent);border:3px solid var(--bg);cursor:none;box-shadow:0 2px 10px rgba(0,0,0,.18);margin-top:-11px;transition:transform .15s var(--ease), box-shadow .15s var(--ease)}
input[type="range"]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--accent);border:3px solid var(--bg);cursor:none;box-shadow:0 2px 10px rgba(0,0,0,.18);transition:transform .15s var(--ease), box-shadow .15s var(--ease)}
input[type="range"]:hover::-webkit-slider-thumb{transform:scale(1.12);box-shadow:0 4px 14px rgba(0,0,0,.22)}
input[type="range"]:hover::-moz-range-thumb{transform:scale(1.12);box-shadow:0 4px 14px rgba(0,0,0,.22)}
input[type="range"]:active::-webkit-slider-thumb{transform:scale(1.2)}
input[type="range"]:active::-moz-range-thumb{transform:scale(1.2)}
input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 25%, transparent), 0 2px 10px rgba(0,0,0,.18)}
input[type="range"]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 25%, transparent), 0 2px 10px rgba(0,0,0,.18)}
.roi-result{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-l);padding:var(--card-pad);display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden}
@media (min-width:901px){ .roi-result{position:sticky;top:96px;align-self:start} }
.roi-result::before{content:"";position:absolute;top:0;right:0;width:180px;height:180px;background:radial-gradient(circle at top right, color-mix(in oklab, var(--accent) 20%, transparent), transparent 70%);pointer-events:none}
.roi-row{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:14px;border-bottom:1px solid var(--line)}
.roi-row span{color:var(--fg-dim);font-size:14px}
.roi-row strong{font-family:var(--serif);font-size:28px;color:var(--fg);font-weight:400;letter-spacing:-.01em}
.roi-row.accent strong{color:var(--accent)}
.roi-save{margin-top:10px;text-align:left}
.roi-save-label{font-family:var(--mono);font-size:11px;color:var(--fg-dim);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.roi-save-amount{font-family:var(--serif);font-size:clamp(48px,6vw,84px);line-height:1;color:var(--accent);letter-spacing:-.03em}
.roi-save-unit{font-family:var(--mono);font-size:11px;color:var(--fg-dim);letter-spacing:.08em;text-transform:uppercase;margin-top:6px}

/* ---------- features ---------- */
.features{padding:var(--section-y-tight) 0 var(--section-y)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden}
@media (max-width:900px){ .feat-grid{grid-template-columns:1fr} }
.feat{background:var(--bg-elevated);padding:var(--card-pad);min-height:280px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;transition:background .3s var(--ease)}
.feat:hover{background:var(--bg-3)}
.feat-icon{width:40px;height:40px;border-radius:10px;border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--accent);margin-bottom:24px}
.feat h3{font-family:var(--serif);font-size:28px;line-height:1.05;letter-spacing:-.01em;font-weight:400;margin-bottom:12px}
.feat p{color:var(--fg-dim);font-size:14.5px;line-height:1.55}
.feat-tag{position:absolute;top:18px;right:18px;font-family:var(--mono);font-size:10.5px;color:var(--fg-dimmer);letter-spacing:.08em;text-transform:uppercase}

/* ---------- use cases — editorial layout ---------- */
.cases{padding:var(--section-y-tight) 0 0}

.case-grid{
  display:flex; flex-direction:column;
  gap:32px;
  padding:40px 0 100px;
}

.case{
  --case-bg: var(--bg-2);
  --case-accent: var(--accent);
  --case-quote-bg: color-mix(in oklab, var(--case-accent) 5%, var(--case-bg));
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:72px;
  align-items:start;
  background: var(--case-bg);
  border-radius:24px;
  padding:72px;
  border:1px solid color-mix(in oklab, var(--case-accent) 8%, transparent);
}
/* Tre temperatur-varianter — alle indenfor cream/sage/grøn-paletten */
.case[data-tone="rose"]{   --case-bg:#efeadf; --case-accent:#1e4d38 } /* warm cream + dyb skovgrøn */
.case[data-tone="sand"]{   --case-bg:#e4e7da; --case-accent:#2d6a4f } /* kølig sage + standard grøn */
.case[data-tone="forest"]{ --case-bg:#f6f8f1; --case-accent:#52a071 } /* lys sage + varm grøn */

.case:nth-child(even) > .case-content{order:2}
.case:nth-child(even) > .case-figure{order:1}

.case.rise, .case.rise.in{opacity:1; transform:none; filter:none}

.case-content{
  display:flex; flex-direction:column;
  min-width:0;
}

.case-meta{
  display:flex; align-items:center; gap:18px;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-dim);
  margin-bottom:34px;
}
.case-meta .case-num{font-family:inherit;font-size:inherit;letter-spacing:inherit;color:inherit}
.case-meta .case-tag{font-family:inherit;font-size:inherit;letter-spacing:inherit;color:inherit}
.case-meta-sep{
  width:36px; height:1px;
  background:currentColor;
  opacity:.45;
  flex-shrink:0;
}

.case-headline{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(38px, 4.4vw, 64px);
  line-height:1.04;
  letter-spacing:-.015em;
  color:var(--fg);
  margin:0 0 28px;
}
.case-headline em{
  font-style:italic;
  color:var(--case-accent);
  font-weight:400;
}

.case-lede{
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  color:var(--fg-dim);
  max-width:42ch;
  margin:0 0 44px;
}

.case-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
  margin:0 0 40px;
  padding:0;
}
.case-stat{
  padding:24px 0 22px;
  border-bottom:1px solid var(--line);
  margin:0;
}
.case-stat:nth-child(odd){padding-right:32px}
.case-stat:nth-child(even){padding-left:32px;border-left:1px solid var(--line)}
.case-stat dt{
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  font-size:clamp(36px, 3.4vw, 50px);
  line-height:1;
  letter-spacing:-.015em;
  color:var(--case-accent);
  margin:0 0 10px;
}
.case-stat dd{
  font-family:var(--sans);
  font-size:14px;
  color:var(--fg-dim);
  line-height:1.4;
  margin:0;
}

.case-bullets{
  list-style:none;
  padding:0; margin:0 0 40px;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  color:var(--fg);
}
.case-bullets li{
  position:relative;
  padding:8px 0 8px 32px;
}
.case-bullets li::before{
  content:"—";
  position:absolute;
  left:0; top:8px;
  color:var(--fg-dim);
}

.case-quote{
  margin:0;
  padding:22px 26px 24px;
  background:color-mix(in oklab, var(--case-accent) 6%, var(--case-bg));
  border-left:3px solid var(--case-accent);
  border-radius:0 6px 6px 0;
}
.case-quote p{
  font-family:var(--serif);
  font-style:italic;
  font-size:19px;
  line-height:1.4;
  color:var(--fg);
  margin:0 0 14px;
  letter-spacing:-.005em;
}
.case-quote cite{
  font-family:var(--mono);
  font-style:normal;
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--fg-dim);
}

.case-figure{
  margin:0;
  display:flex; flex-direction:column;
  align-self:start;
  position:sticky; top:104px;
}
.case-frame{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  background:var(--bg-elevated);
  box-shadow:
    var(--shadow-md),
    0 0 0 1px color-mix(in oklab, var(--case-accent) 10%, transparent);
}
.case-frame img{
  display:block;
  width:100%;
  height:auto;
}
.case-figure figcaption{
  margin-top:16px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:color-mix(in oklab, var(--case-accent) 60%, var(--fg-dim));
  text-align:center;
}

/* "Bliv den fjerde case" — CTA panel */
.case-cta{
  --case-bg: var(--bg-2);
  --case-accent: var(--accent);
  display:grid;
  grid-template-columns: 1fr auto;
  gap:56px;
  align-items:center;
  background: var(--case-bg);
  border-radius:24px;
  padding:56px 72px;
  border:1px solid color-mix(in oklab, var(--case-accent) 8%, transparent);
}
.case-cta-text{
  display:flex; flex-direction:column;
  gap:18px;
  min-width:0;
}
.case-cta-headline{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(34px, 4vw, 56px);
  line-height:1.05;
  letter-spacing:-.015em;
  color:var(--fg);
  margin:0;
}
.case-cta-headline em{
  font-style:italic;
  color:var(--case-accent);
  font-weight:400;
}
.case-cta-lede{
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  color:var(--fg-dim);
  max-width:54ch;
  margin:0;
}
.case-cta-btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:20px 36px;
  background:var(--case-accent);
  color:#faf6ee;
  border-radius:999px;
  font-family:var(--sans);
  font-weight:500;
  font-size:16px;
  letter-spacing:-.005em;
  white-space:nowrap;
  flex-shrink:0;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.case-cta-btn:hover{
  transform:translateY(-2px);
  background:color-mix(in oklab, var(--case-accent) 88%, #000);
  box-shadow:0 14px 28px -12px color-mix(in oklab, var(--case-accent) 60%, transparent);
}
.case-cta-btn .arrow{
  font-size:18px;
  line-height:1;
  transition:transform .25s var(--ease);
}
.case-cta-btn:hover .arrow{transform:translateX(3px)}

.case-media{
  position:relative;
  border-bottom:1px solid var(--line);
}
.case-screen{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--bg-3);
}
.case-screen img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:top center;
  transition:transform 1.4s var(--ease);
}
.case:hover .case-screen img{transform:scale(1.02)}
.case-screen--dark{background:#1a1a1a}

/* Chat widget overlay — sits in bottom-right of the screenshot */
.cw{
  position:absolute;
  right:24px; bottom:80px;
  width:24%;
  max-width:280px;
  background:#fff;
  color:#1c2230;
  border-radius:14px;
  box-shadow:0 24px 48px -16px rgba(15,25,35,0.32), 0 6px 16px rgba(15,25,35,0.1);
  overflow:hidden;
  font-family:var(--sans);
  font-size:12px;
  line-height:1.45;
  text-align:left;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.case:hover .cw{
  transform:translateY(-3px);
  box-shadow:0 26px 50px -14px rgba(15,25,35,0.36), 0 8px 16px rgba(15,25,35,0.1);
}

.cw-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(15,25,35,0.06);
}
.cw-id{display:flex; align-items:center; gap:9px; min-width:0}
.cw-avatar{
  position:relative;
  width:26px; height:26px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-warm) 100%);
  flex-shrink:0;
}
.cw-avatar::after{
  content:"";
  position:absolute; right:-1px; bottom:-1px;
  width:8px; height:8px; border-radius:50%;
  background:#3bc372;
  border:2px solid #fff;
}
.cw-id-text{display:flex; flex-direction:column; gap:1px; min-width:0}
.cw-name{
  font-weight:600; font-size:13px;
  color:#0f1923;
  letter-spacing:-.005em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cw-status{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px;
  color:#7a8190;
}
.cw-status i{
  width:6px; height:6px; border-radius:50%;
  background:#3bc372;
  display:block;
  box-shadow:0 0 0 2px rgba(59,195,114,0.18);
}
.cw-actions{
  display:flex; gap:11px;
  font-size:13px;
  color:#9aa0ad;
}
.cw-actions span{display:inline-block; line-height:1}

.cw-body{padding:12px 14px; background:#fff}
.cw-msg{
  display:inline-block;
  background:#f1f3f6;
  padding:9px 13px 11px;
  border-radius:14px;
  border-bottom-left-radius:4px;
  margin-right:12%;
  color:#1c2230;
  font-size:11.5px;
  line-height:1.45;
}
.cw-time{
  display:block;
  margin-top:4px;
  font-size:9.5px;
  color:#9aa0ad;
}
.cw-chips{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:5px;
  margin-top:10px;
}
.cw-chips span{
  font-size:10.5px;
  padding:6px 12px 7px;
  background:#fff;
  border:1px solid #e3e6ec;
  border-radius:999px;
  color:#3a4050;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}

.cw-input{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px;
  border-top:1px solid rgba(15,25,35,0.06);
  background:#fafbfc;
}
.cw-clip{font-size:13px; color:#9aa0ad; flex-shrink:0}
.cw-ph{
  flex:1; min-width:0;
  font-size:11px;
  color:#9aa0ad;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cw-send{
  flex-shrink:0;
  width:22px; height:22px;
  background:var(--accent);
  color:#fff;
  border-radius:50%;
  display:inline-grid; place-items:center;
  font-size:12px; line-height:1;
  font-weight:600;
}

/* Floating close FAB */
.cw-toggle{
  position:absolute;
  right:24px; bottom:24px;
  width:38px; height:38px;
  border-radius:50%;
  background:#1a1a1a;
  color:#fff;
  display:grid; place-items:center;
  font-size:16px; line-height:1;
  box-shadow:0 10px 22px rgba(15,25,35,0.28), 0 3px 8px rgba(15,25,35,0.14);
  font-family:var(--sans);
}

/* Bottom info block — horizontal row across the wide card */
.case-info{
  display:grid;
  grid-template-columns: 220px 1fr 1.4fr;
  align-items:baseline;
  gap:32px;
  padding:30px 36px 32px;
}
.case-tag{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
}
.case-name{
  font-family:var(--sans);
  font-weight:700;
  font-size:28px;
  line-height:1.05;
  letter-spacing:-.015em;
  color:var(--fg);
}
.case-result{
  font-family:var(--sans);
  font-size:17px;
  line-height:1.45;
  color:var(--fg-dim);
}

/* ---------- logos ---------- */
.logos{padding:var(--section-y-tight) 0 var(--section-y);border-top:1px solid var(--line)}
.logo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden;margin-top:40px}
@media (max-width:900px){ .logo-grid{grid-template-columns:repeat(3,1fr)} }
.logo-cell{background:var(--bg);aspect-ratio:3/2;display:grid;place-items:center;font-family:var(--serif);font-size:24px;color:var(--fg-dim);letter-spacing:-.01em;position:relative;transition:color .3s var(--ease)}
.logo-cell:hover{color:var(--fg)}
.logo-cell .sub{position:absolute;bottom:12px;left:16px;font-family:var(--mono);font-size:10px;color:var(--fg-dimmer);letter-spacing:.06em;text-transform:uppercase}

/* ---------- pricing ---------- */
.pricing{padding:var(--section-y-tight) 0 var(--section-y);min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:60px}
@media (max-width:900px){ .price-grid{grid-template-columns:1fr} }
.price{border:1px solid var(--line);border-radius:var(--radius-l);padding:var(--card-pad);display:flex;flex-direction:column;gap:24px;background:var(--bg-2);position:relative;overflow:hidden}
.price.feat-plan{background:var(--bg);border-color:var(--accent)}
.price .tag{position:absolute;top:20px;right:20px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);padding:4px 8px;border-radius:4px}
.price h3{font-family:var(--serif);font-size:28px;font-weight:400;letter-spacing:-.01em}
.price .amt{font-family:var(--serif);font-size:64px;line-height:1;letter-spacing:-.03em}
.price .amt small{font-size:16px;color:var(--fg-dim);font-family:var(--sans);margin-left:6px}
.price .amt .per{display:block;font-family:var(--sans);font-size:13px;color:var(--fg-dim);margin-top:6px}
.price .desc{color:var(--fg-dim);font-size:14px;line-height:1.55}
.price ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--fg)}
.price ul li{display:flex;gap:10px;align-items:flex-start;position:relative}
.price ul li::before{content:"";width:14px;height:14px;border-radius:50%;border:1px solid var(--accent);flex-shrink:0;margin-top:4px}
.price-note{text-align:center;margin-top:40px;color:var(--fg-dim);font-size:13.5px}

/* handwritten note above the recommended plan's price — distinct from "Mest populær" tag */
.price-doodle{
  font-family:"Caveat", "Patrick Hand", cursive;
  font-weight:500;
  font-size:28px;line-height:1;
  color:var(--accent);
  align-self:flex-start;
  transform:rotate(-4deg);
  margin-top:-10px;margin-bottom:-14px;
  display:inline-flex;align-items:baseline;gap:8px;
  opacity:0;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.price-doodle-arrow{
  display:inline-block;font-size:1.2em;
  transform:translateY(2px);
}
.price.feat-plan.in .price-doodle{
  opacity:1;
  transform:rotate(-4deg) translateY(0);
  transition-delay:.4s;
}
.price.feat-plan .price-doodle{transform:rotate(-4deg) translateY(6px)}
@media (prefers-reduced-motion: reduce){
  .price-doodle{opacity:1;transform:rotate(-4deg);transition:none}
}

/* ---------- FAQ ---------- */
.faq{padding:var(--section-y-tight) 0 var(--section-y);min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);padding:16px 0;cursor:none}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:var(--serif);font-size:clamp(19px,2vw,24px);letter-spacing:-.01em;cursor:pointer;-webkit-user-select:none;user-select:none}
.faq-plus{width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;flex-shrink:0;transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease)}
.faq-item.open .faq-plus{transform:rotate(45deg);background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease);color:var(--fg-dim);font-size:15px;line-height:1.6;max-width:64ch}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden;padding-top:0;transition:padding-top .45s var(--ease)}
.faq-item.open .faq-a > div{padding-top:18px}
.faq-a a{color:var(--accent);font-weight:500}

/* ---------- contact ---------- */
.contact{padding:var(--section-y-tight) 0 var(--section-y);border-top:1px solid var(--line);position:relative;overflow:hidden;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.contact-bg{position:absolute;inset:0;z-index:0;opacity:.5;background:
  radial-gradient(ellipse at 20% 30%, color-mix(in oklab, var(--accent) 22%, transparent) 0%, transparent 50%),
  radial-gradient(ellipse at 80% 70%, color-mix(in oklab, var(--accent) 14%, transparent) 0%, transparent 60%)}
.contact-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:start;position:relative;z-index:2}
@media (max-width:900px){ .contact-inner{grid-template-columns:1fr} }
.contact h2{font-family:var(--serif);font-size:clamp(48px,6vw,96px);line-height:.95;letter-spacing:-.025em;font-weight:400}
.contact h2 em{color:var(--accent);font-style:italic}
.contact-form{display:flex;flex-direction:column;gap:16px;margin-top:40px}
.contact-form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:700px){ .contact-form .row{grid-template-columns:1fr} }
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--mono);font-size:11px;color:var(--fg-dim);letter-spacing:.06em;text-transform:uppercase}
.field input, .field textarea, .field select{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;color:var(--fg);font:inherit;font-size:16px;outline:none;cursor:none;transition:border-color .25s var(--ease)}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--accent)}
.field textarea{min-height:120px;resize:vertical;font-family:inherit}
.contact-success{display:none;padding:var(--card-pad);background:var(--bg-2);border:1px solid var(--accent);border-radius:var(--radius-l);margin-top:40px;text-align:center}
.contact-success.show{display:block;animation:success-appear .5s var(--ease) both}
@keyframes success-appear{
  from{opacity:0;transform:translateY(12px);filter:blur(4px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
.contact-success-icon{width:48px;height:48px;margin:0 auto 16px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:24px}
.contact-success h3{font-family:var(--serif);font-size:28px;font-weight:400;margin-bottom:8px}
.contact-success p{color:var(--fg-dim);font-size:15px}

.contact-info{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-l);padding:var(--card-pad);display:flex;flex-direction:column;gap:24px}
.contact-info h4{font-family:var(--mono);font-size:11px;color:var(--fg-dim);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.contact-info p{font-size:15px;line-height:1.5}
.contact-info a{color:var(--accent)}

/* ---------- about ---------- */
.about{padding:var(--section-y) 0;border-top:1px solid var(--line);min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.about-inner{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;align-items:start}
.about-inner > div:last-child{padding-top:42px}
@media (max-width:900px){ .about-inner{grid-template-columns:1fr} .about-inner > div:last-child{padding-top:0} }
.about p{font-family:var(--serif);font-size:clamp(22px,2.6vw,34px);line-height:1.25;letter-spacing:-.01em}
.about p em{font-style:italic;color:var(--accent)}
.about p span{color:var(--fg-dim)}
.about-portrait{margin-bottom:32px;border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden;aspect-ratio:3/4;max-width:420px;position:relative}
.about-portrait img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.about-portrait .tag{position:absolute;bottom:12px;left:12px;font-family:var(--mono);font-size:10px;background:var(--accent);color:var(--accent-ink);padding:4px 8px;border-radius:4px;letter-spacing:.06em;text-transform:uppercase}
.about-meta{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;font-family:var(--mono);font-size:12px;color:var(--fg-dim);letter-spacing:.04em;text-transform:uppercase}
.about-meta div b{display:block;font-family:var(--serif);font-size:20px;color:var(--fg);font-weight:400;margin-top:6px;letter-spacing:-.01em;text-transform:none}

/* ---------- banner (replaces photo banner with CSS composition) ---------- */
/* SVG clipPath defs — kept in DOM but invisible */
.banner-clip-defs{position:absolute;width:0;height:0;overflow:hidden}
.banner{margin:240px var(--space-6) var(--space-7);min-height:520px;position:relative;overflow:hidden;
  background:var(--bg-3);
  -webkit-clip-path:url(#banner-clip);
  clip-path:url(#banner-clip);
  display:flex;align-items:end}
.banner-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.banner::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* dark scrim for læsbarhed — top-listed = øverste lag */
    linear-gradient(120deg, rgba(10,30,20,.62) 0%, rgba(10,30,20,.32) 55%, rgba(10,30,20,.12) 100%),
    /* brand-grøn tint så video matcher resten af siden */
    radial-gradient(ellipse at 20% 30%, color-mix(in oklab, var(--accent) 35%, transparent) 0%, transparent 55%)}
.banner-grid{position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:88px 88px;opacity:.5;mix-blend-mode:overlay}
.banner .caption{position:relative;width:100%;padding:var(--space-7) var(--space-7) var(--space-8) clamp(120px, 11%, 180px);display:flex;justify-content:space-between;align-items:end;z-index:2;color:rgba(255,255,255,.78);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.banner .caption .big{font-family:var(--serif);font-size:clamp(40px,6vw,84px);line-height:.95;text-transform:none;letter-spacing:-.02em;color:#fff;max-width:16ch;font-weight:400;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.banner .caption .big em{color:var(--highlight);font-style:italic}

/* spinning text mark — right side, vertically centered, large */
.spin-mark{position:absolute;top:42%;right:60px;transform:translateY(-50%);width:220px;height:220px;z-index:2;pointer-events:none}
.spin-mark svg{width:100%;height:100%;animation:spin-mark 22s linear infinite;transform-origin:50% 50%}
.spin-mark .spin-text{font-family:var(--mono);font-size:13px;letter-spacing:.22em;fill:#fff;text-transform:uppercase;opacity:.92}
.spin-mark .spin-dot{position:absolute;top:50%;left:50%;width:14px;height:14px;border-radius:50%;background:var(--highlight);transform:translate(-50%,-50%);box-shadow:0 0 0 10px color-mix(in oklab, var(--highlight) 30%, transparent)}
@keyframes spin-mark{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .spin-mark svg{animation:none} }

/* hero portrait */
.hero-portrait{position:absolute;left:40px;bottom:40px;width:220px;height:280px;border-radius:var(--radius-m);overflow:hidden;border:1px solid var(--line);z-index:1;transform:rotate(-2deg);transition:transform .4s var(--ease)}
.hero-portrait:hover{transform:rotate(0) scale(1.02)}
.hero-portrait img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.hero-portrait .tag{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:10px;background:var(--accent);color:var(--accent-ink);padding:4px 8px;border-radius:4px;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:1400px){ .hero-portrait{display:none} }

footer{border-top:1px solid var(--line);padding:60px 0 40px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:60px}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr} }
.foot-grid h5{font-family:var(--mono);font-size:11px;color:var(--fg-dim);letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.foot-grid ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px}
.foot-grid ul a:hover{color:var(--accent)}
.foot-bottom{display:flex;justify-content:space-between;align-items:end;padding-top:30px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--fg-dim);letter-spacing:.04em;text-transform:uppercase;flex-wrap:wrap;gap:16px}
.foot-wordmark{font-family:var(--serif);font-size:clamp(80px,14vw,220px);line-height:.85;letter-spacing:-.04em;margin-top:60px;position:relative;color:var(--fg);text-transform:none}
.foot-wordmark em{font-style:italic;color:var(--accent)}

/* Typewriter effect — each char snaps in one-by-one */
.foot-wordmark.rise{opacity:1;transform:none;filter:none;transition:none}
.foot-wordmark .fw-char{display:inline-block;opacity:0;transition:opacity .01s linear}
.foot-wordmark.typed .fw-char{opacity:1}
.foot-wordmark .fw-caret{display:inline-block;width:.06em;height:.78em;background:var(--accent);margin-left:.04em;vertical-align:-.06em;opacity:0;animation:fw-blink .55s step-end infinite}
.foot-wordmark.typing .fw-caret{opacity:1}
.foot-wordmark.typed .fw-caret{animation:none;opacity:0;transition:opacity .4s ease .3s}
@keyframes fw-blink{50%{opacity:0}}

/* ---------- reveal on scroll ---------- */
.rise{opacity:0;transform:translateY(24px);filter:blur(4px);transition:opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease)}
.rise.in{opacity:1;transform:translateY(0);filter:blur(0)}
.rise.d1{transition-delay:.08s}
.rise.d2{transition-delay:.16s}
.rise.d3{transition-delay:.24s}
.rise.d4{transition-delay:.32s}


/* ---------- scroll progress ---------- */
#progress{position:fixed;top:0;left:0;height:2px;background:var(--accent);z-index:100;width:0;transition:width .1s linear}

[data-magnet]{transition:transform .35s var(--ease)}

/* ---------- founder strip ---------- */
.founder{padding:var(--section-y) 0;background:var(--bg-2);min-height:115vh;display:flex;flex-direction:column;justify-content:center}
.founder-inner{display:grid;grid-template-columns:420px 1fr;gap:72px;align-items:center}
.founder-portrait{position:relative;border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--line);aspect-ratio:3/4}
.founder-portrait img{width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
.founder-portrait .tag{position:absolute;bottom:14px;left:14px;font-family:var(--mono);font-size:10px;background:var(--accent);color:var(--accent-ink);padding:4px 8px;border-radius:4px;letter-spacing:.06em;text-transform:uppercase}
.founder-copy{max-width:60ch}
.founder-copy .eyebrow{margin-bottom:24px}
.founder-quote{font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);line-height:1.3;letter-spacing:-.01em;color:var(--fg);margin-bottom:20px}
.founder-quote em{font-style:italic;color:var(--accent)}
.founder-quote-2{color:var(--fg-dim);font-size:17px;line-height:1.55;margin-bottom:28px}
.founder-sig{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-dim);padding-top:20px;border-top:1px solid var(--line)}
.founder-sig strong{font-family:var(--serif);font-size:20px;color:var(--fg);font-weight:400;letter-spacing:-.01em;text-transform:none}

/* ---------- primer ("Helt kort") ---------- */
.primer{padding:0 0 var(--space-8);min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.primer .section-head{padding:var(--section-y) 0 var(--space-7)}
.primer-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:start}
.primer-body{max-width:60ch;display:flex;flex-direction:column;gap:20px}
.primer-body p{font-family:var(--serif);font-size:clamp(20px,2.1vw,28px);line-height:1.4;letter-spacing:-.005em;color:var(--fg);margin:0}
.primer-body .primer-kicker{font-family:var(--mono);font-size:14px;line-height:1.6;letter-spacing:.02em;color:var(--accent);text-transform:none;padding-top:12px;border-top:1px solid var(--line);margin-top:12px}

/* primer demo — marginalia: handwritten note + drawn arrow + chat-bubble */
.primer-demo{display:flex;justify-content:center;align-items:center;padding:20px 0;min-height:280px}
.primer-doodle{position:relative;width:min(360px, 100%);aspect-ratio:5/4}

/* the handwritten note — top-left, slightly tilted, like a pen scribble */
.primer-doodle-note{
  position:absolute;
  top:6%;left:0;
  width:62%;
  font-family:"Caveat", "Patrick Hand", cursive;
  font-weight:500;
  font-size:clamp(26px, 3vw, 32px);
  line-height:1.05;
  color:var(--accent);
  margin:0;
  transform-origin:top left;
  display:flex;flex-direction:column;gap:2px;
  opacity:0;
  filter:blur(2px);
  transform:rotate(-3.5deg) translateY(8px);
  transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
.primer-doodle-note span{display:block}
.primer-doodle-note em{font-style:italic;color:color-mix(in oklab, var(--accent) 70%, var(--fg) 30%)}
.primer-demo.in .primer-doodle-note{
  opacity:1;
  transform:rotate(-3.5deg) translateY(0);
  filter:blur(0);
  transition-delay:.15s;
}

/* the hand-drawn arrow — animated draw-in, like a marker stroke */
.primer-doodle-arrow{
  position:absolute;
  top:38%;left:32%;
  width:55%;height:auto;
  color:color-mix(in oklab, var(--accent) 85%, var(--fg) 15%);
  pointer-events:none;
  overflow:visible;
}
.primer-doodle-arrow path{
  filter:drop-shadow(0 1px 0 rgba(45,106,79,.08));
}
.primer-doodle-arrow-line{
  stroke-dasharray:380;
  stroke-dashoffset:380;
}
.primer-doodle-arrow-head{
  stroke-dasharray:60;
  stroke-dashoffset:60;
}
.primer-demo.in .primer-doodle-arrow-line{
  animation:doodle-draw 1.2s var(--ease) .9s forwards;
}
.primer-demo.in .primer-doodle-arrow-head{
  animation:doodle-draw .45s var(--ease) 1.95s forwards;
}
@keyframes doodle-draw{ to{ stroke-dashoffset:0; } }

/* the chat-bubble — bottom-right, where the arrow lands */
.primer-doodle-bubble{
  position:absolute;
  right:0;bottom:0;
  width:64px;height:64px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;
  box-shadow:0 18px 36px -10px rgba(45,106,79,.5), 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent) inset;
  opacity:0;
  transform:scale(.5) rotate(-14deg);
  transition:opacity .4s var(--ease), transform .55s cubic-bezier(.34,1.56,.64,1);
}
.primer-demo.in .primer-doodle-bubble{
  opacity:1;
  transform:scale(1) rotate(0);
  transition-delay:2.1s;
  animation:doodle-bubble-wiggle 5s ease-in-out 3s infinite;
}
.primer-doodle-bubble svg{width:24px;height:24px}
.primer-doodle-bubble-dot{
  position:absolute;top:-2px;right:-2px;
  width:14px;height:14px;border-radius:50%;
  background:var(--warn);
  border:2px solid var(--bg);
}
@keyframes doodle-bubble-wiggle{
  0%, 100%{transform:translateY(0) rotate(0)}
  20%{transform:translateY(-3px) rotate(-2deg)}
  40%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-1px) rotate(2deg)}
  60%{transform:translateY(0) rotate(0)}
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .primer-doodle-note{opacity:1;transform:rotate(-3.5deg);filter:none;transition:none}
  .primer-doodle-arrow path{stroke-dashoffset:0;animation:none}
  .primer-doodle-bubble{opacity:1;transform:scale(1) rotate(0);animation:none}
}

@media (max-width:900px){
  .primer{padding:0 0 40px}
  .primer-body p{font-size:18px;line-height:1.5}
  .primer-grid{grid-template-columns:1fr;gap:24px}
  .primer-demo{padding:0;justify-content:center;min-height:220px}
  .primer-doodle{width:min(320px, 100%)}
  .primer-doodle-note{font-size:26px}
}
@media (max-width:720px){
  .primer-doodle{width:280px}
  .primer-doodle-note{font-size:24px;width:64%}
  .primer-doodle-bubble{width:54px;height:54px}
  .primer-doodle-bubble svg{width:20px;height:20px}
}

/* ---------- demo video walkthrough ---------- */
.demo-video{padding:var(--section-y-tight) 0 var(--section-y);min-height:100vh;display:flex;flex-direction:column;justify-content:center}
section[data-theme]{background:var(--bg);color:var(--fg)}
section[data-theme="dark"] .video-sound-toggle{background:var(--bg-elevated);border-color:var(--line-strong)}
section[data-theme="dark"] .video-sound-toggle:hover{background:var(--bg-3)}
section[data-theme="dark"] .video-quote p{color:var(--fg)}
.demo-split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:60px;align-items:center;margin-top:20px}
@media (max-width:900px){ .demo-split{grid-template-columns:minmax(0,1fr);gap:36px} }
.demo-video-wrap{position:relative;border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--line);background:var(--bg-2);aspect-ratio:16/10;box-shadow:var(--shadow-lg), 0 0 0 1px var(--line) inset}
.demo-video-el{width:100%;height:100%;object-fit:cover;display:block;background:var(--bg-2)}
.video-sound-toggle{position:absolute;bottom:16px;right:16px;width:44px;height:44px;border-radius:50%;background:var(--bg);border:1px solid var(--line-strong);display:grid;place-items:center;cursor:none;z-index:2;transition:background .2s var(--ease), transform .2s var(--ease)}
.video-sound-toggle:hover{background:var(--bg-3);transform:scale(1.08)}
.video-sound-toggle .icon-unmuted{display:none}
.video-sound-toggle.is-unmuted .icon-muted{display:none}
.video-sound-toggle.is-unmuted .icon-unmuted{display:block}
.video-sound-toggle svg{color:var(--fg)}
.demo-steps{list-style:none;display:flex;flex-direction:column;gap:8px;position:relative}
.demo-step{display:flex;gap:22px;padding:22px 0;position:relative;align-items:flex-start}
.demo-step + .demo-step{border-top:1px solid var(--line)}
.demo-step-num{flex-shrink:0;width:44px;height:44px;border-radius:50%;border:1px solid var(--accent);background:var(--bg);color:var(--accent);font-family:var(--serif);font-size:22px;display:grid;place-items:center;letter-spacing:-.02em;transition:background .3s var(--ease), color .3s var(--ease)}
.demo-step.in .demo-step-num{background:var(--accent);color:var(--accent-ink)}
.demo-step h3{font-family:var(--serif);font-size:clamp(22px,2.4vw,28px);font-weight:400;letter-spacing:-.01em;line-height:1.15;margin-bottom:6px}
.demo-step p{color:var(--fg-dim);font-size:15px;line-height:1.55}
/* connector line between circles */
.demo-steps::before{content:"";position:absolute;left:22px;top:44px;bottom:44px;width:1px;background:var(--line-strong);transform:translateX(-.5px)}

@media (max-width:720px){
  .demo-video{padding:20px 0 60px}
  .demo-step{gap:14px;padding:18px 0}
  .demo-step-num{width:36px;height:36px;font-size:18px}
  .demo-steps::before{left:18px;top:36px;bottom:36px}
}

/* ---------- video proof (replaces demo-steps in #i-aktion) ---------- */
.video-proof{display:flex;flex-direction:column;justify-content:center;gap:2rem}
.video-quote{border-left:3px solid var(--accent);padding-left:1.25rem;margin:0}
.video-quote p{font-family:var(--serif);font-size:clamp(1.25rem,2.5vw,1.65rem);font-style:italic;color:var(--fg);line-height:1.5;margin:0 0 0.5rem}
.video-quote cite{font-size:0.9rem;color:var(--fg-dim);font-style:normal}

/* ---------- forskellen (diff table) ---------- */
.diff{padding:var(--section-y-tight) 0 var(--section-y);min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.diff-table{border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden;margin-top:32px;background:var(--bg)}
.diff-row{display:grid;grid-template-columns:1.2fr 1fr 1fr;border-bottom:1px solid var(--line);min-height:56px;align-items:center}
.diff-row:last-child{border-bottom:none}
.diff-row > div{padding:16px 24px;font-size:15px;line-height:1.4}
.diff-col-label{font-family:var(--serif);font-size:18px;color:var(--fg);border-right:1px solid var(--line);letter-spacing:-.005em}
.diff-col-them{color:var(--fg-dim);border-right:1px solid var(--line);display:flex;align-items:center;gap:10px}
.diff-col-us{color:var(--fg);display:flex;align-items:center;gap:10px;background:color-mix(in oklab, var(--accent) 4%, transparent)}
.diff-head{background:var(--bg-2);min-height:44px}
.diff-head > div{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim);padding:12px 24px}
.diff-head .diff-col-us{color:var(--accent)}
.diff-no{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:color-mix(in oklab, var(--warn) 20%, transparent);color:var(--warn);font-size:13px;flex-shrink:0}
.diff-yes{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:color-mix(in oklab, var(--accent) 24%, transparent);color:var(--accent);font-size:13px;flex-shrink:0;font-weight:600}
.diff-cta{display:flex;justify-content:center;margin-top:32px}

/* ---------- KPI / authority stats additions ---------- */
.kpi b a, .kpi span a{color:var(--accent);font-size:inherit;text-decoration:none}
.kpi b a:hover, .kpi span a:hover{text-decoration:underline}
.kpi span a{display:inline;margin-left:4px}

/* ========================================================= */
/* ============== MOBILE RESPONSIVE (≤720px) ============== */
/* ========================================================= */

@media (max-width: 980px){
  .hero{padding:var(--section-y) 0 var(--space-8);min-height:0}
  .hero-main{gap:32px}
  .hero h1{font-size:clamp(40px,10vw,68px)}
  .hero-sub{font-size:17px;margin-top:24px;line-height:1.55}
  .hero-cta{margin-top:28px;gap:12px}
  .hero-cta .btn{padding:13px 20px;font-size:14px;min-height:44px}
  .chat{min-height:420px;padding:16px}
  .chat-avatar{width:32px;height:32px;font-size:18px}
}

@media (max-width: 720px){
  html, body{max-width:100vw;overflow-x:hidden}
  .wrap{padding:0 24px;max-width:100vw}
  .hero-eyebrow{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .chat{width:100%}
  .msg{max-width:92%;word-wrap:break-word;overflow-wrap:break-word}
  .nav-inner{height:60px;grid-template-columns:auto 1fr auto}
  .logo{font-size:17px;gap:8px}
  .logo-mark{width:18px;height:18px}
  .nav-cta{gap:6px;flex-shrink:0}
  .nav-cta .btn,
  .nav-cta .btn.sm,
  .nav-cta .btn.primary{padding:9px 14px;font-size:13px;gap:6px;min-height:38px;box-shadow:0 6px 14px rgba(21,20,15,.18)}
  .nav-cta .btn.ghost{display:none}
  .nav-cta .btn.primary .arrow{display:none}
  .chat, .hero-main, .hero, .chat-stream, .msg, .feat, .case, .price, .contact-inner{max-width:100%;min-width:0}

  .section-head{padding:var(--section-y-tight) 0 var(--space-7);gap:16px}
  .section-title{font-size:clamp(32px,8vw,44px)}

  .hero{padding:90px 0 48px}
  .hero h1{font-size:clamp(38px,11vw,56px);line-height:1.06}
  .hero-eyebrow{font-size:11px;margin-bottom:20px}
  .hero-eyebrow span:last-child{font-size:10px}
  .hero-sub{font-size:17px;line-height:1.55;max-width:none}
  .chat{height:440px;max-height:440px;min-height:0;padding:14px}
  .chat-head{padding-bottom:12px;margin-bottom:12px}
  .chat-tabs{margin-bottom:10px;gap:6px}
  .chat-tab{padding:5px 8px;font-size:10px}
  .chat-stream{gap:10px;min-height:220px}
  .msg{font-size:17px;line-height:1.5;padding:12px 16px;max-width:92%}
  .chat-input{padding:8px 8px 8px 14px}
  .chat-input input{font-size:16px}
  .chat-send{width:40px;height:40px}

  .ticker-track{font-size:20px;gap:40px;animation-duration:38s}

  .kpis{padding:60px 0 72px}
  .kpi-grid{grid-template-columns:1fr;gap:24px;margin-top:32px}
  .kpi{padding-top:18px}
  .kpi b{font-size:clamp(44px,14vw,72px)}
  .kpi span{font-size:17px;line-height:1.55}

  .roi{padding:20px 0 72px}
  .roi-grid{gap:28px;margin-top:32px}
  .roi-inputs{gap:24px}
  .roi-result{padding:24px}
  .roi-row span{font-size:17px}
  .roi-row strong{font-size:22px}
  .roi-save-amount{font-size:clamp(40px,12vw,60px)}
  .roi-field-head output{font-size:20px}
  .roi-hint{font-size:14px;line-height:1.5}
  input[type="range"]{height:36px}
  input[type="range"]::-webkit-slider-thumb{width:32px;height:32px;margin-top:-14px}
  input[type="range"]::-moz-range-thumb{width:32px;height:32px}

  .features{padding:20px 0 72px}
  .feat{padding:var(--card-pad);min-height:0}
  .feat h3{font-size:22px}
  .feat p{font-size:17px;line-height:1.55}
  .feat-icon{width:36px;height:36px;margin-bottom:16px}

  .cases{padding:20px 0 0}
  .case-grid{gap:20px; padding:24px 0 60px}
  .case{grid-template-columns:1fr; gap:32px; padding:36px 28px; border-radius:18px}
  .case:nth-child(even) > .case-content{order:initial}
  .case:nth-child(even) > .case-figure{order:initial}
  .case-figure{position:static; order:-1}
  .case-meta{gap:14px; font-size:10.5px; margin-bottom:24px}
  .case-meta-sep{width:24px}
  .case-headline{font-size:clamp(30px, 8vw, 42px); margin-bottom:20px}
  .case-lede{font-size:16px; margin-bottom:32px}
  .case-stats{margin-bottom:32px}
  .case-stat{padding:18px 0 16px}
  .case-stat:nth-child(odd){padding-right:18px}
  .case-stat:nth-child(even){padding-left:18px}
  .case-stat dt{font-size:32px; margin-bottom:6px}
  .case-stat dd{font-size:13px}
  .case-bullets{font-size:15px; margin-bottom:32px}
  .case-bullets li{padding:6px 0 6px 26px}
  .case-quote{padding:18px 20px 20px}
  .case-quote p{font-size:17px}

  .case-cta{
    grid-template-columns:1fr;
    gap:24px;
    padding:36px 28px;
    border-radius:18px;
  }
  .case-cta-headline{font-size:clamp(28px, 8vw, 38px)}
  .case-cta-lede{font-size:15px}
  .case-cta-btn{
    align-self:flex-start;
    padding:16px 28px;
    font-size:15px;
  }

  /* clip-path slukkes på mobil — path er for kompleks ved smal aspect-ratio */
  .banner{min-height:320px;margin:24px 16px;border-radius:24px;
    -webkit-clip-path:none;clip-path:none}
  .banner .caption{padding:var(--space-5)}
  .banner .caption .big{font-size:clamp(28px,8vw,42px)}
  .spin-mark{top:50%;right:20px;left:auto;width:140px;height:140px}
  .spin-mark .spin-text{font-size:11px;letter-spacing:.18em}
  .spin-mark .spin-dot{width:9px;height:9px;box-shadow:0 0 0 6px color-mix(in oklab, var(--accent) 18%, transparent)}

  .pricing{padding:20px 0 72px}
  .price{padding:24px}
  .price .amt{font-size:48px}
  .price h3{font-size:22px}
  .price .desc{font-size:17px;line-height:1.55}
  .price ul{font-size:17px;line-height:1.55}

  .faq{padding:20px 0 72px}
  .faq-item{padding:22px 0}
  .faq-q{font-size:19px;gap:14px;min-height:32px;align-items:center}
  .faq-plus{width:32px;height:32px;flex-shrink:0}
  .faq-a{font-size:17px;line-height:1.55;max-width:none}

  .contact{padding:48px 0 72px}
  .contact h2{font-size:clamp(36px,9vw,52px)}
  .contact-form{margin-top:24px;gap:12px}
  .contact-form .row{gap:12px}
  .contact-info{padding:24px}
  .contact-info p{font-size:17px;line-height:1.55}

  .about{padding:48px 0 60px}
  .about-inner{gap:28px}
  .about-portrait{max-width:320px}
  .about p{font-size:clamp(18px,5vw,22px);line-height:1.4}
  .about-meta{grid-template-columns:1fr;gap:14px;margin-top:28px}

  .founder{padding:56px 0}
  .founder-inner{grid-template-columns:1fr;gap:24px}
  .founder-portrait{max-width:360px;margin:0 auto}
  .founder-quote{font-size:20px;margin-bottom:14px}
  .founder-quote-2{font-size:17px;line-height:1.55;margin-bottom:20px}

  .diff{padding:20px 0 72px}
  .diff-table{margin-top:24px}
  .diff-row{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);min-height:0}
  .diff-row > div{padding:14px 12px;font-size:15.5px;line-height:1.4;word-break:break-word}
  .diff-col-label{font-family:var(--serif);font-size:15px;letter-spacing:-.005em}
  .diff-col-them,.diff-col-us{gap:8px;align-items:flex-start}
  .diff-no,.diff-yes{display:none}
  .diff-head > div{font-size:10.5px;padding:12px}
  .diff-head{min-height:42px}

  footer{padding:40px 0 24px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:24px;margin-bottom:40px}
  .foot-grid ul{font-size:16px;gap:12px}
  .foot-wordmark{font-size:clamp(60px,18vw,120px);margin-top:32px}
  .foot-bottom{flex-direction:column;align-items:flex-start;font-size:12px}

/* disable magnetic + cursor-none on touch */
  [data-magnet]{transform:none !important}
  body{cursor:auto}
  .cur-dot,.cur-ring{display:none}
}