 

 
 
#route[hidden]{display:none !important}
#route .rsticky{display:grid;grid-template-columns:1.06fr .94fr;
  gap:clamp(30px,5vw,90px);align-items:start;margin-top:clamp(24px,4vw,52px)}

#route .rstep{min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;padding-block:0}
#route .rstep .rk{color:var(--mut);display:block;margin-bottom:14px}
#route .rstep h2{font-family:'Clash Display','Clash Fallback';font-weight:700;letter-spacing:var(--ls-d2);
  font-size:var(--d4);line-height:1.03;margin:0 0 16px;max-width:15ch;
  transition:opacity .4s ease}
#route .rstep p{margin:0;max-width:40ch;color:var(--mut);font-size:var(--t4);
  transition:opacity .4s ease}
 
#route .rstep:not(.live) h2,#route .rstep:not(.live) p{opacity:.3}

#route .rpanecol{position:sticky;top:0;height:100vh;display:flex;align-items:center}
#route .rpane{width:100%;background:var(--pane);color:var(--sand-100);
  border-radius:var(--r5);padding:clamp(26px,3vw,40px);position:relative;overflow:hidden}
#route .plab{color:var(--ball-500);display:block;margin-bottom:12px}

 
 
 
#route .rcards{display:grid;align-items:start;overflow:hidden;
  transition:height .42s cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce){#route .rcards{transition:none}}
#route .rcard{grid-area:1/1;opacity:0;visibility:hidden;
  transform:translateY(8px);
  transition:opacity .28s ease,transform .38s cubic-bezier(.22,1,.36,1),visibility 0s linear .3s}
#route .rcard.on{opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s}

#route .rcard h3{font-family:'Clash Display','Clash Fallback';font-weight:700;letter-spacing:var(--ls-d2);
  font-size:var(--d6);line-height:1.02;margin:0 0 8px;color:var(--sand-100)}
#route .rcard .rline{margin:0 0 22px;font-size:var(--t4);color:rgba(243,241,234,.6);
  max-width:34ch}
 
#route .rcard dl{margin:0;display:grid;grid-template-columns:1fr 1fr;
  gap:0 clamp(20px,2.6vw,34px)}
#route .rcard .row.work{order:-1;grid-column:1 / -1}
 
 
#route .rcard .row{display:grid;gap:6px;padding:0 0 clamp(14px,1.8vw,20px)}
#route .rcard .row.work{grid-template-columns:1fr;gap:10px;
  padding-bottom:clamp(20px,2.4vw,26px)}
 
#route .rcard .row:not(.work){padding-bottom:0}
#route .rcard dt{font-family:'Satoshi','Satoshi Fallback',sans-serif;font-size:var(--l2);letter-spacing:var(--ls-uc);
  text-transform:uppercase;color:rgba(243,241,234,.5)}
 
#route .rcard dd{margin:0;font-size:var(--t4);color:rgba(243,241,234,.94);max-width:52ch}
 
#route .rcard .row.cost dd{color:var(--ball-500);font-weight:600}
#route .rcard .row.work{align-items:start}

 
 
#route .rtags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:0}
#route .rtags span{font-family:'Satoshi','Satoshi Fallback',sans-serif;font-size:var(--t6);letter-spacing:var(--ls-t2);
  font-weight:500;padding:7px 13px;border-radius:99px;line-height:1.25;
  border:1px solid var(--chip-edge);color:rgba(243,241,234,.88)}
#route .rtags span.key{background:var(--ball-500);border-color:var(--ball-500);
  color:var(--iron-800);font-weight:500}
 

 
#route .rgo{margin-top:26px}

 
#route .rrail{position:absolute;right:clamp(26px,3vw,40px);top:clamp(26px,3vw,40px);
  display:flex;gap:5px;z-index:2}
#route .rrail i{display:block;width:22px;height:3px;border-radius:2px;
  background:rgba(243,241,234,.22);transition:background .35s ease}
#route .rrail i.on{background:var(--ball-500)}


 
#route .rstep .rtap{all:unset;display:block;width:100%;box-sizing:border-box;
  text-align:left;cursor:default;color:inherit;font:inherit}
#route .rstep .rtap:focus-visible{outline:2px solid var(--acc);outline-offset:6px;
  border-radius:8px}
@media(min-width:901px){
   
  #route .rstep .rtap{cursor:default}
}

 

 
@media(max-width:900px){
  #route .rsticky{grid-template-columns:1fr;gap:0}
   
  #route .rcard dl{grid-template-columns:1fr}
  #route .rcard .row:not(.work){padding-bottom:clamp(14px,1.8vw,20px)}
  #route .rcard .row:last-of-type{padding-bottom:0}
  #route .rstepcol{order:1;border-top:1px solid var(--line);margin-top:22px}
  #route .rpanecol{position:static;height:auto;order:2;margin-top:20px}

   
  #route .rstep{min-height:0;padding:0;display:block;
    border-bottom:1px solid var(--line)}
  #route .rstep .rtap{display:grid;grid-template-columns:1fr auto;
    align-items:center;gap:14px;padding:16px 2px;cursor:pointer;min-height:56px}
  #route .rstep .rtap:focus-visible{outline:2px solid var(--acc);outline-offset:-3px;
    border-radius:8px}
  #route .rstep .rk{margin-bottom:5px;font-size:var(--l1)}
  #route .rstep h2{font-size:var(--t3);line-height:1.2;margin:0;max-width:none;
    transition:color .25s ease}
   
  #route .rstep p{display:none}
  #route .rstep:not(.live) h2,#route .rstep:not(.live) p{opacity:1}
  #route .rstep:not(.live) h2{color:var(--mut)}
  #route .rstep.live h2{color:var(--fg)}

   
  #route .rstep .rdot{width:11px;height:11px;border-radius:50%;
    border:1px solid var(--line);flex-shrink:0;transition:background .25s ease,
    border-color .25s ease,transform .35s cubic-bezier(.34,1.3,.64,1)}
  #route .rstep.live .rdot{background:var(--volt-surf);border-color:var(--volt-surf);
    transform:scale(1.25)}

  #route .rpane{padding:22px 20px}
  #route .rcard h3{font-size:var(--t1)}
  #route .rcard .row{grid-template-columns:1fr;gap:4px;padding:12px 0}
  #route .rrail{display:none}
}
@media(max-width:560px){
  #route .rcard .rline{display:none}
  #route .rgo{width:100%}
}
 
@media(min-width:901px){ #route .rstep .rdot{display:none} }

 
 
#pricing .prlede{margin:0 0 clamp(26px,3vw,38px);color:var(--mut);font-size:var(--t4);
  max-width:52ch;line-height:1.6}

 
 
 
 
.pnote{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px;font-size:var(--t6);line-height:1.6;color:var(--mut);max-width:52ch;margin:0}
#pricing .pnotes{margin-top:clamp(22px,2.6vw,32px);
  display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;
  align-items:flex-start;gap:11px clamp(32px,5vw,80px)}
 
#pricing .pnotes .pnote{align-items:center;flex:0 1 42ch;max-width:42ch}
 
#pricing .pnotes .pnote:last-child{display:block;flex-basis:38ch;max-width:38ch;
  text-align:right}
#pricing .pnotes .pnote:last-child .ptl{margin-left:9px}
@media(max-width:820px){
   
  #pricing .pnotes{display:block}
  #pricing .pnotes .pnote{max-width:52ch}
  #pricing .pnotes .pnote:last-child{max-width:52ch;text-align:left;margin-top:11px}
}

 
 

 
.rate{width:100%;border-collapse:collapse;text-align:left}
.rate caption{text-align:left;color:var(--mut);font-size:var(--t6);
  padding-bottom:14px;max-width:78ch}
.rate th{font-family:'Satoshi','Satoshi Fallback',sans-serif;font-size:var(--l1);letter-spacing:var(--ls-uc);
  text-transform:uppercase;color:var(--mut);font-weight:500;padding:0 0 14px;
  border-bottom:1px solid var(--line)}
 
.rate td{padding:clamp(18px,2.4vw,26px) 0;border-bottom:1px solid var(--line);
  vertical-align:middle;transition:background .28s ease,color .28s ease,border-color .28s ease}
.rate td:first-child{vertical-align:top}
 
.rate.fmt td:first-child{vertical-align:middle}
 
 
@media(min-width:821px){
  .rate .lead td{background:color-mix(in srgb,var(--fg) 5%,transparent)}
}
 
.rate tbody tr:has(+ .lead) td,
.rate tbody .lead td{border-bottom-color:transparent}
.rate td:first-child,.rate th:first-child{padding-left:clamp(14px,2vw,22px)}
 
@media(min-width:821px){
  .rate td:last-child,.rate th:last-child{width:1%}
}
.rate td:last-child,.rate th:last-child{
  padding-right:clamp(14px,2vw,22px);white-space:nowrap;text-align:center}
.rate td:first-child{border-top-left-radius:14px;border-bottom-left-radius:14px}
.rate td:last-child{border-top-right-radius:14px;border-bottom-right-radius:14px}
.rate .what{font-family:'Clash Display','Clash Fallback';font-weight:700;letter-spacing:var(--ls-d3);
  font-size:var(--t1);display:block}
.rate .sub{display:block;color:var(--mut);font-size:var(--t6);font-weight:500;
  margin-top:5px}
.rate .per{font-family:'Clash Display','Clash Fallback';font-weight:700;letter-spacing:-.025em;font-variant-numeric:tabular-nums;
  font-size:var(--d6);line-height:1;white-space:nowrap;display:block}
 
.rate .tot{display:block;color:var(--mut);font-size:var(--t6);margin-top:8px;
  font-variant-numeric:tabular-nums}
.rate .save{font-family:'Satoshi','Satoshi Fallback',sans-serif;font-size:var(--t6);letter-spacing:.06em;
  display:inline-block;padding:5px 11px;border-radius:99px;background:var(--volt-surf);
  color:var(--ink);white-space:nowrap;transition:background .28s ease,color .28s ease}
.rate .none{color:var(--mut);font-size:var(--t6)}
 
.rate .was{font-family:'Clash Display','Clash Fallback';font-size:var(--t2);letter-spacing:var(--ls-d3);font-variant-numeric:tabular-nums;
  display:block;margin-bottom:2px}


 
@media(min-width:821px){
  .rate td:nth-child(3),.rate th:nth-child(3){text-align:center}
}
 

 
 
@media(hover:hover) and (min-width:821px){
   
  .rate tbody tr{cursor:pointer}
   
   
  .rate tbody tr:hover td,
  #formats .rate tbody tr.picked td{background:var(--row-fill);color:var(--sand-100);
    border-bottom-color:transparent;
    --fg:var(--sand-100);
     
    --bg:var(--row-fill); --bg2:var(--iron-700);
    --mut:rgba(243,241,234,.70); --dim:rgba(243,241,234,.46);
    --btn-fill:var(--ball-500); --btn-label:var(--iron-800)}
  #formats .rate tbody tr:has(+ tr.picked) td{border-bottom-color:transparent}
   
   
  .rate tbody tr:has(+ tr:hover) td{border-bottom-color:transparent}
  .rate:has(tbody tr:first-child:hover) thead th{border-bottom-color:transparent}
   
  .rate tbody tr:hover .sub,
  .rate tbody tr:hover .tot,
  .rate tbody tr:hover .none,
  #formats .rate tbody tr:hover .sub,
  #formats .rate tbody tr.picked .sub,
  #formats .rate tbody tr.picked .tot,
  #formats .rate tbody tr.picked .none{color:var(--mut)}
   
  .rate tbody tr:hover .save{background:var(--volt-surf);color:var(--ink)}
   
}

 
@media(max-width:820px){
  .rate,.rate tbody,.rate tr,.rate td{
    display:block;width:100%}
  .rate thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .rate tr{border:1px solid var(--line);border-radius:var(--r4);
    padding:20px clamp(16px,4vw,22px);margin-bottom:12px}
  .rate td{border:0;padding:0;border-radius:0}
   
  .rate td:first-child{padding-left:0}
  .rate td:last-child{padding-right:0}
  .rate td + td{margin-top:14px}
  .rate td:last-child{text-align:left;padding:0}
   
  .rate .lead{background:color-mix(in srgb,var(--fg) 5%,transparent);
    border-color:var(--acc)}
  .rate .rbtn{width:100%}
   
  .rate td[data-l]::before{content:attr(data-l);display:block;
    font-family:'Satoshi','Satoshi Fallback',sans-serif;font-size:var(--l2);letter-spacing:var(--ls-uc);
    text-transform:uppercase;color:var(--mut);margin-bottom:6px}
}

 
.corp4{min-height:100svh;display:grid;align-content:center;
  padding:clamp(48px,7vh,80px) var(--gut);
   
  background:var(--bg);color:var(--fg);position:relative;z-index:2;
  transition:background-color .7s cubic-bezier(.22,1,.36,1),color .7s cubic-bezier(.22,1,.36,1)}
.corp4 .cpg{max-width:760px;margin:0 auto;width:100%}
.corp4 .cphead{margin-bottom:clamp(20px,3.2vh,32px)}
.corp4 h2.sec{margin:0 0 12px;max-width:18ch}
.corp4 .cpsub{color:var(--mut);font-size:var(--t4);line-height:1.5;margin:0;max-width:52ch}
.corp4 .cpchat{display:grid;gap:12px}
 
.corp4 .cpcoach{display:flex;align-items:flex-end;gap:12px;max-width:85%}
.corp4 .cpav{display:inline-flex;flex:none;margin-bottom:2px}
.corp4 .cpav i{width:32px;height:32px;border-radius:50%;background:var(--acc);display:inline-grid;
  place-items:center;font:600 12px/1 'Satoshi','Satoshi Fallback',sans-serif;color:var(--bg);font-style:normal}
.corp4 .cpav i+i{margin-left:-6px;box-shadow:0 0 0 2px var(--bg)}
.corp4 .cpask{margin:0;padding:14px 20px;border-radius:var(--r5);border-bottom-left-radius:6px;
  background:var(--fg);color:var(--bg);font-size:var(--t4);line-height:1.5;min-height:3.2em;display:grid;align-items:center;
  transition:background-color .7s cubic-bezier(.22,1,.36,1),color .7s cubic-bezier(.22,1,.36,1)}
 
.corp4.on-sand .cpbub{background:var(--card,var(--sand-050));box-shadow:var(--e2)}
.corp4 .cpav i,.corp4 .cpreply .btn,.corp4 .cpsend .btn,.corp4 .cpsend input,.corp4 .cpcur{
  transition:background-color .7s cubic-bezier(.22,1,.36,1),color .7s cubic-bezier(.22,1,.36,1),box-shadow .7s cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce){
  .corp4,.corp4 .cpask,.corp4 .cpav i,.corp4 .cpreply .btn,.corp4 .cpsend .btn,.corp4 .cpsend input,.corp4 .cpcur{transition:none}
}
.corp4 .cpask.typing span{display:inline-flex;gap:5px;align-items:center}
.corp4 .cpask.typing span::before,.corp4 .cpask.typing span::after{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.6;
  animation:cpdot .9s ease-in-out infinite}
.corp4 .cpask.typing span::after{animation-delay:.3s}
@keyframes cpdot{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.corp4 .cpask .cpq{animation:cpqin .4s cubic-bezier(.22,1,.36,1)}
@keyframes cpqin{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
 
.corp4 .cpme{display:flex;align-items:flex-end;justify-content:flex-end;gap:12px;margin-left:auto;width:min(100%,88%)}
.corp4 .cpyou{width:32px;height:32px;border-radius:50%;background:var(--acc);color:var(--bg);display:grid;place-items:center;flex:none;margin-bottom:2px;
  transition:background-color .7s cubic-bezier(.22,1,.36,1),color .7s cubic-bezier(.22,1,.36,1)}
.corp4 .cpyou .ico{width:16px;height:16px}
.corp4 .cpbub{position:relative;margin:0;flex:1 1 auto;min-width:0;padding:16px 22px;
  border-radius:var(--r5);border-bottom-right-radius:6px;
  background:var(--bg);color:var(--fg);font-size:var(--t4);line-height:1.55;min-height:3.3em}
.corp4 .cpbub.nudge{animation:cpnudge .46s cubic-bezier(.22,1,.36,1)}
@keyframes cpnudge{0%{transform:none}35%{transform:translateY(-3px)}100%{transform:none}}
 
.corp4 .cps{display:inline;font:inherit;font-weight:600;padding:1px 6px;border-radius:6px;border:0;cursor:pointer;color:inherit;
  --hl:color-mix(in srgb,var(--ball-500) 55%,transparent);
  background:linear-gradient(var(--hl),var(--hl)) no-repeat 0 0/100% 100%}
.corp4 .cps.hit{animation:cphit .55s cubic-bezier(.22,1,.36,1)}
@keyframes cphit{0%{background-size:0% 100%}100%{background-size:100% 100%}}
.corp4 .cps.now{outline:2px solid var(--fg);outline-offset:1px}
.corp4 .cps:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
@media(hover:hover){.corp4 .cps:hover{--hl:color-mix(in srgb,var(--ball-500) 85%,transparent)}}
.corp4 .cpcur{display:inline-block;width:2px;height:1em;background:var(--fg);vertical-align:-.15em;margin-left:3px;
  animation:cpblink 1s steps(2,start) infinite}
@keyframes cpblink{to{visibility:hidden}}
 
.corp4 .cpreply,.corp4 .cpsend{margin-left:auto;width:min(100%,88%);padding-right:44px;box-sizing:border-box}
.corp4 .cpreply{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;min-height:44px}
.corp4 .cpreply:empty{display:none}
.corp4 .cpreply .btn{min-height:44px}
.corp4 .cpreply.swap .btn{animation:cprin .32s cubic-bezier(.22,1,.36,1) both}
.corp4 .cpreply.swap .btn:nth-child(2){animation-delay:.05s}
.corp4 .cpreply.swap .btn:nth-child(3){animation-delay:.1s}
.corp4 .cpreply.swap .btn:nth-child(4){animation-delay:.15s}
@keyframes cprin{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
.corp4 .cpreply .btn.pop{animation:cppop .34s cubic-bezier(.22,1,.36,1)}
@keyframes cppop{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
 
.corp4 .cpsend{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end}
.corp4 .cpsend[hidden]{display:none}
.corp4 .cpsend label{display:block;font-family:'Satoshi','Satoshi Fallback',sans-serif;font-size:var(--l2);letter-spacing:var(--ls-uc);
  text-transform:uppercase;font-weight:600;color:var(--mut);margin:0 0 6px}
.corp4 .cpsend input{width:100%;height:48px;padding:0 14px;border-radius:var(--r-pill);border:0;font:inherit;
  font-size:var(--t5);color:var(--fg);background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong)}
.corp4 .cpsend input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.corp4 .cpsend input.bad{box-shadow:inset 0 0 0 2px var(--acc)}
.corp4 .cpsend .btn{white-space:nowrap}
.corp4 .cphp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;margin:0}
.corp4 .cpfine{font-size:var(--t6);color:var(--mut);line-height:1.5;margin:16px 0 0}
.corp4 .cpstat{font-size:var(--t5);line-height:1.5;margin:12px 0 0}
.corp4 .cpstat:empty{display:none}
.corp4 .cpstat.ok{color:var(--acc);font-weight:600}
.corp4.sent .cpsend,.corp4.sent .cpfine,.corp4.sent .cpreply{display:none}
 
.corp4 .ap{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.corp4 .ap.in{opacity:1;transform:none}
.corp4.in .ap{opacity:1;transform:none}
.corp4 .cpreply.wait{pointer-events:none}
.corp4 .cps.typing{animation:none;background-size:100% 100%}
@media(prefers-reduced-motion:reduce){
  .corp4 .ap{opacity:1;transform:none;transition:none}
  .corp4 .cps.hit,.corp4 .cpbub.nudge,.corp4 .cpreply.swap .btn,.corp4 .cpreply .btn.pop,.corp4 .cpask .cpq,.corp4 .cpcur{animation:none}
}
@media(max-width:640px){
  .corp4{padding:24px var(--gut)}
  .corp4 .cphead{margin-bottom:12px}
  .corp4 h2.sec{margin-bottom:8px;font-size:var(--d6)}
  .corp4 .cpsub{font-size:var(--t5)}
  .corp4 .cpcoach{max-width:100%}
  .corp4 .cpask{font-size:var(--t5);padding:12px 16px}
  .corp4 .cpme{width:100%;gap:8px}
  .corp4 .cpreply,.corp4 .cpsend{width:100%;padding-right:36px}
  .corp4 .cpyou{width:28px;height:28px}
  .corp4 .cpbub{font-size:var(--t5);padding:14px 16px}
  .corp4 .cpchat{gap:10px}
  .corp4 .cpsend{grid-template-columns:1fr 1fr}
  .corp4 .cpsend .btn{grid-column:1 / -1}
  .corp4 .cpfine{display:none}
}

 
 
.rate .pile{position:relative;display:block;height:34px;margin-top:12px}
.rate .pile i{position:absolute;top:0;width:30px;height:30px;border-radius:50%;
  background-image:url('/ball/ball-00.webp');background-size:contain;background-repeat:no-repeat;
  transition:transform .4s cubic-bezier(.34,1.3,.64,1)}
@media(max-width:820px){
  #pricing .rate .pile{height:30px;margin-top:10px}
  .rate .pile i{width:26px;height:26px}
}
@media(prefers-reduced-motion:reduce){.rate .pile i{transition:none}}

 
.rate td:last-child{text-align:right}
.rate .rbtn{width:100%;max-width:210px}
@media(max-width:820px){.rate .rbtn{max-width:none}}

 
@media(max-width:820px){
  .rate.stackfmt tbody{display:block}
  .rate.stackfmt tr{
    position:sticky;
    top:calc(var(--nav-clear,88px) + var(--st,0px));
    background:var(--bg2,var(--bg));
  }
   
  .rate.stackfmt tr:nth-child(1){--st:0px;z-index:1}
  .rate.stackfmt tr:nth-child(2){z-index:2}
  .rate.stackfmt tr:nth-child(3){z-index:3}
  .rate.stackfmt tr:nth-child(4){z-index:4}
  .rate.stackfmt tr:nth-child(n+5){z-index:5}
  .rate.stackfmt tr:nth-child(2){--st:10px}
  .rate.stackfmt tr:nth-child(3){--st:20px}
  .rate.stackfmt tr:nth-child(4){--st:30px}
  .rate.stackfmt tr:nth-child(n+5){--st:40px}
   
  .rate.stackfmt tr{box-shadow:var(--e2)}
   
  @media (prefers-reduced-motion: reduce){
    .rate.stackfmt tr{position:static;box-shadow:none}
  }
}

 
 

 
@media(max-width:900px){
  #route .rstep .rdot{background-image:url('/ball/ball-00.webp');background-size:contain;
    background-repeat:no-repeat;background-position:center;border:0;
    width:15px;height:15px;opacity:.3;
    transition:opacity .25s ease,transform .35s cubic-bezier(.34,1.3,.64,1)}
  #route .rstep.live .rdot{background-color:transparent;opacity:1;transform:scale(1.28)}
}

 
 
 
 
.forbit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(28px,5vw,72px);align-items:center;overflow-x:clip;
  padding-inline:var(--cin);padding-block:clamp(8px,1.6vw,18px)}
.forbit .fotext .lab{color:var(--mut)}
.forbit h2.sec{margin:14px 0 0;max-width:16ch}
.forbit .folede{color:var(--mut);font-size:var(--t4);line-height:1.6;
  max-width:44ch;margin:18px 0 0}
.forbit .fostage{position:relative;aspect-ratio:1;display:grid;place-items:center;
  width:100%;max-width:520px;margin-inline:auto}
 
.forbit .foball{width:66%;aspect-ratio:1;background-image:url('/ball/ball-00.webp');
  background-size:100% 100%;background-repeat:no-repeat;position:relative;z-index:3;
  will-change:background-position}
 
.forbit .foball.roll{background-image:url('/ball/sheet.webp');background-size:600% 400%}
 
.forbit .foshad{position:absolute;z-index:2;left:50%;width:79%;top:65%;
  aspect-ratio:3/2;transform:translateX(-50%);opacity:.5;
  background-image:url('/ball/shadow.webp');background-size:contain;
  background-repeat:no-repeat;background-position:center}
.forbit .fochip{position:absolute;font-family:'Satoshi','Satoshi Fallback',sans-serif;font-size:var(--l1);
  letter-spacing:var(--ls-uc);text-transform:uppercase;padding:7px 13px;border-radius:99px;
  white-space:nowrap;background:var(--bg);color:var(--mut);
  box-shadow:inset 0 0 0 1px var(--line-strong);will-change:transform,opacity}
.forbit .fochip:first-of-type{background:var(--ball-500);color:var(--iron-800);
  box-shadow:none;font-weight:600}
@media(max-width:900px){
  .forbit{grid-template-columns:1fr;gap:20px;min-height:0}
  .forbit .fostage{min-height:240px;max-width:360px;margin-inline:auto}
  .forbit .fochip{font-size:var(--l2);padding:6px 10px}
}
@media(prefers-reduced-motion:reduce){
   
  .forbit .fochip,.forbit .foball{transition:none}
}

 
.forbit.fmerge{align-items:center;margin-bottom:clamp(6px,1vw,14px)}
 
.forbit.fmerge .fostage{max-width:430px;margin-block:-6% 12%}
#formats .rate{margin-top:6px}
 
#formats .rate thead{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
 

 
 
 
.secmore{margin-top:30px;display:flex;justify-content:flex-end}
.fojoin{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px 18px;margin:clamp(22px,3vw,34px) 0 0;
  color:var(--mut);font-size:var(--t4);text-align:center}
@media(max-width:640px){
  .fojoin{flex-direction:column;align-items:stretch;gap:12px}}

 
 
#formats .rate .sub{font-size:var(--t5);color:var(--fg);max-width:46ch;margin-top:8px}
 
 
@media(min-width:821px){
  #formats .rate td:nth-child(2),#formats .rate th:nth-child(2){
    width:1%;white-space:nowrap;padding-right:clamp(26px,4vw,72px)}
}
 
#formats .fochip{border:0;font-family:'Satoshi','Satoshi Fallback',sans-serif;cursor:pointer;
  --btn-edge:color-mix(in srgb, var(--fg) 52%, transparent);
  background:var(--bg2);color:var(--fg);
  box-shadow:inset 0 0 0 1.6px var(--btn-edge);
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease}
 
#formats .fochip:first-of-type{background:var(--bg2);color:var(--fg);
  box-shadow:inset 0 0 0 1.6px var(--btn-edge)}
#formats .fochip:hover{background:color-mix(in srgb,var(--fg) 10%,var(--bg2))}
#formats .fochip:focus-visible{outline:2px solid var(--focus,var(--fg));outline-offset:2px}
#formats .fochip.lit,#formats .fochip.lit:first-of-type{
  background:var(--ball-500);color:var(--iron-800)}
 
@media(pointer:coarse){
  #formats .fochip{pointer-events:none;cursor:default}
}


