/* VXQN — The Operating System for Modern Commerce (Version N)
   Dark brand: graphite #0D1117, electric blue #2563EB accent.
   Inter + JetBrains Mono. Brand colors are tweakable (see tweaks.js). */

:root{
  /* VXQN brand palette — editorial graphite + champagne gold */
  --brand:#C7A86D;
  --brand-hover:#B89858;
  --brand-soft:rgba(199,168,109,0.12);
  --brand-text:#D8C193;
  --accent-2:#5B8CFF;

  --success:#2F9E44;  --success-soft:rgba(47,158,68,0.14);
  --warning:#D97706;  --warning-soft:rgba(217,119,6,0.14);
  --danger:#DC2626;   --danger-soft:rgba(220,38,38,0.14);
  --info:#5B8CFF;     --info-soft:rgba(91,140,255,0.14);

  /* neutrals — near-black, editorial */
  --bg:#0A0B0F;
  --bg-elev:#12151C;
  --bg-sunken:#1A1F29;
  --ink:#F8F8F5;
  --ink-2:#C6CCD4;
  --ink-3:#9EA6B2;
  --ink-4:#646C78;
  --ink-5:#414853;
  --border:#212733;
  --border-2:#2B323F;
  --border-soft:#191E27;

  --serif:"Instrument Serif","Canela",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:12px; --r-2xl:16px;
  --sh-sm:0 1px 3px rgba(0,0,0,0.4),0 1px 2px rgba(0,0,0,0.3);
  --sh-md:0 4px 16px rgba(0,0,0,0.4),0 2px 6px rgba(0,0,0,0.3);
  --sh-lg:0 16px 40px rgba(0,0,0,0.5),0 4px 12px rgba(0,0,0,0.35);
  --sh-xl:0 40px 80px rgba(0,0,0,0.55),0 10px 24px rgba(0,0,0,0.4);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.6;letter-spacing:-0.006em;
  -webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01";
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
svg,img{display:block;max-width:100%}
::selection{background:var(--brand);color:#fff}

.wrap{max-width:1200px;margin:0 auto;padding:0 28px;position:relative}
.wrap-sm{max-width:920px;margin:0 auto;padding:0 28px;position:relative}

/* ===== type ===== */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--brand);
}
.eyebrow::before{content:"";width:16px;height:1.5px;background:var(--brand)}
.eyebrow.plain::before{display:none}

.h-display{font-family:var(--serif);font-size:clamp(46px,6vw,82px);font-weight:400;line-height:1.02;letter-spacing:-0.018em;color:var(--ink)}
.h1{font-family:var(--serif);font-size:clamp(32px,4vw,54px);font-weight:400;line-height:1.06;letter-spacing:-0.015em;color:var(--ink)}
.h2{font-family:var(--serif);font-size:clamp(24px,2.8vw,36px);font-weight:400;line-height:1.12;letter-spacing:-0.012em;color:var(--ink)}
.h3{font-family:var(--sans);font-size:18px;font-weight:600;letter-spacing:-0.012em;color:var(--ink)}
.lede{font-family:var(--sans);font-size:18px;line-height:1.6;color:var(--ink-3);letter-spacing:-0.006em}
.muted{color:var(--ink-3)}
.mono{font-family:var(--mono);font-feature-settings:"tnum"}

/* ===== buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14.5px;font-weight:550;letter-spacing:-0.006em;
  padding:11px 18px;border-radius:var(--r-lg);
  border:1px solid var(--border-2);background:var(--bg-elev);color:var(--ink);
  transition:all .16s ease;box-shadow:var(--sh-sm);cursor:pointer;
}
.btn:hover{border-color:var(--ink-5);box-shadow:var(--sh-md)}
.btn.primary{background:var(--brand);color:#08090B;border-color:var(--brand);box-shadow:none;font-weight:600}
.btn.primary:hover{background:var(--brand-hover);border-color:var(--brand-hover);box-shadow:0 4px 14px rgba(212,175,55,0.18)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none;padding-left:8px;padding-right:8px}
.btn.ghost:hover{background:var(--bg-sunken);box-shadow:none}
.btn.lg{padding:14px 24px;font-size:15.5px}
.btn .arr{display:inline-block;width:13px;height:11px;position:relative}
.btn .arr::before{content:"";position:absolute;left:0;top:50%;width:11px;height:1.5px;background:currentColor;transform:translateY(-50%)}
.btn .arr::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translateY(-50%) rotate(45deg)}

/* ===== nav ===== */
.nav{position:sticky;top:0;z-index:60;background:rgba(8,9,11,0.85);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--border)}
.nav-inner{max-width:1200px;margin:0 auto;padding:13px 28px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.brand{display:flex;align-items:center;gap:11px}
.brand-logo{height:22px;width:auto;display:block}
.brand-name{font-size:17px;font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
.brand-name .sub{display:block;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-4);margin-top:-1px}
.nav-mid{display:flex;gap:2px;align-items:center}
.nav-mid a{font-size:14px;color:var(--ink-3);padding:8px 13px;border-radius:var(--r-md);transition:color .15s,background .15s}
.nav-mid a:hover{color:var(--ink);background:var(--bg-sunken)}
.nav-r{display:flex;gap:8px;align-items:center}

.mob-btn{display:none;width:40px;height:40px;border:1px solid var(--border-2);border-radius:var(--r-md);align-items:center;justify-content:center;background:var(--bg-elev)}
.mob-btn span,.mob-btn span::before,.mob-btn span::after{content:"";display:block;width:18px;height:1.6px;background:var(--ink);transition:transform .2s,top .2s}
.mob-btn span{position:relative}
.mob-btn span::before{position:absolute;top:-6px}
.mob-btn span::after{position:absolute;top:6px}

/* ===== hero (editorial, left-aligned) ===== */
.hero{padding:96px 0 0;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-240px;right:-160px;width:680px;height:680px;background:radial-gradient(circle,rgba(199,168,109,0.05),transparent 66%);pointer-events:none}
.hero-inner{max-width:1200px;margin:0 auto;padding:0 28px;text-align:left;position:relative;display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:end}
.hero .eyebrow{margin-bottom:26px}
.hero h1{margin:0 0 0;max-width:760px}
.hero h1 .hl{color:var(--brand);font-style:italic}
.hero-aside{padding-bottom:6px}
.hero .lede{max-width:420px;margin:0 0 28px}
.hero-cta{display:flex;gap:12px;justify-content:flex-start;flex-wrap:wrap;margin-bottom:20px}
.hero-trust{display:flex;gap:8px;justify-content:flex-start;align-items:center;font-family:var(--mono);font-size:12px;color:var(--ink-4);flex-wrap:wrap;letter-spacing:0.02em}
.hero-trust .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-5)}

/* product window */
.hero-shot{max-width:1120px;margin:56px auto 0;padding:0 28px}
.window{
  border:1px solid var(--border-2);border-radius:var(--r-xl);overflow:hidden;
  background:var(--bg-elev);box-shadow:var(--sh-xl);
}
.win-bar{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;background:#0B0D11;border-bottom:1px solid var(--border)}
.win-bar .L{display:flex;align-items:center;gap:12px}
.win-dots{display:flex;gap:6px}
.win-dots i{width:11px;height:11px;border-radius:50%;background:#2E3744}
.win-dots i:nth-child(1){background:#3a2f1a}
.win-dots i:nth-child(2){background:#3a3320}
.win-dots i:nth-child(3){background:#23323a}
.win-url{font-family:var(--mono);font-size:12px;color:var(--ink-3);background:var(--bg);padding:5px 12px;border-radius:99px;border:1px solid var(--border)}
.win-url b{color:var(--ink-2);font-weight:500}
.win-bar .R{font-family:var(--mono);font-size:11px;color:var(--ink-4);display:flex;gap:14px;align-items:center}
.win-bar .live{display:flex;align-items:center;gap:6px;color:var(--success)}
.win-bar .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 6px var(--success);animation:bp 2s infinite}
@keyframes bp{0%,100%{opacity:1}50%{opacity:0.4}}
.win-frame{height:660px;background:#fafafa}
.win-frame iframe{border:0;width:100%;height:100%;display:block}

/* logos strip */
.logos{padding:48px 0;border-bottom:1px solid var(--border)}
.logos .lbl{text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-4);margin-bottom:28px}
.logos-row{display:flex;justify-content:center;align-items:center;gap:48px;flex-wrap:wrap;opacity:0.7}
.logos-row span{font-size:19px;font-weight:650;letter-spacing:-0.02em;color:var(--ink-4)}

/* sections */
.sec{padding:104px 0;border-bottom:1px solid var(--border)}
.sec-head{text-align:left;max-width:720px;margin:0 0 56px}
.sec-head .eyebrow{margin-bottom:18px}
.sec-head .lede{margin-top:18px}
.sec-head.left{text-align:left;margin-left:0}

/* problem grid */
.prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.prob{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-xl);padding:26px;box-shadow:var(--sh-sm);transition:box-shadow .2s,transform .2s}
.prob:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.prob .ic{width:38px;height:38px;border-radius:var(--r-lg);background:var(--danger-soft);display:grid;place-items:center;margin-bottom:16px}
.prob .ic svg{width:18px;height:18px}
.prob h3{margin-bottom:8px}
.prob p{font-size:14px;color:var(--ink-3);line-height:1.55}
.prob .stat{margin-top:14px;font-family:var(--mono);font-size:12px;color:var(--danger);letter-spacing:0.02em;display:flex;align-items:center;gap:7px}
.prob .stat::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--danger)}

/* pipeline */
.pipe{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-2xl);padding:40px 32px;box-shadow:var(--sh-md);overflow-x:auto}
.pipe-track{display:flex;align-items:stretch;gap:0;min-width:760px}
.pipe-step{flex:1;position:relative;padding:0 14px;text-align:center}
.pipe-step:not(:last-child)::after{content:"";position:absolute;top:21px;right:-8px;width:16px;height:1.5px;background:var(--border-2)}
.pipe-step:not(:last-child)::before{content:"";position:absolute;top:17px;right:-10px;width:7px;height:7px;border-top:1.5px solid var(--border-2);border-right:1.5px solid var(--border-2);transform:rotate(45deg);z-index:2}
.pipe-num{width:44px;height:44px;margin:0 auto 14px;border-radius:50%;background:var(--brand-soft);color:var(--brand-text);display:grid;place-items:center;font-family:var(--mono);font-size:14px;font-weight:600}
.pipe-step.hot .pipe-num{background:var(--brand);color:#0A0B0F;box-shadow:0 4px 14px rgba(199,168,109,0.22)}
.pipe-step .t{font-size:14px;font-weight:600;margin-bottom:5px}
.pipe-step .d{font-size:12px;color:var(--ink-4);line-height:1.45}

/* capabilities */
.caps{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.cap{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-xl);padding:32px;box-shadow:var(--sh-sm);display:flex;gap:20px}
.cap .ic{width:44px;height:44px;border-radius:var(--r-lg);background:var(--brand-soft);display:grid;place-items:center;flex-shrink:0}
.cap .ic svg{width:21px;height:21px;color:var(--brand)}
.cap h3{margin-bottom:8px}
.cap p{font-size:14px;color:var(--ink-3);line-height:1.55}
.cap .tags{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}
.cap .tags span{font-family:var(--mono);font-size:10.5px;letter-spacing:0.04em;color:var(--ink-3);background:var(--bg-sunken);padding:3px 8px;border-radius:99px;border:1px solid var(--border)}

/* roles */
.roles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.role{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .18s}
.role:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.role .dot{width:10px;height:10px;border-radius:50%;margin-bottom:14px}
.role .name{font-size:15px;font-weight:600;margin-bottom:4px}
.role .scope{font-size:12.5px;color:var(--ink-4);line-height:1.45}

/* integrations */
.integ{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.integ-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-xl);padding:32px;box-shadow:var(--sh-sm);position:relative;overflow:hidden}
.integ-card .badge{position:absolute;top:24px;right:24px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.06em;color:var(--success);background:var(--success-soft);padding:4px 10px;border-radius:99px;font-weight:500}
.integ-card .logo{font-size:22px;font-weight:700;letter-spacing:-0.02em;margin-bottom:16px}
.integ-card .logo .g{color:#95bf47}
.integ-card .logo .d{color:#e4002b}
.integ-card p{font-size:14.5px;color:var(--ink-3);line-height:1.6;max-width:420px}
.integ-card ul{margin-top:18px;list-style:none;display:grid;gap:9px}
.integ-card li{font-size:13.5px;color:var(--ink-2);display:flex;align-items:flex-start;gap:10px}
.integ-card li svg{width:15px;height:15px;color:var(--success);flex-shrink:0;margin-top:2px}

/* proof / trust */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:var(--bg-elev)}
.proof .cell{padding:32px 24px;border-right:1px solid var(--border)}
.proof .cell:last-child{border-right:none}
.proof .v{font-size:36px;font-weight:700;letter-spacing:-0.03em;color:var(--ink);line-height:1}
.proof .v .u{font-size:16px;color:var(--brand);margin-left:2px}
.proof .l{margin-top:10px;font-size:13px;color:var(--ink-3);line-height:1.45}
.trust-row{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.trust-chip{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-3);background:var(--bg-elev);border:1px solid var(--border);border-radius:99px;padding:8px 16px;box-shadow:var(--sh-sm)}
.trust-chip svg{width:15px;height:15px;color:var(--brand)}

/* pricing */
.pricing-card{max-width:780px;margin:0 auto;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--r-2xl);box-shadow:var(--sh-lg);overflow:hidden}
.pricing-top{padding:40px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;border-bottom:1px solid var(--border);background:var(--bg-sunken)}
.pricing-top .meter{font-family:var(--mono);font-size:13px;letter-spacing:0.04em;color:var(--brand-text);background:var(--bg-elev);border:1px solid var(--border-2);padding:4px 10px;border-radius:99px;display:inline-block;margin-bottom:14px}
.pricing-top h2{margin-bottom:8px}
.pricing-top p{font-size:14.5px;color:var(--ink-3);max-width:420px}
.pricing-price{text-align:right}
.pricing-price .amt{font-size:52px;font-weight:700;letter-spacing:-0.03em;color:var(--ink);line-height:1}
.pricing-price .amt .per{font-size:16px;color:var(--ink-4);font-weight:500}
.pricing-price .note{font-size:12.5px;color:var(--ink-4);margin-top:6px;font-family:var(--mono)}
.pricing-feats{padding:32px 40px;display:grid;grid-template-columns:1fr 1fr;gap:12px 32px}
.pricing-feats li{list-style:none;font-size:14px;color:var(--ink-2);display:flex;align-items:flex-start;gap:11px}
.pricing-feats li svg{width:16px;height:16px;color:var(--brand);flex-shrink:0;margin-top:2px}
.pricing-foot{padding:0 40px 40px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* CTA */
.cta{padding:120px 0;text-align:left;background:var(--bg)}
.cta .wrap-sm{margin:0 auto}
.cta h2{max-width:640px;margin:0 0 18px}
.cta .lede{max-width:520px;margin:0 0 32px}
.cta-row{display:flex;gap:12px;justify-content:flex-start;flex-wrap:wrap}
.cta .eyebrow{justify-content:flex-start}

/* footer */
.foot{background:var(--bg-elev);border-top:1px solid var(--border);padding:56px 0 28px}
.foot-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--border)}
.foot-brand .desc{margin-top:16px;font-size:13.5px;color:var(--ink-4);line-height:1.6;max-width:280px}
.foot-col h6{font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-4);margin-bottom:14px;font-weight:600}
.foot-col a{display:block;font-size:13.5px;color:var(--ink-3);padding:5px 0;transition:color .15s}
.foot-col a:hover{color:var(--brand)}
.foot-bottom{padding-top:24px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-4)}
.foot-bottom .links{display:flex;gap:20px;flex-wrap:wrap}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ===== mental-model flow strip ===== */
.flow{display:grid;grid-template-columns:1fr auto 1.25fr auto 1fr auto 1fr;gap:0;align-items:stretch;border:1px solid var(--border);border-radius:var(--r-2xl);overflow:hidden;background:var(--bg-elev)}
.flow-node{padding:28px 24px}
.flow-node.center{background:var(--bg-sunken);border-left:1px solid var(--border);border-right:1px solid var(--border)}
.flow-node .k{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-4);margin-bottom:10px}
.flow-node.center .k{color:var(--brand)}
.flow-node .t{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);margin-bottom:8px;letter-spacing:-0.01em}
.flow-node .d{font-size:13px;color:var(--ink-3);line-height:1.5}
.flow-arrow{display:grid;place-items:center;color:var(--ink-4);font-size:16px;padding:0 6px;background:var(--bg-elev)}
.flow-cap{margin-top:24px;font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.4;color:var(--ink-2);max-width:760px}

/* ===== six pillars (interactive explorer) ===== */
.explorer{display:grid;grid-template-columns:1fr 1.05fr;gap:0;border:1px solid var(--border);border-radius:var(--r-2xl);overflow:hidden;min-height:420px}
.exp-list{display:flex;flex-direction:column;background:var(--bg-elev);border-right:1px solid var(--border)}
.exp-item{
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  padding:24px 28px;text-align:left;border-bottom:1px solid var(--border);
  cursor:pointer;color:var(--ink-3);transition:background .2s,color .2s;position:relative;
}
.exp-item:last-child{border-bottom:none}
.exp-item:hover{background:var(--bg-sunken);color:var(--ink-2)}
.exp-item.active{background:var(--bg-sunken);color:var(--ink)}
.exp-item.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand)}
.exp-n{font-family:var(--mono);font-size:12px;color:var(--ink-5);letter-spacing:0.06em}
.exp-item.active .exp-n{color:var(--brand)}
.exp-t{font-family:var(--sans);font-size:16px;font-weight:600;letter-spacing:-0.012em}
.exp-x{width:16px;height:1px;background:var(--brand);opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .25s}
.exp-item.active .exp-x{opacity:1;transform:none}

.exp-panel{
  background:var(--bg-sunken);padding:52px 48px;
  display:flex;flex-direction:column;justify-content:center;gap:20px;position:relative;
}
.exp-tag{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-4)}
.exp-panel::before{display:none}
.exp-ic{width:64px;height:64px;border-radius:16px;background:var(--bg);border:1px solid var(--border);display:grid;place-items:center;color:var(--brand)}
.exp-ic svg{width:30px;height:30px}
.exp-claim{font-family:var(--serif);font-size:clamp(27px,3.2vw,38px);font-weight:400;color:var(--ink);letter-spacing:-0.018em;line-height:1.1;max-width:15ch;text-wrap:balance}
.exp-desc{font-size:16px;color:var(--ink-3);line-height:1.6;max-width:42ch}
.exp-desc b{color:var(--brand);font-weight:600}
.exp-panel.swap{animation:expSwap .35s ease}
@keyframes expSwap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===== who it's for ===== */
.icp{max-width:860px}
.icp .anchor{font-family:var(--serif);font-size:clamp(24px,3vw,34px);line-height:1.3;letter-spacing:-0.012em;color:var(--ink);margin-bottom:20px}
.icp p{font-size:16px;color:var(--ink-3);line-height:1.7;max-width:680px}
.icp .candor{color:var(--ink-2);margin-top:14px}
.icp .more{margin-top:24px;display:inline-flex;align-items:center;gap:8px;color:var(--brand);font-size:14.5px;font-weight:500}

/* ===== trust band ===== */
.trustband{background:#070809;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:80px 0}
.trustband .tb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden}
.tb-cell{padding:26px 24px;border-right:1px solid var(--border)}
.tb-cell:last-child{border-right:none}
.tb-cell .ic{width:30px;height:30px;border-radius:8px;background:var(--bg-sunken);display:grid;place-items:center;margin-bottom:14px;color:var(--ink-3)}
.tb-cell .ic svg{width:15px;height:15px}
.tb-cell .lbl{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);margin-bottom:8px;letter-spacing:-0.01em}
.tb-cell .d{font-size:13px;color:var(--ink-3);line-height:1.6}
.tb-cell .d code{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);background:var(--bg-elev);padding:1px 4px;border-radius:4px;letter-spacing:0}

@media (max-width:980px){
  .flow{grid-template-columns:1fr}
  /* stacked: drop the rotated arrows (full-width cells became 342px-tall when
     rotated and overlapped the cards) and use clean separators between nodes */
  .flow-arrow{display:none}
  .flow-node{border-bottom:1px solid var(--border);padding:24px 22px}
  .flow-node:last-child{border-bottom:none}
  .flow-node.center{border-left:none;border-right:none}
  .explorer{grid-template-columns:1fr}
  .exp-list{border-right:none;border-bottom:1px solid var(--border)}
  .exp-panel{padding:40px 32px}
  .trustband .tb-grid{grid-template-columns:1fr 1fr}
  .tb-cell:nth-child(2){border-right:none}
  .tb-cell{border-bottom:1px solid var(--border)}
}

@media (max-width:980px){
  .nav-mid{display:none}
  .mob-btn{display:flex}
  .hero-inner{grid-template-columns:1fr;gap:32px;align-items:start}
  .hero-aside{padding-bottom:0}
  .hero .lede{max-width:560px}
  .prob-grid,.caps,.integ{grid-template-columns:1fr}
  .roles{grid-template-columns:1fr 1fr}
  .proof{grid-template-columns:1fr 1fr}
  .proof .cell:nth-child(2){border-right:none}
  .proof .cell{border-bottom:1px solid var(--border)}
  .pricing-top{grid-template-columns:1fr;text-align:left}
  .pricing-price{text-align:left}
  .pricing-feats{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:560px){
  .wrap,.wrap-sm{padding:0 20px}
  .sec{padding:64px 0}
  .win-frame{height:440px}
  .roles{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr}
}
@media (max-width:620px){
  .exp-item{padding:18px 20px;gap:12px}
  .exp-panel{padding:32px 24px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ===== homepage mobile nav drawer (production) ===== */
.mob-btn.open span{background:transparent}
.mob-btn.open span::before{top:0;transform:rotate(45deg)}
.mob-btn.open span::after{top:0;transform:rotate(-45deg)}
.mob-drawer{
  position:fixed;inset:0;z-index:80;
  background:rgba(8,9,11,0.97);backdrop-filter:saturate(160%) blur(18px);
  display:flex;flex-direction:column;padding:84px 24px 28px;
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;overflow-y:auto;
}
.mob-drawer.open{opacity:1;visibility:visible}
.mob-drawer .md-close{position:absolute;top:18px;right:18px}
.mob-drawer>a{display:block;font-family:var(--serif);font-size:30px;line-height:1.2;color:var(--ink);padding:15px 0;border-bottom:1px solid var(--border)}
.mob-drawer>a:hover{color:var(--brand)}
.mob-drawer .md-cta{margin-top:28px;display:flex;flex-direction:column;gap:10px}
.mob-drawer .md-cta .btn{justify-content:center;padding:14px 22px}
@media (min-width:981px){.mob-drawer{display:none}}

/* ===== Responsive — phone tightening pass (<=480px / <=400px) =====
   Tightens spacing on small phones only. Desktop and existing
   980/620/560 breakpoints are unchanged. Mobile drawer rules above
   remain intact. The .pipe pipeline keeps its intentional overflow-x:auto. */
@media (max-width:480px){
  /* container side padding ~18–20px on phones */
  .wrap,.wrap-sm{padding:0 18px}
  .nav-inner{padding:12px 18px}
  .hero-inner,.hero-shot{padding-left:18px;padding-right:18px}

  /* hero: reduce big top padding 96px -> 52px */
  .hero{padding-top:52px}
  .hero .eyebrow{margin-bottom:20px}
  .hero .lede{margin-bottom:22px}
  .hero-shot{margin-top:40px}

  /* hero meta rows wrap cleanly, no overflow */
  .hero-cta{gap:10px}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
  .hero-trust{gap:6px;row-gap:8px;font-size:11.5px}

  /* product window — shorter on small screens */
  .win-frame{height:360px}
  .win-bar{padding:10px 12px}
  .win-bar .R{display:none}
  .win-url{font-size:11px;padding:4px 10px}

  /* section vertical padding trimmed */
  .sec{padding:52px 0}
  .sec-head{margin-bottom:40px}
  .cta{padding:72px 0}

  /* logos strip wraps tighter */
  .logos{padding:36px 0}
  .logos-row{gap:24px 28px}
  .logos-row span{font-size:17px}

  /* cards/padding ease-down */
  .prob,.cap,.integ-card{padding:22px}
  .cap{flex-direction:column;gap:14px}
  .pipe{padding:26px 18px}
  .exp-panel{padding:30px 22px}
  .exp-claim{font-size:clamp(24px,7vw,30px)}

  /* trust band single column — fix doubled borders on collapse */
  .trustband{padding:56px 0}
  .trustband .tb-grid{grid-template-columns:1fr}
  .tb-cell{border-right:none;border-bottom:1px solid var(--border)}
  .tb-cell:last-child{border-bottom:none}

  /* proof grid single column — fix doubled borders on collapse */
  .proof{grid-template-columns:1fr}
  .proof .cell{border-right:none;border-bottom:1px solid var(--border)}
  .proof .cell:last-child{border-bottom:none}
  .proof .v{font-size:32px}

  /* pricing wraps cleanly into one column */
  .pricing-top{padding:28px 24px;gap:18px}
  .pricing-price{text-align:left}
  .pricing-price .amt{font-size:44px}
  .pricing-feats{padding:24px;grid-template-columns:1fr;gap:10px}
  .pricing-foot{padding:0 24px 28px}
  .pricing-foot .btn{flex:1 1 auto;justify-content:center}

  /* footer single column */
  .foot{padding:48px 0 24px}
  .foot-cols{grid-template-columns:1fr;gap:24px}
  .foot-bottom{flex-direction:column;gap:12px}
}

@media (max-width:400px){
  /* extra tuning for the smallest phones (320–400px) */
  .wrap,.wrap-sm{padding:0 16px}
  .hero{padding-top:48px}
  .logos-row{gap:18px 22px}
  .pipe-track{min-width:680px}
}

/* ===== hero product demo: desktop iframe vs mobile poster =====
   The interactive ERP demo is desktop-only. On phones/tablets we hide the
   (unloaded) iframe and show a poster + "open the live demo" CTA instead. */
.win-mobile{display:none}
@media (max-width:820px){
  .win-frame{height:auto !important;min-height:0}
  .win-frame iframe{display:none}
  .win-mobile{
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:13px;
    padding:30px 24px;background:radial-gradient(120% 140% at 100% 0,rgba(199,168,109,0.08),transparent 60%),linear-gradient(165deg,#12151C,#0B0D11);
    text-align:left;
  }
  .win-mobile .wm-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--brand-text)}
  .win-mobile .wm-title{font-family:var(--serif);font-size:27px;line-height:1.1;letter-spacing:-0.01em;color:var(--ink)}
  .win-mobile .wm-text{font-size:14px;color:var(--ink-3);line-height:1.55;max-width:46ch}
  .win-mobile .btn{margin-top:4px}
  .win-mobile .wm-hint{font-family:var(--mono);font-size:10.5px;letter-spacing:0.06em;color:var(--ink-4)}
}

/* ===== mobile nav: logo + hamburger only (CTAs live in the drawer) ===== */
@media (max-width:980px){
  .nav-r{display:none}
}

/* ============================================================
   FINAL MOBILE EXCELLENCE PASS (phones 360–430px)
   Add-only @media(max-width) rules. Desktop untouched. All
   preserved rules above (820px poster swap, 980px flow/nav
   collapse, drawer) remain authoritative — nothing here
   overrides them.
   ============================================================ */

/* ---- Tap targets: every interactive element comfortably hittable ---- */
@media (max-width:820px){
  /* footer link columns: bump row height to ~44px tap target */
  .foot-col a{padding:10px 0;font-size:14px}
  .foot-bottom .links{gap:14px 22px}
  .foot-bottom .links a{display:inline-flex;align-items:center;min-height:44px}
  /* "see who it's not for" style inline link */
  .icp .more{min-height:44px;padding:6px 0}
  /* drawer links already large; guarantee min tap height + wrapping */
  .mob-drawer>a{min-height:56px;display:flex;align-items:center;overflow-wrap:anywhere}
  .mob-drawer .md-cta .btn{min-height:50px;font-size:15.5px}
  .mob-btn{width:44px;height:44px}
  /* all primary/secondary buttons reach 44px on phones */
  .btn{min-height:44px}
  .btn.ghost{min-height:0}
}

/* ---- Long-string wrapping: emails / URLs / labels never overflow ---- */
@media (max-width:820px){
  .win-url,.tb-cell .d code,.foot-col a,.foot-bottom .links a,
  .hero-trust,.exp-desc,.flow-node .d,.prob p,.cap p,.integ-card p,
  .pricing-top p,.icp p{overflow-wrap:anywhere}
  .hero-trust{word-break:normal}
}

/* ---- The 9-step pipeline: keep horizontal scroll, add affordance ---- */
@media (max-width:820px){
  /* contain scroll to the card so it never pushes body width */
  .pipe{max-width:100%;-webkit-overflow-scrolling:touch;
    /* subtle right-edge fade hints "more to scroll" */
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  }
  /* slim, branded scrollbar as a visible affordance */
  .pipe::-webkit-scrollbar{height:6px}
  .pipe::-webkit-scrollbar-track{background:var(--bg-sunken);border-radius:99px}
  .pipe::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:99px}
  .pipe{scrollbar-width:thin;scrollbar-color:var(--border-2) var(--bg-sunken)}
}

/* ---- Type comfort: headings shrink, captions stay >= readable ---- */
@media (max-width:480px){
  /* oversized serif display/section heads never look comical or wrap forever */
  .h-display{font-size:clamp(34px,10vw,46px);line-height:1.05}
  .h1{font-size:clamp(28px,8vw,40px)}
  .h2{font-size:clamp(23px,6.4vw,30px)}
  .hero h1{max-width:none}
  .lede,.hero .lede{font-size:16px}
  /* tiny captions floor at 12.5–13px; primary body text floors at 14px */
  .prob p,.cap p,.integ-card p{font-size:14px}
  .flow-node .d,.tb-cell .d,.exp-tag{line-height:1.55}
  .icp p{font-size:15px}
  .icp .anchor{font-size:clamp(22px,6.6vw,28px)}
}

/* ---- Spacing rhythm + collapsed-grid border hygiene ---- */
@media (max-width:480px){
  /* consistent ~48px section rhythm */
  .sec{padding:48px 0}
  .sec-head{margin-bottom:34px}
  .cta{padding:56px 0}

  /* FLOW (stacked cards) — tighten + ensure clean single-column dividers.
     (Arrows already hidden at 980px; center borders already neutralized.) */
  .flow-node{padding:20px 18px}
  .flow-cap{margin-top:18px;font-size:17px}

  /* EXPLORER — list rows as real tap targets, panel tightened */
  .exp-item{padding:16px 18px;gap:12px;min-height:60px}
  .exp-t{font-size:15.5px}
  .exp-x{display:none} /* decorative line is noise once stacked */
  .exp-panel{padding:28px 20px;gap:16px;min-height:0}
  .exp-ic{width:54px;height:54px;border-radius:13px}
  .exp-ic svg{width:26px;height:26px}
  .exp-desc{font-size:15px;max-width:none}

  /* PRICING — tighter, single-column, full-width CTA */
  .pricing-card{border-radius:var(--r-xl)}
  .pricing-top{padding:26px 20px;gap:16px}
  .pricing-top .meter{margin-bottom:12px}
  .pricing-price .amt{font-size:40px}
  .pricing-feats{padding:22px 20px;gap:10px}
  .pricing-feats li{font-size:14px}
  .pricing-foot{padding:0 20px 26px;gap:10px}

  /* ROLES already 1-col at 560px; ensure tidy spacing + tap height */
  .role{padding:18px;min-height:64px}

  /* PROOF / TRUST values shrink so they never crowd the unit suffix */
  .proof .cell{padding:24px 20px}
  .tb-cell{padding:22px 20px}

  /* CTA + section heads read tight, not empty */
  .cta h2{margin-bottom:14px}
  .cta .lede{margin-bottom:26px}
}

/* ---- Smallest phones (<=400px): final polish ---- */
@media (max-width:400px){
  .hero-trust{font-size:11px}
  /* keep two CTAs side-by-side only if they fit; else stack full-width */
  .hero-cta .btn,.cta-row .btn{flex:1 1 100%}
  .pricing-price .amt{font-size:36px}
  .exp-t{font-size:15px}
  .flow-cap{font-size:16px}
}