/* Dedicated KetoSana Brand route; shared KaufKlarheit tokens/components remain the base. */
body[data-page="ketosana"] {
  --kk-gold: #b3943c;
  --kk-gold-soft: #f4edcf;
  --kk-forest: #123f36;
  background: #f7f8f5;
}

.kk-brand-page { overflow: hidden; }
.kk-brand-hero { position: relative; padding: clamp(4.5rem, 8vw, 7.5rem) 0 clamp(4rem, 7vw, 6.5rem); background: radial-gradient(circle at 82% 16%, rgba(179,148,60,.12), transparent 28%), linear-gradient(135deg, #f7f8f5 0%, #eef4ee 100%); }
.kk-brand-hero::after { position: absolute; right: -14rem; bottom: -19rem; width: 40rem; height: 40rem; border: 1px solid rgba(18,63,54,.1); border-radius: 50%; content: ""; }
.kk-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); align-items: center; gap: clamp(2.5rem, 8vw, 8rem); }
.kk-hero-copy { min-width: 0; }
.kk-hero-copy h1 { max-width: 780px; margin-bottom: 1.5rem; font-size: clamp(2.55rem, 5.1vw, 5rem); }
.kk-hero-copy .hero-lead { max-width: 690px; }
.kk-hero-microcopy { margin: 1rem 0 0; color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .02em; }
.kk-hero-card { width: 100%; max-width: 360px; justify-self: end; padding: 1.35rem; border: 1px solid rgba(18,63,54,.2); border-radius: 1.35rem; background: rgba(255,255,255,.78); box-shadow: 0 24px 65px rgba(18,63,54,.13); }
.kk-hero-card-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.kk-brand-mark { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; border-radius: 50%; background: var(--kk-forest); color: #fff; font-family: var(--font-display); font-size: .88rem; letter-spacing: .05em; }
.kk-card-label { color: var(--accent); font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.kk-product-image-frame { display: grid; min-height: 290px; margin: 1rem 0; place-items: center; border-radius: 1rem; background: linear-gradient(150deg, #eef4ed, #f7f0d7); }
.kk-product-image-frame img { display: block; width: auto; height: 260px; object-fit: contain; }
.kk-hero-card .hero-facts { margin-bottom: 1rem; }
.kk-hero-card .hero-facts dd { max-width: 11rem; }

.kk-fact-ribbon { border-bottom: 1px solid rgba(18,63,54,.12); background: var(--kk-forest); color: #fff; }
.kk-fact-ribbon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.16); }
.kk-fact-ribbon-grid > div { min-height: 9rem; padding: 1.45rem 1.4rem 1.5rem; background: var(--kk-forest); }
.kk-fact-ribbon-grid span { display: block; margin-bottom: .85rem; color: #cbb86e; font-size: .7rem; font-weight: 900; letter-spacing: .12em; }
.kk-fact-ribbon-grid strong { display: block; margin-bottom: .3rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; }
.kk-fact-ribbon-grid p { margin: 0; color: #d1e0da; font-size: .83rem; line-height: 1.5; }

.kk-decision-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.kk-decision-panel { padding: clamp(1.35rem, 3vw, 2rem); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.kk-decision-panel ul { display: grid; gap: .7rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.kk-decision-panel li { position: relative; padding-left: 1.5rem; color: var(--muted); font-size: .95rem; }
.kk-decision-panel li::before { position: absolute; top: .42em; left: 0; width: .55rem; height: .55rem; border-radius: 50%; background: var(--kk-gold); content: ""; }

.kk-section { background: var(--bg); }
.kk-section-tint { background: #edf3ef; }
.kk-section-dark { background: var(--kk-forest); color: #fff; }
.kk-section-dark .eyebrow { color: #cbb86e; }
.kk-section-dark .split-heading > p { color: #ccded7; }
.kk-definition-grid, .kk-application-grid, .kk-experiences-grid, .kk-origin-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(2.25rem, 8vw, 8rem); align-items: start; }
.kk-copy-block { max-width: 650px; }
.kk-copy-block p { color: var(--muted); font-size: 1.05rem; }
.kk-copy-block p + p { margin-top: 1.2rem; }
.kk-source-chip { display: inline-flex; align-items: flex-start; gap: .65rem; margin-top: .55rem; padding: .85rem 1rem; border: 1px solid var(--border); border-radius: .8rem; background: var(--surface); color: var(--muted); font-size: .79rem; line-height: 1.45; }
.kk-source-dot { flex: 0 0 auto; width: .55rem; height: .55rem; margin-top: .25rem; border-radius: 50%; background: var(--kk-gold); }

.kk-ingredient-highlights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.kk-ingredient-highlights article { padding: 1.35rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.kk-ingredient-highlights span { display: inline-flex; padding: .27rem .55rem; border-radius: 999px; background: var(--kk-gold-soft); color: #6a5721; font-size: .7rem; font-weight: 900; letter-spacing: .03em; }
.kk-ingredient-highlights h3 { margin: .65rem 0 .45rem; }
.kk-ingredient-highlights p { margin: 0; color: var(--muted); font-size: .87rem; }
.kk-ingredient-details { margin-top: 1.2rem; }
.kk-ingredient-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.kk-ingredient-bottom .other-ingredients, .kk-ingredient-bottom .ingredient-boundary { min-height: 100%; }

.kk-application-card { max-width: 650px; padding: clamp(1.35rem, 3vw, 2rem); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.kk-application-dose { display: flex; align-items: baseline; gap: .65rem; margin-bottom: .75rem; color: var(--accent-dark); }
.kk-application-dose strong { font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 500; line-height: 1; }
.kk-application-dose span { color: var(--muted); font-size: .92rem; font-weight: 800; }
.kk-application-card > p { color: var(--muted); }
.kk-application-card ul { display: grid; gap: .6rem; margin: 1.25rem 0; padding: 1.1rem 1.15rem 1.1rem 2rem; border-left: 3px solid var(--kk-gold); background: #f7f1dd; color: #665633; font-size: .86rem; }
.kk-application-card .muted { margin-bottom: 0; font-size: .8rem; }

.kk-check-table-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); background: rgba(255,255,255,.06); }
.kk-check-table { width: 100%; min-width: 800px; border-collapse: collapse; font-size: .87rem; }
.kk-check-table caption { padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.16); color: #ccded7; font-size: .74rem; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.kk-check-table th, .kk-check-table td { padding: 1rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.13); vertical-align: top; text-align: left; }
.kk-check-table tr:last-child th, .kk-check-table tr:last-child td { border-bottom: 0; }
.kk-check-table thead th { color: #cbb86e; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; }
.kk-check-table tbody th { width: 20%; color: #fff; font-size: .82rem; }
.kk-check-table tbody td { width: 40%; color: #d1e0da; }
.kk-check-table tbody td:last-child { color: #f0e5bb; }
.kk-check-cta { margin-top: 1.25rem; }

.kk-experience-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.kk-experience-cards article { padding: 1.4rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.kk-card-number { display: block; margin-bottom: 2rem; color: var(--accent); font-size: .72rem; font-weight: 900; letter-spacing: .1em; }
.kk-experience-cards p { margin: 0; color: var(--muted); font-size: .9rem; }

.kk-video-grid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; }
.kk-video-card { min-width: 0; padding: 1rem; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.kk-video-frame { position: relative; display: grid; overflow: hidden; min-height: 260px; aspect-ratio: 16 / 9; place-items: center; border-radius: calc(var(--radius) - .2rem); background: linear-gradient(135deg, #173f35, #e9e0b8); }
.kk-video-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.kk-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kk-video-frame:not(.is-loaded)::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,42,35,.02) 35%, rgba(12,42,35,.32) 100%); content: ""; pointer-events: none; }
.kk-video-load { position: relative; z-index: 1; box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.kk-video-load:disabled { cursor: not-allowed; opacity: .82; }
.kk-video-status { margin: .8rem 0 0; color: var(--muted); font-size: .8rem; }
.kk-video-transcript { margin-top: 1rem; border-top: 1px solid var(--border); }
.kk-video-transcript summary { padding-top: .85rem; color: var(--accent-dark); font-size: .86rem; font-weight: 900; }
.kk-video-transcript summary span { float: right; }
.kk-video-transcript p { margin: .85rem 0 .1rem; color: var(--muted); font-size: .87rem; }

.kk-offer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.kk-offer-card { display: flex; min-width: 0; min-height: 355px; flex-direction: column; padding: 1.35rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.kk-offer-card-featured { border-color: var(--kk-gold); box-shadow: 0 12px 35px rgba(179,148,60,.14); }
.kk-offer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; color: var(--muted); font-size: .76rem; font-weight: 800; }
.kk-offer-tag { padding: .22rem .42rem; border-radius: 999px; background: var(--kk-gold-soft); color: #6a5721; font-size: .63rem; line-height: 1.25; text-align: right; }
.kk-offer-card h3 { margin: 1.1rem 0 .25rem; font-size: 1.1rem; }
.kk-offer-volume { margin: 0; color: var(--muted); font-size: .82rem; }
.kk-offer-price { margin: 1.7rem 0 .35rem; font-family: var(--font-display); font-size: clamp(2.25rem, 3.2vw, 3rem); line-height: 1; }
.kk-offer-shipping { margin: 0; color: var(--accent-dark); font-size: .78rem; font-weight: 800; }
.kk-offer-unit { min-height: 2.7rem; margin: .6rem 0 0; color: var(--accent); font-size: .82rem; font-weight: 800; }
.kk-offer-note { min-height: 3.3rem; margin: .8rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.kk-offer-card .button { margin-top: auto; }
.kk-price-note { max-width: 850px; margin-top: 1.25rem; padding: 1rem 1.1rem; border-left: 3px solid var(--kk-gold); background: #f7f1dd; color: #665633; font-size: .82rem; }

.kk-origin-list { border-top: 1px solid var(--border); }
.kk-origin-list > div { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.kk-origin-list dt { color: var(--muted); font-size: .85rem; }
.kk-origin-list dd { margin: 0; font-size: .9rem; font-weight: 800; }

.kk-disclosure-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1rem; }
.kk-disclosure-panel { padding: clamp(1.4rem, 4vw, 2.5rem); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.kk-disclosure-panel h2 { max-width: 620px; font-size: clamp(1.8rem, 3.2vw, 2.65rem); }
.kk-disclosure-panel > p:not(.eyebrow) { max-width: 620px; color: var(--muted); }
.kk-disclosure-panel-muted { background: #edf3ef; }
.kk-final-section { padding-top: 2rem; }
.kk-final-cta { background: var(--kk-forest); }

@media (max-width: 1020px) {
  .kk-offer-grid { grid-template-columns: repeat(2, 1fr); }
  .kk-ingredient-highlights { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .kk-hero-grid, .kk-definition-grid, .kk-application-grid, .kk-experiences-grid, .kk-origin-grid, .kk-disclosure-grid, .kk-decision-grid, .kk-video-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .kk-hero-card { justify-self: start; }
  .kk-fact-ribbon-grid { grid-template-columns: 1fr; }
  .kk-fact-ribbon-grid > div { min-height: auto; }
}

@media (max-width: 720px) {
  .kk-brand-hero { padding-top: 3.25rem; }
  .kk-hero-copy h1 { max-width: 100%; font-size: clamp(2.3rem, 12.6vw, 3.55rem); line-height: 1.02; }
  .kk-hero-card { max-width: none; }
  .kk-product-image-frame { min-height: 230px; }
  .kk-product-image-frame img { height: 210px; }
  .kk-video-frame { min-height: 0; }
  .kk-ingredient-highlights, .kk-ingredient-bottom, .kk-experience-cards, .kk-offer-grid { grid-template-columns: 1fr; }
  .kk-offer-card { min-height: 0; }
  .kk-offer-price { margin-top: 1.25rem; }
  .kk-origin-list > div { grid-template-columns: 1fr; gap: .35rem; }
  .kk-fact-ribbon-grid > div { padding-inline: 1rem; }
}
