/* GENERATED by _src/css_system.py: home page. Edit _src/css/ (system) or _src/css/legacy/ (legacy, being retired), then rebuild. */
.cover-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:30px;align-items:center;position:relative}
.cover-form{display:flex;gap:8px;background:#fff;border-radius:var(--r-pill);padding:7px;max-width:500px;box-shadow:var(--sh2);margin-top:24px}
.cover-note{font-size:var(--fs-caption);font-weight:600;color:var(--muted);margin:10px 0 0 18px}
.hw{border-radius:var(--r-2xl);padding:30px;position:relative;overflow:hidden;box-shadow:var(--sh)}
.hw.h1{background:#ff9ec4;transform:rotate(-1.5deg)}
.hw.h2{background:#8fc7ff;transform:translateY(24px) rotate(1deg)}
.hw.h3{background:#7be0b4;transform:rotate(-.5deg)}
.hw-n{display:block;font-family:var(--font-display);font-weight:800;font-size:120px;line-height:.85;letter-spacing:-.06em}
@media(max-width:1199.98px){
.cover-grid{grid-template-columns:1fr}
}
@media(max-width:899.98px){
.hw.h2{transform:rotate(1deg)}
}
.cover-grid>*{min-width:0}
@media(max-width:899.98px){
.cover-form{max-width:100%}
}
.h3 .cover-grid{align-items:center}
.mo-shot{display:block;position:relative;background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 26px 50px -24px rgba(22,18,15,.55),0 0 0 3px var(--ink);text-decoration:none}
.mo-shot.desktop, .mo-shot.pdp{padding-top:18px}
.mo-shot img{display:block;width:100%;height:auto}
.vc-dots{position:absolute;top:0;left:0;right:0;height:18px;background:var(--ink);display:flex;gap:5px;align-items:center;padding-left:10px;z-index:1}
.mo-shot.mobile{border-radius:var(--r-xl);box-shadow:0 26px 50px -24px rgba(22,18,15,.55),0 0 0 6px var(--ink)}
.mo-shot.mobile .notch{position:absolute;top:6px;left:50%;width:34%;height:14px;margin-left:-17%;background:var(--ink);border-radius:var(--r-pill);z-index:1}
.mo-shot.mobile img{aspect-ratio:390/700;object-fit:cover;object-position:top}
.vfeed{}
.lb-ic{display:inline-flex;vertical-align:middle;margin-right:10px}
.lb-ic .li{width:26px;height:26px;border-radius:var(--r-sm);background:#fff;object-fit:contain}
.lb-phone{margin:28px 0 0;max-width:230px}
.lb-phone .mo-shot.mobile{box-shadow:0 0 0 6px #fff,0 30px 50px -20px rgba(0,0,0,.6);transform:rotate(-3deg)}
.lb-phone figcaption{font-size:var(--fs-eyebrow);line-height:1.35;margin-top:16px;color:rgba(255,255,255,.75)}
.lb-fn{color:rgba(255,255,255,.6)!important;margin-top:14px}
.spot-f{margin:0}
.spot-f:nth-child(1) .mo-shot{transform:rotate(-1deg)}
.spot-f:nth-child(2) .mo-shot{transform:rotate(1deg)}
.spot-f img{aspect-ratio:16/10;object-fit:cover;object-position:top}
.spot-f figcaption{font-size:var(--fs-caption);line-height:1.45;margin-top:14px;color:var(--ink-2)}
.spot-f figcaption b{color:var(--ink)}
.cattiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cattile{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:170px;padding:18px 20px;border-radius:var(--r-xl);text-decoration:none;color:var(--ink);transition:transform .25s}
.cattile::after{content:"";position:absolute;width:160px;height:160px;right:-50px;top:-60px;border-radius:45% 55% 60% 40%;background:rgba(255,255,255,.28)}
.cattile:hover{transform:rotate(-1.5deg) scale(1.03)}
.cattile.c0{background:#ffd23f}
.cattile.c1{background:#ff9ec4}
.cattile.c2{background:#7be0b4}
.cattile.c3{background:#8fc7ff}
.cattile.c4{background:#c9b6ff}
.cattile.c5{background:#ffb38a}
.ct-name{font-family:var(--font-display);font-weight:800;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.03em;line-height:1;margin-top:8px}
.ct-sub{font-size:var(--fs-caption);font-weight:700;opacity:.75;margin-top:4px}
.ct-top{margin-top:auto;padding-top:12px;display:flex;align-items:center;gap:6px;font-size:var(--fs-eyebrow);font-weight:600;flex-wrap:wrap}
.ct-top .li{width:22px;height:22px;border-radius:6px;background:#fff;object-fit:contain}
.ct-top b{background:rgba(255,255,255,.75);border-radius:var(--r-pill);padding:2px 9px}
@media(max-width:1199.98px){
.vfeed{}
.cattiles{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:899.98px){
.vfeed.swipe{scrollbar-width:none}
.vfeed.swipe::-webkit-scrollbar{display:none}
.cattiles{grid-template-columns:1fr 1fr;gap:10px}
.cattile{min-height:150px;padding:14px 16px;border-radius:var(--r-lg)}
.lb-phone{display:none}
}
.lb-phone.desktop{max-width:320px}
.lb-phone .mo-shot.desktop{box-shadow:0 0 0 3px #fff,0 30px 50px -20px rgba(0,0,0,.6);transform:rotate(-2deg)}
.vfeed.swipe .scard.ncard{flex:0 0 78%;scroll-snap-align:start}
.vfeed.swipe .scard.ncard.big{flex-basis:86%}
.cover.hero-stack{padding-bottom:70px}
.cover.hero-stack h1{font-size:clamp(52px,6.2vw,100px)}
.cover.hero-stack .cover-grid{align-items:center}
.fan-box{position:relative;height:500px}
.f-card{position:absolute;top:50%;left:50%;display:block;width:270px;aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden;border:1.5px solid rgba(22,18,15,.9);background:#fff;box-shadow:0 30px 60px -28px rgba(22,18,15,.55);transition:transform .45s cubic-bezier(.2,.7,.2,1);text-decoration:none}
.f-card img{display:block;width:100%;height:100%;object-fit:cover}
.f-l{transform:translate(-50%,-50%) translate(-190px,22px) rotate(-6deg)}
.f-r{transform:translate(-50%,-50%) translate(190px,22px) rotate(5deg)}
.f-front{width:310px;z-index:2;transform:translate(-50%,-50%) rotate(-1deg);overflow:visible}
.f-front img{border-radius:var(--r-xl)}
.f-lab{position:absolute;left:14px;bottom:14px;display:inline-flex;gap:8px;align-items:center;background:var(--ink);color:#fff;border-radius:var(--r-pill);padding:6px 8px 6px 13px;font:700 13px/1 var(--font-body);letter-spacing:-.01em;white-space:nowrap}
.f-lab b{background:#fff;color:var(--ink);border-radius:var(--r-pill);padding:3px 7px;font:800 12px/1 var(--font-display)}
.f-front .f-lab{padding:7px 13px}
.f-r .f-lab{left:auto;right:14px}
.f-seal{position:absolute;top:-26px;right:-26px;width:96px;height:96px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 4px var(--orange),0 16px 30px -14px rgba(0,0,0,.5);transform:rotate(8deg)}
.fs-n{font:800 40px/1 var(--font-display);letter-spacing:-.04em;margin-top:-6px}
.fs-l{position:absolute;bottom:-4px;right:-2px;width:34px;height:34px;border-radius:50%;background:#1f9d63;color:#fff;display:grid;place-items:center;font:800 13px/1 var(--font-body);box-shadow:0 0 0 3px #fff}
.fan-src{margin:6px 0 0;text-align:center;font:500 11.5px/1.4 var(--font-body);color:var(--muted)}
@media(hover:hover){
.fan:hover .f-l{transform:translate(-50%,-50%) translate(-212px,30px) rotate(-9deg)}
.fan:hover .f-r{transform:translate(-50%,-50%) translate(212px,30px) rotate(8deg)}
.fan:hover .f-front{transform:translate(-50%,-50%) translateY(-6px) rotate(0)}
}
@media(prefers-reduced-motion:reduce){
.f-card{transition:none}
.fan:hover .f-l{transform:translate(-50%,-50%) translate(-190px,22px) rotate(-6deg)}
.fan:hover .f-r{transform:translate(-50%,-50%) translate(190px,22px) rotate(5deg)}
.fan:hover .f-front{transform:translate(-50%,-50%) rotate(-1deg)}
}
@media(max-width:1199.98px){
.fan-box{height:440px}
.f-card{width:230px}
.f-front{width:270px}
.f-l{transform:translate(-50%,-50%) translate(-156px,20px) rotate(-6deg)}
.f-r{transform:translate(-50%,-50%) translate(156px,20px) rotate(5deg)}
.fan:hover .f-l{transform:translate(-50%,-50%) translate(-174px,26px) rotate(-8deg)}
.fan:hover .f-r{transform:translate(-50%,-50%) translate(174px,26px) rotate(7deg)}
.f-seal{width:82px;height:82px;top:-22px;right:-22px}
.fs-n{font-size:34px}
}
.vfeed{}

/* ---- system ---- */
/* Home: the restored hero (kept), with the card fan's box reserved so nothing moves when fonts and images land. */
.cover.hero-solo h1{font:800 var(--fs-display-xl)/var(--lh-display-xl) var(--font-display);letter-spacing:var(--tr-display-xl)}
.cover .cover-dek{font-size:var(--fs-lead);line-height:var(--lh-lead)}
/* the card fan on tablets too: beside the copy at 900+, under the input at 600 to 899 (scaled), hidden on phones.
   Its box is a fixed height, so nothing below it moves while the three cards load. */
@media (min-width:900px){.cover .cover-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}.cover .fan{display:block}}
@media (min-width:900px) and (max-width:1199.98px){.cover .fan{zoom:.82}}
@media (min-width:600px) and (max-width:899.98px){.cover .fan{display:block;zoom:.72;margin:24px auto 0;max-width:600px}}