/* Approved below-hero homepage composition. The approved hero, navigation and their
   inherited tokens must remain identical to the released homepage. */
body.home-art-direction {
  --home-ground: #0b091c;
  --home-ink: #f4f2ff;
  --home-muted: #c1bbd4;
  --home-rule: #38314b;
  --home-accent: #c9c2ff;
}
.home-chapters :focus-visible { outline: 3px solid #c9c2ff; outline-offset: 5px; }
.home-chapters { display: flex; align-items: center; gap: 32px; background: transparent; padding: 26px var(--ds-gutter); }
.home-chapters>span { font-size: 15px; color: #d6d8e0; margin-right: auto; }
.home-chapters a { display: flex; align-items: center; gap: 22px; font-size: 15px; min-height: 44px; color: #f6f5f1; text-decoration: none; }
.home-chapters a span { color: #b6b6c9; }
.home-chapters a:hover { color: #ddd5ff; }
/* The plate's paper sheets can drift behind the bar on phones; a soft halo, not a band. */
.home-chapters>span, .home-chapters a { text-shadow: 0 1px 12px rgba(17, 17, 19, .8), 0 0 5px rgba(17, 17, 19, .75); }

/* One ground, and a sky that carries the hero down into it. .hs-descent is a zero-height anchor
   on the hero's bottom edge; its plate starts 240px above that edge, where the hero video's mask
   begins to fade. The hero sits above the plate with a transparent ground, so the video's own
   fade is the cross-fade; the plate sits behind every later section. */
body.hero-motion-page.home-art-direction { background: #111113; }
body.home-art-direction #mainContent.hs-hero--motion { z-index: 1; background: transparent; }
.hs-descent { position: relative; height: 0; z-index: -1; pointer-events: none; }
.hs-descent::before {
  content: ''; position: absolute; top: -240px; left: 0; right: 0; aspect-ratio: 2560 / 1099;
  background: #111113 image-set(url(/static/paper-sky/sky-descent-1600.webp) 1x, url(/static/paper-sky/sky-descent-2560.webp) 2x) top center / 100% auto no-repeat;
}
@media (min-width: 1601px) {
  .hs-descent::before { background-image: image-set(url(/static/paper-sky/sky-descent-2560.webp) 1x); }
}
@media (max-aspect-ratio: 4/5) {
  .hs-descent::before { aspect-ratio: 1080 / 1920; background-image: url(/static/paper-sky/sky-descent-portrait.webp); }
  /* Baked paper sheets in the portrait plate can land behind the bar's text; a local scrim, not a band. */
  .home-chapters { position: relative; isolation: isolate; }
  .home-chapters::before { content: ''; position: absolute; inset: -56px 0; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent); mask-image: linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent); background: radial-gradient(90% 70% at 25% 50%, rgba(17, 17, 19, .85) 45%, rgba(17, 17, 19, 0) 85%); }
  .hs-example { position: relative; isolation: isolate; }
  .hs-example::before { content: ''; position: absolute; inset: 0 0 auto; height: 380px; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 55%, transparent); mask-image: linear-gradient(180deg, transparent, #000 10%, #000 55%, transparent); background: radial-gradient(110% 95% at 25% 40%, rgba(17, 17, 19, .85) 45%, rgba(17, 17, 19, 0) 88%); }
}
body.home-art-direction :is(.hs-subjects,.hs-try,.hs-plans-sec,.hs-faq,.hs-feedback) {
  --ds-bg: #0b091c; --ds-bg-2: #19142c; --ds-bg-3: #29223d;
  --ds-ink: #f4f2ff; --ds-ink-2: #c9c3d9; --ds-ink-3: #b4adc7;
  --ds-accent-ink: #c9c2ff; --ds-accent: #b19bea; --ds-accent-soft: #2b2240; --ds-line: #38314b; --ds-line-2: #514563;
  --ds-surface: #151127; --ds-surface-2: #19142c;
  color: var(--ds-ink); background: var(--home-ground); padding-block: 100px;
}
body.home-art-direction :is(.hs-subjects,.hs-try,.hs-plans-sec,.hs-faq,.hs-feedback)::before { display: none; }
body.home-art-direction :is(.hs-subjects,.hs-try,.hs-plans-sec,.hs-faq,.hs-feedback) :is(.ds-h2,.ds-display) { color: var(--home-ink); font-size: clamp(34px,4.5vw,62px); line-height: 1.1; letter-spacing: -.025em; }
body.home-art-direction :is(.hs-subjects,.hs-try,.hs-plans-sec,.hs-faq,.hs-feedback) .ds-em { color: var(--home-accent); }
body.home-art-direction :is(.hs-subjects,.hs-plans-sec) .ds-heading-split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; text-align: left; align-items: end; }
body.home-art-direction .hs-subjects .ds-heading-block { justify-items: start; }
body.home-art-direction .hs-subjects .ds-heading-split>p { font-size: 17px; max-width: 36em; }
body.home-art-direction :is(.hs-syllabus,.hs-plan,.feedback-form) { background: transparent; border-radius: 0; box-shadow: none; border-color: var(--home-rule); }
body.home-art-direction :is(.hs-plan,.hs-plan--pro):hover { background: transparent; box-shadow: none; }
body.home-art-direction :is(.hs-plan--pro) { background: #19142c; }
.home-art-direction .hs-syllabus-tabs button { color: var(--home-muted); min-height: 64px; }
.home-art-direction .hs-syllabus-tabs button[aria-selected=true] { color: var(--home-accent); }
.home-art-direction .hs-syllabus-panel { background: #19142c; }
.home-art-direction .hs-syllabus-units li>span { background: #29223f; color: var(--home-accent); }
.home-art-direction :is(.hs-filter,.hs-catalog-search,.hs-catalog-list a) { background: transparent; border-radius: 3px; color: var(--home-ink); }
.home-art-direction .hs-filter[aria-pressed=true] { background: #302443; color: #e1d8ff; }
.home-art-direction .hs-catalog-search input { color: var(--home-ink); }
.home-art-direction .hs-catalog-list li a { border-color: var(--home-rule); }
.home-art-direction .hs-catalog-list li a:hover { background: #211a35; }
body.home-art-direction :is(.hs-subjects,.hs-try,.hs-plans-sec,.hs-faq,.hs-feedback) .ds-eyebrow { font-size: 13px; letter-spacing: .04em; color: inherit; }
.home-art-direction .hs-try-glow,.home-art-direction .hs-try-dots { display: none; }
.home-art-direction .hs-try .hs-try-grid { grid-template-columns: .8fr 1.2fr; gap: 80px; }
.home-art-direction .hs-try-copy .ds-lead { font-size: 17px; }
.home-art-direction .hs-try .hs-quiz { border-radius: 4px; border: 1px solid #514563; box-shadow: 0 20px 60px -36px #00000040; background: #151127; color: #f4f2ff; }
.home-art-direction .hs-try .hs-quiz-card { background: #151127; padding: 30px; }
.home-art-direction .hs-try .hs-quiz-stem { color: #f4f2ff; }
.home-art-direction .hs-try .hs-quiz-opt { border-color: #514563; border-radius: 4px; background: #1b162e; color: #eeeaf9; }
.home-art-direction .hs-try .hs-quiz-opt:hover:not(:disabled) { background: #29203e; border-color: #ac97df; }
.home-art-direction .hs-try .hs-quiz-key { color: #dbd0f9; background: #302640; }
.home-art-direction .hs-try .hs-quiz-opt.is-correct { background: #172f26; color: #c4eed2; border-color: #80cba0; }
.home-art-direction .hs-try .hs-quiz-opt.is-wrong { background: #39222b; color: #ffd4cb; border-color: #d6948c; }
.home-art-direction .hs-try .hs-quiz-why { background: #192b25; color: #c4e3d1; }
.home-art-direction .hs-try .hs-quiz-next { background: #6550d9; color: white; }
.home-art-direction .hs-try .hs-quiz-subject { color: #d9ccff; background: #302640; }
.home-art-direction :is(.hs-subjects,.hs-try,.hs-plans-sec,.hs-faq,.hs-feedback) :focus-visible { outline-color: #c9c2ff; }
body.home-art-direction .hs-plans-sec :is(.ds-btn--primary,.ds-btn--light,.ds-btn--dark) { background: #6550d9; color: white; border-radius: 5px; box-shadow: none; }
.home-art-direction .hs-plan .hs-plan-flag { background: #302640; color: #ddd2ff; }
.home-art-direction .hs-feedback :is(textarea,input) { background: #151127; color: #f4f2ff; border: 1px solid #665a77; border-radius: 4px; }
.home-art-direction .hs-feedback :is(textarea,input)::placeholder { color: #bcb4ce; }
.home-art-direction .syllabus-atlas { padding-block: 88px; }
.home-art-direction .atlas-heading { padding-bottom: 28px; }
.home-art-direction .hs-teach { padding-block: 90px; }
.home-art-direction .hs-teach-card { border-radius: 0; background: #111020; border: 0; }
.home-art-direction .hs-cta-card { border-radius: 0; }
@media (max-width:1000px) {
  .home-chapters { gap: 24px; flex-wrap: wrap; }
  .home-chapters>span { flex-basis: 100%; }
  .home-art-direction .hs-try .hs-try-grid { gap: 32px; grid-template-columns: 1fr; }
}
@media (max-width:620px) {
  .home-chapters { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 22px; padding-block: 20px; }
  .home-chapters>span { grid-column: 1/-1; margin-bottom: 10px; font-size: 14px; }
  .home-chapters a { justify-content: space-between; font-size: 14px; }
  .home-art-direction .hs-try .hs-quiz-card { padding: 22px 18px; }
  body.home-art-direction :is(.hs-subjects,.hs-try,.hs-plans-sec,.hs-faq,.hs-feedback) { padding-block: 64px; }
  body.home-art-direction .hs-subjects .ds-heading-split { display: block; }
  body.home-art-direction .hs-subjects .ds-heading-split>p { margin-top: 22px; font-size: 16px; }
  .home-art-direction .syllabus-atlas { padding-block: 56px; }
}

body.home-art-direction :is(.hs-subjects,.hs-try,.hs-plans-sec,.hs-faq,.hs-feedback) :is(.ds-em,.ds-em *) { background: none; -webkit-text-fill-color: currentColor; color: var(--home-accent); }

/* A distinct final composition reuses the approved Paper Arch. It is a still,
   loaded near the section; hero and pricing media remain unchanged. */
body.home-art-direction #cta { padding: 0; background: #09091c; }
.home-art-direction #cta>.ds-container { width: 100%; max-width: none; padding: 0; }
body.home-art-direction #cta .hs-cta-card {
  min-height: 720px; padding: 110px max(6vw,calc((100vw - 1280px)/2));
  place-items: center start; text-align: left; border: 0; border-radius: 0;
  background: #09091c; clip-path: none!important;
}
.home-art-direction #cta .home-closing-art { position: absolute; inset: 0; pointer-events: none; }
.home-art-direction #cta .home-closing-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
body.home-art-direction #cta .hs-cta-card::after { z-index: 0; background: linear-gradient(90deg,#09091c50,transparent 68%); }
.home-art-direction #cta .hs-cta-inner { z-index: 1; width: min(650px,60%); max-width: none; justify-items: start; gap: 26px; }
.home-art-direction #cta .ds-display { font-size: clamp(42px,5vw,76px); line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
.home-art-direction #cta .ds-lead { max-width: 32em; margin: 0; text-align: left; font-size: 18px; line-height: 1.7; color: #e0ddeb; }
.home-art-direction #cta .hs-cta-actions { justify-content: start; gap: 20px; }
.home-art-direction #cta .ds-btn { border-radius: 6px; background: #f1eeff; box-shadow: none; }
.home-art-direction #cta .hs-cta-note { color: #d4cfde; font-size: 14px; }
.home-art-direction #cta :focus-visible { outline: 3px solid #e4daff; outline-offset: 5px; }
@media(max-width:900px) {
  .home-art-direction #cta .hs-cta-inner { width: min(580px,76%); }
  body.home-art-direction #cta .hs-cta-card { min-height: 650px; padding: 72px 32px; }
}
@media(max-width:620px) {
  body.home-art-direction #cta .hs-cta-card { min-height: 760px; padding: 60px 22px 250px; align-items: start; }
  .home-art-direction #cta .hs-cta-inner { width: 100%; gap: 22px; }
  .home-art-direction #cta .ds-display { font-size: 44px; line-height: 1.12; }
  .home-art-direction #cta .ds-lead { font-size: 16px; }
  .home-art-direction #cta .home-closing-art { top: auto; height: 430px; }
  .home-art-direction #cta .home-closing-art img { object-position: right bottom; }
  body.home-art-direction #cta .hs-cta-card::after { background: linear-gradient(180deg,#09091c 0%,#09091c 35%,#09091c80 58%,transparent 75%); }
  .home-art-direction #cta .hs-cta-actions { flex-direction: column; align-items: start; gap: 14px; }
  .home-art-direction #cta .ds-link { min-height: 44px; }
}

/* Browse first, then inspect a real course. All data and destinations retain
   their original template/controller contracts. */
.home-art-direction #subjects-strip .ds-heading-split { gap: 48px; grid-template-columns: 1.15fr 1fr; justify-items: stretch; max-width: none; margin: 0; }
.home-art-direction .home-course-browser { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 56px; align-items: start; margin-top: 56px; }
.home-art-direction .home-course-browser .hs-catalog { min-width: 0; margin: 0; }
.home-art-direction .home-course-browser .hs-catalog-bar { display: grid; gap: 16px; margin-bottom: 24px; }
.home-art-direction .home-search-label { grid-row: 1; font-size: 18px; font-weight: 650; }
.home-art-direction #subjects-strip .hs-catalog-search { grid-row: 2; width: 100%; }
.home-art-direction #subjects-strip .hs-catalog-search input { width: 100%; min-height: 58px; padding: 15px 18px 15px 46px; border: 1px solid #625572; border-radius: 5px; background: #151127; font-size: 17px; }
.home-art-direction #subjects-strip .hs-catalog-search input::placeholder { color: #bfb5d2; }
.home-art-direction #subjects-strip .hs-catalog-search input:focus-visible { outline: 3px solid var(--home-accent); outline-offset: 3px; box-shadow: none; }
.home-art-direction #subjects-strip .hs-catalog-filters { gap: 6px; }
.home-art-direction #subjects-strip .hs-filter { min-height: 44px; padding: 9px 12px; border: 1px solid transparent; border-radius: 4px; font-size: 14px; color: #c9c0dc; }
.home-art-direction #subjects-strip .hs-filter:hover { border-color: #a693c7; }
.home-art-direction #subjects-strip .hs-filter[aria-pressed=true] { border-color: #a995e7; background: #6550d9; color: #fff; }
.home-art-direction #subjects-strip .hs-catalog-list { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 24px; }
/* A bounded, genuinely scrollable directory keeps focused links reachable. */
.home-art-direction #subjects-strip .hs-catalog-list.is-collapsed { max-height: 440px; overflow: auto; mask: none; -webkit-mask: none; scrollbar-width: thin; scrollbar-color: #857299 #221b34; padding-right: 12px; }
.home-art-direction #subjects-strip .hs-catalog-list a { position: relative; padding: 15px 22px 15px 4px; min-height: 82px; font-size: 16px; gap: 5px; }
.home-art-direction #subjects-strip .hs-catalog-list a::after { content: '↗'; position: absolute; right: 3px; top: 17px; font-size: 18px; color: #c9b6ed; }
.home-art-direction #subjects-strip .hs-catalog-list a small { font-size: 12px; line-height: 1.55; color: #c1b8d1; }
.home-art-direction #subjects-strip .hs-catalog-list a:focus-visible { outline: 2px solid var(--home-accent); outline-offset: -2px; }
.home-art-direction #subjects-strip .hs-catalog-more { flex-wrap: wrap; }
.home-art-direction #subjects-strip .hs-catalog-more .ds-small { font-size: 14px; }
.home-art-direction #hsCatalogToggle { background: transparent; border: 1px solid #8a759f; color: #e0d4f6; border-radius: 4px; box-shadow: none; min-height: 44px; }
.home-art-direction .home-course-browser .hs-syllabus { display: grid; grid-template-columns: minmax(0,1fr); margin: 0; border: 0; background: #201a35; border-radius: 8px; overflow: visible; transform: none!important; }
.home-art-direction .home-course-note { padding: 30px 30px 20px; }
.home-art-direction .home-course-note h3 { font-family: var(--ds-font-display); font-size: 26px; line-height: 1.2; }
.home-art-direction .home-course-note p { margin-top: 10px; font-size: 15px; line-height: 1.6; color: #c1b8d1; }
.home-art-direction .home-course-browser .hs-syllabus-tabs { display: flex; flex-wrap: wrap; gap: 8px; overflow: visible; background: transparent; border: 0; padding: 0 30px 24px; }
.home-art-direction .home-course-browser .hs-syllabus-tabs button { display: flex; flex: 1 1 100px; gap: 6px; flex-direction: column; align-items: start; justify-content: start; padding: 12px; border: 1px solid #625572; border-radius: 4px; font-size: 13px; min-height: 80px; box-shadow: none; }
.home-art-direction .home-course-browser .hs-syllabus-tabs button span { font-size: 14px; font-weight: 750; }
.home-art-direction .home-course-browser .hs-syllabus-tabs button[aria-selected=true] { background: #2e2343; border-color: var(--home-accent); color: #eee4ff; box-shadow: inset 0 0 0 1px var(--home-accent); }
.home-art-direction .home-course-browser .hs-syllabus-panel { margin: 0 8px 8px; padding: 28px 22px; background: #151127; border-radius: 4px; gap: 22px; }
.home-art-direction .home-course-browser .hs-syllabus-meta .ds-badge { color: var(--home-accent); background: transparent; padding: 0; font-size: 14px; }
.home-art-direction .home-course-browser .hs-syllabus-meta strong { font-size: 26px; line-height: 1.2; letter-spacing: -.015em; }
.home-art-direction .home-course-browser .hs-syllabus-units li { grid-template-columns: 20px minmax(0,1fr); gap: 10px; padding: 18px 0; font-size: 16px; line-height: 1.55; }
.home-art-direction .home-course-browser .hs-syllabus-units li>span { background: none; color: #c1b8d1; font-size: 14px; }
.home-art-direction .home-course-browser .ds-link { min-height: 44px; font-size: 15px; line-height: 1.5; }

/* The useful product interaction is the focal point: question and choices
   share one broad reading surface, then stack in source order on mobile. */
body.home-art-direction #try { background: #100d22; }
.home-art-direction #try .hs-try-grid { display: block; }
.home-art-direction #try .hs-try-copy { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px 64px; align-items: end; margin-bottom: 32px; }
.home-art-direction #try .hs-try-copy>.ds-eyebrow { grid-column: 1/-1; }
.home-art-direction #try .hs-try-copy .ds-lead { font-size: 17px; max-width: 35em; }
.home-art-direction #try .hs-try-side { grid-column: 1/-1; display: block; margin-top: 22px; }
.home-art-direction #try .hs-try-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid #493c58; }
.home-art-direction #try .hs-try-steps li { display: flex; gap: 12px; padding: 18px 8px; border-bottom: 1px solid #493c58; font-size: 15px; color: #bcb0ce; }
.home-art-direction #try .hs-try-steps li.is-now { color: #ece4ff; background: #2c2240; font-weight: 700; }
.home-art-direction #try .hs-try-steps li::before { position: static; align-self: center; width: 6px; height: 6px; flex: none; margin: 0; }
.home-art-direction #try .hs-try-steps li.is-now::before { background: #c9c2ff; }
.home-art-direction #try .hs-quiz { border: 1px solid #514563; border-radius: 8px; box-shadow: 0 16px 40px -32px #00000060; --q-earned: #78d1a4; --q-earned-bg: #172f26; --q-missed: #eba49a; --q-missed-bg: #39222b; --q-partial: #e3c184; }
.home-art-direction #try .hs-quiz-progress { min-height: 60px; height: auto; padding: 16px 32px; gap: 22px; }
.home-art-direction #try .hs-quiz-label { font-size: 15px; }
.home-art-direction #try .hs-quiz-label .hs-avi-badge { display: none; }
.home-art-direction #try .hs-quiz-bar { max-width: 180px; margin-left: auto; }
.home-art-direction #try :is(.hs-quiz-bar i,.hs-dbr-track i) { background: #c9c2ff; }
.home-art-direction #try .hs-quiz-count { font-size: 14px; }
.home-art-direction #try .hs-quiz-card { padding: 36px; }
.home-art-direction #try .hs-quiz-q { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 56px; align-items: start; }
.home-art-direction #try .hs-quiz-meta { grid-column: 1; gap: 10px; align-self: start; }
.home-art-direction #try .hs-quiz-num { font-size: 14px; }
.home-art-direction #try .hs-quiz-diff { display: none; }
.home-art-direction #try .hs-quiz-subject { font-size: 14px; margin-left: 0; padding: 5px 9px; border-radius: 3px; }
.home-art-direction #try .hs-quiz-stem { grid-column: 1; font-size: clamp(24px,2.3vw,32px); line-height: 1.38; margin: 22px 0 0; font-weight: 600; }
.home-art-direction #try .hs-quiz-opts { grid-column: 2; grid-row: 1/3; gap: 12px; }
.home-art-direction #try .hs-quiz-opt { min-height: 62px; padding: 14px 16px; font-size: 17px; gap: 14px; }
.home-art-direction #try .hs-quiz-key { width: 32px; height: 32px; border-radius: 4px; font-size: 14px; }
.home-art-direction #try .hs-quiz-opt.is-dim { opacity: 1; color: #bcb4cd; }
.home-art-direction #try .hs-quiz.is-answered .hs-quiz-opt.is-correct:hover { background: var(--q-earned-bg); border-color: var(--q-earned); }
.home-art-direction #try .hs-quiz.is-answered .hs-quiz-opt.is-wrong:hover { background: var(--q-missed-bg); border-color: var(--q-missed); }
.home-art-direction #try .hs-quiz-opt.is-correct .hs-quiz-key { background: #78d1a4; color: #12261d; }
.home-art-direction #try .hs-quiz-opt.is-wrong .hs-quiz-key { background: #eba49a; color: #301711; }
.home-art-direction #try .hs-quiz-why { grid-column: 1/-1; margin-top: 32px; border: 0; border-radius: 4px; padding: 24px 28px; background: #192b25; }
.home-art-direction #try .hs-quiz-why p { max-width: 86ch; font-size: 17px; line-height: 1.75; color: #c4e3d1; }
.home-art-direction #try .hs-quiz-verdict { display: block; margin-bottom: 5px; color: #c4eed2; }
.home-art-direction #try .hs-quiz-why.is-wrong { background: #302719; }
.home-art-direction #try .hs-quiz-why.is-wrong :is(p,.hs-quiz-verdict) { color: #f2d9a7; }
.home-art-direction #try .hs-quiz-noscript { grid-column: 1/-1; font-size: 17px; line-height: 1.7; }
.home-art-direction #try .hs-quiz-foot { margin-top: 26px; }
.home-art-direction #try .hs-quiz-hint { font-size: 15px; }
.home-art-direction #try .hs-quiz-next { min-height: 48px; font-size: 16px; border-radius: 4px; }
.home-art-direction #try .hs-quiz-next:hover { background: #705bd9; }
.home-art-direction #try .hs-quiz-done { max-width: 800px; margin: auto; padding: 12px 0; }
.home-art-direction #try .hs-quiz-done .ds-btn { background: #6550d9; color: white; box-shadow: none; border-radius: 4px; }
.home-art-direction #try .hs-quiz-done .ds-link { min-height: 44px; }
.home-art-direction #try .hs-dbr-next { font-size: 17px; }

/* Native disclosures stay native; more space goes to the actual answers. */
.home-art-direction #faq .hs-faq-grid { display: block; max-width: 1160px; }
.home-art-direction #faq .hs-faq-head { position: static; display: grid; grid-template-columns: 1fr auto; max-width: none; gap: 18px 48px; margin-bottom: 44px; align-items: end; }
.home-art-direction #faq .hs-faq-head>.ds-eyebrow { grid-column: 1/-1; }
.home-art-direction #faq .hs-faq-head .ds-body { max-width: 290px; font-size: 16px; line-height: 1.75; }
.home-art-direction #faq .hs-faq-head .ds-link { display: inline; overflow-wrap: anywhere; }
.home-art-direction #faq .ds-faq { border-top: 1px solid #584767; }
.home-art-direction #faq .ds-faq details { border-bottom: 1px solid #443751; }
.home-art-direction #faq .ds-faq summary { padding: 28px 0; min-height: 80px; font-size: clamp(19px,2vw,25px); line-height: 1.4; }
.home-art-direction #faq .ds-faq details>p { padding: 0 64px 30px 0; margin: 0; max-width: 76ch; font-size: 17px; line-height: 1.8; }
.home-art-direction #faq .ds-faq .ds-faq-icon { width: 40px; height: 40px; border-color: #867196; }
.home-art-direction #faq .ds-faq details[open] .ds-faq-icon { background: var(--home-accent); border-color: var(--home-accent); color: #161126; }
.home-art-direction #faq .ds-faq details[open] summary { color: var(--home-accent); }

@media(max-width:1100px) {
  .home-art-direction .home-course-browser { gap: 28px; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
  .home-art-direction .home-course-note { padding: 24px 22px 18px; }
  .home-art-direction .home-course-browser .hs-syllabus-tabs { padding-inline: 22px; }
  .home-art-direction #try .hs-quiz-q { column-gap: 32px; }
}
@media(max-width:860px) {
  .home-art-direction #subjects-strip .ds-heading-split { grid-template-columns: 1fr; gap: 24px; }
  .home-art-direction .home-course-browser { grid-template-columns: minmax(0,1fr); gap: 40px; }
  .home-art-direction .home-course-browser .hs-syllabus-tabs button { min-height: 72px; }
  .home-art-direction #try .hs-try-copy { grid-template-columns: 1fr; gap: 22px; }
  .home-art-direction #try .hs-quiz-q { grid-template-columns: minmax(0,1fr); gap: 0; }
  .home-art-direction #try .hs-quiz-opts { grid-column: 1; grid-row: auto; margin-top: 24px; }
  .home-art-direction #try .hs-quiz-stem { font-size: 26px; }
  .home-art-direction #faq .hs-faq-head { grid-template-columns: 1fr; gap: 20px; }
}
@media(max-width:620px) {
  .home-art-direction .home-course-browser { margin-top: 36px; }
  .home-art-direction #subjects-strip .hs-catalog-list { grid-template-columns: minmax(0,1fr); }
  .home-art-direction #subjects-strip .hs-catalog-list a { min-height: 76px; font-size: 17px; }
  .home-art-direction #subjects-strip .hs-catalog-list a small { font-size: 13px; }
  .home-art-direction #subjects-strip .hs-filter { padding: 9px 10px; }
  .home-art-direction #subjects-strip .hs-catalog-more { align-items: start; }
  .home-art-direction .home-course-browser .hs-syllabus-tabs button { flex-basis: 85px; }
  .home-art-direction #try .hs-try-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-art-direction #try .hs-try-steps li { font-size: 14px; gap: 8px; padding: 14px 8px; }
  .home-art-direction #try .hs-quiz-progress { gap: 12px; padding: 16px 18px; }
  .home-art-direction #try .hs-quiz-label { font-size: 14px; }
  .home-art-direction #try .hs-quiz-card { padding: 24px 18px; }
  .home-art-direction #try .hs-quiz-stem { font-size: 24px; }
  .home-art-direction #try .hs-quiz-opt { font-size: 16px; padding: 14px 12px; }
  .home-art-direction #try .hs-quiz-why { padding: 20px 18px; }
  .home-art-direction #try .hs-quiz-why p { font-size: 16px; }
  .home-art-direction #try .hs-quiz-foot { flex-wrap: wrap; }
  .home-art-direction #try .hs-quiz-done .ds-actions { align-items: start; }
  .home-art-direction #faq .hs-faq-head { margin-bottom: 30px; }
  .home-art-direction #faq .ds-faq summary { padding: 22px 0; gap: 18px; font-size: 20px; }
  .home-art-direction #faq .ds-faq details>p { padding: 0 0 26px; font-size: 16px; }
}

/* Keep programmatic quiz focus visible in WebKit after next/retry. */
.home-art-direction #try :is(.hs-quiz-opt,.hs-quiz-next,#hsQuizRestart):focus { outline: 2px solid #c9c2ff; outline-offset: 4px; }

/* Original Higgsfield subject landscape, composed around live catalogue HTML.
   The picture stays at full opacity; only its edge fades into the section. */
body.home-art-direction #subjects-strip { position: relative; isolation: isolate; }
.home-art-direction #subjects-strip>.ds-container { position: relative; z-index: 1; }
.home-art-direction #subjects-strip .home-subject-art { position: absolute; inset: 0 0 auto; height: clamp(650px,62vw,920px); pointer-events: none; z-index: 0; overflow: hidden; mask-image: linear-gradient(180deg,transparent,#000 60px,#000 76%,transparent); -webkit-mask-image: linear-gradient(180deg,transparent,#000 60px,#000 76%,transparent); }
.home-art-direction #subjects-strip .home-subject-art :is(img,video) { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.home-art-direction #subjects-strip .ds-heading-split { display: block; max-width: 52%; }
.home-art-direction #subjects-strip .ds-heading-split>.ds-lead { margin: 26px 0 0; max-width: 33em; text-shadow: 0 2px 12px #09091c; }
.home-art-direction #subjects-strip .ds-heading-block { justify-items: start; }
.home-art-direction #subjects-strip .home-course-browser { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 72px; margin-top: 48px; }
.home-art-direction #subjects-strip .home-course-browser .hs-syllabus { margin-top: clamp(230px,24vw,350px); background: #201a35; }
.home-art-direction #subjects-strip .hs-catalog { background: linear-gradient(180deg,transparent,#0b091ce8 160px,#0b091c 90%); }
@media(max-width:1100px) {
  .home-art-direction #subjects-strip .home-course-browser { gap: 36px; }
  .home-art-direction #subjects-strip .home-course-browser .hs-syllabus { margin-top: 230px; }
}
@media(max-width:860px) {
  body.home-art-direction #subjects-strip { padding-top: 330px; }
  .home-art-direction #subjects-strip .home-subject-art { height: 430px; mask-image: linear-gradient(180deg,#000 58%,transparent); -webkit-mask-image: linear-gradient(180deg,#000 58%,transparent); }
  .home-art-direction #subjects-strip .home-subject-art :is(img,video) { object-position: 83% top; }
  .home-art-direction #subjects-strip .ds-heading-split { max-width: none; }
  .home-art-direction #subjects-strip .home-course-browser { grid-template-columns: minmax(0,1fr); gap: 40px; margin-top: 40px; }
  .home-art-direction #subjects-strip .home-course-browser .hs-syllabus { margin-top: 0; }
  .home-art-direction #subjects-strip .hs-catalog { background: transparent; }
}
@media(max-width:480px) {
  body.home-art-direction #subjects-strip { padding-top: 290px; }
  .home-art-direction #subjects-strip .home-subject-art { height: 350px; }
}

/* Browsing stays still; the artwork is a separate sibling layer. Preserve
   hidden/selected states while neutralising the shared controller's tweens. */
.home-art-direction #subjects-strip>.ds-container *,
.home-art-direction #subjects-strip>.ds-container *::before,
.home-art-direction #subjects-strip>.ds-container *::after {
  animation: none!important;
  transition: none!important;
}
.home-art-direction #subjects-strip :is(#hsCatalogList>li,.hs-syllabus,.hs-syllabus-meta,.hs-syllabus-units>li,.hs-syllabus-panel>.ds-link) {
  opacity: 1!important;
  transform: none!important;
}
.home-art-direction #subjects-strip :is(.ds-btn:active,.ds-link:hover svg,.ds-btn:hover svg.ds-arrow) {
  transform: none!important;
}

/* Still and decoded footage share a single crop. Only the video layer switches;
   there is no full-scene crossfade or movement of the catalogue. */
.home-art-direction #subjects-strip .home-subject-art picture { display: block; width: 100%; height: 100%; }
.home-art-direction #subjects-strip .home-subject-art video { position: absolute; inset: 0; opacity: 0; }
.home-art-direction #subjects-strip .home-subject-art.has-frame video { opacity: 1; }
.home-art-direction #subjects-strip .home-subject-motion-toggle {
  position: absolute; z-index: 2; top: 22px; right: max(24px,calc((100vw - 1240px)/2));
  min-width: 168px; min-height: 44px; padding: 10px 16px;
  font: 500 14px/1.4 var(--ds-font-text); color: #f4f2ff;
  background: #151127; border: 1px solid #786889; border-radius: 5px; cursor: pointer;
}
.home-art-direction #subjects-strip .home-subject-motion-toggle[hidden] { display: none; }
.home-art-direction #subjects-strip .home-subject-motion-toggle:hover { background: #29203e; }
.home-art-direction #subjects-strip .home-subject-motion-toggle:focus-visible { outline: 3px solid #c9c2ff; outline-offset: 4px; }
@media(prefers-reduced-motion:reduce) {
  .home-art-direction #subjects-strip .home-subject-art video,
  .home-art-direction #subjects-strip .home-subject-motion-toggle { display: none; }
}