:root{
    --canvas:#FAFAFA;
    --ink:#111111;
    --surface:#F1F1F1;
    --pillar:#E62327;
    --line:rgba(17,17,17,.10);
    --line-strong:rgba(17,17,17,.22);
    --ink-70:rgba(17,17,17,.70);
    --ink-50:rgba(17,17,17,.50);

    --display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
    --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
    --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

    --shell:1440px;
  }

  *,*::before,*::after{box-sizing:border-box}

  html{scroll-behavior:smooth}

  body{
    margin:0;
    background:var(--canvas);
    color:var(--ink);
    font-family:var(--body);
    font-size:14px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}

  a{color:inherit}

  .shell{
    max-width:var(--shell);
    margin:0 auto;
    border-left:1px solid var(--line);
    border-right:1px solid var(--line);
    border-top:3px solid var(--pillar);
  }

  /* ---------- language switch ----------
     Scoped under `body` deliberately. An unscoped [lang="en"] selector also
     matches the <html> element itself, so the moment the switch set
     html lang="en" the whole document got display:none and rendered blank.
     `display:revert` restores each element's natural display rather than
     forcing inline or block per tag. */
  body [lang="en"]{display:none}
  html[lang="en"] body [lang="da"]{display:none}
  html[lang="en"] body [lang="en"]{display:revert}

  .langbar{
    display:flex;justify-content:flex-end;align-items:center;gap:0;
    border-bottom:1px solid var(--line);
  }
  .langbtn{
    font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    background:none;border:0;border-left:1px solid var(--line);
    padding:10px 18px;cursor:pointer;color:var(--ink-50);
  }
  .langbtn[aria-pressed="true"]{color:var(--pillar);font-weight:500}
  .langbtn:hover{color:var(--ink)}
  .langbtn:focus-visible{outline:2px solid var(--pillar);outline-offset:-2px}

  /* ---------- nav ---------- */
  .nav{
    display:grid;grid-template-columns:1fr auto;align-items:stretch;
    border-bottom:1px solid var(--line);min-height:64px;
  }
  .wordmark{
    font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.04em;
    display:flex;align-items:center;padding:0 40px;
  }
  .wordmark i{color:var(--pillar);font-style:normal;font-size:1.15em;line-height:0}
  .navlinks{display:flex;align-items:stretch}
  .navlinks a{
    display:flex;align-items:center;padding:0 24px;
    font-family:var(--mono);font-size:11px;letter-spacing:.06em;
    text-decoration:none;color:var(--ink-70);
    border-left:1px solid var(--line);transition:color .12s;
  }
  .navlinks a:hover{color:var(--pillar)}
  .navlinks a.cta{
    background:var(--pillar);color:#fff;font-weight:500;
    transition:background .12s;
  }
  .navlinks a.cta:hover{background:var(--ink);color:var(--canvas)}

  /* ---------- hero ---------- */
  .hero{display:grid;grid-template-columns:4fr 8fr;border-bottom:1px solid var(--line)}
  .hero > div{padding:40px}
  .hero-left{
    display:flex;flex-direction:column;justify-content:space-between;gap:48px;
    border-left:3px solid var(--pillar);margin-left:-3px;
  }
  .hero-right{
    border-left:1px solid var(--line);
    background-image:radial-gradient(rgba(17,17,17,.08) 1px,transparent 1px);
    background-size:24px 24px;
    display:flex;flex-direction:column;justify-content:space-between;gap:48px;
  }
  .tag{
    font-family:var(--mono);font-size:11px;font-weight:500;
    letter-spacing:.12em;text-transform:uppercase;color:var(--pillar);
  }
  .hero h1{
    font-size:clamp(40px,6vw,72px);font-weight:700;
    line-height:.95;letter-spacing:-.04em;text-transform:uppercase;
  }
  .lede{
    font-size:clamp(17px,2vw,23px);font-weight:300;line-height:1.45;
    letter-spacing:-.01em;color:var(--ink);max-width:60ch;margin:0 0 32px;
  }
  .textlink{
    display:inline-block;font-family:var(--mono);font-size:13px;font-weight:500;
    color:var(--pillar);text-decoration:none;
    border-bottom:1px solid var(--pillar);padding-bottom:3px;transition:.12s;
  }
  .textlink:hover{color:var(--ink);border-color:var(--ink)}

  /* ---------- ingestion lattice ---------- */
  .ticker{
    display:grid;grid-template-columns:repeat(8,1fr);
    background:var(--surface);border-bottom:1px solid var(--line);
  }
  .ticker span{
    padding:22px 8px;text-align:center;
    font-family:var(--mono);font-size:11px;font-weight:500;color:var(--ink-50);
    border-right:1px solid var(--line);transition:.12s;
  }
  .ticker span:last-child{border-right:0}
  .ticker span:hover{background:var(--canvas);color:var(--pillar)}
  .ticker:hover span{color:var(--ink-70)}
  .ticker span:nth-child(4){color:var(--pillar)}

  /* ---------- matrix ---------- */
  .matrix{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
  .matrix > div{padding:48px 40px}
  .matrix > div + div{border-left:1px solid var(--line)}
  .matrix h3{
    font-size:22px;font-weight:700;text-transform:uppercase;
    letter-spacing:-.02em;margin:24px 0 24px;
  }
  .matrix ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
  .matrix li{position:relative;padding-left:26px;font-size:15px;color:var(--ink-70);line-height:1.55}
  .matrix li::before{position:absolute;left:0;top:0;font-family:var(--mono)}
  .drift li::before{content:"—";color:var(--ink-50)}
  .standard{border-top:3px solid var(--pillar);margin-top:-1px}
  .standard h3{color:var(--pillar)}
  .standard li{color:var(--ink)}
  .standard li::before{content:"→";color:var(--pillar);font-weight:700}

  /* ---------- compliance ---------- */
  .compliance{
    display:grid;grid-template-columns:repeat(4,1fr);
    border-top:3px solid var(--pillar);
  }
  .cell{
    padding:36px 32px;min-height:190px;
    display:flex;flex-direction:column;justify-content:space-between;gap:20px;
    border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  }
  .cell:last-child{border-right:0}
  .cell .k{
    font-family:var(--mono);font-size:11px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-50);transition:color .12s;
  }
  .cell:hover .k{color:var(--pillar)}
  .cell .v{
    font-family:var(--display);font-size:18px;font-weight:600;
    text-transform:uppercase;letter-spacing:-.02em;line-height:1.2;
  }
  .cell .n{font-size:12.5px;color:var(--ink-50);line-height:1.5}

  /* ---------- provenance + footer ---------- */
  .provenance{padding:40px;border-bottom:1px solid var(--line);}
  .provenance p{max-width:78ch;color:var(--ink-70);font-size:15px;margin:14px 0 0}
  .foot{
    display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;
    padding:24px 40px;font-family:var(--mono);font-size:11px;color:var(--ink-50);
    border-top:3px solid var(--pillar);
  }

  @media (max-width:900px){
    .hero{grid-template-columns:1fr}
    .hero-right{border-left:0;border-top:1px solid var(--line)}
    .ticker{grid-template-columns:repeat(4,1fr)}
    .ticker span:nth-child(4n){border-right:0}
    .ticker span:nth-child(-n+4){border-bottom:1px solid var(--line)}
    .matrix{grid-template-columns:1fr}
    .matrix > div + div{border-left:0;border-top:1px solid var(--line)}
    .compliance{grid-template-columns:1fr 1fr}
    .cell:nth-child(2n){border-right:0}
    .nav{grid-template-columns:1fr}
    .navlinks{flex-wrap:wrap;border-top:1px solid var(--line)}
    .navlinks a{border-left:0;border-right:1px solid var(--line)}
    .wordmark{padding:16px 24px}
    .hero > div,.matrix > div,.provenance{padding:28px 24px}
    .foot{padding:20px 24px}
  }
  @media (max-width:520px){
    .ticker{grid-template-columns:repeat(2,1fr)}
    .ticker span:nth-child(2n){border-right:0}
    .compliance{grid-template-columns:1fr}
    .cell{border-right:0}
  }

/* ===================================================================
   Document pages — product, trust, legal, contact.
   The landing page is a poster; these are documents. Same lattice and
   same restraint, but sized for sustained reading: a measure that caps
   around 68 characters, and headings that separate by weight and space
   rather than by colour. Crimson stays a signal here too — section
   identifiers and one action per page, never body text.
   =================================================================== */

.page-head{
  border-bottom:1px solid var(--line);
  padding:64px 40px 48px;
}
.page-head .tag{margin-bottom:20px}
.page-head h1{
  font-size:clamp(34px,5.5vw,64px);
  font-weight:700;
  letter-spacing:-.04em;
  line-height:.95;
  text-transform:uppercase;
}
.page-head .standfirst{
  margin:24px 0 0;
  max-width:60ch;
  font-size:16px;
  font-weight:300;
  color:var(--ink-70);
}

/* Two columns: a sticky index on the left, the document on the right.
   The index is genuinely useful on the legal page, which is long. */
.doc{
  display:grid;
  grid-template-columns:3fr 9fr;
}
.doc-index{
  border-right:1px solid var(--line);
  padding:40px 24px 64px 40px;
}
.doc-index-inner{position:sticky;top:24px}
.doc-index a{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-50);
  text-decoration:none;
  padding:7px 0;
  border-bottom:1px solid var(--line);
}
.doc-index a:hover{color:var(--pillar)}
.doc-body{padding:40px 40px 72px}

.sect{padding:0 0 44px}
.sect + .sect{padding-top:44px;border-top:1px solid var(--line)}
.sect h2{
  font-size:clamp(20px,2.4vw,28px);
  font-weight:600;
  letter-spacing:-.03em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.sect h3{
  font-size:15px;
  font-weight:600;
  letter-spacing:-.01em;
  margin:26px 0 8px;
}
.sect p,.sect li{max-width:68ch;color:var(--ink-70);font-weight:300}
.sect p{margin:0 0 12px}
.sect strong{color:var(--ink);font-weight:500}
.sect ul{margin:0 0 12px;padding-left:18px}
.sect li{margin-bottom:6px}
.sect a{color:var(--pillar);text-decoration:none;border-bottom:1px solid transparent}
.sect a:hover{border-bottom-color:var(--pillar)}

/* A definition row: term on the left, plain-language answer on the right.
   Used where a table would imply more precision than we have. */
.deflist{border-top:1px solid var(--line);margin-top:8px}
.defrow{
  display:grid;
  grid-template-columns:4fr 8fr;
  border-bottom:1px solid var(--line);
}
.defrow dt{
  padding:14px 20px 14px 0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
  border-right:1px solid var(--line);
}
.defrow dd{margin:0;padding:14px 0 14px 20px;color:var(--ink-70);font-weight:300;max-width:60ch}

/* Where a claim is still pending, say so in the page rather than
   quietly omitting it. Amber would be a fourth colour; the crimson
   left rule plus a mono label does the same job inside the palette. */
.pending{
  border-left:3px solid var(--pillar);
  background:var(--surface);
  padding:16px 20px;
  margin:16px 0;
  max-width:68ch;
}
.pending .label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--pillar);
  display:block;
  margin-bottom:6px;
}
.pending p{margin:0;font-size:13px}

.meta{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-50);
}

/* Cross-links at the foot of a document, so a reader who finishes the
   trust page has somewhere to go that is not the back button. */
.next{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--line);
}
.next a{
  padding:28px 40px;
  text-decoration:none;
  border-right:1px solid var(--line);
}
.next a:last-child{border-right:0}
.next a:hover{background:var(--surface)}
.next .n{display:block;margin-bottom:6px}
.next .t{font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.02em}

@media (max-width:900px){
  .doc{grid-template-columns:1fr}
  .doc-index{border-right:0;border-bottom:1px solid var(--line);padding:24px}
  .doc-index-inner{position:static}
  .doc-body{padding:24px}
  .page-head{padding:40px 24px 32px}
  .defrow{grid-template-columns:1fr}
  .defrow dt{border-right:0;padding-bottom:4px}
  .defrow dd{padding:0 0 14px}
  .next{grid-template-columns:1fr}
  .next a{border-right:0;border-bottom:1px solid var(--line);padding:22px 24px}
}

/* The wordmark is a link home on every page except the home page itself. */
.wordmark{text-decoration:none;color:inherit}

/* Footer navigation. Kept quiet: the footer is a signpost, not a menu. */
.footlinks{display:flex;flex-wrap:wrap;gap:0 20px}
.footlinks a{color:var(--ink-50);text-decoration:none}
.footlinks a:hover{color:var(--pillar)}

/* Marks the current page in the top nav, so a reader always knows where
   they are without having to read the URL. */
.navlinks a[aria-current="page"]{color:var(--pillar)}

/* ===================================================================
   LANDING PAGE
   ===================================================================
   A self-contained system, not an override of the document styles
   above. Mixing the two is what made the page read as two designs
   arguing: the rules above are built for compact reading, and adding
   padding on top of them produced neither one thing nor the other.

   One spacing scale, used throughout:
     band  160px   between one idea and the next
     step   64px   between parts of the same idea
     tight  24px   inside a single part

   The page is long on purpose. This reader scans, and an idea sharing
   a screen with three others is not read at all.
   =================================================================== */

.site{ --band:160px; --step:64px; --tight:24px; --inner:1180px; --pad:40px; }
.site .wrap{max-width:var(--inner);margin:0 auto;padding:0 var(--pad)}

.site-head{position:sticky;top:0;z-index:60;background:var(--canvas);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.site-head .mark{font-family:var(--display);font-size:23px;font-weight:700;letter-spacing:-.04em;text-decoration:none;color:var(--ink)}
.site-head .mark i{color:var(--pillar);font-style:normal}
.site-nav{display:flex;align-items:center;gap:34px}
.site-nav a{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-50);text-decoration:none;transition:color .15s}
.site-nav a:hover{color:var(--ink)}
.site-nav a.login{border:1px solid var(--ink);color:var(--ink);padding:9px 16px}
.site-nav a.login:hover{background:var(--ink);color:var(--canvas)}
.site-langs{display:flex;margin-left:8px}
.site-langs .langbtn{border:0;border-left:1px solid var(--line);padding:6px 12px}

.band{padding:var(--band) 0;border-bottom:1px solid var(--line)}
.band.tint{background:var(--surface)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pillar);display:block;margin-bottom:var(--tight)}
.band h2{font-family:var(--display);font-size:clamp(30px,4.2vw,52px);font-weight:600;letter-spacing:-.035em;line-height:1.08;max-width:20ch}
.band .standfirst{margin-top:var(--tight);max-width:58ch;font-size:17px;font-weight:300;line-height:1.8;color:var(--ink-70)}

.hero-band{padding:calc(var(--band) * .9) 0 var(--band);border-bottom:1px solid var(--line)}
.hero-band h1{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(52px,9vw,112px);line-height:.92;letter-spacing:-.05em}
.hero-band h1 .on{color:var(--pillar)}
.hero-lede{margin-top:48px;max-width:56ch;font-size:19px;font-weight:300;line-height:1.75;color:var(--ink-70)}
.hero-actions{margin-top:48px;display:flex;flex-wrap:wrap;gap:16px}
.act{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:16px 26px;text-decoration:none;border:1px solid var(--ink);color:var(--ink);transition:.15s}
.act:hover{background:var(--ink);color:var(--canvas)}
.act.primary{background:var(--pillar);border-color:var(--pillar);color:#fff}
.act.primary:hover{background:#c81d21;border-color:#c81d21}

.formats{border-bottom:1px solid var(--line);background:var(--surface)}
.formats .wrap{display:flex;flex-wrap:wrap;gap:14px 40px;padding-top:26px;padding-bottom:26px;font-family:var(--mono);font-size:11px;letter-spacing:.09em;color:var(--ink-50)}
.formats span::before{content:"·";color:var(--pillar);margin-right:7px}

.pair{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--step);border:1px solid var(--line)}
.pane{padding:52px 44px}
.pane + .pane{border-left:1px solid var(--line)}
.pane.now{background:var(--surface)}
.pane h3{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.025em;margin-bottom:28px}
.pane.now h3{color:var(--ink-50)}
.pane.next h3{color:var(--pillar)}
.pane ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.pane li{font-size:15px;font-weight:300;line-height:1.7;color:var(--ink-70);padding-left:22px;position:relative}
.pane li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:1px;background:var(--pillar)}
.pane.now li::before{background:var(--line-strong)}

.steps{margin-top:var(--step);border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:110px 1fr;gap:40px;padding:44px 0;border-bottom:1px solid var(--line)}
.step .n{font-family:var(--display);font-size:40px;font-weight:700;line-height:1;color:var(--pillar);letter-spacing:-.04em}
.step h3{font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-.02em;margin-bottom:12px}
.step p{font-size:15px;font-weight:300;line-height:1.8;color:var(--ink-70);max-width:60ch;margin:0}

.proof{display:grid;grid-template-columns:repeat(2,1fr);margin-top:var(--step);border:1px solid var(--line)}
.proof > div{padding:44px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof > div:nth-child(2n){border-right:0}
.proof > div:nth-last-child(-n+2){border-bottom:0}
.proof .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50);display:block;margin-bottom:14px}
.proof .v{font-family:var(--display);font-size:23px;font-weight:600;letter-spacing:-.025em;display:block;margin-bottom:14px}
.proof .d{font-size:14.5px;font-weight:300;line-height:1.7;color:var(--ink-70)}

.doc{margin-top:var(--step);border:1px solid var(--line);border-left:3px solid var(--pillar);background:var(--surface);padding:48px 44px;display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between}
.doc p{max-width:58ch;font-size:15px;font-weight:300;line-height:1.8;color:var(--ink-70);margin:0}

.site-foot{padding:88px 0 40px;border-top:3px solid var(--pillar)}
.site-foot .top{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start}
.site-foot .mark{font-family:var(--display);font-size:23px;font-weight:700;letter-spacing:-.04em;color:var(--ink);text-decoration:none}
.site-foot .mark i{color:var(--pillar);font-style:normal}
.site-foot nav{display:flex;flex-wrap:wrap;gap:14px 30px}
.site-foot nav a{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-50);text-decoration:none}
.site-foot nav a:hover{color:var(--pillar)}
.site-foot .base{margin-top:64px;padding-top:26px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--ink-50)}

@media (max-width:900px){
  .site{--band:96px;--step:44px;--pad:24px}
  .site-head .wrap{height:64px}
  .site-nav{gap:18px}
  .site-nav a:not(.login){display:none}
  .pair,.proof{grid-template-columns:1fr}
  .pane + .pane{border-left:0;border-top:1px solid var(--line)}
  .pane{padding:40px 28px}
  .proof > div{border-right:0;padding:34px 28px}
  .proof > div:nth-last-child(2){border-bottom:1px solid var(--line)}
  .step{grid-template-columns:1fr;gap:16px;padding:34px 0}
  .doc{padding:36px 28px}
}

/* ===================================================================
   PRINT
   ===================================================================
   Browsers do not print background colours or borders unless the reader
   turns them on, so the lattice - which is the whole structure of this
   design - disappears and the page prints as loose text. And A4 is
   narrower than the tablet breakpoint, so the screen rules collapse
   every two-column grid.

   These rules make a printed page a document in its own right rather
   than a screenshot of a website that lost its styling.
   =================================================================== */
@media print{
  .site{--band:26px;--step:16px;--pad:0}

  /* Force the structure through, since backgrounds are usually off. */
  .band,.hero-band,.formats{border-bottom:1px solid #bbb !important;page-break-inside:auto}
  .pair,.proof,.doc,.steps{border:1px solid #bbb !important}
  .pane + .pane{border-left:1px solid #bbb !important}
  .proof > div{border-right:1px solid #bbb !important;border-bottom:1px solid #bbb !important}
  .step{border-bottom:1px solid #ddd !important}

  /* Keep the columns side by side: paper is wide enough, even if it is
     narrower than the tablet breakpoint that would otherwise collapse them. */
  .pair{grid-template-columns:1fr 1fr !important}
  .proof{grid-template-columns:repeat(2,1fr) !important}
  .step{grid-template-columns:90px 1fr !important}
  .site-nav a:not(.login){display:inline !important}

  /* Chrome that means nothing on paper. */
  .site-head{position:static;border-bottom:2px solid #111 !important}
  .site-langs,.site-nav a.login,.hero-actions,.doc .act{display:none !important}

  .site-head .wrap{height:auto;padding:12px 0}
  .hero-band h1{font-size:40px}
  .hero-lede,.band .standfirst{font-size:11pt;margin-top:12px}
  .band h2{font-size:19pt;max-width:none}
  .pane,.proof > div{padding:18px}
  .doc{padding:18px}
  .site-foot{padding:20px 0 0;border-top:2px solid #111 !important}

  a{text-decoration:none;color:#111}
  /* A printed page loses every link, so the important ones are spelled out. */
  .site-foot nav a[href]::after{content:" (kildera.dk" attr(href) ")";font-size:8pt;color:#666}

  h1,h2,h3{page-break-after:avoid}
  .step,.pane,.proof > div{page-break-inside:avoid}
}