/* ============================================================
   iSupply Portal (prototype)  |  isupply.ae
   Shared stylesheet for the clickable design preview.
   Same brand tokens as the marketing site, tuned as an app:
   teal primary, amber = buyer accent, olive = supplier accent.
   ============================================================ */

/* ---------- fonts (local, offline) ---------- */
@font-face{
  font-family:"Poppins"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/Poppins-600-latin.woff2") format("woff2");
}
@font-face{
  font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/Poppins-700-latin.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:100 700; font-display:swap;
  src:url("../fonts/IBMPlexSans-var-latin.woff2") format("woff2-variations"),
      url("../fonts/IBMPlexSans-var-latin.woff2") format("woff2");
}

/* ---------- tokens ---------- */
:root{
  --teal:#008080;
  --teal-ink:#045F5F;
  --teal-deep:#053B3B;
  --wave:#7FBFBF;
  --mint:#A6D2D2;
  --mint-soft:#D6EAEA;
  --mint-mist:#EDF6F5;
  --paper:#FBFDFD;
  --white:#FFFFFF;
  --ink:#17201F;
  --ink-soft:#42504E;
  --line:#DCE9E8;
  --amber:#FFBD59;
  --amber-ink:#6F4708;
  --amber-mist:#FFF4E2;
  --olive:#868877;
  --olive-ink:#5C5E4F;
  --olive-mist:#F0F0EB;
  --danger:#B4423C;
  --danger-mist:#FBEDEC;
  --field-blue:#4C7CB8;      /* mockup placeholder blue */
  --verify-blue:#2F6DC6;     /* mockup shield-check blue */
  --skybar:#E8EFF4;          /* light blue-grey top bar */
  --font-display:"Poppins",sans-serif;
  --font-body:"IBM Plex Sans",sans-serif;
  --shadow-sm:0 1px 2px rgba(5,59,59,.06),0 2px 8px rgba(5,59,59,.05);
  --shadow-md:0 2px 6px rgba(5,59,59,.07),0 12px 32px rgba(5,59,59,.10);
  --shadow-lg:0 4px 10px rgba(5,59,59,.08),0 24px 64px rgba(5,59,59,.14);
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:99px;
  --wrap:1160px;
  --ease:cubic-bezier(.22,.9,.3,1);
  --rail-w:190px;
  --banner-h:36px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:var(--paper); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip; padding-block-end:var(--banner-h);
  min-height:100vh;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--teal); text-decoration:none}
a:hover{color:var(--teal-ink)}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; line-height:1.2; margin:0 0 .45em; color:var(--ink); letter-spacing:-.01em}
h1{font-size:clamp(1.5rem,2.6vw,2rem)}
h2{font-size:clamp(1.25rem,2vw,1.55rem)}
h3{font-size:1.08rem}
p{margin:.3em 0 .9em}
strong{font-weight:600}
::selection{background:var(--mint-soft); color:var(--teal-deep)}
svg.ic{width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* ---------- accessibility ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
:focus-visible{outline:3px solid var(--amber); outline-offset:2px; border-radius:4px}
.siderail :focus-visible{outline-color:var(--amber)}
.skip{
  position:absolute; inset-inline-start:-999px; top:0; z-index:400;
  background:var(--teal); color:#fff; padding:10px 18px; border-radius:0 0 var(--r-sm) var(--r-sm);
  font-family:var(--font-display); font-weight:600;
}
.skip:focus{inset-inline-start:12px; color:#fff}

/* ---------- prototype banner (always visible) ---------- */
.proto-note{
  position:fixed; inset-inline:0; bottom:0; z-index:350; height:var(--banner-h);
  display:flex; align-items:center; justify-content:center; gap:.6em;
  background:var(--teal-deep); color:#DDEDEC; font-size:.78rem; letter-spacing:.04em;
  padding-inline:14px; text-align:center;
}
.proto-note strong{color:#fff; font-family:var(--font-display); font-weight:600; letter-spacing:.1em}
.proto-note .dotr{width:9px; height:9px; border-radius:50%; border:2px solid var(--amber); flex-shrink:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-display); font-weight:600; font-size:.95rem;
  padding:.7em 1.9em; border-radius:var(--r-pill); border:2px solid transparent;
  cursor:pointer; text-align:center; background:none;
  transition:transform .18s var(--ease), box-shadow .18s, background .2s, color .2s, border-color .2s;
}
.btn:active{transform:scale(.97)}
.btn--teal{background:var(--teal); border-color:var(--teal); color:#fff; box-shadow:0 6px 18px rgba(0,128,128,.26)}
.btn--teal:hover{background:var(--teal-ink); border-color:var(--teal-ink); color:#fff; transform:translateY(-1px)}
.btn--outline{border-color:var(--teal); color:var(--teal); background:#fff}
.btn--outline:hover{background:var(--mint-mist); transform:translateY(-1px)}
.btn--amber{background:var(--amber); border-color:var(--amber); color:var(--amber-ink); box-shadow:0 6px 18px rgba(255,189,89,.38)}
.btn--amber:hover{background:#F5AE3D; border-color:#F5AE3D; transform:translateY(-1px)}
.btn--olive{border-color:var(--olive); color:var(--olive-ink); background:#fff}
.btn--olive:hover{background:var(--olive-mist); transform:translateY(-1px)}
.btn--sm{font-size:.83rem; padding:.5em 1.2em}
.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.45; cursor:not-allowed; box-shadow:none; transform:none;
}
.linklike{
  background:none; border:0; padding:0; cursor:pointer; font:inherit;
  color:var(--teal); font-weight:600; text-decoration:underline; text-underline-offset:3px;
}
.linklike:hover{color:var(--teal-ink)}

/* ============================================================
   ACCOUNT CHOOSER + WIZARD CHROME (deep teal side rail)
   ============================================================ */
.shell{display:grid; grid-template-columns:var(--rail-w) 1fr; min-height:calc(100vh - var(--banner-h))}

.siderail{
  background:linear-gradient(178deg,var(--teal-deep) 0%,#032C2C 100%);
  color:var(--mint-soft); display:flex; flex-direction:column; align-items:center;
  padding:30px 14px 26px; position:relative; overflow:hidden;
}
.siderail::after{ /* faint ring motif */
  content:""; position:absolute; top:32%; inset-inline-start:-70px; width:200px; height:200px;
  border:1.5px solid rgba(255,255,255,.08); border-radius:50%;
  box-shadow:inset 0 0 0 14px rgba(255,255,255,.03); pointer-events:none;
}
.siderail__brand{display:flex; flex-direction:column; align-items:center; gap:2px; z-index:1}
.siderail__brand img{width:52px; height:52px; border-radius:50%; box-shadow:0 0 0 3px rgba(255,255,255,.9)}
.siderail__brand .upply{
  font-family:var(--font-display); font-weight:600; font-size:1rem; color:#fff;
  letter-spacing:.14em; margin-top:6px;
}
.siderail__contact{margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:14px; z-index:1}
.siderail__contact .vlabel{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--font-display); font-weight:600; font-size:.62rem; letter-spacing:.34em;
  color:var(--mint); text-transform:uppercase; margin-block-end:4px;
}
.siderail__contact a{color:var(--mint-soft); font-size:.72rem; letter-spacing:.02em; text-align:center; line-height:1.5}
.siderail__contact a:hover{color:#fff}
.siderail__soc{display:flex; gap:8px}
.siderail__soc span{
  width:30px; height:30px; border-radius:50%; border:1.5px solid rgba(255,255,255,.35);
  display:grid; place-items:center; color:var(--mint-soft);
}
.siderail__soc svg{width:14px; height:14px}
.siderail__247{font-size:.62rem; letter-spacing:.14em; color:var(--wave); text-transform:uppercase; font-family:var(--font-display); font-weight:600}

.mainpane{display:flex; flex-direction:column; min-width:0}
.skybar{
  background:var(--skybar); border-block-end:1px solid #D6E1E8;
  display:flex; align-items:center; gap:16px; padding:14px clamp(18px,3.5vw,40px); min-height:64px;
}
.skybar h1{margin:0; font-size:clamp(1.15rem,2vw,1.45rem); color:var(--ink)}
.skybar .crumb{font-family:var(--font-display); font-weight:600; font-size:.85rem; color:var(--teal-ink); background:#fff; border:1px solid var(--line); padding:.3em 1em; border-radius:var(--r-pill)}
.burger{
  display:block; background:none; border:0; padding:8px; cursor:pointer; border-radius:8px; opacity:.85;
}
.burger span{display:block; width:22px; height:2.5px; background:var(--teal-deep); margin:4.5px 0; border-radius:2px}
.shell.rail-hidden{grid-template-columns:0 1fr}
.shell.rail-hidden .siderail{display:none}

.pane-body{flex:1; padding:clamp(22px,4vw,48px) clamp(18px,4vw,52px); position:relative}

/* ---------- chooser ---------- */
.choices{display:grid; grid-template-columns:repeat(2,minmax(0,320px)); gap:clamp(20px,3.5vw,44px); justify-content:center; margin-block-start:clamp(10px,3vh,34px)}
.choice{
  position:relative; background:#fff; border:1.5px solid var(--line); border-radius:var(--r-lg);
  padding:34px 26px 26px; text-align:center; cursor:pointer; width:100%;
  font:inherit; color:var(--ink);
  transition:transform .22s var(--ease), box-shadow .22s, border-color .22s;
  box-shadow:var(--shadow-sm);
}
.choice:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--mint)}
.choice.expanded,.choice:focus-within{border-color:var(--teal); box-shadow:var(--shadow-md)}
.choice__go{display:block; width:100%; background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer}
.choice__go::after{content:""; position:absolute; inset:0; border-radius:var(--r-lg)}
.hint{z-index:2}
.choice__art{display:block; width:120px; height:96px; margin-inline:auto; margin-block-end:14px}
.choice__label{
  font-family:var(--font-display); font-weight:700; font-size:1.05rem; letter-spacing:.16em;
  color:var(--teal-deep); text-transform:uppercase; display:block;
}
.choice__sub{font-size:.83rem; color:var(--ink-soft); margin-top:4px; display:block}
.hint{
  position:absolute; top:12px; inset-inline-end:12px;
  width:24px; height:24px; border-radius:50%; border:2px solid var(--amber);
  background:var(--amber-mist); color:var(--amber-ink);
  font-family:var(--font-display); font-weight:700; font-size:.8rem; line-height:1;
  display:grid; place-items:center; cursor:help; border-style:solid;
}
.hint__tip{
  position:absolute; top:calc(100% + 8px); inset-inline-end:0; width:230px; z-index:20;
  background:var(--teal-deep); color:var(--mint-soft); font-size:.76rem; line-height:1.5;
  font-family:var(--font-body); font-weight:400; text-align:start; letter-spacing:0; text-transform:none;
  padding:10px 13px; border-radius:10px; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s;
}
.hint:hover .hint__tip,.hint:focus .hint__tip,.hint:focus-within .hint__tip{opacity:1; visibility:visible}
.subchoices{
  grid-column:1/-1; display:none; grid-template-columns:repeat(2,minmax(0,250px)); gap:20px; justify-content:center;
  margin-block-start:4px;
}
.subchoices.on{display:grid}
.subchoice{
  background:var(--amber-mist); border:1.5px solid var(--amber); border-radius:var(--r-md);
  padding:20px 18px; text-align:center; cursor:pointer; font:inherit;
  transition:transform .2s var(--ease), box-shadow .2s;
}
.subchoice:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.subchoice .choice__label{font-size:.9rem; color:var(--amber-ink); letter-spacing:.14em}
.subchoice svg{width:44px; height:44px; margin-inline:auto; margin-block-end:8px; color:var(--amber-ink)}
.skipahead{margin-block-start:clamp(30px,6vh,60px); text-align:center; font-size:.85rem; color:var(--ink-soft)}
.skipahead a{font-weight:600}

/* ============================================================
   WIZARD
   ============================================================ */
.stepper{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;
  max-width:760px; margin:0 auto clamp(26px,4vh,42px); padding:0; counter-reset:wstep;
}
.stepper::before{
  content:""; position:absolute; top:26px; inset-inline:12.5%; height:2px;
  background:repeating-linear-gradient(90deg,var(--mint) 0 9px,transparent 9px 16px);
}
.stepper li{list-style:none; text-align:center; position:relative; padding-inline:6px}
.stepper .dot{
  counter-increment:wstep; width:34px; height:34px; margin:9px auto; border-radius:50%;
  background:#fff; border:2px solid var(--mint); color:var(--ink-soft);
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:.85rem;
  position:relative; z-index:1; transition:all .3s var(--ease);
}
.stepper .dot::after{content:counter(wstep)}
.stepper li[aria-current="step"] .dot{
  width:52px; height:52px; margin:0 auto; background:var(--mint-soft); border-color:var(--teal);
  color:var(--teal-deep); box-shadow:0 0 0 5px var(--mint-mist), var(--shadow-sm); font-size:1.05rem;
}
.stepper li.done .dot{background:var(--teal); border-color:var(--teal); color:#fff}
.stepper li.done .dot::after{content:"\2713"}
.stepper .slabel{font-family:var(--font-display); font-weight:600; font-size:.78rem; color:var(--ink-soft); display:block; margin-top:6px}
.stepper li[aria-current="step"] .slabel{color:var(--teal-deep)}

.wstep{max-width:880px; margin-inline:auto}
.wstep[hidden]{display:none}
.wstep__title{
  font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--teal-deep);
  margin-block-end:18px; display:flex; align-items:center; gap:.6em;
}
.wstep__title .dotr{width:12px; height:12px; border-radius:50%; border:2px solid var(--teal); box-shadow:inset 0 0 0 2px #fff, inset 0 0 0 4px var(--teal)}

/* ---------- pill fields ---------- */
.fgrid{display:grid; gap:16px 30px; grid-template-columns:1fr; max-width:460px}
.fgrid.two{grid-template-columns:1fr 1fr; max-width:none}
.field{display:grid; grid-template-columns:14px 1fr; gap:0 8px; align-items:center; position:relative}
.field .star{color:var(--danger); font-weight:700; font-size:1.05rem; line-height:1; text-align:center}
.field .star:empty{visibility:hidden}
.field--optional .star{visibility:hidden}
.pillwrap{position:relative; display:flex; align-items:center; gap:8px; grid-column:2}
.pillinner{position:relative; flex:1; min-width:0; display:block}
.pill-in{
  width:100%; border:2px solid var(--teal); border-radius:var(--r-pill);
  padding:.68em 2.7em .68em 1.25em; font:inherit; font-size:.93rem; color:var(--ink);
  background:#fff; transition:border-color .2s, box-shadow .2s;
}
.pill-in::placeholder{color:var(--field-blue); opacity:1}
.pill-in:focus{outline:none; border-color:var(--teal-ink); box-shadow:0 0 0 4px var(--mint-soft)}
.pill-in[disabled]{background:var(--olive-mist); border-color:var(--mint); color:var(--ink-soft); cursor:not-allowed}
.pill-in[aria-invalid="true"]{border-color:var(--danger); box-shadow:0 0 0 4px var(--danger-mist)}
select.pill-in{
  appearance:none; padding-inline-end:2.7em; cursor:pointer; color:var(--field-blue);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23008080' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1.1em center;
}
select.pill-in.picked{color:var(--ink)}
input[type="date"].pill-in{color:var(--field-blue)}
input[type="date"].pill-in.picked{color:var(--ink)}
.pill-date{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23008080' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1.1em center;
}
input[type="date"].pill-date::-webkit-calendar-picker-indicator{opacity:0}
textarea.pill-in{border-radius:var(--r-lg); min-height:110px; resize:vertical; padding:.8em 1.25em}
.f-ic{
  position:absolute; inset-inline-end:1em; top:50%; translate:0 -50%;
  width:18px; height:18px; color:var(--teal); pointer-events:none;
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
select.pill-in ~ .f-ic, .pillwrap--noic .f-ic{display:none}
.verify{
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  border:2px solid var(--verify-blue); background:#fff; color:var(--verify-blue);
  display:grid; place-items:center; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.verify svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.verify:hover{background:#EBF2FB}
.verify.ok{background:var(--teal); border-color:var(--teal); color:#fff}
.ferr{
  grid-column:2; margin:4px 0 0 14px; font-size:.76rem; color:var(--danger); font-weight:600;
}
.ferr[hidden]{display:none}
.fnote{grid-column:2; margin:4px 0 0 14px; font-size:.74rem; color:var(--teal-ink)}
.trnpair{display:grid; grid-template-columns:120px 1fr; gap:10px; grid-column:2}
.trnpair .pillwrap{grid-column:auto}

.divider{
  display:flex; align-items:center; gap:14px; margin:26px 0 16px;
  font-family:var(--font-display); font-weight:600; font-size:.95rem; color:var(--teal-deep);
}
.divider::before,.divider::after{content:""; height:1.5px; background:var(--mint-soft); flex:1}
.divider::before{max-width:26px}

.wiz-actions{
  display:flex; justify-content:flex-end; gap:12px; margin-block-start:30px;
  max-width:880px; margin-inline:auto;
}
.wiz-actions .btn--back{border-color:var(--olive); color:var(--olive-ink); background:#fff}
.wiz-actions .btn--back:hover{background:var(--olive-mist)}

/* ---------- uploads ---------- */
.utiles{display:grid; grid-template-columns:repeat(3,minmax(0,220px)); gap:clamp(16px,3vw,34px); justify-content:start}
.utile{position:relative; text-align:center}
.utile__box{
  width:100%; aspect-ratio:1/.92; border:2.5px dashed var(--wave); border-radius:var(--r-md);
  background:var(--mint-mist); display:grid; place-items:center; cursor:pointer; padding:18px;
  transition:border-color .2s, background .2s, transform .2s var(--ease);
  font:inherit; color:var(--teal);
}
.utile__box:hover{border-color:var(--teal); background:#E4F1F0; transform:translateY(-2px)}
.utile__box svg{width:64px; height:64px}
.utile.done .utile__box{border-style:solid; border-color:var(--teal); background:#fff}
.utile__check{
  position:absolute; top:-10px; inset-inline-end:-10px; width:30px; height:30px; border-radius:50%;
  background:var(--teal); color:#fff; display:none; place-items:center; box-shadow:var(--shadow-sm);
}
.utile.done .utile__check{display:grid}
.utile__check svg{width:15px; height:15px; fill:none; stroke:#fff; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.utile__name{font-size:.72rem; color:var(--teal-ink); min-height:1.2em; margin-top:6px; display:block; word-break:break-all}
.utile__label{
  display:inline-flex; align-items:center; gap:.45em; margin-top:8px;
  font-family:var(--font-display); font-weight:600; font-size:.85rem; color:var(--teal-deep);
  border:2px solid var(--teal); border-radius:var(--r-pill); padding:.35em 1.3em; background:#fff;
}
.utile__label .star{color:var(--danger)}
.uerr{margin:6px 0 0; font-size:.76rem; color:var(--danger); font-weight:600}
.uerr[hidden]{display:none}

.warnrow{
  display:flex; gap:12px; align-items:flex-start; background:var(--amber-mist);
  border:1px solid #F2D9A8; border-radius:var(--r-md); padding:12px 16px; margin:14px 0 18px;
  font-size:.86rem; color:var(--ink-soft); max-width:880px;
}
.warnrow svg{width:20px; height:20px; flex-shrink:0; color:var(--amber-ink); margin-top:2px}
.warnrow .red{color:var(--danger); font-weight:600}

.catpanels{display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,3vw,30px); max-width:880px}
.catpanel{border:2px solid var(--teal); border-radius:var(--r-lg); background:#fff; overflow:hidden; display:flex; flex-direction:column}
.catpanel h3{
  margin:0; padding:12px 18px; font-size:.92rem; color:var(--teal-deep);
  background:var(--mint-mist); border-block-end:1.5px solid var(--mint-soft);
}
.catpanel__scroll{max-height:238px; overflow:auto; padding:8px 6px}
.catpanel label{
  display:flex; align-items:flex-start; gap:10px; padding:8px 12px; border-radius:10px;
  font-size:.86rem; cursor:pointer; color:var(--ink); line-height:1.4;
}
.catpanel label:hover{background:var(--mint-mist)}
.catpanel input[type="checkbox"]{
  appearance:none; width:18px; height:18px; flex-shrink:0; margin-top:1px;
  border:2px solid var(--teal); border-radius:5px; background:#fff; cursor:pointer;
  display:grid; place-items:center; transition:background .15s;
}
.catpanel input[type="checkbox"]::after{
  content:""; width:9px; height:5px; border-inline-start:2.5px solid #fff; border-block-end:2.5px solid #fff;
  transform:rotate(-45deg) translate(1px,-1px); opacity:0;
}
.catpanel input[type="checkbox"]:checked{background:var(--teal)}
.catpanel input[type="checkbox"]:checked::after{opacity:1}
.catpanel .empty{padding:20px 18px; font-size:.82rem; color:var(--ink-soft)}

/* ---------- terms ---------- */
.terms-box{
  border:2px solid var(--teal); border-radius:var(--r-lg); background:#fff;
  max-height:330px; overflow:auto; padding:22px 26px; max-width:880px;
  font-size:.88rem; color:var(--ink-soft);
}
.terms-box h3{font-size:.98rem; color:var(--teal-deep); margin-block-start:0}
.terms-box ol{margin:0; padding-inline-start:1.3em}
.terms-box li{margin-block:.7em; line-height:1.6}
.agree{
  display:flex; align-items:flex-start; gap:12px; margin:18px 0 0; max-width:880px;
  font-size:.9rem; font-weight:600; color:var(--ink); cursor:pointer;
}
.agree input[type="checkbox"]{
  appearance:none; width:20px; height:20px; flex-shrink:0; margin-top:1px;
  border:2px solid var(--teal); border-radius:5px; background:#fff; cursor:pointer;
  display:grid; place-items:center;
}
.agree input[type="checkbox"]::after{
  content:""; width:10px; height:5px; border-inline-start:2.5px solid #fff; border-block-end:2.5px solid #fff;
  transform:rotate(-45deg) translate(1px,-1px); opacity:0;
}
.agree input[type="checkbox"]:checked{background:var(--teal)}
.agree input[type="checkbox"]:checked::after{opacity:1}

/* ---------- wizard success ---------- */
.wsuccess{text-align:center; max-width:520px; margin:clamp(20px,6vh,60px) auto 0}
.wsuccess__ring{
  width:86px; height:86px; margin:0 auto 18px; border-radius:50%;
  border:3px solid var(--teal); box-shadow:inset 0 0 0 6px #fff, inset 0 0 0 9px var(--mint-soft);
  display:grid; place-items:center; color:var(--teal); animation:pop .5s var(--ease);
}
.wsuccess__ring svg{width:38px; height:38px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
@keyframes pop{from{opacity:0; scale:.8}to{opacity:1; scale:1}}
.wsuccess p{color:var(--ink-soft)}

/* ============================================================
   APP TOP NAV (dashboards)
   ============================================================ */
.portalnav{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px); border-block-end:1px solid var(--line);
}
.portalnav__in{
  max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(14px,3vw,32px);
  display:flex; align-items:center; gap:14px; min-height:66px; flex-wrap:wrap;
}
.portalnav .brand img{width:118px}
.pnav{display:flex; gap:2px; align-items:center}
.pnav a{
  font-family:var(--font-display); font-weight:600; font-size:.88rem; color:var(--ink-soft);
  padding:.5em .75em; border-radius:var(--r-sm); white-space:nowrap; transition:color .2s, background .2s;
}
.pnav a:hover{color:var(--teal); background:var(--mint-mist)}
.pnav a[aria-current="page"]{color:var(--teal)}
.pnav a[aria-current="page"]::after{
  content:""; display:block; height:3px; margin-top:2px; border-radius:2px;
  background:var(--teal); clip-path:polygon(0 30%,100% 0,97% 100%,3% 85%);
}
.portalnav--buyer .pnav a:hover{color:var(--amber-ink); background:var(--amber-mist)}
.portalnav--buyer .pnav a[aria-current="page"]{color:var(--amber-ink)}
.portalnav--buyer .pnav a[aria-current="page"]::after{background:var(--amber)}
.pnav-search{position:relative; margin-inline-start:auto}
.pnav-search input{
  border:1.5px solid var(--line); border-radius:var(--r-pill); background:var(--paper);
  padding:.5em 1em .5em 2.4em; font:inherit; font-size:.85rem; width:180px; color:var(--ink);
  transition:border-color .2s, box-shadow .2s, width .3s var(--ease);
}
.pnav-search input:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--mint-soft); width:220px}
.pnav-search svg{
  position:absolute; inset-inline-start:.85em; top:50%; translate:0 -50%; width:16px; height:16px;
  color:var(--ink-soft); pointer-events:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;
}
.iconbtn{
  position:relative; width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line);
  background:#fff; color:var(--ink-soft); display:grid; place-items:center; cursor:pointer;
  transition:border-color .2s, color .2s;
}
.iconbtn:hover{border-color:var(--teal); color:var(--teal)}
.iconbtn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.iconbtn .reddot{
  position:absolute; top:2px; inset-inline-end:3px; width:9px; height:9px; border-radius:50%;
  background:var(--danger); border:2px solid #fff;
}
.userchip{display:flex; align-items:center; gap:10px}
.userchip__av{
  width:40px; height:40px; border-radius:50%; background:var(--teal); color:#fff;
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:.85rem;
  box-shadow:inset 0 0 0 2px #fff, 0 0 0 2px var(--mint-soft);
}
.portalnav--buyer .userchip__av{background:var(--amber); color:var(--amber-ink); box-shadow:inset 0 0 0 2px #fff, 0 0 0 2px var(--amber-mist)}
.userchip__meta{line-height:1.15; text-align:end}
.userchip__name{font-family:var(--font-display); font-weight:600; font-size:.85rem; display:block}
.userchip__meta a{font-size:.72rem; color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px}
.userchip__meta a:hover{color:var(--danger)}

/* ============================================================
   SUPPLIER DASHBOARD
   ============================================================ */
.body--supplier{
  background:
    radial-gradient(90% 60% at 8% 0%, #FFF3DD 0%, transparent 55%),
    radial-gradient(110% 80% at 100% 12%, #DFF0EE 0%, transparent 60%),
    linear-gradient(165deg, #FDFBF4 0%, #F1F8F7 48%, #E9F3F1 100%);
  background-attachment:fixed;
}
.dashwrap{max-width:1280px; margin-inline:auto; padding:clamp(18px,3vw,34px) clamp(14px,3vw,32px) 40px}
.dashgrid{display:grid; grid-template-columns:1.65fr 1fr; gap:22px; align-items:stretch}
.dcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); padding:clamp(18px,2.5vw,28px); position:relative; overflow:hidden;
}
.dcard--track .art-crane{
  position:absolute; inset-inline-end:14px; top:10px; width:150px; opacity:.9; pointer-events:none;
}
.dcard h2{font-size:1.2rem; color:var(--teal-deep); display:flex; align-items:center; gap:.5em}
.dtabs{display:flex; gap:4px; border-block-end:1.5px solid var(--mint-soft); margin:14px 0 18px; flex-wrap:wrap}
.dtabs button{
  font-family:var(--font-display); font-weight:600; font-size:.82rem; color:var(--ink-soft);
  background:none; border:0; border-block-end:3px solid transparent; padding:.6em 1em; cursor:pointer;
  margin-block-end:-1.5px; transition:color .2s, border-color .2s;
}
.dtabs button[aria-selected="true"]{color:var(--teal); border-color:var(--teal)}
.dtabs button:hover{color:var(--teal-ink)}
.trackrow{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.trackrow .pillwrap{flex:1; min-width:210px}
.trackrow .pill-in{padding-inline-end:1.25em}
.morefilters{font-size:.82rem; font-weight:600; white-space:nowrap}
.trackhint{font-size:.78rem; color:var(--ink-soft); margin:10px 0 0}

/* calendar */
.cal{width:100%}
.cal__head{display:flex; align-items:center; justify-content:space-between; margin-block-end:10px}
.cal__head h2{font-size:1rem; margin:0}
.cal__nav{display:flex; gap:6px}
.cal__nav button{
  width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line); background:#fff;
  color:var(--ink-soft); cursor:pointer; display:grid; place-items:center; font-size:.8rem;
}
.cal__nav button:hover{border-color:var(--teal); color:var(--teal)}
.cal table{width:100%; border-collapse:collapse; text-align:center; font-size:.8rem}
.cal th{
  font-family:var(--font-display); font-weight:600; font-size:.66rem; color:var(--olive-ink);
  text-transform:uppercase; letter-spacing:.08em; padding-block:6px;
}
.cal td{padding:2px}
.cal td span{
  display:grid; place-items:center; width:30px; height:30px; margin-inline:auto; border-radius:50%;
  color:var(--ink-soft); font-variant-numeric:tabular-nums;
}
.cal td.today span{
  background:var(--teal); color:#fff; font-weight:600;
  box-shadow:0 0 0 3px var(--mint-soft);
}
.cal td.dim span{color:var(--mint)}

/* RFQ details table */
.dcard--table{margin-block-start:22px}
.dcard__headrow{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-block-end:14px}
.dcard__headrow h2{margin:0}
.demo-tag{
  font-size:.68rem; font-weight:600; font-family:var(--font-display); letter-spacing:.08em;
  text-transform:uppercase; color:var(--olive-ink); background:var(--olive-mist);
  border:1px solid #D9DACE; padding:.35em 1em; border-radius:var(--r-pill);
}
.tscroll{overflow-x:auto; border-radius:var(--r-md); border:1px solid var(--line)}
.rfqtable{width:100%; border-collapse:collapse; font-size:.86rem; min-width:820px}
.rfqtable thead th{
  background:var(--teal); color:#fff; font-family:var(--font-display); font-weight:600;
  font-size:.78rem; letter-spacing:.05em; padding:11px 10px; text-align:start; white-space:nowrap;
}
.rfqtable thead th:first-child{border-start-start-radius:var(--r-md)}
.rfqtable thead th:last-child{border-start-end-radius:var(--r-md)}
.rfqtable tbody td{padding:11px 10px; border-block-end:1px solid var(--olive-mist); vertical-align:middle; white-space:nowrap}
.rfqtable .respond-btn{white-space:nowrap; font-size:.78rem; padding:.5em 1em}
.rfqtable tbody tr:nth-child(even){background:#FAFAF7}
.rfqtable tbody tr:hover{background:var(--mint-mist)}
.rfqtable tbody tr:last-child td{border-block-end:0}
.rfqtable .num{font-variant-numeric:tabular-nums}
.rfqtable .cost{font-family:var(--font-display); font-weight:600; color:var(--teal-ink); font-variant-numeric:tabular-nums}
.catchip{
  display:inline-block; background:var(--olive-mist); color:var(--olive-ink);
  border:1px solid #D9DACE; font-size:.76rem; font-weight:600; padding:.3em .95em;
  border-radius:var(--r-pill); white-space:nowrap;
}
.quoted-badge{
  display:inline-flex; align-items:center; gap:.4em; background:var(--olive-ink); color:#fff;
  font-family:var(--font-display); font-weight:600; font-size:.74rem; padding:.4em 1em;
  border-radius:var(--r-pill);
}
.quoted-badge svg{width:12px; height:12px; fill:none; stroke:#fff; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.quoted-amt{display:block; font-size:.72rem; color:var(--olive-ink); margin-top:3px; font-variant-numeric:tabular-nums}

/* ---------- quote drawer ---------- */
.scrim{
  position:fixed; inset:0; background:rgba(5,59,59,.45); backdrop-filter:blur(2px);
  z-index:290; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;
}
.scrim.on{opacity:1; visibility:visible}
.drawer{
  position:fixed; top:0; bottom:var(--banner-h); inset-inline-end:0; width:min(400px,100vw);
  background:#fff; z-index:300; box-shadow:var(--shadow-lg);
  translate:105% 0; transition:translate .35s var(--ease);
  display:flex; flex-direction:column;
}
.drawer.open{translate:0 0}
.drawer__head{
  background:var(--teal-deep); color:#fff; padding:18px 22px;
  display:flex; align-items:flex-start; gap:12px;
}
.drawer__head h2{color:#fff; font-size:1.05rem; margin:0}
.drawer__head .sub{color:var(--mint); font-size:.78rem; margin-top:2px}
.drawer__x{
  margin-inline-start:auto; background:none; border:0; color:var(--mint-soft); font-size:1.5rem;
  line-height:1; cursor:pointer; padding:2px 6px; border-radius:6px;
}
.drawer__x:hover{color:#fff}
.drawer__body{padding:22px; overflow:auto; flex:1}
.drawer__body .fgrid{max-width:none}
.drawer__meta{
  background:var(--olive-mist); border-radius:var(--r-md); padding:12px 16px; font-size:.82rem;
  color:var(--olive-ink); margin-block-end:18px;
}
.drawer__meta strong{color:var(--ink)}
.drawer__foot{padding:16px 22px; border-block-start:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end}

/* ============================================================
   BUYER SIDE (amber accent)
   ============================================================ */
.body--buyer{
  background:
    radial-gradient(80% 55% at 100% 0%, #FFF1DA 0%, transparent 55%),
    radial-gradient(90% 70% at 0% 20%, #EAF5F3 0%, transparent 60%),
    linear-gradient(160deg, #FDFCF8 0%, #F6F9F7 100%);
  background-attachment:fixed;
}
.statrow{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-block-end:22px}
.stat{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:18px 20px;
  display:flex; gap:14px; align-items:center; box-shadow:var(--shadow-sm);
}
.stat__ic{width:42px; height:42px; border-radius:12px; background:var(--amber-mist); color:var(--amber-ink); display:grid; place-items:center; flex-shrink:0}
.stat__ic svg{width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.stat .n{font-family:var(--font-display); font-weight:700; font-size:1.6rem; color:var(--teal-deep); line-height:1.1; font-variant-numeric:tabular-nums}
.stat .l{font-size:.8rem; color:var(--ink-soft)}

.rfqlist{display:grid; gap:12px}
.rfqrow{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:16px 20px;
  display:flex; gap:16px; align-items:center; flex-wrap:wrap; box-shadow:var(--shadow-sm);
  border-inline-start:5px solid var(--amber);
  transition:transform .2s var(--ease), box-shadow .2s;
}
.rfqrow:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.rfqrow--mine{border-inline-start-color:var(--teal)}
.rfqrow__main{flex:1; min-width:230px}
.rfqrow__main h3{margin:0 0 3px; font-size:1rem}
.rfqrow__meta{font-size:.79rem; color:var(--ink-soft); display:flex; gap:.9em; flex-wrap:wrap}
.rfqrow__meta .catchip{background:var(--amber-mist); color:var(--amber-ink); border-color:#F2D9A8}
.status{
  font-family:var(--font-display); font-weight:600; font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; padding:.4em 1.1em; border-radius:var(--r-pill); white-space:nowrap;
}
.status--open{background:var(--mint-mist); color:var(--teal-ink); border:1px solid var(--mint-soft)}
.status--soon{background:var(--danger-mist); color:var(--danger); border:1px solid #EBC9C6}
.qcount{font-size:.82rem; color:var(--ink-soft); white-space:nowrap}
.qcount strong{font-family:var(--font-display); color:var(--teal-deep)}

/* compare */
.comparegrid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-block-start:16px}
.qcard{
  position:relative; background:#fff; border:1.5px solid var(--line); border-radius:var(--r-lg);
  padding:20px 18px 16px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:8px;
  transition:transform .2s var(--ease), box-shadow .2s, border-color .2s;
}
.qcard:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.qcard.sel{border-color:var(--amber); box-shadow:0 0 0 3px var(--amber-mist), var(--shadow-md)}
.qcard__flag{
  position:absolute; top:-12px; inset-inline-start:16px; background:var(--amber); color:var(--amber-ink);
  font-family:var(--font-display); font-weight:700; font-size:.68rem; letter-spacing:.05em;
  padding:.35em 1.1em; border-radius:var(--r-pill); text-transform:uppercase;
}
.qcard__who{display:flex; align-items:center; gap:10px}
.qcard__av{
  width:38px; height:38px; border-radius:50%; color:#fff; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:.85rem; flex-shrink:0;
}
.qcard__who h3{margin:0; font-size:.95rem; display:flex; align-items:center; gap:.35em}
.vbadge{color:var(--teal); display:inline-grid; place-items:center}
.vbadge svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.qcard__who .yrs{font-size:.72rem; color:var(--ink-soft)}
.stars{display:inline-flex; align-items:center; gap:2px; color:var(--amber)}
.stars svg{width:13px; height:13px; fill:currentColor; stroke:none}
.stars .val{font-size:.74rem; color:var(--ink-soft); margin-inline-start:4px; font-variant-numeric:tabular-nums}
.qcard__price{font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--teal-deep); font-variant-numeric:tabular-nums}
.qcard__price small{font-size:.75rem; font-weight:600; color:var(--ink-soft)}
.qcard dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:2px 10px; font-size:.79rem}
.qcard dt{color:var(--ink-soft)}
.qcard dd{margin:0; font-weight:600; text-align:end; font-variant-numeric:tabular-nums}
.qcard__pick{
  margin-top:auto; display:flex; align-items:center; gap:9px; padding-top:10px;
  border-block-start:1px dashed var(--line); font-size:.85rem; font-weight:600; cursor:pointer;
}
.qcard__pick input{
  appearance:none; width:19px; height:19px; border:2px solid var(--amber); border-radius:5px;
  background:#fff; cursor:pointer; display:grid; place-items:center; flex-shrink:0;
}
.qcard__pick input::after{
  content:""; width:9px; height:5px; border-inline-start:2.5px solid var(--amber-ink);
  border-block-end:2.5px solid var(--amber-ink); transform:rotate(-45deg) translate(1px,-1px); opacity:0;
}
.qcard__pick input:checked{background:var(--amber)}
.qcard__pick input:checked::after{opacity:1}
.comparebar{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-block-start:18px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:14px 20px;
  box-shadow:var(--shadow-sm);
}
.comparebar .selinfo{font-size:.88rem; color:var(--ink-soft)}
.comparebar .selinfo strong{color:var(--teal-deep); font-family:var(--font-display)}
.comparebar .btn{margin-inline-start:auto}

/* contact reveal */
.reveal{margin-block-start:18px}
.reveal[hidden]{display:none}
.contactgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; margin-block-start:12px}
.ccard{
  background:#fff; border:1.5px solid var(--teal); border-radius:var(--r-md); padding:18px 20px;
  box-shadow:var(--shadow-sm); animation:rise .45s var(--ease);
}
@keyframes rise{from{opacity:0; translate:0 14px}to{opacity:1; translate:0 0}}
.ccard h3{display:flex; align-items:center; gap:.4em; font-size:.98rem; margin-block-end:8px}
.ccard dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:5px 14px; font-size:.83rem}
.ccard dt{color:var(--ink-soft)}
.ccard dd{margin:0; font-weight:600}
.ccard .masked{letter-spacing:.06em; color:var(--teal-ink)}
.ccard .cnote{font-size:.72rem; color:var(--olive-ink); margin:10px 0 0; border-block-start:1px dashed var(--line); padding-block-start:8px}
.offnote{
  display:flex; gap:12px; align-items:flex-start; background:var(--amber-mist);
  border:1.5px solid var(--amber); border-radius:var(--r-md); padding:14px 18px;
  margin-block-start:16px; font-size:.9rem; color:var(--amber-ink); font-weight:600;
}
.offnote svg{width:20px; height:20px; flex-shrink:0; margin-top:2px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* buyer form page */
.formgrid{display:grid; grid-template-columns:1.5fr 1fr; gap:24px; align-items:start}
.formcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  border-block-start:5px solid var(--amber); box-shadow:var(--shadow-sm);
  padding:clamp(20px,3vw,32px);
}
.flabel{
  display:block; font-family:var(--font-display); font-weight:600; font-size:.85rem;
  margin:16px 0 6px; color:var(--ink);
}
.flabel .opt{font-weight:400; color:var(--ink-soft); font-size:.76rem}
.flabel .star{color:var(--danger)}
.fieldblock{margin-block-end:4px}
.fieldblock .ferr{margin:4px 0 0 14px; font-size:.76rem; color:var(--danger); font-weight:600}
.fieldblock:first-child .flabel{margin-top:0}
.drawer__form{display:flex; flex-direction:column; flex:1; min-height:0}
.budgetpair{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.sidecard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 24px;
  box-shadow:var(--shadow-sm);
}
.sidecard h2{font-size:1.02rem}
.flow{list-style:none; margin:14px 0 0; padding:0; counter-reset:fl}
.flow li{
  position:relative; padding:0 0 18px 44px; counter-increment:fl; font-size:.86rem; color:var(--ink-soft);
}
.flow li::before{
  content:counter(fl); position:absolute; left:0; top:-2px; width:30px; height:30px;
  border-radius:50%; border:2px solid var(--amber); color:var(--amber-ink); background:#fff;
  display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:.8rem;
}
.flow li:not(:last-child)::after{
  content:""; position:absolute; left:14px; top:30px; bottom:2px; width:2px;
  background:repeating-linear-gradient(180deg,var(--amber) 0 5px,transparent 5px 10px); opacity:.5;
}
.flow li strong{color:var(--ink); display:block; font-family:var(--font-display); font-weight:600}

/* section head in app pages */
.apphead{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:26px 0 14px}
.apphead h2{margin:0}
.apphead .demo-tag{background:var(--amber-mist); color:var(--amber-ink); border-color:#F2D9A8}

/* ---------- toast ---------- */
.toast{
  position:fixed; bottom:calc(var(--banner-h) + 14px); left:50%; translate:-50% 0; z-index:360;
  background:var(--ink); color:#fff; font-size:.85rem; padding:.7em 1.5em; border-radius:var(--r-pill);
  box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s;
  max-width:min(92vw,480px); text-align:center;
}
.toast.on{opacity:1; visibility:visible}

/* ---------- load reveal ---------- */
.rv{opacity:0; translate:0 18px; animation:rvin .6s var(--ease) forwards}
.rv-d1{animation-delay:.06s}.rv-d2{animation-delay:.14s}.rv-d3{animation-delay:.22s}
.rv-d4{animation-delay:.3s}.rv-d5{animation-delay:.38s}
@keyframes rvin{to{opacity:1; translate:0 0}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1; translate:none; animation:none}
  .wsuccess__ring,.ccard{animation:none}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1023px){
  .dashgrid{grid-template-columns:1fr}
  .comparegrid{grid-template-columns:repeat(2,1fr)}
  .formgrid{grid-template-columns:1fr}
  .dcard--track .art-crane{width:110px; opacity:.5}
}
@media (max-width:860px){
  .pnav{order:5; width:100%; padding-block:4px 8px; overflow-x:auto}
  .pnav-search input{width:140px}
  .fgrid.two{grid-template-columns:1fr}
  .catpanels{grid-template-columns:1fr}
  .utiles{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:700px){
  .shell{grid-template-columns:1fr}
  .siderail{
    flex-direction:row; align-items:center; padding:12px 16px; gap:14px;
    position:sticky; top:0; z-index:120;
  }
  .siderail__brand{flex-direction:row; gap:8px}
  .siderail__brand img{width:36px; height:36px}
  .siderail__brand .upply{margin-top:0; font-size:.9rem}
  .siderail__contact{margin:0 0 0 auto; flex-direction:row; gap:10px}
  .siderail__contact .vlabel{writing-mode:horizontal-tb; transform:none; letter-spacing:.2em; margin:0}
  .siderail__contact a{display:none}
  .siderail.expanded .siderail__contact a{display:block}
  .siderail__247{display:none}
  .choices{grid-template-columns:1fr}
  .subchoices{grid-template-columns:1fr 1fr}
  .stat .n{font-size:1.3rem}
}
@media (max-width:560px){
  .stepper .slabel{display:none}
  .stepper::before{inset-inline:12%}
  .statrow{grid-template-columns:1fr}
  .comparegrid{grid-template-columns:1fr}
  .utiles{grid-template-columns:1fr 1fr; justify-content:stretch}
  .subchoices{grid-template-columns:1fr}
  .trnpair{grid-template-columns:100px 1fr}
  .wiz-actions{justify-content:stretch}
  .wiz-actions .btn{flex:1}
  .budgetpair{grid-template-columns:1fr}
  .comparebar .btn{margin-inline-start:0; width:100%}
  .proto-note{font-size:.68rem}
}
@media (max-width:420px){
  .utiles{grid-template-columns:1fr}
  .pnav a{font-size:.8rem; padding:.5em .55em}
  .pnav-search{display:none}
  .rfqrow{padding:14px 16px}
}

/* ============================================================
   COMPARE MATRIX (item level award), CITY CHIPS, AWARD BAR
   ============================================================ */
.btn--xs{font-size:.72rem; padding:.42em .95em; border-width:1.5px}
.chiprow{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:14px 0}
.chiprow .lab{font-family:var(--font-display); font-weight:600; font-size:.8rem; color:var(--ink-soft)}
.citychip{
  font-family:var(--font-display); font-weight:600; font-size:.8rem; cursor:pointer;
  border:1.5px solid var(--line); background:#fff; color:var(--ink-soft);
  border-radius:var(--r-pill); padding:.42em 1.1em; transition:border-color .2s, background .2s, color .2s;
}
.citychip:hover{border-color:var(--amber); color:var(--amber-ink)}
.citychip[aria-pressed="true"]{background:var(--amber); border-color:var(--amber); color:var(--amber-ink)}

.cmx-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); background:#fff; box-shadow:var(--shadow-sm)}
table.cmx{width:100%; border-collapse:collapse; font-size:.85rem; min-width:780px}
.cmx thead th{padding:14px 12px; vertical-align:top; text-align:start}
.cmx thead th.cmx__itemh{
  font-family:var(--font-display); font-weight:600; font-size:.8rem; color:var(--ink-soft);
  letter-spacing:.05em; text-transform:uppercase; vertical-align:bottom; padding-block-end:16px;
}
.cmx thead th.sup{background:var(--amber-mist); border-block-end:2px solid var(--amber); min-width:172px}
.cmx thead th.sup + th.sup{border-inline-start:1px solid #F2DFB8}
.cmx .who{display:flex; gap:8px; align-items:center; margin-block-end:6px}
.cmx .supname{display:flex; align-items:center; gap:.35em; font-family:var(--font-display); font-weight:600; font-size:.88rem; color:var(--ink)}
.cmx .supsub{display:block; font-size:.7rem; color:var(--ink-soft); font-weight:400}
.cmx thead .stars{display:flex; margin:2px 0 4px}
.cmx thead .catchip{margin:0 0 8px; display:inline-block}
.cmx thead .btn--xs{display:inline-flex}
.cmx tbody th{
  text-align:start; font-weight:600; font-family:var(--font-body); padding:10px 12px;
  background:#fff; min-width:190px; border-block-end:1px solid var(--mint-mist);
}
.cmx tbody td{padding:8px 10px; white-space:nowrap; vertical-align:middle; border-block-end:1px solid var(--mint-mist)}
.cmx tbody tr:hover td{background:var(--mint-mist)}
.cmx .qty{color:var(--ink-soft); font-size:.74rem; font-weight:400}
.cellpick{
  display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:.85rem;
  font-variant-numeric:tabular-nums; background:#fff; border:1.5px solid var(--line);
  border-radius:9px; padding:.38em .75em; cursor:pointer; color:var(--ink);
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.cellpick:hover{border-color:var(--teal)}
.cellpick .ck{display:none; width:15px; height:15px; border-radius:50%; background:var(--teal); place-items:center; flex-shrink:0}
.cellpick .ck svg{width:9px; height:9px; fill:none; stroke:#fff; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round}
.cellpick.aw{
  border-color:var(--teal); background:var(--mint-mist); font-weight:600; color:var(--teal-deep);
  box-shadow:0 0 0 2.5px var(--mint-soft);
}
.cellpick.aw .ck{display:grid}
.lowchip{
  display:inline-block; margin-inline-start:6px; background:var(--mint-mist); color:var(--teal-ink);
  border:1px solid var(--mint-soft); font-family:var(--font-display); font-weight:700;
  font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; padding:.25em .7em; border-radius:var(--r-pill);
}
.bestchip{
  display:inline-block; margin-inline-start:6px; background:var(--amber); color:var(--amber-ink);
  font-family:var(--font-display); font-weight:700; font-size:.6rem; letter-spacing:.06em;
  text-transform:uppercase; padding:.25em .7em; border-radius:var(--r-pill);
}
.cmx .metarow th,.cmx .metarow td{font-size:.78rem; color:var(--ink-soft); padding:7px 12px; font-weight:400}
.cmx tfoot th,.cmx tfoot td{
  border-block-start:2px solid var(--mint); font-family:var(--font-display); font-weight:700;
  color:var(--teal-deep); padding:13px 12px; background:var(--paper); text-align:start;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.emptybox{
  padding:26px; text-align:center; color:var(--ink-soft); background:#fff;
  border:1.5px dashed var(--line); border-radius:var(--r-md); font-size:.9rem; margin:0;
}

.awardbar{
  position:sticky; bottom:calc(var(--banner-h) + 10px); z-index:60; margin-block-start:14px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-md);
  padding:12px 18px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.awardsum{margin:0; font-size:.85rem; color:var(--ink-soft); display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:1; min-width:230px}
.awardsum strong{color:var(--teal-deep); font-family:var(--font-display)}
.awchips{display:flex; gap:6px; flex-wrap:wrap}
.awchip{
  display:inline-flex; align-items:center; gap:6px; background:var(--mint-mist);
  border:1px solid var(--mint-soft); color:var(--teal-deep); font-size:.72rem; font-weight:600;
  border-radius:var(--r-pill); padding:.22em .85em .22em .28em;
}
.awchip .qcard__av{width:20px; height:20px; font-size:.6rem; box-shadow:none}
.awtotal{font-size:.85rem}
.awdelta{
  font-size:.74rem; font-weight:600; padding:.32em .9em; border-radius:var(--r-pill);
  background:var(--olive-mist); color:var(--olive-ink);
}
.awdelta.save{background:var(--mint-mist); color:var(--teal-ink); border:1px solid var(--mint-soft)}
.awdelta.over{background:var(--danger-mist); color:var(--danger)}
.awardbtns{display:flex; gap:8px; flex-wrap:wrap; margin-inline-start:auto; align-items:center}
.ccard .cwon{
  font-size:.8rem; background:var(--amber-mist); border-radius:8px; padding:6px 10px;
  margin:0 0 10px; color:var(--amber-ink);
}

/* ============================================================
   SUPPLIER DIRECTORY (find-suppliers)
   ============================================================ */
.filterbar{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  padding:18px 20px 20px; display:grid; grid-template-columns:1.2fr 1.1fr 1.1fr .8fr; gap:14px; align-items:start;
}
.filterbar .flabel{margin-block-start:0}
.filterbar .fnote{margin:5px 0 0}
.dircount{font-size:.85rem; color:var(--ink-soft); margin:16px 0 6px; font-weight:600}
.dirgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.scard{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-lg); padding:18px;
  display:flex; flex-direction:column; gap:9px; box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease), box-shadow .2s;
}
.scard:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.scard h3{margin:0; font-size:.95rem; display:flex; align-items:center; gap:.35em}
.scard .yrs{font-size:.74rem; color:var(--ink-soft)}
.scard__cats{display:flex; flex-wrap:wrap; gap:6px}
.scard__cats .catchip{font-size:.7rem}
.catchip--sub{background:var(--mint-mist); color:var(--teal-ink); border-color:var(--mint-soft)}
.scard__btns{display:flex; gap:8px; flex-wrap:wrap; margin-block-start:auto; padding-block-start:10px}
.btn--invited{
  border:2px solid var(--teal); color:var(--teal-ink); background:var(--mint-mist);
  display:inline-flex; align-items:center; gap:.4em; opacity:1;
}
.btn--invited[disabled]{opacity:1; cursor:default}

/* ============================================================
   MESSAGES (chat on the site, email underneath)
   ============================================================ */
.navbadge{
  display:inline-grid; place-items:center; min-width:17px; height:17px; padding:0 4px;
  border-radius:var(--r-pill); background:var(--danger); color:#fff; font-size:.64rem;
  font-weight:700; margin-inline-start:5px; vertical-align:middle; line-height:1;
}
.msgshell{
  display:grid; grid-template-columns:290px 1fr; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden; min-height:480px;
}
.threadlist{
  border-inline-end:1px solid var(--line); background:var(--paper); padding:10px;
  display:flex; flex-direction:column; gap:4px; overflow:auto;
}
.threadlist .emptybox{border:0; background:none; padding:22px 12px; font-size:.82rem}
.threadbtn{
  display:flex; gap:10px; align-items:center; padding:10px; border-radius:10px; border:0;
  background:none; cursor:pointer; font:inherit; text-align:start; width:100%;
}
.threadbtn:hover{background:var(--mint-mist)}
.threadbtn.on{background:var(--mint-mist); box-shadow:inset 3px 0 0 var(--teal)}
.tmeta{min-width:0}
.tname{font-family:var(--font-display); font-weight:600; font-size:.85rem; display:flex; align-items:center; gap:6px}
.udot{width:9px; height:9px; border-radius:50%; background:var(--danger); display:inline-block; flex-shrink:0}
.tsnip{display:block; font-size:.73rem; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:185px}
.convo{display:flex; flex-direction:column; min-width:0}
.convo__head{display:flex; gap:12px; align-items:flex-start; padding:16px 20px; border-block-end:1px solid var(--line); background:#fff}
.convo__head h2{font-size:1rem; margin:0; display:flex; align-items:center; gap:.4em}
.relay{margin:5px 0 0; font-size:.75rem; color:var(--ink-soft); display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.relay .ic{width:14px; height:14px; color:var(--teal)}
.relay code{
  background:var(--mint-mist); color:var(--teal-deep); padding:.18em .6em; border-radius:6px;
  font-size:.72rem; word-break:break-all;
}
.relaycap{margin:4px 0 0; font-size:.7rem; color:var(--olive-ink)}
.msgs{
  flex:1; overflow:auto; padding:18px 20px; display:flex; flex-direction:column; gap:10px;
  background:linear-gradient(180deg,var(--paper),#F3F9F8); min-height:220px;
}
.msgs__empty{font-size:.82rem; color:var(--ink-soft); text-align:center; margin:auto}
.bubble{max-width:72%; padding:10px 14px; border-radius:14px; font-size:.88rem; line-height:1.5}
.bubble p{margin:0}
.bubble--me{align-self:flex-end; background:var(--teal); color:#fff; border-end-end-radius:4px}
.bubble--sup{align-self:flex-start; background:#fff; border:1px solid var(--line); border-end-start-radius:4px; color:var(--ink)}
.bmeta{margin-top:5px; font-size:.66rem; display:flex; align-items:center; gap:4px; justify-content:flex-end; color:var(--ink-soft)}
.bubble--me .bmeta{color:var(--mint-soft)}
.bstatus{display:inline-flex; align-items:center; gap:4px; font-weight:600}
.bstatus.ok svg{width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.typing{display:inline-flex; gap:5px; padding:13px 16px; align-items:center}
.tdot{width:7px; height:7px; border-radius:50%; background:var(--wave); animation:tblink 1.2s infinite}
.tdot:nth-child(2){animation-delay:.2s}
.tdot:nth-child(3){animation-delay:.4s}
@keyframes tblink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.composer{display:flex; gap:10px; padding:14px 20px 6px; border-block-start:1px solid var(--line); background:#fff}
.composer .pill-in{flex:1; padding-inline-end:1.25em}
.mailnote{
  margin:0; padding:8px 20px 14px; background:#fff; font-size:.72rem; color:var(--olive-ink);
  display:flex; align-items:center; gap:6px;
}
.mailnote .ic{width:14px; height:14px; color:var(--teal); flex-shrink:0}

@media (prefers-reduced-motion:reduce){
  .tdot{animation:none; opacity:.6}
}

/* ---------- responsive for the new surfaces ---------- */
@media (max-width:1023px){
  .dirgrid{grid-template-columns:repeat(2,1fr)}
  .msgshell{grid-template-columns:250px 1fr}
}
@media (max-width:860px){
  .filterbar{grid-template-columns:1fr 1fr}
  .msgshell{grid-template-columns:1fr; min-height:0}
  .threadlist{flex-direction:row; overflow-x:auto; border-inline-end:0; border-block-end:1px solid var(--line)}
  .threadbtn{width:auto; flex-shrink:0}
  .threadbtn.on{box-shadow:inset 0 -3px 0 var(--teal)}
  .tsnip{max-width:130px}
  .msgs{min-height:300px}
}
@media (max-width:560px){
  .filterbar{grid-template-columns:1fr}
  .dirgrid{grid-template-columns:1fr}
  .awardbtns{margin-inline-start:0; width:100%; flex-direction:column; align-items:stretch}
  .awardbtns .btn{flex:none; width:100%}
  .bubble{max-width:88%}
  .composer{padding-inline:12px}
  .mailnote{padding-inline:12px}
  .msgs{padding:14px 12px}
}