/* Page composition only. Markup is synced from studio.html; the illustrations
   retain their shared geometry, tokens, interactions and reduced-motion states. */
.approach-product-chapters { --ap-feature-padding:calc(var(--ap-chapter-space) * .375); --ap-grid-gap:calc(2 * var(--ap-grid-inset)); margin-top:var(--ap-chapter-space); padding-top:0; border-top:0; border-bottom:1px solid var(--color-structure); }
.approach-product-chapters .home-journey-chapter { padding-block:var(--ap-feature-padding); scroll-margin-top:96px; }
.approach-product-chapters .home-journey-chapter:first-child { padding-top:var(--ap-feature-padding); }
.approach-product-chapters .home-journey-chapter + .home-journey-chapter { border-top:0; margin-top:calc(var(--ap-chapter-space) / 2); }
.approach-product-chapters .home-journey-chapter:not(:last-child) { border-bottom:1px solid var(--color-structure); }
.approach-product-chapters + .approach-outcomes { margin-top:0; }
.approach-product-chapters .home-section-title { margin:0; font-family:var(--font-display); font-size:clamp(32px,2.6vw,36px); font-weight:400; line-height:1.2; letter-spacing:-.02em; text-wrap:balance; }
.approach-product-chapters .home-section-copy { margin:var(--space-4) 0 0; max-width:48ch; color:var(--text-secondary); font-size:var(--type-size-body-large); line-height:var(--type-leading-body); text-wrap:pretty; }
.approach-product-chapters .home-legacy-anchor { display:block; height:0; scroll-margin-top:96px; }
.approach-product-chapters .home-create-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:var(--space-16); align-items:center; }
.approach-product-chapters .home-create-copy .home-section-copy { max-width:40ch; }
.approach-product-chapters :is(.home-workflow-capture,.home-workspace-capture) { min-width:0; margin:0; }
.approach-product-chapters .home-library-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:var(--space-16); align-items:center; }
.approach-product-chapters .home-library-copy .home-section-title { max-width:22ch; }
.approach-product-chapters .home-product-canvas { box-sizing:border-box; }
.approach-product-chapters .home-enterprise-control--split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:var(--space-16); align-items:center; }
.approach-product-chapters .home-enterprise-intro { display:block; min-width:0; }
.approach-product-chapters .home-enterprise-intro .home-section-title { max-width:23ch; }
.approach-page .approach-product-chapters #repeat-production .home-production-flow { margin:0; min-width:0; max-width:none; }
.approach-product-chapters .home-journey-link { display:inline-flex; align-items:center; gap:10px; min-height:44px; margin-top:var(--space-5); color:var(--text-primary); font-size:14px; font-weight:500; text-decoration:none; }
.approach-product-chapters .home-journey-link:focus-visible { outline:2px solid currentColor; outline-offset:5px; }
.approach-product-chapters :is(.home-studio-compact,.home-agent-note,.home-production-plugins--preserved) { display:none; }
/* One ruled frame: chapter seams terminate at the page rails. */
.approach-product-chapters .home-journey-chapter { position:relative; }
.approach-product-chapters .home-journey-chapter::before {
  content:""; position:absolute; top:0; inset-inline:0;
  border-top:1px solid var(--color-structure); pointer-events:none;
}
.approach-product-chapters .home-chapter-label {
  display:inline-flex; align-items:center; gap:var(--space-2);
  color:var(--color-text-supporting);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:var(--category-label-type-size); font-weight:400;
  letter-spacing:.04em; text-transform:uppercase;
}
.approach-product-chapters .home-chapter-label::before {
  content:""; flex:none; width:6px; height:6px;
  background:var(--color-accent-solid);
}
@media(min-width:1081px) {
  .approach-product-chapters .home-journey-chapter > .stack-inner { position:static; }
  .approach-product-chapters .home-journey-chapter::after,
  .approach-product-chapters .home-journey-chapter > .stack-inner::after {
    content:""; position:absolute; z-index:1; top:-3px;
    width:7px; height:7px; box-sizing:border-box;
    border:1px solid var(--color-structure); background:var(--color-bg-page);
    pointer-events:none;
  }
  .approach-product-chapters .home-journey-chapter::after { left:-3px; }
  .approach-product-chapters .home-journey-chapter > .stack-inner::after { right:-3px; }
  .approach-product-chapters :is(.home-create-layout,.home-library-layout,.home-enterprise-control--split) {
    position:relative; padding-inline:var(--ap-grid-inset); gap:var(--ap-grid-gap);
    grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  }
  .approach-product-chapters :is(.home-create-layout,.home-library-layout,.home-enterprise-control--split)::before {
    content:""; position:absolute; top:calc(-1 * var(--ap-feature-padding)); bottom:calc(-1 * var(--ap-feature-padding));
    left:calc(var(--ap-grid-inset) + (100% - 2 * var(--ap-grid-inset) - var(--ap-grid-gap)) * .4 + var(--ap-grid-inset));
    border-left:1px solid var(--color-structure); pointer-events:none;
  }
  .approach-product-chapters .home-library-layout { grid-template-columns:minmax(0,3fr) minmax(0,2fr); }
  .approach-product-chapters .home-library-layout::before {
    left:calc(var(--ap-grid-inset) + (100% - 2 * var(--ap-grid-inset) - var(--ap-grid-gap)) * .6 + var(--ap-grid-inset));
  }
  .approach-page .approach-product-chapters .home-illustration-surface,
  .approach-page .approach-product-chapters #repeat-production .home-production-flow.home-illustration-surface {
    border-radius:0;
  }
}
/* Reserve the logo-rule overhang before the separate feature-group pause. */
@media(min-width:1025px) {
  .approach-page .approach-ai-intro > .home-customer-stories { padding-bottom:var(--space-3); }
}
/* Gray fills each ruled media cell; the artwork retains its own breathing room. */
@media(min-width:1081px) {
  .approach-product-chapters :is(.home-create-layout,.home-library-layout,.home-enterprise-control--split) {isolation:isolate}
  .approach-product-chapters :is(.home-create-layout,.home-library-layout,.home-enterprise-control--split)::after {
    content:"";position:absolute;z-index:-1;pointer-events:none;
    top:calc(-1 * var(--ap-feature-padding));
    bottom:calc(-1 * var(--ap-feature-padding));
    right:0;
    width:calc((100% - 2 * var(--ap-grid-inset) - var(--ap-grid-gap)) * .6 + 2 * var(--ap-grid-inset));
    background-color:var(--color-bg-surface);
    background-image:radial-gradient(circle,#dededb .65px,transparent .85px);
    background-size:16px 16px;
  }
  .approach-product-chapters .home-library-layout::after {left:0;right:auto}
  .approach-page .approach-product-chapters .home-illustration-surface,
  .approach-page .approach-product-chapters #repeat-production .home-production-flow.home-illustration-surface {background:transparent}
}
/* One frame size for the three desktop chapters. Artwork keeps its native ratio. */
@media(min-width:1081px) {
  .approach-product-chapters .home-illustration-surface { position:relative; display:grid; align-items:center; aspect-ratio:3/2; min-height:0; }
  .approach-product-chapters .home-workflow-capture > .home-studio-vignette { width:100%; }
  .approach-product-chapters .home-product-canvas > [data-library-collection] { width:max(520px,calc(100% * 700 / 536 * 2 / 3)); max-width:100%; margin-inline:auto; }
  .approach-product-chapters [data-library-collection] > div[style] { padding-bottom:0!important; }
  .approach-product-chapters .lc-playback { position:absolute; right:24px; bottom:8px; padding:0; min-height:0; }
  .approach-product-chapters .gsp-playback { position:absolute; right:24px; bottom:8px; margin:0; }
}
@media(min-width:901px) and (max-width:1080px) {
  .approach-page #studio-workflow .home-create-layout .home-faux-studio.has-stageshow-motion { aspect-ratio:540/420; }
}
@media(max-width:1080px) {
  .approach-product-chapters .home-enterprise-control--split { grid-template-columns:1fr; gap:var(--space-8); }
  .approach-page .approach-product-chapters #repeat-production .home-production-flow { max-width:760px; margin-inline:auto; }
  .approach-product-chapters .home-library-layout { display:flex; flex-direction:column; gap:var(--space-8); align-items:stretch; }
  .approach-product-chapters .home-library-copy { order:-1; }
}
@media(max-width:900px) {
  .approach-product-chapters .home-create-layout { grid-template-columns:1fr; gap:var(--space-8); }
  .approach-product-chapters .home-create-copy .home-section-copy { max-width:48ch; }
  .approach-product-chapters .home-studio-vignette { display:none; }
  .approach-product-chapters .home-studio-compact { display:block; }
  .approach-product-chapters .home-studio-stage { position:relative; min-width:0; padding:var(--space-6); background:var(--launch-surface); border-radius:var(--radius-stage); }
  .approach-product-chapters .home-studio-workspace { position:relative; width:82%; }
  .approach-product-chapters .home-studio-viewport { position:relative; aspect-ratio:8/5; overflow:hidden; background:var(--color-bg-inverse); border-radius:var(--radius-media); }
  .approach-product-chapters .home-studio-viewport video { display:block; width:100%; height:auto; aspect-ratio:8/5; }
  .approach-product-chapters .home-studio-library { position:relative; width:46%; margin:-110px 0 0 auto; padding:12px; background:var(--color-bg-page); border-radius:var(--radius-card); box-shadow:var(--gi-shadow); }
  .approach-product-chapters .home-native-crop { position:relative; overflow:hidden; aspect-ratio:var(--crop-w)/var(--crop-h); }
  .approach-product-chapters .home-native-crop img { position:absolute; display:block; max-width:none; width:calc(100% * var(--source-w,3200) / var(--crop-w)); height:auto; left:calc(-100% * var(--crop-x) / var(--crop-w)); top:calc(-100% * var(--crop-y) / var(--crop-h)); }
  .approach-product-chapters .home-studio-library-views { margin-top:8px; }
  .approach-product-chapters .home-studio-toggle { position:absolute; left:16px; bottom:16px; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:var(--color-bg-page); color:var(--text-primary); cursor:pointer; }
  .approach-product-chapters .home-studio-toggle svg { width:16px; height:16px; }
  .approach-product-chapters .home-studio-toggle .home-icon-play { display:none; }
  .approach-product-chapters .home-studio-toggle[data-state=paused] .home-icon-play { display:block; }
  .approach-product-chapters .home-studio-toggle[data-state=paused] .home-icon-pause { display:none; }
  .approach-product-chapters .home-studio-toggle:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
  .approach-product-chapters .home-agent-note { display:flex; gap:var(--space-8); margin-top:var(--space-6); padding-top:var(--space-5); border-top:1px solid var(--ap-line); font-size:14px; line-height:1.6; }
  .approach-product-chapters .home-agent-note p { margin:0; }
  .approach-product-chapters .home-agent-note strong { font-weight:500; color:var(--text-primary); }
  .approach-product-chapters .home-agent-note a { flex:none; align-self:start; margin:0; }
  .approach-product-chapters .home-enterprise-intro { grid-template-columns:1fr; gap:var(--space-4); }
  .approach-product-chapters .home-production-plugins { display:block; margin-top:var(--space-12); padding-top:var(--space-6); border-top:1px solid var(--ap-line); }
  .approach-product-chapters .home-production-plugins h3 { font-size:var(--type-size-body-large); line-height:1.4; font-weight:500; margin:0; }
  .approach-product-chapters .home-production-plugins p { margin:8px 0 0; font-size:14px; line-height:1.5; }
  .approach-product-chapters .home-plugin-brands { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:var(--space-4); }
  .approach-product-chapters .home-plugin-brands a { display:flex; align-items:center; gap:8px; min-height:44px; color:var(--text-primary); font-size:14px; text-decoration:none; }
  .approach-product-chapters .home-plugin-brands img { width:24px; height:24px; object-fit:contain; }
  .approach-product-chapters .home-connected-links { display:flex; flex-wrap:wrap; gap:8px 20px; }
  .approach-product-chapters .home-connected-links .home-journey-link { margin-top:var(--space-2); }
}
@media(max-width:720px) {
  .approach-product-chapters .home-section-copy { font-size:var(--type-size-body); }
  .approach-product-chapters .home-enterprise-intro .home-section-title { font-size:var(--type-size-section-compact); }
  .approach-product-chapters .home-studio-stage { padding:var(--space-4); }
  .approach-product-chapters .home-studio-workspace { width:100%; }
  .approach-product-chapters .home-studio-library { box-sizing:border-box; width:100%; margin:16px 0 0; box-shadow:none; }
  .approach-product-chapters .home-studio-viewport { aspect-ratio:992/561; }
  .approach-product-chapters .home-studio-viewport video { position:absolute; max-width:none; width:161.290323%; left:-26.71371%; top:-34.759358%; }
  .approach-product-chapters .home-agent-note { display:block; }
  .approach-product-chapters .home-agent-note a { margin-top:var(--space-2); }
}

/* Soft brand actions distinguish chapter exploration from the primary CTA. */
.approach-product-chapters .home-chapter-button.btn-secondary {
  background:var(--color-action-accent-soft);
  border-color:transparent;
  color:var(--color-action-accent-soft-text);
}
@media(hover:hover) and (pointer:fine) {
  .approach-product-chapters .home-chapter-button.btn-secondary:hover:where(:not(:disabled):not([aria-disabled="true"])) {
    background:var(--color-action-accent-soft-hover);
  }
}
.approach-product-chapters .home-chapter-button.btn-secondary:active:not(:disabled):not([aria-disabled="true"]) {
  background:var(--color-action-accent-soft-pressed);
  border-color:transparent;
}

/* Card alignment carries the one-setup/many-products relationship here. */
.approach-page .approach-product-chapters #repeat-production .gsp-connections {
  display:none;
}

/* Center the overlapping setup and image grid as one composition. */
@container (min-width:580px) {
  .approach-page .approach-product-chapters #repeat-production .home-production-flow[data-production-layout=split] :is(.gsp [data-layout=wide], .gsp-still) {
    & :is(.gsp-template, .gsp-output-matrix) { transform:translate(-197px,13px); }
    & .gsp-template { left:640px; top:12px; z-index:2; }
    & .gsp-column-headings { display:none; }
    & .gsp-template > .gsp-eyebrow { display:block; margin-bottom:4px; font-size:11px; line-height:16px; }
  }
}

/* Render is an explicit step in this illustrative, local workflow. */
.approach-page #production-illustration[data-production-layout=split] {
  & .gsp-render-action {
    display:flex; align-items:center; justify-content:center; width:100%;
    min-height:32px; margin-top:12px; padding:6px 10px; border:0;
    border-radius:var(--gi-control-radius,6px); background:var(--gsp-ink);
    color:#fff; font:500 12px/20px var(--gi-font,Inter,sans-serif); cursor:pointer;
  }
  & .gsp-render-action:is(:disabled,[aria-disabled=true]) { cursor:default; }
  & .gsp-render-action:focus-visible { outline:2px solid var(--gsp-ink); outline-offset:3px; }
  & .gsp [data-layout=compact] .gsp-template { height:244px; }
  & .gsp [data-layout=compact] .gsp-output-matrix { top:268px; }
  & .gsp [data-layout=compact] .gsp-render-action { min-height:46px; }
  & .gsp-output-matrix[data-working] .gsp-product-column .gsp-image-well { opacity:1; }
  & .gsp-product-column[data-loading] .gsp-image-well { background:#e5e6e7; animation:none; }
  & .gsp-product-column[data-loading] .gsp-image-well > * { opacity:0; }
  & .gsp-product-column[data-loading] .gsp-image-well::after {
    content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 25%,#ffffff80 50%,transparent 75%);
    background-size:200% 100%; animation:gsp-render-skeleton 1.3s ease-in-out infinite;
  }
}
@container(max-width:579px) {
  .approach-page #production-illustration[data-production-layout=split] {
    & .gsp-still { aspect-ratio:358/654; }
    & .gsp-still .gsp-workspace { height:654px; }
    & .gsp-still .gsp-template { height:244px; }
    & .gsp-still .gsp-output-matrix { top:268px; }
    & .gsp-still .gsp-render-action { min-height:46px; }
  }
}
@keyframes gsp-render-skeleton { from { background-position:200% 0; } to { background-position:-200% 0; } }
@media(prefers-reduced-motion:reduce) {
  .approach-page #production-illustration .gsp-product-column[data-loading] .gsp-image-well::after { animation:none; }
}