/*
 * Off2Class design-system alignment for the feature website.
 * Load last, after the feature page styles.
 * The local font URLs below are relative to that final destination.
 *
 * This layer changes type, action colors and control shapes. It deliberately
 * retains the current layout, spacing, type sizes, 20px marketing cards,
 * forest storytelling bands, product demonstrations and butterfly animation.
 * No animation, transform, transition, sizing or positioning rules belong here.
 * Do not replace --o2c-green: the existing site uses it for dark forest, whereas
 * the supplied product design system uses the same name for bright green.
 */
@font-face {
  font-family: "O2C Lato";
  src: url("../fonts/lato-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "O2C Lato";
  src: url("../fonts/lato-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

body.feature-page {
  --ds-font-body: "O2C Lato", Lato, Arial, sans-serif;
  --ds-font-ui: Inter, Arial, sans-serif;
  --ds-teal: #297D77;
  --ds-teal-hover: #216861;
  --ds-ink: #161616;
  --ds-copy: #364153;
  --ds-muted: #4D5056;
  --ds-paper: #F1F0EE;
  --ds-border: #D5D7DA;
  --ds-green-tint: #E5F0C3;
  --font: var(--ds-font-body);
  --o2c-ink: var(--ds-ink);
  --o2c-muted: var(--ds-muted);
  --o2c-bg-alt: var(--ds-paper);
  --o2c-line: var(--ds-border);
  --o2c-link: var(--ds-teal);
  --o2c-lime: var(--ds-green-tint);
  --o2c-lime-hover: #ECFDF3;
  --ft-ink: var(--ds-ink);
  --ft-lime: var(--ds-green-tint);
  --ft-muted: var(--ds-muted);
  --ft-soft: var(--ds-paper);
  --ink: var(--ds-ink);
  --muted: var(--ds-muted);
  --soft: var(--ds-paper);
  --paper: var(--ds-paper);
  --line: var(--ds-border);
  --hub-page-bg: var(--ds-paper);
  --hub-card-line: var(--ds-border);
  --hub-line: var(--ds-border);
  --hub-muted: var(--ds-muted);
  font-family: var(--ds-font-body);
  color: var(--ds-ink);
}

/* Lato is the marketing voice. Compact navigation and product-like examples
 * retain Inter, rather than inheriting a different face from the page body. */
html body.feature-page :is(
  .ln-header, .hub-header, .ft-header nav, .hub-jump-nav,
  .hub-card-role, .hub-eyebrow, .hc-kicker, .ft-step, .ft-eyebrow,
  .rf-example-label, .ops-kicker, .ops-badge, .ops-quiet,
  .ops-example-label, .ops-data-label, .ft-caption, .fe-note,
  table, [role="table"], [role="grid"], [role="tablist"],
  .ops-demo, .ops-appbar, .ops-class-demo, .ops-roster-demo,
  .ops-student-view, .ops-submission-row, .ops-submission-static,
  .practice-body-art, .practice-art, .practice-example-paper,
  .mg-tabs, .tg-guide-reader, .hc-visual, .tt-search-form
) {
  font-family: var(--ds-font-ui);
}

/* Only marketing headings receive the new rhythm. Font sizes are unchanged;
 * taller existing body copy keeps its original line spacing. */
html body.feature-page :is(
  .ft-feature-name, .tt-title h1, .hc-copy h1,
  .hub-section-heading h2, .hub-feature-copy h3, .hub-resource-link h3,
  .ft-section-header h2, .ft-info-card h3, .ft-help h2, .ft-help-card h3,
  .rf-overview > h2, .rf-overview-card h3, .rf-section-header h2,
  .practice-copy h3, .practice-type-copy h3, .ops-sidecopy h3,
  .cr-overview h2, .cr-canvas-copy h2, .ll-section-heading h2,
  .sh-overview h2, .fe-heading h2, .fe-audience h3,
  .fe-help > h3, .fe-guide h4, .hub-help-band h2
) {
  font-family: var(--ds-font-body) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  line-height: 1.2 !important;
}

html body.feature-page :is(
  .hub-section-heading h2, .hub-feature-copy h3, .hub-resource-link h3,
  .ft-section-header h2, .ft-info-card h3, .ft-help h2, .ft-help-card h3,
  .rf-overview > h2, .rf-overview-card h3, .rf-section-header h2,
  .practice-copy h3, .practice-type-copy h3, .ops-sidecopy h3,
  .ll-section-heading h2, .sh-overview h2, .fe-heading h2,
  .fe-help > h3, .fe-guide h4
) {
  color: var(--ds-ink) !important;
}

/* Remove hard-coded green casts from ordinary marketing copy; the light
 * copy inside dark hero and closing bands keeps its original contrast. */
html body.feature-page :is(
  .hub-feature-copy > p, .hub-resource-link p, .hc-copy p,
  .ft-section-header p, .ft-info-card p, .ft-help-card p,
  .rf-overview-intro, .rf-overview-card p, .rf-section-header p,
  .practice-copy p, .practice-type-copy p, .ops-sidecopy p,
  .cr-overview-grid p, .cr-canvas-copy > p, .ll-section-heading p,
  .sh-overview header > p, .fe-existing p, .fe-guide p
) {
  font-family: var(--ds-font-body);
  color: var(--ds-copy) !important;
}

/* Actual calls to action: teal and Lato bold, with the system's pill shape.
 * Explicit classes exclude whole-card links, tab strips, selectable rows,
 * decorative tiles, preview canvases and circular playback icons. */
html body.feature-page :is(
  .fe-button, .ft-button, .ops-button, .sh-button,
  .site-links .site-signup, .ft-header-cta,
  .hc-explore, .r4-mobile-trial, .tt-search-submit,
  .hub-help-band .hub-help-inner > a
) {
  font-family: var(--ds-font-body) !important;
  font-weight: 700 !important;
  background: var(--ds-teal) !important;
  color: #fff !important;
  border-color: var(--ds-teal) !important;
  border-radius: 9999px !important;
}
html body.feature-page :is(
  .fe-button, .ft-button, .ops-button, .sh-button,
  .site-links .site-signup, .ft-header-cta,
  .hc-explore, .r4-mobile-trial, .tt-search-submit,
  .hub-help-band .hub-help-inner > a
):hover {
  background: var(--ds-teal-hover) !important;
  border-color: var(--ds-teal-hover) !important;
}

/* Secondary controls keep their existing geometry, except the CTA pill.
 * A light outlined treatment is distinct from the filled primary action. */
html body.feature-page .ops-button.ops-secondary {
  background: #fff !important;
  color: var(--ds-teal) !important;
  border-color: var(--ds-teal) !important;
}
html body.feature-page .ops-button.ops-secondary:hover {
  background: #F0FDFA !important;
}

/* On the retained forest bands, the pale reference green offers a clear,
 * high-contrast action. This is an intentional marketing extension. */
html body.feature-page :is(.fe-new .fe-button, .hub-help-band .hub-help-inner > a) {
  background: var(--ds-green-tint) !important;
  color: #1F3A33 !important;
  border-color: var(--ds-green-tint) !important;
}
html body.feature-page :is(.fe-new .fe-button, .hub-help-band .hub-help-inner > a):hover {
  background: #ECFDF3 !important;
  border-color: #ECFDF3 !important;
}

/* Inline calls to action are teal; their enclosing marketing cards retain
 * their 20px radii, surface treatment, dimensions and hover behavior. */
html body.feature-page :is(
  .hub-feature-action, .hub-resource-action, .ln-header .ln-return, .ft-subtle-link,
  .ft-help-action, .fe-guide-action, .fe-secondary, .ops-text-button,
  .ft-content a:not([class]), .hub-main a:not([class])
) {
  color: var(--ds-teal) !important;
}
html body.feature-page :is(
  .hub-feature-action, .hub-resource-action, .ln-header .ln-return, .ft-subtle-link,
  .ft-help-action, .fe-guide-action, .fe-secondary, .ops-text-button
):hover {
  color: var(--ds-teal-hover) !important;
}

/* Explicitly re-map hard-coded neutral surfaces without altering their
 * clip-paths or full-width band geometry. */
html body.feature-page .fe-ending .fe-existing {
  background: var(--ds-paper);
  box-shadow: 0 0 0 100vmax var(--ds-paper);
}
html body.feature-page .ln-header {
  background: #fff;
  border-bottom-color: var(--ds-border);
}
html body.feature-page .fe-ending .fe-guide {
  border-color: var(--ds-border);
}
html body.feature-hub .hub-opening::before {
  background: var(--ds-green-tint);
}
@media (max-width: 780px) {
  html body.feature-hub .hc-copy {
    background: var(--ds-green-tint);
  }
}

/* Full-color static brand marks. No rule targets a petal, flight mark,
 * spotlight layer, animated wordmark, sprite, or product-film iframe. */
html body.feature-page :is(.ft-brand, .ln-brand, .hub-brand) img {
  filter: none;
  opacity: 1;
}

html body.feature-page :is(
  .fe-button, .ft-button, .ops-button, .sh-button, .site-signup,
  .ft-subtle-link, .fe-guide, .ops-text-button
):focus-visible {
  outline-color: var(--ds-teal);
}
html body.feature-page :is(.fe-new, .hub-help-band) :focus-visible {
  outline-color: var(--ds-green-tint);
}


/* Final rendered feature-page audit: append after the existing brand adapters.
 * These are explicit marketing headings and real navigation/actions. Source
 * slides, sample records, dense UI, hero forest titles and motion are excluded.
 * No sizing, spacing, positioning, display, transition or animation changes.
 */
html body.feature-page :is(
  .apt-overview > h2, .apt-overview-card h3,
  .g-step-heading > h2, .example-heading > h3, .cj-evidence-copy > h3,
  .acl-preview-copy h3,
  .tt-section-head h2, .tt-card h3, .tt-framework-heading h3, .tt-no-results h2,
  .cr-overview-intro h2, .cr-canvas-copy > h2,
  .la-alignment h2, .lex-card > h3, .lis-group-heading h3,
  .lis-viewer-caption h3, .lc-options h3, .lc-continuation h3,
  .lf-copy > h2, .lf-benefits h3, .ll-lane-heading h3,
  .ll-resource-card h4,
  .sh-practice-grid h3, .sh-collections > h3, .sh-sample-details > h3,
  .tg-resource-card > h3, .tg-collections > h3,
  .mg-destination > h3, .ops-eligibility article > h3,
  .fe-related > h3
) {
  font-family: var(--ds-font-body) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  line-height: 1.2 !important;
  color: var(--ds-ink) !important;
}

/* Headings inside retained forest callouts retain their light foreground. */
html body.feature-page .tt-related h2 {
  font-family: var(--ds-font-body) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  line-height: 1.2 !important;
}

/* The desktop APT preview owns local variables, so dialog-only inheritance
 * does not reach it. This also covers the same preview on narrow screens. */
html body.feature-page .acl-preview {
  --acl-ink: var(--ds-ink);
  --acl-teal: var(--ds-teal);
  --acl-muted: var(--ds-muted);
}

/* Actual solid actions. Collection cards and tab geometry are untouched. */
html body.feature-page :is(.lex-directory-link, .tt-reset-results) {
  font-family: var(--ds-font-body) !important;
  font-weight: 700 !important;
  color: #fff !important;
  background: var(--ds-teal) !important;
  border-color: var(--ds-teal) !important;
  border-radius: 9999px !important;
}
html body.feature-page :is(.lex-directory-link, .tt-reset-results):hover {
  background: var(--ds-teal-hover) !important;
  border-color: var(--ds-teal-hover) !important;
}
html body.feature-page :is(.lis-collection-link, .cp-replay-canvas) {
  font-family: var(--ds-font-body) !important;
  font-weight: 700 !important;
  color: var(--ds-teal) !important;
  background: #fff !important;
  border-color: var(--ds-teal) !important;
  border-radius: 9999px !important;
}
html body.feature-page :is(.lis-collection-link, .cp-replay-canvas):hover {
  background: #F0FDFA !important;
  color: var(--ds-teal-hover) !important;
}

/* Only the direct CTA is a button; the consultation link inside the other
 * callout's paragraph remains an inline link. */
html body.feature-page .tt-related > a {
  font-family: var(--ds-font-body) !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  background: var(--ds-green-tint) !important;
  color: #1F3A33 !important;
  border-color: var(--ds-green-tint) !important;
}
html body.feature-page .tt-related > a:hover { background: #ECFDF3 !important; }

html body.feature-page :is(
  .cj-link, .lc-link, .tp-text-link, .tt-return-search,
  .tt-clear, .fe-related > a, .mg-text-link, .ll-resource-action
) {
  color: var(--ds-teal) !important;
}
html body.feature-page :is(
  .cj-link, .lc-link, .tp-text-link, .tt-return-search,
  .tt-clear, .fe-related > a, .mg-text-link, .ll-resource-action
):hover {
  color: var(--ds-teal-hover) !important;
}
html body.feature-page :is(
  .lex-directory-link, .tt-reset-results, .lis-collection-link,
  .cp-replay-canvas, .cj-link, .lc-link, .tp-text-link,
  .tt-return-search, .tt-clear, .apt-overview-card,
  .gt-lesson-link[data-lesson-preview], .acl-preview-copy h3,
  .tg-collections > a, .mg-destination
):focus-visible {
  outline-color: var(--ds-teal);
}
html body.feature-page .tt-search-box:focus-within { outline-color: var(--ds-teal); }
html body.feature-page .tt-related :focus-visible { outline-color: var(--ds-green-tint); }


/* HUB RULES — append to brand-alignment.css.
   Only the labels around the petal tour change; the lesson excerpts, artwork,
   butterfly and all animation geometry remain under their existing styles.
   Keep the existing heading/copy colors for their current tour surfaces. */
html body.feature-page.feature-hub :is(
  .pf-card-heading h2, .pf-expanded-heading h2
) {
  font-family: var(--ds-font-body);
  font-weight: 700;
}
html body.feature-page.feature-hub .pf-expanded-heading p {
  font-family: var(--ds-font-body);
}
html body.feature-page.feature-hub .pf-controls button {
  font-family: var(--ds-font-body);
  font-weight: 700;
}
html body.feature-page.feature-hub .pf-controls button[aria-pressed="true"] {
  background-color: var(--ds-green-tint);
  color: #1F3A33;
}