:root{--ink:#171310;--paper:#e7c898;--rust:#912624;--gold:#d09638;--black:#0b0b09;--gap:6px}
*{box-sizing:border-box}
html{background:var(--black)}
body{margin:0;min-width:320px;background:var(--black);color:var(--paper);font-family:Inter,sans-serif}
button,input{font:inherit}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* keyboard "Skip to content": hidden until focused with Tab */
.pp-skip{position:fixed;left:12px;top:-60px;z-index:1000;padding:10px 16px;border-radius:6px;background:#171310;color:#e2c699;font:600 14px Inter,system-ui,sans-serif;text-decoration:none;transition:top .15s ease}
.pp-skip:focus{top:12px;outline:2px solid #e2c699;outline-offset:2px}
:is(a,button,input):focus-visible{outline:2px solid var(--paper);outline-offset:3px}

.page{width:min(1600px,100%);margin:0 auto;padding:0 6px 8px;display:flex;flex-direction:column;gap:var(--gap)}
.page>*{flex:none}

/* Header */
.site-header{position:relative;height:62px;overflow:hidden;background:#0b0d0c;border-block:1px solid rgba(226,198,153,.08)}
.site-header__grain{position:absolute;inset:0;background:url("../assets/desktop/header-grain.webp") 0 0/179.2px 179.2px;opacity:.58;mix-blend-mode:overlay;pointer-events:none}
.wordmark{position:absolute;left:36px;top:8px;display:flex;font-family:Anton,sans-serif;font-size:47.36px;line-height:.92;letter-spacing:-.47px;text-decoration:none}
.wordmark__tex{background:url("../assets/desktop/wordmark-vtek.webp") center/cover;-webkit-background-clip:text;background-clip:text;color:transparent}
.wordmark__red{color:#91261e}
.main-nav{position:absolute;left:31%;top:0;height:100%;display:flex;align-items:center;gap:36px}
.main-nav a{font:700 9.5px/1.2 "Roboto Mono",monospace;letter-spacing:1.35px;color:rgba(226,198,153,.66);text-decoration:none}
.utility{position:absolute;right:36px;top:0;height:100%;display:flex;align-items:center;gap:14px}
.icon-btn{width:16.28px;height:16.28px;padding:0;border:0;background:transparent;display:block}
.icon-btn img{width:100%;height:100%;display:block}

/* Brand statement */
.brand-statement{position:relative;height:40px;display:grid;place-items:center;overflow:hidden;background:var(--paper);color:var(--rust);border-bottom:2px solid rgba(74,56,38,.5)}
.brand-statement::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--rust)}
.brand-statement p{position:relative;margin:0;font:700 16px/1 Inter,sans-serif;letter-spacing:3.2px}
.brand-statement__grain{position:absolute;inset:0;background:url("../assets/desktop/header-grain.webp") 0 0/179.2px 179.2px;opacity:.18;mix-blend-mode:multiply;pointer-events:none}

/* Bands */
/* transform:translateZ(0) forces this rounded overflow:hidden clip onto its own stable GPU layer —
   the standard fix for a Safari-specific bug where a rounded-corner overflow:hidden clip doesn't
   reliably composite against a TRANSFORMED child (here, the rotated plugin-art photo, which
   intentionally bleeds slightly past its own box to avoid a different gap — see the family__still
   inset:-1px rules below), showing as a thin seam/line inside the card. Belongs on the clipping
   parent, not just the rotated child, for this specific class of bug. */
.family,.static-band,.connect{position:relative;overflow:hidden;border:1px solid rgba(235,219,194,.22);border-radius:12px;isolation:isolate;transform:translateZ(0)}
.family,.static-band{aspect-ratio:1588/287}
.family__still,.static-band picture{position:absolute;inset:0;display:block;width:100%;height:100%}
.family__still img,.static-band img{display:block;width:100%;height:100%;object-fit:cover}

.family-trigger{position:absolute;top:0;right:0;width:23%;height:32%;z-index:3;border:0;background:transparent;padding:0;cursor:pointer}
.card--oans .family-trigger{right:auto;left:0}

/* Static band hotspots (OPEN / VIEW SHOP click targets over the flattened art) */
.static-band{display:block}
.static-band__hotspot{position:absolute;z-index:2;display:block;overflow:hidden;text-indent:-999px;cursor:pointer}
/* Band buttons, measured from Figma per size (2026-10-01, Home bands update): R-190 OPEN, Shop VIEW SHOP pill, SEEK "Watch on YouTube" (+ a few px around each) */
.static-band__hotspot--r190{left:90.49%;top:3.83%;width:7.05%;height:16.38%}
.static-band__hotspot--shop{left:86.27%;top:40.42%;width:11.40%;height:20.21%;border-radius:999px}
.static-band__hotspot--yt{left:83.50%;top:43.90%;width:13.22%;height:11.85%}
@media(min-width:561px) and (max-width:1100px){
  .static-band__hotspot--r190{left:81.69%;top:4.35%;width:16.28%;height:20.43%}
  .static-band__hotspot--shop{left:69.91%;top:39.57%;width:23.40%;height:22.17%}
  .static-band__hotspot--yt{left:34.01%;top:69.57%;width:31.98%;height:13.48%}
}
@media(max-width:560px){
  .static-band__hotspot--r190{left:77.95%;top:4%;width:22.05%;height:13.33%}
  .static-band__hotspot--shop{left:3.59%;top:79.33%;width:36.67%;height:15.67%}
  .static-band__hotspot--yt{left:56.15%;top:86.67%;width:40.77%;height:9.67%}
}
.static-band__hotspot:focus-visible{outline:2px solid #e2c699;outline-offset:2px;border-radius:8px}

/* Family open/close motion — preserved from the pre-restart Home build */
.family-open{position:absolute;inset:0;z-index:4;visibility:hidden;opacity:0;overflow:hidden;color:var(--ink);transform:translateX(42%);filter:blur(12px);transition:transform .68s cubic-bezier(.32,.08,.24,1),opacity .4s ease,filter .4s ease,visibility 0s .68s}
.family-open--oans{color:#ead9bd;transform:translateX(-42%)}
.family__still{transition:transform .68s cubic-bezier(.32,.08,.24,1),opacity .4s ease,filter .34s ease}
.card--classic.is-open .family__still{transform:translateX(-140%);opacity:0;filter:blur(10px)}
.card--oans.is-open .family__still{transform:translateX(-130%);opacity:0;filter:blur(10px);transition:transform .85s cubic-bezier(.32,.08,.24,1) .12s,opacity .5s ease .12s,filter .34s ease .12s}
.card--classic.is-open .family-open{visibility:visible;opacity:1;filter:none;transform:none;transition:transform .68s cubic-bezier(.32,.08,.24,1),opacity .4s ease,filter .4s ease .12s,visibility 0s}
.card--oans.is-open .family-open{visibility:visible;opacity:1;filter:none;transform:none;transition:transform .85s cubic-bezier(.32,.08,.24,1) .28s,opacity .5s ease .28s,filter .4s ease .4s,visibility 0s}

.family-open__bg{position:absolute;inset:0;z-index:0}
.card--classic .family-open__bg{background:var(--gold) url("../assets/desktop/classic-background.webp") center/cover}
.card--oans .family-open__bg{background:#153c3b url("../assets/desktop/oans-background.webp") center/cover}

.family-close{position:absolute;z-index:4;top:5.6%;right:2.8%;display:flex;align-items:center;gap:10px;border:0;background:transparent;color:inherit;font:500 16px/19px Inter,sans-serif;letter-spacing:1.28px;cursor:pointer}
.family-close__arrow{display:block;width:14px;height:14px;background:currentColor;-webkit-mask:url("../assets/icons/arrow-classic-desktop.svg") center/contain no-repeat;mask:url("../assets/icons/arrow-classic-desktop.svg") center/contain no-repeat}

.family-open__copy{position:absolute;z-index:2;top:12%;left:3.7%;max-height:76%;display:flex;flex-direction:column;justify-content:center;gap:6px}
.family-open__copy h2{margin:0;font:400 116px/.95 Anton,sans-serif;letter-spacing:-1.16px}
.family-open__byline{display:block;width:200px;max-width:26%;height:auto;margin-top:6px}
.card--oans .family-open__copy{left:auto;right:3.7%;align-items:flex-end;text-align:right}
.family-open__title-lockup{width:220px;max-width:34%;height:auto;display:block}

.series-list{position:absolute;z-index:2;top:50%;right:6.6%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0}
.series-list a{display:flex;flex-direction:column;color:inherit;text-decoration:none;width:max-content}
.series-list strong{font:400 34px/.9 Anton,sans-serif;display:block;transform-origin:left center;transition:transform .35s cubic-bezier(.32,.08,.24,1)}
.series-list small{margin-top:4px;font:700 9.5px/1.1 Inter,sans-serif;letter-spacing:.9px;opacity:.65;display:block;transform-origin:left center;transition:transform .35s cubic-bezier(.32,.08,.24,1),opacity .2s ease}
.series-list a.is-active strong{transform:scale(1.55)}
.series-list a.is-active small{transform:scale(1.5);opacity:.85}

.series-list--oans{left:2%;right:auto;top:10%;transform:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px;list-style:none;margin:0;padding:0;color:inherit}
.series-list--oans strong{font:400 23px/1 Anton,sans-serif;display:block}
.series-list--oans small{margin-top:2px;font:700 9.5px/1.1 Inter,sans-serif;letter-spacing:.9px;opacity:.65;display:block}

.series-preview{position:absolute;z-index:1;top:4.5%;left:26.5%;width:56.5%;height:90%;pointer-events:none}
.preview-motion{position:absolute;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .35s ease}
.preview-motion.is-shown{opacity:1;animation:preview-drift 7s ease-in-out infinite alternate}
.preview-motion picture{display:contents} /* phone stand-in wrapper (index.html): takes no box of its own */
.preview-motion img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 15px 20px rgba(0,0,0,.25))}
.preview-motion.is-shown img{animation:preview-image-float 4.2s ease-in-out .45s infinite}
@keyframes preview-drift{from{transform:translateY(0)}to{transform:translateY(-16%)}}
@keyframes preview-image-float{0%{transform:translateY(-1.4%) scale(1.014)}50%{transform:translateY(-2.4%) scale(1.02)}100%{transform:translateY(-1.4%) scale(1.014)}}

/* Connect footer */
.connect{height:250px;background:#0e0e0b url("../assets/desktop/connect-background.webp") center/cover;border-color:rgba(208,150,56,.3)}
.connect__art{position:absolute;inset:0;background:url("../assets/desktop/connect-art.webp") center/cover;opacity:.1;pointer-events:none}
.connect__heading{position:absolute;left:3.7%;top:20%;margin:0;font:400 64px/1 Anton,sans-serif;color:#e2c699;letter-spacing:-.64px}
.connect__socials{position:absolute;left:3.7%;top:56%;display:flex;gap:26px}
.connect__socials img{width:26px;height:26px;display:block}
.connect__links{position:absolute;left:29.6%;top:38%;display:flex;gap:30px;flex-wrap:wrap}
.connect__links a{display:flex;align-items:center;gap:10px;font:700 13px/1 Inter,sans-serif;letter-spacing:1.04px;color:#e2c699;text-decoration:none}
.connect__links img{width:10px;height:12px;display:block}
.connect__copyright{position:absolute;left:29.6%;top:68%;margin:0;font:700 12px/1 Inter,sans-serif;letter-spacing:.96px;color:#e2c699;opacity:.55}
.signup{position:absolute;right:3.7%;top:20%;width:25.7%;min-width:220px;padding:18px;border:1px solid var(--gold);border-radius:6px;color:#e2c699}
.signup h3{margin:0;font:400 18px/1 Anton,sans-serif;letter-spacing:1.44px}
.signup p{margin:12px 0 15px;opacity:.65;font:500 12px/1 Inter,sans-serif;letter-spacing:.96px}
.signup__row{display:flex;height:40px}
.signup input{flex:1;min-width:0;border:1px solid var(--gold);border-right:0;background:rgba(0,0,0,.2);color:#e2c699;padding:0 14px;border-radius:3px 0 0 3px;font-size:13px}
.signup button{width:56px;border:0;background:var(--gold);border-radius:0 3px 3px 0;display:grid;place-items:center;cursor:pointer}
.signup button img{width:20px;height:12px}
.signup__note{margin:8px 0 0;font-size:12px;opacity:.85}

/* Intermediate — matches the 700px Figma reference stage */
@media(max-width:1100px){
  .wordmark{left:20px}
  .main-nav{left:auto;right:150px;gap:18px}
  .utility{right:20px}
  .family,.static-band{aspect-ratio:688/230}
  .family-open__copy h2{font-size:78px}
  .family-open__byline{width:160px}
  .series-list strong{font-size:28px}
  .series-list--oans strong{font-size:19px}
  .series-preview{display:none}
  .connect{height:300px}
  .connect__links{flex-wrap:wrap;gap:16px}
  .signup{padding-inline:16px}
}

/* Mobile — matches the 390px Figma Home Mobile frame */
@media(max-width:560px){
  .page{padding:0 0 30px}
  .site-header{height:38px}
  .wordmark{top:3px;left:10px;font-size:22px;letter-spacing:-.22px}
  .main-nav{left:150px;right:auto;top:2px;display:grid;grid-template-columns:repeat(2,1fr);width:110px;height:34px;gap:2px 8px;justify-items:start}
  .main-nav a{font-size:6.5px;letter-spacing:.4px;white-space:nowrap}
  .utility{right:16px;gap:10px}
  .icon-btn{width:12px;height:12px}
  .brand-statement{height:32px}
  .brand-statement p{font-size:10px;letter-spacing:1.5px}
  .family,.static-band{aspect-ratio:390/300;border-radius:10px}
  .family-trigger{width:38%;height:22%}
  .family-open__copy h2{font-size:52px}
  .family-open__byline{width:130px}
  .family-open__title-lockup{width:150px}
  .series-list{right:5%}
  .series-list strong{font-size:22px}
  .series-list small{font-size:7.5px}
  .series-list--oans{left:5%;top:8%;gap:10px 16px}
  .series-list--oans strong{font-size:17px}
  .connect{height:430px;border-radius:10px}
  .connect__heading{font-size:44px;top:6%}
  .connect__socials{top:24%}
  .connect__links{left:5%;top:36%;flex-direction:column;gap:10px}
  .connect__copyright{left:5%;top:58%}
  .signup{left:5%;right:5%;width:auto;top:66%}
}



/* Open panels rebuilt from the 700px Figma reference (606:181 / 606:370): same
   proportions and anchoring, scaled with the band width (cqw). */
.family{container-type:inline-size}
@media(min-width:1101px){
  .family-open__copy{top:50%;left:3.72cqw;max-height:none;transform:translateY(-50%);gap:.38cqw}
  .family-open__copy h2{font-size:7.3cqw;letter-spacing:-.073cqw;line-height:.95}
  .family-open__byline{width:12.6cqw;max-width:none;margin-top:.4cqw}
  .card--oans .family-open__copy{left:auto;right:3.72cqw;top:53%;gap:.5cqw}
  .family-open__title-lockup{width:16.5cqw;max-width:none}
  .card--oans .family-open__byline{width:12.6cqw}
  .family-close{top:1.05cqw;right:2.77cqw;font-size:1.02cqw;line-height:1.2;letter-spacing:.08cqw;gap:.63cqw}
  .family-close__arrow{width:.88cqw;height:.88cqw}
  .series-list--classic{left:68.2cqw;right:auto;gap:1.2cqw}
  .series-list--classic strong{font-size:2.45cqw;letter-spacing:-.01cqw;line-height:1}
  .series-list--classic small{font-size:.88cqw;letter-spacing:.06cqw;margin-top:.15cqw}
  .series-list--oans{left:3.72cqw;top:50%;transform:translateY(-50%);grid-template-columns:12cqw 12cqw;gap:1.6cqw 0}
  .series-list--oans strong{font-size:2.2cqw;line-height:1}
  .series-list--oans small{font-size:.88cqw;margin-top:.2cqw}
}
@media(max-width:560px){
  .family-open__copy{top:auto;bottom:6cqw;left:4.9cqw;transform:none;max-height:none;gap:1.5cqw}
  .family-open__copy h2{font-size:14.9cqw;letter-spacing:-.15cqw}
  .family-open__byline{width:35.9cqw;max-width:none;margin-top:1cqw}
  .card--oans .family-open__copy{left:auto;right:4.4cqw;bottom:6cqw}
  .family-open__title-lockup{width:37.4cqw;max-width:none}
  .card--oans .family-open__byline{width:28.7cqw}
  .family-close{top:4.4cqw;right:5.6cqw;font-size:3.3cqw;letter-spacing:.27cqw;gap:1.8cqw}
  .family-close__arrow{width:3.1cqw;height:3.1cqw}
  .series-list--classic{top:17cqw;right:5cqw;transform:none;gap:3.2cqw}
  .series-list--classic strong{font-size:6.7cqw;line-height:1}
  .series-list--classic small{font-size:2.4cqw;margin-top:.5cqw}
  .series-list--oans{left:4.9cqw;top:17cqw;transform:none;grid-template-columns:32cqw 32cqw;gap:3.6cqw 0}
  .series-list--oans strong{font-size:6.1cqw;line-height:1}
  .series-list--oans small{font-size:2.4cqw;margin-top:.5cqw}
}
@media(min-width:1101px){.series-preview{left:26cqw;width:38cqw}}
.family-open__title-lockup{aspect-ratio:262/105;object-fit:cover;height:auto}
.card--oans .family-open__byline{aspect-ratio:200/42;object-fit:cover;height:auto}
.card--classic .family-open__byline{aspect-ratio:200/44;object-fit:cover;height:auto}
@media(max-width:560px){
  .series-list--oans{top:14cqw;grid-template-columns:31cqw 31cqw;gap:2.2cqw 0}
  .series-list--oans strong{font-size:5.4cqw}
  .card--oans .family-open__copy{bottom:4cqw}
  .family-open__title-lockup{width:31cqw}
  .card--oans .family-open__byline{width:26cqw}
}

/* Level 1 hover: plugin art appears mid-band and slowly pans through the image */
.series-list a{display:flex;flex-direction:column;color:inherit;text-decoration:none;width:max-content}
.series-list strong,.series-list small{transform-origin:left center;transition:transform .35s cubic-bezier(.32,.08,.24,1),opacity .2s ease}
.series-list a.is-active strong,.series-list a.is-active small{transform:scale(1.12)}
.series-list--oans a.is-active strong,.series-list--oans a.is-active small{transform:scale(1.12)}
.series-preview{overflow:hidden;top:0;height:100%;border-radius:8px;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}
.card--classic .series-preview{left:26cqw;width:38cqw}
.card--oans .series-preview{left:31cqw;width:45cqw}
.preview-motion{transform:translateY(8%);transition:opacity .45s ease,transform .8s cubic-bezier(.32,.08,.24,1)}
.preview-motion.is-shown{transform:none;animation:none}
.preview-motion img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;filter:drop-shadow(0 10px 16px rgba(0,0,0,.3));animation:none}
.preview-motion.is-shown img{animation:preview-pan 14s ease-in-out infinite alternate}
@keyframes preview-pan{from{object-position:50% 100%}to{object-position:50% 0%}}
@media(min-width:1101px){.card--oans .series-preview{left:31cqw;width:45cqw}}

/* Hover: plugin peeks up from the bottom (top edge ~mid-band), fades in fast, then scrolls up slowly */
.series-preview,.card--classic .series-preview,.card--oans .series-preview{top:0;left:0;width:100%;height:100%;border-radius:0;overflow:hidden;-webkit-mask:none;mask:none}
.preview-motion{inset:0;display:block;transform:none;transition:opacity .25s ease}
.preview-motion img{position:absolute;inset:auto;top:48%;left:28.5cqw;right:auto;bottom:auto;width:55cqw;height:auto;object-fit:contain;transform:translateY(0);animation:none;filter:none}
.card--oans .preview-motion img{left:32.5cqw}
.preview-motion.is-shown img{animation:preview-scroll 16s cubic-bezier(.3,.05,.3,1) forwards}
@keyframes preview-scroll{from{transform:translateY(0)}to{transform:translateY(-80%)}}

/* 700px range: layered open state built from the exact 700px Figma numbers (basis 688 = 100cqw) */
@media(min-width:561px) and (max-width:1100px){
  .family.is-open{aspect-ratio:688/190}
  .series-preview{display:block}
  .family-open__copy{top:calc(50% - .58cqw);left:2.03cqw;transform:translateY(-50%);gap:.87cqw}
  .family-open__copy h2{font-size:16.86cqw;letter-spacing:-.17cqw}
  .family-open__byline{width:29cqw;max-width:none;margin-top:0}
  .family-close{top:1.45cqw;right:5.5cqw;font-size:2.33cqw;line-height:1.2;letter-spacing:.19cqw;gap:1.45cqw}
  .family-close__arrow{width:2cqw;height:2cqw}
  .series-list--classic{left:68.2cqw;right:auto;top:5.4cqw;transform:none;gap:1.4cqw}
  .series-list--classic strong{font-size:3.78cqw;line-height:1;letter-spacing:-.02cqw}
  .series-list--classic small{font-size:1.38cqw;margin-top:.29cqw;letter-spacing:.13cqw}
  .card--oans .family-open__copy{left:auto;right:2.9cqw;top:calc(50% + 2.7cqw);gap:1.16cqw}
  .family-open__title-lockup{width:38.1cqw}
  .card--oans .family-open__byline{width:29cqw}
  .card--oans .family-close{right:4.5cqw}
  .series-list--oans{left:3.34cqw;top:3.05cqw;transform:none;grid-template-columns:18.3cqw 18.3cqw;gap:3.6cqw 0}
  .series-list--oans strong{font-size:3.34cqw;line-height:1}
  .series-list--oans small{font-size:1.38cqw;margin-top:.29cqw}
}

/* Fixes: OANS title cap at 700px range; Classic plugin sits between title and list */
.family-open__title-lockup{max-width:none}
@media(min-width:1101px){
  .series-list--classic{left:76cqw}
  .card--classic .preview-motion img{left:34cqw;width:38cqw}
}
@media(min-width:561px) and (max-width:1100px){
  .series-list--classic{left:72cqw}
  .card--classic .preview-motion img{left:50cqw;width:26cqw}
}
@media(min-width:561px) and (max-width:1100px){.card--classic .preview-motion img{left:52cqw;width:19cqw}}

/* Header + brand statement are Figma exports; .hs are invisible link areas over them.
   aspect-ratio is set explicitly per breakpoint (matching each header art's real pixel ratio) rather
   than leaving the header's height to the <picture> image's own intrinsic size: Safari has a known bug
   where an auto-height box driven by an <img> doesn't reliably reflow the instant a <picture>'s active
   <source> swaps during a LIVE window resize across a breakpoint (works fine on a fresh load at a given
   width, but resizing an already-open window can leave the box at its old size for a beat). Since the
   invisible click hotspots below are positioned as percentages of this box, a stale size there silently
   moves every hotspot away from the icons actually on screen — exactly "hover shows a pointer, click
   does nothing." An explicit aspect-ratio is recalculated by the CSS engine on the same media-query
   change that swaps the image, so it can't lag behind it the way image-driven auto-height can.  */
.site-header{position:relative;height:auto;overflow:visible;background:none;border:0;aspect-ratio:25/1}
.site-header picture,.brand-statement picture{display:block}
.site-header img,.brand-statement img{display:block;width:100%;height:auto}
.brand-statement{display:block;height:auto;background:none;border:0;overflow:visible}
.brand-statement::before{display:none}
.hs,.hs:hover,.cs,.cs:hover,.static-band__hotspot,.static-band__hotspot:hover{text-decoration:none!important}
.hs{position:absolute;display:block;padding:0;border:0;background:transparent;cursor:pointer;z-index:2}
.hs:focus-visible{outline:2px solid #e2c699;outline-offset:1px}
.hs-logo{left:1.889%;top:9.677%;width:19.521%;height:80.645%}
.hs-about{left:31.234%;top:29.032%;width:2.771%;height:41.935%}
.hs-seek{left:35.264%;top:29.032%;width:2.519%;height:41.935%}
.hs-downloads{left:38.854%;top:29.032%;width:4.534%;height:41.935%}
.hs-shop{left:44.710%;top:29.032%;width:2.519%;height:41.935%}
.hs-search{left:92.317%;top:30.645%;width:1.511%;height:38.710%}
.hs-account{left:94.207%;top:30.645%;width:1.511%;height:38.710%}
.hs-cart{left:96.096%;top:30.645%;width:1.511%;height:38.710%}
@media(max-width:1100px){
.site-header{aspect-ratio:10.75/1}
.hs-logo{left:2.326%;top:9.375%;width:45.058%;height:81.250%}
.hs-about{left:48.837%;top:31.250%;width:6.105%;height:37.500%}
.hs-seek{left:56.105%;top:31.250%;width:4.942%;height:37.500%}
.hs-downloads{left:62.355%;top:31.250%;width:10.320%;height:37.500%}
.hs-shop{left:73.837%;top:31.250%;width:4.942%;height:37.500%}
.hs-search{left:85.756%;top:31.250%;width:3.488%;height:37.500%}
.hs-account{left:90.116%;top:31.250%;width:3.488%;height:37.500%}
.hs-cart{left:94.477%;top:31.250%;width:3.488%;height:37.500%}
}
@media(max-width:560px){
.site-header{aspect-ratio:10.26316/1}
.hs-logo{left:4.103%;top:15.789%;width:33.333%;height:68.421%}
.hs-about{left:40.513%;top:2.632%;width:11.282%;height:47.368%}
.hs-seek{left:53.333%;top:2.632%;width:8.718%;height:47.368%}
.hs-downloads{left:36.667%;top:50.000%;width:18.205%;height:47.368%}
.hs-shop{left:58.974%;top:50.000%;width:9.231%;height:47.368%}
.hs-search{left:73.846%;top:34.211%;width:6.154%;height:63.158%}
.hs-account{left:82.051%;top:34.211%;width:6.154%;height:63.158%}
.hs-cart{left:90.513%;top:34.211%;width:6.154%;height:63.158%}
}

/* CONNECT footer is a Figma export; .cs are real links and the real email field over it */
.connect{display:block;position:relative;height:auto;background:none;border:0;border-radius:0;overflow:visible}
.connect picture{display:block}.connect img{display:block;width:100%;height:auto}
.cs{position:absolute;display:block;padding:0;margin:0;border:0;background:transparent;cursor:pointer;z-index:2}
.cs-email{cursor:text;color:#e2c699;font:500 13px Inter,sans-serif;padding:0 14px;border-radius:3px;outline-offset:0}
/* Focused/typed-in: swap in the same field without its baked "Enter your email" (cut from this very art:
   gold border + texture intact), so the field looks unchanged apart from the caret and the typed text. */
.cs-email:focus,.cs-email:not(:placeholder-shown){background:url("../assets/cards/desktop/connect-field.webp") 0 0/100% 100% no-repeat}
@media(max-width:1100px){.cs-email:focus,.cs-email:not(:placeholder-shown){background-image:url("../assets/cards/mid/connect-field.webp")}}
@media(max-width:560px){.cs-email:focus,.cs-email:not(:placeholder-shown){background-image:url("../assets/cards/mobile/connect-field.webp")}}
.cs-email:focus-visible{outline:none}
/* preload that art while at rest (parked off the element, so it isn't visible) — no flash on the first click */
.cs-email:placeholder-shown:not(:focus){background:url("../assets/cards/desktop/connect-field.webp") -9999px -9999px no-repeat}
@media(max-width:1100px){.cs-email:placeholder-shown:not(:focus){background-image:url("../assets/cards/mid/connect-field.webp")}}
@media(max-width:560px){.cs-email:placeholder-shown:not(:focus){background-image:url("../assets/cards/mobile/connect-field.webp")}}
.connect .signup__note{position:absolute;left:0;right:0;top:100%;margin:6px 0 0;color:#e2c699;font-size:12px}
.cs-instagram{left:3.526%;top:54.400%;width:2.141%;height:13.600%}
.cs-youtube{left:6.801%;top:54.400%;width:2.393%;height:13.600%}
.cs-facebook{left:10.327%;top:54.400%;width:2.141%;height:13.600%}
.cs-x{left:13.602%;top:54.400%;width:2.015%;height:13.600%}
.cs-about{left:29.345%;top:36.000%;width:4.975%;height:11.200%}
.cs-contact{left:35.957%;top:36.000%;width:6.297%;height:11.200%}
.cs-downloads{left:43.892%;top:36.000%;width:7.746%;height:11.200%}
.cs-privacy{left:53.275%;top:36.000%;width:5.793%;height:11.200%}
.cs-terms{left:60.705%;top:36.000%;width:4.912%;height:11.200%}
.cs-email{left:72.544%;top:52.000%;width:18.892%;height:16.000%}
.cs-submit{left:91.436%;top:52.000%;width:3.526%;height:16.000%}
@media(max-width:1100px){
.cs-instagram{left:3.488%;top:34.667%;width:4.942%;height:11.333%}
.cs-youtube{left:11.047%;top:34.667%;width:5.523%;height:11.333%}
.cs-facebook{left:19.186%;top:34.667%;width:4.942%;height:11.333%}
.cs-x{left:26.744%;top:34.667%;width:4.651%;height:11.333%}
.cs-about{left:3.488%;top:67.333%;width:11.483%;height:9.333%}
.cs-contact{left:20.640%;top:67.333%;width:14.535%;height:9.333%}
.cs-downloads{left:38.372%;top:67.333%;width:17.878%;height:9.333%}
.cs-privacy{left:61.192%;top:67.333%;width:13.372%;height:9.333%}
.cs-terms{left:80.233%;top:67.333%;width:11.337%;height:9.333%}
.cs-email{left:50.872%;top:34.000%;width:33.430%;height:12.667%}
.cs-submit{left:84.302%;top:34.000%;width:8.430%;height:12.667%}
}
@media(max-width:560px){
.cs-instagram{left:3.846%;top:20.233%;width:8.718%;height:7.907%}
.cs-youtube{left:15.641%;top:20.233%;width:9.744%;height:7.907%}
.cs-facebook{left:28.462%;top:20.233%;width:8.718%;height:7.907%}
.cs-x{left:40.256%;top:20.233%;width:8.205%;height:7.907%}
.cs-about{left:3.846%;top:36.512%;width:17.949%;height:6.512%}
.cs-contact{left:32.051%;top:36.512%;width:20.513%;height:6.512%}
.cs-downloads{left:3.846%;top:44.884%;width:25.641%;height:6.512%}
.cs-privacy{left:41.795%;top:44.884%;width:20.513%;height:6.512%}
.cs-terms{left:73.590%;top:44.884%;width:19.487%;height:6.512%}
.cs-email{left:9.487%;top:83.488%;width:62.564%;height:7.907%}
.cs-submit{left:72.051%;top:83.488%;width:17.949%;height:7.907%}
}

/* Trim the 1px Figma frame outline baked into the band exports; the site's own border stays */
.family__still,.static-band picture{inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px)}
.family,.static-band{background:#0b0b09}
.family__still,.static-band picture{border-radius:12px;overflow:hidden}
@media(max-width:560px){.family__still,.static-band picture{border-radius:10px}}

/* No CSS border on bands: Figma's own inside outline is already in the exports */
.family,.static-band{border:0}
.family__still,.static-band picture{inset:-.5px;width:calc(100% + 1px);height:calc(100% + 1px)}
.family__still,.static-band picture{border-radius:13.5px}
@media(max-width:560px){.family__still,.static-band picture{border-radius:11.5px}}
.family__still,.static-band picture{inset:-1.5px;width:calc(100% + 3px);height:calc(100% + 3px);border-radius:15px}
@media(max-width:560px){.family__still,.static-band picture{border-radius:13px}}

/* Level 0: plugin art is its own layer over the Figma band (base has the plugin hidden) */
img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
a{-webkit-user-drag:none}
.family__still{display:block}
.fs-base{position:absolute;inset:0;display:block}
.fs-base img{display:block;width:100%;height:100%;object-fit:cover}
.plugin-art{position:absolute;display:grid;place-items:center;pointer-events:none;transition:transform 4s cubic-bezier(.3,.05,.3,1)}
.plugin-art picture{display:block;width:100%;height:100%;display:grid;place-items:center}
.plugin-art img{display:block;object-fit:cover;object-position:bottom;max-width:none}
.plugin-shadow{position:absolute;inset:0;pointer-events:none}
.oans-over{position:absolute;inset:0;pointer-events:none;color:#ead9bd}
.oans-over picture{position:absolute;display:block}.oans-over img{display:block;width:100%;height:100%;object-fit:cover}
.oo-label{position:absolute;display:flex;align-items:center;font-family:Inter,sans-serif;font-weight:500;line-height:normal;white-space:nowrap}
.oo-label i{display:block;background:currentColor;-webkit-mask:url(../assets/icons/arrow-oans-desktop.svg) center/contain no-repeat;mask:url(../assets/icons/arrow-oans-desktop.svg) center/contain no-repeat}
@media(hover:hover) and (pointer:fine){.family:not(.is-open):hover .plugin-art{transform:translateY(-1.1cqw) scale(1.014)}}
/* An earlier pass here added translateZ(0)+backface-visibility:hidden to force GPU compositing on the
   rotated plugin photo, reasoning it'd fix a Safari hairline-seam artifact — it didn't (confirmed: the
   seam moves together with .plugin-art itself, e.g. on the hover translateY/scale below), which points
   the other way: .plugin-art already had will-change:transform (removed above), and forcing a SECOND,
   nested GPU layer on the rotated child on top of that is a real, documented Safari failure mode for
   this exact symptom. Reverted to a plain rotate() with no forced layer promotion at all. */
.card--classic .plugin-art{left:19.8317cqw;top:-1.7632cqw;width:76.9258cqw;height:28.3167cqw}
.card--classic .plugin-art img{width:98.774%;height:89.444%;transform:rotate(2.27deg)}
.card--oans .plugin-art{left:-1.8020cqw;top:-13.1961cqw;width:98.4543cqw;height:44.3952cqw}
.card--oans .plugin-art img{width:98.445%;height:91.426%;transform:rotate(-2.27deg)}
.plugin-shadow{box-shadow:inset 0 0 3.78cqw 0.63cqw rgba(40,22,6,.38)}
.oo-title{left:79.7229cqw;top:4.1562cqw;width:16.4987cqw;height:6.6121cqw}
.oo-byline{left:79.7229cqw;top:11.2720cqw;width:12.5945cqw;height:2.6448cqw}
.oo-label{left:3.7783cqw;top:1.8892cqw;font-size:1.0076cqw;letter-spacing:0.0806cqw;gap:0.6297cqw}
.oo-label i{width:0.8816cqw;height:0.8816cqw}
@media(max-width:1100px){
.card--classic .plugin-art{left:52.7616cqw;top:7.8488cqw;width:94.4767cqw;height:34.5930cqw}
.card--classic .plugin-art img{width:100.000%;height:100.000%;transform:rotate(0deg)}
.card--oans .plugin-art{left:-9.4477cqw;top:-9.0116cqw;width:117.8779cqw;height:52.0349cqw}
.card--oans .plugin-art img{width:100.000%;height:100.000%;transform:rotate(0deg)}
.plugin-shadow{box-shadow:inset 0 0 8.72cqw 1.45cqw rgba(40,22,6,.38)}
.oo-title{left:58.8663cqw;top:5.3779cqw;width:38.0814cqw;height:15.2616cqw}
.oo-byline{left:58.8663cqw;top:21.8023cqw;width:29.0698cqw;height:6.1047cqw}
.oo-label{left:2.9070cqw;top:2.6163cqw;font-size:2.3256cqw;letter-spacing:0.1860cqw;gap:1.4535cqw}
.oo-label i{width:2.0349cqw;height:2.0349cqw}
}
@media(max-width:560px){
.card--classic .plugin-art{left:2.0513cqw;top:5.6410cqw;width:122.0126cqw;height:44.9974cqw}
.card--classic .plugin-art img{width:98.771%;height:89.464%;transform:rotate(2.27deg)}
.card--oans .plugin-art{left:-57.9487cqw;top:-10.3074cqw;width:215.7331cqw;height:97.4531cqw}
.card--oans .plugin-art img{width:98.441%;height:91.441%;transform:rotate(-2.27deg)}
.plugin-shadow{box-shadow:inset 0 0 15.38cqw 2.56cqw rgba(40,22,6,.38)}
.oo-title{left:55.8974cqw;top:47.6923cqw;width:37.4359cqw;height:14.8718cqw}
.oo-byline{left:55.8974cqw;top:64.1026cqw;width:28.7179cqw;height:6.1538cqw}
.oo-label{left:5.1282cqw;top:4.6154cqw;font-size:3.3333cqw;letter-spacing:0.2667cqw;gap:1.7949cqw}
.oo-label i{width:3.0769cqw;height:3.0769cqw}
}

/* Plugin layers are now true Figma renders (WebP with alpha) and fill their Figma boxes exactly; Classic title/byline/label sit above the moving art */
.plugin-art img{object-fit:fill;object-position:center}
.classic-over{position:absolute;inset:0;pointer-events:none;color:#171310}
.co-title{position:absolute;font-family:Anton,sans-serif;font-weight:400;line-height:.95;white-space:nowrap}
.co-byline{position:absolute;display:block;mix-blend-mode:multiply}.co-byline img{display:block;width:100%;height:100%;object-fit:cover}
.co-label{position:absolute;display:flex;align-items:center;font-family:Inter,sans-serif;font-weight:500;line-height:normal;white-space:nowrap}
.co-label i{display:block;background:currentColor;-webkit-mask:url(../assets/icons/arrow-classic-desktop.svg) center/contain no-repeat;mask:url(../assets/icons/arrow-classic-desktop.svg) center/contain no-repeat}
.co-title{left:3.7783cqw;top:4.0302cqw;font-size:7.3048cqw;letter-spacing:-0.0730cqw}
.co-byline{left:3.7783cqw;top:11.3350cqw;width:12.5945cqw;height:2.7708cqw}
.co-label{right:2.8338cqw;top:1.0705cqw;font-size:1.0076cqw;gap:0.6297cqw;letter-spacing:0.0806cqw}
.co-label i{width:0.8816cqw;height:0.8816cqw}
@media(max-width:1100px){
.co-title{left:2.9070cqw;top:5.0872cqw;font-size:16.8605cqw;letter-spacing:-0.1686cqw}
.co-byline{left:2.9070cqw;top:21.9477cqw;width:29.0698cqw;height:6.3953cqw}
.co-label{right:3.3430cqw;top:1.4535cqw;font-size:2.3256cqw;gap:1.4535cqw;letter-spacing:0.1860cqw}
.co-label i{width:2.0349cqw;height:2.0349cqw}
}
@media(max-width:560px){
.co-title{left:5.1282cqw;top:44.6154cqw;font-size:14.8718cqw;letter-spacing:-0.1487cqw}
.co-byline{left:5.1282cqw;top:60.0000cqw;width:35.8974cqw;height:7.9487cqw}
.co-label{right:5.8974cqw;top:4.6154cqw;font-size:3.3333cqw;gap:1.7949cqw;letter-spacing:0.2667cqw}
.co-label i{width:3.0769cqw;height:3.0769cqw}
}

/* nav hotspots for the larger Figma nav text */
.hs-about{left:31.234%;top:24.194%;width:3.401%;height:51.613%}
.hs-seek{left:35.264%;top:24.194%;width:2.834%;height:51.613%}
.hs-downloads{left:38.854%;top:24.194%;width:5.668%;height:51.613%}
.hs-shop{left:45.277%;top:24.194%;width:2.771%;height:51.613%}
@media(max-width:1100px){
.hs-about{left:48.837%;top:25.000%;width:7.267%;height:50.000%}
.hs-seek{left:56.105%;top:25.000%;width:5.959%;height:50.000%}
.hs-downloads{left:62.355%;top:25.000%;width:12.209%;height:50.000%}
.hs-shop{left:75.000%;top:25.000%;width:5.959%;height:50.000%}
}
@media(max-width:560px){
.hs-about{left:40.513%;top:2.632%;width:10.256%;height:47.368%}.hs-seek{left:53.333%;top:2.632%;width:8.718%;height:47.368%}.hs-downloads{left:36.667%;top:50%;width:18.205%;height:47.368%}.hs-shop{left:58.974%;top:50%;width:9.231%;height:47.368%}
}

/* header link areas after the aligned/enlarged Figma header */
.hs-logo{left:1.889%;top:6.452%;width:21.537%;height:90.323%}
.hs-about{left:39.610%;top:22.581%;width:3.652%;height:54.839%}
.hs-seek{left:45.088%;top:22.581%;width:3.086%;height:54.839%}
.hs-downloads{left:49.937%;top:22.581%;width:6.297%;height:54.839%}
.hs-shop{left:57.997%;top:22.581%;width:3.086%;height:54.839%}
.hs-search{left:92.443%;top:27.419%;width:1.763%;height:45.161%}
.hs-account{left:94.710%;top:27.419%;width:1.763%;height:45.161%}
.hs-cart{left:96.977%;top:27.419%;width:1.763%;height:45.161%}
@media(max-width:1100px){
.hs-about{left:48.837%;top:25.000%;width:7.267%;height:50.000%}
.hs-seek{left:57.849%;top:25.000%;width:5.959%;height:50.000%}
.hs-downloads{left:65.552%;top:25.000%;width:12.209%;height:50.000%}
.hs-shop{left:79.506%;top:25.000%;width:5.959%;height:50.000%}
.hs-logo{left:2.326%;top:9.375%;width:45.058%;height:81.25%}
}

/* Home header = the product-page header frame exactly (full width 1600x64) so nothing shifts between pages */
@media(min-width:1101px){
.site-header{margin:0 -6px}
.hs-logo{left:1.875%;top:6.250%;width:21.375%;height:87.500%}
.hs-about{left:39.313%;top:21.875%;width:3.625%;height:53.125%}
.hs-seek{left:44.750%;top:21.875%;width:3.063%;height:53.125%}
.hs-downloads{left:49.563%;top:21.875%;width:6.250%;height:53.125%}
.hs-shop{left:57.563%;top:21.875%;width:3.063%;height:53.125%}
.hs-search{left:91.750%;top:28.125%;width:1.750%;height:43.750%}
.hs-account{left:94.000%;top:28.125%;width:1.750%;height:43.750%}
.hs-cart{left:96.250%;top:28.125%;width:1.750%;height:43.750%}
}


/* header stays on screen while scrolling */
.site-header{position:sticky;top:0;z-index:100}

html{scroll-padding-top:64px}
@media(max-width:760px){html{scroll-padding-top:38px}}

/* live header nav (>=1101px): PLUGINS ▾ / DOWNLOADS / SHOP / ABOUT, art from Figma header component 1060:2 */
@media(min-width:1101px){
.hs-plugins{left:37.6875%;top:21.875%;width:6.75%;height:53.125%}
.hs-downloads{left:45.3125%;top:21.875%;width:6.75%;height:53.125%}
.hs-shop{left:53.3125%;top:21.875%;width:3.5625%;height:53.125%}
.hs-about{left:58.125%;top:21.875%;width:4.1875%;height:53.125%}
.hs-seek{display:none}
}
@media(max-width:1100px){.hd-menu{left:-3.783%!important;width:107.558%!important}}
@media(max-width:560px){.hd-menu{display:none!important}}
.hs-seek{display:none}
@media(max-width:1100px){
.hs-plugins{left:42.442%;top:31.25%;width:11.919%;height:37.5%}
.hs-downloads{left:55.959%;top:31.25%;width:12.209%;height:37.5%}
.hs-shop{left:69.913%;top:31.25%;width:5.959%;height:37.5%}
.hs-about{left:77.616%;top:31.25%;width:7.267%;height:37.5%}
}
@media(max-width:560px){
.hs-plugins{left:36.667%;top:2.632%;width:13.846%;height:47.368%}
.hs-downloads{left:53.077%;top:2.632%;width:17.436%;height:47.368%}
.hs-shop{left:42.564%;top:50%;width:8.718%;height:47.368%}
.hs-about{left:54.359%;top:50%;width:10.769%;height:47.368%}
}
.hs-plugins{position:absolute;background:none;border:0;padding:0;cursor:pointer}
/* Header menus at 85% of their art (owner, 2026-10-02: "smaller, not so in your face"), shrinking toward their top centre; gentle fade + small drop. */
.hd-menu{position:absolute;z-index:120;container-type:inline-size;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);transition:opacity .3s cubic-bezier(.32,.72,0,1),transform .35s cubic-bezier(.32,.72,0,1),visibility 0s linear .3s}
.hd-menu:not(.hd-acct){scale:.85;transform-origin:50% 0}
.hd-menu.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
.hd-menu>img{position:static!important;display:block;width:100%;height:auto;object-fit:fill}
.hd-row{position:absolute;display:block;border-radius:calc(4*var(--u));text-decoration:none}
.hd-row:hover,.hd-row:focus-visible,.hd-row.is-cur{background:rgba(226,198,153,.09)}
.hd-trigger[aria-expanded="true"]::after{content:"";position:absolute;left:0;right:0;top:97%;height:2px;background:#d0962f}

/* header sign-in pop-in (account icon) — fields sit on the Figma art */
.hd-acct .pp-af{display:contents}
.hd-acct .pp-hs{position:absolute;display:block;padding:0;border:0;background:transparent;cursor:pointer;z-index:2;text-decoration:none}
.hd-acct .pp-af-in{box-sizing:border-box;background:transparent;border:0;cursor:text;font:400 calc(13*var(--u))/normal Inter,sans-serif;padding:0 calc(14*var(--u));border-radius:calc(6*var(--u));outline-offset:-1px}
.hd-acct .pp-af-dark{color:#f0e5d1}.hd-acct .pp-af-dark::placeholder{color:rgba(175,168,160,.9);opacity:1}
.hd-acct .pp-af-in:focus-visible{outline:1px solid rgba(208,150,47,.7)}
.hd-acct .pp-af-dark:-webkit-autofill,.hd-acct .pp-af-dark:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #211d18 inset!important;-webkit-text-fill-color:#f0e5d1!important}
.hd-acct .pp-af-submit{--pr:6px;background-color:rgba(0,0,0,0);transition:background-color .14s ease}
@media(hover:hover) and (pointer:fine){.hd-acct .pp-af-submit{border-radius:var(--pr)}.hd-acct .pp-af-submit:active{background-color:rgba(0,0,0,.34);transition-duration:.05s}}
@media(max-width:1100px){.hd-acct{left:38.2%!important;width:66.4%!important}}
@media(max-width:560px){.hd-acct{display:none!important}}
.cart-badge{position:absolute;top:-3px;right:-5px;min-width:14px;height:14px;padding:0 3px;box-sizing:border-box;border-radius:7px;background:#2fb45a;color:#fff;font:700 9px/14px Inter,sans-serif;text-align:center;border:1.5px solid #0d0b08;pointer-events:none;z-index:3}
html,body{overflow-x:clip}

/* Newsletter status line: just below the JOIN THE LIST box, lined up with the email field. The box and its
   spacing are baked into the footer art, so the message stays outside it and never crowds the box's bottom
   edge (it used to render below the whole footer, off-screen). Box bottom border measured in the art:
   79.8% desktop, 52.5% mid, 94.77% mobile of the footer height. */
.connect .signup__note{left:72.544%;right:auto;width:22.4%;top:calc(79.8% + 8px);margin:0;font-size:12px;line-height:1.2}
@media(max-width:1100px){.connect .signup__note{left:50.872%;width:42%;top:calc(52.5% + 4px);font-size:11px;line-height:1}}
@media(max-width:560px){.connect .signup__note{left:9.487%;width:80.5%;top:calc(94.77% + 5px);line-height:1.2}}

/* Header icon hotspots (search / account / cart) for the mid (561-1100px) and phone (<=560px) headers.
   The unconditional desktop rules above (.hs-search{left:92.443%...} etc.) come later than the older
   per-breakpoint rules and were overriding them, so at those sizes the click areas sat right of the drawn
   icons (search's box covered the account icon, account's covered the cart). Centres measured from the art:
   mid header.png 1376x128 -> 87.50% / 91.82% / 96.22%; mobile header.png 780x76 -> 76.92% / 85.19% / 93.46%. */
@media(min-width:561px) and (max-width:1100px){
  .hs-search{left:85.5%;top:25%;width:4%;height:50%}
  .hs-account{left:89.82%;top:25%;width:4%;height:50%}
  .hs-cart{left:94.22%;top:25%;width:4%;height:50%}
}
@media(max-width:560px){
  .hs-search{left:72.923%;top:30%;width:8%;height:65%}
  .hs-account{left:81.192%;top:30%;width:8%;height:65%}
  .hs-cart{left:89.462%;top:30%;width:8%;height:65%}
}

/* Smooth first load (js/reveal.js): each band stays dark until the pictures you'd see in it are decoded,
   then fades in as one piece. html.vr is set in <head>; the animation is a CSS-only fallback that shows
   everything after 6 s even if the script never runs. vr-now = already cached: show without a fade. */
html.vr :is(.site-header,.brand-statement,.family,.static-band,.connect){opacity:.001;transition:opacity .45s ease;animation:vr-failsafe 0s linear 6s forwards}
html.vr :is(.site-header,.brand-statement,.family,.static-band,.connect).vr-in{opacity:1;animation:none}
html.vr :is(.site-header,.brand-statement,.family,.static-band,.connect).vr-now{transition:none}
@keyframes vr-failsafe{to{opacity:1}}
@media (prefers-reduced-motion:reduce){html.vr :is(.site-header,.brand-statement,.family,.static-band,.connect){transition:none}}
html.vr.vr-js :is(.site-header,.brand-statement,.family,.static-band,.connect):not(.vr-in){animation:none}
/* (.001 not 0: the browser still paints a waiting band in the background — same trick as the .005 variants —
   so large art is fully painted before the fade instead of appearing tile by tile) */