/* VaraSea – marketing site (varasea.no). The front page's styles are at the end of the file.
   Colour tokens are copied from design/tokens.css (light in :root, dark in [data-theme="dark"], and the same dark
   set inside prefers-color-scheme for [data-theme="system"]). Keep them in sync with that file.
   Light is the default; assets/js/theme-init.js sets data-theme before first paint. */

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #E3E8E8;
  --bg-mist:
    radial-gradient(1100px 620px at 12% -5%, #F7F8F7 0%, rgba(247,248,247,0) 62%),
    radial-gradient(900px 700px at 95% 15%, #C7D2D5 0%, rgba(199,210,213,0) 62%),
    radial-gradient(800px 600px at 50% 110%, #D3DBDB 0%, rgba(211,219,219,0) 60%),
    #E3E8E8;
  --panel: rgba(255,255,255,0.55);
  --panel-border: rgba(255,255,255,0.85);
  --card: rgba(255,255,255,0.80);
  --card-border: rgba(255,255,255,0.90);
  --card-solid: #FFFFFF;
  --seg-active: #FFFFFF;
  --line: rgba(20,22,23,0.07);
  --card-soft: rgba(255,255,255,0.70);
  --track: rgba(20,22,23,0.08);
  --border: rgba(20,22,23,0.12);
  --field: rgba(255,255,255,0.75);
  --header: rgba(227,232,232,0.78);
  --shadow-soft: 0 1px 2px rgba(20,22,23,0.05);
  --land: #DCDFE0;

  --text: #141617;
  --text-2: #3A4245;
  --text-3: #4A5357;
  --on-dark: #F4F6F5;

  --accent: #12263A;
  --accent-2: #2D5D86;
  --on-accent: #F4F6F5;
  --accent-soft: rgba(18,38,58,0.08);
  --logo-a: #12263A;
  --logo-b: #2D5D86;

  --green: #3F8A5C;  --green-text: #2B6A43;  --green-bg: #E3F1E8;
  --amber: #D29A2A;  --amber-text: #7A5410;  --amber-bg: #FAF0DA;
  --red:   #C2412D;  --red-text:   #A8361F;  --red-bg:   #FBE7E2;

  --radius-panel: 28px;
  --radius-card: 20px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(20,22,23,0.04), 0 18px 50px rgba(20,22,23,0.06);

  --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --tracking-tight: -0.025em;
  --wrap: 1160px;
  --gutter: clamp(16px, 4vw, 32px);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1724;
  --bg-mist:
    radial-gradient(1100px 620px at 30% -10%, #14304A 0%, rgba(20,48,74,0) 62%),
    radial-gradient(900px 700px at 95% 15%, #0F2438 0%, rgba(15,36,56,0) 62%),
    radial-gradient(800px 600px at 50% 110%, #0D1C2B 0%, rgba(13,28,43,0) 60%),
    #0B1724;
  --panel: rgba(18,36,56,0.72);
  --panel-border: rgba(141,180,217,0.14);
  --card: rgba(21,40,60,0.78);
  --card-border: rgba(141,180,217,0.14);
  --card-solid: #15283C;
  --seg-active: #23405D;
  --line: rgba(141,180,217,0.13);
  --card-soft: rgba(21,40,60,0.70);
  --track: rgba(141,180,217,0.13);
  --border: rgba(141,180,217,0.26);
  --field: rgba(21,40,60,0.92);
  --header: rgba(11,23,36,0.80);
  --shadow-soft: 0 1px 2px rgba(0,0,0,0.30);
  --land: #1A3048;
  --text: #F4F6F5;
  --text-2: #C2CFDB;
  --text-3: #8FA1B3;
  --on-dark: #0F1E2E;
  --accent: #8DB4D9;
  --accent-2: #8DB4D9;
  --on-accent: #0F1E2E;
  --accent-soft: rgba(141,180,217,0.13);
  --logo-a: #F4F6F5;
  --logo-b: #8DB4D9;
  --green: #4FAE74;  --green-text: #86D9A6;  --green-bg: rgba(79,174,116,0.17);
  --amber: #E2AE45;  --amber-text: #F2CB78;  --amber-bg: rgba(226,174,69,0.17);
  --red:   #E2644E;  --red-text:   #FF9F8B;  --red-bg:   rgba(226,100,78,0.20);
  --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 22px 60px rgba(0,0,0,0.45);
}

@media (prefers-color-scheme: dark) {
:root[data-theme="system"] {
    color-scheme: dark;
    --bg: #0B1724;
    --bg-mist:
      radial-gradient(1100px 620px at 30% -10%, #14304A 0%, rgba(20,48,74,0) 62%),
      radial-gradient(900px 700px at 95% 15%, #0F2438 0%, rgba(15,36,56,0) 62%),
      radial-gradient(800px 600px at 50% 110%, #0D1C2B 0%, rgba(13,28,43,0) 60%),
      #0B1724;
    --panel: rgba(18,36,56,0.72);
    --panel-border: rgba(141,180,217,0.14);
    --card: rgba(21,40,60,0.78);
    --card-border: rgba(141,180,217,0.14);
    --card-solid: #15283C;
    --seg-active: #23405D;
    --line: rgba(141,180,217,0.13);
    --card-soft: rgba(21,40,60,0.70);
    --track: rgba(141,180,217,0.13);
    --border: rgba(141,180,217,0.26);
    --field: rgba(21,40,60,0.92);
    --header: rgba(11,23,36,0.80);
    --shadow-soft: 0 1px 2px rgba(0,0,0,0.30);
    --land: #1A3048;
    --text: #F4F6F5;
    --text-2: #C2CFDB;
    --text-3: #8FA1B3;
    --on-dark: #0F1E2E;
    --accent: #8DB4D9;
    --accent-2: #8DB4D9;
    --on-accent: #0F1E2E;
    --accent-soft: rgba(141,180,217,0.13);
    --logo-a: #F4F6F5;
    --logo-b: #8DB4D9;
    --green: #4FAE74;  --green-text: #86D9A6;  --green-bg: rgba(79,174,116,0.17);
    --amber: #E2AE45;  --amber-text: #F2CB78;  --amber-bg: rgba(226,174,69,0.17);
    --red:   #E2644E;  --red-text:   #FF9F8B;  --red-bg:   rgba(226,100,78,0.20);
    --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 22px 60px rgba(0,0,0,0.45);
  }
}

/* ---------- Base (sub-pages; the front page, body.home, has its own rules at the end) ---------- */
body:not(.home) *, body:not(.home) *::before, body:not(.home) *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
:where(body:not(.home)) {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-mist);
  background-color: var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:where(body:not(.home)) :is(img, svg) { display: block; max-width: 100%; }
:where(body:not(.home)) img { height: auto; }
:where(body:not(.home)) a { color: var(--accent-2); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:where(body:not(.home)) a:hover { text-decoration-thickness: 2px; }
:where(body:not(.home)) :focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }
:where(body:not(.home)) :is(h1, h2, h3) { font-weight: 500; letter-spacing: var(--tracking-tight); line-height: 1.12; margin: 0; color: var(--text); }
:where(body:not(.home)) h1 { font-size: clamp(40px, 7vw, 76px); line-height: 1.02; }
:where(body:not(.home)) h2 { font-size: clamp(30px, 4.2vw, 46px); }
:where(body:not(.home)) h3 { font-size: 21px; letter-spacing: -0.015em; line-height: 1.25; }
:where(body:not(.home)) p { margin: 0; }
:where(body:not(.home)) p + p { margin-top: 0.8em; }
strong { font-weight: 600; }
.mono { font-family: var(--font-mono); }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: var(--radius-pill);
  text-decoration: none; font-weight: 500;
}
.skip:focus { top: 12px; }

/* ---------- Buttons, chips ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  font: 500 16px/1 var(--font); letter-spacing: -0.005em; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 84%, var(--card-solid)); }
.btn-ghost { background: var(--field); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--card-solid); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn svg { width: 18px; height: 18px; flex: none; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2);
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--field); color: var(--text-2);
  font: 500 12px/1.2 var(--font-mono); letter-spacing: 0.02em;
}
.chip-accent { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 35%, transparent); background: var(--accent-soft); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 20px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); flex: none; min-height: 44px; }
.brand svg { height: 26px; width: auto; }
.brand .la { fill: var(--logo-a); }
.brand .lb { fill: var(--logo-b); }
.brand-by { font-size: 13px; color: var(--text-2); white-space: nowrap; padding-top: 4px; }
.site-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--radius-pill);
  color: var(--text-2); text-decoration: none; font-size: 15px; font-weight: 500;
}
.site-nav a:hover { color: var(--text); background: var(--accent-soft); }
.header-actions { display: flex; align-items: center; gap: 10px; flex: none; }

.theme {
  display: none; padding: 4px; gap: 0; border-radius: var(--radius-pill); background: var(--track);
}
.js .theme { display: inline-flex; }
.theme button {
  min-height: 36px; min-width: 44px; padding: 0 12px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-2); font: 500 13px/1 var(--font); cursor: pointer;
}
.theme button[aria-pressed="true"] { background: var(--seg-active); color: var(--text); box-shadow: var(--shadow-soft); }
.theme button:hover { color: var(--text); }

.menu-btn {
  display: none; min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--field); color: var(--text); font: 500 15px/1 var(--font); cursor: pointer;
  align-items: center; gap: 8px;
}
.menu-btn svg { width: 18px; height: 18px; }

@media (max-width: 980px) {
.brand-by { display: none; }
.site-nav a { padding: 0 9px; font-size: 14px; }
}
@media (max-width: 860px) {
.header-inner { flex-wrap: wrap; gap: 10px; }
.js .menu-btn { display: inline-flex; }
.header-actions { margin-left: auto; }
.site-nav { order: 3; width: 100%; flex-wrap: wrap; margin: 0 0 10px; }
.js .site-nav { display: none; flex-direction: column; align-items: stretch; padding: 8px 0 14px; }
.js .site-header.open .site-nav { display: flex; }
.js .site-nav a { font-size: 17px; padding: 0 12px; }
.header-actions .theme { display: none; }
.js .site-nav .theme { display: inline-flex; align-self: flex-start; margin-top: 8px; }
}
@media (min-width: 861px) { .site-nav .theme { display: none !important; } }

/* ---------- Sections and panels ---------- */
main { display: block; }
.section { padding-block: clamp(56px, 9vw, 112px); }
.section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head .eyebrow { margin-bottom: 16px; }
.section-head p { margin-top: 16px; font-size: 19px; color: var(--text-2); }
.panel {
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-panel);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.card {
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

/* ---------- Hero ---------- */
:where(body:not(.home)) .hero { padding-top: clamp(40px, 8vw, 96px); padding-bottom: clamp(40px, 6vw, 72px); }
.hero-text { max-width: 860px; }
:where(body:not(.home)) .hero h1 { margin-top: 22px; }
:where(body:not(.home)) .hero .lede { margin-top: 24px; font-size: clamp(19px, 2.2vw, 22px); line-height: 1.5; color: var(--text-2); max-width: 720px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-note { margin-top: 18px; font-size: 14px; color: var(--text-2); }
.pulse { position: relative; width: 10px; height: 10px; flex: none; }
.pulse::before, .pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent-2); }
.pulse::after { animation: ping 2.4s ease-out infinite; opacity: .5; }
@keyframes ping { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(2.8); opacity: 0; } }

.hero-shot { margin-top: clamp(40px, 6vw, 64px); padding: clamp(10px, 1.6vw, 18px); }
.hero-shot img { border-radius: calc(var(--radius-panel) - 12px); width: 100%; }
.hero-shot figcaption { padding: 14px 8px 4px; font-size: 14px; color: var(--text-2); }
.theme-img-dark { display: none; }
:root[data-theme="dark"] .theme-img-light { display: none; }
:root[data-theme="dark"] .theme-img-dark { display: block; }
@media (prefers-color-scheme: dark) {
:root[data-theme="system"] .theme-img-light { display: none; }
:root[data-theme="system"] .theme-img-dark { display: block; }
}

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.fact { padding: 18px 20px; background: var(--card-soft); }
.fact b { display: block; font: 500 26px/1.1 var(--font); letter-spacing: var(--tracking-tight); }
.fact span { display: block; margin-top: 6px; font-size: 14px; color: var(--text-2); line-height: 1.4; }
@media (max-width: 860px) { .facts { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Risk areas ---------- */
.areas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.area { grid-column: span 2; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.area:nth-child(4), .area:nth-child(5) { grid-column: span 3; }
.area-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.icon {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-2); flex: none;
}
.icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.area p { color: var(--text-2); }
.area .limit { font-size: 14px; color: var(--text-2); border-top: 1px solid var(--line); padding-top: 12px; margin-top: auto; }
.areas-note { margin-top: 20px; font-size: 15px; color: var(--text-2); max-width: 820px; }
@media (max-width: 960px) {
.areas { grid-template-columns: 1fr 1fr; }
.area, .area:nth-child(4), .area:nth-child(5) { grid-column: span 1; }
.area:nth-child(5) { grid-column: span 2; }
}
@media (max-width: 640px) {
.areas { grid-template-columns: 1fr; }
.area:nth-child(5) { grid-column: span 1; }
}

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: step; }
.step { padding: 26px; }
.step-n {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font: 500 15px/1 var(--font-mono); margin-bottom: 18px;
}
.step p { margin-top: 10px; color: var(--text-2); }
.sources { margin-top: 28px; padding: clamp(22px, 3vw, 32px); }
.sources h3 { font-size: 17px; }
.source-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.source-list li { padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--field); font-size: 14px; line-height: 1.3; }
.source-list li span { color: var(--text-2); }
.sources .more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; font-weight: 500; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Proof ---------- */
.proof { padding: clamp(24px, 4vw, 48px); display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.proof h2 { margin-top: 16px; }
.proof .claim { margin-top: 18px; font-size: 19px; color: var(--text-2); }
.bars { display: grid; gap: 22px; }
.bar-row .bar-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; font-size: 15px; color: var(--text-2); }
.bar-row .bar-label b { font: 500 40px/1 var(--font-mono); letter-spacing: -0.03em; color: var(--text); }
.bar-row.muted .bar-label b { color: var(--text-2); }
.bar { height: 14px; border-radius: var(--radius-pill); background: var(--track); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent-2); }
.bar-row.muted .bar i { background: var(--text-3); }
.bar i.w53 { width: 53%; }
.bar i.w38 { width: 38%; }
.bar-scale { display: flex; justify-content: space-between; font: 400 12px/1 var(--font-mono); color: var(--text-2); }
.proof-notes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; border-top: 1px solid var(--line); padding-top: 24px; font-size: 14px; color: var(--text-2); }
.proof-notes b { display: block; color: var(--text); font-weight: 500; margin-bottom: 4px; font-size: 15px; }
@media (max-width: 860px) {
.proof { grid-template-columns: 1fr; }
.proof-notes { grid-template-columns: 1fr; }
}

/* ---------- Screenshots ---------- */
.shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.shot { margin: 0; padding: 12px; display: flex; flex-direction: column; }
.shot img { border-radius: 12px; width: 100%; background: var(--card-solid); }
.shot figcaption { padding: 14px 6px 6px; font-size: 15px; color: var(--text-2); }
.shot figcaption b { display: block; color: var(--text); font-weight: 500; margin-bottom: 2px; }
@media (max-width: 760px) { .shots { grid-template-columns: 1fr; } }

/* ---------- Audience ---------- */
.audience { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.audience-main { padding: clamp(24px, 3.4vw, 40px); }
.audience-main h3 { font-size: 28px; letter-spacing: var(--tracking-tight); margin-top: 14px; }
.audience-main p { margin-top: 14px; color: var(--text-2); }
.ticks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: 0.45em; width: 14px; height: 8px;
  border-left: 1.8px solid var(--accent-2); border-bottom: 1.8px solid var(--accent-2); transform: rotate(-45deg);
}
.partners { display: grid; gap: 10px; }
.partners .intro { padding: 4px 4px 8px; color: var(--text-2); }
.partner { padding: 18px 22px; }
.partner h3 { font-size: 17px; }
.partner p { margin-top: 4px; font-size: 15px; color: var(--text-2); }
@media (max-width: 860px) { .audience { grid-template-columns: 1fr; } }

/* ---------- Contact ---------- */
.contact { padding: clamp(28px, 5vw, 64px); text-align: left; display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; }
.contact p { margin-top: 16px; font-size: 19px; color: var(--text-2); }
.contact-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.contact-actions .mail { font-size: 15px; color: var(--text-2); word-break: break-all; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 40px 0 48px; font-size: 14px; color: var(--text-2); margin-top: clamp(40px, 6vw, 80px); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 28px; }
.site-footer h2 { font: 500 12px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.site-footer a { color: var(--text); text-decoration: none; display: inline-flex; align-items: center; min-height: 36px; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .brand { min-height: 44px; }
.footer-small { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Text pages (personvern, vilkår, kilder) ---------- */
.doc { padding-top: clamp(36px, 6vw, 72px); }
.doc-body { max-width: 780px; }
.doc h1 { font-size: clamp(36px, 5.4vw, 56px); margin-top: 16px; }
.doc .lede { margin-top: 18px; font-size: 19px; color: var(--text-2); }
.doc h2 { font-size: clamp(22px, 2.6vw, 28px); margin-top: 44px; margin-bottom: 12px; }
.doc h3 { font-size: 18px; margin-top: 24px; margin-bottom: 6px; }
.doc p, .doc li { color: var(--text-2); }
.doc p + p { margin-top: 12px; }
.doc ul { padding-left: 1.2em; margin: 10px 0; }
.doc li + li { margin-top: 6px; }
.doc strong { color: var(--text); }
.draft {
  margin-top: 24px; padding: 16px 20px; border-radius: 16px;
  background: var(--amber-bg); color: var(--amber-text); border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
  font-size: 15px;
}
.draft b { font-family: var(--font-mono); letter-spacing: 0.08em; }
.todo { background: var(--amber-bg); color: var(--amber-text); padding: 1px 6px; border-radius: 6px; font-size: 0.92em; }
.src-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 15px; }
.src-table th, .src-table td { text-align: left; vertical-align: top; padding: 12px 10px; border-bottom: 1px solid var(--line); }
.src-table th { font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.src-table td { color: var(--text-2); }
.src-table td:first-child { color: var(--text); font-weight: 500; }
.table-scroll { overflow-x: auto; }
.attrib { font-family: var(--font-mono); font-size: 14px; background: var(--field); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; color: var(--text); margin-top: 10px; }
@media (max-width: 640px) {
.src-table, .src-table tbody, .src-table tr, .src-table td { display: block; }
.src-table thead { display: none; }
.src-table tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
.src-table td { border: 0; padding: 2px 0; }
}

/* ---------- 404 ---------- */
.notfound { min-height: 60vh; display: grid; align-content: center; }
.notfound .code { font: 500 clamp(72px, 14vw, 140px)/1 var(--font-mono); letter-spacing: -0.04em; color: var(--accent-2); }
.notfound p { margin-top: 16px; font-size: 19px; color: var(--text-2); max-width: 560px; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}

/* ---------- Small additions ---------- */
.steps { list-style: none; padding: 0; margin: 0; }
.site-footer .footer-grid > div p { margin-top: 12px; max-width: 440px; }
.footer-small a { display: inline; min-height: 0; text-decoration: underline; }
figure { margin: 0; }
.proof-notes p, .proof-notes p + p { margin: 0; }
.more { gap: 8px; }
.more svg { width: 18px; height: 18px; flex: none; }
.bar-row .bar-label b .pct { font-size: 0.6em; margin-left: 0.15em; }
.source-list li { border-radius: 14px; }
@media (max-width: 860px) { .section { padding-block: clamp(44px, 8vw, 72px); } }
@media (min-width: 861px) { .section { padding-block: clamp(56px, 7vw, 88px); } }
@media (max-width: 480px) {
.brand svg { height: 22px; }
.header-actions { gap: 8px; }
.header-actions .btn-sm, .menu-btn { padding: 0 13px; }
.facts { grid-template-columns: 1fr; }
.fact b { font-size: 22px; }
.hero-cta .btn { width: 100%; }
}

/* ==========================================================================================================
   Front page (body.home) and the shared header/footer of the sub-pages.
   The layout values live as inline styles in index.html, exactly as in the design export
   ("Utkast 2 · varasea.no"); the rules below are the design's own stylesheet plus what the static version
   needs (conditional blocks, fonts, smooth scrolling). Light only, like the design.
   ========================================================================================================== */
body.home { margin: 0; background: #E3E8E8; }
.page {
  font-family: "Geist", system-ui, sans-serif; color: #141617;
  background: radial-gradient(900px 700px at -10% 40%, #C7D2D5 0%, rgba(199,210,213,0) 62%), #E3E8E8;
  -webkit-font-smoothing: antialiased;
}
.page button, .page input { font-family: inherit; }
.if { display: contents; }
[hidden] { display: none !important; }
html:has(body.home) { scroll-padding-top: 0; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.page :where(a):focus-visible, .page button:focus-visible, .page input:focus-visible { outline: 2px solid #2D5D86; outline-offset: 3px; }
.dfield input:focus { border-color: rgba(255,255,255,0.7) !important; }

/* design stylesheet (from the export, unchanged apart from the link colour scope) */
.page :where(a){color:#12263A}.page :where(a):hover{color:#2D5D86}
.navlink{color:#22303A;text-decoration:none}.navlink:hover{color:#12263A}
.navd{color:rgba(244,246,245,.86);text-decoration:none}.navd:hover{color:#FFFFFF}
.pulse{animation:pulse 2.4s ease-out infinite}
.rise{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
.rise2{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .12s both}
.rise3{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .24s both}
.rise4{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) .36s both}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(194,65,45,.45)}100%{box-shadow:0 0 0 10px rgba(194,65,45,0)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pulse,.rise,.rise2,.rise3,.rise4,.reveal,.scan,.draw,.fadein,.pop,.wave,.fish,.drift,.ping{animation:none}.draw{stroke-dashoffset:0}.scan{display:none}}
.tw{transition:background .35s ease,box-shadow .35s ease}
.prog{display:block;height:3px;border-radius:3px;background:rgba(18,38,58,.1);overflow:hidden;margin-top:14px}
.prog i{display:block;height:100%;background:#2D5D86;transform-origin:0 50%;animation:prog 7s linear both}
.v-in{animation:vin .6s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}.d4{animation-delay:.32s}.d5{animation-delay:.4s}.d6{animation-delay:.48s}
.ring{animation:ring 1.4s cubic-bezier(.2,.7,.2,1) .15s both}
.grow{transform-origin:50% 100%;animation:grow .9s cubic-bezier(.2,.7,.2,1) both}
.fillx{transform-origin:0 50%;animation:fillx 1s cubic-bezier(.2,.7,.2,1) both}
.sweep{transform-box:view-box;transform-origin:200px 200px;animation:spin 4s linear infinite}
.blip{transform-box:fill-box;transform-origin:center;animation:blip 4s ease-out infinite;opacity:0}
.cell{animation:cell .5s ease both}
.slide{animation:slide .7s cubic-bezier(.2,.8,.2,1) both}
.dash{stroke-dasharray:6 8;animation:dash 1.6s linear infinite}
.reveal{animation:reveal 1.4s cubic-bezier(.3,.6,.2,1) both}
.scan{position:absolute;left:0;right:0;top:0;height:46px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none;animation:scan 1.4s cubic-bezier(.3,.6,.2,1) both}
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.6s cubic-bezier(.3,.6,.2,1) .35s both}
.fadein{animation:fade .8s ease 1.2s both}
.pop{transform-box:fill-box;transform-origin:center;animation:pop .5s cubic-bezier(.2,1.4,.4,1) 1.8s both}
@keyframes reveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes scan{0%{transform:translateY(-46px);opacity:1}85%{opacity:1}100%{transform:translateY(560px);opacity:0}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.wave{animation:wavex 6s linear infinite}
.fish{transform-box:fill-box;animation:fish 6s ease-in-out infinite alternate}
.drift{animation:drift 12s linear infinite}
.ping{transform-box:fill-box;transform-origin:center;animation:blip 2.6s ease-out infinite}
#demo input::placeholder{color:rgba(255,255,255,.62)}
@keyframes wavex{to{transform:translateX(-113.1px)}}
@keyframes fish{from{transform:translateX(-14px)}to{transform:translateX(14px)}}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(160px,-30px)}}
.vr{-webkit-appearance:none;appearance:none;touch-action:none;cursor:pointer;width:100%;height:4px;border-radius:4px;background:rgba(18,38,58,.14);outline:none;margin:6px 0}
.vr::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:18px;background:#FFFFFF;border:2px solid #12263A;cursor:pointer}
.vr::-moz-range-thumb{width:16px;height:16px;border-radius:16px;background:#FFFFFF;border:2px solid #12263A;cursor:pointer}
.vr:focus-visible{outline:2px solid #2D5D86;outline-offset:4px}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes vin{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ring{from{stroke-dashoffset:527.8}to{stroke-dashoffset:116.1}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fillx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blip{0%{transform:scale(.6);opacity:0}4%{opacity:.9}40%{transform:scale(3);opacity:0}100%{opacity:0}}
@keyframes cell{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes slide{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes dash{to{stroke-dashoffset:-28}}
.chap{all:unset;box-sizing:border-box;display:flex;gap:18px;width:100%;padding:18px 20px;border-radius:20px;cursor:pointer;text-align:left}
.chap:focus-visible{outline:2px solid #2D5D86;outline-offset:2px}
.chap:hover .ct{color:#12263A}
.dform input::placeholder{color:rgba(255,255,255,.55)}
@media (max-width:820px){
.navlinks{display:none!important}
.hero{min-height:680px!important}
.tstage{height:auto!important}
.tview{position:relative!important;inset:auto!important;grid-template-columns:minmax(0,1fr)!important;padding:16px!important}
.trow{grid-template-columns:118px minmax(0,1fr) 52px!important}
.tgrid{left:118px!important;right:52px!important}
.lygrid{display:flex!important;flex-direction:column;gap:12px;height:auto!important}
.lygrid>:nth-child(1),.lygrid>:nth-child(2),.lygrid>:nth-child(4){display:none!important}
.lygrid>:nth-child(3),.lygrid>:nth-child(5){position:relative}
.lyrow{position:relative!important;top:auto!important;height:auto!important;margin-bottom:12px}
.lybtn{position:relative!important;inset:auto!important}
.lyres{position:relative!important;top:auto!important}
.lybtn{grid-template-columns:minmax(0,1fr)!important;padding-right:84px!important;gap:10px!important}
.lybtn>span:last-of-type{flex-direction:row!important;align-items:center!important;padding-right:0!important}
.tkmid{display:none}
.lydet,.factsp{grid-template-columns:minmax(0,1fr)!important}
.dform{grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width:480px){.trow>span:first-child span:last-child{display:none}}
@media (prefers-reduced-motion:reduce){.prog i,.v-in,.ring,.grow,.fillx,.sweep,.blip,.cell,.slide,.dash{animation:none}.blip{opacity:0}}

/* static version only: the design's driver rows and panel header overflow on phones */
@media (max-width: 820px) {
  .drow { grid-template-columns: minmax(0, 1fr) 64px 34px !important; gap: 10px !important; }
  .tphead { flex-wrap: wrap; }
}

/* sub-pages: light header and footer like the front page */
.vs-head { position: sticky; top: 0; z-index: 20; background: rgba(227,232,232,0.86); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(20,22,23,0.06); }
.vs-head-in { max-width: 1320px; margin: 0 auto; box-sizing: border-box; padding: 16px 32px; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 16px; font-family: "Geist", system-ui, sans-serif; }
.vs-head-l { display: flex; flex-wrap: wrap; align-items: center; gap: 36px; }
.vs-head-l > a { display: flex; }
.vs-head-l img { height: 24px; width: auto; display: block; }
.vs-head nav, .vs-head-r { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; font-size: 15px; font-weight: 500; }
.vs-head-r { gap: 18px; }
.vs-head a.navlink, .vs-foot a.navlink { color: #22303A; text-decoration: none; }
.vs-head a.navlink:hover, .vs-foot a.navlink:hover { color: #12263A; }
.vs-head a.vs-cta { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 999px;
  background: #12263A; color: #F4F6F5; text-decoration: none; font-weight: 600; }
.vs-foot { max-width: 1200px; margin: 64px auto 0; box-sizing: border-box; padding: 32px 24px 48px;
  border-top: 1px solid rgba(20,22,23,0.08); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 20px; font-family: "Geist", system-ui, sans-serif; }
.vs-foot img { height: 22px; width: auto; display: block; }
.vs-foot-mid { font-size: 14px; color: #4A5357; }
.vs-foot-links { display: flex; gap: 20px; font-size: 14px; }
@media (max-width: 820px) {
  .vs-head nav { display: none; }
  .vs-head-in { padding: 14px 16px; }
}