/* 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. */
: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); }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Cormorant Garamond',Georgia,serif; 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; }
.homelink { display:inline-flex; color:#a67c0a; text-decoration:none; transition:color .3s ease; }
.homelink svg { width:22px; height:22px; display:block; }
.pagename { font-size:1.05rem; letter-spacing:3px; color:#a67c0a; font-weight:700; text-transform:uppercase; transition:color .3s ease; }
header.scrolled .homelink { color:var(--gold); }
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 .fbico { width:14px; height:14px; }
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:'Helvetica Neue',Arial,sans-serif; 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/.homelink/.pagename over; forsiden bruker .hleft/.brandword/.adminlink her. */
.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:'Helvetica Neue',Arial,sans-serif; 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); }
.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:'Helvetica Neue',Arial,sans-serif; font-weight:700; text-decoration:none; }
.dchoose { display:inline-block; margin-top:1.1rem; font-family:'Helvetica Neue',Arial,sans-serif; 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:'Helvetica Neue',Arial,sans-serif; 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:'Helvetica Neue',Arial,sans-serif; 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} .homelink svg{width:20px;height:20px} .lang{gap:.25rem} .lang button, .authbtn{font-size:.78rem;padding:.28rem .5rem;letter-spacing:.6px} .hbar{gap:.4rem} .theme{margin-left:.2rem} .theme .themebtn{padding:.26rem .42rem} .who,.fbfull{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 span{display:none} .authbtn{padding:.3rem .55rem} .authbtn .fbico{width:15px;height:15px} .pagename{font-size:.78rem;letter-spacing:1px} .brandword{font-size:.84rem;letter-spacing:1.3px} }   /* innloggingen som ikon alene — «Logg inn» står som tittel; utlogging beholder ordet (ingen span) */
@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} .theme .themebtn{padding:.24rem .36rem} }   /* 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:'Helvetica Neue',Arial,sans-serif;
  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 */
.langnote{text-align:center;font-style:italic;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:'Cormorant Garamond',Georgia,serif; }
.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:'Helvetica Neue',Arial,sans-serif; 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); }