.model-section, .workflow {
  color:var(--ink);
}
.model-section {
  display:flex; flex-direction:column; align-items:center; gap:64px;
  padding:64px 32px; text-align:center;
  scroll-margin-block-start:32px;
}
.model-intro { width:min(1280px,100%); display:grid; justify-items:center; gap:96px; }
.model-intro h2 {
  max-width:672px;
}
.model-settings, .workflow-recording {
  display:block; width:var(--film-width,100%); height:auto;
  aspect-ratio:auto var(--film-ratio); object-fit:contain; background:transparent;
  max-width:calc((100svh - var(--nav-height) - var(--film-clearance,24px)) * var(--film-ratio));
}
.model-settings {
  --film-width:min(100%,clamp(480px,45.46%,582px)); --film-ratio:calc(1440 / 1172);
  border-radius:1.5% / 1.85%;
  box-shadow:0 0 0 1px #0002,0 8px 36px -20px #0004;
}
.model-section>p,.workflow figcaption { margin:0; font-size:var(--type-body); line-height:1.6; color:var(--muted); text-wrap:pretty; }
.model-section>p { width:min(36em,100%); }
.model-intro+p { font-size:var(--type-lead); line-height:1.5; color:var(--ink); }
.provider-groups,.provider-groups ul { list-style:none; padding:0; margin:0; }
.provider-groups { display:grid; width:min(768px,100%); grid-template-columns:1fr 1fr; gap:32px 8px; }
.provider-groups>li { display:flex; flex-direction:column; align-items:center; gap:16px; padding:32px; background:#0000000a; border-radius:32px; }
@supports (corner-shape:squircle) { .provider-groups>li { border-radius:64px; corner-shape:squircle; } }
.provider-groups h3,.provider-groups ul { font-size:var(--type-body); line-height:1.5; }
.provider-groups h3 { margin:0; font-weight:600; }
.provider-groups ul { display:grid; gap:4px; color:var(--muted); }
.workflow { display:grid; justify-items:center; padding:0 32px 32px; }
.workflow>header,.workflow-demo { width:min(1024px,100%); }
.workflow>header { padding:160px 0 64px; container-type:inline-size; }
.workflow h2 { font-size:min(var(--type-section),10.2cqi); }
.workflow h2 span { display:inline-block; }
.workflow-demo { margin:0; min-width:0; }
.workflow-recording {
  --film-ratio:1.6; --film-clearance:48px; margin-inline:auto;
  border-radius:1% / 1.6%; box-shadow:0 0 0 1px #0002, 0 12px 40px -24px #0004;
}
.workflow figcaption { display:grid; margin:32px auto 0; max-width:720px; text-align:center; }
.workflow figcaption span { grid-area:1/1; }
.workflow-answer, .workflow-demo[data-answered] .workflow-question { visibility:hidden; opacity:0; }
.workflow-demo[data-answered] .workflow-answer { visibility:visible; opacity:1; color:var(--ink); }
@media(prefers-reduced-motion:no-preference) {
  .workflow figcaption span { transition:opacity .2s ease-out; }
}
@media(max-width:767px) {
  .model-section { padding:80px 16px 40px; gap:40px; scroll-margin-block-start:0; }
  .model-intro { gap:32px; }
  .model-section>p { text-align:start; }
  .provider-groups>li { padding:24px 12px; }
  .workflow { padding:0 16px 24px; }
  .workflow>header { padding:80px 0 40px; }
  .workflow figcaption { margin-top:24px; text-align:start; }
}

@media (max-width:767px), (orientation:landscape) and (pointer:coarse) and (max-height:560px) {
  .model-settings,.workflow-recording {
    --film-width:100%; --film-ratio:calc(4 / 3); --film-clearance:24px;
    border-radius:4px;
  }
}