/* Turntake · undersiderne /byoc, /models og /about (T-013, 10/10-2026; retterrunde 10/10 eftermiddag)
   Bygger på styles.css (tokens, typografi, knapper, topbar + menu, tilmelding, footer). Her står kun det, undersiderne selv har.
   Rav er kun turen: én prik pr. skærm (sporet i BYOC-billedet, tidslinjens "A name.", tilmeldingens punktum).
   Ingen inline-styles (CSP style-src 'self'). Bevægelse kun via klasser og Web Animations fra main.js; reduceret
   bevægelse og "Pause motion" viser sluttilstanden, som også er det, siden viser uden JS.
   Billeder: kun egne, offentlige stills fra site_next (media/fmt_*.webp, img/lib-ler*.webp, img/thumb-*.webp), mærket
   "Sample content" eller "From our own ads". */

/* ---------- hero på undersiderne ---------- */
.ph { position: relative; isolation: isolate; padding: calc(var(--top-h) + clamp(32px, 4.2vw, 64px)) 0 clamp(48px, 5vw, 72px); overflow-x: clip; }
.ph .hero__spot { height: 760px; }
.ph__copy { position: relative; max-width: 900px; }
.ph__h1 { max-width: 14.5em; font-size: clamp(40px, 5.6vw, 80px); }
.ph .label { flex-wrap: wrap; }
.ph .lede { max-width: 39em; }
.ph--about .ph__h1 { max-width: 13em; }
@media (min-width: 600px) { .ph__h1 .dim, .pg .sec__head--split .h2 .dim, .final__head .h2 .dim, .built__head .h2 .dim { display: block; } }
.strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 24px 0 0; padding: 0; list-style: none; font: 400 13px/1.4 var(--f-tc); color: var(--muted); }
.strip li { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.strip .ic { width: 12px; height: 12px; color: var(--faint); }
/* mærkeforklaringen står lige under heroens knapper (og igen ved tilmeldingen) */
.ph__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 18px; font-size: 13px; color: var(--muted); }
.ph__legend .tag { height: 20px; padding: 0 6px; font-size: 10.5px; }
.tag[title] { cursor: help; }

/* undersiderne er lidt tættere end forsiden (samme rytme, kortere sider) */
:where(.pg) .sec { padding-block: clamp(48px, 5vw, 72px); }
:where(.pg) .sec__head { margin-bottom: clamp(28px, 3.2vw, 44px); }
.sec__head--last { margin-bottom: 0; }
.sec__lede--text { color: var(--text); }

/* ---------- egne stills som baggrund (dekorative, aria-hidden) ---------- */
.im { background-color: #16181c; background-position: center; background-size: cover; background-repeat: no-repeat; }
.im-ugc { background-image: url(/media/fmt_ugc.webp); }
.im-clay { background-image: url(/media/fmt_claymation.webp); }
.im-skel { background-image: url(/media/fmt_skeleton.webp); }
.im-l03 { background-image: url(/img/lib-ler03.webp); }
.im-l06 { background-image: url(/img/lib-ler06.webp); }
.im-l07 { background-image: url(/img/lib-ler07.webp); }
.im-l10 { background-image: url(/img/lib-ler10.webp); }
.im-shop { background-image: url(/img/thumb-shop.webp); }
.im-face { background-image: url(/img/thumb-shop-face.webp); }
.im-coins { background-image: url(/img/thumb-coins.webp); }
.im-coins2 { background-image: url(/img/thumb-coins-close.webp); }
.im-window { background-image: url(/img/thumb-window.webp); }
/* den rene optagelse bag UGC-annoncen: samme billede, beskåret over de brændte captions */
.im-ugc-clean { background-image: url(/media/fmt_ugc.webp); background-position: 50% 0; }
.im-ugc-tight { background-image: url(/media/fmt_ugc.webp); background-size: 180% auto; background-position: 50% 6%; }
.im-l06-roof { background-image: url(/img/lib-ler06.webp); background-size: 170% auto; background-position: 50% 0; }

/* ============ /byoc · "Pile → Shelf" ============ */
.pf { margin: clamp(36px, 4vw, 52px) 0 0; padding: clamp(16px, 2.2vw, 28px); border: 1px solid var(--line); border-radius: 20px;
  background: linear-gradient(180deg, #101114, #0b0c0e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 40px 80px rgba(0, 0, 0, .35); }
.pf__track { position: relative; height: 42px; margin: 2px 8px 16px; }
/* fire stop med samme navne som brødkrummen: Best ads · Clean footage · Clips · Library */
.pf__rail { position: absolute; left: 12.5%; right: 12.5%; top: 7px; height: 1px; background: var(--line-strong); }
.pf__rail::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .6)); transition: width 1s var(--ease); }
.pf__stop { position: absolute; top: 0; padding-top: 19px; font: 400 12px/1.2 var(--f-tc); color: var(--text); white-space: nowrap; transform: translateX(-50%); transition: color .3s; }
.pf__stop::before { content: ""; position: absolute; left: 50%; top: 3px; width: 9px; height: 9px; margin-left: -4.5px; border: 1px solid #fff; border-radius: 50%; background: #fff; transition: background-color .3s, border-color .3s; }
.pf__stop--1 { left: 12.5%; } .pf__stop--2 { left: 37.5%; } .pf__stop--3 { left: 62.5%; } .pf__stop--4 { left: 87.5%; }
.pf__dot { position: absolute; z-index: 2; top: 2px; left: 87.5%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 0 18px var(--accent-glow); transition: left 1s var(--ease); }
.pf__row { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1.08fr); align-items: stretch; gap: clamp(12px, 1.6vw, 22px); }
.pf__panel { position: relative; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #0c0d10; }
.pf__panel--lib { border-color: var(--line-strong); background: #111216; }
.pf__lab { margin: 0 0 12px; font: 600 13px/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pf__lab--lib { color: #fff; }
.pf__arrow { align-self: center; justify-self: center; width: 22px; height: 22px; color: var(--muted); }

/* bunken: annoncer (med captions) og optagelser i tre formater, skråt og i lag */
.pile { position: relative; aspect-ratio: 16 / 9.6; }
.pt { position: absolute; display: block; border: 1px solid var(--line-strong); border-radius: 7px; background-color: #16181c; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); transition: border-color .35s, box-shadow .35s, filter .35s; }
.pt--v { width: 15%; aspect-ratio: 9 / 16; }
.pt--p { width: 18%; aspect-ratio: 4 / 5; }
.pt--s { width: 16%; aspect-ratio: 1; }
.pt--f { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 22%; aspect-ratio: 4 / 3; border: 1px dashed #4a4f58; background: rgba(12, 13, 16, .9); box-shadow: none; color: var(--muted); }
.pt--f .ic { width: 22px; height: 22px; }
.pt__n { position: absolute; z-index: 1; left: 5px; bottom: 5px; padding: 2px 5px; border: 1px solid var(--line-strong); border-radius: 4px; background: rgba(10, 10, 11, .88);
  font: 500 10.5px/1.25 var(--f-tc); color: var(--text); white-space: nowrap; }
.pt--f .pt__n { position: static; border: 0; background: none; padding: 0; color: var(--muted); }
/* placering (venstre/top i % af bunken) */
.pile .p1 { left: 1%; top: 52%; transform: rotate(-9deg); }
.pile .p2 { left: 49%; top: 70%; transform: rotate(11deg); }
.pile .p3 { left: 80%; top: 58%; transform: rotate(-6deg); }
.pile .p4 { left: 27%; top: 1%; transform: rotate(12deg); }
.pile .p5 { left: 64%; top: 44%; transform: rotate(4deg); }
.pile .p-fold { left: 2%; top: 4%; transform: rotate(-4deg); }
.pile .p-broll { left: 63%; top: 2%; transform: rotate(-5deg); }
.pile .p-nosubs { left: 29%; top: 72%; transform: rotate(7deg); }
.pile .p-final { left: 15%; top: 22%; transform: rotate(-7deg); }
.pile .p-export { left: 83%; top: 6%; transform: rotate(6deg); }
.pile .p-raw { left: 45%; top: 24%; transform: rotate(4deg); }
.pile .p-img { left: 31%; top: 37%; transform: rotate(-3deg); }
.pile .p-export .pt__n, .pile .p3 .pt__n { left: auto; right: 5px; }
/* annoncernes filnavn står øverst, så de brændte captions kan ses */
.pile .p-final .pt__n, .pile .p-export .pt__n { top: 5px; bottom: auto; }
/* de bedste annoncer (1) og optagelserne bag dem (2) får en ring; resten af bunken trækker sig lidt tilbage */
.pile .pt:not([data-ring]):not(.pt--f) { filter: brightness(.62) saturate(.7); }
.pf:not(.is-armed) .pt[data-ring], .pf.ph1 .pt[data-ring="1"], .pf.ph2 .pt[data-ring="2"] {
  border-color: #fff; box-shadow: 0 0 0 1px #fff, 0 10px 24px rgba(0, 0, 0, .45), 0 0 24px rgba(255, 255, 255, .14); }

/* hylden: én række pr. rolle, tre pladser, en måler og Enough/Missing (ingen tal) */
.shelf { --slot: 36px; display: grid; gap: 8px; }
.sh { display: grid; grid-template-columns: minmax(0, 116px) auto minmax(64px, 1fr); align-items: center; gap: 10px 14px; padding: 8px 12px 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #0d0e11; transition: border-color .3s, background-color .3s; }
.sh.is-hit { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .03); }
.sh__n { font: 600 13px/1.15 var(--f-label); letter-spacing: .07em; text-transform: uppercase; color: var(--text); }
.sh__slots { display: flex; gap: 6px; }
.ls { position: relative; display: block; flex: none; width: var(--slot); aspect-ratio: 9 / 16; border: 1px dashed #3a3e46; border-radius: 6px; }
.ls > i { position: absolute; inset: -1px; border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
.ls--add::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%);
  background: linear-gradient(var(--faint), var(--faint)) center / 12px 1.5px no-repeat, linear-gradient(var(--faint), var(--faint)) center / 1.5px 12px no-repeat; }
.sh__m { display: grid; gap: 7px; min-width: 0; }
.mtr { position: relative; display: block; height: 6px; overflow: hidden; border-radius: 3px; background: var(--raised-2); transition: background-color .3s; }
.mtr::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: #fff; transition: width .7s var(--ease); }
.mtr--full::after { width: 100%; }
.mtr--part::after { width: 34%; }
.mtr--part, .mtr--none { background: repeating-linear-gradient(135deg, #50555f 0 1.5px, transparent 1.5px 5px), var(--raised); }
.sh__v { font: 500 11px/1 var(--f-tc); letter-spacing: .06em; text-transform: uppercase; color: #fff; transition: opacity .4s; }
.sh__v--miss { color: var(--muted); }
.pf__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; margin-top: 12px; padding: 0 4px; color: var(--muted); }
.pf__foot .mono { font-size: 12px; }
.pf__replay { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 11px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--text); font-size: 13px; cursor: pointer; transition: border-color .15s, color .15s; }
.pf__replay:hover { border-color: #474c55; color: #fff; }
.pf__replay[hidden] { display: none; }
/* forløbet (kun med JS og bevægelse): main.js sætter .is-armed og så ph1 → ph4; klippene flyver ind med Web Animations */
.pf.is-armed .pf__dot { left: 0; }
.pf.is-armed .pf__rail::after { width: 0; }
.pf.is-armed.ph1 .pf__dot { left: 12.5%; }
.pf.is-armed.ph2 .pf__dot { left: 37.5%; } .pf.is-armed.ph2 .pf__rail::after { width: 33.333%; }
.pf.is-armed.ph3 .pf__dot { left: 62.5%; } .pf.is-armed.ph3 .pf__rail::after { width: 66.667%; }
.pf.is-armed.ph4 .pf__dot { left: 87.5%; } .pf.is-armed.ph4 .pf__rail::after { width: 100%; }
.pf.is-armed .pf__stop { color: var(--faint); }
.pf.is-armed .pf__stop::before { border-color: var(--faint); background: var(--bg); }
.pf.is-armed.ph1 .pf__stop--1, .pf.is-armed.ph2 .pf__stop--2, .pf.is-armed.ph3 .pf__stop--3, .pf.is-armed.ph4 .pf__stop--4 { color: #fff; }
.pf.is-armed.ph1 .pf__stop--1::before, .pf.is-armed.ph2 .pf__stop--2::before, .pf.is-armed.ph3 .pf__stop--3::before, .pf.is-armed.ph4 .pf__stop--4::before { border-color: #fff; background: #fff; }
.pf.is-armed .ls > i:not(.is-in) { opacity: 0; }
.pf.is-armed .sh:not(.is-done) .mtr { background: var(--raised-2); }
.pf.is-armed .sh:not(.is-done) .mtr::after { width: 0; }
.pf.is-armed .sh:not(.is-done) .sh__v { opacity: 0; }
.ls > i.is-flying { z-index: 5; will-change: transform; }

/* ---------- /byoc · who it's for ---------- */
.sec--fit { padding-block: clamp(44px, 4.2vw, 60px); }
.fit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 28px clamp(32px, 5vw, 80px); }
.ticks { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ticks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.45; color: #fff; }
.ticks .ic { width: 16px; height: 16px; margin-top: 4px; color: #fff; }
.fit__mono { margin-top: 18px; color: var(--muted); }
.alink--in { display: inline-flex; min-height: 0; margin-left: 2px; }
.fit__body .alink { margin-top: 6px; }

/* ---------- /byoc · flowet i seks trin: illustration, navn, titel og én linje; "Details" folder resten ud ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.step { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 16px 20px 14px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, #101114, #0b0c0e); }
.step__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 26px; margin-bottom: 8px; }
.step__e { display: inline-flex; align-items: center; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.step__n { color: var(--muted); }
.step__k::before { content: "·"; margin: 0 .55em; }
.chk { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 7px; border: 1px solid rgba(255, 255, 255, .42); border-radius: 999px; font: 500 12px/1 var(--f-ui); color: #fff; white-space: nowrap; }
.chk .ic { width: 13px; height: 13px; }
.step__t { margin: 0 0 6px; font: 500 20px/1.25 var(--f-ui); letter-spacing: -.02em; color: #fff; }
.step__s { font-size: 15.5px; line-height: 1.5; color: var(--text); text-wrap: pretty; }
.step__more { display: none; }
.step__more:not([hidden]) { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; min-height: 40px; margin-top: auto; padding: 4px 0 0; border: 0; background: none;
  font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; transition: color .15s; }
.step__more:hover, .step.is-open .step__more { color: #fff; }
.step__more .ic { transition: transform .2s var(--ease); }
.step.is-open .step__more .ic { transform: rotate(180deg); }
.js .step:not(.is-open) .step__body { display: none; }
.step__body { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.step__d { font-size: 14.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.who { display: grid; gap: 8px; margin: 14px 0 0; }
.who div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; }
.who dt { font: 500 11px/1.95 var(--f-tc); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.who dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.rchips, .keys { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.rchips li, .keys li { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--raised); font-size: 12.5px; color: #fff; white-space: nowrap; }
.keys li { padding-left: 4px; }
kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-right: 7px; padding: 0 4px; border: 1px solid #4a4f58; border-bottom-width: 2px; border-radius: 4px; background: #1d2026; font: 500 10.5px/1 var(--f-tc); color: #fff; }
.step__note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font: 400 12.5px/1.4 var(--f-tc); color: var(--muted); }
.flow__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.flow__end .mono { color: var(--muted); }

/* mini-illustrationerne (dekorative, aria-hidden): samme stregstil, egne stills */
.ill { position: relative; height: 106px; margin: 0 0 16px; padding: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #0c0d10; color: var(--muted); }
/* 01: to konti med lås; Connect er tegnet lukket (Coming), opsætningen sker sammen med os */
.ill--conn { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 12px 8px; }
.acc { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: #15171b; font-size: 12px; color: var(--text); white-space: nowrap; }
.acc .ic { width: 12px; height: 12px; color: var(--muted); }
.wire { position: relative; align-self: center; flex: 0 1 34px; height: 1px; background: repeating-linear-gradient(90deg, var(--muted) 0 3px, transparent 3px 6px); }
.conn { display: flex; flex: 1 0 100%; align-items: center; justify-content: center; gap: 8px; }
.conn__b { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border: 1px dashed #4a4f58; border-radius: 7px; background: transparent; font-size: 12px; font-weight: 500; color: var(--faint); }
.conn .tag { height: 20px; padding: 0 6px; font-size: 10px; }
.conn::after { content: "read-only"; font: 400 11px/1 var(--f-tc); color: var(--muted); }
/* 02: fem annoncer, de tre bedste med ring */
.ill--rank { display: flex; align-items: flex-end; justify-content: center; gap: 10px; }
.rk { display: grid; justify-items: center; gap: 6px; }
.rk i { display: block; width: 36px; aspect-ratio: 9 / 16; border: 1px solid var(--line-strong); border-radius: 5px; background-color: #1d2025; }
.rk:not(.is-top) i { background-image: linear-gradient(165deg, #2c3037, #16181c); opacity: .55; }
.rk.is-top i { border-color: #fff; box-shadow: 0 0 0 1px #fff; }
.rk b { font: 400 10.5px/1 var(--f-tc); color: var(--faint); }
.rk.is-top b { color: #fff; }
/* 03: samme optagelse med og uden captions */
.ill--trace { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding-inline: 18px; }
.tr__ad, .tr__src { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tr__img { display: block; width: 36px; aspect-ratio: 9 / 16; border: 1px solid var(--line-strong); border-radius: 5px; }
.tr__img--clean { border-color: #fff; box-shadow: 0 0 0 1px #fff; }
.tr__ad em, .tr__src em { display: inline-flex; align-items: center; gap: 4px; font: 400 10.5px/1 var(--f-tc); font-style: normal; color: var(--muted); white-space: nowrap; }
.tr__src em .ic { width: 11px; height: 11px; }
.tr__line { position: relative; display: grid; place-items: center; height: 1px; background: repeating-linear-gradient(90deg, var(--muted) 0 3px, transparent 3px 6px); }
.tr__line .ic { width: 26px; height: 26px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 50%; background: #0c0d10; color: #fff; }
/* 04: optagelsen skåret i klip med hver sin rolle */
.ill--cut { display: grid; align-content: center; gap: 8px; }
.cut__strip, .cut__tags { display: grid; grid-template-columns: 1.15fr 1.4fr .95fr .8fr; }
.cut__strip { height: 54px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 6px; }
.cut__strip i { position: relative; display: block; }
.cut__strip i + i { border-left: 2px solid #fff; }
.cut__tags b { justify-self: start; height: 20px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--raised); font: 500 11px/18px var(--f-ui); color: #fff; }
.cut__tags b:first-child { border-color: #fff; background: #fff; color: var(--bg); }
/* 05: Keep / Favorite / Archive og en kommentar */
.ill--rate { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 16px; padding-inline: 18px; }
.rate__clip { position: relative; width: 46px; aspect-ratio: 9 / 16; border: 1px solid var(--line-strong); border-radius: 6px; }
.rate__bub { position: absolute; left: 70%; top: 2px; padding: 3px 7px; border-radius: 7px 7px 7px 2px; background: #fff; font: 500 11px/1.25 var(--f-ui); font-style: normal; color: var(--bg); white-space: nowrap; }
.rate__opts { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 18px; }
.rate__opts b { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--text); }
.rate__opts b.is-on { border-color: #fff; background: #fff; color: var(--bg); }
/* 06: et lille bibliotek, sorteret efter rolle, med én tom plads */
.ill--lib { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: 6px; padding-inline: 14px; }
.lt { display: grid; gap: 6px; min-width: 0; }
.lt i { display: block; aspect-ratio: 3 / 4; border: 1px solid var(--line-strong); border-radius: 5px; }
.lt b { overflow: hidden; font: 500 9.5px/1 var(--f-tc); letter-spacing: .05em; text-align: center; text-transform: uppercase; color: var(--text); white-space: nowrap; }
.lt--add i { position: relative; border-style: dashed; border-color: #3a3e46; }
.lt--add i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%);
  background: linear-gradient(var(--faint), var(--faint)) center / 12px 1.5px no-repeat, linear-gradient(var(--faint), var(--faint)) center / 1.5px 12px no-repeat; }
.lt--add b { color: var(--muted); }

/* ---------- /byoc · what you get ---------- */
.sec--get .h2 { font-size: clamp(34px, 3.9vw, 56px); }
.get { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 16px; }
.ccard { display: flex; flex-direction: column; padding: clamp(18px, 2.4vw, 32px); border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, #101114, #0b0c0e); }
.ccard__in { display: grid; grid-template-columns: minmax(0, 116px) minmax(0, 1fr); align-items: start; gap: 20px; padding: 16px; border: 1px solid var(--line-strong); border-radius: 14px; background: #131519; box-shadow: 0 24px 50px rgba(0, 0, 0, .4); }
.ccard__thumb { position: relative; display: block; aspect-ratio: 9 / 16; border: 1px solid var(--line-strong); border-radius: 9px; }
.ccard__thumb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); border-radius: 50%;
  background: rgba(10, 10, 11, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4.2v7.6L12 8Z' fill='%23fff'/%3E%3C/svg%3E") center / 16px no-repeat; }
.ccard__tags { margin: 0; }
.ct { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; }
.ct:first-child { padding-top: 0; }
.ct:last-child { border-bottom: 0; padding-bottom: 0; }
.ct dt { font: 400 11px/1.7 var(--f-tc); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.ct dd { margin: 0; color: #fff; }
.ct dd.ct__ph { color: var(--muted); }
.ct--role dd { justify-self: start; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; background: #fff; font-weight: 500; color: var(--bg); }
.ccard__more { margin-top: 18px; }
.ccard__ml { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.ccard__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mc { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #111216; }
.mc i { display: block; aspect-ratio: 9 / 16; border: 1px solid var(--line-strong); border-radius: 5px; }
.mc b { min-width: 0; font: 600 11.5px/1.2 var(--f-label); letter-spacing: .07em; text-transform: uppercase; color: var(--text); overflow-wrap: anywhere; }
.ccard__cap { margin-top: auto; padding-top: 14px; font-size: 12px; color: var(--muted); }
.get__side { display: grid; gap: 16px; }
.gbox { padding: clamp(20px, 2.2vw, 28px); border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, #101114, #0b0c0e); }
.gbox > p { color: var(--muted); }
.gbox__cap { margin-top: 12px; font-size: 12px; }
.gbox__h2 { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.meters { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.meters li { display: grid; grid-template-columns: minmax(0, 116px) minmax(0, 1fr) 64px; align-items: center; gap: 12px; }
.meters__n { font: 600 13px/1 var(--f-label); letter-spacing: .07em; text-transform: uppercase; color: var(--text); }
.meters__v { font: 500 11px/1 var(--f-tc); letter-spacing: .06em; text-align: right; text-transform: uppercase; color: #fff; }
.meters__v--miss { color: var(--muted); }
.gaps { margin: 14px 0 0; padding: 0; list-style: none; }
.gaps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 11px 0; border-top: 1px solid var(--line); color: var(--text); }
.gaps__n { padding-top: 2px; color: var(--muted); }
.gaps .tag { margin-left: 6px; vertical-align: 1px; }
.get__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 28px; }

/* ---------- /byoc · sources ---------- */
/* kompakt: navn, en kort note og mærket; to spalter fra 768 px */
.sec--src { padding-block: clamp(48px, 5vw, 72px); }
.src { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); align-items: start; gap: 28px clamp(32px, 5vw, 80px); }
.srcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 2.6vw, 36px); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.srcs li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 54px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.srcs__n { font-weight: 500; color: #fff; }
.srcs__l { font: 400 12px/1.3 var(--f-tc); color: var(--muted); }
.srcs li > .tag { margin-left: auto; }

/* ---------- FAQ (alle undersider) ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px clamp(32px, 4vw, 64px); }
.faq__h { align-self: start; margin: 10px 0 0; }
.faq__list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 0; list-style: none; cursor: pointer;
  font: 500 clamp(17px, 1.4vw, 19px)/1.35 var(--f-ui); letter-spacing: -.012em; color: #fff; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .ic { width: 16px; height: 16px; color: var(--muted); transition: transform .2s var(--ease), color .15s; }
.qa summary:hover .ic { color: #fff; }
.qa[open] summary .ic { transform: rotate(180deg); }
.qa p { max-width: 62ch; padding: 0 32px 20px 0; font-size: 16px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

/* ============ /models ============ */
/* heroen: tekst til venstre, Concept-chatten til højre fra 1024 px (under teksten på smallere skærme) */
.ph__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 4vw, 56px); }
.ph__grid .chat--models { max-width: none; }
.jobs { margin-top: clamp(40px, 5vw, 64px); }
.jobs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.jobs a { display: grid; grid-template-columns: 28px minmax(0, auto) minmax(0, 1fr) 14px; align-items: center; gap: 12px; min-height: 52px; padding: 8px 2px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; transition: background-color .15s; }
.jobs a:hover { background: rgba(255, 255, 255, .025); }
.jobs__n { font-size: 12px; color: var(--faint); }
.jobs__t { font-weight: 500; color: #fff; white-space: nowrap; }
.jobs__l { overflow: hidden; font-size: 13.5px; color: var(--muted); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.jobs .ic { color: var(--faint); transition: transform .2s var(--ease), color .15s; }
.jobs a:hover .ic { color: #fff; transform: translateX(2px); }
/* How it will work: tre trin på række */
.vsteps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 clamp(20px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.vsteps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-top: 1px solid var(--line-strong); }
.vsteps__n { padding-top: 4px; color: var(--muted); }
.vsteps__t { margin: 0 0 4px; font: 500 19px/1.3 var(--f-ui); letter-spacing: -.015em; color: #fff; }
.vsteps p { font-size: 15.5px; color: var(--muted); text-wrap: pretty; }
.mhow__mcp { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); }
/* Concept-chatten: højden ligger fast, mens den spiller (så heroen ikke hopper) */
.chat--models .msg--ai { position: relative; }
.chat--models .typing { position: absolute; left: 0; top: 24px; }
.chat--models.is-play:not(.s3) .msg__txt { display: block; visibility: hidden; }
.chat--models.is-play:not(.s3) .plan { display: grid; visibility: hidden; }
.att { display: inline-flex; align-items: center; gap: 8px; height: 30px; margin-bottom: 8px; padding: 0 10px 0 4px; border: 1px solid var(--line-strong); border-radius: 8px; background: #15171b; font: 400 12px/1 var(--f-tc); color: var(--text); }
.att img { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; object-position: 50% 30%; }
.plan { display: grid; gap: 4px; margin-top: 12px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 12px; background: #0f1013; }
.plan__r { display: grid; grid-template-columns: 16px auto minmax(0, 1fr); align-items: center; gap: 10px; min-height: 30px; font-size: 13.5px; }
.plan__r i { font-size: 11px; font-style: normal; color: var(--muted); }
.plan__r b { font-weight: 500; color: #fff; }
.plan__r > span { justify-self: end; font: 400 12px/1 var(--f-tc); color: var(--muted); }
.plan__r--cost { grid-template-columns: auto minmax(0, 1fr) auto; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); }
.plan__r--cost b { font-weight: 400; color: var(--muted); }
.plan__r > .plan__note { justify-self: start; font-size: 11.5px; color: var(--faint); }
.plan__r > .plan__go { height: 28px; padding: 0 14px; border-radius: 7px; background: #fff; font: 600 12.5px/28px var(--f-ui); color: var(--bg); }
.chat.is-play.s3 .plan { animation: note-in .45s var(--ease) .12s both; }
/* The lineup: et katalog med et billede pr. kategori, slug pr. model og en lukket Try-knap */
.mcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mcard { --mp: clamp(20px, 2.2vw, 26px); display: flex; flex-direction: column; min-width: 0; padding: var(--mp); overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, #101114, #0b0c0e); scroll-margin-top: calc(var(--top-h) + 24px); }
.mcard__img { position: relative; margin: calc(var(--mp) * -1) calc(var(--mp) * -1) 18px; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--line); background: #0c0d10; }
.mcard__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.mcard__img--face img { object-position: 50% 22%; }
.mcard__img--caps img { object-position: 50% 80%; }
.mcard__img--wave { display: grid; place-items: center; padding: 18px 22px; color: #5d636e; }
.mcard__img--wave svg { width: 100%; height: 100%; }
.mcard__img--wave .wv-on { color: #fff; }
.mcard__src { position: absolute; left: 10px; bottom: 10px; padding: 3px 7px; border: 1px solid var(--line-strong); border-radius: 5px; background: rgba(10, 10, 11, .82); font-size: 11px; color: var(--text); }
.mcard__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mcard__i { width: 22px; height: 22px; color: #fff; }
.mcard__cat { font: 600 13px/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mcard .h3 { margin-bottom: 6px; }
.mcard__p { font-size: 15px; color: var(--muted); text-wrap: pretty; }
.mdl { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.mdl li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n t" "s t" "l l"; align-items: center; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.mdl li:last-child { padding-bottom: 0; border-bottom: 0; }
.mdl__n { grid-area: n; font-size: 15.5px; font-weight: 500; color: #fff; }
.mdl__s { grid-area: s; overflow: hidden; font-size: 12px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.mdl__l { grid-area: l; margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.try { grid-area: t; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 7px; background: transparent;
  font: 500 12px/1 var(--f-ui); color: var(--faint); white-space: nowrap; cursor: not-allowed; }
.try__c { font: 500 10px/1 var(--f-tc); letter-spacing: .07em; text-transform: uppercase; }
.lineup__note { max-width: 34em; font: 400 13px/1.6 var(--f-tc); color: var(--muted); }
.lineup__end { margin-top: 28px; }
.why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.why__b { padding: clamp(20px, 2.2vw, 26px); border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, #101114, #0b0c0e); }
.why__b p { font-size: 15px; color: var(--muted); text-wrap: pretty; }
.why__links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 20px; }
.keys2 { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px 20px; margin-top: clamp(36px, 4vw, 56px); padding: 20px 24px; border: 1px dashed var(--line-strong); border-radius: 16px; scroll-margin-top: calc(var(--top-h) + 24px); }
.keys2__i { width: 24px; height: 24px; color: var(--muted); }
.keys2__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 4px; }
.keys2__head .h3 { margin: 0; }
.keys2 p { color: var(--muted); }

/* ============ /about ============ */
.built { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: 32px clamp(40px, 5vw, 96px); }
.built__head { position: sticky; top: calc(var(--top-h) + 32px); }
.built__head .h2 { font-size: clamp(34px, 3.8vw, 54px); }
/* seks formater fra vores egne annoncer (samme stills som forsiden) */
.fstrip { margin: 28px 0 0; }
.fstrip__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; margin: 0; padding: 0; list-style: none; }
.fstrip__list li { display: grid; gap: 7px; min-width: 0; }
.fstrip__list img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 55%; border: 1px solid var(--line-strong); border-radius: 10px; background: #15171b; }
.fstrip__list span { overflow: hidden; font: 400 11.5px/1.2 var(--f-tc); color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.fstrip__cap { margin-top: 12px; font-size: 12px; color: var(--muted); }
.tline { position: relative; margin: 0; padding: 0; list-style: none; }
.tline::before { content: ""; position: absolute; left: 192px; top: 10px; bottom: 34px; width: 1px; background: var(--line-strong); }
.tline li { position: relative; display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 48px; padding: 0 0 30px; }
.tline li::before { content: ""; position: absolute; left: 188px; top: 7px; width: 9px; height: 9px; border: 1px solid #fff; border-radius: 50%; background: var(--bg); }
.tline li.tline__now::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.tline__d { padding-top: 2px; font-size: 12.5px; color: var(--muted); text-align: right; }
.tline__t { margin: 0 0 4px; font: 500 19px/1.3 var(--f-ui); letter-spacing: -.015em; color: #fff; }
.tline p { font-size: 15.5px; color: var(--muted); text-wrap: pretty; }
.tline .alink { color: #fff; }
.built__note { padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); }
.sec--nums { padding-block: clamp(44px, 5vw, 72px); }
.nums { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; }
.nums__row { display: flex; flex-wrap: wrap; gap: 20px clamp(28px, 4vw, 64px); }
.nums__line { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -.012em; color: #fff; }
.final { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 32px clamp(40px, 5vw, 96px); }
.coming { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.coming li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.coming__i { width: 18px; height: 18px; margin-top: 3px; color: var(--muted); }
.coming__t { margin: 0 0 2px; font: 500 17px/1.3 var(--f-ui); letter-spacing: -.01em; color: #fff; }
.coming p { font-size: 15px; color: var(--muted); }
.coming .tag { margin-top: 2px; }
.final__cta { margin-top: 24px; }
.why--4 .h3 { font-size: clamp(18px, 1.5vw, 21px); }
.sec--team { padding-block: clamp(48px, 5vw, 72px); }
.team { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: baseline; gap: 12px clamp(32px, 4vw, 64px); }
.team .label { margin: 0; }
.team__p { max-width: 36em; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.45; letter-spacing: -.015em; color: #fff; text-wrap: pretty; }

/* ============ responsivt ============ */
@media (min-width: 1024px) {
  .ph__grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); align-items: center; }
  .ph--models .ph__h1 { font-size: clamp(44px, 4.6vw, 68px); }
  .vsteps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sec--get .sec__head--split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
/* lav skærm: den klæbende overskrift med formaterne må ikke blive højere end vinduet */
@media (min-width: 1024px) and (max-height: 820px) { .built__head { position: static; } }
@media (max-width: 1199px) {
  .why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh { grid-template-columns: minmax(0, 104px) auto minmax(56px, 1fr); gap: 10px 12px; }
  .shelf { --slot: 32px; }
}
@media (max-width: 1023px) {
  .get, .src, .faq, .built, .final, .team, .fit { grid-template-columns: minmax(0, 1fr); }
  .pf__row { grid-template-columns: minmax(0, 1fr); }
  .pf__arrow { transform: rotate(90deg); }
  .jobs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .built__head { position: static; }
  .fstrip__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq__h { margin: 0; }
  /* tal-rækken 2 × 2, ikke 3 + 1 */
  .nums__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; width: 100%; }
}
@media (max-width: 767px) {
  .mcards, .why, .jobs__list { grid-template-columns: minmax(0, 1fr); }
  .mcard__img { aspect-ratio: 2.2 / 1; }
  .keys2 { grid-template-columns: 28px minmax(0, 1fr); }
  .keys2 > .alink { grid-column: 2; }
  .srcs { grid-template-columns: minmax(0, 1fr); }
  .tline::before { left: 4px; bottom: 30px; }
  .tline li { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-left: 28px; }
  .tline li::before { left: 0; top: 4px; }
  .tline__d { text-align: left; }
}
@media (max-width: 680px) {
  /* trinene: lodret liste med en hårlinje og nummeret som prik */
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; position: relative; }
  .steps::before { content: ""; position: absolute; left: 14px; top: 14px; bottom: 28px; width: 1px; background: var(--line-strong); }
  .step { padding: 0 0 24px 46px; border: 0; border-radius: 0; background: none; }
  .ill { display: none; }
  .step__n { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bg); font-size: 11.5px; letter-spacing: 0; color: #fff; }
  .step__k::before { content: none; }
  .step__head { min-height: 29px; margin-bottom: 2px; }
  .step__t { font-size: 19px; }
  .step__more:not([hidden]) { margin-top: 4px; padding-top: 0; }
  .step__body { margin-top: 6px; padding-top: 12px; }
  .flow__end .btn, .get__end .btn, .lineup__end .btn, .final__cta { width: 100%; }
  .pf { padding: 14px; border-radius: 16px; }
  .pf__track { margin-inline: 4px; }
  .pf__panel { padding: 12px; }
  .pt__n { padding: 1px 4px; font-size: 9.5px; }
  /* bunken på telefon: færre og større filer, så filnavnene kan læses */
  .pile { aspect-ratio: 4 / 3; }
  .pile .p2, .pile .p3, .pile .p4, .pile .p5 { display: none; }
  .pt--v { width: 20%; } .pt--p { width: 23%; } .pt--s { width: 20%; } .pt--f { width: 25%; }
  .pile .p-fold { left: 0; top: 9%; } .pile .p-final { left: 28%; top: 4%; } .pile .p-broll { left: 52%; top: 5%; } .pile .p-export { left: 78%; top: 3%; }
  .pt--f .pt__n { white-space: normal; text-align: center; line-height: 1.2; }
  .pile .p1 { left: 1%; top: 50%; } .pile .p-nosubs { left: 23%; top: 63%; } .pile .p-img { left: 46%; top: 47%; } .pile .p-raw { left: 72%; top: 55%; }
  .pt--f .ic { width: 18px; height: 18px; }
  .shelf { --slot: 30px; }
  .sh { grid-template-columns: minmax(0, 96px) auto minmax(48px, 1fr); gap: 8px 10px; padding: 7px 10px 7px 9px; }
  .sh__n { font-size: 12px; }
  .ccard__in { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 12px; }
  .ct { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .mc { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .mc i { width: 40px; }
  .meters li { grid-template-columns: minmax(0, 100px) minmax(0, 1fr) 58px; gap: 10px; }
  .qa p { padding-right: 0; }
  .who div { grid-template-columns: 70px minmax(0, 1fr); }
}
@media (max-width: 599px) {
  /* hero-billedet på telefon: kun Hook, Demo og Before/after, én linje pr. rolle med en tynd måler under */
  .shelf { --slot: 28px; gap: 6px; }
  .sh { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 6px 9px; }
  .sh__m { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
  .mtr { height: 4px; }
  .pf__lab { margin-bottom: 10px; }
  .pf__row { gap: 10px; }
  .fstrip__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .strip { gap: 6px 8px; font-size: 12px; }
  .strip li { gap: 8px; }
  .jobs__l { display: none; }
  .jobs a { grid-template-columns: 28px minmax(0, 1fr) 14px; }
  .pf__stop { font-size: 10px; letter-spacing: -.01em; }
  .meters li { grid-template-columns: minmax(0, 92px) minmax(0, 1fr) 54px; }
  .ph__legend { gap: 8px 14px; font-size: 12.5px; }
}