@font-face{font-family:Nunito;src:url('assets/fonts/nunito-latin-900-normal.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:Nunito;src:url('assets/fonts/nunito-latin-800-normal.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/fonts/Manrope.woff2') format('woff2');font-weight:200 800;font-display:swap}

/* Web reading sizes on every screen (David 10 Oct 2026: everything was too big to read and move around):
   16 px base, 17 to 18 px reading text, everything (also the factory) at most 1280 px wide. Coloured sections run
   edge to edge, and on PC the hero is exactly the first screen. */
:root{
  /* British racing green and chrome, like a classic British sports car (David 10 Oct 2026): racing green in four
     steps, warm ivory that matches the clay cream, a sage tint of the same green for the conveyor, and polished
     chrome as the secondary colour for every action and detail on green. Chrome has too little contrast on ivory
     (1.1 to 1.9:1), so on light surfaces the yes is a green pill inside a chrome ring. */
  --green:#063c2d;--hero:#063c2d;--deep:#02261b;--felt:#0f4937;
  --paper:#f7f2e8;--card:#fffcf6;--mint:#d3e1d8;--cream:#f5ecda;--dust:#57534b;
  --krom:linear-gradient(180deg,#fdfefe 0%,#e4e8e9 40%,#bcc4c6 52%,#d9dedf 74%,#f1f3f3 100%);--krom-flate:#b4bcbe;--krom-lys:#dfe4e5;--krom-kant:#7a8587;--ink:#0b2a21;--muted:#36473f;--line:#ddd4c3;--on-green:#d0e0d5;
  /* Every text pair is at least 7:1 (WCAG AAA), checked on the rendered page by tests/kontrast.py. */
  --kant:max(20px,5vw);--pad:max(var(--kant),(100vw - 80rem) / 2);--sec:clamp(4rem,7vw,6.5rem);--topp:4.75rem;--titter:9rem;
  --rund:'Nunito','Arial Rounded MT Bold',system-ui,sans-serif;--sans:Manrope,'Segoe UI',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  font-size:100%;
  color:var(--ink);background:var(--paper);font-family:var(--sans);
  scroll-behavior:smooth;scroll-padding-top:var(--topp);-webkit-text-size-adjust:100%;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);font-weight:460}
h1,h2,h3,.ja-knapp,.ordmerke{-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.22em}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{font-family:var(--rund);font-weight:900;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:clamp(2.25rem,4vw,3.75rem);line-height:1;letter-spacing:-.03em}
p{line-height:1.65;max-width:62ch}
:focus-visible{outline:3px solid var(--green);outline-offset:4px}
.topp :focus-visible,.hero :focus-visible,.pris :focus-visible,.faq :focus-visible,.bunn :focus-visible{outline-color:var(--krom-lys)}
[hidden]{display:none!important}
.visuelt-skjult,.skip-link:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;z-index:200;top:.75rem;left:.75rem;padding:1rem;background:var(--paper);color:var(--green);border-radius:.75rem}
/* Quiet spaced label over every section heading (11 Oct 2026 premium pass) */
.kicker{font:700 .75rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:1.125rem}
.seksjon-topp p:not(.kicker){margin-top:1.25rem;color:var(--muted);font-size:1.125rem;font-weight:440}
.midt{text-align:center}.midt p{margin-inline:auto}
.pris .kicker,.ja .kicker{color:var(--on-green)}
.slik .kicker{color:var(--green);margin-inline:auto}

/* The yes button: a polished chrome pill on green, steady on hover (lift and shine only). Its background colour is the
   darkest chrome stop, so the contrast check measures the worst case (deep green on it is 8.4:1). */
.ja-knapp{display:inline-flex;align-items:center;justify-content:center;min-height:3.5rem;padding:0 1.875rem;border:0;border-radius:999px;background:var(--krom-flate) var(--krom);color:var(--deep);font:900 1.0625rem/1 var(--rund);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #9aa4a6,0 0 0 1px var(--krom-kant),0 12px 24px -14px #000c;transition:transform .18s var(--ease),filter .18s,box-shadow .18s}
.ja-knapp:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #9aa4a6,0 0 0 1px var(--krom-kant),0 16px 28px -14px #000d}
.ja-knapp:active{transform:translateY(0)}
.ja-gronn{background:var(--green);color:var(--cream);box-shadow:inset 0 1px 0 #ffffff26,0 0 0 2px var(--card),0 0 0 4px #b8c0c2,0 12px 24px -14px #063c2dcc}
.ja-gronn:hover{filter:none;background:var(--felt);box-shadow:inset 0 1px 0 #ffffff26,0 0 0 2px var(--card),0 0 0 4px #b8c0c2,0 16px 28px -14px #063c2de6}
.ja-knapp:disabled{opacity:.55;cursor:default;transform:none}
.ja-knapp:not(.ja-liten)::after{content:'';flex:none;width:1.125rem;height:1.125rem;margin-left:.875rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 10h12.5M11 5l5 5-5 5' fill='none' stroke='%2302261b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.ja-gronn:not(.ja-liten)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 10h12.5M11 5l5 5-5 5' fill='none' stroke='%23f5ecda' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.lenke-lys{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--cream);font:800 1rem/1 var(--rund);text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--krom-lys);text-underline-offset:6px}
.lenke-lys:hover{color:var(--card)}

/* Header */
.topp{position:sticky;top:0;z-index:50;background:var(--green);color:var(--cream);box-shadow:0 1px 0 #ffffff14}
.topp-inner{display:flex;align-items:center;gap:2rem;height:var(--topp);padding:0 var(--pad)}
.ordmerke{display:flex;align-items:center;gap:.625rem;font:900 1.375rem/1 var(--rund);letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.ordmerke .logo{height:2.5rem;width:auto;flex:none}
.meny{display:flex;gap:1.75rem;margin-left:auto;font:800 .9375rem/1 var(--rund)}
.meny a{text-decoration:none;opacity:.86}
.meny a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px}
.ja-liten{min-height:2.75rem;padding:0 1.25rem;font-size:.9375rem}

/* Hero: headline on top, the factory below it. Layers are transparent PNGs placed in one stage, in percent of
   the stage, so the three finished sites always sit in the free air between machine and worker. */
.hero{display:flex;flex-direction:column;align-items:center;gap:clamp(1.5rem,4vh,3rem);background:radial-gradient(ellipse 42% 12% at 47% 95%,#0d543f 0%,#0d543f00 100%),radial-gradient(ellipse 80% 78% at 50% 16%,#0a4a35 0%,#063c2d 56%,#032b1f 100%) #0a4a35;color:var(--cream);padding:clamp(2rem,5vh,4rem) var(--kant) clamp(1.5rem,4vh,3.5rem);overflow:hidden;text-align:center}
.hero-tekst{display:flex;flex-direction:column;align-items:center}
.hero h1{font-size:clamp(2.5rem,4.4vw,4rem);line-height:1.02;letter-spacing:-.035em}
.hero h1 span{display:block;white-space:nowrap}
/* Becker: the total price is its own element in the hero, so the visitor sees what it is and what it costs at once */
.hero-pris{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.625rem 1rem;margin-top:clamp(1rem,2.6vh,1.75rem);max-width:none}
.hero-sum{display:inline-block;padding:.5rem 1.375rem .5625rem;border-radius:999px;background:var(--krom-flate) var(--krom);color:var(--deep);font:900 clamp(1.625rem,2.2vw,2.125rem)/1 var(--rund);letter-spacing:-.025em;white-space:nowrap;box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 #9aa4a6,0 0 0 1px var(--krom-kant),0 14px 26px -16px #000c}
.hero-sum-tekst{padding:.375rem 0 .375rem 1rem;border-left:1px solid #f5ecda4d;font:600 clamp(1rem,1.2vw,1.125rem)/1.2 var(--sans);color:var(--cream)}
.hero-under{margin-top:clamp(.875rem,2vh,1.25rem);max-width:34em;font-weight:460;font-size:clamp(1.0625rem,1.3vw,1.1875rem);line-height:1.55;color:var(--on-green)}
.hero-handling{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.875rem 1.75rem;margin-top:clamp(1.25rem,3.2vh,2rem)}
.fabrikk{width:min(100%,80rem);display:grid;place-items:center}
.scene{position:relative;width:100%;aspect-ratio:2072/643}
.scene-bilde,.scene-arbeider,.ut-kort{position:absolute}
.scene-bilde{left:0;top:0;width:74.469%}
.scene-arbeider{left:84.17%;top:11.664%;width:15.83%}
.ut{position:absolute;inset:0;pointer-events:none}
.ut-kort{width:12.066%;border-radius:6%/9.6%;box-shadow:0 1.4rem 2.2rem -1rem #000b,0 0 0 3px #f4f0e6;animation:ut .9s var(--ease) backwards}
.k1{left:56.95%;top:7.154%;rotate:-8deg;animation-delay:.35s}
.k2{left:63.948%;top:3.733%;z-index:1;animation-delay:.55s}
.k3{left:70.946%;top:7.154%;rotate:8deg;animation-delay:.75s}
@keyframes ut{from{opacity:0;translate:-35% 45%;scale:.6}}

/* Examples: before and after */
.eksempler{padding:var(--sec) var(--pad);overflow:hidden;background:radial-gradient(ellipse 55% 60% at 72% 50%,#fffaf0 0%,#fffaf000 70%),var(--paper)}
.eksempler .seksjon-topp{margin-bottom:clamp(2rem,4vw,3rem)}
/* Examples: the finished site in a browser window and on a real iPhone, chosen with plain trade tabs */
.velger{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:clamp(1.75rem,3vw,2.5rem)}
.fane{display:inline-flex;align-items:center;gap:.75rem;min-height:2.75rem;padding:0 1.125rem;border:0;border-radius:999px;background:var(--card);box-shadow:0 1px 2px #0b2a210f,inset 0 0 0 1px #0b2a210d;font:800 .9375rem/1 var(--rund);color:var(--ink);transition:background .18s,color .18s,box-shadow .18s}
.fane span{display:none;font:500 .875rem/1 var(--sans);color:var(--muted)}
.fane:hover{background:#fff;box-shadow:0 6px 16px -10px #0b2a2140,inset 0 0 0 1px #0b2a2126}
.fane[aria-selected="true"]{background:var(--green);color:var(--cream);box-shadow:0 10px 22px -12px #063c2dcc}
.fane[aria-selected="true"] span{color:var(--on-green)}
.vis{margin:0 auto;max-width:58rem;padding-left:8%}
.vis-scene{position:relative}
.nettleser{border-radius:.875rem;overflow:hidden;background:var(--card);box-shadow:0 50px 90px -46px #032d22b3,0 18px 30px -24px #032d2240,0 0 0 1px #0b2a2112}
.nettleser-topp{display:flex;align-items:center;gap:.375rem;height:2rem;padding:0 .875rem;background:#f1ece2;border-bottom:1px solid #0b2a210f}
.nettleser-topp i{width:.5625rem;height:.5625rem;border-radius:50%;background:#d6cebf}
.nettleser-topp span{margin:0 auto;padding:.25rem 1.125rem;border-radius:999px;background:var(--card);font:600 .6875rem/1 var(--sans);color:var(--ink)}
.nettleser img{width:100%;aspect-ratio:16/10;object-fit:cover}
.tlf{position:absolute;left:-8.6%;bottom:-9%;width:22%;filter:drop-shadow(0 24px 30px #032d2266)}
.vis figcaption{margin:1.25rem 0 0 18%;text-align:right;font-size:.9375rem;color:var(--muted)}
.vis figcaption strong{color:var(--ink)}
.panel:not([hidden]) .vis{animation:inn .45s var(--ease)}
@keyframes inn{from{opacity:.4;transform:translateY(8px)}}
.eksempler-ja{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.125rem 2.5rem;margin-top:clamp(3rem,5vw,4.5rem);padding:1.625rem 2rem;border-radius:1.75rem;background:var(--card);box-shadow:0 1px 0 var(--line)}
.eksempler-ja p{font-size:1.125rem;color:var(--muted);max-width:none}
.eksempler-ja strong{color:var(--ink);font-family:var(--rund);font-weight:900}

/* How it goes: one belt as wide as the four steps, each object standing exactly over its step
   (objects at 12.5, 37.5, 62.5 and 87.5 percent of the belt; the columns have no gap, so their centres match). */
.slik{background:radial-gradient(ellipse 70% 80% at 12% -10%,#e3ece6 0%,#e3ece600 60%),var(--mint);padding:var(--sec) var(--pad);text-align:center}
.band{margin-top:clamp(2rem,4vw,3.5rem)}
.belte-bilde{width:101.02%;max-width:none;margin-left:-.4896%}
.steg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));counter-reset:steg;margin-top:clamp(1.75rem,3vw,2.75rem)}
.steg li{counter-increment:steg;padding:0 clamp(.75rem,1.6vw,1.75rem)}
.steg-bilde{display:none}
.steg h3{font-size:1.25rem;line-height:1.2;letter-spacing:-.015em}
.steg h3::before{content:counter(steg,decimal-leading-zero);display:block;margin:0 auto .625rem;font:900 .9375rem/1 var(--rund);letter-spacing:.14em;color:var(--green);opacity:.72}
.steg p{margin:.625rem auto 0;max-width:26ch;color:var(--muted);font-size:1rem;line-height:1.6;font-weight:440}

/* Price: the clay tag hangs from the section's top edge */
.pris{background:radial-gradient(ellipse 50% 70% at 82% 0%,#0b4b37 0%,#0b4b3700 70%),var(--green);color:var(--cream);padding:var(--sec) var(--pad)}
.pris-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:start;gap:2.5rem}
.pris h2 span{display:block}
.sjekk{margin-top:2rem;display:grid;gap:.875rem}
.sjekk li{display:flex;gap:.875rem;align-items:flex-start;font-size:1.0625rem;line-height:1.45;font-weight:440}
.sjekk li::before{content:'';flex:none;width:1.5rem;height:1.5rem;margin-top:-1px;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.3 2.6 2.6L12 5.4' fill='none' stroke='%23063c2d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/1rem no-repeat,var(--krom);background-color:var(--krom-flate);box-shadow:inset 0 1px 0 #fff,0 0 0 1px var(--krom-kant)}
.lapp{position:relative;width:min(100%,19rem);justify-self:center;margin-top:calc(-1 * var(--sec));container-type:inline-size}
.lapp img{width:100%}
.lapp-pris{position:absolute;left:54.85%;top:62.84%;transform:translate(-50%,-50%) rotate(-9.5deg);display:grid;justify-items:center;color:var(--green);text-align:center}
.lapp-tall{font:900 19.73cqw/1 var(--rund);letter-spacing:-.035em;white-space:nowrap}
.lapp-kr{font:900 11.84cqw/1 var(--rund);margin-top:1.32cqw}
.lapp-liten{margin-top:5.26cqw;max-width:44.7cqw;font:800 5.79cqw/1.2 var(--rund);color:var(--green)}
.trygg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(1.5rem,3vh,2rem);border-top:1px solid #f5ecda26}
.trygg li{padding:0 clamp(1.25rem,2.6vw,2.5rem);border-left:1px solid #f5ecda26;font-size:1rem;line-height:1.55;font-weight:440;color:var(--on-green)}
.trygg li:first-child{padding-left:0;border-left:0}
.trygg-merke{display:block;margin-bottom:.625rem;font:700 .6875rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--on-green)}
.trygg strong{display:block;margin-bottom:.375rem;font:900 1.1875rem/1.25 var(--rund);letter-spacing:-.01em;color:var(--cream)}
.pris-bunn{display:flex;flex-wrap:wrap;align-items:center;gap:1.125rem 2.25rem;margin-top:clamp(2.25rem,4vw,3.25rem)}
.pris-notat{padding-left:clamp(1.25rem,2.4vw,2.25rem);border-left:1px solid #f5ecda26;font-size:.8125rem;color:var(--on-green);max-width:62ch}
.slik-ja{margin:clamp(2rem,4vw,3rem) auto 0;max-width:none;text-align:center}

/* Us: two cards of equal height, emails on one line */
.oss{padding:var(--sec) var(--pad)}
.oss h2{margin-bottom:clamp(2.25rem,4vw,3.5rem)}
.oss-grid{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,20rem) minmax(18rem,1fr);gap:clamp(1.25rem,2.4vw,2.25rem);align-items:stretch}
.kort-person{position:relative;display:flex;flex-direction:column;border-radius:1.5rem;background:var(--card);box-shadow:0 40px 70px -48px #032d22a6,0 2px 6px -2px #0b2a2114,0 0 0 1px #0b2a210d;overflow:hidden}
.kort-person img{width:100%;aspect-ratio:4/4.3;object-fit:cover;object-position:50% 22%;background:var(--mint)}
.kort-person figcaption{flex:1;display:flex;flex-direction:column;gap:.375rem;padding:1.25rem 1.5rem 1.5rem;font-size:.9375rem;line-height:1.5}
.person-navn{font:900 1.625rem/1.1 var(--rund);letter-spacing:-.025em}
.person-rolle{font-weight:650}
.person-mer{margin-top:.25rem;color:var(--muted);font-size:.875rem;font-weight:440}
.kort-person a{align-self:flex-start;margin-top:auto;padding-top:.5rem;color:var(--green);font-weight:700;text-decoration-thickness:1px;overflow-wrap:anywhere}
.oss-tekst{align-self:center;justify-self:end;max-width:34rem}
.oss-tekst p{font-size:1.125rem;line-height:1.7;font-weight:440;color:var(--ink)}
.oss-ja{margin-top:1.75rem}
.oss-tekst p.kicker{font-size:.75rem;line-height:1;font-weight:700;color:var(--muted)}
.oss-stor{margin-top:1.75rem;font:900 clamp(1.75rem,2.6vw,2.375rem)/1.08 var(--rund)!important;letter-spacing:-.02em;color:var(--green)!important}

/* Questions and the yes. The machine peeks over the card from the space above both columns, so the FAQ
   heading and the card start on the same line. */
.ja{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3.5rem clamp(2.5rem,6vw,6rem);align-items:start;background:radial-gradient(ellipse 50% 60% at 78% 20%,#053323 0%,#05332300 70%),var(--deep);color:var(--cream);padding:calc(var(--sec) + var(--titter)) var(--pad) var(--sec)}
.faq h2{margin-bottom:1.75rem}
.faq details{border-top:1px solid #f5ecda21}
.faq details:last-of-type{border-bottom:1px solid #f5ecda21}
.faq summary{position:relative;list-style:none;cursor:pointer;padding:1.375rem 3rem 1.375rem 0;font:800 1.125rem/1.35 var(--rund);transition:opacity .18s}
.faq summary:hover{opacity:.85}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:'';position:absolute;right:.375rem;top:50%;width:1rem;height:1.5px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease)}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::after{transform:rotate(0)}
.faq details p{padding:0 2.5rem 1.5rem 0;color:var(--on-green);font-size:1rem;font-weight:440}
.ja-kort{position:relative;background:var(--paper);color:var(--ink);padding:clamp(1.75rem,3.4vw,2.75rem);border-radius:1.75rem;box-shadow:0 50px 90px -50px #000c}
/* The worker peeks over the card: the flat cut across his chest (93.04 percent down the picture) sits on the card's
   top edge, so his fingers rest over it. */
.titter{position:absolute;left:50%;bottom:100%;width:13rem;translate:-50% 6.955%;pointer-events:none}
.ja-kort h2{font-size:clamp(1.875rem,2.8vw,2.5rem);margin-bottom:1.5rem;color:var(--green)}
.ja-skjema{display:grid;gap:1.125rem}
.felt-rad{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:inherit}
.felt label{display:block;font:700 .75rem/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin-bottom:.5rem}
.felt input{width:100%;min-width:0;padding:.9375rem 1rem;border:1.5px solid #8a8272;border-radius:.875rem;background:#fffdf9;box-shadow:inset 0 1px 2px #0b2a210d;font-size:1.0625rem;color:var(--ink);transition:border-color .18s,box-shadow .18s}
.felt input:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px #063c2d26}
.felt input[aria-invalid="true"]{border-color:#c2412b}
.felt-hjelp{margin-top:.5rem;font-size:.8125rem;color:var(--muted);font-weight:440}
.felt-feil{margin-top:.4375rem;font-size:.8125rem;color:#93270f;font-weight:700}
.felt-felle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ja-send{width:100%;margin-top:.25rem}
.ja-liten-tekst{font-size:.8125rem;color:var(--muted);line-height:1.55}
.status{font-size:.875rem}
.status:empty{display:none}
.ja-takk h3,.ja-epost h3{font-size:1.75rem;margin-bottom:.625rem;color:var(--green)}
.ja-takk p,.ja-epost p{color:var(--muted)}
.ja-takk:focus,.ja-epost:focus{outline:0}
.ja-epost-knapper{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}
.kopier{border:2px solid #847c6d;background:#fff;padding:0 1.375rem;min-height:3.5rem;border-radius:999px;font:800 .9375rem/1 var(--rund)}
.direkte{margin-top:1.375rem;padding-top:1.125rem;border-top:1px solid var(--line);font-size:.875rem;color:var(--muted)}
.direkte a{color:var(--green);font-weight:700;overflow-wrap:anywhere}

/* Footer: the name exactly as wide as the content column */
.bunn{background:var(--green);color:var(--cream);padding:clamp(2.5rem,5vw,4rem) var(--pad) 1.75rem;overflow:hidden;container-type:inline-size}
/* The chrome DD plus the name, exactly as wide as the content column. Nunito 900 at -0.045em: the ink of
   "Double Digital" is 6.4729 em wide and starts 0.0625 em right of its origin. The DD stands on the baseline at
   cap height (.72 em high, .6774 em wide) with .14 em of air, so the row is 7.2903 em. */
.bunn-navn{display:flex;align-items:baseline;font:900 calc(100cqw / 7.2903)/.95 var(--rund);letter-spacing:-.045em;white-space:nowrap}
.bunn-logo{height:.72em;width:auto;flex:none;margin-right:.14em}
.bunn-navn span{margin-left:-.0625em}
.bunn-fot{display:flex;flex-wrap:wrap;gap:.625rem 1.75rem;justify-content:space-between;margin-top:1.875rem;padding-top:1.375rem;border-top:1px solid #ffffff26;font-size:.8125rem;color:var(--on-green)}
.bunn-fot a{text-decoration:none}
.bunn-fot a:hover{text-decoration:underline}

/* PC: the header and the hero are exactly the first screen; the factory takes all the height the text leaves. */
@media (min-width:1025px){
  .hero{min-height:calc(100svh - var(--topp))}
  .fabrikk{flex:1 1 0;min-height:15rem;container-type:size}
  .scene{width:min(100cqw,100cqh * 3.2224)}
}

/* PC: every section is exactly one screen (David 10 Oct 2026: no section bigger than another), its content centred
   in that screen. The examples sit in two columns (picker left, before and after right) so they fit too. */
@media (min-width:1025px) and (min-height:700px){
  :root{--sec:clamp(3rem,7vh,5rem);--titter:8.5rem}
  main>section{min-height:calc(100svh - var(--topp))}
  .eksempler{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:auto auto 1fr;column-gap:clamp(2.5rem,5vw,4.5rem);align-content:center}
  .eksempler .seksjon-topp{grid-column:1;grid-row:1;text-align:left;margin-bottom:1.25rem}
  .eksempler .seksjon-topp p:not(.kicker){margin-top:1rem}
  .eksempler .seksjon-topp p{margin-inline:0}
  .velger{grid-column:1;grid-row:2;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:.375rem;margin:0}
  .fane{justify-content:flex-start;min-height:2.25rem;padding:0 1rem 0 1.25rem}
  .velger{gap:.25rem}
  .eksempler-ja p{display:none}
  .fane span{display:inline;margin-left:auto}
  .fane::after{content:'';flex:none;width:.875rem;height:.875rem;margin-left:.25rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m6 3.5 4.5 4.5L6 12.5' fill='none' stroke='%2336473f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
  .fane[aria-selected="true"]::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m6 3.5 4.5 4.5L6 12.5' fill='none' stroke='%23f5ecda' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
  .eksempler-ja{grid-column:1;grid-row:3;align-self:start;display:grid;justify-items:start;gap:1rem;margin-top:1.25rem;padding:0;background:none;box-shadow:none;border-radius:0}
  .paneler{grid-column:2;grid-row:1/4;align-self:center}
  .vis{max-width:none}
  .slik,.pris,.oss{display:flex;flex-direction:column;justify-content:center}
  .ja{align-content:center}
  .sjekk{margin-top:1.5rem;gap:.625rem}
  .lapp{width:min(15rem,47vh - 6rem)}
  .pris-grid{align-items:center}
  .trygg{margin-top:clamp(1.75rem,4vh,2.5rem)}
  .pris-bunn{margin-top:clamp(1.5rem,3.5vh,2rem)}
  .slik-ja{margin-top:clamp(1.75rem,4vh,2.5rem)}
  .titter{width:11.5rem}
  .ja-kort{padding:2rem 2.25rem}
  .ja-kort h2{margin-bottom:1.125rem}
  .ja-skjema{gap:.875rem}
  .felt input{padding:.8125rem 1rem}
  .direkte{margin-top:1rem;padding-top:.875rem}
}

/* Short laptop screens (1366 x 768 and similar): the same layout, tighter, so every section still fits one screen */
@media (min-width:1025px) and (min-height:700px) and (max-height:880px){
  :root{--sec:2rem;--titter:6.75rem}
  h2{font-size:2.375rem}
  .hero h1{font-size:3.25rem}
  .band{width:88%;margin:1.25rem auto 0}
  .steg{margin-top:1rem}
  .steg h3::before{width:2.125rem;height:2.125rem;margin-bottom:.5rem}
  .slik-ja{margin-top:1.25rem}
  .eksempler .seksjon-topp{margin-bottom:1rem}
  .velger{gap:.25rem}
  .fane{min-height:2.125rem}
  .eksempler-ja{margin-top:1rem}
  .eksempler-ja p{display:none}
  .vis figcaption{margin-top:.75rem}
  .sjekk{margin-top:1rem;gap:.3125rem}
  .lapp{width:min(13.5rem,47vh - 6rem)}
  .trygg{margin-top:1.25rem}
  .trygg li{padding:1rem}
  .pris-bunn{margin-top:1.25rem}
  .oss h2{margin-bottom:1.25rem}
  .kort-person img{aspect-ratio:4/3.5}
  .kort-person figcaption{margin-top:.625rem}
  .faq summary{padding:1rem 3rem 1rem 0}
  .titter{width:9.25rem}
  .ja-kort{padding:1.5rem 2rem}
  .ja-skjema{gap:.625rem}
  .felt input{padding:.6875rem 1rem}
}

/* Tablet */
@media (max-width:1024px){
  .meny{display:none}
  .topp-inner{justify-content:space-between}
  .oss-grid{grid-template-columns:1fr 1fr}
  .oss-tekst{grid-column:1/-1;justify-self:stretch;max-width:none}
  .ja{grid-template-columns:1fr}
  .ja-kort{order:-1}
}
@media (max-width:800px){
  .belte-bilde{display:none}
  .band{margin-top:clamp(1.25rem,4vw,2rem)}
  .steg{grid-template-columns:1fr 1fr;row-gap:2rem;margin-top:0}
  .steg-bilde{display:block;width:100%;max-width:17rem;margin:0 auto .5rem}
  .pris-grid{grid-template-columns:1fr}
  .lapp{order:-1;width:min(100%,15rem)}
  .trygg{grid-template-columns:1fr}
}
/* Phone: everything stays inside the screen, nothing is cut by the edge */
@media (max-width:600px){
  :root{--kant:20px;--pad:20px;--topp:4rem;--titter:6.25rem}
  .topp-inner{gap:.625rem}
  .ordmerke{font-size:1.125rem;gap:.5rem}.ordmerke .logo{height:2.25rem}
  .ja-liten{min-height:2.5rem;padding:0 .875rem;font-size:.8125rem}
  .hero{align-items:stretch;text-align:left;padding-top:2rem;padding-bottom:1.75rem;gap:0}
  .hero-tekst{align-items:flex-start}
  .hero h1{font-size:clamp(1.75rem,8.9vw,3.1rem)}
  .hero-handling{justify-content:flex-start}
  .hero-pris{justify-content:flex-start;flex-wrap:nowrap;gap:.75rem;margin-top:1.25rem}
  .hero-sum{padding:.4375rem 1rem .5rem;font-size:1.375rem}
  .hero-sum-tekst{padding-left:.75rem;font-size:.9375rem}
  .pris-notat{padding-left:0;border-left:0}
  .hero-handling .ja-knapp{width:100%}
  .fabrikk{margin-top:1.375rem}
  .scene{aspect-ratio:1760/918}
  .scene-bilde{top:29.956%;width:87.67%}
  .scene-arbeider{display:none}
  .ut-kort{width:21.591%;box-shadow:0 .625rem 1.125rem -.5rem #000a,0 0 0 2px #f4f0e6}
  .k1{left:54.83%;top:5.011%}.k2{left:65.625%;top:2.179%}.k3{left:76.42%;top:5.011%}
  /* Phone: the example is a racing green stage. The old site sits small and grey on top, a chrome arrow points
     down, and the new site stands in a polished chrome phone, the way it will look on the customer's own phone. */
  /* the new site stands in a real iPhone (scripts/lag-kunst.py telefoner()), a transparent picture on the green */
  .eksempler-ja{padding:1.375rem}
  .eksempler-ja .ja-knapp{width:100%}
  .velger{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin-inline:calc(-1 * var(--pad));padding:0 var(--pad) .25rem;scrollbar-width:none}
  .fane{flex:none;min-height:2.5rem;padding:0 1rem;font-size:.875rem}
  .vis{padding:1.75rem 1rem 1.25rem;border-radius:1.75rem;background:var(--mint)}
  .nettleser{display:none}
  .vis-scene{display:flex;justify-content:center}
  .tlf{position:static;width:min(66%,15rem)}
  .vis figcaption{margin:1rem 0 0;text-align:center;font-size:.8125rem}
  .steg{gap:1.75rem 0}
  .steg li{padding:0 .4375rem}
  .steg-bilde{max-width:11rem}
  .steg h3{font-size:1.0625rem}
  .steg h3::before{width:2rem;height:2rem;margin-bottom:.625rem;font-size:1rem}
  .steg p{font-size:.875rem}
  .lapp{width:min(100%,12.5rem)}
  .trygg li{padding:1.25rem 0;border-left:0;border-top:1px solid #f5ecda26}
  .trygg li:first-child{border-top:0;padding-top:0}
  .oss-grid{grid-template-columns:1fr;gap:1rem}
  .kort-person{display:grid;grid-template-columns:7.25rem minmax(0,1fr);column-gap:1rem;align-items:center;padding:.75rem;border-radius:1.375rem}
  .kort-person img{aspect-ratio:4/5;border-radius:.875rem}
  .kort-person figcaption{margin-top:0;padding:0 .25rem 0 0;gap:.25rem;font-size:.875rem}
  .person-navn{font-size:1.375rem}
  .person-mer{display:none}
  .kort-person a{margin-top:.25rem;font-size:.8125rem;overflow-wrap:anywhere}
  .oss-tekst p{font-size:1.0625rem}
  .ja-kort{margin-inline:calc(-1 * var(--pad) + .5rem);padding:1.875rem 1.25rem}
  .titter{width:10.5rem}
  .ja-epost-knapper .ja-knapp,.kopier{width:100%}
  .felt-rad{grid-template-columns:1fr}
  .slik-ja .ja-knapp{width:100%}
}
@media (max-width:400px){
  .ordmerke{font-size:1rem}.ordmerke .logo{height:2rem}
  .ja-liten{padding:0 .6875rem;font-size:.75rem}
}
@media (prefers-reduced-motion:reduce){
  :root{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media print{.topp,.ja-skjema,.skip-link,.ut{display:none}}