/*
 * Kirkepakka — presentasjon. pris.css
 * ============================================================
 * Scopet stilark for prissidene (/pris-a, /pris-b, /pris-c, /pris).
 * Lastes KUN paa disse sidene (betinget enqueue i functions.php).
 * Bygger paa main.css-tokenene (DESIGN.md v0.2) — alle farger flipper
 * med data-mode. Rav (--color-accent) er dekor/anker; petrol baerer.
 * ============================================================ */

/* —— Prisside-ramme: kort + pitch ved siden av hverandre —— */
.kpp-pris-grid{display:grid;gap:clamp(1.5rem,4vw,2.75rem);grid-template-columns:1fr;align-items:start}
@media (min-width:880px){.kpp-pris-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)}}

/* —— Priskortet (A + C) —— */
.kpp-priskort{background:var(--color-surface);border:2px solid var(--color-primary);border-radius:var(--rounded-lg);box-shadow:var(--shadow-lg);padding:clamp(1.6rem,4vw,2.4rem);position:relative;overflow:hidden}
.kpp-priskort__kicker{font-family:var(--font-body);font-weight:600;letter-spacing:.09em;text-transform:uppercase;font-size:.8125rem;color:var(--color-primary);margin:0 0 .7rem}
.kpp-priskort__pris{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin:0 0 .35rem}
.kpp-priskort__tall{font-family:var(--font-display);font-weight:800;font-size:clamp(2.5rem,7vw,3.6rem);letter-spacing:-.04em;line-height:1;color:var(--color-ink)}
.kpp-priskort__enhet{font-weight:600;color:var(--color-ink-muted);font-size:1.05rem}
.kpp-priskort__under{color:var(--color-ink-muted);margin:0 0 1.2rem;font-size:1.02rem}
.kpp-priskort__under b{color:var(--color-ink);font-weight:600}

/* —— Oppstart/milepael-linje (rav-tint) —— */
.kpp-oppstart{display:flex;align-items:flex-start;gap:.6rem;flex-wrap:wrap;background:color-mix(in srgb,var(--color-accent) 15%,transparent);border:1px solid color-mix(in srgb,var(--color-accent) 45%,transparent);border-radius:var(--rounded-sm);padding:.65rem .9rem;margin:0 0 1.2rem;font-size:.95rem;color:var(--color-ink)}
.kpp-oppstart__merke{font-family:var(--font-display);font-weight:800;color:var(--color-accent-text);white-space:nowrap}
.kpp-oppstart b{color:var(--color-ink);font-weight:600}

/* —— Inkludert-liste —— */
.kpp-incl{list-style:none;margin:0 0 1.3rem;padding:0;display:grid;gap:.55rem}
.kpp-incl li{display:flex;gap:.6rem;align-items:flex-start;font-size:1rem;color:var(--color-ink)}
.kpp-incl li .kpp-icon{color:var(--color-primary);flex:none;margin-top:.15rem}
.kpp-incl li b{font-weight:600}

/* —— Finstilt (timepris / telefon / drift) —— */
.kpp-fine{border-top:1px dashed var(--color-line);padding-top:1rem;margin-top:.2rem;display:grid;gap:.65rem}
.kpp-fine__rad{display:flex;gap:.6rem;align-items:flex-start;font-size:.94rem;color:var(--color-ink-muted)}
.kpp-fine__rad b{color:var(--color-ink);font-weight:600}
.kpp-fine__rad .kpp-icon{color:var(--color-ink-muted);flex:none;margin-top:.1rem}

/* —— Pitch-kolonne (hvorfor denne modellen) —— */
.kpp-pitch{align-self:start}
.kpp-pitch__sell{font-family:var(--font-display);font-weight:800;font-size:clamp(1.35rem,3vw,1.85rem);line-height:1.14;letter-spacing:-.02em;color:var(--color-primary);margin:0 0 1rem;text-wrap:balance}
.kpp-section--alt .kpp-pitch__sell,.kpp-pitch__sell{color:var(--color-primary)}
.kpp-pitch p{color:var(--color-ink-muted);margin:0 0 .9rem;font-size:1.02rem}
.kpp-pitch p b{color:var(--color-ink);font-weight:600}

/* —— Piller (nøkkelord) —— */
.kpp-pillrow{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.kpp-pill{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--color-line);background:var(--color-surface);border-radius:var(--rounded-full);padding:.45rem .9rem;font-size:.86rem;font-weight:600;color:var(--color-ink)}
.kpp-pill::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--color-accent);flex:none}

/* —— Modell B: felles kjerne + tre nivåer —— */
.kpp-baseincl{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--rounded-sm);padding:1.05rem 1.3rem;margin:0 0 1.6rem;font-size:.96rem;color:var(--color-ink-muted)}
.kpp-baseincl b{color:var(--color-ink);font-weight:700;font-family:var(--font-display)}
.kpp-baseincl__items{display:flex;flex-wrap:wrap;gap:.45rem 1rem;margin-top:.6rem}
.kpp-baseincl__items span{display:inline-flex;align-items:center;gap:.45rem}
.kpp-baseincl__items span::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--color-primary);flex:none}

.kpp-tiers{display:grid;gap:1.1rem;grid-template-columns:1fr;align-items:stretch}
@media (min-width:820px){.kpp-tiers{grid-template-columns:repeat(3,1fr)}}
.kpp-tier{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--rounded-lg);box-shadow:var(--shadow-md);padding:1.5rem 1.35rem;display:flex;flex-direction:column;position:relative}
.kpp-tier--featured{border:2px solid var(--color-accent);box-shadow:var(--shadow-lg)}
.kpp-tier__badge{position:absolute;top:-.85rem;left:50%;transform:translateX(-50%);background:var(--color-accent);color:#0E2A34;font-family:var(--font-display);font-weight:800;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .85rem;border-radius:var(--rounded-full);white-space:nowrap}
.kpp-tier__navn{font-family:var(--font-display);font-weight:800;font-size:1.25rem;letter-spacing:-.01em;margin:0 0 .1rem;color:var(--color-ink)}
.kpp-tier__seg{font-size:.86rem;color:var(--color-ink-muted);margin:0 0 .9rem;min-height:1.2em}
.kpp-tier__pris{display:flex;align-items:baseline;gap:.35rem;margin:0 0 .2rem}
.kpp-tier__tall{font-family:var(--font-display);font-weight:800;font-size:2rem;letter-spacing:-.03em;color:var(--color-ink)}
.kpp-tier__enhet{font-size:.9rem;font-weight:600;color:var(--color-ink-muted)}
.kpp-tier__oppstart{font-size:.85rem;color:var(--color-ink-muted);margin:0 0 1rem}
.kpp-tier__oppstart b{color:var(--color-ink);font-weight:600}
.kpp-tier__liste{list-style:none;margin:0;padding:.9rem 0 0;border-top:1px solid var(--color-line);display:grid;gap:.55rem}
.kpp-tier__liste li{display:flex;gap:.5rem;align-items:flex-start;font-size:.93rem;color:var(--color-ink)}
.kpp-tier__liste li .kpp-icon{color:var(--color-primary);flex:none;margin-top:.12rem}
.kpp-tier__liste li.is-addon{color:var(--color-ink-muted)}
.kpp-tier__liste li.is-addon .kpp-icon{color:var(--color-ink-muted)}
.kpp-tier__liste li b{font-weight:700}

/* —— Støtte-bokser (B) —— */
.kpp-sellgrid{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.6rem}
@media (min-width:820px){.kpp-sellgrid{grid-template-columns:1fr 1fr}}
.kpp-sellbox{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--rounded-sm);padding:1.15rem 1.3rem}
.kpp-sellbox h3{font-family:var(--font-display);font-weight:800;font-size:1.05rem;margin:0 0 .4rem;color:var(--color-primary)}
.kpp-sellbox p{margin:0;color:var(--color-ink-muted);font-size:.96rem}
.kpp-sellbox p b{color:var(--color-ink);font-weight:600}

/* —— INTERN-banner (kun /pris) — faste farger, mode-uavhengig —— */
.kpp-intern{background:#0E2A34;color:#E6EDF1;border-bottom:3px solid var(--color-accent)}
.kpp-intern__inner{display:flex;align-items:center;gap:.65rem .95rem;flex-wrap:wrap;font-size:.92rem;padding-block:.75rem}
.kpp-intern__flag{font-family:var(--font-display);font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-size:.78rem;background:var(--color-accent);color:#0E2A34;padding:.24rem .7rem;border-radius:var(--rounded-full);flex:none}
.kpp-intern__note{color:#C4D6DE}
.kpp-intern__note b{color:#fff;font-weight:600}

/* —— /pris: tre valgkort som lenker til A/B/C —— */
.kpp-prisvalg{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:760px){.kpp-prisvalg{grid-template-columns:repeat(3,1fr)}}
.kpp-prisvalg__kort{display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--rounded-lg);box-shadow:var(--shadow-sm);padding:1.6rem 1.5rem;text-decoration:none;color:inherit;transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur)}
.kpp-prisvalg__kort:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--color-primary)}
.kpp-prisvalg__merke{font-family:var(--font-display);font-weight:800;font-size:.95rem;color:var(--color-accent-text);background:color-mix(in srgb,var(--color-accent) 18%,transparent);align-self:flex-start;padding:.15rem .6rem;border-radius:var(--rounded-sm);margin:0 0 .8rem}
.kpp-prisvalg__navn{font-family:var(--font-display);font-weight:800;font-size:1.35rem;letter-spacing:-.02em;margin:0 0 .15rem;color:var(--color-ink)}
.kpp-prisvalg__pris{font-weight:600;color:var(--color-primary);margin:0 0 .7rem;font-size:1rem}
.kpp-prisvalg__tekst{margin:0 0 1.1rem;color:var(--color-ink-muted);font-size:.96rem;flex:1}
.kpp-prisvalg__cta{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;color:var(--color-primary);font-size:.96rem}
.kpp-prisvalg__kort:hover .kpp-prisvalg__cta .kpp-icon{transform:translateX(3px)}
.kpp-prisvalg__cta .kpp-icon{transition:transform var(--dur) var(--ease-out)}

/* —— Beslutningsgrunnlag-henvisning (nevntekst, ikke fil-lenke) —— */
.kpp-beslutning-note{margin-top:1.75rem;display:flex;gap:.9rem;align-items:flex-start;background:var(--color-surface);border:1px solid var(--color-line);border-left:4px solid var(--color-accent);border-radius:var(--rounded-sm);padding:1.15rem 1.4rem;color:var(--color-ink-muted);font-size:.98rem}
.kpp-beslutning-note .kpp-icon{color:var(--color-primary);flex:none;margin-top:.15rem}
.kpp-beslutning-note b{color:var(--color-ink);font-weight:600}

/* —— Priskortet loeftet inn i heroen (fase 13, retning B) ——————
   Komprimert variant: mindre luft og et roligere tall, saa kortet ikke
   konkurrerer med h1-en ved siden av. Det fulle kortet i seksjonen under
   er uendret — dette er sammendraget, ikke sannheten. */
.kpp-priskort--hero{padding:clamp(1.4rem,3vw,1.9rem)}
.kpp-priskort--hero .kpp-priskort__tall{font-size:clamp(2.4rem,5vw,3.2rem)}
.kpp-priskort--hero .kpp-priskort__under{margin-bottom:1rem;font-size:1rem}
.kpp-priskort--hero .kpp-oppstart{margin-bottom:1rem;font-size:.93rem}
.kpp-priskort--hero .kpp-incl{margin-bottom:0;gap:.5rem}
.kpp-priskort--hero .kpp-incl li{font-size:.98rem}

/* —— Responsiv finpuss —— */
@media (max-width:520px){
  .kpp-priskort__tall{font-size:2.3rem}
}

/* —— Lenker i intern-banneret (fast moerk flate, mode-uavhengig) —— */
.kpp-intern a{color:#E8B75E;text-decoration:underline;text-underline-offset:.15em}
.kpp-intern a:hover,.kpp-intern a:focus-visible{color:#FFFFFF}