/* Belltime Events Calendar — site
   Ét stylesheet, delt af alle sider. Ingen build, ingen framework, ingen
   webfont fra en fremmed vaert (en side, der venter paa Google Fonts, er en
   side, der er langsom for den, der kom fra en soegning). */

:root {
  --bg:        #ffffff;
  --bg-sunk:   #f5f6f8;
  --bg-raise:  #ffffff;
  --ink:       #16181d;
  --ink-soft:  #565b66;
  --ink-faint: #7c828e;
  --line:      #e2e5ea;
  --line-soft: #eceef2;
  --brand:     #2b4a80;
  --brand-ink: #1e3660;
  --accent:    #b4531f;
  --accent-ink:#8f3f14;
  --ok:        #1c6b45;
  --ok-bg:     #eaf6ef;
  --warn:      #8a5a06;
  --warn-bg:   #fdf4e3;
  --bad:       #a02a1e;
  --bad-bg:    #fceeec;
  --radius:    10px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #14161a;
    --bg-sunk:   #191c21;
    --bg-raise:  #1d2027;
    --ink:       #e8eaee;
    --ink-soft:  #a8aeba;
    --ink-faint: #838a97;
    --line:      #2c3038;
    --line-soft: #23262c;
    --brand:     #8fb0e8;
    --brand-ink: #b0c8f2;
    --accent:    #e5924f;
    --accent-ink:#f0ab72;
    --ok:        #6ecf9f;
    --ok-bg:     #16251d;
    --warn:      #e5b968;
    --warn-bg:   #2a2317;
    --bad:       #f0918a;
    --bad-bg:    #2a1a19;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-ink); }

code, kbd, pre { font-family: var(--mono); font-size: 0.9em; }
code {
  background: var(--bg-sunk);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 0.08em 0.34em;
}
pre {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  overflow-x: auto;
  line-height: 1.5;
}
pre code { background: none; border: 0; padding: 0; }

hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }

/* ---------- ramme ---------- */

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-header-inner {
  max-width: 1020px;
  margin: 0 auto;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 650;
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.site-logo img { display: block; }
.site-nav { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 15px;
}
.site-nav a:hover { color: var(--ink); text-decoration: underline; }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

.site-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 22px 72px;
}
.site-container.wide { max-width: 1020px; }

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-sunk);
  padding: 30px 22px 44px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.site-footer-inner { max-width: 1020px; margin: 0 auto; }
.site-footer p { margin: 0 0 10px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; }
.site-footer nav a { color: var(--ink-soft); }
.site-footer .disclaimer { color: var(--ink-faint); font-size: 13.5px; }

/* ---------- typografi ---------- */

h1 {
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  font-weight: 680;
}
h2 {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 38px 0 12px;
  font-weight: 650;
}
h3 { font-size: 17.5px; margin: 26px 0 8px; font-weight: 650; }
p { margin: 0 0 15px; }
ul, ol { margin: 0 0 15px; padding-left: 22px; }
li { margin-bottom: 6px; }

.hero { padding: 8px 0 4px; }
.lede, .dek {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.page-head { margin-bottom: 26px; }
.note {
  font-size: 14.5px;
  color: var(--ink-faint);
  line-height: 1.55;
}
.eyebrow {
  font-size: 12.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 620;
  margin: 0 0 10px;
}

.article-body { margin-top: 8px; }
.article-body h2:first-child { margin-top: 26px; }

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 15.5px;
}
th, td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
th { font-weight: 620; color: var(--ink); background: var(--bg-sunk); }
.table-wrap { overflow-x: auto; }

blockquote {
  margin: 0 0 18px;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--line);
  color: var(--ink-soft);
}

/* ---------- knapper og felter ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-raise);
  color: var(--ink);
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.3;
}
.btn:hover { border-color: var(--ink-faint); color: var(--ink); }
.btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn--accent:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.btn--brand {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn--brand:hover { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }
@media (prefers-color-scheme: dark) {
  .btn--accent, .btn--accent:hover, .btn--brand, .btn--brand:hover { color: #14161a; }
}
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.btn--wide { width: 100%; }
/* `.btn` saetter display, og det slaar browserens egen [hidden] - som ved .badge. */
.btn[hidden] { display: none; }

label {
  display: block;
  font-size: 14px;
  font-weight: 620;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
input[type="text"], input[type="email"], input[type="date"], input[type="time"],
input[type="number"], select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--bg-raise);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
textarea { font-family: var(--mono); font-size: 13.5px; line-height: 1.5; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand);
}
.field { margin-bottom: 14px; }
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.field-row .field { margin-bottom: 0; }
.checkline { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.checkline input { width: auto; }
.checkline label { margin: 0; font-weight: 500; color: var(--ink); }

.msg {
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 14.5px;
  margin: 0 0 14px;
  border: 1px solid transparent;
  line-height: 1.5;
}
.msg:last-child { margin-bottom: 0; }
.msg--ok   { background: var(--ok-bg);   color: var(--ok);   border-color: currentColor; }
.msg--warn { background: var(--warn-bg); color: var(--warn); border-color: currentColor; }
.msg--bad  { background: var(--bad-bg);  color: var(--bad);  border-color: currentColor; }
/* Neutral. Bruges mens en side arbejder - hverken godt, skidt eller advarsel. */
.msg--info { background: var(--line-soft); color: var(--ink-soft); border-color: var(--line); }
.msg strong { font-weight: 650; }
.msg[hidden] { display: none; }

.badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 660;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--bg-sunk);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  vertical-align: 2px;
}
.badge--pro { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) { .badge--pro { color: #14161a; } }
/* Besparelsen ved aarsprisen. Ramme i accentfarven, ikke fyldt: den skal ses,
   men prisen er stadig det, oejet lander paa. */
.badge--save { background: transparent; border-color: var(--accent); color: var(--accent); }
/* `.badge` saetter display, og det slaar browserens egen [hidden]. */
.badge[hidden] { display: none; }

/* ---------- pris ---------- */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px;
  margin: 26px 0;
}
.price-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  background: var(--bg-raise);
  display: flex;
  flex-direction: column;
}
.price-card--pro { border-color: var(--accent); }
.price-card h3 { margin: 0 0 6px; font-size: 17px; }
.price-card .amount {
  font-size: 27px;
  font-weight: 680;
  letter-spacing: -0.02em;
  margin: 6px 0 4px;
}
.price-card ul { margin: 14px 0 20px; padding-left: 19px; font-size: 15px; }
.price-card ul li { margin-bottom: 7px; }
.price-card .btn { margin-top: auto; }

/* Monthly | Yearly (05-10-2026, ejeren: maanedsprisen maa ikke vaere gemt).
   Radioknapperne er skjult, men fokuserbare; :checked ~ styrer resten. */
.plan-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.plan-switch {
  display: flex;
  width: max-content;
  margin: 26px auto 0;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-sunk);
}
.plan-switch label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}
.plan-switch label:hover { color: var(--ink); }
.plan-save {
  font-size: 11.5px;
  font-weight: 680;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid var(--accent);
  color: var(--accent);
}
.plan-save[hidden] { display: none; }
#bill-m:checked ~ .plan-switch label[for="bill-m"],
#bill-y:checked ~ .plan-switch label[for="bill-y"] {
  background: var(--bg-raise);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18), 0 0 0 1px var(--line);
}
#bill-m:focus-visible ~ .plan-switch label[for="bill-m"],
#bill-y:focus-visible ~ .plan-switch label[for="bill-y"] { outline: 2px solid var(--accent); outline-offset: 2px; }
#bill-m:checked ~ .pricing-grid .plan-y,
#bill-y:checked ~ .pricing-grid .plan-m { display: none; }
.plan-sub { margin: -2px 0 0; }


/* ==========================================================================
   FABRIKKENS DESIGNLAG - skabelon/site/lag.css
   ==========================================================================
   Kopieres ORDRET ind nederst i produktets site/assets/site.css (efter
   produktets egne regler). Bygget 05-10-2026 af produkt et (Belltime), som
   ejeren kaldte "kedeligt og billigt" foer og "meget bedre" efter.

   Laget forudsaetter de grundtokens, hvert produkts site.css allerede har:
     --bg --bg-sunk --bg-raise --ink --ink-soft --ink-faint --line --line-soft
     --accent --accent-ink --brand --radius --mono
   Det tilfoejer sine egne (--night, --glow ...) og loefter header, footer,
   knapper og hver undersides .page-head uden at deres HTML roeres.
   Komponenterne (hero2, trust, steps, cards3, zig/frame--marked, pro2 med
   plan-tiles, plan-switch, cta2) staar som HTML i forside.html og pris.html.
   faerdig.py D3i maaler, at laget er brugt; D3g/D3h, at begge planer er synlige.
   ========================================================================== */

/* ---------- grundklasser, laget selv bruger (fra produkt et's site.css) ---------- */
.btn--wide { width: 100%; }
.btn[hidden], .badge[hidden] { display: none; }
.badge {
  display: inline-block; font-size: 11.5px; font-weight: 660; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 4px; vertical-align: 2px;
  background: var(--bg-sunk, var(--bg-2)); color: var(--ink-soft, var(--muted));
  border: 1px solid var(--line);
}
.badge--pro { background: var(--accent); border-color: var(--accent); color: #14161a; }
.badge--save { background: transparent; border-color: var(--accent); color: var(--accent); }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 18px; margin: 26px 0; }
.price-card { border: 1px solid var(--line); border-radius: var(--radius, 12px); padding: 22px;
  background: var(--bg-raise, var(--panel)); display: flex; flex-direction: column; }
.price-card--pro { border-color: var(--accent); }
.price-card h3 { margin: 0 0 6px; font-size: 17px; }
.price-card .amount { font-size: 27px; font-weight: 680; letter-spacing: -0.02em; margin: 6px 0 4px; }
.price-card ul { margin: 14px 0 20px; padding-left: 19px; font-size: 15px; }
.price-card ul li { margin-bottom: 7px; }
.price-card .btn { margin-top: auto; }
.price-card .note { font-size: 14.5px; color: var(--ink-faint, var(--faint)); line-height: 1.55; }
.compare .yes { color: var(--ok, #57c98a); font-weight: 700; }
.compare .no { color: var(--ink-faint, var(--faint)); }
.compare th, .compare td { text-align: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare { width: 100%; border-collapse: collapse; }

/* ==========================================================================
   LAG 2 · 05-10-2026 — ejeren: "kedelig og ser billig ud" ved siden af CatalogCSV.
   Natblaa baand med varm accent, fremhaevede ord, ikoner, kort med dybde og
   indrammede skaermbilleder. Laget ligger OVEN PAA det gamle: ingen gammel
   klasse er fjernet, saa undersider og guides arver header, footer og
   sidehoved uden at deres HTML er roert.
   ========================================================================== */

:root {
  --night:      #0f1b33;
  --night-2:    #1a2d52;
  --night-line: rgba(255, 255, 255, .12);
  --night-ink:  #eef2fa;
  --night-soft: #b7c3da;
  --glow:       #f4a259;   /* accent paa natblaat: knapper og fremhaevede ord */
  --glow-ink:   #f7b77a;
  --shadow-lg:  0 1px 2px rgba(10, 20, 40, .06), 0 24px 48px -24px rgba(10, 20, 40, .35);
}

body { overflow-x: clip; }

/* ---------- header og footer, paa alle sider ---------- */

.site-header {
  background: var(--night);
  border-bottom: 1px solid var(--night-line);
}
.site-header-inner { max-width: 1140px; padding: 14px 24px; }
.site-logo, .site-logo:hover { color: #fff; font-size: 17px; }
.site-nav { align-items: center; gap: 26px; }
.site-nav a { color: var(--night-soft); font-weight: 550; }
.site-nav a:hover { color: #fff; text-decoration: none; }
.site-nav a[aria-current="page"] { color: #fff; }

.site-footer {
  background: var(--night);
  border-top: 0;
  color: var(--night-soft);
  padding: 40px 24px 48px;
}
.site-footer-inner { max-width: 1140px; }
.site-footer a, .site-footer nav a { color: var(--night-ink); }
.site-footer .disclaimer { color: #8796b3; }

/* ---------- knapper ---------- */

.btn { border-radius: 10px; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.btn--lg { padding: 13px 24px; font-size: 16.5px; }
.btn--glow, .btn--glow:hover {
  background: var(--glow);
  border-color: var(--glow);
  color: #1b1206;
  box-shadow: 0 8px 22px -10px rgba(244, 162, 89, .9);
}
.btn--glow:hover { background: var(--glow-ink); border-color: var(--glow-ink); transform: translateY(-1px); }
.btn--ghost, .btn--ghost:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
}
.btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .45); }
/* Paa prissidens lyse kort er accentknappen den samme varme farve. */
.btn--accent { box-shadow: 0 8px 22px -12px rgba(180, 83, 31, .8); }

/* ---------- sidehoved paa undersiderne: et natblaat baand ---------- */

.site-container > .page-head:first-child {
  margin: -40px calc(50% - 50vw) 34px;
  padding: 54px calc(50vw - 50%) 46px;
  background:
    radial-gradient(900px 300px at 85% -40%, rgba(244, 162, 89, .18), transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
  color: var(--night-ink);
}
.site-container > .page-head:first-child h1 { color: #fff; font-size: 38px; letter-spacing: -0.025em; }
.site-container > .page-head:first-child .dek,
.site-container > .page-head:first-child .lede,
.site-container > .page-head:first-child p { color: var(--night-soft); }
.site-container > .page-head:first-child .eyebrow { color: var(--glow); }
.site-container > .page-head:first-child a { color: var(--glow-ink); }

/* ---------- forsiden ---------- */

.home { display: block; padding-top: 0; }
.band { padding: 84px 0; }
.band--sunk { background: var(--bg-sunk, var(--bg-2)); border-top: 1px solid var(--line-soft, var(--line)); border-bottom: 1px solid var(--line-soft, var(--line)); }
.band--night {
  background:
    radial-gradient(1100px 420px at 90% -10%, rgba(244, 162, 89, .16), transparent 60%),
    radial-gradient(800px 380px at -10% 110%, rgba(110, 150, 230, .16), transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
  color: var(--night-ink);
}
.home .wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.home .wrap--mid { max-width: 880px; }

.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-box {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff3e8, #fde3cc);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(180, 83, 31, .18);
  flex: none;
}

.kicker {
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}
.kicker--light { color: var(--glow); }
.title2 {
  font-size: 40px;
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 760;
  margin: 0 0 16px;
  max-width: 820px;
}
.dek2 { font-size: 18.5px; color: var(--ink-soft, var(--muted)); max-width: 720px; margin: 0 0 34px; }
.hl { color: var(--glow); }
.hl-ink { color: var(--accent); }

/* hero */
.hero2 { padding: 72px 0 60px; }
.hero2 h1 {
  font-size: 60px;
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: #fff;
  max-width: 900px;
  margin: 0 0 22px;
}
.hero2 .lede { color: var(--night-soft); font-size: 20px; max-width: 700px; margin: 0 0 30px; }
.home .pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--night-line);
  background: rgba(255, 255, 255, .05);
  color: var(--night-ink);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 26px;
}
.home .pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 0 4px rgba(244, 162, 89, .22); }
.hero-actions { gap: 12px; }
.hero-actions--center { justify-content: center; }
.hero-checks { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px 26px; color: var(--night-soft); font-size: 15px; }
.hero-checks li { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.hero-checks .ic { width: 17px; height: 17px; color: var(--glow); stroke-width: 2.6; }

/* fordelsraekken */
.trust { padding: 30px 0; border-bottom: 1px solid var(--line-soft, var(--line)); }
.trust-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.trust-row > div { display: flex; align-items: center; gap: 13px; font-weight: 650; font-size: 16px; }

/* saadan virker det */
.steps-split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: 46px; align-items: center; margin-top: 34px; }
.home .steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.home .steps li {
  display: flex; gap: 16px; margin: 0;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-raise, var(--panel));
  box-shadow: 0 1px 2px rgba(10, 20, 40, .04);
}
.home .steps h3 { margin: 2px 0 6px; font-size: 18px; }
.home .steps p { margin: 0; color: var(--ink-soft, var(--muted)); font-size: 15.5px; line-height: 1.55; }
.home .step-n {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--night); color: var(--glow);
  font-weight: 800; font-size: 15px;
}

/* indrammede skaermbilleder */
.home .frame {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.home .frame img { display: block; width: 100%; height: auto; }
.home .frame figcaption {
  padding: 14px 18px 16px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #565b66;
  border-top: 1px solid #e3e7ef;
  background: #fff;
}
.home .frame figcaption strong { color: #16181d; }
.home .frame--wide { margin-top: 30px; }
.shots2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 26px; align-items: start; }

/* funktionskort */
.home .cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.home .card {
  background: var(--bg-raise, var(--panel));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 24px 22px;
  box-shadow: 0 1px 2px rgba(10, 20, 40, .04);
  transition: transform .15s ease, box-shadow .15s ease;
}
.home .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.home .card h3 { margin: 16px 0 8px; font-size: 18px; letter-spacing: -0.01em; }
.home .card p { margin: 0; font-size: 15.5px; color: var(--ink-soft, var(--muted)); line-height: 1.58; }

/* sammenligning og FAQ */
.compare2 { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; border-collapse: separate; border-spacing: 0; background: var(--bg-raise, var(--panel)); margin-top: 26px; }
.compare2 th { background: var(--bg-sunk, var(--bg-2)); padding: 14px 16px; }
.compare2 td { padding: 13px 16px; }
.compare2 .pro-col { background: rgba(244, 162, 89, .08); }
.compare2 th.pro-col { color: var(--accent); }
.faq2 { margin-top: 26px; }
.faq2 details {
  background: var(--bg-raise, var(--panel));
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px 20px;
  margin-bottom: 12px;
}
.faq2 summary { font-weight: 650; font-size: 16.5px; padding: 14px 0; cursor: pointer; }
.faq2 details p { color: var(--ink-soft, var(--muted)); margin: 0 0 16px; }

/* slut */
.cta2 { text-align: center; }
.cta2 .title2 { color: #fff; margin-left: auto; margin-right: auto; }
.cta2 p { color: var(--night-soft); font-size: 17.5px; max-width: 620px; margin-left: auto; margin-right: auto; }
.cta2 .msg { text-align: left; }

/* moerk tilstand: kortene paa lyse flader foelger med */
@media (prefers-color-scheme: dark) {
  .ic-box { background: linear-gradient(180deg, #3a2615, #2c1d10); color: var(--glow); box-shadow: inset 0 0 0 1px rgba(244, 162, 89, .25); }
  .home .frame { border-color: var(--line); }
  .kicker { color: var(--glow); }
  .hl-ink { color: var(--glow); }
}

/* smal skaerm */
@media (max-width: 980px) {
  .hero2 h1 { font-size: 46px; }
  .title2 { font-size: 32px; }
  .steps-split, .pro2-split { grid-template-columns: 1fr; gap: 32px; }
  .home .cards3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .band { padding: 60px 0; }
  .hero2 { padding: 48px 0 44px; }
  .hero2 h1 { font-size: 36px; }
  .hero2 .lede { font-size: 17.5px; }
  .title2 { font-size: 27px; }
  .home .cards3, .shots2, .trust-row { grid-template-columns: 1fr; }
  .mock-cal div { min-height: 48px; padding: 4px; }
  .site-container > .page-head:first-child h1 { font-size: 30px; }
  .site-nav { gap: 16px; }
}


/* ---------- lag 3 · 05-10-2026: "A closer look" med markeringer, og lige priser ---------- */

.band--glowsoft {
  background:
    radial-gradient(700px 360px at 100% 0%, rgba(244, 162, 89, .10), transparent 65%),
    radial-gradient(700px 360px at 0% 100%, rgba(80, 120, 210, .08), transparent 65%),
    var(--bg);
}
.zig {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: center;
  margin-top: 64px;
}
.zig--flip .zig-text { order: 2; }
.zig--flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.zig-n {
  display: inline-block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--accent);
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(244, 162, 89, .14);
  margin-bottom: 14px;
}
.zig-text h3 { font-size: 28px; line-height: 1.15; letter-spacing: -0.025em; margin: 0 0 12px; }
.zig-text p { font-size: 17px; color: var(--ink-soft, var(--muted)); margin: 0; }
.home .frame--marked { transform: perspective(1400px) rotateY(-4deg); transition: transform .3s ease; }
.home .zig--flip .frame--marked { transform: perspective(1400px) rotateY(4deg); }
.home .frame--marked:hover, .home .zig--flip .frame--marked:hover { transform: none; }
.home .marked { position: relative; }
.home .mark {
  position: absolute;
  border: 2.5px solid var(--glow);
  border-radius: 8px;
  box-shadow: 0 0 0 5px rgba(244, 162, 89, .22);
  pointer-events: none;
}
.home .callout {
  position: absolute;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--night);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 10px 24px -8px rgba(10, 20, 40, .6);
  pointer-events: none;
}
.home .callout::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--glow);
  margin-right: 7px;
  vertical-align: 1px;
}

.plan-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 4px 0 14px; }
.plan-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 18px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
}
.plan-tile-name { min-height: 26px; font-size: 13px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--night-soft); display: flex; align-items: center; gap: 8px; }
.plan-tile-name .badge--save { border-color: var(--glow); color: var(--glow); letter-spacing: .04em; }
.plan-tile strong { font-size: 30px; letter-spacing: -0.02em; color: #fff; line-height: 1.15; margin-top: 4px; }
.plan-tile small { font-size: 13.5px; color: var(--night-soft); margin-bottom: 12px; }
.plan-tile .btn { margin-top: auto; }
.pro2-fine { font-size: 14px; color: var(--night-soft); margin: 0; }
.pro2-fine a { color: var(--glow-ink); }

@media (max-width: 980px) {
  .zig { grid-template-columns: 1fr; gap: 26px; margin-top: 48px; }
  .zig--flip { grid-template-columns: 1fr; }
  .zig--flip .zig-text { order: 0; }
  .home .frame--marked, .home .zig--flip .frame--marked { transform: none; }
}
@media (max-width: 640px) {
  .zig-text h3 { font-size: 23px; }
  .home .callout { font-size: 11px; padding: 4px 9px; }
  .plan-tiles { grid-template-columns: 1fr; }
}

/* ==========================================================================
   REMATE · 13-10-2026 — farver (padelbold paa nat-groen) og egne dele
   ========================================================================== */

:root {
  --night:      #0b2a2c;
  --night-2:    #124240;
  --night-line: rgba(255, 255, 255, .13);
  --night-ink:  #eef7f4;
  --night-soft: #b4cdc8;
  --glow:       #d7f24a;
  --glow-ink:   #e5f77f;
  --brand:      #17605f;
  --brand-ink:  #0f4846;
  --accent:     #3d7409;
  --accent-ink: #2d5806;
}
@media (prefers-color-scheme: dark) {
  :root { --brand: #7fd3cc; --brand-ink: #a6e4de; --accent: #bfe24f; --accent-ink: #d3f06f; }
}
.btn--glow, .btn--glow:hover { color: #101c04; box-shadow: 0 8px 22px -10px rgba(215, 242, 74, .75); }
.btn--accent { box-shadow: 0 8px 22px -12px rgba(61, 116, 9, .8); }
.ic-box { background: linear-gradient(180deg, #f1fbd0, #e0f3a4); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(61, 116, 9, .2); }
@media (prefers-color-scheme: dark) {
  .ic-box { background: linear-gradient(180deg, #243a12, #1b2c0d); box-shadow: inset 0 0 0 1px rgba(215, 242, 74, .22); }
}
.band--night { background:
  radial-gradient(1100px 420px at 90% -10%, rgba(215, 242, 74, .13), transparent 60%),
  radial-gradient(800px 380px at -10% 110%, rgba(80, 200, 190, .14), transparent 60%),
  linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%); }
.site-container > .page-head:first-child { background:
  radial-gradient(900px 300px at 85% -40%, rgba(215, 242, 74, .16), transparent 60%),
  linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%); }
.home .pill-dot { box-shadow: 0 0 0 4px rgba(215, 242, 74, .22); }
.zig-n { background: rgba(215, 242, 74, .22); }
.compare2 .pro-col { background: rgba(215, 242, 74, .12); }

/* natbaand: titel og tekst (laget har dem kun paa .pro2/.cta2) */
.band--night .title2 { color: #fff; }
.pro2-dek { color: var(--night-soft); font-size: 18px; margin: 0 0 22px; max-width: 700px; }
.pro2-fine { font-size: 14px; color: var(--night-soft); margin: 18px 0 0; }
.pro2-fine a { color: var(--glow-ink); }

/* urskaermen: et rent simulatorskaerm (rund eller firkantet) med en moerk urkasse som pynt */
.watch { display: block; border-radius: 50%; background: #181b1f; padding: 14px; box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06); }
.watch img { display: block; width: 100%; height: auto; border-radius: 50%; }
.watch--mip img { image-rendering: pixelated; }
.hero-watches { display: flex; align-items: flex-end; justify-content: center; gap: 36px; margin-top: 52px; flex-wrap: wrap; }
.hero-watches figure { margin: 0; text-align: center; }
.hero-watches .w-lg { width: 330px; }
.hero-watches .w-md { width: 230px; }
.hero-watches figcaption { margin-top: 14px; font-size: 13.5px; color: var(--night-soft); }
.hero-note { margin: 22px 0 0; text-align: center; font-size: 12.5px; color: #86a8a2; }

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; }
.state-line { margin: 14px 0 0; font-size: 14.5px; color: var(--night-soft); }
.state-line[hidden] { display: none; }

/* urrammer paa lyst: hele urets simulatorbillede */
.home .frame--watch { max-width: 440px; margin-left: auto; margin-right: auto; }
.home .frame--watch img { background: #fff; }
.watch-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; align-items: start; }

/* priskort paa pris-siden */
.pricing-grid--two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.price-card .amount small { font-size: 15px; font-weight: 600; color: var(--ink-faint); }
.waitlist-text { margin: 12px 0 0; font-size: 14.5px; color: var(--ink-soft); }
.steps-flat { list-style: none; padding: 0; margin: 18px 0 8px; display: grid; gap: 12px; counter-reset: s; }
.steps-flat li { counter-increment: s; position: relative; padding: 14px 16px 14px 56px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-raise); margin: 0; }
.steps-flat li::before { content: counter(s); position: absolute; left: 14px; top: 13px; width: 30px; height: 30px; border-radius: 9px; background: var(--night); color: var(--glow); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.steps-flat strong { display: block; margin-bottom: 2px; }

/* nogler og koder */
.key-box, .code-box { font-family: var(--mono); letter-spacing: .04em; word-break: break-all; border-radius: 10px; padding: 14px 16px; border: 1px solid var(--line); background: var(--bg-sunk); font-size: 18px; }
.code-box { font-size: 34px; text-align: center; letter-spacing: .12em; border-color: var(--accent); background: var(--bg-raise); margin: 6px 0 14px; word-break: normal; }
.copy-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; margin: 8px 0 16px; }
.copy-row .key-box { flex: 1 1 260px; }

/* oplaasningsformularen */
.unlock-card { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-raise); padding: 22px; margin: 22px 0; box-shadow: 0 1px 2px rgba(10, 20, 40, .04); }
.unlock-card h2 { margin-top: 0; }
.unlock-card .field input { font-family: var(--mono); letter-spacing: .04em; }
.unlock-card .help { font-size: 14px; color: var(--ink-faint); margin: 5px 0 0; }
.unlock-card .btn { margin-top: 4px; }

/* urlisten */
.devices { columns: 3 220px; column-gap: 28px; list-style: none; padding: 0; margin: 20px 0 8px; }
.devices li { margin: 0 0 8px; break-inside: avoid; display: flex; gap: 9px; align-items: baseline; }
.devices li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; transform: translateY(-1px); }

@media (max-width: 760px) {
  .watch-pair { grid-template-columns: 1fr; }
  .hero-watches { flex-direction: column; align-items: center; }
  .hero-watches .w-lg { width: 270px; }
  .hero-watches .w-md { width: 190px; }
  .code-box { font-size: 26px; }
}

/* titellinjen paa urrammerne (laget havde den kun sammen med Belltimes hero-illustration) */
.home .frame-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #f1f3f8; border-bottom: 1px solid #e3e7ef; }
.home .frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d3d8e3; }
.home .frame-bar span { margin-left: 10px; flex: 1; min-width: 0; font-size: 12.5px; color: #5d6780; background: #fff; border-radius: 999px; padding: 4px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.band--glowsoft { background:
  radial-gradient(700px 360px at 100% 0%, rgba(215, 242, 74, .13), transparent 65%),
  radial-gradient(700px 360px at 0% 100%, rgba(40, 150, 140, .08), transparent 65%),
  var(--bg); }