/* ── LIVE REACH rebuilt. The claim leads, the numbers support it. Asymmetric grid: the promise on the left at display scale, a product-mimicking run panel on the right, a hairline stat rail underneath with ONE figure promoted rather than four competing. ─────────────────── */ #auth #stats{position:relative;overflow:hidden} #auth .rch{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,86px); align-items:center;padding:clamp(56px,8vw,110px) 0 clamp(28px,3.4vw,44px)} /* rch-stage: the video IS the surface and the headline sits on it. Previously three elements (copy, video card, note) competed to make one point; now the claim is the only text and the footage carries the rest. */ #auth .rch-stage{position:relative;margin:clamp(40px,6vw,88px) 0 clamp(30px,4vw,54px); border-radius:14px;overflow:hidden;isolation:isolate} #auth .rch-stage .rch-vid{display:block;width:100%;height:clamp(340px,44vw,560px); object-fit:cover;position:relative;z-index:0} #auth .rch-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(90deg,rgba(11,11,24,.88) 0%,rgba(11,11,24,.62) 44%, rgba(11,11,24,.10) 82%)} #auth .rch-stage .rch-h{position:absolute;z-index:2;left:clamp(22px,4vw,64px); top:50%;transform:translateY(-50%);margin:0;max-width:19ch; font-size:clamp(30px,5.2vw,72px);letter-spacing:-.042em;line-height:1.0} @media(max-width:760px){ #auth .rch-stage::after{background:linear-gradient(180deg,rgba(11,11,24,.55) 0%, rgba(11,11,24,.9) 100%)} #auth .rch-stage .rch-h{font-size:clamp(26px,7.4vw,40px);max-width:none; right:clamp(22px,4vw,64px)}} #auth .rch-eyebrow{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800; letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:clamp(14px,1.8vw,22px)} #auth .rch-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--accent); animation:rchPulse 1.9s ease-in-out infinite} @keyframes rchPulse{0%,100%{opacity:1}50%{opacity:.25}} #auth .rch-h{font-weight:900;font-size:clamp(30px,4.6vw,62px);letter-spacing:-.038em; line-height:1.02;margin:0 0 clamp(14px,1.8vw,22px);color:var(--ink)} #auth .rch-h em{font-style:normal;color:var(--accent)} #auth .rch-p{font-size:clamp(14px,1.45vw,17px);line-height:1.5;color:var(--ink-dim); max-width:46ch;margin:0} /* the run panel: shows the autonomy claim instead of asserting it */ #auth .rch-panel:not(.rch-video){border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.022); padding:clamp(16px,2vw,22px)} #auth .rch-ph{display:flex;align-items:center;justify-content:space-between;gap:10px; padding-bottom:11px;margin-bottom:13px;border-bottom:1px solid var(--line-soft)} #auth .rch-pt{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--ink)} #auth .rch-live{display:inline-flex;align-items:center;gap:6px;font-size:9.5px;font-weight:800; letter-spacing:.1em;text-transform:uppercase;color:var(--accent)} #auth .rch-live i{width:6px;height:6px;border-radius:50%;background:var(--accent); animation:rchPulse 1.6s ease-in-out infinite} #auth .rch-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px; font-size:12.5px;color:var(--ink-dim);padding:5px 0} #auth .rch-row b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums} #auth .rch-bar{height:4px;border-radius:3px;background:rgba(255,255,255,.09);overflow:hidden; margin:9px 0 4px} #auth .rch-bar i{display:block;height:100%;width:38%;background:var(--accent); animation:rchFill 7s cubic-bezier(.4,0,.2,1) infinite} @keyframes rchFill{0%{width:12%}70%{width:82%}100%{width:12%}} /* rch-demo: the REAL dashboard component, reproduced. Class names mirror #applyProg so the markup matches the product; every rule is scoped under #stats so it cannot collide with the live dashboard styles further down this file. */ #auth #stats .rch-chrome{display:flex;align-items:center;gap:6px;padding-bottom:11px; margin-bottom:13px;border-bottom:1px solid var(--line-soft)} #auth #stats .rch-chrome span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.16)} #auth #stats .rch-chrome em{margin-left:8px;font-style:normal;font-size:10.5px;font-weight:700; letter-spacing:.06em;color:var(--ink-faint)} /* rch-dark-fix: the live dashboard styles .apply-prog for a LIGHT surface (background:#FCFCF9, navy text). Reusing its class names pulled that in and produced a white block with navy-on-navy text here. Every inherited paint property is re-declared. */ #auth #stats .apply-prog{display:block;background:transparent;border:0;border-radius:0; margin:0;padding:0;box-shadow:none} #auth #stats .apply-prog-t{color:var(--ink)} #auth #stats .apply-prog-t .d{box-shadow:none} #auth #stats .apply-prog-c,#auth #stats .apply-prog-now{color:var(--ink-dim)} #auth #stats .apply-prog-top{display:flex;align-items:center;justify-content:space-between; gap:10px;margin-bottom:8px} #auth #stats .apply-prog-t{display:inline-flex;align-items:center;gap:8px;font-size:12.5px; font-weight:700;color:var(--ink)} #auth #stats .apply-prog-t .d{width:7px;height:7px;border-radius:50%;background:var(--accent); animation:rchPulse 1.5s ease-in-out infinite} #auth #stats .apply-prog-c{font-size:12px;font-weight:800;color:var(--ink-dim); font-variant-numeric:tabular-nums} #auth #stats .apply-prog-now{font-size:11.5px;color:var(--ink-faint);margin-bottom:9px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #auth #stats .apply-prog-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.09); overflow:hidden} #auth #stats .apply-prog-bar i{display:block;height:100%;width:30%;background:var(--accent); border-radius:3px;transition:width .7s cubic-bezier(.4,0,.2,1)} /* rch-video: the supplied clip replaces the hand-built dashboard mock. Lazy: a visitor who never scrolls here downloads nothing, and the poster carries the first paint. */ /* rch-integrated: no card. A bordered panel reads as a widget dropped onto the page; the clip should feel like part of the section. Container chrome removed entirely and the bottom edge is masked so the footage dissolves into the background instead of stopping at a line. */ #auth #stats .rch-video{padding:0;overflow:visible;background:transparent;border:0; border-radius:0;box-shadow:none} #auth #stats .rch-vid{display:block;width:100%;height:auto;border-radius:10px; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 100%)} #auth #stats .rch-video .rch-note{margin:-6px 0 0;padding:0;border:0; font-size:12.5px;line-height:1.5;color:var(--ink-dim);max-width:42ch} @media(prefers-reduced-motion:reduce){#auth #stats .rch-vid{display:none}} #auth .rch-note{margin-top:12px;padding-top:11px;border-top:1px solid var(--line-soft); font-size:11.5px;line-height:1.45;color:var(--ink-dim)} #auth .rch-note b{color:var(--accent);font-weight:800} /* stat rail: hairlines, one promoted figure */ #auth .rch-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:0; border-top:1px solid var(--line);border-bottom:1px solid var(--line)} #auth .rch-s{padding:clamp(18px,2.4vw,30px) clamp(12px,1.6vw,22px); border-left:1px solid var(--line-soft)} #auth .rch-s:first-child{border-left:0;padding-left:0} /* the .cnt span inside does not inherit the 900 weight, so three of the four figures rendered lighter than the plain-text 170. Style the span to match exactly. */ #auth .rch-s b .cnt{font-weight:900;font-size:inherit;letter-spacing:inherit; line-height:inherit;color:inherit;font-variant-numeric:tabular-nums} #auth .rch-s b{display:block;font-weight:900;font-size:clamp(24px,3.2vw,44px); letter-spacing:-.04em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums} #auth .rch-s.hi b{color:var(--accent)} #auth .rch-s span{display:block;margin-top:8px;font-size:10px;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint)} /* CSS globe: rotating wireframe, no image or library */ #auth .rch-globe{position:relative;width:clamp(150px,17vw,232px);aspect-ratio:1;margin:0 auto; border-radius:50%;border:1px solid rgba(245,255,171,.22); background:radial-gradient(circle at 34% 28%,rgba(245,255,171,.10),transparent 58%), radial-gradient(circle at 62% 70%,rgba(126,140,255,.12),transparent 62%); overflow:hidden} #auth .rch-globe::before,#auth .rch-globe::after{content:"";position:absolute;inset:0; border-radius:50%;border:1px solid rgba(245,255,171,.16)} #auth .rch-globe::before{transform:scaleX(.42);animation:rchSpin 18s linear infinite} #auth .rch-globe::after{transform:scaleX(.74);animation:rchSpin 26s linear infinite reverse} @keyframes rchSpin{to{transform:rotate(360deg) scaleX(.42)}} #auth .rch-lat{position:absolute;left:6%;right:6%;height:1px;background:rgba(245,255,171,.13)} /* rch-flag: hand-drawn monochrome flag glyphs, the real top-10 markets by live-job volume. Inline SVG rather than emoji (renders inconsistently, absent on most Windows builds) or a CDN (this page makes no external requests). Single-colour so they read as a set and do not fight the lime/navy palette. */ #auth .rch-flag{display:inline-flex;width:26px;height:24px;color:var(--ink-dim); transition:color .3s ease,transform .3s ease} #auth .rch-flag svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.1; stroke-linecap:round;stroke-linejoin:round} #auth .rch-flag:hover{color:var(--accent);transform:translateY(-2px)} #auth .rch-more{align-self:center;font-size:11px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-faint);padding-left:4px} #auth .rch-geo{display:flex;flex-wrap:wrap;gap:6px;justify-content:center; margin-top:clamp(14px,1.8vw,20px)} #auth .rch-geo{gap:10px} #auth .rch-bottom{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,60px); align-items:center;padding:clamp(26px,3.4vw,44px) 0 clamp(46px,6vw,80px)} @media(max-width:900px){ #auth .rch{grid-template-columns:1fr;gap:30px} #auth .rch-rail{grid-template-columns:repeat(2,1fr)} #auth .rch-s:nth-child(3){border-left:0;padding-left:0} #auth .rch-bottom{grid-template-columns:1fr;gap:26px}}