/*
 * Redesign v2 (19. sep. 2026) - de regler der ikke er Tailwind-klasser.
 * Indlaeses kun naar ipk_design_v2() er slaaet til (staging), fra
 * views/partials/public_nav.php. Se views/partials/design_ui.php.
 *
 * Opskriften: neutrale flader og sort tekst, produktfarverne kun i
 * app-ikonerne, violet er den eneste handlingsfarve.
 */

/* Nav-knappen: violet i stedet for naesten-sort */
.ipk-nav__cta { background: #7C3AED; }
.ipk-nav__cta:hover { background: #6D28D9; }

/* ── Forsidens hero (section_hero_suite.php) ────────────────────────────── */

/* Toppadding = klaring for den fixed public_nav.php */
.ipk-hs { width: 100%; background: transparent; padding: 8rem 1.5rem 0; text-align: center; }   /* vasken ligger paa <main> */
.ipk-hs__inner { max-width: 1200px; margin: 0 auto; }
.ipk-hs__kicker { margin: 0 0 .9rem; font-size: 13px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: rgba(11,11,18,.6); }
.ipk-hs__h1 { margin: 0 0 1.4rem; font-size: clamp(2.6rem, 5.4vw, 4.4rem); font-weight: 800;
    letter-spacing: -.035em; line-height: 1.06; color: #0B0B12; }
.ipk-hs__lead { max-width: 42rem; margin: 0 auto 2rem; font-size: 1.125rem; line-height: 1.65;
    color: rgba(11,11,18,.62); text-wrap: balance; }
.ipk-hs__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-bottom: 1.1rem; }
.ipk-hs__cta, .ipk-hs__cta-alt { display: inline-flex; align-items: center; gap: .5rem; height: 48px;
    padding: 0 1.5rem; border-radius: 999px; font-size: 15px; font-weight: 600;
    transition: background .2s ease, border-color .2s ease; }
.ipk-hs__cta { background: #7C3AED; color: #fff; }
.ipk-hs__cta:hover { background: #6D28D9; }
.ipk-hs__cta-alt { background: #fff; color: #0B0B12; border: 1px solid rgba(11,11,18,.18); }
.ipk-hs__cta-alt:hover { border-color: rgba(11,11,18,.35); }
.ipk-hs__micro { margin: 0; font-size: 13px; color: rgba(11,11,18,.6); }

/* Tre telefoner direkte paa sidens topvask. De stod foer i en afrundet boks med sin
   egen vask, og den boks havde en haard kant i top og bund, som saa ud som en fejl.
   Nu er der ingen boks: telefonerne er skaaret af i bunden og toner ud. */
.ipk-hs__stage { display: flex; justify-content: center; gap: 1.75rem; height: 520px; overflow: hidden;
    margin-top: 3.5rem; padding: 3.5rem 1.5rem 0; background: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
            mask-image: linear-gradient(to bottom, #000 72%, transparent); }
/* Skaermbillederne har selv en telefonkant - ingen ekstra ramme omkring dem */
.ipk-hs__phone { flex: none; align-self: flex-start; width: 240px; }
.ipk-hs__phone img { display: block; width: 100%; height: auto; pointer-events: none; }
.ipk-hs__phone--mid { margin-top: -18px; }

.ipk-hs__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2.25rem;
    padding-top: 2.25rem; font-size: 14px; color: rgba(11,11,18,.62); }
.ipk-hs__trust span { display: inline-flex; align-items: center; gap: .5rem; }
.ipk-hs__trust svg { color: #0B0B12; }

@media (max-width: 760px) {
    .ipk-hs { padding-top: 6.5rem; }
    .ipk-hs__phone--side { display: none; }
    .ipk-hs__stage { height: 440px; margin-top: 2.5rem; }
    .ipk-hs__trust { gap: .6rem 1.25rem; font-size: 13px; }
}

/* Siden selv: body har den gamle violette gradient (bg-hero). Den skinner
   igennem mens sektionerne toner ind (AOS), saa hvid bund i redesignet. */
body.bg-hero { background-image: none; background-color: #fff; }

/* Mega-menuen: de nye app-ikoner har ingen flise, saa ingen skygge/hjoerner */
.ipk-mega-app img { border-radius: 0; box-shadow: none; }

/* Fremhaevede ord i overskrifter ligger som <span class="text-[#...]"> inde i
   oversaettelsesteksterne (fx Pass, alle 16 sprog). Graa i stedet for violet,
   ligesom Apple/Google laver anden linje i en overskrift. */
/* Det lyse violet (#C4B5FD) blev skrevet til moerk bund. Paa en LYS hero er det hvidt
   paa hvidt (kontrast 1,0:1 - Pass-siden mistede et helt ord), saa standarden er nu
   den graa, og kun inde i en moerk flade (ip-ink, fx en fotohero) er det lyst. */
:is(h1, h2, h3) span.text-\[\#C4B5FD\] { color: rgba(11,11,18,.52); }
.bg-ip-ink :is(h1, h2, h3) span.text-\[\#C4B5FD\] { color: rgba(255,255,255,.6); }
:is(h1, h2, h3) span.text-\[\#7C3AED\] { color: rgba(11,11,18,.52); }

/* Inline kode i udviklerdokumentationen (Captcha, Analytics): neutral */
body .cap-docs code.cap-inline,
body .anl-docs code { background: rgba(11,11,18,.06); color: #0B0B12; }

/* App-launcheren og app-striben i headeren.
   De nye ikoner (/assets/icons/apps/) er tegninger uden flise - en radius og
   en skygge omkring dem tegner en kasse rundt om ingenting. Reglen rammer
   ikonfamilien, ikke det enkelte sted, saa den holder uanset hvor et ikon
   dukker op naeste gang. */
img[src^="/assets/icons/apps/"] { border-radius: 0; box-shadow: none; }
.ipk-al-tile img[src^="/assets/icons/apps/"] { border-radius: 0; box-shadow: none; }

/* Launcheren selv: lavendel flader bliver lysegraa */
.ipk-al-grid { background: #FAFAFA; border-color: rgba(11,11,18,.09); }
.ipk-al-tile:hover,
.ipk-al-tile.is-active,
.ipk-al-footer-link:hover,
.ipk-al-footer-link.is-active { background: #F5F5F5; }
#app-launcher { border-color: rgba(11,11,18,.09); }
#app-launcher a:hover, #app-launcher a.bg-\[\#F3F0FF\] { background-color: #F5F5F5; }

/* ─────────────────────────────────────────────────────────────────────────
   Spektret - InfoPeaks eneste gradient (Kold, valgt af Kim 21/9-2026)

   Violet -> blaa -> groen: brandets violet og to af de tre kolde farvefamilier i
   app-ikonerne (Drive/DNS og Sheets/VPN). Bruges SPARSOMT og aldrig som flade:
   en tynd kant, en streg, ét fremhaevet ord. Farvedoseringen er stadig
   sort/hvid/graa med violet paa handlinger.

   Tre ramper, fordi kontrast afgoer hvad der maa staa hvor:
     --ipk-spectrum            base, til kanter og streger (dekoration)
     --ipk-spectrum-text       dyb, til tekst paa hvid   (alle stop >= 5,4:1)
     --ipk-spectrum-text-dark  lys, til tekst paa sort   (alle stop >= 6,7:1)
   Baseblaa og -groen har kun 2,8:1 og 2,5:1 mod hvid og maa derfor ikke staa i
   tekst paa lys bund - det er grunden til at tekstrampen bruger de dybe toner.

   Interpoleres i OKLCH, saa overgangen mellem violet og blaa ikke bliver mudret;
   aeldre browsere faar samme stop i sRGB (ser stadig fint ud).
   ───────────────────────────────────────────────────────────────────────── */
:root {
    --ipk-angle: 120deg;
    --ipk-spectrum:           linear-gradient(var(--ipk-angle), #7C3AED, #0EA5E9, #10B981);
    --ipk-spectrum-text:      linear-gradient(var(--ipk-angle), #6D28D9, #0369A1, #047857);
    --ipk-spectrum-text-dark: linear-gradient(var(--ipk-angle), #A78BFA, #38BDF8, #34D399);
}
@supports (background: linear-gradient(in oklch, red, blue)) {
    :root {
        --ipk-spectrum:           linear-gradient(in oklch var(--ipk-angle), #7C3AED, #0EA5E9, #10B981);
        --ipk-spectrum-text:      linear-gradient(in oklch var(--ipk-angle), #6D28D9, #0369A1, #047857);
        --ipk-spectrum-text-dark: linear-gradient(in oklch var(--ipk-angle), #A78BFA, #38BDF8, #34D399);
    }
}

/* Tekst: ét fremhaevet ord eller en kort overskrift. color er fallback hvis
   background-clip:text ikke findes. box-decoration-break saa en overskrift der
   ombrydes faar hele forloebet paa hver linje. */
.ipk-grad-text,
.ipk-grad-text--dark {
    color: #6D28D9;
    background: var(--ipk-spectrum-text);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ipk-grad-text--dark { color: #A78BFA; background: var(--ipk-spectrum-text-dark);
    -webkit-background-clip: text; background-clip: text; }

/* Kant: virker med border-radius. Fladen indeni saettes med --ipk-fill (hvid
   som standard), tykkelsen med --ipk-bw. */
.ipk-grad-border {
    border: var(--ipk-bw, 1.5px) solid transparent;
    background:
        linear-gradient(var(--ipk-fill, #fff), var(--ipk-fill, #fff)) padding-box,
        var(--ipk-spectrum) border-box;
}
.ipk-grad-border--dark { --ipk-fill: #15141C; }
.ipk-grad-border--strong { --ipk-bw: 2px; }   /* fremhaevet kort: 2 px taeller ogsaa paa almindelige skaerme */

/* Streg: 1 px skillelinje der toner ud i begge ender. */
.ipk-grad-line {
    height: 1px; border: 0; margin: 0;
    background: var(--ipk-spectrum);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

/* Understregning paa et link: viser spektret kun paa hover */
.ipk-grad-underline {
    background: var(--ipk-spectrum) left bottom / 0 1.5px no-repeat;
    transition: background-size .25s ease;
    padding-bottom: 2px;
}
.ipk-grad-underline:hover, .ipk-grad-underline:focus-visible { background-size: 100% 1.5px; }
@media (prefers-reduced-motion: reduce) { .ipk-grad-underline { transition: none; } }

/* ─────────────────────────────────────────────────────────────────────────
   Sidevask (Kim 21/9-2026: "som Googles", men kun i toppen)

   Bloede pastelfarver langs kanterne, der daekker mere end heroen: fra toppen af
   siden og ned over de foerste par sektioner, hvorefter siden er hvid. Vasken
   gentages IKKE - Kim: "det skal kun vaere i toppen af siden".

   Ét lag paa 1300 px uden gentagelse. Kold-farverne (violet, blaa, groen) med et
   strejf af rav som i .bg-ip-wash, meget lav opacitet (.10-.16), saa teksten
   stadig ligger paa naesten hvid bund.
   Brug paa <main>:  ipk_v2('', 'ipk-page-wash')
   ───────────────────────────────────────────────────────────────────────── */
.ipk-page-wash {
    background-color: #fff;
    background-image:
        radial-gradient(38% 360px at   0%  190px, rgba(124, 58,237,.16), transparent 72%),
        radial-gradient(40% 380px at 100%  300px, rgba( 14,165,233,.16), transparent 72%),
        radial-gradient(34% 340px at   0%  760px, rgba( 16,185,129,.13), transparent 72%),
        radial-gradient(30% 300px at 100%  960px, rgba(245,158, 11,.09), transparent 72%);
    background-size: 100% 1300px;
    background-repeat: no-repeat;
}
/* Sektioner der ellers dækker vasken med hvid bund, lader den skinne igennem.
   Kort og paneler indeni beholder deres egen hvide flade og staar dermed frem. */
.ipk-page-wash > section.bg-white,
.ipk-page-wash > section.bg-ip-surface { background-color: transparent; }

/* Screenshot-karrusellen (pricing): lys udgave */
/* Skyggen maa ikke naa ud over sporets polstring (64 px oeverst, 112 px nederst):
   sporet har overflow-x:auto, som ogsaa klipper lodret, og en for stor skygge
   staar derfor som en skaaret kant. Ingen farvet glans - den var det der blev skaaret. */
body .pr-carousel-phone { filter: drop-shadow(0 16px 28px rgba(11,11,18,.10)); }
body .pr-carousel-slide.is-active .pr-carousel-phone {
    filter: drop-shadow(0 24px 40px rgba(11,11,18,.16));
}
body .pr-carousel-slide.is-active .pr-carousel-label { color: rgba(0,0,0,.85) !important; }
body .pr-carousel-dot.is-active { background: #15141C !important; }

/* ─────────────────────────────────────────────────────────────────────────
   Produkt-heroen (section_product_hero.php - Mail, Drive, Docs, Sheets, Slides,
   Calendar, Contacts, Notes): lys udgave. Kompositionen er den samme - telefon
   eller app-vindue, det store ord bagved, tekst og noegletal rundt om - men
   fladen er hvid, og alt der var hvidt paa moerkt er nu sort paa lyst.

   Reglerne staar med "body " foran fordi partialen skriver sin egen <style>
   EFTER dette stylesheet; ellers vinder den ved lige specificitet.
   ───────────────────────────────────────────────────────────────────────── */
body .ph-hero { background: #fff; }
body .ph-hero::after { display: none; }                 /* moerkt vignet-lag */
body .ph-blob { display: none; }                        /* de lysende blobs */
/* Det store ord: en naesten usynlig graa i stedet for hvid, ligesom Googles store
   baggrundsord. Fyldet er en SVG-gradient, saa stop-farverne overstyres direkte. */
body .ph-word stop:first-child { stop-color: #15141C; stop-opacity: .085; }
body .ph-word stop:last-child  { stop-color: #15141C; stop-opacity: .03; }
body .ph-centered .ph-word { opacity: 1; }
body .ph-copy h1 { color: #000; }
body .ph-copy p { color: rgba(0,0,0,.62); }
body .ph-cta-note { color: rgba(0,0,0,.55); }
body .ph-trust-lead { color: rgba(0,0,0,.5); }
body .ph-trust-v { color: #000; }
body .ph-trust-l { color: rgba(0,0,0,.6); }
body .ph-trust-ic { background: #F5F5F5; border-color: rgba(11,11,18,.09); color: #000; }
body .ph-device-img { filter: drop-shadow(0 30px 50px rgba(11,11,18,.20)); }
body .ph-window { box-shadow: 0 2px 6px rgba(11,11,18,.08), 0 -8px 50px rgba(11,11,18,.12); }
/* Produkt-heroen: teksten til venstre, terraen-illustrationen til hoejre (Kim 21/9-2026:
   "skift telefonen i haanden ud med en illustration til hoejre for hero teksten"). */
body .ph-hero.ph-split, body .ph-hero.ph-centered { height: auto; padding-top: 0; }
body .ph-split .ph-wrap, body .ph-centered .ph-wrap {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: center;
    height: auto; text-align: left; padding: 112px 48px; max-width: 1200px;
}
body .ph-illus { grid-column: 2; grid-row: 1 / span 2; }
body .ph-split .ph-copy, body .ph-centered .ph-copy { position: static; grid-column: 1; grid-row: 1; align-self: end; max-width: 520px; }
body .ph-split .ph-trust-box, body .ph-centered .ph-trust-box { position: static; grid-column: 1; grid-row: 2; align-self: start; margin-top: 34px; text-align: left; }
body .ph-split .ph-copy h1, body .ph-centered .ph-copy h1 { font-size: clamp(34px, 4.2vw, 52px); }
body .ph-split .ph-trusts, body .ph-centered .ph-trusts { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 28px; }
body .ph-split .ph-trust { flex-direction: row; }
body .ph-split .ph-trust-tx { text-align: left; }
body .ph-word { display: none; }   /* med illustrationen ved siden af staar det store ord kun i vejen */
@media (max-width: 900px) {
    body .ph-split .ph-wrap, body .ph-centered .ph-wrap { grid-template-columns: 1fr; padding: 96px 24px 72px; text-align: center; }
    body .ph-illus, body .ph-split .ph-copy, body .ph-split .ph-trust-box { grid-column: 1; grid-row: auto; }
    body .ph-illus { order: 3; margin-top: 40px; }
    body .ph-split .ph-copy, body .ph-centered .ph-copy { margin: 0 auto; }
    body .ph-split .ph-trusts, body .ph-centered .ph-trusts { justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Forklarende illustrationer (partials/explainer.php), Kim 21/9-2026.
   Et stiliseret UI-kort (eller et rigtigt screenshot) med etiketter ovenpaa.

   EGET FORMSPROG, med vilje ikke Googles: et foerste udkast var for taet paa
   Googles illustrationer (samme figurer og kapsler paa samme pladser), og det vil
   vi ikke risikere at blive laest som en kopi. Etiketterne er firkantede tags med
   sort kant, en haard farvet skygge og en pegelinje med en prik ind mod tegningen,
   ikke bloede hvide kapsler. Formerne er InfoPeaks bjerg og en sol.
   ───────────────────────────────────────────────────────────────────────── */
.ipk-ex { position: relative; width: 100%; max-width: 540px; margin: 0 auto; aspect-ratio: 520 / 440; }
.ipk-ex__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.ipk-ex__chip {
    position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .6rem;
    padding: .34rem .95rem .34rem .34rem; background: #fff; color: #15141C;
    border: 2px solid #15141C; border-radius: 11px; box-shadow: 4px 4px 0 var(--c, #7C3AED);
    font-size: 13.5px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.ipk-ex__ic {
    width: 28px; height: 28px; border-radius: 8px; background: var(--c, #7C3AED); color: #fff;
    display: grid; place-items: center; flex: none;
}
/* Pegelinjen: en tynd streg og en prik i etikettens farve, ind mod tegningen */
.ipk-ex__chip::after {
    content: ""; position: absolute; top: 50%; width: var(--len, 34px); height: 2px;
    background: #15141C; transform: translateY(-50%);
}
.ipk-ex__chip::before {
    content: ""; position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%;
    background: var(--c, #7C3AED); border: 2px solid #15141C; transform: translateY(-50%); z-index: 1;
}
.ipk-ex__chip[data-dir="r"]::after  { left: calc(100% + 2px); }
.ipk-ex__chip[data-dir="r"]::before { left: calc(100% + var(--len, 34px) - 4px); }
.ipk-ex__chip[data-dir="l"]::after  { right: calc(100% + 2px); }
.ipk-ex__chip[data-dir="l"]::before { right: calc(100% + var(--len, 34px) - 4px); }
/* Sigtet linje: retning, laengde og prik saettes af scriptet i explainer.php */
.ipk-ex__chip--aimed::after { top: 50%; transform-origin: 0 50%; }
.ipk-ex__chip--aimed[data-dir="r"]::after { left: calc(100% + 2px); right: auto; transform: translateY(-50%) rotate(var(--ang)); }
.ipk-ex__chip--aimed[data-dir="l"]::after { right: calc(100% + 2px); left: auto; transform-origin: 100% 50%; transform: translateY(-50%) rotate(var(--ang)); }
.ipk-ex__chip--aimed[data-dir="r"]::before { left: calc(100% + 2px + var(--dx) - 6px); right: auto; top: calc(50% + var(--dy)); }
.ipk-ex__chip--aimed[data-dir="l"]::before { left: calc(-2px + var(--dx) - 6px); right: auto; top: calc(50% + var(--dy)); }

/* Rigtigt screenshot i stedet for tegningen. Kortet ligger paa samme plads som
   tegningen, saa former og piller passer uaendret. */
.ipk-ex__ui { position: absolute; z-index: 1; display: block; height: auto; user-select: none; }
.ipk-ex__ui--phone { left: 50%; top: 4%; height: 92%; width: auto; transform: translateX(-50%);
    filter: drop-shadow(0 22px 30px rgba(11,11,18,.20)); }
.ipk-ex__ui--window { left: 6%; top: 15%; width: 84%; border-radius: 14px;
    box-shadow: 0 22px 46px rgba(11,11,18,.18), 0 2px 6px rgba(11,11,18,.10); }
@media (max-width: 520px) {
    .ipk-ex__chip { font-size: 12px; gap: .45rem; padding-right: .75rem; box-shadow: 3px 3px 0 var(--c, #7C3AED); }
    .ipk-ex__ic { width: 24px; height: 24px; }
    .ipk-ex__ic svg { width: 13px; height: 13px; }
    .ipk-ex__chip { --len: 18px; }
}

/* Collage: foto i bjergform + uddrag af den rigtige app + frostet rude med app-ikoner. */
.ipk-ex--collage { aspect-ratio: 520 / 440; }
.ipk-ex__peak {
    position: absolute; left: 12%; top: 2%; width: 68%; height: 90%;
    -webkit-clip-path: url(#ipk-peak); clip-path: url(#ipk-peak); overflow: hidden; background: #F1F1F3;
}
.ipk-ex__peak img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 40% 40%; }
.ipk-ex__frag {
    position: absolute; z-index: 2; right: -3%; top: 13%; width: 46%; aspect-ratio: 230 / 108;
    background-color: #fff; background-repeat: no-repeat; border-radius: 14px;
    border: 2px solid #15141C; box-shadow: 4px 4px 0 #0EA5E9;
}
/* Ikonerne: enkeltstaaende fliser i vores eget tag-sprog (sort kant, haard farvet skygge,
   let skaeve), ikke en frostet rude. Opbygningen er med vilje vendt i forhold til Googles
   (uddrag oppe til hoejre, ikoner nede til venstre): vi vil ikke laeses som en kopi. */
.ipk-ex__dock { position: absolute; z-index: 2; left: -2%; bottom: 4%; display: flex; gap: 10px; }
.ipk-ex__dock img {
    box-sizing: content-box; width: 34px; height: 34px; padding: 8px; background: #fff;
    border: 2px solid #15141C; border-radius: 13px; display: block;
    box-shadow: 3px 3px 0 var(--t, #7C3AED); transform: rotate(var(--r, 0deg));
}
.ipk-ex__dock img:nth-child(1) { --t: #7C3AED; --r: -5deg; }
.ipk-ex__dock img:nth-child(2) { --t: #0EA5E9; --r: 3deg;  margin-top: 6px; }
.ipk-ex__dock img:nth-child(3) { --t: #10B981; --r: -2deg; }
.ipk-ex__dock img:nth-child(4) { --t: #F59E0B; --r: 4deg;  margin-top: 6px; }
@media (max-width: 520px) { .ipk-ex__dock { gap: 6px; } .ipk-ex__dock img { width: 24px; height: 24px; padding: 6px; } }

/* Terraen: appens udsnit paa toppen af kortet. Samme tag-sprog som resten (sort kant, haard skygge). */
.ipk-ex--terrain { aspect-ratio: 520 / 440; }
.ipk-ex__summit {
    position: absolute; z-index: 2; left: 26%; top: 17%; width: 47%; aspect-ratio: 1.05;
    background-color: #fff; background-repeat: no-repeat; border-radius: 16px;
    border: 2px solid #15141C; box-shadow: 6px 6px 0 var(--acc, #7C3AED);
}

/* Appen vist som appen: en rigtig telefon (staaende paa terraenet) eller et helt app-vindue, i stedet for et
   beskaaret udsnit i en boks - et udsnit midt i en saetning laeses som et tilfaeldigt klip. Samme haarde
   skygge i appens farve som resten af sproget. */
.ipk-ex__phone { position: absolute; z-index: 2; width: auto; display: block; user-select: none;
    border: 5px solid #15141C; border-radius: 34px; background: #fff; box-shadow: 6px 6px 0 var(--acc, #7C3AED); }
.ipk-ex__win--crop { background-repeat: no-repeat; background-color: #fff; }
.ipk-ex__win { position: absolute; z-index: 2; display: block; height: auto; border-radius: 12px; overflow: hidden;
    border: 2px solid #15141C; box-shadow: 6px 6px 0 var(--acc, #7C3AED); user-select: none; }

/* Fuldbredde-megapanel (public_nav.php, layout 'full'). Baggrunden gaar fra kant til
   kant; indholdet ligger i samme max-w-7xl + px-6 som nav-raekken, saa foerste kolonne
   flugter med logoet. Kun typografi og luft - ingen kort, skygger eller ikoner. */
.ipk-mm { position: absolute; top: 100%; left: 0; right: 0; z-index: 110; background: #fff;
    border-bottom: 1px solid #E5E7EB; animation: ipkMegaIn .18s ease; }
.ipk-mm[hidden] { display: none; }
.ipk-mm__inner { max-width: 80rem; margin: 0 auto; padding: 36px 24px 44px;
    display: grid; grid-template-columns: 1.1fr 1fr 1.1fr 1fr; gap: 48px; }
.ipk-mm__label { display: block; margin-bottom: 18px; font-size: 11px; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase; color: #6B7280; }
.ipk-mm__apps a { display: block; padding: 5px 0; font-size: 20px; font-weight: 600; line-height: 1.25; color: #111;
    transition: color .15s ease; }
.ipk-mm__links a { display: block; padding: 6px 0; font-size: 14px; color: #111;
    transition: color .15s ease; }
.ipk-mm__apps a:hover, .ipk-mm__links a:hover, .ipk-mm__aside a:hover { color: #7C3AED; }
.ipk-mm__spot { display: block; max-width: 280px; }
.ipk-mm__spot-title { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; color: #111; }
.ipk-mm__spot-text { display: block; margin-bottom: 14px; font-size: 13px; line-height: 1.55; color: #6B7280; }
.ipk-mm__spot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.ipk-mm__spot-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
    font-size: 13px; color: #111; }
.ipk-mm__spot-link svg { transition: transform .25s ease; }
.ipk-mm__spot:hover .ipk-mm__spot-link svg { transform: translateX(4px); }
.ipk-mm__aside { padding-left: 32px; border-left: 1px solid #E5E7EB; }
.ipk-mm__aside p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: #4B5563; }
.ipk-mm__aside a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px;
    font-weight: 600; color: #111; transition: color .15s ease; }
.ipk-mm__note { display: block; margin-top: 8px; font-size: 12px; color: #6B7280; }
.ipk-mm--dark .ipk-mm__note { color: #9CA3AF; }
.ipk-mm--dark { background: #0B0B0F; border-bottom-color: rgba(255,255,255,0.10); }
.ipk-mm--dark .ipk-mm__apps a, .ipk-mm--dark .ipk-mm__links a, .ipk-mm--dark .ipk-mm__spot-title,
.ipk-mm--dark .ipk-mm__spot-link, .ipk-mm--dark .ipk-mm__aside a { color: #fff; }
.ipk-mm--dark .ipk-mm__label, .ipk-mm--dark .ipk-mm__spot-text, .ipk-mm--dark .ipk-mm__aside p { color: #9CA3AF; }
.ipk-mm--dark .ipk-mm__aside { border-left-color: rgba(255,255,255,0.10); }

/* Mobilmenuen (public_nav.php, #mobile-nav) i samme sprog som fuldbredde-panelet:
   fylder skaermen under nav'en, hubs folder ud med +/-, apps med fed skrift.
   --ipk-nav-b saettes af burger-knappen ved aabning (nav'ens bund i px). */
.ipk-mnav { position: absolute; top: 100%; left: 0; right: 0; z-index: 99;
    height: calc(100dvh - var(--ipk-nav-b, 50px)); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px 24px calc(32px + env(safe-area-inset-bottom)); background: #fff;
    border-top: 1px solid #E5E7EB; }
.ipk-mnav:not(.hidden) { display: block; }
@media (min-width: 768px) { .ipk-mnav { display: none !important; } html.ipk-mnav-open { overflow: auto; } }
html.ipk-mnav-open { overflow: hidden; }
.ipk-mnav__row { display: flex; align-items: center; justify-content: space-between; padding: 16px 0;
    font-size: 18px; font-weight: 500; color: #111; border-bottom: 1px solid #F0F0F2;
    cursor: pointer; list-style: none; }
.ipk-mnav__row::-webkit-details-marker { display: none; }
.ipk-mnav__row.is-active { color: #7C3AED; }
.ipk-mnav__pm { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.ipk-mnav__pm::before, .ipk-mnav__pm::after { content: ''; position: absolute; left: 0; right: 0; top: 50%;
    height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform .2s ease; }
.ipk-mnav__pm::after { transform: rotate(90deg); }
.ipk-mnav__item[open] .ipk-mnav__pm::after { transform: rotate(0deg); }
.ipk-mnav__panel { padding: 14px 0 22px; border-bottom: 1px solid #F0F0F2; }
.ipk-mnav__apps a { display: block; padding: 6px 0; font-size: 20px; font-weight: 600; line-height: 1.25; color: #111; }
.ipk-mnav__more { display: flex; flex-wrap: wrap; gap: 2px 20px; margin-top: 14px; }
.ipk-mnav__more a { padding: 6px 0; font-size: 14px; color: #4B5563; }
/* lucide() saetter inline display:inline-block paa svg, derfor !important. */
.ipk-mnav-toggle__close { display: none !important; }
.ipk-mnav-toggle[aria-expanded="true"] .ipk-mnav-toggle__open { display: none !important; }
.ipk-mnav-toggle[aria-expanded="true"] .ipk-mnav-toggle__close { display: inline-block !important; }
.ipk-mnav--dark { background: #0B0B0F; border-top-color: rgba(255,255,255,0.10); }
.ipk-mnav--dark .ipk-mnav__row, .ipk-mnav--dark .ipk-mnav__apps a { color: #fff; }
.ipk-mnav--dark .ipk-mnav__row, .ipk-mnav--dark .ipk-mnav__panel { border-bottom-color: rgba(255,255,255,0.10); }
.ipk-mnav--dark .ipk-mnav__row.is-active { color: #A78BFA; }
.ipk-mnav--dark .ipk-mnav__more a { color: #9CA3AF; }

/* Handlingslinks i megapanelet fremhaeves med violet (violet = handling, jf.
   brandfarverne). Navigationslinks (apps, Mere) forbliver sorte. */
.ipk-mm__spot-link, .ipk-mm__aside a { color: #7C3AED; font-weight: 600; }
.ipk-mm__spot:hover .ipk-mm__spot-link, .ipk-mm__aside a:hover { color: #5B21B6; }
.ipk-mm__spot:hover .ipk-mm__spot-title { text-decoration: underline; text-underline-offset: 3px; }
.ipk-mm--dark .ipk-mm__spot-link, .ipk-mm--dark .ipk-mm__aside a { color: #A78BFA; }
.ipk-mm--dark .ipk-mm__spot:hover .ipk-mm__spot-link, .ipk-mm--dark .ipk-mm__aside a:hover { color: #C4B5FD; }

/* Business-panelet: to niveauer (uden priser, Kim 25/9-2026), funktioner som mindre liste, og
   hub-siderne grupperet under hvert niveau. */
.ipk-mm__apps--sub { margin-top: 22px; padding-top: 18px; border-top: 1px solid #E5E7EB; }
.ipk-mm__apps--sub a { padding: 4px 0; font-size: 15px; font-weight: 500; }
.ipk-mm__group { display: block; margin: 14px 0 2px; font-size: 13px; font-weight: 600; color: #111; }
.ipk-mm__group:first-child { margin-top: 0; }
.ipk-mm--dark .ipk-mm__apps--sub { border-top-color: rgba(255,255,255,0.10); }
.ipk-mm--dark .ipk-mm__group { color: #fff; }