/* Home (design v9 board Home, FE9-2): one centred sentence and one primary
   action on the page grey, the hero loop framed at container width (21:9,
   radius 16), the three Seedance 2.0 cards with their own loops; then the
   three steps beside a dark request on a white band, three console crops
   with their facts, the questions and a light closing panel. The shared
   header and footer come from base.css. Components marked "shared later"
   repeat on the model and model list pages until they move to base.css. */
.home-page { background: var(--gray-50); }
/* The shared sheet draws main as a column and every main > section as a
   card; the home page is full width with open sections. */
.home-main { display: block; max-width: none; margin: 0; padding: 0; }
.home-main > section { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }

/* Page glyphs (shared later): 1.5px line icons as filled outlines. */
.glyph.home-glyph-arrow { width: 18px; height: 18px; clip-path: path("M3.75 8.25H12.44L8.47 4.28L9.53 3.22L15.31 9L9.53 14.78L8.47 13.72L12.44 9.75H3.75Z"); }
.glyph.home-glyph-arrow-sm { width: 16px; height: 16px; clip-path: path("M3.33 7.25H10.86L7.47 3.86L8.53 2.8L13.73 8L8.53 13.2L7.47 12.14L10.86 8.75H3.33Z"); }
.glyph.home-glyph-video { width: 14px; height: 14px; clip-path: path(evenodd, "M1.17 3.5H9.33V10.5H1.17ZM2.4 4.7V9.3H8.1V4.7ZM12.83 4.67L9.33 7L12.83 9.33Z"); }
.glyph.home-glyph-pause { width: 18px; height: 18px; clip-path: path("M4.5 3H7.5V15H4.5ZM10.5 3H13.5V15H10.5Z"); }
.glyph.home-glyph-play { width: 18px; height: 18px; clip-path: path("M5.25 2.25L15.75 9L5.25 15.75Z"); }

/* Sections: 96px apart (64 at 1024, 48 on phones); the band is white. */
.home-main > .home-sec { padding: 96px 0; }
.home-main > .home-sec.home-sec-tight { padding-top: 0; }
.home-main > .home-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--gray-0); }
.home-head { margin-bottom: 40px; }
.home-title { margin: 0; color: var(--text-1); font: 600 30px/38px var(--font-sans); letter-spacing: 0; text-wrap: balance; }
.home-lead { max-width: 640px; margin: 8px 0 0; color: var(--text-2); font-size: 16px; line-height: 24px; text-wrap: pretty; }

/* Hero */
.home-main > .home-hero { padding: 64px 0 96px; }
.home-hero-text { display: flex; flex-direction: column; align-items: center; text-align: center; }
.home-hero-title { max-width: 880px; margin: 0; color: var(--text-1); font: 600 48px/56px var(--font-sans); letter-spacing: 0; text-wrap: balance; }
.home-hero-lead { max-width: 640px; margin: 16px auto 0; color: var(--text-2); font-size: 16px; line-height: 24px; }
.home-hero-lead > span { display: inline-block; }
.home-hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 32px; }

/* The lead loop (shared later as the v9 stage): the poster at rest, a
   caption plate and a pause button, each on its own dark plate so white
   text stays legible over any frame. */
.home-stage { position: relative; aspect-ratio: 21 / 9; margin: 48px 0 0; overflow: hidden; border-radius: var(--r-16); background: var(--ink-950); box-shadow: 0 0 0 1px var(--line); }
.home-stage-media { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 76%; }
.home-stage-cap { position: absolute; bottom: 16px; left: 16px; display: inline-flex; align-items: center; gap: 8px; height: 32px; margin: 0; padding: 0 12px; border-radius: var(--r-full); background: rgba(16, 22, 31, .64); color: #fff; font: 500 13px/20px var(--font-sans); white-space: nowrap; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.home-stage-meta { color: rgba(255, 255, 255, .86); font-weight: 400; }
.home-stage-meta::before { content: "·"; margin-right: 8px; }
.home-stage-btn { position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 40px; height: 40px; min-height: 0; padding: 0; border: 0; border-radius: var(--r-full); background: rgba(16, 22, 31, .64); box-shadow: none; color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color var(--t-hover) var(--ease), transform var(--t-press) var(--ease); }
.home-stage-btn:hover { border: 0; background: rgba(16, 22, 31, .8); color: #fff; }
.home-stage-btn:active { transform: scale(.98); }
.home-stage-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.home-stage-btn .home-glyph-play, .home-stage-btn.is-paused .home-glyph-pause { display: none; }
.home-stage-btn.is-paused .home-glyph-play { display: inline-block; }

/* Price status: read aloud while the list loads; shown when it fails. */
.home-status { margin: 0; }
.home-status.is-shown { margin-top: 16px; color: var(--text-2); font-size: 14px; line-height: 20px; }

/* Model cards with their loops (shared later as the v9 clip card). */
.home-models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; }
.home-models > li { display: flex; min-width: 0; }
.card.home-model { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; margin: 0; padding: 0; overflow: hidden; }
.home-cover { display: block; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--line-soft); }
.home-clip { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 200ms var(--ease); }
/* The loop's poster lies over the loop as a still and is lifted only while
   the card plays (is-live, clips.js): a loop that played and was rewound
   would otherwise show its first frame instead of the poster. */
.home-cover > .home-still { position: absolute; inset: 0; display: block; transition: opacity 150ms var(--ease), transform 200ms var(--ease); }
.home-model.is-live .home-still { opacity: 0; }
.card-link:hover :is(.home-clip, .home-still), .card-link:focus-visible :is(.home-clip, .home-still) { transform: scale(1.02); }
.home-chip { position: absolute; bottom: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--r-6); background: rgba(16, 22, 31, .64); color: #fff; font: 500 12px/16px var(--font-sans); white-space: nowrap; }
.home-model-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 24px; }
.home-model-name { color: var(--text-1); font: 600 16px/24px var(--font-sans); }
.home-model-line { margin-top: 4px; color: var(--text-2); font-size: 13px; line-height: 20px; }
.home-model-eg { min-height: 20px; color: var(--text-2); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; }
/* The price sits at the foot of every card, so the row's prices line up
   whatever their lines wrap to: the shared .catalog-price grows (flex 1 1
   auto), which would take the free space the auto margin needs. */
.home-model-price { display: flex; flex: none; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; min-height: 24px; margin-top: auto; padding-top: 16px; }
.home-model-price :is(.catalog-lead, .catalog-value) { color: var(--text-1); font: 600 16px/24px var(--font-sans); font-variant-numeric: tabular-nums; }
.home-model-price .catalog-unit { color: var(--text-3); font-size: 12px; line-height: 16px; }
.home-model-price .catalog-note { color: var(--text-2); font-size: 13px; line-height: 20px; }
.skel.home-skel-eg { width: 128px; height: 12px; margin: 4px 0; }
.skel.home-skel-price { width: 168px; height: 16px; margin: 4px 0; }

/* First video: the steps beside the dark request. */
.home-docs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 48px 64px; }
.home-steps { display: flex; flex-direction: column; gap: 24px; margin: 32px 0 0; padding: 0; list-style: none; }
.home-step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 16px; }
.home-step-n { display: grid; grid-row: span 2; place-items: center; width: 28px; height: 28px; border-radius: var(--r-full); background: var(--gray-100); color: var(--text-1); font: 500 13px/20px var(--font-sans); }
.home-step h3 { margin: 0; color: var(--text-1); font: 600 16px/24px var(--font-sans); }
.home-step p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 22px; }
.home-docs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 40px; }
.home-code { align-self: start; }
.home-code-head { gap: 8px; padding: 0 8px 0 4px; }
/* The tab row is a role=tablist, which the shared sheet gives a bottom rule
   and wrapping: here it fills the head's height in one row that scrolls
   sideways, and the selected tab's bar sits inside the row, where the scroll
   box cannot clip it. */
.home-code-tabs { display: flex; flex: 1 1 auto; flex-wrap: nowrap; align-items: stretch; align-self: stretch; gap: 2px; min-width: 0; height: auto; overflow-x: auto; overflow-y: hidden; border-bottom: 0; scrollbar-width: none; }
.home-code-tabs > .code-tab { flex: none; height: auto; margin: 0; padding: 0 12px; }
.home-code-tabs > .code-tab[aria-selected=true]::after { bottom: 0; }
.home-code-head > .home-copy { flex: none; gap: 6px; padding: 0 12px; }
.home-code-panel { counter-reset: home-line; }
.home-code-panel .cl { display: inline; min-height: 0; }
.home-code-panel .cl::before { content: counter(home-line); counter-increment: home-line; display: inline-block; width: 20px; margin-right: 16px; color: var(--code-dark-ln); text-align: right; user-select: none; }

/* Facts: three console crops, one container level each. */
.home-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 40px 16px; }
.home-fact { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.card.home-crop { height: 300px; margin: 0; padding: 0; overflow: hidden; }
.home-fact-text { margin-top: 20px; }
.home-fact-text h3 { margin: 0; color: var(--text-1); font: 600 16px/24px var(--font-sans); }
.home-fact-text p { margin: 4px 0 0; color: var(--text-2); font-size: 14px; line-height: 22px; }
.home-strip { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 20px; }
.home-strip-meta { min-width: 0; overflow: hidden; color: var(--text-3); font-size: 13px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
.home-crop .badge .glyph { width: 12px; height: 12px; }
/* A tab that does not fit (the longer English labels) wraps onto a hidden
   second row instead of showing a cut-off fragment at the crop's edge. */
.home-crop-tabs { flex-wrap: wrap; height: 41px; gap: 20px; padding: 0 20px; overflow: hidden; }
.home-crop-tabs > .tab { cursor: default; }
.home-fee { padding: 16px 20px 0; }
.home-fee .stat-value { min-height: 32px; margin-top: 2px; }
.home-fee-calc { min-height: 20px; margin: 2px 0 0; color: var(--text-3); font-size: 13px; line-height: 20px; }
.skel.home-skel-amount { width: 96px; height: 20px; margin: 6px 0; }
.skel.home-skel-formula { width: 240px; max-width: 100%; height: 12px; margin: 4px 0; }
.skel.home-skel-settled { display: inline-block; width: 64px; height: 12px; vertical-align: middle; }
.home-rows { margin-top: 16px; border-top: 1px solid var(--line-soft); }
.home-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 40px; border-bottom: 1px solid var(--line-soft); color: var(--text-1); font-size: 14px; line-height: 20px; }
.home-rows > div:last-child { border-bottom: 0; }
.home-rows > div > :first-child { color: var(--text-2); }
.home-crop-table { table-layout: fixed; }
.home-crop-table th { background: transparent; }
.home-crop-table th:first-child { width: 104px; }
.home-crop-table th:last-child { width: 108px; }
.home-crop-table td { height: 52px; }
.home-prompt, .home-crop-table .cell-sub { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-cb { padding: 4px 20px 0; }
.home-cb-item { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.home-cb-item:last-child { border-bottom: 0; }
.home-cb-top { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; }
.home-cb-time { margin-left: auto; color: var(--text-3); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; }
.home-cb-sub { margin: 2px 0 0; color: var(--text-3); font-size: 13px; line-height: 20px; }
.home-cb-body { margin: 8px 0 0; padding: 8px 12px; overflow: hidden; border: 0; border-radius: var(--r-8); background: var(--gray-25); color: var(--text-1); font: 400 12px/16px var(--font-mono); white-space: pre; }

/* Questions: two columns of open answers. */
.home-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.home-faq-item { padding: 24px 0 32px; border-top: 1px solid var(--line); }
.home-faq-item h3 { margin: 0; color: var(--text-1); font: 600 16px/24px var(--font-sans); }
.home-faq-item p { margin: 8px 0 0; color: var(--text-2); font-size: 14px; line-height: 22px; text-wrap: pretty; }

/* Closing panel: white on the page grey, so it never merges into the
   footer. */
.card.home-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; margin: 0; padding: 48px; }
.home-cta p { max-width: 560px; margin: 8px 0 0; color: var(--text-2); font-size: 16px; line-height: 24px; }

@media (prefers-reduced-motion: reduce) {
  .card-link:hover :is(.home-clip, .home-still), .card-link:focus-visible :is(.home-clip, .home-still) { transform: none; }
}
@media (max-width: 1279px) {
  .home-facts { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .home-fact-text { order: -1; max-width: 640px; margin: 0 0 20px; }
}
@media (max-width: 1024px) {
  .home-main > .home-sec { padding: 64px 0; }
  .home-main > .home-hero { padding: 48px 0 64px; }
  .home-docs { gap: 40px; }
  .home-stage { margin-top: 40px; }
}
@media (max-width: 1023px) {
  .home-docs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .home-main > .home-sec { padding: 48px 0; }
  .home-main > .home-sec.home-sec-tight { padding-top: 0; }
  .home-main > .home-hero { padding: 40px 0 48px; }
  .home-hero-title { font-size: 36px; line-height: 44px; }
  .home-hero-actions { align-self: stretch; }
  .home-hero-actions .btn { flex: 1 1 0; }
  .home-stage { aspect-ratio: 4 / 3; margin-top: 32px; border-radius: var(--r-12); }
  .home-stage-media { object-position: 58% 70%; }
  .home-stage-cap { bottom: 12px; left: 12px; height: 28px; padding: 0 10px; font-size: 12px; line-height: 16px; }
  .home-stage-meta { display: none; }
  .home-stage-btn { right: 8px; bottom: 8px; width: 44px; height: 44px; }
  .home-models { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 8px; }
  .card.home-model { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 88px; padding: 12px; }
  .home-cover { width: 112px; height: 63px; aspect-ratio: auto; border-bottom: 0; border-radius: var(--r-8); }
  .home-chip { bottom: 4px; left: 4px; justify-content: center; width: 20px; height: 20px; padding: 0; border-radius: var(--r-4); }
  .home-chip > span:last-child { display: none; }
  .home-chip .home-glyph-video { width: 12px; height: 12px; }
  .home-model-body { padding: 0; }
  .home-model-line { margin-top: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .home-model-eg { display: none; }
  .home-model-price { margin-top: 0; padding-top: 0; }
  .home-model-price :is(.catalog-lead, .catalog-value) { font-size: 14px; line-height: 20px; }
  .home-head { margin-bottom: 24px; }
  .home-title { font-size: 24px; line-height: 32px; }
  .home-fact-text { margin-bottom: 16px; }
  /* The crop's open tab (the fifth, Charges, in English) stays in view
     from 360px. */
  .home-crop-tabs { gap: 10px; }
  .home-crop-tabs > .tab { font-size: 13px; }
  .home-code-head { gap: 0; padding: 0 4px; }
  .home-code-tabs > .code-tab { padding: 0 5px; }
  .home-code-tabs > .code-tab[aria-selected=true]::after { right: 5px; left: 5px; }
  .home-code-head > .home-copy { padding: 0 8px; }
  .home-faq { grid-template-columns: minmax(0, 1fr); }
  .card.home-cta { padding: 32px 24px; }
  .home-cta .btn { flex: 1 1 auto; }
}