/* Home: the dark featured panel (stats, CTAs, desk art with a live CRT), the lime tip banner. */
.hero{position:relative; grid-column:span 12; display:grid; min-height:11rem; align-content:center; overflow:hidden; border-radius:6px; background:var(--panel); padding:20px; color:var(--on-panel)}
.hero-art{pointer-events:none; position:absolute; inset:0 0 0 auto; display:none; width:32%; align-items:center; justify-content:center}
.hero-art .fr{position:relative; width:170px; flex:none}
.hero-art canvas{width:100%; height:auto; opacity:.16; image-rendering:pixelated;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%); mask-image:linear-gradient(90deg,transparent 0%,#000 45%)}
.crt{position:absolute; left:18.75%; top:21.875%; width:62.5%; height:28.125%; overflow:hidden; container-type:inline-size} /* the Thin glass: 6,7,20,9 of 32 */
.crt .scr{position:relative; display:flex; width:100%; height:100%; align-items:center; justify-content:center}
.crt .txt{white-space:nowrap; color:#f4f4f0; font-family:var(--crt); font-size:clamp(9px,27cqw,36px); letter-spacing:.04em; line-height:1;
  text-shadow:0 0 6px rgb(244 244 240/.55),0 0 14px rgb(244 244 240/.25)}
.crt .cur{margin-left:.08em; display:inline-block; width:.5em; height:.85em; transform:translateY(.1em); background:#f4f4f0; animation:cursor 1.1s steps(1) infinite}
.crt .scan{pointer-events:none; position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgb(0 0 0/.35) 0 1px,transparent 1px 3px)}
.hero-in{position:relative; z-index:1; max-width:42rem}
.eyebrow{margin-bottom:8px; font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.1em; color:color-mix(in srgb,var(--on-panel) 60%,transparent)}
.hero h1{margin-bottom:8px; font-size:1.55rem; font-weight:500; line-height:1.05; letter-spacing:-.04em; text-wrap:balance}
.hero .hl{display:block; max-width:34rem; font-size:12.5px; line-height:1.45; color:color-mix(in srgb,var(--on-panel) 60%,transparent)}
html[lang^=zh] .hero h1{letter-spacing:-.01em; line-height:1.2}
html[lang^=zh] .hero .hl{line-height:1.6}
.hero dl{margin-top:14px; display:flex; flex-wrap:wrap; gap:10px 20px; font-variant-numeric:tabular-nums}
.hero dt{font-size:9.5px; text-transform:uppercase; letter-spacing:.07em; color:color-mix(in srgb,var(--on-panel) 50%,transparent)}
.hero dd{margin-top:4px; font-size:14px; font-weight:500; line-height:1}
.hero .ctas{margin-top:14px; display:flex; flex-wrap:wrap; gap:10px}
.hbtn{display:inline-flex; height:36px; align-items:center; gap:8px; border-radius:5px; padding:0 14px; font-size:14px; font-weight:500; transition:background .15s,border-color .15s}
.hbtn.solid{background:var(--on-panel); color:var(--panel)} .hbtn.solid:hover{background:color-mix(in srgb,var(--on-panel) 90%,transparent)}
.hbtn.outline{border:1px solid color-mix(in srgb,var(--on-panel) 35%,transparent); background:color-mix(in srgb,var(--on-panel) 6%,transparent); color:var(--on-panel)}
.hbtn.outline:hover{border-color:color-mix(in srgb,var(--on-panel) 60%,transparent); background:color-mix(in srgb,var(--on-panel) 14%,transparent)}
.hbtn>*{position:relative; z-index:10}
.gloss{isolation:isolate; background-image:linear-gradient(152deg,#ffffff80 0%,#ffffff1a 38%,#fff0 64%); position:relative; overflow:hidden}
.gloss::before{content:""; border-radius:inherit; pointer-events:none; position:absolute; inset:0; box-shadow:inset 0 1px #ffffffbf,inset 0 -1px #0000000d}
.gloss::after{content:""; pointer-events:none; position:absolute; top:-40%; bottom:-40%; left:0; width:34%; background:linear-gradient(90deg,#0000 0%,#ffffff8c 50%,#0000 100%);
  transform:translate(-180%) skew(-18deg); opacity:0}
.gloss:hover::after{opacity:1; animation:sheen 1.1s cubic-bezier(.4,0,.2,1)}
.hero .mkts{margin-left:4px; display:flex; align-items:center; gap:16px; align-self:center; font-size:12.5px; color:color-mix(in srgb,var(--on-panel) 55%,transparent)}
.hero .mkts a:hover{color:var(--on-panel)}

.tipbar{grid-column:span 12; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; border-radius:6px; border:1px solid var(--tip-line); background:var(--tip); padding:14px 20px; color:var(--on-tip)}
.tipbar strong{white-space:nowrap; font-size:14px; font-weight:500}
.tipbar p{font-size:14px; line-height:20px}
.tipbar a{margin-left:auto; white-space:nowrap; font-size:14px; font-weight:500}
.tipbar a:hover{text-decoration:underline}

@media (min-width:640px){.hero{padding:24px} .hero h1{font-size:1.9rem}}
@media (min-width:768px){.hero-art{display:flex}}
@media (min-width:1024px){.hero{min-height:12rem; padding:24px 32px} .hero h1{font-size:2.1rem} .hero-art .fr{width:200px}}