/* Kenneth feedback (video 2026-09-10) — global overrides. Loaded after all other styles.
   Palette follows the logo (brandbook §8): pink, yellow, cyan on near-black ink. */
:root {
  --omg-pink: #ff4d8d;
  --omg-pink-ink: #c81e5b; /* pink dark enough for small text on white (5.3:1) */
  --omg-yellow: #ffe14d;
  --omg-cyan: #3de1ff;
  --omg-cyan-ink: #007a94;
  --omg-ink: #141018;
  --omg-text: #2a2530; /* body copy */
  --omg-muted: #4f4a56; /* secondary copy, still ≥ 7:1 on white */
  --omg-tint-pink: #ffe8f0;
  --omg-tint-yellow: #fff7c7;
  --omg-tint-cyan: #dcf8ff;
  --omg-shadow: 0 1px 2px rgba(20, 16, 24, 0.06), 0 8px 24px rgba(20, 16, 24, 0.08);
  --omg-shadow-lift: 0 2px 4px rgba(20, 16, 24, 0.08), 0 16px 40px rgba(20, 16, 24, 0.12);
}

/* F03/F05/F10 — no thin, washed-out copy: heavier body weight and darker text */
body {
  color: var(--omg-text);
  font-weight: 500;
}
p,
li,
small,
label {
  font-weight: 500;
}

/* F01 — accent headlines in the logo pink instead of the lilac→peach pastel gradient */
.gradient-text {
  background: linear-gradient(100deg, #e02a72 0%, var(--omg-pink) 60%, #ff6f7d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.feature-hero h1 span:not(.gradient-text) {
  color: var(--omg-pink);
}

/* F01 — primary buttons: solid logo pink, ink on hover */
/* INK-TEKST PAA PINK, ikke hvid (30. september 2026). Hvid paa #ff4d8d er 3,1:1 og bestaar kun som
   stor, fed tekst; knapteksterne her er 14-16 px. Ink paa samme pink er 6,0:1. Det gaelder alle
   pink flader med tekst paa hele siden — BRAND.md §3, samme regel som Next-siderne. */
.nav-actions .button,
.hero .input-bar .button,
.button-gradient,
.filter.active {
  background: var(--omg-pink) !important;
  color: #141018 !important;
  border-color: var(--omg-pink) !important;
}
.nav-actions .button:hover,
.hero .input-bar .button:hover,
.button-gradient:hover {
  background: var(--omg-ink) !important;
  border-color: var(--omg-ink) !important;
  color: #fff !important;
}
.hero-kicker {
  background: var(--omg-tint-yellow);
  color: var(--omg-ink);
}
.announcement {
  background: var(--omg-ink);
  color: #fff;
  border-bottom: 0;
}
.announcement a {
  color: var(--omg-yellow);
}

/* F14 — soft drop shadow on cards instead of a thin 1px border.
   feedback.js tags bordered cards with .fx-card and sets html[data-edges='shadow']. */
html[data-edges='shadow'] .fx-card {
  border-color: transparent !important;
  box-shadow: var(--omg-shadow) !important;
}
@media (max-width: 640px) {
  }

/* Dark "Meet Flame" block: keep copy light after the palette remap */
.sidekick-section {
  background: radial-gradient(ellipse at 20% 55%, #5a1638, var(--omg-ink) 63%);
}
.sidekick-section p,
.sidekick-section .feature-list p,
.sidekick-copy > p {
  color: #d9d4de !important;
}
.sidekick-copy > .eyebrow,
.sidekick-label {
  color: var(--omg-yellow) !important;
}
.sidekick-copy .serif-word {
  color: var(--omg-pink) !important;
}
.footer-top p,
.footer-bottom {
  color: var(--omg-muted);
}
/* Second headline line: logo pink everywhere (was a washed-out lilac) */
.serif-word {
  color: var(--omg-pink);
}
/* Keep the test toggle away from sticky CTAs: mid-right on phones */
@media (max-width: 900px) {
      }

/* Pricing: Max is the "Most popular" plan and stands out everywhere
   (landing-page price box, homepage teaser, /pricing). */
.fx-popular {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--omg-pink);
  color: #141018;
  font: 800 12px/1 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(255, 77, 141, 0.35);
}
.price-box-grid {
  align-items: center;
  padding-top: 14px;
}
.price-box-grid .pb-featured,
.fx-teaser-plans .fx-teaser-featured {
  position: relative;
  background: var(--omg-ink) !important;
  border: 2px solid var(--omg-pink) !important;
  color: #fff;
  box-shadow: 0 18px 44px rgba(20, 16, 24, 0.28) !important;
  transform: scale(1.05);
  z-index: 1;
}
.price-box-grid .pb-featured {
  padding-block: 34px;
}
.price-box-grid .pb-featured h3,
.price-box-grid .pb-featured .pb-price b,
.fx-teaser-plans .fx-teaser-featured b {
  color: #fff;
}
.price-box-grid .pb-featured p,
.price-box-grid .pb-featured .pb-price,
.price-box-grid .pb-featured .pb-note,
.fx-teaser-plans .fx-teaser-featured span:not(.fx-popular),
.fx-teaser-plans .fx-teaser-featured small {
  color: #e6e1ea !important;
}
.fx-teaser-plans .fx-teaser-featured {
  padding-top: 26px;
}
.price-card.featured {
  background: var(--omg-ink) !important;
  border: 2px solid var(--omg-pink) !important;
  color: #fff;
  transform: scale(1.04);
  box-shadow: 0 22px 54px rgba(20, 16, 24, 0.3) !important;
  z-index: 1;
}
.price-card.featured :is(h3, strong, .price span, .plan-allowance b, .plan-allowance strong) {
  color: #fff !important;
}
.price-card.featured :is(p, li, small, .plan-topline, .plan-allowance, .plan-allowance span) {
  color: #e6e1ea !important;
}
.price-card.featured .plan-allowance {
  border-color: rgba(255, 255, 255, 0.16) !important;
}
.price-card.featured .recommended {
  background: var(--omg-pink) !important;
}
@media (max-width: 800px) {
  .price-box-grid .pb-featured,
  .fx-teaser-plans .fx-teaser-featured,
  .price-card.featured {
    transform: none;
    order: -1;
  }
  .price-box-grid {
    gap: 22px;
  }
}
.fx-teaser-plans .fx-teaser-featured .fx-popular {
  left: 24px;
  transform: translateY(-50%);
  font-size: 11px;
  padding: 6px 12px;
}
.fx-teaser-plans .fx-teaser-featured {
  margin-block: 10px 4px;
}
.final-layout .serif-word,
.faq-intro .serif-word,
.taste-copy .serif-word {
  color: var(--omg-pink);
}

/* Ink-tekst paa de pink flader der faar deres pink fra en GRADIENT i motion.css og derfor ikke
   blev fanget af reglen oeverst (30. september 2026, maalt i browseren paa alle sider).
   Hvid paa #ff4d8d er 3,1:1; ink er 6,0:1. Se BRAND.md §A.3. */
.recommended,
.recommended > span,
.price-card.featured .button,
.final-layout .button,
.mobile-sticky .button {
  color: var(--omg-ink) !important;
}
.price-card.featured .button:hover,
.final-layout .button:hover,
.mobile-sticky .button:hover {
  background: var(--omg-ink) !important;
  color: #fff !important;
}