/* trusted-businesses.html: THE REGISTER. Owner: businesses. Reuses core, chrome and page read-only.
Scoped under .biz-* classes and #biz* ids; keyframes are prefixed biz-.
S1+S2 the header and the register: one ruled line per counter, each line its own [data-tone] region, so the display
names the counter under the nav as it passes. Line 07 is left blank for the next counter.
S3 #bizReel: the whole real payment, 01 -> 02 -> 03, one video at a time (PG.reel, sequence mode). */
/* ================================================================ S1: header */
.biz-top{
/* the register's columns: No. · Merchant · Mark · Sells · City · Online. Online fits the widest label (a 20-character
domain) and line 07's Order button; the rest scale down to 980 */
--biz-tr:72px minmax(0,1fr) clamp(96px,9.7vw,140px) clamp(92px,9.2vw,132px) clamp(150px,15.3vw,220px) clamp(198px,14.6vw,210px);
--biz-gap:clamp(16px,1.67vw,24px)}
@media (min-width:980px){ main.pg>.pg-s.biz-top:first-child{padding-top:calc(var(--bar-h) + var(--nav-h) + 56px)} }
.biz-sum{grid-column:9/13;grid-row:3;align-self:end;justify-self:stretch;margin-top:clamp(24px,3vw,40px);container:biz-sum/inline-size;
font-family:var(--mono);font-size:12px;line-height:1.6;letter-spacing:.06em;color:var(--ink-2);text-align:right}
/* one line where it fits (52 mono characters, about 412px); otherwise the counts over LISTED BY CITY, never a separator
left hanging at the end of a line */
.biz-sum-n,.biz-sum-l{white-space:nowrap}
@container biz-sum (max-width:415.98px){
.biz-sum-x{display:none}
.biz-sum-l{display:block}
}
@container biz-sum (max-width:289.98px){ .biz-sum-n,.biz-sum-l{letter-spacing:.03em} }
@container biz-sum (max-width:275.98px){ .biz-sum-n{white-space:normal} }
/* ================================================================ S2: the register */
.biz-cols,.biz-row,.biz-ref-in{display:grid;grid-template-columns:var(--biz-tr);column-gap:var(--biz-gap)}
.biz-cols{margin-top:clamp(56px,5.6vw,80px);padding-bottom:12px;font-family:var(--cond);font-weight:600;font-size:11px;line-height:16px;
letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.biz-cols>span:first-child{padding-left:18px}
/* the ruling under the column heads: drawn from the left on 'ready' (page.css), in ink */
.biz-top>.pg-rule{margin-top:0;opacity:1}
.biz-reg{list-style:none;margin:0;padding:0;scroll-margin-top:calc(var(--nav-h) + 40px)}
.biz-row{position:relative;min-height:112px;align-items:center;border-bottom:1px solid var(--line)}
/* hover or focus on the line's link: a gold line runs along its bottom rule */
.biz-row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#d9ad12;transform:scaleX(0);
transform-origin:left center;transition:transform .38s var(--out);pointer-events:none}
@media (hover:hover){ .biz-row:has(.biz-a:hover)::after{transform:none} }
.biz-row:has(.biz-a:focus-visible)::after{transform:none}
/* No.: the line's LED and its number */
.biz-no{grid-column:1;grid-row:1;display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;
font-variant-numeric:tabular-nums}
.biz-led{flex:none;display:block;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55}
.biz-led.biz-on{background:var(--green);opacity:1}
/* no script, or reduced motion: every live counter is lit from the start */
html:not(.js) .biz-row[data-live] .biz-led,html.reduce .biz-row[data-live] .biz-led{background:var(--green);opacity:1}
/* line 07 blinks gold, like the display waiting for a tap */
.biz-open .biz-led{background:#d9ad12;opacity:1;animation:biz-blink .8s steps(2,jump-none) infinite}
@keyframes biz-blink{to{opacity:.22}}
/* the link: one per line, from the name to the domain. Mark, sells and city sit over it in the same grid row and let
the pointer through, so the whole line is the link while its name stays short. */
.biz-a{grid-column:2/-1;grid-row:1;align-self:stretch;display:grid;grid-template-columns:minmax(0,1fr) clamp(96px,9.7vw,140px) clamp(92px,9.2vw,132px) clamp(150px,15.3vw,220px) clamp(198px,14.6vw,210px);
column-gap:var(--biz-gap);align-items:center;margin:0 0 0 -12px;padding:18px 0 18px 12px;-webkit-tap-highlight-color:transparent}
/* the focus ring opens 12px before the name and closes on the register's right edge, never past the rules */
@supports (grid-template-columns:subgrid){ .biz-a{grid-template-columns:subgrid} }
.biz-a:focus-visible{outline-offset:-2px}
.biz-nm{grid-column:1;font-family:var(--sans);font-weight:400;font-size:clamp(28px,3vw,44px);line-height:1.05;letter-spacing:-.025em}
.biz-go{grid-column:-2/-1;justify-self:start;display:inline-flex;align-items:center;gap:9px;min-height:44px;
font-family:var(--cond);font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
/* the domain rolls in the nav's grammar: two stacked copies in a 16px mask */
.biz-u{display:block;height:16px;line-height:16px;overflow:hidden}
.biz-u>span{position:relative;display:block;transition:transform .38s var(--out)}
.biz-u>span::after{content:attr(data-t);content:attr(data-t) / "";position:absolute;left:0;top:100%}
.biz-ext{flex:none;width:10px;height:10px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.3;transition:transform .38s var(--out)}
@media (hover:hover){
.biz-a:hover .biz-u>span{transform:translateY(-100%)}
.biz-a:hover .biz-ext{transform:translate(2px,-2px)}
}
.biz-a:focus-visible .biz-u>span{transform:translateY(-100%)}
.biz-a:focus-visible .biz-ext{transform:translate(2px,-2px)}
.biz-mk,.biz-sl,.biz-ct{grid-row:1;pointer-events:none}
.biz-mk{grid-column:3;display:flex;align-items:center;min-width:0;height:40px}
/* a mark is only ever scaled down: a 140x40 box at most, never above its own pixels */
.biz-mk img{width:auto;height:auto;max-width:min(140px,100%);max-height:40px}
.biz-sl{grid-column:4;font-family:var(--cond);font-weight:600;font-size:12.5px;line-height:1.3;letter-spacing:.1em;text-transform:uppercase}
.biz-ct{grid-column:5;font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.04em}
.biz-ct2{display:block;color:var(--ink-2)}
/* line 07: left blank for the next counter */
.biz-line{grid-column:2;grid-row:1;display:flex;align-items:baseline;min-width:0;padding:18px 0}
.biz-open .biz-nm{flex:none;color:var(--ink-3);white-space:nowrap}
.biz-caret{display:inline-block;width:1px;height:.9em;margin-left:.1em;vertical-align:-.12em;background:var(--ink);animation:biz-caret 1s steps(1,end) infinite}
@keyframes biz-caret{50%{opacity:0}}
.biz-leader{flex:1;min-width:24px;margin-left:18px;border-bottom:1px dotted var(--ink);opacity:.45}
.biz-slot{display:block;width:140px;max-width:100%;height:40px;border:1px dashed rgba(14,23,38,.4)}
.biz-open .biz-sl,.biz-open .biz-ct{color:var(--ink-2)}
.biz-btns{grid-column:6;grid-row:1;display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;padding:18px 0}
/* stacked in the Online column, the two keys share its width, like a keypad's */
@media (min-width:980px){ .biz-btns .btn{flex:1 0 auto} }
/* line 07 holds still while it is off screen */
.biz-open.biz-idle .biz-led,.biz-open.biz-idle .biz-caret{animation-play-state:paused}
/* the referral line: ruled above and below, under the register */
.biz-ref{padding:clamp(48px,5vw,72px) 0 clamp(72px,10vw,144px)}
.biz-ref-in{align-items:end;row-gap:18px;padding:28px 0 30px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.biz-ref-in>.pg-tab{grid-column:2;grid-row:1;justify-self:start}
.biz-ref-p{grid-column:2/5;grid-row:2;max-width:30ch;font-family:var(--sans);font-weight:400;font-size:clamp(22px,2vw,30px);line-height:1.22;
letter-spacing:-.015em;text-wrap:balance}
.biz-ref-a{grid-column:6;grid-row:2;justify-self:start;margin-bottom:-6px}
/* ================================================================ S3: the reel */
.biz-reel-hd>.pg-kick{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 12px}
.biz-reel-hd h2{grid-column:1/8;margin-top:24px}
.biz-reel-hd .pg-lead{grid-column:9/13;grid-row:2;align-self:end;max-width:34ch}
/* five tracks: screen · gap · screen · gap · screen. The gaps are tracks so the route between screens can be drawn in them */
.biz-stage{display:grid;grid-template-columns:minmax(0,318px) minmax(24px,1fr) minmax(0,318px) minmax(24px,1fr) minmax(0,318px);
margin-top:clamp(48px,5.6vw,80px)}
.biz-keys{display:contents}
.biz-f{grid-row:1;margin:0;min-width:0}
#bizF1{grid-column:1} #bizF2{grid-column:3} #bizF3{grid-column:5}
.biz-f-l{display:flex;justify-content:space-between;margin-bottom:10px;font-family:var(--mono);font-size:11px;line-height:16px;
letter-spacing:.06em;text-transform:uppercase;color:rgba(242,242,242,.62)}
.biz-scr{padding:8px;border:1px solid rgba(242,242,242,.3)}
.biz-scr .pg-reel-v{width:100%;max-width:300px}
/* the three progress tracks sit on one dotted rail: one payment, start to finish */
.biz-rail{grid-row:2;grid-column:1/-1;align-self:center;height:0;margin-top:16px;border-top:1px dotted rgba(242,242,242,.32)}
.biz-bar{grid-row:2;margin-top:16px;background:#0b1220;color:#f2f2f2}
.biz-b1{grid-column:1} .biz-b2{grid-column:3} .biz-b3{grid-column:5}
.biz-cap{grid-row:3;margin-top:10px;gap:10px}
#bizCap1{grid-column:1} #bizCap2{grid-column:3} #bizCap3{grid-column:5}
.biz-cap-i{opacity:.62}
.biz-cap-s{display:none}
.biz-d{grid-row:4;font-family:var(--sans);font-size:15px;line-height:1.55;color:rgba(242,242,242,.72);max-width:36ch}
.biz-d1{grid-column:1} .biz-d2{grid-column:3} .biz-d3{grid-column:5}
.biz-d-t{display:none}
/* the reel's last row: the toggle under the first screen's caption, the link under the second, on one line (the toggle comes
first in the markup too, so focus follows the eye); the region closes a little sooner than the shell's padding */
#bizReel{padding-bottom:clamp(72px,8vw,112px)}
.biz-tg{grid-row:5;grid-column:1;justify-self:start;align-self:start;margin-top:10px}
.biz-more{grid-row:5;grid-column:3;justify-self:start;align-self:start;margin-top:10px;color:#f2f2f2}
/* the route between screens: the tap carries the request to the customer's phone, and 1 USDC comes back to the merchant.
Each lights gold on the beat that crosses it (TAPPED, then PAID · 1.00 USDC: the stage's data-route) and goes dark
when the sale starts over. */
.biz-x{display:none}
@media (min-width:1200px){
.biz-x{grid-row:1;align-self:center;position:relative;display:block;height:0;margin:16px 18px 0;border-top:1px dotted rgba(242,242,242,.32);
color:rgba(242,242,242,.5);transition:color .24s linear,border-color .24s linear}
.biz-x1{grid-column:2} .biz-x2{grid-column:4}
.biz-x::after{content:"";position:absolute;right:-1px;top:-4px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;
transform:rotate(45deg) translate(-1px,0);transform-origin:center}
.biz-x>span{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);font-family:var(--mono);font-style:normal;font-size:11px;
line-height:16px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.biz-stage:is([data-route="1"],[data-route="2"]) .biz-x1,.biz-stage[data-route="2"] .biz-x2{color:#d9ad12;border-top-color:#d9ad12;border-top-style:solid}
}
/* reduced motion, before the visitor presses Play: the three key stills read 01 -> 03 at full strength, the whole route lit */
html.reduce .biz-stage:not(.biz-armed) .pg-reel-f{opacity:1}
@media (min-width:1200px){
html.reduce .biz-stage:not(.biz-armed) .biz-x{color:#d9ad12;border-top-color:#d9ad12;border-top-style:solid}
}
/* ================================================================ phones and small tablets */
@media (max-width:979.98px){
.biz-sum{text-align:left;margin-top:20px}
.biz-cols{display:none}
.biz-top>.pg-rule{margin-top:40px}
.biz-reg{scroll-margin-top:calc(var(--nav-h) + 8px)}
/* each line stacks: LED and number · name · mark · sells and city · the link */
.biz-row{grid-template-columns:auto minmax(0,1fr);column-gap:0;min-height:0;padding:20px 0 12px;align-items:start}
.biz-no{grid-column:1/-1;grid-row:1}
.biz-a{grid-column:1/-1;grid-row:2;display:flex;flex-direction:column;align-items:flex-start;margin:0 -8px;padding:0 8px}
.biz-nm{margin-top:12px;font-size:26px;line-height:1.1}
.biz-go{margin-top:2px}
.biz-mk{grid-column:1/-1;grid-row:3;height:auto;margin-top:14px}
.biz-mk-0{display:none}
.biz-mk img{max-width:min(120px,100%);max-height:32px}
.biz-sl,.biz-ct{grid-row:4;margin-top:12px;font-family:var(--mono);font-weight:400;font-size:12px;line-height:1.5;letter-spacing:.04em;text-transform:uppercase}
.biz-sl{grid-column:1}
.biz-ct{grid-column:2}
/* hanging indent: a wrapped city lines up under its first letter, never under the dot */
.biz-ct{padding-left:1.8em;text-indent:-1.8em}
.biz-ct::before{content:"·";content:"·" / "";display:inline-block;width:1.8em;text-align:center;text-indent:0}
.biz-ct2{display:inline;white-space:nowrap}
.biz-ct2::before{content:" · ";content:" · " / ""}
@supports (grid-template-rows:subgrid){
/* the link spans its name through to its domain; mark and city sit inside its rows */
.biz-a{grid-row:2/6;display:grid;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr)}
.biz-nm{grid-row:1}
.biz-go{grid-row:4;grid-column:1}
.biz-go{margin-top:6px}
}
.biz-line{grid-column:1/-1;grid-row:2;padding:12px 0 0}
.biz-open .biz-nm{margin-top:0}
.biz-slot{width:120px;height:32px}
.biz-btns{grid-column:1/-1;grid-row:5;flex-direction:column;align-items:stretch;padding:16px 0 8px}
.biz-btns .btn{width:100%}
.biz-ref{padding:40px 0 64px}
.biz-ref-in{grid-template-columns:minmax(0,1fr);row-gap:16px;padding:24px 0 16px}
.biz-ref-in>.pg-tab,.biz-ref-p,.biz-ref-a{grid-column:1;grid-row:auto}
.biz-ref-p{font-size:22px;max-width:24ch}
.biz-ref-a{margin:0}
.biz-reel-hd .pg-lead{margin-top:20px}
/* one stage: three keys, one 270x480 screen, the active caption, the toggle */
.biz-stage{grid-template-columns:minmax(0,1fr) 288px minmax(0,1fr);column-gap:0;justify-content:stretch;margin-top:36px}
.biz-keys{display:grid;grid-row:1;grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:24px}
.biz-cap{grid-row:auto!important;grid-column:auto!important;margin:0;min-height:44px;padding:0 10px;gap:8px;opacity:1;
border:1px solid rgba(242,242,242,.3);font-family:var(--cond);font-weight:600;font-size:12px;letter-spacing:.08em;
transition:transform 80ms linear,border-color .18s linear,background-color .18s linear,color .18s linear}
.biz-cap::before{display:none}
.biz-cap-i{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.04em}
.biz-cap-t{display:none}
.biz-cap-s{display:inline;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.biz-cap[aria-selected=true]{background:#f2f2f2;color:#0b1220;border-color:#f2f2f2;box-shadow:inset 0 3px 0 #d9ad12}
.biz-cap:active{transform:translateY(1px)}
.biz-f{grid-row:2;grid-column:2!important;visibility:hidden;opacity:0}
.biz-stage:not(.pg-reel-seq) #bizF1,.biz-stage .biz-f.pg-on{visibility:visible;opacity:1}
.pg-reel-seq .biz-f{transition:opacity .18s linear,visibility 0s linear .18s}
.pg-reel-seq .biz-f.pg-on{transition:opacity .18s linear,visibility 0s}
.biz-f-l{margin-bottom:8px}
.biz-scr .pg-reel-v{max-width:270px}
.biz-rail{display:none}
.biz-bar{grid-row:3;grid-column:2!important;width:calc((100% - 12px) / 3);margin-top:14px}
.biz-b1{justify-self:start} .biz-b2{justify-self:center} .biz-b3{justify-self:end}
.biz-d{grid-row:5;grid-column:1/-1!important;margin-top:22px;max-width:none;visibility:hidden}
.biz-stage[data-on="0"] .biz-d1,.biz-stage[data-on="1"] .biz-d2,.biz-stage[data-on="2"] .biz-d3{visibility:visible}
.biz-d-t{display:block;margin-bottom:8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#f2f2f2}
/* the toggle, then the link: the same order as the markup, so focus follows what the eye reads */
.biz-tg{grid-row:6;grid-column:1/-1;margin-top:14px}
.biz-more{grid-row:7;grid-column:1/-1;margin-top:6px}
html.reduce .biz-stage .biz-f:not(.pg-on){opacity:0}
}
/* small tablets (600-979): each line is two rows, name and mark over sells, city and the domain; the reel's caption sits
beside its screen */
@media (min-width:600px) and (max-width:979.98px){
@supports (grid-template-columns:subgrid) and (grid-template-rows:subgrid){
.biz-row{grid-template-columns:52px auto minmax(0,1fr) 200px;grid-template-rows:auto auto;align-items:center;row-gap:0;padding:22px 0 14px}
.biz-no{grid-column:1;grid-row:1}
.biz-a{grid-column:2/-1;grid-row:1/3;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;align-items:center}
.biz-nm{grid-column:1/3;grid-row:1;margin:0;font-size:clamp(28px,4vw,34px)}
.biz-go{grid-column:3;grid-row:2;justify-self:end;margin:0}
.biz-mk{grid-column:4;grid-row:1;justify-self:stretch;justify-content:flex-end;margin:0;height:40px}
.biz-sl{grid-column:2;grid-row:2;margin:0}
.biz-ct{grid-column:3;grid-row:2;margin:0}
.biz-line{grid-column:2/4;grid-row:1;padding:0;margin-right:24px}
.biz-open .biz-mk{grid-column:4;grid-row:1}
.biz-btns{grid-column:2/-1;grid-row:3;flex-direction:row;padding:14px 0 6px}
.biz-btns .btn{width:auto}
}
.biz-btns{flex-direction:row}
.biz-btns .btn{width:auto}
.biz-ref-p{max-width:30ch}
.biz-stage{grid-template-columns:288px minmax(0,1fr);column-gap:clamp(32px,6vw,64px)}
.biz-f{grid-column:1!important}
.biz-bar{grid-column:1!important}
.biz-d{grid-row:2;grid-column:2!important;align-self:end;margin:0 0 4px;max-width:40ch}
.biz-tg{grid-row:3;grid-column:2;align-self:start;margin-top:6px}
.biz-more{grid-row:4/6;grid-column:2;align-self:start;margin-top:2px}
}
@media (max-width:359.98px){
.biz-stage{grid-template-columns:minmax(0,1fr) minmax(0,288px) minmax(0,1fr)}
.biz-cap{padding:0 8px;gap:6px;letter-spacing:.04em}
}
/* ================================================================ reduced motion: everything static, nothing draws */
html.reduce .biz-open .biz-led,html.reduce .biz-caret{animation:none}
html.reduce .biz-row::after,html.reduce .biz-u>span,html.reduce .biz-ext,html.reduce .biz-cap{transition:none}
html.reduce .biz-a:is(:hover,:focus-visible) .biz-u>span,html.reduce .biz-a:is(:hover,:focus-visible) .biz-ext{transform:none}
/* ================================================================ forced colours: LEDs and the blank line stay readable */
@media (forced-colors:active){
.biz-led{forced-color-adjust:none;background:CanvasText}
.biz-led.biz-on,.biz-open .biz-led{background:Highlight}
.biz-caret{forced-color-adjust:none;background:CanvasText}
.biz-row::after{forced-color-adjust:none;background:Highlight}
}
/* ================================================================ closing: the old site's call to action */
.biz-end{padding-top:clamp(72px,8vw,120px);padding-bottom:clamp(72px,8vw,120px)}
.biz-end .pg-grid>*{grid-column:1/-1}
.biz-end-h{max-width:18ch}
.biz-end-p{margin-top:16px;max-width:44ch;font-family:var(--sans);font-size:18px;line-height:1.5;color:var(--ink-2)}
.biz-end-b{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
@media (max-width:979.98px){
.biz-end-b{flex-direction:column;align-items:stretch}
.biz-end-b .btn{display:flex;width:100%;height:52px}
}
@media (min-width:600px) and (max-width:979.98px){ .biz-end-b .btn{max-width:440px} }