/* ================================================================
   cs-store.css — "Servora custom software" experience.
   A self-contained world: graphite canvas, glass surfaces, depth,
   crafted scroll motion (no neon, no glow). Mobile-first.
   Pages load ONLY this + Inter (not design.css) so the light
   marketing theme never leaks in.
   ================================================================ */

:root{
  --cs-bg:#0A0C11;
  --cs-bg-2:#070910;
  --cs-ink:#ECEFF5;
  --cs-ink-2:#AAB2C0;
  /* Was #6C7484 (~4.2:1 on the page's darkest real surface, #070910), which put
     every eyebrow label, breadcrumb, drawer caption, pipeline sublabel, and
     pick-menu caption using this token under the 4.5:1 AA minimum for small
     text. Shifted halfway toward --cs-ink-2 (now ~6:1) so those labels read
     for low-vision users while staying visibly dimmer than --cs-ink-2 itself. */
  --cs-ink-3:#8B93A2;
  --cs-edge:rgba(255,255,255,.10);
  --cs-edge-2:rgba(255,255,255,.18);
  --cs-panel:rgba(255,255,255,.045);
  --cs-panel-2:rgba(255,255,255,.07);
  --cs-accent:#8A9BB8;           /* graphite-blue default; collections override --cs-accent only */
  --cs-accent-ink:#C9D4E6;
  --cs-accent-ink:color-mix(in srgb, var(--cs-accent) 52%, #ffffff);
  --cs-radius:16px;
  --cs-radius-lg:26px;
  --cs-radius-sm:11px;
  --cs-ease:cubic-bezier(.22,.61,.36,1);
  --cs-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --cs-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --cs-shadow:0 30px 60px -34px rgba(0,0,0,.85);
  --cs-shadow-lg:0 48px 90px -40px rgba(0,0,0,.9);
  --cs-maxw:1160px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.cs-doc{
  margin:0;font-family:var(--cs-font);color:var(--cs-ink);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  letter-spacing:-.006em;overflow-x:clip;
  background:
    radial-gradient(1200px 720px at 80% -12%, rgba(120,140,180,.16), transparent 58%),
    radial-gradient(1000px 700px at -12% 8%, rgba(70,84,116,.13), transparent 55%),
    radial-gradient(900px 900px at 50% 120%, rgba(90,104,140,.10), transparent 60%),
    linear-gradient(180deg,#0B0E14 0%, #090B10 60%, #070910 100%);
  background-attachment:fixed;
}
/* sharp, crafted grid + grain overlay (fixed, very low opacity) */
body.cs-doc::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}
/* Lift page content above the fixed grid overlay above. MUST exclude the overlay
   components: this selector (0,1,1) outranks .cs-bar/.cs-drawer/.cs-modal (0,1,0)
   and was flattening all three to position:relative;z-index:1 — which collapsed the
   Menu drawer to 0px height while body scroll stayed locked, freezing the page. */
body.cs-doc>*:not(.cs-bar):not(.cs-drawer):not(.cs-modal){position:relative;z-index:1}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:color-mix(in srgb, var(--cs-accent) 55%, #fff);color:#0A0C11}

h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.03em;line-height:1.05}
h1{font-size:clamp(2.3rem,7vw,4.4rem)}
h2{font-size:clamp(1.6rem,4.4vw,2.7rem)}
p{margin:0}

/* ---- shared width + section ---- */
.cs-wrap{max-width:var(--cs-maxw);margin:0 auto;padding:0 20px}
.cs-sec{padding:clamp(56px,10vw,120px) 0}
.cs-eyebrow{font-family:var(--cs-mono);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--cs-ink-3);display:inline-flex;align-items:center;gap:9px}
.cs-eyebrow::before{content:'';width:22px;height:1px;background:var(--cs-accent);opacity:.8}
.cs-lede{color:var(--cs-ink-2);font-size:clamp(1rem,2.1vw,1.22rem);line-height:1.6;max-width:56ch}

/* ================= MOTION (JS toggles .is-in / .is-out) ================= */
/* Gentler entrance, and a single direction. Each section's items share one
   timing so a heading and its cards arrive TOGETHER (the old per-element
   data-d delays made them appear at different moments). */
.cs-reveal{opacity:0;transform:translateY(14px);filter:blur(8px);
  transition:opacity 1s var(--cs-ease),transform 1s var(--cs-ease),filter 1s var(--cs-ease)}
.cs-reveal.is-in{opacity:1;transform:none;filter:blur(0)}
/* .is-out intentionally removed: snapping scrolled-past content to blur(6px)
   is what made the page read as flickering instead of settling. */
/* Stagger neutralised — kept as no-ops so the 105 generated pages need no rebuild. */
.cs-reveal[data-d="1"],.cs-reveal[data-d="2"],
.cs-reveal[data-d="3"],.cs-reveal[data-d="4"]{transition-delay:0s}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cs-reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none}
}

/* ================= GLASS ================= */
.cs-glass{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.022));
  border:1px solid var(--cs-edge);border-radius:var(--cs-radius-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), var(--cs-shadow);
  -webkit-backdrop-filter:blur(16px) saturate(125%);backdrop-filter:blur(16px) saturate(125%);
}

/* ================= TOP BAR + MENU ================= */
.cs-bar{position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg, rgba(9,11,16,.82), rgba(9,11,16,.42) 70%, transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .3s, background .3s}
.cs-bar.is-stuck{border-bottom-color:var(--cs-edge);background:rgba(8,10,15,.9)}
.cs-bar__in{max-width:var(--cs-maxw);margin:0 auto;padding:13px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.cs-brand{display:inline-flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.02em;font-size:15.5px;color:var(--cs-ink)}
.cs-brand__mk{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-weight:700;font-size:14px;color:#0A0C11;
  background:linear-gradient(160deg,#DCE3EF,#9AA6BC);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.cs-brand small{color:var(--cs-ink-3);font-weight:500;font-size:12.5px;letter-spacing:0}
.cs-bar__nav{display:flex;align-items:center;gap:6px}
.cs-navlink{padding:9px 13px;border-radius:10px;font-size:14px;color:var(--cs-ink-2);transition:color .2s,background .2s}
.cs-navlink:hover{color:var(--cs-ink);background:var(--cs-panel)}
/* min-height:44px keeps this at the project's tap-target floor: unpadded it
   computed to ~40.4px (18px padding + 14px font x 1.6 inherited line-height),
   below the --tap:48px design.css enforces elsewhere, easy to mis-tap on a
   phone. This button sits on every generated page's top bar. */
.cs-menu-btn{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:11px;cursor:pointer;
  font-family:inherit;font-size:14px;color:var(--cs-ink);background:var(--cs-panel);border:1px solid var(--cs-edge);min-height:44px}
.cs-menu-btn:hover{background:var(--cs-panel-2);border-color:var(--cs-edge-2)}
.cs-menu-btn svg{width:15px;height:15px}
@media(max-width:720px){ .cs-bar__nav .cs-navlink{display:none} }

/* drawer */
.cs-drawer{position:fixed;inset:0;z-index:90;display:none}
.cs-drawer.is-open{display:block}
.cs-drawer__scrim{position:absolute;inset:0;background:rgba(5,7,11,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:csf .25s ease}
.cs-drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(380px,86vw);padding:22px 18px;overflow-y:auto;
  background:linear-gradient(180deg,#0E121A,#0A0D13);border-left:1px solid var(--cs-edge);box-shadow:var(--cs-shadow-lg);
  animation:csSlide .32s var(--cs-ease)}
@keyframes csSlide{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
@keyframes csf{from{opacity:0}to{opacity:1}}
.cs-drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
/* 44x44 hit box (was 36x36, below this project's own --tap:48px / 44px floor)
   so the dismiss control isn't easy to mis-tap on a phone; the glyph itself
   stays the same size, just centered in the bigger box via grid. */
.cs-drawer__x{width:44px;height:44px;border-radius:50%;border:1px solid var(--cs-edge);background:var(--cs-panel);color:var(--cs-ink-2);cursor:pointer;font-size:19px;line-height:1;display:grid;place-items:center}
.cs-drawer__x:hover{color:var(--cs-ink)}
.cs-drawer a.cs-drawer__col{display:flex;align-items:center;gap:12px;padding:12px 12px;border-radius:12px;transition:background .18s}
.cs-drawer a.cs-drawer__col:hover{background:var(--cs-panel)}
.cs-drawer__dot{width:11px;height:11px;border-radius:4px;flex:none;background:var(--c,var(--cs-accent));box-shadow:0 0 0 3px color-mix(in srgb,var(--c,var(--cs-accent)) 22%,transparent)}
.cs-drawer__col b{font-weight:550;font-size:15px;color:var(--cs-ink)}
.cs-drawer__col span{display:block;font-size:12.5px;color:var(--cs-ink-3)}

/* ================= BUTTONS ================= */
.cs-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;font-family:inherit;
  font-size:15px;font-weight:550;letter-spacing:-.01em;padding:14px 24px;border-radius:13px;border:1px solid transparent;
  transition:transform .14s var(--cs-ease),box-shadow .2s,background .2s,border-color .2s;white-space:nowrap}
.cs-btn--primary{color:#0A0C11;background:linear-gradient(165deg,#EEF2F8,#C2CBDA);
  box-shadow:0 16px 34px -16px rgba(180,196,225,.55),inset 0 1px 0 rgba(255,255,255,.7)}
.cs-btn--primary:hover{transform:translateY(-2px);box-shadow:0 22px 44px -16px rgba(180,196,225,.7),inset 0 1px 0 rgba(255,255,255,.8)}
.cs-btn--ghost{color:var(--cs-ink);background:var(--cs-panel);border-color:var(--cs-edge)}
.cs-btn--ghost:hover{background:var(--cs-panel-2);border-color:var(--cs-edge-2);transform:translateY(-2px)}
.cs-btn--accent{color:#0A0C11;background:linear-gradient(165deg, color-mix(in srgb,var(--cs-accent) 82%,#fff), var(--cs-accent));
  box-shadow:0 16px 34px -16px color-mix(in srgb,var(--cs-accent) 60%, transparent)}
.cs-btn--accent:hover{transform:translateY(-2px)}
.cs-btn:active{transform:translateY(0)}
.cs-btn--sm{padding:10px 16px;font-size:13.5px;border-radius:11px}

/* ================= HERO + START-HERE WIDGET ================= */
.cs-hero{padding:clamp(40px,8vw,86px) 0 clamp(30px,6vw,60px)}
.cs-hero__k{margin-bottom:20px}
.cs-hero h1{max-width:15ch;background:linear-gradient(180deg,#FBFCFE,#B9C2D2);-webkit-background-clip:text;background-clip:text;color:transparent}
.cs-hero__lede{margin-top:22px}
.cs-widget{margin-top:34px;padding:26px;display:grid;gap:18px}
@media(min-width:640px){ .cs-widget{grid-template-columns:1.2fr auto;align-items:center;gap:26px} }
.cs-widget__t b{display:block;font-size:1.16rem;font-weight:600;letter-spacing:-.02em;margin-bottom:5px}
.cs-widget__t span{color:var(--cs-ink-2);font-size:14.5px}
.cs-widget__cta{display:flex;flex-wrap:wrap;gap:11px}

/* ================= FIGURE (image-optional) ================= */
.cs-fig{position:relative;overflow:hidden;border-radius:inherit;isolation:isolate;
  background:
    radial-gradient(120% 130% at 22% -10%, color-mix(in srgb,var(--c,var(--cs-accent)) 40%, transparent), transparent 58%),
    radial-gradient(90% 120% at 100% 110%, color-mix(in srgb,var(--c,var(--cs-accent)) 22%, transparent), transparent 60%),
    linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,0) 40%),
    linear-gradient(180deg,#131822,#0B0F16);}
.cs-fig::after{content:"";position:absolute;inset:0;z-index:1;background-image:var(--img);background-size:cover;background-position:center;
  transition:transform .6s var(--cs-ease)}
.cs-fig__mark{position:absolute;z-index:0;right:-6%;bottom:-14%;font-family:var(--cs-mono);font-weight:700;
  font-size:clamp(5rem,20vw,10rem);line-height:1;color:color-mix(in srgb,var(--c,var(--cs-accent)) 26%, transparent);
  letter-spacing:-.06em;-webkit-user-select:none;user-select:none}
.cs-fig__grain{position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:26px 26px;-webkit-mask-image:linear-gradient(180deg,transparent,#000);mask-image:linear-gradient(180deg,transparent,#000)}

/* ================= CARD + SLIDER (collections on hub) ================= */
.cs-collrow{margin-top:34px}
.cs-collrow__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.cs-collrow__head h2{font-size:clamp(1.35rem,3.4vw,2rem)}
.cs-collrow__head p{color:var(--cs-ink-3);font-size:13.5px;margin-top:6px}
.cs-viewall{font-family:var(--cs-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cs-accent-ink);white-space:nowrap}
.cs-viewall:hover{color:#fff}
.cs-reel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding:6px 0 18px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x}
.cs-reel::-webkit-scrollbar{display:none}
.cs-reel::after{content:'';flex:0 0 4px}
.cs-card{scroll-snap-align:start;flex:0 0 74%;max-width:340px;position:relative;border-radius:var(--cs-radius);
  border:1px solid var(--cs-edge);overflow:hidden;box-shadow:var(--cs-shadow);
  transition:transform .3s var(--cs-ease),border-color .3s,box-shadow .3s}
@media(min-width:640px){ .cs-card{flex-basis:38%} }
@media(min-width:960px){ .cs-card{flex-basis:23.5%} }
@media(hover:hover){
  .cs-card:hover{transform:translateY(-4px);border-color:var(--cs-edge-2)}
  .cs-card:hover .cs-fig::after{transform:scale(1.045)}
}
.cs-card__fig{aspect-ratio:4/5}
.cs-card__scrim{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,rgba(8,10,15,0) 38%,rgba(7,9,13,.62) 72%,rgba(6,8,12,.9))}
.cs-card__meta{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:16px 16px 15px}
.cs-card__k{font-family:var(--cs-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,var(--c,var(--cs-accent)) 70%,#fff);margin-bottom:5px}
.cs-card__nm{font-size:1.02rem;font-weight:600;letter-spacing:-.02em;color:#fff}
.cs-card__pill{position:absolute;z-index:4;top:12px;left:12px;font-family:var(--cs-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cs-ink);background:rgba(10,13,19,.55);border:1px solid var(--cs-edge);border-radius:999px;padding:5px 9px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* ================= COLLECTION PAGE ================= */
.cs-collhero{padding:clamp(46px,9vw,96px) 0 clamp(24px,5vw,44px);position:relative}
.cs-collhero::before{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(1100px 520px at 26% -10%, color-mix(in srgb,var(--cs-accent) 26%, transparent), transparent 62%)}
.cs-collhero h1{max-width:16ch;background:linear-gradient(180deg,#fff, color-mix(in srgb,var(--cs-accent) 60%, #B9C2D2));-webkit-background-clip:text;background-clip:text;color:transparent}
.cs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:8px}
@media(min-width:720px){ .cs-grid{grid-template-columns:repeat(3,1fr);gap:18px} }
@media(min-width:1000px){ .cs-grid{grid-template-columns:repeat(4,1fr)} }
.cs-grid .cs-card{flex:none;max-width:none;width:100%}

/* ================= PRODUCT PAGE ================= */
.cs-prod{padding-top:clamp(30px,6vw,60px)}
.cs-prod__crumb{font-family:var(--cs-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cs-ink-3);margin-bottom:18px}
.cs-prod__crumb a{color:var(--cs-accent-ink)}
.cs-prod__hero{display:grid;gap:26px}
@media(min-width:860px){ .cs-prod__hero{grid-template-columns:1fr 1fr;align-items:center;gap:40px} }
.cs-prod__fig{border-radius:var(--cs-radius-lg);aspect-ratio:5/4;border:1px solid var(--cs-edge);box-shadow:var(--cs-shadow-lg)}
.cs-prod h1{font-size:clamp(2rem,5.4vw,3.3rem);max-width:16ch}
.cs-prod__tag{margin-top:16px;color:var(--cs-ink-2);font-size:1.12rem;line-height:1.55;max-width:44ch}
.cs-prod__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.cs-block{padding:clamp(30px,5vw,56px) 0;border-top:1px solid var(--cs-edge)}
.cs-block h2{font-size:clamp(1.4rem,3.4vw,2rem);margin-bottom:8px}
.cs-block__k{margin-bottom:14px}
.cs-steps{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px;counter-reset:s}
.cs-steps li{counter-increment:s;position:relative;padding:16px 18px 16px 56px;border-radius:var(--cs-radius);
  background:var(--cs-panel);border:1px solid var(--cs-edge)}
.cs-steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:16px;top:15px;font-family:var(--cs-mono);
  font-size:13px;color:var(--cs-accent-ink);border:1px solid var(--cs-edge-2);border-radius:8px;width:26px;height:26px;display:grid;place-items:center}
.cs-uselist{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.cs-uselist li{position:relative;padding-left:26px;color:var(--cs-ink-2)}
.cs-uselist li::before{content:'';position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:3px;background:var(--cs-accent)}
.cs-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.cs-chip{font-size:13px;color:var(--cs-ink);background:var(--cs-panel);border:1px solid var(--cs-edge);border-radius:999px;padding:8px 14px}
.cs-bene{display:grid;gap:14px;margin-top:18px}
@media(min-width:640px){ .cs-bene{grid-template-columns:repeat(2,1fr)} }
.cs-bene__c{padding:20px;border-radius:var(--cs-radius);background:linear-gradient(180deg,var(--cs-panel-2),var(--cs-panel));border:1px solid var(--cs-edge)}
.cs-bene__c b{display:block;font-weight:600;letter-spacing:-.01em;margin-bottom:5px}
.cs-bene__c span{color:var(--cs-ink-2);font-size:14.5px}
.cs-custom{margin-top:18px;padding:22px;border-radius:var(--cs-radius);border:1px solid var(--cs-edge);
  background:radial-gradient(120% 130% at 100% 0%, color-mix(in srgb,var(--cs-accent) 16%, transparent), transparent 60%),var(--cs-panel)}

/* ================= PIPELINE DIAGRAM (product image + on page) ================= */
.cs-pipe{position:relative;z-index:2;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;gap:0;padding:26px 22px}
.cs-pipe__stage{display:flex;align-items:center;gap:14px;padding:2px 0}
.cs-pipe__dot{width:15px;height:15px;border-radius:50%;flex:none;background:var(--cs-accent);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--cs-accent) 20%,transparent);position:relative;z-index:2}
.cs-pipe__stage:not(:last-child) .cs-pipe__dot::after{content:'';position:absolute;left:50%;top:15px;transform:translateX(-50%);
  width:2px;height:calc(100% + 0px);min-height:34px;background:linear-gradient(180deg,var(--cs-accent),color-mix(in srgb,var(--cs-accent) 20%,transparent))}
.cs-pipe__lbl b{display:block;font-size:14.5px;font-weight:600;color:var(--cs-ink);letter-spacing:-.01em}
.cs-pipe__lbl span{font-size:12px;color:var(--cs-ink-3)}
.cs-pipe--card{gap:0}
.cs-pipe--card .cs-pipe__lbl span{display:none}

/* ================= INFO MODAL (start here / how it works) ================= */
.cs-modal{position:fixed;inset:0;z-index:120;display:none;align-items:flex-end;justify-content:center}
@media(min-width:640px){ .cs-modal{align-items:center} }
.cs-modal.is-open{display:flex}
.cs-modal__scrim{position:absolute;inset:0;background:rgba(5,7,11,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:csf .25s ease}
.cs-modal__card{position:relative;width:100%;max-width:540px;max-height:92vh;overflow:auto;padding:30px 26px 26px;
  border-radius:var(--cs-radius-lg) var(--cs-radius-lg) 0 0;
  background:linear-gradient(180deg,#12161F,#0C0F16);border:1px solid var(--cs-edge);box-shadow:var(--cs-shadow-lg);
  animation:csUp .3s var(--cs-ease)}
@media(min-width:640px){ .cs-modal__card{border-radius:var(--cs-radius-lg);animation:csPop .28s var(--cs-ease)} }
@keyframes csUp{from{transform:translateY(30px);opacity:.5}to{transform:none;opacity:1}}
@keyframes csPop{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}
/* Same 44x44 hit-box fix as .cs-drawer__x: 36x36 was below the project's own
   tap-target floor and easy to mis-tap on a phone closing the "start here"
   modal. Nudged top/right in to keep the glyph's optical position steady. */
.cs-modal__x{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;border:1px solid var(--cs-edge);
  background:var(--cs-panel);color:var(--cs-ink-2);cursor:pointer;font-size:20px;line-height:1;display:grid;place-items:center}
.cs-modal__x:hover{color:var(--cs-ink)}
.cs-modal__k{margin-bottom:12px}
.cs-modal h3{font-size:1.5rem;letter-spacing:-.025em;margin-bottom:14px}
.cs-modal ul{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:11px}
.cs-modal li{position:relative;padding-left:28px;color:var(--cs-ink-2);line-height:1.5}
.cs-modal li::before{content:'';position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:3px;background:var(--cs-accent)}
.cs-modal__steps{counter-reset:m}
.cs-modal__steps li{counter-increment:m;padding-left:40px}
.cs-modal__steps li::before{content:counter(m);width:26px;height:26px;left:0;top:-2px;border-radius:8px;background:none;
  border:1px solid var(--cs-edge-2);display:grid;place-items:center;font-family:var(--cs-mono);font-size:12px;color:var(--cs-accent-ink)}
.cs-modal__foot{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}

/* ================= "ALREADY KNOW WHAT YOU WANT" multi-select ================= */
.cs-pick{position:relative}
.cs-pick__label{font-weight:600;font-size:15px;margin-bottom:4px}
.cs-pick__hint{color:var(--cs-ink-3);font-size:13px;margin-bottom:12px}
.cs-pick__search{position:relative}
.cs-pick__input{width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--cs-edge);background:var(--cs-panel);
  color:var(--cs-ink);font-family:inherit;font-size:15px}
.cs-pick__input::placeholder{color:var(--cs-ink-3)}
/* A box-shadow-only ring here used to composite to ~1.4:1 on this dark surface,
   under WCAG 1.4.11's 3:1 minimum for a non-text focus indicator, so keyboard
   users tabbing in couldn't see it. A real outline can't fail that way (it
   paints solid, not alpha-blended); the box-shadow stays as a soft halo. */
.cs-pick__input:focus{border-color:var(--cs-edge-2);outline:2px solid var(--cs-ink);outline-offset:2px;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--cs-accent) 22%,transparent)}
.cs-pick__menu{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;max-height:280px;overflow-y:auto;
  background:#11151D;border:1px solid var(--cs-edge-2);border-radius:14px;box-shadow:var(--cs-shadow-lg);padding:6px;display:none}
.cs-pick__menu.is-open{display:block}
.cs-pick__opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;cursor:pointer;font-size:14px}
.cs-pick__opt:hover,.cs-pick__opt.is-active{background:var(--cs-panel-2)}
.cs-pick__opt small{color:var(--cs-ink-3);font-family:var(--cs-mono);font-size:11px}
.cs-pick__opt[aria-selected="true"]{color:var(--cs-accent-ink)}
.cs-pick__none{padding:14px 12px;color:var(--cs-ink-3);font-size:13.5px}
.cs-pick__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cs-pick__chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--cs-ink);
  background:var(--cs-panel-2);border:1px solid var(--cs-edge);border-radius:999px;padding:7px 10px 7px 13px}
.cs-pick__chip button{border:none;background:none;color:var(--cs-ink-3);cursor:pointer;font-size:15px;line-height:1;padding:0}
.cs-pick__chip button:hover{color:var(--cs-ink)}

/* ================= FOOTER ================= */
.cs-foot{border-top:1px solid var(--cs-edge);margin-top:40px;padding:40px 0}
.cs-foot__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.cs-foot a{color:var(--cs-ink-2);font-size:13.5px}
.cs-foot a:hover{color:var(--cs-ink)}
.cs-foot__cta{padding:clamp(30px,6vw,54px);text-align:center;display:grid;gap:16px;place-items:center}
.cs-foot__cta h2{max-width:18ch}

/* quick collections list (hub) */
.cs-quick{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.cs-quick a{font-size:13px;color:var(--cs-ink-2);background:var(--cs-panel);border:1px solid var(--cs-edge);border-radius:999px;
  padding:8px 14px;display:inline-flex;align-items:center;gap:8px;transition:color .2s,background .2s,border-color .2s}
.cs-quick a:hover{color:var(--cs-ink);border-color:var(--cs-edge-2);background:var(--cs-panel-2)}
.cs-quick a i{width:8px;height:8px;border-radius:3px;background:var(--c,var(--cs-accent))}

/* utility */
.cs-center{text-align:center}
.cs-mt-s{margin-top:14px}.cs-mt-m{margin-top:26px}
.cs-hide{display:none!important}
.cs-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ================================================================
   BROWSING LAYER
   Everything below is additive: new selectors, or existing selectors
   inside a min-width query. Nothing a 390px phone already reads is
   redefined, so the phone renders the same rules it did before.
   ================================================================ */

/* ---- meta line under a collection / industry hero ---- */
.cs-count{margin-top:16px;font-family:var(--cs-mono);font-size:12px;letter-spacing:.05em;color:var(--cs-ink-3)}
.cs-count a{color:var(--cs-accent-ink)}
.cs-count a:hover{color:#fff}

/* ---- reels with a mouse ------------------------------------------
   The rows hid their scrollbar and shipped no controls, so on a desktop
   with no touchscreen the second half of every row was unreachable. From
   900px up (and only where a real pointer exists) the row gets a slim
   scrollbar plus prev/next buttons that cs-store.js inserts. A touch
   phone still swipes, still sees no scrollbar, and never gets the
   buttons: JS does not build them below 900px. */
@media(min-width:900px){
  .cs-reel{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--cs-accent) 50%,transparent) transparent}
  .cs-reel::-webkit-scrollbar{display:block;height:10px}
  .cs-reel::-webkit-scrollbar-track{background:transparent}
  .cs-reel::-webkit-scrollbar-thumb{border-radius:99px;border:3px solid transparent;background-clip:padding-box;
    background-color:color-mix(in srgb,var(--cs-accent) 42%,transparent)}
  .cs-reel:hover::-webkit-scrollbar-thumb{background-color:color-mix(in srgb,var(--cs-accent) 72%,transparent)}
}
.cs-reelwrap{position:relative}
.cs-reelnav{display:none}
@media(min-width:900px) and (hover:hover){
  .cs-reelnav{display:grid;place-items:center;position:absolute;top:50%;margin-top:-6px;transform:translateY(-50%);z-index:6;
    width:46px;height:46px;border-radius:50%;cursor:pointer;padding:0;
    background:rgba(12,15,22,.86);border:1px solid var(--cs-edge-2);color:var(--cs-ink);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--cs-shadow);
    transition:opacity .2s,background .2s,border-color .2s}
  .cs-reelnav--p{left:-14px}
  .cs-reelnav--n{right:-14px}
  .cs-reelnav:hover{background:rgba(19,24,34,.96);border-color:var(--cs-accent)}
  .cs-reelnav[disabled]{opacity:0;pointer-events:none}
  .cs-reelnav svg{width:17px;height:17px}
}
.cs-reelnav:focus-visible{outline:2px solid var(--cs-ink);outline-offset:3px}

/* ---- industry chips + industry index ---- */
/* keep .cs-wrap's 20px gutter: these are `cs-wrap cs-inds`, and a bare
   `padding:X 0 0` here would win the cascade and push the band edge to edge */
.cs-inds{padding:clamp(46px,8vw,86px) 20px 0}
/* the heading and its link sit on one row like the collection rows do, but
   this link is a few characters longer, so let it drop to its own line rather
   than push past the page gutter on a narrow phone */
.cs-inds .cs-collrow__head{flex-wrap:wrap}
.cs-inds--sub{padding:clamp(30px,5vw,50px) 20px 0}
.cs-indrow{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.cs-indchip{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:9px 15px;border-radius:999px;
  border:1px solid var(--cs-edge);background:var(--cs-panel);color:var(--cs-ink-2);font-size:13.5px;
  transition:color .2s,background .2s,border-color .2s}
.cs-indchip small{font-family:var(--cs-mono);font-size:11px;color:var(--cs-ink-3)}
.cs-indchip:hover{color:var(--cs-ink);background:var(--cs-panel-2);border-color:var(--cs-edge-2)}
.cs-indchip:hover small{color:var(--cs-accent-ink)}
.cs-indchip:focus-visible{outline:2px solid var(--cs-ink);outline-offset:2px}
.cs-indgroup{margin-top:clamp(34px,5vw,54px)}
/* same reason as .cs-inds above: "The whole collection" is longer than the
   hub's "View all", so give it a line of its own on a 320px screen instead of
   letting it run past the gutter */
.cs-indgroup .cs-collrow__head{flex-wrap:wrap}
.cs-indgrid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:10px}
@media(min-width:640px){ .cs-indgrid{grid-template-columns:repeat(2,1fr);gap:14px} }
@media(min-width:1000px){ .cs-indgrid{grid-template-columns:repeat(3,1fr)} }
.cs-indcard{position:relative;display:block;padding:22px;border-radius:var(--cs-radius);border:1px solid var(--cs-edge);
  background:linear-gradient(180deg,var(--cs-panel-2),var(--cs-panel));transition:border-color .25s,transform .25s var(--cs-ease)}
.cs-indcard:hover{border-color:var(--cs-edge-2)}
@media(hover:hover){ .cs-indcard:hover{transform:translateY(-3px)} }
.cs-indcard__n{position:absolute;top:18px;right:18px;font-family:var(--cs-mono);font-size:12px;color:var(--cs-ink-3)}
.cs-indcard b{display:block;font-size:1.12rem;font-weight:600;letter-spacing:-.02em;margin-bottom:7px;padding-right:38px}
.cs-indcard span:not(.cs-indcard__n){color:var(--cs-ink-2);font-size:14px;line-height:1.5}

/* ---- previous / next collection ---- */
.cs-nextprev{display:grid;gap:12px;margin-top:clamp(34px,5vw,54px)}
@media(min-width:640px){ .cs-nextprev{grid-template-columns:1fr 1fr;gap:16px} }
.cs-nextprev__a{display:block;padding:18px 20px;border-radius:var(--cs-radius);border:1px solid var(--cs-edge);
  background:var(--cs-panel);transition:border-color .2s,background .2s}
.cs-nextprev__a:hover{border-color:var(--cs-edge-2);background:var(--cs-panel-2)}
.cs-nextprev__a b{display:block;margin-top:9px;font-size:1.05rem;font-weight:600;letter-spacing:-.02em}
.cs-nextprev__a--n{text-align:right}

/* ---- the full catalog: rail + results ---- */
.cs-browse{padding:clamp(46px,8vw,90px) 20px 0}
.cs-browse__head h2{margin-top:14px}
/* minmax(0,1fr), not the implicit auto track: the filter rows are horizontal
   scrollers, and an auto track is floored at its items' min-content, which let
   the whole column blow out to the width of every chip laid end to end. */
.cs-browse__layout{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:26px}
.cs-browse__rail,.cs-browse__main{min-width:0}
@media(min-width:1100px){
  .cs-browse__layout{grid-template-columns:238px minmax(0,1fr);gap:34px;align-items:start}
  /* The rail takes 272px out of a row that is capped at 1160px, so four cards
     here could never be more than ~208px wide against ~266px everywhere else.
     Three keeps every card in the catalog the same size. */
  .cs-browse .cs-grid{grid-template-columns:repeat(3,1fr)}
}
/* The filters do nothing without JS, so they stay out of the page until
   cs-js lands. The grid underneath is complete either way. */
.cs-browse__rail{display:none}
.cs-js .cs-browse__rail{display:block}
@media(min-width:1100px){
  .cs-js .cs-browse__rail{position:sticky;top:74px;max-height:calc(100vh - 96px);overflow-y:auto;padding-right:8px;scrollbar-width:thin}
}
.cs-fset{margin-bottom:18px}
.cs-fset__k{font-family:var(--cs-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--cs-ink-3);margin-bottom:9px}
.cs-fset__row{display:flex;gap:8px;min-width:0;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cs-fset__row::-webkit-scrollbar{display:none}
@media(min-width:1100px){ .cs-fset__row{display:grid;gap:4px;overflow:visible;padding-bottom:0} }
.cs-browse__q{width:100%;padding:13px 15px;border-radius:12px;border:1px solid var(--cs-edge);background:var(--cs-panel);
  color:var(--cs-ink);font-family:inherit;font-size:15px;min-height:48px}
.cs-browse__q::placeholder{color:var(--cs-ink-3)}
.cs-browse__q:focus{border-color:var(--cs-edge-2);outline:2px solid var(--cs-ink);outline-offset:2px;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--cs-accent) 22%,transparent)}
.cs-fchip{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;white-space:nowrap;min-height:44px;
  padding:9px 13px;border-radius:11px;border:1px solid var(--cs-edge);background:var(--cs-panel);color:var(--cs-ink-2);
  font-family:inherit;font-size:13.5px;text-align:left;cursor:pointer;transition:color .18s,background .18s,border-color .18s}
.cs-fchip small{font-family:var(--cs-mono);font-size:11px;color:var(--cs-ink-3)}
.cs-fchip:hover{color:var(--cs-ink);background:var(--cs-panel-2);border-color:var(--cs-edge-2)}
.cs-fchip.is-on{color:var(--cs-ink);background:color-mix(in srgb,var(--cs-accent) 24%,transparent);
  border-color:color-mix(in srgb,var(--cs-accent) 48%,transparent)}
.cs-fchip.is-on small{color:var(--cs-accent-ink)}
.cs-fchip:focus-visible{outline:2px solid var(--cs-ink);outline-offset:2px}
@media(min-width:1100px){ .cs-fchip{min-height:36px;padding:7px 11px;font-size:13px;border-radius:9px} }

.cs-browse__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:13px;margin-bottom:16px;border-bottom:1px solid var(--cs-edge)}
.cs-browse__count{font-family:var(--cs-mono);font-size:12px;letter-spacing:.05em;color:var(--cs-ink-3)}
.cs-browse__tools{display:none;align-items:center;flex-wrap:wrap;gap:8px}
.cs-js .cs-browse__tools{display:flex}
.cs-sel{min-height:44px;padding:0 34px 0 13px;border-radius:11px;border:1px solid var(--cs-edge);background:var(--cs-panel);
  color:var(--cs-ink-2);font-family:inherit;font-size:13.5px;cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B93A2' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:15px}
.cs-sel:hover{color:var(--cs-ink);border-color:var(--cs-edge-2)}
.cs-sel:focus-visible{outline:2px solid var(--cs-ink);outline-offset:2px}
.cs-sel option{background:#11151D;color:var(--cs-ink)}
.cs-tbtn{min-height:44px;padding:0 14px;border-radius:11px;border:1px solid var(--cs-edge);background:transparent;
  color:var(--cs-ink-2);font-family:inherit;font-size:13.5px;cursor:pointer;transition:color .18s,border-color .18s}
.cs-tbtn:hover{color:var(--cs-ink);border-color:var(--cs-edge-2)}
.cs-tbtn:focus-visible{outline:2px solid var(--cs-ink);outline-offset:2px}
.cs-view{display:inline-flex;border:1px solid var(--cs-edge);border-radius:11px;overflow:hidden;background:var(--cs-panel)}
.cs-vbtn{min-height:44px;padding:0 15px;border:none;background:transparent;color:var(--cs-ink-3);
  font-family:inherit;font-size:13.5px;cursor:pointer;transition:color .18s,background .18s}
.cs-vbtn:hover{color:var(--cs-ink)}
.cs-vbtn.is-on{color:var(--cs-ink);background:var(--cs-panel-2)}
.cs-vbtn:focus-visible{outline:2px solid var(--cs-ink);outline-offset:-2px}
.cs-browse__none{padding:34px 24px;border-radius:var(--cs-radius);border:1px dashed var(--cs-edge-2);text-align:center}
.cs-browse__none b{display:block;font-size:1.15rem;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.cs-browse__none p{color:var(--cs-ink-2);font-size:14.5px;max-width:52ch;margin:0 auto}
.cs-browse__none-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
/* The tagline ships inside every browse card so search can match it. It is
   hidden by default and earns its way on screen two ways: always in the list
   view, and on hover in the grid view where a pointer exists. A touch device
   has no hover state, so a phone never sees this branch. */
.cs-card__tag{display:none;color:var(--cs-ink-2);font-size:13px;line-height:1.45}
@media(hover:hover) and (min-width:900px){
  .cs-browse:not(.is-list) .cs-grid .cs-card__tag{display:block;max-height:0;opacity:0;margin-top:0;overflow:hidden;
    transition:max-height .3s var(--cs-ease),opacity .3s var(--cs-ease),margin-top .3s var(--cs-ease)}
  .cs-browse:not(.is-list) .cs-grid .cs-card:hover .cs-card__tag,
  .cs-browse:not(.is-list) .cs-grid .cs-card:focus-visible .cs-card__tag{max-height:7em;opacity:1;margin-top:7px}
  .cs-browse:not(.is-list) .cs-grid .cs-card:hover .cs-card__scrim,
  .cs-browse:not(.is-list) .cs-grid .cs-card:focus-visible .cs-card__scrim{
    background:linear-gradient(180deg,rgba(8,10,15,0) 8%,rgba(7,9,13,.72) 44%,rgba(6,8,12,.95))}
}
.cs-browse .cs-card:focus-visible{outline:2px solid var(--cs-ink);outline-offset:3px}

/* list view: same cards, read as rows. Scoped to .is-list so no other
   card on the site is affected. */
.cs-browse.is-list .cs-grid{grid-template-columns:1fr;gap:10px}
.cs-browse.is-list .cs-card{display:flex;align-items:center;gap:15px;padding:11px;background:var(--cs-panel);box-shadow:none}
.cs-browse.is-list .cs-card__fig{flex:none;width:64px;height:64px;aspect-ratio:auto;border-radius:12px}
.cs-browse.is-list .cs-card__fig .cs-pipe,.cs-browse.is-list .cs-card__fig .cs-fig__mark{display:none}
.cs-browse.is-list .cs-card__scrim{display:none}
.cs-browse.is-list .cs-card__meta{position:static;padding:0;flex:1 1 auto;min-width:0}
.cs-browse.is-list .cs-card__nm{font-size:1rem}
.cs-browse.is-list .cs-card__tag{display:block;max-height:none;opacity:1;margin-top:5px;font-size:13.5px}
.cs-browse.is-list .cs-card__pill{position:static;flex:none;order:3;margin-left:auto}
.cs-browse.is-list .cs-card:hover{transform:none;background:var(--cs-panel-2)}
@media(min-width:760px){
  .cs-browse.is-list .cs-card{padding:13px;gap:18px}
  .cs-browse.is-list .cs-card__fig{width:78px;height:78px}
}

/* ---- product hero for the 89 systems with no image -----------------
   The plate used to hold two large letters and nothing else. From 860px
   (where the hero splits into two columns and the plate gets big enough
   to read) it carries the product's own parts list instead. Below that
   the phone renders exactly what it rendered before: the monogram. */
.cs-parts{display:none}
@media(min-width:860px){
  .cs-prod__fig .cs-parts{display:flex;flex-direction:column;justify-content:center;gap:13px;
    position:relative;z-index:2;width:100%;height:100%;padding:clamp(20px,3.4vw,32px);overflow:hidden}
  .cs-fig.has-img .cs-parts{display:none}
}
.cs-parts__k{font-family:var(--cs-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--cs-ink-3)}
.cs-parts__l{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cs-parts__l li{display:flex;align-items:flex-start;gap:13px;font-size:13.5px;line-height:1.45;color:var(--cs-ink-2)}
.cs-parts__sq{flex:none;width:9px;height:9px;margin-top:6px;border-radius:3px;background:var(--c,var(--cs-accent));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--c,var(--cs-accent)) 18%,transparent)}


/* == CSF2 generated figure archetypes == */
.csf{position:relative;z-index:1;width:86%;max-width:340px;margin:0 auto;font-size:12px;color:#EAF0FB;display:flex;flex-direction:column;gap:8px}
.csf--mini{width:88%;font-size:10.5px;gap:6px;transform:scale(.92)}
.csf__bar{display:flex;align-items:center;gap:7px;font-weight:800;font-size:.92em;letter-spacing:.02em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csf__bar i{width:8px;height:8px;border-radius:50%;background:var(--c,#6C7A90);box-shadow:0 0 10px color-mix(in srgb,var(--c,#6C7A90) 70%,transparent);flex:0 0 auto}
.csf__cap{font-size:.82em;font-weight:600;color:rgba(255,255,255,.55);line-height:1.35}
.csf__chip{align-self:flex-start;font-size:.8em;font-weight:800;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#fff}
.csf__chip--paid{background:color-mix(in srgb,#12A150 38%,transparent);border-color:#12A150}
.csf__msg{max-width:86%;padding:7px 10px;border-radius:11px;line-height:1.4;font-weight:600}
.csf__msg--in{align-self:flex-start;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-bottom-left-radius:4px}
.csf__msg--out{align-self:flex-end;background:color-mix(in srgb,var(--c,#3D4A7A) 55%,transparent);border:1px solid color-mix(in srgb,var(--c,#3D4A7A) 80%,transparent);border-bottom-right-radius:4px}
.csf__thread{display:flex;flex-direction:column;gap:7px}
.csf__typing{align-self:flex-end;display:flex;gap:4px;padding:7px 10px;border-radius:11px;background:rgba(255,255,255,.07)}
.csf__typing i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.6)}
.csf__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.csf__tile{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:7px 8px}
.csf__tile b{display:block;font-size:1.25em;letter-spacing:-.02em;color:#fff}
.csf__tile span{display:block;font-size:.72em;color:rgba(255,255,255,.55);margin-top:2px;line-height:1.25}
.csf__bars{display:flex;align-items:flex-end;gap:6px;height:44px}
.csf__bars i{flex:1;border-radius:3px 3px 0 0;background:color-mix(in srgb,var(--c,#6C7A90) 75%,#fff 6%);height:var(--h);transform-origin:bottom}
.csf__ck{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.csf__tick{width:15px;height:15px;border-radius:4px;border:1.4px solid rgba(255,255,255,.35);display:grid;place-items:center;flex:0 0 auto}
.csf__tick svg{width:70%;height:70%;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22}
.csf__slot{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11)}
.csf__slot b{font-variant-numeric:tabular-nums;color:#fff}
.csf__slot span{color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csf__cams{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.csf__cam{position:relative;height:38px;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04))}
.csf__cam span{position:absolute;left:6px;top:5px;font-size:.68em;font-weight:800;letter-spacing:.06em;color:rgba(255,255,255,.66)}
.csf__cam::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c,#4D5B63) 55%,transparent),transparent);transform:translateX(-100%)}
.csf__sheet{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);border-radius:9px;padding:10px;display:flex;flex-direction:column;gap:7px}
.csf__sheet i{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.35);width:var(--w);transform-origin:left}
.csf__ptabs{display:flex;gap:4px;background:rgba(255,255,255,.07);border-radius:9px;padding:4px}
.csf__ptabs span{flex:1;text-align:center;padding:5px 2px;border-radius:7px;font-weight:700;font-size:.85em;color:rgba(255,255,255,.6)}
.csf__ptabs span.on{background:color-mix(in srgb,var(--c,#2F6F6A) 60%,transparent);color:#fff}
.csf__prow{padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);color:rgba(255,255,255,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csf__stock{display:flex;align-items:center;gap:8px}
.csf__stock span{flex:0 0 42%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.75)}
.csf__stock i{flex:1;height:7px;border-radius:4px;background:rgba(255,255,255,.12);position:relative;overflow:hidden}
.csf__stock i::after{content:"";position:absolute;inset:0;width:var(--w);border-radius:4px;background:color-mix(in srgb,var(--c,#3F6B3A) 80%,#fff 8%);transform-origin:left}
.csf__stock i.is-low::after{background:#D9820A}
.csf__rings{position:relative;width:110px;height:110px;margin:6px auto 0;display:grid;place-items:center}
.csf__rings i{position:absolute;inset:0;margin:auto;width:26px;height:26px;border-radius:50%;border:2px solid var(--c,#8A5A3C);opacity:.4}
.csf__rings b{position:relative;z-index:1;font-size:.82em;font-weight:800;background:color-mix(in srgb,var(--c,#8A5A3C) 70%,#000 10%);color:#fff;border-radius:999px;padding:5px 11px;white-space:nowrap}
.csf__order{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11)}
.csf__order b{color:#5DDF94}

@keyframes csfIn{0%,4%{opacity:0;transform:translateY(7px)}14%,86%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(7px)}}
@keyframes csfTick{0%,22%{stroke-dashoffset:22}34%,86%{stroke-dashoffset:0}98%,100%{stroke-dashoffset:22}}
@keyframes csfTickBox{0%,22%{background:transparent;border-color:rgba(255,255,255,.35)}34%,86%{background:#12A150;border-color:#12A150}98%,100%{background:transparent;border-color:rgba(255,255,255,.35)}}
@keyframes csfBar{0%,6%{transform:scaleY(.1)}30%,84%{transform:scaleY(1)}96%,100%{transform:scaleY(.1)}}
@keyframes csfFill{0%,8%{transform:scaleX(0)}36%,84%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
@keyframes csfSweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
@keyframes csfType{0%,30%{opacity:1}45%,100%{opacity:0}}
@keyframes csfDot{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes csfRing{0%{transform:scale(.4);opacity:.85}100%{transform:scale(4);opacity:0}}
@keyframes csfWrite{0%,6%{transform:scaleX(0)}40%,86%{transform:scaleX(1)}98%,100%{transform:scaleX(0)}}

@media(prefers-reduced-motion:no-preference){
  .csf__msg--in{animation:csfIn 5.4s ease infinite}
  .csf__typing{animation:csfType 5.4s ease infinite .9s}
  .csf__typing i{animation:csfDot .9s ease infinite}
  .csf__typing i:nth-child(2){animation-delay:.15s}
  .csf__typing i:nth-child(3){animation-delay:.3s}
  .csf__msg--out{animation:csfIn 5.4s ease infinite 1.6s}
  .csf__tile{animation:csfIn 5.6s ease infinite calc(var(--i)*.35s)}
  .csf__bars i{animation:csfBar 5.6s ease infinite calc(var(--i,0)*1ms + .6s)}
  .csf__ck{animation:csfIn 5.6s ease infinite calc(var(--i)*.3s)}
  .csf__ck .csf__tick{border-radius:4px}
  .csf__ck .csf__tick{animation:csfTickBox 5.6s ease infinite calc(var(--i)*.45s + .8s)}
  .csf__ck .csf__tick svg{animation:csfTick 5.6s ease infinite calc(var(--i)*.45s + .8s)}
  .csf__slot{animation:csfIn 5.6s ease infinite calc(var(--i)*.4s)}
  .csf__cam::after{animation:csfSweep 3.6s ease infinite calc(var(--i)*.5s)}
  .csf__sheet i{animation:csfWrite 5.6s ease infinite calc(var(--i)*.5s)}
  .csf__prow{animation:csfIn 5.6s ease infinite calc(var(--i)*.45s + .4s)}
  .csf__stock i::after{animation:csfFill 5.6s ease infinite calc(var(--i)*.4s)}
  .csf__rings i:nth-child(1){animation:csfRing 3.2s ease-out infinite}
  .csf__rings i:nth-child(2){animation:csfRing 3.2s ease-out infinite 1.05s}
  .csf__rings i:nth-child(3){animation:csfRing 3.2s ease-out infinite 2.1s}
  .csf__order{animation:csfIn 5.6s ease infinite calc(var(--i)*.5s)}
  .csf__chip--late{animation:csfIn 5.6s ease infinite 1.9s}
  .csf__chip--paid{animation:csfIn 5.6s ease infinite 1.6s}
}


/* == mobile: every media surface is round-cornered == */
@media(max-width:760px){
  /* .cs-fig inherits its radius from the card it sits in; if a card ever
     ships without one, the figure would render as a hard square over a
     rounded border. This is the floor so that can never happen. */
  .cs-fig{border-radius:18px}
  .cs-card,.cs-reel__card,.cs-shot{border-radius:18px;overflow:hidden}
  .cs-prod__fig{border-radius:20px;overflow:hidden}
  .cs-shot__img{border-radius:18px}
}