/* Shared static content only. FAQ and site chrome remain owned by their components. */
.landing-sections { max-width: var(--sc-container); margin-inline: auto; padding: var(--sc-space-16) var(--sc-space-5); color: var(--sc-color-text); }
.landing-sections h2 { margin: 0 0 var(--sc-space-8); color: var(--sc-color-ink); line-height: var(--sc-leading-tight); }
.landing-sections h3 { margin: 0 0 var(--sc-space-3); color: var(--sc-color-ink); }
.landing-sections p { margin: 0; line-height: var(--sc-leading-copy); overflow-wrap: anywhere; }
.landing-sections__steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--sc-space-6); padding: 0; margin: 0; list-style: none; }
.landing-sections__step, .landing-sections__card { min-width: 0; overflow: hidden; border: 1px solid var(--sc-color-border); border-radius: var(--sc-radius-lg); background: var(--sc-color-surface); }
.landing-sections__media { display: block; width: 100%; height: auto; object-fit: contain; background: var(--sc-color-surface-muted); }
.landing-sections__copy { padding: var(--sc-space-6); min-width: 0; }
.landing-sections__number { display: inline-flex; align-items: center; justify-content: center; padding: var(--sc-space-2) var(--sc-space-4); margin-bottom: var(--sc-space-4); border-radius: var(--sc-radius-pill); color: var(--sc-color-brand-700); background: var(--sc-color-brand-50); }
.landing-sections__scenario { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: 1fr 1fr; gap: var(--sc-space-3) var(--sc-space-8); margin-block: var(--sc-space-12); }
.landing-sections__scenario > .landing-sections__media { border-radius: var(--sc-radius-xl); grid-column: 1; grid-row: 1 / 3; align-self: center; }
.landing-sections__scenario > .landing-sections__scene-title { grid-column: 2; grid-row: 1; align-self: end; margin: 0; }
.landing-sections__scenario > .landing-sections__copy { grid-column: 2; grid-row: 2; align-self: start; padding: 0; }
.landing-sections__scenario--reverse > .landing-sections__media { grid-column: 2; }
.landing-sections__scenario--reverse > .landing-sections__scene-title, .landing-sections__scenario--reverse > .landing-sections__copy { grid-column: 1; }
.landing-sections__related { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: var(--sc-space-6); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; padding-bottom: var(--sc-space-3); }
.landing-sections__card { display: block; text-decoration: none; color: inherit; transition: border-color var(--sc-motion-fast) var(--sc-ease); }
.landing-sections__card:hover { border-color: var(--sc-color-brand-700); }
.landing-sections__link:focus-visible { outline: 2px solid var(--sc-color-focus); outline-offset: calc(-1 * var(--sc-space-1)); }
.landing-sections__card:focus-within { border-color: var(--sc-color-focus); }
.landing-sections__entry { display: block; color: var(--sc-color-brand-700); margin-top: var(--sc-space-3); font-size: var(--sc-font-size-xl); }
.landing-sections__idea { margin-top: var(--sc-space-5); gap: var(--sc-space-3); min-height: var(--sc-control-height); }
.landing-sections__swipe { display: none; }
.landing-sections--callback { display: grid; grid-template-columns: 1fr 2fr; align-items: center; gap: var(--sc-space-6); background: var(--sc-color-surface); border-radius: var(--sc-radius-xl); margin-block: var(--sc-space-12); padding: var(--sc-space-6); }
.landing-sections--callback > .landing-sections__media { border-radius: var(--sc-radius-lg); }
.landing-sections--callback h2 { margin-bottom: var(--sc-space-4); }
.landing-sections--callback .sc-button { margin-top: var(--sc-space-6); }
@media (max-width: 767px) {
  .landing-sections { padding: var(--sc-space-10) var(--sc-space-4); }
  .landing-sections__steps, .landing-sections__scenario, .landing-sections--callback { grid-template-columns: minmax(0,1fr); }
  .landing-sections__steps { gap: 0; }
  .landing-sections__step { border: 0; border-radius: 0; background: none; overflow: visible; }
  .landing-sections__step + .landing-sections__step { border-top: 1px solid var(--sc-color-border); }
  .landing-sections__step .landing-sections__copy { display: grid; grid-template-columns: var(--sc-space-8) minmax(0,1fr); gap: var(--sc-space-2) var(--sc-space-3); padding: var(--sc-space-4) 0; }
  .landing-sections__step .landing-sections__number { grid-column: 1; grid-row: 1 / 3; align-self: start; padding: var(--sc-space-1); margin: 0; font-size: var(--sc-font-size-sm); }
  .landing-sections__step h3, .landing-sections__step p { grid-column: 2; margin: 0; }
  .landing-sections__step h3 { font-size: var(--sc-font-size-md); }
  .landing-sections__step p { color: var(--sc-color-muted); font-size: var(--sc-font-size-sm); }
  .landing-sections--teaching > h2 { margin-bottom: var(--sc-space-3); }
  .landing-sections__scenario { grid-template-rows: auto auto auto; gap: var(--sc-space-4); margin-block: var(--sc-space-8); }
  .landing-sections__scenario > .landing-sections__scene-title { grid-column: 1; grid-row: 1; font-size: var(--sc-font-size-xl); }
  .landing-sections__scenario > .landing-sections__media { grid-column: 1; grid-row: 2; }
  .landing-sections__scenario > .landing-sections__copy { grid-column: 1; grid-row: 3; padding: 0; }
  .landing-sections__idea { width: 100%; justify-content: space-between; margin-top: var(--sc-space-4); }
  .landing-sections__copy { padding: var(--sc-space-5); }
  .landing-sections--callback { margin-inline: var(--sc-space-4); }
  .landing-sections--related > h2 { margin-bottom: var(--sc-space-2); }
  .landing-sections__swipe { display: block; font-size: var(--sc-font-size-sm); color: var(--sc-color-muted); margin-bottom: var(--sc-space-5) !important; }
}

.landing-experience__choice { display: flex; flex-wrap: wrap; gap: var(--sc-space-2); padding: var(--sc-space-4); margin-top: var(--sc-space-3); border: 1px solid var(--sc-color-border); border-radius: var(--sc-radius-lg); background: var(--sc-color-surface); }
.landing-experience__choice p { flex-basis: 100%; margin-bottom: var(--sc-space-2); }
.landing-experience__choice .sc-button { white-space: normal; }
.landing-experience__status { margin: var(--sc-space-2) 0; color: var(--sc-color-muted); font-size: var(--sc-font-size-sm); }
.landing-experience__error { color: var(--sc-color-danger); margin-top: var(--sc-space-3); }
.landing-experience__dock { display: none; }
/* Landing guidance is visible when it explains why Create is unavailable. */
body:has(.landing-sections) .studio-handoff .model-workspace__submit-help { position: static; grid-column: 1 / -1; width: auto; height: auto; margin: 0; padding: 0; overflow: visible; clip-path: none; white-space: normal; font-size: var(--sc-font-size-sm); color: var(--sc-color-muted); }
body:has(.landing-sections) .studio-handoff form:has([data-workspace-submit]:not(:disabled)) .model-workspace__submit-help { display: none; }
.landing-example { padding: var(--sc-space-6); border: 1px solid var(--sc-color-border); border-radius: var(--sc-radius-lg); background: var(--sc-color-surface); margin-bottom: var(--sc-space-12); }
.landing-example__media { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--sc-space-4); margin-block: var(--sc-space-4); }
.landing-example__media--single { grid-template-columns: minmax(0,1fr); max-width: 40rem; }
.landing-example figure { margin: 0; min-width: 0; }
.landing-example img, .landing-example video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--sc-color-canvas); border-radius: var(--sc-radius-md); }
.landing-example figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sc-space-2); padding-block: var(--sc-space-3); font-size: var(--sc-font-size-sm); }
.landing-example figcaption span { color: var(--sc-color-muted); }
.landing-example__downloads { display: flex; flex-wrap: wrap; gap: var(--sc-space-3); margin-top: var(--sc-space-5); }
.landing-example__switch { display: none; }
@media (max-width: 767px) {
  .landing-example { padding: var(--sc-space-4); margin-bottom: var(--sc-space-8); }
  .landing-example__media { grid-template-columns: minmax(0,1fr); }
  .landing-example__switch { display: flex; gap: var(--sc-space-2); margin-top: var(--sc-space-4); }
  .landing-example__switch .sc-button { flex: 1; min-height: var(--sc-control-height); }
  .landing-example__switch [aria-pressed="true"] { border-color: var(--sc-color-brand-700); color: var(--sc-color-brand-700); }
  .landing-example[data-example-view="before"] .landing-example__after, .landing-example[data-example-view="after"] .landing-example__before { display: none; }
  .landing-example__downloads .sc-button { flex: 1 1 100%; }
  .landing-experience__dock:not([hidden]) { display: flex; position: fixed; z-index: 30; inset-inline: var(--sc-space-4); bottom: calc(var(--sc-space-3) + env(safe-area-inset-bottom)); padding: var(--sc-space-2); border: 1px solid var(--sc-color-border); border-radius: var(--sc-radius-lg); background: var(--sc-color-surface); box-shadow: var(--sc-shadow-lg); }
  .landing-experience__dock .sc-button { width: 100%; min-height: var(--sc-control-height); }
  .landing-experience__choice .sc-button { flex: 1 1 100%; min-height: var(--sc-control-height); }
}
@media (prefers-reduced-motion: no-preference) {
  .landing-sections__idea, .landing-experience__dock .sc-button { transition: transform var(--sc-motion-fast) var(--sc-ease), background-color var(--sc-motion-fast) var(--sc-ease); }
  .landing-sections__idea:active, .landing-experience__dock .sc-button:active { transform: scale(.98); }
}
@media (prefers-reduced-motion: reduce) { .landing-sections__card { transition: none; } }

.landing-sections__link { display: block; text-decoration: none; color: inherit; }

.landing-sections--text-poster { grid-template-columns: minmax(0,1fr); border: 1px solid var(--sc-color-border); background: linear-gradient(115deg,var(--sc-color-surface),var(--sc-color-surface-muted)); }
.landing-sections--text-poster .landing-sections__copy { padding: var(--sc-space-6); }

/* Callback anchors leave room for the fixed global navigation. */
html:has(.landing-sections) { scroll-padding-top: var(--sc-space-20); }

.landing-sections__card > .landing-sections__media { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; }
.landing-sections__card { scroll-snap-align: start; }
@media (max-width: 767px) {
  .landing-sections__related { grid-auto-columns: minmax(15rem, 78%); gap: var(--sc-space-4); }
}