/* Fonts self-hosted (SIL OFL) — no third-party request. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:italic;font-weight:800;font-display:swap;src:url(/assets/fonts/plus-jakarta-sans-latin-800-italic.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/sora-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/sora-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/sora-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2')}

:root{
  /* INFRECX — navy · action blue · running green on clean white */
  --paper:#FFFFFF; --paper-2:#F5F8FC; --card:#FFFFFF;
  --ink:#0B1F3A; --ink-2:#132C4F; --slate:#4A5B74; --slate-2:#5D6D84;
  --line:#DCE4EE; --line-2:#C9D4E2;
  --blue:#1F5FD1; --blue-strong:#1F5FD1; --blue-deep:#163F8F; --blue-wash:#EAF2FE;
  --green:#2E8B2A; --green-wash:#EAF6E8; --amber:#E6A23C; --amber-wash:#FDF3E0;
  --brand-green:#3DAA35; --brand-green-deep:#2E8B2A; --brand-navy:#0B1F3A;
  --radius:12px; --maxw:1280px;
  --display:'Sora','Plus Jakarta Sans',system-ui,sans-serif; --body:'Plus Jakarta Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --gradient-primary:linear-gradient(135deg,#1F5FD1 0%,#2A6FE6 100%);
  --gradient-hero:linear-gradient(135deg,#0B1F3A 0%,#132C4F 60%,#0F2A4D 100%);
  --gradient-brand:linear-gradient(90deg,#1F5FD1 0%,#3DAA35 100%);
  --shadow-lg:0 18px 36px -20px rgba(11,31,58,.18),0 6px 14px -8px rgba(11,31,58,.08);
  --shadow-xl:0 30px 60px -30px rgba(11,31,58,.25),0 15px 30px -15px rgba(11,31,58,.15);
  --shadow-glow:0 0 0 1px rgba(31,95,209,.1),0 8px 22px -8px rgba(31,95,209,.32);
  --r-sm:8px; --r-md:12px; --r-lg:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:none}
body::after{content:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.mono{font-family:var(--mono)}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.01em;line-height:1.1}
section{padding:56px 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--blue-wash);color:var(--blue-deep);border:1px solid rgba(31,95,209,.25);border-radius:999px;padding:6px 14px;font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue-strong)}
.sec-head{max-width:720px;margin-bottom:28px}
.sec-head h2{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,3.6vw,2.9rem);letter-spacing:-.02em;line-height:1.06;margin-top:16px}
.sec-head p{color:var(--slate);margin-top:14px;font-size:1.04rem}
.btn{font-family:var(--body);font-weight:600;font-size:.9rem;padding:12px 22px;border-radius:10px;cursor:pointer;border:1px solid transparent;display:inline-flex;align-items:center;gap:9px;transition:transform .12s,box-shadow .15s,background .15s;white-space:nowrap}
.btn-cta{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-glow)}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(31,95,209,.5);color:#fff}
.btn-ink{background:var(--ink);color:#fff;box-shadow:0 6px 18px rgba(11,31,58,.22)}
.btn-ink:hover{transform:translateY(-2px);background:var(--ink-2)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(11,31,58,.04)}
.btn-white{background:#fff;color:var(--ink)}.btn-white:hover{transform:translateY(-2px)}
/* DEFAULTS TO READABLE ON A LIGHT PAGE, not on a dark one.
   This used to be white text on a transparent background, which is correct
   inside the dark .rfq panel and invisible everywhere else — the site is
   near-white. That was patched twice, for .page-hero and .tx-cluster, and the
   third place it was used (the migration status page) inherited the fault:
   two buttons rendered as white-on-white and could only be found by mousing
   over them. A default that is wrong more often than it is right will keep
   producing that bug, so the default is inverted and the white-on-dark case is
   scoped to the dark panel it actually belongs to, below. */
.btn-line{background:var(--card,#fff);color:var(--blue-deep);border-color:var(--blue)}
.btn-line:hover{background:var(--blue-wash);color:var(--blue-deep)}
/* The dark panel — .rfq is background:var(--ink) — is where the outline button
   is meant to be white. Stated once, where it is true. */
.rfq .btn-line,.hero-dark .btn-line,.dark .btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.rfq .btn-line:hover,.hero-dark .btn-line:hover,.dark .btn-line:hover{background:rgba(255,255,255,.12);color:#fff}
.badge{font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:5px;border:1px solid;white-space:nowrap}
.badge.spec{color:var(--blue-deep);background:var(--blue-wash);border-color:var(--blue)}
.badge.value{color:var(--slate);background:var(--paper-2);border-color:var(--line-2)}
.badge.india{color:var(--green);background:var(--green-wash);border-color:var(--green)}
.badge.new{color:#8A5A08;background:var(--amber-wash);border-color:#F3D19A}
.code{font-family:var(--mono);font-size:.72rem;color:var(--blue-strong);letter-spacing:.06em;font-weight:600}
.rev{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)}
.rev.in{opacity:1;transform:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rev{opacity:1;transform:none}}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(233,238,244,.86);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.hdr .inner{display:flex;align-items:center;justify-content:space-between;height:70px;gap:24px}
.logo{height:46px;width:auto}
.nav{display:flex;align-items:center;gap:26px}
.nav a,.nav .drop>button{font-family:var(--body);font-size:.92rem;font-weight:500;color:var(--slate);transition:color .15s;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.nav a:hover,.nav .drop>button:hover{color:var(--ink)}
.nav-acct{display:none}
.drop{position:relative}
.drop .chev{transition:transform .18s;opacity:.7}
.drop.open .chev{transform:rotate(180deg)}
.drop-menu{text-align:left;position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:250px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;opacity:0;visibility:hidden;pointer-events:none;transition:.18s;z-index:60}
.drop.open .drop-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
/* align-items and text-align stated explicitly. A flex column inside a nav
   that sets align-items:center inherits that centring, so the dropdown
   rendered its title and description centred while every other menu on the
   site reads left-aligned. */
.drop-menu a{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:3px;padding:11px 14px;border-radius:9px;color:var(--ink)}
.drop-menu a b,.drop-menu a span{display:block;width:100%;text-align:left}
.drop-menu a:hover{background:var(--blue-wash);color:var(--blue-deep)}
.drop-menu a b{font-weight:600;font-size:.9rem}
.drop-menu a span{font-size:.76rem;color:var(--slate-2)}
.menu-btn{display:none;background:none;border:1px solid var(--line-2);border-radius:9px;padding:8px 10px;cursor:pointer}
.menu-btn svg{display:block}
@media(max-width:920px){.nav,.hdr .cta{display:none}.menu-btn{display:inline-flex}}

/* hero */
.hero{padding:66px 0 40px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}
.hero h1{font-family:var(--display);font-weight:900;font-size:clamp(2.5rem,5.4vw,4.1rem);letter-spacing:-.03em;line-height:1.02}
.hero h1 .g{background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .lede{color:var(--slate);font-size:1.14rem;margin-top:22px;max-width:560px}
.hero-cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.chan-row{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.chan-pill{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:.82rem;color:var(--ink-2);font-weight:500}
.chan-pill .dot{width:8px;height:8px;border-radius:50%}
.chan-pill .dot.g{background:var(--blue-strong)}.chan-pill .dot.p{background:var(--green)}
/* search signature */
.search-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-xl);padding:20px;position:relative;min-width:0;width:100%;overflow:hidden}
.hero-grid>*{min-width:0}
.search-card .sc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.search-card .sc-top .t{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2)}
.live{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);animation:blink 2s infinite}
@keyframes blink{50%{opacity:.35}}
.search-box{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line-2);border-radius:12px;padding:12px 14px;transition:border-color .15s,box-shadow .15s}
.search-box:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(31,95,209,.12)}
.search-box svg{flex:none;color:var(--slate-2)}
.search-box input{border:0;outline:0;font-family:var(--mono);font-size:.92rem;width:100%;color:var(--ink);background:none;letter-spacing:.02em}
.search-box input::placeholder{color:var(--slate-2)}
.sc-hint{font-size:.76rem;color:var(--slate-2);margin-top:10px}
.sc-hint b{color:var(--blue-strong);font-family:var(--mono);cursor:pointer}
.sc-hint b:hover{text-decoration:underline}
.sc-results{margin-top:14px;display:flex;flex-direction:column;gap:8px;max-height:230px;overflow:auto}
.sc-res{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--paper-2);transition:.14s}
.sc-res:hover{border-color:var(--blue);background:#fff}
.sc-res .l{display:flex;flex-direction:column;gap:2px;min-width:0}
.sc-res .l .nm{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-res .l .sb{font-size:.76rem;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-res .cd{font-family:var(--mono);font-size:.68rem;color:var(--blue-strong);flex:none}
.sc-empty{padding:16px;text-align:center;color:var(--slate-2);font-size:.86rem}
.sc-empty b{color:var(--ink)}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;gap:34px}.hero .lede{max-width:none}}

/* stats band */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.5)}
.stats .strip{display:grid;grid-template-columns:repeat(4,1fr);padding:30px 0}
.stats .s{text-align:center;padding:6px 18px;border-left:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.stats .s:first-child{border-left:0}
.stats .s .v{font-family:var(--display);font-weight:700;font-size:1.16rem;letter-spacing:-.01em;color:var(--ink);line-height:1.15}
.stats .s .l{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-2);line-height:1.4}
@media(max-width:700px){
  .stats .strip{grid-template-columns:1fr 1fr}
  .stats .s{padding:16px 12px;border-left:0}
  .stats .s:nth-child(even){border-left:1px solid var(--line)}
  .stats .s:nth-child(n+3){border-top:1px solid var(--line)}
}

/* two-channel */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.chan-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;position:relative;overflow:hidden;transition:.2s}
.chan-card:hover{box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.chan-card .tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:6px}
.chan-card.gov .tag{color:var(--blue-deep);background:var(--blue-wash)}
.chan-card.priv .tag{color:var(--green);background:var(--green-wash)}
.chan-card h3{font-size:1.4rem;font-weight:800;margin:16px 0 8px}
.chan-card p{color:var(--slate);font-size:.95rem}
.chan-card ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:9px}
.chan-card li{font-size:.9rem;color:var(--ink-2);padding-left:22px;position:relative}
.chan-card li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:2px;transform:rotate(45deg)}
.chan-card.gov li::before{background:var(--blue-strong)}
.chan-card.priv li::before{background:var(--green)}
@media(max-width:820px){.two-col{grid-template-columns:1fr}}

/* categories */
.cat-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.cat-filter{font-family:var(--body);font-size:.82rem;font-weight:500;padding:8px 15px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--slate);cursor:pointer;transition:.14s}
.cat-filter:hover{border-color:var(--blue);color:var(--blue-strong)}
.cat-filter.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cat{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;transition:transform .18s,box-shadow .2s,border-color .2s;position:relative}
.cat:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:rgba(31,95,209,.3)}
.cat .ch{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
.cat .code{font-size:.72rem}
.cat .flags{display:flex;gap:6px;align-items:center}
.mecwerx-flag{font-family:var(--mono);font-size:.58rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line-2);border-radius:5px;padding:2px 6px;display:inline-flex;align-items:center;gap:4px}
.mecwerx-flag::before{content:"";width:5px;height:5px;background:var(--amber);border-radius:50%}
.cat h4{font-size:1.18rem;font-weight:700;letter-spacing:-.01em}
.cat .desc{color:var(--slate);font-size:.88rem;margin-top:8px;flex:1}
.cat .subs{display:flex;flex-wrap:wrap;gap:5px;margin-top:14px;margin-bottom:16px}
.cat .subs span{font-family:var(--mono);font-size:.64rem;color:var(--slate);background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:3px 7px}
.cat .subs span.more{color:#163F8F;background:#EAF2FE;border-color:#C9DAF8;font-weight:600}
.cat .foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.cat .foot .cnt{font-size:.76rem;color:var(--slate-2)}
.cat .foot .cnt b{color:var(--ink);font-family:var(--mono)}
.cat .foot .go{font-size:.8rem;font-weight:600;color:var(--blue-strong);display:inline-flex;align-items:center;gap:5px}
.cat.hide{display:none}
@media(max-width:980px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cat-grid{grid-template-columns:1fr}}

/* bridge (mecwerx) */
.dark{background:var(--gradient-hero);color:#fff;position:relative;overflow:hidden;border-radius:0}
.dark::before{content:"";position:absolute;inset:0;background-image:linear-gradient(to right,rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.03) 1px,transparent 1px);background-size:46px 46px;pointer-events:none}
.dark h2,.dark h3{color:#fff}.dark p{color:#B8C5DA}
.dark .eyebrow{background:rgba(31,95,209,.15);color:#8FB4FF;border-color:rgba(31,95,209,.3)}
.bridge{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;position:relative;z-index:1}
.flow{display:flex;flex-direction:column;gap:14px}
.flow-step{display:flex;gap:16px;align-items:flex-start;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:18px}
.flow-step .idx{font-family:var(--mono);font-size:.8rem;font-weight:600;color:#8FB4FF;border:1px solid rgba(143,180,255,.35);border-radius:8px;width:34px;height:34px;display:grid;place-items:center;flex:none}
.flow-step h4{font-size:1rem;font-weight:700;color:#fff}
.flow-step p{font-size:.86rem;margin-top:3px;color:#9FB0C8}
.flow-step.exec{background:rgba(31,95,209,.14);border-color:rgba(31,95,209,.35)}
.flow-step.exec .idx{background:var(--gradient-primary);color:#fff;border:0}
@media(max-width:820px){.bridge{grid-template-columns:1fr;gap:32px}}

/* modules */
.mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mod{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;transition:transform .2s,box-shadow .2s,border-color .2s}
.mod:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:rgba(31,95,209,.3)}
.mod .ic{width:42px;height:42px;border-radius:11px;background:var(--gradient-primary);display:grid;place-items:center;box-shadow:var(--shadow-glow);color:#fff;margin-bottom:14px}
.mod .ic svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:2}
.mod .hd{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mod h4{font-family:var(--display);font-size:1.1rem;font-weight:700;text-transform:none;letter-spacing:0}
.mod .st{font-family:var(--mono);font-size:.58rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:5px}
.mod .st.beta{background:var(--amber-wash);color:#8A5A08;border:1px solid #F3D19A}
.mod .st.soon{background:var(--paper-2);color:var(--slate);border:1px solid var(--line-2)}
.mod .tl{font-family:var(--body);color:var(--slate);font-size:.88rem;margin-top:9px;text-transform:none;letter-spacing:0}
@media(max-width:980px){.mod-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.mod-grid{grid-template-columns:1fr}}

/* amc */
.amc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.amc{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:16px;transition:.16s}
.amc:hover{box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.amc .code{font-size:.62rem;display:block;margin-bottom:6px}
.amc h4{font-size:.92rem;font-weight:700;line-height:1.2}
.amc p{font-size:.76rem;color:var(--slate);margin-top:5px}
.amc.mw{border-color:rgba(230,162,60,.4);background:linear-gradient(180deg,#fff,#FFFCF5)}
@media(max-width:980px){.amc-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.amc-grid{grid-template-columns:repeat(2,1fr)}}

/* network tiers */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tier{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.tier h4{font-size:1.05rem;font-weight:700;display:flex;align-items:center;gap:9px}
.tier p{color:var(--slate);font-size:.86rem;margin-top:8px}
.tier .brands{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tier .brands span{font-size:.74rem;color:var(--ink-2);background:var(--paper-2);border:1px solid var(--line);border-radius:6px;padding:4px 9px}
@media(max-width:820px){.tier-grid{grid-template-columns:1fr}}

/* industries */
.ind-row{display:flex;flex-wrap:wrap;gap:10px}
.ind{background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 18px;font-size:.88rem;color:var(--ink-2);font-weight:500;transition:.15s}
.ind:hover{border-color:var(--blue);color:var(--blue-strong);transform:translateY(-2px)}

/* how */
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.how{padding:24px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg)}
.how .n{font-family:var(--mono);font-size:.8rem;color:var(--blue-strong);font-weight:600}
.how h4{font-size:1.05rem;font-weight:700;margin-top:10px}
.how p{color:var(--slate);font-size:.86rem;margin-top:7px}
@media(max-width:900px){.how-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.how-grid{grid-template-columns:1fr}}

/* rfq band */
.rfq{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:40px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;position:relative;overflow:hidden}
.rfq::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 90% -20%,rgba(31,95,209,.25),transparent 60%);pointer-events:none}
.rfq h3{color:#fff;font-size:1.7rem;font-weight:800;position:relative}
.rfq p{color:#cbd8ea;margin-top:8px;max-width:520px;position:relative}
.rfq .acts{display:flex;gap:12px;flex-wrap:wrap;position:relative}

/* footer */
.foot{border-top:1px solid var(--line);padding:56px 0 34px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot .col h5{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-2);margin-bottom:14px}
.foot .col a{display:block;color:var(--slate);font-size:.88rem;padding:5px 0;transition:color .14s}
.foot .col a:hover{color:var(--blue-strong)}
.foot .about p{color:var(--slate);font-size:.88rem;margin-top:12px;max-width:320px}
.foot-logo{height:40px;width:auto}
/* align-items:center made the right-hand tagline float against the middle of
   a now-taller left column. Top-align the row and let each side keep its
   own rhythm. */
.foot-bottom{display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;align-items:flex-start;margin-top:40px;padding-top:22px;border-top:1px solid var(--line);color:var(--slate-2);font-size:.8rem}
/* THE IDENTITY SENTENCE, BY NAME NOT BY POSITION.
   This was `.foot-bottom > span:first-child`, which means "whatever happens to
   be first". The bottom row now holds four spans and the first one is the only
   one that wants a measure, so it says so. */
.foot-entity{flex:1 1 min(560px,100%);max-width:min(680px,100%)}
/* The copyright and the tagline are a trailing pair on a wide screen and two
   ordinary lines on a phone. The tagline was set in the monospace face, which
   made a brand line read like a system string; it is italic now. */
.foot-copy{white-space:nowrap}
.foot-tag{font-style:italic}
@media(max-width:700px){.foot-copy,.foot-tag{white-space:normal}}
@media(max-width:700px){.foot-bottom{flex-direction:column;gap:12px}}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* whatsapp fab */
.wa{position:fixed;right:22px;bottom:22px;z-index:70;width:56px;height:56px;border-radius:50%;background:#1FA855;box-shadow:0 10px 26px rgba(31,168,85,.4);display:grid;place-items:center;transition:transform .15s}
.wa:hover{transform:translateY(-3px) scale(1.04)}
/* THE FLOATING BUTTON COVERS THE END OF THE PAGE.
   .wa is 56px at a 22px inset — 78px of the bottom of every screen — and on a
   phone the footer's last row sat under it: the Udyam registration number was
   behind the WhatsApp button at the very bottom of the scroll, with nowhere
   left to scroll to reveal it. The page gives back the height the button
   occupies. Desktop has room to spare in the margin; a phone does not. */
@media(max-width:700px){.foot{padding-bottom:104px}}
.wa svg{width:28px;height:28px;fill:#fff}

/* ===== inner pages ===== */
.page-hero{padding:44px 0 30px}
.page-hero.sub{padding-bottom:22px}
.bc{display:flex;gap:8px;flex-wrap:wrap;font-size:.8rem;color:var(--slate-2);margin-bottom:22px}
.bc a:hover{color:var(--blue-strong)}.bc span{color:var(--line-2)}.bc .cur{color:var(--ink)}
.ph-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.code.big{font-size:.9rem}
.ph-top .par{color:var(--slate);font-size:.9rem}
.page-hero h1{font-family:var(--display);font-weight:900;font-size:clamp(2rem,4.4vw,3.2rem);letter-spacing:-.03em;line-height:1.03}
.page-hero h1+p:not(.lede){margin-top:14px}
.page-hero .lede{color:var(--slate);font-size:1.08rem;margin-top:16px;max-width:640px}
.ph-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:center}
.metachip{font-size:.8rem;color:var(--slate);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.metachip b{color:var(--ink);font-family:var(--mono)}
.page-hero .hero-cta{margin-top:24px}
.soft{background:rgba(255,255,255,.45);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.soft2{padding-top:40px}
/* subcategory grid on category page */
.subgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* Grouped category pages nest a .subgrid inside a .subgrid, with an <h3> group
   heading before it. Without these rules the heading takes column 1 and the
   nested grid takes column 2 — then splits that single column into three more,
   so each card ends up a ninth of the page wide and every title wraps. The
   heading and the nested grid both belong on their own full-width row. */
.subgrid > h3{grid-column:1/-1;margin:22px 0 2px}
.subgrid > h3:first-child{margin-top:0}
.subgrid > .subgrid{grid-column:1/-1}
.subcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;transition:transform .18s,box-shadow .2s,border-color .2s}
.subcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:rgba(31,95,209,.3)}
.subcard .sc-h{display:flex;align-items:center;justify-content:space-between}
.subcard .sc-h .ar{color:var(--blue-strong);font-weight:700}
.subcard h4{font-size:1.06rem;font-weight:700;margin:10px 0 6px}
.subcard p{color:var(--slate);font-size:.82rem;flex:1}
.subcard .cnt{font-size:.75rem;color:var(--slate-2);margin-top:12px}
.subcard .cnt b{color:var(--ink);font-family:var(--mono)}
@media(max-width:980px){.subgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.subgrid{grid-template-columns:1fr}}
/* spec table */
.spectable{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.specrow{display:grid;grid-template-columns:230px 1fr;gap:16px;padding:15px 20px;border-top:1px solid var(--line)}
.specrow:first-child{border-top:0}
.specrow .st{font-weight:600;font-size:.92rem;color:var(--ink)}
.specrow .sv{display:flex;flex-wrap:wrap;gap:6px}
.specrow .sv span{font-family:var(--mono);font-size:.7rem;color:var(--slate);background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:3px 8px}
.specrow .sv em{color:var(--slate-2)}
@media(max-width:600px){.specrow{grid-template-columns:1fr;gap:8px}}
.specrow.sd-row{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
@media(max-width:600px){.specrow.sd-row{grid-template-columns:minmax(0,1fr)}}
/* brand chips */
.brands{display:flex;flex-wrap:wrap;gap:7px}
.brands.wide{gap:8px}
.bchip{font-size:.78rem;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:7px;padding:5px 11px;transition:.14s;display:inline-block}
a.bchip:hover{border-color:var(--blue);color:var(--blue-strong);transform:translateY(-1px)}
.bchip.mw{border-color:var(--amber);background:var(--amber-wash);color:#8A5A08;font-weight:600}
/* related */
.relrow{display:flex;flex-wrap:wrap;gap:10px}
.relpill{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:.86rem;color:var(--ink-2);transition:.15s}
.relpill:hover{border-color:var(--blue);color:var(--blue-strong);transform:translateY(-2px)}
/* Product-family pills used to print the whole taxonomy path — "Electrification
   > Energy Distribution > MCCB" — so every pill repeated the same two ancestors
   and the useful word sat at the far right. The leaf now leads; the parent
   follows in muted small type as context, full path on hover via title. */
.relpill-ctx{display:block;font-size:.72rem;color:var(--slate-2);line-height:1.25;margin-top:1px}
/* brand page */
.brandmark{display:inline-flex;align-items:center;gap:11px;font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:-.02em;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 22px;box-shadow:var(--shadow-lg)}
.brandmark .bm-dot{width:12px;height:12px;border-radius:50%;background:var(--blue-strong)}
.brandmark.mw{border-color:var(--amber)}.brandmark.mw .bm-dot{background:var(--amber)}
.wu{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.wu-row{display:grid;grid-template-columns:1fr 1fr auto;gap:16px;align-items:center;padding:14px 20px;border-top:1px solid var(--line);transition:.14s}
.wu-row:first-child{border-top:0}
.wu-row:hover{background:var(--paper-2)}
.wu-cat{font-weight:600;font-size:.9rem}
.wu-sub{color:var(--slate);font-size:.86rem}
@media(max-width:600px){.wu-row{grid-template-columns:1fr auto;gap:6px}.wu-sub{grid-column:1/2}}
/* brands hub alpha */
.alpha{display:grid;grid-template-columns:60px 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--line)}
.alpha:first-child{border-top:0}
.alpha-l{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--blue-strong)}
@media(max-width:600px){.alpha{grid-template-columns:1fr;gap:10px}}

/* mecwerx cross-brand bar under stats */
.mwbar{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:15px 0;border-top:1px solid var(--line);font-size:.84rem;color:var(--slate)}
.mwbar b{color:var(--ink);font-weight:600}
.mwbar .sep{color:var(--line-2)}
.mwbar .mwlink{font-family:var(--mono);font-size:.76rem;font-weight:600;color:#8A5A08;display:inline-flex;align-items:center;gap:4px}
.mwbar .mwlink:hover{text-decoration:underline}
.mwbar .mwlink::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);display:inline-block}
@media(max-width:600px){.mwbar{font-size:.78rem;gap:8px;padding:14px 16px;text-align:center}.mwbar .sep{display:none}}

/* ===== brand product catalog ===== */
.pcat-hero{padding:40px 0 24px}
.pbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:20px}
.psearch{flex:1;min-width:260px;display:flex;align-items:center;gap:10px;border:1.5px solid var(--line-2);border-radius:12px;padding:11px 14px;background:#fff;transition:.15s}
.psearch:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(31,95,209,.12)}
.psearch input{border:0;outline:0;font-family:var(--mono);font-size:.9rem;width:100%;background:none;color:var(--ink)}
.psearch svg{color:var(--slate-2);flex:none}
.pcount{font-size:.82rem;color:var(--slate);font-family:var(--mono)}
.pcount b{color:var(--ink)}
.pfilters{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 4px}
.pfilters .pf-btn{font-size:.82rem;font-weight:500;padding:8px 15px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--slate);cursor:pointer;transition:.14s;white-space:nowrap}
.pfilters .pf-btn:hover{border-color:var(--blue);color:var(--blue-strong)}
.pfilters .pf-btn.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:transform .16s,box-shadow .18s,border-color .18s}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:rgba(31,95,209,.3)}
/* Product imagery — ONE shape everywhere.
   The 4:3 box was previously scoped to .pcard .imgwrap, so a card in the
   catalogue was constrained but the same image on a part page was not: it kept
   its natural height, and a tall connector photo pushed the whole page down.
   Supplier images arrive in every aspect ratio there is, so the container has to
   fix the shape and object-fit has to letterbox the image inside it. */
.imgwrap{aspect-ratio:4/3;background:#fff;display:grid;place-items:center;overflow:hidden}
.imgwrap img{width:100%;height:100%;object-fit:contain;padding:12px;box-sizing:border-box;display:block}
.pcard .imgwrap{aspect-ratio:4/3;background:#fff;border-bottom:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.pcard .imgwrap img{width:100%;height:100%;object-fit:contain;padding:12px}
.pcard .pb{padding:14px;display:flex;flex-direction:column;gap:7px;flex:1}
.pcard .psub{font-family:var(--mono);font-size:.58rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--slate);background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:2px 7px;align-self:flex-start}
.pcard h4{font-size:.9rem;font-weight:600;line-height:1.25;color:var(--ink)}
.pcard .pn{font-family:var(--mono);font-size:.68rem;color:var(--slate-2)}
.pcard .pbot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px}
.pcard .price{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--ink)}
.pcard .price small{font-weight:500;color:var(--slate-2);font-size:.7rem}
.pcard .av{font-family:var(--mono);font-size:.56rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:5px;border:1px solid}
.av.buy{color:var(--green);background:var(--green-wash);border-color:var(--green)}
.av.soon,.av.notify_me{color:#8A5A08;background:var(--amber-wash);border-color:#F3D19A}
.av.na{color:var(--slate);background:var(--paper-2);border-color:var(--line-2)}
.pcard .pf{padding:0 14px 14px;display:flex;gap:8px}
.pcard .pf a{flex:1;text-align:center;font-size:.78rem;font-weight:600;padding:8px;border-radius:8px;transition:.14s}
.pcard .pf .q{background:var(--gradient-primary);color:#fff}
.pcard .pf .q:hover{opacity:.92}
.pcard .pf .v{background:var(--paper-2);color:var(--ink);border:1px solid var(--line)}
.pcard .pf .v:hover{border-color:var(--blue);color:var(--blue-strong)}
.pmore{display:flex;justify-content:center;margin-top:30px}
.pempty{text-align:center;color:var(--slate);padding:40px}
.catbanner{display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between;background:linear-gradient(120deg,#fff,#F4F8FF);border:1px solid var(--line);border-radius:16px;padding:22px 26px;margin-top:8px}
.catbanner .cb-l{display:flex;align-items:center;gap:14px}
.catbanner .cb-badge{font-family:var(--display);font-weight:800;font-size:1.05rem;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 14px}
.catbanner b{color:var(--ink)}
@media(max-width:980px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.pgrid{grid-template-columns:1fr 1fr;gap:12px}.pcard h4{font-size:.82rem}}

/* source -> build -> execute -> own model band */
.stats .s .mv{font-family:var(--display);font-weight:800;font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:-.01em;color:var(--ink);line-height:1.05;position:relative}
.stats .s .l2{font-family:var(--body);font-size:.86rem;color:var(--slate);line-height:1.35;margin-top:4px}
.stats.model .strip{padding:34px 0}
.stats.model .s+.s::after{content:"";position:absolute;left:-1px;top:50%;width:16px;height:16px;transform:translateY(-50%);pointer-events:none}
@media(min-width:701px){
  .stats.model .strip{position:relative}
  .stats.model .s{position:relative}
  .stats.model .s+.s .mv::before{content:"\2192";position:absolute;left:-1.9em;top:0;color:var(--blue-strong);font-weight:600;opacity:.55;font-family:var(--body)}
}

/* v9 polish — equal heights, spacing, premium catalog */
.cat-grid{align-items:stretch}
.cat{height:100%}
.subgrid{align-items:stretch}.subcard{height:100%}
.pgrid{align-items:stretch}
.pcard{height:100%}
.pcard h4{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.3em}
.pcard .pb{gap:6px}
.pcard .imgwrap{background:linear-gradient(180deg,#fff,#fafbfd)}
/* stronger highlight for flagship / service categories */
.cat[data-mw="1"]{border-color:rgba(243,183,42,.4)}
.cat[data-mw="1"]:hover{border-color:var(--amber)}
.cat[data-svc="1"]{border-color:rgba(46,164,110,.35)}
/* premium catalog hero spacing */
.pcat-hero{padding-bottom:18px}
.pfilters{gap:8px}
.pcount{white-space:nowrap}
/* brand where-it-appears rows tidy */
.wu-row{gap:14px}
@media(max-width:600px){
  .pcat-hero{padding:28px 0 14px}
  .pbar{gap:10px}
  .pcard h4{font-size:.82rem}
  .page-hero h1{font-size:clamp(1.7rem,7vw,2.2rem)}
  .catbanner{padding:18px}
  .catbanner .btn{width:100%;text-align:center}
}

/* crawlable pagination */
.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;margin:26px 0 4px}
.pager .pg{min-width:38px;text-align:center;padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink-2);font-size:.85rem;font-family:var(--mono);transition:.14s}
.pager a.pg:hover{border-color:var(--blue);color:var(--blue-strong)}
.pager .pg.cur{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600}
.pager .pg.gap{border:0;background:none;min-width:18px;padding:8px 2px;color:var(--slate-2)}
@media(max-width:600px){.pager .pg{padding:7px 10px;min-width:34px;font-size:.78rem}}

/* ProcureAI form */
.pf-form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow-lg)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fgrid .span2{grid-column:1/-1}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld label{font-size:.82rem;font-weight:600;color:var(--ink)}
.fld input,.fld select,.fld textarea{border:1.5px solid var(--line-2);border-radius:10px;padding:10px 12px;font-family:var(--body);font-size:.9rem;background:#fff;color:var(--ink);width:100%}
.fld textarea{font-family:var(--mono);font-size:.82rem;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(31,95,209,.12)}
/* quantity + unit, side by side. The unit takes the wider half because a unit
   list is unreadable truncated, and a quantity is rarely more than four digits. */
/* Admin data tables: scroll the table, never the page. */
.tscroll-admin{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tscroll-admin>table{min-width:1180px}
.qtyrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:8px}
.qtyrow input,.qtyrow select{width:100%}
.fld input[type=file]{padding:9px;background:var(--paper-2);cursor:pointer}
.fld .hint{font-size:.75rem;color:var(--slate-2)}
.pf-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.pf-actions .hint{font-size:.76rem;color:var(--slate-2)}
@media(max-width:700px){.fgrid{grid-template-columns:1fr}.pf-form{padding:18px}.pf-actions .btn{width:100%;text-align:center}}

/* extracted specification chips on RFQ result */
.speclist{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.speclist span{font-family:var(--mono);font-size:.66rem;color:var(--slate);background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:2px 7px}
.speclist span b{color:var(--ink)}

/* module status badges */
.mod .st.live{background:var(--green-wash);color:var(--green);border-color:var(--green)}
.mod .st.soon{background:var(--paper-2);color:var(--slate-2)}
a.mod{text-decoration:none;color:inherit;display:block;transition:.16s}
a.mod.live:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow-lg)}

/* supplier category+subcategory picker */
.catpick{display:flex;flex-direction:column;gap:10px;margin-top:8px;max-height:420px;overflow-y:auto;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--paper-2)}
.catgrp{border-bottom:1px solid var(--line);padding-bottom:9px}
.catgrp:last-child{border-bottom:0;padding-bottom:0}
.catrow{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:400;cursor:pointer}
.catrow input{width:auto}
.catrow .ccode{font-family:var(--mono);font-size:.66rem;color:var(--slate-2);margin-left:auto}
.subrow{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0 0 24px}
.subchip{display:flex;align-items:center;gap:5px;font-size:.76rem;font-weight:400;background:#fff;border:1px solid var(--line);border-radius:20px;padding:3px 11px 3px 8px;cursor:pointer;color:var(--slate)}
.subchip input{width:auto;margin:0}
.subchip:has(input:checked){border-color:var(--blue);color:var(--ink);background:var(--blue-wash,#EAF2FE)}

/* ============ MOTION — engineered restraint ============ */
/* reveal */
.m-hide{opacity:0;transform:translateY(14px)}
.m-in{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion: reduce){.m-hide{opacity:1;transform:none}}

/* hero entrance — pure CSS, runs once on load */
.hero h1,.page-hero h1{animation:m-rise .6s cubic-bezier(.22,.61,.36,1) both}
.hero .lede,.page-hero .lede{animation:m-rise .6s .08s cubic-bezier(.22,.61,.36,1) both}
.hero .hero-cta,.page-hero .hero-cta,.page-hero .ph-meta{animation:m-rise .6s .16s cubic-bezier(.22,.61,.36,1) both}
@keyframes m-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.hero h1,.page-hero h1,.hero .lede,.page-hero .lede,.hero .hero-cta,.page-hero .hero-cta,.page-hero .ph-meta{animation:none}}

/* hover physics — cards lift with a deepening shadow */
.subcard,.mod,.catcard,.pcard,.amc,.brandcard,.kpi{transition:transform .22s cubic-bezier(.22,.61,.36,1),box-shadow .22s cubic-bezier(.22,.61,.36,1),border-color .22s}
.subcard:hover,.catcard:hover,.pcard:hover,.amc:hover,.brandcard:hover{transform:translateY(-3px);box-shadow:0 12px 28px -12px rgba(10,27,61,.18);border-color:var(--blue)}

/* buttons — press feedback + subtle spring */
.btn{transition:transform .16s cubic-bezier(.22,.61,.36,1),box-shadow .16s,background .16s,border-color .16s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-cta:hover{box-shadow:0 8px 20px -8px rgba(30,94,255,.45)}

/* header gains a shadow once scrolled */
.hdr{transition:box-shadow .25s ease}
.hdr.m-scrolled{box-shadow:0 2px 18px -6px rgba(10,27,61,.14)}

/* nav links — underline slides in */
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:2px;background:var(--blue);transition:right .22s cubic-bezier(.22,.61,.36,1)}
.nav a:hover::after{right:0}

/* speclist chips + badges settle in */
.speclist span{transition:border-color .18s,color .18s}
.speclist span:hover{border-color:var(--blue);color:var(--ink)}

/* search results dropdown */
#results,.results{transition:opacity .18s ease,transform .18s ease}

/* focus visibility — premium means accessible too */
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* stat strip under hero */
.statstrip{background:var(--ink,#0A1B3D);color:#fff;padding:18px 0}
.sswrap{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center}
.ss b{display:block;font-family:var(--display);font-size:1.65rem;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ss span{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;opacity:.72}
@media(max-width:700px){.sswrap{grid-template-columns:repeat(2,1fr);row-gap:16px}.ss b{font-size:1.3rem}}

/* open RFQ board */
/* CARDS ARE ONE SIZE — AND THIS IS THE SECOND ATTEMPT, SO IT IS WORTH SAYING
   WHY THE FIRST ONE FAILED.
   The original problem was real: a card was as tall as whatever the extractor
   pulled out of a tender, so one forty-specification requirement pushed every
   other one below the fold. The fix applied then was `align-items:start`, which
   stops the grid stretching a card to the tallest in its row — and that is the
   opposite of making them equal. It made every card take its OWN natural
   height, so the board rendered at four different heights (163, 207, 233 and
   242px measured), with two of four rows internally ragged.

   Equal cards need the grid to stretch (its default) AND every variable region
   to be RESERVED, so a row is uniform and every row matches every other row.
   Four reservations do that, and removing any one brings the ragged board back:

     1. the title always occupies three lines, clamped, whether it needs them
     2. the make/quantity block always occupies two lines
     3. the disclosure row is reserved whether or not the requirement has one
     4. the quote action is pinned to the bottom with margin-top:auto

   Depth still opens on click, so a 72-specification requirement is no taller
   than a one-line one until a supplier asks for it. */
.boardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:8px}
.bcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;
  transition:box-shadow .2s,border-color .2s;display:flex;flex-direction:column}
/* The title clamps in CSS rather than being cut in PHP, so the full part number
   stays selectable and copyable — which is the whole point of a part number.
   The height is RESERVED, not merely capped: a clamp alone lets a one-line
   title sit in a short card next to a three-line one. */
.bc-title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  line-height:1.35;height:calc(3 * 1.35em);margin:0 0 6px}
/* Make: one line, reserved on every card — but only when at least one
   requirement on the page names a make. See the grid classes in rfq-board.php. */
.bc-make-row{margin:0 0 2px}
.bg-makes .bc-make-row{min-height:calc(1.45 * .85rem)}
.bc-make-row .bc-make{margin:0;line-height:1.45}
.bc-qty{line-height:1.45}
.bc-qty-tbc{color:var(--slate-2)}
/* The disclosure row is rare and tall. Reserving it keeps the cards that do NOT
   have one the same height as the cards that do. */
.bc-discl{min-height:0}
.bg-discl .bc-discl{min-height:26px}
/* The fold. A requirement with no extra detail renders the SAME box as one
   with seventy-two specification lines — same border, same padding, same single
   line of text — so the two cases match by construction. Reserving a height in
   pixels instead left the cards 1px apart, because a box containing a line of
   text and an empty box do not round identically. */
/* MIRRORS .bc-more>summary EXACTLY, one level down.
   The outer box must stay at the inherited 16px, as <details> does, and the
   TEXT carries the .8rem — putting .8rem on the outer box instead shrank its
   line box and left the two cards 2px apart. The marker slot is reserved but
   not drawn, because .bc-more>summary::before is an inline-block and an
   inline-block raises the line box it sits in. */
.bc-nofold>span{display:block;font-size:.8rem;font-weight:600;color:var(--slate-2);
  padding:2px 0;opacity:.75}
.bc-nofold>span::before{content:"\25B8";visibility:hidden;margin-right:6px;display:inline-block}
.bc-more{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
/* The requirement as a PDF. On EVERY card, never conditional: this board's
   cards are one height and a row that appears on some of them makes the grid
   ragged — which is the fault assert_board_card.php exists for. */
.bc-doc{margin-top:9px}
.bc-doc>a{display:inline-block;font-size:.79rem;font-weight:700;color:var(--blue,#1F49D8);
  text-decoration:none;border:1px solid var(--line);border-radius:7px;padding:5px 10px;background:#fff}
.bc-doc>a:hover{border-color:var(--blue,#1F49D8);background:#F5F8FF}
.bc-more>summary{cursor:pointer;font-size:.8rem;font-weight:600;color:var(--slate);list-style:none;padding:2px 0}
.bc-more>summary::-webkit-details-marker{display:none}
.bc-more>summary::before{content:"\25B8";color:var(--slate-2);margin-right:6px;display:inline-block}
.bc-more[open]>summary::before{content:"\25BE"}
.bc-more>summary:hover{color:var(--blue-strong)}
.bc-morein{padding-top:6px}
.bc-quote{margin-top:auto}
.bcard:hover{box-shadow:0 10px 26px -14px rgba(10,27,61,.16);border-color:var(--blue)}
.bc-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.bc-ref{font-family:var(--mono);font-size:.68rem;color:var(--slate-2);letter-spacing:.03em}
.bc-cat{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;background:var(--paper-2);color:var(--slate);border:1px solid var(--line);border-radius:20px;padding:2px 9px}
.bcard h3{font-size:1rem;margin:0 0 4px;font-family:var(--mono);word-break:break-word}
.bc-desc{font-size:.85rem;color:var(--slate);margin:0 0 6px}
.bc-make,.bc-qty{font-size:.85rem;color:var(--slate);margin:2px 0}
.bc-alt{font-size:.76rem;color:var(--slate-2);margin:8px 0 0}
.bc-quoted{margin-top:12px;padding:9px 12px;background:#E7F6EE;border:1px solid #8FD0AE;border-radius:9px;font-size:.82rem;color:#0B5C36}
.bc-quote{margin-top:12px}
.bc-quote summary{cursor:pointer;font-weight:700;color:var(--blue-strong);font-size:.9rem;padding:6px 0}
.bqform{display:flex;flex-direction:column;gap:9px;margin-top:8px}
.bqform label{display:flex;flex-direction:column;gap:3px;font-size:.76rem;font-weight:600;color:var(--slate)}
.bqform input{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:.85rem;font-weight:400}
.bqrow{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.bqnote{font-size:.7rem;color:var(--slate-2);font-weight:400;margin-top:2px}
@media(max-width:560px){.bqrow{grid-template-columns:1fr}}

/* multi-part RFQ cart */
.rfq-add{cursor:pointer;border:1px solid var(--blue,#1F5FD1);background:#fff;color:var(--blue,#1F5FD1);border-radius:8px;padding:7px 12px;font-size:.82rem;font-weight:600;transition:all .15s}
.rfq-add:hover{background:var(--blue,#1F5FD1);color:#fff}
.rfq-add.added{background:#0B804B;border-color:#0B804B;color:#fff}
#nxRfqBar{position:fixed;bottom:0;left:0;right:0;z-index:120;background:#fff;border-top:2px solid var(--blue,#1F5FD1);box-shadow:0 -6px 24px -8px rgba(10,27,61,.22);padding:12px 18px;max-height:44vh;overflow-y:auto}
.nxrfq-head{display:flex;align-items:center;gap:10px;font-size:.9rem;margin-bottom:8px}
.nxrfq-clear{margin-left:auto;background:none;border:none;color:var(--slate);font-size:.8rem;text-decoration:underline;cursor:pointer}
.nxrfq-list{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.nxrfq-row{display:flex;align-items:center;gap:8px;font-size:.82rem}
.nxrfq-qty{width:62px;padding:5px 7px;border:1px solid var(--line);border-radius:6px;font-size:.8rem}
.nxrfq-label{flex:1;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nxrfq-x{background:none;border:none;color:#B4231B;font-size:1.1rem;cursor:pointer;line-height:1;padding:0 4px}
.nxrfq-actions{display:flex;justify-content:flex-end}
@media(max-width:560px){.nxrfq-label{font-size:.76rem}}
/* Why Infrecx — homepage trust section */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.why-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;height:100%}
.why-card .why-n{font-family:var(--mono);font-size:.7rem;font-weight:700;color:#1F5FD1;letter-spacing:.08em;margin-bottom:10px}
.why-card h4{margin:0 0 8px;font-size:1rem;line-height:1.35;color:var(--ink)}
.why-card p{margin:0;font-size:.88rem;line-height:1.55;color:var(--slate)}
.why-card-cta{background:linear-gradient(160deg,#F4F8FF,#EAF2FE);border-color:#C9DAF8}
.why-card-cta .btn{align-self:flex-start}
@media(max-width:980px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.why-grid{grid-template-columns:1fr}}
/* Make in India marker on the manufacturers listing */
.bchip.is-india{position:relative;border-color:#8FD0AE}
.bchip .in-dot{display:inline-block;margin-left:6px;font-family:var(--mono);font-size:.58rem;font-weight:700;
  letter-spacing:.06em;color:#0B5C36;background:#E7F6EE;border:1px solid #8FD0AE;border-radius:4px;padding:0 4px;vertical-align:middle}
.bfilter{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;color:var(--slate);cursor:pointer;
  border:1.5px solid var(--line-2);border-radius:9px;padding:8px 13px;background:#fff;user-select:none}
.bfilter input{width:auto;margin:0}
.bfilter.on{border-color:#8FD0AE;background:#E7F6EE;color:#0B5C36;font-weight:600}
/* Procurement workflow animation */
.nxflow{margin-top:22px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.nxflow-svg{width:100%;min-width:760px;height:auto;display:block}
.nxflow-stages text{font-family:inherit;font-size:15px;font-weight:600;fill:var(--ink);text-anchor:middle}
.nxflow-stages text.sub{font-size:12.5px;font-weight:400;fill:var(--slate)}
.nxflow-stages circle{fill:#fff;stroke:#1F5FD1;stroke-width:3}
.nxflow-stages .nxs circle{animation:nxPop 6s ease-in-out infinite;animation-delay:calc(var(--i)*.55s);transform-box:fill-box;transform-origin:center}
.nxflow-stages .nxs-done circle{stroke:#0B7A4F}
.nxflow-pulse{transform-box:fill-box;transform-origin:left center;animation:nxSweep 6s linear infinite}
@keyframes nxSweep{0%{transform:scaleX(0);opacity:0}6%{opacity:1}92%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes nxPop{0%,8%{r:15;fill:#fff}14%{r:19;fill:#EAF2FE}22%,100%{r:15;fill:#fff}}
@media(max-width:640px){.nxflow-stages text{font-size:17px}.nxflow-stages text.sub{font-size:14px}}
/* Respect users who prefer no motion */
@media(prefers-reduced-motion:reduce){
  .nxflow-pulse{animation:none;transform:scaleX(1)}
  .nxflow-stages .nxs circle{animation:none}
}
/* Legal & trust document pages */
.legal-eff{font-size:.8rem;color:var(--slate-2);margin-top:10px}
.legal-doc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:34px 38px;max-width:820px}
.legal-doc h2{font-size:1.08rem;margin:30px 0 10px;color:var(--ink);line-height:1.35}
.legal-doc h2:first-child{margin-top:0}
.legal-doc p{font-size:.93rem;line-height:1.68;color:var(--slate);margin:0 0 12px}
.legal-doc ul,.legal-doc ol{margin:0 0 14px;padding-left:20px}
.legal-doc li{font-size:.93rem;line-height:1.62;color:var(--slate);margin-bottom:7px}
.legal-doc b{color:var(--ink)}
.legal-doc a{color:#1F5FD1}
.legal-foot{max-width:820px;margin-top:22px;font-size:.85rem;color:var(--slate)}
.legal-nav{margin-top:8px;font-size:.82rem;line-height:2}
.legal-nav a{color:#1F5FD1;text-decoration:none}
.legal-nav a:hover{text-decoration:underline}
.nda-steps li{margin-bottom:10px}
.nda-form{display:flex;flex-direction:column;gap:14px;max-width:640px;margin-top:6px}
.nda-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.nda-form label{display:flex;flex-direction:column;gap:5px;font-size:.85rem;color:var(--slate);font-weight:500}
.nda-form input[type=text],.nda-form input:not([type=checkbox]){border:1.5px solid var(--line-2);border-radius:9px;padding:10px 13px;font-size:.92rem;font-family:inherit}
.nda-form input:focus{outline:none;border-color:#1F5FD1}
.nda-check{flex-direction:row!important;align-items:center;gap:8px}
.nda-check input{width:auto}
.nda-ok{background:#E6F6EE;border:1px solid #A0EAC9;color:#0B5C36;border-radius:10px;padding:14px 18px;font-size:.9rem}
.nda-err{background:#FDECEA;border:1px solid #F2B2A8;color:#8A1C0A;border-radius:10px;padding:12px 16px;font-size:.88rem;margin-bottom:12px}
.legal-doc .muted{color:var(--slate-2);font-weight:400}
@media(max-width:640px){.legal-doc{padding:24px 20px}.nda-row{grid-template-columns:1fr}}
/* THE LEGAL ROW SPANS THE WHOLE FOOTER.
   .foot-legal is a child of .foot-grid, a four-column grid — so it landed in
   the first 1.4fr column and wrapped ten links into three cramped lines while
   three-quarters of the footer sat empty beside it. It is a row, not a column:
   span every track, and the links lay out across the full width on one line.
   Spread with space-between so they reach both edges rather than bunching at
   the left of a container they now own. */
.foot-legal{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:10px 18px;padding:18px 0 4px;border-top:1px solid var(--line);margin-top:20px}
/* Below the two-column breakpoint there is not enough width to justify: even
   spacing beats a line with two links pinned to opposite edges. */
@media(max-width:820px){.foot-legal{justify-content:flex-start;gap:8px 20px;margin-top:12px}}
.foot-legal a{font-size:.78rem;color:#163F8F;text-decoration:none}
.foot-legal a:hover{color:#163F8F;text-decoration:underline}
/* How it works */
.hiw-switch{display:flex;gap:10px;flex-wrap:wrap}
.hiw-tab{display:inline-block;border:1.5px solid var(--line-2);border-radius:10px;padding:9px 18px;font-size:.9rem;
  font-weight:600;color:var(--ink);text-decoration:none;background:#fff}
.hiw-tab:hover{border-color:#1F5FD1;color:#1F5FD1}
.hiw-alt{background:var(--paper-2)}
.hiw-list{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.hiw-list>li{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 26px}
.hiw-list h3{margin:0 0 8px;font-size:1.02rem;color:var(--ink)}
.hiw-list p{margin:0 0 10px;font-size:.92rem;line-height:1.62;color:var(--slate)}
.hiw-list p:last-child{margin-bottom:0}
.hiw-list ul{margin:0 0 10px;padding-left:20px}
.hiw-list li li{font-size:.92rem;line-height:1.6;color:var(--slate);margin-bottom:6px}
.hiw-list b{color:var(--ink)}
.hiw-note{background:#F4F8FF;border-left:3px solid #1F5FD1;border-radius:0 8px 8px 0;padding:10px 14px!important;
  font-size:.88rem!important;color:var(--slate)}
.hiw-cta{margin-top:22px;background:linear-gradient(160deg,#F4F8FF,#EAF2FE);border:1px solid #C9DAF8;
  border-radius:var(--r-lg);padding:24px 26px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.hiw-cta h3{margin:0 0 5px;font-size:1.05rem}
.hiw-cta p{margin:0;font-size:.9rem;color:var(--slate)}
.hiw-cta .acts{display:flex;gap:10px;flex-wrap:wrap}
.hiw-faq{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.hiw-q{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px}
.hiw-q h4{margin:0 0 7px;font-size:.96rem;color:var(--ink)}
.hiw-q p{margin:0;font-size:.9rem;line-height:1.6;color:var(--slate)}
@media(max-width:820px){.hiw-faq{grid-template-columns:1fr}}
/* Category conversion block */
.catconv{padding:52px 0;background:var(--paper-2)}
.cc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.cc-col{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;display:flex;flex-direction:column}
.cc-col h3{margin:0 0 12px;font-size:1rem;color:var(--ink)}
.cc-sub{font-size:.84rem;line-height:1.55;color:var(--slate-2);margin:0 0 10px}
.cc-pain{margin:0;padding-left:18px}
.cc-pain li{font-size:.9rem;line-height:1.55;color:var(--slate);margin-bottom:9px}
.cc-sample{background:#F4F8FF;border:1px solid #C9DAF8;border-radius:9px;padding:12px 14px;font-size:.8rem;
  line-height:1.6;color:#163F8F;word-break:break-word}
.cc-stats{display:flex;flex-direction:column;gap:12px}
.cc-stats div{display:flex;flex-direction:column}
.cc-stats b{font-size:1.5rem;line-height:1.1;color:#1F5FD1}
.cc-stats span{font-size:.82rem;color:var(--slate);margin-top:2px}
.cc-faq{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:18px}
.cc-q{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 22px}
.cc-q h4{margin:0 0 6px;font-size:.94rem;color:var(--ink)}
.cc-q p{margin:0;font-size:.89rem;line-height:1.6;color:var(--slate)}
.cc-cta{margin-top:18px;background:linear-gradient(160deg,#F4F8FF,#EAF2FE);border:1px solid #C9DAF8;
  border-radius:var(--r-lg);padding:22px 26px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.cc-cta h3{margin:0 0 4px;font-size:1.02rem}
.cc-cta p{margin:0;font-size:.89rem;color:var(--slate)}
.cc-cta .acts{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:980px){.cc-grid{grid-template-columns:1fr}.cc-faq{grid-template-columns:1fr}}
/* Help centre */
.kb-jump{display:flex;gap:10px;flex-wrap:wrap}
.kb-grid{display:grid;gap:10px;max-width:900px}
.kb-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.kb-item summary{cursor:pointer;padding:16px 20px;font-size:.96rem;font-weight:600;color:var(--ink);list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.kb-item summary::-webkit-details-marker{display:none}
.kb-item summary::after{content:'+';font-size:1.2rem;font-weight:400;color:#1F5FD1;flex:0 0 auto}
.kb-item[open] summary::after{content:'\2212'}
.kb-item[open] summary{border-bottom:1px solid var(--line)}
.kb-item ul{margin:0;padding:14px 20px 18px 38px}
.kb-item li{font-size:.9rem;line-height:1.62;color:var(--slate);margin-bottom:8px}
.kb-item li:last-child{margin-bottom:0}
.kb-item b{color:var(--ink)}
.kb-item a{color:#1F5FD1}
/* Notification centre */
.nx-notes{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:18px}
.nn-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.nn-head h2{margin:0;font-size:1.02rem;display:flex;align-items:center;gap:8px}
.nn-badge{background:#1F5FD1;color:#fff;font-size:.7rem;font-weight:700;border-radius:11px;padding:1px 8px}
.nn-clear{background:none;border:0;color:#1F5FD1;font-size:.8rem;cursor:pointer;font-family:inherit;font-weight:600}
.nn-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.nn-list li{border-top:1px solid var(--line)}
.nn-list li:first-child{border-top:0}
.nn-list a{display:block;padding:11px 0;text-decoration:none}
.nn-list li.unread{position:relative;padding-left:14px}
.nn-list li.unread::before{content:'';position:absolute;left:0;top:17px;width:7px;height:7px;border-radius:50%;background:#1F5FD1}
.nn-kind{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--slate-2);font-weight:700}
.nn-title{display:block;font-size:.92rem;color:var(--ink);font-weight:600;margin-top:2px}
.nn-body{display:block;font-size:.85rem;color:var(--slate);margin-top:2px}
.nn-when{display:block;font-size:.72rem;color:var(--slate-2);margin-top:3px}
/* Missing-quantity prompt */
.qty-prompt{display:flex;gap:14px;align-items:flex-start;background:#FFFDF7;border:1px solid #F2C960;
  border-radius:12px;padding:16px 20px;margin-bottom:16px}
.qty-prompt .qp-ico{flex:0 0 30px;height:30px;border-radius:50%;background:#F2C960;color:#5C3D06;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem}
.qty-prompt b{display:block;color:#7A4706;font-size:.95rem;margin-bottom:3px}
.qty-prompt p{margin:0;font-size:.88rem;line-height:1.55;color:#7A4706}
.qty-need{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.qty-need label{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:#7A4706;font-weight:700}
.qty-need input{border:1.5px solid #F2C960;background:#FFFDF7;border-radius:8px;padding:6px 10px;
  font-size:.85rem;font-family:inherit;width:92px}
.qty-need input:focus{outline:none;border-color:#B9770B}
.qty-need .qty-uom{width:64px}
/* Footer: parent company + statutory identifiers, legible not faint */
.foot-parent{color:#163F8F;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(28,69,135,.35)}
.foot-parent:hover{border-bottom-color:#163F8F}
/* Four registration numbers in one bordered box wrapped mid-number on a phone
   and read as a wall. Each is now its own chip: they align on a row, wrap
   whole, and a buyer scanning for the GeM ID finds it as a unit. */
/* THE REGISTRATION STRIP, ACROSS THE WHOLE FOOTER.
   These four chips lived inside the copyright span, which .foot-bottom caps at
   680px — so they wrapped onto two lines in the left half while the right half
   was empty. They are now a sibling of that span and take a row of their own:
   flex:1 1 100% drops them below the credit line, and four equal columns give
   each ID the same share of the width instead of leaving three stranded pills
   and a gap. Equal columns rather than space-between, because four pills spread
   edge-to-edge across 1264px read as four unrelated things. */
/* align-self:stretch, because .foot-bottom sets align-items:flex-start — and
   below its 700px breakpoint it becomes a COLUMN flex container, where
   align-items governs width. Without this the strip shrank to its content on a
   phone and sat narrower than the footer it belongs to. */
/* order:2 puts the strip LAST whatever its position in the markup. It sits
   between the copyright and the tagline in the DOM, and a full-width flex item
   there breaks the line — which pushed the tagline onto a third row on the left
   instead of leaving it opposite the copyright. Ordering in CSS avoids
   rewriting 653 static files a second time to move one span. */
.foot-legalid{order:2;flex:1 1 100%;align-self:stretch;display:grid;grid-template-columns:repeat(4,1fr);
  gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.foot-legalid > span{text-align:center}
/* Two up on a tablet, one per line on a phone: a 4-across grid at 390px gives
   each chip 80px, and these are 24-character identifiers. */
@media(max-width:900px){.foot-legalid{grid-template-columns:repeat(2,1fr)}}
/* ONE PER ROW, HUGGING ITS TEXT — NOT FOUR STRETCHED BARS.
   At one column the chips inherited justify:stretch from the grid and each
   became a full-width pill with its identifier floating in the middle, which on
   a phone reads as four buttons rather than four registration numbers.
   justify-items:start sizes each to its content and lines them up on the left,
   so they scan as a list and the footer loses a third of its height. */
@media(max-width:520px){.foot-legalid{grid-template-columns:1fr;justify-items:start;gap:6px}
  .foot-legalid > span{text-align:left}}
.foot-legalid > span{font-size:.7rem;color:#3A4A5F;background:var(--paper-2);
  border:1px solid var(--line);border-radius:6px;padding:3px 9px;white-space:nowrap}
@media(max-width:600px){.foot-legalid > span{font-size:.66rem;padding:3px 7px}}
/* RFQ board: parts matching the supplier's registered categories */
.bcard{position:relative}
.bcard-mine{border-color:#8FD0AE;box-shadow:0 0 0 1px #8FD0AE inset}
.bc-mine{position:absolute;top:-9px;right:14px;background:#E7F6EE;border:1px solid #8FD0AE;color:#0B5C36;
  font-size:.64rem;font-weight:700;letter-spacing:.03em;padding:2px 9px;border-radius:10px;text-transform:uppercase}
/* Supplier quote: committed value */
.nx-total{background:#E7F6EE;border:1px solid #8FD0AE;border-radius:9px;padding:10px 14px;font-size:.9rem;color:#0B5C36}
.nx-total b{font-size:1.05rem}
.nx-total .hint{color:#0B5C36;opacity:.75}
.nx-total-l output{display:block;font-weight:700;color:#0B5C36;padding:8px 0}
/* Requirement list (Add to RFQ basket) */
.ml-ok{background:#E6F6EE;border:1px solid #A0EAC9;color:#0B5C36;border-radius:10px;padding:11px 15px;margin-bottom:14px;font-size:.88rem}
.ml-warn{background:#FFFDF7;border:1px solid #F2C960;color:#7A4706;border-radius:10px;padding:13px 17px;margin-bottom:16px;font-size:.9rem}
.ml-empty{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:34px;text-align:center;max-width:640px}
.ml-empty h2{margin:0 0 8px;font-size:1.1rem}
.ml-empty p{margin:0;color:var(--slate);font-size:.92rem}
.ml-list{display:flex;flex-direction:column;gap:10px}
.ml-row{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 20px;
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.ml-part b{font-size:.98rem;color:var(--ink)}
.ml-brand{display:inline-block;margin-left:8px;font-size:.76rem;background:var(--paper-2);border:1px solid var(--line);
  border-radius:5px;padding:1px 8px;color:var(--slate)}
.ml-desc{display:block;font-size:.85rem;color:var(--slate);margin-top:3px}
.ml-qty label{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--slate-2);
  font-weight:700;margin-bottom:4px}
.ml-qty input{border:1.5px solid var(--line-2);border-radius:8px;padding:8px 11px;font-size:.9rem;
  font-family:inherit;width:120px}
.ml-qty input.ml-need{border-color:#F2C960;background:#FFFDF7}
.ml-actions{display:flex;gap:14px;align-items:center;margin-top:16px;flex-wrap:wrap}
.ml-count{font-size:.85rem;color:var(--slate-2)}
.ml-send{margin-top:22px;background:linear-gradient(160deg,#F4F8FF,#EAF2FE);border:1px solid #C9DAF8;
  border-radius:var(--r-lg);padding:24px 26px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.ml-send h2{margin:0 0 5px;font-size:1.05rem}
.ml-send p{margin:0;font-size:.9rem;color:var(--slate)}
.ml-send .acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ml-remove-note{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px}
.ml-x{background:#fff;border:1px solid var(--line);border-radius:6px;padding:3px 9px;font-size:.72rem;
  color:var(--slate);cursor:pointer;font-family:inherit}
.ml-x:hover{border-color:#F2B2A8;color:#8A1C0A}
/* Add-to-RFQ button + floating counter */
.nx-add{display:inline-flex;align-items:center;gap:7px;background:var(--gradient-primary,#1F5FD1);color:#fff;
  border:0;border-radius:10px;padding:11px 18px;font-size:.92rem;font-weight:600;cursor:pointer;font-family:inherit}
.nx-add[disabled]{opacity:.7;cursor:default}
.nx-addmsg{display:block;margin-top:7px;font-size:.82rem;color:#0B5C36}
.nx-basket-fab{position:fixed;right:18px;bottom:88px;z-index:60;background:#0B1F3A;color:#fff;border-radius:30px;
  padding:11px 18px;font-size:.85rem;font-weight:600;text-decoration:none;box-shadow:0 8px 24px rgba(15,27,45,.28);
  display:none;align-items:center;gap:8px}
.nx-basket-fab b{background:#1F5FD1;border-radius:12px;padding:1px 8px;font-size:.76rem}

/* ── Mobile navigation ──────────────────────────────────────────────
   At <=920px the desktop nav and header CTA are hidden. Without this the
   hamburger had nothing to open, leaving no way to reach any nav link or
   sign in on a phone. */
@media(max-width:920px){
  .hdr{position:relative}
  .nav.nav-open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:100%;
    background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    box-shadow:0 14px 34px rgba(15,27,45,.14);padding:6px 0;z-index:80;max-height:78vh;overflow-y:auto
  }
  .nav.nav-open > a,
  .nav.nav-open .drop > button{
    display:block;width:100%;text-align:left;padding:14px 22px;font-size:1rem;
    border-bottom:1px solid var(--paper-2);background:none
  }
  .nav.nav-open > a:last-child{border-bottom:0}
  .nav.nav-open .drop{width:100%;position:static}
  .nav.nav-open .drop-menu{
    /* position:static alone is not enough. The desktop rule centres the panel
       with transform:translateX(-50%); left unreset, that still shifts the
       submenu half its own width off the left edge of a phone screen, which is
       what cut the labels in half. Reset transform and the opacity/visibility
       pair the desktop rule also sets. */
    position:static;display:none;box-shadow:none;border:0;border-radius:0;
    background:var(--paper-2);padding:0;min-width:0;width:100%;
    transform:none;opacity:1;visibility:visible;pointer-events:auto
  }
  .nav.nav-open .drop.open .drop-menu{display:block;transform:none}
  .nav.nav-open .drop-menu a{display:block;padding:12px 30px;border-bottom:1px solid rgba(15,27,45,.06)}
  .hdr .cta.cta-mobile{display:inline-flex;margin:10px 22px 14px;justify-content:center}
  .nav.nav-open .nav-acct{display:block;color:var(--blue-strong);font-weight:600}
  .menu-btn[aria-expanded="true"]{background:var(--paper-2);border-color:var(--blue,#1F5FD1)}
}

/* The mobile menu clones the header CTA into the nav panel. That clone must be
   hidden on desktop, where the nav is already visible — otherwise the sign-in
   button appears twice. */
.cta-mobile{display:none!important}
@media(max-width:920px){ .nav.nav-open .cta-mobile{display:inline-flex!important} }
/* Industries + Execution pages */
.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.ind-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;display:flex;flex-direction:column}
.ind-card h2{margin:0 0 8px;font-size:1rem;color:var(--ink)}
.ind-what{margin:0 0 10px;font-size:.88rem;line-height:1.58;color:var(--slate)}
.ind-pain{margin:0 0 12px;font-size:.84rem;line-height:1.55;color:#7A4706;background:#FFFDF7;border-left:3px solid #F2C960;border-radius:0 7px 7px 0;padding:8px 11px}
.ind-pain b{color:#7A4706}
.ind-cats{margin-top:auto;display:flex;gap:5px;flex-wrap:wrap}
.ind-cats span{font-size:.66rem;background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:2px 7px;color:var(--slate-2)}
.exe-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.exe-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 26px;display:flex;flex-direction:column}
.exe-code{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.06em;background:#EAF2FE;border:1px solid #C9DAF8;color:#163F8F;border-radius:6px;padding:2px 9px;margin-bottom:10px;align-self:flex-start}
.exe-card h3{margin:0 0 8px;font-size:1.06rem}
.exe-card p{margin:0 0 12px;font-size:.9rem;line-height:1.6;color:var(--slate)}
.exe-card ul{margin:0 0 16px;padding-left:18px}
.exe-card li{font-size:.88rem;line-height:1.55;color:var(--slate);margin-bottom:7px}
.exe-card .btn{margin-top:auto;align-self:flex-start}
@media(max-width:980px){.ind-grid{grid-template-columns:repeat(2,1fr)}.exe-grid{grid-template-columns:1fr}}
@media(max-width:640px){.ind-grid{grid-template-columns:1fr}}
/* Buyer: correct a line / add a note */
.ln-edit{margin-top:8px}
.ln-edit summary{cursor:pointer;font-size:.76rem;color:#1F5FD1;font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:6px}
.ln-edit summary::-webkit-details-marker{display:none}
.ln-edit summary::before{content:'✎';font-size:.8rem}
.ln-dot{width:7px;height:7px;border-radius:50%;background:#0B7A4F;display:inline-block}
.ln-edit label{display:block;margin-top:9px;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--slate-2);font-weight:700}
.ln-hint{text-transform:none;letter-spacing:0;font-weight:400;color:var(--slate-2)}
.ln-edit input{width:100%;max-width:520px;margin-top:4px;border:1.5px solid var(--line-2);border-radius:8px;padding:8px 11px;font-size:.85rem;font-family:inherit}
.ln-edit input:focus{outline:none;border-color:#1F5FD1}
.ln-orig{display:block;margin-top:8px;font-size:.74rem;color:#7A4706;background:#FFFDF7;border:1px solid #F2C960;border-radius:7px;padding:6px 10px}
/* Requirement list: the send action must never be below the fold */
.ml-sticky{position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  justify-content:space-between;background:#fff;border:1px solid #C9DAF8;border-radius:var(--r-lg);
  padding:12px 16px;margin-bottom:14px;box-shadow:0 4px 14px rgba(15,27,45,.07)}
.ml-sticky span{font-size:.88rem;color:var(--slate)}
.ml-sticky .btn{padding:9px 18px;font-size:.88rem}
.ml-nopn{display:inline-block;margin-left:8px;font-size:.7rem;background:#FFFDF7;border:1px solid #F2C960;
  color:#7A4706;border-radius:5px;padding:1px 8px}
/* Supplier quote: over-quantity warning */
.qty-warn{background:#FFFDF7;border:1px solid #F2C960;color:#7A4706;border-radius:9px;padding:10px 13px;font-size:.84rem;line-height:1.55}
/* Quote form: consistent field sizing, full-width computed total */
.bqrow label{display:flex;flex-direction:column;gap:4px;font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;color:var(--slate-2)}
.bqrow input,.bqrow select{width:100%;height:40px;border:1.5px solid var(--line-2);border-radius:8px;
  padding:0 11px;font-size:.88rem;font-family:inherit;font-weight:400;color:var(--ink);background:#fff}
.bqrow input:focus,.bqrow select:focus{outline:none;border-color:var(--blue,#1F5FD1)}
.nx-total-full{background:#E7F6EE;border:1px solid #8FD0AE;border-radius:9px;padding:10px 13px;
  font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#0B5C36;margin-top:2px}
.nx-total-full b{display:block;font-size:1.15rem;text-transform:none;letter-spacing:0;margin-top:2px}
.nx-total-full .bqnote{display:block;text-transform:none;letter-spacing:0;font-weight:400;color:#0B5C36;opacity:.8}
/* QuoteSense recommendation on the comparison screen */
.qs-rec{background:#E7F6EE;border:1px solid #8FD0AE;border-radius:9px;padding:10px 14px;
  margin:8px 0 10px;font-size:.85rem;color:#0B5C36;line-height:1.55}
.qs-rec .qs-diff{display:inline-block;margin-left:6px;background:#FFFDF7;border:1px solid #F2C960;
  color:#7A4706;border-radius:6px;padding:1px 8px;font-size:.78rem}
.qs-flags{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px}
.qs-flags span{background:#FFFDF7;border:1px solid #F2C960;color:#7A4706;border-radius:6px;
  padding:2px 9px;font-size:.76rem}
/* Buyer view of what we worked out about a part */
.ai-note{margin-top:8px;padding:8px 12px;border-radius:8px;background:var(--paper-2);
  border-left:3px solid var(--line-2);font-size:.84rem;line-height:1.55}
.ai-note.ai-ok{background:#F3FBF6;border-left-color:#8FD0AE}
.ai-note.ai-unknown{background:#FFFDF7;border-left-color:#F2C960}
.ai-tag{display:block;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--slate-2);margin-bottom:3px}
.ai-note.ai-ok .ai-tag{color:#0B5C36}
.ai-note.ai-unknown .ai-tag{color:#7A4706}
.ai-desc{display:block;color:var(--ink)}
.ai-hint{display:block;margin-top:3px;font-size:.78rem;color:var(--slate)}
.ai-note.ai-scope{background:#F5F7FB;border-left-color:#8A94A6}
.ai-note.ai-scope .ai-tag{color:#4A5568}
/* Two-level supply picker: a heading chip, then what sits under it */
.subrow .sub-l2{background:#EAF2FE;border-color:#C9DAF8;color:#163F8F;font-weight:700;
  flex-basis:100%;margin-top:6px}
.subrow .sub-l3{margin-left:14px;font-weight:400}
.subrow .sub-l3::before{content:"";display:inline-block;width:8px;height:1px;
  background:var(--line-2);margin-right:6px;vertical-align:middle}
/* Supplier self-service profile */
.sp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin-bottom:13px}
.sp-form label,.sp-full{display:flex;flex-direction:column;gap:5px;font-size:.74rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;color:var(--slate-2);margin-bottom:13px}
.sp-form input{border:1.5px solid var(--line);border-radius:8px;padding:9px 12px;font-size:.9rem;
  font-family:inherit;font-weight:400;color:var(--ink);background:#fff}
.sp-form input:focus{outline:none;border-color:var(--blue,#1F5FD1)}
@media(max-width:700px){.sp-grid{grid-template-columns:1fr}}
/* Confirmed identification, shown to suppliers */
.bc-vspec{margin-top:6px;font-size:.82rem;color:#0B5C36;background:#F3FBF6;border:1px solid #8FD0AE;
  border-radius:8px;padding:6px 11px;line-height:1.5}
.bc-vspec span{display:block;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.85}

/* brand page — popular part numbers.
   These classes shipped in the markup of ~170 brand pages but were never
   defined, so every part number rendered as one unbroken inline string that
   overflowed the page. Grid rows, monospace part, truncating name. */
.pnlist{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.pnrow{display:grid;grid-template-columns:minmax(120px,220px) 1fr auto;gap:16px;align-items:center;padding:12px 18px;border-top:1px solid var(--line);transition:.14s}
.pnrow:first-child{border-top:0}
.pnrow:hover{background:var(--paper-2)}
.pnrow .pn{font-family:var(--mono);font-size:.86rem;font-weight:600;color:var(--ink);word-break:break-all}
.pnrow .nm{color:var(--slate);font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pnrow .vw{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.06em;color:var(--blue-strong);border:1px solid var(--line-2);border-radius:6px;padding:3px 9px;white-space:nowrap}
.pnrow:hover .vw{border-color:var(--blue)}
@media(max-width:600px){
  .pnrow{grid-template-columns:1fr auto;gap:4px 10px}
  .pnrow .nm{grid-column:1/2;white-space:normal}
}
/* brand facts strip */
.nx-brandfacts{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.nx-brandfacts > *{font-size:.8rem;color:var(--slate);background:var(--paper-2);border:1px solid var(--line);border-radius:8px;padding:6px 12px}

/* Extraction progress — one card, one bar, one number.
   Amber while reading, green the moment it completes: the colour IS the status,
   so a buyer glancing at the page knows without reading a word. */
.nx-prog{background:#fff;border:1px solid var(--line);border-left:4px solid #CC8A21;border-radius:var(--r-lg);padding:20px 24px;box-shadow:var(--shadow-lg);transition:border-color .3s}
.nx-prog.is-done{border-left-color:#0B804B}
.nx-prog.is-stalled{border-left-color:#B65775}
.nx-prog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.nx-prog h3{margin:0 0 3px;font-size:1.05rem;color:var(--ink);font-family:var(--display);letter-spacing:-.01em}
.nx-prog-head p{margin:0;font-size:.86rem;color:var(--slate)}
.nx-prog-pct{font-family:var(--display);font-weight:800;font-size:2rem;line-height:1;color:#CC8A21;letter-spacing:-.02em;transition:color .3s}
.nx-prog-pct small{font-size:.9rem;font-weight:700;margin-left:2px}
.nx-prog.is-done .nx-prog-pct{color:#0B804B}
.nx-prog.is-stalled .nx-prog-pct{color:#B65775}
.nx-prog-track{background:var(--paper-2);border:1px solid var(--line);border-radius:99px;height:9px;overflow:hidden;margin:16px 0 0}
.nx-prog-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#E0A33B,#CC8A21);transition:width .45s cubic-bezier(.4,0,.2,1),background .3s}
.nx-prog.is-done .nx-prog-fill{background:linear-gradient(90deg,#12A362,#0B804B)}
.nx-prog.is-stalled .nx-prog-fill{background:#B65775}
/* the stripe only animates while work is actually happening */
.nx-prog:not(.is-done):not(.is-stalled) .nx-prog-fill{background-image:linear-gradient(90deg,#E0A33B,#CC8A21),repeating-linear-gradient(45deg,rgba(255,255,255,.22) 0 8px,transparent 8px 16px);background-blend-mode:overlay;animation:nxprog 1s linear infinite}
@keyframes nxprog{from{background-position:0 0,0 0}to{background-position:0 0,32px 0}}
.nx-prog-msg{margin:12px 0 0;font-size:.8rem;color:var(--slate-2);line-height:1.5}
.nx-prog-stop{background:none;border:1px solid var(--line-2);color:var(--slate);border-radius:8px;padding:6px 13px;font-size:.78rem;font-family:var(--body);cursor:pointer;transition:.14s}
.nx-prog-stop:hover{border-color:var(--slate-2);color:var(--ink)}
@media(prefers-reduced-motion:reduce){.nx-prog-fill{animation:none}}
@media(max-width:600px){.nx-prog{padding:16px 18px}.nx-prog-pct{font-size:1.6rem}}

.tier-sub{font-size:.72rem;color:var(--slate-2);font-weight:500;margin-left:6px;letter-spacing:0}

/* Catalogue state — LIVE / SOURCE TO ORDER / SERVICE.
   Stated on the page itself, not only in the homepage filter: a buyer arriving
   from search never sees that filter and otherwise assumes a listed domain
   means stock on the shelf. */
.nx-state{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.07em;border-radius:99px;padding:4px 11px;border:1px solid}
.nx-state::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.nx-state.is-live{color:#0B804B;background:#EAF7F0;border-color:#B9E4D0}
.nx-state.is-source{color:#8A5A1A;background:#FFF7ED;border-color:#F3D19A}
.nx-state.is-service{color:#2B5BAC;background:#EAF2FE;border-color:#C9DAF8}
.nx-state-note{margin:10px 0 0;font-size:.82rem;color:var(--slate);max-width:640px}

/* ProjectSync — buyer order timeline. */
.ps-card{background:#fff;border:1px solid var(--line);border-left:4px solid #2B6BFF;border-radius:var(--r-lg);padding:20px 24px;box-shadow:var(--shadow-lg)}
.ps-card.is-done{border-left-color:#0B804B}
.ps-card.is-hold{border-left-color:#B65775}
.ps-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.ps-head h3{margin:0 0 3px;font-family:var(--display);font-size:1.05rem;letter-spacing:-.01em;color:var(--ink)}
.ps-head p{margin:0;font-size:.86rem;color:var(--slate)}
.ps-pct{font-family:var(--display);font-weight:800;font-size:1.9rem;line-height:1;color:#2B6BFF;letter-spacing:-.02em}
.ps-pct small{font-size:.85rem;font-weight:700;margin-left:2px}
.ps-card.is-done .ps-pct{color:#0B804B}
.ps-card.is-hold .ps-pct{color:#B65775}
.ps-track{background:var(--paper-2);border:1px solid var(--line);border-radius:99px;height:8px;overflow:hidden;margin:16px 0 0}
.ps-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#5B8CFF,#2B6BFF);transition:width .45s cubic-bezier(.4,0,.2,1)}
.ps-card.is-done .ps-fill{background:linear-gradient(90deg,#12A362,#0B804B)}
.ps-card.is-hold .ps-fill{background:#B65775}
.ps-eta{margin:12px 0 0;font-size:.86rem;color:var(--ink)}
.ps-note{margin:12px 0 0;font-size:.82rem;color:var(--slate);background:var(--paper-2);border:1px solid var(--line);border-radius:9px;padding:10px 13px}
.ps-list{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--line)}
.ps-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.86rem}
.ps-list li b{color:var(--ink);min-width:150px}
.ps-when{font-family:var(--mono);font-size:.7rem;color:var(--slate-2)}
.ps-msg{color:var(--slate);flex:1 1 100%;font-size:.82rem}
@media(max-width:600px){.ps-card{padding:16px 18px}.ps-pct{font-size:1.5rem}.ps-list li b{min-width:0}}

/* ProjectSync — desk timeline. Denser than the buyer view and shows everything. */
.ps-admin{margin-top:8px;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.ps-admin-head{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:6px 10px;background:var(--paper-2);border-bottom:1px solid var(--line);font-size:.72rem}
.ps-admin-head span{font-family:var(--mono);font-size:.68rem;color:#0B5C36;font-weight:700}
.ps-admin-tbl{width:100%;border-collapse:collapse;font-size:.72rem}
.ps-admin-tbl td{padding:5px 9px;border-top:1px solid var(--line);vertical-align:top}
.ps-a-stage{font-weight:700;color:var(--ink);white-space:nowrap}
.ps-a-when{font-family:var(--mono);font-size:.66rem;color:var(--slate-2);white-space:nowrap}
.ps-a-note{color:var(--slate)}
.ps-a-buyer{display:block}
.ps-a-int{display:block;font-size:.66rem;color:#8A5A1A}
.ps-a-actor{font-size:.66rem;color:var(--slate-2);white-space:nowrap}
.ps-a-undo button{background:none;border:1px solid var(--line);border-radius:5px;color:#8A1C0A;cursor:pointer;font-size:.8rem;line-height:1;padding:2px 7px}
.ps-a-undo button:hover{border-color:#E07798;background:#FFF1EE}
.ps-empty{margin:8px 0 0;font-size:.72rem;color:var(--slate-2)}

/* Desk dashboard. Charts are inline SVG and bars are plain divs — the desk
   opens this on a phone in a plant, and a blocked script must not cost the numbers. */
.dash-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:0 0 20px}
.dash-kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.dash-kpi b{display:block;font-family:var(--display);font-size:1.5rem;letter-spacing:-.02em;color:var(--ink)}
.dash-kpi span{font-size:.72rem;color:var(--slate-2)}
.dash-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.dash-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.dash-card.dash-wide{grid-column:1/-1}
/* RFQ processing stages. A status bar chart answers "how many are NEW"; it does
   not answer "is anything stuck", which is the question the desk has. Each row
   is a stage, with conversion from the row above and a stalled count. */
.stage-list{margin-top:12px;display:flex;flex-direction:column;gap:7px}
.stage-row{display:grid;grid-template-columns:158px 1fr 78px 118px;align-items:center;gap:10px}
.stage-lab{font-size:.8rem;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage-bar{background:#EEF2F8;border-radius:4px;height:20px;overflow:hidden}
.stage-bar i{display:block;height:100%;background:var(--blue);opacity:.85;border-radius:4px}
.stage-n{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;text-align:right;white-space:nowrap}
.stage-drop{color:var(--slate-2);font-size:.7rem;margin-left:5px}
.stage-stuck{font-size:.72rem}
.stage-warn{color:#B3261E;font-weight:600;white-space:nowrap}
@media(max-width:700px){
  .stage-row{grid-template-columns:104px 1fr 58px;gap:7px}
  .stage-stuck{grid-column:1/-1;text-align:right;margin-top:-3px}
}
.dash-card h3{margin:0 0 4px;font-family:var(--display);font-size:1rem;color:var(--ink)}
.dash-sub{margin:0 0 12px;font-size:.76rem;color:var(--slate-2)}
.dash-empty{margin:8px 0 0;font-size:.8rem;color:var(--slate-2);font-style:italic}
.dash-svg{width:100%;height:auto;display:block;margin-top:8px}
.dash-bars{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.dash-bar{display:grid;grid-template-columns:130px 1fr 46px;gap:10px;align-items:center;font-size:.78rem}
.dbl{color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dbt{background:var(--paper-2);border-radius:99px;height:9px;overflow:hidden}
.dbt i{display:block;height:100%;border-radius:99px}
.dash-bar b{text-align:right;font-family:var(--mono);font-size:.74rem;color:var(--ink);display:flex;flex-direction:column;line-height:1.25}
/* The count answers 'how many'; the share answers 'is that a lot'. Both,
   or the reader has to do arithmetic to use the row. */
.dash-bar b em{font-style:normal;font-size:.62rem;color:var(--slate-2)}
.dash-stat{display:flex;align-items:baseline;gap:10px;margin:4px 0 12px}
.dash-stat b{font-family:var(--display);font-size:1.9rem;letter-spacing:-.02em;color:var(--ink)}
.dash-stat span{font-size:.78rem;color:var(--slate-2)}
@media(max-width:980px){.dash-kpis{grid-template-columns:repeat(3,1fr)}.dash-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.dash-kpis{grid-template-columns:repeat(2,1fr)}.dash-bar{grid-template-columns:96px 1fr 44px}}

/* TenderAI compliance matrix — desk only. */
.tai{border:1px solid var(--line);border-left:4px solid #CC8A21;border-radius:12px;background:#fff;overflow:hidden}
.tai.t-ready{border-left-color:#0B804B}
.tai.t-review{border-left-color:#CC8A21}
.tai.t-blocked{border-left-color:#B65775}
/* The panel is a <details> now: fourteen conditions pushed the line items, the
   supplier board and the quotation buttons below the fold on every tender RFQ.
   The summary IS the header, so nothing moved and nothing was added — it just
   became the thing you click. */
.tai>summary.tai-head{cursor:pointer;list-style:none}
.tai>summary.tai-head::-webkit-details-marker{display:none}
/* The marker is a third flex child, and space-between then pushed the heading
   into the middle of the panel. It sits at the start; the verdict is pushed to
   the far edge on its own. */
.tai>summary.tai-head{justify-content:flex-start}
.tai>summary.tai-head>.tai-verdict{margin-left:auto}
.tai>summary.tai-head::before{content:"\25B8";flex:0 0 auto;margin-right:8px;color:var(--slate-2);
  font-size:.8rem;transition:transform .15s}
.tai[open]>summary.tai-head::before{transform:rotate(90deg)}
.tai>summary.tai-head:hover{background:var(--paper-2)}
.tai>summary.tai-head:focus-visible{outline:2px solid var(--blue,#1F5FD1);outline-offset:-2px}
/* The scan's badge and the desk's decision sit side by side. Replacing one with
   the other would lose the reason the machine gave its answer. */
/* Always on its own line under the scan's badge, never beside it — the two
   are different claims and reading them as one phrase ("GAP desk: Met") is
   exactly the confusion this layout exists to prevent. */
.tai-desk{display:block;width:fit-content;margin-top:4px;font-size:.64rem;font-weight:700;letter-spacing:.02em;
  padding:2px 8px;border-radius:99px;background:#EAF2FE;border:1px solid #C9DAF8;color:#163F8F;white-space:nowrap}
.tai-tbl tr.tai-decided{background:#FBFCFF}
.tai-tbl tr.tai-decided .tai-c{box-shadow:inset 3px 0 0 #A4C2F4}
.tai-over{margin:0;padding:9px 16px;font-size:.76rem;color:#7A4706;background:#FFFDF7;border-bottom:1px solid var(--line)}
.tai-edit{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.tai-edit select{font-size:.7rem;padding:3px 6px;border:1px solid var(--line);border-radius:6px;background:#fff;max-width:100%}
.tai-edit input{flex:1 1 190px;min-width:0;font-size:.72rem;padding:3px 7px;border:1px solid var(--line);border-radius:6px}
.tai-edit input:focus,.tai-edit select:focus{outline:none;border-color:var(--blue,#1F5FD1)}
.tai-note{margin-top:5px;font-size:.72rem;color:var(--ink-2);background:var(--paper-2);border-radius:6px;padding:4px 8px}
.tai-save{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:11px 16px;border-top:1px solid var(--line)}
.tai-save span{font-size:.72rem;color:var(--slate-2);flex:1 1 260px;min-width:0}
@media(max-width:760px){.tai-edit{flex-direction:column}.tai-edit input{flex:1 1 auto;width:100%}}
.tai-head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tai-head h3{margin:0;font-family:var(--display);font-size:.98rem;color:var(--ink)}
.tai-head p{margin:2px 0 0;font-size:.76rem;color:var(--slate)}
.tai-verdict{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.06em;padding:4px 11px;border-radius:99px;border:1px solid}
.tai.t-ready .tai-verdict{color:#0B804B;background:#EAF7F0;border-color:#B9E4D0}
.tai.t-review .tai-verdict{color:#8A5A1A;background:#FFF7ED;border-color:#F3D19A}
.tai.t-blocked .tai-verdict{color:#8A1C0A;background:#FFF1EE;border-color:#F2B2A8}
.tai-tbl{width:100%;border-collapse:collapse;font-size:.78rem}
.tai-tbl td{padding:8px 14px;border-top:1px solid var(--line);vertical-align:top}
.tai-c{font-weight:600;color:var(--ink);width:38%}
.tai-c span{display:block;font-weight:400;font-size:.72rem;color:var(--slate-2);margin-top:2px}
.tai-v{width:110px}
.tai-b{display:inline-block;font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.05em;padding:3px 8px;border-radius:5px;border:1px solid}
.t-met{color:#0B804B;background:#EAF7F0;border-color:#B9E4D0}
.t-sup{color:#2B5BAC;background:#EAF2FE;border-color:#C9DAF8}
.t-gap{color:#8A1C0A;background:#FFF1EE;border-color:#F2B2A8}
.t-man{color:#8A5A1A;background:#FFF7ED;border-color:#F3D19A}
.t-opt{color:#5A6478;background:var(--paper-2);border-color:var(--line)}
.tai-e{color:var(--slate);font-size:.74rem}
/* What the tender actually says, and the verbatim line proving it. */
.tai-c span.tai-said{color:var(--ink);font-weight:500}
.tai-q{display:block;margin-top:4px;font-size:.7rem;color:var(--slate-2);font-style:italic;
  border-left:2px solid var(--line-2);padding-left:8px}
.tai-warn{margin:0;padding:10px 16px;background:#FFF1EE;border-top:1px solid #F2B2A8;font-size:.76rem;color:#8A1C0A}
@media(max-width:700px){.tai-c{width:auto}.tai-tbl td{padding:7px 10px}}

/* Desk mode switcher — tender work and private procurement are different jobs. */
.desk-modes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;align-items:center}
.desk-modes a{font-size:.8rem;color:var(--slate);background:#fff;border:1px solid var(--line);
  border-radius:99px;padding:6px 14px;text-decoration:none;transition:.14s}
.desk-modes a b{font-family:var(--mono);font-size:.72rem;margin-left:5px;color:var(--slate-2)}
.desk-modes a:hover{border-color:var(--blue)}
.desk-modes a.on{background:var(--ink);border-color:var(--ink);color:#fff}
.desk-modes a.on b{color:#B9C7DE}
.desk-modes .dm-dash{margin-left:auto;color:var(--blue-strong);border-color:var(--line-2)}
.desk-modes .dm-flag{color:#8A4B00;background:#FFF3E4;border-color:#E9A54F;font-weight:600}
.desk-modes .dm-flag.on{background:#E07B00;border-color:#E07B00;color:#fff}
.desk-modes .dm-flag.on b{color:#FFE6C7}
.desk-modes .dm-unread{color:#7A4706;background:#FFF7ED;border-color:#F3D19A;font-weight:600}
.desk-modes .dm-unread b{color:#8A5A1A}
.desk-modes .dm-unread.on{background:#CC8A21;border-color:#CC8A21;color:#fff}
.desk-modes .dm-unread.on b{color:#FFF0D0}
@media(max-width:600px){.desk-modes .dm-dash{margin-left:0}}

/* Discovered tenders. Sorted by relevance, so the band colour is the first
   thing read — the desk should be able to triage without reading titles. */
.tf-row{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;background:#fff;
  border:1px solid var(--line);border-left:4px solid var(--line-2);border-radius:12px;padding:16px 20px;margin:0 0 12px}
.tf-row.tf-high{border-left-color:#0B804B}
.tf-row.tf-medium{border-left-color:#CC8A21}
.tf-row.tf-low{border-left-color:var(--line-2)}
.tf-main{flex:1 1 480px;min-width:0}
.tf-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.tf-band{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.05em;padding:3px 8px;border-radius:5px;background:var(--paper-2);border:1px solid var(--line);color:var(--slate)}
.tf-row.tf-high .tf-band{color:#0B804B;background:#EAF7F0;border-color:#B9E4D0}
.tf-row.tf-medium .tf-band{color:#8A5A1A;background:#FFF7ED;border-color:#F3D19A}
.tf-ref,.tf-close,.tf-src{font-family:var(--mono);font-size:.68rem;color:var(--slate-2)}
/* pass 95: buyer disclosure chosen at tender upload */
.tf-disc{border:1px dashed #E8C99A;background:#FFF8EE;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;font-size:.84rem}
.tf-grid .tf-disc{grid-column:1/-1}
.tf-disc>b{font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:#8A4B00}
.tf-disc .tf-radio{display:flex;gap:8px;align-items:flex-start;font-weight:400;margin:0}
.tf-disc .tf-radio input{width:auto;margin-top:3px}
.tf-disc .tf-reason{display:flex;gap:8px;align-items:center;font-size:.8rem;margin:0}
.tf-disc .tf-reason select{flex:1;min-width:0;max-width:420px}
.tf-disc:has(input[value=no]:checked) .tf-reason{opacity:.45}
.tf-disc-note{font-size:.76rem;color:var(--slate)}
.tf-discb{font-size:.66rem;font-weight:700;border-radius:999px;padding:2px 8px;background:#FFF1DC;color:#8A4B00;border:1px solid #E8C99A}
.tf-discb.off{background:#F2F4F7;color:#667085;border-color:#E4E7EC;font-weight:600}
.tf-close{color:#8A1C0A}
.tf-row h3{margin:0 0 4px;font-size:.98rem;font-family:var(--display);color:var(--ink);line-height:1.35}
.tf-dom{margin:0 0 4px;font-family:var(--mono);font-size:.68rem;color:var(--blue-strong)}
.tf-sum{margin:0;font-size:.8rem;color:var(--slate);line-height:1.5}
.tf-acts{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.tf-acts .btn{padding:7px 14px;font-size:.8rem}
.tf-msg{background:#EAF7F0;border:1px solid #B9E4D0;color:#0B5C36;border-radius:9px;padding:10px 14px;font-size:.84rem;margin:0 0 14px}
@media(max-width:700px){.tf-row{flex-direction:column}.tf-acts{width:100%}}

/* Admin toolbar. Grouped by how often the work happens, with a quiet label per
   group so the desk scans headings rather than reading 21 button captions. */
.adm-tools{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:0 0 16px}
.adm-group{display:flex;flex-direction:column;gap:6px;min-width:0}
.adm-group + .adm-group{padding-left:18px;border-left:1px solid var(--line)}
.adm-label{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--slate-2)}
.adm-links{display:flex;flex-wrap:wrap;gap:6px}
.adm-btn{font-size:.78rem;line-height:1;color:var(--ink-2);background:var(--paper-2);
  border:1px solid var(--line);border-radius:7px;padding:7px 11px;text-decoration:none;transition:.14s;white-space:nowrap}
.adm-btn:hover{border-color:var(--blue);color:var(--blue-strong);background:#fff}
.adm-btn.adm-cta{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.adm-btn.adm-cta:hover{background:var(--blue-strong);color:#fff}
.adm-btn.adm-warn{color:#8A5A1A;background:#FFF9F0;border-color:#F3D19A}
.adm-btn.adm-warn:hover{border-color:#CC8A21;color:#7A4706}
/* Destructive actions read as destructive, and confirm before running. */
.adm-btn.adm-danger{color:#8A1C0A;background:#FFF4F2;border-color:#F2B2A8}
.adm-btn.adm-danger:hover{background:#8A1C0A;border-color:#8A1C0A;color:#fff}
@media(max-width:820px){
  .adm-tools{gap:12px}
  .adm-group + .adm-group{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:10px;width:100%}
}

/* Footer address. Location and opening hours are two facts, not one sentence —
   run together they wrapped mid-phrase ("Mon-" / "Sat"). */
.foot-addr{display:flex;flex-direction:column;gap:2px;padding-top:8px;color:var(--slate-2);font-size:.82rem;line-height:1.5}
.foot-hours{white-space:nowrap}

/* A failing mail server is not a statistic — it is an outage. It looks like one. */
.dash-card.dash-alarm{border-color:#F2B2A8;border-left:4px solid #B65775;background:#FFFCFB}
.dash-card.dash-alarm h3{color:#8A1C0A}
.dash-kpi.kpi-alarm{border-color:#F2B2A8;background:#FFF4F2}
.dash-kpi.kpi-alarm b{color:#8A1C0A}
.dash-warn{margin:12px 0 0;background:#FFF1EE;border:1px solid #F2B2A8;border-radius:9px;
  padding:10px 13px;font-size:.78rem;color:#8A1C0A;line-height:1.5}
.dash-warn a{color:#8A1C0A;font-weight:600}

/* A From that does not match the authenticated mailbox fails silently on Google
   — the one failure mode nobody discovers on their own. */
.smtp-mismatch{background:#FFF7ED;border:1px solid #F3D19A;border-radius:9px;padding:11px 14px;
  font-size:.8rem;color:#7A4706;line-height:1.55;margin:10px 0 0}
.smtp-mismatch code{background:#fff;border:1px solid #F3D19A;border-radius:4px;padding:1px 5px;font-size:.76rem}

/* Every quotation against one RFQ, with its own status. A buyer told they have
   three quotes must be able to open all three. */
.q-list{display:flex;flex-direction:column;gap:6px;margin:-2px 0 12px;padding-left:14px;
  border-left:2px solid var(--line)}
.q-item{display:grid;grid-template-columns:1.4fr .8fr 1fr 1fr auto;gap:10px;align-items:center;
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:9px;
  padding:9px 13px;text-decoration:none;font-size:.8rem;transition:.14s}
.q-item:hover{border-color:var(--blue);box-shadow:var(--shadow-sm)}
.q-item.q-open{border-left-color:#2B6BFF}
.q-item.q-won{border-left-color:#0B804B;background:#F7FCF9}
.q-item.q-lost{border-left-color:#B65775;opacity:.72}
.q-item.q-counter{border-left-color:#CC8A21}
.q-ref{color:var(--ink);font-size:.74rem;font-weight:600}
.q-ref em{font-style:normal;font-size:.62rem;color:#0B5C36;background:#E7F6EE;border-radius:4px;padding:1px 6px;margin-left:5px}
.q-amt{font-family:var(--mono);color:var(--ink);font-weight:600}
.q-st{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--slate)}
.q-item.q-won .q-st{color:#0B804B;font-weight:700}
.q-item.q-lost .q-st{color:#B65775}
.q-when{font-size:.7rem;color:var(--slate-2)}
.q-go{font-size:.72rem;color:var(--blue-strong);font-weight:600;white-space:nowrap}
@media(max-width:760px){
  .q-item{grid-template-columns:1fr 1fr;gap:4px 10px}
  .q-when,.q-go{grid-column:1/-1}
}

/* Flash messages. Previously these reused .rfq — the dark call-to-action panel,
   which forces color:#fff and paints a blue radial gradient over itself. With
   only the background overridden the result was white text on pale green, with
   a blue wash across it. A confirmation nobody can read is a confirmation that
   did not happen. */
.nx-flash{border-radius:var(--r-lg);padding:13px 18px;margin:14px 0;font-size:.9rem;
  line-height:1.5;font-weight:500;border:1px solid}
.nx-flash.is-ok{background:#E7F6EE;border-color:#8FD0AE;color:#0B5C36}
.nx-flash.is-err{background:#FDECEC;border-color:#F3B0B0;color:#8A1C0A}
.nx-flash.is-warn{background:#FFF7ED;border-color:#F3D19A;color:#7A4706}
.nx-flash b{color:inherit}
.nx-flash a{color:inherit;text-decoration:underline}

/* Buyer response on the desk queue. An accepted quotation must not look like an
   RFQ nobody has replied to — this is the row the desk should act on next. */
.rsp{display:inline-block;margin-top:4px;font-family:var(--mono);font-size:.62rem;font-weight:700;
  letter-spacing:.04em;padding:3px 8px;border-radius:5px;border:1px solid;text-decoration:none;white-space:nowrap}
.rsp-won{color:#0B5C36;background:#E7F6EE;border-color:#8FD0AE}
.rsp-lost{color:#8A1C0A;background:#FDECEC;border-color:#F3B0B0}
.rsp-counter{color:#7A4706;background:#FFF7ED;border-color:#F3D19A}
.rsp:hover{filter:brightness(.96)}

/* An RFQ someone has acted on since the desk last opened it. Highlighted until
   it is actually READ — a status badge alone cannot tell you whether an update
   arrived a minute ago or was handled yesterday. */
tr.row-unread{background:#FFFBF0}
tr.row-unread td{border-top:1px solid #F3D19A;border-bottom:1px solid #F3D19A}
tr.row-unread td:first-child{box-shadow:inset 3px 0 0 #CC8A21}
.unread-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#CC8A21;
  margin-right:6px;vertical-align:middle}
.rsp-when{display:block;margin-top:3px;font-family:var(--mono);font-size:.62rem;color:var(--slate-2)}

/* Manual attention flag. Orange and deliberate — it outranks the automatic
   unread tint, because a human asking the team to look at something matters
   more than "an update arrived". */
tr.row-flag{background:#FFF3E4}
tr.row-flag td{border-top:1px solid #E9A54F;border-bottom:1px solid #E9A54F}
tr.row-flag td:first-child{box-shadow:inset 3px 0 0 #E07B00}
.flag-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#E07B00;margin-right:6px;vertical-align:middle}
.flag-form{display:inline-flex;gap:4px;align-items:center;margin-left:6px}
.flag-btn{background:none;border:0;cursor:pointer;font-size:.95rem;line-height:1;color:var(--slate-2);padding:0 2px}
.flag-btn:hover{color:#E07B00}
.flag-btn.on{color:#E07B00}
.flag-note{width:74px;font-size:.66rem;padding:2px 5px;border:1px solid var(--line);border-radius:5px}
.flag-note-txt{display:block;margin-top:3px;font-size:.66rem;color:#8A5A1A;font-style:italic}


/* Country-conditional fields on the registration forms. */
.nx-in,.nx-intl{}

/* RFQ extraction progress. The buyer used to sit on a static sentence with no
   way to distinguish "working" from "stuck"; this is the moving figure. */
.nxprog{margin:0 0 18px;max-width:520px}
.nxprog-bar{height:10px;border-radius:999px;background:#E3E8F0;overflow:hidden}
.nxprog-bar i{display:block;height:100%;width:6%;border-radius:999px;background:var(--blue);
  transition:width .6s ease}
.nxprog-txt{margin-top:7px;font-size:.82rem;color:var(--slate)}
.nxprog-txt span:first-child{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:700;color:var(--blue-strong);margin-right:6px}

/* Updates panels are <details> now. Hide the native disclosure triangle so the
   header reads as a heading rather than a form control, and keep the marker
   removed on WebKit too (it ignores list-style on summary). */
details.nx-notes > summary{display:block}
details.nx-notes > summary::-webkit-details-marker{display:none}
details.nx-notes > summary::marker{content:''}
details.nx-notes > summary:hover h2{color:var(--blue-strong,#163F8F)}
details.nx-notes > summary::after{content:'\25BE';float:right;color:var(--slate-2);font-size:.8rem;
  transition:transform .15s}
details.nx-notes[open] > summary::after{transform:rotate(180deg)}

/* Category card icons. Line art, not photographs: at card size a photo of a PLC
   and a photo of a protocol converter are indistinguishable, so the picture adds
   weight without adding recognition. Inline SVG inherits currentColor, needs no
   request, and cannot render as a broken image. */
/* .ch was already justify-content:space-between (code left, flags right).
   Adding the icon as a third child pushed the code into the middle of the card,
   which reads as a layout fault. Group icon+code together and let the flags keep
   the right edge. */
.cat .ch{display:flex;align-items:center;gap:9px;justify-content:flex-start}
.cat .ch .flags{margin-left:auto}
/* The icon exists so a buyer can tell "Hydraulics" from "Pumps & Valves"
   BEFORE reading either name. At 34px with a 19px glyph it was decoration —
   too small to resolve a valve body from a gear at a glance, which is the one
   job it has. Sized up so the shape reads first and the words confirm it. */
.cat-ico{display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px;flex:0 0 46px;
  background:#EAF2FE;color:#163F8F;transition:.15s}
.cat-ico svg{width:27px;height:27px;display:block}
.cat:hover .cat-ico{background:var(--blue,#2B6BFF);color:#fff}
.cat[data-st="service"] .cat-ico{background:#FFF3E0;color:#8A4B00}
.cat[data-st="service"]:hover .cat-ico{background:#CF8933;color:#fff}
.cat .ch .code{margin-left:0}
@media(max-width:520px){.cat-ico{width:38px;height:38px;flex:0 0 38px}.cat-ico svg{width:22px;height:22px}}

/* Category page hero icon — the same mark the grid card uses, so a buyer who
   clicked a card sees the shape they clicked confirmed at the top of the page. */
.ph-ico{width:52px;height:52px;flex:0 0 52px;border-radius:14px;margin-right:10px}
.ph-ico svg{width:30px;height:30px}
@media(max-width:520px){.ph-ico{width:42px;height:42px;flex:0 0 42px}.ph-ico svg{width:25px;height:25px}}

/* ── PROCUREMENT ENGINE (homepage §engine) ───────────────────────────────────
   Six stages carrying one requirement to one decision. Built from the existing
   tokens — no new palette, no new type scale — because the brief is explicit
   that Infrecx must not drift into generic-AI-startup styling. The output card
   is deliberately the heaviest element on the section: it is the product. */
.hero-accepts{margin-top:14px;font-family:var(--mono);font-size:.74rem;color:var(--slate-2);letter-spacing:.02em}

.eng-req{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:12px;
  padding:16px 20px;margin-bottom:26px}
.eng-req-lbl{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate-2);flex:0 0 auto}
.eng-req-txt{font-size:1.05rem;color:var(--ink);font-weight:500}

.eng-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.eng-step{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.eng-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.eng-mod{font-family:var(--mono);font-size:.78rem;font-weight:600;color:var(--blue-deep)}
.eng-n{font-family:var(--mono);font-size:.7rem;color:var(--slate-2);background:var(--paper-2);
  border-radius:999px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center}
.eng-w{font-weight:600;color:var(--ink);margin:0 0 8px;font-size:.94rem}
.eng-step ul{margin:0;padding-left:16px}
.eng-step li{font-size:.84rem;color:var(--slate);line-height:1.65}

.eng-out{margin-top:22px;background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--radius);padding:22px 24px;box-shadow:0 1px 3px rgba(11,31,58,.05)}
.eng-out-lbl{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--green)}
.eng-out-h h3{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.015em;margin:6px 0 18px}
.eng-out-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 22px}
.eng-out-grid>div{display:flex;flex-direction:column;gap:2px;padding-left:12px;border-left:2px solid var(--blue-wash)}
.eng-out-grid .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-2)}
.eng-out-grid b{font-size:.95rem;color:var(--ink)}
.eng-out-grid .s{font-size:.8rem;color:var(--slate)}
.eng-out-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--line)}
.eng-out-note{font-size:.85rem;color:var(--slate-2)}

@media(max-width:980px){.eng-flow{grid-template-columns:repeat(2,1fr)}.eng-out-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.eng-flow{grid-template-columns:1fr}.eng-out-grid{grid-template-columns:1fr}
  .eng-req{flex-direction:column;gap:6px}}

/* ── v1.3 taxonomy pages ─────────────────────────────────────────────────────
   Added for categories-v2 / category-v2. Scoped to .tx-* so nothing here can
   reach the 467 brand pages or the 180 legacy category pages, which share this
   stylesheet and must keep rendering exactly as they do. */
.tx-nav{padding:0 0 6px;position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.tx-chips{display:flex;gap:8px;overflow-x:auto;padding:12px 0;scrollbar-width:none}
.tx-chips::-webkit-scrollbar{display:none}
.tx-chip{flex:none;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);
  border-radius:999px;background:var(--card);color:var(--ink);text-decoration:none;font-size:14px;font-weight:550;white-space:nowrap;
  transition:border-color .15s,background .15s}
.tx-chip:hover{border-color:var(--blue);background:var(--blue-wash)}
.tx-chip .mono{font-size:11px;color:var(--slate);letter-spacing:.04em}
.tx-chip b{font-weight:600;font-size:12px;color:var(--blue);font-variant-numeric:tabular-nums}
.tx-chip.svc .mono{color:var(--green)}

.tx-cluster{padding:52px 0 8px;scroll-margin-top:64px}
.tx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px;flex-wrap:wrap}
.tx-head h2{margin:6px 0 0;font-size:30px;letter-spacing:-.025em;line-height:1.15}
.tx-head h2 a{color:inherit;text-decoration:none}
.tx-head h2 a:hover{color:var(--blue)}
.tx-lede{margin:8px 0 0;color:var(--slate);font-size:15.5px;line-height:1.6;max-width:62ch}
.tx-all{flex:none;color:var(--blue);text-decoration:none;font-weight:600;font-size:14.5px;white-space:nowrap}
.tx-all:hover{text-decoration:underline}

.tx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.tx-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:20px 20px 16px;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.tx-card:hover{border-color:var(--blue);box-shadow:0 10px 26px rgba(11,31,58,.08);transform:translateY(-2px)}
.tx-card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.tx-card-h .code{font-size:11.5px;color:var(--slate);letter-spacing:.05em}
.tx-n{font-size:12.5px;font-weight:650;color:var(--blue);font-variant-numeric:tabular-nums}
/* ONE CARD SIZE, NOT FORTY-NINE.
   The grid stretches cards to match within a ROW, so each row was internally
   tidy and every row was a different height — 231px to 409px down the page,
   eight distinct sizes at 1440px. The eye reads that as a broken layout, and
   the cards that lost were the ones with a one-line description and three
   sub-categories: they looked like the categories with less in them, when what
   they actually had was a shorter name.

   Every zone is therefore given the space its longest occupant needs, rather
   than the space its own content happens to want:
     title  2 lines   (1-2 in the data)
     text   2 lines   (1-2, clamped so a third cannot appear)
     chips  3 rows    (2-7 in the data, so this one truncates on purpose)
     foot   pinned    (margin-top:auto, already)

   The chip list is a PREVIEW, and the footer states the true count two lines
   below it — "9 sub-categories" under six visible chips is not a lie, and the
   category page behind the card lists all nine. Clipping at an exact multiple
   of the row pitch (25px chip + 6px gap) hides whole rows, so no card ever
   shows a row of half-chips. */
.tx-card h4{margin:0 0 6px;font-size:17px;letter-spacing:-.015em;line-height:1.3;min-height:2.6em}
.tx-card>p{margin:0 0 14px;color:var(--slate);font-size:14px;line-height:1.55;min-height:3.1em;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.tx-subs{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;margin-bottom:14px;
  height:87px;overflow:hidden}
/* One line per chip, always. A chip that wrapped to two lines broke the row
   pitch the clip height is calculated from, and a 3-row box would then cut the
   next row in half. Long names ellipsis rather than widening the card. */
.tx-sub{font-size:12px;padding:3px 9px;border-radius:6px;background:var(--blue-wash);color:var(--blue-deep);
  font-family:var(--mono,ui-monospace,monospace);
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.tx-sub.more{background:transparent;color:var(--slate);border:1px dashed var(--line)}
.tx-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;font-size:13px;color:var(--slate)}
.tx-foot .ar{color:var(--blue);font-size:15px}

@media (max-width:640px){
  .tx-cluster{padding:36px 0 4px}
  .tx-head h2{font-size:24px}
  .tx-grid{grid-template-columns:1fr}
}

/* The secondary hero button on the products page was rendering white text on a
   near-white background — invisible until you moused over it. .btn-line is
   designed for dark sections; on a light page it needs its own treatment rather
   than inheriting one. */
/* Kept for explicitness; these now match the base rule above rather than
   correcting it. */
.page-hero .btn-line,
.tx-cluster .btn-line{background:var(--card);color:var(--blue-deep);border:1px solid var(--blue)}
.page-hero .btn-line:hover,
.tx-cluster .btn-line:hover{background:var(--blue-wash);color:var(--blue-deep)}

/* The cluster chip row scrolled horizontally and clipped mid-word at both edges,
   which reads as a broken layout rather than a scrollable one. Let it wrap. */
.tx-chips{flex-wrap:wrap;overflow:visible}
.tx-nav{position:static;background:transparent;backdrop-filter:none;border-bottom:0;padding-bottom:2px}

/* Supplier registration picker — the v1.3 tree, three levels: domain heading,
   category checkbox, sub-category chips. The form itself was boxed to 700px,
   which is fine for name-and-email and far too narrow for a category tree — it
   read as a broken half-width page next to everything else.

   The scroll box was 420px tall when the picker held 24 flat categories. It now
   holds 49 categories and 267 sub-categories, and 420px turns that into a
   letterbox you scroll for a minute to cross. Tie it to the viewport instead. */
.catpick-v13{max-height:min(72vh,760px)}
.catpick-v13 .v13cluster{border:1px solid var(--line);border-radius:12px;padding:14px 16px 10px;margin-bottom:14px;background:var(--card)}
.catpick-v13 .v13head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-bottom:10px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.catpick-v13 .v13head b{font-size:16px;letter-spacing:-.01em}
.catpick-v13 .v13desc{flex:1 1 100%;font-size:13px;color:var(--slate);line-height:1.5}
.catpick-v13 .catgrp{border-bottom:1px solid var(--line);padding:8px 0 10px}
.catpick-v13 .catgrp:last-child{border-bottom:0;padding-bottom:2px}
.catpick-v13 .catrow{margin-top:2px;font-weight:500}
.catpick-v13 .catrow b{font-weight:600}
/* Every chip here is one sub-category at the same depth, so the heavy level-2
   treatment the legacy picker used would paint the whole panel blue. */
.catpick-v13 .subrow .subchip{background:#fff;border-color:var(--line);color:var(--slate);font-weight:400;margin-left:0}
.catpick-v13 .subrow .subchip::before{content:none}
.catpick-v13 .subrow .subchip:has(input:checked){border-color:var(--blue);color:var(--ink);background:var(--blue-wash)}

/* Internal codes have no business on a registration form. A supplier ticking
   "Compact PLCs" does not need to see NX-FA or 01.1 — they are our filing
   reference, not their vocabulary, and showing them made a freshly regrouped
   picker still read as the old one. Hidden here rather than removed from the
   markup so the values still post and nothing downstream changes. */
.catpick .ccode,
.catpick-v13 .ccode{display:none}

/* Brand chips. 760 names need to scan fast, so: dense, wrapping, and the ones
   with live catalogue depth carry their line count so a buyer can tell at a
   glance where they can browse versus where we source to order. */
.brandrow{display:flex;flex-wrap:wrap;gap:8px}
.brandchip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--line);
  border-radius:999px;background:var(--card);color:var(--ink);text-decoration:none;font-size:14px;
  transition:border-color .15s,background .15s,transform .12s}
.brandchip:hover{border-color:var(--blue);background:var(--blue-wash);transform:translateY(-1px)}
.brandchip b{font-size:11.5px;font-weight:650;color:var(--blue);font-variant-numeric:tabular-nums}
.brandchip.has-stock{border-color:#C9D9F5}

/* .btn-ghost inside a dark section rendered as an empty outline — the text
   inherits a dark colour that vanishes against the background, so the button
   looked like a blank box. It is used on light sections too, so the fix is
   scoped to the dark ones rather than changing .btn-ghost everywhere. */
.rfq .btn-ghost,
.dark .btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.45);background:transparent}
.rfq .btn-ghost:hover,
.dark .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.75);color:#fff}

/* ── Contrast pass ───────────────────────────────────────────────────────────
   Measured every piece of text on the homepage, products, brands and supplier
   registration against its actual background. Nothing was invisible — the blue
   CTAs use a gradient, which a naive check reads as transparent and reports as
   white-on-white — but four things sat just under WCAG AA (4.5:1) and that is
   what makes a page feel washed out rather than crisp.

     link blue on the page ground   4.20  ->  6.17
     secondary/slate body text      4.46  ->  5.39
     breadcrumb separator           1.39  ->  2.68  (decorative, but it had
                                                     effectively disappeared)

   Scoped to light sections. Inside .rfq and .dark the text is white on navy and
   already well past AA — darkening it there would break what works. */
/* NOTE the scoping. A bare `.eyebrow` here turned the eyebrow on the dark
   Mecwerx band navy-on-navy — the contrast fix creating the exact problem it
   was meant to remove. Every selector below is anchored to a light surface. */
.page-hero a:not(.btn),
.tx-all,
.tx-card .tx-n,
.tx-chip b,
.brandchip b,
.reg-go,
.page-hero .eyebrow,
.sec-head:not(.rev) .eyebrow,
section:not(.dark):not(.rfq) > .wrap > .sec-head .eyebrow{color:#163F8F}

/* Dark bands: everything on them is white or near-white, and nothing above may
   reach in and darken it. */
.dark .eyebrow, .rfq .eyebrow{color:rgba(255,255,255,.72)}
.dark a:not(.btn), .rfq a:not(.btn){color:#fff;text-decoration:underline;text-underline-offset:3px}
.dark h2, .dark h3, .dark p, .rfq h2, .rfq h3{color:#fff}
.dark .foot-parent, .foot .foot-parent{color:inherit}

.page-hero .bc a{color:#4A596F}
.page-hero .bc span:not(.cur){color:#8493A8}
.lede,
.tx-lede,
.tx-card > p,
.tx-foot,
.hint{color:#51617A}

/* `.dark a` with no :not(.btn) set color:inherit on the white "How execution
   works" button, which then inherited white from the dark band — a white label
   on a white button. Buttons carry their own colour and must be excluded. */
.rfq .page-hero a:not(.btn), .dark a:not(.btn), .rfq a:not(.btn){color:inherit}
.rfq .lede, .dark .lede, .rfq p, .dark p{color:rgba(255,255,255,.86)}

/* The primary gradient ran #1F5FD1 -> #4A86E8. The dark end is fine (4.98:1
   against white) but the light end is 3.25:1 — below AA for the ~15px semibold
   label that sits on it. Every CTA on the site uses this gradient, so the
   button that matters most was the least readable, and on a bright screen it
   was the first thing to wash out.

   Pulled the light stop back to #1F5FD1 (5.45:1) and the dark stop to #163F8F
   (7.20:1). Same hue and same direction of travel — it still reads as the brand
   blue, it just stops fading out at the corner where the text sits. */
:root{--gradient-primary:linear-gradient(135deg,#163F8F 0%,#1F5FD1 100%)}

/* Two stragglers the sweep found: the eyebrow label on supplier registration,
   and the footer tagline. Both sat at 4.27-4.46 — near enough to pass a glance
   and not near enough to pass a standard. */
.reg-eyebrow,
.pf-eyebrow,
.page-hero .eyebrow{color:#163F8F}
.foot-bottom .mono,
.foot-bottom span{color:#4A596F}

/* Last two from the sweep: the search-result code chip on the homepage hero and
   the SUPPLIER label on registration. Both were brand blue on a pale ground at
   4.27-4.43 — a shade off AA, which on small caps is exactly where it shows. */
.sc-res .cd,
.code.big{color:#163F8F}

/* Footer secondary lines (address, hours, tagline) sat at 4.46 — a hair under
   AA, and footers are exactly where small grey text goes unread. */
.foot .col p, .foot .col span, .foot-bottom, .foot-bottom *{color:#4A596F}
.foot .col a{color:#33445C}

/* ─────────────────────────────────────────────────────────────────────────
   TAXONOMY TREE  (.tx-tree / .txt-*)
   Used by the full product directory and the "Everything under X" section on
   every category page. Scoped so nothing here can reach the rest of the site.

   Indentation carries the hierarchy, and a guide rule down the left of each
   nested list makes the depth readable at a glance — without it, four levels
   of padding is just text drifting rightwards. <details> handles the folding,
   so every link is in the HTML whether or not the branch is open: crawlable,
   keyboard-operable, and findable with the browser's own search.
   ───────────────────────────────────────────────────────────────────────── */
.tx-dir{padding:52px 0 8px;scroll-margin-top:64px}
.tx-tree{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.tx-tree ul.txt{list-style:none;margin:0;padding:0}
.tx-tree ul.txt ul.txt{margin:4px 0 10px 8px;padding-left:14px;border-left:1px solid var(--line)}
.txt-li{margin:0;padding:2px 0}
.txt-a{color:var(--ink);text-decoration:none;font-weight:550;font-size:14.5px;line-height:1.5}
.txt-a:hover{color:var(--blue-deep);text-decoration:underline}
.txt-n{margin-left:9px;font-size:12px;color:var(--slate);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Depth 0 is the category level on a cluster page — give it weight so the eye
   lands on the structure before the detail. */
.tx-tree>ul.txt>.txt-li{padding:9px 0;border-bottom:1px solid var(--line)}
.tx-tree>ul.txt>.txt-li:last-child{border-bottom:0}
.tx-tree>ul.txt>.txt-li>.txt-a,
.tx-tree>ul.txt>.txt-li>.txt-fold>.txt-sum>.txt-a{font-size:16px;font-weight:650;letter-spacing:-.01em}

/* Folded branches. The default triangle is inconsistent across browsers and
   sits badly against a link, so it is replaced with one that rotates. */
.txt-fold{margin:0}
.txt-sum{display:flex;align-items:baseline;gap:2px;cursor:pointer;list-style:none;padding:3px 0;border-radius:7px}
.txt-sum::-webkit-details-marker{display:none}
.txt-sum::before{content:"";flex:none;width:0;height:0;margin-right:9px;align-self:center;
  border-left:5px solid var(--slate);border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform .15s}
.txt-fold[open]>.txt-sum::before{transform:rotate(90deg)}
.txt-sum:hover{background:var(--blue-wash)}
.txt-sum:hover::before{border-left-color:var(--blue-deep)}
.txt-fold[open]>.txt-sum{margin-bottom:2px}

/* Leaves are dense and short — two columns reclaim a lot of vertical space on
   a wide screen without turning into a wall. */
@media (min-width:900px){
  .tx-tree ul.txt-d3{column-count:2;column-gap:28px}
  .tx-tree ul.txt-d3>.txt-li{break-inside:avoid}
}
@media (max-width:640px){
  .tx-dir{padding:36px 0 4px}
  .tx-tree{padding:14px 14px}
  .tx-tree ul.txt ul.txt{margin-left:2px;padding-left:11px}
  .txt-n{display:block;margin:1px 0 0}
}

/* ─────────────────────────────────────────────────────────────────────────
   BRAND DIRECTORY — A–Z index
   563 of 673 brands carry no category, so they used to render as one wall of
   chips with no order a reader could use. Cut by first letter, the wall becomes
   a directory; the index is what makes a long one usable at a glance.
   ───────────────────────────────────────────────────────────────────────── */
.az-index{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:10px 12px;
  background:var(--card);border:1px solid var(--line);border-radius:12px}
.az-index a{min-width:30px;text-align:center;padding:5px 8px;border-radius:8px;
  font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--blue-deep);
  text-decoration:none;background:var(--blue-wash)}
.az-index a:hover{background:var(--blue-deep);color:#fff}
.az-h{margin:18px 0 8px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  color:var(--slate);scroll-margin-top:76px;text-transform:uppercase}
.az-h:first-of-type{margin-top:4px}
@media (max-width:640px){
  .az-index{gap:4px;padding:8px}
  .az-index a{min-width:26px;padding:5px 6px;font-size:12px}
}

/* ─────────────────────────────────────────────────────────────────────────
   PHONE PASS
   Measured at 390px, the width of the phone most Indian procurement staff
   actually carry. Four things pushed content past the right edge and none of
   them were visible on a desktop screen:

     .tx-chip   — flex:none plus a long domain name ("Custom Manufacturing,
                  Tooling & OEM Parts") makes a chip wider than the viewport.
                  It cannot wrap, so it just runs off.
     .tx-all    — white-space:nowrap on "Open Industrial Machinery & Process
                  Equipment →", sitting in a flex row it refuses to leave.
     .ph-meta   — the pill row on a brand page, same nowrap problem.
     tap sizes  — tree links and chips came out under 24px tall. That is below
                  every touch-target guideline and it shows: you miss, you land
                  on the row above, you go to the wrong category.

   Horizontal scroll on a page like this is not cosmetic. A buyer who swipes
   sideways by accident loses their place in a 2,000-line directory.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width:820px){
  .tx-chip{flex:1 1 auto;max-width:100%;white-space:normal;text-align:left;line-height:1.35}
  .tx-all{white-space:normal;flex:1 1 100%;margin-top:6px}
  .tx-head{align-items:flex-start}
  /* .ph-top is a nowrap flex row, so the pill group sat beside the H1 and had
     nowhere to go once the heading took the width. Let the row wrap and give
     the pills their own line. */
  .ph-top{flex-wrap:wrap;align-items:flex-start}
  .ph-top>h1{flex:1 1 100%;min-width:0}
  .ph-meta{flex:1 1 100%;min-width:0;max-width:100%;margin-top:10px}
  .ph-meta .chan-pill{max-width:100%;white-space:normal;text-align:left;line-height:1.35}
  .relrow,.brandrow{max-width:100%}
  .relpill,.brandchip{max-width:100%;white-space:normal;text-align:left;line-height:1.35}
}
@media (hover:none){
  /* Touch targets: 24px is the floor, and these were under it. */
  .txt-a{display:inline-block;padding:5px 0;min-height:24px}
  .txt-sum{padding:6px 0}
  .brandchip,.relpill,.subchip,.tx-sub{min-height:30px;align-items:center}
  .az-index a{min-height:32px;display:inline-flex;align-items:center;justify-content:center}
  .bc a,.bc span{padding:3px 0;display:inline-block}
}

/* ─────────────────────────────────────────────────────────────────────────
   VERTICAL RHYTHM
   Sections ran 88px of padding top AND bottom — 176px of empty page between
   one idea and the next, which on a 1080px screen means a whole viewport can
   contain nothing but the gap. It reads as a site with less to say than it has,
   and it is why the pages felt long: the directory was 14,785px, and a third of
   that was air.

   56px (112px between) keeps sections clearly separate without the scroll tax.
   The scoped blocks below carry the same reduction so the taxonomy pages, which
   stack the most sections, benefit the most.
   ───────────────────────────────────────────────────────────────────────── */
.tx-cluster{padding:34px 0 6px}
.tx-dir{padding:34px 0 6px}
.page-hero{padding:36px 0 24px}
.tx-head{margin-bottom:16px}
.sec-head h2{margin-top:12px}
.sec-head p{margin-top:10px}
@media (max-width:820px){
  section{padding:38px 0}
  .sec-head{margin-bottom:20px}
  .tx-cluster,.tx-dir{padding:26px 0 4px}
  .page-hero{padding:26px 0 18px}
}

/* ─────────────────────────────────────────────────────────────────────────
   HEADER — WHERE AM I
   The nav gave no indication of the current section, so a visitor three pages
   into the catalogue had nothing telling them which branch of the site they
   were in. The underline the hover state already draws is the obvious answer:
   make it permanent on the active item.
   ───────────────────────────────────────────────────────────────────────── */
.nav a.is-active{color:var(--ink);font-weight:650}
.nav a.is-active::after{right:0;background:var(--blue-deep)}

/* ─────────────────────────────────────────────────────────────────────────
   THE DARK CTA PANEL — .rfq is two things wearing one class
   As an inline card (<div class="rfq">) the flex row is right. As a SECTION
   (<section class="rfq">) it broke the container contract every other section
   keeps: the section became the flex parent, so its .wrap shrank to content
   width and `margin:0 auto` then centred it — which is why "Need an STMicro
   part?" sat a third of the way across a full-width panel while every other
   heading on the page started at the left margin.

   The section stays a plain block, and the flex row moves inside .wrap where
   the 1320px measure applies. Heading left, buttons right, aligned with
   everything above it.
   ───────────────────────────────────────────────────────────────────────── */
section.rfq{display:block;padding:44px 0}
section.rfq>.wrap{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between}
section.rfq>.wrap>.sec-head{margin-bottom:0}
section.rfq>.wrap>.acts{flex:none}
@media (max-width:820px){
  section.rfq{padding:32px 0}
  section.rfq>.wrap{gap:18px}
  section.rfq>.wrap>.acts{flex:1 1 100%}
}

/* FAQ blocks on brand pages — <details> so the answers are in the HTML for a
   crawler whether or not the reader opens them. */
.faqs{display:grid;gap:10px;max-width:840px}
.faq{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px}
.faq summary{cursor:pointer;font-weight:600;font-size:15.5px;color:var(--ink);list-style:none;
  display:flex;align-items:flex-start;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"";flex:none;width:0;height:0;margin-top:7px;
  border-left:5px solid var(--slate);border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform .15s}
.faq[open] summary::before{transform:rotate(90deg)}
.faq p{margin:10px 0 2px 19px;color:var(--slate);font-size:14.5px;line-height:1.6}

/* ─────────────────────────────────────────────────────────────────────────
   BUYER COMPARISON SHEET
   A procurement decision gets read on a phone as often as a desktop, so the
   table scrolls inside its own box rather than pushing the page sideways.
   ───────────────────────────────────────────────────────────────────────── */
.cmp-wrap{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow-x:auto}
table.cmp{width:100%;border-collapse:collapse;font-size:14.5px;min-width:660px}
table.cmp th{background:var(--paper-2);text-align:left;padding:10px 14px;font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--slate);white-space:nowrap}
table.cmp td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top}
.cmp-price{font-family:var(--mono);font-weight:700;color:var(--ink);white-space:nowrap;font-size:1.02em}
/* The supplier's own quoted figure, when the desk chose to disclose it. Set
   below the landed price in weight and colour, because it is context — the
   number the buyer acts on is what they would pay. */
.cmp-sub{font-family:var(--mono);font-weight:500;color:var(--slate);white-space:nowrap;font-size:.9em}
.cmp-req{font-family:var(--body);font-weight:500;color:var(--slate-2);font-style:italic}
.cmp-tag{display:inline-block;margin-left:6px;font-size:11px;font-weight:600;padding:1px 7px;
  border-radius:6px;background:var(--blue-wash);color:var(--blue-deep)}
.cmp-v{white-space:nowrap;font-weight:600}
.cmp-valid{color:var(--green)} .cmp-expiring{color:#8A4B00} .cmp-expired{color:#8A1C0A} .cmp-unknown{color:var(--slate)}
tr.cmp-note td{border-top:0;padding-top:0;font-size:13.5px;color:var(--slate);line-height:1.55}
@media (max-width:640px){ table.cmp{font-size:13.5px} table.cmp td,table.cmp th{padding:9px 11px} }

/* Search results carry raw part numbers and long descriptive names, neither of
   which contains a space to break on. On a phone the card simply ran off the
   right edge — 177px of it. Long unbroken strings need to be told they may be
   broken; nothing else here has that problem because nothing else prints an
   MPN as a heading. */
.subcard h4,.subcard .code,.subcard p{overflow-wrap:anywhere;word-break:break-word;min-width:0}
.subcard{min-width:0}
.subgrid{min-width:0}
@media (max-width:820px){ .subgrid{grid-template-columns:1fr} }

/* The count on a domain filter chip. */
.cat-filter .cf-n{display:inline-block;margin-left:6px;font-size:.72rem;font-weight:700;
  opacity:.62;font-variant-numeric:tabular-nums}
.cat-filter.active .cf-n{opacity:.85}

/* ===================== PAYMENTS AGAINST A PURCHASE ORDER =====================
   Two directions on one panel, because the number that matters is the gap
   between them: an order collected and not yet paid out is working capital,
   and the reverse is money at risk. Direction is carried by a word and a
   colour, never by colour alone — a red/green pair is the one distinction a
   colour-blind reader loses, and this panel is about money. */
.paypanel>summary{cursor:pointer;padding:2px 0 10px;font-size:.92rem;list-style:none}
.paypanel>summary::-webkit-details-marker{display:none}
.paypanel>summary::before{content:"+";display:inline-block;width:16px;font-weight:700;color:var(--blue,#1F5FD1)}
.paypanel[open]>summary::before{content:"-"}
.payord{border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:10px;background:#fff}
.payhead{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:7px}
.paydir{font-size:.62rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  border-radius:5px;padding:2px 8px;white-space:nowrap}
.paydir.in{color:#0B5C36;background:#E6F6EE;border:1px solid #A0EAC9}
.paydir.out{color:#163F8F;background:#EDF3FF;border:1px solid #A4C2F4}
.paystate{font-size:.66rem;font-weight:700;border-radius:12px;padding:2px 10px;border:1px solid;margin-left:auto;white-space:nowrap}
.paysums{display:flex;flex-wrap:wrap;gap:14px;font-size:.78rem;color:var(--slate-2);margin-bottom:9px}
.paysums b{color:var(--ink);font-variant-numeric:tabular-nums}
.paytab{width:100%;border-collapse:collapse;margin-bottom:9px}
.paytab th{font-size:.64rem;text-transform:uppercase;letter-spacing:.04em;color:var(--slate-2);
  text-align:left;padding:4px 7px;border-bottom:1px solid var(--line);font-weight:700}
.paytab td{font-size:.74rem;padding:5px 7px;border-bottom:1px solid var(--line);vertical-align:top}
.paytab tr.voided td{opacity:.5;text-decoration:line-through}
.paytab tr.voided td:nth-child(5){text-decoration:none}
.payvoid{background:none;border:0;color:#8A1C0A;font-size:.66rem;cursor:pointer;padding:0;font-family:inherit}
.payadd{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-top:8px;border-top:1px dotted var(--line)}
.payadd input,.payadd select{border:1px solid var(--line);border-radius:5px;padding:4px 7px;font-size:.74rem;font-family:inherit}
.payadd button{font-size:.74rem;padding:5px 13px;border-radius:5px;border:1px solid #1F5FD1;
  background:#1F5FD1;color:#fff;font-weight:600;cursor:pointer;font-family:inherit}
@media(max-width:620px){.payadd input,.payadd select{flex:1 1 46%;min-width:0}.paystate{margin-left:0}}

/* ===================== SUPPLIER PORTAL NAVIGATION =====================
   The portal was one scroll of six sections, so a supplier looking for a
   purchase order passed everything else to reach it — and the purchase order
   was not there at all. Six addressable views, and a row of buttons that says
   where the work is. The count is of WORK, not of rows: a badge that counts
   history teaches people to ignore badges. */
.spnav{display:flex;flex-wrap:wrap;gap:8px}
.spnav-i{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-size:.88rem;font-weight:600;
  color:var(--slate);background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 15px;
  transition:border-color .15s,color .15s,box-shadow .15s}
.spnav-i:hover{border-color:var(--blue,#1F5FD1);color:var(--blue,#1F5FD1)}
.spnav-i.on{background:var(--ink,#0B1F3A);border-color:var(--ink,#0B1F3A);color:#fff}
.spnav-n{font-size:.72rem;font-weight:800;line-height:1;border-radius:99px;padding:3px 7px;
  background:#FFF3E0;color:#8A4B00;border:1px solid #F2C960}
.spnav-i.on .spnav-n{background:#fff;color:#0B1F3A;border-color:#fff}
@media(max-width:620px){.spnav-i{flex:1 1 auto;justify-content:center;font-size:.82rem;padding:9px 11px}}
/* The overview's three answers to "what is waiting on me". A tile with zero on
   it is still shown, quietly: "nothing to quote" is information, and a tile
   that disappears when empty makes the row jump about between visits. */
.spcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:4px}
.spcard{display:flex;flex-direction:column;gap:3px;text-decoration:none;background:var(--paper-2,#F7FAFC);
  border:1px solid var(--line);border-radius:12px;padding:14px 16px;transition:border-color .15s,box-shadow .15s}
.spcard:hover{border-color:var(--blue,#1F5FD1);box-shadow:0 8px 20px -14px rgba(10,27,61,.25)}
.spcard-n{font-size:1.7rem;font-weight:800;line-height:1.1;color:var(--slate-2)}
.spcard.hot{background:#FFFBF2;border-color:#F2C960}
.spcard.hot .spcard-n{color:#8A4B00}
.spcard-l{font-size:.88rem;font-weight:700;color:var(--ink)}
.spcard-w{font-size:.76rem;color:var(--slate-2);line-height:1.5}

/* ── pass 77 · government-first ─────────────────────────────────────────
   Credentials band under the hero, the four government engagement cards, the
   tier footnote, and the shared blocks used by /government.php,
   /oem-partners.php and /credentials.php. */
.cred-band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cred-inner{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding-top:14px;padding-bottom:14px}
.cred{display:flex;flex-direction:column;gap:2px;min-width:0}
.cred .k{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-2);font-weight:600}
.cred .v{font-size:.86rem;color:var(--ink);overflow-wrap:anywhere}
.cred-link{margin-left:auto;font-size:.86rem;font-weight:600;color:var(--blue-strong);white-space:nowrap}
@media(max-width:700px){.cred-inner{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}.cred-link{margin-left:0;grid-column:1 / -1}}
.gov-home{padding-top:44px}
.gov-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1020px){.gov-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.gov-grid{grid-template-columns:1fr}}
.gov-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 20px 18px;display:flex;flex-direction:column;gap:8px}
.gov-card h3{font-size:1.05rem;margin:0}
.gov-card p{margin:0;color:var(--slate);font-size:.92rem;line-height:1.55}
.gov-card > a{margin-top:auto;padding-top:6px;font-weight:600;font-size:.88rem;color:var(--blue-strong)}
.gov-n{font-size:.74rem;color:var(--blue-strong);font-weight:600}
.tier-note{margin:14px 0 0;font-size:.86rem;color:var(--slate-2)}
.gv-sec{padding:34px 0}
.gv-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:820px){.gv-two{grid-template-columns:1fr}}
.gv-box{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px}
.gv-box h3{margin:0 0 8px;font-size:1.08rem}
.gv-box p,.gv-box li{color:var(--slate);font-size:.93rem;line-height:1.6}
.gv-box ul{margin:8px 0 0;padding-left:18px}
.gv-box li{margin:3px 0}
.gv-tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--blue-wash);color:var(--blue-strong);margin-bottom:8px}
.gv-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;font-size:.92rem}
.gv-table th,.gv-table td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.gv-table th{width:34%;color:var(--slate);font-weight:600;background:var(--paper)}
.gv-table tr:last-child th,.gv-table tr:last-child td{border-bottom:0}
@media(max-width:560px){.gv-table th,.gv-table td{display:block;width:auto}.gv-table th{border-bottom:0;padding-bottom:2px}}
.gv-note{font-size:.86rem;color:var(--slate-2);margin-top:12px}
.brand-gov-note{margin:14px 0 0;padding:10px 14px;border:1px solid var(--amber);background:var(--amber-wash);border-radius:var(--r-md);font-size:.88rem;color:#7A5208}
.ind-cats a{font-size:.66rem;background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:2px 7px;color:var(--slate-2);text-decoration:none}.ind-cats a:hover{color:var(--blue-strong);border-color:var(--blue-strong)}
/* pass 77 · the header carries "OEM partners" now; keep every label on one line
   and tighten the gap between the desktop and phone breakpoints. */
.nav a{white-space:nowrap}
@media(min-width:921px) and (max-width:1180px){.nav{gap:16px}.nav a{font-size:.86rem}}
/* pass 78 · /private-buyers.php */
.pb-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:start}
@media(max-width:900px){.pb-split{grid-template-columns:1fr}}
.pb-list{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:12px}
.pb-list li{color:var(--slate);font-size:.94rem;line-height:1.6;padding-left:14px;border-left:2px solid var(--line)}
.pb-list b{color:var(--ink)}
@media(min-width:1021px){.pb-grid3{grid-template-columns:repeat(3,1fr)}}
.pb-dom{text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.pb-dom:hover{border-color:var(--blue-strong);transform:translateY(-2px)}
.pb-more{margin-top:auto;padding-top:6px;font-weight:600;font-size:.86rem;color:var(--blue-strong)}
/* pass 78 · seven section links plus Register/Login between 921px and 1100px:
   tighter spacing, a smaller button, and "How it works" (also in the footer
   and the legal row) steps out of the header below 1040px. */
@media(min-width:921px) and (max-width:1100px){.nav{gap:11px}.nav a{font-size:.8rem}.hdr .btn-cta.cta{padding-left:14px;padding-right:14px;font-size:.84rem}}
@media(min-width:921px) and (max-width:1040px){.hdr .nav a[href="/how-it-works.php"]{display:none}}
/* pass 79 · mobile action bar (assets/nx-conv.js) and WhatsApp price buttons */
.nx-mbar{display:none}
@media(max-width:820px){
  .nx-mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(11,31,58,.08)}
  .nx-mbar a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px;border-radius:10px;font-weight:700;font-size:.92rem;text-decoration:none}
  .nx-mbar-wa{background:#1FAF55;color:#fff}
  .nx-mbar-rfq{background:var(--blue-strong);color:#fff}
  html.has-mbar body{padding-bottom:66px}
  html.has-mbar .wa{display:none}
  html.has-mbar .nx-basket-fab{bottom:78px}
}
.btn-wa{display:inline-flex;align-items:center;gap:7px;background:#1FAF55;color:#fff;border:1px solid #1FAF55}
.btn-wa:hover{background:#18964A;color:#fff}
/* pass 79 · FAQ blocks, named contact, homepage bid box and buyer tiles */
.nx-faq{display:flex;flex-direction:column;gap:10px}
.nx-faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:14px 18px}
.nx-faq summary{cursor:pointer;font-weight:650;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:12px}
.nx-faq summary::-webkit-details-marker{display:none}
.nx-faq summary::after{content:"+";color:var(--blue-strong);font-weight:700}
.nx-faq details[open] summary::after{content:"\2013"}
.nx-faq details p{margin:10px 0 0;color:var(--slate);line-height:1.6;font-size:.94rem}
.gv-contact{margin-top:16px}
.gv-contact-lines{font-weight:600}
.gv-contact-lines a{color:var(--blue-strong)}
.bid-box{display:flex;gap:8px;margin-top:18px;max-width:560px}
.bid-box input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font:inherit;font-family:var(--mono);font-size:.9rem;background:#fff}
.bid-box button{white-space:nowrap}
@media(max-width:520px){.bid-box{flex-direction:column}}
.buyer-tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){.buyer-tiles{grid-template-columns:1fr}}
.buyer-tile{display:flex;flex-direction:column;gap:8px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.buyer-tile:hover{border-color:var(--blue-strong);transform:translateY(-2px)}
.buyer-tile h3{margin:0;font-size:1.15rem}
.buyer-tile p{margin:0;color:var(--slate);font-size:.93rem;line-height:1.55}
.buyer-tile .go{margin-top:auto;padding-top:6px;font-weight:700;color:var(--blue-strong);font-size:.9rem}
.founder{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px}
.founder-mark{width:72px;height:72px;border-radius:50%;background:var(--gradient-primary);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.5rem}
.founder h3{margin:0 0 4px;font-size:1.1rem}
.founder p{margin:0;color:var(--slate);font-size:.93rem;line-height:1.6}
.founder .links{margin-top:8px;font-weight:600;font-size:.9rem}
.founder .links a{color:var(--blue-strong);margin-right:14px}
@media(max-width:520px){.founder{grid-template-columns:1fr}}
.done-next{margin-top:18px;display:grid;gap:10px;max-width:640px}
.done-next div{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:12px 16px;color:var(--slate);font-size:.93rem}
.done-next b{color:var(--ink)}
.pb-split > *{min-width:0}.gv-contact .btn{white-space:normal;text-align:center}
.buyer-tile .gv-tag{align-self:flex-start}
.hero h1.h1-long{font-size:clamp(2.3rem,4.7vw,3.55rem)}
.nw{white-space:nowrap}

/* ═══ FOOTER THAT READS AS A FOOTER (pass 120) ═══
   The footer shared the page's pale background, so it read as one more content
   section. It is now a dark navy band, clearly apart from the page: a gradient
   rule on top, light text, the logo on its own white chip. Scoped to
   footer.foot — the category cards on the home page also use a .foot class. */
footer.foot{position:relative;background:#0B1628;background:linear-gradient(180deg,#0E1B33 0%,#0A1426 100%);
  color:#C3CEDF;border-top:0;padding:60px 0 34px;margin-top:48px}
footer.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,#1F5FD1,#7C3AED,#0891B2,#16A34A)}
footer.foot .foot-logo{background:#fff;border-radius:10px;padding:6px 10px;height:52px;box-sizing:border-box}
footer.foot .col h5{color:#7F93B2}
footer.foot .col a{color:#D5DEEB}
footer.foot .col a:hover{color:#fff}
footer.foot .about p{color:#9FB0C8}
footer.foot .foot-addr{color:#8FA2BF}
footer.foot .foot-legal{border-top-color:rgba(255,255,255,.10)}
footer.foot .foot-legal a{color:#9DB8E8}
footer.foot .foot-legal a:hover{color:#fff}
footer.foot .foot-bottom{border-top-color:rgba(255,255,255,.10);color:#8FA2BF}
footer.foot .foot-parent{color:#fff;border-bottom-color:rgba(255,255,255,.35)}
footer.foot .foot-parent:hover{border-bottom-color:#fff}
footer.foot .foot-legalid > span{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#A9B8CE}
footer.foot a:focus-visible{outline:2px solid #7FB0FF;outline-offset:2px}
footer.foot .about p *{color:inherit}
footer.foot .foot-addr{color:#A9B8CE}
footer.foot .foot-legalid{border-top-color:rgba(255,255,255,.10)}
footer.foot .foot-bottom{color:#A3B3C9}
footer.foot .foot-addr > *,footer.foot .foot-bottom > span,footer.foot .foot-entity,footer.foot .foot-copy,footer.foot .foot-tag{color:#A9B8CE}

/* ═══ COMPACT FOOTER (pass 121) ═══
   The dark footer (pass 120) kept the tall light-theme spacing and filled two
   thirds of a laptop screen. Same content, tighter: less padding, smaller type,
   the Platform links in two short columns, and the legal / entity / ID rows
   packed together. Styling only — the markup the footer checks read is unchanged. */
footer.foot{padding:30px 0 16px;margin-top:28px}
footer.foot .foot-grid{grid-template-columns:1.25fr .9fr 1.2fr 1fr;gap:18px 28px}
footer.foot .foot-logo{height:40px;padding:4px 8px;border-radius:8px}
footer.foot .about p{font-size:.78rem;line-height:1.5;margin-top:8px;max-width:300px}
footer.foot .col h5{font-size:.62rem;margin-bottom:6px}
footer.foot .col a{font-size:.8rem;padding:2px 0;line-height:1.45}
/* Platform: seven links in two columns instead of one tall one */
footer.foot .foot-grid > .col:nth-child(3){display:grid;grid-template-columns:repeat(2,max-content);column-gap:22px;align-content:start}
footer.foot .foot-grid > .col:nth-child(3) h5{grid-column:1 / -1}
footer.foot .foot-addr{font-size:.74rem;line-height:1.45;padding-top:4px;gap:0}
footer.foot .foot-legal{margin-top:14px;padding:10px 0 0;gap:6px 16px}
footer.foot .foot-legal a{font-size:.72rem}
footer.foot .foot-bottom{margin-top:10px;padding-top:10px;gap:6px 20px;font-size:.72rem;line-height:1.45}
footer.foot .foot-legalid{margin-top:8px;padding-top:8px;gap:6px}
footer.foot .foot-legalid > span{font-size:.64rem;padding:2px 7px}
@media(max-width:820px){
  footer.foot .foot-grid{grid-template-columns:1fr 1fr;gap:16px 20px}
  footer.foot .foot-grid > .about{grid-column:1 / -1}
  footer.foot .about p{max-width:none}
}
@media(max-width:520px){
  footer.foot{padding:24px 0 16px}
  footer.foot .foot-grid{grid-template-columns:1fr 1fr}
  footer.foot .foot-grid > .col:nth-child(3){grid-template-columns:1fr}
  footer.foot .foot-grid > .col:nth-child(4){grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;column-gap:20px;align-content:start}
  footer.foot .foot-grid > .col:nth-child(4) h5,footer.foot .foot-grid > .col:nth-child(4) .foot-addr{grid-column:1 / -1}
  footer.foot .about p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  footer.foot .foot-legalid{grid-template-columns:repeat(2,1fr)}
  footer.foot .foot-legal{justify-content:flex-start}
}
@media(max-width:700px){footer.foot{padding-bottom:96px}}   /* room for the phone's sticky WhatsApp / RFQ bar */

/* pass 146: whole RFQ row is clickable */
tr.rfq-row{cursor:pointer}
tr.rfq-row:hover>td{box-shadow:inset 0 0 0 9999px rgba(31,95,209,.04)}
tr.rfq-row a,tr.rfq-row button,tr.rfq-row input,tr.rfq-row select,tr.rfq-row label{cursor:auto}
tr.rfq-row a,tr.rfq-row button,tr.rfq-row select,tr.rfq-row label{cursor:pointer}
/* DEPLOYMENT AUDIT (pass 150): nothing pushes a phone page sideways.
   A long option label or a long button caption wraps inside the screen
   instead of widening the page. */
select{max-width:100%}
@media(max-width:600px){.btn{white-space:normal;max-width:100%;text-align:center;justify-content:center}}
/* Buyer's counter-offer form (my-quote.php): three columns on a desk, one on a phone. */
.mq-counter{display:grid;grid-template-columns:180px minmax(0,1fr) auto;gap:10px;align-items:end}
.mq-counter input{min-width:0;width:100%;box-sizing:border-box}
@media(max-width:600px){.mq-counter{grid-template-columns:minmax(0,1fr)}}

/* pass 183: THE REGISTRATION CHIPS PUSHED A PHONE PAGE SIDEWAYS.
   Below 520px the compact footer forced them into two fixed columns
   (repeat(2,1fr)) while each chip was white-space:nowrap — so on a narrow
   phone, or with the phone's text size raised, "Udyam UDYAM-HR-07-0034799"
   was wider than its column, the grid grew past the screen and the whole page
   scrolled sideways with the chip cut off at the edge. Up to a tablet the
   chips now flow and wrap to the width there is, and a chip that still does
   not fit breaks inside itself rather than widening the page. */
@media(max-width:900px){
  footer.foot .foot-legalid{display:flex;flex-wrap:wrap;gap:6px 8px;justify-content:flex-start;min-width:0;max-width:100%}
  footer.foot .foot-legalid > span{white-space:normal;overflow-wrap:anywhere;max-width:100%;min-width:0;text-align:left;box-sizing:border-box}
}
footer.foot,footer.foot .foot-bottom{max-width:100%;min-width:0}
/* pass 183: the founder card's text column was 1fr, which cannot shrink below
   its longest unbreakable line (the phone / e-mail / PDF links), so at 340px
   the card ran 19px past the screen. minmax(0,1fr) lets it shrink and the
   links wrap. */
.founder{grid-template-columns:auto minmax(0,1fr)}
.founder .links{display:flex;flex-wrap:wrap;gap:4px 14px}
.founder .links a{margin-right:0;overflow-wrap:anywhere}
.founder h3,.founder p{overflow-wrap:anywhere}
@media(max-width:520px){.founder{grid-template-columns:minmax(0,1fr);padding:18px 16px}}
/* pass 183: with the phone's text size raised, 1fr columns that cannot shrink
   below their longest word (an e-mail address, "Mechanical") still widened a
   360px page by a few pixels. Every phone grid here shrinks and its words wrap. */
@media(max-width:600px){
  .amc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .amc,.amc h4,.amc p{min-width:0;overflow-wrap:anywhere}
}
@media(max-width:820px){
  footer.foot .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  footer.foot .foot-grid > .col,footer.foot .foot-grid > .about{min-width:0}
  footer.foot .col a,footer.foot .foot-addr span,footer.foot .col h5{overflow-wrap:anywhere}
}
@media(max-width:520px){
  footer.foot .foot-grid > .col:nth-child(4){grid-template-columns:repeat(2,minmax(0,1fr))}
  footer.foot .foot-grid > .col:nth-child(3){grid-template-columns:minmax(0,1fr)}
  .nx-mbar{max-width:100%;box-sizing:border-box}
}
@media(max-width:700px){
  /* pass 183: the two buttons of the phone's bottom bar could not shrink below
     their label at a raised text size, and a phone browser widens the whole
     page to fit a fixed bar that overflows. They now share the width. */
  .nx-mbar a{flex:1 1 0;min-width:0;padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nx-mbar a svg{flex:0 0 auto}
}
/* pass 183: "procurement," at 2.3rem, with the phone's text size raised, was
   wider than a 360px screen. On a phone the headline scales with the screen
   and may break inside a word as a last resort. */
@media(max-width:420px){
  .hero h1.h1-long{font-size:clamp(1.7rem,8.4vw,2.3rem);overflow-wrap:break-word;hyphens:auto}
  .hero h1{overflow-wrap:break-word}
}
/* pass 183: on a narrow phone "Reach us" goes to one column, so an e-mail
   address is never broken in the middle ("sales@infrecx.co / m"). */
@media(max-width:420px){
  footer.foot .foot-grid > .col:nth-child(4){grid-template-columns:minmax(0,1fr)}
  footer.foot .foot-grid > .col:nth-child(4) a[href^="mailto:"]{overflow-wrap:normal;word-break:normal}
}

/* pass 184: THINGS THAT MUST STAY ON ONE LINE.
   A phone number, a short button label or a filter chip broken across two
   lines reads as two things. Phone links never wrap; on a phone the founder
   card lists its three links one under the other; call-to-action buttons go
   full width on a narrow screen so their label has room; filter chips keep
   their label and count together. */
a[href^="tel:"]{white-space:nowrap}
.founder .links a{overflow-wrap:normal;white-space:nowrap}
@media(max-width:520px){
  .founder .links{flex-direction:column;align-items:flex-start;gap:6px}
  .founder .links a{max-width:100%;overflow:hidden;text-overflow:ellipsis}
}
.cat-filter,.clchip,.stchip{white-space:nowrap}
@media(max-width:480px){
  .hero-cta,.cta-band .hero-cta{display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .hero-cta .btn{width:100%;box-sizing:border-box}
}
@media(max-width:700px){
  .nx-mbar{overflow:hidden}
  .nx-mbar a{font-size:.88rem}
}
@media(max-width:380px){ .nx-mbar a{font-size:.82rem;gap:5px} }
/* pass 184: an FAQ question sat beside its "+" in a flex row whose text could
   not shrink below its longest word, so on a narrow phone with larger text the
   Government FAQ ran 11px past the screen. The question now takes the
   remaining width and wraps. */
.nx-faq summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;overflow-wrap:break-word}
.nx-faq details{min-width:0}
/* pass 184: the call-to-action panel's buttons sat in a 250px column on a
   phone, so "See open requirements" broke over three lines. On a phone the
   column takes the full width and the buttons stack at full width. */
@media(max-width:600px){
  .acts{width:100%;max-width:100%;flex:1 1 100%;display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .acts .btn{width:100%;box-sizing:border-box}
}
@media(max-width:420px){ .btn{padding-left:14px;padding-right:14px} }