/*
 * Tjek Medicinpriser — designet fra «Tjek Medicinpriser (web).dc.html».
 *
 * Monokromt, hårlinjer, nul hjørneradius. Hierarkiet bæres af størrelse og
 * knibning, ikke af vægt eller farve. Ravgul er reserveret klinisk
 * forsigtighed og bruges ikke til andet.
 *
 * Alt er scopet under .tmp, så pluginnet ikke kan smitte af på temaet — og
 * temaet ikke på det.
 */

.tmp {
  --ink: #000;
  --paper: #fff;
  --line: #E5E5E5;
  --subtle: #8A8A8A;
  --slate: #4A4A4A;
  --canvas: #F4F4F4;
  --amber: #B7791F;
  --pad: 96px;

  /* Typeskala. Elleve størrelser var i brug — heriblandt 20, 20,5 og 21,8 —
     hvilket er afdrift, ikke en skala. Seks trin, og alt skal ligge på dem. */
  --t-micro:  10px;                          /* versaletiketter */
  --t-action: 12px;                          /* knapper */
  --t-small:  13px;                          /* noter, firmanavne, bislutninger */
  --t-body:   15px;                          /* brødtekst */
  --t-cell:   17px;                          /* tabelceller og præparatnavne */
  --t-lead:   clamp(17px, 1.5vw, 20px);      /* manchet */
  --t-title:  clamp(22px, 2.4vw, 26px);      /* korttitler */
  --t-fig:    clamp(28px, 3vw, 36px);        /* nøgletal */
  --t-h2:     clamp(30px, 3.4vw, 44px);
  --t-input:  clamp(56px, 8vw, 96px);        /* døgndosis — det tal brugeren selv skriver */
  --t-h1:     clamp(40px, 6vw, 88px);
  --t-disp:   clamp(84px, 14vw, 200px);      /* besparelsen, ét sted på siden */

  /* Knibning. Elleve værdier gjorde det samme arbejde; nu tre. */
  --k-label: .18em;                         /* versaletiketter */
  --k-tight: -.02em;                        /* display */
  --k-body:  -.006em;

  /* Manrope frem for Inter. Inter blev aldrig indlæst — hverken pluginet
     eller temaet hentede den, så CSS'en bad om et navn og hver besøgende fik
     sit eget systems skrift. Siden så altså forskellig ud på Mac, Windows og
     Android, og knibningen var indstillet efter en skrift, ingen så.

     Manrope hentes allerede af temaet. Den koster derfor nul ekstra bytes,
     og den gør sidehoved og indhold til samme skrift i stedet for to. */
  font-family: var(--wp--preset--font-family--manrope, "Manrope"),
               -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  max-width: 1440px;
  margin: 0 auto;
}

.tmp *, .tmp *::before, .tmp *::after { box-sizing: border-box; }
/* Nulstillingen skal ligge UNDER de klasser, der bygger oven på den.
   Skrevet som «.tmp p, .tmp h1, …» vejer den (0,1,1) og slog dermed hver
   eneste «.tmp-h1 { margin-top: 26px }» (0,1,0). Otte afstande i designet
   var derfor døde — al luft mellem overskrift og manchet kom i virkeligheden
   fra linjeafstanden, ikke fra rytmen.

   :where() tæller ikke med i specificiteten, så reglen vejer nu (0,1,0):
   stadig nok til at slå temaets egne p-regler (0,0,1), men klasserne
   herunder vinder, fordi de står senere. */
.tmp :where(p, h1, h2, h3, dl, dd) { margin: 0; }
.tmp a { color: var(--ink); text-decoration: none; }
.tmp a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tmp :focus-visible { outline: 2px solid #3B6FE0; outline-offset: 2px; }

.tmp-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* To klasser, ikke én. En hjælpeklasse skal veje mere end de beholdere, den
   lægges ind i: «.tmp-widercard p» og «.tmp-formsgrid p» vejer (0,1,1) og slog
   ellers etiketten (0,1,0). Målt på siden tegnede 6 af 14 etiketter i 13 eller
   15 px i stedet for 10. */
.tmp .tmp-eyebrow {
  font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--k-label);
  text-transform: uppercase; color: var(--subtle); line-height: 1.4;
}

/* ------------------------------------------------------------- hero */

/* [hidden] taber til enhver display-erklæring. .tmp-dosepanel og .tmp-options
   sætter display:grid og fyldte derfor 232px usynlig plads midt på siden,
   selv når de var skjult. Skal stå før reglerne der sætter display. */
.tmp [hidden] { display: none !important; }

.tmp-hero { padding: 88px var(--pad) 48px; }

/* Badge'et står i række med eyebrow'en frem for i sin egen blok. Blokken kostede
   174 px mellem søgefeltet og resultaterne — hele grunden til at den blev flyttet
   ned i første omgang. På linje med eyebrow'en koster den 33 px, og badge'et er
   stadig noget af det første, man ser. */
.tmp-herotop {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 32px; flex-wrap: wrap;
}
.tmp-herotop .tmp-eyebrow { flex: 1 1 auto; }
.tmp-herotop .tmp-badge { flex: none; }

.tmp-h1 {
  font-size: var(--t-h1); font-weight: 300; line-height: 1.02;
  letter-spacing: var(--k-tight); margin-top: 26px; max-width: 19ch; text-wrap: pretty;
}

.tmp-lede {
  font-size: var(--t-lead); font-weight: 300; line-height: 1.45;
  color: var(--slate); margin-top: 28px; max-width: 58ch; text-wrap: pretty;
}
.tmp-lede-sm { font-size: var(--t-title); font-weight: 300; line-height: 1.5; color: var(--slate); margin-top: 28px; max-width: 52ch; }

.tmp-searchwrap { max-width: 760px; margin-top: 56px; }

.tmp-search {
  display: flex; align-items: center; gap: 16px;
  border-bottom: 1px solid var(--ink); padding: 18px 0;
}
.tmp-search .tmp-icon { flex: none; }
.tmp-search input {
  flex: 1; min-width: 0; border: 0; padding: 0; background: transparent;
  font-family: inherit; font-size: var(--t-h2); font-weight: 300;
  line-height: 1.2; letter-spacing: var(--k-tight); color: var(--ink);
  -webkit-appearance: none; appearance: none;
}
.tmp-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.tmp-search input::placeholder { color: var(--subtle); }
.tmp-count {
  flex: none; font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--k-label);
  text-transform: uppercase; color: var(--subtle);
}
.tmp-searchnote { margin-top: 10px; font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--k-label); text-transform: uppercase; color: var(--subtle); }

.tmp-promises {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px;
  padding: 72px var(--pad) 44px;
}
.tmp-promises > div { border-top: 1px solid var(--ink); padding-top: 14px; }
.tmp-promises h3 {
  font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--k-label); text-transform: uppercase;
  color: var(--subtle); margin-bottom: 12px;
}
.tmp-promises p { font-size: var(--t-body); line-height: 1.55; color: var(--slate); max-width: 34ch; }

/* ------------------------------------------ sider pr. lægemiddel */

/* Disse sider ligger inde i temaets indholdsspalte og har derfor ingen egen
   sidepolstring — kun lodret luft. */
.tmp-side, .tmp-indeks, .tmp-genveje { padding: 0; }

.tmp-side .tmp-lede-sm { margin-top: 14px; max-width: 62ch; font-size: var(--t-lead); }

.tmp-note {
  font-size: var(--t-small); line-height: 1.6; color: var(--subtle);
  margin-top: 16px; max-width: 78ch; text-wrap: pretty;
}
.tmp-note a { text-decoration: underline; text-underline-offset: 3px; }

.tmp-sidetabel { margin-top: 32px; overflow-x: auto; }
.tmp-sidetabel table { border-collapse: collapse; width: 100%; min-width: 640px; }
.tmp-sidetabel th, .tmp-sidetabel td {
  text-align: left; padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.tmp-sidetabel thead th {
  font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--k-label); text-transform: uppercase;
  color: var(--subtle); border-bottom: 1px solid var(--ink); padding-bottom: 10px;
}
.tmp-sidetabel .tmp-num { text-align: right; }
.tmp-sidetabel td { font-size: var(--t-body); }
.tmp-sidetabel td strong { font-weight: 400; font-size: var(--t-cell); }
.tmp-sidefirma { display: block; font-size: var(--t-small); color: var(--subtle); margin-top: 3px; }
.tmp-sidetabel tbody tr:first-child td { background: var(--canvas); }

.tmp-sidecta { margin-top: 28px; }


.tmp-indeks h2 {
  font-size: var(--t-title); font-weight: 300; letter-spacing: var(--k-tight);
  margin-top: 40px; padding-bottom: 12px; border-bottom: 1px solid var(--ink);
}
.tmp-indeksliste {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 24px;
}
.tmp-indeksliste a { font-size: var(--t-body); }

.tmp-genveje { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); }
.tmp-genvejsliste { margin-top: 12px; font-size: var(--t-body); line-height: 1.9; color: var(--slate); max-width: 78ch; }
.tmp-genvejsliste a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.tmp-genvejsliste a:hover { text-decoration-color: var(--ink); }

/* Skilletegnet hører til navnet FØR det, ikke efter. Stod det i sit eget
   element med mellemrum på begge sider, kunne linjen brydes foran prikken,
   så næste linje begyndte med «· Levothyroxinnatrium». Nu er navn og prik
   ét ubrydeligt hele, og ombrydningen sker i mellemrummet efter prikken. */
.tmp-genvej { white-space: nowrap; }
.tmp-genvej:not(:last-child)::after { content: " ·"; color: var(--subtle); }

/* ---------------------------------------------------------- tilstand */

.tmp-status {
  padding: 22px var(--pad); border-top: 1px solid var(--line);
  font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--k-label);
  text-transform: uppercase; color: var(--subtle);
}
.tmp-status[data-tone="error"] { color: var(--amber); }

.tmp-wider { padding: 32px var(--pad) 0; }
.tmp-widercard { border: 1px solid var(--ink); padding: 28px 32px; max-width: 760px; }
.tmp-widercard h3 { font-size: var(--t-title); font-weight: 300; letter-spacing: var(--k-tight); margin-top: 8px; }
.tmp-widercard p { font-size: var(--t-body); line-height: 1.55; color: var(--slate); margin-top: 12px; max-width: 56ch; text-wrap: pretty; }

.tmp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 24px; border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper); cursor: pointer;
  font-family: inherit; font-size: var(--t-action); font-weight: 500;
  letter-spacing: var(--k-label); text-transform: uppercase;
  transition: background 200ms cubic-bezier(.32,.72,0,1);
}
.tmp-btn:hover { background: #1A1A1A; }

/* Farverne skal stå med to klasser. «.tmp a» har specificitet (0,1,1) og slog
   ellers «.tmp-btn» (0,1,0), så en knap udformet som et link fik sort tekst
   på sort baggrund. Begge varianter hæves derfor til (0,2,0), så de er lige
   stærke og ikke kan slå hinanden ihjel. */
.tmp .tmp-btn { color: var(--paper); }
.tmp .tmp-btn--ghost { background: var(--paper); color: var(--ink); }
.tmp .tmp-btn--ghost:hover { background: var(--canvas); }
.tmp a.tmp-btn, .tmp a.tmp-btn:hover { text-decoration: none; }

/* --------------------------------------------------------- resultat */

.tmp-results { border-top: 1px solid var(--line); padding: 64px var(--pad) 0; }
.tmp-results header { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; flex-wrap: wrap; }

/* Overskriftens højre side: hvad listen viser, og kontakten der ændrer det. */
.tmp-resmeta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; }
.tmp-eyebrow--warn { color: var(--amber); }

.tmp-toggle {
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--k-label);
  text-transform: uppercase; color: var(--ink);
  /* Understregning frem for border-bottom, så knappen kan få et større
     trykområde uden at stregen flytter sig væk fra teksten. */
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
  padding: 6px 0;
  transition: color 200ms cubic-bezier(.32,.72,0,1);
}
.tmp-toggle:hover { color: var(--slate); }

/* --------------------------------------------- former og døgnpris */

/* Panelet der stiller lægemiddelformerne op ved siden af hinanden. Det
   rangerer dem ikke som alternativer — det viser deres dosering, så
   forskellen i frekvens er synlig før prisen sammenlignes. */
.tmp-forms { border: 1px solid var(--ink); padding: 28px 32px; margin-top: 40px; }
.tmp-formsgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px 40px; margin-top: 20px;
}
.tmp-formsgrid h4 { font-size: var(--t-title); font-weight: 300; letter-spacing: var(--k-tight); }
.tmp-formpris { font-size: var(--t-body); color: var(--ink); margin-top: 8px; }
.tmp-formdosis { font-size: var(--t-small); line-height: 1.5; color: var(--slate); margin-top: 8px; text-wrap: pretty; }
.tmp-formind {
  font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--k-label); text-transform: uppercase;
  color: var(--subtle); margin-top: 10px;
}
.tmp-formrest { font-size: var(--t-small); color: var(--subtle); margin-top: 18px; }
.tmp-forms .tmp-note {
  font-size: var(--t-action); line-height: 1.6; color: var(--subtle);
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line);
  max-width: 92ch; text-wrap: pretty;
}

/* Et afsnit pr. lægemiddelform, kun når der er mere end én. */
.tmp-formgruppe { margin-top: 48px; }
.tmp-formhoved { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.tmp-formhoved h3 { font-size: var(--t-title); font-weight: 300; letter-spacing: var(--k-tight); }
.tmp-formgruppe .tmp-table { margin-top: 20px; }

.tmp-more {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 0; border-top: 1px solid var(--line);
  background: var(--paper); color: var(--ink); font-family: inherit;
  font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--k-label);
  text-transform: uppercase; padding: 24px 0;
  transition: background 200ms cubic-bezier(.32,.72,0,1);
}
.tmp-more:hover { background: var(--canvas); }
.tmp-results h2 { font-size: var(--t-h2); font-weight: 300; line-height: 1.1; letter-spacing: var(--k-tight); }

.tmp-table { margin-top: 44px; }
.tmp-row {
  display: grid; grid-template-columns: 2.4fr 1fr 1.6fr 1fr 1fr 1fr;
  gap: 0 24px; align-items: baseline;
}
.tmp-thead { padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.tmp-thead > div { font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--k-label); text-transform: uppercase; color: var(--subtle); }
.tmp-num { text-align: right; }

.tmp-tr {
  padding: 20px 0; border-bottom: 1px solid var(--line);
  cursor: pointer; width: 100%; text-align: left;
  background: transparent; border-left: 0; border-right: 0; border-top: 0;
  font-family: inherit; color: inherit;
}
.tmp-tr:hover, .tmp-tr[aria-current="true"] { background: var(--canvas); }
.tmp-tr .tmp-name { font-size: var(--t-cell); letter-spacing: var(--k-body); }
.tmp-tr .tmp-meta { font-size: var(--t-small); line-height: 1.4; color: var(--subtle); margin-top: 4px; }
.tmp-tr .tmp-cell { font-size: var(--t-cell); }
.tmp-tr .tmp-cell--strong { font-size: var(--t-cell); }
.tmp-tr .tmp-cell--muted { color: var(--slate); }

.tmp-chip {
  display: inline-block; background: var(--ink); color: var(--paper);
  font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--k-label);
  text-transform: uppercase; padding: 5px 8px; margin-left: 12px;
}
.tmp-chip--outline { background: var(--paper); color: var(--slate); border: 1px solid var(--line); margin-left: 8px; }
.tmp-chip--warn { background: var(--paper); color: var(--amber); border: 1px solid var(--amber); margin-left: 8px; }

/* ------------------------------------------------------------ dosis */

.tmp-dosepanel {
  padding: 80px var(--pad) 72px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 96px; align-items: start;
}
.tmp-dosebig { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; }
.tmp-dosebig input {
  font-family: inherit; font-size: var(--t-input); font-weight: 300;
  line-height: .9; letter-spacing: var(--k-tight); border: 0; padding: 0;
  width: 4ch; background: transparent; color: var(--ink);
  -webkit-appearance: none; appearance: none;
}
.tmp-dosebig input::-webkit-outer-spin-button,
.tmp-dosebig input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tmp-doseunit { font-size: var(--t-small); font-weight: 500; letter-spacing: var(--k-label); color: var(--subtle); }

.tmp-dosepicks { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.tmp-dosepick {
  flex: 1 1 90px; min-height: 52px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font-family: inherit; font-size: var(--t-action); font-weight: 500; letter-spacing: var(--k-label);
  cursor: pointer; transition: background 200ms cubic-bezier(.32,.72,0,1);
}
.tmp-dosepick[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.tmp-switchrow {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 32px;
  border-top: 1px solid var(--ink); padding-top: 16px; cursor: pointer;
  background: transparent; border-left: 0; border-right: 0; border-bottom: 0;
  font-family: inherit; color: inherit; text-align: left; width: 100%;
}
.tmp-switchrow + .tmp-switchrow { border-top: 1px solid var(--line); margin-top: 28px; }
.tmp-switchrow h3 { font-size: var(--t-cell); font-weight: 400; line-height: 1.3; }
.tmp-switchrow p { font-size: var(--t-small); line-height: 1.55; color: var(--subtle); margin-top: 8px; max-width: 44ch; text-wrap: pretty; }
.tmp-switch {
  width: 56px; height: 30px; border: 1px solid var(--ink); background: var(--paper);
  display: flex; align-items: center; padding: 2px; flex: none;
  transition: background 200ms cubic-bezier(.32,.72,0,1);
}
.tmp-switch i { width: 24px; height: 24px; background: var(--ink); margin-left: 0; display: block;
  transition: margin-left 200ms cubic-bezier(.32,.72,0,1), background 200ms; }
.tmp-switchrow[aria-pressed="true"] .tmp-switch { background: var(--ink); }
.tmp-switchrow[aria-pressed="true"] .tmp-switch i { margin-left: 26px; background: var(--paper); }

/* --------------------------------------------------------- besparelse */

.tmp-saving { background: var(--ink); color: var(--paper); padding: 88px var(--pad); }
.tmp-savinggrid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0 96px; align-items: end; }
.tmp-saving .tmp-eyebrow { color: rgba(255,255,255,.55); }
.tmp-savingbig { display: flex; align-items: baseline; gap: 20px; margin-top: 24px; }
.tmp-savingbig b {
  font-size: var(--t-disp); font-weight: 300; line-height: .82; letter-spacing: var(--k-tight);
}
.tmp-savingbig span { font-size: var(--t-body); font-weight: 500; letter-spacing: var(--k-label); color: rgba(255,255,255,.55); }
.tmp-savingline { font-size: var(--t-lead); font-weight: 300; line-height: 1.45; color: rgba(255,255,255,.72); margin-top: 36px; max-width: 52ch; text-wrap: pretty; }
.tmp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.tmp-stats > div { border-top: 1px solid rgba(255,255,255,.24); padding-top: 14px; }
.tmp-stats b { display: block; font-size: var(--t-h2); font-weight: 300; line-height: 1; letter-spacing: var(--k-tight); margin: 14px 0 8px; }
.tmp-stats small { font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--k-label); text-transform: uppercase; color: rgba(255,255,255,.55); }

/* ------------------------------------------------------------ advarsel */

.tmp-caution {
  background: var(--canvas); padding: 24px var(--pad);
  display: flex; align-items: flex-start; gap: 14px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.tmp-caution svg { flex: none; margin-top: 2px; color: var(--slate); }
.tmp-caution p { font-size: var(--t-body); line-height: 1.55; color: var(--slate); max-width: 74ch; text-wrap: pretty; }

/* ------------------------------------------------------------- valg */

.tmp-options { padding: 80px var(--pad) 0; display: grid; grid-template-columns: 1.6fr 1fr; gap: 0 80px; align-items: start; }
.tmp-options h2 { font-size: var(--t-h2); font-weight: 300; line-height: 1.1; letter-spacing: var(--k-tight); }

.tmp-orow { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1.1fr; gap: 0 24px; align-items: baseline; }
.tmp-ohead { margin-top: 40px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.tmp-ohead > div { font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--k-label); text-transform: uppercase; color: var(--subtle); }
.tmp-otr {
  padding: 22px 0; border-bottom: 1px solid var(--line); cursor: pointer; width: 100%;
  text-align: left; background: transparent; border-left: 0; border-right: 0; border-top: 0;
  font-family: inherit; color: inherit;
}
.tmp-otr:hover, .tmp-otr[aria-current="true"] { background: var(--canvas); }
.tmp-otr[aria-current="true"] { border-bottom-color: var(--ink); }
.tmp-otr .tmp-name { font-size: var(--t-cell); letter-spacing: var(--k-body); }
.tmp-otr .tmp-meta { font-size: var(--t-small); line-height: 1.4; color: var(--subtle); margin-top: 5px; }
.tmp-warn { font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--k-label); text-transform: uppercase; color: var(--amber); margin-top: 8px; }
.tmp-year { font-size: var(--t-title); line-height: 1.1; letter-spacing: var(--k-tight); }
.tmp-extra { font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--k-label); text-transform: uppercase; color: var(--subtle); margin-top: 6px; }

.tmp-bucket { margin-top: 40px; }
.tmp-bucket > h3 { font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--k-label); text-transform: uppercase; color: var(--subtle); }
.tmp-bucket .tmp-quiet {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 16px 0; border-bottom: 1px solid var(--line); opacity: .55;
}
.tmp-bucket .tmp-quiet strong { font-size: var(--t-cell); font-weight: 400; }
.tmp-bucket .tmp-quiet span { font-size: var(--t-small); color: var(--subtle); text-align: right; }
.tmp-bucket > p { font-size: var(--t-small); line-height: 1.6; color: var(--subtle); margin-top: 12px; max-width: 70ch; text-wrap: pretty; }

/* -------------------------------------------------------- detaljekort */

.tmp-detail { position: sticky; top: 24px; border: 1px solid var(--ink); padding: 32px; }
.tmp-detail h3 { font-size: var(--t-fig); font-weight: 300; line-height: 1.15; letter-spacing: var(--k-tight); margin-top: 14px; text-wrap: pretty; }
.tmp-detail .tmp-meta { font-size: var(--t-small); line-height: 1.5; color: var(--subtle); margin-top: 8px; }
.tmp-keyfigs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; }
.tmp-keyfigs > div { border-top: 1px solid var(--ink); padding-top: 12px; }
.tmp-keyfigs b { display: block; font-size: var(--t-fig); font-weight: 300; line-height: 1; letter-spacing: var(--k-tight); margin: 10px 0 6px; }
.tmp-keyfigs small { font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--k-label); text-transform: uppercase; color: var(--subtle); }
.tmp-kv { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.tmp-kv dt { font-size: var(--t-small); line-height: 1.35; color: var(--slate); }
.tmp-kv dd { font-size: var(--t-small); line-height: 1.35; text-align: right; }
.tmp-detail .tmp-note { font-size: var(--t-action); line-height: 1.55; color: var(--subtle); margin-top: 12px; text-wrap: pretty; }
.tmp-detail .tmp-eyebrow { margin: 32px 0 4px; }

/* --------------------------------------------------------- App Store */

/*
 * Badge'et er Apples egen fil, brugt uændret og hostet lokalt.
 *
 * Lokalt af to grunde: Apples retningslinjer kræver, at kunstværket ikke
 * gentegnes eller ændres, og et hotlink til deres CDN ville sende hver
 * eneste besøgendes IP, browser og referrer til Apple — på en side, hvis
 * hele pointe er, at det ikke sker.
 *
 * Frizonen omkring badge'et er Apples krav: mindst en tiendedel af
 * badge-højden hele vejen rundt.
 */
.tmp-appstore {
  border-top: 1px solid var(--line);
  margin: 0 var(--pad);
  padding: 26px 0 88px;
}
.tmp-appstore a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.tmp-appstore a:hover { text-decoration-color: var(--ink); }
.tmp-appstore p {
  font-size: var(--t-body); line-height: 1.55; color: var(--slate);
  max-width: 58ch; text-wrap: pretty; flex: 1 1 30ch;
}
.tmp-badge {
  display: inline-block; padding: 6px; flex: none;
  line-height: 0; text-decoration: none;
}
.tmp-badge:hover { text-decoration: none; opacity: .78; }
.tmp-badge img { display: block; width: 140px; height: auto; }

/* ---------------------------------------------------------- afsnit */

.tmp-section { padding: 96px var(--pad) 0; }
.tmp-section h2 { font-size: var(--t-h2); font-weight: 300; line-height: 1.1; letter-spacing: var(--k-tight); max-width: 22ch; text-wrap: pretty; }
.tmp-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; margin-top: 48px; align-items: start; }
.tmp-three > div { border-top: 1px solid var(--ink); padding-top: 16px; }
.tmp-three h3 { font-size: var(--t-title); font-weight: 400; line-height: 1.35; letter-spacing: var(--k-body); margin: 14px 0 12px; }
.tmp-three p { font-size: var(--t-body); line-height: 1.6; color: var(--slate); max-width: 40ch; text-wrap: pretty; }

.tmp-privacy { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0 96px; align-items: start; }
.tmp-privacyrows > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; border-top: 1px solid var(--line); padding: 18px 0; }
.tmp-privacyrows dt { font-size: var(--t-body); line-height: 1.4; max-width: 34ch; }
.tmp-privacyrows dd { font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--k-label); text-transform: uppercase; color: var(--slate); flex: none; padding-top: 4px; }

.tmp-footer { padding: 96px var(--pad) 88px; margin-top: 96px; border-top: 1px solid var(--line); }
.tmp-footer .tmp-three > div { border-top: 0; padding-top: 0; }
.tmp-footer p { font-size: var(--t-small); line-height: 1.6; color: var(--slate); max-width: 40ch; }
.tmp-footer .tmp-eyebrow { margin-bottom: 14px; }
.tmp-links { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.tmp-brand { display: flex; align-items: center; gap: 14px; font-size: var(--t-cell); letter-spacing: var(--k-body); }
.tmp-mark { width: 40px; height: 40px; background: var(--ink); flex: none; position: relative; display: block; }
.tmp-mark::before { content: ""; position: absolute; inset: 9px; border-radius: 999px; background: var(--paper); }
.tmp-mark::after { content: ""; position: absolute; left: 50%; top: 7px; width: 1.5px; height: 26px; background: var(--ink); transform: translateX(-50%); }
.tmp-colophon { border-top: 1px solid var(--line); margin-top: 64px; padding-top: 24px; font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--k-label); text-transform: uppercase; color: var(--subtle); }

/* ------------------------------------------------------------ smal */

@media (max-width: 1100px) {
  .tmp { --pad: 40px; }
  .tmp-options, .tmp-dosepanel, .tmp-privacy { grid-template-columns: 1fr; gap: 56px 0; }
  .tmp-detail { position: static; }
  .tmp-savinggrid { grid-template-columns: 1fr; gap: 48px 0; }
}

@media (max-width: 760px) {
  .tmp { --pad: 20px; }
  .tmp-resmeta { align-items: flex-start; text-align: left; gap: 2px; }
  /* 44px trykmål på telefon; luften over hentes fra .tmp-resmeta's gap. */
  .tmp-toggle { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .tmp-hero { padding-top: 56px; }
  .tmp-promises, .tmp-three { grid-template-columns: 1fr; gap: 32px 0; }

  /* Tabellen bliver til kort. Seks kolonner på en telefon er ikke en tabel,
     det er en gætteleg. */
  .tmp-thead, .tmp-ohead { display: none; }
  /* To lige halvdele. Før var anden kolonne «auto» og blev bred af
     pakningsteksten («300 stk. filmovertrukne tabl.»); første kolonne blev
     klemt, så tal brækkede midt over — «51,60» på én linje og «kr» på næste. */
  .tmp-row, .tmp-orow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 20px; }
  /* Vælg på [data-label] frem for .tmp-cell: kolonnen «Kr / år» i
     sammenligningen har kun .tmp-num og stod derfor uden etiket på mobil —
     netop det tal siden findes for. */
  .tmp-tr [data-label], .tmp-otr [data-label] { text-align: left; min-width: 0; overflow-wrap: break-word; }
  /* Etiket over værdi frem for foran den: i en smal spalte ombrød den
     inline-etiket uforudsigeligt midt i sætningen. */
  .tmp-tr [data-label]::before, .tmp-otr [data-label]::before {
    content: attr(data-label);
    display: block; margin-bottom: 3px;
    font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--k-label);
    text-transform: uppercase; color: var(--subtle);
  }
  .tmp-tr > div:first-child, .tmp-otr > div:first-child { grid-column: 1 / -1; }
  /* Pakningsteksten er den eneste lange — den får sin egen linje nederst. */
  .tmp-tr [data-label="Pakning"] { grid-column: 1 / -1; order: 1; }
  .tmp-num { text-align: left; }
  .tmp-more { padding: 20px 0; }
  .tmp-forms { padding: 24px 20px; }
  .tmp-genveje { margin-top: 40px; }
  .tmp-indeksliste { grid-template-columns: 1fr 1fr; }
  .tmp-formsgrid { grid-template-columns: 1fr; gap: 28px 0; }
  .tmp-formhoved { display: block; }
  .tmp-formhoved .tmp-eyebrow { margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .tmp *, .tmp *::before, .tmp *::after { transition: none !important; animation: none !important; }
}