/* ================= mega menu ================= */
/* sticky already creates the containing block .mega anchors to */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--card);border-bottom:1px solid var(--line);
  box-shadow:0 24px 40px -32px rgba(20,19,15,.4);display:none;z-index:70}
.mega[data-open="true"]{display:block}
.mega-i{max-width:var(--max);margin:0 auto;padding:clamp(22px,3vw,38px) var(--pad);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
@media(max-width:900px){.mega-i{grid-template-columns:1fr 1fr;gap:20px}}
.mega h4{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink40);font-weight:400;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.mega a{display:block;padding:7px 0;font-size:15px;color:var(--ink80)}
.mega a:hover{color:var(--ink)}
.mega a span{display:block;font-size:12.5px;color:var(--ink40);margin-top:1px}
.navitem{display:inline-flex;align-items:center;gap:5px;cursor:pointer;background:none;border:0;font:inherit;
  color:var(--ink80);padding:0}
.navitem:hover{color:var(--ink)}
.navitem svg{width:9px;height:9px;transition:transform .18s}
.navitem[aria-expanded="true"] svg{transform:rotate(180deg)}
.navitem[aria-expanded="true"]{color:var(--ink)}

/* ================= hero: headline row, then one demo ================= */
.hero2{padding:clamp(38px,4.8vw,72px) 0 clamp(46px,6vw,88px)}
/* The first fold is the hero alone. Its own spacing left the next section's
   heading showing at the foot of every desktop viewport from 720 to 1080
   high, so on desktop it fills the viewport under the 65px nav and centres
   its type; the spare pixel keeps the section rule below the fold. */
@media(min-width:941px){
  .hero2{display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;
    min-height:calc(100vh - 64px);min-height:calc(100svh - 64px)}
}
.hero2-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:clamp(20px,3vw,52px);
  align-items:end;margin-bottom:clamp(26px,3.4vw,46px)}
@media(max-width:940px){.hero2-top{grid-template-columns:1fr}}

.demo{border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:var(--card);
  box-shadow:0 1px 1px rgba(20,19,15,.04),0 34px 70px -50px rgba(20,19,15,.5);
  display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr)}
@media(max-width:940px){.demo{grid-template-columns:1fr}}
.dchat{padding:16px;display:flex;flex-direction:column;gap:10px;min-height:230px;justify-content:flex-end;
  border-right:1px solid var(--line)}
@media(max-width:940px){.dchat{border-right:0;border-bottom:1px solid var(--line);min-height:150px}}
.mine{align-self:flex-end;max-width:86%;background:var(--ink);color:var(--paper);padding:10px 13px;
  border-radius:6px 6px 2px 6px;font-size:15px;line-height:1.45}
.cur{display:inline-block;width:2px;height:15px;background:currentColor;vertical-align:-2px;
  animation:bk 1s steps(1) infinite}
@keyframes bk{50%{opacity:0}}
.reply{align-self:stretch;border:1px solid var(--line);border-radius:6px;padding:11px 13px;background:var(--paper)}
.tl{display:grid;grid-template-columns:42px 1fr;gap:10px;font-size:13.5px;color:var(--ink60);padding:2px 0;
  opacity:0;transform:translateY(3px);transition:opacity .28s,transform .28s}
.tl.in{opacity:1;transform:none}
.tl b{font-family:var(--mono);font-size:11px;color:var(--green);font-weight:400}
.fin{font-family:var(--mono);font-size:11px;color:var(--ink40);display:flex;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:9px;padding-top:9px;opacity:0;transition:opacity .28s}
.fin.in{opacity:1}
.dstore{background:var(--sunk);padding:clamp(12px,1.6vw,20px)}
.win{border:1px solid var(--line2);border-radius:6px;overflow:hidden;background:#fff}
.wbar{display:flex;align-items:center;gap:7px;padding:8px 11px;background:#F1EEE7;border-bottom:1px solid var(--line)}
.wbar i{width:7px;height:7px;border-radius:50%;background:rgba(20,19,15,.16);display:block}
.wbar .u{flex:1;text-align:center;font-family:var(--mono);font-size:10px;color:var(--ink40)}
.shopf{background:#fff;color:#191712}
.pmo{background:var(--green);color:#fff;text-align:center;font-size:12.5px;font-weight:500;height:0;
  overflow:hidden;transition:height .45s cubic-bezier(.33,1,.68,1),padding .45s}
.pmo.on{height:34px;padding:8px 10px}
.shd{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid #EFEBE1}
.shd .bn{font-weight:600;letter-spacing:.11em;font-size:12.5px}
.shd .mn{display:flex;gap:16px;font-size:12.5px;color:#6E685C}
.sbn{position:relative;height:clamp(140px,16vw,196px);overflow:hidden}
.sbn img{width:100%;height:100%;object-fit:cover}
.sbn .cp{position:absolute;left:20px;bottom:16px;color:#fff;font-family:var(--serif);font-size:clamp(18px,2.1vw,26px);
  text-shadow:0 2px 18px rgba(0,0,0,.45)}
.pgr{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#EFEBE1}
.pt{background:#fff;padding:12px}
.pt img{width:100%;aspect-ratio:1;object-fit:cover}
.pt h5{margin:9px 0 2px;font-size:12.5px;font-weight:500}
.pt .pz{font-family:var(--mono);font-size:11px;color:#7C7669}
.dstore{grid-column:2}
@media(max-width:940px){.dstore{grid-column:1}}
.dfoot{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 16px;
  border-top:1px solid var(--line);background:var(--card);flex-wrap:wrap}
.dfoot .l{font-size:13.5px;color:var(--ink60)}
.dfoot .r{font-family:var(--mono);font-size:11px;color:var(--ink40)}
.replay{border:1px solid var(--line2);border-radius:3px;background:none;font-family:var(--mono);font-size:11px;
  color:var(--ink60);padding:4px 10px;cursor:pointer}
.replay:hover{border-color:var(--ink);color:var(--ink)}

/* ================= capability grid ================= */
.caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(28px,3.6vw,48px);
  border-top:1px solid var(--ink)}
@media(max-width:900px){.caps{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.caps{grid-template-columns:1fr}}
.cap-c{padding:22px 26px 26px 0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.cap-c:nth-child(3n){border-right:0}
@media(max-width:900px){.cap-c:nth-child(3n){border-right:1px solid var(--line)}
  .cap-c:nth-child(2n){border-right:0}}
.cap-c h3{font-size:17px;margin-bottom:4px}
.cap-c .who{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green);margin-bottom:12px;display:block}
.cap-c .who.eng{color:var(--ink40)}
.cap-c ul{list-style:none;margin:0;padding:0}
.cap-c li{font-size:15px;color:var(--ink60);padding:5px 0;line-height:1.45}

/* ================= store types ================= */
.types{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:clamp(22px,3vw,48px);
  margin-top:clamp(28px,3.6vw,48px);align-items:start}
@media(max-width:900px){.types{grid-template-columns:1fr}}
.tlist{border-top:1px solid var(--ink)}
.tbtn{display:block;width:100%;text-align:left;padding:14px 0;border:0;border-bottom:1px solid var(--line);
  background:none;cursor:pointer;font-family:inherit;font-size:15px;color:var(--ink60)}
.tbtn:hover{color:var(--ink)}
.tbtn[aria-pressed="true"]{color:var(--ink);font-weight:500}
.tbtn em{display:block;font-style:normal;font-size:12.5px;color:var(--ink40);margin-top:2px}
.tshot{border:1px solid var(--line2);border-radius:8px;overflow:hidden;background:#fff}
.tshot .band{position:relative;height:clamp(170px,20vw,260px)}
.tshot .band img{width:100%;height:100%;object-fit:cover}
.tshot .band .lab2{position:absolute;left:22px;bottom:18px;color:#fff;font-family:var(--serif);
  font-size:clamp(20px,2.3vw,29px);text-shadow:0 2px 18px rgba(0,0,0,.45)}
.tmeta{display:flex;justify-content:space-between;gap:14px;padding:14px 18px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--ink60);flex-wrap:wrap}
.tmeta .m{font-family:var(--mono);font-size:12.5px;color:var(--ink40)}

/* ================= capability tower + stage ================= */
.tower{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(24px,3.2vw,56px);margin-top:clamp(28px,3.6vw,48px);align-items:start}
@media(max-width:900px){.tower{grid-template-columns:1fr}}
.twx{border-left:1px solid var(--line);padding-left:clamp(16px,1.6vw,24px)}
.twx .lab{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink40);margin-bottom:12px}
.twx h4{font-size:17px;font-weight:500;letter-spacing:-.015em;line-height:1.25}
.twx p{margin-top:10px;font-size:13.5px;line-height:1.6;color:var(--ink60)}
.twx .m{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;color:var(--green)}
.tw{border-top:1px solid var(--ink)}
.twb{display:block;width:100%;text-align:left;padding:15px 0;border:0;border-bottom:1px solid var(--line);
  background:none;cursor:pointer;font-family:inherit}
.twb h3{font-size:17px;font-weight:500;color:var(--ink60);letter-spacing:-.015em}
.twb:hover h3{color:var(--ink)}
.twb[aria-pressed="true"] h3{color:var(--ink)}
.twb em{display:block;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink40);margin-top:5px}
.twb[aria-pressed="true"] em{color:var(--green)}
.twb.eng[aria-pressed="true"] em{color:var(--ink40)}

.stage2{border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:#fff;min-height:380px;
  display:flex;flex-direction:column}
.st-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;
  background:#F1EEE7;border-bottom:1px solid var(--line)}
.st-head .u{font-family:var(--mono);font-size:10px;color:var(--ink40)}
.st-head .dots{display:flex;gap:6px}
.st-head .dots i{width:7px;height:7px;border-radius:50%;background:rgba(20,19,15,.16);display:block}
.st-body{flex:1;position:relative;background:#fff;overflow:hidden}
.pane{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .35s}
.pane.on{opacity:1;pointer-events:auto}
.st-foot{padding:11px 15px;border-top:1px solid var(--line);background:var(--card);font-size:13.5px;
  color:var(--ink60);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.st-foot .m{font-family:var(--mono);font-size:11px;color:var(--ink40)}

/* mini storefront used by several panes */
.ms{color:#191712}
.ms-bar{background:var(--green);color:#fff;text-align:center;font-size:12.5px;font-weight:500;height:0;
  overflow:hidden;transition:height .45s cubic-bezier(.33,1,.68,1),padding .45s}
.ms-bar.on{height:32px;padding:8px 10px}
.ms-h{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #EFEBE1;
  font-size:12.5px;color:#6E685C}
.ms-h b{font-weight:600;letter-spacing:.1em;font-size:12.5px;color:#191712}
.ms-g{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#EFEBE1}
.ms-c{background:#fff;padding:10px;position:relative}
.ms-c img{width:100%;aspect-ratio:1;object-fit:cover}
.ms-c h6{margin:7px 0 1px;font-size:11px;font-weight:500}
.ms-c span{font-family:var(--mono);font-size:10px;color:#7C7669}
.ms-c.gone{opacity:0;transition:opacity .4s}
.ms-b{position:absolute;top:16px;left:16px;background:#8C3A2B;color:#fff;font-size:10px;font-weight:600;
  padding:2px 6px;border-radius:2px;opacity:0;transform:scale(.7);transition:opacity .3s,transform .3s;z-index:2}
.ms-b.on{opacity:1;transform:none}
.lift{box-shadow:0 14px 30px -14px rgba(20,19,15,.45);z-index:3}

/* serp pane */
.serp{padding:clamp(20px,2.6vw,34px)}
.serp-row{border:1px solid var(--line);border-radius:6px;padding:16px 18px;background:var(--paper);margin-bottom:12px}
.serp-u{font-family:var(--mono);font-size:11px;color:var(--ink40)}
.serp-t{font-size:17px;color:#1a3fb8;margin:5px 0 4px;letter-spacing:-.01em;transition:color .3s}
.serp-d{font-size:13.5px;color:var(--ink60);line-height:1.5}
.serp-row.after{border-color:var(--green);background:#fff}
.serp-row.after .serp-t{color:#14320f}
.tagm{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink40);
  display:block;margin-bottom:8px}

/* meter pane */
.meter{padding:clamp(24px,3vw,42px);display:flex;flex-direction:column;justify-content:center;height:100%}
.mrow{margin-bottom:22px}
.mtop{display:flex;justify-content:space-between;font-size:13.5px;color:var(--ink60);margin-bottom:8px}
.mtop b{font-family:var(--mono);font-size:15px;color:var(--ink);font-weight:400}
.mtrack{height:6px;background:var(--sunk);border-radius:3px;overflow:hidden}
.mfill{height:100%;background:var(--green);width:0;transition:width 1.1s cubic-bezier(.33,1,.68,1)}
.mfill.slow{background:#8C3A2B}

/* upgrade pane */
.upg{padding:clamp(22px,2.8vw,38px);font-family:var(--mono);font-size:12.5px;color:var(--ink60)}
.upg .ln{display:grid;grid-template-columns:20px 1fr auto;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(3px);transition:opacity .3s,transform .3s}
.upg .ln.in{opacity:1;transform:none}
.upg .ok{color:var(--green)}
.upg .ver{font-size:15px;color:var(--ink)}

/* ================= page media ================= */
.phero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,3vw,52px);
  align-items:center;margin-top:clamp(26px,3.2vw,44px)}
@media(max-width:900px){.phero{grid-template-columns:1fr}}
.pshot{border-radius:10px;overflow:hidden;border:1px solid var(--line);position:relative;margin:0;background:var(--sunk)}
.pshot img{width:100%;height:100%;object-fit:cover;display:block}
.pshot.tall img{aspect-ratio:3/4}
.pshot.wide img{aspect-ratio:16/9}
.pshot.sq img{aspect-ratio:1}
.pshot figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:#fff;font-size:12.5px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.6))}
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:clamp(24px,3vw,42px)}
@media(max-width:800px){.mosaic{grid-template-columns:1fr 1fr}}
.mosaic .pshot:first-child{grid-column:span 2;grid-row:span 2}
.strip3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:clamp(24px,3vw,40px)}
@media(max-width:800px){.strip3{grid-template-columns:1fr}}
.dia{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:clamp(16px,2vw,26px)}
.dia svg{width:100%;height:auto;display:block}
.diacap{margin-top:12px;font-family:var(--mono);font-size:11px;color:var(--ink40)}
.bandimg{position:relative;border-radius:12px;overflow:hidden;margin-top:clamp(26px,3.2vw,44px)}
.bandimg img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block}
.bandimg .ov{position:absolute;inset:0;display:flex;align-items:flex-end;padding:clamp(20px,3vw,40px);
  background:linear-gradient(180deg,rgba(20,19,15,0) 40%,rgba(20,19,15,.74))}
.bandimg .ov p{color:#fff;font-family:var(--serif);font-size:clamp(19px,2.4vw,31px);max-width:24ch;letter-spacing:-.02em}
.splitdia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);
  align-items:center;margin-top:clamp(24px,3vw,42px)}
@media(max-width:900px){.splitdia{grid-template-columns:1fr}}

/* mosaic: grid rows drive height, images fill */
.mosaic{grid-auto-rows:clamp(120px,13vw,168px)}
.mosaic .pshot{height:100%}
.mosaic .pshot img{height:100%;width:100%;aspect-ratio:auto!important;object-fit:cover}
.strip3 .pshot img{aspect-ratio:4/3!important}

/* ---------- credibility band under the hero ---------- */
/* no rule above the wall: the marks are the rule */
.cred{padding:clamp(26px,3vw,40px) 0 clamp(28px,3.2vw,44px)}
.cred .lab{display:block;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink40);margin-bottom:clamp(18px,2vw,26px)}
.credrow{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.credtrack{display:flex;align-items:center;width:max-content;gap:clamp(44px,5.5vw,84px);
  animation:credscroll 52s linear infinite}
@media(prefers-reduced-motion:reduce){.credtrack{animation:none;justify-content:center;flex-wrap:wrap;row-gap:20px}}
.credrow:hover .credtrack{animation-play-state:paused}
@keyframes credscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.credtrack img{flex:none;width:auto;height:auto;max-height:clamp(26px,2.8vw,36px);
  max-width:clamp(96px,11vw,132px);display:block;
  /* wordmarks vary wildly in ratio, so cap the width too or the wide ones dominate */
  max-width:clamp(96px,10vw,138px);object-fit:contain;
  /* the source marks are white, so flip them to ink for the paper background */
  filter:brightness(0);opacity:.42;transition:opacity .22s ease}
.credrow:hover .credtrack img{opacity:.62}
.credtrack img:hover{opacity:1}

/* ---------- trust band ---------- */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));border-top:1px solid var(--ink);
  margin-top:clamp(26px,3vw,42px)}
@media(max-width:860px){.trust{grid-template-columns:1fr}}
.trust>div{padding:34px 30px 36px 0;border-right:1px solid var(--line)}
.trust>div+div{padding-left:clamp(20px,2.2vw,30px)}
.trust>div:last-child{border-right:0}
@media(max-width:860px){.trust>div{border-right:0;border-bottom:1px solid var(--line)}}
.trust .ic{width:22px;height:22px;margin-bottom:14px;color:var(--green)}
.trust h4{font-size:17px;font-weight:500;letter-spacing:-.015em}
.trust p{margin-top:8px;font-size:13.5px;line-height:1.6;color:var(--ink60);max-width:40ch}
.trust .std{margin-top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink40)}
.sec.dark .trust{border-top-color:rgba(243,241,234,.45)}
.sec.dark .trust>div{border-right-color:rgba(243,241,234,.16)}
.sec.dark .trust p{color:rgba(243,241,234,.62)}
.sec.dark .trust .std{color:rgba(243,241,234,.45)}
.sec.dark .trust .ic{color:#9DC49F}

/* ---------- industries: horizontal scroller, cards already open ---------- */
.vind{display:flex;gap:12px;margin-top:clamp(26px,3vw,44px);overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  padding:0 var(--pad) 0 max(var(--pad),calc((100% - var(--max))/2 + var(--pad)));
  scrollbar-width:none;-ms-overflow-style:none}
.vind::after{content:"";flex:0 0 1px}
.vind::-webkit-scrollbar{display:none}
.vind.nosnap{scroll-snap-type:none}

/* the slider is measured against the text column, so it starts at the first card */
.vsl{position:relative;height:20px;margin-top:clamp(16px,1.9vw,26px);cursor:pointer;
  touch-action:none;-webkit-user-select:none;user-select:none}
.vsl[hidden]{display:none}
.vsl-t{position:absolute;left:0;right:0;top:9px;height:1px;background:var(--line)}
.vsl-h{position:absolute;left:0;top:8px;height:3px;background:var(--ink80);
  transition:background .2s ease,height .2s ease,top .2s ease;will-change:transform}
.vsl:hover .vsl-h{background:var(--ink);height:5px;top:7px}
.vsl.drag .vsl-h{background:var(--ink);height:5px;top:7px;transition:background .2s ease}
.vsl:focus-visible{outline:none}
.vsl:focus-visible .vsl-h{background:var(--green);box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--green)}
@media(prefers-reduced-motion:reduce){.vsl-h{transition:none}}
/* ---- store-type cards: our own panel, not a photo tile ---- */
/* ---- store-type cards: light ground, real UI, paper foot ---- */
.vcard{position:relative;flex:0 0 clamp(256px,23.5vw,306px);height:clamp(430px,40vw,478px);
  border:1px solid var(--line);padding:0;cursor:pointer;text-align:left;overflow:hidden;
  background:var(--paper);font:inherit;color:var(--ink);
  display:flex;flex-direction:column}
/* the picture half: a light ground in our own palette, and the interface on it */
.vi-pic{position:relative;flex:1 1 auto;min-height:0;overflow:hidden}
.vi-bg{position:absolute;inset:0;z-index:0}
/* One ground across the row: ink and one soft sage light on the top edge.
   Only where the light sits changes from card to card. */
.vi-bg{background:radial-gradient(62% 58% at var(--lx,10%) 0%,rgba(157,196,159,.36) 0%,rgba(45,87,47,.22) 34%,rgba(45,87,47,0) 70%),#14130F}
[data-k="size"] .vi-bg{--lx:10%}
[data-k="views"] .vi-bg{--lx:86%}
[data-k="custom"] .vi-bg{--lx:30%}
[data-k="version"] .vi-bg{--lx:90%}
[data-k="front"] .vi-bg{--lx:12%}
[data-k="b2b"] .vi-bg{--lx:50%}
[data-k="more"] .vi-bg{--lx:70%}

/* a labelled top rule, cream on the ground */
.vi-top{position:absolute;left:clamp(16px,1.8vw,22px);right:clamp(16px,1.8vw,22px);
  top:clamp(16px,1.8vw,22px);z-index:2;display:flex;align-items:center;gap:9px;
  padding-bottom:12px;border-bottom:1px solid rgba(243,241,234,.2)}
.vi-ico{display:block;width:17px;height:17px;flex:none;color:#9DC49F}
.vi-ico svg{width:100%;height:100%;display:block}
.vi-lab{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(243,241,234,.72)}
.vi-art{position:absolute;left:clamp(16px,1.8vw,22px);right:clamp(16px,1.8vw,22px);
  top:calc(clamp(16px,1.8vw,22px) + 60px);bottom:clamp(14px,1.6vw,20px);z-index:2;
  display:block;transition:opacity .3s ease,transform .5s cubic-bezier(.33,1,.68,1)}
.vi-art svg{width:100%;height:100%;display:block;overflow:visible}

/* the paper foot: the claim, and where it goes */
.vcard .vi-in{position:relative;z-index:2;flex:none;background:var(--paper);
  border-top:1px solid var(--line);padding:clamp(15px,1.8vw,20px) clamp(16px,1.8vw,22px);
  display:flex;flex-direction:column}
/* two lines reserved whether the claim needs one or two, so no foot sits
   higher than its neighbour */
.vcard .vi-h{min-height:2.4em}
.vcard .vi-h{display:block;font-family:var(--disp);font-size:clamp(17px,1.75vw,20.5px);
  font-weight:500;letter-spacing:-.026em;line-height:1.2;color:var(--ink)}
.vi-ar{display:block;width:19px;height:19px;margin-top:12px;color:var(--ink40);
  transition:transform .35s cubic-bezier(.33,1,.68,1),color .3s}
.vi-ar svg{width:100%;height:100%;display:block}
.vcard:hover .vi-ar,.vcard:focus-within .vi-ar,.vcard.open .vi-ar{transform:translateX(5px);color:var(--ink)}

/* hover says how, and nothing else */
.vcard .vi-more{display:block;overflow:hidden;max-height:0;opacity:0;
  transition:max-height .45s cubic-bezier(.33,1,.68,1),opacity .3s ease,margin-top .45s ease}
.vcard:hover .vi-more,.vcard:focus-within .vi-more,.vcard.open .vi-more{max-height:240px;opacity:1;margin-top:11px}
.vi-how{display:block;font-size:12.5px;line-height:1.5;color:var(--ink60)}
.vi-proof{display:block;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.vcard:hover .vi-art,.vcard:focus-within .vi-art,.vcard.open .vi-art{opacity:.34}
.vcard:hover::after,.vcard:focus-within::after,.vcard.open::after{
  background:linear-gradient(180deg,rgba(16,15,12,.42) 0%,rgba(16,15,12,.78) 40%,rgba(16,15,12,.96) 100%)}
.vcard:focus-visible{outline:none;box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--green)}

/* what a proof looks like inside a card */
.vi-big{display:block;font-family:var(--disp);font-size:clamp(23px,2.4vw,29px);font-weight:500;
  letter-spacing:-.03em;line-height:1;color:#F3F1EA}
.vi-big em{display:block;font-family:var(--mono);font-style:normal;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(243,241,234,.5);margin-top:7px}
.vi-chips{display:flex;flex-wrap:wrap;gap:5px}
.vi-chip{display:inline-block;padding:3px 7px;border:1px solid rgba(243,241,234,.24);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:rgba(243,241,234,.62)}
.vi-chip.on{border-color:#9DC49F;color:#9DC49F}
.vi-logos{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.vi-logos img{height:22px;width:auto;max-width:78px;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.72}
.vi-logos img.tall{height:26px;max-width:100px;opacity:.86}
.vi-note{display:block;margin-top:9px;font-family:var(--mono);font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(243,241,234,.42)}
@media(max-width:620px){.vcard{flex:0 0 78vw}}
/* The card is laid out the same way on every screen. A touch rule here once
   made the picture static and padded the card for a label that no longer
   sits there, which on a phone left the ground empty and the interface
   adrift; the only touch difference now is that a tap opens the card
   (.open, set by the script), since there is nothing to hover. */

/* ---------- hero demo: general capabilities, not a transcript ---------- */
.dcap{padding:clamp(16px,1.7vw,22px);display:flex;flex-direction:column;justify-content:center;
  gap:2px;border-right:1px solid var(--line);min-height:250px}
@media(max-width:940px){.dcap{border-right:0;border-bottom:1px solid var(--line)}}
.dcap .lab{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink40);margin-bottom:12px}
.crow{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line);opacity:.42;transition:opacity .35s}
.crow:last-of-type{border-bottom:0}
.crow.on{opacity:1}
.crow b{font-size:15px;font-weight:500;letter-spacing:-.012em;display:block}
.crow em{display:block;font-style:normal;font-size:12.5px;color:var(--ink60);margin-top:3px;line-height:1.4}
.crow .t{font-family:var(--mono);font-size:11px;color:var(--ink40);white-space:nowrap}
.crow.on .t{color:var(--green)}

/* ---------- two tracks: start alone, bring a developer later ---------- */
.tracks{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:clamp(26px,3vw,44px);
  border-top:1px solid var(--ink)}
@media(max-width:860px){.tracks{grid-template-columns:1fr}}
.trk{padding:30px 30px 28px 0}
.trk+.trk{border-left:1px solid var(--line);padding-left:34px}
@media(max-width:860px){.trk+.trk{border-left:0;border-top:1px solid var(--line);padding-left:0}}
.trk>.lab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink40);margin-bottom:18px}
.trk>.lab b{font-weight:400;color:var(--green)}
.trow{display:grid;grid-template-columns:26px 1fr;gap:14px;padding:17px 0;
  border-bottom:1px solid var(--line)}
.trow:last-child{border-bottom:0}
.trow .n{font-family:var(--mono);font-size:12.5px;color:var(--ink40);padding-top:2px}
.trow h4{font-size:15px;font-weight:500;letter-spacing:-.015em;
  display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.trow h4 .who{font-family:var(--mono);font-size:11px;color:var(--ink40);font-weight:400;white-space:nowrap}
.trow p{margin-top:5px;font-size:13.5px;line-height:1.55;color:var(--ink60);max-width:44ch}

/* ---------- certification marks ---------- */
.certs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:clamp(30px,3.4vw,46px);border-top:1px solid rgba(243,241,234,.16)}
@media(max-width:860px){.certs{grid-template-columns:1fr}}
.certs>div{display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:start;
  padding:26px 26px 26px 0;border-right:1px solid rgba(243,241,234,.13);padding-right:clamp(18px,2vw,28px)}
.certs>div:last-child{border-right:0;padding-right:0}
.certs>div+div{padding-left:clamp(18px,2vw,28px)}
@media(max-width:860px){.certs>div{border-right:0;border-bottom:1px solid rgba(243,241,234,.13)}}
.certs .mk{width:46px;height:46px;flex:none;display:grid;place-items:center}
.certs .mk img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1);opacity:.82}
.certs .mk svg{width:26px;height:26px;color:rgba(243,241,234,.8)}
.certs h4{font-size:15px;font-weight:500;letter-spacing:-.012em;margin:2px 0 0}
.certs p{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:rgba(243,241,234,.6);max-width:34ch}
.sec:not(.dark) .certs{border-top-color:var(--line)}
.sec:not(.dark) .certs>div{border-right-color:var(--line)}
.sec:not(.dark) .certs .mk img{filter:none;opacity:.72}
.sec:not(.dark) .certs .mk svg{color:var(--ink60)}
.sec:not(.dark) .certs p{color:var(--ink60)}

/* ---------- two tracks, tightened ---------- */
.trow p{display:none}
.trk>.lab{margin-bottom:20px}

/* ================= hero demo: workspace styled, live change ================= */
.hd2{position:relative;border-radius:14px;overflow:hidden;background:#141310;height:clamp(320px,37vh,500px);align-items:stretch;
  border:1px solid rgba(20,19,15,.1);
  box-shadow:0 1px 1px rgba(20,19,15,.05),0 40px 90px -56px rgba(20,19,15,.75);
  display:flex;align-items:stretch}
/* short laptops: shrink the film so the next section still peeks */
@media(min-width:821px) and (max-height:860px){
  .hero2{margin-bottom:clamp(14px,2vw,24px)}
  .hero2-top{padding-bottom:0}
  .hd2{height:clamp(280px,32vh,420px)}
}
@media(max-width:940px){
  /* stacked, but still one fixed box so nothing resizes mid film */
  .hd2{flex-direction:column;height:clamp(680px,96vw,780px)}
  .hd2-l{flex:0 0 300px}
  .hd2-r{flex:1 1 auto;min-height:0}}
.hd2-wash{position:absolute;inset:0;
  background:radial-gradient(62% 58% at 88% 0%,rgba(157,196,159,.36) 0%,rgba(45,87,47,.22) 34%,rgba(45,87,47,0) 70%),#14130F}

.hd2-l{position:relative;z-index:2;flex:0 0 352px;min-width:0;
  padding:clamp(16px,1.8vw,22px);display:flex;flex-direction:column;
  border-right:1px solid rgba(243,241,234,.12);min-height:0}
@media(max-width:940px){.hd2-l{border-right:0;border-bottom:1px solid rgba(243,241,234,.12)}}
.hd2-thread{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;
  gap:10px;padding-bottom:14px;overflow:hidden}
.hb{opacity:0;transform:translateY(8px);transition:opacity .34s,transform .34s}
.hb.in{opacity:1;transform:none}
.hb-me{align-self:flex-end;max-width:92%;background:rgba(243,241,234,.14);
  border:1px solid rgba(243,241,234,.14);border-radius:11px 11px 3px 11px;
  padding:10px 13px;font-size:13.5px;line-height:1.45;color:#F3F1EA}
.hb-ag{align-self:stretch;border-left:2px solid rgba(127,164,127,.55);padding-left:13px}
.hb-ag .agh{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;
  letter-spacing:.11em;text-transform:uppercase;color:rgba(243,241,234,.44);margin-bottom:9px}
.hb-ag .agh i{width:5px;height:5px;border-radius:50%;background:#7FA47F}

.hd2-box{border:1px solid rgba(243,241,234,.18);border-radius:12px;background:rgba(20,19,15,.58);
  backdrop-filter:blur(12px);padding:12px 12px 9px;flex:none}
.hd2-box p{margin:0;min-height:2.6em;font-size:13.5px;line-height:1.45;color:#F3F1EA;letter-spacing:-.01em}
.hd2-box .cu{display:inline-block;width:1.5px;height:14px;background:#F3F1EA;vertical-align:-2px;
  margin-left:1px;animation:hbl 1.05s steps(1) infinite}
@keyframes hbl{50%{opacity:0}}
.hd2-box .bar2{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;
  padding-top:9px;border-top:1px solid rgba(243,241,234,.12)}
.hd2-tools{display:flex;align-items:center;gap:4px}
.hd2-tools button{width:27px;height:27px;border-radius:6px;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;color:rgba(243,241,234,.55);transition:background .16s,color .16s}
.hd2-tools button:hover{background:rgba(243,241,234,.1);color:#F3F1EA}
.hd2-tools svg{width:15px;height:15px}
.hd2-box .snd2{width:27px;height:27px;border-radius:50%;background:#F3F1EA;display:grid;place-items:center;flex:none}
.hd2-box .snd2 svg{width:13px;height:13px;color:#141310}

.hd2-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.hd2-steps li{display:grid;grid-template-columns:16px 1fr auto;gap:10px;align-items:baseline;
  padding:6px 0;font-size:12.5px;color:rgba(243,241,234,.72);
  opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.hd2-steps li.in{opacity:1;transform:none}
.hd2-steps li .dot{width:7px;height:7px;margin:4px 3px;border-radius:50%;background:rgba(243,241,234,.28);
  position:relative;top:2px}
.hd2-steps li.in .dot{background:#7FA47F}

.hd2-steps li .ms2{font-family:var(--mono);font-size:10px;color:rgba(243,241,234,.4)}

.hd2-r{position:relative;z-index:2;flex:1 1 0;min-width:0;
  padding:clamp(18px,2.2vw,30px);display:flex;align-items:stretch}
.hd2-win{width:100%;border-radius:9px;overflow:hidden;background:#FBFAF6;border:1px solid rgba(20,19,15,.14);
  box-shadow:0 18px 44px -26px rgba(0,0,0,.6);display:flex;flex-direction:column;min-height:0}
.hd2-sh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 13px 11px;
  border-bottom:1px solid var(--line);font-size:11px;color:var(--ink60)}
.hd2-sh b{font-size:12.5px;letter-spacing:.06em;color:var(--ink)}
.hd2-sh nav{display:flex;gap:12px}
.hd2-band{display:flex;align-items:center;gap:12px;height:0;overflow:hidden;padding:0 13px;
  background:var(--dark);color:#F3F1EA;transition:height .42s cubic-bezier(.33,1,.68,1)}
.hd2-band.on{height:38px}
.hd2-bd1{font-size:11.5px;font-weight:500;letter-spacing:.01em;white-space:nowrap}
.hd2-bd2{font-size:11px;color:rgba(243,241,234,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd2-bd3{margin-left:auto;font-size:10.5px;color:rgba(243,241,234,.62);white-space:nowrap}
.hd2-bd3 i{font-style:normal;color:#F3F1EA;font-variant-numeric:tabular-nums;letter-spacing:.02em}

.hd2-cat{display:flex;align-items:baseline;gap:10px;padding:11px 13px 8px}
.hd2-cat h5{margin:0;font-size:12.5px;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.hd2-cn{font-size:10.5px;color:var(--ink40)}
.hd2-sort{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--ink40);
  border:1px solid var(--line);border-radius:5px;padding:3px 8px;transition:color .3s,border-color .3s}
.hd2-sort.on{color:var(--rust);border-color:var(--rust)}

.hd2-fil{display:flex;gap:6px;padding:0 13px 10px}
.hd2-fil span{font-size:10px;color:var(--ink60);border:1px solid var(--line);border-radius:5px;
  padding:3px 8px;white-space:nowrap}

.hd2-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;padding:0 13px;
  flex:1;min-height:0;overflow:hidden;align-content:start;grid-auto-rows:max-content}
@media(max-width:620px){.hd2-grid{grid-template-columns:repeat(2,1fr)}}
.hd2-t{position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column}
.hd2-t.lift{z-index:3;box-shadow:0 14px 30px -14px rgba(20,19,15,.4)}
.hd2-t img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;flex:none}
.hd2-ti{flex:none;padding:7px 8px 9px}
.hd2-t h6{margin:0;font-size:11px;font-weight:500;letter-spacing:-.01em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd2-pr{display:flex;align-items:baseline;gap:6px;margin-top:3px;
  font-family:var(--mono);font-size:10.5px;color:var(--ink)}
.hd2-pr .p0{transition:color .3s}
.hd2-pr .p1{display:none;color:var(--rust)}
.hd2-t.sale .p0{text-decoration:line-through;color:var(--ink40)}
.hd2-t.sale .p1{display:inline}
.hd2-ti .un{display:block;margin-top:2px;font-size:9.5px;color:var(--ink40)}
.hd2-t .bd{position:absolute;top:6px;left:6px;background:var(--rust);color:#F3F1EA;border-radius:4px;
  padding:2px 6px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  opacity:0;transform:translateY(-3px);transition:opacity .3s,transform .3s}
.hd2-t .bd.on{opacity:1;transform:none}
.hd2-t .rk{position:absolute;top:6px;right:6px;background:rgba(20,19,15,.72);color:#F3F1EA;border-radius:4px;
  padding:2px 5px;font-family:var(--mono);font-size:10px;opacity:0;transition:opacity .3s}
.hd2-t .rk.on{opacity:1}

/* hero headline: sized so "Your Magento store makes it." holds one line */
.hero2-top h1{font-size:clamp(27px,3.5vw,46px);letter-spacing:-.035em;text-wrap:balance}

/* summary line closing the agent message, replacing the old footer bar */
.hb-ag .agf{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:12px;padding-top:10px;border-top:1px solid rgba(243,241,234,.13)}
.hb-ag .agf span{font-family:var(--mono);font-size:10px;color:rgba(243,241,234,.5)}

/* ================= ungated demo page ================= */
.dm-wrap{max-width:1180px;margin:0 auto;padding:clamp(26px,3.4vw,52px) var(--pad)}
.dm-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:clamp(18px,3vw,44px);
  align-items:end;margin-bottom:clamp(20px,2.4vw,32px)}
@media(max-width:820px){.dm-head{grid-template-columns:1fr}}
.dm-head h1{font-size:clamp(27px,3.4vw,42px);font-weight:400;letter-spacing:-.03em;line-height:1.08}
.dm-head p{margin-top:12px;font-size:15px;color:var(--ink60);max-width:52ch}
.dm-badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:100px;
  padding:6px 13px;font-family:var(--mono);font-size:11px;color:var(--ink60);white-space:nowrap}
.dm-badge i{width:6px;height:6px;border-radius:50%;background:var(--green)}

.dm-chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:clamp(16px,2vw,22px)}
.dm-chip{border:1px solid var(--line2);border-radius:100px;background:none;font-family:inherit;
  font-size:13.5px;color:var(--ink60);padding:8px 15px;cursor:pointer;transition:all .18s}
.dm-chip:hover{border-color:var(--ink);color:var(--ink)}
.dm-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* save band, appears once the change has landed */
.dm-save{margin-top:clamp(20px,2.4vw,30px);border:1px solid var(--line);border-radius:12px;
  background:var(--card);padding:clamp(18px,2.2vw,28px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:clamp(16px,2.4vw,34px);align-items:center;
  opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s;pointer-events:none}
.dm-save.on{opacity:1;transform:none;pointer-events:auto}
@media(max-width:760px){.dm-save{grid-template-columns:1fr}}
.dm-save h3{font-size:clamp(18px,2vw,23px);font-weight:500;letter-spacing:-.02em}
.dm-save p{margin-top:7px;font-size:13.5px;color:var(--ink60);max-width:46ch}
.dm-form{display:flex;gap:9px;flex-wrap:wrap}
.dm-form input{border:1px solid var(--line2);border-radius:6px;padding:11px 14px;font:inherit;font-size:15px;
  background:#fff;min-width:230px}
.dm-form input:focus{outline:none;border-color:var(--ink)}
.dm-note{margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--ink40)}

/* hero buttons stay on one row; they only stack when the grid itself stacks */
.hero-cta{display:flex;gap:10px;flex-wrap:nowrap;align-items:center}
.hero-cta .btn{white-space:nowrap}
@media(max-width:400px){.hero-cta{flex-wrap:wrap}}

/* ================= meet agent: composer, then the real window ================= */
.mgw{margin-top:clamp(24px,2.8vw,36px);--dwell:8s}

/* four steps as a strip above the window */
.mg-steps{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:clamp(10px,1.2vw,18px);
  border-top:1px solid var(--line)}
@media(max-width:700px){.mg-steps{grid-auto-flow:row;grid-auto-columns:auto}}
.mg-step{display:block;text-align:left;border:0;background:none;font:inherit;cursor:pointer;
  padding:14px 0 0;-webkit-appearance:none;position:relative}
.mg-step::before{content:"";position:absolute;top:-1px;left:0;width:0;height:2px;background:var(--ink)}
.mg-step[aria-selected="true"]::before{width:100%;transition:width var(--dwell,8s) linear}
.mg-step b{display:block;font-family:var(--mono);font-size:10px;color:var(--ink40);
  transition:color .3s}
.mg-step h3{margin-top:7px;font-size:clamp(15px,1.35vw,18px);font-weight:600;letter-spacing:-.022em;
  color:var(--ink40);transition:color .3s}
.mg-step[aria-selected="true"] b{color:var(--green)}
.mg-step[aria-selected="true"] h3{color:var(--ink)}
.mg-step:focus-visible{outline:2px solid var(--green);outline-offset:4px}

/* the window */
.mg{position:relative;display:flex;align-items:stretch;margin-top:clamp(16px,1.8vw,24px);
  border-radius:14px;overflow:hidden;background:#141310;
  height:clamp(520px,68vh,690px);border:1px solid rgba(20,19,15,.1);
  box-shadow:0 1px 1px rgba(20,19,15,.05),0 40px 90px -56px rgba(20,19,15,.75)}
@media(max-width:820px){.mg{flex-direction:column;height:auto;min-height:0}}
/* one soft sage light at the top right; the chat panel below carries its lamp at the left */
.mg-wash{position:absolute;inset:0;
  background:radial-gradient(72% 66% at 90% 0%,rgba(157,196,159,.5) 0%,rgba(45,87,47,.34) 34%,rgba(45,87,47,0) 72%),
  radial-gradient(60% 50% at 10% 100%,rgba(45,87,47,.22) 0%,rgba(45,87,47,0) 70%),#14130F}

/* left: thread and composer */
.mg-l{position:relative;z-index:2;flex:0 0 358px;min-width:0;display:flex;flex-direction:column;
  padding:clamp(16px,1.8vw,22px);border-right:1px solid rgba(243,241,234,.12);
  transition:flex-basis .62s cubic-bezier(.33,1,.68,1)}
@media(max-width:820px){.mg-l{flex-basis:auto!important;border-right:0;
  border-bottom:1px solid rgba(243,241,234,.12)}}
.mg[data-s="2"] .mg-l{flex-basis:100%;justify-content:center}
.mg-thread{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;
  gap:10px;padding-bottom:14px;overflow:hidden}
.mg[data-s="2"] .mg-thread{flex:0;padding-bottom:0}

.mg-box{border:1px solid rgba(243,241,234,.18);border-radius:12px;background:rgba(20,19,15,.58);
  backdrop-filter:blur(9px);padding:13px 13px 11px;
  transition:padding .5s ease,max-width .5s ease,margin .5s ease}
.mg[data-s="2"] .mg-box{padding:20px 20px 15px;max-width:620px;margin:0 auto;width:100%}
.mg-box p{margin:0;min-height:2.6em;font-size:13.5px;line-height:1.45;color:#F3F1EA;letter-spacing:-.01em}
.mg[data-s="2"] .mg-box p{min-height:3.4em;font-size:17px}
.mg-cu{display:inline-block;width:1.5px;height:14px;background:#F3F1EA;vertical-align:-2px;
  margin-left:1px;animation:mgbl 1.05s steps(1) infinite}
.mg[data-s="2"] .mg-cu{height:17px}
@keyframes mgbl{50%{opacity:0}}
.mg-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;
  padding-top:10px;border-top:1px solid rgba(243,241,234,.12)}
.mg-tools{display:flex;align-items:center;gap:4px}
.mg-tools span{width:27px;height:27px;border-radius:6px;display:grid;place-items:center;
  color:rgba(243,241,234,.5)}
.mg-tools svg{width:15px;height:15px}
.mg-snd{width:27px;height:27px;border-radius:50%;background:#F3F1EA;display:grid;place-items:center;flex:none}
.mg[data-s="2"] .mg-snd{width:33px;height:33px}
.mg-snd svg{width:13px;height:13px;color:#141310}

/* thread contents */
.mg-b{opacity:0;transform:translateY(8px);transition:opacity .34s,transform .34s}
.mg-b.in{opacity:1;transform:none}
.mg-me{align-self:flex-end;max-width:92%;background:rgba(243,241,234,.14);
  border:1px solid rgba(243,241,234,.14);border-radius:11px 11px 3px 11px;
  padding:10px 13px;font-size:13.5px;line-height:1.45;color:#F3F1EA}
.mg-ag{align-self:stretch;border-left:2px solid rgba(127,164,127,.55);padding-left:13px}
.mg-ag .mg-h{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;
  letter-spacing:.11em;color:rgba(243,241,234,.44);margin-bottom:9px}
.mg-ag .mg-h i{width:5px;height:5px;border-radius:50%;background:#7FA47F}
.mg-ls{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.mg-ls li{display:grid;grid-template-columns:15px 1fr auto;gap:9px;align-items:baseline;
  padding:5px 0;font-size:12.5px;line-height:1.4;color:rgba(243,241,234,.78);
  opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.mg-ls li.in{opacity:1;transform:none}
.mg-ls .dot{width:7px;height:7px;border-radius:50%;background:rgba(243,241,234,.28);
  position:relative;top:5px;margin:0 3px}
.mg-ls li.in .dot{background:#7FA47F}

.mg-ls .ms{font-family:var(--mono);font-size:10px;color:rgba(243,241,234,.4)}

/* approval and live rows inside the thread */
.mg-ap{display:flex;flex-direction:column;gap:11px;
  border:1px solid rgba(243,241,234,.2);border-radius:11px;padding:12px;
  background:rgba(243,241,234,.05)}

.mg-btn{border:0;border-radius:7px;padding:7px 13px;font:inherit;font-size:12.5px;font-weight:500;
  background:#F3F1EA;color:#141310;white-space:nowrap}
.mg-btn.g{background:transparent;border:1px solid rgba(243,241,234,.3);color:#F3F1EA;font-weight:400}
.mg-ok{font-family:var(--mono);font-size:10px;color:#9BC48F;white-space:nowrap}

/* right: the store */
.mg-r{position:relative;z-index:2;flex:1 1 0;min-width:0;display:flex;align-items:stretch;
  padding:clamp(16px,2vw,28px);opacity:1;transition:opacity .45s .12s ease}
.mg[data-s="1"] .mg-r,.mg[data-s="2"] .mg-r{opacity:0;transition:opacity .28s ease;pointer-events:none}
@media(max-width:820px){.mg[data-s="1"] .mg-r,.mg[data-s="2"] .mg-r{display:none}}
.mg-win{width:100%;border-radius:9px;overflow:hidden;background:#FBFAF6;
  border:1px solid rgba(20,19,15,.14);display:flex;flex-direction:column;
  box-shadow:0 20px 50px -30px rgba(0,0,0,.6)}
.mg-sh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 13px 11px;
  border-bottom:1px solid var(--line);font-size:11px;color:var(--ink40)}
.mg-sh b{font-size:12.5px;letter-spacing:.06em;color:var(--ink);font-weight:600}
.mg-sh nav{display:flex;gap:12px;flex:1}
.mg-sh nav span:nth-child(2){color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
.mg.ap .mg-cat{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:13px 13px 10px}
.mg-cat h5{margin:0;font-size:12.5px;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.mg-sort{font-family:var(--mono);font-size:10px;color:var(--ink40)}
.mg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 13px 14px;flex:1;min-height:0}
.mg-t{position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column}
.mg-t img{width:100%;flex:1;min-height:0;object-fit:cover;display:block}
.mg-t h6{margin:0;padding:9px 9px 0;font-size:11px;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.mg-t .pz{padding:3px 9px 10px;font-family:var(--mono);font-size:10px;color:var(--ink60)}
@media(max-width:560px){.mg-grid{grid-template-columns:repeat(2,1fr)}.mg-sh nav{display:none}}
@media(prefers-reduced-motion:reduce){.mgw *,.mg *{transition-duration:.01ms!important;animation:none!important}}

/* ================= showcase: the same app window, six surfaces ================= */
.shwrap{margin-top:clamp(24px,2.8vw,36px);--dwell:4.5s}

/* capability tabs, same language as the meet agent steps */
.sh-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:clamp(8px,1vw,14px);
  border-top:1px solid var(--line)}
@media(max-width:900px){.sh-tabs{grid-auto-flow:row;grid-auto-columns:auto}}
.shitem{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:13px 0 0;font:inherit;-webkit-appearance:none;position:relative}
.shitem::before{content:"";position:absolute;top:-1px;left:0;width:0;height:2px;background:var(--ink)}
.shitem[aria-selected="true"]::before{width:100%;transition:width var(--dwell,9s) linear}
.shitem h3{font-size:clamp(13px,1.05vw,15px);font-weight:600;letter-spacing:-.018em;
  color:var(--ink40);transition:color .3s;line-height:1.3}
.shitem[aria-selected="true"] h3{color:var(--ink)}
.shitem:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.sh-cap{margin-top:12px;min-height:2.9em;font-size:15px;line-height:1.55;color:var(--ink60);
  max-width:74ch}

/* the window, identical chrome to the meet agent one */
.shc{position:relative;display:flex;align-items:stretch;margin-top:clamp(14px,1.6vw,22px);
  overflow:hidden;background:#141310;min-height:clamp(430px,41vw,548px);
  border:1px solid rgba(20,19,15,.1);
  box-shadow:0 1px 1px rgba(20,19,15,.05),0 40px 90px -56px rgba(20,19,15,.75)}
@media(max-width:900px){.shc{flex-direction:column;min-height:0}}
/* one soft sage light in the top corner, nothing else on the ground */
.sh-wash{position:absolute;inset:0;
  background:radial-gradient(62% 58% at 10% 0%,rgba(157,196,159,.36) 0%,rgba(45,87,47,.22) 34%,rgba(45,87,47,0) 70%),#14130F}

.sh-l{position:relative;z-index:2;flex:0 0 352px;min-width:0;display:flex;flex-direction:column;
  padding:clamp(16px,1.8vw,22px);border-right:1px solid rgba(243,241,234,.12)}
@media(max-width:900px){.sh-l{flex-basis:auto;border-right:0;
  border-bottom:1px solid rgba(243,241,234,.12)}}
.sh-thread{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;
  gap:10px;padding-bottom:13px;overflow:hidden}
.sh-me{align-self:flex-end;max-width:94%;background:rgba(243,241,234,.14);
  border:1px solid rgba(243,241,234,.14);padding:10px 12px;font-size:12.5px;line-height:1.45;
  color:#F3F1EA;opacity:0;transform:translateY(8px);transition:opacity .34s,transform .34s}
.sh-me.in{opacity:1;transform:none}
.sh-log{list-style:none;margin:0;padding:0;align-self:stretch;
  border-left:2px solid rgba(127,164,127,.55);padding-left:12px;
  display:flex;flex-direction:column;gap:1px}
.sh-log li{display:grid;grid-template-columns:7px 1fr auto;gap:9px;align-items:baseline;
  padding:5px 0;font-size:12.5px;line-height:1.4;color:rgba(243,241,234,.78);
  opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.sh-log li.in{opacity:1;transform:none}
.sh-log .d{width:7px;height:7px;border-radius:50%;background:rgba(243,241,234,.28);
  position:relative;top:5px}
.sh-log li.in .d{background:#7FA47F}
.sh-log .t{font-family:var(--mono);font-size:10px;color:rgba(243,241,234,.4)}
.sh-done{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 2px 0;
  opacity:0;transform:translateY(8px);transition:opacity .34s,transform .34s}
.sh-done.in{opacity:1;transform:none}
.sh-done span{font-family:var(--mono);font-size:10px;color:#9BC48F}
.sh-done button{border:0;background:none;color:rgba(243,241,234,.62);padding:0;font:inherit;
  font-size:11px;text-decoration:underline;text-underline-offset:3px}

.sh-box{border:1px solid rgba(243,241,234,.18);background:rgba(20,19,15,.58);
  backdrop-filter:blur(9px);padding:13px 13px 11px;margin-top:10px}
.sh-box p{margin:0;min-height:2.6em;font-size:13.5px;line-height:1.45;color:#F3F1EA}
.sh-cu{display:inline-block;width:1.5px;height:13px;background:#F3F1EA;vertical-align:-2px;
  margin-left:1px;animation:shbl 1.05s steps(1) infinite}
@keyframes shbl{50%{opacity:0}}
.sh-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;
  padding-top:10px;border-top:1px solid rgba(243,241,234,.12)}
.sh-tools{display:flex;gap:4px}
.sh-tools span{width:27px;height:27px;display:grid;place-items:center;color:rgba(243,241,234,.5)}
.sh-tools svg{width:15px;height:15px}
.sh-snd{width:27px;height:27px;border-radius:50%;background:#F3F1EA;display:grid;place-items:center;flex:none}
.sh-snd svg{width:13px;height:13px;color:#141310}

/* right: whichever surface this capability actually uses */
.sh-r{position:relative;z-index:2;flex:1 1 0;min-width:0;display:flex;align-items:stretch;
  padding:clamp(14px,1.8vw,24px)}

/* ---- per showcase panels: each tab gets the surface that actually fits it ---- */
.sv{display:none;width:100%;flex-direction:column;min-height:0}
.sh-r .sv{flex:1;min-height:0}
.sh-r .sv-pnl{width:100%;flex:1;min-height:0;
  box-shadow:0 20px 50px -30px rgba(0,0,0,.6);border-color:rgba(20,19,15,.14)}
.sh-r .ag-st{flex:1;min-height:0;display:flex;flex-direction:column;
  box-shadow:0 20px 50px -30px rgba(0,0,0,.6)}
.sh-r .ag-grid{flex:1;min-height:0}
.sh-r .ag-pt{display:flex;flex-direction:column}
.sh-r .ag-pt figure{flex:1;min-height:0;display:flex}
.sh-r .ag-pt img{height:100%;max-height:none;aspect-ratio:auto;object-fit:cover}
.shc[data-k="fe"]  .sv[data-for="pdp"],
.shc[data-k="mc"]  .sv[data-for="store"],
.shc[data-k="up"]  .sv[data-for="up"],
.shc[data-k="ext"] .sv[data-for="ext"],
.shc[data-k="hv"]  .sv[data-for="hv"],
.shc[data-k="b2b"] .sv[data-for="b2b"],
.shc[data-k="any"] .sv[data-for="any"]{display:flex}

.sv-pnl{background:#fff;border:1px solid var(--line);overflow:hidden;
  box-shadow:0 16px 44px -30px rgba(20,19,15,.5);display:flex;flex-direction:column}
.sv-ph{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.sv-ph b{font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:var(--ink40);font-weight:400}
.sv-lead{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.sv-logo{height:15px;width:auto;display:block}
.sv-ph span{font-family:var(--mono);font-size:11px;color:var(--ink)}
.sv-ph s{text-decoration:line-through;color:var(--ink40)}
.sv-ph em{font-style:normal;color:var(--green)}

/* a table of packages, commands, tiers */
.sv-rows{display:flex;flex-direction:column}
.sv-rows .sv-row{display:grid;align-items:center;gap:10px;padding:8px 14px;
  border-bottom:1px solid var(--line);font-size:12.5px;
  opacity:0;transform:translateY(4px);transition:opacity .32s,transform .32s}
.shc.ap .sv-rows .sv-row{opacity:1;transform:none}
.sv-rows .sv-row:last-child{border-bottom:0}
.sv-rows .sv-hd0{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink40);
  opacity:1;transform:none;background:var(--sunk)}
.sv-rows .sv-pk{grid-template-columns:minmax(0,1fr) 62px 14px 62px 74px}
.sv-rows .sv-cmd{grid-template-columns:minmax(0,1fr) 60px}
.sv-rows .sv-tier{grid-template-columns:64px minmax(0,1fr) 78px 78px 62px}
.sv-mono{font-family:var(--mono);font-size:11px;color:var(--ink60);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-mono b{color:var(--ink);font-weight:400}
.sv-from{font-family:var(--mono);font-size:10px;color:var(--ink40)}
.sv-to{font-family:var(--mono);font-size:10px;color:var(--green)}
.sv-arw{color:var(--ink40);font-size:11px;text-align:center}
.sv-tag{font-family:var(--mono);font-size:10px;padding:2px 6px;border:1px solid var(--line);
  color:var(--ink60);text-align:center;white-space:nowrap}
.sv-tag.sv-ok{border-color:var(--green);color:var(--green)}
.sv-tag.warn{border-color:var(--amber);color:var(--amber)}
.sv-pf{display:flex;align-items:center;gap:clamp(10px,1.6vw,22px);flex-wrap:wrap;
  padding:11px 14px;border-top:1px solid var(--line);background:var(--sunk);margin-top:auto}
.sv-chk:last-child{margin-top:auto}
.sv-ba{margin-bottom:0}
.sv-pf span{font-family:var(--mono);font-size:10px;color:var(--ink60)}
.sv-pf b{color:var(--green);font-weight:400}

/* checklist used by the extension and hyva panels */
.sv-chk{display:flex;flex-direction:column;padding:4px 0}
.sv-chk li{list-style:none;display:grid;grid-template-columns:14px minmax(0,1fr);gap:9px;
  align-items:baseline;padding:6px 14px;font-size:12.5px;line-height:1.45;color:var(--ink60);
  opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.shc.ap .sv-chk li{opacity:1;transform:none}
.sv-chk li i{font-style:normal;color:var(--green)}
.sv-chk li b{color:var(--ink);font-weight:500}
.sv-chk code{font-family:var(--mono);font-size:11px;color:var(--ink)}

/* extension identity */
.sv-eid{display:flex;align-items:center;gap:13px;padding:14px}
.sv-eid figure{margin:0;width:44px;height:44px;border:1px solid var(--line);background:var(--card);
  display:grid;place-items:center;flex:none}
.sv-eid figure img{width:24px;height:24px}
.sv-eid h4{font-size:15px;font-weight:500;letter-spacing:-.018em}
.sv-eid p{margin-top:3px;font-family:var(--mono);font-size:10px;color:var(--ink40)}
.sv-eid .sv-tag{margin-left:auto}

/* before / after metric pairs for the hyva rebuild */
.sv-ba{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
@media(max-width:620px){.sv-ba{grid-template-columns:1fr}}
.sv-ba > div{background:#fff;padding:13px 14px}
.sv-ba h5{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink40)}
.sv-ba .sv-m{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:11px;
  font-size:12.5px;color:var(--ink60)}
.sv-ba .sv-m b{font-family:var(--mono);font-size:15px;font-weight:400;color:var(--ink);letter-spacing:-.02em}
.sv-ba .sv-bar{height:5px;background:var(--sunk);margin-top:6px;overflow:hidden}
.sv-ba .sv-bar i{display:block;height:100%;background:var(--rust);width:0;transition:width .9s ease .2s}
.shc.ap .sv-ba .sv-bar i{width:var(--w,38%)}
.sv-ba .sv-aft .sv-m b{color:var(--green)}
.sv-ba .sv-aft .sv-bar i{background:var(--green)}

/* ---------- the store, and the six things that change on it ---------- */
.ag-st{display:block;background:#fff;border-radius:9px;overflow:hidden;
  box-shadow:0 18px 46px -30px rgba(20,19,15,.55);transition:border-radius .6s,box-shadow .6s}
.ag-bar{display:flex;align-items:center;gap:16px;padding:11px 15px;border-bottom:1px solid var(--line);
  transition:padding .6s,border-color .6s}
.ag-logo{font-size:12.5px;font-weight:600;letter-spacing:.08em;flex:none}
.ag-bar nav{display:flex;gap:14px;flex:1;min-width:0}
.ag-bar nav a{font-size:11px;color:var(--ink60);white-space:nowrap}
.ag-bar nav a:nth-child(2){color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}

.ag-promo{height:0;overflow:hidden;background:var(--green);color:#F3F1EA;display:flex;
  align-items:center;justify-content:center;gap:9px;font-size:12.5px;
  transition:height .5s cubic-bezier(.33,1,.68,1)}
.shc[data-k="fe"].ap .ag-promo{height:36px}
.ag-promo em{font-style:normal;font-family:var(--mono);font-size:10px;opacity:.72}

.ag-head{display:flex;align-items:baseline;justify-content:space-between;padding:11px 15px 8px}
.ag-head h3{font-size:15px;font-weight:500;letter-spacing:-.02em}
.ag-sort{font-family:var(--mono);font-size:10px;color:var(--ink40);transition:color .35s}
.shc[data-k="mc"].ap .ag-sort{color:var(--green)}

.ag-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;padding:0 15px 15px;
  opacity:1;transition:opacity .3s,transform .3s}
.ag-grid.out{opacity:0;transform:translateY(8px)}
.ag-pt{position:relative;min-width:0}
.ag-pt figure{margin:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  background:var(--card);transition:border-radius .6s,border-color .6s,background .6s}
.ag-pt img{width:100%;aspect-ratio:1/1;max-height:170px;object-fit:cover;display:block}
.ag-nm{margin-top:8px;font-size:11px;font-weight:500;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-pz{margin-top:2px;font-family:var(--mono);font-size:10px;color:var(--ink60)}
.ag-pz s{color:var(--ink60);text-decoration:none}

.ag-bdg{position:absolute;top:7px;left:7px;background:var(--green);color:#F3F1EA;border-radius:3px;
  padding:3px 6px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;z-index:2;
  opacity:0;transform:translateY(-5px);transition:opacity .4s,transform .4s}
.ag-pt.sale .ag-bdg{opacity:1;transform:none}
.ag-un{position:absolute;right:7px;top:7px;background:rgba(20,19,15,.74);color:#fff;border-radius:3px;
  padding:3px 6px;font-family:var(--mono);font-size:10px;z-index:2;opacity:0;transition:opacity .4s}
.shc[data-k="mc"].ap .ag-un{opacity:1}

/* hyva: the whole storefront relaxes, and the score climbs */
.shc[data-k="hv"].ap .ag-st{border-radius:13px;box-shadow:0 24px 60px -30px rgba(20,19,15,.5)}
.shc[data-k="hv"].ap .ag-bar{padding:14px 17px;border-bottom-color:transparent}
.shc[data-k="hv"].ap .ag-pt figure{border-radius:11px;border-color:transparent;background:var(--sunk)}

@media(max-width:700px){.ag-grid{grid-template-columns:repeat(2,1fr)}.ag-bar nav{display:none}}
@media(prefers-reduced-motion:reduce){.shc *{transition-duration:.01ms!important;animation:none!important}}

/* ================= pricing: credits, plans, specialist teams ================= */
.pp-tog{display:inline-flex;align-items:center;gap:3px;border:1px solid var(--line);
  border-radius:999px;padding:3px;background:var(--card);margin-top:clamp(18px,2vw,26px)}
.pp-tog button{border:0;background:transparent;border-radius:999px;padding:8px 17px;font:inherit;
  font-size:13.5px;color:var(--ink60);cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.pp-tog button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.pp-tog em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--green);
  padding:0 12px 0 4px;letter-spacing:.05em}

/* ---- plans: three cards of one height, everything inside the card ----
   Name, one line, the price with its period beneath, the button at the
   foot of the top part, which is the same height across the row; then a
   rule and the list, still inside the card. The chosen plan is told by its
   green button and a small tag, nothing heavier. Short texts are balanced
   so no line is left holding a single word. */
.pp-h{font-size:clamp(26px,3.2vw,40px)}
.pp-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(22px,2.6vw,34px);padding-top:clamp(22px,2.6vw,34px);border-top:1px solid var(--line2)}
@media(max-width:700px){.pp-plans{grid-template-columns:1fr}}
.pp-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);background:var(--card)}
.pp-card.on{border-color:var(--line2)}
@supports(grid-template-rows:subgrid){
  .pp-card{display:grid;grid-template-rows:subgrid;grid-row:span 2}
}
.pp-box{display:flex;flex-direction:column;padding:clamp(20px,2vw,26px)}
.pp-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pp-head h3{font-family:var(--sans);font-size:17px;font-weight:500;letter-spacing:-.015em;line-height:1.2;margin:0}
.pp-star{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);
  border:1px solid rgba(45,87,47,.4);padding:3px 7px;line-height:1.2;white-space:nowrap}
.pp-c{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--ink60);text-wrap:balance}
.pp-p{margin:clamp(18px,2vw,26px) 0;display:flex;flex-direction:column;gap:4px}
.pp-p b{font-family:var(--disp);font-size:clamp(30px,2.6vw,36px);font-weight:500;letter-spacing:-.035em;line-height:1}
.pp-p span{font-size:13px;color:var(--ink60)}
.pp-go{display:block;margin-top:clamp(18px,2vw,26px);text-align:center;padding:11px 14px;
  font-size:14px;font-weight:500;text-decoration:none;border:1px solid var(--line2);color:var(--ink);
  transition:border-color .2s,background .2s}
/* the button sits at the foot of every box, whatever the line above it took */
.pp-box .pp-go{margin-top:auto}
.pp-go:hover{border-color:var(--ink)}
.pp-card.on .pp-go{background:var(--green);border-color:var(--green);color:#F3F1EA}
.pp-card.on .pp-go:hover{opacity:.9}
.pp-f{list-style:none;margin:0 clamp(20px,2vw,26px);padding:clamp(16px,1.8vw,22px) 0 clamp(20px,2vw,26px);
  border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px}
.pp-f li{display:flex;gap:9px;font-size:13.5px;line-height:1.45;color:var(--ink80)}
.pp-f li span{text-wrap:balance}
.pp-f b{color:var(--green);font-weight:400;flex:none}
.pp-f i{font-style:normal;color:var(--ink)}

.pp-ent{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:clamp(12px,1.3vw,16px);border:1px solid var(--line);border-radius:13px;
  background:var(--card);padding:clamp(18px,1.9vw,24px)}
.pp-ent h4{font-size:15px;font-weight:500;letter-spacing:-.02em}
.pp-ent p{margin-top:5px;font-size:13.5px;color:var(--ink60);max-width:62ch}

/* what a month of credits buys */
.pp-buys{margin-top:clamp(24px,3vw,40px);border-top:1px solid var(--line)}
.pp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,2fr) 62px 62px;
  gap:clamp(10px,1.4vw,20px);align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
@media(max-width:700px){.pp-row{grid-template-columns:minmax(0,1fr) 56px 56px}.pp-row .pp-bar{display:none}}
.pp-row>span:first-child{font-size:13.5px;letter-spacing:-.01em}
.pp-bar{height:7px;border-radius:4px;background:var(--sunk);overflow:hidden}
.pp-bar i{display:block;height:100%;border-radius:4px;background:var(--green);opacity:.85}
.pp-cr{font-family:var(--mono);font-size:12.5px;text-align:right}
.pp-tm{font-family:var(--mono);font-size:11px;color:var(--ink40);text-align:right}
.pp-hd{border-bottom:1px solid var(--ink);padding-bottom:9px}
.pp-hd span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink40)}

/* specialist teams */
.pp-teams{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.3vw,16px);
  margin-top:clamp(22px,2.6vw,32px)}
@media(max-width:900px){.pp-teams{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pp-teams{grid-template-columns:1fr}}
.pp-team{border:1px solid var(--line);border-radius:11px;padding:16px 17px;background:var(--card)}
.pp-team h4{font-size:15px;font-weight:500;letter-spacing:-.015em}
.pp-team p{margin-top:5px;font-size:12.5px;line-height:1.5;color:var(--ink60)}

.pp-hours{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.3vw,16px);
  margin-top:clamp(14px,1.6vw,20px)}
@media(max-width:700px){.pp-hours{grid-template-columns:1fr}}
.pp-hour{border:1px solid var(--line);border-radius:11px;padding:clamp(16px,1.7vw,20px);
  background:var(--card);display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pp-hour b{font-size:20px;font-weight:500;letter-spacing:-.03em}
.pp-hour span{font-size:12.5px;color:var(--ink60)}
.pp-hour em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink40);
  display:block;margin-top:3px}

.pp-swap{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.3vw,16px);
  margin-top:clamp(14px,1.6vw,20px)}
@media(max-width:700px){.pp-swap{grid-template-columns:1fr}}
.pp-swap div{border:1px solid var(--line2);border-radius:11px;padding:clamp(16px,1.7vw,20px);
  background:transparent}
.pp-swap b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--green)}
.pp-swap h4{margin-top:9px;font-size:15px;font-weight:500;letter-spacing:-.018em}
.pp-swap p{margin-top:6px;font-size:12.5px;line-height:1.55;color:var(--ink60)}
.sec.dark .pp-team,.sec.dark .pp-hour{background:rgba(243,241,234,.04);border-color:rgba(243,241,234,.16)}
.sec.dark .pp-team p,.sec.dark .pp-hour span,.sec.dark .pp-swap p{color:rgba(243,241,234,.62)}
.sec.dark .pp-swap div{border-color:rgba(243,241,234,.24)}
.sec.dark .pp-hour em{color:rgba(243,241,234,.45)}

/* credit amount selector on the mid plans */
.pp-sel-w{position:relative;margin-top:11px}
.pp-sel{-webkit-appearance:none;appearance:none;width:100%;border:1px solid var(--line2);
  border-radius:8px;background:transparent;padding:9px 32px 9px 12px;font:inherit;font-size:13.5px;
  color:var(--ink);cursor:pointer;transition:border-color .2s}
.pp-sel:hover{border-color:var(--ink)}
.pp-sel:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.pp-sel-w::after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;
  border-right:1.5px solid var(--ink60);border-bottom:1.5px solid var(--ink60);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
.pp-sel-l{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  color:var(--ink40);margin-bottom:6px}

/* ================= sharp: no corner rounding (homepage trial) ================= */
body.sharp *,
body.sharp *::before,
body.sharp *::after{border-radius:0!important}

/* things that are circles by nature, not rounded corners, stay round */
body.sharp .snd2,
body.sharp .hd2-box .snd2,
body.sharp .mg-snd,
body.sharp .ui-snd,
body.sharp .sh-snd,
body.sharp .mg-conn-l .d,
body.sharp .sh-log .d,
body.sharp .mg-live-d,
body.sharp .pdp-line i,
body.sharp .hd2-steps li .dot,
body.sharp .hd2-steps li.in .dot::after,
body.sharp .mg-ls .dot,
body.sharp .mg-ls li.in .dot::after,
body.sharp .mg-ag .mg-h i,
body.sharp .hb-ag .agh i,
body.sharp .shask i,
body.sharp .w-prompt .w-send,
body.sharp .w-sstore em,
body.sharp .w-top .w-who,
body.sharp .w-ask2 .w-store i,
body.sharp .w-snd,
body.sharp .w-st2 i{border-radius:999px!important}

/* the composer's send button is a circle by nature, like .mg-snd */
body.sharp .axc-s,
body.sharp .vi-art .snd{border-radius:50%!important}

/* the extension shelf: what else you can add, not what just installed */
.sv-shelf{border-top:1px solid var(--line);padding:12px 14px 14px;margin-top:auto}
.sv-shead{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  color:var(--ink40);margin-bottom:10px}
.sv-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(max-width:900px){.sv-cats{grid-template-columns:repeat(2,1fr)}}
.sv-cat{display:flex;align-items:center;gap:9px;border:1px solid var(--line);
  background:var(--card);padding:8px 10px;min-width:0}
.sv-cat i{width:26px;height:26px;display:grid;place-items:center;flex:none}
.sv-cat i img{width:16px;height:16px}
.sv-cat > span{flex:1;min-width:0}
.sv-cat b{display:block;font-size:12.5px;font-weight:500;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-cat em{display:block;font-style:normal;font-family:var(--mono);font-size:10px;
  color:var(--ink40);margin-top:2px}
.sv-add{font-family:var(--mono);font-size:10px;color:var(--green);
  border:1px solid var(--green);padding:3px 7px;flex:none}

/* b2b: the customer facing result of the price rule */
.sv-pdp{border-top:1px solid var(--line);padding:12px 14px 14px;margin-top:auto}
.sv-pdp-b{display:flex;align-items:center;gap:14px;margin-top:10px}
.sv-pdp-b figure{margin:0;width:70px;height:70px;flex:none;border:1px solid var(--line);
  background:var(--card);overflow:hidden}
.sv-pdp-b figure img{width:100%;height:100%;object-fit:cover;display:block}
.sv-pdp-b h4{font-size:13.5px;font-weight:500;letter-spacing:-.018em}
.sv-pdp-p{margin-top:5px;font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.sv-pdp-p s{color:var(--ink40);margin-right:4px}
.sv-pdp-p b{font-weight:400;color:var(--green);font-size:15px}
.sv-pdp-p em{font-style:normal;font-size:10px;color:var(--ink40);margin-left:4px}
.sv-pdp-n{margin-top:4px;font-size:11px;color:var(--ink60)}
.sv-pdp .sv-tag{display:inline-block;margin-top:8px}

/* ---- the product page the agent rebuilt ---- */
.pdp{overflow:hidden}
.pdp-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--line);font-size:11px;color:var(--ink40)}
.pdp-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:0;flex:1;min-height:0}
@media(max-width:900px){.pdp-body{grid-template-columns:1fr}}
.pdp-gal{display:grid;grid-template-columns:52px minmax(0,1fr);gap:9px;padding:14px;
  border-right:1px solid var(--line);min-height:0}
.pdp-thumbs{display:flex;flex-direction:column;gap:7px}
.pdp-thumbs i{border:1px solid var(--line);overflow:hidden;display:block;background:var(--card)}
.pdp-thumbs i.on{border-color:var(--ink)}
.pdp-thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.pdp-hero{margin:0;border:1px solid var(--line);overflow:hidden;background:var(--card);
  min-height:0;display:flex}
.pdp-hero img{width:100%;height:100%;object-fit:cover;display:block}
.pdp-info{padding:14px 15px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.pdp-info h4{font-size:17px;font-weight:500;letter-spacing:-.022em}
.pdp-price{margin-top:5px;font-family:var(--mono);font-size:15px;color:var(--ink)}
.pdp-price em{font-style:normal;font-size:10px;color:var(--ink40);margin-left:4px}
.pdp-lb{font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:var(--ink40)}
.pdp-row{margin-top:13px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pdp-row .pdp-lb{width:100%}
.pdp-sw{display:flex;gap:6px}
.pdp-sw b{width:20px;height:20px;border:1px solid var(--line);display:block}
.pdp-sw b.on{box-shadow:inset 0 0 0 2px #fff;border-color:var(--ink)}
.pdp-sizes{display:flex;gap:6px}
.pdp-sizes b{min-width:30px;padding:5px 0;text-align:center;border:1px solid var(--line);
  font-family:var(--mono);font-size:10px;font-weight:400;color:var(--ink60)}
.pdp-sizes b.on{border-color:var(--ink);color:var(--ink)}
.pdp-sizes b.out{color:var(--ink40);background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(20,19,15,.07) 4px 5px)}
.pdp-guide{font-size:11px;color:var(--green);text-decoration:underline;text-underline-offset:3px}
.pdp-line{margin-top:13px;display:flex;align-items:flex-start;gap:8px;font-size:12.5px;
  line-height:1.45;color:var(--ink60)}
.pdp-line i{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;margin-top:5px}
.pdp-line b{font-weight:500;color:var(--ink)}
.pdp-cta{margin-top:14px;border:0;background:var(--ink);color:var(--paper);padding:11px 16px;
  font:inherit;font-size:13.5px;font-weight:500;width:100%}
.pdp-look{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.pdp-look-r{display:flex;align-items:center;gap:10px;margin-top:9px;flex-wrap:wrap}
.pdp-look-r > span{display:flex;align-items:center;gap:7px}
.pdp-look-r img{width:34px;height:34px;object-fit:cover;border:1px solid var(--line);display:block}
.pdp-look-r em{font-style:normal;font-size:10px;line-height:1.35;color:var(--ink60)}
.pdp-save{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--ink60);
  border:1px solid var(--green);padding:5px 8px}
.pdp-save b{color:var(--green);font-weight:400}
.pdp-save s{color:var(--ink40)}
/* the parts the agent added light up once the change lands */
.pdp-new{position:relative;opacity:0;transform:translateY(6px);
  transition:opacity .45s ease,transform .45s ease}
.shc.ap .pdp-new{opacity:1;transform:none}
.shc.ap .pdp-new:nth-of-type(2){transition-delay:.1s}
.pdp-new::after{content:"NEW";position:absolute;top:-7px;right:0;background:var(--green);
  color:#F3F1EA;font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:2px 5px}
.pdp-look.pdp-new::after{top:6px}
/* The badge is absolutely positioned over the row, so a row whose text runs
   the full width had its last words underneath it. Keep the text clear of it. */
.pdp-line.pdp-new{padding-right:46px}
.pdp-crumb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdp-bag{flex:none}

/* ---- who asks for the changes ---- */
.whor{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.1vw,14px);
  margin-top:clamp(24px,2.8vw,36px)}
@media(max-width:1040px){.whor{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.whor{grid-template-columns:1fr}}
.whoc{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--card);
  padding:clamp(16px,1.7vw,20px);text-decoration:none;color:inherit;
  transition:border-color .22s,transform .22s,box-shadow .22s}
.whoc:hover{border-color:var(--ink);transform:translateY(-2px);
  box-shadow:0 16px 38px -26px rgba(20,19,15,.45)}
.whon{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink40)}
.whoc h3{margin-top:11px;font-size:17px;font-weight:500;letter-spacing:-.02em}
.whoa{margin-top:11px;padding-top:11px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.5;color:var(--ink)}
.whof{margin-top:auto;padding-top:13px;font-family:var(--mono);font-size:10px;
  line-height:1.5;color:var(--green)}

/* ---- one claim per section, number and text one side, image the other ---- */
.stp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(28px,4.5vw,80px);align-items:center}
@media(max-width:900px){.stp{grid-template-columns:1fr;gap:30px}
  .stp-flip }
.stp-k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:var(--ink40)}
.stp-n{display:flex;align-items:baseline;gap:11px;margin-top:14px}
.stp-n b{font-family:var(--disp);font-size:clamp(64px,9.5vw,132px);font-weight:500;
  letter-spacing:-.05em;line-height:.86;font-variant-numeric:tabular-nums}
.stp-n em{font-style:normal;font-family:var(--disp);font-size:clamp(18px,2vw,27px);
  font-weight:500;letter-spacing:-.022em;color:var(--ink60)}
.stp-h{margin-top:clamp(16px,1.8vw,24px);font-size:clamp(22px,2.5vw,32px);font-weight:500;
  letter-spacing:-.028em;line-height:1.12}
.stp-p{margin-top:12px;font-size:15px;line-height:1.65;color:var(--ink60);max-width:46ch}


.stp-t{min-width:0}

/* the comparison is the visual: two columns, one obviously taller */
.vch{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);align-items:end;
  height:clamp(320px,34vw,430px);padding:0 clamp(4px,2vw,30px)}
.vch-p{display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-width:0}
.vch-v{font-size:17px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  margin-bottom:10px;color:var(--ink)}
.vch-b{display:block;width:100%;height:0;background:var(--line2);
  background-image:url(img/bar-stone.jpg);background-size:cover;background-position:50% 30%;
  transition:height 1.1s cubic-bezier(.33,1,.68,1)}
.vch-b.lo{background:var(--green);background-image:url(img/bar-agent.jpg);
  background-size:cover;background-position:50% 45%}
.stp.in .vch-b{height:var(--h)}
.vch-b.lo{min-height:4px}
.vch-l{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.45;color:var(--ink60);min-height:3.4em}

/* the showcase picker sits beside the window, and the section runs wider */
.wrap.wide{max-width:1520px}
.sh-lay{display:grid;grid-template-columns:minmax(0,258px) minmax(0,1fr);
  gap:clamp(24px,3vw,52px);align-items:start;margin-top:clamp(20px,2.4vw,30px)}
@media(max-width:1000px){.sh-lay{grid-template-columns:1fr;gap:22px}}
.sh-tabs{display:flex;flex-direction:column;border-top:1px solid var(--line);
  grid-auto-flow:row;grid-auto-columns:auto}
.shitem{padding:15px 0;border-bottom:1px solid var(--line)}
.shitem::before{top:auto;bottom:-1px}
.shitem h3{font-size:15px;line-height:1.35}
.shc{margin-top:0}
.shitem p{margin-top:6px;max-height:0;opacity:0;overflow:hidden;font-size:12.5px;line-height:1.5;
  color:var(--ink60);transition:max-height .4s cubic-bezier(.33,1,.68,1),opacity .3s,margin-top .4s}
.shitem[aria-selected="true"] p{max-height:120px;opacity:1;margin-top:8px}

/* homepage runs without the section rules; the logo band keeps its own */
body.sharp .sec{border-top:0}
/* the wall carries no rules; see .cred in pages.css */

/* step 1: connecting a store, before there is anything to ask */
.mg-conn{position:absolute;inset:0;z-index:5;display:none;place-items:center;
  padding:clamp(18px,3vw,44px)}
.mg[data-s="1"] .mg-conn{display:grid}
.mg[data-s="1"] .mg-l{opacity:0;pointer-events:none}
.mg-conn-c{width:min(620px,100%);background:rgba(20,19,15,.62);backdrop-filter:blur(10px);
  border:1px solid rgba(243,241,234,.18);padding:clamp(20px,2.4vw,28px)}
.mg-conn-k{display:block;font-size:10px;letter-spacing:.13em;color:rgba(243,241,234,.44)}
.mg-conn-f{display:flex;align-items:center;gap:10px;margin-top:14px;padding-bottom:13px;
  border-bottom:1px solid rgba(243,241,234,.2);color:#F3F1EA;font-size:17px;letter-spacing:-.01em}
.mg-conn-f > span:first-child{flex:none}
.mg-conn-b{margin-left:auto;border:0;background:#F3F1EA;color:#141310;padding:8px 16px;
  font:inherit;font-size:13.5px;font-weight:500;flex:none}
.mg-conn-l{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:1px}
.mg-conn-l li{display:grid;grid-template-columns:7px 1fr auto;gap:10px;align-items:baseline;
  padding:6px 0;font-size:13.5px;color:rgba(243,241,234,.78);
  opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.mg-conn-l li.in{opacity:1;transform:none}
.mg-conn-l .d{width:7px;height:7px;border-radius:50%;background:rgba(243,241,234,.28);
  position:relative;top:5px}
.mg-conn-l li.in .d{background:#7FA47F}
.mg-conn-l .t{font-size:11px;color:rgba(243,241,234,.4)}
.mg-conn-ok{margin-top:16px;padding-top:14px;border-top:1px solid rgba(243,241,234,.14);
  font-size:13.5px;color:rgba(243,241,234,.6);opacity:0;transition:opacity .4s}
.mg-conn-ok b{color:#9BC48F;font-weight:400}
.mg[data-s="1"].ap .mg-conn-ok{opacity:1}

/* step 4: the rail steps aside and the store carries a live notice */
.mg[data-s="4"] .mg-l{flex-basis:0;opacity:0;padding-left:0;padding-right:0;
  overflow:hidden;border-right-color:transparent;pointer-events:none}
.mg-live{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:flex-end;
  padding:clamp(16px,2.2vw,30px);pointer-events:none;
  opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.mg[data-s="4"] .mg-live{opacity:1;transform:none}
.mg-live-c{display:flex;align-items:center;gap:14px;width:min(400px,100%);
  background:rgba(20,19,15,.72);backdrop-filter:blur(14px);
  border:1px solid rgba(243,241,234,.22);padding:14px 16px;color:#F3F1EA}
.mg-live-d{width:9px;height:9px;border-radius:50%;background:#7FA47F;flex:none;
  box-shadow:0 0 0 0 rgba(127,164,127,.55);animation:mglive 2s infinite}
@keyframes mglive{70%{box-shadow:0 0 0 9px rgba(127,164,127,0)}100%{box-shadow:0 0 0 0 rgba(127,164,127,0)}}
.mg-live-c > div{flex:1;min-width:0}
.mg-live-c b{display:block;font-size:15px;font-weight:500;letter-spacing:-.015em}
.mg-live-c em{display:block;font-style:normal;font-size:12.5px;color:rgba(243,241,234,.55);margin-top:3px}
.mg-live-u{border:1px solid rgba(243,241,234,.3);background:transparent;color:#F3F1EA;
  padding:7px 14px;font:inherit;font-size:13.5px;flex:none}

/* ---- footer ---- */
footer .foot{display:block}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);
  gap:clamp(28px,4vw,72px);align-items:start}
@media(max-width:900px){.foot-top{grid-template-columns:1fr;gap:32px}}
.foot-mark{display:inline-flex;align-items:baseline;gap:7px;font-size:17px;letter-spacing:-.02em;
  text-decoration:none;color:var(--ink)}
.foot-mark b{font-weight:600}
.foot-mark span{color:var(--ink40)}
.foot-id p{margin-top:12px;font-size:13.5px;line-height:1.6;color:var(--ink60);max-width:42ch}
.foot-id p a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
@media(max-width:760px){.foot-cols{grid-template-columns:repeat(2,1fr);gap:26px}}
.foot-cols > div{display:flex;flex-direction:column;gap:9px;min-width:0}
.foot-h{font-size:10px;letter-spacing:.13em;color:var(--ink40);margin-bottom:3px}
.foot-cols a{font-size:13.5px;color:var(--ink60);text-decoration:none;line-height:1.35}
.foot-cols a:hover{color:var(--ink)}
.foot-base{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink40)}

/* every call to action answers the pointer */
.btn{transition:background .2s ease,border-color .2s ease,color .2s ease,opacity .2s ease}
/* three stylesheets each had a say on this hover; the tint won the background and
   an older rule turned the text cream, which left no label. Ink stays ink. */
.btn-o:hover{border-color:var(--ink);background:rgba(20,19,15,.04);color:var(--ink)}
.sec.dark .btn-o,.panel .btn-o{border-color:rgba(243,241,234,.34);color:#F3F1EA}
.sec.dark .btn-o:hover,.panel .btn-o:hover{border-color:#F3F1EA;background:rgba(243,241,234,.08)}
.sec.dark .btn:not(.btn-o):hover{opacity:.88;background:#24451F}
.pdp-cta,.mg-conn-b,.mg-live-u,.sv-add,.sh-snd,.mg-snd,.snd2{transition:opacity .2s ease,background .2s ease,border-color .2s ease}
.pdp-cta:hover,.mg-conn-b:hover{opacity:.88}
.mg-live-u:hover{border-color:#F3F1EA;background:rgba(243,241,234,.1)}
.shitem:hover h3,.mg-step:hover h3{color:var(--ink)}

/* the replay control reads as a control, not a box */

/* footer credentials */
.foot-badges{display:flex;align-items:center;gap:clamp(24px,3vw,44px);flex-wrap:wrap;
  margin-top:clamp(30px,3.6vw,48px);padding-top:24px;border-top:1px solid var(--line)}
.foot-badges img{height:42px;width:auto;display:block;opacity:.78;
  transition:opacity .2s ease}
.foot-badges img:hover{opacity:1}
@media(max-width:900px){.foot-badges{margin-top:16px}}

/* ================= hero, played as a short film ================= */
/* act 1 title card */
.hd2-title{position:absolute;inset:0;z-index:6;display:grid;place-content:center;text-align:center;
  gap:10px;padding:24px;opacity:0;pointer-events:none;
  transition:opacity .6s ease,transform .6s ease;transform:scale(.985)}
.hd2[data-act="1"] .hd2-title{opacity:1;transform:none}
.hd2-title span{font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(243,241,234,.5)}
.hd2-title em{display:block;margin-top:9px;font-style:normal;font-size:clamp(12px,1.15vw,15px);
  letter-spacing:-.005em;color:rgba(243,241,234,.62)}
.hd2-title b{font-family:var(--disp);font-size:clamp(26px,3.6vw,50px);font-weight:500;
  letter-spacing:-.035em;color:#F3F1EA;line-height:1.05}

/* the two panes fade and resize between acts */
.hd2-l,.hd2-r{transition:opacity .55s ease}
.hd2[data-act="1"] .hd2-l,.hd2[data-act="1"] .hd2-r{opacity:0}
.hd2[data-act="2"] .hd2-r{opacity:0}
.hd2-l{transition:flex-basis .62s cubic-bezier(.33,1,.68,1),opacity .55s ease,border-color .5s}

/* act 2 puts the composer alone, centered and large */
.hd2[data-act="1"] .hd2-l,.hd2[data-act="2"] .hd2-l{flex-basis:100%;border-right-color:transparent}
.hd2[data-act="1"] .hd2-thread,.hd2[data-act="2"] .hd2-thread{flex:0;padding-bottom:0}
.hd2[data-act="1"] .hd2-l,.hd2[data-act="2"] .hd2-l{justify-content:center}
.hd2[data-act="2"] .hd2-box{max-width:600px;margin:0 auto;width:100%;padding:19px 19px 15px}
.hd2[data-act="2"] .hd2-box p{min-height:4.4em;font-size:17px}
.hd2[data-act="2"] .snd2{width:32px;height:32px}

/* act 4 publishes it */
.hd2-live{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;justify-content:center;
  padding:clamp(14px,1.8vw,24px);pointer-events:none;
  opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.hd2[data-act="4"] .hd2-live{opacity:1;transform:none}
.hd2-live-c{display:flex;align-items:center;gap:14px;width:min(560px,100%);
  background:rgba(20,19,15,.72);backdrop-filter:blur(14px);
  border:1px solid rgba(243,241,234,.22);padding:14px 16px;color:#F3F1EA}
.hd2-live-d{width:9px;height:9px;border-radius:50%;background:#7FA47F;flex:none;
  box-shadow:0 0 0 0 rgba(127,164,127,.55);animation:hlive 2s infinite}
@keyframes hlive{70%{box-shadow:0 0 0 9px rgba(127,164,127,0)}100%{box-shadow:0 0 0 0 rgba(127,164,127,0)}}
.hd2-live-c > div{flex:1;min-width:0}
.hd2-live-c b{display:block;font-size:15px;font-weight:500;letter-spacing:-.015em}
.hd2-live-c em{display:block;font-style:normal;font-size:12.5px;color:rgba(243,241,234,.55);margin-top:3px}
.hd2-live-u{border:1px solid rgba(243,241,234,.3);background:transparent;color:#F3F1EA;
  padding:7px 14px;font:inherit;font-size:13.5px;flex:none}
.hd2-win{position:relative}

body.sharp .hd2-live-d{border-radius:50%!important}
@media(prefers-reduced-motion:reduce){
  .hd2-title,.hd2-l,.hd2-r,.hd2-live,.hd2-cap b,.hd2-roll,.hd2-ur{transition:none}
  .hd2-live i{animation:none}}

/* act 5: the upgrade runs where the store was */
.hd2-upg{display:none;flex:1;min-width:0;flex-direction:column;background:#FBFAF6;
  border:1px solid rgba(20,19,15,.14);overflow:hidden;
  box-shadow:0 20px 50px -30px rgba(0,0,0,.6)}
.hd2[data-act="5"] .hd2-upg{display:flex}
.hd2[data-act="5"] .hd2-win{display:none}
.hd2-uh{display:flex;align-items:baseline;gap:9px;padding:10px 14px;
  border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink)}
.hd2-uh s{text-decoration:line-through;color:var(--ink40)}
.hd2-uh em{font-style:normal;color:var(--green)}
.hd2-urs{display:flex;flex-direction:column;flex:1;min-height:0}
.hd2-ur{display:grid;grid-template-columns:minmax(0,1fr) 54px 12px 66px;gap:9px;
  align-items:center;padding:5px 14px;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.hd2-ur.in,.hd2-ul.in{opacity:1;transform:none}
.hd2-ul{padding:7px 14px 3px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink40);opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.hd2-uc{grid-template-columns:minmax(0,1fr) 66px}
.hd2-up{font-size:11px;color:var(--ink60);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hd2-uf{font-size:10px;color:var(--ink40);text-align:right}
.hd2-ua{font-size:10px;color:var(--ink40);text-align:center}
.hd2-ut{font-size:10px;text-align:center;border:1px solid var(--line);padding:2px 4px;
  color:var(--ink60);white-space:nowrap}
.hd2-ut.ok{border-color:var(--green);color:var(--green)}
.hd2-ut.warn{border-color:var(--amber);color:var(--amber)}
.hd2-uf2{display:flex;gap:14px;flex-wrap:wrap;padding:8px 14px;margin-top:auto;
  border-top:1px solid var(--line);background:var(--sunk);font-size:10px;color:var(--ink60)}
.hd2-uf2 b{color:var(--green);font-weight:400}

/* act 6: the roll call, one line at a time, getting faster */
.hd2-cap{position:absolute;inset:0;z-index:7;display:grid;place-content:center;
  text-align:center;padding:24px;pointer-events:none}
.hd2-cap b{grid-area:1/1;font-family:var(--disp);font-size:clamp(22px,3.2vw,44px);font-weight:500;
  letter-spacing:-.032em;color:#F3F1EA;opacity:0;transform:translateY(10px);
  transition:opacity .32s ease,transform .32s ease}
.hd2-cap b.in{opacity:1;transform:none}
.hd2-cap b.out{opacity:0;transform:translateY(-10px)}

/* act 7: the count, over everything it just named */
.hd2-roll{position:absolute;inset:0;z-index:8;opacity:0;pointer-events:none;
  transition:opacity .6s ease}
.hd2[data-act="7"] .hd2-roll{opacity:1}
.hd2[data-act="7"] .hd2-rc li{color:rgba(243,241,234,.15);border-bottom-color:rgba(243,241,234,.06)}
.hd2-rcols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2.4vw,44px);padding:0 clamp(16px,3vw,48px);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
@media(max-width:760px){.hd2-rcols{grid-template-columns:1fr}.hd2-rcols .r2,.hd2-rcols .r3{display:none}}
.hd2-rc{list-style:none;margin:0;padding:0;will-change:transform}
.hd2-rc li{padding:9px 0;font-size:13.5px;line-height:1.35;color:rgba(243,241,234,.34);
  border-bottom:1px solid rgba(243,241,234,.1);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.r1{animation:hroll 34s linear infinite}
.r2{animation:hroll 44s linear infinite;animation-delay:-7s}
.r3{animation:hroll 39s linear infinite;animation-delay:-17s}
@keyframes hroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.hd2-rmid{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:2;
  text-align:center;padding:0 clamp(18px,4vw,64px);pointer-events:none}
.hd2-rmid b{display:block;font-family:var(--disp);font-size:clamp(56px,9vw,124px);font-weight:500;
  letter-spacing:-.055em;line-height:.9;color:#F3F1EA;font-variant-numeric:tabular-nums;
  text-shadow:0 2px 34px rgba(14,13,10,.75),0 1px 4px rgba(14,13,10,.5)}
.hd2-rmid span{display:block;margin-top:14px;font-size:clamp(14px,1.6vw,21px);font-weight:500;
  line-height:1.35;letter-spacing:-.015em;color:#F3F1EA;text-wrap:balance;
  text-shadow:0 1px 20px rgba(14,13,10,.9),0 1px 3px rgba(14,13,10,.7)}
/* acts 6 and 7 clear the stage */
.hd2[data-act="6"] .hd2-l,.hd2[data-act="6"] .hd2-r,
.hd2[data-act="7"] .hd2-l,.hd2[data-act="7"] .hd2-r{opacity:0}
@media(prefers-reduced-motion:reduce){.hd2-rc{animation:none}}

/* ---- compact nav dropdowns: a card under the item it belongs to ---- */
.mega-s{background:none;border-bottom:0;box-shadow:none;pointer-events:none}
.mega-s .mega-i{display:block;max-width:none;margin:0;padding:9px 0 0}
.dd{width:min(440px,calc(100vw - 32px));background:var(--card);pointer-events:auto;
  border:1px solid var(--line2);padding:7px;
  box-shadow:0 1px 2px rgba(20,19,15,.06),0 26px 54px -34px rgba(20,19,15,.55)}
.dd a{display:block;padding:11px 12px;transition:background .16s ease}
.dd a:hover{background:var(--sunk)}
.dd a b{display:block;font-size:14.5px;font-weight:500;letter-spacing:-.015em;color:var(--ink)}
.dd a span{display:block;font-size:12.5px;line-height:1.45;color:var(--ink60);margin-top:2px}
.dd-lab{display:block;padding:9px 12px 3px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink40)}
.dd-sep{height:1px;background:var(--line);margin:6px 12px}
.dd-all{font-size:13.5px;color:var(--ink60)}
.dd-all:hover{color:var(--ink)}
@media(max-width:760px){.dd{width:calc(100vw - 32px)}}

/* the two nav buttons sit together, so the second one reads as the quieter one */
.nav nav .btn+.btn{margin-left:-14px}
.ctab-b{display:flex;gap:10px;flex-wrap:wrap}
.tblwrap{overflow-x:auto}

/* ================== where it fits: full bleed split ================== */
.fb-sec{border-top:1px solid var(--line)}
.fb{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  min-height:clamp(400px,38vw,520px)}
@media(max-width:900px){.fb{grid-template-columns:1fr}}

/* the dark half: content sits against the divider, not adrift on the left */
.fb-l{background:#141310;color:#F3F1EA;display:flex;align-items:center;
  padding:clamp(34px,4.4vw,64px) clamp(24px,3vw,52px)}
.fb-in{margin-left:auto;max-width:38ch;width:100%}
@media(max-width:900px){.fb-in{margin-left:0;max-width:none}}
.fb-l h2{color:#F3F1EA;font-size:clamp(25px,2.8vw,38px);letter-spacing:-.032em;line-height:1.12;
  max-width:15ch}
.fb-list{margin-top:clamp(22px,2.8vw,38px);display:flex;flex-direction:column;
  border-left:1px solid rgba(243,241,234,.18)}
.fb-i{text-align:left;background:none;border:0;font:inherit;cursor:pointer;color:inherit;
  padding:12px 0 12px 18px;margin-left:-1px;border-left:1px solid transparent;
  transition:border-color .25s ease}
.fb-i b{display:block;font-size:15px;font-weight:500;letter-spacing:-.015em;
  color:rgba(243,241,234,.45);transition:color .25s ease}
.fb-i span{display:none;margin-top:6px;font-size:12.5px;line-height:1.5;
  color:rgba(243,241,234,.6)}
.fb-i:focus{outline:none}
.fb-i:focus-visible{outline:none;background:rgba(243,241,234,.06)}
.fb-i[aria-selected="true"]{border-left-color:#9DC49F}
.fb-i[aria-selected="true"] b{color:#F3F1EA}
.fb-i[aria-selected="true"] span{display:block}
/* the ask and the closing line belong to the rail on the right only; any copy of them in the list stays hidden at every width */
.fb-ask,.fb-brace{display:none!important}

/* the other half takes the wash the demos use */
.fb-r{position:relative;display:flex;align-items:center;overflow:hidden;
  padding:clamp(30px,3.6vw,58px) clamp(22px,3vw,52px);background:#14130F}
/* the closing-panel script puts a Prism canvas here; the dot field is the ground now */
.fb-r>.panel-bg{display:none}
.fb-r::before,.fb-r::after{content:"";position:absolute;inset:0;pointer-events:none}
.fb-r::before{background-image:radial-gradient(rgba(157,196,159,.95) 1px,transparent 1.3px);background-size:14px 14px;background-position:7px 7px;opacity:.75;
  -webkit-mask-image:radial-gradient(60% 72% at 88% 12%,#000 0%,rgba(0,0,0,.4) 38%,transparent 74%);mask-image:radial-gradient(60% 72% at 88% 12%,#000 0%,rgba(0,0,0,.4) 38%,transparent 74%)}
.fb-r::after{background:radial-gradient(50% 55% at 88% 12%,rgba(157,196,159,.2) 0%,rgba(45,87,47,.12) 45%,transparent 76%)}
.fb-r>*{position:relative;z-index:2}

/* the pipeline, read on the wash */
.pip{width:100%}
.pip-ask{border:1px solid rgba(243,241,234,.18);background:rgba(20,19,15,.55);
  backdrop-filter:blur(12px);color:#F3F1EA;padding:12px 14px;
  margin-bottom:clamp(22px,2.8vw,38px);max-width:min(100%,400px);
  opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
.pip.a1 .pip-ask{opacity:1;transform:none}
.pip-ask b{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(243,241,234,.45);margin-bottom:5px}
.pip-ask span{font-size:12.5px;line-height:1.45}
.pip-rail{--g:clamp(8px,1.2vw,16px);--n:5;position:relative;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--g);padding-top:22px}
/* the line runs from the centre of the first marker to the centre of the last.
   Its right edge is the last cell's width less the 7px to that mark's centre,
   so it is written in terms of --n, the number of stages: the seventh stage
   was added with the column count left at six here, and the track stopped
   one cell short of "production" while the fill, scaled to the track, went
   with it. */
.pip-rail::before{content:"";position:absolute;left:7px;top:5px;height:2px;
  right:calc((100% - (var(--n) - 1) * var(--g)) / var(--n) - 7px);background:rgba(243,241,234,.2)}
/* left:7px puts its start on the first mark's centre; the width is measured
   between cell edges in JS, which is the same distance between centres */
/* the fill: starts on the first mark's centre, and the script sets its width
   to the distance to the last lit mark's centre */
/* The fill spans the whole track and is scaled to the last lit mark. A
   width that eased from zero restarted from nothing whenever the pane came
   into view, so the line spent its life chasing marks; a transform always
   eases from where it is and runs on the compositor. */
.pip-rail>i{position:absolute;left:7px;top:5px;height:2px;
  right:calc((100% - (var(--n) - 1) * var(--g)) / var(--n) - 7px);background:#F3F1EA;z-index:1;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s cubic-bezier(.33,1,.68,1)}
.pip-node{position:relative;min-width:0}
.pip-node::before{content:"";position:absolute;box-sizing:border-box;left:0;top:-23px;
  width:14px;height:14px;background:rgba(20,19,15,.5);
  border:2px solid rgba(243,241,234,.3);z-index:2;
  transition:background .3s ease,border-color .3s ease}
.pip-node.on::before{background:#F3F1EA;border-color:#F3F1EA}
.pip-node.by.on::before{background:#9DC49F;border-color:#9DC49F}
.pip-node b{display:block;font-size:12.5px;font-weight:500;letter-spacing:-.01em;
  color:rgba(243,241,234,.42);transition:color .3s ease}
.pip-node.on b{color:#F3F1EA}
.pip-node em{display:block;margin-top:2px;font-style:normal;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.05em;color:rgba(243,241,234,.4);opacity:0;transition:opacity .3s ease}
.pip-node.on em{opacity:1}
/* pull request through production: the stages a team already owns */
.pip-brace{grid-column:3/-1;margin-top:18px;border-top:1px solid rgba(243,241,234,.22);
  padding-top:10px;position:relative;font-size:12px;color:rgba(243,241,234,.6)}
.pip-brace b{color:#F3F1EA;font-weight:500}

@media(max-width:900px){
  .pip-rail{grid-template-columns:1fr;padding:14px 0 0 24px;row-gap:13px}
  .pip-rail::before{left:6px;right:auto;top:14px;bottom:7px;width:2px;height:auto}
  .pip-rail>i{left:6px;top:14px;right:auto;width:2px;bottom:auto;height:100%;
    transform:scaleY(0);transform-origin:50% 0;transition:transform .55s ease}
  .pip-node::before{left:-24px;top:0}
  .pip-brace{grid-column:1;margin-left:0}
}

/* ---- the showcase panels on the dark glass the app itself uses ----
   Every tab but Storefront changes: that one shows a product page, and a
   product page is a storefront, so it keeps its paper.
   The result panel beside the conversation was a white window. It is the
   same glass as the composer now, with the type and rules turned for a
   dark ground; the Hyva storefront mock stays a storefront. */
.sh-r .sv:not([data-for="pdp"]) .sv-pnl{background:rgba(20,19,15,.58);border-color:rgba(243,241,234,.18);backdrop-filter:blur(9px);color:#F3F1EA}
.sh-r .sv:not([data-for="pdp"]) .sv-ph{border-bottom-color:rgba(243,241,234,.14)}
.sh-r .sv:not([data-for="pdp"]) .sv-ph b,.sh-r .sv:not([data-for="pdp"]) .sv-from,.sh-r .sv:not([data-for="pdp"]) .sv-arw,.sh-r .sv:not([data-for="pdp"]) .sv-rows .sv-hd0,.sh-r .sv:not([data-for="pdp"]) .sv-eid p,.sh-r .sv:not([data-for="pdp"]) .sv-ba h5,
.sh-r .sv:not([data-for="pdp"]) .pdp-lb,.sh-r .sv:not([data-for="pdp"]) .sv-shead{color:rgba(243,241,234,.45)}
.sh-r .sv:not([data-for="pdp"]) .sv-ph span,.sh-r .sv:not([data-for="pdp"]) .sv-lead,.sh-r .sv:not([data-for="pdp"]) .sv-mono b,.sh-r .sv:not([data-for="pdp"]) .sv-chk li b,.sh-r .sv:not([data-for="pdp"]) .sv-chk code,.sh-r .sv:not([data-for="pdp"]) .sv-eid h4,
.sh-r .sv:not([data-for="pdp"]) .sv-ba .sv-m b,.sh-r .sv:not([data-for="pdp"]) .pdp-price,.sh-r .sv:not([data-for="pdp"]) .sv-pnl h4,.sh-r .sv:not([data-for="pdp"]) .sv-pnl h5{color:#F3F1EA}
.sh-r .sv:not([data-for="pdp"]) .sv-ph s{color:rgba(243,241,234,.4)}
.sh-r .sv:not([data-for="pdp"]) .sv-mono,.sh-r .sv:not([data-for="pdp"]) .sv-pf span,.sh-r .sv:not([data-for="pdp"]) .sv-chk li,.sh-r .sv:not([data-for="pdp"]) .sv-pnl p{color:rgba(243,241,234,.66)}
.sh-r .sv:not([data-for="pdp"]) .sv-to,.sh-r .sv:not([data-for="pdp"]) .sv-ph em,.sh-r .sv:not([data-for="pdp"]) .sv-pf b,.sh-r .sv:not([data-for="pdp"]) .sv-chk li i{color:#9DC49F}
.sh-r .sv:not([data-for="pdp"]) .sv-rows .sv-row,.sh-r .sv:not([data-for="pdp"]) .sv-shelf,.sh-r .sv:not([data-for="pdp"]) .sv-eid,.sh-r .sv:not([data-for="pdp"]) .sv-pf{border-color:rgba(243,241,234,.12)}
.sh-r .sv:not([data-for="pdp"]) .sv-tag{border-color:rgba(243,241,234,.28);color:rgba(243,241,234,.8)}
.sh-r .sv:not([data-for="pdp"]) .sv-ba{background:rgba(243,241,234,.14)}
.sh-r .sv:not([data-for="pdp"]) .sv-ba>div{background:rgba(20,19,15,.45)}
.sh-r .sv:not([data-for="pdp"]) .sv-ba .sv-bar{background:rgba(243,241,234,.12)}
.sh-r .sv:not([data-for="pdp"]) .sv-eid figure{background:rgba(243,241,234,.08);border-color:rgba(243,241,234,.18)}
.sh-r .sv:not([data-for="pdp"]) .sv-eid figure img,.sh-r .sv:not([data-for="pdp"]) .sv-logo{filter:brightness(0) invert(1);opacity:.85}
.sh-r .sv:not([data-for="pdp"]) .pdp-hero,.sh-r .sv:not([data-for="pdp"]) .pdp-thumbs figure{border-color:rgba(243,241,234,.18);background:rgba(243,241,234,.06)}
/* the strips, the shelf, the before and after labels and the product page, on the same glass */
.sh-r .sv:not([data-for="pdp"]) .sv-rows .sv-hd0,.sh-r .sv:not([data-for="pdp"]) .sv-pf{background:rgba(243,241,234,.07)}
.sh-r .sv:not([data-for="pdp"]) .sv-cat{background:rgba(243,241,234,.06);border-color:rgba(243,241,234,.16)}
.sh-r .sv:not([data-for="pdp"]) .sv-cat b{color:#F3F1EA}
.sh-r .sv:not([data-for="pdp"]) .sv-cat em{color:rgba(243,241,234,.45)}
.sh-r .sv:not([data-for="pdp"]) .sv-cat i img{filter:brightness(0) invert(1);opacity:.85}
.sh-r .sv:not([data-for="pdp"]) .sv-add{color:#9DC49F;border-color:#9DC49F}
.sh-r .sv:not([data-for="pdp"]) .sv-ba .sv-m span,.sh-r .sv:not([data-for="pdp"]) .sv-ba .sv-m em{color:rgba(243,241,234,.62)}
.sh-r .sv:not([data-for="pdp"]) .sv-pdp,.sh-r .sv:not([data-for="pdp"]) .sv-shelf{border-top-color:rgba(243,241,234,.14)}
.sh-r .sv:not([data-for="pdp"]) .sv-pdp-b b,.sh-r .sv:not([data-for="pdp"]) .sv-pdp-b h4{color:#F3F1EA}
.sh-r .sv:not([data-for="pdp"]) .pdp-top{border-bottom-color:rgba(243,241,234,.14);color:rgba(243,241,234,.5)}
.sh-r .sv:not([data-for="pdp"]) .pdp-top b,.sh-r .sv:not([data-for="pdp"]) .pdp-info h4,.sh-r .sv:not([data-for="pdp"]) .pdp-line b,.sh-r .sv:not([data-for="pdp"]) .pdp-sizes b.on{color:#F3F1EA}
.sh-r .sv:not([data-for="pdp"]) .pdp-gal,.sh-r .sv:not([data-for="pdp"]) .pdp-look{border-color:rgba(243,241,234,.14)}
.sh-r .sv:not([data-for="pdp"]) .pdp-thumbs i{border-color:rgba(243,241,234,.18);background:rgba(243,241,234,.06)}
.sh-r .sv:not([data-for="pdp"]) .pdp-thumbs i.on{border-color:#F3F1EA}
.sh-r .sv:not([data-for="pdp"]) .pdp-price em,.sh-r .sv:not([data-for="pdp"]) .pdp-save s{color:rgba(243,241,234,.45)}
.sh-r .sv:not([data-for="pdp"]) .sv-pdp-p s,.sh-r .sv:not([data-for="pdp"]) .sv-pdp-p em{color:rgba(243,241,234,.62)}
.sh-r .sv:not([data-for="pdp"]) .sv-pdp-p b{color:#9DC49F}
.sh-r .sv:not([data-for="pdp"]) .pdp-sw b{border-color:rgba(243,241,234,.3)}
.sh-r .sv:not([data-for="pdp"]) .pdp-sw b.on{box-shadow:inset 0 0 0 2px #14130F;border-color:#F3F1EA}
.sh-r .sv:not([data-for="pdp"]) .pdp-sizes b{border-color:rgba(243,241,234,.26);color:rgba(243,241,234,.66)}
.sh-r .sv:not([data-for="pdp"]) .pdp-sizes b.on{border-color:#F3F1EA}
.sh-r .sv:not([data-for="pdp"]) .pdp-sizes b.out{color:rgba(243,241,234,.35);background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(243,241,234,.1) 4px 5px)}
.sh-r .sv:not([data-for="pdp"]) .pdp-guide,.sh-r .sv:not([data-for="pdp"]) .pdp-save b{color:#9DC49F}
.sh-r .sv:not([data-for="pdp"]) .pdp-line,.sh-r .sv:not([data-for="pdp"]) .pdp-look-r em,.sh-r .sv:not([data-for="pdp"]) .pdp-save{color:rgba(243,241,234,.66)}
.sh-r .sv:not([data-for="pdp"]) .pdp-save{border-color:#9DC49F}
.sh-r .sv:not([data-for="pdp"]) .pdp-cta{background:#F3F1EA;color:#14130F}
.sh-r .sv:not([data-for="pdp"]) .pdp-look-r img{border-color:rgba(243,241,234,.18)}

/* meet agent: the gift box builder Ari builds in step 3 (2026-09-28) */
.ld-hero{container-type:size}
.gb{position:absolute;inset:0;z-index:3;display:grid;grid-template-columns:42% 1fr;align-items:center;gap:4cqw;
  padding:0 6cqw;color:#141310;background:linear-gradient(100deg,#F5EEE6 0 46%,#E8DACB);
  opacity:0;transform:scale(1.03);transition:opacity .6s ease,transform .9s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.mg.ap:is([data-s="3"],[data-s="4"]) .gb{opacity:1;transform:none}
.gb-k{margin:0 0 1.4cqh;font:600 1.25cqw/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#8A6A4B}
.gb h4{margin:0;font:400 3.9cqw/1.04 Georgia,"Times New Roman",serif;letter-spacing:-.01em}
.gb-s{margin:2cqh 0 0;font-size:1.55cqw;line-height:1.4;color:#5B5147;max-width:30ch}
.gb-n{margin-top:4cqh;display:flex;flex-direction:column;gap:1.4cqh;font-size:1.5cqw;font-weight:600}
.gb-n i{display:block;height:3px;background:rgba(20,19,15,.12)}
.gb-n b{display:block;height:100%;width:0;background:#2D572F;transition:width .5s cubic-bezier(.3,1,.5,1)}
.mg.gb1 .gb-n b{width:33.4%}.mg.gb2 .gb-n b{width:66.7%}.mg.gb3 .gb-n b{width:100%}
.mg.gbf .gb-n span{color:#2D572F}
.gb-p{margin-top:2.6cqh;display:flex;gap:1.2cqw;align-items:baseline;font-family:Georgia,"Times New Roman",serif}
.gb-p s{font-size:1.9cqw;color:#8B8177}
.gb-p b{font-size:3.3cqw;font-weight:400;transition:color .4s}
.mg.gbf .gb-p b{color:#2D572F}
.gb-btn{display:inline-block;margin-top:3cqh;background:#141310;color:#fff;font-size:1.45cqw;padding:1.3cqw 2.4cqw;opacity:.3;transition:opacity .4s}
.mg.gbf .gb-btn{opacity:1;animation:gbPulse 1.4s ease-out 2}
@keyframes gbPulse{0%{box-shadow:0 0 0 0 rgba(45,87,47,.55)}100%{box-shadow:0 0 0 1.6cqw rgba(45,87,47,0)}}
.gb-box{position:relative;background:linear-gradient(160deg,#3B251A,#1E120C);padding:3cqw 2.6cqw 3.2cqw;
  box-shadow:0 3cqw 5cqw -2cqw rgba(40,20,10,.6);transform:rotate(-2deg);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.mg.gbf .gb-box{transform:rotate(-2deg) scale(1.03)}
.gb-lid{display:block;text-align:center;font:600 1.15cqw/1 var(--mono);letter-spacing:.3em;color:#D8B77A;margin-bottom:2.2cqw;white-space:nowrap}
.gb-sl{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw}
.gb-sl i{aspect-ratio:3/4;display:grid;place-items:center;overflow:hidden;background:rgba(0,0,0,.35);
  box-shadow:inset 0 .4cqw 1.2cqw rgba(0,0,0,.6);outline:1px dashed rgba(216,183,122,.35);outline-offset:-1px}
.gb-sl img{width:86%;height:86%;object-fit:contain;background:#fff;opacity:0;
  transform:translateY(-70%) scale(.8) rotate(-8deg);transition:opacity .3s,transform .6s cubic-bezier(.3,1.5,.5,1)}
.mg.gb1 .gb-sl i:nth-child(1) img,.mg.gb2 .gb-sl i:nth-child(2) img,.mg.gb3 .gb-sl i:nth-child(3) img{opacity:1;transform:none}
.gb-rib{position:absolute;left:-1.2cqw;right:-1.2cqw;bottom:5cqw;height:1.1cqw;background:linear-gradient(90deg,#B8924F,#E6C98B,#B8924F);
  transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.3,1,.5,1);box-shadow:0 .3cqw .6cqw rgba(0,0,0,.3)}
.mg.gbf .gb-rib{transform:scaleX(1)}
.gb-add{display:none}
.mg.ap:is([data-s="3"],[data-s="4"]) .gb-add{display:block;width:max-content;margin:4px auto 0;font-style:normal;font-size:7.5px;
  padding:3px 7px;border:1px solid #141310;color:#141310;transition:background .3s,color .3s}
.mg.gb1 .mg-t:nth-child(1) .gb-add,.mg.gb2 .mg-t:nth-child(2) .gb-add,.mg.gb3 .mg-t:nth-child(3) .gb-add{background:#2D572F;border-color:#2D572F;color:#fff}
@container (max-width:480px){
  .gb{grid-template-columns:48% 1fr;padding:0 5cqw;gap:4cqw}
  .gb-k,.gb-s{display:none}
  .gb h4{font-size:6.4cqw}
  .gb-n{margin-top:3cqh;font-size:3.3cqw;gap:1cqh}
  .gb-p{margin-top:2cqh}.gb-p s{font-size:3.4cqw}.gb-p b{font-size:5.6cqw}
  .gb-btn{margin-top:2.4cqh;font-size:3cqw;padding:1.6cqw 3cqw}
  .gb-lid{font-size:2.1cqw;letter-spacing:.2em}
  .gb-box{padding:3cqw 2.4cqw 3.4cqw}
}
@media(prefers-reduced-motion:reduce){.gb,.gb-sl img,.gb-box,.gb-rib{transition:none}.mg.gbf .gb-btn{animation:none}}
.gb-p s:empty{display:none}
/* meet agent: the Northfield store Ari changes in step 3 (2026-09-30).
   Everything is sized in --u (1% of the store width) so it scales and never crops:
   on desktop the window has a fixed height, so the store also shrinks to fit it. */
.mg-win{background:#fff}
.mg-app .mg-win{container-type:size;display:flex;align-items:flex-start;justify-content:center}
.nf{--u:min(1cqw,1.1cqh);margin:0 auto;width:calc(var(--u)*100);flex:none;color:#1d1c18;font-family:Inter,-apple-system,sans-serif;background:#fff}

.nf-util{position:relative;height:calc(var(--u)*4.2);background:#1d1c18;color:#fff;font-size:calc(var(--u)*1.55);display:grid;place-items:center;overflow:hidden}
.nf-util span{grid-area:1/1;transition:opacity .5s,transform .5s}
.nf-u1{opacity:0;transform:translateY(100%);font-weight:600}
.mg.nf1 .nf-u0{opacity:0;transform:translateY(-100%)}.mg.nf1 .nf-u1{opacity:1;transform:none}
.mg.nf1 .nf-util{background:#2D572F;transition:background .5s}
.nf-head{display:flex;align-items:center;gap:calc(var(--u)*3);padding:calc(var(--u)*2) calc(var(--u)*3);border-bottom:1px solid #eee}
.nf-logo{font-size:calc(var(--u)*2.3);letter-spacing:.22em;font-weight:600}
.nf-head nav{display:flex;gap:calc(var(--u)*2.2);font-size:calc(var(--u)*1.6);color:#444}
.nf-sale{transition:color .4s}.mg.nf1 .nf-sale{color:#B3261E;font-weight:600}
.nf-ic{margin-left:auto;display:flex;gap:calc(var(--u)*1.4)}.nf-ic i{width:calc(var(--u)*1.9);height:calc(var(--u)*1.9);border:1.5px solid #1d1c18;border-radius:50%}
.nf-hero{position:relative;margin:calc(var(--u)*2) calc(var(--u)*3) 0;height:calc(var(--u)*30)}
.nf-h0,.nf-h1{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;align-items:center;transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.nf-h0{background:#EFE7DA}.nf-h1{background:#1F3A22;color:#F3F1EA;opacity:0;transform:scale(1.03)}
.mg.nf1 .nf-h0{opacity:0}.mg.nf1 .nf-h1{opacity:1;transform:none}
.nf-hc{padding:0 calc(var(--u)*4);display:flex;flex-direction:column;gap:calc(var(--u)*1.2)}
.nf-hc em{font-style:normal;font-size:calc(var(--u)*1.4);letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.nf-hc h4{margin:0;font:400 calc(var(--u)*3.4)/1.1 Georgia,"Times New Roman",serif;letter-spacing:-.01em}
.nf-h1 h4{font-size:calc(var(--u)*3)}
.nf-hc span{align-self:flex-start;margin-top:calc(var(--u)*1);font-size:calc(var(--u)*1.5);padding:calc(var(--u)*1) calc(var(--u)*2);background:#1d1c18;color:#fff}
.nf-h1 .nf-hc span{background:#F3F1EA;color:#1F3A22}
.nf-h0 img,.nf-h1 img{width:100%;height:calc(var(--u)*30);object-fit:contain;padding:calc(var(--u)*2)}
.nf-h0 img,.nf-h1 img{background:#F4F1EC}
.nf-row{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--u)*2.4) calc(var(--u)*3) calc(var(--u)*1.4)}
.nf-row b{position:relative;display:grid;font-size:calc(var(--u)*2);font-weight:600}
.nf-row b span{grid-area:1/1;transition:opacity .4s}.nf-r1{opacity:0}.mg.nf3 .nf-r0{opacity:0}.mg.nf3 .nf-r1{opacity:1}
.nf-chip{font-style:normal;font-size:calc(var(--u)*1.4);padding:calc(var(--u)*.6) calc(var(--u)*1.2);border:1px solid #2D572F;color:#2D572F;opacity:0;transition:opacity .4s}
.mg.nf3 .nf-chip{opacity:1}
.nf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*1.8);padding:0 calc(var(--u)*3) calc(var(--u)*3)}
.nf-t{position:relative;display:flex;flex-direction:column;gap:calc(var(--u)*.5);min-width:0}
.nf-im{aspect-ratio:1;background:#F4F1EC;display:block}.nf-im img{width:100%;height:100%;object-fit:contain;display:block}
.nf-t b{font-size:calc(var(--u)*1.55);font-weight:500;margin-top:calc(var(--u)*.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf-pr{font-size:calc(var(--u)*1.55);display:flex;gap:calc(var(--u)*.8)}.nf-pr i{font-style:normal}
.nf-pr s{display:none;color:#999}
.nf-s .nf-pr i{transition:color .4s}
.mg.nf2 .nf-s .nf-pr s{display:inline}.mg.nf2 .nf-s .nf-pr i{color:#B3261E;font-weight:600}
.nf-bd{position:absolute;left:calc(var(--u)*1);top:calc(var(--u)*1);font-style:normal;font-size:calc(var(--u)*1.4);font-weight:700;padding:calc(var(--u)*.4) calc(var(--u)*.9);background:#B3261E;color:#fff;opacity:0;transform:scale(.6);transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.mg.nf2 .nf-bd{opacity:1;transform:none}
.nf-s:nth-child(2) .nf-bd{transition-delay:.12s}.nf-s:nth-child(3) .nf-bd{transition-delay:.24s}
.nf-pr i{display:none}.nf-t:not(.nf-s) .nf-pr i{display:inline}.nf-s .nf-pr s{display:inline;text-decoration:none;color:inherit}
.mg.nf2 .nf-s .nf-pr s{text-decoration:line-through;color:#999}.mg.nf2 .nf-s .nf-pr i{display:inline}
@media(prefers-reduced-motion:reduce){.nf *{transition:none!important}}
.nf-im,.nf-h0 img,.nf-h1 img{background:#F2EEE7}.nf-im img,.nf-h0 img,.nf-h1 img{mix-blend-mode:multiply}
.nf-h0 img,.nf-h1 img{padding:0}
.nf-hi{display:block;height:100%;background:#F2EEE7;isolation:isolate}.nf-hi img{display:block;width:100%;height:calc(var(--u)*30);object-fit:contain;mix-blend-mode:multiply;background:none}
/* showcase, upgrade tab: thinking, the plan, and a preview store (2026-09-30) */
.sh-think{display:flex;align-items:center;gap:4px;font-size:12.5px;color:rgba(243,241,234,.6);opacity:0;transition:opacity .3s}
.sh-think.in{opacity:1}
.sh-think i{width:5px;height:5px;border-radius:50%!important;background:#9DC49F;animation:shdot 1s infinite ease-in-out}
.sh-think i:nth-child(2){animation-delay:.15s}.sh-think i:nth-child(3){animation-delay:.3s}
.sh-think span{margin-left:6px}
.sh-think.done i{animation:none;opacity:.35}
@keyframes shdot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
.sh-plan{border:1px solid rgba(243,241,234,.16);background:rgba(243,241,234,.04);padding:9px 12px;font-size:12px;color:rgba(243,241,234,.78);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.sh-plan.in{opacity:1;transform:none}
.sh-plan b{display:block;font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#9DC49F;margin-bottom:6px}
.sh-plan ol{margin:0;padding-left:16px;display:flex;flex-direction:column;gap:3px}
.sv[data-for="up"] .ab{flex:1;min-height:0;width:100%;container-type:size;display:flex;justify-content:center;align-items:flex-start}
.ab-s{--u:min(1cqw,1.08cqh);width:calc(var(--u)*100);flex:none;background:#fff;color:#1d1c18;font-family:Inter,-apple-system,sans-serif;border:1px solid rgba(243,241,234,.2);overflow:hidden}
.ab-bar{display:flex;align-items:center;gap:calc(var(--u)*2);padding:calc(var(--u)*1.4) calc(var(--u)*2.4);background:#1d1c18;color:#F3F1EA;font-size:calc(var(--u)*1.55)}
.ab-pv{opacity:.6}
.ab-v s{opacity:.55;margin:0 calc(var(--u)*.6)}.ab-v b{display:none;font-weight:600;color:#9DC49F;margin-left:calc(var(--u)*.6)}
.shc.ap .ab-v s{opacity:.45}.shc.ap .ab-v b{display:inline}
.ab-st{margin-left:auto;display:flex;align-items:center;gap:calc(var(--u)*.8)}
.ab-st i{width:calc(var(--u)*1.1);height:calc(var(--u)*1.1);border-radius:50%!important;background:#CF9536;animation:shdot 1.2s infinite}
.ab-st em{font-style:normal}.ab-st1{display:none;color:#9DC49F}
.shc.ap .ab-st i{background:#9DC49F;animation:none}.shc.ap .ab-st0{display:none}.shc.ap .ab-st1{display:inline}
.ab-head{display:flex;align-items:center;gap:calc(var(--u)*3.5);padding:calc(var(--u)*2.2) calc(var(--u)*3);border-bottom:1px solid #eee}
.ab-head b{font:600 calc(var(--u)*2.4)/1 Georgia,serif;letter-spacing:.08em}
.ab-head nav{display:flex;gap:calc(var(--u)*2.4);font-size:calc(var(--u)*1.6);color:#555}
.ab-hero{display:grid;grid-template-columns:1fr 1fr;margin:calc(var(--u)*2.4) calc(var(--u)*3) 0;background:#E7E3DA;height:calc(var(--u)*26);align-items:center}
.ab-hero div{padding:0 calc(var(--u)*4);display:flex;flex-direction:column;gap:calc(var(--u)*1.2)}
.ab-hero em{font-style:normal;font-size:calc(var(--u)*1.4);letter-spacing:.14em;text-transform:uppercase;color:#6b6457}
.ab-hero h4{margin:0;font:400 calc(var(--u)*3.4)/1.1 Georgia,serif}
.ab-hero div>span{align-self:flex-start;font-size:calc(var(--u)*1.5);padding:calc(var(--u)*1) calc(var(--u)*2);background:#23321F;color:#fff}
.ab-hi{height:calc(var(--u)*26);background:#E7E3DA;isolation:isolate;display:block}.ab-hi img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;display:block}
.ab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*2);padding:calc(var(--u)*2.4) calc(var(--u)*3) calc(var(--u)*3)}
.ab-t{display:flex;flex-direction:column;gap:calc(var(--u)*.5);min-width:0}
.ab-im{aspect-ratio:4/5;background:#F2EEE7;isolation:isolate;display:block}.ab-im img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;display:block}
.ab-t b{font-size:calc(var(--u)*1.6);font-weight:500;margin-top:calc(var(--u)*.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ab-t i{font-style:normal;font-size:calc(var(--u)*1.6)}
@media(prefers-reduced-motion:reduce){.sh-think i,.ab-st i{animation:none}}
.sv[data-for="any"] .sv-chk li{display:flex;align-items:center;gap:10px}.sv-any{margin-left:auto;font-style:normal;font-size:11px;color:rgba(243,241,234,.5);white-space:nowrap}
/* fits: six stages since the 2026-09-30 correction (Ari repo, PR, QA, human, your environments, production) */
@media(min-width:941px){.pip-rail{--n:6;grid-template-columns:repeat(6,minmax(0,1fr))}.pip-brace{grid-column:5/-1}}
.pip-node.qa.on::before{background:#9DC49F;border-color:#9DC49F}
/* the upgrade preview store fills its panel like the other panels (2026-09-30) */
.sv[data-for="up"] .ab{align-items:stretch}
.ab-s{--u:min(1cqw,1.5cqh);width:100%;height:100%;display:flex;flex-direction:column;border:1px solid rgba(243,241,234,.18)}
.ab-hero{flex:0 0 auto;height:auto;min-height:calc(var(--u)*22);align-items:stretch}
.ab-hero div{justify-content:center}
.ab-hi{height:auto;min-height:100%;position:relative}.ab-hi img{position:absolute;inset:0}
.ab-grid{flex:1 1 auto;min-height:0;align-items:stretch}
.ab-t{min-height:0}.ab-im{flex:1 1 auto;min-height:0;aspect-ratio:auto;position:relative}.ab-im img{position:absolute;inset:0}
/* the upgrade store on a narrow panel: product pictures keep their shape instead of stretching */
@container (max-width:460px){.ab-grid{align-items:start}.ab-im{flex:none;aspect-ratio:4/5}}
.sh-thread{scroll-behavior:smooth}
.ab-more,.ab-news{display:none}
@container (max-width:460px){.ab-more{display:grid;padding-top:0}.ab-news{display:flex;flex-direction:column;gap:calc(var(--u)*1);margin:0 calc(var(--u)*3) calc(var(--u)*3);padding:calc(var(--u)*3);background:#23321F;color:#F3F1EA}
.ab-news b{font:400 calc(var(--u)*3)/1.1 Georgia,serif}.ab-news span{font-size:calc(var(--u)*1.7);opacity:.8}.ab-news em{align-self:flex-start;font-style:normal;font-size:calc(var(--u)*1.6);padding:calc(var(--u)*1) calc(var(--u)*2);background:#F3F1EA;color:#23321F;margin-top:calc(var(--u)*.6)}
.ab-s{overflow:hidden}}
@container (max-width:460px){.ab-grid{flex:none;padding-bottom:calc(var(--u)*2)}.ab-im{aspect-ratio:1}.ab-news{display:none}}
/* the store fills its window (2026-09-30) */
.mg-app .mg-win{align-items:stretch}
.nf{width:100%;min-height:100%;display:flex;flex-direction:column;margin:0}
.nf-hero{flex:1 1 auto;height:auto;min-height:calc(var(--u)*24)}
.nf-h0 img,.nf-h1 img,.nf-hi img{height:100%!important}
.nf-hi{height:auto;align-self:stretch}
.nf-h0,.nf-h1{grid-template-rows:100%;overflow:hidden}.nf-hi{height:100%;min-height:0;overflow:hidden}.nf-hi img{position:static;width:100%;height:100%!important;object-fit:contain}
.nf-hi img{object-fit:cover!important;mix-blend-mode:normal!important}
/* progress bars only fill once their demo is playing */
#mgw:not(.run) .mg-step::before,#sh:not(.run) .shitem::before{width:0!important;transition:none!important}
/* Ashby preview: every photo fills its frame edge to edge */
.ab-hi{position:relative;overflow:hidden;display:block}
.ab-hi img,.ab-im img{object-fit:cover!important;mix-blend-mode:normal!important}
.ab-im{overflow:hidden}
.nf-hi img,.nf-im img,.nf-t img{object-fit:cover!important;mix-blend-mode:normal!important}