/* Celeri forside, bygget etter phantom.com sin layout og bevegelse (mål fra 1280 px).
   Phantom-farger oversatt til Celeri: lavendel -> lys rosa, mørk lilla -> bær, lilla -> pink. */
:root {
  --pink: #ff0087;
  --pink-btn: #ff0087;    /* alle rosa knapper */
  --ink: #070708;         /* Black 900: all mørk tekst */
  --berry: #5c0031;        /* Pink 900 (Colors 2026) */
  --berry-2: #850046;      /* Pink 800: kort og meny på mørke flater (Pink 900) */
  --blush: #fff4f9;        /* BG Blush */
  --soft: #ffe5f3;         /* Pink 100 */
  --mid: #ff8ac8;          /* Pink 300 */
  --cream: #fdfcfc;
  --lime: #c9ff40;        /* Lime 400 */
  --display: "Vesper Libre", Georgia, serif;   /* overskrifter */
  --ui: "Archivo", system-ui, sans-serif;        /* logoen og tekst i illustrasjonene (ser ut som appen) */
  --body: "Poppins", system-ui, sans-serif;
  --ease: cubic-bezier(.22,.8,.24,1);
  --t: 400ms;              /* Phantom bytter tema på 400 ms */
}

/* Tema styres av data-theme på <html>, settes fra seksjonen midt i skjermen */
html { --bg: var(--blush); --fg: var(--ink); --pill: #fff; --pill-fg: var(--ink); --tag: #ffb7dd; --btn-fg: var(--ink); --cta: var(--pink-btn); --cta-fg: #fff;
  background: var(--bg); color: var(--fg); transition: background-color var(--t), color var(--t); }
html[data-theme="dark"] { --bg: var(--berry); --fg: #fff4f9; --pill: var(--berry-2); --pill-fg: #fff4f9; --tag: var(--berry-2); --btn-fg: #fff; --cta: var(--pink-btn); --cta-fg: #fff; }
html[data-theme="pink"] { --bg: var(--mid); --fg: var(--ink); --pill: #fff; --pill-fg: var(--ink); --tag: #fff; --btn-fg: var(--ink); --cta: var(--pink-btn); --cta-fg: #fff; }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 400 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; text-wrap: balance; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; padding: 10px 14px; }
.wrap { max-width: 1560px; margin: 0 auto; padding: 0 clamp(16px, 3.75vw, 48px); } /* innhold maks 1464 px, som Phantom */

/* Knapper: myke piller, fargen følger temaet */
.pill-btn {
  display: inline-flex; align-items: center; gap: 10px; border: 0; cursor: pointer; text-decoration: none;
  border-radius: 999px; font: 500 1rem/1 var(--body); padding: 0 20px; min-height: 49px;
  background: transparent; color: var(--btn-fg); transition: background-color var(--t), color var(--t), transform .2s;
  box-shadow: inset 0 0 0 1.5px currentColor;   /* sekundærknapp: kantlinje i tekstfargen */
}
.pill-btn:hover { transform: translateY(-1px); background: color-mix(in srgb, currentColor 8%, transparent); }
.pill-btn--cta { box-shadow: none; }
.pill-btn--cta, .pill-btn--cta:hover { background: var(--cta); color: var(--cta-fg); min-height: 52px; padding: 0 32px; font-weight: 700; }
.pill-btn--xl { min-height: clamp(56px, 6vw, 89px); padding: 0 clamp(24px, 2.4vw, 32px); font-size: clamp(1rem, 1.25vw, 1.125rem); }
.pill-btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* Nav: logo, hvit pille i midten, CTA til høyre (Phantom: pille 60 px høy) */
.ph-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 92px; padding-top: 24px; } /* Phantom: pille 24 px fra toppen */
.ph-nav > .wrap { width: 100%; }
.ph-nav__in { display: flex; align-items: center; gap: 8px; }
.ph-logo { font: 700 2.15rem/1 var(--ui); letter-spacing: -0.05em; text-decoration: none; color: #0b0c0c; transition: color var(--t); }
html[data-theme="dark"] .ph-logo { color: var(--fg); }   /* sort logo, men lys på mørke flater så den syns */
.ph-links {
  margin: 0 auto; display: flex; gap: 0; list-style: none; padding: 8px; border-radius: 100px; height: 60px; align-items: center;
  background: var(--pill); color: var(--pill-fg); transition: background-color var(--t), color var(--t);
}
.ph-links a, .ph-links summary { display: flex; align-items: center; height: 44px; padding: 0 24px; border-radius: 999px; text-decoration: none; font-size: 1rem; font-weight: 400; cursor: pointer; list-style: none; white-space: nowrap; }
.ph-links summary::-webkit-details-marker { display: none; }
.ph-links summary::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-3px) rotate(45deg); }
.ph-links a:hover, .ph-links summary:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.ph-links details { position: relative; }
.ph-menu { position: absolute; top: calc(100% + 14px); left: 0; min-width: 260px; padding: 8px; border-radius: 20px; background: var(--pill); box-shadow: 0 20px 40px -20px rgba(92,0,49,.35); }
.ph-menu a { border-radius: 12px; }
.ph-menu small { display: block; opacity: .65; font-size: .8rem; font-weight: 400; }
.ph-burger { display: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--pill); color: var(--pill-fg); margin-left: auto; cursor: pointer; }
.ph-burger span { display: block; width: 18px; height: 2px; margin: 4px auto; background: currentColor; }
@media (max-width: 900px) {
  .ph-burger { display: block; }
  .ph-nav .pill-btn--cta { display: none; }
  .ph-links { display: none; position: absolute; left: 16px; right: 16px; top: 84px; height: auto; flex-direction: column; align-items: stretch; border-radius: 24px; padding: 12px; }
  .ph-nav[data-open] .ph-links { display: flex; }
  .ph-links a, .ph-links summary { font-size: 1.1rem; padding: 0 16px; height: 52px; }
  .ph-menu { position: static; box-shadow: none; padding: 0 0 0 12px; }
  .ph-links .m-cta { display: block; }
}
.ph-links .m-cta { display: none; margin-top: 8px; }
.ph-links .m-cta .pill-btn { width: 100%; justify-content: center; font-weight: 700; color: #fff; }

/* Hero: innfelt kort, 24 px radius, ~634 px høyt (Phantom) */
.ph-hero { padding-top: calc(92px + max(16px, 20.82vh - 138.6px)); }
.ph-hero__card {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 24px; aspect-ratio: 1464 / 794;
  display: grid; place-items: center; text-align: center; color: #fff4f9; padding: 48px 24px; background: var(--berry);
}
.ph-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* Mørkt lag så hvit tekst er lesbar over en lys video */
.ph-hero__card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 60% at 50% 50%, rgba(7,7,8,.55), rgba(7,7,8,.25) 70%), rgba(7,7,8,.2); }
.ph-hero__pause { position: absolute; right: 20px; bottom: 20px; z-index: 3; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(7,7,8,.35); color: #fff4f9; backdrop-filter: blur(10px); font-size: 12px; }
@media (max-width: 700px) { .ph-hero__card { aspect-ratio: auto; min-height: min(640px, calc(100svh - 120px)); } }
.ph-hero__text { display: grid; justify-items: center; gap: 24px; position: relative; z-index: 2; }
.ph-eyebrow { font: 400 clamp(1.1rem, 1.9vw, 1.5rem)/1.35 var(--body); letter-spacing: -0.025em; text-wrap: balance; }
.ph-h1 { font-size: clamp(2.5rem, 5.556vw, 5.75rem); line-height: 1.1; letter-spacing: -0.025em; max-width: 9.4em; }
.ph-hero__sub { max-width: 560px; text-wrap: balance; font-size: clamp(1rem, 1.3vw, 1.125rem); color: rgba(255,244,249,.85); }
.ph-hero .pill-btn--xl { margin-top: 40px; }

/* Seksjonsintro: stor sentrert overskrift med ikon inni (Phantom: 96/105.6, -2.4px) */
.ph-intro { padding: clamp(96px, 14vw, 180px) 0 clamp(48px, 6vw, 72px); text-align: center; }
.ph-h2 { font-size: clamp(2.6rem, 7.5vw, 6rem); line-height: 1.1; letter-spacing: -0.025em; }
.ph-intro .pill-btn { margin-top: 32px; }
.ph-intro__eyebrow { font: 400 clamp(1rem, 1.9vw, 1.5rem)/1.35 var(--body); letter-spacing: -0.025em; opacity: .8; margin-bottom: 16px; }
.ico { display: inline-block; height: .8em; width: auto; vertical-align: -0.08em; margin: 0 .08em; animation: sway 2.4s ease-in-out infinite alternate; }
@keyframes sway { from { transform: translate(-4px, 0) rotate(5deg); } to { transform: translate(2px, 3px) rotate(-3deg); } }
.js .rise { opacity: 0; transform: scale(.95); }
.js .rise.in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }

/* Karusell: høye kort med tag og piler (Phantom: "Trading") */
.ph-rail__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.ph-tag { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--tag); color: var(--pill-fg); font-weight: 500; font-size: .95rem; transition: background-color var(--t); }
.ph-tag svg { width: 18px; height: 18px; }
.ph-arrows { display: flex; gap: 8px; }
.ph-arrows button { width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; font-size: 1rem; transition: opacity .2s, background-color var(--t); }
.ph-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(368px, 82vw); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.ph-rail::-webkit-scrollbar { display: none; }
.ph-card { scroll-snap-align: start; position: relative; overflow: hidden; height: 493px; border-radius: 24px; padding: 28px; display: grid; align-content: start; gap: 12px; }
.ph-card h3 { font: 500 1.6rem/1.2 var(--display); letter-spacing: -0.02em; }
.ph-card p { font-size: 1rem; opacity: .85; max-width: 30ch; }
.ph-card--pink { background: var(--pink); color: var(--ink); }
.ph-card--berry { background: var(--berry); color: #fff4f9; }
.ph-card--cream { background: var(--cream); color: var(--ink); }
.ph-card--lime { background: var(--lime); color: var(--ink); }
.ph-card .art { position: absolute; left: 20px; right: 20px; bottom: 20px; display: grid; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 10px 14px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 600; font-size: .9rem; box-shadow: 0 10px 20px -12px rgba(7,7,8,.4); }
.chip--dark { background: var(--berry-2); color: #fff4f9; }
.chip--pink { background: var(--pink); color: var(--ink); }
.chip i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); font-size: .75rem; }
.chip:nth-child(2) { justify-self: center; rotate: -4deg; }
.chip:nth-child(3) { justify-self: end; rotate: 5deg; }
.avatars { display: flex; }
.avatars span { width: 44px; height: 44px; border-radius: 50%; margin-left: -10px; border: 3px solid currentColor; display: grid; place-items: center; font: 600 .8rem var(--body); background: var(--soft); color: var(--ink); }
.avatars span:first-child { margin-left: 0; }

/* Kortstabel (Phantom: forreste kort + to bak, forskjøvet) */
.ph-deck { position: relative; width: min(368px, 86vw); height: 493px; margin: 0 auto; touch-action: pan-y; }
.ph-deck .d-card {
  position: absolute; inset: 0; border-radius: 24px; padding: 28px; display: grid; align-content: start; gap: 12px; cursor: grab;
  transition: transform .6s var(--ease), opacity .6s var(--ease); transform-origin: 50% 100%; user-select: none;
}
.ph-deck .d-card[data-pos="0"] { z-index: 3; transform: none; }
.ph-deck .d-card[data-pos="1"] { z-index: 2; transform: translate(12px, -8px) scale(.97); }
.ph-deck .d-card[data-pos="2"] { z-index: 1; transform: translate(24px, -16px) scale(.94); }
.ph-deck .d-card[data-pos="3"], .ph-deck .d-card[data-pos="4"] { z-index: 0; transform: translate(24px, -16px) scale(.94); opacity: 0; }
.ph-deck .d-card.fly { transform: translate(-130%, 20px) rotate(-14deg) !important; opacity: 0; transition-duration: .45s; }
.d-card .num { font: 500 3.5rem/1 var(--display); letter-spacing: -0.04em; }
.d-card h3 { font: 500 1.6rem/1.2 var(--display); letter-spacing: -0.02em; }
.d-card p { opacity: .85; }
.d-card .logos { display: grid; gap: 12px; margin-top: 12px; }
.d-card .logos span { font: 700 1.6rem/1 var(--ui); letter-spacing: -0.03em; }
.ph-deck__nav { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 28px; }
.ph-deck__nav .count { font-variant-numeric: tabular-nums; font-weight: 500; min-width: 3.5em; text-align: center; }

/* Avslutning (pink tema) */
.ph-final { padding: clamp(120px, 16vw, 200px) 0 clamp(96px, 12vw, 160px); text-align: center; }
.ph-final .pill-btn { margin-top: 40px; }

/* Footer: hvitt kort inne i fargeflaten (Phantom) */
.ph-foot { padding: 0 0 24px; }
.ph-foot__card { background: var(--cream); color: var(--ink); border-radius: 24px; padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: 1fr 2.4fr; gap: 40px; }
.ph-foot__mark { font: 700 2rem/1 var(--ui); letter-spacing: -0.05em; text-decoration: none; }
.ph-foot__big { display: grid; gap: 16px; background: #ffe5f3; border-radius: 20px; padding: 24px 28px; text-decoration: none; transition: background .2s; }
.ph-foot__big:hover { background: var(--soft); }
.ph-foot__big strong { font: 500 clamp(2rem, 4.4vw, 3.25rem)/1.05 var(--display); letter-spacing: -0.025em; opacity: .75; }
.ph-foot__big span { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.ph-foot__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 32px; font-size: .9rem; }
.ph-foot__cols h4 { margin: 0 0 12px; font: 500 .85rem var(--body); opacity: .6; }
.ph-foot__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ph-foot__cols a { text-decoration: none; font-weight: 500; }
.ph-foot__cols a:hover { color: var(--pink); }
.ph-foot__cols address { font-style: normal; line-height: 1.6; }
.ph-foot__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 20px 4px 0; font-size: .85rem; }
.ph-foot__base a { text-decoration: none; margin-left: 16px; }
@media (max-width: 860px) { .ph-foot__card { grid-template-columns: 1fr; } .ph-foot__cols { grid-template-columns: 1fr 1fr; } }

/* Gatede elementer (G1–G5) vises, med rosa stiplet ramme til tall og innhold er godkjent.
   Bare eksempelannonsen på jobbsiden er skjult (vises med ?utkast). */
[data-gate] { outline: 2px dashed var(--pink); outline-offset: 6px; }
[data-gate="eksempel"] { display: none !important; outline: 0; }
.show-gates [data-gate="eksempel"] { display: revert !important; outline: 2px dashed var(--pink); }

@media (prefers-reduced-motion: reduce) {
  html, .pill-btn, .ph-links, .ph-tag { transition: none; }
  .ico { animation: none; }
  .js .rise { opacity: 1; transform: none; }
  .ph-deck .d-card { transition: none; }
}

.ph-lead { max-width: 640px; margin: 24px auto 0; font-size: clamp(1rem, 1.4vw, 1.2rem); opacity: .8; }

/* Logo (Celeri SVG). Følger temafargen via currentColor. */
.ph-logo { display: inline-flex; align-items: center; flex: none; }
.ph-logo__svg { height: 28px; width: auto; display: block; transition: height .4s var(--ease); }

/* Navbar på scroll: trekker seg sammen til en smalere glass-pille */
.ph-nav, .ph-nav > .wrap, .ph-nav__in, .ph-links, .ph-links a, .ph-links summary, .ph-nav .pill-btn--cta {
  transition: padding .45s var(--ease), max-width .55s var(--ease), height .45s var(--ease), min-height .45s var(--ease),
    background-color var(--t), border-color .45s, box-shadow .45s, backdrop-filter .45s, color var(--t);
}
.ph-nav__in { border: 1px solid transparent; border-radius: 999px; }
.ph-nav.is-scrolled { padding-top: 12px; }
.ph-nav.is-scrolled > .wrap { max-width: 1040px; }
.ph-nav.is-scrolled .ph-nav__in {
  padding: 6px 6px 6px 24px;
  background: color-mix(in srgb, var(--pill) 58%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  border-color: color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 12px 32px -16px rgba(7,7,8,.35);
}
.ph-nav.is-scrolled .ph-links { background: transparent; height: 52px; padding: 4px; }
.ph-nav.is-scrolled .ph-links a, .ph-nav.is-scrolled .ph-links summary { height: 40px; padding: 0 18px; }
.ph-nav.is-scrolled .pill-btn--cta { min-height: 48px; padding: 0 24px; }
.ph-nav.is-scrolled .ph-logo__svg { height: 24px; }
html[data-theme="dark"] .ph-nav.is-scrolled .ph-nav__in { border-color: color-mix(in srgb, #fff 14%, transparent); }
@media (max-width: 900px) {
  .ph-nav.is-scrolled { padding-top: 8px; }
  .ph-nav.is-scrolled > .wrap { padding: 0 12px; }
  .ph-nav.is-scrolled .ph-nav__in { padding: 6px 6px 6px 18px; }
  .ph-nav.is-scrolled .ph-burger { background: transparent; }
  .ph-nav.is-scrolled .ph-links { background: var(--pill); height: auto; padding: 12px; top: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-nav, .ph-nav > .wrap, .ph-nav__in, .ph-links, .ph-links a, .ph-links summary, .ph-nav .pill-btn--cta, .ph-logo__svg { transition: none; }
}
.ph-foot__mark { color: #0b0c0c; align-self: start; display: inline-flex; }
.ph-foot__logo { height: 32px; width: auto; display: block; }

/* Ikon i overskriften: ~1.05em, sentrert på linja (Phantom: .85–1.1em, margin-block -.25em) */
.ph-h2 .ico { height: .92em; vertical-align: middle; margin: -0.25em .12em; position: relative; top: -0.05em; }
/* Avslutningen er ikke låst, men fyller én skjermhøyde */
.ph-final { min-height: 100vh; min-height: 100svh; display: grid; place-content: center; padding: 96px 0; }
.ph-lead { text-align: center; margin-top: 40px; }
/* Phantom bryter overskriften over to linjer (~602 px bred) */


/* Phantom-overskrifter: vekt 400 */
.ph-h2 { font-weight: 400; }

/* ===== Låste overskrifter (Phantom) =====
   Overskriften ligger i et sticky lag uten høyde, midt på skjermen, UNDER innholdet som følger.
   Innholdet (heroen, karusellen, stabelen) scroller over og bort; når bunnen passerer overskriften
   toner den inn på ~200 ms (opasitet 0 -> 1, skala .95 -> 1). Etter ~69vh slipper den og scroller opp. */
.ph-stage { position: relative; }
/* Sporet dekker hele trinnet uten å ta plass. Overskriften er sticky inne i det, sentrert på skjermen,
   og har 90 px luft under seg: den slipper når innholdet under når 90 px fra «Se mer» (Phantom),
   og scroller så opp sammen med det. --pin-h settes fra JS (blokkens høyde inkl. 90 px). */
.ph-stage__pin { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ph-pin__in { position: sticky; top: calc(50vh - (var(--pin-h, 400px) - 90px) / 2); padding-bottom: 90px;
  text-align: center; opacity: 0; transform: scale(.95); pointer-events: none; will-change: opacity, transform; }
.ph-pin__in.in { pointer-events: auto; } /* opasitet og skala settes fra scroll i JS */
.ph-pin__in .pill-btn { margin-top: 48px; min-height: 52px; } /* Phantom: 48 px avstand, 52 px knapp */
.ph-pin__links { margin-top: 40px; font-size: 1.0625rem; font-weight: 500; }
.ph-pin__links a { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; padding: 8px 2px; }
.ph-pin__links a:hover { color: var(--pink-btn); }
.ph-stage__cover { position: relative; z-index: 1; }
/* Hvor lenge overskriften står låst før innholdet under når den. Juster --pin-hold for lengre/kortere. */
:root { --pin-hold: 90vh; }
.ph-stage__space { height: calc(var(--pin-hold) + var(--pin-h, 400px)); }
.ph-stage__cover .ph-rail__head { padding-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .ph-stage { display: flex; flex-direction: column; }
  .ph-stage__pin { position: static; order: 2; padding: 120px 0 64px; }
  .ph-pin__in { position: static; padding-bottom: 0; }
  .ph-stage:not(:first-child) .ph-stage__pin { order: 0; }
  .ph-stage__cover { order: 1; } .ph-stage__space { display: none; }
  .ph-pin__in { translate: none; opacity: 1; transform: none; pointer-events: auto; transition: none; }
}

/* ===== Modulkarusell (Phantom "Trading"). Mål fra phantom.com ved 1656 px:
   kort 466 x 625 (forhold .746), radius 24, luft 48/48/0, tekst 36/1.2 vekt 400, mellomrom 32.
   Raden går ut til høyre skjermkant. ===== */
.ph-rail__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 56px; }
.ph-tag { height: 48px; padding: 8px 16px; gap: 8px; font-size: 1rem; font-weight: 500; }
.ph-tag svg { width: 20px; height: 20px; }
.ph-arrows { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--tag); transition: background-color var(--t); }
.ph-arrows button { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px currentColor; background: transparent; color: var(--pill-fg); transition: background-color .2s, color .2s, opacity .2s; }
.ph-arrows button svg { width: 20px; height: 20px; }
.ph-arrows button:disabled { box-shadow: none; cursor: default; }
.ph-arrows button:not(:disabled):hover { background: color-mix(in srgb, currentColor 8%, transparent); }

.ph-rail {
  display: flex; gap: 24px; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  margin-right: calc(50% - 50vw); padding-right: calc(50vw - 50%); /* går ut til høyre kant */
  cursor: grab;
}
.ph-rail.dragging { cursor: grabbing; scroll-snap-type: none; }
.ph-rail::-webkit-scrollbar { display: none; }
.ph-card {
  flex: none; width: min(45vw, 466px); aspect-ratio: 466 / 625; height: auto; scroll-snap-align: start;
  position: relative; overflow: hidden; border-radius: 24px; padding: 32px 32px 0; display: block; user-select: none;
}
.ph-card .ph-card__t { font: 400 clamp(1.5rem, 2.17vw, 2.25rem)/1.2 var(--display); opacity: 1; max-width: none; letter-spacing: -0.01em; position: relative; z-index: 2; text-wrap: pretty; }
.ph-card .ph-card__s { margin-top: 12px; font-size: 1rem; line-height: 1.45; opacity: .75; position: relative; z-index: 2; max-width: 34ch; }
.ph-card--mid   { background: var(--mid); color: #111214; }
.ph-card--ink   { background: #111214; color: #fdfcfc; }
.ph-card--light { background: #ffe5f3; color: #111214; }
.ph-card--hot   { background: #ff5cb2; color: #111214; }
.ph-rail--steps .ph-card .ph-card__t { font-size: clamp(1.5rem, 1.9vw, 1.875rem); }
.ph-rail--steps .ph-card .ph-card__s { font-size: 1.0625rem; line-height: 1.4; opacity: 1; max-width: none; }
.ph-rail--steps .ph-card .art--pool { top: auto; bottom: 24px; display: flex; justify-content: center; }
.art--pool celeri-pool { font-size: clamp(84px, 8.3vw, 125px); }
@media (max-width: 700px) { .art--pool celeri-pool { font-size: 24vw; } }
/* Sees!-kortet: lyse rader på svart, så de står ut */
.ph-rail--steps .prof { background: #fff; }
.ph-rail--steps .prof .av, .ph-rail--steps .prof .chip:not(.chip--pink) { background: #111214; color: #fff; }
.ph-rail--steps .prof .ln { background: rgba(17,18,20,.18); }
/* Tekst til venstre, bilde til høyre */
.ph-split { scroll-margin-top: 112px; display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: center; margin-bottom: clamp(96px, 12vw, 160px); }
.ph-split__t { font: 400 clamp(2rem, 3.4vw, 3.25rem)/1.15 var(--display); letter-spacing: -0.02em; }
.ph-split__s { margin-top: 20px; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.5; }
.ph-split__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 24px; }
.ph-split__img--shot { aspect-ratio: auto 1600 / 1054; border-radius: 0; } /* vinduet i bildet har egne runde hjørner */
/* Dashbordet vippes opp fra liggende og glir på plass når det kommer inn i bildet */
.js .ph-split__img--shot.rise { transform: perspective(1400px) rotateX(18deg) translateY(56px) scale(.94); transform-origin: 50% 100%; }
.js .ph-split__img--shot.rise.in { transform: none; transition: opacity 1s var(--ease), transform 1.3s var(--ease); }
@media (prefers-reduced-motion: reduce) { .js .ph-split__img--shot.rise { opacity: 1; transform: none; } }
.ph-lead + .ph-split { margin-top: clamp(96px, 12vw, 160px); }
@media (max-width: 860px) { .ph-split { grid-template-columns: 1fr; } }
@media (min-width: 861px) {
  .ph-split--flip { grid-template-columns: 7fr 5fr; }
  .ph-split--flip .ph-split__img { order: -1; }
}
.ph-card--ink .hl { color: var(--pink); }
@media (min-width: 1280px) { .ph-card { width: min(28.15vw, 466px); padding: 48px 48px 0; } }
@media (min-width: 1440px) { .ph-rail { gap: 32px; } }
@media (max-width: 700px) { .ph-card { width: 82vw; } .ph-rail__head { margin-bottom: 32px; } }

/* Illustrasjoner (egne Celeri-motiver), forankret nederst i kortet */
.ph-card .art { position: absolute; left: 0; right: 0; bottom: 0; top: 46%; pointer-events: none; }
.chip--soft { background: var(--soft); }
/* 1: påmeldingskort som stikker opp fra bunnen */
.signup { position: absolute; left: 7%; right: 7%; bottom: -24px; top: 6%; background: #111214; color: #fdfcfc; border-radius: 28px 28px 0 0;
  border: 8px solid #1c1e21; border-bottom: 0; padding: 18px 18px 0; display: grid; gap: 10px; align-content: start; }
.signup__bar { display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.1); }
.signup__logo { grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; background: #1c1e21; display: grid; place-items: center; }
.signup__logo svg { width: 24px; }
.signup__bar b { font-weight: 600; font-size: 1rem; } .signup__bar i { font-style: normal; font-size: .75rem; opacity: .6; }
.signup__field { height: 40px; border-radius: 12px; background: #1c1e21; display: flex; align-items: center; padding: 0 14px; font-size: .85rem; opacity: .7; }
.signup__row { display: flex; gap: 6px; flex-wrap: wrap; } .signup__row .chip { padding: 7px 12px; font-size: .8rem; rotate: none; justify-self: auto; box-shadow: none; }
.signup__btn { height: 46px; border-radius: 999px; background: var(--pink); color: #111214; display: grid; place-items: center; font-weight: 600; margin-top: 4px; }
/* 2: app-flis med svevende etiketter og former */
.art--float .tile { position: absolute; left: 50%; top: 42%; translate: -50% -50%; width: 104px; height: 104px; border-radius: 26px; background: var(--mid); display: grid; place-items: center; box-shadow: 0 20px 40px -20px rgba(7,7,8,.6); }
.art--float .tile svg { width: 70px; }
.art--float .chip { position: absolute; }
.art--float .f1 { left: 9%; top: 6%; rotate: -8deg; } .art--float .f2 { right: 10%; top: 18%; rotate: 9deg; } .art--float .f3 { left: 16%; bottom: 16%; rotate: 6deg; }
.blob { position: absolute; border-radius: 50%; }
.b1 { width: 70px; height: 70px; background: var(--lime); right: 12%; bottom: 12%; }
.b2 { width: 34px; height: 54px; background: var(--soft); left: 8%; top: 38%; border-radius: 40px; rotate: 20deg; }
.b3 { width: 120px; height: 120px; background: var(--pink); right: -30px; bottom: -40px; opacity: .9; }
/* 3: billetter og betalt-merke */
.stub { position: absolute; padding: 12px 22px; border-radius: 8px; background: #dadada; color: #959d9d; font: 600 1.6rem/1 var(--ui); letter-spacing: -0.02em; }
.stub--lime { background: var(--lime); color: #111214; }
.s1 { left: -10px; top: 6%; rotate: -24deg; } .s2 { right: 6%; top: 14%; rotate: 12deg; } .s3 { left: 22%; bottom: 4%; rotate: 58deg; } .s4 { right: -8px; bottom: 28%; rotate: -38deg; }
.paid { position: absolute; left: 50%; top: 52%; translate: -50% -50%; display: grid; justify-items: center; gap: 6px; text-align: center; }
.paid .check { width: 64px; height: 64px; border-radius: 50%; background: var(--pink); color: #111214; display: grid; place-items: center; font-size: 1.8rem; font-weight: 700; }
.paid b { font: 500 1.9rem/1.05 var(--ui); letter-spacing: -0.02em; max-width: 9ch; }
.paid small { font-size: .9rem; opacity: .7; }
/* 4: profiler */
.art--profiles { display: grid; gap: 10px; align-content: start; padding: 0 9% ; top: 52%; }
.prof { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; background: #1c1e21; border-radius: 16px; padding: 10px 12px; }
.prof .av { width: 44px; height: 44px; border-radius: 50%; background: var(--soft); color: #111214; display: grid; place-items: center; font-weight: 600; font-size: .85rem; }
.prof .ln { height: 10px; border-radius: 6px; background: rgba(255,255,255,.18); }
.prof .chip { rotate: none !important; justify-self: end !important; padding: 7px 12px; font-size: .8rem; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .ph-rail { scroll-behavior: auto; } }

/* Raden går ut til skjermkanten, men siden skal ikke kunne scrolles sidelengs */
.ph-stage__cover { overflow-x: clip; }

/* Karusell med transform (Phantom): ingen vanlig scrolling, dra med ew-resize-markør */
.ph-rail { overflow: visible; scroll-snap-type: none; margin-right: 0; padding-right: 0; cursor: ew-resize;
  touch-action: pan-y; will-change: transform; user-select: none; -webkit-user-select: none; }
.ph-rail.dragging { cursor: ew-resize; }
.ph-rail img, .ph-rail svg { -webkit-user-drag: none; }
/* Hover: illustrasjonen zoomer mykt inn (Phantom: transform .4s ease-in-out), kortet løfter seg litt */
.ph-card { transition: transform .4s cubic-bezier(.34,1.4,.64,1); }
.ph-card .art { transition: transform .4s ease-in-out; transform-origin: 50% 100%; }
@media (hover: hover) {
  .ph-rail:not(.dragging) .ph-card:hover { transform: translateY(-6px) scale(1.015); }
  .ph-rail:not(.dragging) .ph-card:hover .art { transform: scale(1.06); }
  .ph-rail:not(.dragging) .ph-card:hover .art--float .chip { translate: 0 -6px; }
}
.art--float .chip, .art--float .tile { transition: translate .4s ease-in-out; }
.ph-rail.dragging .ph-card { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) { .ph-card, .ph-card .art { transition: none; } .ph-rail .ph-card:hover, .ph-rail .ph-card:hover .art { transform: none; } }

/* ===== Sesongkort (Phantom "Spend, Send & Save"): tre kort side om side.
   Desktop: 12-kolonners rutenett, hvert kort spenner 4 (467 x 625 ved 1656 px). Smalt: rad man drar/scroller i. ===== */
.ph-trio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.ph-trio .ph-card { grid-column: span 4; width: auto; }
@media (min-width: 1440px) { .ph-trio { gap: 32px; } }
@media (max-width: 1023px) {
  .ph-trio { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-right: calc(50% - 50vw); padding-right: calc(50vw - 50%); }
  .ph-trio::-webkit-scrollbar { display: none; }
  .ph-trio .ph-card { flex: none; width: min(45vw, 466px); scroll-snap-align: start; }
}
@media (max-width: 700px) { .ph-trio .ph-card { width: 82vw; } }
@media (hover: hover) {
  .ph-trio .ph-card:hover { transform: translateY(-6px) scale(1.015); }
  .ph-trio .ph-card:hover .art { transform: scale(1.06); }
  .ph-trio .ph-card:hover .art--float .chip { translate: 0 -6px; }
}
.tile--ink { background: #111214 !important; }
.prof .av { font-size: .7rem; }
.art--tickets .paid b { max-width: 8ch; }

/* ===== Mørk seksjon, «Blandet crew» (Phantom «Your security»): lyse kort på mørk bakgrunn, tekst 34.5 px ===== */
.ph-card--cream { background: #fdfcfc; color: #111214; }
.ph-card--lemon { background: #edffbe; color: #111214; }
.ph-card--blush { background: #ffe5f3; color: #111214; }
.ph-rail--sec .ph-card .ph-card__t { font-size: clamp(1.4rem, 2.08vw, 2.16rem); }
.art--crew .chip { position: absolute; }
.art--crew .c1 { left: 10%; top: 14%; rotate: -6deg; } .art--crew .c2 { right: 12%; top: 34%; rotate: 7deg; } .art--crew .c3 { left: 18%; bottom: 20%; rotate: -3deg; }
.art--logos { display: grid; align-content: center; justify-items: center; gap: 18px; }
.art--logos span { font: 700 clamp(1.6rem, 2.6vw, 2.6rem)/1 var(--ui); letter-spacing: -0.03em; color: #111214; }
.art--logos span + span { opacity: .55; }
.ph-rail--sec .chip--soft { background: #fff; }
/* Rader som går ut til skjermkanten skal ikke gi sidelengs scroll på siden */
.ph-after { overflow-x: clip; }
/* Partnerlogoer (ekte filer): én lys flis per logo, jevnt stablet og sentrert,
   lik visuell høyde i stedet for lik bredde (logoene har ulike proporsjoner) */
.ph-card .art--logos { list-style: none; margin: 0; top: 24%; bottom: 7%; padding: 0 9%;
  display: grid; grid-auto-rows: minmax(0, 116px); gap: 12px; align-content: center; justify-items: stretch; }
.art--logos li { display: flex; align-items: center; justify-content: center; border-radius: 18px;
  background: rgba(255, 255, 255, .62); box-shadow: 0 10px 24px -18px rgba(92,0,49,.45); }
.art--logos img { display: block; width: auto; max-width: 78%; -webkit-user-drag: none; pointer-events: none; }
.art--logos img[alt="PayoutPartner"] { height: clamp(28px, 2.5vw, 42px); }
.art--logos img[alt="Saldo Bank"] { height: clamp(26px, 2.3vw, 38px); }
.art--logos img[alt="EML"] { height: clamp(20px, 1.7vw, 28px); }
.show-gates .art--logos li[data-gate] { display: flex !important; } /* behold sentreringen i utkast-modus */

/* ===== Avslutning (Phantom): én skjermhøyde, 128 px luft, linje 24 px, 32 px til overskrift, knapp 48 px under ===== */
.ph-final { min-height: 100vh; min-height: 100svh; padding: 128px 0; display: grid; place-content: center; text-align: center; }
.ph-final .ph-intro__eyebrow { margin-bottom: 32px; opacity: 1; }
.ph-final .ph-h2 { font-weight: 400; }
.ph-final .pill-btn--xl { margin-top: 48px; }

/* ===== Footer (Phantom): hvitt kort 24 px under toppen, 48 px luft, radius 24.
   Venstre kolonne 466 px: logo øverst, pille nederst. Høyre: stor boks (lys grå, 24 px luft, radius 16,
   64 px tekst, knapp 52 px nede til høyre), kolonner 64 px under, grå 16 px overskrifter. ===== */
.ph-foot { padding: 24px 0 24px; }
.ph-foot__card { display: grid; grid-template-columns: 466fr 902fr; gap: 0; padding: 48px; border-radius: 24px; background: #fdfcfc; color: var(--ink); }
.ph-foot__side { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 32px; }
.ph-foot__logo { height: 36px; }
.ph-foot__pill { font-style: normal; font-size: .9375rem; line-height: 1.3; padding: 8px 12px; border-radius: 100px; background: #ffe5f3; max-width: 34ch; }
.ph-foot__big { display: grid; gap: 24px; padding: 24px; border-radius: 16px; background: #ffe5f3; min-height: 209px; align-content: space-between; text-decoration: none; transition: background-color .2s; }
.ph-foot__big:hover { background: #ffb7dd; }
.ph-foot__big strong { font: 400 clamp(2.25rem, 3.86vw, 4rem)/1 var(--display); letter-spacing: -0.025em; color: color-mix(in srgb, var(--ink) 55%, transparent); }
.ph-foot__big > span { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; font-size: 1rem; line-height: 1.4; }
.ph-foot__big .pill-btn { flex: none; min-height: 52px; padding: 0 32px; color: var(--ink); font-style: normal; }
.ph-foot__cols { margin-top: 64px; grid-template-columns: repeat(4, 1fr); gap: 24px; font-size: 1rem; }
.ph-foot__cols h4 { margin: 0 0 16px; font: 400 1rem var(--body); color: #959d9d; opacity: 1; }
.ph-foot__cols ul { gap: 14px; }
.ph-foot__cols a { font-weight: 400; }
.ph-foot__base { padding: 25px 0 0; font-size: .9375rem; color: var(--ink); }
.ph-foot__base a { margin-left: 24px; }
@media (max-width: 860px) {
  .ph-foot__card { grid-template-columns: 1fr; padding: 28px; gap: 32px; }
  .ph-foot__side { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .ph-foot__big > span { flex-direction: column; align-items: flex-start; }
  .ph-foot__cols { grid-template-columns: 1fr 1fr; margin-top: 40px; }
}

/* ===== Case (F9, gate G1): sentrert tag + 96 px overskrift, så to kort i 12-kolonners rutenett (8 + 4) ===== */
.ph-case { padding: 128px 0; overflow-x: clip; }
.ph-case__head { display: grid; justify-items: center; gap: 32px; text-align: center; margin-bottom: 56px; }
.ph-case__head .ph-h2 { font-weight: 400; }
.ph-case__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
@media (min-width: 1440px) { .ph-case__grid { gap: 32px; } }
.ph-case__grid .ph-card { width: auto; }
.ph-case__main { grid-column: span 8; aspect-ratio: auto; }
.ph-case__video { grid-column: span 4; display: grid; place-items: center; }
.ph-case__skeleton { display: grid; gap: 18px; max-width: 640px; }
.sk { display: block; height: 18px; border-radius: 9px; background: #ffe5f3; position: relative; overflow: hidden; }
.sk--xl { height: 56px; width: 70%; border-radius: 14px; } .sk--l { height: 56px; width: 48%; border-radius: 14px; margin-bottom: 24px; } .sk--m { width: 60%; }
.sk--row { height: auto; background: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 8px; }
.sk--row i { display: block; height: 120px; border-radius: 18px; background: #ffe5f3; }
.sk::after { content: ""; position: absolute; inset: 0; translate: -100% 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: shimmer 1.8s ease-in-out infinite; }
@keyframes shimmer { to { translate: 100% 0; } }
.ph-case__cap { position: absolute; left: 48px; bottom: 40px; padding: 10px 16px; border-radius: 999px; background: #ffe5f3; font-size: .95rem; font-weight: 500; }
.ph-case__cap--light { background: rgba(255,255,255,.12); color: #fdfcfc; left: 50%; translate: -50% 0; white-space: nowrap; }
.ph-case__play { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: var(--pink); color: #111214; box-shadow: 0 20px 40px -18px rgba(255,0,135,.6); transition: transform .3s cubic-bezier(.34,1.4,.64,1); }
.ph-case__play svg { width: 36px; margin-left: 4px; }
@media (hover: hover) { .ph-case__video:hover .ph-case__play { transform: scale(1.08); } }
@media (max-width: 1023px) { .ph-case__main, .ph-case__video { grid-column: span 12; } .ph-case__main { min-height: 520px; } .ph-case__video { aspect-ratio: 16 / 10; } }
@media (max-width: 700px) { .ph-case { padding: 96px 0; } .ph-case__cap { left: 24px; bottom: 24px; } .ph-case__main { min-height: 460px; } }
@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } }

/* ===================== For festivaler (samme Phantom-mønstre som forsiden) ===================== */
/* Hero uten video: bær-kort med pink glød nederst og egne motiver som svever rundt teksten */
.ff-hero { background: radial-gradient(70% 70% at 50% 125%, rgba(255,0,135,.55), transparent 70%), var(--berry); }
/* Mørkt lag over videoen (scenelyset er lyst) så teksten leses, med pink glød nederst */
.ff-hero::after { background: radial-gradient(70% 60% at 50% 120%, rgba(255,0,135,.45), transparent 70%),
  radial-gradient(55% 60% at 50% 50%, rgba(7,7,8,.62), rgba(7,7,8,.35) 70%), rgba(7,7,8,.25); }
.ff-hero .ph-h1 { max-width: 11em; }
.ff-hero .pill-btn--xl { margin-top: 16px; }
.ff-hero__art { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ff-hero__art > * { position: absolute; animation: ff-bob 5s ease-in-out infinite alternate; }
.ff-hero__art .tile { width: clamp(64px, 7vw, 112px); height: clamp(64px, 7vw, 112px); border-radius: 28%; background: var(--mid); display: grid; place-items: center; box-shadow: 0 24px 48px -24px rgba(7,7,8,.7); }
.ff-hero__art .tile svg { width: 66%; }
.ff-hero__art .t1 { left: 7%; top: 14%; rotate: -10deg; }
.ff-hero__art .t2 { right: 8%; bottom: 14%; rotate: 8deg; animation-delay: -2s; }
.ff-hero__art .z1 { left: 6%; bottom: 22%; rotate: 6deg; animation-delay: -1s; }
.ff-hero__art .z2 { right: 7%; top: 16%; rotate: -7deg; animation-delay: -3s; }
.ff-hero__art .z3 { left: 15%; bottom: 8%; rotate: -4deg; animation-delay: -4s; }
.ff-hero__art .z4 { right: 18%; top: 6%; rotate: 14deg; font-size: 1.3rem; animation-delay: -2.5s; }
.ff-hero__art .b1 { right: 16%; bottom: 30%; width: 44px; height: 44px; }
.ff-hero__art .b2 { left: 18%; top: 34%; }
@keyframes ff-bob { to { translate: 0 -10px; } }
@media (max-width: 900px) { .ff-hero__art .t1, .ff-hero__art .t2, .ff-hero__art .z4, .ff-hero__art .b1, .ff-hero__art .b2 { display: none; }
  .ff-hero__art .z1 { left: 5%; bottom: 5%; } .ff-hero__art .z2 { right: 5%; top: 5%; } .ff-hero__art .z3 { display: none; } }

/* Sesongen: fem steg i karusellen, stegnummer over tittelen, illustrasjonen lavere ned */
.ff-step { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; margin-bottom: 16px; border-radius: 999px;
  background: rgba(17,18,20,.08); font-weight: 500; font-size: .875rem; font-variant-numeric: tabular-nums; position: relative; z-index: 2; }
.ph-card--ink .ff-step { background: rgba(255,255,255,.12); }
.ff-season .art { top: 58%; }
.ff-season .art--profiles { top: 60%; }
.ph-card--lemon .art--float .tile { background: #111214; }

/* Det dere slipper: to kort side om side (6 + 6), lister med kryss og hake */
.ff-vs { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
@media (min-width: 1440px) { .ff-vs { gap: 32px; } }
.ff-vs__card { grid-column: span 6; width: auto; aspect-ratio: auto; min-height: 560px; padding-bottom: 48px; }
.ff-vs__card ul { list-style: none; margin: 40px 0 0; padding: 0; }
.ff-vs__card li { display: flex; align-items: center; gap: 16px; padding: 20px 0; border-top: 1px solid rgba(17,18,20,.12);
  font: 400 clamp(1.1rem, 1.5vw, 1.5rem)/1.3 var(--display); letter-spacing: -0.01em; }
.ff-vs__card li::before { content: "✓"; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: #111214; color: var(--pink); font: 700 1rem/1 var(--body); }
.ff-vs__card--before li { color: rgba(17,18,20,.6); }
.ff-vs__card--before li::before { content: "✕"; background: rgba(17,18,20,.08); color: rgba(17,18,20,.55); }
.show-gates .ff-vs li[data-gate] { display: flex !important; }
.ff-vs__card { transition: transform .4s cubic-bezier(.34,1.4,.64,1); }
@media (hover: hover) { .ff-vs__card:hover { transform: translateY(-6px) scale(1.01); } }
@media (max-width: 1023px) { .ff-vs__card { grid-column: span 12; min-height: 0; } }

/* FAQ (Phantom): overskrift til venstre (står fast), spørsmål i myke kort til høyre */
.ff-faq { padding: 128px 0; }
.ff-faq__in { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
.ff-faq__head { grid-column: span 5; display: grid; justify-items: start; gap: 32px; position: sticky; top: 140px; }
.ff-faq__head .ph-h2 { font-size: clamp(2.4rem, 4.4vw, 4rem); }
.ff-faq__list { grid-column: 7 / span 6; display: grid; gap: 12px; }
.ff-faq details { background: var(--pill); color: var(--pill-fg); border-radius: 24px; transition: background-color var(--t); }
.ff-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 24px 24px 32px; cursor: pointer; list-style: none;
  font: 400 clamp(1.1rem, 1.4vw, 1.375rem)/1.3 var(--display); letter-spacing: -0.01em; }
.ff-faq summary::-webkit-details-marker { display: none; }
.ff-faq summary::after { content: "+"; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--soft); color: var(--ink); font: 400 1.5rem/1 var(--body); transition: rotate .3s var(--ease), background-color .2s; }
.ff-faq summary:hover::after { background: var(--mid); }
.ff-faq details[open] summary::after { rotate: 45deg; }
.ff-faq details p { padding: 0 32px 28px; max-width: 60ch; opacity: .8; }
/* Myk åpning der nettleseren støtter det (ellers åpner den bare) */
:root { interpolate-size: allow-keywords; }
.ff-faq details::details-content { block-size: 0; overflow: clip; transition: block-size .4s var(--ease), content-visibility .4s allow-discrete; }
.ff-faq details[open]::details-content { block-size: auto; }
@media (max-width: 1023px) { .ff-faq__head, .ff-faq__list { grid-column: span 12; } .ff-faq__head { position: static; } }
@media (max-width: 700px) { .ff-faq { padding: 96px 0; } .ff-faq summary { padding: 20px 20px 20px 24px; } .ff-faq details p { padding: 0 24px 24px; } }
.ff-faq + .ph-final { min-height: 80vh; }
.ph-final .ph-h2 + .pill-btn--xl { margin-top: 48px; }
@media (prefers-reduced-motion: reduce) {
  .ff-hero__art > * { animation: none; }
  .ff-vs__card, .ff-faq summary::after, .ff-faq details::details-content { transition: none; }
}
/* Heroen her har mer tekst enn forsiden: la kortet vokse i stedet for å klippe teksten */
.ff-hero { aspect-ratio: auto; min-height: clamp(560px, 54vw, 794px); }
@media (max-width: 1199px) { .ff-hero__art .z3, .ff-hero__art .z4, .ff-hero__art .b2 { display: none; }
  .ff-hero__art .z2 { right: 3%; top: 8%; } .ff-hero__art .z1 { left: 3%; bottom: 10%; } .ff-hero__art .t1 { left: 4%; top: 30%; } .ff-hero__art .t2 { right: 4%; bottom: 26%; } }
@media (max-width: 700px) { .ff-hero__art { display: none; } }

/* Maskoter (assets/mascot) i stedet for armbåndet: en i overskrifter, crew i overskrifter og tag, små i flisene */
.ph-h2 .ico-m { width: 1.05em; vertical-align: -0.2em; margin: -0.4em .06em; }
.ph-tag celeri-crew { font-size: 1.15rem; margin: 0 2px 0 0; }
.tile svg.celeri-mascot, .signup__logo svg.celeri-mascot { width: 100%; }
.tile celeri-mascot { width: 74%; }
.signup__logo celeri-mascot { width: 28px; }
.tile--clip { overflow: hidden; } /* innsjekk-maskoten hopper inn fra kanten av flisen */

/* ===================== For arbeidsgivere ===================== */
.aw-hero .ph-h1 { font-size: clamp(2.25rem, 4.6vw, 4.75rem); max-width: 13em; }
.aw-systems { margin-top: 16px; display: grid; justify-items: center; gap: 12px; font-size: .9375rem; color: rgba(255,244,249,.75); }
.aw-systems ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.aw-systems li { padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff4f9; font-weight: 500;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* Overskrift med lang tekst og ingress under den låste overskriften */
.ph-h2--long { font-size: clamp(2.4rem, 5.6vw, 4.75rem); max-width: 15em; margin-inline: auto; }
.ph-pin__in .ph-h2--long { text-wrap: balance; line-height: 1.25; }
.ph-pin__in .ph-h2--long .ico-m { margin-inline: .22em; }
.ph-pin__lead { max-width: 640px; margin: 24px auto 0; font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.45; opacity: .8; }
.ph-trio .ff-step + .ph-card__t { margin-top: 0; }
.aw-trio .art { top: 58%; } .aw-trio .art--profiles { top: 60%; }
@media (max-width: 1023px) { .ff-season .art { top: 64%; } .ff-season .art--profiles { top: 66%; } }
@media (max-width: 1279px) { .aw-trio .art { top: 66%; } .aw-trio .art--profiles { top: 68%; } }
/* Heroen har systemlista nederst: færre svevende elementer så de ikke treffer teksten */
.aw-hero .ff-hero__art .b2, .aw-hero .ff-hero__art .z3 { display: none; }
.aw-hero .ff-hero__art .z1 { left: 4%; bottom: auto; top: 46%; }
@media (max-width: 1199px) { .aw-hero .ff-hero__art .z1 { display: none; } }
/* Effekter: fire tallkort (skjult til kilde) og ett stort sitatkort */
.aw-stats { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.show-gates .aw-stats[data-gate] { display: grid !important; }
.aw-stats .ph-card { width: auto; aspect-ratio: auto; padding: 32px; display: grid; gap: 12px; align-content: start; }
.aw-stats b { font: 400 clamp(2.5rem, 4vw, 4rem)/1 var(--display); letter-spacing: -0.03em; }
.aw-stats p { opacity: .75; max-width: 22ch; }
.aw-quote { width: auto; aspect-ratio: auto; margin: 0; padding: clamp(32px, 5vw, 72px); padding-right: clamp(32px, 18vw, 280px); display: grid; gap: 32px; }
.aw-quote blockquote { margin: 0; }
.aw-quote blockquote p { font: 400 clamp(1.6rem, 3vw, 3rem)/1.2 var(--display); letter-spacing: -0.02em; text-wrap: pretty; }
.aw-quote blockquote p::before { content: "«"; } .aw-quote blockquote p::after { content: "»"; }
.aw-quote figcaption { font-size: 1rem; opacity: .65; }
.aw-quote__m { position: absolute; right: clamp(24px, 4vw, 64px); bottom: -12px; width: clamp(96px, 12vw, 180px); }
.aw-quote__m celeri-mascot { width: 100%; }
@media (max-width: 1023px) { .aw-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .aw-quote { padding-right: 32px; padding-bottom: 140px; } .aw-quote__m { width: 96px; } }
.ff-faq__lead { opacity: .75; max-width: 34ch; font-size: 1.0625rem; }
/* Integrasjoner: sentrert tag, overskrift og knapp */
.aw-int { padding: 128px 0 32px; text-align: center; }
.aw-int .wrap { display: grid; justify-items: center; gap: 32px; }
.aw-int .ph-h2--long { max-width: 12em; }

/* ===================== For ansatte ===================== */
/* Varsler som svever i heroen (som på telefonen) */
.ea-notif { width: clamp(220px, 19vw, 290px); display: grid; grid-template-columns: 32px 1fr auto; column-gap: 10px; row-gap: 2px; align-items: center;
  padding: 12px 14px; border-radius: 18px; text-align: left; color: #fff4f9; font-size: .8125rem; line-height: 1.35;
  background: rgba(255,244,249,.14); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 20px 40px -24px rgba(7,7,8,.6); }
.ea-notif__icon { grid-row: span 2; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--pink); color: #111214; font: 700 .9rem/1 var(--ui); }
.ea-notif time { opacity: .6; font-size: .75rem; }
.ea-notif p { grid-column: 2 / -1; opacity: .85; }
.ea-hero .n1 { left: 4%; top: 9%; rotate: -3deg; }
.ea-hero .n2 { right: 4%; bottom: 10%; rotate: 2deg; animation-delay: -2s; }
.ea-hero .t1 { left: auto; right: 7%; top: 12%; }
.ea-hero .z4 { right: auto; left: 9%; top: auto; bottom: 18%; }
.ea-hero .z2 { right: auto; left: 14%; top: auto; bottom: 8%; }
.ea-hero .b1 { right: 20%; bottom: auto; top: 30%; }
@media (max-width: 1199px) { .ea-hero .n1, .ea-hero .n2 { display: none; } .ea-hero .z2 { left: 4%; } .ea-hero .z4 { left: 4%; bottom: 22%; } }
/* Kort med bare tittel: illustrasjonen kan ligge litt høyere */
.ea-trio .ph-card__t { max-width: 15ch; }
/* Utbetalinger som siste kort i karusellen */
.ea-payouts { display: grid; align-content: end; gap: 20px; padding-bottom: 48px; }
.ea-payouts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ea-payouts li { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-radius: 18px; background: #ffe5f3; }
.ea-payouts li span { opacity: .6; font-variant-numeric: tabular-nums; }
.ea-payouts li b { font: 400 clamp(1.4rem, 2vw, 2rem)/1 var(--ui); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ea-payouts > p { font-size: .9375rem; opacity: .65; }
/* Fire kort i hverdagen */
.ea-four { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (min-width: 1440px) { .ea-four { gap: 32px; } }
.ea-four .ph-card { width: auto; aspect-ratio: auto; min-height: 420px; padding: 32px 32px 140px; }
.ea-four .ph-card__t { font-size: clamp(1.5rem, 2vw, 2rem); }
.ea-four__m { position: absolute; right: 24px; bottom: -10px; width: 96px; }
.ea-four__m celeri-mascot { width: 100%; }
@media (max-width: 1023px) { .ea-four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ea-four { grid-template-columns: 1fr; } .ea-four .ph-card { min-height: 0; } }
.ea-trio .ph-card:nth-child(3) .art { top: 66%; }
@media (max-width: 1279px) { .ea-trio .ph-card:nth-child(3) .art { top: 70%; } }
.ea-trio .ph-card:nth-child(3) .paid b { display: none; } /* lang tittel: bare haken får plass */

/* ===================== Book et møte ===================== */
.bm { padding: calc(92px + max(16px, 20.82vh - 138.6px)) 0 clamp(64px, 8vw, 128px); }
.bm__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: stretch; }
@media (min-width: 1440px) { .bm__grid { gap: 32px; } }
.bm__info { grid-column: span 7; position: relative; overflow: hidden; isolation: isolate; border-radius: 24px; padding: clamp(32px, 4vw, 64px);
  padding-bottom: clamp(160px, 16vw, 240px); min-height: clamp(560px, 46vw, 720px); display: grid; align-content: start; gap: 24px;
  color: #fff4f9; background: radial-gradient(70% 70% at 80% 125%, rgba(255,0,135,.55), transparent 70%), var(--berry); }
.bm__info .ph-h1 { font-size: clamp(2.5rem, 4.6vw, 4.75rem); max-width: 10em; }
.bm__lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.45; max-width: 34ch; color: rgba(255,244,249,.85); }
.bm__checks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; max-width: 40ch; }
.bm__checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 1.0625rem; line-height: 1.4; }
.bm__checks li::before { content: "✓"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pink); color: #111214; font: 700 .85rem/1 var(--body); }
.bm__m { position: absolute; right: clamp(24px, 4vw, 64px); bottom: -16px; width: clamp(120px, 13vw, 200px); z-index: -1; }
.bm__m celeri-mascot { width: 100%; }
.bm__info .b1 { right: auto; left: 48%; bottom: 40px; z-index: -1; }
.bm__form { grid-column: span 5; position: relative; border-radius: 24px; padding: clamp(28px, 3.5vw, 48px); background: var(--pill); color: var(--pill-fg);
  display: grid; transition: background-color var(--t); }
.bm__fields { display: grid; gap: 16px; align-content: start; }
.bm__h2 { font: 400 clamp(1.75rem, 2.4vw, 2.5rem)/1.15 var(--display); letter-spacing: -0.02em; }
.bm__muted { opacity: .7; margin-bottom: 8px; }
.bm__form label { display: grid; gap: 8px; font-size: .9375rem; font-weight: 500; }
.bm__form input { font: 400 1rem var(--body); color: inherit; height: 56px; padding: 0 18px; border-radius: 16px; border: 1.5px solid transparent;
  background: #ffe5f3; transition: border-color .2s, background-color .2s; }
.bm__form input:hover { background: #ffffff; }
.bm__form input:focus { outline: none; border-color: var(--pink); background: #fff; }
.bm__form input:user-invalid { border-color: var(--pink-btn); }
.bm__send { margin-top: 16px; justify-content: center; color: #fff; font-weight: 700; box-shadow: none; }
.bm__send, .bm__send:hover { background: var(--pink-btn); }
.bm__ok { display: none; align-content: center; justify-items: center; gap: 24px; text-align: center; outline: none; }
.bm__ok celeri-mascot { width: 140px; }
.bm__ok p { font: 400 clamp(1.4rem, 2vw, 2rem)/1.25 var(--display); max-width: 18ch; }
.bm__form.sent .bm__fields { display: none; }
.bm__form.sent .bm__ok { display: grid; }
@media (max-width: 1023px) { .bm__info, .bm__form { grid-column: span 12; } .bm__info { min-height: 0; } }
@media (max-width: 1023px) { .bm__info .b1 { display: none; } .bm__info { padding-bottom: 140px; } .bm__m { width: 110px; } }

/* ===================== Integrasjoner ===================== */
.int-mono { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; flex: none;
  font: 600 1.25rem/1 var(--ui); letter-spacing: -0.02em; }
.int-mono--pink { background: var(--pink); color: #111214; }
.int-mono--lime { background: var(--lime); color: #111214; }
.int-mono--mid { background: var(--mid); color: #111214; }
.int-mono--ink { background: #111214; color: #fdfcfc; }
.int-hero { min-height: clamp(520px, 44vw, 680px); }
.int-hero .ff-hero__art .int-mono { width: clamp(64px, 6vw, 92px); height: clamp(64px, 6vw, 92px); border-radius: 26%; font-size: clamp(1.4rem, 2vw, 2rem);
  box-shadow: 0 24px 48px -24px rgba(7,7,8,.7); }
.int-hero .i1 { left: 8%; top: 14%; rotate: -10deg; }
.int-hero .i2 { right: 9%; top: 18%; rotate: 8deg; animation-delay: -1.5s; }
.int-hero .i3 { left: 12%; bottom: 14%; rotate: 6deg; animation-delay: -3s; }
.int-hero .i4 { right: 13%; bottom: 12%; rotate: -7deg; animation-delay: -2s; }
.int-hero .t1 { left: auto; right: 24%; top: auto; bottom: 6%; width: 72px; height: 72px; }
.int-hero .z1 { left: 22%; bottom: auto; top: 8%; }
.int-hero .z2 { right: 4%; top: auto; bottom: 34%; }
.int-hero .b1 { right: auto; left: 26%; bottom: 8%; }
@media (max-width: 1199px) { .int-hero .z1, .int-hero .z2, .int-hero .t1, .int-hero .b1 { display: none; } .int-hero .i1 { left: 4%; } .int-hero .i2 { right: 4%; } .int-hero .i3 { left: 4%; } .int-hero .i4 { right: 4%; } }
/* Rutenett med ett kort per system */
.int { padding: clamp(48px, 6vw, 96px) 0 32px; }
.int-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
@media (min-width: 1440px) { .int-grid { gap: 32px; } }
.int-card { position: relative; display: grid; align-content: start; gap: 12px; padding: 32px; min-height: 280px; border-radius: 24px;
  background: var(--pill); color: var(--pill-fg); transition: transform .4s cubic-bezier(.34,1.4,.64,1), background-color var(--t); }
.int-card .int-mono { margin-bottom: 20px; transition: transform .4s cubic-bezier(.34,1.4,.64,1); }
.int-card h3 { font: 400 clamp(1.5rem, 2vw, 2rem)/1.15 var(--display); letter-spacing: -0.02em; }
.int-card p { opacity: .72; line-height: 1.5; max-width: 36ch; }
@media (hover: hover) { .int-card:hover { transform: translateY(-6px); } .int-card:hover .int-mono { transform: rotate(-6deg) scale(1.06); } }
@media (max-width: 700px) { .int-card { min-height: 0; padding: 24px; } .int-grid { grid-template-columns: 1fr; gap: 16px; } }
@media (prefers-reduced-motion: reduce) { .int-card, .int-card .int-mono { transition: none; } }
/* Partnere med ekte logo i stedet for forkortelse */
.int-logo { display: flex; align-items: center; height: 56px; margin-bottom: 20px; }
.int-logo img { display: block; height: 30px; width: auto; max-width: 100%; }
.show-gates .int-card[data-gate] { display: grid !important; }
/* Ekte app-ikoner for integrasjonene (hentet fra celeri.today) */
.int-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; overflow: hidden; margin-bottom: 20px; flex: none;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(17,18,20,.08); transition: transform .4s cubic-bezier(.34,1.4,.64,1); }
.int-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.int-icon img[src$=".svg"] { width: 64%; height: 64%; }
@media (hover: hover) { .int-card:hover .int-icon { transform: rotate(-6deg) scale(1.06); } }
.int-hero .ff-hero__art .int-icon { width: clamp(64px, 6vw, 92px); height: clamp(64px, 6vw, 92px); border-radius: 26%; margin: 0;
  box-shadow: 0 24px 48px -24px rgba(7,7,8,.7); }

/* ===================== Om oss ===================== */
.om-hero { min-height: clamp(520px, 44vw, 680px); }
.om-hero__m { width: clamp(90px, 9vw, 150px); }
.om-hero__m celeri-mascot { width: 100%; }
.om-hero .m1 { left: 6%; bottom: -10px; }
.om-hero .m2 { left: 20%; bottom: -24px; width: clamp(70px, 7vw, 110px); animation-delay: -1s; }
.om-hero .m3 { right: 18%; bottom: -16px; width: clamp(70px, 7vw, 110px); animation-delay: -2s; }
.om-hero .m4 { right: 5%; bottom: -10px; animation-delay: -3s; }
.om-hero .z1 { left: 8%; top: 14%; bottom: auto; rotate: -6deg; }
.om-hero .z2 { right: 9%; top: 18%; rotate: 7deg; }
.om-hero .z3 { left: auto; right: 22%; top: 9%; bottom: auto; rotate: -4deg; }
.om-hero .b1 { right: auto; left: 22%; bottom: auto; top: 30%; }
@media (max-width: 1199px) { .om-hero .m2, .om-hero .m3, .om-hero .z3, .om-hero .b1 { display: none; } }
/* Personkort */
.om-team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (min-width: 1440px) { .om-team { gap: 32px; } }
.om-person { display: grid; align-content: end; gap: 4px; min-height: 260px; padding: 28px; border-radius: 24px; color: #111214; position: relative;
  transition: transform .4s cubic-bezier(.34,1.4,.64,1); }
.om-person strong { font: 400 clamp(1.3rem, 1.6vw, 1.6rem)/1.15 var(--display); letter-spacing: -0.02em; }
.om-person > span:last-child { opacity: .7; font-size: .9375rem; }
.om-av { position: absolute; left: 28px; top: 28px; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: #111214; color: #fdfcfc; font: 600 1.1rem/1 var(--ui); }
.om-person--cream { background: #fdfcfc; } .om-person--lemon { background: #edffbe; } .om-person--blush { background: #ffe5f3; } .om-person--mid { background: var(--mid); }
.om-person--ink { background: var(--berry-2); color: #fff4f9; } .om-person--ink .om-av { background: var(--pink); color: #111214; }
@media (hover: hover) { .om-person:hover { transform: translateY(-6px); } }
.om-board__head { margin: 72px 0 24px; }
@media (max-width: 1023px) { .om-team { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .om-team { grid-template-columns: 1fr; gap: 12px; } .om-person { min-height: 0; padding: 20px 20px 20px 100px; align-content: center; } .om-av { left: 20px; top: 50%; translate: 0 -50%; } }
.om-jobb { max-width: 46ch; margin: 24px auto 0; font-size: clamp(1.05rem, 1.4vw, 1.25rem); }
@media (prefers-reduced-motion: reduce) { .om-person { transition: none; } }
/* Personkort med portrett (hentet fra celeri.today) */
.om-person { align-content: start; min-height: 0; padding: 12px 12px 24px; gap: 2px; }
.om-photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; margin-bottom: 16px; background: #ffe5f3; }
.om-person strong, .om-person > span:last-child { padding: 0 12px; }
@media (max-width: 560px) { .om-team { grid-template-columns: 1fr 1fr; gap: 12px; } .om-person { padding: 8px 8px 16px; } .om-person strong { font-size: 1.1rem; } .om-person strong, .om-person > span:last-child { padding: 0 6px; } }

/* ===================== Artikler ===================== */
.ar { padding: calc(92px + clamp(48px, 8vw, 120px)) 0 clamp(96px, 12vw, 160px); }
.ar-head { text-align: center; margin-bottom: clamp(48px, 6vw, 80px); }
.ar-lead { max-width: 40ch; margin: 24px auto 0; font-size: clamp(1.05rem, 1.4vw, 1.25rem); opacity: .75; }
/* Hovedsak: stort mørkt kort, bilde til venstre */
.ar-feature { display: grid; grid-template-columns: 7fr 5fr; border-radius: 24px; overflow: hidden; background: var(--berry); color: #fff4f9;
  text-decoration: none; margin-bottom: clamp(32px, 4vw, 56px); transition: transform .4s cubic-bezier(.34,1.4,.64,1); }
.ar-feature__img { overflow: hidden; min-height: 420px; }
.ar-feature__img img, .ar-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ar-feature__text { display: grid; align-content: center; justify-items: start; gap: 20px; padding: clamp(28px, 4vw, 56px); }
.ar-feature .ph-tag { background: rgba(255,255,255,.12); color: #fff4f9; height: 40px; }
.ar-feature h2 { font: 400 clamp(1.6rem, 2.6vw, 2.6rem)/1.15 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.ar-feature time { opacity: .7; }
.ar-feature .pill-btn { color: #fff4f9; margin-top: 8px; }
/* Rutenett */
.ar-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (min-width: 1440px) { .ar-grid { gap: 32px; } }
.ar-card { display: grid; gap: 10px; align-content: start; height: 100%; padding: 12px 12px 24px; border-radius: 24px; background: var(--pill); color: var(--pill-fg);
  text-decoration: none; transition: transform .4s cubic-bezier(.34,1.4,.64,1); }
.ar-card__img { display: block; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; margin-bottom: 8px; background: #ffe5f3; }
.ar-card time { padding: 0 12px; font-size: .875rem; opacity: .6; }
.ar-card h3 { padding: 0 12px; font: 400 clamp(1.2rem, 1.5vw, 1.5rem)/1.25 var(--display); letter-spacing: -0.015em; text-wrap: pretty; }
@media (hover: hover) {
  .ar-card:hover, .ar-feature:hover { transform: translateY(-6px); }
  .ar-card:hover .ar-card__img img, .ar-feature:hover .ar-feature__img img { transform: scale(1.05); }
}
@media (max-width: 1023px) { .ar-grid { grid-template-columns: 1fr 1fr; } .ar-feature { grid-template-columns: 1fr; } .ar-feature__img { min-height: 0; aspect-ratio: 16 / 10; } }
@media (max-width: 600px) { .ar-grid { grid-template-columns: 1fr; gap: 16px; } }
@media (prefers-reduced-motion: reduce) { .ar-card, .ar-feature, .ar-card__img img, .ar-feature__img img { transition: none; } }

/* ===================== Artikkel ===================== */
.ap { padding: calc(92px + clamp(40px, 6vw, 88px)) 0 clamp(64px, 8vw, 112px); }
.ap-head { max-width: 980px; margin: 0 auto; display: grid; justify-items: center; gap: 24px; text-align: center; }
.ap-back { min-height: 44px; padding: 0 18px 0 12px; background: var(--pill); color: var(--pill-fg); }
.ap-back svg { width: 20px; height: 20px; }
.ap-meta { display: flex; align-items: center; gap: 12px; font-size: .9375rem; opacity: .85; }
.ap-head .ph-h2--long { font-size: clamp(2.1rem, 4.4vw, 4rem); max-width: 18em; }
.ap-lead { max-width: 48ch; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.5; opacity: .75; }
.ap-figure { margin: clamp(40px, 5vw, 72px) 0; }
.ap-figure img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; object-position: 50% 30%; border-radius: 24px; }
.ap-figure figcaption { margin-top: 12px; text-align: center; font-size: .9375rem; opacity: .65; }
/* Brødtekst: smal kolonne, sitater som kort */
.ap-prose { max-width: 720px; margin: 0 auto; font-size: 1.125rem; line-height: 1.7; }
.ap-prose > * + * { margin-top: 1.1em; }
.ap-prose h2 { margin-top: 2.2em; font: 400 clamp(1.6rem, 2.4vw, 2.25rem)/1.15 var(--display); letter-spacing: -0.02em; }
.ap-prose ul { list-style: none; padding: 0; display: grid; gap: 14px; }
.ap-prose li { position: relative; padding-left: 40px; }
.ap-prose li::before { content: "✓"; position: absolute; left: 0; top: 3px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pink); color: #111214; font: 700 .8rem/1 var(--body); }
.ap-prose blockquote { margin: 2em -32px; padding: clamp(28px, 4vw, 44px); border-radius: 24px; background: var(--berry); color: #fff4f9;
  font: 400 clamp(1.3rem, 2vw, 1.75rem)/1.35 var(--display); letter-spacing: -0.01em; }
.ap-prose blockquote footer { margin-top: 20px; font: 400 .9375rem/1.4 var(--body); opacity: .7; }
.ap-prose .meta { margin-top: 2.5em; padding-top: 24px; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); font-size: .9375rem; opacity: .75; }
.ap-prose a { color: inherit; }
@media (max-width: 800px) { .ap-prose blockquote { margin-inline: 0; } .ap-figure img { aspect-ratio: 4 / 3; } }
.ap-more { padding: 0 0 clamp(96px, 12vw, 160px); }
.ap-more .ph-rail__head { margin-bottom: 32px; }
/* Demo: gjenbruker Book et møte-oppsettet */
.dm__muted { font-size: 1rem; opacity: .75; }
.dm-form .bm__fields { align-content: center; }
.om-team__head { text-align: center; padding: clamp(96px, 12vw, 160px) 0 clamp(48px, 6vw, 80px); }
/* Bilder inne i artikkelteksten (fra Sanity): aldri bredere enn kolonnen */
.ap-prose figure { margin: 2em 0; }
.ap-prose img { display: block; max-width: 100%; height: auto; border-radius: 16px; }
.ap-prose figcaption { margin-top: 10px; font-size: .9375rem; opacity: .65; text-align: center; }
.ap-head .ap-lead + .ap-lead { margin-top: -8px; }
.ap-meta span:not(.ph-tag)::before { content: "·"; margin-right: 12px; }
.ap-prose { overflow-wrap: anywhere; } /* lange lenker i gamle artikler skal ikke gi sidescroll */

/* Artikkelkort som Phantom-bloggen (422 x 564): bilde øverst helt ut i kanten, lyst panel med tittel, dato og piller */
.ar-card { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; aspect-ratio: 422 / 564; height: auto;
  background: #ffe5f3; color: var(--ink); }
.ar-card__img { flex: 0 0 54%; aspect-ratio: auto; margin: 0; border-radius: 0; }
.ar-card__body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 20px; min-height: 0; }
.ar-card h3 { padding: 0; font: 400 clamp(1.25rem, 1.6vw, 1.5rem)/1.2 var(--display); letter-spacing: -0.015em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ar-card time { padding: 0; font-size: .9375rem; opacity: .6; }
.ar-card__pills { margin-top: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.ar-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: #fff; font-size: .8125rem; font-weight: 500; }
.ar-pill svg { width: 14px; height: 14px; }
html[data-theme="dark"] .ar-card { background: var(--berry-2); color: #fff4f9; }
html[data-theme="dark"] .ar-pill { background: rgba(255,255,255,.1); }
@media (max-width: 600px) { .ar-card { aspect-ratio: auto; } .ar-card__img { flex-basis: auto; aspect-ratio: 16 / 10; } .ar-card__body { min-height: 180px; } }
/* Artikkeltekst: samme typografi for alle elementer, uansett hvilken artikkel (Sanity) */
.ap-prose h2:first-child { margin-top: 0; }
.ap-prose h3 { margin-top: 1.8em; font: 500 clamp(1.2rem, 1.6vw, 1.4rem)/1.25 var(--display); letter-spacing: -0.01em; }
.ap-prose h2 + *, .ap-prose h3 + * { margin-top: .6em; }
.ap-prose strong { font-weight: 600; }
.ap-prose a { color: inherit; text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: color .2s; }
.ap-prose a:hover { color: var(--pink); }
.ap-prose ol { list-style: none; padding: 0; display: grid; gap: 14px; counter-reset: n; }
.ap-prose ol li { position: relative; padding-left: 40px; counter-increment: n; }
.ap-prose ol li::before { content: counter(n); position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--berry); color: #fff4f9; font: 600 .8rem/1 var(--body); }
.ap-prose blockquote p { margin: 0; }
.ap-prose blockquote footer { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.15);
  font: 500 .9375rem/1.4 var(--body); opacity: .8; }
.ap-prose blockquote footer::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); }
/* Brødsmuler over tittelen i stedet for tilbake-knapp: «Artikler / Kategori» */
.ap-crumb { display: flex; align-items: center; gap: 10px; font-size: .9375rem; font-weight: 500; }
.ap-crumb a { text-decoration: none; opacity: .6; transition: opacity .2s, color .2s; }
.ap-crumb a:hover { opacity: 1; color: var(--pink); }
.ap-crumb span[aria-hidden] { opacity: .35; }
.ap-head .ap-crumb + .ap-meta { margin-top: -12px; }

/* ===================== Jobb ===================== */
.jb { padding: calc(92px + clamp(48px, 8vw, 120px)) 0 clamp(96px, 12vw, 160px); }
.jb-where { list-style: none; margin: 28px 0 0; padding: 0; display: flex; justify-content: center; gap: 8px; }
.jb-where li { padding: 8px 14px; border-radius: 999px; background: var(--pill); font-size: .9375rem; font-weight: 500; }
.jb-list { max-width: 1080px; margin: 0 auto; }
.jb-list__head { margin-bottom: 20px; }
.jb-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.jb-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 24px; padding: 24px 24px 24px 32px; border-radius: 24px;
  background: var(--pill); color: var(--pill-fg); text-decoration: none; transition: transform .4s cubic-bezier(.34,1.4,.64,1), background-color .2s; }
.jb-row h3 { font: 400 clamp(1.3rem, 2vw, 1.75rem)/1.2 var(--display); letter-spacing: -0.015em; }
.jb-row__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.jb-row__meta span, .jb-pills li { padding: 6px 12px; border-radius: 999px; background: #ffe5f3; font-size: .8125rem; font-weight: 500; }
.jb-row__dl { font-size: .9375rem; opacity: .65; white-space: nowrap; }
.jb-row__go { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px currentColor; color: var(--ink); transition: background-color .2s, transform .3s; }
.jb-row__go svg { width: 20px; height: 20px; }
@media (hover: hover) { .jb-row:hover { transform: translateY(-3px); } .jb-row:hover .jb-row__go { background: var(--pink); transform: rotate(45deg); } }
.jb-empty { padding: 32px; border-radius: 24px; border: 1.5px dashed color-mix(in srgb, currentColor 20%, transparent); text-align: center; font-size: 1.0625rem; opacity: .8; }
.show-gates .jb-empty { display: none; }
.show-gates .jb-rows li[data-gate] { display: block !important; }
/* Åpen søknad: stort mørkt kort som alltid ligger der */
.jb-open { position: relative; overflow: hidden; isolation: isolate; display: grid; max-width: 1080px; margin: clamp(48px, 6vw, 80px) auto 0; padding: clamp(32px, 5vw, 64px);
  border-radius: 24px; background: radial-gradient(70% 90% at 90% 120%, rgba(255,0,135,.5), transparent 70%), var(--berry); color: #fff4f9; text-decoration: none;
  transition: transform .4s cubic-bezier(.34,1.4,.64,1); }
.jb-open__text { display: grid; justify-items: start; gap: 18px; max-width: 34em; }
.jb-open .ph-tag { background: rgba(255,255,255,.12); color: #fff4f9; height: 40px; }
.jb-open__h { font: 400 clamp(2.4rem, 5vw, 4.5rem)/1 var(--display); letter-spacing: -0.025em; }
.jb-open__p { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.45; opacity: .85; }
.jb-open .pill-btn { margin-top: 8px; color: #fff4f9; }
.jb-open__m { position: absolute; right: clamp(24px, 6vw, 96px); bottom: -18px; width: clamp(110px, 14vw, 210px); z-index: -1; }
.jb-open__m celeri-mascot { width: 100%; }
@media (hover: hover) { .jb-open:hover { transform: translateY(-4px); } }
@media (max-width: 700px) {
  .jb-row { grid-template-columns: 1fr auto; padding: 20px; gap: 12px; } .jb-row__dl { grid-column: 1; grid-row: 2; }
  .jb-row__go { grid-row: 1 / span 2; grid-column: 2; width: 40px; height: 40px; }
  .jb-open { padding-bottom: 150px; } .jb-open__m { width: 110px; }
}
/* Stillingsside */
.jb-job { padding-bottom: clamp(48px, 6vw, 80px); }
.jb-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.jb-pills li { background: var(--pill); font-size: .9375rem; padding: 8px 14px; }
.jb-job .pill-btn--cta { margin-top: 8px; }
.jb-example { max-width: 720px; margin: 32px auto 0; padding: 14px 20px; border-radius: 16px; background: var(--lime); color: #111214; font-weight: 500; text-align: center; }
.jb-job .ap-prose { margin-top: clamp(40px, 5vw, 72px); }
.jb-apply { padding-top: 0; scroll-margin-top: 100px; }
.jb-apply .bm__info .ph-h1 { font-size: clamp(2.2rem, 4vw, 4rem); }
.jb-contact { display: grid; gap: 2px; margin-top: 8px; font-size: 1rem; }
.jb-contact span:first-child { opacity: .65; margin-bottom: 6px; }
.jb-contact a { color: var(--soft); }
.jb-form textarea { font: 400 1rem/1.5 var(--body); color: inherit; padding: 14px 18px; border-radius: 16px; border: 1.5px solid transparent; background: #ffe5f3; resize: vertical; }
.jb-form textarea:focus { outline: none; border-color: var(--pink); background: #fff; }
.jb-form input[type="file"] { height: auto; padding: 14px 18px; font-size: .9375rem; cursor: pointer; }
.jb-form input[type="file"]::file-selector-button { margin-right: 14px; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--pink-btn); color: #fff; font: 700 .875rem var(--body); cursor: pointer; }
.jb-form .jb-consent { display: flex; align-items: flex-start; gap: 12px; font-weight: 400; line-height: 1.4; }
.jb-consent input { flex: none; width: 22px; height: 22px; margin: 0; padding: 0; accent-color: var(--pink); }
.bm__form { grid-template-columns: minmax(0, 1fr); } .bm__fields { min-width: 0; } .bm__form input:not([type="checkbox"]), .bm__form textarea { min-width: 0; width: 100%; } /* filfeltet skal ikke presse skjemaet bredere enn skjermen */
/* Søknadsskjema: kompakt nok til at hele skjemaet får plass på en 14" MacBook, og skjemaet kommer raskt på mobil */
.jb-apply--top { padding-top: calc(92px + max(16px, 20.82vh - 138.6px)); }
.jb-apply .bm__info { min-height: 0; padding-bottom: clamp(140px, 12vw, 200px); }
.jb-crumb { color: #fff4f9; }
.jb-crumb a { color: inherit; }
.jb-form .bm__fields { grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 14px; }
.jb-form .bm__fields > :not(.half) { grid-column: 1 / -1; }
.jb-form input:not([type="checkbox"]) { height: 52px; }
.jb-form .bm__send { min-height: 64px; margin-top: 6px; }
@media (max-width: 1023px) {
  .jb-apply .bm__info { padding: 28px 120px 28px 28px; gap: 12px; }
  .jb-apply .bm__info .ph-h1 { font-size: clamp(2rem, 7vw, 2.75rem); }
  .jb-apply .bm__m { width: 92px; right: 14px; bottom: -12px; }
  .jb-apply .jb-contact { font-size: .9375rem; }
}
@media (max-width: 560px) { .jb-form .bm__fields { grid-template-columns: 1fr; } .jb-form .bm__form, .jb-form { padding: 24px; } }

/* ===================== Tilpasning til MacBook 14" (1512 x ~860) og mobil ===================== */
/* Heroen skal alltid få plass på første skjerm: toppen (nav + luft) + kortet + 24 px luft under */
:root { --hero-top: calc(92px + max(16px, 20.82vh - 138.6px)); }
.ph-hero__card { max-height: calc(100svh - var(--hero-top) - 24px); min-height: min(520px, calc(100svh - var(--hero-top) - 24px)); }
.ff-hero { min-height: clamp(480px, 54vw, calc(100svh - var(--hero-top) - 24px)); max-height: none; }
/* Lave skjermer (laptoper): litt mindre tekst og luft i heroene så innholdet får plass */
@media (min-width: 701px) and (max-height: 920px) {
  .ph-hero__text { gap: 18px; }
  .ph-h1 { font-size: clamp(2.5rem, min(5.556vw, 8.4vh), 5.75rem); }
  .aw-hero .ph-h1 { font-size: clamp(2.25rem, min(4.6vw, 7vh), 4.75rem); }
  .ph-hero .pill-btn--xl, .ff-hero .pill-btn--xl { min-height: clamp(56px, 6vw, 72px); }
  .ph-hero .pill-btn--xl { margin-top: 16px; }
  .aw-systems { margin-top: 4px; }
}
/* Mobil: heroen på For arbeidsgivere har mest tekst, så den strammes inn */
@media (max-width: 700px) {
  .aw-hero .ph-h1 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .aw-hero .ph-hero__sub { font-size: .9375rem; }
  .aw-systems { font-size: .8125rem; gap: 8px; }
  .aw-systems li { padding: 6px 10px; }
}
/* Portretter: høyde-attributtet skal ikke overstyre kvadratet */
.om-photo { height: auto; }
/* Trykkflater på mobil: logo, brødsmuler og avkrysning minst ~44 px */
.ph-logo { min-height: 44px; }
.ap-crumb a { display: inline-flex; align-items: center; min-height: 44px; }
.jb-consent input { width: 24px; height: 24px; }
/* Korte mobilskjermer (iPhone SE, 375 x 667): heroene strammes inn så hele kortet får plass på første skjerm */
@media (max-width: 700px) and (max-height: 740px) {
  .ph-hero__card { padding: 28px 20px; }
  .ph-hero__text { gap: 14px; }
  .ph-hero__sub { font-size: .875rem; line-height: 1.4; }
  .ph-hero .pill-btn--xl, .ff-hero .pill-btn--xl { min-height: 52px; margin-top: 0; font-size: 1rem; }
  .aw-hero .ph-h1 { font-size: 1.75rem; }
  .aw-systems { gap: 6px; margin-top: 0; font-size: .75rem; }
  .aw-systems ul { gap: 4px; }
  .aw-systems li { padding: 4px 9px; font-size: .75rem; }
}

/* ===================== For arrangører (08) ===================== */
.ff-vs--one .ff-vs__card { grid-column: span 12; min-height: 0; }
.ff-vs--one ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
@media (max-width: 700px) { .ff-vs--one ul { grid-template-columns: 1fr; } }
.ar-mods .om-team__head { padding-top: clamp(96px, 12vw, 160px); }
/* For crew (08) */
.ea-small { font-size: .9375rem; color: rgba(255,244,249,.8); padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,.1); }
.ea-four .ph-card__t { font-size: clamp(1.35rem, 1.8vw, 1.75rem); }
/* Om oss (08): Kims sitat i den låste overskriften */
.om-quote { margin: 0 auto; max-width: 16em; font-size: clamp(1.8rem, 3.4vw, 3.2rem); }
.om-quote .om-quote__t { font-size: 1em; line-height: 1.15; text-wrap: balance; }
.om-quote footer { margin-top: 24px; }
.ea-four__m celeri-crew { font-size: 4.5rem; }
/* Partnere (08) */
.int-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1080px; margin: 0 auto; }
@media (max-width: 700px) { .int-grid--two { grid-template-columns: 1fr; } }
.int-hero .int-icon--logo { width: clamp(120px, 11vw, 170px); padding: 0 16px; border-radius: 22px; }
.int-hero .int-icon--logo img { object-fit: contain; width: 100%; height: 60%; }
.int-hero .tile { width: clamp(64px, 6vw, 92px); height: clamp(64px, 6vw, 92px); }
/* Book et møte (08): nedtrekksliste i samme stil som feltene */
.bm__form select { font: 400 1rem var(--body); color: inherit; height: 52px; width: 100%; min-width: 0; padding: 0 44px 0 18px; border-radius: 16px; border: 1.5px solid transparent;
  background: #ffe5f3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23070708' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 18px;
  appearance: none; -webkit-appearance: none; cursor: pointer; }
.bm__form select:focus { outline: none; border-color: var(--pink); background-color: #fff; }
.bm__form select:invalid { color: color-mix(in srgb, currentColor 55%, transparent); }
.bm__ok small { font-size: .875rem; opacity: .6; }
/* Footer (08): slagord under logoen */
.ph-foot__tag { margin: -12px 0 auto; font: 400 1.125rem/1.3 var(--display); color: color-mix(in srgb, var(--ink) 70%, transparent); }
@media (max-width: 1100px) { .ph-card .art--tickets .s1, .ph-card .art--tickets .s2 { display: none; } } /* de øverste billettene treffer teksten på smale kort */
/* «Logg inn» til høyre ved «Book et møte»; i burgermenyen på mobil */
.ph-login { display: inline-flex; align-items: center; min-height: 52px; padding: 0 20px; border-radius: 999px; text-decoration: none; font-weight: 400;
  color: var(--fg); transition: background-color .2s, color var(--t), min-height .45s var(--ease); }
.ph-login:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.ph-nav.is-scrolled .ph-login { min-height: 48px; }
.ph-links .m-only { display: none; }
@media (max-width: 900px) { .ph-login { display: none; } .ph-links .m-only { display: block; } }
/* «Kontroll for økonomi» som bredt kort under «Blandet crew» */
.ar-control { margin-top: 24px; }
@media (min-width: 1440px) { .ar-control { margin-top: 32px; } }
.ar-control .ff-vs__card { position: relative; overflow: hidden; padding-right: clamp(32px, 22vw, 340px); }
.ar-control p { margin-top: 20px; max-width: 46ch; font-size: clamp(1.1rem, 1.6vw, 1.5rem); line-height: 1.4; }
.ar-control__m { position: absolute; right: clamp(24px, 5vw, 80px); bottom: -14px; width: clamp(96px, 11vw, 170px); }
.ar-control__m celeri-mascot { width: 100%; }
@media (max-width: 700px) { .ar-control .ff-vs__card { padding-right: 32px; padding-bottom: 130px; } .ar-control__m { width: 96px; } }
/* Menyen: tre kolonner med like brede sider, så midt-pillen står midt på siden (ikke midt mellom logo og knapper) */
@media (min-width: 901px) {
  .ph-nav__in { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); }
  .ph-nav__in .ph-logo { justify-self: start; }
  .ph-nav__in .ph-links { margin: 0; justify-self: center; }
}
.ph-nav__right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
@media (max-width: 900px) { .ph-nav__right { margin-left: auto; } }
/* Glass-pillen på scroll: lik luft på begge sider, så midt-pillen holder seg midt på */
@media (min-width: 901px) {
  .ph-nav.is-scrolled .ph-nav__in { padding: 6px; }
  .ph-nav.is-scrolled .ph-logo { padding-left: 18px; }
}
/* Smale laptoper: litt mindre luft rundt lenkene så det er plass til å sentrere */
@media (min-width: 901px) and (max-width: 1199px) {
  .ph-links a, .ph-links summary { padding: 0 14px; }
  .ph-login { padding: 0 14px; }
  .ph-nav .pill-btn--cta { padding: 0 22px; }
}
/* «Det dere slipper»: fire kort med hver sin overstrøkne illustrasjon */
.ar-skip .ph-card { overflow: hidden; }
.ar-skip__x { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: 18px; border-radius: 50%; background: #111214; color: var(--pink); font: 700 .95rem/1 var(--body); }
.ar-skip__art { position: absolute; left: 24px; right: 24px; bottom: 22px; height: 104px; display: grid; }
.ar-skip__art::after { content: ""; position: absolute; left: -8%; right: -8%; top: 50%; height: 6px; border-radius: 3px; background: var(--pink); rotate: -8deg; box-shadow: 0 6px 16px -6px rgba(255,0,135,.6); }
/* regneark */
.ar-sheet { grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px; border-radius: 12px; background: #fff; box-shadow: 0 12px 24px -18px rgba(17,18,20,.5); }
.ar-sheet i { border-radius: 3px; background: #f8ffe7; } .ar-sheet i:nth-child(-n+4) { background: #608500; opacity: .75; }
/* innsjekkliste på papir */
.ar-clip { align-content: center; gap: 10px; padding: 14px 16px; border-radius: 12px; background: #fff; box-shadow: 0 12px 24px -18px rgba(17,18,20,.5); }
.ar-clip i { display: block; height: 10px; border-radius: 5px; background: #ffe5f3; position: relative; margin-left: 24px; }
.ar-clip i::before { content: ""; position: absolute; left: -24px; top: -3px; width: 14px; height: 14px; border-radius: 4px; border: 2px solid #dadada; }
.ar-clip i:nth-child(2) { width: 70%; } .ar-clip i:nth-child(4) { width: 55%; }
/* tom crewliste */
.ar-zero { place-items: center; align-content: center; gap: 0; border-radius: 12px; border: 2px dashed rgba(17,18,20,.25); }
.ar-zero b { font: 400 3.4rem/1 var(--display); letter-spacing: -0.03em; } .ar-zero small { font-size: .8125rem; opacity: .6; }
/* spørsmålet som kommer igjen og igjen */
.ar-ask { align-content: end; justify-items: start; gap: 6px; }
.ar-ask span { padding: 7px 12px; border-radius: 14px 14px 14px 4px; background: #fff; font-size: .8125rem; font-weight: 600; box-shadow: 0 8px 16px -12px rgba(17,18,20,.5); }
.ar-ask span:nth-child(2) { justify-self: end; border-radius: 14px 14px 4px 14px; background: #111214; color: #fff4f9; }
.ar-ask span:nth-child(3) { justify-self: center; opacity: .85; }
.ar-skip .ph-card { min-height: 340px; }

/* Rosa knapper har hvit tekst (også illustrasjonen av «Meld meg på»-knappen) */
.signup__btn { color: #fff; font-weight: 700; background: var(--pink-btn); }
/* Skjema via e-post: forklaring om CV og lenker i bekreftelsen */
.jb-cvnote { font-size: .875rem; line-height: 1.45; opacity: .7; }
.bm__ok small a { color: inherit; }
/* Skjema: kvittering for sendt (Resend) eller åpnet e-post (reserve), feilmelding og robotfelle */
.bm__form:not(.via-mail) .bm__ok-mail, .bm__form.via-mail .bm__ok-sent { display: none; }
.bm__err { margin: 0; padding: 10px 14px; border-radius: 12px; background: #ffe5f3; color: var(--ink); font-size: .9375rem; }
.bm__send:disabled { opacity: .6; cursor: progress; }
.bm__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* NO/EN-bryter til høyre i menyen, også synlig på mobil ved siden av burgeren */
.ph-lang { display: inline-flex; align-items: center; gap: 6px; padding: 0 0 0 10px; margin-right: -6px; /* tett på «Logg inn», bort fra lenkene */ font-size: .95rem; font-weight: 500; color: var(--fg); transition: color var(--t); }
.ph-lang::before { content: "/"; order: 1; opacity: .4; } /* «NO / EN»: skråstreken står mellom de to lenkene */
.ph-lang a:last-child { order: 2; }
.ph-lang a { display: inline-flex; align-items: center; height: 40px; text-decoration: none; color: inherit; opacity: .45; transition: opacity .2s; }
.ph-lang a:hover, .ph-lang a[aria-current] { opacity: 1; }
@media (max-width: 900px) { .ph-links .m-cta { display: block; } } /* «Book et møte» nederst i burgermenyen (regelen over overstyrte den) */
/* 10: skjult til Kim/PiP gir klarsignal (PiP-tallet og casen, etterspørsel fra 2027, beløpet i bevisstripen). Vises med ?utkast. */
[data-gate="G1"], [data-gate="demand"], [data-gate="belop"], [data-gate="attendance"], [data-gate="rules"], [data-gate="funding"], [data-gate="quote"], [data-gate="pop"], [data-gate="salaried"], [data-gate="origin"] { display: none !important; }
.show-gates [data-gate="G1"], .show-gates [data-gate="demand"], .show-gates [data-gate="belop"], .show-gates [data-gate="attendance"], .show-gates [data-gate="rules"], .show-gates [data-gate="funding"], .show-gates [data-gate="quote"], .show-gates [data-gate="pop"], .show-gates [data-gate="salaried"], .show-gates [data-gate="origin"] { display: revert !important; }
/* 10: de nye sidene (For plattformer, For horeca) */
.sg-hero { background: #46494b; }
.sg-hero__cap { position: absolute; left: 24px; bottom: 20px; color: #fff; opacity: .7; font-size: .9rem; }
.ea-four.sg-three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1023px) { .ea-four.sg-three { grid-template-columns: 1fr; } .ea-four.sg-three .ph-card { min-height: 0; } }
.sg-three .ph-card { padding-bottom: 120px; }
.sg-three .ph-card:not(:has(.ea-four__m)) { padding-bottom: 32px; }
.sg-three .ph-card p { opacity: .8; font-size: 1.05rem; line-height: 1.45; }
@media (max-width: 1023px) { .sg-three .ph-card:has(.ea-four__m) { padding-right: 120px; padding-bottom: 32px; } }
.sg-demand { margin-top: 24px; }
.sg-demand p, .ar-control p { margin-top: 20px; }
.sg-text { max-width: 820px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; font: 400 clamp(1.4rem, 2.4vw, 2.1rem)/1.3 var(--display); letter-spacing: -0.02em; }
.aw-stats.sg-proof { grid-template-columns: repeat(auto-fit, minmax(0, 320px)); justify-content: center; }
@media (max-width: 700px) { .aw-stats.sg-proof { grid-template-columns: 1fr; } }
/* Om oss, «Slik jobber vi»: fem punkt (10 la til «Vi ansetter aldri» først) */
@media (min-width: 1280px) { .ea-four--five { grid-template-columns: repeat(5, 1fr); gap: 20px; } .ea-four--five .ph-card { padding: 28px 24px 130px; } }
@media (min-width: 1024px) and (max-width: 1279px) { .ea-four--five { grid-template-columns: repeat(3, 1fr); } }
/* Nedtrekksmenyen «Løsninger» (Festivaler, Horeca, Plattformer) med én linje under hvert valg */
.ph-menu { display: grid; gap: 2px; min-width: 320px; }
.ph-links .ph-menu a { flex-direction: column; align-items: flex-start; justify-content: center; height: auto; min-height: 56px; padding: 10px 16px; white-space: normal; gap: 2px; }
.ph-menu a[aria-current] { background: color-mix(in srgb, currentColor 8%, transparent); }
.ph-links summary.is-current { font-weight: 500; }
.ph-links summary:focus-visible, .ph-menu a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 900px) { .ph-menu { min-width: 0; } }
.ff-vs__card > p { margin-top: 16px; max-width: 62ch; opacity: .8; font-size: 1.05rem; line-height: 1.45; }
/* Kim v3: fire problemkort uten maskot, sitat, lenke i event-kortet, linjen under det */
.ea-four.sg-four .ph-card { min-height: 0; padding-bottom: 32px; }
.sg-four .ph-card p { opacity: .8; font-size: 1.05rem; line-height: 1.45; }
@media (min-width: 1024px) and (max-width: 1279px) { .ea-four.sg-four { grid-template-columns: 1fr 1fr; } }
.sg-quote { margin-top: 24px; }
.sg-link { margin-top: 24px; justify-self: start; }
.sg-text--after { margin: clamp(48px, 6vw, 80px) auto 0; }
/* Horeca, «Også for eventene deres»: bredt kort i forsidestil (stor tekst + svevende chips) */
.sg-event { width: auto; height: auto; aspect-ratio: auto; min-height: 360px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 32px;
  padding: clamp(32px, 4vw, 56px); transition: transform .4s cubic-bezier(.34,1.4,.64,1); }
.sg-event__text { display: grid; gap: 16px; justify-items: start; position: relative; z-index: 2; }
.sg-event .ph-card__t { font-size: clamp(1.75rem, 3vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; }
.sg-event p { max-width: 40ch; font-size: 1.1rem; }
.sg-event .pill-btn { margin-top: 8px; }
.sg-event .art { position: relative; left: auto; right: auto; bottom: auto; top: auto; height: 280px; }
.sg-event .art--float .tile { background: #111214; width: 120px; height: 120px; }
@media (hover: hover) { .sg-event:hover { transform: translateY(-6px) scale(1.01); } .sg-event:hover .art--float .chip { translate: 0 -6px; } }
@media (max-width: 900px) { .sg-event { grid-template-columns: 1fr; gap: 8px; } .sg-event .art { height: 220px; } }
/* Samme luft mellom «Slik fungerer det»-kortene og listene under som mellom kortene i karusellen */
.ph-rail + .ff-vs { margin-top: 24px; }
@media (min-width: 1440px) { .ph-rail + .ff-vs { margin-top: 32px; } }
/* Ultrawide (fra 2300 px, der fem kort får plass): navbar, hero og resten beholder bredden. Bare karusellene, som ellers
   går ut mot høyre kant, blir bredere og står midt på skjermen, med kort som fyller bredden. Under 2300 px går de ut mot høyre som før. */
@media (min-width: 2300px) {
  .ph-rail { --rail-w: min(2200px, 88vw); margin-left: calc((100% - var(--rail-w)) / 2); margin-right: calc((100% - var(--rail-w)) / 2); padding-right: 0; }
  .ph-rail > .ph-card { flex: 1 0 380px; width: auto; }
  /* Karuseller med tre kort eller færre får plass innenfor sidebredden: de står i flukt med overskriften og pilene over */
  .ph-rail:not(:has(> .ph-card:nth-child(4))) { margin-left: 0; margin-right: 0; }
}
/* Øverst på siden: lenkene står rett på bakgrunnen, uten den hvite pillen (på mobil er .ph-links burgermenyen og beholder bakgrunnen) */
@media (min-width: 901px) { .ph-nav:not(.is-scrolled) .ph-links { background: transparent; color: var(--fg); } }
/* Samme hero-størrelse på alle sider (Festivaler, For crew og Om oss var høyere): full bredde, høyde etter forholdet 1464:794,
   men aldri høyere enn skjermen. Mobil (≤700 px) beholder sine egne regler. */
@media (min-width: 701px) {
  .ph-hero__card, .ph-hero__card.ff-hero { width: 100%; aspect-ratio: auto; max-height: none;
    height: min(calc((min(100vw, 1560px) - 2 * clamp(16px, 3.75vw, 48px)) * 794 / 1464), calc(100svh - var(--hero-top) - 24px));
    min-height: min(520px, calc(100svh - var(--hero-top) - 24px)); }
}
/* Glass-navbaren gjør lenkene 40 px høye; valgene i nedtrekksmenyen skal beholde sin egen høyde og luft */
.ph-nav.is-scrolled .ph-links .ph-menu a { height: auto; min-height: 56px; padding: 10px 16px; }
/* «Book et møte» i hero: den skarpe Celeri-rosaen. Hvit tekst gir 3,75:1, så teksten er fet. */
.ph-hero__text .pill-btn--xl { background: var(--pink); color: #fff; box-shadow: none; font-weight: 700; font-size: clamp(1rem, 1.4vw, 1.2rem); }
.ph-hero__text .pill-btn--xl:hover { background: color-mix(in srgb, var(--pink) 88%, #fff); }
/* Poppins er bredere enn Inter: på de smaleste telefonene blir teksten i karusellkortene litt mindre, så den ikke treffer illustrasjonen */
@media (max-width: 400px) { .ph-rail .ph-card__s, .ph-trio .ph-card__s { font-size: .86rem; line-height: 1.38; } }
@media (max-width: 400px) { #moduler .art--tickets .s4 { display: none; } #moduler .art--tickets .paid { top: 60%; } } /* billetten og merket traff teksten i lønnskortet på små telefoner */
/* Personvernerklæringen (/legal/privacy): tabell over hva vi behandler, og vanlige punkter i listen */
.lg-prose { max-width: 960px; }
.lg-table-wrap { margin: 1.5em 0; }
.lg-table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.5; }
.lg-table th { text-align: left; font: 600 .85rem/1.3 var(--body); letter-spacing: .02em; text-transform: uppercase; opacity: .7; padding: 0 16px 12px 0; }
.lg-table td { vertical-align: top; padding: 16px 16px 16px 0; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.lg-table td:first-child { font-weight: 500; }
.lg-list li { padding-left: 24px; }
.lg-list li::before { content: ""; top: .75em; left: 4px; width: 8px; height: 8px; background: var(--pink); }
@media (max-width: 760px) {
  .lg-table thead { display: none; }
  .lg-table, .lg-table tbody, .lg-table tr, .lg-table td { display: block; width: 100%; }
  .lg-table tr { padding: 16px 20px; margin-bottom: 12px; border-radius: 16px; background: color-mix(in srgb, currentColor 5%, transparent); }
  .lg-table td { border: 0; padding: 6px 0; }
  .lg-table td::before { content: attr(data-label); display: block; font: 600 .75rem/1.3 var(--body); text-transform: uppercase; letter-spacing: .03em; opacity: .6; margin-bottom: 2px; }
}
/* CV: dra og slipp. Usynlig filfelt over hele flaten (klikk, tastatur og slipp virker), lastestripe, og maskoten spretter inn når filen er klar. */
.cv-drop { display: grid; gap: 8px; }
.cv-drop__label { font-size: .9375rem; font-weight: 500; }
.cv-drop__zone { position: relative; min-height: 132px; display: grid; place-items: center; padding: 18px; border-radius: 16px; text-align: center;
  border: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent); background: #ffe5f3; transition: border-color .2s, background-color .2s, transform .25s var(--ease); }
.jb-form .cv-drop__input, .cv-drop__input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.cv-drop__zone:hover { background: #ffffff; }
.cv-drop.is-over .cv-drop__zone { border-color: var(--pink); background: #ffe5f3; transform: scale(1.015); }
.cv-drop:focus-within .cv-drop__zone { border-color: var(--pink); border-style: solid; background: #fff; }
.cv-drop__input:user-invalid + .cv-drop__idle { color: var(--ink); }
.cv-drop__idle, .cv-drop__busy, .cv-drop__done { grid-area: 1 / 1; display: none; }
.cv-drop[data-state="idle"] .cv-drop__idle { display: grid; justify-items: center; gap: 4px; }
.cv-drop__icon { width: 44px; height: 44px; margin-bottom: 4px; display: grid; place-items: center; border-radius: 50%; background: var(--berry); color: #fff4f9; transition: transform .25s var(--ease); }
.cv-drop__icon svg { width: 22px; height: 22px; }
.cv-drop.is-over .cv-drop__icon { transform: translateY(-4px) scale(1.08); }
.cv-drop__idle strong { font-weight: 600; }
.cv-drop__idle span:last-child { font-size: .9375rem; opacity: .75; }
.cv-drop__idle u { text-decoration-color: var(--pink); text-underline-offset: 3px; }
.cv-drop__hint { font-size: .8125rem; opacity: .65; }
.cv-drop[data-state="busy"] .cv-drop__busy { display: grid; justify-items: center; gap: 10px; width: min(280px, 100%); font-size: .9375rem; }
.cv-drop__bar { display: block; width: 100%; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.cv-drop__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--pink); transition: width .8s var(--ease); }
.cv-drop[data-state="done"] .cv-drop__done { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; }
.cv-drop[data-state="done"] .cv-drop__zone { border-style: solid; border-color: color-mix(in srgb, var(--pink) 45%, transparent); background: #fff; }
.cv-drop__m { flex: none; width: 76px; animation: cv-pop .6s cubic-bezier(.34,1.56,.64,1) both; }
.cv-drop__m celeri-mascot { width: 100%; }
.cv-drop__file { display: grid; gap: 2px; min-width: 0; flex: 1; }
.cv-drop__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-drop__size { font-size: .8125rem; opacity: .65; }
.cv-drop__clear { position: relative; z-index: 2; flex: none; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--pink-btn); color: #fff; font: 700 .875rem var(--body); cursor: pointer; }
.cv-drop__err { margin: 0; font-size: .875rem; color: var(--ink); }
@keyframes cv-pop { 0% { transform: translateY(18px) scale(.4) rotate(-12deg); opacity: 0; } 70% { transform: translateY(-4px) scale(1.08) rotate(4deg); opacity: 1; } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .cv-drop__m { animation: none; } .cv-drop__bar i, .cv-drop__zone, .cv-drop__icon { transition: none; } }
@media (max-width: 560px) { .cv-drop__m { width: 60px; } .cv-drop__zone { min-height: 120px; } }
/* Kompakt CV-flate, så søknadsskjemaet fortsatt får plass på en 14" MacBook: ikon til venstre, tekst ved siden av */
.cv-drop__zone { min-height: 84px; padding: 14px 18px; }
.cv-drop[data-state="idle"] .cv-drop__idle { display: flex; align-items: center; justify-content: center; gap: 14px; text-align: left; }
.cv-drop__icon { margin: 0; flex: none; }
.cv-drop__txt { display: grid; gap: 1px; }
.cv-drop__txt > span { font-size: .9375rem; opacity: .75; }
.cv-drop__txt small { font-size: .8125rem; opacity: .6; }
.cv-drop__m { width: 58px; margin: -6px 0; }
@media (max-width: 560px) { .cv-drop__zone { min-height: 84px; } .cv-drop__m { width: 52px; } }
/* Filfeltet må dekke hele CV-flaten. Skjemaets egne regler for input (høyde 52/56 px, bakgrunn, ramme) skal ikke gjelde her. */
.bm__form .cv-drop__zone > input.cv-drop__input { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: inherit;
  background: transparent; opacity: 0; cursor: pointer; font-size: 0; }
/* Filfeltet er skjult, men fortsatt fokuserbart og påkrevd; hele flaten (etiketten) åpner filvelgeren */
.bm__form .cv-drop__zone > input.cv-drop__input { inset: auto; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cv-drop__zone { cursor: pointer; font-weight: 400; }
/* Kort med mye tekst: illustrasjonen ligger lavere og uten flis, så den ikke treffer teksten */
.ph-card.sg-art-low > .art { top: 66%; }
.sg-art-low .art--float .tile { display: none; }
@media (max-width: 1279px) { .ph-card.sg-art-low > .art { top: 72%; } }
@media (max-width: 420px) { .ph-card.sg-art-low > .art { top: 78%; } .sg-art-low .ph-card__s { font-size: .82rem; } }
.sg-folk .ph-card > .art { top: 54%; }
/* ---------- Kortillustrasjoner, runde 2: ti nye typer, hver med sin animasjon (spilles når kortet vises, se phantom.js) ---------- */
.art[data-play] { --pa: #fff; --pf: #111214; --pl: rgba(17,18,20,.1); }
.ph-card--ink .art[data-play] { --pa: #1c1e21; --pf: #fff4f9; --pl: rgba(255,255,255,.13); }
.a-panel { position: absolute; left: 9%; right: 9%; top: 8%; background: var(--pa); color: var(--pf); border-radius: 20px; padding: 14px 16px; font-size: .8rem;
  box-shadow: 0 20px 40px -24px rgba(7,7,8,.45); }
.a-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--pl); }
.a-row:last-child { border-bottom: 0; }
@keyframes a-pop { 0% { transform: scale(.2); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: none; } }
@keyframes a-down { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes a-up { from { transform: translateY(70%); } to { transform: none; } }
@keyframes a-grow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes a-drop { 0% { transform: translateY(-60px); opacity: 0; } 60% { transform: translateY(4px); opacity: 1; } 100% { transform: none; } }
@keyframes a-stamp { 0% { transform: scale(2.4); opacity: 0; } 60% { transform: scale(.92); opacity: 1; } 100% { transform: none; } }
@keyframes a-spin { from { transform: rotate(-330deg); } }
@keyframes a-slide { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes a-knob { from { transform: translateX(-16px); } }
@keyframes a-swbg { from { background: var(--pl); } }
.art[data-play] [style*="--d"] { animation-delay: calc(var(--d) * 110ms) !important; }

/* 1. Ukekalender: vaktene fylles inn dag for dag */
.cal__head { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 10px; } .cal__head i { font-style: normal; font-weight: 400; opacity: .6; }
.cal__days, .cal__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cal__days { margin-bottom: 6px; } .cal__days span { font-size: .7rem; opacity: .55; text-align: center; }
.cal__grid i { height: 22px; border-radius: 7px; background: var(--pl); }
.cal__grid i.on { background: var(--pink); } .cal__grid i.lime { background: var(--lime); }
.js .art--cal:not(.play) .cal__grid i:is(.on, .lime) { opacity: 0; }
.art--cal.play .cal__grid i:is(.on, .lime) { animation: a-pop .45s var(--ease) both; }

/* 2. Klokke: viseren går rundt, så kommer «Sjekket inn» */
.clock { position: absolute; left: 50%; top: 42%; width: 112px; height: 112px; translate: -50% -50%; border-radius: 50%; background: var(--pa); border: 6px solid var(--pink);
  box-shadow: 0 20px 40px -24px rgba(7,7,8,.5); }
.clock i { position: absolute; left: 50%; bottom: 50%; width: 4px; margin-left: -2px; border-radius: 2px; transform-origin: 50% 100%; }
.clock .clock__h { height: 26px; background: var(--pf); transform: rotate(60deg); } .clock .clock__m { height: 40px; background: var(--pink); }
.clock::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: var(--pf); }
.art--clock .chip { position: absolute; } .art--clock .k1 { left: 9%; bottom: 14%; } .art--clock .k2 { right: 9%; top: 6%; }
.js .art--clock:not(.play) .k1 { opacity: 0; }
.art--clock.play .clock__m { animation: a-spin 1.3s var(--ease) both; } .art--clock.play .k1 { animation: a-pop .5s 1.1s var(--ease) both; }

/* 3. Varsler på telefon: glir inn ett og ett */
.art--notif .phone { position: absolute; left: 12%; right: 12%; top: 6%; bottom: -24px; padding: 14px; display: grid; align-content: start; gap: 8px;
  background: #111214; border-radius: 26px 26px 0 0; }
.ph-card--ink .art--notif .phone { background: #1c1e21; }
.nt { display: grid; gap: 1px; padding: 9px 12px; border-radius: 14px; background: #fff; color: #111214; font-size: .76rem; }
.nt b { font-size: .68rem; font-weight: 600; opacity: .55; } .nt--pink { background: var(--pink); color: #fff; } .nt--pink b { opacity: .8; }
.js .art--notif:not(.play) .nt { opacity: 0; }
.art--notif.play .nt { animation: a-down .5s var(--ease) both; }

/* 4. Lønnsslipp: skrives ut, summen kommer til slutt */
.slip { position: absolute; left: 14%; right: 14%; top: 8%; bottom: -12px; padding: 16px 16px 20px; border-radius: 14px 14px 0 0; background: #fff; color: #111214; font-size: .8rem;
  box-shadow: 0 20px 40px -24px rgba(7,7,8,.45); }
.slip > b { display: block; margin-bottom: 6px; font-size: .85rem; }
.slip .a-row { border-bottom: 1px dashed rgba(17,18,20,.18); padding: 7px 0; }
.slip .slip__sum { font-weight: 700; border: 0; color: var(--ink); }
.art--slip.play .slip { animation: a-up .9s var(--ease) both; }

/* 5. Stolpediagram: stolpene vokser */
.bars { position: absolute; left: 12%; right: 12%; top: 22%; bottom: 14%; display: flex; align-items: flex-end; gap: 7%; }
.bars i { flex: 1; height: var(--h); border-radius: 10px 10px 4px 4px; background: var(--pa); transform-origin: 50% 100%; box-shadow: 0 16px 30px -22px rgba(7,7,8,.5); }
.bars i.hl { background: var(--pink); } .art--bars .chip { position: absolute; left: 12%; top: 4%; }
.art--bars.play .bars i { animation: a-grow .7s var(--ease) both; }

/* 6. Brytere: slås på en etter en */
.sw { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; background: var(--pink); }
.sw::after { content: ""; position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.art--toggles.play .sw { animation: a-swbg .4s var(--ease) both; } .art--toggles.play .sw::after { animation: a-knob .4s var(--ease) both; animation-delay: inherit; }
.js .art--toggles:not(.play) .sw { background: var(--pl); } .js .art--toggles:not(.play) .sw::after { transform: translateX(-16px); }

/* 7. Kartnåler: faller ned på kartet */
.map { position: absolute; left: 10%; right: 10%; top: 8%; bottom: 12%; border-radius: 20px; background-color: var(--pa);
  background-image: linear-gradient(var(--pl) 1px, transparent 1px), linear-gradient(90deg, var(--pl) 1px, transparent 1px); background-size: 24px 24px;
  box-shadow: 0 20px 40px -24px rgba(7,7,8,.45); }
.pin { position: absolute; width: 28px; height: 28px; margin: -28px 0 0 -14px; }
.pin::before { content: ""; position: absolute; inset: 0; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--pink); box-shadow: 0 8px 16px -8px rgba(7,7,8,.5); }
.pin::after { content: ""; position: absolute; left: 9px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.pin.lime::before { background: var(--lime); } .pin.dark::before { background: #111214; }
.art--pins .chip { position: absolute; right: 12%; bottom: 4%; }
.js .art--pins:not(.play) .pin { opacity: 0; }
.art--pins.play .pin { animation: a-drop .6s var(--ease) both; }

/* 8. Avkrysningsliste: hakene krysses av */
.cb { flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--pink); color: #fff; display: grid; place-items: center; font-size: .72rem; font-weight: 700; }
.a-checks .a-row { justify-content: flex-start; }
.js .art--checks:not(.play) .cb { background: var(--pl); color: transparent; }
.art--checks.play .cb { animation: a-pop .4s var(--ease) both; }

/* 9. Lenke som deles: lenken kopieres og sendes */
.a-link { display: flex; align-items: center; gap: 10px; top: 10%; padding: 12px 14px; }
.a-link svg { flex: none; width: 18px; height: 18px; color: var(--pink); }
.a-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.art--link .tile { position: absolute; left: 50%; bottom: 8%; translate: -50% 0; width: 88px; height: 88px; border-radius: 24px; background: #111214; display: grid; place-items: center;
  box-shadow: 0 20px 40px -20px rgba(7,7,8,.6); }
.art--link .tile celeri-mascot { width: 70px; }
.art--link .copied { position: absolute; right: 9%; top: 36%; }
.js .art--link:not(.play) .copied { opacity: 0; }
.art--link.play .a-link { animation: a-slide .5s var(--ease) both; } .art--link.play .copied { animation: a-pop .45s .5s var(--ease) both; }

/* 10. Dokument med stempel: stempelet slås ned */
.doc { position: absolute; left: 18%; right: 18%; top: 6%; bottom: -16px; padding: 18px; border-radius: 12px 12px 0 0; background: #fff; color: #111214;
  box-shadow: 0 20px 40px -24px rgba(7,7,8,.45); }
.doc b { display: block; font-size: .85rem; margin-bottom: 10px; }
.doc i { display: block; height: 8px; margin: 9px 0; border-radius: 4px; background: rgba(17,18,20,.12); }
.doc i:nth-of-type(2) { width: 80%; } .doc i:nth-of-type(3) { width: 90%; } .doc i:nth-of-type(4) { width: 55%; }
.stamp { position: absolute; right: 8%; bottom: 26%; padding: 6px 12px; border: 3px solid var(--pink); border-radius: 8px; color: var(--pink); font-weight: 700; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .06em; rotate: -12deg; background: rgba(255,255,255,.85); }
.js .art--doc:not(.play) .stamp { opacity: 0; }
.art--doc.play .stamp { animation: a-stamp .5s .35s cubic-bezier(.34,1.56,.64,1) both; }

@media (prefers-reduced-motion: reduce) { .art[data-play] *, .art[data-play] *::after { animation: none !important; } }
@media (max-width: 400px) { .a-panel { padding: 12px 14px; font-size: .74rem; } .clock { width: 96px; height: 96px; } .cal__grid i { height: 18px; } }
.ph-card--mid .bars i.hl, .ph-card--pink .bars i.hl { background: #111214; } /* rosa stolper forsvinner på rosa kort */
.ph-card--ink .bars i:not(.hl) { background: rgba(255,255,255,.18); }
/* Partnere: integrasjonene under partnerkortene */
.int-more { display: grid; justify-items: center; gap: 16px; margin: clamp(64px, 8vw, 112px) 0 clamp(32px, 4vw, 48px); text-align: center; }
.int-more .ph-h2 { font-size: clamp(2.1rem, 4.4vw, 3.75rem); }
@media (min-width: 1280px) { .int-more:not(.int-more--top) + .int-grid { grid-template-columns: repeat(5, 1fr); gap: 20px; } .int-more:not(.int-more--top) + .int-grid .int-card { padding: 24px; min-height: 250px; } }
.int-more--top { margin-top: 0; } /* «Partnere»-merket over partnerkortene */

/* Samtykke til Google Analytics: like store knapper, begge valg like enkle */
.ck { position: fixed; z-index: 60; left: 24px; bottom: 24px; width: min(440px, calc(100vw - 32px)); display: grid; gap: 16px; padding: 24px; border-radius: 24px; background: #fdfcfc; color: #0b0c0c; --btn-fg: #0b0c0c; box-shadow: 0 8px 32px rgba(11,12,12,.18); font: 400 .95rem/1.5 var(--body); }
.ck p { margin: 0; }
.ck a { color: inherit; }
.ck__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ck .pill-btn { justify-content: center; }
@media (max-width: 700px) { .ck { left: 16px; bottom: 16px; padding: 20px; } }