/* Cadrans egne fonter (fra designsystemet) */
@font-face { font-family: "Gestura Text"; src: url("fonts/GesturaText-Extralight.otf") format("opentype"); font-weight: 200; font-display: swap; }
@font-face { font-family: "Gestura Text"; src: url("fonts/GesturaText-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Gestura Text"; src: url("fonts/GesturaText-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Die Grotesk A"; src: url("fonts/DieGrotesk-A-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Die Grotesk A"; src: url("fonts/DieGrotesk-A-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Die Grotesk B"; src: url("fonts/DieGrotesk-B-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Die Grotesk B"; src: url("fonts/DieGrotesk-B-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }

/* Farger og skrifter styres herfra */
:root {
  --accent: #1C180D;           /* Brun – knapper og mørke flater */
  --accent-dark: #3A3322;
  --sage: #E6DDC0;             /* nedtonet gull – «With Cadran»-søyler */
  --olive: #CBBF95;            /* dempet gull – reimer og detaljer */
  --orange: #A8925A;           /* mørk gull – små aksenter */
  --ink: #1C180D;
  --text: #575249;
  --muted: #8C877D;
  --line: #E2E0DB;
  --bg: #F7F6F3;
  --band: #EEEDEA;
  --track: #EAE9E5;
  --footer: #1C180D;
  --serif: "Gestura Text", Georgia, serif;
  --body: "Die Grotesk A", Arial, sans-serif;
  --mono: "Die Grotesk B", ui-monospace, monospace;
  --radius: 20px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--body); color: var(--text); background: var(--bg); line-height: 1.55; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); font-weight: 300; line-height: 1.08; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.8rem, 6vw, 4.8rem); }
h1 em { font-style: italic; }
h2 { font-size: clamp(2.1rem, 4vw, 3.3rem); }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.section { padding: 104px 24px; }
.center { text-align: center; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.25rem); margin: 18px 0; }
.sub { margin: 18px auto 0; font-size: 1.05rem; }
.eyebrow { font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: var(--ink); margin-bottom: 16px; }

/* Knapper */
.btn { display: inline-block; background: var(--accent); color: #fff; padding: 14px 26px; border-radius: 8px; font-weight: 500; border: 0; cursor: pointer; font: inherit; font-weight: 500; transition: background .2s, transform .2s; }
.btn:hover { background: var(--accent-dark); transform: translateY(-1px); }
.btn-sm { padding: 9px 16px; font-size: .9rem; }
.btn-pill { border-radius: 99px; padding: 10px 18px; font-size: .92rem; }
.btn-full { display: block; width: 100%; text-align: center; margin-top: 22px; }
.link { font-weight: 500; color: var(--ink); border-bottom: 1.5px solid var(--ink); padding-bottom: 2px; }

/* 1. Meny */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(247,246,243,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; align-items: center; gap: 36px; height: 68px; }
.logo { display: inline-flex; align-items: center; }
.logo img { height: 28px; width: auto; }
.nav-links { display: flex; gap: 30px; font-size: .92rem; font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
.nav-links small { font-size: .7em; opacity: .6; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: .9rem; }
.burger { display: none; margin-left: auto; background: none; border: 0; font-size: 1.5rem; cursor: pointer; }

/* 2. Hero */
/* Som hos Librar: bred tekstkolonne, smalere bilde helt ut i høyre kant */
.hero { display: grid; grid-template-columns: 3fr 2fr; height: min(620px, calc(100vh - 68px)); min-height: 520px; }
.hero-text { padding: 64px 56px 64px max(24px, calc((100vw - 1160px) / 2 + 24px)); align-self: center; }
.hero-text h1 { max-width: 640px; }
.hero-text .lead { max-width: 30em; }
.hero h1 { font-size: clamp(2.4rem, 4.4vw, 3.9rem); }
.hero-cta { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.hero-img { background: var(--band); overflow: hidden; }
.hero-img { position: relative; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }


/* Dashbordet på laptopen i hero – bygget i HTML (1600 × 1000) og lagt i skjermens perspektiv med script.js */
.sui { position: absolute; left: 0; top: 0; width: 1600px; height: 1000px; transform-origin: 0 0; box-sizing: border-box;
  padding: 26px 40px 30px; overflow: hidden; pointer-events: none; visibility: hidden;
  background: radial-gradient(120% 90% at 10% 100%, #3a2f1b 0%, rgba(58,47,27,0) 55%), linear-gradient(160deg, #1d1a12 0%, #231d12 55%, #2c2314 100%);
  color: #EDE6D3; font-family: var(--body); font-size: 20px; line-height: 1.2; display: flex; flex-direction: column; gap: 16px;
  filter: contrast(.98) saturate(.97); }
.sui.placed { visibility: visible; }
.sui * { box-sizing: border-box; }
.sui-nav { height: 70px; flex: none; display: flex; align-items: center; gap: 34px; padding: 0 16px 0 28px; border-radius: 40px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); font-size: 18px; color: #B8AF99; }
.sui-logo { display: inline-flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 28px; color: #EDE6D3; margin-right: 12px; }
.sui-logo svg { height: 26px; width: auto; fill: #D8C58E; }
.sui-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; }
.sui-tab.on { color: #F2ECDC; font-weight: 700; }
.sui-tab.on::after { content: ""; position: absolute; left: -12px; right: -12px; bottom: -14px; height: 2px; background: #EDE6D3; }
.sui-tab i { width: 8px; height: 8px; border-radius: 50%; background: #D9574A; }
.sui-pos { margin-left: auto; background: #E3CF8E; color: #1C180D; font-weight: 700; padding: 12px 26px; border-radius: 30px; }
.sui-avatar { width: 40px; height: 40px; border-radius: 50%; background: #3A3223; display: grid; place-items: center; font-size: 14px; color: #EDE6D3; }
.sui-head { flex: none; display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 6px; }
.sui-head h3 { font-family: var(--serif); font-weight: 300; font-size: 44px; color: #F2ECDC; margin: 0 auto 0 0; letter-spacing: 0; }
.sui-pill { border: 1px solid rgba(255,255,255,.12); border-radius: 30px; padding: 8px 16px; color: #CFC6B0; font-size: 18px; }
.sui-pill.small { font-size: 16px; padding: 6px 14px; margin-left: auto; font-family: var(--body); }
.sui-muted { color: #9F977F; font-size: 18px; }
.sui-card { min-height: 0; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.07); border-radius: 22px; padding: 22px 26px; }
.sui-kpis { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; height: 128px; }
.sui-kpis .sui-card { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 14px 26px; }
.sui-kpis b { font-weight: 400; font-size: 48px; line-height: 1; color: #F2ECDC; }
.sui-kpis span { font-size: 18px; color: #C7BEA8; }
.sui-row { display: grid; grid-template-columns: 1.8fr 1.2fr; gap: 16px; height: 340px; flex: none; }
.sui-row2 { grid-template-columns: 1fr 1fr; flex: 1; height: auto; min-height: 0; }
.sui-title { display: flex; align-items: center; font-family: var(--serif); font-size: 26px; color: #F2ECDC; }
.sui-big { font-size: 34px; line-height: 1.1; color: #F2ECDC; margin: 8px 0 10px; }
.sui-big .sui-muted { font-size: 18px; margin-left: 10px; }
.sui-chart { display: grid; grid-template-columns: 110px 1fr; height: 200px; }
.sui-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 14px; color: #8E866F; padding-bottom: 26px; }
.sui-bars { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; height: 210px; margin: 26px 10px 26px; border-bottom: 1px solid rgba(255,255,255,.08); position: relative; }
.sui-col { position: relative; height: 100%; display: flex; justify-content: center; align-items: flex-end; }
.sui-bar { width: 40px; background: #D9C68F; border-radius: 6px 6px 0 0; }
.sui-col:not(.today) .sui-bar { background: #8F7F55; }
.sui-col.today span { color: #EDE6D3; }
.sui-col span { position: absolute; bottom: -28px; font-size: 15px; color: #8E866F; white-space: nowrap; }
.sui-donut-wrap { display: flex; align-items: center; gap: 34px; height: calc(100% - 40px); padding-left: 10px; }
.sui-donut { position: relative; width: 176px; height: 176px; flex: none; }
.sui-donut svg { width: 100%; height: 100%; }
.sui-donut b { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 400; font-size: 44px; color: #F2ECDC; }
.sui-donut b.small { font-size: 26px; }
.sui-legend { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; gap: 14px; font-size: 19px; color: #D9D1BC; }
.sui-legend li { display: flex; align-items: center; gap: 12px; }
.sui-legend i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.sui-legend b { margin-left: auto; font-weight: 700; }
.sui-legend.wide { max-width: 400px; } .sui-legend.wide b { font-weight: 400; color: #B8AF99; }
.sui-gauge { position: relative; width: 300px; margin: 14px auto 0; text-align: center; }
.sui-gauge svg { width: 100%; }
.sui-gauge b { position: absolute; left: 0; right: 0; top: 96px; font-weight: 400; font-size: 46px; color: #F2ECDC; }
.sui-gauge span { position: absolute; left: 0; right: 0; top: 150px; font-size: 16px; color: #A79F88; }
.sui-glare { position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 45%); pointer-events: none; }
/* Hero: dashbordet som et forhåndskrympet bilde (640 × 400) – skarpere enn å krympe HTML kraftig med perspektiv */
.sui.sui-shot { width: 640px; height: 400px; max-width: none; padding: 0; background: none; display: block; filter: none; object-fit: fill; }

/* 2b. Tre løfter – ett ord og én linje, hver med en liten animasjon */
#promises .wrap { padding-top: 72px; padding-bottom: 72px; }
.promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.promise { display: block; color: var(--ink); text-decoration: none; }
.promise-visual { background: #fff; border: 1px solid var(--line); border-radius: 18px; aspect-ratio: 4 / 3; display: grid; place-items: center; margin-bottom: 20px; transition: transform .3s ease, box-shadow .3s ease; }
.promise:hover .promise-visual { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(28,24,13,.07); }
.promise-num { font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; color: var(--muted); margin: 0 0 6px; }
.promise h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); margin: 0 0 6px; }
.promise p:last-child { margin: 0; color: var(--text); }
.pv { height: 80%; width: auto; max-width: 84%; overflow: visible; }
.pv * { vector-effect: non-scaling-stroke; }

/* 01 All in one: fire moduler klikker sammen til én */
.pv-all .pv-frame { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 4 5; animation: pvFrame 6s ease-in-out infinite; }
.pv-all .pv-tile rect:first-child { fill: #fff; stroke: #1C180D; stroke-width: 1.5; }
.pv-all .pv-tile rect + *, .pv-all .pv-tile circle, .pv-all .pv-tile path { fill: none; stroke: #9C8B68; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pv-all .pv-tile { animation: pvSnap 6s cubic-bezier(.5,0,.2,1) infinite; }
.pv-all .t1 { --x: -34px; --y: -14px; } .pv-all .t2 { --x: 34px; --y: -14px; }
.pv-all .t3 { --x: -34px; --y: 14px; }  .pv-all .t4 { --x: 34px; --y: 14px; }
@keyframes pvSnap { 0%, 18% { transform: translate(var(--x), var(--y)); } 42%, 82% { transform: none; } 100% { transform: translate(var(--x), var(--y)); } }
@keyframes pvFrame { 0%, 30% { stroke: var(--line); stroke-dasharray: 4 5; } 42%, 82% { stroke: #1C180D; stroke-dasharray: 0; } 100% { stroke: var(--line); } }

/* 02 Intelligent: urskiven skannes, serienummeret blir funnet */
.pv-ai .pv-dial { fill: #fff; stroke: #1C180D; stroke-width: 1.8; }
.pv-ai .pv-ticks line { stroke: #1C180D; stroke-width: 1.4; }
.pv-ai .pv-hands { stroke: #1C180D; stroke-width: 2; stroke-linecap: round; fill: none; }
.pv-ai .pv-pin { fill: #1C180D; }
.pv-ai .pv-brackets { fill: none; stroke: #9C8B68; stroke-width: 1.8; }
.pv-ai .pv-scan { fill: #C4B075; animation: pvScan 4.5s ease-in-out infinite; }
.pv-ai .pv-chip rect { fill: #1C180D; } .pv-ai .pv-chip text { font-family: var(--mono); font-size: 8px; letter-spacing: .12em; fill: #F5F2EA; }
.pv-ai .pv-chip { animation: pvChip 4.5s ease-in-out infinite; }
@keyframes pvScan { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 48% { transform: translateY(82px); opacity: 1; } 55%, 100% { transform: translateY(82px); opacity: 0; } }
@keyframes pvChip { 0%, 52% { opacity: 0; transform: translateY(6px); } 60%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 03 Made for watch stores: lupe med tannhjul som går */
.pv-craft .pv-glass { fill: #F4F2EC; }
.pv-craft .pv-gear { fill: none; stroke: #9C8B68; stroke-width: 1.4; }
.pv-craft .pv-hub { fill: none; stroke: #9C8B68; stroke-width: 1.2; }
.pv-craft .g1 { transform-origin: 80px 74px; animation: pvTurn 14s linear infinite; }
.pv-craft .g2 { transform-origin: 114px 44px; animation: pvTurn 9s linear infinite reverse; }
.pv-craft .pv-ring { fill: none; stroke: #1C180D; stroke-width: 2.2; }
.pv-craft .pv-handle { stroke: #1C180D; stroke-width: 9; stroke-linecap: round; }
.pv-craft .pv-glint { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .9; }
@keyframes pvTurn { to { transform: rotate(360deg); } }
.pv g, .pv rect, .pv path { transform-box: view-box; }

/* Bevis 1: «Switching is easy» under flisene */
.what-switch { margin-top: 56px; }
.what-switch h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0; }
/* speilvendt: flyten til venstre, teksten til høyre (samme kolonnebredder som flisene over) */
.what-switch .move { grid-template-columns: 1fr 1fr; gap: 72px; }
.what-switch .flow { order: -1; }

/* Bevis 2: automatiseringer + tidsbesparelse */
.time-head { margin: 0 auto; }
.time-head .sub { max-width: 34em; margin: 14px auto 0; font-size: 1.2rem; color: var(--text); }
/* Cadran AI-symbolet over overskriften (som Toast IQ): gnister i en ring med palett-gradient */
.ai-mark { width: 60px; height: 60px; margin: 0 auto 22px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid transparent; background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, conic-gradient(from 200deg, #C4B075, #FFE7A0, #D1D0CC, #B4B1AC, #C4B075) border-box; }
.ai-mark svg { width: 28px; height: 28px; fill: #1C180D; }
.intel { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.intel .bars { margin: 0; max-width: none; padding: 36px; border-radius: var(--radius); background: var(--band); }
.auto-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.auto-list li { display: flex; align-items: center; gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); font-size: 1.15rem; color: var(--ink); }
.auto-list li:last-child { border-bottom: 1px solid var(--line); }
.auto-ico { flex: none; width: 48px; height: 48px; border-radius: 14px; background: #1C180D; display: grid; place-items: center; }
.auto-ico svg { width: 26px; height: 26px; fill: none; stroke: #E3CF8E; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Bevis 2: forklarende tekst ved siden av søylene */
.intel-text .lead { margin-top: 0; color: var(--ink); font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.35; }
.intel-text p { color: var(--text); max-width: 32em; margin: 0 0 16px; }
.intel-text p:last-child { margin-bottom: 0; }
.intel-text a { color: var(--ink); border-bottom: 1px solid currentColor; }

/* Bevis 1: fem systemer blir ett, på én linje */
.what-switch.sw-strip { margin-top: 72px; text-align: center; }
.sw-row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; }
.sw-old { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: .9rem; text-decoration: line-through; text-decoration-color: rgba(28,24,13,.25); }
.sw-arrow { font-size: 1.4rem; color: var(--olive); margin: 0 6px; }
.sw-new { padding: 10px 22px; border-radius: 999px; background: #1C180D; color: #F5F2EA; font-family: var(--serif); font-size: 1.2rem; }
.sw-strip p { margin: 22px auto 0; max-width: 36em; color: var(--text); font-size: 1.1rem; }
.sw-strip p strong { color: var(--ink); }

/* Bevis 3 */
.glow-text .eyebrow { color: #C4B075; }
.glow-text .lead { margin-bottom: 14px; }
.glow-story { color: rgba(245,242,234,.62); max-width: 34em; margin: 0 0 30px; }

@media (max-width: 900px) {
  .promise-grid { grid-template-columns: 1fr; gap: 36px; }
  .promise-visual { aspect-ratio: 16 / 9; }
  .intel { grid-template-columns: 1fr; gap: 40px; }
  .what-switch.sw-strip { margin-top: 48px; }
  .what-switch .flow { order: 0; }
}
@media (prefers-reduced-motion: reduce) { .pv * { animation: none !important; } }

/* ===== v4: Seksjon 1 – Everything you need ===== */
/* Åpne kort: ingen kortflate, bare en rolig bildeflate (samme #EEEDEA og radius som resten av siden), tekst under */
.ev-head { margin-bottom: 48px; }
.ev-head .sub { font-size: 1.2rem; color: var(--text); }
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 20px; }
.tile-card { position: relative; display: flex; flex-direction: column; text-align: left; color: #1C180D; transition: transform .3s ease; }
.tile-card:hover { transform: translateY(-4px); }
.tile-img { flex: none; width: 100%; aspect-ratio: 1 / 1; margin-bottom: 18px; border-radius: var(--radius); background: var(--band); overflow: hidden;
  display: grid; place-items: center; container-type: size; }
.tile-img > span { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #A48E66; }

/* Gjenstand i kortet: boksen har bildets proporsjoner (900 × 720) og fyller rommet så langt den kan */
.device { position: relative; z-index: 1; width: min(106cqw, 100cqh * 1.25); aspect-ratio: 900 / 720; }
.device > img { display: block; width: 100%; height: 100%; position: relative; z-index: 1; }
.device::before { content: ""; position: absolute; left: 22%; right: 6%; bottom: 3%; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(110,85,50,.45), rgba(110,85,50,0)); filter: blur(4px); transform: translateX(-4%); }
.screen-ui { position: absolute; left: 0; top: 0; z-index: 2; transform-origin: 0 0; visibility: hidden; }
.screen-ui.placed { visibility: visible; }

/* Svevende UI-utsnitt i kortene (som Toast). Alt måles i em, og em følger kortets størrelse (cq-enheter). */
.float-ui { position: relative; z-index: 1; width: 23.5em; font-size: min(3.4cqw, 4.6cqh); box-sizing: border-box; padding: 1.1em 1.2em .5em;
  border-radius: 1.1em; color: #1C180D; font-family: var(--body); text-align: left;
  background: #FFFFFF; border: 1px solid rgba(28,24,13,.06);
  box-shadow: 0 1.6em 2.4em -1.4em rgba(70,52,22,.45); transform: translateY(-.8em); }
.float-ui::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -2.6em; height: 1.1em; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(110,85,50,.4), rgba(110,85,50,0)); filter: blur(3px); }
.inv-head { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin-bottom: .5em; }
.inv-head strong { font-family: var(--serif); font-weight: 400; font-size: 1.45em; }
.inv-search { display: inline-flex; align-items: center; gap: .4em; font-size: .78em; padding: .45em .9em; border-radius: 2em;
  border: 1px solid #D1D0CC; color: #1C180D; }
.inv-search svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; }
.inv-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75em; padding: .65em 0; border-top: 1px solid rgba(28,24,13,.08); }
.inv-row b { display: block; font-weight: 500; font-size: .95em; }
.inv-row small { display: block; font-size: .72em; color: rgba(28,24,13,.5); margin-top: .1em; }
.inv-row > span { font-size: .9em; }
/* Søket «blue dial»: treffet markeres med gyllen ramme, de andre radene tones ned */
.inv-searching .inv-row { opacity: .35; }
.inv-searching .inv-row.inv-hit { opacity: 1; position: relative; z-index: 1; margin: 0 -.6em; padding-inline: .6em; border-radius: .7em; border-top-color: transparent;
  background: #F5F5F5; box-shadow: inset 0 0 0 1.5px #1C180D; }
.inv-searching .inv-row.inv-hit + .inv-row { border-top-color: transparent; }
.inv-searching .inv-search { background: #F5F5F5; border-color: #B4B1AC; }
.dial { width: 2em; height: 2em; border-radius: 50%; box-shadow: 0 0 0 .14em #D1D0CC, inset 0 -.2em .4em rgba(0,0,0,.18);
  background: radial-gradient(circle at 35% 30%, #FFFFFF, #E9E5DB 70%); }
.dial-blue { background: radial-gradient(circle at 35% 30%, #4A6A9A, #1F3557 70%); }
.dial-silver { background: radial-gradient(circle at 35% 30%, #F1EFEA, #BDB8AE 75%); }

/* Workshop: dagsplan (høyere panel, så det krymper tidligere i lave kort) */
.ws-ui { font-size: min(3.4cqw, 3.9cqh); }
.ws-row { grid-template-columns: auto 1fr auto; gap: .7em; }
.ws-due { font-size: .7em; color: rgba(28,24,13,.5); white-space: nowrap; }
.ws-due.late { color: #C0583A; }
.dial-black { background: radial-gradient(circle at 35% 30%, #4A4A4A, #141414 70%); }
.ws-start { margin: .7em auto .5em; width: fit-content; font-size: .8em; padding: .7em 1.4em; border-radius: 2em; background: #F5F5F5; color: #1C180D; font-weight: 500; box-shadow: inset 0 0 0 1px #D1D0CC; }

/* Customer management: SMS-varsel (lyst, som et varsel på telefonen) */
.bag { position: relative; height: 88cqh; aspect-ratio: 654 / 791; align-self: end; margin-bottom: 4cqh; }
.bag img { display: block; width: 100%; height: 100%; position: relative; z-index: 1; filter: brightness(1.16) saturate(.7); }
.bag::before { content: ""; position: absolute; left: -6%; right: -10%; bottom: -3%; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(110,85,50,.45), rgba(110,85,50,0)); filter: blur(4px); }
/* Meldingen ligger rett på posen (helt hvit, ikke glass), sentrert på posens front */
.notif-ui { position: absolute; z-index: 2; left: 50%; top: 47%; transform: translate(-50%, -50%);
  display: grid; grid-template-columns: auto 1fr; gap: .8em; align-items: start; padding: .95em 1.1em 1em;
  background: #FFFFFF; border: 0; color: #1C180D; box-shadow: 0 .5em 1.4em -.4em rgba(60,45,20,.35); }
.notif-ui::after { content: none; }
/* Større melding, så den er lett å lese (ca. 90 % av kortets bredde, som Toast) */
.notif-ui { font-size: min(4.3cqw, 5.4cqh); width: 20.5em; }
.notif-icon { width: 2.3em; height: 2.3em; border-radius: .55em; display: grid; place-items: center; background: linear-gradient(180deg, #6BEA7E, #1DB43A); }
.notif-icon svg { width: 1.45em; height: 1.45em; fill: #fff; }
.notif-top { display: flex; justify-content: space-between; align-items: baseline; gap: .6em; }
.notif-top b { font-weight: 600; font-size: 1em; }
.notif-top span { font-size: .78em; color: rgba(28,24,13,.5); }
.notif-text { font-size: .95em; line-height: 1.3; margin-top: .15em; color: rgba(28,24,13,.85); }

/* Payments: terminal med kort fra Midjourney + Approved-skjerm i HTML */
.device-term { width: min(100cqw, 92cqh * 0.524); aspect-ratio: 440 / 840; align-self: end; container-type: inline-size; }
.device-term::before { left: 4%; right: 18%; bottom: 1%; height: 6%; transform: none; }
.term-ui { width: 400px; height: 900px; background: radial-gradient(90% 60% at 60% 25%, #3A2E1C, #1C180D 80%); border-radius: 34px; }
/* Tekst i % av terminalbildet og cqw (bredden på terminalen), så den skalerer med kortet og forblir skarp */
.term-msg { position: absolute; z-index: 2; transform: translate(-50%, -50%) rotate(-2deg); display: flex; flex-direction: column; align-items: center;
  gap: 1.4cqw; color: #F5F2EA; font-family: var(--body); white-space: nowrap; }
.term-check { width: 15cqw; height: 15cqw; border-radius: 50%; border: 1cqw solid #E3CF8E; display: grid; place-items: center; box-sizing: border-box; margin-bottom: 1cqw; }
.term-check svg { width: 9cqw; height: 9cqw; fill: none; stroke: #E3CF8E; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.term-msg b { font-size: 7.6cqw; font-weight: 600; line-height: 1; }
.term-msg span { font-size: 3.6cqw; color: rgba(245,242,234,.7); }

/* Cadran AI: lyst chat-panel med gyllen kant (som Toast IQ) */
.ai-ui { padding: 1em 1.2em 1.1em; color: #1C180D; border: 0;
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(135deg, #D1D0CC, #F5F5F5 45%, #B4B1AC) border-box;
  border: .14em solid transparent; box-shadow: 0 1.6em 2.4em -1.4em rgba(70,52,22,.45); }
.ai-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: -.15em -.2em .8em; padding-bottom: .65em; border-bottom: 1px solid rgba(28,24,13,.08); }
.ai-hist { width: 1.3em; height: 1.3em; color: rgba(28,24,13,.45); }
.ai-hist svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.ai-name { display: inline-flex; align-items: center; gap: .45em; font-weight: 600; font-size: .92em; }
/* AI-ikon: gnister i en sirkel med gyllen gradient (som Toast IQ sitt fargede merke) */
.ai-spark { width: 1.75em; height: 1.75em; border-radius: 50%; display: grid; place-items: center; background: #F5F5F5; box-shadow: inset 0 0 0 1px #D1D0CC; }
.ai-spark svg { width: 1.1em; height: 1.1em; fill: #1C180D; }
.ai-x { justify-self: end; color: rgba(28,24,13,.45); font-size: 1.15em; line-height: 1; }
.ai-q { margin-left: auto; width: fit-content; max-width: 75%; background: #F5F5F5; border-radius: .9em .9em .2em .9em; padding: .5em .8em; font-size: .85em; }
.ai-a { font-size: .85em; line-height: 1.4; margin: .8em 0 .9em; color: rgba(28,24,13,.85); }
.ai-input { font-size: .78em; color: rgba(28,24,13,.45); border: 1px solid rgba(28,24,13,.14); border-radius: .7em; padding: .7em .9em; }

/* Lys variant av HTML-kassen (som den lyse kassen i Cadran: beige knapper, mørk betalingsknapp med gulltekst) */
.pos-ui.till-light { background: #F5F5F5; color: #1C180D; }
.till-light .till-side i, .till-light .till-cart, .till-light .till-search, .till-light .till-cats span { background: #FFFFFF; color: rgba(28,24,13,.7); box-shadow: 0 0 0 1px rgba(10,10,10,.06); }
.till-light .till-side i.on, .till-light .till-cats span.on { background: #77746E; color: #F5F5F5; box-shadow: none; }
.till-light .till-cust { background: #F5F5F5; color: rgba(28,24,13,.7); }
.till-light .till-line { color: rgba(28,24,13,.85); border-bottom-color: rgba(28,24,13,.08); }
.till-light .till-line em, .till-light .till-sub { color: rgba(28,24,13,.5); }
.till-light .till-methods i { background: #F5F5F5; color: rgba(28,24,13,.6); }
.till-light .till-methods i.on { box-shadow: inset 0 0 0 1.5px #1C180D; color: #1C180D; }
.till-light .till-pay { background: #1C180D; color: #F5F5F5; }
.till-light .till-grid span { color: #1C180D; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(10,10,10,.06); }
.till-light .till-grid small { color: rgba(28,24,13,.5); }
/* Vareknappene i palettfargene, tonet ned (blandet med ca. 40 % hvitt): Gull Lys, Grå 2, Gull Mørk, Grå 1, Brun, hvit */
.till-light .till-grid .t1 { background: #FFF1C6; box-shadow: none; }
.till-light .till-grid .t2 { background: #E3E3E0; box-shadow: none; }
.till-light .till-grid .t3 { background: #DCD0AC; box-shadow: none; }
.till-light .till-grid .t4 { background: #D2D0CD; box-shadow: none; }
.till-light .till-grid .t5 { background: #77746E; color: #F5F5F5; box-shadow: none; }
.till-light .till-grid .t5 small { color: rgba(245,245,245,.7); }
.till-light .till-grid .t6 { background: #FFFFFF; }
/* POS-skjerm (700 × 500): en vanlig kasse – funksjoner til venstre, bestilling, og store vareknapper med søk og kategorier (som Toast) */
.pos-ui { width: 700px; height: 500px; box-sizing: border-box; padding: 12px; display: grid; grid-template-columns: 44px 206px 1fr; gap: 10px;
  border-radius: 10px; background: #17140D; font-family: var(--body); color: #F5F2EA; }
.pos-ui svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.till-side { display: flex; flex-direction: column; gap: 8px; }
.till-side i { height: 44px; border-radius: 10px; background: #221D13; display: grid; place-items: center; color: rgba(245,242,234,.7); }
.till-side i.on { background: #E3CF8E; color: #1C180D; }
.till-side i:last-child { margin-top: auto; }
.till-cart { background: #221D13; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; }
.till-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.till-head b { font-size: 15px; font-weight: 600; }
.till-cust { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 4px 8px; border-radius: 20px; background: rgba(227,207,142,.16); color: #E3CF8E; }
.till-cust svg { width: 11px; height: 11px; }
.till-line { display: grid; grid-template-columns: 22px 1fr auto; font-size: 12.5px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.07); color: rgba(245,242,234,.88); }
.till-line em { font-style: normal; color: rgba(245,242,234,.5); }
.till-sub { display: flex; justify-content: space-between; font-size: 11px; color: rgba(245,242,234,.55); padding-top: 6px; }
.till-sub:first-of-type { margin-top: auto; }
.till-total { display: flex; justify-content: space-between; padding: 8px 0; font-size: 16px; font-weight: 600; }
.till-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.till-methods i { height: 30px; border-radius: 8px; background: #2C261A; display: grid; place-items: center; color: rgba(245,242,234,.7); }
.till-methods i.on { box-shadow: inset 0 0 0 1.5px #E3CF8E; color: #E3CF8E; }
.till-pay { background: #E3CF8E; color: #1C180D; border-radius: 10px; text-align: center; font-weight: 700; font-size: 17px; padding: 12px 0; }
.till-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.till-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 10px; background: #221D13; font-size: 12px; color: rgba(245,242,234,.45); }
.till-cats { display: flex; gap: 6px; }
.till-cats span { font-size: 11.5px; padding: 6px 11px; border-radius: 20px; background: #221D13; color: rgba(245,242,234,.7); }
.till-cats span.on { background: #E3CF8E; color: #1C180D; font-weight: 600; }
.till-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8px; }
.till-grid span { border-radius: 10px; display: flex; flex-direction: column; justify-content: flex-end; padding: 9px 11px; color: #fff; }
.till-grid b { font-size: 14px; font-weight: 600; }
.till-grid small { font-size: 11px; color: #E3CF8E; opacity: .85; margin-top: 2px; }
/* dempede, varme toner tett på bakgrunnen – sleek, ikke fargerikt */
.till-grid span { box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.till-grid .t1 { background: #4A3F2C; } .till-grid .t2 { background: #36312A; } .till-grid .t3 { background: #3F3528; }
.till-grid .t4 { background: #302C25; } .till-grid .t5 { background: #423829; } .till-grid .t6 { background: #2B2720; }
.tile-card h3 { color: #1C180D; font-size: 1.4rem; margin: 0 0 6px; }
.tile-card p { margin: 0; color: var(--text); font-size: .95rem; }

/* ===== v4: Seksjon 2 – AI i Toast-format ===== */
.ai-title { max-width: 820px; margin: 0 auto 56px; }
.ai-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.ai-card { padding: 34px 32px; border-radius: 24px; background: #fff; border: 1px solid transparent;
  background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #E3CF8E, #EDE9E0 45%, #C4B075); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 30px 60px rgba(28,24,13,.07); }
.ai-card .bars { margin: 0; max-width: none; }
.ai-copy h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0 0 12px; }
.ai-copy > p { color: var(--text); margin: 0 0 24px; }
.ai-steps { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 16px; }
.ai-steps li { display: flex; align-items: center; gap: 16px; font-size: 1.08rem; color: var(--ink); }
.ai-copy .btn { background: #1C180D; color: #F5F2EA; }
.ai-copy .btn:hover { background: #3A3322; }
.ai-steps span { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #C4B075; color: #9C8B68; display: grid; place-items: center; font-size: .9rem; }

@media (max-width: 900px) {
  .tile-grid { grid-template-columns: 1fr 1fr; }
  .ai-split { grid-template-columns: 1fr; gap: 36px; }
}
/* Prikker som viser hvor i galleriet man er (bare på mobil) */
.tile-dots { display: none; justify-content: center; align-items: center; gap: 7px; margin-top: 14px; }
.tile-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 4px; background: #D6CFC1; cursor: pointer; transition: width .3s ease, background .3s ease; }
.tile-dots button.on { width: 28px; background: #1C180D; }
/* Mobil: kortene blir et galleri som sveipes bortover (som Toast). Neste kort stikker litt frem i kanten. */
@media (max-width: 560px) {
  .tile-grid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    margin-inline: -16px; padding: 4px 16px 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tile-grid::-webkit-scrollbar { display: none; }
  .tile-card { flex: 0 0 82%; scroll-snap-align: start; }
  .tile-card:hover { transform: none; }
  .tile-dots { display: flex; }
}

/* Delte seksjoner */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split-img > img { border-radius: var(--radius); }

/* 3. Hva er Cadran – fire fliser */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 4px; }
.tile svg { width: 40px; height: 40px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 12px; }
.tile strong { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--ink); }
.tile span { font-size: .9rem; }

.band { background: var(--band); }

/* 4–6. Visualiseringer hentet fra prototype B (søyler, verksted-animasjon, overgang).
   Variablene under oversetter B sine navn til våre farger og fonter. */
.ported {
  --surface: #ffffff; --muted: var(--text); --track: #EAE9E5; --track-2: #DEDCD6;
  --forest: #1C180D; --on-forest: #F7F6F3; --accent: var(--orange);
  --display: var(--serif);
}
/* Søylene og verksted-animasjonen: samme uttrykk som overgangen –
   mørk brun som hovedfarge, noen få aksenter i mørk beige */
#time.ported, #workshop.ported, #example2.ported, #example3.ported {
  --ink: #1C180D; --muted: #575249; --line: #E2E0DB; --surface: #FFFFFF;
  --track: #F7F6F3; --track-2: #E2E0DB;
  --sage: #1C180D;   /* «With Cadran»-søyler og ferdige steg */
  --olive: #B9AD8E;  /* mørk beige: reimer, indekser, stiplede linjer */
  --forest: #1C180D;
  --accent: #9C8B68; /* mørk beige aksent: skannelinje, fokus, aktivt steg */
}
#time .fill.new { color: #F5F2EA; }
.what-right { min-width: 0; }
#workshop .saved i { color: #F5F2EA; }
.ported .mono { font-family: var(--mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.ported .muted { color: var(--muted); }
.ported .copy .eyebrow { margin-bottom: 16px; }
.ported .move-copy .btn { margin-top: 10px; background: var(--forest); }
.ported .move-copy .btn:hover { background: var(--accent-dark); }
/* compare */
.bars{max-width:680px;margin:64px auto 0;text-align:left;display:grid;gap:34px}
.bar-group header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.bar-group .delta{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.bar-group .delta svg{width:16px;height:16px}
.track{height:48px;border-radius:999px;background:var(--track);position:relative;overflow:hidden}
.track + .track{margin-top:8px}
.fill{position:absolute;inset:0 auto 0 0;border-radius:999px;display:flex;align-items:center;padding-inline:16px;font-size:.9rem;white-space:nowrap;transform-origin:left center}
.fill.old{background:var(--track-2);color:var(--muted)}
.fill.new{background:var(--sage);color:var(--ink);font-weight:500;min-width:7.6em}
.segs{position:absolute;inset:0;display:flex;gap:4px}
.segs span{flex:1;background:var(--track-2);color:var(--muted);font-size:.78rem;display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;padding-inline:4px}
.segs span:first-child{border-radius:999px 0 0 999px}
.segs span:last-child{border-radius:0 999px 999px 0}
.bars.play .fill,.bars.play .segs span{animation:grow 1.1s cubic-bezier(.2,.8,.2,1) both}
.bars.play .fill.new{animation-delay:.25s}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.bars.play .segs span{transform-origin:left;animation-delay:calc(var(--i) * .08s)}
@media (max-width:480px){.segs span{font-size:0} .intel .bars{padding:22px}}

/* workshop example */
.example{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,6vw,80px);align-items:center}
.stage{background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;min-width:0}
.stage svg{display:block;width:100%;height:auto;background:var(--surface)}
.readout{border-top:1px solid var(--line);padding:18px 22px 20px;display:grid;gap:10px}
.field{display:grid;grid-template-columns:7.5em 1fr;gap:12px;align-items:baseline;min-width:0}
.field .k{color:var(--muted)}
.field .v{font-family:var(--mono);font-size:.92rem;min-height:1.4em;overflow-wrap:anywhere}
.field .v.typing::after{content:"";display:inline-block;width:.55em;height:1.05em;background:var(--accent);vertical-align:-.15em;margin-left:2px;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.photos{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px;padding-top:14px;border-top:1px dashed var(--line)}
.thumbs{display:flex;gap:8px}
.thumb{width:48px;height:48px;border-radius:10px;border:1px solid var(--line);background:var(--bg);display:grid;place-items:center;transition:opacity .35s,transform .45s cubic-bezier(.3,1.5,.5,1)}
.thumb svg{width:34px;height:34px}
.saved{display:inline-flex;align-items:center;gap:8px;color:var(--ink);transition:opacity .4s .5s}
.saved i{width:18px;height:18px;border-radius:50%;background:var(--sage);display:grid;place-items:center;font-style:normal;font-size:.7rem}
.stage[data-phase="start"] .thumb,.stage[data-phase="approach"] .thumb,.stage[data-phase="focus"] .thumb,.stage[data-phase="shoot"] .thumb,.stage[data-phase="scan"] .thumb,.stage[data-phase="read"] .thumb{opacity:0;transform:translateY(-30px) scale(.6)}
.stage[data-phase="save"] .thumb:nth-child(2){transition-delay:.15s}
.stage[data-phase="save"] .thumb:nth-child(3){transition-delay:.3s}
.stage:not([data-phase="save"]):not([data-phase="done"]) .saved{opacity:0;transition-delay:0s}

/* svg scene states */
.stage svg g{transform-box:view-box}
#phone{transition:transform .95s cubic-bezier(.2,.8,.2,1),opacity .6s}
.stage[data-phase="start"] #phone{transform:translate(320px,40px) rotate(10deg);opacity:0}
.stage[data-phase="read"] #phone,.stage[data-phase="save"] #phone,.stage[data-phase="done"] #phone{transform:translate(-340px,20px) rotate(-8deg);opacity:0}
#focus{opacity:0;transform:scale(1.22);transform-origin:240px 190px;transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.stage[data-phase="focus"] #focus,.stage[data-phase="shoot"] #focus,.stage[data-phase="scan"] #focus{opacity:1;transform:none}
#flash{opacity:0}
.stage[data-phase="shoot"] #flash{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}
.stage[data-phase="shoot"] #shutter-inner{animation:press .3s}
#shutter-inner{transform-origin:240px 316px}
@keyframes press{50%{transform:scale(.7)}}
#scan{opacity:0}
.stage[data-phase="scan"] #scan{opacity:1;animation:sweep 1.05s cubic-bezier(.45,0,.55,1) both}
@keyframes sweep{from{transform:translateY(40px)}to{transform:translateY(278px)}}
#detect{opacity:0;transition:opacity .4s}
#detect rect,#detect circle{stroke-dasharray:4 4}
.stage[data-phase="scan"] #detect,.stage[data-phase="read"] #detect{opacity:1}
.stage[data-phase="scan"] #detect{transition-delay:.5s}

.steps{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:4px;counter-reset:s}
.steps li{display:grid;grid-template-columns:2.2em 1fr;gap:4px 12px;padding:16px 0;border-top:1px solid var(--line);cursor:pointer;color:var(--muted);transition:color .3s}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:.8rem;padding-top:.2em}
.steps li.is-active,.steps li.is-done{color:var(--ink)}
.steps li.is-active::before{color:var(--accent)}
.steps .txt{font-size:1.06rem}
.steps .prog{grid-column:2;height:2px;background:var(--track-2);border-radius:2px;overflow:hidden;margin-top:8px}
.steps .prog b{display:block;height:100%;width:0;background:var(--accent)}
.steps li.is-done .prog b{width:100%;background:var(--sage)}
.steps li.is-active .prog b{width:100%;transition:width var(--d,2s) linear}
.replay{margin-top:24px;background:none;border:0;padding:0;color:var(--muted);cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.replay:hover{color:var(--ink)}
@media (max-width:860px){.example{grid-template-columns:1fr}.example .copy{order:-1}}

/* transition */
.move{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,6vw,80px);align-items:center}
.flow{display:grid;grid-template-columns:auto minmax(40px,1fr) auto;align-items:center;min-width:0}
.sources{display:grid;gap:10px}
.src{height:44px;display:flex;align-items:center;padding-inline:16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--muted);font-size:.9rem;white-space:nowrap}
.pipes{height:260px;width:100%;display:block}
.pipes path{fill:none;stroke:var(--olive);stroke-width:1.4;stroke-dasharray:3 6;vector-effect:non-scaling-stroke;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-18}}
.target{background:var(--forest);color:var(--on-forest);border-radius:18px;padding:22px 30px;min-width:190px;display:flex;justify-content:center}
.target .name{font-family:var(--display);font-size:1.7rem;line-height:1;display:flex;gap:10px;align-items:center}
.target ul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px;font-size:.9rem}
.target li{display:flex;gap:10px;align-items:center}
.target li::before{content:"✓";font-size:.75rem;opacity:.7}
@media (max-width:860px){.move{grid-template-columns:1fr}}
@media (max-width:560px){.flow{grid-template-columns:1fr;gap:16px}.pipes{display:none}.sources{grid-template-columns:1fr 1fr}.src{justify-content:center;font-size:.82rem;padding-inline:8px}}


/* 5b–c. Eksempel 2 og 3 – samme oppsett som eksempel 1, men med én enkel scene hver.
   Animasjonen legger til klasser (p-wish, p-stock …) på .ex-stage etter hvert; se script.js. */
.example-rev { grid-template-columns: .92fr 1.08fr; }
.ex-stage { padding: 12px 0; }
.ex-stage text { font-family: var(--body); fill: var(--ink); }
.ex-stage .ex-name { font-family: var(--serif); font-size: 19px; }
.ex-stage .ex-body { font-size: 13px; fill: var(--muted); }
.ex-stage .ex-body.dark { fill: var(--ink); font-size: 14px; }
.ex-stage .ex-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; fill: var(--muted); }
.ex-stage .ex-badge { font-size: 12px; fill: var(--muted); }
.ex-stage .ex-badge.light { fill: #F5F2EA; }
.ex-stage .ex-ntitle { font-size: 15px; font-weight: 700; fill: #F5F2EA; }
.ex-stage .ex-nbody { font-size: 12px; fill: rgba(245,242,234,.75); }
.ex-stage svg g { transform-box: view-box; }

/* Eksempel 2: ønske → på lager → ring kunden */
.ex2-watch, .ex2-in, .ex2-call { opacity: 0; transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); }
.ex2-watch { transform: scale(.6); transform-origin: 132px 160px; }
.p-stock .ex2-watch { opacity: 1; transform: none; }
.ex2-out { transition: opacity .4s; }
.p-stock .ex2-out { opacity: 0; }
.p-stock .ex2-in { opacity: 1; }
.ex2-call { transform: translateY(14px); }
.p-call .ex2-call { opacity: 1; transform: none; }
.ex2-ring { transform-origin: 142px 252px; opacity: 0; }
.p-call .ex2-ring { animation: exRing 1.2s ease-out .4s infinite; }
@keyframes exRing { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }

/* Eksempel 3: ferdig → SMS → hentet */
.ex3-ready, .ex3-picked, .ex3-sms { opacity: 0; transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); }
.ex3-work { transition: opacity .4s; }
.p-complete .ex3-work { opacity: 0; }
.p-complete .ex3-ready { opacity: 1; }
.ex3-sms { transform: translateY(14px); }
.p-message .ex3-sms { opacity: 1; transform: none; }
.p-pickup .ex3-ready { opacity: 0; }
.p-pickup .ex3-picked { opacity: 1; }

@media (max-width: 860px) { .example-rev { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ex-stage * { animation: none !important; transition: none !important; } }

/* 7. I gode hender – mørkt felt med myk glød og fine linjer */
.glow-band { position: relative; overflow: hidden; background: var(--footer); color: #F5F2EA; }
.glow-inner { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; padding-top: 104px; padding-bottom: 104px; }
.glow-text h2 { color: #F5F2EA; }
.btn-light { background: #F5F2EA; color: var(--ink); }
.btn-light:hover { background: #fff; color: var(--ink); }
.glow-text .lead { color: rgba(245,242,234,.72); margin-bottom: 28px; }
.glow-art { aspect-ratio: 6 / 5; }
.art { width: 100%; height: 100%; overflow: visible; }
.art-balance .swing { transform-origin: 300px 250px; animation: swing 2.6s ease-in-out infinite alternate; }
.art-balance .breathe { transform-origin: 300px 250px; animation: breathe 2.6s ease-in-out infinite alternate; }
@keyframes swing { from { transform: rotate(-38deg); } to { transform: rotate(38deg); } }
@keyframes breathe { from { transform: rotate(-14deg) scale(.97); } to { transform: rotate(14deg) scale(1.02); } }

/* About-siden – gjenbruker forsidens seksjoner, pluss noen få tillegg */
.hero-text .eyebrow { margin-bottom: 18px; }
.about-team-head { align-items: end; margin-bottom: 40px; }
.tiles-3 { grid-template-columns: repeat(3, 1fr); }
.tile-role { font-family: var(--mono); font-size: .75rem !important; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.about-quote { position: relative; max-width: 860px; padding-top: 120px; padding-bottom: 120px; text-align: center; }
.about-quote blockquote { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.15; color: #F5F2EA; }
.about-quote .lead { color: rgba(245,242,234,.72); max-width: 36em; margin: 28px auto 0; }
.about-portrait { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.nav-links a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }

/* 8. Kontakt */
.contact { padding: 104px 0; }
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.contact-text p { margin: 18px 0 28px; font-size: 1.1rem; }
.contact-img { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.contact-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.numbered { list-style: none; }
.numbered li { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font-size: 1.1rem; color: var(--ink); }
.numbered span { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .85rem; display: grid; place-items: center; }
.form { background: #fff; border-radius: 18px; padding: 32px; box-shadow: 0 20px 60px rgba(28,24,13,.08); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label { display: block; font-size: .85rem; font-weight: 500; color: var(--ink); margin-bottom: 16px; }
input, select, textarea { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; color: var(--ink); background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
.form .btn { margin-top: 4px; }
.form-msg { margin-top: 14px; color: var(--accent); font-weight: 500; }

/* 9. Bunntekst */
.footer { background: var(--footer); color: rgba(255,255,255,.62); padding: 64px 0 32px; font-size: .92rem; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.footer h4 { color: #fff; font-family: var(--mono); font-weight: 500; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; }
.footer-cols a { display: block; padding: 5px 0; }
.footer a:hover { color: #fff; }
.footer-bottom { display: flex; align-items: center; gap: 20px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); }
.logo-light img { height: 26px; }

/* Innfading */
.fade { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.fade.show { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .art * { animation: none !important; }
  .fade { opacity: 1; transform: none; transition: none; }
  .anim-card.show * { animation: none !important; }
  .intake .brackets, .intake .tag, .intake .repair, .intake .thumb { opacity: 1; }
  .bar-fill { transition: none; }
}

/* Mobil */
@media (max-width: 900px) {
  .nav-links, .nav-right { display: none; }
  .burger { display: block; }
  .nav.open .nav-links { display: flex; flex-direction: column; position: absolute; top: 68px; left: 0; right: 0; background: var(--bg); padding: 20px 24px; border-bottom: 1px solid var(--line); }
  .hero { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .hero-text { padding: 56px 24px; }
  .hero-img { height: 360px; }
  .section { padding: 72px 16px; }
  .split, .contact-inner, .hands { grid-template-columns: 1fr; gap: 32px; }
  .tiles-3 { grid-template-columns: 1fr; }
  .glow-inner { grid-template-columns: 1fr; gap: 24px; padding-top: 80px; padding-bottom: 80px; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tile { padding: 18px; }
  .row { grid-template-columns: 1fr; gap: 0; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

/* ===== AI-seksjonen: to funksjoner vist i bruk (repair intake + stocktaking) =====
   Samme formspråk som kortene: beige flate, hvite UI-paneler, rolige overganger.
   Fasene (p-frame, p-scan …) legges på av example() i script.js. Alt måles i cqw, så det skalerer med flaten. */
/* Under hverandre: én rad per funksjon, animasjon og tekst side om side, annenhver rad speilvendt */
.ai-feats { display: grid; gap: 56px; margin-top: 88px; }
.ai-feat { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: center; }
.ai-feat:nth-child(even) { grid-template-columns: 1fr 1.35fr; }
.ai-feat:nth-child(even) .ai-stage { order: 2; }
.ai-feat .ai-stage { margin-bottom: 0; }
.ai-feat h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); }
.ai-feat p { font-size: 1.05rem; }
.ai-feat h3 { font-size: 1.4rem; margin: 4px 0 6px; }
.ai-feat p { margin: 0; color: var(--text); font-size: .95rem; max-width: 34em; }
.ai-feat-stat { display: inline-block; margin-top: 2px; color: var(--muted); }
.ai-stage { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--band); overflow: hidden; margin-bottom: 18px;
  container-type: inline-size; font-family: var(--body); color: #1C180D; }
.ai-stage .corner { position: absolute; width: 7cqw; height: 7cqw; border: .5cqw solid #fff; transition: all .5s cubic-bezier(.2,.8,.2,1); }
.ai-stage .corner.tl { border-right: 0; border-bottom: 0; border-top-left-radius: 1.6cqw; }
.ai-stage .corner.tr { border-left: 0; border-bottom: 0; border-top-right-radius: 1.6cqw; }
.ai-stage .corner.bl { border-right: 0; border-top: 0; border-bottom-left-radius: 1.6cqw; }
.ai-stage .corner.br { border-left: 0; border-top: 0; border-bottom-right-radius: 1.6cqw; }

/* Repair intake: kameraet skanner klokka, kortet fylles ut */
.scan-cam { position: absolute; left: 7%; top: 9%; width: 44%; height: 82%; border-radius: 3.2cqw; overflow: hidden;
  border: .9cqw solid #1C180D; box-shadow: 0 3cqw 5cqw -3cqw rgba(28,24,13,.45); background: #1C180D; }
.scan-cam img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.6s ease; }
.scan-cam .corner.tl { left: 6%; top: 6%; } .scan-cam .corner.tr { right: 6%; top: 6%; }
.scan-cam .corner.bl { left: 6%; bottom: 6%; } .scan-cam .corner.br { right: 6%; bottom: 6%; }
.scan.p-frame .scan-cam .corner.tl { left: 18%; top: 22%; } .scan.p-frame .scan-cam .corner.tr { right: 18%; top: 22%; }
.scan.p-frame .scan-cam .corner.bl { left: 18%; bottom: 22%; } .scan.p-frame .scan-cam .corner.br { right: 18%; bottom: 22%; }
.scan.p-frame .scan-cam img { transform: scale(1.18); }
.scan-line { position: absolute; left: 18%; right: 18%; top: 22%; height: .45cqw; border-radius: 1cqw; opacity: 0;
  background: #fff; box-shadow: 0 0 2.4cqw 1cqw rgba(255,255,255,.55); }
.scan.p-scan .scan-line { opacity: 1; animation: scanSweep 1.7s ease-in-out both; }
.scan.p-found .scan-line { opacity: 0; animation: none; transition: opacity .3s; }
@keyframes scanSweep { 0% { top: 22%; } 50% { top: 78%; } 100% { top: 22%; } }
.scan-tag { position: absolute; left: 50%; bottom: 8%; transform: translate(-50%, 1cqw); opacity: 0; white-space: nowrap;
  background: #fff; color: #1C180D; font-size: 2.3cqw; font-weight: 600; padding: 1cqw 2cqw; border-radius: 3cqw; transition: all .45s ease; }
.scan.p-found .scan-tag { opacity: 1; transform: translate(-50%, 0); }
.scan-card { position: absolute; right: 6%; top: 50%; width: 41%; transform: translate(2cqw, -50%); opacity: 0; transition: all .55s cubic-bezier(.2,.8,.2,1);
  background: #fff; border-radius: 2.6cqw; padding: 3cqw 3cqw 2.6cqw; box-shadow: 0 3cqw 5cqw -3cqw rgba(28,24,13,.35); font-size: 2.2cqw; }
.scan.p-found .scan-card { opacity: 1; transform: translate(0, -50%); }
.scan-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.6cqw; }
.scan-head b { font-family: var(--serif); font-weight: 400; font-size: 3cqw; }
.scan-head span { color: rgba(28,24,13,.5); font-size: 1.9cqw; }
.scan-card dl { margin: 0; }
.scan-card dl div { display: flex; justify-content: space-between; gap: 1.5cqw; padding: 1.15cqw 0; border-top: 1px solid rgba(28,24,13,.08); }
.scan-card dt { color: rgba(28,24,13,.5); }
.scan-card dd { margin: 0; font-weight: 500; min-height: 1.2em; white-space: nowrap; }
.scan-card dd.typing::after { content: ""; display: inline-block; width: .15cqw; height: 1em; margin-left: .2cqw; background: #1C180D; vertical-align: -.15em; }
.scan-saved { display: flex; align-items: center; gap: 1.2cqw; margin-top: 1.6cqw; padding: 1.2cqw 1.6cqw; border-radius: 2cqw; background: #F5F5F5;
  font-size: 1.95cqw; opacity: 0; transform: translateY(1cqw); transition: all .45s ease; }
.scan-saved i { width: 2.8cqw; height: 2.8cqw; border-radius: 50%; background: #1C180D; display: grid; place-items: center; flex: none; }
.scan-saved svg { width: 1.9cqw; height: 1.9cqw; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scan.p-saved .scan-saved { opacity: 1; transform: none; }

/* Goods receipt: følgeseddelen på papir skannes, og hver linje lastes inn i systemet */
.recv-cam { background: #2A251C; }
.doc { position: absolute; inset: 9% 8% 9% 8%; background: #FBFAF7; border-radius: .8cqw; padding: 2.6cqw 2.2cqw; transform: rotate(-2deg) scale(.96);
  box-shadow: 0 2cqw 3cqw -1.5cqw rgba(0,0,0,.6); font-family: var(--mono); font-size: 1.35cqw; color: #2A251C; transition: transform 1s ease; }
.recv.p-frame .doc { transform: rotate(-2deg) scale(1); }
.doc-top { display: flex; flex-direction: column; gap: .4cqw; margin-bottom: 2cqw; }
.doc-top b { font-family: var(--serif); font-weight: 400; font-size: 2.1cqw; }
.doc-top span { color: rgba(42,37,28,.6); }
.doc-line { position: relative; display: grid; grid-template-columns: 1fr auto 1.6cqw; gap: 1cqw; padding: .9cqw .4cqw; border-top: 1px solid rgba(42,37,28,.12); }
.doc-line span:nth-child(2) { color: rgba(42,37,28,.6); }
.doc-line span:last-child { text-align: right; }
.doc-th { color: rgba(42,37,28,.5); text-transform: uppercase; letter-spacing: .05em; font-size: 1.15cqw; }
.doc-line::before { content: ""; position: absolute; inset: 0 -.4cqw; border-radius: .6cqw; background: rgba(255,231,160,0); transition: background .35s ease; z-index: -1; }
.recv.p-l1 .doc-line.l1::before, .recv.p-l2 .doc-line.l2::before, .recv.p-l3 .doc-line.l3::before, .recv.p-l4 .doc-line.l4::before { background: rgba(255,231,160,.85); }
.doc-line { z-index: 0; }
.doc-bar { display: block; height: .7cqw; border-radius: .4cqw; background: rgba(42,37,28,.1); margin-top: 1.6cqw; }
.doc-bar + .doc-bar { margin-top: .9cqw; }
.doc-sign { margin-top: 2.4cqw; color: rgba(42,37,28,.45); }
.recv-cam .corner { border-color: #fff; }
.recv-cam .corner.tl { left: 4%; top: 5%; } .recv-cam .corner.tr { right: 4%; top: 5%; }
.recv-cam .corner.bl { left: 4%; bottom: 5%; } .recv-cam .corner.br { right: 4%; bottom: 5%; }
.recv.p-frame .recv-cam .corner.tl { left: 7%; top: 8%; } .recv.p-frame .recv-cam .corner.tr { right: 7%; top: 8%; }
.recv.p-frame .recv-cam .corner.bl { left: 7%; bottom: 8%; } .recv.p-frame .recv-cam .corner.br { right: 7%; bottom: 8%; }
.recv .scan-line { left: 8%; right: 8%; top: 9%; }
.recv.p-scan .scan-line { opacity: 1; animation: recvSweep 1.6s ease-in-out both; }
@keyframes recvSweep { 0% { top: 9%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 91%; opacity: 0; } }
.recv-card { position: absolute; right: 6%; top: 50%; width: 43%; transform: translateY(-50%); background: #fff; border-radius: 2.6cqw;
  padding: 2.8cqw 2.8cqw 2.4cqw; box-shadow: 0 3cqw 5cqw -3cqw rgba(28,24,13,.35); font-size: 2.1cqw; }
.recv-empty { position: absolute; left: 2.8cqw; right: 2.8cqw; top: 9cqw; text-align: center; color: rgba(28,24,13,.45); font-size: 1.8cqw; transition: opacity .3s ease; }
.recv.p-l1 .recv-empty { opacity: 0; }
.recv-row { display: grid; grid-template-columns: 4.6cqw minmax(0, 1fr) auto; align-items: center; gap: 1.4cqw; padding: 1.1cqw 0; border-top: 1px solid rgba(28,24,13,.08);
  opacity: 0; transform: translateX(-2cqw); transition: opacity .4s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
.recv.p-l1 .r1, .recv.p-l2 .r2, .recv.p-l3 .r3, .recv.p-l4 .r4 { opacity: 1; transform: none; }
.recv-row > img { width: 4.6cqw; height: 4.6cqw; border-radius: 1.2cqw; object-fit: cover; }
.recv-row b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recv-row small { display: block; font-size: 1.6cqw; color: rgba(28,24,13,.5); white-space: nowrap; }
.recv-st { display: inline-flex; align-items: center; gap: .8cqw; font-size: 1.7cqw; font-weight: 600; white-space: nowrap; }
.recv-st i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #1C180D; display: grid; place-items: center; }
.recv-st svg { width: 1.6cqw; height: 1.6cqw; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.recv-done { display: flex; align-items: center; gap: 1.2cqw; margin-top: 1.4cqw; padding: 1.2cqw 1.6cqw; border-radius: 2cqw; background: #F5F5F5;
  font-size: 1.85cqw; opacity: 0; transform: translateY(1cqw); transition: all .45s ease; }
.recv-done i { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #1C180D; display: grid; place-items: center; flex: none; }
.recv-done svg { width: 1.7cqw; height: 1.7cqw; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.recv.p-fin .recv-done { opacity: 1; transform: none; }

@media (max-width: 900px) { .ai-feat, .ai-feat:nth-child(even) { grid-template-columns: 1fr; gap: 18px; } .ai-feat:nth-child(even) .ai-stage { order: 0; } .ai-feats { gap: 48px; } }

/* Illustrerte klokker i AI-animasjonene (i stedet for foto) */
.scan-cam.illus, .scan:not(.recv) .scan-cam { background: radial-gradient(80% 70% at 50% 45%, #F7F6F3, #DEDCD7); }
.cam-watch { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(1.02); transition: transform 1.6s ease; }
.scan.p-frame .cam-watch { transform: scale(1.12); }
.scan .scan-cam .corner { border-color: #1C180D; }
.scan .scan-line { background: #C4B075; box-shadow: 0 0 2.4cqw 1cqw rgba(196,176,117,.55); }
.scan .scan-tag { background: #1C180D; color: #F5F5F5; }
.thumb-watch { width: 4.6cqw; height: 4.6cqw; border-radius: 1.2cqw; background: #F5F5F5; display: block; }


/* Tillegg til prototypens style.css: komponentene som bæres over fra
   dagens site (landvelger, geobanner, FAQ, kontaktside, juridiske sider).
   Fargene følger prototypens palett (krem, ink, hairline). */

[hidden] { display: none !important; }

/* ---------- Landvelger i nav ---------- */
.country { position: relative; }
.country-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 2px; cursor: pointer;
  background: none; border: 0;
  font-family: inherit; font-size: .9rem; font-weight: 500; color: inherit;
}
.country-btn small { font-size: .95em; opacity: .65; }
.country-btn:hover { color: #1C180D; }
.country-btn:hover small { opacity: 1; }
.mobilmeny { display: none; }
@media (max-width: 900px) {
  /* Toppbaren beholder bare globusen ved siden av burgeren;
     innlogging og demo flytter inn i menyen. */
  .nav-right { display: flex !important; margin-left: auto; gap: 0; }
  .nav-right .signin, .nav-right .btn { display: none; }
  .burger { margin-left: 14px; }
  .country-pop { right: -8px; }
  .nav.open .mobilmeny { display: block; }
}
.country-pop {
  display: none; position: absolute; top: calc(100% + 10px); right: 0; width: 230px;
  background: #fff; border: 1px solid rgba(28,24,13,.12); border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(28,24,13,.35); padding: 10px 8px; z-index: 80;
  flex-direction: column; gap: 2px;
}
.country.open .country-pop { display: flex; }
.country-item { padding: 9px 14px; border-radius: 9px; font-size: .92rem; color: #4A463C; text-decoration: none; }
.country-item:hover { background: #F5F3EE; }
.country-item.active { background: #F1E9D2; color: #1C180D; font-weight: 500; }

/* ---------- Geobanner (Apple-stil, over nav) ---------- */
.bnr {
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  min-height: 54px; padding: 8px 48px; position: relative;
  background: #F5F3EE; border-bottom: 1px solid rgba(28,24,13,.1);
  font-size: 13.5px; line-height: 1.35; color: #1C180D;
}
.bnr > span { display: inline-flex; align-items: center; }
.bnr-controls { display: inline-flex; align-items: center; gap: 10px; }
.bnr-select {
  margin: 0;
  height: 36px; padding: 0 34px 0 12px; font-family: inherit; font-size: 13.5px;
  border: 1px solid rgba(28,24,13,.22); border-radius: 999px; background: #fff;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231C180D' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.bnr-go {
  width: 36px; height: 36px; flex: none; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  background: #1C180D; color: #FFE7A0;
}
.bnr-go svg { display: block; }
.bnr-go:hover { background: #332C16; }
.bnr-x {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: none; background: transparent; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  font-size: 19px; line-height: 1; color: #6B6557; border-radius: 50%;
}
.bnr-x:hover { background: rgba(28,24,13,.06); color: #1C180D; }

/* ---------- FAQ ---------- */
.faq-sec h2 { margin-bottom: 18px; }
details.faq { background: #fff; border: 1px solid rgba(28,24,13,.1); border-radius: 14px; margin-top: 10px; overflow: hidden; }
details.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; gap: 18px; padding: 18px 22px; font-size: 15.5px; font-weight: 500;
}
details.faq summary::-webkit-details-marker { display: none; }
.faq-sign { color: #8A6E3A; font-size: 19px; line-height: 1; }
.faq-sign::before { content: "+"; }
details[open] .faq-sign::before { content: "−"; }
details.faq > div { padding: 0 22px 18px; color: #57524A; font-size: 14.5px; line-height: 1.6; max-width: 70ch; }

/* ---------- Kontaktside ---------- */
.contact-page .kicker { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: #8C877D; font-weight: 600; }
.contact-page h1 { margin: 10px 0 0; }
.contact-page .lede { color: #57524A; margin-top: 10px; max-width: 52ch; }
.contact-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 20px; margin-top: 30px; align-items: start; }
.ct2 { background: #fff; border: 1px solid rgba(28,24,13,.1); border-radius: 18px; padding: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct2 .full { grid-column: 1 / -1; }
.ct2 label { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8C877D; font-weight: 600; margin-bottom: 6px; }
.ct2 input, .ct2 textarea {
  width: 100%; font-family: inherit; font-size: 15px; color: #1C180D;
  background: #FAF8F4; border: 1px solid rgba(28,24,13,.12); border-radius: 10px;
  padding: 12px 14px; outline: none;
}
.ct2 textarea { min-height: 120px; resize: vertical; }
.ct2 input:focus, .ct2 textarea:focus { border-color: #C4B075; background: #fff; }
.ct2 .btn { grid-column: 1 / -1; justify-self: start; border: none; cursor: pointer; font-family: inherit; }
.ct2-err { grid-column: 1 / -1; color: #A8462F; font-size: 14px; }
.ct2-takk { background: #fff; border: 1px solid rgba(111,92,42,.3); border-radius: 14px; padding: 20px 24px; color: #63512A; }
.ct2-info { background: #fff; border: 1px solid rgba(28,24,13,.08); border-radius: 18px; padding: 26px; }
.ct2-info > div + div { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(28,24,13,.07); }
.ct2-info b { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8C877D; margin-bottom: 5px; }
.ct2-info a, .ct2-info span { color: #1C180D; font-size: 15px; text-decoration: none; }

/* ---------- Juridiske sider ---------- */
.legal-page { max-width: 760px; }
.legal-page .legal-date { font-size: 12.5px; color: #8C877D; }
.legal-page h1 { margin: 8px 0 0; }
.legal-page .lede { color: #57524A; margin-top: 10px; }
.legal-page h2 { font-size: 21px; margin: 32px 0 0; }
.legal-page p { color: #57524A; margin-top: 12px; font-size: 15px; line-height: 1.65; }

@media (max-width: 860px) {
  .contact-cols, .ct2 { grid-template-columns: 1fr; }
  .bnr { font-size: 12.5px; }
}
@media (max-width: 480px) {
  .ct2 input, .ct2 textarea, .bnr-select { font-size: 16px; }
}

/* About: Simon-bildet i svart-hvitt */
img.bw { filter: grayscale(1) contrast(1.03); }

/* About: modulboksene swipes på telefon, som kortene på forsiden */
@media (max-width: 560px) {
  .tiles:not(.tiles-3) {
    display: flex; gap: 14px; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    margin-inline: -24px; padding-inline: 24px 16px;
    scrollbar-width: none;
  }
  .tiles:not(.tiles-3)::-webkit-scrollbar { display: none; }
  .tiles:not(.tiles-3) .tile { flex: 0 0 64%; scroll-snap-align: start; }
}

/* About: teamkortene stables i full bredde på telefon (2-kolonners
   mobilregel i prototypen gjorde dem smale og dratt ut i høyden) */
@media (max-width: 560px) {
  .tiles.tiles-3 { display: grid; grid-template-columns: 1fr; gap: 12px; }
}

/* Mobil-toppbar: globusen grupperes med burgeren, samme senterlinje */
@media (max-width: 900px) {
  .nav-inner { gap: 16px; }
  .burger { margin-left: 0; display: grid; place-items: center; padding: 4px 0 4px 2px; }
  .country-btn { padding: 4px 6px; }
}

/* Footer-bunnen: logoen beholder proporsjonene (flex klemte den), og
   copyright-linjen holder seg på én linje */
.footer-bottom .logo { flex: none; }
.footer-bottom .logo img { height: 22px; width: auto; }
.footer-bottom span { white-space: nowrap; }

/* Nedtrekkene i nav: felles kortstil (samme som språkvelgeren) */
.nav-drop { position: relative; }
.nav-drop-pop {
  display: none; position: absolute; top: 100%; left: -14px; padding-top: 10px;
  min-width: 190px; z-index: 70;
}
.nav-card {
  display: flex; flex-direction: column; gap: 2px;
  background: #fff; border: 1px solid rgba(28,24,13,.12); border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(28,24,13,.35); padding: 10px 8px;
}
.nav-card > a { padding: 9px 14px; border-radius: 9px; font-size: .92rem; color: #4A463C; }
.nav-card > a:hover { background: #F5F3EE; color: #1C180D; }
.nav-card > a.nav-strong { font-weight: 600; color: #1C180D; }
.nav-card-head {
  display: block; font-weight: 600; font-size: .92rem; color: #1C180D;
  padding: 9px 14px 7px; margin-bottom: 2px; white-space: nowrap;
}
.nav-drop:hover .nav-drop-pop, .nav-drop.open .nav-drop-pop, .nav-drop:focus-within .nav-drop-pop { display: block; }
@media (max-width: 900px) {
  /* I burgermenyen vises nedtrekksradene som vanlige menyrader.
     Selektorene med hover/open/focus-within må gjentas her, ellers vinner
     display:block-regelen når en lenke får fokus under trykket (iOS), og
     raden hopper ut av menyen før klikket fullfører. */
  .nav-drop, .nav-drop-pop, .nav-card,
  .nav-drop:hover .nav-drop-pop, .nav-drop.open .nav-drop-pop,
  .nav-drop:focus-within .nav-drop-pop { display: contents; }
  /* Gruppert hierarki: nedtrekksknappene blir rene overskrifter,
     radene under rykkes inn. Produkt-gruppen bruker kortoverskriften
     (Cadran Retail POS) som overskrift, så knappen skjules der. */
  .nav-drop-btn { display: block; font-weight: 600; color: #1C180D; pointer-events: none; }
  .nav-drop-btn small { display: none; }
  .nav-drop:has(.nav-card-head) .nav-drop-btn { display: none; }
  .nav-card > a { background: none; border: 0; box-shadow: none; padding: 0 0 0 18px; border-radius: 0; font-size: inherit; color: inherit; }
  .nav-card-head { padding: 0; margin-bottom: 0; font-size: inherit; }
  .nav-card > a.nav-strong { font-weight: inherit; color: inherit; }
}

/* Contact-nedtrekket: to rader med tittel og undertekst */
.nav-pop-rich { min-width: 260px; }
.nav-pop-rich strong { display: block; font-weight: 600; font-size: .92rem; color: #1C180D; }
.nav-pop-rich span { display: block; font-size: .8rem; color: #6B6557; margin-top: 2px; }
.nav-pop-rich .nav-card > a { padding: 10px 14px; }
@media (max-width: 900px) {
  /* I burgermenyen er Salg/Få support vanlige rader under Kontakt-overskriften */
  .nav-pop-rich .nav-card > a { padding: 0 0 0 18px; }
  .nav-pop-rich strong { font-weight: 400; font-size: inherit; color: inherit; }
  .nav-pop-rich span { display: none; }
}
@media (max-width: 900px) {
  .nav-pop-rich span { display: none; } /* burgermenyen holder seg til titlene */
}

/* Integrations-siden */
.integr .kicker { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: #8C877D; font-weight: 600; }
.integr h1 { margin: 10px 0 0; }
.integr .lead { color: #57524A; margin-top: 10px; max-width: 52ch; }
.integr-tiles { margin-top: 30px; }
.tile .integr-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; margin: 14px 0 12px; min-height: 44px; }
.tile .integr-logos .merke { display: inline-flex; align-items: center; gap: 8px; }
.tile .integr-logos img { height: 26px; width: auto; display: block; }
.tile .integr-logos b { font-weight: 600; font-size: 21px; letter-spacing: -0.01em; color: #1C180D; }
.tile .integr-logos i { font-style: normal; font-size: 11px; font-weight: 700; color: #8C877D; text-transform: uppercase; letter-spacing: .06em; }
.tile .integr-logos img[src*="klarna"] { height: 20px; }
.tile .integr-logos img[src*="verifone"] { height: 24px; }
.tile .integr-logos img[src*="dhl"] { height: 19px; }
.tile .integr-logos img[src*="posten"] { height: 24px; }
.tile .integr-logos img[src*="bring"] { height: 30px; }
.tile .integr-logos img[src*="fiken"] { height: 30px; }
.tile .integr-logos img[src*="1881"] { height: 44px; }
.tile .integr-logos img[src*="tripletex"] { height: 28px; }
.tile .integr-logos img[src*="vipps"] { height: 24px; }
.tile .integr-logos img[src*="woocommerce"] { height: 28px; }
.tile .integr-logos img[src*="poweroffice"] { height: 28px; }
.integr-note { margin-top: 26px; color: #57524A; }
.integr-note a { font-weight: 600; color: #1C180D; text-decoration: underline; text-underline-offset: 4px; }

/* Integrasjonskortenes kategorititler er overskrifter, ikke bare fet skrift.
   Google og AI-assistenter trenger strukturen for å finne hvilken kategori
   et partnernavn hører til. Stilen er den samme som .tile strong hadde. */
.integr-tiles .tile h2 {
  font-family: var(--serif); font-weight: 400; font-size: 1.5rem;
  color: var(--ink); margin: 0; line-height: inherit; letter-spacing: inherit;
}

/* Oppstartsseksjonen: tre steg fra første samtale til full drift.
   Gullsirkelen er den samme som .ai-steps bruker, serif-tittel som ellers
   i kortene, og samme 900px-brekkpunkt som .tiles-3. */
#oppstart { position: relative; overflow: hidden; }
/* Ambient gullglød bak kortene, så glasset har noe å bryte */
#oppstart::before, #oppstart::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(70px); pointer-events: none;
}
#oppstart::before {
  width: 460px; height: 340px; left: 4%; top: 34%;
  background: radial-gradient(closest-side, rgba(196,176,117,.38), transparent 72%);
}
#oppstart::after {
  width: 460px; height: 340px; right: 2%; top: 48%;
  background: radial-gradient(closest-side, rgba(196,176,117,.3), transparent 72%);
}
.start-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  position: relative; z-index: 1;
}
.start-steps li {
  display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.46));
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(28,24,13,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 30px 60px -42px rgba(28,24,13,.4);
  border-radius: 20px; padding: 26px 26px 30px;
  transition: opacity .6s ease, transform .26s cubic-bezier(.22,.61,.36,1), box-shadow .26s ease;
}
.start-steps li:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 36px 70px -42px rgba(28,24,13,.5);
}
.start-nr {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(196,176,117,.85); color: #8C6A1F;
  background: linear-gradient(180deg, rgba(196,176,117,.26), rgba(196,176,117,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  display: grid; place-items: center; font-size: .9rem; margin-bottom: 8px;
}
.start-steps h3 {
  font-family: var(--serif); font-weight: 400; font-size: 1.5rem;
  color: var(--ink); margin: 0; line-height: 1.15;
}
.start-steps p { font-size: .95rem; color: var(--muted); margin: 0; }

@media (max-width: 900px) {
  .start-steps { grid-template-columns: 1fr; gap: 18px; }
  #oppstart::before { left: -20%; top: 10%; }
  #oppstart::after { right: -20%; top: 55%; }
}
/* Telefon: stegene sveipes bortover, som kortgalleriet i «Alt du trenger» */
@media (max-width: 560px) {
  .start-steps {
    display: flex; gap: 14px; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    margin-inline: -16px; padding: 4px 16px 18px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .start-steps::-webkit-scrollbar { display: none; }
  .start-steps li { flex: 0 0 78%; scroll-snap-align: start; }
}