/* Three complete scenes: a large form story, three feature cards, then desktop AI. */
.eh-home .sc-stage {
  --sc-canvas: var(--eh-purple-soft);
  --sc-ink: var(--eh-ink);
  --sc-muted: var(--eh-muted);
  --sc-accent: var(--eh-accent);
  --sc-edge: color-mix(in srgb, var(--eh-panel) 80%, var(--eh-line));
  box-sizing: border-box;
  position: relative;
  width: min(1600px, calc(100% - 48px));
  block-size: min(700px, calc(100svh - 124px));
  margin-block: 28px;
  padding: 0;
  scroll-margin-top: 108px;
  color: var(--sc-ink);
}
.sc-stage *, .sc-stage *::before, .sc-stage *::after { box-sizing: border-box; }
.sc-forms { background: var(--sc-canvas); }
.sc-eyebrow { display: block; color: var(--sc-accent); font-size: 11px; font-weight: 650; letter-spacing: .08em; line-height: 1.5; margin-bottom: 14px; text-decoration: none; }
.sc-stage h2, .sc-stage h3 { color: var(--sc-ink); letter-spacing: -.035em; font-weight: 580; margin: 0; }
.sc-stage h2 { font-size: clamp(34px, 3.8vw, 56px); line-height: 1.07; }
.sc-stage h2 > span { color: var(--sc-accent); }
.sc-stage p { color: var(--sc-muted); font-size: 17px; line-height: 1.6; margin: 20px 0 0; }
.sc-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 11px 18px; margin-top: 24px; background: var(--eh-panel); color: var(--eh-ink); text-decoration: none; font-size: 14px; font-weight: 550; line-height: 1.4; border: 1px solid var(--sc-edge); border-radius: 0; }
.sc-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; flex: none; }
.sc-link:hover { background: var(--eh-hover); }
.sc-link:focus-visible, a.sc-eyebrow:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 5px; }
.sc-stage picture { display: block; position: absolute; }
.sc-stage picture > img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.sc-form-art { position: absolute; inset: 0 auto 0 0; width: 64%; }
.sc-paper-form { height: min(58%, 32vw); aspect-ratio: 3 / 4; left: 9%; bottom: 8%; }
.sc-field-phone { height: min(96%, 52vw); aspect-ratio: 2 / 3; left: 38%; top: 50%; transform: translateY(-50%); }
.sc-convert-arrow { position: absolute; width: 10%; left: 36%; top: 54%; color: var(--sc-accent); }
.sc-convert-arrow svg { width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 1; }
.sc-form-copy { position: absolute; width: 38%; right: 5%; top: 50%; transform: translateY(-50%); }
.sc-form-copy > p { max-width: 440px; }
.sc-form-copy > .sc-short-copy { font-size: 15px; margin-top: 16px; }

.eh-home .sc-feature-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; block-size: min(660px, calc(100svh - 124px)); }
.sc-card { position: relative; min-width: 0; min-height: 0; background: var(--sc-canvas); border: 1px solid var(--sc-edge); border-radius: 0; }
.sc-card h3 { font-size: clamp(22px, 2.15vw, 32px); line-height: 1.15; }
.sc-card p { font-size: 14px; line-height: 1.6; margin-top: 14px; }
.sc-card .sc-eyebrow { font-size: 10px; margin-bottom: 10px; }
.sc-card .sc-link { font-size: 13px; padding-inline: 14px; margin-top: 18px; }
.sc-crew { grid-row: 1 / 3; }
.sc-crew-phone { left: -3%; top: 50%; height: min(94%, calc(43vw - 26px)); aspect-ratio: 2 / 3; transform: translateY(-50%); }
.sc-crew-copy { position: absolute; top: 7%; right: 6%; width: 44%; }
.sc-crew-copy h3 { font-size: clamp(24px, 2.5vw, 38px); }
.sc-certificate { right: 7%; bottom: 5%; height: 35%; aspect-ratio: 1; }
.sc-small-copy { position: absolute; left: 5%; top: 50%; transform: translateY(-50%); width: 47%; }
.sc-small-copy p { max-width: 300px; }
.sc-course-art { right: 0; top: 8%; width: 48%; height: 84%; }
.sc-completion-photo { position: absolute; right: 4%; top: 50%; transform: translateY(-50%) rotate(4deg); width: 41%; margin: 0; padding: 10px 10px 0; background: var(--td-paper); color: var(--td-ink); border: 1px solid var(--td-line); box-shadow: 0 8px 18px color-mix(in srgb, var(--eh-ink) 12%, transparent); }
.sc-completion-photo > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.sc-completion-photo figcaption { padding: 12px 1px; font-size: 15px; line-height: 1.4; font-weight: 550; }
.sc-completion-photo figcaption > span { color: var(--td-mint); margin-right: 4px; }
.sc-completion-photo small { display: block; font-size: 11px; font-weight: 500; color: var(--td-mint); margin-top: 3px; }

.eh-home .sc-stage.sc-ai { background: var(--eh-dark-panel); --sc-ink: var(--eh-dark-ink); --sc-muted: var(--eh-dark-muted); --sc-accent: var(--eh-ai-text-purple); }
.sc-ai-copy { position: absolute; left: 5%; width: 34%; top: 50%; transform: translateY(-50%); z-index: 1; }
.sc-ai-copy h2 { font-size: clamp(30px, 3.2vw, 48px); }
.sc-ai-copy p { max-width: 400px; }
.sc-ai .sc-link { color: var(--td-ink); background: var(--td-paper); border-color: var(--td-paper); }
.sc-ai .sc-link:hover { background: var(--td-wash); }
.sc-no-card { display: block; color: var(--sc-muted); font-size: 12px; line-height: 1.5; margin-top: 11px; }
.sc-ai-art { left: 39%; right: 1%; top: 7%; bottom: 7%; }

@media (prefers-reduced-motion: no-preference) {
  .eh-motion .sc-certificate { animation: sc-certificate-lift 7s ease-in-out infinite; animation-play-state: paused; }
  .eh-motion .sc-crew.is-scene-visible .sc-certificate { animation-play-state: running; }
  .eh-motion .sc-crew:focus-within .sc-certificate,
  .eh-motion[data-fs-hidden=true] .sc-certificate { animation-play-state: paused; }
  @keyframes sc-certificate-lift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
}
@media (min-width: 901px) and (max-height: 680px) {
  .sc-stage h2 { font-size: clamp(30px, 3.4vw, 44px); }
  .sc-stage p { font-size: 14px; margin-top: 14px; }
  .sc-stage .sc-eyebrow { font-size: 10px; margin-bottom: 9px; }
  .sc-stage .sc-link { margin-top: 15px; }
  .sc-form-copy > .sc-short-copy { font-size: 13px; margin-top: 11px; }
  .sc-card h3, .sc-crew-copy h3 { font-size: 24px; }
  .sc-card p { font-size: 13px; margin-top: 10px; }
  .sc-card .sc-link { font-size: 12px; padding: 9px 12px; }
}
/* Tablet and very short views flow naturally. No text or device is clipped to
   force a desktop composition into an unsuitable viewport. */
@media (max-width: 900px), (max-height: 540px) {
  .eh-home .sc-stage { width: calc(100% - 40px); block-size: auto; }
  .sc-forms { display: flex; flex-direction: column; }
  .sc-form-copy { position: static; order: -1; transform: none; width: auto; padding: 32px 36px 0; }
  .sc-form-copy > p { max-width: 600px; }
  .sc-form-art { position: relative; width: 100%; height: 430px; }
  .sc-paper-form { left: 13%; height: 58%; }
  .sc-field-phone { left: 42%; height: 96%; top: 2%; transform: none; }
  .sc-convert-arrow { left: 36%; width: 10%; }
  .eh-home .sc-feature-group { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 500px auto; }
  .sc-crew { grid-row: auto; grid-column: 1 / 3; }
  .sc-crew-phone { left: 5%; height: 94%; }
  .sc-crew-copy { width: 43%; right: 7%; }
  .sc-certificate { right: 12%; }
  .sc-course, .sc-actions { display: flex; flex-direction: column; min-height: 400px; }
  .sc-small-copy { position: static; transform: none; width: auto; padding: 24px 24px 0; }
  .sc-small-copy h3 { font-size: 24px; }
  .sc-small-copy h3 br { display: none; }
  .sc-small-copy .sc-link { margin-top: 12px; }
  .sc-course-art { position: relative !important; width: 100%; height: 140px; inset: auto; margin-top: auto; }
  .sc-completion-photo { position: relative; inset: auto; transform: rotate(3deg); width: 45%; margin: 12px auto 18px; }
  .sc-completion-photo figcaption { font-size: 11px; padding-block: 7px; }
  .sc-completion-photo small { font-size: 9px; }
  .sc-ai { display: flex; flex-direction: column; }
  .sc-ai-copy { position: static; width: auto; transform: none; padding: 32px 36px 0; }
  .sc-ai-copy p { max-width: 600px; }
  .sc-ai-art { position: relative !important; inset: auto; width: 100%; height: 360px; }
}
@media (max-width: 680px) {
  .eh-home .sc-stage { width: calc(100% - 24px); margin-block: 18px; scroll-margin-top: 94px; }
  .sc-form-copy, .sc-ai-copy { padding: 28px 24px 0; }
  .sc-stage h2 { font-size: clamp(32px, 9vw, 44px); }
  .sc-stage p { font-size: 15px; margin-top: 16px; }
  .sc-form-copy > .sc-short-copy { font-size: 14px; }
  .sc-link { font-size: 14px; margin-top: 20px; }
  .sc-form-art { height: 360px; }
  .sc-paper-form { left: 2%; height: 51%; bottom: 10%; }
  .sc-field-phone { left: 38%; }
  .sc-convert-arrow { left: 31%; top: 56%; width: 12%; }
  .eh-home .sc-feature-group { display: flex; flex-direction: column; gap: 12px; }
  .sc-crew { min-height: 490px; }
  .sc-crew-phone { left: -12%; height: 84%; bottom: 4%; top: auto; transform: none; }
  .sc-crew-copy { right: 4%; width: 45%; top: 6%; }
  .sc-crew-copy h3 { font-size: clamp(23px, 6.2vw, 31px); }
  .sc-crew-copy p { font-size: 13px; line-height: 1.55; margin-top: 13px; }
  .sc-crew-copy .sc-eyebrow { font-size: 9px; }
  .sc-crew-copy .sc-link { font-size: 12px; padding-inline: 10px; margin-top: 16px; }
  .sc-certificate { height: 29%; right: 5%; bottom: 4%; }
  .sc-small-copy { padding: 26px 24px 0; }
  .sc-small-copy h3 { font-size: 28px; }
  .sc-small-copy p { max-width: none; font-size: 15px; }
  .sc-small-copy .sc-link { margin-top: 18px; }
  .sc-course-art { height: 230px; margin-block: 8px 14px; }
  .sc-completion-photo { width: 67%; margin-block: 26px 32px; }
  .sc-completion-photo figcaption { font-size: 15px; padding-block: 12px; }
  .sc-completion-photo small { font-size: 11px; }
  .sc-ai-copy h2 { font-size: clamp(30px, 8.5vw, 42px); }
  .sc-ai-art { height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-certificate { animation: none !important; translate: none !important; }
}
