/* How far the list's window hangs over the hero band's lower edge. */
main { --hang: clamp(40px, 8vw, 120px); }

/* ═══════════════════════════════════════════════════════════════ hero ══
   A band across the whole screen, ruled like a cutting mat: the promise on
   the left, the scene on the right — sources stream into one product, and
   its adverts drop in as parcels, one per shop. The scene is the page's
   one moving moment; everything around it keeps still.                    */
.hero-wrap { padding-inline: clamp(8px, 1vw, 14px); }
.hero {
  position: relative;
  isolation: isolate;
  padding-bottom: var(--hang);
  background: var(--panel);
  border-radius: clamp(18px, 2vw, 28px);
  /* Teal on this panel is 4.4:1 in the light mode, so the panel gets a deeper one (4.9:1). */
  --grow: var(--grow-panel);
}
/* The ruling itself is site.css's, shared with the panel beside the account forms. */
.close::before {
  -webkit-mask-image: radial-gradient(ellipse 70% 120% at 80% 50%, #000 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 120% at 80% 50%, #000 20%, transparent 100%);
}
.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(32px, 5vw, 72px) var(--gutter) clamp(32px, 4vw, 56px);
}
.hero-copy { min-width: 0; }
.hero h1 { font-size: clamp(2.6rem, 1.2rem + 3.4vw, 4.25rem); line-height: .98; letter-spacing: -.04em; }
/* Danish words run longer; a step smaller keeps the English shape. */
:lang(da) .hero h1 { font-size: clamp(2.4rem, 1.1rem + 3.1vw, 3.9rem); }
.hero-lead { margin-top: 24px; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: var(--ink-soft); max-width: 40ch; text-wrap: pretty; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-ctas .btn { min-height: 48px; padding-inline: 24px; font-size: 1rem; }
.hero-fine { margin-top: 14px; font-size: var(--t-small); color: var(--ink-soft); }

@media (max-width: 1040px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { max-width: 14ch; }
}
/* Phones: the buttons stacked and full width. */
@media (max-width: 560px) {
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; }
}

/* The 404 (NotFound.razor): the band in one column with nothing hanging over it, and the logo
   drawn large, its pupils turned aside as if looking for the page. Placed, not animated. */
.lost { --hang: 0px; }
.lost .hero-in { grid-template-columns: minmax(0, 1fr); }
.lost .mark { display: block; height: clamp(4.5rem, 12vw, 7rem); width: auto; margin-bottom: clamp(24px, 3vw, 40px); }
.lost .mark-pupils { transform: translateX(-9px); }

/* CSS, not the script: the first thing anyone sees must never wait on a file that failed. */
.rise { animation: rise 640ms cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0ms); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* ═════════════════════════════════════════════════════════════ window ══
   A window that hangs over the band's lower edge: the plans on /pricing.
   The window itself is site.css's .board. The front page's list sits on
   the page instead (climb.css).                                           */
.board-wrap { position: relative; z-index: 1; margin-top: calc(-1 * var(--hang)); }

/* ═════════════════════════════════════════════════════════════ inside ══
   Under the list, for anyone not yet let in: /waiting's tour (tour.css),
   its title, line and steps on the left and the window on the right. Step
   titles only, since the window shows what each one means. No date on
   Today: this page is cached for a day, and a stale weekday reads wrong.  */
.inside { padding-block: var(--bay-lg) 0; }
.inside .tour {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  grid-template-areas: "head win" "why win" "steps win" "cta win";
  grid-template-rows: auto auto auto 1fr;
  column-gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.inside .stage-head { grid-area: head; align-items: flex-start; }
.inside .stage-title { font-size: var(--t-h2); font-weight: 650; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.inside .tour-why { grid-area: why; margin: 4px 0 20px; font-size: 1rem; max-width: 40ch; text-wrap: pretty; }
.inside .tw { grid-area: win; }
.inside .tour-steps { grid-area: steps; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
.inside .step-said { display: none; }
.inside .tw-date { display: none; }
.inside-cta { grid-area: cta; margin-top: 28px; }
@media (max-width: 1040px) {
  .inside .tour { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "why" "win" "steps" "cta"; grid-template-rows: none; }
}

/* Opens smoothly where the browser can size to auto; elsewhere it simply opens. */
:root { interpolate-size: allow-keywords; }
.how-q::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 320ms var(--ease), content-visibility 320ms allow-discrete;
}
.how-q[open]::details-content { block-size: auto; }

/* ═════════════════════════════════════════════════════ how we count ══
   The questions show what is inside; each answer waits to be opened.    */
.how {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 24px clamp(32px, 6vw, 96px);
  padding-block: var(--bay-lg);
}
.how-head h2 { font-size: var(--t-h2); }
.how-head p { margin-top: 12px; color: var(--ink-soft); max-width: 30ch; text-wrap: pretty; }
/* The totals behind the picture, in small print: the hero shows the sources by name only. */
.how-head .how-src { margin-top: 16px; font-size: var(--t-small); max-width: 36ch; }
.how-list { border-bottom: 1px solid var(--line); }
.how-q { border-top: 1px solid var(--line); }
.how-q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -.01em;
  list-style: none;
  cursor: pointer;
}
.how-q summary::-webkit-details-marker { display: none; }
.how-q summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 1.5px solid var(--ink-soft);
  border-bottom: 1.5px solid var(--ink-soft);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 260ms var(--ease);
}
.how-q[open] summary::after { transform: translateY(2px) rotate(225deg); }
.how-q summary:hover::after { border-color: var(--ink); }
.how-q p { padding-bottom: 24px; color: var(--ink-soft); max-width: 62ch; text-wrap: pretty; }
.how-q strong { color: var(--ink); font-weight: 650; }
@media (max-width: 860px) { .how { grid-template-columns: minmax(0, 1fr); } }
/* The note from the team: the questions' two columns, close under them. */
.team { padding-top: 0; }
.team-text { color: var(--ink-soft); font-size: var(--t-lead); max-width: 62ch; text-wrap: pretty; }
.team-text p + p { margin-top: 1em; }

/* ═══════════════════════════════════════════════════════════ closing ══
   The page's one dark band, ruled like the hero's, so the page ends on
   the decision rather than trailing off into small print.                */
.close-wrap { padding-inline: clamp(8px, 1vw, 14px); }
.close {
  position: relative;
  isolation: isolate;
  background: var(--band);
  color: var(--band-ink);
  border-radius: clamp(18px, 2vw, 28px);
  --rule: var(--band-rule);
  --rule-hi: var(--band-rule);
}
.close-in {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 48px;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(48px, 7vw, 104px) var(--gutter);
}
.close h2 { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem); line-height: 1; letter-spacing: -.035em; }
.close p { margin-top: 16px; max-width: 48ch; font-size: var(--t-lead); color: var(--band-soft); text-wrap: pretty; }
.close-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.close .btn { min-height: 48px; padding-inline: 24px; font-size: 1rem; border-color: var(--band-ink); color: var(--band-ink); }
.close .btn:not(.btn-primary):hover { background: color-mix(in srgb, var(--band-ink) 10%, transparent); }
.close .btn-primary { background: var(--band-ink); color: var(--band); }
.close .btn-primary:hover { background: color-mix(in srgb, var(--band-ink) 86%, var(--band)); }
.close :focus-visible { outline-color: var(--band-ink); }

/* ════════════════════════════════════════════════════════════ footer ══
   SiteFooter: who we are and how to reach us, then the company's line
   under a hairline. Every link is at least 44px tall to tap; they measured
   17–21px. The address is underlined, because a link inside text needs
   more than a colour to be seen as one.                                  */
.foot { padding-block: 40px; font-size: var(--t-small); color: var(--ink-soft); }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px 48px; }
.foot-about { display: grid; justify-items: start; gap: 4px; max-width: 52ch; }
/* As tall as the nav's links, so the wordmark and the links share a centre line. */
.foot-about .brand { min-height: 44px; }
.foot-mail { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; }
.foot-mail:hover { text-decoration-thickness: 2px; }
.foot-nav { display: flex; flex-wrap: wrap; column-gap: 28px; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; }
.foot-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: var(--t-micro);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
/* A phone: the address is a tap target too. */
@media (max-width: 900px) {
  .foot-mail { display: inline-flex; align-items: center; min-height: 44px; }
}