/* A3E storefront brand layer on top of a3e-ds.css */
:root{--brand:#5b4cf0;--brand-ink:#4636d8;--brand-soft:#f0eeff;--brand-glow:rgba(91,76,240,.32)}
.brandmark{color:var(--ink)}.nav.is-dark .brandmark,.footer .brandmark{color:#fff;--mark-fg:var(--ink)}
.brandmark span{color:var(--text)}.nav.is-dark .brandmark span,.footer .brandmark span{color:#fff}
.cover{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:
 radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--hue) 40%,#fff) 0%,transparent 55%),
 radial-gradient(120% 120% at 100% 100%,color-mix(in srgb,var(--hue) 85%,#000) 0%,transparent 60%),var(--hue);color:#fff}
.cover:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.cover svg{position:relative;width:56px;height:56px;padding:14px;border-radius:16px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);box-shadow:0 10px 30px -10px rgba(0,0,0,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cv{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
.cv b{font:400 italic clamp(22px,2.4vw,30px)/1 var(--serif);letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.18)}
.g-2 .cover{aspect-ratio:16/8}
.cover .tag{position:absolute;left:14px;top:14px;font:500 11.5px/1 var(--mono);letter-spacing:.04em;padding:6px 9px;border-radius:999px;background:rgba(0,0,0,.22);color:#fff}
.prod{display:flex;flex-direction:column;padding:12px}
.prod .body{padding:16px 10px 8px;flex:1;display:flex;flex-direction:column}
.prod h3{font-size:18px;letter-spacing:-.015em}
.prod p{margin:8px 0 18px;flex:1}
.prod .row{display:flex;justify-content:space-between;align-items:center;font-size:14.5px}
.prod .row b{font-size:17px;letter-spacing:-.02em}
.prod .row span{color:var(--brand-ink);font-weight:600}
.prod-hero{padding:clamp(48px,7vw,88px) 0 clamp(56px,7vw,96px);background:linear-gradient(var(--bg-soft),var(--bg))}
.prod-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,5vw,64px);align-items:start}
@media (max-width:900px){.prod-grid{grid-template-columns:1fr}}
.prod-grid .display{font-size:clamp(36px,5vw,60px)}
.prod-grid .lead{margin:20px 0 32px}
.buybox .cover{margin:-14px -14px 22px;aspect-ratio:16/9}
.buybox h2{font-size:17px;letter-spacing:-.01em}
@media (min-width:901px){.buybox{position:sticky;top:92px}}
.show-doc{position:relative;max-width:920px;margin:0 auto;padding-right:clamp(40px,14%,150px)}
.show-doc .crop{max-height:clamp(300px,44vw,560px);overflow:hidden}
.show-doc .phone{position:absolute;right:0;top:clamp(24px,5vw,64px)}
.show-doc.stack{padding-right:0;max-width:760px}
.show-doc.stack .crop{max-height:clamp(380px,62vw,860px)}
.sheet-back{position:absolute;inset:-18px 28px 0 -28px;transform:rotate(-3deg);background:#fff;opacity:.9}
.fan{display:flex;justify-content:center;align-items:flex-start;padding-bottom:clamp(32px,5vw,64px)}
.fan .paper{width:min(34%,300px);margin:0 -3%}
.fan .paper:nth-child(1){transform:rotate(-7deg) translateY(28px)}
.fan .paper:nth-child(2){z-index:2}
.fan .paper:nth-child(3){transform:rotate(7deg) translateY(28px)}
@media (max-width:640px){.show-doc{padding-right:56px}.show-doc.stack{padding-right:0}.show-doc .phone{width:128px;padding:5px;border-radius:24px;right:-6px}.show-doc .phone .screen{border-radius:19px}.show-doc .phone .screen:before{height:12px;top:6px}.collage{height:300px}.collage .phone{width:120px;padding:5px;border-radius:24px}.collage .phone .screen{border-radius:19px}.collage .phone .screen:before{height:12px;top:6px}}
.collage{position:relative;height:clamp(360px,38vw,500px)}
.collage .paper{position:absolute}
.collage .c1{left:4%;top:6%;width:58%;transform:rotate(-4deg)}
.collage .c2{right:0;top:0;width:44%;transform:rotate(5deg)}
.collage .c1,.collage .c2{max-height:88%;overflow:hidden;border-radius:8px}
.collage .phone{position:absolute;left:44%;bottom:-6%;width:clamp(150px,15vw,200px)}
@media (max-width:960px){.collage{height:380px;max-width:560px;margin:8px auto 0;width:100%}}
.note{margin-top:28px;padding:16px 18px;border-radius:12px;background:var(--bg-soft);border:1px solid var(--line-2);font-size:15px;color:var(--muted)}