/* ============================================================
   Hjemmesider (salgsside) supplement til forside.css.
   Genbruger brand-tokens: --ink/--paper/--accent/--line/--mono/--sans.
   Ingen JS, ingen inline styles, ingen eksterne domaener (CSP-ren).
   ============================================================ */

/* aktiv nav-side, som paa de ovrige undersider */
.topbar nav a[aria-current="page"] { color: var(--ink); }
.topbar nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ============================================================
   Hero (pitch): tekst til venstre, principskitse til hojre.
   Bygget som .hero, men helt statisk (intet laerred, ingen JS).
   ============================================================ */
.pitch {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}

.pitch-copy { padding: 74px 44px 62px; min-width: 0; align-self: center; }

.pitch h1 {
  font-size: clamp(2.05rem, 4.5vw, 3.25rem);
  line-height: 1.07;
  letter-spacing: -0.03em;
  max-width: 16ch;
}
.pitch h1 .pitch-turn { color: var(--ink-soft); }

.pitch-lead {
  max-width: 48ch;
  margin: 26px 0 0;
  font-size: 1.05rem;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* skitse-panelet: samme arcerede felt som drev-panelet paa forsiden */
.pitch-visual {
  position: relative;
  border-left: 1px solid var(--line);
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  background: repeating-linear-gradient(45deg, transparent 0 11px, var(--grid-minor) 11px 12px);
}
@media (prefers-color-scheme: dark) {
  .pitch-visual { background: repeating-linear-gradient(45deg, transparent 0 11px, rgba(232,232,230,0.035) 11px 12px); }
}
.pitch-schema { max-width: 440px; margin: 0 auto; }

/* ekstra skematik-rolle: stedets navn som titel i skitsen */
.schematic .s-head {
  fill: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  stroke: none;
}

/* ============================================================
   Pakker (to spec-kort)
   ============================================================ */
.pakker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

.pakke {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  padding: 30px 30px 34px;
  background: color-mix(in srgb, var(--paper) 55%, transparent);
}
.pakke-fremhaevet { border-color: var(--accent); }

.pakke .component-title-row { margin-bottom: 4px; }
.pakke .component-title-row h3 { font-size: 1.35rem; }

/* prislinje */
.pris {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
  margin: 18px 0 3px;
  font-family: var(--mono);
}
.pris b {
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pris-fra {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pris-enhed { font-size: 0.82rem; color: var(--ink-soft); }
.pris-drift {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.pakke-tekst { margin: 0 0 22px; color: var(--ink-soft); max-width: 42ch; }

/* skub styklisten ned, saa begge korts lister flugter */
.pakke .specs { margin-top: auto; margin-bottom: 0; }

.pris-note {
  margin: 26px 0 0;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 64ch;
}

/* ============================================================
   Forskellen (differentiatorer) et net af parallelle punkter
   ============================================================ */
.punkter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.punkt { background: var(--paper); padding: 24px 26px 26px; }
.punkt-tag {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.punkt h3 { font-size: 1.05rem; margin-bottom: 7px; }
.punkt p { margin: 0; font-size: 0.96rem; color: var(--ink-soft); max-width: 44ch; text-wrap: pretty; }

/* ============================================================
   Fremgangsmaade (rigtig raekkefolge, derfor nummereret)
   ============================================================ */
.proces { list-style: none; margin: 0; padding: 0; }
.proces li {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 22px 4px;
  border-top: 1px solid var(--line);
}
.proces li:last-child { border-bottom: 1px solid var(--line); }

.trin-nr {
  font-family: var(--mono);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-soft);
}
.proces li:last-child .trin-nr { color: var(--accent); }

.trin-tekst h3 { font-size: 1.1rem; margin-bottom: 6px; }
.trin-tekst p { margin: 0; color: var(--ink-soft); max-width: 58ch; text-wrap: pretty; }

/* ============================================================
   Kontakt + referencenote
   ============================================================ */
.section-kontakt .cta { margin-top: 6px; }
.ref-note {
  margin: 30px 0 0;
  font-family: var(--mono);
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 60ch;
}
.ref-note a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--line); }
.ref-note a:hover { border-bottom-color: var(--accent); }

/* ============================================================
   Indgangskoreografi - pitch-heroen "plottes selv"
   Samme sprog som forsidens hero: annot toner ind, overskrift og
   broedtekst stiger i raekkefolge, skitse-panelet toner op, og
   principskitsen plotter sig selv streg for streg (JS). Dimensions-
   linjen (.dim) maaler sig selv via forside.css' egne regler.

   Genbruger forside.css' keyframes (ls-fade, ls-rise). ALT er kun
   forbedring af noget allerede synligt: intet har opacity:0 som
   grundtilstand, saa siden staar faerdig uden JS. Reduceret
   bevaegelse nulstiller varighed OG forsinkelse via forside.css.
   ============================================================ */
.pitch-copy .annot { animation: ls-fade 480ms ease 600ms backwards; }
.pitch h1          { animation: ls-rise 660ms cubic-bezier(0.22, 0.7, 0.3, 1) 700ms backwards; }
.pitch-lead        { animation: ls-rise 660ms cubic-bezier(0.22, 0.7, 0.3, 1) 1120ms backwards; }
.pitch-visual      { animation: ls-fade 900ms ease 760ms backwards; }

/* signaturmoment: kort-naalen "saettes" med et lille tik, naar
   plottet af skitsen er faerdigt (klassen .is-set saettes i JS).
   Rent transform; transform-box gor pin-gruppens egen kasse til
   reference, saa den tapper ned paa sin spids. */
.pitch-schema .pin { transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes pin-tik {
  0%   { transform: translateY(-5px) scale(0.9); }
  55%  { transform: translateY(1.5px) scale(1.04); }
  78%  { transform: translateY(-0.5px) scale(0.99); }
  100% { transform: translateY(0) scale(1); }
}
.pitch-schema.is-set .pin { animation: pin-tik 460ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both; }

/* ============================================================
   Pakke-kort - rolige hover-tilstande (ingen skygge-eksplosion):
   haarfin loftning, accent-ramme, og mono-part-no der faar rust.
   Kun paa pegeredskaber, saa touch ikke faar en klaebrig hover.
   ============================================================ */
.pakke { transition: transform 260ms cubic-bezier(0.22, 0.7, 0.3, 1), border-color 200ms ease; }
.pakke .part-no { transition: color 200ms ease; }
@media (hover: hover) {
  .pakke:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
  .pakke:hover .part-no { color: var(--accent); }
  .pakke-fremhaevet:hover { border-color: var(--accent); }
}

/* ============================================================
   Responsivt
   ============================================================ */
@media (max-width: 1000px) {
  .pitch { grid-template-columns: 1fr; }
  .pitch-copy { padding: 58px 36px 44px; order: 1; }
  .pitch-visual { order: 2; border-left: none; border-top: 1px solid var(--line); padding: 40px 36px; }
}

@media (max-width: 720px) {
  .pakker { grid-template-columns: 1fr; }
  .punkter { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .pitch-copy { padding: 44px 20px 34px; }
  .pitch-visual { padding: 32px 20px; }
  .pakke { padding: 26px 22px 28px; }
  .punkt { padding: 22px 20px 22px; }
  .proces li { grid-template-columns: 2.6rem 1fr; gap: 16px; }
}