/* AutoSvar – markedsside
   Samme uttrykk som appen: fjordgrønt blekk på kjølig papir, signalgult for det som skal handles på. */

:root {
  --ink: #0b3530;
  --fjord: #0e5a4f;
  --fjord-dark: #0a453c;
  --fjord-bg: #e2efeb;
  --mist: #f2f5f4;
  --paper: #ffffff;
  --text: #15211f;
  --muted: #5a6b68;
  --line: #dbe3e0;
  --signal: #f2c14e;
  --signal-bg: #fdf3d8;
  --signal-text: #7a5300;
  --ok: #1d6b45;
  --ok-bg: #e5f4ec;
  --hot: #b42318;
  --hot-bg: #fdeceb;
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

h1, h2, h3 { margin: 0; line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-size: clamp(30px, 4.2vw, 46px); font-weight: 800; text-wrap: balance; }
h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; border-radius: 6px; }

.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--signal); color: var(--ink); padding: 8px 12px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 8px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px; border-radius: 10px; font-weight: 600; font-size: 15px;
  text-decoration: none; border: 0; cursor: pointer; transition: background-color .15s, transform .15s;
}
.btn-lg { padding: 14px 24px; font-size: 17px; }
.btn-block { width: 100%; }
.btn-signal { background: var(--signal); color: var(--ink); }
.btn-signal:hover { background: #f5cd6b; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--fjord-dark); }

/* Toppmeny */
.top { position: sticky; top: 0; z-index: 5; background: var(--ink); color: #fff; }
.top-inner { display: flex; align-items: center; gap: 24px; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; text-decoration: none; letter-spacing: -0.02em; }
.logo svg { width: 30px; height: 30px; }
.top-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 15px; }
.top-nav a:not(.btn) { color: rgba(255,255,255,.75); text-decoration: none; }
.top-nav a:not(.btn):hover { color: #fff; }
@media (max-width: 820px) { .top-nav a:not(.btn):not(.login) { display: none; } }
@media (max-width: 420px) { .top-nav .login { display: none; } }

/* Hero */
.hero { background: var(--ink); color: #fff; padding: 72px 0 0; overflow: hidden; }
.hero-title { font-size: clamp(40px, 7.4vw, 92px); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; }
.hero-title span { display: block; }
.hero-title span:nth-child(2) { color: var(--signal); }
.hero-lead { margin-top: 28px; max-width: 640px; font-size: 19px; color: rgba(255,255,255,.78); }
.hero-cta { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.hero-price { color: rgba(255,255,255,.65); font-size: 15px; }
#hvordan { margin-top: 56px; scroll-margin-top: 80px; }

/* Spilleren («filmen») */
.player { margin: 0; position: relative; }
.stage {
  position: relative; aspect-ratio: 16 / 9.4; container-type: inline-size;
  background: linear-gradient(180deg, #164a43 0%, #0f3d37 100%);
  border-radius: 18px 18px 0 0; overflow: hidden;
  box-shadow: 0 -1px 0 rgba(255,255,255,.08) inset;
}
@media (max-width: 640px) { .stage { aspect-ratio: 4 / 5; } }
.scene {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s;
  padding: 4cqw;
}
.scene.on { opacity: 1; visibility: visible; transition: opacity .5s ease; }

.chapters {
  display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 0;
  background: #0f3d37; border-radius: 0 0 18px 18px; border-top: 1px solid rgba(255,255,255,.08);
}
.chapter {
  position: relative; display: flex; align-items: center; gap: 10px; text-align: left;
  background: none; border: 0; color: rgba(255,255,255,.6); font: inherit; font-size: 15px;
  padding: 18px 20px; cursor: pointer;
}
.chapter b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 12px; flex: none; }
.chapter:hover { color: #fff; }
.chapter[aria-current="step"] { color: #fff; }
.chapter[aria-current="step"] b { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.chapter .bar { position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: transparent; }
.chapter .bar i { display: block; height: 100%; width: 0; background: var(--signal); }
.playpause { width: 56px; background: none; border: 0; border-left: 1px solid rgba(255,255,255,.08); color: #fff; cursor: pointer; display: grid; place-items: center; }
.playpause svg { width: 18px; height: 18px; fill: currentColor; }
.playpause .i-play, .player.paused .playpause .i-pause { display: none; }
.player.paused .playpause .i-play { display: block; }
@media (max-width: 760px) {
  .chapters { grid-template-columns: repeat(3, 1fr) auto; }
  .chapter { flex-direction: column; align-items: flex-start; font-size: 13px; padding: 14px 10px; gap: 6px; line-height: 1.25; }
}

/* Kapittel 1: nettleser med bedriftens nettside */
.browser { width: 86cqw; background: #fff; border-radius: 1.4cqw; overflow: hidden; color: var(--text); box-shadow: 0 2cqw 5cqw rgba(0,0,0,.3); }
.browser-bar { display: flex; align-items: center; gap: .7cqw; padding: 1.1cqw 1.4cqw; background: #eef1f0; font-size: 1.3cqw; color: var(--muted); }
.browser-bar i { width: 1cqw; height: 1cqw; border-radius: 50%; background: #cfd6d4; }
.browser-bar span { margin-left: 1.4cqw; background: #fff; padding: .3cqw 1.2cqw; border-radius: 99px; }
.site-head { display: flex; align-items: baseline; gap: 1.6cqw; padding: 1.8cqw 3cqw; background: #3b2f2f; color: #fff; font-size: 1.9cqw; }
.site-head span { font-size: 1.4cqw; opacity: .7; }
.site-body { display: grid; grid-template-columns: 1fr 1.3fr; gap: 3cqw; padding: 3cqw; background: #f7f3ee; }
.site-copy h3 { font-family: Georgia, serif; font-size: 3.4cqw; letter-spacing: 0; font-weight: 700; }
.site-copy p { margin-top: 1.2cqw; font-family: Georgia, serif; font-size: 1.6cqw; color: #555; }
.form { position: relative; display: grid; gap: 1.2cqw; background: #fff; padding: 2.2cqw; border-radius: 1cqw; font-size: 1.35cqw; font-weight: 600; }
.form label { display: grid; gap: .5cqw; }
.field { min-height: 3.2cqw; border: .15cqw solid #d6dbd9; border-radius: .7cqw; padding: .7cqw 1cqw; font-weight: 400; font-size: 1.4cqw; line-height: 1.4; white-space: pre-wrap; }
.field-area { min-height: 8.4cqw; }
.field.focus { border-color: var(--fjord); box-shadow: 0 0 0 .35cqw rgba(14,90,79,.15); }
.field.focus::after { content: ""; display: inline-block; width: .15cqw; height: 1.6cqw; background: var(--text); vertical-align: -0.25cqw; margin-left: .1cqw; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.send { text-align: center; background: var(--fjord); color: #fff; border-radius: .7cqw; padding: 1.1cqw; font-size: 1.5cqw; transition: transform .15s, background-color .2s; }
.send.press { transform: scale(.97); background: var(--fjord-dark); }
.sent { position: absolute; inset: 0; display: grid; place-items: center; background: #fff; border-radius: 1cqw; font-size: 2cqw; color: var(--ok); opacity: 0; transition: opacity .35s; }
.sent.on { opacity: 1; }

/* Kapittel 2: dashbordet */
.app { width: 88cqw; display: grid; grid-template-columns: 19cqw 1fr; background: var(--mist); border-radius: 1.4cqw; overflow: hidden; color: var(--text); box-shadow: 0 2cqw 5cqw rgba(0,0,0,.3); }
.app-side { background: var(--ink); color: #fff; padding: 2cqw 1.4cqw; display: grid; align-content: start; gap: .6cqw; font-size: 1.4cqw; }
.app-logo { display: flex; align-items: center; gap: .8cqw; font-weight: 800; font-size: 1.8cqw; margin-bottom: 1.6cqw; }
.app-logo span { width: 2.2cqw; height: 2cqw; background: var(--signal); border-radius: .5cqw .5cqw .5cqw .1cqw; }
.app-nav { padding: .8cqw 1cqw; border-radius: .6cqw; color: rgba(255,255,255,.6); }
.app-nav.on { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset .3cqw 0 0 var(--signal); }
.app-main { padding: 2.4cqw; }
.case { background: #fff; border: .12cqw solid var(--line); border-left: .5cqw solid var(--signal); border-radius: 1cqw; padding: 2.2cqw; display: grid; gap: 1.5cqw; transition: border-color .4s; }
.case.done { border-left-color: var(--ok); }
.case-head { display: flex; justify-content: space-between; align-items: start; gap: 2cqw; }
.case-head b { display: block; font-size: 2cqw; }
.case-head span { font-size: 1.3cqw; color: var(--muted); }
.status { flex: none; font-size: 1.25cqw; font-weight: 600; padding: .35cqw 1cqw; border-radius: 99px; background: var(--signal-bg); color: var(--signal-text); transition: background-color .3s, color .3s; }
.status.status-ok, .status.ok { background: var(--ok-bg); color: var(--ok); }
.case-msg { font-size: 1.5cqw; color: #33413f; }
.analysis { display: flex; flex-wrap: wrap; gap: .8cqw; }
.chip { font-size: 1.25cqw; font-weight: 600; padding: .45cqw 1.1cqw; border-radius: 99px; background: var(--mist); color: var(--muted); opacity: 0; transform: translateY(.6cqw); transition: opacity .35s, transform .35s; }
.chip.on { opacity: 1; transform: none; }
.chip-hot { background: var(--hot-bg); color: var(--hot); }
.chip-price { background: var(--fjord-bg); color: var(--fjord); }
.draft { background: var(--mist); border-radius: .8cqw; padding: 1.6cqw; }
.draft-label { display: flex; align-items: center; gap: .7cqw; font-size: 1.25cqw; font-weight: 600; color: var(--fjord); }
.spark { width: 1.1cqw; height: 1.1cqw; background: var(--signal); transform: rotate(45deg); border-radius: .2cqw; }
.draft-text { margin-top: .9cqw; min-height: 8.6cqw; font-size: 1.45cqw; line-height: 1.5; white-space: pre-wrap; }
.approve-row { position: relative; display: flex; justify-content: flex-end; }
.approve { background: var(--fjord); color: #fff; font-weight: 600; font-size: 1.45cqw; padding: 1cqw 2cqw; border-radius: .7cqw; opacity: .45; transition: opacity .3s, transform .15s, background-color .2s; }
.approve.ready { opacity: 1; }
.approve.press { transform: scale(.96); background: var(--fjord-dark); }
.cursor {
  position: absolute; right: 30cqw; top: 6cqw; width: 2.4cqw; height: 2.4cqw; opacity: 0;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9-6.5 1.5L16 20l-3 1.5-3.5-7.5L4 18z' fill='%23fff' stroke='%23152' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: right .9s cubic-bezier(.3,.7,.3,1), top .9s cubic-bezier(.3,.7,.3,1), opacity .3s;
}
.cursor.on { opacity: 1; }
.cursor.at { right: 6cqw; top: 1.6cqw; }

/* Kapittel 3: ferdig */
.done-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 5cqw; align-items: center; width: 84cqw; }
.done-card { background: #fff; color: var(--text); border-radius: 1.4cqw; padding: 3cqw; display: grid; gap: 1.2cqw; justify-items: start; box-shadow: 0 2cqw 5cqw rgba(0,0,0,.3); }
.done-card b { font-size: 2.3cqw; }
.done-card p { font-size: 1.5cqw; color: var(--muted); }
.done-time { margin-top: 1.4cqw; display: grid; }
.done-time strong { font-size: 7cqw; line-height: 1; letter-spacing: -0.04em; color: var(--fjord); font-variant-numeric: tabular-nums; }
.done-time span { font-size: 1.5cqw; color: var(--muted); }
.phone { justify-self: center; width: 25cqw; aspect-ratio: 9 / 16.5; background: #0a1f1c; border-radius: 4cqw; padding: 1.4cqw; position: relative; box-shadow: 0 2cqw 5cqw rgba(0,0,0,.35); }
.phone::before { content: ""; position: absolute; inset: 1.4cqw; background: #f5f7f6; border-radius: 2.8cqw; }
.phone-notch { position: absolute; top: 2.2cqw; left: 50%; width: 8cqw; height: 1.6cqw; transform: translateX(-50%); background: #0a1f1c; border-radius: 99px; z-index: 1; }
.mail { position: absolute; left: 3cqw; right: 3cqw; top: 6.5cqw; background: #fff; color: var(--text); border-radius: 1.6cqw; padding: 1.8cqw; box-shadow: 0 .6cqw 2cqw rgba(0,0,0,.12); font-size: 1.3cqw; line-height: 1.45; opacity: 0; transform: translateY(-2cqw); transition: opacity .45s, transform .45s cubic-bezier(.2,.8,.3,1); }
.mail.on { opacity: 1; transform: none; }
.mail-from { display: flex; gap: 1cqw; align-items: center; margin-bottom: 1cqw; }
.mail-from b { display: block; font-size: 1.4cqw; }
.mail-from span { font-size: 1.15cqw; color: var(--muted); }
.avatar { flex: none; display: grid; place-items: center; width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: #3b2f2f; color: #fff; font-weight: 700; font-size: 1.5cqw; }

/* Mobil: scenene stables og skaleres opp */
@container (max-width: 640px) {
  .scene { padding: 5cqw; }
  .browser { width: 100%; }
  .browser-bar { font-size: 2.6cqw; padding: 2cqw; gap: 1.4cqw; }
  .browser-bar i { width: 2cqw; height: 2cqw; }
  .site-head { font-size: 3.6cqw; padding: 3cqw 4cqw; }
  .site-head span { display: none; }
  .site-body { grid-template-columns: 1fr; padding: 4cqw; gap: 3cqw; }
  .site-copy h3 { font-size: 6cqw; }
  .site-copy p { display: none; }
  .form { font-size: 2.8cqw; padding: 4cqw; gap: 2.4cqw; }
  .field { font-size: 3cqw; min-height: 6.4cqw; padding: 1.4cqw 2cqw; }
  .field-area { min-height: 22cqw; }
  .field.focus::after { height: 3.4cqw; width: .3cqw; }
  .send { font-size: 3.2cqw; padding: 2.4cqw; }
  .sent { font-size: 4cqw; }
  .app { width: 100%; grid-template-columns: 1fr; }
  .app-side { display: none; }
  .app-main { padding: 3cqw; }
  .case { padding: 4cqw; gap: 3cqw; border-left-width: 1cqw; }
  .case-head b { font-size: 4cqw; }
  .case-head span, .status, .chip, .draft-label { font-size: 2.7cqw; }
  .case-msg { font-size: 3.2cqw; }
  .chip { padding: .9cqw 2.2cqw; }
  .draft { padding: 3cqw; }
  .draft-text { font-size: 3.1cqw; min-height: 24cqw; }
  .spark { width: 2.2cqw; height: 2.2cqw; }
  .approve { font-size: 3.2cqw; padding: 2.2cqw 4cqw; }
  .cursor { width: 5cqw; height: 5cqw; }
  .cursor.at { right: 12cqw; top: 3cqw; }
  .done-grid { grid-template-columns: 1fr; width: 100%; gap: 5cqw; }
  .done-card { padding: 5cqw; gap: 2cqw; }
  .done-card b { font-size: 4.6cqw; }
  .done-card p, .done-time span { font-size: 3cqw; }
  .done-time strong { font-size: 13cqw; }
  .phone { width: 64cqw; aspect-ratio: 9 / 8; border-radius: 6cqw; }
  .phone::before { border-radius: 4.4cqw; }
  .phone-notch { width: 16cqw; height: 3cqw; top: 2.6cqw; }
  .mail { top: 8cqw; font-size: 2.8cqw; padding: 3.2cqw; border-radius: 3cqw; }
  .mail-from b { font-size: 3cqw; }
  .mail-from span { font-size: 2.4cqw; }
  .avatar { width: 6.4cqw; height: 6.4cqw; font-size: 3cqw; }
}

/* Seksjoner */
section:not(.hero) { padding: 104px 0; }
@media (max-width: 700px) { section:not(.hero) { padding: 72px 0; } }

.why { background: var(--paper); }
.why-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: start; }
.why-grid h2 { position: sticky; top: 100px; max-width: 12ch; }
.why-points { display: grid; gap: 40px; }
.why-points p { margin-top: 10px; color: var(--muted); max-width: 60ch; }
.why-points > div { padding-top: 24px; border-top: 2px solid var(--line); }
.why-points > div:last-child { border-top-color: var(--signal); }
@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr; gap: 40px; } .why-grid h2 { position: static; max-width: none; } }

.features { background: var(--mist); }
.feature-list { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 40px; }
.feature-list p { margin-top: 10px; color: var(--muted); }
@media (max-width: 900px) { .feature-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .feature-list { grid-template-columns: 1fr; gap: 32px; } }

.pricing-grid { display: grid; grid-template-columns: 1fr 420px; gap: 64px; align-items: center; }
.pricing-grid > div:first-child p { margin-top: 18px; max-width: 52ch; font-size: 18px; }
.price-card { background: var(--ink); color: #fff; border-radius: 20px; padding: 36px; }
.price { font-size: 22px; color: rgba(255,255,255,.75); }
.price span { font-size: 64px; font-weight: 800; letter-spacing: -0.04em; color: #fff; }
.setup { margin-top: 6px; font-size: 18px; font-weight: 600; color: var(--signal); }
.price-card .muted { color: rgba(255,255,255,.6); margin-top: 6px; }
.checks { list-style: none; padding: 0; margin: 28px 0 32px; display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 30px; color: rgba(255,255,255,.88); }
.checks li::before { content: ""; position: absolute; left: 0; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--signal) no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='%230b3530' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.price-card .btn-ink { background: var(--signal); color: var(--ink); }
.price-card .btn-ink:hover { background: #f5cd6b; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 480px) { .price-card { padding: 28px 22px; } .price span { font-size: 52px; } }

.faq { background: var(--mist); }
.faq-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 64px; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; font-weight: 600; font-size: 18px; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--fjord); border-bottom: 2px solid var(--fjord); transform: translateY(-75%) rotate(45deg); transition: transform .2s; }
.faq-list details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq-list details p { padding: 0 0 22px; color: var(--muted); max-width: 62ch; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; gap: 24px; } }

.contact { background: var(--paper); }
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
.contact-grid > div:first-child p { margin-top: 16px; max-width: 46ch; font-size: 18px; }
.contact-grid > div:first-child p.small { font-size: 14px; }
.contact-form { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } .contact-form { padding: 16px; } }

.foot { background: var(--ink); color: rgba(255,255,255,.65); font-size: 14px; }
.foot-inner { display: flex; justify-content: space-between; padding-top: 28px; padding-bottom: 28px; }
.foot a { color: rgba(255,255,255,.8); }