/* reviews.no – nettsiden. Samme uttrykk som appen: Geist, blekk, grå flate med hvite kort og hårstreker.
   Verdiene er kopiert fra appens tokens (public/reviews.css); nettsiden deler ingen filer med appen. */
@font-face{font-family:Geist;src:url(/fonts/Geist-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --ink:#16181d;--text:#3d4049;--muted:#6b6f78;--page:#f3f3f2;--card:#fff;
  --line:rgba(16,24,40,.22);--line-in:rgba(16,24,40,.13);
  --star:#f9ab00;--green:#1e8e3e;--red:#d93025;--blue:#1a73e8;--link:#1967d2;
  --tile-n:#e8eaed;--tile-n-ink:#60646c;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.04);
  --shadow-lift:0 1px 2px rgba(16,24,40,.05),0 8px 28px rgba(16,24,40,.08);
  --gutter:40px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font-family:Geist,Arial,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
img,svg{display:block;max-width:100%}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
[id]{scroll-margin-top:24px}
.skip{position:absolute;left:-9999px;top:8px;padding:10px 14px;background:var(--ink);color:#fff;border-radius:8px;z-index:10}
.skip:focus{left:8px}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
.nowrap{white-space:nowrap}

/* Topp */
.site-header{height:72px;display:flex;align-items:center;gap:40px}
.brand{display:flex;align-items:center;gap:8px;min-height:44px;font-size:17px;font-weight:650;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.brand svg{width:20px;height:20px;fill:var(--star)}
.site-nav{flex:1;display:flex;align-items:center;gap:28px}
.site-nav a{font-size:15px;color:var(--text);text-decoration:none;white-space:nowrap;padding:10px 0}
.site-nav a:hover,.site-nav a[aria-current]{color:var(--ink)}
.site-nav a[aria-current]{font-weight:600}
.header-actions{display:flex;align-items:center;gap:20px}
.login{font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap;padding:10px 0}
.menu{display:none;position:relative}
.menu summary{width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;list-style:none;border-radius:8px}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:22px;height:22px}
.menu-panel{position:absolute;right:0;top:50px;z-index:5;width:min(280px,calc(100vw - 32px));background:var(--card);border:.5px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lift);overflow:hidden;display:flex;flex-direction:column}
.menu-panel a{min-height:52px;padding:0 20px;display:flex;align-items:center;font-size:16px;text-decoration:none;border-top:.5px solid var(--line-in)}
.menu-panel a:first-child{border-top:0}

/* Knapper */
.btn{height:40px;padding:0 16px;border-radius:8px;border:.5px solid var(--line);background:var(--card);color:var(--ink);font-size:14px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;text-decoration:none;cursor:pointer;box-shadow:0 1px 1px rgba(16,24,40,.04)}
.btn:hover{border-color:rgba(16,24,40,.4)}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{border:0;background:var(--ink);color:#fff;box-shadow:0 1px 2px rgba(16,24,40,.18),inset 0 1px 0 rgba(255,255,255,.08)}
.btn-primary:hover{background:#2a2d35}
.btn-lg{height:52px;padding:0 22px;border-radius:10px;font-size:16px;font-weight:550;gap:10px}
.btn-primary.btn-lg{box-shadow:0 1px 2px rgba(16,24,40,.18),0 4px 12px rgba(16,24,40,.12),inset 0 1px 0 rgba(255,255,255,.08)}
.btn-light{border:0;background:#fff;color:var(--ink);box-shadow:none}
.btn-light:hover{background:#e9e9e7}
.btn-ghost{border:.5px solid rgba(255,255,255,.4);background:transparent;color:#fff;box-shadow:none}
.btn-ghost:hover{border-color:#fff}
.link{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:15px;font-weight:550;text-decoration:none;white-space:nowrap}
.link svg{width:16px;height:16px}
.link{color:var(--link)}
.link:hover{color:#174ea6}

/* Overskrifter og tekst */
.eyebrow{display:flex;align-items:center;gap:8px;font-size:14px;line-height:20px;font-weight:500;color:var(--text);white-space:nowrap}
.eyebrow svg{width:16px;height:16px;flex:none}
.h-hero{font-size:clamp(38px,4.6vw,56px);line-height:1.075;font-weight:650;letter-spacing:-.035em}
.h-hero{text-wrap:balance}
.h-hero .nowrap{display:inline-block}
.h-page{font-size:clamp(34px,4vw,48px);line-height:1.125;font-weight:650;letter-spacing:-.03em;text-wrap:balance;overflow-wrap:break-word}
.h-sec{font-size:clamp(28px,3vw,36px);line-height:1.17;font-weight:650;letter-spacing:-.025em;text-wrap:balance}
.lead{max-width:500px;font-size:clamp(17px,1.6vw,19px);line-height:1.58;color:var(--text)}
.sub{font-size:clamp(16px,1.5vw,18px);line-height:1.56;color:var(--text)}
.meta{font-size:13px;line-height:18px;color:var(--muted);white-space:nowrap}
.terms{font-size:14px;line-height:20px;color:var(--text);white-space:nowrap}

/* Seksjoner */
.hero{padding-top:64px;padding-bottom:88px;display:flex;flex-wrap:wrap;align-items:center;gap:56px}
.hero-copy{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:24px}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding-top:8px}
.hero-visual{flex:0 1 520px;min-width:0}
/* Toppen av forsiden fyller første skjerm når tekst og kort står side om side, så neste del ikke konkurrerer om blikket (Jan 13.11). */
@media(min-width:1100px){.hero-home{min-height:min(calc(100svh - 72px),1100px);padding-top:40px;padding-bottom:72px}}
.hero-home .hero-visual{flex-basis:400px}
.hero-card .proof-map{padding:24px}
.hero-card .proof-claim{display:flex;flex-direction:column;gap:2px}
.hero-card .proof-claim b{font-size:17px;line-height:24px;font-weight:650}
.hero-card .proof-claim span{font-size:14px;line-height:20px;font-weight:400;color:var(--text)}
@media(min-width:641px){
  .hero-card .map{padding:12px}
  .hero-card .grid25{grid-template-columns:repeat(5,56px);gap:10px;font-size:17px;line-height:56px}
  .hero-card .grid25 i{height:56px}
}
.hero-sub{padding-top:56px}
.hero-sub .hero-copy{gap:22px}
.hero-sub .hero-visual{flex-basis:460px}
.section{padding-bottom:96px}
.section-head{display:flex;flex-direction:column;gap:10px;max-width:640px;margin-bottom:32px}
.split{display:flex;flex-wrap:wrap;align-items:flex-start;gap:32px 56px}
.split-center{align-items:center}
.split-head{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:10px}
.split-head .link{align-self:flex-start;margin-top:2px}
.split-body{flex:2 1 520px;min-width:0;display:flex;flex-direction:column;gap:20px}
.page-head{padding-top:56px;padding-bottom:40px;display:flex;flex-direction:column;gap:14px}
.page-head .lead{max-width:600px}
.page-head .hero-cta{padding-top:14px;padding-bottom:120px}

/* Kort */
.card{background:var(--card);border:.5px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.card-lift{border-radius:16px;box-shadow:var(--shadow-lift)}
.card-head{min-height:56px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:.5px solid var(--line-in)}
.card-head b{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;white-space:nowrap}
.card-head b svg{width:18px;height:18px;color:var(--muted)}
.rows>*{min-height:52px;padding:0 24px;display:flex;align-items:center;gap:12px;border-top:.5px solid var(--line-in)}
.rows>*:first-child{border-top:0}
.rows .grow{flex:1;min-width:0}
.row-label{font-size:15px;color:var(--text);white-space:nowrap}
.row-value{margin-left:auto;font-size:15px;font-weight:600;white-space:nowrap}
.dot{width:8px;height:8px;flex:none;border-radius:50%;background:#8b8d98}
.dot.g{background:var(--green)}.dot.y{background:var(--star)}.dot.r{background:var(--red)}
.status{display:flex;align-items:center;gap:6px;font-size:13px;line-height:18px;color:var(--text);white-space:nowrap}
.tile{width:36px;height:36px;flex:none;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--tile-n);color:var(--tile-n-ink);font-size:15px;font-weight:600}
.tile svg{width:18px;height:18px}
/* Jan 12.11: «de pastellfargene MÅ bort», «Google farger skal gå igjen», og om fylte fliser: «selve ikonet bør ha farger … ble for mye».
   Om fagikonene: «her holder det med ikonet har farge og en annen dus bakgrunn». Ikonet bærer fargen på en nøytral, lys grå flis.
   Bare tall står på fylt flis, i Googles rekkefølge: blå, rød, gul, grønn. */
.tile.g,.tile.y,.tile.b,.tile.r{background:var(--tile-n)}
.tile.g svg,.tile.y svg,.tile.b svg,.tile.r svg{width:20px;height:20px;stroke-width:2}
.tile.g{color:var(--green)}.tile.y{color:var(--star)}.tile.b{color:var(--blue)}.tile.r{color:var(--red)}.tile.k{background:var(--ink);color:#fff}
.tile.num{box-shadow:none;color:#fff}
.tile.num.b{background:var(--blue)}.tile.num.r{background:var(--red)}.tile.num.y{background:var(--star);color:var(--ink)}.tile.num.g{background:var(--green)}
.chip{height:32px;padding:0 12px;border-radius:8px;border:.5px solid var(--line);font-size:13px;font-weight:500;display:inline-flex;align-items:center;white-space:nowrap}
.chip-ink{height:36px;padding:0 14px;border:0;background:var(--ink);color:#fff;font-size:14px}

/* Beviset: kartrutenettet */
.proof-body{display:flex;flex-wrap:wrap;align-items:stretch}
.proof-map{flex:0 0 auto;margin:0 auto;padding:20px;display:flex;flex-direction:column;align-items:center;gap:14px}
.map{position:relative;display:block;padding:10px;border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 .5px var(--line)}
.map-art{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.map .grid25{position:relative}
/* Kartpunktene: en mindre kjerne i full farge med en lysere ring rundt, så kartet bak synes (Jan 13.11: «den harde fargen er litt mindre»). */
.map .grid25 i{background:radial-gradient(circle closest-side,var(--red) 0 60%,rgba(217,48,37,.3) 62% 100%)}
.map .grid25 .g{background:radial-gradient(circle closest-side,var(--green) 0 60%,rgba(30,142,62,.3) 62% 100%)}
.map .grid25 .y{background:radial-gradient(circle closest-side,var(--star) 0 60%,rgba(249,171,0,.36) 62% 100%)}
.grid25{display:grid;grid-template-columns:repeat(5,40px);gap:8px;font-size:14px;line-height:40px;font-weight:600;text-align:center}
.grid25 i{font-style:normal;height:40px;border-radius:50%;background:var(--red);color:#fff}
.grid25 .g{background:var(--green)}.grid25 .y{background:var(--star);color:var(--ink)}
.grid25 .here{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.map .grid25 .here{box-shadow:0 0 0 2px var(--ink)}
.legend{display:flex;align-items:center;gap:14px}
.proof-side{flex:1 1 220px;min-width:0;border-left:.5px solid var(--line-in);display:flex;flex-direction:column}
.proof-side>div{flex:1;padding:20px 24px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.proof-side>div+div{border-top:.5px solid var(--line-in);gap:8px}
.proof-claim{padding:16px 24px;border-top:.5px solid var(--line-in);font-size:15px;line-height:22px;font-weight:600;text-wrap:balance}
.big{font-size:30px;line-height:36px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.between{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:15px;line-height:20px;white-space:nowrap}
.between b{font-weight:600}.between strong{font-weight:700}
.bar{display:flex;gap:3px}
.bar i{flex:1;height:8px;border-radius:2px;background:#eceae4}
.bar .y{background:var(--star)}.bar .g{background:var(--green)}

/* Tre kort: slik går appen av seg selv */
/* Bransjer: kort per fag med ikon, og fagets eget spørsmål som en SMS-boble. */
.trade-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.trade-card{height:100%;padding:18px;display:flex;flex-direction:column;gap:14px;text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s}
.trade-card:hover{transform:translateY(-2px);border-color:var(--ink);box-shadow:var(--shadow-lift)}
.trade-head{display:flex;align-items:center;gap:12px;min-width:0}
.trade-icon{width:38px;height:38px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--star);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
/* Fagikonene veksler mellom Google-fargene. Fargen sitter i ikonet. */
.trade-icon{background:var(--tile-n);box-shadow:none}
.trade-grid>*:nth-child(4n+1) .trade-icon{color:var(--blue)}.trade-grid>*:nth-child(4n+2) .trade-icon{color:var(--red)}.trade-grid>*:nth-child(4n+3) .trade-icon{color:var(--star)}.trade-grid>*:nth-child(4n) .trade-icon{color:var(--green)}
.trade-icon svg{width:21px;height:21px}
.trade-head b{min-width:0;font-size:16px;line-height:22px;font-weight:650;letter-spacing:-.01em}
.trade-quote{align-self:flex-start;max-width:100%;padding:9px 12px;border-radius:14px 14px 14px 4px;background:var(--page);font-size:14px;line-height:20px;color:var(--ink);text-wrap:pretty}
.hero-trade{padding-top:8px}
.crumbs.wrap{padding-top:24px}
.trade-question>div{min-height:56px}
.trade-question b{font-size:18px;line-height:26px;font-weight:600}
.trade-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.trade-links a{min-height:44px;padding:0 14px;display:inline-flex;align-items:center;border:.5px solid var(--line);border-radius:999px;background:var(--card);font-size:14px;text-decoration:none;white-space:nowrap}
.trade-links a:hover{border-color:var(--ink)}
/* Problemet på forsiden: tre grunner til venstre, et Google-søk til høyre. */
.problem{display:flex;flex-wrap:wrap;align-items:center;gap:40px 56px}
.problem-copy{flex:1 1 400px;min-width:0;display:flex;flex-direction:column;gap:10px}
.problem-visual{flex:0 1 480px;min-width:0}
.reasons{display:flex;flex-direction:column;gap:20px;margin-top:22px}
.reasons li{display:flex;align-items:flex-start;gap:14px}
.reasons li>span:last-child{display:flex;flex-direction:column;gap:4px;min-width:0}
.reasons b{font-size:17px;line-height:24px;font-weight:650}
.reasons li>span:last-child>span{font-size:15px;line-height:24px;color:var(--text)}
.reasons a{color:var(--link);text-underline-offset:3px;white-space:nowrap}
.serp-list>li{min-height:56px;padding:8px 20px;display:flex;align-items:center;gap:14px;border-top:.5px solid var(--line-in)}
.serp-list>li:first-child{border-top:0}
.serp-rank{width:28px;height:28px;flex:none;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;font-size:13px;font-weight:650}
.serp-name{flex:1;min-width:0;display:flex;flex-direction:column}
.serp-name b{font-size:15px;line-height:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.serp-score{display:flex;align-items:center;gap:4px;font-size:15px;line-height:20px;font-weight:600;white-space:nowrap}
.serp-score svg{width:15px;height:15px;fill:var(--star)}
.serp-list>li.own{box-shadow:inset 3px 0 0 var(--red)}
.serp-list>li.own .serp-rank{background:var(--red)}
@media (max-width:360px){.serp-list>li{padding:8px 14px;gap:10px}.serp-name b{white-space:normal;overflow:visible}}
.features{display:flex;flex-wrap:wrap;align-items:stretch;gap:20px}
.feature{flex:1 1 320px;min-width:0;display:flex;flex-direction:column}
.feature-copy{padding:24px 24px 20px;display:flex;flex-direction:column;gap:10px}
.feature-copy h3{font-size:20px;line-height:26px;font-weight:650;letter-spacing:-.01em;padding-top:6px}
.feature-copy p{font-size:15px;line-height:24px;color:var(--text)}
.feature-demo{flex:1;border-top:.5px solid var(--line-in);display:flex;flex-direction:column;justify-content:center}
.feature-demo.pad{padding:20px 24px 24px;gap:12px}
.feature-demo.rows>*{flex:1;min-height:48px;font-size:14px;line-height:20px}
.feature-demo.rows b{font-weight:600}
.feature-demo.pad>.chip{align-self:flex-start}
.bubbles{display:flex;flex-direction:column;gap:8px}
.bubble{max-width:86%;padding:10px 14px;font-size:14px;line-height:20px;border-radius:14px 14px 14px 4px;background:var(--page);align-self:flex-start}
.bubble.out{align-self:flex-end;border-radius:14px 14px 4px 14px;background:var(--ink);color:#fff}
.bubbles .meta{align-self:center}
.bubbles-lg .bubble{font-size:15px;line-height:22px;max-width:84%}
.review-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;line-height:20px;white-space:nowrap}
.review-top .who{display:flex;align-items:baseline;gap:10px;min-width:0}
.review-top b{font-weight:600}
.stars{display:flex;gap:2px}
.stars svg{width:16px;height:16px;fill:var(--star)}
.quote{font-size:14px;line-height:20px;color:var(--text)}
.draft{padding:10px 12px;border:.5px solid var(--line);border-radius:8px;font-size:14px;line-height:20px}
.demo-actions{display:flex;flex-wrap:wrap;gap:8px}
.demo-label{font-size:13px;line-height:18px;font-weight:600;color:var(--muted)}

/* Integrasjoner på forsiden */
.int-strip{margin-top:20px;min-height:76px;padding:14px 16px 14px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;text-decoration:none}
.int-strip:hover{border-color:rgba(16,24,40,.4)}
.int-copy{flex:1 1 300px;min-width:0}
.int-copy b{display:block;font-size:16px;line-height:24px;font-weight:600}
.int-copy span{display:block;font-size:14px;line-height:20px;color:var(--text)}
.int-logos{display:flex;flex-wrap:wrap;gap:8px}
.int-logos img{width:36px;height:36px;padding:6px;border:.5px solid var(--line);border-radius:9px;background:#fff;object-fit:contain}
.int-strip>svg{width:20px;height:20px;flex:none;color:var(--muted)}
.steps a{text-underline-offset:3px}

/* Annonser mot anmeldelser */
.ads-band{background:var(--ink);color:#fff;margin-bottom:96px}
.ads-band :focus-visible{outline-color:#fff}
.ads-band>.wrap{padding-top:88px;padding-bottom:72px;display:flex;flex-direction:column;gap:40px}
.ads-top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:40px 72px}
.ads-copy{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:14px}
.ads-band .eyebrow{color:#c9ccd3}
.ads-band .sub,.ads-band .fine{color:#c9ccd3}
.slider{display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:22px}
.ads-copy .slider{margin-top:14px;max-width:440px}
.slider-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.slider-top b{font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.slider input{width:100%;height:28px;margin:0;accent-color:var(--ink);cursor:pointer}
.ads-band .slider input{accent-color:#fff}
.bars{flex:1 1 360px;min-width:0;display:flex;align-items:flex-end;justify-content:center;gap:56px}
.bar-col{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.bar-value{font-size:30px;line-height:36px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.bar-unit,.bar-label{font-size:13px;line-height:18px;color:#c9ccd3;white-space:nowrap}
.ads-after{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 40px}
.ads-after b{font-size:17px;line-height:24px;font-weight:600}
.ads-after p{margin-top:4px;font-size:15px;line-height:24px;color:#c9ccd3}
.ads-copy .fine{margin-top:-4px}
.bar-track{height:200px;width:96px;margin-top:8px;display:flex;align-items:flex-end}
.bar{display:block;width:100%;border-radius:10px 10px 0 0;background:#4a4d57}
.bar-ads{height:100%}
.bar-own{height:49.9%;min-height:6px;background:var(--star)}
/* Streken i kartkortet på forsiden deler klassenavn med søylene over og må holde på sin egen form. */
.proof-side .bar{display:flex;width:auto;border-radius:0;background:none}
.bar-col.own .bar-value,.bar-col.own .bar-label{color:var(--star)}
.bar-label{margin-top:8px;font-weight:600}
.trend{padding:20px 24px 16px;border:.5px solid rgba(255,255,255,.18);border-radius:12px;background:#1e2128}
.trend figcaption{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-bottom:8px;font-size:15px;line-height:22px}
.trend figcaption span{font-size:13px;line-height:18px;color:#a9adb6;white-space:nowrap}
.trend svg{width:100%;height:auto}
.fine{font-size:15px;line-height:24px}

/* Kalkulatoren */
.calc{padding:32px}
.calc-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 40px}
.select{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:15px;line-height:22px}
.select select{flex:1 1 260px;min-width:0;max-width:420px;height:44px;padding:0 12px;border:.5px solid var(--line);border-radius:8px;background:#fff;font:inherit;color:inherit}
.calc-tiles{margin-top:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:.5px solid var(--line);border-radius:12px;overflow:hidden}
.calc-tiles>div{padding:20px 16px;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;border-left:.5px solid var(--line-in)}
.calc-tiles>div:first-child{border-left:0}
.calc-tiles b{font-size:30px;line-height:36px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.calc-tiles span{font-size:14px;line-height:20px;color:var(--text);white-space:nowrap}
.calc-tiles small{font-size:13px;line-height:18px;color:var(--muted);white-space:nowrap}
.good{color:var(--green)}
.calc-years{margin-top:28px;display:flex;flex-direction:column;gap:16px}
.year{display:flex;flex-direction:column;gap:8px}
.year .between{flex-wrap:wrap;white-space:normal;font-size:14px;color:var(--text)}
.year .between>*{white-space:nowrap}
.year .between b{font-size:15px;font-weight:700}
.year-track{height:12px;border-radius:6px;background:#eceae4;display:block;overflow:hidden}
.year-fill{display:block;height:100%;border-radius:6px}
.year-fill.full{width:100%;background:var(--green)}
.year-fill.cost{width:58.233%;min-width:8px;background:#8b8d98}
.calc-line{margin-top:28px;text-align:center;font-size:17px;line-height:26px;color:var(--text)}
.calc-line b{color:var(--ink);white-space:nowrap}
.calc-ask{margin-top:28px;padding:28px;border-radius:12px;background:var(--ink);color:#fff;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.calc-ask :focus-visible{outline-color:#fff}
.calc-ask p{max-width:640px;font-size:18px;line-height:28px;text-wrap:balance}
.calc-ask p b{color:var(--star)}
.calc-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.calc-section .note{margin-top:16px}

/* Kunnskap og artikler */
.guides{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:20px}
.guide-card{display:flex;flex-direction:column;text-decoration:none}
.guide-thumb{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--ink)}
.guide-text{flex:1;padding:20px 24px 24px;display:flex;flex-direction:column;gap:10px}
.guide-card:hover{border-color:rgba(16,24,40,.4)}
.guide-card h3{font-size:20px;line-height:26px;font-weight:650;letter-spacing:-.01em;text-wrap:balance}
.guide-card p{flex:1;font-size:15px;line-height:24px;color:var(--text)}
.guide-more{display:flex;align-items:center;gap:6px;min-height:28px;font-size:15px;font-weight:550;white-space:nowrap}
.guide-more svg{width:16px;height:16px}
.guide-more .meta{margin-left:auto;font-weight:400}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;line-height:18px;color:var(--muted)}
.crumbs li{display:flex;align-items:center;gap:6px;min-height:44px}
.crumbs li+li::before{content:"/"}
.crumbs a{text-decoration:none;display:flex;align-items:center;min-height:44px;white-space:nowrap}
.crumbs a:hover{color:var(--ink)}
.article{padding-top:24px;padding-bottom:96px}
.article-head{padding:16px 0 32px;display:flex;flex-direction:column;gap:14px;max-width:760px}
.article-featured{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin-bottom:40px;border-radius:16px;background:var(--ink);box-shadow:var(--shadow-lift)}
.article-head .lead{max-width:640px}
.article-layout{display:flex;flex-wrap:wrap;align-items:flex-start;gap:32px 56px}
.article-body{flex:2 1 560px;min-width:0;max-width:none}
.article-aside{flex:1 1 260px;min-width:0;position:sticky;top:24px;display:flex;flex-direction:column;gap:20px}
.toc,.aside-cta{padding:20px 24px;display:flex;flex-direction:column;gap:8px}
.toc b,.aside-cta b{font-size:16px;line-height:24px;font-weight:600}
.toc ol{display:flex;flex-direction:column}
.toc a{display:flex;align-items:center;min-height:36px;padding:4px 0;font-size:14px;line-height:20px;color:var(--text);text-decoration:none}
.toc a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.aside-cta .btn{margin-top:8px;height:44px}
.prose h3{margin-top:24px;font-size:18px;line-height:26px;font-weight:650;letter-spacing:-.01em}
.prose h2+h3{margin-top:12px}
.prose code{font-size:.92em;padding:1px 5px;border-radius:5px;background:var(--page)}
/* Lister, sitater, bilder og figurer i artikler */
.prose ul{padding-left:0;list-style:none}
.prose ul>li{position:relative;padding-left:22px}
.prose ul>li::before{content:"";position:absolute;left:4px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.prose ol{margin-top:12px;padding-left:0;list-style:none;counter-reset:item;display:flex;flex-direction:column;gap:8px}
.prose ol>li{counter-increment:item;position:relative;margin-top:0;padding-left:40px;min-height:28px}
.prose ol>li::before{content:counter(item);position:absolute;left:0;top:-1px;width:28px;height:28px;border-radius:8px;background:var(--ink);color:#fff;font-size:14px;line-height:28px;font-weight:600;text-align:center}
.prose blockquote{margin:24px 0 0;padding:4px 0 4px 44px;position:relative}
.prose blockquote::before{content:"";position:absolute;left:0;top:6px;width:28px;height:28px;border-radius:8px;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f9ab00'%3E%3Cpath d='M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z'/%3E%3C/svg%3E") center/16px no-repeat}
.prose blockquote p{margin-top:0;font-size:20px;line-height:30px;font-weight:550;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.prose blockquote footer{margin-top:6px;font-size:14px;line-height:20px;color:var(--muted)}
.article-figure{margin:24px 0 0;container-type:inline-size}
.article-figure figcaption{margin-top:10px;font-size:14px;line-height:22px;color:var(--muted)}
.article-figure.photo img{width:100%;height:auto;border-radius:12px}
.fig{border:.5px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);color:var(--ink);font-size:15px;line-height:22px}
.fig p{margin:0}
.fig-head{min-height:48px;padding:10px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 12px;border-bottom:.5px solid var(--line-in)}
.fig-head b{display:flex;align-items:center;gap:8px;font-size:14px;line-height:20px;font-weight:600;white-space:nowrap}
.fig-head b svg{width:16px;height:16px;color:var(--muted)}
.fig-head .meta{flex:none}
.fig-pad{padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px}
.fig-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.fig-split>div+div{border-left:.5px solid var(--line-in)}
.fig-rows>*{min-height:48px;padding:10px 20px;flex-wrap:wrap;row-gap:4px;font-size:14px;line-height:20px}
.fig-rows .grow{flex:1 1 140px}
.fig .review-top{flex-wrap:wrap}
.fig-rows .chip+.chip{margin-left:-4px}
.prose .fig-quote,.fig-quote{font-size:15px;line-height:24px;color:var(--text)}
.fig-reply{padding:12px 14px;border:.5px solid var(--line);border-radius:8px;display:flex;flex-direction:column;gap:4px}
.prose .fig-reply p,.fig-reply p{font-size:15px;line-height:24px;color:var(--ink)}
.stars-off{display:flex;gap:2px}
.stars-off svg{fill:#d5d7dc}
.fig-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.fig-compare>div{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px}
.fig-compare>div+div{border-left:.5px solid var(--line-in)}
.fig-compare b{font-size:16px;line-height:24px;font-weight:600}
.prose .fig-compare p,.fig-compare p{font-size:15px;line-height:24px;color:var(--text)}
.fig-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fig-photos>div{display:flex;flex-direction:column;gap:2px}
.fig-photos img{width:100%;height:auto;margin-bottom:8px;border-radius:12px}
.fig-photos b{font-size:16px;line-height:24px;font-weight:600}
.fig-photos span{font-size:14px;line-height:22px;color:var(--text)}
.fig-notes{display:flex;flex-direction:column;justify-content:center}
.fig-notes>div{flex:1;padding:12px 20px;display:flex;align-items:center;gap:12px;border-top:.5px solid var(--line-in)}
.fig-notes>div:first-child{border-top:0}
.fig-notes .tile{width:28px;height:28px;border-radius:8px;font-size:13px}
.fig-notes .tile svg{width:14px;height:14px}
.fig-notes b{display:block;font-size:14px;line-height:20px;font-weight:600}
.fig-notes span>span{display:block;font-size:13px;line-height:18px;color:var(--muted)}
.fig-composer{align-items:flex-start;gap:8px}
.fig-field{width:100%;padding:10px 12px;border:.5px solid var(--line);border-radius:8px;font-size:14px;line-height:20px;color:var(--muted)}
.prose .fig-field{margin-top:0;font-size:14px;line-height:20px;color:var(--muted)}
.fig-stack{gap:6px}
.fig-stack>b{font-size:16px;line-height:24px}
.fig-sub{font-size:14px;line-height:20px;color:var(--text)}
.fig-link{margin:6px 0 4px;display:flex;align-items:center;gap:8px}
.fig-link .fig-field{flex:1;min-width:0;overflow-wrap:anywhere;color:var(--ink)}
.fig-center{align-items:center}
.fig-qr{padding:10px;border:.5px solid var(--line);border-radius:8px;background:#fff}
.prose .bubble{margin-top:0;font-size:14px;line-height:20px;color:var(--ink)}
.prose .bubble.out{color:#fff}
.prose .fig .meta,.prose .fig .status{font-size:13px;line-height:18px}
/* Figurer med to kolonner stables når det er trangt, uansett skjermbredde. Står sist, så reglene over ikke vinner. */
@container (max-width:560px){
  .fig-split,.fig-compare{grid-template-columns:minmax(0,1fr)}
  .fig-split>div+div,.fig-compare>div+div{border-left:0;border-top:.5px solid var(--line-in)}
}
@container (max-width:440px){
  .fig-photos{grid-template-columns:minmax(0,1fr)}
  .fig .who .meta{display:none}
}

/* Priser */
.price-rows>*{min-height:64px}
.price-rows .name{flex:0 0 96px;font-size:16px;font-weight:600;white-space:nowrap}
.price-rows .what{flex:1;font-size:15px;color:var(--text);white-space:nowrap}
.price-rows .price{font-size:18px;font-weight:700;white-space:nowrap}
.price-rows .foot{min-height:44px;font-size:13px;color:var(--muted);white-space:nowrap}
.trial{min-height:76px;padding:14px 16px 14px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.trial b{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:650;white-space:nowrap}
.trial span.what{flex:1;font-size:15px;color:var(--text);white-space:nowrap}
.trial .btn{height:48px;padding:0 20px;border-radius:10px;font-size:15px;font-weight:550}
.plans{display:flex;flex-wrap:wrap;align-items:stretch;gap:20px}
.plan{flex:1 1 300px;min-width:0}
.plan-top{padding:24px 24px 22px;display:flex;flex-direction:column;gap:10px}
.plan-top h2{font-size:17px;line-height:24px;font-weight:600}
.plan-price{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.plan-price b{font-size:40px;line-height:44px;font-weight:700;letter-spacing:-.03em}
.plan-price span{font-size:14px;color:var(--muted)}
.note{font-size:15px;line-height:24px;color:var(--text)}
.included{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.included>div{min-height:76px;padding:14px 24px;display:flex;align-items:center;gap:14px;font-size:15px;line-height:22px;font-weight:500;border-top:.5px solid var(--line-in)}
.included>div:nth-child(-n+2){border-top:0}
.included>div:nth-child(even){border-left:.5px solid var(--line-in)}
.row-link{min-height:76px;padding:14px 16px 14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;text-decoration:none}
.row-link:hover{border-color:rgba(16,24,40,.4)}
.row-link b{display:block;font-size:16px;line-height:24px;font-weight:600}
.row-link span{display:block;font-size:14px;line-height:20px;color:var(--text)}
.row-link svg{width:20px;height:20px;flex:none;color:var(--muted)}

/* Steg */
.steps>li{padding:20px 24px;display:flex;align-items:flex-start;gap:16px;border-top:.5px solid var(--line-in)}
.steps>li:first-child{border-top:0}
.steps h3{font-size:17px;line-height:24px;font-weight:600}
.steps p{margin-top:4px;font-size:15px;line-height:24px;color:var(--text)}

/* Spørsmål */
.faq details{border-top:.5px solid var(--line-in)}
.faq details:first-child{border-top:0}
.faq summary{min-height:60px;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none;font-size:16px;line-height:24px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:18px;height:18px;flex:none;color:var(--muted);transition:transform .15s}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq details[open] summary{min-height:0;padding-top:18px;padding-bottom:8px}
.faq details>p,.faq details>div{max-width:648px;padding:0 24px 20px;font-size:15px;line-height:24px;color:var(--text)}
.faq a,.prose a,.note a{text-underline-offset:3px}
.faq a,.prose a,.note a,.steps a{color:var(--link)}

/* Avslutning og bunn */
/* Google-fargene går igjen: en stripe i blått, rødt, gult og grønt over det mørke båndet nederst på hver side. */
.cta-band{background:var(--ink);color:#fff;border-top:4px solid;border-image:linear-gradient(90deg,var(--blue) 0 25%,var(--red) 25% 50%,var(--star) 50% 75%,var(--green) 75% 100%) 1}
/* Blekkfarget fokusramme forsvinner mot det mørke båndet. */
.cta-band :focus-visible{outline-color:#fff}
.cta-band .wrap{padding-top:72px;padding-bottom:72px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 56px}
.cta-band p{margin-top:8px;font-size:18px;line-height:28px;color:#c9ccd3}
/* Prislinjen i avslutningen på forsiden (Jan 14.11). Lenken er 44 px høy og brekker aldri inni seg selv. */
.cta-band .cta-price{margin-top:0;font-size:16px;line-height:24px}
.cta-price a{display:inline-flex;align-items:center;gap:2px;min-height:44px;vertical-align:middle;color:#fff;font-weight:550;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.cta-price a svg{width:16px;height:16px}
.site-footer{padding-top:48px;padding-bottom:40px;display:flex;flex-direction:column;gap:32px}
.footer-cols{display:flex;flex-wrap:wrap;align-items:flex-start;gap:32px 72px}
.footer-about{flex:1 1 260px;display:flex;flex-direction:column;gap:10px}
.footer-about p{max-width:380px;font-size:15px;line-height:24px;color:var(--text)}
.footer-cols nav{display:flex;flex-direction:column;gap:2px}
.footer-cols nav b{font-size:13px;line-height:28px;font-weight:600;color:var(--muted)}
.footer-cols nav a{font-size:14px;line-height:30px;text-decoration:none;white-space:nowrap}
.footer-cols nav a:hover{text-decoration:underline;text-underline-offset:3px}
.footer-legal{padding-top:20px;border-top:.5px solid var(--line);font-size:13px;line-height:20px;color:var(--muted)}
.footer-legal span{white-space:nowrap}

/* Tekstsider */
.prose-card{padding:32px 40px 36px;max-width:800px}
.prose h2{margin-top:32px;font-size:22px;line-height:28px;font-weight:650;letter-spacing:-.015em}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{margin-top:12px;font-size:16px;line-height:26px;color:var(--text)}
.prose li{margin-top:6px}
.notice{margin-bottom:28px;padding:14px 16px;border:.5px solid var(--line);border-radius:10px;display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:22px;color:var(--text)}
.notice .dot{margin-top:7px}
.notice b{color:var(--ink)}
.contact-cards{display:flex;flex-wrap:wrap;align-items:stretch;gap:20px}
.contact-card{flex:1 1 300px;min-width:0;padding:24px;display:flex;flex-direction:column;gap:10px}
.contact-card h2{font-size:20px;line-height:26px;font-weight:650;letter-spacing:-.01em;padding-top:6px}
.contact-card p{flex:1;font-size:15px;line-height:24px;color:var(--text)}
.contact-card .btn{align-self:flex-start;margin-top:8px;height:44px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;font-size:15px;line-height:24px}
.facts dt{color:var(--muted);white-space:nowrap}

/* Integrasjonssidene: publisert innhold, nytt uttrykk */
.integration-main{padding-top:24px;padding-bottom:96px}
.integration-breadcrumb ol{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;line-height:18px;color:var(--muted)}
.integration-breadcrumb li{display:flex;align-items:center;gap:6px;min-height:44px;white-space:nowrap}
.integration-breadcrumb li+li::before{content:"/"}
.integration-breadcrumb a{text-decoration:none;display:flex;align-items:center;min-height:44px}
.integration-breadcrumb a:hover{color:var(--ink)}
.integration-main .eyebrow{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.integration-hero{padding:24px 0 56px}
.integration-hero h1{font-size:clamp(34px,4vw,48px);line-height:1.125;font-weight:650;letter-spacing:-.03em;text-wrap:balance}
.integration-overview-hero{display:flex;flex-direction:column;gap:14px}
.integration-hero p{max-width:600px;font-size:clamp(17px,1.6vw,19px);line-height:1.58;color:var(--text)}
.integration-detail-hero{display:flex;flex-wrap:wrap;align-items:flex-start;gap:32px 56px}
.integration-intro{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.integration-provider{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.integration-brand{display:flex;align-items:center;gap:10px;font-size:16px;line-height:24px;font-weight:600;text-decoration:none;white-space:nowrap}
.integration-provider a.integration-brand{min-height:44px}
.integration-brand img{width:auto;height:32px;max-width:40px;object-fit:contain}
.integration-status{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:18px;color:var(--text);white-space:nowrap}
.integration-status{flex:none}
.integration-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green)}
.integration-status.is-soon::before{background:#8b8d98}
.integration-card .integration-brand{min-width:0;white-space:normal}
.integration-main .button{height:48px;padding:0 20px;border-radius:10px;border:.5px solid var(--line);background:var(--card);font-size:15px;font-weight:550;display:inline-flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none;cursor:pointer}
.integration-main .button.primary{border:0;background:var(--ink);color:#fff;box-shadow:0 1px 2px rgba(16,24,40,.18),inset 0 1px 0 rgba(255,255,255,.08)}
.integration-main .button.primary:hover{background:#2a2d35}
.integration-main .button svg{width:18px;height:18px}
.integration-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.integration-how{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:15px;font-weight:550;text-decoration:none;white-space:nowrap}
.integration-how svg{width:16px;height:16px}
.integration-facts{flex:1 1 360px;min-width:0;padding:24px;background:var(--card);border:.5px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.integration-facts h2{font-size:17px;line-height:24px;font-weight:600}
.integration-facts ul{margin-top:10px;padding-left:18px;list-style:disc}
.integration-facts li,.integration-facts dd,.integration-facts p{font-size:15px;line-height:24px;color:var(--text)}
.integration-facts dl{margin-top:16px;padding-top:16px;border-top:.5px solid var(--line-in);display:flex;flex-direction:column;gap:10px}
.integration-facts dt{font-size:13px;line-height:18px;font-weight:600;color:var(--muted)}
.integration-facts .integration-guide-note{margin-top:14px}
.integration-guide,.integration-contact-info,.integration-faq,.integration-request,.integration-guide-readiness{margin-top:56px}
.integration-section-heading{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.integration-main h2{font-size:clamp(24px,2.6vw,30px);line-height:1.2;font-weight:650;letter-spacing:-.02em}
.integration-facts h2{font-size:17px;line-height:24px;letter-spacing:0}
.integration-section-heading p{max-width:680px;font-size:15px;line-height:24px;color:var(--text)}
.integration-steps{counter-reset:step;background:var(--card);border:.5px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.integration-steps>li{counter-increment:step;position:relative;padding:20px 24px 20px 76px;border-top:.5px solid var(--line-in)}
.integration-steps>li:first-child{border-top:0}
.integration-steps>li::before{content:counter(step);position:absolute;left:24px;top:20px;width:36px;height:36px;border-radius:9px;background:var(--tile-n);color:var(--tile-n-ink);font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center}
.integration-steps h3,.integration-guide-copy h3{font-size:17px;line-height:24px;font-weight:600}
.integration-steps p,.integration-guide-copy p{margin-top:4px;font-size:15px;line-height:24px;color:var(--text)}
.integration-visual-steps{display:flex;flex-direction:column;gap:20px}
.integration-visual-steps>li{display:grid;grid-template-columns:280px minmax(0,1fr);gap:32px;padding:24px;background:var(--card);border:.5px solid var(--line);border-radius:12px;box-shadow:var(--shadow);min-width:0}
.integration-guide-copy h3{display:flex;align-items:flex-start;gap:12px}
.integration-guide-number{width:28px;height:28px;flex:none;margin-top:-2px;border-radius:8px;background:var(--ink);color:#fff;font-size:14px;display:flex;align-items:center;justify-content:center}
.integration-guide-copy p{margin-top:12px}
.integration-guide-copy .integration-guide-aside{font-size:15px}
.integration-guide-media{display:grid;align-content:start;gap:16px;min-width:0}
.integration-guide-figure{min-width:0;max-width:735px}
.integration-guide-figure.is-compact{max-width:240px}
.integration-guide-shot{display:block;min-height:44px;overflow:hidden;border:.5px solid var(--line);border-radius:8px;background:#fff}
.integration-guide-shot svg{width:100%;height:auto}
.integration-guide-shot:hover{border-color:var(--ink)}
.integration-guide-figure figcaption{margin-top:8px;font-size:13px;line-height:18px;color:var(--muted)}
.integration-guide-extra{margin-top:20px;max-width:720px}
.integration-guide-note{font-size:15px;line-height:24px;color:var(--text)}
.integration-fields+.integration-guide-note{margin-top:16px}
.integration-guide-help{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:550;text-underline-offset:3px}
/* Eget CRM: API-eksempelet og feltene. */
.integration-code{margin-top:20px;border-radius:12px;background:var(--ink);box-shadow:var(--shadow);overflow:auto}
.integration-code pre{margin:0;padding:20px 24px;font:13px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#e6e7ea;white-space:pre}
.integration-fields{margin-top:20px;background:var(--card);border:.5px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.integration-fields>li{display:flex;gap:16px;padding:14px 24px;border-top:.5px solid var(--line-in)}
.integration-fields>li:first-child{border-top:0}
.integration-fields b{flex:0 0 130px;font:600 14px/22px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.integration-fields span{flex:1;min-width:0;font-size:15px;line-height:22px;color:var(--text)}
.integration-guide-note code{font:13px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding:1px 5px;border-radius:5px;background:var(--card);border:.5px solid var(--line-in);overflow-wrap:anywhere}
.integration-contact-info,.integration-guide-readiness{padding:24px;background:var(--card);border:.5px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.integration-contact-info h2,.integration-guide-readiness h2,.integration-request h2{font-size:20px;line-height:26px;letter-spacing:-.01em}
.integration-contact-info p,.integration-guide-readiness p,.integration-request p{margin-top:8px;max-width:680px;font-size:15px;line-height:24px;color:var(--text)}
.integration-main a:not(.button):not(.integration-brand):not(.integration-card-link):not(.integration-how){text-underline-offset:3px}
.integration-faq h2{margin-bottom:20px}
.integration-faq details{background:var(--card);border:.5px solid var(--line);border-top-width:0}
.integration-faq details:first-of-type{border-top-width:.5px;border-radius:12px 12px 0 0}
.integration-faq details:last-of-type{border-radius:0 0 12px 12px;box-shadow:var(--shadow)}
.integration-faq details+details{border-top:.5px solid var(--line-in)}
.integration-faq summary{min-height:60px;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none;font-size:16px;line-height:24px;font-weight:600}
.integration-faq summary::-webkit-details-marker{display:none}
.integration-faq summary svg{width:18px;height:18px;flex:none;color:var(--muted);transition:transform .15s}
.integration-faq details[open] summary svg{transform:rotate(180deg)}
.integration-faq details p{max-width:648px;padding:0 24px 20px;font-size:15px;line-height:24px;color:var(--text)}
.integration-category-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.integration-category-nav a{height:40px;padding:0 14px;border-radius:8px;border:.5px solid var(--line);background:var(--card);font-size:14px;font-weight:500;display:inline-flex;align-items:center;white-space:nowrap;text-decoration:none}
.integration-category-nav a:hover{border-color:rgba(16,24,40,.4)}
.integration-catalog-group{margin-top:40px}
.integration-catalog-group>h2{font-size:20px;line-height:26px;letter-spacing:-.01em;margin-bottom:16px}
.integration-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:20px}
.integration-card{padding:20px;background:var(--card);border:.5px solid var(--line);border-radius:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.integration-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.integration-card h3{font-size:16px}
.integration-card>p{flex:1;font-size:15px;line-height:24px;color:var(--text)}
.integration-card-link{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:15px;font-weight:550;text-decoration:none;white-space:nowrap}
.integration-card-link svg{width:16px;height:16px}
.integration-request{padding:24px;background:var(--card);border:.5px solid var(--line);border-radius:12px;box-shadow:var(--shadow);display:flex;flex-wrap:wrap;gap:24px 56px}
.integration-request>div:first-child{flex:1 1 280px;min-width:0}
.integration-request .button{margin-top:16px}
.integration-request-form{flex:2 1 420px;min-width:0;display:flex;flex-direction:column;gap:16px}
.integration-request-form label{display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:20px;font-weight:600}
.integration-request-form input,.integration-request-form textarea{width:100%;min-height:44px;padding:10px 12px;border:.5px solid var(--line);border-radius:8px;background:#fff;font-size:16px;font-weight:400}
.integration-request-form textarea{min-height:104px;resize:vertical}
.integration-request-form input:focus-visible,.integration-request-form textarea:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.request-label-line{display:flex;justify-content:space-between;gap:12px}
.request-label-line span{font-size:13px;font-weight:400;color:var(--muted)}
.request-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.request-privacy{margin:0!important;font-size:13px!important;line-height:18px!important;color:var(--muted)!important}
.integration-request-form .button{align-self:flex-start;margin-top:0}
.request-feedback{margin:0!important;min-height:20px;font-size:14px!important}
.request-feedback.is-error{color:var(--red)!important}
.request-success{flex:2 1 420px;min-width:0}
.request-success h3{font-size:18px;line-height:26px;font-weight:650}

/* Forsiden: løsningen som brede rader med ett stort eksempel hver */
.tile.n{background:var(--tile-n);color:var(--tile-n-ink)}
.hero-terms{margin-top:-8px}
.show-rows{display:flex;flex-direction:column;gap:72px}
.show-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:32px 72px}
.show-row:nth-child(even) .show-copy{order:2}
.show-copy{display:flex;flex-direction:column;gap:14px}
.show-no{display:flex;align-items:center;gap:10px;font-size:14px;line-height:20px;font-weight:500;color:var(--text);white-space:nowrap}
.show-no .tile{width:32px;height:32px;font-size:14px}
.show-copy h3{font-size:clamp(24px,2.4vw,30px);line-height:1.2;font-weight:650;letter-spacing:-.02em;text-wrap:balance}
.show-copy>p:not(.show-no):not(.eyebrow){font-size:17px;line-height:28px;color:var(--text)}
/* Knappen til prøven står i tekstkolonnen på siste rad i Løsningen, rett under punktene (Jan 14.11). */
.show-copy .section-cta{margin-top:10px}
.show-points{display:flex;flex-direction:column;gap:10px;padding-top:4px}
.show-points li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:24px}
.show-points svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--green)}
.show-copy .link{align-self:flex-start}
.show-visual .feature-demo+.feature-demo{border-top:.5px solid var(--line-in)}
.source-rows>*{min-height:68px;padding:10px 20px}
.source-rows .grow{display:flex;flex-direction:column}
.source-rows b{font-size:15px;line-height:22px;font-weight:600}
.source-rows .grow>span{font-size:14px;line-height:20px;color:var(--text)}
.source-logo{width:36px;height:36px;flex:none;border-radius:9px;border:.5px solid var(--line-in)}
.source-all{padding:16px 20px;border-top:.5px solid var(--line-in);display:flex;flex-direction:column;gap:6px;text-decoration:none;background:#fafaf9}
.source-all .int-logos{display:flex;flex-wrap:wrap;gap:8px}
.source-all .link{min-height:32px;font-size:14px}
.source-all:hover .link{color:#174ea6}
.sms-demo{display:flex;flex-direction:column;gap:8px}
.sms-avatar{width:28px;height:28px;border-radius:50%;font-size:11px}
/* Jan 14.11 («pass på å få plass til alt.. i SMS boksen»): tråden hadde fast høyde og rullet inni seg, så siste melding ble kuttet
   i lave vinduer. Nå vokser den med innholdet, og home.js setter av høyden til det høyeste sporet. */
.sms-thread{min-height:280px;padding:20px;display:flex;flex-direction:column;gap:8px}
/* Knappen for sporet som spilles av, er markert (Jan 14.11). */
.sms-buttons .chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.sms-thread>.meta{align-self:center}
.sms-thread .bubble{font-size:15px;line-height:22px;max-width:84%;flex:none}
.sms-note{align-self:center;max-width:300px;margin-top:4px;padding:8px 12px;border:.5px dashed var(--line);border-radius:10px;font-size:13px;line-height:18px;color:var(--text);text-align:center;text-wrap:balance}
.sms-link{flex:none;align-self:flex-start;max-width:84%;display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border:.5px solid var(--line);border-radius:12px;background:var(--card);box-shadow:var(--shadow)}
.sms-link>span:last-child{display:flex;flex-direction:column;min-width:0}
.sms-link b{font-size:14px;line-height:20px;font-weight:600}
.sms-link>span:last-child>span{font-size:13px;line-height:18px;color:var(--muted)}
.sms-choices{min-height:104px;padding:14px 20px 18px;border-top:.5px solid var(--line-in);display:flex;flex-direction:column;gap:10px;background:#fafaf9}
.sms-buttons{display:flex;flex-wrap:wrap;gap:8px}
.sms-buttons .chip{height:40px;padding:0 14px;background:var(--card);font-size:14px;cursor:pointer}
.sms-buttons .chip:hover{border-color:var(--ink)}
.sms-foot{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.sms-reset{border:0;background:none;padding:0;cursor:pointer}
@media(max-width:900px){.show-rows{gap:56px}.show-row{grid-template-columns:minmax(0,1fr)}.show-row:nth-child(even) .show-copy{order:0}}
@media(max-width:640px){.source-rows .status{display:none}.show-rows{gap:44px}.show-copy>p:not(.show-no):not(.eyebrow){font-size:16px;line-height:26px}.sms-thread{padding:16px}.sms-choices{padding:12px 16px 16px}.source-rows>*{padding:10px 16px}.source-all{padding:14px 16px}.hero-terms{margin-top:-4px;text-align:center}}
@media(max-width:360px){.sms-thread .bubble{max-width:90%}}

/* Forsiden: tre steg i toppen, knapp underveis, sammenligning, kundebevis (plassholdere) og Kom i gang */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.dot.b{background:var(--blue)}
/* Pilen står etter steget, så en ny linje alltid begynner med tallet (Jan 13.11: pilen havnet først på linje to på mobil). */
.hero-steps{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;line-height:20px;font-weight:550}
.hero-steps li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.hero-steps li>svg{width:16px;height:16px;color:var(--muted)}
.hero-steps .tile{width:24px;height:24px;border-radius:7px;font-size:12px}
.section-cta{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
/* Sammenligningen (Jan 14.11: tabellen var flat). Svaret vårt står i et løftet, mørkt kort som stikker 12 px over og under tabellen.
   Omslaget tegner både det hvite kortet og det mørke, så tabellen selv slipper overflow:hidden og kolonnen kan stikke utenfor.
   Faste kolonnebredder (colgroup) gjør at det mørke kortet treffer kolonnen nøyaktig. */
.compare-wrap{position:relative}
.compare-wrap::before{content:"";position:absolute;inset:0;z-index:0;background:var(--card);border:.5px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.compare{position:relative;z-index:2;width:100%;border-collapse:separate;border-spacing:0;display:table;table-layout:fixed}
.compare .cmp-topic{width:26%}.compare .cmp-self,.compare .cmp-yes{width:37%}
.compare th,.compare td{padding:16px 24px;text-align:left;vertical-align:top;border-top:.5px solid var(--line-in);font-size:15px;line-height:22px}
.compare thead th{border-top:0;font-size:14px;font-weight:600;color:var(--text);white-space:nowrap}
.compare tbody th{font-weight:600}
.compare td{color:var(--text)}
.compare-brand{display:inline-flex;align-items:center;gap:6px}
.compare-brand svg{width:16px;height:16px;fill:var(--star)}
.cmp-label{display:none}
.cmp-value{display:flex;align-items:flex-start;gap:10px}
.cmp-value svg{width:18px;height:18px;flex:none;margin-top:2px}
.compare .no svg{color:var(--red)}.compare .yes svg{color:var(--green)}
@media(min-width:641px){
  .compare-wrap{margin:-12px 0;padding:12px 0}
  .compare-wrap::before{inset:12px 0}
  .compare-wrap::after{content:"";position:absolute;top:0;bottom:0;right:0;width:37%;z-index:1;border-radius:14px;box-shadow:0 12px 32px rgba(16,24,40,.22);
    background:linear-gradient(90deg,var(--blue) 0 25%,var(--red) 25% 50%,var(--star) 50% 75%,var(--green) 75% 100%) top/100% 4px no-repeat,#16181d}
  /* Den dempede kolonnen: å sende lenken selv. #6b6f78 gir 5:1 mot hvitt. */
  .compare td.no,.compare thead th:nth-child(2){color:var(--muted)}
  .compare td.yes,.compare thead th:last-child{color:#fff}
  .compare td.yes{font-weight:550;border-top-color:rgba(255,255,255,.14)}
  .compare .yes svg{color:#81c995}
}
.ph{position:relative;border:1px dashed rgba(16,24,40,.35);border-radius:12px;background:var(--card)}
.ph-tag{position:absolute;top:10px;right:10px;padding:2px 8px;border-radius:999px;background:var(--ink);color:#fff;font-size:11px;line-height:16px;font-weight:600;font-style:normal;white-space:nowrap}
.proof-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
.proof-stats .ph{padding:20px 24px;display:flex;flex-direction:column;gap:2px}
.proof-stats b{font-size:36px;line-height:42px;font-weight:700;letter-spacing:-.02em;color:#b9bcc4}
.proof-stats span{font-size:15px;line-height:22px;color:var(--text)}
.proof-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.proof-card{margin:0;padding:24px;display:flex;flex-direction:column;gap:14px}
.stars-ph svg{fill:none;stroke:#b9bcc4;stroke-width:1.6}
.proof-card blockquote{margin:0;display:flex;flex-direction:column;gap:10px}
.proof-card blockquote p{font-size:17px;line-height:26px;font-weight:550;color:var(--muted)}
.ph-lines{display:flex;flex-direction:column;gap:8px}
.ph-lines i{height:8px;border-radius:4px;background:#e8eaed}.ph-lines i+i{width:62%}
.proof-card figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:6px}
.proof-card figcaption>span:last-child{display:flex;flex-direction:column;font-size:14px;line-height:20px;color:var(--text)}
.proof-card figcaption b{font-weight:600;color:var(--ink)}
.ph-photo{width:40px;height:40px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e8eaed;color:var(--muted)}
.ph-photo svg{width:20px;height:20px}
.ph-result{padding-top:12px;border-top:.5px solid var(--line-in);font-size:14px;line-height:20px;font-weight:600;color:var(--muted)}
.start-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.start-steps li{padding:20px;display:flex;flex-direction:column;gap:8px}
.start-steps h3{margin-top:6px;font-size:17px;line-height:24px;font-weight:650}
.start-steps p{font-size:15px;line-height:22px;color:var(--text)}
.start-note{margin-top:12px}
.job-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.job-list li{min-height:56px;padding:12px 20px;display:flex;align-items:center;gap:10px;font-size:15px;line-height:22px;border-top:.5px solid var(--line-in)}
.job-list li:nth-child(-n+2){border-top:0}
.job-list li:nth-child(odd){border-right:.5px solid var(--line-in)}
.job-list svg{width:18px;height:18px;flex:none;color:var(--green)}
.sticky-cta{display:none}
.trade-more{display:none}
@media(max-width:900px){.start-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.proof-cards{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){
  .hero-steps{font-size:13px}
  .section-cta{margin-top:28px;flex-direction:column;align-items:stretch;gap:10px}.section-cta .terms{text-align:center}
  .compare,.compare thead,.compare tbody,.compare tr,.compare th,.compare td{display:block;width:auto}
  /* Mobil (Jan 14.11): en mørk topplinje med stjernen og fargestripen viser hvem som svarer. */
  .compare thead th:not(:last-child){display:none}
  .compare thead th:last-child{padding:18px 16px 14px;border-radius:12px 12px 0 0;font-size:15px;line-height:22px;color:#fff;
    background:linear-gradient(90deg,var(--blue) 0 25%,var(--red) 25% 50%,var(--star) 50% 75%,var(--green) 75% 100%) top/100% 4px no-repeat,#16181d}
  .compare tbody tr{padding:14px 16px;border-top:.5px solid var(--line-in)}.compare tbody tr:first-child{border-top:0}
  .compare tbody th,.compare td{padding:0;border:0}
  .compare tbody th{font-size:16px;line-height:22px}
  /* Mobil: bare det Reviews gjør, som en sjekkliste. Sammenligningen med å gjøre det selv står på større skjermer. */
  .compare td.no{display:none}
  .compare td.yes{font-weight:400;color:var(--text)}
  .compare tbody th{width:auto;margin-bottom:6px}
  .proof-stats{gap:8px}.proof-stats .ph{padding:26px 10px 12px}.proof-stats b{font-size:24px;line-height:30px}.proof-stats span{font-size:13px;line-height:18px}.proof-stats .ph-tag{top:6px;right:6px;font-size:10px;padding:1px 6px}
  .proof-cards .proof-card:nth-child(n+2){display:none}
  .start-steps{grid-template-columns:minmax(0,1fr);gap:10px}.start-steps li{padding:14px 16px;display:grid;grid-template-columns:36px minmax(0,1fr);gap:2px 12px}.start-steps .tile{grid-row:1/3}.start-steps h3{margin:0;align-self:center}.start-steps p{grid-column:2}
  .job-list{grid-template-columns:minmax(0,1fr)}.job-list li:nth-child(-n+2){border-top:.5px solid var(--line-in)}.job-list li:first-child{border-top:0}.job-list li:nth-child(odd){border-right:0}
  /* Mobil: knappen til prøven følger med nederst. Radene i løsningen holdes korte. */
  /* Safari på iPhone (Jan 14.11): med verktøylinjen minimert slutter vinduet over adressepillen, mens siden tegnes videre under den.
     Linjen er helt dekkende, og en hvit skygge uten uskarphet fortsetter flaten 120 px ned under linjen, så ingenting av siden
     synes under eller gjennom den. Skyggen påvirker ikke sidens lengde. Knappen og teksten står over pillen. */
  .sticky-cta{position:sticky;bottom:0;z-index:4;display:flex;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:.5px solid var(--line);box-shadow:0 -4px 16px rgba(16,24,40,.08),0 60px 0 60px #fff}
  .sticky-cta .btn{flex:1;height:48px}
  .show-row:nth-child(n+2) .show-points{display:none}
  .trades .trade-grid>*:nth-child(n+7),.section-cta-wide,.show-row:nth-child(4) .show-visual{display:none}
  .trade-more{display:inline-flex;margin-top:8px}
  .sms-thread{min-height:230px}
}
@media(max-width:360px){.sticky-cta .terms{display:none}}

/* Mobil */
@media(max-width:900px){
  .site-nav,.header-actions .login{display:none}
  .menu{display:block}
  .site-header{gap:8px;justify-content:space-between}
  .header-actions{gap:4px;margin-left:auto}
  .hero{padding-top:40px;padding-bottom:64px;gap:36px}
  .hero-copy,.hero-visual,.hero-sub .hero-visual{flex-basis:100%}
  .section{padding-bottom:64px}
  .integration-visual-steps>li{grid-template-columns:minmax(0,1fr);gap:20px}
  .ads-band{margin-bottom:64px}
  .ads-band>.wrap{padding-top:64px;padding-bottom:56px}
  .article-aside{position:static;order:-1;flex-basis:100%}
  .aside-cta{display:none}
  .article{padding-bottom:64px}
}
@media(max-width:640px){
  :root{--gutter:20px}
  .site-header{height:60px;padding-right:12px}
  .brand{font-size:16px}.brand svg{width:18px;height:18px}
  .hero{padding-top:28px;padding-bottom:56px;gap:32px}
  .hero-copy{gap:18px}
  .h-hero{font-size:36px}
  .eyebrow,.hero .terms{font-size:13px}
  .hero-cta{flex-direction:column;align-items:stretch;gap:12px;padding-top:6px}
  .hero-cta .terms{text-align:center}
  .section-head{margin-bottom:20px}
  .only-wide{display:none}
  .card-head{min-height:52px;padding:0 18px}
  .proof-body{flex-direction:column}
  .proof-map{padding:18px 14px 18px}.map{padding:8px}
  .grid25{grid-template-columns:repeat(5,46px);gap:10px;font-size:15px;line-height:46px}
  .grid25 i{height:46px}
  .proof-side{border-left:0;flex-basis:auto}
  .proof-side>div{padding:16px 18px;border-top:.5px solid var(--line-in)}
  .proof-claim{padding:16px 18px}
  .feature-copy{padding:20px 20px 18px;gap:8px}
  .feature-copy h3{font-size:19px}
  .feature-demo.pad{padding:18px 20px 20px}
  .rows>*,.faq summary{padding-left:20px;padding-right:20px}
  .faq details>p,.faq details>div{padding-left:20px;padding-right:20px}
  .feature-demo.rows>*{min-height:52px}
  .chip{height:36px}.chip-ink{height:40px}
  .price-rows>*{min-height:60px}
  .price-rows .name{flex-basis:68px}
  .price-rows .what{font-size:14px}
  .price-rows .price{font-size:17px}
  .page-head{padding-top:32px;padding-bottom:28px}
  .trial{padding:18px 20px}
  .plan-top{padding:20px 20px 18px}
  .trial .btn{width:100%}
  .included{grid-template-columns:minmax(0,1fr)}
  .included>div{min-height:64px;padding:12px 20px}
  .included>div:nth-child(2){border-top:.5px solid var(--line-in)}
  .included>div:nth-child(even){border-left:0}
  .row-link{padding:14px 12px 14px 20px}
  .int-strip{padding:18px 20px}
  .int-strip>svg{display:none}
  .bars{gap:16px}
  .bar-col{flex:1 1 0;min-width:0}
  .bar-unit,.bar-label{white-space:normal;text-wrap:balance}
  .ads-after{grid-template-columns:minmax(0,1fr)}
  .bar-track{width:72px;height:160px}
  .bar-value{font-size:24px;line-height:30px}
  .trend{padding:16px 16px 12px}
  .calc{padding:20px}
  .calc-inputs{grid-template-columns:minmax(0,1fr)}
  .calc-tiles{grid-template-columns:minmax(0,1fr)}
  .calc-tiles>div{border-left:0;border-top:.5px solid var(--line-in)}
  .calc-tiles>div:first-child{border-top:0}
  .calc-ask{padding:24px 20px}
  .calc-ask p{font-size:17px;line-height:26px}
  .calc-actions .btn{width:100%}
  .calc-line{font-size:16px}
  .guide-card{padding:20px}
  .article-head{padding-bottom:28px}
  .toc{padding:16px 20px}
  .guide-text{padding:16px 20px 20px}
  .article-featured{margin-bottom:28px;border-radius:12px}
  .fig-head,.fig-rows>*{padding-left:16px;padding-right:16px}
  .fig-pad,.fig-compare>div{padding:16px}
  .fig-notes>div{padding:12px 16px}
  .prose blockquote p{font-size:18px;line-height:27px}
  .steps>li{padding:18px 20px}
  .cta-band .wrap{padding-top:48px;padding-bottom:48px;flex-direction:column;align-items:stretch}
  .cta-band p{font-size:16px;line-height:25px}
  .site-footer{padding-top:36px;padding-bottom:32px;gap:28px}
  .footer-cols{gap:28px 20px}
  .footer-about{flex-basis:100%}
  .footer-cols nav{flex:1 1 40%}
  .footer-cols nav a{font-size:15px;line-height:44px}
  .prose-card{padding:24px 20px 28px}
  .contact-card{padding:20px}
  .integration-hero{padding-bottom:40px}
  .integration-guide,.integration-contact-info,.integration-faq,.integration-request,.integration-guide-readiness{margin-top:40px}
  .integration-main{padding-bottom:64px}
  .integration-steps>li{padding:18px 20px 18px 68px}
  .integration-code pre{padding:16px 18px;font-size:12px}
  .integration-fields>li{flex-direction:column;gap:2px;padding:12px 20px}
  .integration-fields b{flex-basis:auto}
  .integration-steps>li::before{left:20px;top:18px}
  .integration-visual-steps>li,.integration-facts,.integration-contact-info,.integration-guide-readiness,.integration-request{padding:20px}
  .integration-faq summary,.integration-faq details p{padding-left:20px;padding-right:20px}
  .integration-main .button{width:100%;justify-content:center}
  .integration-request-form .button{width:100%}
}
@media(max-width:640px){
  .trade-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .trade-card{padding:14px}
  .trade-head{flex-direction:column;align-items:flex-start;gap:10px}
  .trade-head b{font-size:15px;line-height:20px}
  .trade-quote{display:none}
}
@media(max-width:360px){
  .hide-xs{display:none}
  .h-hero{font-size:30px}
  .h-hero .nowrap{white-space:normal}
  .grid25{grid-template-columns:repeat(5,40px);gap:8px;font-size:14px;line-height:40px}
  .grid25 i{height:40px}
  .plan-price{flex-wrap:wrap;gap:0 8px}
  .rows>*{padding-left:16px;padding-right:16px}
}
/* 404: mørk flate over hele skjermen. «404» er tegnet med prikkene fra kartet; de tente lyser rødt og toner inn kolonne for kolonne. */
body.bare{background:var(--ink)}
.lost{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:96px var(--gutter) 72px;overflow:hidden;color:#fff;
 background:radial-gradient(60% 50% at 18% 12%,rgba(249,171,0,.12),transparent 70%),radial-gradient(55% 45% at 85% 90%,rgba(217,48,37,.16),transparent 70%),var(--ink)}
.lost-brand{position:absolute;top:24px;left:var(--gutter);color:#fff}
.lost-body{width:100%;max-width:640px;display:flex;flex-direction:column;align-items:center;text-align:center}
.lost-dots{width:100%;max-width:520px;display:grid;grid-template-columns:repeat(11,1fr);gap:clamp(6px,1.2vw,10px);margin-bottom:48px}
.lost-dots i{aspect-ratio:1/1;border-radius:50%;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.1)}
.lost-dots i.on{background:var(--red);box-shadow:0 0 22px rgba(217,48,37,.55),inset 0 1px 0 rgba(255,255,255,.18);animation:lost-in .5s cubic-bezier(.2,.7,.2,1) both}
.lost-dots i.on:nth-child(11n+2),.lost-dots i.on:nth-child(11n+3){animation-delay:.04s}
.lost-dots i.on:nth-child(11n+5),.lost-dots i.on:nth-child(11n+6),.lost-dots i.on:nth-child(11n+7){animation-delay:.12s}
.lost-dots i.on:nth-child(11n+9),.lost-dots i.on:nth-child(11n+10),.lost-dots i.on:nth-child(11n){animation-delay:.2s}
.lost-dots i.on:nth-child(41){animation:lost-in .5s cubic-bezier(.2,.7,.2,1) .04s both,lost-pulse 2.4s ease-in-out 1s infinite}
@keyframes lost-in{from{opacity:0;transform:scale(.4)}}
@keyframes lost-pulse{50%{box-shadow:0 0 0 6px rgba(217,48,37,.18),0 0 30px rgba(217,48,37,.7)}}
.lost-eyebrow{display:flex;align-items:center;gap:8px;font-size:14px;line-height:20px;font-weight:500;color:#c9ccd3;white-space:nowrap}
.lost-title{margin-top:14px;font-size:clamp(36px,5.2vw,60px);line-height:1.05;font-weight:680;letter-spacing:-.035em;text-wrap:balance}
.lost-lead{margin-top:14px;font-size:clamp(17px,1.6vw,19px);line-height:1.55;color:#c9ccd3;text-wrap:balance}
.lost-actions{margin-top:32px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.lost-actions svg{width:18px;height:18px}
.lost-links{margin-top:28px;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px}
.lost-links a{min-height:44px;display:inline-flex;align-items:center;font-size:15px;color:#c9ccd3;text-decoration:none;white-space:nowrap}
.lost-links a:hover{color:#fff}
.lost :focus-visible{outline-color:#fff}
@media(max-width:640px){
  .lost{padding:88px var(--gutter) 48px;align-items:flex-start}
  .lost-brand{top:16px}
  .lost-dots{margin-bottom:36px}
  .lost-actions{width:100%;flex-direction:column}
  .lost-actions .btn{width:100%}
}
@media(max-height:700px){.lost{padding-top:72px;padding-bottom:32px}.lost-dots{max-width:360px;margin-bottom:28px}.lost-actions{margin-top:24px}.lost-links{margin-top:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.faq summary svg,.integration-faq summary svg{transition:none}.lost-dots i.on{animation:none}}

/* Skjerm for skjerm (Jan 13.11): hver seksjon får sin egen skjerm, med innholdet midt i, så én ting vises om gangen når man ruller. */
@media(min-height:600px){
  .section{min-height:100svh;padding-top:96px;padding-bottom:96px;align-content:center}
  .hero-sub{min-height:calc(100svh - 72px);align-content:center}
  #slik{min-height:0;padding-top:0;padding-bottom:0}
  #slik .show-rows{gap:0}
  #slik .show-row{min-height:100svh;padding:96px 0;align-content:center}
  /* To korte seksjoner etter hverandre deler én skjerm, så ingen av dem står alene i et tomt felt. */
  .split-center:has(+ .split-center){min-height:50svh;align-content:end;padding-bottom:40px}
  .split-center + .split-center{min-height:50svh;align-content:start;padding-top:40px}
}
@media(min-height:600px) and (max-width:900px){
  .section,#slik .show-row{min-height:calc(100svh - 68px);padding-top:72px;padding-bottom:72px}
  .hero-sub{min-height:calc(100svh - 128px)}
  /* Hver rad har egen skjerm, så punktene og bildet i siste rad får plass igjen. */
  #slik .show-row:nth-child(n+2) .show-points{display:flex}
  #slik .show-row:nth-child(4) .show-visual{display:block}
  .split-center:has(+ .split-center),.split-center + .split-center{min-height:calc(50svh - 34px)}
}
/* Innholdet glir rolig inn når seksjonen kommer på skjermen. Bare der nettleseren støtter det, og aldri ved redusert bevegelse. */
@supports (animation-timeline: view()){
  @media(prefers-reduced-motion:no-preference) and (min-height:600px){
    @keyframes skjerm-inn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
    /* Tidslinjen følger seksjonen, ikke elementet som flyttes, så rullingen aldri påvirkes av sin egen animasjon. */
    .section,#slik .show-row{view-timeline:--skjerm block}
    .section>*,#slik .show-row>*{animation:skjerm-inn linear both;animation-timeline:--skjerm;animation-range:entry 0% entry 40%}
    #slik>.show-rows{animation:none}
  }
}
/* Kartet i toppen tennes én gang når siden åpnes: adressen først, så ringene utover. Viser hva appen måler uten flere ord (Jan 13.11). */
@media(prefers-reduced-motion:no-preference){
  @keyframes punkt-tenn{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
  .hero-card .grid25 i{animation:punkt-tenn .5s cubic-bezier(.2,.8,.2,1) .3s both}
  .hero-card .grid25 i[data-ring="1"]{animation-delay:.55s}
  .hero-card .grid25 i[data-ring="2"]{animation-delay:.8s}
}
/* Skjermprikkene (screens.js): én prikk per skjerm i høyre kant, tent i seksjonens farge. Bare når det er god plass ved siden av innholdet. */
.screen-dots{display:none}
@media(min-width:1280px) and (min-height:600px){
  .screen-dots{position:fixed;right:20px;top:50%;z-index:5;display:flex;flex-direction:column;gap:2px;transform:translateY(-50%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s ease}
  .screen-dots.on{opacity:1;visibility:visible;pointer-events:auto}
  .screen-dots button{position:relative;width:28px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:12px}
  .screen-dots button::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(16,24,40,.24);transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .35s ease,box-shadow .35s ease}
  .screen-dots button:hover::before{background:rgba(16,24,40,.5)}
  .screen-dots button[aria-current]::before{background:var(--tone);transform:scale(1.25);box-shadow:0 0 0 5px color-mix(in srgb,var(--tone) 22%,transparent)}
  .screen-dots button:focus-visible{outline:2px solid var(--ink);outline-offset:0}
  .screen-dots-tip{position:absolute;right:34px;top:50%;transform:translate(6px,-50%);padding:5px 10px;border-radius:8px;background:var(--card);border:.5px solid var(--line);box-shadow:0 4px 12px rgba(16,24,40,.08);font-size:13px;line-height:18px;font-weight:500;color:var(--ink);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
  .screen-dots button:hover .screen-dots-tip,.screen-dots button:focus-visible .screen-dots-tip{opacity:1;transform:translate(0,-50%)}
}
@media(prefers-reduced-motion:reduce){.screen-dots,.screen-dots button::before,.screen-dots-tip{transition:none}}
/* Bla skjerm for skjerm (Jan 13.11: «scrollingen må liksom bla seg gjennom sidene»). Ett rulletak flytter én skjerm.
   Bare på brede skjermer og bare på sider som er bygget av skjermer. Artikler, Lokal synlighet og integrasjonssidene ruller fritt. */
@media(min-width:1024px) and (min-height:640px){
  html:has(main > .section ~ .section):not(:has(main > :not(.hero, .section, .page-head, .crumbs))){scroll-snap-type:y mandatory}
  .site-header,.section,#slik .show-row:not(:first-child){scroll-snap-align:start;scroll-snap-stop:always;scroll-margin-top:0}
  /* Deler som deler skjerm med delen over, får stopp ved bunnen. Når de får plass, faller stoppet sammen med toppen av skjermen;
     blir de høyere enn vinduet (større tekst), kan man fortsatt rulle ned til resten. */
  .split-center + .split-center,.page-head + .section{scroll-snap-align:end;scroll-snap-stop:always}
  .site-footer{scroll-snap-align:end;scroll-snap-stop:always}
  /* Toppen får stopp ved bunnen. Når den får plass, faller stoppet sammen med sidetoppen. I lave vinduer (1024×640) er den høyere
     enn vinduet; uten stopp her trakk festingen siden tilbake til toppen, og bunnen av toppen kunne aldri vises. */
  main > .hero{scroll-snap-align:end;scroll-snap-stop:always}
  /* Første skjerm er toppen og det som står over den, så neste rulletak lander rett på neste seksjon. */
  .crumbs + .hero-sub{min-height:calc(100svh - 140px)}
  .page-head + .section{min-height:0}
}
/* Forløpet i toppkortet (home.js). Uten skript står kortet med dagens kart, og meldingen om ny anmeldelse er skjult. */
.hero-event{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--card);box-shadow:0 8px 24px rgba(16,24,40,.18),0 0 0 .5px var(--line);opacity:0;transform:translateY(14px);transition:opacity .22s ease,transform .4s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.hero-event.on{opacity:1;transform:none}
.hero-event-mark{width:36px;height:36px;flex:none;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--tile-n)}
.hero-event-mark svg{display:none;width:20px;height:20px}
.hero-event-mark i{display:none;font-style:normal;font-size:15px;line-height:20px;font-weight:650;color:#fff}
.hero-event[data-kind=job] .hero-event-mark svg:first-child{display:block;color:var(--blue)}
.hero-event[data-kind=sms] .hero-event-mark svg:nth-child(2){display:block;color:var(--red)}
.hero-event[data-kind=more] .hero-event-mark svg:nth-child(3){display:block;color:var(--star)}
.hero-event[data-kind=review] .hero-event-mark{border-radius:50%;background:var(--ink)}
.hero-event[data-kind=review] .hero-event-mark i{display:block}
.hero-event-text{min-width:0;display:flex;flex-direction:column;text-align:left}
.hero-event-top{display:flex;align-items:center;gap:8px;font-size:14px;line-height:20px;white-space:nowrap}
.hero-event-top b{font-weight:650}
.hero-event .stars{display:none}
.hero-event .stars svg{width:13px;height:13px}
.hero-event[data-kind=review] .stars{display:flex}
.hero-event-line{font-size:13px;line-height:18px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* På 360 px er kartet bare 248 px bredt. Kortet strammes inn, så sitatene står hele på én linje i stedet for å kuttes. */
/* Jan 14.11 («mobilvisning er langt under godkjent»): nederst i kartet havnet kortet bak den faste linjen. På mobil ligger det øverst og glir inn ovenfra. */
@media(max-width:640px){.hero-event{top:12px;bottom:auto;transform:translateY(-14px)}}
@media(max-width:360px){.hero-event{left:6px;right:6px;top:6px;gap:8px;padding:8px}.hero-event-mark{width:30px;height:30px}.hero-event-mark svg{width:18px;height:18px}.hero-event-line{font-size:12px;line-height:16px}}
.hero-query{display:inline-flex;align-items:center;min-width:1px}
.hero-query.typing::after{content:"";width:1.5px;height:17px;margin-left:2px;background:var(--ink);animation:markor 1s steps(1) infinite}
@keyframes markor{50%{opacity:0}}
.hero-card .proof-map,.hero-card .proof-claim{transition:opacity .5s ease}
.hero-card.fade .proof-map,.hero-card.fade .proof-claim,.hero-card.claim-wait .proof-claim{opacity:0}
@media(prefers-reduced-motion:no-preference){
  .hero-card.play .grid25 i{animation:none;opacity:0}
  .hero-card.play .grid25.lit i{animation:punkt-tenn .5s cubic-bezier(.2,.8,.2,1) .05s both}
  .hero-card.play .grid25.lit i[data-ring="1"]{animation-delay:.3s}
  .hero-card.play .grid25.lit i[data-ring="2"]{animation-delay:.55s}
}
@media(max-width:640px){.hero-card .proof-claim span{min-height:40px}}

/* Levende forside (Jan 14.11: «trenger en bedre hovedside som er litt mer engasjerende»). Samme innhold og rekkefølge:
   stegene i toppen følger kortet, og kortene nedover spiller seg selv én gang (home.js). */
.hero-steps li{transition:color .3s ease}
.hero-steps .tile{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
.hero-steps.live li{color:var(--muted)}
.hero-steps.live li.on{color:var(--ink)}
.hero-steps.live li.on .tile{transform:scale(1.14)}
.hero-steps.live li.on .tile.b{box-shadow:0 0 0 4px rgba(26,115,232,.24)}
.hero-steps.live li.on .tile.r{box-shadow:0 0 0 4px rgba(217,48,37,.24)}
.hero-steps.live li.on .tile.g{box-shadow:0 0 0 4px rgba(30,142,62,.24)}
/* SMS-demoen: prikkene mens noen skriver, og nye bobler som kommer inn. */
.bubble.dots{display:flex;align-items:center;gap:4px;height:42px;padding:0 14px}
.bubble.dots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.35}
.draft.typing::after{content:"";display:inline-block;width:1.5px;height:16px;margin-left:1px;vertical-align:-3px;background:var(--ink);animation:markor 1s steps(1) infinite}
@media(prefers-reduced-motion:no-preference){
  @keyframes skriver{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-2px)}}
  @keyframes boble-inn{from{opacity:0;transform:translateY(6px)}}
  .bubble.dots i{animation:skriver 1s ease-in-out infinite}
  .bubble.dots i:nth-child(2){animation-delay:.15s}.bubble.dots i:nth-child(3){animation-delay:.3s}
  .sms-thread [data-added],.sms-link:not([hidden]){animation:boble-inn .3s cubic-bezier(.2,.8,.2,1)}
  /* Kortene som spiller seg inn: delene står klare og får bare forsinkelsen sin fra home.js. */
  [data-play] .rows>*,[data-play] .serp-list>li,[data-play] .int-logos img,[data-play] .source-all .link,[data-play] .stars svg,[data-play] .demo-actions{transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
  [data-play].pre .rows>*,[data-play].pre .serp-list>li,[data-play].pre .source-all .link,[data-play].pre .demo-actions{opacity:0;transform:translateY(10px)}
  [data-play].pre .int-logos img,[data-play].pre .stars svg{opacity:0;transform:scale(.5)}
  /* Kartpunktene i avslutningen tennes ring for ring når båndet kommer på skjermen (home.js), som i toppen. */
  .cta-dots.pre i{opacity:0}
  .cta-dots.lit i{animation:punkt-tenn .5s cubic-bezier(.2,.8,.2,1) .1s both}
  .cta-dots.lit i[data-ring="1"]{animation-delay:.35s}
  .cta-dots.lit i[data-ring="2"]{animation-delay:.6s}
  /* Toppkortet på forsiden (home.js). Jan 14.11: «Vi må klare å vise hva dette er umiddelbart i HERO.» Hele historien står fra
     start. I gjennomgangen dempes delene til skygger og får full styrke tilbake én etter én; kortet står aldri tomt. */
  .hero-story [data-step],.hero-story .stars svg{transition:opacity .3s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
  .hero-story.run [data-step]:not(.on){opacity:.22;transform:translateY(4px)}
  .hero-story.run .stars:not(.lit) svg{opacity:.22}
  .hero-story .stars.lit svg:nth-child(2){transition-delay:.12s}.hero-story .stars.lit svg:nth-child(3){transition-delay:.24s}
  .hero-story .stars.lit svg:nth-child(4){transition-delay:.36s}.hero-story .stars.lit svg:nth-child(5){transition-delay:.48s}
}
/* Kartet som rød tråd (Jan 14.11: «noe i bakgrunnen som kunne gått igjen nedover siden»): et tegnet veinett bak hele forsiden.
   Jan 14.11: også bak fagsidene og de to produktsidene. Sidene velger det med `backdrop: true` (layout.mjs), som gir body.backdrop.
   Hvite veier på den grå flaten, uten farger og uten stedsnavn. Kortet i toppen og søket på skjerm to er utsnitt av samme kart. */
body.backdrop{background-image:url(/bakgrunnskart.svg);background-position:center top;background-size:max(1440px,100vw) auto;background-repeat:repeat-y}
/* Skjerm to på forsiden: søket slik kunden ser det, med kart, de tre øverste og bedriften selv under «Flere bedrifter». */
/* Kortet er 20 px bredere enn listen på fagsidene. Teksten gir fra seg like mye, så de to står fortsatt side om side på 1024 px. */
.problem-pack .problem-visual{flex-basis:500px}
.problem-pack .problem-copy{flex-basis:380px}
.pack-map{position:relative;height:132px;overflow:hidden;border-bottom:.5px solid var(--line-in)}
.pack-pin{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:3px;height:24px;padding:0 8px 0 5px;border-radius:999px;background:var(--card);box-shadow:0 1px 4px rgba(16,24,40,.22),0 0 0 .5px var(--line);font-size:12px;line-height:16px;font-weight:650;white-space:nowrap;width:max-content}
.pack-pin svg{width:14px;height:14px;color:var(--red)}
.pack-pin.p1{left:58%;top:24%}.pack-pin.p2{left:30%;top:42%}.pack-pin.p3{left:76%;top:56%}.pack-pin.p4{left:12%;top:22%}.pack-pin.p5{left:34%;top:74%}.pack-pin.p6{left:88%;top:28%}
.pack-pin.own{left:62%;top:80%}
.pack-pin.own{background:var(--ink);color:#fff;box-shadow:0 2px 8px rgba(16,24,40,.3)}
.pack-pin.own svg{color:#fff}
.pack .serp-list>li{position:relative;min-height:80px;padding:8px 20px;align-items:center}
.pack .serp-list>li.own{min-height:60px}
.pack-thumb{width:88px;height:60px;border-radius:8px}
.pack-thumb svg,.pack-thumb.tile svg{width:28px;height:28px}
.pack .serp-list>li:not(.own) .serp-rank{position:absolute;left:14px;top:4px;width:22px;height:22px;border-radius:7px;font-size:12px;box-shadow:0 0 0 2px var(--card)}
.pack .serp-name{gap:1px}
.pack-rating{display:flex;align-items:center;gap:5px;font-size:14px;line-height:20px;color:var(--text);white-space:nowrap}
.pack-rating .stars svg{width:13px;height:13px}
/* Mørkere grønn enn --green, så den lille teksten har kontrast 5:1 mot hvitt (--green gir 4,2:1). */
.pack-open{color:#188038;font-weight:500}
.pack .serp-list>li.pack-more{min-height:52px;justify-content:center}
.pack-more span{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 16px;border-radius:999px;background:var(--page);font-size:14px;line-height:20px;font-weight:550;white-space:nowrap}
.pack-more svg{width:16px;height:16px}
@media(max-width:640px){.pack-thumb{width:64px;height:52px}.pack .serp-list>li{padding:8px 16px;gap:12px}.pack .serp-list>li:not(.own) .serp-rank{left:10px}.pack-map{height:112px}}

/* Avslutningen på forsiden (Jan 14.11: «større og mer innbydende»). Bare forsiden; de andre sidene har det smale båndet.
   Båndet og bunnteksten står i .end-screen og fyller siste skjerm sammen på brede skjermer. */
.end-screen{display:flex;flex-direction:column}
.cta-home{position:relative;overflow:hidden}
/* Veinettet fra bakgrunnen fortsetter svakt bak det mørke feltet: veiene er 60–90 % hvite, så 8 % gir rundt 6 % hvitt. */
.cta-home::before{content:"";position:absolute;inset:0;background:url(/bakgrunnskart.svg) center top/max(1440px,100vw) auto repeat-y;opacity:.08;pointer-events:none}
.cta-home .wrap{position:relative;padding-top:56px;padding-bottom:56px;display:grid;grid-template-columns:minmax(0,600px) auto;justify-content:space-between;align-items:center;gap:48px 56px}
.cta-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.cta-home h2{font-size:clamp(38px,4.6vw,56px);line-height:1.075;font-weight:650;letter-spacing:-.035em;text-wrap:balance}
.cta-promises{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 24px}
.cta-promises li{display:flex;align-items:center;gap:8px;font-size:17px;line-height:24px;color:#fff;white-space:nowrap}
.cta-promises svg{width:20px;height:20px;flex:none;color:#81c995}
.cta-home .btn-lg{margin-top:24px;height:56px;padding:0 26px}
.cta-plans{margin-top:28px;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:12px}
.cta-plans li{min-width:0;padding:14px 16px;border:.5px solid rgba(255,255,255,.18);border-radius:12px;background:#1e2128;display:flex;flex-direction:column;gap:2px}
.cta-plans b{font-size:14px;line-height:20px;font-weight:500;color:#c9ccd3;white-space:nowrap}
.cta-plans strong{font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.02em;color:#fff;white-space:nowrap}
.cta-plans span{font-size:13px;line-height:18px;color:#c9ccd3;white-space:nowrap}
/* 14 px, så linjen og lenken står på én linje i kolonnen på 600 px. */
.cta-home .cta-price{margin-top:10px;font-size:14px;line-height:22px;color:#c9ccd3}
/* Kartpunktene fra toppen som pynt, uten tall: samme form som .map .grid25 i, med hvit ring rundt midtpunktet. */
.cta-dots{display:grid;grid-template-columns:repeat(5,56px);gap:10px}
.cta-dots i{height:56px;border-radius:50%}
.cta-dots .g{background:radial-gradient(circle closest-side,var(--green) 0 60%,rgba(30,142,62,.3) 62% 100%)}
.cta-dots .y{background:radial-gradient(circle closest-side,var(--star) 0 60%,rgba(249,171,0,.36) 62% 100%)}
.cta-dots .here{box-shadow:0 0 0 2px #fff}
/* Bunnteksten er rundt 380 px høy på brede skjermer. På 1440×900 får båndet da 520 px, nok til at hele båndet står ved siste stopp. */
@media(min-width:900px) and (min-height:600px){
  .end-screen{min-height:100svh}
  .end-screen .cta-home{flex:1;display:flex;align-items:center}
  .cta-home>.wrap{width:100%;padding-top:40px;padding-bottom:40px}
}
/* På lavere vinduer er bånd og bunntekst til sammen høyere enn skjermen. Båndet får da et eget stopp, så det kan ses helt. */
@media(min-width:1024px) and (min-height:640px){
  .cta-home{scroll-snap-align:start;scroll-snap-stop:always}
}
@media(max-width:899px){
  .cta-home .wrap{grid-template-columns:minmax(0,1fr);padding-top:64px;padding-bottom:64px}
}
@media(max-width:640px){
  .cta-home .wrap{padding-top:48px;padding-bottom:48px}
  .cta-home h2{font-size:36px}
  /* Tre løfter på én rad også på 360 px. */
  .cta-promises{gap:6px 14px}
  .cta-promises li{gap:6px;font-size:15px}
  .cta-promises svg{width:18px;height:18px}
  .cta-home .btn-lg{width:100%}
  .cta-dots{display:none}
  /* Tre kort i bredden får ikke plass på 360 px uten at «kunder i måneden» brekker. Pakkene stables, med prisen til høyre. */
  .cta-plans{margin-top:28px;grid-template-columns:minmax(0,1fr);gap:8px}
  .cta-plans li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 12px;padding:12px 16px}
  .cta-plans strong{grid-column:2;grid-row:1/3}
  /* Lenken står på egen linje, så linjen over ikke får 44 px linjeavstand. */
  .cta-home .cta-price a{display:flex;width:max-content}
}

/* Mobil (Jan 14.11: «mobilvisning er langt under godkjent»). PC og nettbrett er uendret. */
/* «Prøv gratis» bare ett sted om gangen: den faste linjen glir ut når en annen knapp til prøven er synlig (sticky-cta.js).
   Jan 14.11: knappen i toppen blir stående på mobil, så linjen er skjult på første skjerm og ikke dekker kartet.
   I menypanelet er «Prøv gratis» første valg. */
.menu-panel a.menu-trial{gap:8px;font-weight:600}
.menu-trial svg{width:18px;height:18px}
@media(min-width:641px){.menu-panel a.menu-trial{display:none}}
@media(max-width:640px){
  /* Knappen i toppen blir stående på mobil (Jan 14.11) og får 44 px klikkflate. */
  .header-actions .btn-primary{height:44px}
  .header-actions .btn-primary.away{visibility:hidden}
  .sticky-cta{transition:transform .3s cubic-bezier(.2,.8,.2,1),visibility .3s}
  .sticky-cta.away{transform:translateY(110%);visibility:hidden}
  /* Toppen: overskrift, setning, stegene, så kortet med kartet, og knappen under. Ett innhold i HTML; rekkefølgen settes her. */
  /* Jan 14.11: «animasjonene kommer above the fold og verdien vises umiddelbart». På 390×664 står overskriften, setningen,
     stegene og hele kartet med alle fem radene over folden. Derfor strammere luft, 34 px overskrift og 44 px kartpunkter. */
  :is(.hero-home,.hero-trade){flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;padding-top:12px}
  :is(.hero-home,.hero-trade) .hero-copy{display:contents}
  .hero-home .h-hero,.hero-trade .h-page{order:1;font-size:34px}
  :is(.hero-home,.hero-trade) .lead{order:2;margin-top:8px;font-size:17px;line-height:24px}
  /* Fagsidene har to setninger. Den andre står under kortet på mobil, så hele kartet får plass over folden (Jan 14.11). */
  .hero-trade .lead-more{order:5;margin-top:16px}
  :is(.hero-home,.hero-trade) .hero-steps{order:3;margin-top:12px}
  :is(.hero-home,.hero-trade) .hero-visual{order:4;flex:none;margin-top:12px}
  .hero-card .card-head{min-height:48px}
  .hero-card .proof-map{padding:12px}
  .hero-card .grid25{grid-template-columns:repeat(5,44px);gap:8px;line-height:44px}
  .hero-card .grid25 i{height:44px}
  /* Kartet fyller kortets bredde, så hendelseskortet over det får plass til hele spørsmålet på én linje (Jan 14.11). */
  .hero-card .proof-map{align-items:stretch}
  .hero-card .grid25{justify-content:center}
  /* Fagsidene har lengre overskrift (opptil fire linjer). Strammere luft og 42 px kartpunkter, så hele kartet står over folden på 390×664. */
  .hero-trade{padding-top:6px}
  .hero-trade .h-page{line-height:1.075}
  .hero-trade .lead:not(.lead-more){margin-top:6px}
  .hero-trade .hero-steps{margin-top:10px}
  .hero-trade .hero-visual{margin-top:10px}
  .hero-trade .hero-card .grid25{grid-template-columns:repeat(5,42px);line-height:42px}
  .hero-trade .hero-card .grid25 i{height:42px}
  :is(.hero-home,.hero-trade) .hero-cta{order:6;margin-top:20px;padding-top:0}
  :is(.hero-home,.hero-trade) .hero-terms{order:7;margin-top:10px}
  .hero-home .hero-cta .btn:not(.btn-primary){display:none}
  /* Stegene i tre like kolonner: tallet øverst, teksten under, uten piler. */
  :is(.hero-home,.hero-trade) .hero-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;font-size:13px;line-height:18px}
  :is(.hero-home,.hero-trade) .hero-steps li{flex-direction:column;gap:6px;text-align:center}
  :is(.hero-home,.hero-trade) .hero-steps li>svg{display:none}
  /* Skjerm to: søkekortet rett etter overskriften og setningen, grunnene etterpå. */
  .problem-pack{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0}
  .problem-pack .problem-copy{display:contents}
  .problem-pack .eyebrow{order:1}
  .problem-pack .h-sec{order:2;margin-top:10px}
  .problem-pack .sub{order:3;margin-top:10px}
  .problem-pack .problem-visual{order:4;flex:none;margin-top:20px}
  .problem-pack .reasons{order:5;margin-top:28px}
  /* Løsningen og «Spørsmålet passer jobben» på fagsidene: kortet eller demoen bærer poenget og står rett etter overskriften. Forklaringen og punktene kommer etter. */
  :is(#slik,.show-one) .show-row{row-gap:0}
  :is(#slik,.show-one) .show-copy{display:contents}
  :is(#slik,.show-one) .show-copy>.show-no,:is(#slik,.show-one) .show-copy>.eyebrow{order:1}
  :is(#slik,.show-one) .show-copy>h2,:is(#slik,.show-one) .show-copy>h3{order:2;margin-top:10px}
  :is(#slik,.show-one) .show-visual{order:3;margin-top:20px}
  :is(#slik,.show-one) .show-copy>p:not(.show-no):not(.eyebrow){order:4;margin-top:20px}
  :is(#slik,.show-one) .show-copy>.show-points{order:5;margin-top:14px}
  :is(#slik,.show-one) .show-copy>.section-cta{order:6}
  /* Produktsidene: kortet i toppen kommer før knappen (Jan 14.11). */
  .hero-sub:not(.hero-trade){flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0}
  .hero-sub:not(.hero-trade) .hero-copy{display:contents}
  .hero-sub:not(.hero-trade) .eyebrow{order:1}
  .hero-sub:not(.hero-trade) .h-page{order:2;margin-top:12px}
  .hero-sub:not(.hero-trade) .lead{order:3;margin-top:12px}
  .hero-sub:not(.hero-trade) .hero-visual{order:4;flex:none;margin-top:20px}
  .hero-sub:not(.hero-trade) .hero-cta{order:5;margin-top:20px}
  /* Fagsidene: brødsmulene tar plass fra kartet på mobil. De står fortsatt i strukturerte data (BreadcrumbList). */
  .crumbs:has(+ .hero-trade){display:none}
  /* Egen flis med færre og tynnere veier, mest på tvers. */
  body.backdrop{background-image:url(/bakgrunnskart-mobil.svg);background-size:100% auto}
  /* Seksjonene følger innholdet på mobil, med 56 px luft over og under. */
  /* Jan 14.11 («fiks også alle de andre sidene»): gjelder nå alle sider, ikke bare forsiden. */
  .section,#slik .show-row,.split-center:has(+ .split-center),.split-center + .split-center{min-height:0;padding-top:56px;padding-bottom:56px}
  #slik{padding-top:0;padding-bottom:0}
  .hero-sub{min-height:0}
  /* Svarknappene i SMS-demoen var 40 px høye. Klikkflaten skal være minst 44 px. */
  .sms-buttons .chip{height:44px}
  /* Bunnteksten: «Reviews» la seg på egen rad under en kolonne med én lenke og etterlot et stort hull. Kolonnene står nå to og to. */
  .footer-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
  .footer-about{grid-column:1/-1}
  .footer-cols nav:first-of-type{grid-row:span 2}
}
@media(max-width:360px){:is(.hero-home,.hero-trade) .hero-steps{gap:4px;font-size:12px}.trade-head b{font-size:14px}}
/* På 320 px er tre like kolonner smalere enn «Lenken til Google». Kolonnene følger da teksten, med lik avstand mellom. */
@media(max-width:340px){:is(.hero-home,.hero-trade) .hero-steps{grid-template-columns:repeat(3,auto);justify-content:space-between;gap:0}}
/* Kartet får plass i kortet på 320 px med 40 px punkter. */
@media(max-width:340px){.hero-card .grid25{grid-template-columns:repeat(5,40px);line-height:40px}.hero-card .grid25 i{height:40px}}
@media(prefers-reduced-motion:reduce){.sticky-cta{transition:none}}

/* Fagsidene (Jan 14.11: «svært tydelig på verdien»). Kortet med jobbene i faget og spørsmålet appen sender etter hver av dem. */
.job-sms-rows>li{padding:14px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;border-top:.5px solid var(--line-in)}
.job-sms-rows>li:first-child{border-top:0}
.job-sms-rows b{font-size:15px;line-height:20px;font-weight:600;white-space:nowrap}
.job-sms-rows .bubble{max-width:100%;font-size:15px;line-height:22px}
.trade-others{margin-top:28px;display:flex;flex-direction:column;gap:10px}
.trade-others .trade-links{margin-top:0}
/* Bransjeoversikten: kortene følger innholdet og strekkes ikke til naboens høyde, og rutenettet står rett under innledningen. */
.trade-index .trade-grid{align-items:start}
.trade-index .trade-card{height:auto}
.section.trade-index{min-height:0;padding-top:0}
/* Fagsidene holder «Google-anmeldelser» samlet i overskriften (Safari på iPhone brakk ved bindestreken, Jan 14.11).
   Ordet får plass ned til 360 px; under det får det brekke, som på forsiden. */
@media(max-width:340px){.h-page .nowrap{white-space:normal}}

/* Toppen på forsiden: én kunde, én samtale, én anmeldelse (Jan 14.11: «det var litt mye som skjedde på en gang»).
   Alle delene tar plass fra start, så kortet har samme høyde i hvert steg av forløpet (home.js). */
.story-head{min-height:56px;padding:0 20px;display:flex;align-items:center;gap:10px;border-bottom:.5px solid var(--line-in);white-space:nowrap}
.story-head .tile{width:32px;height:32px;border-radius:8px}
.story-head b{font-size:15px;font-weight:650}
.story-who{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.story-thread{padding:20px}
.story-thread .bubble{font-size:15px;line-height:22px;max-width:84%}
.story-happy{align-self:flex-end;margin-top:-2px}
/* Hårstreken over anmeldelsen står hele tiden; selve anmeldelsen kommer til slutt. */
.story-review{padding:16px 20px 18px;border-top:.5px solid var(--line-in)}
.story-review-in{display:flex;align-items:flex-start;gap:12px}
.story-avatar{width:36px;height:36px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;font-size:15px;font-weight:650}
.story-review-text{min-width:0;display:flex;flex-direction:column;gap:2px}
.story-review-top{display:flex;align-items:center;gap:8px;font-size:15px;line-height:20px;white-space:nowrap}
.story-review-top b{font-weight:650}
.story-review .stars svg{width:16px;height:16px}
.story-quote{font-size:15px;line-height:22px;color:var(--ink)}
@media(max-width:640px){
  /* Hele kortet står over folden på 390×664. Litt tettere luft og 14 px i boblene på mobil. */
  .story-head{min-height:48px;padding:0 16px}
  .story-thread{padding:14px 16px;gap:6px}
  .story-thread .bubble{font-size:14px;line-height:20px;padding:8px 12px}
  .story-review{padding:12px 16px 14px}
}
/* På telefon får ikke jobben plass ved siden av «Jobben er ferdig». Navnet står, jobben faller bort. */
@media(max-width:440px){.story-job{display:none}}
/* PC: kortet bærer høyre kolonne, med større bobler og anmeldelse (Jan 14.11). Bredden er den samme som kartkortet hadde.
   Mobil beholder de mindre målene over. */
@media(min-width:641px){
  .story-thread{padding:20px 22px;gap:8px}
  .story-thread .bubble{font-size:16px;line-height:23px;padding:10px 14px}
  .story-happy{font-size:14px}
  .story-review{padding:18px 22px 22px}
  .story-review-in{gap:14px}
  .story-avatar{width:42px;height:42px;font-size:16px}
  .story-review-top{font-size:16px;line-height:23px}
  .story-review .stars svg{width:19px;height:19px}
  .story-quote{font-size:16px;line-height:24px}
}

/* Punkt 4 i Løsningen (Jan 14.11: «et punkt 4 som forklarer synligheten med det kartet vi hadde i hero før»). Tre rader viser veien opp; raden som svarer til kartet, er
   mørk, de andre dempet. Sterk prikk og nøytral tekst, ingen fargede flater. */
.map-rows{margin-top:4px;display:flex;flex-direction:column;gap:2px}
.map-rows li{display:flex;align-items:center;gap:10px;min-height:40px;font-size:17px;line-height:24px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;transition:color .3s ease}
.map-rows li b{font-weight:600}
.map-rows li.on{color:var(--ink)}
.map-rows .dot{width:10px;height:10px}
@media(max-width:640px){
  :is(#slik,.show-one) .show-copy>.map-rows{order:5;margin-top:14px}
  .map-rows li{font-size:16px;min-height:36px}
}
@media(prefers-reduced-motion:reduce){.map-rows li{transition:none}}
/* Lenken i siste SMS: lite lenkeikon og understreket tekst, uten oppdiktet adresse (Jan 14.11). */
.sms-link-text{display:inline-flex;align-items:center;gap:4px;color:var(--link);white-space:nowrap;vertical-align:bottom}
.sms-link-text svg{width:15px;height:15px;flex:none}
.sms-link-text u{text-underline-offset:2px}
@media(max-width:640px){
  /* Fem bobler skal stå over folden på 390×664: tettere luft og 13 px i boblene på mobil, så hver boble står på én linje. */
  .story-head{min-height:44px}
  .story-thread{padding:10px 14px;gap:5px}
  .story-thread .bubble{font-size:13px;line-height:18px;padding:7px 11px;max-width:100%}
  .story-happy{font-size:12px;line-height:16px;margin-top:-1px}
  .story-review{padding:10px 14px 12px}
  .story-avatar{width:32px;height:32px;font-size:14px}
  .story-review-top{font-size:14px;line-height:20px}
  .story-quote{font-size:14px;line-height:20px}
}
@media(max-width:640px){
  /* Fem bobler og anmeldelsen skal stå over folden på 390×664 (Jan 14.11). Stegene står derfor under kortet på mobil:
     overskrift, ingress, kort, steg, knapper. */
  .hero-home .hero-steps{order:5;margin-top:14px}
}