/* brukerinfo.no — generated from the mockups by tools/extract-css.mjs.
   Do NOT edit this file. Edit the mockup and regenerate, or the reference
   implementation and production stop matching. */

:root{
  color-scheme:light dark;
  --paper:#FBFBF9; --card:#FFFFFF;
  --sheet:#FFFFFF; --sheet-ink:#16181D; --sheet-ink-faint:#5E626B; --sheet-edge:#D7D5CD;
  --ink:#16181D; --ink-soft:#565A63; --ink-faint:#686C75;
  --rule:#DEDDD7; --rule-soft:#EBEAE5;
  --stamp:#0B4F6C; --stamp-ink:#0B4F6C; --stamp-wash:#EDF3F6; --stamp-edge:#CFDDE4; --stamp-hover:#E2ECF1;
  --field:#FFFFFF; --field-edge:#758E9E;
  --verified:#1F6B4A; --verified-wash:#F2F8F4; --verified-edge:#C3D8CC;
  --flag:#8C2B1F; --flag-wash:#FAF0EE;
  --gold:#8A6A12; --gold-wash:#F7F0DC; --gold-edge:#E3D3A4;
  --hl:#FFF3C4;
  --shadow:0 1px 0 rgba(22,24,29,.04),0 8px 22px -14px rgba(22,24,29,.28);
  --r:2px; --gut:1.4rem; --maxw:44rem; --hdr-h:4.5rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#131519; --card:#1A1D22;
    --sheet:#F3F1EB; --sheet-ink:#16181D; --sheet-edge:#3A3E45;
    --ink:#E9E8E3; --ink-soft:#A8ACB4; --ink-faint:#8C8F98;
    --rule:#2C3037; --rule-soft:#23262C;
    --stamp:#78B4D2; --stamp-ink:#9CCBE3; --stamp-wash:#16242C; --stamp-edge:#2C444A; --stamp-hover:#1D3039;
    --field:#0F1216; --field-edge:#63707D;
    --verified:#6FBF95; --verified-wash:#152420; --verified-edge:#2A4438;
    --flag:#E3907E; --flag-wash:#2A1B18;
    --gold:#D8B75A; --gold-wash:#2A2417; --gold-edge:#4A4023;
    /* --hl deliberately not overridden: .letter never flips. See t1-klage.html. */
    --shadow:0 1px 0 rgba(0,0,0,.3),0 10px 28px -14px rgba(0,0,0,.7);
  }
}

*{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--hdr-h)}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Familjen Grotesk',system-ui,sans-serif;font-size:16px;line-height:1.55;
  overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--stamp-ink);text-decoration:none;border-bottom:1px solid currentColor;
  border-bottom-color:color-mix(in srgb,currentColor 35%,transparent)}
a:hover{border-bottom-color:currentColor}
:focus-visible{outline:2px solid var(--stamp-ink);outline-offset:2px;border-radius:1px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:.6rem;top:-4rem;z-index:100;background:var(--card);
  color:var(--stamp-ink);border:1px solid var(--stamp-ink);padding:.7rem 1rem;
  border-radius:var(--r);font-size:.9rem;font-weight:500;transition:top .15s ease}
.skip:focus{top:.6rem}
@media(prefers-reduced-motion:reduce){.skip{transition:none}}
.lbl{font-family:'IBM Plex Mono',monospace;font-size:.625rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint)}
.mono{font-family:'IBM Plex Mono',monospace;font-size:.8rem}
.brk{overflow-wrap:break-word;hyphens:none}
/* Visually hidden but present in the accessibility tree. `hidden` on a <label>
   removes it from the tree entirely, which leaves its control with no name —
   axe reports that as a critical select-name / label violation. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Links that leave brukerinfo.no open in a new tab — a half-filled composer must
   survive a trip to the provider's own page, and the back button does not protect
   it. Marked with a mono glyph rather than an icon, and announced to screen
   readers, because an unannounced new tab is a WCAG 3.2.5 surprise. */
.ext::after{content:"\2197";font-family:'IBM Plex Mono',monospace;font-size:.78em;
  color:var(--ink-faint);margin-left:.18em;text-decoration:none}
.btn.ext::after,.seg-o.ext::after{color:currentColor}

/* ══ header ══ */
header{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--rule)}
@supports (backdrop-filter:blur(8px)){
  header{background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:saturate(1.4) blur(8px)}}
.bar{display:flex;align-items:center;gap:.6rem;padding-block:.6rem}
.brand{font-weight:700;font-size:1.02rem;letter-spacing:-.02em;border:0;color:var(--ink);
  flex:none;margin-right:auto;display:inline-flex;align-items:center;min-height:2.75rem}
.navlinks{display:none;gap:.15rem;align-items:center;margin-right:.4rem}
.navlinks a{border:0;color:var(--ink-soft);font-size:.88rem;font-weight:500;padding:.45rem .55rem;
  border-radius:var(--r);display:inline-flex;align-items:center;min-height:2.75rem}
.navlinks a:hover{color:var(--ink);background:var(--rule-soft)}
.navlinks a[aria-current]{color:var(--stamp-ink)}
.ibtn{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:2.75rem;height:2.75rem;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--card);color:var(--ink-soft);cursor:pointer;padding:0}
.ibtn:hover{border-color:var(--stamp-ink);color:var(--stamp-ink)}
.ibtn svg{width:1.05rem;height:1.05rem;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.searchrow{display:none;padding-block:0 .7rem}
.searchrow.open{display:block}
.searchrow form{display:flex;gap:.4rem}
.searchrow input{flex:1 1 auto;font-family:'Familjen Grotesk',sans-serif;
  border-color:var(--field-edge);background:var(--card)}
.searchrow .btn{flex:0 0 auto;padding:.55rem .9rem;font-size:.86rem}
.ibtn .x{display:none}
.ibtn[aria-expanded="true"] .x{display:block}
.ibtn[aria-expanded="true"] .m{display:none}
/* register index — the only route to the four hubs below 46rem, where .navlinks
   is hidden. Without it the header offers a wordmark and a search box and no
   navigation at all, on the device most of this traffic arrives from. */
.panel{display:none;border-top:1px solid var(--rule-soft);padding-block:.35rem .9rem}
.panel.open{display:block}
.panel a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem .8rem;
  align-items:baseline;border:0;border-bottom:1px solid var(--rule-soft);
  padding:.75rem 0;color:var(--ink);min-height:2.75rem}
.panel a:last-child{border-bottom:0}
.panel a:hover{color:var(--stamp-ink)}
.panel b{font-weight:600;font-size:.96rem}
.panel em{font-style:normal;grid-column:1/-1;font-size:.84rem;color:var(--ink-soft)}
.panel .count{font-family:'IBM Plex Mono',monospace;font-size:.68rem;
  color:var(--ink-faint);grid-row:1;grid-column:2}
@media(min-width:46rem){.navlinks{display:flex}.ibtn.menu{display:none}.panel{display:none !important}}

/* ══ crumb / title ══ */
.crumb{padding:1rem 0 0}
.crumb ol{list-style:none;display:flex;gap:.35rem;flex-wrap:wrap;margin:0;padding:0}
.crumb li{font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--ink-faint)}
.crumb a{border:0;color:var(--ink-soft)}
.head{padding:.45rem 0 1.25rem;border-bottom:1px solid var(--rule)}
h1{font-size:clamp(1.7rem, 1.15rem + 3.4vw, 2.55rem);line-height:1.07;
  letter-spacing:-.03em;font-weight:600;margin:.3rem 0 .5rem}
.dek{margin:0;color:var(--ink-soft);font-size:.98rem;max-width:32rem}
.head-stamp{display:flex;align-items:center;gap:.4rem;margin-top:.7rem;flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--verified)}
.head-stamp .dot{width:.38rem;height:.38rem;border-radius:50%;background:var(--verified);flex:none}
/* The promise that separates this page from the paid letter-mills occupying the same
   SERP. It belongs above the fold, not in the footer — visitors arrive pre-suspicious. */
.freeline{
  display:flex;align-items:center;gap:.45rem;margin-top:.55rem;
  font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--ink-soft);
}
.freeline b{color:var(--ink);font-weight:500}

/* ══ blocks ══ */
.blk{padding:1.6rem 0;border-bottom:1px solid var(--rule-soft)}
.blk:last-of-type{border-bottom:0}
h2{font-size:.92rem;font-weight:600;margin:0 0 .85rem;display:flex;align-items:baseline;
  gap:.5rem;flex-wrap:wrap}
h2::before{content:"";flex:0 0 1.1rem;height:1px;background:var(--ink);transform:translateY(-.28em)}
p{margin:0 0 .8rem}
p:last-child{margin-bottom:0}

/* ══ branch — the single most important correctness detail (§4.4) ══ */
.branch{
  border:1px solid var(--stamp-edge);border-radius:var(--r);background:var(--stamp-wash);
  padding:.85rem;margin:1.25rem 0 0;
}
.branch + .branch{margin-top:.7rem}
.branch legend, .branch .q{
  font-size:.94rem;font-weight:600;color:var(--ink);padding:0;margin:0 0 .1rem;
}
.branch .why{font-size:.82rem;color:var(--ink-soft);margin:.15rem 0 .6rem}
.seg{display:flex;border:1px solid var(--stamp-ink);border-radius:var(--r);overflow:hidden}
.seg-o{
  flex:1 1 0;text-align:center;padding:.7rem .5rem;min-height:2.75rem;
  display:flex;align-items:center;justify-content:center;
  border:0;border-right:1px solid var(--stamp-ink);background:var(--card);
  color:var(--stamp-ink);font-family:'Familjen Grotesk',sans-serif;
  font-size:.86rem;font-weight:500;cursor:pointer;
}
.seg-o:last-child{border-right:0}
.seg-o[aria-pressed="true"]{background:var(--stamp-ink);color:var(--paper)}
@media(max-width:28rem){
  .seg{flex-direction:column}
  .seg-o{border-right:0;border-bottom:1px solid var(--stamp-ink)}
  .seg-o:last-child{border-bottom:0}
}

/* ── no-JS branch switching (used by the renderer, not by this mockup) ───────
   The mockup switches between fixture COMPANIES, so it re-renders in JS. The
   renderer emits one company with every branch variant already in the document
   and switches with radios plus :has(), because the billing branch is the one
   correctness-critical control on the page: if JS fails, a user billed through
   the App Store must still be able to reach the App Store answer rather than
   silently being shown the direct-billing one and following it.
   Same stylesheet, two mechanisms, because they are two different jobs. */
.seg input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.seg input + label{
  flex:1 1 0;text-align:center;padding:.7rem .5rem;min-height:2.75rem;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  border-right:1px solid var(--stamp-ink);background:var(--card);
  color:var(--stamp-ink);font-size:.86rem;font-weight:500;
}
.seg input:last-of-type + label,.seg label:last-child{border-right:0}
.seg input:checked + label{background:var(--stamp-ink);color:var(--paper)}
.seg input:focus-visible + label{outline:2px solid var(--stamp-ink);outline-offset:-3px}
@media(max-width:28rem){
  .seg input + label{border-right:0;border-bottom:1px solid var(--stamp-ink)}
  .seg label:last-child{border-bottom:0}
}
/* Without JS the disclosure buttons cannot toggle, so the search row and the
   register panel default to open and the buttons are hidden. composer.js adds
   html.js, which restores the collapsed state and the toggles. Graceful in both
   directions: no-JS users lose nothing, JS users get the compact header. */
html:not(.js) .searchrow{display:block}
html:not(.js) .panel{display:block}
html:not(.js) .ibtn{display:none}
/* A dead button is worse than no button. Copy, mailto and the PDF need script,
   so they go; anchor actions (Åpne skjemaet) are real links and stay. The
   receipt's values are script-filled, so the whole disclosure goes with it.
   The letter itself is server-rendered and remains selectable by hand. */
html:not(.js) .actions button{display:none}
html:not(.js) .receipt{display:none}
html:not(.js) .idxbar{display:none}

/* Every variant is in the document; exactly one is shown. */
.t2 [data-branch]{display:none}
.t2:has(#br-0:checked) [data-branch="0"],
.t2:has(#br-1:checked) [data-branch="1"],
.t2:has(#br-2:checked) [data-branch="2"]{display:revert}

/* ══ answer ══ */
.answer{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:.2rem 0;margin:0}
.row{display:grid;grid-template-columns:7.4rem minmax(0,1fr) auto;gap:.35rem .7rem;
  padding:.65rem .9rem;border-bottom:1px solid var(--rule-soft);align-items:baseline}
.row:last-child{border-bottom:0}
.row dt{padding:0;font-size:.88rem;color:var(--ink-soft);line-height:1.4}
.row dd{margin:0;min-width:0;font-family:'IBM Plex Mono',monospace;font-size:.82rem;
  line-height:1.45;overflow-wrap:break-word;hyphens:none}
.row .src-tag{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);justify-self:end;white-space:nowrap}
.due{color:var(--flag);font-weight:500}
.chip{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.58rem;
  letter-spacing:.07em;text-transform:uppercase;padding:.1rem .3rem;border-radius:var(--r);
  background:var(--flag-wash);color:var(--flag);margin-left:.3rem;white-space:nowrap}
.note{font-size:.78rem;color:var(--ink-soft);font-family:'Familjen Grotesk',sans-serif;
  display:block;margin-top:.2rem;line-height:1.4}
@media(max-width:28rem){
  .row{grid-template-columns:minmax(0,1fr)}
  .row .src-tag{justify-self:start;margin-top:-.15rem}
}

/* ══ the end date — the question everyone arrives with ══ */
.enddate{
  margin:.9rem 0 0;padding:.8rem .9rem;border:1px solid var(--stamp-edge);
  border-radius:var(--r);background:var(--stamp-wash);
}
.enddate .big{
  font-family:'IBM Plex Mono',monospace;font-size:1rem;font-weight:500;
  color:var(--ink);display:block;margin-bottom:.2rem;
}
.enddate .rule{font-size:.82rem;color:var(--ink-soft);margin:0}
/* When notice_basis is null the sentence is removed, never hedged (spec §5). */
.enddate.is-unknown{background:var(--card);border-color:var(--rule)}

/* ══ binding ══ */
/* Four facts at a glance. Boxed cells read as four disconnected widgets, and at
   4-up they squeezed a real register value — "Ut kalendermåneden du sier opp" —
   into a ragged three-line wrap beside neighbours using one. One container with
   thin dividers instead, dropping to 2-up then 1-up so the notice-period string
   always has room to be read as a sentence. */
.binding{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--rule);border-radius:var(--r);
  background:var(--card);overflow:hidden;
}
.binding div{padding:.8rem .85rem;border-left:1px solid var(--rule-soft);min-width:0}
.binding div:first-child{border-left:0}
.binding .k{display:block;font-family:'IBM Plex Mono',monospace;font-size:.6rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.3rem}
.binding .v{font-family:'IBM Plex Mono',monospace;font-size:.82rem;color:var(--ink);
  line-height:1.45;overflow-wrap:break-word;hyphens:none;display:block}
@media(max-width:46rem){
  .binding{grid-template-columns:repeat(2,minmax(0,1fr))}
  .binding div:nth-child(odd){border-left:0}
  .binding div:nth-child(n+3){border-top:1px solid var(--rule-soft)}
}
@media(max-width:26rem){
  .binding{grid-template-columns:minmax(0,1fr)}
  .binding div{border-left:0;border-top:1px solid var(--rule-soft)}
  .binding div:first-child{border-top:0}
}

/* ══ steps ══ */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:1.6rem minmax(0,1fr);
  gap:.85rem;padding:.95rem 0;border-top:1px solid var(--rule-soft)}
.steps li:first-child{border-top:0;padding-top:0}
.steps li::before{content:counter(s);font-family:'IBM Plex Mono',monospace;font-size:.76rem;
  color:var(--stamp-ink);padding-top:.24rem}
.steps h3{font-size:.98rem;font-weight:600;margin:0 0 .25rem;line-height:1.3}
.steps p{font-size:.93rem;color:var(--ink-soft)}

/* ══ annonse ══ */
.ad{margin:1.6rem 0;border-top:1px solid var(--rule-soft);padding-top:.6rem}
.ad > .lbl{display:block;margin-bottom:.35rem}
.ad .slot{min-height:250px;display:flex;align-items:center;justify-content:center;
  background:var(--rule-soft);border-radius:var(--r);
  font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:var(--ink-faint)}

/* ══ composer ══ */
.composer{background:var(--stamp-wash);border:1px solid var(--stamp-edge);
  border-radius:var(--r);padding:1.1rem .85rem 1rem}
.composer > .lbl{display:block;color:var(--stamp-ink);margin-bottom:.1rem}
.composer h2{margin-top:.15rem}
.composer h2::before{background:var(--stamp-ink)}
.composer .hint{font-size:.85rem;color:var(--ink-soft);margin:0 0 1rem}
.fields{display:grid;gap:.65rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-bottom:.85rem}
.f-wide{grid-column:1/-1}
.fields label{display:block;min-width:0;scroll-margin-top:var(--hdr-h)}
.fields .lbl{display:block;margin-bottom:.22rem;color:var(--ink-soft)}
input,textarea,select{width:100%;max-width:100%;font-family:'IBM Plex Mono',monospace;
  font-size:16px;color:var(--ink);background:var(--field);border:1px solid var(--field-edge);
  border-radius:var(--r);padding:.55rem;line-height:1.4;min-height:2.75rem}
textarea{resize:vertical;min-height:5rem;line-height:1.5}
input:focus,textarea:focus,select:focus{border-color:var(--stamp-ink)}
@media(max-width:32rem){.fields{grid-template-columns:minmax(0,1fr)}}
.subjmirror{margin:0 0 1.05rem;padding:.5rem .6rem;border:1px dashed var(--stamp-edge);
  border-radius:var(--r);font-family:'IBM Plex Mono',monospace;font-size:.72rem;
  color:var(--ink-soft);overflow-wrap:break-word}
.subjmirror b{color:var(--ink);font-weight:500}
.letter{background:var(--sheet);color:var(--sheet-ink);border:1px solid var(--sheet-edge);
  border-radius:var(--r);box-shadow:var(--shadow);padding:1.15rem 1rem;
  scroll-margin-top:var(--hdr-h);font-family:'Literata',Georgia,serif;
  font-size:.88rem;line-height:1.6;overflow-wrap:break-word;hyphens:none}
.letter .hdr{margin:0 0 1.1rem;padding-bottom:.85rem;border-bottom:1px solid rgba(22,24,29,.14)}
.letter .hdr div{display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:.5rem;
  align-items:baseline;padding:.2rem 0}
.letter .hdr span{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sheet-ink-faint);opacity:1}
.letter .hdr b{font-family:'IBM Plex Mono',monospace;font-size:.78rem;font-weight:500;
  overflow-wrap:break-word;line-height:1.45}
.letter p{margin:0 0 .85rem}
.letter .sign{margin:1.3rem 0 0;white-space:pre-line}
.ph{color:var(--sheet-ink-faint);font-style:italic}
#letter p, #letter .hdr b{transition:background-color .6s ease}
.hl{background-color:var(--hl);transition:none}
@media(prefers-reduced-motion:reduce){#letter p, #letter .hdr b{transition:none}}
.actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.btn{font-family:'Familjen Grotesk',sans-serif;font-size:.9rem;font-weight:500;
  padding:.65rem 1rem;border-radius:var(--r);cursor:pointer;border:1px solid var(--stamp-ink);
  background:var(--stamp-ink);color:var(--paper);min-height:2.75rem;flex:1 1 11rem}
.btn:hover{filter:brightness(1.1)}
.btn-2{background:transparent;color:var(--stamp-ink);flex:0 1 auto}
.btn-2:hover{background:var(--stamp-hover);filter:none}
.btn-3t{flex:1 1 100%;background:none;border:0;cursor:pointer;padding:.5rem 0;min-height:2.75rem;
  font-family:'Familjen Grotesk',sans-serif;font-size:.83rem;color:var(--ink-soft);
  text-decoration:underline;text-underline-offset:2px}
.btn-3t:hover{color:var(--stamp-ink)}

/* ══ the "do not send anything" states ══ */
/* message_format='none' and the bytte branch both resolve to: the correct action is
   not a letter. Rendering a composer here would be a confidently wrong answer. */
.direct{
  border:1px solid var(--stamp-edge);border-radius:var(--r);background:var(--stamp-wash);
  padding:1.1rem .95rem;
}
.direct .lbl{display:block;color:var(--stamp-ink);margin-bottom:.35rem}
.direct h2{margin-top:0}
.direct p{font-size:.93rem;color:var(--ink-soft)}
.direct .go{margin-top:.9rem;display:flex;gap:.5rem;flex-wrap:wrap}
.warn{
  border-left:2px solid var(--flag);background:var(--flag-wash);
  padding:.75rem .9rem;border-radius:0 var(--r) var(--r) 0;margin:.9rem 0 0;
}
.warn strong{display:block;font-size:.9rem;color:var(--flag);margin-bottom:.25rem}
.warn p{font-size:.88rem;color:var(--ink-soft);margin:0}

/* ══ receipt ══ */
.receipt{margin-top:1rem;border:1px solid var(--stamp-edge);border-radius:var(--r);background:var(--card)}
.receipt summary{cursor:pointer;padding:.8rem .85rem;font-weight:500;font-size:.9rem;
  position:relative;list-style:none;min-height:2.75rem;display:flex;align-items:center}
.receipt summary::-webkit-details-marker{display:none}
.receipt summary::after{content:"+";position:absolute;right:.85rem;top:50%;
  transform:translateY(-50%);font-family:'IBM Plex Mono',monospace;color:var(--stamp-ink);font-size:1rem}
.receipt[open] summary::after{content:"–"}
.receipt .inner{padding:0 .85rem .9rem}
.receipt .answer{border:0;background:none}
.receipt .row{padding-inline:0;grid-template-columns:7.4rem minmax(0,1fr) auto}
.receipt p{font-size:.86rem;color:var(--ink-soft);margin:.7rem 0 .8rem}

/* ══ faq / related / sources / footer ══ */
.faq details{border-bottom:1px solid var(--rule-soft)}
.faq details:first-of-type{border-top:1px solid var(--rule-soft)}
.faq summary{cursor:pointer;padding:.85rem 1.7rem .85rem 0;font-weight:500;font-size:.95rem;
  position:relative;list-style:none;line-height:1.4;min-height:2.75rem;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.15rem;top:50%;transform:translateY(-50%);
  font-family:'IBM Plex Mono',monospace;color:var(--stamp-ink);font-size:1rem}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 .9rem;font-size:.92rem;color:var(--ink-soft);margin:0}
.rel{display:grid;gap:.4rem;list-style:none;margin:0;padding:0}
.rel a{display:flex;justify-content:space-between;align-items:center;gap:.7rem;
  border:1px solid var(--rule);border-radius:var(--r);padding:.7rem .8rem;background:var(--card);
  font-size:.93rem;font-weight:500;color:var(--ink);min-height:2.75rem}
.rel a:hover{border-color:var(--stamp-ink);color:var(--stamp-ink)}
.rel span{font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--ink-faint);
  font-weight:400;flex:none}
.src{padding:1.5rem 0 2rem}
.src ul{margin:.45rem 0 0;padding-left:1.05rem}
.src li{font-size:.85rem;color:var(--ink-soft);margin-bottom:.22rem}
.stampbox{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:1rem;
  border:1px solid var(--verified-edge);border-radius:var(--r);padding:.45rem .6rem;
  background:var(--verified-wash)}
.stampbox .dot{width:.42rem;height:.42rem;border-radius:50%;background:var(--verified);flex:none}
.stampbox .mono{color:var(--verified);font-size:.72rem;overflow-wrap:break-word}
.stampbox .report{margin-left:auto;flex:none;font-family:'IBM Plex Mono',monospace;
  font-size:.68rem;color:var(--ink-soft);border-bottom-color:currentColor;
  display:inline-flex;align-items:center;min-height:2.2rem}
.stampbox.is-stale{border-color:var(--flag);background:var(--flag-wash)}
.stampbox.is-stale .dot{background:var(--flag)}
.stampbox.is-stale .mono{color:var(--flag)}
footer{border-top:1px solid var(--rule);background:var(--card);
  padding:2rem 0 max(2.5rem,env(safe-area-inset-bottom))}
.f-top{margin-bottom:1.5rem}
.f-mark{font-weight:700;font-size:1rem;letter-spacing:-.015em;display:block;margin-bottom:.4rem}
.f-top p{font-size:.87rem;color:var(--ink-soft);max-width:26rem;margin:0}
.f-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.75rem 1.4rem}
.f-cols nav .lbl{display:block;margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--rule-soft)}
.f-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.f-cols a{font-size:.89rem;color:var(--ink-soft);border:0;display:inline-block;padding:.15rem 0}
.f-cols a:hover{color:var(--stamp-ink)}
.f-consent{font-family:'Familjen Grotesk',sans-serif;font-size:.89rem;color:var(--ink-soft);
  background:none;border:0;padding:.15rem 0;cursor:pointer;text-align:left;
  border-bottom:1px solid color-mix(in srgb,var(--ink-faint) 45%,transparent)}
.f-base{margin-top:1.6rem;padding-top:1rem;border-top:1px solid var(--rule-soft);
  display:flex;gap:.5rem 1.2rem;flex-wrap:wrap}
.f-base span{font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--ink-faint)}
.toast{position:fixed;left:50%;bottom:1.2rem;transform:translate(-50%,180%);
  max-width:calc(100vw - 2rem);background:var(--ink);color:var(--paper);padding:.6rem 1rem;
  border-radius:var(--r);font-size:.86rem;z-index:60;text-align:center;
  transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.toast.on{transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){.toast{transition:none}}

/* ── wordmark ──────────────────────────────────────────────────────────────
   The mark is a way out of a bracket: the bracket is the held record, the arrow
   is what the visitor came to do. It inherits the theme rather than hardcoding,
   so the square inverts in dark mode and stays ≥8.6:1 either way. The same
   geometry is the favicon and the app icon — assets/brand/mark.svg. */
.brand{gap:.55rem}
.brand .mark{width:1.65rem;height:1.65rem;flex:none;display:block}
.brand .mark rect{fill:var(--stamp-ink)}
.brand .mark g{fill:none;stroke:var(--paper);stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.brand .wm{font-size:1.22rem;font-weight:700;letter-spacing:-.022em;color:var(--ink)}
.brand .tld{color:var(--ink-faint);font-weight:400}
.f-mark{display:flex;align-items:center;gap:.5rem}
.f-mark .mark{width:1.45rem;height:1.45rem;flex:none;display:block}
.f-mark .mark rect{fill:var(--stamp-ink)}
.f-mark .mark g{fill:none;stroke:var(--paper);stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.f-mark .tld{color:var(--ink-faint);font-weight:400}

/* ── rule hygiene ──────────────────────────────────────────────────────────
   A card carries its own edge. When one ends a .blk, the section's divider
   lands ~1.6rem under that edge and the two read as a double line — three,
   where an ad slot's top rule follows. The card closes the block; the section
   rule stands down. One hairline per boundary, which is the whole point of a
   register aesthetic. */
.faq details:last-of-type{border-bottom:0}      /* the section rule closes the list */
.ad{border-top:0}                                /* ANNONSE label + slot is its own edge */
.blk-letter{border-bottom:0}                     /* composer / direct card closes it */
.blk:has(> .binding),
.blk:has(> .org:last-child),
.blk:has(> .answer:last-child),
.blk:has(> .path:last-child),
.blk:has(> .terms:last-child){border-bottom:0}

@media print{
  @page{margin:25mm 20mm}
  body > *{display:none}
  main{display:block}
  main > *{display:none}
  main > .blk-letter{display:block;border:0;padding:0}
  .composer{background:none;border:0;padding:0}
  .composer > .lbl,.composer h2,.composer .hint,.fields,.subjmirror,.actions,.receipt{display:none}
  .letter{border:0;box-shadow:none;padding:0;font-size:11pt;background:#fff;color:#000}
  .letter .hdr{border-bottom:1px solid #999}
  .letter .hdr span{color:#555}
  .ph{color:#777}
  body{background:#fff;color:#000}
}

/* ── t1-only, from mockups/t1-klage.html ── */
/* ══ klageorgan / hjemmel ══ */
.org{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:.95rem}
.org h3{margin:.15rem 0 .45rem;font-size:1rem;font-weight:600;line-height:1.28}
.org p{font-size:.91rem;color:var(--ink-soft)}
.facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:.5rem .9rem;
  margin:.7rem 0 0;padding:.7rem 0 0;border-top:1px solid var(--rule-soft);
}
.facts div{font-family:'IBM Plex Mono',monospace;font-size:.74rem;color:var(--ink-soft)}
.facts b{color:var(--ink);font-weight:500}
.law{border-left:2px solid var(--stamp-ink);padding:.1rem 0 .1rem .9rem}
.law cite{
  display:block;font-style:normal;font-family:'IBM Plex Mono',monospace;
  font-size:.73rem;color:var(--stamp-ink);margin-bottom:.3rem;overflow-wrap:break-word;
}
.law p{font-family:'Literata',serif;font-size:.92rem;margin:0}

/* ── h1-only, from mockups/h1-si-opp-abonnement.html ── */
/* ══ the decision path — H1's reason to exist ══ */
/* bytt.no can out-write this page on any general guide. What it structurally
   cannot copy is a per-company register behind a two-question decision, so the
   decision is the page, and the prose is not. */
.path{border:1px solid var(--stamp-edge);border-radius:var(--r);background:var(--stamp-wash);padding:1rem .9rem}
.path .lbl{display:block;color:var(--stamp-ink);margin-bottom:.15rem}
.path h2{margin-top:.1rem}
.path h2::before{background:var(--stamp-ink)}
.step-q{margin:1rem 0 0}
.step-q:first-of-type{margin-top:.6rem}
.step-q .q{font-size:.94rem;font-weight:600;margin:0 0 .1rem}
.step-q .why{font-size:.82rem;color:var(--ink-soft);margin:.1rem 0 .55rem}
.seg{display:flex;border:1px solid var(--stamp-ink);border-radius:var(--r);overflow:hidden}
.seg-o{flex:1 1 0;text-align:center;padding:.7rem .5rem;min-height:2.75rem;
  display:flex;align-items:center;justify-content:center;border:0;
  border-right:1px solid var(--stamp-ink);background:var(--card);color:var(--stamp-ink);
  font-family:'Familjen Grotesk',sans-serif;font-size:.86rem;font-weight:500;cursor:pointer}
.seg-o:last-child{border-right:0}
.seg-o[aria-pressed="true"]{background:var(--stamp-ink);color:var(--paper)}
@media(max-width:30rem){
  .seg{flex-direction:column}
  .seg-o{border-right:0;border-bottom:1px solid var(--stamp-ink)}
  .seg-o:last-child{border-bottom:0}
}
.verdict{margin:1.1rem 0 0;padding:.9rem;background:var(--card);
  border:1px solid var(--rule);border-radius:var(--r)}
.verdict .big{display:block;font-family:'IBM Plex Mono',monospace;font-size:.95rem;
  font-weight:500;color:var(--ink);margin-bottom:.35rem;line-height:1.4}
.verdict p{font-size:.88rem;color:var(--ink-soft);margin:0}
.verdict.is-warn{border-color:var(--flag);background:var(--flag-wash)}
.verdict.is-warn .big{color:var(--flag)}
.verdict ol{margin:.6rem 0 0;padding-left:1.1rem}
.verdict li{font-size:.88rem;color:var(--ink-soft);margin-bottom:.3rem}

/* ══ register index ══ */
.idxbar{display:flex;gap:.5rem;align-items:center;margin-bottom:.7rem;flex-wrap:wrap}
.idxbar input{flex:1 1 12rem}
.idxbar .count{font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--ink-faint);flex:none}
.index{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.index a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem .7rem;align-items:center;
  border:1px solid var(--rule);border-radius:var(--r);padding:.65rem .8rem;background:var(--card);
  color:var(--ink);min-height:2.75rem;font-size:.93rem;font-weight:500}
.index a:hover{border-color:var(--stamp-ink);color:var(--stamp-ink)}
.index .meta{grid-column:1/-1;font-family:'IBM Plex Mono',monospace;font-size:.66rem;
  color:var(--ink-faint);font-weight:400}
.index .how{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-faint);grid-row:1;grid-column:2;white-space:nowrap;flex:none}
.index .empty{font-size:.88rem;color:var(--ink-soft);padding:.8rem 0}

/* ── no-JS verdict switching (used by the renderer, not by this mockup) ─────
   The mockup drives verdicts with buttons and JS. The renderer emits every
   verdict into the document and switches with radios plus :has(), because the
   two questions are the page's reason to exist and must not depend on a script
   loading. Question 2 only applies to direct billing — an app-store
   subscription is not ported anywhere, so it is hidden for those answers. */
.h1 [data-verdict]{display:none}
.h1:has(#q1-1:checked) [data-verdict="app_store"],
.h1:has(#q1-2:checked) [data-verdict="google_play"],
.h1:has(#q1-0:checked):has(#q2-1:checked) [data-verdict="bytte"],
.h1:has(#q1-0:checked):has(#q2-0:checked) [data-verdict="slutte"]{display:block}
.h1:has(#q1-1:checked) .step-q2,
.h1:has(#q1-2:checked) .step-q2{display:none}

.norecipient{margin:.9rem 0 0;padding:.65rem .8rem;border:1px dashed var(--stamp-edge);
  border-radius:var(--r);font-size:.83rem;color:var(--ink-soft)}


.ad{margin:1.6rem 0;border-top:1px solid var(--rule-soft);padding-top:.6rem}
.ad > .lbl{display:block;margin-bottom:.35rem}
.ad .slot{min-height:250px;display:flex;align-items:center;justify-content:center;
  background:var(--rule-soft);border-radius:var(--r);
  font-family:'IBM Plex Mono',monospace;font-size:.66rem;color:var(--ink-faint)}

.terms{display:grid;gap:.5rem}
.terms div{border:1px solid var(--rule);border-radius:var(--r);background:var(--card);padding:.75rem .85rem}
.terms dt{font-size:.93rem;font-weight:600;margin:0 0 .2rem}
.terms dd{margin:0;font-size:.88rem;color:var(--ink-soft)}
.terms dd a{font-size:.82rem}
/* The norecipient note is site instruction, not letter content — a printed
   oppsigelse must not carry "finn selskapet i registeret". */
@media print{.norecipient{display:none}}