/* Copyright 2026 d7r LLC. Proprietary. */
/*
 * D7R Academy Page theme design system.
 * Structural port of the planning repo's docs/ux/assets/academy-web.css
 * (design truth: docs/ux/academy-signup.html), per docs/THEME-CONTRACT.md.
 * Colors and fonts arrive as --academy-* custom properties emitted by
 * snippets/css_variables.liquid from theme settings; this file never
 * redefines them. Plain class selectors only: no *-child structural
 * selectors, so Kajabi-injected style tags cannot break the layout.
 */

/* ---------- Base ---------- */

.academy {
  margin: 0;
  background: var(--academy-paper);
  color: var(--academy-ink);
  font-family: var(--academy-font);
  overflow-x: hidden;
}
.academy *, .academy *::before, .academy *::after { box-sizing: border-box; }
.academy :where(p) { color: var(--academy-muted); }
.academy h1, .academy h2, .academy h3, .academy h4 {
  color: inherit;
  font-family: var(--academy-display);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.academy h1 { font-size: clamp(3rem, 7vw, 6.8rem); line-height: 0.94; font-weight: 500; }
.academy h2 { font-size: clamp(2.3rem, 5vw, 4.6rem); line-height: 1; font-weight: 500; }
.academy h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.15; }
.academy a:not([class]) { color: inherit; }
.academy a:hover { text-decoration: none; }
.academy :focus-visible { outline: 3px solid var(--academy-forest); outline-offset: 4px; border-radius: 2px; }
.academy-page-hero :focus-visible, .academy-section-dark :focus-visible, .academy-footer :focus-visible { outline-color: var(--academy-gold); }
.academy img { display: block; max-width: 100%; }
.academy button, .academy input, .academy select, .academy textarea { font: inherit; }
.academy button, .academy summary, .academy [role='button'] { cursor: pointer; }
.academy [hidden] { display: none !important; }

.academy-skip {
  position: fixed; z-index: 1000; top: 10px; left: 12px; transform: translateY(-160%);
  background: var(--academy-cream); color: var(--academy-forest-deep); padding: 10px 16px;
  border: 2px solid var(--academy-gold); font-weight: 500;
}
.academy-skip:focus { transform: translateY(0); }

/* ---------- Layout primitives ---------- */

.academy-container { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }
.academy-container-narrow { width: min(880px, calc(100% - 48px)); margin-inline: auto; }
.academy-section { padding: clamp(76px, 10vw, 136px) 0; position: relative; }
.academy-section-dark { background: var(--academy-forest-deep); color: var(--academy-cream); }
.academy-section-cream { background: var(--academy-cream); }
.academy-section-white { background: var(--academy-white); }

.academy-kicker {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px;
  color: var(--academy-gold-text); font-size: 0.75rem; line-height: 1.2; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.academy-kicker::before { content: ''; width: 34px; height: 2px; background: currentColor; }
.academy-section-dark .academy-kicker, .academy-page-hero .academy-kicker { color: var(--academy-gold); }
.academy-lede { max-width: 680px; font-size: clamp(1.08rem, 1.8vw, 1.3rem); line-height: 1.72; }
.academy-section-head { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.55fr); gap: 64px; align-items: end; margin-bottom: 54px; }
.academy-section-head > p { margin-bottom: 7px; font-size: 1.05rem; line-height: 1.75; }

/* ---------- Announcement + header ---------- */

.academy-announcement {
  min-height: 38px; display: flex; align-items: center; justify-content: center; padding: 7px 20px;
  background: var(--academy-gold); color: var(--academy-forest-deep); text-align: center;
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
}
.academy-header { position: sticky; top: 0; z-index: 80; background: var(--academy-paper); border-bottom: 1px solid rgba(65, 65, 72, 0.18); }
.academy-header-inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 28px; position: relative; }
.academy-brand { display: inline-flex; align-items: center; gap: 13px; min-height: 48px; text-decoration: none; flex: none; }
.academy-brand-mark {
  width: 46px; height: 46px; display: inline-grid; place-items: center; position: relative;
  background: var(--academy-forest); color: var(--academy-gold); font-size: 0.86rem; font-weight: 500;
  letter-spacing: -0.04em; clip-path: polygon(0 0, 100% 0, 100% 78%, 78% 100%, 0 100%);
}
.academy-brand-mark::after { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(187, 167, 255, 0.45); }
.academy-brand-copy { display: grid; gap: 1px; line-height: 1; }
.academy-brand-copy strong { font-family: var(--academy-font); font-size: 0.98rem; font-weight: 500; letter-spacing: -0.025em; color: var(--academy-ink); }
.academy-brand-copy span { color: var(--academy-earth); font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 500; }
/* The header label is the prototype's .academy-card-label made operable: it
   carries the prototype's typography from that class and adds only what an
   anchor needs, so the two never drift apart. */
.academy-header-label {
  min-height: 44px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
}
.academy-header-label:hover { color: var(--academy-forest); }
.academy-card-label { color: var(--academy-gold-text); font-size: 0.69rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; }

/* ---------- Buttons ---------- */

.academy-btn {
  min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 21px; border: 1px solid transparent; border-radius: 2px; font-size: 0.86rem;
  line-height: 1.2; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.academy-btn svg { width: 17px; height: 17px; flex: none; }
.academy-btn-primary { background: var(--academy-forest); color: var(--academy-cream); border-color: var(--academy-forest); box-shadow: none; }
.academy-btn-primary:hover { background: var(--academy-forest-light); border-color: var(--academy-forest-light); box-shadow: none; }
.academy-btn-light { background: var(--academy-cream); color: var(--academy-forest-deep); border-color: var(--academy-cream); box-shadow: none; }
.academy-btn-light:hover { background: #f8f8f6; box-shadow: none; }
.academy-btn-outline { background: transparent; color: var(--academy-forest); border-color: rgba(9, 9, 11, 0.45); }
.academy-btn-outline:hover { border-color: var(--academy-forest); background: rgba(9, 9, 11, 0.05); }
.academy-section-dark .academy-btn-outline, .academy-page-hero .academy-btn-outline { color: var(--academy-cream); border-color: rgba(255, 255, 255, 0.5); }
.academy-section-dark .academy-btn-outline:hover, .academy-page-hero .academy-btn-outline:hover { border-color: var(--academy-gold); background: rgba(255, 255, 255, 0.08); }
.academy-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }

/* ---------- Page hero ---------- */

.academy-page-hero { padding: clamp(86px, 11vw, 150px) 0 clamp(72px, 9vw, 112px); background: var(--academy-forest-deep); color: var(--academy-cream); position: relative; overflow: hidden; }
.academy-page-hero::after { content: ''; position: absolute; width: 520px; height: 520px; top: -240px; right: -90px; border: 1px solid rgba(187, 167, 255, 0.32); border-radius: 50%; box-shadow: 0 0 0 72px rgba(187, 167, 255, 0.05), 0 0 0 144px rgba(187, 167, 255, 0.035); }
.academy-page-hero-body { display: contents; }
/* The founder body is rich text, so its paragraphs are descendants of a div
   rather than the direct <p> the prototype writes by hand. */
.academy-founder-body p { margin: 0 0 18px; }
.academy-founder-body p:last-of-type { margin-bottom: 0; }
.academy-page-hero .academy-container { position: relative; z-index: 1; }
.academy-page-hero h1 { max-width: 980px; font-size: clamp(3.2rem, 7vw, 6.4rem); margin-bottom: 27px; }
.academy-page-hero h1 em { color: inherit; font-style: italic; }
.academy-page-hero .academy-lede { color: #eeedea; max-width: 760px; }
.academy-page-hero .academy-actions { margin-top: 34px; }
.academy-hero-note { margin-top: 37px; display: flex; align-items: center; gap: 13px; color: #d7d7d3; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.academy-hero-note::before { content: ''; width: 42px; height: 1px; background: var(--academy-gold); flex: none; }

/* ---------- Feature grid ---------- */

.academy-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--academy-line); border-left: 1px solid var(--academy-line); }
.academy-feature {
  --academy-feature-inset: clamp(28px, 4vw, 48px);
  padding: var(--academy-feature-inset); border-right: 1px solid var(--academy-line); border-bottom: 1px solid var(--academy-line);
  display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--academy-feature-inset); align-items: start;
}
.academy-feature-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--academy-line); color: var(--academy-forest); }
.academy-feature-icon svg { width: 22px; height: 22px; }
.academy-feature > div { min-width: 0; }
.academy-feature h3 { margin: 0 0 10px; }
.academy-feature p { margin: 0; line-height: 1.7; }

/* ---------- Value grid (steps) ---------- */

.academy-value-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--academy-line); border-left: 1px solid var(--academy-line); }
.academy-value { min-height: 300px; padding: 29px; border-right: 1px solid var(--academy-line); border-bottom: 1px solid var(--academy-line); }
.academy-value .number { color: var(--academy-gold-text); font-family: var(--academy-display); font-size: 1.1rem; }
.academy-value h3 { margin: 70px 0 15px; }
.academy-value p { font-size: 0.9rem; line-height: 1.7; }

/* ---------- Form ---------- */

.academy-form-wrap { display: grid; grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1fr); gap: clamp(40px, 8vw, 110px); align-items: start; }
.academy-form-copy h2 { margin-bottom: 24px; }
.academy-form-copy p { color: #eeedea; line-height: 1.8; }
.academy-form { display: grid; gap: 17px; padding: clamp(28px, 4vw, 44px); background: var(--academy-paper); color: var(--academy-ink); border-top: 4px solid var(--academy-gold); }
.academy-field { display: grid; gap: 7px; }
.academy-field label { color: #414148; font-size: 0.76rem; font-weight: 500; letter-spacing: 0.04em; }
.academy-field input, .academy-field select, .academy-field textarea {
  width: 100%; min-height: 50px; border: 1px solid #87878d; border-radius: 0; background: var(--academy-white);
  color: var(--academy-ink); padding: 11px 13px;
}
.academy-field textarea { min-height: 118px; resize: vertical; }
.academy-check-field label { min-height: 44px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.academy-check-field input[type='checkbox'] { width: 22px; min-height: 22px; margin: 0; padding: 0; flex: none; accent-color: var(--academy-forest); }
.academy-field input:focus, .academy-field select:focus, .academy-field textarea:focus { border-color: var(--academy-forest); box-shadow: 0 0 0 2px rgba(9, 9, 11, 0.16); outline: 0; }
.academy-form-note { font-size: 0.73rem; line-height: 1.6; color: var(--academy-muted); }
.academy-form-status { padding: 13px 15px; border-left: 3px solid var(--academy-forest); background: #e5f3ec; color: var(--academy-forest); font-size: 0.86rem; line-height: 1.55; }

/* Native Kajabi form output (form_input renders .form-group wrappers with
   .form-control inputs and a .form-btn submit): mapped to the academy-field
   values so the rendered form matches the prototype 1:1. */
.academy-form .form-group { display: grid; gap: 7px; margin: 0; }
.academy-form label { color: #414148; font-size: 0.76rem; font-weight: 500; letter-spacing: 0.04em; }
.academy-form .form-control {
  width: 100%; min-height: 50px; border: 1px solid #87878d; border-radius: 0; background: var(--academy-white);
  color: var(--academy-ink); padding: 11px 13px;
}
.academy-form textarea.form-control { min-height: 118px; resize: vertical; }
.academy-form .form-control:focus { border-color: var(--academy-forest); box-shadow: 0 0 0 2px rgba(9, 9, 11, 0.16); outline: 0; }
.academy-form input[type='checkbox'] { width: 22px; min-height: 22px; margin: 0; padding: 0; flex: none; accent-color: var(--academy-forest); }
.academy-form .form-btn, .academy-form .btn {
  min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 21px; border: 1px solid var(--academy-forest); border-radius: 2px; font-size: 0.86rem;
  line-height: 1.2; font-weight: 500; text-decoration: none; cursor: pointer;
  background: var(--academy-forest); color: var(--academy-cream); box-shadow: none;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.academy-form .form-btn:hover, .academy-form .btn:hover { background: var(--academy-forest-light); border-color: var(--academy-forest-light); box-shadow: none; }

/* ---------- Alerts (flash banners) ---------- */

.academy-alert { padding: 13px 15px; font-size: 0.86rem; line-height: 1.55; }
.academy-alert-success { border-left: 3px solid var(--academy-forest); background: #e5f3ec; color: var(--academy-forest); }
.academy-alert-error { border-left: 3px solid #b42318; background: #fff1f0; color: #b42318; }
.academy .flash-messages { font-size: 0.86rem; line-height: 1.55; }
.academy .flash-messages .flash-text { margin: 0; padding: 13px 0; font-family: var(--academy-font); font-size: 0.86rem; font-weight: 500; }
.academy .flash--success { border-left: 3px solid var(--academy-forest); background: #e5f3ec; color: var(--academy-forest); }
.academy .flash--error { border-left: 3px solid #b42318; background: #fff1f0; color: #b42318; }

/* ---------- Legal strip ---------- */

.academy-legal { padding: 8px 0 34px; background: var(--academy-forest-deep); color: #d7d7d3; font-size: 0.72rem; line-height: 1.65; }
.academy-legal p { color: #d7d7d3; font-size: 0.72rem; line-height: 1.65; margin: 0; }

/* ---------- Footer ---------- */

.academy-footer { background: #111020; color: #d7d7d3; padding: 70px 0 28px; }
.academy-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(120px, 0.55fr)); gap: 44px; margin-bottom: 60px; }
.academy-footer-brand p { color: #d7d7d3; max-width: 390px; margin-top: 19px; font-size: 0.88rem; line-height: 1.7; }
.academy-footer .academy-brand-copy strong { color: var(--academy-cream); }
.academy-footer .academy-brand-copy span { color: var(--academy-gold); }
.academy-footer-col h3 { color: var(--academy-gold); font-family: var(--academy-font); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 17px; }
/* Footer links and footer spans read at one colour, as the source and the
   prototype render them. An invite-era override at the end of this file used to
   re-declare `.academy-footer-col a` in cream with an underline and a gold
   hover; at equal specificity it won, so neither ported value below was ever
   reachable and links split away from their sibling spans. The override is
   retired: d7r.css 780-781 is the only live declaration of these properties. */
.academy-footer-col a, .academy-footer-col span { min-height: 44px; display: flex; align-items: center; color: #d7d7d3; font-size: 0.82rem; }
.academy-footer-col a:hover { color: var(--academy-white); }
.academy-footer-legal { padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.18); color: #d7d7d3; font-size: 0.72rem; line-height: 1.65; }

/* ---------- Powered by ---------- */

.academy .powered-by { padding: 18px 20px 30px; background: #111020; text-align: center; font-size: 0.72rem; }
.academy .powered-by a { color: #d7d7d3; }

/* ---------- Full academy-block port (docs/ux/assets/d7r.css, 2026-08-20) ----------
   Everything in the planning repo's academy public-website block that the
   invite-page subset above did not need, in the source's own order. Values are
   copied 1:1; literals that are not design tokens stay literal. Structural
   *-child selectors are converted to *-of-type axes per THEME-ANATOMY 11.5. */

/* Base */
.academy-hero :focus-visible, .academy-post-hero :focus-visible, .academy-image-band-copy :focus-visible { outline-color: var(--academy-gold); }

/* Layout primitives */
.academy-section-tight { padding: clamp(52px, 7vw, 88px) 0; }
.academy-rule { border: 0; border-top: 1px solid var(--academy-line); margin: 0; }
.academy-hero .academy-kicker { color: var(--academy-gold); }
.academy-eyebrow-note { font-size: 0.76rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--academy-muted); }

/* Header navigation */
.academy-nav { display: flex; align-items: center; gap: 26px; }
.academy-nav-list { display: flex; align-items: center; gap: 24px; list-style: none; }
.academy-nav-list a { min-height: 44px; display: inline-flex; align-items: center; color: #414148; font-size: 0.88rem; font-weight: 500; border-bottom: 2px solid transparent; }
.academy-nav-list a:hover, .academy-nav-list a[aria-current='page'] { color: var(--academy-forest); border-bottom-color: var(--academy-gold-text); }
.academy-nav-actions { display: flex; align-items: center; gap: 10px; }
.academy-menu-toggle {
  display: none; width: 48px; height: 48px; align-items: center; justify-content: center;
  border: 1px solid var(--academy-line); background: var(--academy-white); color: var(--academy-forest);
}
.academy-menu-toggle svg { width: 22px; height: 22px; }

/* Buttons */
.academy-hero .academy-btn-outline { color: var(--academy-cream); border-color: rgba(255, 255, 255, 0.5); }
.academy-hero .academy-btn-outline:hover { border-color: var(--academy-gold); background: rgba(255, 255, 255, 0.08); }
.academy-btn-link { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; color: var(--academy-forest); font-size: 0.86rem; font-weight: 500; border-bottom: 2px solid var(--academy-gold-text); }
.academy-btn-link svg { width: 17px; height: 17px; transition: transform 160ms ease; }
.academy-btn-link:hover svg { transform: translateX(3px); }

/* Home hero */
.academy-hero { min-height: min(790px, calc(100vh - 116px)); background: var(--academy-forest-deep); color: var(--academy-cream); position: relative; display: grid; align-items: stretch; overflow: hidden; }
.academy-hero-media { position: absolute; inset: 0; }
.academy-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.academy-hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17, 16, 32, 0.98) 0%, rgba(17, 16, 32, 0.92) 35%, rgba(17, 16, 32, 0.46) 64%, rgba(17, 16, 32, 0.12) 100%); }
.academy-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.74fr) minmax(300px, 0.5fr); min-height: inherit; align-items: center; gap: 40px; padding: clamp(82px, 10vw, 134px) 0; }
.academy-hero-copy { max-width: 790px; }
.academy-hero h1 { max-width: 850px; margin-bottom: 27px; }
.academy-hero h1 em { color: var(--academy-gold); font-style: italic; }
.academy-hero .academy-lede { color: #eeedea; max-width: 650px; margin-bottom: 34px; }
.academy-hero-rail { align-self: end; justify-self: end; width: min(320px, 100%); padding: 22px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(17, 16, 32, 0.72); backdrop-filter: blur(10px); }
.academy-hero-rail strong { display: block; color: var(--academy-gold); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; }
.academy-hero-rail p { color: #eeedea; font-size: 0.92rem; line-height: 1.6; }

/* Path grid */
.academy-path-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--academy-line); }
.academy-path-card { min-height: 430px; padding: clamp(34px, 5vw, 64px); background: var(--academy-white); display: flex; flex-direction: column; align-items: flex-start; position: relative; overflow: hidden; }
/* Replaces `.academy-path-card + .academy-path-card`: the adjacent-sibling axis
   breaks the same way *-child does once Kajabi interleaves style tags between
   the cards, so the divider is expressed on the of-type axis instead. */
.academy-path-card:not(:first-of-type) { border-left: 1px solid var(--academy-line); }
.academy-path-card::after { content: attr(data-index); position: absolute; right: 24px; bottom: -28px; color: rgba(9, 9, 11, 0.055); font-family: var(--academy-display); font-size: 10rem; line-height: 1; }
.academy-path-card:hover { background: #f8f8f6; }
.academy-path-card .academy-card-label { margin-bottom: auto; }
.academy-path-card h3 { max-width: 460px; margin: 46px 0 18px; font-size: clamp(2rem, 4vw, 3.4rem); }
.academy-path-card p { max-width: 560px; font-size: 1.02rem; line-height: 1.75; margin-bottom: 28px; }

/* Method */
.academy-method-layout { display: grid; grid-template-columns: minmax(250px, 0.52fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 96px); align-items: start; }
.academy-method-intro { position: sticky; top: 126px; }
.academy-method-intro h2 { margin-bottom: 24px; }
.academy-method-intro p { color: #d7d7d3; font-size: 1.03rem; line-height: 1.8; }
.academy-method-steps { border-top: 1px solid rgba(255, 255, 255, 0.24); }
.academy-method-item { border-bottom: 1px solid rgba(255, 255, 255, 0.24); }
.academy-method-step { width: 100%; display: grid; grid-template-columns: 58px minmax(0, 1fr) 28px; gap: 18px; align-items: center; padding: 26px 0; list-style: none; color: var(--academy-cream); text-align: left; }
.academy-method-step::-webkit-details-marker { display: none; }
.academy-method-step:hover, .academy-method-item[open] > .academy-method-step { color: var(--academy-gold); }
.academy-method-item[open] > .academy-method-step { padding-bottom: 16px; }
.academy-method-step .number { font-family: var(--academy-display); font-size: 1.3rem; color: var(--academy-gold); }
.academy-method-step .label { font-family: var(--academy-display); font-size: clamp(1.5rem, 3vw, 2.45rem); letter-spacing: -0.03em; }
.academy-method-step svg { width: 20px; height: 20px; transition: transform 160ms ease; }
.academy-method-item[open] > .academy-method-step svg { transform: rotate(90deg); }
.academy-method-panel { padding: 0 0 28px 76px; }
.academy-method-panel p { color: #d7d7d3; font-size: 1rem; line-height: 1.75; max-width: 620px; }
.academy-method-visual { margin-top: 46px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; align-items: end; height: 118px; }
/* Progressive enhancement, not decoration: the bars rest FINISHED, and only a
   page that has scripting collapses them so the reveal has somewhere to travel
   from. Without JavaScript, has-academy-js is never set and the visitor sees the
   completed progression rather than four stubs. */
.academy-method-visual span { display: block; min-height: 18px; background: rgba(187, 167, 255, 0.26); border-top: 2px solid var(--academy-gold); transform-origin: bottom; transform: scaleY(1); transition: transform 160ms ease; }
.has-academy-js .academy-method-visual:not(.is-visible) span { transform: scaleY(0.15); }
/* Replaces `span:nth-child(1..4)`: all four bars are spans, so the of-type axis
   is identical here and survives Kajabi-injected siblings. */
.academy-method-visual span:nth-of-type(1) { height: 32%; }
.academy-method-visual span:nth-of-type(2) { height: 52%; }
.academy-method-visual span:nth-of-type(3) { height: 74%; }
.academy-method-visual span:nth-of-type(4) { height: 100%; }
.academy-method-visual.is-visible span { transform: scaleY(1); }

/* Course grid and filters */
.academy-course-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px; }
.academy-course-card { grid-column: span 4; min-height: 490px; display: flex; flex-direction: column; background: var(--academy-white); border: 1px solid var(--academy-line); overflow: hidden; transition: border-color 160ms ease, box-shadow 160ms ease; }
.academy-course-card:hover { border-color: #87878d; box-shadow: var(--academy-shadow); }
/* Replaces `.academy-course-card:nth-child(4n + N)`: the cards are the only
   articles in the grid, so the of-type axis keeps the four-colour rotation
   correct once Kajabi interleaves style tags between them.
   Delta register, art rotation: the four fills below (#111020, #414148, #09090b,
   #3b40d6) are one literal set copied 1:1 from d7r.css 545-548. Only the second
   coincides with a design token (--academy-earth). It stays literal on purpose:
   substituting var() for one member of a four-value rotation would make a theme
   setting move one card art and not the other three, breaking the set's
   symmetry. Change the rotation only as a set, and only in the prototype first. */
/* Two ways to reach the same four fills. The prototype rotates them by position;
   the theme also lets a card name its tone, because the Builder can reorder cards
   and a rotation that shifts under an operator is not a design. A named tone wins
   over the cycle. */
.academy-course-art[data-art-tone='forest'] { background: #111020; }
.academy-course-art[data-art-tone='earth'] { background: #414148; }
.academy-course-art[data-art-tone='ink'] { background: #09090b; }
.academy-course-art[data-art-tone='forest_mid'] { background: #3b40d6; }
.academy-course-card:nth-of-type(4n + 1) .academy-course-art { background: #111020; }
.academy-course-card:nth-of-type(4n + 2) .academy-course-art { background: #414148; }
.academy-course-card:nth-of-type(4n + 3) .academy-course-art { background: #09090b; }
.academy-course-card:nth-of-type(4n + 4) .academy-course-art { background: #3b40d6; }
.academy-course-card .academy-course-art[data-art-tone='forest'] { background: #111020; }
.academy-course-card .academy-course-art[data-art-tone='earth'] { background: #414148; }
.academy-course-card .academy-course-art[data-art-tone='ink'] { background: #09090b; }
.academy-course-card .academy-course-art[data-art-tone='forest_mid'] { background: #3b40d6; }
.academy-course-art { height: 178px; padding: 22px; color: var(--academy-cream); position: relative; overflow: hidden; }
.academy-course-art::before, .academy-course-art::after { content: ''; position: absolute; border: 1px solid rgba(187, 167, 255, 0.55); border-radius: 50%; }
.academy-course-art::before { width: 210px; height: 210px; right: -55px; top: -90px; }
.academy-course-art::after { width: 120px; height: 120px; right: 25px; top: -25px; }
.academy-course-art .art-code { position: relative; z-index: 1; color: #bba7ff; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.academy-course-art .art-line { position: absolute; left: 24px; right: 24px; bottom: 24px; height: 2px; background: linear-gradient(90deg, var(--academy-gold) 0 32%, rgba(187, 167, 255, 0.24) 32% 100%); }
.academy-course-body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.academy-course-body h3 { margin: 13px 0 14px; font-size: 1.65rem; }
.academy-course-body p { line-height: 1.7; margin-bottom: 22px; }
.academy-course-outcome { padding-top: 16px; margin-top: auto; border-top: 1px solid var(--academy-line); color: #414148; font-size: 0.81rem; line-height: 1.55; }
.academy-course-outcome strong { display: block; color: var(--academy-earth); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.65rem; margin-bottom: 5px; }
.academy-course-instructor { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 16px; color: #414148; font-size: 0.76rem; line-height: 1.45; }
.academy-course-instructor strong { color: var(--academy-earth); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.63rem; }
.academy-course-body .academy-btn-link { align-self: flex-start; margin-top: 20px; padding: 0; border: 0; border-bottom: 2px solid var(--academy-gold-text); background: transparent; }
/* The filter is an enhancement over a complete list. Until academy.js marks the
   bar ready, the controls stay hidden, so a visitor without scripting sees every
   course and no dead buttons. */
.academy-filter-bar:not([data-academy-ready]) .academy-filter,
.academy-filter-bar:not([data-academy-ready]) .academy-result-count { display: none; }
.academy-filter-bar:not([data-academy-ready]) { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.academy-filter-bar { display: flex; flex-wrap: wrap; gap: 9px; padding: 19px 0; border-top: 1px solid var(--academy-line); border-bottom: 1px solid var(--academy-line); margin-bottom: 36px; }
.academy-filter {
  min-height: 44px; padding: 9px 16px; border: 1px solid var(--academy-line); background: transparent;
  color: #414148; font-size: 0.79rem; font-weight: 500;
}
.academy-filter:hover, .academy-filter[aria-pressed='true'] { background: var(--academy-forest); color: var(--academy-cream); border-color: var(--academy-forest); }
.academy-result-count { margin-left: auto; align-self: center; color: var(--academy-muted); font-size: 0.8rem; font-weight: 500; }

/* Track grid */
.academy-track-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--academy-line); border-left: 1px solid var(--academy-line); }
.academy-track-card { min-height: 330px; padding: clamp(28px, 4vw, 44px); border-right: 1px solid var(--academy-line); border-bottom: 1px solid var(--academy-line); display: flex; flex-direction: column; align-items: flex-start; }
.academy-track-card h3 { margin: 46px 0 16px; font-size: clamp(1.7rem, 2.8vw, 2.5rem); }
.academy-track-card p { font-size: 0.93rem; line-height: 1.75; margin-bottom: 25px; }
.academy-track-card .academy-btn-link { margin-top: auto; }

/* Offer cards and comparison table */
.academy-offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.academy-offer-card { min-height: 680px; padding: clamp(28px, 3vw, 40px); border: 1px solid var(--academy-line); border-top: 4px solid var(--academy-forest); background: var(--academy-paper); display: flex; flex-direction: column; align-items: flex-start; }
.academy-offer-card-future { background: #eeedea; border-top-color: var(--academy-earth); }
.academy-offer-status { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 45px; }
.academy-status-pill { padding: 7px 10px; border: 1px solid rgba(9, 9, 11, 0.3); background: #e5f3ec; color: var(--academy-forest); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.academy-status-pill-muted { border-color: rgba(65, 65, 72, 0.32); background: #eeedea; color: var(--academy-earth); }
.academy-offer-card h3 { font-size: clamp(2rem, 3.5vw, 3rem); margin-bottom: 18px; }
.academy-offer-card > p { line-height: 1.72; }
.academy-offer-audience { color: var(--academy-forest); font-weight: 750; margin-bottom: 18px; }
.academy-offer-outcome { width: 100%; margin: 28px 0 23px; padding: 18px 0; border-top: 1px solid var(--academy-line); border-bottom: 1px solid var(--academy-line); }
.academy-offer-outcome strong { display: block; color: var(--academy-earth); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 7px; }
.academy-offer-outcome span { color: #414148; font-size: 0.86rem; line-height: 1.6; }
.academy-boundary-list { margin: 0 0 28px; padding: 0; list-style: none; color: var(--academy-muted); font-size: 0.82rem; line-height: 1.55; }
.academy-boundary-list li { position: relative; padding: 9px 0 9px 18px; border-bottom: 1px solid rgba(215, 215, 211, 0.75); }
.academy-boundary-list li::before { content: ''; position: absolute; left: 0; top: 17px; width: 7px; height: 7px; background: var(--academy-gold-text); }
.academy-offer-card > .academy-btn { width: 100%; margin-top: auto; }
.academy-table-wrap { overflow-x: auto; border: 1px solid var(--academy-line); background: var(--academy-white); }
.academy-table-wrap:focus-visible { outline-offset: 5px; }
.academy-comparison-table { width: 100%; min-width: 820px; border-collapse: collapse; text-align: left; }
.academy-comparison-table th, .academy-comparison-table td { padding: 21px 22px; border-right: 1px solid var(--academy-line); border-bottom: 1px solid var(--academy-line); vertical-align: top; line-height: 1.55; }
/* Replaces `tr:last-child` and `th/td:last-child`: rows are the only tr type in
   their section and the trailing cell is the last of its own type, so the
   of-type axis reproduces the source edge-suppression exactly.
   One exception, and it is why the right-edge rule is split in two: a body row
   is `th[scope=row] td td td`, so the row header is the FIRST child but the ONLY
   th of its type. Source `th:last-child` therefore never matched it and it kept
   its border-right; a bare `th:last-of-type` would match it and delete the rule
   between the row-header column and the first data column. Scoping the th half
   to `thead` restores the source result on both row kinds. */
.academy-comparison-table tr:last-of-type th, .academy-comparison-table tr:last-of-type td { border-bottom: 0; }
.academy-comparison-table thead th:last-of-type, .academy-comparison-table td:last-of-type { border-right: 0; }
.academy-comparison-table thead th { background: var(--academy-forest); color: var(--academy-cream); font-size: 0.76rem; letter-spacing: 0.06em; }
.academy-comparison-table tbody th { width: 145px; color: var(--academy-earth); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.academy-comparison-table td { color: #414148; font-size: 0.84rem; }

/* Editorial index */
.academy-editorial-hero { padding: clamp(74px, 9vw, 120px) 0; background: var(--academy-forest-deep); color: var(--academy-cream); }
.academy-editorial-hero-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(420px, 0.72fr); gap: clamp(48px, 8vw, 104px); align-items: center; }
.academy-editorial-hero-copy h1 { max-width: 760px; margin-bottom: 26px; }
.academy-editorial-hero-copy .academy-lede { color: #eeedea; }
.academy-featured-article { background: var(--academy-paper); color: var(--academy-ink); box-shadow: none; }
.academy-featured-art { height: 230px; position: relative; overflow: hidden; background: var(--academy-earth); color: #bba7ff; }
.academy-featured-art::before, .academy-featured-art::after { content: ''; position: absolute; border: 1px solid rgba(187, 167, 255, 0.6); border-radius: 50%; }
.academy-featured-art::before { width: 320px; height: 320px; top: -190px; right: -20px; }
.academy-featured-art::after { width: 210px; height: 210px; top: -115px; right: 36px; }
.academy-featured-art span { position: absolute; left: 26px; bottom: 22px; z-index: 1; font-family: var(--academy-display); font-size: 3.8rem; }
.academy-featured-art i { position: absolute; left: 112px; right: 28px; height: 2px; bottom: 42px; background: rgba(187, 167, 255, 0.58); }
.academy-featured-art i:nth-of-type(2) { bottom: 32px; right: 82px; }
.academy-featured-art i:nth-of-type(3) { bottom: 22px; right: 142px; }
.academy-featured-copy { padding: clamp(28px, 4vw, 40px); }
.academy-featured-copy h2 { margin: 15px 0 16px; font-size: clamp(2rem, 3.6vw, 3.2rem); }
.academy-featured-copy p { line-height: 1.72; margin-bottom: 24px; }
.academy-category-nav { display: flex; flex-wrap: wrap; gap: 9px; padding: 17px 0; margin-bottom: 38px; border-top: 1px solid var(--academy-line); border-bottom: 1px solid var(--academy-line); }
.academy-category-nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 9px 15px; border: 1px solid var(--academy-line); color: #414148; font-size: 0.77rem; font-weight: 500; }
.academy-category-nav a:hover, .academy-category-nav a:focus-visible, .academy-category-nav a[aria-current='page'] { background: var(--academy-forest); color: var(--academy-cream); border-color: var(--academy-forest); }
.academy-article-list { border-top: 1px solid var(--academy-line); }
.academy-article-card { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: clamp(26px, 5vw, 70px); padding: clamp(34px, 5vw, 58px) 0; border-bottom: 1px solid var(--academy-line); }
.academy-article-index { color: var(--academy-gold-text); font-family: var(--academy-display); font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1; }
.academy-article-card-copy { max-width: 850px; }
.academy-article-card-copy h3 { margin: 12px 0 14px; font-size: clamp(1.8rem, 3.4vw, 3rem); }
.academy-article-card-copy p { max-width: 740px; line-height: 1.75; margin-bottom: 18px; }
.academy-editorial-note { margin-top: 32px; padding: 17px 20px; border-left: 3px solid var(--academy-gold-text); background: var(--academy-cream); font-size: 0.8rem; line-height: 1.6; }

/* Article */
.academy-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 42px; color: #d7d7d3; font-size: 0.78rem; }
.academy-breadcrumb a { min-height: 44px; display: inline-flex; align-items: center; color: var(--academy-cream); font-weight: 500; }
.academy-breadcrumb span[aria-current='location'] { color: #d7d7d3; }
.academy-post-hero { padding: clamp(65px, 9vw, 116px) 0 clamp(58px, 8vw, 96px); background: var(--academy-forest-deep); color: var(--academy-cream); }
.academy-post-hero h1 { max-width: 1050px; margin: 0 0 28px; }
.academy-post-dek { max-width: 760px; color: #eeedea; font-size: clamp(1.08rem, 1.9vw, 1.3rem); line-height: 1.72; }
.academy-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 32px; color: #d7d7d3; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
.academy-post-meta a { min-height: 44px; display: inline-flex; align-items: center; color: #bba7ff; }
.academy-post-art { min-height: clamp(250px, 38vw, 520px); position: relative; overflow: hidden; background: var(--academy-earth); }
.academy-post-art::before, .academy-post-art::after { content: ''; position: absolute; border: 1px solid rgba(187, 167, 255, 0.62); border-radius: 50%; }
.academy-post-art::before { width: min(65vw, 840px); height: min(65vw, 840px); top: -52%; right: -6%; }
.academy-post-art::after { width: min(42vw, 560px); height: min(42vw, 560px); top: -28%; right: 8%; }
.academy-post-art-lines { position: absolute; left: clamp(24px, 8vw, 120px); right: clamp(24px, 8vw, 120px); bottom: clamp(30px, 8vw, 96px); display: grid; gap: 13px; }
.academy-post-art-lines span { height: 2px; background: linear-gradient(90deg, #bba7ff 0 28%, rgba(187, 167, 255, 0.24) 28% 100%); }
/* Replaces `span:nth-child(2)` / `span:nth-child(3)`: the rule elements are all
   spans, so the of-type axis matches the same two lines. */
.academy-post-art-lines span:nth-of-type(2) { width: 78%; }
.academy-post-art-lines span:nth-of-type(3) { width: 56%; }
.academy-post-layout { display: grid; grid-template-columns: minmax(190px, 0.28fr) minmax(0, 0.72fr); gap: clamp(50px, 9vw, 118px); align-items: start; }
.academy-post-toc { position: sticky; top: 118px; padding-top: 5px; }
/* academy.js builds the list from the article's own headings. With scripting off
   the list is empty, so the whole rail collapses rather than leaving a heading
   and a hairline over nothing. */
.academy-post-toc:not(:has(li)) { display: none; }
.academy-post-toc strong { display: block; margin-bottom: 13px; color: var(--academy-earth); font-size: 0.67rem; letter-spacing: 0.12em; text-transform: uppercase; }
.academy-post-toc ol { padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--academy-line); }
.academy-post-toc a { min-height: 48px; display: flex; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--academy-line); color: #414148; font-size: 0.8rem; font-weight: 500; line-height: 1.4; }
.academy-post-prose { max-width: 70ch; }
/* Replaces `> p:first-child`: the lead paragraph is the first paragraph of the
   prose, which the of-type axis states directly and Kajabi cannot displace. */
.academy-post-prose > p:first-of-type { color: var(--academy-forest); font-family: var(--academy-display); font-size: clamp(1.35rem, 2.4vw, 1.8rem); line-height: 1.55; }
.academy-post-prose h2 { margin: 2.1em 0 0.55em; font-size: clamp(2rem, 4vw, 3.25rem); scroll-margin-top: 120px; }
.academy-post-prose h3 { margin: 1.8em 0 0.5em; }
.academy-post-prose p, .academy-post-prose li { font-size: 1.03rem; line-height: 1.83; }
.academy-post-prose p + p { margin-top: 1.35em; }
.academy-post-prose ul, .academy-post-prose ol { margin: 1.25em 0; padding-left: 1.25em; }
.academy-post-prose li + li { margin-top: 0.7em; }
.academy-post-callout { margin: 38px 0; padding: clamp(24px, 4vw, 36px); border-left: 4px solid var(--academy-gold-text); background: var(--academy-cream); }
.academy-post-callout strong { display: block; color: var(--academy-earth); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; }
.academy-post-callout p { color: var(--academy-forest); font-family: var(--academy-display); font-size: clamp(1.25rem, 2.3vw, 1.7rem); line-height: 1.55; }
.academy-post-disclosure { margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--academy-line); font-size: 0.78rem !important; color: var(--academy-muted); }
.academy-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, 0.25); border-left: 1px solid rgba(255, 255, 255, 0.25); }
.academy-related-card { min-height: 290px; padding: clamp(25px, 4vw, 38px); border-right: 1px solid rgba(255, 255, 255, 0.25); border-bottom: 1px solid rgba(255, 255, 255, 0.25); display: flex; flex-direction: column; align-items: flex-start; }
.academy-related-card .academy-card-label { color: var(--academy-gold); }
.academy-related-card h3 { margin: 42px 0 16px; color: var(--academy-cream); }
.academy-related-card p { color: #d7d7d3; line-height: 1.7; margin-bottom: 22px; }
.academy-related-card .academy-btn-link { margin-top: auto; color: var(--academy-cream); border-bottom-color: var(--academy-gold); }

/* Image band */
.academy-image-band { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.72fr); min-height: 620px; }
.academy-image-band-media { min-height: 480px; overflow: hidden; position: relative; }
.academy-image-band-media img { width: 100%; height: 100%; object-fit: cover; }
.academy-image-band-media::after { content: ''; position: absolute; inset: 0; box-shadow: inset -40px 0 80px rgba(17, 16, 32, 0.18); }
.academy-image-band-copy { padding: clamp(48px, 7vw, 92px); background: var(--academy-earth); color: var(--academy-cream); display: flex; flex-direction: column; justify-content: center; }
.academy-image-band-copy .academy-kicker { color: #bba7ff; }
.academy-image-band-copy h2 { margin-bottom: 24px; }
.academy-image-band-copy p { color: #eeedea; font-size: 1.02rem; line-height: 1.8; margin-bottom: 31px; }

/* Proof cards */
.academy-proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.academy-proof-card { min-height: 270px; padding: 27px; border: 1px dashed #87878d; background: rgba(255, 255, 255, 0.5); display: flex; flex-direction: column; }
.academy-proof-card svg { width: 26px; height: 26px; color: var(--academy-gold-text); margin-bottom: 46px; }
.academy-proof-card h3 { font-size: 1.35rem; margin-bottom: 12px; }
.academy-proof-card p { font-size: 0.9rem; line-height: 1.7; }
.academy-proof-card .academy-card-label { margin-top: auto; padding-top: 24px; }

/* Founder */
.academy-founder { display: grid; grid-template-columns: minmax(250px, 0.55fr) minmax(0, 1fr); gap: clamp(42px, 8vw, 110px); align-items: center; }
.academy-founder-photo { aspect-ratio: 4 / 5; background: var(--academy-forest); color: var(--academy-cream); border: 1px solid rgba(187, 167, 255, 0.55); display: grid; place-items: center; position: relative; overflow: hidden; }
/* The ring and the caption belong to the PLACEHOLDER state. In the prototype no
   real portrait exists, so d7r.css can attach both unconditionally. In the theme
   an operator can set a real photo, and an unscoped `content: 'Approved founder
   headshot'` would paint that claim across it. Both are scoped, and the caption
   text becomes a setting instead of a hard-coded string. */
.academy-founder-photo--placeholder::before { content: ''; position: absolute; width: 76%; aspect-ratio: 1; border: 1px solid rgba(187, 167, 255, 0.45); border-radius: 50%; }
.academy-founder-caption { position: absolute; bottom: 22px; left: 22px; right: 22px; padding-top: 13px; border-top: 1px solid rgba(255, 255, 255, 0.32); color: #d7d7d3; font-size: 0.68rem; letter-spacing: 0.12em; text-align: center; text-transform: uppercase; font-weight: 500; }
.academy-founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.academy-founder-initials { position: relative; z-index: 1; font-family: var(--academy-display); font-size: clamp(4rem, 9vw, 8rem); color: var(--academy-gold); }
.academy-founder-copy h2 { margin-bottom: 25px; }
.academy-founder-copy > p { max-width: 690px; font-size: 1.04rem; line-height: 1.82; margin-bottom: 20px; }
.academy-founder-principle { margin: 28px 0 0; padding: 22px 0 0; border-top: 1px solid var(--academy-line); }
.academy-founder-principle p { margin-top: 10px; color: var(--academy-forest); font-family: var(--academy-display); font-size: 1.35rem; line-height: 1.55; }
.academy-founder-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 34px 0; border-top: 1px solid var(--academy-line); border-left: 1px solid var(--academy-line); }
.academy-founder-fact { padding: 21px; border-right: 1px solid var(--academy-line); border-bottom: 1px solid var(--academy-line); }
.academy-founder-fact strong { display: block; color: var(--academy-forest); font-family: var(--academy-display); font-size: 1.2rem; margin-bottom: 5px; }
.academy-founder-fact span { color: var(--academy-muted); font-size: 0.79rem; line-height: 1.5; }

/* Timeline */
.academy-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, 0.28); }
.academy-timeline-item { padding: 30px 28px 10px 0; border-right: 1px solid rgba(255, 255, 255, 0.22); }
/* Replaces `.academy-timeline-item + .academy-timeline-item` and
   `.academy-timeline-item:last-child`: both depend on sibling position, which
   Kajabi's interleaved style tags break; the of-type axis states the same rule. */
.academy-timeline-item:not(:first-of-type) { padding-left: 28px; }
.academy-timeline-item:last-of-type { border-right: 0; }
.academy-timeline-item .academy-card-label { color: var(--academy-gold); }
.academy-timeline-item h3 { margin: 48px 0 15px; color: var(--academy-cream); }
.academy-timeline-item p { color: #d7d7d3; line-height: 1.7; font-size: 0.9rem; }

/* Personas, dark copy, community standard */
.academy-persona-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.academy-persona { padding: 10px 14px; border: 1px solid rgba(255, 255, 255, 0.33); color: var(--academy-cream); font-size: 0.78rem; font-weight: 500; }
.academy-copy-on-dark { color: #d7d7d3; }
.academy-community-standard { margin-top: 52px; border-top: 1px solid rgba(255, 255, 255, 0.24); padding-top: 31px; }
.academy-community-standard .academy-card-label { color: var(--academy-gold); }
.academy-community-standard p { margin-top: 17px; color: #d7d7d3; font-family: var(--academy-display); font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.4; }
.academy-actions-spaced { margin-top: 34px; }

/* FAQ */
.academy-faq { border-top: 1px solid var(--academy-line); }
.academy-faq-title { margin-bottom: 42px; }
.academy-faq details { border-bottom: 1px solid var(--academy-line); }
.academy-faq summary { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; list-style: none; font-family: var(--academy-display); font-size: 1.2rem; font-weight: 500; }
.academy-faq summary::-webkit-details-marker { display: none; }
.academy-faq summary::after { content: '+'; color: var(--academy-gold-text); font-family: var(--academy-font); font-size: 1.4rem; font-weight: 500; }
.academy-faq details[open] summary::after { content: '\2212'; }
.academy-faq details p { max-width: 760px; padding: 0 52px 24px 0; line-height: 1.75; }

/* Form (remaining state) */
.academy-form :disabled { opacity: 0.62; cursor: not-allowed; }

/* Dialog */
.academy-dialog { width: min(680px, calc(100% - 32px)); max-height: calc(100vh - 40px); padding: 0; border: 0; background: var(--academy-paper); color: var(--academy-ink); box-shadow: 0 24px 100px rgba(0, 0, 0, 0.36); }
.academy-dialog::backdrop { background: rgba(17, 16, 32, 0.78); backdrop-filter: blur(4px); }
.academy-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 28px; border-bottom: 1px solid var(--academy-line); }
.academy-dialog-head h2 { font-size: clamp(1.8rem, 5vw, 2.8rem); }
.academy-dialog-close { width: 46px; height: 46px; display: grid; place-items: center; flex: none; border: 1px solid var(--academy-line); background: transparent; color: var(--academy-forest); }
.academy-dialog-close svg { width: 20px; height: 20px; }
.academy-dialog-body { padding: 28px; overflow-y: auto; }
.academy-dialog-body > p { font-size: 1rem; line-height: 1.75; }
.academy-dialog-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 26px 0; border-top: 1px solid var(--academy-line); border-left: 1px solid var(--academy-line); }
.academy-dialog-meta div { padding: 16px; border-right: 1px solid var(--academy-line); border-bottom: 1px solid var(--academy-line); }
.academy-dialog-meta strong { display: block; color: var(--academy-earth); font-size: 0.67rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 5px; }
.academy-dialog-meta span { font-size: 0.9rem; line-height: 1.5; }
.academy-dialog-note { padding: 14px 16px; background: var(--academy-cream); border-left: 3px solid var(--academy-gold-text); font-size: 0.79rem; line-height: 1.6; color: #414148; margin-bottom: 24px; }

/* Closing CTA */
.academy-cta { background: var(--academy-gold); color: var(--academy-forest-deep); padding: clamp(54px, 8vw, 92px) 0; }
.academy-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 38px; }
.academy-cta h2 { max-width: 770px; font-size: clamp(2.4rem, 5vw, 4.5rem); }
.academy-cta .academy-btn-primary { box-shadow: none; }

/* Academy form validation and interaction states (DESIGN-SYSTEM, 2026-08-19).
   The parsley-mapped equivalents live in the trailing section of this file;
   these are the prototype's own aria-invalid states, kept for hand-authored
   markup that does not go through Kajabi's form renderer. */
.academy-field input[aria-invalid='true'], .academy-field select[aria-invalid='true'], .academy-field textarea[aria-invalid='true'] { border-color: #b42318; box-shadow: 0 0 0 2px rgba(180, 35, 24, 0.14); }
.academy-field-error { margin-top: 6px; color: #b42318; font-size: 0.78rem; font-weight: 500; line-height: 1.45; }
.academy-check-field label { color: var(--academy-ink); font-size: 0.9rem; font-weight: 400; letter-spacing: 0; }
.academy-form-error {
  padding: 13px 15px; border-left: 3px solid #b42318; background: #fff1f0;
  color: #b42318; font-size: 0.82rem; line-height: 1.55;
}
.academy [id] { scroll-margin-top: 24px; }

/* Article callout, blockquote fallback. `.academy-post-callout` is authored
   inside the Blog body, which the Blog record owns, and the Blog editor may
   strip class attributes (mapping risk R15). A plain blockquote therefore
   renders as the same callout, so an author always has one that survives. */
.academy-post-prose blockquote {
  margin: 30px 0; padding: 24px 26px; background: var(--academy-white);
  border-left: 3px solid var(--academy-gold); font-style: normal;
}
.academy-post-prose blockquote p { margin: 0; }
.academy-post-prose blockquote p + p { margin-top: 12px; }

/* Academy system-page templates: login, not found, purchase confirmed (2026-08-20) */
/* Member sign-in (academy-login.html): narrow measure, lifted card, form-level error, invite-only recovery aside. */
.academy-login-shell { width: min(470px, 100%); margin-inline: auto; }
.academy-login-head { margin-bottom: 30px; }
.academy .academy-login-head h1 { font-size: clamp(2.1rem, 8vw, 3rem); line-height: 1.04; margin-bottom: 18px; }
.academy-login-card { border: 1px solid var(--academy-line); border-top: 4px solid var(--academy-gold); box-shadow: var(--academy-shadow); }
.academy-login-aside {
  margin-top: 26px; padding: clamp(22px, 4vw, 30px); background: var(--academy-white);
  border: 1px solid var(--academy-line); border-left: 3px solid var(--academy-gold-text);
}
.academy .academy-login-aside h2 { margin: 15px 0 11px; font-size: clamp(1.3rem, 3.6vw, 1.7rem); line-height: 1.2; }
.academy-login-aside p { font-size: 0.92rem; line-height: 1.7; margin-bottom: 16px; }
.academy-login-note {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--academy-line);
}
.academy-login-note svg { width: 24px; height: 24px; color: var(--academy-forest); }
.academy-login-note p { font-size: 0.78rem; line-height: 1.65; }

/* Page not found (academy-not-found.html): whole-cell destination links, recovery band spacing. */
.academy-destination { color: inherit; text-decoration: none; transition: background-color 160ms ease; }
.academy-destination:hover { background: var(--academy-white); }
.academy-destination:hover .academy-feature-icon { border-color: var(--academy-forest); }
.academy-destination h3 { display: flex; align-items: center; gap: 10px; }
.academy-destination h3 svg { width: 18px; height: 18px; flex: none; color: var(--academy-gold-text); transition: transform 160ms ease; }
.academy-destination:hover h3 svg { transform: translateX(3px); }
.academy-recovery-grid .academy-btn-link { margin-top: 14px; }

/* Purchase confirmed (academy-purchase-thank-you.html): Kajabi-rendered order shape, three-step value grid.
   The dashed value slot reuses the reserved-not-yet-real treatment of .academy-proof-card. */
.academy-order-shape { margin: 0; border: 1px solid var(--academy-line); border-bottom: 0; background: var(--academy-white); }
.academy-order-row {
  display: grid; grid-template-columns: minmax(170px, 0.32fr) minmax(0, 1fr); gap: 16px 24px;
  align-items: center; padding: 20px clamp(18px, 3vw, 28px); border-bottom: 1px solid var(--academy-line);
}
.academy-order-row dt { color: var(--academy-earth); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.academy-order-row dd { margin: 0; padding: 13px 15px; border: 1px dashed #87878d; background: var(--academy-paper); color: var(--academy-muted); font-size: 0.9rem; line-height: 1.55; }
.academy-value-grid.academy-value-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Platform-owned route specimens (2026-08-20).
   An affordance whose destination is a Kajabi-owned template with no prototype in this set
   (`library`, `forgot_password`, `forgot_password_edit`). It is rendered as noninteractive
   reserved text, never as a link, and it names the route it stands for. Reuses the dashed
   reserved-not-yet-real treatment already used by .academy-order-row dd. */
.academy-btn-platform { background: transparent; border-style: dashed; border-color: currentColor; box-shadow: none; cursor: default; }
.academy-btn-platform:hover { background: transparent; box-shadow: none; }
.academy-route-tag {
  display: inline-block; padding: 3px 8px; border: 1px dashed currentColor;
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
}
.academy-form-recovery { padding-top: 4px; font-size: 0.86rem; line-height: 1.65; color: var(--academy-ink); }
.academy-form-recovery .academy-route-tag { margin: 0 2px; color: var(--academy-earth); }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .academy-course-card { grid-column: span 6; }
  .academy-offer-grid { grid-template-columns: 1fr; }
  .academy-offer-card { min-height: auto; }
  .academy-offer-card > .academy-btn { width: auto; }
  .academy-post-layout { grid-template-columns: 1fr; }
  .academy-post-toc { position: static; }
  .academy-post-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 1px solid var(--academy-line); }
  .academy-post-toc a { padding: 10px 14px; border-right: 1px solid var(--academy-line); }
  .academy-value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .academy-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Replaces `:nth-child(2)` and `:nth-child(n + 3)`: same positions on the
     of-type axis, which Kajabi's interleaved style tags cannot shift. */
  .academy-timeline-item:nth-of-type(2) { border-right: 0; }
  .academy-timeline-item:nth-of-type(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.22); }
  .academy-footer-grid { grid-template-columns: 1.2fr repeat(3, minmax(100px, 0.5fr)); gap: 28px; }
}

@media (max-width: 1120px) {
  .academy-header-inner { min-height: 68px; flex-wrap: wrap; }
  .academy-nav {
    width: 100%; display: grid; gap: 20px; padding: 0 0 24px;
  }
  .has-academy-js .academy-menu-toggle { display: inline-flex; }
  .has-academy-js .academy-nav {
    position: fixed; inset: auto 0 auto 0; top: var(--academy-menu-top, 106px); width: auto; display: none;
    max-height: calc(100vh - var(--academy-menu-top, 106px)); overflow-y: auto; padding: 24px 16px 30px;
    background: var(--academy-paper); border-bottom: 1px solid var(--academy-line); box-shadow: var(--academy-shadow);
  }
  .has-academy-js .academy-nav.is-open { display: grid; gap: 20px; }
  .academy-nav-list { display: grid; gap: 0; }
  .academy-nav-list li { border-bottom: 1px solid var(--academy-line); }
  .academy-nav-list a { width: 100%; min-height: 52px; border-bottom: 0; }
  .academy-nav-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .academy-nav-actions .academy-btn-outline { display: inline-flex; }
}

/* The section head and the form layout collapse at 860px, in the block below.
   An invite-era `@media (max-width: 900px)` copy of both declarations used to sit
   here and made the 860px rules dead code, collapsing both layouts 40px early.
   d7r.css has no 900px breakpoint anywhere in the academy block, so the copy is
   retired rather than ratified; reinstating it means changing the prototype and
   DESIGN-SYSTEM.md first. */

@media (max-width: 860px) {
  .academy-container, .academy-container-narrow { width: min(100% - 32px, 1240px); }
  .academy-hero { min-height: auto; }
  .academy-hero-media img { object-position: 67% center; }
  .academy-hero-media::after { background: linear-gradient(90deg, rgba(17, 16, 32, 0.98), rgba(17, 16, 32, 0.82) 72%, rgba(17, 16, 32, 0.54)); }
  .academy-hero-grid { grid-template-columns: 1fr; min-height: 720px; padding: 88px 0 54px; }
  .academy-hero-rail { justify-self: start; width: min(420px, 100%); }
  .academy-section-head { grid-template-columns: 1fr; gap: 24px; }
  .academy-method-layout { grid-template-columns: 1fr; }
  .academy-method-intro { position: static; }
  .academy-track-grid { grid-template-columns: 1fr; }
  .academy-editorial-hero-grid { grid-template-columns: 1fr; }
  .academy-featured-article { box-shadow: none; }
  .academy-related-grid { grid-template-columns: 1fr; }
  .academy-image-band { grid-template-columns: 1fr; }
  .academy-image-band-media { min-height: 420px; }
  .academy-founder { grid-template-columns: minmax(220px, 0.52fr) minmax(0, 1fr); gap: 38px; }
  .academy-proof-grid { grid-template-columns: 1fr; }
  .academy-proof-card { min-height: 220px; }
  .academy-feature-grid { grid-template-columns: 1fr; }
  .academy-form-wrap { grid-template-columns: 1fr; }
  .academy-cta-inner { align-items: flex-start; flex-direction: column; }
  .academy-value-grid.academy-value-grid-three { grid-template-columns: 1fr; }
  .academy-footer-grid { grid-template-columns: 1.25fr 1fr 1fr; }
  .academy-footer-brand { grid-column: 1 / -1; }
}

/* The value grid's source responsive chain is 4 columns, then 2 at 1080px, then
   1 at 660px. An invite-era `@media (max-width: 768px)` block used to force it to
   1 column here, erasing the source's 768-660px two-column band; its companion
   `.academy-feature-grid` declaration merely repeated the 860px rule above. The
   block is retired: the 1080px and 660px rules are the source-faithful chain. */

@media (max-width: 660px) {
  .academy h1 { font-size: clamp(2.65rem, 14vw, 4.7rem); }
  .academy h2 { font-size: clamp(2.05rem, 11vw, 3.4rem); }
  .academy-brand-copy strong { font-size: 0.92rem; }
  .academy-brand-copy span { font-size: 0.55rem; }
  .academy-announcement { font-size: 0.66rem; }
  .academy-path-grid { grid-template-columns: 1fr; }
  .academy-path-card { min-height: 380px; }
  /* Replaces `.academy-path-card + .academy-path-card`, matching the base rule's
     of-type conversion so the divider flips from left to top at this width. */
  .academy-path-card:not(:first-of-type) { border-left: 0; border-top: 1px solid var(--academy-line); }
  .academy-method-step { grid-template-columns: 42px minmax(0, 1fr) 24px; gap: 11px; }
  .academy-method-panel { padding-left: 53px; }
  .academy-course-card { grid-column: 1 / -1; min-height: 460px; }
  .academy-filter-bar { align-items: stretch; }
  .academy-filter { flex: 1 1 calc(50% - 10px); }
  .academy-result-count { width: 100%; margin: 8px 0 0; }
  .academy-article-card { grid-template-columns: 54px minmax(0, 1fr); gap: 19px; }
  .academy-post-toc ol { grid-template-columns: 1fr; }
  .academy-founder { grid-template-columns: 1fr; }
  .academy-founder-photo { width: min(360px, 100%); }
  .academy-founder-facts { grid-template-columns: 1fr; }
  .academy-value-grid, .academy-timeline { grid-template-columns: 1fr; }
  /* Replaces `.academy-timeline-item + .academy-timeline-item` and
     `.academy-timeline-item:first-child`, matching the base rule's of-type axis. */
  .academy-timeline-item, .academy-timeline-item:not(:first-of-type) { padding: 26px 0; border-right: 0; border-top: 1px solid rgba(255, 255, 255, 0.22); }
  .academy-timeline-item:first-of-type { border-top: 0; }
  .academy-feature { grid-template-columns: 42px minmax(0, 1fr); }
  .academy-feature-icon { width: 42px; height: 42px; }
  .academy-dialog-meta { grid-template-columns: 1fr; }
  .academy-order-row { grid-template-columns: 1fr; gap: 9px; align-items: start; }
  .academy-order-row dd { font-size: 1rem; }
  .academy-footer-grid { grid-template-columns: 1fr 1fr; }
  .academy-footer-brand { grid-column: 1 / -1; }
  .academy-nav-actions { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .academy-header-inner { min-height: 0; gap: 2px; padding: 14px 0; }
  .academy-header:not([data-academy-header]) .academy-header-inner { flex-direction: column; align-items: flex-start; justify-content: center; }
  .has-academy-js .academy-header[data-academy-header] .academy-header-inner {
    min-height: 68px; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0;
  }
  .has-academy-js .academy-header[data-academy-header] .academy-brand { min-width: 0; flex: 1 1 auto; }
  .has-academy-js .academy-header[data-academy-header] .academy-menu-toggle { flex: 0 0 48px; margin-left: auto; align-self: center; }
  .academy-header:not([data-academy-header]) .academy-header-label { min-height: 32px; }
}

@media (max-width: 520px) {
  .academy-login-head { margin-bottom: 24px; }
  .academy-login-aside, .academy-login-note { margin-top: 22px; }
  .academy-login-note { grid-template-columns: 21px minmax(0, 1fr); gap: 11px; padding-top: 19px; }
  .academy-login-note svg { width: 20px; height: 20px; }
}

@media (max-width: 480px) {
  .academy-destination h3 { gap: 8px; }
  .academy-destination h3 svg { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .academy *, .academy *::before, .academy *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .academy-method-visual span { transform: scaleY(1); }
}


/* ---------- Form validation and interaction states (DESIGN-SYSTEM, 2026-08-19) ----------
   Mapped to Kajabi's rendered form markup (parsley validation, checkbox-field labels). */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
section[id], .academy-section[id] { scroll-margin-top: 24px; }
.academy-form .parsley-errors-list { list-style: none; margin: 0; padding: 0; }
.academy-form .parsley-errors-list.filled { margin-top: 6px; }
.academy-form .parsley-errors-list li { color: #b42318; font-size: 0.78rem; font-weight: 500; line-height: 1.45; }
.academy-form .form-control.parsley-error,
.academy-form input.parsley-error, .academy-form select.parsley-error, .academy-form textarea.parsley-error {
  border-color: #b42318; box-shadow: 0 0 0 2px rgba(180, 35, 24, 0.14);
}
.academy-form .checkbox-field label {
  display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer;
  font-weight: 400; font-size: 0.9rem; letter-spacing: 0; text-transform: none; color: #414148; line-height: 1.5;
}
.academy-form .checkbox-field label.parsley-error { color: #414148; }
.academy-form .checkbox-field input[type='checkbox'] { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--academy-forest); }
.academy-form .checkbox-field .overlay { flex: none; }
.academy-form .checkbox-field .text { flex: 1; }