/* ==========================================================================
   JustStatics — "3a" design system (Claude Design handoff, 2026-08-21)
   Scoped under .hp3a so it never touches the shared nyt-site/style.css
   tokens or the other nyt-site pages (b2b/ecommerce/saas/service/process).
   Source: claude.ai/design project "Juststatics.dk UI Redesign", turn 10
   (3a + the "living portal" hero signature).
   ========================================================================== */

.hp3a {
    --ink: #0A0B0D;
    --body: #4C5261;
    --meta: #767C89;
    --muted: #6B7280;
    --placeholder: #9AA0AB;
    --orange: #F97316;
    --orange-dark: #EA580C;
    --orange-tint: #FFF7ED;
    --orange-wash: #FFF8F5;
    --orange-light: #FF8A3D;
    --pink: #D33A6B;
    --violet: #6E56F8;
    --green: #12805A;
    --green-tint: #E7F6EE;
    --line: #EDEFF3;
    --line-light: #F1F3F6;
    --line-2: #E7E9EE;
    --line-dashed: #DDE1E8;
    --fill: #F4F5F7;
    --panel: #F7F8FA;
    --panel-2: #FAFBFC;
    --swatch: #E3E6EB;
    --gradient: linear-gradient(104deg, #FF9A4D 0%, #F04A1A 38%, #D33A6B 70%, #6E56F8 100%);
    --logo-gradient: linear-gradient(135deg, #FF8A3D, #F04A1A 55%, #D33A6B);
    --ease: cubic-bezier(.2,.8,.2,1);

    /* Fluid-skala-primitiv, 2026-09-08. EN regel, defineret ét sted, brugt
       af alt der skal vokse med skaermbredden - ikke en ny haandregnet
       clamp() pr. element hver gang nogen synes noget virker lille paa en
       stor skaerm. 0 under 1366px (vores designbaseline, uaendret), 1 ved
       2560px+ (loftet vi har testet imod), lineaert imellem. Brug den saadan:
       "font-size: calc(<vaerdi-ved-1366px> + <total-vaekst> * var(--vw-progress));"
       - saa er der KUN to tal at saette pr. egenskab (start, vaekst), ikke en
       hel to-punkts-ligning hver gang. */
    --vw-progress: clamp(0, (100vw - 1366px) / 1194px, 1);
    /* Fem vaeksttrin oveni progress-tallet - store overskrifter maa vokse
       mere end smaa labels, ellers ser en 30% stoerre H1 ved siden af en
       11px badge der ikke rykker sig forkert ud. EN definition pr. trin,
       genbrugt paa tvaers af hele siden (nav, hero, sektioner, footer) -
       intet element regner sin egen formel. Tekst paa 12px og under (badges,
       chrome-labels, mikro-meta) staar bevidst helt stille: den baerer ikke
       visuel vaegt, og at rykke den 1px goer ingen forskel. */
    --grow-xs: calc(1 + .06 * var(--vw-progress));  /* 13-14px UI-tekst, labels, footer */
    --grow-sm: calc(1 + .10 * var(--vw-progress));  /* 15-18px broedtekst, knapper */
    --grow-md: calc(1 + .16 * var(--vw-progress));  /* 20-26px underoverskrifter, stat-enheder */
    --grow-lg: calc(1 + .22 * var(--vw-progress));  /* 28-44px sektionsoverskrifter */
    --grow-xl: calc(1 + .30 * var(--vw-progress));  /* 46px+ hero-display og store tal */

    /* Moerk zone - bruges kun af den inverterede header paa /resultater */
    --dark-bg: #0B0C0E;
    --dark-line: rgba(255,255,255,.10);
    --dark-body: #A2A8B4;
    --dark-meta: #7C828E;
    --orange-bright: #FB923C;

    background: #fff;
    color: var(--ink);
    font-family: 'Poppins', system-ui, sans-serif;
}

.hp3a * { box-sizing: border-box; }
.hp3a h1, .hp3a h2, .hp3a h3 { margin: 0; font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; }
.hp3a p { margin: 0; }
.hp3a img { display: block; max-width: 100%; }

/* --- Layout ------------------------------------------------------------ */
/* Alt indhold ligger i EN faelles 80%-kolonne, centreret, med loft paa
   1440px (2026-08-31: tilfoejet - paa store skaerme blev 80% af 2560px+
   absurd bredt, saerligt teksten i heroen). Gutteren kommer fra
   kolonnebredden, ikke fra sektionernes egen vandrette padding, derfor
   nulstilles den paa de sektioner der selv baerer .wrap. Nav'en bruger
   samme loft via max(), saa logoet flugter med indholdet nedenunder ogsaa
   over 1800px, hvor .wrap holder op med at vokse men 10%-padding ellers
   ville blive ved. Under 860px falder det hele til fuld bredde med 20px
   gutter. */
.hp3a .wrap { width: 80%; max-width: 1440px; margin: 0 auto; }
.hp3a .band { padding: 64px 0; }
.hp3a .band-tight { padding: 56px 0; }
.hp3a-logowall.wrap, .hp3a-cta-band.wrap, .hp3a-faq-wrap.wrap,
.hp3a-footer.wrap, .hp3a-footer-bottom.wrap, .hp3a-results-hero-grid.wrap,
.hp3a-logo-grid-wrap.wrap, .hp3a-proof-wrap.wrap, .hp3a-badge-bar.wrap { padding-left: 0; padding-right: 0; }

/* --- Nav ----------------------------------------------------------------*/
/* Samme 80%/1440px-loft som .wrap, lagt som padding - saa logoet flugter
   med indholdet nedenunder, men den hvide baggrund og hairlinen gaar helt
   ud. max() skifter til den faste halvdel over 1800px, praecis der hvor
   .wrap rammer sit loft. */
.hp3a-nav { height: 76px; padding: 0 max(10%, calc((100% - 1440px) / 2)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 20; }
.hp3a-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); justify-self: start; }
.hp3a-logo-img { height: 16px; width: auto; display: block; }
.hp3a-logo-word { font: 600 calc(17px * var(--grow-sm)) 'Poppins', sans-serif; letter-spacing: -.025em; }
.hp3a-links { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.hp3a-links a { font: 500 calc(14px * var(--grow-xs)) 'Poppins', sans-serif; color: var(--body); text-decoration: none; }
.hp3a-links a:hover { color: var(--ink); }
.hp3a-nav-right { display: flex; gap: 8px; align-items: center; justify-self: end; }
.hp3a-login { font: 500 calc(14px * var(--grow-xs)) 'Poppins', sans-serif; color: var(--body); padding: 9px 14px; text-decoration: none; }
/* Book demo = brandets orange. .hp3a-btn-primary bruges udelukkende til
   "Book demo", saa den kan farves her uden at ramme andre knapper. */
.hp3a-btn-primary { background: var(--orange); color: #fff; font: 500 calc(14px * var(--grow-xs)) 'Poppins', sans-serif; padding: 10px 18px; border-radius: 10px; border: none; text-decoration: none; display: inline-block; cursor: pointer; }
.hp3a-btn-primary:hover { background: var(--orange-dark); }
.hp3a-nav-right .hp3a-btn-primary { font: 600 calc(16px * var(--grow-sm)) 'Poppins', sans-serif; padding: 10px 22px; border-radius: 8px; }
.hp3a-nav-toggle { display: none; background: none; border: none; padding: 8px; cursor: pointer; }
.hp3a-nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0; }

/* --- Hero -----------------------------------------------------------------*/
/* min-height i vh (loftet i px), saa heroen altid fylder en soerlig del af
   skaermen i stedet for kun sin egen indholdshoejde - paa store skaerme
   virkede den ellers laav og forloeben, med masser af tom plads under sig
   foer naeste sektion. align-items:center paa selve heroen (ikke kun
   hero-grid) centrerer indholdet lodret i den ekstra plads. */
.hp3a-hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: min(70vh, 760px); padding: 76px 0 64px; }
.hp3a-hero-glow { position: absolute; top: -366px; left: 898px; width: 900px; height: 760px; border-radius: 9999px; background-image: radial-gradient(closest-side, rgba(240,74,26,.16), rgba(211,58,107,.10) 45%, rgba(110,86,248,.06) 70%, rgba(255,255,255,0) 100%); pointer-events: none; }
.hp3a-hero-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.hp3a-eyebrow { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 5px 12px 5px 6px; box-shadow: 0 1px 2px rgba(10,11,13,.04); }
.hp3a-eyebrow-tag { background: var(--orange-tint); color: var(--orange-dark); font: 600 11px 'Poppins', sans-serif; padding: 3px 8px; border-radius: 999px; }
.hp3a-eyebrow-label { font: 500 calc(13px * var(--grow-xs)) 'Poppins', sans-serif; color: var(--body); }
/* Ingen margin-top: der sidder ikke laengere en eyebrow-pille over h1'en */
.hp3a-h1 { font: 600 calc(58px * var(--grow-xl))/1.04 'Poppins', sans-serif; letter-spacing: -.035em; max-width: 600px; text-wrap: balance; }
/* p.-kvalificeret: '.hp3a p { margin: 0 }' har hoejere specificitet end en ren
   klasseselektor, saa margin-top blev spist og teksten sad klistret til h1. */
.hp3a p.hp3a-lead { margin-top: 22px; font: 400 calc(18px * var(--grow-sm))/1.6 'Poppins', sans-serif; color: var(--body); max-width: 520px; text-wrap: pretty; }
.hp3a-hero-ctas { margin-top: 30px; display: flex; gap: 10px; flex-wrap: wrap; }
.hp3a-btn-outline { border: 1px solid #E1E4EA; color: var(--ink); font: 500 calc(15px * var(--grow-sm)) 'Poppins', sans-serif; padding: 14px 24px; border-radius: 11px; box-shadow: 0 1px 2px rgba(10,11,13,.04); text-decoration: none; background: #fff; cursor: pointer; }
.hp3a-hero-ctas .hp3a-btn-primary { font-size: calc(15px * var(--grow-sm)); padding: 14px 24px; border-radius: 11px; }
.hp3a-trust { margin-top: 26px; display: flex; gap: 20px; font: 400 calc(13px * var(--grow-xs)) 'Poppins', sans-serif; color: var(--meta); flex-wrap: wrap; }
.hp3a-trust span.dot { color: #D8DCE3; }

/* --- Statics-vaeg: masonry med "Se flere" ---------------------------------
   Egen bredde i stedet for sitets globale .wrap paa 80%: et billedgitter er
   indholdstypen "bredt", ikke "fuld bredde", og 80% uden loft bliver 2048px
   paa en 27-tommer. 1040px giver 4 kort a ~251px, hvor annonceoverskrifterne
   stadig kan laeses. */
.hp3a-wall-shell { max-width: 1040px; margin: 0 auto; }
.hp3a-wall { display: grid; grid-template-columns: repeat(var(--wall-cols, 4), 1fr); gap: 12px; align-items: start; }
.hp3a-wall-col { display: flex; flex-direction: column; gap: 12px; padding-top: var(--wall-off, 0px); }
.hp3a-wall-col img { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--line); background: var(--fill); }
.hp3a-wall-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.hp3a-wall-more { font: 500 calc(15px * var(--grow-sm)) 'Poppins', sans-serif; border: 1px solid #E1E4EA; background: #fff; color: var(--ink); padding: 14px 24px; border-radius: 11px; cursor: pointer; box-shadow: 0 1px 2px rgba(10,11,13,.04); transition: border-color .18s, background .18s; }
.hp3a-wall-more:hover { border-color: #C9CFD9; background: var(--panel-2); }
/* Den orange arver ellers basisknappens mindre maal (14px/10-18/10px) og
   staar derfor visuelt mindre end 'Se flere' ved siden af. Samme greb som
   .hp3a-hero-ctas bruger. */
.hp3a-wall-actions .hp3a-btn-primary { display: inline-flex; align-items: center; font-size: calc(15px * var(--grow-sm)); padding: 14px 24px; border-radius: 11px; }

/* --- Hero: kaskade af hele statics ---------------------------------------
   Erstatter browserrammen i headeren. Reglen er at hver static vises i sit
   eget format, ikke beskaaret til en firkant som portalfliserne var.
   Bredderne er i procent af wrapperen, saa raekkerne altid gaar op:
     raekke  = 3 * 34% - 2 * 6%   = 90%
     raekke 2 forskydes 10%       = 90% + 10% = 100%
   Derfor stikker ingen af kortene ud over kolonnen, uanset slotbredden.

   Forskydningen er translateX og IKKE margin-left: en margin ville goere
   raekken smallere, og da kortene maales i procent AF raekken, blev raekke 2's
   kort saa 15px mindre end raekke 1's. transform flytter uden at aendre
   layoutbredden, saa alle seks kort er lige store. */
.hp3a-casc-wrap { position: relative; }
.hp3a-casc { display: flex; flex-direction: column; }
.hp3a-casc-row { display: flex; }
.hp3a-casc-row + .hp3a-casc-row { margin-top: -12%; transform: translateX(10%); }
.hp3a-casc figure { margin: 0; width: 34%; flex: none; }
.hp3a-casc figure + figure { margin-left: -6%; }
.hp3a-casc img { display: block; width: 100%; border-radius: 12px; border: 1px solid var(--line);
                 background: #fff; box-shadow: 0 16px 34px -12px rgba(10,11,13,.45); }
/* Faste z-index: overlappet skal gaa i EN retning, ellers bliver stablingen
   tvetydig at kigge paa. Flex-items respekterer z-index uden position. */
.hp3a-casc-row:first-child figure:nth-child(1) { z-index: 1; transform: rotate(-2.5deg); }
.hp3a-casc-row:first-child figure:nth-child(2) { z-index: 2; transform: rotate(-1.5deg); }
.hp3a-casc-row:first-child figure:nth-child(3) { z-index: 3; transform: rotate(-.5deg); }
.hp3a-casc-row + .hp3a-casc-row figure:nth-child(1) { z-index: 4; transform: rotate(.5deg); }
.hp3a-casc-row + .hp3a-casc-row figure:nth-child(2) { z-index: 5; transform: rotate(1.5deg); }
.hp3a-casc-row + .hp3a-casc-row figure:nth-child(3) { z-index: 6; transform: rotate(2.5deg); }

/* Product-proof browser frame */
.hp3a-frame-wrap { position: relative; }
.hp3a-frame { border-radius: 16px; background: #fff; box-shadow: 0 1px 1px rgba(10,11,13,.04), 0 24px 60px -12px rgba(10,11,13,.16); border: 1px solid var(--line); overflow: hidden; }
.hp3a-frame-chrome { height: 38px; background: var(--panel-2); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; padding: 0 14px; }
.hp3a-frame-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--swatch); }
.hp3a-frame-url { margin-left: 10px; font: 400 11px 'Poppins', sans-serif; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px; }
.hp3a-frame-head { padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.hp3a-frame-title { font: 600 calc(15px * var(--grow-sm)) 'Poppins', sans-serif; letter-spacing: -.015em; }
.hp3a-frame-sub { margin-top: 3px; font: 400 12px 'Poppins', sans-serif; color: var(--meta); }
.hp3a-chip-success { background: var(--green-tint); color: var(--green); font: 500 12px 'Poppins', sans-serif; padding: 5px 10px; border-radius: 999px; }
.hp3a-frame-foot { padding: 4px 20px 18px; display: flex; gap: 8px; position: relative; }
/* Ingen cursor:pointer - de er en del af produktbilledet, ikke knapper */
.hp3a-frame-foot .hp3a-btn-solid-orange { flex: 1; text-align: center; background: var(--orange); color: #fff; font: 500 calc(13px * var(--grow-xs)) 'Poppins', sans-serif; padding: 11px; border-radius: 9px; border: none; }
.hp3a-frame-foot .hp3a-btn-ghost { flex: 1; text-align: center; border: 1px solid var(--line-2); color: var(--body); font: 500 calc(13px * var(--grow-xs)) 'Poppins', sans-serif; padding: 11px; border-radius: 9px; background: none; }

/* Floating CPA stat card — sits outside .hp3a-frame (which clips to its
   rounded corners) so it isn't cut off; anchored to the frame's bottom-left. */
/* bottom: 20px lander kortets underkant stort set i flugt med "Godkend
   batch"-knappens underkant, saa kortet daekker knappen i stedet for at
   svaeve lige over den og lade den traekke blikket. */
.hp3a-stat-float { position: absolute; left: -36px; bottom: 20px; width: 236px; z-index: 3; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px -8px rgba(10,11,13,.16); padding: 16px; }
.hp3a-stat-float-head { display: flex; justify-content: space-between; align-items: center; }
.hp3a-stat-float-head span:first-child { font: 500 12px 'Poppins', sans-serif; color: var(--meta); }
.hp3a-stat-pill { background: var(--green-tint); color: var(--green); font: 600 11px 'Poppins', sans-serif; padding: 3px 7px; border-radius: 999px; }
.hp3a-stat-bars { margin-top: 12px; display: flex; align-items: flex-end; gap: 5px; height: 52px; }
.hp3a-stat-bars span { flex: 1; border-radius: 3px; background-image: linear-gradient(180deg, var(--orange), var(--orange-light)); }

/* Living portal (hero signature) */
.hp3a-portal { padding: 16px 20px; position: relative; }
.hp3a-portal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hp3a-portal-slot { aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; background: var(--fill); position: relative; }
.hp3a-portal-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp3a-portal-slot.is-swapping { animation: hp3a-swap-ring 900ms var(--ease); }
.hp3a-portal-slot.is-swapping img { animation: hp3a-swap-fade 900ms var(--ease); }
@keyframes hp3a-swap-fade { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
@keyframes hp3a-swap-ring { 0% { box-shadow: 0 0 0 2px var(--orange); } 100% { box-shadow: 0 0 0 2px rgba(240,74,26,0); } }

/* --- Logo wall ----------------------------------------------------------*/
.hp3a-logowall { padding: 8px 40px 56px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.hp3a-logowall-label { font: 500 12px 'Poppins', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; }
.hp3a-logowall-row { display: flex; gap: 56px; align-items: center; flex-wrap: wrap; justify-content: center; }
.hp3a-logowall-row img { height: 26px; width: auto; filter: grayscale(1); opacity: .55; }
/* Rene smaabogstav-maerker (vue) fylder hele hoejden med selve bogstaverne,
   mens de andre wordmarks har lavere bogstavhoejde inden for samme 26px.
   Geometrisk ens hoejde giver derfor ulige optisk vaegt - derfor lidt lavere. */
.hp3a-logowall-row img.is-lowercase-mark { height: 20px; }

/* --- Section headers ------------------------------------------------------*/
.hp3a-section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 26px; gap: 20px; flex-wrap: wrap; }
/* Til sektioner hvor indholdet nedenunder er full-bleed (statics-slideren):
   centreret overskrift har ingen venstrekant der skal flugte med noget. */
.hp3a-section-head.is-centered { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.hp3a-h2 { font: 600 calc(38px * var(--grow-lg))/1.1 'Poppins', sans-serif; letter-spacing: -.03em; }
.hp3a-h2-sm { font: 600 calc(34px * var(--grow-lg))/1.12 'Poppins', sans-serif; letter-spacing: -.03em; }

/* --- Static showcase — infinite two-row auto-scroll, ported 1:1 from the
   root site's .masonry-* (same images/speeds/tall-wide mix), rebuilt under
   hp3a- names so nothing here inherits the old page's rules. JS: living-portal.js */
.hp3a-masonry-wrapper { position: relative; overflow: hidden; margin-top: 32px; display: flex; flex-direction: column; gap: 12px; padding-bottom: 40px; }
.hp3a-masonry-row { overflow: hidden; position: relative; }
.hp3a-masonry-row-track { display: flex; align-items: center; gap: 16px; width: max-content; will-change: transform; }
.hp3a-masonry-item { border-radius: 14px; flex-shrink: 0; overflow: hidden; border: 1px solid var(--line); transition: transform 300ms var(--ease); }
.hp3a-masonry-item:hover { transform: scale(1.03); }
.hp3a-masonry-item img { height: 100%; width: auto; display: block; pointer-events: none; }
.hp3a-masonry-item.tall, .hp3a-masonry-item.wide { height: 215px; width: auto; }
.hp3a-masonry-fade-left, .hp3a-masonry-fade-right { position: absolute; top: 0; bottom: 0; width: 120px; pointer-events: none; z-index: 2; }
.hp3a-masonry-fade-left { left: 0; background: linear-gradient(to right, #fff, transparent); }
.hp3a-masonry-fade-right { right: 0; background: linear-gradient(to left, #fff, transparent); }
@media (max-width: 860px) {
    .hp3a-masonry-item.tall, .hp3a-masonry-item.wide { height: 200px; }
    .hp3a-masonry-row-track, .hp3a-masonry-wrapper { gap: 10px; }
    .hp3a-masonry-fade-left, .hp3a-masonry-fade-right { width: 48px; }
}

/* --- Gray band / 4 steps ---------------------------------------------------
   Trin-styret visual: billedet til venstre hører til det aktive trin og
   skifter med det (se steps-visual.js). Ingen vandrette skillelinjer mellem
   trinnene — kun den lodrette forbindelseslinje. ---------------------------*/
.hp3a-panel { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* stretch, ikke center: billedet til venstre skal vaere lige saa hoejt som
   trin-listen til hoejre. Kaeden skal vaere ubrudt hele vejen ned, derfor
   height:100% paa wrapper og stepshot, og flex:1 paa scenen. */
.hp3a-steps-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; }
.hp3a-steps-layout > div:first-child { display: flex; }
.hp3a-steps-more { display: inline-block; margin-top: 18px; margin-left: 64px; font: 500 calc(14px * var(--grow-xs)) 'Poppins', sans-serif; color: var(--body); text-decoration: none; }
.hp3a-steps-more:hover { color: var(--ink); }

/* Ramme om det trin-specifikke billede */
.hp3a-stepshot { overflow: hidden; display: flex; flex-direction: column; flex: 1; }

/* Fast højde + overflow, så rammen ikke hopper eller flyder over ved skift */
.hp3a-stepstage { position: relative; flex: 1; min-height: 260px; overflow: hidden; }
.hp3a-steppanel { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 320ms var(--ease); }
.hp3a-steppanel.is-on { opacity: 1; visibility: visible; }
.hp3a-steppanel-shot { height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hp3a-steppanel-shot img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
/* minmax(0,1fr) + min-height:0 — ellers får rækkerne billedernes min-content
   som gulv og sprænger rammen. */
.hp3a-steppanel-tiles { height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hp3a-steppanel-tiles.is-row { grid-template-rows: minmax(0, 1fr); }
.hp3a-steppanel-tiles img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }

.hp3a-steps-list { display: flex; flex-direction: column; }
.hp3a-step { display: grid; grid-template-columns: 44px 1fr; gap: 20px; padding: 18px 0; position: relative; cursor: pointer; background: none; border: none; text-align: left; font-family: inherit; width: 100%; }
.hp3a-step::before { content: ''; position: absolute; left: 21px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.hp3a-step:first-child::before { top: 18px; }
.hp3a-step:last-of-type::before { bottom: calc(100% - 40px); }
.hp3a-step-num { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--body); display: flex; align-items: center; justify-content: center; font: 600 calc(15px * var(--grow-xs)) 'Poppins', sans-serif; position: relative; z-index: 1; transition: background 260ms var(--ease), color 260ms var(--ease), border-color 260ms var(--ease); }
.hp3a-step.is-active .hp3a-step-num { background: var(--orange); border-color: var(--orange); color: #fff; }
.hp3a-step h3 { font: 600 calc(17px * var(--grow-sm)) 'Poppins', sans-serif; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.hp3a-step p { margin-top: 7px; font: 400 14.5px/1.6 'Poppins', sans-serif; color: var(--body); max-width: 430px; transition: color 260ms var(--ease); }
.hp3a-step:not(.is-active) p { color: var(--meta); }
@media (prefers-reduced-motion: reduce) {
    .hp3a-steppanel, .hp3a-step-num, .hp3a-step p { transition: none; }
}

/* --- Comparison board — ported from root index.html's .compare-board:
   dark featured card (real 8 features) + competitor table (real 4 columns,
   real leveringstid/pris tal), rebuilt with 3a tokens. --------------------*/
.hp3a-compare { display: grid; grid-template-columns: 340px 1fr; align-items: stretch; margin-top: 32px; }
.hp3a-compare-featured {
    background: var(--ink);
    background-image: linear-gradient(180deg, rgba(240,74,26,.14) 0%, rgba(240,74,26,0) 60%);
    border-radius: 24px;
    padding: 30px 28px;
    color: #fff;
    position: relative;
    z-index: 2;
    box-shadow: 0 24px 56px rgba(10,11,13,.16), 0 2px 6px rgba(10,11,13,.08);
    margin-right: -20px;
    display: flex;
    flex-direction: column;
}
.hp3a-compare-brand { font: 600 calc(20px * var(--grow-md)) 'Poppins', sans-serif; letter-spacing: -.02em; margin-bottom: 28px; }
.hp3a-compare-brand span { color: var(--orange-light); }
.hp3a-compare-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(6, 44px); }
.hp3a-compare-features li { display: flex; align-items: center; gap: 12px; font: 500 calc(14px * var(--grow-xs)) 'Poppins', sans-serif; border-bottom: 1px solid rgba(255,255,255,.1); }
.hp3a-compare-features li:last-child { border-bottom: 0; }
.hp3a-cb-yes { width: 22px; height: 22px; border-radius: 999px; background: var(--orange); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hp3a-cb-yes svg { width: 12px; height: 12px; }
.hp3a-cb-meta { margin-left: auto; font: 700 calc(14px * var(--grow-xs)) 'Poppins', sans-serif; color: var(--orange-light); }
.hp3a-compare-price { margin-top: 24px; padding-top: 20px; border-top: 1px dashed rgba(255,255,255,.2); display: flex; align-items: baseline; gap: 8px; }
.hp3a-compare-price .from { font: 600 11px 'Poppins', sans-serif; letter-spacing: .16em; color: rgba(255,255,255,.5); }
.hp3a-compare-price .amount { font: 600 calc(32px * var(--grow-lg)) 'Poppins', sans-serif; letter-spacing: -.03em; }
.hp3a-compare-price .per { font: 400 calc(13px * var(--grow-xs)) 'Poppins', sans-serif; color: rgba(255,255,255,.6); }
.hp3a-compare-cta { margin-top: 20px; display: block; text-align: center; background: var(--orange); color: #fff; font: 500 calc(14px * var(--grow-xs)) 'Poppins', sans-serif; padding: 13px; border-radius: 11px; text-decoration: none; }

.hp3a-compare-table { background: var(--panel); border: 1px solid var(--line); border-radius: 24px; padding: 40px 32px 40px 52px; position: relative; z-index: 1; }
.hp3a-compare-head { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 28px; }
.hp3a-compare-head div { font: 600 11px 'Poppins', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: center; }
.hp3a-compare-rows { display: grid; grid-template-rows: repeat(6, 44px); }
.hp3a-compare-row { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; border-bottom: 1px solid var(--line-light); }
.hp3a-compare-row:last-child { border-bottom: 0; }
.hp3a-compare-row.is-highlight { background: var(--orange-tint); }
.hp3a-cb-cell { display: flex; align-items: center; justify-content: center; }
.hp3a-cb-y, .hp3a-cb-n { width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hp3a-cb-y { background: var(--green-tint); color: var(--green); }
.hp3a-cb-n { background: var(--fill); color: var(--placeholder); }
.hp3a-cb-y svg, .hp3a-cb-n svg { width: 12px; height: 12px; }
.hp3a-cb-hours { font: 600 calc(13px * var(--grow-xs)) 'Poppins', sans-serif; color: var(--body); text-align: center; }
.hp3a-compare-prices { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 24px; padding-top: 20px; border-top: 1px dashed var(--line-2); }
.hp3a-compare-prices div { text-align: center; font: 600 calc(14px * var(--grow-xs)) 'Poppins', sans-serif; color: var(--body); }

/* --- Bar-chart ------------------------------------------------------------
   "Du"-sektionen er fjernet, og med den det eneste sted denne graf blev
   brugt. Reglerne staar tilbage fordi komponenten er selvstaendig og
   genbrugelig - og fordi filen ikke ligger i git, saa den ikke kan hentes
   tilbage hvis den slettes. -----------------------------------------------*/
.hp3a-chart-card { border: 1px solid var(--line); border-radius: 16px; padding: 26px; }
.hp3a-chart-card h2 { font: 600 calc(22px * var(--grow-md)) 'Poppins', sans-serif; letter-spacing: -.02em; }
.hp3a-chart-card > p { margin: 6px 0 22px; font: 400 calc(14px * var(--grow-xs))/1.55 'Poppins', sans-serif; color: var(--body); }
.hp3a-bar-row { display: grid; grid-template-columns: 130px 1fr 46px; gap: 14px; align-items: center; }
.hp3a-bar-row + .hp3a-bar-row { margin-top: 14px; }
.hp3a-bar-label { font: 500 calc(13px * var(--grow-xs)) 'Poppins', sans-serif; color: var(--body); }
.hp3a-bar-track { display: block; height: 26px; border-radius: 6px; background: var(--fill); overflow: hidden; }
/* display:block er paakraevet: markup bruger <span> (grid-cellen blockificeres
   automatisk som grid-item, men DENNE er et almindeligt barn af den, ikke selv
   et grid-item) - uden det ignorerer en inline <span> baade width og height,
   og baren viser intet fyld overhovedet, uanset bredde-procent. */
.hp3a-bar-fill { display: block; height: 100%; border-radius: 6px; background-image: linear-gradient(90deg, var(--orange-light), var(--orange)); }
.hp3a-bar-value { font: 600 calc(14px * var(--grow-xs)) 'Poppins', sans-serif; text-align: right; font-variant-numeric: tabular-nums; }
.hp3a-chart-foot { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line-light); display: flex; justify-content: space-between; font: 400 calc(11px * var(--grow-xs)) 'Poppins', sans-serif; color: var(--muted); }
/* Dage der ikke er leveringsdag: samme bar, daempet farve - reglen (mandag
   staar ud) skal laeses i graat/orange foer man naar at laese labels. */
.hp3a-bar-fill.is-muted { background-image: none; background-color: var(--swatch); }

/* --- Features split ---------------------------------------------------------
   Tekst + ét kort til venstre, ét kort til hoejre - begge fuldt genbrugte fra
   den tidligere bento-udgave. align-items:stretch (ikke center) + height:100%
   paa kortene er det der faar hoejre kort til at fylde samme hoejde som
   venstre kolonne, i stedet for kun sin egen indholdshoejde. */
.hp3a-feat.band { padding-top: 112px; }
.hp3a-feat-lead { margin: 14px 0 0; font: 400 calc(17px * var(--grow-sm))/1.6 'Poppins', sans-serif; color: var(--body); max-width: 440px; text-wrap: pretty; }
/* .hp3a-feat-split.wrap (ikke bare .hp3a-feat-split): elementet baerer ogsaa
   .wrap, og ".hp3a .wrap" saetter egne margin/width-regler med specificitet
   0,2,0 - samme fælde som .hp3a-feat.band og .hp3a-feat-grid.wrap tidligere. */
.hp3a-feat-split.wrap { margin-top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: stretch; }
.hp3a-feat-copy { display: flex; flex-direction: column; }
.hp3a-feat-card { margin-top: 32px; background: var(--panel); border-radius: 24px; padding: 32px; box-sizing: border-box; }
.hp3a-feat-copy .hp3a-feat-card { flex: 1; }
.hp3a-feat-card h3 { font: 600 calc(22px * var(--grow-md)) 'Poppins', sans-serif; letter-spacing: -.02em; }
.hp3a-feat-card > p { margin-top: 8px; font: 400 calc(14px * var(--grow-xs))/1.5 'Poppins', sans-serif; color: var(--body); }
/* Format-traeet: én static, tre formater. Linjerne er haandtegnet SVG (fast
   geometri, layoutet er ikke responsivt-flydende i sig selv - griddet
   omkring det er), saa de rammer praecis midt for hver blad-boks. */
.hp3a-feat-tree { margin-top: 32px; }
.hp3a-feat-node { width: 56px; height: 56px; border-radius: 999px; background: var(--orange); display: flex; align-items: center; justify-content: center; margin: 0 auto; box-shadow: 0 8px 20px -6px rgba(249,115,22,.45); }
.hp3a-feat-node svg { width: 22px; height: 22px; }
.hp3a-feat-lines { display: block; width: 100%; height: 60px; }
/* Grid med 3 LIGE store kolonner, hver leaf centreret i sin egen - saa
   midtpunkterne altid lander praecis ved 1/6, 3/6, 5/6 af raekkens bredde,
   uanset kortets faktiske pixelbredde. SVG'en ovenfor bruger
   preserveAspectRatio="none" og samme 50/150/250-koordinater ud af 300, saa
   dens grene rammer praecis disse midtpunkter i stedet for at centrere sig
   selv og saette skaevt i forhold til bladene under. */
.hp3a-feat-leaves { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; margin-top: -4px; }
.hp3a-feat-leaf { display: flex; flex-direction: column; align-items: center; gap: 8px; font: 500 calc(13px * var(--grow-xs)) 'Poppins', sans-serif; color: var(--body); }
/* Hoejden pr. swatch er skaleret efter det reelle sideforhold (1:1 kvadrat,
   4:5 lidt hoejere, 9:16 hoej og smal) - swatchen ER formatet, ikke kun en
   label for det. */
.hp3a-feat-ratio { display: block; width: 34px; border: 1.5px solid var(--line-2); border-radius: 5px; background: #fff; }
.hp3a-feat-ratio.r-1-1 { height: 34px; }
.hp3a-feat-ratio.r-4-5 { height: 42px; }
.hp3a-feat-ratio.r-9-16 { height: 60px; }

/* --- Features split: hoejre visual --------------------------------------
   Det baerende element referencen faktisk handlede om. height:100% (samme
   greb som kortet foer) laader det fylde hele den stroekkede grid-raekke.
   min-height er et gulv for mobil, hvor griddet falder til 1 kolonne og
   raekken ellers kun ville vaere saa hoej som venstre kolonnes tekst. */
.hp3a-feat-visual { position: relative; height: 100%; min-height: 420px; }
.hp3a-feat-visual-bg { position: absolute; inset: 0; border-radius: 24px; background-image: var(--gradient); opacity: .16; }
.hp3a-feat-visual-imgs { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }
.hp3a-feat-visual-imgs img { position: absolute; width: 52%; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 24px 50px -16px rgba(10,11,13,.4); }
.hp3a-feat-visual-imgs img:first-child { transform: rotate(-7deg) translate(-16%, -6%); z-index: 1; }
.hp3a-feat-visual-imgs img:last-child { transform: rotate(5deg) translate(16%, 8%); z-index: 2; }
.hp3a-feat-float { position: absolute; width: 178px; border-radius: 16px; padding: 16px; box-shadow: 0 16px 40px -12px rgba(10,11,13,.28); }
.hp3a-feat-float.is-dark { top: 8%; right: 2%; background: var(--ink); color: #fff; z-index: 3; }
.hp3a-feat-float.is-light { bottom: 8%; left: 4%; background: #fff; border: 1px solid var(--line-2); z-index: 3; }
.hp3a-feat-float-label { display: block; font: 500 calc(12px * var(--grow-xs)) 'Poppins', sans-serif; opacity: .65; margin-bottom: 12px; }
.hp3a-feat-mini-bars { display: flex; align-items: flex-end; gap: 6px; height: 56px; }
.hp3a-feat-mini-bars > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.hp3a-feat-mini-bars span { display: block; width: 100%; border-radius: 3px; background: rgba(255,255,255,.16); }
.hp3a-feat-mini-bars span.is-on { background-image: linear-gradient(180deg, var(--orange-light), var(--orange)); }
.hp3a-feat-mini-bars em { font-style: normal; font: 500 10px 'Poppins', sans-serif; opacity: .6; }
.hp3a-feat-float-icons { display: flex; gap: 10px; }
.hp3a-feat-float-icons span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border: 1px solid var(--line-light); border-radius: 10px; font: 500 calc(11px * var(--grow-xs)) 'Poppins', sans-serif; color: var(--body); }
.hp3a-feat-float-icons svg { width: 18px; height: 18px; color: var(--orange); }
@media (max-width: 860px) {
    .hp3a-feat-split.wrap { grid-template-columns: 1fr; gap: 40px; }
    .hp3a-feat-split.wrap > .hp3a-feat-visual { height: auto; }
}

/* --- Pricing --------------------------------------------------------------
   Overskriften bliver på sitets venstre akse; skiftet mellem abonnement og
   enkeltbatch lægger sig i den ledige plads til højre. Bindingsvilkårene står
   i FAQ'en — de gentages ikke her. ----------------------------------------*/
.hp3a-pricing-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: 24px; }
.hp3a-pricing-head { max-width: 620px; }
.hp3a-pricing-head p { margin-top: 14px; font: 400 calc(16px * var(--grow-sm))/1.6 'Poppins', sans-serif; color: var(--body); }
/* Banen er mørkere end sektionens egen baggrund (--panel), ellers forsvinder
   kontakten i fladen og det aktive felt ser ikke ud til at være valgt. */
/* inline-grid med 1fr 1fr: begge felter får samme bredde uanset at
   "Abonnement" og "Enkeltbatch" ikke er lige lange. Ellers dækker den hvide
   markering ikke en ren halvdel, og den skifter bredde når man klikker. */
.hp3a-billing-switch { display: inline-grid; grid-template-columns: 1fr 1fr; background: var(--swatch); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px; gap: 2px; flex-shrink: 0; }
.hp3a-billing-switch button { border: none; background: none; cursor: pointer; font: 500 calc(14px * var(--grow-xs)) 'Poppins', sans-serif; color: var(--body); padding: 10px 20px; border-radius: 999px; transition: background 200ms var(--ease), color 200ms var(--ease); }
.hp3a-billing-switch button:hover { color: var(--ink); }
.hp3a-billing-switch button.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(10,11,13,.14); }
/* Prisen/feature der ikke hører til den valgte fakturering skjules */
.hp3a-pricing-grid[data-billing="mo"] [data-only="once"],
.hp3a-pricing-grid[data-billing="once"] [data-only="mo"] { display: none; }
.hp3a-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.hp3a-plan { background: #fff; color: var(--ink); border: 1px solid var(--line-2); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 1px 2px rgba(10,11,13,.04); }
.hp3a-plan.is-popular { background: var(--ink); color: #fff; border-color: var(--ink); }
.hp3a-plan-head { display: flex; justify-content: space-between; align-items: center; }
.hp3a-plan-head h3 { font: 600 calc(18px * var(--grow-sm)) 'Poppins', sans-serif; letter-spacing: -.02em; }
.hp3a-plan-tag { font: 500 calc(11px * var(--grow-xs)) 'Poppins', sans-serif; padding: 4px 9px; border-radius: 999px; background: var(--fill); color: var(--body); }
.hp3a-plan.is-popular .hp3a-plan-tag { background: var(--orange); color: #fff; }
.hp3a-plan-price { display: flex; align-items: baseline; gap: 5px; }
.hp3a-plan-price strong { font: 600 calc(32px * var(--grow-lg)) 'Poppins', sans-serif; letter-spacing: -.035em; }
.hp3a-plan-price span { font: 400 calc(14px * var(--grow-xs)) 'Poppins', sans-serif; opacity: .55; }
.hp3a p.hp3a-plan-desc { margin-top: 8px; font: 400 calc(14px * var(--grow-xs))/1.5 'Poppins', sans-serif; opacity: .7; }
.hp3a-plan-features { display: flex; flex-direction: column; gap: 7px; padding-top: 14px; border-top: 1px solid var(--line-2); list-style: none; margin: 0; }
.hp3a-plan.is-popular .hp3a-plan-features { border-top-color: rgba(255,255,255,.18); }
.hp3a-plan-features li { display: grid; grid-template-columns: 18px 1fr; font: 400 calc(14px * var(--grow-xs))/1.45 'Poppins', sans-serif; opacity: .9; }
.hp3a-plan-features li.is-excluded { opacity: .45; text-decoration: line-through; }
.hp3a-plan-features li span.tick { color: var(--orange); }
.hp3a-plan.is-popular .hp3a-plan-features li span.tick { color: var(--orange-light); }
.hp3a-plan-cta { margin-top: auto; text-align: center; background: var(--orange); color: #fff; border: 1px solid var(--orange); font: 500 calc(14px * var(--grow-xs)) 'Poppins', sans-serif; padding: 13px; border-radius: 11px; text-decoration: none; cursor: pointer; }
.hp3a-plan.is-popular .hp3a-plan-cta { background: var(--orange); color: #fff; border-color: var(--orange); }

/* --- Quote ------------------------------------------------------------------*/
/* Citat og brødtekst deler samme målbredde, så deres højrekant flugter i
   stedet for at ende ragged på to forskellige bredder. Lodret rytme grupperer
   navn+rolle som én enhed, tydeligt adskilt fra brødteksten. */
.hp3a-quote { display: grid; grid-template-columns: 360px 1fr; gap: 56px; align-items: center; }
.hp3a-quote-img { border-radius: 16px; overflow: hidden; aspect-ratio: 4/5; background: var(--fill); border: 1px solid var(--line); }
/* p.-kvalificeret: den globale '.hp3a p { margin: 0 }' har højere specificitet
   end en ren klasseselektor, så margin her blev tidligere spist — derfor sad
   citat og brødtekst klistret sammen uden luft. */
.hp3a-quote p.hp3a-quote-text { font: 600 calc(32px * var(--grow-lg))/1.25 'Poppins', sans-serif; letter-spacing: -.03em; max-width: 620px; }
.hp3a-quote p.hp3a-quote-body { margin: 24px 0 0; font: 400 calc(16px * var(--grow-sm))/1.7 'Poppins', sans-serif; color: var(--body); max-width: 620px; }
.hp3a-quote-attrib { margin-top: 32px; }
.hp3a-quote-name { font: 500 calc(15px * var(--grow-sm)) 'Poppins', sans-serif; }
.hp3a-quote-role { margin-top: 4px; font: 400 calc(14px * var(--grow-xs)) 'Poppins', sans-serif; color: var(--meta); }

/* --- FAQ ----------------------------------------------------------------- */
.hp3a-faq-wrap { border-top: 1px solid var(--line); padding: 56px 40px; display: grid; grid-template-columns: 320px 1fr; gap: 56px; }
.hp3a-faq-head h2 { font: 600 calc(30px * var(--grow-lg))/1.15 'Poppins', sans-serif; letter-spacing: -.03em; }
.hp3a-faq-head p { margin-top: 12px; font: 400 calc(15px * var(--grow-sm))/1.6 'Poppins', sans-serif; color: var(--body); }
.hp3a-faq-head a { color: var(--orange); }
.hp3a-faq-item { border-bottom: 1px solid var(--line); }
.hp3a-faq-item button.faq-question { width: 100%; background: none; border: none; text-align: left; cursor: pointer; padding: 18px 0; display: flex; justify-content: space-between; align-items: center; font: 500 calc(16px * var(--grow-sm)) 'Poppins', sans-serif; color: var(--ink); }
.hp3a-faq-item .faq-icon { color: var(--muted); font-weight: 400; font-size: calc(20px * var(--grow-md)); transition: transform 200ms var(--ease); }
.hp3a-faq-item.open .faq-icon { transform: rotate(45deg); color: var(--orange); }
/* Udfoldning: max-height animeres, men VÆRDIEN sættes af script.js ud fra
   svarets målte scrollHeight — ikke en gættet konstant. Den gamle style.css
   brugte '0 -> 200px' med åbne-reglen bundet til '.faq-item.open', som denne
   markup ikke bruger: svarene foldede derfor aldrig ud overhovedet.
   (grid-template-rows 0fr->1fr ville været pænere, men fr-værdier resolver
   til 0 under transition i denne opsætning — afprøvet, virker ikke.) */
.hp3a-faq-item .faq-answer { max-height: 0; overflow: hidden; transition: max-height 320ms var(--ease); }
/* Bevidst ingen opacity-fade på teksten: den ville afhænge af at en transition
   når at køre færdig, og hvis den ikke gør, står svaret usynligt. Højden alene
   læses fint som en foldning. */
.hp3a-faq-item .faq-answer p { padding: 0 0 18px; font: 400 calc(15px * var(--grow-sm))/1.6 'Poppins', sans-serif; color: var(--body); }
@media (prefers-reduced-motion: reduce) {
    .hp3a-faq-item .faq-answer,
    .hp3a-faq-item .faq-icon { transition: none; }
}
.hp3a-faq-item .faq-answer a { color: var(--orange); }

/* --- CTA band -------------------------------------------------------------*/
.hp3a-cta-band { padding: 0 40px 56px; }
.hp3a-cta-band-inner { border-radius: 20px; padding: 56px 48px; background-image: var(--gradient); color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }
.hp3a-cta-band h2 { font: 600 calc(40px * var(--grow-lg))/1.1 'Poppins', sans-serif; letter-spacing: -.03em; }
.hp3a-cta-band p { margin-top: 12px; font: 400 calc(17px * var(--grow-sm)) 'Poppins', sans-serif; color: rgba(255,255,255,.85); }
.hp3a-cta-band-actions { display: flex; gap: 10px; }
.hp3a-cta-band-actions .hp3a-btn-light { background: #fff; color: var(--ink); font: 500 calc(15px * var(--grow-sm)) 'Poppins', sans-serif; padding: 14px 24px; border-radius: 11px; white-space: nowrap; text-decoration: none; }
.hp3a-cta-band-actions .hp3a-btn-ghost-light { border: 1px solid rgba(255,255,255,.45); color: #fff; font: 500 calc(15px * var(--grow-sm)) 'Poppins', sans-serif; padding: 14px 24px; border-radius: 11px; white-space: nowrap; text-decoration: none; }

/* --- Footer ---------------------------------------------------------------*/
.hp3a-footer { border-top: 1px solid var(--line); padding: 48px 40px 32px; display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; }
.hp3a-footer-brand p { margin-top: 14px; font: 400 calc(14px * var(--grow-xs))/1.6 'Poppins', sans-serif; color: var(--meta); max-width: 280px; }
.hp3a-footer-col-title { font: 500 calc(13px * var(--grow-xs)) 'Poppins', sans-serif; color: var(--ink); }
.hp3a-footer-col { margin-top: 14px; display: flex; flex-direction: column; gap: 9px; }
.hp3a-footer-col a { font: 400 calc(14px * var(--grow-xs)) 'Poppins', sans-serif; color: var(--meta); text-decoration: none; }
.hp3a-footer-col a:hover { color: var(--ink); }
.hp3a-footer-bottom { padding: 20px 40px 28px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font: 400 calc(13px * var(--grow-xs)) 'Poppins', sans-serif; color: var(--muted); flex-wrap: wrap; gap: 8px; }


/* --- Logo-marquee ----------------------------------------------------------
   EN liste i HTML; logo-marquee.js kloner den, saa loekken bliver soemloes.
   Vil du fjerne et brand, slet det ét sted. Grupperne baerer selv deres
   afstand som padding-right (ikke gap paa track'en) - saa er de to grupper
   praecis lige brede, og translateX(-50%) rammer sammenstoedet perfekt. */
.hp3a-logomarquee { position: relative; overflow: hidden; padding: 10px 0 48px; }
/* will-change + translate3d tvinger den over paa GPU'en. Uden det tegner
   browseren hvert billede paa hovedtraaden, og ved ~1px pr. frame runder den
   til hele pixels - det er dét der giver hakket. */
.hp3a-logomarquee-track { display: flex; width: max-content; will-change: transform; backface-visibility: hidden; animation: hp3a-logoscroll 55s linear infinite; }
.hp3a-logomarquee-set { display: flex; align-items: center; gap: 64px; padding-right: 64px; }
/* Baade hoejde OG bredde er laast. Med kun en fast hoejde bliver brede
   wordmarks (LumiSmile 8:1) mange gange saa store som kvadratiske maerker
   (Mini Family 1:1) - laa paa 243px mod 31px. Bredde-loftet skaerer de
   brede ned, saa den optiske vaegt bliver nogenlunde ens. */
.hp3a-logomarquee img { transform: translateZ(0); max-height: 32px; max-width: 120px; height: auto; width: auto; flex-shrink: 0; }
/* Rene smaabogstav-maerker fylder hele hoejden med selve bogstaverne */
.hp3a-logomarquee img.is-lowercase-mark { max-height: 25px; }
/* Daempet variant: forsidens logowall har altid vaeret graatonet */
.hp3a-logomarquee.is-muted img { filter: grayscale(1); opacity: .55; }
.hp3a-logomarquee-fade { position: absolute; top: 0; bottom: 0; width: 140px; pointer-events: none; z-index: 2; }
.hp3a-logomarquee-fade.is-left { left: 0; background: linear-gradient(to right, #fff, rgba(255,255,255,0)); }
.hp3a-logomarquee-fade.is-right { right: 0; background: linear-gradient(to left, #fff, rgba(255,255,255,0)); }
@keyframes hp3a-logoscroll { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.hp3a-logomarquee.is-reverse .hp3a-logomarquee-track { animation-name: hp3a-logoscroll-rev; }
@keyframes hp3a-logoscroll-rev { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }
@media (prefers-reduced-motion: reduce) {
    .hp3a-logomarquee-track { animation: none; }
    .hp3a-logomarquee { overflow-x: auto; }
}
@media (max-width: 860px) {
    .hp3a-logomarquee-set { gap: 44px; padding-right: 44px; }
    .hp3a-logomarquee img { max-height: 27px; max-width: 100px; }
    .hp3a-logomarquee-fade { width: 60px; }
}

/* --- Mobile menu (shares #hamburger / #mobileMenu hooks with script.js) ---*/
.hp3a-mobile-menu { position: fixed; inset: 0; background: #fff; z-index: 50; display: none; flex-direction: column; padding: 24px; gap: 4px; }
.hp3a-mobile-menu.open { display: flex; }
.hp3a-mobile-menu a { font: 500 17px 'Poppins', sans-serif; color: var(--ink); text-decoration: none; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.hp3a-mobile-close { align-self: flex-end; background: none; border: none; font-size: 28px; color: var(--ink); cursor: pointer; padding: 8px; }
.hp3a-mobile-menu .hp3a-btn-primary { text-align: center; margin-top: 16px; color: #fff; background: var(--orange); padding: 14px; border-bottom: none; font: 500 15px 'Poppins', sans-serif; border-radius: 10px; }
.hp3a-links a.is-active { color: var(--ink); }

/* --- Cases page: intro header --------------------------------------------*/
.hp3a-cases-hero { padding: 48px 40px 32px; }
.hp3a-cases-hero h1 { margin: 0; font: 600 calc(44px * var(--grow-xl))/1.06 'Poppins', sans-serif; letter-spacing: -.035em; max-width: 640px; }
.hp3a-cases-hero p { margin: 16px 0 0; font: 400 calc(17px * var(--grow-sm))/1.65 'Poppins', sans-serif; color: var(--body); }

/* --- Results header — rotating proof (Claude Design turn 12a) ------------*/
.hp3a-results-hero { position: relative; overflow: hidden; background: #fff; }
.hp3a-results-hero-grid { position: relative; display: grid; grid-template-columns: 1fr 520px; gap: 64px; align-items: start; padding: 76px 0 64px; }

.hp3a-eyebrow-result { display: inline-flex; align-items: center; gap: 8px; background: var(--orange-tint); border-radius: 999px; padding: 6px 14px; font: 600 calc(13px * var(--grow-xs)) 'Poppins', sans-serif; color: var(--orange-dark); }
.hp3a-eyebrow-result .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--orange); flex-shrink: 0; }

.hp3a-proof-rotator { margin-top: 28px; min-height: 258px; transition: opacity 200ms var(--ease); }
.hp3a-proof-rotator.is-swapping { opacity: 0; }
.hp3a-proof-big { display: flex; align-items: baseline; gap: 12px; }
.hp3a-proof-big .num { font: 600 calc(76px * var(--grow-xl))/1 'Poppins', sans-serif; letter-spacing: -.04em; color: var(--ink); }
.hp3a-proof-big .unit { font: 500 calc(26px * var(--grow-md)) 'Poppins', sans-serif; color: var(--meta); }
.hp3a-proof-highlight { margin-top: 14px; font: 600 calc(24px * var(--grow-md)) 'Poppins', sans-serif; letter-spacing: -.02em; color: var(--orange); }
.hp3a-proof-meta { margin-top: 10px; font: 400 calc(14px * var(--grow-xs)) 'Poppins', sans-serif; color: var(--meta); }
.hp3a-proof-dots { margin-top: 24px; display: flex; gap: 8px; }
.hp3a-proof-dot { height: 3px; width: 32px; border-radius: 999px; background: var(--line); transition: background 200ms var(--ease), width 200ms var(--ease); }
.hp3a-proof-dot.is-active { background: var(--orange); width: 40px; }

.hp3a-proof-frame { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 1px rgba(10,11,13,.04), 0 24px 60px -18px rgba(10,11,13,.16); }
.hp3a-proof-frame-chrome { height: 36px; background: var(--panel-2); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; padding: 0 14px; }
.hp3a-proof-frame-chrome .dot { width: 9px; height: 9px; border-radius: 999px; background: var(--swatch); }
.hp3a-proof-frame-chrome .label { margin-left: 8px; font: 400 11px 'Poppins', sans-serif; color: var(--muted); }
.hp3a-proof-frame-chrome .blur-badge { margin-left: auto; background: var(--fill); color: var(--body); font: 500 10px 'Poppins', sans-serif; padding: 3px 8px; border-radius: 999px; }
.hp3a-proof-frame-body { padding: 18px; background: var(--panel); }
.hp3a-proof-screenshot-slot { aspect-ratio: 16/8; border: 1px dashed var(--line-dashed); border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; font: 500 13px 'Poppins', sans-serif; color: var(--placeholder); text-align: center; padding: 12px; overflow: hidden; }
.hp3a-proof-screenshot-slot.has-image { border-style: solid; padding: 0; }
.hp3a-proof-screenshot-slot img { width: 100%; height: 100%; object-fit: contain; }

/* Headeren blev shippet uden sin titelblok. h1 + lead ligger i fuld bredde
   OVER to-kolonne-gitteret, saa rotator og screenshot bliver ens hoeje. */
/* Tallet er hero: baade stoerst og foerst. Overskriften staar som
   underrubrik UNDER det, saa der ikke er to hvide blikfang der konkurrerer
   om oejet. align-items: start paa gitteret giver tal og ramme samme
   overkant, saa de deler en vandret linje at hvile paa. */
.hp3a-results-hero .hp3a-proof-rotator { margin-top: 0; min-height: 0; }
.hp3a-results-hero .hp3a-proof-big .num { font-size: calc(96px * var(--grow-xl)); }
.hp3a-results-hero .hp3a-h1 { margin-top: 44px; font-size: calc(26px * var(--grow-xs)); max-width: 460px; }

/* --- Resultater: moerk header --------------------------------------------
   Praecis samme layout som den lyse udgave - kun farverne er vendt. Kun
   headeren er moerk; logo-sektionen og alt derunder er uaendret lyst. ----*/
.hp3a-results-hero { background: var(--dark-bg); }
.hp3a-results-hero .hp3a-h1 { color: #fff; }
.hp3a-results-hero .hp3a-proof-big .num { color: #fff; }
.hp3a-results-hero .hp3a-proof-big .unit { color: var(--dark-meta); }
.hp3a-results-hero .hp3a-proof-highlight { color: var(--orange-bright); }
.hp3a-results-hero .hp3a-proof-meta { color: var(--dark-meta); }
.hp3a-results-hero .hp3a-proof-dot { background: rgba(255,255,255,.16); }
.hp3a-results-hero .hp3a-proof-dot.is-active { background: var(--orange-bright); }
.hp3a-results-hero .hp3a-proof-frame { border-color: var(--dark-line); box-shadow: 0 24px 60px -18px rgba(0,0,0,.55); }
.hp3a-results-hero .hp3a-proof-frame-chrome { background: rgba(255,255,255,.03); border-bottom-color: rgba(255,255,255,.08); }
.hp3a-results-hero .hp3a-proof-frame-chrome .dot { background: rgba(255,255,255,.18); }
.hp3a-results-hero .hp3a-proof-frame-chrome .label { color: var(--dark-meta); }
.hp3a-results-hero .hp3a-proof-frame-chrome .blur-badge { background: rgba(255,255,255,.07); color: var(--dark-body); }
.hp3a-results-hero .hp3a-proof-frame-body { background: #101114; }
/* Skaermbillederne er lyse Ads Manager-udklip i formater fra 2,98 til 6,98
   mod slottens 2,0, saa der stod 79-172 px tom plads om dem. To ting loeser
   det: slotten strammes til 3/1, saa rammen hugger indholdet, og billedet
   vendes til moerk udgave hvis egen margen bliver ren sort - praecis samme
   sort som slotten. Restpladsen er dermed usynlig i stedet for en bjaelke.
   invert(1) alene ville goere blaa raekker orange; hue-rotate(180deg) holder
   kuloerene paa plads. Ingen billedfiler er aendret - det er rent CSS. */
.hp3a-results-hero .hp3a-proof-screenshot-slot { aspect-ratio: 3/1; background: #000; border-color: rgba(255,255,255,.10); color: var(--dark-meta); }
.hp3a-results-hero .hp3a-proof-screenshot-slot img { filter: invert(1) hue-rotate(180deg); }

/* Nav'en spejler den moerke header: den har selv headerens farve, saa den
   ser gennemsigtig ud uden at hero-indhold kan scrolle synligt igennem.
   Naar nav'ens underkant har passeret den moerke zone (.is-past-dark saettes
   af scriptet nederst paa siden), skifter den til den lyse standard-nav. */
.hp3a-nav-over-dark { transition: background 240ms var(--ease), border-color 240ms var(--ease); }
.hp3a-nav .hp3a-logo-on-dark { display: none; }
.hp3a-nav-over-dark:not(.is-past-dark) { background: var(--dark-bg); border-bottom-color: rgba(255,255,255,.07); }
.hp3a-nav-over-dark:not(.is-past-dark) .hp3a-logo-on-light { display: none; }
.hp3a-nav-over-dark:not(.is-past-dark) .hp3a-logo-on-dark { display: block; }
.hp3a-nav-over-dark:not(.is-past-dark) .hp3a-links a { color: var(--dark-body); }
.hp3a-nav-over-dark:not(.is-past-dark) .hp3a-links a:hover,
.hp3a-nav-over-dark:not(.is-past-dark) .hp3a-links a.is-active { color: #fff; }
.hp3a-nav-over-dark:not(.is-past-dark) .hp3a-login { color: var(--dark-body); }
.hp3a-nav-over-dark:not(.is-past-dark) .hp3a-login:hover { color: #fff; }
.hp3a-nav-over-dark:not(.is-past-dark) .hp3a-btn-primary { background: var(--orange); }
.hp3a-nav-over-dark:not(.is-past-dark) .hp3a-btn-primary:hover { background: var(--orange-bright); }
.hp3a-nav-over-dark:not(.is-past-dark) .hp3a-nav-toggle span { background: #fff; }

/* Kundelogoerne: hver i sin egen firkant, i fuld farve (ingen graatone).
   Vandret padding er 0 - baandbredden kommer fra .wrap, ikke herfra. */
.hp3a-results-hero + .hp3a-logo-grid-wrap { padding: 56px 0 44px; }

/* --- Mixed logo grid: real logos + open dashed slots ----------------------*/
.hp3a-logo-grid-wrap { padding: 0 40px 40px; }
/* 1px gap + linjefarve som grid-baggrund giver rene hairlines mellem alle
   celler ved ethvert kolonneantal - uden dobbeltstreger i sidste raekke. */
.hp3a-logo-grid { border: 1px solid var(--line); border-radius: 16px; display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; gap: 1px; background: var(--line); }
.hp3a-logo-grid-cell { background: #fff; height: 150px; display: flex; align-items: center; justify-content: center; padding: 0 28px; }
.hp3a-logo-grid-cell img { max-height: 64px; max-width: 100%; width: auto; }
.hp3a-logo-slot { border: 1px dashed var(--line-dashed); border-radius: 8px; padding: 8px 14px; font: 400 11px 'Poppins', sans-serif; color: var(--muted); text-align: center; }

/* --- Proof-stats wrap: padding utility only, still used by the slack-bevis
   section wrapper on /resultater. -----------------------------------------*/
.hp3a-proof-wrap { padding: 0 40px 40px; }

/* --- Testimonials: masonry columns. "Citat om X" briefs render as normal
   finished cards (not dashed) — only the topic is a placeholder, the layout
   itself is real, per the design canvas. -------------------------------- */
.hp3a-testi-wrap { padding: 0 40px 40px; }
.hp3a-testi-cols { columns: 3; column-gap: 14px; }
.hp3a-testi-card { break-inside: avoid; border: 1px solid var(--line); border-radius: 16px; padding: 22px; margin-bottom: 14px; }
.hp3a-testi-card p { margin: 0; font: 400 calc(16px * var(--grow-sm))/1.6 'Poppins', sans-serif; color: var(--ink); }
.hp3a-testi-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-light); display: flex; align-items: center; gap: 10px; }
.hp3a-testi-avatar { width: 30px; height: 30px; border-radius: 999px; background: var(--fill); flex-shrink: 0; }
.hp3a-testi-name { font: 500 calc(13px * var(--grow-xs)) 'Poppins', sans-serif; color: var(--ink); }
.hp3a-testi-role { font: 400 12px 'Poppins', sans-serif; color: var(--meta); }

/* --- Bottom badge row + CTA -------------------------------------------------*/
.hp3a-badge-bar { border-top: 1px solid var(--line); padding: 28px 40px; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.hp3a-badge-row { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.hp3a-badge-slot { border: 1px dashed var(--line-dashed); border-radius: 10px; padding: 10px 14px; font: 500 13px 'Poppins', sans-serif; color: var(--placeholder); }
.hp3a-badge { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font: 500 calc(13px * var(--grow-xs)) 'Poppins', sans-serif; color: var(--body); white-space: nowrap; }

/* --- 80%-skala: hero, proces og sammenligning ----------------------------
   Sektionerne baerer .hp3a-compact. Display-typografi og luft er skaleret
   med 0,8; broedtekst er KUN skaleret ned til den laveste stadig-laesbare
   stoerrelse (13-16px) i stedet for de 0,8 der ville give 10-14px. Derfor
   er hierarkiet strammet i toppen og holdt i bunden - det er den justering
   der skal til, naar man ikke bare kan zoome uniformt ud.
   Pris, citat og FAQ er bevidst IKKE med. ---------------------------------*/
.hp3a-compact.band, .hp3a-compact .band { padding: 51px 0; }

/* Hero: 58 -> 46px overskrift, 18 -> 16px broedtekst.
   2026-09-08: overskriften var stadig 46px flad uanset skaermbredde - saa
   paa store skaerme (2560px+) fyldte hero-boksen (spaerret til 1440px, se
   .hp3a .wrap-kommentaren ovenfor) det samme absolutte pixelantal som paa en
   normal baerbar, bare med mere tom kant udenom = laavt blikfang. Vi rykker
   IKKE loftet paa 1440px igen (det var netop fixet for at samme problem ikke
   skulle opstaa i den anden retning), vi laader i stedet selve overskriften
   vokse med skaermbredden inden for boksen: 46px ved ~1366px (uaendret
   baseline) op til 60px ved 2560px+, med clamp() saa det aldrig ryger under
   44px eller over 60px. */
.hp3a-hero.hp3a-compact { min-height: min(62vh, 640px); padding: 61px 0 51px; }
.hp3a-compact .hp3a-hero-grid { gap: 45px; }
/* 2026-09-08: brugte foer sin egen haandregnede clamp() - skiftet til de
   delte vaeksttrin, saa hero'en foelger PRAECIS samme regel som resten af
   siden i stedet for at have sin egen. max-width vokser med (46vw-ish),
   loftet saetter et tag saa 2-linjers-ombrydningen ikke knaekker til 3. */
.hp3a-compact .hp3a-h1 { font-size: calc(46px * var(--grow-xl)); max-width: min(46vw, 720px); }
.hp3a-compact p.hp3a-lead { margin-top: 18px; font-size: calc(16px * var(--grow-sm)); max-width: 440px; }
.hp3a-compact .hp3a-hero-ctas { margin-top: 24px; }
.hp3a-compact .hp3a-hero-ctas .hp3a-btn-primary,
.hp3a-compact .hp3a-btn-outline { font-size: calc(14px * var(--grow-sm)); padding: calc(11px * var(--grow-sm)) calc(19px * var(--grow-sm)); border-radius: 9px; }
.hp3a-compact .hp3a-trust { margin-top: 21px; gap: 16px; }

/* Proces: trin-cirklen 44 -> 36px, resten foelger med */
.hp3a-compact .hp3a-steps-layout { gap: 45px; }
.hp3a-compact .hp3a-step { grid-template-columns: 36px 1fr; gap: 16px; padding: 14px 0; }
.hp3a-compact .hp3a-step::before { left: 17px; }
.hp3a-compact .hp3a-step:first-child::before { top: 14px; }
.hp3a-compact .hp3a-step:last-of-type::before { bottom: calc(100% - 32px); }
.hp3a-compact .hp3a-step-num { width: 36px; height: 36px; border-radius: 10px; font-size: calc(14px * var(--grow-xs)); }
.hp3a-compact .hp3a-step h3 { font-size: calc(15px * var(--grow-xs)); }
.hp3a-compact .hp3a-step p { margin-top: 6px; font-size: calc(14px * var(--grow-xs)); max-width: 430px; }
.hp3a-compact .hp3a-steps-more { margin-top: 14px; margin-left: 52px; font-size: calc(13px * var(--grow-xs)); }

/* Sammenligning: overskrift 38 -> 30px, raekker 44 -> 36px */
.hp3a-compact .hp3a-h2 { font-size: calc(30px * var(--grow-lg)); }
.hp3a-compact .hp3a-compare { grid-template-columns: 272px 1fr; margin-top: 26px; }
.hp3a-compact .hp3a-compare-featured { padding: 24px 22px; border-radius: 19px; }
.hp3a-compact .hp3a-compare-brand { font-size: calc(17px * var(--grow-sm)); margin-bottom: 22px; }
.hp3a-compact .hp3a-compare-features { grid-template-rows: repeat(6, 36px); }
.hp3a-compact .hp3a-compare-features li { font-size: calc(13px * var(--grow-xs)); gap: 10px; }
.hp3a-compact .hp3a-compare-price { margin-top: 19px; padding-top: 16px; }
.hp3a-compact .hp3a-compare-price .amount { font-size: calc(26px * var(--grow-md)); }
.hp3a-compact .hp3a-compare-cta { margin-top: 16px; font-size: calc(13px * var(--grow-xs)); padding: 10px; border-radius: 9px; }
.hp3a-compact .hp3a-compare-table { padding: 32px 26px 32px 42px; border-radius: 19px; }
.hp3a-compact .hp3a-compare-head { margin-bottom: 22px; }
.hp3a-compact .hp3a-compare-rows { grid-template-rows: repeat(6, 36px); }
.hp3a-compact .hp3a-compare-prices { margin-top: 19px; padding-top: 16px; }
.hp3a-compact .hp3a-compare-prices div { font-size: calc(13px * var(--grow-xs)); }

/* Hero og proces styres i hoejden af billedrammerne, ikke af teksten - saa
   uden dette skrumpede de kun 4-8%. Rammerne bindes til 386px = 80% af de
   482px de fyldte, og deres indvendige luft foelger med.
   2026-09-08: begge var faste px uanset skaermbredde - paa store skaerme
   sad de dermed stille mens H1 voksede ved siden af. Bruger nu samme
   --grow-lg som sektionsoverskrifterne, saa 520px bliver til op til ~634px
   og 386px til ~471px ved 2560px+, i stedet for et engangs-transform-hack. */
.hp3a-compact .hp3a-frame-wrap { width: min(calc(386px * var(--grow-lg)), 100%); justify-self: end; }
/* Kaskaden faar 520px mod rammens 386: seks statics skal kunne laeses. */
.hp3a-compact .hp3a-casc-wrap { width: min(calc(520px * var(--grow-lg)), 100%); justify-self: end; }
.hp3a-compact .hp3a-frame-chrome { height: 30px; padding: 0 11px; }
.hp3a-compact .hp3a-frame-head { padding: 14px 16px; }
.hp3a-compact .hp3a-frame-title { font-size: calc(14px * var(--grow-xs)); }
.hp3a-compact .hp3a-frame-sub { font-size: 11px; }
.hp3a-compact .hp3a-portal { padding: 13px 16px; }
.hp3a-compact .hp3a-portal-grid { gap: 6px; }
.hp3a-compact .hp3a-frame-foot { padding: 3px 16px 14px; }
.hp3a-compact .hp3a-frame-foot .hp3a-btn-solid-orange,
.hp3a-compact .hp3a-frame-foot .hp3a-btn-ghost { font-size: calc(12px * var(--grow-xs)); padding: 9px; }
.hp3a-compact .hp3a-stat-float { width: 189px; left: -28px; bottom: 45px; padding: 13px; }

.hp3a-compact .hp3a-stepshot { max-width: 386px; }
/* trin-listen er den hoejeste af de to spalter i proces-sektionen */
.hp3a-compact .hp3a-step { padding: 11px 0; }
.hp3a-compact .hp3a-step p { line-height: 1.5; }

/* --- Responsive -------------------------------------------------------------
   Prototype was drawn at 1440px only; breakpoints below follow the
   handoff README's responsive guidance section. */
@media (max-width: 1200px) {
    .hp3a-hero-grid,
    .hp3a-steps-layout,
    .hp3a-quote,
    .hp3a-faq-wrap { grid-template-columns: 1fr; }
    .hp3a-hero-glow { display: none; }
    .hp3a-pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
    .hp3a-footer { grid-template-columns: repeat(2, 1fr); }
    .hp3a-compare { grid-template-columns: 1fr; }
    .hp3a-compare-featured { margin-right: 0; }
    .hp3a-compare-table { padding-left: 32px; margin-top: 16px; }
    .hp3a-results-hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .hp3a-links, .hp3a-nav-right { display: none; }
    .hp3a-nav-toggle { display: block; }
    .hp3a-h1 { font-size: 40px; }
    /* Paa mobil giver 80% for smal en kolonne - gaa til fuld bredde med 20px
       gutter i stedet. (Selektoren hed foer .hp3a-band, som ikke findes;
       klassen er .band, saa den regel ramte aldrig noget.) */
    .hp3a .wrap { width: auto; }
    .hp3a .band { padding: 48px 20px; }
    .hp3a .band-tight { padding: 44px 20px; }
    .hp3a-nav { display: flex; justify-content: space-between; padding: 0 20px; }
    /* .hp3a-compact haenger paa hero'en og har to klasser, saa den slog denne
       regel og efterlod headeren helt uden sidemargin paa mobil. Media queries
       tilfoejer ikke specificitet, saa modifieren skal med her ogsaa. */
    .hp3a-hero,
    .hp3a-hero.hp3a-compact { min-height: auto; padding: 40px 20px 48px; }
    .hp3a-logowall.wrap, .hp3a-cta-band.wrap, .hp3a-faq-wrap.wrap,
    .hp3a-footer.wrap, .hp3a-footer-bottom.wrap, .hp3a-results-hero-grid.wrap,
    .hp3a-logo-grid-wrap.wrap, .hp3a-proof-wrap.wrap, .hp3a-badge-bar.wrap { padding-left: 20px; padding-right: 20px; }
    .hp3a-portal-grid { grid-template-columns: repeat(4, 1fr); }
    .hp3a-stat-float { display: none; }
    .hp3a-compare-canva { display: none; }
    .hp3a-compare-head, .hp3a-compare-row, .hp3a-compare-prices { grid-template-columns: repeat(3, 1fr); }
    .hp3a-compare-table { padding-left: 20px; padding-right: 20px; }
    .hp3a-footer { grid-template-columns: 1fr 1fr; }
    .hp3a-cases-hero h1 { font-size: 32px; }
    .hp3a-logo-grid { grid-template-columns: repeat(3, 1fr); }
    .hp3a-testi-cols { columns: 2; }
    .hp3a-badge-bar { justify-content: center; text-align: center; }
    .hp3a-results-hero-grid { padding-top: 44px; padding-bottom: 44px; }
    .hp3a-results-hero + .hp3a-logo-grid-wrap { padding-top: 36px; padding-bottom: 32px; }
    .hp3a-logo-grid-cell { height: 112px; padding: 0 18px; }
    .hp3a-logo-grid-cell img { max-height: 48px; }
    .hp3a-results-hero .hp3a-proof-big .num { font-size: 56px; }
}
@media (max-width: 520px) {
    .hp3a-h1 { font-size: 32px; }
    .hp3a-pricing-grid { grid-template-columns: 1fr; }
    .hp3a-footer { grid-template-columns: 1fr; }
    .hp3a-logo-grid { grid-template-columns: repeat(2, 1fr); }
    .hp3a-testi-cols { columns: 1; }
    .hp3a-results-hero .hp3a-proof-big .num { font-size: 44px; }
    .hp3a-proof-highlight { font-size: 20px; }
}

/* --- Compact-sektionerne paa smalle skaerme -------------------------------
   Reglerne i .hp3a-compact-blokken har to klasser og slaar derfor media
   query'ernes én-klasse-regler, uanset raekkefoelge. Uden disse gentagelser
   blev sammenligningen ved med at vaere 2-spaltet med en fast 272px-kolonne
   paa mobil - det gav 204px vandret overflow - og h1'en blev paa 46px hvor
   resten af sitet gaar ned paa 40/32px. -----------------------------------*/
@media (max-width: 1200px) {
    .hp3a-compact .hp3a-compare { grid-template-columns: 1fr; }
    /* Naar headeren stables, skal kaskaden flugte med teksten over den.
       justify-self: end ville ellers efterlade et tomt hul i venstre side. */
    .hp3a-compact .hp3a-casc-wrap { justify-self: start; }
}
@media (max-width: 860px) {
    .hp3a-compact .hp3a-h1 { font-size: 34px; }
    .hp3a-compact .hp3a-compare-table { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 520px) {
    .hp3a-compact .hp3a-h1 { font-size: 28px; }
}