/* hub.css - the Tools hub's own parts (Gate 3, TL-11: "interactive, fun, and give the user a reason to keep
   scrolling"): four tool cards that each hold a small working piece of the tool, the trader's day as a timeline that
   appears as you scroll, the how-it-works cards and the product card. Tokens from site.css and tools.css. */

.hub-tools .sub,.hub-day .sub{margin:-12px 0 24px;color:var(--text-2)}
.tcards{display:grid;gap:18px}
@media (min-width:900px){.tcards{grid-template-columns:1fr 1fr;gap:22px}}
.tcard{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--fill);transition:transform .2s,box-shadow .2s}
.tcard:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(23,24,29,.12)}
.tc-vis{position:relative;min-height:220px;padding:18px 20px;background:var(--band);color:var(--band-text)}
.tc-cap{margin:0 0 10px;font-size:14px;color:var(--band-2)}
.tc-txt{display:grid;gap:8px;align-content:start;padding:18px 20px 20px}
.tc-txt h3{margin:0;font-size:21px}
.tc-txt h3 a{text-decoration:none}
.tc-txt p{margin:0;color:var(--text-2);font-size:15.5px}
.tc-btn{justify-self:start;margin-top:6px}

/* the quick lot */
.tc-range{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;color:var(--band-2)}
.tc-range output{font:500 20px var(--display);color:var(--band-text);font-variant-numeric:tabular-nums}
.tc-lot input[type=range]{width:100%;height:32px;margin:6px 0 4px;accent-color:#34c6b5;cursor:pointer}
.tc-lot input[type=range]:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.tc-big{margin:6px 0 0;font:400 54px/1 var(--display);font-variant-numeric:tabular-nums;color:#fbf8f2}
.tc-big small{font:400 18px "Inter",system-ui,sans-serif;color:var(--band-2)}
.tc-small{margin:6px 0 0;font-size:14px;color:var(--band-2)}
.tc-small output{color:var(--band-text);font-weight:600}

/* the quick calendar */
.tc-count{margin:0;font:400 46px/1.05 var(--display);font-variant-numeric:tabular-nums;color:#fbf8f2}
.tc-what{margin:8px 0 12px;font-size:15px;color:var(--band-text)}
.tc-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tc-list li{display:flex;gap:10px;align-items:baseline;padding:7px 10px;border-radius:8px;background:var(--band-card);font-size:13.5px;color:var(--band-2)}
.tc-list b{flex:0 0 auto;min-width:92px;color:var(--band-text);font-weight:600;font-variant-numeric:tabular-nums}

/* the four clocks */
.tc-clocks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tc-clocks li{display:grid;gap:2px;padding:10px 12px;border-radius:10px;background:var(--band-card);box-shadow:inset 4px 0 0 var(--c,#888)}
.tc-clocks b{font-size:14px;font-weight:600;color:var(--band-2)}
.tcc-t{font:400 32px/1.05 var(--display);font-variant-numeric:tabular-nums;color:#fbf8f2}
.tcc-s{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--band-faint)}
.tcc-s::before{content:"";width:9px;height:9px;border-radius:50%;border:2px solid var(--c,#888)}
.tc-clocks li.is-open .tcc-s{color:var(--band-text);font-weight:600}
.tc-clocks li.is-open .tcc-s::before{background:var(--c,#888)}
.tc-ses .s-syd{--c:#34c6b5}.tc-ses .s-tok{--c:#f8d470}.tc-ses .s-lon{--c:#6283da}.tc-ses .s-ny{--c:#e65a30}

/* the order sketch, played on a loop (still for visitors who ask for less motion) */
.tc-chart{display:block;width:100%;height:auto;max-width:440px}
.tc-chart .up{fill:#34c6b5;stroke:#34c6b5;stroke-width:1.5}
.tc-chart .dn{fill:#ef6a40;stroke:#ef6a40;stroke-width:1.5}
.oc-line{stroke:#34c6b5;stroke-width:2;stroke-dasharray:6 4}
.oc-tag{fill:#34c6b5;font:600 12px "Inter",system-ui,sans-serif}
.oc-fill circle{fill:#fbf8f2}
.oc-fill rect{fill:#34c6b5}
.oc-fill text{fill:#17181d;font:700 13px "Inter",system-ui,sans-serif}
@media (prefers-reduced-motion:no-preference){
  .oc-c>*{opacity:0;animation:oc-in 8s infinite both}
  .oc-c>:nth-child(1),.oc-c>:nth-child(2){animation-delay:0s}
  .oc-c>:nth-child(3),.oc-c>:nth-child(4){animation-delay:.3s}
  .oc-c>:nth-child(5),.oc-c>:nth-child(6){animation-delay:.6s}
  .oc-c>:nth-child(7),.oc-c>:nth-child(8){animation-delay:.9s}
  .oc-c>:nth-child(9),.oc-c>:nth-child(10){animation-delay:1.2s}
  .oc-c>:nth-child(11),.oc-c>:nth-child(12){animation-delay:1.5s}
  .oc-c>:nth-child(13),.oc-c>:nth-child(14){animation-delay:1.8s}
  .oc-c>:nth-child(15),.oc-c>:nth-child(16){animation-delay:2.4s}
  .oc-c>:nth-child(17),.oc-c>:nth-child(18){animation-delay:2.7s}
  .oc-c>:nth-child(19),.oc-c>:nth-child(20){animation-delay:3s}
  .oc-c>:nth-child(21),.oc-c>:nth-child(22){animation-delay:3.3s}
  .oc-c>:nth-child(23),.oc-c>:nth-child(24){animation-delay:3.6s}
  .oc-fill{opacity:0;animation:oc-in 8s 2s infinite both}
}
@keyframes oc-in{0%{opacity:0}3%{opacity:1}72%{opacity:1}80%{opacity:0}100%{opacity:0}}

/* a trader's day: a timeline that appears as it scrolls into view */
.dayline{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:22px}
.dayline::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:linear-gradient(var(--orange),var(--tl))}
.dl{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:start}
.dl-dot{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--band);color:var(--band-text);box-shadow:0 0 0 5px var(--bg)}
.dl-dot svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dl-body h3{margin:10px 0 4px;font-size:21px}
.dl-body>p{margin:0 0 12px;color:var(--text-2)}
.dl-links{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.dl-links a{display:grid;gap:3px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--fill);text-decoration:none;color:var(--text);transition:border-color .15s,transform .15s}
.dl-links a:hover{border-color:var(--orange);transform:translateY(-2px)}
.dl-links b{font:500 16px/1.25 var(--display)}
.dl-links span{font-size:14px;color:var(--text-2)}
.rv .reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.rv .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv .reveal{opacity:1;transform:none;transition:none}}

/* how it works and the product card */
.hw{display:grid;gap:14px}
@media (min-width:760px){.hw{grid-template-columns:repeat(3,1fr)}}
.hw-c{padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--fill)}
.hw-c h3{margin:10px 0 6px;font-size:18px}
.hw-c p{margin:0;font-size:15px;color:var(--text-2)}
.hw-i{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--tl-2);color:var(--tl)}
.hw-i svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hub-prod{display:grid;gap:20px;align-items:center;margin-top:28px;padding:20px;border-radius:16px;background:var(--band);color:var(--band-2)}
.hub-prod img{width:100%;max-width:260px;height:auto;border-radius:10px;justify-self:center}
.hub-prod h3{margin:0 0 8px;color:var(--band-text);font-size:22px}
.hub-prod p{margin:0 0 12px}
.hub-prod-l{display:flex;flex-wrap:wrap;gap:10px}
.hub-prod .btn{background:var(--band-text);color:var(--band)}
.hub-prod .btn-o{background:transparent;color:var(--band-text);border:1px solid var(--band-line)}
@media (min-width:760px){.hub-prod{grid-template-columns:240px minmax(0,1fr);padding:24px 28px}}