/* ============================================================
   Usernest — shared design system (CVI v2.0)
   Used by every page in this mockup. Do not fork — extend here.
   ============================================================ */
:root{
  --dark:#1e2130;
  --dark-mid:#252839;
  --dark-card:#2d3045;
  --cream:#f5f1e8;
  --cream-mid:#ede8dc;
  --teal:#00b5a5;
  --teal-dim:#009688;
  --purple:#4B4565;
  --magenta:#BF65C0;
  --mint:#1EA7A3;
  --teal-deep:#14615f; /* deep teal for the roadmap band: teal-dim mixed toward dark, keeps white text readable */
  --white:#ffffff;
  --ink:#1e2130;
  --serif:'Young Serif', Georgia, 'Times New Roman', serif;
  --sans:'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', 'Space Mono', 'Courier New', monospace;
  --wordmark:'Poppins', 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  /* Type roles: keep hierarchy through family, weight and color rather than
     near-duplicate sizes. */
  --text-label:0.75rem;
  --text-small:0.875rem;
  --text-body:1rem;
  --text-lead:1.125rem;
  --text-h3:1.25rem;
  --text-h2:clamp(2rem,3.5vw,3rem);
  --text-h1:clamp(2.625rem,5vw,4rem);
  /* Spacing scale: 4px foundation, with larger section steps. */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--dark);
  font-family:var(--sans);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
/* [hidden] must always win over component display rules (e.g. .consent{display:flex}) */
[hidden]{display:none!important;}
a{color:inherit;}
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--space-5);}
section{padding-block:var(--space-9);}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-0.015em;text-wrap:balance;margin:0;}
h1{font-size:var(--text-h1);line-height:1.08;}
h2{font-size:var(--text-h2);line-height:1.1;}
h3{font-family:var(--mono);font-weight:700;font-size:var(--text-h3);line-height:1.3;letter-spacing:-0.01em;margin:0;}
p{font-family:var(--sans);font-weight:300;font-size:var(--text-body);line-height:1.6;margin:0;}
.eyebrow{
  font-family:var(--mono);font-weight:500;font-size:var(--text-label);line-height:1.4;text-transform:uppercase;
  letter-spacing:0.18em;color:var(--teal);margin:0 0 var(--space-4);
}
.eyebrow.on-light{color:var(--teal-dim);}
/* screen-reader-only text (e.g. a number shown visually elsewhere) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* buttons — mono uppercase controls, never smaller than the shared label role */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-weight:700;font-size:var(--text-label);line-height:1.2;text-transform:uppercase;
  letter-spacing:0.1em;padding:14px 28px;border-radius:100px;text-decoration:none;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn-solid{background:var(--teal);color:#fff;}
.btn-solid:hover{box-shadow:0 10px 24px rgba(0,181,165,.35);}
.btn-ghost-dark{background:transparent;color:var(--dark);border:1.5px solid var(--dark);}
.btn-ghost-dark:hover{background:var(--dark);color:var(--white);}
.btn-ghost-light{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.5);}
.btn-ghost-light:hover{border-color:var(--white);background:rgba(255,255,255,.08);}

/* nav */
header.site-nav{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
  background:rgba(30,33,48,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
/* The header is sticky (~70px tall), so a plain #anchor jump lands the
   target flush under it, hiding its heading. Any element that's a real
   #anchor destination (not just an id used for something else) needs this
   so the jump clears the header. Keep this list in sync with every
   id="..." that a href="...#..." link actually points to. */
#kontaktformular, #oversigt, #hobbii{scroll-margin-top:90px;}
.navrow{display:flex;align-items:center;justify-content:space-between;padding-block:18px;}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--wordmark);font-weight:700;
  font-size:19px;letter-spacing:-0.01em;color:var(--white);text-decoration:none;}
.brand .mark{display:block;flex:none;}
.navlinks{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;}
.navlinks a{
  font-family:var(--mono);font-size:0.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:0.15em;color:rgba(245,241,232,.78);text-decoration:none;line-height:1;
}
.navlinks a:hover{color:var(--white);}
.navlinks a.active{color:var(--teal);}
/* Temporarily-inactive nav item (e.g. "Salon" while its page is being
   replaced): shown in the menu, but not a real link — no href, no click,
   no hover state, dimmed so it visibly reads as unavailable right now. */
.navlink-disabled{opacity:.5;pointer-events:none;cursor:default;}
.navcta{display:flex;align-items:center;gap:18px;}

/* language switch (DA / EN) — desktop sits in .navcta, mobile sits in .mobilenav above the CTA */
.lang-switch{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:var(--text-label);font-weight:700;letter-spacing:.08em;}
.lang-switch a{color:rgba(245,241,232,.55);text-decoration:none;text-transform:uppercase;}
.lang-switch a:hover{color:var(--white);}
.lang-switch a.active{color:var(--teal);pointer-events:none;}
.lang-switch .sep{color:rgba(245,241,232,.3);}
.mobilenav .lang-switch{margin-top:24px;justify-content:center;font-size:12px;}
.mobilenav .lang-switch a{color:rgba(245,241,232,.65);}

/* mobile nav — hamburger toggle + full-screen panel (hidden on desktop) */
.navtoggle{
  display:none;background:none;border:none;cursor:pointer;padding:6px;margin:0;
  flex-direction:column;justify-content:center;gap:5px;flex:none;
}
.navtoggle span{display:block;width:22px;height:2px;background:var(--white);border-radius:2px;
  transition:transform .3s cubic-bezier(.16,1,.3,1), opacity .3s cubic-bezier(.16,1,.3,1);}
body.nav-open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.nav-open .navtoggle span:nth-child(2){opacity:0;}
body.nav-open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* NOTE: .mobilenav must be a SIBLING of header.site-nav in the markup, not a
   descendant — header has backdrop-filter, which creates a new containing
   block for position:fixed children and would break full-viewport sizing. */
.mobilenav{
  position:fixed;inset:0;top:0;z-index:19;
  padding-top:calc(70px + env(safe-area-inset-top,0px));
  padding-inline:24px;padding-bottom:40px;
  background:var(--dark);display:flex;flex-direction:column;overflow-y:auto;
  transform:translateX(100%);visibility:hidden;
  transition:transform .4s cubic-bezier(.16,1,.3,1), visibility .4s;
}
body.nav-open .mobilenav{transform:translateX(0);visibility:visible;}
.mobilenav-links{list-style:none;margin:0;padding:12px 0 0;display:flex;flex-direction:column;}
.mobilenav-links>li{border-bottom:1px solid rgba(255,255,255,.08);}
.mobilenav-links>li>a{display:block;padding:17px 2px;font-family:var(--serif);font-size:21px;
  color:var(--white);text-decoration:none;}
.mobilenav-links a.active{color:var(--teal);}
.mobilenav-cta{margin-top:28px;justify-content:center;width:100%;}

@media (max-width:1050px){
  .navtoggle{display:flex;}
  .navcta{display:none;}
  .navlinks,.navmain{display:none;}
}

/* page hero — simpler single-column hero for inner pages */
.pagehero{padding-block:80px;position:relative;overflow:hidden;background:var(--dark);color:var(--white);}
.pagehero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(55% 60% at 85% 0%, rgba(0,181,165,.18), transparent 60%),
    radial-gradient(40% 45% at 4% 100%, rgba(191,101,192,.12), transparent 60%);
}
.pagehero-inner{position:relative;max-width:820px;}
.pagehero h1{color:var(--white);}
.pagehero p.sub{color:rgba(245,241,232,.82);font-size:var(--text-lead);margin-top:var(--space-5);max-width:640px;}
.pagehero-ctas{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-6);}
.pagehero .crumbs{font-family:var(--mono);font-size:var(--text-label);line-height:1.4;letter-spacing:.08em;
  color:rgba(245,241,232,.45);margin-bottom:var(--space-5);text-transform:uppercase;}
.pagehero .crumbs a{color:rgba(245,241,232,.6);text-decoration:none;}
.pagehero .crumbs a:hover{color:var(--teal);}

/* hero (homepage-scale, kept for forside) */
.hero{padding-block:80px 88px;position:relative;overflow:hidden;}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 60% at 82% 8%, rgba(0,181,165,.20), transparent 60%),
    radial-gradient(45% 45% at 6% 92%, rgba(191,101,192,.14), transparent 60%);
}
.hero-inner{position:relative;max-width:880px;}
.hero h1{max-width:820px;color:var(--white);}
.hero p.sub{color:rgba(245,241,232,.82);font-size:var(--text-lead);margin-top:var(--space-5);max-width:640px;}
.hero-ctas{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-6);}

/* Hero fact strip — quick-scan trust signals (data sovereignty, open
   source, compliance, EU cloud) directly under the hero copy. Deliberately
   NOT pill/border chips — that shape reads as "more buttons" right under
   the real CTAs. Plain icon+label pairs instead, dimmer than the CTAs, so
   the strip reads as supporting fact rather than competing action. */
.hero-facts{display:flex;flex-wrap:wrap;column-gap:var(--space-6);row-gap:var(--space-3);margin-top:var(--space-6);max-width:640px;}
.hero-facts .fact-item{display:flex;align-items:center;gap:9px;}
.hero-facts .fact-item svg{width:15px;height:15px;flex:none;color:var(--teal-dim);}
.hero-facts .fact-item span{
  font-family:var(--mono);font-size:var(--text-label);line-height:1.4;font-weight:500;text-transform:uppercase;
  letter-spacing:.09em;color:rgba(245,241,232,.68);white-space:nowrap;
}
@media (max-width:600px){.hero-facts .fact-item span{white-space:normal;}}

/* section background variants */
.light{background:var(--cream);color:var(--dark);}
.light-mid{background:var(--cream-mid);color:var(--dark);}
.dark-mid-sec{background:var(--dark-mid);color:var(--white);}
.dark-sec{background:var(--dark);color:var(--white);}
.light h2, .light-mid h2{color:var(--dark);}
.light p, .light-mid p{color:#3f4252;}

/* section heading helper */
.sechead{max-width:680px;margin-bottom:var(--space-6);}
.sechead.center{margin-inline:auto;text-align:center;}
.sechead p{margin-top:var(--space-4);font-size:var(--text-lead);}
.dark-sec .sechead h2, .dark-mid-sec .sechead h2{color:var(--white);}
.dark-sec .sechead p, .dark-mid-sec .sechead p{color:rgba(245,241,232,.75);}

/* trust bar */
.trust{padding-block:var(--space-7);}
.trust-label{
  font-family:var(--mono);font-size:var(--text-label);line-height:1.4;font-weight:500;text-transform:uppercase;
  letter-spacing:0.16em;color:#6b6f80;text-align:center;margin-bottom:var(--space-6);
}
.trust-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:52px 64px;}
.trust-row img{width:auto;opacity:.92;display:block;}
.trust-row img.logo-nordiskfilm{height:42px;}
.trust-row img.logo-ca{height:28px;}
.trust-row img.logo-habitus{height:28px;}
.trust-row img.logo-wexoe{height:20px;}
.trust-row img.logo-hobbii{height:22px;}

/* founder / video block (full-width 16:9) */
.founder-head{max-width:760px;margin:0 auto 48px;text-align:center;}
.founder-head .kicker{font-family:var(--mono);font-weight:500;font-style:normal;font-size:var(--text-label);
  color:var(--teal-dim);text-transform:uppercase;letter-spacing:.14em;margin-bottom:10px;display:block;}
.founder-head h2{color:var(--dark);}
/* Homepage founders section: text + founders left, four icon facts right (reuses .split, .statgrid/.stat) */
.split.founders-split{align-items:center;}
.founder-head-left{text-align:left;margin:0;max-width:none;}
.founder-mini{list-style:none;margin:32px 0 32px;padding:0;display:flex;flex-direction:column;gap:16px;}
.founder-mini li{display:flex;align-items:center;gap:16px;}
.founder-mini-text{display:flex;flex-direction:column;gap:4px;}
.founder-mini-name{font-family:var(--sans);font-weight:500;font-size:var(--text-lead);color:var(--dark);text-decoration:none;}
.founder-mini-name:hover{color:var(--teal-dim);text-decoration:underline;}
.founder-mini-title{font-family:var(--mono);font-size:var(--text-label);text-transform:uppercase;letter-spacing:.1em;color:#6b6f80;}
.statgrid.ownfacts{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.ownfacts .stat{background:var(--white);border:1px solid rgba(30,33,48,.07);border-radius:12px;padding:26px 24px;}
.ownfacts .stat-icon{width:30px;height:30px;color:var(--teal-dim);display:block;margin-bottom:22px;}
.ownfacts .stat .num{color:var(--dark);}

@media (max-width:420px){.ownfacts .stat{padding:20px 16px;}.ownfacts .stat .num{font-size:2.1rem;}}
.founder-head p.body{color:#4a4d5c;margin-top:var(--space-4);font-size:var(--text-lead);}
.founder-media{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  background:linear-gradient(155deg,var(--dark) 0%, var(--purple) 100%);
  display:flex;align-items:center;justify-content:center;max-width:1040px;margin:0 auto;}
.founder-media .grain{position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:5px 5px;}
.playbtn{
  position:relative;z-index:2;width:92px;height:92px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.55);
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);
}
.playbtn::after{content:"";width:0;height:0;margin-left:6px;
  border-top:15px solid transparent;border-bottom:15px solid transparent;
  border-left:23px solid var(--white);}
.founder-caption{
  position:absolute;left:24px;bottom:22px;z-index:2;
  font-family:var(--mono);font-size:var(--text-label);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.75);
}

/* 3-color card grid (reusable for any 3-item feature/step block) */
.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);}
.cardgrid.cols-2{grid-template-columns:repeat(2,1fr);}
.cardgrid.cols-4{grid-template-columns:repeat(4,1fr);}
.cardgrid.single-card{grid-template-columns:minmax(0,680px);}
.card{
  border-radius:12px;padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);
  box-shadow:0 20px 40px -24px rgba(0,0,0,.45);
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
  text-decoration:none;color:inherit;
}
.card:hover{transform:translateY(-6px);}
.card .icon{width:40px;height:40px;}
.card .num{font-family:var(--mono);font-size:var(--text-label);line-height:1.4;letter-spacing:.14em;opacity:.75;}
.card h3{font-size:var(--text-h3);}
.card p{font-size:var(--text-body);font-weight:300;line-height:1.6;}
.card-purple{background:var(--purple);color:#fff;}
.card-purple .num{color:#fff;}
.card-purple p{color:rgba(255,255,255,.82);}
.card-mint{background:var(--mint);color:var(--dark);}
.card-mint .num{color:var(--dark);}
.card-mint p{color:rgba(30,33,48,.92);}
.card-magenta{background:var(--magenta);color:#fff;}
.card-magenta .num{color:#fff;}
.card-magenta p{color:rgba(255,255,255,.85);}
.card-dark{background:var(--dark-card);color:#fff;border:1px solid rgba(255,255,255,.07);}
.card-dark .num{color:var(--teal);}
.card-dark p{color:rgba(245,241,232,.72);}
.card .example{
  margin-top:auto;padding-top:var(--space-4);border-top:1px solid currentColor;
  font-family:var(--mono);font-size:var(--text-small);line-height:1.5;opacity:.9;
}

/* Catalogue cards — for the fuller product/component grid on produkter.html,
   where most tiles aren't one of the 4 flagship-colored products. Three
   states: card-neutral (live, part of the platform, but no dedicated page
   to link to yet — shown as a plain, non-interactive div, not a dead link),
   card-soon (on the roadmap, not available today — dimmed, dashed, also
   non-interactive), and the 4 flagship <a class="card card-purple/…"> tiles
   keep their existing hover-lift/link behavior untouched. .status is the
   small "I drift" / "Kommer snart" footer label shared by both new states. */
.card-neutral{
  position:relative;overflow:hidden;
  background:var(--dark-mid);color:#fff;border:1px solid rgba(0,181,165,.3);cursor:default;
}
.card-neutral::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--teal);}
.card-neutral:hover{transform:none;}
a.card-neutral{cursor:pointer;}
a.card-neutral:hover{transform:translateY(-6px);}
.card-neutral .icon{color:var(--teal);}
.card-neutral p{color:rgba(245,241,232,.75);}
.card-neutral .status{
  margin-top:auto;width:fit-content;display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-top:none;border-radius:100px;
  background:rgba(0,181,165,.14);border:1px solid rgba(0,181,165,.4);
  font-family:var(--mono);font-size:var(--text-label);font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--teal);
}
.card-neutral .status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none;}
.card-soon{
  background:rgba(255,255,255,.025);border:1px dashed rgba(255,255,255,.16);
  box-shadow:none;cursor:default;
}
.light .card-soon, .light-mid .card-soon{background:rgba(30,33,48,.02);border-color:rgba(30,33,48,.15);}
.card-soon:hover{transform:none;}
.card-soon .icon{opacity:.5;}
.card-soon h3{color:rgba(245,241,232,.55);}
.light .card-soon h3, .light-mid .card-soon h3{color:rgba(30,33,48,.55);}
.card-soon p{color:rgba(245,241,232,.4);font-weight:300;}
.light .card-soon p, .light-mid .card-soon p{color:rgba(30,33,48,.5);}
.card-soon .status{
  margin-top:auto;padding-top:14px;border-top:1px dashed rgba(255,255,255,.14);
  font-family:var(--mono);font-size:var(--text-label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(245,241,232,.4);
}
.light .card-soon .status, .light-mid .card-soon .status{border-top-color:rgba(30,33,48,.14);color:rgba(30,33,48,.45);}

@media (max-width:860px){
  .cardgrid, .cardgrid.cols-2, .cardgrid.cols-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .cardgrid, .cardgrid.cols-2, .cardgrid.cols-4{grid-template-columns:1fr;}
}

/* Catalogue "stack" layout (produkter.html) — each numbered Trin section
   pairs whatever's live (full .card-neutral treatment, in a flexible
   .livegrid so one or two cards never look forced into empty grid slots)
   with everything still on the roadmap, shown as a compact vertical
   spec-list instead of equal-weight cards — so unshipped features don't
   visually compete with what's actually live, and an odd item count never
   leaves an orphaned half-empty grid row. A large ghost numeral per Trin
   section (desktop only) threads the page together as one layered system
   instead of a flat stack of identical boxes. */
.trinsec{position:relative;overflow:hidden;}
.trinsec .wrap{position:relative;}
.trin-num{
  position:absolute;top:-14px;right:0;z-index:0;
  font-family:var(--serif);font-weight:400;font-size:clamp(110px,12vw,200px);
  line-height:1;color:currentColor;opacity:.05;pointer-events:none;user-select:none;
}
.trinsec .sechead, .trinsec .trinbody{position:relative;z-index:1;}
@media (max-width:900px){.trin-num{display:none;}}

.trinbody{display:flex;gap:var(--space-7);flex-wrap:wrap;align-items:flex-start;}
.livegrid{display:flex;flex-wrap:wrap;gap:var(--space-5);flex:1 1 320px;}
.livegrid .card{flex:1 1 300px;max-width:380px;}
.roadmap{flex:1 1 280px;max-width:460px;padding-top:6px;}
.roadmap-label{
  font-family:var(--mono);font-size:var(--text-label);line-height:1.4;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;opacity:.48;margin-bottom:6px;
}
.roadmap-chip{
  display:flex;align-items:flex-start;gap:14px;padding:16px 2px;
  border-bottom:1px dashed rgba(255,255,255,.14);
}
.light .roadmap-chip, .light-mid .roadmap-chip{border-bottom-color:rgba(30,33,48,.15);}
.roadmap-chip:last-child{border-bottom:none;}
.roadmap-chip .rm-icon{width:18px;height:18px;opacity:.4;flex:none;margin-top:2px;}
.roadmap-chip .rm-name{
  display:block;font-family:var(--sans);font-size:var(--text-body);font-weight:600;
  color:rgba(245,241,232,.68);margin-bottom:3px;
}
.light .roadmap-chip .rm-name, .light-mid .roadmap-chip .rm-name{color:rgba(30,33,48,.68);}
.roadmap-chip .rm-desc{
  font-family:var(--sans);font-size:var(--text-small);font-weight:300;line-height:1.5;
  color:rgba(245,241,232,.4);
}
.light .roadmap-chip .rm-desc, .light-mid .roadmap-chip .rm-desc{color:rgba(30,33,48,.44);}

/* circular icon badge for .card-neutral tiles — same 44px teal-tint badge
   already used for .rolepick-view .viewicon, reused here rather than a new
   pattern so "live, part of the platform" reads consistently everywhere. */
.card-neutral .icon-badge{
  width:44px;height:44px;border-radius:50%;flex:none;
  background:rgba(0,181,165,.14);border:1px solid rgba(0,181,165,.35);
  display:flex;align-items:center;justify-content:center;
}
.card-neutral .icon-badge .icon{width:20px;height:20px;margin:0;}

@media (max-width:600px){.trinbody{gap:36px;}}

/* Custom-work closing panel — one wide highlighted tile rather than a grid
   cell, since it isn't part of the catalogue, it's an invitation to talk. */
.customtile{
  display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap;
  background:var(--dark);color:#fff;border-radius:16px;padding:var(--space-6);
}
.customtile-icon{
  width:64px;height:64px;flex:none;border-radius:50%;background:rgba(0,181,165,.14);
  display:flex;align-items:center;justify-content:center;color:var(--teal);
}
.customtile-icon .icon{width:28px;height:28px;}
.customtile-body{flex:1 1 380px;min-width:0;}
.customtile-body .eyebrow{margin-bottom:10px;}
.customtile-body h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin:0 0 var(--space-2);color:#fff;}
.customtile-body p{font-size:var(--text-body);font-weight:300;line-height:1.6;color:rgba(245,241,232,.78);margin:0;}
@media (max-width:700px){
  .customtile{padding:32px 28px;}
}

/* testimonial card byline — photo + .example name/title, used in place of
   a bare .example when a real customer photo is available */
.testimonial-byline{
  display:flex;align-items:center;gap:12px;
  margin-top:auto;padding-top:16px;border-top:1px solid currentColor;
}
.testimonial-byline img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;filter:grayscale(1);}
.testimonial-byline .example{margin-top:0;padding-top:0;border-top:none;}

/* testimonial slider — one quote at a time (any number of .testi-slide),
   manual prev/next + dots. All slides stack in the same grid cell so the
   container height follows the tallest one and swapping never jumps. */
.testi-slider{max-width:720px;margin:0 auto;}
.testi-track{display:grid;}
.testi-slide{
  grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .4s cubic-bezier(.16,1,.3,1);
}
.testi-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;}
.testi-slide .card{height:100%;}
.testi-nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:28px;}
.testi-arrow{
  display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;background:none;border:1.5px solid rgba(30,33,48,.25);
  color:var(--dark);cursor:pointer;flex:none;padding:0;
  transition:border-color .3s cubic-bezier(.16,1,.3,1), background .3s cubic-bezier(.16,1,.3,1);
}
.testi-arrow:hover{border-color:var(--dark);background:rgba(30,33,48,.06);}
.testi-arrow svg{width:16px;height:16px;}
.testi-dots{display:flex;align-items:center;gap:8px;}
.testi-dot{
  width:8px;height:8px;border-radius:50%;border:none;padding:0;
  background:rgba(30,33,48,.2);cursor:pointer;
  transition:background .3s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1);
}
.testi-dot.is-active{background:var(--teal);transform:scale(1.3);}

.promise-top{max-width:680px;margin-bottom:var(--space-6);}
.promise-top p{margin-top:var(--space-4);font-size:var(--text-lead);}

/* feature / promise grid (2-6 col band of labeled cells) — individual cards, rotating accent colors */
.promise-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);}
.promise-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.promise-cell{
  --accent:var(--teal);
  background:var(--white);border-radius:12px;padding:var(--space-5);
  border:1px solid rgba(30,33,48,.08);border-top:3px solid var(--accent);
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.promise-cell:hover{transform:translateY(-5px);box-shadow:0 18px 34px rgba(30,33,48,.10);}
.promise-cell:nth-child(4n+1){--accent:var(--teal);}
.promise-cell:nth-child(4n+2){--accent:var(--purple);}
.promise-cell:nth-child(4n+3){--accent:var(--mint);}
.promise-cell:nth-child(4n+4){--accent:var(--magenta);}
.promise-cell .icon{width:24px;height:24px;color:var(--accent);margin-bottom:16px;display:block;}
.promise-cell .num{font-family:var(--mono);font-size:var(--text-label);color:rgba(30,33,48,.32);letter-spacing:.12em;margin-bottom:var(--space-2);}
.promise-cell .label{font-family:var(--mono);font-size:var(--text-label);line-height:1.4;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;color:var(--dark);margin-bottom:var(--space-3);}
.promise-cell p{font-size:var(--text-body);color:#3f4252;line-height:1.6;}
.proof{margin-top:28px;padding:22px 26px;background:var(--cream-mid);border-left:3px solid var(--teal);
  border-radius:4px;display:flex;gap:14px;align-items:flex-start;}
.proof .icon{width:20px;height:20px;color:var(--teal-dim);flex:none;margin-top:2px;}
.proof p{font-size:var(--text-body);color:#3f4252;line-height:1.6;}
.proof strong{color:var(--dark);font-weight:500;}

/* numbered step list (dark, reusable — e.g. process/investment sections) */
.steplist{display:flex;flex-direction:column;gap:0;}
.stepitem{padding:var(--space-5) 0;border-top:1px solid rgba(255,255,255,.1);
  display:grid;grid-template-columns:auto 1fr;gap:var(--space-5);align-items:baseline;}
.stepitem:last-child{border-bottom:1px solid rgba(255,255,255,.1);}
.stepitem .n{font-family:var(--mono);font-size:var(--text-label);color:var(--teal);letter-spacing:.1em;}
.stepitem h3, .stepitem h4{font-family:var(--mono);font-weight:700;font-size:var(--text-body);line-height:1.4;color:var(--white);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;}
.stepitem p{font-size:var(--text-body);color:rgba(245,241,232,.7);line-height:1.6;}
.light .stepitem, .light-mid .stepitem{border-color:rgba(30,33,48,.12);}
.light .stepitem h3, .light-mid .stepitem h3, .light .stepitem h4, .light-mid .stepitem h4{color:var(--dark);}
/* Grid alignment owns the row rhythm; headings do not add a browser-like offset. */
.stepitem h3{margin-top:0;}
.light .stepitem p, .light-mid .stepitem p{color:#4a4d5c;}
.light .stepitem:last-child, .light-mid .stepitem:last-child{border-bottom-color:rgba(30,33,48,.12);}

/* founder avatars — swap the .n number badge for a circular illustrated
   avatar (Ledelse/Leadership steplist, om-usernest.html). Source SVGs are
   already a full 512x512 circle clip on a brand-teal fill, so the image
   itself needs no cropping — just sizing. On hover/focus the illustration
   crossfades to a real photo, stacked in the same circle via absolute
   positioning inside a relative wrapper. */
.founder-steplist .stepitem{align-items:center;}
.founder-avatar-wrap{position:relative;width:60px;height:60px;flex:none;border-radius:50%;}
.founder-avatar-wrap img{
  position:absolute;inset:0;width:60px;height:60px;border-radius:50%;
  object-fit:cover;display:block;transition:opacity .4s cubic-bezier(.16,1,.3,1);
}
.founder-avatar-photo{opacity:0;}
.stepitem:hover .founder-avatar-photo, .stepitem:focus-within .founder-avatar-photo,
.founder-mini li:hover .founder-avatar-photo, .founder-mini li:focus-within .founder-avatar-photo{opacity:1;}
.stepitem:hover .founder-avatar-illustration, .stepitem:focus-within .founder-avatar-illustration,
.founder-mini li:hover .founder-avatar-illustration, .founder-mini li:focus-within .founder-avatar-illustration{opacity:0;}
@media (max-width:600px){
  .founder-avatar-wrap, .founder-avatar-wrap img{width:48px;height:48px;}
}
@media (hover:none){
  /* touch devices have no hover — show the photo by default instead of an
     illustration that can never be revealed */
  .founder-avatar-illustration{opacity:0;}
  .founder-avatar-photo{opacity:1;}
}

/* stepitem highlight — marks one phase of a .steplist as the payoff/goal
   (e.g. "first AI usecase" as the last phase of a timeline). Reuses the
   existing steplist rhythm rather than a separate timeline component. */
.stepitem.highlight{
  background:rgba(0,181,165,.08);border-radius:10px;
  padding-inline:20px;margin-inline:-20px;border-color:rgba(0,181,165,.3)!important;
}
.stepitem.highlight .n{color:var(--teal);}
.stepitem.highlight h3, .stepitem.highlight h4{color:var(--teal);}
@media (max-width:600px){
  .stepitem.highlight{padding-inline:14px;margin-inline:-14px;}
}

/* role picker — click a role, see the value framed for that role. Generic:
   .rolepicker wraps a .rolepick (buttons) + .rolepick-panel (views); shared.js
   toggles matching data-role on both, same pattern as the testimonial slider. */
.rolepick{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-5);}
.rolepick-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:var(--text-label);line-height:1.4;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:12px 22px 12px 18px;border-radius:100px;border:1.5px solid rgba(30,33,48,.22);background:transparent;
  color:var(--dark);cursor:pointer;transition:border-color .25s ease, background .25s ease, color .25s ease;
}
.rolepick-btn svg{width:15px;height:15px;flex:none;opacity:.55;transition:opacity .25s ease;}
.rolepick-btn:hover{border-color:var(--dark);}
.rolepick-btn:hover svg{opacity:.85;}
.rolepick-btn.is-active{background:var(--dark);border-color:var(--dark);color:var(--white);}
.rolepick-btn.is-active svg{opacity:1;color:var(--teal);}
.rolepick-panel{margin-top:8px;}
.rolepick-view{
  position:relative;overflow:hidden;display:none;background:var(--white);border-radius:12px;
  padding:var(--space-6);border:1px solid rgba(30,33,48,.08);
}
.rolepick-view::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--teal);}
.rolepick-view.is-active{display:block;}
.rolepick-view .viewhead{display:flex;align-items:center;gap:16px;margin-bottom:14px;}
.rolepick-view .viewicon{
  width:44px;height:44px;border-radius:50%;flex:none;
  background:rgba(0,181,165,.1);border:1px solid rgba(0,181,165,.28);
  display:flex;align-items:center;justify-content:center;
}
.rolepick-view .viewicon svg{width:20px;height:20px;color:var(--teal);}
.rolepick-view h3{color:var(--dark);margin:0;font-size:var(--text-h3);}
.rolepick-view .checklist{margin-top:18px;}
.rolepick-view .citesrc{
  font-family:var(--mono);font-size:var(--text-label);font-weight:500;letter-spacing:.04em;
  color:#8a8d99;white-space:nowrap;
}
@media (max-width:600px){
  .rolepick-view{padding:30px 22px 26px;}
  .rolepick-view .viewicon{width:38px;height:38px;}
  .rolepick-view .viewicon svg{width:17px;height:17px;}
}

/* case-style media+text block (text left, portrait image right) */
.case{display:grid;grid-template-columns:1fr 0.86fr;gap:var(--space-7);align-items:center;}
.case.reverse{grid-template-columns:0.86fr 1fr;}
.case.reverse .case-media{order:-1;}
.case-body{display:flex;flex-direction:column;}
.case-body .eyebrow{margin-bottom:16px;}
.case-body h2{color:var(--dark);margin-bottom:16px;}
.case-body p.lead{color:#3a3a3a;font-size:var(--text-lead);margin-top:var(--space-5);max-width:460px;}
.dark-sec .case-body h2, .dark-mid-sec .case-body h2{color:var(--white);}
.dark-sec .case-body p.lead, .dark-mid-sec .case-body p.lead{color:rgba(245,241,232,.75);}
.case-body cite{display:block;margin-top:var(--space-4);font-style:normal;font-family:var(--mono);
  font-size:var(--text-small);color:#6b6f80;letter-spacing:.03em;}
.case-body .btn{margin-top:32px;align-self:flex-start;}
.case-media{position:relative;aspect-ratio:654/715;border-radius:20px;overflow:hidden;
  background:linear-gradient(165deg,var(--teal-dim),var(--dark));
  display:flex;align-items:center;justify-content:center;}
.case-media .tag{font-family:var(--mono);font-size:var(--text-label);color:rgba(255,255,255,.7);
  letter-spacing:.14em;text-transform:uppercase;position:absolute;top:24px;left:24px;z-index:2;}
.case-media .wordmark{font-family:var(--mono);font-weight:700;font-size:var(--text-lead);
  color:rgba(255,255,255,.92);letter-spacing:.1em;text-transform:uppercase;position:relative;z-index:2;}
.case-media .case-brandmark{width:55%;max-width:200px;max-height:110px;height:auto;
  object-fit:contain;position:relative;z-index:2;}
.case-illustration{position:absolute;inset:0;width:100%;height:100%;z-index:1;}
.case-media .case-logo-frame{background:#fff;border-radius:16px;padding:26px 30px;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 36px rgba(0,0,0,.28);position:relative;z-index:3;transition:opacity 1.4s ease;}
.case-media .case-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
.case-media.case-media-video{aspect-ratio:1024/662;}
.case-reveal.in-view .case-logo-frame{opacity:0;pointer-events:none;}
.case-media .case-logo{width:150px;max-width:100%;height:auto;display:block;}

/* plain variant — for a standalone illustration with no gradient card,
   no tag/wordmark clutter. Keeps the same box proportions for grid balance. */
.case-media.case-media-plain{background:none;border-radius:0;overflow:visible;}
.case-media-plain .story-illustration{width:72%;max-width:280px;height:auto;}

/* Click-to-play cover (Hobbii front-page teaser): the logo card doubles as
   a play button, with a dark glass circle centered directly over the logo
   as the "click me" affordance. Nothing plays or fades until the visitor
   actually clicks, so the logo stays fully visible instead of auto-fading
   on scroll. */
.case-playbtn{
  position:relative;z-index:3;background:none;border:none;padding:0;margin:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:opacity 1.4s ease;
}
.case-reveal.in-view .case-playbtn{opacity:0;pointer-events:none;}
.case-playbtn .play-badge{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;
  width:64px;height:64px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(20,20,26,.5);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  box-shadow:0 10px 26px -4px rgba(0,0,0,.4);
  transition:transform .3s cubic-bezier(.16,1,.3,1), background .3s ease;
}
.case-playbtn .play-badge::after{
  content:"";width:0;height:0;margin-left:3px;
  border-top:9px solid transparent;border-bottom:9px solid transparent;
  border-left:15px solid #fff;
}
.case-playbtn:hover .play-badge{transform:translate(-50%,-50%) scale(1.08);background:rgba(20,20,26,.64);}
@media (max-width:600px){
  .case-playbtn .play-badge{width:52px;height:52px;}
  .case-playbtn .play-badge::after{margin-left:2px;border-top-width:7px;border-bottom-width:7px;border-left-width:12px;}
}

/* stat tiles */
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);}
.statgrid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:520px){.statgrid.cols-3{grid-template-columns:1fr;}}
.stat{padding:8px 0;}
.stat .num{font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.4rem);color:var(--teal);line-height:1;}
.stat .label{font-family:var(--mono);font-size:var(--text-label);text-transform:uppercase;letter-spacing:.1em;
  color:rgba(245,241,232,.6);margin-top:10px;}
.light .stat .label, .light-mid .stat .label{color:#6b6f80;}

/* generic content table */
table.content-table{width:100%;border-collapse:collapse;margin-top:8px;}
table.content-table th{
  font-family:var(--mono);font-size:var(--text-label);text-transform:uppercase;letter-spacing:.1em;
  text-align:left;padding:14px 18px;background:rgba(30,33,48,.04);color:#6b6f80;
  border-bottom:1px solid rgba(30,33,48,.12);
}
table.content-table td{padding:18px;border-bottom:1px solid rgba(30,33,48,.08);
  font-size:var(--text-body);color:#3a3d4a;vertical-align:top;}
table.content-table tr:last-child td{border-bottom:none;}
.dark-sec table.content-table th, .dark-mid-sec table.content-table th{
  background:rgba(255,255,255,.04);color:rgba(245,241,232,.5);border-color:rgba(255,255,255,.1);
}
.dark-sec table.content-table td, .dark-mid-sec table.content-table td{
  color:rgba(245,241,232,.85);border-color:rgba(255,255,255,.08);
}

/* two-column content layout (text + supporting panel) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7);align-items:start;}
.split.narrow-right{grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);}

/* open / draft-note callout — internal flag, not for publish */
.opennote{
  margin-top:24px;padding:18px 22px;border-radius:8px;
  background:rgba(191,101,192,.08);border:1px dashed rgba(191,101,192,.4);
  font-family:var(--mono);font-size:var(--text-small);line-height:1.6;color:#7a4f7d;
}
.dark-sec .opennote, .dark-mid-sec .opennote{color:#e0b3e1;background:rgba(191,101,192,.12);}
.opennote .tag{display:block;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:6px;color:var(--magenta);}

/* CTA band */
.ctaband{position:relative;overflow:hidden;text-align:center;background:var(--dark);padding-block:72px;}
.ctaband::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(55% 70% at 78% 0%, rgba(0,181,165,.22), transparent 60%),
    radial-gradient(45% 55% at 10% 100%, rgba(191,101,192,.14), transparent 60%);}
.ctaband-inner{position:relative;max-width:640px;margin:0 auto;display:flex;
  flex-direction:column;align-items:center;gap:var(--space-5);}
.ctaband h2{color:var(--white);}
.ctaband p{color:rgba(245,241,232,.72);}
.ctaband .ctas{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;}

/* footer */
footer{padding-block:64px 40px;border-top:1px solid rgba(255,255,255,.08);background:var(--dark);color:var(--white);}
.footgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:56px;}
.footgrid.single{grid-template-columns:1fr;max-width:340px;}
.footbrand p{color:rgba(245,241,232,.55);font-size:var(--text-small);margin-top:var(--space-4);max-width:260px;}
.footaddr{line-height:1.7;}
.addr-link{color:inherit;text-decoration:inherit;}
.addr-link:hover{color:var(--teal);}
.footsocial{display:flex;gap:10px;margin-top:18px;}
.social-link{
  display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;
  border-radius:50%;border:1px solid rgba(255,255,255,.15);color:rgba(245,241,232,.6);
  transition:border-color .25s ease, color .25s ease;
}
.social-link:hover{border-color:var(--teal);color:var(--teal);}
.social-link svg{width:16px;height:16px;display:block;}
/* footer column titles are real <h2 class="foothead"> (correct outline for agents/screen readers), styled small */
.footcol h4, .footcol .foothead{font-family:var(--mono);font-size:var(--text-label);font-weight:600;text-transform:uppercase;line-height:1.4;text-wrap:wrap;
  letter-spacing:.14em;color:rgba(245,241,232,.45);margin:0 0 18px;}
.footcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.footcol a{font-family:var(--sans);font-size:var(--text-small);font-weight:300;color:rgba(245,241,232,.78);text-decoration:none;}
.footcol a:hover{color:var(--teal);}
/* .email-link's actual color/size normally comes from its container
   (.footcol a or .contact-aside p a below) — this is just the fallback
   so the class always renders as a real link even outside those. */
.email-link{color:inherit;text-decoration:inherit;cursor:pointer;}
.footbottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  padding-top:32px;border-top:1px solid rgba(255,255,255,.06);
  font-family:var(--mono);font-size:var(--text-label);color:rgba(245,241,232,.4);letter-spacing:.04em;}
.footbottom a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.footbottom a:hover{color:var(--teal);}

@media (max-width:900px){
  section{padding-block:64px;}
  .hero,.pagehero{padding-block:64px;}
  .founder-media .playbtn{width:68px;height:68px;}
  .cardgrid{grid-template-columns:1fr;}
  .cardgrid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .statgrid{grid-template-columns:1fr 1fr;}
  .promise-grid{grid-template-columns:1fr 1fr;}
  .promise-grid.cols-3{grid-template-columns:1fr;}
  .panelgrid{grid-template-columns:repeat(3,1fr);}
  .case, .case.reverse{grid-template-columns:1fr;}
  .case.reverse .case-media{order:0;}
  .case-media{min-height:220px;}
  .split, .split.narrow-right{grid-template-columns:1fr;gap:var(--space-6);}
  .footgrid{grid-template-columns:1fr 1fr;}
  .navlinks, .navmain{display:none;}
  table.content-table{display:block;overflow-x:auto;white-space:nowrap;}
}
@media (max-width:520px){
  .promise-grid{grid-template-columns:1fr;}
  .panelgrid{grid-template-columns:1fr 1fr;}
  .statgrid{grid-template-columns:1fr 1fr;}
  .footgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) var(--space-5);}
  .footbrand{grid-column:1/-1;}
  .trust-row{gap:var(--space-5);}
}
@media (max-width:360px){.footgrid{grid-template-columns:1fr;}.footbrand{grid-column:auto;}}

/* ============================================================
   Form fields — plain <input>/<textarea>/<label>, dark by default.
   Used on kontakt.html; extend here rather than forking.
   ============================================================ */
.formcard{
  background:var(--dark-card);border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:var(--space-6);
}
.formrow{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);}
.field{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-5);}
.field:last-of-type{margin-bottom:var(--space-6);}
.field label{
  font-family:var(--mono);font-size:var(--text-label);font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;color:rgba(245,241,232,.6);
}
.field input, .field textarea{
  font-family:var(--sans);font-size:var(--text-body);font-weight:300;color:var(--white);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
  border-radius:8px;padding:13px 16px;outline:none;width:100%;
  transition:border-color .25s ease, background .25s ease;
}
.field input::placeholder, .field textarea::placeholder{color:rgba(245,241,232,.35);}
.field input:focus, .field textarea:focus{border-color:var(--teal);background:rgba(255,255,255,.08);}
.field textarea{resize:vertical;min-height:130px;line-height:1.5;}
.formcard .formnote{font-family:var(--mono);font-size:var(--text-label);color:rgba(245,241,232,.45);margin-top:var(--space-4);}
.field-check{display:flex;align-items:flex-start;gap:10px;margin-bottom:22px;}
.field-check input[type="checkbox"]{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--teal);cursor:pointer;}
.field-check label{font-family:var(--sans);font-size:var(--text-small);font-weight:300;color:rgba(245,241,232,.75);cursor:pointer;}
/* Honeypot: left in the DOM for simple bots to fill in, hidden from people and skipped by screen readers */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.light .formcard, .light-mid .formcard{background:var(--white);border-color:rgba(30,33,48,.1);}
.light .field label, .light-mid .field label{color:#6b6f80;}
.light .field input, .light .field textarea,
.light-mid .field input, .light-mid .field textarea{
  color:var(--ink);background:rgba(30,33,48,.03);border-color:rgba(30,33,48,.14);
}
.light .field input::placeholder, .light .field textarea::placeholder,
.light-mid .field input::placeholder, .light-mid .field textarea::placeholder{color:rgba(30,33,48,.35);}
.light .formcard .formnote, .light-mid .formcard .formnote{color:#6b6f80;}
.light .field-check label, .light-mid .field-check label{color:#3a3a3a;}

/* contact aside (direct-contact info beside the form) */
.contact-aside{padding-top:var(--space-6);}
.contact-aside h3{color:var(--white);margin-bottom:var(--space-4);}
.contact-aside p{font-size:var(--text-body);color:rgba(245,241,232,.75);}
.contact-aside p a{color:var(--teal);text-decoration:none;}
.contact-aside p a:hover{text-decoration:underline;}

@media (max-width:600px){
  .formrow{grid-template-columns:1fr;}
  .formcard{padding:28px 22px;}
  .contact-aside{padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,.12);}
}

/* prose block — long-form body copy with consistent vertical rhythm
   (used on content-heavy inner pages, e.g. Salon) */
.prose{max-width:760px;}
.prose p{margin-top:18px;}
.prose p:first-child{margin-top:0;}
.prose h3{margin-top:36px;margin-bottom:6px;}
.prose h3:first-child{margin-top:0;}
/* section headings in long-form prose are <h2 class="prose-h"> for a correct outline, styled like h3 */
.prose .prose-h{font-family:var(--mono);font-weight:700;font-size:var(--text-h3);letter-spacing:-0.01em;line-height:1.3;margin-top:36px;margin-bottom:6px;}
.prose .prose-h:first-child{margin-top:0;}
.prose ul{margin:18px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:10px;}
.prose li{font-size:var(--text-body);font-weight:300;line-height:1.6;}
.prose a{color:var(--teal-dim);text-decoration:underline;text-underline-offset:2px;}
.prose a:hover{color:var(--teal);}
.dark-sec .prose a, .dark-mid-sec .prose a{color:var(--teal);}

/* inline-link — a product/page name mentioned inside running body copy
   (outside .prose), made clickable without turning it into a full CTA
   button. Used e.g. on Samarbejde when Track/Core are
   named in a sentence. */
.inline-link{color:var(--teal);text-decoration:underline;text-underline-offset:2px;}
.inline-link:hover{color:var(--teal-dim);}
.dark-sec .inline-link:hover, .dark-mid-sec .inline-link:hover{color:var(--mint);}

/* lang-note — flags a link on an EN page that leads to a Danish-only page. */
.lang-note{font-size:.8em;opacity:.6;white-space:nowrap;}

/* checklist — simple check-marked bullet list (yes/no style traits,
   "who this is for" copy, culture/value bullets). Reuses the mono/teal
   tokens rather than inventing a new icon system. */
.checklist{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;}
/* li is a block with the check absolutely positioned — NOT flex, so inline
   links/spans (e.g. .inline-link, .citesrc) stay in the text flow. */
.checklist li{position:relative;padding-left:31px;font-family:var(--sans);font-weight:300;
  font-size:var(--text-body);line-height:1.6;}
.checklist li::before{
  content:"\2713";position:absolute;left:0;top:3px;
  width:19px;height:19px;border-radius:50%;
  background:rgba(0,181,165,.1);border:1px solid rgba(0,181,165,.32);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:700;color:var(--teal);font-size:var(--text-label);line-height:1;
}
.dark-sec .checklist li::before, .dark-mid-sec .checklist li::before{background:rgba(0,181,165,.16);}
.light .checklist li, .light-mid .checklist li{color:#3f4252;}
.dark-sec .checklist li, .dark-mid-sec .checklist li{color:rgba(245,241,232,.85);}

/* read-more — collapsible extra content inside a case/prose block on a
   light background (e.g. cases.html). Same grid-rows 0fr->1fr trick as
   .rolecard-panel below, themed for text-on-light instead of a dark card.
   Trigger toggles .open on the parent .readmore via shared.js. */
.readmore-trigger{
  display:flex;align-items:center;gap:6px;margin-top:20px;
  background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--mono);font-weight:700;font-size:12px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--teal);
}
.readmore-trigger:hover{color:var(--teal-dim);}
.readmore-trigger .chev{width:9px;height:9px;flex:none;transition:transform .3s cubic-bezier(.16,1,.3,1);}
.readmore.open .readmore-trigger .chev{transform:rotate(180deg);}
.readmore .label-less{display:none;}
.readmore.open .label-more{display:none;}
.readmore.open .label-less{display:inline;}
.readmore-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.16,1,.3,1);}
.readmore.open .readmore-panel{grid-template-rows:1fr;}
.readmore-panel-inner{overflow:hidden;}
.readmore-panel-content{padding-top:6px;}

/* role-card accordion (careers page open roles) — button-triggered,
   CSS grid-rows expand so no JS height math is needed. Trigger toggles
   .open on the parent .rolecard via shared.js. */
.rolecard{background:var(--dark-card);border:1px solid rgba(255,255,255,.08);border-radius:12px;
  padding:32px 28px;display:flex;flex-direction:column;gap:16px;transition:border-color .3s ease;}
.rolecard:hover{border-color:rgba(255,255,255,.2);}
.rolecard h3{font-size:var(--text-h3);color:var(--white);}
.rolecard>p.teaser{font-size:var(--text-body);font-weight:300;color:rgba(245,241,232,.8);margin:0;}
.rolecard-trigger{
  display:flex;align-items:center;gap:8px;align-self:flex-start;margin-top:4px;
  background:none;border:none;padding:0;cursor:pointer;
  font-family:var(--mono);font-size:var(--text-label);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--teal);
}
.rolecard-trigger .chev{width:9px;height:9px;flex:none;transition:transform .3s cubic-bezier(.16,1,.3,1);}
.rolecard.open .rolecard-trigger .chev{transform:rotate(180deg);}
.rolecard-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.16,1,.3,1);}
.rolecard.open .rolecard-panel{grid-template-rows:1fr;}
.rolecard-panel-inner{overflow:hidden;}
.rolecard-panel-content{padding-top:12px;display:flex;flex-direction:column;gap:16px;}
.rolecard-panel-content p{font-size:var(--text-body);font-weight:300;color:rgba(245,241,232,.8);line-height:1.6;}
.rolecard-sub{font-family:var(--mono);font-size:var(--text-label);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:rgba(245,241,232,.5);margin-bottom:2px;}
@media (max-width:900px){
  .rolecard{padding:28px 24px;}
}

/* ============================================================
   Playbook resource cards (playbooks.html) — a title + description
   plus an embedded gated-download box (.docgate).
   ============================================================ */
.playbookgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--space-5);margin-top:var(--space-2);}
.playbookcard{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-6);
  background:var(--dark-card);border:1px solid rgba(255,255,255,.08);border-radius:16px;}
.playbookcard-tag{display:inline-block;align-self:flex-start;font-family:var(--mono);font-size:var(--text-label);
  font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--teal);
  background:rgba(0,181,165,.12);border-radius:100px;padding:6px 14px;margin-bottom:14px;}
.playbookcard h3{font-family:var(--serif);font-weight:400;font-size:var(--text-h3);color:var(--white);margin-bottom:var(--space-2);}
.playbookcard-body p{font-size:var(--text-body);color:rgba(245,241,232,.7);line-height:1.6;}
.playbookcard-body p.playbookcard-subtitle{font-family:var(--sans);font-weight:500;font-size:var(--text-body);
  color:rgba(245,241,232,.85);margin-bottom:14px;}

.docgate{scroll-margin-top:110px;display:flex;flex-direction:column;gap:12px;padding:22px;background:rgba(255,255,255,.03);
  border-radius:12px;border:1px solid rgba(255,255,255,.06);}
/* .docgate is a column flex container (align-items:stretch by default), so a .btn
   placed directly inside it - as on the ungated "read it on the page" playbook card,
   with no .docgate-row wrapping an input - would otherwise stretch to the container's
   full width instead of hugging its own label text. */
.docgate > .btn{align-self:flex-start;}
.docgate-label{font-family:var(--sans);font-weight:600;font-size:var(--text-body);color:var(--white);}
.docgate p{font-size:var(--text-small);color:rgba(245,241,232,.7);}
.docgate-row{display:flex;gap:10px;flex-wrap:wrap;}
.docgate-row.sent{display:none;}
.docgate-input{flex:1;min-width:180px;font-family:var(--sans);font-size:var(--text-body);color:var(--white);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:100px;
  padding:12px 18px;outline:none;transition:border-color .2s ease;}
.docgate-input::placeholder{color:rgba(245,241,232,.4);}
.docgate-input:focus{border-color:var(--teal);}
.docgate-confirm{display:none;font-family:var(--mono);font-size:var(--text-small);color:var(--teal);font-weight:600;}
.docgate-confirm.show{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.docgate-confirm a.btn{align-self:center;color:#fff;text-decoration:none;}

/* ============================================================
   Value-over-time chart (traditional vs. Usernest approach) —
   used in the "Investering & værdiskabelse" section.
   ============================================================ */
.valuechart{margin-top:32px;}
.valuechart svg{width:100%;height:auto;display:block;}
.valuechart-legend{display:flex;flex-direction:column;gap:8px;margin-top:16px;}
.valuechart-legend-row{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:var(--text-label);color:rgba(245,241,232,.6);}
.valuechart-swatch{width:20px;height:0;border-top:2px solid;flex:none;}
.valuechart-swatch.dashed{border-top-style:dashed;border-color:rgba(245,241,232,.4);}
.valuechart-swatch.solid{border-color:var(--teal);border-top-width:2.5px;}

/* Draw-on-scroll line animation — generic: any SVG line/path inside an
   element with class "draw-on-view" animates once, the first time it
   scrolls into view (see shared.js). Used by .valuechart; reusable for
   future charts. */
.draw-on-view .vc-line{stroke-dasharray:1000;stroke-dashoffset:1000;}
.draw-on-view.in-view .vc-traditional{animation:vc-draw 2.2s cubic-bezier(.4,0,.2,1) forwards;}
.draw-on-view.in-view .vc-ours{animation:vc-draw 1.3s cubic-bezier(.4,0,.2,1) forwards;animation-delay:.15s;}
@keyframes vc-draw{to{stroke-dashoffset:0;}}
@media (prefers-reduced-motion: reduce){
  .draw-on-view .vc-line{stroke-dashoffset:0;animation:none!important;}
}

/* ============================================================
   Decorative "built for Europe" media panel — abstract mark,
   not a stock photo (no licensed imagery to draw on yet).
   ============================================================ */
.europe-media{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;
  background:linear-gradient(155deg,var(--teal-dim),var(--dark));
  display:flex;align-items:center;justify-content:center;}
.europe-media .tag{font-family:var(--mono);font-size:var(--text-label);color:rgba(255,255,255,.7);
  letter-spacing:.14em;text-transform:uppercase;position:absolute;top:24px;left:24px;}
.europe-media .ring{width:52%;height:auto;}
@media (max-width:900px){.europe-media{min-height:220px;}}

/* ============================================================
   "Udfordringen" fact-box — sourced stats on European cloud
   dependency, next to the section's intro text.
   ============================================================ */
.challenge-facts{background:rgba(255,255,255,.035);border-radius:20px;padding:var(--space-6);
  display:flex;flex-direction:column;gap:var(--space-5);justify-content:center;}
.challenge-facts .stat{padding-top:20px;border-top:1px solid rgba(255,255,255,.1);}
.challenge-facts .stat:first-child{padding-top:0;border-top:none;}
.challenge-facts .source{font-family:var(--mono);font-size:var(--text-label);color:rgba(255,255,255,.45);
  letter-spacing:.06em;margin-top:4px;}
@media (max-width:900px){.challenge-facts{padding:28px 26px;}}

/* 4-card grids drop to one column on phones: two columns is too narrow for
   mono h3 titles like "Kommercielle strateger" and overflows the page. */
@media (max-width:560px){.cardgrid.cols-4{grid-template-columns:1fr;}}

/* ============================================================
   Team note — one-line statement under the "Ét hold, fire
   fagligheder" card grid on samarbejde.html (light/light-mid bg).
   ============================================================ */
.team-note{margin-top:var(--space-6);max-width:720px;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.35;color:var(--dark);text-wrap:balance;}

/* ============================================================
   Mint section — solid-fill accent section (white text) on
   derfor-usernest.html, carrying two big sourced stats (.bigstats) + a pivot line.
   ============================================================ */
.mint-sec{background:var(--mint);color:#fff;}
.mint-sec .eyebrow{color:rgba(255,255,255,.8);}
.mint-sec .sechead h2{color:#fff;}
.mint-sec .sechead p{color:rgba(255,255,255,.85);}
.bigstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8);margin-top:var(--space-3);}
.bigstat{display:flex;flex-direction:column;}
.bigstat-num{font-family:var(--serif);font-weight:400;font-size:clamp(5.5rem,11vw,9.5rem);
  line-height:.85;letter-spacing:-0.045em;color:#fff;font-variant-numeric:tabular-nums;margin-bottom:26px;}
.bigstat h2{color:#fff;font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.15;max-width:22ch;}
.bigstat p{margin-top:var(--space-4);font-size:var(--text-lead);color:rgba(255,255,255,.9);max-width:46ch;}
.bigstat-src{margin-top:auto;padding-top:var(--space-6);font-family:var(--mono);font-size:var(--text-label);letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.78);}
.bigstat-src::before{content:"";display:block;height:1px;background:rgba(255,255,255,.35);margin-bottom:14px;}
.bigstat-pivot{margin-top:70px;padding-top:30px;border-top:1px solid rgba(255,255,255,.35);
  font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.25;
  color:#fff;max-width:36ch;text-wrap:balance;}
@media (max-width:800px){
  .bigstats{grid-template-columns:1fr;gap:56px;}
  .bigstat-pivot{margin-top:56px;}
}

/* ============================================================
   Panelist photo grid — real event photos (Salon panel + moderator).
   Used on salon.html inside the "Arkiv" (.dark-mid-sec) section.
   ============================================================ */
.panelgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-5);margin-top:var(--space-2);}
/* responsive rules must come AFTER the base rule above, or it silently wins */
@media (max-width:900px){.panelgrid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:520px){.panelgrid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.panelcard img{
  width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;
  filter:grayscale(1) contrast(1.05);
  transition:filter .35s cubic-bezier(.16,1,.3,1);
}
.panelcard:hover img{filter:grayscale(0) contrast(1);}
.panelcard h4{font-family:var(--serif);font-weight:400;font-size:var(--text-lead);color:var(--white);
  margin-top:14px;line-height:1.25;}
.panelcard p{font-family:var(--sans);font-weight:300;font-size:var(--text-small);color:rgba(245,241,232,.65);
  margin-top:4px;line-height:1.4;}
.panel-moderator{
  display:flex;gap:20px;align-items:flex-start;margin-top:36px;max-width:520px;
  padding:24px;border-radius:12px;background:var(--dark-card);border:1px solid rgba(255,255,255,.07);
}
.panel-moderator img{width:68px;height:68px;border-radius:50%;object-fit:cover;flex:none;filter:grayscale(1);}
.panel-moderator-label{font-family:var(--mono);font-size:var(--text-label);text-transform:uppercase;
  letter-spacing:.14em;color:var(--teal);margin-bottom:6px;}
.panel-moderator-name{font-family:var(--serif);font-size:var(--text-lead);color:var(--white);margin-bottom:6px;}
.panel-moderator p{font-family:var(--sans);font-weight:300;font-size:var(--text-small);
  color:rgba(245,241,232,.7);line-height:1.5;}

/* Real-footage video reel (autoplaying ambience clip, e.g. Salon event
   footage) — distinct from .founder-media, which is a click-to-play
   placeholder for video that hasn't been recorded yet. */
.eventreel{position:relative;aspect-ratio:21/9;border-radius:20px;overflow:hidden;background:var(--dark);}
.eventreel video{width:100%;height:100%;object-fit:cover;display:block;}
.eventreel-caption{
  position:absolute;left:24px;bottom:22px;z-index:2;
  font-family:var(--mono);font-size:var(--text-label);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.9);background:rgba(30,33,48,.55);backdrop-filter:blur(4px);
  padding:8px 16px;border-radius:100px;
}
@media (max-width:900px){.eventreel{aspect-ratio:16/9;}}

/* Horizontal-scrolling photo strip (real event photos) */
.galleryrow{display:flex;gap:14px;overflow-x:auto;margin-top:32px;padding-bottom:6px;}
.galleryrow img{height:220px;width:auto;flex:none;border-radius:10px;object-fit:cover;}
@media (max-width:600px){.galleryrow img{height:160px;}}

/* ============================================================
   PLAYBOOK DOCUMENT — long-form article view of a playbook, read
   on screen and printed to PDF via window.print(). Scoped under
   .playbook-doc so it never touches the sitewide h1/h2/h3/p/.eyebrow
   base styles used everywhere else. Component styles ported from
   the standalone print-pipeline source (playbook_body*.html).
   ============================================================ */
.playbook-doc{
  max-width:740px;margin:0 auto;
  font-family:var(--sans);font-weight:300;font-size:1rem;line-height:1.65;color:var(--ink);
}
.playbook-doc b{font-weight:600;}
.playbook-doc p{font-family:var(--sans);font-weight:300;font-size:1rem;line-height:1.65;margin:0 0 16px;color:var(--ink);}
.playbook-doc p.pb-small{font-size:var(--text-small);color:#5a5f6e;}
.playbook-doc a:not(.btn){color:var(--teal);text-decoration:none;}
.playbook-doc a:not(.btn):hover{text-decoration:underline;}
.playbook-doc sup.pb-cite{font-family:var(--mono);font-size:var(--text-label);font-weight:500;color:var(--teal);}
.playbook-doc sup.pb-cite a{color:var(--teal);}
.playbook-doc .pb-kicker{display:block;font-family:var(--mono);font-weight:500;font-size:var(--text-label);
  letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin:0 0 10px;}
.playbook-doc h2.pb-h{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3.4vw,2.3rem);
  line-height:1.2;margin:0 0 18px;text-wrap:balance;}
.playbook-doc h3.pb-h-sub{font-family:var(--mono);font-weight:700;font-size:var(--text-lead);letter-spacing:0;
  text-transform:none;color:var(--ink);margin:30px 0 10px;}
.playbook-doc .pb-section{padding:52px 0;border-top:1px solid var(--cream-mid);}
.playbook-doc .pb-section:first-child{padding-top:0;border-top:none;}
.playbook-doc .pb-divider{height:1px;background:var(--cream-mid);margin:26px 0;}

.playbook-doc .pb-pullquote{font-family:var(--serif);font-size:1.4rem;line-height:1.4;color:var(--ink);
  border-left:3px solid var(--teal);padding:4px 0 4px 20px;margin:26px 0;}

.playbook-doc .pb-factrow{display:flex;gap:14px;margin:22px 0 26px;flex-wrap:wrap;}
.playbook-doc .pb-factbox{flex:1 1 160px;background:var(--dark-card);color:var(--white);border-radius:12px;
  padding:20px 18px;border:1px solid rgba(0,181,165,.35);}
.playbook-doc .pb-factbox .fn{font-family:var(--serif);font-size:1.9rem;color:var(--teal);line-height:1;}
.playbook-doc .pb-factbox .fn .check{font-family:var(--sans);font-size:1.3rem;vertical-align:2px;}
.playbook-doc .pb-factbox .fl{font-family:var(--mono);font-size:var(--text-label);letter-spacing:.05em;
  color:rgba(255,255,255,.7);margin-top:10px;line-height:1.5;}
.playbook-doc .pb-factbox .fs{font-family:var(--mono);font-size:var(--text-label);color:var(--teal);margin-top:6px;}
.playbook-doc .pb-factbox-single{background:var(--dark-card);color:var(--white);border-radius:12px;
  padding:22px 24px;border:1px solid rgba(0,181,165,.35);display:flex;align-items:baseline;gap:16px;
  margin:22px 0 26px;flex-wrap:wrap;}
.playbook-doc .pb-factbox-single .fn{font-family:var(--serif);font-size:2.2rem;color:var(--teal);line-height:1;}
.playbook-doc .pb-factbox-single .fl{font-family:var(--mono);font-size:var(--text-label);letter-spacing:.04em;
  color:rgba(255,255,255,.75);}
.playbook-doc .pb-factbox-single .fl small{display:block;font-size:var(--text-label);color:rgba(255,255,255,.55);margin-top:4px;}

.playbook-doc .pb-illo-wrap{margin:22px 0;text-align:center;}
.playbook-doc .pb-illo-wrap svg{max-width:100%;height:auto;}
.playbook-doc .pb-illo-cap{font-family:var(--mono);font-size:var(--text-label);color:var(--teal-dim);
  letter-spacing:.05em;margin-top:10px;}

.playbook-doc .pb-phaselist{margin:20px 0 8px;}
.playbook-doc .pb-phase{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--cream-mid);align-items:flex-start;}
.playbook-doc .pb-phase:last-child{border-bottom:none;}
.playbook-doc .pb-phase .pw{font-family:var(--mono);font-weight:700;color:var(--white);background:var(--teal);
  border-radius:20px;font-size:var(--text-label);letter-spacing:.03em;padding:5px 12px;flex:none;white-space:nowrap;margin-top:2px;}
.playbook-doc .pb-phase p{margin:0;}

.playbook-doc .pb-mapcard{background:var(--white);color:var(--ink);border:1px solid var(--cream-mid);
  border-radius:12px;padding:14px 18px;margin-bottom:10px;}

.playbook-doc .pb-darkblock{background:var(--dark);color:var(--white);border-radius:16px;padding:32px 30px;margin:26px 0;}
.playbook-doc .pb-darkblock h3.pb-h-sub{color:var(--white);margin-top:0;}
.playbook-doc .pb-darkblock p{color:rgba(255,255,255,.82);}
.playbook-doc .pb-darkblock a{color:var(--teal);font-weight:600;}
.playbook-doc .pb-darkblock .pb-kicker{color:var(--teal);}
.playbook-doc .pb-darkblock .price{font-family:var(--serif);font-size:2.1rem;color:var(--teal);margin:8px 0;}

.playbook-doc .pb-appendix-item{margin-bottom:14px;}
.playbook-doc .pb-appendix-item .an{font-family:var(--mono);color:var(--teal);font-weight:700;font-size:var(--text-small);margin-right:4px;}
.playbook-doc .pb-appendix-item .at{font-weight:600;}
.playbook-doc ol.pb-sourcelist{font-size:var(--text-small);color:#5a5f6e;line-height:1.6;margin:10px 0 0;padding-left:20px;}
.playbook-doc .pb-sourcelist li{margin-bottom:4px;}

.playbook-doc .pb-toc{margin:0;padding:0;list-style:none;}
.playbook-doc .pb-toc-group{font-family:var(--mono);font-size:var(--text-label);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink);margin:18px 0 4px;}
.playbook-doc .pb-toc-group:first-child{margin-top:0;}
.playbook-doc .pb-toc-row{display:flex;align-items:baseline;gap:10px;padding:10px 0;border-bottom:1px solid var(--cream-mid);}
.playbook-doc .pb-toc-num{font-family:var(--mono);color:var(--teal);font-size:var(--text-label);width:22px;flex:none;}
.playbook-doc .pb-toc-title a{font-family:var(--sans);font-weight:500;font-size:var(--text-body);color:var(--ink);}
.playbook-doc .pb-toc-title a:hover{color:var(--teal);}

/* Sticky print bar with the "print / save as PDF" action */
.pb-print-bar{position:sticky;top:0;z-index:20;background:var(--cream);border-bottom:1px solid var(--cream-mid);}
.pb-print-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:14px;flex-wrap:wrap;}
.pb-print-bar .pb-print-label{font-family:var(--mono);font-size:var(--text-label);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);opacity:.6;}
.pb-print-btn{font-family:var(--mono);font-weight:700;font-size:var(--text-label);text-transform:uppercase;
  letter-spacing:.12em;padding:12px 26px;border-radius:100px;border:none;cursor:pointer;
  background:var(--dark);color:var(--white);display:inline-flex;align-items:center;gap:8px;
  transition:transform .35s cubic-bezier(.16,1,.3,1);}
.pb-print-btn:hover{transform:translateY(-1px);}

@media (max-width:640px){
  .playbook-doc .pb-factrow{flex-direction:column;}
  .playbook-doc .pb-darkblock{padding:26px 20px;}
}

/* ---- Print: hide chrome, restore page-per-section pagination ---- */
@media print{
  .site-nav,.mobilenav,.pagehero-ctas,.pb-print-bar,footer{display:none !important;}
  body{background:#fff !important;}
  .pagehero{padding:0 0 26px;background:none !important;color:var(--ink) !important;}
  .pagehero::before{display:none !important;}
  .pagehero h1{color:var(--ink) !important;}
  .pagehero .eyebrow{color:var(--teal) !important;}
  .pagehero p.sub{color:var(--ink) !important;}
  .pagehero .crumbs{display:none;}
  .playbook-doc{max-width:none;}
  /* No forced page-break-before on sections: with content of very uneven
     length per chapter, forcing a break reliably strands a near-empty
     "orphan" page after whichever section falls just short of the page
     boundary. Letting the browser paginate the continuous flow, with only
     the components below pinned via page-break-inside:avoid, prints
     cleanly with no manual tuning required. */
  .playbook-doc .pb-section{border-top:none;padding:0 0 20px;}
  .playbook-doc .pb-factrow,.playbook-doc .pb-factbox-single,.playbook-doc .pb-darkblock,
  .playbook-doc .pb-illo-wrap,.playbook-doc .pb-phase,.playbook-doc .pb-mapcard,
  .playbook-doc .pb-appendix-item{page-break-inside:avoid;}
  .playbook-doc .pb-kicker,.playbook-doc h2.pb-h{page-break-after:avoid;}
  .playbook-doc .pb-darkblock,.playbook-doc .pb-factbox,.playbook-doc .pb-factbox-single{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  @page{margin:18mm;}
}

/* ============================================================
   Consent checkbox under API-backed playbook and contact forms.
   ============================================================ */
.consent{display:flex;align-items:flex-start;gap:10px;margin-top:4px;}
.formcard .consent{margin:0 0 24px;}
.docgate .consent{margin-top:12px;}
.consent input[type="checkbox"]{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--teal);cursor:pointer;}
.consent label{font-family:var(--sans);font-size:var(--text-small);font-weight:300;line-height:1.5;color:rgba(245,241,232,.72);cursor:pointer;}
.consent a{color:var(--teal);text-decoration:underline;text-underline-offset:2px;}
.light .consent label, .light-mid .consent label{color:#4a4d5c;}
.light .consent a, .light-mid .consent a{color:var(--teal-dim);}
.consent.is-missing label{color:#e08bd9;}
.form-status{display:none;font-family:var(--mono);font-size:var(--text-small);font-weight:600;color:var(--teal);margin-top:var(--space-4);}
.form-status.show{display:block;}

/* ============================================================
   Language suggestion bar — replaces the old forced redirect of
   non-Danish browsers (which also redirected Google and AI agents).
   Shown only on the DA homepage, only to non-Danish browsers, and
   dismissible; never blocks or moves the page for crawlers.
   ============================================================ */
.langbar{position:relative;z-index:60;background:var(--teal);color:var(--dark);
  font-family:var(--sans);font-size:var(--text-small);font-weight:400;}
.langbar-inner{max-width:1180px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;}
.langbar a{color:var(--dark);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.langbar button{background:none;border:0;color:var(--dark);font:inherit;font-size:18px;line-height:1;cursor:pointer;padding:2px 6px;}
.langbar button:focus-visible, .langbar a:focus-visible{outline:2px solid var(--dark);outline-offset:2px;}

/* ============================================================
   Architecture figure — monolith vs composable (core-teknisk.html).
   Inline SVG visuals; captions are real HTML text (readable by agents),
   plus a screen-reader description in the figcaption.
   ============================================================ */
.archfig{margin:8px 0 0;}
.archfig-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px;}
.archfig-col{display:flex;flex-direction:column;align-items:center;gap:28px;}
.archfig .af-svg{height:clamp(260px,32vw,380px);width:auto;max-width:100%;display:block;}
.archfig-vs{font-family:var(--serif);font-size:clamp(2.6rem,5vw,4rem);color:rgba(30,33,48,.8);line-height:1;padding-bottom:70px;}
.archfig-cap{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
.archfig-key{font-family:var(--mono);font-weight:700;font-size:var(--text-small);letter-spacing:.24em;text-transform:uppercase;color:var(--dark);padding-left:.24em;}
.archfig-key-teal{color:var(--teal-dim);}
.archfig-sub{font-family:var(--sans);font-weight:300;font-size:var(--text-lead);color:#4a4d5c;}
.archfig .af-fused{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.2em;fill:rgba(255,255,255,.2);text-anchor:middle;}
.archfig .af-seam{stroke:rgba(255,255,255,.05);stroke-width:1;}
.archfig .af-lock{fill:none;stroke:rgba(255,255,255,.38);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.archfig .af-node{fill:var(--cream);stroke:var(--dark);stroke-width:3;}
.archfig .af-node-ai{stroke:var(--magenta);}
.archfig .af-ghost{fill:none;stroke:rgba(30,33,48,.28);stroke-width:1.5;stroke-dasharray:4 5;}
.archfig .af-core{fill:var(--teal);}
.archfig .af-conn{stroke:var(--teal-dim);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:0 6;opacity:.8;}
.archfig .af-lbl{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.16em;fill:var(--dark);text-anchor:middle;}
.archfig .af-lbl-core{fill:#fff;font-size:12px;letter-spacing:.18em;}
@media (max-width:760px){
  .archfig-row{grid-template-columns:1fr;gap:20px;}
  .archfig-vs{padding-bottom:0;font-size:2.4rem;text-align:center;}
  .archfig .af-mono{height:230px;}
  .archfig .af-comp{height:300px;}
}


/* ============================================================
   Roadmap band (samarbejde.html, DA+EN): deep-teal section with a
   vertical 4-step timeline (ol.roadmap) left and the .sechead right.
   DOM order is heading first (for reading order / agents); the
   timeline is moved left visually on desktop only.
   ============================================================ */
.roadmap-sec{background:var(--teal-deep);color:#fff;}
.roadmap-sec .eyebrow{color:rgba(255,255,255,.75);}
.roadmap-sec .sechead{margin-bottom:0;}
.roadmap-sec .sechead h2{color:#fff;}
.roadmap-sec .sechead p{color:rgba(255,255,255,.85);}
.split.roadmap-split{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:center;}
.roadmap-split .roadmap{order:-1;}
.roadmap{list-style:none;margin:0;padding:var(--space-3) 0 var(--space-7);position:relative;display:flex;flex-direction:column;gap:var(--space-7);}
.roadmap::before{content:"";position:absolute;left:13px;top:0;bottom:0;width:2px;border-radius:2px;background:rgba(255,255,255,.9);}
.roadmap li{position:relative;padding-left:58px;}
.roadmap li::before{content:"";position:absolute;left:0;top:-4px;width:28px;height:28px;border-radius:50%;background:var(--cream);}
.roadmap h3{font-family:var(--mono);font-weight:700;font-size:var(--text-body);line-height:1.4;letter-spacing:.01em;color:#fff;margin:0 0 var(--space-2);}
.roadmap p{font-size:var(--text-body);line-height:1.6;color:rgba(255,255,255,.85);max-width:30ch;}
@media (max-width:900px){
  .split.roadmap-split{grid-template-columns:1fr;gap:44px;}
  .roadmap-split .roadmap{order:0;}
}

/* Reusable presentation utilities replacing artifact inline declarations. */
.u-text-center{text-align:center;}
.u-italic-muted{font-style:italic;color:rgba(245,241,232,.85);}
.u-link-inherit{color:inherit;text-decoration:underline;}
.u-overflow-visible{overflow:visible;}
.u-mt-14{margin-top:14px;} .u-on-dark-muted{color:rgba(255,255,255,.82);}
.u-mt-10{margin-top:10px;} .u-link-teal-strong{color:var(--teal);font-weight:600;}
.u-mb-0{margin-bottom:0;} .u-no-decoration{text-decoration:none;} .u-pt-0{padding-top:0;}
.u-copy-centered-wide{margin-top:40px;max-width:720px;margin-inline:auto;}
.u-weight-medium{font-weight:500;} .u-mt-28{margin-top:28px;}
.u-text-center-pb-12{text-align:center;padding-bottom:12px;} .u-ml-12{margin-left:12px;}
.u-lead-wide{margin-top:32px;font-size:var(--text-lead);line-height:1.6;max-width:640px;}
.u-mt-32{margin-top:32px;}
.u-copy-muted{margin-top:32px;font-size:var(--text-body);line-height:1.6;color:rgba(245,241,232,.75);}
.u-py-48{padding-block:48px;} .u-text-16{font-size:var(--text-body);}
.u-link-teal-dim{color:var(--teal-dim);text-decoration:underline;}
.u-mt-40{margin-top:40px;} .u-mt-20{margin-top:20px;} .u-max-520{max-width:520px;}
.u-mt-28-muted{margin-top:28px;color:rgba(245,241,232,.85);}
.u-copy-narrow{max-width:460px;margin:0 auto;text-align:left;}
.u-text-teal{color:var(--teal);} .u-my-10{margin:10px 0;} .u-mt-6{margin-top:6px;}
.form-error{font-family:var(--mono);font-size:var(--text-small);color:#ffb4ad;margin-top:var(--space-4);}