/* =========================================================================
   REGELVARSEL — LOCKED STYLESHEET v1.7
   Derived from the approved change-page mockup. Serve from Workers/R2 with
   a long cache and a hashed filename.

   v1.7 (2026-08-20) — ONE new component: .velg, the subscription picker.
   Added by explicit decision, not improvisation. Signup takes one field and
   then guesses what you follow; the confirmation mail promised "regelverket du
   følger" with nowhere to see or change it. That page needs a checkbox list,
   and the file had no form control other than .signup's single input.
   No new colours, no new type sizes: it reuses --tint, --line, --navy and
   the existing 17px/15px/13px steps, and §3's 48px tap target.

   v1.1 (2026-08-15) — six corrections, each restoring an invariant this file
   already declared. No new colours, type sizes or components. Rationale for
   each is in idea/00-README.md's decision log.
     1. .btn:hover in the dark block was a BARE hover (broke Invariant 4).
     2. .cards--list lost its border-top on desktop (broke Invariant 2).
     3. Duplicate focus-visible rule from the post-lock search block, removed.
     4. del{} used raw hex where tokens existed (broke Invariant 5).
     5. tap-highlight hardcoded navy, invisible in dark (broke Invariant 5).
     6. .btn-lg beat .btn only by source order (broke Invariants 1 and 2).
   Plus: @font-face for Inter, self-hosted — the family was named but never
   loaded, so the approved type scale fell back to Roboto on most phones.

   v1.2 (2026-08-15) — owner decisions, logged in idea/00-README.md:
     7. .signup used align-items:flex-end, so the button stood 5px proud of the
        field. Now stretch, which ties both to one height.
     8. .nav .hdr-cta rendered 52px inside a 66px bar. Reduced to header chrome.
     9. .search-btn{margin-left:auto} collided with .nav{margin-left:auto} —
        INVARIANT 1, and it was called out in the spec before the markup existed.
        The auto margin now belongs to .nav alone.
    10. §16 search suggestions. Progressive enhancement, same-origin, no cookies.

   v1.3 (2026-08-15) — the nav bar between 760px and 1000px:
    11. The header showed all five items from 760px, which overflowed: at a
        763px viewport document.scrollWidth was 855px, so the whole PAGE
        scrolled sideways. Invisible at 393 and 1280 — the two widths anyone
        checks. The CTA now waits for 1000px (§15b).
    12. §15c .mobnav — below 760px the phone had no route to the indexes at
        all, only a logo and a search button. A scrolling row, same mechanism
        as .crumbs. No drawer, no overlay, no JavaScript.
   v1.5 (2026-08-15):
    14. .nav a beat .btn on specificity, so the header CTA rendered white on
        gul — 1.54:1 contrast, against AA's 4.5:1. Now navy, scoped (0,2,0).

   v1.6 (2026-08-15):
    15. .visuelt-skjult — a named utility for text that is read aloud but not
        shown. The technique was already inline on .signup label; external
        links need it too, to say they open in a new tab.

    13. .search-btn regained margin-left:auto, scoped to max-width:759px where
        .nav is empty, so it can never collide with .nav's own auto margin.

   MOBILE FIRST. Desktop is the enhancement. All traffic arrives from Google
   on a phone, so the phone layout is the design, not a fallback.

   ─────────────────────────────────────────────────────────────────────────
   THREE INVARIANTS. Every visual bug in this build so far came from
   breaking one of them. Do not break them.

   1. ONE PROPERTY, ONE OWNER.
      Never let two classes on the same element set the same property.
      `.wrap` owns padding-inline. Bands own padding-block. They are
      different properties, so they can never cancel out.
      (Broke once: `<div class="wrap hero">` — .hero's padding shorthand
      wiped .wrap's side padding and the hero sat flush to the screen edge.)

   2. SCOPE, DON'T RELY ON SOURCE ORDER.
      Equal specificity means the later rule wins, which makes layout depend
      on where you happened to paste something. Scope instead.
      (Broke once: `.hdr-cta{display:none}` was beaten by
      `.btn{display:inline-block}` 60 lines later, so the mobile header CTA
      never hid. Now `.nav .hdr-cta`.)

   3. GLOBAL OR EXPLICIT, NEVER ACCIDENTALLY IN BETWEEN.
      Typography is global on purpose. Scoping it to a container silently
      drops any section outside that container to browser defaults.
      (Broke once: `main h2` — the FAQ and related-changes sections live
      outside <main> and rendered at default heading size and margin.)
   ========================================================================= */


/* ---------- 1. TOKENS ---------------------------------------------------
   Three colours. Everything else is navy at reduced strength.
   Yellow NEVER carries text on white — it fails contrast. It only ever
   appears as a fill behind navy, which is also what makes it read as a
   highlighter on changed statutory text.                                  */

:root{
  /* The UA must know we handle both. Without this declaration a WebView
     applies its own forced-dark pass, which darkens backgrounds but leaves
     --navy text untouched — near-black ink on a near-black ground. */
  color-scheme: light dark;

  /* BRAND — fixed in both themes, never remapped.                        */
  --navy:#0E1C2F;
  --gul:#FFC93C;
  --hvit:#FFFFFF;

  /* SEMANTIC — remapped for dark. Use these, never the brand tokens
     directly, except where a value must stay fixed (navy text on gul).   */
  --ink:#0E1C2F;         /* body text                                     */
  --ground:#FFFFFF;      /* page background                               */
  --surface:#FFFFFF;     /* cards, fact cells                             */
  --tint:#F2F4F6;        /* breadcrumb, quote, footer, source note        */
  --line:#E2E5E9;        /* hairlines                                     */
  --muted:#4A5666;       /* secondary text, labels, meta                  */
  --band:#0E1C2F;        /* header, CTA, sticky — the dark bands          */
  --band-ink:#FFFFFF;    /* text on a band                                */
  --band-muted:#C9D1DB;  /* secondary text on a band                      */
  --band-line:#35415A;   /* borders on a band                             */
  --placeholder:#6B7684; /* fixed: sits on a white field in both themes   */
  --tap:rgba(14,28,47,.15);  /* --ink at 15%: the tap flash. Remapped for
                                dark, or it paints navy on navy.          */

  --sans:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --gutter:16px;
  --measure:720px;
}

/* Inter, self-hosted. NEVER load this from Google Fonts — a third-party
   font request breaks the cookieless, zero-third-party position that the
   whole public site depends on (see 05-design-system.md §9).
   Subset to latin + æøå. Served same-origin from the Worker, immutable,
   and <link rel="preload" as="font" crossorigin> in the document head. */
@font-face{
  font-family:"Inter";
  src:url("/fonts/inter-subset.woff2") format("woff2");
  font-weight:500 800;          /* variable: no weight below 500 exists   */
  font-style:normal;
  font-display:swap;            /* system fallback paints first, always   */
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2212;
}

/* DARK THEME — the page becomes the header.
   Same three brand colours, reassigned. Bands go a step darker than the
   ground so the header, CTA and sticky bar still separate from the page. */
@media (prefers-color-scheme:dark){
  :root{
    --ink:#E8ECF2;
    --ground:#0E1C2F;
    --surface:#17273D;
    --tint:#16243A;
    --line:#2A3B54;
    --muted:#9AA9BC;
    --band:#081524;
    --band-ink:#FFFFFF;
    --band-muted:#9AA9BC;
    --band-line:#35415A;
    --tap:rgba(232,236,242,.18);  /* --ink at 18%, same principle          */
  }
}


/* ---------- 2. BASE ----------------------------------------------------- */

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}

body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans);
  font-size:17px; line-height:1.6;
  padding-bottom:calc(88px + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}

a{color:var(--ink); text-decoration-thickness:2px; text-underline-offset:3px}
:focus-visible{outline:3px solid var(--ink); outline-offset:2px}
/* On the dark bands, ink-coloured focus is invisible in light mode. */
header :focus-visible,.cta :focus-visible,.sticky :focus-visible{outline-color:var(--gul)}
a,.btn,button,summary{-webkit-tap-highlight-color:var(--tap)}


/* ---------- 3. LAYOUT — see INVARIANT 1 ---------------------------------
   .wrap  = horizontal gutters only (padding-inline)
   bands  = vertical rhythm only   (padding-block)
   Give every full-bleed band its own element wrapping a .wrap child.      */

.wrap{max-width:var(--measure); margin:0 auto; padding-inline:var(--gutter)}

/* --measure is a READING measure — it exists so body copy stays legible, and it
   has no business constraining chrome. Once the header gained a search field it
   was carrying five items inside 720px and the CTA wrapped to three lines.
   Compound selector so it beats .wrap by specificity, not source order
   (INVARIANT 2), and it sets the same property .wrap owns rather than adding a
   competing one (INVARIANT 1). */
.wrap.wrap--bred{max-width:1100px}


/* ---------- 4. TYPOGRAPHY — global, see INVARIANT 3 --------------------- */

h1{font-size:27px; line-height:1.2;  letter-spacing:-.025em; margin:0 0 12px; font-weight:800}
h2{font-size:22px; line-height:1.25; letter-spacing:-.02em;  margin:34px 0 12px; font-weight:800}
h3{font-size:18px; line-height:1.3;  margin:22px 0 8px; font-weight:700}
p{margin:0 0 16px}


/* ---------- 5. HEADER --------------------------------------------------- */

header{background:var(--band); color:var(--band-ink)}
/* height:auto, not a fixed 52px — the bar wraps to two rows on mobile, and a
   fixed height left the search row rendering OUTSIDE the navy band. min-height
   keeps the single-row case identical. */
.bar{display:flex; align-items:center; gap:10px; min-height:52px; padding-block:6px}
.logo{display:flex; align-items:center; gap:7px; text-decoration:none; color:var(--band-ink)}
.logo svg{display:block; flex:none}
.logo-txt{font-size:18px; font-weight:800; letter-spacing:-.03em}
.logo-txt em{font-style:normal; color:var(--gul)}
.nav{margin-left:auto; display:flex; align-items:center; gap:18px}
.nav a{color:var(--band-ink); font-size:15px; font-weight:600; text-decoration:none}

/* Desktop-only chrome. Scoped — see INVARIANT 2. */
/* Shown at every width now: on mobile they sit beside the wordmark on row one,
   with the search field on row two. */
.nav .navlink{display:inline}
.nav .hdr-cta{display:none}

/* The CTA keeps navy text on gul — see INVARIANT 2, and §2's hard rule that gul
   only ever sits behind navy.
   `.nav a{color:var(--band-ink)}` is (0,1,1) and was quietly beating
   `.btn{color:var(--navy)}` at (0,1,0), so the header CTA rendered WHITE on gul:
   a contrast ratio of 1.54:1 against WCAG AA's 4.5:1. Scoped at (0,2,0) it wins
   on specificity rather than on where it happens to sit in the file. */
.nav .hdr-cta{color:var(--navy)}


/* ---------- 6. BREADCRUMB ----------------------------------------------
   Scrolls horizontally rather than wrapping. Deep §-references make long
   trails and a wrapped breadcrumb costs a whole line above the H1.        */

.crumbs{background:var(--tint); border-bottom:1px solid var(--line); padding-block:8px; font-size:14px}
.crumbs ol{list-style:none; margin:0; padding:0; display:flex; gap:6px;
           white-space:nowrap; overflow-x:auto; scrollbar-width:none}
.crumbs ol::-webkit-scrollbar{display:none}
.crumbs li::after{content:"›"; margin-left:6px; color:var(--muted)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--muted)}


/* ---------- 7. HERO ----------------------------------------------------
   Job: H1 plus the one-sentence answer on the first screen.
   Do not restate the countdown in more than one of kicker / standfirst /
   facts. Each cell must carry information the others do not.              */

.hero{padding-block:20px 0}
.kicker{display:inline-block; background:var(--gul); color:var(--navy);
        font-size:12px; font-weight:800; padding:4px 9px; margin-bottom:12px;
        text-transform:uppercase; letter-spacing:.05em}
.standfirst{font-size:18px; line-height:1.55; margin:0 0 18px; font-weight:500}

/* One compact ROW, never stacked. Keep values short enough not to wrap. */
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
       background:var(--line); border:1px solid var(--line); margin:0 0 8px}
.fact{background:var(--surface); padding:9px 10px; min-width:0}
.fact dt{font-size:10px; font-weight:700; color:var(--muted);
         text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px}
.fact dd{margin:0; font-size:16px; font-weight:800; letter-spacing:-.02em; line-height:1.25}


/* ---------- 8. PROSE COMPONENTS ---------------------------------------- */

/* Statutory text with the amendment marked. The only place raw law appears. */
.quote{border-left:5px solid var(--gul); background:var(--tint);
       padding:14px 16px; margin:0 0 18px; font-size:17px; line-height:1.65}
.quote .lbl{display:block; font-size:11px; font-weight:800; text-transform:uppercase;
            letter-spacing:.06em; color:var(--muted); margin-bottom:6px}
del{background:var(--line); color:var(--muted); text-decoration:line-through; padding:1px 2px}
ins{background:var(--gul); color:var(--navy); text-decoration:none; font-weight:600; padding:1px 3px}

/* Numbered because these ARE a sequence with a deadline, not decoration. */
.steps{list-style:none; counter-reset:s; margin:0; padding:0}
.steps li{counter-increment:s; position:relative; padding:12px 0 12px 40px;
          border-top:1px solid var(--line)}
.steps li::before{content:counter(s); position:absolute; left:0; top:11px;
                  width:27px; height:27px; background:var(--ink); color:var(--ground);
                  font-weight:800; font-size:14px;
                  display:flex; align-items:center; justify-content:center}

/* roles_affected from the enrichment JSON */
.who{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px}
.who span{border:2px solid var(--ink); padding:3px 9px; font-weight:700; font-size:14px}

/* Attribution note. Subordinate to the FAQ above it — a tint block, not a
   bordered paragraph, so it does not stack a second rule under the list. */
.kilde{font-size:14px; line-height:1.55; color:var(--muted);
       background:var(--tint); padding:14px 16px; margin:18px 0 0}
.kilde a{color:var(--muted)}


/* ---------- 9. CONVERSION ----------------------------------------------
   Capture the address inline. Never send someone to a separate signup
   page: the whole product is an email address, so an extra navigation is
   an extra place to lose them.                                            */

.cta{background:var(--band); color:var(--band-ink); padding-block:26px; margin-block:34px 0}
.cta h2{color:var(--band-ink); margin:0 0 8px; font-size:22px; font-weight:800; line-height:1.25}
.cta p{font-size:17px; color:var(--band-muted); margin:0 0 18px}
.cta .free{font-size:14px; color:var(--band-muted); margin:12px 0 0; text-align:center}

.btn{display:inline-block; background:var(--gul); color:var(--navy);
     font-weight:800; font-size:17px; padding:13px 20px; border-radius:2px;
     text-decoration:none; border:3px solid var(--gul); line-height:1.3}
/* Compound selector, not a bare `.btn-lg` — see INVARIANT 2. Both classes
   sit on the same element and set display, font-size and padding, so the
   modifier must win by specificity (0,2,0 vs 0,1,0), never by being pasted
   later. That was exactly the .hdr-cta bug in the header comment. */
.btn.btn-lg{display:block; text-align:center; font-size:18px; padding:15px 20px}

.signup label{display:block; font-size:13px; font-weight:700; color:var(--band-muted);
              text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px}
.signup input{display:block; width:100%; font-family:inherit; font-size:17px;
              padding:14px; border:3px solid var(--hvit); border-radius:2px;
              background:var(--hvit); color:var(--navy); margin-bottom:10px; min-height:52px}
.signup input::placeholder{color:var(--placeholder)}
.signup input:focus-visible{outline:3px solid var(--gul); outline-offset:2px}
.signup button{width:100%; cursor:pointer; font-family:inherit}


/* ---------- 10. FAQ ----------------------------------------------------
   Native <details>: works with JavaScript disabled. All closed by default.
   The schema carries the answers to Google regardless of open state.      */

.faq{border-top:3px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; padding:14px 34px 14px 0; font-size:17px; font-weight:700;
             list-style:none; position:relative; line-height:1.4; min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:4px; top:11px;
                    font-size:26px; font-weight:400; color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 0 16px}


/* ---------- 11. RELATED CHANGES ----------------------------------------
   The internal-link graph. Rows on mobile with a chevron so they read as
   tappable; bordered cards on desktop.                                    */

.cards{display:grid; grid-template-columns:1fr; gap:0; border-top:2px solid var(--ink)}
.card{display:block; position:relative; border-bottom:1px solid var(--line);
      padding:14px 30px 14px 0; text-decoration:none; color:var(--ink); min-height:56px}
.card::after{content:"›"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
             font-size:26px; line-height:1; color:var(--muted)}
.card .c-reg{font-size:13px; font-weight:700; color:var(--muted); margin-bottom:2px}
.card .c-h{font-size:17px; font-weight:700; line-height:1.35; margin-bottom:3px}
.card .c-d{font-size:14px; color:var(--muted)}

/* Modifier: stay single-column on desktop. For chronological lists, where a
   two-column grid makes reading order ambiguous.

   Compound selector, and no !important — see INVARIANT 2. `.cards--list`
   alone ties with `.cards` at (0,1,0), so the desktop `.cards` rule 130
   lines below silently won `border-top` and the list's top rule vanished
   above 760px. Two of the three properties were force-won with !important
   and the third was forgotten. `.cards.cards--list` at (0,2,0) beats
   `.cards` everywhere, in every media query, whatever the source order. */
.cards.cards--list{grid-template-columns:1fr; gap:0; border-top:2px solid var(--ink)}
.cards--list .card{border:0; border-bottom:1px solid var(--line); padding:14px 30px 14px 0}
.cards--list .card::after{content:"›"}


/* ---------- 11b. SEARCH -------------------------------------------------
   Added deliberately after the v1.0 lock. Plain <form method="get"> so it
   works with JavaScript disabled. Mobile shows a 48px button linking to a
   real /sok page rather than an overlay; desktop shows the field inline.
   Results reuse .cards--list — there is no separate result component.     */

/* The auto margin is scoped to the mobile query in §15c, NOT set here — see
   INVARIANT 1. .nav already owns margin-left:auto, and when this component was
   finally given markup the two collided exactly as the spec predicted. Scoping
   it to widths where .nav is empty means they can never both apply. */
/* RETIRED v1.4 — the mobile header carries a real search field instead. Kept as
   a no-op so stray markup cannot render a stranded button. Removed from the §4
   inventory; see the decision log. */
.search-btn{display:none}

/* MOBILE: the bar wraps and the field takes the whole second row.

   It used to be a 48px icon button linking to /bygg/sok. On a phone that reads
   as an afterthought parked beside the wordmark — and search is how people
   navigate this site, since they arrive from Google on one deep paragraph. A
   real field is the primary affordance, so it gets a real row.

   flex-wrap does it with no duplicated markup: one <form>, row two on mobile,
   inline in the bar on desktop. */
.bar{flex-wrap:wrap; row-gap:8px}

/* One white box containing field and submit, at EVERY width. This lived in the
   desktop block only, so mobile rendered a bordered white input next to a
   detached navy button — two controls where there is one. */
.bar .search{
  flex:1 0 100%; order:3;
  display:flex; align-items:center; gap:0;
  background:var(--hvit); border:2px solid var(--hvit); border-radius:2px;
}
.bar .search input{
  flex:1 1 auto; min-width:0; border:0; border-radius:0; background:transparent;
  color:var(--navy);
  min-height:44px;               /* + the box's own padding clears 48px      */
  font-size:16px;                /* below 16px iOS zooms the page on focus   */
  padding:9px 12px;
}
.bar .search input::placeholder{color:var(--placeholder)}
.bar .search input:focus-visible{outline:none}
.bar .search:focus-within{outline:3px solid var(--gul); outline-offset:2px}
.bar .search button{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; min-height:0; padding:0;
  border:0; border-radius:2px; background:transparent; color:var(--navy);
}
.bar .search button svg{display:block}
/* margin:0 is load-bearing. <form> carries the UA stylesheet's
   margin-block-end:1em — 19px at desktop body size — and .bar centres the MARGIN
   box, so the field sat 9.5px above every other item in the header while
   measuring as perfectly centred itself. Every other element in the bar reported
   centerOff 0; only this one was off. */
.search{display:flex; gap:8px; margin:0}
.search input{
  flex:1 1 auto; min-width:0; font-family:inherit; font-size:17px;
  padding:12px 14px; min-height:48px; border:3px solid var(--line);
  border-radius:2px; background:var(--surface); color:var(--ink);
}
.search input::placeholder{color:var(--muted)}
.search input:focus-visible{outline:3px solid var(--ink); outline-offset:2px}
/* The band focus-colour rule is NOT repeated here. It is declared once in
   §2 BASE and applies to .search inside the header already. This block
   shipped with a verbatim copy of it — dead weight, and the start of
   exactly the drift INVARIANT 2 warns about. */
.search button{
  flex:none; cursor:pointer; font-family:inherit; font-size:16px; font-weight:800;
  padding:12px 18px; min-height:48px; border:3px solid var(--ink);
  background:var(--ink); color:var(--ground); border-radius:2px;
}

/* Match highlight — same treatment as an inserted amendment. */
mark{background:var(--gul); color:var(--navy); padding:1px 2px}

/* Visually hidden, still read aloud. The same technique the desktop .signup
   label already used inline; named here so it stops being copy-pasted. */
.visuelt-skjult{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}


/* ---------- 12. FOOTER -------------------------------------------------- */

footer{background:var(--tint); border-top:1px solid var(--line);
       margin-top:34px; padding-block:26px 22px; font-size:16px}
footer h3{font-size:13px; text-transform:uppercase; letter-spacing:.06em; margin:0 0 9px}
.fgrid{display:grid; grid-template-columns:1fr; gap:22px}
.flist{list-style:none; margin:0; padding:0}
.flist li{margin-bottom:7px}
.flist a{color:var(--muted)}
.legal{border-top:1px solid var(--line); margin-top:22px; padding-top:16px;
       font-size:14px; color:var(--muted)}


/* ---------- 13. STICKY CTA (mobile only) -------------------------------
   Replaces a header button. Costs ~60px instead of ~240px and stays
   reachable through a long page. Hidden entirely on desktop.              */

.sticky{position:fixed; left:0; right:0; bottom:0; z-index:20;
        background:var(--band); border-top:3px solid var(--gul);
        padding:9px 16px calc(9px + env(safe-area-inset-bottom));
        display:flex; align-items:center; gap:12px}
.sticky-txt{color:var(--band-ink); font-size:13px; line-height:1.3; font-weight:600; min-width:0}
.sticky .btn{margin-left:auto; flex:none; font-size:15px; padding:11px 16px}


/* ---------- 14. HOVER GUARD --------------------------------------------
   iOS keeps :hover after a tap. Without this the primary button turns
   white and stays white once touched. Never write a bare :hover rule.     */

@media (hover:hover) and (pointer:fine){
  a:hover{text-decoration-color:var(--gul)}
  .btn:hover{background:var(--band-ink); border-color:var(--band-ink)}
  .card:hover{background:var(--tint); border-color:var(--navy)}
}


/* ---------- 14b. DARK THEME COMPONENT OVERRIDES -------------------------
   Only the cases where swapping a token is not enough.                    */

@media (prefers-color-scheme:dark){
  /* Struck-out text needs to stay legible against a dark tint. */
  del{background:var(--line); color:var(--muted)}

  /* A navy step marker disappears on a navy ground. Gul fill keeps the
     numbering visible and stays inside the three-colour palette. */
  .steps li::before{background:var(--gul); color:var(--navy)}

  /* Search submit: an ink-coloured fill would be near-white with a
     near-white label. Match the primary button instead. */
  .search button{background:var(--gul); color:var(--navy); border-color:var(--gul)}

  /* Keep the signup field white — it sits inside a band in both themes. */
  .signup input{background:var(--hvit); color:var(--navy)}
}

/* The white hover fill is far too loud against a dark page.

   This lives in its own compound query, NOT in the dark block above — see
   INVARIANT 4. Written there it was a bare :hover, so on an iOS phone in
   dark mode the primary CTA kept the white border after a tap and never
   let go. That is the precise failure the guard in §14 exists to prevent,
   reintroduced inside the block written to fix dark mode. */
@media (hover:hover) and (pointer:fine) and (prefers-color-scheme:dark){
  .btn:hover{background:var(--gul); border-color:var(--hvit)}
}

/* ---------- 15. DESKTOP ENHANCEMENT ------------------------------------- */

@media (min-width:760px){
  body{font-size:19px; line-height:1.7; padding-bottom:0}
  .wrap{padding-inline:24px}

  .bar{height:66px; gap:16px; flex-wrap:nowrap; row-gap:0}
  .logo-txt{font-size:21px}
  .nav .navlink{display:inline}
  .sticky{display:none}

  .crumbs{font-size:15px; padding-block:12px}
  .hero{padding-block:34px 0}
  .kicker{font-size:14px; padding:5px 12px; margin-bottom:16px}
  h1{font-size:40px; line-height:1.18; margin-bottom:16px}
  h2{font-size:28px; margin:48px 0 14px}
  h3{font-size:21px}
  .standfirst{font-size:21px; margin-bottom:24px}

  .fact{padding:15px 16px}
  .fact dt{font-size:13px}
  .fact dd{font-size:20px}

  .quote{padding:20px 22px; font-size:18px}
  .steps li{padding:15px 0 15px 50px}
  .steps li::before{width:33px; height:33px; font-size:16px; top:13px}

  .cta{padding-block:36px}
  .cta h2{font-size:29px}
  .cta .free{text-align:left}
  .btn-lg{display:inline-block; padding:17px 32px; font-size:19px}
  /* stretch, not flex-end: the field and the button must be the SAME height, not
     merely share a baseline. With flex-end the button's larger padding made it
     59px against the field's 54px, so it stood 5px proud at the top. Stretch ties
     the two to one height with no magic number to drift. */
  .signup{display:flex; align-items:stretch; gap:10px; flex-wrap:wrap}
  .signup label{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
  .signup input{flex:1 1 260px; margin-bottom:0}
  /* .signup button.btn (0,2,1) beats .btn.btn-lg (0,2,0) — scoped, not source
     order. Zero block padding lets stretch set the height; flex centres the label
     inside it, which display:block cannot do. */
  .signup button.btn{width:auto; flex:none; display:flex; align-items:center;
                     justify-content:center; padding-block:0}

  .faq summary{font-size:19px; padding:19px 40px 19px 0}

  .cards{grid-template-columns:1fr 1fr; gap:14px; border-top:none}
  .card{border:2px solid var(--line); padding:17px; min-height:0}
  .card::after{content:none}

  .fgrid{grid-template-columns:1fr 1fr; gap:30px}

  /* Desktop only differs in where the box sits and how big it is; the box
     itself is styled once, above, for every width. */
  .bar .search{flex:1 1 auto; order:0; max-width:440px; margin-inline:24px}
  .bar .search input{min-height:40px; font-size:16px}
  .bar .search button{width:40px; height:40px}
}

/* ---------- 15b. WIDE DESKTOP ------------------------------------------
   The header CTA appears only once the bar can actually hold five items.

   It used to appear at 760px with everything else, and between 760 and ~1000px
   the bar overflowed: at a 763px viewport the document scrollWidth was 855px,
   so the whole PAGE scrolled sideways. That is the worst layout bug a
   mobile-first site can have, and it was invisible at both 393px and 1280px —
   the two widths anyone actually checks.

   Progressive reveal instead: search and nav links at 760, the CTA at 1000.
   Nothing is lost by holding it back — conversion at those widths is carried by
   the signup band, and below 760 by the sticky bar.                          */

@media (min-width:1000px){
  /* Header chrome, not a primary action. At .btn's own padding it rendered 52px
     inside a 66px bar — 78% of the header, competing with the wordmark. */
  .nav .hdr-cta{display:inline-block; font-size:15px; padding:9px 16px;
                border-width:2px; white-space:nowrap}
}

/* ---------- 15c. (removed v1.4) ----------------------------------------
   .mobnav was a scrolling link row under the bar, added when mobile had no
   navigation at all. The bar now wraps and carries the links itself on row one,
   so a third row would be a second answer to a solved problem — and vertical
   space above the fold is the scarcest thing on a phone.                    */

@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }


/* ---------- 16. SEARCH SUGGESTIONS (added v1.2) -------------------------
   Progressive enhancement only. The form below works with JavaScript off —
   §9 says "JS is enhancement only", and this is the enhancement, not the
   feature. No third party, no cookies, same-origin fetch to /api/sok.

   The list is a real ARIA combobox popup so keyboard and screen-reader users
   get the same affordance as pointer users. It is hidden by default and only
   ever shown by script, so a JS-less browser never sees an empty box.        */

.sok-boks{position:relative}
.sok-forslag{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30;
  margin:0; padding:0; list-style:none;
  background:var(--surface); border:2px solid var(--ink); border-radius:2px;
  max-height:min(60vh,420px); overflow-y:auto;
}
.sok-forslag:empty{display:none}
.sok-forslag li{border-bottom:1px solid var(--line)}
.sok-forslag li:last-child{border-bottom:0}
.sok-forslag a{
  display:block; padding:11px 14px; min-height:48px;
  text-decoration:none; color:var(--ink);
}
.sok-forslag .s-reg{font-size:13px; font-weight:700; color:var(--muted); margin-bottom:2px}
.sok-forslag .s-h{font-size:16px; font-weight:700; line-height:1.35}
.sok-forslag .s-d{font-size:14px; color:var(--muted); line-height:1.4; margin-top:2px}
/* aria-selected is the keyboard cursor. Not :hover — see INVARIANT 4. */
.sok-forslag [aria-selected="true"]{background:var(--tint); outline:2px solid var(--ink); outline-offset:-2px}

@media (hover:hover) and (pointer:fine){
  .sok-forslag a:hover{background:var(--tint)}
}

/* ---------------------------------------------------------------- .velg
   The subscription picker (/innstillinger). One row per regelverk, grouped
   into a fieldset per trade.

   The whole row is the label, so the tap target is the row rather than the
   14px box — design system §3 requires 48px, and a checkbox alone is a third
   of that. accent-color tints the native control instead of replacing it with
   a styled span: a real <input type="checkbox"> keeps the keyboard behaviour,
   the screen-reader semantics and the form-reset behaviour that a div cannot. */
.velg{border:2px solid var(--line); border-radius:10px; padding:14px 16px; margin:0 0 16px}
.velg legend{font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
             color:var(--muted); padding:0 6px}
.velg ul{list-style:none; margin:0; padding:0}
.velg li+li{border-top:1px solid var(--line)}
/* 48px is the §3 tap target. Literal, not a token: --tap is the tap HIGHLIGHT
   colour, and the file has no length tokens. */
.velg label{display:flex; gap:12px; align-items:flex-start; min-height:48px;
            padding:10px 4px; cursor:pointer}
.velg input{flex:none; width:20px; height:20px; margin-top:2px; accent-color:var(--navy)}
.velg label>span{display:block}
.velg strong{display:block; font-size:17px; font-weight:700; line-height:1.35}
.velg-d{display:block; font-size:15px; color:var(--muted); line-height:1.45}
.velg input:focus-visible{outline:3px solid var(--gul); outline-offset:2px}

@media (hover:hover) and (pointer:fine){
  .velg label:hover{background:var(--tint)}
}

@media (prefers-color-scheme:dark){
  /* The native control follows accent-color; on the dark ground the navy tick
     would sink into the background, so it takes the gul the rest of the
     interactive vocabulary uses. */
  .velg input{accent-color:var(--gul)}
}