/* section primitives shared by every content page */
.kpi{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);margin-top:clamp(26px,3vw,42px)}
.kpi div{padding:26px 22px 24px 0;border-right:1px solid var(--line)}
.kpi div+div{padding-left:clamp(18px,2vw,28px)}
.kpi div:last-child{border-right:0}
.kpi b{display:block;font-family:var(--mono);font-size:clamp(24px,2.8vw,34px);font-weight:400;letter-spacing:-.03em}
.kpi span{display:block;margin-top:6px;font-size:13.5px;color:var(--ink60)}
@media(max-width:760px){.kpi{grid-template-columns:1fr 1fr}
  .kpi div:nth-child(odd){padding-left:0}}
.quote{border-left:2px solid var(--green);padding-left:18px;margin:clamp(24px,3vw,38px) 0}
.quote p{font-family:var(--serif);font-size:clamp(18px,2vw,23px);line-height:1.4;letter-spacing:-.015em}
.quote cite{display:block;margin-top:10px;font-style:normal;font-size:13.5px;color:var(--ink40)}
.faqs{border-top:1px solid var(--ink);margin-top:clamp(24px,3vw,40px)}
.faqs details{border-bottom:1px solid var(--line)}
.faqs summary{list-style:none;cursor:pointer;padding:21px 0 20px;font-size:16.5px;font-weight:500;letter-spacing:-.015em;
  display:flex;justify-content:space-between;gap:20px}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{content:"+";color:var(--ink40);font-weight:400}
.faqs details[open] summary::after{content:"\2013"}
.faqs p{padding:0 0 20px;color:var(--ink60);max-width:72ch}
.steps4{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);margin-top:clamp(24px,3vw,42px)}
@media(max-width:820px){.steps4{grid-template-columns:1fr 1fr}
  .steps4 div:nth-child(odd){padding-left:0}}
.steps4 div{padding:28px 24px 26px 0;border-right:1px solid var(--line)}
.steps4 div+div{padding-left:clamp(18px,2vw,28px)}
.steps4 div:last-child{border-right:0}
.steps4 .n{font-family:var(--mono);font-size:12px;color:var(--green)}
.steps4 h4{font-size:16px;font-weight:500;margin:9px 0 6px;letter-spacing:-.015em}
.steps4 p{font-size:14px;color:var(--ink60);line-height:1.5}

/* ---- new primitives ---- */
.figpair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px);margin-top:clamp(24px,3vw,42px)}
@media(max-width:720px){.figpair{grid-template-columns:1fr}}
.figpair img{width:100%;aspect-ratio:5/4;object-fit:cover;display:block}
.figpair.sq img{aspect-ratio:1/1}
.figpair figcaption{margin-top:9px;font-size:13px;color:var(--ink40);font-family:var(--mono)}

.imgtext{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,3vw,46px);align-items:center;margin-top:clamp(24px,3vw,42px)}
@media(max-width:820px){.imgtext{grid-template-columns:1fr}}
.imgtext img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.imgtext.flip>figure{order:2}
.imgtext h3{font-size:clamp(20px,2.2vw,27px);font-weight:400;letter-spacing:-.02em;line-height:1.2}
.imgtext p{margin-top:14px;color:var(--ink60);max-width:52ch}
.imgtext figcaption{margin-top:9px;font-size:12.5px;color:var(--ink40);font-family:var(--mono)}

.tline{margin-top:clamp(26px,3vw,44px);border-top:1px solid var(--ink)}
.tline .r0{display:grid;grid-template-columns:96px 1fr 74px;gap:18px;align-items:baseline;
  padding:20px 0 19px;border-bottom:1px solid var(--line)}
.tline .t{font-family:var(--mono);font-size:12.5px;color:var(--green)}
.tline .w{font-size:16px;letter-spacing:-.012em}
.tline .w em{display:block;font-style:normal;font-size:13.5px;color:var(--ink60);margin-top:4px;max-width:60ch}
.tline .d{font-family:var(--mono);font-size:12.5px;color:var(--ink40);text-align:right}
@media(max-width:640px){.tline .r0{grid-template-columns:74px 1fr}.tline .d{display:none}}

.big{display:flex;align-items:baseline;gap:clamp(16px,2.4vw,34px);flex-wrap:wrap;margin-top:clamp(24px,3vw,40px)}
.big b{font-family:var(--mono);font-weight:400;font-size:clamp(56px,10vw,132px);line-height:.86;letter-spacing:-.05em}
.big p{max-width:38ch;color:var(--ink60);font-size:15.5px}

.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink);margin-top:clamp(24px,3vw,42px)}
@media(max-width:820px){.cols3{grid-template-columns:1fr}}
.cols3>div{padding:30px 28px 28px 0;border-right:1px solid var(--line)}
.cols3>div+div{padding-left:clamp(20px,2.2vw,32px)}
.cols3>div:last-child{border-right:0}
@media(max-width:820px){.cols3>div{border-right:0;border-bottom:1px solid var(--line)}
  .cols3>div+div{padding-left:0}}
.cols3 h4{font-size:17px;font-weight:500;letter-spacing:-.015em;margin-bottom:8px}
.cols3 p{font-size:14.5px;color:var(--ink60);line-height:1.55}
.cols3 img{width:100%;aspect-ratio:16/10;object-fit:cover;margin-bottom:14px;display:block}

.sec.dark .cols3{border-top-color:rgba(243,241,234,.4)}
.sec.dark .cols3>div{border-right-color:rgba(243,241,234,.16)}
.sec.dark .cols3 p,.sec.dark .tline .w em,.sec.dark .big p{color:rgba(243,241,234,.62)}
.sec.dark .tline{border-top-color:rgba(243,241,234,.4)}
.sec.dark .tline .r0{border-bottom-color:rgba(243,241,234,.16)}
.sec.dark .tline .t{color:#9DC49F}
.sec.dark .tline .d{color:rgba(243,241,234,.45)}

/* diagrams inherit the section theme */
body,.sec{--ln:#D3CCBC;--pnl:#F6F4EE;--hl:#E9EEE6;--acc:#2D572F;--onacc:#FFFFFF}
.sec.dark{--ln:rgba(243,241,234,.32);--pnl:rgba(255,255,255,.055);--hl:rgba(157,196,159,.16);
  --acc:#9DC49F;--onacc:#14130F}
.sec.dark .dia{background:rgba(255,255,255,.045);border-color:rgba(243,241,234,.18)}
.sec.dark .diacap{color:rgba(243,241,234,.45)}
.sec.dark .kpi{border-top-color:rgba(243,241,234,.45)}
.sec.dark .kpi div{border-right-color:rgba(243,241,234,.16)}
.sec.dark .kpi span{color:rgba(243,241,234,.62)}
.sec.dark .steps4{border-top-color:rgba(243,241,234,.45)}
.sec.dark .steps4 div{border-right-color:rgba(243,241,234,.16)}
.sec.dark .steps4 p{color:rgba(243,241,234,.62)}
.sec.dark .steps4 .n{color:#9DC49F}
.sec.dark .faqs{border-top-color:rgba(243,241,234,.45)}
.sec.dark .faqs details{border-bottom-color:rgba(243,241,234,.16)}
.sec.dark .faqs p{color:rgba(243,241,234,.62)}
.sec.dark .ticks li{border-bottom-color:rgba(243,241,234,.16)}
.sec.dark .figpair figcaption,.sec.dark .imgtext figcaption{color:rgba(243,241,234,.45)}
.sec.dark .imgtext p{color:rgba(243,241,234,.62)}
.splitdia{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}

/* ---- use case cards ---- */
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,26px);
  margin-top:clamp(24px,3vw,42px)}
@media(max-width:760px){.cards2{grid-template-columns:1fr}}
.card2{display:block;border:1px solid var(--line);padding:clamp(16px,1.8vw,22px);
  background:var(--card);transition:border-color .2s ease,transform .2s ease}
.card2:hover{border-color:var(--ink)}
.card2 img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;margin-bottom:16px}
.card2 .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green)}
.card2 h3{font-size:clamp(18px,1.9vw,22px);font-weight:500;letter-spacing:-.02em;margin:7px 0 8px}
.card2 p{font-size:14.5px;line-height:1.55;color:var(--ink60);max-width:46ch}
.card2 .go{display:inline-block;margin-top:14px;font-size:13.5px;color:var(--ink);
  border-bottom:1px solid var(--line2)}
.card2:hover .go{border-bottom-color:var(--ink)}
.diacap{margin-top:14px;font-size:13px;color:var(--ink40);max-width:70ch}
.sec.dark .diacap{color:rgba(243,241,234,.45)}

/* ================= product demos, in the language of the hero ================= */
.dmo{position:relative;overflow:hidden;background:#141310;
  margin-top:clamp(24px,3vw,42px);padding:clamp(16px,2.2vw,30px);
  box-shadow:0 1px 1px rgba(20,19,15,.05),0 40px 90px -60px rgba(20,19,15,.7)}
.dmo-wash{position:absolute;inset:0;z-index:0}
.dmo-in{position:relative;z-index:2;display:grid;gap:clamp(12px,1.6vw,20px)}
.dmo-in.dm-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.dmo-in.dm-three{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.dmo-in.dm-side{grid-template-columns:minmax(0,340px) minmax(0,1fr);align-items:stretch}
@media(max-width:1020px){.dmo-in.dm-three{grid-template-columns:1fr}}
@media(max-width:860px){.dmo-in.dm-two,.dmo-in.dm-side{grid-template-columns:1fr}}

/* a light panel, the way the store window reads on the homepage */
.dw{background:#FBFAF6;border:1px solid rgba(20,19,15,.14);overflow:hidden;
  display:flex;flex-direction:column;min-width:0}
.dw-h{display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink)}
.dw-h b{font-weight:500;letter-spacing:-.01em}
.dw-h span{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink40)}
.dw-b{padding:4px 0}
.dw-b.pad{padding:14px}
.dw-f{margin-top:auto;display:flex;gap:14px;flex-wrap:wrap;padding:10px 14px;
  border-top:1px solid var(--line);background:var(--sunk);font-size:10.5px;color:var(--ink60)}
.dw-f b{color:var(--green);font-weight:400}

/* a row of the kind the upgrade run and the sync log are made of */
.wr{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line)}
.wr:last-child{border-bottom:0}
.wr .l{font-size:11.5px;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wr .n{font-size:10.5px;color:var(--ink40);margin-left:auto;white-space:nowrap}
.wr .m{font-family:var(--mono);font-size:10.5px;color:var(--ink40);white-space:nowrap}
.wr.wr-lab{background:var(--sunk);border-bottom:1px solid var(--line)}
.wr.wr-lab .l{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink40)}
.pill{font-family:var(--mono);font-size:10px;border:1px solid var(--line);padding:2px 6px;
  color:var(--ink60);white-space:nowrap}
.pill.ok{border-color:var(--green);color:var(--green)}
.pill.warn{border-color:var(--amber);color:var(--amber)}
.pill.bad{border-color:var(--rust);color:var(--rust)}
.pill.mute{border-color:var(--line);color:var(--ink40)}

/* a terminal, for the runs that really are commands */
.term{background:rgba(20,19,15,.72);border:1px solid rgba(243,241,234,.16);
  padding:14px 16px;font-family:var(--mono);font-size:11.5px;line-height:1.9;
  color:rgba(243,241,234,.72);overflow-x:auto}
.term i{font-style:normal;color:rgba(243,241,234,.38)}
.term b{font-weight:400;color:#F3F1EA}
.term u{text-decoration:none;color:#9DC49F}
.term s{text-decoration:none;color:#D2A15E}

/* what moved, the list a person actually reads */
.dfx{display:flex;flex-direction:column}
.dmo-in>.dfx,.dmo-in>.mx,.dmo-in>.cwin{background:#FBFAF6;border:1px solid rgba(20,19,15,.14)}
.dfx div{display:flex;gap:10px;align-items:baseline;padding:9px 14px;border-bottom:1px solid var(--line)}
.dfx div:last-child{border-bottom:0}
.dfx i{font-style:normal;font-family:var(--mono);font-size:11px;width:12px;flex:none}
.dfx .add i{color:var(--green)}
.dfx .chg i{color:var(--amber)}
.dfx p{font-size:12px;color:var(--ink80);margin:0}
.dfx em{font-style:normal;color:var(--ink40);font-size:11px;margin-left:auto;white-space:nowrap;
  font-family:var(--mono)}

/* who can do what */
.mx{width:100%;border-collapse:collapse;font-size:12px}
.mx th{text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink40);font-weight:400;padding:11px 14px;
  border-bottom:1px solid var(--line);white-space:nowrap}
.mx td{padding:10px 14px;border-bottom:1px solid var(--line);color:var(--ink80)}
.mx tr:last-child td{border-bottom:0}
.mx td:first-child{font-weight:500;color:var(--ink)}
.mx td.mx-y{color:var(--green);font-family:var(--mono)}
.mx td.mx-n{color:var(--ink40);font-family:var(--mono)}
/* one column of names, then equal columns of yes and no that line up under their headers */
.mx{table-layout:fixed}
.mx th:first-child,.mx td:first-child{width:34%}
.mx th:not(:first-child),.mx td:not(:first-child){text-align:center;padding-left:8px;padding-right:8px}

/* the chat column, reusing the hero bubbles */
.dth{display:flex;flex-direction:column;gap:10px;justify-content:flex-end;min-width:0}
.dth .hb{opacity:1;transform:none}
.dmo .diacap{color:rgba(243,241,234,.5);margin-top:12px}
.dmo-cap{position:relative;z-index:2;margin-top:12px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(243,241,234,.42)}

/* a live line, same as the homepage publishes with */
.dlive{display:flex;align-items:center;gap:11px;padding:12px 14px;
  border:1px solid rgba(243,241,234,.22);background:rgba(20,19,15,.6);color:#F3F1EA}
.dlive i{width:7px;height:7px;border-radius:50%;background:#7FA47F;flex:none}
.dlive b{font-size:12.5px;font-weight:500}
.dlive span{font-size:11.5px;color:rgba(243,241,234,.6);margin-left:auto;text-align:right}

/* the product grid, borrowed from the hero so a category reads as a category */
.cwin{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:12px}
@media(max-width:620px){.cwin{grid-template-columns:repeat(2,1fr)}}
.ctile{position:relative;border:1px solid var(--line);background:#fff;overflow:hidden}
.ctile img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.ctile .t{padding:7px 8px 9px}
.ctile h6{margin:0;font-size:10.5px;font-weight:500;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ctile .p{display:flex;gap:5px;align-items:baseline;margin-top:3px;font-family:var(--mono);font-size:10px}
.ctile .p s{text-decoration:line-through;color:var(--ink40)}
.ctile .p b{font-weight:400;color:var(--rust)}
.ctile .p u{text-decoration:none;color:var(--ink)}
.ctile .fl{position:absolute;top:5px;left:5px;background:var(--rust);color:#F3F1EA;
  font-family:var(--mono);font-size:9.5px;padding:2px 5px}

/* ============ borrowed from exa.ai: eyebrow, feature rows, switcher, counter ============ */
.kick{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink40);display:block;margin-bottom:14px}
.sec.dark .kick{color:rgba(243,241,234,.45)}

/* the numbered list that carries a page */
.lst{border-top:1px solid var(--ink);margin-top:clamp(24px,3vw,40px)}
.lst-r{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.25fr) auto;
  gap:clamp(14px,2vw,30px);align-items:baseline;padding:24px 0 23px;
  border-bottom:1px solid var(--line)}
@media(max-width:760px){.lst-r{grid-template-columns:32px minmax(0,1fr);row-gap:6px}
  .lst-r .lst-p{grid-column:2}.lst-r .lst-m{grid-column:2;text-align:left}}
.lst-n{font-family:var(--mono);font-size:12.5px;color:var(--green)}
.lst-t{font-size:clamp(17px,1.7vw,20px);font-weight:500;letter-spacing:-.018em;line-height:1.25}
.lst-p{font-size:14.5px;line-height:1.55;color:var(--ink60)}
.lst-m{font-family:var(--mono);font-size:11.5px;color:var(--ink40);text-align:right;white-space:nowrap}
.sec.dark .lst{border-top-color:rgba(243,241,234,.4)}
.sec.dark .lst-r{border-bottom-color:rgba(243,241,234,.16)}
.sec.dark .lst-p{color:rgba(243,241,234,.62)}
.sec.dark .lst-m{color:rgba(243,241,234,.4)}
.sec.dark .lst-n{color:#9DC49F}

/* visual on one side, the claim and its proof on the other */
.frow{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(22px,3.4vw,56px);align-items:center;margin-top:clamp(26px,3.4vw,48px)}
@media(max-width:900px){.frow{grid-template-columns:1fr}}
.frow.flip>*:first-child{order:2}
/* a grid item defaults to min-width:auto, so a wide child pushes the column
   out instead of shrinking it. That is the 13px the phone was scrolling. */
.frow>*{min-width:0}
/* stacked in one section, the rows need their own rhythm, not a section each */
.frow+.frow{margin-top:clamp(52px,6.4vw,96px)}
.hd+.frow{margin-top:clamp(34px,4.2vw,64px)}
/* ---- the agencies hero: Ari at the centre, the storefronts it is connected to around it ----
   Six screenshots of real Magento stores on the app's dark ground, three a
   side, each joined to the mark by a line drawn on the same 1200 by 520 plan
   the tiles are placed on. On a phone the lines go and the tiles fall into
   two columns under the mark. */
.hero-hub{margin-top:clamp(28px,3.4vw,52px)}
.hub{position:relative;aspect-ratio:1200/520;overflow:hidden;background:#171613;
  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)}
.hub-wash{position:absolute;inset:0;z-index:0}
.hub-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1;fill:none;stroke:rgba(243,241,234,.32);stroke-width:1.2}
.hub-lines .hub-dots{fill:rgba(243,241,234,.7);stroke:none}
.hub-t{position:absolute;z-index:2;margin:0;width:20%;aspect-ratio:16/10;overflow:hidden;
  border:1px solid rgba(243,241,234,.26);background:#14130F;box-shadow:0 18px 40px -22px rgba(0,0,0,.7)}
.hub-t img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.hub-l1,.hub-l2,.hub-l3{left:3.3%}
.hub-r1,.hub-r2,.hub-r3{left:76.7%}
.hub-l1,.hub-r1{top:3.5%}
.hub-l2,.hub-r2{top:35.6%}
.hub-l3,.hub-r3{top:67.7%}
.hub-ari{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);
  width:clamp(72px,9vw,116px);aspect-ratio:1;display:grid;place-items:center;
  background:rgba(20,19,15,.62);border:1px solid rgba(243,241,234,.28);backdrop-filter:blur(9px);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.8)}
.hub-ari .hub-mk{display:block;width:54%;height:auto;color:#F3F1EA}
.hub-ari .hub-mk path:last-child{stroke:#9DC49F}
/* on a phone the hub keeps its shape, landscape, Ari in the middle and three
   storefronts a side; the tiles grow so they still read, the lines stay */
@media(max-width:700px){
  .hub{aspect-ratio:1200/1000}
  .hub-t{width:38%}
  .hub-l1,.hub-l2,.hub-l3{left:2%}
  .hub-r1,.hub-r2,.hub-r3{left:60%}
  .hub-l1,.hub-r1{top:3%}
  .hub-l2,.hub-r2{top:36%}
  .hub-l3,.hub-r3{top:69%}
  .hub-ari{width:64px}
}
.frow h3{font-size:clamp(21px,2.4vw,30px);font-weight:500;letter-spacing:-.025em;line-height:1.18}
.frow p{margin-top:12px;font-size:15px;line-height:1.6;color:var(--ink60);max-width:44ch}
.sec.dark .frow p{color:rgba(243,241,234,.66)}
.arrow{display:inline-flex;align-items:center;gap:7px;margin-top:18px;padding:9px 14px;
  background:var(--sunk);font-size:13.5px;color:var(--ink);transition:background .18s ease}
.arrow:hover{background:#E4E0D5}
.arrow i{font-style:normal}
.proof{margin-top:clamp(20px,2.4vw,30px);background:var(--sunk);padding:16px 18px}
.proof b{display:block;font-size:13px;font-weight:500;letter-spacing:-.01em}
.proof span{display:block;margin-top:5px;font-size:13px;color:var(--ink60);line-height:1.5}
.chip{position:absolute;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;background:rgba(20,19,15,.86);color:#F3F1EA;padding:4px 8px;z-index:3}

/* pick a row on the left, the panel on the right changes */
.swx{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(20px,3vw,48px);align-items:start;margin-top:clamp(24px,3vw,42px)}
@media(max-width:900px){.swx{grid-template-columns:1fr}}
.swx-l{display:flex;flex-direction:column;border-left:1px solid var(--line)}
.swx-i{text-align:left;background:none;border:0;font:inherit;cursor:pointer;
  padding:14px 0 14px 18px;margin-left:-1px;border-left:1px solid transparent;
  color:var(--ink40);transition:color .2s ease,border-color .2s ease}
.swx-i b{display:block;font-size:16px;font-weight:500;letter-spacing:-.015em}
.swx-i span{display:none;margin-top:7px;font-size:13.5px;line-height:1.5;color:var(--ink60)}
.swx-i[aria-selected="true"]{color:var(--ink);border-left-color:var(--ink)}
.swx-i[aria-selected="true"] span{display:block}
.swx-i:hover{color:var(--ink80)}
.swx-p>div{display:none}
.swx-p>div[data-on="true"]{display:block}

/* a number that keeps moving, because the product keeps working */
.tickr{border-top:1px solid var(--ink);margin-top:clamp(24px,3vw,40px);padding-top:clamp(22px,2.6vw,34px);
  display:flex;align-items:baseline;gap:clamp(16px,2.4vw,34px);flex-wrap:wrap}
.tickr b{font-family:var(--mono);font-weight:400;font-size:clamp(30px,5vw,62px);
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.tickr span{font-size:14.5px;color:var(--ink60);max-width:34ch}

/* the closing line, centered, one button */
.ctac{text-align:center;padding:clamp(20px,4vw,54px) 0 clamp(8px,1vw,16px)}
.ctac h2{font-size:clamp(30px,4vw,50px);letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
.ctac p{margin:14px auto 0;max-width:44ch;color:var(--ink60);font-size:15.5px}
.ctac .ctab-b{justify-content:center;margin-top:26px}

/* ---- footer ---- */
.foot2{background:var(--paper);color:var(--ink);
  padding:clamp(36px,4.2vw,60px) 0 clamp(22px,2.4vw,32px)}
.foot2 .kick{color:var(--ink40);margin-bottom:18px}
.foot2-big{font-family:var(--disp);font-size:clamp(26px,4.4vw,52px);font-weight:500;
  letter-spacing:-.04em;line-height:1.03;max-width:20ch;text-wrap:balance;color:var(--ink)}
/* the mark, large and faint, at the right of the footer; drawn on a canvas
   behind the content by the script in the footer */
.foot2{position:relative;overflow:hidden}
.foot2-cv{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.foot2>.wrap{position:relative;z-index:1}
.foot2-rule{height:1px;background:var(--line2);margin:clamp(26px,3.4vw,46px) 0 clamp(22px,2.6vw,34px)}
.foot2-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,36px)}
@media(max-width:820px){.foot2-cols{grid-template-columns:1fr 1fr}}
.foot2-cols h4{font-size:14.5px;font-weight:500;margin:0 0 14px;letter-spacing:-.01em;color:var(--ink)}
.foot2-cols a{display:block;padding:5px 0;font-size:13.5px;color:var(--ink60)}
.foot2-cols a:hover{color:var(--ink)}
.foot2-base{display:flex;gap:22px;align-items:center;flex-wrap:wrap;
  margin-top:clamp(24px,3vw,42px);padding-top:clamp(20px,2.2vw,28px);
  border-top:1px solid var(--line);font-size:12.5px;color:var(--ink40)}
.foot2-base a{color:var(--ink40)}
.foot2-base a:hover{color:var(--ink)}
.foot2-badges{margin-left:auto;display:flex;gap:clamp(18px,2.4vw,34px);align-items:center}
.foot2-badges img{height:clamp(34px,3.4vw,46px);width:auto;opacity:.85;transition:opacity .2s ease}
.foot2-badges img:hover{opacity:1}
@media(max-width:700px){.foot2-badges{margin-left:0;width:100%;margin-top:8px}}

/* ============================ calls to action ============================
   Hover inverts the button: the ground becomes the ink and the ink becomes
   the ground. Nothing moves.
   ====================================================================== */
.btn-inv{background:#F3F1EA;color:#14130F;border:1px solid #F3F1EA}
.btn-ghost{background:none;color:#F3F1EA;border:1px solid rgba(243,241,234,.4)}

.btn,.pp-go,.arrow{transition:background-color .18s ease,color .18s ease,border-color .18s ease}

/* green on cream becomes cream on green. only the filled one: the outline
   and dark ground variants keep the border they already have */
.btn:not(.btn-o):not(.btn-inv):not(.btn-ghost){border:1px solid var(--green)}
.btn:not(.btn-o):not(.btn-inv):not(.btn-ghost):hover{
  background:#F3F1EA;color:var(--green);border-color:var(--green)}
/* the outline pair swap round */
.btn-o:hover{background:var(--ink);color:#F3F1EA;border-color:var(--ink)}
/* on a dark panel the pair simply trade places, so both stay legible:
   filling with the panel color would make the button disappear */
.btn-inv:hover{background:transparent;color:#F3F1EA;border-color:#F3F1EA}
.btn-ghost:hover{background:#F3F1EA;color:#14130F;border-color:#F3F1EA}
/* on a dark ground the outline button fills with light instead */
.sec.dark .btn-o:hover,.panel .btn-o:hover{background:#F3F1EA;color:#14130F;border-color:#F3F1EA}
/* pricing */
.pp-go:hover{background:var(--ink);color:#F3F1EA;border-color:var(--ink)}
.pp-card.on .pp-go:hover{background:#F3F1EA;color:var(--green);border-color:var(--green);opacity:1}
/* the quiet arrow link */
.arrow:hover{background:var(--ink);color:#F3F1EA}
.arrow:hover i{color:#F3F1EA}

/* ---- the nav has to feel like it is listening ---- */
@media(min-width:941px){
  .navitem,.nav nav>a:not(.btn){position:relative;transition:color .18s ease}
  /* You called this the green line, and it was ink. It is green. */
  .navitem::after,.nav nav>a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-3px;
    height:1.5px;background:var(--green);transform:scaleX(0);transform-origin:left;
    transition:transform .26s cubic-bezier(.22,1,.36,1)}
  .navitem:hover::after,.navitem[aria-expanded="true"]::after,
  .nav nav>a:not(.btn):hover::after{transform:scaleX(1)}

  /* the panel arrives, rather than appearing */
  .mega-s{display:block;visibility:hidden;opacity:0;transform:translateY(-6px);
    transition:opacity .2s ease,transform .24s cubic-bezier(.22,1,.36,1),visibility 0s linear .24s}
  .mega-s[data-open="true"]{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  /* Switching between menus is one movement: the card travels to the new item
     and resizes to the new content instead of closing and opening. */
  .mega-s .dd{transition:margin-left .26s cubic-bezier(.22,1,.36,1),
    height .26s cubic-bezier(.22,1,.36,1)}
  .mega-s[data-quick="true"] .dd{overflow:hidden}
  .mega-s[data-open="false"][data-quick="true"]{transition:opacity .12s ease,
    visibility 0s linear .12s}
  .mega-s[data-open="true"][data-quick="true"]{transform:none;transition:opacity .12s ease}
  @media(prefers-reduced-motion:reduce){
    .mega-s,.mega-s .dd{transition:none}
  }
  /* a bridge across the gap, so the pointer can travel from the item to the card */
  .mega-s .dd{position:relative}
  .mega-s .dd::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
}
/* Hover opening is the script's now: it has to know which menu is open to
   travel between them, and a CSS :hover rule opening a second one underneath
   it would fight that. The script keeps the same intent delays. */

/* ===================== abstract ground, crisp overlay =====================
   Light and motion underneath, data on top. Nothing literal.
   ====================================================================== */
.viz{position:relative;overflow:hidden;background:#14130F;isolation:isolate}
.viz>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.viz::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(16,15,12,.30) 0%,rgba(16,15,12,.05) 40%,rgba(16,15,12,.55) 100%)}
.viz>*:not(img){z-index:2}
.viz{container-type:inline-size;container-name:viz}
.viz .viz-chip,.viz .viz-stat,.viz .viz-card,.viz .viz-mark{position:absolute}
.viz .vchart{position:relative;height:100%}
.viz.r169{aspect-ratio:16/9}
.viz.r43{aspect-ratio:4/3}
.viz.r11{aspect-ratio:1/1}
.viz.r219{aspect-ratio:21/9}

/* a hairline field, so the frame reads as an instrument rather than a photo */
.viz-grid{position:absolute;inset:0;z-index:1;
  background-image:linear-gradient(rgba(243,241,234,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(243,241,234,.09) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 50%,#000 40%,transparent 100%);
          mask-image:radial-gradient(120% 90% at 50% 50%,#000 40%,transparent 100%)}

.viz-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;
  background:rgba(16,15,12,.9);color:#F3F1EA;padding:7px 11px;
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  white-space:nowrap}
.viz-chip b{font-weight:400;color:#9DC49F;letter-spacing:.06em}
.viz-chip.lite{background:rgba(243,241,234,.94);color:#14130F}
.viz-chip.lite b{color:#2D572F}

.viz-stat{position:absolute;color:#F3F1EA;max-width:min(58%,420px)}
.viz-stat i{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(243,241,234,.7);margin-bottom:12px}
.viz-stat b{display:block;font-family:var(--disp);font-weight:500;line-height:.9;
  font-size:clamp(38px,6.4vw,88px);letter-spacing:-.045em;
  text-shadow:0 2px 40px rgba(14,13,10,.6)}
.viz-stat span{display:block;margin-top:12px;font-size:14px;line-height:1.5;
  color:rgba(243,241,234,.86);text-shadow:0 1px 18px rgba(14,13,10,.8)}

.viz-card{position:absolute;background:#FBFAF6;color:var(--ink);
  padding:16px 18px;max-width:min(74%,460px);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.8)}
/* an overlay has to fit the figure it sits in, not the width of the page */
@container viz (max-width:560px){
  .viz-card{padding:12px 13px;max-width:88%}
  .viz-card h4{font-size:14.5px;margin-bottom:6px}
  .viz-card p{font-size:12px;line-height:1.5}
  .viz-card .k{font-size:9px}
}
.viz-card .k{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink40);display:block;margin-bottom:9px}
.viz-card h4{margin:0 0 8px;font-size:16.5px;font-weight:500;letter-spacing:-.015em}
.viz-card p{margin:0;font-size:13px;line-height:1.55;color:var(--ink60)}
.viz-card .hl{background:rgba(45,87,47,.16);padding:1px 3px}
.viz-mark{position:absolute;width:9px;height:9px;background:#F3F1EA;z-index:3;
  box-shadow:0 0 0 3px rgba(16,15,12,.5)}

/* a plotted claim, drawn rather than photographed */
.vchart{position:relative;width:100%;height:100%}
.vchart svg{position:absolute;inset:0;width:100%;height:100%}
.vchart .ax{stroke:rgba(243,241,234,.22);stroke-width:1}
.vchart .gl{stroke:rgba(243,241,234,.10);stroke-width:1}
.vchart .ln{fill:none;stroke:#9DC49F;stroke-width:2}
.vchart .ar{fill:rgba(157,196,159,.16)}
.vchart .tx{fill:rgba(243,241,234,.6);font-family:var(--mono);font-size:10px;letter-spacing:.1em}

@media(max-width:760px){
  .viz-chip{font-size:9.5px;padding:5px 8px;letter-spacing:.1em}
  .viz-card{padding:12px 13px;max-width:82%}
  .viz-card h4{font-size:14px}.viz-card p{font-size:12px}
  .viz-stat i{font-size:9px;margin-bottom:8px}
  .viz-stat span{font-size:12.5px}
  .viz-grid{background-size:40px 40px}
}
.vizwrap{margin:clamp(24px,3vw,42px) 0 0}
.vizwrap figcaption{margin-top:10px;font-size:12.5px;color:var(--ink40);font-family:var(--mono)}
.cols3 .vizwrap,.frow .vizwrap{margin-top:0}
.cols3 .viz{margin-bottom:14px}
.vizpair figure{margin:0}
.vizpair .vizwrap{margin:0}
.vizpair figcaption{margin-top:10px;font-size:13px;color:var(--ink40);font-family:var(--mono)}

/* a tile inside a three column row has to speak quietly */
.cols3 .viz-stat b{font-size:clamp(30px,3.2vw,44px)}
.cols3 .viz-stat i{font-size:9.5px;margin-bottom:8px;letter-spacing:.15em}
.cols3 .viz-stat span{font-size:12.5px;margin-top:8px}
.cols3 .viz-stat{max-width:84%}
.cols3 .viz-chip{font-size:9.5px;padding:5px 8px;letter-spacing:.1em}
.cols3 .viz-grid{background-size:40px 40px}

/* ---- fragments of the product itself, laid over a ground ---- */
.uic{position:absolute;z-index:3;box-shadow:0 26px 60px -34px rgba(0,0,0,.8)}
.uic .dw{width:100%}

/* the composer, which is the whole interface */
.uic-ask{position:absolute;z-index:3;filter:drop-shadow(0 26px 46px rgba(0,0,0,.55))}
.uic-ask .hd2-box{padding:13px 13px 10px}
.uic-ask .hd2-box p{min-height:0}

/* a caption that sits inside a hero band, with room for a fragment */
.bandimg .ov.wide p{max-width:38ch}

@media(max-width:760px){
  .uic .dw-h{padding:8px 10px;font-size:11px}
  .uic .wr{padding:7px 10px;gap:7px}
  .uic .wr .l{font-size:10.5px}
  .uic-ask .hd2-box{padding:10px 10px 8px}
  .uic-ask .hd2-box p{font-size:12px}
}

/* ---- one ratio per slot, whatever is put in it ----
   The first column is wider than the others, so a shared ratio would make its
   visual taller. A shared height keeps the row honest. */
.cols3 .viz,.cols3 img{aspect-ratio:auto;height:clamp(150px,13.5vw,196px)}
.cols3 img{object-fit:cover}
.imgtext .viz{aspect-ratio:4/3}
.figpair .viz{aspect-ratio:5/4}
.vizpair .viz.r11{aspect-ratio:1/1}
.vizpair .viz.r169{aspect-ratio:16/9}
.cols3 .vizwrap,.imgtext .vizwrap{margin:0}
.cols3 .vizwrap .viz{margin-bottom:14px}

/* a fragment always needs a dark bed under it, whatever the ground does */
.bandimg .uic,.bandimg .uic-ask,.viz .uic,.viz .uic-ask{isolation:isolate}
.bandimg .uic::before,.bandimg .uic-ask::before,
.viz .uic::before,.viz .uic-ask::before{content:"";position:absolute;inset:-26px -30px;z-index:-1;
  background:radial-gradient(60% 60% at 50% 50%,rgba(14,13,10,.62),transparent 72%)}

/* ---------- the visual language page: specimens, not decoration ---------- */
.sg-sws{display:grid;gap:0;margin-top:clamp(20px,2.4vw,30px);border-top:1px solid var(--line)}
.sg-sw{display:grid;grid-template-columns:34px 132px 168px 1fr;gap:16px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--line)}
.sg-chip{display:block;width:34px;height:34px;border:1px solid var(--line2)}
.sg-sw code,.sg-code{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.sg-sw b{font-family:var(--mono);font-size:12.5px;font-weight:400;color:var(--ink60)}
.sg-sw span{font-size:13.5px;color:var(--ink60)}
.sg-ts{display:grid;gap:0;margin-top:clamp(20px,2.4vw,30px);border-top:1px solid var(--line)}
.sg-t{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:24px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--line)}
.sg-t code{display:inline-block;font-family:var(--mono);font-size:12.5px}
.sg-t b{display:block;font-family:var(--mono);font-size:12px;font-weight:400;color:var(--ink60);margin-top:3px}
.sg-t span{display:block;font-size:13px;color:var(--ink60);margin-top:6px}
.sg-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:clamp(16px,2vw,24px) 0}
.sg-row .kpi{width:100%}
.sg-code{display:block;white-space:pre;overflow-x:auto;padding:16px;background:var(--sunk);
  border:1px solid var(--line);line-height:1.7}
@media(max-width:940px){
  .sg-sw{grid-template-columns:28px 1fr;row-gap:4px}
  .sg-sw .sg-chip{grid-row:span 3}
  .sg-t{grid-template-columns:1fr;gap:8px}
}
.sg-h3{font-size:17px;font-weight:500;margin:clamp(26px,3vw,38px) 0 6px}
.sg-note{font-size:13.5px;color:var(--ink60);max-width:70ch;margin-bottom:14px}
.sg-assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.sg-as{margin:0}
.sg-as img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--line)}
.sg-as figcaption{margin-top:6px}
.sg-as code{display:block;font-family:var(--mono);font-size:11.5px;color:var(--ink)}
.sg-as b{display:block;font-family:var(--mono);font-size:11px;font-weight:400;color:var(--ink40)}
.sg-assets-logo .sg-as img{aspect-ratio:16/7;object-fit:contain;background:var(--sunk);padding:10px}
.sg-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.sg-ic{margin:0;border:1px solid var(--line);padding:12px;background:var(--card)}
.sg-ic-g{display:grid;place-items:center;height:44px;color:var(--ink)}
.sg-ic-g svg{width:22px;height:22px}
.sg-code-s{font-size:10.5px;line-height:1.5;max-height:96px;overflow:auto;white-space:pre-wrap;
  word-break:break-all;background:none;border:0;padding:8px 0 0;color:var(--ink60)}
.sg-alphas{display:grid;gap:0;border:1px solid var(--line);padding:4px 14px}
.sg-al{display:grid;grid-template-columns:34px 190px 1fr;gap:14px;align-items:center;padding:8px 0}
.sg-al-c{display:block;height:20px;border:1px solid var(--line)}
.sg-alphas code,.sg-alphas b{font-family:var(--mono);font-size:11.5px;font-weight:400}
.sec.dark .sg-alphas code,.sec.dark .sg-alphas b{color:rgba(243,241,234,.72)}
.sg-alphas[style*="--dark"] code,.sg-alphas[style*="--dark"] b{color:rgba(243,241,234,.72)}
@media(max-width:940px){
  .sg-al{grid-template-columns:26px 1fr;row-gap:2px}
  .sg-assets{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
}
.as-plate{margin:clamp(18px,2.2vw,28px) 0}
.as-plate img{width:100%;border:1px solid var(--line);background:var(--card)}
.as-plate figcaption{margin-top:8px;font-size:12.5px;color:var(--ink40);font-family:var(--mono)}
.as-toast{display:flex;align-items:center;gap:14px;margin:clamp(16px,2vw,24px) 0;padding:14px 16px;
  background:var(--dark);border:1px solid rgba(243,241,234,.14)}
.as-toast>div{flex:1;min-width:0}
.as-toast b{display:block;font-size:14.5px;font-weight:500;color:#F3F1EA}
.as-toast span{display:block;margin-top:2px;font-size:12.5px;color:rgba(243,241,234,.62)}
.as-toast .as-dot{width:7px;height:7px;border-radius:50%;background:#7FA47F;flex:none}
.as-toast .btn{flex:none;color:#F3F1EA;border-color:rgba(243,241,234,.4)}
@media(max-width:940px){
  .as-toast{flex-wrap:wrap}
  .as-toast .btn{width:100%}
}

/* A feature we describe but do not ship yet. Deliberately quiet: it is a fact,
   not a promotion. */
.soon{display:inline-block;margin-left:8px;padding:2px 7px;border:1px solid var(--line2);
  border-radius:var(--r-btn);font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink40);vertical-align:middle;white-space:nowrap}
.sec.dark .soon,.panel .soon{border-color:rgba(243,241,234,.3);color:rgba(243,241,234,.55)}
.lst-t .soon,h3 .soon,h4 .soon{vertical-align:2px}

/* ---------- pricing: one plan, hourly support ---------- */
.pp-buys-2 .pp-row{grid-template-columns:minmax(0,1fr) 82px}
@media(max-width:700px){.pp-buys-2 .pp-row{grid-template-columns:minmax(0,1fr) 66px}}

.pp-soon{font-family:var(--disp);font-size:22px;font-weight:400;letter-spacing:-.02em;
  color:var(--ink40)}
.pp-card-soon{opacity:.72}
.pp-card-soon .pp-f li{color:var(--ink60)}

/* the two boxes, built like the plan cards: a name, a line, the number
   with its unit beneath, a rule and the list, on the dark ground */
.pp-sup{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px);align-items:stretch;
  margin-top:clamp(22px,2.6vw,34px);padding-top:clamp(22px,2.6vw,34px);border-top:1px solid rgba(243,241,234,.32)}
.pp-sup-r{display:flex;flex-direction:column;border:1px solid rgba(243,241,234,.16);
  background:rgba(243,241,234,.04);padding:clamp(20px,2vw,26px)}
.pp-sup-r .pp-head h3{color:#F3F1EA}
.pp-sup-r .pp-c{color:rgba(243,241,234,.62)}
.pp-sup-r .pp-p{margin-bottom:0}
.pp-sup-r .pp-p b{color:#F3F1EA}
.pp-sup-r .pp-p span{color:rgba(243,241,234,.62)}
.pp-sup-r .pp-f{margin:clamp(18px,2vw,26px) 0 0;padding:clamp(16px,1.8vw,22px) 0 0;border-top-color:rgba(243,241,234,.16)}
.pp-sup-r .pp-f li{color:rgba(243,241,234,.8)}
.pp-sup-r .pp-f b{color:#9DC49F}
@media(max-width:940px){.pp-sup{grid-template-columns:1fr}}

/* ---------- legal pages: long text, read at a comfortable measure ---------- */
.lg{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:clamp(28px,5vw,72px);
  align-items:start}
.lg-toc{position:sticky;top:84px;display:flex;flex-direction:column;gap:2px}
.lg-toc .lab{margin-bottom:8px}
.lg-toc a{font-size:13px;line-height:1.45;color:var(--ink60);padding:3px 0}
.lg-toc a:hover{color:var(--ink)}
.lg-body{max-width:72ch}
.lg-body .lg-h{font-size:clamp(19px,1.9vw,23px);font-weight:500;letter-spacing:-.02em;
  margin:clamp(30px,3.4vw,44px) 0 12px;padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--line);scroll-margin-top:84px}
.lg-body .lg-h:first-child{margin-top:0;padding-top:0;border-top:0}
.lg-body .lg-s{font-size:15px;font-weight:500;margin:20px 0 6px}
.lg-body p{font-size:14.5px;line-height:1.65;color:var(--ink80);margin:0 0 12px}
.lg-l{margin:0 0 14px;padding-left:20px}
.lg-l li{font-size:14.5px;line-height:1.65;color:var(--ink80);margin-bottom:6px}
@media(max-width:940px){
  .lg{grid-template-columns:1fr;gap:22px}
  .lg-toc{position:static;flex-direction:row;flex-wrap:wrap;gap:4px 14px}
  .lg-toc .lab{width:100%;margin-bottom:2px}
}

/* Document metadata, not a lede: a legal page has to say when it changed. */
.lg-upd{margin:0 0 clamp(20px,2.6vw,32px);font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink40)}

/* ============================================================ NEWS AND STORIES
   A story is one column of text and nothing else competing with it. The
   measure is about 68 characters, the leading is loose, and everything that is
   not the argument sits outside the column. */

.art{padding:clamp(44px,6vw,96px) 0 clamp(56px,7vw,110px)}
.art-h{max-width:820px;margin:0 auto;text-align:center;padding:0 var(--pad)}
.art-k{margin:0 0 clamp(18px,2.2vw,26px);font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink40)}
.art-k b{font-weight:400;color:var(--ink60)}
.art-h h1{font-size:clamp(32px,4.6vw,60px);line-height:1.04;letter-spacing:-.025em;
  text-wrap:balance}
.art-sf{margin:clamp(16px,2vw,24px) auto 0;max-width:72ch;font-size:clamp(16px,1.5vw,19px);
  line-height:1.55;color:var(--ink60);text-wrap:pretty}
.art-rule{height:1px;background:var(--line);margin:clamp(26px,3.4vw,44px) auto 0;max-width:560px}
.art-read{display:block;margin-top:14px;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink40)}

.art-hero{max-width:1080px;margin:clamp(32px,4.4vw,64px) auto 0;padding:0 var(--pad)}
.art-hero img{width:100%;height:auto;display:block}
.art-hero figcaption{margin-top:12px;font-size:13px;color:var(--ink40)}

.art-b{max-width:860px;margin:clamp(40px,5vw,72px) auto 0;padding:0 var(--pad);
  font-size:clamp(16.5px,1.6vw,18.5px);line-height:1.72;color:var(--ink80)}
/* No blanket reset here. ".art-b p" weighs (0,1,1) and the sibling rule below
   weighs (0,1,0), so the reset won on specificity no matter which came first,
   and every paragraph sat flush against the one above it. The elements that
   want their own spacing set it themselves further down. */
.art-b>*+*{margin-top:1.35em}
.art-b>:first-child{margin-top:0}
.art-lead{font-size:1.16em;line-height:1.6;color:var(--ink)}
.art-b h2{margin-top:2.1em;font-family:var(--disp);font-weight:500;
  font-size:clamp(21px,2.2vw,27px);line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.art-b a{color:var(--ink);border-bottom:1px solid var(--line2)}
.art-b a:hover{border-bottom-color:var(--ink)}
.art-b strong{font-weight:500;color:var(--ink)}

.art-q{margin:2em 0;padding:0 0 0 clamp(18px,2.4vw,28px);border-left:2px solid var(--green)}
.art-q p{font-family:var(--disp);font-weight:400;font-size:clamp(19px,2vw,24px);
  line-height:1.35;letter-spacing:-.015em;color:var(--ink)}
.art-q cite{display:block;margin-top:12px;font-style:normal;font-size:13.5px;color:var(--ink40)}

.art-note{padding:clamp(18px,2.2vw,24px);background:var(--card);border:1px solid var(--line);
  font-size:.92em;line-height:1.6;color:var(--ink60)}
/* No margin reset: it weighs the same as the sibling spacing rule and, coming
   later, would cancel the gap above every list. */
.art-l{padding-left:1.15em}
.art-l li+li{margin-top:.6em}
.art-f{margin:2.2em 0}
.art-f img{width:100%;height:auto;display:block}
/* A square portrait should not be blown up to the full measure. */
/* A portrait is shown whole rather than cropped to a square thumbnail: the
   photograph at its own proportions, with the caption under it. */
.art-f.art-f-p{display:block;margin:2.4em 0}
.art-f.art-f-p img{width:100%;max-width:404px;height:auto;display:block}
.art-f.art-f-p figcaption{margin-top:14px;max-width:404px}
.art-f figcaption{margin-top:11px;font-size:13px;color:var(--ink40)}

.art-au{max-width:860px;margin:clamp(40px,5vw,64px) auto 0;padding:clamp(22px,2.6vw,30px) var(--pad) 0;
  border-top:1px solid var(--line);display:flex;gap:16px;align-items:flex-start}
.art-au img{width:52px;height:52px;object-fit:cover;flex:none}
.art-au b{display:block;font-weight:500;color:var(--ink);font-size:15px}
.art-au span{display:block;margin-top:2px;font-size:13.5px;color:var(--ink40)}
.art-au-n{margin:10px 0 0;font-size:14px;line-height:1.6;color:var(--ink60)}

/* the index */
.nw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,40px)}
.nw-c{display:block;border:1px solid var(--line);background:var(--card);
  padding:clamp(20px,2.4vw,30px);transition:border-color .18s ease}
.nw-c:hover{border-color:var(--ink)}
.nw-i{display:block;margin:calc(-1*clamp(20px,2.4vw,30px)) calc(-1*clamp(20px,2.4vw,30px))
  clamp(18px,2.2vw,24px);overflow:hidden}
.nw-i img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.nw-k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink40)}
.nw-c b{display:block;margin-top:10px;font-family:var(--disp);font-weight:500;
  font-size:clamp(19px,1.9vw,23px);line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.nw-s{display:block;margin-top:9px;font-size:14.5px;line-height:1.55;color:var(--ink60)}
.nw-c:first-child{grid-column:1/-1}
.nw-c:first-child b{font-size:clamp(23px,2.8vw,34px)}
.nw-c:first-child .nw-i img{aspect-ratio:21/9}

.art-lg{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(22px,3vw,42px);
  padding:clamp(22px,2.6vw,30px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.art-lg img{height:34px;width:auto;opacity:.8}
.art-lg figcaption{flex-basis:100%;margin-top:4px;font-size:13px;color:var(--ink40)}

/* No margin reset. It weighs the same as .art-b>*+* and, coming later, wins,
   which leaves the table flush against the paragraph above it. Third time
   this exact trap has come up in this stylesheet. */
.art-t table{width:100%;border-collapse:collapse;font-size:.94em}
.art-t th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink40);font-weight:400;padding:0 0 10px;
  border-bottom:1px solid var(--ink)}
.art-t td{padding:13px 0;border-bottom:1px solid var(--line);vertical-align:top}
.art-t td:last-child{text-align:right;font-family:var(--mono);font-size:.92em;white-space:nowrap;
  padding-left:18px}
.art-t figcaption{margin-top:11px;font-size:13px;color:var(--ink40)}

/* ---------- a story: the contents rail, the scroll line, reading aloud ---- */
/* The rail sits in the margin beside the measure, not inside it, so the prose
   column stays where it was. Below 1400px there is no margin to put it in. */
.art-w{position:relative}
.art-toc{display:none}
@media (min-width:1400px){
  .art-toc{display:block;position:absolute;top:0;bottom:0;left:calc(50% - 640px);width:186px}
  .art-toc-in{position:sticky;top:96px;display:flex;flex-direction:column;gap:1px;
    max-height:calc(100vh - 150px);overflow-y:auto}
  .art-toc .lab{margin-bottom:10px;padding-left:13px}
  .art-toc a{font-size:12.5px;line-height:1.4;color:var(--ink60);padding:5px 0 5px 13px;
    border-left:2px solid transparent;transition:color .15s,border-color .15s}
  .art-toc a:hover{color:var(--ink)}
  .art-toc a.on{color:var(--ink);border-left-color:var(--green)}
}
.art-prog{position:fixed;top:64px;left:0;width:0;height:3px;background:var(--green);
  z-index:61;pointer-events:none}
.art-listen{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:10px}
.art-play{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;
  border:1px solid var(--line2);border-radius:var(--r-btn);background:none;
  font-size:13.5px;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.art-play:hover{border-color:var(--ink);background:var(--card)}
.art-ic{width:10px;height:12px;flex:none;fill:var(--green)}
.art-ic-s{display:none}
.art-play.playing .art-ic-p{display:none}
.art-play.playing .art-ic-s{display:block}
.art-stop{padding:7px 4px;border:0;background:none;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink40);cursor:pointer}
.art-stop:hover{color:var(--ink)}
/* The paragraph being read. A gradient band painted only across the foot of
   the block, which read as a bug, so it is a flat tint over the whole of it. */
.art-spk{background:rgba(45,87,47,.09);box-shadow:0 0 0 7px rgba(45,87,47,.09);
  border-radius:1px}

/* ------------------------------ contact sales ------------------------------ */
/* One screen: the section and the nav fill the viewport between them. What is
   being offered on the left, the form on the right, proof under both. */
.csx{position:relative;border-top:0;overflow:hidden;background:var(--dark);color:#F3F1EA;
  min-height:calc(100vh - 65px);display:flex;align-items:center;
  padding:clamp(36px,4.2vw,64px) 0}
.csx-bg{position:absolute;inset:0;background:url(img/bg-deep.jpg) center/cover no-repeat;
  transform:scaleX(-1)}
/* The scrim sits outside the flipped layer, or its direction flips with it. */
.csx::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(20,19,15,.42) 0%,rgba(20,19,15,.74) 44%,
    rgba(20,19,15,.94) 74%)}
.csx .wrap{position:relative;z-index:2;width:100%}
.csx-g{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(30px,5vw,80px);align-items:start}
.csx h1{font-size:clamp(32px,4.2vw,54px);font-weight:500;letter-spacing:-.03em;line-height:1.04;
  color:#F3F1EA;max-width:17ch;text-wrap:balance}
.csx-sub{margin-top:clamp(14px,1.6vw,20px);max-width:44ch;font-size:clamp(15.5px,1.35vw,18px);
  line-height:1.55;color:rgba(243,241,234,.72)}
.csx-feat{margin-top:clamp(26px,3vw,38px)}
.csx-feat .lab{display:block;margin-bottom:12px;color:rgba(243,241,234,.42)}
.csx-feat ul{list-style:none;margin:0;padding:0}
/* No tick against each line: four ticks in a row is decoration, and the list
   reads as a list without them. */
.csx-feat li{padding:8px 0;border-bottom:1px solid rgba(243,241,234,.10);
  font-size:14.5px;line-height:1.5;color:rgba(243,241,234,.86)}
.csx-feat li:last-child{border-bottom:0}
/* the stores the team behind Ari has built, in their own white marks */
.csx-cred{margin-top:clamp(28px,3.4vw,44px)}
.csx-cred .lab{display:block;margin-bottom:16px;color:rgba(243,241,234,.42)}
.csx-marks{display:flex;align-items:center;gap:clamp(20px,2.6vw,38px);flex-wrap:wrap}
.csx-marks img{height:clamp(24px,2.5vw,32px);width:auto;max-width:clamp(90px,9.5vw,132px);
  object-fit:contain;opacity:.62;transition:opacity .2s ease}
.csx-marks img:hover{opacity:1}
/* the address, for the people who would rather not fill in a form */
.csx-mail{margin-top:clamp(28px,3.4vw,44px)}
.csx-mail .lab{display:block;margin-bottom:10px;color:rgba(243,241,234,.42)}
.csx-mail a{font-size:clamp(18px,1.7vw,22px);font-weight:500;letter-spacing:-.01em;color:#F3F1EA;
  border-bottom:1px solid rgba(243,241,234,.3);transition:border-color .2s ease}
.csx-mail a:hover{border-bottom-color:#F3F1EA}
/* the form, in a panel of its own so it reads as the thing to do */
.csx-card{border:1px solid rgba(243,241,234,.14);border-radius:14px;
  background:rgba(243,241,234,.035);padding:clamp(20px,2.3vw,30px);max-width:470px;
  margin-left:auto;width:100%}
.csx-card h2{font-size:clamp(19px,1.7vw,22px);font-weight:500;letter-spacing:-.02em;
  color:#F3F1EA;margin-bottom:clamp(16px,1.8vw,22px)}
.csx-fine{margin-top:16px;font-size:13px;line-height:1.55;color:rgba(243,241,234,.44)}
.csx-fine a{color:rgba(243,241,234,.78);border-bottom:1px solid rgba(243,241,234,.28)}
.csx-fine a:hover{color:#F3F1EA;border-bottom-color:#F3F1EA}
@media(max-width:940px){
  .csx{min-height:0;padding:clamp(32px,5vw,52px) 0}
  .csx-g{grid-template-columns:1fr;gap:30px}
  .csx h1{max-width:none}
  .csx-card{margin-left:0;max-width:none}
}
/* the closing panel's third way in, under the two buttons */
.ctab-s{margin-top:16px;font-size:14.5px}
.ctab-s a{color:rgba(243,241,234,.72);border-bottom:1px solid rgba(243,241,234,.3)}
.ctab-s a:hover{color:#F3F1EA;border-bottom-color:#F3F1EA}
/* the support block's second half: what the hourly rate does not cover */
.pp-sup-inc{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
/* This block sits on the dark panel, so ink on ink made the lead-in vanish. */
.pp-sup-inc b{color:inherit;font-weight:500;opacity:1}
.sec.dark .pp-sup-inc b,.panel .pp-sup-inc b{color:#F3F1EA}
.sec.dark .pp-sup-inc,.panel .pp-sup-inc{border-top-color:rgba(243,241,234,.18)}

/* ---- fragments of the product, laid over a generated ground -------------- */
/* A ground with one line of text on it shows nothing. Half a panel does. */
.uic-frag .dw,.uic-chat .ucx{background:var(--paper);border:1px solid var(--line)}
.uic-frag .dw-b{padding:2px 0}
.uic-chat .ucx{padding:11px 12px 10px}
.uic-chat .ucx-me{font-size:12.5px;line-height:1.4;color:var(--ink);
  padding:8px 10px;background:var(--sunk);border-radius:8px}
.uic-chat .ucx-log{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:6px}
.uic-chat .ucx-log li{display:grid;grid-template-columns:7px minmax(0,1fr) auto;gap:8px;
  align-items:baseline;font-size:11.5px;line-height:1.4;color:var(--ink60)}
.uic-chat .ucx-log .d{width:5px;height:5px;border-radius:50%;background:var(--green);
  transform:translateY(-2px)}
.uic-chat .ucx-log .t{font-family:var(--mono);font-size:10px;color:var(--ink40)}

/* ---- a mock laid on a ground, the way the homepage lays them on the hero -- */
.plate{position:absolute;z-index:3;box-shadow:0 40px 90px -40px rgba(0,0,0,.85);
  transform-origin:center;max-height:90%}
/* A mock taller than its frame is cropped at the foot rather than hanging out
   of it, which is what a screenshot of a long page looks like anyway. */
.plate>*{max-height:100%;overflow:hidden}
/* Hidden only once the script has taken responsibility for showing it. */
.js-reveal .plate{opacity:0;translate:0 14px;
  transition:opacity .5s ease,translate .5s cubic-bezier(.22,1,.36,1)}
.js-reveal .plate.in{opacity:1;translate:0 0}
.plate .ag-st,.plate .sv-pnl{border-radius:10px}
/* the storefront reads at figure size: fewer columns, tighter type */
.plate .ag-grid{grid-template-columns:repeat(3,1fr);gap:9px;padding:0 11px 11px}
.plate .ag-pt img{max-height:96px}
.plate .ag-bar{padding:8px 11px;gap:11px}
.plate .ag-bar nav{gap:9px;font-size:10px}
.plate .ag-logo{font-size:10.5px}
/* Several of these parts start hidden and are revealed by the homepage demo as
   it works. A still figure has no demo to wait for, so they are on from the
   start: the rows, the promo band and the badges. */
.plate .sv-row,.plate .sv-chk li,.plate .sv-cat,.plate .ag-pt,.plate .ag-grid{
  opacity:1;transform:none}
.plate .ag-promo{height:auto;padding:6px 11px;font-size:10px}
.plate .ag-bdg{opacity:1;transform:none}
.plate .ag-head{padding:9px 11px 7px}
.plate .ag-head h3{font-size:14px}
.plate .ag-sort{font-size:10px}
.plate .ag-nm{display:block;font-size:10px;margin-top:6px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.plate .ag-pz{display:block;font-size:9.5px;margin-top:1px}
.plate .ag-bdg,.plate .ag-un{font-size:8.5px;padding:2px 5px}
/* the typed rows */
.plate .sv-row{padding:7px 11px;font-size:11px}
.plate .sv-cmd3{grid-template-columns:minmax(0,1fr) 72px 66px}
.plate .sv-hd0{font-size:9px}
.plate .sv-ft{padding:8px 11px;font-family:var(--mono);font-size:9.5px;color:var(--ink40);
  border-top:1px solid var(--line);background:var(--sunk)}
/* the thread, on the dark side of the ground */
.shot-th{display:flex;flex-direction:column;gap:11px;padding:15px;border-radius:10px;
  background:rgba(20,19,15,.86);backdrop-filter:blur(3px);border:1px solid rgba(243,241,234,.14)}
.shot-th .sh-me{font-size:12.5px;line-height:1.45;padding:9px 11px;border-radius:9px}
.shot-th .sh-log{gap:7px;display:grid}
.shot-th .sh-log li{font-size:11.5px}
.shot-th .sh-done{display:flex;gap:10px;font-family:var(--mono);font-size:10px;
  color:rgba(243,241,234,.55);padding-top:9px;border-top:1px solid rgba(243,241,234,.14)}
.pp-custom{font-size:clamp(30px,3.2vw,40px);font-weight:500;letter-spacing:-.03em;color:var(--ink)}

/* ---- the four categories, as plain lists ------------------------------- */
.pl{list-style:none;margin:0;padding:0}
.pl li{padding:7px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.5;
  color:var(--ink80)}
.pl li:last-child{border-bottom:0}
.sec.dark .pl li{border-bottom-color:rgba(243,241,234,.14);color:rgba(243,241,234,.8)}
.catg{margin-top:clamp(26px,3vw,38px)}
.catg h3{font-size:clamp(17px,1.6vw,20px);font-weight:500;letter-spacing:-.02em;margin-bottom:10px}
.ucg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,3.4vw,52px);
  margin-top:clamp(26px,3vw,40px)}
@media(max-width:820px){.ucg{grid-template-columns:1fr}}
.ucg-n{font-family:var(--mono);font-size:11px;color:var(--ink40)}
.ucg-c h4{margin:6px 0 10px;font-size:clamp(18px,1.8vw,22px);font-weight:500;letter-spacing:-.02em}
.ucg-c h4 a{color:var(--ink);border-bottom:1px solid var(--line2)}
.ucg-c h4 a:hover{border-bottom-color:var(--ink)}
.ucg-m{margin-top:10px;font-size:13px;line-height:1.55;color:var(--ink60)}
.wvo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.4vw,56px);
  margin-top:clamp(24px,3vw,38px)}
@media(max-width:760px){.wvo{grid-template-columns:1fr}}
.wvo-c .lab{display:block;margin-bottom:12px}
.wvo-old{opacity:.6}
.wvo-n{display:flex;align-items:baseline;gap:8px;margin-top:14px}
.wvo-n b{font-size:clamp(22px,2.4vw,30px);font-weight:500;letter-spacing:-.03em}
.wvo-n span{font-size:13px;color:var(--ink60)}
.hsay{margin-top:clamp(16px,1.8vw,22px);max-width:76ch;font-size:clamp(16px,1.4vw,18.5px);
  line-height:1.6;color:var(--ink80)}
.hsay-s{font-size:15px;color:var(--ink60)}
.sec.dark .hsay{color:rgba(243,241,234,.76)}

/* ---- the plans, testimonials and FAQ on the home page ------------------ */
.hpps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,26px);
  margin-top:clamp(26px,3vw,40px)}
@media(max-width:900px){.hpps{grid-template-columns:1fr}}
.hpp{position:relative;border:1px solid var(--line);background:var(--card);
  padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column}
.hpp.on{border-color:var(--ink)}
.hpp-star{position:absolute;top:-11px;left:clamp(20px,2.2vw,28px);background:var(--ink);
  color:#F3F1EA;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 8px}
.hpp-n{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink40)}
.hpp-p{display:flex;align-items:baseline;gap:7px;margin-top:12px}
.hpp-p b{font-size:clamp(30px,3.4vw,42px);font-weight:500;letter-spacing:-.03em}
.hpp-p span{font-size:13.5px;color:var(--ink60)}
.hpp-l{margin-top:4px;font-size:14px;color:var(--ink60)}
.hpp .pl{margin-top:16px}
.hpp-go{margin-top:auto;padding-top:18px;font-size:14.5px;color:var(--ink);
  border-bottom:0}
.hpp-go::after{content:" \2192"}
.hpp-go:hover{text-decoration:underline}
.tsts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,2.6vw,40px);
  margin-top:clamp(24px,3vw,38px)}
@media(max-width:760px){.tsts{grid-template-columns:1fr}}
.tst{margin:0;padding:0 0 0 clamp(14px,1.6vw,20px);border-left:2px solid var(--green)}
.tst p{font-size:clamp(15.5px,1.4vw,17.5px);line-height:1.55;color:var(--ink)}
.tst cite{display:block;margin-top:9px;font-style:normal;font-size:12.5px;color:var(--ink40)}

.ctab-price{margin-top:16px;font-size:14.5px;color:rgba(243,241,234,.62)}
.ctab-price b{color:#F3F1EA;font-weight:500}


/* ---- three numbers, one visual each, one line each ---- */
/* ---- the composer, as the homepage draws it ----
   .mg-box on the homepage: dark glass, the ask, a rule, tools right, a round
   cream send. The cards had a white one beside a dark bug list, which was two
   materials for one product. */
.axc{position:relative;z-index:1;display:block;background:rgba(20,19,15,.58);
  border:1px solid rgba(243,241,234,.18);padding:clamp(11px,1.3vw,15px) clamp(12px,1.4vw,16px)}
.axc-t{display:block;min-height:2.6em;font-size:clamp(12.5px,1.3vw,14.5px);line-height:1.45;
  letter-spacing:-.01em;color:#F3F1EA}
.axc-b{display:flex;align-items:center;justify-content:flex-end;gap:5px;
  margin-top:clamp(8px,1vw,12px);padding-top:clamp(8px,1vw,12px);
  border-top:1px solid rgba(243,241,234,.14)}
.axc-b i{width:clamp(22px,2.3vw,27px);height:clamp(22px,2.3vw,27px);display:grid;
  place-items:center;color:rgba(243,241,234,.5);flex:none}
.axc-b i svg{width:55%;height:55%;display:block}
.axc-s{background:#F3F1EA;color:#141310!important;margin-left:4px}

/* ---- the track a job runs on, as the homepage pipeline rail draws it ----
   Square marks on a two pixel line, the label under each mark, a mono note
   under the label. Done is sage, running is cream, not started is a dim
   outline: the rail's own colors. */
.axt{--g:clamp(8px,1vw,14px);position:relative;z-index:1;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--g);
  padding-top:22px;margin-top:clamp(20px,2.4vw,30px)}
.axt::before{content:"";position:absolute;left:7px;top:5px;height:2px;
  right:calc((100% - 2 * var(--g)) / 3 - 7px);background:rgba(243,241,234,.2)}
.axt-s{position:relative;min-width:0}
.axt-s::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}
.axt-done::before{background:#9DC49F;border-color:#9DC49F}
.axt-on::before{background:#F3F1EA;border-color:#F3F1EA}
.axt-s b{display:block;font-size:clamp(10.5px,1.1vw,12.5px);font-weight:500;
  letter-spacing:-.01em;line-height:1.2;color:rgba(243,241,234,.42)}
.axt-done b,.axt-on b{color:#F3F1EA}
.axt-s em{display:block;margin-top:2px;font-style:normal;font-family:var(--mono);
  font-size:clamp(8.5px,.85vw,9.5px);letter-spacing:.05em;color:rgba(243,241,234,.4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- storefront and admin, both of them ----
   A toggle on its own is a control with nothing under it. The card claims Ari
   works on the page a shopper sees and on the screen behind it, so it shows
   one of each and marks which side is in front. */
.axn{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(9px,1.1vw,14px);margin-top:clamp(16px,2vw,26px)}
.axn-w{position:relative;min-width:0}
.axn-p{padding:clamp(10px,1.2vw,14px);min-width:0;overflow:hidden;
  aspect-ratio:1/1.14;display:flex;flex-direction:column;
  box-shadow:0 16px 34px rgba(8,7,5,.36)}
.axn-a,.axn-b{background:rgba(20,19,15,.5);border:1px solid rgba(243,241,234,.16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* the badge that says which surface this is */
.axn-g{position:absolute;left:clamp(9px,1.1vw,14px);bottom:0;z-index:2;
  transform:translateY(58%);
  width:clamp(25px,2.8vw,34px);height:clamp(25px,2.8vw,34px);
  display:grid;place-items:center;box-shadow:0 8px 18px rgba(6,5,4,.4)}
.axn-g-a{background:#CF9536;color:#14130F}
.axn-g-b{background:#0E6B50;color:#F3F1EA}
.axn-g svg{width:56%;height:56%;display:block}
/* a product page: a picture and the lines beside it */
.pnf{display:flex;gap:clamp(7px,.9vw,10px);height:100%}
/* a real product off a real store, not a gray rectangle standing in for one */
.pnf-im{flex:0 0 44%;overflow:hidden;background:rgba(243,241,234,.06)}
.pnf-im img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(.15) brightness(.94)}
.pnf-l{flex:1;min-width:0;display:flex;flex-direction:column;gap:clamp(5px,.6vw,7px);
  padding-top:2px}
.pnf-l i{display:block;height:clamp(5px,.6vw,7px);background:rgba(243,241,234,.18)}
.pnf-l i:first-child{background:rgba(243,241,234,.42)}
/* an admin screen: a grid and a chart */
.pna{display:flex;flex-direction:column;height:100%;justify-content:flex-start}
.pna-nav{flex:none;display:flex;flex-direction:column;gap:clamp(5px,.65vw,8px)}
.pna-i{display:flex;align-items:center;gap:clamp(6px,.7vw,8px);min-width:0}
.pna-i i{width:clamp(10px,1.05vw,13px);height:clamp(10px,1.05vw,13px);flex:none;
  color:rgba(157,196,159,.72)}
.pna-i i svg{width:100%;height:100%;display:block}
.pna-i b{font-weight:400;font-size:clamp(8px,.85vw,10.5px);letter-spacing:-.01em;
  color:rgba(243,241,234,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- one card, one thing ----
   Each card used to carry a panel and a composer, which at a quarter of a row
   is two small things fighting rather than one legible one. Now a card is a
   single object, centered, at a size a person can read across the room. */
.axg{position:relative;z-index:1;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,.8vw,9px)}
.axg-r{display:contents}
/* a tile per mark. The homepage wall took its tiles away because they were
   white boxes on a photograph; these are the ground itself, one shade up, so
   they line the marks up without putting a sticker behind each one. */
.axg-t{display:grid;place-items:center;aspect-ratio:1/.72;min-width:0;padding:6px;
  background:rgba(20,19,15,.5);border:1px solid rgba(243,241,234,.16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.axg-m{max-width:100%;width:auto;height:clamp(12px,1.3vw,16px);object-fit:contain;
  display:block;opacity:.92;filter:brightness(0) invert(1)}
.axg-m.w{height:clamp(8px,.9vw,11px)}

.axb{position:relative;z-index:1;display:flex;flex-direction:column;gap:9px;
  background:rgba(20,19,15,.58);border:1px solid rgba(243,241,234,.18);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  padding:clamp(13px,1.6vw,19px);
  box-shadow:0 24px 54px rgba(8,7,5,.44)}
.axb-r{display:flex;align-items:baseline;gap:9px;min-width:0;white-space:nowrap}
.axb-r i{width:6px;height:6px;flex:none;background:#CF9536;align-self:center}
.axb-r.on i{background:#0E6B50}
/* the ticket number is the texture and the sentence is the content, so the
   number goes under it rather than stealing half the width */
.axb-r{flex-direction:column;align-items:flex-start;gap:3px;white-space:normal}
.axb-r i{align-self:auto;position:absolute;left:0;top:6px}
.axb-r{position:relative;padding-left:14px}
.axb-r b{font-family:var(--mono);font-size:clamp(8.5px,.9vw,10px);font-weight:400;
  letter-spacing:.06em;color:rgba(243,241,234,.42);order:2}
.axb-r em{font-style:normal;font-size:clamp(11px,1.15vw,13px);line-height:1.25;
  color:#F3F1EA;order:1}

/* the toggle on its own, sized to be the object on the card rather than a
   control tucked into the corner of a panel */
.axs>.ax-tabs{position:relative;z-index:1;margin:0 auto;padding:4px;
  background:#F2EEE4;width:max-content;
  box-shadow:0 20px 44px rgba(8,7,5,.4),0 1px 3px rgba(6,5,4,.2)}
.axs>.ax-tabs b{padding:clamp(8px,1vw,11px) clamp(14px,1.7vw,22px);
  font-size:clamp(12px,1.25vw,15px);font-weight:700;color:#79827A}
.axs>.ax-tabs b.on{background:#0E6B50;color:#fff}

.ucards .axs-front{align-self:center;width:100%}

/* ---- the hero stage ----
   One column, one width. What you type at the top and what came back directly
   under it on the same edges. The ground is the card ground lifted a few
   stops, ours rather than a client's storefront, and the two panels are the
   same transparent glass every card on the site uses, with no blur, so the
   ground reads through them. */
.stg{position:relative;overflow:hidden;margin-top:clamp(30px,3.6vw,52px);
  padding:clamp(34px,4.4vw,68px) clamp(20px,3vw,54px) clamp(20px,2.4vw,34px);
  background:#14130F}
.stg-bg{position:absolute;inset:0;z-index:0}
.stg-col{position:relative;z-index:2;width:min(660px,84%);margin:0 auto}

/* what you type: the homepage composer, transparent */
.stg-ask .axp{background:rgba(20,19,15,.5);border:1px solid rgba(243,241,234,.2);
  padding:clamp(14px,1.7vw,20px) clamp(15px,1.8vw,22px);box-shadow:0 26px 60px rgba(6,5,4,.34)}
.stg-ask .axp-t{color:#F3F1EA;font-size:clamp(14px,1.5vw,18px);line-height:1.3}
.stg-ask .axp-b{margin-top:clamp(14px,1.7vw,20px);padding-top:clamp(10px,1.2vw,14px);
  border-top:1px solid rgba(243,241,234,.14)}
.stg-ask .axp-i,.stg-ask .axp-m{color:rgba(243,241,234,.45)}
.stg-ask .axp-c{display:none}
.stg-ask .axp-s{background:#F3F1EA;color:#141310;
  width:clamp(28px,3vw,34px);height:clamp(28px,3vw,34px)}

/* and what came back, on the same edges */
.stg-list{margin-top:clamp(10px,1.2vw,14px);background:rgba(20,19,15,.5);
  border:1px solid rgba(243,241,234,.2);box-shadow:0 26px 60px rgba(6,5,4,.3)}
.stg-r{display:flex;align-items:center;gap:12px;
  padding:clamp(11px,1.3vw,15px) clamp(15px,1.8vw,22px);
  border-bottom:1px solid rgba(243,241,234,.1)}
.stg-r:last-child{border-bottom:0}
.stg-r b{font-weight:500;font-size:clamp(12.5px,1.3vw,15px);color:#F3F1EA;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stg-r em{font-style:normal;margin-left:auto;flex:none;
  font-size:clamp(10.5px,1.1vw,12.5px);color:rgba(243,241,234,.5);white-space:nowrap}
.stg-r i{font-style:normal;flex:none;padding:4px 9px;
  font-family:var(--mono);font-size:clamp(9px,.95vw,10.5px);letter-spacing:.06em;
  text-transform:uppercase;background:rgba(157,196,159,.16);color:#9DC49F}
.stg-r.on i{background:rgba(207,149,54,.18);color:#E2B25E}
.stg-cap{position:relative;z-index:2;margin-top:clamp(18px,2.2vw,30px);
  text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(243,241,234,.55)}
@media(max-width:640px){
  .stg-col{width:100%}
  .stg-r em{display:none}
}

/* ---- the number, the width of the screen, on the galaxy ----
   Lifted from the Ari Ticket Galaxy artifact. The type sits left; the galaxy
   sits right of centre so the type has a clean ground. */
.tband{position:relative;overflow:hidden;background:var(--dark);color:#F3F1EA;
  padding:clamp(72px,9vw,132px) 0 clamp(76px,9.5vw,140px)}
/* the vignette fades out toward the bottom with the dust: left full, its
   last rows are a shade darker than the band below and read as a rule */
.tband::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 100% at 66% 50%,transparent 44%,rgba(20,19,16,.55) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
/* the dust thins out toward the bottom edge rather than stopping at it, so
   the band below, on the same ground, is a continuation and not a seam */
.tb-cv{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
.tb-c{position:relative;z-index:2}
.tb-k{display:block;font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(243,241,234,.5)}
.tb-b{display:block;font-family:var(--disp);font-weight:500;letter-spacing:-.045em;
  line-height:.86;font-size:clamp(84px,15vw,230px);color:#F3F1EA;margin-top:clamp(14px,1.8vw,26px);
  font-variant-numeric:tabular-nums}
.tb-s{display:block;margin-top:clamp(14px,1.8vw,26px);
  font-family:var(--disp);font-weight:500;letter-spacing:-.025em;
  font-size:clamp(20px,2.6vw,34px);line-height:1.15;max-width:20ch;color:#F3F1EA;text-wrap:balance}
/* wide enough for two lines, and balanced so neither line is a word */
.tb-n{margin:clamp(18px,2.2vw,30px) 0 0;font-size:14.5px;line-height:1.6;
  color:rgba(243,241,234,.62);max-width:60ch;text-wrap:balance}
@media(max-width:760px){.tb-s{max-width:none}.tb-n{font-size:13.5px}}

/* The galaxy, the columns and the trust band are one dark run. Their heights
   are fractional, so adjacent sections meet on a part pixel and the compositor
   feathers that edge against what is behind them, which was the page's light
   paper: a hairline of paper at every seam. The run paints dark underneath
   itself, so there is nothing light for a part pixel to show. */
.darkrun{background:var(--dark)}

/* ---- cost and speed, under the galaxy, on the same ground ----
   The two columns the proof row draws, cheaper and faster, taken dark: cream
   type, the tall gray column one shade up from the ground, sage for Ari. */
/* one ground across the galaxy, the columns and the trust band: the same
   token, so there is no step of even one unit to read as a rule */
.rband{background:var(--dark);color:#F3F1EA;padding:clamp(40px,5vw,72px) 0 clamp(64px,8vw,120px)}
.rband+.sec.dark{border-top:0}
.rband .stpg.two{margin-top:0}
.rband .stpg>.stp{border-right-color:rgba(243,241,234,.14)}
.rband .pn b,.rband .pn em{color:#F3F1EA}
.rband .pn span{color:rgba(243,241,234,.6)}
.rband .cbar-v,.rband .tbar-v{color:#F3F1EA}
.rband .cbar-v i{color:rgba(243,241,234,.4)}
.rband .cbar-v.lo,.rband .tbar-v.lo{color:#9DC49F}
.rband .cbar-v.lo i{color:#9DC49F}
.rband .cbar-b.hi,.rband .tbar-b.hi{background:rgba(243,241,234,.22)}
.rband .cbar-b.lo,.rband .tbar-b.lo{background:#9DC49F}
.rband .cbar-l{border-top-color:rgba(243,241,234,.14);color:rgba(243,241,234,.55)}
.rband .tbar-l{color:rgba(243,241,234,.55)}
/* the label sits centered on the number. The two-up rule puts it on the
   number's baseline, which hangs the second line of a two line label below
   the figure it belongs to. */
.rband .pn{align-items:center}
.rband .pn em{align-self:flex-end;margin-bottom:.12em}
.rband .pn span{align-self:center}
@media(max-width:820px){.rband .stpg.two{grid-template-columns:1fr;row-gap:clamp(36px,7vw,56px)}
  .rband .stpg>.stp{border-right:0;padding:0}}

/* the proof row carries one, two or three panels. Three is the homepage; a
   number that deserves the whole width gets one. */
/* ---- two panels instead of three ----
   .pviz reserves 242px and pins its content to the bottom, which is right when
   three panels have to line up under one rule on the homepage. With two, the
   time bars are half that tall, so the number floated at the top of the panel
   with a hand's width of nothing under it. Here the visualisation starts right
   under its number and the panel is only as tall as what is in it. */
.stpg.two{grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;gap:0;margin-top:clamp(26px,3.2vw,46px)}
.stpg.two .pn{align-items:baseline;gap:12px}
.stpg.two .pn b{font-size:clamp(46px,5vw,72px)}
.stpg.two .pn em{align-self:baseline;margin:0 0 0 -6px}
.stpg.two .pn span{font-size:14.5px;line-height:1.35;max-width:22ch;flex:1 1 auto}
.stpg.two .pviz{margin-top:clamp(26px,3vw,40px);min-height:0;align-items:flex-start}
.stpg.two .tbar{gap:clamp(34px,4vw,54px)}
.stpg.two .cbar{align-items:end;min-height:clamp(150px,15vw,190px)}
/* the line under the pair belongs to both of them */
.stpg.two+.diacap{margin-top:clamp(28px,3.4vw,46px);max-width:64ch}
.stpg.one{grid-template-columns:minmax(0,1fr);margin-top:clamp(18px,2.2vw,34px)}
.stpg.one>.stp{border-right:0;padding-right:0}
.stpg.one .pn{max-width:none}
.stpg.one .pviz{margin-top:clamp(18px,2vw,30px)}
.stpg.one .cloud{height:clamp(260px,26vw,360px)}
.stpg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.stpg>.stp{display:flex;flex-direction:column;align-items:stretch;gap:0;min-width:0;
  padding-right:clamp(18px,2.4vw,40px);border-right:1px solid var(--line)}
.stpg>.stp+.stp{padding-left:clamp(18px,2.4vw,40px)}
.stpg>.stp:last-child{border-right:0;padding-right:0}

.pn{display:flex;align-items:center;gap:11px;flex-wrap:nowrap}
.pn b{font-family:var(--disp);font-weight:500;font-size:clamp(42px,4.4vw,64px);
  letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;flex:none}
.pn em{font-style:normal;font-family:var(--disp);font-weight:500;align-self:flex-end;
  font-size:clamp(24px,2.4vw,36px);letter-spacing:-.05em;margin:0 0 .12em -8px}
.pn span{font-size:13.5px;line-height:1.4;color:var(--ink60);flex:1;min-width:0}

.pviz{margin-top:clamp(30px,3.6vw,54px);display:flex;align-items:flex-end;
  min-height:clamp(196px,19.5vw,242px)}

/* cost: two columns, two figures, two words */
.cbar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,40px);
  align-items:end;width:100%}
.cbar-c{display:flex;flex-direction:column;justify-content:flex-end}
.cbar-v{font-size:15px;letter-spacing:-.015em;font-variant-numeric:tabular-nums;
  margin-bottom:9px;opacity:0;transform:translateY(5px);
  transition:opacity .4s ease .45s,transform .4s ease .45s}
.cbar-v i{font-style:normal;font-size:.78em;color:var(--ink40)}
.cbar-v.lo i{color:var(--green);opacity:.6}
.cbar-v.lo{color:var(--green)}
.stp.in .cbar-v{opacity:1;transform:none}
.cbar-b{display:block;width:100%;transform:scaleY(0);transform-origin:50% 100%;
  transition:transform .9s cubic-bezier(.22,1,.36,1)}
.cbar-b.hi{height:clamp(136px,14.3vw,174px);background:var(--line2)}
.cbar-b.lo{height:4px;background:var(--green)}
.stp.in .cbar-b{transform:scaleY(1)}
.stp.in .cbar-b.lo{transition-delay:.35s}
.cbar-l{margin-top:11px;padding-top:10px;border-top:1px solid var(--line);
  font-size:12px;color:var(--ink60)}

/* time: two lengths on one scale */
.tbar{display:flex;flex-direction:column;gap:clamp(30px,3.6vw,48px);width:100%}
.tbar-r{display:flex;flex-direction:column}
.tbar-v{font-size:15px;letter-spacing:-.015em;margin-bottom:8px;
  font-variant-numeric:tabular-nums;opacity:0;transition:opacity .4s ease .45s}
.tbar-v.lo{color:var(--green)}
.stp.in .tbar-v{opacity:1}
.tbar-b{display:block;height:15px;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .9s cubic-bezier(.22,1,.36,1)}
.tbar-b.hi{width:100%;background:var(--line2)}
.tbar-b.lo{width:5px;background:var(--green)}
.stp.in .tbar-b{transform:scaleX(1)}
.stp.in .tbar-b.lo{transition-delay:.35s}
.tbar-l{margin-top:9px;font-size:12px;color:var(--ink60)}

/* half a million tasks, as a cloud you can see the size of */
.cloud{display:block;width:100%;height:clamp(218px,22vw,268px)}

@media(max-width:900px){
  .stpg{grid-template-columns:1fr}
  .stpg>.stp{padding:26px 0 0;border-right:0}
  .stpg>.stp+.stp{padding-left:0;border-top:1px solid var(--line)}
  .pviz{min-height:0;margin-top:24px}
}

/* the closing panel: price first, two buttons under it */
.sec-tight{padding:clamp(40px,5vw,76px) 0}
.pbx{text-align:center;padding:clamp(30px,3.6vw,52px) clamp(22px,4vw,64px)}
.pbx-k{margin-bottom:14px;color:rgba(243,241,234,.45)}
.pbx h2{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.03em}
.pbx-s{margin:14px auto 0;max-width:46ch;color:rgba(243,241,234,.62);font-size:15.5px}
.pbx-p{display:flex;align-items:flex-start;justify-content:center;
  gap:clamp(22px,3.4vw,54px);margin-top:clamp(26px,3vw,40px)}
.pbx-p div{display:flex;flex-direction:column;align-items:center}
.pbx-p b{font-family:var(--disp);font-weight:400;font-size:clamp(44px,5.6vw,78px);
  letter-spacing:-.05em;line-height:1;color:#F3F1EA;font-variant-numeric:tabular-nums}
.pbx-p span{margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(243,241,234,.5)}
.pbx-p i{font-style:normal;font-size:15px;color:rgba(243,241,234,.45);
  align-self:center;margin-top:-14px}
.pbx-b{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;
  margin-top:clamp(22px,2.4vw,32px)}
.pbx-f{margin-top:16px;font-size:13.5px;color:rgba(243,241,234,.5)}
.pbx-f a{color:rgba(243,241,234,.8);border-bottom:1px solid rgba(243,241,234,.3)}
.pbx-f a:hover{color:#F3F1EA;border-bottom-color:#F3F1EA}
@media(max-width:640px){
  .pbx-p{gap:18px}
  .pbx-p i{display:none}
  .pbx-b .btn{width:100%}
}

#proof .hd{margin-bottom:clamp(30px,4vw,58px)}
#proof .hd{grid-template-columns:minmax(0,1fr)}
#proof .hd h2{font-size:clamp(24px,2.7vw,38px);letter-spacing:-.03em}
/* this heading is long, and it reads badly broken over two lines */
#can .hd{grid-template-columns:minmax(0,1fr)}

/* ---- the demo wears Ari's own chrome, over a real Magento store ---- */
.mg-rail{display:flex;align-items:center;gap:8px;padding-bottom:11px;margin-bottom:12px;
  border-bottom:1px solid rgba(243,241,234,.12)}
.mg-brand{font-family:var(--disp);font-weight:500;font-size:15px;letter-spacing:-.035em;color:#F3F1EA}
.mg-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(20,19,15,.55);
  border:1px solid rgba(243,241,234,.22);padding:4px 10px;font-size:11.5px;color:#F3F1EA;
  white-space:nowrap;min-width:150px}
.mg-doc{width:8px;height:10px;flex:none;border:1px solid rgba(243,241,234,.7);
  border-top-right-radius:0;position:relative}
.mg-cv{margin-left:auto;width:6px;height:6px;flex:none;border-right:1px solid rgba(243,241,234,.6);
  border-bottom:1px solid rgba(243,241,234,.6);transform:rotate(45deg) translate(-2px,-2px)}
.mg-cred{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:10.5px;
  color:rgba(243,241,234,.55);white-space:nowrap}
.mg-cred i{width:5px;height:5px;border-radius:50%;background:#CF9536;flex:none}
.mg-acct{margin-left:auto;width:20px;height:20px;border-radius:50%;background:#F3F1EA;color:#171613;flex:none;
  display:grid;place-items:center;font-size:10px;font-weight:600}
.mg-ph{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.mg-tabs{display:inline-flex;background:rgba(243,241,234,.1);flex:none}
.mg-tabs b{font-weight:500;font-size:10.5px;padding:4px 10px;color:rgba(243,241,234,.6)}
.mg-tabs b.on{background:#2D572F;color:#fff}
.mg-view{display:inline-flex;gap:5px;font-size:10.5px;color:rgba(243,241,234,.45);
  background:rgba(20,19,15,.5);border:1px solid rgba(243,241,234,.18);padding:3px 9px;
  white-space:nowrap;overflow:hidden;min-width:0}
.mg-view b{font-weight:500;color:#F3F1EA}
.mg-tools{margin-left:auto;display:flex;gap:4px;flex:none}
.mg-tools i{width:20px;height:20px;background:rgba(243,241,234,.1);display:grid;
  place-items:center;color:rgba(243,241,234,.75)}
.mg-tools i svg{width:11px;height:11px;display:block}
.mg-live-u{border:1px solid rgba(243,241,234,.3);color:#F3F1EA;padding:5px 10px;font-size:11.5px;
  white-space:nowrap}

/* chocolate, drawn rather than borrowed */
.mg-t .ck{display:block;flex:1;min-height:0;background:#F8E0D7;position:relative;overflow:hidden}
.mg-t .ck::after{content:"";position:absolute;left:14%;right:14%;top:20%;bottom:20%;
  background:repeating-linear-gradient(90deg,var(--c) 0 22%,rgba(0,0,0,.10) 22% 25%)}
.mg-t .ck1{--c:#7A4B2A}
.mg-t .ck2{--c:#5A3520}
.mg-t .ck3{--c:#3F2517;background:#EFD9CE}
.mg-t .ck4{--c:#A8703C;background:#FBEADF}
@media(max-width:940px){
  .mg-cred,.mg-view{display:none}
  .mg-tools{display:none}
}
.mg-app{display:flex;flex-direction:column;width:100%;min-width:0}
.mg-app .mg-win{flex:1;min-height:0}
.mg[data-s="2"] .mg-rail{display:none}
.mg-t .ck::after{left:17%;right:17%;top:33%;bottom:33%}

/* ---- the customer's storefront, as their site actually is ---- */
.ld-util{display:flex;align-items:center;gap:10px;background:#141310;color:#fff;
  font-size:9px;padding:5px 10px;letter-spacing:.01em}
.ld-flag{position:relative;width:11px;height:7px;flex:none;
  background:repeating-linear-gradient(180deg,#B22234 0 1.17px,#fff 1.17px 2.34px)}
.ld-flag::after{content:"";position:absolute;left:0;top:0;width:4.6px;height:3.8px;background:#3C3B6E}
.ld-util em{flex:1;text-align:center;font-style:normal;color:rgba(255,255,255,.9)}
.ld-util em u{text-decoration:underline;text-underline-offset:2px}
.ld-store{color:rgba(255,255,255,.9);white-space:nowrap}
.ld-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  padding:10px 12px;background:#fff;border-bottom:1px solid #EFEFEF}
.ld-head nav{display:flex;gap:11px;font-size:9.5px;color:#141310;white-space:nowrap}
.ld-logo{display:flex;flex-direction:column;align-items:center;gap:2px}
.ld-logo img{height:11px;width:auto;display:block}
.ld-logo i{font-style:normal;font-size:5px;letter-spacing:.24em;color:#141310;text-transform:uppercase}
.ld-act{display:flex;align-items:center;gap:7px;justify-content:flex-end}
.ld-search{font-weight:400;font-size:8.5px;color:#9a9a9a;border:1px solid #E4E4E4;
  border-radius:999px;padding:3px 22px 3px 9px;white-space:nowrap}
.ld-ic{width:10px;height:10px;border:1.2px solid #141310;border-radius:2px;flex:none;display:block}
.ld-hero{position:relative;flex:1;min-height:0;overflow:hidden;background:#B9CBEA}
.ld-hero img{width:100%;height:100%;object-fit:cover;display:block}
.ld-hero-c{position:absolute;left:6%;top:50%;transform:translateY(-50%)}
.ld-hero-c h4{margin:0;font-family:Georgia,"Times New Roman",serif;font-weight:400;
  font-size:clamp(14px,2vw,25px);line-height:1.12;color:#141310;letter-spacing:-.01em}
.ld-hero-c span{display:inline-block;margin-top:10px;background:#fff;color:#141310;
  font-size:9px;padding:6px 13px}
.ld-row{background:#fff;padding:9px 12px 11px;flex:none}
.ld-rt{font-family:Georgia,"Times New Roman",serif;font-size:11px;text-align:center;
  color:#141310;margin-bottom:8px}
.ld-row .mg-grid{padding:0;gap:8px}
.ld-row .mg-t{border:0;background:none}
.ld-row .mg-t img{aspect-ratio:1;height:auto;flex:none;object-fit:cover;background:#F6F5F3}
.ld-row .mg-t h6{padding:6px 0 0;font-size:8.5px;text-align:center;line-height:1.25}
.ld-row .pz{padding:1px 0 0;font-size:8.5px;text-align:center}
@media(max-width:940px){.ld-util em,.ld-store,.ld-search{display:none}.ld-row{display:none}}
/* the storefront is a viewport: it clips, it does not stretch the box */
.ld-hero{flex:1 1 auto;min-height:0}
.ld-row{flex:0 0 auto}
.ld-row .mg-t img{aspect-ratio:auto;height:74px;object-fit:contain;background:#fff}
/* the Your changes list the app ships, in the demo's language */
.mg-chg{margin-top:12px;padding-top:11px;border-top:1px solid rgba(243,241,234,.12);
  opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
.mg-chg.in{opacity:1;transform:none}
.mg-chg-k{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(243,241,234,.4);margin-bottom:8px}
.mg-chg-r{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#F3F1EA}
.mg-chg-r i{width:6px;height:6px;border-radius:50%;background:#CF9536;flex:none}
.mg-chg-r b{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-chg-r em{font-style:normal;font-size:10px;color:rgba(243,241,234,.4);white-space:nowrap}
.mg-chg-r u{margin-left:auto;text-decoration:none;background:#2D572F;color:#fff;
  font-size:10.5px;padding:4px 9px;white-space:nowrap;flex:none}
@media(max-width:940px){.mg-chg-r em{display:none}}
/* one price, so it gets the room the pair used to share */
.pbx-one b{font-size:clamp(46px,5vw,72px)}
.pbx-one span{margin-top:11px}
/* no sub-line, so the price needs its own air under the heading */
.pbx h2+.pbx-p{margin-top:clamp(22px,2.4vw,32px)}

/* the logo wall: a still grid on desktop, still moving on a phone */
.credgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(22px,3vw,44px) clamp(16px,2.4vw,38px);align-items:center;
  margin-top:clamp(20px,2.6vw,34px)}
/* Every mark fills the same box, whichever way it is long. Capped by height
   alone, a twelve to one wordmark ran the width of its cell while a square
   glyph sat at thirty pixels; the files are cropped to their ink, so with a
   box both ways a glyph fills the height and a wordmark fills the width. */
.credgrid img{width:auto;height:auto;max-height:clamp(28px,2.8vw,40px);
  max-width:clamp(96px,10.5vw,150px);margin:0 auto;
  display:block;max-width:clamp(96px,10vw,138px);object-fit:contain;
  filter:brightness(0);opacity:.48;transition:opacity .25s ease}
.credgrid img:hover{opacity:.8}
.cred .credrow{display:none}
.credrows{display:none}
@media(max-width:760px){
  .credgrid{display:none}
  .cred .credrow{display:block}
}
/* the next section has to show something in the peek, not just its top padding */
#how.sec{padding-top:clamp(30px,3.4vw,48px)}
/* short laptops: give the peek its room back out of the hero's own spacing */


/* ---- hero: type, buttons, and the next section right underneath ---- */
.hero2{display:block;margin-bottom:0;padding:clamp(76px,11vh,152px) 0 clamp(44px,6.5vh,88px)}
.hero2-c{max-width:none;text-align:center}
.hero2-k{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink40);margin-bottom:clamp(18px,2.4vh,30px)}
.hero2-c h1{max-width:none}
/* the word in the headline types over: change, fix, upgrade, and home to
   change; the first line holds on one row on desktop while the word's
   length changes, and the caret is the green of the mark */
.hero2 .w{display:inline-block;white-space:nowrap;text-align:left;vertical-align:baseline}
.hero2 .caret{display:inline-block;width:.055em;height:.74em;background:var(--green);margin-left:.05em;
  vertical-align:-.04em;animation:h2bk 1s steps(1) infinite}
.hero2 .caret.on{animation:none}
@keyframes h2bk{50%{opacity:0}}
@media(min-width:900px){.hero2 .l1{white-space:nowrap}}
.hero2-s{margin:clamp(18px,2.4vh,28px) auto 0;max-width:62ch;font-size:clamp(16px,1.25vw,18.5px);
  line-height:1.55;color:var(--ink60)}
.hero2-b{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:clamp(24px,3vh,36px)}
.hero2-n{margin-top:13px;font-size:14px;color:var(--ink40)}
@media(max-width:640px){.hero2-b .btn{width:100%}}
/* the showcase wears the app chrome too */
.sh-ph{padding:0 0 9px}
.sh-l .mg-rail{margin-bottom:12px}
/* the showcase pane stacks its chrome above the window, like Meet Ari */
.sh-r{flex-direction:column}
.sh-r>.sv{flex:1;min-height:0}
.sh-done .sh-pr{color:rgba(243,241,234,.62)}
/* the human step reads as the human step */
.pip-node.human b{color:#F3F1EA}
.pip-node.human::before{border-color:#F3F1EA}
.mg-doc{width:11px;height:11px;flex:none;border:0}

/* ---- store type cards: seven different pieces of the product, not seven tables ---- */
/* One column, one width, one material. The panel and the composer used to be
   two frosted white cards bleeding off opposite edges of the picture; now they
   stack on the same edges, centered, in the dark glass the homepage composer is
   made of. */
.vi-art .ui{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;align-items:stretch;gap:9px}
/* a panel is as tall as its rows. As a flex child it was shrinking to make
   room for the composer and its overflow:hidden then cut its own last rows. */
.vi-art .pan{position:static;flex:none;width:100%;background:rgba(20,19,15,.58);
  border:1px solid rgba(243,241,234,.18);overflow:hidden;color:#F3F1EA;
  box-shadow:0 16px 38px rgba(6,5,4,.30)}
.vi-art .pan>b{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(243,241,234,.5);padding:8px 12px 7px;
  border-bottom:1px solid rgba(243,241,234,.12)}

/* the ask, where the card is about asking for something */
.vi-art .ask{position:static;width:100%;background:rgba(20,19,15,.58);
  border:1px solid rgba(243,241,234,.18);padding:9px 10px 8px;
  box-shadow:0 14px 30px rgba(6,5,4,.28)}
.vi-art .ask q{display:block;quotes:none;font-size:10.5px;line-height:1.34;
  color:#F3F1EA;letter-spacing:-.008em}
.vi-art .ask .cb{display:flex;align-items:center;gap:7px;margin-top:8px;padding-top:8px;
  border-top:1px solid rgba(243,241,234,.14)}
.vi-art .ask .cb em{font-style:normal;font-family:var(--mono);font-size:8.5px;
  color:rgba(243,241,234,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vi-art .snd{width:21px;height:21px;margin-left:auto;flex:none;display:grid;place-items:center;
  background:#F3F1EA;color:#141310}
.vi-art .snd svg{width:10px;height:10px;display:block}
/* a label, where a whole composer would be too much */
.vi-art .pill{position:absolute;right:0;bottom:0;background:rgba(16,15,12,.72);color:#F3F1EA;
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid rgba(255,255,255,.13);font-family:var(--mono);
  font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;padding:6px 9px;
  box-shadow:0 10px 22px rgba(6,5,4,.32)}

/* 1 catalog: the product grid */
.vi-art .p-tab{}
.vi-art .rw{display:flex;align-items:center;gap:8px;padding:5px 12px;
  border-bottom:1px solid rgba(243,241,234,.08);font-size:10px;line-height:1.2;
  color:#F3F1EA;white-space:nowrap}
.vi-art .rw:last-child{border-bottom:0}
.vi-art .rw img{width:19px;height:19px;flex:none;object-fit:cover;background:rgba(243,241,234,.08)}
.vi-art .rw b{font-weight:500;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* a product listing is a picture, a SKU and a price. The name was the part
   nobody reads at ten pixels */
.vi-art .rw b.sku{font-family:var(--mono);font-size:9.5px;letter-spacing:.03em;
  color:rgba(243,241,234,.86)}
/* the ticket number never truncates; the sentence does */
.vi-art .rw em{font-style:normal;margin-left:auto;padding-left:10px;font-size:9px;
  color:rgba(243,241,234,.5);flex:none;white-space:nowrap}
.vi-art .rw img.lg{width:auto;max-width:58px;height:13px;background:none;
  object-fit:contain}

/* 2 store views: the scope tree, with two of them ticked */
.vi-art .p-tree{padding-bottom:6px}
.vi-art .tr{display:flex;align-items:center;gap:7px;padding:4px 12px;font-size:9.5px;
  color:#F3F1EA;white-space:nowrap}
.vi-art .tr i{width:9px;height:9px;flex:none;border:1px solid rgba(243,241,234,.3)}
.vi-art .tr.on i{background:#9DC49F;border-color:#9DC49F}
.vi-art .tr b{font-weight:500;flex:none}
.vi-art .tr b.mo{font-family:var(--mono);font-size:9px}
.vi-art .tr em{font-style:normal;margin-left:auto;font-size:9px;color:rgba(243,241,234,.5)}
.vi-art .tr-0{padding-top:8px;padding-bottom:6px}
.vi-art .tr-1{padding-left:28px;position:relative}
.vi-art .tr-1::before{content:"";position:absolute;left:18px;top:0;bottom:0;width:1px;
  background:rgba(243,241,234,.14)}
.vi-art .tr-1:last-child::before{bottom:50%}

/* 5 frontend: the themes it can build inside, said the way the extension
   marks are said one card along. Only Hyva has a mark of its own, so the rest
   are set as words in the same cream weight. A photograph of a storefront in
   a drawn browser was the only color in the row and said nothing about
   themes at all. */
.vi-art .thm{position:static;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:clamp(26px,3.1vw,38px)}
.vi-art .thr{display:flex;align-items:center;justify-content:center;
  gap:clamp(22px,2.6vw,32px)}
.vi-art .thn{font-family:var(--disp);font-size:clamp(17px,1.8vw,21px);font-weight:400;
  letter-spacing:-.025em;color:rgba(243,241,234,.9);white-space:nowrap;
  text-shadow:0 2px 6px rgba(6,5,4,.5)}
.vi-art .thm img{height:clamp(15px,1.6vw,19px);width:auto;display:block;
  filter:brightness(0) invert(1) drop-shadow(0 2px 5px rgba(6,5,4,.5));opacity:.94}

/* 6 business model: one product, two customer groups, two prices. The chart
   before it was three gray rectangles and a person could not price anything
   off it. */
.vi-art .grp{position:static;width:100%;
  display:grid;grid-template-columns:1fr 1fr;gap:9px}
.vi-art .gp{background:rgba(20,19,15,.58);color:#F3F1EA;
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgba(255,255,255,.34);padding:0 0 13px;overflow:hidden;
  box-shadow:0 14px 28px rgba(6,5,4,.28),0 1px 3px rgba(6,5,4,.14),
    inset 0 1px 0 rgba(255,255,255,.58)}
/* the same bar in both tiles, so the only thing that changes is the price */
.vi-art .gp>img{display:block;width:100%;height:clamp(60px,7vw,78px);object-fit:contain;background:#F4F2EC}
.vi-art .gp b{display:block;margin:11px 12px 0;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(243,241,234,.5)}
.vi-art .gp em{display:block;margin:9px 12px 0;font-style:normal;font-family:var(--disp);
  font-size:clamp(17px,1.8vw,21px);font-weight:500;letter-spacing:-.03em;color:#F3F1EA;
  white-space:nowrap}
.vi-art .gp.on{border-color:#9DC49F}
.vi-art .gp.on b{color:#9DC49F}
.vi-art .gp.on em{color:#9DC49F}

/* 7 industry: four things a store might sell, and nothing to read */
.vi-art .pg{position:static;width:100%;
  display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vi-art .pg img{width:100%;height:clamp(62px,7.4vw,80px);object-fit:cover;display:block;
  filter:grayscale(.34) sepia(.12) brightness(.9);
  box-shadow:0 12px 26px rgba(6,5,4,.3),0 1px 3px rgba(6,5,4,.16)}

/* 3 customization: a wall of the marks themselves, no chrome around them.
   White tiles put a lit box behind every logo and the card edge ate all but
   two of them, so the tiles are gone: the marks sit straight on the ground,
   flattened to one cream weight so a pink K and a green wordmark read as one
   set rather than a sticker sheet. Twenty eight of the sixty are here, in
   four rows wider than the card that fade out into both edges, which is what
   says the wall does not stop where the card does. Hyva is a theme, not an
   extension, so it is not in here.

   The files in img/ext/wall are the same marks with their viewBox cropped to
   the ink, because every vendor draws its logo with a different margin and
   one file's 13px was another's 6px of actual mark. Cropped, two rules size
   the whole wall: a glyph carries its weight in a square, a wordmark in a
   line about half as tall. */
.vi-art .xwall{position:absolute;
  left:calc(-1 * clamp(16px,1.8vw,22px));right:calc(-1 * clamp(16px,1.8vw,22px));
  top:48%;transform:translateY(-50%);display:flex;flex-direction:column;
  gap:clamp(21px,2.5vw,31px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
/* the row is wider than the card on purpose; centring it lets both ends run
   out under the fade */
.vi-art .xr{display:flex;align-items:center;justify-content:center;
  gap:clamp(15px,1.7vw,20px)}
/* and the rows are nudged off each other, so the marks read as a field rather
   than as a table of four by six */
.vi-art .xr:nth-child(1){transform:translateX(-16px)}
.vi-art .xr:nth-child(2){transform:translateX(14px)}
.vi-art .xr:nth-child(3){transform:translateX(-8px)}
.vi-art .xr:nth-child(4){transform:translateX(18px)}
.vi-art .xm{flex:none;width:auto;height:17px;object-fit:contain;display:block;
  opacity:.9;filter:brightness(0) invert(1) drop-shadow(0 1px 2px rgba(6,5,4,.45))}
.vi-art .xm.w{height:11px}
/* Amazon Pay is a word under a swoosh, so it is neither a glyph nor a line */
.vi-art .xm.m{height:14px}
/* DHL is a solid slab seven times as wide as it is tall, so it carries the
   weight of a wordmark twice its height */
.vi-art .xm.n{height:8.5px}
/* A phone shows none of this. .vi-pic is a block with no height once the card
   stops being a flex column, so .vi-art is nought wide on every one of the
   seven cards and all seven pieces of artwork collapse; the fade is what keeps
   this one from spilling out of the card while that is true. The sizes below
   are the phone's, for when .vi-pic is given its height back. */
@media(max-width:820px),(hover:none){
  .vi-art .xwall{left:calc(-1 * clamp(18px,2vw,24px));right:calc(-1 * clamp(18px,2vw,24px));
    gap:13px}
  .vi-art .xr{gap:14px}
  .vi-art .xm{height:15px}
  .vi-art .xm.w{height:9.5px}
  .vi-art .xm.m{height:12.5px}
  .vi-art .xm.n{height:7.5px}
}


/* 4 version: the release track */
.vi-art .p-trk{}
.vi-art .trk{position:relative;display:flex;align-items:flex-start;
  justify-content:space-between;padding:20px 14px 12px}
.vi-art .trk::before{content:"";position:absolute;left:14px;right:14px;top:24px;height:1px;
  background:rgba(243,241,234,.18)}
.vi-art .tk{position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:center;gap:7px}
.vi-art .tk i{width:9px;height:9px;display:grid;place-items:center}
.vi-art .tk i::after{content:"";width:7px;height:7px;background:rgba(20,19,15,.5);
  border:1px solid rgba(243,241,234,.3)}
.vi-art .tk.on i::after{width:9px;height:9px;background:#9DC49F;border-color:#9DC49F}
.vi-art .tk em{font-style:normal;font-family:var(--mono);font-size:8px;
  color:rgba(243,241,234,.5);white-space:nowrap}
.vi-art .tk.on em{color:#9DC49F}

/* 5 frontend: the storefront, in a window */



/* ---- hero on ink: slanted bands of green light behind the words, the way
   the site's dark bands already sit on ink. Drawn small on a canvas by the
   script under the hero in index.html and blurred here, so they read as
   light rather than stripes. The words sit above it. ---- */
.hero2{position:relative;overflow:hidden}
.hero2.night{background:var(--dark)}
.hero2-bg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0;
  filter:blur(8px);transform:scale(1.12)}
.hero2.night h1,.hero2.night .hero2-mi{color:#F3F1EA}
.hero2.night .hero2-k{color:rgba(243,241,234,.45)}
.hero2.night .hero2-s{color:rgba(243,241,234,.72)}
.hero2.night .hero2-n{color:rgba(243,241,234,.42)}
.hero2.night .btn-o{color:#F3F1EA;border-color:rgba(243,241,234,.42)}
.hero2.night .btn-o:hover{border-color:#F3F1EA}
.hero2.night .hero2-sc{color:rgba(243,241,234,.55)}
.hero2.night .hero2-sc:hover{color:#F3F1EA}
/* nothing either side of the headline; the mark sits above the kicker */
.hero2-m{display:block;width:clamp(31px,3.1vw,45px);margin:0 auto clamp(20px,2.6vh,30px)}
.hero2-mi{display:block;width:100%;height:auto;color:var(--ink)}
.hero2-c{position:relative;z-index:1}
.hero2-c h1{font-size:clamp(40px,5.5vw,70px);line-height:1.05;letter-spacing:-.038em}
.hero2-s{max-width:68ch}

/* the two buttons a product page opens with, under the hero lede */
.hero-b{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(20px,2.2vw,28px)}
@media(max-width:560px){.hero-b .btn{width:100%}}

/* a link inside body copy has to look like one: the global rule strips it */
.diacap a,.hd .lede a,.faqs p a{color:var(--ink);border-bottom:1px solid var(--line2)}
.diacap a:hover,.hd .lede a:hover,.faqs p a:hover{border-bottom-color:var(--ink)}
.sec.dark .diacap a,.sec.dark .hd .lede a{color:#F3F1EA;
  border-bottom-color:rgba(243,241,234,.4)}
.sec.dark .diacap a:hover,.sec.dark .hd .lede a:hover{border-bottom-color:#F3F1EA}

/* a sculpted ground instead of a painted one, so a panel on a subpage looks
   like a panel on the homepage */
.dmo-img .dmo-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:1}
/* the ground is the point here, so barely a wash: just enough to sit the panel
   on something rather than float it on raw color */
.dmo-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,15,12,.1) 0%,rgba(16,15,12,.26) 100%)}
/* on color the panel needs its own weight to separate */
.dmo-img .dw{box-shadow:0 30px 60px rgba(20,19,15,.34),0 4px 12px rgba(20,19,15,.18)}

/* the feature rows: equal columns and a square frame, so the three visuals are
   one size. flip only reorders, so without this the flipped row lands in the
   narrow column and comes out a different shape. */
.sec.sqv .frow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
/* ---- the card, in the language the homepage already speaks ---- */
.axs{position:relative;aspect-ratio:1;overflow:hidden;background:#171613;min-width:0;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(12px,1.6vw,20px);padding:0 clamp(16px,2.4vw,32px)}
/* One inset for all four cards. Each object used to set its own width, so the
   composer, the marks, the bug list and the toggle all started and stopped on
   four different lines and the row read as four unrelated drawings. */
.ucards .axs{padding:clamp(14px,1.7vw,22px);justify-content:center}
.ucards .axs>*,.ucards .axs-front,.ucards .axs-back{width:100%;align-self:stretch}
.axs-wash{position:absolute;inset:0;z-index:0}
/* four grounds, one recipe, so they are a family and not four moods */
/* the support card: the ask first, the reply under it, both on the same edges */
.axs.axs-stack{display:flex;flex-direction:column;justify-content:center;gap:12px}
.axs.axs-stack .axs-front{order:1;width:88%;align-self:center}
.axs.axs-stack .axs-back{order:2;width:88%;align-self:center}
.axs-back{position:relative;z-index:1;align-self:flex-end;width:94%}
.axs-front{position:relative;z-index:2;align-self:flex-start;width:86%}

/* the panel: glass on the ground, the way the homepage does it */
/* the panel clips its own rows, and the flex items may shrink: WebKit let a
   package name push the list out past both edges of its panel */
.axs-back,.axs-front{min-width:0}
.axs-back .ax{overflow:hidden;background:rgba(20,19,15,.58);border:1px solid rgba(243,241,234,.18);
  backdrop-filter:blur(9px);color:#F3F1EA;font-size:12px;
  box-shadow:0 24px 54px rgba(8,7,5,.44)}
.axs-back .ax-lab{color:rgba(243,241,234,.5);padding:12px 15px 9px;font-size:9.5px}
.axs-back .ax-changes{padding:0 15px 14px;gap:11px}
.axs-back .ax-d{background:#CF9536}
.axs-back .ax-d.ax-d-go{background:#7FA47F}
.axs-back .ax-ct b{color:#F3F1EA;font-size:12px;font-weight:500}
.axs-back .ax-ct em{color:rgba(243,241,234,.45);font-size:11px}
.axs-back .ax-b{background:none;border:1px solid rgba(243,241,234,.28);
  color:rgba(243,241,234,.8);font-size:10px;font-weight:500;padding:5px 9px}
.axs-back .ax-b-go{background:#F3F1EA;border-color:#F3F1EA;color:#14130F;font-weight:600}
.axs-back .ax-sug{padding:0 15px 14px;gap:8px}
.axs-back .ax-s{background:rgba(243,241,234,.06);border:1px solid rgba(243,241,234,.16);
  color:#F3F1EA;font-size:12px;font-weight:400;padding:11px 13px}
.axs-back .ax-i{color:#9DC49F}
.axs-back .ax-msg{background:rgba(243,241,234,.06);border:1px solid rgba(243,241,234,.16);
  color:rgba(243,241,234,.86);margin:12px 15px 14px;font-size:12px;padding:12px 14px}
.axs-back .ax-you{background:rgba(157,196,159,.16);color:#F3F1EA;
  margin:12px 15px 0 auto;font-size:12px;padding:11px 13px;max-width:78%}
.axs-back .ax-chip{background:rgba(243,241,234,.06);border:1px solid rgba(243,241,234,.16);
  margin:0 15px 14px;font-size:11.5px;padding:10px 12px;color:#F3F1EA}
.axs-back .ax-chip b{background:rgba(157,196,159,.22);color:#B7D6B7}
.axs-back .ax-note{color:#9DC49F;padding:12px 18px 14px;flex-wrap:wrap;line-height:1.4}
.axs-back .ax-note .ax-i{color:#9DC49F}
.axs-back .ax-chip em{background:rgba(243,241,234,.1);color:rgba(243,241,234,.5)}

/* the prompt, the same composer the homepage opens with */
.axp{display:block;background:rgba(20,19,15,.62);border:1px solid rgba(243,241,234,.2);
  backdrop-filter:blur(9px);box-shadow:0 26px 56px rgba(8,7,5,.5);
  padding:clamp(14px,1.7vw,19px) clamp(14px,1.7vw,19px) clamp(11px,1.3vw,15px)}
.axp-t{display:block;font-family:var(--sans);font-size:clamp(13px,1.2vw,15.5px);
  line-height:1.4;color:#F3F1EA;letter-spacing:-.008em}
.axp-b{display:flex;align-items:center;gap:10px;margin-top:clamp(12px,1.5vw,18px);
  padding-top:clamp(10px,1.2vw,14px);border-top:1px solid rgba(243,241,234,.14)}
.axp-i,.axp-m{display:block;width:16px;height:16px;flex:none;color:rgba(243,241,234,.5)}
.axp-i svg,.axp-m svg,.axp-s svg{width:100%;height:100%;display:block}
.axp-c{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(243,241,234,.62);background:rgba(243,241,234,.08);padding:5px 9px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.axp-m{margin-left:auto}
.axp-s{width:28px;height:28px;flex:none;display:grid;place-items:center;
  background:#F3F1EA;color:#14130F;padding:7px}

/* the rail: what a store actually runs, in focus one at a time */
.axl{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  min-width:0;
  gap:clamp(9px,1.2vw,15px);width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.axl-i{flex:none;width:clamp(44px,5.4vw,64px);height:clamp(44px,5.4vw,64px);
  display:grid;place-items:center;background:#F6F4EE;
  box-shadow:0 12px 26px rgba(8,7,5,.34)}
.axl-i img{max-width:64%;max-height:52%;object-fit:contain;display:block}
.axl-i.on{width:clamp(64px,8vw,96px);height:clamp(64px,8vw,96px);
  box-shadow:0 20px 42px rgba(8,7,5,.46)}
.axl-i.on img{max-width:66%;max-height:54%}

@media(max-width:700px){
  .axs{aspect-ratio:auto;padding:22px 14px;gap:14px}
  .axs-back,.axs-front{width:100%}
  /* seven tiles at their desktop size are wider than a phone, and a rail that
     cannot shrink drags the whole page sideways with it */
  .axl{gap:7px}
  .axl-i{width:38px;height:38px}
  .axl-i.on{width:54px;height:54px}
}
@media(max-width:900px){.sec.sqv .frow{grid-template-columns:1fr}}

/* frow with no kicker should not leave the gap where one would have been */
.frow .kick:empty{display:none}

/* ---- the Ari app, measured off ari.agentformagento.com ---- */
.ax{display:block;background:#F2EEE4;color:#18211B;
  font-family:var(--sans);font-size:12.5px;line-height:1.4;
  border:1px solid rgba(24,33,27,.1);
  box-shadow:0 30px 60px rgba(20,19,15,.34),0 4px 12px rgba(20,19,15,.16)}
.ax b,.ax em,.ax i,.ax span{font-style:normal}
.ax-h{display:flex;align-items:center;gap:9px;padding:9px 11px;
  border-bottom:1px solid #E7E2D5;background:#FBF9F2}
.ax-h>b{font-weight:700;font-size:14px;letter-spacing:-.01em;flex:none}
.ax-store{display:flex;align-items:center;gap:7px;flex:1;min-width:0;
  border:1px solid #E7E2D5;background:#fff;padding:6px 9px;font-weight:700;font-size:12px}
.ax-store .ax-cv{margin-left:auto;opacity:.5;display:block;width:12px;height:12px}
.ax-av{width:24px;height:24px;flex:none;display:grid;place-items:center;
  background:#18211B;color:#F2EEE4;font-weight:700;font-size:11px}
.ax-i{display:block;width:14px;height:14px;flex:none;color:#0A5640}
.ax-i svg,.ax-cv svg{width:100%;height:100%;display:block}
.ax-lab{display:block;padding:12px 12px 6px;font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#79827A}
.ax-msg{display:block;margin:10px 12px 0;padding:10px 12px;background:#fff;
  border:1px solid #E7E2D5;font-size:12.5px;line-height:1.5}
.ax-you{display:block;margin:10px 12px 0 auto;max-width:82%;padding:10px 12px;
  background:#E8E4D8;font-size:12.5px;line-height:1.5;width:max-content}
.ax-sug{display:flex;flex-direction:column;gap:7px;padding:0 12px}
.ax-s{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;
  border:1px solid #D6E7DD;color:#0A5640;font-weight:600;font-size:12.5px}
.ax-changes{display:flex;flex-direction:column;gap:9px;padding:2px 12px 0}
.ax-c{display:flex;align-items:center;gap:9px}
.ax-d{width:6px;height:6px;flex:none;background:#CF9536;border-radius:50%}
.ax-d.ax-d-go{background:#0E6B50}
.ax-ct{min-width:0;flex:1;display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.ax-ct b{font-weight:700;font-size:12px;overflow:hidden;text-overflow:ellipsis}
.ax-ct em{color:#79827A;font-size:11.5px;flex:0 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis}
.ax-b{flex:none;padding:5px 9px;font-size:10.5px;font-weight:800;white-space:nowrap}
.ax-b-go{background:#0E6B50;color:#fff}
.ax-b-off{background:#fff;color:#BB4A30;border:1px solid #E7E2D5;font-weight:700}
.ax-note{display:flex;align-items:center;gap:8px;padding:12px 12px 0;
  font-size:11.5px;font-weight:600;color:#0A5640}
.ax-chip{display:flex;align-items:center;gap:9px;margin:12px 12px 0;padding:8px 10px;
  background:#fff;border:1px solid #E7E2D5;font-size:12px}
.ax-chip b{background:#E6EDE7;color:#2F5D3A;padding:3px 7px;font-weight:700;font-size:11.5px}
.ax-chip span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ax-chip em{background:#F1EEE5;color:#79827A;padding:3px 7px;font-size:10px;font-weight:700}
.ax-ask{display:flex;align-items:center;gap:9px;margin:9px 12px 12px;padding:9px 10px;
  background:#FBF9F2;border:1.5px solid #E7E2D5}
.ax-ask>b{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ax-ph{flex:1;min-width:0;color:#9A9C93;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ax-p,.ax-mic{display:block;width:15px;height:15px;flex:none;color:#79827A}
.ax-p svg,.ax-mic svg,.ax-send svg{width:100%;height:100%;display:block}
.ax-send{width:24px;height:24px;flex:none;display:grid;place-items:center;
  background:#0E6B50;color:#fff;padding:5px}
.ax-tabs{display:flex;gap:2px;margin:12px 12px 0;padding:3px;background:#EDE9DE;width:max-content}
.ax-tabs b{padding:5px 12px;font-size:11.5px;font-weight:700;color:#79827A}
.ax-tabs b.on{background:#0E6B50;color:#fff}

/* a panel that shows one thing needs to close itself off at the bottom */
.ax>.ax-changes:last-child,.ax>.ax-sug:last-child{padding-bottom:14px}
.ax>.ax-msg:last-child{margin-bottom:12px}
.ax>.ax-lab:first-child{padding-top:14px}

/* a phone cannot hold a five row list with its buttons inside a 350px square,
   so below that the panel takes the height it needs instead of breaking. */
@media(max-width:700px){
  .sec.sqv .frow .ax{aspect-ratio:auto;padding:18px 0;font-size:13px}
  .sec.sqv .frow .ax .ax-lab{padding:0 16px 12px}
  .sec.sqv .frow .ax .ax-changes,.sec.sqv .frow .ax .ax-sug{padding:0 16px;gap:14px}
  .sec.sqv .frow .ax .ax-c{flex-wrap:wrap;gap:6px 9px}
  .sec.sqv .frow .ax .ax-ct{flex:1 1 100%}
  .sec.sqv .frow .ax .ax-ct b{font-size:13.5px;white-space:normal}
  .sec.sqv .frow .ax .ax-b{margin-left:17px}
  .sec.sqv .frow .ax .ax-s{font-size:13.5px;padding:14px 14px}
  .sec.sqv .frow .ax .ax-msg{margin:12px 16px 0;font-size:13.5px;padding:14px 15px}
  .sec.sqv .frow .ax .ax-you{margin:0 16px 0 auto;font-size:13.5px;padding:12px 15px}
  .sec.sqv .frow .ax .ax-chip{margin:0 16px;font-size:12.5px;padding:11px 12px}
  .sec.sqv .frow .ax .ax-ask{margin:12px 16px 0;padding:12px 13px;font-size:13.5px}
}

/* a version move, said with numbers */
.axv{position:relative;z-index:1;display:block;text-align:center;color:#F3F1EA}
.axv-row{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.2vw,30px)}
.axv-p{display:flex;flex-direction:column;align-items:center;gap:6px}
.axv-p b{font-family:var(--mono);font-size:clamp(26px,3.6vw,46px);font-weight:400;
  letter-spacing:-.02em;color:rgba(243,241,234,.5);line-height:1}
.axv-p em{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(243,241,234,.35)}
.axv-p.on b{color:#F3F1EA}
.axv-p.on em{color:#9DC49F}
.axv-a{display:block;width:clamp(22px,2.6vw,34px);height:clamp(22px,2.6vw,34px);
  color:rgba(243,241,234,.45);flex:none}
.axv-a svg{width:100%;height:100%;display:block}
.axv-m{display:flex;justify-content:center;gap:6px;margin-top:clamp(18px,2.4vw,30px)}
.axv-m i{width:clamp(7px,.9vw,11px);height:clamp(7px,.9vw,11px);
  background:rgba(243,241,234,.22)}
.axv-m i.on{background:#CF9536}
.axv-c{display:block;margin-top:12px;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(243,241,234,.42)}

/* the handover, as two marks and an arrow */
.axh{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,1.8vw,24px);color:#F3F1EA}
.axh-n{display:flex;flex-direction:column;align-items:center;gap:10px}
.axh-n b{width:clamp(52px,6.4vw,76px);height:clamp(52px,6.4vw,76px);display:grid;
  place-items:center;background:rgba(243,241,234,.1);
  border:1px solid rgba(243,241,234,.22);font-family:var(--mono);
  font-size:clamp(16px,1.9vw,23px);font-weight:400;color:#F3F1EA}
.axh-n b svg{width:46%;height:46%;display:block;color:#F3F1EA}
.axh-n em{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(243,241,234,.45);white-space:nowrap}
.axh-p b{background:#F3F1EA;border-color:#F3F1EA}
.axh-p b svg{color:#14130F}
.axh-p em{color:#9DC49F}
.axh-a{display:block;width:clamp(20px,2.4vw,30px);height:clamp(20px,2.4vw,30px);
  color:rgba(243,241,234,.4);flex:none;margin-bottom:24px}
.axh-a svg{width:100%;height:100%;display:block}

/* the packages an upgrade moves, which is what an upgrade looks like */
.axk{position:relative;z-index:1;display:flex;flex-direction:column;
  gap:clamp(9px,1.2vw,15px);width:100%}
.axk-r{display:flex;align-items:baseline;gap:10px;min-width:0;
  padding-bottom:clamp(8px,1vw,13px);border-bottom:1px solid rgba(243,241,234,.13)}
.axk-r:last-child{border-bottom:0;padding-bottom:0}
.axk-r b{font-family:var(--mono);font-size:clamp(10px,1vw,12.5px);font-weight:400;flex:1 1 auto;min-width:0;
  color:rgba(243,241,234,.72);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.axk-v{margin-left:auto;display:flex;align-items:center;gap:7px;flex:none;
  font-family:var(--mono);font-size:clamp(10px,1vw,12.5px)}
.axk-v i{font-style:normal;color:rgba(243,241,234,.36)}
.axk-v u{text-decoration:none;display:block;width:13px;height:13px;
  color:rgba(243,241,234,.3)}
.axk-v u svg{width:100%;height:100%;display:block}
.axk-v em{font-style:normal;color:#F3F1EA}
.axk-r.warn .axk-v em{color:#CF9536}

/* one recipe, a color per page, so no two pages look like each other */

/* a row of square cards, each with its own title */
/* minmax(0,...) on the item as well as the track: a card holds a mono package
   name that will not wrap, and on a 360px phone its min-content width pushed
   the single column 27px wider than the page. */
.ucard-c{min-width:0;display:flex;flex-direction:column}
/* the link sits on one row across all four, however many lines the sentence
   above it took */
.ucard-c>.arrow{margin-top:auto;align-self:flex-start}
/* the homepage picture, standing on its own: it is a flex child in .vcard,
   so here it needs a box of its own to be absolute inside */
/* flex:none, or the square shrinks under a three line paragraph while its
   neighbour under a two line one stays whole */
.ucard-c>.vi-pic{flex:none;display:block;position:relative;aspect-ratio:1;overflow:hidden;
  background:#171613}
/* a dot in a row, for a list of things with a state */
/* no labelled rule: the artwork takes the whole square */
.vi-pic.nohd .vi-art{top:clamp(16px,1.8vw,22px)}
/* two panels across, for a card about two surfaces of one store */
.vi-art .pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.vi-art .pair .pan{min-width:0}
.vi-art .pair .rw{padding:5px 9px}
.vi-art .pair .pan>b{padding:8px 9px 7px}
.vi-art .rw i.d{width:6px;height:6px;flex:none;background:#CF9536}
/* on a narrower card the wall drops a row and lifts clear of the pill */
.ucard-c .vi-art .xwall{top:50%}
.vi-art .rw i.d.on{background:#9DC49F}
.ucards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:clamp(16px,2.4vw,34px);margin-top:clamp(24px,3vw,44px)}
@media(max-width:900px){.ucards{grid-template-columns:minmax(0,1fr);gap:34px}}
.ucard-c>h3{margin-top:clamp(14px,1.8vw,22px);font-size:clamp(17px,1.7vw,21px);
  font-weight:500;letter-spacing:-.022em}
.ucard-c>p{margin-top:8px;font-size:14px;line-height:1.55;color:var(--ink60);max-width:38ch}
/* what the page behind the card covers, as three tags between the line and the link */
.uc-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 18px}
.uc-chips i{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;line-height:1.3;
  padding:4px 8px;border:1px solid var(--line2);color:var(--ink60);white-space:nowrap}

/* before and after, on one ground */
.dip{position:relative;display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,2.6vw,42px);padding:clamp(26px,3.6vw,54px) clamp(18px,2.4vw,34px)}
.dip-h{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0;flex:1}
.dip-p{display:block;width:100%}
.dip-c{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(243,241,234,.45)}
.dip-on+.dip-c{color:#9DC49F}
.dip-a{display:block;width:clamp(20px,2.4vw,32px);height:clamp(20px,2.4vw,32px);flex:none;
  color:rgba(243,241,234,.4);margin-bottom:26px}
.dip-a svg{width:100%;height:100%;display:block}
@media(max-width:700px){.dip{flex-direction:column}.dip-a{transform:rotate(90deg);margin:0}}

/* one wide band, one thing in it */
.wband{position:relative;overflow:hidden;background:#171613;
  padding:clamp(30px,4vw,64px) clamp(18px,3vw,54px);margin:clamp(30px,4vw,60px) 0}
.wband-in{position:relative;z-index:1;max-width:1080px;margin:0 auto}
.wband-cap{position:relative;z-index:1;max-width:1080px;margin:clamp(14px,1.8vw,22px) auto 0;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(243,241,234,.42)}

/* a log, where the evidence is a log */
.tcard{position:relative;z-index:1;display:block;background:rgba(12,11,9,.66);
  border:1px solid rgba(243,241,234,.16);backdrop-filter:blur(9px);
  padding:clamp(14px,1.8vw,20px);font-family:var(--mono);
  font-size:clamp(10.5px,1vw,12.5px);line-height:1.85}
.tc-l{display:block;color:rgba(243,241,234,.56);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.tc-l.hi{color:#F3F1EA}
.tc-c{display:block;margin-top:12px;padding-top:11px;
  border-top:1px solid rgba(243,241,234,.14);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(243,241,234,.4)}

/* numbers that are numbers */
.srow{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:clamp(16px,2.4vw,40px);margin-top:clamp(22px,2.8vw,38px)}
@media(max-width:700px){.srow{grid-auto-flow:row}}
.srow b{display:block;font-family:var(--disp);font-weight:400;
  font-size:clamp(30px,3.6vw,52px);letter-spacing:-.04em;line-height:1}
.srow span{display:block;margin-top:9px;font-size:13px;color:var(--ink60);max-width:26ch}
.sec.dark .srow span{color:rgba(243,241,234,.55)}

/* the scope chip has no room in a small card, and half a word is worse than none */
.ucards .axp-c{display:none}
.ucards .axp-b{gap:12px}
.ucard-c>p{margin-bottom:12px}
/* ---- the app panels, drawn small ----
   These mockups are drawn for a half width card. Four of them across a row
   leaves each one about 250px, and at that width the package names, the change
   rows and the composer were all cut off at the edge of the square. Everything
   inside comes down with the square rather than being clipped by it. */
@media(min-width:901px){
  .ucards .axs{padding:0 clamp(12px,1.4vw,18px);gap:clamp(10px,1.2vw,15px)}
  .ucards .axs-back{width:97%}
  .ucards .axs-front{width:93%}
  .ucards .axs-back .ax{font-size:11px}
  .ucards .axs-back .ax-lab{padding:9px 11px 5px;font-size:8.5px}
  .ucards .axs-back .ax-changes{padding:0 11px 11px;gap:8px}
  .ucards .ax-c{gap:7px}
  .ucards .ax-d{width:5px;height:5px}
  .ucards .ax-ct{gap:5px}
  .ucards .ax-ct b{font-size:10.5px}
  .ucards .ax-ct em{font-size:9.5px}
  .ucards .ax-b{padding:4px 7px;font-size:9px}
  .ucards .ax-msg{margin:9px 11px 0;padding:9px 11px;font-size:10.5px}
  .ucards .axs>.ax-tabs{margin:0 auto;padding:4px;font-size:12px}
  .ucards .axk{gap:8px}
  .ucards .axk-r{gap:7px;padding-bottom:8px}
  .ucards .axk-r b{font-size:9.5px}
  .ucards .axk-v{gap:5px;font-size:9.5px}
  .ucards .axk-v u{width:11px;height:11px}
  .ucards .axl{gap:6px}
  .ucards .axl-i{width:36px;height:36px}
  .ucards .axl-i.on{width:50px;height:50px}
  .ucards .axp{padding:11px 12px}
  .ucards .axp-t{font-size:12px;line-height:1.35}
  .ucards .axp-b{margin-top:11px;gap:9px}
  .ucards .axp-i,.ucards .axp-m{width:14px;height:14px}
  .ucards .axp-s{width:23px;height:23px}
}

/* The wall carries no rule above or below it, wherever the rules come from:
   the marks are the rule. */
.cred,.sec.cred{border-top:0!important;border-bottom:0!important}
.cred+.sec,.cred+#can,section.cred+section{border-top:0!important}

/* one line of marks instead of the wall */
.cred.credone .credgrid{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:0}


/* two columns, what it reaches and what it does not */
.ldg{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,44px);
  margin-top:clamp(22px,2.8vw,40px)}
@media(max-width:760px){.ldg{grid-template-columns:1fr}}
.ldg-c h3{font-size:clamp(16px,1.5vw,19px);font-weight:500;letter-spacing:-.02em;
  padding-bottom:11px;border-bottom:1px solid var(--line)}
.ldg-c ul{list-style:none;margin-top:14px}
.ldg-c li{position:relative;padding:8px 0 8px 26px;font-size:14px;line-height:1.5;
  color:var(--ink60)}
.ldg-c li::before{content:"";position:absolute;left:0;top:15px;width:11px;height:11px}
.ldg-yes li::before{background:#37633D}
.ldg-no li::before{background:none;border:1px solid var(--line2)}
.sec.dark .ldg-c h3{border-bottom-color:rgba(243,241,234,.18)}
.sec.dark .ldg-c li{color:rgba(243,241,234,.6)}
.sec.dark .ldg-no li::before{border-color:rgba(243,241,234,.3)}

/* numbered steps, each with its own visual */
.stps{display:flex;flex-direction:column;gap:clamp(34px,4.4vw,76px);
  margin-top:clamp(24px,3vw,44px)}
.stps-r{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(20px,3vw,54px);align-items:center}
.stps-r>*{min-width:0}
.stps-r>.stps-t{grid-column:1}
.stps-r>.stps-v{grid-column:2}
.stps-r:nth-child(even){grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}
.stps-r:nth-child(even)>.stps-t{grid-column:2}
.stps-r:nth-child(even)>.stps-v{grid-column:1}
@media(max-width:900px){.stps-r,.stps-r:nth-child(even){grid-template-columns:1fr}
  .stps-r>.stps-t,.stps-r>.stps-v,
  .stps-r:nth-child(even)>.stps-t,.stps-r:nth-child(even)>.stps-v{grid-column:1}}
.stps-n{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--ink40);padding-bottom:12px}
.stps-t h3{font-size:clamp(21px,2.3vw,29px);font-weight:500;letter-spacing:-.026em;
  line-height:1.16}
.stps-t p{margin-top:11px;font-size:15px;line-height:1.6;color:var(--ink60);max-width:42ch}

/* One palette for the whole site: forest, brass, a warm floor. Nothing else.
   Eighteen letters, eighteen positions of the light, one family. */
.axs-a .axs-wash,.wband-a .axs-wash{--lx:16%;--ly:8%}
.axs-b .axs-wash,.wband-b .axs-wash{--lx:80%;--ly:8%}
.axs-c .axs-wash,.wband-c .axs-wash{--lx:30%;--ly:8%}
.axs-d .axs-wash,.wband-d .axs-wash{--lx:88%;--ly:8%}
.axs-e .axs-wash,.wband-e .axs-wash{--lx:10%;--ly:10%}
.axs-f .axs-wash,.wband-f .axs-wash{--lx:50%;--ly:8%}
.axs-g .axs-wash,.wband-g .axs-wash{--lx:70%;--ly:12%}
.axs-h .axs-wash,.wband-h .axs-wash{--lx:22%;--ly:8%}
.axs-i .axs-wash,.wband-i .axs-wash{--lx:64%;--ly:8%}
.axs-j .axs-wash,.wband-j .axs-wash{--lx:36%;--ly:10%}
.axs-k .axs-wash,.wband-k .axs-wash{--lx:84%;--ly:14%}
.axs-l .axs-wash,.wband-l .axs-wash{--lx:14%;--ly:8%}
.axs-m .axs-wash,.wband-m .axs-wash{--lx:46%;--ly:8%}
.axs-n .axs-wash,.wband-n .axs-wash{--lx:76%;--ly:8%}
.axs-o .axs-wash,.wband-o .axs-wash{--lx:20%;--ly:12%}
.axs-p .axs-wash,.wband-p .axs-wash{--lx:58%;--ly:8%}
.axs-q .axs-wash,.wband-q .axs-wash{--lx:32%;--ly:8%}
.axs-r .axs-wash,.wband-r .axs-wash{--lx:68%;--ly:10%}

/* A step visual holds one small panel, so a fixed frame left it swimming in
   ground. The frame hugs the panel: atmosphere around it, not instead of it. */
.stps-v .axs{aspect-ratio:auto;padding:clamp(24px,3vw,44px) clamp(20px,2.6vw,36px)}
.stps-v .axs-back{align-self:stretch;width:100%}

/* a row of three cards that must read as one family: every panel on the
   same edges, the card's own inset, at every width. The offset the other
   card rows carry (a wider back panel, a narrower front) is not for these. */
.ucards-even .axs .axs-back,.ucards-even .axs .axs-front,
.ucards-even .axs.axs-stack .axs-back,.ucards-even .axs.axs-stack .axs-front{width:100%;align-self:stretch}
@media(min-width:901px){
  .ucards-even .axs .axs-back,.ucards-even .axs .axs-front,
  .ucards-even .axs.axs-stack .axs-back,.ucards-even .axs.axs-stack .axs-front{width:100%}
}

/* the industry card: many industries as chips on the glass, not four products */
.vi-art .ind{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:7px}
.vi-art .ind b{font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.03em;color:rgba(243,241,234,.86);
  border:1px solid rgba(243,241,234,.26);background:rgba(20,19,15,.42);padding:5px 9px;white-space:nowrap}

/* ---- the agencies page: a visual that says its section in a second ---- */
.axs-mid{position:relative;z-index:2;display:block;width:min(84%,460px);align-self:center}
@media(max-width:700px){.axs-mid{width:100%}}
.axs-back .axv{padding:18px 15px 22px}
/* a pull request, the way a developer sees one */
.prc{display:block;background:rgba(20,19,15,.64);border:1px solid rgba(243,241,234,.2);backdrop-filter:blur(9px);
  box-shadow:0 24px 54px rgba(8,7,5,.44);color:#F3F1EA;padding:16px 18px 14px;font-size:12px}
.prc-h{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;color:rgba(243,241,234,.6);min-width:0}
.prc-h b{font-weight:400;border:1px solid rgba(243,241,234,.22);background:rgba(243,241,234,.06);padding:3px 7px;
  color:rgba(243,241,234,.86);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.prc-h i{display:block;width:12px;height:12px;flex:none;color:rgba(243,241,234,.4)}
.prc-h i svg{width:100%;height:100%;display:block}
.prc-h em{font-style:normal;margin-left:auto;flex:none;color:rgba(243,241,234,.45)}
.prc-t{display:block;margin-top:12px;font-size:15px;font-weight:500;letter-spacing:-.015em;line-height:1.3}
.prc-m{display:block;margin-top:6px;font-size:11.5px;color:rgba(243,241,234,.55)}
.prc-m b{color:#F3F1EA;font-weight:500}
.prc-m u{text-decoration:none;font-family:var(--mono)}
.prc-m .add{color:#9DC49F}
.prc-m .del{color:#D69A7E}
.prc-f{display:flex;flex-direction:column;gap:7px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(243,241,234,.14)}
.prc-f>span{display:flex;align-items:baseline;gap:10px;font-family:var(--mono);font-size:10.5px;color:rgba(243,241,234,.66);min-width:0}
.prc-f>span>b{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.prc-f>span>em{font-style:normal;margin-left:auto;flex:none;color:#9DC49F}
.prc-s{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;
  border-top:1px solid rgba(243,241,234,.14);font-size:11.5px}
.prc-s .ok{display:flex;align-items:center;gap:6px;color:#9DC49F}
.prc-s .ok svg{width:13px;height:13px;display:block}
.prc-s .rev{display:flex;align-items:center;gap:8px;color:rgba(243,241,234,.82)}
.prc-s .rev i{font-style:normal;width:20px;height:20px;display:grid;place-items:center;background:#F3F1EA;color:#14130F;font-size:10.5px;font-weight:600}
/* the store switcher with its menu open */
.stsw{display:block;background:rgba(20,19,15,.64);border:1px solid rgba(243,241,234,.2);backdrop-filter:blur(9px);
  box-shadow:0 24px 54px rgba(8,7,5,.44);color:#F3F1EA;font-size:12px}
.stsw-h{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid rgba(243,241,234,.14)}
.stsw-h>b{font-weight:600;font-size:13.5px;letter-spacing:-.01em}
.stsw-sel{display:flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid rgba(243,241,234,.26);background:rgba(243,241,234,.06);font-size:12px}
.stsw-sel svg{width:11px;height:11px;display:block;opacity:.6}
.stsw-h>em{font-style:normal;margin-left:auto;width:22px;height:22px;display:grid;place-items:center;background:#F3F1EA;color:#14130F;font-size:10.5px;font-weight:600}
.stsw-menu{display:block;margin:10px 14px 0 52px;border:1px solid rgba(243,241,234,.22);background:rgba(20,19,15,.92);box-shadow:0 18px 40px rgba(8,7,5,.5)}
.stsw-menu>span{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid rgba(243,241,234,.1);font-size:12px;color:rgba(243,241,234,.8)}
.stsw-menu>span:last-child{border-bottom:0}
.stsw-menu>span em{font-style:normal;margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:rgba(243,241,234,.4)}
.stsw-menu>span i{display:block;width:13px;height:13px;flex:none;color:#9DC49F}
.stsw-menu>span i svg{width:100%;height:100%;display:block}
.stsw-menu>span.on{color:#F3F1EA;background:rgba(243,241,234,.06)}
.stsw-menu>span.add{color:#9DC49F}
.stsw-ask{display:flex;align-items:center;gap:10px;margin:14px;padding:10px 12px;border:1px solid rgba(243,241,234,.16);color:rgba(243,241,234,.45);font-size:12px}
.stsw-ask i{font-style:normal;margin-left:auto;width:22px;height:22px;display:grid;place-items:center;background:#F3F1EA;color:#14130F}
.stsw-ask i svg{width:12px;height:12px;display:block}
@media(max-width:700px){.stsw-menu{margin-left:14px}}

/* ---- who reviews and deploys: who asks, Ari builds, who puts it live ---- */
/* centered in the card; the two labels never wrap now, so the rows match across the three cards */
.hof{display:flex;align-items:flex-start;justify-content:center;gap:clamp(10px,1.6vw,22px);padding:0}
.hof-n{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 1 46%;min-width:0;text-align:center}
.hof-n b{font-size:12px;font-weight:500;color:#F3F1EA;letter-spacing:-.01em;line-height:1.25}
.hof-n em{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(243,241,234,.5);line-height:1.35}
.hof-p,.hof-mk{display:grid;place-items:center;width:clamp(46px,5.2vw,62px);height:clamp(46px,5.2vw,62px);flex:none;
  background:rgba(20,19,15,.62);border:1px solid rgba(243,241,234,.26);backdrop-filter:blur(9px);
  box-shadow:0 18px 40px rgba(8,7,5,.4);font-style:normal;color:#F3F1EA;font-size:15px;font-weight:600}
.hof-mk .hof-svg{width:52%;height:auto;display:block;color:#F3F1EA}
.hof-mk .hof-svg path:last-child{stroke:#9DC49F}
.hof-a{display:block;width:16px;height:16px;flex:none;color:rgba(243,241,234,.45);margin-top:calc(clamp(46px,5.2vw,62px) / 2 - 8px)}
.hof-a svg{width:100%;height:100%;display:block}

/* the cue that the hero is the first fold, not the whole page: desktop only */
.hero2-sc{display:none}
@media(min-width:941px){
  .hero2-sc{position:absolute;left:50%;bottom:clamp(16px,3vh,30px);transform:translateX(-50%);z-index:2;
    display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink40);text-decoration:none;
    font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
    transition:opacity .4s ease,color .2s ease}
  .hero2-sc svg{width:16px;height:16px;display:block;animation:hero2sc 2.2s ease-in-out infinite}
  .hero2-sc:hover{color:var(--ink)}
  .hero2-sc.off{opacity:0;pointer-events:none}
  @keyframes hero2sc{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
  @media(prefers-reduced-motion:reduce){.hero2-sc svg{animation:none}}
}

/* ==================== how it works: one change, step by step ==================== */
/* the strip under the hero: five moments on a clock */
.jrny{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);
  padding:clamp(34px,4vw,54px) clamp(18px,2.4vw,34px) clamp(22px,2.6vw,34px);overflow:hidden;background:#171613;
  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)}
.jrny-wash{position:absolute;inset:0;z-index:0}
.jrny-line{position:absolute;z-index:1;left:clamp(18px,2.4vw,34px);right:clamp(18px,2.4vw,34px);top:calc(clamp(34px,4vw,54px) + 5px);
  height:1px;background:rgba(243,241,234,.22)}
.jrny-s{position:relative;z-index:2;display:flex;flex-direction:column;gap:6px;min-width:0;padding-top:20px;color:#F3F1EA}
.jrny-s i{position:absolute;top:0;left:0;width:11px;height:11px;background:#171613;border:1px solid rgba(243,241,234,.6)}
.jrny-s.on i{background:#9DC49F;border-color:#9DC49F}
.jrny-s b{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:#9DC49F;font-weight:400}
.jrny-s strong{font-size:14px;font-weight:500;letter-spacing:-.012em;line-height:1.25}
.jrny-s em{font-style:normal;font-size:12px;line-height:1.45;color:rgba(243,241,234,.6)}
@media(max-width:820px){
  .jrny{grid-template-columns:1fr;gap:18px;padding:22px 18px 24px}
  .jrny-line{left:23px;right:auto;top:22px;bottom:24px;width:1px;height:auto}
  .jrny-s{padding:0 0 0 24px}
  .jrny-s i{top:3px}
}
/* every step visual sits in one glass, centered on its ground */
.hiw-glass{display:block;background:rgba(20,19,15,.64);border:1px solid rgba(243,241,234,.2);backdrop-filter:blur(9px);
  box-shadow:0 24px 54px rgba(8,7,5,.44);color:#F3F1EA;font-size:12px}
/* the store as numbers */
.smap{display:block;background:rgba(20,19,15,.64);border:1px solid rgba(243,241,234,.2);backdrop-filter:blur(9px);
  box-shadow:0 24px 54px rgba(8,7,5,.44);color:#F3F1EA;padding:14px 16px 12px}
.smap-h{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,241,234,.5);margin-bottom:12px}
.smap-g{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(243,241,234,.12);border:1px solid rgba(243,241,234,.12)}
.smap-g>span{display:flex;flex-direction:column;gap:4px;padding:12px 12px 11px;background:rgba(20,19,15,.55);min-width:0}
.smap-g b{font-family:var(--disp);font-size:clamp(17px,1.8vw,24px);font-weight:500;letter-spacing:-.03em;line-height:1;overflow-wrap:anywhere}
.smap-g em{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(243,241,234,.5)}
.smap-f{display:block;margin-top:12px;font-family:var(--mono);font-size:10.5px;color:#9DC49F}
/* the live store and the private copy */
.cv{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.4vw,18px)}
.cv-b{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1 1 0;min-width:0;text-align:center;
  padding:18px 12px 16px;background:rgba(20,19,15,.64);border:1px solid rgba(243,241,234,.2);backdrop-filter:blur(9px);
  box-shadow:0 24px 54px rgba(8,7,5,.44);color:#F3F1EA}
.cv-b.on{border-color:rgba(157,196,159,.55)}
.cv-i{display:grid;place-items:center;width:44px;height:44px;margin-bottom:6px;border:1px solid rgba(243,241,234,.26);color:rgba(243,241,234,.7)}
.cv-i svg{width:20px;height:20px;display:block}
.cv-i.cv-ari{color:#F3F1EA}
.cv-i.cv-ari .cv-mk{width:22px;height:auto}
.cv-i.cv-ari .cv-mk path:last-child{stroke:#9DC49F}
.cv-b b{font-size:13px;font-weight:500;letter-spacing:-.012em}
.cv-b em{font-style:normal;font-size:11px;color:rgba(243,241,234,.55)}
.cv-b u{text-decoration:none;margin-top:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,241,234,.5)}
.cv-b.on u{color:#9DC49F}
.cv-a{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;color:rgba(243,241,234,.45);font-style:normal}
.cv-a svg{width:18px;height:18px;display:block}
.cv-a small{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
/* before and after, the product options: both panels take half the glass */
.axs .dip{display:flex;width:100%;align-items:flex-start;padding:0;gap:clamp(12px,1.6vw,20px)}
.axs-mid.axs-wide{width:min(94%,520px)}
@media(max-width:700px){
  .axs .dip{flex-direction:column;align-items:stretch;gap:10px}
  .axs .dip-h{width:100%}
  .axs .dip-a{align-self:center;margin:0;transform:rotate(90deg)}
}
.axs .dip-h{flex:1 1 0;min-width:0;width:auto}
.axs .dip-p,.axs .baft{display:block;width:100%}
.axs .dip-a{margin-top:56px}
.baft{display:block;background:rgba(20,19,15,.64);border:1px solid rgba(243,241,234,.2);backdrop-filter:blur(9px);
  box-shadow:0 24px 54px rgba(8,7,5,.44);color:#F3F1EA;padding:6px 14px 14px;text-align:left}
.baft-r{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid rgba(243,241,234,.12);font-size:12.5px}
.baft-r.new{color:#F3F1EA}
.baft-r i{font-style:normal;margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:#14130F;background:#9DC49F;padding:2px 6px}
.baft-btn{display:block;margin-top:12px;padding:9px 0;text-align:center;background:#F3F1EA;color:#14130F;font-size:12px;font-weight:500}
.dip-c{color:rgba(243,241,234,.5)}
/* the diff */
.diffv{display:block;background:rgba(20,19,15,.7);border:1px solid rgba(243,241,234,.2);backdrop-filter:blur(9px);
  box-shadow:0 24px 54px rgba(8,7,5,.44);color:rgba(243,241,234,.78);font-family:var(--mono);font-size:10.5px;overflow:hidden}
.diffv-h{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(243,241,234,.14);
  color:rgba(243,241,234,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.diffv-h em{font-style:normal;margin-left:auto;flex:none;color:#9DC49F}
.diffv-l{display:flex;gap:10px;padding:3px 14px;white-space:pre;overflow:hidden;text-overflow:ellipsis;line-height:1.5}
.diffv-l:first-of-type{padding-top:10px}
.diffv-l:last-child{padding-bottom:10px}
.diffv-l i{font-style:normal;flex:none;width:8px;color:rgba(243,241,234,.35)}
.diffv-l b{font-weight:400;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:pre}
.diffv-l.add{background:rgba(157,196,159,.13);color:#CFE3CF}
.diffv-l.add i{color:#9DC49F}
.diffv-l.del{background:rgba(214,154,126,.12);color:#E2B8A3;text-decoration:line-through;text-decoration-color:rgba(226,184,163,.5)}
.diffv-l.del i{color:#D69A7E}
/* approve or discard */
.aprv{display:block;background:rgba(20,19,15,.64);border:1px solid rgba(243,241,234,.2);backdrop-filter:blur(9px);
  box-shadow:0 24px 54px rgba(8,7,5,.44);color:#F3F1EA;padding:14px 16px 16px}
.aprv-h{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,241,234,.5);margin-bottom:6px}
.aprv-r{display:flex;align-items:flex-start;gap:9px;padding:8px 0;border-bottom:1px solid rgba(243,241,234,.12);font-size:12.5px;line-height:1.4}
.aprv-r i{display:block;width:13px;height:13px;flex:none;margin-top:3px;color:#9DC49F}
.aprv-r i svg{width:100%;height:100%;display:block}
.aprv-b{display:flex;gap:8px;margin-top:14px}
.aprv-b b{flex:1;padding:10px 0;text-align:center;font-size:12.5px;font-weight:500}
.aprv-b .ok{background:#F3F1EA;color:#14130F}
.aprv-b .no{border:1px solid rgba(243,241,234,.3);color:rgba(243,241,234,.8)}
/* what you can ask for */
.topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin-top:clamp(22px,2.6vw,34px)}
@media(max-width:820px){.topics{grid-template-columns:1fr}}
.topic{display:flex;flex-direction:column;background:rgba(243,241,234,.04);border:1px solid rgba(243,241,234,.16);padding:clamp(18px,2vw,24px)}
.topic-h{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,241,234,.5);margin-bottom:8px}
.topic q{quotes:none;display:block;padding:10px 0 10px 16px;position:relative;border-bottom:1px solid rgba(243,241,234,.1);
  font-size:13.5px;line-height:1.45;color:rgba(243,241,234,.86)}
.topic q::before{content:">";position:absolute;left:0;top:10px;font-family:var(--mono);color:#9DC49F}
.topic q:last-of-type{border-bottom:0}
.topic .arrow{margin-top:auto;padding-top:16px;align-self:flex-start}
.sec.dark .topic .arrow{color:#F3F1EA;background:rgba(243,241,234,.08);border-color:rgba(243,241,234,.2)}

/* ---- how it works: the six steps as one switcher, list left, stage right ---- */
.hiw{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);
  margin-top:clamp(22px,2.6vw,34px);align-items:start;--dwell:7s}
.hiw-l{display:flex;flex-direction:column;border-top:1px solid var(--line2)}
.hiw-i{position:relative;padding:15px 0 14px;border-bottom:1px solid var(--line);cursor:pointer;outline:none}
.hiw-i::before{content:"";position:absolute;top:-1px;left:0;width:0;height:2px;background:var(--ink)}
.hiw-i[aria-selected="true"]::before{width:100%;transition:width var(--dwell) linear}
.hiw-i:focus-visible b{text-decoration:underline;text-underline-offset:4px}
.hiw-i b{display:block;font-size:clamp(15px,1.3vw,18px);font-weight:500;letter-spacing:-.018em;color:var(--ink40);transition:color .3s;line-height:1.3}
.hiw-i:hover b,.hiw-i[aria-selected="true"] b{color:var(--ink)}
.hiw-i span{display:none;margin-top:8px}
.hiw-i[aria-selected="true"] span{display:block}
.hiw-i p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink60);max-width:46ch}
.hiw-i .arrow{margin-top:12px}
/* square, and the panes stack in one grid cell so the stage grows past square only when a step needs the room */
.hiw-stage{position:relative;overflow:visible;background:#171613;aspect-ratio:1;display:grid;grid-template-columns:minmax(0,1fr);
  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)}
.hiw-wash{position:absolute;inset:0;z-index:0}
.hiw-p{grid-area:1/1;position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;justify-items:center;padding:clamp(18px,3vw,44px);
  opacity:0;transform:translateY(6px);transition:opacity .38s ease,transform .38s ease;pointer-events:none}
.hiw-p[data-on="true"]{opacity:1;transform:none;pointer-events:auto}
.hiw-v{width:100%;max-width:520px;min-width:0}
.hiw-v .cv{width:100%}
.hiw-chat{display:flex;flex-direction:column;gap:12px}
.hiw-chat .axs-front,.hiw-chat .axs-back{width:100%;align-self:stretch}
@media(max-width:900px){
  .hiw{grid-template-columns:1fr;gap:18px}
  .hiw-p{padding:18px 14px}
  /* the before and after stay side by side in the square, smaller */
  .hiw-p .dip{flex-direction:row;align-items:flex-start;gap:10px}
  .hiw-p .dip-a{transform:none;align-self:auto;margin:36px 0 0}
  .hiw-p .baft{padding:2px 10px 10px}
  .hiw-p .baft-r{padding:8px 0;font-size:11.5px}
  .hiw-p .baft-r i{font-size:8px;padding:2px 5px}
  .hiw-p .baft-btn{padding:7px 0;font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){.hiw-i[aria-selected="true"]::before{transition:none;width:0}}

/* every closing panel carries the light the homepage hero carries */
.panel{position:relative;overflow:hidden}
.panel>*:not(.panel-bg){position:relative;z-index:1}
.panel-bg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0;
  filter:blur(8px);transform:scale(1.12)}

/* ==================== security: the boundary and the reads and writes ==================== */
.bnd{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:clamp(10px,1.6vw,22px);align-items:start;
  padding:clamp(24px,3vw,40px) clamp(18px,2.4vw,34px);overflow:hidden;background:#171613;
  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)}
.bnd-wash{position:absolute;inset:0;z-index:0}
.bnd-c{position:relative;z-index:1;display:flex;flex-direction:column;background:rgba(20,19,15,.64);border:1px solid rgba(243,241,234,.2);
  backdrop-filter:blur(9px);box-shadow:0 24px 54px rgba(8,7,5,.44);color:#F3F1EA;padding:16px 18px 8px;min-width:0}
.bnd-ours{border-color:rgba(157,196,159,.55)}
.bnd-h{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(243,241,234,.55);padding-bottom:12px;border-bottom:1px solid rgba(243,241,234,.14)}
.bnd-h i{display:grid;place-items:center;width:22px;height:22px;flex:none;border:1px solid rgba(243,241,234,.26);color:rgba(243,241,234,.8)}
.bnd-h i svg{width:12px;height:12px;display:block}
.bnd-ours .bnd-h{color:#9DC49F}
.bnd-ours .bnd-h i{border-color:rgba(157,196,159,.55)}
.bnd-ours .bnd-h .bnd-mk{width:13px;height:auto;color:#F3F1EA}
.bnd-ours .bnd-h .bnd-mk path:last-child{stroke:#9DC49F}
.bnd-r{display:flex;align-items:flex-start;gap:9px;padding:9px 0;border-bottom:1px solid rgba(243,241,234,.1);font-size:12.5px;line-height:1.4;color:rgba(243,241,234,.86)}
.bnd-r:last-child{border-bottom:0}
.bnd-r i{flex:none;width:7px;height:7px;margin-top:6px;background:rgba(243,241,234,.35)}
.bnd-ours .bnd-r i{background:#9DC49F}
.bnd-mid .bnd-r i{background:#CF9536}
.bnd-a{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;align-self:center;color:rgba(243,241,234,.45);font-style:normal}
.bnd-a svg{width:18px;height:18px;display:block}
.bnd-a small{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
@media(max-width:860px){
  .bnd{grid-template-columns:1fr;gap:12px;padding:18px 14px}
  .bnd-a{flex-direction:row;justify-content:center;padding:2px 0}
  .bnd-a svg{transform:rotate(90deg)}
}
/* reads and writes */
.rwx{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px);margin-top:clamp(22px,2.6vw,34px)}
@media(max-width:700px){.rwx{grid-template-columns:1fr}}
.rwx-p{display:block;background:rgba(243,241,234,.04);border:1px solid rgba(243,241,234,.16);padding:clamp(18px,2vw,24px) clamp(18px,2vw,24px) clamp(12px,1.4vw,16px);color:#F3F1EA}
.rwx-p.on{border-color:rgba(157,196,159,.55)}
.rwx-h{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,241,234,.5);padding-bottom:12px;border-bottom:1px solid rgba(243,241,234,.14)}
.rwx-p.on .rwx-h{color:#9DC49F}
.rwx-r{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-bottom:1px solid rgba(243,241,234,.1);font-size:14px;line-height:1.45;color:rgba(243,241,234,.86)}
.rwx-r:last-child{border-bottom:0}
.rwx-r i{flex:none;width:7px;height:7px;margin-top:7px;background:rgba(243,241,234,.35)}
.rwx-p.on .rwx-r i{background:#9DC49F}
.sec.dark .certs{margin-top:clamp(22px,2.6vw,34px)}

/* ==================== works with your team ==================== */
/* one chat, three people, on the dark ground under the hero */
.tmt{position:relative;overflow:hidden;background:#171613;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);padding:clamp(22px,3vw,40px) clamp(18px,3vw,44px);color:#F3F1EA}
.tmt-wash{position:absolute;inset:0;z-index:0}
.tmt>*:not(.tmt-wash){position:relative;z-index:1}
.tmt-h{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid rgba(243,241,234,.16);max-width:820px;margin:0 auto}
.tmt-h b{font-weight:600;font-size:13.5px}
.tmt-h span{padding:5px 10px;border:1px solid rgba(243,241,234,.26);background:rgba(20,19,15,.5);font-size:12px}
.tmt-h em{font-style:normal;margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,241,234,.5)}
.tmt-r{display:grid;grid-template-columns:30px 140px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;
  border-bottom:1px solid rgba(243,241,234,.1);max-width:820px;margin:0 auto}
.tmt-r i{font-style:normal;width:30px;height:30px;display:grid;place-items:center;background:#F3F1EA;color:#14130F;font-size:12px;font-weight:600}
.tmt-w{display:flex;flex-direction:column;gap:2px;min-width:0}
.tmt-w b{font-size:13px;font-weight:500}
.tmt-w em{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,241,234,.5)}
.tmt-r q{quotes:none;display:block;background:rgba(20,19,15,.62);border:1px solid rgba(243,241,234,.2);backdrop-filter:blur(9px);padding:11px 14px;font-size:13px;line-height:1.4;min-width:0}
.tmt-r u{text-decoration:none;font-family:var(--mono);font-size:10px;color:#9DC49F;border:1px solid rgba(157,196,159,.4);padding:4px 8px;white-space:nowrap}
.tmt-r:last-of-type{border-bottom:0}
@media(max-width:760px){
  .tmt{padding:18px 14px}
  .tmt-r{grid-template-columns:30px minmax(0,1fr);gap:10px 12px}
  .tmt-r q{grid-column:1/-1}
  .tmt-r u{grid-column:1/-1;justify-self:start}
}
/* who asks, for what */
.roles{margin-top:clamp(22px,2.6vw,34px);border-top:1px solid var(--ink)}
.roles-h,.roles-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1.6fr);gap:clamp(14px,2vw,32px);align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.roles-h span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink40)}
.roles-r b{font-size:15px;font-weight:500;letter-spacing:-.012em}
.roles-r span{font-size:14px;line-height:1.5;color:var(--ink60)}
.roles-r q{quotes:none;font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--ink80)}
.roles-r q::before{content:"> ";color:var(--green)}
@media(max-width:760px){
  .roles-h{display:none}
  .roles-r{grid-template-columns:1fr;gap:6px}
}
/* who approves, who releases: one matrix */
.arr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin-top:clamp(22px,2.6vw,34px)}
@media(max-width:820px){.arr{grid-template-columns:1fr}}
.arr-c{display:flex;flex-direction:column;background:rgba(243,241,234,.04);border:1px solid rgba(243,241,234,.16);padding:clamp(18px,2vw,24px) clamp(18px,2vw,24px) clamp(10px,1.2vw,14px);color:#F3F1EA}
.arr-c.on{border-color:rgba(157,196,159,.55)}
.arr-h{display:block;font-size:15px;font-weight:500;letter-spacing:-.012em;padding-bottom:12px;border-bottom:1px solid rgba(243,241,234,.14)}
.arr-c.on .arr-h{color:#9DC49F}
.arr-r{display:grid;grid-template-columns:78px minmax(0,1fr);gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid rgba(243,241,234,.1)}
.arr-r:last-child{border-bottom:0}
.arr-r em{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,241,234,.5)}
.arr-r b{font-size:13.5px;font-weight:500;line-height:1.4}
/* the technical outline */
.outl{display:block;background:rgba(20,19,15,.64);border:1px solid rgba(243,241,234,.2);backdrop-filter:blur(9px);
  box-shadow:0 24px 54px rgba(8,7,5,.44);color:#F3F1EA;padding:16px 18px 14px}
.outl-h{display:flex;flex-direction:column;gap:3px;padding-bottom:12px;border-bottom:1px solid rgba(243,241,234,.14);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,241,234,.5)}
.outl-h em{font-style:normal;font-family:var(--sans);font-size:14px;letter-spacing:-.01em;text-transform:none;color:#F3F1EA;font-weight:500}
.outl-r{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid rgba(243,241,234,.1);font-size:12.5px;line-height:1.45;color:rgba(243,241,234,.86)}
.outl-r i{font-style:normal;flex:none;font-family:var(--mono);font-size:10px;color:#9DC49F;margin-top:2px}
.outl-f{display:block;padding-top:12px;font-family:var(--mono);font-size:10.5px;color:#9DC49F}

/* ==================== the four use-case categories ==================== */
.cath{position:relative;overflow:hidden;background:#171613;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:grid;place-items:center;
  padding:clamp(28px,4vw,56px) clamp(18px,3vw,44px);min-height:clamp(260px,26vw,360px)}
.cath-wash{position:absolute;inset:0;z-index:0}
.cath-v{position:relative;z-index:1;width:min(100%,560px)}
/* the glass every category visual sits in */
.tcv,.wk,.mrw{display:block;background:rgba(20,19,15,.64);border:1px solid rgba(243,241,234,.2);backdrop-filter:blur(9px);
  box-shadow:0 24px 54px rgba(8,7,5,.44);color:#F3F1EA}
/* technical: the version move and three numbers */
.tcv{padding:clamp(18px,2.4vw,30px) clamp(18px,2.4vw,30px) clamp(14px,1.8vw,22px)}
.tcv-m{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,34px)}
.tcv-m>span{display:flex;flex-direction:column;align-items:center;gap:6px}
.tcv-m b{font-family:var(--mono);font-size:clamp(28px,3.6vw,46px);font-weight:400;letter-spacing:-.03em;line-height:1;color:rgba(243,241,234,.55)}
.tcv-m>span.on b{color:#F3F1EA}
.tcv-m em{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,241,234,.45)}
.tcv-m>span.on em{color:#9DC49F}
.tcv-m i{display:block;width:clamp(20px,2.4vw,30px);height:clamp(20px,2.4vw,30px);color:rgba(243,241,234,.4);margin-bottom:18px}
.tcv-m i svg{width:100%;height:100%;display:block}
.tcv-s{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:clamp(16px,2vw,24px);background:rgba(243,241,234,.12);border:1px solid rgba(243,241,234,.12)}
.tcv-s>span{display:flex;flex-direction:column;gap:4px;padding:12px 12px 11px;background:rgba(20,19,15,.55);min-width:0}
.tcv-s b{font-family:var(--disp);font-size:clamp(18px,1.8vw,24px);font-weight:500;letter-spacing:-.03em;line-height:1}
.tcv-s em{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(243,241,234,.5)}
/* maintenance: a week of small jobs */
.wk{padding:14px 18px 8px}
.wk-h,.mrw-h{display:flex;align-items:baseline;gap:10px;padding-bottom:10px;border-bottom:1px solid rgba(243,241,234,.14);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,241,234,.5)}
.wk-h em,.mrw-h em{font-style:normal;margin-left:auto;color:#9DC49F}
.wk-r{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid rgba(243,241,234,.1);font-size:12.5px;line-height:1.4;color:rgba(243,241,234,.86)}
.wk-r:last-child{border-bottom:0}
.wk-r i{display:block;width:13px;height:13px;flex:none;margin-top:2px;color:#9DC49F}
.wk-r i svg{width:100%;height:100%;display:block}
.wk-r em{font-style:normal;margin-left:auto;flex:none;font-family:var(--mono);font-size:10.5px;color:rgba(243,241,234,.5)}
/* storefront: a design in, a page out */
.dsn{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.4vw,18px)}
.dsn-b{display:flex;flex-direction:column;gap:5px;flex:1 1 0;min-width:0;padding:18px 16px 16px;background:rgba(20,19,15,.64);
  border:1px solid rgba(243,241,234,.2);backdrop-filter:blur(9px);box-shadow:0 24px 54px rgba(8,7,5,.44);color:#F3F1EA}
.dsn-b.on{border-color:rgba(157,196,159,.55)}
.dsn-b em{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,241,234,.5)}
.dsn-b.on em{color:#9DC49F}
.dsn-b b{font-size:14px;font-weight:500;letter-spacing:-.012em;margin-top:4px}
.dsn-b u{text-decoration:none;font-size:11.5px;color:rgba(243,241,234,.55)}
.dsn-a{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;color:rgba(243,241,234,.45);font-style:normal}
.dsn-a svg{width:18px;height:18px;display:block}
.dsn-a small{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
/* merchandising: rows with their scope */
.mrw{padding:14px 18px 8px}
.mrw-r{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid rgba(243,241,234,.1);font-size:12.5px;line-height:1.4;color:rgba(243,241,234,.86)}
.mrw-r:last-child{border-bottom:0}
.mrw-r i{flex:none;width:7px;height:7px;margin-top:6px;background:#9DC49F}
.mrw-r em{font-style:normal;margin-left:auto;flex:none;font-family:var(--mono);font-size:10.5px;color:rgba(243,241,234,.5)}
/* what this covers */
.cov{margin-top:clamp(22px,2.6vw,34px);border-top:1px solid var(--ink)}
.cov-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:clamp(14px,2vw,32px);padding:18px 0;border-bottom:1px solid var(--line)}
.cov-r b{font-size:16px;font-weight:500;letter-spacing:-.014em;line-height:1.3}
.cov-r ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px clamp(14px,2vw,28px)}
.cov-r li{font-size:14px;line-height:1.5;color:var(--ink60);padding-left:14px;position:relative}
.cov-r li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--green)}
@media(max-width:760px){.cov-r{grid-template-columns:1fr;gap:8px}.cov-r ul{grid-template-columns:1fr}}
/* the hub: four cards, one row on desktop */
/* the hub: two by two, so each visual has the room it has on its own page */
.ucards-four{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,36px)}
@media(max-width:600px){.ucards-four{grid-template-columns:1fr}}
.ucards-four .axs-mid{width:min(84%,460px);align-self:center;margin:0 auto}
.ucards-four .axs-mid.axs-wide{width:min(94%,520px)}

/* ---- category pages: the square stage, logo tiles, what comes back, storefronts, the admin ---- */
.cath-sq{aspect-ratio:1;min-height:0;padding:clamp(18px,3vw,44px)}
.cath-sq .cath-v{width:min(100%,480px)}
.lg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.1vw,14px);width:100%}
.lg-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lg-t{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;aspect-ratio:1;min-width:0;
  padding:8px;background:rgba(20,19,15,.64);border:1px solid rgba(243,241,234,.2);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
.lg-t img{display:block;width:38%;height:38%;object-fit:contain}
.lg-t img.w{width:66%;height:66%;margin:-14% 0}
.lg-t em{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(243,241,234,.55);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
/* extension marks come with their own colors, so each sits on a cream plate */
.cath-ext .lg-t img{width:44%;height:44%;background:#F3F1EA;padding:6px}
.cath-ext .lg-t{gap:10px}
.dlv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink);margin-top:clamp(22px,2.6vw,34px)}
.dlv>div{padding:22px 22px 24px 0;border-right:1px solid var(--line);min-width:0}
.dlv>div+div{padding-left:clamp(16px,2vw,26px)}
.dlv>div:last-child{border-right:0;padding-right:0}
.dlv b{display:block;font-size:clamp(17px,1.5vw,20px);font-weight:500;letter-spacing:-.02em;line-height:1.25}
.dlv p{margin-top:8px;font-size:14px;line-height:1.5;color:var(--ink60)}
.sec.dark .dlv{border-top-color:rgba(243,241,234,.5)}
.sec.dark .dlv>div{border-right-color:rgba(243,241,234,.16)}
.sec.dark .dlv p{color:rgba(243,241,234,.6)}
@media(max-width:820px){.dlv{grid-template-columns:1fr 1fr}.dlv>div{border-right:0;padding:16px 0;border-bottom:1px solid var(--line)}
  .dlv>div+div{padding-left:0}.dlv>div:nth-child(odd){padding-right:clamp(14px,3vw,24px)}.dlv>div:nth-child(even){padding-left:clamp(14px,3vw,24px);border-left:1px solid var(--line)}}
@media(max-width:480px){.dlv{grid-template-columns:1fr}.dlv>div:nth-child(odd){padding-right:0}.dlv>div:nth-child(even){padding-left:0;border-left:0}.dlv>div:last-child{border-bottom:0}}
.sfr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-top:clamp(22px,2.6vw,34px)}
.sfr-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sfr figure{margin:0;min-width:0}
.sfr-i{display:block;aspect-ratio:16/10;overflow:hidden;background:#171613;border:1px solid rgba(20,19,15,.12);
  box-shadow:0 1px 1px rgba(20,19,15,.05),0 30px 60px -40px rgba(20,19,15,.6)}
.sec.dark .sfr-i{border-color:rgba(243,241,234,.18)}
.sfr-i img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.sfr figcaption{margin-top:10px;font-size:13.5px;color:var(--ink60)}
.sec.dark .sfr figcaption{color:rgba(243,241,234,.6)}
@media(max-width:760px){.sfr,.sfr-4{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.sfr,.sfr-4{grid-template-columns:1fr}}
.adm{display:block;background:rgba(20,19,15,.64);border:1px solid rgba(243,241,234,.2);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);padding:14px 18px 8px}
.adm-h{display:flex;align-items:baseline;gap:10px;padding-bottom:10px;border-bottom:1px solid rgba(243,241,234,.14);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,241,234,.5)}
.adm-h em{font-style:normal;margin-left:auto;color:#9DC49F;letter-spacing:.06em;text-transform:none}
.adm-r{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;
  border-bottom:1px solid rgba(243,241,234,.1);font-size:12.5px;line-height:1.4;color:rgba(243,241,234,.86)}
.adm-r:last-child{border-bottom:0}
.adm-r b{font-weight:500;color:#F3F1EA;min-width:0}
.adm-r u{text-decoration:none;font-size:11.5px;color:rgba(243,241,234,.5);min-width:0}
.adm-r em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:#9DC49F;text-align:right;white-space:nowrap}
@media(max-width:480px){.adm-r{grid-template-columns:minmax(0,1fr) auto;row-gap:2px}.adm-r u{grid-column:1/-1}}
@media(max-width:600px){.lg{gap:7px}.lg-t{gap:7px;padding:6px}.lg-t em{font-size:8px;letter-spacing:.05em}
  .lg-t img{width:42%;height:42%}.lg-t img.w{width:70%;height:70%;margin:-14% 0}}

/* ---- the preview store: a real storefront, and the change drawn on it ---- */
.pv{position:relative;width:100%;background:#141310;border:1px solid rgba(243,241,234,.18);
  box-shadow:0 1px 1px rgba(20,19,15,.06),0 40px 90px -50px rgba(20,19,15,.8)}
.pv-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#1E1C18;border-bottom:1px solid rgba(243,241,234,.12)}
.pv-bar i{width:8px;height:8px;border-radius:50%;background:rgba(243,241,234,.2);flex:none}
.pv-url{margin-left:10px;font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:rgba(243,241,234,.55);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pv-url b{color:#9DC49F;font-weight:500;margin-right:10px}
.pv-win{position:relative;aspect-ratio:16/10;overflow:hidden;background:#fff;container-type:inline-size;color:#141310}
.pv-win img{display:block;width:100%;height:100%;object-fit:cover}
/* the zoom layer: the whole capture, positioned so the chosen region fills the frame;
   it is the container the overlays size against, so they scale with the page */
.pv-zl{position:absolute;left:0;top:0;width:100%;height:100%;display:block;container-type:inline-size}
.pv-zl>img{position:absolute;inset:0}
.pv-o{position:absolute;z-index:2;opacity:0;transition:opacity .38s ease,transform .5s cubic-bezier(.33,1,.68,1);transition-delay:var(--d,0ms);
  font-family:var(--sans);line-height:1.3}
.pv.on .pv-o{opacity:1;transform:none}
.pv-promo{left:0;right:0;top:0;height:5.4%;display:flex;align-items:center;justify-content:center;gap:1.2cqw;
  background:#141310;color:#F3F1EA;font-size:1.35cqw;letter-spacing:.01em;transform:translateY(-100%)}
.pv-promo em{font-style:normal;font-family:var(--mono);font-size:.8em;opacity:.7;letter-spacing:.1em;text-transform:uppercase}
.pv-badge{transform:scale(.6);transform-origin:0 0;background:#141310;color:#F3F1EA;font-family:var(--mono);
  font-size:1.2cqw;letter-spacing:.12em;text-transform:uppercase;padding:.55em .8em}
.pv-chip{transform:translateY(.6cqw);display:flex;align-items:center;gap:.9cqw;background:#fff;color:#141310;
  border:1px solid rgba(20,19,15,.16);box-shadow:0 1.2cqw 3cqw -1cqw rgba(0,0,0,.4);padding:.75cqw 1.1cqw;font-size:1.55cqw;white-space:nowrap}
.pv-chip i,.pv-line i,.pv-block i{font-style:normal;background:#2D572F;color:#F3F1EA;font-family:var(--mono);font-size:.72em;letter-spacing:.12em;
  text-transform:uppercase;padding:.25em .55em;flex:none}
.pv-tick{width:2.3cqw;height:2.3cqw;border-radius:50%;background:#2D572F;color:#F3F1EA;display:grid;place-items:center;
  transform:scale(.4);box-shadow:0 0 0 .35cqw rgba(255,255,255,.85)}
.pv-tick svg{width:62%;height:62%;display:block}
.pv-line{transform:translateY(.5cqw);display:flex;align-items:center;gap:1cqw;background:#fff;color:#141310;
  border-top:1px solid rgba(20,19,15,.12);border-bottom:1px solid rgba(20,19,15,.12);padding:.75cqw 0;font-size:1.45cqw;white-space:nowrap;overflow:hidden}
.pv-line b{font-weight:600}
.pv-swap{display:flex;align-items:center;justify-content:center;gap:.7cqw;background:#fff;color:#141310;font-size:1.7cqw;font-weight:600;transform:scale(.85)}
.pv-swap s{font-weight:400;color:rgba(20,19,15,.45);font-size:.8em}
.pv-block{display:flex;flex-direction:column;justify-content:flex-end;gap:.9cqw;padding:2.4cqw;background:#1D2A1E;color:#F3F1EA;
  transform:translateY(1.2cqw);background-image:radial-gradient(120% 80% at 80% 0%,#3C5A3E 0%,transparent 60%),linear-gradient(180deg,#1D2A1E,#141A14)}
.pv-block em{font-style:normal;font-family:var(--mono);font-size:1cqw;letter-spacing:.14em;text-transform:uppercase;color:#9DC49F}
.pv-block b{font-family:var(--disp);font-size:3.2cqw;font-weight:500;letter-spacing:-.03em;line-height:1.05;max-width:12ch}
.pv-block u{text-decoration:none;align-self:flex-start;margin-top:.6cqw;background:#F3F1EA;color:#141310;font-size:1.25cqw;font-weight:500;padding:.8cqw 1.6cqw}
.pv-block i{position:absolute;top:1.6cqw;right:1.6cqw}
.pv-box{border:.22cqw solid #7FA47F;box-shadow:0 0 0 .5cqw rgba(127,164,127,.22);transform:scale(.985);transform-origin:50% 50%}
.pv-box.pv-box-br svg{top:auto;bottom:.6cqw}
.pv-box.pv-box-out svg{top:-2.7cqw;right:5cqw}
.pv-box.pv-box-l svg{top:50%;right:auto;left:-2.8cqw;transform:translateY(-50%)}
.pv-box.pv-box-tl svg{right:auto;left:.6cqw}
.pv-box svg{position:absolute;top:.6cqw;right:.6cqw;width:2.2cqw;height:2.2cqw;padding:.45cqw;border-radius:50%;background:#2D572F;color:#F3F1EA}
.pv-note{right:2.4%;bottom:3.2%;background:rgba(20,19,15,.9);color:#F3F1EA;font-size:1.35cqw;padding:.8cqw 1.1cqw;
  transform:translateY(.6cqw);max-width:60%;white-space:normal;text-align:right}
.pv-note b{color:#9DC49F;font-weight:500}
.hiw-v .pv{max-width:520px}

/* the preview store: before and after on the same page, a divider sweeping across */
.pv-wipe .pv-o{opacity:1;transform:none;transition:none}
.pv-after{position:absolute;inset:0;z-index:2;clip-path:inset(0 0 0 100%);animation:pvwipe 9s ease-in-out infinite;animation-play-state:paused}
.pv-after>.pv-zl>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pv-div{position:absolute;top:0;bottom:0;left:100%;width:.3cqw;margin-left:-.15cqw;background:#F3F1EA;z-index:3;
  box-shadow:0 0 0 .15cqw rgba(0,0,0,.28);animation:pvdiv 9s ease-in-out infinite;animation-play-state:paused}
.pv-wipe.on .pv-after,.pv-wipe.on .pv-div{animation-play-state:running}
@keyframes pvwipe{0%,8%{clip-path:inset(0 0 0 100%)}42%,62%{clip-path:inset(0 0 0 0%)}94%,100%{clip-path:inset(0 0 0 100%)}}
@keyframes pvdiv{0%,8%{left:100%}42%,62%{left:0%}94%,100%{left:100%}}
/* the labels ride on the divider: Before to its left, After to its right */
.pv-div::before,.pv-div::after{position:absolute;top:2.4%;font-family:var(--mono);font-size:1.05cqw;letter-spacing:.14em;text-transform:uppercase;
  padding:.5em .8em;background:rgba(20,19,15,.86);color:#F3F1EA;white-space:nowrap;line-height:1.2}
.pv-div::before{content:"Before";right:100%;margin-right:.8cqw}
.pv-div::after{content:"After";left:100%;margin-left:.8cqw;background:#2D572F}
@media(prefers-reduced-motion:reduce){.pv-after{clip-path:inset(0 0 0 50%);animation:none}.pv-div{left:50%;animation:none}}
/* a line that is there before the change and gone after it */
.pv-o.pv-gone{opacity:1;transform:none}
.pv.on .pv-o.pv-gone{opacity:0}
.pv-line.pv-err{background:#FBEAEA;color:#8A1F1F;border-color:#E7B8B8;padding-left:1cqw;padding-right:1cqw}
.pv-block.pv-img{background-size:cover;background-position:center}
.pv-block.pv-img::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,10,.05) 0%,rgba(10,14,10,.82) 70%)}
.pv-block>*{position:relative;z-index:1}
.pv-swap.pv-left{justify-content:flex-start;padding-left:1.4cqw}
.cath-pv .cath-v{width:min(100%,840px)}
.axs-mid .pv{max-width:none}

/* a picture replaced */
.pv-imgo{overflow:hidden;background:#fff}
.pv-imgo img{display:block;width:100%;height:100%;object-fit:cover}
/* ---- developer panels: pull requests, module tables, logs, reports ---- */
.pv-win.pv-dev,.pv-devin{background:#fff;color:#1f2328;font-family:var(--sans);display:flex;flex-direction:column;gap:1.3cqw;padding:2cqw 2.2cqw}
.pv-devin{position:absolute;inset:0}
.dv-h{display:flex;align-items:center;gap:1.2cqw;font-size:1.25cqw;color:#59636e;line-height:1.2}
.dv-h b{font-size:1.9cqw;color:#1f2328;font-weight:600;letter-spacing:-.01em}
.dv-h b span{color:#59636e;font-weight:400}
.dv-pill{font-style:normal;font-size:1.05cqw;font-weight:600;padding:.35em .8em;border-radius:999px;white-space:nowrap}
.dv-pill.ok{background:#1f883d;color:#fff}.dv-pill.warn{background:#fff8c5;color:#7d4e00;border:1px solid #d4a72c}.dv-pill.bad{background:#ffebe9;color:#a40e26;border:1px solid #ff8182}
.dv-sub{font-size:1.15cqw;color:#59636e}
.dv-sub code,.dv-r code{font-family:var(--mono);font-size:.95em;background:#ddf4ff;color:#0969da;padding:.15em .45em;border-radius:.35cqw}
.dv-tbl{border:1px solid #d1d9e0;border-radius:.7cqw;overflow:hidden}
.dv-r{display:grid;grid-template-columns:var(--cols,2.4fr .8fr auto);gap:1.2cqw;padding:.85cqw 1.4cqw;border-top:1px solid #d1d9e0;font-size:1.22cqw;align-items:center;line-height:1.25}
.dv-r.dv-hd{border-top:0;background:#f6f8fa;color:#59636e;font-size:1cqw;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.dv-r>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv-r .r{color:#a40e26;font-weight:600}.dv-r .g{color:#116329;font-weight:600}
.dv-st{font-style:normal;justify-self:start;font-size:1.02cqw;font-weight:600;padding:.25em .75em;border-radius:999px;white-space:nowrap}
.dv-st.bad{background:#ffebe9;color:#a40e26}.dv-st.warn{background:#fff8c5;color:#7d4e00}.dv-st.ok{background:#dafbe1;color:#116329}
.dv-sum{font-size:1.2cqw;color:#59636e;line-height:1.3}
.dv-sum .g{color:#116329;font-weight:600}.dv-sum .r{color:#a40e26;font-weight:600}
.dv-chk{display:flex;flex-direction:column;border:1px solid #d1d9e0;border-radius:.7cqw;overflow:hidden}
.dv-c{display:flex;align-items:center;gap:1.1cqw;padding:.85cqw 1.4cqw;border-top:1px solid #d1d9e0;font-size:1.22cqw;line-height:1.25}
.dv-c:first-child{border-top:0}
.dv-c i{width:1.7cqw;height:1.7cqw;border-radius:50%;background:#1f883d;color:#fff;display:grid;place-items:center;flex:none}
.dv-c i svg{width:62%;height:62%;display:block}
.dv-c em{margin-left:auto;font-style:normal;color:#59636e;font-size:1.1cqw;white-space:nowrap}
.dv-term{background:#0d1117;color:#e6edf3;font-family:var(--mono);font-size:1.7cqw;line-height:1.6;padding:2.4cqw 2.6cqw;border-radius:.7cqw;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:1.15cqw}
.dv-term>div{white-space:normal;overflow-wrap:anywhere}
.dv-term .g{color:#3fb950}.dv-term .r{color:#f85149}.dv-term .y{color:#d29922}.dv-term .d{color:#8b949e}
.dv-lh{display:grid;grid-template-columns:1fr 1fr;gap:2.2cqw}
.dv-col{font-size:1cqw;letter-spacing:.08em;text-transform:uppercase;color:#59636e;font-weight:600;padding-bottom:.5cqw}
.dv-g{display:flex;align-items:center;gap:1.2cqw;padding:.6cqw 0;border-top:1px solid #d1d9e0;font-size:1.2cqw}
.dv-gauge{width:4.4cqw;height:4.4cqw;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:1.4cqw;
  background:conic-gradient(var(--c) calc(var(--p) * 1%),#eaeef2 0);position:relative;flex:none;color:var(--c)}
.dv-gauge::before{content:"";position:absolute;inset:.5cqw;background:#fff;border-radius:50%}
.dv-gauge b{position:relative}
.dv-met{margin-top:.2cqw}
.pv-wipe .pv-devin .pv-o{opacity:1;transform:none}
/* inside a developer panel the rows sit in the flow; only their arrival is animated */
.pv-win.pv-dev .pv-o,.pv-devin .pv-o{position:static}
.pv-win.pv-dev .pv-note,.pv-devin .pv-note{position:absolute}
.dv-c.bad i{background:#cf222e}
.dv-c.bad i svg{width:52%;height:52%}
.tmt-r i img{display:block;width:100%;height:100%;object-fit:cover}

/* ==================== grounds ====================
   Four grounds from the box review, one per section, so a page alternates on
   the way down and always closes on Prism (the canvas behind every .panel).
   One light: ink and one soft sage lamp, placed by --lx/--ly.
   Dot field: a sage dot grid that shows only where the lamp falls.
   Silk: two sets of wide bands crossing at a shallow angle, blurred, drifting. */
.hub-wash,.jrny-wash,.cath-pv .cath-wash,.dmo-wash{
  background:radial-gradient(62% 58% at var(--lx,12%) var(--ly,0%),rgba(157,196,159,.36) 0%,rgba(45,87,47,.22) 34%,rgba(45,87,47,0) 70%),#14130F}
.jrny-wash{--lx:88%}

.axs-wash,.cath:not(.cath-pv) .cath-wash{background:#14130F;--lx:88%;--ly:12%}
.axs-wash::before,.cath:not(.cath-pv) .cath-wash::before,
.axs-wash::after,.cath:not(.cath-pv) .cath-wash::after{content:"";position:absolute;inset:0;pointer-events:none}
.axs-wash::before,.cath:not(.cath-pv) .cath-wash::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 var(--lx) var(--ly),#000 0%,rgba(0,0,0,.4) 38%,transparent 74%);
  mask-image:radial-gradient(60% 72% at var(--lx) var(--ly),#000 0%,rgba(0,0,0,.4) 38%,transparent 74%)}
.axs-wash::after,.cath:not(.cath-pv) .cath-wash::after{
  background:radial-gradient(50% 55% at var(--lx) var(--ly),rgba(157,196,159,.2) 0%,rgba(45,87,47,.12) 45%,transparent 76%)}

.hiw-wash,.stg-bg,.bnd-wash,.tmt-wash{background:#14130F;overflow:hidden}
.hiw-wash::before,.stg-bg::before,.bnd-wash::before,.tmt-wash::before,
.hiw-wash::after,.stg-bg::after,.bnd-wash::after,.tmt-wash::after{content:"";position:absolute;inset:-16%;pointer-events:none}
.hiw-wash::before,.stg-bg::before,.bnd-wash::before,.tmt-wash::before{filter:blur(18px);animation:gdrift 60s ease-in-out infinite alternate;
  background:repeating-linear-gradient(100deg,transparent 0 46px,rgba(157,196,159,.12) 46px 84px,transparent 84px 150px)}
.hiw-wash::after,.stg-bg::after,.bnd-wash::after,.tmt-wash::after{filter:blur(24px);animation:gdrift 80s ease-in-out infinite alternate-reverse;
  background:repeating-linear-gradient(78deg,transparent 0 70px,rgba(45,87,47,.34) 70px 128px,transparent 128px 220px)}
@keyframes gdrift{from{transform:translate3d(-3%,0,0)}to{transform:translate3d(3%,0,0)}}
@media(prefers-reduced-motion:reduce){.hiw-wash::before,.stg-bg::before,.bnd-wash::before,.tmt-wash::before,
  .hiw-wash::after,.stg-bg::after,.bnd-wash::after,.tmt-wash::after{animation:none}}

/* ---- the approval bar under a preview: what changed, and the two buttons the preview store has ---- */
.pv-act{container-type:inline-size;display:flex;align-items:center;flex-wrap:wrap;gap:.9cqw;padding:1.2cqw 1.6cqw;background:#141310;border-top:1px solid rgba(243,241,234,.14);color:#F3F1EA;font-family:var(--sans)}
.pv-al{font-family:var(--mono);font-size:1.05cqw;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,241,234,.5);margin-right:.4cqw;white-space:nowrap}
.pv-ai{position:static;display:inline-flex;align-items:center;gap:.6cqw;font-size:1.4cqw;line-height:1.2;padding:.55cqw .9cqw;border:1px solid rgba(243,241,234,.2);background:rgba(243,241,234,.06);transform:translateY(.4cqw);white-space:nowrap}
.pv-ai i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:#2D572F;color:#F3F1EA;display:grid;place-items:center;flex:none}
.pv-ai i svg{width:62%;height:62%;display:block}
.pv-btns{margin-left:auto;display:flex;gap:.7cqw}
.pv-btn{font-size:1.35cqw;font-weight:600;padding:.7cqw 1.3cqw;background:#F3F1EA;color:#14130F;white-space:nowrap}
.pv-btn.o{background:none;border:1px solid rgba(243,241,234,.35);color:#F3F1EA;font-weight:500}

/* the upgrade switcher sits on a dark section */
.sec.dark .hiw-l{border-top-color:rgba(243,241,234,.5)}
.sec.dark .hiw-i{border-bottom-color:rgba(243,241,234,.16)}
.sec.dark .hiw-i::before{background:#F3F1EA}
.sec.dark .hiw-i b{color:rgba(243,241,234,.5)}
.sec.dark .hiw-i:hover b,.sec.dark .hiw-i[aria-selected="true"] b{color:#F3F1EA}
.sec.dark .hiw-i p{color:rgba(243,241,234,.66)}
.sec.dark .hiw-i .arrow{color:#F3F1EA;background:rgba(243,241,234,.08);border:1px solid rgba(243,241,234,.2)}
.sec.dark .hiw-stage{border:1px solid rgba(243,241,234,.14)}
.sec.dark .hiw+.kpi{border-top-color:rgba(243,241,234,.5);margin-top:clamp(36px,4.4vw,64px)}
.sec.dark .kpi div{border-right-color:rgba(243,241,234,.16)}
.sec.dark .kpi span{color:rgba(243,241,234,.6)}

/* ---- Ari at the centre of the technical work ---- */
.tech-t{aspect-ratio:auto;display:flex;flex-direction:column;gap:3px;padding:clamp(10px,1.2vw,16px) clamp(12px,1.4vw,18px);
  background:rgba(20,19,15,.62);border:1px solid rgba(243,241,234,.22);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);color:#F3F1EA;overflow:visible}
.tech-k{font-family:var(--mono);font-size:clamp(8px,.75vw,10px);letter-spacing:.14em;text-transform:uppercase;color:rgba(243,241,234,.5)}
.tech-t b{font-size:clamp(11px,1.15vw,15px);font-weight:500;letter-spacing:-.01em;line-height:1.25}
.tech-t i{font-style:normal;align-self:flex-start;margin-top:3px;font-family:var(--mono);font-size:clamp(7.5px,.7vw,9.5px);letter-spacing:.08em;text-transform:uppercase;
  padding:2px 6px;background:rgba(157,196,159,.18);color:#9DC49F}
.tech-hub .hub-t{top:auto}
.tech-hub .hub-l1,.tech-hub .hub-r1{top:6%}.tech-hub .hub-l2,.tech-hub .hub-r2{top:38%}.tech-hub .hub-l3,.tech-hub .hub-r3{top:70%}
@media(max-width:700px){.tech-hub .hub-l1,.tech-hub .hub-r1{top:4%}.tech-hub .hub-l2,.tech-hub .hub-r2{top:37%}.tech-hub .hub-l3,.tech-hub .hub-r3{top:70%}
  .tech-t{gap:2px;padding:8px 9px}.tech-k{font-size:7px}.tech-t b{font-size:10px}.tech-t i{font-size:6.5px;padding:1px 4px}}
/* five cards on one row, then a 2 plus 3 wrap */
/* five cards: three on the first row, two on the second, the same width as the four-card rows */
.ucards-five{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,36px)}
@media(max-width:700px){.ucards-five{grid-template-columns:1fr}}

/* ---- a change in Ari's own UI: the ask, the reply, one result card ---- */
.chg{gap:12px}
.chg-res{display:block;background:rgba(20,19,15,.64);border:1px solid rgba(243,241,234,.2);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);overflow:hidden}
.chg-lab{display:block;padding:10px 14px 7px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(243,241,234,.5)}
.chg-strip{display:block;margin:0 14px;padding:11px 14px;font-size:13.5px;font-weight:500;line-height:1.35;text-align:center}
.chg-strip s{opacity:.5;font-weight:400}
.chg-tile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;width:100%;text-align:left;font-weight:400}
.chg-tile b{font-weight:600;font-size:13px}
.chg-tile u{text-decoration:none;color:#C9A227;font-size:12px;grid-column:1}
.chg-tile em{font-style:normal;font-weight:600;grid-column:2;grid-row:1/3;align-self:center}
.chg-mail{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;font-weight:400}
.chg-mail b{font-weight:600;font-size:14px}
.chg-mail em{font-style:normal;font-size:11.5px;color:rgba(20,19,15,.55)}
.chg-r{display:flex;align-items:center;gap:12px;margin:0 14px;padding:9px 0;border-top:1px solid rgba(243,241,234,.12);font-size:12.5px;line-height:1.35}
.chg-lab+.chg-r{border-top:0;padding-top:2px}
.chg-r b{font-weight:500;color:#F3F1EA;flex:0 0 34%}
.chg-r em{font-style:normal;color:rgba(243,241,234,.66);flex:1 1 auto;min-width:0}
.chg-r i{font-style:normal;flex:none;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;background:rgba(157,196,159,.18);color:#9DC49F}
.chg-res>.chg-r:last-child{padding-bottom:12px}
@media(max-width:440px){.chg-r{flex-wrap:wrap}.chg-r b{flex-basis:100%}.chg-strip{font-size:12.5px}}

/* ==================== working-size artifacts (x.py), 2026-09-23 ====================
   A window drawn at the size it is read at, filling its stage. Dark on the ink
   grounds (the site's one glass material), light on paper sections. */
.x-win{display:flex;flex-direction:column;min-width:0;width:100%;font-family:var(--sans);text-align:left}
.x-dark{background:rgba(20,19,15,.62);border:1px solid rgba(243,241,234,.18);color:#F3F1EA}
.x-light{background:#fff;border:1px solid rgba(20,19,15,.14);color:var(--ink);box-shadow:0 1px 0 rgba(20,19,15,.04),0 18px 40px -24px rgba(20,19,15,.28)}
.x-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid rgba(243,241,234,.12);flex:none;min-width:0}
.x-light .x-bar{border-bottom-color:rgba(20,19,15,.1);background:#F7F6F2}
.x-bar i{width:8px;height:8px;border-radius:50%;background:rgba(243,241,234,.2);flex:none}
.x-light .x-bar i{background:rgba(20,19,15,.14)}
.x-bar span{margin-left:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:rgba(243,241,234,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.x-light .x-bar span{color:var(--ink60)}
.x-bar em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:11px;color:rgba(243,241,234,.45);white-space:nowrap;padding-left:12px}
.x-light .x-bar em{color:var(--ink40)}
.x-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:16px;padding:20px 22px;overflow:hidden}
.x-fill{height:100%}
.hiw-p:has(.x-fill),.hiw-p:has(.x-pv){align-items:stretch}
.hiw-v:has(.x-fill){max-width:none;height:100%}
.hiw-v:has(.x-pv){max-width:none;align-self:center}
.hiw-v .x-pv.pv{max-width:none}
.x-k{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,241,234,.5)}
.x-light .x-k{color:var(--ink40)}
.x-k i{width:16px;height:16px;display:grid;place-items:center}
.x-k i svg{width:100%;height:100%}
.x-win code,.x-side code{font-size:12px}

/* messages */
.x-msg{display:flex;gap:12px;align-items:flex-start}
.x-msg b{display:block;font-size:13px;font-weight:600;margin-bottom:3px}
.x-msg p{margin:0;font-size:15px;line-height:1.5;color:rgba(243,241,234,.86)}
.x-light .x-msg p{color:var(--ink80)}
.x-m-you p{color:#F3F1EA}
.x-av{width:30px;height:30px;flex:none;display:grid;place-items:center;overflow:hidden;background:rgba(243,241,234,.1);border:1px solid rgba(243,241,234,.16);font-style:normal;font-size:12px;font-weight:600}
.x-av img{width:100%;height:100%;object-fit:cover;display:block}
.x-av-ari{background:#14130F;color:#F3F1EA}
.x-av-ari svg{width:62%;height:auto}
.x-av-you{background:#2D572F;border-color:#2D572F;color:#F3F1EA}
.x-body>.x-msg+.x-msg{padding-top:16px;border-top:1px solid rgba(243,241,234,.08)}
.x-light .x-body>.x-msg+.x-msg{border-top-color:rgba(20,19,15,.07)}

/* tables inside a window */
.x-rows{display:flex;flex-direction:column}
.x-row{display:grid;gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid rgba(243,241,234,.1);font-size:14px;line-height:1.45}
.x-light .x-row{border-bottom-color:rgba(20,19,15,.08)}
.x-row:last-child{border-bottom:0}
.x-c2 .x-row{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.x-c3 .x-row{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto}
.x-c4 .x-row{grid-template-columns:minmax(0,2fr) minmax(0,1.1fr) minmax(0,1fr) auto}
.x-c5 .x-row{grid-template-columns:auto minmax(0,2.2fr) minmax(0,1fr) minmax(0,1fr) auto}
.x-row>span{min-width:0;overflow-wrap:anywhere}
.x-row code{color:rgba(243,241,234,.78)}
.x-light .x-row code{color:var(--ink80)}
.x-hd .x-row{padding:0 0 9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,241,234,.45);border-bottom-color:rgba(243,241,234,.22)}
.x-light .x-hd .x-row{color:var(--ink40);border-bottom-color:rgba(20,19,15,.2)}
.x-ok{color:#9DC49F}
.x-light .x-ok{color:#2D572F}
.x-warn{color:#CF9536}
.x-light .x-warn{color:#9A6A1C}
.x-dim{color:rgba(243,241,234,.5)}
.x-light .x-dim{color:var(--ink40)}

/* a work log */
.x-log{display:flex;flex-direction:column}
.x-log>span{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(243,241,234,.08);font-size:14px}
.x-log>span:last-child{border-bottom:0}
.x-log i{width:18px;height:18px;flex:none;display:grid;place-items:center;border-radius:50%;background:rgba(157,196,159,.16);color:#9DC49F}
.x-log i svg{width:11px;height:11px}
.x-log .x-warn i{background:rgba(207,149,54,.16);color:#CF9536}
.x-log em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:12px;color:rgba(243,241,234,.5);white-space:nowrap}
.x-light .x-log>span{border-bottom-color:rgba(20,19,15,.08)}
.x-light .x-log i{background:rgba(45,87,47,.1);color:#2D572F}
.x-light .x-log em{color:var(--ink40)}

/* two sides: the live store and the private copy */
.x-two{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px}
.x-side{display:flex;flex-direction:column;gap:12px;padding:22px;border:1px solid rgba(243,241,234,.16);background:rgba(20,19,15,.62);color:#F3F1EA;min-width:0}
.x-side>b{font-size:19px;font-weight:500;letter-spacing:-.01em}
.x-side>p{margin:0;font-size:14px;line-height:1.5;color:rgba(243,241,234,.62)}
.x-side.x-on{border-color:rgba(157,196,159,.45)}
.x-side.x-on>b{font-family:var(--mono);font-size:15px;color:#9DC49F}
.x-tag{margin-top:auto;align-self:flex-start;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border:1px solid rgba(243,241,234,.22);color:rgba(243,241,234,.7)}

/* a pull request */
.x-prh{display:flex;flex-direction:column;gap:8px}
.x-prh b{font-size:18px;font-weight:500;letter-spacing:-.01em}
.x-prh span{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:rgba(243,241,234,.6)}
.x-light .x-prh span{color:var(--ink60)}
.x-prh code{padding:2px 6px;background:rgba(243,241,234,.08)}
.x-light .x-prh code{background:rgba(20,19,15,.06)}
.x-pill{font-style:normal;font-size:12px;font-weight:600;padding:3px 10px;background:#2D572F;color:#F3F1EA}
.x-diff{border:1px solid rgba(243,241,234,.14);font-family:var(--mono);font-size:12px;line-height:1.6;overflow:hidden}
.x-dh{display:flex;gap:10px;padding:8px 12px;border-bottom:1px solid rgba(243,241,234,.12);background:rgba(243,241,234,.04)}
.x-dh code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:rgba(243,241,234,.7);font-size:11.5px}
.x-dh em{margin-left:auto;font-style:normal;color:#9DC49F;flex:none}
.x-dl{display:flex;min-width:0}
.x-dl i{width:26px;flex:none;text-align:center;font-style:normal;color:rgba(243,241,234,.35)}
.x-dl code{white-space:pre;overflow:hidden;text-overflow:ellipsis;min-width:0;padding-right:10px;color:rgba(243,241,234,.72);font-size:12px}
.x-add{background:rgba(157,196,159,.12)}
.x-add i,.x-add code{color:#CFE3CF}
.x-del{background:rgba(203,86,64,.14)}
.x-del i,.x-del code{color:#F0B8AA}
.x-light .x-diff{border-color:rgba(20,19,15,.12)}
.x-light .x-dh{background:#F7F6F2;border-bottom-color:rgba(20,19,15,.1)}
.x-light .x-dh code,.x-light .x-dl code{color:var(--ink80)}
.x-light .x-dl i{color:var(--ink40)}
.x-light .x-add{background:#E7F1E4}
.x-light .x-add code,.x-light .x-add i{color:#1D4A20}
.x-light .x-del{background:#FBE9E4}
.x-light .x-del code,.x-light .x-del i{color:#8A2E1C}

/* the approval view */
.x-ok .x-body{gap:18px}
.x-okv{flex:1;min-height:120px;border:1px solid rgba(243,241,234,.14);overflow:hidden;background:#fff}
.x-okv img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.9);transform-origin:84% 74%}
.x-okl{display:flex;flex-direction:column}
.x-okl .x-k{margin-bottom:6px}
.x-okr{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid rgba(243,241,234,.08);font-size:14.5px;line-height:1.45}
.x-okr:last-child{border-bottom:0}
.x-okr i{width:18px;height:18px;flex:none;margin-top:1px;display:grid;place-items:center;border-radius:50%;background:rgba(157,196,159,.16);color:#9DC49F}
.x-okr i svg{width:11px;height:11px}
.x-okb{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.x-okb b{display:block;text-align:center;padding:12px;font-size:14px;font-weight:600;background:#F3F1EA;color:#14130F}
.x-okb b.o{background:none;border:1px solid rgba(243,241,234,.3);color:#F3F1EA;font-weight:500}
.x-comp{margin-top:auto;display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;border:1px solid rgba(243,241,234,.2);background:rgba(20,19,15,.5)}
.x-comp span{flex:1;font-size:14px;color:rgba(243,241,234,.4)}
.x-comp i{width:30px;height:30px;border-radius:50%;background:#F3F1EA;color:#14130F;display:grid;place-items:center;flex:none}
.x-comp i svg{width:15px;height:15px}
.x-foot{margin-top:auto;display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid rgba(243,241,234,.12);font-size:13px;color:rgba(243,241,234,.7)}
.x-foot em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:11.5px;color:rgba(243,241,234,.45)}
.x-light .x-foot{border-top-color:rgba(20,19,15,.1);color:var(--ink60)}
.x-light .x-foot em{color:var(--ink40)}
.x-pv .pv-win{aspect-ratio:var(--ar,16/10)}
.x-pv .pv-act{padding:12px 16px}
.x-pv .pv-al{font-size:10.5px}
.x-pv .pv-ai{font-size:13px;padding:6px 10px;gap:8px;transform:none}
.x-pv .pv-ai i{width:15px;height:15px}
.x-pv .pv-btn{font-size:13px;padding:8px 14px}
.x-pv .pv-btns{gap:8px}
.x-pv .pv-div::before,.x-pv .pv-div::after{font-size:10.5px;padding:3px 7px}
/* security: the three zones at working size, equal height, and the access table */
.bnd{align-items:stretch;padding:clamp(28px,3.6vw,52px) clamp(20px,3vw,44px)}
.bnd-c{padding:20px 22px 12px}
.bnd-h{font-size:11px}
.bnd-r{font-size:14.5px;padding:12px 0}
.bnd-a small{font-size:10.5px}
.x-acc .x-row{padding:15px 0;font-size:15px}
.x-acc .x-row b{font-weight:500}
.x-acc .x-body{padding:8px 26px 10px}
.x-acc .x-hd .x-row{padding:14px 0 10px}
.x-row>span{text-align:left;justify-self:start}
.hd+.x-win,.hd+.x-wrap{margin-top:clamp(24px,3vw,40px)}
/* a ground the width of the container, one window filling it */
.x-stage{position:relative;overflow:hidden;background:#14130F;padding:clamp(22px,3.4vw,52px) clamp(18px,3.4vw,52px) 0;
  border:1px solid rgba(20,19,15,.1);box-shadow:0 40px 90px -56px rgba(20,19,15,.75)}
.x-gw{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(62% 58% at 14% 0%,rgba(157,196,159,.34) 0%,rgba(45,87,47,.2) 34%,rgba(45,87,47,0) 70%),#14130F}
.x-g-silk .x-gw{background:#14130F;overflow:hidden}
.x-g-silk .x-gw::before,.x-g-silk .x-gw::after{content:"";position:absolute;inset:-16%;pointer-events:none}
.x-g-silk .x-gw::before{filter:blur(18px);animation:gdrift 60s ease-in-out infinite alternate;
  background:repeating-linear-gradient(100deg,transparent 0 46px,rgba(157,196,159,.12) 46px 84px,transparent 84px 150px)}
.x-g-silk .x-gw::after{filter:blur(24px);animation:gdrift 80s ease-in-out infinite alternate-reverse;
  background:repeating-linear-gradient(78deg,transparent 0 70px,rgba(45,87,47,.34) 70px 128px,transparent 128px 220px)}
.x-g-dots .x-gw{background:radial-gradient(50% 55% at 86% 10%,rgba(157,196,159,.2) 0%,rgba(45,87,47,.12) 45%,transparent 76%),#14130F}
.x-g-dots .x-gw::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(157,196,159,.9) 1px,transparent 1.3px);
  background-size:14px 14px;opacity:.6;-webkit-mask-image:radial-gradient(60% 72% at 86% 10%,#000 0%,rgba(0,0,0,.4) 38%,transparent 74%);
  mask-image:radial-gradient(60% 72% at 86% 10%,#000 0%,rgba(0,0,0,.4) 38%,transparent 74%)}
.x-si{position:relative;z-index:1}
.x-stage:not(.x-sq) .x-si>.x-win,.x-stage:not(.x-sq) .x-si>div>.x-win{border-bottom:0}
.x-sq{aspect-ratio:1;padding:clamp(18px,2.6vw,36px);display:grid}
.x-sq .x-si{display:grid;align-items:center}
.x-sq .x-si>.x-win{height:100%}

/* merchants: the backlog, twice */
.x-bl{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(12px,1.6vw,20px);align-items:stretch}
.x-bl .x-body{gap:0;padding:6px 20px 8px}
.x-tk{display:flex;align-items:baseline;gap:12px;padding:13px 0;border-bottom:1px solid rgba(243,241,234,.09);font-size:15px;min-width:0}
.x-tk:last-child{border-bottom:0}
.x-tk code{font-size:11.5px;color:rgba(243,241,234,.45);flex:none}
.x-tk span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-tk em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:12.5px;white-space:nowrap;flex:none}
.x-bl-q .x-tk em{color:#CF9536}
.x-bl-q .x-tk span{color:rgba(243,241,234,.72)}
.x-bl-a{border-color:rgba(157,196,159,.4)}

/* merchants: a month of credits */
.x-ledger .x-body{padding:22px 26px 24px;gap:0}
.x-lgt{display:flex;align-items:baseline;gap:12px}
.x-lgt b{font-size:clamp(30px,3.4vw,44px);font-weight:400;letter-spacing:-.03em;line-height:1}
.x-lgt span{font-size:15px;color:var(--ink60)}
.x-lgb{height:8px;background:var(--sunk);margin:16px 0 22px;overflow:hidden}
.x-lgb i{display:block;height:100%;background:#2D572F}
.x-lgh,.x-lg{display:grid;grid-template-columns:minmax(0,1fr) 150px 70px;gap:16px;align-items:baseline}
.x-lgh{padding-bottom:9px;border-bottom:1px solid rgba(20,19,15,.2);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink40)}
.x-lgh span,.x-lgh em,.x-lgh b{font-style:normal;font-weight:400}
.x-lgh b,.x-lg b{text-align:right}
.x-lg{padding:11px 0;border-bottom:1px solid rgba(20,19,15,.08);font-size:15px}
.x-lg em{font-style:normal;font-size:13.5px;color:var(--ink60)}
.x-lg b{font-family:var(--mono);font-size:13.5px;font-weight:400}
.x-lgc{margin:16px 0 0;font-size:14px;color:var(--ink60)}
/* agencies: pull requests across client repositories */
.x-prl .x-body{padding:4px 22px;gap:0}
.x-pr{display:grid;grid-template-columns:20px minmax(0,1fr) auto 150px 76px;gap:16px;align-items:center;padding:15px 0;border-bottom:1px solid rgba(20,19,15,.08)}
.x-pr:last-child{border-bottom:0}
.x-pri{width:18px;height:18px;color:#2D572F}
.x-pri svg{width:100%;height:100%;display:block}
.x-pri-m{color:var(--ink40)}
.x-prt{min-width:0;display:flex;flex-direction:column;gap:3px}
.x-prt b{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-prt em{font-style:normal;font-size:12.5px;color:var(--ink40)}
.x-prt code{font-size:12px;color:var(--ink60)}
.x-prc{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#2D572F;white-space:nowrap}
.x-prc i{width:14px;height:14px;display:grid}
.x-prc svg{width:100%;height:100%}
.x-prr{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink60);white-space:nowrap}
.x-prr img{width:22px;height:22px;object-fit:cover;flex:none}
.x-prs{justify-self:end;font-size:12px;font-weight:600;padding:3px 10px;color:#fff;background:#2D572F}
.x-prs-m{background:#14130F}
/* your team: three people in one change history */
.x-team .x-body{padding:4px 22px 6px;gap:0}
.x-tm{display:grid;grid-template-columns:34px 120px minmax(0,1fr) 190px 130px;gap:16px;align-items:center;padding:15px 0;border-bottom:1px solid rgba(243,241,234,.09)}
.x-tm:last-child{border-bottom:0}
.x-tm img{width:34px;height:34px;object-fit:cover}
.x-tmw b{display:block;font-size:14.5px;font-weight:500}
.x-tmw em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,241,234,.45)}
.x-tm q{quotes:none;font-size:15px;color:rgba(243,241,234,.88);min-width:0}
.x-tm code{font-size:11.5px;color:rgba(243,241,234,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-tm>span:last-child{justify-self:end;font-size:13px;white-space:nowrap}
/* the technical outline */
.x-ol{display:flex;flex-direction:column;flex:1}
.x-ol>div{display:grid;grid-template-columns:70px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid rgba(243,241,234,.09);font-size:15px;line-height:1.5}
.x-ol em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,241,234,.45);padding-top:3px}
.x-ol code{font-size:12.5px;color:#9DC49F}
/* technical: the upgrade report */
.x-rep{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:clamp(18px,2.6vw,36px)}
.x-repl{display:flex;flex-direction:column}
.x-repv{display:flex;align-items:baseline;gap:14px;font-size:clamp(30px,3.4vw,46px);letter-spacing:-.03em;line-height:1;margin:4px 0 18px}
.x-repv i{font-style:normal;color:rgba(243,241,234,.4);font-size:.6em}
.x-repv b{font-weight:400;color:#9DC49F}
.x-repr .x-row{font-size:13.5px;padding:10px 0}
.x-rept{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start;margin-top:4px;padding:16px 0 4px;border-top:1px solid rgba(243,241,234,.14)}
.x-rept>.x-k{padding-top:3px}
.x-rept span:not(.x-k){display:flex;gap:10px;font-size:14px;line-height:1.45;color:rgba(243,241,234,.8)}
.x-rept span:not(.x-k) i{flex:none;width:8px;height:8px;margin-top:7px;background:#CF9536}
.hiw-v .pv{max-width:none}
.x-term{display:flex;flex-direction:column;gap:9px;font-family:var(--mono);font-size:12.5px;line-height:1.5;color:rgba(243,241,234,.82)}
.x-term span{overflow-wrap:anywhere}
.x-term .d{color:rgba(243,241,234,.45)}
.x-term .r{color:#F0B8AA}
.x-term .g{color:#9DC49F}
.x-term .y{color:#E3B970}
/* maintenance: a week of small jobs */
.x-wk .x-body{padding:0}
.x-week{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.x-day{display:flex;flex-direction:column;gap:10px;padding:16px 14px 20px;border-right:1px solid rgba(243,241,234,.09);min-width:0}
.x-day:last-child{border-right:0}
.x-dh2{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,241,234,.5);padding-bottom:4px}
.x-job{display:flex;flex-direction:column;gap:5px;padding:11px 12px;border:1px solid rgba(243,241,234,.14);border-left:2px solid #9DC49F;background:rgba(243,241,234,.035)}
.x-j-warn{border-left-color:#CF9536}
.x-job em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:rgba(243,241,234,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-job b{font-size:14px;font-weight:500;line-height:1.35}
.x-job span{font-size:12px;color:#9DC49F}
.x-j-warn span{color:#CF9536}
/* maintenance: what changed */
.x-chg .x-body{padding:6px 24px 8px;gap:0}
.x-chg .x-row{font-size:14.5px;padding:14px 0}
.x-chg .x-row b{font-weight:500}
.x-chg .x-c4 .x-row{grid-template-columns:minmax(0,1.5fr) minmax(0,1.3fr) minmax(0,.9fr) minmax(0,1fr)}
/* storefront: desktop and phone */
.x-dv{display:grid;grid-template-columns:minmax(0,3.1fr) minmax(0,1fr);gap:clamp(12px,1.8vw,24px);align-items:end}
.x-dv .pv-bar .pv-url{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-phone .pv-bar{justify-content:center}
.x-phone .pv-bar i{display:none}
.x-dvact{margin-top:clamp(12px,1.8vw,24px);border:1px solid rgba(243,241,234,.18);padding:12px 16px}
.x-dvact .pv-al{font-size:10.5px}
.x-dvact .pv-ai{font-size:13px;padding:6px 10px;gap:8px;transform:none}
.x-dvact .pv-ai i{width:15px;height:15px}
.x-dvact .pv-btn{font-size:13px;padding:8px 14px}
.x-dv .pv-div::before,.x-dv .pv-div::after{font-size:10px;padding:3px 6px}
.x-stage:has(.x-dv){padding-bottom:clamp(22px,3.4vw,52px)}
/* storefront: one change, two themes */
.x-code2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px)}
.x-code2 .x-body{padding:18px 20px}
.x-code2 .x-dl code{white-space:pre-wrap}
.x-dv{align-items:start}
.hiw-stage:has(.pv:not(.x-pv)){aspect-ratio:16/12}
.hiw-p:has(.pv:not(.x-pv)){padding:clamp(12px,1.6vw,22px)}
/* content: the admin product grid */
.x-adm .x-body{padding:0;gap:0}
.x-ag-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px 14px}
.x-ag-top b{font-size:20px;font-weight:500;letter-spacing:-.01em}
.x-ag-scope{font-size:13px;padding:6px 12px;border:1px solid rgba(20,19,15,.18);background:#F7F6F2}
.x-ag-act{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 22px;background:#EEF4EC;border-top:1px solid rgba(45,87,47,.18);border-bottom:1px solid rgba(45,87,47,.18);font-size:13.5px}
.x-ag-btn{font-size:13px;font-weight:600;padding:6px 12px;background:#2D572F;color:#fff}
.x-ag{padding:0 22px 6px}
.x-ag-h,.x-ag-r{display:grid;grid-template-columns:18px minmax(0,1.5fr) minmax(0,.8fr) repeat(calc(var(--n) - 2),minmax(0,1fr));gap:16px;align-items:center;padding:11px 0;border-bottom:1px solid rgba(20,19,15,.08);font-size:14px}
.x-ag-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink40);border-bottom-color:rgba(20,19,15,.2)}
.x-ag-r:last-child{border-bottom:0}
.x-ag-r>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-ag-r>span:nth-of-type(2){font-family:var(--mono);font-size:12px;color:var(--ink60)}
.x-new{background:#E7F1E4;color:#1D4A20;padding:3px 7px;margin:-3px 0;justify-self:start;max-width:100%}
.x-cb{width:14px;height:14px;border:1px solid rgba(20,19,15,.3);display:block}
.x-cb.on{background:#2D572F;border-color:#2D572F;box-shadow:inset 0 0 0 3px #2D572F,inset 0 0 0 5px #fff}
.x-flat{box-shadow:0 1px 0 rgba(20,19,15,.04),0 30px 70px -40px rgba(20,19,15,.4)}
.x-code2+*,.hd+.x-code2{margin-top:clamp(24px,3vw,40px)}
.x-sv .x-row{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr) minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1.2fr)}
.x-svw .x-row{font-size:15px;padding:14px 0}
.x-svw .x-row b{font-weight:500}
.x-svw .x-body{padding:14px 24px 18px}
/* use cases: the library of asks */
.x-lib-t{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.x-lib-t button{font:inherit;font-size:14px;padding:8px 14px;border:1px solid var(--line2);background:none;color:var(--ink60);cursor:pointer}
.x-lib-t button:hover{color:var(--ink);border-color:var(--ink)}
.x-lib-t button.on{background:var(--ink);color:#F3F1EA;border-color:var(--ink)}
.x-lib-h,.x-lib-r{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr) 140px;gap:18px;align-items:baseline}
.x-lib-h{padding-bottom:10px;border-bottom:1px solid var(--ink);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink40)}
.x-lib-h span:last-child,.x-lib-r em{text-align:right}
.x-lib-r{padding:14px 0;border-bottom:1px solid var(--line)}
.x-lib-r q{quotes:none;font-size:16px;color:var(--ink)}
.x-lib-r q::before{content:"> ";font-family:var(--mono);color:var(--ink40)}
.x-lib-r a{font-size:14px;color:var(--ink60);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.x-lib-r a:hover{color:var(--ink)}
.x-lib-r em{font-style:normal;font-family:var(--mono);font-size:13px;color:var(--ink60)}
.x-lib[data-f="tech"] .x-lib-r:not([data-k="tech"]),.x-lib[data-f="maint"] .x-lib-r:not([data-k="maint"]),
.x-lib[data-f="store"] .x-lib-r:not([data-k="store"]),.x-lib[data-f="merch"] .x-lib-r:not([data-k="merch"]){display:none}

/* ==================== how it works (hiw/), 2026-09-23 ==================== */

.hw{
  
  --paper:#F6F4EE; --card:#FBFAF6; --ink:#14130F; --ink80:rgba(20,19,15,.8); --ink60:rgba(20,19,15,.6); --ink40:rgba(20,19,15,.42);
  --line:rgba(20,19,15,.12); --line2:rgba(20,19,15,.22);
  --dark:#14130F; --cream:#F3F1EA; --cr70:rgba(243,241,234,.72); --cr50:rgba(243,241,234,.5); --crl:rgba(243,241,234,.14);
  --sage:#9DC49F; --green:#2D572F; --gold:#CF9536;
  --head:"Golos",Inter,system-ui,sans-serif; --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1200px; --gut:clamp(16px,4vw,40px);
}
.hw *{box-sizing:border-box}
.hw{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
.hw img{max-width:100%;display:block}
.hw a{color:inherit}
.hw .hw-wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.hw h1,.hw h2,.hw h3{font-family:var(--head);font-weight:500;letter-spacing:-.02em;text-wrap:balance;margin:0}
.hw h1{font-size:clamp(36px,5.4vw,68px);line-height:1.02}
.hw h2{font-size:clamp(28px,3.6vw,46px);line-height:1.06}
.hw h3{font-size:clamp(19px,1.7vw,23px);line-height:1.2;letter-spacing:-.01em}
.hw p{margin:0}
.hw .hw-lab{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink40)}
.hw .hw-sec{padding-block:clamp(72px,9vw,128px)}
.hw .hw-dark{background:var(--dark);color:var(--cream)}
.hw .hw-dark .hw-lab{color:var(--cr50)}
.hw .hw-hd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:24px 48px;align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.hw .hw-hd p{font-size:17px;color:var(--ink60);max-width:52ch}
.hw .hw-dark .hw-hd p{color:var(--cr70)}
.hw .hw-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;font-size:15px;font-weight:500;text-decoration:none;border:1px solid transparent}
.hw .hw-btn-g{background:var(--green);color:#fff}
.hw .hw-btn-o{border-color:var(--crl);color:var(--cream)}
.hw .hw-btn-k{background:var(--cream);color:var(--ink)}
.hw .hw-btn:focus-visible,.hw button:focus-visible,.hw input:focus-visible{outline:2px solid var(--sage);outline-offset:3px}

/* grounds: the three the site uses (One light, Silk, Dot field), ink with sage light */
.hw .hw-bd{position:relative;overflow:hidden;isolation:isolate;background:#14130F}
.hw .hw-bd>*{position:relative;z-index:1}
.hw .hw-bd-light{background:radial-gradient(62% 58% at var(--lx,12%) var(--ly,0%),rgba(157,196,159,.36) 0%,rgba(45,87,47,.22) 34%,rgba(45,87,47,0) 70%),#14130F}
.hw .hw-bd-light2{--lx:88%;background:radial-gradient(62% 58% at var(--lx,12%) var(--ly,0%),rgba(157,196,159,.36) 0%,rgba(45,87,47,.22) 34%,rgba(45,87,47,0) 70%),#14130F}
.hw .hw-bd-silk::before,.hw .hw-bd-silk::after{content:"";position:absolute;inset:-16%;pointer-events:none;z-index:0}
.hw .hw-bd-silk::before{filter:blur(18px);animation:hwdrift 60s ease-in-out infinite alternate;background:repeating-linear-gradient(100deg,transparent 0 46px,rgba(157,196,159,.12) 46px 84px,transparent 84px 150px)}
.hw .hw-bd-silk::after{filter:blur(24px);animation:hwdrift 80s ease-in-out infinite alternate-reverse;background:repeating-linear-gradient(78deg,transparent 0 70px,rgba(45,87,47,.34) 70px 128px,transparent 128px 220px)}
@keyframes hwdrift{from{transform:translate3d(-3%,0,0)}to{transform:translate3d(3%,0,0)}}
.hw .hw-bd-dots{--lx:86%;--ly:10%}
.hw .hw-bd-dots::before,.hw .hw-bd-dots::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0}
.hw .hw-bd-dots::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 var(--lx) var(--ly),#000 0%,rgba(0,0,0,.4) 38%,transparent 74%);mask-image:radial-gradient(60% 72% at var(--lx) var(--ly),#000 0%,rgba(0,0,0,.4) 38%,transparent 74%)}
.hw .hw-bd-dots::after{background:radial-gradient(50% 55% at var(--lx) var(--ly),rgba(157,196,159,.2) 0%,rgba(45,87,47,.12) 45%,transparent 76%)}

/* app windows */
.hw .hw-ui{background:#1B1A16;color:var(--cream);border:1px solid rgba(243,241,234,.16);box-shadow:0 30px 70px -30px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.2);font-size:14px}
.hw .hw-ui-l{background:#fff;color:var(--ink);border:1px solid rgba(20,19,15,.12);box-shadow:0 30px 70px -34px rgba(20,19,15,.5),0 2px 6px rgba(20,19,15,.08);font-size:14px}
.hw .hw-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid rgba(243,241,234,.1);font-family:var(--mono);font-size:11.5px;color:var(--cr50);white-space:nowrap;overflow:hidden}
.hw .hw-ui-l .hw-bar{border-bottom-color:var(--line);color:var(--ink40);background:#F8F7F3}
.hw .hw-bar i{width:8px;height:8px;border-radius:50%;background:rgba(243,241,234,.2);flex:none}
.hw .hw-ui-l .hw-bar i{background:rgba(20,19,15,.14)}
.hw .hw-bar span{margin-left:8px;overflow:hidden;text-overflow:ellipsis}
.hw .hw-bar em{margin-left:auto;font-style:normal;padding-left:12px}

/* chat pieces */
.hw .hw-msg{display:flex;gap:12px;align-items:flex-start}
.hw .hw-av{width:30px;height:30px;flex:none;overflow:hidden;background:#2A2924;display:grid;place-items:center;font-size:12px;font-weight:600}
.hw .hw-av img{width:100%;height:100%;object-fit:cover}
.hw .hw-av-ari{background:#0D0C0A;border:1px solid rgba(243,241,234,.18)}
.hw .hw-av-ari svg{width:62%}
.hw .hw-msg b{display:block;font-size:12.5px;font-weight:600;margin-bottom:2px}
.hw .hw-msg b small{font-weight:400;color:var(--cr50);font-size:11.5px;margin-left:6px}
.hw .hw-ui-l .hw-msg b small{color:var(--ink40)}
.hw .hw-msg p{font-size:14.5px;line-height:1.5;color:rgba(243,241,234,.88)}
.hw .hw-ui-l .hw-msg p{color:var(--ink80)}
.hw .hw-thread{display:flex;flex-direction:column;gap:16px;padding:18px}
.hw .hw-comp{display:flex;align-items:center;gap:10px;margin:0 18px 18px;padding:12px 12px 12px 14px;border:1px solid rgba(243,241,234,.2);font-size:14px;color:var(--cr50)}
.hw .hw-comp .hw-snd{margin-left:auto;width:28px;height:28px;border-radius:50%;background:var(--cream);color:var(--ink);display:grid;place-items:center;flex:none}
.hw .hw-comp .hw-snd svg{width:14px}
.hw .hw-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;padding:3px 8px;border:1px solid rgba(243,241,234,.2);color:var(--cr70)}
.hw .hw-ui-l .hw-chip{border-color:var(--line2);color:var(--ink60)}
.hw .hw-log{display:flex;flex-direction:column;border-left:1px solid rgba(157,196,159,.4);margin-left:14px;padding-left:14px}
.hw .hw-log span{display:flex;gap:10px;align-items:baseline;padding:5px 0;font-size:13.5px;color:rgba(243,241,234,.84)}
.hw .hw-log span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sage);flex:none;transform:translateY(-2px)}
.hw .hw-log em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--cr50);white-space:nowrap;padding-left:10px}

/* hero */
.hw .hw-hero{padding-block:clamp(56px,7vw,96px) 0;text-align:center}
.hw .hw-hero .hw-lab{margin-bottom:18px}
.hw .hw-hero p.hw-lead{max-width:60ch;margin:22px auto 0;font-size:clamp(16px,1.5vw,19px);color:var(--cr70)}
.hw .hw-hero .hw-ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.hw .hw-shot{margin-top:clamp(44px,6vw,72px);padding:clamp(18px,4vw,56px) clamp(12px,4vw,56px) 0}
.hw .hw-app{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);text-align:left;border-bottom:0;min-height:520px}
.hw .hw-side{border-right:1px solid rgba(243,241,234,.1);padding:16px 12px;display:flex;flex-direction:column;gap:4px;font-size:13.5px;color:var(--cr70)}
.hw .hw-side .hw-logo{display:flex;align-items:center;gap:8px;font-family:var(--head);font-size:18px;color:var(--cream);padding:2px 6px 14px}
.hw .hw-side .hw-logo svg{width:22px}
.hw .hw-side .hw-store{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid rgba(243,241,234,.12);margin-bottom:10px;color:var(--cream)}
.hw .hw-side .hw-store i{width:18px;height:18px;background:var(--green);font-style:normal;font-size:10px;display:grid;place-items:center}
.hw .hw-side a{padding:7px 8px;text-decoration:none}
.hw .hw-side a.hw-on{background:rgba(243,241,234,.08);color:var(--cream)}
.hw .hw-side .hw-lab{padding:14px 8px 4px;font-size:10px}
.hw .hw-side .hw-st{display:flex;align-items:center;gap:8px;padding:5px 8px;font-size:13px}
.hw .hw-side .hw-st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sage)}
.hw .hw-side .hw-st.hw-w::before{background:var(--gold)}
.hw .hw-mid{display:flex;flex-direction:column;border-right:1px solid rgba(243,241,234,.1);min-width:0}
.hw .hw-mid .hw-thread{flex:1}
.hw .hw-prev{display:flex;flex-direction:column;min-width:0;background:#0F0E0C}
.hw .hw-prev .hw-bar b{color:var(--sage);font-weight:500}
.hw .hw-prev .hw-pic{flex:1;background:#fff;overflow:hidden}
.hw .hw-prev .hw-pic img{width:100%;height:100%;object-fit:cover;object-position:0 18%}
.hw .hw-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;border-top:1px solid rgba(243,241,234,.12)}
.hw .hw-acts .hw-t{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;padding:5px 9px;border:1px solid rgba(243,241,234,.2)}
.hw .hw-acts .hw-t i{width:14px;height:14px;border-radius:50%;background:var(--green);display:grid;place-items:center}
.hw .hw-acts .hw-t i svg{width:9px;color:#fff}
.hw .hw-acts .hw-b{margin-left:auto;display:flex;gap:6px}
.hw .hw-acts .hw-b span{font-size:12.5px;font-weight:600;padding:7px 12px;background:var(--cream);color:var(--ink)}
.hw .hw-acts .hw-b span.hw-o{background:none;border:1px solid rgba(243,241,234,.3);color:var(--cream);font-weight:500}

/* the three people */
.hw .hw-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.hw .hw-pc .hw-bd{aspect-ratio:1;display:grid;place-items:center;padding:clamp(18px,2.4vw,30px)}
.hw .hw-pc .hw-bd>.hw-ui,.hw .hw-pc .hw-bd>.hw-ui-l{width:100%}
.hw .hw-pc h3{margin-top:20px;display:flex;align-items:center;gap:10px}
.hw .hw-pc h3 img{width:28px;height:28px;object-fit:cover}
.hw .hw-pc p{margin-top:8px;color:var(--ink60);max-width:40ch}
.hw .hw-who{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink60)}
.hw .hw-ui .hw-who{color:rgba(243,241,234,.5)}
.hw .hw-pr-mini{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.hw .hw-pr-mini .hw-t{font-size:16px;font-weight:600;line-height:1.3}
.hw .hw-pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 10px;color:#F3F1EA;background:#2D572F}
.hw .hw-rv{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(243,241,234,.14);font-size:13.5px;color:rgba(243,241,234,.86)}
.hw .hw-rv img{width:24px;height:24px;object-fit:cover}
.hw .hw-rv .hw-ok{margin-left:auto;color:#9DC49F;font-weight:600;font-size:12.5px}
.hw .hw-checks{display:flex;flex-direction:column;gap:6px;font-size:13px;color:rgba(243,241,234,.72)}
.hw .hw-checks span{display:flex;gap:8px;align-items:center}
.hw .hw-checks span::before{content:"";width:14px;height:14px;border-radius:50%;background:#2D572F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/9px no-repeat;flex:none}

/* the story */
.hw .hw-story{display:flex;flex-direction:column;gap:clamp(56px,7vw,96px)}
.hw .hw-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.hw .hw-step .hw-meta{display:flex;flex-direction:column;gap:14px}
.hw .hw-step .hw-time{display:flex;align-items:center;gap:12px}
.hw .hw-step .hw-time b{font-family:var(--mono);font-weight:500;font-size:13px;padding:4px 8px;background:var(--ink);color:var(--cream)}
.hw .hw-step .hw-time .hw-who img{width:26px;height:26px;object-fit:cover}
.hw .hw-step .hw-time .hw-who .hw-ari{width:26px;height:26px;background:var(--ink);display:grid;place-items:center}
.hw .hw-step .hw-time .hw-who .hw-ari svg{width:62%}
.hw .hw-step .hw-meta p{color:var(--ink60);font-size:16px;max-width:44ch}
.hw .hw-step .hw-meta ul{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.hw .hw-step .hw-meta li{padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink80)}
.hw .hw-step .hw-vis{aspect-ratio:1;display:grid;align-items:center;padding:clamp(18px,3vw,40px)}
.hw .hw-step .hw-vis>*{width:100%}

.hw .hw-step:nth-child(even) .hw-vis{order:-1}
.hw .hw-rows{display:flex;flex-direction:column}
.hw .hw-rows div{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;padding:10px 0;border-bottom:1px solid rgba(243,241,234,.09);font-size:13.5px}
.hw .hw-rows div:last-child{border-bottom:0}
.hw .hw-rows code{font-family:var(--mono);font-size:12px;color:var(--cr70);overflow-wrap:anywhere}
.hw .hw-rows .hw-ok{color:var(--sage)}
.hw .hw-pad{padding:16px 18px}

/* before and after */
.hw .hw-ba{position:relative;overflow:hidden;background:#fff;aspect-ratio:1040/900}
.hw .hw-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hw .hw-ba .hw-after{clip-path:inset(0 0 0 var(--x,50%))}
.hw .hw-ba .hw-div{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;margin-left:-1px;background:var(--green);pointer-events:none}
.hw .hw-ba .hw-div::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--green);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E");background-size:18px;background-position:center;background-repeat:no-repeat}
.hw .hw-ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.hw .hw-ba .hw-tag{position:absolute;top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;background:var(--ink);color:var(--cream);pointer-events:none}
.hw .hw-ba .hw-tag.hw-l{left:10px}.hw .hw-ba .hw-tag.hw-r{right:10px;background:var(--green)}

/* diff */
.hw .hw-diff{font-family:var(--mono);font-size:12px;line-height:1.65;border:1px solid rgba(243,241,234,.14);overflow-x:auto}
.hw .hw-diff .hw-h{padding:7px 12px;background:rgba(243,241,234,.05);border-bottom:1px solid rgba(243,241,234,.12);color:rgba(243,241,234,.55);white-space:nowrap}
.hw .hw-diff span{display:block;padding:0 12px;white-space:pre;color:rgba(243,241,234,.8)}
.hw .hw-diff .hw-a{background:rgba(157,196,159,.14);color:#CFE3CF}
.hw .hw-diff .hw-n{color:rgba(243,241,234,.45)}

/* repositories */
.hw .hw-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.hw .hw-tabs button{font:inherit;font-size:14px;padding:9px 14px;background:none;color:var(--cr70);border:1px solid var(--crl);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.hw .hw-tabs button i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.hw .hw-tabs button[aria-selected="true"]{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.hw .hw-repo{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(20px,3vw,48px);align-items:center}
.hw .hw-repo .hw-txt h3{margin-bottom:12px}
.hw .hw-repo .hw-txt p{color:var(--cr70);max-width:42ch}
.hw .hw-repo .hw-txt ul{margin:18px 0 0;padding:0;list-style:none;border-top:1px solid var(--crl)}
.hw .hw-repo .hw-txt li{padding:10px 0;border-bottom:1px solid var(--crl);font-size:14px;color:var(--cr70)}
.hw .hw-repo .hw-txt li b{color:var(--cream);font-weight:500}
.hw .hw-repo .hw-vis{padding:clamp(16px,3vw,40px);min-height:420px;display:grid;align-items:center}
.hw .hw-pane[hidden]{display:none!important}
.hw .hw-host{display:flex;flex-direction:column;gap:14px;padding:18px 20px}
.hw .hw-host .hw-top{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink60)}
.hw .hw-host .hw-top .hw-brand{font-weight:600;color:var(--c)}
.hw .hw-host h4{margin:0;font-family:var(--sans);font-size:19px;font-weight:600;line-height:1.3}
.hw .hw-host h4 span{color:var(--ink40);font-weight:400}
.hw .hw-host .hw-state{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--ink60)}
.hw .hw-host .hw-state code{font-family:var(--mono);font-size:11.5px;padding:2px 6px;background:rgba(20,19,15,.06);color:var(--ink80)}
.hw .hw-st-pill{font-size:12px;font-weight:600;padding:3px 10px;color:#fff;background:var(--c)}
.hw .hw-host .hw-tabsx{display:flex;gap:18px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink60)}
.hw .hw-host .hw-tabsx span{padding:8px 0}
.hw .hw-host .hw-tabsx span.hw-on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--c)}
.hw .hw-host .hw-files{display:flex;flex-direction:column;font-family:var(--mono);font-size:12px}
.hw .hw-host .hw-files span{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);color:var(--ink80)}
.hw .hw-host .hw-files span em{font-style:normal;color:#116329;white-space:nowrap}
.hw .hw-host .hw-foot{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);font-size:13px}
.hw .hw-host .hw-foot img{width:24px;height:24px;object-fit:cover}
.hw .hw-host .hw-foot b{margin-left:auto;font-size:12.5px;padding:6px 12px;background:var(--c);color:#fff}

/* setup */
.hw .hw-setup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.hw .hw-setup>div{padding:24px 24px 26px 0;border-right:1px solid var(--line)}
.hw .hw-setup>div+div{padding-left:24px}
.hw .hw-setup>div:last-child{border-right:0}
.hw .hw-setup .hw-n{font-family:var(--mono);font-size:12px;color:var(--ink40)}
.hw .hw-setup h3{margin:10px 0 8px}
.hw .hw-setup p{color:var(--ink60);font-size:14.5px}
.hw .hw-term{margin-top:16px;padding:12px 14px;background:var(--ink);color:var(--cream);font-family:var(--mono);font-size:12px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.hw .hw-term .hw-d{color:var(--cr50)}
.hw .hw-call{margin-top:clamp(28px,3vw,40px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px 22px;background:var(--card);border:1px solid var(--line)}
.hw .hw-call .hw-faces{display:flex}
.hw .hw-call .hw-faces img,.hw .hw-call .hw-faces span{width:36px;height:36px;object-fit:cover;border:2px solid var(--card);margin-left:-8px}
.hw .hw-call .hw-faces :first-child{margin-left:0}
.hw .hw-call .hw-faces span{background:var(--green);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600}
.hw .hw-call p{color:var(--ink80)}
.hw .hw-call p b{font-weight:600}

/* bigger jobs */
.hw .hw-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:stretch}
.hw .hw-bar70{margin-top:26px}
.hw .hw-bar70 .hw-track{display:flex;height:54px}
.hw .hw-bar70 .hw-a{flex:70;background:var(--sage);color:var(--ink);display:flex;align-items:center;padding:0 16px;font-weight:600;font-size:14px}
.hw .hw-bar70 .hw-h{flex:30;background:repeating-linear-gradient(135deg,rgba(243,241,234,.14) 0 8px,rgba(243,241,234,.05) 8px 16px);display:flex;align-items:center;padding:0 14px;font-size:13.5px;color:var(--cream)}
.hw .hw-bar70 .hw-k{display:flex;justify-content:space-between;margin-top:10px;font-size:13px;color:var(--cr50)}
.hw .hw-outline{padding:18px 20px;display:flex;flex-direction:column}
.hw .hw-outline>div:not(.hw-twob){display:grid;grid-template-columns:74px minmax(0,1fr);gap:14px;padding:11px 0;border-bottom:1px solid rgba(243,241,234,.09);font-size:14px;line-height:1.5}
.hw .hw-outline>div:nth-last-child(2){border-bottom:0}
.hw .hw-outline em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cr50);padding-top:3px}
.hw .hw-outline code{font-family:var(--mono);font-size:12px;color:var(--sage)}
.hw .hw-twob{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.hw .hw-twob span{text-align:center;padding:11px;font-size:13.5px;font-weight:600;background:var(--cream);color:var(--ink)}
.hw .hw-twob span.hw-o{background:none;border:1px solid rgba(243,241,234,.3);color:var(--cream);font-weight:500}

/* when it is not right */
.hw .hw-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.hw .hw-case .hw-bd{aspect-ratio:4/3.3;display:grid;place-items:center;padding:clamp(16px,2.2vw,28px)}
.hw .hw-case .hw-bd>*{width:100%}
.hw .hw-case h3{margin-top:18px}
.hw .hw-case p{margin-top:8px;color:var(--ink60);max-width:40ch}

/* close */
.hw .hw-close{text-align:center}
.hw .hw-close h2{max-width:18ch;margin:0 auto}
.hw .hw-close .hw-price{font-family:var(--head);font-size:clamp(48px,6vw,80px);letter-spacing:-.03em;margin-top:22px;line-height:1}
.hw .hw-close .hw-price small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cr50);margin-top:10px}
.hw .hw-close .hw-ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:28px}

@media(max-width:980px){
  .hw .hw-three,.hw .hw-cases{grid-template-columns:1fr 1fr}
  .hw .hw-setup{grid-template-columns:1fr}
  .hw .hw-setup>div{border-right:0;border-bottom:1px solid var(--line);padding-left:0!important}
}
@media(max-width:720px){
  .hw .hw-hd,.hw .hw-step,.hw .hw-step:nth-child(even),.hw .hw-repo,.hw .hw-split{grid-template-columns:1fr}
  .hw .hw-step:nth-child(even) .hw-vis{order:0}
  .hw .hw-step .hw-vis{aspect-ratio:auto}
  .hw .hw-pc .hw-bd{aspect-ratio:auto}
  .hw .hw-app{grid-template-columns:1fr;min-height:0}
  .hw .hw-prev{display:none}
  .hw .hw-three,.hw .hw-cases{grid-template-columns:1fr}
  .hw .hw-pc .hw-bd{aspect-ratio:auto}
  .hw .hw-call{grid-template-columns:1fr}
  .hw .hw-repo .hw-vis{min-height:0}
  .hw .hw-acts .hw-b{margin-left:0}
}

/* repositories */
.hw .hw-rp{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:center}
.hw .hw-rp-t p{margin-top:18px;color:var(--cr70);font-size:17px;max-width:44ch}
.hw .hw-rp-t p.hw-rp-l{font-size:14px;color:var(--cr50)}
.hw .hw-rp-v{aspect-ratio:1/1;display:grid;place-items:center}
.hw .hw-lgs{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.2vw,14px);width:100%}
.hw .hw-lg{flex:none;width:clamp(44px,5.4vw,78px);height:clamp(44px,5.4vw,78px);background:rgba(20,19,15,.62);border:1px solid rgba(243,241,234,.18);display:grid;place-items:center;color:#F3F1EA}
.hw .hw-lg>span{width:40%;display:block;color:#F3F1EA}
.hw .hw-lg svg{width:100%;height:auto;display:block;fill:currentColor}
.hw .hw-lg-ari{width:clamp(84px,10vw,136px);height:clamp(84px,10vw,136px);border-color:rgba(157,196,159,.55)}
.hw .hw-lg-ari svg{width:46%;fill:none}
/* what Ari knows */
.hw .hw-kn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid rgba(243,241,234,.5)}
.hw .hw-kn div{padding:28px 24px 30px 0;border-right:1px solid var(--crl)}
.hw .hw-kn div+div{padding-left:24px}
.hw .hw-kn div:last-child{border-right:0}
.hw .hw-kn b{display:block;white-space:nowrap;font-family:var(--head);font-weight:500;font-size:clamp(40px,5.4vw,72px);letter-spacing:-.03em;line-height:1}
.hw .hw-kn span{display:block;margin-top:12px;color:var(--cr70);font-size:15px}
.hw .hw-md{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center;margin-top:clamp(36px,4vw,56px);padding:26px 28px;border:1px solid var(--crl)}
.hw .hw-md-t p{margin-top:8px;color:var(--cr70);max-width:60ch}
.hw .hw-md-b{display:flex;gap:12px}
.hw .hw-md-b span{background:#fff;padding:14px 18px;display:grid;place-items:center}
.hw .hw-md-b img{height:42px;width:auto}
@media(max-width:720px){.hw .hw-rp,.hw .hw-md{grid-template-columns:1fr}.hw .hw-kn{grid-template-columns:1fr}.hw .hw-kn div{border-right:0;border-bottom:1px solid var(--crl);padding-left:0!important}}
.hw .hw-pt{display:grid!important;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px);align-content:center;padding:clamp(20px,3.4vw,48px)}
.hw .hw-pt-t{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(20,19,15,.62);border:1px solid rgba(243,241,234,.18);color:#F3F1EA}
.hw .hw-pt-m{width:34%;display:block}
.hw .hw-pt-m svg{width:100%;height:auto;display:block}
.hw .hw-pt-t b{font-family:var(--head);font-weight:500;font-size:clamp(18px,1.8vw,24px);letter-spacing:-.01em}
.hw .hw-pt-t em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#9DC49F}
.hw .hw-sqp{aspect-ratio:1;display:grid;align-items:center;padding:clamp(18px,3vw,36px)}
/* the ticket wall */
.hw .hw-kw{position:relative;background:#0C0D0A;color:var(--cream);overflow:hidden;min-height:clamp(640px,62vw,860px);display:flex;flex-direction:column;justify-content:space-between;padding-block:clamp(56px,6vw,88px) clamp(44px,4.4vw,72px)}
.hw #kwc{position:absolute;inset:0;width:100%;height:100%;display:block}
.hw .hw-kw-in,.hw .hw-kw-foot{position:relative;z-index:1;width:100%}
.hw .hw-kw-in{pointer-events:none}
.hw .hw-kw .hw-lab{color:var(--cr50);margin-bottom:14px}
.hw .hw-kw h2{max-width:26ch;font-size:clamp(26px,3vw,40px)}
.hw .hw-kw-foot{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.hw .hw-kw-cap{position:relative;margin:0;height:1.2em;flex:1;min-width:280px;font-family:var(--head);font-size:clamp(24px,2.8vw,38px);letter-spacing:-.02em;pointer-events:none}
.hw .hw-kw-cap span{position:absolute;left:0;bottom:0;opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s;white-space:nowrap}
.hw .hw-kw-cap span.hw-on{opacity:1;transform:none}
.hw .hw-kw-sw{display:flex;gap:6px}
.hw .hw-kw-sw button{font:inherit;font-size:13.5px;padding:8px 14px;background:none;color:var(--cr50);border:1px solid rgba(157,196,159,.25);cursor:pointer}
.hw .hw-kw-sw button[aria-selected="true"]{background:rgba(157,196,159,.16);color:var(--cream);border-color:rgba(157,196,159,.6)}
.hw .hw-kw-tip[hidden]{display:none}
.hw .hw-kw-tip{position:absolute;z-index:2;pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:8px 10px;background:rgba(12,13,10,.92);border:1px solid rgba(157,196,159,.35);font-size:12.5px;white-space:nowrap;transform:translate(14px,-50%)}
.hw .hw-kw-tip b{font-family:var(--mono);font-weight:500;font-size:11px;color:var(--sage)}
@media(max-width:720px){.hw .hw-kw-cap span{white-space:normal}.hw .hw-kw-cap{height:2.4em}}
/* dark text inside every window, whatever section it sits in */
.hw .hw-ui .hw-msg p{color:rgba(243,241,234,.88)}
.hw .hw-ui,.hw .hw-step .hw-vis>*,.hw .hw-sqp>*{min-width:0;max-width:100%}
.hw .hw-diff{overflow:hidden}
.hw .hw-diff span{overflow:hidden;text-overflow:ellipsis}
.hw .hw-outline>div:not(.hw-twob) span{min-width:0;overflow-wrap:anywhere}

/* the homepage demo, the same shape and sizes (hero.css .shc and .sh-*) */
.hw .hw-dm{position:relative;display:flex;align-items:stretch;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);text-align:left}
.hw .hw-dm-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}
.hw .hw-dm-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)}
.hw .hw-dm-sq{display:flex!important;align-items:stretch;padding:clamp(18px,2.6vw,34px)!important}
.hw .hw-dm-sq .hw-dm-l{flex:1 1 auto;border:1px solid rgba(243,241,234,.14);background:rgba(20,19,15,.5)}
.hw .hw-dm-rail{display:flex;align-items:center;gap:8px;padding-bottom:11px;margin-bottom:12px;border-bottom:1px solid rgba(243,241,234,.12)}
.hw .hw-dm-brand{font-family:var(--head);font-weight:500;font-size:15px;letter-spacing:-.035em;color:#F3F1EA}
.hw .hw-dm-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(20,19,15,.55);border:1px solid rgba(243,241,234,.22);padding:4px 10px;font-size:11.5px;color:#F3F1EA;white-space:nowrap;min-width:150px}
.hw .hw-dm-chip svg{width:10px;height:12px;flex:none}
.hw .hw-dm-cv{margin-left:auto;width:6px;height:6px;flex:none;border-right:1px solid rgba(243,241,234,.6);border-bottom:1px solid rgba(243,241,234,.6);transform:rotate(45deg) translate(-2px,-2px)}
.hw .hw-dm-acct{margin-left:auto;width:20px;height:20px;border-radius:50%;background:#F3F1EA;color:#171613;flex:none;display:grid;place-items:center;font-size:10px;font-weight:600}
.hw .hw-dm-thread{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding-bottom:13px;overflow:hidden}
.hw .hw-dm-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:13px;line-height:1.45;color:#F3F1EA}
.hw .hw-dm-said{margin:0;font-size:13px;line-height:1.5;color:rgba(243,241,234,.84);max-width:94%}
.hw .hw-dm-log{list-style:none;margin:0;padding:0 0 0 12px;border-left:2px solid rgba(127,164,127,.55);display:flex;flex-direction:column;gap:1px}
.hw .hw-dm-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)}
.hw .hw-dm-log .hw-d{width:7px;height:7px;border-radius:50%;background:#7FA47F;position:relative;top:5px}
.hw .hw-dm-log .hw-t{font-family:var(--mono);font-size:10px;color:rgba(243,241,234,.4)}
.hw .hw-dm-done{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 2px 0}
.hw .hw-dm-done span{font-family:var(--mono);font-size:10px;color:#9BC48F}
.hw .hw-dm-done .hw-dm-pr{color:rgba(243,241,234,.62)}
.hw .hw-dm-box{border:1px solid rgba(243,241,234,.18);background:rgba(20,19,15,.58);padding:13px 13px 11px;margin-top:10px}
.hw .hw-dm-box p{margin:0;min-height:2.6em}
.hw .hw-dm-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)}
.hw .hw-dm-tools{display:flex;gap:4px}
.hw .hw-dm-tools span{width:27px;height:27px;display:grid;place-items:center;color:rgba(243,241,234,.5)}
.hw .hw-dm-tools svg{width:15px;height:15px}
.hw .hw-dm-snd{width:27px;height:27px;border-radius:50%;background:#F3F1EA;display:grid;place-items:center;flex:none}
.hw .hw-dm-snd svg{width:13px;height:13px;color:#141310}
.hw .hw-dm-r{position:relative;z-index:2;flex:1 1 0;min-width:0;display:flex;flex-direction:column;padding:clamp(14px,1.8vw,24px)}
.hw .hw-dm-ph{display:flex;align-items:center;gap:10px;padding:0 0 9px}
.hw .hw-dm-tabs{display:inline-flex;background:rgba(243,241,234,.1);flex:none}
.hw .hw-dm-tabs b{font-weight:500;font-size:10.5px;padding:4px 10px;color:rgba(243,241,234,.6)}
.hw .hw-dm-tabs b.hw-on{background:#2D572F;color:#fff}
.hw .hw-dm-url{font-family:var(--mono);font-size:10.5px;color:rgba(243,241,234,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw .hw-dm-pic{flex:1;min-height:0;background:#fff;overflow:hidden;box-shadow:0 20px 50px -30px rgba(0,0,0,.6)}
.hw .hw-dm-pic img{width:100%;height:100%;object-fit:cover;object-position:0 18%}
.hw .hw-cm b{display:block;font-size:12.5px;font-weight:600;margin-bottom:3px;color:#F3F1EA}
.hw .hw-cm b small{font-weight:400;color:var(--cr50);font-size:11.5px;margin-left:6px}
.hw .hw-cm p{font-size:14px;line-height:1.5;color:rgba(243,241,234,.86)}
.hw .hw-shot{margin-top:clamp(44px,6vw,72px);padding:0!important}
@media(max-width:900px){.hw .hw-dm{flex-direction:column;min-height:0}.hw .hw-dm-l{flex-basis:auto;border-right:0;border-bottom:1px solid rgba(243,241,234,.12)}.hw .hw-dm-pic{aspect-ratio:1040/900;flex:none}}
.hw .hw-btn{transition:background .18s,border-color .18s,color .18s}
.hw .hw-btn-g:hover{background:#24451F}
.hw .hw-btn-o:hover{border-color:var(--cream);background:rgba(243,241,234,.06)}
.hw .hw-btn-k:hover{background:#FFFFFF}
.hw .hw-dm-pic img{object-fit:contain!important;object-position:center top!important}
/* the hero fills the first screen exactly: text at the top, the visual takes the rest */
@media(min-width:901px) and (min-height:620px){
.hw .hw-herov{height:calc(100svh - var(--navh,0px));min-height:0;display:flex;flex-direction:column}
.hw .hw-herov>.hw-wrap:first-child{flex:none;padding-block:clamp(28px,5vh,72px) 0}
.hw .hw-herov>.hw-wrap:last-child{flex:1;min-height:0;display:flex;flex-direction:column;width:100%}
.hw .hw-herov .hw-shot{flex:1;min-height:0;display:flex;flex-direction:column;margin-top:clamp(24px,4vh,48px)}
.hw .hw-herov .hw-shot>*{flex:1;min-height:0}
.hw .hw-herov .hw-dm{min-height:0}
.hw .hw-herov .hw-dm-box p{min-height:0}
.hw .hw-herov .hw-dm-thread{justify-content:center}
.hw .hw-herov .hw-dm-pic img{object-position:center center!important}
.hw .hw-herov .hw-map{align-content:center;padding-block:clamp(16px,3vh,40px)}
}
@media(max-width:720px){.hw .hw-sqp{aspect-ratio:auto!important}.hw .hw-outline>div:not(.hw-twob){grid-template-columns:1fr!important;gap:2px!important}.hw .hw-bar em{display:none}}

/* hero: the preview keeps its own proportions, nothing cropped */
@media(min-width:901px){
.hw .hw-herov{height:auto!important;min-height:calc(100svh - var(--navh,0px));justify-content:center}
.hw .hw-herov>.hw-wrap:last-child{flex:none!important}
.hw .hw-herov .hw-shot{flex:none!important}
.hw .hw-herov .hw-shot>*{flex:none!important}
.hw .hw-herov .hw-dm-pic{flex:none!important;aspect-ratio:2000/1149}
.hw .hw-herov .hw-dm{width:min(100%,calc((100svh - var(--navh,0px) - 520px) * 1.74 + 420px));margin:0 auto}
.hw .hw-herov .hw-dm-pic img{object-fit:contain!important;object-position:center!important}
}
@media(prefers-reduced-motion:reduce){.hw *{scroll-behavior:auto!important;transition:none!important}}

.hw{background:var(--paper);color:var(--ink);font-family:var(--sans)}
body.sharp .hw-snd,body.sharp .hw-dm-snd,body.sharp .hw-dm-acct,body.sharp .hw-dm-log .hw-d,body.sharp .hw-log span::before,body.sharp .hw-ba .hw-div::after,body.sharp .hw-bar i,body.sharp .hw-checks span::before{border-radius:50%!important}


/* ==================== security (sec/), 2026-09-23 ==================== */

.sc{
  
  --paper:#F6F4EE; --card:#FBFAF6; --ink:#14130F; --ink80:rgba(20,19,15,.8); --ink60:rgba(20,19,15,.6); --ink40:rgba(20,19,15,.42);
  --line:rgba(20,19,15,.12); --line2:rgba(20,19,15,.22);
  --dark:#14130F; --cream:#F3F1EA; --cr70:rgba(243,241,234,.72); --cr50:rgba(243,241,234,.5); --crl:rgba(243,241,234,.14);
  --sage:#9DC49F; --green:#2D572F; --gold:#CF9536;
  --head:"Golos",Inter,system-ui,sans-serif; --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1200px; --gut:clamp(16px,4vw,40px);
}
.sc *{box-sizing:border-box}
.sc{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
.sc img{max-width:100%;display:block}
.sc a{color:inherit}
.sc .sc-wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.sc h1,.sc h2,.sc h3{font-family:var(--head);font-weight:500;letter-spacing:-.02em;text-wrap:balance;margin:0}
.sc h1{font-size:clamp(36px,5.4vw,68px);line-height:1.02}
.sc h2{font-size:clamp(28px,3.6vw,46px);line-height:1.06}
.sc h3{font-size:clamp(19px,1.7vw,23px);line-height:1.2;letter-spacing:-.01em}
.sc p{margin:0}
.sc .sc-lab{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink40)}
.sc .sc-sec{padding-block:clamp(72px,9vw,128px)}
.sc .sc-dark{background:var(--dark);color:var(--cream)}
.sc .sc-dark .sc-lab{color:var(--cr50)}
.sc .sc-hd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:24px 48px;align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.sc .sc-hd p{font-size:17px;color:var(--ink60);max-width:52ch}
.sc .sc-dark .sc-hd p{color:var(--cr70)}
.sc .sc-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;font-size:15px;font-weight:500;text-decoration:none;border:1px solid transparent}
.sc .sc-btn-g{background:var(--green);color:#fff}
.sc .sc-btn-o{border-color:var(--crl);color:var(--cream)}
.sc .sc-btn-k{background:var(--cream);color:var(--ink)}
.sc .sc-btn:focus-visible,.sc button:focus-visible,.sc input:focus-visible{outline:2px solid var(--sage);outline-offset:3px}

/* grounds: the three the site uses (One light, Silk, Dot field), ink with sage light */
.sc .sc-bd{position:relative;overflow:hidden;isolation:isolate;background:#14130F}
.sc .sc-bd>*{position:relative;z-index:1}
.sc .sc-bd-light{background:radial-gradient(62% 58% at var(--lx,12%) var(--ly,0%),rgba(157,196,159,.36) 0%,rgba(45,87,47,.22) 34%,rgba(45,87,47,0) 70%),#14130F}
.sc .sc-bd-light2{--lx:88%;background:radial-gradient(62% 58% at var(--lx,12%) var(--ly,0%),rgba(157,196,159,.36) 0%,rgba(45,87,47,.22) 34%,rgba(45,87,47,0) 70%),#14130F}
.sc .sc-bd-silk::before,.sc .sc-bd-silk::after{content:"";position:absolute;inset:-16%;pointer-events:none;z-index:0}
.sc .sc-bd-silk::before{filter:blur(18px);animation:scdrift 60s ease-in-out infinite alternate;background:repeating-linear-gradient(100deg,transparent 0 46px,rgba(157,196,159,.12) 46px 84px,transparent 84px 150px)}
.sc .sc-bd-silk::after{filter:blur(24px);animation:scdrift 80s ease-in-out infinite alternate-reverse;background:repeating-linear-gradient(78deg,transparent 0 70px,rgba(45,87,47,.34) 70px 128px,transparent 128px 220px)}
@keyframes scdrift{from{transform:translate3d(-3%,0,0)}to{transform:translate3d(3%,0,0)}}
.sc .sc-bd-dots{--lx:86%;--ly:10%}
.sc .sc-bd-dots::before,.sc .sc-bd-dots::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0}
.sc .sc-bd-dots::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 var(--lx) var(--ly),#000 0%,rgba(0,0,0,.4) 38%,transparent 74%);mask-image:radial-gradient(60% 72% at var(--lx) var(--ly),#000 0%,rgba(0,0,0,.4) 38%,transparent 74%)}
.sc .sc-bd-dots::after{background:radial-gradient(50% 55% at var(--lx) var(--ly),rgba(157,196,159,.2) 0%,rgba(45,87,47,.12) 45%,transparent 76%)}

/* app windows */
.sc .sc-ui{background:#1B1A16;color:var(--cream);border:1px solid rgba(243,241,234,.16);box-shadow:0 30px 70px -30px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.2);font-size:14px}
.sc .sc-ui-l{background:#fff;color:var(--ink);border:1px solid rgba(20,19,15,.12);box-shadow:0 30px 70px -34px rgba(20,19,15,.5),0 2px 6px rgba(20,19,15,.08);font-size:14px}
.sc .sc-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid rgba(243,241,234,.1);font-family:var(--mono);font-size:11.5px;color:var(--cr50);white-space:nowrap;overflow:hidden}
.sc .sc-ui-l .sc-bar{border-bottom-color:var(--line);color:var(--ink40);background:#F8F7F3}
.sc .sc-bar i{width:8px;height:8px;border-radius:50%;background:rgba(243,241,234,.2);flex:none}
.sc .sc-ui-l .sc-bar i{background:rgba(20,19,15,.14)}
.sc .sc-bar span{margin-left:8px;overflow:hidden;text-overflow:ellipsis}
.sc .sc-bar em{margin-left:auto;font-style:normal;padding-left:12px}

/* chat pieces */
.sc .sc-msg{display:flex;gap:12px;align-items:flex-start}
.sc .sc-av{width:30px;height:30px;flex:none;overflow:hidden;background:#2A2924;display:grid;place-items:center;font-size:12px;font-weight:600}
.sc .sc-av img{width:100%;height:100%;object-fit:cover}
.sc .sc-av-ari{background:#0D0C0A;border:1px solid rgba(243,241,234,.18)}
.sc .sc-av-ari svg{width:62%}
.sc .sc-msg b{display:block;font-size:12.5px;font-weight:600;margin-bottom:2px}
.sc .sc-msg b small{font-weight:400;color:var(--cr50);font-size:11.5px;margin-left:6px}
.sc .sc-ui-l .sc-msg b small{color:var(--ink40)}
.sc .sc-msg p{font-size:14.5px;line-height:1.5;color:rgba(243,241,234,.88)}
.sc .sc-ui-l .sc-msg p{color:var(--ink80)}
.sc .sc-thread{display:flex;flex-direction:column;gap:16px;padding:18px}
.sc .sc-comp{display:flex;align-items:center;gap:10px;margin:0 18px 18px;padding:12px 12px 12px 14px;border:1px solid rgba(243,241,234,.2);font-size:14px;color:var(--cr50)}
.sc .sc-comp .sc-snd{margin-left:auto;width:28px;height:28px;border-radius:50%;background:var(--cream);color:var(--ink);display:grid;place-items:center;flex:none}
.sc .sc-comp .sc-snd svg{width:14px}
.sc .sc-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;padding:3px 8px;border:1px solid rgba(243,241,234,.2);color:var(--cr70)}
.sc .sc-ui-l .sc-chip{border-color:var(--line2);color:var(--ink60)}
.sc .sc-log{display:flex;flex-direction:column;border-left:1px solid rgba(157,196,159,.4);margin-left:14px;padding-left:14px}
.sc .sc-log span{display:flex;gap:10px;align-items:baseline;padding:5px 0;font-size:13.5px;color:rgba(243,241,234,.84)}
.sc .sc-log span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sage);flex:none;transform:translateY(-2px)}
.sc .sc-log em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--cr50);white-space:nowrap;padding-left:10px}

/* hero */
.sc .sc-hero{padding-block:clamp(56px,7vw,96px) 0;text-align:center}
.sc .sc-hero .sc-lab{margin-bottom:18px}
.sc .sc-hero p.sc-lead{max-width:60ch;margin:22px auto 0;font-size:clamp(16px,1.5vw,19px);color:var(--cr70)}
.sc .sc-hero .sc-ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.sc .sc-shot{margin-top:clamp(44px,6vw,72px);padding:clamp(18px,4vw,56px) clamp(12px,4vw,56px) 0}
.sc .sc-app{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);text-align:left;border-bottom:0;min-height:520px}
.sc .sc-side{border-right:1px solid rgba(243,241,234,.1);padding:16px 12px;display:flex;flex-direction:column;gap:4px;font-size:13.5px;color:var(--cr70)}
.sc .sc-side .sc-logo{display:flex;align-items:center;gap:8px;font-family:var(--head);font-size:18px;color:var(--cream);padding:2px 6px 14px}
.sc .sc-side .sc-logo svg{width:22px}
.sc .sc-side .sc-store{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid rgba(243,241,234,.12);margin-bottom:10px;color:var(--cream)}
.sc .sc-side .sc-store i{width:18px;height:18px;background:var(--green);font-style:normal;font-size:10px;display:grid;place-items:center}
.sc .sc-side a{padding:7px 8px;text-decoration:none}
.sc .sc-side a.sc-on{background:rgba(243,241,234,.08);color:var(--cream)}
.sc .sc-side .sc-lab{padding:14px 8px 4px;font-size:10px}
.sc .sc-side .sc-st{display:flex;align-items:center;gap:8px;padding:5px 8px;font-size:13px}
.sc .sc-side .sc-st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sage)}
.sc .sc-side .sc-st.sc-w::before{background:var(--gold)}
.sc .sc-mid{display:flex;flex-direction:column;border-right:1px solid rgba(243,241,234,.1);min-width:0}
.sc .sc-mid .sc-thread{flex:1}
.sc .sc-prev{display:flex;flex-direction:column;min-width:0;background:#0F0E0C}
.sc .sc-prev .sc-bar b{color:var(--sage);font-weight:500}
.sc .sc-prev .sc-pic{flex:1;background:#fff;overflow:hidden}
.sc .sc-prev .sc-pic img{width:100%;height:100%;object-fit:cover;object-position:0 18%}
.sc .sc-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;border-top:1px solid rgba(243,241,234,.12)}
.sc .sc-acts .sc-t{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;padding:5px 9px;border:1px solid rgba(243,241,234,.2)}
.sc .sc-acts .sc-t i{width:14px;height:14px;border-radius:50%;background:var(--green);display:grid;place-items:center}
.sc .sc-acts .sc-t i svg{width:9px;color:#fff}
.sc .sc-acts .sc-b{margin-left:auto;display:flex;gap:6px}
.sc .sc-acts .sc-b span{font-size:12.5px;font-weight:600;padding:7px 12px;background:var(--cream);color:var(--ink)}
.sc .sc-acts .sc-b span.sc-o{background:none;border:1px solid rgba(243,241,234,.3);color:var(--cream);font-weight:500}

/* the three people */
.sc .sc-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.sc .sc-pc .sc-bd{aspect-ratio:1;display:grid;place-items:center;padding:clamp(18px,2.4vw,30px)}
.sc .sc-pc .sc-bd>.sc-ui,.sc .sc-pc .sc-bd>.sc-ui-l{width:100%}
.sc .sc-pc h3{margin-top:20px;display:flex;align-items:center;gap:10px}
.sc .sc-pc h3 img{width:28px;height:28px;object-fit:cover}
.sc .sc-pc p{margin-top:8px;color:var(--ink60);max-width:40ch}
.sc .sc-who{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink60)}
.sc .sc-ui .sc-who{color:rgba(243,241,234,.5)}
.sc .sc-pr-mini{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.sc .sc-pr-mini .sc-t{font-size:16px;font-weight:600;line-height:1.3}
.sc .sc-pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 10px;color:#F3F1EA;background:#2D572F}
.sc .sc-rv{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(243,241,234,.14);font-size:13.5px;color:rgba(243,241,234,.86)}
.sc .sc-rv img{width:24px;height:24px;object-fit:cover}
.sc .sc-rv .sc-ok{margin-left:auto;color:#9DC49F;font-weight:600;font-size:12.5px}
.sc .sc-checks{display:flex;flex-direction:column;gap:6px;font-size:13px;color:rgba(243,241,234,.72)}
.sc .sc-checks span{display:flex;gap:8px;align-items:center}
.sc .sc-checks span::before{content:"";width:14px;height:14px;border-radius:50%;background:#2D572F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/9px no-repeat;flex:none}

/* the story */
.sc .sc-story{display:flex;flex-direction:column;gap:clamp(56px,7vw,96px)}
.sc .sc-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.sc .sc-step .sc-meta{display:flex;flex-direction:column;gap:14px}
.sc .sc-step .sc-time{display:flex;align-items:center;gap:12px}
.sc .sc-step .sc-time b{font-family:var(--mono);font-weight:500;font-size:13px;padding:4px 8px;background:var(--ink);color:var(--cream)}
.sc .sc-step .sc-time .sc-who img{width:26px;height:26px;object-fit:cover}
.sc .sc-step .sc-time .sc-who .sc-ari{width:26px;height:26px;background:var(--ink);display:grid;place-items:center}
.sc .sc-step .sc-time .sc-who .sc-ari svg{width:62%}
.sc .sc-step .sc-meta p{color:var(--ink60);font-size:16px;max-width:44ch}
.sc .sc-step .sc-meta ul{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.sc .sc-step .sc-meta li{padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink80)}
.sc .sc-step .sc-vis{aspect-ratio:1;display:grid;align-items:center;padding:clamp(18px,3vw,40px)}
.sc .sc-step .sc-vis>*{width:100%}

.sc .sc-step:nth-child(even) .sc-vis{order:-1}
.sc .sc-rows{display:flex;flex-direction:column}
.sc .sc-rows div{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;padding:10px 0;border-bottom:1px solid rgba(243,241,234,.09);font-size:13.5px}
.sc .sc-rows div:last-child{border-bottom:0}
.sc .sc-rows code{font-family:var(--mono);font-size:12px;color:var(--cr70);overflow-wrap:anywhere}
.sc .sc-rows .sc-ok{color:var(--sage)}
.sc .sc-pad{padding:16px 18px}

/* before and after */
.sc .sc-ba{position:relative;overflow:hidden;background:#fff;aspect-ratio:1040/900}
.sc .sc-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc .sc-ba .sc-after{clip-path:inset(0 0 0 var(--x,50%))}
.sc .sc-ba .sc-div{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;margin-left:-1px;background:var(--green);pointer-events:none}
.sc .sc-ba .sc-div::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--green);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E");background-size:18px;background-position:center;background-repeat:no-repeat}
.sc .sc-ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.sc .sc-ba .sc-tag{position:absolute;top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;background:var(--ink);color:var(--cream);pointer-events:none}
.sc .sc-ba .sc-tag.sc-l{left:10px}.sc .sc-ba .sc-tag.sc-r{right:10px;background:var(--green)}

/* diff */
.sc .sc-diff{font-family:var(--mono);font-size:12px;line-height:1.65;border:1px solid rgba(243,241,234,.14);overflow-x:auto}
.sc .sc-diff .sc-h{padding:7px 12px;background:rgba(243,241,234,.05);border-bottom:1px solid rgba(243,241,234,.12);color:rgba(243,241,234,.55);white-space:nowrap}
.sc .sc-diff span{display:block;padding:0 12px;white-space:pre;color:rgba(243,241,234,.8)}
.sc .sc-diff .sc-a{background:rgba(157,196,159,.14);color:#CFE3CF}
.sc .sc-diff .sc-n{color:rgba(243,241,234,.45)}

/* repositories */
.sc .sc-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.sc .sc-tabs button{font:inherit;font-size:14px;padding:9px 14px;background:none;color:var(--cr70);border:1px solid var(--crl);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.sc .sc-tabs button i{width:9px;height:9px;border-radius:50%;background:var(--c)}
.sc .sc-tabs button[aria-selected="true"]{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.sc .sc-repo{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(20px,3vw,48px);align-items:center}
.sc .sc-repo .sc-txt h3{margin-bottom:12px}
.sc .sc-repo .sc-txt p{color:var(--cr70);max-width:42ch}
.sc .sc-repo .sc-txt ul{margin:18px 0 0;padding:0;list-style:none;border-top:1px solid var(--crl)}
.sc .sc-repo .sc-txt li{padding:10px 0;border-bottom:1px solid var(--crl);font-size:14px;color:var(--cr70)}
.sc .sc-repo .sc-txt li b{color:var(--cream);font-weight:500}
.sc .sc-repo .sc-vis{padding:clamp(16px,3vw,40px);min-height:420px;display:grid;align-items:center}
.sc .sc-pane[hidden]{display:none!important}
.sc .sc-host{display:flex;flex-direction:column;gap:14px;padding:18px 20px}
.sc .sc-host .sc-top{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink60)}
.sc .sc-host .sc-top .sc-brand{font-weight:600;color:var(--c)}
.sc .sc-host h4{margin:0;font-family:var(--sans);font-size:19px;font-weight:600;line-height:1.3}
.sc .sc-host h4 span{color:var(--ink40);font-weight:400}
.sc .sc-host .sc-state{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--ink60)}
.sc .sc-host .sc-state code{font-family:var(--mono);font-size:11.5px;padding:2px 6px;background:rgba(20,19,15,.06);color:var(--ink80)}
.sc .sc-st-pill{font-size:12px;font-weight:600;padding:3px 10px;color:#fff;background:var(--c)}
.sc .sc-host .sc-tabsx{display:flex;gap:18px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink60)}
.sc .sc-host .sc-tabsx span{padding:8px 0}
.sc .sc-host .sc-tabsx span.sc-on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--c)}
.sc .sc-host .sc-files{display:flex;flex-direction:column;font-family:var(--mono);font-size:12px}
.sc .sc-host .sc-files span{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);color:var(--ink80)}
.sc .sc-host .sc-files span em{font-style:normal;color:#116329;white-space:nowrap}
.sc .sc-host .sc-foot{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);font-size:13px}
.sc .sc-host .sc-foot img{width:24px;height:24px;object-fit:cover}
.sc .sc-host .sc-foot b{margin-left:auto;font-size:12.5px;padding:6px 12px;background:var(--c);color:#fff}

/* setup */
.sc .sc-setup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.sc .sc-setup>div{padding:24px 24px 26px 0;border-right:1px solid var(--line)}
.sc .sc-setup>div+div{padding-left:24px}
.sc .sc-setup>div:last-child{border-right:0}
.sc .sc-setup .sc-n{font-family:var(--mono);font-size:12px;color:var(--ink40)}
.sc .sc-setup h3{margin:10px 0 8px}
.sc .sc-setup p{color:var(--ink60);font-size:14.5px}
.sc .sc-term{margin-top:16px;padding:12px 14px;background:var(--ink);color:var(--cream);font-family:var(--mono);font-size:12px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.sc .sc-term .sc-d{color:var(--cr50)}
.sc .sc-call{margin-top:clamp(28px,3vw,40px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:18px 22px;background:var(--card);border:1px solid var(--line)}
.sc .sc-call .sc-faces{display:flex}
.sc .sc-call .sc-faces img,.sc .sc-call .sc-faces span{width:36px;height:36px;object-fit:cover;border:2px solid var(--card);margin-left:-8px}
.sc .sc-call .sc-faces :first-child{margin-left:0}
.sc .sc-call .sc-faces span{background:var(--green);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600}
.sc .sc-call p{color:var(--ink80)}
.sc .sc-call p b{font-weight:600}

/* bigger jobs */
.sc .sc-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:stretch}
.sc .sc-bar70{margin-top:26px}
.sc .sc-bar70 .sc-track{display:flex;height:54px}
.sc .sc-bar70 .sc-a{flex:70;background:var(--sage);color:var(--ink);display:flex;align-items:center;padding:0 16px;font-weight:600;font-size:14px}
.sc .sc-bar70 .sc-h{flex:30;background:repeating-linear-gradient(135deg,rgba(243,241,234,.14) 0 8px,rgba(243,241,234,.05) 8px 16px);display:flex;align-items:center;padding:0 14px;font-size:13.5px;color:var(--cream)}
.sc .sc-bar70 .sc-k{display:flex;justify-content:space-between;margin-top:10px;font-size:13px;color:var(--cr50)}
.sc .sc-outline{padding:18px 20px;display:flex;flex-direction:column}
.sc .sc-outline>div:not(.sc-twob){display:grid;grid-template-columns:74px minmax(0,1fr);gap:14px;padding:11px 0;border-bottom:1px solid rgba(243,241,234,.09);font-size:14px;line-height:1.5}
.sc .sc-outline>div:nth-last-child(2){border-bottom:0}
.sc .sc-outline em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cr50);padding-top:3px}
.sc .sc-outline code{font-family:var(--mono);font-size:12px;color:var(--sage)}
.sc .sc-twob{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.sc .sc-twob span{text-align:center;padding:11px;font-size:13.5px;font-weight:600;background:var(--cream);color:var(--ink)}
.sc .sc-twob span.sc-o{background:none;border:1px solid rgba(243,241,234,.3);color:var(--cream);font-weight:500}

/* when it is not right */
.sc .sc-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.sc .sc-case .sc-bd{aspect-ratio:4/3.3;display:grid;place-items:center;padding:clamp(16px,2.2vw,28px)}
.sc .sc-case .sc-bd>*{width:100%}
.sc .sc-case h3{margin-top:18px}
.sc .sc-case p{margin-top:8px;color:var(--ink60);max-width:40ch}

/* close */
.sc .sc-close{text-align:center}
.sc .sc-close h2{max-width:18ch;margin:0 auto}
.sc .sc-close .sc-price{font-family:var(--head);font-size:clamp(48px,6vw,80px);letter-spacing:-.03em;margin-top:22px;line-height:1}
.sc .sc-close .sc-price small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cr50);margin-top:10px}
.sc .sc-close .sc-ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:28px}

@media(max-width:980px){
  .sc .sc-three,.sc .sc-cases{grid-template-columns:1fr 1fr}
  .sc .sc-setup{grid-template-columns:1fr}
  .sc .sc-setup>div{border-right:0;border-bottom:1px solid var(--line);padding-left:0!important}
}
@media(max-width:720px){
  .sc .sc-hd,.sc .sc-step,.sc .sc-step:nth-child(even),.sc .sc-repo,.sc .sc-split{grid-template-columns:1fr}
  .sc .sc-step:nth-child(even) .sc-vis{order:0}
  .sc .sc-step .sc-vis{aspect-ratio:auto}
  .sc .sc-pc .sc-bd{aspect-ratio:auto}
  .sc .sc-app{grid-template-columns:1fr;min-height:0}
  .sc .sc-prev{display:none}
  .sc .sc-three,.sc .sc-cases{grid-template-columns:1fr}
  .sc .sc-pc .sc-bd{aspect-ratio:auto}
  .sc .sc-call{grid-template-columns:1fr}
  .sc .sc-repo .sc-vis{min-height:0}
  .sc .sc-acts .sc-b{margin-left:0}
}

/* repositories */
.sc .sc-rp{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:center}
.sc .sc-rp-t p{margin-top:18px;color:var(--cr70);font-size:17px;max-width:44ch}
.sc .sc-rp-t p.sc-rp-l{font-size:14px;color:var(--cr50)}
.sc .sc-rp-v{aspect-ratio:1/1;display:grid;place-items:center}
.sc .sc-lgs{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.2vw,14px);width:100%}
.sc .sc-lg{flex:none;width:clamp(44px,5.4vw,78px);height:clamp(44px,5.4vw,78px);background:rgba(20,19,15,.62);border:1px solid rgba(243,241,234,.18);display:grid;place-items:center;color:#F3F1EA}
.sc .sc-lg>span{width:40%;display:block;color:#F3F1EA}
.sc .sc-lg svg{width:100%;height:auto;display:block;fill:currentColor}
.sc .sc-lg-ari{width:clamp(84px,10vw,136px);height:clamp(84px,10vw,136px);border-color:rgba(157,196,159,.55)}
.sc .sc-lg-ari svg{width:46%;fill:none}
/* what Ari knows */
.sc .sc-kn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid rgba(243,241,234,.5)}
.sc .sc-kn div{padding:28px 24px 30px 0;border-right:1px solid var(--crl)}
.sc .sc-kn div+div{padding-left:24px}
.sc .sc-kn div:last-child{border-right:0}
.sc .sc-kn b{display:block;white-space:nowrap;font-family:var(--head);font-weight:500;font-size:clamp(40px,5.4vw,72px);letter-spacing:-.03em;line-height:1}
.sc .sc-kn span{display:block;margin-top:12px;color:var(--cr70);font-size:15px}
.sc .sc-md{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center;margin-top:clamp(36px,4vw,56px);padding:26px 28px;border:1px solid var(--crl)}
.sc .sc-md-t p{margin-top:8px;color:var(--cr70);max-width:60ch}
.sc .sc-md-b{display:flex;gap:12px}
.sc .sc-md-b span{background:#fff;padding:14px 18px;display:grid;place-items:center}
.sc .sc-md-b img{height:42px;width:auto}
@media(max-width:720px){.sc .sc-rp,.sc .sc-md{grid-template-columns:1fr}.sc .sc-kn{grid-template-columns:1fr}.sc .sc-kn div{border-right:0;border-bottom:1px solid var(--crl);padding-left:0!important}}
.sc .sc-pt{display:grid!important;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,20px);align-content:center;padding:clamp(20px,3.4vw,48px)}
.sc .sc-pt-t{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(20,19,15,.62);border:1px solid rgba(243,241,234,.18);color:#F3F1EA}
.sc .sc-pt-m{width:34%;display:block}
.sc .sc-pt-m svg{width:100%;height:auto;display:block}
.sc .sc-pt-t b{font-family:var(--head);font-weight:500;font-size:clamp(18px,1.8vw,24px);letter-spacing:-.01em}
.sc .sc-pt-t em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#9DC49F}
.sc .sc-sqp{aspect-ratio:1;display:grid;align-items:center;padding:clamp(18px,3vw,36px)}
/* the ticket wall */
.sc .sc-kw{position:relative;background:#0C0D0A;color:var(--cream);overflow:hidden;min-height:clamp(640px,62vw,860px);display:flex;flex-direction:column;justify-content:space-between;padding-block:clamp(56px,6vw,88px) clamp(44px,4.4vw,72px)}
.sc #kwc{position:absolute;inset:0;width:100%;height:100%;display:block}
.sc .sc-kw-in,.sc .sc-kw-foot{position:relative;z-index:1;width:100%}
.sc .sc-kw-in{pointer-events:none}
.sc .sc-kw .sc-lab{color:var(--cr50);margin-bottom:14px}
.sc .sc-kw h2{max-width:26ch;font-size:clamp(26px,3vw,40px)}
.sc .sc-kw-foot{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.sc .sc-kw-cap{position:relative;margin:0;height:1.2em;flex:1;min-width:280px;font-family:var(--head);font-size:clamp(24px,2.8vw,38px);letter-spacing:-.02em;pointer-events:none}
.sc .sc-kw-cap span{position:absolute;left:0;bottom:0;opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s;white-space:nowrap}
.sc .sc-kw-cap span.sc-on{opacity:1;transform:none}
.sc .sc-kw-sw{display:flex;gap:6px}
.sc .sc-kw-sw button{font:inherit;font-size:13.5px;padding:8px 14px;background:none;color:var(--cr50);border:1px solid rgba(157,196,159,.25);cursor:pointer}
.sc .sc-kw-sw button[aria-selected="true"]{background:rgba(157,196,159,.16);color:var(--cream);border-color:rgba(157,196,159,.6)}
.sc .sc-kw-tip[hidden]{display:none}
.sc .sc-kw-tip{position:absolute;z-index:2;pointer-events:none;display:flex;flex-direction:column;gap:2px;padding:8px 10px;background:rgba(12,13,10,.92);border:1px solid rgba(157,196,159,.35);font-size:12.5px;white-space:nowrap;transform:translate(14px,-50%)}
.sc .sc-kw-tip b{font-family:var(--mono);font-weight:500;font-size:11px;color:var(--sage)}
@media(max-width:720px){.sc .sc-kw-cap span{white-space:normal}.sc .sc-kw-cap{height:2.4em}}
/* dark text inside every window, whatever section it sits in */
.sc .sc-ui .sc-msg p{color:rgba(243,241,234,.88)}
.sc .sc-ui,.sc .sc-step .sc-vis>*,.sc .sc-sqp>*{min-width:0;max-width:100%}
.sc .sc-diff{overflow:hidden}
.sc .sc-diff span{overflow:hidden;text-overflow:ellipsis}
.sc .sc-outline>div:not(.sc-twob) span{min-width:0;overflow-wrap:anywhere}

/* the homepage demo, the same shape and sizes (hero.css .shc and .sh-*) */
.sc .sc-dm{position:relative;display:flex;align-items:stretch;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);text-align:left}
.sc .sc-dm-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}
.sc .sc-dm-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)}
.sc .sc-dm-sq{display:flex!important;align-items:stretch;padding:clamp(18px,2.6vw,34px)!important}
.sc .sc-dm-sq .sc-dm-l{flex:1 1 auto;border:1px solid rgba(243,241,234,.14);background:rgba(20,19,15,.5)}
.sc .sc-dm-rail{display:flex;align-items:center;gap:8px;padding-bottom:11px;margin-bottom:12px;border-bottom:1px solid rgba(243,241,234,.12)}
.sc .sc-dm-brand{font-family:var(--head);font-weight:500;font-size:15px;letter-spacing:-.035em;color:#F3F1EA}
.sc .sc-dm-chip{display:inline-flex;align-items:center;gap:7px;background:rgba(20,19,15,.55);border:1px solid rgba(243,241,234,.22);padding:4px 10px;font-size:11.5px;color:#F3F1EA;white-space:nowrap;min-width:150px}
.sc .sc-dm-chip svg{width:10px;height:12px;flex:none}
.sc .sc-dm-cv{margin-left:auto;width:6px;height:6px;flex:none;border-right:1px solid rgba(243,241,234,.6);border-bottom:1px solid rgba(243,241,234,.6);transform:rotate(45deg) translate(-2px,-2px)}
.sc .sc-dm-acct{margin-left:auto;width:20px;height:20px;border-radius:50%;background:#F3F1EA;color:#171613;flex:none;display:grid;place-items:center;font-size:10px;font-weight:600}
.sc .sc-dm-thread{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding-bottom:13px;overflow:hidden}
.sc .sc-dm-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:13px;line-height:1.45;color:#F3F1EA}
.sc .sc-dm-said{margin:0;font-size:13px;line-height:1.5;color:rgba(243,241,234,.84);max-width:94%}
.sc .sc-dm-log{list-style:none;margin:0;padding:0 0 0 12px;border-left:2px solid rgba(127,164,127,.55);display:flex;flex-direction:column;gap:1px}
.sc .sc-dm-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)}
.sc .sc-dm-log .sc-d{width:7px;height:7px;border-radius:50%;background:#7FA47F;position:relative;top:5px}
.sc .sc-dm-log .sc-t{font-family:var(--mono);font-size:10px;color:rgba(243,241,234,.4)}
.sc .sc-dm-done{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 2px 0}
.sc .sc-dm-done span{font-family:var(--mono);font-size:10px;color:#9BC48F}
.sc .sc-dm-done .sc-dm-pr{color:rgba(243,241,234,.62)}
.sc .sc-dm-box{border:1px solid rgba(243,241,234,.18);background:rgba(20,19,15,.58);padding:13px 13px 11px;margin-top:10px}
.sc .sc-dm-box p{margin:0;min-height:2.6em}
.sc .sc-dm-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)}
.sc .sc-dm-tools{display:flex;gap:4px}
.sc .sc-dm-tools span{width:27px;height:27px;display:grid;place-items:center;color:rgba(243,241,234,.5)}
.sc .sc-dm-tools svg{width:15px;height:15px}
.sc .sc-dm-snd{width:27px;height:27px;border-radius:50%;background:#F3F1EA;display:grid;place-items:center;flex:none}
.sc .sc-dm-snd svg{width:13px;height:13px;color:#141310}
.sc .sc-dm-r{position:relative;z-index:2;flex:1 1 0;min-width:0;display:flex;flex-direction:column;padding:clamp(14px,1.8vw,24px)}
.sc .sc-dm-ph{display:flex;align-items:center;gap:10px;padding:0 0 9px}
.sc .sc-dm-tabs{display:inline-flex;background:rgba(243,241,234,.1);flex:none}
.sc .sc-dm-tabs b{font-weight:500;font-size:10.5px;padding:4px 10px;color:rgba(243,241,234,.6)}
.sc .sc-dm-tabs b.sc-on{background:#2D572F;color:#fff}
.sc .sc-dm-url{font-family:var(--mono);font-size:10.5px;color:rgba(243,241,234,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc .sc-dm-pic{flex:1;min-height:0;background:#fff;overflow:hidden;box-shadow:0 20px 50px -30px rgba(0,0,0,.6)}
.sc .sc-dm-pic img{width:100%;height:100%;object-fit:cover;object-position:0 18%}
.sc .sc-cm b{display:block;font-size:12.5px;font-weight:600;margin-bottom:3px;color:#F3F1EA}
.sc .sc-cm b small{font-weight:400;color:var(--cr50);font-size:11.5px;margin-left:6px}
.sc .sc-cm p{font-size:14px;line-height:1.5;color:rgba(243,241,234,.86)}
.sc .sc-shot{margin-top:clamp(44px,6vw,72px);padding:0!important}
@media(max-width:900px){.sc .sc-dm{flex-direction:column;min-height:0}.sc .sc-dm-l{flex-basis:auto;border-right:0;border-bottom:1px solid rgba(243,241,234,.12)}.sc .sc-dm-pic{aspect-ratio:1040/900;flex:none}}
@media(prefers-reduced-motion:reduce){.sc *{scroll-behavior:auto!important;transition:none!important}}


/* security: the map */
.sc .sc-map{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr) 64px minmax(0,1fr);row-gap:26px;padding:clamp(22px,3.4vw,52px);text-align:left}
.sc .sc-zone{display:flex;flex-direction:column;background:rgba(20,19,15,.62);border:1px solid rgba(243,241,234,.18);padding:18px 20px}
.sc .sc-zone.sc-ours{border-color:rgba(157,196,159,.55)}
.sc .sc-zone .sc-zk{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cr50);padding-bottom:12px;border-bottom:1px solid rgba(243,241,234,.12)}
.sc .sc-zone.sc-ours .sc-zk{color:var(--sage)}
.sc .sc-zone span{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid rgba(243,241,234,.08);font-size:14.5px;color:rgba(243,241,234,.88);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc .sc-zone .sc-zk::before{display:none}
.sc .sc-zone .sc-zk{white-space:nowrap}
.sc .sc-btn{transition:background .18s,border-color .18s,color .18s}
.sc .sc-btn-g:hover{background:#24451F}
.sc .sc-btn-o:hover{border-color:var(--cream);background:rgba(243,241,234,.06)}
.sc .sc-btn-k:hover{background:#FFFFFF}
.sc .sc-dm-pic img{object-fit:contain!important;object-position:center top!important}

.sc .sc-zone span:last-child{border-bottom:0}
.sc .sc-zone span::before{content:"";width:7px;height:7px;flex:none;background:rgba(243,241,234,.35)}
.sc .sc-zone.sc-mid span::before{background:var(--gold)}
.sc .sc-zone.sc-ours span::before{background:var(--sage)}
.sc .sc-lane{position:relative;align-self:center;height:2px;background:rgba(243,241,234,.18)}
.sc .sc-lane b{position:absolute;top:-4px;left:0;width:10px;height:10px;background:var(--gold);animation:run 3.2s linear infinite}
.sc .sc-lane.sc-l2 b{background:var(--sage);animation-delay:1.1s}
@keyframes run{from{left:0;opacity:0}12%{opacity:1}88%{opacity:1}to{left:calc(100% - 10px);opacity:0}}
.sc .sc-back{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative;border:1px solid rgba(243,241,234,.14);background:rgba(20,19,15,.45)}
.sc .sc-back span{padding:14px 16px;font-size:14px;color:rgba(243,241,234,.86);border-right:1px solid rgba(243,241,234,.1);display:flex;flex-direction:column;gap:4px}
.sc .sc-back span:last-child{border-right:0}
.sc .sc-back span em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cr50)}
.sc .sc-back i{position:absolute;bottom:-1px;left:0;height:2px;width:25%;background:var(--sage);animation:home 6s steps(4,end) infinite}
@keyframes home{from{left:0}to{left:100%}}
/* reads and writes */
.sc .sc-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px)}
.sc .sc-two .sc-bd{aspect-ratio:1;display:grid;align-items:center;padding:clamp(20px,3.2vw,44px)}
.sc .sc-two h3{margin-top:20px}
.sc .sc-two p{margin-top:8px;color:var(--ink60);max-width:44ch}
.sc .sc-two .sc-log span{font-size:15px;padding:9px 0}
/* who can open what */
.sc .sc-mx-wrap{overflow-x:auto}
.sc .sc-mx{width:100%;border-collapse:collapse;min-width:720px;table-layout:fixed}
.sc .sc-mx th:first-child,.sc .sc-mx td:first-child{width:30%}
.sc .sc-mx td:first-child small{display:block;margin-top:4px;font-family:var(--sans);font-size:12.5px;color:var(--gold)}
.sc .sc-mx th{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cr50);text-align:center;padding:0 10px 16px;border-bottom:1px solid rgba(243,241,234,.4)}
.sc .sc-mx th:first-child{text-align:left;padding-left:0}
.sc .sc-mx td{text-align:center;padding:18px 10px;border-bottom:1px solid rgba(243,241,234,.1)}
.sc .sc-mx td:first-child{text-align:left;padding-left:0;font-family:var(--head);font-size:clamp(17px,1.6vw,21px);color:var(--cream)}
.sc .sc-mx i{display:inline-grid;place-items:center;width:26px;height:26px}
.sc .sc-mx i.sc-on{background:#2D572F;color:#F3F1EA}
.sc .sc-mx i.sc-on svg{width:14px}
.sc .sc-mx i.sc-off{width:14px;height:2px;background:rgba(243,241,234,.18)}
.sc .sc-mx .sc-note{display:inline-block;font-size:12px;color:var(--gold);border:1px solid rgba(207,149,54,.45);padding:4px 8px}
/* record */
.sc .sc-rec .sc-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(243,241,234,.08);font-size:14px}
.sc .sc-rec .sc-row:last-child{border-bottom:0}
.sc .sc-rec .sc-row code{font-family:var(--mono);font-size:12px;color:var(--sage)}
.sc .sc-rec .sc-row em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--cr50);text-align:right}
.sc .sc-rec .sc-row small{display:block;color:var(--cr50);font-size:12px;margin-top:2px}
/* where requests go */
.sc .sc-flow{display:flex!important;flex-direction:column;justify-content:center;align-items:stretch!important;gap:0;padding:clamp(22px,3.4vw,48px)}
.sc .sc-flow .sc-st{background:rgba(20,19,15,.62);border:1px solid rgba(243,241,234,.18);padding:18px 20px;display:flex;align-items:center;gap:14px;font-size:15px;color:var(--cream)}
.sc .sc-flow .sc-st em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cr50)}
.sc .sc-flow .sc-st.sc-ours{border-color:rgba(157,196,159,.55)}
.sc .sc-flow .sc-st .sc-mk{width:26px;height:22px;flex:none}
.sc .sc-flow .sc-pipe{height:34px;width:2px;margin-left:32px;background:rgba(243,241,234,.2);position:relative;overflow:hidden}
.sc .sc-flow .sc-pipe::after{content:"";position:absolute;left:0;top:-12px;width:2px;height:12px;background:var(--sage);animation:down 1.8s linear infinite}
@keyframes down{to{top:34px}}
.sc .sc-flow .sc-logos{display:flex;gap:10px;margin-left:auto}
.sc .sc-flow .sc-logos span{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(243,241,234,.2)}
.sc .sc-flow .sc-logos svg{width:18px;height:18px}
/* certifications */
.sc .sc-certs4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.sc .sc-ct{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:18px;text-align:center}
.sc .sc-ct img{width:46%;filter:brightness(2.2) contrast(.9)}
.sc .sc-ct b{font-family:var(--head);font-weight:500;font-size:clamp(17px,1.6vw,21px);color:var(--cream)}
.sc .sc-ct em{font-style:normal;font-size:13px;color:var(--cr70);max-width:18ch}
@media(max-width:900px){.sc .sc-map{grid-template-columns:1fr}.sc .sc-lane{height:28px;width:2px;justify-self:center}.sc .sc-lane b{animation:none;left:-4px;top:9px}.sc .sc-back{grid-template-columns:1fr 1fr}.sc .sc-certs4{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.sc .sc-two{grid-template-columns:1fr}.sc .sc-two .sc-bd{aspect-ratio:auto}}
@media(prefers-reduced-motion:reduce){.sc .sc-lane b,.sc .sc-back i,.sc .sc-flow .sc-pipe::after{animation:none}}

/* the hero fills the first screen exactly: text at the top, the visual takes the rest */
@media(min-width:901px) and (min-height:620px){
.sc .sc-herov{height:calc(100svh - var(--navh,0px));min-height:0;display:flex;flex-direction:column}
.sc .sc-herov>.sc-wrap:first-child{flex:none;padding-block:clamp(28px,5vh,72px) 0}
.sc .sc-herov>.sc-wrap:last-child{flex:1;min-height:0;display:flex;flex-direction:column;width:100%}
.sc .sc-herov .sc-shot{flex:1;min-height:0;display:flex;flex-direction:column;margin-top:clamp(24px,4vh,48px)}
.sc .sc-herov .sc-shot>*{flex:1;min-height:0}
.sc .sc-herov .sc-dm{min-height:0}
.sc .sc-herov .sc-dm-box p{min-height:0}
.sc .sc-herov .sc-dm-thread{justify-content:center}
.sc .sc-herov .sc-dm-pic img{object-position:center center!important}
.sc .sc-herov .sc-map{align-content:center;padding-block:clamp(16px,3vh,40px)}
}


.sc{background:var(--paper);color:var(--ink);font-family:var(--sans)}
body.sharp .sc-snd,body.sharp .sc-dm-snd,body.sharp .sc-dm-acct,body.sharp .sc-dm-log .sc-d,body.sharp .sc-log span::before,body.sharp .sc-ba .sc-div::after,body.sharp .sc-bar i,body.sharp .sc-checks span::before{border-radius:50%!important}

.hw,.sc{--navh:65px}

/* ==================== merchants (mer/), 2026-09-24 ==================== */
/* merchants v4: only what the site's own components don't already cover */
.mz-hero{background:radial-gradient(60% 55% at 50% 0%,rgba(157,196,159,.22) 0%,rgba(45,87,47,.12) 40%,rgba(20,19,15,0) 72%),#14130F;color:#F3F1EA;text-align:center;
  min-height:calc(100svh - 65px);display:flex;align-items:center;padding:clamp(48px,7vh,88px) 0 clamp(32px,5vh,56px)}
.mz-hero .wrap{width:100%}
.mz-hero h1{font-family:var(--disp,inherit);font-size:clamp(40px,6vw,80px);line-height:1.02;letter-spacing:-.03em;font-weight:500;max-width:14ch;margin:0 auto;color:#F3F1EA}
.mz-sub{margin:20px auto 30px;max-width:48ch;font-size:clamp(16px,1.5vw,19px);color:rgba(243,241,234,.7)}
.mz-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:0}
.mz-o{color:#F3F1EA!important;border-color:rgba(243,241,234,.3)!important}
.mz-o:hover{border-color:#F3F1EA!important}
.mz-cmp{width:min(100%,680px);margin:clamp(40px,6vh,64px) auto 0;text-align:left;background:rgba(20,19,15,.62);border:1px solid rgba(243,241,234,.2);padding:18px 18px 14px;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.mz-cmp p{margin:0;min-height:1.5em;font-size:clamp(16px,1.6vw,19px)}
.mz-cur{display:inline-block;width:2px;height:1.1em;background:#F3F1EA;vertical-align:-3px;margin-left:2px;animation:mzbl 1s steps(1) infinite}
@keyframes mzbl{50%{opacity:0}}
.mz-cb{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding-top:12px;border-top:1px solid rgba(243,241,234,.12)}
.mz-tools{display:flex;gap:6px;color:rgba(243,241,234,.5)}
.mz-tools i{width:30px;height:30px;display:grid;place-items:center}
.mz-tools svg{width:17px}
.mz-snd{width:34px;height:34px;border-radius:50%!important;background:#F3F1EA;color:#14130F;display:grid;place-items:center}
.mz-snd svg{width:16px}
.mz-lg-l{margin:clamp(48px,7vh,80px) 0 0;font-size:13px;color:rgba(243,241,234,.5)}
.mz-lg{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:20px;flex-wrap:wrap}
.mz-lg img{height:28px;width:auto;max-width:110px;object-fit:contain;filter:brightness(0) invert(1);opacity:.6}

/* time on the big jobs */
.mz-cost{margin-top:clamp(28px,3.4vw,48px)}
.mz-key{display:flex;gap:28px;padding-bottom:18px;border-bottom:1px solid var(--ink);font-size:14px;color:var(--ink60)}
.mz-key span{display:flex;align-items:center;gap:8px}
.mz-key i{width:14px;height:14px;display:block}
.mz-key .dev i{background:#CF9536}.mz-key .ari i{background:#2D572F}
.mz-r{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:clamp(16px,3vw,48px);align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.mz-job{font-size:18px;font-weight:500}
.mz-bars{display:flex;flex-direction:column;gap:8px}
.mz-b{display:flex;align-items:center;gap:14px}
.mz-b i{display:block;height:18px}
.mz-b.dev i{width:calc(100% - 110px);background:#CF9536}
.mz-b.ari i{background:#2D572F;max-width:calc(100% - 110px)}
.mz-b b{font-size:16px;font-weight:500;white-space:nowrap}
.mz-b.ari b{color:#2D572F}
/* knowledge */
.mz-kn{margin-top:clamp(32px,4vw,56px)}
.mz-kb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr) auto;gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid rgba(243,241,234,.14)}
.mz-kl{font-size:17px;color:rgba(243,241,234,.8)}
.mz-bar{height:44px;background:rgba(243,241,234,.06)}
.mz-bar i{display:block;height:100%;min-width:4px;background:rgba(243,241,234,.4)}
.mz-kb.on .mz-bar i{background:linear-gradient(90deg,#2D572F,#9DC49F)}
.mz-kb.on .mz-kl{color:#F3F1EA;font-size:22px;font-weight:500}
.mz-kb b{font-size:clamp(20px,2.2vw,30px);font-weight:500;white-space:nowrap}
.mz-kb.on b{color:#9DC49F}
.mz-kp{margin:28px 0 0;font-size:clamp(17px,1.6vw,20px);color:rgba(243,241,234,.8);max-width:56ch}

/* who does what */
.mz-g{margin-top:clamp(28px,3.4vw,48px)}
.mz-gh,.mz-gr{display:grid;grid-template-columns:minmax(0,1.1fr) repeat(4,minmax(0,1fr));gap:28px;align-items:center}
.mz-gh{padding-bottom:12px;border-bottom:1px solid var(--ink);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink40)}
.mz-gr{padding:18px 0;border-bottom:1px solid var(--line)}
.mz-gr b{font-size:18px;font-weight:500}
.mz-gr .n{position:relative;padding:14px 16px;background:#14130F;color:#F3F1EA;font-size:15px}
.mz-gr .n:not(:last-child)::after{content:"";position:absolute;right:-29px;top:50%;width:28px;height:2px;background:rgba(20,19,15,.3)}
.mz-gr .n.ari{background:#2D572F}
.mz-gn{margin:18px 0 0;font-size:14px;color:var(--ink60)}
/* preview and support visuals */
.mz-pv{background:#1B1A16;border:1px solid rgba(243,241,234,.18);box-shadow:0 40px 80px -50px rgba(20,19,15,.7)}
.mz-pvb{padding:10px 14px;font-size:12px;color:#9DC49F;border-bottom:1px solid rgba(243,241,234,.1)}
.mz-pvb span{color:rgba(243,241,234,.45);margin-left:8px}
.mz-pv img{display:block;width:100%}
.mz-pva{display:flex;align-items:center;gap:10px;padding:12px 14px;color:rgba(243,241,234,.7);font-size:14px}
.mz-pva span{flex:1}
.mz-pva b{font-weight:500;background:#F3F1EA;color:#14130F;padding:8px 14px}
.mz-pva b.o{background:none;border:1px solid rgba(243,241,234,.3);color:#F3F1EA}
.mz-sq{aspect-ratio:1;background:url(img/bg-agent.jpg) center/cover;display:flex;align-items:center;padding:clamp(20px,3.6vw,52px)}
.mz-th{width:100%;display:flex;flex-direction:column;gap:14px}
.mz-me{align-self:flex-end;max-width:88%;background:rgba(243,241,234,.16);border:1px solid rgba(243,241,234,.2);padding:14px 16px;font-size:15px;color:#F3F1EA;backdrop-filter:blur(8px)}
.mz-log{list-style:none;margin:0;padding:14px 16px;background:rgba(20,19,15,.7);border:1px solid rgba(243,241,234,.18);color:rgba(243,241,234,.85)}
.mz-log li{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:14.5px}
.mz-log .d{width:7px;height:7px;border-radius:50%!important;background:#7FA47F;flex:none}
.mz-log em{margin-left:auto;font-style:normal;font-size:12px;color:rgba(243,241,234,.45)}

/* works with anything */
.mz-lead{max-width:60ch;margin:14px 0 0;font-size:17px;color:rgba(243,241,234,.7)}
.mz-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:clamp(28px,3.4vw,48px)}
.mz-wall span{aspect-ratio:3/2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border:1px solid rgba(243,241,234,.14);padding:14px}
.mz-wall em{font-style:normal;font-size:12.5px;color:rgba(243,241,234,.6)}
.mz-wall .more{grid-column:1/-1;border-style:dashed;aspect-ratio:auto}
.mz-wall .more em{font-size:15px;color:#9DC49F}
.mz-wall img{max-height:26px;max-width:80%;width:auto;filter:brightness(0) invert(1);opacity:.75}

@media(max-width:900px){.mz-r{grid-template-columns:1fr;gap:10px}.mz-h{display:none}.mz-kb{grid-template-columns:1fr;gap:10px}.mz-flow{grid-template-columns:1fr 1fr;gap:14px}.mz-st::after{display:none}.mz-lg{justify-content:center}}
@media(prefers-reduced-motion:reduce){.mz-cur{animation:none}}

/* painted cards 3 and 4 */
.mz-paint{position:absolute;inset:0;z-index:1;background-size:cover;background-position:center}
.mz-frag{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:16px}
.vi-art:has(.mz-paint){inset:0!important;left:0!important;right:0!important;top:0!important;bottom:0!important}
.vi-art:has(.mz-paint) .ui{position:absolute;inset:0}
.mz-shot{display:block;flex:none;width:170%;margin-left:68%;box-shadow:0 20px 40px -20px rgba(0,0,0,.7)}
.mz-shot img{display:block;width:100%}
.mz-num{display:flex;flex-direction:column;gap:4px;background:rgba(20,19,15,.62);border:1px solid rgba(243,241,234,.2);padding:16px 20px;color:#F3F1EA}
.mz-num b{font-size:40px;font-weight:500;letter-spacing:-.03em;line-height:1}
.mz-num em{font-style:normal;font-size:13px;color:rgba(243,241,234,.7)}
.uc-chips{display:none!important}
/* before and after */
.mz-ba{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#fff;align-items:start}
.mz-ba figure{position:relative;margin:0}
.mz-ba img{display:block;width:100%}
.mz-ba figcaption{position:absolute;top:10px;left:10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;background:#14130F;color:#F3F1EA}
.mz-ba .on figcaption{background:#2D572F}
.mz-hl{position:absolute;left:3%;right:3%;bottom:1%;height:15%;border:2px solid #2D572F;box-shadow:0 0 0 5px rgba(45,87,47,.15)}
/* chat panel on the painted square */
.mz-chat{flex:1 1 auto!important;width:100%;height:100%;border:1px solid rgba(243,241,234,.16)!important;background:rgba(20,19,15,.72)}
.mz-sq{padding:clamp(20px,3vw,44px)!important}
.mz-wall .more{flex-direction:row!important;gap:14px!important}
.mz-wall .more b{font-size:28px;font-weight:500;color:#F3F1EA}
@media(max-width:900px){.mz-r{grid-template-columns:1fr}.mz-gh{display:none}.mz-gr{grid-template-columns:1fr 1fr;gap:10px}.mz-gr b{grid-column:1/-1}.mz-gr .n::after{display:none}}

/* lighter painted grounds on all four cards */
.ucards .vi-bg{background:url(img/bg-moss2.jpg) center/cover!important}
.ucards .ucard-c:nth-child(1) .vi-bg{background-position:20% 30%!important}
.ucards .ucard-c:nth-child(2) .vi-bg{background-position:80% 60%!important}
.ucards .ucard-c:nth-child(3) .mz-paint{background-position:40% 80%!important}
.ucards .ucard-c:nth-child(4) .mz-paint{background-position:65% 20%!important}
.ucards .vi-bg::before,.ucards .vi-bg::after{display:none!important}
body.sharp .mz-snd,body.sharp .mz-log .d{border-radius:50%!important}

/* no orphans */
.mz-hero p,.mz-kp,.sec p,.sec h2,.sec h3,.faqs summary{text-wrap:pretty}
.mz-kp{text-wrap:balance}
/* knowledge bars: one grid for both rows */
.mz-kb{grid-template-columns:240px minmax(0,1fr) 230px!important}
.mz-kl,.mz-kb.on .mz-kl{font-size:17px!important;font-weight:500!important;white-space:nowrap}
.mz-kb b{text-align:right}
.mz-bar{height:44px!important}
/* team graph: engineers' plan under the name */
.mz-gr .n small{display:block;margin-top:3px;font-size:12px;color:rgba(243,241,234,.62)}
@media(max-width:900px){.mz-kb{grid-template-columns:1fr!important}.mz-kb b{text-align:left}}
.mz-gr .n{min-height:68px;display:flex;flex-direction:column;justify-content:center}
/* how it works: three steps, one element each */
.hw .hw-sq3{aspect-ratio:1;background-size:cover;background-position:center;display:grid;place-items:center;padding:clamp(24px,3.4vw,48px)}
.hw .hw-s-me{max-width:88%;background:rgba(20,19,15,.82);border:1px solid rgba(243,241,234,.2);color:#F3F1EA;padding:18px 22px;font-size:clamp(16px,1.5vw,19px);line-height:1.4;backdrop-filter:blur(8px);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.hw .hw-s-card{width:min(100%,300px);background:rgba(20,19,15,.82);border:1px solid rgba(243,241,234,.2);color:#F3F1EA;padding:8px 22px;backdrop-filter:blur(8px);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.hw .hw-s-card>span{display:flex;align-items:center;gap:12px;padding:14px 0;font-size:16px}
.hw .hw-s-card>span+span{border-top:1px solid rgba(243,241,234,.1)}
.hw .hw-s-card i{width:20px;height:20px;border-radius:50%!important;background:#2D572F;color:#F3F1EA;display:grid;place-items:center;flex:none}
.hw .hw-s-card i svg{width:12px}
.hw .hw-s-pr{padding:22px}
.hw .hw-s-pr em{display:block;font-style:normal;font-size:13px;color:rgba(243,241,234,.55)}
.hw .hw-s-pr b{display:block;margin:8px 0 18px;font-size:19px;font-weight:500;letter-spacing:-.01em}
.hw .hw-s-pr .hw-s-ok{padding:0!important;color:#9DC49F;font-size:15px}
/* hero demo: never narrower than the chat plus a readable preview */
.hw .hw-herov .hw-dm{width:min(100%,max(900px,calc((100svh - var(--navh,0px) - 520px) * 1.74 + 420px)))}
/* one square size across the page: every two-column row splits 1:1 with the same gap */
.hw .hw-rp,.hw .hw-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px)}
@media(max-width:900px){.hw .hw-rp,.hw .hw-split{grid-template-columns:1fr}}
/* security hero: three things, one line */
.sc .sc-trio{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(12px,2vw,24px);max-width:1040px;margin:clamp(40px,7vh,72px) auto 0}
.sc .sc-fs{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.6vw,32px);border:1px solid rgba(243,241,234,.18);background:rgba(243,241,234,.03);text-align:left}
.sc .sc-fs em{font-style:normal;font-size:13px;color:rgba(243,241,234,.55)}
.sc .sc-fs b{font-size:clamp(19px,1.9vw,24px);font-weight:500;letter-spacing:-.02em;color:#F3F1EA}
.sc .sc-fs-ari{background:url(img/bg-moss2.jpg) center/cover;border-color:rgba(157,196,159,.5)}
.sc .sc-fs-ari em{color:#F3F1EA}
.sc .sc-fa{font-style:normal;font-size:24px;color:#9DC49F}
@media(max-width:760px){.sc .sc-trio{grid-template-columns:1fr}.sc .sc-fa{transform:rotate(90deg);justify-self:center}}
/* how it works: squares never larger than this */
.hw .hw-step .hw-vis,.hw .hw-rp-v,.hw .hw-sqp{width:min(100%,460px);justify-self:center}
.sc .sc-herov{height:auto;min-height:calc(100svh - var(--navh,0px));justify-content:center;padding-bottom:clamp(32px,6vh,72px)}
.sc .sc-herov>.sc-wrap:last-child{flex:none}
.sc .sc-herov>.sc-wrap:first-child{padding-top:0}
.sc .sc-trio{width:100%}
.sc .sc-herov{padding-top:clamp(32px,6vh,64px)}

/* security v3 (sec/page.css), generated from the artifact builder, scoped to .sx */
.sx .sec p,.sx .sec h2,.sx .sec h3,.sx .faqs summary{text-wrap:pretty}.sx .sx-hero{position:relative;overflow:hidden;background:radial-gradient(60% 55% at 50% 0%,rgba(157,196,159,.22) 0%,rgba(45,87,47,.12) 40%,rgba(20,19,15,0) 72%),#14130F;
  color:#F3F1EA;text-align:center;min-height:calc(100svh - 65px);display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,6vh,72px) 0}.sx .sx-hero h1{font-size:clamp(40px,6vw,84px);line-height:1.02;letter-spacing:-.035em;font-weight:500;color:#F3F1EA;margin:0 auto;max-width:16ch;text-wrap:balance}.sx .sx-sub{margin:18px auto 28px;max-width:44ch;font-size:clamp(17px,1.5vw,20px);color:rgba(243,241,234,.72);text-wrap:balance}.sx .sx-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:0}.sx .sx-o{color:#F3F1EA!important;border-color:rgba(243,241,234,.3)!important}.sx .sx-o:hover{border-color:#F3F1EA!important;background:rgba(243,241,234,.06)!important}.sx .sx-scene{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:clamp(32px,6vh,64px);max-width:min(1100px,calc((100svh - 65px - 380px) * 3.1));text-align:left}.sx .sx-fr{margin:0;position:relative;min-width:0}.sx .sx-fr figcaption{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:15px;color:#F3F1EA}.sx .sx-fr figcaption i{width:26px;height:26px;display:grid;place-items:center;border:1px solid rgba(243,241,234,.25);font-style:normal;font-size:11px;font-family:ui-monospace,Menlo,monospace}.sx .sx-fr figcaption i svg{width:14px}.sx .sx-fr figcaption i.g{background:#2D572F;border-color:#2D572F}.sx .sx-fr figcaption em{margin-left:auto;font-style:normal;font-size:12.5px;color:rgba(243,241,234,.55);padding:4px 10px;border:1px solid rgba(243,241,234,.18)}.sx .sx-fr figcaption em.on{color:#9DC49F;border-color:rgba(157,196,159,.45)}.sx .sx-fr figcaption em.on:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#9DC49F;margin-right:7px;vertical-align:1px;animation:sxBlink 1.2s ease-in-out infinite}
@keyframes sxBlink{50%{opacity:.25}}.sx .sx-shot{position:relative;overflow:hidden;background:#fff;box-shadow:0 40px 80px -40px rgba(0,0,0,.95);outline:1px solid rgba(243,241,234,.12)}.sx .sx-shot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}.sx .sx-live .sx-shot{filter:saturate(.9)}.sx .sx-copy .sx-shot{outline:1px solid rgba(157,196,159,.6)}.sx .sx-bar{height:0;overflow:hidden;background:#2D572F;color:#F3F1EA;font-size:clamp(10px,.9vw,12.5px);display:flex;align-items:center;justify-content:center;animation:sxBar 10s ease-in-out infinite}
@keyframes sxBar{0%,22%{height:0}30%,92%{height:clamp(20px,2vw,28px)}100%{height:0}}.sx .sx-scan{position:absolute;left:0;right:0;top:0;height:40%;background:linear-gradient(180deg,rgba(157,196,159,0),rgba(157,196,159,.28) 85%,rgba(157,196,159,.9));mix-blend-mode:multiply;animation:sxScan 10s linear infinite;pointer-events:none}
@keyframes sxScan{0%{transform:translateY(-100%)}25%{transform:translateY(250%)}25.01%,100%{transform:translateY(-100%);opacity:0}}.sx .sx-pr{position:absolute;right:clamp(-24px,-1.6vw,-10px);bottom:clamp(-28px,-2vw,-14px);width:min(78%,300px);background:rgba(20,19,15,.9);border:1px solid rgba(243,241,234,.2);backdrop-filter:blur(10px);
  padding:14px 16px;box-shadow:0 30px 60px -20px rgba(0,0,0,.9);opacity:0;transform:translateY(16px);animation:sxPr 10s ease-in-out infinite}
@keyframes sxPr{0%,40%{opacity:0;transform:translateY(16px)}48%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateY(16px)}}.sx .sx-pr em{display:block;font-style:normal;font-size:12px;color:rgba(243,241,234,.55)}.sx .sx-pr b{display:block;margin:5px 0 10px;font-size:15px;font-weight:500;color:#F3F1EA}.sx .sx-pr span{display:flex;align-items:center;gap:8px;font-size:13px;color:#9DC49F}.sx .sx-pr i,.sx .sx-r i,.sx .sx-on{width:18px;height:18px;border-radius:50%!important;background:#2D572F;color:#F3F1EA;display:grid;place-items:center;flex:none}.sx .sx-pr i svg,.sx .sx-r i svg,.sx .sx-on svg{width:11px}.sx .sx-num{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(28px,3.4vw,48px);border-top:1px solid var(--ink)}.sx .sx-num>div{padding:26px clamp(18px,2.6vw,36px) 6px 0;min-width:0}.sx .sx-num>div+div{padding-left:clamp(18px,2.6vw,36px);border-left:1px solid var(--line)}.sx .sx-num b{display:block;font-size:clamp(64px,8vw,120px);font-weight:500;letter-spacing:-.05em;line-height:.95;color:#2D572F}.sx .sx-num span{display:block;margin-top:14px;font-size:16px;color:var(--ink);max-width:24ch}.sx .sx-sqs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);margin-top:clamp(28px,3.4vw,48px)}.sx .sx-p{min-width:0}.sx .sx-p h3{margin:18px 0 6px;font-size:21px;font-weight:500;letter-spacing:-.02em}.sx .sx-p p{margin:0;font-size:15px;color:var(--ink60);max-width:36ch}.sx .sx-sq{aspect-ratio:1;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;padding:clamp(18px,2.6vw,36px);overflow:hidden}.sx .sx-glass{width:100%;background:rgba(20,19,15,.82);border:1px solid rgba(243,241,234,.2);color:#F3F1EA;padding:16px 18px;backdrop-filter:blur(8px);box-shadow:0 30px 60px -30px rgba(0,0,0,.8);font-size:14px;transition:transform .45s cubic-bezier(.2,.7,.2,1)}.sx .sx-p:hover .sx-glass{transform:translateY(-6px)}.sx .sx-fl{margin:0 0 8px!important;font-size:11px!important;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,241,234,.55)!important}.sx .sx-r{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid rgba(243,241,234,.1)}.sx .sx-r span{flex:1;min-width:0}.sx .sx-r em{font-style:normal;font-size:12px;color:rgba(243,241,234,.5);white-space:nowrap}.sx .sx-r.no i{background:rgba(207,149,54,.22);color:#E3B970}.sx .sx-r.no span{color:rgba(243,241,234,.85)}.sx .sx-mxw{margin-top:clamp(28px,3.4vw,48px);overflow-x:auto}.sx .sx-mx{width:100%;border-collapse:collapse;min-width:640px}.sx .sx-mx th{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:rgba(243,241,234,.5);text-align:center;padding:0 8px 16px;border-bottom:1px solid rgba(243,241,234,.4)}.sx .sx-mx th:first-child{text-align:left}.sx .sx-mx td{padding:20px 8px;border-bottom:1px solid rgba(243,241,234,.12);text-align:center;vertical-align:middle}.sx .sx-mx td:first-child{text-align:left}.sx .sx-mx td b{display:block;font-size:17px;font-weight:500;color:#F3F1EA}.sx .sx-mx td small{display:block;margin-top:3px;font-size:13px;color:rgba(243,241,234,.5)}.sx .sx-mx tr.ari td{background:rgba(45,87,47,.28)}.sx .sx-mx tr.ari td b{color:#9DC49F}.sx .sx-on{width:22px;height:22px;margin:0 auto;opacity:0;transform:scale(.4);transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--d)*45ms)}.sx .sx-on svg{width:13px}.sx .sx-mx.in .sx-on{opacity:1;transform:none}.sx .sx-off{display:block;width:12px;height:1px;background:rgba(243,241,234,.3);margin:0 auto}.sx .sec .frow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.sx .sec .frow .sx-one{width:min(100%,460px);justify-self:center}
@media(max-width:900px){.sx .sec .frow{grid-template-columns:1fr}}.sx .sx-lg{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid rgba(243,241,234,.1)}.sx .sx-lg code{font-size:12px;color:#9DC49F}.sx .sx-lg span{font-size:13.5px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sx .sx-lg small{display:block;font-size:11.5px;color:rgba(243,241,234,.5)}.sx .sx-lg em{font-style:normal;font-size:12px;color:rgba(243,241,234,.5)}.sx .sx-way{width:100%;display:flex;flex-direction:column;align-items:stretch}.sx .sx-way>div{display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(20,19,15,.84);border:1px solid rgba(243,241,234,.2);padding:16px 18px;backdrop-filter:blur(8px);color:#F3F1EA;font-size:14.5px}.sx .sx-way>div.ari{border-color:rgba(157,196,159,.6)}.sx .sx-way>div b{font-family:ui-monospace,Menlo,monospace;color:#9DC49F;font-weight:500;margin-right:6px}.sx .sx-way em{font-style:normal;font-size:12px;color:rgba(243,241,234,.5);white-space:nowrap}.sx .sx-way em.lg{display:flex;gap:8px}.sx .sx-way em.lg u{width:28px;height:28px;display:grid;place-items:center;border:1px solid rgba(243,241,234,.2);color:#F3F1EA}.sx .sx-way em.lg svg{width:15px;height:15px}.sx .sx-way>i{display:block;width:2px;height:28px;margin-left:28px;background:rgba(243,241,234,.2);position:relative;overflow:hidden}.sx .sx-way>i:after{content:"";position:absolute;left:0;top:-10px;width:2px;height:10px;background:#9DC49F;animation:sxDown 1.6s linear infinite}
@keyframes sxDown{to{transform:translateY(40px)}}.sx .sx-cert{position:relative;overflow:hidden}.sx .sx-cert .wrap{position:relative;z-index:1}.sx .sx-bands{position:absolute;inset:-20%;background:repeating-linear-gradient(112deg,rgba(157,196,159,0) 0 140px,rgba(157,196,159,.05) 140px 230px,rgba(157,196,159,0) 230px 420px),
  radial-gradient(50% 40% at 80% 10%,rgba(45,87,47,.45),transparent 70%),radial-gradient(40% 40% at 10% 90%,rgba(45,87,47,.35),transparent 70%);animation:sxBands 26s linear infinite}
@keyframes sxBands{from{transform:translateX(0)}to{transform:translateX(420px)}}.sx .sx-ch{text-align:center;max-width:860px;margin:0 auto}.sx .sx-ch h2{font-size:clamp(34px,4.6vw,64px);line-height:1.04;letter-spacing:-.035em;font-weight:500;color:#F3F1EA;margin:0;text-wrap:balance}.sx .sx-certs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(243,241,234,.14);border:1px solid rgba(243,241,234,.14);margin-top:clamp(40px,5vw,72px)}.sx .sx-certs>div{background:#14130F;padding:clamp(28px,3.4vw,48px) 20px;display:flex;flex-direction:column;align-items:center;text-align:center;transition:background .3s}.sx .sx-certs>div:hover{background:#1c1b16}.sx .sx-certs img{width:clamp(72px,7vw,104px);height:auto;margin-bottom:22px}.sx .sx-certs b{font-size:clamp(26px,2.6vw,36px);font-weight:500;letter-spacing:-.03em;color:#F3F1EA}.sx .sx-certs span{margin-top:8px;font-size:14px;color:rgba(243,241,234,.6)}

@media(max-width:900px){.sx .sx-sqs{grid-template-columns:1fr 1fr}.sx .sx-certs{grid-template-columns:1fr 1fr}.sx .sx-scene{grid-template-columns:1fr;max-width:560px}.sx .sx-live{display:none}}
@media(max-width:600px){.sx .sx-sqs,.sx .sx-num{grid-template-columns:1fr}.sx .sx-num>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}.sx .sx-hero h1{font-size:40px}.sx .sx-pr{right:8px;bottom:-20px}}
@media(prefers-reduced-motion:reduce){.sx .sx-bar{animation:none;height:24px}.sx .sx-scan{display:none}.sx .sx-pr{animation:none;opacity:1;transform:none}.sx .sx-bands{animation:none}}.sx .sx-shot{aspect-ratio:16/10}.sx .sx-shot img{aspect-ratio:auto;height:auto}.sx .sx-pr{right:14px;bottom:14px;width:min(70%,290px)}.sx .sx-scene{max-width:min(1100px,calc((100svh - 65px - 400px) * 2.55));width:100%}
@media(max-width:900px){.sx .sx-scene{grid-template-columns:1fr 1fr;max-width:none;gap:14px}.sx .sx-live{display:block}}
@media(max-width:600px){.sx .sx-fr figcaption{font-size:12px;gap:6px}.sx .sx-fr figcaption em{display:none}.sx .sx-fr figcaption i{width:20px;height:20px}.sx .sx-pr{display:none}}.sx .sx-way>div span{white-space:nowrap}.sx .sx-band{margin:clamp(28px,5vh,56px) auto 0;max-width:1000px;background-size:cover;background-position:center;padding:clamp(28px,4.4vh,56px) clamp(20px,6vw,120px);text-align:left}.sx .sx-acc{max-width:620px;margin:0 auto;background:rgba(20,19,15,.84);border:1px solid rgba(243,241,234,.2);backdrop-filter:blur(10px);padding:18px 22px 8px;box-shadow:0 40px 80px -40px rgba(0,0,0,.95)}.sx .sx-ar{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid rgba(243,241,234,.1);font-size:15.5px;color:#F3F1EA;opacity:0;transform:translateY(8px);animation:sxIn .5s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.4s + var(--d)*.28s)}
@keyframes sxIn{to{opacity:1;transform:none}}.sx .sx-ar i{width:24px;height:24px;border-radius:50%!important;display:grid;place-items:center;flex:none}.sx .sx-ar i svg{width:13px}.sx .sx-ar.g i{background:#2D572F;color:#F3F1EA}.sx .sx-ar.k i{background:rgba(243,241,234,.12);color:#F3F1EA}.sx .sx-ar span{flex:1;min-width:0}.sx .sx-ar em{font-style:normal;font-size:13px;color:rgba(243,241,234,.55);text-align:right}.sx .sx-ar.g em{color:#9DC49F}.sx .sx-tree .sx-t{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid rgba(243,241,234,.1);font-family:ui-monospace,Menlo,monospace;font-size:12.5px}.sx .sx-tree .sx-t i{width:16px;color:rgba(243,241,234,.6);display:grid}.sx .sx-tree .sx-t i svg{width:16px}.sx .sx-tree .sx-t span{flex:1}.sx .sx-tree .sx-t em{font-style:normal;color:rgba(243,241,234,.5);font-size:11.5px}.sx .sx-tree .sx-t.z em{color:#9DC49F}.sx .sx-diff b{display:block;font-size:16px;font-weight:500;margin:0 0 12px}.sx .sx-code{background:#0E0D0A;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;line-height:1.8}.sx .sx-code span{display:block;padding:0 12px;white-space:pre;overflow:hidden;text-overflow:ellipsis}.sx .sx-code .h{padding:7px 12px;color:rgba(243,241,234,.55);border-bottom:1px solid rgba(243,241,234,.1)}.sx .sx-code .a{background:rgba(157,196,159,.12);color:#CFE3CF}.sx .sx-code .a:last-child{padding-bottom:6px}.sx .sx-wait{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:#9DC49F}.sx .sx-wait i{width:18px;height:18px;border-radius:50%!important;background:#2D572F;color:#F3F1EA;display:grid;place-items:center}.sx .sx-wait i svg{width:11px}.sx .sx-lockst{position:relative;width:86%}.sx .sx-mini{background:#F6F4EE;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}.sx .sx-mini .n{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid rgba(20,19,15,.1)}.sx .sx-mini .n b{margin-right:auto;font-size:10px;letter-spacing:.14em;color:#14130F}.sx .sx-mini .n i{width:22px;height:4px;background:rgba(20,19,15,.2)}.sx .sx-mini .h{height:70px;margin:10px;background:linear-gradient(120deg,#C9B79A,#E4D7C0)}.sx .sx-mini .g{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 10px 12px}.sx .sx-mini .g i{aspect-ratio:1;background:#E4E0D4}.sx .sx-lk{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);white-space:nowrap;display:flex;align-items:center;gap:10px;background:rgba(20,19,15,.92);border:1px solid rgba(243,241,234,.22);color:#F3F1EA;padding:10px 16px;font-size:13.5px;box-shadow:0 20px 40px -16px rgba(0,0,0,.8)}.sx .sx-lk i{width:22px;height:22px;border-radius:50%!important;background:rgba(243,241,234,.14);display:grid;place-items:center}.sx .sx-lk i svg{width:12px}.sx .sx-p:hover .sx-glass,.sx .sx-p:hover .sx-lockst{transform:translateY(-6px)}.sx .sx-lockst{transition:transform .45s cubic-bezier(.2,.7,.2,1)}.sx .sx-way>i{margin-left:auto;margin-right:auto}
@media(max-width:600px){.sx .sx-ar{font-size:14px;gap:10px}.sx .sx-ar em{font-size:12px;max-width:44%}.sx .sx-band{padding:16px}}
@media(prefers-reduced-motion:reduce){.sx .sx-ar{animation:none;opacity:1;transform:none}}.sx .sx-tree .sx-t span{white-space:nowrap}.sx .gh{width:100%;background:#0F0E0B;border:1px solid rgba(243,241,234,.16);color:#E8E6DF;font-size:12px;box-shadow:0 40px 80px -30px rgba(0,0,0,.9);text-align:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}.sx .sx-p:hover .gh,.sx .sx-p:hover .gh-live{transform:translateY(-6px)}.sx .gh-top{display:flex;align-items:center;gap:8px;padding:11px 14px 8px;font-size:13px}.sx .gh-top i{width:14px;color:rgba(243,241,234,.5);display:grid}.sx .gh-top svg{width:14px}.sx .gh-top span{color:#9DC49F}.sx .gh-top span b{font-weight:600}.sx .gh-top em{font-style:normal;font-size:10.5px;padding:1px 7px;border:1px solid rgba(243,241,234,.25);border-radius:20px!important;color:rgba(243,241,234,.6)}.sx .gh-tabs{display:flex;gap:14px;padding:0 14px;border-bottom:1px solid rgba(243,241,234,.12);font-size:11.5px;color:rgba(243,241,234,.6)}.sx .gh-tabs span{padding:7px 0;border-bottom:2px solid transparent;white-space:nowrap}.sx .gh-tabs span.on{color:#F3F1EA;border-bottom-color:#CF9536}.sx .gh-tabs u{text-decoration:none;font-size:10px;background:rgba(243,241,234,.12);padding:0 6px;border-radius:20px!important;margin-left:3px}.sx .gh-files{margin:10px 12px;border:1px solid rgba(243,241,234,.12)}.sx .gh-bar{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;background:rgba(243,241,234,.04);border-bottom:1px solid rgba(243,241,234,.12)}.sx .gh-br{display:flex;align-items:center;gap:5px;font-size:11px;padding:2px 8px;border:1px solid rgba(243,241,234,.2)}.sx .gh-br svg{width:11px}.sx .gh-ari{font-size:11px;color:#9DC49F;display:flex;align-items:center;gap:6px}.sx .gh-ari b{font-family:ui-monospace,Menlo,monospace}.sx .gh-ari:after{content:"";width:6px;height:6px;border-radius:50%;background:#9DC49F;animation:sxBlink 1.2s ease-in-out infinite}.sx .gh-f{position:relative;display:grid;grid-template-columns:14px minmax(0,1.1fr) minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 10px;border-top:1px solid rgba(243,241,234,.07)}.sx .gh-f:first-of-type{border-top:0}.sx .gh-f i{display:grid;color:#7FA4C9}.sx .gh-f i svg{width:13px}.sx .gh-f.gh-f i,.sx .gh-f.gh-z i{color:rgba(243,241,234,.5)}.sx .gh-f span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sx .gh-f em{font-style:normal;color:rgba(243,241,234,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}.sx .gh-f small{color:rgba(243,241,234,.4);font-size:10.5px;white-space:nowrap}.sx .gh-f.gh-z em{color:#9DC49F}.sx .gh-f:before{content:"";position:absolute;inset:0;background:rgba(157,196,159,.14);box-shadow:inset 2px 0 #9DC49F;opacity:0;animation:ghRead 7.5s infinite;animation-delay:calc(var(--i)*1.5s)}
@keyframes ghRead{0%{opacity:0}4%,16%{opacity:1}22%,100%{opacity:0}}.sx .gh-lang{display:flex;gap:2px;height:6px;margin:4px 12px 0}.sx .gh-lang i{display:block;height:100%}.sx .gh-ll{display:flex;gap:12px;padding:8px 12px 12px;font-size:10.5px;color:rgba(243,241,234,.55)}.sx .gh-ll u{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}.sx .gh-pt{padding:12px 14px 10px}.sx .gh-pt>b{display:block;font-size:15px;font-weight:500;color:#F3F1EA}.sx .gh-pt>b span{color:rgba(243,241,234,.4);font-weight:400}.sx .gh-pt>div{display:flex;align-items:center;gap:8px;margin-top:7px}.sx .gh-pt em.open{display:flex;align-items:center;gap:4px;font-style:normal;font-size:11px;background:#2D572F;color:#F3F1EA;padding:3px 9px;border-radius:20px!important}.sx .gh-pt em svg{width:11px}.sx .gh-pt small{font-size:11px;color:rgba(243,241,234,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sx .gh-pt small b{color:#F3F1EA;font-weight:500}.sx .gh-pt code{font-size:10.5px;background:rgba(127,164,201,.16);color:#9EC0E0;padding:0 5px}.sx .gh-diff{margin:10px 12px 0;border:1px solid rgba(243,241,234,.12);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px}.sx .gh-fn{display:flex;justify-content:space-between;padding:6px 10px;background:rgba(243,241,234,.04);border-bottom:1px solid rgba(243,241,234,.12);color:rgba(243,241,234,.75)}.sx .gh-fn em{font-style:normal}.sx .gh-fn b{color:#7FC98A;font-weight:500}.sx .gh-fn s{text-decoration:none;color:#E27D72}.sx .gh-l{display:grid;grid-template-columns:22px 22px minmax(0,1fr);line-height:1.9;opacity:0;animation:ghIn 8s infinite;animation-delay:calc(var(--i)*.25s)}
@keyframes ghIn{0%{opacity:0}6%,92%{opacity:1}100%{opacity:0}}.sx .gh-l i{font-style:normal;text-align:right;padding-right:6px;color:rgba(243,241,234,.3);font-size:9.5px}.sx .gh-l code{white-space:pre;overflow:hidden;text-overflow:ellipsis;color:rgba(243,241,234,.7);padding-left:4px}.sx .gh-l.a{background:rgba(63,185,80,.14)}.sx .gh-l.a code{color:#CFEBD2}.sx .gh-l.a i{background:rgba(63,185,80,.14)}.sx .gh-l.d{background:rgba(248,81,73,.13)}.sx .gh-l.d code{color:#F2C4BF}.sx .gh-ck{padding:9px 12px 0;font-size:11.5px;color:#9DC49F}.sx .gh-ck span,.sx .gh-merge{display:flex;align-items:center;gap:8px}.sx .gh-ck i{width:16px;height:16px;border-radius:50%!important;background:#2D572F;color:#F3F1EA;display:grid;place-items:center}.sx .gh-ck i svg{width:10px}.sx .gh-merge{margin:10px 12px 12px;padding:9px 10px;border:1px solid rgba(207,149,54,.4);background:rgba(207,149,54,.08)}.sx .gh-merge>i{width:22px;height:22px;display:grid;place-items:center;color:#E3B970;flex:none}.sx .gh-merge>i svg{width:14px}.sx .gh-merge span{flex:1;min-width:0;display:flex;flex-direction:column;font-size:11px;color:rgba(243,241,234,.6)}.sx .gh-merge span b{font-size:12px;font-weight:500;color:#F3F1EA}.sx .gh-merge em{font-style:normal;font-size:11px;padding:5px 10px;background:rgba(243,241,234,.08);color:rgba(243,241,234,.35)}.sx .gh-live{width:100%;background:#fff;box-shadow:0 40px 80px -30px rgba(0,0,0,.9);position:relative;transition:transform .45s cubic-bezier(.2,.7,.2,1)}.sx .gh-url{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#ECEAE3;border-bottom:1px solid rgba(20,19,15,.1);font-size:11.5px;color:rgba(20,19,15,.7)}.sx .gh-url i{width:12px;display:grid;color:#2D572F}.sx .gh-url i svg{width:12px}.sx .gh-url em{margin-left:auto;display:flex;align-items:center;gap:6px;font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#2D572F}.sx .gh-url em u{width:7px;height:7px;border-radius:50%;background:#3F9A4A;box-shadow:0 0 0 0 rgba(63,154,74,.6);animation:ghPulse 2s infinite}
@keyframes ghPulse{70%{box-shadow:0 0 0 7px rgba(63,154,74,0)}100%{box-shadow:0 0 0 0 rgba(63,154,74,0)}}.sx .gh-live img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}.sx .gh-dep{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:#14130F;color:#F3F1EA}.sx .gh-dep div{display:flex;flex-direction:column;font-size:11px;color:rgba(243,241,234,.55)}.sx .gh-dep div b{font-size:12px;font-weight:500;color:#F3F1EA}.sx .gh-dep em{display:flex;align-items:center;gap:7px;font-style:normal;font-size:11.5px;padding:6px 10px;border:1px solid rgba(243,241,234,.22)}.sx .gh-dep em i{width:12px;display:grid}.sx .gh-dep em svg{width:12px}.sx .sx-sq{padding:clamp(14px,2vw,28px)}
@media(prefers-reduced-motion:reduce){.sx .gh-l{animation:none;opacity:1}.sx .gh-f:before{animation:none}}.sx .gh-f:before{display:none}.sx .gh-f{animation:ghRead 6s infinite;animation-delay:calc(var(--i)*1.5s)}
@keyframes ghRead{0%{background:transparent;box-shadow:none}4%,18%{background:rgba(157,196,159,.14);box-shadow:inset 2px 0 #9DC49F}24%,100%{background:transparent;box-shadow:none}}.sx .gh-files{margin:0 12px 12px}.sx .gh-top{padding:12px 14px 10px}.sx .sx-sqs .sx-sq>*{width:300px;flex:none;zoom:var(--z,1)}.sx .sx-sqs .sx-sq .gh-live{width:300px}.sx .gh-fn{gap:10px}.sx .gh-fn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.sx .gh-fn em{white-space:nowrap}.sx .gh-dep em{white-space:nowrap}.sx .gh-dep div span{white-space:nowrap}


/* agencies (agn/), generated from the artifact builder, scoped to .agx */
.agx .ag-hero{background:radial-gradient(60% 55% at 50% 0%,rgba(157,196,159,.22) 0%,rgba(45,87,47,.12) 40%,rgba(20,19,15,0) 72%),#14130F;color:#F3F1EA;text-align:center;
  min-height:calc(100svh - 65px);display:flex;align-items:center;padding:clamp(40px,6vh,80px) 0}.agx .ag-hero .wrap{width:100%}.agx .ag-hero h1{font-size:clamp(36px,5vw,68px);line-height:1.04;letter-spacing:-.03em;font-weight:500;max-width:18ch;margin:0 auto;color:#F3F1EA;text-wrap:balance}.agx .ag-sub{margin:20px auto 30px;max-width:48ch;font-size:clamp(16px,1.5vw,19px);color:rgba(243,241,234,.7);text-wrap:balance}.agx .ag-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:0}.agx .ag-o{color:#F3F1EA!important;border-color:rgba(243,241,234,.3)!important}.agx .ag-o:hover{border-color:#F3F1EA!important}.agx .sec p,.agx .sec h2,.agx .sec h3,.agx .faqs summary{text-wrap:pretty}.agx .ag-month{margin-top:clamp(28px,3.4vw,48px)}.agx .ag-mr{display:grid;grid-template-columns:130px minmax(0,1fr);gap:24px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}.agx .ag-ml{font-size:17px;font-weight:500;color:var(--ink60)}.agx .ag-ml.on{color:#2D572F}.agx .ag-m{display:flex;height:72px;gap:3px}.agx .ag-m span{display:flex;flex-direction:column;justify-content:center;padding:0 16px;min-width:0;color:#F3F1EA}.agx .ag-m b{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.agx .ag-m em{font-style:normal;font-size:13px;opacity:.75}.agx .ag-m .s{background:#9A6A1C}.agx .ag-m .u{background:#CF9536}.agx .ag-m .n{background:#2D572F}.agx .ag-m .r{background:#5E8B5F}.agx .ag-mn{margin:14px 0 0;font-size:13px;color:var(--ink40)}.agx .ag-sq{aspect-ratio:1;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;padding:clamp(20px,3.4vw,48px)}.agx .ag-prs{width:100%;background:rgba(20,19,15,.72);border:1px solid rgba(243,241,234,.2);color:#F3F1EA;padding:6px 18px 8px}.agx .ag-prh{margin:10px 0 4px!important;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,241,234,.55)!important}.agx .ag-pr{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid rgba(243,241,234,.1)}.agx .ag-pr span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.agx .ag-pr b{font-size:14.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.agx .ag-pr em{font-style:normal;font-size:12px;color:rgba(243,241,234,.5)}.agx .ag-pr i{font-style:normal;font-size:12px;padding:4px 9px;white-space:nowrap}.agx .ag-pr i.w{background:rgba(207,149,54,.2);color:#E3B970}.agx .ag-pr i.o{background:rgba(157,196,159,.2);color:#9DC49F}.agx .ag-safe{width:100%;display:flex;flex-direction:column;gap:10px}.agx .ag-store{display:grid;grid-template-columns:minmax(0,1.3fr) 1fr 1fr;gap:10px;align-items:center;background:rgba(20,19,15,.72);border:1px solid rgba(243,241,234,.2);padding:14px 16px;color:#F3F1EA;font-size:13px}.agx .ag-store b{font-size:15px;font-weight:500}.agx .ag-store span{color:#9DC49F}.agx .ag-certs{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}.agx .ag-certs img{width:64px;height:64px;filter:brightness(2.2) contrast(.9)}.agx .ag-k{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(32px,4vw,56px);border-top:1px solid rgba(243,241,234,.4)}.agx .ag-k div{padding-top:24px}.agx .ag-k b{display:block;font-size:clamp(48px,6vw,84px);font-weight:500;letter-spacing:-.035em;line-height:1;color:#F3F1EA}.agx .ag-k span{display:block;margin-top:12px;font-size:15px;color:rgba(243,241,234,.7)}.agx .ag-kp{margin:40px 0 0;font-size:clamp(18px,1.8vw,22px);color:#9DC49F}.agx .ag-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(28px,3.4vw,48px)}.agx .ag-wv{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center}.agx .ag-f{display:flex;flex-direction:column;gap:6px;background:rgba(20,19,15,.72);border:1px solid rgba(243,241,234,.2);padding:18px 22px;color:#F3F1EA;min-width:60%}.agx .ag-f b{font-size:40px;font-weight:500;letter-spacing:-.03em;line-height:1}.agx .ag-f b.sm{font-size:26px}.agx .ag-f em{font-style:normal;font-size:13px;color:rgba(243,241,234,.7)}.agx .ag-ways h3{margin:18px 0 6px;font-size:20px}.agx .ag-ways p{margin:0;font-size:15px;color:var(--ink60)}@media(max-width:900px){.agx .ag-hub{width:100%}.agx .ag-mr{grid-template-columns:1fr;gap:10px}.agx .ag-m b{font-size:13px}.agx .ag-m span{padding:0 8px}.agx .ag-k,.agx .ag-ways{grid-template-columns:1fr}.agx .ag-store{grid-template-columns:1fr}}.agx .ag-fan{position:relative;height:clamp(240px,30vh,340px);max-width:1000px;width:100%;margin:clamp(40px,6vh,72px) auto 0}.agx .ag-sh{position:absolute;bottom:40px;left:50%;width:36%;margin:0;background:#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.85)}.agx .ag-sh img{display:block;width:100%;height:auto}.agx .ag-sh.f0{transform:translateX(-160%) rotate(-10deg) translateY(30px);z-index:1}.agx .ag-sh.f1{transform:translateX(-110%) rotate(-5deg) translateY(10px);z-index:2}.agx .ag-sh.f2{transform:translateX(-50%);z-index:3}.agx .ag-sh.f3{transform:translateX(10%) rotate(5deg) translateY(10px);z-index:2}.agx .ag-sh.f4{transform:translateX(60%) rotate(10deg) translateY(30px);z-index:1}.agx .ag-hero{overflow:hidden}.agx .ag-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:clamp(28px,3.4vw,48px);border-top:1px solid var(--ink)}.agx .ag-step{padding:22px 20px 24px 0;border-right:1px solid var(--line)}.agx .ag-step+.ag-step{padding-left:20px}.agx .ag-step:last-child{border-right:0}.agx .ag-n{display:block;font-size:13px;color:var(--ink40)}.agx .ag-who{display:inline-block;margin:12px 0 14px;font-size:12px;padding:4px 10px;background:#14130F;color:#F3F1EA}.agx .ag-step.ari .ag-who{background:#2D572F}.agx .ag-step h3{margin:0 0 8px;font-size:19px;line-height:1.25}.agx .ag-step p{margin:0;font-size:14.5px;color:var(--ink60)}.agx .ag-repos{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:36px;padding:22px 24px;background:#14130F;color:#F3F1EA}.agx .ag-repos p{margin:0;font-size:16px}.agx .ag-repos>div{display:flex;gap:22px;flex-wrap:wrap}.agx .ag-repos span{display:flex;align-items:center;gap:8px;font-size:15px;color:rgba(243,241,234,.85)}.agx .ag-repos i{width:22px;height:22px;display:block}.agx .ag-repos svg{width:100%;height:100%}.agx .sec.dark .ag-mr{border-bottom-color:rgba(243,241,234,.14)}.agx .sec.dark .ag-ml{color:rgba(243,241,234,.7)}.agx .sec.dark .ag-ml.on{color:#9DC49F}.agx .sec.dark .ag-mn{color:rgba(243,241,234,.45)}@media(max-width:900px){.agx .ag-steps{grid-template-columns:1fr}.agx .ag-step{border-right:0;border-bottom:1px solid var(--line);padding-left:0!important}.agx .ag-fan{height:200px}}.agx .ag-mr>*{min-width:0}.agx .ag-m{overflow:hidden}


/* hyva (hyv/), generated from the artifact builder, scoped to .hyx */
.hyx .sec p,.hyx .sec h2,.hyx .sec h3,.hyx .faqs summary{text-wrap:pretty}.hyx .hy-hero,.hyx .hy-brand{--g:#9DC49F}.hyx .hy-hero{position:relative;overflow:hidden;background:radial-gradient(60% 55% at 50% 0%,rgba(157,196,159,.22) 0%,rgba(45,87,47,.12) 40%,rgba(20,19,15,0) 72%),#14130F;
  color:#F3F1EA;text-align:center;height:calc(100svh - 65px);min-height:600px;display:flex;flex-direction:column}.hyx .hy-ht{position:relative;z-index:2;padding-top:clamp(36px,7vh,84px)}.hyx .hy-hero h1{font-size:clamp(40px,6vw,84px);line-height:1.02;letter-spacing:-.035em;font-weight:500;color:#F3F1EA;margin:0 auto;max-width:16ch;text-wrap:balance}.hyx .hy-sub{margin:18px auto 28px;max-width:44ch;font-size:clamp(17px,1.5vw,20px);color:rgba(243,241,234,.72);text-wrap:balance}.hyx .hy-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:0}.hyx .hy-o{color:#F3F1EA!important;border-color:rgba(243,241,234,.3)!important}.hyx .hy-o:hover{border-color:#F3F1EA!important;background:rgba(243,241,234,.06)!important}.hyx .hy-wall{position:relative;flex:1;min-height:0;margin-top:clamp(20px,4vh,48px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 62%,transparent 100%)}.hyx .hy-wall:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,19,15,.55),rgba(45,87,47,.18) 50%,rgba(20,19,15,.4));pointer-events:none}.hyx .hy-tilt{position:absolute;left:50%;top:-6%;width:max(1500px,130vw);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;
  transform:translateX(-50%) perspective(1800px) rotateX(34deg) rotateZ(-9deg);transform-origin:50% 0}.hyx .hy-col{overflow:visible}.hyx .hy-run{display:flex;flex-direction:column;gap:22px;animation:hyUp 70s linear infinite}.hyx .hy-col.c1 .hy-run,.hyx .hy-col.c3 .hy-run{animation-name:hyDown;animation-duration:84s}.hyx .hy-col.c2 .hy-run{animation-duration:62s}.hyx .hy-run img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;background:#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.9);outline:1px solid rgba(243,241,234,.08)}@keyframes hyUp{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 11px))}}@keyframes hyDown{from{transform:translateY(calc(-50% - 11px))}to{transform:translateY(0)}}.hyx .hy-brand{position:relative;overflow:hidden;background:#14130F}.hyx .hy-brand .wrap{position:relative;z-index:1}.hyx .hy-bands{position:absolute;inset:-20%;background:repeating-linear-gradient(112deg,rgba(157,196,159,0) 0 140px,rgba(157,196,159,.05) 140px 230px,rgba(157,196,159,0) 230px 420px),
  radial-gradient(50% 40% at 80% 10%,rgba(45,87,47,.45),transparent 70%),radial-gradient(40% 40% at 10% 90%,rgba(45,87,47,.35),transparent 70%);
  animation:hyBands 26s linear infinite}@keyframes hyBands{from{transform:translateX(0)}to{transform:translateX(420px)}}.hyx .hy-bh{text-align:center;max-width:860px;margin:0 auto}.hyx .hy-bh img{width:clamp(96px,9vw,128px);margin:0 auto 28px;display:block;filter:invert(1) sepia(.15)}.hyx .hy-bh h2{font-size:clamp(36px,5.2vw,72px);line-height:1.02;letter-spacing:-.035em;font-weight:500;color:#F3F1EA;margin:0;text-wrap:balance}.hyx .hy-bh p{margin:20px auto 0;max-width:50ch;font-size:clamp(16px,1.4vw,19px);color:rgba(243,241,234,.7)}.hyx .hy-feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(40px,5vw,72px)}.hyx .hy-feat figure{margin:0;transition:transform .35s cubic-bezier(.2,.7,.2,1)}.hyx .hy-feat figure:hover{transform:translateY(-6px)}.hyx .hy-fr{background:#fff;box-shadow:0 40px 80px -40px rgba(0,0,0,.95);outline:1px solid rgba(243,241,234,.12)}.hyx .hy-fr span{display:block;padding:7px 12px;font-size:11.5px;color:rgba(20,19,15,.55);background:#ECEAE3;border-bottom:1px solid rgba(20,19,15,.08)}.hyx .hy-fr img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}.hyx .hy-feat figcaption{margin-top:14px;font-size:16px;color:#F3F1EA}.hyx .hy-names{margin:clamp(56px,7vw,96px) calc(50% - 50vw) 0;display:flex;flex-direction:column;gap:14px}.hyx .hy-mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}.hyx .hy-mq>div{display:flex;width:max-content;animation:hyMq 90s linear infinite}.hyx .hy-mq.r>div{animation-direction:reverse;animation-duration:100s}.hyx .hy-mq span{font-family:"Golos Text",Inter,sans-serif;font-size:clamp(28px,3.6vw,52px);font-weight:500;letter-spacing:-.03em;white-space:nowrap;color:rgba(243,241,234,.9);padding:0 .55em}.hyx .hy-mq span:after{content:"";display:inline-block;width:.18em;height:.18em;background:#9DC49F;margin-left:1.1em;vertical-align:middle}.hyx .hy-mq.r span{color:rgba(157,196,159,.85)}@keyframes hyMq{to{transform:translateX(-50%)}}.hyx .hy-list{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.hyx .hy-prods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);margin-top:clamp(28px,3.4vw,48px)}.hyx .hy-p h3{margin:18px 0 6px;font-size:21px;font-weight:500;letter-spacing:-.02em}.hyx .hy-p p{margin:0;font-size:15px;color:var(--ink60);max-width:36ch}.hyx .hy-sq{aspect-ratio:1;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;padding:clamp(18px,2.6vw,36px);overflow:hidden}.hyx .hy-p .hy-sq{transition:transform .4s cubic-bezier(.2,.7,.2,1)}.hyx .hy-p:hover .fx{transform:translateY(-6px) scale(1.02)}.hyx .fx{width:100%;background:rgba(20,19,15,.8);border:1px solid rgba(243,241,234,.2);color:#F3F1EA;padding:16px;font-size:13px;backdrop-filter:blur(8px);box-shadow:0 30px 60px -30px rgba(0,0,0,.8);transition:transform .45s cubic-bezier(.2,.7,.2,1)}.hyx .fl{margin:0 0 12px!important;font-size:11px!important;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,241,234,.55)!important}.hyx .fx-store{background:#F6F4EE;color:#14130F;padding:0}.hyx .fs-nav{display:flex;gap:12px;align-items:center;padding:10px 12px;border-bottom:1px solid rgba(20,19,15,.1);font-size:11px}.hyx .fs-nav b{margin-right:auto;letter-spacing:.12em;font-size:11px}.hyx .fs-hero{margin:10px;height:74px;background:linear-gradient(120deg,#2D572F,#5E8B5F);color:#F3F1EA;display:flex;flex-direction:column;justify-content:flex-end;padding:10px 12px}.hyx .fs-hero b{font-size:15px;font-weight:500}.hyx .fs-hero em{font-style:normal;font-size:11px;opacity:.8}.hyx .fs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 10px 12px}.hyx .fs-grid span{display:flex;flex-direction:column;gap:2px}.hyx .fs-grid i{display:block;aspect-ratio:1;background:#E4E0D4}.hyx .fs-grid span:nth-child(2) i{background:#D9DDD0}.hyx .fs-grid span:nth-child(3) i{background:#EADCC6}.hyx .fs-grid b{font-size:11px;font-weight:500;margin-top:4px}.hyx .fs-grid em{font-style:normal;font-size:10.5px;color:rgba(20,19,15,.6)}.hyx .co-r{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid rgba(243,241,234,.1)}.hyx .co-r span{color:rgba(243,241,234,.55)}.hyx .co-r b{font-weight:500}.hyx .co-pay{display:flex;gap:6px;padding:10px 0;border-top:1px solid rgba(243,241,234,.1)}.hyx .co-pay span{flex:1;text-align:center;padding:7px 0;border:1px solid rgba(243,241,234,.2);font-size:12px}.hyx .co-pay .on{border-color:#9DC49F;color:#9DC49F}.hyx .co-tot{display:flex;justify-content:space-between;padding:10px 0 12px;border-top:1px solid rgba(243,241,234,.1);font-size:15px}.hyx .co-btn{background:#F3F1EA;color:#14130F;text-align:center;padding:10px;font-weight:500}.hyx .ui-chips{display:flex;flex-wrap:wrap;gap:8px}.hyx .ui-chips span{padding:8px 12px;border:1px solid rgba(243,241,234,.2);font-size:12.5px}.hyx .ui-chips .on{background:#9DC49F;color:#14130F;border-color:#9DC49F}.hyx .cms-b{border:1px dashed rgba(243,241,234,.3);padding:10px;margin-bottom:8px;font-size:12px;color:rgba(243,241,234,.8)}.hyx .cms-b.big{padding:22px 10px;background:rgba(157,196,159,.12)}.hyx .cms-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hyx .cms-s{display:flex;justify-content:space-between;align-items:center;margin-top:4px;font-size:12px;color:#9DC49F}.hyx .cms-s em{font-style:normal;color:#F3F1EA;border:1px solid rgba(243,241,234,.3);padding:5px 10px}.hyx .fx-stack{background:none;border:0;box-shadow:none;backdrop-filter:none;padding:0;display:flex;flex-direction:column;gap:8px}.hyx .fx-stack div{display:flex;justify-content:space-between;align-items:center;background:rgba(20,19,15,.82);border:1px solid rgba(243,241,234,.2);padding:13px 16px;
  margin-left:calc(var(--i)*14px);margin-right:calc((4 - var(--i))*14px);backdrop-filter:blur(8px)}.hyx .fx-stack b{font-weight:500;font-size:14px}.hyx .fx-stack i,.hyx .up-r i,.hyx .hy-ok i{width:18px;height:18px;border-radius:50%;background:#2D572F;color:#F3F1EA;display:grid;place-items:center;flex:none}.hyx .fx-stack i svg,.hyx .up-r i svg,.hyx .hy-ok i svg{width:11px}body.sharp .hyx .fx-stack i,body.sharp .hyx .up-r i,body.sharp .hyx .hy-ok i,body.sharp .hyx .hy-wallx i{border-radius:50%!important}.hyx .b2b-r{display:flex;justify-content:space-between;padding:9px 0;border-top:1px solid rgba(243,241,234,.1)}.hyx .b2b-r span{color:rgba(243,241,234,.7);font-family:ui-monospace,Menlo,monospace;font-size:12px}.hyx .b2b-r b{font-weight:500;border:1px solid rgba(243,241,234,.2);padding:2px 10px;font-size:12px}.hyx .b2b-a{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.hyx .b2b-a span{text-align:center;padding:9px 0;border:1px solid rgba(243,241,234,.3)}.hyx .b2b-a .on{background:#F3F1EA;color:#14130F;border-color:#F3F1EA;font-weight:500}.hyx .hy-ex{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(28px,5vw,80px);align-items:center;margin-top:clamp(28px,3.4vw,48px)}.hyx .hy-exs b{display:block;font-size:clamp(72px,10vw,148px);font-weight:500;letter-spacing:-.05em;line-height:.9;color:#F3F1EA}.hyx .hy-exs p{margin:24px 0 0;font-size:clamp(17px,1.5vw,20px);color:rgba(243,241,234,.72);max-width:32ch}.hyx .hy-wallx{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:rgba(243,241,234,.12);border:1px solid rgba(243,241,234,.12)}.hyx .hy-wallx span{position:relative;aspect-ratio:1;background:#14130F;display:grid;place-items:center;transition:background .3s}.hyx .hy-wallx span:hover{background:#1d1c17}.hyx .hy-wallx img{max-width:56%;max-height:34%;filter:brightness(0) invert(1);opacity:.8}.hyx .hy-wallx i{position:absolute;right:8px;top:8px;width:18px;height:18px;border-radius:50%;background:#2D572F;color:#F3F1EA;display:grid;place-items:center;
  opacity:0;transform:scale(.4);transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--d)*70ms)}.hyx .hy-wallx i svg{width:11px}.hyx .hy-wallx.in i{opacity:1;transform:none}.hyx .hy-wallx .own{background:#2D572F;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px}.hyx .hy-wallx .own:hover{background:#346637}.hyx .hy-wallx .own em{font-style:normal;font-size:18px;color:#F3F1EA}.hyx .hy-wallx .own small{font-size:11.5px;color:rgba(243,241,234,.8)}.hyx .hy-wallx .own i{background:#F3F1EA;color:#2D572F}.hyx .hy-glass{width:100%;background:rgba(20,19,15,.82);border:1px solid rgba(243,241,234,.2);color:#F3F1EA;padding:20px;backdrop-filter:blur(8px);box-shadow:0 40px 80px -40px rgba(0,0,0,.9);font-size:14px}.hyx .hy-me{margin-left:auto;width:fit-content;max-width:90%;background:rgba(243,241,234,.14);border:1px solid rgba(243,241,234,.16);padding:11px 14px}.hyx .hy-code{margin-top:14px;background:#0E0D0A;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.75;color:#CFE3CF;overflow:hidden}.hyx .hy-cb{display:flex;justify-content:space-between;gap:10px;padding:9px 14px;border-bottom:1px solid rgba(243,241,234,.12);color:rgba(243,241,234,.6)}.hyx .hy-cb em{font-style:normal;color:#9DC49F}.hyx .hy-code span{display:block;padding:0 14px;white-space:pre;background:rgba(157,196,159,.1)}.hyx .hy-code span:last-child{padding-bottom:10px}.hyx .hy-ok{display:flex;align-items:center;gap:10px;margin-top:14px;color:#9DC49F}.hyx .up-r{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid rgba(243,241,234,.1)}.hyx .up-r span{flex:1;min-width:0}.hyx .up-r em{font-style:normal;font-size:12.5px;color:rgba(243,241,234,.5)}@media(max-width:900px){.hyx .hy-feat,.hyx .hy-prods{grid-template-columns:1fr 1fr}.hyx .hy-ex{grid-template-columns:1fr}.hyx .hy-wallx{grid-template-columns:repeat(4,minmax(0,1fr))}.hyx .hy-tilt{width:1100px;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.hyx .hy-run{gap:14px}}@media(max-width:600px){.hyx .hy-feat,.hyx .hy-prods{grid-template-columns:1fr}.hyx .hy-code span{white-space:pre-wrap}.hyx .hy-hero h1{font-size:40px}.hyx .hy-hero{min-height:560px}}.hyx .hy-ex>*,.hyx .hy-feat>*,.hyx .hy-prods>*{min-width:0}@media(prefers-reduced-motion:reduce){.hyx .hy-run,.hyx .hy-mq>div,.hyx .hy-bands{animation:none}}.hyx .sec .frow.flip{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}@media(max-width:900px){.hyx .sec .frow.flip{grid-template-columns:1fr}}.hyx .hy-wallx span{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}.hyx .hy-wallx img{max-height:30%}.hyx .hy-wallx small{font-size:11.5px;color:rgba(243,241,234,.5)}.hyx .hy-on .frow .hy-sq,.hyx .sec .frow .hy-sq{width:min(100%,460px);justify-self:center}.hyx .sec .frow,.hyx .sec .frow.flip{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}@media(max-width:900px){.hyx .sec .frow,.hyx .sec .frow.flip{grid-template-columns:1fr}}.hyx .hy-cmp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(28px,3.4vw,48px);border-top:1px solid var(--ink)}.hyx .hy-cmp>div{padding:26px clamp(18px,2.6vw,36px) 8px 0;min-width:0}.hyx .hy-cmp>div+div{padding-left:clamp(18px,2.6vw,36px);border-left:1px solid var(--line)}.hyx .hy-ck{margin:0 0 18px!important;font-size:12px!important;letter-spacing:.14em;text-transform:uppercase;color:var(--ink40)!important}.hyx .hy-cmp b{display:block;font-size:clamp(40px,4.6vw,66px);font-weight:500;letter-spacing:-.04em;line-height:1;color:#2D572F}.hyx .hy-cmp span{display:block;margin-top:10px;font-size:15px;color:var(--ink)}.hyx .hy-cmp i{display:block;height:1px;background:var(--line);margin:22px 0}.hyx .hy-cmp em{display:block;font-style:normal;font-size:clamp(24px,2.4vw,32px);font-weight:500;letter-spacing:-.02em;color:var(--ink40)}.hyx .hy-cmp small{display:block;margin-top:6px;font-size:14px;color:var(--ink40)}@media(max-width:760px){.hyx .hy-cmp{grid-template-columns:1fr}.hyx .hy-cmp>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}}.hyx .hy-mq span{display:flex;align-items:center;justify-content:center;padding:0 clamp(28px,3.4vw,52px);height:72px}.hyx .hy-mq span:after{display:none}.hyx .hy-mq img{display:block;max-height:40px;max-width:170px;width:auto;height:auto;filter:brightness(0) invert(1);opacity:.85}.hyx .hy-mq.r img{opacity:.6}.hyx .hy-mq>div{align-items:center}@media(max-width:600px){.hyx .hy-mq span{height:56px;padding:0 22px}.hyx .hy-mq img{max-height:30px;max-width:120px}}.hyx .hy-hero h1{max-width:20ch}

.hyx .hy-ic{display:block;width:82%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));transition:transform .45s cubic-bezier(.2,.7,.2,1)}.hyx .hy-p:hover .hy-ic{transform:translateY(-8px)}
/* use-case pages on the hyva standard (b_pages.py uc_*), 2026-09-28 */
.hyx .uc-hero{height:auto;min-height:0;padding-bottom:clamp(48px,6vw,96px)}.hyx .uc-hv{box-sizing:border-box;width:100%;min-width:0;position:relative;z-index:2;margin-top:clamp(40px,5vw,72px);text-align:left}.hyx .uc-hv .hero-hub{margin:0}.ucx .ucards{grid-template-columns:repeat(3,minmax(0,1fr))}.ucx .ucard-c p{max-width:36ch}.ucx .hy-cmp b{font-size:clamp(34px,3.9vw,58px)}
@media(max-width:900px){.ucx .ucards{grid-template-columns:1fr 1fr}}@media(max-width:600px){.ucx .ucards{grid-template-columns:1fr}.hyx .uc-hero h1{font-size:38px}}
/* how it works: the one minute video in the hero (2026-09-29) */
.hw-herov.hw-herovid{height:auto;padding-bottom:clamp(40px,6vw,88px)}
.hw-herovid .hw-shot.hw-vid{flex:none;display:block}
.hw-vbox{position:relative;width:100%;aspect-ratio:16/9;background:#14130F;border:1px solid rgba(243,241,234,.14);box-shadow:0 40px 100px -40px rgba(0,0,0,.9);overflow:hidden}
.hw-vbox video{display:block;width:100%;height:100%;object-fit:cover;background:#14130F}
.hw-vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:14px;padding:14px 22px 14px 14px;
  background:rgba(20,19,15,.82);color:#F3F1EA;border:1px solid rgba(243,241,234,.28);font:500 16px/1 var(--sans,Inter,sans-serif);cursor:pointer;
  backdrop-filter:blur(8px);transition:background .2s,border-color .2s}
.hw-vplay:hover{background:#2D572F;border-color:#2D572F}
.hw-vplay em{font-style:normal;color:rgba(243,241,234,.6);margin-left:6px}
.hw-vic{width:44px;height:44px;display:grid;place-items:center;background:#2D572F;color:#fff}
.hw-vplay:hover .hw-vic{background:#F3F1EA;color:#2D572F}
.hw-vbox.on .hw-vplay{display:none}
@media(max-width:600px){.hw-vplay{padding:10px 16px 10px 10px;font-size:14px}.hw-vic{width:36px;height:36px}}
.hw-vplay span:last-child{white-space:nowrap}
/* how it works: three steps on the homepage card (2026-09-29) */
.hw-uc3 .ucard-c>h3{margin:22px 0 0;font-size:21px;font-weight:500;letter-spacing:-.022em}.hw-uc3 .ucard-c>p{margin-top:8px}
/* merchants wall: the 1,000+ box takes the empty slots of the last row (29 logos) */
.mz-wall{grid-template-columns:repeat(8,minmax(0,1fr))}
.mz-wall .more{grid-column:span 3;aspect-ratio:auto;flex-direction:column!important;gap:6px!important;text-align:center;padding:14px 18px}
.mz-wall .more em{font-size:13.5px;line-height:1.35}
@media(max-width:900px){.mz-wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:480px){.mz-wall{grid-template-columns:repeat(2,minmax(0,1fr))}.mz-wall .more{grid-column:span 1}.mz-wall .more b{font-size:22px}.mz-wall .more em{font-size:12px}}
/* use-case pages: the video hero fills the first screen (2026-09-29) */
.hyx .uc-vhero{height:calc(100svh - var(--navh,65px));min-height:620px;padding-bottom:clamp(20px,3vh,36px)}
.hyx .uc-vw{flex:1;min-height:0;display:flex;justify-content:center;align-items:flex-start;margin-top:clamp(22px,4vh,44px);position:relative;z-index:2;width:100%}
.hyx .uc-vbox{height:100%;width:auto;max-width:100%;aspect-ratio:16/9}
.hyx .uc-vis{margin-top:clamp(24px,3vw,40px)}
@media(max-width:700px){.hyx .uc-vhero{height:auto;min-height:0}.hyx .uc-vbox{width:100%;height:auto}}
.hyx .uc-vhero h1{font-size:clamp(36px,4.4vw,62px)}.hyx .uc-vhero .hy-sub{margin:14px auto 22px}.hyx .uc-vhero .hy-ht{padding-top:clamp(24px,5vh,56px)}
/* content: merchandising as small looped videos */
.ucx .uc-loops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);margin-top:clamp(28px,3.4vw,48px)}
.ucx .uc-loops figure{margin:0;min-width:0}
.ucx .uc-lv{aspect-ratio:16/10;background:#14130F;border:1px solid rgba(20,19,15,.12);overflow:hidden}
.ucx .uc-lv video{display:block;width:100%;height:100%;object-fit:cover}
.ucx .uc-loops h3{margin:18px 0 6px;font-size:21px;font-weight:500;letter-spacing:-.02em}
.ucx .uc-loops p{margin:0;font-size:15px;color:var(--ink60);max-width:36ch}
@media(max-width:900px){.ucx .uc-loops{grid-template-columns:1fr}}
.hyx .uc-hero .hy-sub{max-width:68ch;text-wrap:balance}
.hyx .uc-vhero h1{max-width:24ch}
@media(max-width:600px){.hyx .uc-hero h1{font-size:33px}}
/* small storefront pieces on the role cards (teams and roles) */
.sfs{display:flex;flex-direction:column;width:100%;flex:none;background:#fff;color:#1d1c18;font:12px/1.35 Inter,-apple-system,sans-serif;box-shadow:0 24px 50px -24px rgba(0,0,0,.7);text-align:left}
.sfs-top{background:#2D572F;color:#fff;font-size:10.5px;padding:6px 10px;text-align:center}
.sfs-nav{display:flex;gap:10px;align-items:center;padding:8px 10px;border-bottom:1px solid #eee;font-size:10px}
.sfs-nav b{margin-right:auto;letter-spacing:.14em;font-size:10.5px}
.sfs-nav i{font-style:normal;color:#555}
.sfs-hero{margin:8px;height:62px;background:linear-gradient(120deg,#C9B79C,#8E7A5E);display:flex;flex-direction:column;justify-content:flex-end;padding:8px 10px;color:#fff}
.sfs-hero b{font-size:14px;font-weight:500}.sfs-hero u{text-decoration:none;font-size:10px;opacity:.9}
.sfs-h{padding:9px 12px;border-bottom:1px solid #eee;font-weight:600;font-size:12px}
.sfs-r{display:flex;justify-content:space-between;padding:7px 12px}
.sfs-r i{font-style:normal;color:#666}.sfs-r s{color:#999;margin-right:4px;font-weight:400}
.sfs-r b{font-weight:600}
.sfs-note{margin:2px 12px 4px;padding:6px 8px;background:#EEF5EC;color:#2D572F;font-size:10.5px}
.sfs-tot{border-top:1px solid #eee;margin-top:4px;padding-block:9px}
.sfs-sz{display:flex;gap:6px;padding:10px 12px}
.sfs-sz i{font-style:normal;flex:1;text-align:center;padding:6px 0;border:1px solid #ddd;font-size:11px}
.sfs-sz i.on{border-color:#1d1c18;background:#1d1c18;color:#fff}
.sfs-gd{margin:0 12px 12px;border:1px solid #2D572F;display:flex;flex-direction:column}
.sfs-gd b{font-size:10.5px;padding:5px 8px;background:#EEF5EC;color:#2D572F}
.sfs-gd span{display:grid;grid-template-columns:1.4fr repeat(4,1fr);padding:4px 8px;font-size:10.5px}
.sfs-gd span i{font-style:normal}.sfs-gd span i:first-child{color:#666}
.sfs-pm{display:flex;align-items:center;gap:9px;margin:6px 12px 0;padding:8px 10px;border:1px solid #e3e3e3}
.sfs-pm:last-child{margin-bottom:12px}
.sfs-pm i{width:12px;height:12px;border-radius:50%!important;border:1px solid #999;flex:none}
.sfs-pm.on{border-color:#1d1c18}.sfs-pm.on i{border:4px solid #1d1c18}
.sfs-pm b{font-weight:600}.sfs-pm em{margin-left:auto;font-style:normal;color:#666;font-size:10.5px}
.vi-art:has(.sfs) .ui{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
/* how it works: get started on dark (2026-09-30) */
.hw .hw-dark .hw-setup{border-top-color:rgba(243,241,234,.45)}
.hw .hw-dark .hw-setup>div{border-color:rgba(243,241,234,.14)}
.hw .hw-dark .hw-setup .hw-n{color:rgba(243,241,234,.45)}
.hw .hw-dark .hw-setup h3{color:#F3F1EA}.hw .hw-dark .hw-setup p{color:rgba(243,241,234,.66)}
.hw .hw-dark .hw-call{background:rgba(20,19,15,.58);border-color:rgba(243,241,234,.18)}
.hw .hw-dark .hw-call p{color:rgba(243,241,234,.8)}.hw .hw-dark .hw-call p b{color:#F3F1EA}
/* security hero: the visual as wide as the other heroes (2026-09-30) */
.sx .sx-band{max-width:1240px;padding:clamp(40px,7vh,96px) clamp(20px,6vw,120px)}
.sx .sx-acc{max-width:760px;padding:24px 30px 12px}
.sx .sx-ar{font-size:17px;padding:17px 0}.sx .sx-ar em{font-size:14px}.sx .sx-ar i{width:28px;height:28px}
.sx .sx-fl{font-size:12px!important}
/* teams and roles: one tab per role (2026-09-30) */
.rt{margin-top:clamp(24px,3vw,40px)}
.rt-t{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.rt-t button{font:inherit;font-size:15px;padding:10px 16px;border:1px solid var(--line2);background:none;color:var(--ink60);cursor:pointer}
.rt-t button:hover{color:var(--ink);border-color:var(--ink)}
.rt-t button[aria-selected="true"]{background:var(--ink);color:#F3F1EA;border-color:var(--ink)}
.rt-p{display:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,4vw,60px);align-items:center}
.rt-p.on{display:grid}
.rt-v{aspect-ratio:1/0.82;background:radial-gradient(62% 58% at 20% 0%,rgba(157,196,159,.36),rgba(45,87,47,.22) 34%,rgba(45,87,47,0) 70%),#14130F;display:flex;align-items:center;justify-content:center;padding:clamp(20px,4vw,56px)}
.rt-v>*{width:100%;max-width:420px}
.rt-c h3{margin:0 0 8px;font-size:clamp(24px,2.4vw,32px);font-weight:500;letter-spacing:-.025em}
.rt-c p{margin:0 0 20px;color:var(--ink60)}
.rt-c ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rt-c li{padding:13px 16px;border:1px solid var(--line);background:#fff;font-size:15px}
.rt-c li:before{content:"\201c";color:#2D572F}.rt-c li:after{content:"\201d";color:#2D572F}
@media(max-width:760px){.rt-p.on{grid-template-columns:1fr}.rt-t{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.rt-t button{flex:none}}
.sx .sx-hero>.wrap{width:100%;box-sizing:border-box}
.rt-v{padding:0;background:none;aspect-ratio:auto}.rt-v .vi-pic{display:block;aspect-ratio:1/0.82;width:100%;max-width:none}.rt-v .vi-art .ui{max-width:420px;margin:0 auto}
/* merchants: three ways to run it (2026-09-30) */
.mw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center}
.mw-l h2{margin:0;font-size:clamp(34px,4.4vw,60px);line-height:1.02;letter-spacing:-.035em;font-weight:500}
.mw-l p{margin:18px 0 0;color:var(--ink60);font-size:17px;max-width:40ch}
.mw-r{display:flex;flex-direction:column;gap:12px}
.mw-r .kick{margin-bottom:4px}
.mw-c{border:1px solid var(--line);padding:22px 24px;background:#fff}
.mw-c.on{background:#2D572F;border-color:#2D572F;color:#F3F1EA}
.mw-c h3{margin:0 0 6px;font-size:18px;font-weight:500;letter-spacing:-.015em}
.mw-c p{margin:0;font-size:15px;color:var(--ink60)}.mw-c.on p{color:rgba(243,241,234,.8)}
.mw-r .arrow{margin-top:8px;align-self:flex-start}
@media(max-width:900px){.mw{grid-template-columns:1fr}}
.mz-wall .more{padding:10px 16px!important;gap:2px!important;overflow:hidden}
.mz-wall .more b{font-size:24px}.mz-wall .more em{font-size:12.5px}
/* storefront snippets, second set (2026-09-30) */
.sfs .red{color:#B3261E!important;font-weight:600}
.sfs-dk{background:#1d1c18!important}
.sfs-hero2{background:linear-gradient(120deg,#1d1c18,#3a3a36)!important}
.sfs-err{margin:10px 12px 4px;padding:8px 10px;background:#FDECEC;color:#B3261E;font-size:11.5px}
.sfs-err s{text-decoration-color:rgba(179,38,30,.6)}
.sfs-ok{margin:4px 12px 12px;padding:8px 10px;background:#EEF5EC;color:#2D572F;font-size:11.5px;font-weight:600}
.sfs-lh{display:flex;align-items:center;justify-content:center;gap:18px;padding:16px 12px 8px}
.sfs-lh span{display:flex;flex-direction:column;align-items:center;gap:5px}
.sfs-lh b{width:58px;height:58px;border-radius:50%!important;display:grid;place-items:center;font-size:20px;font-weight:600;border:5px solid}
.sfs-lh b.lo{color:#B3261E;border-color:#F3C2BE}.sfs-lh b.hi{color:#2D572F;border-color:#9DC49F}
.sfs-lh em{font-style:normal;font-size:10.5px;color:#666}.sfs-lh>i{font-style:normal;color:#999}
.sfs-tl{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px 0}.sfs-tl3{grid-template-columns:repeat(3,1fr)}
.sfs-im{position:relative;display:block;aspect-ratio:1;background:#F2EEE7;isolation:isolate}
.sfs-im img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;display:block}
.sfs-im em{position:absolute;left:6px;top:6px;font-style:normal;font-size:10px;font-weight:700;padding:2px 6px;background:#B3261E;color:#fff}
.sfs-im em.g{background:#2D572F}
.sfs-tn{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 12px 12px}
.sfs-tn span{display:flex;flex-direction:column;gap:2px;font-size:11px}.sfs-tn b{font-weight:600}.sfs-tn i{font-style:normal;color:#444}
.sfs-tn s{color:#999;margin-right:4px}.sfs-tn u{text-decoration:none;margin-top:4px;text-align:center;padding:5px 0;background:#1d1c18;color:#fff;font-size:10.5px}
.sfs-hs{display:flex;justify-content:space-between}.sfs-hs em{font-style:normal;font-weight:500;font-size:10.5px;color:#2D572F;border:1px solid #2D572F;padding:2px 6px}
.sfs-tl3{padding-bottom:12px}
.sfs-serp{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-bottom:1px solid #eee;font-size:11px}
.sfs-serp:last-child{border-bottom:0}.sfs-serp em{font-style:normal;color:#4d5156;font-size:10.5px}
.sfs-serp b{color:#1a0dab;font-weight:500;font-size:13px}.sfs-serp span{color:#4d5156;line-height:1.4}
.sfs-pdp{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px}
.sfs-pi{display:flex;flex-direction:column;gap:7px;font-size:11px;min-width:0}.sfs-pi>b{font-size:14px;font-weight:600}.sfs-pi>i{font-style:normal}
.sfs-pi .sfs-sz{padding:0}.sfs-pi .sfs-sz i{padding:4px 0}
.sfs-new{border:1.5px solid #2D572F;background:#EEF5EC;color:#2D572F;padding:5px 8px;font-weight:600;font-size:10.5px}
.sfs-atc{background:#1d1c18;color:#fff;text-align:center;padding:7px 0;font-weight:600;font-size:10.5px}
.sfs-nav i.on{color:#1d1c18;font-weight:600;border-bottom:1.5px solid #1d1c18}
.sfs-mm{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:10px;padding:12px}
.sfs-mm span{display:flex;flex-direction:column;gap:5px;font-size:11px}.sfs-mm b{font-weight:600;font-size:11px}.sfs-mm i{font-style:normal;color:#555}
.sfs-mmi{background:#F2EEE7;isolation:isolate;padding:6px}.sfs-mmi img{width:100%;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}
.sfs-ph{display:flex;justify-content:center;width:100%}
.sfs-phs{width:190px!important;border:8px solid #0e0d0b;border-radius:22px!important;overflow:hidden;min-height:300px}
.sfs-phs .sfs-nav b{margin-right:auto}
.sfs-mnu{display:flex;flex-direction:column}.sfs-mnu i{font-style:normal;font-size:12px;padding:10px 12px;border-bottom:1px solid #eee}
.sfs-mt{background:#1d1c18;color:#fff;text-align:center;padding:12px;font-size:12px;letter-spacing:.2em}
.sfs-mb{display:flex;flex-direction:column;gap:8px;padding:16px 14px;font-size:11.5px;color:#444}
.sfs-mb b{font-size:15px;color:#1d1c18;font-weight:600}.sfs-mb u{text-decoration:none;align-self:flex-start;padding:7px 12px;background:#2D572F;color:#fff;font-weight:600}
.sfs-gr{display:grid;grid-template-columns:1.1fr .6fr 1.6fr;gap:8px;padding:8px 12px;border-bottom:1px solid #eee;font-size:11px}
.sfs-gr i{font-style:normal}.sfs-grh{font-weight:600;color:#666;font-size:10px;text-transform:uppercase;letter-spacing:.04em}
.sfs-gr .n{background:#EEF5EC;color:#2D572F;padding:0 4px}
/* storefront hero: the product page, big */
.sfh{background:radial-gradient(60% 60% at 20% 0%,rgba(157,196,159,.35),rgba(45,87,47,.2) 34%,rgba(45,87,47,0) 70%),#1b1a16;border:1px solid rgba(243,241,234,.14);padding:clamp(24px,5vw,72px);display:flex;justify-content:center}
.sfh .sfs{max-width:760px;font-size:15px}
.sfh .sfs-pdp{gap:28px;padding:28px}.sfh .sfs-pi{gap:12px;font-size:15px}.sfh .sfs-pi>b{font-size:26px}.sfh .sfs-pi>i{font-size:18px}
.sfh .sfs-new,.sfh .sfs-atc{font-size:14px;padding:10px 14px}.sfh .sfs-sz i{font-size:14px;padding:8px 0}
/* use-case comparison rows: the lower halves line up */
.ucx .hy-cmp span{min-height:2.9em}
/* how it works: every story box the same size, contents fit inside (2026-09-30) */
.hw .hw-story .hw-step .hw-vis{overflow:hidden}.hw .hw-story .hw-step .hw-vis>*{zoom:.8}
@media(max-width:900px){.hw .hw-story .hw-step .hw-vis{aspect-ratio:1}.hw .hw-story .hw-step .hw-vis>*{zoom:.7}}
.hw .hw-story .hw-step .hw-vis.hw-bd-silk>*{zoom:.82}@media(max-width:900px){.hw .hw-story .hw-step .hw-vis.hw-bd-silk>*{zoom:.58}}
.hw-an{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}.hw-an.hw-in{opacity:1;transform:none}
.vi-art:has(.sfs) .ui{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 8%}
.sfs-pdp{align-items:start}.sfs-pi .sfs-new,.sfs-pi .sfs-atc{white-space:nowrap}.sfs-pi{overflow:hidden}
/* teams: role visuals as a store window, filling the frame (2026-09-30) */
.rt-v{aspect-ratio:1/0.82;background:radial-gradient(62% 58% at 20% 0%,rgba(157,196,159,.36),rgba(45,87,47,.22) 34%,rgba(45,87,47,0) 70%),#14130F;padding:clamp(18px,3vw,40px);display:flex;align-items:center;justify-content:center}
.rt-v .vi-pic{display:none}
.rt-w{width:100%;max-width:none!important;background:#fff;box-shadow:0 40px 80px -40px rgba(0,0,0,.9);border:1px solid rgba(243,241,234,.18)}
.rt-b{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#ECEAE3;border-bottom:1px solid rgba(20,19,15,.08)}
.rt-b i{width:8px;height:8px;border-radius:50%!important;background:rgba(20,19,15,.18)}
.rt-b span{margin-left:10px;font-size:12px;color:rgba(20,19,15,.55)}
.rt-s{display:flex;justify-content:center;background:#fff}
.rt-s>.sfs{box-shadow:none;width:100%;zoom:1.35}
.rt-s>.pan,.rt-s>.p-trk{width:100%;zoom:1.2;margin:0;background:#1d1c18}
.rt-img{display:block;width:100%;height:auto}
.arr-eq .arr-c{display:flex;flex-direction:column}
.arr-cta{margin:24px 0 0}
@media(max-width:760px){.rt-s>.sfs{zoom:1}.rt-s>.pan{zoom:1}}
/* one hero heading size on every page but the homepage (2026-09-30) */
body:not(:has(.hero2)) main h1:not(.pp-h),body:not(:has(.hero2)) section h1:not(.pp-h){font-size:clamp(36px,4.4vw,62px)!important;line-height:1.04!important;letter-spacing:-.035em}
.mw-l h2{font-size:clamp(28px,3vw,40px)!important;letter-spacing:-.025em}
.mw-l p{font-size:16px}
.hw .hw-hd h2,.hw h2{font-size:clamp(28px,3vw,40px)}
/* hero videos: the same width on every page */
.hyx .uc-vhero{height:auto;min-height:0;padding-bottom:clamp(40px,6vw,88px)}
.hyx .uc-vw{flex:none;display:block}
.hyx .uc-vbox{width:min(100%,1120px);height:auto;margin:0 auto}
/* agencies: each client store as its own small window (2026-09-30) */
.ag-cl{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:radial-gradient(62% 58% at 20% 0%,rgba(157,196,159,.36),rgba(45,87,47,.22) 34%,rgba(45,87,47,0) 70%),#14130F;padding:clamp(18px,2.6vw,34px);aspect-ratio:1;align-content:center;width:min(100%,520px);justify-self:center}
.ag-ct{background:#1b1a16;border:1px solid rgba(243,241,234,.16);display:flex;flex-direction:column;min-width:0}
.ag-ct:first-child{grid-column:1/-1}
.ag-cb{display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:11px;color:rgba(243,241,234,.6);border-bottom:1px solid rgba(243,241,234,.1)}
.ag-cb i{width:7px;height:7px;border-radius:50%!important;background:#9DC49F}
.ag-ct img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top;background:#fff}
.ag-ct:first-child img{aspect-ratio:21/9}
.ag-cf{display:flex;flex-wrap:wrap;gap:5px;padding:8px 10px}
.ag-cf span{font-size:10.5px;padding:3px 7px;border:1px solid rgba(243,241,234,.18);color:rgba(243,241,234,.75)}
.ag-cf span.lk{border-color:rgba(157,196,159,.5);color:#9DC49F}
.ag-certs2{grid-column:1/-1;display:flex;gap:12px;justify-content:flex-end}.ag-certs2 img{height:44px;width:auto}
/* technical: the upgrade step visual no bigger than the other pages squares */
.ucx .hiw-r{max-width:480px;justify-self:end;width:100%}.ucx .hiw-stage{max-width:480px}.ucx .hiw-v .x-win{zoom:.86}
/* admin-style snippets (maintenance) */
.sfs-adm{background:#1d1c18;color:#F3F1EA;font-size:11px;font-weight:600;padding:9px 12px;letter-spacing:.02em}
.sfs-ex{display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid #eee}
.sfs-ex img{width:44px;height:28px;object-fit:contain;filter:brightness(0);opacity:.85}
.sfs-ex span{display:flex;flex-direction:column;gap:2px;min-width:0}.sfs-ex b{font-size:13px;font-weight:600}.sfs-ex i{font-style:normal;font-size:10.5px;color:#777;font-family:ui-monospace,monospace}
.sfs-ex em{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:600;color:#2D572F;background:#EEF5EC;padding:3px 7px}
.sfs-pdp2{grid-template-columns:.8fr 1.2fr;align-items:center;padding-bottom:0}.sfs-pdp2 .sfs-pi>i{color:#2D572F;font-weight:600;font-size:11px}
/* storefront: supported themes (2026-09-30) */
.thms{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:rgba(243,241,234,.12);border:1px solid rgba(243,241,234,.12);margin-top:clamp(24px,3vw,40px)}
.thm{background:#14130F;aspect-ratio:1.25;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px}
.thm img{max-width:70%;max-height:40px;width:auto;filter:brightness(0) invert(1);opacity:.9}.thm.mk img{height:40px}
.thm b{font-size:24px;font-weight:600;color:#F3F1EA;letter-spacing:-.02em}.thm.cu b{font-family:ui-monospace,monospace;color:#9DC49F}
.thm em{font-style:normal;font-size:13px;color:rgba(243,241,234,.6)}
@media(max-width:900px){.thms{grid-template-columns:repeat(3,1fr)}}@media(max-width:480px){.thms{grid-template-columns:repeat(2,1fr)}}
/* a proper phone for the mobile card */
.sfs-phs{width:200px!important;border:9px solid #0e0d0b;border-radius:28px!important;min-height:0;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.sfs-sb{display:flex;justify-content:space-between;padding:6px 14px 2px;font-size:9px;font-weight:600}.sfs-sb i{font-style:normal}
.sfs-mnu i{display:flex;justify-content:space-between;font-weight:500}.sfs-mnu u{text-decoration:none;color:#999}
.sfs-mimg{position:relative;display:block;margin:10px 12px 0;background:#F2EEE7;isolation:isolate}
.sfs-mimg img{width:100%;aspect-ratio:1.6;object-fit:contain;mix-blend-mode:multiply;display:block}
.sfs-mimg em{position:absolute;left:8px;bottom:6px;font-style:normal;font-size:10px;font-weight:600}
.sfs-fixed{display:block;margin:10px 12px 12px;padding:6px 8px;background:#EEF5EC;color:#2D572F;font-size:10px;font-weight:600;text-align:center}
.sfs-phs .sfs-mnu i{padding:6px 12px;font-size:11px}.sfs-phs .sfs-mimg img{aspect-ratio:2.4}.sfs-phs{width:180px!important}
/* 2026-09-30: the plan link sits inside the Ari engineers card */
.arr-go{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;background:#F3F1EA;color:#14130F;font-size:15px;padding:12px 16px;text-decoration:none;transform:translateY(8px)}
.arr-go:hover{background:#fff}.arr-go i{font-style:normal;transition:transform .2s}.arr-go:hover i{transform:translateX(3px)}
.arr-c.on .arr-r:last-of-type{margin-bottom:18px}
/* how it works, step 2: the changed Hartwell page in a browser window */
.hw-sw{display:flex;flex-direction:column;width:88%;background:#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.85);border:1px solid rgba(243,241,234,.18)}
.hw-sw-b{display:flex;align-items:center;gap:5px;padding:8px 10px;background:#ECEAE3;border-bottom:1px solid rgba(20,19,15,.08)}
.hw-sw-b i{width:7px;height:7px;border-radius:50%!important;background:rgba(20,19,15,.18)}
.hw-sw-b em{margin-left:8px;font-style:normal;font-size:11px;color:rgba(20,19,15,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-sw-s{position:relative;display:block;aspect-ratio:1800/1125;overflow:hidden}
.hw-sw-s img{display:block;width:100%;height:100%;object-fit:cover}
.hw-sw-hl{position:absolute;left:53.3%;top:64.2%;width:43.6%;height:8.2%;outline:2px solid #2D572F;outline-offset:2px;animation:hwsw 2.4s ease-in-out infinite}
.hw-sw-tag{position:absolute;left:53.3%;top:74.5%;background:#2D572F;color:#fff;font:600 10px/1 Inter,sans-serif;padding:4px 6px;letter-spacing:.04em}
@keyframes hwsw{0%,100%{box-shadow:0 0 0 0 rgba(45,87,47,.45)}50%{box-shadow:0 0 0 7px rgba(45,87,47,0)}}
@media (prefers-reduced-motion:reduce){.hw-sw-hl{animation:none}}
/* security: what Ari sees and changes, as plain lists */
.sx-lst{width:min(88%,440px);background:rgba(20,19,15,.82);border:1px solid rgba(243,241,234,.16);color:#F3F1EA;font:14px/1.35 Inter,sans-serif;box-shadow:0 30px 60px -30px rgba(0,0,0,.8);backdrop-filter:blur(6px)}
.sx-lst-h{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(243,241,234,.12)}
.sx-lst-h b{font-weight:600;font-size:15px}.sx-lst-h em{font-style:normal;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9DC49F;border:1px solid rgba(157,196,159,.4);padding:3px 7px}
.sx-li{display:flex;gap:12px;align-items:flex-start;padding:11px 18px;border-top:1px solid rgba(243,241,234,.07)}
.sx-li i{flex:none;width:20px;height:20px;display:grid;place-items:center;margin-top:1px}.sx-li i svg{width:14px;height:14px}
.sx-y i{background:rgba(157,196,159,.18);color:#9DC49F}.sx-n i{background:rgba(214,120,100,.16);color:#E39A88}
.sx-li span{display:flex;flex-direction:column;gap:2px;color:rgba(243,241,234,.62);font-size:13px}.sx-li b{color:#F3F1EA;font-weight:500;font-size:14px}
.sx-ch{padding:14px 18px;display:flex;flex-direction:column;gap:3px}.sx-ch b{font-size:16px;font-weight:600}.sx-ch span{font-size:13px;color:rgba(243,241,234,.6)}
.sx-ap{display:flex;align-items:center;gap:12px;margin:8px 14px 14px;padding:12px 14px;border:1px solid rgba(218,180,90,.45);background:rgba(218,180,90,.08)}
.sx-ap i{color:#DAB45A;display:grid}.sx-ap i svg{width:18px;height:18px}
.sx-ap span{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:rgba(243,241,234,.65);flex:1}.sx-ap b{color:#F3F1EA;font-size:14px;font-weight:600}
.sx-ap em{font-style:normal;font-size:13px;background:#F3F1EA;color:#14130F;padding:7px 12px}
@media(max-width:760px){.sx-lst{width:92%;font-size:13px}.sx-li{padding:9px 14px}}
/* merchants: three ways to run it, in the dark Ari style */
.mwx .mw-l p{color:rgba(243,241,234,.66)}
.mwx .mw-l .arrow{color:#F3F1EA}
.mwx .mw-c{background:rgba(243,241,234,.04);border:1px solid rgba(243,241,234,.16);color:#F3F1EA;padding:20px 22px;display:flex;flex-direction:column;transition:border-color .3s,background .3s}
.mwx .mw-c:hover{border-color:rgba(243,241,234,.32)}
.mwx .mw-c.on{background:radial-gradient(70% 90% at 0% 0%,rgba(157,196,159,.18),rgba(45,87,47,0) 70%),rgba(243,241,234,.05);border-color:rgba(157,196,159,.6)}
.mwx .mw-c h3{color:#F3F1EA}.mwx .mw-c.on h3{color:#9DC49F}
.mwx .mw-c p{color:rgba(243,241,234,.66)}.mwx .mw-c.on p{color:rgba(243,241,234,.78)}
.mw-who{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.mw-av{display:flex}.mw-av>*{width:34px;height:34px;border-radius:50%!important;border:2px solid #14130F;margin-left:-8px;object-fit:cover;background:#1d1c18}.mw-av>*:first-child{margin-left:0}
.mw-ari{display:grid;place-items:center;background:#14130F!important;border-color:rgba(157,196,159,.7)!important}.mw-ari svg{width:17px;height:15px}
.mw-who em{font-style:normal;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(243,241,234,.5)}
.mwx .mw-c.on .mw-who em{color:#9DC49F}
.mwx .mw-c .arr-go{margin-top:16px;transform:none;align-self:flex-start}
/* agencies: four equal client tiles in a square, badges beside the text */
.ag-cl2 .ag-ct:first-child{grid-column:auto}
.ag-cl2 .ag-ci{aspect-ratio:4/3;overflow:hidden;background:#fff}
.ag-cl2 .ag-ci img,.ag-cl2 .ag-ct:first-child img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:left top}
.ag-cl2 .ag-cf{padding:7px 10px}
.ag-nx{border-style:dashed!important;align-items:center;justify-content:center;gap:6px;text-align:center;padding:16px;color:#F3F1EA}
.ag-nx b{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(157,196,159,.6);color:#9DC49F;font-size:24px;font-weight:300}
.ag-nx span{font-size:15px;font-weight:500}.ag-nx em{font-style:normal;font-size:12px;color:rgba(243,241,234,.6)}
.ag-badges{display:flex;gap:16px;align-items:center;margin-top:22px}.ag-badges img{height:64px;width:auto}
/* hyva brand band: the light bands fill the whole section, no dark frame around them */
.hyx .hy-brand .wrap{position:static}.hyx .hy-brand .hy-bh{position:relative;z-index:1}
/* maintenance: extension card, logo on its own row so nothing wraps */
.sfs-ex2{display:flex;flex-direction:column;gap:4px;padding:14px 16px 12px;border-bottom:1px solid #eee}
.sfs-ex2-t{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.sfs-ex2-t img{height:18px;width:auto}
.sfs-ex2-t em{font-style:normal;font-weight:600;font-size:11px;color:#2D572F;background:#EAF1E8;padding:4px 8px}
.sfs-ex2 b{font-size:16px;font-weight:600;white-space:nowrap}
.sfs-ex2 i{font-style:normal;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#777;white-space:nowrap}
/* storefront: realistic phone for the mobile card */
.iph{position:relative;display:block;width:196px;aspect-ratio:9/19.5;background:#1b1b1d;border-radius:34px!important;padding:7px;box-shadow:0 0 0 1.5px #3a3a3e,0 40px 70px -24px rgba(0,0,0,.85)}
.iph:before,.iph:after{content:"";position:absolute;width:3px;background:#2c2c30;border-radius:2px!important}
.iph:before{left:-3px;top:22%;height:13%}.iph:after{right:-3px;top:27%;height:18%}
.iph-s{display:flex;flex-direction:column;width:100%;height:100%;background:#fff;border-radius:27px!important;overflow:hidden;color:#1d1c18;font:12px/1.3 Inter,-apple-system,sans-serif;text-align:left}
.iph-sb{display:flex;align-items:center;justify-content:space-between;padding:9px 16px 4px;font-size:11px}
.iph-sb b{font-weight:600}.iph-di{width:58px;height:17px;background:#000;border-radius:10px!important}
.iph-ic{display:flex;gap:3px;align-items:flex-end}.iph-ic i{width:3px;background:#1d1c18}.iph-ic i:nth-child(1){height:5px}.iph-ic i:nth-child(2){height:7px}.iph-ic i:nth-child(3){height:9px;width:12px;border-radius:2px!important}
.iph-nav{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;border-bottom:1px solid #eee}
.iph-nav b{letter-spacing:.24em;font-size:11px;font-weight:600}.iph-nav i{font-style:normal;font-size:12px}
.iph-mnu{display:flex;flex-direction:column}
.iph-mnu i{font-style:normal;display:flex;justify-content:space-between;padding:7px 14px;border-bottom:1px solid #f0efeb;font-size:12px}
.iph-mnu i u{text-decoration:none;color:#aaa}.iph-mnu .red{color:#B3261E;font-weight:600}
.iph-img{position:relative;flex:1;min-height:0;display:block;margin:10px 10px 0;overflow:hidden}
.iph-img img{width:100%;height:100%;object-fit:cover;display:block}
.iph-img em{position:absolute;left:10px;bottom:10px;font-style:normal;font-weight:600;font-size:12px;color:#1d1c18;display:flex;flex-direction:column}
.iph-img em small{font-weight:400;font-size:10px;text-decoration:underline}
.iph-ok{margin:8px 10px 0;background:#EAF1E8;color:#2D572F;font-weight:600;font-size:10.5px;text-align:center;padding:7px 4px}
.iph-home{display:block;width:36%;height:4px;background:#1d1c18;border-radius:3px!important;margin:8px auto 6px}
.thm>img,.thm>b,.thm>svg{height:40px;display:flex;align-items:center}.thm>b{font-size:28px;line-height:40px;font-weight:700}
.thm.cu svg{width:44px;height:38px}
/* no single word left alone on the last line, anywhere */
p,li,h2,h3,h4,figcaption,small,.ucmp span,.ucmp small,.ucard-c p,.hw-meta p,summary,dd,td{text-wrap:pretty}
.hy-cmp span,.hy-cmp small,.hyx .hy-cmp span{text-wrap:pretty}
/* ============ contact us (contact.html) ============ */
.cx{position:relative;overflow:hidden;background:radial-gradient(60% 70% at 0% 0%,rgba(157,196,159,.20),rgba(45,87,47,.08) 45%,rgba(20,19,15,0) 75%),#14130F;color:#F3F1EA;padding:clamp(56px,7vw,110px) 0 clamp(64px,8vw,120px)}
.cx-bands{position:absolute;inset:-20%;background:repeating-linear-gradient(112deg,rgba(157,196,159,0) 0 160px,rgba(157,196,159,.05) 160px 260px,rgba(157,196,159,0) 260px 460px);animation:cxBands 30s linear infinite;pointer-events:none}
@keyframes cxBands{from{transform:translateX(0)}to{transform:translateX(460px)}}
@media(prefers-reduced-motion:reduce){.cx-bands{animation:none}}
.cx .wrap{position:relative;z-index:1}
.cx-g{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,88px);align-items:start}
.cx-mk{display:block;width:44px;margin-bottom:26px}.cx-mk svg{width:44px;height:38px;display:block}
.cx-k{margin:0 0 14px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#9DC49F}
.cx h1{margin:0;font-size:clamp(40px,5vw,72px);line-height:1.02;letter-spacing:-.04em;font-weight:500;text-wrap:balance}
.cx-sub{margin:22px 0 0;max-width:44ch;font-size:clamp(16px,1.4vw,19px);line-height:1.5;color:rgba(243,241,234,.72)}
.cx-top{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:clamp(32px,4vw,52px);background:rgba(243,241,234,.12);border:1px solid rgba(243,241,234,.12)}
.cx-top div{background:#171611;padding:18px 20px;display:flex;flex-direction:column;gap:6px;transition:background .3s}
.cx-top div:hover{background:#1d1c16}
.cx-top b{font-size:16px;font-weight:500;color:#F3F1EA}
.cx-top span{font-size:14px;line-height:1.45;color:rgba(243,241,234,.6)}
.cx-mail2{margin-top:32px;display:flex;flex-direction:column;gap:8px}
.cx-mail2 span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,241,234,.45)}
.cx-mail2 a{font-size:clamp(20px,1.8vw,24px);color:#F3F1EA;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(157,196,159,.6);align-self:flex-start}
.cx-card{background:rgba(29,28,23,.92);border:1px solid rgba(243,241,234,.16);padding:clamp(24px,2.8vw,40px);box-shadow:0 50px 100px -50px rgba(0,0,0,.9);backdrop-filter:blur(8px)}
.cx-ch{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px}
.cx-ch h2{margin:0;font-size:24px;font-weight:500;letter-spacing:-.02em;color:#F3F1EA}
.cx-av i{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(157,196,159,.5);background:#14130F}.cx-av svg{width:20px;height:17px}
.cx-fine{margin:18px 0 0;font-size:13px;color:rgba(243,241,234,.5)}
.cx-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);margin-top:clamp(28px,3.4vw,48px)}
.cx-steps .sx-p{position:relative}
.cx-sq{aspect-ratio:1;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;padding:clamp(16px,2vw,28px)}
.cx-sq .sx-lst{width:100%}
.cx-n{display:inline-grid;place-items:center;width:30px;height:30px;margin-top:20px;border:1px solid var(--line);font-size:14px;color:var(--ink60)}
.cx-steps h3{margin:12px 0 6px;font-size:21px;font-weight:500;letter-spacing:-.02em}
.cx-steps p{margin:0;font-size:15px;color:var(--ink60);max-width:36ch}
.cx-mb{padding:14px 18px 16px;display:flex;flex-direction:column;gap:12px}
.cx-from{display:flex;align-items:center;gap:10px}.cx-from i{width:32px;height:32px;display:grid;place-items:center;border:1px solid rgba(157,196,159,.5);background:#14130F}.cx-from i svg{width:16px;height:14px}
.cx-from span{display:flex;flex-direction:column;font-size:12px;color:rgba(243,241,234,.55)}.cx-from b{font-size:14px;color:#F3F1EA;font-weight:500}
.cx-mb p{margin:0;font-size:14px;line-height:1.5;color:rgba(243,241,234,.82)}
.cx-slots{display:flex;gap:6px}.cx-slots em{flex:1;text-align:center;font-style:normal;font-size:12.5px;padding:8px 0;border:1px solid rgba(243,241,234,.2);color:rgba(243,241,234,.8)}
.cx-slots em.on{background:#9DC49F;border-color:#9DC49F;color:#14130F;font-weight:600}
.cx-trust{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.cx-trust h2{margin:0;font-size:clamp(28px,3.2vw,44px);font-weight:500;letter-spacing:-.03em;line-height:1.08;color:#F3F1EA}
.cx-marks{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,3vw,44px);margin-top:32px}
.cx-marks img{height:30px;width:auto;max-width:130px;filter:brightness(0) invert(1);opacity:.75}
.cx-certs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(243,241,234,.12);border:1px solid rgba(243,241,234,.12)}
.cx-certs div{background:#14130F;display:flex;flex-direction:column;align-items:center;gap:14px;padding:26px 16px;text-align:center}
.cx-certs img{width:84px;height:84px;filter:brightness(0) invert(1);opacity:.85}
.cx-certs span{display:flex;flex-direction:column;font-size:13px;color:rgba(243,241,234,.55)}.cx-certs b{font-size:17px;color:#F3F1EA;font-weight:500}
@media(max-width:900px){.cx-g,.cx-trust{grid-template-columns:1fr}.cx-steps{grid-template-columns:1fr}}
@media(max-width:560px){.cx-top{grid-template-columns:1fr}}
.cx-sq{aspect-ratio:1/1!important;height:auto!important;width:100%}.sx-lst-h em{white-space:nowrap}.sx-lst-h b{min-width:0}
.hw-sw-s{aspect-ratio:1040/900}
.hw-sw-hl{left:21.4%;top:59.2%;width:75%;height:10.2%}
.hw-sw-tag{left:21.4%;top:71%;font-size:11px}
.vi-art:has(>.hw-sw){display:flex!important;align-items:center;justify-content:center;inset:0}
.hw-sw-s{aspect-ratio:1040/790}.hw-sw-s img{object-position:left top}
.hw-sw-hl{top:67.3%;height:11.4%}
.sx-sq .sx-lst{font-size:13px}.sx-sq .sx-lst-h{padding:11px 16px}.sx-sq .sx-li{padding:8px 16px}.sx-sq .sx-li b{font-size:13.5px}.sx-sq .sx-li span{font-size:12px}
.sx-sq .sx-ch{padding:11px 16px}.sx-sq .sx-ch b{font-size:15px}.sx-sq .sx-ap{margin:6px 12px 12px;padding:10px 12px}
.mwx .mw-l .arrow{color:#14130F}
.thm>b{white-space:nowrap;font-size:clamp(20px,1.9vw,28px)}
.vi-art:has(.iph){display:flex!important;align-items:center;justify-content:center;inset:0}
.vi-art:has(.iph)>.ui{height:88%;width:auto!important;max-width:none!important;display:flex;justify-content:center;zoom:1!important;transform:none!important}
.vi-art .ui>.iph{height:100%;width:auto!important;max-width:none!important}
.vi-art:has(.iph)>.ui{height:auto;width:100%!important}
.vi-art .ui>.iph{width:39%!important;height:auto;aspect-ratio:9/19.5;flex:none}
.vi-art:has(.iph)>.ui{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0}
.vi-art .ui>.iph{width:auto!important;height:90%;min-height:0;overflow:hidden;container-type:size;padding:1.6%;border-radius:22px!important}
.iph-s{border-radius:17px!important;font-size:10px}
.iph-sb{padding:7px 12px 3px;font-size:9px}.iph-di{width:44px;height:13px}
.iph-nav{padding:6px 11px}.iph-nav b{font-size:9px}
.iph-mnu i{padding:5px 11px;font-size:10px}
.iph-img{margin:7px 7px 0}.iph-img em{font-size:10px;left:7px;bottom:7px}
.iph-ok{margin:6px 7px 0;font-size:8.5px;padding:5px 3px}
.iph-home{margin:6px auto 5px;height:3px}
body.sharp .iph{border-radius:22px!important}body.sharp .iph-s{border-radius:17px!important}body.sharp .iph-di{border-radius:8px!important}
body.sharp .iph-ic i:nth-child(3),body.sharp .iph-home{border-radius:2px!important}body.sharp .iph::before,body.sharp .iph::after{border-radius:2px!important}
.iph-img img{object-position:50% 40%}.iph-ok{white-space:nowrap}
/* 2026-09-30b: use-case heroes fill the first screen on desktop; the video takes the space left */
@media(min-width:701px){
.hyx .uc-vhero{height:calc(100svh - var(--navh,53px));min-height:640px;display:flex;flex-direction:column;padding-bottom:clamp(24px,4vh,48px)}
.hyx .uc-vhero .hy-ht{flex:none}
.hyx .uc-vw{flex:1 1 0;min-height:0;display:flex;justify-content:center;align-items:stretch;margin-top:clamp(20px,3.4vh,40px)}
.hyx .uc-vbox{height:100%;width:auto;max-width:100%;aspect-ratio:16/9;margin:0}
}
/* the video before it plays: softened, so the play button leads */
.uc-vbox video,.hw-vbox video{transition:filter .5s ease}
.uc-vbox:not(.on) video,.hw-vbox:not(.on) video{filter:blur(3px) brightness(.72)}
.hw-vplay{z-index:3}
/* who approves: even padding, button sits inside it */
.arr-c{padding:clamp(20px,2vw,26px)!important}
.arr-go{transform:none!important;margin-top:auto}
.arr-c.on .arr-r:last-of-type{margin-bottom:22px}
/* merchants: hover keeps the button readable */
.mwx .mw-l .arrow:hover{background:#fff!important;color:#14130F!important}
/* merchants: round faces, one fixed-width slot so every label starts at the same x */
.mw-av{width:88px;flex:none}
body.sharp .mw-av>*{border-radius:50%!important;width:34px;height:34px;object-fit:cover;object-position:50% 30%}
body.sharp .mw-ari{border-radius:50%!important}
/* technical: bugs and performance as dark glass panels */
.tq{display:flex;flex-direction:column;width:min(90%,400px);text-align:left}
.tq-err{display:flex;gap:12px;align-items:flex-start;margin:12px 16px 4px;padding:11px 12px;background:rgba(214,120,100,.12);border:1px solid rgba(214,120,100,.35)}
.tq-err i{flex:none;width:20px;height:20px;display:grid;place-items:center;background:#E39A88;color:#14130F;font-style:normal;font-weight:700;font-size:13px}
.tq-err span{display:flex;flex-direction:column;gap:2px;font-size:12px;color:rgba(243,241,234,.6)}.tq-err b{font-size:13px;color:#F3F1EA;font-weight:500;text-decoration:line-through;text-decoration-color:rgba(227,154,136,.8)}
.tq-code{display:flex;gap:10px;padding:8px 16px;font-size:12.5px;color:rgba(243,241,234,.85);border-top:1px solid rgba(243,241,234,.07)}
.tq-code em{flex:none;width:40px;font-style:normal;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(243,241,234,.45);padding-top:2px}
.tq-ok{display:flex;gap:10px;align-items:center;margin:6px 16px 14px;padding:10px 12px;background:rgba(157,196,159,.14);color:#9DC49F;font-size:13px;font-weight:500}
.tq-ok i{font-style:normal}
.tq-gs{display:flex;align-items:center;justify-content:center;gap:18px;padding:16px 16px 10px}
.tq-gs>i{font-style:normal;color:rgba(243,241,234,.4);font-size:18px}
.tq-g{display:flex;flex-direction:column;align-items:center;gap:4px}.tq-g svg{width:78px;height:78px;font-family:Inter,sans-serif}.tq-g em{font-style:normal;font-size:11.5px;color:rgba(243,241,234,.55)}
.tq-m{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:8px 16px;border-top:1px solid rgba(243,241,234,.07);font-size:12.5px;color:rgba(243,241,234,.7)}
.tq-m s{color:rgba(227,154,136,.8)}.tq-m b{color:#9DC49F;font-weight:600;min-width:50px;text-align:right}
.tq-m:last-child{padding-bottom:13px}
/* comparison rows: every column the same shape, dividers on one line */
.hyx .hy-cmp b,.hyx .hy-cmp em{white-space:nowrap}
.hyx .hy-cmp span,.hyx .hy-cmp small{min-height:2.9em}
.hyx .hy-cmp span,.hyx .hy-cmp small{height:2.9em;min-height:0}
/* contact: hero fills the first screen, six badges */
@media(min-width:901px){.cx{min-height:calc(100svh - var(--navh,53px));display:flex;align-items:center;padding-block:clamp(40px,6vh,80px)}.cx .wrap{width:100%}.cx-g{align-items:center}}
.cx-book{align-self:flex-start;background:#F3F1EA;color:#14130F;font-size:13px;font-weight:500;padding:9px 14px}
.cx-certs6{grid-template-columns:1fr 1fr}
.cx-certs6 div{padding:22px 16px;min-height:150px;justify-content:center}
.cx-certs6 .w img{width:auto;height:46px;max-width:160px}
.cx-certs6 .w img[src*="hyva"]{filter:none;opacity:1;height:54px}
.cx-trust{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
body{--navh:65px}
.uc-vbox:not(.on) video,.hw-vbox:not(.on) video{filter:blur(2px) brightness(.75)}
.cx-certs6 div{background:#F3F1EA!important}
.cx-certs6 img,.cx-certs6 .w img{filter:none!important;opacity:1!important}
.cx-certs6 span{color:rgba(20,19,15,.6)!important}.cx-certs6 b{color:#14130F!important}
.cx-certs6 img[src*="cert-"]{width:72px;height:72px}
.cx-certs6{background:rgba(20,19,15,.12)!important;border:0!important}
.tq{width:min(94%,420px)}
.cx-certs6 .w img[src*="cert-3"]{width:170px;height:auto;max-width:none}
/* how it works step 2: zoomed into the product info, no gallery edge */
.hw-sw-s{aspect-ratio:830/650!important;position:relative}
.hw-sw-s img{position:absolute;width:125.3%!important;height:auto!important;left:-22.9%;top:-7.7%;object-fit:initial!important}
.hw-sw-hl{left:4.6%!important;top:74.9%!important;width:93%!important;height:12.9%!important}
/* every section waits for the reader: CSS animations stay paused until the section is on screen */
.sec:not(.in-view) *,.sc-sec:not(.in-view) *,.hw-sec:not(.in-view) *{animation-play-state:paused!important}
.hw-uc3 .vi-art .hw-sw .hw-sw-s img{width:125.3%!important;max-width:none!important;height:auto!important}
/* theme logos: two rows of three, logos at their own proportions */
.thms{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.thm{aspect-ratio:auto!important;padding:34px 20px!important}
.thm>img{height:40px!important;width:auto!important;max-width:none!important;object-fit:contain}
@media(max-width:480px){.thms{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.hiw:not(.run) .hiw-i::before{width:0!important;transition:none!important}
/* content: merchandising loops inside the job cards */
.lpv{display:block;width:92%;background:#14130F;box-shadow:0 30px 60px -30px rgba(0,0,0,.85);border:1px solid rgba(243,241,234,.16)}
.lpv video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.vi-art:has(.lpv){display:flex!important;align-items:center;justify-content:center;inset:0}
.vi-art:has(.lpv)>.ui{position:static;width:100%!important;max-width:none!important;display:flex;justify-content:center;zoom:1!important;transform:none!important}
.sfs-ai{display:flex;flex-direction:column;gap:6px;margin:10px 12px 12px;padding:11px 12px;background:#F4F1EA;border-left:3px solid #2D572F;font-size:11.5px;line-height:1.45;color:#333}
.sfs-ai em{font-style:normal;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#2D572F;font-weight:600}
.sfs-ai u{text-decoration:none;font-size:10.5px;color:#1a0dab}
.vi-art .ui>.lpv,.lpv{margin-left:auto!important;margin-right:auto!important}.vi-art:has(.lpv)>.ui{position:absolute!important;inset:0!important;align-items:center}
/* ============ scandiweb (scandiweb.html) ============ */
.swh{position:relative;overflow:hidden;background:#14130F;color:#F3F1EA;display:flex;flex-direction:column;justify-content:flex-end;min-height:calc(100svh - var(--navh,65px))}
.swh-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 35%;filter:saturate(.8)}
.swh:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,19,15,.35) 0%,rgba(20,19,15,.55) 45%,rgba(20,19,15,.96) 82%)}
.swh .wrap{position:relative;z-index:2;width:100%}
.swh-c{padding-top:clamp(80px,14vh,160px)}
.swh h1{margin:0;font-size:clamp(40px,5.4vw,78px);line-height:1.02;letter-spacing:-.04em;font-weight:500;max-width:16ch;text-wrap:balance}
.swh-s{margin:20px 0 0;max-width:52ch;font-size:clamp(16px,1.4vw,19px);line-height:1.5;color:rgba(243,241,234,.8)}
.swh-b{margin-top:28px;justify-content:flex-start}
.swh-st{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:clamp(40px,7vh,80px);margin-bottom:clamp(32px,5vh,56px);border-top:1px solid rgba(243,241,234,.2)}
.swh-st div{padding:20px 20px 0 0;display:flex;flex-direction:column;gap:4px}
.swh-st b{font-size:clamp(28px,3vw,44px);font-weight:500;letter-spacing:-.03em}
.swh-st span{font-size:14px;color:rgba(243,241,234,.62)}
.sw-why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(28px,3.4vw,48px);border-top:1px solid var(--ink)}
.sw-why div{padding:26px clamp(18px,2.6vw,36px) 0 0}.sw-why div+div{padding-left:clamp(18px,2.6vw,36px);border-left:1px solid var(--line)}
.sw-why b{display:block;font-size:clamp(44px,5vw,72px);font-weight:500;letter-spacing:-.04em;line-height:1;color:#2D572F;white-space:nowrap}
.sw-why h3{margin:14px 0 6px;font-size:19px;font-weight:500}.sw-why p{margin:0;color:var(--ink60);font-size:15px;max-width:34ch}
.sw-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px);margin-top:clamp(28px,3.4vw,48px)}
.sw-cases figure{margin:0;min-width:0}
.sw-ci{aspect-ratio:822/435;overflow:hidden;background:#1d1c18;border:1px solid rgba(243,241,234,.12)}
.sw-ci img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sw-cases figure:hover .sw-ci img{transform:scale(1.03)}
.sw-cases figcaption{margin-top:18px;display:flex;flex-direction:column;gap:6px}
.sw-cases figcaption span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,241,234,.5)}
.sw-cases figcaption b{font-size:clamp(36px,3.6vw,52px);font-weight:500;letter-spacing:-.035em;color:#9DC49F;line-height:1}
.sw-cases figcaption p{margin:0;color:rgba(243,241,234,.72);font-size:15px;max-width:34ch}
.sw-aw{aspect-ratio:1;background:#000;overflow:hidden;width:min(100%,520px);justify-self:center}
.sw-aw img{width:100%;height:100%;object-fit:cover;display:block}
.sw-bg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(28px,3.4vw,48px)}
.sw-bg div{background:#FAF9F5;display:grid;place-items:center;min-height:150px;padding:24px}
.sw-bg img{max-height:58px;max-width:170px;width:auto;height:auto}
.sw-bg img[src*="aws"]{filter:brightness(0)}
.sw-bg img[src*="cert-"]{max-height:80px}
.sw-bg img[src*="pimcore"]{max-height:80px}
.sw-q{margin:0 auto;max-width:900px;text-align:center}
.sw-q p{margin:0;font-size:clamp(26px,3.2vw,44px);line-height:1.2;letter-spacing:-.025em;font-weight:500;color:#F3F1EA;text-wrap:balance}
.sw-q cite{display:block;margin-top:22px;font-style:normal;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#9DC49F}
.sw-do{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(28px,3.4vw,48px)}
.sw-do div{background:var(--bg,#F4F2EC);padding:26px 24px}
.sw-do h3{margin:0 0 8px;font-size:19px;font-weight:500}.sw-do p{margin:0;color:var(--ink60);font-size:15px}
@media(max-width:900px){.swh-st{grid-template-columns:repeat(3,minmax(0,1fr))}.sw-why,.sw-cases,.sw-do{grid-template-columns:1fr}.sw-why div+div{border-left:0;padding-left:0;border-top:1px solid var(--line)}.sw-bg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.swh-st{grid-template-columns:1fr 1fr}.sw-bg div{min-height:110px;padding:14px}.sw-bg img{max-width:100%}}
.swh .hy-o{color:#F3F1EA!important;border-color:rgba(243,241,234,.6)!important}.swh .hy-o:hover{background:#F3F1EA!important;color:#14130F!important}
.sw-aw{background:#fff;aspect-ratio:540/577}.sw-aw img{object-fit:contain}
.sw-bg img{height:56px!important;max-height:none!important;max-width:190px!important;width:auto!important}
.sw-bg img[src*="hyva"]{height:66px!important}
.sw-bg img[src*="cert-3"]{height:auto!important;width:180px!important}
.sw-bg img[src*="adobe"]{height:auto!important;width:180px!important}
.sw-bg img[src*="cert-iso"],.sw-bg img[src*="cert-pci"],.sw-bg img[src*="pimcore"]{height:84px!important}
.sw-bg img[src*="aws"]{height:44px!important}.sw-bg img[src*="openai"]{height:48px!important}
/* contact: trust band, reworked */
.cx-tr{text-align:center}
.cx-tr h2{margin:0 auto;max-width:22ch;font-size:clamp(30px,3.6vw,50px);font-weight:500;letter-spacing:-.03em;line-height:1.06;color:#F3F1EA;text-wrap:balance}
.cx-tr .cx-k{margin-bottom:16px}
.cx-lg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:center;margin-top:clamp(36px,4vw,56px);border-top:1px solid rgba(243,241,234,.12);border-bottom:1px solid rgba(243,241,234,.12)}
.cx-lg span{display:grid;place-items:center;height:120px;padding:0 18px}
.cx-lg span+span{border-left:1px solid rgba(243,241,234,.12)}
.cx-lg img{max-height:40px;max-width:130px;width:auto;height:auto;filter:brightness(0) invert(1);opacity:.85}
.cx-lg img[src*="bmw"]{max-height:56px}.cx-lg img[src*="boy-scouts"],.cx-lg img[src*="laderach"]{max-height:48px}
.cx-bd{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:clamp(28px,3vw,40px)}
.cx-bd span{display:grid;place-items:center;height:110px;background:#F3F1EA;padding:14px}
.cx-bd img{max-height:52px;max-width:100%;width:auto;height:auto}
.cx-bd img[src*="cert-3"],.cx-bd img[src*="adobe"]{width:88%;max-height:none}
.cx-bd img[src*="hyva"]{max-height:60px;width:auto}
.cx-bd img[src*="cert-iso"],.cx-bd img[src*="cert-pci"]{max-height:70px}
@media(max-width:900px){.cx-lg{grid-template-columns:repeat(3,minmax(0,1fr))}.cx-lg span:nth-child(4){border-left:0}.cx-lg span:nth-child(n+4){border-top:1px solid rgba(243,241,234,.12)}.cx-bd{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.cx-lg{grid-template-columns:repeat(2,minmax(0,1fr))}.cx-lg span{height:92px}.cx-lg span:nth-child(odd){border-left:0}.cx-lg span:nth-child(4){border-left:1px solid rgba(243,241,234,.12)}.cx-lg span:nth-child(n+3){border-top:1px solid rgba(243,241,234,.12)}.cx-bd{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cx-bd img[src*="hyva"]{width:62%!important;max-height:none!important;height:auto!important}.cx-bd span{min-width:0}
/* scandiweb page v2 */
.swh-b{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.swh-o{color:#F3F1EA!important;border-color:rgba(243,241,234,.6)!important;background:transparent}.swh-o:hover{background:#F3F1EA!important;color:#14130F!important}
.sw-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.sw-hd h2{margin:0}
.sec.dark .sw-more{color:#F3F1EA}
.sw-case{display:block;text-decoration:none;color:inherit}
.sw-case .sw-cn{display:block;margin-top:18px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,241,234,.5)}
.sw-case b{display:block;margin-top:6px;font-size:clamp(36px,3.6vw,52px);font-weight:500;letter-spacing:-.035em;color:#9DC49F;line-height:1}
.sw-case p{margin:8px 0 0;color:rgba(243,241,234,.72);font-size:15px;max-width:34ch}
.sw-case:hover .sw-ci img{transform:scale(1.03)}
.sw-ev{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(28px,3.4vw,48px)}
.sw-ev figure{margin:0;min-width:0}
.sw-ei{aspect-ratio:4/3;overflow:hidden;background:#000}
.sw-ei img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sw-ev figure:hover .sw-ei img{transform:scale(1.04)}
.sw-ev h3{margin:16px 0 6px;font-size:19px;font-weight:500;letter-spacing:-.015em}
.sw-ev p{margin:0;font-size:14.5px;color:var(--ink60)}
.sw-rc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(28px,3.4vw,48px);border-top:1px solid rgba(243,241,234,.3)}
.sw-rc div{padding:24px 24px 0 0}.sw-rc div+div{padding-left:24px;border-left:1px solid rgba(243,241,234,.12)}
.sw-rc span{display:block;font-size:clamp(36px,3.4vw,52px);font-weight:500;letter-spacing:-.04em;color:#9DC49F;line-height:1}
.sw-rc p{margin:14px 0 0;color:rgba(243,241,234,.8);font-size:16px;max-width:26ch}
.sw-pt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(28px,3.4vw,48px)}
.sw-pt div{background:#FAF9F5;display:grid;place-items:center;height:140px;padding:22px;min-width:0}
.sw-pt img{max-height:60px;max-width:78%;width:auto;height:auto}
.sw-pt img[src*="hyva"],.sw-pt img[src*="cert-3"],.sw-pt img[src*="adobe"]{width:62%;max-height:none}
.sw-pt img[src*="pimcore"]{max-height:74px}
.sw-pt img[src*="aws"]{filter:brightness(0);opacity:.85}
.sw-cert{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);margin-top:clamp(28px,3.4vw,48px)}
.sw-cert div{display:flex;gap:26px;align-items:center;background:#FAF9F5;border:1px solid var(--line);padding:30px}
.sw-cert img{width:104px;height:104px;flex:none}
.sw-cert span{display:flex;flex-direction:column;gap:6px;color:var(--ink60);font-size:15px}.sw-cert b{font-size:22px;color:var(--ink);font-weight:500}
.sw-do a{display:flex;flex-direction:column;background:var(--bg,#F4F2EC);padding:26px 24px;text-decoration:none;color:inherit;transition:background .25s;position:relative}
.sw-do a:hover{background:#FAF9F5}
.sw-do a>i{font-style:normal;position:absolute;right:22px;top:24px;color:var(--ink40);transition:transform .2s}.sw-do a:hover>i{transform:translateX(3px);color:var(--ink)}
.sw-end{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.sw-end h2{margin:0;font-size:clamp(34px,4.4vw,60px);font-weight:500;letter-spacing:-.035em;color:#F3F1EA}
.sw-end p{margin:0 0 10px;color:rgba(243,241,234,.7);font-size:17px}
@media(max-width:900px){.sw-ev,.sw-pt{grid-template-columns:repeat(2,minmax(0,1fr))}.sw-rc{grid-template-columns:1fr 1fr}.sw-rc div:nth-child(3){border-left:0;padding-left:0}.sw-cert{grid-template-columns:1fr}}
@media(max-width:560px){.sw-ev{grid-template-columns:1fr}.sw-rc{grid-template-columns:1fr}.sw-rc div+div{border-left:0;padding-left:0}.sw-pt div{height:110px;padding:14px}.sw-cert div{padding:20px;gap:16px}.sw-cert img{width:72px;height:72px}}
.cx{background:var(--dark)!important}
.sec.dark .sw-more{color:#14130F!important;background:#F3F1EA}
.sw-pt img[src*="hyva"]{width:auto!important;max-height:58px!important}
.sw-pt img[src*="tiktok"]{max-height:44px;width:52%}
.sw-pt img[src*="sanity"]{max-height:44px}
/* hero eyebrow on every product and use-case page, the How it works one */
.lp-eb{margin:0 0 18px!important;font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:11px!important;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,241,234,.5)!important;text-align:inherit}
/* the Hyva badge svg is 27x19 intrinsic: give it a real size */
.sw-pt img[src*="hyva"]{width:112px!important;height:auto!important;max-height:none!important;max-width:none!important}
.sw-ei{background:#000}.sw-ei img{object-fit:cover}
footer,.foot2{border-top:0!important}
/* success and 404 */
.ep{min-height:calc(100svh - var(--navh,65px));display:flex;align-items:center}
.ep-c{text-align:center;display:flex;flex-direction:column;align-items:center}
.ep .cx-mk{margin:0 auto 26px}.ep h1{max-width:18ch}.ep .cx-sub{margin-left:auto;margin-right:auto;max-width:48ch}
.ep-b{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:32px 0 0}
.ep-o{color:#F3F1EA!important;border-color:rgba(243,241,234,.5)!important;background:transparent}.ep-o:hover{background:#F3F1EA!important;color:#14130F!important}
.ep-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(243,241,234,.12);border:1px solid rgba(243,241,234,.12);margin-top:clamp(48px,7vh,80px);width:min(100%,960px);text-align:left}
.ep-g a{position:relative;display:flex;flex-direction:column;gap:6px;padding:22px 24px;background:#171611;color:#F3F1EA;text-decoration:none;transition:background .25s}
.ep-g a:hover{background:#1f1e18}
.ep-g b{font-weight:500;font-size:17px}.ep-g span{font-size:14px;color:rgba(243,241,234,.6);padding-right:18px}
.ep-g i{position:absolute;right:20px;top:22px;font-style:normal;color:#9DC49F;transition:transform .2s}.ep-g a:hover i{transform:translateX(3px)}
@media(max-width:760px){.ep-g{grid-template-columns:1fr}}
/* ===== /success: space ===== */
.spc{position:relative;overflow:hidden;background:#14130F;color:#F3F1EA;min-height:calc(100svh - var(--navh,65px));display:flex;align-items:center;cursor:crosshair}
.spc canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.spc-c{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.spc-c a{pointer-events:auto}
.spc-mk{display:block;width:84px;margin:0 auto 26px;animation:spcIn 1s .9s both,spcGlow 3s 2s ease-in-out infinite}
.spc-mk svg{width:84px;height:72px;display:block}
.spc h1{margin:0;font-size:clamp(40px,5.4vw,76px);line-height:1.02;letter-spacing:-.04em;font-weight:500;max-width:17ch;text-wrap:balance;animation:spcIn .9s 1.2s both}
.spc .cx-k{animation:spcIn .8s 1.05s both}
.spc .cx-sub{margin:22px auto 0;max-width:46ch;text-wrap:balance;animation:spcIn .9s 1.4s both}
.spc .ep-b{animation:spcIn .9s 1.6s both}
@keyframes spcIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes spcGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(157,196,159,0))}50%{filter:drop-shadow(0 0 22px rgba(157,196,159,.7))}}
@media(prefers-reduced-motion:reduce){.spc *{animation:none!important}}
/* ===== 404: sad Ari ===== */
.nf{background:#F3F1EA;color:#14130F;min-height:calc(100svh - var(--navh,65px));display:flex;align-items:center;overflow:hidden}
.nf-c{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center;padding-block:clamp(40px,6vh,80px)}
.nf-a{display:flex;justify-content:center}
.sad{width:min(100%,420px);height:auto;overflow:visible;cursor:pointer}
.sad-body{transform-origin:200px 400px;animation:sadSway 5s ease-in-out infinite}
.sad-face{transition:transform .25s ease-out}
.sad-eye{transform-origin:197px 246px;animation:sadBlink 4.5s infinite}
.sad-mouth{transform-origin:216px 303px;transform:rotate(-14deg);animation:sadMouth 5s ease-in-out infinite}
.sad-tear{opacity:0;animation:sadTear 4s 1.2s ease-in infinite}
.sad.boop .sad-body{animation:sadBoop .6s ease}
@keyframes sadSway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2deg) translateY(4px)}}
@keyframes sadBlink{0%,44%,50%,100%{transform:scaleY(1)}47%{transform:scaleY(.1)}}
@keyframes sadMouth{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(-20deg) translateY(3px)}}
@keyframes sadTear{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1;transform:translateY(0) scale(1)}80%{opacity:1;transform:translateY(90px) scale(1)}100%{opacity:0;transform:translateY(118px) scale(.8)}}
@keyframes sadBoop{0%{transform:scale(1)}30%{transform:scale(.92,1.06)}60%{transform:scale(1.04,.96)}100%{transform:scale(1)}}
.nf-k{margin:0 0 16px;font-family:var(--mono,ui-monospace,Menlo,monospace);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#2D572F}
.nf h1{margin:0;font-size:clamp(38px,4.8vw,68px);line-height:1.03;letter-spacing:-.04em;font-weight:500;max-width:15ch;text-wrap:balance}
.nf-s{margin:20px 0 0;max-width:44ch;font-size:clamp(16px,1.4vw,19px);line-height:1.5;color:rgba(20,19,15,.66);text-wrap:pretty}
.nf-b{justify-content:flex-start}
.nf-l{display:flex;flex-wrap:wrap;gap:8px 22px;margin:28px 0 0}
.nf-l a{color:#14130F;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(20,19,15,.25)}.nf-l a:hover{text-decoration-color:#2D572F}
.nf-code{display:inline-block;margin-top:34px;font-size:13px;color:rgba(20,19,15,.5);background:rgba(20,19,15,.05);padding:8px 12px}
@media(max-width:860px){.nf-c{grid-template-columns:1fr;text-align:center}.nf h1,.nf-s{margin-left:auto;margin-right:auto}.nf-b,.nf-l{justify-content:center}.sad{width:min(70%,300px)}}
@media(prefers-reduced-motion:reduce){.sad *{animation:none!important}}
.spc-c:before{content:"";position:absolute;left:50%;top:50%;width:min(1000px,120%);height:760px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(20,19,15,.97),rgba(20,19,15,.8) 55%,rgba(20,19,15,0));z-index:-1}
/* 404: one centered column, in the middle of the screen */
.nf{min-height:calc(100svh - var(--navh,65px))!important;display:flex!important;align-items:center;justify-content:center}
.nf-c{grid-template-columns:1fr!important;justify-items:center;text-align:center;gap:clamp(20px,3vh,36px)!important;padding-block:clamp(24px,4vh,48px)!important}
.nf-t{display:flex;flex-direction:column;align-items:center}
.nf h1{margin-left:auto;margin-right:auto;max-width:18ch}
.nf-b{justify-content:center!important}
.sad{width:min(60vw,clamp(200px,30vh,300px))!important}
.sad-tear,.sad-eye,.sad-mouth{transform-box:fill-box;transform-origin:center!important}
/* 404: Ari cheers up when a button is hovered */
.sad-smile{opacity:0;transition:opacity .25s ease}
.sad-mouth,.sad-eye{transition:opacity .2s ease}
.nf.happy .sad-mouth{opacity:0}
.nf.happy .sad-smile{opacity:1}
.nf.happy .sad-tear{animation:none;opacity:0}
.nf.happy .sad-eye{animation:none}
.nf.happy .sad-body{animation:happyHop .7s ease-in-out infinite}
@keyframes happyHop{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(1.5deg)}}
/* 404 headline: one sentence per line */
.nf h1{max-width:none!important;font-size:clamp(30px,4.4vw,60px)!important}
.nf h1 span{display:block;white-space:nowrap}
@media(max-width:560px){.nf h1{font-size:clamp(24px,7.2vw,34px)!important}}
/* legal pages: .lg is also a logo grid class; restore the two-column legal layout */
.lg:has(>.lg-toc){grid-template-columns:minmax(0,210px) minmax(0,1fr)!important;gap:clamp(28px,5vw,72px)!important}
.lg:has(>.lg-toc) .lg-body{max-width:72ch;width:100%}
@media(max-width:760px){.lg:has(>.lg-toc){grid-template-columns:1fr!important;gap:22px!important}}
.lg:has(>.lg-toc) .lg-body{max-width:780px!important}.lg:has(>.lg-toc) .lg-body p,.lg:has(>.lg-toc) .lg-body li{font-size:15.5px}
.sw-case b{font-size:clamp(24px,2.2vw,32px)!important;letter-spacing:-.025em!important;line-height:1.1!important}