/* Homepage sections below the hero, lifted toward the hero's language: light
   variable-weight headings (the serif italic accent stays), muted leads, glass
   cards on a gradient hairline, pill buttons and a violet glass primary.
   Loaded after every other homepage stylesheet; UI only, no copy changes.

   Every selector ends in :not(#mainContent *) so the hero is never touched; the
   id inside :not() also lifts specificity above the per-section rules this
   restyles, without !important. */
body.home-art-direction {
  --lift-ink: #f4f2ff;
  --lift-mute: rgba(232, 228, 246, .72);
  --lift-warm: 255, 206, 182;   /* the cloud glow in the hero art */
  --lift-cool: 189, 181, 251;   /* brand lavender, --ds-violet-300 */
  --lift-violet: 122, 110, 240; /* dark-mode primary, --ds-violet-500 */
  /* Card fill is opaque on purpose: the hairline is the border-box layer, and
     a see-through fill would let that gradient wash the whole card. */
  --lift-card-fill:
    linear-gradient(180deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, .015) 100%),
    linear-gradient(90deg, rgba(var(--lift-warm), .035) 0%, rgba(var(--lift-cool), .04) 100%),
    linear-gradient(#120e22, #120e22);
  --lift-hairline:
    linear-gradient(180deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, .03) 100%),
    linear-gradient(90deg, rgba(var(--lift-warm), .35) 0%, rgba(var(--lift-warm), 0) 35%, rgba(var(--lift-cool), 0) 65%, rgba(var(--lift-cool), .4) 100%),
    linear-gradient(#2a2440, #2a2440);
  --lift-hairline-violet:
    linear-gradient(180deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, .03) 100%),
    linear-gradient(90deg, rgba(var(--lift-warm), .3) 0%, rgba(var(--lift-violet), .25) 40%, rgba(var(--lift-violet), .7) 100%),
    linear-gradient(#2a2440, #2a2440);
}

/* ── Headings: light display weight; the italic serif accents are unchanged ── */
.home-art-direction :is(.ds-h2, .ds-display, .hx-title, .bloom-title, .bloom-tool-title, .film-intro h2, .hs-teach-copy .ds-h2):not(#mainContent *) {
  font-weight: 400;
  font-variation-settings: 'wght' 400;
  letter-spacing: -.035em;
  line-height: 1.06;
  text-wrap: balance;
}
.home-art-direction :is(.ds-lead, .ds-body, .hx-sub, .bloom-scene .benefit, .film-intro p):not(#mainContent *) { color: var(--lift-mute); text-wrap: pretty; }
.home-art-direction :is(.ds-eyebrow, .hx-eyebrow):not(#mainContent *) { color: rgb(var(--lift-cool)); letter-spacing: .12em; font-size: 12px; }
.home-art-direction .bloom-scene .example h4:not(#mainContent *) { color: rgb(var(--lift-cool)); }

/* ── Glass cards on a gradient hairline ── */
.home-art-direction :is(.hs-plan, .hs-example-sheet, .hs-teach-card, .feedback-card):not(#mainContent *) {
  border: 1px solid transparent;
  border-radius: 28px;
  background: var(--lift-card-fill) padding-box, var(--lift-hairline) border-box;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .7);
}
/* Cards that carry a recommendation or a scene keep a soft violet glow. */
.home-art-direction :is(.hs-plan--pro, .hs-teach-card):not(#mainContent *) {
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(var(--lift-violet), .28), rgba(var(--lift-violet), 0) 62%) padding-box,
    radial-gradient(90% 50% at 0% 100%, rgba(var(--lift-violet), .1), rgba(var(--lift-violet), 0) 60%) padding-box,
    var(--lift-card-fill) padding-box,
    var(--lift-hairline-violet) border-box;
}
.home-art-direction .hs-teach-card:not(#mainContent *) { overflow: hidden; }
.home-art-direction .hs-teach-card.ds-night:not(#mainContent *)::before { display: none; }
.home-art-direction .hs-plan:hover:not(#mainContent *) { background: var(--lift-card-fill) padding-box, var(--lift-hairline) border-box; }
.home-art-direction .hs-plan--pro:hover:not(#mainContent *) {
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(var(--lift-violet), .28), rgba(var(--lift-violet), 0) 62%) padding-box,
    var(--lift-card-fill) padding-box,
    var(--lift-hairline-violet) border-box;
}
.home-art-direction .hs-syllabus:not(#mainContent *) {
  border: 1px solid transparent;
  border-radius: 24px;
  background: var(--lift-card-fill) padding-box, var(--lift-hairline-violet) border-box;
}
/* The quiz sits over the DNA art and keeps its blur, so it gets a violet ring
   instead of an opaque hairline card. */
.home-art-direction #try .hs-quiz:not(#mainContent *) {
  border-radius: 24px;
  border-color: rgba(var(--lift-cool), .3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .03) inset, 0 30px 80px -40px rgba(var(--lift-violet), .55);
}
.home-art-direction #try .hs-quiz-opt:not(#mainContent *) { border-radius: 14px; }
.home-art-direction #try .hs-quiz-opt:not(.is-correct):not(.is-wrong):hover:not(#mainContent *) { border-color: rgba(var(--lift-violet), .8); }

.home-art-direction .hs-plan :is(dl):not(#mainContent *) { border-color: rgba(255, 255, 255, .08); }
.home-art-direction .hs-plan-name:not(#mainContent *) { font-weight: 500; font-variation-settings: 'wght' 480; }
.home-art-direction .hs-plan--pro .ds-badge:not(#mainContent *) { background: rgba(var(--lift-violet), .22); color: #ddd8ff; box-shadow: inset 0 0 0 1px rgba(var(--lift-violet), .5); }

/* ── Chevron lists: the plan checks become the hero's thin chevron ── */
.home-art-direction .hs-plan-list li:not(#mainContent *) { grid-template-columns: 10px minmax(0, 1fr); gap: 12px; color: var(--lift-mute); }
.home-art-direction .hs-plan-list .ds-ico:not(#mainContent *) { display: none; }
.home-art-direction .hs-plan-list li:not(#mainContent *)::before {
  content: '';
  width: 7px;
  height: 7px;
  margin-top: .55em;
  border-top: 1.6px solid rgb(var(--lift-violet));
  border-right: 1.6px solid rgb(var(--lift-violet));
  transform: rotate(45deg) translate(-2px, 2px);
}
.home-art-direction .hs-plan-list strong:not(#mainContent *) { color: var(--lift-ink); font-weight: 600; }
.home-art-direction .hs-teach-points .ds-ico:not(#mainContent *) {
  border-radius: 50%;
  border-color: rgba(var(--lift-violet), .45);
  background: rgba(var(--lift-violet), .14);
  color: rgb(var(--lift-cool));
}

/* ── Buttons: pills everywhere; the primary is violet glass ── */
.home-art-direction :is(.ds-btn, .hx-button):not(#mainContent *) {
  min-height: 52px;
  border-radius: 999px;
  font-weight: 600;
  transition: box-shadow .25s ease, background-color .2s ease;
}
.home-art-direction .ds-btn:not(.ds-btn--primary):not(.ds-btn--light):not(#mainContent *) {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .22);
  color: var(--lift-ink);
}
.home-art-direction .ds-btn:not(.ds-btn--primary):not(.ds-btn--light):hover:not(#mainContent *) { background: rgba(255, 255, 255, .09); }
.home-art-direction :is(.ds-btn--primary, .ds-btn--light, .hx-button):not(#mainContent *) {
  border: 1px solid transparent;
  color: #fbfaff;
  background:
    linear-gradient(180deg, rgba(14, 10, 30, 0) 45%, rgba(14, 10, 30, .14) 78%, rgba(14, 10, 30, .3) 100%) padding-box,
    linear-gradient(90deg, rgba(var(--lift-warm), .16) 0%, rgba(var(--lift-warm), .04) 24%, rgba(var(--lift-violet), .22) 60%, rgba(var(--lift-violet), .45) 100%) padding-box,
    linear-gradient(90deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, .05) 100%) padding-box,
    linear-gradient(#3a2f7a, #3a2f7a) padding-box,
    linear-gradient(180deg, rgba(255, 250, 246, .9) 0%, rgba(255, 250, 246, .2) 45%, rgba(255, 250, 246, 0) 78%) border-box,
    linear-gradient(90deg, rgba(var(--lift-warm), .95) 0%, rgba(var(--lift-warm), .55) 14%, rgba(150, 140, 230, .35) 34%, rgba(150, 140, 230, .35) 62%, rgba(var(--lift-cool), .7) 88%, rgba(var(--lift-cool), .95) 100%) border-box;
  box-shadow: 0 -2px 22px rgba(var(--lift-warm), .14), 0 0 40px rgba(var(--lift-violet), .38), inset 0 1px 0 rgba(255, 246, 240, .4);
}
.home-art-direction :is(.ds-btn--primary, .ds-btn--light, .hx-button):hover:not(#mainContent *) {
  box-shadow: 0 -2px 30px rgba(var(--lift-warm), .26), 0 0 52px rgba(var(--lift-violet), .55), inset 0 1px 0 rgba(255, 246, 240, .55);
}
.home-art-direction .ds-btn .ds-arrow:not(#mainContent *) { transition: translate .25s ease; }
.home-art-direction .ds-btn:hover .ds-arrow:not(#mainContent *) { translate: 3px 0; }
.home-art-direction :is(.ds-link, .hs-plan-foot a):not(#mainContent *) { color: rgb(var(--lift-cool)); }
.home-art-direction .ds-link:hover:not(#mainContent *) { color: #fff; }

/* ── Chips, tabs and the FAQ follow the pill language ── */
.home-art-direction #subjects-strip .hs-filter:not(#mainContent *) { border-radius: 999px; padding-inline: 16px; }
.home-art-direction #subjects-strip .hs-filter[aria-pressed=true]:not(#mainContent *) { background: rgba(var(--lift-violet), .3); border-color: rgba(var(--lift-cool), .7); }
.home-art-direction #subjects-strip #hsCatalogSearch:not(#mainContent *) { border-radius: 999px; border-color: rgba(var(--lift-cool), .28); }
.home-art-direction #subjects-strip #hsCatalogSearch:focus:not(#mainContent *) { border-color: rgb(var(--lift-violet)); }
.home-art-direction .hs-syllabus-panel:not(#mainContent *) { border-radius: 18px; }
.home-art-direction .hs-syllabus-tabs button:not(#mainContent *) { border-radius: 14px; }
.home-art-direction #faq .ds-faq summary:not(#mainContent *) { font-weight: 450; font-variation-settings: 'wght' 450; letter-spacing: -.015em; }
.home-art-direction #faq .ds-faq .ds-faq-icon:not(#mainContent *) { border-color: rgba(var(--lift-violet), .7); }
.home-art-direction #faq .ds-faq details:not(#mainContent *) { border-bottom-color: rgba(var(--lift-cool), .16); }
.home-art-direction #faq .ds-faq:not(#mainContent *) { border-top-color: rgba(var(--lift-cool), .22); }

.home-art-direction .feedback-input:not(#mainContent *) { border-radius: 16px; border-color: rgba(var(--lift-cool), .24); }
.home-art-direction .feedback-input:focus:not(#mainContent *) { border-color: rgb(var(--lift-violet)); }

@media (prefers-contrast: more) {
  .home-art-direction :is(.hs-plan, .hs-example-sheet, .hs-teach-card, .feedback-card, .hs-syllabus):not(#mainContent *) { background: #120e22; border-color: #fff; }
  .home-art-direction :is(.ds-btn--primary, .ds-btn--light, .hx-button):not(#mainContent *) { background: #3a2f7a; border-color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .home-art-direction .ds-btn .ds-arrow:not(#mainContent *) { transition: none; }
}