/* hero: ACT 1, the night counter. Owner: hero.
   His headline block (h1, sub-line, Order and See how it works) sits on the night, left on desktop; the terminal stands on
   the counter beside a small merchant-app card that rings up example sales. A tap returns the payment request, and the
   camera cranes down onto the counter until the real footage arrives under the parked cutout and the pin cuts to #how.
   Layers (bottom to top): night, dusk + CSS set, counter, footage, light band, card, device, disc marker, hint, foot, phone,
   sheet. Every hover, near and tap state on the terminal is green (--green); gold is only idle decoration.
   Geometry that depends on the viewport (device rect, counter top, disc, hint) is written by js/hero.js; the custom properties
   below are only the first-paint fallback. */

#hero{position:relative;z-index:3;height:calc(var(--pin-h) + 130vh)}
html.reduce #hero{height:var(--pin-h)}

#hero .hero-pin{
  --hero-w:min(25vw,400px); --hero-b:calc(var(--pin-h) * .16); --hero-ct:64%; --hero-bh:100vh;
  --hero-ink:#f2f2f2;
  position:sticky;top:0;height:var(--pin-h);overflow:hidden;background:#070c16;color:var(--hero-ink);
  box-shadow:0 14vh 0 0 #adb5c2;isolation:isolate}
#hero .hero-pin.is-set{box-shadow:0 14vh 0 0 rgb(194,235,253)}

/* 1. night: radial floor light and scanlines */
#hero .hero-night{position:absolute;inset:0;z-index:0;background:
  repeating-linear-gradient(180deg,rgba(255,255,255,.075) 0 1px,transparent 1px 3px),
  radial-gradient(120% 70% at 50% 110%,#26364f 0%,#0e1726 45%,#070c16 100%)}

/* 2. the CSS set the crane dissolves into: frame 1's sky (sampled, rgb 216 236 252). The night lifts through the set's own
   blue first (a colour dissolve, no photo), so the crossfade never passes through grey. */
/* One element: the set's sky, with the dusk as its ::before. The element's opacity lifts it over the night (.06-.20), then
   the dusk inside it thins out to frame 1's sky (--hero-dk, .14-.42). One composited layer instead of two. */
#hero .hero-sky{position:absolute;inset:0;z-index:1;opacity:0;background:linear-gradient(180deg,var(--set-sky) calc(var(--hero-hz,58%) - 70px),rgb(212,233,251) var(--hero-hz,58%)) var(--set-sky)}
#hero .hero-sky::before{content:"";position:absolute;inset:0;opacity:var(--hero-dk,1);background:linear-gradient(180deg,#0e2142 0%,#1d4479 46%,#2f62a4 60%)}
#hero .hero-pin.is-craning :is(.hero-night,.hero-sky,.hero-counter,.hero-tt){will-change:transform,opacity}

/* 3. the counter: a spotlit tabletop, moved only by transform. Its second layer is frame 1's table, sampled with Pillow from
   the footage's right-hand column (tap/001.webp, frame y .58 to 1.0), placed in px of the footage box below the horizon. */
#hero .hero-counter{position:absolute;left:0;right:0;top:var(--hero-ct);height:calc(100% - var(--hero-ct) + 30%);z-index:2}
#hero .hero-cin{position:absolute;inset:0;background:
  radial-gradient(78% 100% at 50% 0%,#f7f8fa 0%,#e7ebf0 38%,#ced5de 72%,#adb5c2 100%) 0 0/100% var(--hero-cv,62%) no-repeat,#adb5c2}
#hero .hero-tab{position:absolute;inset:0;opacity:0;background:linear-gradient(180deg,
  rgb(212,233,251) 0,
  rgb(205,229,249) calc(var(--hero-bh) * .006),
  rgb(198,224,247) calc(var(--hero-bh) * .016),
  rgb(187,217,241) calc(var(--hero-bh) * .029),
  rgb(176,207,238) calc(var(--hero-bh) * .043),
  rgb(162,200,232) calc(var(--hero-bh) * .058),
  rgb(145,189,227) calc(var(--hero-bh) * .073),
  rgb(133,180,224) calc(var(--hero-bh) * .088),
  rgb(123,174,221) calc(var(--hero-bh) * .103),
  rgb(115,171,218) calc(var(--hero-bh) * .118),
  rgb(114,170,217) calc(var(--hero-bh) * .147),
  rgb(121,176,219) calc(var(--hero-bh) * .192),
  rgb(134,184,224) calc(var(--hero-bh) * .236),
  rgb(147,194,228) calc(var(--hero-bh) * .281),
  rgb(166,212,238) calc(var(--hero-bh) * .325),
  rgb(186,228,248) calc(var(--hero-bh) * .370),
  rgb(194,235,253) calc(var(--hero-bh) * .420))}
#hero .hero-rim{position:absolute;left:0;right:0;top:-1px;height:1px;background:rgba(255,255,255,.9)}

/* 4. footage: frame 1 composed exactly as #how composes it (CT.footage.draw + core's .ft-set plate) */
#hero .hero-ft{position:absolute;inset:0;z-index:3;opacity:0;transition:opacity 180ms linear}
#hero .hero-ft.is-on{opacity:1}

/* contact light band */
#hero .hero-band{position:absolute;left:0;right:0;top:calc(var(--pin-h) - var(--hero-b));height:1px;z-index:4;background:rgba(255,255,255,.5);opacity:0;pointer-events:none}

/* 5. the merchant-app card: an example sale rung up beside the terminal. js/hero.js places it (left/top) on wide screens and
   cycles the sales; the markup is the first sale, paid, which is what no-JS and reduced motion show. */
#hero .hero-card{position:absolute;left:calc(100% - var(--g) - 264px);top:30%;z-index:5;width:clamp(244px,18vw,272px);padding:14px 16px 6px;
  background:#0e1726;border:1px solid rgba(242,242,242,.14);color:var(--hero-ink);pointer-events:none;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.75);transition:opacity .3s linear}
#hero .hero-pin.is-sheet .hero-card{opacity:.25}
#hero .hc-head{display:flex;justify-content:space-between;align-items:center;gap:10px;height:20px;white-space:nowrap;font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
#hero .hc-cap{color:rgba(242,242,242,.55)}
#hero .hc-chip{display:inline-flex;align-items:center;gap:7px;height:20px;padding:0 7px;box-shadow:inset 0 0 0 1px rgba(242,242,242,.22);
  color:rgba(242,242,242,.85);transition:background-color .24s linear,box-shadow .24s linear,color .24s linear}
#hero .hc-dot{flex:none;width:5px;height:5px;border-radius:50%;background:rgba(242,242,242,.5)}
#hero .hc-chip[data-s=wait] .hc-dot{background:#f2f2f2;animation:hero-standby 1.6s ease-in-out infinite}
#hero .hc-chip[data-s=paid]{background:var(--green);box-shadow:none;color:#fff}
#hero .hc-chip[data-s=paid] .hc-dot{background:#fff}
@keyframes hero-standby{0%,100%{opacity:.35}50%{opacity:1}}
#hero .hero-pin.is-off .hc-dot{animation-play-state:paused}
#hero .hc-st{display:block;line-height:20px}
#hero .hc-item{margin-top:14px;font-size:14px;line-height:18px;color:rgba(242,242,242,.72);white-space:nowrap}
#hero .hc-it{display:block}
#hero .hc-amt{margin-top:2px;font-weight:300;font-size:32px;line-height:40px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
#hero .hc-rows{margin:10px 0 0;padding:0;border-top:1px solid rgba(242,242,242,.16)}
#hero .hc-rows>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;height:30px;
  font:400 11px/30px var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
#hero .hc-rows>div+div{border-top:1px solid rgba(242,242,242,.1)}
#hero .hc-rows dt{color:rgba(242,242,242,.55)}
#hero .hc-rows dd{margin:0;font-variant-numeric:tabular-nums}
#hero .hc-keep dt{color:rgba(242,242,242,.8)}
#hero .hc-keep dd{font-weight:500}
#hero .hc-rate{display:inline-block;margin-left:.4em;color:rgba(242,242,242,.8)}
#hero .hc-fv,#hero .hc-kv{display:block}
html.reduce #hero .hc-chip,html.reduce #hero .hc-dot{transition:none;animation:none}
html.reduce #hero :is(.hero-ft,.hero-tt,.hero-phone,.hero-card){transition:none}

/* 6. the device: laid out at its largest size in the sequence, moved and only ever scaled down by transform */
#hero .hero-tt{position:absolute;left:calc(50% - var(--hero-w) / 2);top:calc(var(--pin-h) - var(--hero-b) - var(--hero-w) * .8473);width:var(--hero-w);height:calc(var(--hero-w) * .8473);
  z-index:6;display:block;padding:0;border:0;background:none;transform-origin:0 0;pointer-events:none;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
#hero .hero-tt:focus-visible{outline:none}
#hero .hero-tt::after{content:"";position:absolute;left:50%;top:50%;width:max(calc(100% + 24px * var(--hero-k,1)),calc(88px * var(--hero-k,1)));height:max(calc(100% + 24px * var(--hero-k,1)),calc(88px * var(--hero-k,1)));transform:translate(-50%,-50%);pointer-events:none;cursor:pointer}
#hero .hero-pin.is-hot .hero-tt::after{pointer-events:auto}
#hero .hero-pin.is-phone .hero-tt::after{cursor:none}
/* the press: a 1px green ellipse on the counter plane around the whole base (outside the thumb), and the floor rings that the
   tap sweeps out across the counter. Both sit under the device, in the device's own (scaled) box. */
#hero .hero-floor{position:absolute;inset:0;display:block;pointer-events:none;clip-path:inset(60% -100% -100% -100%)}   /* the counter plane only: nothing rides up into the air */
#hero .hero-gr{position:absolute;left:-7%;width:114%;top:19%;height:94%;display:block;border-radius:50%;border:calc(1px * var(--hero-k,1)) solid var(--green);opacity:0;transform:scale(1.06);transition:opacity .16s linear,transform .32s cubic-bezier(.16,1,.3,1);pointer-events:none}
#hero .hero-tt.is-press .hero-gr{opacity:1;transform:none}
#hero .hero-tt{transition:opacity 180ms linear}
#hero .hero-tt.is-gone{opacity:0}
#hero .hero-drop,#hero .hero-ib,#hero .hero-sh{position:absolute;display:block}
#hero .hero-drop{inset:0}
#hero .hero-ib{left:0;top:0;width:100%;height:100%}
#hero .hero-ib img{position:relative;display:block;width:100%;height:100%;max-width:none;pointer-events:none;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
/* s1 sits over hero.webp. Forward: s1 dissolves in over the still-opaque hero.webp, which drops out when it is done.
   Back: hero.webp is restored underneath at once and s1 dissolves out. Never a half-transparent double over the set. */
#hero .hero-ib-h{transition:opacity 0s}
#hero .hero-ib-s{opacity:0;transition:opacity 180ms linear}
#hero .hero-ib-s img{filter:brightness(1.38) saturate(.68)}
#hero .hero-tt.is-s1 .hero-ib-h{opacity:0;transition:opacity 0s linear 180ms}
#hero .hero-tt.is-s1 .hero-ib-s{opacity:1}
#hero .hero-fill{position:absolute;inset:0;width:100%;height:100%;max-width:none;fill:#eef1f4;pointer-events:none}
#hero .hero-ib-s .hero-fill{fill:#eaf0f5}
#hero .hero-hit{position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:visible;pointer-events:none}
#hero .hero-focus{fill:none;stroke:var(--green);vector-effect:non-scaling-stroke;pointer-events:none;stroke-width:2;opacity:0}
#hero .hero-tt:focus-visible .hero-focus{opacity:1}
/* contact shadows, drawn as radial-gradient ellipses (no filter: nothing is re-filtered per frame at 3x). Each pair hugs its image's base, an ellipse fitted offline to the
   lowest silhouette pixel of every column (hero.webp: centre 50%/61.8%, radii 46.3%/38.0% of the silhouette; s1.webp: centre
   427/372, radii 394/174 of its 844x559 box). Tight: a dark contact crescent. Wide: soft occlusion around the base. */
#hero .hero-sh{--c:10,12,16;pointer-events:none}
#hero .hero-sh-t{left:2.4%;width:95.2%;top:23.6%;height:78.4%;background:radial-gradient(closest-side,rgba(var(--c),.55) 92%,rgba(var(--c),0) 100%)}
#hero .hero-sh-w{left:-9%;width:118%;top:16%;height:100%;background:radial-gradient(closest-side,rgba(var(--c),.25) 62%,rgba(var(--c),.12) 80%,rgba(var(--c),0) 100%)}
#hero .hero-tt>.hero-sh{transition:opacity 0s}
#hero .hero-tt.is-s1>.hero-sh{opacity:0;transition:opacity 0s linear 180ms}
#hero .hero-ib-s .hero-sh{--c:16,48,96}
#hero .hero-ib-s .hero-sh-t{left:2.7%;width:95.8%;top:34.8%;height:64.6%;background:radial-gradient(closest-side,rgba(var(--c),.5) 92%,rgba(var(--c),0) 100%)}
#hero .hero-ib-s .hero-sh-w{left:-6%;width:113%;top:27%;height:84%;background:radial-gradient(closest-side,rgba(var(--c),.22) 62%,rgba(var(--c),.1) 80%,rgba(var(--c),0) 100%)}

/* the landed disc centre (chrome parks its standby dot here) */
#hero #heroDisc{position:absolute;left:calc(50% + var(--hero-w) * .011);bottom:calc(var(--hero-b) + var(--hero-w) * .3687);width:1px;height:1px;z-index:7;pointer-events:none}

/* 8. hint: the terminal's own readout under it, centred on the device (js writes left). The LED blinks gold while idle and
   turns green, steady, while a phone is near or pressing; the meter beside it lights green with the field. */
#hero .hero-hint{position:absolute;left:50%;top:calc(var(--pin-h) - var(--hero-b) + 18px);z-index:7;display:flex;align-items:center;transform:translateX(-50%);pointer-events:none}
#hero .hero-mask{display:block;overflow:hidden;padding:0 .2em}
#hero .hero-mask>span{display:block}
#hero .hero-hint>.hero-mask{padding:0 .5em}
#hero .hero-hint-t{display:block;font:500 12px/16px var(--mono);letter-spacing:.14em;color:rgba(14,23,38,.78);white-space:nowrap}
#hero .hero-hint-t::before{content:"";display:inline-block;width:6px;height:6px;margin-right:.8em;border-radius:50%;background:#d9ad12;vertical-align:1px;animation:hero-hint-led 1.2s steps(2,jump-none) infinite;transition:background-color .12s linear}
#hero .hero-pin:is(.is-phone,.is-press) .hero-hint-t::before,#hero .hero-hint.is-gone .hero-hint-t::before{background:var(--green);animation:none}
@keyframes hero-hint-led{50%{opacity:.25}}
html.reduce #hero .hero-hint-t::before{animation:none}
#hero .hero-hint:is(.is-gone,.is-hid) .hero-hint-t::before,#hero .hero-pin.is-off .hero-hint-t::before{animation:none}
#hero .hero-pin.is-sheet .hero-hint-t::before{animation-play-state:paused}
/* field meter: unlit segments are dim solid cells, like an LED ladder */
#hero .hero-meter{display:flex;gap:3px;margin-left:4px}
#hero .hero-meter i{display:block;width:5px;height:10px;background:rgba(14,23,38,.16);transition:background-color .12s linear}
#hero .hero-meter i.on{background:var(--green)}
html.reduce #hero .hero-meter i{transition:none}
/* after the first tap the hint is gone; the meter stays lit through the tap, then leaves with it */
#hero .hero-meter{transition:opacity .3s linear}
#hero .hero-hint.is-gone .hero-meter{opacity:0;transition-delay:.6s}

/* 7. foot: his headline block. Wide screens: on the night, left, in paper; js writes its width and top from the device's
   column. Tablets and phones: on the lit counter under the device, in ink. */
#hero .hero-foot{position:absolute;left:var(--g);top:calc(var(--bar-h) + var(--nav-h) + 10vh);z-index:8;width:min(44vw,640px);color:var(--hero-ink)}
#hero .hero-foot{transition:opacity .3s linear}
#hero .hero-pin.is-sheet .hero-foot{opacity:0;transition-duration:.2s}
#hero .hero-h1{font-weight:400;font-size:clamp(40px,min(3.9vw,6.4vh),60px);line-height:1.05;letter-spacing:-.026em;text-wrap:balance}
#hero .hero-p{margin-top:18px;max-width:40ch;color:rgba(242,242,242,.7);font-size:clamp(17px,1.25vw,19px);line-height:1.45;text-wrap:pretty}
#hero .hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
#hero .hero-more{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:44px;padding:0 18px;box-shadow:inset 0 0 0 1px rgba(242,242,242,.4);
  font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--hero-ink);
  -webkit-tap-highlight-color:transparent;transition:background-color .2s linear,color .2s linear,box-shadow .2s linear,transform 80ms linear}
#hero .hero-more svg{width:10px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;transition:transform .38s var(--out)}
@media (hover:hover){
  #hero .hero-more:hover{background:var(--hero-ink);box-shadow:none;color:var(--ink)}
  #hero .hero-more:hover svg{transform:translateY(2px)}
}
#hero .hero-more:active{transform:translateY(1px)}
html.reduce #hero .hero-more svg{transition:none}
/* the CrypTap Go line under the buttons: one quiet text link to #go */
#hero .hero-go{display:inline-block;padding:7px 0;margin-top:8px;font-size:14px;line-height:1.3;color:rgba(242,242,242,.72);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(242,242,242,.32);transition:color .2s linear,text-decoration-color .2s linear}
#hero .hero-go b{font-weight:500;color:var(--hero-ink)}
#hero .hero-go-a{display:inline-block;margin-left:7px;text-decoration:none;transition:transform .38s var(--out)}
@media (hover:hover){ #hero .hero-go:hover{color:var(--hero-ink);text-decoration-color:var(--gold)} #hero .hero-go:hover .hero-go-a{transform:translateX(4px)} }

/* trusted by: the live merchants in one quiet row under the Go line, linking to trusted-businesses.html. The marks are the
   ink PNGs the map section uses: inverted to paper on the night (wide), left in ink on the lit counter (stacked, phones).
   Bridge Poker Club and The 420 Connect have no mark that reads as their name, so they are set in the wordmark face. */
#hero .hero-tb{display:block;width:fit-content;max-width:100%;margin-top:clamp(14px,2.6vh,26px);padding-top:12px;border-top:1px solid rgba(242,242,242,.14);
  color:rgba(242,242,242,.5);-webkit-tap-highlight-color:transparent}
#hero .hero-tb-l{display:block;font:400 11px/14px var(--mono);letter-spacing:.1em;text-transform:uppercase;transition:color .2s linear}
#hero .hero-tb-m{display:flex;flex-wrap:wrap;align-items:center;column-gap:clamp(14px,1.3vw,24px);row-gap:10px;margin-top:11px;min-height:28px}
#hero .hero-tb-m img{display:block;flex:none;width:auto;max-width:none;filter:brightness(0) invert(1);opacity:.72;transition:opacity .2s linear}
#hero .hero-tb-jw,#hero .hero-tb-ex{height:clamp(24px,2vw,28px)}
#hero .hero-tb-hc{height:clamp(11px,.92vw,13px)}
#hero .hero-tb-kl{height:clamp(12px,1vw,14px)}
#hero .hero-tb-wm{flex:none;font:400 clamp(13px,.98vw,14.5px)/1 var(--mark);letter-spacing:-.01em;white-space:nowrap;color:rgba(242,242,242,.66);transition:color .2s linear}
@media (hover:hover){
  #hero .hero-tb:hover .hero-tb-l{color:rgba(242,242,242,.8)}
  #hero .hero-tb:hover .hero-tb-m img{opacity:.95}
  #hero .hero-tb:hover .hero-tb-wm{color:var(--hero-ink)}
}
#hero .hero-tb:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
/* the row is sized by his block's width (js writes it on wide screens): tighter first, then the two set names step out, then
   the label keeps only "Trusted by". js/hero.js drops the row (.is-notb) when a short screen has no room for it above the
   counter. */
#hero .hero-foot{container-type:inline-size}
@container (max-width:590px){
  #hero .hero-tb-m{column-gap:12px}
  #hero .hero-tb-wm{font-size:12.5px}
  #hero .hero-tb-hc{height:10.5px}
  #hero .hero-tb-kl{height:11.5px}
}
@container (max-width:470px){
  #hero .hero-tb-wm,#hero .hero-tb-ll{display:none}
  #hero .hero-tb-m{column-gap:16px}
}
#hero .hero-pin.is-notb .hero-tb{display:none}

/* pointer-phone (desktop mouse only) */
#hero .hero-pin.is-phone,#hero .hero-pin.is-phone .hero-hit-e{cursor:none}
#hero .hero-phone{position:absolute;left:0;top:0;z-index:9;width:60px;height:120px;max-width:none;margin:-60px 0 0 -30px;overflow:visible;pointer-events:none;opacity:0;transition:opacity .15s linear}
#hero .hero-phone.is-on{opacity:1}
/* the demo ghost: the pointer-phone's outline drawn as a phone (glass body, screen edge, island), driven only by WAAPI; its
   contact shadow gathers on the disc as it comes down (a soft contact shadow, like the device's own) */
#hero .hero-ghost{position:absolute;left:0;top:0;z-index:9;width:60px;height:120px;max-width:none;margin:-60px 0 0 -30px;overflow:visible;pointer-events:none;opacity:0}
#hero .hero-ghost-sh{position:absolute;left:0;top:0;z-index:8;width:64px;height:120px;margin:-60px 0 0 -32px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(10,12,16,.55) 70%,rgba(10,12,16,0) 100%);opacity:0;pointer-events:none}

/* the payment request sheet */
#hero #heroSheet{position:absolute;left:0;right:0;bottom:24px;z-index:10;width:min(440px,calc(100% - 2 * var(--g)));margin:0 auto;padding:20px 22px 22px;
  max-height:var(--hero-sxmax,none);overflow-y:auto;overscroll-behavior:contain;background:#ffffff;border:1px solid var(--ink);color:var(--ink)}
#hero .hero-sx-h{display:none}
#hero .hero-pin.is-wide #heroSheet{left:var(--g);right:auto;top:var(--hero-sxt);bottom:auto;margin:0}
#hero .hero-scrim{position:absolute;left:0;right:0;top:var(--hero-scr,50%);bottom:0;z-index:9;background:rgba(7,8,11,.4);opacity:0;pointer-events:none;transition:opacity .3s linear}
#hero .hero-pin.is-sheet .hero-scrim{opacity:1}
html.reduce #hero .hero-scrim{transition:none}
#hero #heroSheet[hidden]{display:none}
#hero .hero-sx-t{color:var(--ink)}
#hero .hero-sx-line{margin:12px 0 16px;font-weight:400;font-size:20px;line-height:1.3;letter-spacing:-.01em;text-wrap:pretty}
#hero .hero-sx-rows{margin:0;padding:0}
#hero .hero-sx-rows>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0;border-top:1px solid rgba(14,23,38,.14)}
#hero .hero-sx-rows>div:last-child{border-bottom:1px solid rgba(14,23,38,.14)}
#hero .hero-sx-rows dt{font-size:14px;color:var(--ink-2)}
#hero .hero-sx-rows dd{margin:0;font:400 13px/1.4 var(--mono);text-align:right}
#hero .hero-sx-foot{margin-top:14px;font-size:14px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}
#hero .hero-sx-b{display:flex;gap:10px;margin-top:18px}
#hero .hero-sx-rows>div{flex-wrap:wrap;row-gap:2px}
#hero .hero-sx-rows dd.hero-sx-once{flex:0 0 100%;margin:0;text-align:left;font-size:12px;color:var(--ink-2)}
#hero .hero-sx-b .btn{flex:1}
#hero .hero-sx-no{flex:none;min-width:112px;white-space:nowrap;height:44px;padding:0 18px;border:1px solid var(--ink);font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;transition:background-color .2s linear,color .2s linear}
@media (hover:hover){#hero button.hero-sx-no:hover{background:var(--ink);color:#ffffff}}


/* pre-ready states (html.js only, so no-JS shows the finished hero). A 6s safety reveal never lets a stalled 'ready' hide it. */
html.js:not(.reduce) #hero .hero-pin:not(.is-live) :is(.hero-cin,.hero-rim,.hero-drop,.hero-tt>.hero-sh,.hero-mask>span,.hero-card){animation:hero-safe 0s 6s forwards}
/* until the page is ready, the pin's top is clipped under the bar and nav, so nothing falling shows through them */
html.js:not(.reduce) body:not(.ready) #hero .hero-pin{clip-path:inset(calc(var(--bar-h) + var(--nav-h)) 0 0 0)}
html.js:not(.reduce) #hero .hero-pin:not(.is-live) .hero-cin{transform:translateY(40px)}
html.js:not(.reduce) #hero .hero-pin:not(.is-live) .hero-rim{transform:scaleX(0)}
html.js:not(.reduce) #hero .hero-pin:not(.is-live) .hero-drop{transform:translateY(-200vh)}
html.js:not(.reduce) #hero .hero-pin:not(.is-live) .hero-tt>.hero-sh{transform:scale(1.8);opacity:.1}
html.js:not(.reduce) #hero .hero-pin:not(.is-live) .hero-tt>.hero-sh-t{opacity:0}
html.js:not(.reduce) #hero .hero-pin:not(.is-live) .hero-mask>span{transform:translateY(105%)}
html.js:not(.reduce) #hero .hero-pin:not(.is-live) .hero-card{opacity:0}
@keyframes hero-safe{to{transform:none;opacity:1;clip-path:inset(0);visibility:visible}}

/* the crane's mid-beat: his pillar and its two lines, set in the empty sky. Rendered on the night in paper, they turn to ink
   as the set's light comes up (.is-day). Each line is a CT.lines mask; all of it is out (and visibility:hidden) by P .62. */
#hero .hero-crane{position:absolute;left:var(--g);top:30%;z-index:7;width:min(30vw,420px);color:#f2f2f2;pointer-events:none;transition:color .24s linear}
#hero .hero-crane.is-day{color:var(--ink)}
#hero .hero-cr-tab{width:fit-content;margin:0 0 14px;font-family:var(--cond);font-weight:600;font-size:12px;line-height:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
#hero .hero-cr-tab .ln>span{padding:4px 8px;margin:0;background:#d9ad12}
#hero .hero-cr-tab .ln{padding:0;margin:0}
#hero .hero-cr-l{font-weight:400;font-size:24px;line-height:1.15;letter-spacing:-.015em;text-wrap:balance}
#hero .hero-cr-l+.hero-cr-l{margin-top:8px}
#hero .hero-cr-p{display:none}
html.reduce #hero .hero-crane{display:none}
html:not(.js) #hero .hero-crane{display:none}

/* the device's first-paint place on wide screens: right of centre, its right edge 32px short of the card (js/hero.js then
   lays out the exact geometry from the headline block) */
#hero .hero-tt{left:calc(100% - var(--g) - clamp(244px,18vw,272px) - 32px - var(--hero-w))}

/* STACKED (tablets, portrait screens, phones): the card centred under the nav, the device on the counter, and his block on
   the lit counter at the foot, in ink */
@media (max-width:1023px),(orientation:portrait){
  #hero .hero-pin{--hero-w:min(50vw,360px);--hero-b:calc(var(--pin-h) * .36);--hero-ct:50%}
  #hero .hero-tt{left:calc(50% - var(--hero-w) / 2)}
  #hero .hero-card{left:50%;top:calc(var(--bar-h) + var(--nav-h) + 16px);translate:-50% 0}
  #hero .hero-foot{top:auto;bottom:22px;left:var(--g);right:var(--g);width:auto;color:var(--ink)}
  #hero .hero-h1{font-size:clamp(28px,4.2vw,40px);line-height:1.08;letter-spacing:-.022em;max-width:24ch}
  #hero .hero-p{margin-top:10px;max-width:46ch;color:var(--ink-2);font-size:17px}
  #hero .hero-cta{margin-top:18px}
  #hero .hero-more{box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink)}
  @media (hover:hover){ #hero .hero-more:hover{background:var(--ink);color:#fff} }
  #hero .hero-go{color:var(--ink-2);text-decoration-color:rgba(14,23,38,.3)}
  #hero .hero-go b{color:var(--ink)}
  @media (hover:hover){ #hero .hero-go:hover{color:var(--ink)} }
  #hero .hero-crane{top:28%;width:min(40vw,320px)}
  #hero .hero-tb{color:var(--ink-2);border-top-color:rgba(14,23,38,.14)}
  #hero .hero-tb-m img{filter:none;opacity:.6}
  #hero .hero-tb-wm{color:rgba(14,23,38,.7)}
  @media (hover:hover){ #hero .hero-tb:hover .hero-tb-l{color:var(--ink)} #hero .hero-tb:hover .hero-tb-m img{opacity:.95} #hero .hero-tb:hover .hero-tb-wm{color:var(--ink)} }
  #hero .hero-cr-l{font-size:22px}
}
/* portrait tablets: first-paint fallback for the device size js/hero.js computes (it grows with a tall stage) */
@media (orientation:portrait) and (min-width:600px){
  #hero .hero-pin{--hero-w:max(min(30vw,440px),min(calc(var(--pin-h) * .36),50vw,520px))}
}

/* PHONES (<600, portrait). Top to bottom: the card as a compact strip, the device, the hint, his block (h1, sub-line, the two
   buttons side by side). js/hero.js lays the device and the hint out from pin.offsetHeight between the card and the foot. */
@media (max-width:599px){
  #hero .hero-pin{--hero-w:clamp(180px,62vw,300px);--hero-b:calc(var(--pin-h) * .40);--hero-ct:42%}
  #hero .hero-card{left:max(var(--g),var(--safe-l));right:max(var(--g),var(--safe-r));top:calc(var(--bar-h) + var(--nav-h) + 10px);width:auto;translate:none;
    display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;padding:9px 12px 0;box-shadow:none}
  #hero .hc-head{grid-column:1/-1}
  #hero .hc-item{grid-column:1;grid-row:2;margin-top:6px;font-size:13px;line-height:28px;overflow:hidden;text-overflow:ellipsis}
  #hero .hc-amt{grid-column:2;grid-row:2;margin-top:6px;font-size:20px;line-height:28px;text-align:right}
  #hero .hc-rows{grid-column:1/-1;display:flex;justify-content:space-between;gap:10px;margin-top:6px}
  #hero .hc-rows>div{height:28px;line-height:28px;font-size:10.5px;letter-spacing:.04em;gap:8px}
  #hero .hc-rows>div+div{border-top:0}
  #hero .hc-rate{margin-left:.3em}
  #hero .hero-hint-t{font-size:11px;line-height:16px;letter-spacing:.12em}
  #hero .hero-meter i{height:9px}
  #hero .hero-foot{left:max(var(--g),var(--safe-l));right:max(var(--g),var(--safe-r));bottom:calc(14px + var(--safe-b))}
  #hero .hero-h1{font-size:26px;line-height:1.08;letter-spacing:-.024em;max-width:none}
  #hero .hero-p{margin-top:8px;max-width:none;font-size:15px;line-height:1.4}
  #hero .hero-p2{display:none}
  #hero .hero-cta{flex-wrap:nowrap;gap:8px;margin-top:14px}
  #hero .hero-cta>*{flex:1 1 auto;min-width:0;padding:0 12px;font-size:13px;letter-spacing:.06em}
  #hero .hero-cta .btn{flex-grow:1.4;gap:9px}
  #hero .hero-more{gap:9px}
  #hero .hero-go{margin-top:4px;padding:6px 0;font-size:13.5px}
  #hero .hero-go-l{display:none}
  /* trusted by, phones: one row, the short label then four marks; if the row is wider than the screen it scrolls sideways
     under a fade (images only in the scroller, so no text is ever clipped) */
  #hero .hero-tb{display:flex;align-items:center;gap:12px;width:auto;margin-top:6px;padding-top:9px}
  #hero .hero-tb-l{flex:none;font-size:10.5px;letter-spacing:.08em}
  #hero .hero-tb-ll,#hero .hero-tb-wm{display:none}
  #hero .hero-tb-m{flex:1 1 auto;min-width:0;flex-wrap:nowrap;column-gap:16px;margin-top:0;min-height:22px;overflow-x:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);padding-right:18px}
  #hero .hero-tb-m::-webkit-scrollbar{display:none}
  #hero .hero-tb-jw,#hero .hero-tb-ex{height:20px}
  #hero .hero-tb-hc{height:9.5px}
  #hero .hero-tb-kl{height:10px}
  /* no room for the p under his line (very short phones): it is read as the crane's last line instead (js sets .is-nop) */
  #hero .hero-pin.is-nop .hero-p{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
  #hero .hero-pin.is-nop .hero-cr-p{display:block}
  #hero .hero-cr-p{margin-top:14px;max-width:30ch;font-size:15px;line-height:1.4;opacity:.78}
  #hero .hero-crane{left:max(var(--g),var(--safe-l));right:max(var(--g),var(--safe-r));top:calc(var(--bar-h) + var(--nav-h) + 18px);width:auto}
  #hero .hero-cr-l{font-size:24px;max-width:17em}
  #hero .hero-ib-s img{filter:brightness(1.12) saturate(.9)}
  /* the payment request is a bottom sheet */
  #hero #heroSheet{left:max(8px,var(--safe-l));right:max(8px,var(--safe-r));bottom:calc(8px + var(--safe-b));width:auto;margin:0;padding:28px 16px 16px}
  #hero .hero-sx-h{position:absolute;left:0;right:0;top:0;height:28px;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:grab}
  #hero .hero-sx-h::before{content:"";width:36px;height:1px;background:var(--ink);box-shadow:0 3px 0 rgba(14,23,38,.35)}
  #hero .hero-sx-line{margin:10px 0 12px;font-size:20px;line-height:1.25}
  #hero .hero-sx-rows>div{padding:10px 0;flex-wrap:wrap;column-gap:12px;row-gap:2px}
  #hero .hero-sx-rows dd{margin-left:auto}
  #hero .hero-sx-rows dd.hero-sx-once{margin-left:0}
  #hero .hero-sx-foot{display:none}
  #hero .hero-sx-b{margin-top:16px}
}
@media (max-width:374px){
  #hero .hero-h1{font-size:23px}
  #hero .hc-rows>div{letter-spacing:.02em;gap:6px}
  #hero .hc-amt{font-size:18px}
  #hero .hero-hint-t{letter-spacing:.08em}
  #hero .hero-cta>*{padding:0 10px;font-size:12.5px;letter-spacing:.05em}
  #hero .hero-cr-l{font-size:22px}
  #hero .hero-sx-line{font-size:18px}
}
@media (max-width:359px){
  #hero #heroSheet{padding:26px 14px 12px}
  #hero .hero-sx-line{margin:6px 0 8px;line-height:1.2}
  #hero .hero-sx-rows>div{padding:7px 0}
  #hero .hero-sx-rows dt{line-height:1.3}
  #hero .hero-sx-b{margin-top:12px;flex-direction:column-reverse;gap:4px}
  #hero .hero-sx-b .btn{flex:none;height:52px;width:100%}
  #hero .hero-sx-no{width:100%;min-width:0;border:0;height:44px}
}
/* phones in landscape (core serves the static page): the reduced 720px stage, inset past the notch */
@media (orientation:landscape) and (max-height:500px){
  #hero .hero-foot{padding-inline:max(0px,calc(env(safe-area-inset-left) - var(--g)),calc(env(safe-area-inset-right) - var(--g)))}
}

html:not(.js) #hero .hero-hint{display:none}   /* without script the terminal cannot answer a tap: no instruction to tap it */

/* a phone turned sideways (core serves the static page there): the night counter is laid out on a 720px stage the page simply
   scrolls through, instead of being squeezed into a 390px pin */
@media (orientation:landscape) and (max-height:500px){
  html.reduce #hero{height:auto}
  html.reduce #hero .hero-pin{--pin-h:720px;position:relative;height:720px}
}