:root{--navy:#06172d;--yellow:#ffb800;--ink:#101828;--muted:#667085;--line:#dfe5ec;--bg:#f7f8fa}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink)}
button,input,select,textarea{font:inherit}button{cursor:pointer}.top{background:#06172d;color:#fff;position:sticky;top:0;z-index:40}
.top1{max-width:1500px;margin:auto;padding:14px 28px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center}
.logo{font-size:40px;font-weight:950;color:var(--yellow);letter-spacing:-1.5px}.logo-sub{font-size:12px;font-weight:800}
.search{display:flex;background:#fff;border-radius:10px;overflow:hidden}.search input{flex:1;border:0;padding:14px}.search select{border:0;border-left:1px solid #ddd;padding:0 15px}.search button{border:0;background:var(--yellow);padding:0 22px;font-weight:900}
.tools{display:flex;gap:14px;align-items:center;font-size:14px;font-weight:700}.ghost,.solid{border-radius:9px;padding:10px 18px;font-weight:850}.ghost{background:transparent;border:1px solid var(--yellow);color:#fff}.solid{background:var(--yellow);border:1px solid var(--yellow);color:#111}
.navrow{max-width:1500px;margin:auto;padding:0 28px 12px;display:flex;gap:26px}.navrow button{background:none;border:0;color:#fff;font-weight:750}.navrow button:hover{color:var(--yellow)}
.hero{min-height:350px;background:url('assets/warehouse-hero.jpg') center/cover no-repeat;position:relative;color:#fff}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000e 0%,#0007 45%,#0003 70%,#0007 100%)}
.hero-inner{position:relative;max-width:1500px;margin:auto;padding:32px 34px;display:grid;grid-template-columns:1fr 350px;gap:35px}.hero h1{font-size:66px;line-height:.96;margin:0 0 14px;font-weight:950}.hero h2{font-size:34px;margin:0 0 12px}.hero h2 b{color:var(--yellow)}.hero p{font-size:21px;line-height:1.4}.shopnow{font-size:31px;padding:18px 68px;background:linear-gradient(90deg,#ffb800,#ffd13d);border:0;border-radius:12px;font-weight:950}
.benefits{background:#07182de8;border-radius:16px;padding:18px 22px;display:grid;gap:16px;align-self:center}.benefit{display:grid;grid-template-columns:34px 1fr;gap:12px}.benefit .ic{color:var(--yellow);font-size:23px}.benefit small{color:#e5e7eb}
.container{max-width:1500px;margin:auto;padding:0 30px}.stats{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 3px 16px #10182814;display:grid;grid-template-columns:repeat(5,1fr);margin-top:-10px;position:relative;z-index:4}.stat{padding:18px 25px;display:flex;gap:13px;align-items:center;border-right:1px solid var(--line)}.stat:last-child{border:0}.circle{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#eef4ff;font-size:22px}.stat b{font-size:22px}.stat small{display:block;color:#475467}
.actions{display:grid;grid-template-columns:1.08fr .95fr .95fr .95fr;gap:14px;margin:16px 0}.action{border:1px solid var(--line);border-radius:14px;background:#fff;padding:22px;min-height:205px}.action h3{margin:0 0 8px;font-size:22px}.action p{font-size:16px;line-height:1.5}.blue{background:linear-gradient(135deg,#eff6ff,#fff)}.green{background:linear-gradient(135deg,#f0fdf4,#fff)}.purple{background:linear-gradient(135deg,#faf5ff,#fff)}.dark{background:linear-gradient(135deg,#07182d,#0e263d);color:white}
.mini-btn{border:0;border-radius:8px;padding:11px 18px;color:#fff;background:#082d74;font-weight:900}.green .mini-btn{background:#167b22}.purple .mini-btn{background:#7026b4}.dark .mini-btn{background:var(--yellow);color:#111;width:100%}.orderinput{padding:12px;border:1px solid #ddd;border-radius:8px;width:70%}
.process{background:var(--navy);color:#fff;border-radius:13px;padding:15px 22px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.pstep{display:flex;gap:14px;align-items:center}.num{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:25px;font-weight:900;background:#1261ff}.pstep:nth-child(2) .num{background:#2f992c}.pstep:nth-child(3) .num{background:#ff9d00}.pstep:nth-child(4) .num{background:#7b2ac0}.pstep small{display:block;color:#e5e7eb}
.bottomrow{display:grid;grid-template-columns:1.05fr 1.6fr .85fr;gap:14px;margin:15px 0 28px}.bottomcard{background:#fff;border:1px solid var(--line);border-radius:13px;padding:17px}.categorybtn{display:flex;gap:16px;align-items:center}.bigicon{width:64px;height:64px;border-radius:13px;background:var(--yellow);display:grid;place-items:center;font-size:31px}.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.trust small{display:block;color:var(--muted)}
footer{background:var(--navy);color:#fff;padding:18px 30px}.foot{max-width:1500px;margin:auto;display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:13px}.footnav{display:flex;gap:22px}
.view{display:none}.view.active{display:block}.pagehead{padding:34px 0 18px}.pagehead h1{font-size:42px;margin:0 0 8px}.pagehead p{color:var(--muted);font-size:17px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-bottom:38px}.catcard,.product{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 3px 14px #1018280c}.catvisual{height:190px;background:linear-gradient(135deg,#eef4ff,#f9fafb);display:grid;place-items:center;font-size:84px}.catbody,.prodbody{padding:18px}.catbody h3,.prodbody h3{font-size:20px;margin:0 0 6px}.catbody p{color:var(--muted);min-height:44px}.catbody button{width:100%}.prodvisual{height:220px;background:linear-gradient(135deg,#f3f7fc,#fff);display:grid;place-items:center;font-size:100px}.tag{display:inline-block;border-radius:999px;background:#eef4ff;padding:5px 8px;font-size:12px;font-weight:800;margin:2px}.price{font-weight:950;font-size:22px;margin:10px 0}.muted{color:var(--muted)}.prodactions{display:flex;gap:8px}
.notice{background:#fff7e6;border-left:4px solid var(--yellow);padding:14px;border-radius:8px;margin:14px 0}.success{padding:18px;background:#ecfdf3;border-left:4px solid #067647;border-radius:8px}
.modal{display:none;position:fixed;inset:0;background:#000a;z-index:80;padding:30px;overflow:auto}.modal.show{display:block}.modalbox{max-width:820px;margin:auto;background:#fff;border-radius:18px;padding:22px}.modalhead{display:flex;justify-content:space-between;align-items:center}.x{border:0;background:#eef2f6;border-radius:9px;padding:8px 12px}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:18px}.formgrid label{font-size:13px;font-weight:850}.formgrid input,.formgrid select,.formgrid textarea{width:100%;padding:11px;border:1px solid #ccd5df;border-radius:8px;margin-top:5px}.full{grid-column:1/-1}.formgrid textarea{min-height:90px}
@media(max-width:1050px){.top1{grid-template-columns:1fr}.tools,.navrow{display:none}.hero-inner{grid-template-columns:1fr}.benefits{display:none}.actions{grid-template-columns:1fr 1fr}.grid4{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:1fr 1fr}.process{grid-template-columns:1fr 1fr}.bottomrow{grid-template-columns:1fr}}
@media(max-width:650px){.container{padding:0 15px}.hero h1{font-size:48px}.hero h2{font-size:26px}.shopnow{width:100%;font-size:25px;padding:16px}.actions,.grid4,.stats,.process{grid-template-columns:1fr}.formgrid{grid-template-columns:1fr}.full{grid-column:auto}.top1{padding:12px 15px}.logo{font-size:29px}}

.hidden{display:none!important}
.authbox{max-width:620px}.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px;background:#f1f5f9;padding:5px;border-radius:10px}.auth-tab{border:0;padding:11px;border-radius:8px;background:transparent;font-weight:850}.auth-tab.active{background:#fff;box-shadow:0 1px 5px #0002}.auth-submit{width:100%;padding:13px}.auth-check{display:flex;gap:8px;align-items:center}.auth-check input{width:auto;margin:0}.auth-note{color:var(--muted);font-size:12px;text-align:center}
.mobile-menu-btn{display:none}
@media(max-width:1180px){
  .top1{grid-template-columns:auto 1fr;gap:18px}.tools{grid-column:1/-1;justify-content:flex-end;flex-wrap:wrap}
  .hero h1{font-size:58px}.hero-inner{grid-template-columns:1fr 320px}
  .actions{grid-template-columns:1fr 1fr}.bottomrow{grid-template-columns:1fr}.grid4{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .top{position:relative}.top1{grid-template-columns:1fr}.logo{font-size:34px}.logo-sub{font-size:11px}
  .search{order:3;width:100%}.tools{order:2;justify-content:flex-start;gap:10px}.tools span:nth-of-type(1),.tools span:nth-of-type(2){display:none}
  .navrow{overflow-x:auto;white-space:nowrap;gap:18px;padding-bottom:10px;-webkit-overflow-scrolling:touch}
  .hero{min-height:auto}.hero-inner{grid-template-columns:1fr;padding:28px 22px}.hero h1{font-size:52px}.hero h2{font-size:30px}.hero p{font-size:18px}.benefits{display:grid;grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:repeat(2,1fr);margin-top:0}.stat{border-bottom:1px solid var(--line)}
  .actions{grid-template-columns:1fr 1fr}.process{grid-template-columns:1fr 1fr}.grid4{grid-template-columns:repeat(2,1fr)}
  .foot{flex-direction:column;align-items:flex-start}.footnav{flex-wrap:wrap}
}
@media(max-width:640px){
  .top1{padding:12px 14px;gap:12px}.logo{font-size:30px}.search{flex-wrap:wrap}.search input{min-width:100%;border-bottom:1px solid #eee}.search select{flex:1;border-left:0}.search button{flex:1;padding:12px}
  .tools{font-size:12px}.tools .ghost,.tools .solid{padding:8px 10px}.navrow{padding:0 14px 10px}
  .hero-inner{padding:22px 16px}.hero h1{font-size:43px}.hero h2{font-size:26px}.hero p{font-size:16px}.shopnow{font-size:24px;padding:15px 22px;width:100%}.benefits{grid-template-columns:1fr}
  .container{padding:0 14px}.stats,.actions,.process,.grid4{grid-template-columns:1fr}.stat{border-right:0}
  .action{min-height:unset}.orderinput{width:100%}.bottomrow{grid-template-columns:1fr}.trust{grid-template-columns:1fr 1fr}
  .categorybtn{align-items:flex-start;flex-wrap:wrap}.categorybtn .solid{width:100%}.catvisual{height:165px}.prodvisual{height:190px}
  .pagehead h1{font-size:34px}.modal{padding:12px}.modalbox{padding:18px}.formgrid{grid-template-columns:1fr}.full{grid-column:auto}
}
@media(max-width:420px){
  .logo{font-size:27px}.hero h1{font-size:38px}.hero h2{font-size:23px}.trust{grid-template-columns:1fr}.grid4{gap:13px}.catvisual{font-size:68px}.prodvisual{font-size:82px}
}

.rolebar{background:#0a2340;color:white;padding:10px 0;border-top:1px solid #ffffff1a}.rolebar .container{display:flex;gap:8px;overflow-x:auto}.rolebar button{white-space:nowrap;background:#ffffff12;color:white;border:1px solid #ffffff2a;padding:8px 12px;border-radius:8px;font-weight:750}.rolebar button:hover{background:#ffb800;color:#111}
.opshead{display:flex;justify-content:space-between;gap:18px;align-items:end}.opsnav{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 18px}.opsnav button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:9px 11px;font-weight:750}
.metricgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:14px 0}.metric{background:#fff;border:1px solid var(--line);border-radius:13px;padding:15px}.metric b{font-size:25px;display:block}.metric small{color:var(--muted)}
.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;margin:14px 0}.panel h3{margin-top:0}.tablebtn{border:1px solid #cbd5e1;background:#fff;border-radius:7px;padding:6px 9px;font-size:12px;font-weight:800}.rulegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.rulecard{border:1px solid var(--line);background:#fff;border-radius:12px;padding:14px}.rulecard small{display:block;color:var(--muted);margin-top:3px}.journeygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.journeycard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}.journeycard h3{margin:0 0 8px}.journeycard button{margin-top:8px}.jtimeline{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.jstep{background:#07182d;color:#fff;border-radius:10px;padding:10px 12px;display:flex;gap:8px;align-items:center}.jstep b{background:#ffb800;color:#111;width:25px;height:25px;border-radius:50%;display:grid;place-items:center}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:14px}.org{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.org .panel{text-align:center;margin:0}.warningbox{background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;padding:12px}
@media(max-width:1050px){.metricgrid{grid-template-columns:repeat(3,1fr)}.rulegrid,.journeygrid{grid-template-columns:repeat(2,1fr)}.org{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.metricgrid,.rulegrid,.journeygrid,.twocol,.org{grid-template-columns:1fr}.opshead{align-items:flex-start;flex-direction:column}}

/* Checkpoint 07 — end-to-end workflow review */
.flowgrid{display:grid;grid-template-columns:320px 1fr;gap:16px;align-items:start}
.flowrail{background:#07182d;color:#fff;border-radius:14px;padding:16px;position:sticky;top:112px}
.flowrail h3{margin:0 0 12px}.flowrail button{width:100%;text-align:left;background:#ffffff0d;color:#fff;border:1px solid #ffffff1f;border-radius:9px;padding:10px;margin:5px 0;font-weight:750}
.flowrail button.active,.flowrail button:hover{background:#ffb800;color:#111}
.flowstage{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.flowstatus{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.statuspill{padding:7px 10px;border-radius:999px;background:#eef2f7;border:1px solid #d8e0e9;font-size:12px;font-weight:800}
.statuspill.current{background:#fff2bf;border-color:#ffcf33}
.actionrow{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.actionrow button{padding:9px 12px;border-radius:8px;font-weight:800}
.enginebox{background:#f8fafc;border:1px solid #dce3eb;border-radius:12px;padding:14px;margin-top:12px}
.enginegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.enginecell{background:#fff;border:1px solid var(--line);border-radius:9px;padding:10px}.enginecell small{display:block;color:var(--muted)}.enginecell b{display:block;margin-top:4px}
.offergrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.offercard{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff}.offercard.best{outline:2px solid #ffb800}.score{font-size:24px;font-weight:900}
.timeline2{border-left:3px solid #d9e1ea;margin-left:8px;padding-left:18px}.timeline2 .event{position:relative;padding:0 0 17px}.timeline2 .event:before{content:"";position:absolute;width:11px;height:11px;border-radius:50%;background:#ffb800;left:-25px;top:4px}
.paymatrix{width:100%;border-collapse:collapse}.paymatrix th,.paymatrix td{padding:9px;border-bottom:1px solid var(--line);text-align:left}.paymatrix th{background:#f8fafc}
.approvalcard{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:11px;padding:13px;margin:9px 0}
.demo-note{background:#eaf6ff;border:1px solid #b9ddf7;border-radius:10px;padding:12px;margin:12px 0}
@media(max-width:900px){.flowgrid{grid-template-columns:1fr}.flowrail{position:static}.enginegrid,.offergrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.enginegrid,.offergrid{grid-template-columns:1fr}}

/* Checkpoint 08 — advanced journeys, financial consequences, reporting */
.splitgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.splitcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}
.assetgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.assetbox{background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:12px}
.assetbox small{display:block;color:var(--muted)}.assetbox b{display:block;margin-top:4px}
.reportgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.reportcard{background:#fff;border:1px solid var(--line);border-radius:13px;padding:15px}.reportcard b{font-size:23px;display:block}
.bar{height:9px;background:#e8edf3;border-radius:10px;overflow:hidden;margin-top:8px}.bar>i{display:block;height:100%;background:#ffb800}
.ledgerrow{display:grid;grid-template-columns:120px 1fr 160px 130px;gap:10px;padding:10px;border-bottom:1px solid var(--line);align-items:center}
.syncmap{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.syncnode{border:1px solid var(--line);background:#fff;border-radius:11px;padding:12px;text-align:center}.syncnode b{display:block}.syncnode.current{outline:2px solid #ffb800}
.exceptionflow{display:flex;gap:8px;flex-wrap:wrap}.exceptionflow span{background:#07182d;color:#fff;padding:8px 10px;border-radius:8px}
@media(max-width:1000px){.splitgrid,.reportgrid{grid-template-columns:repeat(2,1fr)}.assetgrid,.syncmap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.splitgrid,.reportgrid,.assetgrid,.syncmap{grid-template-columns:1fr}.ledgerrow{grid-template-columns:1fr}}

.portalbox{max-width:760px}.portalchoices{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}
.portalcard{border:1px solid var(--line);border-radius:13px;padding:16px;background:#fff}.portalcard h3{margin:0 0 7px}.portalcard p{color:var(--muted);min-height:42px}
.workspace-nav{display:flex;gap:8px;flex-wrap:wrap;background:#07182d;padding:12px;border-radius:12px;margin:12px 0 18px}
.workspace-nav button{background:#ffffff12;color:#fff;border:1px solid #ffffff25;border-radius:8px;padding:9px 12px;font-weight:800}.workspace-nav button:hover{background:#ffb800;color:#111}
.access-banner{background:#fff7ed;border:1px solid #fed7aa;border-radius:11px;padding:13px}.role-badge{display:inline-block;background:#ffb800;color:#111;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:900}
@media(max-width:650px){.portalchoices{grid-template-columns:1fr}}

/* Checkpoint 10 — clickable KENNBRIDGE logo */
.brand-home-link{
  color:inherit;
  text-decoration:none;
  font:inherit;
  letter-spacing:inherit;
  display:inline-block;
  cursor:pointer;
}
.brand-home-link:hover,
.brand-home-link:focus{
  color:inherit;
  text-decoration:none;
  outline:2px solid #ffb800;
  outline-offset:4px;
  border-radius:4px;
}

/* Checkpoint 11 — role workspace/navigation refinement */
.account-summary{background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:12px}
.account-summary b{display:block;font-size:18px}.account-summary small{color:var(--muted)}
.workspace-shell-note{background:#eef7ff;border:1px solid #c6e2f7;border-radius:11px;padding:12px;margin:12px 0}
.portalcard .role-badge{margin-bottom:8px}
.workspace-nav .nav-home{background:#ffb800;color:#111}
@media(max-width:700px){
  #portalButton{width:100%}
}

/* Checkpoint 12 — requests, supply, notifications, demand intelligence */
.section-divider{border-top:1px solid var(--line);padding-top:13px;margin-top:4px}
.section-divider small{display:block;color:var(--muted);margin-top:3px}
.notice-item{display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:start;padding:12px;border-bottom:1px solid var(--line)}
.notice-dot{width:9px;height:9px;border-radius:50%;background:#ffb800;margin-top:5px}.notice-item.read .notice-dot{background:#cbd5e1}
.notice-item small{color:var(--muted)}.notice-item button{white-space:nowrap}
.signal-row{display:grid;grid-template-columns:160px 1fr 150px 130px;gap:10px;padding:10px;border-bottom:1px solid var(--line)}
.supply-status{display:inline-block;padding:5px 8px;border-radius:999px;background:#eef7ff;font-weight:800;font-size:12px}
.prefill-banner{background:#fff7d6;border:1px solid #f4cf55;border-radius:10px;padding:11px;margin:10px 0}
@media(max-width:720px){.signal-row{grid-template-columns:1fr}}

/* Checkpoint 13 — supplier comparison, quotation, payment reconciliation */
.quote-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}
.quote-summary>div{background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:11px}
.quote-summary small{display:block;color:var(--muted)}.quote-summary b{display:block;margin-top:4px}
.decisionbox{border:1px solid var(--line);border-radius:11px;padding:13px;background:#fff}
.recon-row{display:grid;grid-template-columns:140px 1fr 160px 140px 120px;gap:10px;padding:10px;border-bottom:1px solid var(--line);align-items:center}
.frozen-spec{background:#eef7ff;border:1px solid #c5e1f5;border-radius:11px;padding:13px}
@media(max-width:900px){.quote-summary{grid-template-columns:repeat(2,1fr)}.recon-row{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.quote-summary,.recon-row{grid-template-columns:1fr}}

/* Checkpoint 14 — distinct sign-in / demo credentials */
.loginhubbox{max-width:900px}
.login-role-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.login-role-card{display:grid;grid-template-columns:54px 1fr;grid-template-rows:auto auto;text-align:left;gap:2px 10px;padding:16px;border:1px solid var(--line);border-radius:13px;background:#fff;cursor:pointer}
.login-role-card:hover{box-shadow:0 8px 24px #00000012;transform:translateY(-1px)}
.login-role-card b{font-size:17px}.login-role-card small{color:var(--muted);grid-column:2}.login-role-icon{font-size:30px;grid-row:1/3;align-self:center}
.staff-login-card{grid-column:1/-1;background:#07182d;color:#fff}.staff-login-card small{color:#d5dfeb}
.demo-credentials-note,.demo-login-card{margin-top:14px;background:#f8fafc;border:1px solid var(--line);border-radius:11px;padding:12px}
.demo-login-card{display:grid;grid-template-columns:1fr auto auto auto;gap:9px;align-items:center}
.demo-login-card code,.credential-card code{background:#eef2f7;border-radius:6px;padding:5px 7px;font-size:12px}
.auth-error{background:#fff1f2;border:1px solid #fecdd3;color:#9f1239;padding:10px;border-radius:9px}
.credential-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.credential-card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:15px;display:flex;flex-direction:column;gap:8px}
.credential-card p{color:var(--muted);flex:1}.credential-card .solid{margin-top:auto}
.access-matrix{margin-top:18px;overflow:auto}
.access-matrix table{width:100%;border-collapse:collapse}.access-matrix th,.access-matrix td{border-bottom:1px solid var(--line);padding:9px;text-align:center}.access-matrix th:first-child,.access-matrix td:first-child{text-align:left}
.login-context{background:#eef7ff;border:1px solid #c5e1f5;padding:10px;border-radius:9px;margin-bottom:10px}
@media(max-width:850px){.credential-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.login-role-grid,.credential-grid{grid-template-columns:1fr}.staff-login-card{grid-column:auto}.demo-login-card{grid-template-columns:1fr}.login-role-card{grid-template-columns:44px 1fr}}

.auth-welcome{margin:12px 0 15px;padding:14px 15px;border-radius:12px;background:#fff8dc;border:1px solid #f1d46b}
.auth-welcome span{font-size:11px;letter-spacing:1.8px;font-weight:900;color:#9a6a00}.auth-welcome h3{margin:3px 0 4px}.auth-welcome p{margin:0;color:var(--muted)}
.internal-welcome{background:#0b223e;color:#fff;border-color:#24496d}.internal-welcome span{color:#ffca28}.internal-welcome p{color:#d8e4ef}

/* Checkpoint 16 — shared transaction, exceptions, document control */
.transaction-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}
.stage-pill{display:inline-block;padding:5px 9px;border-radius:999px;background:#eef2f7;font-size:12px;font-weight:800}
.stage-pill.done{background:#ecfdf3}.stage-pill.current{background:#fff5c2}.stage-pill.blocked{background:#fff0f1}
.role-view-card{border:1px solid var(--line);border-radius:11px;padding:12px;margin-bottom:10px}
.doc-row,.exc-row{display:grid;grid-template-columns:150px 1fr 170px 130px 120px;gap:10px;align-items:center;padding:10px;border-bottom:1px solid var(--line)}
.exc-critical{border-left:4px solid #b91c1c}.exc-high{border-left:4px solid #d97706}
.visibility-chip{font-size:11px;font-weight:800;background:#eef2ff;padding:5px 8px;border-radius:999px}
@media(max-width:900px){.transaction-layout{grid-template-columns:1fr}.doc-row,.exc-row{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.doc-row,.exc-row{grid-template-columns:1fr}}
.app-nav{position:sticky;top:0;z-index:80;background:#07182d;border-bottom:1px solid #173654;box-shadow:0 4px 12px #0002}.app-nav-inner{max-width:1240px;margin:auto;padding:8px 18px;display:flex;align-items:center;gap:8px}.app-nav-btn{border:1px solid #39536d;background:#102b48;color:#fff;border-radius:8px;padding:8px 12px;font-weight:800;cursor:pointer}.workspace-nav-btn{background:#ffbf00;color:#07182d;border-color:#ffbf00}.app-nav-btn:disabled{opacity:.4}.app-nav-context{margin-left:auto;color:#cbd8e5;font-size:12px;font-weight:700}@media(max-width:600px){.app-nav-inner{padding:7px 10px}.app-nav-btn{font-size:12px}.app-nav-context{display:none}}
.queue-row{display:grid;grid-template-columns:110px 1fr 130px 130px 110px;gap:10px;align-items:center;padding:11px;border-bottom:1px solid var(--line)}
.queue-row.high{border-left:4px solid #d97706}.queue-row.critical{border-left:4px solid #b91c1c}.task-state{font-size:11px;font-weight:900;padding:5px 8px;border-radius:999px;background:#eef2f7}.task-state.open{background:#fff5c2}.task-state.completed{background:#ecfdf3}.task-state.escalated{background:#fff0f1}.assignment-chip{font-size:11px;font-weight:900;background:#eef2ff;padding:5px 8px;border-radius:999px}.task-history-row{padding:10px 0;border-bottom:1px solid var(--line)}@media(max-width:800px){.queue-row{grid-template-columns:1fr 1fr}}@media(max-width:520px){.queue-row{grid-template-columns:1fr}}

/* Checkpoint 19 — permanent workspace queues + inspector completion workflow */
.permanent-workspace-actions{margin-top:14px}
.inspection-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.inspection-form-grid .full{grid-column:1/-1}
.inspection-form-grid label{display:flex;flex-direction:column;gap:6px;font-weight:800}
.inspection-form-grid input,.inspection-form-grid select,.inspection-form-grid textarea{width:100%;padding:11px;border:1px solid var(--line);border-radius:8px;background:#fff}
.inspection-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0}
.inspection-check{display:flex!important;flex-direction:row!important;align-items:center;gap:8px!important;font-weight:700!important}
.inspection-check input{width:auto!important}
.gate-banner{padding:12px;border-radius:10px;margin:10px 0;font-weight:800}
.gate-pass{background:#ecfdf3;border:1px solid #a7f3d0}
.gate-conditional{background:#fffbeb;border:1px solid #fde68a}
.gate-fail{background:#fff1f2;border:1px solid #fecdd3}
@media(max-width:700px){.inspection-form-grid,.inspection-checks{grid-template-columns:1fr}}

/* Checkpoint 21 — synchronized inspection log */
.inspection-result-pass{font-weight:900;color:#067647}
.inspection-result-conditional{font-weight:900;color:#a15c00}
.inspection-result-fail{font-weight:900;color:#b42318}
.inspection-result-pending{font-weight:900;color:#667085}
.inspection-record-line{padding:9px 0;border-bottom:1px solid var(--line)}

/* Checkpoint 24 — role-private commercial views */
.privacy-safe{padding:12px;border:1px solid #b7d5c4;background:#f0fdf4;border-radius:10px}
.private-note{padding:12px;border-left:4px solid #ffbf00;background:#fff9e8;border-radius:6px}

/* Checkpoint 29 — non-blocking in-app notices */
.app-notice{position:fixed;right:20px;top:92px;z-index:10050;max-width:460px;background:#fff;border:1px solid #d7b13c;border-left:5px solid #d7b13c;border-radius:10px;padding:13px 46px 13px 15px;box-shadow:0 10px 30px rgba(0,0,0,.22);font-weight:700;color:#17202a}
.app-notice.hidden{display:none}
.app-notice button{position:absolute;right:10px;top:7px;border:0;background:transparent;font-size:24px;cursor:pointer;color:#333}
@media(max-width:700px){.app-notice{left:12px;right:12px;top:76px;max-width:none}}

/* Checkpoint 32 */
#fulfilHistory .notice-item{display:block;width:100%;box-sizing:border-box;margin:10px 0;padding:14px 16px}
#fulfilHistory .notice-item>div{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr) auto;gap:16px;align-items:start;width:100%}
#fulfilHistory .notice-item p{margin:0;line-height:1.45;min-width:0}
#fulfilHistory .notice-item small{white-space:nowrap;text-align:right}
.shipment-history .notice-item{display:block;width:100%;box-sizing:border-box;margin:10px 0}
.shipment-history .notice-item>div{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr) auto;gap:16px;align-items:start}
.shipment-history .notice-item p{margin:0}
.gate-open{font-weight:800}
@media(max-width:700px){
 #fulfilHistory .notice-item>div,.shipment-history .notice-item>div{grid-template-columns:1fr;gap:5px}
 #fulfilHistory .notice-item small,.shipment-history .notice-item small{text-align:left;white-space:normal}
}


/* =========================================================
   GitHub Showcase Responsive Hardening
   Preserves existing KENNBRIDGE visual design and colours.
   ========================================================= */

/* Global overflow / media protection */
html,body{max-width:100%;overflow-x:hidden}
img,video,canvas,svg{max-width:100%;height:auto}
input,select,textarea,button{max-width:100%}
.view,.container,.panel,.modalbox,.flowstage,.action,.bottomcard,.journeycard,.rulecard,.metric,.assetbox,.reportcard{min-width:0}
p,h1,h2,h3,h4,b,small,span,td,th,label{overflow-wrap:anywhere}

/* Dense data areas stay usable instead of breaking the page */
.tablewrap,.access-matrix{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tablewrap table,.access-matrix table,.paymatrix{min-width:680px}
.panel{max-width:100%;overflow:hidden}
.panel .tablewrap{overflow-x:auto}

/* Buttons and controls remain finger-friendly */
button,.solid,.ghost,.mini-btn,.tablebtn,.app-nav-btn{min-height:40px}
.formgrid input,.formgrid select,.formgrid textarea,
.inspection-form-grid input,.inspection-form-grid select,.inspection-form-grid textarea{font-size:16px}

/* Tablet */
@media (max-width:1024px){
  .container{padding-left:20px;padding-right:20px}
  .top1{padding-left:20px;padding-right:20px}
  .navrow{padding-left:20px;padding-right:20px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .navrow button{flex:0 0 auto;min-height:38px}
  .hero-inner{padding-left:22px;padding-right:22px}
  .hero h1{font-size:clamp(46px,7vw,58px)}
  .hero h2{font-size:clamp(27px,4vw,32px)}
  .metricgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .assetgrid,.reportgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .queue-row{grid-template-columns:100px minmax(180px,1fr) 110px 110px 90px}
  .doc-row,.exc-row{grid-template-columns:130px minmax(180px,1fr) 140px 110px 95px}
}

/* Mobile landscape / small tablet */
@media (max-width:768px){
  .top{position:relative}
  .top1{display:flex;flex-direction:column;align-items:stretch;padding:12px 14px;gap:10px}
  .brand-home-link{align-self:flex-start}
  .search{width:100%;order:2}
  .tools{width:100%;order:3;display:flex!important;justify-content:flex-start;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .tools>*{flex:0 0 auto}
  .navrow{display:flex!important;gap:10px;padding:0 14px 10px;overflow-x:auto;white-space:nowrap}
  .navrow button{font-size:13px;padding:8px 4px}
  .hero-inner{grid-template-columns:1fr;padding:22px 16px}
  .benefits{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
  .actions{grid-template-columns:1fr 1fr}
  .grid4{grid-template-columns:1fr 1fr}
  .process{grid-template-columns:1fr 1fr}
  .metricgrid,.rulegrid,.journeygrid,.splitgrid,.reportgrid,.assetgrid,.syncmap,.credential-grid{grid-template-columns:1fr 1fr}
  .transaction-layout,.twocol,.flowgrid{grid-template-columns:1fr}
  .flowrail{position:static}
  .queue-row,.doc-row,.exc-row,.recon-row,.ledgerrow,.signal-row{
    grid-template-columns:1fr 1fr;
    gap:8px 12px;
  }
  .queue-row>*,.doc-row>*,.exc-row>*,.recon-row>*,.ledgerrow>*,.signal-row>*{min-width:0}
  .opshead{align-items:flex-start;flex-direction:column}
  .opsnav{overflow-x:auto;flex-wrap:nowrap;width:100%;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .opsnav button{flex:0 0 auto}
  .app-nav-inner{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .app-nav-btn{flex:0 0 auto}
  .modal{padding:12px}
  .modalbox{width:100%;max-width:100%}
  .foot{flex-direction:column;align-items:flex-start}
}

/* Phones */
@media (max-width:560px){
  .container{padding-left:13px;padding-right:13px}
  .logo{font-size:28px;line-height:1}
  .logo-sub{font-size:10px;margin-top:4px}
  .search{display:grid;grid-template-columns:1fr 1fr;border-radius:9px}
  .search input{grid-column:1/-1;min-width:0;width:100%;border-bottom:1px solid #eee}
  .search select{border-left:0;min-width:0;width:100%;padding:11px 8px}
  .search button{padding:11px 8px}
  .tools{gap:8px}
  .tools .ghost,.tools .solid{padding:8px 10px;font-size:12px}
  .hero h1{font-size:clamp(36px,12vw,43px)}
  .hero h2{font-size:24px}
  .hero p{font-size:15px}
  .benefits{grid-template-columns:1fr}
  .stats,.actions,.grid4,.process,.metricgrid,.rulegrid,.journeygrid,
  .splitgrid,.reportgrid,.assetgrid,.syncmap,.credential-grid,.quote-summary,
  .enginegrid,.offergrid,.portalchoices,.login-role-grid,.inspection-form-grid,
  .inspection-checks,.org{grid-template-columns:1fr!important}
  .stat{border-right:0}
  .action{padding:17px}
  .pagehead{padding:24px 0 12px}
  .pagehead h1{font-size:31px;line-height:1.08}
  .pagehead p{font-size:15px}
  .panel{padding:14px;border-radius:12px}
  .formgrid{grid-template-columns:1fr!important}
  .formgrid .full,.inspection-form-grid .full{grid-column:auto}
  .queue-row,.doc-row,.exc-row,.recon-row,.ledgerrow,.signal-row{
    grid-template-columns:1fr!important;
    padding:12px 10px;
  }
  .approvalcard{grid-template-columns:1fr}
  .demo-login-card{grid-template-columns:1fr}
  .login-role-card{grid-template-columns:44px minmax(0,1fr)}
  .prodactions,.actionrow{flex-direction:column;align-items:stretch}
  .prodactions button,.actionrow button{width:100%}
  .app-nav-inner{padding:7px 8px;gap:6px}
  .app-nav-btn{padding:8px 10px;font-size:12px}
  .app-nav-context{display:none}
  .tablewrap,.access-matrix{margin-left:0;margin-right:0}
  .tablewrap table,.access-matrix table,.paymatrix{min-width:620px}
  .notice-item{grid-template-columns:10px minmax(0,1fr)}
  .notice-item>button,.notice-item>small{grid-column:2}
  #fulfilHistory .notice-item>div,.shipment-history .notice-item>div{grid-template-columns:1fr}
  .footnav{gap:12px;flex-wrap:wrap}
}

/* Very narrow phones */
@media (max-width:380px){
  .container{padding-left:10px;padding-right:10px}
  .top1,.navrow{padding-left:10px;padding-right:10px}
  .logo{font-size:25px}
  .hero-inner{padding-left:12px;padding-right:12px}
  .hero h1{font-size:34px}
  .shopnow{font-size:21px}
  .trust{grid-template-columns:1fr}
  .app-nav-btn{font-size:11px;padding:7px 8px}
}

/* Managed Marketplace structural integration — uses existing KENNBRIDGE design language */
.case-stage-rail{display:flex;gap:7px;overflow-x:auto;padding:10px 0 18px;-webkit-overflow-scrolling:touch}
.case-stage-rail span{flex:0 0 auto;border:1px solid #d8dee8;background:#fff;border-radius:999px;padding:8px 11px;font-size:12px;font-weight:800;color:#526071}
.case-stage-rail span.done{background:#eef7e7;border-color:#b7d88d;color:#35551b}
.case-stage-rail span.current{background:#fff7d7;border-color:#e9c84a;color:#4a3b00}
.case-tabs{margin-bottom:16px}
#partnerBody,#caseBody{margin-top:16px}
@media(max-width:768px){.case-stage-rail{padding-bottom:12px}.case-tabs{overflow-x:auto;flex-wrap:nowrap}.case-tabs button{flex:0 0 auto}}

/* Checkpoint 37 structural additions — no redesign */
.comm-message{border-top:1px solid #e6e9ef;padding:12px 0}
.comm-message:first-of-type{border-top:0}
.comm-message small{display:block;color:#788391;margin:3px 0 5px}
.comm-message p{margin:4px 0 8px}
#partnerFinance37 .metricgrid,#communicationsCenter .metricgrid,#partnerProfile37 .metricgrid{margin-bottom:18px}
@media(max-width:768px){
 #partnerFinance37 .actionrow,#partnerMessages37 .actionrow{flex-wrap:wrap}
 #partnerFinance37 .tablewrap,#communicationsCenter .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:560px){
 #partnerFinance37 .metricgrid,#communicationsCenter .metricgrid,#partnerProfile37 .metricgrid{grid-template-columns:1fr!important}
}

/* Checkpoint 38 MODEL additions — extends approved visual system only */
#customerDemand38 .metricgrid,#demandControl38 .metricgrid{margin-bottom:18px}
#negotiationRoom38 .comm-message{padding:12px 0;border-top:1px solid #e5e9ef}
#negotiationRoom38 .comm-message:first-child{border-top:0}
@media(max-width:768px){
 #customerDemand38 .tablewrap,#demandFinance38 .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
 #demandControl38 .case-stage-rail{overflow-x:auto;white-space:nowrap;padding-bottom:8px}
}