/* ============================================================================
   uxjo 2.0 — site chrome. Sits ON TOP of styles.css (the product design
   system). Nothing here redefines a DS primitive: .btn, .card, .eyebrow,
   .wrap, .section, .tag and the graph-paper body background all come from
   styles.css. This file only adds what a marketing site needs and the
   product does not have: marketing nav, mobile drawer, footer, conversion bar.
   Mobile-first: every rule is the phone rule, min-width queries scale up.
   ============================================================================ */

.skip{position:absolute;left:-9999px;top:.5rem;z-index:999;background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:10px;font-weight:700}
.skip:focus{left:.5rem}
button{background:none;border:0;font:inherit;color:inherit;cursor:pointer}
ul,ol{list-style:none;padding:0}
p{text-wrap:pretty}

/* ---------- rhythm helpers layered on .section ---------- */
.sec-sm{padding-block:clamp(2rem,4.5vw,3.75rem)}
.sec-head.mid{margin-inline:auto;text-align:center}
.sec-head.mid .eyebrow{justify-content:center}
.sec-head h2{margin-top:.9rem}
@media (max-width:720px){.sec-head h2{font-size:clamp(2rem,1.2rem + 4vw,3rem)}.sec-head p{font-size:var(--fs-lg)}}
.lede{font-size:var(--fs-xl);color:var(--fg-3);line-height:1.5;max-width:56ch}
.on-ink .lede,.section--ink .lede{color:var(--fg-on-ink-2)}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem}
.btn-txt{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-weight:var(--fw-bold);color:var(--fg-1);font-size:var(--fs-base)}
.btn-txt .ar{transition:transform var(--t-base) var(--ease-out)}
.btn-txt:hover .ar{transform:translateX(4px)}
.section--ink .btn-txt{color:#fff}
@media (max-width:560px){.cta-row .btn{flex:1 1 100%}}

/* ---------- NAV (extends .nav from styles.css) ---------- */
.nav .wrap{gap:.75rem;height:64px}
.nav-brand{display:flex;align-items:center;gap:.5rem;flex:none;margin-right:auto}
.nav-brand img{height:24px;width:auto}
.nav-brand .lg-l{display:none}
:root[data-theme="dark"] .nav-brand .lg-d{display:none}
:root[data-theme="dark"] .nav-brand .lg-l{display:block}
.nav-links{display:none}
.nav-act{display:flex;align-items:center;gap:.35rem}
.nav-act .sign{display:none}
.tgl{width:44px;height:44px;border-radius:var(--r-pill);display:grid;place-items:center;color:var(--fg-3);transition:background var(--t-fast),color var(--t-fast)}
.tgl:hover{background:var(--neutral-100);color:var(--fg-1)}
.tgl .i-sun{display:none}
:root[data-theme="dark"] .tgl .i-sun{display:block}
:root[data-theme="dark"] .tgl .i-moon{display:none}
.burger{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;gap:5px;align-content:center;color:var(--fg-1)}
.burger i{width:19px;height:2px;background:currentColor;border-radius:2px;transition:transform var(--t-base) var(--ease-out),opacity var(--t-fast)}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (min-width:1040px){
  .nav .wrap{height:70px;gap:1.25rem}
  .nav-brand{margin-right:.5rem}
  .nav-links{display:flex;align-items:center;gap:.2rem;margin-right:auto}
  .burger{display:none}
  .drawer{display:none}
  .nav-act{gap:.55rem}
  .nav-act .sign{display:inline-flex;align-items:center;min-height:40px;padding:0 .5rem;font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--fg-1)}
}
.nd{position:relative;padding-block:.9rem}
.nd>a{display:inline-flex;align-items:center;gap:.3rem;padding:.5rem .7rem;border-radius:10px;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--fg-2);transition:color var(--t-fast),background var(--t-fast)}
.nd>a:hover,.nd:focus-within>a,.nd>a[aria-current]{color:var(--fg-1)}
.nd>a[aria-current]{background:var(--neutral-100)}
.nd .chev{transition:transform var(--t-fast)}
.nd:hover .chev,.nd:focus-within .chev{transform:rotate(180deg)}
.nmenu{position:absolute;top:calc(100% - .4rem);left:0;min-width:288px;background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:.4rem;opacity:0;transform:translateY(-6px) scale(.985);pointer-events:none;transition:opacity var(--t-fast),transform var(--t-fast) var(--ease-out);z-index:90}
.nd:hover .nmenu,.nd:focus-within .nmenu{opacity:1;transform:none;pointer-events:auto}
/* The label is a bare text node and the description is a sibling, so as a flex
   row they sat side by side and each wrapped into its own ragged column. Same
   grid the drawer's .dsub a uses: icon spans both rows, text stacks beside it. */
.nmenu a{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;
  gap:.05rem .7rem;padding:.55rem .6rem;border-radius:10px;font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);color:var(--fg-2);line-height:1.3}
.nmenu a:hover{background:var(--neutral-50);color:var(--fg-1)}
.nmenu small{grid-column:2;display:block;font-weight:var(--fw-regular);font-size:var(--fs-2xs);color:var(--fg-4);line-height:1.35}
.nmenu .mi{grid-row:1/3;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none}

/* locking the body breaks position:sticky, so the nav is pinned explicitly */
body.nav-locked{overflow:hidden}
body.nav-locked .nav{position:fixed;top:0;left:0;right:0}

/* ---------- mobile drawer ---------- */
.drawer{position:fixed;inset:64px 0 0;z-index:49;background:var(--bg-canvas);overflow-y:auto;overscroll-behavior:contain;padding:1rem var(--gutter) 2rem;display:flex;flex-direction:column;opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;transition:opacity var(--t-base),transform var(--t-base) var(--ease-out),visibility var(--t-base)}
.drawer[data-open="1"]{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.drawer[hidden]{display:none}
.dgrp{border-bottom:1px solid var(--border-1)}
.dgrp>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:56px;padding:.35rem .25rem;font-size:1.3125rem;font-weight:var(--fw-extra);
  letter-spacing:var(--track-head);color:var(--fg-1);cursor:pointer;list-style:none;
  border-radius:var(--r-md);transition:color var(--t-fast)}
.dgrp>summary::-webkit-details-marker{display:none}
.dgrp>summary:focus-visible{outline:2px solid var(--fg-1);outline-offset:-2px;border-radius:var(--r-md)}
/* .chev IS the svg (Lucide replaces the <i> in place, keeping the class), so
   pseudo-elements never render on it — that is why the bar version vanished.
   A small chevron on the mark itself: quiet grey, coral and flipped when open. */
.dgrp>summary .chev{width:20px;height:20px;flex:none;color:var(--fg-4);
  transition:transform var(--t-base) var(--ease-out),color var(--t-fast)}
.dgrp>summary:hover .chev{color:var(--fg-2)}
.dgrp[open]>summary{color:var(--fg-1)}
.dgrp[open]>summary .chev{transform:rotate(180deg);color:var(--coral)}

/* Sub-items: title over description, not two ragged columns. The rotated
   square is the same marker the section eyebrows use. */
.dsub{display:grid;gap:.15rem;padding:.1rem 0 .9rem}
.dsub a{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:.05rem .7rem;
  min-height:48px;padding:.55rem .6rem;border-radius:var(--r-md);
  font-size:.9375rem;font-weight:var(--fw-semibold);color:var(--fg-1);line-height:1.3;
  transition:background var(--t-fast),transform var(--t-fast) var(--ease-out)}
.dsub a::before{content:"";grid-row:1/3;width:8px;height:8px;margin-top:.32rem;
  border-radius:2.5px;background:var(--border-3);transform:rotate(12deg);
  transition:background var(--t-fast),transform var(--t-base) var(--ease-snap)}
.dsub a:hover,.dsub a:active{background:var(--bg-surface);box-shadow:var(--sh-xs)}
.dsub a:hover::before,.dsub a:active::before{background:var(--coral);transform:rotate(45deg)}
.dsub small{grid-column:2;font-size:.8125rem;color:var(--fg-3);font-weight:var(--fw-regular);
  line-height:1.35;margin-top:.1rem}
/* items arrive in sequence when the group opens */
.dgrp[open] .dsub a{animation:dIn .32s var(--ease-out) both}
.dgrp[open] .dsub a:nth-child(2){animation-delay:.04s}
.dgrp[open] .dsub a:nth-child(3){animation-delay:.08s}
.dgrp[open] .dsub a:nth-child(4){animation-delay:.12s}
.dgrp[open] .dsub a:nth-child(5){animation-delay:.16s}
@keyframes dIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.dlink{display:flex;align-items:center;min-height:56px;padding:.35rem .25rem;
  font-size:1.3125rem;font-weight:var(--fw-extra);letter-spacing:var(--track-head);
  color:var(--fg-1);border-bottom:1px solid var(--border-1);border-radius:var(--r-md);
  transition:color var(--t-fast)}
.dlink:hover{color:var(--coral-deep)}
.dlink:focus-visible{outline:2px solid var(--sky);outline-offset:-2px}
.dfoot{display:grid;gap:.6rem;margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--border-1)}
.dfoot .btn{width:100%;min-height:48px}
@media (prefers-reduced-motion:reduce){.dgrp[open] .dsub a{animation:none}}

/* ---------- sticky mobile conversion bar ---------- */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;gap:.6rem;padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));background:rgba(244,247,249,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--border-1);transform:translateY(115%)}
@keyframes uxBarIn{to{transform:none}}
@supports (animation-timeline:view()){
  body{timeline-scope:--heroTL}
  .hero{view-timeline-name:--heroTL}
  .mbar{animation:uxBarIn both steps(1,end);animation-timeline:--heroTL;animation-range:exit 30% exit 55%}
}
@supports not (animation-timeline:view()){.mbar{transform:none}}
:root[data-theme="dark"] .mbar{background:rgba(14,17,22,.9)}
.mbar .btn{flex:1;padding-inline:1rem}
/* The sticky bar is the last thing a phone visitor sees, so it offers a real
   conversation on the channel the product is built around, not a price list. */
.mbar .btn-wa{background:var(--ch-wa);color:#04301B;border:0;gap:.45rem}
.mbar .btn-wa .bi{width:17px;height:17px;fill:currentColor;flex:none}
.mbar .btn-wa:hover{background:var(--ch-wa-deep);color:#fff}
:root[data-theme="dark"] .mbar .btn-wa{background:var(--ch-wa);color:#04301B}
@media (min-width:1040px){.mbar{display:none}}

/* ---------- footer ---------- */
.foot{background:#0a0a0c;color:var(--fg-on-ink-2)}
.foot .wrap{padding-block:clamp(2.5rem,5vw,3.75rem) 1.75rem}
.foot-in{display:grid;gap:2.5rem}
.foot-brand{display:grid;gap:1rem;max-width:36ch;justify-items:start;align-content:start}
.foot-brand img{height:24px;width:auto;display:block}
.foot-brand p{font-size:var(--fs-sm);color:var(--fg-on-ink-2);line-height:1.6}
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:2rem 1rem}
.foot h5{color:#fff;font-size:var(--fs-sm);font-weight:var(--fw-bold);margin-bottom:.8rem}
.foot li a{display:inline-flex;align-items:center;min-height:38px;font-size:var(--fs-sm);color:var(--fg-on-ink-3);transition:color var(--t-fast)}
.foot li a:hover{color:#fff}
.foot-bot{grid-column:1/-1;border-top:1px solid var(--border-ink);margin-top:2rem;padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center;font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--fg-on-ink-3)}
.foot-bot a:hover{color:#fff}
@media (min-width:760px){.foot-cols{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1040px){
  .foot-in{grid-template-columns:minmax(0,1fr);gap:2.75rem}
  .foot-brand{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
    gap:1.75rem;max-width:none}
  .foot-brand p{max-width:44ch;margin:0}
}

/* ---------- icons ----------
   Lucide (CDN) for UI glyphs, brands.js sprite for the four channel marks.
   Note: the product DS ships hand-inlined Heroicons-style SVG; Lucide is used
   here at the client's explicit request for the marketing surface only. */
[data-lucide]{width:20px;height:20px;display:block}
svg.lucide{width:1em;height:1em;stroke-width:2;flex:none}
.ic-lg svg.lucide,.ic-lg [data-lucide]{width:22px;height:22px}
.ic-sm svg.lucide,.ic-sm [data-lucide]{width:16px;height:16px}
.bi{width:22px;height:22px;flex:none;fill:currentColor}
.bi-lg{width:26px;height:26px}

/* ---------- ink sections: the DS sets .sec-head h2 to fg-1, which loses on ink ---------- */
.section--ink .sec-head h2,.on-ink .sec-head h2,.cta-band .sec-head h2{color:#fff}
.section--ink .sec-head p,.on-ink .sec-head p{color:var(--fg-on-ink-2)}
.section--ink .sec-num,.on-ink .sec-num{color:var(--fg-on-ink-3)}

/* ---------- 3D brand stage ---------- */
.jo3d{position:absolute;inset:0;z-index:2}
.jo3d canvas{width:100%!important;height:100%!important;display:block}
.jo-stage[data-3d="on"] .jo{display:none}

/* ---------- ink-surface buttons: force the light-on-dark pair in BOTH themes ---------- */
.on-ink .btn-primary,.section--ink .btn-primary,.cta-band .btn-primary{background:#fff;color:#101012;border-color:#fff}
.on-ink .btn-primary:hover,.section--ink .btn-primary:hover,.cta-band .btn-primary:hover{background:var(--neutral-100);color:#101012}
.on-ink .btn-ghost,.section--ink .btn-ghost,.cta-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.28);background:transparent}
.on-ink .btn-ghost:hover,.section--ink .btn-ghost:hover,.cta-band .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)}
:root[data-theme="dark"] .btn-primary{background:#F2F5F8;color:#101012}
:root[data-theme="dark"] .btn-primary:hover{background:#fff}

/* ---------- credential chip ---------- */
.cred{display:inline-flex;align-items:center;gap:.6rem;padding:.5rem .95rem .5rem .8rem;border:1px solid var(--border-ink);border-radius:var(--r-pill);background:rgba(255,255,255,.04);color:#fff;font-size:var(--fs-sm);font-weight:var(--fw-semibold);white-space:nowrap}
.cred .dot{width:6px;height:6px;border-radius:50%;background:var(--grass);flex:none}
.cred .sep{width:1px;height:14px;background:var(--border-ink)}
/* .cred is an ink-only component: it lives in the dark footer, sets its own
   color:#fff and uses --border-ink. --fg-on-ink-3 is 5.59:1 there. */
.cred small{font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-on-ink-3);font-weight:var(--fw-regular)}

/* ---------- focus ---------- */
:where(a,button,summary,input,[tabindex]):focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:8px}
.section--ink :where(a,button,[tabindex]):focus-visible,.foot :where(a,button):focus-visible{outline-color:#fff}


/* ---------- closing capability index ----------
   Structure follows the reference closer: one very large statement, a tab
   pair, then a dense index of what is actually in the platform. The index is
   the proof; it also gives the marketing surface its internal linking. */
.cta-band .cta-inner{display:flex;flex-direction:column;gap:2rem;text-align:left}
.close-h{font-size:clamp(2rem,1rem + 5.4vw,4.5rem);font-weight:var(--fw-black);
  letter-spacing:var(--track-mega);line-height:1.02;color:#fff;text-wrap:balance}
.close-h .who{display:inline-flex;vertical-align:baseline;translate:0 .1em}
.close-h .who i{width:.72em;height:.72em;border-radius:50%;display:inline-grid;place-items:center;
  margin-left:-.18em;border:.09em solid var(--ink);background:var(--g)}
.close-h .who i:first-child{margin-left:0}
.close-h .who.ag i{border:0;background:none;color:var(--coral);font-size:.68em;line-height:1;
  width:.78em;height:.78em;margin-left:.06em}
.close-h .who.ag i.v{color:var(--violet)}

.close-tabs{display:flex;gap:.5rem;flex-wrap:wrap}
.ct{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--fg-on-ink-2);cursor:pointer;
  background:transparent;border:1.5px solid var(--border-ink);border-radius:var(--r-pill);
  padding:.6rem 1.2rem;min-height:44px;transition:color var(--t-base),background var(--t-base),border-color var(--t-base)}
.ct:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.ct.on{background:#fff;color:var(--ink);border-color:#fff}

/* The capability INDEX: a multi-column list on the ink closer. Named .cap-index
   because pages.css owns .cap for the capability CARD, and the two were
   overwriting each other on every page that loads both. */
.cap-index{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem 1.25rem}
.cap-index[hidden]{display:none}
.cap-col h3{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:#fff;margin-bottom:.7rem;
  padding-bottom:.7rem;border-bottom:1px solid var(--border-ink)}
.cap-col ul{display:flex;flex-direction:column;gap:.55rem;list-style:none;margin:0;padding:0}
.cap-col a{font-size:var(--fs-sm);color:var(--fg-on-ink-2);line-height:1.35;
  transition:color var(--t-fast)}
.cap-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

.close-cta{display:flex;flex-direction:column;gap:1.25rem;padding-top:1.75rem;
  border-top:1px solid var(--border-ink)}
.cc-copy b{display:block;font-size:clamp(1.25rem,.9rem + 1.4vw,1.75rem);font-weight:var(--fw-extra);
  letter-spacing:var(--track-head);line-height:1.15;color:#fff;text-wrap:balance}
.cc-copy span{display:block;margin-top:.6rem;font-size:var(--fs-base);color:var(--fg-on-ink-2);
  line-height:1.55;max-width:62ch}
@media (min-width:700px){.cap-index{grid-template-columns:repeat(3,1fr);gap:2rem 1.75rem}}
@media (min-width:1040px){
  .cta-band .cta-inner{gap:2.5rem}
  .cap-index{grid-template-columns:repeat(6,minmax(0,1fr));gap:2rem 1.5rem}
  #cap-ai.cap-index{grid-template-columns:repeat(4,minmax(0,1fr))}
  .close-cta{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:2.5rem}
  .close-cta .cta-row{flex:none}
}

/* brand marks inside the platform menu tiles */
.nmenu .mi .bmi{width:15px;height:15px;display:block}

/* The platform menu carries eleven entries. One column ran past the fold and
   wrapped every label, so on desktop it becomes two columns wide enough that
   nothing wraps. */
@media (min-width:1040px){
  .nd .nmenu{width:min(680px,calc(100vw - 3rem));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.1rem .35rem;align-content:start}
  .nd .nmenu a{align-items:flex-start}
  .nd .nmenu a .mi{margin-top:.05rem}
  .nd:first-child .nmenu{left:0;transform:none}
}

/* the industries menu is two labelled lists, so it needs column wrappers and a
   group heading the flat platform menu does not */
.nmenu .ncol{display:grid;align-content:start;gap:.1rem}
.ngrp{display:block;font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-4);padding:.35rem .6rem .3rem}
@media (min-width:1040px){
  .nd .nmenu-ind{width:min(600px,calc(100vw - 3rem))}
}

/* Hub link at the foot of a menu column. Injected by nav-menu.js on every
   page, so it belongs in base.css, which every page loads. */
.nmenu .nall{display:inline-flex;align-items:center;gap:.35rem;margin-top:.35rem;padding:.55rem .6rem;
  font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--link)}
.nmenu .nall i,.nmenu .nall svg{width:14px;height:14px;flex:none}

/* fill is inherited, and the Instagram path no longer declares its own, so the
   gradient reaches the cloned symbol wherever the mark is used */
use[href="#b-instagram"]{fill:url(#ig-grad)}

/* the full journey index: every scenario reachable from any page's footer,
   folded away so it does not swamp the columns above it */
.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:720px){.foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1040px){.foot-cols{grid-template-columns:repeat(6,minmax(0,1fr))}}
.foot-all{margin-top:.5rem;border-top:1px solid var(--border-ink);padding-top:1.25rem}
.foot-all summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.45rem;
  min-height:44px;font-family:var(--font-mono);font-size:var(--fs-2xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-on-ink-2)}
.foot-all summary::-webkit-details-marker{display:none}
.foot-all summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--t-base)}
.foot-all[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.foot-all summary:hover{color:#fff}
.foot .foot-all ul{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.55rem 1.5rem;
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.foot .foot-all ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1040px){.foot .foot-all ul{grid-template-columns:repeat(4,minmax(0,1fr))}}
.foot .foot-all li{margin:0}
.foot .foot-all a{display:inline-block;font-size:var(--fs-sm);line-height:1.45;color:var(--fg-on-ink-2);text-decoration:none}
.foot .foot-all a:hover{color:#fff}

/* the credential is a pill, never a panel: fixed to its content height */
.foot .cred{align-self:start;height:auto}

/* The chrome object is a background layer, not an ornament on top of the copy.
   It spans the whole band so the wide forms (slab, ring) have room, sits under
   the text, and is masked away at the edges so it never reads as a hard box. */
.band{position:relative}