/* Landing-page composition. Shared typography and theme values live in site.css. */
h1, h2, h3, h4 { color: var(--ink); }
h1 { font-size: clamp(46px,4.5vw,64px); font-weight: 700; line-height: 1.03; letter-spacing: -.055em; margin: 0 0 28px; }
h2 { font-weight: 700; letter-spacing: -.025em; }
h3 { line-height: 1.25; }
figure { margin: 0; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; min-height: 48px; border: 1px solid var(--border); border-radius: 5px; font-size: 14px; font-weight: 700; }
.button-primary { background: #d39b7b; border-color: #d39b7b; color: #211a16; }
.button-primary:hover { background: #e5ad8e; color: #211a16; }
.button-secondary { background: var(--background); color: var(--ink); }
.button-secondary:hover { border-color: var(--clay); }
.code-sample pre { font: 13px/1.7 var(--font-mono); }
.text-link { color: var(--clay); font-size: 14px; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero { position: relative; overflow: hidden; border-block: 1px solid var(--border); }
.dot-wave { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; pointer-events: none; }
.hero-layout { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 75px; align-items: center; padding-block: 85px 90px; }
.hero-copy { min-width: 0; padding-block: 8px; }
.hero-copy h1 code { font-family: var(--font-mono); font-size: .88em; font-weight: 500; letter-spacing: -.06em; background: color-mix(in srgb, var(--ink) 4%, transparent); padding: 0 .08em; border-radius: 4px; }
.hero-description { max-width: 490px; font-size: 19px; line-height: 1.7; margin: 0 0 29px; }
.install-line { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; padding: 10px 10px 10px 20px; border: 1px solid var(--border); border-radius: 999px; background: var(--code-background); font: 300 14px/1.4 var(--font-mono); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.install-prompt { color: var(--muted); user-select: none; }
.install-line code { min-width: 0; color: var(--body); font: inherit; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.install-line code::-webkit-scrollbar { display: none; }
.copy-icon { position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.copy-icon:hover, .copy-icon:focus-visible { outline: none; color: var(--clay); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.copy-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.copy-icon .icon-done, .copy-icon.copied .icon-copy { display: none; }
.copy-icon.copied .icon-done { display: block; }
.copy-icon::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 4px 8px; border-radius: 4px; background: var(--ink); color: var(--background); font: 12px var(--font-sans); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; }
.copy-icon:hover::after, .copy-icon:focus-visible::after, .copy-icon.copied::after { opacity: 1; }
.hero-demo { min-width: 0; }
.campaign-preview { position: relative; padding-block: 20px; isolation: isolate; }
.campaign-preview > img { position: absolute; height: auto; box-shadow: 0 15px 45px #0004; border-radius: 4px; }
.campaign-preview-artwork { width: 62%; top: 25%; left: 0; transform: rotate(-9deg); }
.campaign-preview-poster { width: 45%; top: 11%; right: 1%; transform: rotate(9deg); }
.hero-video { position: relative; width: 62%; margin-inline: auto; }
.hero-video video { display: block; width: 100%; height: auto; border-radius: 5px; box-shadow: 0 15px 50px #0005; }

.video-sound { position: absolute; right: 10px; top: 10px; display: grid; place-items: center; width: 34px; height: 34px; padding: 7px; border: 1px solid #ffffff30; border-radius: 50%; background: #111821b3; color: #fff; }
.video-sound:hover { background: #111821e6; border-color: #ffffff70; }
.video-sound svg { width: 18px; height: 18px; }
.video-sound[aria-pressed="false"] .sound-enabled, .video-sound[aria-pressed="true"] .sound-muted { display: none; }

/* The preview gallery gives visitors a visual index of the five demos. */
.demo-gallery { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 38px; padding-block: 54px; }
.demo-gallery > a { min-width: 0; display: block; padding: 6px; }
.demo-thumbnail { display: block; position: relative; height: 180px; margin: 0 4px 20px; isolation: isolate; transition: transform .18s ease; }
.demo-thumbnail img { position: absolute; display: block; width: 77%; height: 78%; object-fit: cover; border-radius: 3px; box-shadow: 0 7px 15px #0004; left: 3%; top: 16%; transform: rotate(-7deg); }
.demo-thumbnail img:last-child { left: 19%; top: 5%; transform: rotate(5deg); }
.demo-thumbnail-packaging img { width: 59%; height: 81%; }
.demo-thumbnail-packaging img:nth-child(2) { left: 20%; top: 9%; transform: rotate(-1deg); }
.demo-thumbnail-packaging img:last-child { left: 39%; top: 3%; transform: rotate(8deg); }
.demo-thumbnail-storybook img, .demo-thumbnail-agents img:last-child { width: 66%; height: 88%; }
.demo-thumbnail-storybook img:last-child, .demo-thumbnail-agents img:last-child { left: 29%; top: 2%; }
.demo-thumbnail-title { display: block; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.5; margin-top: 12px; }
.demo-thumbnail-title > span { color: var(--clay); }
.demo-thumbnail-kind { display: block; color: var(--muted); font-size: 12px; margin-top: 6px; }
.demo-gallery > a:hover .demo-thumbnail, .demo-gallery > a:focus-visible .demo-thumbnail { transform: translateY(-4px); }
.providers { padding-block: 24px 32px; border-bottom: 1px solid var(--border); }
.providers-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 14px; }
.providers-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.providers-heading a { color: var(--clay); font-size: 13px; white-space: nowrap; }
.providers ul { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); align-items: center; gap: 24px; list-style: none; padding: 0; margin: 0; }
.providers li { min-width: 0; }
.providers li a { display: flex; justify-content: center; align-items: center; min-height: 62px; margin-inline: -8px; padding: 16px 8px; border-radius: 4px; }
.providers li a:hover, .providers li a:focus-visible { background: var(--surface); }
.providers img { display: block; max-width: 100%; height: 30px; object-fit: contain; }
.provider-dark, [data-theme="dark"] .provider-light { display: none !important; }
[data-theme="dark"] .provider-dark { display: block !important; }
[data-theme="dark"] .provider-monochrome { filter: brightness(0) invert(1); }
[data-theme="light"] .provider-white { filter: brightness(0); }

/* Background changes belong to complete capabilities, beginning with the chain. */
.capability-group { border-top: 1px solid var(--border); padding-bottom: 16px; }
.capability-tinted { background: var(--surface); }
.capability-introduction { padding-block: 56px 38px; }
.capability-introduction h2 { font-size: clamp(34px,3.3vw,44px); line-height: 1.12; margin: 0; }
.capability-introduction > p { font-size: 17px; line-height: 1.7; max-width: 760px; margin: 16px 0 0; }
.demo-section { padding-block: 36px 40px; border-top: 1px solid var(--border); }
.demo-section figure { min-width: 0; }
.demo-section img { display: block; width: 100%; height: auto; }
.demo-introduction { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; margin-bottom: 28px; }
.demo-description > p:not(.demo-label) { font-size: 16px; line-height: 1.7; margin: 0; max-width: 510px; }
.demo-label { color: var(--clay); font-size: 13px; margin: 0 0 12px; }
.demo-download { margin: 24px 0 0; padding-top: 18px; display: flex; justify-content: flex-end; }
.skill-excerpt { margin: 0; }
.skill-excerpt pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 17px 20px; }
.skill-excerpt code { font-size: 13px; line-height: 1.75; }
.syntax-command { color: var(--clay); font-weight: 600; }
.syntax-flag { color: var(--syntax-flag, var(--ink)); }
.syntax-string { color: var(--syntax-string, var(--body)); }

/* All five commands stay visible beside the numbered results. */
.chain-demo { border-top: 0; padding-top: 0; }
.chain-layout { display: grid; grid-template-columns: 7fr 5fr; gap: 34px; align-items: start; }
.chain-commands { border: 1px solid var(--border); border-radius: 6px; background: var(--code-background); overflow: hidden; }
.command-step.code-sample { margin: 0; background: transparent; border: 0; border-radius: 0; }
.command-step + .command-step { border-top: 1px solid var(--border); }
.command-step figcaption { border: 0; padding: 9px 18px 0; font-family: var(--font-sans); font-size: 14px; color: var(--ink); }
.command-step figcaption b, .chain-results figcaption b, .campaign-grid figcaption b { color: var(--clay); margin-right: 6px; font: 13px var(--font-mono); }
.command-step pre { padding: 8px 18px 16px; }
.command-step code { font-size: 13px; line-height: 1.7; }
.chain-stills { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 22px; }
.chain-stills img { border-radius: 3px; }
.chain-stills figcaption { color: var(--body); font-size: 12px; line-height: 1.45; margin-top: 9px; }
.chain-stills figcaption b { display: block; margin-bottom: 3px; }
.chain-result > figcaption { color: var(--ink); font-size: 15px; margin-bottom: 10px; }
.video-player { position: relative; min-width: 0; }
.video-player video { display: block; width: 100%; height: auto; border-radius: 4px; background: var(--code-background); }

/* Photo stacks open into a larger comparison. */
.product-comparison-help { margin: 0 0 15px; font-size: 13px; color: var(--muted); }
.product-batch { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 26px; }
.product-example { min-width: 0; }
.product-example h4 { font-size: 17px; margin: 0 0 10px; font-weight: 700; }
.product-pair { position: relative; aspect-ratio: 1; isolation: isolate; }
.product-photo { position: absolute; width: 77%; aspect-ratio: 1; border: 0; padding: 0; border-radius: 3px; background: transparent; cursor: pointer; box-shadow: 0 8px 18px #0003; transition: transform .2s ease, box-shadow .2s ease; }
.product-photo-original { left: 4%; top: 14%; transform: rotate(-5deg); z-index: 1; }
.product-photo-generated { left: 18%; top: 4%; transform: rotate(3deg); z-index: 2; }
.product-pair[data-front="original"] .product-photo-original { z-index: 3; }
.product-photo:hover { box-shadow: 0 10px 24px #0004; }
.product-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.product-photo-label { position: absolute; bottom: 11px; left: 11px; padding: 4px 9px; border-radius: 3px; background: #171a1fe8; color: #fff; font-size: 11px; line-height: 1.5; }
.product-photo-generated .product-photo-label { left: auto; right: 11px; }
.photo-dialog, .image-dialog { width: min(1000px,calc(100% - 80px)); max-height: calc(100% - 64px); padding: 26px; background: var(--background); color: var(--body); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 20px 80px #0005; }
.photo-dialog::backdrop, .image-dialog::backdrop { background: #0c1623b8; backdrop-filter: blur(5px); }
.photo-dialog[open], .image-dialog[open] { animation: compare-open .18s ease-out; }
.photo-dialog header, .image-dialog header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.photo-dialog h2, .image-dialog h2 { font-size: 24px; margin: 0; }
.photo-dialog button, .image-dialog button { padding: 6px 14px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--ink); font-size: 14px; }
.photo-dialog-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.photo-dialog img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 4px; }
.photo-dialog figcaption { font-size: 14px; margin-top: 10px; }
.image-dialog { width: fit-content; }
.image-dialog header { gap: 28px; }
.image-dialog img { display: block; width: auto; height: auto; max-width: min(1000px,calc(100vw - 132px)); max-height: calc(100vh - 200px); margin-inline: auto; border-radius: 4px; }
@keyframes compare-open { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.packaging-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.packaging-direction h4 { font-size: 17px; margin: 0 0 14px; }
.packaging-formats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.packaging-concept img { border-radius: 4px; }
.packaging-concept a { display: block; }
.packaging-concept a:hover { opacity: .94; }

/* The three campaign stages lead from left to right toward the larger final video. */
.campaign-grid { display: grid; grid-template-columns: 1fr .5625fr .5625fr .9fr; gap: 24px; align-items: start; }
.campaign-stages { display: contents; }
.campaign-step figcaption, .campaign-result > figcaption { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--ink); margin-bottom: 14px; min-height: 24px; line-height: 1.4; }
.campaign-step figcaption b, .campaign-result > figcaption b { flex: none; margin: 0; }
.campaign-step a { display: block; }
.campaign-step img { width: 100%; height: auto; border-radius: 4px; }
.campaign-step p { margin: 12px 0 0; font-size: 13px; line-height: 1.5; }
.book-content { min-width: 0; max-width: min(100%,calc((100vh - 180px) * 1.5)); margin-inline: auto; }
.book-pages { display: grid; grid-template-columns: 1fr 1fr; background: #fff8e9; box-shadow: 0 9px 22px #0002; }
.book-page { position: relative; }
.book-page:nth-child(2n)::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3%; background: linear-gradient(90deg,#42322018,transparent); pointer-events: none; }
.book-edition-controls { display: flex; gap: 28px; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.book-edition-controls button { display: flex; align-items: center; gap: 14px; padding: 0 18px 14px 0; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); text-align: left; }
.book-edition-controls button img { width: 48px; height: 64px; object-fit: cover; border-radius: 2px; box-shadow: 0 2px 6px #0002; }
.book-edition-controls button > span { font-size: 14px; }
.book-edition-controls button[aria-pressed="true"] { color: var(--clay); border-bottom-color: var(--clay); }
.book-edition-controls button:hover { color: var(--ink); }
.book-reader { position: relative; }
.book-edge { position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 48px; padding: 0 0 4px; border: 1px solid var(--border); border-radius: 5px; background: var(--background); color: var(--ink); box-shadow: 0 4px 12px #0002; font: 36px/1 var(--font-sans); }
.book-edge-previous { left: -16px; }
.book-edge-next { right: -16px; }
.book-edge:hover { color: var(--clay); border-color: var(--clay); }
.book-edge.book-boundary { width: 96px; min-height: 48px; height: auto; padding: 10px 8px; font: 12px/1.4 var(--font-sans); }
.book-pagination { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; margin: 18px 0 0; }
.book-pagination button { background: transparent; color: var(--ink); border: 1px solid var(--border); padding: 9px 12px; border-radius: 4px; font-size: 13px; min-width: 0; }
.book-pagination > span { grid-column: 2; font-size: 13px; text-align: center; }
#book-previous { justify-self: start; }
#book-next { grid-column: 3; justify-self: end; }
.demo-conclusion { display: flex; align-items: center; justify-content: space-between; padding-block: 24px 38px; border-top: 1px solid var(--border); }

.docs-invitation { padding-block: 32px; }
html:not(.js) .book-pagination, html:not(.js) .book-edition-controls, html:not(.js) .book-edge { display: none; }
html:not(.js) .product-pair { display: flex; gap: 12px; aspect-ratio: auto; }
html:not(.js) .product-photo { position: relative; inset: auto; transform: none; width: calc(50% - 6px); }

@media (max-width: 1100px) {
 .hero-layout { gap: 36px; }
 .hero-description { font-size: 16px; }
 .demo-gallery { gap: 22px; }
 .demo-thumbnail { height: 120px; }
 .providers ul { gap: 18px; }
 .providers img { height: 25px; }
 .demo-introduction { gap: 32px; }
 .campaign-grid { gap: 18px; }
 .campaign-step figcaption, .campaign-result > figcaption { min-height: 40px; }
}
@media (max-width: 850px) {
 .hero-layout, .demo-introduction { grid-template-columns: 1fr; }
 .hero-layout { gap: 32px; }
 .hero-demo { width: min(100%,460px); margin-inline: auto; }
 .demo-gallery { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
 .providers ul { grid-template-columns: repeat(4,minmax(0,1fr)); }
 .capability-introduction { padding-block: 40px 30px; }
 .chain-layout { grid-template-columns: 1fr; }
 .chain-results { max-width: 550px; width: 100%; margin-inline: auto; }
 .product-batch { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px; }
}
@media (max-width: 600px) {
 .hero-layout { padding-block: 30px; }
 h1 { font-size: clamp(38px,10vw,56px); }
 .demo-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 18px; }
 .demo-thumbnail { height: 135px; }
 .providers img { height: 24px; }
 .capability-introduction > p { font-size: 16px; }
 .demo-section { padding-block: 30px; }
 .command-step pre { padding-inline: 14px; }
 .command-step code { font-size: 12px; }
 .chain-stills { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .product-batch, .packaging-grid { grid-template-columns: 1fr; }
 .product-pair { max-width: 360px; margin-inline: auto; }
 .campaign-grid { display: flex; flex-direction: column; }
 .campaign-stages { display: grid; grid-template-columns: 1fr 1fr 1fr; width: 100%; gap: 12px; }
 .campaign-step figcaption { font-size: 12px; min-height: 55px; }
 .campaign-step p { font-size: 12px; }
 .campaign-result { width: min(100%,350px); margin-inline: auto; }
 .book-pages { grid-template-columns: 1fr; }
 .book-page:nth-child(2n)::before { display: none; }
 .book-pagination { gap: 8px; }
 .book-pagination button, .book-pagination > span { font-size: 11px; }
 .book-edge.book-boundary { width: 80px; font-size: 11px; }
 .demo-conclusion { gap: 20px; flex-direction: column; align-items: start; }
 .photo-dialog, .image-dialog { width: calc(100% - 28px); padding: 16px; }
 .photo-dialog-pair { gap: 12px; }
 .photo-dialog h2, .image-dialog h2 { font-size: 20px; }
}