/* ══ Elevate (preview): four moves borrowed from yield.xyz, redrawn in ARC's own dots and orange ══════════════════
   1. headlines rise a line at a time; the main key drops its shadow and grows on hover
   2. cards gather out of the dot grid into their outline as they scroll in (drawn by elevate.js)
   3. a thin orange timer fills on anything that moves on its own
   4. a tab cut into the hero for the nav; tabs and a notch that grow like ink (elevate.js); the theme switch spreads like ink */

/* Apple's springs (SwiftUI Spring, sampled into linear(); CSS duration = Apple duration × the ratio noted).
   Read out of the frameworks on macOS 26 and checked to 2e-16 against Spring.value; see scratchpad/apple. */
:root{
  --ease-smooth:linear(0, 0.005 1.1%, 0.02 2.3%, 0.044 3.6%, 0.082 5.1%, 0.116 6.3%, 0.16 7.7%, 0.364 13.8%, 0.462 16.9%, 0.512 18.6%, 0.556 20.2%, 0.598 21.8%, 0.636 23.4%, 0.671 25%, 0.706 26.7%, 0.765 30.1%, 0.817 33.7%, 0.86 37.5%, 0.899 42%, 0.93 46.9%, 0.954 52.4%, 0.972 58.7%, 0.984 65.8%, 0.992 74.3%, 0.997 85%, 1); /* ×1.470 */
  --ease-bouncy:linear(0, 0.002 0.6%, 0.007 1.2%, 0.016 1.8%, 0.027 2.4%, 0.041 3%, 0.06 3.7%, 0.082 4.4%, 0.111 5.2%, 0.158 6.4%, 0.218 7.8%, 0.478 13.4%, 0.593 16%, 0.65 17.4%, 0.699 18.7%, 0.745 20%, 0.787 21.3%, 0.826 22.6%, 0.861 23.9%, 0.892 25.2%, 0.921 26.6%, 0.945 27.9%, 0.967 29.3%, 0.986 30.7%, 1.003 32.2%, 1.023 34.6%, 1.036 37.1%, 1.044 39.8%, 1.046 42.9%, 1.041 48.1%, 1.012 62.6%, 1.003 70.3%, 0.998 81.2%, 1); /* ×1.638, overshoots 4.6% */
  --ease-jelly:linear(0, 0.002 0.6%, 0.008 1.3%, 0.031 2.6%, 0.07 4%, 0.123 5.5%, 0.178 6.8%, 0.247 8.3%, 0.527 13.9%, 0.646 16.4%, 0.703 17.7%, 0.757 19%, 0.807 20.3%, 0.849 21.5%, 0.887 22.7%, 0.922 23.9%, 0.953 25.1%, 0.983 26.4%, 1.007 27.6%, 1.029 28.9%, 1.047 30.2%, 1.063 31.6%, 1.079 33.5%, 1.089 35.4%, 1.094 37.5%, 1.094 39.7%, 1.09 42%, 1.081 44.7%, 1.019 58.7%, 1.007 62.8%, 0.998 67%, 0.993 71.9%, 0.991 77.6%, 1); /* bounce 0.4, ×1.618, overshoots 9.4%: the iPhone's springy feel */
  --ease-snappy:linear(0, 0.006 1.3%, 0.023 2.6%, 0.053 4.1%, 0.094 5.7%, 0.136 7.1%, 0.188 8.7%, 0.411 15%, 0.515 18.1%, 0.564 19.7%, 0.611 21.3%, 0.655 22.9%, 0.695 24.5%, 0.73 26%, 0.765 27.6%, 0.796 29.2%, 0.824 30.8%, 0.873 34.1%, 0.913 37.6%, 0.946 41.5%, 0.971 45.7%, 0.988 50.4%, 1 55.8%, 1.005 61%, 1.006 67.5%, 1); /* ×1.394 */
}
@supports not (transition-timing-function:linear(0,1)){:root{--ease-smooth:cubic-bezier(.16,1,.3,1);--ease-snappy:cubic-bezier(.2,.9,.25,1.02);--ease-bouncy:cubic-bezier(.34,1.4,.64,1);--ease-jelly:cubic-bezier(.34,1.7,.64,1)}}

/* 1 ── headlines, line by line */
.lines .wd{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.16em .04em .1em 0;margin:-.16em -.04em -.1em 0}
.lines .wi{display:inline-block;transform:translateY(125%);transition:transform .9s var(--ease-bouncy);transition-delay:calc(var(--ln,0) * .09s + var(--d,0s))}
.lines.in .wi{transform:none}
.rise.lines{opacity:1;transform:none}
/* keys feel like iPhone buttons: they sink the instant you press, spring back out with a bounce, and lift on hover */
.key{transition:transform .65s var(--ease-jelly),background .25s,box-shadow .44s var(--ease-smooth)}
.key .pin{transition:transform .65s var(--ease-jelly)}
@media (hover:hover){.key:hover{transform:scale(1.04)}.key.pri:hover{box-shadow:0 0 0 0 rgba(250,111,67,0)}}
.key:active{transform:scale(.94);transition:transform .1s cubic-bezier(.25,.1,.25,1)}

/* 2 ── cards that form: each opens out of a small pill into its own shape */
.rise.form{clip-path:inset(40% 34% 40% 34% round 99px);transform:translateY(30px) scale(.9);transition:clip-path .77s var(--ease-snappy) var(--d,0s),opacity .3s cubic-bezier(.25,.1,.25,1) var(--d,0s),transform .97s var(--ease-jelly) var(--d,0s)}
.rise.form.in{clip-path:inset(0 0 0 0 round var(--fr,2rem));transform:none}

/* 3 ── timers */
#orbit .q{position:relative;overflow:hidden}
#orbit .q::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:var(--brand);transform-origin:0 50%;transform:scaleX(var(--t,0));opacity:0;transition:opacity .25s}
#orbit .q.on::after{opacity:1}
.wkbar{display:block;height:2px;margin-top:10px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.wkbar b{display:block;height:100%;background:var(--brand);transform-origin:0 50%;transform:scaleX(0)}

/* 4 ── the hero's nav sits in a tab cut into the top of the room */
.claim-room .navtab{position:absolute;z-index:3;top:0;left:50%;transform:translateX(-50%);pointer-events:none;color:var(--bg)}
.claim-room .navtab svg{display:block;width:100%;height:100%}
@media (prefers-reduced-motion:reduce){.lines .wi{transform:none;transition:none}.rise.form{clip-path:none}}
/* in the tab the nav sits on the page itself, so it takes the page's colours */
.claim-room.notched .hnav nav{background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.claim-room.notched .hnav nav a{color:var(--slate)}
.claim-room.notched .hnav nav a:hover{background:var(--card);color:var(--ink)}

/* ══ abstract shapes: tabs that rise from an edge, a notch cut into a corner, inverse fillets at every turn ══ */
/* a tab: the panel's own colour (--tb), its base melting into the edge through two inverse fillets. Without the script
   it is drawn by CSS (background + two radial-gradient fillets); with it (.inked) the ink path draws it instead. */
.ptab,.ctab{--tb:#0D0E11;--fr:22px;position:relative;z-index:2;width:max-content;margin:0 auto;color:#fff;background:var(--tb)}
.ptab>span,.ctab>span{position:relative;z-index:1}
.ptab.inked,.ctab.inked{background:transparent}
.ptab.inked>span,.ctab.inked>span{opacity:0;transform:translateY(6px);transition:opacity .3s cubic-bezier(.25,.1,.25,1),transform .735s var(--ease-smooth)}
.ctab.inked>span{transform:translateY(-6px)}
.ptab.inked.in>span,.ctab.inked.in>span{opacity:1;transform:none;transition-delay:.22s}
.ptab .ink,.ctab .ink{position:absolute;z-index:0;pointer-events:none;overflow:visible;max-width:none}
.ptab::before,.ptab::after,.ctab::before,.ctab::after{content:"";position:absolute;width:var(--fr);height:var(--fr)}
.ptab.inked::before,.ptab.inked::after,.ctab.inked::before,.ctab.inked::after{display:none}
/* the Trader Program's tab sits on top of the panel */
#program{position:relative}
.ptab{display:flex;align-items:center;height:56px;padding:0 30px;margin-bottom:-1px;border-radius:var(--fr) var(--fr) 0 0}
.ptab span{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.ptab span i{width:7px;height:7px;border-radius:50%;background:var(--brand)}
.ptab::before{left:calc(-1 * var(--fr));bottom:0;background:radial-gradient(circle at 0 0,transparent calc(var(--fr) - .6px),var(--tb) var(--fr))}
.ptab::after{right:calc(-1 * var(--fr));bottom:0;background:radial-gradient(circle at 100% 0,transparent calc(var(--fr) - .6px),var(--tb) var(--fr))}
#program .prog-head>.tag{display:none}
/* the closing card's keys hang under it in a tab */
.ctab{--tb:#0B0806;--fr:26px;margin-top:-1px;padding:20px 28px 22px;border-radius:0 0 var(--fr) var(--fr);transform-origin:50% 0}
.ctab-in .ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.ctab::before{left:calc(-1 * var(--fr));top:0;background:radial-gradient(circle at 0 100%,transparent calc(var(--fr) - .6px),var(--tb) var(--fr))}
.ctab::after{right:calc(-1 * var(--fr));top:0;background:radial-gradient(circle at 100% 100%,transparent calc(var(--fr) - .6px),var(--tb) var(--fr))}
.closeroom{padding-bottom:300px}
.closeroom::after{content:"";position:absolute;z-index:0;left:0;right:0;bottom:0;height:120px;background:linear-gradient(rgba(11,8,6,0),#0B0806);pointer-events:none}
/* the fee window: a notch cut into its bottom-right corner, and its key sitting in it */
.fwin .fnotch{position:absolute;z-index:3;right:calc(-1 * var(--oh));bottom:calc(-1 * var(--oh));pointer-events:none;color:var(--bg)}
.fwin .fnotch svg{position:absolute;right:0;bottom:0;overflow:visible;max-width:none}
.fwin.notched .fwin-f{padding-right:var(--nw,240px)}
.fwin.notched .fwin-f .key{position:absolute;z-index:4;right:14px;bottom:14px;opacity:0;transform:translateY(10px);transition:opacity .3s cubic-bezier(.25,.1,.25,1),transform .63s var(--ease-snappy)}
.fwin.notched.open .fwin-f .key{opacity:1;transform:none}
@media (max-width:720px){.fwin.notched .fwin-f{padding-right:0;padding-bottom:70px}.ptab{height:46px;padding:0 20px}.ctab{padding:16px 18px 18px}}
/* Reduce Motion, Apple's way: nothing travels, things fade */
@media (prefers-reduced-motion:reduce){.ptab.inked>span,.ctab.inked>span,.fwin.notched .fwin-f .key{transform:none;transition:opacity .2s cubic-bezier(.25,.1,.25,1)}}
/* the notch paints the page's colour over the window's corner; it reaches --oh past the window's edge (the clip lets it,
   where overflow-clip-margin is supported) so the window's own anti-aliased edge is covered, not left as a faint line */
.fwin.notched{--oh:6px;border-color:transparent;background-clip:padding-box;overflow:clip;overflow-clip-margin:var(--oh)}
@supports not (overflow-clip-margin:6px){.fwin.notched{--oh:0px}}

/* ══ the product, in the first screen: the real app in a window, three chapters with timers ══ */
.cshow{position:absolute;z-index:2;right:clamp(24px,3.4vw,56px);top:50%;width:min(46%,760px);transform:translateY(-46%);transition:opacity .5s}
.cshow-win{border-radius:18px;overflow:hidden;background:#0B0B0D;border:1px solid rgba(255,255,255,.12);box-shadow:0 50px 90px -40px rgba(0,0,0,.85),0 0 0 6px rgba(255,255,255,.03);transform:perspective(2000px) rotateY(-11deg) rotateX(3deg);transform-origin:70% 50%;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.cshow:hover .cshow-win{transform:perspective(2000px) rotateY(-4deg) rotateX(1deg)}
.cshow-win .bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#141418;border-bottom:1px solid rgba(255,255,255,.06)}
.cshow-win .bar i{width:9px;height:9px;border-radius:50%;background:#2A2A30}
.cshow-win .bar span{margin-left:10px;font:500 11px var(--mono);color:#6E737C}
.cshow-shots{position:relative;aspect-ratio:16/10}
.cshow-shots img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transform:scale(1.03);transition:opacity .7s ease,transform 3.6s ease}
.cshow-shots img.on{opacity:1;transform:none}
.cshow-tabs{display:flex;gap:8px;margin-top:14px;justify-content:flex-end}
.cshow-tabs button{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;padding:10px 14px 12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font:500 13.5px/1 var(--sans);color:rgba(255,255,255,.66);transition:background .3s,color .3s}
.cshow-tabs button b{font:500 11px/1 var(--mono);color:rgba(255,255,255,.45)}
.cshow-tabs button[aria-selected="true"]{background:rgba(255,255,255,.12);color:#fff}
.cshow-tabs button[aria-selected="true"] b{color:var(--brand)}
.cshow-tabs button i{position:absolute;left:10px;right:10px;bottom:5px;height:2px;border-radius:2px;background:var(--brand);transform-origin:0 50%;transform:scaleX(var(--t,0))}
.claim-room:has(.cstage:not([data-step="ask"])) .cshow{opacity:0;pointer-events:none}
@media (min-width:1081px){.cstage[data-step="ask"] .cask{max-width:min(760px,48vw)}.cstage[data-step="ask"] .chead{font-size:clamp(44px,4.7vw,86px)}}
@media (max-width:1080px){.cshow{position:relative;top:auto;right:auto;width:auto;margin:0 20px 28px;transform:none}.cshow-win{transform:none}.cshow-tabs{justify-content:flex-start;overflow-x:auto}.cshow-tabs button{flex:none}}

/* the theme switch spreads like ink: the new colours are revealed by a growing, wobbling blot */
html.inking::view-transition-old(root),html.inking::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.inking::view-transition-new(root){z-index:2}

/* ══ iPhone segmented controls: one pill glides between the options (Light|Dark, the product's three chapters).
   Its leading edge leaves first and its trailing edge a beat later, both on the jelly spring, so it stretches as it
   travels and lands with a bounce. Drawn by elevate.js (glide). ══ */
.glides{position:relative;isolation:isolate}
.glides>.glide{position:absolute;z-index:0;pointer-events:none;border-radius:99px;transition:left .62s var(--ease-bouncy),right .62s var(--ease-bouncy),top .3s,height .3s}
.glides>button{position:relative;z-index:1}
.scheme.glides>.glide{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.scheme.glides button,.scheme.glides button[aria-pressed="true"]{background:transparent;box-shadow:none;transition:color .3s}
.cshow-tabs.glides>.glide{border-radius:12px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.cshow-tabs.glides button[aria-selected="true"]{background:rgba(255,255,255,.06)}
@media (prefers-reduced-motion:reduce){.glides>.glide{transition:none}.key,.key .pin{transition:background .25s}.key:active{transform:none}.rise.form{transform:none}}

/* ══ the window: every in-page button opens its part of the site here instead of jumping down the page (his rule,
   20 Oct). The site's dot-grid modal: dark in both schemes, the dot ground moving inside, one orange key. The section
   inside keeps its own copy and its own live parts; it is only lifted here, and goes back when the window closes. ══ */
html.peeking{overflow:hidden;padding-right:var(--gap,0px)}
.peek{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px}
.peek[hidden]{display:none}
.peek-scrim{position:absolute;inset:0;background:rgba(8,8,10,.56);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.peek-win{position:relative;width:min(1180px,100%);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);display:flex;flex-direction:column;border-radius:2rem;overflow:hidden;background:#0A0B0E;color:var(--ink);box-shadow:0 60px 120px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.08);outline:none}
.peek-ground{z-index:0}
.peek-bar{position:relative;z-index:2;flex:none;display:flex;align-items:center;justify-content:space-between;padding:16px 16px 6px 28px}
.peek-tag{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.peek-tag i{width:7px;height:7px;border-radius:50%;background:var(--brand)}
.peek-x{width:44px;height:44px;border-radius:99px;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;cursor:pointer;transition:transform .65s var(--ease-jelly),background .2s}
.peek-x svg{width:16px;height:16px}
@media (hover:hover){.peek-x:hover{background:rgba(255,255,255,.15);transform:rotate(90deg)}}
.peek-x:active{transform:scale(.9);transition:transform .1s ease-out}
.peek-body{position:relative;z-index:1;flex:1 1 auto;min-height:0;overflow:auto;overflow-x:hidden;overscroll-behavior:contain;padding:0 0 32px}
.peek-foot{position:relative;z-index:2;flex:none;display:flex;justify-content:flex-end;padding:14px 18px 18px;border-top:1px solid rgba(255,255,255,.07);background:#0A0B0E}
.peek-foot[hidden]{display:none}
.peek-hold{pointer-events:none}
/* what each section needs to sit in the window rather than on the page */
.peek-body>.in-peek{margin:0}
.peek-body>.sec{padding:8px 28px 0}
.peek-tag[hidden]{display:none}
.peek-body>#program{padding:16px 18px 0}
.peek-body>#anima{height:auto;padding:0 18px}
.peek-body>#anima .apin{position:relative;height:auto;min-height:0;padding:0}
.peek-body>#anima .room{min-height:600px}
.peek-body>#anima canvas.film{display:none}
.peek-body>#tour .tourtrack{height:auto}
.peek-body>#tour .tourpin{position:relative;height:auto;padding:0}
.peek-body>#tour .tourpin .shotframe .shots{height:clamp(240px,50vh,520px)}
@media (max-width:720px){
  .peek{padding:0;place-items:end stretch}
  .peek-win{width:100%;max-height:calc(100dvh - 10px);border-radius:1.6rem 1.6rem 0 0}
  .peek-bar{padding:12px 12px 4px 18px}
  .peek-body>.sec{padding:6px 14px 0}
  .peek-body>#program,.peek-body>#anima{padding:12px 8px 0}
}

/* ══ the bento's third card: getting IN is the part only ARC has (his 20 Oct: "Close is expected, opening is the unique
   element for us"). In the app a trade idea's Take opens the order with its stop and target set, and Confirm places it:
   two presses, so the card says two. The pointer takes a caller's ETH long, the order rises, Confirm, the receipt. ══ */
.takex{position:relative;height:214px;margin:22px 0 20px;padding:6px;border-radius:18px;background:var(--bg);overflow:hidden}
.takex .tidea{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:12px;height:58px;padding:0 10px 0 12px;border-radius:12px;background:var(--card)}
.takex .tidea img{width:30px;height:30px;border-radius:50%}
.takex .tw{display:flex;flex-direction:column;gap:3px;min-width:0}
.takex .tw b{font-weight:500;font-size:14px;color:var(--ink)}
.takex .tw span{font:500 11.5px var(--mono);color:var(--up)}
.takex .tk,.takex .cf{padding:8px 14px;border-radius:99px;font-size:12.5px;font-weight:500}
.takex .tk{background:var(--bg);border:1px solid var(--line2);color:var(--ink)}
.takex .tsheet{position:absolute;left:6px;right:6px;bottom:6px;height:142px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;gap:8px 12px;padding:12px 12px 12px 14px;border-radius:14px;background:var(--card);box-shadow:0 -18px 30px -18px rgba(0,0,0,.35),inset 0 0 0 1px var(--line);transform:translateY(112%)}
.takex .tsh{display:flex;align-items:center;gap:8px}
.takex .tsh b{font-weight:500;font-size:14px;color:var(--ink)}
.takex .sd{padding:3px 7px;border-radius:6px;font:500 10.5px/1 var(--mono)}
.takex .sd.l{background:rgba(16,156,88,.14);color:var(--up)}
.takex .tgrid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-self:start}
.takex .tgrid div{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-radius:10px;background:var(--bg)}
.takex .tgrid span{font:500 9.5px/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.takex .tgrid b{font:500 13px var(--mono);color:var(--ink)}
.takex .cf{grid-row:1;grid-column:2;align-self:start;background:var(--brand);color:#160803}
.takex .toast{position:absolute;left:12px;right:12px;bottom:10px;display:flex;align-items:center;gap:8px;padding:11px 14px;border-radius:12px;background:var(--ink);color:var(--bg);font-size:12.5px;opacity:0;transform:translateY(14px)}
.takex .toast i{width:16px;height:16px;border-radius:50%;background:#22C55E;flex:none}
.takex .ptr{position:absolute;width:18px;height:18px;border-radius:50%;background:rgba(250,111,67,.35);border:2px solid var(--brand);right:120px;top:120px;opacity:0;pointer-events:none;z-index:3}
.c3 .takex .tk{animation:tkpress 7s var(--ease) infinite}
.c3 .takex .tsheet{animation:sheetup 7s infinite}
.c3 .takex .cf{animation:cfpress 7s var(--ease) infinite}
.c3 .takex .toast{animation:tkin 7s var(--ease) infinite}
.c3 .takex .ptr{animation:tkptr 7s var(--ease) infinite}
@keyframes tkptr{0%,10%{opacity:0;right:130px;top:120px}16%{opacity:1}24%,30%{opacity:1;right:30px;top:21px}36%{opacity:0;right:30px;top:21px}44%{opacity:0;right:70px;top:150px}48%{opacity:1}54%,60%{opacity:1;right:45px;top:106px}64%,100%{opacity:0;right:45px;top:106px}}
@keyframes tkpress{0%,27%{transform:none;background:var(--bg);color:var(--ink)}30%{transform:scale(.9);background:var(--brand);color:#160803}35%,92%{transform:none;background:var(--brand);color:#160803}97%,100%{transform:none;background:var(--bg);color:var(--ink)}}
@keyframes sheetup{0%,31%{transform:translateY(112%)}40%{transform:translateY(-4%);animation-timing-function:ease-out}44%,62%{transform:none}70%,100%{transform:translateY(112%)}}
@keyframes cfpress{0%,57%{transform:none}60%{transform:scale(.88)}64%,100%{transform:none}}
@keyframes tkin{0%,66%{opacity:0;transform:translateY(14px)}72%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){.c3 .takex *{animation:none!important}.c3 .takex .tsheet{transform:none}}

/* ══ ANIMA's chat, bigger, drawn with the app's own parts (anima-chat.css holds the app's rules, scoped to .achat; these
   are the page's: the plate it sits on, its bar, the cards' layout, and how things arrive). His 20 Oct ask: "a more
   cinematic chat bar component with responses and market data streaming through the same way it does on staging". ══ */
.apin .room{grid-template-columns:minmax(0,680px) 1fr}
.aleft .achat{margin-top:22px;flex:1 1 auto;min-height:0}
.achat{display:flex;flex-direction:column;min-height:540px;max-height:100%;border-radius:28px;background:rgba(12,11,10,.66);backdrop-filter:blur(26px) saturate(1.2);-webkit-backdrop-filter:blur(26px) saturate(1.2);border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 90px -40px rgba(0,0,0,.85);overflow:hidden;color:#F2F2F0;font-family:var(--sans);transition:opacity .45s ease}
.achat.fresh .achat-turns{opacity:0;transform:translateY(-10px);transition:opacity .45s ease,transform .45s ease}
.achat-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px 12px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.achat-top .who{display:flex;align-items:center;gap:10px;font-weight:500;font-size:15px}
.achat-top .who img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.achat-top .who em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-weight:400;font-size:12.5px;color:rgba(255,255,255,.6)}
.achat-top .who em i{width:7px;height:7px;border-radius:50%;background:#22C55E}
.achat[data-state="busy"] .achat-top .who em i{background:var(--brand);animation:achatPulse 1s ease-in-out infinite}
@keyframes achatPulse{50%{opacity:.3}}
.achat-turns{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none;padding:22px 18px 10px;display:flex;flex-direction:column;gap:18px;-webkit-mask-image:linear-gradient(transparent,#000 30px);mask-image:linear-gradient(transparent,#000 30px)}
.achat-turns::-webkit-scrollbar{display:none}
.achat-in,.achat-rise{animation:achatIn .66s var(--ease-jelly) both}
@keyframes achatIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.achat .w{opacity:0;transition:opacity .3s ease}
.achat .w.on{opacity:1}
/* the cards */
.achat-card{border-radius:16px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);padding:12px 14px;max-width:560px}
.achat-card-h{display:flex;align-items:center;gap:9px;font-size:14px}
.achat-card-h img{width:22px;height:22px;border-radius:50%}
.achat-card-h b{font-weight:600}
.achat-card-h span{font-size:12px;color:rgba(255,255,255,.5)}
.achat-card-h .sd{padding:3px 7px;border-radius:6px;background:rgba(16,156,88,.16);color:#2BD47D;font:500 10.5px/1 var(--mono)}
.achat .live{margin-left:auto;font:500 13px var(--mono);font-style:normal;color:#fff;padding:3px 7px;border-radius:7px;transition:background .5s,color .5s}
.achat .live.tick-up{background:rgba(250,111,67,.18);color:#FFB08F}
.achat .live.tick-dn{background:rgba(255,255,255,.08);color:#C9C9C6}
.achat-chart svg{display:block;width:100%;height:190px;margin-top:10px}
.achat-chart .wk{stroke-width:1}.achat-chart .wk.up{stroke:#FA6F43}.achat-chart .wk.dn{stroke:#7D7D7A}
.achat-chart .bd.up{fill:#FA6F43}.achat-chart .bd.dn{fill:#7D7D7A}
.achat-chart .mk line{stroke-width:1.2;stroke-dasharray:4 4}
.achat-chart .mk text{font:500 10.5px var(--mono)}
.achat-chart .mk.neg line{stroke:#FF6B6B}.achat-chart .mk.neg text{fill:#FF8A8A}
.achat-chart .mk.up line{stroke:#2BD47D}.achat-chart .mk.up text{fill:#5BE39A}
.achat-chart .now line{stroke:rgba(255,255,255,.45);stroke-dasharray:1 3}
.achat-legend{display:flex;gap:16px;margin-top:8px;font:500 11px var(--mono);color:rgba(255,255,255,.6)}
.achat-legend span{display:inline-flex;align-items:center;gap:6px}
.achat-legend i{width:12px;height:2px;border-radius:2px}
.achat-legend .neg i{background:#FF6B6B}.achat-legend .up i{background:#2BD47D}
.achat-three{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.achat-three div,.achat-risk{border-radius:11px;background:rgba(255,255,255,.05);padding:9px 11px}
.achat-three span,.achat-risk span{display:block;font:500 10px/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.48)}
.achat-three b{display:block;margin-top:5px;font:500 15px var(--mono);color:#fff}
.achat-three b.neg{color:#FF8A8A}.achat-three b.up{color:#5BE39A}
.achat-risk{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:6px 10px;margin-top:8px}
.achat-risk b{font:500 14px var(--mono);color:#fff}
.achat-keys{display:flex;gap:8px;margin-top:12px}
.achat-key{flex:1;display:grid;place-items:center;height:42px;border-radius:99px;font-weight:500;font-size:14px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.achat-key.pri{background:var(--brand);color:#160803;box-shadow:none}
.achat-tape .row,.achat-scan .row{display:grid;align-items:center;gap:10px;height:34px;font-size:13.5px}
.achat-tape .row{grid-template-columns:20px auto auto 1fr auto}
.achat-tape img,.achat-scan img{width:20px;height:20px;border-radius:50%}
.achat-tape b{font:500 13.5px var(--mono)}
.achat-tape .row>span:not(.up):not(.neg){color:rgba(255,255,255,.6)}
.achat-tape em,.achat-scan em{font-style:normal;font:500 12px var(--mono);color:rgba(255,255,255,.45);text-align:right}
.achat .up{color:#2BD47D}.achat .neg{color:#FF6B6B}
.achat-scan .row{grid-template-columns:18px 20px 64px 1fr 70px}
.achat-scan .rk{font:500 11px var(--mono);color:rgba(255,255,255,.4)}
.achat-scan b{font-weight:600}
.achat-scan .dots{display:flex;gap:5px}
.achat-scan .dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.1)}
.achat-scan .dots.up i.on{background:#2BD47D}.achat-scan .dots.neg i.on{background:#FF6B6B}
.achat-scan em.up{color:#2BD47D}.achat-scan em.neg{color:#FF6B6B}
.achat-scan .gap{height:14px;line-height:6px;padding-left:46px;color:rgba(255,255,255,.3)}
/* under a finished answer */
.achat-acts{display:flex;align-items:center;gap:2px;margin-left:-6px;color:rgba(255,255,255,.45)}
.achat-acts>span{display:grid;place-items:center;width:30px;height:30px;border-radius:8px}
.achat-acts svg{width:15px;height:15px}
.achat-acts .srcs{display:inline-flex;width:auto;gap:0;padding:0 8px;margin-left:6px;font-size:12.5px}
.achat-acts .srcs i{width:14px;height:14px;margin-right:-4px;border-radius:50%;background:#2A2A2E;box-shadow:0 0 0 2px #121110}
.achat-acts .srcs i:nth-child(2){background:#3B3B40}.achat-acts .srcs i:nth-child(3){background:#FA6F43;margin-right:8px}
.achat-next{display:flex;flex-wrap:wrap;gap:8px}
.achat-next button{padding:9px 14px;border-radius:99px;font:500 13.5px/1 var(--sans);color:rgba(255,255,255,.82);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);cursor:pointer;transition:transform .55s var(--ease-jelly),background .2s,color .2s}
@media (hover:hover){.achat-next button:hover{background:rgba(255,255,255,.12);color:#fff}}
.achat-next button.press{background:#fff;color:#15171C;transform:scale(.95)}
/* the bar is the app's (.dk-composer.ex-askbox); on the page it sits at the foot of the plate, and presses in when it sends */
.achat .achat-box{margin:6px 14px 14px}
.achat .achat-box textarea{pointer-events:none}
.achat .dk-send.go{transform:scale(.82);transition:transform .12s ease-out}
.achat .dk-send{transition:transform .6s var(--ease-jelly),background .2s,color .2s}
/* the site's two cards, in the app's card */
.achat .achat-tape,.achat .achat-scan{padding:10px 14px}
/* ARC's candles: orange when the price rose, grey when it fell (his rule, every chart ARC draws) */
.achat .ex-mk .ex-mk-wick.up{stroke:#FA6F43}.achat .ex-mk .ex-mk-wick.down{stroke:#7D7D7A}
.achat .ex-mk .ex-mk-body.up{fill:#FA6F43}.achat .ex-mk .ex-mk-body.down{fill:#7D7D7A}
.achat .ex-mk .ex-mk-body{opacity:.85}.achat .ex-mk .ex-mk-wick{opacity:.7}
.achat .ex-rt-q.press{color:var(--fg1);background:var(--surf3);border-radius:8px;transform:scale(.985);transition:transform .5s var(--ease-jelly),background .2s}
.achat [data-live]{transition:color .5s}
.achat [data-live].tick-up{color:#FFB08F}.achat [data-live].tick-dn{color:#B9B9B6}
.achat-nojs{padding:18px;color:rgba(255,255,255,.7)}
@media (max-width:1080px){.apin .room{grid-template-columns:1fr}}
@media (max-width:720px){.achat{min-height:480px;border-radius:22px}.achat-style button{padding:6px 8px;font-size:11.5px}.achat-top{flex-wrap:wrap}.achat-turns{padding:16px 12px 8px}.achat-three b{font-size:13.5px}.achat-scan .row{grid-template-columns:16px 18px 54px 1fr 62px}.achat-scan .dots{gap:3px}.achat-scan .dots i{width:6px;height:6px}}
@media (prefers-reduced-motion:reduce){.achat .w{opacity:1;transition:none}.achat-in,.achat-rise{animation:none}.achat .caret{animation:none}}
.achat-coin{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.12);font:600 10.5px/1 var(--sans);font-style:normal;color:#fff}
.achat-card-h .achat-coin{width:22px;height:22px}

/* ══ rhythm: one type scale and one spacing scale for the whole page (his 20 Oct: "Mobile looks too overcrowded. And
   the spacing for text and elements isn't great on desktop or mobile"). Body text up a size with room between lines;
   every section's head built the same way (tag 16 → heading 18 → lede 28 → its content); cards padded alike. ══ */
.sec{padding-top:136px}
h2.h{font-size:clamp(34px,3.6vw,54px);line-height:1.05}
.lede{margin-top:18px;font-size:18px;line-height:1.6;max-width:46ch}
.headrow{margin-bottom:56px;gap:40px}
.headrow .lede{text-wrap:pretty}
.feat-head .key{margin-top:30px}
.bento{gap:18px;margin-top:60px}
.cardx{padding:32px}
.cardx h3{line-height:1.14}
.cardx p,.usp p,.way p,.post p{font-size:15.5px;line-height:1.6;margin-top:10px}
.usps,.ways{gap:18px}
.usp{padding:30px 30px 32px}
.usp h3{margin-top:20px;font-size:20px;line-height:1.2}
.way .txt{padding:24px 28px 30px}
.way h3{font-size:21px;line-height:1.2}
.pane-txt p{font-size:16px;line-height:1.6}
.pane-txt li{font-size:15px;line-height:1.5}
.safecard{padding:38px}
/* the claim hero, desktop: the words keep clear of the product window; the paste box on its own line; the fees a tidy 2×2 */
@media (min-width:1081px){
  .cstage[data-step="ask"] .cask{max-width:min(720px,calc(50% - 40px))}
  .cstage[data-step="ask"] .chead{font-size:clamp(44px,4.4vw,82px)}
  .cstage[data-step="ask"] .csub{max-width:44ch}
}
.cform{gap:12px}
.cpaste{flex:1 1 100%;max-width:520px;min-width:0}
.cpaste input{text-overflow:ellipsis}
.cfees{display:grid;grid-template-columns:repeat(2,max-content);gap:10px;margin-top:30px}
.cfees>span{grid-column:1/-1;margin-bottom:4px}
.cfees b{padding:6px 16px 6px 6px;font-size:14.5px}
.cfees b img{width:28px;height:28px}
.cfees b i{font-size:17px;margin-left:auto}
.ctry{display:grid;grid-template-columns:repeat(4,max-content);gap:8px;margin-top:20px}
.ctry>span{grid-column:1/-1}
/* phones: fewer things at once, room around each */
@media (max-width:720px){
  .sec{padding-top:88px}
  h2.h{font-size:clamp(30px,8.6vw,40px);line-height:1.07}
  .lede{font-size:16.5px;margin-top:14px}
  .headrow{flex-direction:column;align-items:flex-start;gap:22px;margin-bottom:32px}
  .headrow .lede{text-align:left}
  .bento,.usps,.ways{gap:12px}
  .bento{margin-top:40px}
  .cardx,.usp,.safecard{padding:24px}
  .way .txt{padding:20px 22px 24px}
  .cardx p,.usp p,.way p,.post p{font-size:15px}
  /* the claim hero */
  .chead{font-size:clamp(38px,10.4vw,52px)}
  .csub{font-size:16px;margin-top:18px}
  .cform{margin-top:24px}
  .cfees{grid-template-columns:1fr 1fr;gap:8px;margin-top:24px}
  .cfees b{padding:5px 12px 5px 5px;font-size:13.5px;gap:8px}
  .cfees b img{width:24px;height:24px;border-radius:7px}
  .cfees b i{font-size:15px}
  .ctry{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:16px -20px 0;padding:0 20px;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .ctry::-webkit-scrollbar{display:none}
  .ctry>span{display:none}
  .ctry button{flex:none}
  .ctry::before{content:"Try a real wallet:";flex:none;align-self:center;font-size:13px;color:rgba(255,255,255,.55)}
  .cshow{margin:8px 16px 24px}
  .cshow-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;overflow:visible}
  .cshow-tabs button{flex-direction:column;align-items:flex-start;gap:5px;padding:9px 10px 12px;font-size:12px;line-height:1.25;white-space:normal;text-align:left}
  /* the big trades: no wallet address on a phone, so each trade is one line */
  .tape .who{display:none}
  .tape li{padding:11px 12px;gap:10px}
  /* ANIMA's chat on a phone: the answer and its card, two next questions, no row of keys */
  .achat .ex-acts{display:none}
  .achat .ex-rt-next .ex-rt-q:nth-of-type(3){display:none}
  .achat-turns{gap:14px}
  .achat .achat-box{margin:4px 10px 10px}
}