/* Ribbonfly Marquee — 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:        #fcfbff;
  --bg-sunk:   #f4f1fc;
  --bg-raise:  #ffffff;
  --ink:       #19142f;
  --ink-soft:  #534b70;
  --ink-faint: #766e92;
  --line:      #e4e0f3;
  --line-soft: #eeebf8;
  --brand:     #4a2fd1;
  --brand-ink: #3820a8;
  --accent:    #6d28d9;
  --accent-ink:#5b21b6;
  --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:        #120e26;
    --bg-sunk:   #171232;
    --bg-raise:  #1d1740;
    --ink:       #ece9fb;
    --ink-soft:  #b2abd0;
    --ink-faint: #8d86ad;
    --line:      #2f2860;
    --line-soft: #251f4e;
    --brand:     #b3a4ff;
    --brand-ink: #cbc0ff;
    --accent:    #c6f432;
    --accent-ink:#d6f86a;
    --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); }

/* ---------- vaerktoejskort ---------- */

.tool {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raise);
  padding: 20px;
  margin: 22px 0 26px;
}
.tool-head { margin-bottom: 16px; }
.tool-head h2 { margin: 0 0 4px; font-size: 18px; }
.tool-head p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.tool-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.tool-out { margin-top: 18px; }
.tool-out:empty { display: none; }

.result-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  font-size: 15px;
}
.result-list li {
  margin: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.result-list li:last-child { border-bottom: 0; }
.result-list li:nth-child(even) { background: var(--bg-sunk); }
.result-list .n {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  min-width: 2.2em;
}
.result-list .d { font-variant-numeric: tabular-nums; }
.result-list .tag {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--ink-faint);
  white-space: nowrap;
}

.month-grid {
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
  font-size: 14.5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.month-grid th {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 7px 2px;
}
.month-grid td {
  text-align: center;
  padding: 7px 2px;
  height: 40px;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line-soft);
}
.month-grid td.on {
  background: var(--ok-bg);
  color: var(--ok);
  font-weight: 650;
}
.month-grid td.on .dot { display: block; font-size: 8px; line-height: 1; margin-top: 1px; }
.month-grid tr:last-child td { border-bottom: 0; }

.kv { font-size: 15px; margin: 0; }
.kv div {
  display: flex;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
}
.kv div:last-child { border-bottom: 0; }
.kv dt { color: var(--ink-soft); min-width: 190px; flex: 0 0 auto; font-size: 14.5px; }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; }

.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; }

/* ---------- vejledningssider ---------- */

.related {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.related h2 { margin-top: 0; font-size: 15px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint); }
.related ul { list-style: none; padding: 0; margin: 0; font-size: 15.5px; }
.related li { margin-bottom: 7px; }

.cta-band {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-sunk);
  padding: 18px 20px;
  margin: 30px 0;
  font-size: 15.5px;
}
.cta-band p { margin: 0 0 10px; }
.cta-band p:last-child { margin: 0; }

.index-groups { margin-top: 10px; }
.index-groups h2 { font-size: 16px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint); margin-top: 34px; }
.index-groups ul { list-style: none; padding: 0; font-size: 15.5px; }
.index-groups li { margin-bottom: 6px; }

@media (max-width: 620px) {
  body { font-size: 16px; }
  h1 { font-size: 27px; }
  h2 { font-size: 20px; }
  .lede, .dek { font-size: 17.5px; }
  .site-container { padding: 30px 18px 56px; }
  .kv div { flex-direction: column; gap: 2px; }
  .kv dt { min-width: 0; }
}

/* ---------- forsiden: en pluginside, ikke et vaerktoej ----------
   Omlagt 05-09-2026 efter ejerens beslutning: forsiden skal forklare, vise
   og prissaette - som de store pluginsites goer det. Vaerktoejerne bor paa
   vejledningerne. */

.home { padding-top: 34px; }

.hero--home { max-width: 720px; padding: 10px 0 22px; }
.hero--home h1 { font-size: 42px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 16px; }
.hero-proof {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 14.5px;
  color: var(--ink-faint);
}
.hero-proof li { margin: 0; padding-left: 16px; position: relative; }
.hero-proof li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
}

.shot { margin: 0; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raise);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px -18px rgba(0, 0, 0, 0.25);
}
.shot figcaption {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 10px 2px 0;
}
.shot--hero { margin: 8px 0 0; }
/* Guides: hent-knappen og billedet (gen.py, 05-10-2026). */
.guide-get { margin: 0 0 26px; }
.cta-band + .guide-get { margin: 18px 0 0; }
.guide-shot { margin: 22px 0 26px; }

.section { margin-top: 64px; }
.section-title { margin: 0 0 8px; font-size: 27px; letter-spacing: -0.015em; }
.section-dek { font-size: 17px; color: var(--ink-soft); max-width: 680px; margin: 0 0 24px; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.feature {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raise);
  padding: 20px 20px 14px;
}
.feature h3 { margin: 0 0 8px; font-size: 16.5px; }
.feature p { margin: 0 0 6px; font-size: 15.5px; color: var(--ink-soft); line-height: 1.55; }

.shot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px 22px;
  margin-top: 22px;
}

.section--pro {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px;
}
.pro-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
}
.pro-split .section-title { font-size: 25px; }
.check-list { list-style: none; padding: 0; margin: 14px 0 18px; font-size: 15.5px; }
.check-list li { padding-left: 26px; position: relative; margin-bottom: 8px; }
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--ok);
  font-weight: 700;
}
.pro-price { margin: 6px 0 0; font-size: 22px; letter-spacing: -0.01em; }
.pro-price .note { display: inline; margin-left: 6px; }

.compare { margin-top: 18px; font-size: 15.5px; }
.compare th:first-child { width: 60%; }
.compare th, .compare td { text-align: center; }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare th:nth-child(3) { color: var(--accent); }
.compare .yes { color: var(--ok); font-weight: 700; }
.compare .no { color: var(--ink-faint); }
.compare-price td { font-weight: 680; font-size: 17px; border-bottom: 0; background: var(--bg-sunk); }

.faq { margin-top: 18px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary {
  cursor: pointer;
  font-weight: 620;
  font-size: 16.5px;
  padding: 12px 0;
  list-style: none;
  position: relative;
  padding-right: 30px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 10px;
  color: var(--ink-faint);
  font-size: 20px;
  font-weight: 400;
}
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 14px; color: var(--ink-soft); font-size: 15.5px; }

.cta-final {
  margin-top: 64px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 38px 24px 34px;
}
.cta-final h2 { margin: 0 0 10px; font-size: 26px; }
.cta-final p { max-width: 560px; margin: 0 auto 6px; color: var(--ink-soft); }
.cta-final .hero-actions { justify-content: center; }

@media (max-width: 760px) {
  .hero--home h1 { font-size: 30px; }
  .pro-split { grid-template-columns: 1fr; gap: 22px; }
  .section--pro { padding: 24px 18px; }
  .section { margin-top: 48px; }
  .section-title { font-size: 23px; }
  .compare th:first-child { width: auto; }
}

/* ==========================================================================
   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; }

/* 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, var(--bg-2));
}
.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, var(--muted));
  cursor: pointer;
  user-select: none;
}
.plan-switch label:hover { color: var(--ink, var(--text)); }
.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, var(--panel));
  color: var(--ink, var(--text));
  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; }

/* ==========================================================================
   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:      #140f2e;
  --night-2:    #271b5c;
  --night-line: rgba(255, 255, 255, .12);
  --night-ink:  #f0eeff;
  --night-soft: #bdb6dc;
  --glow:       #c6f432;   /* accent paa natblaat: knapper og fremhaevede ord */
  --glow-ink:   #d9fa74;
  --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: #1a1530;
  box-shadow: 0 8px 22px -10px rgba(198, 244, 50, .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(109, 40, 217, .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(198, 244, 50, .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(198, 244, 50, .16), transparent 60%),
    radial-gradient(800px 380px at -10% 110%, rgba(130, 90, 240, .22), 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, #f1ebff, #e1d6fd);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(109, 40, 217, .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(198, 244, 50, .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; }

/* hero-illustrationen */
.hero-visual {
  display: grid;
  grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.5fr);
  align-items: center;
  gap: 22px;
  margin-top: 56px;
}
.hero-visual-note { margin: 14px 0 0; text-align: right; font-size: 12.5px; color: #8796b3; }
.mock-feed, .mock-site, .sync-card {
  background: #fff;
  color: #1c2233;
  border-radius: 16px;
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
}
.mock-feed { padding: 18px 18px 14px; transform: rotate(-1.5deg); }
.mock-feed-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-size: 15px; }
.mock-chip { margin-left: auto; font-size: 11.5px; font-weight: 650; padding: 3px 8px; border-radius: 999px; background: #eef2fb; color: #3a4d78; white-space: nowrap; }
.mock-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.mock-dot--g { background: #3b82f6; }
.mock-dot--o { background: #0ea5a4; }
.mock-dot--t { background: #a855f7; }
.mock-feed ul { list-style: none; padding: 0; margin: 0; }
.mock-feed li { display: flex; gap: 12px; padding: 9px 10px; border-radius: 9px; font-size: 14.5px; margin: 0 0 4px; background: #f5f7fb; }
.mock-feed li span { font-family: var(--mono); font-size: 12.5px; color: #5d6780; padding-top: 1px; min-width: 76px; }
.mock-foot { display: flex; align-items: center; gap: 7px; margin: 10px 2px 0; font-size: 12.5px; color: #1c7a4b; font-weight: 600; }
.mock-foot .ic { width: 15px; height: 15px; }
.mock-arrow {
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--glow); color: #1a1530;
  box-shadow: 0 0 0 8px rgba(198, 244, 50, .18), 0 14px 30px -10px rgba(198, 244, 50, .8);
}
.mock-arrow .ic { width: 26px; height: 26px; stroke-width: 2.6; }
.mock-site { overflow: hidden; }
.mock-bar, .home .frame-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px;
  background: #f1f3f8;
  border-bottom: 1px solid #e3e7ef;
}
.mock-bar i, .home .frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d3d8e3; }
.mock-bar span, .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;
}
.mock-site-body { padding: 18px 20px 20px; }
.mock-cal-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.mock-cal-head strong { font-size: 20px; letter-spacing: -0.02em; }
.mock-cal-head span { font-size: 13.5px; color: #5d6780; font-weight: 600; }
.mock-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.mock-cal b { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #8a93a8; padding: 0 4px 2px; }
.mock-cal div { min-height: 64px; border-radius: 8px; background: #f6f8fb; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.mock-cal div.today { box-shadow: inset 0 0 0 2px var(--glow); background: #f7fbe6; }
.mock-cal em { font-style: normal; font-size: 11.5px; color: #6b7489; font-weight: 600; }
.ev { font-size: 11px; font-weight: 650; line-height: 1.25; padding: 4px 5px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev--a { background: #e1edff; color: #1d4ed8; }
.ev--b { background: #fde9d7; color: #9a4410; }
.ev--c { background: #dcf5e8; color: #17703f; }
.ev--d { background: #efe4fd; color: #6b2fbf; }
.ev--e { background: #fff1c7; color: #8a5a00; }
.ev--x { text-decoration: line-through; opacity: .7; }

/* 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; }

/* pro */
.pro2-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 54px; align-items: center; }
.pro2 .title2 { color: #fff; }
.pro2-dek { color: var(--night-soft); font-size: 18px; margin: 0 0 22px; }
.ticks { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 11px; }
.ticks li { display: flex; gap: 11px; margin: 0; color: var(--night-ink); font-size: 16px; }
.ticks .ic { width: 20px; height: 20px; color: var(--glow); stroke-width: 2.6; margin-top: 2px; }
.pro2-price { margin: 0 0 6px; color: var(--night-soft); font-size: 15px; }
.pro2-price strong { color: #fff; font-size: 32px; letter-spacing: -0.02em; }
.pro2-price .badge--save { border-color: var(--glow); color: var(--glow); }
.sync-card { padding: 8px 8px 6px; transform: rotate(1deg); }
.sync-head { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px 12px; border-bottom: 1px solid #e8ebf2; }
.sync-head strong { font-size: 17px; }
.sync-head span { font-size: 12.5px; color: #8a93a8; font-weight: 600; }
.sync-row { display: flex; align-items: center; gap: 13px; padding: 15px 16px; border-bottom: 1px solid #eef1f6; }
.sync-row > div { flex: 1; min-width: 0; }
.sync-row strong { display: block; font-size: 15px; }
.sync-row small { display: block; font-size: 12.5px; color: #6b7489; }
.state { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.state--ok { background: #dcf5e8; color: #17703f; }
.state--warn { background: #fff1c7; color: #8a5a00; }
.sync-foot { margin: 0; padding: 11px 16px 10px; font-size: 12px; color: #8a93a8; }

/* 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(198, 244, 50, .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, #2c2260, #221a4c); color: var(--glow); box-shadow: inset 0 0 0 1px rgba(198, 244, 50, .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; }
  .hero-visual { grid-template-columns: 1fr; }
  .mock-feed { max-width: 420px; transform: none; }
  .mock-arrow { transform: rotate(90deg); justify-self: center; }
  .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)); }
  .sync-card { transform: none; }
}
@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; }
  .ev { font-size: 9.5px; padding: 3px; }
  .mock-site-body { padding: 14px 12px; }
  .site-container > .page-head:first-child h1 { font-size: 30px; }
  .site-nav { gap: 16px; }
}
.plan-switch label { margin: 0; }


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

.band--glowsoft {
  background:
    radial-gradient(700px 360px at 100% 0%, rgba(198, 244, 50, .10), transparent 65%),
    radial-gradient(700px 360px at 0% 100%, rgba(120, 80, 230, .09), 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(198, 244, 50, .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(198, 244, 50, .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; }
}


/* ---------- Ribbonfly: produktets eget udtryk ---------- */
.badge--pro { color: #fff; }
@media (prefers-color-scheme: dark) { .badge--pro { color: #14161a; } }
.btn--accent { color: #fff; }
@media (prefers-color-scheme: dark) { .btn--accent { color: #14161a; } }
.shot-strip { margin: 0; }

/* ---------- vaerktoejer: forhaandsvisningen af en marquee ---------- */
.tool-preview { margin: 18px 0 0; padding: 16px 18px; border: 1px dashed var(--line); border-radius: 10px; background: var(--bg-sunk); overflow: hidden; font-size: 20px; }
.tool-preview p { margin: 0; }
.tool-preview .rfm__group > blockquote { margin: 0; padding: 4px 0 4px 14px; border-left: 3px solid var(--brand); font-size: 17px; }
.tool-preview .rfm__group > blockquote p { margin: 0; }
.tool-preview .rfm__toggle { background: var(--bg-raise); color: var(--ink); border-color: var(--ink-faint); }
.tool-preview .rfm__toggle:focus-visible { outline-color: var(--brand); box-shadow: none; }

/* ---------- forsiden: Ribbonfly-specifikke dele ---------- */
.band--tight { padding: 56px 0 8px; }
.hero-note { margin: 14px 0 0; font-size: 14.5px; color: var(--night-soft); max-width: 640px; }
.hero-note a { color: var(--glow-ink); }
.hero-visual--one { display: block; margin-top: 44px; }
.rs { max-width: 820px; margin: 0 auto; transform: rotate(-1deg); }
.rs-body { padding: 14px 0 12px; background: #fff; }
.rs-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.rs-row + .rs-row { border-top: 1px solid #eeeaf8; }
.rs-strip { flex: 1; display: flex; gap: 16px; overflow: hidden; white-space: nowrap; margin-left: -34px; min-width: 0; }
.rs-pill { flex: none; display: inline-flex; align-items: center; gap: 8px; border: 2px solid currentColor; border-radius: 10px; padding: 7px 14px; font-weight: 650; font-size: 15px; }
.rs-pill i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.rs-txt { flex: none; font-size: 19px; color: #2a2450; }
.rs-quote { flex: none; border-left: 3px solid #4a2fd1; padding-left: 12px; font-size: 16.5px; color: #2a2450; }
.rs-btn { flex: none; margin-right: 18px; border: 1.5px solid #1c1838; border-radius: 999px; padding: 2px 12px; font-size: 12.5px; background: #fff; color: #1c1838; }
.rs-btn--play { background: var(--glow); border-color: #9bc214; }
.home .frame--wide { max-width: 980px; margin: 0 auto; }
.msg--info { background: var(--line-soft); color: var(--ink-soft); }
.pro2 .msg--info { background: rgba(255, 255, 255, .08); color: var(--night-soft); border-color: rgba(255, 255, 255, .18); margin-top: 16px; }
.pro2 .msg--info strong { color: #fff; }
.status { padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-sunk); margin: 14px 0; }
.status.ok { background: var(--ok-bg); color: var(--ok); border-color: currentColor; }
.status.bad { background: var(--bad-bg); color: var(--bad); border-color: currentColor; }
.home .frame--narrow { max-width: 360px; margin-inline: auto; }
html { scroll-padding-top: 84px; } /* den klaebende header daekker ikke et felt, der faar fokus eller rulles til */