/* AI 影像需求：a screening room that explains itself.
   Hero comparison you can drag → three explained steps → expanding benefit cards → the finished film → notes as cards.
   No pinned scroll sections; every moving value is eased. Corners stay square site-wide (editorial.css). One accent: monitor blue. */
.ai-film-page {
  --display: var(--body);
  --signature: var(--body);
  --utility: var(--body);
  --af-text: 1rem;
  --af-small: .875rem;
  --af-caption: .8125rem;
  --af-stage: #021526;
  --af-stage-deep: #010c16;
  --af-card: #071d31;
  --af-ivory: #e2e2b6;
  --af-paper: #f7f8f2;
  --af-ink: #021526;
  --af-sapphire: #03346e;
  --af-signal: #6eacda;
  --af-muted: #4b5b67;
  --af-muted-stage: #9fb1be;
  --af-rule: #d3d9d6;
  --af-rule-stage: rgb(226 226 182 / .14);
  --af-gutter: clamp(1.25rem, 4.5vw, 6rem);
  --af-ease: cubic-bezier(.16, 1, .3, 1);
  --af-ease-io: cubic-bezier(.65, 0, .35, 1);
  --af-stage-h: calc(100svh - var(--header-h));
  background: var(--af-stage);
  color: var(--af-ivory);
  font-family: var(--body);
  font-size: var(--af-text);
  line-height: 1.85;
}
.ai-film-page::before,.ai-film-page::after { display: none; }
:where(.ai-film-page main) :where(h1,h2,h3,p,ol,ul,dl,dd,figure) { margin: 0; }
.ai-film-page main :is(a,button,summary):focus-visible { outline: 2px solid var(--af-signal); outline-offset: 4px; }
.af-shell { width: min(80rem, calc(100% - 2 * var(--af-gutter))); margin-inline: auto; }

/* Shared type and controls */
.ai-film-page main :is(h1,h2) { font-family: var(--body); font-weight: 400; letter-spacing: -.035em; line-height: 1.24; }
.ai-film-page main h2 { font-size: clamp(2.25rem, 4.2vw, 4rem); }
.af-label { display: flex; align-items: center; gap: .85rem; font-size: var(--af-small); font-weight: 500; letter-spacing: .1em; color: var(--af-muted-stage); }
.af-label::before { content: ""; width: 1.75rem; height: 1px; background: var(--af-signal); }
.af-head { display: grid; gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.af-head h2 { margin-top: 1.25rem; }
.af-head--split { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: end; gap: 1.5rem 4rem; }
.af-head--split > p { justify-self: end; max-width: 26rem; font-size: 1rem; line-height: 1.9; color: var(--af-muted-stage); text-wrap: pretty; }
.af-button { display: inline-flex; align-items: center; gap: 1rem; min-height: 3.5rem; padding: .5rem 1.4rem .5rem .5rem; border: 1px solid rgb(226 226 182 / .45); color: var(--af-ivory); font-size: 1rem; font-weight: 600; text-decoration: none; transition: background .35s, color .35s, border-color .35s; }
.af-button__icon { position: relative; width: 2.5rem; height: 2.5rem; background: var(--af-ivory); color: var(--af-stage); transition: background .35s, color .35s; }
.af-button__icon::before,.rx__open span::before,.af-voice i::before { content: ""; position: absolute; inset: 0; margin: auto; width: .6rem; height: .72rem; background: currentColor; clip-path: polygon(0 0,100% 50%,0 100%); transform: translateX(12%); }
.af-button:hover { background: var(--af-ivory); color: var(--af-stage); border-color: var(--af-ivory); }
.af-button:hover .af-button__icon { background: var(--af-stage); color: var(--af-ivory); }
.af-button--solid { gap: 1.75rem; padding: .5rem .5rem .5rem 1.5rem; background: var(--af-ivory); color: var(--af-stage); border-color: var(--af-ivory); }
.af-button--solid > span { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; background: var(--af-stage); color: var(--af-ivory); font-weight: 400; transition: transform .45s var(--af-ease); }
.af-button--solid:hover { background: #f1f1d2; color: var(--af-stage); }
.af-button--solid:hover > span { transform: translateY(3px); }
.af-button--solid[target="_blank"]:hover > span { transform: translate(3px, -3px); }
.af-link { display: inline-flex; align-items: center; gap: .6rem; padding-block: .45rem; border-bottom: 1px solid rgb(226 226 182 / .35); color: var(--af-ivory); font-weight: 600; text-decoration: none; transition: border-color .35s, gap .45s var(--af-ease); }
.af-link:hover { gap: .9rem; border-color: var(--af-ivory); }
.af-tag { position: absolute; z-index: 2; top: .9rem; left: .9rem; padding: .45rem .65rem; background: rgb(2 21 38 / .8); color: var(--af-ivory); font-size: .75rem; font-weight: 500; letter-spacing: .1em; line-height: 1; }
.af-tag--ai { background: var(--af-ivory); color: var(--af-stage); }

/* ---------- Hero: drag to compare ---------- */
.hx { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(2.5rem, 6vw, 7rem); min-height: var(--af-stage-h); padding: clamp(2rem, 4vw, 3.5rem) var(--af-gutter); background: radial-gradient(110% 80% at 72% 40%, #062440 0%, var(--af-stage) 62%); }
.hx__copy { max-width: 38rem; }
.af-nb { white-space: nowrap; }
.hx__title { margin-top: 1.5rem; font-size: clamp(2.75rem, 5.2vw, 5.4rem); color: var(--af-ivory); }
.hx__title span { display: block; }
.hx__lead { max-width: 31rem; margin-top: 1.75rem; font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.9; color: var(--af-muted-stage); text-wrap: pretty; }
.hx__legend { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0 2.5rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--af-rule-stage); }
.hx__legend dt { font-size: .75rem; letter-spacing: .14em; color: var(--af-muted-stage); }
.hx__legend div:first-child dt { color: var(--af-signal); }
.hx__legend dd { margin-top: .4rem; font-size: .9375rem; color: var(--af-ivory); }
.hx__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2.25rem; }

.cmp { --ch: min(calc(var(--af-stage-h) - 11rem), 44rem); width: calc(var(--ch) * 9 / 16); justify-self: center; }
.cmp__screen { position: relative; height: var(--ch); overflow: hidden; background: #0b1b28; box-shadow: 0 0 0 1px rgb(226 226 182 / .16); cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cmp__layer { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cmp__layer--real { clip-path: inset(0 calc(100% - var(--wipe)) 0 0); }
.cmp__divider { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--wipe); width: 2px; margin-left: -1px; background: var(--af-ivory); pointer-events: none; }
.cmp__divider span { position: absolute; top: 50%; left: 50%; width: 2.75rem; height: 2.75rem; background: var(--af-ivory); transform: translate(-50%, -50%); transition: transform .4s var(--af-ease); }
.cmp__divider span::before,.cmp__divider span::after { content: ""; position: absolute; top: 50%; width: .38rem; height: .58rem; margin-top: -.29rem; background: var(--af-stage); }
.cmp__divider span::before { left: .72rem; clip-path: polygon(100% 0,0 50%,100% 100%); }
.cmp__divider span::after { right: .72rem; clip-path: polygon(0 0,100% 50%,0 100%); }
.cmp__screen:hover .cmp__divider span,.cmp__screen.is-dragging .cmp__divider span { transform: translate(-50%, -50%) scale(1.1); }
.cmp__tag { position: absolute; z-index: 3; top: .85rem; padding: .45rem .65rem; background: rgb(2 21 38 / .8); color: var(--af-ivory); font-size: .75rem; letter-spacing: .1em; line-height: 1; pointer-events: none; transition: opacity .45s; }
.cmp__tag--real { left: .85rem; }
.cmp__tag--ai { right: .85rem; background: var(--af-ivory); color: var(--af-stage); }
.cmp__screen[data-side="ai"] .cmp__tag--real,.cmp__screen[data-side="real"] .cmp__tag--ai { opacity: 0; }
.cmp__range { position: absolute; bottom: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cmp__screen:has(.cmp__range:focus-visible) { outline: 2px solid var(--af-signal); outline-offset: 4px; }
.cmp__bar { display: flex; align-items: center; gap: .6rem; margin-top: .85rem; }
.cmp__seg { --seg: 1; position: relative; display: grid; flex: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: .25rem; border: 1px solid rgb(226 226 182 / .18); background: rgb(2 21 38 / .5); }
.cmp__seg-thumb { position: absolute; top: .25rem; bottom: .25rem; left: .25rem; width: calc((100% - .5rem) / 3); background: var(--af-ivory); transform: translateX(calc(var(--seg) * 100%)); transition: transform .6s var(--af-ease); }
.cmp__seg button { position: relative; z-index: 1; min-height: 2.5rem; padding: .35rem .4rem; border: 0; background: transparent; color: var(--af-muted-stage); font: 500 .8125rem/1.2 var(--body); white-space: nowrap; cursor: pointer; transition: color .45s; }
.cmp__seg button:hover { color: var(--af-ivory); }
.cmp__seg button[aria-pressed="true"] { color: var(--af-stage); }
.cmp__pause { position: relative; flex-shrink: 0; width: 3.1rem; height: 3.1rem; padding: 0; border: 1px solid rgb(226 226 182 / .18); background: rgb(2 21 38 / .5); color: var(--af-ivory); cursor: pointer; transition: border-color .3s; }
.cmp__pause:hover { border-color: var(--af-ivory); }
.cmp__pause i { position: absolute; inset: 0; margin: auto; width: .55rem; height: .7rem; background: currentColor; clip-path: polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0); }
.cmp__pause[aria-pressed="true"] i { width: .6rem; clip-path: polygon(0 0,100% 50%,0 100%); transform: translateX(10%); }
.cmp__note { margin-top: .8rem; font-size: var(--af-caption); line-height: 1.7; color: var(--af-muted-stage); }

/* ---------- How it works: three explained cards ---------- */
.sx { padding-block: clamp(6rem, 11vw, 9rem); background: var(--af-stage); border-top: 1px solid var(--af-rule-stage); }
.sx__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); padding: 0; list-style: none; }
.af-card { display: flex; flex-direction: column; background: var(--af-card); border: 1px solid var(--af-rule-stage); transition: transform .7s var(--af-ease), border-color .45s; }
.af-card:hover { transform: translateY(-6px); border-color: rgb(226 226 182 / .32); }
.af-card__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #0b1b28; }
.af-card__media :is(img,video) { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transition: transform 1.4s var(--af-ease), opacity .5s; }
.af-card:hover .af-card__media img { transform: scale(1.05); }
.af-card__body { display: flex; flex: 1; flex-direction: column; padding: 1.75rem 1.75rem 1.5rem; }
.af-card h3 { font-family: var(--body); font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.35; color: var(--af-ivory); }
.af-card__body > p:not(.af-card__foot) { margin: .9rem 0 1.75rem; font-size: var(--af-text); line-height: 1.85; color: var(--af-muted-stage); text-wrap: pretty; }
.af-card__foot { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--af-rule-stage); font-size: .8125rem; line-height: 1.6; color: var(--af-ivory); }
.af-card__foot b { font-weight: 500; color: var(--af-signal); }
.af-card--voice [data-voice] video { opacity: 0; }
.af-card--voice [data-voice][data-active="ai"] [data-voice-ai],.af-card--voice [data-voice][data-active="real"] [data-voice-real] { opacity: 1; }
.af-voice { position: absolute; z-index: 2; inset: auto 0 0; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: .5rem; padding: 3.5rem .9rem .9rem; background: linear-gradient(to top, rgb(2 21 38 / .94) 45%, rgb(2 21 38 / 0)); }
.af-voice button { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.6rem; padding: .3rem .85rem .3rem .3rem; border: 1px solid rgb(226 226 182 / .4); background: rgb(2 21 38 / .6); color: var(--af-ivory); font: 600 .8125rem/1 var(--body); white-space: nowrap; cursor: pointer; transition: background .35s, color .35s, border-color .35s; }
.af-voice button:hover { border-color: var(--af-ivory); }
.af-voice i { position: relative; width: 1.95rem; height: 1.95rem; background: rgb(226 226 182 / .14); transition: background .35s; }
.af-voice button[aria-pressed="true"] { background: var(--af-ivory); color: var(--af-stage); border-color: var(--af-ivory); }
.af-voice button[aria-pressed="true"] i { background: var(--af-stage); color: var(--af-ivory); }
.af-voice button[aria-pressed="true"] i::before { width: .5rem; clip-path: polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0); transform: none; }
.af-voice__wave { position: relative; height: 1.9rem; margin-left: .35rem; overflow: hidden; }
.af-voice__wave svg { display: block; width: 100%; height: 100%; }
.af-voice__wave path { fill: none; stroke: var(--af-signal); stroke-width: .55; opacity: .75; }
.af-voice__wave i { position: absolute; inset: 0 auto 0 0; width: calc(var(--vp, 0) * 100%); height: auto; background: rgb(226 226 182 / .14); border-right: 1px solid var(--af-ivory); }
.af-voice__wave i::before { display: none; }

/* ---------- Benefits: cards that open as you point at them ---------- */
.bx { padding-block: clamp(6rem, 11vw, 9rem); background: var(--af-stage); }
.bx__row { display: flex; gap: .75rem; height: clamp(30rem, 72vh, 38rem); }
.bn { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: var(--af-card); border: 1px solid var(--af-rule-stage); cursor: pointer; transition: flex-grow .9s var(--af-ease-io), border-color .45s; }
.bn.is-active { flex-grow: 3.2; border-color: rgb(226 226 182 / .3); cursor: default; }
.bn__media { position: absolute; inset: 0; overflow: hidden; transform: scale(1.06); opacity: .42; filter: saturate(.55); transition: transform 1.6s var(--af-ease), opacity .8s, filter .8s; }
.bn.is-active .bn__media { transform: none; opacity: 1; filter: none; }
.bn__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.bn__media--pair { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); gap: 2px; background: var(--af-rule-stage); }
.bn__media--pair img { min-width: 0; min-height: 0; }
.bn::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgb(1 12 22 / .96) 0%, rgb(1 12 22 / .6) 42%, rgb(1 12 22 / .05) 78%); pointer-events: none; }
.bn__spine { padding: .5rem; border: 0; background: transparent; font-family: var(--body); font-weight: 500; cursor: pointer; position: absolute; z-index: 2; bottom: 1.75rem; left: 50%; transform: translateX(-50%); writing-mode: vertical-rl; font-size: 1.125rem; letter-spacing: .22em; color: var(--af-ivory); white-space: nowrap; transition: opacity .45s .2s; }
.bn.is-active .bn__spine { opacity: 0; transition-delay: 0s; }
.bn__body { position: absolute; z-index: 2; left: 0; bottom: 0; width: min(31rem, 100%); padding: clamp(1.75rem, 3vw, 2.5rem); opacity: 0; transform: translateY(1.25rem); visibility: hidden; transition: opacity .45s, transform .6s var(--af-ease), visibility 0s .6s; }
.bn.is-active .bn__body { opacity: 1; transform: none; visibility: visible; transition: opacity .7s .35s, transform .9s .35s var(--af-ease), visibility 0s; }
.bn__body h3 { margin: 0; color: var(--af-ivory); font: 500 clamp(1.625rem, 2.4vw, 2.25rem)/1.3 var(--body); letter-spacing: -.025em; text-align: left; }
.bn__body p { max-width: 28rem; margin-top: .9rem; font-size: 1rem; line-height: 1.85; color: #c5d0d7; text-wrap: pretty; }
.bn__flow { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.25rem; padding: 0; list-style: none; }
.bn__flow li { padding: .4rem .6rem; border: 1px solid rgb(226 226 182 / .3); font-size: .8125rem; color: var(--af-ivory); }
.bn__waves { position: absolute; top: 1.25rem; left: 1.25rem; right: 1.25rem; display: grid; gap: .6rem; padding: 1rem; background: rgb(2 21 38 / .78); }
.bn__waves p { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); align-items: center; gap: .75rem; font-size: .75rem; letter-spacing: .1em; color: var(--af-muted-stage); }
.bn__waves svg { width: 100%; height: 1.5rem; }
.bn__waves path { fill: none; stroke: var(--af-muted-stage); stroke-width: .5; }
.bn__waves p + p { color: var(--af-ivory); }
.bn__waves p + p path { stroke: var(--af-signal); }

/* ---------- The finished film ---------- */
.rx { padding-block: clamp(6rem, 11vw, 9rem); background: var(--af-stage-deep); }
.rx__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3rem clamp(3rem, 8vw, 8rem); }
.rx__copy { display: grid; justify-items: start; gap: 1.5rem; max-width: 34rem; }
.rx__copy h2 { margin-top: -.25rem; }
.rx__lead { font-size: 1.0625rem; line-height: 1.9; color: var(--af-muted-stage); text-wrap: pretty; }
.rx__spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; width: 100%; border-top: 1px solid var(--af-rule-stage); }
.rx__spec div { padding-block: 1rem; border-bottom: 1px solid var(--af-rule-stage); }
.rx__spec dt { font-size: .75rem; letter-spacing: .14em; color: var(--af-muted-stage); }
.rx__spec dd { margin-top: .35rem; font-size: .9375rem; color: var(--af-ivory); }
.rx__copy .af-button { margin-top: .5rem; }
.rx__film { --fh: min(calc(var(--af-stage-h) - 6rem), 44rem); }
.rx__frame { position: relative; height: var(--fh); aspect-ratio: 9 / 16; overflow: hidden; background: #0b1b28; box-shadow: 0 0 0 1px var(--af-rule-stage); transform: scale(var(--fs, 1)); }
.rx__frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.rx__open { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(2 21 38 / 0); transition: background .4s; }
.rx__open span { position: relative; width: 4.5rem; height: 4.5rem; background: var(--af-ivory); color: var(--af-stage); opacity: 0; transform: scale(.9); transition: opacity .4s, transform .6s var(--af-ease); }
.rx__open:is(:hover,:focus-visible) { background: rgb(2 21 38 / .3); }
.rx__open:is(:hover,:focus-visible) span { opacity: 1; transform: none; }

/* ---------- Notes as cards on paper ---------- */
.nx { padding-block: clamp(6rem, 11vw, 9rem); background: var(--af-paper); color: var(--af-ink); }
.nx .af-label { color: var(--af-muted); }
.nx .af-label::before { background: var(--af-sapphire); }
.nx .af-head--split > p { color: var(--af-muted); }
.nx__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 0; list-style: none; }
.nx__card { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: clamp(1.75rem, 3vw, 2.5rem); background: #fff; border: 1px solid var(--af-rule); transition: transform .7s var(--af-ease), border-color .45s; }
.nx__card:hover { transform: translateY(-4px); border-color: rgb(2 21 38 / .35); }
.af-tag--paper { position: static; background: var(--af-ink); color: var(--af-paper); }
.nx__card h3 { font-family: var(--body); font-size: clamp(1.25rem, 1.7vw, 1.4rem); font-weight: 500; letter-spacing: -.01em; line-height: 1.45; }
.nx__card p { font-size: 1rem; line-height: 1.9; color: var(--af-muted); text-wrap: pretty; }
.nx__card a { margin-top: auto; padding-top: .25rem; color: var(--af-sapphire); font-size: .9375rem; text-underline-offset: .2em; }

/* ---------- Close ---------- */
.ex { padding-block: clamp(6rem, 12vw, 10rem) clamp(4rem, 7vw, 6rem); background: var(--af-stage); }
.ex h2 { font-size: clamp(2.5rem, 6vw, 6rem); color: var(--af-ivory); }
.ex__row { display: flex; align-items: end; justify-content: space-between; gap: 2.5rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--af-rule-stage); }
.ex__bring p { font-size: .875rem; color: var(--af-muted-stage); }
.ex__bring ul { display: flex; flex-wrap: wrap; gap: .25rem 0; margin-top: .6rem; padding: 0; list-style: none; font-size: clamp(1.125rem, 1.6vw, 1.375rem); }
.ex__bring li + li::before { content: "＋"; margin-inline: .6rem; color: var(--af-signal); }
.ai-film-page .site-footer { border-top: 1px solid var(--af-rule-stage); }

/* ---------- Player ---------- */
.film-dialog { width: min(43rem, calc(100% - 2rem)); max-width: none; max-height: calc(100dvh - 2rem); margin: auto; padding: 1rem; border: 0; background: #08141e; color: var(--af-ivory); overflow: auto; }
.film-dialog::backdrop { background: rgb(0 8 15 / .94); }
.film-dialog__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: 1rem; }
.film-dialog__bar h2 { font: 600 .95rem/1.6 var(--body); }
.film-dialog__bar h2 span { display: block; margin-top: .15rem; font-size: .72rem; font-weight: 400; color: var(--af-muted-stage); }
.film-dialog__bar button { min-height: 2.75rem; padding: .7rem .9rem; border: 1px solid #4d5d68; background: transparent; color: var(--af-ivory); font: 400 .85rem/1.3 var(--body); white-space: nowrap; cursor: pointer; }
.film-dialog__bar button span { margin-left: .5rem; }
.film-dialog video { display: block; width: auto; max-width: 100%; height: min(75dvh, 48rem); margin-inline: auto; background: black; object-fit: contain; }
.film-player-status { padding-top: .75rem; font-size: .875rem; color: #c6d4de; }
.film-player-status a { margin-left: .5rem; color: var(--af-ivory); }
.ai-film-page:has(.film-dialog[open]) { overflow: hidden; }

/* ---------- Motion (JS on, motion allowed) ---------- */
@keyframes af-rise { from { opacity: 0; transform: translateY(1.5rem); } }
@keyframes af-shutter { from { clip-path: inset(50% 0 50% 0); } to { clip-path: inset(0); } }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html:has(.ai-film-page) { scroll-behavior: smooth; }
  .hx [data-intro] { animation: af-rise 1.1s var(--af-ease) both; }
  .hx .af-label[data-intro] { animation-delay: .05s; }
  .hx__title[data-intro] { animation: none; }
  .hx__title span { animation: af-rise 1.1s var(--af-ease) both; animation-delay: .12s; }
  .hx__title span + span { animation-delay: .24s; }
  .hx__lead[data-intro] { animation-delay: .36s; }
  .hx__legend[data-intro] { animation-delay: .46s; }
  .hx__actions[data-intro] { animation-delay: .56s; }
  .cmp[data-intro] { animation: af-rise 1.1s .2s var(--af-ease) both; }
  .cmp[data-intro] .cmp__screen { animation: af-shutter 1.3s .2s var(--af-ease-io) both; }
  .af-enhanced [data-reveal] { opacity: 0; transform: translateY(2.25rem); transition: opacity .9s var(--d, 0s), transform 1.2s var(--d, 0s) var(--af-ease); }
  .af-enhanced [data-reveal].is-in { opacity: 1; transform: none; }
  .af-card[data-reveal].is-in:hover { transform: translateY(-6px); transition-delay: 0s; }
  .nx__card[data-reveal].is-in:hover { transform: translateY(-4px); transition-delay: 0s; }
}

/* ---------- Tablet & phone ---------- */
@media (max-width: 1100px) {
  .sx__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .af-card--voice { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .af-card--voice .af-card__media { aspect-ratio: auto; min-height: 26rem; }
}
@media (max-width: 1023px) {
  .bx__row { flex-direction: column; height: auto; gap: 1rem; }
  .bn { flex: none; cursor: default; }
  .bn__media { position: relative; height: clamp(16rem, 55vw, 24rem); opacity: 1; filter: none; transform: none; }
  .bn::after { display: none; }
  .bn__spine,.bx__hint { display: none; }
  .bn__body { position: static; width: auto; opacity: 1; transform: none; visibility: visible; }

}
@media (max-width: 900px) {
  .hx { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-block: 2.5rem 4rem; }
  .cmp { --ch: min(70svh, calc((100vw - 2 * var(--af-gutter)) * 16 / 9), 40rem); }
  .af-head--split { grid-template-columns: minmax(0, 1fr); }
  .af-head--split > p { justify-self: start; }
  .rx__grid { grid-template-columns: minmax(0, 1fr); }
  .rx__film { justify-self: center; --fh: min(70svh, calc((100vw - 2 * var(--af-gutter)) * 16 / 9), 40rem); }
  .nx__cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .ai-film-page { --af-gutter: 1.25rem; }
  .hx__title { font-size: clamp(2.2rem, 9.6vw, 3rem); }
  .hx__copy { display: contents; }
  .hx { gap: 0; }
  .hx .af-label { order: 1; }
  .hx__title { order: 2; }
  .hx__lead { order: 3; }
  .cmp { order: 4; margin-top: 1.75rem; }
  .hx__legend { order: 5; }
  .hx__actions { order: 6; }
  .hx__lead { margin-top: 1.25rem; font-size: var(--af-text); line-height: 1.85; }
  .hx__legend { grid-template-columns: minmax(0, 1fr); gap: .75rem; margin-top: 1.5rem; padding-top: 1rem; }
  .hx__legend div { display: flex; align-items: baseline; gap: 1rem; }
  .hx__legend dd { margin-top: 0; font-size: .875rem; }
  .hx__actions { margin-top: 1.75rem; }
  .sx__cards { grid-template-columns: minmax(0, 1fr); }
  .af-card--voice { display: flex; }
  .af-card--voice .af-card__media { aspect-ratio: 1 / 1; min-height: 0; }
  .af-card__body { padding: 1.5rem 1.25rem 1.25rem; }
  .af-card h3 { font-size: 1.375rem; }
  .bn__body { padding: 1.5rem 1.25rem 1.75rem; }
  .bn__body h3 { font-size: 1.5rem; }
  .rx__spec div:nth-child(3) { grid-column: 1 / -1; }
  .ex__row { flex-direction: column; align-items: stretch; gap: 2rem; }
  .af-button--solid { justify-content: space-between; }
  .film-dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); padding: .75rem; }
  .film-dialog video { width: 100%; height: auto; max-height: calc(100dvh - 7.5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-film-page * { scroll-behavior: auto; transition: none !important; animation: none !important; }
}


/* Typography and progressive enhancement, scoped to this page. */
.ai-film-page .page-nav > a,.ai-film-page .page-nav__top,
.ai-film-page .page-header .page-nav__menu a { font-family: var(--body); font-size: var(--af-text); font-weight: 500; }
.ai-film-page .site-footer__col h2 { font-size: var(--af-text); font-weight: 500; }
.ai-film-page .site-footer__col a { font-size: var(--af-text); }
.ai-film-page .site-footer__bar :is(small,p,a,button) { font-family: var(--body); font-size: var(--af-caption); }
.ai-film-page .af-card__foot { font-size: var(--af-small); }
.bn:has(.bn__spine:focus-visible) { outline: 2px solid var(--af-signal); outline-offset: 4px; }
.bx__row:not(.is-enhanced) { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); height: auto; }
.bx__row:not(.is-enhanced) .bn { cursor: default; }
.bx__row:not(.is-enhanced) .bn__media { position: relative; height: 22rem; opacity: 1; filter: none; transform: none; }
.bx__row:not(.is-enhanced) .bn::after,.bx__row:not(.is-enhanced) .bn__spine { display: none; }
.bx__row:not(.is-enhanced) .bn__body { position: static; width: auto; opacity: 1; transform: none; visibility: visible; }
.ex__related { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin-top: 2rem; font-size: var(--af-small); }
.ex__related span { color: var(--af-muted-stage); }
.ex__related a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--af-ivory); text-underline-offset: .3em; }
@media (max-width:700px) { .bx__row:not(.is-enhanced) { grid-template-columns: minmax(0,1fr); } }