/* Frame Economics — cookie banner theme + consent-gated media.
   Uses only the site tokens from site.css. "Accept all" and "Reject all" must
   stay visually equal (German courts and the DSK treat a weaker "Reject" as
   an invalid consent), so both buttons share one style. */

#cc-main {
  --cc-font-family: var(--display, "Helvetica Neue", Arial, sans-serif);
  --cc-modal-border-radius: var(--radius, 4px);
  --cc-btn-border-radius: var(--radius, 4px);
  --cc-bg: var(--surface, #141416);
  --cc-primary-color: var(--paper, #FFFFFF);
  --cc-secondary-color: var(--muted, #A1A1A6);
  --cc-link-color: var(--red-bright, #F2664E);
  --cc-btn-primary-bg: var(--paper, #FFFFFF);
  --cc-btn-primary-color: var(--ink, #0B0B0C);
  --cc-btn-primary-border-color: var(--paper, #FFFFFF);
  --cc-btn-primary-hover-bg: var(--muted, #A1A1A6);
  --cc-btn-primary-hover-color: var(--ink, #0B0B0C);
  --cc-btn-primary-hover-border-color: var(--muted, #A1A1A6);
  --cc-btn-secondary-bg: var(--surface-2, #1E1E21);
  --cc-btn-secondary-color: var(--paper, #FFFFFF);
  --cc-btn-secondary-border-color: var(--surface-2, #1E1E21);
  --cc-btn-secondary-hover-bg: var(--ink, #0B0B0C);
  --cc-btn-secondary-hover-color: var(--paper, #FFFFFF);
  --cc-btn-secondary-hover-border-color: var(--muted, #A1A1A6);
  --cc-separator-border-color: var(--surface-2, #1E1E21);
  --cc-toggle-on-bg: var(--red, #E0533B);
  --cc-toggle-off-bg: var(--surface-2, #1E1E21);
  --cc-toggle-on-knob-bg: var(--paper, #FFFFFF);
  --cc-toggle-off-knob-bg: var(--muted, #A1A1A6);
  --cc-toggle-readonly-bg: var(--surface-2, #1E1E21);
  --cc-toggle-readonly-knob-bg: var(--muted, #A1A1A6);
  --cc-cookie-category-block-bg: var(--ink, #0B0B0C);
  --cc-cookie-category-block-border: var(--surface-2, #1E1E21);
  --cc-cookie-category-block-hover-bg: var(--ink, #0B0B0C);
  --cc-cookie-category-block-hover-border: var(--surface-2, #1E1E21);
  --cc-cookie-category-expanded-block-bg: var(--ink, #0B0B0C);
  --cc-cookie-category-expanded-block-hover-bg: var(--ink, #0B0B0C);
  --cc-section-category-border: var(--surface-2, #1E1E21);
  --cc-footer-bg: var(--ink, #0B0B0C);
  --cc-footer-color: var(--muted, #A1A1A6);
  --cc-footer-border-color: var(--surface-2, #1E1E21);
  --cc-overlay-bg: rgba(11, 11, 12, 0.72);
}
#cc-main .cm__title, #cc-main .pm__title { font-family: var(--serif, "Newsreader", Georgia, serif); font-weight: 600; }

/* Video placeholder shown until "External media" is allowed. */
.fe-media-gate {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1rem;
  width: 100%; height: 100%; min-height: 220px; padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--surface, #141416); border: var(--rule, 1px solid #1E1E21); border-radius: var(--radius, 4px);
  color: var(--muted, #A1A1A6); font-size: 0.92rem; line-height: 1.5;
}
.fe-media-gate p { max-width: 52ch; margin: 0; }
.fe-media-gate a { color: var(--red-bright, #F2664E); }

/* YouTube thumbnails in the portfolio stay blank until "External media" is allowed. */
img.fe-thumb-pending { visibility: hidden; }
.card__facade:has(img.fe-thumb-pending)::after {
  content: "Preview loads from YouTube once you allow External media in Cookie settings, or when you press play.";
  position: absolute; inset: auto 0.9rem 0.9rem 0.9rem;
  font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace); font-size: 0.68rem; letter-spacing: 0.04em; line-height: 1.45; color: var(--muted, #A1A1A6);
}

/* Footer: legal links + independence line */
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.footer-legal a, .footer-legal button {
  color: inherit; background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit;
  text-transform: inherit; cursor: pointer; margin-left: 0 !important;
}
.footer-legal a:hover, .footer-legal button:hover { color: var(--paper, #FFFFFF); }
.footer-independence {
  width: 100%; margin-top: 0.4rem; text-transform: none; letter-spacing: 0.02em;
  font-family: var(--display, "Helvetica Neue", Arial, sans-serif); font-size: 0.78rem; color: #6E6E73;
}

/* Small print under forms and next to result claims */
.form-legal { margin-top: 0.9rem; font-size: 0.8rem; line-height: 1.5; color: var(--muted, #A1A1A6); max-width: 60ch; }
.form-legal a { color: var(--paper, #FFFFFF); text-decoration: underline; text-underline-offset: 2px; }
.form-optin { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 0.9rem; font-size: 0.86rem; line-height: 1.45; color: var(--muted, #A1A1A6); cursor: pointer; }
.form-optin input { margin-top: 0.2rem; flex-shrink: 0; accent-color: var(--red, #E0533B); }
.result-note { margin-top: 1rem; font-size: 0.8rem; line-height: 1.5; color: var(--muted, #A1A1A6); max-width: 70ch; }

/* Legal pages */
.legal { max-width: 74ch; }
.legal h2 { font-family: var(--serif, "Newsreader", Georgia, serif); font-size: var(--step-2, 1.7rem); margin: 2.6rem 0 0.9rem; color: var(--paper, #FFFFFF); }
.legal h3 { font-size: var(--step-1, 1.3rem); margin: 1.9rem 0 0.6rem; color: var(--paper, #FFFFFF); }
.legal h4 { font-size: 1rem; margin: 1.4rem 0 0.4rem; color: var(--paper, #FFFFFF); }
.legal p, .legal li { color: var(--muted, #A1A1A6); line-height: 1.7; }
.legal p + p { margin-top: 0.8rem; }
.legal ul, .legal ol { margin: 0.7rem 0 0.9rem 1.2rem; padding: 0; display: grid; gap: 0.35rem; }
.legal a { color: var(--paper, #FFFFFF); text-decoration: underline; text-underline-offset: 2px; }
.legal strong, .legal b { color: var(--paper, #FFFFFF); font-weight: 600; }
.legal .version { font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #6E6E73; }
.legal .box { margin: 1.4rem 0; padding: 1.1rem 1.3rem; background: var(--surface, #141416); border: var(--rule, 1px solid #1E1E21); border-radius: var(--radius, 4px); }
.legal .box p { margin: 0; }
.legal .toc { display: block; margin-top: 1.2rem; columns: 2 16rem; column-gap: 2rem; }
.legal .toc li + li { margin-top: 0.35rem; }
.legal .toc li { break-inside: avoid; }
.legal .caps { text-transform: uppercase; font-size: 0.86rem; letter-spacing: 0.02em; }
.legal-table-wrap { overflow-x: auto; margin: 1rem 0 1.4rem; border: var(--rule, 1px solid #1E1E21); border-radius: var(--radius, 4px); }
.legal table { width: 100%; border-collapse: collapse; font-size: 0.86rem; min-width: 640px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 0.65rem 0.8rem; border-bottom: var(--rule, 1px solid #1E1E21); color: var(--muted, #A1A1A6); line-height: 1.5; }
.legal th { color: var(--paper, #FFFFFF); font-weight: 600; background: var(--surface, #141416); }
.legal tr:last-child td { border-bottom: 0; }
.legal .de { margin-top: 3rem; padding-top: 2rem; border-top: var(--rule, 1px solid #1E1E21); }

/* Opt-in rows inside pages that style every .field label as a caps heading
   (masterclass, application): keep them as normal sentence text. */
.field label.form-optin, label.form-optin {
  display: flex; gap: 0.6rem; align-items: flex-start; margin: 0.9rem 0 0;
  font-family: var(--display, "Helvetica Neue", Arial, sans-serif); font-size: 0.86rem; font-weight: 400;
  line-height: 1.45; letter-spacing: normal; text-transform: none; color: var(--muted, #A1A1A6); cursor: pointer;
}
.field .form-optin input[type="checkbox"], .form-optin input[type="checkbox"] {
  width: auto; height: auto; min-height: 0; margin: 0.2rem 0 0; padding: 0; flex: none;
  accent-color: var(--red, #E0533B);
}
.form-optin a { color: var(--paper, #FFFFFF); text-decoration: underline; text-underline-offset: 2px; }

/* Consent modal: "Accept all" and "Only necessary" carry equal weight (a refusal
   must be as easy as consent), and "Customize" sits under them as a quiet link. */
#cc-main .cm__btn--secondary {
  background: none; border: 0; padding: 0.35rem 0; min-height: 0;
  color: var(--muted, #A1A1A6); font-size: 0.86rem; font-weight: 400;
  text-decoration: underline; text-underline-offset: 3px;
}
#cc-main .cm__btn--secondary:hover { background: none; color: var(--paper, #FFFFFF); }
#cc-main .cm__link-group { gap: 0.4rem 1.2rem; }