/* Tonet topp, samme behandling som .page-hero.tinted på undersidene */
.hero{position:relative;background:linear-gradient(180deg,var(--tint),var(--cream));border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 88% -10%,var(--tint-2) 0%,transparent 55%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center;
  padding-block:clamp(48px,7vw,92px);position:relative}
.hero h1{margin-bottom:22px}
.hero .lead{margin-bottom:32px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:30px}
.hero-trust{font-size:.9rem;color:var(--muted);display:flex;align-items:center;gap:8px;margin:0}
.hero-trust b{color:var(--ink-2);font-weight:600}

@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero .visual{max-width:520px}
}

/* =========================================================================
   Produktpanel (animert plan-panel) — hardkodet, ikke redigerbart.
   Klassenavn prefikset .pln- så de ikke kolliderer med resten av temaet.
   Kilde: Html source v2/planeo-planpanel-modul.html
   ========================================================================= */
.pln-panel-root{
  --pln-ink:#202647;
  --pln-accent:#5a66dc;
  --pln-accent-deep:#4750c2;
  --pln-cream:#f9f8f2;
  --pln-tint:#e6eaff;
  --pln-paper:#ffffff;
  --pln-muted:#5d6385;
  --pln-line:rgba(32,38,71,.12);
  --pln-line-strong:rgba(32,38,71,.20);
  --pln-line-idle:rgba(32,38,71,.26);
  --pln-green-bg:#e3f0e9;
  --pln-green-fg:#2f7a55;
  --pln-muted-on-dark:rgba(243,244,251,.66);
  --pln-shadow-soft:0 1px 2px rgba(32,38,71,.04),0 24px 60px -34px rgba(32,38,71,.4);
  --pln-shadow:0 1px 2px rgba(32,38,71,.05),0 18px 40px -22px rgba(32,38,71,.35);
  --pln-font:'Season Sans','Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  container-type:inline-size;
  font-family:var(--pln-font);
  color:var(--pln-ink);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  display:block;
}
.pln-panel-root *,.pln-panel-root *::before,.pln-panel-root *::after{box-sizing:border-box}

/* reserverer plass til "25 %"-merket som stikker utenfor kortet */
.pln-panel-shell{padding:0 20px 26px 0}

/* inntoning når modulen kommer i view */
.pln-panel-root{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.pln-panel-root.pln-in{opacity:1;transform:none}

/* ---------- kortet ---------- */
.pln-panel{
  background:var(--pln-paper);
  border:1px solid var(--pln-line);
  border-radius:18px;
  box-shadow:var(--pln-shadow-soft);
  padding:22px;
  position:relative;
}
.pln-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.pln-title{font-weight:600;font-size:16.3px;line-height:1.35}
.pln-sub{font-size:13.1px;line-height:1.45;color:var(--pln-muted)}
.pln-pill{
  font-size:11.8px;font-weight:600;line-height:1.6;padding:.34em .8em;border-radius:999px;
  letter-spacing:.01em;white-space:nowrap;background:var(--pln-tint);color:var(--pln-accent-deep);
  transition:background-color .4s ease,color .4s ease;
}
.pln-pill.is-done{background:var(--pln-green-bg);color:var(--pln-green-fg)}

/* ---------- faseakse ---------- */
.pln-track{display:flex;align-items:center;margin:8px 0 22px}
.pln-node{
  width:13px;height:13px;border-radius:50%;flex:0 0 auto;
  border:2px solid var(--pln-accent);background:#fff;
  transition:background-color .45s ease,box-shadow .45s ease;
}
.pln-node.is-done{background:var(--pln-accent)}
.pln-node.is-now{background:var(--pln-accent);box-shadow:0 0 0 5px var(--pln-tint)}
.pln-seg{height:2px;flex:1;background:var(--pln-line-strong);position:relative;overflow:hidden}
.pln-seg::after{
  content:"";position:absolute;inset:0;background:var(--pln-accent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .7s cubic-bezier(.4,0,.2,1);
}
.pln-seg.is-fill::after{transform:scaleX(1)}
.pln-labels{
  display:flex;justify-content:space-between;
  font-size:11.8px;line-height:1.5;color:var(--pln-muted);font-weight:500;margin-bottom:22px;
}
.pln-labels span{transition:color .4s ease}
.pln-labels span.is-now{color:var(--pln-accent-deep);font-weight:600}

/* ---------- oppgaveliste ---------- */
.pln-rows{display:flex;flex-direction:column;gap:2px}
.pln-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px}
.pln-row:nth-child(odd){background:var(--pln-cream)}
.pln-tick{
  width:20px;height:20px;border-radius:6px;flex:0 0 auto;
  display:grid;place-items:center;
  background:var(--pln-tint);color:var(--pln-accent-deep);
  border:1.5px dashed transparent;
  transition:background-color .35s ease,border-color .35s ease,color .3s ease;
}
.pln-tick.is-open{background:#fff;border-color:var(--pln-line-idle);color:transparent}
.pln-tick svg{width:12px;height:12px;display:block}
.pln-tick svg path{
  stroke-dasharray:17;stroke-dashoffset:17;
  transition:stroke-dashoffset .4s ease .06s;
}
.pln-tick.is-done svg path{stroke-dashoffset:0}
.pln-tick.is-done{animation:pln-tick-pop .45s cubic-bezier(.34,1.4,.64,1)}
@keyframes pln-tick-pop{
  0%{transform:scale(.84)}
  55%{transform:scale(1.12)}
  100%{transform:scale(1)}
}
.pln-label{font-size:14.4px;line-height:1.45;font-weight:500;flex:1}
.pln-meta{font-size:12.2px;line-height:1.45;color:var(--pln-muted);white-space:nowrap}

/* ---------- "25 %"-merket ---------- */
.pln-float{
  position:absolute;right:-18px;bottom:-20px;
  background:var(--pln-ink);color:#fff;
  border-radius:14px;padding:14px 16px;
  box-shadow:var(--pln-shadow);max-width:200px;
}
.pln-float-big{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1}
.pln-float-cap{font-size:11.8px;line-height:1.45;color:var(--pln-muted-on-dark);margin-top:4px}

/* ---------- smal container ---------- */
@container (max-width: 430px){
  .pln-panel-shell{padding:0}
  .pln-float{position:static;margin-top:18px;max-width:none}
  .pln-meta{white-space:normal;text-align:right}
}
@supports not (container-type: inline-size){
  @media (max-width: 680px){
    .pln-panel-shell{padding:0}
    .pln-float{position:static;margin-top:18px;max-width:none}
    .pln-meta{white-space:normal;text-align:right}
  }
}

/* ---------- redusert bevegelse ---------- */
@media (prefers-reduced-motion: reduce){
  .pln-panel-root,.pln-panel-root *{animation:none !important;transition:none !important}
  .pln-panel-root{opacity:1;transform:none}
}