/* Everything below the first viewport of index.html. Linked right after the
   hero, so the browser paints the hero before it parses and styles the rest
   of the page (Celembi-e15.10). The rules that style the nav, the top strip,
   the hero and the buttons stay inline in index.html. Order within each
   half is unchanged. */
    /* Sections below the deal stage lay out when they approach the viewport:
       the first paint then costs the hero and the stage, not the whole page
       (Celembi-e15.4). Anchor links, find-in-page and the photo band's
       observer keep working; each placeholder is 800 px until rendered. */
    #demo-forhandling, #saadan-virker-det, #hvem-kan-handle, #fordele, .photo-band,
    #afregning, #integrationer, #priser, #sikkerhed, #faq, #kontakt {
      content-visibility: auto;
      contain-intrinsic-size: auto 800px;
    }

    /* Negotiation demo widget */
    #demo-forhandling {
      background: linear-gradient(180deg, #0d1b2a 0%, #0a1522 100%);
      padding: 60px 24px;
      border-top: 1px solid #1a2a3a;
      border-bottom: 1px solid #1a2a3a;
    }

    .nego-card {
      max-width: 900px;
      margin: 0 auto;
      background: #111f30;
      border: 1px solid #1f3246;
      border-radius: 12px;
      padding: 32px;
    }

    .nego-card h2 {
      color: #fff;
      font-size: 1.4rem;
      text-align: left;
      margin-bottom: 8px;
      letter-spacing: -0.01em;
      line-height: 1.25;
    }

    .nego-card .sub {
      color: #8899aa;
      font-size: 0.92rem;
      margin-bottom: 24px;
    }

    .scenario-controls {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      padding: 12px 14px;
      margin-bottom: 22px;
      background: #0a1420;
      border: 1px solid #1f3246;
      border-radius: 8px;
    }

    .scenario-label {
      color: #b0c0d0;
      font-size: 0.9rem;
    }

    .scenario-label strong {
      color: #e0b87e;
    }

    .scenario-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .scenario-actions .nego-replay {
      margin-top: 0;
    }

    .nego-rounds {
      display: flex;
      flex-direction: column;
      gap: 6px;
      /* The page's own type: the rounds are sentences for a utility reader,
         not a terminal log. Figures stay tabular. */
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-variant-numeric: tabular-nums;
      font-size: 0.9rem;
    }

    /* Each round = one shared 200-350 kr/MWh axis. The buyer marker (gold,
       low) and seller marker (blue, high) converge; the contested gap between
       them shrinks each round until they meet. */
    .nr-round { padding: 4px 0 14px; }
    .nr-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 30px; }
    .nr-label { color: #8899aa; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.76rem; }
    .nr-gap { color: #8899aa; font-size: 0.82rem; }
    .nr-gap.is-converged { color: #6ee7b7; }
    .nr-track { position: relative; height: 6px; background: #16263a; border-radius: 3px; margin-bottom: 30px; }
    .nr-gapfill { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; background: linear-gradient(90deg, #e0b87e, #7ea9ff); opacity: 0.4; border-radius: 3px; transition: left 0.6s ease, width 0.6s ease; }
    .nr-marker { position: absolute; top: 3px; left: 50%; transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
    .nr-marker .nr-dot { position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); }
    /* Warm is the seller and fremloeb, cool is the buyer and retur - the
       drawing this audience reads every working day, and the rule in
       tokens.css. These two were inverted, and the buyer wore the brand gold
       that belongs to Celembi rather than to either party. */
    .nr-marker.seller .nr-dot { background: var(--warm); box-shadow: 0 0 12px rgba(212, 97, 74, 0.55); }
    .nr-marker.buyer .nr-dot { background: var(--cool); box-shadow: 0 0 12px rgba(126, 169, 255, 0.55); }
    .nr-marker .nr-tag { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap; font-weight: 600; font-size: 0.8rem; }
    .nr-marker.seller .nr-tag { bottom: 14px; color: var(--warm); }
    .nr-marker.buyer .nr-tag { top: 14px; color: var(--cool); }
    .nr-note { font-size: 0.82em; opacity: 0.65; line-height: 1.45; }
    /* The demo is the strongest thing on the page and the worst-rendered on a
       phone: 32px of padding leaves 294px of content at 390px, and the note
       carries the only technical detail here - pipe series, loss, forecast -
       at 11.8px and 65 % alpha. */
    @media (max-width: 640px) {
      .nego-card { padding: 20px 16px; }
      .nr-note { font-size: 0.88rem; opacity: 1; color: #b0c0d0; }
      .nego-rounds { overflow-x: hidden; }
    }
    @media (prefers-reduced-motion: reduce) { .nr-gapfill, .nr-marker { transition: none; } }

    /* No accent rule and no coloured heading. A concluded deal is a settled
       state, so green is defensible here - but as a rule down one edge with a
       green heading on top of it, it is the card-accent pattern wearing a
       second coat. The outcome is the biggest thing in the box; it earns that
       by weight. */
    .nego-final {
      margin-top: 24px;
      padding: 16px 0 0;
      border-top: 1px solid rgba(176, 192, 208, 0.16);
      color: var(--text-muted);
    }

    .nego-final strong {
      color: var(--text-primary);
      font-weight: 600;
    }

    .nego-replay {
      margin-top: 16px;
      background: transparent;
      border: 1px solid #445566;
      color: #b0c0d0;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.85rem;
    }

    .nego-replay:hover {
      border-color: #c5985e;
      color: #c5985e;
    }

    /* ── Deal-flow stage: scroll walks one trade through five beats.
       Sticky scene + advancing copy; pinning engages only on wide screens
       with motion allowed, else the beats stack and the scene shows lit in
       full. All copy is real text and present without JS. ─────────────── */
    .dealstage { position: relative; background: #0b1622; border-top: 1px solid rgba(176,192,208,0.06); }
    .dealstage-track { position: relative; }
    .dealstage-sticky { padding: 72px 24px; }
    .dealstage-grid { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }

    .ds-eyebrow { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: #c5985e; font-weight: 700; margin: 0 0 24px; }
    .ds-beats { position: relative; }
    .ds-beat { margin: 0 0 30px; }
    .ds-num { display: none; }
    .ds-beat h3 { font-size: clamp(1.5rem, 3vw, 2.15rem); color: #fff; font-weight: 700; letter-spacing: -0.01em; margin: 6px 0 10px; line-height: 1.12; }
    .ds-beat p { color: #aebfce; font-size: 1.02rem; line-height: 1.62; margin: 0 0 16px; max-width: 30em; }
    .ds-stat { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; letter-spacing: 0.03em; color: #cdd9e6; border: 1px solid rgba(176,192,208,0.18); border-radius: 999px; padding: 6px 13px; background: rgba(13,27,42,0.5); }
    .ds-stat::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--text-dim); }
    .ds-rail { display: none; list-style: none; gap: 9px; padding: 0; margin: 30px 0 0; }
    .ds-rail li { width: 28px; height: 3px; border-radius: 2px; background: rgba(176,192,208,0.2); transition: background .4s ease; }

    .ds-scene { position: relative; text-align: center; }
    /* Frame wraps the map so the badge + watermark anchor to the MAP's own
       corners (opposite, clear-sea), not the wider scene. */
    .dsm-frame { position: relative; display: inline-block; max-width: 440px; vertical-align: top; }
    /* Denmark deal-map scene (replaces abstract flow; scroll-driven camera + data-beat) */
    .ds-scene svg.dsmap { max-width: 440px; max-height: 80vh; width: 100%; height: auto; margin: 0 auto; overflow: visible; }
    .dsm-cam { will-change: transform; }
    .dsm-land, .dsm-mesh, .dsm-feed, .dsm-feed-flow, .dsm-branch, .dsm-branch-flow, .dsm-ring { vector-effect: non-scaling-stroke; }
    .dsm-land { fill: url(#dsm-land); stroke: #33597d; stroke-width: 1; stroke-linejoin: round; paint-order: stroke; }
    .dsm-mesh { stroke: #3f6076; stroke-width: 0.7; opacity: 0.2; }
    .dsm-town { fill: #7196ac; opacity: 0.5; }
    .dsm-deal { opacity: 0; transition: opacity 0.7s ease; }
    .dsm-feed { fill: none; stroke: url(#dsm-arc); stroke-width: 2.6; opacity: 0.9; stroke-linecap: round; }
    .dsm-feed-flow { fill: none; stroke: #f6fbf8; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 3 58; opacity: 0; filter: url(#dsm-glow); }
    .dsm-branch { stroke: #4ade80; fill: none; stroke-linecap: round; opacity: 0; transition: opacity 0.6s ease; }
    .dsm-branch.g1 { stroke-width: 1.5; } .dsm-branch.g2 { stroke-width: 1; }
    .dsm-branch-flow { stroke: #eafff2; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 2 26; opacity: 0; filter: url(#dsm-glow); }
    .dsm-gnode { fill: #4ade80; opacity: 0; transition: opacity 0.6s ease; }
    /* The source is the seller. Gold here was the third contradictory
       role-colour system on one page. */
    .dsm-src { fill: var(--warm); filter: url(#dsm-glow); }
    .dsm-hub { fill: #4ade80; filter: url(#dsm-glow); }
    .dsm-ring { fill: none; stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
    .dsm-ring.src { stroke: #d4a86a; } .dsm-ring.net { stroke: #4ade80; }
    .dsm-lbl { fill: #cfe0ee; font-size: 13px; font-weight: 600; font-family: 'Inter', sans-serif; paint-order: stroke; stroke: rgba(8,16,25,0.85); stroke-width: 3px; }
    .dsm-badge { position: absolute; top: 8px; right: 8px; z-index: 2;
      font-size: 0.74rem; font-weight: 600; color: #a7f3d0; background: rgba(74,222,128,0.12);
      border: 1px solid rgba(74,222,128,0.5); border-radius: 999px; padding: 5px 13px; opacity: 0; transition: opacity 0.6s ease; }
    /* Signature watermark: bottom-LEFT, over the open North Sea, so it never
       sits on Denmark / Bornholm (which are centre + bottom-right of the map). */
    .dsm-sig { position: absolute; left: 12px; bottom: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 7px;
      font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(174,188,203,0.6); }
    .dsm-sig img { opacity: 0.7; border-radius: 5px; }
    @keyframes dsm-flow { from { stroke-dashoffset: 61; } to { stroke-dashoffset: 0; } }
    @keyframes dsm-ping { 0% { opacity: 0.7; transform: scale(1); } 70% { opacity: 0; transform: scale(3); } 100% { opacity: 0; } }
    /* static / mobile (no data-beat): full scene lit */
    .dealstage-sticky:not([data-beat]) .dsm-deal,
    .dealstage-sticky:not([data-beat]) .dsm-branch,
    .dealstage-sticky:not([data-beat]) .dsm-gnode,
    .dealstage-sticky:not([data-beat]) .dsm-badge { opacity: 1; }
    .dealstage-sticky:not([data-beat]) .dsm-feed-flow,
    .dealstage-sticky:not([data-beat]) .dsm-branch-flow { opacity: 0.9; animation: dsm-flow 1.9s linear infinite; }
    @media (prefers-reduced-motion: no-preference) {
      .dealstage-sticky[data-beat="1"] .dsm-focus,
      .dealstage-sticky[data-beat="2"] .dsm-focus,
      .dealstage-sticky[data-beat="3"] .dsm-focus,
      .dealstage-sticky[data-beat="4"] .dsm-focus { opacity: 1; }
      .dealstage-sticky[data-beat="4"] .dsm-other { opacity: 1; }
      .dealstage-sticky[data-beat="2"] .dsm-focus .dsm-feed-flow,
      .dealstage-sticky[data-beat="3"] .dsm-focus .dsm-feed-flow,
      .dealstage-sticky[data-beat="4"] .dsm-focus .dsm-feed-flow,
      .dealstage-sticky[data-beat="4"] .dsm-other .dsm-feed-flow { opacity: 0.95; animation: dsm-flow 1.9s linear infinite; }
      .dealstage-sticky[data-beat="3"] .dsm-focus .dsm-branch,
      .dealstage-sticky[data-beat="3"] .dsm-focus .dsm-gnode,
      .dealstage-sticky[data-beat="4"] .dsm-focus .dsm-branch,
      .dealstage-sticky[data-beat="4"] .dsm-focus .dsm-gnode,
      .dealstage-sticky[data-beat="4"] .dsm-other .dsm-branch,
      .dealstage-sticky[data-beat="4"] .dsm-other .dsm-gnode { opacity: 1; }
      .dealstage-sticky[data-beat="3"] .dsm-focus .dsm-branch-flow,
      .dealstage-sticky[data-beat="4"] .dsm-focus .dsm-branch-flow { opacity: 0.85; animation: dsm-flow 1.9s linear infinite; }
      .dealstage-sticky[data-beat="1"] .dsm-focus .dsm-ring,
      .dealstage-sticky[data-beat="2"] .dsm-focus .dsm-ring { animation: dsm-ping 3.2s ease-out infinite; }
      .dealstage-sticky[data-beat="4"] .dsm-badge { opacity: 1; }
    }
    @media (max-width: 820px) { .ds-scene svg.dsmap { max-width: 330px; } .dsm-lbl { display: none; } .dsm-sig span { display: none; } }
    @media (prefers-reduced-motion: reduce) { .dsm-feed-flow, .dsm-branch-flow, .dsm-ring { animation: none !important; opacity: 0; } }
    /* Depth layer: canvas energy field behind the crisp SVG. Decorative,
       fades in via JS only on wide screens with motion; invisible otherwise. */
    .ds-depth { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.1s ease; }
    .ds-scene svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; max-width: 680px; margin: 0 auto; overflow: visible; }
    @media (max-width: 820px), (prefers-reduced-motion: reduce) { .ds-depth { display: none; } }
    .ds-node-label { fill: #c8d6e4; font-size: 14px; font-weight: 600; font-family: 'Inter', sans-serif; paint-order: stroke; stroke: rgba(11,22,34,0.92); stroke-width: 3.5px; stroke-linejoin: round; }
    .ds-dot-src { fill: rgba(197,152,94,0.25); stroke: #c5985e; stroke-width: 2; }
    .ds-dot-buy { fill: rgba(96,165,250,0.22); stroke: #60a5fa; stroke-width: 2; }
    .ds-path { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 9 13; opacity: 0.12; transition: opacity .6s ease; }
    .ds-heat { stroke: url(#ds-heat); }
    .ds-back { stroke: url(#ds-dkk); stroke-dasharray: 4 16; }
    @keyframes ds-flow { to { stroke-dashoffset: -220; } }
    .ds-core { fill: rgba(11,22,34,0.95); }
    .ds-ring { fill: none; stroke: #c5985e; stroke-width: 1.6; opacity: 0.85; }
    .ds-ring-outer { stroke-dasharray: 3 7; opacity: 0.4; transform-box: fill-box; transform-origin: center; animation: ds-spin 32s linear infinite; }
    @keyframes ds-spin { to { transform: rotate(360deg); } }
    .ds-ring-pulse { fill: none; stroke: #c5985e; stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
    @keyframes ds-pulse { 0% { opacity: 0.5; transform: scale(1); } 70% { opacity: 0; } 100% { opacity: 0; transform: scale(1.6); } }
    .ds-core-title { fill: #fff; font-size: 18px; font-weight: 700; font-family: 'Inter', sans-serif; }
    .ds-core-cap { fill: rgba(142,163,184,0.85); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; font-family: 'Inter', sans-serif; }
    .ds-chip { fill: rgba(13,27,42,0.9); stroke: rgba(176,192,208,0.18); }
    .ds-chip-text { fill: #c8d6e4; font-size: 12.5px; font-weight: 600; font-family: ui-monospace, 'SF Mono', Menlo, monospace; }
    .ds-chip-text tspan { fill: #e0b87e; }
    .ds-live { fill: #34d399; }
    .ds-evidence { opacity: 0; transition: opacity .6s ease; }
    .ds-evidence rect { fill: rgba(52,211,153,0.12); stroke: #34d399; }
    .ds-evidence text { fill: #a7f3d0; font-size: 12px; font-weight: 600; font-family: 'Inter', sans-serif; }

    /* base (static) mode: whole scene lit and gently flowing */
    .ds-heat { opacity: 0.82; animation: ds-flow 6s linear infinite; }
    .ds-back { opacity: 0.5; animation: ds-flow 7.5s linear infinite; }
    .ds-ring-pulse { animation: ds-pulse 2.8s ease-out infinite; }
    .ds-evidence { opacity: 1; }
    .ds-live { animation: pulse 2.4s infinite; }

    /* pinned scrollytelling: motion allowed AND the script is live (dealflow.js
       adds .ds-choreo). If the script is stale or fails, .ds-choreo is absent so
       the section stays in normal flow - beats visible, map lit in full - instead
       of a blank pinned section. Robust against service-worker asset skew. */
    @media (prefers-reduced-motion: no-preference) {
      .ds-choreo .dealstage-track { height: 470vh; }
      .ds-choreo .dealstage-sticky { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
      .ds-choreo .ds-copy { min-height: 250px; }
      .ds-choreo .ds-beats { display: grid; }
      .ds-choreo .ds-beat { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
      .ds-choreo .ds-rail { display: flex; }
      .ds-choreo .dealstage-sticky[data-beat="0"] .ds-beat[data-beat="0"],
      .ds-choreo .dealstage-sticky[data-beat="1"] .ds-beat[data-beat="1"],
      .ds-choreo .dealstage-sticky[data-beat="2"] .ds-beat[data-beat="2"],
      .ds-choreo .dealstage-sticky[data-beat="3"] .ds-beat[data-beat="3"],
      .ds-choreo .dealstage-sticky[data-beat="4"] .ds-beat[data-beat="4"] { opacity: 1; transform: none; pointer-events: auto; }
      .ds-choreo .dealstage-sticky[data-beat="0"] .ds-rail li:nth-child(1),
      .ds-choreo .dealstage-sticky[data-beat="1"] .ds-rail li:nth-child(2),
      .ds-choreo .dealstage-sticky[data-beat="2"] .ds-rail li:nth-child(3),
      .ds-choreo .dealstage-sticky[data-beat="3"] .ds-rail li:nth-child(4),
      .ds-choreo .dealstage-sticky[data-beat="4"] .ds-rail li:nth-child(5) { background: #c5985e; }
    }
    /* wide: two-column layout (copy | map) */
    @media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
      .ds-choreo .dealstage-grid { grid-template-columns: 0.84fr 1.16fr; gap: 56px; }
    }
    /* mobile cinematic: map on top, active beat below, both inside the pin */
    @media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
      /* 160vh, not 360. Four beats over 160vh is a fast swipe - which is
         how a phone gets read - and it puts the first hard figure roughly two
         screens closer. At 360vh a visitor who scanned the QR at a stand left
         before seeing a number. */
      .ds-choreo .dealstage-track { height: 160vh; }
      .ds-choreo .dealstage-sticky { padding: 14px 16px; }
      .ds-choreo .dealstage-grid { gap: 10px; width: 100%; align-items: center; }
      .ds-choreo .ds-scene { order: -1; }
      /* mobile: clip to the map's own edges (no visible frame) so the zoom
         can't sprawl over the copy below; edge-to-edge reads as a map, not a box.
         Map kept compact so map + active beat fit one screen (no clipped text). */
      .ds-choreo .ds-scene svg.dsmap { max-width: 88vw; max-height: 37svh; overflow: hidden; }
      .ds-choreo .ds-eyebrow { margin: 0 0 8px; text-align: center; }
      .ds-choreo .ds-copy { min-height: 0; text-align: center; }
      .ds-choreo .ds-beat h3 { font-size: 1.3rem; margin: 2px 0 8px; }
      .ds-choreo .ds-beat p { font-size: 0.9rem; line-height: 1.5; margin: 0 auto 12px; }
      .ds-choreo .ds-stat { margin: 0 auto; }
      .ds-choreo .ds-rail { justify-content: center; margin-top: 12px; }
      /* perf: SVG glow filters re-render each camera frame; drop them on mobile */
      .ds-choreo .dsm-src, .ds-choreo .dsm-hub, .ds-choreo .dsm-feed-flow, .ds-choreo .dsm-branch-flow { filter: none; }
    }

    /* reduced motion: freeze the scene, show it lit and still */
    @media (prefers-reduced-motion: reduce) {
      .ds-path, .ds-ring-outer, .ds-ring-pulse, .ds-live { animation: none !important; }
      .ds-heat { opacity: 0.8; }
      .ds-back { opacity: 0.5; }
      .ds-ring-pulse { opacity: 0; }
      .ds-evidence { opacity: 1; }
    }

    /* ── Social proof: trusted-by logos + a pilot quote. The whole section
       stays hidden until window.CELEMBI_PROOF holds real content - never a
       placeholder. Populate it the day a pilot/partner is real. ─────────── */
    .proof { background: #0b1622; border-top: 1px solid rgba(176,192,208,0.06); padding: 56px 24px; }
    .proof .container { max-width: 980px; margin: 0 auto; text-align: center; }
    .proof-kicker { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: #8aa0b4; margin: 0 0 28px; }
    .proof-logos { display: flex; flex-wrap: wrap; gap: 36px; align-items: center; justify-content: center; }
    .proof-partners { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }
    .proof-partner-chip {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 10px 18px; border-radius: 999px;
      border: 1px solid rgba(176,192,208,0.18); background: rgba(176,192,208,0.05);
      color: #c8d6e2; font-size: 0.88rem; text-decoration: none;
      transition: border-color 0.2s ease, background 0.2s ease;
    }
    .proof-partner-chip:hover { border-color: rgba(214,167,86,0.5); background: rgba(214,167,86,0.08); }
    .proof-partner-chip img { height: 26px; width: auto; display: block; }
    .proof-logo { height: 34px; width: auto; opacity: 0.72; filter: grayscale(1) brightness(1.7); transition: opacity .2s ease; }
    .proof-logo:hover { opacity: 1; }
    .proof-quote { margin: 36px auto 0; max-width: 760px; }
    .proof-quote blockquote { font-size: 1.25rem; line-height: 1.5; color: #e6edf4; font-weight: 500; margin: 0 0 14px; }
    .proof-quote figcaption { font-size: 0.9rem; color: #8aa0b4; }

    /* ── Live market strip: real, anonymised liquidity = the FOMO payoff.
       Hidden until JS confirms a genuinely active book. ─────────────────── */
    .livemarket { background: #0a1420; border-top: 1px solid rgba(176,192,208,0.06); padding: 60px 24px; }
    .livemarket[hidden] { display: none; }
    .lm-inner { max-width: 980px; margin: 0 auto; text-align: center; }
    .lm-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: #c5985e; font-weight: 700; margin: 0 0 28px; }
    .lm-pulse { width: 8px; height: 8px; border-radius: 50%; background: #34d399; animation: lm-pulse 2.2s ease-out infinite; }
    @keyframes lm-pulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,0.55); } 70% { box-shadow: 0 0 0 9px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
    @media (prefers-reduced-motion: reduce) { .lm-pulse { animation: none; } }
    .lm-stats { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
    .lm-stat { flex: 1 1 220px; max-width: 280px; background: rgba(13,27,42,0.55); border: 1px solid rgba(176,192,208,0.12); border-radius: 16px; padding: 28px 18px; }
    .lm-num { display: block; font-size: clamp(2rem, 5vw, 2.9rem); font-weight: 700; color: #fff; line-height: 1; letter-spacing: -0.02em; }
    .lm-stat:nth-child(3) .lm-num { color: #e0b87e; }
    .lm-lbl { display: block; margin-top: 10px; font-size: 0.86rem; color: #9fb3c6; }
    .lm-areas { margin: 22px 0 0; font-size: 0.82rem; color: #7c93a8; letter-spacing: 0.02em; }
    .lm-areas:empty { display: none; }
    .lm-cta { display: inline-block; margin-top: 22px; color: #e0b87e; font-weight: 600; text-decoration: none; font-size: 0.98rem; }
    .lm-cta:hover { color: #f0d49a; }
    @media (max-width: 600px) { .lm-stats { gap: 12px; } .lm-stat { flex-basis: 100%; padding: 22px 16px; } }

    /* ── Stats bar ─────────────────────────────────────────────────── */
    .stats-cta { text-align: center; padding: 0 24px 40px; }
    .stats-cta p { color: #94a3b8; font-size: 0.95rem; max-width: 560px; margin: 0 auto 16px; }
    .stats {
      display: flex;
      justify-content: center;
      gap: 48px;
      padding: 48px 24px;
      background: #111f30;
      flex-wrap: wrap;
    }

    .stat {
      text-align: center;
    }

    .stat .number {
      font-size: 2.4rem;
      font-weight: 700;
      /* Ink. A figure this size needs no colour to be found, and colour on a
         headline number reads as celebration rather than as a document. */
      color: var(--text-primary);
    }

    .stat .label {
      font-size: 0.9rem;
      color: #8899aa;
      margin-top: 4px;
    }

    .stat.highlight {
      background: rgba(197, 152, 94, 0.08);
      border-radius: 12px;
      padding: 16px 24px;
      border: 1px solid rgba(197, 152, 94, 0.25);
    }

    /* ── Sections ──────────────────────────────────────────────────── */
    section {
      padding: clamp(52px, 7vh, 84px) 24px;
    }

    /* ── How it works ──────────────────────────────────────────────── */
    .steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }

    .step {
      background: #111f30;
      border-radius: 12px;
      padding: 28px 24px;
      /* Left-aligned: eight centred lines are the slowest text on the page
         to read, and a step is read, not glanced at. The number keeps the
         row's rhythm. */
      text-align: left;
      /* No accent rule. It was on all four cards, so it marked none of
         them - the generated-card signature, and the visual rhythm of
         the whole middle of this page. */
    }

    .step .icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      margin-bottom: 18px;
      border: 1px solid rgba(197, 152, 94, 0.45);
      border-radius: 50%;
      color: #c5985e;
      font-size: 1.15rem;
      font-weight: 700;
      background: rgba(197, 152, 94, 0.08);
    }

    /* ── Cohort grid (Hvem kan handle?) ──────────────────────────── */
    .cohort-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      max-width: 1080px;
      margin: 0 auto;
    }

    .cohort {
      background: #111f30;
      border: 1px solid rgba(197, 152, 94, 0.18);
      border-radius: 12px;
      padding: 22px 18px;
      text-align: center;
      overflow-wrap: break-word;
      hyphens: auto;
      -webkit-hyphens: auto;
      transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .cohort:hover {
      border-color: rgba(197, 152, 94, 0.5);
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
      background: #142235;
    }

    .cohort.featured {
      background: linear-gradient(180deg, #111f30 0%, #1a2b40 100%);
      border-color: rgba(197, 152, 94, 0.45);
    }

    .cohort-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      margin-bottom: 14px;
      border-radius: 10px;
      background: rgba(197, 152, 94, 0.10);
      color: #e0b87e;
    }

    .cohort.featured .cohort-icon {
      background: rgba(110, 231, 183, 0.12);
      color: #6ee7b7;
    }

    .cohort-icon svg {
      width: 24px;
      height: 24px;
    }

    .cohort strong {
      display: block;
      color: #ffffff;
      font-size: 0.98rem;
      margin-bottom: 6px;
    }

    .cohort p {
      margin: 0;
      color: #a8b8cc;
      font-size: 0.84rem;
      line-height: 1.55;
    }

    @media (max-width: 980px) {
      .cohort-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 640px) {
      .cohort-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    /* ── Human band - real-world surplus-heat photo ──────────────────── */
    .photo-band {
      position: relative;
      padding: clamp(64px, 13vh, 132px) 24px;
      /* The photo arrives when the band is a screen away (is-near, set by the
         observer above the band): the 221 KB jpg was loading before the fonts
         on a phone, for a section six screens down (Celembi-e15.4). */
      background:
        linear-gradient(90deg, rgba(8, 14, 24, 0.94) 0%, rgba(8, 14, 24, 0.74) 42%, rgba(8, 14, 24, 0.34) 100%),
        #0a1420;
      background-position: center 28%;
      background-size: cover;
      background-repeat: no-repeat;
      border-top: 1px solid #16243a;
      border-bottom: 1px solid #16243a;
    }
    .photo-band.is-near {
      background-image:
        linear-gradient(90deg, rgba(8, 14, 24, 0.94) 0%, rgba(8, 14, 24, 0.74) 42%, rgba(8, 14, 24, 0.34) 100%),
        url('../img/band-roergrav.jpg');
      background-image:
        linear-gradient(90deg, rgba(8, 14, 24, 0.94) 0%, rgba(8, 14, 24, 0.74) 42%, rgba(8, 14, 24, 0.34) 100%),
        image-set(url('../img/band-roergrav.avif') type('image/avif'), url('../img/band-roergrav.webp') type('image/webp'), url('../img/band-roergrav.jpg') type('image/jpeg'));
    }
    .photo-band-inner { max-width: 1080px; margin: 0 auto; }
    .photo-band .kicker {
      color: #e0b87e;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      font-size: 0.76rem;
      font-weight: 700;
      margin-bottom: 12px;
    }
    .photo-band h2 {
      color: #fff;
      font-size: clamp(1.5rem, 3.6vw, 2.3rem);
      line-height: 1.15;
      max-width: 540px;
      margin-bottom: 14px;
      text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
    }
    .photo-band p.lead {
      color: #d4e0ec;
      max-width: 500px;
      margin: 0;
      text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
    }
    @media (max-width: 640px) {
      .photo-band { background-position: 72% 26%; }
      .photo-band.is-near {
        background-image:
          linear-gradient(180deg, rgba(8, 14, 24, 0.74) 0%, rgba(8, 14, 24, 0.88) 100%),
          url('../img/band-roergrav.jpg');
        background-image:
          linear-gradient(180deg, rgba(8, 14, 24, 0.74) 0%, rgba(8, 14, 24, 0.88) 100%),
          image-set(url('../img/band-roergrav.avif') type('image/avif'), url('../img/band-roergrav.webp') type('image/webp'), url('../img/band-roergrav.jpg') type('image/jpeg'));
      }
    }

    /* ── Benefits ──────────────────────────────────────────────────── */
    .benefits-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }

    .benefit {
      background: #111f30;
      border-radius: 12px;
      padding: 28px;
      /* Same rule, same reason: on every card, so on none. */
    }

    .benefit h3 {
      color: #ffffff;
      font-size: 1.1rem;
      margin-bottom: 10px;
    }

    .benefit p {
      color: #94a3b8;
      font-size: 1rem;
      line-height: 1.7;
    }

    .panel {
      background: #111f30;
      border: 1px solid #1f3246;
      border-radius: 16px;
      padding: 32px;
    }

    .panel strong {
      color: #e0b87e;
    }

    .panel-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }

    .flow-list {
      list-style: none;
      display: grid;
      gap: 14px;
    }

    .flow-list li {
      padding: 14px 16px;
      background: #0a1420;
      /* Same rule, same reason: on every card, so on none. */
      border-radius: 6px;
    }

    /* An integrator wants to see the call, not read about it. Monospace,
       left-aligned, scrollable on a phone - never wider than the page. */
    .integration-how { max-width: 760px; margin: 36px auto 0; }
    .integration-how h3 { color: var(--text-primary); font-size: 1.05rem; margin-bottom: 8px; }
    .integration-how > p { color: var(--text-muted); line-height: 1.65; margin-bottom: 18px; }
    .code-sample {
      background: var(--bg-sunken);
      border: 1px solid var(--border-hair);
      border-radius: var(--r-control);
      padding: 16px 18px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin: 0 0 18px;
    }
    .code-sample code {
      font-family: 'Consolas', 'Monaco', monospace;
      font-size: 0.86rem;
      line-height: 1.6;
      color: var(--text-body);
      white-space: pre;
    }
    .integration-facts { list-style: none; padding: 0; margin: 0; }
    .integration-facts li {
      color: var(--text-muted);
      font-size: 0.94rem;
      line-height: 1.65;
      padding: 9px 0;
      border-top: 1px solid rgba(176, 192, 208, 0.10);
    }
    .integration-facts strong { color: var(--text-primary); font-weight: 600; }
    @media (max-width: 640px) { .code-sample code { font-size: 0.78rem; } }

    .note-box {
      margin-top: 24px;
      padding: 18px 20px;
      border: 1px solid rgba(197, 152, 94, 0.28);
      background: rgba(197, 152, 94, 0.07);
      border-radius: 10px;
      color: #b0c0d0;
      line-height: 1.7;
    }

    .evidence-list {
      list-style: none;
      display: grid;
      gap: 12px;
      margin-top: 16px;
    }

    .evidence-list li {
      padding: 12px 14px;
      border: 1px solid #1f3246;
      background: #0a1420;
      border-radius: 8px;
      color: #b0c0d0;
    }

    .evidence-list strong {
      color: #e0b87e;
    }

    /* ── Compliance ────────────────────────────────────────────────── */
    .compliance {
      /* Four chips are wider than the 980 px column allows on one row, and
         three plus one orphan reads as an accident. Two by two, centred. */
      display: grid;
      grid-template-columns: repeat(2, max-content);
      justify-content: center;
      gap: 12px 24px;
      margin-top: 32px;
    }
    @media (max-width: 640px) { .compliance { grid-template-columns: 1fr; } }

    .badge {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #111f30;
      padding: 14px 22px;
      border-radius: 8px;
      font-size: 0.95rem;
      color: #b0bec5;
    }

    .badge .icon {
      color: #c5985e;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.06em;
    }

    /* ── Footer ────────────────────────────────────────────────────── */
    footer {
      text-align: center;
      padding: 40px 24px;
      border-top: 1px solid #1b2838;
      color: #7f8fa1;
      font-size: 0.85rem;
    }

    /* ── Contact section ───────────────────────────────────────────── */
    .contact-card {
      background: #111f30;
      border-radius: 16px;
      padding: 48px;
      text-align: left;
      max-width: 820px;
      margin: 0 auto;
    }

    .contact-card p {
      color: #b0bec5;
      margin-bottom: 8px;
      font-size: 1.05rem;
    }

    .contact-card .contact-intro {
      text-align: center;
      max-width: 680px;
      margin: 0 auto 10px;
    }

    .contact-card .founder-row {
      display: grid;
      grid-template-columns: 76px 1fr;
      gap: 18px;
      align-items: center;
      margin: 28px 0 24px;
      padding: 0 0 24px;
      border-bottom: 1px solid #1f3246;
    }

    .contact-card .founder-avatar {
      width: 76px;
      height: 76px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #c5985e;
      color: #0d1b2a;
      font-weight: 800;
      font-size: 1.25rem;
      letter-spacing: 0;
      overflow: hidden;
    }

    .contact-card .founder-avatar img {
      width: 100%;
      aspect-ratio: 1 / 1;
      height: auto;
      border-radius: 50%;
      object-fit: cover;
      display: block;
    }

    .contact-card .name {
      color: #ffffff;
      font-size: 1.22rem;
      font-weight: 700;
      margin-bottom: 2px;
    }

    .contact-card .title-role {
      color: #c5985e;
      font-size: 0.95rem;
      margin-bottom: 16px;
    }

    .contact-card .founder-context {
      color: #94a3b8;
      font-size: 0.96rem;
      line-height: 1.65;
      margin-bottom: 0;
    }

    .contact-links {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 0 22px;
    }

    .contact-link {
      display: block;
      padding: 12px 0;
      border-top: 1px solid #1f3246;
    }

    .contact-link span {
      display: block;
      color: #7f90a3;
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0;
      margin-bottom: 3px;
    }

    .contact-link strong {
      color: #e0b87e;
      font-size: 0.98rem;
      font-weight: 700;
    }

    .contact-meta {
      color: #7f90a3;
      font-size: 0.88rem;
      text-align: center;
      margin-top: 20px;
    }

    /* ── Pricing block ─────────────────────────────────────────────── */
    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 24px;
    }

    .price-card {
      background: #111f30;
      border: 1px solid #1f3246;
      border-radius: 14px;
      padding: 32px 28px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .price-card.featured {
      border-color: rgba(197, 152, 94, 0.55);
      box-shadow: 0 0 0 1px rgba(197, 152, 94, 0.15) inset;
    }

    .price-card .price-label {
      color: #c5985e;
      font-size: 0.78rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 700;
    }

    .price-card .price-amount {
      color: #fff;
      font-size: 2rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .price-card .price-amount small {
      font-size: 0.95rem;
      color: #8899aa;
      font-weight: 500;
      margin-left: 6px;
    }

    .price-card .price-summary {
      color: #b0c0d0;
      font-size: 0.95rem;
      line-height: 1.6;
    }

    .price-card ul {
      list-style: none;
      padding: 0;
      display: grid;
      gap: 8px;
      margin-top: 4px;
    }

    .price-card li {
      color: #94a3b8;
      font-size: 0.94rem;
      padding-left: 22px;
      position: relative;
      line-height: 1.55;
    }

    /* Not green. A tick on a feature list is not a settled state, and green
       ticks on a pricing table is the most-copied element on the web - the
       first thing a prospect's eye lands on in this section. A hairline mark
       does the same job without claiming anything. */
    .price-card li::before {
      content: "";
      width: 10px; height: 10px;
      border-left: 1.5px solid var(--text-dim);
      border-bottom: 1.5px solid var(--text-dim);
      transform: rotate(-45deg) translate(2px, -2px);
      position: absolute;
      left: 0;
      top: 5px;
    }

    .price-foot {
      margin-top: 28px;
      text-align: center;
      color: #7f90a3;
      font-size: 0.88rem;
    }

    /* ── Trust strip ───────────────────────────────────────────────── */
    /* No tinted box and no coloured labels. Six facts in a rounded green
       container, all the same size, is a generated-layout signature - and
       green here meant nothing: these are security properties, not settled
       states. The claim that decides whether a utility's IT department will
       talk to us leads on its own; the rest is a definition list, which is
       the form a technical document uses. */
    .trust-lead {
      margin-top: 28px;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(176, 192, 208, 0.16);
    }
    .trust-lead strong {
      display: block;
      color: #ffffff;
      font-size: 1.16rem;
      font-weight: 600;
      line-height: 1.35;
      letter-spacing: -0.01em;
      margin-bottom: 6px;
    }
    .trust-lead span { color: #b0c0d0; font-size: 0.95rem; line-height: 1.6; }

    .trust-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0 32px;
      margin-top: 4px;
    }

    /* Balanced content grids: explicit columns collapse cleanly to fewer
       columns, never leaving an orphan card in the last row. */
    @media (max-width: 1024px) {
      .steps { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 900px) {
      .trust-strip { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
      .steps,
      .benefits-grid,
      .panel-grid,
      .trust-strip { grid-template-columns: 1fr; }
    }

    .trust-strip .trust-item {
      color: #b0c0d0;
      font-size: 0.92rem;
      line-height: 1.55;
      padding: 14px 0;
      border-bottom: 1px solid rgba(176, 192, 208, 0.10);
    }

    /* The term carries the weight; the definition carries the detail. No
       colour, because none of these six is a different kind of thing from
       the others. */
    .trust-strip .trust-item strong {
      display: block;
      color: #ffffff;
      font-size: 0.95rem;
      font-weight: 600;
      margin-bottom: 2px;
    }

    /* ── Responsive ────────────────────────────────────────────────── */
    @media (max-width: 640px) {
      .stats {
        gap: 24px;
      }

      section {
        padding: 56px 16px;
      }

      .contact-card {
        padding: 30px 20px;
      }

      .contact-card .founder-row {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
        padding-bottom: 22px;
      }
    }

    /* ── FAQ ─────────────────────────────────────────────────────────── */
    .faq-list { max-width: 760px; margin: 0 auto; }
    .faq-list details {
      border: 1px solid #1f3246;
      border-radius: 12px;
      background: #111f30;
      margin-bottom: 12px;
      overflow: hidden;
    }
    .faq-list summary {
      cursor: pointer;
      list-style: none;
      padding: 18px 22px;
      font-weight: 600;
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
    }
    .faq-list summary::-webkit-details-marker { display: none; }
    .faq-list summary::after {
      content: "+";
      color: #c5985e;
      font-size: 1.3rem;
      font-weight: 400;
      flex-shrink: 0;
      transition: transform 0.2s;
    }
    .faq-list details[open] summary::after { transform: rotate(45deg); }
    .faq-list details p {
      margin: 0;
      padding: 0 22px 18px;
      color: #b0c0d0;
      line-height: 1.65;
    }
    .faq-list details a { color: #c5985e; }

    /* Anchor navigation lands below the sticky nav (the status strip scrolls
       away) - "Sikkerhed" in the nav now shows the heading, not hidden under it. */
    section[id], [id^="saadan"], #faq, #kontakt, #priser {
      scroll-margin-top: 72px;
    }