/* Rexship layout (PAGE) · DESIGN-SPEC §4.4 §5.19 §5.20 §6.3 §6.4 §10 §11. The default is the stacked story (no JS,
   reduced motion, Static view, print); pinned split/band live in @media screen. boot.js sets .layout-split/.layout-band
   only together with .story-pinned, so those classes alone scope the pinned layouts. */

/* nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;height:var(--nav-h);padding:0 var(--wrap);background:var(--paper);border-bottom:1px solid var(--rule-strong)}
.wordmark{font:380 var(--fs-wm)/1 var(--serif);letter-spacing:.32em;margin-right:-.32em;text-transform:uppercase;white-space:nowrap}
.wordmark:hover{color:inherit}
.wordmark__by{display:inline-flex;align-items:center;margin-left:14px;font:500 11px/1 var(--mono);letter-spacing:.02em;color:var(--text-3);white-space:nowrap}
.wordmark__by::before{content:"";width:1px;height:14px;margin-right:14px;background:var(--rule-strong)}
.nav__links{display:flex;gap:32px;margin-left:auto}
.nav__links a,.nav__demo,.nav__menu summary{font:500 14px/1 var(--sans);letter-spacing:.005em}
.nav__links a{padding:8px 0}
.nav__links a[aria-current=page]{color:var(--accent)}
.nav__demo{margin-left:36px}
.btn--nav{height:44px;margin-left:24px}
.nav__menu{display:none}
.nav__menu summary{position:relative;display:flex;align-items:center;height:40px;padding:0 30px 0 14px;list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
.nav__menu summary::before,.nav__menu summary::after{content:"";position:absolute;top:50%;right:2px;width:16px;height:1px;background:var(--ink);transition:transform .25s var(--ease-out)}
.nav__menu summary::before{transform:translateY(-3px)}
.nav__menu summary::after{transform:translateY(3px)}
.nav__menu[open] summary::before{transform:rotate(45deg)}
.nav__menu[open] summary::after{transform:rotate(-45deg)}
.nav__panel{position:absolute;top:calc(100% + 1px);left:0;right:0;display:flex;flex-direction:column;padding:4px var(--m) 16px;background:var(--paper);border-bottom:1px solid var(--rule-strong)}
.nav__panel a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--rule);font:500 17px/1 var(--sans)}
.nav__panel a:last-of-type{border:0}
@media (max-width:959px),(orientation:portrait){
.nav__links,.nav__demo{display:none}
.btn--nav{height:40px;margin-left:auto;padding:0 16px}
.btn--nav::after{content:"";position:absolute;inset:-2px 0}
.nav__menu{display:block;margin-left:6px}
}
@media (max-width:479px){.nav .wordmark__by{display:none}}
@media (max-width:379px){.btn--nav .arr{display:none}.btn--nav{padding:0 14px}}
@media (max-width:359px){.wordmark{font-size:14px;letter-spacing:.24em;margin-right:-.24em}.btn--nav{padding:0 10px}.nav__menu summary{width:34px;padding:0;overflow:hidden;text-indent:40px;white-space:nowrap}}

/* shared mono labels */
.fig__cap,.hero__cats,.hero__cue,.act>h2.vh,.record__grid dt{font:500 11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}

/* story: stacked rows (default) */
.story{position:relative;--sl:calc(var(--ox) + var(--m));--fr:calc(var(--ox) + var(--m) + var(--cw) + var(--g))}
.story__stage>.scene,.frame,.story__veil,.hud,.story__index-now,.story__pause,.story__skip .arr,.hero__scroll{display:none}
.beat{display:grid;grid-template-columns:var(--cw) minmax(0,1fr);column-gap:var(--g);align-items:center;padding:80px var(--wrap);border-top:1px solid var(--ink);scroll-margin-top:var(--nav-h)}
.hero{border-top:0;padding-top:48px}
.beat[data-side=r]{grid-template-columns:minmax(0,1fr) var(--cw)}
.beat[data-side=r] .beat__plate{grid-area:1/1}
.beat[data-side=r] .beat__copy{grid-column:2}
.beat.beat--interlude,.beat.beat--coda{grid-template-columns:minmax(0,1fr);row-gap:48px;text-align:center}
.beat.beat--interlude .beat__copy,.beat.beat--coda .beat__copy{grid-area:1/1;max-width:820px;margin:0 auto}
.beat.beat--interlude .beat__plate{grid-area:2/1}
.beat.beat--coda .beat__plate{grid-area:1/1}
.beat.beat--coda .beat__copy{z-index:1;align-self:start;padding-top:clamp(24px,4vw,64px)}
.beat--coda .beat__ctas{justify-content:center}
.beat__plate img{width:100%;max-height:80svh;object-fit:contain}
.beat--interlude .beat__plate img,.beat--coda .beat__plate img{max-height:78svh}
.act>h2.vh{position:static!important;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal;padding:28px var(--wrap) 0;border-top:1px solid var(--ink);letter-spacing:.16em}
.act>h2+.beat{border-top:0;padding-top:40px}
.story__index{padding:28px var(--wrap) 32px;border-top:1px solid var(--ink)}
.story__index ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px 24px}
.story__index li a,.story__skip{font:500 12px/1.9 var(--mono);letter-spacing:.02em}
.story__index li a span{margin-right:6px;color:var(--text-3)}
.story__skip{display:inline-block;margin-top:14px;text-decoration:underline;text-underline-offset:5px}

/* story copy */
.beat__copy>*+*{margin-top:20px}
.beat__copy>.eyebrow+*{margin-top:16px}
.hero__title,.display,.doc__title,.sheet404 h1{font-size:var(--fs-h1);line-height:1.04;letter-spacing:-.015em}
.hero__title,.beat--coda .display{font-size:min(var(--fs-h1),calc(var(--cw) / 9.25))}
.beat__title{font:380 var(--fs-story)/1.08 var(--serif);letter-spacing:-.012em;text-wrap:balance}
.beat--interlude .beat__title{font-size:var(--fs-inter);line-height:1.1;letter-spacing:-.01em}
.beat__body{font-size:var(--fs-sbody);line-height:1.58;color:var(--text-2);text-wrap:pretty}
.beat__copy>.ledger{margin-top:28px}
.beat__ctas,.hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.beat__ctas{gap:14px}
.beat__copy>.beat__ctas{margin-top:32px}
.hero{--hg:1}
.hero .hero__title{margin-top:calc(clamp(12px,2vh,18px) * var(--hg))}
.hero .hero__lede{margin-top:calc(clamp(16px,2.7vh,24px) * var(--hg))}
.hero .hero__ctas{margin-top:calc(clamp(22px,3.6vh,32px) * var(--hg))}
.hero .hero__cats{margin-top:calc(clamp(20px,3.3vh,30px) * var(--hg))}
.hero .hero__cue{margin-top:calc(clamp(8px,1.3vh,12px) * var(--hg))}
.hero__cats{color:var(--text-2)}
.hero__skip{display:inline-flex;align-items:center;gap:6px;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.hero__skip .arr{width:14px;height:14px}
@media (max-width:959px){
.beat,.beat[data-side=r]{grid-template-columns:minmax(0,1fr);row-gap:32px;padding:56px var(--m)}
.hero{padding-top:28px}
.beat[data-side=r] .beat__plate,.beat[data-side=r] .beat__copy{grid-area:auto/1}
.beat__copy{max-width:600px}
.beat.beat--interlude,.beat.beat--coda{text-align:left}
.beat.beat--interlude .beat__copy,.beat.beat--coda .beat__copy{margin:0;padding-top:0}
.beat.beat--coda .beat__plate{grid-area:2/1}
.beat--coda .beat__ctas{justify-content:flex-start}
.beat__copy>.ledger{margin-top:22px}
.story__index ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
.act>h2.vh{padding-top:24px}
}

/* story: pinned (screen only; print always stacks) */
@media screen{
.story-pinned .story{height:var(--runway,calc(100svh * 12.9))}
.story-pinned .story__stage{position:sticky;top:var(--nav-h);height:calc(100svh - var(--nav-h));overflow:clip;contain:layout paint;--datum:.8;transition:opacity 90ms linear}
.layout-band .story__stage{--datum:.46}
.story-pinned .story__stage.is-jumping{opacity:.2}
.story-pinned .story__stage>.scene{display:block;position:absolute;inset:0;width:100%;height:100%}
.intro-pending .story__stage>.scene{visibility:hidden}
.story-pinned .frame{display:block;position:absolute;visibility:hidden;pointer-events:none;top:32px;height:calc(var(--datum) * 100% - 32px);left:var(--sl);right:var(--sl)}
.story-pinned .frame--r{left:var(--fr)}
.story-pinned .frame--l{right:var(--fr)}
.story-pinned .frame--p{left:16px;right:16px;top:16px;height:calc(var(--datum) * 100% - 16px)}
.story-pinned .story__beats{position:absolute;inset:0;z-index:2;pointer-events:none}
.story-pinned .act{display:contents}
.story-pinned .act>h2.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.story-pinned .beat:not(.hero){position:absolute;inset:0;display:block;padding:0;border:0;text-align:left}
.story-pinned .beat__plate{display:none}
.story-pinned .beat__copy{position:absolute;margin:0}
.story-pinned .beat.beat--coda .beat__copy{padding-top:0}
.story-pinned .beat.is-compact .beat__body{font-size:calc(var(--fs-sbody) - 1px)}
.layout-split .beat.is-compact:not(.hero) .ledger,.layout-band .beat.is-tight .ledger{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.story-pinned .hero.is-compact{--hg:.75}
.story-pinned .hero.is-compact .hero__lede{font-size:17px}
.story-pinned .beat--coda .beat__ctas{justify-content:flex-start}
/* copy states (RUNTIME sets data-state; children rise in, staggered 70 ms) */
.story-pinned .beat__copy>*{transition:opacity var(--dur-in) var(--ease-out),transform var(--dur-in) var(--ease-out)}
.story-pinned .beat__copy>:nth-child(2){transition-delay:70ms}
.story-pinned .beat__copy>:nth-child(3){transition-delay:140ms}
.story-pinned .beat__copy>:nth-child(4){transition-delay:210ms}
.story-pinned .beat__copy>:nth-child(5){transition-delay:280ms}
.story-pinned .beat__copy>:nth-child(n+6){transition-delay:350ms}
.story-pinned .beat:not([data-state=in]) .beat__copy{pointer-events:none}
.story-pinned .beat[data-state=in] .beat__copy{pointer-events:auto}
.story-pinned .beat[data-state=idle] .beat__copy>*{opacity:0;transform:translateY(var(--rise));transition:none}
.story-pinned .beat[data-state=out] .beat__copy>*{opacity:0;transform:translateY(var(--drift));transition:opacity var(--dur-out) var(--ease-in),transform var(--dur-out) var(--ease-in)}
.story-pinned .beat[data-instant] .beat__copy>*{transition:none}
/* HUD caption + scale bar */
/* the caption sits 4.13 % of the stage + 9 px under the datum: below the s02-s03 grid bubbles (y -1.6 m at K1, whose
   scale follows the stage height) at every split size. Its text and the index counter get the same 1.5 px paper halo
   as the drawing labels in #ui (paint-order stroke), so a line running under them is knocked out around each glyph */
.story-pinned .hud,.story-pinned .story__index-now,.story-pinned .story__skip{-webkit-text-stroke:3px var(--paper);paint-order:stroke fill}
/* nothing waits for the engine: before it arms, the caption and the index stay hidden (no empty scale bar, no
   index under the hero's cue) */
.intro-pending .story__index,.intro-pending .beat:not(.hero) .beat__copy{visibility:hidden}
/* veils (RUNTIME writes style.opacity) */
.story-pinned .story__veil{display:block;position:absolute;top:0;left:0;width:calc(var(--sl) + var(--cw) + 48px);height:calc(var(--datum) * 100% - 96px);pointer-events:none;background:linear-gradient(to right,var(--paper) calc(100% - 48px),rgb(245 244 240/0));-webkit-mask-image:linear-gradient(#000 calc(100% - 72px),transparent);mask-image:linear-gradient(#000 calc(100% - 72px),transparent);transition:opacity .5s var(--ease-out)}
.story-pinned .story__veil--r{left:auto;right:0;opacity:0;transform:scaleX(-1)}
/* sheet index */
.story-pinned .story__index{position:absolute;z-index:3;padding:0;border:0}
.story-pinned .story__index ol{display:flex;align-items:flex-end;gap:0;height:20px}
.story-pinned .story__index li a{display:block;position:relative;width:24px;height:44px;overflow:hidden;text-indent:100%;white-space:nowrap}
.story-pinned .story__index li a::before{content:"";position:absolute;left:11.5px;bottom:0;width:1px;height:5px;background:var(--rule-strong);transition:height .2s,background-color .2s}
.story-pinned .story__index li a:hover::before{height:8px;background:var(--ink-2)}
.story-pinned .story__index li a[aria-current=step]::before{height:10px;background:var(--ink)}
.story-pinned .story__index li:nth-child(7){margin-left:6px}
@media (pointer:coarse){.story-pinned .story__index li a{width:30px}.story-pinned .story__index li a::before{left:14.5px}}
.story-pinned .story__skip{display:inline-block;margin:0;white-space:nowrap;font:500 11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.story-pinned .story__skip .arr{display:inline-block;width:13px;height:13px;margin-left:6px;vertical-align:-2px}
/* the reader's pause (WCAG 2.2.2): one quiet icon under the art's lower right corner (band: on the copy card's top
   rule at the right edge, below the drawing: on Skip's line it covered the quay and the sea); the drawing is a pause,
   pressed a play */
.story-pinned .story__pause{display:grid;place-items:center;position:absolute;z-index:4;width:44px;height:44px;color:var(--ink-2)}
.story__pause::before{content:"";position:absolute;inset:8px;border:1px solid var(--rule-strong);border-radius:50%;background:var(--paper)}
.story__pause svg{position:relative;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.story__pause[aria-pressed=true] .story__pause-i,.story__pause:not([aria-pressed=true]) .story__play-i{display:none}
.story__pause:hover{color:var(--accent)}
.story__pause:hover::before{border-color:currentColor}
.story__pause:focus-visible{outline:0}
.story__pause:focus-visible::before{outline:2px solid var(--accent);outline-offset:2px}
.intro-pending .story__pause{visibility:hidden}
.layout-split .story__pause{right:calc(var(--sl) - 8px);top:calc(var(--datum) * 100% + 4.13% + 7.7px)}
.layout-band .story__pause{right:0;top:calc(56% - 22px)}
/* split */
.layout-split .hero{position:sticky;top:var(--nav-h);height:calc(100svh - var(--nav-h));margin-bottom:calc(var(--nav-h) - 100svh);z-index:3;display:flex;flex-direction:column;align-items:flex-start;padding:40px 0 calc(.2 * (100svh - var(--nav-h)) + 32px);border:0;pointer-events:none}
.layout-split .hero::before{content:"";flex:0 1 calc(.27 * (100svh - var(--nav-h)) - 40px);min-height:0}
.layout-split .hero .beat__copy{position:relative;top:0;flex:none}
.layout-split .beat__copy{top:var(--copy-top,calc((100svh - var(--nav-h)) * .27));width:var(--cw)}
.layout-split .beat[data-side=l] .beat__copy{left:var(--sl)}
.layout-split .beat[data-side=r] .beat__copy{right:var(--sl)}
.layout-split .story__index{top:calc(var(--datum) * 100% + 4.13% + 4.7px);left:var(--sl);width:var(--cw);display:grid;grid-template-columns:max-content max-content minmax(0,1fr);align-items:end;gap:12px 18px}
.layout-split .story[data-act="2"] .story__index{left:auto;right:var(--sl)}
.layout-split .story__index ol{grid-area:1/1}
/* under ~1300 px the copy column cannot hold the 24 px ticks and "02 / 12 — BEHIND THE COUNTER": keep the counter
   only (the FIG caption beside it names the sheet) */
.layout-split .story__skip{grid-area:2/1}
.layout-split .story[data-beat=s01] .story__skip{visibility:hidden}
/* split hero: never narrower than 400 px; at every split width the K0 shop, its bicycle and the first pedestrian
   start right of that, so narrow windows (960-1140 px) get a two-line category line and shorter lede */
.layout-split .hero{--hcw:max(var(--cw),400px)}
.layout-split .hero .beat__copy{width:var(--hcw)}
.layout-split .hero .hero__title{font-size:min(var(--fs-h1),calc(var(--hcw) / 9.25))}
/* band: hero in flow, art band 0–56 %, copy card 56–100 % */
.layout-band .hero{display:block;padding:24px var(--m) 32px;border:0}
.layout-band .hero .beat__plate,.layout-band .hero .beat__count,.layout-band .story__veil,.layout-band .hud__bar,.layout-band .story__index ol{display:none}
.layout-band .hero .beat__copy{position:static;max-width:600px}
.layout-band .hero .beat__copy>*{opacity:1;transform:none}
.layout-band .story__beats::before{content:"";position:absolute;left:0;right:0;top:56%;bottom:0;background:var(--paper);border-top:1px solid var(--rule)}
.layout-band .beat:not(.hero) .beat__copy{left:16px;right:16px;top:calc(56% + 20px);max-width:600px}
.layout-band .beat:not(.hero) .beat__copy>*+*{margin-top:12px}
.layout-band .beat:not(.hero) .beat__copy>.eyebrow+*{margin-top:10px}
.layout-band .beat__copy>.ledger{margin-top:14px}
.layout-band .ledger>div{padding-top:8px}
.layout-band .beat__copy>.beat__ctas{margin-top:16px}
/* band compaction (RUNTIME's fit adds .is-compact, then .is-snug, .is-tight, .is-tighter, before it gives up):
   toolbar-height phones (360x612-700, 375x627) keep the scroll story; .is-compact tightens the type and keeps the
   REXSHIP row, .is-snug drops the security link, .is-tight the ledger, .is-tighter the eyebrow row too (both stay in
   the accessibility tree) */
.layout-band .beat.is-compact .beat__copy{top:calc(56% + 10px)}
.layout-band .beat.is-compact:not(.hero) .beat__copy>*+*{margin-top:9px}
.layout-band .beat.is-compact:not(.hero) .beat__copy>.eyebrow+*{margin-top:6px}
.layout-band .beat.is-compact .beat__title,.layout-band .beat.is-compact .display{font-size:28px;line-height:1.02}
.layout-band .beat.is-compact .beat__body{font-size:14px;line-height:1.45}
.layout-band .beat.is-tighter .beat__copy>.eyebrow{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.layout-band .beat.is-compact .beat__copy>.ledger{margin-top:10px}
.layout-band .beat.is-compact .ledger>div{padding-top:6px}
.layout-band .beat.is-compact .beat__copy>.beat__ctas{margin-top:12px}
.layout-band .beat.is-compact .beat__ctas .btn{height:44px}
/* portrait tablets: the band card's copy column is centred (the counter on its right edge), the type one step up */
@media (min-width:600px){.layout-band .beat:not(.hero) .beat__copy{left:max(16px,calc(50% - 300px));right:auto;width:min(600px,calc(100% - 32px))}}
@media (min-width:600px) and (min-height:900px){.layout-band .beat:not(.hero):not(.is-compact) .beat__title{font-size:clamp(36px,5.2vw,48px)}.layout-band .beat:not(.hero):not(.is-compact) .beat__body{font-size:19px}}
/* Act II: the sea, the course and the dock section run under the caption, the scale and Skip; each line of text gets
   a paper ground cut tight to its glyphs, as lettering knocks out hatching on a drawing (never a plate) */
.story-pinned .story[data-act="2"] :is(.hud__fig,.hud__scale,.hud__bar-l,.story__skip){background:var(--paper);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.layout-band .story__skip{height:44px}
}
/* short split windows (laptop screens, and a laptop screen minus the browser's chrome: 1366x657, 1280x632 …): the
   hero is set compact by the window height itself, before any script runs, so the fit (§4.4) finds it fitting and
   nothing moves at arm (CLS); .is-compact stays RUNTIME's further step for the rare window that still needs it */
@media screen and (max-height:820px){.layout-split .hero{--hg:.75}.layout-split .hero .hero__lede{font-size:17px}}
@media screen and (max-height:740px){.layout-split .hero,.layout-split .hero.is-compact{--hg:.6}}
@media screen and (max-height:700px){
.layout-split .hero,.layout-split .hero.is-compact{--hg:.45}
.layout-split .hero .hero__title{font-size:min(clamp(36px,min(4vw,5.8vh),64px),calc(var(--hcw) / 9.25))}
.layout-split .hero .hero__lede{font-size:16px;line-height:1.5}
.layout-split .hero .hero__ctas .btn{height:44px}
.layout-split .hero .hero__cats{letter-spacing:.1em}
}
@media screen and (max-height:640px){
.layout-split .hero,.layout-split .hero.is-compact{--hg:.35}
.layout-split .hero .hero__lede{font-size:15.5px}
.layout-split .hero .hero__cue{display:none}
.layout-split .story[data-beat=s01] .story__skip{visibility:visible}
}
@media screen and (max-width:479px){.layout-band .story__skip-x{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}

.mailtoast{position:fixed;z-index:60;top:calc(var(--nav-h) + 12px);right:var(--wrap);display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;max-width:calc(100% - 2 * var(--m));padding:14px 16px;background:var(--paper);border:1px solid var(--rule-strong)}
.mailtoast__line{font:500 12px/1.4 var(--mono);letter-spacing:.02em;color:var(--text-2)}
.mailtoast__close{padding:12px 2px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);text-decoration:underline;text-underline-offset:4px}

/* after the story: shared section frame (§10) */

.footer__grid,.doc__head,.doc__row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}

/* FIG. 13 */

/* cards, roles */

/* steps (how it works, engagement path): circles on one 1.5 px ink line */

/* FIG. 14 title block */
.record{margin-top:96px;border:1px solid var(--ink)}
.record__cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 24px;padding:12px 18px;border-top:1px solid var(--ink)}
.record__cap .fig__cap{color:var(--ink)}
.record__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.record__grid>div{padding:14px 18px 18px;border:0 solid var(--rule);border-right-width:1px}
.record__grid>div:nth-child(4n){border-right-width:0}
.record__grid>div:nth-child(n+5){border-top-width:1px}
.record__grid dd{margin-top:8px;font-size:15px;line-height:1.45;text-wrap:pretty}
.record__grid .sep{margin:0 .2em;color:var(--text-3)}

/* security, plans */

.doc__ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:64px}

/* questions */

/* closing band */

/* footer */
.footer{padding:72px var(--wrap) 36px;border-top:1px solid var(--ink)}
.footer__grid{row-gap:56px}
.footer__brand{grid-column:1/5}
.footer__mark{display:flex;align-items:center}
.footer__line{margin-top:18px;max-width:22em;font-size:15.5px;line-height:1.55;color:var(--text-2)}

.footer__cta{grid-column:10/13;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.footer__base{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:22px;border-top:1px solid var(--rule)}

/* utility pages (§11) */
.doc,.sheet404{padding:96px var(--wrap) var(--pad)}
.doc__head>*{grid-column:4/13}
.doc__head .eyebrow{grid-column:1/4;align-self:start;padding-top:12px}
.doc__title,.sheet404 h1{max-width:14em}
.doc__lede{margin-top:24px;max-width:36em}
.doc__rows{margin-top:96px;border-top:1px solid var(--ink)}
.doc__row{padding:40px 0 44px;border-bottom:1px solid var(--rule);scroll-margin-top:calc(var(--nav-h) + 16px)}
.doc__row>h2{grid-column:1/4;display:flex;flex-direction:column;gap:14px;font-size:28px;line-height:1.12;letter-spacing:-.012em}
.doc__row>h2 span{font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--text-3)}
.doc__body{grid-column:4/12;max-width:40em}
.doc__body p{color:var(--text-2);text-wrap:pretty}
.doc__body p+p{margin-top:14px}
.doc__ctas{margin-top:28px}
.doc__rev{margin-top:40px}
.sheet404 h1{margin-top:56px}
.sheet404 p{margin-top:20px}
.sheet404 .doc__ctas{margin-top:36px}

/* responsive (after the story) */

@media (max-width:1279px){

.footer__brand{grid-column:1/-1}

.footer__cta{grid-column:9/13}
}
@media (max-width:959px){

.footer__cta,.doc__head>*,.doc__head .eyebrow,.doc__row>h2,.doc__body{grid-column:1/-1}

.record{margin-top:64px}
.record__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.record__grid>div:nth-child(4n){border-right-width:1px}
.record__grid>div:nth-child(2n){border-right-width:0}
.record__grid>div:nth-child(n+3){border-top-width:1px}

.footer{padding:56px var(--m) 32px}
.footer__grid{row-gap:44px}

.doc,.sheet404{padding-top:56px}
.doc__rows{margin-top:56px}
.doc__row{padding:32px 0 36px}
.doc__row>h2{margin-bottom:16px}
}
@media (max-width:559px){

.record__grid{grid-template-columns:minmax(0,1fr)}
.record__grid>div,.record__grid>div:nth-child(4n){border-right-width:0}
.record__grid>div:nth-child(n+2){border-top-width:1px}

}

@media (pointer:coarse){
.story__skip,.hero__skip,.nav__demo,.wordmark__by a{position:relative}
.story__skip::after,.hero__skip::after,.nav__demo::after,.wordmark__by a::after{content:"";position:absolute;inset:-13px -4px}
.wordmark__by a::after{inset:-17px -4px}
}
/* portrait tablets: the after-story grids in two columns, the story card's type a step up */
@media (min-width:600px) and (max-width:959px){
:root{--fs-story:clamp(28px,4.2vw,38px);--fs-sbody:17px;--fs-lede:18px}

}
/* wide stages: a copy column wide enough that no story headline breaks into three lines */
@media (min-width:1600px){:root{--cw:540px}}

/* Lenis (per its README) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}

/* reduced motion: everything present, nothing long */
@media (prefers-reduced-motion:reduce){
.beat__copy>*,.nav__menu summary::before,.nav__menu summary::after{transition:none!important}

}

/* forced colours: keep the drawn lines */
@media (forced-colors:active){
.story__index li a::before,.nav__menu summary::before,.nav__menu summary::after,.wordmark__by::before{forced-color-adjust:none;background:CanvasText}
.story__beats::before{forced-color-adjust:none;background:Canvas}
.story-pinned .story__veil{display:none}
.story-pinned .hud,.story-pinned .story__index-now,.story-pinned .story__skip{-webkit-text-stroke:0}
}

/* print: stacked, one sheet per page, mailto addresses printed */
@media print{
@page{margin:14mm}
html,body{background:none}
.nav{position:static;height:auto;padding:0 0 10px;border-bottom:1px solid var(--ink)}
.nav__links,.nav__demo,.btn--nav,.nav__menu,.wordmark__by,.skip,.story__index,.hero__cue,.addr__copy,.addr__status,.footer__cta,.mailtoast{display:none!important}
.beat{break-inside:avoid;break-after:page;padding:32px 0;grid-template-columns:minmax(0,40%) minmax(0,1fr)}
.beat[data-side=r]{grid-template-columns:minmax(0,1fr) minmax(0,40%)}
/* the page is narrower than 960 px, so the narrow-screen rows' single column must be undone for Act II (plate left,
   copy right) and kept for the interlude and coda (copy over a full-width plate) */
.beat[data-side=r] .beat__plate{grid-area:1/1}
.beat[data-side=r] .beat__copy{grid-area:1/2}
.beat.beat--interlude,.beat.beat--coda{grid-template-columns:minmax(0,1fr)}
.beat.beat--interlude .beat__copy,.beat.beat--coda .beat__copy{grid-area:1/1}
.beat.beat--interlude .beat__plate,.beat.beat--coda .beat__plate{grid-area:2/1}
.act>h2.vh{padding-left:0;padding-right:0}
.btn{height:auto;padding:6px 12px;background:none!important;color:var(--ink)!important;border:1px solid var(--ink)!important}
.btn .arr{display:none}
a[href^="mailto:"]::after{content:" (admin@rextail.ai)"}
.addr a.addr__mail::after{content:none}
.footer{padding-left:0;padding-right:0}

.record,.doc__row{break-inside:avoid}
}

/* ==== ONEFEED-SPEC v2.0 (prototype; normative as printed in S5.5) ================================================== */
/* copy-column lists: one family with the ledger (mono keys in the ledger's 64 px column, hairline top). The fact list
   (dl.ledger.ledger--list) and the engagement path (ol.path) set their values in Instrument Sans; the platform list
   (ul.cats) is a mono run, like the hero's category line. All three are skim aids: the body carries every claim a buyer
   must see on a 360 px phone. */
.ledger--list>div{padding-top:8px}
.ledger--list dd,.path li{font:400 14px/1.4 var(--sans);letter-spacing:0;color:var(--text-2)}
.path{border-top:1px solid var(--ink);list-style:none;margin:0;padding:0;counter-reset:p}
.path li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;padding-top:8px;counter-increment:p;color:var(--text)}
.path li::before{content:counter(p,decimal-leading-zero);font:500 12px/19.6px var(--mono);letter-spacing:.14em;color:var(--text-3)}
.cats{display:flex;flex-wrap:wrap;border-top:1px solid var(--rule);font:500 11px/1.7 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);list-style:none;margin:0;padding:10px 0 0}
.cats li{white-space:nowrap}
.cats li:not(:last-child)::after{content:"·";margin:0 .7em;color:var(--text-3)}
.beat__copy>:is(.path,.cats){margin-top:28px}
.beat__more{font-size:15px}
.beat__copy>.beat__more{margin-top:18px}
.coda__line{margin-top:16px}
/* split L1 (.is-compact) hides every ledger-family block and the link, as it hides the ledger today. The lists keep the
   visually-hidden pattern and stay in the accessibility tree; a link leaves with display:none (II.3's link, and the
   path's link, whose plain twin stands in), so nothing invisible takes focus (v2.1) */
.layout-split .beat.is-compact:not(.hero) :is(.path,.cats){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.layout-split .beat.is-compact:not(.hero) .beat__more,.layout-split .beat.is-compact:not(.hero) .path a{display:none}
/* band: the RISK row hides by its role class (never by position); fact lists, path and platform list show every row
   at L0 and L1; L2 (.is-tight) hides them with the ledger; .is-snug, after L1, hides the link (it is also in the
   footer) only when the tightened card still does not fit */
.layout-band .ledger__risk{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.layout-band .beat__copy>:is(.path,.cats){margin-top:14px}
.layout-band .ledger--list>div,.layout-band .path li{padding-top:6px}
.layout-band :is(.ledger--list dd,.path li){font-size:13.5px;line-height:1.35}
.layout-band .path li::before{line-height:18.2px}
.layout-band .cats{padding-top:8px;letter-spacing:.1em}
.layout-band .beat__copy>.beat__more{margin-top:10px}
.layout-band .beat__more{font-size:14px}
.layout-band .beat.is-compact .beat__copy>:is(.path,.cats){margin-top:10px}
.layout-band .beat.is-compact :is(.ledger>div,.path li){padding-top:4px}
.layout-band .beat.is-compact .ledger--list dt{line-height:16.25px}
.layout-band .beat.is-compact :is(.ledger--list dd,.path li){font-size:12.5px;line-height:1.3}
.layout-band .beat.is-compact .path li::before{line-height:16.25px}
.layout-band .beat.is-tight :is(.path,.cats){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.layout-band .beat.is-snug .beat__more,.layout-band .beat.is-tight .path a{display:none}
/* the path's first step is a link (Talk to sales), underlined as a link in running text (v2.1) */
.path a{text-decoration:underline}
/* while the path is hidden, its plain twin stands in for the link: the four steps stay in the accessibility tree and
   no invisible link takes focus (v2.1) */
.path__txt{display:none}
.layout-split .beat.is-compact:not(.hero) .path__txt,.layout-band .beat.is-tight .path__txt{display:inline}
/* "Skip to plans" points forward only: hidden once II.5's sheet is on stage (v2.1) */
.story-pinned .story:is([data-beat=s12],[data-beat=s13]) .story__skip{visibility:hidden}
/* stacked rows: round-1 row padding and plate caps stay; s07 and s13 are Act II rows at >= 960 (v1.2 S5.5) */
@media (min-width:960px){
.beat.beat--interlude,.beat.beat--coda{grid-template-columns:minmax(0,1fr) var(--cw);row-gap:0;text-align:left}
.beat.beat--interlude .beat__copy,.beat.beat--coda .beat__copy{grid-area:1/2;max-width:none;margin:0;padding-top:0}
.beat.beat--interlude .beat__plate,.beat.beat--coda .beat__plate{grid-area:1/1}
.beat--coda .beat__ctas{justify-content:flex-start}
}
/* the aliases inside the story land under the nav in stacked and no-JS */
:is(#problem,#one-platform,#platform,#how,#faq,#security,#plans,#after-story,#contact){scroll-margin-top:calc(var(--nav-h) + 16px)}
/* the slim footer: the company line, one Legal & trust row, Talk to sales with the address plate, the base row */
.footer--slim{padding:48px var(--wrap) 28px}
.footer--slim .footer__grid{row-gap:28px;align-items:start}
.footer--slim .footer__brand{grid-column:1/5}
.footer--slim .footer__links{grid-column:5/10;display:flex;flex-wrap:wrap;gap:10px 22px;padding-top:4px}
.footer--slim .footer__links a{display:inline-flex;align-items:center;gap:6px;font-size:15px;line-height:1.4}
.footer--slim .footer__cta{grid-column:10/13}
.footer--slim .footer__line{margin-top:12px}
.footer--slim .footer__base{padding-top:18px}
@media (max-width:959px){
.footer--slim{padding:40px var(--m) 24px}
.footer--slim .footer__grid{row-gap:24px}
.footer--slim .footer__brand,.footer--slim .footer__links,.footer--slim .footer__cta{grid-column:1/-1}
.footer--slim .footer__links{gap:10px 18px}
.footer--slim .footer__links a{font-size:14px}
}
/* band: the story index spans the stage so the live counter sits on the card's top row (v1.2 S5.5 block 2) */
.layout-band .story__index{inset:0;display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:calc(51% - 22px) 44px calc(5% - 2px) auto minmax(0,1fr);column-gap:28px;padding-right:16px;pointer-events:none}
.layout-band .story__index>*{pointer-events:auto}
.layout-band .story__skip{grid-area:2/2}
.layout-band .story:has(.story__beats .beat.is-compact[data-state=in]) .story__index{grid-template-rows:calc(51% - 22px) 44px calc(5% - 12px) auto minmax(0,1fr)}
/* tall band (portrait tablets): the card has room for the RISK row, and the block (with the live counter on its top
   row) sits lower in it at one offset for every chapter, so titles never jump and the room under the shorter cards is
   shared above and below them; a compact card keeps its 10 px */
@media (min-width:600px) and (min-height:900px){.layout-band .ledger__risk{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal}.layout-band .beat:not(.hero):not(.is-compact) .beat__copy{top:calc(56% + max(20px,(44% - 330px)/2))}.layout-band .story__index{grid-template-rows:calc(51% - 22px) 44px calc(5% - 22px + max(20px,(44% - 330px)/2)) auto minmax(0,1fr)}}
@media screen{.layout-split .story__index li a:is(:hover,:focus-visible){overflow:visible;text-indent:calc(100% + 7px);z-index:1;font:500 10.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);-webkit-text-stroke:3px var(--paper);paint-order:stroke fill}}
@media (forced-colors:active){.layout-split .story__index li a:is(:hover,:focus-visible){-webkit-text-stroke:0}}