/* Ekrano: stilsystemet for aiptv.no. Statisk, uten rammeverk og uten byggesteg.
   Bygget på automagisk.app (site/en/index.html), med Ekranos lys: skumring og vinduslys.
   Oversikt over klassene og hvordan en ny seksjon settes sammen: nettside-verktoy/STIL.md.
   Skriftene er lagt på vår egen tjener (OFL-lisens i fonts/). Siden henter ingenting fra andre. */

/* ============ skrifter (latin og latin-ext, som hos Google Fonts) ============ */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;src:url(fonts/bricolage-grotesque-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/familjen-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/familjen-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/spline-sans-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/spline-sans-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ============ fargene og tokenene ============ */
/* Kontrast målt (WCAG) mot flaten teksten står på, se nettside-verktoy/sjekk/kontrast.py. */
:root{
  /* mørke flater, appens egne (Theme.swift) */
  --dusk:#0A0A0C; --dusk2:#141418; --dusk3:#1E1E24;
  --on-dusk:#F5F5F7;          /* 18,2:1 på dusk */
  --on-dusk-muted:#B9B1A8;    /*  9,3:1 på dusk, 7,6 på dusk3 */
  --on-dusk-faint:#938A80;    /*  5,8:1 på dusk, 4,9 på dusk3 */
  --line-dusk:rgba(255,214,170,.14);
  /* vinduslyset */
  --amber:#FFA65C;            /* 10,2:1 på dusk */
  --coral:#FF7A6B;            /*  7,8:1 på dusk */
  --cream:#FFC98F;            /* 13,2:1 på dusk */
  --glow:linear-gradient(45deg,var(--coral),var(--amber) 55%,var(--cream));
  /* lyse flater */
  --sand:#F6F1EA; --paper:#FFFFFF; --line:#E6DED3;
  --ink:#15110E;              /* 16,7:1 på sand */
  --muted:#5C5348;            /*  6,7:1 på sand */
  --faint:#6F6458;            /*  5,1:1 på sand, 5,8 på hvitt */
  --ember:#B8450F;            /*  4,8:1 på sand, 5,4 på hvitt */
  --ember-dyp:#9A390C;        /*  7,1:1 på hvitt */
  /* skrifter og bevegelse */
  --disp:'Bricolage Grotesque','Familjen Grotesk',-apple-system,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --body:'Familjen Grotesk',-apple-system,Helvetica,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ============ flatene: hver seksjon velger én ============ */
/* Komponentene leser bare disse variablene, så de virker på alle tre flatene. */
.dusk{--bg:var(--dusk);--fg:var(--on-dusk);--fg2:var(--on-dusk-muted);--fg3:var(--on-dusk-faint);
      --accent:var(--amber);--magi:var(--cream);--rule:var(--line-dusk);
      --card:var(--dusk2);--card-rule:var(--line-dusk);--card-hover:rgba(255,214,170,.3);
      --btn-bg:#fff;--btn-fg:var(--dusk);--btn-hbg:var(--amber);--btn-hfg:var(--dusk);
      --btn-glow:0 14px 40px -12px rgba(255,166,92,.65);--shadow:rgba(0,0,0,.5);
      background:var(--bg);color:var(--fg)}
.sand,.paper{--fg:var(--ink);--fg2:var(--muted);--fg3:var(--faint);
      --accent:var(--ember);--magi:var(--ember);--rule:var(--line);--card-rule:var(--line);--card-hover:#D3C6B5;
      --btn-bg:var(--ember);--btn-fg:#fff;--btn-hbg:var(--ember-dyp);--btn-hfg:#fff;
      --btn-glow:0 14px 34px -14px rgba(184,69,15,.55);--shadow:rgba(21,17,14,.07);
      color:var(--fg)}
.sand{--bg:var(--sand);--card:var(--paper);background:var(--bg)}
.paper{--bg:var(--paper);--card:var(--sand);background:var(--bg)}

/* ============ grunnen ============ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--dusk);color:var(--on-dusk);font-family:var(--body);font-size:17px;
     line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
::selection{background:var(--amber);color:var(--dusk)}
a{color:inherit}
img,svg,video,canvas{max-width:100%}
ul,ol{list-style:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
.nw{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:2px solid var(--accent,var(--amber));outline-offset:3px;border-radius:4px}
.hopp{position:absolute;left:16px;top:-80px;z-index:300;background:var(--amber);color:var(--dusk);
      padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600}
.hopp:focus{top:12px}

/* ============ fremdriftsstreken ============ */
#progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);
          background:var(--glow);z-index:120;pointer-events:none}

/* ============ menyen: mørk over mørke flater, lys over lyse ============ */
nav{position:fixed;top:0;left:0;right:0;z-index:100;color:#fff;border-bottom:1px solid transparent;
    transition:background .4s,border-color .4s,color .4s}
nav .n-in{max-width:1200px;margin:0 auto;padding:18px clamp(20px,4vw,48px);display:flex;align-items:center;gap:32px}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;font-size:21px;
      letter-spacing:-.015em;line-height:1;text-decoration:none;color:inherit}
.logo svg,.logo img{width:28px;height:28px;flex:none;display:block}
.n-links{display:flex;gap:26px;margin-left:auto;font-size:15px;font-weight:500}
.n-links a{text-decoration:none;opacity:.8;transition:opacity .2s;white-space:nowrap}
.n-links a:hover,.n-links a:focus-visible{opacity:1}
nav .cta{font-size:14.5px;font-weight:600;text-decoration:none;border:1.5px solid currentColor;border-radius:100px;
         padding:9px 20px;white-space:nowrap;transition:all .25s var(--ease)}
nav.on-dark .cta:hover{background:var(--amber);border-color:var(--amber);color:var(--dusk)}
nav.on-dark.fast{background:rgba(10,10,12,.8);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
                 border-bottom-color:var(--line-dusk)}
nav.on-light{color:var(--ink);background:rgba(246,241,234,.86);-webkit-backdrop-filter:blur(16px);
             backdrop-filter:blur(16px);border-bottom-color:var(--line)}
nav.on-light .cta:hover{background:var(--ember);border-color:var(--ember);color:#fff}
nav.on-light :focus-visible{outline-color:var(--ember)}
@media(max-width:1080px){.n-links{display:none} nav .cta{margin-left:auto}}
@media(max-width:400px){nav .n-in{gap:14px} nav .cta{padding:8px 16px}}

/* ============ inntoning: bare når skriptet har satt klassen js; uten er alt synlig ============ */
.js [data-r]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);
             transition-delay:calc(var(--d,0)*90ms)}
.js [data-r].in{opacity:1;transform:none}
.ws .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.12em .06em .18em;margin:-.12em -.06em -.18em}
.ws .w>span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease);
            transition-delay:calc(var(--i)*55ms)}
.ws.in .w>span{transform:none}
.ws.ferdig .w{overflow:visible}

/* ============ felles for seksjonene ============ */
section{padding:clamp(90px,12vw,160px) 0;position:relative}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
         display:flex;align-items:center;gap:12px;margin-bottom:26px}
.eyebrow::before{content:'';width:34px;height:1.5px;background:currentColor;flex:none}
/* Uten versaler: for alt som inneholder Apples produktnavn (iPhone, iPad, Apple TV, Mac, iCloud). */
.eyebrow.plain{text-transform:none;letter-spacing:.04em;font-size:12.5px}
h2{font-family:var(--disp);font-weight:700;font-size:clamp(34px,5.4vw,68px);line-height:1.04;letter-spacing:-.03em;
   text-wrap:balance;max-width:22ch}
.magi{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--magi)}
.lede{font-size:clamp(17px,1.9vw,20px);color:var(--fg2);max-width:56ch;margin-top:24px}
.sig{font-family:var(--mono);font-size:12px;color:var(--fg3);letter-spacing:.02em}

/* ============ knapper og lenker ============ */
.btn{display:inline-block;background:var(--btn-bg,#fff);color:var(--btn-fg,var(--dusk));font-family:var(--body);
     font-weight:600;font-size:16px;line-height:1.3;border:none;border-radius:100px;padding:15px 30px;text-decoration:none;
     cursor:pointer;white-space:nowrap;transition:transform .3s var(--ease),background .25s,color .25s,box-shadow .3s}
.btn:hover{transform:translateY(-2px) scale(1.02);background:var(--btn-hbg);color:var(--btn-hfg);box-shadow:var(--btn-glow)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.link-arrow{font-weight:500;font-size:16px;color:var(--fg2);text-decoration:none;border-bottom:1px solid var(--rule);
            padding-bottom:2px;transition:color .2s,border-color .2s}
.link-arrow:hover,.link-arrow:focus-visible{color:var(--fg);border-color:currentColor}

/* ============ vinduet: det lille merket (erstatter ✦) ============ */
/* Samme tegning som logoen: vindu med glød fra korall via rav til krem, varmhvit karm og varm glød. */
.vindu{display:inline-block;width:.8em;height:.6em;border-radius:.13em;background:var(--glow);vertical-align:middle;
       box-shadow:inset 0 0 0 .08em rgba(245,245,247,.92),0 0 .55em rgba(255,166,92,.5);flex:none}
ul.vinduer{display:grid;gap:9px}
ul.vinduer li{position:relative;padding-left:24px}
ul.vinduer li::before{content:'';position:absolute;left:0;top:.52em;width:13px;height:10px;border-radius:2px;
                      background:var(--glow);box-shadow:inset 0 0 0 1.3px rgba(245,245,247,.92),0 0 7px rgba(255,166,92,.45)}

/* ============ merkelappen (chip) ============ */
.chip{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;
      line-height:1.4;color:var(--fg);border:1px solid var(--rule);border-radius:100px;padding:8px 16px;width:max-content;
      max-width:100%;background:color-mix(in srgb,var(--bg) 55%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.chip.caps{text-transform:uppercase;letter-spacing:.08em}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--amber);position:relative;flex:none;
       box-shadow:0 0 10px rgba(255,166,92,.8)}
.pulse::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--amber);opacity:0;
              animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(.4);opacity:.9}70%{opacity:0}100%{transform:scale(1.6);opacity:0}}

/* ============ kort ============ */
.card{background:var(--card);border:1px solid var(--card-rule);border-radius:18px;padding:30px;
      transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 60px var(--shadow);border-color:var(--card-hover)}
.card .cap{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.card h3{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:-.015em;margin-bottom:8px}
.card p{font-size:15px;color:var(--fg2)}

/* ============ toppen: byen i skumringen ============ */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;
      background:linear-gradient(180deg,#070709 0%,#0d0b10 46%,#1a1216 76%,#2a1a1a 100%)}
.hero>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-in{position:relative;z-index:2;flex:1;width:100%;display:flex;flex-direction:column;justify-content:center;
         padding-top:clamp(100px,13vh,130px);padding-bottom:var(--byrom,clamp(110px,15vh,150px))}
.hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(50px,min(11vw,14.5vh),128px);line-height:.98;letter-spacing:-.035em;
         margin:30px 0 0;text-wrap:balance;text-shadow:0 2px 30px rgba(10,10,12,.55)}
.hero h1 .magi{font-size:1.06em;letter-spacing:-.02em}
/* Over byen gløder kursivordene svakt som vinduslys, og gløden tennes når ordene har landet (.ferdig). */
.hero h1 .magi,.slutt h2 .magi{text-shadow:0 0 .42em rgba(255,166,92,0),0 2px 30px rgba(10,10,12,.55);transition:text-shadow 1.6s ease}
.hero h1.ferdig .magi,.slutt h2.ferdig .magi,html:not(.js) .hero h1 .magi,html:not(.js) .slutt h2 .magi{
  text-shadow:0 0 .42em rgba(255,166,92,.3),0 2px 30px rgba(10,10,12,.55)}
.hero-sub{font-size:clamp(17px,1.9vw,20px);line-height:1.55;color:var(--fg2);max-width:52ch;margin-top:28px;
          text-shadow:0 1px 16px rgba(10,10,12,.7)}
.hero-cta{display:flex;align-items:center;gap:14px 26px;flex-wrap:wrap;margin-top:34px}
.hero-micro{font-family:var(--mono);font-size:12.5px;color:var(--fg2);margin-top:24px;letter-spacing:.03em}
.hero-note{font-size:14px;color:var(--fg2);margin-top:8px;max-width:72ch;text-shadow:0 1px 12px rgba(10,10,12,.8)}
/* På smale skjermer står byen under teksten, ikke bak den. */
@media(max-width:760px){.hero-in{--byrom:clamp(200px,30vh,280px)}}
@media(max-width:400px){.chip{font-size:11.5px;letter-spacing:.01em;padding:7px 13px;gap:9px}}
@media(max-width:560px){
  .hero-in{padding-top:92px}
  .hero h1{margin-top:24px}
  .hero-sub{font-size:16.5px;margin-top:22px}
  .hero-cta{margin-top:28px}
  .hero-micro{margin-top:20px}
  .hero-note{margin-top:6px}
}
.hero-micro .kort{display:none}
@media(max-width:560px){.hero-micro .kort{display:inline} .hero-micro .sep{display:none}}

/* ============ tekstbåndet ============ */
.marquee{padding:20px 0;overflow:hidden;border-top:1px solid var(--line-dusk);border-bottom:1px solid var(--line-dusk)}
.m-track{display:flex;width:max-content;animation:mq 52s linear infinite}
.marquee:hover .m-track{animation-play-state:paused}
.m-set{display:flex;flex:none}
.m-set li{display:flex;align-items:center;gap:56px;padding-right:56px;font-family:var(--serif);font-style:italic;
          font-size:clamp(17px,2.2vw,22px);white-space:nowrap;color:var(--fg2)}
.m-set li::after{content:'';width:.8em;height:.6em;border-radius:.13em;background:var(--glow);flex:none;
                 box-shadow:inset 0 0 0 .08em rgba(245,245,247,.92),0 0 .6em rgba(255,166,92,.55)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ============ kjenner du deg igjen: bunken som strykes ============ */
.pains{margin-top:60px;padding-bottom:clamp(90px,18vh,170px)}
.pain{position:sticky;background:var(--card);border:1px solid var(--card-rule);border-radius:18px;
      padding:clamp(22px,3.2vw,32px) clamp(20px,3.2vw,32px);margin-bottom:16px;display:flex;gap:clamp(14px,2.4vw,24px);
      align-items:baseline;box-shadow:0 20px 50px var(--shadow);transition:transform .1s linear,filter .1s linear}
.pain .no{font-family:var(--mono);font-size:13px;color:var(--fg3);min-width:30px}
.pain p{font-family:var(--disp);font-weight:600;font-size:clamp(19px,2.6vw,29px);letter-spacing:-.015em;line-height:1.3;
        max-width:min(34ch,100%);transition:color .7s ease .5s}
/* Streken er bakgrunn på selve teksten, så den følger hver linje når setningen brekker. */
.pain p .t{background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;
           background-position:0 .62em;background-size:0 2.5px;-webkit-box-decoration-break:clone;box-decoration-break:clone;
           transition:background-size 1.2s var(--ease) .15s}
.pain.struck p{color:var(--fg3)}
.pain.struck p .t{background-size:100% 2.5px}
.payoff{margin-top:56px;position:relative;z-index:2;background:var(--bg)}
.payoff .big{font-family:var(--disp);font-weight:800;font-size:clamp(38px,6.5vw,84px);letter-spacing:-.035em;line-height:1}
.payoff .big em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--magi)}
.payoff p{color:var(--fg2);margin-top:18px;max-width:50ch}

/* ============ slik virker det: kort i bunke ============ */
.stack{margin-top:70px}
.s-card{position:sticky;background:var(--card);border:1px solid var(--card-rule);border-radius:22px;
        padding:clamp(28px,5vw,56px);margin-bottom:26px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
        gap:clamp(24px,4vw,56px);box-shadow:0 24px 60px var(--shadow);transition:transform .1s linear,filter .1s linear}
@media(max-width:820px){.s-card{grid-template-columns:minmax(0,1fr)}}
.s-num{font-family:var(--serif);font-style:italic;font-size:clamp(56px,7vw,96px);color:var(--magi);line-height:1}
.s-card h3{font-family:var(--disp);font-weight:700;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.02em;line-height:1.1;margin:14px 0 12px}
.s-card .s-txt p{color:var(--fg2);font-size:16.5px;max-width:44ch}

/* ============ de små demoene (A6), på sidens egen flate ============ */
.s-demo{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px 24px;font-size:14.5px;
        align-self:center;width:100%;color:var(--ink);box-shadow:0 18px 44px -26px rgba(21,17,14,.35)}
.s-demo .cap{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
             margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.s-demo .cap b{font-weight:500;color:var(--ember)}
.d-pill{font-family:var(--body);font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;border-radius:100px;
        padding:5px 13px;border:1.5px solid var(--line);color:var(--faint);transition:all .4s var(--ease)}
.d-pill.on{background:var(--ember);border-color:var(--ember);color:#fff}
/* skjemaet */
.d-seg{display:grid;grid-template-columns:1fr 1fr;background:var(--sand);border-radius:9px;padding:3px;margin-bottom:12px;
       font-size:13px;font-weight:600;text-align:center;color:var(--muted)}
.d-seg span{padding:6px 8px;border-radius:7px}
.d-seg .on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(21,17,14,.14)}
.d-felt{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.d-felt div{display:grid;grid-template-columns:7.6em minmax(0,1fr);gap:10px;padding:9px 14px;align-items:baseline}
.d-felt div+div{border-top:1px solid var(--line)}
.d-felt dt{color:var(--muted);font-size:13.5px}
.d-felt dd{font-family:var(--mono);font-size:13px;color:var(--ink);min-height:1.5em;overflow-wrap:anywhere}
/* Et tomt felt får en linje å stå på (grunnlinje), så raden har samme høyde før og etter at teksten er skrevet. */
.d-felt dd:empty::before{content:'\200b'}
@media(max-width:480px){
  .d-felt div{grid-template-columns:minmax(0,1fr);gap:1px;padding:8px 12px}
  .d-felt dt{font-size:11.5px;color:var(--faint)}
}
.d-felt dd.skriver::after{content:'';display:inline-block;width:1.5px;height:1.1em;background:var(--ember);
                         vertical-align:-.2em;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.d-test{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;font-size:13.5px}
.d-knapp{font-weight:600;color:var(--ember);border:1.5px solid var(--line);border-radius:100px;padding:6px 14px;
         transition:background .3s,border-color .3s}
.d-knapp.trykk{background:var(--sand);border-color:#D3C6B5}
.d-svar{display:flex;align-items:center;gap:8px;color:var(--muted);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.d-svar.skjult{opacity:0;transform:translateX(-6px)}
/* haken */
.hake{width:20px;height:20px;border-radius:50%;background:var(--ember);flex:none;position:relative;
      transition:transform .5s var(--ease),opacity .3s,background .3s}
.hake::after{content:'';position:absolute;left:7px;top:4px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;
             transform:rotate(45deg)}
.hake.av{transform:scale(.3);opacity:0}
/* enhetene */
.d-enheter li{display:grid;grid-template-columns:minmax(0,1fr) auto 20px;gap:12px;align-items:center;padding:11px 2px}
.d-enheter li+li{border-top:1px solid var(--line)}
.d-enheter b{font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:-.01em}
.d-enheter .st{font-family:var(--mono);font-size:12px;color:var(--faint)}
.d-enheter .st.klar{color:var(--ember)}
.prikker::after{content:'';animation:prikker 1.2s steps(4) infinite}
@keyframes prikker{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
/* fortsett */
.d-fortsett{display:grid;grid-template-columns:clamp(96px,32%,150px) minmax(0,1fr);gap:16px;align-items:center}
.d-bilde{aspect-ratio:16/9;border-radius:9px;position:relative;overflow:hidden;
         background:radial-gradient(120% 90% at 70% 110%,rgba(255,122,107,.75),rgba(255,166,92,.25) 45%,transparent 70%),
                    linear-gradient(180deg,#131117,#2a1a1c)}
.d-bilde::after{content:'';position:absolute;left:0;right:0;bottom:0;height:34%;
                background:linear-gradient(90deg,#0c0a0e 0 14%,transparent 14% 18%,#0c0a0e 18% 40%,transparent 40% 44%,#0c0a0e 44% 71%,transparent 71% 75%,#0c0a0e 75%);
                clip-path:polygon(0 30%,14% 30%,14% 0,40% 0,40% 45%,71% 45%,71% 10%,100% 10%,100% 100%,0 100%)}
.d-tittel{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:-.01em;line-height:1.2}
@media(max-width:480px){.d-fortsett{grid-template-columns:84px minmax(0,1fr);gap:13px} .d-tittel{font-size:16px}}
.d-strek{height:5px;border-radius:5px;background:var(--line);margin:12px 0 8px;overflow:hidden}
.d-strek span{display:block;height:100%;width:42.4%;border-radius:5px;background:linear-gradient(90deg,var(--ember),var(--coral))}
.d-tid{font-family:var(--mono);font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.d-tid b{color:var(--ink);font-weight:500}
.d-spill{display:inline-flex;align-items:center;gap:9px;margin-top:16px;font-size:13.5px;font-weight:600;color:#fff;
         background:var(--ember);border-radius:100px;padding:8px 16px 8px 13px;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.d-spill::before{content:'';border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #fff}
.d-spill.skjult{opacity:0;transform:translateY(6px)}

/* ============ last ned: samme by, alle vinduer tent ============ */
.slutt{position:relative;overflow:hidden;text-align:center;padding-bottom:clamp(230px,26vw,300px);
       background:linear-gradient(180deg,#0A0A0C 0%,#0f0c10 55%,#22161a 100%)}
.slutt>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.slutt .wrap{position:relative;z-index:2}
.slutt .eyebrow{justify-content:center}
.slutt .eyebrow::after{content:'';width:34px;height:1.5px;background:currentColor;flex:none}
.slutt h2{margin:0 auto}
.slutt .lede{margin-left:auto;margin-right:auto}
/* Apples merker: originalene, uendret, aldri animert og aldri flyttet ved hover. 48 punkter høye,
   med fri plass på en firedel av høyden (12 punkter) på alle kanter. Står aldri inne i [data-r]. */
.badges{display:flex;flex-wrap:wrap;justify-content:center;margin:34px auto 0;max-width:640px}
.badge{display:block;padding:12px;line-height:0}
.badge a{display:block;line-height:0;border-radius:9px}
.badge a:focus-visible{outline:2px solid #fff;outline-offset:4px}
.badge img{display:block;height:48px;width:auto;max-width:none}
.slutt .dato{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--fg2);margin-top:14px}

/* ============ bunnteksten ============ */
footer.dusk{--bg:#09080A;color:var(--on-dusk-muted);padding:72px 0 40px;font-size:14.5px;border-top:1px solid var(--line-dusk)}
.ft{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:40px 32px}
@media(max-width:980px){.ft{grid-template-columns:repeat(2,minmax(0,1fr))} .ft>div:first-child{grid-column:1/-1}}
@media(max-width:360px){.ft{grid-template-columns:minmax(0,1fr)}}
.ft .logo{color:#fff;font-size:24px;margin-bottom:16px}
.ft .logo img{width:32px;height:32px}
.ft p{max-width:34ch;color:var(--on-dusk-muted)}
.ft .ft-h{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dusk-faint);
       margin-bottom:16px;font-weight:500;line-height:1.4;max-width:none}
.ft ul{display:grid;gap:10px}
.ft a{text-decoration:none;color:var(--on-dusk-muted);transition:color .2s}
.ft a:hover,.ft a:focus-visible{color:#fff}
.ft address{font-style:normal;display:grid;gap:10px}
.bunn{border-top:1px solid var(--line-dusk);margin-top:56px;padding-top:26px;display:flex;justify-content:space-between;
      gap:10px 16px;flex-wrap:wrap;font-size:13px;color:var(--on-dusk-faint)}
.bunn b{color:var(--on-dusk-muted);font-weight:500}
.varemerker{font-size:12.5px;color:var(--on-dusk-faint);margin-top:18px;max-width:none!important;line-height:1.55}

/* ============ redusert bevegelse: alt står stille og ferdig ============ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-r],.ws .w>span,.ws .magi{opacity:1!important;transform:none!important;transition:none!important}
  .pulse::after,.d-felt dd.skriver::after,.prikker::after{animation:none}
  .m-track{animation:none;width:auto}
  .m-set{flex-wrap:wrap;justify-content:center;row-gap:6px;flex:1}
  .m-set[aria-hidden]{display:none}
  .btn:hover,.card:hover{transform:none}
  .pain p,.pain p .t{transition:none}
}