/* ============================================================
   Mustvedt Sentinel — shared marketing design system (2026, hybrid)
   Single token source. Light base + tokenised dark surfaces.
   Tokens → base → components. No hardcoded values in components.
   ============================================================ */
:root{
  /* ── Surfaces (light base) — kjølig nøytral (2026 enterprise-security) ── */
  --surface-0:#f2f4f7;        /* page base */
  --surface-1:#ffffff;        /* card */
  --surface-2:#f7f9fc;        /* raised / subtle fill */
  --nav-bg:244,246,250;       /* rgb of base, for frosted nav tint */
  /* back-compat aliases */
  --ink:var(--surface-0); --ink-2:var(--surface-1); --panel:var(--surface-1); --panel-2:var(--surface-2);

  /* ── Dark surfaces (bands / hero) ── */
  --d-0:#0a1730;              /* deepest */
  --d-1:#0f244a;              /* mid */
  --d-2:#17386b;              /* top / elevated */
  --d-surface:rgba(255,255,255,.045);
  --d-surface-2:rgba(255,255,255,.07);
  --d-line:rgba(255,255,255,.11);
  --d-line-2:rgba(255,255,255,.18);
  --d-text:#e8edf6;           /* brightest text on dark */
  --d-body:#c2cfe6;           /* body text on dark */
  --d-muted:#9fb1d2;          /* muted on dark */
  --d-faint:#8fa6cd;          /* faint on dark */
  --d-accent:#86acff;         /* accent tint legible on dark */

  /* ── Text ── */
  --text:#0f1b34; --muted:#4a5878; --faint:#8592ab;

  /* ── Accent (ONE) + semantic signals ── */
  --accent:#1e40af; --accent-strong:#13307d; --accent-bright:#2b63e6;
  --success:#0e9f6e; --success-deep:#047857;   /* positive signal only */
  --purple:#6d28d9; --amber:#b45309; --red:#dc2626;
  /* back-compat aliases */
  --blue:var(--accent); --blue-deep:var(--accent-strong); --green:var(--success); --green-deep:var(--success-deep);

  /* ── Lines ── */
  --line:rgba(15,27,52,.10); --line-2:rgba(15,27,52,.18);

  /* ── Spacing scale (4 / 8) ── */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

  /* ── Radius scale ── */
  --r-sm:10px; --r:12px; --r-md:16px; --r-lg:20px; --r-xl:28px; --r-full:999px;

  /* ── Shadows ── */
  --sh-1:0 1px 2px rgba(15,27,52,.05), 0 2px 6px -2px rgba(15,27,52,.06);
  --sh-2:0 8px 24px -12px rgba(15,27,52,.18);
  --sh-3:0 26px 64px -38px rgba(15,27,52,.22);
  --sh-accent:0 8px 30px -8px rgba(30,64,175,.45);
  --sh-success:0 8px 30px -10px rgba(14,159,110,.45);
  --sh-dark:0 44px 90px -34px rgba(0,0,0,.6);

  /* ── Type ── */
  --display:'Schibsted Grotesk','DM Sans',sans-serif; --body:'DM Sans',sans-serif; --mono:'DM Mono',monospace;

  /* ── Layout ── */
  --maxw:1180px;
  /* legacy radius alias (kept so any stray var(--r-lg/...) resolves) */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--surface-0); color:var(--text); font-family:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative}
body::before{content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 50% at 78% -5%, rgba(30,64,175,.10), transparent 60%),
    radial-gradient(50% 45% at 8% 8%, rgba(14,159,110,.07), transparent 55%),
    radial-gradient(60% 60% at 50% 110%, rgba(109,40,217,.05), transparent 60%),
    var(--surface-0);
}
body::after{content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.18;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--s-5)}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
.mono{font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint)}

/* ===== NAV ===== */
nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:rgba(244,246,250,.78); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:68px; max-width:var(--maxw); margin:0 auto; padding:0 var(--s-5)}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:700; font-size:1.12rem; letter-spacing:-.01em; color:var(--text)}
.brand .mark{width:36px;height:36px;display:block;object-fit:contain}
.nav-menu{display:flex; align-items:center; gap:30px}
.nav-links{display:flex; gap:30px; align-items:center}
.nav-links a{font-size:.92rem; color:var(--muted); transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text)}
.nav-cta{display:flex; gap:var(--s-3); align-items:center}
.btn{font-family:var(--body); font-weight:600; font-size:.92rem; border-radius:var(--r); padding:11px 20px; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .2s, background .2s; display:inline-flex; align-items:center; gap:var(--s-2); white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-bright)); color:#fff; box-shadow:var(--sh-accent)}
.btn-ghost{background:var(--surface-1); color:var(--text); border-color:var(--line-2)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-lg{padding:15px 28px; font-size:1rem; border-radius:var(--r)}
.btn-block{width:100%; justify-content:center}
.btn-green{background:linear-gradient(135deg,var(--success),var(--success-deep)); color:#04140d; box-shadow:var(--sh-success)}
.nav-toggle{display:none; background:none; border:0; color:var(--text); cursor:pointer}

/* ===== HERO ===== */
.hero{position:relative; padding:clamp(56px,9vw,120px) 0 var(--s-8)}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:54px; align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:10px; padding:7px 14px; border:1px solid var(--line-2); border-radius:var(--r-full); background:var(--surface-1); margin-bottom:26px}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--success); box-shadow:0 0 0 4px rgba(14,159,110,.18); animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.eyebrow span{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
h1{font-family:var(--display); font-weight:800; font-size:clamp(2.6rem,6.4vw,4.7rem); line-height:.98; letter-spacing:-.03em; margin-bottom:22px}
h1 .grad{background:linear-gradient(115deg,var(--accent) 10%,var(--success) 90%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.lead{font-size:clamp(1.05rem,1.7vw,1.28rem); color:var(--muted); max-width:34ch; margin-bottom:30px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.hero-meta{margin-top:22px; font-size:.86rem; color:var(--faint)}
.hero-meta strong{color:var(--muted); font-weight:500}

/* free-check (hero) */
.hero-check{display:flex; gap:var(--s-2); margin-bottom:20px; max-width:460px}
.hero-check input{flex:1; padding:14px 16px; border:1px solid var(--line-2); border-radius:var(--r); background:#fff; color:var(--text); font:inherit; font-size:.95rem}
.hero-check input::placeholder{color:var(--faint)}
.hero-check input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(30,64,175,.15)}
.hero-check button{padding:14px 22px; border:0; border-radius:var(--r); background:linear-gradient(135deg,var(--accent),var(--accent-bright)); color:#fff; font:inherit; font-weight:600; cursor:pointer; white-space:nowrap; transition:transform .15s}
.hero-check button:hover{transform:translateY(-2px)} .hero-check button:disabled{opacity:.6; cursor:default; transform:none}
.hero-check-result{max-width:460px; max-height:0; overflow:hidden; opacity:0; transition:max-height .4s, opacity .4s, margin .4s; font-size:.9rem; color:var(--muted)}
.hero-check-result.show{max-height:340px; opacity:1; margin-bottom:20px; padding:15px 17px; border-radius:var(--r); border:1px solid var(--line)}
.hero-check-result.is-warn{background:rgba(180,83,9,.06); border-color:rgba(180,83,9,.25)}
.hero-check-result.is-ok{background:rgba(14,159,110,.07); border-color:rgba(14,159,110,.28)}
.hero-check-result strong{color:var(--text)}
.hcc{display:flex; gap:16px; margin-top:11px; flex-wrap:wrap}
.hcc a{font-weight:600; color:var(--accent); font-size:.86rem} .hcc a.g{color:var(--muted)}

/* live signal feed */
.feed{position:relative; border:1px solid var(--line); border-radius:var(--r-md); background:#fff; overflow:hidden; box-shadow:var(--sh-3)}
.feed-head{display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--line); background:var(--surface-2)}
.feed-head .live{display:flex; align-items:center; gap:var(--s-2); font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--success)}
.feed-head .live .d{width:8px;height:8px;border-radius:50%;background:var(--success);animation:pulse 1.6s infinite}
.feed-head .src{font-family:var(--mono); font-size:.66rem; color:var(--faint)}
.feed-view{height:330px; overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.feed-track{display:flex; flex-direction:column; animation:scrollfeed 26s linear infinite}
.feed:hover .feed-track{animation-play-state:paused}
@keyframes scrollfeed{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.ev{display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:center; padding:14px 18px; border-bottom:1px solid rgba(15,27,52,.07)}
.ev .ic{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;font-size:15px}
.ev .ic svg{width:17px;height:17px}
.ev .ic.b{background:rgba(30,64,175,.12); color:var(--accent)} .ev .ic.g{background:rgba(14,159,110,.12); color:var(--success)}
.ev .ic.p{background:rgba(109,40,217,.12); color:var(--purple)} .ev .ic.a{background:rgba(180,83,9,.12); color:var(--amber)}
.ev .t{font-size:.9rem; font-weight:500}
.ev .t small{display:block; color:var(--faint); font-weight:400; font-size:.78rem; margin-top:1px}
.ev .ts{font-family:var(--mono); font-size:.66rem; color:var(--faint)}

/* ===== SECTIONS ===== */
section{padding:clamp(60px,8vw,108px) 0}
.sec-head{max-width:680px; margin-bottom:var(--s-7)}
.sec-eyebrow{font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; display:flex; gap:10px}
.sec-eyebrow .num{color:var(--faint)}
h2{font-family:var(--display); font-weight:700; font-size:clamp(1.9rem,4vw,3rem); line-height:1.02; letter-spacing:-.025em; margin-bottom:16px}
h3{font-family:var(--display); font-weight:700}
.sec-desc{color:var(--muted); font-size:1.06rem; max-width:60ch}
.prose{max-width:760px; color:var(--muted)}
.prose h2{margin-top:36px} .prose h3{font-size:1.2rem; margin:26px 0 10px; color:var(--text)}
.prose p{margin-bottom:14px} .prose ul{margin:0 0 14px 22px} .prose li{margin-bottom:7px} .prose a{color:var(--accent); font-weight:600}

/* reveal */
[data-reveal]{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1; transform:none}
[data-reveal][data-d="1"]{transition-delay:.08s}[data-reveal][data-d="2"]{transition-delay:.16s}[data-reveal][data-d="3"]{transition-delay:.24s}

/* pillars bento */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5)}
.pillar{position:relative; border:1px solid var(--line); border-radius:var(--r-md); padding:28px; background:var(--surface-1); overflow:hidden; transition:border-color .3s, transform .3s, box-shadow .3s}
.pillar:hover{transform:translateY(-4px); border-color:var(--line-2); box-shadow:var(--sh-2)}
.pillar::before{content:''; position:absolute; inset:0 0 auto 0; height:3px; background:var(--c)}
.pillar .glow{position:absolute; top:-40%; right:-30%; width:240px; height:240px; border-radius:50%; background:var(--c); filter:blur(80px); opacity:.14}
.pillar .pi{width:46px;height:46px;border-radius:var(--r);display:grid;place-items:center;border:1px solid var(--line-2);background:var(--surface-2); margin-bottom:18px; color:var(--c)}
.pillar .pi svg{width:22px;height:22px}
.pillar h3{font-size:1.35rem; letter-spacing:-.01em; margin-bottom:9px}
.pillar > p{color:var(--muted); font-size:.95rem; margin-bottom:18px}
.pillar ul{list-style:none; display:flex; flex-direction:column; gap:9px}
.pillar li{font-size:.86rem; color:var(--muted); padding-left:22px; position:relative; line-height:1.45}
.pillar li::before{content:''; position:absolute; left:0; top:7px; width:11px;height:11px; border-radius:3px; background:var(--c); opacity:.5}
.pillar-blue{--c:var(--accent)} .pillar-green{--c:var(--success)} .pillar-purple{--c:var(--purple)}

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); counter-reset:s}
.step{border:1px solid var(--line); border-radius:var(--r-md); padding:26px; background:var(--surface-1); position:relative}
.step::before{counter-increment:s; content:"0" counter(s); position:absolute; top:22px; right:24px; font-family:var(--mono); font-size:.8rem; color:var(--faint)}
.step h3{font-size:1.2rem; margin:14px 0 8px}
.step p{color:var(--muted); font-size:.92rem}
.step .si{width:42px;height:42px;border-radius:var(--r);display:grid;place-items:center;background:rgba(30,64,175,.10); color:var(--accent)}
.step .si svg{width:20px;height:20px}

/* tools */
.tools-group{margin-bottom:34px}
.tools-group--pluss{position:relative; border:1px solid var(--line-2); border-radius:var(--r-lg); padding:clamp(20px,3vw,30px); background:linear-gradient(180deg, rgba(30,64,175,.05), var(--surface-1)); box-shadow:var(--sh-2); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.tools-group--pluss .tg-head{border-bottom-color:var(--line-2)}
.tg-head{display:flex; align-items:baseline; gap:14px; margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid var(--line)}
.tg-head h3{font-size:1.15rem}
.tg-head .cnt{font-family:var(--mono); font-size:.72rem; color:var(--faint); letter-spacing:.1em}
.pluss-badge{font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; background:linear-gradient(135deg,var(--accent),var(--success)); color:#fff; padding:3px 8px; border-radius:6px; font-weight:500}
.tools-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-3)}
.tool{display:flex; gap:var(--s-3); align-items:flex-start; padding:15px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-1); transition:background .25s, transform .25s, border-color .25s, box-shadow .25s}
.tool:hover{background:var(--surface-2); transform:translateY(-3px); border-color:var(--line-2); box-shadow:var(--sh-2)}
.tool .ti{width:36px;height:36px;flex:0 0 auto;border-radius:var(--r-sm);display:grid;place-items:center;background:rgba(30,64,175,.09);color:var(--accent)}
.tool .ti svg{width:19px;height:19px}
.tool .tn{font-weight:600; font-size:.9rem; margin-bottom:2px}
.tool .td{font-size:.76rem; color:var(--faint); line-height:1.4}
.rationale{color:var(--muted); font-size:.92rem; max-width:75ch; margin-bottom:18px; padding:16px 18px; border-left:2px solid var(--success); background:rgba(14,159,110,.05); border-radius:0 var(--r-sm) var(--r-sm) 0}
.rationale strong{color:var(--text)}

/* alert example */
.alert-wrap{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5); align-items:start}
.alert-carousel{position:relative; display:grid; grid-template-areas:"stack"}
.alert-carousel .alert-card{grid-area:stack; opacity:0; visibility:hidden; transform:translateY(10px) scale(.992); transition:opacity .55s ease, transform .55s ease, visibility 0s linear .55s; pointer-events:none}
.alert-carousel .alert-card.is-active{opacity:1; visibility:visible; transform:none; pointer-events:auto; transition:opacity .55s ease, transform .55s ease}
.alert-dots{margin-top:20px}
.alert-dots .hero-dot{background:rgba(15,27,52,.16)}
.alert-dots .hero-dot:hover{background:rgba(15,27,52,.4)}
.alert-dots .hero-dot.is-active{background:var(--accent); width:30px}
.alert-dots .hero-dot:focus-visible{outline-color:var(--accent)}
@media(prefers-reduced-motion:reduce){ .alert-carousel .alert-card{transition:opacity .2s ease} }
.alert-card.crit .alert-top{background:var(--red)}
.alert-card.crit .alert-badge{color:var(--red); background:rgba(220,38,38,.1)}
.alert-card.ok .alert-top{background:var(--success)}
.alert-card.ok .alert-badge{color:var(--success); background:rgba(14,159,110,.12)}
.alert-card{border:1px solid var(--line); border-radius:var(--r-md); background:#fff; overflow:hidden; box-shadow:var(--sh-3)}
.alert-top{height:4px;background:var(--amber)}
.alert-pad{padding:22px}
.alert-badge{display:inline-flex; gap:7px; align-items:center; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); background:rgba(180,83,9,.12); padding:5px 11px; border-radius:var(--r-full); margin-bottom:14px}
.alert-card h4{font-family:var(--display); font-weight:700; font-size:1.22rem; margin-bottom:10px}
.alert-card p{color:var(--muted); font-size:.9rem; margin-bottom:14px}
.alert-row{display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid var(--line); font-size:.84rem}
.alert-row span:first-child{color:var(--faint)} .alert-row span:last-child{font-family:var(--mono); color:var(--text)}

/* stats */
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-5)}
.stat{border:1px solid var(--line); border-radius:var(--r-md); padding:26px 24px; background:var(--surface-1); text-align:left; display:flex; flex-direction:column; justify-content:center; gap:12px; min-height:148px}
.stat .n{font-family:var(--display); font-weight:800; font-size:clamp(2.1rem,4.2vw,3rem); line-height:1; letter-spacing:-.03em; white-space:nowrap; background:linear-gradient(135deg,var(--text),var(--accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.stat .n .u{font-size:.46em; font-weight:700; margin-left:.16em; letter-spacing:-.01em}
.stat .l{color:var(--muted); font-size:.86rem; margin-top:0}

/* testimonials */
.tgrid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5)}
.quote{border:1px solid var(--line); border-radius:var(--r-md); padding:28px; background:var(--surface-1)}
.quote-logo{height:34px; margin-bottom:18px} .quote-logo img{height:34px; width:auto; display:block}
.quote-logo a{display:inline-flex; opacity:.9; transition:opacity .15s ease} .quote-logo a:hover{opacity:1}
.quote p{font-size:1.04rem; color:var(--text); line-height:1.6; margin-bottom:20px; font-weight:500}
.qauthor{display:flex; align-items:center; gap:13px}
.qn{font-weight:600; font-size:.92rem} .qr{color:var(--faint); font-size:.8rem}

/* pricing */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5)}
.price{border:1px solid var(--line); border-radius:var(--r-md); padding:28px; background:var(--surface-1); display:flex; flex-direction:column; position:relative; overflow:hidden}
.price-hero{margin:-28px -28px 22px; overflow:hidden; background:var(--surface-2); border-bottom:1px solid var(--line)}
.price-hero img{width:100%; height:168px; object-fit:cover; display:block}
@media(max-width:560px){ .price-hero img{height:150px} }
.price.feat{border-color:rgba(30,64,175,.4); background:linear-gradient(180deg,rgba(30,64,175,.07),var(--surface-1)); box-shadow:0 26px 70px -46px rgba(30,64,175,.30)}
.price .pe{font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:8px}
.price h3{font-size:1.5rem; margin-bottom:14px}
.price .amt{display:flex; align-items:baseline; gap:var(--s-2); margin-bottom:14px}
.price .amt .was{text-decoration:line-through; color:var(--faint); font-size:.95rem}
.price .amt strong{font-family:var(--display); font-weight:800; font-size:2.4rem; letter-spacing:-.02em}
.price .amt small{color:var(--muted)}
.price > p{color:var(--muted); font-size:.9rem; margin-bottom:22px; flex:1}
.price .pt{font-size:.76rem; color:var(--faint); margin-top:12px; text-align:center}

/* trust */
.trust{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4)}
.trust-item{text-align:center; padding:22px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-1)}
.trust-item .ic{font-size:24px; color:var(--accent); display:inline-flex} .trust-item .ic svg{width:24px;height:24px}
.trust-item .tl{font-weight:600; font-size:.9rem; margin:9px 0 3px} .trust-item .tdd{color:var(--faint); font-size:.76rem}

/* faq */
.faq{max-width:780px}
details{border:1px solid var(--line); border-radius:var(--r); background:var(--surface-1); margin-bottom:10px; overflow:hidden}
details[open]{border-color:var(--line-2)}
summary{padding:18px 22px; font-weight:600; font-size:1rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px}
summary::-webkit-details-marker{display:none}
summary::after{content:'+'; font-family:var(--mono); color:var(--accent); font-size:1.3rem; transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details .a{padding:0 22px 20px; color:var(--muted); font-size:.93rem}

/* final cta */
.final{position:relative; border:1px solid var(--line-2); border-radius:var(--r-xl); padding:clamp(40px,6vw,72px); text-align:center; background:linear-gradient(180deg,rgba(30,64,175,.10),rgba(14,159,110,.05)); overflow:hidden}
.final h2{font-size:clamp(2rem,5vw,3.4rem)}
.final p{color:var(--muted); max-width:54ch; margin:14px auto 30px; font-size:1.08rem}
.final .hero-cta{justify-content:center}

/* footer */
footer{border-top:1px solid var(--line); padding:54px 0 40px; margin-top:40px}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--s-6)}
.foot-brand{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:1.2rem; margin-bottom:12px}
.foot-brand img{width:30px;height:30px}
footer p{color:var(--faint); font-size:.86rem; max-width:42ch}
.foot-col h4{font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--faint); margin-bottom:14px; font-family:var(--mono)}
.foot-col a{display:block; color:var(--muted); font-size:.9rem; margin-bottom:9px; transition:color .2s}
.foot-col a:hover{color:var(--text)}
.foot-bot{margin-top:36px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:var(--faint); font-size:.8rem; flex-wrap:wrap; gap:10px}

.proto-flag{position:fixed; bottom:16px; left:16px; z-index:80; font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; background:rgba(180,83,9,.12); color:var(--amber); border:1px solid rgba(180,83,9,.3); padding:7px 12px; border-radius:var(--r-full); backdrop-filter:blur(8px)}

/* a11y */
.skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--accent); color:#fff; padding:11px 18px; border-radius:0 0 var(--r) 0; font-weight:600}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; scroll-behavior:auto !important}
  .feed-track{animation:none !important}
  [data-reveal]{opacity:1 !important; transform:none !important}
}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:38px} .feed-view{height:280px}
  .pillars,.steps,.stats-grid,.price-grid,.tgrid,.alert-wrap{grid-template-columns:1fr}
  .tools-grid,.trust{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-menu{display:none} .nav-toggle{display:block}
  /* Hamburger-dropdown: lenker + CTA-er stablet i ett panel */
  nav.nav-open .nav-menu{
    display:flex; flex-direction:column; align-items:stretch; gap:14px;
    position:absolute; top:calc(100% + 6px);
    right:max(16px, env(safe-area-inset-right)); left:max(16px, env(safe-area-inset-left));
    background:#fff; padding:16px; border-radius:16px;
    border:1px solid var(--line-2); box-shadow:var(--sh-3);
  }
  nav.nav-open .nav-links{flex-direction:column; align-items:stretch; gap:2px}
  nav.nav-open .nav-links a{padding:11px 12px; border-radius:10px; min-height:44px; display:flex; align-items:center; font-size:1rem}
  nav.nav-open .nav-links a:hover,nav.nav-open .nav-links a[aria-current="page"]{background:var(--surface-2)}
  nav.nav-open .nav-cta{flex-direction:column; gap:10px; border-top:1px solid var(--line); padding-top:14px}
  nav.nav-open .nav-cta .btn{width:100%; justify-content:center; min-height:48px}
}

/* ===== BLOG ===== */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5)}
.blog-card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-1); overflow:hidden; transition:transform .25s, border-color .25s, box-shadow .25s; color:inherit}
.blog-card:hover{transform:translateY(-4px); border-color:var(--line-2); box-shadow:var(--sh-2)}
.bc-top{padding:22px 22px 0; display:flex; align-items:center; gap:11px}
.bc-icon{width:38px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center;font-size:18px;background:var(--surface-2);border:1px solid var(--line); color:var(--c,var(--accent))}
.bc-icon svg{width:19px;height:19px}
.bc-tag{font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--c,var(--accent)); font-weight:500}
.bc-body{padding:15px 22px 22px; display:flex; flex-direction:column; flex:1}
.blog-card h3{font-size:1.16rem; line-height:1.22; margin-bottom:10px; letter-spacing:-.01em}
.bc-ex{color:var(--muted); font-size:.9rem; flex:1; margin-bottom:16px}
.bc-meta{font-family:var(--mono); font-size:.7rem; color:var(--faint); letter-spacing:.04em}

/* ===== ARTICLE ===== */
.article-head{max-width:760px; margin:0 auto; text-align:center}
.article-meta{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--faint); text-transform:uppercase; margin-bottom:18px; display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap}
.article-meta .tg{color:var(--accent)}
.article-body{max-width:760px; margin:36px auto 0; color:var(--muted); font-size:1.04rem; line-height:1.75}
.article-body h2{font-family:var(--display); color:var(--text); font-size:1.55rem; letter-spacing:-.02em; margin:36px 0 14px}
.article-body h3{font-family:var(--display); color:var(--text); font-size:1.2rem; margin:26px 0 10px}
.article-body p{margin-bottom:16px}
.article-body ul,.article-body ol{margin:0 0 16px 22px} .article-body li{margin-bottom:8px}
.article-body a{color:var(--accent); font-weight:600}
.article-body strong{color:var(--text)}
.article-body figure{margin:26px 0} .article-body img{border-radius:var(--r-md); border:1px solid var(--line)}
.article-body code{font-family:var(--mono); font-size:.86em; background:var(--surface-2); padding:2px 6px; border-radius:6px; border:1px solid var(--line)}
@media(max-width:900px){ .blog-grid{grid-template-columns:1fr} }

/* ===== LEGAL PAGES ===== */
.last-updated{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:24px}
.toc{border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2); padding:20px 24px; margin-bottom:34px}
.toc-title{font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:12px}
.toc ul{list-style:none; margin:0; columns:2; column-gap:24px}
.toc li{margin-bottom:7px} .toc a{color:var(--muted); font-size:.9rem; font-weight:500} .toc a:hover{color:var(--accent)}
.contact-block{border-left:3px solid var(--accent); background:var(--surface-2); padding:16px 18px; border-radius:0 var(--r-sm) var(--r-sm) 0; margin:16px 0; font-size:.95rem; line-height:1.7; color:var(--text)}
.info-box{background:rgba(30,64,175,.06); border:1px solid rgba(30,64,175,.2); border-radius:var(--r); padding:16px 18px; margin:18px 0; font-size:.95rem; color:var(--text)}
.data-table{width:100%; border-collapse:collapse; margin:18px 0; font-size:.9rem}
.data-table th{text-align:left; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding:10px 12px; border-bottom:2px solid var(--line)}
.data-table td{padding:11px 12px; border-bottom:1px solid var(--line); color:var(--muted); vertical-align:top}
.data-table td strong{color:var(--text)}
@media(max-width:640px){ .toc ul{columns:1} }

/* ===== Dark contrast bands (break up the light flow, add depth) ===== */
.band-dark{
  position:relative;
  background:radial-gradient(125% 130% at 50% -25%, var(--d-2) 0%, var(--d-1) 42%, var(--d-0) 100%);
  color:var(--d-body);
  border-top:1px solid var(--d-line); border-bottom:1px solid var(--d-line);
  overflow:hidden;
}
.band-dark::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(48% 70% at 88% 8%, rgba(43,99,230,.20), transparent 60%),
    radial-gradient(40% 60% at 6% 100%, rgba(14,159,110,.14), transparent 60%);
}
.band-dark::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
}
.band-dark .wrap{position:relative; z-index:1}
.band-dark .sec-eyebrow{color:var(--d-faint)}
.band-dark .sec-eyebrow .num{color:var(--success)}
.band-dark h2{color:#fff}
.band-dark .sec-desc{color:var(--d-muted)}
/* stat cards on dark */
.band-dark .stat{background:var(--d-surface); border-color:var(--d-line); backdrop-filter:blur(2px)}
.band-dark .stat .n{background:linear-gradient(135deg,#ffffff 0%,var(--d-accent) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.band-dark .stat .l{color:var(--d-muted)}
/* final-CTA on dark */
.band-dark .final{background:var(--d-surface); border-color:var(--d-line-2)}
.band-dark .final h2{color:#fff}
.band-dark .final p{color:var(--d-muted)}
.band-dark .final .sec-eyebrow{justify-content:center}
.band-dark .btn-ghost,.hero-dark .btn-ghost{background:var(--d-surface-2); color:var(--d-text); border-color:var(--d-line-2)}
.band-dark .btn-ghost:hover,.hero-dark .btn-ghost:hover{background:rgba(255,255,255,.13)}

/* ===== Dark hero variant ===== */
.hero-dark{
  background:radial-gradient(120% 115% at 72% -10%, var(--d-2) 0%, var(--d-1) 46%, var(--d-0) 100%);
  border-bottom:1px solid var(--d-line);
  overflow:hidden;
}
.hero-dark::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(42% 62% at 92% -5%, rgba(43,99,230,.24), transparent 60%),
    radial-gradient(40% 55% at -2% 92%, rgba(14,159,110,.14), transparent 60%);
}
.hero-dark::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.45;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 60% 22%,#000,transparent 78%);
  mask-image:radial-gradient(circle at 60% 22%,#000,transparent 78%);
}
.hero-dark .wrap,.hero-dark .hero-grid{position:relative; z-index:1}
.hero-dark .eyebrow{background:var(--d-surface); border-color:var(--d-line-2); color:var(--d-body)}
.hero-dark .eyebrow span,.band-dark .eyebrow span{color:var(--d-body)}
.hero-dark h1{color:#fff}
.hero-dark .lead{color:var(--d-muted)}
.hero-dark .hero-meta{color:var(--d-faint)}
.hero-dark .hero-meta strong{color:var(--d-text); font-weight:600}

/* ===== Hero carousel ===== */
.hero-carousel{position:relative; display:grid; grid-template-areas:"stack"}
.hero-slide{grid-area:stack; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .55s ease, transform .55s ease, visibility 0s linear .55s; pointer-events:none}
.hero-slide.is-active{opacity:1; visibility:visible; transform:none; pointer-events:auto; transition:opacity .55s ease, transform .55s ease}
.hero-dots{display:flex; gap:10px; justify-content:center; margin-top:34px; position:relative; z-index:1}
.hero-dot{width:10px; height:10px; border-radius:var(--r-full); border:0; padding:0; cursor:pointer; background:rgba(255,255,255,.25); transition:width .25s ease, background .25s ease}
.hero-dot:hover{background:rgba(255,255,255,.5)}
.hero-dot.is-active{background:#fff; width:30px}
.hero-dot:focus-visible{outline:2px solid #fff; outline-offset:3px}
@media(prefers-reduced-motion:reduce){ .hero-slide{transition:opacity .2s ease} }

/* App slide (mobile) */
.report-preview-list{list-style:none; padding:0; margin:24px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:11px 22px; max-width:none}
.report-preview-list li{position:relative; padding-left:26px; color:var(--d-body); font-size:.95rem; line-height:1.4}
.report-preview-list li::before{content:'✓'; position:absolute; left:0; top:-1px; color:var(--success); font-weight:800}
.app-phone-wrap{display:flex; flex-direction:column; align-items:center; gap:18px; justify-self:center; width:100%}
.app-phone{position:relative; width:248px; max-width:72%; border-radius:36px; padding:11px; background:linear-gradient(160deg,#22324f,var(--d-0)); box-shadow:var(--sh-dark), inset 0 0 0 1px rgba(255,255,255,.09)}
.app-phone img{width:100%; height:auto; border-radius:27px; display:block}
.app-phone-link{display:block; transition:transform .3s ease}
.app-phone-link:hover{transform:translateY(-4px)}
.app-phone-badge-link img{height:52px; width:auto}

/* ===== Hero status-konsoll (domene-helse + trusler stoppet) ===== */
.status-card{border:1px solid var(--line); border-radius:var(--r-md); background:#fff; overflow:hidden; box-shadow:var(--sh-3)}
.sc-head{display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--surface-2)}
.sc-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(14,159,110,.16);animation:pulse 1.8s infinite;flex:0 0 auto}
.sc-domain{font-family:var(--mono); font-weight:500; font-size:.86rem; color:var(--text)}
.sc-live{margin-left:auto; font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.sc-health{display:flex; gap:24px; align-items:center; padding:24px 20px}
.sc-grade{display:flex; flex-direction:column; align-items:center; gap:8px; flex:0 0 auto}
.sc-ring{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--success) calc(var(--p,90)*1%), var(--line) 0)}
.sc-ring::before{content:'';position:absolute;inset:7px;border-radius:50%;background:#fff}
.sc-grade-letter{position:relative;font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:-.02em;color:var(--success-deep)}
.sc-ring-cap{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--faint)}
.sc-metrics{flex:1;display:flex;flex-direction:column;gap:11px;min-width:0}
.sc-metric{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.84rem;color:var(--muted)}
.sc-metric i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.sc-metric i.ok{background:var(--success)}
.sc-metric i.warn{background:var(--amber)}
.sc-threats{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:16px 20px 18px;border-top:1px solid var(--line);background:var(--surface-2)}
.sc-n{font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:-.03em;line-height:1;color:var(--text)}
.sc-l{font-size:.78rem;color:var(--faint);margin-top:4px}
.sc-spark{width:124px;height:40px;flex:0 0 auto}
.sc-spark polyline{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 4px 8px rgba(30,64,175,.25))}
@media(max-width:480px){ .sc-spark{display:none} }

/* ============================================================
   2026 WOW-LIFT LAYER — design-agent synthesis (typo+depth+motion+layout)
   Appended overrides/additions. Cascade: later wins. Backups: *.bak-*
   ============================================================ */
:root{
  /* C1 — layered, tinted elevation (ambient+key) */
  --sh-1:0 1px 1px rgba(15,27,52,.04), 0 2px 4px -1px rgba(15,27,52,.06), 0 4px 10px -3px rgba(15,27,52,.05);
  --sh-2:0 1px 2px rgba(15,27,52,.05), 0 6px 16px -6px rgba(15,27,52,.12), 0 14px 32px -14px rgba(15,27,52,.16);
  --sh-3:0 2px 4px rgba(15,27,52,.05), 0 14px 34px -16px rgba(15,27,52,.16), 0 34px 72px -40px rgba(15,27,52,.24);
  --sh-hover:0 2px 4px rgba(15,27,52,.05), 0 12px 26px -10px rgba(15,27,52,.16), 0 28px 56px -28px rgba(15,27,52,.22);
}
html{font-optical-sizing:auto}

/* T1/T8 — tabular figures on every data point (no digit jitter) */
.stat .n,.sc-n,.sc-grade-letter,.sc-ring-cap,.ev .ts,.price .amt strong,.alert-row span:last-child{font-variant-numeric:tabular-nums}

/* T2 — display H1: optical, tighter leading, balanced rag */
h1{line-height:.95; letter-spacing:-.035em; text-wrap:balance}

/* T3 — mono micro-labels = instrument readout */
.stat .l{font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; line-height:1.45}
.sc-l{font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase}

/* T5 — weight-driven emphasis (variable font) */
.lead{font-weight:430}
.hero-dark .lead{color:var(--d-body)}
.prose strong,.article-body strong{font-weight:650}

/* T7 — editorial pull-quotes + spec-sheet pricing unit + measure */
.quote p{font-family:var(--display); font-weight:500; font-size:clamp(1.12rem,1.6vw,1.32rem); line-height:1.4; letter-spacing:-.01em; max-width:48ch}
.price .amt small{font-family:var(--mono); font-size:.72rem; letter-spacing:.02em; color:var(--muted)}
details .a{max-width:68ch}

/* C2 — top-light inner highlight + elevation on raised surfaces */
.pillar,.stat,.quote,.price,.step,.blog-card,.trust-item,.tool{box-shadow:inset 0 1px 0 rgba(255,255,255,.7), var(--sh-1)}
.feed,.alert-card,.status-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.8), var(--sh-3)}

/* C5/M4 — unified hover elevation (rise toward viewer) */
.pillar:hover,.blog-card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.8), var(--sh-hover)}
.tool:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.7), var(--sh-2)}
.btn-primary:hover{box-shadow:0 14px 36px -10px rgba(30,64,175,.55)}
.btn-green:hover{box-shadow:0 14px 36px -12px rgba(14,159,110,.55)}
.app-phone-link:hover{transform:translateY(-4px); filter:drop-shadow(0 24px 40px rgba(0,0,0,.4))}

/* C6/L7 — pillars: top-lit accent tint + weighted lead card */
.pillar{background:linear-gradient(180deg, color-mix(in srgb, var(--c) 4%, var(--surface-1)), var(--surface-1) 60%)}
.pillar .glow{opacity:.18; filter:blur(70px)}
@media(min-width:1024px){
  .pillars{grid-template-columns:1.4fr 1fr 1fr}
  .pillars .pillar:first-child{padding:34px}
  .pillars .pillar:first-child h3{font-size:1.6rem}
}

/* C3 — dark bands: aurora mesh (3-glow) + lit-from-above vignette */
.band-dark::before{
  background:
    radial-gradient(46% 64% at 86% 6%, rgba(43,99,230,.26), transparent 62%),
    radial-gradient(38% 56% at 8% 100%, rgba(14,159,110,.15), transparent 60%),
    radial-gradient(70% 48% at 50% 120%, rgba(109,40,217,.10), transparent 70%),
    radial-gradient(120% 90% at 50% -20%, transparent 55%, rgba(0,0,0,.32) 100%);
}
.hero-dark::before{
  background:
    radial-gradient(42% 62% at 92% -5%, rgba(43,99,230,.26), transparent 60%),
    radial-gradient(40% 55% at -2% 92%, rgba(14,159,110,.15), transparent 60%),
    radial-gradient(64% 46% at 50% 118%, rgba(109,40,217,.10), transparent 70%),
    radial-gradient(120% 92% at 50% -18%, transparent 56%, rgba(0,0,0,.30) 100%);
}
/* C4 — soft seams (dissolve dark→light, no hard rule) */
.band-dark{border-top:0; border-bottom:0; box-shadow:inset 0 30px 44px -36px rgba(0,0,0,.5), inset 0 -30px 44px -36px rgba(0,0,0,.5)}

/* C7/M2/M3/L2 — hero status console: depth, radar sweep, drawing spark, float+bloom */
.sc-ring{box-shadow:0 0 0 1px rgba(14,159,110,.18), 0 8px 22px -10px rgba(14,159,110,.4)}
.sc-ring::before{background:radial-gradient(120% 120% at 50% 0%, #fff, #f3f6fb); box-shadow:inset 0 1px 3px rgba(15,27,52,.08)}
.sc-ring::after{content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(14,159,110,.5) 18deg, transparent 36deg);
  -webkit-mask:radial-gradient(circle, transparent 56%, #000 57%); mask:radial-gradient(circle, transparent 56%, #000 57%);
  animation:sweep 4.2s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.sc-spark polyline{stroke-dasharray:240; stroke-dashoffset:240; transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1)}
.status-card.in .sc-spark polyline{stroke-dashoffset:0}
@media(min-width:901px){
  .hero-dark .status-card{position:relative; transform:perspective(1600px) rotateY(-3deg) rotateX(1.2deg); transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .hero-dark .status-card:hover{transform:none}
  .hero-dark .status-card::after{content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; z-index:-1;
    background:linear-gradient(135deg,rgba(43,99,230,.5),rgba(14,159,110,.32)); filter:blur(28px); opacity:.5}
}

/* C8 — frosted glass: saturate + crisp rim */
nav{backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); background:rgba(244,246,250,.72); box-shadow:inset 0 -1px 0 var(--line), 0 1px 12px -8px rgba(15,27,52,.2)}
.tools-group--pluss{backdrop-filter:blur(10px) saturate(150%); -webkit-backdrop-filter:blur(10px) saturate(150%); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), var(--sh-2)}

/* M5 — richer scroll reveal (settle, not slide) */
[data-reveal]{transform:translateY(28px) scale(.985); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1)}
[data-reveal].in{transform:none}
[data-reveal][data-d="1"]{transition-delay:.09s}[data-reveal][data-d="2"]{transition-delay:.18s}[data-reveal][data-d="3"]{transition-delay:.27s}

/* M6 — hero carousel: calm depth cross-fade */
.hero-slide{transform:translateY(14px) scale(.992); transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1), visibility 0s linear .6s}
.hero-slide.is-active{transform:none; transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1)}

/* M7 — brand-tinted focus ring */
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; box-shadow:0 0 0 5px rgba(30,64,175,.18)}
.hero-dark :focus-visible,.band-dark :focus-visible{outline-color:var(--d-accent); box-shadow:0 0 0 5px rgba(134,172,255,.28)}

/* M8 — FAQ marker overshoot + content fade (native height kept) */
summary::after{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
details[open] .a{animation:faqIn .35s ease both}
@keyframes faqIn{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}

/* M9 — breathing sensor ring on trust dots */
.sc-dot,.eyebrow .dot{position:relative}
.sc-dot::after,.eyebrow .dot::after{content:''; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(14,159,110,.4); animation:dotRing 2.4s ease-out infinite}
@keyframes dotRing{0%{box-shadow:0 0 0 0 rgba(14,159,110,.4)}70%,100%{box-shadow:0 0 0 10px rgba(14,159,110,0)}}

/* L10 — stats: emphasise the lead figure (287) without an oversized box */
@media(min-width:901px){
  .stats-grid > .stat:nth-child(1) .n{font-size:clamp(2.6rem,4.6vw,3.4rem)}
}
/* L4 — alert section asymmetry (7/5) */
@media(min-width:901px){
  .alert-wrap{grid-template-columns:1.15fr .85fr; gap:var(--s-7)}
}
/* L5 — pricing: elevate featured plan */
@media(min-width:901px){
  .price.feat{transform:scale(1.04); z-index:1; box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 40px 90px -50px rgba(30,64,175,.5)}
}
/* L8 — steps: connecting flow rail + numbered chip */
.step::before{top:18px; right:18px; width:26px; height:26px; display:grid; place-items:center; border:1px solid var(--line); border-radius:var(--r-full); background:var(--surface-2); color:var(--accent)}
@media(min-width:901px){
  .steps{position:relative}
  .steps::before{content:''; position:absolute; top:48px; left:16%; right:16%; height:2px; background:linear-gradient(90deg,transparent,var(--line-2) 12%,var(--line-2) 88%,transparent); z-index:0}
  .step{position:relative; z-index:1}
}
/* L6 — chapter rhythm: dark bands breathe + hairline between adjacent light sections */
@media(min-width:901px){
  .band-dark{padding-top:clamp(72px,9vw,128px); padding-bottom:clamp(72px,9vw,128px)}
  section:not(.band-dark) + section:not(.band-dark) > .wrap{border-top:1px solid var(--line); padding-top:clamp(48px,6vw,80px)}
}
/* L3 — ghost section numerals in the gutter (≥1280; inline fallback otherwise) */
/* Stort omrisset seksjons-nummer fjernet 2026-06-01 (for dominerende på brede skjermer) —
   .num faller tilbake til den lille inline-stilen på linje 153. */

/* Reduced-motion guards for new always-on animations */
@media(prefers-reduced-motion:reduce){
  .sc-ring::after{animation:none; opacity:0}
  .sc-spark polyline{stroke-dashoffset:0; transition:none}
  .sc-dot::after,.eyebrow .dot::after{animation:none}
  details[open] .a{animation:none}
}

/* ── Checkout-modal (PLUSS direkte kjøp) ───────────────────────────── */
.co-backdrop{position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(10,23,48,.62); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.co-backdrop.open{display:flex}
.co-card{position:relative; width:100%; max-width:460px; background:var(--surface-1); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-3); padding:28px; max-height:92vh; overflow:auto}
.co-close{position:absolute; top:14px; right:14px; width:34px; height:34px; border:1px solid var(--line); border-radius:var(--r-full); background:var(--surface-2); color:var(--muted); font-size:19px; line-height:1; cursor:pointer; display:grid; place-items:center}
.co-close:hover{color:var(--text); background:var(--surface-0)}
.co-head h3{font-family:var(--display); font-weight:800; font-size:1.5rem; letter-spacing:-.02em; margin:10px 0 8px}
.co-head p{color:var(--muted); font-size:.92rem; line-height:1.55}
.co-form{margin-top:18px; display:flex; flex-direction:column; gap:14px}
.co-field{display:flex; flex-direction:column; gap:6px; font-size:.82rem; font-weight:600; color:var(--text)}
.co-field input{font-family:var(--body); font-size:1rem; padding:12px 14px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--surface-2); color:var(--text)}
.co-field input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(30,64,175,.15)}
.co-price{padding:13px 15px; background:rgba(14,159,110,.06); border:1px solid rgba(14,159,110,.25); border-radius:var(--r)}
.co-price-row{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap}
.co-price-row strong{font-size:.9rem}
.co-amt{font-weight:700; color:var(--success); font-size:1.06rem; white-space:nowrap}
.co-was{color:var(--faint); text-decoration:line-through; font-weight:500; font-size:.85rem; margin-right:7px}
.co-price-sub{font-size:.74rem; color:var(--muted); margin-top:5px; font-family:var(--mono); letter-spacing:.01em; line-height:1.4}
.co-error{padding:10px 12px; background:rgba(220,38,38,.08); border:1px solid rgba(220,38,38,.3); border-radius:var(--r-sm); color:var(--red); font-size:.85rem}
.co-pay{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.co-pay-btn{display:flex; align-items:center; justify-content:center; gap:9px; min-height:52px; padding:10px 12px; font-weight:600; font-size:.92rem; color:var(--text); background:var(--surface-1); border:1px solid var(--line-2); border-radius:var(--r); cursor:pointer; transition:border-color .15s, background .15s}
.co-pay-btn:hover{border-color:var(--accent); background:var(--surface-2)}
.co-pay-btn:disabled{opacity:.6; cursor:default}
.co-pay-btn img{display:block; width:auto}
.co-pay-btn img[src*="blurple"]{height:22px} .co-pay-btn img[src*="vipps"]{height:24px}
.co-fine{text-align:center; font-size:.72rem; color:var(--faint); margin-top:2px; line-height:1.5}
@media(max-width:480px){ .co-pay{grid-template-columns:1fr} }

/* ── Trial-modal + konvertering ────────────────────────────────────── */
.co-step{display:block}
.co-step[hidden]{display:none}
.tr-google{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:12px 16px; margin-top:16px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--surface-1); color:var(--text); font-weight:600; font-size:.95rem; transition:border-color .15s, background .15s}
.tr-google:hover{border-color:var(--accent); background:var(--surface-2)}
.tr-google svg{display:block; flex:0 0 auto}
.tr-divider{display:flex; align-items:center; gap:10px; margin:18px 0; color:var(--faint); font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase}
.tr-divider::before,.tr-divider::after{content:''; flex:1; height:1px; background:var(--line)}
.co-check{display:flex; align-items:flex-start; gap:9px; font-size:.82rem; color:var(--muted); line-height:1.45}
.co-check input{margin-top:2px; flex:0 0 auto; width:16px; height:16px; accent-color:var(--accent)}
.co-check a{color:var(--accent); font-weight:600}
.tr-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.co-pay-primary{background:linear-gradient(135deg,var(--accent),var(--accent-bright)); color:#fff; border-color:transparent; font-size:.98rem; box-shadow:var(--sh-accent)}
.co-pay-primary:hover{border-color:transparent; background:linear-gradient(135deg,var(--accent),var(--accent-bright)); filter:brightness(1.05)}
.price-trial-link{display:block; width:100%; margin:10px 0 0; padding:6px 0; background:none; border:0; color:var(--muted); font-family:var(--body); font-size:.84rem; text-decoration:underline; text-underline-offset:2px; cursor:pointer}
.price-trial-link:hover{color:var(--accent)}

/* Responsiv tabell-scroll (legal-sider) */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:18px 0}
.table-wrap .data-table{margin:0; min-width:360px}

/* ── Hero-check resultat-popup ─────────────────────────────────────── */
.cr{text-align:left}
.cr-badge{width:48px; height:48px; border-radius:var(--r); display:grid; place-items:center; margin-bottom:15px}
.cr-badge svg{width:26px; height:26px}
.co-card.cr-ok .cr-badge{background:rgba(14,159,110,.12); color:var(--success)}
.co-card.cr-warn .cr-badge{background:rgba(180,83,9,.12); color:var(--amber)}
.co-card.cr-alert .cr-badge{background:rgba(220,38,38,.1); color:var(--red)}
.cr-title{font-family:var(--display); font-weight:800; font-size:1.38rem; line-height:1.15; letter-spacing:-.02em; margin-bottom:10px; color:var(--text)}
.co-card.cr-ok .cr-title{color:var(--success-deep)}
.co-card.cr-alert .cr-title{color:var(--red)}
.cr-body{color:var(--muted); font-size:.95rem; line-height:1.6}
.cr-body p{margin:0}
.cr-body strong{color:var(--text)}
.cr-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.cr-cta a{flex:1 1 140px; text-align:center; padding:11px 16px; border-radius:var(--r); font-weight:600; font-size:.9rem; transition:transform .15s, box-shadow .2s, background .2s}
.cr-cta a:not(.g){background:linear-gradient(135deg,var(--accent),var(--accent-bright)); color:#fff; box-shadow:var(--sh-accent)}
.cr-cta a.g{background:var(--surface-2); color:var(--text); border:1px solid var(--line-2)}
.cr-cta a:hover{transform:translateY(-2px)}

/* ════ Mobil-herding (responsive-design skill → web-CSS) ════
   Safe areas (notch/hjemindikator), smalskjerm-overflow, touch targets ≥44px. */

/* Safe-area-innrykk: nav + .wrap klarer notch i landskap (iOS viewport-fit=cover) */
.nav-in{padding-left:max(var(--s-5), env(safe-area-inset-left)); padding-right:max(var(--s-5), env(safe-area-inset-right))}
@media (max-width:480px){
  .wrap{padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right))}
}
/* Modal-bunn + bunn-fixed: klar hjemindikator */
.co-backdrop{padding-bottom:max(20px, env(safe-area-inset-bottom))}

/* Grid-barn må kunne krympe (hindrer smalskjerm-klipp) */
.tool,.pillar,.price,.stat,.quote,.step,.trust-item,.blog-card{min-width:0}

/* Verktøy: én kolonne på små telefoner (unngår klemte 2-kol-kort) */
@media (max-width:560px){ .tools-grid{grid-template-columns:1fr} }

/* Touch targets ≥44px */
@media (max-width:900px){
  .nav-links a{min-height:44px; display:flex; align-items:center}
}
@media (max-width:560px){
  .btn{min-height:46px}
  .foot-col a{min-height:40px; display:flex; align-items:center; margin-bottom:2px}
}
/* Karusell-prikker: usynlig 44px trykk-flate rundt 10px-prikken */
.hero-dot{position:relative}
.hero-dot::after{content:''; position:absolute; inset:-17px}

/* Hero slide 2-tittel: visuelt som h1, men semantisk h2 (kun én h1 per side) */
.hero-title{font-family:var(--display); font-weight:800; font-size:clamp(2.6rem,6.4vw,4.7rem); line-height:.98; letter-spacing:-.03em; margin-bottom:22px}
.hero-dark .hero-title{color:#fff}
.hero-title .grad{background:linear-gradient(115deg,var(--accent) 10%,var(--success) 90%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}