/* ============================================================
   FODEN
   Samme fod som paa forsiden: logobaand, kolonner, MerchClub-baand,
   kortlogoer, jura og AI-afsnittet. Markup i partials/fod.html.
   ============================================================ */
:root {
  --paper:#FFFFFF; --ash:#F4F4F3; --ash-2:#EBEBE9; --ink-2:#4F4F52; --ink-3:#78787C;
  --dark:#101011; --dark-2:#1A1A1C; --dark-alt:#1A1A1C; --dark-mid:#4A4A4E; --dark-line:#2A2A2D;
  --bg:#FFFFFF; --bg-alt:#F4F4F3; --bg-card:#FFFFFF; --line:#E4E4E1; --line-soft:#EFEFED;
  --ink:#0B0B0C; --ink-soft:#2B2B2E; --mid:#6A6A6E; --mute:#A8A8AC;
  --accent:#E64124; --accent-2:#C4331A; --accent-soft:#F6E9E4;
  --f:'Switzer',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-sans:var(--f); --f-display:var(--f); --f-mono:'Geist Mono',ui-monospace,monospace;
  --f-hand:'Caveat','Segoe Script','Bradley Hand',cursive;
  --pad:clamp(20px,5vw,72px); --pad-x:clamp(20px,5vw,72px);
  --r:6px; --r-l:10px; --radius:6px; --radius-lg:10px; --maks:1280px;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
}

.logo-ribbon {
  position: relative;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(20px, 2.6vw, 36px) 0 clamp(22px, 2.8vw, 40px);
  overflow: hidden;
}
.logo-ribbon-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: clamp(18px, 2vw, 28px);
}
.logo-ribbon-label .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.logo-ribbon-viewport {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
}
.logo-ribbon-track {
  display: flex;
  align-items: center;
  gap: clamp(64px, 8vw, 120px);
  width: max-content;
  animation: logoMarquee 38s linear infinite;
}
.logo-ribbon img {
  height: clamp(20px, 2vw, 26px);
  width: auto;
  display: block;
  opacity: 0.42;
  filter: grayscale(1) brightness(1.1);
  transition: opacity .35s var(--ease-out), filter .35s var(--ease-out);
}
.logo-ribbon img[src*="zenegy"]  { height: clamp(18px, 1.77vw, 23px); }
.logo-ribbon img[src*="frankly"] { height: clamp(25px, 2.54vw, 33px); }
.logo-ribbon img[src*="simply"]  { height: clamp(16px, 1.58vw, 21px); }
.logo-ribbon img[src*="zoe"]     { height: clamp(12px, 1.25vw, 16px); }
.logo-ribbon img[src*="uniqkey"] { height: clamp(18px, 1.85vw, 24px); }
.logo-ribbon img[src*="juleministeriet"] { height: clamp(17px, 1.79vw, 23px); }
.logo-ribbon img[src*="epiphany"] { height: clamp(18px, 1.77vw, 23px); }
.logo-ribbon img:hover {
  opacity: 0.85;
  filter: grayscale(1) brightness(0.7);
}
.logo-ribbon:hover .logo-ribbon-track { animation-play-state: paused; }
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.footer-features {
  padding: clamp(40px, 5vw, 72px) var(--pad-x);
  border-bottom: 1px solid var(--line);
}
.ftr-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 11px;
}
.ftr-feature h5 {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.ftr-feature p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--mid);
  max-width: 26ch;
}
.footer-wordmark {
  position: relative;
  display: flex;
  justify-content: center;
  padding: clamp(40px, 5vw, 84px) var(--pad-x);
}
.footer-mark {
  display: block;
  width: min(100%, 1130px);
  color: var(--ink);
}
.footer-badge {
  position: absolute;
  top: 50%;
  left: calc(50% + min(100% - 2 * var(--pad-x), 1130px) * 0.40);
  transform: translate(-50%, calc(-52% + var(--badge-shift, 0px))) rotate(-7deg);
  padding: 20px 26px;
  color: #E8EFE9;
  border-radius: 17px;
  /* Den laa helt flad, mens sitets andre stickers har lys og tykkelse.
     Fire lag, ingen billedfil: lyset falder oppefra venstre, som det goer
     paa resten af siden; et svagt skaer paa skraa, som vinyl har; en lys
     kant foroven, hvor snittet fanger lyset; og en moerk kant forneden,
     saa den faar tykkelse i stedet for at ligne et farvet felt. */
  background:
    linear-gradient(148deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.02) 34%, rgba(255,255,255,0) 58%),
    radial-gradient(130% 95% at 20% 6%, rgba(255,255,255,.12), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, #387C53 0%, #2F6B47 48%, #275A3C 100%);
  box-shadow:
    0 26px 52px -20px rgba(0,0,0,0.5),
    0 2px 6px rgba(0,0,0,0.18),
    inset 0 1.5px 0 rgba(255,255,255,.24),
    inset 0 -2px 0 rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.07);
  will-change: transform;
}
.badge-seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.badge-kicker, .badge-base {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(232,239,233,0.82);
}
.badge-ring {
  width: 46px; height: 46px;
  border: 1.5px solid #E8EFE9;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.badge-ring .badge-flag { width: 20px; height: auto; display: block; }
.footer-main {
  display: grid;
  /* minmax(0, ...) og ikke bare 1.05fr: en fr-bane har min-width:auto, saa
     den naegter at blive smallere end sit indhold. De fire kolonner har en
     mindstebredde paa ca. 593px, og mellem 861 og 959px skoed foden derfor
     ud over hoejre kant paa hver eneste side. */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 2.7fr);
  gap: clamp(28px, 4vw, 60px);
  padding: clamp(36px, 4vw, 56px) var(--pad-x);
  border-top: 1px solid var(--line);
}
.footer-newsletter {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-right: clamp(20px, 3vw, 52px);
  border-right: 1px solid var(--line);
}
.footer-newsletter h5,
.footer-col h5 {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 3px;
}
.ftr-signup {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 9px;
}
.ftr-signup input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: none;
}
.ftr-signup input::placeholder { color: var(--mute); }
.ftr-signup button {
  font-size: 17px;
  line-height: 1;
  color: var(--ink);
  transition: transform .25s var(--ease-out);
}
.ftr-signup button:hover { transform: translateX(3px); }
.ftr-consent {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
}
.footer-socials {
  display: flex;
  gap: 9px;
  margin-top: 6px;
}
.footer-socials a {
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.footer-socials a:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.footer-socials svg { width: 15px; height: 15px; }
.footer-cols {
  display: grid;
  /* Samme faelde et niveau nede: 1fr er minmax(auto, 1fr), saa hver af de
     fire kolonner naegter at blive smallere end sit laengste ord. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.footer-col ul { display: flex; flex-direction: column; gap: 9px; }
.footer-col li { font-size: 13.5px; line-height: 1.45; }
.footer-col a { color: var(--ink-soft); transition: color .2s var(--ease); }
.footer-col a:hover { color: var(--ink); }
.footer-col .ftr-plain { color: var(--mid); }
.footer-corow {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: var(--ink);
  color: var(--bg);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.footer-corow .fc-left {
  padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
  position: relative;
}
.footer-corow .fc-eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.footer-corow .fc-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(46px, 5.6vw, 92px);
  line-height: 0.92;
  letter-spacing: -0.022em;
  color: var(--bg);
}
.footer-corow .fc-title .it { font-style: italic; color: var(--accent); }
.footer-corow .fc-sub {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.5;
  color: rgba(242, 241, 237, 0.78);
  max-width: 46ch;
}
.footer-corow .fc-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  align-self: flex-start; margin-top: 6px;
  min-height: 52px; padding: 0 26px; border-radius: var(--r);
  background: var(--bg); color: var(--ink);
  font-size: 15px; font-weight: 550; letter-spacing: -.01em;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.footer-corow:hover .fc-cta { background: var(--accent); color: #fff; }
.footer-corow .fc-right {
  position: relative;
  background: var(--dark-alt, #1F1E1A);
  min-height: 280px;
  overflow: hidden;
}
.footer-corow .fc-right img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.85;
  transition: transform .8s var(--ease-out), opacity .4s var(--ease);
}
.footer-corow:hover .fc-right img { transform: scale(1.04); opacity: 1; }
.footer-corow .fc-stk {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,0.35));
}
.footer-corow .fc-stk-1 {
  top: 22px; right: 26px;
  background: var(--accent); color: var(--bg);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  padding: 13px 17px; border-radius: 11px;
  box-shadow: inset 0 0 0 2.5px rgba(255,255,255,.55), inset 0 0 0 4px var(--accent);
  transform: rotate(7deg);
  font-weight: 500; line-height: 1.2; text-align: center;
}
.footer-corow .fc-stk-2 {
  bottom: 24px; left: 28px;
  background: var(--bg); color: var(--ink); border: 1px solid var(--ink);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 13px; line-height: 1.4;
  transform: rotate(-4deg);
}
.footer-corow .fc-stk-2 .bc {
  display: block; height: 9px; margin-top: 5px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px);
}
.footer-legal {
  padding: clamp(20px, 2.4vw, 32px) var(--pad-x) clamp(30px, 3.4vw, 48px);
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--mid);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
}
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-legal-links a { color: var(--ink-soft); transition: color .2s var(--ease); }
.footer-legal-links a:hover { color: var(--ink); }
.footer-legal-entity { color: var(--mid); }
.footer-cards { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.footer-cards img {
  width: 36px; height: 18px; object-fit: contain; box-sizing: content-box;
  padding: 5px 9px; border-radius: 6px;
  background: var(--bg-card); border: 1px solid var(--line);
}
/* De her ni regler laa paa forsiden inde i et @media (max-width: 860px).
   Da foden blev trukket ud i sin egen fil, faldt indpakningen vaek, og saa
   gjaldt mobilreglerne ved ALLE bredder: foden stod i to spalter paa en
   skaerm i stedet for fire, paa hver eneste underside. Forsiden havde sin
   egen kopi og saa derfor rigtig ud - derfor var det svaert at faa oeje paa. */
@media (max-width: 860px) {
  .footer-features { grid-template-columns: repeat(2, 1fr); gap: 30px 24px; }
  .footer-main { grid-template-columns: 1fr; gap: 32px; }
  .footer-newsletter {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-right: 0;
    padding-bottom: 30px;
  }
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 30px 24px; }
  /* Ingen 'left' her. Forsiden overskriver med 64% i det her @media, men
     grundreglen ovenfor bruger en calc, der foelger indholdets bredde -
     den er bedre, og en procentsats ville slaa den ihjel. Kun padding. */
  .footer-badge { padding: 16px 20px; }
  .badge-ring { width: 38px; height: 38px; }
  .badge-ring .badge-flag { width: 17px; }
}
.how-steps {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.how-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  padding: 0 clamp(16px, 1.8vw, 28px);
  border-left: 1px solid var(--line);
}
/* Stregen adskiller to trin. Foran det foerste er der ikke noget at
   adskille, og saa staar den bare i yderkanten. */
.how-step:first-child { border-left: 0; }
.how-step-ico {
  flex-shrink: 0;
  width: 24px; height: 24px;
  color: var(--ink);
}
.how-step-ico svg { width: 24px; height: 24px; display: block; }
.how-step-text {
  font-size: 13px;
  line-height: 1.32;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.how-step-text b {
  display: block;
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 3px;
}
.btn-dark:hover .bl-c .bl-top, .kitcard-cta:hover .bl-c .bl-top,
.product-config:hover .bl-c .bl-top, .cfg-go:hover .bl-c .bl-top,
.drawer-foot .checkout:hover .bl-c .bl-top, .feat-btn:hover .bl-c .bl-top,
.footer-corow:hover .fc-cta .bl-c .bl-top, .btn-ghost:hover .bl-c .bl-top,
.pg-cta:hover .bl-c .bl-top, .pg-cta:hover .bl-c .bl-bot,
.btn:hover .bl-c .bl-top, .btn:hover .bl-c .bl-bot,
.btn-dark:hover .bl-c .bl-bot, .kitcard-cta:hover .bl-c .bl-bot,
.product-config:hover .bl-c .bl-bot, .cfg-go:hover .bl-c .bl-bot,
.drawer-foot .checkout:hover .bl-c .bl-bot, .feat-btn:hover .bl-c .bl-bot,
.footer-corow:hover .fc-cta .bl-c .bl-bot, .btn-ghost:hover .bl-c .bl-bot {
  transform: translateY(-100%);
  transition-delay: var(--d, 0ms);
}
.btn-dark:hover .bl-c .bl-top, .kitcard-cta:hover .bl-c .bl-top,
.product-config:hover .bl-c .bl-top, .cfg-go:hover .bl-c .bl-top,
.drawer-foot .checkout:hover .bl-c .bl-top, .feat-btn:hover .bl-c .bl-top,
.footer-corow:hover .fc-cta .bl-c .bl-top, .btn-ghost:hover .bl-c .bl-top,
.pg-cta:hover .bl-c .bl-top, .btn:hover .bl-c .bl-top { opacity: 0; }
.btn-dark:hover .bl-c .bl-bot, .kitcard-cta:hover .bl-c .bl-bot,
.product-config:hover .bl-c .bl-bot, .cfg-go:hover .bl-c .bl-bot,
.drawer-foot .checkout:hover .bl-c .bl-bot, .feat-btn:hover .bl-c .bl-bot,
.footer-corow:hover .fc-cta .bl-c .bl-bot, .btn-ghost:hover .bl-c .bl-bot,
.pg-cta:hover .bl-c .bl-bot, .btn:hover .bl-c .bl-bot { opacity: 1; }
.stk {
  position: absolute; z-index: 5; pointer-events: none;
  
  transform: translate(var(--nx, 0px), calc(var(--p-shift, 0px) + var(--ny, 0px))) rotate(var(--r, -5deg));
  filter: drop-shadow(0 3px 6px rgba(11,11,12,0.07));
  user-select: none; will-change: transform;
  transition: transform .15s linear;
}
.stk-patch {
  background: var(--accent); color: var(--bg);
  font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 500;
  padding: 15px 21px; border-radius: 11px;
  box-shadow: inset 0 0 0 2.5px rgba(255,255,255,0.55), inset 0 0 0 4px var(--accent);
  text-align: center; line-height: 1.22; max-width: 180px;
}
.stk-patch.dark {
  background: var(--ink);
  box-shadow: inset 0 0 0 2.5px rgba(255,255,255,0.3), inset 0 0 0 4px var(--ink);
}
.stk-seal {
  width: 118px; height: 118px; border-radius: 50%;
  background: var(--ink); color: var(--bg);
  display: grid; place-items: center; text-align: center;
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1.5px var(--ink), inset 0 0 0 5px var(--bg), inset 0 0 0 6.5px var(--ink);
  padding: 17px; line-height: 1.3;
}
.stk-seal.accent {
  background: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent), inset 0 0 0 5px var(--bg), inset 0 0 0 6.5px var(--accent);
}
.stk-stamp {
  border: 2.5px solid var(--accent); color: var(--accent);
  font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 500;
  padding: 12px 19px; border-radius: 6px;
  background: rgba(230,65,36,0.04);
  filter: drop-shadow(0 2px 4px rgba(230,65,36,0.09));
  opacity: 0.92;
}
.stk-stamp.ink {
  border-color: var(--ink); color: var(--ink);
  background: rgba(14,14,12,0.04);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.07));
}
.stk-note {
  font-family: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  font-size: 30px; color: var(--ink);
  background: none; filter: none; line-height: 1; font-weight: 600;
}
.stk-note.accent { color: var(--accent); }
.stk-note.lys { color: rgba(255,255,255,.92); }
.stk-kant { top: 0; margin-top: -.62em; }
.stk-tag, .stk-label, .stk-patch {
  
  isolation: isolate;
  box-shadow: 0 0 0 3px #fff, 0 2px 7px -4px rgba(11,11,12,.20);
  border-radius: 4px;
}
.stk-tag::after, .stk-label::after, .stk-patch::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    
    linear-gradient(101deg,
      rgba(24,22,20,0) 16%, rgba(24,22,20,.30) 25%, rgba(24,22,20,.07) 30%,
      rgba(24,22,20,0) 36%),
    linear-gradient(101deg,
      rgba(24,22,20,0) 54%, rgba(24,22,20,.22) 64%, rgba(24,22,20,.05) 69%,
      rgba(24,22,20,0) 77%),
    
    radial-gradient(130% 160% at 50% 128%, rgba(24,22,20,.13) 0%, rgba(24,22,20,0) 48%),
    
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)' opacity='.66'/%3E%3C/svg%3E");
  background-size: auto, auto, auto, 90px 90px;
  mix-blend-mode: multiply; opacity: .62;
}
.stk-badge::after {
  content: ""; position: absolute; inset: 7%; pointer-events: none; border-radius: 50%;
  background:
    
    linear-gradient(101deg,
      rgba(24,22,20,0) 16%, rgba(24,22,20,.30) 25%, rgba(24,22,20,.07) 30%,
      rgba(24,22,20,0) 36%),
    linear-gradient(101deg,
      rgba(24,22,20,0) 54%, rgba(24,22,20,.22) 64%, rgba(24,22,20,.05) 69%,
      rgba(24,22,20,0) 77%),
    
    radial-gradient(130% 160% at 50% 128%, rgba(24,22,20,.13) 0%, rgba(24,22,20,0) 48%),
    
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)' opacity='.66'/%3E%3C/svg%3E");
  background-size: auto, auto, auto, 90px 90px;
  mix-blend-mode: multiply; opacity: .62;
}
.stk-badge .bdg { filter: drop-shadow(0 0 1.6px #fff) drop-shadow(0 0 1.6px #fff) drop-shadow(0 3px 7px rgba(11,11,12,.15)); }
.stk-note { font-size: clamp(20px, 2vw, 27px); }
.stk-badge { background: none; box-shadow: none; padding: 0; border: 0; }
.bdg { display: block; overflow: visible; }
.bdg-seal   { width: 118px; }
.bdg-ribbon { height: 62px; width: auto; }
.bdg-stamp  { width: 112px; }
.b-fill { fill: var(--ink); }
.b-tail { fill: var(--ink); filter: brightness(.5); }
.b-ring { fill: none; stroke: var(--bg); stroke-width: 1.5; }
.b-ring.thin { stroke-width: .6; opacity: .7; }
.b-rule { stroke: var(--bg); stroke-width: .8; fill: none; opacity: .75; }
.b-mark, .b-star { fill: var(--bg); }
.b-arc {
  fill: var(--bg); font-family: var(--f-mono); font-size: 5.4px;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
}
.b-txt {
  fill: var(--bg); font-family: var(--f-mono); font-size: 15px;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
}
.bdg-stamp .b-txt { font-size: 11.5px; letter-spacing: .09em; }
.b-sub {
  fill: var(--bg); opacity: .72; font-family: var(--f-mono);
  font-size: 6.8px; letter-spacing: .15em; text-transform: uppercase;
}
.stk-badge.accent .b-fill, .stk-badge.accent .b-tail { fill: var(--accent); }
.stk-badge.accent .b-tail { filter: brightness(.72); }
.stk-badge.cream .b-fill { fill: var(--bg); }
.stk-badge.cream .b-tail { fill: var(--bg); filter: brightness(.88); }
.stk-badge.cream .b-ring, .stk-badge.cream .b-rule { stroke: var(--ink); }
.stk-badge.cream .b-arc, .stk-badge.cream .b-txt,
.stk-badge.cream .b-mark, .stk-badge.cream .b-star,
.stk-badge.cream .b-sub { fill: var(--ink); }
.stk-tag {
  color: var(--ink);
  background: var(--bg-card); border: 1px solid var(--ink); border-radius: 3px;
  padding: 12px 19px 12px 33px;
  font-family: var(--f-mono); font-size: 11.5px;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.stk-tag::before {
  content: ""; position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--ink); background: var(--bg);
}
.ftr-note{ display:block; margin-top:8px; font-size:12.5px; color: var(--mid); }
.ftr-note.ok{ color:#9BD4A6; }
.ftr-note.err{ color:#F0A08C; }
.footer-agents {
  border-top: 1px solid var(--line);
  padding: clamp(56px, 8vw, 104px) clamp(20px, 4vw, 56px);
}
.footer-agents-inner { max-width: 1400px; margin: 0 auto; }
.footer-agents .fa-eyebrow {
  display: block;
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--mid); margin-bottom: clamp(18px, 2.4vw, 30px);
}
.footer-agents p {
  margin: 0;
  font-size: clamp(24px, 3.6vw, 52px);
  line-height: 1.14; letter-spacing: -0.02em;
  color: var(--mid); font-weight: 400;
  max-width: 46ch;
}
.footer-agents a {
  color: var(--ink); font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
  white-space: nowrap;
}
.footer-agents a:hover { border-bottom-color: var(--ink); }
.footer-agents a .fa-arrow { display: inline-block; transition: transform .2s ease; }
.footer-agents a:hover .fa-arrow { transform: translateX(3px); }
#konfigurator, #loesninger, #onboarding, .directory, #faq, .logo-ribbon,
#pakker, #saadan { overflow: visible; }
.stk { z-index: 5; }
.fa-filer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fa-filer a {
  min-height: 40px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 12.5px;
  padding: 9px 14px; border-radius: var(--r);
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
  text-decoration: none; color: var(--ink);
  transition: box-shadow .16s var(--ease);
}
.fa-filer a:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.fa-filer a:hover .ar::before { animation: arrowLoop .58s cubic-bezier(.5,0,.2,1); }
.fa-filer a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.site-footer .ftr-signup {
  display: flex; align-items: center; gap: 8px;
  background: var(--paper); border: 0; border-bottom: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--r); padding: 5px 5px 5px 14px; max-width: 340px;
  transition: box-shadow .18s var(--ease);
}
.site-footer .ftr-signup:focus-within { box-shadow: inset 0 0 0 1px var(--ink); }
.site-footer .ftr-signup input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font: inherit; font-size: 14.5px; color: var(--ink); padding: 11px 0;
}
.site-footer .ftr-signup input::placeholder { color: var(--ink-3); }
.site-footer .ftr-signup button {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; border-radius: 4px; cursor: pointer;
  background: var(--accent); color: #fff;
  transition: background .18s var(--ease);
}
.site-footer .ftr-signup button:hover { background: var(--accent-2); }
.site-footer .ftr-signup button:hover .ar::before { animation: arrowLoop .58s cubic-bezier(.5,0,.2,1); }
.site-footer .ftr-signup button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.footer-corow:hover .fc-cta .bl-c .bl-top { transform: translateY(-100%); opacity: 0; transition-delay: var(--d, 0ms); }
.footer-corow:hover .fc-cta .bl-c .bl-bot { transform: translateY(-100%); opacity: 1; transition-delay: var(--d, 0ms); }
section > .stk { z-index: 1; }
.site-footer .ftr-h {
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mute);
  margin-bottom: 14px;
}

/* Fodens lister er navigation, ikke broedtekst - ingen punkttegn. */
.site-footer ul, .footer-agents ul { list-style: none; margin: 0; padding: 0; }
.site-footer li, .footer-agents li { margin: 0; }

/* ============================================================
   DET, DER KUN LAA PAA FORSIDEN

   Fundet ved at sammenligne hver eneste fod-regel paa forsiden med den
   her fil. Alt herunder fandtes kun dér, saa foden var ikke den samme to
   steder. Vaerst var det runde ikon paa "Besoeg klubben": uden det var
   knappen bare tekst.
   ============================================================ */
.footer-col .ftr-h {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 3px;
}
.footer-corow h1, .footer-corow h2, .footer-corow h3 { color: inherit; }
.footer-corow .fc-cta {
  font-family: var(--f);
  text-transform: none;
}
.footer-corow .fc-cta .ic {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-size: 14px;
  transition: background .25s var(--ease), transform .3s var(--ease);
}
.footer-corow:hover .fc-cta .ic {
  background: var(--bg);
  color: var(--accent);
  transform: translateX(3px);
}
/* Logoerne i baandet er maalt op enkeltvis, saa bogstavkroppene syner lige
   store. To af dem naaede ikke med over. */
.logo-ribbon img[alt="Frankly"] { height: clamp(24px, 2.4vw, 32px); }
.logo-ribbon img[alt="Zoe"]     { height: clamp(16px, 1.6vw, 21px); }
@media (prefers-reduced-motion: reduce) {
  .bl-c { transition: none; }
}

/* ============================================================
   FODEN STAAR FOR SIG SELV

   Forsiden har foden inde i sin egen <style> og har ingen generelle
   regler for h3, ul, li eller p. Undersiderne laeser assets/side.css,
   som HAR dem - og de sivede ned i foden: overskrifterne fik 26 px luft
   over sig og en anden linjehoejde, listerne fik daempet tekstfarve, og
   knappen faldt tilbage til Arial.

   Derfor staar det, foden selv bestemmer, her. Saa kan et stilark uden
   for foden ikke aendre den, og foden er den samme paa alle sider.
   ============================================================ */
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  /* 1.1 - ikke 'inherit'. Forsiden har h1-h5 { line-height: 1.1 }, og med
     'inherit' arvede overskrifterne i stedet brødtekstens 1,55. Saa blev
     spaltetitlerne 16 px hoeje i stedet for 12. */
  line-height: 1.1;
  letter-spacing: inherit;
  color: inherit;
}
.site-footer p { margin: 0; color: inherit; }
.site-footer ul, .site-footer ol { margin: 0; padding: 0; list-style: none; color: inherit; }
.site-footer li { margin: 0; color: inherit; }
/* Kun skriften, ikke hele font-genvejen. 'font: inherit' nulstiller ogsaa
   stoerrelse og linjehoejde, og saa tabte .ftr-signup button sine 17 px til
   foden - de to regler er lige staerke, saa den sidste vandt. Det eneste,
   der faktisk manglede, var skrifttypen: knappen faldt tilbage til Arial. */
.site-footer button, .site-footer select, .site-footer textarea {
  font-family: inherit;
}
/* Overskrifterne i foden saetter selv deres skrift bagefter. Vaerdierne er
   forsidens egne, ord for ord - ikke gættet. To regler, praecis som dér:
   den generelle, og den skarpere for spaltetitlerne. */
.site-footer .ftr-h {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 14px;
}
/* .footer-col .ftr-h staar laengere nede med forsidens egen specificitet.
   Den TABER med vilje til .site-footer .ftr-h ovenfor - praecis som paa
   forsiden, hvor raekkefoelgen afgoer det. Skriver man den skarpere her,
   vinder den, og saa er spaltetitlerne 11 px paa undersiderne og 10,5 paa
   forsiden. */

/* ============================================================
   SKAERMBREDDER
   Til sidst, saa de kan overskrive grundreglerne ovenfor.
   ============================================================ */
@media (max-width: 720px) {
  .logo-ribbon-track { animation-duration: 16s; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-ribbon-track { animation: none; justify-content: space-around; width: 100%; }
}
@media (max-width: 860px) {
  .footer-corow { grid-template-columns: 1fr; }
  .footer-corow .fc-right { min-height: 220px; }
}
@media (max-width: 620px) {
  .footer-badge { padding: 11px 13px; border-radius: 13px; }
  .badge-kicker, .badge-base { font-size: 10px; letter-spacing: 0.1em; }
}
@media (max-width: 620px) {
  .badge-ring { width: 26px; height: 26px; border-width: 1.2px; }
  .badge-ring .badge-flag { width: 12px; }
  .badge-seal { gap: 5px; }
}
@media (max-width: 480px) {
  .footer-features { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  .how-steps { width: 100%; grid-template-columns: repeat(2, 1fr); gap: 24px 32px; }
  .how-step { border-left: 0; padding: 0; }
}
@media (max-width: 520px) {
  .how-steps { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; }
}
@media (max-width: 680px) {
  .stk { display: none; }
}
@media (max-width: 1023px) {
  section > .stk { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-c .bl-top, .bl-c .bl-bot { transition: none !important; }
}
@media (max-width: 620px) {
  .stk-skjul-mobil { display: none; }
}

/* Badgen sidder centreret om et punkt 40% ude til hoejre. Paa en telefon
   ligger det punkt saa langt ude, at dens hoejre halvdel hang uden for
   skaermen og gjorde hele siden rulbar sidelaens. Under 520px forankres
   den til hoejre kant i stedet - saa er der ingen procenter at tage fejl af. */
@media (max-width: 520px) {
  .footer-badge {
    left: auto;
    right: var(--pad-x);
    transform: translate(0, calc(-52% + var(--badge-shift, 0px))) rotate(-7deg);
  }
}

/* Vejen videre til produktsiderne, under "Byg jeres egen pakke". Et tekstlink
   og ikke en knap til: der er allerede en knap, og det her er for dem, der
   vil laese om varerne foerst. */
.vej-link { margin: 12px 0 0; font-size: 13.5px; }
.vej-link a { color: var(--mid); text-decoration: underline; text-underline-offset: 3px; }
.vej-link a:hover { color: var(--ink); }