/* ============================================================
   Macct — offentlig visuell identitet ("regnskaps-arbeidsverktøy")
   ------------------------------------------------------------
   Scopet under body.site slik at APP-GUI-et (base.html + delte
   .btn/.card/.badge i style.css) forblir uendret. Kun offentlige,
   frittstående marketing-sider får denne identiteten.

   Idé: siden skal lese som et regnskapsdokument — hovedbok, bilag,
   avstemmingsskjema, faktura. Tynne skillelinjer framfor skygger,
   små hjørner, monospace tabulære tall, dempet palett med ÉN
   levende status-grønn (= kontrollert / balansert / godkjent).
   Bygger på eksisterende tokens i style.css (--accent #1f4937,
   --mono JetBrains Mono). Ingen nye web-fonter, ingen gradienter,
   ingen dekor-blobs.
   ============================================================ */

body.site {
  /* --- Regnskaps-tokens (kun offentlig) --- */
  --doc-bg: #ffffff;
  --doc-paper: #faf9f6;          /* varm papir-tone bak dokumentpaneler */
  --doc-ink: #14140f;            /* nesten-svart blekk */
  --doc-muted: #5b5b52;          /* sekundær grå */
  --doc-faint: #8a8a80;          /* tertiær */
  --rule: #dcdbd3;              /* hovedbok-linje (hairline) */
  --rule-strong: #b9b8ad;       /* sum-strek */
  --stamp: #1f4937;            /* kontroll-grønn (fra --accent) */
  --stamp-bg: #eef3ef;
  --warn: #9a6b12;             /* dempet oker — advarsel */
  --warn-bg: #fbf3df;
  --err: #a12b25;              /* dempet rød — kun ekte feil */
  --err-bg: #fbeeed;
  --r-doc: 2px;                /* dokumentpaneler: skarpe hjørner */
  --r-ctl: 5px;                /* knapp/input */

  background: var(--doc-paper);
  color: var(--doc-ink);
}

/* Nattmodus (v3.92.395): hele identiteten går via tokens over, så én mørk
   re-definisjon flipper alle dokumentflater, linjer og blekk-farger.
   Verdiene speiler app-ens mørke skala (style.css :root[data-theme="dark"]):
   side-bg #0d0f11, panel #16181c. Merk at lys modus har panel LYSERE enn
   papir; i mørk modus er panelet hevet (lysere) over siden — samme retning
   som app-kortene. */
[data-theme="dark"] body.site {
  --doc-bg: #16181c;
  --doc-paper: #0d0f11;
  --doc-ink: #e5e7eb;
  --doc-muted: #9ca3af;
  --doc-faint: #6b7280;
  --rule: #2a2e33;
  --rule-strong: #3a3f46;
  --stamp: #4ade80;
  --stamp-bg: #0f2a1c;
  --warn: #fbbf24;
  --warn-bg: #2a2410;
  --err: #f87171;
  --err-bg: #2a1416;
}

/* CTA-flatene bruker --doc-ink som BAKGRUNN (mørk flate m/lys tekst i lys
   modus). I mørk modus blir --doc-ink lys → lys-på-lys; gi dem en egen
   mørk, hevet flate i stedet. */
[data-theme="dark"] body.site .cta-gradient,
[data-theme="dark"] body.site .final-cta {
  background: #1e2127 !important;
  background-image: none !important;
}

/* Monospace tabulær-tall-hjelper: beløp, kontonr, bilagsnr, statuser.
   tabular-nums + slashed-zero gir korrekt kolonnejustering. */
body.site .num,
body.site .doc-no,
body.site .acct-sheet .amt,
body.site .price-line .amt {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -0.01em;
}

/* ---------- DocumentNumber ---------- */
/* Diskret dokument-referanse: «BILAG 00482», «MVA 2026-T2». */
body.site .doc-no {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--doc-faint);
}

/* ---------- AccountingSheet ---------- */
/* Dokumentlignende panel: tittel-rad, hovedbok-linjer, sum, kontrollrad. */
body.site .acct-sheet {
  background: var(--doc-bg);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-doc);
  box-shadow: 0 1px 0 rgba(20, 20, 15, 0.04);
  overflow: hidden;
  max-width: 420px;
}
body.site .acct-sheet .sheet-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border-bottom: 1.5px solid var(--rule-strong);
  background: var(--doc-paper);
}
body.site .acct-sheet .sheet-title {
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}
body.site .acct-sheet .sheet-body { padding: 0.35rem 1rem 0.6rem; }
body.site .acct-sheet .row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.32rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9rem;
}
body.site .acct-sheet .row .label { color: var(--doc-muted); }
body.site .acct-sheet .row .amt { font-size: 0.9rem; }
body.site .acct-sheet .row.sum {
  border-bottom: none;
  border-top: 2px double var(--rule-strong);
  margin-top: 0.2rem;
  padding-top: 0.45rem;
  font-weight: 600;
}
body.site .acct-sheet .row.sum .label { color: var(--doc-ink); }
body.site .acct-sheet .amt.neg { color: var(--err); }

/* Kontroll-fot: statuslinjer nederst i arket. */
body.site .acct-sheet .sheet-foot {
  border-top: 1px solid var(--rule);
  padding: 0.55rem 1rem 0.7rem;
  background: var(--doc-paper);
  display: grid;
  gap: 0.3rem;
}

/* ---------- ReconciliationStatus ---------- */
/* Semantisk status med ledende markør. En farge = én betydning. */
body.site .recon {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 500;
}
body.site .recon::before {
  content: "";
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  flex: none;
  background: var(--doc-faint);
}
body.site .recon .recon-label { color: var(--doc-muted); }
body.site .recon .recon-val { margin-left: auto; font-weight: 600; }
body.site .recon.ok::before { background: var(--stamp); }
body.site .recon.ok .recon-val { color: var(--stamp); }
body.site .recon.warn::before { background: var(--warn); }
body.site .recon.warn .recon-val { color: var(--warn); }
body.site .recon.err::before { background: var(--err); }
body.site .recon.err .recon-val { color: var(--err); }
body.site .recon.pending::before {
  background: transparent;
  border: 1.5px solid var(--doc-faint);
}

/* Full-bredde reconciliation-rad (i sheet-foot). */
body.site .recon.line { display: flex; width: 100%; }

/* ---------- MacctControlStamp ---------- */
/* Diskret kontrollstempel — rammet, monospace, dempet grønn. */
body.site .stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stamp);
  background: var(--stamp-bg);
  border: 1px solid color-mix(in srgb, var(--stamp) 32%, transparent);
  border-radius: var(--r-doc);
  padding: 0.28rem 0.55rem;
}
body.site .stamp::before {
  content: "✓";
  font-size: 0.8rem;
  line-height: 1;
}

/* ---------- SubmissionTimeline ---------- */
/* Kompakt prosesslinje: Registrert → Kontrollert → Bokført → Godkjent → Sendt. */
body.site .doc-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-doc);
  background: var(--doc-bg);
  overflow: hidden;
}
body.site .doc-flow .step {
  flex: 1 1 0;
  min-width: 150px;
  padding: 0.9rem 1rem;
  border-right: 1px solid var(--rule);
  display: grid;
  gap: 0.25rem;
  align-content: start;
}
body.site .doc-flow .step:last-child { border-right: none; }
body.site .doc-flow .step .step-no {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--doc-faint);
  letter-spacing: 0.06em;
}
body.site .doc-flow .step .step-name { font-weight: 600; font-size: 0.92rem; }
body.site .doc-flow .step .step-desc { font-size: 0.8rem; color: var(--doc-muted); }
/* Fremhevet «du»-steg (godkjenning) i grønn. */
body.site .doc-flow .step.you { background: var(--stamp-bg); }
body.site .doc-flow .step.you .step-name { color: var(--stamp); }
/* Ferdig-steg: grønt ✓-merke + grønn tittel (kontroll-fullført). */
body.site .doc-flow .step.done .step-no { color: var(--stamp); font-size: 0.95rem; }
body.site .doc-flow .step.done .step-name { color: var(--stamp); }
body.site .doc-flow .step .step-desc a { color: var(--stamp); font-weight: 600; }

/* ---------- Ledger-tabell (funksjons-/integrasjonsoversikt) ---------- */
/* Kompakt hovedbok-aktig tabell i stedet for kort-grid. */
body.site .ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: var(--doc-bg);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-doc);
  overflow: hidden;
}
body.site .ledger th,
body.site .ledger td {
  text-align: left;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--rule);
}
body.site .ledger thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--doc-faint);
  font-weight: 600;
  border-bottom: 1.5px solid var(--rule-strong);
  background: var(--doc-paper);
}
body.site .ledger tbody tr:last-child td { border-bottom: none; }
body.site .ledger td.status { text-align: right; white-space: nowrap; }
body.site .ledger td.status .recon { justify-content: flex-end; }

/* Målgruppe-ledger: kontokode-chip + navn. */
body.site .usecase-ledger td .doc-no {
  display: inline-block;
  min-width: 3.4rem;
  padding: 0.12rem 0.4rem;
  margin-right: 0.55rem;
  text-align: center;
  color: var(--stamp);
  background: var(--stamp-bg);
  border: 1px solid color-mix(in srgb, var(--stamp) 26%, transparent);
  border-radius: var(--r-doc);
}
body.site .usecase-ledger .mg-navn { font-weight: 600; color: var(--doc-ink); }
body.site .usecase-ledger td { vertical-align: top; }
body.site .usecase-ledger td:first-child { white-space: nowrap; }

/* ---------- Invoice / ordresammendrag (pris) ---------- */
body.site .invoice {
  max-width: 460px;
  margin: 0 auto;
  background: var(--doc-bg);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-doc);
  overflow: hidden;
}
body.site .invoice .inv-head {
  padding: 0.8rem 1.2rem;
  border-bottom: 1.5px solid var(--rule-strong);
  background: var(--doc-paper);
  display: flex; align-items: baseline; justify-content: space-between;
}
body.site .invoice .inv-head .inv-title {
  font-family: var(--mono);
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  font-size: 0.85rem;
}
body.site .invoice .inv-body { padding: 0.5rem 1.2rem 0.9rem; }
body.site .price-line {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: 0.42rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.92rem;
}
body.site .price-line .label { color: var(--doc-muted); }
body.site .price-line.total {
  border-bottom: none;
  border-top: 2px double var(--rule-strong);
  margin-top: 0.2rem; padding-top: 0.55rem;
  font-weight: 700; font-size: 1.05rem;
}
body.site .price-line.total .label { color: var(--doc-ink); }

/* ---------- Offentlig scope-refinements på delte klasser ----------
   Kun under .site: strammere hjørner + hairline framfor skygge, så
   hele den offentlige siden føles som ett dokumentsystem. */
body.site .card,
body.site .feature-card,
body.site .pricing-card {
  border-radius: var(--r-doc);
  border: 1px solid var(--rule);
  box-shadow: none;
}
body.site .btn,
body.site .btn-primary,
body.site .btn-outline,
body.site .btn-secondary {
  border-radius: var(--r-ctl);
}
body.site input,
body.site select,
body.site textarea { border-radius: var(--r-ctl); }

/* Seksjons-etikett (hovedbok-fane): liten mono-overskrift over seksjoner. */
body.site .section-tag {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stamp);
  display: inline-block;
  margin-bottom: 0.5rem;
}

/* Fjern dekorativ gradient på avsluttende CTA under .site (nøktern flate). */
body.site .cta-gradient,
body.site .final-cta {
  background: var(--doc-ink) !important;
  background-image: none !important;
}

/* ---------- Scopede overrides av de dupliserte SEO-mønstrene ----------
   Hver marketing-side har egen inline <style>; body.site-selektorene
   out-specifier dem, så disse strammer HELE den offentlige siden til
   dokument-identiteten uten å røre app-en. */

/* Reclaim merkevare-fonten (sidene overstyrte til generisk system-stack). */
body.site { font-family: var(--font); }

/* Den ubiquitøse lyseblå hero-gradienten → varm papir + hairline-strek. */
body.site header.hero,
body.site .hero {
  background: var(--doc-paper) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--rule-strong);
}
/* Tam hero-overskrift (var 2.4–2.6rem). */
body.site header.hero h1,
body.site .hero h1 {
  font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.15rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* Amber callout beholder semantikk (advarsel) men tunes til identiteten:
   venstre-rule i oker, dempet flate, skarpe hjørner. */
body.site .callout {
  background: var(--warn-bg) !important;
  border-left: 3px solid var(--warn) !important;
  border-radius: var(--r-doc) !important;
}

/* Demp dekorative flytende-kort-skygger og glow på offentlige sider. */
body.site [class*="card"],
body.site .usecase,
body.site .price-card,
body.site .pick-card { box-shadow: none !important; }
body.site .btn-primary { box-shadow: none !important; }

/* Pills: bare semantiske status-chips beholder pill-form; dekorative
   tagline-pills flates til mono-etikett. */
body.site .macct-tagline {
  background: none !important;
  background-image: none !important;
  color: var(--stamp) !important;
  box-shadow: none !important;
  border-radius: var(--r-doc) !important;
  font-family: var(--mono);
  letter-spacing: 0.06em;
  border: 1px solid color-mix(in srgb, var(--stamp) 28%, transparent);
}

/* Beløp i tekst kan merkes .num for tabulær mono. Prosa-tall er OK som de er. */

/* Pris: inkludert-liste + CTA under fakturaen. */
body.site .pricing-included {
  max-width: 460px;
  margin: 1.1rem auto 0;
  text-align: left;
}
body.site .pricing-included ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  gap: 0.35rem;
}
body.site .pricing-included li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.92rem;
  color: var(--doc-muted);
}
body.site .pricing-included li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--stamp);
  font-weight: 600;
}
body.site .pricing-included .btn-primary { width: 100%; text-align: center; }
body.site .pricing-included .pricing-compare {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  color: var(--doc-faint);
  text-align: center;
}

/* Hero-dokument (høyre kolonne på forsiden). */
body.site .hero-doc {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.7rem;
}
body.site .hero-doc .acct-sheet { width: 100%; max-width: 380px; }
body.site .hero-doc .hero-stamp { padding-right: 0.15rem; }
@media (max-width: 860px) {
  body.site .hero-doc { align-items: stretch; margin-top: 1.5rem; }
  body.site .hero-doc .acct-sheet { max-width: 100%; }
  body.site .hero-doc { align-items: flex-start; }
}

/* Respekter redusert bevegelse. */
@media (prefers-reduced-motion: reduce) {
  body.site * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Mobil: dokumentpaneler beholder lesbarhet, timeline stables. */
@media (max-width: 640px) {
  body.site .acct-sheet { max-width: 100%; }
  body.site .doc-flow { flex-direction: column; }
  body.site .doc-flow .step { border-right: none; border-bottom: 1px solid var(--rule); min-width: 0; }
  body.site .doc-flow .step:last-child { border-bottom: none; }
  body.site .ledger { display: block; overflow-x: auto; }
}