/* ==========================================================================
   Xilo PHARMACEUTICALS — eStore
   Implementation of "Xilo Pharma Site.dc.html" Option 7 (eStore).
   Token values are lifted verbatim from the design document's inline styles.
   ========================================================================== */

:root{
  --ink:#0f1112;
  --red:#d0301f;
  --page:#f6f7f6;
  --panel:#fff;
  --soft:#fbfbfa;

  --r06:rgba(0,0,0,.06);
  --r08:rgba(0,0,0,.08);
  --r10:rgba(0,0,0,.10);
  --r12:rgba(0,0,0,.12);
  --r13:rgba(0,0,0,.13);
  --r14:rgba(0,0,0,.14);
  --r16:rgba(0,0,0,.16);
  --r18:rgba(0,0,0,.18);
  --r20:rgba(0,0,0,.20);
  --r28:rgba(0,0,0,.28);

  --t30:rgba(0,0,0,.30);
  --t35:rgba(0,0,0,.35);
  --t40:rgba(0,0,0,.40);
  --t45:rgba(0,0,0,.45);
  --t50:rgba(0,0,0,.50);
  --t55:rgba(0,0,0,.55);
  --t60:rgba(0,0,0,.60);
  --t65:rgba(0,0,0,.65);
  --t68:rgba(0,0,0,.68);
  --t70:rgba(0,0,0,.70);

  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --sans:Montserrat,system-ui,-apple-system,sans-serif;

  /* The design's 44px gutter, expressed so it still resolves to exactly
     44px at the 1280px artboard width and grows from there. */
  --gut:clamp(20px,3.4375vw,72px);

  /* Commerce surfaces sit on a shared specimen rail. The hero deliberately
     ignores this rail and remains full bleed. */
  --shell:clamp(20px,3.4375vw,72px);
  --content-max:1680px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:var(--sans);
  overflow-x:hidden;
}

a{color:var(--ink);text-decoration:none}

img{max-width:100%}

button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* The canvas showed each screen as a 1280px frame floating on grey.
   On the real site the frame IS the page: full bleed, no border, no shadow.
   Every band below spans the viewport; only the reading measures are capped. */
.frame{
  width:100%;
  background:var(--page);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.grow{flex:1;display:flex;flex-direction:column}
.split,.split--wide{flex:1 0 auto}

/* ---------------------------------------------------------------- masthead */

.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:17px var(--gut);
  border-bottom:1px solid var(--r10);
}
.nav__brand{display:flex;align-items:center;gap:13px}
.nav__brand img{height:19px;width:auto;display:block}
.nav__brand span{
  font:400 14px/1 var(--mono);letter-spacing:.2em;color:var(--t60);
}
.nav__links{
  display:flex;align-items:center;gap:30px;
  font:400 10px/1 var(--mono);letter-spacing:.18em;color:var(--t55);
}
.nav__links a{color:var(--t55);transition:color .15s ease}
.nav__links a:hover,
.nav__links a.is-active{color:var(--ink)}
.nav__links a[aria-disabled="true"]{cursor:default}
.nav__links a[aria-disabled="true"]:hover{color:var(--t55)}

.nav__cart{display:flex;align-items:center;gap:8px;color:var(--ink)!important}
.cart-badge{
  display:flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 4px;
  background:var(--red);color:#fff;
  font:500 9px/1 var(--mono);letter-spacing:0;
}
.cart-badge[hidden]{display:none}

/* ------------------------------------------------------------------ footer */

.foot{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gut);
  border-top:1px solid var(--r12);
}
.foot span{font:400 9.5px/1 var(--mono);letter-spacing:.18em;color:var(--t40)}
.foot span:last-child{color:var(--t30)}

/* -------------------------------------------------------------- breadcrumb */

.crumb{
  display:block;padding:20px var(--gut);
  border-bottom:1px solid var(--r10);
  font:400 9.5px/1 var(--mono);letter-spacing:.2em;color:var(--t45);
  transition:color .15s ease;
}
.crumb:hover{color:var(--ink)}

/* ================================================================== 7a hero */

.hero{
  position:relative;display:grid;grid-template-columns:1fr;min-height:600px;
  border-bottom:1px solid var(--r12);
}
.hero__inner{
  position:relative;overflow:hidden;
  padding:0 0 0 var(--gut);
  display:flex;flex-direction:column;justify-content:center;
  background:
    linear-gradient(180deg,rgba(0,0,0,.04) 0 1px,transparent 1px 100%) 0 0/100% 165px,
    var(--page);
}
.hero__copy{position:relative;max-width:clamp(520px,40.625vw,980px)}
.hero__eyebrow{
  font:400 10px/1 var(--mono);letter-spacing:.22em;color:var(--red);margin-bottom:22px;
}
.hero__title{
  font:200 clamp(44px,6.40625vw,124px)/.94 var(--sans);
  letter-spacing:-.05em;margin:0 0 30px;
  mix-blend-mode:multiply;
}
.hero__title b{font-weight:600}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap}

/* The animated core-lock mark is environmental texture, not a hero object.
   It sits below the ladder field and is intentionally cropped by the hero. */
.hero__core-noise{
  position:absolute;z-index:0;right:-4%;top:50%;
  width:clamp(540px,56vw,900px);height:auto;display:block;
  opacity:.014;
  filter:brightness(0) saturate(100%) invert(25%) sepia(77%) saturate(3082%) hue-rotate(354deg) brightness(88%) contrast(94%);
  transform:translateY(-50%) rotate(5deg) scale(1.06);
  transform-origin:center;pointer-events:none;user-select:none;
}
.hero__copy,.drift{z-index:1}

/* drifting ladder columns — deep0 / deep1 / deep2 */
.drift{
  position:absolute;top:0;bottom:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 var(--fade,20%),#000 calc(100% - var(--fade,20%)),transparent);
  mask-image:linear-gradient(180deg,transparent,#000 var(--fade,20%),#000 calc(100% - var(--fade,20%)),transparent);
}
.drift--0{left:9.375%;width:300px;--fade:20%}
.drift--1{right:25.78125%;width:280px;--fade:18%}
.drift--2{right:4.6875%;width:260px;--fade:14%}

.drift__track{
  display:flex;flex-direction:column;
  animation:xdrift var(--drift-speed,22s) ease-in-out infinite alternate;
  will-change:transform;
}
.drift--0 .drift__track{gap:22px;--drift-speed:24s;--drift-distance:-14px}
.drift--1 .drift__track{gap:18px;--drift-speed:20s;--drift-distance:-18px}
.drift--2 .drift__track{gap:14px;--drift-speed:16s;--drift-distance:-22px}

.rung{
  display:flex;align-items:center;transform-origin:left center;
  opacity:var(--rung-opacity,1);
  animation:xsequence 7.2s cubic-bezier(.2,0,0,1) infinite;
  animation-delay:var(--rung-delay,0s);
  will-change:opacity,filter;
}
.drift--0 .rung{gap:9px}
.drift--1 .rung{gap:9px}
.drift--2 .rung{gap:10px}

.rung i{width:0;height:0;display:block;border-left-style:solid;border-right-style:solid;
  border-left-color:transparent;border-right-color:transparent;border-bottom-style:solid}
.rung u{display:block;height:2px;text-decoration:none}

.drift--0 .rung i{border-left-width:12px;border-right-width:12px;border-bottom-width:21px;border-bottom-color:var(--ink)}
.drift--0 .rung u{background:var(--ink)}
.drift--1 .rung i{border-left-width:11px;border-right-width:11px;border-bottom-width:19px;border-bottom-color:var(--red)}
.drift--1 .rung u{background:var(--red)}
.drift--2 .rung i{border-left-width:10px;border-right-width:10px;border-bottom-width:17px;border-bottom-color:var(--red)}
.drift--2 .rung u{background:var(--red)}

/* The columns breathe over a short distance instead of looping a long track.
   The travelling opacity pulse supplies the sense of active sequencing; the
   alternate drift has no reset frame, so it can never visibly jump. */
@keyframes xdrift{to{transform:translateY(var(--drift-distance,-18px))}}
@keyframes xsequence{
  0%,15%,100%{opacity:var(--rung-floor,.08);filter:saturate(.75)}
  7%{opacity:var(--rung-opacity,1);filter:saturate(1.15)}
}

@media (prefers-reduced-motion:reduce){
  .drift__track,.rung{animation:none}
  .hero__core-noise{display:none}
}

/* ------------------------------------------------------------ button system */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 30px;
  font:500 10px/1 var(--mono);letter-spacing:.18em;
  border:1px solid transparent;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.btn--solid{background:var(--ink);color:#fff}
.btn--solid:hover{background:#000;color:#fff}
.btn--ghost{border-color:var(--r20);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--block{width:100%;padding:17px}
.split__side .btn--block{margin-top:28px}
.btn--locked{background:var(--r12);color:var(--t45);cursor:not-allowed}
.btn--locked:hover{background:var(--r12);color:var(--t45)}

/* ------------------------------------------------------------ product cards */

.pgrid{
  display:grid;gap:1px;background:var(--r12);
  width:calc(100% - var(--shell) - var(--shell));max-width:var(--content-max);
  margin-inline:auto;border:1px solid var(--r12);
}
.pgrid--4{grid-template-columns:repeat(4,1fr);margin-block:32px}
.pgrid--2{grid-template-columns:repeat(2,1fr);border-top:1px solid var(--r12)}
.filters + .pgrid--2{margin-top:8px;margin-bottom:40px}

.pcard{background:var(--panel);display:block;transition:background .15s ease}
.pcard:hover{background:#fdfdfd}
.pcard .face__seam,
.pcard .face__rule{transition:opacity .22s var(--vt-ease),transform .32s var(--vt-ease)}
.pcard:hover .face__seam,
.pcard:focus-visible .face__seam{opacity:1}
.pcard:hover .face__rule,
.pcard:focus-visible .face__rule{transform:translateX(8px)}
.pcard:focus-visible{outline:1px solid var(--ink);outline-offset:-1px}

/* the label face rendered inside each card */
.face{
  position:relative;background:var(--panel);
  display:flex;flex-direction:column;justify-content:center;
}
.face__seam{position:absolute;width:1px;background:var(--red);opacity:.55}
.face__mark{font:700 clamp(26px,2.03125vw,34px)/1 var(--mono);letter-spacing:-.01em}
.face__num{font:700 clamp(54px,4.21875vw,72px)/1.05 var(--mono);letter-spacing:-.02em}
.face__rule{height:1px;background:var(--red)}
.face__sub{font:400 9.5px/1 var(--mono);letter-spacing:.14em;color:var(--t50)}
.face__logo{position:absolute;width:auto;display:block}

/* 7a — 4-up strip */
.pgrid--4 .face{height:clamp(230px,17.96875vw,310px);padding:0 26px;border-bottom:1px solid var(--r06)}
.pgrid--4 .face__seam{right:26px;top:0;bottom:0}
.pgrid--4 .face__rule{width:118px;margin:12px 0 10px}
.pgrid--4 .face__logo{left:26px;bottom:22px;height:15px;opacity:.8}

/* 7b — 2-up grid */
.pgrid--2 .face{height:clamp(300px,26.5625vw,430px);padding:0 40px}
.pgrid--2 .face__seam{right:40px;top:40px;bottom:40px}
.pgrid--2 .face__mark{font-size:clamp(40px,3.125vw,54px)}
.pgrid--2 .face__num{font-size:clamp(82px,6.40625vw,108px);line-height:1.02}
.pgrid--2 .face__rule{width:190px;margin:16px 0 12px}
.pgrid--2 .face__spec{font:400 11px/1 var(--mono);letter-spacing:.14em;color:var(--t55)}
.pgrid--2 .face__sub{font-size:11px;color:var(--t40);margin-top:4px}
.pgrid--2 .face__logo{left:40px;bottom:34px;height:17px;opacity:.8}

.pmeta{padding:22px 24px 26px;border-top:1px solid var(--r10)}
.pgrid--2 .pmeta{padding:24px 26px 28px}
.pmeta__row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.pmeta__sku{font:600 15px/1 var(--mono);letter-spacing:.06em}
.pmeta__price{font:400 13px/1 var(--mono)}
.pmeta__name{font:300 15px/1.35 var(--sans);color:var(--t70);margin-bottom:12px}
.pmeta__rule{height:1px;background:var(--red);width:36px;margin-bottom:10px}
.pmeta__spec{font:400 9.5px/1 var(--mono);letter-spacing:.14em;color:var(--t45)}
.pgrid--2 .pmeta__sku{font-size:17px}
.pgrid--2 .pmeta__price{font-size:15px}
.pgrid--2 .pmeta__name{font-size:17px;line-height:1.35}
.pgrid--2 .pmeta__rule{width:44px}

/* --------------------------------------------------------- sequence strip */

.bases{
  border-top:1px solid var(--r12);background:var(--soft);
  padding:20px var(--gut) 18px;
}
.bases__row{
  display:flex;align-items:flex-end;gap:3px;height:52px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.bases__row span{flex:1;display:block}

/* =============================================================== 7b catalogue */

.page-head{
  padding:56px var(--gut) 24px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
}
.page-head h1{font:200 clamp(44px,5.9375vw,96px)/.98 var(--sans);letter-spacing:-.05em;margin:0}
.page-head__note{
  font:400 9.5px/1 var(--mono);letter-spacing:.2em;color:var(--t40);padding-bottom:14px;
  white-space:nowrap;
}

.filters{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:0 var(--gut) 26px;flex-wrap:wrap;
}
.filters__set{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  font:400 9.5px/1 var(--mono);letter-spacing:.16em;
  padding:9px 14px;border:1px solid var(--r16);color:var(--t60);
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:500}
.chip.is-on:hover{color:#fff}
.filters__sort{font:400 9.5px/1 var(--mono);letter-spacing:.16em;color:var(--t45)}

/* ================================================================= 7c product */

.pdp{
  display:grid;grid-template-columns:1.1fr 1fr;
  width:calc(100% - var(--shell) - var(--shell));max-width:var(--content-max);
  margin:32px auto 0;border:1px solid var(--r12);
}
.pdp__visual{background:var(--panel);border-right:1px solid var(--r12)}

.pdp__face{
  position:relative;height:clamp(460px,40.625vw,680px);background:var(--panel);
  display:flex;flex-direction:column;justify-content:center;padding:0 56px;
}
.pdp__face .face__seam{right:56px;top:70px;bottom:70px}
.pdp__mark{font:700 clamp(44px,4.84375vw,84px)/1 var(--mono);letter-spacing:-.01em}
.pdp__num{font:700 clamp(84px,10.3125vw,176px)/1 var(--mono);letter-spacing:-.03em}
.pdp__rule{height:1px;background:var(--red);width:300px;max-width:100%}
.pdp__rule--a{margin:20px 0 16px}
.pdp__rule--b{margin:16px 0 14px}
.pdp__lines{font:400 15px/1.5 var(--mono);letter-spacing:.06em}
.pdp__claim{font:600 19px/1 var(--mono);letter-spacing:.04em}
.pdp__system{font:400 13px/1 var(--mono);letter-spacing:.12em;color:var(--t55);margin-top:6px}
.pdp__face .face__logo{left:56px;bottom:48px;height:26px}

/* three-cell physical-label strip */
.lstrip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--r12);
  border-top:1px solid var(--r12);
}
.lstrip__cell{
  height:150px;background:var(--panel);
  display:flex;flex-direction:column;justify-content:center;padding:0 20px;
}
.lstrip__cell--alt{background:var(--soft)}
.lstrip__title{font:700 15px/1.1 var(--mono)}
.lstrip__rule{height:1px;background:var(--red);width:52px;margin:8px 0 7px}
.lstrip__rule--top{margin:9px 0 0}
.lstrip__label{font:400 8px/1 var(--mono);letter-spacing:.14em;color:var(--t50)}
.lstrip__spec{font:400 9px/1.9 var(--mono);letter-spacing:.14em;color:var(--t60)}
.lstrip__peel{font:400 8px/1.7 var(--mono);letter-spacing:.06em;color:var(--t55)}
.lstrip__peelcta{font:500 9px/1 var(--mono);letter-spacing:.14em;color:var(--red);margin-top:10px}

.pdp__buy{padding:52px var(--gut);display:flex;flex-direction:column}
.pdp__eyebrow{font:400 10px/1 var(--mono);letter-spacing:.22em;color:var(--red);margin-bottom:20px}
.pdp__buy h1{font:600 clamp(36px,4.375vw,74px)/.98 var(--sans);letter-spacing:-.04em;margin:0 0 6px}
.pdp__hr{height:1px;background:var(--red);width:120px;margin:14px 0 18px}
.pdp__desc{font:300 18px/1.5 var(--sans);color:var(--t65);margin:0 0 30px;max-width:38ch}
.pdp__price{font:200 44px/1 var(--sans);letter-spacing:-.03em;margin-bottom:26px}
.pdp__actions{display:flex;gap:10px;margin-bottom:34px}
.pdp__actions .btn{flex:1}

.qty{display:flex;align-items:center;border:1px solid var(--r20)}
.qty button{
  padding:0 16px;font:400 16px/48px var(--sans);color:var(--t50);
  transition:color .15s ease;
}
.qty button:hover{color:var(--ink)}
.qty output{padding:0 12px;font:500 13px/48px var(--mono);min-width:38px;text-align:center}

.spec{display:flex;flex-direction:column}
.spec__row{
  display:flex;justify-content:space-between;gap:16px;padding:14px 0;
  border-top:1px solid var(--r13);
  font:400 11.5px/1.3 var(--mono);letter-spacing:.08em;
}
.spec > .spec__row:last-child,
.spec__row--end{border-bottom:1px solid var(--r13)}
.spec__row dt,.spec__row span:first-child{color:var(--t45)}
.spec__row dd{margin:0;text-align:right}

.peelbox{margin-top:26px;border:1px solid var(--r16);padding:18px 20px;background:var(--soft)}
.peelbox__cta{font:400 9px/1 var(--mono);letter-spacing:.2em;color:var(--red);margin-bottom:10px}
.peelbox p{font:400 11.5px/1.7 var(--mono);color:var(--t60);margin:0}

.stages{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--r12);
  width:calc(100% - var(--shell) - var(--shell));max-width:var(--content-max);
  margin:0 auto 40px;border:0 solid var(--r12);border-width:0 1px 1px;
}
.stages div{
  background:var(--soft);padding:24px 26px;
  font:400 10px/1 var(--mono);letter-spacing:.16em;color:var(--t50);
}
.stages div.is-on{background:var(--ink);color:rgba(255,255,255,.75)}

/* ==================================================================== 7d cart */

.split{
  display:grid;grid-template-columns:1.5fr 1fr;min-height:560px;
  width:calc(100% - var(--shell) - var(--shell));max-width:var(--content-max);
  margin:32px auto 40px;border:1px solid var(--r12);
}
.split--wide{grid-template-columns:1.4fr 1fr}
.split__main{padding:56px var(--gut)}
.split__side{
  border-left:1px solid var(--r12);background:var(--soft);
  padding:56px var(--gut);display:flex;flex-direction:column;
}
.split--wide .split__main,
.split--wide .split__side{padding-top:60px;padding-bottom:60px}

.split__main h1{font:200 clamp(40px,5vw,82px)/1 var(--sans);letter-spacing:-.045em;margin:0 0 34px}

.line{
  display:grid;grid-template-columns:96px 1fr 90px 80px;gap:22px;align-items:center;
  padding:22px 0;border-top:1px solid var(--r14);
}
.line__chip{
  position:relative;height:96px;background:var(--panel);border:1px solid var(--r10);
  display:flex;flex-direction:column;justify-content:center;padding:0 14px;
}
.line__chip b{font:700 17px/1.15 var(--mono);letter-spacing:-.01em}
.line__chip i{display:block;height:1px;background:var(--red);width:46px;margin-top:9px}
.line__sku{font:600 14px/1 var(--mono);letter-spacing:.06em;margin-bottom:6px}
.line__name{font:300 17px/1.3 var(--sans);color:var(--t68)}
.line__qty{display:flex;align-items:center;border:1px solid var(--r18);justify-self:start}
.line__qty button{padding:0 11px;font:400 14px/36px var(--sans);color:var(--t50)}
.line__qty button:hover{color:var(--ink)}
.line__qty output{padding:0 8px;font:500 12px/36px var(--mono);min-width:28px;text-align:center}
.line__price{justify-self:end;font:400 16px/1 var(--mono)}
.line__rm{
  grid-column:2/-1;justify-self:end;margin-top:-8px;
  font:400 9px/1 var(--mono);letter-spacing:.16em;color:var(--t40);
}
.line__rm:hover{color:var(--red)}

.lines__end{border-top:1px solid var(--r14)}

.empty{
  border-top:1px solid var(--r14);border-bottom:1px solid var(--r14);
  padding:60px 0;text-align:left;
}
.empty p{font:400 11.5px/1.8 var(--mono);letter-spacing:.1em;color:var(--t45);margin:0 0 22px}

.sidelabel{font:400 9px/1 var(--mono);letter-spacing:.2em;color:var(--t40);margin-bottom:26px}

.total{display:flex;justify-content:space-between;align-items:baseline;margin-top:26px}
.total__k{font:400 10px/1 var(--mono);letter-spacing:.2em;color:var(--t50)}
.total__v{font:200 44px/1 var(--sans);letter-spacing:-.03em}

.side__note{
  margin-top:14px;display:flex;align-items:flex-start;gap:9px;
}
.side__note i{width:7px;height:7px;background:var(--red);display:block;margin-top:4px;flex:none}
.side__note span{
  font:400 9.5px/1.7 var(--mono);letter-spacing:.08em;color:var(--t55);
}
.status--done{margin-top:14px}
.status--done[hidden]{display:none}

.side__fine{
  white-space:pre-line;
  margin-top:auto;padding-top:34px;
  font:400 9.5px/1.8 var(--mono);letter-spacing:.1em;color:var(--t40);
}
.side__mini{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0;
  border-top:1px solid var(--r13);
  font:400 11.5px/1.3 var(--mono);letter-spacing:.08em;
}
.side__mini span:first-child{color:var(--t55)}

/* ================================================================ 7e checkout */

.gate{position:relative;padding:60px var(--gut);overflow:hidden}
.gate__ghost{
  position:absolute;left:-50px;bottom:-90px;display:flex;gap:14px;opacity:.045;
  pointer-events:none;
}
.gate__ghost i{width:0;height:0;display:block;
  border-left:100px solid transparent;border-right:100px solid transparent}
.gate__ghost i:nth-child(odd){border-top:172px solid var(--ink)}
.gate__ghost i:nth-child(even){border-bottom:172px solid var(--ink)}

.gate__eyebrow{
  position:relative;font:400 10px/1 var(--mono);letter-spacing:.22em;color:var(--red);
  margin-bottom:22px;
}
.gate h1{
  position:relative;font:200 clamp(38px,4.84375vw,80px)/1 var(--sans);
  letter-spacing:-.045em;margin:0 0 24px;
}
.gate h1 b{font-weight:600}
.gate__lede{
  position:relative;font:400 12.5px/1.85 var(--mono);letter-spacing:.02em;color:var(--t60);
  max-width:52ch;margin:0 0 38px;
}
.gate__form{position:relative;max-width:480px}
.gate__label{font:400 9px/1 var(--mono);letter-spacing:.2em;color:var(--t40);margin-bottom:10px}
.gate__row{display:flex;gap:10px}
.gate__row input{
  flex:1;border:1px solid var(--r28);background:var(--panel);height:52px;
  padding:0 16px;font:400 15px/1 var(--mono);letter-spacing:.28em;color:var(--ink);
  border-radius:0;-webkit-appearance:none;appearance:none;
}
.gate__row input::placeholder{color:var(--t35)}
.gate__row input:focus{outline:none;border-color:var(--ink)}
.gate__row .btn{padding:0 28px;height:52px}

.status{display:flex;align-items:center;gap:9px;margin-top:14px}
.status i{width:7px;height:7px;display:block;background:var(--red);flex:none}
.status span{font:400 9.5px/1.4 var(--mono);letter-spacing:.14em;color:var(--red)}
.status.is-ok i{background:#1f7a3f}
.status.is-ok span{color:#1f7a3f}

.gate__meta{margin-top:52px}
.gate__meta .spec__row:first-child{border-top:1px solid var(--r13)}

/* =============================================================== science */

.science-page{gap:32px;padding-bottom:40px}

.science-head,
.science-principles,
.scientias,
.science-footnote{
  width:calc(100% - var(--shell) - var(--shell));max-width:var(--content-max);
  margin-inline:auto;
}

.science-head{
  position:relative;min-height:520px;margin-top:32px;overflow:hidden;
  display:grid;grid-template-columns:1.35fr .65fr;
  border:1px solid var(--r12);background:var(--panel);
}
.science-head__copy{position:relative;z-index:1;padding:72px clamp(36px,5vw,84px)}
.science-kicker{
  font:500 10px/1 var(--mono);letter-spacing:.22em;color:var(--red);
  margin-bottom:24px;
}
.science-head h1{
  font:200 clamp(48px,6.1vw,104px)/.94 var(--sans);letter-spacing:-.055em;
  margin:0 0 32px;max-width:11ch;
}
.science-head h1 b{font-weight:600}
.science-head__copy > p{
  max-width:62ch;margin:0;font:300 17px/1.7 var(--sans);color:var(--t65);
}

.science-sequence{
  position:relative;display:grid;grid-template-columns:auto 1fr;align-content:center;
  gap:18px 16px;padding:60px clamp(28px,4vw,64px);
  border-left:1px solid var(--r12);background:var(--soft);
}
.science-sequence span{font:500 9px/1 var(--mono);letter-spacing:.2em;color:var(--t45)}
.science-sequence i{height:1px;background:var(--red);align-self:center;transform-origin:left}
.science-sequence i:nth-of-type(1){transform:scaleX(.36);opacity:.35}
.science-sequence i:nth-of-type(2){transform:scaleX(.68);opacity:.6}
.science-sequence strong{
  position:absolute;right:20px;bottom:-22px;
  font:700 clamp(130px,15vw,250px)/1 var(--mono);letter-spacing:-.08em;
  color:rgba(208,48,31,.07);
}

.science-principles{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  border:1px solid var(--r12);background:var(--r12);
}
.science-principles article{min-height:330px;padding:38px 34px;background:var(--panel)}
.science-index{font:500 9px/1 var(--mono);letter-spacing:.18em;color:var(--red);margin-bottom:70px}
.science-principles h2{
  font:500 clamp(25px,2.3vw,38px)/1.05 var(--sans);letter-spacing:-.035em;margin:0 0 18px;
}
.science-principles p{
  max-width:42ch;margin:0;font:300 14px/1.7 var(--sans);color:var(--t60);
}

.scientias{
  display:grid;grid-template-columns:1.05fr .95fr;
  border:1px solid var(--r12);background:var(--panel);
}
.scientias__statement{padding:64px clamp(36px,5vw,84px)}
.scientias__statement h2{
  font:600 clamp(44px,5vw,82px)/.95 var(--sans);letter-spacing:-.05em;margin:0 0 24px;
}
.scientias__statement > p{
  max-width:55ch;margin:0 0 32px;font:300 16px/1.75 var(--sans);color:var(--t65);
}
.scientias__statement > p b{font-weight:600;color:var(--ink)}
.scientias__protocol{
  list-style:none;margin:0;padding:0;border-left:1px solid var(--r12);background:var(--soft);
}
.scientias__protocol li{
  min-height:150px;padding:30px 34px;display:grid;grid-template-columns:54px 1fr;gap:22px;
  border-bottom:1px solid var(--r12);
}
.scientias__protocol li:last-child{border-bottom:0}
.scientias__protocol li > span{font:300 28px/1 var(--mono);color:var(--red)}
.scientias__protocol b{font:600 10px/1 var(--mono);letter-spacing:.2em}
.scientias__protocol p{margin:12px 0 0;font:300 13px/1.65 var(--sans);color:var(--t60);max-width:38ch}

.science-footnote{
  display:flex;align-items:baseline;justify-content:space-between;gap:40px;
  padding:24px 0;border-top:1px solid var(--r14);border-bottom:1px solid var(--r14);
}
.science-footnote span{font:600 10px/1 var(--mono);letter-spacing:.2em;white-space:nowrap}
.science-footnote p{margin:0;font:400 10px/1.7 var(--mono);letter-spacing:.06em;color:var(--t45);text-align:right}

/* =============================================================== contact */

.contact-page{gap:32px;padding-bottom:40px}
.contact-head,
.contact-protocol,
.contact-closed{
  width:calc(100% - var(--shell) - var(--shell));max-width:var(--content-max);
  margin-inline:auto;
}

.contact-head{
  display:grid;grid-template-columns:1.08fr .92fr;min-height:560px;margin-top:32px;
  border:1px solid var(--r12);background:var(--panel);
}
.contact-head__copy{padding:72px clamp(36px,5vw,84px);align-self:center}
.contact-kicker{
  font:500 10px/1 var(--mono);letter-spacing:.22em;color:var(--red);margin-bottom:24px;
}
.contact-head h1{
  font:200 clamp(48px,5.7vw,96px)/.94 var(--sans);letter-spacing:-.055em;
  max-width:12ch;margin:0 0 32px;
}
.contact-head h1 b{font-weight:600}
.contact-head__copy > p{
  max-width:58ch;margin:0;font:300 17px/1.7 var(--sans);color:var(--t65);
}

.contact-cardstage{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:54px clamp(28px,4vw,64px);border-left:1px solid var(--r12);
  background:
    linear-gradient(180deg,rgba(0,0,0,.035) 0 1px,transparent 1px 100%) 0 0/100% 108px,
    var(--soft);
}
.contact-card{
  width:min(100%,520px);aspect-ratio:1.72;padding:32px;
  display:flex;flex-direction:column;justify-content:space-between;
  border:1px solid var(--r20);background:var(--panel);
  box-shadow:0 18px 45px rgba(0,0,0,.06);transform:rotate(-1.5deg);
}
.contact-card__top{display:flex;align-items:center;justify-content:space-between;gap:20px}
.contact-card__top img{height:18px;width:auto}
.contact-card__top span{font:500 8px/1 var(--mono);letter-spacing:.16em;color:var(--t45)}
.contact-card__code{font:700 clamp(24px,2.6vw,42px)/1 var(--mono);letter-spacing:-.035em}
.contact-card__rule{width:42%;height:1px;background:var(--red)}
.contact-card__meta{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.contact-card__meta span{font:500 7px/1 var(--mono);letter-spacing:.13em;color:var(--t45)}
.contact-cardstage__caption{
  margin-top:24px;font:500 8px/1 var(--mono);letter-spacing:.18em;color:var(--t40);
}

.contact-protocol{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  border:1px solid var(--r12);background:var(--r12);
}
.contact-protocol article{
  min-height:190px;padding:34px;display:grid;grid-template-columns:54px 1fr;gap:20px;
  background:var(--panel);
}
.contact-protocol article > span{font:300 27px/1 var(--mono);color:var(--red)}
.contact-protocol b{font:600 10px/1 var(--mono);letter-spacing:.2em}
.contact-protocol p{margin:16px 0 0;font:300 13px/1.7 var(--sans);color:var(--t60);max-width:35ch}

.contact-closed{
  display:grid;grid-template-columns:.8fr 1.2fr;border:1px solid var(--r12);background:var(--panel);
}
.contact-closed > div{padding:58px clamp(34px,5vw,76px)}
.contact-closed > div:first-child{background:var(--ink);color:#fff}
.contact-closed > div:first-child .contact-kicker{color:rgba(255,255,255,.5)}
.contact-closed h2{
  font:600 clamp(58px,7vw,110px)/.9 var(--sans);letter-spacing:-.06em;margin:0;
}
.contact-closed__copy{border-left:1px solid var(--r12)}
.contact-closed__copy p{max-width:58ch;margin:0 0 18px;font:300 14px/1.75 var(--sans);color:var(--t60)}
.contact-closed__copy .btn{margin-top:12px}

/* ------------------------------------------------------------------ utility */

.vis-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ==========================================================================
   PAGE TRANSITIONS — native cross-document View Transitions.
   No router, no framework: the browser animates between real page loads.

   Register per documentation/design-signature.md: "cold, systematic,
   confident. Restraint does the work, never ornament." So these are fast,
   sharply eased and short-travel. Nothing bounces. Nothing overshoots.
   ========================================================================== */

@view-transition{ navigation:auto }

:root{
  /* one decisive curve, used everywhere */
  --vt-ease:cubic-bezier(.2,0,0,1);
}

/* The masthead and footer are the same object on every page, so they are
   named and simply hold still while the body of the page changes under them. */
.nav{view-transition-name:xilo-nav}
.foot{view-transition-name:xilo-foot}

::view-transition-group(xilo-nav),
::view-transition-group(xilo-foot){
  animation-duration:.2s;
  animation-timing-function:var(--vt-ease);
}

/* Everything else changes as a clean exposure. Movement belongs to the
   selected label, not to the whole document. */
::view-transition-old(root){
  animation:xvt-out .18s var(--vt-ease) both;
}
::view-transition-new(root){
  animation:xvt-in .42s var(--vt-ease) both;
}
@keyframes xvt-out{to{opacity:0;transform:scale(.995)}}
@keyframes xvt-in{from{opacity:0;transform:translateY(14px)}}

/* ---- the label face morphs from catalogue card into product page ---------
   `product-face` is put on the card the visitor actually clicked (see
   store.js) and sits statically on the product page's own big face, so the
   browser tweens one into the other across the navigation. */
.pdp__face{view-transition-name:product-face}

::view-transition-group(product-face){
  animation-duration:.56s;
  animation-timing-function:var(--vt-ease);
}
::view-transition-old(product-face),
::view-transition-new(product-face){
  /* stop the snapshot squashing while the box changes proportion */
  height:100%;
  object-fit:cover;
  object-position:left center;
  animation-duration:.56s;
  animation-timing-function:var(--vt-ease);
}

/* The red rule provides the single diagnostic-scan gesture. Product copy
   stays in the root exposure so its controls and type resolve as one unit. */
.pdp__face::after{
  content:"";position:absolute;z-index:3;left:0;right:0;top:0;height:1px;
  background:var(--red);opacity:0;pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .pdp__face::after{animation:xscan .52s .04s var(--vt-ease) both}
}
@keyframes xscan{
  0%{opacity:0;top:0}
  12%{opacity:.72}
  78%{opacity:.38}
  100%{opacity:0;top:100%}
}

/* ---- in-page: cart lines and totals ------------------------------------- */
.total__v{view-transition-name:cart-total}
::view-transition-group(cart-total),
::view-transition-group(*.cart-line){
  animation-duration:.28s;
  animation-timing-function:var(--vt-ease);
}

/* ---- accessibility ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  @view-transition{ navigation:none }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none!important}
  .pdp__face::after{animation:none}
}

/* ---- browsers without View Transitions get a quiet entry instead -------- */
@supports not (view-transition-name:none){
  @media (prefers-reduced-motion:no-preference){
    .frame > main{animation:xvt-in .42s var(--vt-ease) both}
  }
}

/* JS applies this only where cross-document View Transitions are unavailable.
   It makes navigation legible in older engines instead of silently degrading
   to an instantaneous page swap. */
@media (prefers-reduced-motion:no-preference){
  .xilo-leaving .frame > main{
    opacity:0;transform:scale(.995);
    transition:opacity .18s var(--vt-ease),transform .18s var(--vt-ease);
  }
  .xilo-entering .frame > main{animation:xvt-in .42s var(--vt-ease) both}
}

/* --------------------------------------------------------------- responsive */
/* Display type and the gutter are already fluid via clamp(), so the rules
   below only handle what genuinely has to change: structure. */

@media (max-width:1180px){
  /* pull the decor columns in so they clear the headline measure */
  .drift--0{left:6%;width:240px}
  .drift--1{right:26%;width:220px}
  .drift--2{right:2.5%;width:200px}
}

@media (max-width:900px){
  .pgrid--4{grid-template-columns:repeat(2,1fr)}
  .pdp{grid-template-columns:1fr}
  .pdp__visual{border-right:0;border-bottom:1px solid var(--r12)}
  .split,.split--wide{grid-template-columns:1fr}
  .split__side{border-left:0;border-top:1px solid var(--r12)}
  .stages{grid-template-columns:repeat(2,1fr)}
  .drift--0,.drift--1,.drift--2{display:none}
  .hero__core-noise{display:none}
  .hero{min-height:460px}
  .hero__inner{padding-right:var(--gut)}
  .hero__copy{max-width:none}
  .page-head{flex-direction:column;align-items:flex-start;gap:14px}
  .page-head__note{padding-bottom:0}
  .science-head{grid-template-columns:1fr;min-height:0}
  .science-sequence{min-height:230px;border-left:0;border-top:1px solid var(--r12)}
  .science-principles{grid-template-columns:1fr}
  .science-principles article{min-height:0}
  .science-index{margin-bottom:38px}
  .scientias{grid-template-columns:1fr}
  .scientias__protocol{border-left:0;border-top:1px solid var(--r12)}
  .contact-head{grid-template-columns:1fr;min-height:0}
  .contact-cardstage{min-height:390px;border-left:0;border-top:1px solid var(--r12)}
  .contact-protocol{grid-template-columns:1fr}
  .contact-protocol article{min-height:0}
  .contact-closed{grid-template-columns:1fr}
  .contact-closed__copy{border-left:0;border-top:1px solid var(--r12)}
}

@media (max-width:680px){
  .nav{flex-wrap:wrap;gap:14px}
  .nav__links{gap:18px;width:100%;justify-content:space-between}
  .pgrid--4,.pgrid--2{grid-template-columns:1fr}
  .pgrid--4 .face,.pgrid--2 .face{height:auto;padding:44px 26px}
  .pdp__face{height:auto;padding:48px 28px}
  .gate__row{flex-direction:column}
  .gate__row .btn{padding:16px 28px}
  .lstrip{grid-template-columns:1fr}
  .lstrip__cell{height:auto;padding:24px 20px}
  .stages{grid-template-columns:1fr}
  .line{grid-template-columns:64px 1fr;grid-template-areas:"chip name" "qty price";row-gap:14px}
  .line__chip{grid-area:chip;height:64px;padding:0 10px}
  .line__chip b{font-size:12px}
  .line__body{grid-area:name}
  .line__qty{grid-area:qty}
  .line__price{grid-area:price}
  .line__rm{grid-column:1/-1;justify-self:start;margin-top:0}
  .science-page{gap:20px;padding-bottom:20px}
  .science-head{margin-top:20px}
  .science-head__copy{padding:46px 24px}
  .science-head h1{font-size:clamp(42px,13vw,58px)}
  .science-head__copy > p{font-size:15px}
  .science-sequence{padding:38px 24px;min-height:190px}
  .science-principles article{padding:30px 24px}
  .scientias__statement{padding:46px 24px}
  .scientias__protocol li{padding:26px 24px;grid-template-columns:42px 1fr;gap:14px}
  .science-footnote{display:block;padding:22px 0}
  .science-footnote p{text-align:left;margin-top:14px}
  .contact-page{gap:20px;padding-bottom:20px}
  .contact-head{margin-top:20px}
  .contact-head__copy{padding:46px 24px}
  .contact-head h1{font-size:clamp(42px,13vw,58px)}
  .contact-head__copy > p{font-size:15px}
  .contact-cardstage{padding:44px 24px;min-height:320px}
  .contact-card{padding:22px}
  .contact-card__top span{display:none}
  .contact-card__meta span:last-child{display:none}
  .contact-protocol article{padding:28px 24px;grid-template-columns:44px 1fr;gap:14px}
  .contact-closed > div{padding:44px 24px}
}