/* ============================================================================
   MAKKER · site.css - sidelayout oven på makker-tokens.css
   Header · hero (Appelsin-inspireret) · venteliste-form · sektioner · kæmpe footer
   ============================================================================ */

.wrap{ max-width:1320px; margin:0 auto; padding-left:clamp(20px,5vw,48px); padding-right:clamp(20px,5vw,48px); }
.section{ padding:clamp(64px,9vw,128px) 0; }
.section--tight{ padding:clamp(40px,5vw,72px) 0; }
.stack{ display:flex; flex-direction:column; gap:var(--gap-title); }
.stack--tight{ gap:22px; }
.eyebrow-gap{ display:flex; flex-direction:column; gap:18px; max-width:860px; }

/* ---------- HEADER ---------- */
.site-header{ position:sticky; top:0; z-index:60; background:rgba(28,28,30,.9); backdrop-filter:blur(10px); border-bottom:var(--bw) solid var(--line-dark); }
.site-header .bar{ max-width:1320px; margin:0 auto; display:flex; align-items:center; gap:26px; padding:15px clamp(20px,5vw,48px); }
.site-header .mk-logo{ color:var(--paper); font-size:24px; text-decoration:none; }
.site-nav{ display:flex; gap:24px; margin-left:auto; align-items:center; }
.site-nav a{ font-family:var(--font-mono); font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--paper); text-decoration:none; }
.site-nav a:hover{ color:var(--accent); }
.site-header .mk-btn{ padding:10px 20px; font-size:15px; }
@media(max-width:760px){ .site-nav .nav-link{ display:none; } }

/* ---------- HERO (full-bleed, koks) ---------- */
.hero{ background:var(--ink); color:var(--paper); position:relative; overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.04) brightness(.5); }
.hero__media::after{ content:''; position:absolute; inset:0; background:var(--accent); mix-blend-mode:color; opacity:.4; }
.hero::before{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(28,28,30,.58), rgba(28,28,30,.82)); }
.hero__inner{ position:relative; z-index:2; max-width:1040px; margin:0 auto; padding:clamp(64px,11vw,140px) clamp(20px,5vw,48px) clamp(72px,10vw,120px); text-align:center; display:flex; flex-direction:column; align-items:center; gap:30px; }
.hero .mk-kicker{ justify-content:center; }
.hero__title{ font-size:clamp(46px,8vw,118px); }
.hero__lead{ max-width:660px; color:var(--steel-2); }
.hero__trust{ font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--steel); }
.hero__rule{ position:absolute; left:0; right:0; bottom:0; height:var(--bw); background:var(--line-dark); z-index:2; }

/* ---------- IMAGE + TEXT FEATURE (Pexels-foto · orange duotone + tekst) ---------- */
.feature{ position:relative; margin:0; border-radius:var(--r-photo); overflow:hidden; background:var(--ink); min-height:clamp(300px,42vw,460px); display:flex; align-items:flex-end; }
.feature > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); }
.feature__overlay{ position:absolute; inset:0; background:var(--accent); mix-blend-mode:color; opacity:.55; }
.feature__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(28,28,30,.12) 28%, rgba(28,28,30,.84)); }
.feature__cap{ position:relative; z-index:2; padding:clamp(26px,5vw,52px); max-width:680px; color:var(--paper); display:flex; flex-direction:column; gap:14px; }
.feature__cap .mk-title{ color:var(--paper); }
.feature__cap .mk-lead{ color:var(--paper); opacity:.92; }

/* ---------- VENTELISTE-FORM ---------- */
.waitlist{ display:flex; gap:12px; width:100%; max-width:780px; background:var(--ink2); border:var(--bw) solid var(--line-dark); border-radius:var(--r-card); padding:14px; }
.waitlist input{ flex:1; min-width:0; font-family:var(--font-body); font-size:16px; color:var(--ink); background:var(--paper); border:1.5px solid transparent; border-radius:var(--r-card); padding:14px 16px; }
.waitlist input::placeholder{ color:var(--steel); }
.waitlist input:focus{ outline:none; border-color:var(--accent); }
.waitlist .mk-btn{ flex:none; }
.waitlist__ok{ display:none; width:100%; max-width:780px; text-align:center; font-family:var(--font-head); font-weight:700; text-transform:uppercase; font-size:24px; color:var(--accent); padding:22px; border:var(--bw) solid var(--accent); border-radius:var(--r-card); }
.waitlist__ok.show{ display:block; }
@media(max-width:680px){ .waitlist{ flex-direction:column; } }

/* footer-variant af formen (på papir-CTA) */
.footer-cta .waitlist{ background:var(--ink3); }

/* ---------- KORT-GRID ---------- */
.grid{ display:grid; gap:20px; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--2{ grid-template-columns:1fr 1fr; }
.tile{ display:flex; flex-direction:column; gap:14px; }
.tile .step__n{ font-family:var(--font-mono); font-size:13px; letter-spacing:.12em; color:var(--accent); }
.soon{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); background:var(--paper3); border-radius:var(--r-pill); padding:4px 11px; }
@media(max-width:820px){ .grid--3,.grid--2{ grid-template-columns:1fr; } }

/* Register-fix: kort i en mørk sektion når <body> er .mk-light.
   Designsystemet har kun base `.mk-card` (mørk) + `.mk-light .mk-card` (lys).
   Med body.mk-light som forfader vinder den lyse variant også inde i .mk-dark
   → lys titel på lyst kort = usynlig. Denne regel (samme specificitet, loadet
   efter tokens) genopretter mørke kort i mørke sektioner. */
.mk-dark .mk-card{ background:var(--ink2); border-color:var(--line-dark); }
.mk-dark .mk-card:hover{ background:var(--ink3); border-color:var(--accent); }

/* ---------- PRIS-TEASER ---------- */
.price-amt{ font-family:var(--font-head); font-weight:800; font-size:clamp(30px,3vw,44px); line-height:1; }
.price-amt small{ font-family:var(--font-mono); font-size:13px; font-weight:400; color:var(--steel); }

/* ---------- KÆMPE FOOTER ---------- */
.site-footer{ background:var(--ink); color:var(--paper); }
.site-footer .inner{ max-width:1320px; margin:0 auto; padding:0 clamp(20px,5vw,48px); }
.footer-cta{ display:flex; gap:32px; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:clamp(48px,7vw,88px) 0; border-bottom:var(--bw) solid var(--line-dark); }
.footer-cta__head{ max-width:520px; display:flex; flex-direction:column; gap:14px; }
.footer-cols{ display:grid; grid-template-columns:repeat(6,1fr); gap:36px 28px; padding:clamp(48px,6vw,72px) 0; }
.footer-cols .col h4{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel-2); margin:0 0 18px; }
.footer-cols .col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.footer-cols .col a{ color:var(--paper); text-decoration:none; font-size:15px; line-height:1.3; }
.footer-cols .col a:hover{ color:var(--accent); }
.footer-cols .col a .soon{ margin-left:7px; }

/* partner-badges (Google Partner · Meta) - lyse chips så de er læsbare på koks */
.footer-badges{ display:flex; gap:10px; align-items:center; margin-top:22px; flex-wrap:wrap; }
.footer-badges img{ height:52px; width:auto; display:block; background:var(--paper); border-radius:var(--r-card); padding:7px 9px; }

/* ---------- ANBEFAL-OVERLAY (modal · fladt, stregbaseret) ---------- */
.overlay[hidden]{ display:none; }
.overlay{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px; }
.overlay__backdrop{ position:absolute; inset:0; background:rgba(28,28,30,.72); }
.overlay__card{ position:relative; max-width:520px; width:100%; background:var(--paper); color:var(--ink); border:var(--bw) solid var(--accent); border-radius:var(--r-card); padding:clamp(28px,5vw,44px); display:flex; flex-direction:column; gap:18px; }
.overlay__x{ position:absolute; top:12px; right:16px; background:none; border:0; font-size:32px; line-height:1; color:var(--steel); cursor:pointer; font-family:var(--font-body); }
.overlay__x:hover{ color:var(--accent); }

/* det kæmpe ordmærke */
.footer-word{ font-family:var(--font-head); font-weight:800; text-transform:uppercase; line-height:.7; letter-spacing:-.025em; font-size:clamp(84px,23vw,340px); color:var(--paper); margin:0; padding:clamp(8px,1.5vw,24px) 0 0; overflow:hidden; user-select:none; }
.footer-word .dot{ color:var(--accent); }

.footer-bottom{ display:flex; gap:18px; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:26px 0 44px; border-top:var(--bw) solid var(--line-dark); font-family:var(--font-mono); font-size:12px; letter-spacing:.02em; color:var(--steel-2); }
.footer-bottom .links{ display:flex; gap:20px; flex-wrap:wrap; }
.footer-bottom a{ color:var(--steel-2); text-decoration:none; }
.footer-bottom a:hover{ color:var(--accent); }

@media(max-width:1000px){ .footer-cols{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:620px){ .footer-cols{ grid-template-columns:repeat(2,1fr); } }

/* ---------- UNDERSIDE-HERO ---------- */
.page-hero{ background:var(--paper); }
.page-hero .wrap{ padding-top:clamp(56px,8vw,104px); padding-bottom:clamp(40px,6vw,72px); }
.coming{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:13px; letter-spacing:.06em; color:var(--steel); }
.lead-narrow{ max-width:680px; }

/* ---------- PROSA (jura, tekstsider) ---------- */
.prose{ max-width:720px; display:flex; flex-direction:column; gap:16px; }
.prose h3{ font-family:var(--font-head); font-weight:700; text-transform:uppercase; font-size:clamp(20px,2.4vw,28px); letter-spacing:-.005em; line-height:1.05; margin:18px 0 0; }
.prose p{ font-size:var(--w-body); line-height:1.6; color:var(--steel); margin:0; }
.prose strong{ color:var(--ink); }
.prose ul{ margin:2px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:8px; color:var(--steel); font-size:var(--w-body); line-height:1.55; }
.prose a{ color:var(--accent); text-decoration:none; }
.prose a:hover{ text-decoration:underline; }

/* ---------- FAQ (native details/summary) ---------- */
.faq{ display:flex; flex-direction:column; max-width:840px; border-top:var(--bw) solid var(--line); }
.faq details{ border-bottom:var(--bw) solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:22px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; font-family:var(--font-head); font-weight:600; text-transform:uppercase; font-size:clamp(18px,2vw,24px); line-height:1.1; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; font-family:var(--font-mono); color:var(--accent); font-size:24px; line-height:1; flex:none; }
.faq details[open] summary::after{ content:'–'; }
.faq details p{ padding:0 0 24px; margin:0; color:var(--steel); font-size:var(--w-body); line-height:1.6; max-width:700px; }
.faq details p a{ color:var(--accent); text-decoration:none; }

/* ---------- TJEK- / KRYDS-LISTER ---------- */
.check,.con{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.check li,.con li{ position:relative; padding-left:30px; font-size:var(--w-body); line-height:1.5; color:var(--steel); }
.check li::before{ content:'→'; position:absolute; left:0; color:var(--accent); font-family:var(--font-mono); }
.con li::before{ content:'×'; position:absolute; left:0; color:var(--steel); font-family:var(--font-mono); }
.check li strong,.con li strong{ color:var(--ink); }

/* mørkt register */
.mk-dark .prose p,.mk-dark .prose ul,.mk-dark .check li,.mk-dark .con li{ color:var(--steel-2); }
.mk-dark .prose strong,.mk-dark .check li strong,.mk-dark .con li strong{ color:var(--paper); }
.mk-dark .faq,.mk-dark .faq details{ border-color:var(--line-dark); }
.mk-dark .faq details p{ color:var(--steel-2); }