/* Shared public-site hierarchy. Content examples remain live, selectable text. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/assets/fonts/manrope-latin.woff2") format("woff2"); }
:root { --site-heading: "Manrope", "Avenir Next", "Segoe UI", sans-serif; }
body h1, body h2, body h3 { font-family: var(--site-heading); font-weight: 700; letter-spacing: -.035em; line-height: 1.16; }
.site-shell :is(h1, h2, h3) { font-family: var(--site-heading); }
.site-shell :is(.course-link-card h4, .course-card-title, .course-request-text) { font-family: var(--site-heading); line-height: 1.4; }
.site-shell :is(.eyebrow, .public-breadcrumb, .signup-section-kicker, .signup-kicker) { text-transform: none; letter-spacing: 0; }
.site-shell .public-breadcrumb { margin-bottom: 24px; font-size: 14px; }
.site-shell .public-hero { min-height: 0; background: #153e34; }
.site-shell .public-hero-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; padding: 64px 0; gap: clamp(36px, 6vw, 88px); }
.site-shell .public-hero h1,
.site-shell .course-campaign-copy h1,
.signup-page .signup-hero h1 { max-width: 19ch; font-size: clamp(36px, 4.2vw, 58px); line-height: 1.08; letter-spacing: -.045em; }
.site-shell .public-hero h1 { margin-top: 0; }
.site-shell .public-hero-lead { margin-top: 24px; max-width: 52ch; line-height: 1.65; }
.site-shell .public-hero-actions { margin-top: 28px; gap: 20px; }
.site-shell .public-hero-example { min-width: 0; }
.site-shell .public-hero-example .product-preview,
.site-shell .signup-product-example .product-preview { width: 100%; padding: 32px; background: #fffdf7; }
.site-shell .public-hero-example .preview-title,
.site-shell .signup-product-example .preview-title { font-size: 24px; }
.site-shell .public-section { padding-top: 72px; padding-bottom: 72px; }
.site-shell .public-section-heading h2,
.site-shell .course-section-intro h2,
.site-shell .catalog-section-intro h2,
.site-shell .signup-section-heading h2 { max-width: 24ch; font-size: clamp(28px, 3vw, 42px); line-height: 1.16; }
.site-shell .public-section-heading { margin-bottom: 32px; }
.site-shell .public-indexed-list h3 { font-size: 23px; line-height: 1.25; }
.site-shell .public-indexed-list p { max-width: 65ch; }
.site-shell .public-definition-copy p,
.site-shell .public-main-difference > p { font-family: var(--site-heading); font-size: 20px; line-height: 1.7; }
.site-shell .public-definition-copy { padding-bottom: 0; }
.site-shell .public-final-cta h2 { max-width: 22ch; font-size: clamp(30px, 3.5vw, 48px); line-height: 1.14; }

/* Store badges share one physical height, including the transparent Play asset. */
.site-shell :is(.comparison-store-buttons, .comparison-hero-store-buttons, .intent-store-buttons, .about-store-buttons, .signup-store-badges) { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px; width: auto; max-width: 100%; }
.site-shell :is(.comparison-store-buttons, .comparison-hero-store-buttons, .intent-store-buttons, .about-store-buttons, .signup-store-badges) .course-store-badge-link { flex: 0 0 auto; width: auto; min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; zoom: 1; }
.site-shell :is(.comparison-store-buttons, .comparison-hero-store-buttons, .intent-store-buttons, .about-store-buttons, .signup-store-badges) .course-app-store-badge { width: auto; height: 48px; }
.site-shell .early-testing-note { flex-basis: 100%; margin-top: 0; font-size: 14px; }

/* Catalog starts with its real search, with optional detail kept nearby. */
.course-catalog-page .catalog-hero { min-height: 0; background: var(--catalog-cream); }
.course-catalog-page .catalog-hero::before { display: none; }
.course-catalog-page .catalog-hero .course-hero-shell { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 0 32px; align-items: center; min-height: 0; padding: 48px 0 24px; }
.course-catalog-page .catalog-hero .course-hero-copy { max-width: 850px; animation: none; }
.course-catalog-page .catalog-hero h1 { max-width: none; font-size: clamp(36px, 4.4vw, 58px); line-height: 1.12; color: var(--catalog-ink); }
.course-catalog-page .catalog-hero .section-text { margin-top: 18px; max-width: 65ch; font-size: 17px; color: #526159; }
.catalog-mascot { width: 140px; height: 140px; object-fit: contain; grid-column: 2; grid-row: 1 / 3; }
.catalog-build-details { grid-column: 1; max-width: 850px; margin-top: 8px; }
.catalog-build-details summary { width: fit-content; min-height: 44px; padding: 10px 0; cursor: pointer; color: var(--catalog-green-deep); font-size: 14px; font-weight: 700; }
.catalog-build-details summary:focus-visible { outline: 3px solid var(--catalog-green-deep); outline-offset: 3px; }
.catalog-build-details[open] { padding-bottom: 16px; }
.catalog-build-details .catalog-steps { margin: 20px 0; color: #153e34; }
.catalog-build-details .button { margin-top: 4px; }
.course-catalog-page .course-catalog-section { padding-top: 0; }
.course-catalog-page .course-catalog-section::before { display: none; }
.course-catalog-page .course-filter-shell { margin-top: 0; padding: 0; border: 0; border-radius: 0; background: transparent; gap: 12px; }
.catalog-interest-select { display: grid; min-width: 0; width: 240px; }
.catalog-interest-select select { width: 100%; min-height: 56px; padding: 10px 36px 10px 16px; border: 1px solid #cbd3c7; border-radius: 12px; color: #183d32; background: #fffdf7; font: inherit; font-size: 16px; }
.catalog-interest-select select:focus-visible { outline: 3px solid var(--catalog-green-deep); outline-offset: 3px; }
.course-catalog-page [data-course-catalog]:not(.is-catalog-ready) :is(.catalog-toolbar, .catalog-area-filter) { display: none; }
.catalog-topic-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.catalog-topic-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.course-catalog-page .course-interest-copy h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.18; }

/* Signup uses the same goal example as the product walkthrough. */
.signup-page .signup-hero { background: #153e34; }
.signup-page .signup-hero::before,
.signup-page .signup-hero::after { display: none; }
.signup-page .signup-hero-shell { min-height: 0; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); padding: 64px 0; gap: 64px; }
.signup-page .signup-kicker { margin-bottom: 20px; }
.signup-page .signup-hero-text { margin-top: 24px; }
.signup-page .signup-product-example { min-width: 0; }
.signup-page .signup-proof-strip strong,
.signup-page .signup-path-list h3,
.signup-page .signup-example-copy h3 { font-family: var(--site-heading); }

/* Plan selection precedes account creation, also in the document and tab order. */
.account-page .account-form { grid-template-columns: minmax(340px, 1fr) minmax(0, .86fr); }
.account-page .account-form.is-account-ready { grid-template-columns: minmax(0, 1fr); }
.account-page .account-form h2 { line-height: 1.2; }
.account-page .account-intro h1 { line-height: 1.14; }
.account-benefits-details { margin-top: 20px; }
.account-benefits-details summary { padding: 12px 0; min-height: 44px; font-size: 15px; font-weight: 700; cursor: pointer; }
.account-benefits-details .account-plus-benefits { margin-top: 12px; }

/* Standalone legal and account-link pages share the reading typography. */
.account-link-page .brand { margin-bottom: 28px; }
body:not(.site-shell) h1 { max-width: 22ch; font-size: clamp(32px, 5vw, 48px); }
body:not(.site-shell) h2 { font-size: clamp(24px, 3vw, 30px); }
body:not(.site-shell) :is(.copy, .panel) :is(h1, h2) { font-family: var(--site-heading); line-height: 1.16; }

@media (max-width: 980px) {
  .site-shell .public-hero-shell,
  .signup-page .signup-hero-shell { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .site-shell .public-hero-example,
  .signup-page .signup-product-example { width: min(100%, 620px); justify-self: center; }
  .account-page .account-form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .site-shell .public-hero-shell,
  .signup-page .signup-hero-shell { padding-top: 32px; padding-bottom: 40px; }
  .site-shell .public-hero h1,
  .site-shell .course-campaign-copy h1,
  .signup-page .signup-hero h1 { max-width: 100%; font-size: 36px; line-height: 1.12; }
  .site-shell .public-hero h1.public-hero-title-long-word { font-size: 32px; }
  .site-shell .public-hero-lead { margin-top: 20px; font-size: 16px; }
  .site-shell .public-breadcrumb { margin-bottom: 20px; }
  .site-shell .public-hero-example .product-preview,
  .site-shell .signup-product-example .product-preview { padding: 22px; }
  .site-shell .public-section { padding-top: 48px; padding-bottom: 48px; }
  .site-shell .public-section-heading h2,
  .site-shell .course-section-intro h2,
  .site-shell .catalog-section-intro h2,
  .site-shell .signup-section-heading h2 { font-size: 29px; max-width: 100%; }
  .site-shell :is(.comparison-store-buttons, .comparison-hero-store-buttons, .intent-store-buttons, .about-store-buttons, .signup-store-badges) { width: 100%; gap: 10px; }
  .site-shell :is(.comparison-store-buttons, .comparison-hero-store-buttons, .intent-store-buttons, .about-store-buttons, .signup-store-badges) .course-app-store-badge { height: 44px; }
  .course-catalog-page .catalog-hero .course-hero-shell { grid-template-columns: minmax(0, 1fr); padding: 28px 0 20px; }
  .course-catalog-page .catalog-mascot { display: none; }
  .course-catalog-page .catalog-hero h1 { font-size: 36px; }
  .course-catalog-page .catalog-hero .section-text { font-size: 16px; }
  .course-catalog-page .course-catalog-section { padding-top: 0; }
  .signup-page .signup-hero-copy > * { animation: none; }
  .signup-page .signup-product-example { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .site-shell .public-hero-copy,
  .signup-page .signup-hero-copy > * { animation: none; }
}

/* Discovery: one search row, illustrated categories, and distinct course cards. */
.discovery-icon { width: 24px; height: 24px; flex: 0 0 auto; }
.course-catalog-page .catalog-toolbar { display: flex; align-items: center; gap: 16px; }
.course-catalog-page .catalog-toolbar .course-search { flex: 1; max-width: none; min-width: 0; }
.course-catalog-page .course-search { border-radius: 12px; background: var(--catalog-paper); }
.course-catalog-page .course-search input { min-height: 54px; font-size: 16px; }
.course-catalog-page .course-search-clear { min-height: 44px; font-size: 14px; }
.course-group-symbol { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; color: var(--course-tint-text); background: linear-gradient(145deg, var(--course-tint-soft), #fffdf7); border: 1px solid color-mix(in srgb, var(--course-tint) 24%, transparent); }
.course-catalog-page .catalog-area-filter { gap: 24px; border-bottom: 1px solid var(--catalog-line); }
.course-catalog-page .catalog-area-filter button { min-height: 52px; padding: 0; border: 0; border-bottom: 3px solid transparent; border-radius: 0; color: #526159; background: transparent; font-size: 15px; }
.course-catalog-page .catalog-area-filter button[aria-pressed="true"] { color: var(--catalog-green-deep); border-bottom-color: currentColor; background: transparent; }
.course-catalog-page .catalog-area-filter button:focus-visible { outline: 3px solid var(--catalog-green-deep); outline-offset: 4px; }
.course-catalog-page .catalog-area-filter .discovery-icon { width: 20px; height: 20px; }
.course-catalog-page .course-filter-status { font-size: 14px; font-weight: 500; }
.course-catalog-page .course-category-group { padding: 24px 0 0; border: 0; border-radius: 0; background: transparent; }
.course-catalog-page .course-category-heading { align-items: center; padding-bottom: 0; border: 0; margin-bottom: 20px; }
.course-catalog-page .course-category-heading h3 { font-size: 24px; line-height: 1.25; }
.course-catalog-page .course-interest-group-label { display: none; }
.course-catalog-page .course-category-count { font-size: 14px; text-transform: none; letter-spacing: 0; }
.course-catalog-page .course-category-group .course-link-grid { gap: 28px 24px; padding: 4px 0 16px; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.course-catalog-page .course-link-grid::after { display: none; }
.course-catalog-page .course-link-card,
.course-catalog-page .course-link-card:nth-child(3n + 2),
.course-catalog-page .course-link-card:nth-child(3n + 3) { grid-template-columns: minmax(0, 1fr) 28px; grid-template-rows: auto auto 1fr; gap: 12px 8px; padding: 0 0 8px; overflow: visible; border: 0; border-radius: 12px; background: transparent; box-shadow: none; }
.course-catalog-page .course-card-art { display: block; grid-column: 1 / -1; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: linear-gradient(145deg, #f2f1e4, color-mix(in srgb, var(--course-tint) 8%, #fffdf8)); }
.course-catalog-page .course-card-art img { width: 100%; height: 100%; object-fit: contain; }
.course-catalog-page .course-link-card h4 { grid-column: 1; grid-row: 2; padding: 0; max-width: none; font-size: 20px; line-height: 1.35; }
.course-catalog-page .course-link-card p { margin: 0; color: #45594d; font-size: 15px; font-style: normal; line-height: 1.6; }
.course-catalog-page .course-link-card > p { grid-column: 1 / -1; }
.course-catalog-page .course-link-action { grid-column: 2; grid-row: 2; align-self: start; justify-self: end; margin: 0; padding: 0; }
.course-catalog-page .course-link-action-icon { width: 28px; height: 28px; margin-left: 0; border: 0; background: transparent; font-size: 20px; }
.course-catalog-page .course-link-card:focus-visible { outline-offset: 5px; }
.course-catalog-page .course-group-more { font-size: 14px; min-height: 44px; }
.course-catalog-page .catalog-final-cta { padding: 44px 0; color: var(--catalog-ink); }
.course-catalog-page .catalog-final-cta::before { background: #e7eddd; }
.course-catalog-page .catalog-final-cta-shell { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px 48px; }
.course-catalog-page .catalog-final-copy h2 { max-width: none; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.16; color: var(--catalog-ink); }
.course-catalog-page .catalog-final-copy .section-text { max-width: 48ch; margin-top: 12px; color: #45594d; font-size: 16px; }
.course-catalog-page .catalog-final-cta .download-action-final { align-items: start; gap: 10px; }
.course-catalog-page .catalog-final-cta .course-store-buttons .course-app-store-badge { height: 52px; }
.course-catalog-page .catalog-final-cta .platform-note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; max-width: none; margin: 0; color: #45594d; font-size: 14px; }
.course-catalog-page .catalog-final-cta .platform-note-action { min-height: 44px; color: var(--catalog-green-deep); }
body.course-catalog-page .catalog-final-cta :focus-visible { outline-color: var(--catalog-green-deep); }
@media (hover: hover) {
  .course-catalog-page .course-link-card:hover { transform: translateY(-3px); background: transparent; }
  .course-catalog-page .course-link-card:hover h4 { text-decoration: underline; text-underline-offset: 4px; }
}
@media (max-width: 980px) {
  .course-catalog-page .course-category-group .course-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-catalog-page .catalog-final-cta-shell { grid-template-columns: minmax(0, 1fr); }
  .course-catalog-page .catalog-final-cta .download-action-final { justify-self: start; }
}
@media (max-width: 720px) {
  .course-catalog-page .catalog-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .course-catalog-page .catalog-interest-select { width: 100%; }
  .course-catalog-page .catalog-interest-select select { min-height: 48px; }
  .course-catalog-page .catalog-area-filter { flex-wrap: nowrap; justify-content: space-between; gap: 12px; }
  .course-catalog-page .catalog-area-filter button { font-size: 14px; gap: 6px; }
  .course-catalog-page .catalog-area-filter .discovery-icon { display: none; }
  .course-catalog-page .course-category-heading h3 { font-size: 24px; }
  .course-catalog-page .course-category-group .course-link-grid { display: grid; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-auto-columns: auto; overflow: visible; margin: 0; }
  .course-catalog-page .course-link-card,
  .course-catalog-page .course-link-card:nth-child(3n + 2),
  .course-catalog-page .course-link-card:nth-child(3n + 3) { min-width: 0; grid-template-columns: 100px minmax(0, 1fr) 24px; grid-template-rows: auto 1fr; gap: 8px 14px; padding: 0; }
  .course-catalog-page .course-card-art { grid-column: 1; grid-row: 1 / 3; width: 100px; aspect-ratio: 1; }
  .course-catalog-page .course-link-card h4 { grid-column: 2; grid-row: 1; font-size: 18px; }
  .course-catalog-page .course-link-card > p { grid-column: 2 / -1; grid-row: 2; font-size: 14px; line-height: 1.55; }
  .course-catalog-page .course-link-action { grid-column: 3; grid-row: 1; }
  .course-catalog-page .catalog-final-cta { padding: 32px 0; }
  .course-catalog-page .catalog-final-cta .course-store-buttons .course-app-store-badge { height: 40px; }
}
@media (max-width: 370px) {
  .course-catalog-page .course-link-card,
  .course-catalog-page .course-link-card:nth-child(3n + 2),
  .course-catalog-page .course-link-card:nth-child(3n + 3) { grid-template-columns: 72px minmax(0, 1fr) 20px; gap: 8px 10px; }
  .course-catalog-page .course-card-art { width: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .course-catalog-page .catalog-area-filter button { transition: none; }
  .course-catalog-page .course-link-card { transition: none; }
  .course-catalog-page .course-link-card:hover { transform: none; }
}

/* A download destination offers the stores once, with the same badge geometry. */
.site-shell :is(.store-buttons, .course-store-buttons, .comparison-store-buttons, .comparison-hero-store-buttons, .intent-store-buttons, .about-store-buttons, .signup-store-badges, .blog-review-app-actions) { align-items: center; column-gap: 12px; }
.site-shell :is(.store-badge-play, .course-ios-store-button, .course-store-badge-link) { zoom: 1; }
.site-shell :is(.store-buttons, .course-store-buttons, .comparison-store-buttons, .comparison-hero-store-buttons, .intent-store-buttons, .about-store-buttons, .signup-store-badges) :is(.app-store-badge, .course-app-store-badge) { height: 48px; width: auto; max-width: none; }
.signup-page .signup-hero-shell { padding-top: 76px; padding-bottom: 76px; }
.signup-page .signup-hero-text { max-width: 40ch; font-size: 19px; line-height: 1.65; }
.signup-page .signup-kicker[hidden] { display: none; }
.signup-page .signup-hero-action { margin-top: 32px; }
.signup-page .signup-access-note { margin-top: 16px; font-size: 14px; }
.signup-page .signup-proof-strip li { display: flex; align-items: center; gap: 14px; }
.signup-page .signup-proof-strip strong { font-size: 16px; }
.signup-page .signup-benefit-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #285f48; background: linear-gradient(135deg, #dce8cf, #f6f2dc); }
.signup-page .signup-product-example { padding: 0; background: none; min-width: 0; }
.signup-page .signup-product-example .product-preview { border-radius: 20px; box-shadow: 0 20px 50px #08251d26; }
.signup-page .signup-final { overflow: clip; }
.signup-page .signup-final .signup-access-note { color: #e5eee5; }
.signup-page .signup-final .signup-note-action { color: inherit; }
.signup-page .signup-header-cta { min-height: 44px; }
@media (max-width: 720px) {
  .site-shell :is(.store-buttons, .course-store-buttons, .comparison-store-buttons, .comparison-hero-store-buttons, .intent-store-buttons, .about-store-buttons, .signup-store-badges) { gap: 8px; }
  .site-shell :is(.store-buttons, .course-store-buttons, .comparison-store-buttons, .comparison-hero-store-buttons, .intent-store-buttons, .about-store-buttons, .signup-store-badges) :is(.app-store-badge, .course-app-store-badge) { height: 40px; }
  .signup-page .signup-hero-shell { padding-top: 40px; padding-bottom: 40px; }
  .signup-page .signup-hero-text { font-size: 17px; }
  .signup-page .signup-product-example { padding: 0; background: none; border-radius: 20px; }
  .signup-page .signup-proof-strip ul { gap: 20px; }
  .signup-page .signup-proof-strip li { gap: 10px; }
  .signup-page .signup-proof-strip strong { font-size: 14px; }
}

@media (max-width: 720px) {
  .course-catalog-page .course-category-group.is-folded .course-link-card:nth-child(n + 7) { display: none; }
}
@media (max-width: 720px) {
  .course-catalog-page .course-group-more:not([hidden]) { display: inline-flex; }
}

/* The chooser stays compact enough to compare both platforms at once. */
.site-shell #waitlist-platform-title { max-width: none; font-size: clamp(28px, 4vw, 36px); line-height: 1.15; }
.site-shell .waitlist-platform-copy strong { font-family: var(--site-heading); font-size: 22px; line-height: 1.25; }
.site-shell .header-actions > .button { min-height: 44px; }

/* Consumer design contracts: shared across discovery, detail and utility pages.
   Page purpose chooses the composition; shared roles choose type and actions. */
:root {
  --site-action-green: #8be3a2;
  --site-action-ink: #143b2d;
  --site-store-height: 56px;
  --site-primary-store-height: 64px;
}
.site-shell .button-primary { background: var(--site-action-green); color: var(--site-action-ink); box-shadow: none; }
.site-shell .button-primary:hover { background: #a2edb5; }
.site-shell .public-section-heading,
.site-shell .public-section-heading-wide { display: block; max-width: 850px; }
.site-shell .public-section-heading h2 { margin: 0; max-width: 26ch; }
.site-shell .public-section-heading > p:not(.eyebrow) { max-width: 65ch; margin: 20px 0 0; font-size: 18px; line-height: 1.65; }
.site-shell .public-definition-copy { margin-left: 0; }
.site-shell .public-main-difference { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 64px; align-items: start; }
.site-shell .public-main-difference .public-section-heading h2 { margin-top: 0; font-size: clamp(30px, 3vw, 42px); }
.site-shell .public-main-difference > p { margin-top: 0; }
.site-shell :is(.comparison-hub-list strong, .course-campaign-figure figcaption strong, .course-promise, .skill-hub-card h3) { font-family: var(--site-heading); font-weight: 700; letter-spacing: -.025em; }
.site-shell :is(.course-campaign-meta, .course-breadcrumb, .course-request-label, .course-campaign-figure figcaption > span, .account-step-label, .account-plan-save) { text-transform: none; letter-spacing: 0; }
.site-shell .course-campaign-figure { align-self: start; }
.site-shell .course-request-label { font-size: 14px; }
.site-shell .course-request-text { font-size: clamp(20px, 2vw, 26px); line-height: 1.4; }
.site-shell .course-promise { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.35; }
.site-shell .course-campaign-meta { gap: 16px; }
.site-shell .course-breadcrumb { font-size: 14px; }
/* Category text must own its track. A fixed 94px track let Communication
   paint into the title even though the grid boxes had a 16px gap. */
.site-shell .course-campaign-figure figcaption {
  grid-template-columns: fit-content(40%) minmax(0, 1fr);
  gap: 16px;
}
.site-shell .course-campaign-figure figcaption > span { overflow-wrap: anywhere; }
.site-shell .public-hero-illustration figcaption { position: static; margin: 16px 0 0; padding: 0; border: 0; background: none; box-shadow: none; color: #e1eadf; font-size: 14px; }
.site-shell .public-hero-illustration figcaption img { display: none; }
.site-shell .public-hero-illustration::after { display: none; }
.site-shell .public-hero-illustration > img { border-radius: 20px; }

/* Large enough to see and use, with official artwork kept at equal height. */
.site-shell.public-page .course-store-buttons .course-app-store-badge,
.site-shell.course-detail-page .course-store-buttons .course-app-store-badge { height: var(--site-store-height); width: auto; }
.site-shell.public-page :is(.public-hero, .practice-hero, .public-final-cta) .course-store-buttons .course-app-store-badge,
.site-shell.course-detail-page :is(.course-campaign-hero, .download-action-final) .course-app-store-badge { height: var(--site-primary-store-height); }
.site-shell.public-page .course-store-buttons { display: flex; flex-flow: row wrap; gap: 12px; }
.site-shell .early-testing-note { margin-top: 16px; line-height: 1.5; font-weight: 400; }
.site-shell .public-hero-actions .early-testing-note { margin-top: 0; }
.site-shell .public-hero-actions { align-items: center; }

/* Original learning-path artwork belongs with the example title it explains. */
.preview-course-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.preview-course-heading .preview-title { margin: 0; }
.preview-course-heading .signup-art { width: 100px; height: 94px; flex: 0 0 100px; }

/* Legal and recovery content keeps its reading and transactional purpose. */
body:not(.site-shell) :is(.eyebrow, .group-label, .toc-title, .policy-highlights dt) { text-transform: none; letter-spacing: 0; }
body:not(.site-shell) .policy-hero { align-items: start; }
@media (max-width: 980px) {
  .site-shell .public-main-difference { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 720px) {
  :root { --site-store-height: clamp(42px, 12.8vw, 50px); --site-primary-store-height: var(--site-store-height); }
  .site-shell.public-page .section-shell { width: calc(100% - 40px); }
  .site-shell .public-section-heading > p:not(.eyebrow) { font-size: 16px; margin-top: 16px; }
  .site-shell .public-section-heading h2 { font-size: 30px; }
  .site-shell.public-page .course-store-buttons { gap: 10px; }
  .preview-course-heading { gap: 12px; }
  .preview-course-heading .signup-art { width: 80px; height: 75px; flex-basis: 80px; }
}

/* Reading and discovery keep the task ahead of acquisition. */
.public-reading-hero { padding-block: 64px; }
.public-reading-hero h1 { max-width: 24ch; }
.public-reading-hero .public-hero-lead { max-width: 800px; }
.blog-search-toolbar { display: flex; align-items: center; gap: 16px; }
.blog-index-page .blog-search-toolbar .course-search { flex: 1; max-width: none; }
.blog-index-page .blog-reset-filter { padding: 0; flex-shrink: 0; }
@media (max-width: 600px) {
  .public-reading-hero { padding-block: 32px; }
  .blog-search-toolbar { display: block; }
}

.editorial-standards-page .public-split-section { display: block; max-width: 1000px; }
.editorial-standards-page .public-section h2 { font-size: clamp(30px, 3.2vw, 44px); max-width: 26ch; }
.editorial-standards-page .public-split-section > div + div { margin-top: 24px; }

/* Size the paired artwork to its actual column, including inset article cards. */
.site-shell .blog-review-app-actions { container-type: inline-size; }
.site-shell .blog-review-app-actions .store-badge-link { width: auto; min-width: 0; }
.site-shell .blog-review-app-actions .app-store-badge { height: min(var(--site-store-height), calc((100cqw - 12px) / 6.4)); width: auto; }
.site-shell .blog-review-final > .section-shell { grid-template-columns: minmax(0, 1fr) minmax(420px, 440px); gap: 48px; }
.site-shell .blog-review-final > .section-shell > img { display: none; }
.site-shell .blog-review-final .blog-review-app-actions { width: auto; flex-direction: row; }
.site-shell .blog-review-final .app-store-badge { height: min(var(--site-primary-store-height), calc((100cqw - 12px) / 6.4)); }
@media (max-width: 980px) {
  .site-shell .blog-review-final > .section-shell { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 720px) {
  .site-shell .blog-review-app-actions { gap: 10px; }
}
.site-shell :is(.public-split-section, .public-related-band) h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.15; max-width: 26ch; }

/* One header bar from the phone menu up. The centred nav sizes to its links;
   left at 50% it could only use half the bar and wrapped under the header.
   An older 900px rule also stacked the shell into two rows on pages without
   their own header override, so tablets keep the single row and tighter links. */
.site-shell .site-nav { width: max-content; flex-wrap: nowrap; }
/* The bar's height comes from its min-height alone (56px on phones, 60px
   above). Course and catalog headers added 10px padding, and the older 900px
   rule 12px, so the bar changed height between pages. */
.site-shell .site-header .site-header-shell { padding-block: 0; }
@media (min-width: 721px) and (max-width: 900px) {
  .site-shell .site-header-shell { flex-direction: row; align-items: center; gap: 20px; }
  .site-shell .header-actions { width: auto; flex-wrap: nowrap; }
  .site-shell .site-nav { padding: 0; }
  .site-shell .site-nav a { padding-inline: 10px; }
}
@media (min-width: 721px) and (max-width: 800px) {
  .site-shell .site-nav a { padding-inline: 6px; }
}

/* Finish: one motion vocabulary, lit dark surfaces and layered depth.
   Light falls from the top left on every dark band; nothing loops, and reduced
   motion keeps the surfaces while dropping the movement. */
:root {
  --site-ease-out: cubic-bezier(.22, 1, .36, 1);
  --site-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .075 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --site-light: radial-gradient(75% 95% at 6% 0%, rgba(139, 227, 162, .17), transparent 62%), radial-gradient(60% 80% at 100% 100%, rgba(232, 207, 138, .06), transparent 66%);
  --site-shadow-raised: 0 1px 2px rgba(16, 39, 31, .05), 0 14px 32px -14px rgba(16, 39, 31, .2), 0 32px 64px -36px rgba(16, 39, 31, .18);
  --site-shadow-float: 0 2px 4px rgba(0, 20, 14, .08), 0 26px 50px -18px rgba(0, 20, 14, .42), 0 64px 96px -48px rgba(0, 20, 14, .45);
}
.site-shell { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.site-shell :is(h1, h2, h3) { text-wrap: balance; }
.site-shell main p { text-wrap: pretty; }
.site-shell ::selection { background: rgba(75, 232, 149, .32); }

.site-shell :is(.hero--illustrated, .public-hero, .signup-hero, .course-campaign-hero, .public-dark-section, .public-final-cta),
.site-shell .final-cta::before {
  background-image: var(--site-grain), var(--site-light);
  background-size: 160px 160px, auto, auto;
}
.site-shell :is(.public-dark-section, .public-final-cta) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.site-shell :is(.hero--illustrated, .public-hero, .signup-hero, .course-campaign-hero, .public-dark-section, .public-final-cta, .final-cta, .site-footer) :focus-visible { outline-color: #b9f5cb; }
.site-shell .site-footer { background-image: var(--site-grain); background-size: 160px 160px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }

/* Cards that sit on a dark band float; cards on paper rest and lift on hover. */
.home-page .hero-goal-example,
.site-shell :is(.public-hero-example, .signup-product-example) .product-preview { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), var(--site-shadow-float); }
.course-catalog-page .course-link-card { transition: transform 420ms var(--site-ease-out), box-shadow 420ms var(--site-ease-out), border-color 240ms ease; }
@media (hover: hover) and (pointer: fine) {
  .course-catalog-page .course-link-card:hover { box-shadow: none; }
  .home-page .course-card-art,
  .home-page .course-card-art img { transition-duration: 600ms; transition-timing-function: var(--site-ease-out); }
}

/* One action green on every page. Header and catalog actions used each page
   family's neon accent, so Get Cadence changed colour as visitors moved
   between pages. */
.site-shell :is(.site-header, .catalog-hero) :is(.button-primary, .signup-header-cta) { background: var(--site-action-green); color: var(--site-action-ink); }
.site-shell .signup-header-cta,
.site-shell :is(.site-header, .catalog-hero) .button-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(20, 59, 45, .14), 0 1px 2px rgba(20, 59, 45, .16); }
@media (hover: hover) and (pointer: fine) {
  .site-shell :is(.site-header, .catalog-hero) :is(.button-primary, .signup-header-cta):hover { background: #a2edb5; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(20, 59, 45, .14), 0 10px 24px -10px rgba(52, 190, 110, .75); }
}

/* Actions have weight: a lit top edge at rest, a lift and soft glow on hover, a press. */
.site-shell .button { transition: transform 200ms var(--site-ease-out), box-shadow 320ms var(--site-ease-out), background-color 240ms ease, color 240ms ease; }
.site-shell .button-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(20, 59, 45, .14), 0 1px 2px rgba(20, 59, 45, .16); }
.site-shell :is(.store-badge-link, .course-store-badge-link) { transition: transform 260ms var(--site-ease-out), filter 320ms var(--site-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .site-shell .button:hover { transform: translateY(-1px); }
  .site-shell .button-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(20, 59, 45, .14), 0 10px 24px -10px rgba(52, 190, 110, .75); }
  .site-shell :is(.store-badge-link, .course-store-badge-link):hover { transform: translateY(-2px); filter: drop-shadow(0 10px 14px rgba(0, 20, 14, .28)); }
}
.site-shell :is(.button, .store-badge-link, .course-store-badge-link):active { transform: translateY(0) scale(.98); transition-duration: 90ms; }

/* Sections below the opening view rise into place once as they arrive.
   site-menu.js only marks content that starts off screen, so content stays
   visible without JavaScript, in print and for anything already in view. */
.sr-pending { opacity: 0; }
.sr-in { animation: site-rise 680ms var(--site-ease-out) calc(var(--sr-i, 0) * 60ms) both; }
@keyframes site-rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@media print { .sr-pending { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sr-pending { opacity: 1; }
  .sr-in { animation: none; }
  .site-shell :is(.button, .store-badge-link, .course-store-badge-link, .course-link-card) { transition: none; }
  .site-shell :is(.button, .store-badge-link, .course-store-badge-link):is(:hover, :active) { transform: none; }
}