/* Veripolis delt chrome — ÉN kilde for identitet + topbar + hero + footer + felles primitiver (#19).
   Alle sider lenker denne; ingen side kopierer chromen inn i sin egen <style>. Side-spesifikk CSS
   bor i sidens egen <style>. Endre utseendet på tvers HER — aldri per fil. */
/* #258 (04.10, etter toppkommentaren — midt i den brøt den :root): «hidden» skal alltid skjule. Nettleserens egen regel for [hidden] taper mot hver display-regel en klasse har, så .romvalg dyttet forsiden ned
   og mobilfeltet i oppfølgingsskjemaet sto synlig uten at «Tett» var valgt. Én regel lukker hele klassen. */
[hidden] { display:none !important; }
:root { --gold:#daa520; --gold-2:#f0cf7a; --ink:#f4f1ea; --muted:rgba(244,241,234,0.62);
  /* #165: utseendet er et valg med data — standard (dagens), mørk, lys. Alle flater bruker disse; temaene nederst i arket bytter bare verdiene. */
  --ink-2:rgba(244,241,234,.72); --ink-3:rgba(244,241,234,.55); --bg:#07070d; --bg-a:#0a0a15; --bg-b:#10101f; --bg-c:#0a0f1e; --glow-a:rgba(218,165,32,.13); --glow-b:rgba(218,165,32,.07);
  --card:rgba(20,20,34,.5); --card-2:rgba(20,20,34,.6); --card-3:rgba(20,20,34,.4); --line:rgba(218,165,32,.3); --field:rgba(255,255,255,.06); --field-line:rgba(255,255,255,.18);
  --hdr-scrolled-a:rgba(7,7,13,.92); --hdr-scrolled-b:rgba(7,7,13,.65); --footer-bg:rgba(0,0,0,.25); --bar:rgba(10,10,18,.9);
  /* #299: skriftene, aksenten, statusfargene, radius og skygger er tokener, så en drakt bytter verdiene uten CSS per side */
  --font-prose:'Cormorant Garamond',Georgia,serif; --font-ui:'Helvetica Neue',Arial,sans-serif; --accent:var(--gold); --accent-2:var(--gold-2); --accent-soft:rgba(218,165,32,.08); --line-soft:rgba(218,165,32,.18);
  --ok:#5fb27a; --warn:#daa520; --bad:#d9534f; --info:rgba(244,241,234,.55); --radius:18px; --shadow:none; --shadow-2:0 8px 26px rgba(0,0,0,.4); }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-prose); background:var(--bg); color:var(--ink); min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
body::before { content:''; position:fixed; inset:0; z-index:-2; background:
    radial-gradient(1100px 760px at 50% -12%, var(--glow-a), transparent 62%),
    radial-gradient(900px 720px at 82% 116%, var(--glow-b), transparent 60%),
    linear-gradient(to bottom, var(--bg-a) 0%, var(--bg-b) 45%, var(--bg-c) 100%); }
body::after { content:''; position:fixed; inset:0; z-index:-1; opacity:.5; pointer-events:none; background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(240,207,122,.5), transparent),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(240,207,122,.35), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(240,207,122,.4), transparent),
    radial-gradient(1px 1px at 85% 25%, rgba(240,207,122,.3), transparent),
    radial-gradient(1.5px 1.5px at 55% 15%, rgba(240,207,122,.35), transparent);
    animation:drift 26s linear infinite; }
@keyframes drift { from{transform:translateY(0)} to{transform:translateY(-40px)} }

header { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
    padding:1.1rem 1.6rem; background:linear-gradient(to bottom, rgba(255,255,255,.72), rgba(255,255,255,.32)); backdrop-filter:blur(8px); transition:background .3s ease; }
header.scrolled { background:linear-gradient(to bottom, var(--hdr-scrolled-a), var(--hdr-scrolled-b)); }
.brandbar { display:flex; align-items:center; gap:.55rem; }
/* #267 (Moosa 04.10: «Ser ut som det mangler en tilbake-pil øverst til venstre, bør det ikke finnes en så lenge man ikke er på selve hovedsiden?»):
   tilbake-pila står først i toppbaren på hver side unntatt hovedsiden, i samme form som utseende-knappen til høyre (#7: samme knappeuttrykk på
   begge sider). Den har tatt plassen til nøkkerose-ikonet på undersidene og krysset på Min side (#244). Målet regnes av js/tilbake-logikk.js. */
.backarrow { display:inline-flex; align-items:center; justify-content:center; flex:none; background:transparent; border:1px solid rgba(176,138,20,.5); color:#8a6510; border-radius:999px; padding:.32rem .62rem; text-decoration:none; cursor:pointer; transition:all .25s ease; }
.backarrow svg { width:16px; height:16px; display:block; }
.backarrow:hover { background:rgba(176,138,20,.12); }
.backarrow.busy { opacity:.55; }
body:not([data-rom]) .hleft .backarrow { display:none; }   /* hovedsiden har ingen pil; verdenene bærer <body data-rom> (#258) */
body[data-no-back] .backarrow { display:none; }   /* testersiden: ingen utgang midt i oppdraget (#53) */
.pagename { font-size:1.05rem; letter-spacing:3px; color:#a67c0a; font-weight:700; text-transform:uppercase; transition:color .3s ease; }
header.scrolled .backarrow { border-color:rgba(218,165,32,.4); color:var(--gold); }
header.scrolled .backarrow:hover { background:rgba(218,165,32,.2); }
header.scrolled .pagename { color:var(--gold); font-weight:700; }
.lang { display:flex; gap:.35rem; }
.lang button { background:transparent; border:1px solid rgba(176,138,20,.5); color:#8a6510; font-weight:700; border-radius:999px;
    padding:.32rem .85rem; cursor:pointer; font-family:inherit; font-size:.92rem; letter-spacing:1px; transition:all .25s ease; }
.lang button.active { background:#b8860b; border-color:#b8860b; color:#14141f; }
.lang button:hover { background:rgba(176,138,20,.12); }
header.scrolled .lang button { border-color:rgba(218,165,32,.4); color:var(--gold); }
header.scrolled .lang button.active { background:rgba(218,165,32,.2); border-color:var(--gold); color:#fff; }
header.scrolled .lang button:hover { background:rgba(218,165,32,.2); }
.hbar { display:flex; align-items:center; gap:.6rem; }
.who { font-size:1rem; color:rgba(20,20,31,.6); letter-spacing:.3px; font-weight:700; transition:color .3s ease; }
.authbtn { display:inline-flex; align-items:center; gap:.42rem; white-space:nowrap; background:transparent; border:1px solid rgba(176,138,20,.5); color:#8a6510; font-weight:700; border-radius:999px; padding:.32rem .85rem; cursor:pointer; font-family:inherit; font-size:.92rem; letter-spacing:1px; transition:all .25s ease; }
.authbtn:hover { background:rgba(176,138,20,.12); }
.authbtn .ico { display:none; }   /* #245: innloggingsikonet (dør med pil) står bare på smale skjermer */
.authbtn .ico svg { width:16px; height:16px; display:block; }
header.scrolled .authbtn { border-color:rgba(218,165,32,.4); color:var(--gold); }
header.scrolled .authbtn:hover { background:rgba(218,165,32,.2); }
header.scrolled .who { color:var(--muted); }
.who a, .who .wholink { color:inherit; text-decoration:underline; text-decoration-color:rgba(218,165,32,.85); text-underline-offset:3px; text-decoration-thickness:1.5px; cursor:pointer; transition:text-decoration-color .25s ease, color .25s ease; }
.who a:hover, .who .wholink:hover { text-decoration-color:var(--gold); color:var(--gold); }
/* Forsiden har egen header der hilsenen er selve .who-elementet (skrivemaskin-tekst, ikke barn-<a>) → gjør .who klikkbar med samme understrek */
.who.aslink { cursor:pointer; text-decoration:underline; text-decoration-color:rgba(218,165,32,.85); text-underline-offset:3px; text-decoration-thickness:1.5px; transition:text-decoration-color .25s ease, color .25s ease; }
.who.aslink:hover { text-decoration-color:var(--gold); color:var(--gold); }
/* Gate-skjemaer (followup, tilbakemelding): eksplisitt «Ikke nå»-avvis — dempet lenke-knapp under primærknappen. Overlayen dekker header-en igjen (ingen stille forbigåelse); «Ikke nå» er den ærlige veien ut. */
.fu-skip { display:block; margin:.9rem auto 0; background:none; border:none; color:var(--muted); font-family:var(--font-ui); font-size:.95rem; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.fu-skip:hover { color:var(--gold); }

/* Forside-variant (#7): VELKOMMEN/VERIPOLIS-ordmerke i stedet for hjem-ikon+sidenavn (forsiden ER hjem).
   Undersider bruker .brandbar/.backarrow/.pagename over; forsiden og verdenene bruker .hleft/.brandword/.adminlink her, verdenene med .backarrow først (#267). */
.hleft { display:flex; align-items:center; gap:.75rem; }
.brandword { font-size:1.15rem; letter-spacing:4px; color:#a67c0a; font-weight:700; text-transform:uppercase; transition:color .3s ease; }
header.scrolled .brandword { color:var(--gold); font-weight:700; }
.brandword .bw-scrolled { display:none; }
header.scrolled .brandword .bw-top { display:none; }
header.scrolled .brandword .bw-scrolled { display:inline; }
body.authed .brandword .bw-top { display:none; }
body.authed .brandword .bw-scrolled { display:inline; }
.adminlink { display:none; font-family:var(--font-ui); font-size:.7rem; letter-spacing:1.5px; text-transform:uppercase; color:#8a6510; text-decoration:none; border:1px solid rgba(176,138,20,.5); border-radius:999px; padding:.22rem .6rem; transition:all .2s; }
header.scrolled .adminlink { color:var(--gold); border-color:rgba(218,165,32,.4); }
.adminlink:hover { background:rgba(176,138,20,.12); }

.hero { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; padding:4.8rem 1.5rem 1.4rem; }
.whiteband { position:absolute; top:0; left:0; right:0; height:172px; background:linear-gradient(to bottom, #fff calc(100% - 2px), #2c2f37); z-index:0; }
.subline { position:absolute; left:0; right:0; z-index:0; pointer-events:none; background:linear-gradient(to bottom, #2c2f37 0%, rgba(44,47,55,0) 100%); }
.logoglow { position:absolute; z-index:0; pointer-events:none; border-radius:50%;
    background:radial-gradient(ellipse at center, #2b2e38 0%, #2b2e38 42%, rgba(43,46,56,0) 74%); filter:blur(9px); }
.hero img, .hero .tag, .hero .scrollcue { position:relative; z-index:1; }
.hero img { width:min(72vw,520px); margin-top:-1px;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%), linear-gradient(to bottom, #000 0, #000 90%, transparent 100%); -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%), linear-gradient(to bottom, #000 0, #000 90%, transparent 100%); mask-composite:intersect;
    animation:rise 1.6s cubic-bezier(.2,.7,.2,1) both; }
.hero .tag { margin-top:1.6rem; font-size:clamp(1.25rem,2.6vw,1.9rem); font-weight:300; letter-spacing:1px; color:var(--ink); max-width:720px; line-height:1.5; animation:rise 1.8s .2s cubic-bezier(.2,.7,.2,1) both; }
.hero .tag em { font-style:italic; color:var(--gold-2); }
.frase { display:inline-block; max-width:100%; }   /* #290: en frase i en tittel flyttes hel til neste linje (Veripolis.fraser) */
.frase.frase-lang { display:inline; }   /* #290: en frase som ikke får plass på én linje alene, flyter som vanlig tekst; ordet foran tankestreken står samlet */
.scrollcue { margin-top:2.4rem; color:var(--muted); font-size:.95rem; letter-spacing:3px; text-transform:uppercase; animation:pulse 2.6s ease-in-out infinite; }
@keyframes rise { from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:translateY(0)} }
@keyframes pulse { 0%,100%{opacity:.4} 50%{opacity:.9} }

.content, .offerings { max-width:1120px; margin:0 auto; padding:0.6rem 1.4rem 5rem; }
.sectitle { text-align:center; font-size:clamp(1.6rem,3vw,2.3rem); font-weight:400; color:var(--gold); letter-spacing:1px; margin-bottom:.4rem; text-wrap:balance; }
.secsub { text-align:center; color:var(--muted); font-size:1.15rem; margin-bottom:2.6rem; text-wrap:balance; }
.backlink { display:inline-block; margin-top:1.3rem; padding:.85rem 2rem; border-radius:999px; border:none; background:linear-gradient(135deg,var(--gold),#b8860b); color:#12121e; font-family:var(--font-ui); font-weight:700; text-decoration:none; }
.dchoose { display:inline-block; margin-top:1.1rem; font-family:var(--font-ui); font-size:.8rem; letter-spacing:1.5px; text-transform:uppercase; color:rgba(240,207,122,.85); background:none; border:none; padding:0; cursor:pointer; text-decoration:none; transition:color .25s ease; }
.dchoose:hover { color:var(--gold-2); }
.livearrow { display:inline-block; animation:arrownudge 1.6s ease-in-out infinite; animation-delay:var(--pilfase, 0ms); }   /* #195: fasen settes fra klokken (Veripolis.synkPiler), så alle piler nikker i takt uansett når de tegnes */
@keyframes arrownudge { 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(4px); } }

/* Ikon-kort (#5) — felles kort-primitiv brukt på tvers (login-gate, paneler, feilside). Side-
   spesifikke kort-varianter (.desire/.setcard/.card) + modifikatorer (.pane.checkout) bor per side. */
.pane { border:1px solid var(--line); border-radius:18px; background:var(--card); backdrop-filter:blur(6px); padding:2.3rem 1.9rem; text-align:center; }
.pane .smark { color:var(--gold-2); line-height:0; display:block; margin-bottom:.7rem; filter:drop-shadow(0 4px 18px rgba(218,165,32,.3)); }
.pane .smark svg { width:46px; height:46px; }
.pane h3 { font-size:1.5rem; line-height:1.3; color:var(--gold); font-weight:500; letter-spacing:.3px; margin-bottom:.5rem; text-wrap:balance; }

.testimonials { max-width:700px; margin:2.6rem auto 0; text-align:center; min-height:170px; }
.tm-quote { font-size:1.4rem; line-height:1.55; color:var(--ink); font-style:italic; transition:opacity .6s ease;
  /* pre-line: vbreaks-målingens harde \n rendres som brudd; ellers ufarlig (ingen \n i annen tekst) */
  white-space: pre-line; }
/* Like lange linjer (Moosa 29.08, skjerpet): bruddene avdekkes ÉN gang FØR skrivingen — vbreaks
   måler med denne klassen på et usynlig prøveoppsett, og skrivemaskinen skriver teksten rett ut
   ferdigbrutt. Klassen brukes KUN under målingen; den skrevne teksten bærer bruddene selv. */
.tm-quote.balanced { text-wrap: balance; }
/* Lange ord (overskrifter/URL-er) skal bryte, ikke gi vannrett rulling ved 320px (Moosa: oppløsning varierer). */
body, h1, h2, h3, .sectitle, p { overflow-wrap: break-word; }
.tm-author { margin-top:1rem; color:var(--gold); font-size:.92rem; letter-spacing:1.5px; text-transform:uppercase; font-family:var(--font-ui); opacity:0; transition:opacity .6s ease; }
.tm-author.show { opacity:1; }
footer { text-align:center; padding:2.6rem 1.5rem 3rem; border-top:1px solid rgba(218,165,32,.14); background:var(--footer-bg); }
footer .flinks { display:flex; justify-content:center; gap:1.4rem; flex-wrap:wrap; margin-bottom:1rem; }
footer a { color:rgba(218,165,32,.85); text-decoration:none; font-family:var(--font-ui); font-size:.9rem; letter-spacing:.4px; }
footer a:hover { color:#fff; }
footer .copy { color:var(--muted); font-size:.95rem; }
@media (max-width:560px){ header{padding:.9rem .8rem; gap:.5rem} .pagename{font-size:.86rem;letter-spacing:1.6px} .brandword{font-size:.9rem;letter-spacing:1.6px} .backarrow{padding:.26rem .45rem} .lang{gap:.25rem} .lang button, .authbtn{font-size:.78rem;padding:.28rem .5rem;letter-spacing:.6px} .hbar{gap:.4rem} .who{display:none} .hero{min-height:auto;padding-bottom:2.4rem} .scrollcue{margin-top:2.6rem} .hero img{translate:0 .9px} }
/* #172 (Moosa 12.09: «Ved portrait mobile er fargeknapper utenom skjermens plass»): toppbaren skal få plass ned til 320 px — verdiene over er målt til det.
   Sikkerhetsnett der noe likevel er bredere (lange sidenavn, større systemskrift): den høyre gruppen kan rulles sidelengs med fingeren, uten synlig rullefelt,
   så ingen knapp er utenfor rekkevidde. Menyene (utseende, klokken) posisjoneres fast av JS, så de ikke klippes av rullingen. */
@media (max-width:560px){ .hbar{max-width:calc(100vw - 8.5rem); overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; flex:0 1 auto; box-sizing:content-box; padding:8px 6px 8px 0; margin:-8px -6px -8px 0}   /* #196: klippboksen utvides med luft (padding + negativ margin, samme plass): klokkens tall (top:-6px) og alt annet som stikker litt utenfor knappene sine, vises helt */ .hbar::-webkit-scrollbar{display:none} .hbar>*{flex:none} }
@media (max-width:400px){ .authbtn .lbl{display:none} .authbtn .ico{display:inline-flex} .authbtn{padding:.3rem .55rem} .pagename{font-size:.78rem;letter-spacing:1px} .brandword{font-size:.84rem;letter-spacing:1.3px} }   /* innloggingen som ikon alene (#172) — #245 (02.10): ikonet er en dør med pil, ikke Facebook, for knappen åpner valget med begge veiene; «Logg inn med Facebook eller e-post» står som tittel. Utlogging beholder ordet (ingen .lbl) */
@media (max-width:360px){ .brandbar{gap:.4rem} .pagename{font-size:.74rem;letter-spacing:.7px} .brandword{font-size:.8rem;letter-spacing:1px} .hbar{gap:.3rem} .lang{gap:.2rem} .lang button{font-size:.74rem;padding:.26rem .4rem} .backarrow{padding:.22rem .34rem} .backarrow svg{width:15px;height:15px} }   /* 320 px på engelsk (AUDIO GUIDANCE) manglet 3 px — målt av nettstedsprøven U */
@media (prefers-reduced-motion: reduce){ .livearrow{ animation:none; } }

/* ── Kvittering på handling (PRINCIPLES #30) ────────────────────────────────────
   Alt som Veripolis.busy() setter i arbeid får samme, gjenkjennelige tilstand — én
   kilde for hele nettstedet, uansett hvilken knappeklasse elementet ellers har.   */
[aria-busy="true"] { opacity:.72 !important; cursor:progress !important; pointer-events:none; transform:none !important; box-shadow:none !important; transition:opacity .18s ease; }

/* Miljømerke (dev/test/staging). Umulig å overse, men uten å ta plass fra innholdet — et
   miljø som ser ut som prod er en feilkilde: dev-tall lest som prod-tall er en feil beslutning. */
.envtag { margin-left:.6rem; padding:.18rem .6rem; border-radius:999px; font-family:var(--font-ui);
  font-size:.68rem; font-weight:700; letter-spacing:1.4px; color:#12121e; background:#ff8c42;
  box-shadow:0 2px 10px rgba(255,140,66,.45); vertical-align:middle; }
/* #151: notis om norsk på produkt- og tjenestesider i engelsk modus — tom i norsk modus og da usynlig */
/* #194/#247: notisen om norsk er forklarende tekst i 15 px — uten kursiv (kursiv er for stor skrift); den sto i kursiv på .com 13.09–02.10 */
.langnote{text-align:center;color:var(--muted,#8a8a99);font-size:.95rem;margin:.2rem 0 .9rem}
.langnote:empty{display:none}

/* #167 (forslag 7): innloggingsportens setning om hva Facebook deler og aldri deler — samme sted på hver port, tom = usynlig (venter Moosas ord) */
.logintrust { color:var(--ink-3); font-size:.95rem; line-height:1.5; margin:.2rem auto 0; max-width:36ch; text-align:center; font-family:var(--font-prose); }
.logintrust:empty { display:none; }
/* ── Utseende (#165, Moosa 11.09): standard står; mørk og lys tilbys i toppbaren ved siden av språket; valget lagres (theme) og logges ── */
.theme { position:relative; display:inline-flex; margin-left:.35rem; }
.theme .themebtn { display:inline-flex; align-items:center; background:transparent; border:1px solid rgba(176,138,20,.5); color:#8a6510; border-radius:999px; padding:.32rem .55rem; cursor:pointer; transition:all .25s ease; }
.theme .themebtn svg { width:14px; height:14px; display:block; }
.theme .themebtn:hover, .theme .themebtn[aria-expanded="true"] { background:rgba(176,138,20,.12); }
header.scrolled .theme .themebtn { border-color:rgba(218,165,32,.4); color:var(--gold); }
header.scrolled .theme .themebtn:hover, header.scrolled .theme .themebtn[aria-expanded="true"] { background:rgba(218,165,32,.2); }
.thememenu { position:absolute; top:calc(100% + .45rem); right:0; min-width:9.5rem; background:var(--card-2); border:1px solid var(--line); border-radius:12px; padding:.35rem; z-index:60; box-shadow:0 10px 30px rgba(0,0,0,.35); backdrop-filter:blur(10px); }
.thememenu[hidden] { display:none; }
.thememenu button { display:block; width:100%; text-align:left; background:none; border:none; color:var(--ink); font-family:var(--font-ui); font-size:.9rem; letter-spacing:.3px; padding:.45rem .7rem; border-radius:8px; cursor:pointer; }
.thememenu button:hover { background:rgba(218,165,32,.12); }
.thememenu button[aria-checked="true"] { color:var(--gold); font-weight:700; }
@media (max-width:560px){ .theme .themebtn{ padding:.3rem .5rem } }
[data-theme="dark"] { --bg:#000; --bg-a:#000; --bg-b:#040407; --bg-c:#000; --glow-a:rgba(218,165,32,.06); --glow-b:rgba(218,165,32,.03);
  --card:rgba(0,0,0,.55); --card-2:rgba(0,0,0,.72); --card-3:rgba(0,0,0,.45); --hdr-scrolled-a:rgba(0,0,0,.96); --hdr-scrolled-b:rgba(0,0,0,.75); --footer-bg:rgba(0,0,0,.5); --bar:rgba(0,0,0,.94); }
[data-theme="light"] { --bg:#FDFBF4; --bg-a:#FFFDF8; --bg-b:#FBF7EC; --bg-c:#F5EFE1; --glow-a:rgba(218,165,32,.10); --glow-b:rgba(218,165,32,.05);
  --ink:#1d1a2e; --muted:rgba(29,26,46,.64); --ink-2:rgba(29,26,46,.78); --ink-3:rgba(29,26,46,.6); --gold:#a67c0a; --gold-2:#8a6510;
  --card:rgba(255,255,255,.66); --card-2:rgba(255,255,255,.82); --card-3:rgba(255,255,255,.55); --line:rgba(166,124,10,.38); --field:rgba(255,255,255,.78); --field-line:rgba(166,124,10,.4);
  --hdr-scrolled-a:rgba(253,251,244,.95); --hdr-scrolled-b:rgba(253,251,244,.82); --footer-bg:rgba(166,124,10,.06); --bar:rgba(253,251,244,.95); }
[data-theme="light"] .subline, [data-theme="light"] .logoglow { display:none; }   /* den mørke overgangen under logoen hører til den mørke siden */
[data-theme="light"] body::after { opacity:.25; }
[data-theme="light"] .hero img { filter:drop-shadow(0 14px 34px rgba(0,0,0,.18)); }
[data-theme="light"] header.scrolled .lang button.active { background:#b8860b; border-color:#b8860b; color:#14141f; }
[data-theme="light"] header.scrolled .who { color:rgba(29,26,46,.6); }
[data-theme="light"] .dchoose, [data-theme="light"] .card .act, [data-theme="light"] .desire .dchoose { color:#8a6510; }
[data-theme="light"] .dchoose:hover, [data-theme="light"] .card .act:hover { color:#a67c0a; }
[data-theme="light"] footer a { color:#8a6510; } [data-theme="light"] footer a:hover { color:#1d1a2e; }
[data-theme="light"] .thememenu { box-shadow:0 10px 30px rgba(0,0,0,.15); }
/* #299 (Moosa 13.10: «Erlend gis fullmakt til å bestille forbedringer av poc 1 ved navn styringsdashbord. Der det er naturlig at det finnes alternativer å velge
   mellom, bør hans valg gjøres standard, og alternativer evt. tilbys som opsjoner. Sjekk hans siste instruks for ny drakt/theme; lag den og sett den som standard»):
   drakten «business» er Erlends: lys flate og hvite kort, marineblå tekst, dempet blå som aksent, statusfarger bare for status, sans-serif i tre vekter, tynne
   skillelinjer og diskrete skygger. En side som bærer <body data-skin="business"> får den som standard når ingen tema er valgt; Mørk og Lys i toppbaren er opsjonene.
   Verdiene er tokener, som temaene (#165); ingen side nevner en farge eller en skrift selv. */
html:not([data-theme]) body[data-skin="business"] { --font-prose:Inter,'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif; --font-ui:Inter,'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  --bg:#F7F8FA; --bg-a:#F7F8FA; --bg-b:#F2F4F7; --bg-c:#EEF1F5; --glow-a:rgba(23,107,135,.05); --glow-b:rgba(23,107,135,.02);
  --ink:#172B3A; --ink-2:#344054; --ink-3:#475467; --muted:#667085; --gold:#176B87; --gold-2:#1F6F8B; --accent:#176B87; --accent-2:#1F6F8B; --accent-soft:rgba(23,107,135,.08);
  --card:#FFFFFF; --card-2:#FFFFFF; --card-3:#FFFFFF; --line:#E5E7EB; --line-soft:#E9ECF0; --field:#FFFFFF; --field-line:#D0D5DD;
  --hdr-scrolled-a:rgba(255,255,255,.96); --hdr-scrolled-b:rgba(255,255,255,.9); --footer-bg:#F2F4F7; --bar:rgba(255,255,255,.96);
  --ok:#2E7D5B; --warn:#C98720; --bad:#C94A4A; --info:#3478B8; --radius:12px; --shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04); --shadow-2:0 8px 26px rgba(16,24,40,.12); --on-accent:#FFFFFF; }
/* #306 (Moosa 14.10): dark on Prove and Build is the business skin with the colours inverted; the fonts, radii and shadows are the skin's.
   Text on an accent surface uses --on-accent. */
html:not([data-theme]) body[data-skin="business"][data-mode="dark"] { --bg:#0E131A; --bg-a:#0E131A; --bg-b:#121820; --bg-c:#161D26; --glow-a:rgba(95,182,208,.06); --glow-b:rgba(95,182,208,.03);
  --ink:#E6ECF1; --ink-2:#C5D0DB; --ink-3:#A9B6C3; --muted:#8C9AA8; --gold:#5FB6D0; --gold-2:#79C4DA; --accent:#5FB6D0; --accent-2:#79C4DA; --accent-soft:rgba(95,182,208,.14); --on-accent:#0E131A;
  --card:#171F28; --card-2:#1B242E; --card-3:#1F2933; --line:#2A3542; --line-soft:#232D38; --field:#121920; --field-line:#3A4653;
  --hdr-scrolled-a:rgba(14,19,26,.96); --hdr-scrolled-b:rgba(14,19,26,.9); --footer-bg:#0B1016; --bar:rgba(14,19,26,.94);
  --ok:#5CC48F; --warn:#E0A94A; --bad:#E07070; --info:#6FA8E6; --shadow:0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3); --shadow-2:0 8px 26px rgba(0,0,0,.5); }
html:not([data-theme]) body[data-skin="business"] .subline, html:not([data-theme]) body[data-skin="business"] .logoglow { display:none; }
html:not([data-theme]) body[data-skin="business"] .whiteband { background:#fff; }   /* båndet bak logoen uten den mørke kanten: den hører til den mørke siden */
html:not([data-theme]) body[data-skin="business"] footer { border-top-color:var(--line); }
html:not([data-theme]) body[data-skin="business"]::after { opacity:0; }
html:not([data-theme]) body[data-skin="business"] .hero img { filter:drop-shadow(0 14px 34px rgba(0,0,0,.14)); }
html:not([data-theme]) body[data-skin="business"] .pagename, html:not([data-theme]) body[data-skin="business"] header.scrolled .pagename { color:var(--ink); letter-spacing:2px; }
html:not([data-theme]) body[data-skin="business"] .lang button, html:not([data-theme]) body[data-skin="business"] .authbtn, html:not([data-theme]) body[data-skin="business"] .theme .themebtn, html:not([data-theme]) body[data-skin="business"] .backarrow, html:not([data-theme]) body[data-skin="business"] header.scrolled .lang button, html:not([data-theme]) body[data-skin="business"] header.scrolled .authbtn, html:not([data-theme]) body[data-skin="business"] header.scrolled .theme .themebtn, html:not([data-theme]) body[data-skin="business"] header.scrolled .backarrow { border-color:var(--line); color:var(--ink-2); font-weight:500; }
html:not([data-theme]) body[data-skin="business"] .lang button.active, html:not([data-theme]) body[data-skin="business"] header.scrolled .lang button.active { background:var(--accent); border-color:var(--accent); color:var(--on-accent,#fff); }
html:not([data-theme]) body[data-skin="business"] .lang button:hover, html:not([data-theme]) body[data-skin="business"] .authbtn:hover, html:not([data-theme]) body[data-skin="business"] .theme .themebtn:hover, html:not([data-theme]) body[data-skin="business"] .backarrow:hover, html:not([data-theme]) body[data-skin="business"] .thememenu button:hover { background:var(--accent-soft); }
html:not([data-theme]) body[data-skin="business"] .who, html:not([data-theme]) body[data-skin="business"] header.scrolled .who { color:var(--muted); }
html:not([data-theme]) body[data-skin="business"] .dchoose, html:not([data-theme]) body[data-skin="business"] .card .act, html:not([data-theme]) body[data-skin="business"] footer a { color:var(--accent); }
html:not([data-theme]) body[data-skin="business"] .thememenu { box-shadow:var(--shadow-2); }
html:not([data-theme]) body[data-skin="business"] .autoskjema .fu-go, html:not([data-theme]) body[data-skin="business"] .backlink, html:not([data-theme]) body[data-skin="business"] .reise .steg { background:var(--accent); color:var(--on-accent,#fff); }
html:not([data-theme]) body[data-skin="business"] .autoskjema .fu-wish, html:not([data-theme]) body[data-skin="business"] .autoskjema .au-inp { background:var(--field); border-color:var(--field-line); }   /* the skin's fields, not the gold of the standard */
/* #267: på de smaleste skjermene (320 px) manglet pila og «AUDIO GUIDANCE» 4 px. Regelen står sist i arket, så den vinner over grunnreglene for .theme og
   .backarrow lenger opp (#18: en @media-overstyring foran grunnregelen virker ikke — de to gamle for .theme gjorde aldri noe og er tatt ut). Trykkflaten står på minst 24 px. */
@media (max-width:340px){ header{padding-left:.7rem; padding-right:.7rem} .theme{margin-left:0} .brandbar{gap:.3rem} .backarrow{padding:.24rem .28rem} .pagename{letter-spacing:.4px} }

/* ── Reisen (#268/#271/#277): krystallen og steget tegnes av js/reise-vis.js på forsiden, i verdenene og på salgssidene (trakten, møtesiden,
   lydveiledningen), så reglene står ett sted. Spørsmålene og elementene kommer ett om gangen i samme plass (#197); svarene står under som merker ── */
.reise .stasjon { scroll-margin-top:84px; text-align:center; }
.reise .stasjon + .stasjon { margin-top:4.2rem; }
.reise .stasjon.inn { animation:stasjonInn .55s ease both; }
@keyframes stasjonInn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.krystall { display:inline-block; width:46px; height:46px; color:var(--gold); margin:0 auto .9rem; }
.krystall svg { width:100%; height:100%; display:block; overflow:visible; }
.krystall .kant { fill:none; stroke:currentColor; stroke-width:1.3; stroke-linejoin:round; }
.krystall .fas { fill:currentColor; fill-opacity:0; stroke:currentColor; stroke-width:.9; stroke-opacity:.55; transition:fill-opacity .6s ease; }
.krystall .fas.lys { fill-opacity:var(--o); }
.krystall .fas.na { fill-opacity:.22; animation:fasPuls 2.4s ease-in-out infinite; }
@keyframes fasPuls { 0%,100% { fill-opacity:.12; } 50% { fill-opacity:.34; } }
.krystall.klar svg { filter:drop-shadow(0 0 10px rgba(218,165,32,.45)); }
.reise .svarte { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; max-width:760px; margin:0 auto 1.2rem; }
.reise .qkort + .svarte { margin-top:1.3rem; }   /* svarene under kortet (#197) */
.reise .merke { display:inline-flex; align-items:center; gap:.4rem; border:1px solid rgba(218,165,32,.35); border-radius:999px; padding:.35rem .8rem; background:var(--card-3); color:var(--ink-2); font-family:var(--font-ui); font-size:.86rem; line-height:1.35; cursor:pointer; transition:border-color .25s ease, background .25s ease; }
.reise span.merke { cursor:default; }
.reise .merke b { color:var(--gold); font-weight:700; }
.reise button.merke:hover { border-color:var(--gold); }
.reise .merke.na { border-color:var(--gold); background:rgba(218,165,32,.1); }
.reise .qkort { max-width:680px; margin:0 auto; border:1px solid rgba(218,165,32,.38); border-radius:18px; padding:2.2rem 1.9rem 2rem; background:var(--card); backdrop-filter:blur(6px); }
.reise .qtopp { display:flex; align-items:center; justify-content:center; gap:.6rem; margin:0 0 .9rem; }
.reise .qtopp .krystall { width:26px; height:26px; margin:0; flex:none; }
.reise .qnr { font-family:var(--font-ui); font-size:.78rem; font-weight:700; letter-spacing:2.4px; text-transform:uppercase; color:var(--gold-2); margin:0; }
.reise .qtekst { font-size:1.55rem; line-height:1.4; color:var(--ink); margin:0 0 1.6rem; text-wrap:balance; outline:none; }
.reise .qtekst.bytt { animation:stasjonInn .4s ease both; }
.reise .qsitat { font-size:1.3rem; line-height:1.55; color:var(--ink); margin:0 0 .35rem; text-wrap:balance; }
.reise .qforfatter { font-family:var(--font-ui); font-size:.82rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); margin:0 0 1.4rem; }
.reise .qsvar { display:flex; justify-content:center; gap:.7rem; flex-wrap:wrap; }
.reise .qsvar button { min-width:7.2rem; padding:.72rem 1.3rem; border-radius:999px; border:1px solid rgba(218,165,32,.55); background:transparent; color:var(--gold); font-family:var(--font-ui); font-weight:700; font-size:1rem; letter-spacing:.4px; cursor:pointer; transition:background .25s ease, color .25s ease, transform .2s ease; }
.reise .qsvar button:hover { background:rgba(218,165,32,.12); transform:translateY(-1px); }
.reise .qsvar button[aria-pressed="true"] { background:linear-gradient(135deg,var(--gold),#b8860b); color:#12121e; border-color:transparent; }
.reise .eyebrow { font-family:var(--font-ui); font-size:.78rem; font-weight:700; letter-spacing:2.4px; text-transform:uppercase; color:var(--gold-2); margin:0 0 .6rem; }
.reise .reiseintro { color:var(--muted); font-size:1.2rem; margin:0 auto 2rem; max-width:760px; text-wrap:balance; }
.reise .endre { margin:.2rem 0 2rem; }
/* #278 (Moosa 07.10): delte kladder — merket på kortet og på lesesiden sier at kladden ikke er synlig for alle */
.card .draft-badge, .draft-badge { color:var(--gold); font-family:var(--font-ui); font-size:.78rem; letter-spacing:.6px; text-transform:uppercase; margin:.1rem 0 .55rem; }
.reise .card .tildeg { color:var(--ink-2); font-size:1.1rem; line-height:1.5; margin:0; text-wrap:balance; }
.reise .sammen { max-width:760px; margin:1.6rem auto 0; display:flex; flex-direction:column; gap:1.3rem; }
.reise .sammen h3 { font-family:var(--font-ui); font-size:.78rem; font-weight:700; letter-spacing:2.4px; text-transform:uppercase; color:var(--gold-2); margin:0 0 .6rem; }
.reise .sammen .svarte { margin:0 auto; }
.reise .sammen .med .merke { border-color:var(--gold); color:var(--ink); }
.reise .sammen .bort .merke { opacity:.62; }
.reise .steglead { color:var(--ink-2); font-size:1.25rem; margin:2.6rem 0 1rem; }
.reise .stasjon > h2.sectitle + .steg { margin-top:1.4rem; }   /* i reisen på forsiden står knappen rett under overskriften «Steget», med luft (Moosa 10.10: «Hvorfor denne gjentakelsen?») */
.reise .steg { display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; background:linear-gradient(135deg,var(--gold),#b8860b); color:#12121e; font-family:var(--font-ui); font-weight:700; font-size:1.05rem; letter-spacing:.3px; border:none; padding:.95rem 2.1rem; border-radius:999px; text-decoration:none; transition:transform .25s ease, box-shadow .25s ease; }
.reise .steg:hover { transform:translateY(-2px); box-shadow:0 8px 26px rgba(218,165,32,.4); }
.reise .reiselenker { display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem 1.6rem; margin:1.8rem 0 0; }
.reise .reiselenker .dchoose { margin-top:0; }
.reise #rslot:empty { display:none; }
.reise #rslot { margin-top:2.4rem; }
@media (max-width:640px){ .reise .qtekst { font-size:1.35rem; } .reise .qkort { padding:1.8rem 1.2rem 1.6rem; } .reise .qsvar button { min-width:0; flex:1 1 0; padding:.72rem .6rem; } .reise .qsitat { font-size:1.18rem; } }
@media (prefers-reduced-motion: reduce){ .reise .stasjon.inn, .reise .qtekst.bytt { animation:none; } .krystall .fas.na { animation:none; fill-opacity:.25; } }