/* The homepage's scroll story is isolated from the other public pages. */
:root { --story-top: 78px; }
.chapter { display: block; color: var(--accent); font-size: 10px; font-weight: 600; line-height: 1.6; }
.story-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.story-heading h2 { font-size: 49px; line-height: 1.08; margin-top: 18px; }
.story-heading h2 span { color: var(--muted); }
.story-heading p { font-size: 14px; line-height: 1.8; }
.motion-hero { min-height: 590px; height: calc(100svh - 160px); max-height: 850px; }
.motion-hero .hero-content { padding-top: 42px; }
.motion-hero h1 { font-size: 70px; margin: 18px auto; }
.motion-hero .hero-content > * { transform: translateY(calc(var(--hero-scroll, 0) * -36px)); }
.motion-hero .hero-label { border: 0; padding-left: 14px; }
.motion-hero .hero-label:before { content: ''; position: absolute; left: 0; width: 4px; height: 4px; background: var(--accent); }
.motion-hero .label-design { top: 55%; left: 7%; }
.motion-hero .label-code { top: 88%; left: 9%; }
.motion-hero .label-mobile { top: 62%; right: 6%; }
.hero-stage-label { display: flex; align-items: center; gap: 13px; font-size: 9px; color: var(--muted); }
.hero-stage-label i { width: 30px; height: 1px; background: var(--line); }
.clients { border: 0; padding-top: 34px; padding-bottom: 32px; }
.client-logos { opacity: .85; }

/* Vertical scrolling advances equal-sized, fully visible website previews. */
.demo-story { padding-top: 50px; position: relative; border-bottom: 1px solid var(--line); }
.demo-sticky { padding-block: 30px; }
.demo-sticky > .wrap { width: 100%; }
.demo-viewport { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; padding-block: 28px; }
.demo-story .project-gallery { display: flex; gap: 34px; width: max-content; padding-inline: 64px; }
.demo-story .project-item { width: min(780px, 72vw, calc((100svh - 380px) * 1.6)); flex: none; min-width: 260px; }
.demo-story .project-preview { box-shadow: 0 22px 50px #00000015; border-radius: 6px; }
.demo-story .project-preview:hover { transform: none; }
.demo-story .project-preview img { transform: none; }
.demo-story .project-preview .browser-bar { height: 30px; }
.demo-story .project-meta { margin-top: 15px; flex-direction: row; align-items: end; }
.demo-story .project-meta h3 { font-size: 23px; }
.demo-story .project-industry { font-size: 10px; }
.demo-story .project-tags { padding-top: 10px; font-size: 10px; }
.demo-story .preview-affordance { opacity: 1; transform: none; padding: 7px 10px; }
.demo-story.story-ready { padding-top: 0; }
.story-ready .demo-sticky { position: sticky; top: var(--story-top); height: calc(100svh - var(--story-top)); max-height: 940px; display: flex; flex-direction: column; justify-content: center; }
.story-ready .demo-viewport { overflow: hidden; flex: none; }
.story-ready .project-gallery { padding-inline: 0; will-change: transform; }
.story-ready .project-item { opacity: .4; transition: opacity .4s; }
.story-ready .project-item.is-current { opacity: 1; }
.gallery-controls { margin-top: 0; padding-top: 14px; padding-right: 50px; gap: 30px; }
.gallery-controls > span { min-width: 240px; color: var(--muted); font-size: 11px; }
.gallery-controls b { color: var(--fg); font-weight: 500; }
.gallery-current { margin-left: 20px; color: var(--fg); }
.gallery-controls .icon-button { width: 38px; height: 38px; }
.gallery-controls .icon-button:disabled { opacity: .3; }
.gallery-controls > .gallery-meter { flex: 1; height: 1px; background: var(--line); display: block; position: relative; }
.gallery-meter i { display: block; width: 100%; height: 2px; background: var(--accent); transform: scaleX(var(--gallery-progress, .1667)); transform-origin: left; }

/* Neutral editorial pause between the build sequence and the statistics. */
.first-impression { padding-block: 120px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 110px; align-items: start; }
.impression-heading { position: sticky; top: 190px; }
.impression-heading h2 { margin-top: 32px; font-size: 62px; line-height: 1.12; }
.impression-heading h2 > span { display: inline-block; color: var(--muted); font-size: 30px; margin-bottom: 23px; }
.impression-heading em { font-style: normal; color: var(--accent); }
.principles article { display: flex; gap: 26px; padding: 32px 0; border-top: 1px solid var(--line); }
.principles article:last-child { border-bottom: 1px solid var(--line); }
.principles .icon { color: var(--accent); margin-top: 3px; width: 26px; height: 26px; }
.principles article span { font-size: 9px; color: var(--muted); }
.principles h3 { font-size: 26px; margin: 16px 0 14px; }
.principles p { font-size: 14px; line-height: 1.8; max-width: 340px; }

/* A single browser evolves through all six steps, including on phones. */
.build-journey { border-block: 1px solid var(--line); background: var(--surface); }
.journey-sticky { padding-top: 45px; padding-bottom: 30px; }
.build-journey.story-ready .journey-sticky { position: sticky; top: var(--story-top); height: calc(100svh - var(--story-top)); min-height: 580px; max-height: 940px; display: flex; flex-direction: column; justify-content: center; }
.journey-stage { display: grid; grid-template-columns: .75fr 1.25fr; align-items: center; gap: 70px; flex: 1; max-height: 510px; min-height: 350px; margin-block: 35px; }
.journey-narrative { position: relative; min-width: 0; }
.journey-copy { padding-block: 18px; }
.build-journey.is-enhanced .journey-copy { display: none; }
.build-journey.is-enhanced .journey-copy.is-current { display: block; animation: story-copy-in .5s both; }
.step-number { color: var(--accent); font-size: 11px; }
.journey-copy h3 { font-size: 34px; line-height: 1.15; margin: 24px 0 20px; }
.journey-copy p { font-size: 14px; line-height: 1.9; max-width: 350px; }
.build-scene { position: relative; height: 410px; min-width: 0; isolation: isolate; overflow: clip; container-type: size; }
.scene-grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); opacity: .42; }
.build-brief { position: absolute; width: 240px; padding: 26px; top: 22px; left: calc(50% - 120px); border: 1px solid var(--line); background: var(--bg); box-shadow: 18px 20px 0 -1px var(--surface-2); transform: rotate(-7deg); transition: transform .8s, opacity .5s; }
.build-brief > span { font-size: 9px; color: var(--accent); }
.build-brief > strong { display: block; font-size: 39px; font-weight: 500; line-height: 1.1; margin: 22px 0; }
.build-brief > div { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; margin-top: 10px; }
.build-brief .icon { width: 13px; color: var(--accent); }
.build-browser { position: absolute; inset: 45px 3% auto; aspect-ratio: 1.48; border: 1px solid var(--line); background: var(--bg); border-radius: 6px; overflow: hidden; box-shadow: 0 18px 35px #0002; opacity: 0; transform: translateY(65px) scale(.78); transition: transform .9s cubic-bezier(.22, .68, .2, 1), opacity .65s; }
.build-chrome { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 30px; padding: 0 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.build-chrome > .icon { width: 12px; height: 12px; }
.build-wire { position: absolute; inset: 30px 0 0; padding: 22px; }
.build-wire > div { height: 10px; width: 55%; background: var(--surface-2); }
.build-wire section { display: flex; justify-content: space-between; height: 46%; margin-block: 25px; gap: 22px; }
.build-wire section > span { flex: 1; }
.build-wire section i { display: block; background: var(--surface-2); height: 15px; margin-block: 12px; }
.build-wire section i:last-child { width: 50%; background: var(--accent); height: 20px; opacity: .65; }
.build-wire b { width: 38%; border: 1px dashed var(--accent); }
.build-wire footer { display: flex; gap: 15px; height: 16%; }
.build-wire footer i { flex: 1; background: var(--surface); border: 1px solid var(--line); }
.build-design { position: absolute; inset: 30px 0 0; clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.22,.68,.2,1); }
.build-design img { width: 100%; height: 100%; object-fit: cover; }
.build-palette { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--bg); border: 1px solid var(--line); bottom: 8px; right: 9%; opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .7s; }
.build-palette span { width: 25px; height: 25px; border-radius: 50%; background: #f3bd58; }
.build-palette span:nth-child(2) { background: #f3efe6; }.build-palette span:nth-child(3) { background: #3b5ed0; }
.build-palette b { font: 30px Georgia, serif; margin-left: 8px; }
.build-code { position: absolute; top: 115px; left: -5%; padding: 18px 22px; background: #14171d; color: #d2e4ff; border: 1px solid #394d74; border-radius: 5px; opacity: 0; transform: translate(-60px,20px); transition: opacity .5s, transform .7s; box-shadow: 0 12px 30px #0002; }
.build-code small { font: 9px monospace; color: #a4aec0; }
.build-code p { color: #8db6ff; font: 12px/1.85 monospace; margin-block: 14px; }
.build-code > span { display: flex; gap: 8px; align-items: center; color: #b2d7c6; font-size: 9px; }.build-code .icon { width: 12px; height: 12px; }
.build-phone { position: absolute; right: -2%; bottom: 6px; width: 130px; border: 5px solid #292c31; border-radius: 17px; overflow: hidden; box-shadow: 0 15px 25px #0003; opacity: 0; transform: translate(45px,35px); transition: transform .7s, opacity .5s; }
.build-phone img { width: 100%; height: auto; }
.build-checks { position: absolute; display: flex; flex-direction: column; gap: 6px; left: 8%; bottom: 0; padding: 10px 13px; border: 1px solid var(--line); background: var(--bg); opacity: 0; transform: translateY(20px); transition: transform .7s, opacity .5s; }
.build-checks > span { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.build-checks .icon { width: 13px; height: 13px; color: #5ba28a; }
.build-live { position: absolute; display: flex; align-items: center; justify-content: center; gap: 12px; left: 8%; right: 18%; bottom: 5px; background: var(--bg); border: 1px solid var(--line); padding: 18px; color: var(--accent); font-size: 13px; opacity: 0; transform: translateY(30px); transition: transform .8s, opacity .6s; }
.journey-sticky:not([data-build-step="0"]) .build-brief { opacity: 0; transform: translate(-65px,-30px) rotate(-15deg); }
.journey-sticky:not([data-build-step="0"]) .build-browser { opacity: 1; transform: none; }
.journey-sticky:is([data-build-step="2"],[data-build-step="3"],[data-build-step="4"],[data-build-step="5"]) .build-design { clip-path: inset(0); }
.journey-sticky[data-build-step="2"] .build-palette { opacity: 1; transform: none; }
.journey-sticky[data-build-step="3"] .build-browser { transform: translate(28px,-15px) scale(.9); }
.journey-sticky[data-build-step="3"] .build-code { opacity: 1; transform: none; }
.journey-sticky:is([data-build-step="4"],[data-build-step="5"]) .build-browser { transform: translate(-20px,-12px) scale(.92); }
.journey-sticky:is([data-build-step="4"],[data-build-step="5"]) .build-phone { opacity: 1; transform: none; }
.journey-sticky[data-build-step="4"] .build-checks { opacity: 1; transform: none; }
.journey-sticky[data-build-step="5"] .build-live { opacity: 1; transform: none; }
.journey-tabs { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; }
.journey-tabs button { text-align: left; background: none; border: 0; border-top: 2px solid var(--line); display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 11px; padding: 18px 0; transition: border-color .4s, color .4s; }
.journey-tabs button > span { font-size: 9px; }.journey-tabs .icon { margin-left: auto; width: 15px; height: 15px; }
.journey-tabs button[aria-pressed=true] { color: var(--accent); border-color: var(--accent); }

.standards { padding-block: 110px; background: var(--surface); border-block: 1px solid var(--line); }
.stat-line { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 55px 0 65px; }
.stat-line > div { border-left: 1px solid var(--line); padding-left: 35px; }
.stat-line > div:first-child { padding-left: 0; border-left: 0; }
.stat-line strong { display: block; font-size: 66px; line-height: 1; font-weight: 400; font-variant-numeric: tabular-nums; }
.stat-line strong small { font-size: 27px; color: var(--accent); }
.stat-line > div > span { display: block; font-size: 12px; color: var(--muted); margin-top: 18px; }
.target-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 60px; border-block: 1px solid var(--line); padding-block: 30px; }
.target-row h3 { font-size: 18px; margin-bottom: 25px; }
.target-row > div { display: grid; grid-template-columns: 1fr 32px; column-gap: 18px; row-gap: 10px; margin-top: 16px; }
.target-row span { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }
.target-row i { display: block; width: var(--bar); height: 4px; border-radius: 2px; background: var(--muted); align-self: center; transform: scaleX(.05); transform-origin: left; transition: transform 1.1s; }
.target-row b { font-size: 11px; font-weight: 400; text-align: right; }
.target-row .target-raso i { background: var(--accent); }
.target-grid.in-view i { transform: scaleX(1); }
.target-note { font-size: 11px; margin-top: 18px; line-height: 1.7; }

.voices { padding-block: 75px; background: var(--surface); border-block: 1px solid var(--line); overflow: clip; }
.voices .story-heading { margin-bottom: 38px; }
.voice-window { overflow: hidden; }
.voices .review-rail { display: flex; overflow: auto; gap: 24px; padding: 0 max(24px, calc((100% - 1312px) / 2)); scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.voices .review { flex: 0 0 480px; max-width: calc(100vw - 48px); min-height: 310px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 30px; }
.voices .review blockquote { font-size: 18px; }
.voices .review time { display: block; }.voices .review-person > span:nth-child(2) { min-width: 0; }
.voices .review-controls { margin-top: 28px; }
.review.is-clone { pointer-events: none; }
.project-cta { padding-block: 110px; }
.project-cta h2 { font-size: 80px; }
.project-cta:before { content: '</>'; display: block; grid-column: 1 / -1; color: var(--accent); font: 36px monospace; padding-bottom: 24px; }
@keyframes story-copy-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media(min-width:1600px) { .story-heading h2 { font-size: 56px; }.demo-story .project-item { width: min(900px,70vw,calc((100svh - 400px)*1.6)); } }
@media(max-width:1100px) {
  .motion-hero h1 { font-size: 60px; }.motion-hero .hero-label { display: none; }
  .story-heading h2 { font-size: 42px; }.story-heading { gap: 28px; }
  .first-impression { gap: 60px; }.impression-heading h2 { font-size: 48px; }.impression-heading h2 > span { font-size: 24px; }
  .journey-stage { gap: 35px; grid-template-columns: .8fr 1.2fr; }.journey-copy h3 { font-size: 29px; }.build-scene { height: 340px; }
  .build-browser { top: 45px; }.build-phone { width: 100px; }.build-code { padding: 15px; left: -1%; top: 95px; }.build-code p { font-size: 10px; }
  .build-palette { bottom: 20px; }.build-live { padding: 12px; font-size: 11px; left: 0; right: 20%; }
  .journey-tabs { gap: 8px; }.journey-tabs .icon { display: none; }.journey-tabs button { gap: 7px; }
  .stat-line strong { font-size: 55px; }.target-grid { gap: 30px; }
}
@media(max-width:900px) {
  :root { --story-top: 74px; }
  .motion-hero { height: 710px; max-height: none; }.motion-hero h1 { font-size: 57px; }
  .demo-story .project-item { width: min(76vw,calc((100svh - 365px)*1.6)); }
  .first-impression { grid-template-columns: 1fr 1fr; gap: 40px; padding-block: 80px; }
  .principles article { gap: 16px; }.principles h3 { font-size: 22px; }.impression-heading { top: 140px; }
  .journey-stage { grid-template-columns: .8fr 1.2fr; gap: 25px; }.journey-copy h3 { font-size: 26px; }.build-scene { height: 310px; }
  .build-brief { width: 200px; left: calc(50% - 100px); padding: 22px; }.build-brief > strong { font-size: 33px; }
  .build-phone { width: 87px; }.build-palette { bottom: 30px; }.build-palette span { width: 20px; height: 20px; }
  .build-browser { inset-inline: 0; }.build-code { top: 80px; }.build-wire { padding: 15px; }.build-wire section { margin-block: 12px; }
  .stat-line > div { padding-left: 22px; }.stat-line strong { font-size: 48px; }.stat-line > div > span { font-size: 11px; }
  .voices .review { flex-basis: 440px; }.voices .review time { display: none; }
}
@media(max-width:600px) {
  :root { --story-top: 68px; }
  .motion-hero { height: calc(100svh - 120px); min-height: 580px; max-height: 780px; }
  .motion-hero .hero-content { padding-top: 32px; }.motion-hero h1 { font-size: 42px; margin: 18px auto; }
  .hero-stage-label { display: none; }.motion-hero .hero-actions { gap: 8px; }
  .motion-hero .hero-content > .section-kicker { font-size: 9px; }.motion-hero .button { padding-inline: 12px; font-size: 11px; gap: 9px; }
  .clients { padding-block: 24px; }.client-logos { gap: 20px; }
  .story-heading { display: block; }.story-heading h2 { font-size: 32px; margin-top: 13px; }.chapter { font-size: 9px; }
  .story-heading p { display: none; }.story-heading .quiet-link { margin-top: 20px; }
  .demo-sticky { padding-block: 25px; }.story-ready .demo-sticky { justify-content: center; min-height: 480px; max-height: 720px; }
  .demo-story .project-gallery { gap: 18px; padding-inline: 24px; }.story-ready .project-gallery { padding-inline: 0; }
  .demo-story .project-item { width: 86vw; min-width: 0; }.demo-viewport { padding-block: 27px; }
  .demo-story .project-preview .browser-bar { height: 26px; }.demo-story .project-meta { gap: 15px; margin-top: 18px; }
  .demo-story .project-meta h3 { font-size: 21px; }.demo-story .project-meta .demo-badge { font-size: 8px; }
  .demo-story .project-tags { gap: 7px 10px; font-size: 9px; }.demo-story .preview-affordance { font-size: 9px; bottom: 8px; right: 8px; }
  .gallery-controls { gap: 16px; padding-top: 14px; }.gallery-controls > span { min-width: 0; max-width: none; font-size: 10px; flex: 1; }
  .gallery-current { display: block; margin: 5px 0 0; }.gallery-controls > .gallery-meter { max-width: 65px; flex: 1; }.gallery-controls > div:last-child { gap: 6px; }
  .first-impression { display: block; padding-block: 70px; }.impression-heading { position: static; }
  .impression-heading h2 { font-size: 45px; margin-top: 22px; }.impression-heading h2 > span { font-size: 24px; margin-bottom: 18px; }
  .principles { margin-top: 38px; }.principles article { padding-block: 27px; gap: 22px; }.principles h3 { font-size: 23px; }.principles p { font-size: 13px; }
  .journey-sticky { padding-top: 24px; padding-bottom: 15px; }.build-journey.story-ready .journey-sticky { min-height: 650px; max-height: 820px; justify-content: center; }
  .journey-stage { display: flex; flex-direction: column-reverse; gap: 10px; margin-block: 15px 18px; min-height: 0; max-height: none; flex: 0 0 auto; }
  .build-scene { height: 255px; width: 100%; }.journey-narrative { width: 100%; min-height: 167px; }
  .journey-copy { padding: 0; }.journey-copy h3 { font-size: 24px; line-height: 1.16; margin: 12px 0 10px; max-width: 350px; }.journey-copy p { font-size: 12px; line-height: 1.75; max-width: none; }
  .step-number { font-size: 9px; }.build-brief { width: 180px; left: calc(50% - 90px); top: 6px; padding: 17px; box-shadow: 12px 13px 0 -1px var(--surface-2); }
  .build-brief > strong { font-size: 30px; margin-block: 14px; }.build-brief > div { margin-top: 5px; font-size: 9px; }
  .build-browser { top: 22px; inset-inline: 3%; }.build-chrome { height: 25px; font-size: 8px; padding-inline: 10px; }.build-design,.build-wire { top: 25px; }
  .build-phone { width: 93px; bottom: 0; right: 0; border-width: 4px; border-radius: 11px; }
  .build-code { top: 72px; padding: 12px 15px; left: 0; }.build-code p { margin-block: 9px; line-height: 1.65; }.build-code small { font-size: 8px; }
  .build-palette { bottom: 0; right: 10%; gap: 8px; padding: 7px 12px; }.build-palette b { font-size: 25px; }
  .build-checks { bottom: 0; left: 6%; gap: 2px; }.build-checks > span { font-size: 8px; }.build-live { left: 0; right: 24%; font-size: 10px; padding: 11px; bottom: 0; }.build-live .icon { width: 17px; height: 17px; }
  .journey-tabs { gap: 7px; }.journey-tabs button { flex-direction: column; align-items: start; gap: 6px; padding: 11px 0 0; font-size: 8px; }.journey-tabs button > span { font-size: 9px; }
  .standards { padding-block: 65px; }.stat-line { grid-template-columns: 1fr 1fr; gap: 30px 20px; margin-block: 35px 40px; }
  .stat-line > div { padding: 0; border: 0; }.stat-line strong { font-size: 52px; }.stat-line strong small { font-size: 22px; }.stat-line > div > span { margin-top: 10px; }
  .target-grid { grid-template-columns: 1fr; gap: 30px; }.target-row h3 { font-size: 17px; margin-bottom: 18px; }.target-row > div { grid-template-columns: 95px 1fr 32px; align-items: center; gap: 12px; margin-top: 14px; }.target-row span { grid-column: auto; font-size: 9px; }
  .voices { padding-block: 55px; }.voices .story-heading { margin-bottom: 28px; }.voices .review-rail { gap: 16px; padding-inline: 24px; }
  .voices .review { padding: 24px; min-height: 350px; flex-basis: calc(100vw - 48px); }.voices .review blockquote { font-size: 17px; }.voices .review-controls { margin-top: 23px; }.review-controls .icon-button { width: 38px; height: 38px; }
  .project-cta { padding-block: 65px; }.project-cta h2 { font-size: 58px; }.project-cta:before { font-size: 27px; }
}
@media(max-width:360px) {
  .motion-hero h1 { font-size: 36px; }.motion-hero .hero-content { padding-inline: 16px; }.motion-hero .button { font-size: 10px; padding-inline: 10px; gap: 8px; }
  .story-heading h2 { font-size: 29px; }.impression-heading h2 { font-size: 39px; }.impression-heading h2 > span { font-size: 21px; }
  .demo-story .project-meta { flex-direction: row; }.demo-story .project-meta h3 { font-size: 19px; }
  .journey-narrative { min-height: 185px; }.build-scene { height: 225px; }.build-browser { top: 17px; }.build-phone { width: 80px; }
  .build-code { top: 55px; }.journey-copy h3 { font-size: 23px; }.journey-copy p { font-size: 11px; }.journey-tabs button { font-size: 7px; }
  .voices .review { padding: 20px; min-height: 390px; }.voices .review blockquote { font-size: 16px; }
}
@media(min-width:901px) and (max-height:800px) {
  .motion-hero { height: calc(100svh - 150px); min-height: 530px; }.motion-hero .hero-content { padding-top: 25px; }.motion-hero h1 { font-size: 56px; }.motion-hero p { font-size: 13px; }.motion-hero .hero-actions { margin-top: 18px; }
  .story-heading h2 { font-size: 38px; }.story-ready .demo-sticky { padding-block: 20px; }.demo-viewport { padding-block: 20px; }
  .build-journey.story-ready .journey-sticky { padding-block: 24px; }.journey-stage { margin-block: 18px; min-height: 300px; }.build-scene { height: 310px; }.journey-copy h3 { font-size: 29px; }.build-browser { top: 15px; width: 85%; left: 8%; }.build-phone { width: 95px; right: 4%; }.build-palette { bottom: 0; }.build-code { top: 75px; }.build-live { bottom: 0; }
}
@media(prefers-reduced-motion:reduce) {
  .demo-story { height: auto !important; }.demo-sticky,.build-journey.story-ready .journey-sticky { position: relative; top: 0; height: auto; }
  .demo-story .demo-viewport { overflow-x: auto; }.demo-story .project-gallery { transform: none !important; padding-inline: 24px; }.demo-story .project-item { opacity: 1; }
  .target-row i { transform: scaleX(1); }.build-journey { height: auto !important; }.impression-heading { position: static; }
}
.build-scene .build-browser { width: min(94%, calc((100cqh - 72px) * 1.48)); top: 20px; left: 0; right: 0; margin-inline: auto; }
@media(min-width:901px) { .build-scene .build-phone { right: 20%; }.journey-tabs { padding-right: 50px; } }
@media(max-width:600px) { .gallery-controls { padding-right: 0; }.build-scene .build-browser { width: min(94%, calc((100cqh - 44px) * 1.48)); top: 16px; } }

/* Each homepage rises over the preceding card; the upper edges retain the stack. */
.card-stack .demo-sticky { padding-block: 30px; }
.card-stack.story-ready .demo-sticky { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; justify-content: stretch; gap: 0; }
.card-stack .demo-viewport { overflow: clip; position: relative; padding: 0; }
.card-stack .project-gallery { display: grid; gap: 32px; width: min(900px, calc(100% - 48px)); padding: 50px 0; margin-inline: auto; }
.card-stack .project-gallery .project-item { width: 100%; min-width: 0; padding: 13px 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 18px 36px #0003; transform-origin: center top; transition: none; }
.card-stack .project-preview { border-radius: 4px; box-shadow: none; }
.card-stack .project-meta { padding-inline: 5px; }
.card-stack .project-tags { padding-inline: 5px; min-height: 28px; }
.card-stack.story-ready .project-gallery { position: absolute; width: var(--stack-width, 65%); height: var(--stack-height, 450px); left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 0; display: block; }
.card-stack.story-ready .project-item { position: absolute; inset: 0 0 auto; will-change: transform; opacity: 1; }
.card-stack .gallery-controls [data-gallery-prev] .icon { transform: rotate(90deg); }
.card-stack .gallery-controls [data-gallery-next] .icon { transform: rotate(90deg); }
.card-stack:not(.story-ready) .gallery-controls { display: none; }
@media(max-width:600px) {
  .card-stack .demo-sticky { padding-block: 25px; }
  .card-stack .project-gallery .project-item { padding: 8px 8px 12px; }
  .card-stack .project-meta { margin-top: 13px; gap: 8px; }.card-stack .project-meta h3 { font-size: 20px; }
  .card-stack .project-tags { gap: 5px 8px; font-size: 8px; min-height: 26px; }
  .card-stack .project-gallery { width: calc(100% - 32px); padding-block: 35px; }
  .card-stack .project-meta .demo-badge { font-size: 8px; }
}
@media(prefers-reduced-motion:reduce) {
  .card-stack .project-gallery { transform: none; }
}

/* Context lives beside the demo, not over the website being previewed. */
.demo-context{display:none}
body:has(.story-ready.is-reading) .whatsapp{visibility:hidden;pointer-events:none}
.build-journey .journey-narrative{overflow:clip}
@media(min-width:1100px){
  .story-ready .demo-context{display:block;position:absolute;top:50%;transform:translateY(-50%);width:min(240px,calc((100% - var(--stack-width,700px))/2 - 74px));min-width:0}
  .demo-context-left{left:max(32px,calc((100% - 1312px)/2))}.demo-context-right{right:max(32px,calc((100% - 1312px)/2))}
  .demo-context h3{font-size:25px;line-height:1.22;margin:18px 0}.demo-context p{font-size:13px;line-height:1.8}.demo-context .section-kicker{font-size:9px}
  .demo-context ul{list-style:none;padding:0;margin:20px 0 0}.demo-context li{font-size:13px;line-height:1.65;padding:16px 0;border-top:1px solid var(--line)}
  .demo-context [data-demo-note]:not([hidden]){animation:story-copy-in .35s both}
}
/* Fit the pinned sequence inside real phone viewports, including browser chrome. */
@media(max-width:600px){
  .build-journey.story-ready .journey-sticky{min-height:0;max-height:820px;height:calc(100svh - var(--story-top));padding-block:18px;justify-content:space-between;gap:12px}
  .build-journey.story-ready .story-heading h2{font-size:29px;margin-top:10px}
  .build-journey.story-ready .journey-stage{flex:1;min-height:0;justify-content:center;gap:8px;margin:0}
  .build-journey.story-ready .build-scene{height:clamp(135px,calc(100svh - 440px),250px);flex:none}
  .build-journey.story-ready .journey-narrative{min-height:156px}
  .build-journey.story-ready .journey-copy h3{font-size:23px;margin:9px 0 8px}
  .build-journey.story-ready .journey-copy p{font-size:12px;line-height:1.65}
  .build-journey.story-ready .journey-tabs{width:100%;gap:6px;flex:none}
  .build-journey.story-ready .journey-tabs button{font-size:8px;padding-top:8px;min-height:38px}
  .build-journey.is-enhanced .journey-copy.is-current{animation:story-copy-mobile .35s both}
  .build-brief{padding:15px;width:190px;left:calc(50% - 95px);top:12px}.build-brief>strong{font-size:26px;margin:12px 0}.build-brief>div{font-size:10px;margin-top:5px}
  .card-stack.story-ready .demo-sticky{min-height:0;max-height:720px;padding-block:20px}
}
@media(max-width:600px) and (max-height:620px){
  .build-journey.story-ready .journey-sticky{padding-block:12px;gap:8px}
  .build-journey.story-ready .story-heading h2{font-size:25px;margin-top:7px}
  .build-journey.story-ready .chapter{font-size:8px}
  .build-journey.story-ready .journey-narrative{min-height:151px}
  .build-journey.story-ready .journey-copy h3{font-size:21px}
  .build-journey.story-ready .journey-copy p{font-size:11px}
  .build-brief>div{display:none}
  .card-stack.story-ready .story-heading h2{font-size:27px}
}
.build-journey:not(.story-ready) .journey-narrative{display:grid;gap:22px}
.build-journey:not(.story-ready) .journey-copy{display:block}
@keyframes story-copy-mobile{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.demo-context [data-demo-note],.build-journey .journey-copy{animation:none!important}}