/*
 * Off-Switch semantic color system.
 *
 * Shared across the direction:
 * - one action green for navigation and conversion;
 * - one sunny yellow for emphasis;
 * - one restrained contrast green for key statements;
 * - white cards on colored sections.
 *
 * Different on every page:
 * - the approved hero color;
 * - canvas, soft surfaces, borders and decorative details.
 */

:is(
  body.direction-page--freedom,
  body.off-switch-method-v3,
  body.off-switch-self-v3,
  body.off-switch-group-v3,
  body.off-switch-personal-v3
) {
  --osys-action: #457f37;
  --osys-action-hover: #39722f;
  --osys-action-ring: rgba(69, 127, 55, 0.25);
  --osys-sun: #e6cf4e;
  --osys-sun-hover: #d8bf3d;
  --osys-sun-soft: #fff7cf;
  --osys-paper: #fffef8;
  --osys-paper-quiet: #fafbf2;
  --osys-contrast-a: #467d3a;
  --osys-contrast-b: #4f823e;
  --osys-contrast-muted: #edf5cf;
  --osys-ink: #26361f;
  --osys-muted: #536149;
  --osys-card-shadow: 0 18px 46px rgba(60, 88, 38, 0.09);

  /* Compatibility: old page styles now resolve to semantic roles. */
  --path-dark: var(--osys-action);
  --path-accent: var(--osys-sun);
  --page-primary: var(--path-detail);
  --page-deep: var(--osys-contrast-a);
  --page-soft: var(--path-soft);
  --page-line: var(--path-line);
  --fs-cta: var(--osys-action);
  --fs-cta-hover: var(--osys-action-hover);
}

/* Page progression: approved hero colors stay in v4; these are supporting tones. */
body.direction-page--freedom {
  --path-soft: #f0f4c3;
  --path-soft-strong: #e5ec9d;
  --path-line: #c7d568;
  --path-detail: #6d7b31;
}

body.off-switch-method-v3 {
  --path-soft: #eaf3ba;
  --path-soft-strong: #ddec98;
  --path-line: #bad55f;
  --path-detail: #668235;
  --om-paper: var(--osys-paper);
  --om-ink: var(--osys-ink);
  --om-muted: var(--osys-muted);
  --om-teal: var(--path-detail);
  --om-deep: var(--osys-contrast-a);
  --om-mint: var(--path-soft-strong);
  --om-mint-soft: var(--path-soft);
  --om-sun: var(--osys-sun);
  --om-sun-soft: var(--osys-sun-soft);
  --om-coral: var(--path-detail);
  --om-coral-dark: var(--osys-action-hover);
  --om-gold: var(--osys-sun-hover);
  --om-plum: var(--osys-contrast-a);
  --om-line: var(--path-line);
}

body.off-switch-self-v3 {
  --path-soft: #dfeead;
  --path-soft-strong: #cfe789;
  --path-line: #a9cf54;
  --path-detail: #598036;
  --os-paper: var(--osys-paper);
  --os-ink: var(--osys-ink);
  --os-muted: var(--osys-muted);
  --os-blue: var(--path-soft);
  --os-mist: var(--osys-paper-quiet);
  --os-teal: var(--path-detail);
  --os-deep: var(--osys-contrast-a);
  --os-line: var(--path-line);
  --os-signal: var(--osys-sun);
}

body.off-switch-group-v3 {
  --path-soft: #d3e7a2;
  --path-soft-strong: #bfe07c;
  --path-line: #94c74c;
  --path-detail: #4f7d37;
  --gg-paper: var(--osys-paper);
  --gg-canvas: var(--path-bg);
  --gg-ink: var(--osys-ink);
  --gg-muted: var(--osys-muted);
  --gg-sage: var(--path-detail);
  --gg-sage-deep: var(--osys-contrast-a);
  --gg-sage-soft: var(--path-soft);
  --gg-sun: var(--osys-sun);
  --gg-sun-soft: var(--osys-sun-soft);
  --gg-blue: var(--path-soft);
  --gg-gold: var(--osys-sun-hover);
  --gg-coral: var(--path-detail);
  --gg-coral-dark: var(--osys-action-hover);
  --gg-line: var(--path-line);
}

body.off-switch-personal-v3 {
  --path-soft: #c8dd96;
  --path-soft-strong: #afd471;
  --path-line: #7eb943;
  --path-detail: #477a39;
  --pp-canvas: var(--path-bg);
  --pp-paper: var(--osys-paper);
  --pp-ink: var(--osys-ink);
  --pp-muted: var(--osys-muted);
  --pp-jade: var(--path-detail);
  --pp-jade-deep: var(--path-detail);
  --pp-plum: var(--osys-contrast-a);
  --pp-plum-deep: var(--osys-action-hover);
  --pp-coral: var(--path-detail);
  --pp-coral-dark: var(--osys-action-hover);
  --pp-apricot: var(--osys-sun);
  --pp-apricot-soft: var(--osys-sun-soft);
  --pp-blue: var(--path-soft);
  --pp-line: var(--path-line);
}

/* Shared shell and action hierarchy. */
:is(
  body.direction-page--freedom,
  body.off-switch-method-v3,
  body.off-switch-self-v3,
  body.off-switch-group-v3,
  body.off-switch-personal-v3
) .eh-local-strip {
  border-color: color-mix(in srgb, var(--path-detail) 24%, transparent) !important;
  background: color-mix(in srgb, var(--path-bg) 74%, var(--path-soft) 26%) !important;
}

:is(
  body.direction-page--freedom,
  body.off-switch-method-v3,
  body.off-switch-self-v3,
  body.off-switch-group-v3,
  body.off-switch-personal-v3
) .eh-local-strip a:is(:hover, :focus-visible, [aria-current="page"]),
:is(
  body.direction-page--freedom,
  body.off-switch-method-v3,
  body.off-switch-self-v3,
  body.off-switch-group-v3,
  body.off-switch-personal-v3
) .eh-shell-breadcrumb a:is(:hover, :focus-visible) {
  color: var(--osys-action) !important;
}

:is(
  body.direction-page--freedom,
  body.off-switch-method-v3,
  body.off-switch-self-v3,
  body.off-switch-group-v3,
  body.off-switch-personal-v3
) .eh-local-strip a[aria-current="page"]::after {
  background: var(--osys-action) !important;
}

:is(
  body.direction-page--freedom,
  body.off-switch-method-v3,
  body.off-switch-self-v3,
  body.off-switch-group-v3,
  body.off-switch-personal-v3
) .eh-shell-breadcrumb {
  border-color: color-mix(in srgb, var(--path-detail) 15%, transparent) !important;
  background: color-mix(in srgb, var(--path-bg) 90%, var(--osys-paper) 10%) !important;
}

:is(
  body.direction-page--freedom,
  body.off-switch-method-v3,
  body.off-switch-self-v3,
  body.off-switch-group-v3,
  body.off-switch-personal-v3
) .eh-shell-cta,
:is(
  body.direction-page--freedom,
  body.off-switch-method-v3,
  body.off-switch-self-v3,
  body.off-switch-group-v3,
  body.off-switch-personal-v3
) main :is(.fs-button:not(.fs-button--light), .button--primary) {
  border-color: var(--osys-action) !important;
  background: var(--osys-action) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(69, 127, 55, 0.18) !important;
}

:is(
  body.direction-page--freedom,
  body.off-switch-method-v3,
  body.off-switch-self-v3,
  body.off-switch-group-v3,
  body.off-switch-personal-v3
) .eh-shell-cta:is(:hover, :focus-visible),
:is(
  body.direction-page--freedom,
  body.off-switch-method-v3,
  body.off-switch-self-v3,
  body.off-switch-group-v3,
  body.off-switch-personal-v3
) main :is(.fs-button:not(.fs-button--light), .button--primary):is(:hover, :focus-visible) {
  border-color: var(--osys-action-hover) !important;
  background: var(--osys-action-hover) !important;
  box-shadow: 0 12px 28px rgba(57, 114, 47, 0.24) !important;
}

:is(
  body.direction-page--freedom,
  body.off-switch-method-v3,
  body.off-switch-self-v3,
  body.off-switch-group-v3,
  body.off-switch-personal-v3
) :is(.eh-shell-cta, .fs-button, .button--primary):focus-visible {
  outline: 3px solid var(--osys-action-ring) !important;
  outline-offset: 3px;
}

:is(
  body.off-switch-method-v3,
  body.off-switch-self-v3,
  body.off-switch-group-v3,
  body.off-switch-personal-v3
) main .fs-button--light,
body.off-switch-method-v3 main .om-formats__featured .fs-button {
  border-color: var(--osys-sun) !important;
  background: var(--osys-sun) !important;
  color: var(--osys-ink) !important;
  box-shadow: 0 10px 24px rgba(107, 92, 23, 0.18) !important;
}

:is(
  body.off-switch-method-v3,
  body.off-switch-self-v3,
  body.off-switch-group-v3,
  body.off-switch-personal-v3
) main .fs-button--light:is(:hover, :focus-visible),
body.off-switch-method-v3 main .om-formats__featured .fs-button:is(:hover, :focus-visible) {
  border-color: var(--osys-sun-hover) !important;
  background: var(--osys-sun-hover) !important;
}

/* Page-specific eyebrows provide identity; buttons remain shared. */
:is(body.off-switch-method-v3 .om-eyebrow, body.off-switch-method-v3 .om-formats__eyebrow),
body.off-switch-self-v3 .os-eyebrow,
body.off-switch-group-v3 .gg-eyebrow,
body.off-switch-personal-v3 .pp-eyebrow {
  color: var(--path-detail) !important;
}

:is(
  body.off-switch-method-v3 .om-eyebrow--light,
  body.off-switch-method-v3 .om-thesis p,
  body.off-switch-self-v3 .os-promise p,
  body.off-switch-self-v3 .os-life-strip .os-eyebrow,
  body.off-switch-group-v3 .gg-eyebrow--light,
  body.off-switch-group-v3 .gg-thesis p,
  body.off-switch-personal-v3 .pp-thesis p
) {
  color: var(--osys-contrast-muted) !important;
}

/* Direction map: preserve its approved hero and give lower sections a clear rhythm. */
body.direction-page--freedom main > .section {
  background: var(--osys-paper) !important;
}

body.direction-page--freedom main > #put {
  background: linear-gradient(180deg, var(--path-bg), var(--osys-paper)) !important;
}

body.direction-page--freedom main > #put + .section {
  background: linear-gradient(145deg, var(--path-soft), var(--path-bg)) !important;
}

body.direction-page--freedom .direction-summary--three .clickable-card {
  border-color: color-mix(in srgb, var(--path-detail) 18%, transparent) !important;
  background: var(--osys-paper) !important;
  box-shadow: var(--osys-card-shadow) !important;
}

/* Method surfaces: paper -> local soft -> sun -> contrast. */
body.off-switch-method-v3 :is(.om-scope, .om-sequence, .om-formats) {
  background: linear-gradient(145deg, var(--path-bg), var(--path-soft)) !important;
}

body.off-switch-method-v3 :is(.om-tool, .om-dog, .om-cases, .om-boundary) {
  background: var(--osys-paper) !important;
}

body.off-switch-method-v3 .om-mechanism {
  background: linear-gradient(145deg, var(--path-soft), var(--path-soft-strong)) !important;
}

body.off-switch-method-v3 :is(.om-map, .om-ukraine) {
  background: linear-gradient(145deg, var(--osys-sun-soft), color-mix(in srgb, var(--path-soft) 58%, #ffffff)) !important;
}

body.off-switch-method-v3 :is(.om-thesis, .om-section--deep),
body.off-switch-self-v3 :is(.os-promise, .os-life-strip, .os-final, .os-final__bar),
body.off-switch-group-v3 .gg-thesis,
body.off-switch-personal-v3 .pp-thesis {
  background: linear-gradient(135deg, var(--osys-contrast-a), var(--osys-contrast-b)) !important;
}

body.off-switch-method-v3 .om-formats__grid article {
  background: var(--osys-paper) !important;
}

body.off-switch-method-v3 .om-formats__grid .om-formats__featured {
  background: linear-gradient(145deg, var(--osys-contrast-a), var(--osys-contrast-b)) !important;
}

/* Self-directed surfaces. Three contrast moments are enough for the page. */
body.off-switch-self-v3 :is(.os-problems, .os-section--paper, .os-video-proof) {
  background: var(--osys-paper) !important;
}

body.off-switch-self-v3 :is(.os-section--blue, .os-fit, .os-method-proof) {
  background: linear-gradient(145deg, var(--path-bg), var(--path-soft)) !important;
}

body.off-switch-self-v3 :is(.os-origin, .os-faq-section) {
  background: linear-gradient(145deg, var(--osys-sun-soft), color-mix(in srgb, var(--path-soft) 52%, #ffffff)) !important;
}

body.off-switch-self-v3 .os-written-proof {
  background: linear-gradient(145deg, var(--path-soft), var(--path-bg)) !important;
}

body.off-switch-self-v3 .os-written-proof :is(h2, blockquote p) {
  color: var(--osys-ink) !important;
}

body.off-switch-self-v3 .os-written-proof :is(.os-eyebrow, cite, .os-written-proof__source) {
  color: var(--path-detail) !important;
}

body.off-switch-self-v3 .os-written-proof .os-section-head > p {
  color: var(--osys-muted) !important;
}

body.off-switch-self-v3 .os-written-grid blockquote {
  border-color: color-mix(in srgb, var(--path-detail) 20%, transparent) !important;
  background: var(--osys-paper) !important;
  box-shadow: var(--osys-card-shadow) !important;
}

body.off-switch-self-v3 .os-boundary {
  background: var(--osys-paper-quiet) !important;
}

body.off-switch-self-v3 .os-final .os-eyebrow--light {
  color: var(--osys-contrast-muted) !important;
}

body.off-switch-self-v3 :is(.os-final__visual, .os-final__emotion-key) {
  background: var(--path-soft) !important;
}

/* Group surfaces: remove unrelated beige, gray and blue casts. */
body.off-switch-group-v3 :is(.gg-problems, .gg-past, .gg-author, .gg-proof) {
  background: var(--osys-paper) !important;
}

body.off-switch-group-v3 :is(.gg-depth-section, .gg-practice-cycle, .gg-video-proof, .gg-conversion) {
  background: linear-gradient(145deg, var(--path-bg), var(--path-soft)) !important;
}

body.off-switch-group-v3 :is(.gg-mechanism, .gg-offer, .gg-shared) {
  background: linear-gradient(145deg, var(--path-soft), var(--path-soft-strong)) !important;
}

body.off-switch-group-v3 :is(.gg-map, .gg-testimonials, .gg-faq) {
  background: linear-gradient(145deg, var(--osys-sun-soft), color-mix(in srgb, var(--path-soft) 52%, #ffffff)) !important;
}

body.off-switch-group-v3 .gg-final {
  background: linear-gradient(90deg, var(--path-soft) 0%, var(--path-bg) 40%, var(--osys-paper) 100%) !important;
}

body.off-switch-group-v3 .gg-boundary {
  background: var(--osys-paper-quiet) !important;
}

/* Personal surfaces: strongest local tint, same shared hierarchy. */
body.off-switch-personal-v3 :is(.pp-problems, .pp-mechanism, .pp-route) {
  background: var(--osys-paper) !important;
}

body.off-switch-personal-v3 :is(.pp-results, .pp-video-proof) {
  background: linear-gradient(145deg, var(--path-bg), var(--path-soft)) !important;
}

body.off-switch-personal-v3 :is(.pp-personal, .pp-offer) {
  background: linear-gradient(145deg, var(--path-soft), var(--path-soft-strong)) !important;
}

body.off-switch-personal-v3 :is(.pp-case, .pp-proof-strip, .pp-faq) {
  background: linear-gradient(145deg, var(--osys-sun-soft), color-mix(in srgb, var(--path-soft) 50%, #ffffff)) !important;
}

body.off-switch-personal-v3 .pp-final {
  background: linear-gradient(90deg, var(--path-soft) 0%, var(--path-bg) 40%, var(--osys-paper) 100%) !important;
}

body.off-switch-personal-v3 .pp-final__picture {
  background: var(--path-soft-strong) !important;
}

body.off-switch-personal-v3 .pp-boundary {
  background: var(--osys-paper-quiet) !important;
}

/* Cards remain lighter than their section and use the local page line. */
:is(
  body.off-switch-self-v3 .os-problem-grid article,
  body.off-switch-self-v3 .os-module,
  body.off-switch-self-v3 .os-fit__grid article,
  body.off-switch-self-v3 .os-video-card,
  body.off-switch-self-v3 .os-price,
  body.off-switch-self-v3 .os-faq__item,
  body.off-switch-group-v3 .gg-problem-grid article,
  body.off-switch-group-v3 .gg-depth-steps article,
  body.off-switch-group-v3 .gg-auto-flow article,
  body.off-switch-group-v3 .gg-route-grid article,
  body.off-switch-group-v3 .gg-meeting-flow article,
  body.off-switch-group-v3 .gg-video-card,
  body.off-switch-group-v3 .gg-testimonial-grid blockquote,
  body.off-switch-personal-v3 .pp-problem-grid article,
  body.off-switch-personal-v3 .pp-mechanism__grid article,
  body.off-switch-personal-v3 .pp-personal__grid article,
  body.off-switch-personal-v3 .pp-video-card,
  body.off-switch-personal-v3 .pp-start__steps article
) {
  border-color: color-mix(in srgb, var(--path-detail) 19%, transparent) !important;
  background: var(--osys-paper) !important;
  box-shadow: var(--osys-card-shadow) !important;
}

:is(
  body.off-switch-method-v3 .om-cases__grid article,
  body.off-switch-method-v3 .om-phases article,
  body.off-switch-method-v3 .om-formats__grid article,
  body.off-switch-group-v3 .gg-offer__grid,
  body.off-switch-personal-v3 .pp-offer__grid
) {
  border-color: color-mix(in srgb, var(--path-detail) 18%, transparent) !important;
  box-shadow: var(--osys-card-shadow) !important;
}

:is(
  body.off-switch-self-v3 .os-video-frame,
  body.off-switch-self-v3 .os-video-loader,
  body.off-switch-group-v3 .gg-video-frame,
  body.off-switch-personal-v3 .pp-video-frame
) {
  background: color-mix(in srgb, var(--path-soft-strong) 78%, var(--osys-action)) !important;
}

/* Shared statement typography; each strip keeps its original geometry. */
:is(
  body.off-switch-method-v3 .om-thesis__inner,
  body.off-switch-self-v3 .os-promise__inner,
  body.off-switch-group-v3 .gg-thesis__inner,
  body.off-switch-personal-v3 .pp-thesis__inner
) > p {
  margin: 0;
  color: var(--osys-contrast-muted) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  text-transform: uppercase;
}

:is(
  body.off-switch-method-v3 .om-thesis__inner,
  body.off-switch-self-v3 .os-promise__inner,
  body.off-switch-group-v3 .gg-thesis__inner,
  body.off-switch-personal-v3 .pp-thesis__inner
) > strong {
  color: #ffffff !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 31px !important;
  font-weight: 500 !important;
  line-height: 1.22 !important;
}

@media (max-width: 760px) {
  :is(
    body.off-switch-method-v3 .om-thesis__inner,
    body.off-switch-self-v3 .os-promise__inner,
    body.off-switch-group-v3 .gg-thesis__inner,
    body.off-switch-personal-v3 .pp-thesis__inner
  ) > strong {
    font-size: 24px !important;
    line-height: 1.18 !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :is(
    body.direction-page--freedom,
    body.off-switch-method-v3,
    body.off-switch-self-v3,
    body.off-switch-group-v3,
    body.off-switch-personal-v3
  ) :is(.eh-shell-cta, .fs-button, .button--primary) {
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  }
}