/* heroes.html: 5 landing hero variations, stacked. Same tokens as site.css. Prefix hv. */
.hv-nav{position:sticky;top:58px;z-index:30;background:color-mix(in oklab,var(--page-bg) 92%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--hair)}
.hv-nav .base{padding-block:.5rem}
.hv-nav ul{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;list-style:none;margin:0;padding:0}
.hv-nav ul::-webkit-scrollbar{display:none}
.hv-nav a{display:inline-flex;align-items:center;gap:.5rem;height:2rem;padding:0 .75rem;border-radius:calc(infinity*1px);font-size:.8125rem;white-space:nowrap;color:var(--fg2);text-decoration:none}
.hv-nav a b{font-family:var(--mono);font-weight:500;color:var(--fg3)}
.hv-nav a:hover,.hv-nav a.on{background:var(--card);color:var(--fg)}
.hv-lab{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--card)}
.hv-lab .base{padding-block:.625rem;display:flex;align-items:baseline;gap:.75rem}
.hv-lab .caption{margin:0}
.hv-lab b{font-weight:510;letter-spacing:-.01em}
.hv{padding:4rem 0;overflow-x:clip;position:relative;scroll-margin-top:106px}
.hv .base{padding-block:0;min-height:520px;align-content:center}
.hv .btnrow{margin-top:1.75rem}
.hv-proof{font-family:var(--mono);font-size:.8125rem;color:var(--fg3);margin-top:1rem;font-feature-settings:"zero" 1}
.hv-h1{font-size:var(--masthead);line-height:1.05;letter-spacing:-.02em;font-weight:475;text-wrap:balance;font-variant-numeric:tabular-nums}
.hv-sub{font-size:1.25rem;line-height:1.55;font-weight:470;letter-spacing:-.02em;color:var(--fg2);text-wrap:pretty;margin-top:1.25rem}
.hv-c{text-align:center;margin-inline:auto}
.hv-c .btnrow{justify-content:center}

/* 1 product first */
.hv1-txt{grid-column:1/-1}
.hv1-vis{grid-column:1/-1;margin-top:2.5rem}
@media(min-width:64rem){.hv1-txt{grid-column:1/6;align-self:center}.hv1-vis{grid-column:6/-1;margin-top:0}}
.hv-3d{perspective:1800px;perspective-origin:30% 50%}
.hv-tilt{transform:rotateY(-6deg);transform-origin:left center;transition:transform .6s var(--ease-out);border-radius:14px;box-shadow:0 1px 0 var(--hair),0 40px 80px -30px rgba(21,20,19,.45),0 12px 28px -12px rgba(21,20,19,.25);background:#fff}
.hv-3d:hover .hv-tilt{transform:rotateY(0)}
.hv-crop{aspect-ratio:1180/760;overflow:clip;border-radius:14px;position:relative}
.hv-scale{position:absolute;inset:0 auto auto 0;width:1180px;transform-origin:0 0}
.hv-scale .dash{margin-top:0;min-height:760px;height:760px;grid-template-columns:3.5rem minmax(0,1fr);box-shadow:none;border-radius:0}
.hv-scale .dash-rail{display:flex}
.hv-scale .dash-view{overflow:hidden}
@media(max-width:48rem){.hv-scale .dash{grid-template-columns:3.5rem minmax(0,1fr)}.hv-scale .dash-page{padding:1.5rem}.hv-scale .dash-grid4{grid-template-columns:repeat(4,1fr)}.hv-scale .dash-switch-note{display:inline}}

/* 2 vertical tabs */
.hv2-top{grid-column:1/-1;max-width:46rem;margin-inline:auto}
.hv-tabs{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--card-ring);margin-top:2rem}
.hv-tabs button{height:2.25rem;padding:0 1rem;border-radius:9px;font-size:.875rem;font-weight:470;color:var(--fg2);transition:background .15s,color .15s}
.hv-tabs button:hover{color:var(--fg)}
.hv-tabs button.on{background:var(--fg);color:#fff}
.hv-pan{grid-column:1/-1;margin-top:2rem;display:grid;grid-template-columns:1fr;gap:1px;background:var(--hair);border-radius:14px;overflow:clip;box-shadow:0 0 0 1px var(--hair)}
.hv-pan[hidden]{display:none}
@media(min-width:48rem){.hv-pan{grid-template-columns:1fr 1fr}}
.hv-pan>div{background:#fff;padding:1.5rem;min-width:0}
.hv-pan .cap{font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--fg3);margin:0 0 1rem;display:flex;justify-content:space-between}
.hv-tiles{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.hv-tile{padding:1rem;border-radius:10px;box-shadow:inset 0 0 0 1px var(--hair);display:flex;flex-direction:column;gap:.15rem;min-width:0}
.hv-tile span{font-size:11.5px;color:var(--fg3);text-transform:uppercase;letter-spacing:.05em;font-weight:510}
.hv-tile b{font-size:1.5rem;font-weight:510;line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.hv-tile small{font-size:12px;color:var(--fg2);line-height:1.4}
.hv-tile.good{background:#e6f4ea;box-shadow:none}.hv-tile.good b{color:#1f7a3f}
@media(max-width:40rem){.hv-tiles{grid-template-columns:1fr}}

/* 3 monday text */
.hv3-txt{grid-column:1/-1}
.hv3-vis{grid-column:1/-1;margin-top:2.5rem;display:flex;justify-content:center}
@media(min-width:64rem){.hv3-txt{grid-column:1/7;align-self:center}.hv3-vis{grid-column:8/-1;margin-top:0}}
.hv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--hair)}
.hv-stats b{display:block;font-size:1.625rem;font-weight:510;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.hv-stats span{display:block;font-size:.8125rem;color:var(--fg3);margin-top:.25rem}
.hv-stats .caption{grid-column:1/-1;margin-bottom:-.25rem}
@media(max-width:40rem){.hv-stats{grid-template-columns:1fr}}
.hv-line{display:block;white-space:nowrap;overflow:hidden;width:0;animation:hv-type .9s steps(34) forwards;animation-delay:calc(.4s + var(--i)*.95s)}
@keyframes hv-type{to{width:100%}}
@keyframes hv-in{to{opacity:1}}

/* 4 editorial */
.hv4-h1{grid-column:1/-1;font-size:clamp(56px,7.2vw,96px);line-height:.98;letter-spacing:-.035em;font-weight:475;text-wrap:balance}
.hv4-h1 .l2{display:block;color:var(--accent)}
.hv4-body{grid-column:1/-1;margin-top:2rem}
@media(min-width:48rem){.hv4-body{grid-column:1/8}}
.hv-log{grid-column:1/-1;margin-top:3rem;font-family:var(--mono);font-size:.8125rem;color:var(--fg3);display:flex;align-items:center;gap:.6rem;font-feature-settings:"zero" 1}
.hv-log i{width:6px;height:6px;border-radius:50%;background:#1f7a3f;flex:none}
.hv-log b{font-weight:500;color:var(--fg2)}
.hv-marq{grid-column:1/-1;margin-top:.75rem;overflow:hidden;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:.875rem 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hv-marq .track{display:flex;gap:2.5rem;width:max-content;animation:hv-marq 48s linear infinite}
.hv-marq:hover .track{animation-play-state:paused}
.hv-marq span{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--fg2);white-space:nowrap}
.hv-marq img{width:22px;height:22px;object-fit:contain;border-radius:4px}
@keyframes hv-marq{to{transform:translateX(-50%)}}

/* 5 before and after */
.hv5-h1{grid-column:1/-1;text-align:center;max-width:52rem;margin-inline:auto}
.hv5-split{grid-column:1/-1;margin-top:2.5rem;display:grid;grid-template-columns:1fr;border-radius:14px;overflow:clip;box-shadow:0 0 0 1px var(--hair)}
@media(min-width:48rem){.hv5-split{grid-template-columns:1fr 1fr}}
.hv5-split>div{padding:1.75rem;min-width:0}
.hv5-split h3{font-size:1.0625rem;font-weight:510;letter-spacing:-.01em;margin:0 0 1rem;text-wrap:balance}
.hv5-split .k{font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;display:block;margin-bottom:.5rem;opacity:.7}
.hv5-b{background:var(--gray850);color:var(--dink)}
.hv5-b ol{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:.8125rem;line-height:1.7;color:var(--dink3);font-feature-settings:"zero" 1}
.hv5-b ol li{display:grid;grid-template-columns:5rem 1fr;gap:.75rem;border-top:1px solid rgba(255,255,255,.08);padding:.3rem 0}
.hv5-b ol li span{color:#6f6b68}
.hv5-a{background:#fff;color:var(--fg)}
.hv5-a ul{list-style:none;margin:0;padding:0;font-size:.875rem;line-height:1.6}
.hv5-a ul li{display:grid;grid-template-columns:1.25rem 5rem 1fr;gap:.75rem;align-items:start;border-top:1px solid var(--hair);padding:.35rem 0}
.hv5-a ul li span{font-family:var(--mono);font-size:.8125rem;color:var(--fg3);padding-top:.1em;font-feature-settings:"zero" 1}
.hv5-a svg{width:1.1rem;height:1.1rem;margin-top:.2em;color:#1f7a3f}
.hv5-ctas{grid-column:1/-1;margin-top:2.5rem;display:flex;flex-direction:column;align-items:center}
.hv5-ctas .btnrow{margin-top:0;justify-content:center}

/* pick one */
.hv-pick .base{padding-block:3rem;text-align:center}
.hv-pick .row{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1rem}
.hv-pick button{width:3rem;height:3rem;border-radius:50%;box-shadow:inset 0 0 0 1px var(--hair);font-family:var(--mono);font-size:1rem;transition:background .15s,color .15s}
.hv-pick button:hover{background:var(--fg);color:#fff}
@media(prefers-reduced-motion:reduce){.hv-line{animation:none;width:100%}.hv-phone .reply{animation:none;opacity:1}.hv-marq .track{animation:none}.hv-tilt{transform:none}}

/* 6 editorial with product: two columns (40/60), flat frame, marquee full width below */
.hv6-cols{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem;align-items:center}
@media(min-width:48rem){.hv6-cols{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:2rem}}
@media(min-width:64rem){.hv6-cols{gap:3rem}}
.hv6-h1{font-size:clamp(40px,4.2vw,60px);line-height:1;letter-spacing:-.035em;font-weight:475}
.hv6-h1 .l2{display:block;color:var(--accent)}
.hv6 .hv-sub{font-size:1.125rem;margin-top:1.25rem}
.hv6 .hv-log{margin-top:1.5rem;font-size:.75rem;align-items:flex-start}
.hv6 .hv-log i{margin-top:.4em}
.hv6-vis{min-width:0}
.hv6-vis{position:relative}
.hv6-frame{border-radius:14px;overflow:clip;background:#fff;box-shadow:0 1px 0 var(--hair),0 40px 80px -30px rgba(21,20,19,.45),0 12px 28px -12px rgba(21,20,19,.25)}
.hv6 .hv-marq{margin-top:2rem}

/* index.html: the picked variation sits under the fixed header; vertical tabs section reuses the variation 2 parts */
.hv.hero{padding-top:calc(58px + 3rem);padding-bottom:4rem}
.hv.hero .base{min-height:0}
.ix-tabs .hv-tabs{margin-top:1.5rem}
.ix-tabs .hv2-top .caption{justify-content:center}

/* hero 6: tilted dashboard frame, rise-in, three floating cards (enode motion language: ease-out .7s, 300 ms stagger) */
.hv6-rise{animation:hv6-rise .7s var(--ease-out) .2s backwards}
@keyframes hv6-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hv6-persp{perspective:1600px}
.hv6-frame{transform:rotateY(-10deg) rotateX(4deg) scale(.98);transform-origin:center;transition:transform .6s var(--ease-out)}
.hv6-vis:hover .hv6-frame{transform:none}
.hv6-fc{position:absolute;z-index:2;animation:hv6-pop .5s var(--ease-out) calc(.4s + var(--n)*.3s) backwards}
.hv6-fc.a{--n:0;top:7%;left:4.5rem}.hv6-fc.b{--n:1;top:46%;right:-1.25rem}.hv6-fc.c{--n:2;bottom:6%;left:-1.75rem}
@keyframes hv6-pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fc-in{background:#fff;border-radius:12px;box-shadow:0 0 0 1px var(--hair),0 14px 32px -12px rgba(21,20,19,.28);padding:.625rem .875rem;font-size:13.5px;line-height:1.35;color:var(--fg);animation:hv6-float 6s ease-in-out infinite}
.hv6-fc.b .fc-in{animation-delay:-2s}.hv6-fc.c .fc-in{animation-delay:-4s}
@keyframes hv6-float{0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)}}
.fc-in small{display:block;font-size:11px;color:var(--fg3);text-transform:uppercase;letter-spacing:.05em;font-weight:510}
.fc-in p{margin:.15rem 0 0;font-weight:490}
.hv6-fc.b .fc-in{display:flex;align-items:center;gap:.5rem;background:#e6f4ea;color:#1f7a3f;font-weight:510;box-shadow:0 0 0 1px #cfe8d6,0 14px 32px -12px rgba(21,20,19,.28)}
.fc-chk{display:inline-flex;width:1.25rem;height:1.25rem;border-radius:50%;background:#1f7a3f;color:#fff;align-items:center;justify-content:center}.fc-chk svg{width:.75rem;height:.75rem}
.fc-tap{display:inline-block;background:var(--accent);color:#fff;border-radius:999px;padding:.2rem .75rem;font-weight:510;margin-bottom:.35rem}
.hv6-fc.c .fc-in small{text-transform:none;letter-spacing:0;font-size:12px;font-weight:470;color:var(--fg2)}
@media(max-width:40rem){.hv6-fc{display:none}.hv6-frame{transform:none}}
@media(prefers-reduced-motion:reduce){.hv6-rise,.hv6-fc,.fc-in,.hv6-fc.a .m{animation:none}.hv6-frame{transform:none;transition:none}}

/* Pick your trade (10/8/2026): 12 sector chips in a scrollable row, trade search, one phone-framed thread + 4 tiles per sector */
.ix-tabs .hv2-top{min-width:0;width:100%}
.hv-pan .cap{flex-wrap:wrap;gap:.25rem 1rem}
.ix-find{margin-top:1.5rem;width:100%;min-width:0;display:flex;flex-direction:column;gap:1rem;align-items:center;max-width:100%}
.ix-search{position:relative;width:min(100%,26rem)}

.ix-search input{width:100%;height:2.75rem;padding:0 2.75rem 0 1rem;border-radius:12px;background:var(--card);box-shadow:inset 0 0 0 1px var(--card-ring);font:inherit;font-size:1rem;color:var(--fg)}
.ix-search input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--fg)}
.ix-search small{display:block;min-height:1.2em;margin-top:.375rem;font-size:12px;color:var(--fg3);text-align:center}
.ix-tabs .hv-tabs.ix-chips{display:flex;max-width:100%;overflow-x:auto;scrollbar-width:none;margin-top:0;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.ix-chips::-webkit-scrollbar{display:none}
.ix-chips button{white-space:nowrap;flex:none;scroll-snap-align:center}
.ix-pan .hv-tiles{margin-bottom:1rem}
.ix-open{margin-top:.5rem}
.hv6-fc.a{--im-bg:var(--page-bg);font-size:15px;width:max-content;max-width:16rem}
.hv6-fc.a .m{max-width:none;filter:drop-shadow(0 14px 24px rgba(21,20,19,.22));animation:hv6-float 6s ease-in-out infinite}
/* brief 7: trade panel right column fills the panel; phone screen has a fixed height */
.ix-pan>div:last-child{display:flex;flex-direction:column}
.ix-pan .ix-wcap{margin:.25rem 0 .25rem}
.ix-wl{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column}
.ix-wl li{padding:.7rem 0 .7rem 1.5rem;border-top:1px solid var(--hair);font-size:.9375rem;line-height:1.4;color:var(--fg);position:relative}
.ix-wl li:before{content:"";position:absolute;left:.1rem;top:1.05rem;width:.55rem;height:.3rem;border-left:2px solid #1f7a3f;border-bottom:2px solid #1f7a3f;transform:rotate(-45deg)}
.ix-pan .ix-open{margin-top:auto}
.ix-pan>div:last-child>*{flex:none}.ix-pan .cap{align-content:flex-start}
.ix-pan .hv-tile{padding:1.4rem 1.1rem}
.ix-pan .ix-wcap{margin-top:1.25rem}
.ix-wl{flex:1 1 auto!important;margin-bottom:1.25rem}
.ix-wl li{flex:1 1 auto;display:flex;align-items:center;padding-block:1rem;font-size:1rem}
.ix-wl li:before{top:50%;margin-top:-.2rem}

/* brief 9: trade combobox */
.ix-caret{position:absolute;right:.375rem;top:.375rem;width:2rem;height:2rem;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--fg3);cursor:pointer}
.ix-caret:hover{color:var(--fg);background:var(--card-ring)}.ix-caret[aria-expanded=true] svg{transform:rotate(180deg)}
#trade-list{position:absolute;left:0;right:0;top:calc(2.75rem + .375rem);z-index:30;margin:0;padding:.375rem;list-style:none;max-height:16rem;overflow-y:auto;overscroll-behavior:contain;background:#fff;border-radius:12px;box-shadow:0 0 0 1px var(--card-ring),0 14px 36px -8px rgba(21,20,19,.28),0 4px 12px -6px rgba(21,20,19,.2);text-align:left}
#trade-list[hidden]{display:none}
#trade-list li{padding:.5rem .75rem;border-radius:8px;font-size:.9rem;line-height:1.3;color:var(--fg);cursor:pointer}
#trade-list li[hidden]{display:none}
#trade-list li.act{background:var(--fg);color:#fff}
#trade-list .ix-none{color:var(--fg3);font-size:.8rem;cursor:default;padding-bottom:.25rem}
#trade-list .ix-sec{font-weight:510}

/* launch audit (10/8/2026): touch targets and minimum text size on phones */
@media(pointer:coarse){.hv-tabs button{height:2.5rem}.ix-caret{width:2.5rem;height:2.5rem;right:.125rem;top:.125rem}}
@media(max-width:48rem){.hv-tile span{font-size:12px}}