/* site.css · base.css + C · Lab (källa v2/_src/base.css och v2/C-lab/index.html, portad enligt BYGGPLAN 7.1). Tokens = MONKPATH-DESIGN §2–§8 (tokens v3), produkten = B45 §2.
   Typsnitt självhostade woff2 under /fonts/v1/. */
@font-face { font-family: 'Instrument Sans'; src: url(/fonts/v1/instrument-sans-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url(/fonts/v1/instrument-sans-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(/fonts/v1/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(/fonts/v1/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --void: #0A0A0B; --onyx: #111113; --graphite: #1C1C1F; --basalt: #2A2A2E; --slate: #3E3E44; --fog: #A8A8B3; --chalk: #FAFAF9;
  --cobalt: #2A46FA; --cobalt-lift: #6E86FF; --cobalt-deep: #16238A;
  --green: #35B27E; --amber: #E8A33D; --red: #D0452F;
  --hair: rgba(250,250,249,.10); --hair-strong: rgba(250,250,249,.18);
  --surface: rgba(14,14,16,.78); --surface-hi: rgba(24,24,27,.86);
  --sans: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --damped: cubic-bezier(.2,.8,.2,1);
  --container: 1200px; --gutter: clamp(1rem, 3vw, 2rem);
  --z-layer: 1; --z-content: 2; --z-sticky: 20; --z-voice: 30;
}
* { box-sizing: border-box; }
html { background: var(--void); color: var(--chalk); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; font: 400 18px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--cobalt-lift); }
:focus-visible { outline: 2px solid var(--cobalt-lift); outline-offset: 3px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lbl { font: 500 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fog); font-variant-numeric: tabular-nums; }
.second { color: var(--fog); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* Wordmarket är brandens outline-SVG (Bold 700, tracking −0,02em), minsta bredd 97 px enligt MONKPATH-DESIGN §4. Ingen 700-fil behövs. */
.wmk { display: block; width: 97px; height: 19px; fill: currentColor; }

/* ---------- hero-media: poster (LCP) → video → WebGL-lager. Allt ligger under texten ---------- */
.media { position: absolute; inset: 0; overflow: hidden; background: var(--void); z-index: 0; }
.media img, .media video, .media canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.media video, .media canvas { opacity: 0; transition: opacity 700ms var(--damped); }
.media video.on, .media canvas.on { opacity: 1; }
.media canvas.layer { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .media video, .media canvas { display: none; } }

/* DOM-korn (shader-recept §Korn): ett lager per yta */
.grain { position: relative; }
.grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); background-size: 128px 128px; z-index: 1; }

/* ---------- produkten (B45 §2): toppfält, tråd, röstbar ---------- */
.mp { background: var(--surface); border: 1px solid var(--hair-strong); border-radius: 12px; color: var(--chalk); overflow: hidden; font-size: 15px; line-height: 1.45; }
.mp-top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--hair); }
.mp-top .wm { display: inline-flex; }
.mp-top .wm .wmk { width: 82px; height: 16px; }
.mp-top .who { font: 500 11px/1 var(--mono); letter-spacing: .12em; color: var(--fog); }
.mp-top .sp { flex: 1; }
.mp-toggle { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--mono); letter-spacing: .12em; color: var(--fog); }
.mp-toggle i { width: 28px; height: 16px; border-radius: 999px; background: var(--slate); position: relative; }
.mp-toggle i::after { content: ''; position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--chalk); }
.mp-pill { font: 500 11px/1 var(--mono); letter-spacing: .12em; color: var(--fog); border: 1px solid var(--hair-strong); border-radius: 999px; padding: 6px 10px; }
.mp-thread { list-style: none; margin: 0; padding: 18px; display: grid; gap: 12px; }
.mp-thread li { max-width: 86%; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 8px; background: var(--surface-hi); transition: border-color 400ms var(--damped), color 400ms var(--damped), opacity 400ms var(--damped); }
.mp-thread li .who { display: block; font: 500 11px/1 var(--mono); letter-spacing: .12em; color: var(--fog); margin-bottom: 8px; }
.mp-thread li.you { justify-self: end; background: transparent; }
.mp-thread li.wait { border-color: var(--cobalt); }
/* Repliken som talas: koboltramen flyttar dit, de andra tonas ned. Ingen rörelse i sidled. */
[data-playing="true"] .mp-thread li { opacity: .42; border-color: var(--hair); }
[data-playing="true"] .mp-thread li.spoken { opacity: .7; }
[data-playing="true"] .mp-thread li.speaking { opacity: 1; border-color: var(--cobalt); }
.mp-bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--hair); }
.mp-bar .st { font: 500 11px/1 var(--mono); letter-spacing: .12em; color: var(--fog); display: inline-flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.mp-bar .st svg { width: 64px; height: 16px; flex: none; }
.mp-bar .hold { font: 500 11px/1 var(--mono); letter-spacing: .12em; color: var(--fog); border: 1px dashed var(--hair-strong); border-radius: 4px; padding: 11px 13px; white-space: nowrap; }
.mp-bar .alt { font: 500 11px/1 var(--mono); letter-spacing: .12em; color: var(--fog); border: 1px dashed var(--hair-strong); border-radius: 4px; padding: 11px 12px; }
.mp-bar .hold, .mp-bar .alt, .mp-toggle, .mp-pill { cursor: default; user-select: none; pointer-events: none; }

/* ---------- formulär ---------- */
.wl { display: grid; gap: 10px; }
.wl input[type=email], .wl select { font: 400 17px/1.2 var(--sans); color: var(--chalk); background: var(--graphite); border: 1px solid var(--basalt); border-radius: 4px; min-height: 52px; padding: 0 16px; width: 100%; }
.wl input::placeholder { color: var(--fog); }
.wl select { text-overflow: ellipsis; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23A8A8B3' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-position: calc(100% - 18px) 50%; background-repeat: no-repeat; padding-right: 40px; }
.wl button { font: 500 16px/1 var(--sans); min-height: 52px; padding: 0 22px; border-radius: 4px; cursor: pointer; border: 1px solid transparent; }

/* ---------- footer ---------- */
.legal { border-top: 1px solid var(--hair); padding: 40px 0 56px; font-size: 15px; color: var(--fog); }
.legal .row { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; }
.legal a { color: var(--fog); text-decoration: none; border-bottom: 1px solid var(--hair-strong); }
@media (hover: hover) { .legal a:hover { color: var(--chalk); } }
.legal nav { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.legal .fine { margin-top: 20px; max-width: 68ch; }
.legal img { width: 140px; height: auto; display: block; }
.legal .el { border: 0; }
@media (max-width: 480px) { .mp-bar .alt { display: none; } .mp-bar { gap: 8px; } .mp-bar .st svg { width: 40px; } .mp-top .who { display: none; } }

/* ---------- C · Lab ---------- */
  /* C: hairlines och wireframe bär bilden. Kapitel I/II/III. Ljud som opt-in. */
  :root { --wire: rgba(250,250,249,.5); --wire-soft: rgba(250,250,249,.22); }
  header.top { position: fixed; inset: 0 0 auto 0; z-index: var(--z-sticky); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0 clamp(16px, 2.4vw, 32px); height: 60px; border-bottom: 1px solid var(--hair); background: var(--onyx); }
  header .wm { color: var(--chalk); text-decoration: none; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; }
  header .mid { justify-self: center; }
  header .end { justify-self: end; display: flex; align-items: center; gap: 20px; }
  header .cell { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fog); font-variant-numeric: tabular-nums; white-space: nowrap; }
    header nav { display: flex; gap: 20px; padding-left: 20px; border-left: 1px solid var(--hair); }
  header nav a { color: var(--chalk); text-decoration: none; font-size: 15px; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; }
  .soundbtn { all: unset; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--chalk); border: 1px solid var(--hair-strong); border-radius: 2px; padding: 0 12px; white-space: nowrap; }
  .soundbtn:focus-visible { outline: 2px solid var(--cobalt-lift); outline-offset: 3px; }
  .soundbtn[aria-pressed="true"] { border-color: var(--chalk); }

  section { position: relative; }
  .hl { border-top: 1px solid var(--hair); }

  /* ---------- hero, kapitel I ---------- */
  .hero { min-height: 100svh; display: grid; place-items: center; text-align: center; overflow: hidden; padding: 120px 16px 96px; }
  .hero .media img, .hero .media video.on { opacity: .42; }
  .hero .in { position: relative; z-index: var(--z-content); display: grid; justify-items: center; }
  .hero .ch { margin-bottom: 40px; }
  .hero h1 { font: 500 clamp(44px, 6.4vw, 92px)/1.02 var(--sans); letter-spacing: -.03em; max-width: 14ch; }
  .hero h1 .second { display: block; }
  .hero .sub { margin-top: 32px; max-width: 46ch; color: var(--chalk); }
  .hero .opt { margin-top: 44px; }
  /* Ramen: fyra hörnmärken i hairline, som ett sökarfönster. */
  .frame { position: absolute; inset: 84px clamp(16px, 2.4vw, 32px) auto; height: calc(100svh - 108px); z-index: var(--z-content); pointer-events: none; }   /* A2: höjden följer vyn, inte heron, så hörnen inte flyttar sig när heron växer */
  .frame i { position: absolute; width: 18px; height: 18px; border: 0 solid var(--wire); }
  .frame i:nth-child(1) { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
  .frame i:nth-child(2) { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
  .frame i:nth-child(3) { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
  .frame i:nth-child(4) { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }
  .frame span { position: absolute; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fog); }
  .frame .bl { left: 28px; bottom: 4px; } .frame .br { right: 28px; bottom: 4px; }

  /* ---------- kapitelkort ---------- */
  .chapter { padding: clamp(120px, 14vw, 200px) 0 clamp(64px, 8vw, 96px); text-align: center; }
  .chapter .num { font: 400 clamp(64px, 9vw, 128px)/1 var(--mono); letter-spacing: .02em; color: var(--chalk); }
  .chapter .num + .lbl { display: block; margin-top: 20px; }
  .chapter .rule { width: 1px; height: 96px; background: var(--wire-soft); margin: 40px auto 0; }

  .statement { padding: 0 0 clamp(120px, 14vw, 200px); text-align: center; }
  .statement h2 { font: 500 clamp(36px, 5vw, 76px)/1.06 var(--sans); letter-spacing: -.03em; max-width: 18ch; margin: 0 auto; }

  /* ---------- vad det är: produkten som sprängskiss ---------- */
  .what { padding: 0 0 clamp(96px, 12vw, 160px); }
  .what .grid { display: grid; grid-template-columns: 5fr 7fr; gap: 48px var(--gutter); align-items: center; }
  .what h2 { font: 500 clamp(32px, 3.6vw, 48px)/1.1 var(--sans); letter-spacing: -.02em; max-width: 14ch; margin-bottom: 28px; }
  .what p { color: var(--fog); max-width: 46ch; }
  .what p strong { color: var(--chalk); font-weight: 500; }
  .wire { width: 100%; height: auto; display: block; overflow: visible; }
  .wire .w { fill: none; stroke: var(--wire); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
  .wire .s { fill: none; stroke: var(--wire-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .wire .c { fill: none; stroke: var(--cobalt); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
  .wire text { font: 500 11px var(--mono); letter-spacing: .1em; fill: var(--fog); text-transform: uppercase; }
  .wire .big { font: 500 30px var(--mono); fill: var(--chalk); letter-spacing: 0; }

  /* ---------- samtalet + tidslinje ur tidsstämplarna ---------- */
  .talk { padding: clamp(96px, 12vw, 160px) 0; }
  .talk .grid { display: grid; grid-template-columns: 5fr 7fr; gap: 48px var(--gutter); align-items: start; }
  .talk h2 { font: 500 clamp(32px, 3.6vw, 48px)/1.1 var(--sans); letter-spacing: -.02em; max-width: 14ch; margin-bottom: 24px; }
  .talk .lede { color: var(--fog); max-width: 42ch; margin-bottom: 32px; }
  .play { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--chalk); border: 1px solid var(--hair-strong); border-radius: 2px; padding: 0 16px; min-height: 44px; box-sizing: border-box; }
  .play:focus-visible { outline: 2px solid var(--cobalt-lift); outline-offset: 3px; }
  .play[aria-pressed="true"] { border-color: var(--chalk); }
  .play .i-stop, .play[aria-pressed="true"] .i-play { display: none; } .play[aria-pressed="true"] .i-stop { display: inline; }
  .ruler { margin-top: 40px; }
  .ruler svg { width: 100%; height: 64px; display: block; overflow: visible; }
  .ruler .tick { stroke: var(--wire-soft); stroke-width: 1; }
  .ruler .seg { stroke: var(--wire); stroke-width: 6; }
  .ruler .seg.you { stroke: rgba(250,250,249,.28); }
  .ruler .seg.on { stroke: var(--chalk); }
  .ruler .head { stroke: var(--cobalt); stroke-width: 1.5; }
  .ruler text { font: 500 10px var(--mono); fill: var(--fog); letter-spacing: .08em; }
  .talk .mp { width: 100%; }
  .talk .mp-thread li { font-size: 17px; }

  /* ---------- hur ---------- */
  .how { padding: clamp(96px, 12vw, 160px) 0; }
  .how h2 { font: 500 clamp(32px, 3.6vw, 48px)/1.1 var(--sans); letter-spacing: -.02em; margin-bottom: 56px; max-width: 20ch; }
  /* Vertikal sekvens med spår (inga tre kort): siffran sitter på linjen, texten till höger. */
  .steps { list-style: none; margin: 0 0 0 17px; padding: 0; border-left: 1px solid var(--wire-soft); counter-reset: step; max-width: 760px; }
  .steps > li { position: relative; padding: 0 0 56px 56px; counter-increment: step; }
  .steps > li:last-child { padding-bottom: 8px; }
  .steps > li::before { content: counter(step); position: absolute; left: -18px; top: 0; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--wire); background: var(--void); display: grid; place-items: center; font: 500 14px/1 var(--mono); color: var(--chalk); }
  .steps .cap { display: block; font: 400 16px/1.3 var(--sans); color: var(--fog); padding-top: 8px; }
  .steps h3 { font: 500 28px/1.3 var(--sans); margin: 6px 0 12px; }
  .steps p { color: var(--fog); max-width: 46ch; }

  /* ---------- kapitel III: arbetsgivaren ---------- */
  .hr { padding: 0 0 clamp(96px, 12vw, 160px); }
  .hr .grid { display: grid; grid-template-columns: 6fr 6fr; gap: 56px var(--gutter); }
  .hr h2 { font: 500 clamp(32px, 3.6vw, 48px)/1.1 var(--sans); letter-spacing: -.02em; margin-bottom: 28px; }
  .hr .lede { max-width: 50ch; }
  .hr .priv { margin-top: 18px; color: var(--fog); max-width: 50ch; }
  .lic { margin-top: 40px; }
  .lic svg { width: 100%; max-width: 520px; height: auto; display: block; overflow: visible; }
  .table { border-top: 1px solid var(--wire); }
  .table .r { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--hair-strong); }
  .table .r span { color: var(--fog); }
  .table .r output { font: 500 20px/1 var(--mono); font-variant-numeric: tabular-nums; }
  .table .r input { grid-column: 1 / -1; width: 100%; accent-color: var(--chalk); }
  .table .total { padding: 28px 0; border-bottom: 1px solid var(--wire); }
  .table .total b { display: block; font: 500 48px/1.12 var(--mono); font-variant-numeric: tabular-nums; }
  .table .total p { color: var(--fog); max-width: 44ch; margin-top: 8px; }
  .table h3 { font: 500 28px/1.3 var(--sans); padding: 24px 0; }
  .one { margin-top: 40px; }
  .one h3 { font: 500 28px/1.3 var(--sans); margin-bottom: 8px; }
  .one p { color: var(--fog); margin-bottom: 24px; max-width: 46ch; }
  .one .wl { grid-template-columns: 1fr auto; }
  .btn-cobalt { background: var(--cobalt); color: var(--chalk); }
  @media (hover: hover) { .btn-cobalt:hover { background: var(--cobalt-deep); } }
  .btn-chalk { background: var(--chalk); color: var(--void); }

  .proof { padding: clamp(80px, 10vw, 120px) 0; text-align: center; border-top: 1px solid var(--wire-soft); border-bottom: 1px solid var(--wire-soft); }
  .proof p { font: 500 clamp(24px, 2.6vw, 34px)/1.3 var(--sans); max-width: 30ch; margin: 0 auto; }

  .join { min-height: 90svh; display: grid; place-items: center; text-align: center; padding: 140px 16px; }
  .join h2 { font: 500 clamp(48px, 6.6vw, 96px)/1.02 var(--sans); letter-spacing: -.035em; margin-bottom: 24px; }
  .join .body { color: var(--fog); margin-bottom: 48px; }
  .join .wl { grid-template-columns: 1.1fr 1.1fr auto; width: min(840px, 100%); text-align: left; margin: 0 auto; }

  /* Wireframe-linjerna ritas ut när de kommer in (JS sätter startläget i onEnter). Utan JS: färdiga. */
  @media (max-width: 900px) {
    header.top { grid-template-columns: 1fr auto; } header .mid { display: none; } header .end { gap: 10px; } header nav { border: 0; padding: 0; gap: 14px; }
    .what .grid, .talk .grid, .hr .grid { grid-template-columns: 1fr; }
    .join .wl, .one .wl { grid-template-columns: 1fr; }
    .frame .br { display: none; }
  }
  @media (max-width: 560px) { header nav a[href="#early"] { display: none; } }

/* ---------- Remake: funktionell CSS (BYGGPLAN 7.5) ---------- */
[hidden] { display: none !important; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.consent-banner { display: none; }
.consent-banner.visible { display: flex; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 100; background: var(--chalk); color: var(--void); padding: 12px 16px; border-radius: 2px; text-decoration: none; }
.skip:focus { top: 8px; }
main, footer.legal { position: relative; z-index: 1; }

/* Hero: scrim över videon så att texten klarar 4,5:1 mot lokal yta även där vattnet är ljust. */
.hero .media::after { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(10,10,11,.55); pointer-events: none; }
.hero .media canvas.layer, .hero .media canvas.reserve { z-index: 2; }

/* Hero-formuläret */
.hero .wl { width: min(840px, 100%); grid-template-columns: 1.1fr 1.1fr auto; text-align: left; margin-top: 44px; }
.hero .micro { margin-top: 14px; color: var(--fog); font-size: 15px; }
.hero .opt { margin-top: 28px; font: 400 16px/1.5 var(--sans); letter-spacing: 0; text-transform: none; max-width: 46ch; }
.hero .form-state { max-width: 840px; width: min(840px, 100%); text-align: left; }

/* Formulärknappar och -status */
.wl button { background: var(--cobalt); color: var(--chalk); min-height: 52px; }
@media (hover: hover) { .wl button:hover { background: var(--cobalt-deep); } }
.wl button:disabled { opacity: .55; cursor: not-allowed; }
.wl input[type=email], .wl select, .wl textarea { color: var(--chalk); }
.wl option { color: var(--chalk); background: var(--graphite); }
.form-state { font: 400 14px/1.4 var(--mono); color: var(--fog); min-height: 1.4em; margin-top: 10px; }
.form-state[data-state="success"] { color: var(--chalk); border-left: 2px solid var(--green); padding-left: .6em; }
.form-state[data-state="error"] { color: var(--chalk); border-left: 2px solid var(--red); padding-left: .6em; }
.form-state[data-state="loading"] { color: var(--fog); }
.join .form-state { text-align: center; max-width: 840px; margin-left: auto; margin-right: auto; }
.one .form-state { max-width: 46ch; }

/* Efter submit ersätter motorn formulärets innehåll (qualify-steget och bekräftelsen) */
.wl[data-step] { display: block; }
.wl[data-step] h2 { font: 500 28px/1.3 var(--sans); margin-bottom: 14px; }
.wl[data-step] p, .wl[data-step] li { color: var(--chalk); font-size: 17px; margin-bottom: 12px; }
.wl[data-step] ul { padding-left: 1.2em; margin: 0 0 12px; }
.wl[data-step] a { color: var(--cobalt-lift); }
.wl[data-step] .topbar-cta { display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px; background: var(--cobalt); color: var(--chalk); border-radius: 4px; text-decoration: none; margin-bottom: 20px; }
.qualify-step { text-align: left; max-width: 560px; margin: 0 auto; }
.qualify-step label { display: block; font: 400 17px/1.4 var(--sans); color: var(--chalk); margin-bottom: 18px; }
.qualify-step select, .qualify-step textarea { display: block; margin-top: 8px; width: 100%; min-height: 52px; font: 400 17px/1.4 var(--sans); color: var(--chalk); background: var(--graphite); border: 1px solid var(--basalt); border-radius: 4px; padding: 12px 16px; }
.qualify-step textarea { min-height: 96px; resize: vertical; }
.qualify-step .micro { color: var(--fog); font-size: 15px; margin-bottom: 16px; }
.qualify-step button { min-height: 52px; min-width: 44px; }
.qualify-state { font: 400 14px/1.4 var(--mono); color: var(--chalk); min-height: 1.4em; margin-bottom: 12px; }
.qualify-state[data-state="error"] { border-left: 2px solid var(--red); padding-left: .6em; }

/* Samtyckesbanner: markupen är låst, bara stylad. Kompakt; ui.js sätter --banner-h så att body får lika mycket padding-bottom medan den syns. */
.consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 500; align-items: center; justify-content: center; gap: 8px 16px; flex-wrap: wrap; padding: 8px clamp(16px, 4vw, 32px); background: var(--onyx); border-top: 1px solid var(--hair-strong); }
.consent-banner p { flex: 1 1 260px; max-width: 58ch; font: 400 14px/1.35 var(--sans); color: var(--chalk); }
.consent-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.consent-actions button { font: 500 14px/1 var(--sans); min-height: 44px; min-width: 44px; padding: 0 18px; border-radius: 4px; cursor: pointer; border: 1px solid var(--hair-strong); background: transparent; color: var(--chalk); }
.consent-actions button.consent-accept { background: var(--cobalt); border-color: var(--cobalt); }
body { padding-bottom: var(--banner-h, 0px); }
/* A1: bannerhöjden är deterministisk: bannern får höjden FRÅN --banner-h, som sätts här per brytpunkt (inget JS, inget mätande). Värdena = uppmätt innehållshöjd + marginal. */
html:has(#consent-banner.visible) { --banner-h: 64px; }
@media (min-width: 500px) and (max-width: 518.98px) { html:has(#consent-banner.visible) { --banner-h: 80px; } }
@media (min-width: 320px) and (max-width: 499.98px) { html:has(#consent-banner.visible) { --banner-h: 112px; } }
@media (max-width: 319.98px) { html:has(#consent-banner.visible) { --banner-h: 176px; } }
@media (min-width: 560px) and (max-height: 480px) and (orientation: landscape) { html:has(#consent-banner.visible) { --banner-h: 56px; } }
@media (max-width: 319.98px) { .consent-banner { padding-left: 8px; padding-right: 8px; } .consent-actions button { padding: 0 10px; } }
.consent-banner { height: var(--banner-h); box-sizing: border-box; align-content: center; overflow-y: auto; }
html { scroll-padding-top: 76px; scroll-padding-bottom: var(--banner-h, 0px); }

/* State Check: egna sektionen, ingen reveal (annonstrafik landar direkt på #state-check) */
.statecheck { padding: clamp(80px, 10vw, 140px) 0; border-top: 1px solid var(--wire-soft); border-bottom: 1px solid var(--wire-soft); }
.statecheck h2 { font: 500 clamp(32px, 3.6vw, 48px)/1.1 var(--sans); letter-spacing: -.02em; margin: 14px 0 20px; max-width: 18ch; }
.statecheck > .wrap > p { color: var(--fog); max-width: 52ch; }
.statecheck .sc-panel { margin-top: 36px; max-width: 560px; }
.statecheck .sc-panel p { margin-bottom: 14px; }
.statecheck .sc-progress { font: 500 12px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fog); margin-bottom: 14px; }
.statecheck .sc-question { font: 500 24px/1.3 var(--sans); margin-bottom: 20px; }
.statecheck .sc-options { display: grid; gap: 10px; }
.statecheck .sc-option { text-align: left; min-height: 52px; padding: 14px 18px; background: transparent; color: var(--chalk); border: 1px solid var(--hair-strong); border-radius: 4px; font: 400 17px/1.35 var(--sans); cursor: pointer; transition: border-color .2s var(--damped); }
@media (hover: hover) { .statecheck .sc-option:hover { border-color: var(--chalk); } }
.statecheck .sc-verdict { font: 500 14px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--chalk); margin-bottom: 12px; }
.statecheck .sc-read { font: 500 22px/1.35 var(--sans); }
.statecheck .micro { color: var(--fog); font-size: 15px; }
.statecheck .wl { margin-top: 26px; grid-template-columns: 1fr auto; }

/* Hela sidan: vatten som bakgrund (signaturmomentet). Texten ligger alltid över en scrim. */
.stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--void); overflow: hidden; }
.stage .lyr { position: absolute; inset: 0; opacity: 0; transition: opacity 1200ms cubic-bezier(.2,.8,.2,1); }
.stage .lyr.on { opacity: 1; }
.stage .lyr img, .stage .lyr video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.stage .scrim { position: absolute; inset: 0; background: rgba(10,10,11,.8); }
.stage[data-off] .lyr { display: none; }
@media (prefers-reduced-motion: reduce) { .stage .lyr { transition-duration: 160ms; } .stage .lyr video { display: none; } }

/* Kapitel III: kontaktknapp i HR-sektionen (länk, inget fjärde formulär) */
.one .btn-cobalt { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 4px; font: 500 16px/1 var(--sans); text-decoration: none; }
@media (hover: hover) { .one .btn-cobalt:hover { background: var(--cobalt-deep); } }
.footer-lead { color: var(--chalk); }
.legal .fine { color: var(--fog); }
.legal nav a, .legal a { min-height: 24px; }

@media (max-width: 900px) {
  .statecheck .wl { grid-template-columns: 1fr; }
  .wl button { width: 100%; }
  .consent-actions button { flex: 1; }
}
/* Mobil: heron ryms ovanför bannern så att e-postfältet, valet, knappen och felmeddelandet syns utan scroll. */
@media (max-width: 640px) {
  /* N5: heron är alltid 100svh (bannern ryms i bottenpaddingen), så State Check ligger under bild och inte trycks ned när qualify-steget växer. */
  .hero { padding: 76px 16px calc(20px + var(--banner-h, 0px)); min-height: 100svh; }
  .hero .ch { margin-bottom: 16px; }
  .hero h1 { font-size: clamp(36px, 10.4vw, 48px); }
  .hero .sub { margin-top: 16px; }
  .hero .wl { grid-template-columns: 1fr; margin-top: 22px; gap: 8px; }
  .hero .micro { margin-top: 10px; }
  .hero .opt { margin-top: 16px; }
  .frame { display: none; }
}
/* D1: liggande telefon. Formuläret ska synas ovanför samtyckesbannern vid första besöket: lägre header, tätare hero, rubriken på två rader. */
@media (max-height: 480px) and (orientation: landscape) {
  header.top { height: 48px; }
  html { scroll-padding-top: 56px; }
  .hero { min-height: 0; padding: 56px 16px 16px; }
  .hero .ch { margin-bottom: 6px; }
  .hero h1 { font-size: 32px; max-width: none; }
  .hero .sub { margin-top: 6px; max-width: 70ch; font-size: 16px; line-height: 1.4; }
  .hero .wl { margin-top: 10px; }
  .hero .form-state { margin-top: 6px; }
  .hero .micro { margin-top: 8px; }
  .hero .opt { margin-top: 8px; }
  .consent-banner { padding-top: 4px; padding-bottom: 4px; }
}

/* DOM-korn som eget lager över videon (2,5 %, steps(12)); inget korn inbränt i filerna. Stilla vid reduced motion. */
.vgrain { position: absolute; inset: -50%; pointer-events: none; background-image: var(--grain); background-size: 128px 128px; animation: vgrain 1s steps(12) infinite; z-index: 1; }
.media .vgrain { z-index: 1; inset: auto -50% -50vh; top: -50vh; }   /* A2: toppen följer inte sektionens höjd, så korn-lagret hoppar inte när heron växer */
@keyframes vgrain { 0% { transform: translate(0,0); } 17% { transform: translate(-5%,-10%); } 33% { transform: translate(-15%,5%); } 50% { transform: translate(7%,-25%); } 67% { transform: translate(-15%,25%); } 83% { transform: translate(15%,0); } 100% { transform: translate(0,0); } }
@media (prefers-reduced-motion: reduce) { .vgrain { animation: none; } }

/* FIXLISTA-1 A5/A6/B7: resultat, kvitto och qualify */
#sc-result, .wl[data-step] h2, .wl[data-step] { scroll-margin-top: 8px; scroll-margin-bottom: 16px; }
.wl[data-step] h2:focus { outline: none; }
.form-state:empty { border-left: 0; padding-left: 0; }
.hero .wl[data-step] { text-align: center; }   /* A2: samma bredd som startformuläret, så att formuläret inte flyttar sig i sidled */
.hero .wl[data-step] ul { text-align: left; display: inline-block; }
/* D5 (N9): kvittot i slutformuläret centreras som i heron */
.join .wl[data-step] { text-align: center; }
.join .wl[data-step] ul { text-align: left; display: inline-block; }
.hero .wl[data-step] ~ .micro, .hero .wl[data-step] ~ .opt { display: none; }   /* A2: raden under formuläret försvinner vid första steget */
/* N5: under laddning osynliga (kvar i flödet), så att de inte räknas som layoutskift när svaret växer formuläret */
.hero #hero-state[data-state="loading"] ~ .micro, .hero #hero-state[data-state="loading"] ~ .opt { visibility: hidden; }
.qualify-step .micro a { color: var(--cobalt-lift); }
main:focus { outline: none; }
.frame span { display: none; }

/* B10: State Check i två kolumner på bred skärm (texten till vänster, panelen till höger) */
@media (min-width: 1000px) {
  .statecheck > .wrap { display: grid; grid-template-columns: 5fr 7fr; column-gap: clamp(32px, 6vw, 96px); align-items: start; }
  .statecheck > .wrap > h2, .statecheck > .wrap > p { grid-column: 1; }
  .statecheck > .wrap > h2 { margin-top: 0; }
  .statecheck > .wrap > .sc-panel { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; max-width: 620px; }
}

/* B5: tryckytor minst 44 px, text minst 16 px på mobil */
#calc input[type=range] { height: 44px; }
.legal nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.legal .el { min-height: 44px; }
@media (max-width: 640px), (max-height: 480px) and (orientation: landscape) {
  .legal, .legal .fine { font-size: 16px; }
  .form-state, .qualify-state, .qualify-step .micro, .statecheck .micro, .statecheck .sc-progress, .hero .micro { font-size: 16px; }
  .statecheck .sc-verdict { font-size: 16px; }
  /* D6: resultatet + e-postfältet + knappen ska rymmas ovanför bannern på en kort telefon */
  .statecheck .sc-panel p { margin-bottom: 8px; }
  .statecheck .sc-verdict { margin-bottom: 6px; }
  .statecheck .wl { margin-top: 12px; gap: 8px; }
  #sc-result { scroll-margin-top: 4px; }
  .consent-banner p { font-size: 15px; }
  header nav a { font-size: 16px; }
  .soundbtn, .play { font-size: 14px; }
}

/* N1 (fixpass 3): header utan klippning på 320-430 px. Prioritet: wordmark, For employers, Sound, kapitelindikator (dold under 900 px). Tryckytor fortsatt 44 px höga. */
@media (max-width: 430px) {
  header.top { padding: 0 12px; gap: 8px; }
  header .wmk { width: 76px; height: 15px; }
  header .end { gap: 4px; }
  header nav { gap: 0; }
  header nav a { font-size: 15px; min-width: 44px; }
  .soundbtn { font-size: 13px; letter-spacing: 0; padding: 0 6px; }
}

/* N12: qualify-selecterna får samma pil som heron (fog). Bakgrund-shorthand i .qualify-step select nollade pilen, så den läggs tillbaka här. */
.qualify-step select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23A8A8B3' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-position: calc(100% - 18px) 50%; background-repeat: no-repeat; padding-right: 40px; text-overflow: ellipsis; }

/* N11: liggande hero, platshållaren i interest-selecten ryms (tätare padding och 16 px, samma pil). */
@media (max-height: 480px) and (orientation: landscape) {
  .hero .wl select { font-size: 16px; padding-left: 12px; padding-right: 30px; background-position: calc(100% - 12px) 50%; }
}

/* N9: org.nr och adressdelar bryts inte mitt i (JS i ui.js lindar dem; texten i HTML-källan är oförändrad). */
.nb { white-space: nowrap; }