/* Nexuq product page: the txtCaster rail system, plus a grid of small commerce components that
   act out each capability on hover (or once as they scroll in, on touch screens). */
main:has(.nx-page){--nx-ok:#1f8f5f;--nx-warn:#a8660b}
@media(prefers-color-scheme:dark){main:has(.nx-page){--nx-ok:#3ddc97;--nx-warn:#f0b429}}

/* The figure: the shop on its foundation, with two toggles where the hint would sit. */
.nx-machine{padding-block-end:clamp(3.5rem,6vw,4.5rem)}
.nx-fig[data-scroll] :is(.nx-merchant,.nx-cable,.nx-tabs){transition:none}
.nx-fig{width:min(1000px,100%);margin-inline:auto}
.nx-fig-note{margin:0;padding:1rem var(--tc-pad) 1.4rem;border-block-start:1px solid var(--rule);font-size:var(--t-xs);color:var(--muted)}
.nx-demo svg{flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@keyframes nx-travel{0%{inset-inline-start:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{inset-inline-start:calc(100% - 8px);opacity:0}}
@media(max-width:599px){.nx-machine{padding-block-end:3rem}}

/* Feature grid: hairline cells on the rail, copy on top, a working component below. */
.nx-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0 0 -1px;padding:0;list-style:none;border-block-start:1px solid var(--rule);overflow:hidden;counter-reset:nx-cap}
.nx-cell{position:relative;grid-column:span 2;display:grid;grid-template-rows:auto auto auto 1fr;align-content:start;gap:.55rem;margin-inline-start:-1px;padding:2rem clamp(1.25rem,2.4vw,2.25rem) 0;border-inline-start:1px solid var(--rule);border-block-end:1px solid var(--rule);overflow:hidden;counter-increment:nx-cap}
.nx-cell::before{content:counter(nx-cap,decimal-leading-zero);margin-block-end:.55rem;font:500 .72rem/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.08em;color:var(--tc-blue-hi)}
.nx-cell h3{margin:0;font-size:1.2rem;font-weight:500;line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
.nx-cell>p{margin:0;max-width:38ch;font-size:var(--t-sm);line-height:1.55;color:var(--muted)}
[dir=rtl] .nx-cell h3{letter-spacing:0}
/* Lead cells carry the two ideas that define Nexuq: a big heading beside a bigger component. */
.nx-cell-lead{grid-column:span 4;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto auto 1fr;column-gap:clamp(1.5rem,3vw,3rem);padding-block:2.6rem;background:linear-gradient(160deg,color-mix(in srgb,var(--tc-blue) 7%,transparent),transparent 60%)}
.nx-cell-lead::before,.nx-cell-lead h3,.nx-cell-lead>p{grid-column:1}
.nx-cell-lead h3{font-size:clamp(1.6rem,1.15rem + 1.1vw,2.15rem);line-height:1.1;letter-spacing:-.03em}
.nx-cell-lead>p{max-width:34ch;font-size:1.0625rem;color:var(--text)}
.nx-cell-lead .nx-demo{grid-column:2;grid-row:1 / -1;min-height:17rem;padding-block:0}
.nx-cell-flip{grid-column:span 6;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);background:linear-gradient(200deg,color-mix(in srgb,var(--tc-blue) 7%,transparent),transparent 60%)}
.nx-cell-flip::before,.nx-cell-flip h3,.nx-cell-flip>p{grid-column:2}
.nx-cell-flip .nx-demo{grid-column:1}
.nx-demo{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;min-height:16rem;padding-block:1.5rem 2rem}
.nx-demo::before{content:'';position:absolute;inset:10% -10% -20%;z-index:-1;background:radial-gradient(50% 50% at 50% 55%,color-mix(in srgb,var(--tc-blue-hi) 16%,transparent),transparent 70%);opacity:.35;transition:opacity .6s var(--tc-ease)}
.nx-cell:is(:hover,.is-on) .nx-demo::before{opacity:1}
.nx-card{border:1px solid var(--rule);border-radius:12px;background:var(--surface);box-shadow:0 22px 44px -28px rgb(0 0 0 / .55);color:var(--ink);font-size:.8125rem}
.nx-mini-bar{display:flex;align-items:center;gap:.3rem;height:1.6rem;padding-inline:.6rem;border-block-end:1px solid var(--rule);font:500 .68rem/1 'Geist Mono',ui-monospace,monospace;color:var(--muted)}
.nx-mini-bar i{width:.4rem;height:.4rem;border-radius:50%;background:var(--rule)}
.nx-mini-bar span{margin-inline-start:.4rem}
.nx-tag{flex:none;padding:.2rem .45rem;border:1px solid var(--rule);border-radius:999px;font:500 .66rem/1 'Geist Mono',ui-monospace,monospace;color:var(--muted)}
.nx-tag-lit{border-color:var(--tc-blue);background:var(--tc-blue);color:#fff}
.nx-tag-ok{border-color:color-mix(in srgb,var(--nx-ok) 40%,transparent);color:var(--nx-ok)}
.nx-tag-warn{border-color:color-mix(in srgb,var(--nx-warn) 45%,transparent);color:var(--nx-warn)}
.nx-pill{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .7rem;border:1px solid var(--rule);border-radius:999px;background:var(--surface);font:500 .7rem/1 'Geist Mono',ui-monospace,monospace;color:var(--muted);transition:color .4s,border-color .4s}
.nx-pill i{width:.45rem;height:.45rem;border-radius:50%;background:var(--muted);transition:background-color .4s}
[dir=rtl] :is(.nx-tag,.nx-pill,.nx-mini-bar){font-family:inherit;letter-spacing:0}
@keyframes nx-in{from{opacity:0;transform:translateY(8px)}}

/* 1. Storefront to Nexuq: a request runs down the wire and the core answers. */
.nx-link{display:flex;align-items:center}
.nx-link-store{width:7.5rem;overflow:hidden}
.nx-link-tiles{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;padding:.5rem}
.nx-link-tiles b{height:1.5rem;border-radius:5px;background:color-mix(in srgb,var(--tc-blue-hi) 14%,var(--rule))}
.nx-link-wire{position:relative;width:clamp(2.5rem,6vw,4.5rem);height:2px;background:var(--rule);transition:background-color .4s}
.nx-link-wire i{position:absolute;inset-block-start:-3px;inset-inline-start:0;width:8px;height:8px;border-radius:50%;background:var(--tc-blue-hi);opacity:0}
.nx-link-core{display:grid;place-items:center;width:3.6rem;height:3.6rem;border-radius:16px;transition:box-shadow .5s,border-color .5s}
.nx-cell:is(:hover,.is-on) .nx-link-wire{background:color-mix(in srgb,var(--tc-blue-hi) 45%,var(--rule))}
.nx-cell:is(:hover,.is-on) .nx-link-wire i{animation:nx-travel 1.3s var(--tc-ease) infinite}
.nx-cell:is(:hover,.is-on) .nx-link-core{border-color:var(--tc-blue-hi);box-shadow:0 0 0 5px color-mix(in srgb,var(--tc-blue-hi) 16%,transparent),0 0 30px color-mix(in srgb,var(--tc-blue-hi) 40%,transparent)}
.nx-cell:is(:hover,.is-on) .nx-link-state{color:var(--ink);border-color:color-mix(in srgb,var(--nx-ok) 45%,transparent)}
.nx-cell:is(:hover,.is-on) .nx-link-state i{background:var(--nx-ok)}

/* 2. Catalog and cart: the item goes into the cart and the count ticks over. */
.nx-product{width:12rem;overflow:hidden}
.nx-product-img{position:relative;display:grid;place-items:center;height:6.6rem;border-block-end:1px solid var(--rule);background:radial-gradient(45% 60% at 50% 62%,color-mix(in srgb,var(--tc-blue-hi) 14%,transparent),transparent 75%)}
.nx-demo .nx-shirt{width:auto;height:78%;stroke:var(--tc-blue-hi);stroke-width:1.5;transition:transform .7s var(--tc-ease)}
.nx-demo .nx-shirt-body{fill:color-mix(in srgb,var(--tc-blue-hi) 16%,var(--surface))}
.nx-demo .nx-shirt circle{fill:var(--tc-blue-hi);stroke:none}
.nx-sizes{position:absolute;inset-block-end:.45rem;inset-inline-start:.5rem;display:flex;gap:.25rem}
.nx-sizes b{display:grid;place-items:center;width:1.15rem;height:1.15rem;border:1px solid var(--rule);border-radius:4px;font:500 .6rem/1 'Geist Mono',ui-monospace,monospace;color:var(--muted);transition:background-color .3s,border-color .3s,color .3s}
.nx-product-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.65rem .75rem}
.nx-product-row strong{display:block;font-weight:500}
.nx-product-row span:not(.nx-add){font-size:.7rem;color:var(--muted)}
.nx-add{padding:.35rem .7rem;border-radius:999px;border:1px solid var(--rule);font-size:.72rem;font-weight:500;transition:background-color .3s,border-color .3s,color .3s}
.nx-cart{position:absolute;inset-block-start:1.6rem;inset-inline-end:clamp(.75rem,12%,3.5rem);display:grid;place-items:center;width:2.7rem;height:2.7rem;border:1px solid var(--rule);border-radius:50%;background:var(--surface);color:var(--ink)}
.nx-cart-n{position:absolute;inset-block-start:-.35rem;inset-inline-end:-.35rem;display:grid;width:1.15rem;height:1.15rem;overflow:hidden;border-radius:50%;background:var(--tc-blue);color:#fff;font:600 .65rem/1.15rem 'Geist Mono',ui-monospace,monospace;text-align:center}
.nx-cart-n b{display:block;height:1.15rem;font-weight:600;transition:transform .45s var(--tc-ease) .45s}
.nx-cell:is(:hover,.is-on) .nx-shirt{transform:translateY(-3px) rotate(-4deg)}
.nx-cell:is(:hover,.is-on) .nx-sizes b:nth-child(2){background:var(--tc-blue);border-color:var(--tc-blue);color:#fff}
.nx-cell:is(:hover,.is-on) .nx-add{background:var(--tc-blue);border-color:var(--tc-blue);color:#fff;animation:nx-press .45s var(--tc-ease) .15s}
.nx-cell:is(:hover,.is-on) .nx-cart{animation:nx-bump .5s var(--tc-ease) .45s}
.nx-cell:is(:hover,.is-on) .nx-cart-n b{transform:translateY(-100%)}
@keyframes nx-press{50%{transform:scale(.88)}}
@keyframes nx-bump{40%{transform:scale(1.18) rotate(-8deg)}}

/* 3. Checkout: each stage ticks in turn and the order record appears. */
.nx-steps{display:grid;gap:.15rem;width:13.5rem;margin:0;padding:.6rem;list-style:none}
.nx-steps li{display:flex;align-items:center;gap:.65rem;padding:.55rem .5rem;border-radius:8px;color:var(--muted);transition:color .3s,background-color .3s}
.nx-steps li i{position:relative;flex:none;width:1.05rem;height:1.05rem;border:1.5px solid var(--rule);border-radius:50%;transition:background-color .3s,border-color .3s}
.nx-steps li i::after{content:'';position:absolute;inset:.18rem .3rem .3rem;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) scale(0);transition:transform .3s var(--tc-ease)}
.nx-steps .nx-tag{margin-inline-start:auto;opacity:0;transition:opacity .4s,transform .4s var(--tc-ease);transform:translateY(4px)}
.nx-steps li:nth-child(2),.nx-steps li:nth-child(2) i,.nx-steps li:nth-child(2) i::after{transition-delay:.35s}
.nx-steps li:nth-child(3),.nx-steps li:nth-child(3) i,.nx-steps li:nth-child(3) i::after{transition-delay:.7s}
.nx-cell:is(:hover,.is-on) .nx-steps li{color:var(--ink)}
.nx-cell:is(:hover,.is-on) .nx-steps li i{background:var(--tc-blue);border-color:var(--tc-blue)}
.nx-cell:is(:hover,.is-on) .nx-steps li i::after{transform:rotate(45deg) scale(1)}
.nx-cell:is(:hover,.is-on) .nx-steps li:last-child{background:color-mix(in srgb,var(--tc-blue) 9%,transparent)}
.nx-cell:is(:hover,.is-on) .nx-steps .nx-tag{opacity:1;transform:none;transition-delay:1s}

/* 4. Merchants: stacked stores fan apart, each one locked to its own records. */
.nx-stack{position:relative;width:13.5rem;height:10rem}
.nx-merchant{position:absolute;inset-inline:0;inset-block-start:50%;display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem;transform:translateY(calc(-50% + var(--y))) scale(var(--s));opacity:var(--o);transition:transform .6s var(--tc-ease),opacity .6s}
.nx-merchant:nth-child(1){--y:-1.6rem;--s:.88;--o:.55}
.nx-merchant:nth-child(2){--y:-.8rem;--s:.94;--o:.8}
.nx-merchant:nth-child(3){--y:0rem;--s:1;--o:1}
.nx-merchant strong{flex:1;font-weight:500}
.nx-merchant svg{color:var(--muted);transition:color .4s .3s}
.nx-avatar{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;font:600 .7rem/1 'Geist Mono',ui-monospace,monospace;color:#fff;background:#6f5bd6}
.nx-merchant:nth-child(2) .nx-avatar{background:#c2557a}
.nx-merchant:nth-child(3) .nx-avatar{background:var(--tc-blue)}
.nx-cell:is(:hover,.is-on) .nx-merchant{--s:1;--o:1}
.nx-cell:is(:hover,.is-on) .nx-merchant:nth-child(1){--y:-3.3rem}
.nx-cell:is(:hover,.is-on) .nx-merchant:nth-child(2){--y:0rem}
.nx-cell:is(:hover,.is-on) .nx-merchant:nth-child(3){--y:3.3rem}
.nx-cell:is(:hover,.is-on) .nx-merchant svg{color:var(--tc-blue-hi)}

/* 5. Discovery: the query types out and results arrive, matched by word and by meaning. */
.nx-search{display:grid;gap:.5rem;width:15rem}
.nx-query{display:flex;align-items:center;gap:.55rem;padding:.65rem .75rem;color:var(--muted)}
.nx-typed{overflow:hidden;white-space:nowrap;color:var(--ink);border-inline-end:1.5px solid transparent}
.nx-hit{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.6rem .75rem}
.nx-hit strong{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nx-cell:is(:hover,.is-on) .nx-query{border-color:color-mix(in srgb,var(--tc-blue-hi) 60%,var(--rule))}
.nx-cell:is(:hover,.is-on) .nx-typed{animation:nx-type 1s steps(18) both,nx-caret .7s steps(1) 3}
.nx-cell:is(:hover,.is-on) .nx-hit{animation:nx-in .5s var(--tc-ease) 1.05s both}
.nx-cell:is(:hover,.is-on) .nx-hit+.nx-hit{animation-delay:1.25s}
@keyframes nx-type{from{max-width:0}to{max-width:12rem}}
@keyframes nx-caret{50%{border-color:var(--tc-blue-hi)}}

/* 6. Payments: the same payment arrives twice; the second is caught, not charged. */
.nx-ledger{width:16.5rem;margin:0;padding:.3rem .75rem;list-style:none}
.nx-ledger li{white-space:nowrap;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding-block:.65rem}
.nx-ledger li+li{border-block-start:1px solid var(--rule)}
.nx-dup>span:first-child{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--nx-warn) 70%,transparent)}
.nx-cell:is(:hover,.is-on) .nx-dup{animation:nx-in .45s var(--tc-ease) .2s both,nx-shake .4s ease-in-out .75s}
.nx-cell:is(:hover,.is-on) .nx-dup .nx-tag{animation:nx-pop .4s var(--tc-ease) .75s both}
.nx-cell:is(:hover,.is-on) .nx-ledger li:last-child{animation:nx-in .45s var(--tc-ease) 1.15s both}
@keyframes nx-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes nx-pop{from{opacity:0;transform:scale(.6)}}

@media(max-width:899px){
  .nx-grid{grid-template-columns:1fr 1fr}
  .nx-cell{grid-column:span 1}
  .nx-cell-lead,.nx-cell-flip{grid-column:span 2}
}
@media(max-width:599px){
  .nx-grid{grid-template-columns:1fr}
  .nx-cell,.nx-cell-lead,.nx-cell-flip{grid-column:auto;grid-template-columns:1fr;grid-template-rows:auto}
  .nx-cell-lead>:is(h3,p),.nx-cell-lead::before,.nx-cell-lead .nx-demo{grid-column:1;grid-row:auto}
  .nx-cell-lead .nx-demo{min-height:15rem;padding-block:1.5rem 2rem}
}
.tc-sec .nx-grid{transition:opacity .9s var(--tc-ease) .15s,translate 1.1s var(--tc-ease) .15s}
.tc-js .tc-sec:not(.is-in) .nx-grid{opacity:0;translate:0 28px}
/* Live counters beside the figure: what Nexuq is holding right now. */
.nx-legend{position:absolute;z-index:1;inset-block-start:1rem;inset-inline-end:var(--tc-pad);display:grid;gap:.25rem;margin:0;padding:.6rem .75rem;border:1px solid var(--rule);border-radius:10px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(6px);font:500 .72rem/1.2 'Geist Mono',ui-monospace,monospace}
.nx-legend div{display:flex;justify-content:space-between;gap:1.25rem;padding:.3rem .4rem;border-radius:6px;cursor:default;transition:background .3s,color .3s}
.nx-legend dt{color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.nx-legend dd{margin:0;color:var(--text);font-variant-numeric:tabular-nums}
.nx-legend b{font-weight:600;color:var(--ink)}
.nx-legend div:is(:hover,[data-on]){background:color-mix(in srgb,var(--tc-blue) 12%,transparent)}
.nx-legend div[data-on] dt{color:var(--tc-blue-hi)}
[dir=rtl] .nx-legend{font-family:inherit}
[dir=rtl] .nx-legend dt{letter-spacing:0}
.nx-machine:not(.is-live) .nx-legend{display:none}
#how .nx-machine~.tc-steps li{grid-template-rows:auto auto;row-gap:.3rem;align-items:start}
#how .nx-machine~.tc-steps .tc-step-n{grid-row:span 2}
#how .nx-machine~.tc-steps li p{grid-column:2;margin:0;color:var(--muted);font-size:.85rem;line-height:1.45}
@media(max-width:599px){.nx-legend{position:static;grid-template-columns:repeat(3,1fr);margin-block-start:.75rem;inset:auto}.nx-legend div{flex-direction:column;gap:.2rem}}
/* Scroll story: the track is tall, the stage pins under the header while the scene plays. */
.nx-track.is-scrolly{height:calc(100svh + 420vh)}
.nx-track.is-scrolly .nx-stage{position:sticky;inset-block-start:var(--nx-pin,4.5rem);display:flex;flex-direction:column;height:calc(100svh - var(--nx-pin,4.5rem))}
.nx-track.is-scrolly .nx-machine{flex:1;min-height:0;display:grid;place-items:center;padding-block:2.5rem 3rem}
.nx-track.is-scrolly .nx-fig{width:min(1000px,100%,(100svh - 18rem) * 1.6)}
/* The caption is the story's voice: a readable card at the top corner, not a footnote. */
.nx-machine .tc-machine-fig{display:none}
.nx-machine .tc-machine-readout{inset-block:1rem auto;inset-inline:var(--tc-pad) auto;max-width:min(26rem,calc(100% - 2 * var(--tc-pad) - 14rem));padding:.85rem 1rem .9rem;border:1px solid var(--rule);border-radius:12px;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(6px);font-family:inherit;font-weight:500;font-size:1rem;line-height:1.45;letter-spacing:0;color:var(--ink);box-shadow:0 18px 40px -28px rgb(0 0 0 / .6)}
.nx-machine .tc-machine-readout::before{margin-inline-end:.6rem;vertical-align:2px}
.nx-machine .tc-machine-readout:empty{display:none}
[dir=rtl] .nx-machine .tc-machine-readout{font-size:1rem}
@media(max-width:599px){.nx-machine .tc-machine-readout{position:static;order:-1;max-width:none;margin-block-end:.75rem;font-size:.9rem}.nx-track.is-scrolly .nx-machine{display:flex;flex-direction:column;justify-content:center}}
@media(max-width:599px){.nx-track.is-scrolly .nx-story{grid-template-columns:1fr}.nx-track.is-scrolly .nx-story li:not([aria-current=step]){display:none}.nx-track.is-scrolly .nx-story li{border:0}.nx-track.is-scrolly .nx-machine{padding-block:1rem}.nx-track.is-scrolly .nx-fig{width:100%}}
/* The storefront starts in the hero, then flies down into the figure as the page scrolls. */
.nx-hero-slot{display:none}
.tc-js .nx-hero-slot{display:block;width:100%;aspect-ratio:1.6;margin-block-end:.4rem}
.nx-hero-shop{position:fixed;z-index:5;top:0;left:0;pointer-events:none;transform-origin:0 0;will-change:transform}
.nx-hero-shop svg{display:block;width:100%;height:auto}
.nx-fig[data-waiting] svg{visibility:hidden}
/* Hero text column: the shop, one clear sentence, the actions, then the quieter facts. */
.nx-intro-side{gap:1.75rem}
.nx-lede{max-width:28ch;font-size:clamp(1.3rem,1rem + .75vw,1.6rem);font-weight:500;line-height:1.3;letter-spacing:-.015em;color:var(--ink);text-wrap:pretty}
.nx-lede span{color:var(--muted)}
[dir=rtl] .nx-lede{letter-spacing:0;line-height:1.5}
.nx-meta{display:grid;gap:.75rem;padding-block-start:1.5rem;border-block-start:1px solid var(--rule)}
.nx-meta-label{margin:0;font:500 .72rem/1 'Geist Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
[dir=rtl] .nx-meta-label{font-family:inherit;font-size:.85rem;letter-spacing:0}
.nx-intro-side .tc-note{margin-block-start:-.75rem}
.nx-machine :is(.tc-machine-readout,.nx-legend){transition:opacity .4s}
.nx-machine[data-waiting] :is(.tc-machine-readout,.nx-legend){opacity:0}
@media(min-width:600px){
  .nx-cell-lead{grid-template-rows:1fr auto auto auto 1fr}
  .nx-cell-lead::before{grid-row:2}.nx-cell-lead>h3{grid-row:3}.nx-cell-lead>p{grid-row:4}
  .nx-cell-lead .nx-demo{zoom:1.18}
}