/* EOTAK homepage, cinematic scale, live contour terrain.
   Deep ground, enormous type, full-bleed plates, almost no chrome. */

:root,:root[data-theme="dark"]{
  --navh:66px;
  --fade-edge:1;      /* alpha of the ground at a plate's top/bottom edge */
  --fade-mid:.26;     /* alpha over the middle of a photograph           */
  --fade-side:.86;    /* alpha over the copy side of a photograph        */
}
:root[data-theme="light"]{
  --fade-edge:1; --fade-mid:.52; --fade-side:.92;
}

.sec{padding:clamp(96px,13vh,190px) 0}
.h-huge{font-size:clamp(40px,5.6vw,80px);line-height:.96;letter-spacing:-.042em;font-weight:800}
.h-big{font-size:clamp(34px,6.4vw,86px);line-height:.96;letter-spacing:-.042em;font-weight:800}
.cop{color:var(--cop3)}
.quiet{color:var(--fg2);font-weight:350;font-size:clamp(16px,1.5vw,20px);line-height:1.55}

/* full bleed */
.fb{position:relative;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);overflow:hidden}
.fb > img{width:100%;height:100%;object-fit:cover;display:block}

/* =========================================================
   HERO, the live contour field. Sized to terrain's
   proportion: 76vh, never a fixed height.
   ========================================================= */
.hero{position:relative;min-height:76vh;display:flex;flex-direction:column;
  justify-content:flex-start;overflow:hidden;
  margin-top:calc(-1 * var(--navh));
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
#terrain{position:absolute;inset:0;width:100%;height:100%;z-index:0}
/* designed fallback when WebGL is unavailable */
.hero.no-gl::before,.closer.no-gl::before{content:"";position:absolute;inset:0;z-index:0;
  background:var(--fallback)}

/* faint graticule over the field */
.grat{position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(var(--grat-a) 1px,rgba(0,0,0,0) 1px),
                   linear-gradient(90deg,var(--grat-a) 1px,rgba(0,0,0,0) 1px);
  background-size:110px 110px;background-position:center;
  -webkit-mask-image:radial-gradient(86% 74% at 52% 50%,#000 0%,rgba(0,0,0,0) 92%);
          mask-image:radial-gradient(86% 74% at 52% 50%,#000 0%,rgba(0,0,0,0) 92%)}
.grat::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--grat-b) 1px,rgba(0,0,0,0) 1px),
                   linear-gradient(90deg,var(--grat-b) 1px,rgba(0,0,0,0) 1px);
  background-size:550px 550px;background-position:center}

/* the scrim: settles the field vertically and keeps the type column legible */
.scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:
  linear-gradient(90deg,rgba(var(--blk-rgb),.88) 0%,rgba(var(--blk-rgb),.60) 32%,rgba(var(--blk-rgb),.16) 58%,rgba(var(--blk-rgb),0) 78%),
  linear-gradient(180deg,rgba(var(--blk-rgb),.92) 0%,rgba(var(--blk-rgb),.40) 24%,rgba(var(--blk-rgb),.06) 46%,rgba(var(--blk-rgb),.58) 84%,rgba(var(--blk-rgb),1) 100%)}

.hero-in{position:relative;z-index:4;width:100%;
  padding-top:clamp(96px,10vh,124px);padding-bottom:28px;
  max-width:var(--wrap);margin:0 auto}
.hero-in .wrapx{padding:0 var(--sp7);max-width:min(1000px,74vw)}
.hero h1{margin-top:clamp(16px,2.4vh,26px);text-shadow:var(--hero-sh)}
.hero .lede{text-shadow:var(--hero-sh)}
.cta{display:flex;gap:16px;margin-top:clamp(24px,3.4vh,38px);flex-wrap:wrap;align-items:center}

/* hero stat rail, hairline only, no box. Tabular figures keep the columns true
   now that the face is proportional rather than monospaced. */
.hero-rail{margin:clamp(30px,4.4vh,52px) 0 0;padding:clamp(16px,2.4vh,24px) var(--sp7) 0;
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp5)}
.hero-rail .k{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mute);font-variant-numeric:tabular-nums}
.hero-rail .v{font-size:15px;font-weight:600;margin-top:8px;color:var(--fg);
  letter-spacing:-.015em;line-height:1.3}
.hero-rail .v.c{color:var(--cop3)}

/* the bridge into pricing */
.hero-lead{padding:clamp(22px,3.4vh,40px) var(--sp7) 0;
  font-size:clamp(18px,2vw,26px);font-weight:350;letter-spacing:-.022em;line-height:1.3;
  color:var(--fg2)}
.hero-lead span{color:var(--cop3);font-weight:700}

/* =========================================================
   PRICING
   ========================================================= */
#pricing{padding-top:clamp(64px,10vh,130px);padding-bottom:clamp(96px,14vh,190px)}
#pricing h2{font-size:clamp(32px,5.2vw,68px);line-height:.96;letter-spacing:-.042em;margin-top:clamp(16px,2.4vh,26px)!important}
#pricing .lede{font-size:clamp(16px,1.5vw,20px)!important;color:var(--fg2);font-weight:350;
  max-width:38ch!important;margin-top:clamp(16px,2.4vh,24px)!important}
/* Two plates now -- one plan and one addon -- where there were three tiers. The
   rhythm belongs to the section, not to the column count, so .grid2 gets the
   same gap and top margin .grid3 had rather than falling back to the generic
   --sp5 gutter and reading cramped against the headline. */
#pricing .grid3,#pricing .grid2{gap:clamp(26px,4vw,56px);margin-top:clamp(46px,7vh,88px)!important}
/* The plates were bare columns: a hairline on top, no side or bottom padding, and the
   wash painted as a BACKGROUND. A background is painted inside the border box, so it
   stopped dead on all three open edges -- the Enterprise copper read as a translucent
   rectangle pasted onto the section rather than as light. Two changes fix it: the plate
   gets a real surface and real padding, and the wash moves to a pseudo-element that is
   wider and taller than the plate, so its falloff completes in open space. */
#pricing .tier{position:relative;isolation:isolate;
  background:linear-gradient(180deg,rgba(var(--ovr-rgb),.055),rgba(var(--ovr-rgb),.014));
  border:1px solid var(--hair2);border-top:1px solid var(--line2);
  border-radius:var(--r-md);box-shadow:var(--lit),var(--sh-card);
  padding:clamp(28px,3.4vh,40px) clamp(24px,2vw,32px) clamp(30px,4vh,44px);
  transition:border-color var(--d-hover) var(--e-out),box-shadow var(--d-hover) var(--e-out)}
#pricing .tier:hover{transform:none;border-top-color:rgba(var(--cop4-rgb),.55);
  box-shadow:var(--lit),var(--sh-cardh)}

/* The bleed. Sized past the plate on every open edge and ending on an explicit
   zero-alpha stop of the SAME hue -- ending on `transparent` interpolates through
   transparent-black and puts the hard edge straight back. z-index:-1 under
   isolation:isolate keeps it behind the plate's own surface but inside this element's
   stacking context, and nothing in the ancestor chain clips it. */
#pricing .tier::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-14% -18% -26%;
  background:radial-gradient(52% 42% at 50% 12%,
    rgba(var(--ovr-rgb),.05),rgba(var(--ovr-rgb),0) 70%)}

#pricing .tier.feat{border-color:rgba(var(--cop4-rgb),.30);
  border-top-color:rgba(var(--cop4-rgb),.75);
  background:linear-gradient(180deg,rgba(var(--cop-rgb),.10),rgba(var(--cop-rgb),.02) 62%),
             linear-gradient(180deg,rgba(var(--ovr-rgb),.055),rgba(var(--ovr-rgb),.014))}
#pricing .tier.feat:hover{border-color:rgba(var(--cop4-rgb),.46)}
#pricing .tier.feat::before{inset:-18% -22% -30%;
  background:radial-gradient(54% 46% at 50% 10%,
    rgba(var(--cop-rgb),.34),rgba(var(--cop-rgb),.11) 42%,rgba(var(--cop-rgb),0) 74%)}
#pricing .price{font-size:clamp(44px,5.4vw,72px);letter-spacing:-.045em;margin-top:clamp(22px,3.4vh,34px)!important}
#pricing .tier ul{font-size:14px;line-height:2.1;margin-top:clamp(20px,3vh,28px)}
#pricing .tier .btn,#pricing .tier .btn2{align-self:flex-start;justify-content:flex-start!important;
  margin-top:clamp(26px,4vh,40px)!important}
#pricing .per{color:var(--mute)}

/* =========================================================
   FULL-BLEED STATEMENT PLATE
   ========================================================= */
.state{position:relative;height:clamp(460px,84vh,820px)}
.state > img{position:absolute;inset:0;filter:var(--img-filter-deep)}
.state .fade{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(var(--blk-rgb),var(--fade-edge)) 0%,rgba(var(--blk-rgb),calc(var(--fade-mid) * .5)) 26%,rgba(var(--blk-rgb),var(--fade-mid)) 58%,rgba(var(--blk-rgb),var(--fade-edge)) 100%),
  linear-gradient(90deg,rgba(var(--blk-rgb),var(--fade-edge)) 0%,rgba(var(--blk-rgb),0) 18%,rgba(var(--blk-rgb),0) 82%,rgba(var(--blk-rgb),var(--fade-edge)) 100%)}
.state .fade.side{background:
  linear-gradient(180deg,rgba(var(--blk-rgb),var(--fade-edge)) 0%,rgba(var(--blk-rgb),calc(var(--fade-mid) * .4)) 24%,rgba(var(--blk-rgb),var(--fade-mid)) 60%,rgba(var(--blk-rgb),var(--fade-edge)) 100%),
  linear-gradient(90deg,rgba(var(--blk-rgb),var(--fade-side)) 0%,rgba(var(--blk-rgb),calc(var(--fade-side) * .3)) 54%,rgba(var(--blk-rgb),var(--fade-edge)) 100%)}
.state .copy{position:relative;z-index:3;height:100%;display:flex;align-items:center;
  max-width:var(--wrap);margin:0 auto;padding:0 var(--sp7)}
.state .copy.low{align-items:flex-end;padding-bottom:clamp(50px,9vh,110px)}
.state h2,.state .quiet{text-shadow:var(--hero-sh)}

/* =========================================================
   CHAPTERS (software / hardware)
   ========================================================= */
.chapter{margin-top:clamp(64px,11vh,150px)}
.ch-head{display:flex;align-items:baseline;gap:clamp(16px,3vw,36px);
  padding-bottom:clamp(18px,2.6vh,28px);border-bottom:1px solid rgba(var(--cop4-rgb),.34)}
.ch-head .n{font-family:var(--font-mono);font-size:11px;letter-spacing:.3em;
  color:var(--accent-txt);flex:none;font-variant-numeric:tabular-nums}
.ch-head h3{font-size:clamp(30px,5.2vw,66px);font-weight:800;letter-spacing:-.042em;line-height:1}
.ch-note{margin-top:clamp(20px,3vh,32px);max-width:46ch;color:var(--fg2);
  font-weight:350;font-size:clamp(17px,1.9vw,24px);line-height:1.42;letter-spacing:-.018em}

.dl{margin-top:clamp(30px,5vh,58px)}
.dl > div{display:grid;grid-template-columns:minmax(150px,22%) 1fr;gap:clamp(18px,3vw,52px);
  padding:clamp(15px,2.2vh,22px) 0;border-top:1px solid var(--hair2)}
.dl .nm{font-size:clamp(16px,1.7vw,21px);font-weight:650;letter-spacing:-.022em}
.dl .ds{color:var(--mute);font-size:15px;line-height:1.62;max-width:64ch}

/* floating app screens */
.apps{position:relative;display:flex;justify-content:center;align-items:center;
  gap:clamp(16px,4vw,68px);min-height:clamp(360px,54vh,580px);margin-top:clamp(28px,5vh,58px)}
.apps figure{position:relative;text-align:center}
.apps figure.a,.apps figure.c{transform:translateY(26px)}
.apps img{width:clamp(96px,16.5vw,208px);border-radius:clamp(12px,1.6vw,20px);
  border:1px solid var(--line);box-shadow:var(--lit),var(--sh-deep)}
.apps figcaption{margin-top:16px;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}

/* =========================================================
   THE COPPER BLOOM
   One shape, one hue, ending on an explicit zero-alpha stop of
   that same hue and running well past its own box. `transparent`
   is never used here: it interpolates through transparent-black
   and lays a visible dark ring at the falloff. Nothing in the
   ancestor chain may clip it, see .stage / .vfig overflow.
   ========================================================= */
.glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:150%;height:180%;pointer-events:none;z-index:0;border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(var(--cop-rgb),.34) 0%,
    rgba(var(--cop-rgb),.24) 32%,
    rgba(var(--cop-rgb),.11) 58%,
    rgba(var(--cop-rgb),.03) 80%,
    rgba(var(--cop-rgb),0) 100%);
  filter:blur(38px)}
:root[data-theme="light"] .glow{background:radial-gradient(closest-side,
    rgba(var(--cop-rgb),.20) 0%,
    rgba(var(--cop-rgb),.13) 34%,
    rgba(var(--cop-rgb),.06) 60%,
    rgba(var(--cop-rgb),.015) 82%,
    rgba(var(--cop-rgb),0) 100%)}
.apps .glow{width:min(940px,104%);height:86%}

/* =========================================================
   HARDWARE, one product per row, full width, alternating.
   ========================================================= */
.vrows{margin-top:clamp(40px,7vh,84px);display:flex;flex-direction:column;
  gap:clamp(56px,10vh,132px)}
.vrow{display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(28px,5vw,88px);
  align-items:center}
.vrow:nth-child(even) .vfig{order:2}
.vrow:nth-child(even) .vtxt{order:1}
.vfig{position:relative;display:flex;align-items:center;justify-content:center;
  overflow:visible;min-height:clamp(230px,36vh,420px)}
.vfig img{position:relative;z-index:2;width:auto;height:auto;
  max-width:100%;max-height:var(--cap,clamp(240px,44vh,470px));object-fit:contain;
  filter:drop-shadow(0 30px 60px rgba(var(--sh-rgb),.6))}
:root[data-theme="light"] .vfig img{filter:drop-shadow(0 24px 46px rgba(var(--sh-rgb),.4))}
/* Per-product caps: the cut-outs frame different numbers of units, so a single
   shared max-height makes the one-unit VICE Core read far larger than its peers.
   These caps equalise PERCEIVED product size, not frame height. */
.vfig img[src*="vice-glock"]{--cap:clamp(230px,42vh,440px)}
.vfig img[src*="vice-core"] {--cap:clamp(196px,35vh,378px)}
/* vice-core-2 is a two-unit cut-out and ALSO matches [src*="vice-core"], so it needs
   its own rule after that one. Paired with the grip panel it gets a smaller cap: the
   pair has to read as one product, not as two products in a row. */
.vfig img[src*="vice-core-2"]{--cap:clamp(150px,26vh,286px)}
/* A figure holding two cut-outs lays them out side by side and wraps on narrow screens. */
.vfig:has(img + img){gap:clamp(14px,2vw,30px);flex-wrap:wrap}
.vfig img[src*="vice-urs"]  {--cap:clamp(212px,38vh,404px)}
.vtxt{position:relative;z-index:3}
.vtxt .n{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--accent-txt);font-variant-numeric:tabular-nums}
.vtxt h3{font-size:clamp(28px,3.8vw,52px);font-weight:800;letter-spacing:-.038em;
  line-height:1.02;margin-top:14px}
.vtxt p{margin-top:16px;color:var(--fg2);font-size:clamp(15px,1.3vw,18px);
  line-height:1.6;max-width:38ch;font-weight:350}
.vtxt .meta{margin-top:20px;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}

/* sensor -> server chain band */
.chain{height:clamp(260px,42vh,460px);margin-top:clamp(60px,10vh,130px)}
.chain > img{position:absolute;inset:0;filter:var(--img-filter-deep)}
.chain .fade{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(var(--blk-rgb),var(--fade-edge)) 0%,rgba(var(--blk-rgb),var(--fade-mid)) 40%,rgba(var(--blk-rgb),var(--fade-edge)) 100%),
  linear-gradient(90deg,rgba(var(--blk-rgb),var(--fade-edge)) 0%,rgba(var(--blk-rgb),0) 22%,rgba(var(--blk-rgb),0) 78%,rgba(var(--blk-rgb),var(--fade-edge)) 100%)}
.chaincap{position:relative;z-index:3;height:100%;display:flex;align-items:flex-end;
  max-width:var(--wrap);margin:0 auto;padding:0 var(--sp7) clamp(26px,4vh,44px);
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--cop3)}

/* =========================================================
   MARS
   ========================================================= */
.mars-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,6vw,96px);align-items:end}
.mars-head h2{font-size:clamp(34px,5.4vw,72px)}
.mars-lead{max-width:52ch}
.mars-frame{position:relative;margin-top:clamp(42px,7vh,84px);border-radius:var(--r-lg);
  overflow:hidden;border:1px solid rgba(var(--cop4-rgb),.28);
  box-shadow:var(--lit),var(--sh-deep),0 0 130px -44px rgba(var(--cop-rgb),.45)}
.mars-bar{display:flex;align-items:center;gap:14px;padding:14px clamp(16px,2vw,24px);
  background:var(--surf-bar);border-bottom:1px solid var(--hair2);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute)}
.mars-bar .dot{width:7px;height:7px;border-radius:50%;background:var(--cop3);flex:none;
  box-shadow:0 0 12px rgba(var(--cop3-rgb),.9)}
.mars-bar .rt{margin-left:auto;color:var(--mute)}
.mars-frame img{width:100%;display:block}
.mars-kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,44px);
  margin-top:clamp(32px,5vh,60px);padding-top:clamp(24px,3.6vh,38px);
  border-top:1px solid var(--hair2)}
.mars-kv .v{font-size:clamp(22px,2.6vw,34px);letter-spacing:-.02em}

/* =========================================================
   SEGMENTS
   ========================================================= */
.sols{margin-top:clamp(40px,7vh,84px)}
.sol{display:flex;align-items:baseline;gap:clamp(18px,3vw,48px);
  padding:clamp(20px,3.2vh,34px) 0;border-top:1px solid var(--hair2);
  transition:color var(--d-hover) var(--e-out)}
.sol .n{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.26em;
  color:var(--mute);flex:none;width:34px;font-variant-numeric:tabular-nums}
.sol .t{font-size:clamp(26px,3.6vw,46px);font-weight:800;letter-spacing:-.036em;
  color:var(--fg);flex:none;min-width:min(46vw,340px);
  transition:color var(--d-hover) var(--e-out)}
.sol .d{color:var(--mute);font-size:15px;line-height:1.55}
.sol:hover .t{color:var(--cop3)}

/* =========================================================
   CLOSER, the field again, calmer
   ========================================================= */
.closer{position:relative;min-height:clamp(420px,66vh,680px);display:flex;align-items:center;
  justify-content:center;text-align:center;overflow:hidden;
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
.closer canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  opacity:.82;transform:scaleY(-1)}
.closer .grat{opacity:.6}
.closer .fade{position:absolute;inset:0;z-index:2;background:
  linear-gradient(180deg,rgba(var(--blk-rgb),1) 0%,rgba(var(--blk-rgb),.50) 30%,rgba(var(--blk-rgb),.56) 64%,rgba(var(--blk-rgb),1) 100%),
  radial-gradient(66% 58% at 50% 52%,rgba(var(--blk-rgb),.62),rgba(var(--blk-rgb),.30))}
.closer .in{position:relative;z-index:4;padding:0 var(--sp7);max-width:var(--wrap)}
.closer h2{text-shadow:var(--hero-sh)}

/* =========================================================
   STYLE GUIDE, the system, documented on the page it describes
   ========================================================= */
.sg{border-top:1px solid var(--line2);background:var(--bg2);position:relative;z-index:2;
  padding:clamp(64px,9vh,110px) 0 clamp(72px,10vh,130px)}
.sg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;
  padding-bottom:clamp(24px,3.4vh,36px);border-bottom:1px solid var(--line2)}
.sg-head h2{font-size:clamp(28px,3.4vw,46px);letter-spacing:-.038em}
.sg-head p{color:var(--mute);font-size:14px;line-height:1.6;max-width:44ch;margin-top:12px}
.sg-blk{margin-top:clamp(40px,6vh,72px)}
.sg-t{display:flex;align-items:baseline;gap:16px;margin-bottom:var(--sp5)}
.sg-t .i{font-family:var(--font-mono);font-size:10px;letter-spacing:.26em;color:var(--accent-txt);
  font-variant-numeric:tabular-nums}
.sg-t h3{font-size:19px;font-weight:700;letter-spacing:-.022em}
.sg-t .ln{flex:1;height:1px;background:var(--hair2)}
.sg-note{color:var(--mute);font-size:13.5px;line-height:1.65;max-width:64ch;margin-bottom:var(--sp5)}

.sw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:var(--sp4)}
.sw{border:1px solid var(--hair2);border-radius:var(--r-sm);overflow:hidden;background:var(--bg3)}
.sw .chip{height:76px;border-bottom:1px solid var(--hair2)}
.sw .meta{padding:11px 13px 13px}
.sw .nm{font-size:12.5px;font-weight:650;letter-spacing:-.01em}
.sw .hx{font-family:var(--font-mono);font-size:11px;color:var(--mute);margin-top:4px;
  font-variant-numeric:tabular-nums;letter-spacing:.04em}
.sw .cr{font-family:var(--font-mono);font-size:10.5px;margin-top:6px;color:var(--fg2);
  font-variant-numeric:tabular-nums;letter-spacing:.04em}
.sw .cr b{color:var(--accent-txt);font-weight:600}
.sw .cr .fail{color:var(--mute)}

.ty-row{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:clamp(18px,3vw,44px);
  padding:var(--sp5) 0;border-top:1px solid var(--hair2);align-items:baseline}
.ty-row .spec{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
  color:var(--mute);line-height:1.9;font-variant-numeric:tabular-nums}
.ty-row .spec b{color:var(--fg2);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.ty-row .demo{min-width:0;overflow:hidden;text-overflow:ellipsis}

.sg-row{display:flex;flex-wrap:wrap;gap:var(--sp4);align-items:center}
.sg-cell{border:1px solid var(--hair2);border-radius:var(--r-sm);padding:20px;
  background:var(--bg3);display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.sg-cell .lab{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute)}

.sp-scale{display:flex;flex-direction:column;gap:9px}
.sp-item{display:grid;grid-template-columns:74px 62px 1fr;gap:14px;align-items:center;
  font-family:var(--font-mono);font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums}
.sp-item .bar{height:11px;border-radius:2px;background:linear-gradient(90deg,var(--accent),rgba(var(--cop-rgb),.28));
  max-width:100%}
.sp-item b{color:var(--fg);font-weight:500}

.mo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp4)}
.mo{border:1px solid var(--hair2);border-radius:var(--r-sm);padding:16px 18px;background:var(--bg3)}
.mo .k{font-family:var(--font-mono);font-size:11px;color:var(--accent-txt);
  font-variant-numeric:tabular-nums}
.mo .d{font-size:12.5px;color:var(--mute);margin-top:7px;line-height:1.6}
.mo .track{height:3px;border-radius:2px;background:var(--hair);margin-top:14px;overflow:hidden}
.mo .track i{display:block;height:100%;width:34%;background:var(--accent);border-radius:2px;
  animation:sgslide 2.6s var(--e-out) infinite alternate}
@keyframes sgslide{from{transform:translateX(0)}to{transform:translateX(196%)}}
@media (prefers-reduced-motion:reduce){ .mo .track i{animation:none} }

.sg-foot{margin-top:clamp(40px,6vh,72px);padding-top:var(--sp5);border-top:1px solid var(--hair2);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .sec{padding:clamp(64px,9vh,110px) 0}
  .hero-in .wrapx,.state .copy,.chaincap,.closer .in{padding-left:var(--sp5);padding-right:var(--sp5)}
  .hero-rail,.hero-lead{padding-left:var(--sp5);padding-right:var(--sp5)}
  .hero-in .wrapx{max-width:none}
  .mars-head{grid-template-columns:1fr;gap:var(--sp6);align-items:start}
  .vrow{grid-template-columns:1fr;gap:var(--sp5)}
  .vrow:nth-child(even) .vfig{order:0}
  .vrow:nth-child(even) .vtxt{order:0}
  .vtxt p{max-width:58ch}
  .sol{flex-direction:column;gap:10px}
  .sol .t{min-width:0}
  .dl > div{grid-template-columns:1fr;gap:6px}
  .dl .ds{max-width:none}
  #pricing .grid3,#pricing .grid2{gap:var(--sp7)}
  .ty-row{grid-template-columns:1fr;gap:10px}
}
@media (max-width:760px){
  .hero{min-height:auto}
  /* the horizontal wash does nothing at this width, the vertical one carries it */
  .scrim{background:linear-gradient(180deg,rgba(var(--blk-rgb),.94) 0%,rgba(var(--blk-rgb),.80) 34%,rgba(var(--blk-rgb),.58) 56%,rgba(var(--blk-rgb),.72) 82%,rgba(var(--blk-rgb),1) 100%)}
  .hero-rail{grid-template-columns:1fr 1fr;gap:var(--sp5) var(--sp4)}
  .mars-kv{grid-template-columns:1fr 1fr;gap:var(--sp5)}
  .apps{gap:10px;min-height:0;padding:clamp(30px,7vh,60px) 0}
  .apps figure{min-width:0}
  .apps figure.a,.apps figure.c{transform:none}
  .apps img{width:min(27vw,128px)}
  .sp-item{grid-template-columns:64px 54px 1fr;gap:10px}
}
@media (max-width:640px){
  .hero-in{padding-top:clamp(72px,11vh,104px);padding-bottom:36px}
  .state{height:clamp(380px,64vh,520px)}
  .chain{height:clamp(220px,34vh,320px)}
  .vfig{min-height:200px}
  .sw-grid{grid-template-columns:1fr 1fr}
}

/* product cut-outs: always show the whole part, never clip it */
img[src*="vice-"]{object-fit:contain!important;transform:none!important}

/* style guide: show the value that belongs to the theme currently in force */
.l-only{display:none}
:root[data-theme="light"] .l-only{display:inline}
:root[data-theme="light"] .d-only{display:none}
.sg code.mono{font-size:12px;color:var(--accent-txt);letter-spacing:0}
.sg-focus{outline:2px solid var(--focus);outline-offset:3px}

/* ---------- standalone design-system page chrome ---------- */
.sgnav{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:18px;
  padding:14px clamp(20px,4vw,56px);background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--line)}
.sgnav .logo{height:24px;width:auto}
.sgnav-t{font-family:var(--font-mono);font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--accent-txt)}
.sgnav-sp{flex:1}
.sg{border-top:0}
.sgfoot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:32px clamp(20px,4vw,56px);border-top:1px solid var(--line);
  font-size:13px;color:var(--mute)}
.sgfoot code{font-family:var(--font-mono);color:var(--accent-txt)}
@media (max-width:640px){.sgnav-t{display:none}}