/**
 * Rule26 AI — Global design system (tokens + components).
 * Reference on every page. Page layouts are applied in Prompts 10–11.
 *
 * Zones: 1 header | 2 body | 3 feature/callout | 4 final CTA | 5 footer
 * Constraints: no gradients; palette colors only; card radius via --r26-radius-card.
 */

@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap");

/* ── Color tokens ────────────────────────────────────────────────────────── */
:root {
  /* Dark surfaces — dense ink tones */
  --r26-near-black: #030712;
  --r26-primary-dark: #0b0f19;
  --r26-charcoal: #111827;

  /* Light surfaces */
  --r26-off-white: #f8fafc;
  --r26-white: #ffffff;

  /* Brand */
  --r26-brand: #991b1b;
  --r26-brand-hover: #7f1d1d;
  --r26-brand-blue: var(--r26-brand);
  /* Buttons on dark surfaces (#0F172A, #1E293B): white fill, dark text */
  --r26-btn-on-dark-bg: #ffffff;
  --r26-btn-on-dark-text: #0f172a;
  --r26-btn-on-dark-hover: #e2e8f0;

  /* Text — high-contrast overrides */
  --r26-text-body: #0f172a;
  --r26-text-prose: #1e293b;
  --r26-text-secondary-light: #64748b;
  --r26-text-secondary-dark: #94a3b8;
  --r26-text-on-dark: #f8fafc;

  /* Pill badge */
  --r26-pill-bg: #fef2f2;
  --r26-pill-text: #991b1b;

  /* Borders & elevation */
  --r26-border-subtle: #e2e8f0;
  --r26-shadow-card: none;
  --r26-radius-card: 6px;
  --r26-radius-btn: 4px;

  /* Layout */
  --r26-zone-header-min-height: 220px;
  --r26-content-max: 1100px;
  --r26-content-pad: clamp(1.25rem, 5vw, 2.5rem);
  --r26-card-pad: 2.5rem;

  /* Brand mark — height-led sizing (112×56 source asset) */
  --r26-logo-height: 2.75rem;
  --r26-logo-height-mobile: 2.25rem;

  /* Brand accents — credentials reference */
  --r26-link-accent: #991b1b;
  --r26-link-accent-hover: #7f1d1d;
  --r26-link-on-light: #0f172a;
  --r26-dark: var(--r26-primary-dark);
  --r26-dark-footer: var(--r26-near-black);
  --r26-body-bg: var(--r26-off-white);
  --r26-body-text: var(--r26-text-body);
  --r26-header-sub: var(--r26-text-secondary-dark);
  --r26-border-light: var(--r26-border-subtle);

  /* Typography — families */
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-heading: var(--font-display);
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-technical: 'Source Code Pro', 'Consolas', monospace;

  /* Typography — editorial scale */
  --r26-type-hero-size: clamp(2rem, 4.5vw, 3rem);
  --r26-type-section-size: clamp(1.75rem, 3.5vw, 2.375rem);
  --r26-type-card-size: 1.375rem;
  --r26-type-body-size: 1rem;
  --r26-type-label-size: 0.75rem;

  --r26-line-height-heading: 1.15;
  --r26-line-height-body: 1.65;
  --r26-type-label-ls: 0.08em;
  --r26-type-hero-ls: -0.02em;

  /* Legacy type aliases */
  --r26-type-hero-lh: var(--r26-line-height-heading);
  --r26-type-page-title-size: var(--r26-type-hero-size);
  --r26-type-page-title-lh: var(--r26-line-height-heading);
  --r26-type-section-lh: var(--r26-line-height-heading);
  --r26-type-card-title-size: var(--r26-type-card-size);
  --r26-type-card-title-lh: 1.25;
  --r26-type-body-lh: var(--r26-line-height-body);
  --r26-type-price-size: 1rem;
  --r26-type-price-lh: var(--r26-line-height-body);
  --r26-type-price-weight: 600;
  --r26-btn-on-light-bg: var(--r26-primary-dark);
  --r26-btn-on-light-hover: var(--r26-charcoal);
  --r26-type-btn-size: 0.875rem;
  --r26-type-btn-ls: 0.03em;
  --r26-type-nav-size: 0.875rem;
  --r26-type-footer-size: 0.8125rem;
}

/* ── Global typography base ──────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: var(--r26-type-body-size);
  font-weight: 400;
  line-height: var(--r26-line-height-body);
  color: var(--r26-text-body);
}

h1,
h2,
.r26-type-display {
  font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: var(--r26-type-hero-ls);
  line-height: var(--r26-line-height-heading);
  text-wrap: balance;
}

h1 {
  font-size: var(--r26-type-page-title-size);
}

h2 {
  font-size: var(--r26-type-section-size);
}

h3 {
  font-family: var(--font-body);
  font-size: var(--r26-type-card-size);
  font-weight: 600;
  line-height: var(--r26-type-card-title-lh);
  letter-spacing: 0;
  text-wrap: balance;
}

/* Balanced multi-line wrapping for all headings and title utilities, so no
   heading leaves a lonely orphan word on the last line. Adapts per viewport;
   hero headings below layer intentional line breaks on top of this. */
h4,
h5,
h6,
.r26-type-hero,
.headline,
.section__title,
[class$="__heading"],
[class$="__headline"],
[class$="__title"],
[class*="__title "] {
  text-wrap: balance;
}

/* Intentional hero line break that only applies on wider screens. On phones
   the break is suppressed so the heading wraps naturally (balanced above). */
.r26-hero-brk {
  display: none;
}

@media (min-width: 40rem) {
  .r26-hero-brk {
    display: inline;
  }
}

.r26-type-hero {
  font-family: var(--font-display);
  font-size: var(--r26-type-hero-size);
  line-height: var(--r26-line-height-heading);
  letter-spacing: var(--r26-type-hero-ls);
  font-weight: 400;
}

.r26-type-price {
  font-family: var(--font-body);
  font-size: var(--r26-type-price-size);
  font-weight: var(--r26-type-price-weight);
  line-height: var(--r26-type-price-lh);
  letter-spacing: 0;
  color: var(--r26-text-body);
}

.sp-card__price,
.tp-course__fee,
.offer__price {
  font-family: var(--font-body);
  font-size: var(--r26-type-price-size);
  font-weight: var(--r26-type-price-weight);
  line-height: var(--r26-type-price-lh);
  letter-spacing: 0;
}

.r26-type-secondary {
  font-family: var(--font-body);
  font-size: var(--r26-type-body-size);
  font-weight: 400;
  line-height: var(--r26-line-height-body);
  color: var(--r26-text-secondary-light);
}

.r26-card--featured .r26-type-secondary,
.r26-zone-header .r26-type-secondary,
.r26-zone-feature .r26-type-secondary {
  color: var(--r26-text-secondary-dark);
}

.r26-type-label,
.r26-pill {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Card content clusters — tight grouping */
.r26-card .r26-pill,
.sp-card .r26-pill,
.tp-course .r26-pill,
.tp-course__badge {
  margin-bottom: 5px;
}

.r26-card h3,
.sp-card__name,
.tp-course__title,
.cr-quote__name {
  margin-top: 0;
}

.sp-card__name,
.tp-course__title,
.offer__title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--r26-type-hero-ls);
  line-height: var(--r26-type-card-title-lh);
}

.sp-card__name,
.tp-course__title {
  margin-bottom: 8px;
}

.sp-card__sub {
  margin-top: 0;
}

.sp-card__price,
.tp-course__fee,
.offer__price {
  margin-top: 26px;
  padding-top: 0;
}

.sp-card .r26-btn,
.tp-course .r26-btn,
.tp-course .tp-btn,
.offer .btn-primary {
  margin-top: 20px;
}

/* ── Zone 1: page header band ────────────────────────────────────────────── */
.r26-zone-header {
  background: var(--r26-primary-dark);
  color: var(--r26-text-on-dark);
  min-height: var(--r26-zone-header-min-height);
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--r26-charcoal);
}

.r26-zone-header__inner {
  width: 100%;
  max-width: var(--r26-content-max);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 3.25rem) var(--r26-content-pad);
  box-sizing: border-box;
}

.r26-zone-header__title {
  font-family: var(--font-display);
  font-size: var(--r26-type-page-title-size);
  line-height: var(--r26-line-height-heading);
  letter-spacing: var(--r26-type-hero-ls);
  font-weight: 400;
  color: var(--r26-text-on-dark);
  margin: 0 0 0.85rem;
  max-width: 28ch;
  text-align: left;
}

.r26-zone-header__sub {
  font-family: var(--font-body);
  font-size: var(--r26-type-body-size);
  font-weight: 400;
  line-height: var(--r26-line-height-body);
  color: var(--r26-text-secondary-dark);
  margin: 0;
  max-width: 46rem;
  text-align: left;
}

@media (max-width: 640px) {
  .r26-zone-header {
    min-height: 0;
  }
}

/* ── Zone 2: body content ────────────────────────────────────────────────── */
.r26-zone-body {
  background: var(--r26-off-white);
  color: var(--r26-text-body);
}

body.r26-site-subpage {
  background: var(--r26-off-white);
  color: var(--r26-text-body);
}

/* ── Zone 3: feature / callout (dark weight sections) ──────────────────── */
.r26-zone-feature {
  background: var(--r26-primary-dark);
  color: var(--r26-text-on-dark);
  padding: clamp(3rem, 7vw, 5rem) var(--r26-content-pad);
}

.r26-zone-feature__inner {
  max-width: var(--r26-content-max);
  margin: 0 auto;
}

.r26-zone-feature__title {
  font-family: var(--font-display);
  font-size: var(--r26-type-section-size);
  line-height: var(--r26-line-height-heading);
  font-weight: 400;
  color: var(--r26-text-on-dark);
  margin: 0 0 1.5rem;
  text-align: left;
}

.r26-zone-feature__text {
  font-family: var(--font-body);
  font-size: var(--r26-type-body-size);
  font-weight: 400;
  line-height: var(--r26-line-height-body);
  color: var(--r26-text-secondary-dark);
  margin: 0;
  text-align: left;
}

/* ── Zone 4: final CTA ───────────────────────────────────────────────────── */
.r26-zone-cta {
  background: var(--r26-primary-dark);
  color: var(--r26-text-on-dark);
  border-top: 1px solid var(--r26-charcoal);
  padding: clamp(3.5rem, 8vw, 5.5rem) var(--r26-content-pad);
  text-align: center;
}

.r26-zone-cta__inner {
  max-width: 52rem;
  margin: 0 auto;
}

.r26-zone-cta__title {
  font-family: var(--font-display);
  font-size: var(--r26-type-section-size);
  line-height: var(--r26-line-height-heading);
  letter-spacing: var(--r26-type-hero-ls);
  font-weight: 400;
  color: var(--r26-text-on-dark);
  margin: 0 auto 1.75rem;
  max-width: none;
}

.r26-card--featured .r26-pill,
.r26-zone-feature .r26-pill {
  background: var(--r26-brand);
  color: #ffffff;
  border: none;
}

/* ── Zone 5: footer ──────────────────────────────────────────────────────── */
.r26-footer {
  padding: 4rem 0 3rem;
  background: var(--r26-near-black);
  color: var(--r26-text-on-dark);
  border-top: 1px solid var(--r26-charcoal);
  font-family: var(--font-body, Inter, system-ui, sans-serif);
}

.r26-footer__inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding-left: var(--r26-content-pad);
  padding-right: var(--r26-content-pad);
}

.r26-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--r26-charcoal);
}

.r26-footer__logo {
  display: none;
}

.r26-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 22rem;
}

.r26-footer__tag {
  font-size: 0.85rem;
  color: var(--r26-text-secondary-dark);
  line-height: 1.5;
}

.r26-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 2rem;
  align-items: flex-start;
}

.r26-footer__links a {
  font-size: var(--r26-type-footer-size);
  font-weight: 400;
  color: var(--r26-text-secondary-dark);
  text-decoration: none;
  transition: color 0.15s ease;
}

.r26-footer__links a:hover {
  color: var(--r26-text-on-dark);
}

.r26-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
}

.r26-footer__disclaimer {
  font-size: 0.78rem;
  color: var(--r26-text-secondary-dark);
  line-height: 1.5;
  max-width: 44rem;
  margin: 0;
}

.r26-footer__copy {
  font-size: 0.8rem;
  color: var(--r26-text-secondary-dark);
  margin: 0;
}

/* Accent links on light surfaces */
.r26-link-accent {
  color: var(--r26-link-accent);
}

.r26-link-accent:hover {
  color: var(--r26-link-accent-hover);
}

/* Invert maroon logo only on dark surfaces (nav/headers, not footer) */
.r26-logo--on-dark {
  filter: brightness(0) invert(1);
}

/* Settings avatar — ink circle, not brand red */
.header-avatar {
  background: var(--r26-primary-dark);
  color: #ffffff;
}

/* Global light-surface links */
.r26-zone-body a:not(.r26-btn):not(.header-cta):not(.btn-primary):hover {
  color: var(--r26-link-accent);
}

/* Site header logo — height-led, consistent across homepage + sub-pages */
.header-logo-image,
.nav__logo img {
  height: var(--r26-logo-height);
  width: auto;
  max-width: none;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .header-logo-image,
  .nav__logo img {
    height: var(--r26-logo-height-mobile);
  }
}

/* ── CTA button (single style sitewide) ──────────────────────────────────── */
.r26-btn,
a.r26-btn,
button.r26-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  box-sizing: border-box;
  background: var(--r26-primary-dark);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: var(--r26-type-btn-size);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--r26-type-btn-ls);
  text-transform: none;
  padding: 14px 28px;
  border: none;
  border-radius: var(--r26-radius-btn);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.r26-btn:hover,
a.r26-btn:hover,
button.r26-btn:hover {
  background: var(--r26-charcoal);
  color: #ffffff;
  text-decoration: none;
}

.r26-btn:focus-visible {
  outline: 2px solid var(--r26-primary-dark);
  outline-offset: 2px;
}

/* Light-surface primary actions — ink black, not brand red */
.r26-zone-body .btn-primary,
.r26-zone-body .tp-btn:not(.tp-btn--ondark),
.r26-zone-body a.r26-btn:not(.r26-btn--on-dark),
.r26-zone-body button.r26-btn:not(.r26-btn--on-dark) {
  background: var(--r26-btn-on-light-bg);
  color: #ffffff;
}

.r26-zone-body .btn-primary:hover,
.r26-zone-body .tp-btn:not(.tp-btn--ondark):hover,
.r26-zone-body a.r26-btn:not(.r26-btn--on-dark):hover,
.r26-zone-body button.r26-btn:not(.r26-btn--on-dark):hover {
  background: var(--r26-btn-on-light-hover);
  color: #ffffff;
}

.r26-btn--on-dark,
.r26-zone-feature .r26-btn,
.r26-zone-cta .r26-btn,
.r26-card--featured .r26-btn {
  background: var(--r26-btn-on-dark-bg);
  color: var(--r26-btn-on-dark-text);
}

.r26-btn--on-dark:hover,
.r26-zone-feature .r26-btn:hover,
.r26-zone-cta .r26-btn:hover,
.r26-card--featured .r26-btn:hover {
  background: var(--r26-btn-on-dark-hover);
  color: var(--r26-btn-on-dark-text);
}

/* Legacy alias — use .r26-btn in new markup; removed in Prompt 10–11 */
.r26-zone-cta__btn,
a.r26-zone-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--r26-btn-on-dark-bg);
  color: var(--r26-btn-on-dark-text);
  font-family: var(--font-body);
  font-size: var(--r26-type-btn-size);
  font-weight: 700;
  letter-spacing: var(--r26-type-btn-ls);
  padding: 14px 28px;
  border: none;
  border-radius: var(--r26-radius-btn);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.r26-zone-cta__btn:hover,
a.r26-zone-cta__btn:hover {
  background: var(--r26-btn-on-dark-hover);
  color: var(--r26-btn-on-dark-text);
}

/* ── Pill badge ──────────────────────────────────────────────────────────── */
.r26-pill {
  display: inline-block;
  background: var(--r26-pill-bg);
  color: var(--r26-pill-text);
  font-family: var(--font-body);
  font-size: var(--r26-type-label-size);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--r26-type-label-ls);
  text-transform: uppercase;
  padding: 4px 10px;
  border: none;
  border-radius: 999px;
  white-space: nowrap;
}

/* ── Card primitives (Prompt 10 applies to page cards) ───────────────────── */
.r26-card {
  background: var(--r26-white);
  color: var(--r26-text-body);
  border: 1px solid var(--r26-border-subtle);
  border-radius: var(--r26-radius-card);
  padding: 2.5rem;
  text-align: left;
}

.r26-card--featured {
  background: var(--r26-charcoal);
  color: var(--r26-text-on-dark);
  border: 1px solid var(--r26-charcoal);
  box-shadow: none;
  padding: 2.5rem;
}

.r26-card--featured .sp-card__price,
.r26-card--featured .offer__price,
.offer--feature .offer__price,
.sp-card--featured .sp-card__price {
  color: var(--r26-text-on-dark);
}

/* Dark containers — force high-contrast display type */
.r26-zone-header,
.r26-zone-feature,
.r26-zone-cta,
.r26-card--featured,
.r26-zone-body .offer--feature,
.r26-zone-body .sp-card--featured {
  color: var(--r26-text-on-dark);
}

.r26-zone-header h1,
.r26-zone-header h2,
.r26-zone-header__title,
.r26-zone-feature__title,
.r26-zone-cta__title,
.r26-card--featured h1,
.r26-card--featured h2,
.r26-card--featured h3,
.r26-card--featured .r26-card__title,
.r26-zone-body .offer--feature .offer__title,
.r26-zone-body .sp-card--featured .sp-card__name {
  color: var(--r26-text-on-dark);
}

.r26-card h3,
.r26-card .r26-card__title {
  font-family: var(--font-display);
  font-size: var(--r26-type-card-size);
  font-weight: 400;
  line-height: var(--r26-type-card-title-lh);
  letter-spacing: var(--r26-type-hero-ls);
  text-align: left;
}

.r26-card p,
.r26-card li,
.r26-card dd,
.r26-card dt {
  font-family: var(--font-body);
  font-size: var(--r26-type-body-size);
  font-weight: 400;
  line-height: var(--r26-line-height-body);
  text-align: left;
}

.r26-card__text-secondary {
  color: var(--r26-text-secondary-light);
}

.r26-card--featured .r26-card__text-secondary {
  color: var(--r26-text-secondary-dark);
}

/* ── Text utilities ──────────────────────────────────────────────────────── */
.r26-text-secondary {
  color: var(--r26-text-secondary-light);
}

.r26-zone-header .r26-text-secondary,
.r26-zone-feature .r26-text-secondary,
.r26-zone-cta .r26-text-secondary,
.r26-footer .r26-text-secondary {
  color: var(--r26-text-secondary-dark);
}

/* Institutional display type on package / track titles */
.sp-card__name,
.tp-course__title,
.offer__title,
.section__title,
.r26-zone-header__title,
.r26-zone-feature__title,
.r26-zone-cta__title {
  font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  font-weight: 400;
}