.product-hero{--hero-bg:#f8f7fb;--hero-surface:#fff;--hero-ink:#1e1b2d;--hero-muted:#625e72;--hero-line:#e4e1ec;--hero-accent:#5b4ead;--hero-focus:#30217b;--hero-primary-ink:#fff;--hero-action-hover:#f0edf9;--hero-accent-hover:#4d40a0;--hero-visual-height:clamp(336px, 30vw, 424px);color:var(--hero-ink);background:var(--hero-bg);border-bottom:1px solid var(--hero-line);font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.55}.club-theme .product-hero{--hero-bg:var(--bg);--hero-surface:var(--surface);--hero-ink:var(--fg);--hero-muted:var(--muted);--hero-line:var(--border);--hero-accent:var(--accent);--hero-focus:var(--lavender);--hero-primary-ink:var(--bg);--hero-action-hover:var(--surface-2);--hero-accent-hover:var(--lavender)}.product-hero__inner{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:40px clamp(48px,5vw,80px);width:min(1240px,100% - 96px);margin-inline:auto;padding-block:clamp(48px,6vh,74px);display:grid}.product-hero__inner>*{min-width:0}.product-hero .product-hero__copy{max-width:576px}.product-hero .product-hero__meta{color:var(--hero-muted);letter-spacing:.08em;text-transform:uppercase;margin:0 0 16px;font-size:12px;font-weight:650;line-height:1.6}.product-hero__meta--development:before{content:"";background:#a8540b;border-radius:50%;width:8px;height:8px;margin-right:8px;display:inline-block}.product-hero .product-hero__copy h1{max-width:none;color:var(--hero-ink);letter-spacing:-.035em;text-wrap:balance;margin:0;font-size:clamp(41px,3.4vw,54px);font-weight:610;line-height:1.06}.product-hero__copy h1 em{font:inherit}.product-hero__punctuation-join{white-space:nowrap}.product-hero .product-hero__lead{max-width:35rem;color:var(--hero-muted);margin:24px 0 0;font-size:clamp(17px,1.3vw,19px);line-height:1.55}.product-hero__actions{flex-wrap:wrap;align-items:stretch;gap:12px;margin-top:32px;display:flex}.product-hero .product-hero__action{border:1px solid var(--hero-muted);background:var(--hero-surface);max-width:100%;min-height:48px;color:var(--hero-ink);text-align:center;border-radius:7px;justify-content:center;align-items:center;padding:12px 16px;font-size:14px;font-weight:620;line-height:1.4;text-decoration:none;transition:transform .15s,background-color .15s;display:inline-flex}.product-hero .product-hero__action--primary{color:var(--hero-primary-ink);background:var(--hero-accent);border-color:var(--hero-accent)}.product-hero .product-hero__action:hover{background:var(--hero-action-hover);transform:translateY(-1px)}.product-hero .product-hero__action--primary:hover{background:var(--hero-accent-hover)}.product-hero .product-hero__action:active{transform:translateY(1px)}.product-hero .product-hero__action:focus-visible{outline:3px solid var(--hero-focus);outline-offset:4px}.product-hero__note{color:var(--hero-muted);margin-top:16px;font-size:12px}.product-hero__visual{min-height:var(--hero-visual-height);align-content:center;display:grid}.product-hero__visual img{object-fit:contain;max-width:100%;height:auto}.product-hero__ribbon-stage{min-height:var(--hero-visual-height);border:1px solid var(--hero-line);background:var(--hero-surface);border-radius:18px;place-items:center;display:grid}.product-hero__ribbon-stage .hero-ribbon{width:auto;height:var(--hero-visual-height);max-height:424px;padding:24px}.product-hero__cloud-art{grid-template-rows:112px auto;align-content:center;place-items:center;gap:4px;height:176px;padding-inline:clamp(4px,2vw,24px);display:grid}.product-hero__cloud-art .product-hero__cloud-mark{object-fit:contain;width:auto;max-width:100%;height:112px;display:block}.product-hero__path{grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,430px);margin:0;padding:0;list-style:none;display:grid;position:relative}.product-hero__path:before{content:"";z-index:0;border-top:1px solid var(--hero-line);position:absolute;top:7px;left:16.667%;right:16.667%}.product-hero__path-step{z-index:1;min-width:0;color:var(--hero-ink);letter-spacing:.01em;text-align:center;justify-items:center;gap:5px;font-size:12px;font-weight:610;line-height:1.2;display:grid;position:relative}.product-hero__path-step:before{content:"";border:1px solid var(--hero-muted);background:var(--hero-surface);width:13px;height:13px;box-shadow:0 0 0 5px var(--hero-bg);border-radius:50%}.product-hero__path-step:not(:last-child):after{content:"";border-top:1px solid var(--hero-muted);border-right:1px solid var(--hero-muted);background:var(--hero-bg);width:5px;height:5px;position:absolute;top:4px;right:-2px;transform:rotate(45deg)}.product-hero__path-index{color:var(--hero-muted);font-variant-numeric:tabular-nums;font-size:7px;font-weight:650;line-height:15px;position:absolute;top:-1px;left:50%;transform:translate(-50%)}.product-hero__screenshot{border:1px solid var(--hero-line);border-radius:12px;width:100%;margin-top:20px}.product-hero__details{grid-column:1/-1}.product-hero__facts{border-top:1px solid var(--hero-line);grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-top:24px;display:grid}.product-hero__facts dt{font-size:18px;font-weight:620}.product-hero__facts dd{color:var(--hero-muted);margin:6px 0 0;font-size:13px}@media (width>=880px) and (width<=1071px){.product-hero__inner{grid-template-columns:minmax(0,46fr) minmax(0,54fr);column-gap:40px;width:calc(100% - 64px)}}@media (width<=879px){.product-hero__inner{grid-template-columns:minmax(0,1fr);gap:40px;width:calc(100% - clamp(40px,8vw,64px));padding-block:48px 35px}.product-hero .product-hero__copy{max-width:100%}.product-hero .product-hero__copy h1{font-size:clamp(41px,6vw,54px)}.product-hero .product-hero__lead{font-size:17px}.product-hero__actions{margin-top:26px}.product-hero__cloud-art{grid-template-rows:106px auto;height:168px;padding-inline:0}.product-hero__cloud-art .product-hero__cloud-mark{height:106px}}@media (width<=479px){.product-hero__inner{width:calc(100% - 40px)}.product-hero .product-hero__copy h1{font-size:clamp(32px,10.2vw,41px)}.product-hero__actions{flex-direction:column}.product-hero .product-hero__action{width:100%;min-height:50px}.product-hero__path-step{font-size:11px}.product-hero__facts{grid-template-columns:minmax(0,1fr);gap:20px}}@media (width>=880px) and (height<=760px){.product-hero{--hero-visual-height:328px}.product-hero__inner{padding-block:32px}}@media (prefers-reduced-motion:reduce){.product-hero .product-hero__action{transition:none}.product-hero .product-hero__action:hover,.product-hero .product-hero__action:active{transform:none}}
