/* CrypTap v6 · close: ACT 3. The routing board (#compat), the daylight counter (#close) and the order-summary receipt (footer.cls-foot).
   Owned by close. Scoped under #compat, #close and .cls-foot; keyframes are prefixed close-.
   Round 2: #compat follows #faq in normal flow (no pull-up), phones get a scroll-drawn bus, #close carries its own Order button
   inside the first 100svh, and the footer receipt carries the founder's pricing rows. */

/* ------------------------------------------------------------------ #compat: the routing board */
#compat{
  --cmp-fs:clamp(15px,1.25vw,18px);           /* names: Archivo 400, line-height 1.7 */
  --cmp-row:calc(var(--cmp-fs) * 1.7);
  --cmp-head:44px;                            /* the column's 1px rule and its header */
  --cmp-gap:clamp(22px,2.6vw,44px);
  --cmp-w:min(300px,20.5vw);                  /* s3.webp, never wider than 300 (native 863) */
  --cmp-disc:.73605;                          /* disc centre, measured with Pillow: (546.0, 659.5) of 863 x 896 */
  /* The stepped board (desktop). Solved offline so that no wire crosses any type at any width from 980 to 2560px: Wallets' rule
     is the board's top, Stablecoins sit 6.5 rows lower, Chains 10 rows lower, and the disc is 5.5 rows under the Chains rule. */
  --cmp-s2:calc(var(--cmp-row) * 6.5);
  --cmp-s1:calc(var(--cmp-row) * 10);
  --cmp-mid:calc(var(--cmp-row) * 15.5);
  position:relative;z-index:4;margin-top:0;background:var(--paper);color:var(--ink); /* above any overhang of #sky (z 3) */
  padding:calc(var(--nav-h) + 8vh + 40px) 0 4vh;overflow:hidden;overflow:clip
}
#compat .cmp-stage{position:relative;min-height:calc(var(--cmp-mid) + var(--cmp-w) * 1.0382 * (1 - var(--cmp-disc)) + 64px)}
#compat .cmp-lab{margin:0 0 14px;color:var(--ink-2)}
#compat .cmp-lede{margin:16px 0 0;font-size:17px;line-height:1.4;color:var(--ink-2)}
#compat .cmp-cust{margin:10px 0 0;font-size:14px;line-height:1.4;color:var(--ink-2)}
/* desktop: the head nests in the step above Chains and Stablecoins; the h2's cap line sits on Wallets' rule, the label above it */
#compat .cmp-head{position:absolute;z-index:2;left:var(--g);top:calc(var(--cmp-hfs) * -.2 - 32px);--cmp-hfs:clamp(28px,2.9vw,42px);
  width:calc((58% - var(--g) - 2 * var(--cmp-gap)) * 1.78 / 3.1 + var(--cmp-gap) - 14px)}
#compat .cmp-h{max-width:10.15em; /* breaks after “with,” (9.85em; “…with, it” is 10.5em) */
  margin:0;font-weight:400;font-size:var(--cmp-hfs);line-height:1.08;letter-spacing:-.028em}

/* board: three 1px-ruled columns in the left 58% */
#compat .cmp-board{position:relative;z-index:2;margin-left:var(--g);width:calc(58% - var(--g));display:grid;grid-template-columns:1fr .78fr 1.32fr;column-gap:var(--cmp-gap);align-items:start}
#compat .cmp-col{border-top:1px solid var(--ink);min-width:0}
#compat .cmp-col:nth-child(1){margin-top:var(--cmp-s1)}
#compat .cmp-col:nth-child(2){margin-top:var(--cmp-s2)}
#compat .cmp-k{display:flex;align-items:center;justify-content:flex-end;height:var(--cmp-head);margin:0;color:var(--blue);font-size:11.5px}
#compat .cmp-list{list-style:none;margin:0;padding:0}
#compat .cmp-list li{font-size:var(--cmp-fs);line-height:1.7;white-space:nowrap;text-align:right}
/* the custodial line: under the Wallets list on phones and iPad; on desktop the wires own that space, so it sits under the caption */
#compat .cmp-col .cmp-cust{display:none}
#compat .cmp-cust-d{position:absolute;left:0;top:calc(var(--cmp-mid) + var(--cmp-w) * 1.0382 * (1 - var(--cmp-disc)) + 36px);margin:0;font-size:14px;white-space:nowrap}

/* the terminal and the wallet tab, from 62% of the width */
#compat .cmp-out{position:absolute;left:62%;right:0;top:0;bottom:0;pointer-events:none}
#compat .cmp-out img{position:absolute;left:0;top:calc(var(--cmp-mid) - var(--cmp-w) * 1.0382 * var(--cmp-disc));width:var(--cmp-w);height:auto;max-width:none}
#compat .cmp-cap{position:absolute;left:0;top:calc(var(--cmp-mid) + var(--cmp-w) * 1.0382 * (1 - var(--cmp-disc)) + 14px);margin:0;font-size:11px;letter-spacing:.06em;color:var(--ink-2);white-space:nowrap}
/* YOUR WALLET: level with the disc, its right edge on the page gutter. Empty until the blue line lands. */
#compat .cmp-tab{position:absolute;z-index:3;right:var(--g);top:calc(var(--cmp-mid) - 12px);display:inline-flex;align-items:center;height:24px;padding:0 9px;
  font-family:var(--cond);font-weight:600;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  color:var(--ink-2);box-shadow:inset 0 0 0 1px rgba(14,23,38,.28);background:var(--paper);transition:background-color .24s linear,color .24s linear,box-shadow .24s linear}
#compat .cmp-tab.is-in{background:var(--gold);color:#1a1200;box-shadow:inset 0 0 0 1px var(--gold)}

/* wires: one SVG over the stage, in stage px; the terminal sits under them */
#compat .cmp-wires{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;overflow:visible;pointer-events:none;max-width:none}
#compat .cmp-wires path{fill:none;stroke-linecap:round}
#compat .cmp-wires .cmp-w{stroke:var(--ink);stroke-width:1;stroke-opacity:.62}
#compat .cmp-wires .cmp-x{stroke:var(--blue);stroke-width:1.5}
#compat .cmp-wires .cmp-j{fill:var(--paper);stroke:var(--ink);stroke-width:1}
#compat .cmp-wires .cmp-w,#compat .cmp-wires .cmp-x.cmp-xd{stroke-dasharray:1 2}
/* undrawn until the board is in view (JS adds .cmp-pre; reduced motion never does) */
#compat .cmp-pre .cmp-wires .cmp-w,#compat .cmp-pre .cmp-wires .cmp-xd{stroke-dashoffset:1}
#compat .cmp-pre .cmp-wires .cmp-j{opacity:0}
/* the phone/iPad bus: drawn by scroll (stroke-dashoffset set per frame in px) */
#compat .cmp-wires .cmp-bus,#compat .cmp-wires .cmp-arc{stroke:var(--ink);stroke-width:1;stroke-opacity:.7}
#compat .cmp-wires .cmp-bj{fill:var(--ink);stroke:none;transform-box:fill-box;transform-origin:center;transition:transform .22s var(--out),opacity .12s linear}
#compat .cmp-wires .cmp-bj.is-off{transform:scale(0);opacity:0}
#compat .cmp-wires .cmp-arc.is-off{opacity:0}
@media (min-width:980px){ #compat .cmp-wires .cmp-bus,#compat .cmp-wires .cmp-arc,#compat .cmp-wires .cmp-bj{display:none} }

/* ---- phones and iPad: lists, a bus down the right edge of the lists, the disc, YOUR WALLET */
@media (max-width:979.98px){
  #compat{padding:56px 0 calc(24px + var(--safe-b))}
  #compat .cmp-stage{min-height:0;padding:0 var(--g)}
  #compat .cmp-head{position:static;width:auto;margin:0 0 30px}
  #compat .cmp-h{max-width:none;font-size:clamp(28px,calc(10.5px + 5.45vw),34px);line-height:1.06}
  #compat .cmp-lede{font-size:16px;margin-top:12px}
  #compat .cmp-board{display:block;width:auto;margin:0}
  #compat .cmp-board .cmp-col:nth-child(n){margin:0 6px 22px 0;padding-right:16px}
  #compat .cmp-board .cmp-col:last-child{margin-bottom:0}
  #compat .cmp-k{height:36px;justify-content:flex-start}
  #compat .cmp-list{display:grid;grid-template-columns:1fr 1fr;column-gap:12px}
  #compat .cmp-list li{font-size:16px;line-height:1.75;text-align:left;white-space:nowrap;min-width:0}
  #compat .cmp-list li.cmp-wide{grid-column:1 / -1}
  #compat .cmp-col .cmp-cust{display:block;margin:6px 0 0}
  #compat .cmp-cust-d{display:none}
  /* the terminal: centred on its disc, so the exit drops straight down the page's axis into the tab */
  #compat{--cmp-iw:clamp(210px,calc(210px + (100vw - 320px) * .274),230px)}
  #compat .cmp-out{position:relative;left:auto;right:auto;top:auto;bottom:auto;display:flex;flex-direction:column;align-items:center;margin:34px 0 0;pointer-events:none}
  #compat .cmp-out img{position:relative;top:auto;left:calc(var(--cmp-iw) * -.1327);width:var(--cmp-iw);height:auto}
  #compat .cmp-tab{position:relative;right:auto;top:auto;margin-top:40px;height:28px;padding:0 12px;font-size:12px}
  #compat .cmp-cap{position:static;margin:16px 0 0;font-size:12px;line-height:1.5;white-space:normal;text-align:center;text-wrap:balance;max-width:30ch}
  #compat .cmp-wires .cmp-w,#compat .cmp-wires .cmp-j{display:none}
}
@media (min-width:390px) and (max-width:979.98px){ #compat .cmp-list li{font-size:17px} }
/* iPad: lists left 56%, the terminal on the right, the bus between them */
@media (min-width:600px) and (max-width:979.98px){
  #compat{--cmp-iw:300px;padding-top:72px}
  #compat .cmp-stage{display:grid;grid-template-columns:56% 1fr;align-items:end}
  #compat .cmp-head{grid-column:1 / -1;max-width:30em}
  #compat .cmp-board{grid-column:1}
  #compat .cmp-stage{column-gap:40px}
  #compat .cmp-stage{padding-bottom:110px}
  /* dropped below the lists' foot, so the bus passes every junction before it turns into the disc */
  #compat .cmp-out{grid-column:2;margin:0 0 -110px;padding-bottom:4px}
  #compat .cmp-out img{left:0;width:min(300px,100%)}
  #compat .cmp-cap{max-width:24em}
}

/* ------------------------------------------------------------------ #close: the same counter, in daylight */
#close{
  --dw:min(440px,30.5vw,calc((var(--pin-h) - 430px) * 1.168));   /* hero.webp, never wider than 440 here (native 1279) */
  --dh:calc(var(--dw) * .85614);              /* 1095 / 1279 */
  position:relative;background:var(--paper);color:var(--ink);overflow:hidden;overflow:clip
}
/* one frame: till line, headline, promise, the terminal on its counter, the order button, terms, hint */
#close .cls-frame{position:relative;box-sizing:border-box;min-height:var(--pin-h);display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:calc(var(--nav-h) + 24px) var(--g) 14px}
#close .cls-till{position:relative;z-index:1;margin:0;font-size:12px;line-height:16px;letter-spacing:.12em;color:var(--ink-2);white-space:nowrap}
#close .cls-fig{display:inline-block;font-variant-numeric:tabular-nums;color:var(--ink)}
#close .cls-fig.is-paid{color:#8a5f00}
#close .cls-h{position:relative;z-index:1;margin:12px 0 0;font-weight:400;font-size:clamp(42px,4.4vw,64px);line-height:1;letter-spacing:-.03em}
#close .cls-p{position:relative;z-index:1;max-width:36em;margin:14px auto 0;font-size:17px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}
#close .cls-stand{flex:1 1 auto;display:flex;align-items:center;justify-content:center;width:100%;padding:18px 0;min-height:calc(var(--dh) + 36px)}
#close .cls-dev{position:relative;width:var(--dw);height:var(--dh);flex:none}
/* the counter plane: the hero's spotlit tabletop, now in daylight; its far edge crosses the terminal 41% down, as in the hero */
#close .cls-counter{position:absolute;top:41%;left:calc(50% - 50vw);width:100vw;height:400vh;
  background:radial-gradient(70% 60vh at 50% 0%,#f7f8fa 0%,#e7ebf0 45%,#d3d9e1 100%);box-shadow:0 -1px 0 rgba(255,255,255,.9)}
#close .cls-counter::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:22vh;background:linear-gradient(to bottom,rgba(14,23,38,0),rgba(14,23,38,.035));pointer-events:none}
/* the counter's near edge: a lit nosing over a 12px front face, at the foot of the section */
#close::after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:13px;border-top:1px solid rgba(255,255,255,.75);background:linear-gradient(#c2c9d3,#b6bec9)}
#close .cls-img{position:relative;z-index:1;width:100%;height:100%}
#close .cls-img img{position:relative;z-index:1;display:block;width:100%;height:100%;max-width:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
#close .cls-back{position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;fill:#ffffff}
/* contact shadows without blur filters: radial-gradient ellipses fitted to the base (hero.webp: centre 50% / 61.8%, radii 46.3% / 38.0%) */
#close .cls-sh{position:absolute;pointer-events:none}
#close .cls-sh-t{left:1%;width:98%;top:22%;height:81%;background:radial-gradient(closest-side,rgba(10,12,16,.5) 88%,rgba(10,12,16,.18) 95%,rgba(10,12,16,0) 100%)}
#close .cls-sh-w{left:-9%;width:118%;top:14%;height:104%;background:radial-gradient(closest-side,rgba(10,12,16,.2) 62%,rgba(10,12,16,.08) 82%,rgba(10,12,16,0) 100%)}
/* the disc: the hit ellipse registered to hero.webp (cx 654, cy 611, rx 186, ry 149 of 1279 x 1095) */
#close .cls-disc{position:absolute;z-index:3;left:36.59%;top:42.19%;width:29.09%;height:27.21%;border-radius:50%;cursor:pointer;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
#close .cls-disc:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
#close .cls-img .core-rings{z-index:2}
#close .cls-burst ellipse{stroke-width:1.5}

#close .cls-buy{position:relative;z-index:1;width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center}
#close .btn.cls-order{width:100%;height:52px;font-size:15px}
#close .cls-pulse{position:absolute;inset:0;outline:2px solid var(--gold);outline-offset:0;opacity:0;pointer-events:none}
#close .cls-terms{margin:10px 0 0;font-size:14px;line-height:1.4;color:var(--ink-2)}
#close .cls-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 0 0;font-size:11px;line-height:16px;letter-spacing:.14em;color:var(--ink-2);transition:opacity .3s linear}
#close .cls-hint i{width:6px;height:6px;border-radius:50%;background:var(--gold)}
#close .cls-hint.is-off{opacity:0}

/* the doors, as ruled rows on the counter */
#close .cls-doors{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:clamp(40px,7vh,72px) var(--g) clamp(64px,11vh,104px);
  display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--g);align-items:stretch}
#close .cls-join{grid-column:1 / -1;max-width:26em;margin:0 0 28px;font-size:clamp(20px,1.8vw,26px);line-height:1.25;letter-spacing:-.012em;color:var(--ink)}
#close .cls-door{border-top:1px solid var(--ink);padding:16px 0 26px;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
#close .cls-door .lab{display:inline-flex;align-items:center;min-height:24px;font-size:11.5px}
#close .cls-door p{max-width:34ch;margin:10px 0 8px;font-size:16px;line-height:1.45;color:var(--ink-2)}
#close .cls-gtab{height:24px;padding:0 9px;background:var(--gold);color:#1a1200}
#close .cls-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:auto;font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue);-webkit-tap-highlight-color:transparent}
#close .cls-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
#close .cls-link span{display:inline-block;transition:transform .38s var(--out)}
@media (hover:hover){ #close a.cls-link:hover span{transform:translateX(4px)} }
#close a.cls-link:active{color:var(--ink)}

@media (max-width:979.98px){
  #close{--dw:clamp(240px,calc(64.7px + 54.8vw),280px)}
  #close .cls-h{font-size:clamp(36px,calc(9.7px + 8.2vw),42px);margin-top:10px}
  #close .cls-p{max-width:23.5em;margin-top:10px;font-size:15px;line-height:1.36}
  #close .cls-stand{padding:12px 0;min-height:calc(var(--dh) + 24px)}
  #close .cls-doors{grid-template-columns:1fr;padding-top:36px}
  #close .cls-join{font-size:20px;margin-bottom:22px}
}
@media (min-width:600px) and (max-width:979.98px){
  #close{--dw:360px}
  #close .cls-p{font-size:16px}
}
@media (min-width:700px) and (max-width:979.98px){
  #close .cls-doors{grid-template-columns:1fr 1fr}
  #close .cls-door.cls-ref{grid-column:1 / -1}
}
/* short phones (iPhone SE): the frame keeps the button on screen */
@media (max-width:599.98px) and (max-height:600px){
  #close .cls-frame{padding-top:calc(var(--nav-h) + 22px);padding-bottom:10px}
  #close .cls-stand{padding:8px 0;min-height:calc(var(--dh) + 16px)}
  #close .cls-terms{margin-top:8px;font-size:13.5px;line-height:1.35}
  #close .cls-hint{margin-top:6px}
}

/* ------------------------------------------------------------------ footer: the order-summary receipt */
.cls-foot{position:relative;background:var(--paper);padding:clamp(40px,8vh,80px) var(--g) max(64px,calc(var(--safe-b) + 40px));display:flex;flex-direction:column;align-items:center}
/* the receipt feeds out of a slot: a 1px line a little wider than the paper */
.cls-foot .cls-slot{width:min(388px,calc(100% + var(--g)));flex:none;height:1px;background:var(--ink)}
.cls-foot .cls-paper{position:relative;width:min(340px,100%)}
/* the paper's shadow is its own element, grown with the roll (scaleY), never a filter */
.cls-foot .cls-shadow{position:absolute;left:0;right:0;top:0;bottom:14px;transform-origin:50% 0;
  box-shadow:0 1px 0 rgba(14,23,38,.06),0 14px 18px -4px rgba(14,23,38,.12);pointer-events:none}
.cls-foot .cls-roll{position:relative}
.cls-foot .rcpt{font-size:12px;padding:18px 14px 8px}
.cls-foot .rcpt-rl{min-height:1.9em}
.cls-foot .rcpt-c{letter-spacing:.12em;white-space:normal}
.cls-foot .rcpt-wrap{line-height:1.6;padding:.15em 0}
.cls-foot .rcpt-wrap>span:first-child{line-height:1.6}
.cls-foot .cls-only{margin-top:.3em}
.cls-foot a.rcpt-rl,.cls-foot button.rcpt-rl{width:100%;color:inherit;font:inherit;line-height:inherit;text-align:left;-webkit-tap-highlight-color:transparent}
.cls-foot a.cls-a{min-height:40px;align-items:center}
.cls-foot a.cls-a>span:first-child::after{margin-bottom:0;align-self:center}
.cls-foot a.rcpt-rl>span:last-child{transition:transform .38s var(--out)}
.cls-foot a.cls-a:active,.cls-foot .cls-legal a:active,.cls-foot button.cls-print:active{background:rgba(14,23,38,.06)}
.cls-foot .cls-legal{display:block;line-height:2.4;padding:.2em 0;text-align:center}
.cls-foot .cls-legal a{display:inline-block;min-height:24px;line-height:24px;padding:0 2px;color:inherit;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.cls-foot .cls-legal i{font-style:normal}
@media (hover:hover){
  .cls-foot a.rcpt-rl:hover,.cls-foot .cls-legal a:hover{color:var(--blue)}
  .cls-foot a.rcpt-rl:hover>span:last-child{transform:translateX(3px)}
  .cls-foot button.cls-print:hover{color:var(--blue)}
}
.cls-foot button.cls-print{min-height:40px;align-items:center;justify-content:center;text-align:center;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(26,26,26,.4)}
.cls-foot .rcpt :focus-visible{outline-offset:1px}
@media (max-width:360px){ .cls-foot .rcpt-c{letter-spacing:.04em} }
.cls-foot .cls-u b{font-weight:400}
/* before the print-in (JS adds .cls-pre; reduced motion never does) */
.cls-foot .cls-pre>*{clip-path:inset(0 0 100% 0)}

/* a phone turned sideways (static page): the daylight counter is set on a 720px stage, as the hero is */
@media (orientation:landscape) and (max-height:500px){
  html.reduce #close{--pin-h:720px}
}

/* the two exits: a dashed draw on desktop (pathLength 1), a px dash drawn by scroll below 980 */
@media (max-width:979.98px){ #compat .cmp-wires .cmp-xd{display:none} }
@media (min-width:980px){ #compat .cmp-wires .cmp-xp{display:none} }

/* dashed rules: whole 10px tiles only, so no rule ends on a stub dash at any width (WebKit's `round` can leave one) */
.cls-foot .rcpt-dash{background-repeat:repeat-x}
@supports (width:round(down,100px,10px)){ .cls-foot .rcpt-dash{width:calc(round(down,100% + 4px,10px) - 4px);margin:0 auto} }

/* integration (2026-10-08): the legal line wraps as whole items, with no dot left dangling at a line's end */
.cls-foot .cls-legal{display:flex;flex-wrap:wrap;justify-content:center;column-gap:1.2em;row-gap:0}
.cls-foot .cls-legal i{display:none}
#close .cls-join a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* short homepage (2026-10-09): #compat and the footer receipt are gone; #close is the closing line, the terminal and Order */
#close .cls-h{margin-top:0}
#close .cls-demo{margin-top:4px}
#close .cls-demo a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
#close .cls-frame{padding-bottom:clamp(40px,7vh,72px)}
.cls-foot{padding-top:0}
.cls-foot .sf{margin-top:clamp(40px,6vw,72px)}

/* simplified homepage (2026-10-10): #close is one line and the Order button, no second terminal */
#close .cls-frame.cls-line{min-height:0;padding:clamp(72px,12vh,128px) var(--g) clamp(56px,9vh,96px);border-top:1px solid var(--line)}
#close .cls-line .cls-buy{margin-top:28px}
#close .cls-line .cls-terms{max-width:46ch;text-wrap:pretty}
#close .cls-line .cls-terms a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
#close:has(.cls-line)::after{display:none}
.cls-foot .sf{margin-top:0}
.cls-foot{padding-top:0}
@media (max-width:719px){
  #close .cls-frame.cls-line{padding:56px var(--g) 44px}
  #close .cls-line .cls-buy{margin-top:22px}
}
#close .cls-line .cls-buy{max-width:560px}
#close .cls-line .btn.cls-order{max-width:400px}