/* ==========================================================================
   Homepage scroll story. Used by index.html and es/index.html.

   Two modes:
   - Still: scripts off or reduced motion. A one-screen hero with the
     finished "Today" screen rising from the bottom edge. Props, layers and
     labels stay hidden.
   - Story: html.story-on, set by the gate in <head>. The section is five
     stage-heights tall and the stage sticks under the nav while
     hero-story.js poses everything from scroll progress. html.story-ready
     marks that the script started.

   Everything inside the stage is sized in container units (cqw, cqh), so one
   layout scales with the stage. Portrait stages get their own positions.
   ========================================================================== */

.story { --nav-h: 66px; position: relative; background: var(--paper-0) }
.story__stage { position: relative; height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); min-height: 560px; overflow: hidden; container-type: size; isolation: isolate; background: var(--paper-0) }
html.story-on .story { height: calc(5 * (100vh - var(--nav-h))); height: calc(5 * (100svh - var(--nav-h))) }
html.story-on .story__stage { position: sticky; top: var(--nav-h) }
@media (orientation: portrait) {
  html.story-on .story { height: calc(4.5 * (100vh - var(--nav-h))); height: calc(4.5 * (100svh - var(--nav-h))) }
}

/* ---------- atmosphere ---------- */
.story__bg { position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% -5%, #fdfcf9 0%, rgba(253, 252, 249, 0) 60%), radial-gradient(120% 100% at 50% 110%, #e9e5db 0%, var(--paper-0) 60%) }
.story__light { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; opacity: 0; pointer-events: none }
.story__grid { position: absolute; inset: 0; opacity: 0; background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px); background-size: 3.2cqw 3.2cqw; -webkit-mask-image: radial-gradient(60% 70% at 50% 64%, #000 30%, transparent 78%); mask-image: radial-gradient(60% 70% at 50% 64%, #000 30%, transparent 78%) }
.story__glow { position: absolute; left: 50%; top: 66%; width: 90cqw; height: 70cqh; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(29, 95, 196, .16), rgba(29, 95, 196, 0)); opacity: 0; pointer-events: none }
.story__grain { position: absolute; inset: 0; z-index: 90; pointer-events: none; opacity: .06; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") }

/* ---------- copy: chip, headline, lead, buttons, note ---------- */
.story__copy { position: absolute; z-index: 70; left: 50%; top: 6cqh; width: min(64cqw, 980px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; text-align: center }
.story__flag.sais-chip { background: var(--paper-1); border-color: var(--accent-edge); color: var(--accent) }
.story__title { margin: 1.6cqh 0 0; font-family: "DM Serif Display", Georgia, "Times New Roman", serif; font-weight: 400; font-size: min(4.15cqw, 7.2cqh); line-height: 1.07; letter-spacing: -.005em; color: var(--ink-0) }
.story__title .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
.story__rotor { display: grid }
.story__line { grid-area: 1 / 1; text-wrap: balance }
.story__line em { font-style: normal; color: var(--accent) }
.story__line:not(:first-child) { visibility: hidden }
.story__line[data-pos] { visibility: visible }
.story__lead.lead { margin: 1.8cqh auto 0 }
.story__ctas.row { margin-top: 2.6cqh; justify-content: center }
.story__ctas.is-faded { pointer-events: none }
.story__ctas:focus-within { opacity: 1 !important }
.story__note.mono-note { margin-top: 1.4cqh }

/* Headline word masks, built by hero-story.js. Each word slides through its own mask. */
.story__w { display: inline-block; overflow: hidden; vertical-align: top; padding: .07em .015em .16em; margin: -.07em -.015em -.16em }
.story__w > span { display: inline-block; transform: translateY(118%); transition: transform .8s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--k) * 16ms) }
.story__line[data-pos="above"] .story__w > span { transform: translateY(-118%) }
.story__line[data-pos="on"] .story__w > span { transform: none; transition-delay: calc(110ms + var(--k) * 30ms) }
.story__line.is-instant .story__w > span { transition: none }
.story__w.is-em > span { color: var(--accent) }

/* ---------- the screen and the layers under it ---------- */
.story__scene { position: absolute; inset: 0; z-index: 30; perspective: 150cqw; perspective-origin: 50% 42%; pointer-events: none }
.story__rig { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 96% }
html.story-on .story__rig { transform: translateY(48cqh) rotateX(30deg) scale(.9) }
.story__stack { position: absolute; left: 28cqw; top: 40cqh; width: 44cqw; height: 56cqh; transform-style: preserve-3d }
html:not(.story-on) .story__stack { top: 52cqh }
.story__layer { position: absolute; inset: 0 }
.story__layer:not(.story__layer--screen) { opacity: 0 }
.story__anchor { position: absolute; left: 0; top: 50%; width: 1px; height: 1px }
.story__plate { position: absolute; inset: 0; border-radius: 1.3cqw; overflow: hidden }

.story__screen { position: absolute; inset: 0; display: flex; flex-direction: column; border-radius: 1.3cqw; overflow: hidden; background: #fff; border: 1px solid var(--accent-edge); box-shadow: inset 0 1px 0 #fff, 0 3.4cqw 7cqw -3.6cqw rgba(29, 95, 196, .6), 0 0 0 .35cqw rgba(29, 95, 196, .08); transition: box-shadow .8s ease, border-color .8s ease }
html.story-on .story__screen:not(.is-calm) { border-color: rgba(11, 13, 16, .12); box-shadow: inset 0 1px 0 #fff, 0 3.4cqw 7cqw -3.6cqw rgba(11, 13, 16, .5), 0 1cqw 2cqw -1cqw rgba(11, 13, 16, .12) }
.story__bar { flex: none; display: flex; align-items: center; gap: .5cqw; height: 6.4cqh; padding: 0 1.2cqw; border-bottom: 1px solid var(--rule); background: #fbfaf7 }
.story__bar > i { width: .8cqw; height: .8cqw; border-radius: 50%; background: var(--paper-3) }
.story__screen-title { margin-left: .8cqw; font: 600 min(1.2cqw, 2cqh)/1 var(--font-display) }
/* Monoline glyphs from the page sprite: the search field, the sidebar and the
   waiting rows all draw them at the same weight. */
.story__screen svg:not(.story__check) { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round }
.story__search { margin-left: auto; display: inline-flex; align-items: center; gap: .45cqw; height: 2.3cqw; min-width: 11cqw; padding: 0 .8cqw; border: 1px solid var(--rule); border-radius: 999px; background: #fff; color: var(--text-3); font: 500 min(.85cqw, 1.45cqh)/1 var(--font-body) }
.story__search svg { width: 1cqw; height: 1cqw }
.story__count { margin-left: .6cqw; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .45cqw; min-width: 10cqw; height: 2.3cqw; padding: 0 .7cqw; border-radius: .5cqw; background: var(--accent-wash); color: var(--accent); font: 600 min(.95cqw, 1.6cqh)/1 var(--font-mono); overflow: hidden; transition: background .45s, color .45s }
.story__count-num { display: inline-block; height: 1em; overflow: hidden; line-height: 1; opacity: 0; transition: opacity .3s }
.story__count-col { display: flex; flex-direction: column; transition: transform .55s cubic-bezier(.16, 1, .3, 1) }
.story__count-col i { font-style: normal; height: 1em; line-height: 1 }
.story__count-label { opacity: 0; transition: opacity .3s }
.story__count-done { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .35s, transform .5s cubic-bezier(.16, 1, .3, 1) }
html.story-on .story__count:not(.is-clear) { background: #fdecea; color: #b42318 }
html.story-on .story__count:not(.is-clear) .story__count-num,
html.story-on .story__count:not(.is-clear) .story__count-label { opacity: 1 }
html.story-on .story__count:not(.is-clear) .story__count-done { opacity: 0; transform: translateY(70%) }

/* App body: a slim icon sidebar beside the list, so the screen reads as real
   software rather than a card of bars. */
.story__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 4.2cqw 1fr }
.story__side { display: flex; flex-direction: column; align-items: center; gap: .55cqw; padding: 1.2cqw 0; border-right: 1px solid var(--rule); background: #fbfaf7 }
.story__side-i { display: grid; place-items: center; width: 2.4cqw; height: 2.4cqw; border-radius: .6cqw; color: var(--text-3) }
.story__side-i:last-child { margin-top: auto }
.story__side-i.is-on { background: var(--accent-wash); color: var(--accent) }
.story__side-i svg { width: 1.15cqw; height: 1.15cqw }

/* Rows read as finished in the still hero. In the story each one starts as
   the thing that was waiting (its channel, what it is, how long it sat) and
   flips to what got handled as its prop lands (.is-done). */
.story__rows { display: grid; align-content: start; gap: .9cqh; padding: 1.1cqw 1.2cqw }
.story__row { position: relative; display: grid; grid-template-columns: 2.4cqw minmax(0, 1fr) auto; align-items: center; gap: 1cqw; height: 6.8cqh; padding: 0 1cqw; border: 1px solid var(--accent-edge); border-radius: .8cqw; background: #fff; transition: background .6s ease, border-color .6s ease }
.story__mark { position: relative; width: 2.4cqw; height: 2.4cqw }
.story__ico { position: absolute; inset: 0; display: grid; place-items: center; border-radius: .6cqw; background: #fdf1e4; color: #b4540a; opacity: 0; transform: scale(.6); transition: opacity .3s ease, transform .4s cubic-bezier(.16, 1, .3, 1) }
.story__ico svg { width: 1.2cqw; height: 1.2cqw }
.story__check { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.story__check circle { fill: var(--accent); transform-box: fill-box; transform-origin: center; transition: transform .4s cubic-bezier(.16, 1, .3, 1) }
.story__check path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 0; transition: stroke-dashoffset .35s ease .18s }
.story__row-text { display: grid; min-width: 0 }
.story__row-wait, .story__row-done { grid-area: 1 / 1; display: grid; gap: .45cqh; min-width: 0; transition: opacity .35s ease .12s, transform .6s cubic-bezier(.16, 1, .3, 1) .12s }
.story__row-text b { font: 600 min(1.15cqw, 2cqh)/1.1 var(--font-display); color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.story__row-text small { font: 500 min(.82cqw, 1.45cqh)/1.1 var(--font-body); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.story__row-wait { opacity: 0; transform: translateX(.9cqw); transition-delay: 0s }
.story__meta { display: grid; justify-items: end; align-items: center }
.story__meta > * { grid-area: 1 / 1 }
.story__age { font: 600 min(.82cqw, 1.4cqh)/1 var(--font-mono); letter-spacing: .04em; color: #b4540a; opacity: 0; transition: opacity .3s ease }
.story__tag { font: 600 min(.82cqw, 1.4cqh)/1 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--accent); background: var(--accent-wash); border: 1px solid var(--accent-edge); padding: .4cqw .55cqw; border-radius: .4cqw; transition: opacity .35s ease .24s, transform .6s cubic-bezier(.16, 1, .3, 1) .24s }
html.story-on .story__row:not(.is-done) { background: #fdfcfa; border-color: var(--rule) }
html.story-on .story__row:not(.is-done) .story__ico { opacity: 1; transform: none }
html.story-on .story__row:not(.is-done) .story__check circle { transform: scale(0) }
html.story-on .story__row:not(.is-done) .story__check path { stroke-dashoffset: 16; transition-delay: 0s }
html.story-on .story__row:not(.is-done) .story__row-wait { opacity: 1; transform: none; transition-delay: .12s }
html.story-on .story__row:not(.is-done) .story__row-done,
html.story-on .story__row:not(.is-done) .story__tag { opacity: 0; transform: translateX(-.9cqw); transition-delay: 0s }
html.story-on .story__row:not(.is-done) .story__age { opacity: 1 }
html.story-on .story__row.is-done { animation: story-land .8s cubic-bezier(.16, 1, .3, 1) }
@keyframes story-land { 0% { background: rgba(29, 95, 196, .16); transform: scale(1.02) } 100% { background: #fff; transform: none } }
.story__row.is-ping { animation: story-ping .7s ease-out }
@keyframes story-ping { 0% { box-shadow: 0 0 0 0 rgba(29, 95, 196, .45) } 100% { box-shadow: 0 0 0 .9cqw rgba(29, 95, 196, 0) } }
.story__sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%); transform: translateX(-130%) }
.story__screen.is-sheen .story__sheen { animation: story-sheen 1.3s cubic-bezier(.3, .6, .2, 1) forwards }
@keyframes story-sheen { to { transform: translateX(130%) } }

/* Layer plates. Once the stack opens, each plate shows only a strip along its
   lower edge below the plate above, so the content lives in that strip. */
.story__layer--auto .story__plate { background: #fff; border: 1px solid var(--rule-strong); box-shadow: 0 2cqw 4cqw -2.4cqw rgba(11, 13, 16, .35) }
.story__chain { position: absolute; left: 2.6cqw; right: 2.6cqw; bottom: 3.4cqh; display: flex; align-items: center }
.story__chain > i { flex: 1; min-width: 1cqw; height: 2px; background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 12px); animation: story-flow .9s linear infinite }
@keyframes story-flow { to { background-position: 12px 0 } }
.story__node { display: inline-flex; align-items: center; gap: .45cqw; padding: .65cqw .8cqw; border: 1px solid var(--rule-strong); border-radius: .7cqw; background: #faf9f6; color: var(--text-1); font: 600 min(1cqw, 1.75cqh)/1 var(--font-body); white-space: nowrap }
.story__node svg { width: 1.1cqw; height: 1.1cqw; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.story__node.is-end { background: var(--accent); border-color: var(--accent); color: #fff }
.story__node.is-end svg { color: #fff; stroke-width: 2.6 }
.story__layer--ai .story__plate { background: linear-gradient(135deg, #2a6fd6, #174ea3); border: 1px solid #174ea3; box-shadow: 0 2cqw 4cqw -2cqw rgba(23, 78, 163, .6) }
.story__ai { position: absolute; left: 2.6cqw; right: 2.6cqw; bottom: 3.4cqh; display: flex; align-items: center; gap: .8cqw }
.story__ai img { width: 2.4cqw; height: 2.4cqw; margin-right: .3cqw; filter: brightness(0) invert(1) }
.story__ai-chip { padding: .65cqw .95cqw; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font: 600 min(1cqw, 1.75cqh)/1 var(--font-body); white-space: nowrap }
.story__layer--data .story__plate { background: #fbfaf7; border: 1px solid var(--rule-strong) }
.story__table { position: absolute; left: 2.6cqw; right: 2.6cqw; bottom: 2.6cqh; display: grid; border: 1px solid var(--rule-strong); border-radius: .7cqw; background: #fff; overflow: hidden }
.story__tr { display: grid; grid-template-columns: 1fr 1.7fr .9fr; align-items: center; height: 2.9cqh; padding: 0 1cqw; border-top: 1px solid var(--rule); font: 500 min(.9cqw, 1.55cqh)/1 var(--font-body); color: var(--text-2) }
.story__tr i { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.story__tr i:first-child { color: var(--text-1); font-weight: 600 }
.story__tr--head { border-top: 0; background: #f6f5f2; font: 600 min(.75cqw, 1.3cqh)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3) }
.story__tr--head i:first-child { color: var(--text-3) }
.story__tr b { display: inline-block; padding: .3cqw .55cqw; border-radius: 999px; font: 600 min(.78cqw, 1.35cqh)/1 var(--font-body); background: var(--accent-wash); color: var(--accent) }
.story__tr b.is-paid { background: #e7f5ec; color: #17803d }
.story__layer--tools .story__plate { background: var(--ink-1); border: 1px solid var(--ink-2) }
.story__tools { position: absolute; left: 1.6cqw; right: 1.6cqw; bottom: 2.4cqh; display: grid; grid-template-columns: repeat(9, 1fr); gap: .55cqw }
.story__tile { height: 4cqw; background: #fff; border-radius: .8cqw; display: grid; place-items: center }
.story__tile img { height: 2.45cqw; width: auto; max-width: 80% }
/* The extra logo rows pop in, one tile after another, once the tools layer
   has dropped to show them (.is-dropped, set by hero-story.js). */
.story__tile--extra { opacity: 0; transform: translateY(30%) scale(.7); transition: opacity .3s ease, transform .55s cubic-bezier(.34, 1.56, .64, 1); transition-delay: 0s }
.story__layer--tools.is-dropped .story__tile--extra { opacity: 1; transform: none; transition-delay: calc(var(--t) * 28ms) }
/* Sideways stages lay the logos out in two rows of nine, so the three extra
   logos that share the bottom row with the original six always show. */
@container (orientation: landscape) {
  .story__tile--extra:nth-child(n+10) { opacity: 1; transform: none }
}
.story__tile--more { background: transparent; border: 1px dashed rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .8); font: 600 min(.85cqw, 1.5cqh)/1 var(--font-mono); white-space: nowrap }
.story__pulse { position: absolute; left: 0; top: 0; width: 1.2cqw; height: 1.2cqw; margin: -.6cqw 0 0 -.6cqw; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .25cqw var(--accent), 0 0 1.6cqw .5cqw rgba(29, 95, 196, .6); opacity: 0 }
.story__pulse.is-trail { width: .8cqw; height: .8cqw; margin: -.4cqw 0 0 -.4cqw; background: var(--accent); box-shadow: none }

/* Layer labels (landscape) and the one-line caption (portrait) */
.story__labels { position: absolute; inset: 0; z-index: 65; pointer-events: none }
.story__label { position: absolute; left: 0; top: 0; display: flex; align-items: center; opacity: 0 }
.story__chip { font: 600 max(11px, 1cqw)/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-0); background: rgba(255, 255, 255, .92); border: 1px solid var(--rule-strong); border-radius: .5cqw; padding: .6cqw .75cqw; white-space: nowrap; box-shadow: 0 .8cqw 1.6cqw -1cqw rgba(11, 13, 16, .35) }
.story__chip b { color: var(--accent); margin-right: .5cqw; font-weight: 600 }
.story__leader { width: 4cqw; height: 1px; background: var(--accent); transform-origin: 100% 50% }
.story__dot { width: .7cqw; height: .7cqw; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .25cqw rgba(29, 95, 196, .2) }
.story__caption { display: none }

/* ---------- props: photoreal cutouts that fly into the rows ---------- */
.story__props { position: absolute; inset: 0; z-index: 60; pointer-events: none; display: none }
html.story-on .story__props { display: block }
html.story-on:not(.story-ready) .story__prop { opacity: 0 }
.story__prop { position: absolute; will-change: transform }
/* Two overlapping piles, one each side of the copy, so the props read as a
   real messy desk. Later props in the markup sit on top of earlier ones. */
.story__prop--sheet { left: 0; top: 31cqh; width: min(24cqw, 42cqh) }
.story__prop--sticky { left: 78cqw; top: 27cqh; width: min(17cqw, 30cqh) }
.story__prop--punch { left: 8cqw; top: 56cqh; width: min(18cqw, 31cqh) }
.story__prop--phone { left: 87cqw; top: 45cqh; width: min(11cqw, 19cqh) }
.story__prop--slip { left: 2.5cqw; top: 69cqh; width: min(13cqw, 23cqh) }
.story__prop--invoice { left: 73.5cqw; top: 63cqh; width: min(14cqw, 24cqh) }
.story__card { position: relative; transform-style: preserve-3d; will-change: transform }
.story__face { position: relative; line-height: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden }
.story__face img { display: block; width: 100%; height: auto; filter: drop-shadow(0 .22cqw .28cqw rgba(45, 35, 15, .3)) drop-shadow(0 1.3cqw 1.7cqw rgba(45, 35, 15, .22)) }
.story__back { position: absolute; inset: 0; transform: rotateY(180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; background: #fff; border: 1px solid var(--accent-edge); border-radius: .35cqw; box-shadow: 0 1cqw 2.2cqw -1.2cqw rgba(29, 95, 196, .5) }
.story__prop--phone .story__face { animation: story-buzz 5s infinite }
@keyframes story-buzz { 0%, 88%, 100% { transform: none } 90% { transform: translateX(-.25cqw) } 92% { transform: translateX(.25cqw) } 94% { transform: translateX(-.2cqw) } 96% { transform: translateX(.15cqw) } }
.story__notif { position: absolute; left: 50%; top: 22%; width: min(15cqw, 24cqh); transform: translateX(-50%); display: grid; grid-template-columns: auto 1fr; gap: .25cqw .7cqw; align-items: center; padding: .75cqw .85cqw; background: rgba(255, 255, 255, .95); border-radius: 1.1cqw; box-shadow: 0 1cqw 2cqw -.9cqw rgba(0, 0, 0, .55); line-height: 1.15; text-align: left; animation: story-notif 5s infinite }
.story__notif-icon { grid-row: 1 / 3; width: 2.2cqw; height: 2.2cqw; border-radius: .55cqw; background: #34c759; display: grid; place-items: center }
.story__notif-icon svg { width: 1.2cqw; height: 1.2cqw; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
.story__notif-title { font: 700 1.15cqw/1.1 var(--font-display); color: #111 }
.story__notif-sub { font: 500 .85cqw/1.2 var(--font-display); color: var(--text-3) }
@keyframes story-notif { 0%, 86%, 100% { transform: translateX(-50%) scale(1) } 90% { transform: translateX(-50%) scale(1.06) } }

/* ---------- portrait stages (phones, tall tablets) ---------- */
@container (orientation: portrait) {
  .story__copy { top: 3cqh; width: 90cqw }
  .story__title { font-size: min(8.8cqw, 4.8cqh) }
  .story__stack { left: 5cqw; top: 50cqh; width: 90cqw; height: 44cqh }
  html:not(.story-on) .story__stack { top: 64cqh }
  .story__bar { height: 5.6cqh; padding: 0 3cqw }
  .story__bar > i { width: 1.8cqw; height: 1.8cqw }
  .story__screen-title { font-size: min(3.4cqw, 1.9cqh) }
  .story__count { min-width: 24cqw; height: 5.2cqw; font-size: min(2.6cqw, 1.4cqh) }
  .story__search { display: none }
  .story__count { margin-left: auto }
  .story__body { grid-template-columns: 1fr }
  .story__side { display: none }
  .story__rows { gap: .9cqh; padding: 2.4cqw 3cqw }
  .story__row { grid-template-columns: 5cqw minmax(0, 1fr) auto; gap: 2.4cqw; height: 4.6cqh; padding: 0 2.4cqw; border-radius: 1.6cqw }
  .story__mark { width: 5cqw; height: 5cqw }
  .story__ico { border-radius: 1.2cqw }
  .story__ico svg { width: 2.6cqw; height: 2.6cqw }
  .story__row-text b { font-size: min(3cqw, 1.7cqh) }
  .story__row-text small { display: none }
  .story__age, .story__tag { font-size: min(1.9cqw, 1.05cqh) }
  .story__tag { padding: .8cqw 1.1cqw; border-radius: .9cqw }
  /* Phones open the stack with less room between plates, so each strip holds
     one short line: the flow, the AI chips, the newest table row, the tools. */
  .story__chain, .story__ai, .story__table, .story__tools { left: 4cqw; right: 4cqw; bottom: 1.4cqh }
  .story__node { gap: .8cqw; padding: 1.1cqw 1.4cqw; border-radius: 1.2cqw; font-size: 2.2cqw }
  .story__node svg { width: 2.4cqw; height: 2.4cqw }
  .story__ai { gap: 1.4cqw }
  .story__ai img { width: 4.6cqw; height: 4.6cqw }
  .story__ai-chip { padding: 1.1cqw 1.6cqw; font-size: 2.2cqw }
  .story__ai-chip:last-child { display: none }
  .story__table { border-radius: 1.2cqw }
  .story__tr { height: 4cqh; padding: 0 2cqw; font-size: 2.2cqw }
  .story__tr:not(:last-child) { display: none }
  .story__tr b { padding: .6cqw 1.1cqw; font-size: 2cqw }
  .story__tools { grid-template-columns: repeat(6, 1fr); gap: 1.6cqw }
  .story__tile { height: 7.5cqw; border-radius: 1.2cqw }
  .story__tile img { height: 3.8cqw }
  .story__tile--more { font-size: 1.9cqw }
  /* The props pile up under the copy: from 63% of the stage down, or lower on
     short stages, where the copy ends near 460px in English and 505px in
     Spanish (a longer lead and a headline that wraps to more lines). The lower
     props sit a fixed share of the way from the pile's top to the stage's bottom. */
  .story__props { --pile-top: max(63cqh, 480px) }
  /* Spanish copy runs longer, so the portrait props start lower to stay clear of it. */
  .story[data-lang="es"] .story__props { --pile-top: max(63cqh, 528px) }
  .story__prop--sheet { left: 2cqw; top: var(--pile-top); width: 34cqw }
  .story__prop--sticky { left: 66cqw; top: var(--pile-top); width: 28cqw }
  .story__prop--punch { left: 5cqw; top: calc(var(--pile-top) + .35 * (100cqh - var(--pile-top))); width: 30cqw }
  .story__prop--phone { left: 80cqw; top: calc(var(--pile-top) + .19 * (100cqh - var(--pile-top))); width: 17cqw }
  .story__prop--slip { left: 37cqw; top: calc(var(--pile-top) + .08 * (100cqh - var(--pile-top))); width: 21cqw }
  .story__prop--invoice { left: 58cqw; top: calc(var(--pile-top) + .46 * (100cqh - var(--pile-top))); width: 21cqw }
  .story__notif { width: 30cqw; padding: 1.6cqw 1.8cqw; border-radius: 2.4cqw; gap: .5cqw 1.4cqw }
  .story__notif-icon { width: 4.6cqw; height: 4.6cqw; border-radius: 1.2cqw }
  .story__notif-icon svg { width: 2.6cqw; height: 2.6cqw }
  .story__notif-title { font-size: 2.6cqw }
  .story__notif-sub { font-size: 1.9cqw }
  .story__labels { display: none }
  .story__caption { display: flex; position: absolute; z-index: 65; left: 0; right: 0; bottom: 2.5cqh; margin: 0; padding: 0 4cqw; justify-content: center; flex-wrap: wrap; gap: 1cqw 3cqw; font: 600 max(11px, 2.6cqw)/1.3 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); opacity: 0 }
  .story__caption span { transition: color .3s }
  .story__caption span.is-on { color: var(--accent) }
}
/* Narrow stages stack the two buttons. Side by side they fit or wrap
   depending on which font has loaded, so the swap would move the note. */
@container (max-width: 559px) {
  .story__ctas.row { flex-direction: column }
}
/* Short phones (stages under 640px): one row of smaller props along the
   bottom edge, partly past it. */
@container (orientation: portrait) and (max-height: 639px) {
  .story__prop--sheet { left: 1cqw; width: 22cqw }
  .story__prop--sticky { left: 70cqw; width: 19cqw }
  .story__prop--punch { left: 19cqw; top: calc(var(--pile-top) + 2cqh); width: 20cqw }
  .story__prop--phone { left: 88cqw; top: var(--pile-top); width: 11cqw }
  .story__prop--slip { left: 40cqw; top: calc(var(--pile-top) + 1cqh); width: 15cqw }
  .story__prop--invoice { left: 56cqw; top: var(--pile-top); width: 13.5cqw }
}
/* Phones held upright (stages under 600px wide). The screen sits lower and the
   props pile in the band between the headline and the screen, where the lead
   and buttons were, so they never cover the rows they fly into. At rest
   hero-story.js lowers the pile to just under the note and carries it up
   into this band as the copy clears. The band starts below the
   longest headline (24.5% of the stage, Spanish) and ends above the screen. */
@container (orientation: portrait) and (max-width: 599px) {
  .story__stack { top: 54cqh; height: 44cqh }
  .story__props, .story[data-lang="es"] .story__props { --pile-top: 27cqh }
  .story__prop--sheet { left: 2cqw; top: var(--pile-top); width: min(31cqw, 22cqh) }
  .story__prop--slip { left: 37cqw; top: calc(var(--pile-top) + 1cqh); width: min(14cqw, 10.5cqh) }
  .story__prop--sticky { left: 62cqw; top: var(--pile-top); width: min(20cqw, 14cqh) }
  .story__prop--punch { left: 9cqw; top: calc(var(--pile-top) + 11cqh); width: min(26cqw, 20cqh) }
  .story__prop--invoice { left: 45cqw; top: calc(var(--pile-top) + 10cqh); width: min(13cqw, 10cqh) }
  .story__prop--phone { left: 77cqw; top: calc(var(--pile-top) + 8cqh); width: min(11cqw, 9cqh) }
  /* The stack opens wider apart here (hero-story.js), so each layer's strip
     has room for larger content: the flow chips, AI chips, data row and tools. */
  .story__chain { left: 3cqw; right: 3cqw }
  .story__node { gap: .7cqw; padding: 1.2cqw 1.25cqw; border-radius: 1.5cqw; font-size: 2.45cqw }
  .story__node svg { width: 2.5cqw; height: 2.5cqw }
  /* The Spanish flow labels run longer, so their chips set a size down to fit. */
  .story[data-lang="es"] .story__node { font-size: 2.15cqw }
  .story__ai img { width: 6cqw; height: 6cqw }
  .story__ai-chip { padding: 1.4cqw 2.2cqw; font-size: 2.9cqw }
  .story__tr { height: 5.2cqh; font-size: 2.9cqw }
  .story__tr b { padding: .8cqw 1.5cqw; font-size: 2.6cqw }
  .story__tools { gap: 2cqw }
  .story__tile { height: 11cqw; border-radius: 1.8cqw }
  .story__tile img { height: 5.6cqw }
  .story__tile--more { font-size: 2.5cqw }
}
/* The 560px stage floor is taller than a small phone's screen (an SE shows
   487px under the nav), which cut off the bottom of the pinned stage. */
@media (orientation: portrait) and (max-width: 599px) {
  html.story-on .story__stage { min-height: 0 }
}
/* Phones held sideways: the 560px stage floor is taller than the screen, so
   the sticky stage's lower half never came into view. Fit it to the screen. */
@media (orientation: landscape) and (max-height: 500px) {
  html.story-on .story__stage { min-height: 0 }
}
/* Those short stages: the copy starts higher and the screen a little lower so
   the returning buttons clear it, slimmer buttons keep the Spanish pair on one
   row, and the two bottom props move out from under the note. */
@container (orientation: landscape) and (max-height: 420px) {
  .story__copy { top: 2cqh }
  .story__stack { top: 44cqh }
  .story__ctas .sais-btn { padding-inline: 1rem }
  .story__prop--slip { left: 3cqw }
  .story__prop--invoice { left: 84cqw }
}
/* Still hero on short landscape stages: the finished screen starts below the
   note instead of rising over it (the Spanish copy runs a line longer). */
@container (orientation: landscape) and (max-height: 600px) {
  html:not(.story-on) .story__stack { top: 66cqh }
}