:root { --navy:#071a2d; --navy2:#0b2740; --panel:#102f4c; --line:#244662; --ink:#f4f8fb; --muted:#93aabb; --blue:#4db5ff; --teal:#2ed3b7; --amber:#ffb44d; --red:#ff6f6f; --white:#fff; }
* { box-sizing:border-box } body { margin:0; background:#061728; color:var(--ink); font:14px Manrope, sans-serif; } button,input { font:inherit } button { cursor:pointer }
.login { min-height:100vh; display:grid; grid-template-columns:1.15fr .85fr; background:radial-gradient(circle at 20% 20%,#134b72 0,#071a2d 42%,#061728 70%); }
.login-intro { padding:56px 7vw; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.grid { position:absolute; inset:0; opacity:.24; background-image:linear-gradient(#2b668a 1px,transparent 1px),linear-gradient(90deg,#2b668a 1px,transparent 1px); background-size:60px 60px; mask-image:linear-gradient(to bottom,black,transparent) }
.brand { position:relative; display:flex; gap:10px; align-items:center; letter-spacing:.12em; font-weight:800; font-size:17px }.brand-mark{width:28px;height:28px;border:2px solid var(--blue);border-radius:7px;display:grid;place-items:center;color:var(--blue);font-size:12px}
.login-copy { position:relative; max-width:680px; }.eyebrow{color:var(--blue);font:12px 'DM Mono';letter-spacing:.13em;text-transform:uppercase}.login h1{font-size:clamp(42px,5vw,72px);line-height:1.07;margin:18px 0;font-weight:800;letter-spacing:-.05em}.login h1 span{color:var(--blue)}.login-copy p{color:#bad0df;font-size:18px;line-height:1.7;max-width:560px}.network-line{margin-top:38px;display:flex;gap:12px;align-items:center;color:#d6e8f4;font:12px 'DM Mono';letter-spacing:.08em}.network-line i{height:1px;flex:1;background:linear-gradient(90deg,var(--blue),transparent)}
.login-card-wrap{display:grid;place-items:center;padding:32px;background:rgba(2,14,25,.34);backdrop-filter:blur(14px)}.login-card{width:min(420px,100%);padding:38px;background:#fff;color:var(--navy);border-radius:16px;box-shadow:0 30px 70px #00101e70}.login-card h2{font-size:26px;margin:20px 0 8px;letter-spacing:-.04em}.login-card p{color:#638094;line-height:1.6;margin-bottom:27px}.field{display:grid;gap:8px;margin:15px 0;color:#365166;font-size:12px;font-weight:700}.field input{border:1px solid #d4e0e8;border-radius:8px;padding:13px;color:var(--navy);outline-color:var(--blue)}.submit{border:0;border-radius:8px;background:#0b7bc0;color:white;width:100%;padding:14px;font-weight:800;margin-top:12px}.hint{font-size:11px!important;margin:20px 0 0!important;text-align:center}.demo-actions{display:flex;gap:8px;margin-top:20px}.demo-actions button{flex:1;border:1px solid #cbd9e3;border-radius:7px;background:white;padding:8px;color:#31566f;font-size:11px;font-weight:700}
.shell{min-height:100vh;display:grid;grid-template-columns:250px 1fr;background:#f4f7fa;color:var(--navy)}.side{background:var(--navy);padding:26px 14px;color:#d3e4ef;display:flex;flex-direction:column}.side .brand{padding:0 10px;margin-bottom:36px;color:#fff}.nav-label{font:10px 'DM Mono';letter-spacing:.12em;color:#6e96ad;padding:12px 12px 7px}.nav button{width:100%;border:0;background:transparent;color:#a7c1d0;text-align:left;padding:11px 12px;border-radius:7px;margin:2px 0;font-weight:600;display:flex;align-items:center;gap:10px}.nav button:hover,.nav button.active{background:#123753;color:white}.nav .dot{width:7px;height:7px;border-radius:50%;background:var(--blue)}.user-mini{margin-top:auto;border-top:1px solid #1d405a;padding:18px 10px 0;color:#e7f3fa;font-size:12px}.user-mini span{display:block;color:#86a8ba;font-size:11px;margin-top:3px}.signout{background:none;border:0;color:#83bbdb;padding:8px 0 0;font-size:11px}
.content{padding:28px 34px;max-width:1600px;width:100%;margin:auto}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.topbar h1{font-size:25px;letter-spacing:-.04em;margin:4px 0}.topbar .date{font:12px 'DM Mono';color:#6c8493}.top-actions{display:flex;align-items:center;gap:13px}.search{border:1px solid #dce6ed;border-radius:8px;background:white;padding:10px 12px;min-width:230px;color:#527184}.icon-btn{border:1px solid #dce6ed;background:white;border-radius:8px;padding:10px}.primary{border:0;background:#087fc4;color:white;padding:11px 15px;border-radius:8px;font-weight:800;font-size:12px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.card{background:white;border:1px solid #e4ebf0;border-radius:11px;padding:18px;box-shadow:0 4px 12px #15354c08}.card .label{font:11px 'DM Mono';letter-spacing:.08em;color:#6c8290}.card b{display:block;font-size:28px;margin:10px 0 5px;letter-spacing:-.05em}.delta{font-size:11px;color:#4f997e}.delta.orange{color:#bd7a19}.main-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:16px;margin-top:16px}.section{background:white;border:1px solid #e4ebf0;border-radius:11px;padding:20px}.section-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:18px}.section h2{font-size:15px;margin:0;letter-spacing:-.02em}.section h2 small{display:block;font-size:11px;font-weight:500;color:#7790a0;margin-top:4px}.map{height:250px;border-radius:8px;background:linear-gradient(120deg,#09233a,#155371);position:relative;overflow:hidden}.map:before{content:'';position:absolute;inset:0;background-image:radial-gradient(#4890b7 1px,transparent 1px);background-size:24px 24px;opacity:.25}.continent{position:absolute;color:#7bb7d6;font:11px 'DM Mono';letter-spacing:.1em}.c1{top:50px;left:16%}.c2{top:65px;right:13%}.c3{bottom:34px;right:31%}.route{position:absolute;border-top:2px dashed #50b4ee;width:54%;top:51%;left:21%;transform:rotate(-5deg)}.pin{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 6px #2ed3b744}.p1{left:21%;top:49%}.p2{right:21%;top:44%}.ship{position:absolute;left:48%;top:40%;font-size:20px}.attention{display:grid;gap:12px}.issue{border-left:3px solid var(--red);background:#fff8f7;padding:12px;border-radius:0 7px 7px 0}.issue.amber{border-color:var(--amber);background:#fffaf2}.issue.teal{border-color:var(--teal);background:#f2fcf9}.issue b{font-size:12px}.issue p{margin:5px 0 0;color:#6d8090;font-size:11px}.activity{margin-top:16px}.activity-row{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid #e7eef2}.activity-row:last-child{border:0}.activity-time{font:11px 'DM Mono';color:#7a919f;min-width:37px}.activity-text{font-size:12px}.activity-text span{display:block;color:#8298a7;font-size:11px;margin-top:3px}
.view-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px}.view-head h1{margin:3px 0;font-size:25px}.filters{display:flex;gap:8px;align-items:center;margin-bottom:16px;flex-wrap:wrap}.filters button{border:1px solid #dce6ed;background:white;color:#557083;padding:8px 10px;border-radius:20px;font-size:11px}.filters button.active{background:#e7f5ff;border-color:#9cd6fa;color:#0877b8}.table-wrap{overflow:auto;background:white;border:1px solid #e4ebf0;border-radius:11px}.data-table{border-collapse:collapse;width:100%;min-width:760px}.data-table th{text-align:left;color:#76909f;font:10px 'DM Mono';letter-spacing:.08em;padding:14px 17px;background:#fafcfd;border-bottom:1px solid #e5edf2}.data-table td{padding:15px 17px;border-bottom:1px solid #edf2f5;font-size:12px}.data-table tr{cursor:pointer}.data-table tr:hover{background:#f6fbfe}.mono{font:11px 'DM Mono';color:#3a5c70}.tag{display:inline-block;border-radius:20px;padding:5px 8px;font-size:10px;font-weight:800}.tag.transit{color:#047dbb;background:#e3f5ff}.tag.customs{color:#a26008;background:#fff1d9}.tag.delivery{color:#087d68;background:#ddf8f0}.tag.delivered{color:#607887;background:#edf2f5}.detail{display:grid;grid-template-columns:1.35fr .65fr;gap:16px}.timeline{display:grid;gap:0;margin-top:8px}.milestone{display:grid;grid-template-columns:24px 1fr;gap:12px;padding:0 0 18px}.mile-dot{width:14px;height:14px;border-radius:50%;background:#d5e1e8;position:relative;margin-top:2px}.milestone.complete .mile-dot{background:var(--teal)}.milestone.current .mile-dot{background:var(--blue);box-shadow:0 0 0 5px #dff3ff}.mile-dot:after{content:'';position:absolute;width:2px;height:25px;background:#dce7ed;top:14px;left:6px}.milestone:last-child .mile-dot:after{display:none}.milestone b{font-size:12px}.milestone p{margin:3px 0;color:#7a919f;font-size:11px}.info-list{display:grid;gap:0}.info-list div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #ebf0f3;font-size:12px}.info-list span{color:#758e9c}.note{padding:12px;background:#f2f9fd;border-radius:7px;color:#4d6b7d;font-size:12px;line-height:1.5;margin-top:12px}.back{border:0;background:none;padding:0;color:#087fc4;font-size:12px;font-weight:800}
.portal{background:#f5f8fa}.portal-bar{background:var(--navy);color:white;padding:16px 7vw;display:flex;justify-content:space-between;align-items:center}.portal-bar .brand{font-size:15px}.portal-nav{display:flex;gap:22px;color:#b9d2e1;font-size:12px}.portal-nav button{background:none;border:0;color:inherit;font-weight:600}.portal-nav button.active{color:white}.portal-main{max-width:1160px;margin:auto;padding:38px 24px}.welcome{display:flex;justify-content:space-between;align-items:end;margin-bottom:24px}.welcome h1{font-size:30px;letter-spacing:-.05em;margin:8px 0}.welcome p{margin:0;color:#6b8494}.portal-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}.portal-stat{padding:17px;background:white;border:1px solid #e2ebf0;border-radius:10px}.portal-stat b{display:block;font-size:24px;margin-top:8px}.portal-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:16px}.shipment-card{padding:18px;border:1px solid #e4ebf0;border-radius:8px;margin-top:12px;display:flex;justify-content:space-between;align-items:center}.shipment-card h3{font-size:14px;margin:0 0 5px}.shipment-card p{margin:0;color:#718a99;font-size:12px}.route-mini{color:#117db8;font:11px 'DM Mono';margin-top:8px}.docs{display:grid;gap:10px;margin-top:14px}.doc{background:#f6f9fb;border-radius:7px;padding:11px;font-size:12px}.doc:before{content:'✓';color:#11a78d;font-weight:800;margin-right:8px}.doc small{color:#8298a7;font-size:11px}.doc.doc-open:before{content:'○';color:#bd7a19}
.tag.cancelled{color:#a33b3b;background:#ffe9e9}.status-form{background:white;border:1px solid #cfe4f2;border-left:3px solid #087fc4;border-radius:11px;padding:18px;margin-bottom:16px;display:grid;gap:12px;box-shadow:0 4px 12px #15354c08}.status-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.status-field{display:grid;gap:7px;font:10px 'DM Mono';letter-spacing:.08em;color:#6c8290}.status-field select,.status-field input{border:1px solid #dce6ed;border-radius:8px;padding:11px;color:var(--navy);background:white;font:14px Manrope,sans-serif;outline-color:#087fc4}.status-actions{display:flex;gap:14px;align-items:center;margin-top:2px}.status-actions .primary[disabled]{opacity:.6;cursor:progress}.shipment-card{cursor:pointer}.shipment-card:hover{border-color:#9cd6fa;background:#f8fcfe}
.tag.inv-draft{color:#5c6f7d;background:#eef2f5}.tag.inv-sent{color:#047dbb;background:#e3f5ff}.tag.inv-partial{color:#a26008;background:#fff1d9}.tag.inv-paid{color:#087d68;background:#ddf8f0}.tag.inv-overdue{color:#b03636;background:#ffe4e4}
.card b.money,.portal-stat b.money{font-size:24px}.data-table td.amount,.data-table th.amount{text-align:right;font:12px 'DM Mono';color:#26445a}
.billing-snapshot{display:grid;grid-template-columns:1fr 1fr;gap:12px}.billing-snapshot>div{background:#f7fafc;border:1px solid #e4ebf0;border-left:3px solid #087fc4;border-radius:0 7px 7px 0;padding:13px}.billing-snapshot>div.overdue{border-left-color:var(--red);background:#fff8f7}.billing-snapshot span{display:block;font:10px 'DM Mono';letter-spacing:.08em;color:#6c8290}.billing-snapshot b{display:block;font-size:19px;letter-spacing:-.04em;margin:7px 0 4px}.billing-snapshot small{color:#7a919f;font-size:11px}
.line-items{min-width:0}.line-items td{font-size:12px}.line-items tfoot td{border-top:1px solid #e5edf2;border-bottom:0;padding:11px 17px;color:#5b7486}.line-items tfoot tr.balance td{font-weight:800;color:var(--navy);border-top:2px solid #cfe0ea}.line-items tr{cursor:default}.line-items tr:hover{background:transparent}
.primary.coming-soon{background:#4a6d86}.primary.coming-soon:hover{background:#3f5f76}.coming-soon-note{background:#fff6e8;color:#8a5a12;margin-top:12px}.prototype-note{color:#7a919f;font-size:11px;margin-top:14px}
.tag.booking{color:#5b4bb8;background:#ece9ff}
.tag.qte-new{color:#047dbb;background:#e3f5ff}.tag.qte-preparing{color:#a26008;background:#fff1d9}.tag.qte-sent{color:#5b4bb8;background:#ece9ff}.tag.qte-approved{color:#087d68;background:#ddf8f0}.tag.qte-lost{color:#8a5f5f;background:#f2eaea}.tag.qte-expired{color:#b03636;background:#ffe4e4}
.expired{color:#b03636;font-weight:700}.charge-note{display:block;color:#8298a7;font-size:11px;margin-top:3px}.line-items thead th{font:10px 'DM Mono';letter-spacing:.08em}.detail-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tag.doc-available{color:#087d68;background:#ddf8f0}.tag.doc-pending{color:#a26008;background:#fff1d9}.tag.doc-review{color:#b03636;background:#ffe4e4}
.compliance{border-left:3px solid var(--teal);background:#f2fcf9;padding:13px;border-radius:0 7px 7px 0}.compliance.warning{border-left-color:var(--amber);background:#fffaf2}.compliance.blocking{border-left-color:var(--red);background:#fff8f7}.compliance b{font-size:12px;display:block}.compliance p{margin:6px 0 0;color:#6d8090;font-size:11px;line-height:1.5}
.vis{font:10px 'DM Mono';letter-spacing:.05em;padding:4px 7px;border-radius:5px}.vis.yes{color:#087d68;background:#eafaf5}.vis.no{color:#8a5f5f;background:#f4ecec}
.doc-group{padding:16px 0;border-bottom:1px solid #edf2f5}.doc-group:last-of-type{border-bottom:0}.doc-group .section-head{margin-bottom:10px}
select.search{min-width:200px;cursor:pointer}
.tag.acct-active{color:#087d68;background:#ddf8f0}.tag.acct-prospect{color:#047dbb;background:#e3f5ff}.tag.acct-on-hold{color:#b03636;background:#ffe4e4}.tag.acct-inactive{color:#607887;background:#edf2f5}
.tag.hlth-good{color:#087d68;background:#ddf8f0}.tag.hlth-watch{color:#a26008;background:#fff1d9}.tag.hlth-at-risk{color:#b03636;background:#ffe4e4}.tag.hlth-prospect{color:#5b4bb8;background:#ece9ff}
.contact{padding:11px 0;border-bottom:1px solid #ebf0f3;font-size:12px}.contact:last-child{border-bottom:0}.contact b{display:block}.contact span{display:block;color:#758e9c;font-size:11px;margin-top:3px}
.analytics-cards{grid-template-columns:repeat(3,1fr)}.card .basis{display:block;margin-top:9px;font:9px 'DM Mono';letter-spacing:.09em;color:#8ba0ad}.card .basis.period{color:#4f7c96}
.range-row{align-items:center}.range-note{color:#7a919f;font-size:11px;flex:1;min-width:220px}
.bars{display:grid;gap:10px}.bar-row{display:grid;grid-template-columns:minmax(120px,1.15fr) 2.2fr auto;gap:12px;align-items:center}
.bar-label{font-size:12px;font-weight:600;color:var(--navy);min-width:0;overflow-wrap:anywhere}.bar-label small{display:block;font-weight:500;color:#8298a7;font-size:11px;margin-top:2px}
.bar-track{background:#eef3f7;border-radius:3px;height:14px;overflow:hidden}.bar-track i{display:block;height:100%;border-radius:0 4px 4px 0;transition:width .2s ease}
.bar-value{font:12px 'DM Mono';color:#26445a;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.columns{display:flex;align-items:flex-end;gap:2px;min-height:210px;padding-top:8px;border-bottom:1px solid #e5edf2;overflow-x:auto}
.col{flex:1;min-width:52px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}
.col-value{font:10px 'DM Mono';color:#5b7486;white-space:nowrap;min-height:13px;font-variant-numeric:tabular-nums}
.col-track{width:100%;max-width:24px;height:150px;display:flex;align-items:flex-end}.col-track i{display:block;width:100%;background:#087fc4;border-radius:4px 4px 0 0;transition:height .2s ease}
.col-label{font:10px 'DM Mono';color:#7a919f;white-space:nowrap;padding-top:6px}
.chart-empty{color:#8298a7;font-size:12px;padding:18px 0;margin:0}.info-list b.flagged{color:#b03636}
.nav-badge{margin-left:auto;background:#087fc4;color:#fff;border-radius:10px;padding:1px 7px;font:10px 'DM Mono';font-weight:700}.icon-btn.bell{position:relative}.icon-btn.bell .nav-badge{position:absolute;top:-6px;right:-6px;margin:0}.portal-nav .nav-badge{margin-left:6px}
.thread{display:grid;gap:12px}.msg-wrap{display:grid;gap:4px}.msg-link{text-align:left;font:11px 'DM Mono';color:#087fc4}
.msg{background:#f8fbfd;border:1px solid #e4ebf0;border-left:3px solid #087fc4;border-radius:0 8px 8px 0;padding:13px}
.msg.internal{background:#fff8ef;border-left-color:var(--amber)}.msg.unread{background:#eef7fd;cursor:pointer}.msg.internal.unread{background:#fff3e2}
.msg-head{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:7px}.msg-head b{font-size:12px}.msg-role{font:10px 'DM Mono';color:#7a919f}
.msg-time{font:10px 'DM Mono';color:#8ba0ad;margin-left:auto}.msg p{margin:0;font-size:12px;line-height:1.6;color:#3c586b}
.unread-dot{font:9px 'DM Mono';letter-spacing:.08em;color:#087fc4;background:#e3f5ff;border-radius:4px;padding:3px 6px}
.composer{margin-top:14px}.coming-soon-link{color:#7a919f;font-weight:600}
.notif-list{display:grid;gap:10px}.notif{display:grid;grid-template-columns:130px 1fr auto;gap:12px;align-items:center;padding:12px;border:1px solid #e4ebf0;border-left:3px solid #b6c6d1;border-radius:0 8px 8px 0;background:#fff;cursor:pointer}
.notif:hover{background:#f8fbfd}.notif.unread{background:#f4fafe;border-color:#cfe4f2}
.notif.sev-critical{border-left-color:var(--red)}.notif.sev-warning{border-left-color:var(--amber)}.notif.sev-good{border-left-color:var(--teal)}.notif.sev-info{border-left-color:#087fc4}
.notif-kind{font:10px 'DM Mono';letter-spacing:.06em;color:#6c8290}.notif-body b{display:block;font-size:12px}.notif-body span{display:block;color:#7a919f;font-size:11px;margin-top:3px}
.notif-meta{display:flex;gap:8px;align-items:center;white-space:nowrap}
.tag.svc-ocean{color:#047dbb;background:#e3f5ff}.tag.svc-rail{color:#5b4bb8;background:#ece9ff}.tag.svc-trucking{color:#a26008;background:#fff1d9}.tag.svc-customs{color:#087d68;background:#ddf8f0}
.tag.ven-active{color:#087d68;background:#ddf8f0}.tag.ven-under-review{color:#a26008;background:#fff1d9}.tag.ven-inactive{color:#607887;background:#edf2f5}
.muted-cell{color:#8ba0ad;font-weight:500}.data-table td.flagged{color:#b03636;font-weight:700}.info-list b button.back{font-size:12px}
.tag.role-admin{color:#8a3ffc;background:#f2ebff}.tag.role-operations{color:#047dbb;background:#e3f5ff}.tag.role-sales{color:#a26008;background:#fff1d9}.tag.role-accounting{color:#087d68;background:#ddf8f0}.tag.role-customer{color:#607887;background:#edf2f5}
.tag.usr-active{color:#087d68;background:#ddf8f0}.tag.usr-inactive{color:#b03636;background:#ffe4e4}
.tag.aud-authentication{color:#8a3ffc;background:#f2ebff}.tag.aud-shipment{color:#047dbb;background:#e3f5ff}.tag.aud-quote{color:#5b4bb8;background:#ece9ff}.tag.aud-invoice{color:#087d68;background:#ddf8f0}.tag.aud-document{color:#a26008;background:#fff1d9}.tag.aud-message{color:#0f7d8c;background:#dff6f9}.tag.aud-user{color:#b03636;background:#ffe4e4}
.charge-note.mono{font:10px 'DM Mono';color:#9ab0bd}
/* ===================== mobile experience ===================== */
.m-app{min-height:100vh;background:#f4f7fa;color:var(--navy);padding-bottom:76px;display:flex;flex-direction:column}
.m-head{background:var(--navy);color:#fff;padding:14px 16px 18px;position:sticky;top:0;z-index:30}
.m-head-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.m-brand{font-size:14px;color:#fff}.m-head-actions{display:flex;gap:8px;align-items:center}
.m-install{background:rgba(77,181,255,.16);border:1px solid #2f6288;color:#8fc4e4;border-radius:20px;padding:6px 11px;font-size:11px;font-weight:700}
.m-signout{background:none;border:0;color:#83bbdb;font-size:11px;font-weight:700;padding:6px 2px}
.m-head-title{margin-top:14px}.m-head-title h1{margin:0;font-size:22px;letter-spacing:-.04em}
.m-head-title p{margin:5px 0 0;color:#9dc0d6;font-size:12px}
.m-body{flex:1;padding:16px}
.m-lead{margin:0 0 14px;color:#5d7789;font-size:13px;font-weight:600}
.m-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.m-tile{background:#fff;border:1px solid #e4ebf0;border-radius:11px;padding:15px}
.m-tile b{display:block;font-size:27px;letter-spacing:-.05em}
.m-tile span{display:block;font-size:12px;font-weight:700;margin-top:3px}
.m-tile small{display:block;color:#7a919f;font-size:11px;margin-top:3px}
.m-tile.accent{border-color:#9cd6fa;background:#f2f9fe}.m-tile.accent b{color:#087fc4}
.m-tile.warn{border-color:#f0d4a4;background:#fffaf2}.m-tile.warn b{color:#a26008}
.m-tile.danger{border-color:#f2c2c2;background:#fff8f7}.m-tile.danger b{color:#b03636}
.m-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.m-actions button{background:#fff;border:1px solid #dce6ed;border-radius:11px;padding:14px 12px;text-align:left;font-size:12.5px;font-weight:700;color:var(--navy);display:grid;gap:8px}
.m-actions button span{font-size:18px;color:#087fc4}
.m-actions button:active{background:#eef6fb}
.m-h2{font-size:14px;margin:20px 0 10px;letter-spacing:-.02em}.m-h2 small{color:#8298a7;font-weight:500;margin-left:6px}
.m-ship{display:block;width:100%;text-align:left;background:#fff;border:1px solid #e4ebf0;border-radius:11px;padding:14px;margin-bottom:10px}
.m-ship-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.m-ship-top b{font:12px 'DM Mono';color:#26445a}
.m-ship-route{font-size:13px;font-weight:700;margin:8px 0 6px}
.m-ship-foot{display:flex;justify-content:space-between;color:#7a919f;font-size:11px}
.m-more{width:100%;background:none;border:1px dashed #cbd9e3;border-radius:10px;padding:12px;color:#087fc4;font-weight:700;font-size:12px;margin-top:4px}
.m-empty{color:#8298a7;font-size:12.5px;padding:14px 0;margin:0}
.m-note{color:#7a919f;font-size:11.5px;line-height:1.6;margin-top:16px}
.m-alert{border-radius:11px;padding:14px;margin-bottom:14px;border:1px solid}
.m-alert b{font-size:13px;display:block}.m-alert p{margin:5px 0 9px;font-size:12px;line-height:1.55}
.m-alert button{background:none;border:0;padding:0;font-weight:800;font-size:12px}
.m-alert.warn{background:#fffaf2;border-color:#f0d4a4;color:#8a5a12}.m-alert.warn button{color:#a26008}
.m-alert.danger{background:#fff8f7;border-color:#f2c2c2;color:#8c2f2f}.m-alert.danger button{color:#b03636}
.m-menu{display:grid;gap:8px}
.m-menu button{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #e4ebf0;border-radius:11px;padding:15px;font-size:13px;font-weight:700;color:var(--navy)}
.m-menu button span{color:#9ab0bd}
.m-back{background:none;border:0;color:#087fc4;font-size:12px;font-weight:800;padding:0 0 12px}
.m-track-card{background:#fff;border:1px solid #e4ebf0;border-radius:12px;padding:18px;margin-bottom:14px}
.m-track-status{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.m-track-eta{font:11px 'DM Mono';color:#5d7789}
.m-track-route b{display:block;font-size:16px;letter-spacing:-.03em}
.m-track-route span{display:block;color:#7a919f;font-size:12px;margin-top:4px}
.m-track-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid #edf2f5}
.m-track-grid span{display:block;font:9px 'DM Mono';color:#7a919f;letter-spacing:.06em}
.m-track-grid b{display:block;font-size:12.5px;margin-top:4px}
.m-next{margin-top:16px;padding:12px;background:#f2f8fd;border-left:3px solid #087fc4;border-radius:0 8px 8px 0}
.m-next span{font:9px 'DM Mono';color:#5d7789;letter-spacing:.08em}
.m-next p{margin:6px 0 0;font-size:12.5px;line-height:1.6;color:#3c586b}
.m-doc{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:1px solid #e4ebf0;border-radius:10px;padding:12px;margin-bottom:8px}
.m-doc b{display:block;font-size:12.5px}.m-doc span{display:block;color:#8298a7;font-size:11px;margin-top:2px}
.m-event{background:#fff;border:1px solid #e4ebf0;border-radius:10px;padding:12px;margin-bottom:8px}
.m-event b{display:block;font-size:12.5px}.m-event span{color:#8298a7;font-size:11px}
.m-brief{border-radius:11px;padding:14px;margin-bottom:14px;background:#0d2f4d;color:#dceaf5}
.m-brief-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.m-brief-head b{font-size:12px;color:#fff}
.m-brief p{margin:0;font-size:12px;line-height:1.65;color:#b9d6ea}
.m-task{background:#fff;border:1px solid #e4ebf0;border-left:3px solid #b6c6d1;border-radius:0 11px 11px 0;padding:14px;margin-bottom:10px}
.m-task.danger{border-left-color:#b03636;background:#fff8f7}
.m-task.warn{border-left-color:var(--amber);background:#fffaf2}
.m-task-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.m-task-head b{font-size:12.5px}.m-task p{margin:0 0 10px;color:#5d7789;font-size:12px;line-height:1.55}
.m-task-actions button{background:none;border:0;padding:0;color:#087fc4;font-weight:800;font-size:12px}
.m-form{background:#fff;border:1px solid #cfe4f2;border-left:3px solid #087fc4;border-radius:0 11px 11px 0;padding:15px;margin:12px 0;display:grid;gap:11px}
.m-form label{display:grid;gap:6px;font:10px 'DM Mono';letter-spacing:.06em;color:#6c8290}
.m-form select,.m-form input{border:1px solid #dce6ed;border-radius:8px;padding:12px;font:14px Manrope,sans-serif;color:var(--navy);background:#fff}
.m-primary{width:100%;background:#087fc4;border:0;color:#fff;border-radius:9px;padding:14px;font-weight:800;font-size:13px}
.m-tabs{position:fixed;bottom:0;left:0;right:0;z-index:35;display:flex;background:var(--navy);border-top:1px solid #1d405a;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.m-tabs button{flex:1;background:none;border:0;color:#7fa0b6;font-size:10px;font-weight:700;padding:8px 2px;display:grid;gap:3px;justify-items:center;position:relative}
.m-tabs button.active{color:var(--blue)}
.m-tab-icon{font-size:17px;line-height:1}
.m-dot{position:absolute;top:2px;right:24%;background:#087fc4;color:#fff;border-radius:9px;font-style:normal;font-size:9px;font-weight:800;padding:1px 5px}
.m-sheet{position:fixed;inset:0;z-index:60;background:rgba(4,18,31,.62);display:flex;align-items:flex-end}
.m-sheet-card{background:#fff;width:100%;border-radius:16px 16px 0 0;padding:26px 20px calc(26px + env(safe-area-inset-bottom));text-align:center}
.m-sheet-mark{font-size:28px;color:#087fc4}
.m-sheet-card h3{margin:10px 0 8px;font-size:17px}
.m-sheet-card p{margin:0 0 12px;color:#5d7789;font-size:13px;line-height:1.65}
.m-sheet-fine{color:#8298a7!important;font-size:11.5px!important}

/* ===================== AI logistics assistant ===================== */
.tag.ai-preview{color:#5b4bb8;background:#ece9ff}
.tag.risk-low{color:#087d68;background:#ddf8f0}.tag.risk-medium{color:#a26008;background:#fff1d9}
.tag.risk-high{color:#b03636;background:#ffe4e4}.tag.risk-critical{color:#fff;background:#b03636}
.tag.sev-low{color:#607887;background:#edf2f5}.tag.sev-medium{color:#a26008;background:#fff1d9}
.tag.sev-high{color:#b03636;background:#ffe4e4}.tag.sev-critical{color:#fff;background:#b03636}
.ai-banner{background:linear-gradient(120deg,#0d2f4d,#134b72);color:#dceaf5;border-radius:12px;padding:20px 22px;margin-bottom:16px}
.ai-banner b{color:#fff;font-size:13px}.ai-banner p{margin:8px 0 0;font-size:12.5px;line-height:1.7;color:#b9d6ea}
.ai-briefing{font-size:14px;line-height:1.8;color:#3c586b;margin:0 0 18px;max-width:900px}
.ai-signals{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.ai-signals div{background:#f7fafc;border:1px solid #e4ebf0;border-radius:9px;padding:13px}
.ai-signals span{display:block;font:10px 'DM Mono';color:#6c8290;letter-spacing:.05em}
.ai-signals b{display:block;font-size:22px;margin-top:6px;letter-spacing:-.04em}.ai-signals b.flagged{color:#b03636}
.ask-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px}
.ask-chip{text-align:left;background:#fff;border:1px solid #dce6ed;border-radius:11px;padding:15px;color:var(--navy);font-size:12.5px;font-weight:700;line-height:1.5;display:grid;gap:7px;transition:border-color .15s,box-shadow .15s}
.ask-chip span{font-size:17px;color:#087fc4}.ask-chip small{display:block;font:10px 'DM Mono';color:#8298a7;font-weight:500;letter-spacing:.05em}
.ask-chip:hover{border-color:#9cd6fa;box-shadow:0 4px 14px #15354c10}
.ask-chip.active{border-color:#087fc4;background:#f2f9fe;box-shadow:0 0 0 1px #087fc4}
.ai-empty{background:#fff;border:1px solid #e4ebf0;border-radius:12px;padding:44px;text-align:center;color:#5d7789}
.ai-empty-mark{font-size:30px;color:#087fc4;margin-bottom:12px}
.ai-empty h3{margin:0 0 10px;font-size:17px;color:var(--navy)}.ai-empty p{margin:0 auto;max-width:520px;font-size:13px;line-height:1.7}
.ai-list{text-align:left;max-width:460px;margin:14px auto 0;color:#4a687d;font-size:12.5px;line-height:2}
.ai-answer{background:#fff;border:1px solid #e4ebf0;border-radius:12px;padding:24px;box-shadow:0 4px 14px #15354c08}
.ai-answer-head{display:flex;justify-content:space-between;align-items:start;gap:18px;padding-bottom:18px;border-bottom:1px solid #edf2f5}
.ai-answer-head h3{margin:6px 0 0;font-size:19px;letter-spacing:-.03em;max-width:760px;line-height:1.45}
.ai-sections{display:grid;grid-template-columns:1.35fr .65fr;gap:26px;padding-top:20px}
.ai-sections h4{font-size:12px;margin:0 0 12px;letter-spacing:.02em}
.ai-sections h4 small{font-weight:500;color:#8298a7;font-size:11px;margin-left:6px}
.ai-findings{display:grid;gap:10px}
.ai-finding{border:1px solid #e4ebf0;border-left:3px solid #b6c6d1;border-radius:0 9px 9px 0;padding:13px;background:#fafcfd}
.ai-finding.sev-critical{border-left-color:#b03636;background:#fff8f7}
.ai-finding.sev-high{border-left-color:var(--red);background:#fff8f7}
.ai-finding.sev-medium{border-left-color:var(--amber);background:#fffaf2}
.ai-finding.sev-low{border-left-color:var(--teal);background:#f6fdfb}
.ai-finding-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.ai-finding b{font-size:12.5px}.ai-finding p{margin:0;color:#5d7789;font-size:12px;line-height:1.6}
.ai-actions{margin:0;padding-left:18px;color:#3c586b;font-size:12.5px;line-height:1.9}
.ai-sources{display:grid;gap:8px}
.ai-source{display:flex;align-items:center;gap:9px;background:#f7fafc;border:1px solid #e4ebf0;border-radius:8px;padding:9px 11px;font-size:11.5px;color:#3c586b;text-align:left;width:100%}
.ai-source:hover{background:#eef6fb;border-color:#9cd6fa}
.ai-modules{display:flex;flex-wrap:wrap;gap:7px}
.ai-modules span{background:#eef3f7;color:#4a687d;border-radius:20px;padding:5px 10px;font:10px 'DM Mono';letter-spacing:.04em}
.ai-provenance{margin:20px 0 0;padding-top:14px;border-top:1px solid #edf2f5;color:#8298a7;font-size:11px}
.ai-summary{background:#f2f8fd;border:1px solid #cfe4f2;border-left:3px solid #087fc4;border-radius:0 9px 9px 0;padding:14px}
.ai-summary p{margin:0 0 10px;font-size:12.5px;line-height:1.75;color:#3c586b}
@media(max-width:1100px){.ask-grid{grid-template-columns:repeat(3,1fr)}.ai-signals{grid-template-columns:repeat(3,1fr)}.ai-sections{grid-template-columns:1fr}}

/* ===================== public marketing site ===================== */
.site{background:#061728;color:var(--ink)}.wrap{max-width:1180px;margin:auto;padding:0 28px}
.site-nav{position:sticky;top:0;z-index:40;background:rgba(6,23,40,.92);backdrop-filter:blur(12px);border-bottom:1px solid #12314c}
.site-nav-inner{max-width:1180px;margin:auto;padding:14px 28px;display:flex;align-items:center;gap:26px}
.site-brand{background:none;border:0;color:#fff;padding:0}.site-brand i{font-style:normal;font-weight:500;color:#7fb2d4;letter-spacing:.14em;font-size:12px}
.site-links{display:flex;gap:22px;margin-left:auto}.site-links button{background:none;border:0;color:#b9d2e1;font-size:13px;font-weight:600;padding:6px 0}
.site-links button:hover{color:#fff}
.site-actions{display:flex;gap:10px}
.ghost{background:transparent;border:1px solid #2c5878;color:#d6e8f4;padding:11px 15px;border-radius:8px;font-weight:700;font-size:12px}
.ghost:hover{border-color:var(--blue);color:#fff}.primary.lg,.ghost.lg{padding:14px 22px;font-size:13px}
.hero{position:relative;overflow:hidden;padding:96px 0 84px;background:radial-gradient(circle at 18% 22%,#134b72 0,#071a2d 46%,#061728 74%)}
.hero-inner{position:relative;max-width:1180px;margin:auto;padding:0 28px}
.hero h1{font-size:clamp(44px,6vw,78px);line-height:1.04;letter-spacing:-.05em;font-weight:800;margin:16px 0 20px}
.hero h1 span{color:var(--blue)}.hero-lead{color:#c2d8e6;font-size:19px;line-height:1.7;max-width:620px;margin:0}
.hero-modes{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 18px}
.mode-chip{border:1px solid #2f6288;background:rgba(13,43,68,.7);color:#d8ebf7;border-radius:20px;padding:8px 15px;font-size:12px;font-weight:600}
.hero-visibility{color:#8fc4e4;font-size:14px;line-height:1.6;max-width:620px;margin:0 0 30px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.section-intro{max-width:660px;margin-bottom:40px}.section-intro h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.04em;margin:12px 0 14px;font-weight:800}
.section-intro p{color:#6f8798;font-size:16px;line-height:1.7;margin:0}
.section-intro.light h2{color:var(--ink)}.section-intro.light p{color:#b2cadb}
.net{background:#08203a;padding:74px 0;border-top:1px solid #12314c;border-bottom:1px solid #12314c}
.net .section-intro h2{color:var(--ink)}.net .section-intro p{color:#b2cadb}
.net-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.net-stat{background:rgba(16,47,76,.6);border:1px solid #1d456b;border-radius:11px;padding:20px}
.net-stat b{display:block;font-size:36px;letter-spacing:-.05em;color:var(--blue)}
.net-stat span{display:block;font-size:12px;font-weight:700;margin:8px 0 4px}
.net-stat small{color:#7fa0b6;font-size:11px}
.net-note{color:#6f92aa;font-size:11px;margin-top:22px}
.services{background:#f4f7fa;color:var(--navy);padding:82px 0}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc-card{background:#fff;border:1px solid #e4ebf0;border-radius:12px;padding:26px;box-shadow:0 4px 14px #15354c08}
.svc-icon{width:42px;height:42px;border-radius:10px;background:#e7f3fb;color:#0b6fa8;display:grid;place-items:center;font-size:18px;margin-bottom:16px}
.svc-card h3{font-size:17px;margin:0 0 10px;letter-spacing:-.02em}
.svc-card p{color:#5d7789;font-size:13px;line-height:1.65;margin:0 0 14px}
.svc-card ul{margin:0;padding-left:16px;color:#4a687d;font-size:12px;line-height:1.9}
.journey{background:#071f36;padding:82px 0}
.journey-track{display:flex;align-items:stretch;gap:10px}
.journey-step{flex:1;background:rgba(16,47,76,.55);border:1px solid #1d456b;border-radius:12px;padding:24px;position:relative}
.j-icon{font-size:24px;color:var(--blue)}.j-num{font:11px 'DM Mono';color:#5f89a6;margin:10px 0 6px;letter-spacing:.1em}
.journey-step h3{margin:0 0 9px;font-size:17px}.journey-step p{color:#a9c5d8;font-size:12px;line-height:1.65;margin:0}
.journey-arrow{align-self:center;color:var(--blue);font-size:22px;flex:0 0 auto}
.industries{background:#fff;color:var(--navy);padding:82px 0}
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ind-card{border:1px solid #e4ebf0;border-radius:12px;padding:24px;background:#fafcfd}
.ind-icon{font-size:22px;color:#0b6fa8;margin-bottom:12px}
.ind-card h3{margin:0 0 9px;font-size:16px}.ind-card p{color:#5d7789;font-size:12.5px;line-height:1.65;margin:0}
.track{background:#08203a;padding:82px 0}
.track-form{display:flex;gap:10px;max-width:560px;margin-bottom:20px}
.track-form input{flex:1;border:1px solid #2c5878;background:rgba(6,23,40,.7);color:#eaf4fb;border-radius:8px;padding:14px 15px;font:14px 'DM Mono';letter-spacing:.04em}
.track-form input::placeholder{color:#5f89a6}.track-form input:focus{outline:2px solid var(--blue);outline-offset:-1px}
.track-result{max-width:760px}
.track-msg{color:#b2cadb;font-size:13px;padding:14px 0}.track-msg.warn{color:var(--amber)}
.track-card{background:#fff;color:var(--navy);border-radius:12px;padding:24px;margin-top:6px}
.track-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:18px}.track-head h3{margin:4px 0 0;font:20px 'DM Mono';letter-spacing:-.01em}
.track-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;border-top:1px solid #edf2f5;padding-top:16px}
.track-grid span{display:block;font:10px 'DM Mono';color:#7a919f;letter-spacing:.06em;text-transform:uppercase}
.track-grid b{display:block;font-size:13px;margin-top:5px}
.track-foot{color:#6d8797;font-size:12px;margin:16px 0 14px}
.track-note{color:#6f92aa;font-size:11px;margin-top:20px;max-width:620px}
.portal-preview{background:#f4f7fa;color:var(--navy);padding:82px 0}
.portal-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.portal-preview h2{font-size:clamp(26px,3.2vw,36px);letter-spacing:-.04em;margin:12px 0 14px}
.preview-lead{color:#5d7789;font-size:15px;line-height:1.7}
.preview-list{list-style:none;padding:0;margin:22px 0 26px}
.preview-list li{padding:11px 0;border-bottom:1px solid #e4ebf0}
.preview-list b{display:block;font-size:13px}.preview-list span{color:#6d8797;font-size:12px}
.preview-frame{background:var(--navy);border-radius:13px;overflow:hidden;box-shadow:0 24px 60px #0a2a4530}
.preview-bar{display:flex;align-items:center;gap:6px;padding:12px 15px;background:#0a2237;border-bottom:1px solid #1d405a}
.preview-bar i{width:9px;height:9px;border-radius:50%;background:#2d5474}
.preview-bar span{margin-left:10px;font:11px 'DM Mono';color:#7fa0b6}
.preview-body{padding:22px;background:#f7fafc}
.preview-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;color:var(--navy)}
.preview-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.preview-stats div{background:#fff;border:1px solid #e4ebf0;border-radius:8px;padding:12px}
.preview-stats span{font:9px 'DM Mono';color:#7a919f;letter-spacing:.06em}
.preview-stats b{display:block;font-size:20px;color:var(--navy);margin-top:6px}
.preview-line{height:9px;background:#e7eef3;border-radius:5px;margin-bottom:9px}.preview-line.short{width:62%}
.preview-caption{color:#8ba0ad;font-size:11px;margin:14px 0 0}
.cta-band{background:#071f36;padding:82px 0}
.cta-inner{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:start}
.cta-band h2{font-size:clamp(26px,3.2vw,36px);letter-spacing:-.04em;margin:12px 0 16px}
.cta-band p{color:#b2cadb;font-size:15px;line-height:1.75;margin:0}
.cta-points{display:grid;gap:14px;margin-top:26px}
.cta-points b{display:block;font-size:13px}.cta-points span{color:#89aac1;font-size:12px}
.cta-box{background:rgba(16,47,76,.6);border:1px solid #1d456b;border-radius:13px;padding:28px;display:grid;gap:12px}
.cta-box h3{margin:0;font-size:19px}.cta-box p{color:#a9c5d8;font-size:13px}
.cta-fine{color:#7fa0b6;font-size:11px!important;margin-top:4px!important}
.site-foot{background:#04121f;border-top:1px solid #12314c;padding:56px 0 24px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding-bottom:34px}
.foot-copy{color:#7fa0b6;font-size:12.5px;line-height:1.7;margin:14px 0 16px;max-width:330px}
.foot-badges{display:flex;flex-wrap:wrap;gap:8px}
.foot-badges span{border:1px solid #1d456b;color:#8fc4e4;border-radius:20px;padding:5px 11px;font-size:10px;font-weight:700}
.foot-grid h4{font:10px 'DM Mono';letter-spacing:.12em;color:#5f89a6;margin:0 0 14px;text-transform:uppercase}
.foot-grid button{display:block;background:none;border:0;color:#a9c5d8;font-size:12.5px;padding:5px 0;text-align:left}
.foot-grid button:hover{color:#fff}
.foot-contact{margin-top:14px;display:grid;gap:5px;color:#7fa0b6;font:11px 'DM Mono'}
.foot-base{display:flex;justify-content:space-between;gap:16px;border-top:1px solid #12314c;padding-top:20px;color:#5f89a6;font-size:11px;flex-wrap:wrap}
.back.to-site{display:block;margin-bottom:16px;color:#0b7bc0}
@media(max-width:1000px){.net-stats{grid-template-columns:repeat(3,1fr)}.svc-grid{grid-template-columns:repeat(2,1fr)}.ind-grid{grid-template-columns:repeat(2,1fr)}.journey-track{flex-wrap:wrap}.journey-arrow{display:none}.journey-step{flex:1 1 44%}.portal-preview-grid,.cta-inner{grid-template-columns:1fr}.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.login{grid-template-columns:1fr}.login-intro{min-height:430px}.shell{grid-template-columns:1fr}.side{display:none}.cards,.portal-stats{grid-template-columns:repeat(2,1fr)}.main-grid,.detail,.portal-grid,.status-row,.billing-snapshot,.analytics-cards{grid-template-columns:1fr}.bar-row{grid-template-columns:1fr 1.6fr auto}.notif{grid-template-columns:1fr}.notif-meta{margin-top:4px}.content{padding:22px}.search{display:none}.portal-nav{display:none}}@media(max-width:520px){.cards,.portal-stats{grid-template-columns:1fr}.top-actions .primary{display:none}.login-intro{padding:32px}.login h1{font-size:44px}.login-card-wrap{padding:22px}}

/* ===================== simplified export surfaces ===================== */
.ex-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.ex-tile{background:#fff;border:1px solid #e4ebf0;border-radius:13px;padding:24px;text-align:left;box-shadow:0 4px 14px #15354c08}
.ex-tile b{display:block;font-size:38px;letter-spacing:-.05em;line-height:1}
.ex-tile span{display:block;font-size:13px;font-weight:700;color:#5d7789;margin-top:10px}
.ex-tile:hover{border-color:#9cd6fa}
.ex-tile.accent b{color:#087fc4}.ex-tile.accent{background:#f4faff;border-color:#cfe4f2}
.ex-tile.warn b{color:#b03636}.ex-tile.warn{background:#fff8f7;border-color:#f2c2c2}
.ex-brief{background:#f2f8fd;border-left:3px solid #087fc4;border-radius:0 9px 9px 0;padding:14px 16px;font-size:13px;line-height:1.7;color:#3c586b;margin:0 0 20px}
.ex-brief b{margin-right:8px;color:var(--navy)}
.ex-list .data-table td{padding:17px}
.portal-secondary{display:flex;gap:18px;margin-top:34px;padding-top:18px;border-top:1px solid #e4ebf0}
.portal-secondary button{background:none;border:0;color:#7a919f;font-size:12px;font-weight:700;padding:4px 0}
.portal-secondary button.active,.portal-secondary button:hover{color:#087fc4}
.hero-proof{display:flex;flex-wrap:wrap;gap:20px;margin:26px 0 8px;color:#8fc4e4;font-size:12.5px;font-weight:600}
.why{background:#08203a;padding:82px 0}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.why-grid article{background:rgba(16,47,76,.55);border:1px solid #1d456b;border-radius:13px;padding:26px}
.why-icon{font-size:24px;color:var(--blue);margin-bottom:14px}
.why-grid h3{margin:0 0 9px;font-size:17px}.why-grid p{color:#a9c5d8;font-size:13px;line-height:1.65;margin:0}
.cta-strip{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:38px;padding-top:28px;border-top:1px solid rgba(255,255,255,.09)}
.cta-strip span{color:#8fb4cd;font-size:13px}
.services .cta-strip,.process .cta-strip{border-top-color:#e4ebf0}.process .cta-strip span{color:#6d8797}
.process{background:#f4f7fa;color:var(--navy);padding:82px 0}
.process-track{display:flex;align-items:stretch;gap:12px}
.process-step{flex:1;background:#fff;border:1px solid #e4ebf0;border-radius:13px;padding:26px}
.p-num{font:11px 'DM Mono';color:#9ab0bd;letter-spacing:.12em;margin-bottom:12px}
.process-step h3{margin:0 0 9px;font-size:17px}.process-step p{color:#5d7789;font-size:13px;line-height:1.65;margin:0}
.process-arrow{align-self:center;color:#9cd6fa;font-size:22px}
.trust{background:#071f36;padding:82px 0}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.trust-grid div{background:rgba(16,47,76,.5);border:1px solid #1d456b;border-radius:12px;padding:22px}
.trust-grid b{display:block;font-size:14px;margin-bottom:7px}
.trust-grid span{color:#a9c5d8;font-size:12.5px;line-height:1.6}
.quote-band{background:#f4f7fa;color:var(--navy);padding:82px 0}
.quote-band .ghost,.about .ghost{color:#071e33;border-color:#1a5f8f;background:transparent}
.quote-band .ghost:hover,.about .ghost:hover{background:#087fc4;border-color:#087fc4;color:#fff}
.quote-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
.quote-band h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.04em;margin:12px 0 14px}
.quote-lead{color:#5d7789;font-size:15px;line-height:1.7;margin:0 0 22px}
.quote-points{list-style:none;padding:0;margin:0 0 24px}
.quote-points li{padding:12px 0;border-bottom:1px solid #e4ebf0}
.quote-points b{display:block;font-size:13px}.quote-points span{color:#6d8797;font-size:12px}
.quote-form{background:#fff;border:1px solid #e4ebf0;border-radius:14px;padding:28px;box-shadow:0 12px 40px #15354c12;display:grid;gap:14px}
.quote-form h3{margin:0 0 4px;font-size:19px;letter-spacing:-.02em}
.qf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.quote-form label{display:grid;gap:7px;font-size:11px;font-weight:800;color:#4a687d;letter-spacing:.02em}
.quote-form input,.quote-form select{border:1px solid #dce6ed;border-radius:9px;padding:13px;font:14px Manrope,sans-serif;color:var(--navy);background:#fff}
.quote-form input:focus,.quote-form select:focus{outline:2px solid #087fc4;outline-offset:-1px}
.qf-fine{color:#8ba0ad;font-size:11px;margin:0;text-align:center}
.qf-ok{background:#eafaf5;border:1px solid #b6e6d5;border-radius:9px;padding:14px;color:#0a6b56;font-size:13px}
.qf-ok b{display:block;margin-bottom:5px}.qf-ok p{margin:0;font-size:12px}
.qf-err{background:#fff1f1;border:1px solid #f2c2c2;border-radius:9px;padding:12px;color:#8c2f2f;font-size:12.5px}
@media(max-width:1000px){.ex-tiles{grid-template-columns:1fr 1fr}.why-grid{grid-template-columns:1fr 1fr}.trust-grid{grid-template-columns:1fr 1fr}.process-track{flex-wrap:wrap}.process-arrow{display:none}.process-step{flex:1 1 44%}.quote-grid{grid-template-columns:1fr}}
@media(max-width:620px){.ex-tiles{grid-template-columns:1fr 1fr}.why-grid,.trust-grid{grid-template-columns:1fr}.qf-row{grid-template-columns:1fr}}

/* ------------------------------------------------ proof of delivery */
.pod-ref{background:#f2f6f9;color:#6d8797;font-style:italic}
.pod-weight{display:grid;grid-template-columns:2fr 1fr;gap:8px}
.pod-matches{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pod-matches button{text-align:left}
.pod-matches small{display:block;font-weight:600;opacity:.7;font-size:10.5px;margin-top:2px}
.pod-prospect{border:1px solid #e4ebf0;border-radius:10px;padding:12px 14px;margin:12px 0;background:#fafcfd}
.pod-prospect summary{cursor:pointer;font-size:11.5px;font-weight:800;letter-spacing:.04em;color:#4a687d}
.pod-prospect .status-row{margin-top:12px}

/* ----------------------------------------------------- the one search box

   It sits in the sidebar, above the sections, because it is not one of them: it
   answers "where is this container" without the operator first deciding which
   screen the answer lives on. */
.side-search{ display:flex; gap:6px; padding:0 14px 14px; margin-top:-4px }
.side-search input{
  flex:1 1 auto; min-width:0;
  background:#0d2941; border:1px solid #1d405a; border-radius:8px;
  color:#eaf3f9; font:13px Manrope, sans-serif; padding:9px 10px;
}
.side-search input::placeholder{ color:#7fa0b6 }
.side-search input:focus{ outline:2px solid #087fc4; outline-offset:1px; border-color:#087fc4 }
.side-search button{
  flex:0 0 auto; background:#087fc4; border:0; border-radius:8px; color:#fff;
  font:700 11px 'DM Mono', monospace; letter-spacing:.04em; padding:0 11px; cursor:pointer;
}
.side-search button:hover{ background:#0a6ea9 }

@media(max-width:900px){ .side-search{ display:none } }

/* --------------------------------------------------------- a shorter POD form

   A POD is filled in between calls, or on a phone in a yard. Two fields to a row and
   desktop-sized padding put most of the form below the fold, so a driver name and a
   signature were a long scroll apart even though neither takes more than a second to
   type.

   Short fields now share a row -- three or four of them -- and the spacing is tighter.
   No field was removed; the same POD is captured in roughly a third of the height.
   The rows fall back to two columns on a laptop and one on a phone, because four
   narrow boxes side by side stop being readable long before they stop fitting. */
.pod-form{ gap:9px; padding:15px }
.pod-form .status-row{ gap:9px }
.pod-form .status-field{ gap:4px }
.pod-form .status-field input,
.pod-form .status-field select{ padding:8px 9px; font-size:13.5px }
.pod-form .status-row.r3{ grid-template-columns:repeat(3,1fr) }
.pod-form .status-row.r4{ grid-template-columns:repeat(4,1fr) }
.pod-form .field-hint{ font-size:10px; line-height:1.35 }
.pod-form .eyebrow{ margin-top:3px }

@media(max-width:1150px){
  .pod-form .status-row.r3,
  .pod-form .status-row.r4{ grid-template-columns:repeat(2,1fr) }
}
@media(max-width:900px){
  .pod-form .status-row.r3,
  .pod-form .status-row.r4{ grid-template-columns:1fr }
}

/* ------------------------------------------------------- export file */
.stage-bar{display:flex;list-style:none;margin:22px 0 0;padding:0;gap:0;flex-wrap:wrap}
.stage-bar .stage{flex:1 1 0;min-width:112px;position:relative;padding:0 6px;text-align:center;color:#8ba0ad;font-size:11px;font-weight:800;letter-spacing:.03em}
.stage-bar .stage i{display:block;height:4px;border-radius:2px;background:#e0e8ee;margin-bottom:9px}
.stage-bar .stage span{display:block;line-height:1.35}
.stage-bar .stage em{display:block;font-style:normal;font-weight:700;font-size:10px;color:#b4402f;margin-top:4px;letter-spacing:0}
.stage-bar .stage.done i{background:#0f9d76}.stage-bar .stage.done{color:#0f9d76}
.stage-bar .stage.current i{background:#087fc4}.stage-bar .stage.current{color:#0c4a7c}
.stage-bar .stage.blocked i{background:#e6b8ad}.stage-bar .stage.blocked{color:#b4402f}
.stage-bar .stage.cancelled i{background:#d9e2e8}
.ef-sections{display:grid;gap:26px;margin-top:26px}
.ef-section{padding:26px 28px}
.ef-more{margin-top:28px;border-top:1px solid #e4ebf0;padding-top:16px}
.ef-more summary{cursor:pointer;font-size:11.5px;font-weight:800;letter-spacing:.05em;color:#6d8797;text-transform:uppercase}
.ef-more>*:not(summary){margin-top:18px}
.history-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 28px}
.history-grid .eyebrow{margin-bottom:8px}
.blocked-note{color:#b4402f;font-weight:700}
.tag.doc-muted{background:#eef3f6;color:#8ba0ad}
@media(max-width:900px){.history-grid{grid-template-columns:1fr}.stage-bar .stage{min-width:84px;font-size:10px}}

/* ------------------------------------------------- printable invoice */
.print-shell{background:#eef3f6;min-height:100vh;padding:26px 20px 60px}
.print-bar{max-width:820px;margin:0 auto 20px;display:flex;justify-content:space-between;gap:12px}
.inv-print{max-width:820px;margin:0 auto;background:#fff;color:var(--navy);padding:52px 56px;border-radius:6px;box-shadow:0 14px 44px #15354c1f;font-size:13px}
.inv-head{display:flex;justify-content:space-between;align-items:flex-start;gap:34px;border-bottom:2px solid var(--navy);padding-bottom:24px}
.inv-brand{display:flex;gap:13px;align-items:center}
.inv-brand b{display:block;font-size:16px;letter-spacing:.1em}
.inv-brand span{font-size:11px;color:#6d8797}
.inv-meta{text-align:right;min-width:250px}
.inv-meta h1{margin:0 0 12px;font-size:27px;letter-spacing:.16em;color:var(--navy)}
.inv-meta .info-list div{border:0;padding:3px 0;font-size:12px}
.inv-parties{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:28px 0}
.inv-parties b{font-size:14px}
.inv-parties p{margin:6px 0 0;color:#4a687d;line-height:1.6}
.inv-contact{font-size:12px;color:#6d8797}
.inv-parties .info-list div{border:0;padding:3px 0;font-size:12px}
.inv-table{width:100%;border-collapse:collapse;margin-top:8px}
.inv-table th{text-align:left;font-size:10.5px;letter-spacing:.09em;color:#6d8797;border-bottom:1px solid #d9e2e8;padding:9px 0}
.inv-table td{padding:12px 0;border-bottom:1px solid #eef3f6;vertical-align:top}
.inv-table td span{display:block;font-size:11.5px;color:#6d8797;margin-top:3px}
.inv-table .amount{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.inv-table tfoot td{border:0;padding:6px 0;color:#4a687d}
.inv-table tfoot .balance td{border-top:2px solid var(--navy);padding-top:12px;font-weight:800;font-size:15px;color:var(--navy)}
.inv-foot{margin-top:34px;border-top:1px solid #e4ebf0;padding-top:20px}
.inv-foot b{font-size:13px}
.inv-foot p{margin:6px 0 0;color:#6d8797;line-height:1.6}
.inv-fine{margin-top:20px!important;font-size:11px;color:#8ba0ad}
.inv-line{align-items:end}
.inv-line .back{margin-bottom:2px}
@media print{
  .no-print{display:none!important}
  .print-shell{background:#fff;padding:0}
  .inv-print{box-shadow:none;border-radius:0;max-width:none;padding:0;font-size:12px}
  .inv-table tfoot .balance td,.inv-head{border-color:#000}
}
@media(max-width:700px){.inv-print{padding:28px 22px}.inv-head,.inv-parties{grid-template-columns:1fr;flex-direction:column}.inv-meta{text-align:left}}

/* ===================================================== cinematic export hero

   The photograph carries the vessel on the left and open water on the right, so
   the scrim darkens the right-hand side and the copy sits in that quiet band.
   Every animation here is slow and looping; all of it stops under
   prefers-reduced-motion, which is honoured at the bottom of this block. */
.hero.cinematic{position:relative;min-height:clamp(560px,88vh,860px);display:flex;align-items:center;
  overflow:hidden;background:#061a2c;padding:0;isolation:isolate}
.hero.cinematic .grid{display:none}
.hero-media{position:absolute;inset:0;z-index:0}

/* slow parallax drift on the photograph itself */
/* The vessel is an <img>, so it is an ordinary image request rather than a CSS url.
   object-position keeps the bow on the left/centre where the photograph frames it. */
.hero-photo{position:absolute;top:-4%;left:-6%;width:114%;height:108%;
  object-fit:cover;object-position:38% 44%;display:block;background:#0a2338;
  will-change:transform,opacity;
  /* One 30s cycle, always left to right. Two copies run half a cycle apart and
     crossfade, so the pan never rewinds and the loop point is never visible. */
  animation:heroSail 30s linear infinite, heroCross 30s linear infinite}
.hero-photo.b{animation-delay:-15s,-15s}
/* superseded by the forward-only pan defined with the ocean layers below */

/* soft cloud + light drift across the sky */
.hero-drift{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 44% at 22% 16%,#8fd4ff1f 0%,transparent 62%),
             radial-gradient(46% 38% at 72% 8%,#ffffff14 0%,transparent 60%);
  animation:heroDrift 64s ease-in-out infinite alternate}
@keyframes heroDrift{from{transform:translate3d(-3%,0,0)}to{transform:translate3d(4%,1.5%,0)}}

/* animated reflection on the water at the foot of the frame */
.hero-water{position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;
  background:repeating-linear-gradient(180deg,#bfe6ff00 0px,#bfe6ff0a 2px,#bfe6ff00 5px);
  mask-image:linear-gradient(180deg,transparent 0%,#000 55%,#000 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 55%,#000 100%);
  animation:heroSwell 11s ease-in-out infinite alternate}
@keyframes heroSwell{from{transform:translateY(0) scaleY(1);opacity:.55}to{transform:translateY(6px) scaleY(1.06);opacity:.9}}

/* the export route: a thin glowing line with dots travelling along it */
.hero-route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.85}
.hero-route path{filter:drop-shadow(0 0 6px #4fb3f099);stroke-dasharray:1400;stroke-dashoffset:1400;
  animation:routeDraw 4.5s ease-out .6s forwards}
@keyframes routeDraw{to{stroke-dashoffset:0}}
.route-dot{filter:drop-shadow(0 0 5px #8fd4ffcc);opacity:0;animation:dotIn .9s ease-out 3.6s forwards}
@keyframes dotIn{to{opacity:1}}

/* text sits on the darker right-hand side */
.hero-scrim{position:absolute;inset:0;
  /* left and centre stay clear so the vessel reads immediately; the right darkens
     only as far as the copy column needs for contrast */
  background:linear-gradient(100deg,#04121f26 0%,#04121f14 30%,#04121f40 50%,#061c2eb3 68%,#04121fed 86%,#04121f 100%),
             linear-gradient(180deg,#04121f8c 0%,transparent 26%,transparent 66%,#04121fbf 100%)}

.hero.cinematic .hero-inner{position:relative;z-index:2;width:100%;max-width:none;margin:0;
  padding:42px 18px 92px 32px;display:flex;align-self:flex-start;justify-content:flex-end}
.hero-copy{width:min(540px,calc(100vw - 36px));margin-left:auto;text-align:left}
/* a readable pad behind the copy without hiding the photograph */
.hero-copy{background:linear-gradient(90deg,#04121f00,#04121f59 12%,#04121f8c);
  padding:30px 30px 34px;border-radius:16px;backdrop-filter:blur(2px)}
.hero.cinematic .eyebrow{color:#8fd4ff;letter-spacing:.16em}
.hero.cinematic h1{margin:18px 0 0;color:#fff;font-size:clamp(38px,5vw,68px);line-height:1.04;
  letter-spacing:-.035em;font-weight:800;text-wrap:balance;text-shadow:0 3px 30px #04121f80}
.hero.cinematic h1 span{color:#5ec2ff}
.hero.cinematic .hero-lead{margin:24px 0 0;color:#cfe2ee;font-size:clamp(16px,1.5vw,19.5px);
  line-height:1.62;max-width:52ch}
.hero.cinematic .hero-cta{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}
.hero.cinematic .hero-proof{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}
.hero.cinematic .hero-proof span{background:#ffffff14;border:1px solid #ffffff26;backdrop-filter:blur(6px);
  border-radius:999px;padding:9px 16px;color:#dceaf4;font-size:12px;font-weight:700;letter-spacing:.02em}
.hero.cinematic .network-line{position:absolute;z-index:2;left:0;right:0;bottom:26px;text-align:center;
  color:#7fa8c4;font-size:11px;letter-spacing:.22em;font-weight:700}
.hero.cinematic .network-line i{display:inline-block;width:4px;height:4px;border-radius:50%;
  background:#4fb3f0;margin:0 12px;vertical-align:middle}

/* headline, lead and buttons fade in on load, staggered */
.reveal{opacity:0;transform:translateY(16px);animation:heroReveal .9s cubic-bezier(.22,.7,.3,1) forwards}
.r1{animation-delay:.15s}.r2{animation-delay:.32s}.r3{animation-delay:.5s}
.r4{animation-delay:.68s}.r5{animation-delay:.86s}
@keyframes heroReveal{to{opacity:1;transform:translateY(0)}}

.why-grid.five{grid-template-columns:repeat(5,1fr)}
.about{background:#f6f9fb;color:var(--navy);padding:104px 0}
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start}
.about-grid h2{color:var(--navy);margin:14px 0 20px;font-size:clamp(26px,3vw,40px);letter-spacing:-.03em;line-height:1.12}
.about-grid p{color:#4a687d;line-height:1.72;margin:0 0 16px;font-size:15.5px}
.about-points{display:grid;gap:2px;background:#e4ebf0;border:1px solid #e4ebf0;border-radius:14px;overflow:hidden}
.about-points div{background:#fff;padding:20px 24px}
.about-points b{display:block;color:var(--navy);font-size:14px;letter-spacing:-.01em}
.about-points span{color:#6d8797;font-size:13px}

@media(max-width:1080px){
  .why-grid.five{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr;gap:36px}
}
@media(max-width:760px){
  /* The mobile header occupies its own space, so the hero panel can begin at the
     very top of the image instead of being pushed down or hidden underneath it. */
  .site-nav{position:relative}
  .hero.cinematic{min-height:auto}
  .hero.cinematic .hero-inner{padding:14px 14px 84px 22px;justify-content:flex-end}
  .hero-photo{background-position:58% 42%}
  /* on a narrow screen the copy sits over the whole frame, so darken all of it */
  .hero-scrim{background:linear-gradient(180deg,#04121fbf 0%,#061c2ea6 30%,#04121fe6 74%,#04121f 100%)}
  .hero-copy{background:none;padding:0;backdrop-filter:none}
  .hero.cinematic .network-line{position:static;margin:34px 22px 0;padding-bottom:26px;letter-spacing:.12em}
  .hero.cinematic .hero-cta .primary,.hero.cinematic .hero-cta .ghost{width:100%}
  .why-grid.five{grid-template-columns:1fr}
}

/* No motion for anyone who has asked the system not to animate. The photograph,
   the scrim, the route line and the copy all remain — only the movement stops. */
@media(prefers-reduced-motion:reduce){
  .hero-photo,.hero-drift,.hero-water,.hero-route path,.route-dot,.reveal{animation:none!important}
  .hero-photo{transform:scale(1.04)}
  .hero-route path{stroke-dashoffset:0}
  .route-dot{opacity:1}
  .reveal{opacity:1;transform:none}
  .hero-route animateMotion{display:none}
}

/* ------------------------------------------ hero: harbour lights & word reveal

   Everything below is slow and looping. Nothing flashes, bounces or spins, and the
   reduced-motion block at the end of this file stops all of it. */

/* Soft harbour glow over the terminal cranes on the right of the photograph. */
.hero-lights{position:absolute;inset:0;pointer-events:none;z-index:1}
.hero-lights i{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffd9a3;
  box-shadow:0 0 10px 3px #ffc97a55,0 0 22px 8px #ff9e3d1f;opacity:.35;
  animation:harbourGlow 9s ease-in-out infinite}
.hero-lights i:nth-child(1){left:57%;top:71.5%;animation-delay:0s}
.hero-lights i:nth-child(2){left:62%;top:70.2%;animation-delay:1.4s}
.hero-lights i:nth-child(3){left:67%;top:71.8%;animation-delay:2.9s;width:2px;height:2px}
.hero-lights i:nth-child(4){left:72%;top:70.6%;animation-delay:4.1s}
.hero-lights i:nth-child(5){left:78%;top:71.2%;animation-delay:5.6s;width:2px;height:2px}
.hero-lights i:nth-child(6){left:83%;top:70.4%;animation-delay:2.2s}
.hero-lights i:nth-child(7){left:88%;top:71.6%;animation-delay:6.8s;width:2px;height:2px}
.hero-lights i:nth-child(8){left:93%;top:70.9%;animation-delay:3.5s}
@keyframes harbourGlow{0%,100%{opacity:.28}50%{opacity:.72}}
/* the lights drift forward with the frame, on the same one-way cycle */
.hero-lights{animation:heroSail 64s linear infinite}

/* Headline words arrive one after another, then the CTA, then the trust badges. */
.hero.cinematic h1.hero-title{margin:18px 0 0;color:#fff;font-size:clamp(38px,5vw,68px);
  line-height:1.04;letter-spacing:-.035em;font-weight:800;text-wrap:balance;
  text-shadow:0 3px 30px #04121f80}
.hero.cinematic h1.hero-title .accent{color:#5ec2ff}
.hero-title .w{display:inline-block;opacity:0;transform:translateY(20px);
  animation:wordIn 1s cubic-bezier(.22,.7,.3,1) forwards}
.hero-title .w1{animation-delay:.30s}.hero-title .w2{animation-delay:.44s}
.hero-title .w3{animation-delay:.58s}.hero-title .w4{animation-delay:.76s}
.hero-title .w5{animation-delay:.90s}
@keyframes wordIn{to{opacity:1;transform:translateY(0)}}
/* lead, then buttons, then badges — after the last word has landed */
.hero.cinematic .hero-lead.r3{animation-delay:1.06s}
.hero.cinematic .hero-cta.r4{animation-delay:1.26s}
.hero.cinematic .hero-proof.r5{animation-delay:1.50s}

@media(prefers-reduced-motion:reduce){
  .hero-lights,.hero-lights i,.hero-title .w{animation:none!important}
  .hero-lights i{opacity:.5}
  .hero-title .w{opacity:1;transform:none}
}

/* ------------------------------------------------------ hero export lanes

   Toronto on the left, European discharge ports to the right, one thin glowing
   line each with a dot running outward. Scrolls horizontally on a narrow screen
   rather than wrapping into a block of text. */
.lane-strip{position:absolute;z-index:2;left:0;right:0;bottom:22px;display:flex;align-items:center;
  gap:20px;padding:0 32px;max-width:1220px;margin:0 auto}
.lane-origin{display:flex;align-items:center;gap:9px;flex:0 0 auto;color:#dceaf4;
  font-size:11.5px;font-weight:800;letter-spacing:.18em}
.lane-origin i{width:8px;height:8px;border-radius:50%;background:#5ec2ff;
  box-shadow:0 0 0 4px #5ec2ff26,0 0 14px 3px #5ec2ff80;animation:originPulse 4.5s ease-in-out infinite}
@keyframes originPulse{0%,100%{box-shadow:0 0 0 4px #5ec2ff26,0 0 14px 3px #5ec2ff80}
  50%{box-shadow:0 0 0 7px #5ec2ff1a,0 0 20px 5px #5ec2ffa6}}

.lane-rail{display:flex;gap:26px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none}
.lane-rail::-webkit-scrollbar{display:none}
.lane{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.lane b{color:#bcd4e4;font-size:11.5px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.lane-line{position:relative;display:block;width:52px;height:1px;flex:0 0 auto;
  background:linear-gradient(90deg,#5ec2ff00,#5ec2ff8c 30%,#8fd4ffd9);
  box-shadow:0 0 6px #4fb3f066}
.lane-dot{position:absolute;top:50%;left:0;width:3.5px;height:3.5px;margin-top:-1.75px;border-radius:50%;
  background:#dff1ff;box-shadow:0 0 7px 2px #8fd4ffb3;
  animation:laneRun 7s cubic-bezier(.45,0,.55,1) infinite}
/* staggered so the dots never march in lockstep */
.lane.l1 .lane-dot{animation-delay:0s}.lane.l2 .lane-dot{animation-delay:1.1s}
.lane.l3 .lane-dot{animation-delay:2.2s}.lane.l4 .lane-dot{animation-delay:3.3s}
.lane.l5 .lane-dot{animation-delay:4.4s}.lane.l6 .lane-dot{animation-delay:5.5s}
@keyframes laneRun{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:52px;opacity:0}}

@media(max-width:900px){
  .lane-strip{position:static;margin:30px 0 0;padding:0 0 24px 22px;gap:14px;
    flex-direction:column;align-items:flex-start}
  .lane-rail{width:100%;padding-right:22px}
  .lane-line{width:34px}
  @keyframes laneRun{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:34px;opacity:0}}
}
@media(prefers-reduced-motion:reduce){
  .lane-origin i,.lane-dot{animation:none!important}
  .lane-dot{left:50%;opacity:1}
}

/* ------------------------------------------------------------ NTXV identity

   The supplied logo is used exactly as provided. It is drawn on a white chip on the
   dark navy surfaces so the red letters and the blue/green swoosh keep their colours
   instead of being knocked out by the background. */
.ntxv-logo{display:block;height:auto;width:auto;object-fit:contain;image-rendering:auto}
.ntxv-logo.sm{height:26px}
.ntxv-logo.md{height:34px}
.ntxv-logo.lg{height:44px}
.brand,.site-brand{display:flex;align-items:center;gap:12px}
/* the supplied logo is transparent, so no chip is drawn behind it */
.site-nav .site-brand{background:none;border:0;padding:0}
.brand-sub{font-size:10.5px;color:#4a687d;font-weight:800;letter-spacing:.14em}
.side .brand-sub,.portal-bar .brand-sub{color:#6d8797}
.field-hint{display:block;margin-top:5px;font-size:10.5px;font-weight:600;color:#8ba0ad;letter-spacing:0;text-transform:none}
select.pod-ref{background:#f2f6f9;color:#4a687d;font-weight:700}
.inv-print .ntxv-logo.lg{height:52px}
.inv-brand{display:flex;align-items:center;gap:15px}

/* ------------------------------------------------------------ ocean layers

   Three transparent swells drifting at different speeds and directions, so the water
   never reads as a single repeating band. Long 14-20s loops; nothing bounces. */
.hero-sea{position:absolute;left:-10%;right:-10%;bottom:0;height:38%;pointer-events:none;z-index:1;overflow:hidden}
.hero-sea i{position:absolute;left:0;right:0;height:100%;display:block;opacity:.5}
.hero-sea i:nth-child(1){
  background:radial-gradient(120% 60% at 20% 100%,#8fd4ff26 0%,transparent 62%),
             repeating-linear-gradient(94deg,#bfe6ff00 0px,#bfe6ff12 3px,#bfe6ff00 9px);
  animation:seaA 17s ease-in-out infinite alternate}
.hero-sea i:nth-child(2){
  background:repeating-linear-gradient(86deg,#7fc4f000 0px,#7fc4f00f 4px,#7fc4f000 13px);
  opacity:.4;animation:seaB 20s ease-in-out infinite alternate}
.hero-sea i:nth-child(3){
  background:radial-gradient(90% 50% at 62% 100%,#ffd9a31a 0%,transparent 58%);
  opacity:.55;animation:seaC 14s ease-in-out infinite alternate}
@keyframes seaA{from{transform:translate3d(-2.5%,0,0)}to{transform:translate3d(2.5%,4px,0)}}
@keyframes seaB{from{transform:translate3d(3%,2px,0)}to{transform:translate3d(-3%,-2px,0)}}
@keyframes seaC{from{transform:translate3d(1.5%,0,0) scaleY(1)}to{transform:translate3d(-1.5%,3px,0) scaleY(1.05)}}

/* the vessel's own slow drift, left to right, over a long calm loop */
/* one direction, left to right, and a slow push in */
@keyframes heroSail{
  from{transform:scale(1.06) translate3d(-2.2%,0.3%,0)}
  to{transform:scale(1.13) translate3d(2.2%,-0.6%,0)}
}
/* each copy is fully visible through the middle of its own pan and crossfades at the
   ends, so there is no jump back to the start */
@keyframes heroCross{
  0%{opacity:0}
  8%{opacity:1}
  50%{opacity:1}
  58%{opacity:0}
  100%{opacity:0}
}

/* carrier strip under the hero */
.carrier-strip{background:#08203a;border-top:1px solid #ffffff14;border-bottom:1px solid #ffffff14;
  padding:16px 32px;text-align:center;color:#9fc4dd;font-size:11.5px;font-weight:800;letter-spacing:.2em}
.carrier-strip b{color:#dceaf4;font-weight:800}

/* trust badge beside the quote CTA */
.trust-badge{display:inline-flex;align-items:center;gap:10px;background:#087fc41f;border:1px solid #4fb3f04d;
  color:#bfe6ff;border-radius:999px;padding:9px 17px;font-size:11.5px;font-weight:800;letter-spacing:.14em}
.trust-badge i{width:6px;height:6px;border-radius:50%;background:#5ec2ff;flex:0 0 auto}
.exp-block{margin:26px 0 0}
.exp-block h3{margin:0 0 8px;font-size:clamp(20px,2.4vw,30px);letter-spacing:-.02em;color:#fff}
.exp-block p{margin:0;color:#cfe2ee;line-height:1.65;max-width:56ch}
.quote-band .exp-block h3{color:var(--navy)}
.quote-band .exp-block p{color:#4a687d}

@media(prefers-reduced-motion:reduce){
  .hero-sea i{animation:none!important}
}

/* The carrier marking that used to sit here was plain text skewed over the
   photograph. It has been removed — a carrier's brand mark is not something to
   approximate with CSS type. See the note in the hero section of app.js. */
@media(prefers-reduced-motion:reduce){
  .hero-photo,.hero-lights{animation:none!important}
  .hero-photo.b{opacity:0}
  .hero-photo.a{opacity:1;transform:scale(1.08)}
}

/* ------------------------------------------------- logo sits directly on the navy
   The supplied artwork already has a transparent background, so the white chip behind
   it was unnecessary and is removed. A soft shadow gives separation from the navy
   without altering a single colour in the mark. */
.side .brand,.portal-bar .brand,.login-intro .brand,.site-nav .site-brand{
  background:none!important;border:0!important;padding:0!important}
/* no shadow behind the mark */
.side .brand{padding:2px 0!important}

/* the sign-in shortcuts name the account and the address they use */
.demo-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.demo-actions button{display:block;text-align:left;padding:10px 12px;line-height:1.3}
.demo-actions button b{display:block;font-size:12px;font-weight:800}
.demo-actions button span{display:block;font-size:10.5px;opacity:.72;font-weight:600;margin-top:2px}
@media(max-width:520px){.demo-actions{grid-template-columns:1fr}}

/* ------------------------------------------------------- carrier mark on the hull

   NTXV books with Maersk, and the owner approved showing the line's mark on the
   vessel as a carrier illustration. One mark only, on the hull side forward of
   midships where a line's name is actually painted.

   It is transformed to sit on the hull rather than float above it:
     rotate  — follows the sheer line running down toward the stern
     skewX   — matches the hull receding away from the camera
     blend   — soft-light lets the steel's shading and highlights show through the
               white, so it reads as paint on a curved plate instead of a decal
   It shares the vessel's forward-only pan so it stays locked to the ship.

   Positions are tuned to this photograph. To move it: adjust left/top. To swap in
   the licensed artwork: replace assets/maersk-mark.svg, same filename. */
.hull-mark{position:absolute;z-index:1;left:19.5%;top:57.4%;width:12.5%;min-width:96px;
  height:auto;pointer-events:none;
  transform:rotate(-5.5deg) skewX(-13deg) scaleY(.94);
  transform-origin:left center;
  mix-blend-mode:soft-light;
  opacity:.92;
  filter:drop-shadow(0 1px 1px #00000040);
  animation:heroSail 64s linear infinite}
/* a second, fainter pass in overlay lifts it just enough to stay legible on the
   darkest part of the hull without ever looking like flat pasted-on type */
.hull-mark{will-change:transform}
@media(max-width:1100px){.hull-mark{left:17%;top:58.5%;width:15%}}
@media(max-width:760px){.hull-mark{display:none}}
@media(prefers-reduced-motion:reduce){.hull-mark{animation:none!important}}

/* public tracking: the milestone track and the no-update answer */
.track-timeline{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:0}
.track-timeline li{position:relative;padding:0 0 14px 26px;color:#6d8797;font-size:12.5px;font-weight:700}
.track-timeline li:not(:last-child)::after{content:'';position:absolute;left:5px;top:14px;bottom:0;width:2px;background:#e0e8ee}
.track-timeline li i{position:absolute;left:0;top:3px;width:12px;height:12px;border-radius:50%;
  background:#fff;border:2px solid #d9e2e8}
.track-timeline li.done{color:var(--navy)}
.track-timeline li.done i{background:#0f9d76;border-color:#0f9d76}
.track-timeline li.done:not(:last-child)::after{background:#0f9d76}
.track-timeline li em{display:block;font-style:normal;font-weight:600;font-size:11px;color:#8ba0ad;margin-top:2px}
.track-contact{margin-top:14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.track-contact a{display:inline-block;text-decoration:none}
.track-contact span{font-size:12px;color:#6d8797}
.track-msg.warn b{display:block;font-size:15px;margin-bottom:6px}
.track-msg.warn p{margin:0}
/* A mismatched check digit is advisory only — the search already ran, so this reads as
   a note rather than a rejection. */
.track-soft-warn{margin:0 0 8px;font-size:12.5px;line-height:1.55;color:var(--amber)}
/* Why there is no automatic update, and the likely carrier when one can be inferred. */
.track-status-note{margin:8px 0 0;font-size:12.5px;line-height:1.6;color:#8ca6b8}
.track-likely{margin:8px 0 0;font-size:12.5px;line-height:1.6;color:#8ca6b8}
.track-none{margin:0 0 4px;font-size:13px;line-height:1.6}

/* ------------------------------------------------- carrier handoff panel

   Shown BEFORE anything opens: which line NTXV thinks the box is on, the reference,
   and the two actions. Set apart from NTXV's own result so a carrier's page is never
   mistaken for an NTXV update. */
.carrier-handoff{margin-top:16px;padding:16px 18px;border:1px solid #dbe4ea;border-radius:12px;
  background:#f7fafc}
.carrier-likely{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.carrier-likely span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#6d8797}
.carrier-likely b{font-size:17px;letter-spacing:-.02em;color:var(--navy)}
.carrier-ref{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
.carrier-ref span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#6d8797}
.carrier-ref b{font-family:'DM Mono',ui-monospace,monospace;font-size:15px;letter-spacing:.02em;
  color:var(--navy)}
.carrier-ref b .copied{font-family:inherit;font-style:normal;font-size:11px;font-weight:700;
  color:#0f9d76;margin-left:6px;letter-spacing:.04em;text-transform:uppercase}
.carrier-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.carrier-actions a{display:inline-block;text-decoration:none}
.carrier-actions .copy-ref{cursor:pointer}
/* The three-line fallback: no carrier is primary, because none has been identified. */
.carrier-choices a{font-weight:700}
.carrier-choose{margin:0 0 10px;font-size:12.5px;line-height:1.6;color:#5d7789}
.carrier-paste{margin:12px 0 0;font-size:12.5px;line-height:1.6;font-weight:600;color:var(--navy)}
.carrier-note{margin:10px 0 0;font-size:11.5px;line-height:1.6;color:#8ca6b8}

/* ------------------------------------------------------ navigation & brand mark

   One Back control, small and in the same place on every screen, sitting above the
   page heading. It walks the trail rather than jumping to a fixed home. */
.nav-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 4px;padding:7px 13px;
  font-size:12px;font-weight:700;letter-spacing:.01em}

/* The supplied logo is transparent, so it sits straight on the navy with no chip
   behind it. Sizes are set by height only, so the proportions never change. */
.ntxv-logo.side{height:44px}
.ntxv-logo.portal{height:34px}
.ntxv-logo.site{height:40px}
.brand-home{background:none;border:0;padding:0;cursor:pointer;display:flex;align-items:center}
.brand-home:hover .ntxv-logo{opacity:.88}
.brand-home:focus-visible{outline:2px solid #4fb3f0;outline-offset:4px;border-radius:6px}

/* room to breathe between the mark and the first menu item */
.side .brand{margin:2px 0 26px!important;padding:0!important;background:none!important}
.site-nav .site-brand{background:none!important;padding:0!important;border:0!important}
.portal-bar .brand{background:none!important;padding:0!important}

@media(max-width:900px){.ntxv-logo.site{height:32px}.ntxv-logo.side{height:36px}}

/* --------------------------------------------------------- experience proof point

   An established-company statement, not a status chip: a large figure in NTXV blue
   behind a thin rule, with the label set small and quiet beside it. No pill, no
   border radius, no button affordance. */
.exp-proof{margin-top:30px;padding-left:20px;position:relative;max-width:44ch}
.exp-proof::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:2px;
  background:linear-gradient(180deg,#5ec2ff,#087fc433)}
.exp-proof-figure{display:flex;align-items:baseline;gap:15px}
.exp-proof-figure b{font-size:clamp(46px,5.2vw,60px);line-height:.92;font-weight:800;
  letter-spacing:-.04em;color:#5ec2ff;text-shadow:0 2px 18px #04121f80}
.exp-proof-figure span{font-size:11.5px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:#dceaf4;line-height:1.5}
.exp-proof p{margin:12px 0 0;color:#a8c6da;font-size:13px;line-height:1.6}

@media(max-width:760px){
  .exp-proof{margin-top:24px;padding-left:16px;max-width:none}
  .exp-proof-figure{gap:12px}
  .exp-proof-figure b{font-size:44px}
  .exp-proof-figure span{font-size:10.5px;letter-spacing:.12em}
  .exp-proof p{font-size:12.5px}
}

/* the Back control sits in the same place on every screen, above the page heading */
.page-top{display:flex;align-items:center;min-height:34px;margin:0 0 10px}
.portal-main .page-top{margin-bottom:14px}
.track-actions{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.nav-back{white-space:nowrap}

/* ------------------------------------------------------- Back control, visible

   .back is a bare text link used inline elsewhere in the app. The navigation control
   must not inherit that, so everything it needs is set here and marked important —
   .back is defined earlier in this file and would otherwise win on padding/background.
   Sized for a comfortable hit target and contrasted against both the operations
   surface (#f4f7fa) and the portal surface (#f5f8fa). */
.page-top{display:flex;align-items:center;min-height:40px;margin:0 0 14px}
.portal-main .page-top{margin-bottom:16px}

button.back.nav-back{
  display:inline-flex!important;
  align-items:center;
  gap:8px;
  background:#fff!important;
  border:1px solid #d3dfe8!important;
  border-radius:8px!important;
  padding:9px 16px 9px 13px!important;
  color:#0b2740!important;
  font-size:13px!important;
  font-weight:700!important;
  letter-spacing:.01em;
  line-height:1;
  box-shadow:0 1px 2px #15354c14, 0 1px 0 #ffffff99 inset;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
button.back.nav-back::before{
  content:'\2190';
  font-size:15px;
  font-weight:800;
  color:#087fc4;
  line-height:1;
  margin-top:-1px;
}
/* the glyph is supplied by ::before, so the label text carries only the word */
button.back.nav-back{font-variant-ligatures:none}
button.back.nav-back:hover{background:#f2f8fc!important;border-color:#9cc5de!important}
button.back.nav-back:active{transform:translateY(1px)}
button.back.nav-back:focus-visible{outline:2px solid #087fc4;outline-offset:2px}

/* on the dark tracking panel the same control needs the inverse treatment */
.track-actions button.back.nav-back{
  background:#ffffff14!important;
  border-color:#ffffff33!important;
  color:#dceaf4!important;
  box-shadow:none;
}
.track-actions button.back.nav-back::before{color:#8fd4ff}
.track-actions button.back.nav-back:hover{background:#ffffff26!important;border-color:#ffffff4d!important}

@media(max-width:760px){
  button.back.nav-back{padding:10px 15px 10px 12px!important;font-size:13px!important}
  .page-top{margin-bottom:12px}
}

/* ------------------------------------------------- logo sits on the bare surface

   Nothing may paint behind the NTXV mark: no chip, no shadow, no border, no radius,
   no padding — on the wrapper OR on the image. These are last in the file and marked
   important so no earlier rule can reintroduce a box. */
.brand,
.brand-home,
.site-brand,
.side .brand,
.side .brand-home,
.portal-bar .brand,
.portal-bar .brand-home,
.site-nav .site-brand,
.login-intro .brand,
.inv-brand,
.ntxv-logo,
.side .ntxv-logo,
.portal-bar .ntxv-logo,
.site-nav .ntxv-logo,
.login-intro .ntxv-logo,
.brand-home .ntxv-logo,
.brand-home:hover .ntxv-logo {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  outline: none;
}
/* spacing is carried by margin, which paints nothing */
.side .brand{margin:0 0 26px!important;display:flex;align-items:center}
.portal-bar .brand{margin:0!important}
.site-nav .site-brand{margin:0!important}

/* a record identifier that is unmistakably a control */
.link-id{background:none;border:0;padding:0;font:inherit;font-weight:800;color:#087fc4;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.link-id:hover{color:#0c4a7c}
.link-id:focus-visible{outline:2px solid #087fc4;outline-offset:2px;border-radius:3px}

/* empty states read as a deliberate state, not a broken table */
.empty-cell{padding:34px 18px!important;text-align:center;color:#6d8797;font-size:13px;line-height:1.6}
.empty-cell b{color:var(--navy)}

/* ------------------------------------------------- hero motion, 55s forward loop

   The vessel travels one way only. A larger horizontal excursion makes the movement
  readable without ever becoming fast: ~5% of the frame over fifty-five seconds. */
@keyframes heroSail{
  from{transform:scale(1.08) translate3d(-3.2%,0.4%,0)}
  to{transform:scale(1.14) translate3d(3.2%,-0.7%,0)}
}
/* each copy holds through the middle of its own pan and fades at the ends */
@keyframes heroCross{
  0%{opacity:0}
  10%{opacity:1}
  50%{opacity:1}
  60%{opacity:0}
  100%{opacity:0}
}
.hero-lights{animation:heroSail 55s linear infinite}

/* the sea reads more clearly: three layers, different speeds and directions */
.hero-sea{height:42%}
.hero-sea i:nth-child(1){animation-duration:19s}
.hero-sea i:nth-child(2){animation-duration:24s;opacity:.5}
.hero-sea i:nth-child(3){animation-duration:16s;opacity:.6}
@keyframes seaA{from{transform:translate3d(-3.5%,0,0)}to{transform:translate3d(3.5%,6px,0)}}
@keyframes seaB{from{transform:translate3d(4%,3px,0)}to{transform:translate3d(-4%,-3px,0)}}
@keyframes seaC{from{transform:translate3d(2%,0,0) scaleY(1)}to{transform:translate3d(-2%,4px,0) scaleY(1.07)}}

/* a soft reflection sliding under the hull */
.hero-water{height:38%;animation:heroSwell 13s ease-in-out infinite alternate}
@keyframes heroSwell{
  from{transform:translate3d(-1.5%,0,0) scaleY(1);opacity:.5}
  to{transform:translate3d(1.5%,7px,0) scaleY(1.08);opacity:.95}
}

/* sky: very slow light and cloud drift, longer than everything else */
.hero-drift{animation:heroDrift 80s ease-in-out infinite alternate}
@keyframes heroDrift{from{transform:translate3d(-4%,0,0)}to{transform:translate3d(5%,2%,0)}}

/* a still frame for anyone who has asked for less motion */
@media(prefers-reduced-motion:reduce){
  .hero-photo,.hero-photo.a,.hero-photo.b,.hero-sea i,.hero-water,.hero-drift,
  .hero-lights,.hero-route path,.route-dot,.lane-dot,.lane-origin i,.reveal,.hero-title .w{
    animation:none!important;
  }
  .hero-photo.a{opacity:1;transform:scale(1.1)}
  .hero-photo.b{opacity:0}
  .hero-route path{stroke-dashoffset:0}
  .route-dot,.lane-dot{opacity:1}
  .reveal,.hero-title .w{opacity:1;transform:none}
}

/* --------------------------------------------------- carrier tracking hand-off */
.track-choose{background:#fff;border:1px solid #e4ebf0;border-radius:14px;padding:26px 28px;
  box-shadow:0 12px 40px #15354c12;margin-top:18px}
.track-choose h3{margin:6px 0 18px;font-size:19px;letter-spacing:-.02em;color:var(--navy)}
.track-ref{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#f4f8fb;
  border:1px solid #e4ebf0;border-radius:9px;padding:12px 14px;margin-bottom:18px}
.track-ref span{font-size:10.5px;font-weight:800;letter-spacing:.12em;color:#6d8797;text-transform:uppercase}
.track-ref b{font-family:'DM Mono',monospace;font-size:15px;color:var(--navy);letter-spacing:.02em}
.track-ref .copied{font-style:normal;font-size:11px;font-weight:700;color:#0f9d76;margin-left:6px}
.track-carriers{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.track-carriers button{flex:1 1 200px}
.track-card .track-ref{margin-top:16px}
.track-card .track-carriers{margin-top:4px}
@media(max-width:620px){.track-carriers button{flex:1 1 100%}}

/* ------------------------------------------------------------------ contrast

   .ghost was written for the dark hero, where near-white text on transparent is
   correct. The same class is reused on the white sections, where #d6e8f4 on #fff is
   effectively invisible. Light surfaces get their own treatment: dark navy label, a
   clear blue border, and NTXV blue with white text on hover. */
.quote-band .ghost,
.about .ghost,
.why .ghost,
.process .ghost,
.trust .ghost,
.track .ghost,
.site-foot .ghost,
.wrap .ghost{
  color:#071e33!important;
  border:1.5px solid #087fc4!important;
  background:transparent!important;
  font-weight:800;
}
.quote-band .ghost:hover,
.about .ghost:hover,
.why .ghost:hover,
.process .ghost:hover,
.trust .ghost:hover,
.track .ghost:hover,
.site-foot .ghost:hover,
.wrap .ghost:hover{
  background:#087fc4!important;
  border-color:#087fc4!important;
  color:#fff!important;
}
.quote-band .ghost:focus-visible,.about .ghost:focus-visible,.wrap .ghost:focus-visible{
  outline:2px solid #071e33;outline-offset:2px}

/* the public nav sits on the dark header, so it keeps the light treatment */
.site-nav .ghost{color:#d6e8f4!important;border-color:#2c5878!important}
.site-nav .ghost:hover{background:transparent!important;border-color:var(--blue)!important;color:#fff!important}

/* pale text that was only ever legible on navy, corrected for light surfaces */
.quote-band .quote-lead,.about-grid p{color:#3d5a6d}
.quote-points span,.about-points span{color:#4a687d}
.qf-fine{color:#5b7385}
.track-note{color:#4a687d}
.prototype-note{color:#4a687d}
.charge-note{color:#5b7385}
.empty-cell{color:#4a687d}
.muted-cell{color:#5b7385}
.info-list span{color:#5b7385}
.section-head h2 small{color:#5b7385}
.filters button{color:#20415a}
.data-table th{color:#41607a}

/* form fields: a placeholder must be readable but still read as a placeholder */
input::placeholder,textarea::placeholder{color:#7d94a5;opacity:1}
.quote-form input::placeholder,.quote-form select{color:#20415a}
.quote-form label{color:#2c4a60}
.status-field{color:#2c4a60}
.status-field input,.status-field select{color:#071e33}

/* The public site has no Back control. The header carries the NTXV logo, the section
   links and the two actions, and nothing else — the styling that used to sit here for
   that control is deliberately gone so nothing can render one into the dark bar. */
/* the sign-in card's Back keeps the same shape on its dark panel */
.login-card button.back.nav-back{margin-bottom:16px}

/* the same Back control on the mobile header, sized for a thumb */
.m-page-top{margin:0 0 10px;min-height:38px}
.m-head .page-top button.back.nav-back{padding:10px 16px 10px 13px!important;font-size:13px!important}
.m-brand{background:none!important;border:0!important;padding:0!important}
.m-brand .ntxv-logo{height:26px}

/* ------------------------------------------------- hero copy pinned to the right

   The copy is one group (.hero-copy) so it moves together: eyebrow, headline, lead,
   both CTAs, proof strip and the 26-years block. The vessel keeps the left of the
   frame; the panel sits against the right edge, vertically centred, on a dark
   transparent overlay so the text stays readable over the photograph. */
.hero.cinematic .hero-inner{
  justify-content:flex-end;
  align-items:center;
  padding-right:clamp(24px,4vw,64px);
}
.hero-copy{
  margin-left:auto;
  max-width:min(520px,44vw);
  text-align:left;
  background:linear-gradient(105deg,#04121f00 0%,#04121f8c 18%,#04121fbf 55%,#04121fd9 100%);
  padding:34px 34px 38px;
  border-radius:18px;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  box-shadow:0 18px 60px #04121f4d;
}
/* the scrim leans further right so the panel has a dark bed and the bow stays clear */
.hero-scrim{
  background:
    linear-gradient(100deg,#04121f1a 0%,#04121f0f 32%,#04121f33 52%,#061c2e99 70%,#04121fe6 88%,#04121f 100%),
    linear-gradient(180deg,#04121f80 0%,transparent 26%,transparent 66%,#04121fb3 100%);
}

@media(max-width:1100px){
  .hero-copy{max-width:min(480px,52vw);padding:28px 26px 32px}
}
/* on a phone the panel stacks normally, full width, with safe margins */
@media(max-width:820px){
  .hero.cinematic .hero-inner{justify-content:flex-start;padding:104px 20px 84px;align-items:flex-start}
  .hero-copy{
    margin-left:0;
    max-width:none;
    width:100%;
    padding:24px 20px 28px;
    border-radius:14px;
    background:#04121fb3;
  }
  .hero-scrim{background:linear-gradient(180deg,#04121fbf 0%,#061c2ea6 30%,#04121fe6 74%,#04121f 100%)}
}

/* ------------------------------------------------------ hero service proof row

   Information, not navigation. The old treatment was a row of rounded translucent
   pills, which read as buttons. These are now plain items with a small check mark
   and a hairline separator, with nothing that suggests they can be pressed. */
.hero.cinematic ul.hero-proof{
  list-style:none;
  margin:26px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
}
.hero.cinematic ul.hero-proof li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  /* no background, border, radius or shadow — nothing button-like */
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:4px 0;
  margin:0;
  color:#c8dcea;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.01em;
  cursor:default;
}
.hero.cinematic ul.hero-proof li::before{
  content:'\2713';           /* a check mark, drawn in CSS so it is never a control */
  color:#5ec2ff;
  font-size:12px;
  font-weight:800;
  line-height:1;
}
/* a hairline between items rather than a boxed edge around each */
.hero.cinematic ul.hero-proof li + li{
  margin-left:18px;
  padding-left:18px;
  border-left:1px solid #ffffff26;
}
.hero.cinematic ul.hero-proof li:hover{background:none;color:#c8dcea}

/* on a phone they stack as a short checklist */
@media(max-width:820px){
  .hero.cinematic ul.hero-proof{display:grid;gap:9px;margin-top:22px}
  .hero.cinematic ul.hero-proof li + li{margin-left:0;padding-left:0;border-left:0}
  .hero.cinematic ul.hero-proof li{font-size:12.5px}
}

/* a failed sign-in is explained on the card */
.login-error{
  background:#fff1f1;
  border:1px solid #f0c2c2;
  border-left:3px solid #c0392b;
  border-radius:8px;
  padding:11px 13px;
  margin:0 0 12px;
  color:#8c2f2f;
  font-size:12.5px;
  line-height:1.5;
  font-weight:600;
}
/* Neutral counterpart to .login-error, for the password-reset confirmation. It is
   deliberately NOT green: the message is "if that account exists, mail is on its way",
   which is not a success and must not read as one. */
.login-note{
  background:#f2f9fd;
  border:1px solid #cfe4f2;
  border-left:3px solid #087fc4;
  border-radius:8px;
  padding:11px 13px;
  margin:0 0 12px;
  color:#3d6178;
  font-size:12.5px;
  line-height:1.55;
  font-weight:600;
}
/* the account tiles read as choices, with a clear pressed state */
.demo-actions button{
  background:#ffffff0f;
  border:1px solid #ffffff29;
  border-radius:9px;
  color:#e8f2f9;
  transition:background .15s ease, border-color .15s ease;
}
.demo-actions button:hover{background:#ffffff1f;border-color:#4fb3f0}
.demo-actions button:active{transform:translateY(1px)}
.demo-actions button:focus-visible{outline:2px solid #4fb3f0;outline-offset:2px}
.demo-actions button b{color:#fff}
.demo-actions button span{color:#a8c6da}

/* ------------------------------------------------------------- About NTXV

   Two columns: the story on the left, a quiet proof panel on the right. The proof
   items are statements, so they carry a rule and a check mark and nothing that reads
   as a control. Contrast is set against the light #f6f9fb surface throughout. */
.about{background:#f6f9fb;padding:clamp(72px,9vw,116px) 0}
.about-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr);
  gap:clamp(40px,6vw,88px);
  align-items:start;
}
.about-copy .eyebrow{color:#0b6ea8;letter-spacing:.16em}
.about-copy h2{
  margin:16px 0 26px;
  font-size:clamp(28px,3.4vw,44px);
  line-height:1.1;
  letter-spacing:-.035em;
  color:#071e33;
  max-width:19ch;
  text-wrap:balance;
}
/* a thin blue rule under the headline, the section's only ornament */
.about-copy h2::after{
  content:'';
  display:block;
  width:64px;
  height:3px;
  margin-top:22px;
  background:linear-gradient(90deg,#087fc4,#5ec2ff);
  border-radius:2px;
}
.about-copy p{
  margin:0 0 18px;
  color:#3d5a6d;
  font-size:clamp(14.5px,1.15vw,16px);
  line-height:1.75;
  max-width:62ch;
}
.about-copy p:last-of-type{margin-bottom:0}

.about-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:34px}
/* the secondary action is an understated text link, not a competing button */
.link-cta{
  background:none;
  border:0;
  padding:6px 0;
  color:#0b6ea8;
  font-size:13.5px;
  font-weight:800;
  letter-spacing:.01em;
  cursor:pointer;
  border-bottom:1.5px solid #0b6ea840;
}
.link-cta:hover{color:#071e33;border-bottom-color:#071e33}
.link-cta:focus-visible{outline:2px solid #087fc4;outline-offset:3px}

/* the proof panel */
.proof-panel{
  background:#fff;
  border:1px solid #e1eaf1;
  border-radius:16px;
  padding:30px 30px 34px;
  box-shadow:0 14px 44px #15354c0f;
  position:relative;
}
.proof-panel::before{
  content:'';
  position:absolute;
  left:0;top:26px;bottom:26px;
  width:3px;
  background:linear-gradient(180deg,#087fc4,#5ec2ff00);
  border-radius:0 3px 3px 0;
}
.proof-panel .eyebrow{color:#0b6ea8;letter-spacing:.16em;margin-bottom:20px}
.proof-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.proof-list li{
  /* statements, not buttons: no background, border, radius, shadow or pointer */
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:15px 0;
  color:#20415a;
  font-size:14px;
  font-weight:600;
  line-height:1.55;
  cursor:default;
  border-bottom:1px solid #eef3f7;
}
.proof-list li:last-child{border-bottom:0;padding-bottom:0}
.proof-list li:first-child{padding-top:0}
.proof-list li::before{
  content:'\2713';
  color:#087fc4;
  font-size:13px;
  font-weight:800;
  line-height:1.6;
  flex:0 0 auto;
}
.proof-list li:hover{background:none}

@media(max-width:1000px){
  .about-grid{grid-template-columns:1fr;gap:40px}
  .about-copy h2{max-width:none}
  .proof-panel{padding:26px 24px 28px}
}
@media(max-width:620px){
  .about{padding:64px 0}
  .about-actions{gap:16px}
  .about-actions .primary.lg{width:100%}
  .link-cta{width:100%;text-align:left}
  .proof-list li{font-size:13.5px;padding:13px 0}
}
/* Europe-first public sales sections */
.europe-lanes{background:#f6faff;padding:108px 0}.lane-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:42px}.lane-card{background:#fff;border:1px solid #d7e4ee;border-radius:14px;padding:25px;min-height:168px;box-shadow:0 8px 24px rgba(9,43,70,.05)}.lane-card span{display:block;color:#1889d0;font:700 11px/1.2 var(--mono,monospace);letter-spacing:.13em;text-transform:uppercase}.lane-card h3{margin:12px 0 9px;color:#08233d;font-size:25px}.lane-card p{margin:0;color:#55708a;line-height:1.55}
.equipment-section{background:#07243e;padding:108px 0}.equipment-layout{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(440px,1.2fr);gap:64px;align-items:start}.equipment-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.equipment-grid article{border:1px solid rgba(143,212,255,.24);border-left:3px solid #26a6f0;padding:22px;background:rgba(255,255,255,.035);min-height:132px}.equipment-grid h3{margin:0 0 8px;color:#fff;font-size:18px}.equipment-grid p{margin:0;color:#bdd1e1;line-height:1.45}
.readiness{background:#fff;padding:100px 0}.readiness-layout{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.readiness h2,.portal-promo h2{font-size:clamp(33px,4vw,54px);line-height:1.04;color:#08233d;margin:12px 0 18px;max-width:620px}.readiness p,.portal-promo p{color:#4d6981;max-width:580px;line-height:1.65;margin:0 0 25px}.readiness-list{list-style:none;margin:0;padding:0;border:1px solid #d7e4ee;border-radius:14px;overflow:hidden;background:#fbfdff}.readiness-list li{position:relative;padding:20px 24px 20px 54px;border-bottom:1px solid #d7e4ee;color:#163a58;font-weight:700}.readiness-list li:last-child{border-bottom:0}.readiness-list li:before{content:'✓';position:absolute;left:22px;color:#0a9adf;font-size:18px;font-weight:900}
.portal-promo{background:#eaf5fc;padding:106px 0}.portal-promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.portal-preview{background:#082842;color:#fff;border-radius:16px;padding:30px;display:grid;gap:13px;box-shadow:0 16px 40px rgba(8,40,66,.2)}.portal-preview span{color:#67c6ff;font:700 11px/1.2 var(--mono,monospace);letter-spacing:.14em}.portal-preview b{display:block;border-left:3px solid #1ea4ee;padding:12px 0 12px 16px;background:rgba(255,255,255,.05);font-size:16px}
@media (max-width:800px){.europe-lanes,.equipment-section,.readiness,.portal-promo{padding:72px 0}.lane-cards{grid-template-columns:1fr;margin-top:28px}.equipment-layout,.readiness-layout,.portal-promo-grid{grid-template-columns:1fr;gap:32px}.equipment-grid{grid-template-columns:1fr}.readiness h2,.portal-promo h2{font-size:35px}}

/* Phone header: keep the brand and actions visible, then let the section navigation
   scroll horizontally rather than clipping the final menu item. */
@media (max-width:760px){
  .site-nav-inner{padding:12px 14px;gap:10px;flex-wrap:wrap}
  .site-brand{margin-right:auto}
  .site-actions{margin-left:auto;gap:7px}
  .site-actions .ghost,.site-actions .primary{padding:10px 12px;font-size:11px;white-space:nowrap}
  .site-links{order:3;width:100%;margin:0;gap:8px;justify-content:space-between;overflow:visible;white-space:nowrap;padding:3px 0 6px}
  .site-links::-webkit-scrollbar{display:none}
  .site-links button{flex:0 0 auto;font-size:11px}
}


/* ------------------------------------------- public site: contrast + responsive

   Overrides sit at the end of the file so they win on order alone — no !important
   needed, and the original rules stay readable where they were written. */

/* Two colours measured below AA against the white surfaces they sit on. */
.lane-card span{color:#0b6ea8}      /* was #1889d0 -> 3.80:1, now 5.21:1 */
.track-grid span{color:#5d7789}     /* was #7a919f -> 3.29:1, now 4.70:1 */

/* Informational, not interactive. Cards, checklist rows, capability rows and badges
   state facts; nothing here responds to a click, so nothing shows a pointer. */
.lane-card,
.equipment-grid article,
.readiness-list li,
.portal-preview b,
.trust-grid div,
.foot-badges span{cursor:default}

/* --------------------------- public tracking result: pale steel-blue surface

   The result panel used to be pure white on the dark navy tracking section, which read
   as a hard cut-out. It is now a pale steel-blue surface with a slightly darker blue
   border and a low, soft shadow, so it sits ON the navy instead of punching through it.

   Colour, border and shadow only — no layout, copy or behaviour changes here. Every
   value was measured against the surface it actually lands on, and the ratios are noted
   wherever they are the reason for the choice. This block sits before the responsive
   rules below so those still win on the phone breakpoints. */
:root{
  --track-surface:#eaf4fb;   /* the panel */
  --track-surface-2:#deedf8; /* one step deeper: panels nested inside it */
  --track-border:#b7d3e8;    /* slightly darker blue: borders and rules */
  --track-label:#476881;     /* muted blue: small uppercase labels */
}

.track-card{
  background:var(--track-surface);
  border:1px solid var(--track-border);
  /* Low, wide, and blue-tinted rather than grey, so the edge stays soft against navy. */
  box-shadow:0 10px 28px #04162814,0 1px 2px #0a2a4512;
}
/* Rules inside the panel follow the border, one step lighter. */
.track-grid{border-top-color:#c9def0}

/* Muted blue labels: 5.28:1 on the panel, 4.92:1 on the nested surface — both AA.
   This also supersedes the earlier #5d7789, which was measured against white and falls
   to 4.22:1 once the surface is tinted. */
.track-grid span,
.carrier-ref span,
.carrier-likely span,
.track-foot,
.carrier-choose,
.carrier-note{color:var(--track-label)}

/* Pending timeline steps were 3.39:1 on the tinted surface; now 5.28:1. Completed steps
   keep navy — `.track-timeline li.done` outranks this on specificity. */
.track-timeline li{color:var(--track-label)}
.track-timeline li:not(:last-child)::after{background:#c9def0}
.track-timeline li i{background:#fff;border-color:var(--track-border)}

/* Amber never cleared 1.8:1 on a light surface. Same warning, in a tone that reads on
   it — scoped to the panel, since amber is correct on the navy section. */
.track-card .track-soft-warn{color:#9a5b00}

/* The handoff nests inside the panel on a hit, and sits directly on the navy section
   when NTXV holds no file. One step deeper so it reads as nested, and solid enough to
   hold its own edge in either place. */
.carrier-handoff{
  background:var(--track-surface-2);
  border-color:var(--track-border);
  box-shadow:0 1px 2px #0a2a450d;
}
/* 2.91:1 against the nested surface, now 5.21:1. */
.carrier-ref b .copied{color:#0a6e52}

/* .ghost is built for the dark site chrome (#d6e8f4 on navy), which is near-invisible
   inside a light panel. The Copy and carrier-choice buttons get the panel's own
   treatment instead: navy text, blue border, white face. Primary buttons are untouched
   and stay NTXV blue. */
.carrier-handoff .ghost{
  background:#fff;
  border-color:var(--track-border);
  color:var(--navy);
}
.carrier-handoff .ghost:hover{
  border-color:#087fc4;
  background:#f4fafe;
  color:#08355a;
}

/* ============================================================================
   INTERNAL WORKSPACE TEXT CONTRAST

   The operations screens sit on white and near-white surfaces, but much of their
   secondary text was inherited from the public site's palette, which is designed for a
   dark navy background. On white those greys measured 2.2:1 to 3.3:1 — legible only if
   you already knew what it said.

   One scale, applied to the light-surface components only. Every value is measured
   against the four internal surfaces (#fff, the #f4f7fa page, and the #eaf4fb / #deedf8
   tracking panels); the worst case for each is noted.

     --ops-ink    #102a43  primary text            14.6:1 / 12.3:1 worst
     --ops-ink-2  #334e68  secondary text           8.6:1 /  7.2:1 worst
     --ops-ink-3  #486581  muted labels and hints   6.1:1 /  5.1:1 worst
     --ops-hint   #516a83  placeholders             5.6:1 /  4.7:1 worst

   Deliberately NOT touched: the public homepage, the navy sidebar, the dark mobile
   header and tab bar, and the dark tracking section. Pale text is correct there, and
   darkening it would make those unreadable — which is the same bug in reverse.

   The blue accent stays on borders, buttons and links; it is not used for small body
   text, where it never had the contrast to carry it.
   ============================================================================ */
:root{
  --ops-ink:#102a43;
  --ops-ink-2:#334e68;
  --ops-ink-3:#486581;
  --ops-hint:#516a83;
}

/* Muted labels, hints and small print on light cards. Was #7a919f / #8298a7 / #8ba0ad
   / #9ab0bd / #7790a0 — 2.3:1 to 3.3:1 on white. */
.charge-note,
.charge-note.mono,
.field-hint,
.section h2 small,
.card .basis,
.stage-bar .stage,
.inv-fine,
.chart-empty,
.bar-label small,
.prototype-note,
.range-note,
.dim-x,
.ai-sections h4 small,
.portal-methods label.disabled,
.carrier-note,
.portal-hint,
.carrier-choose{color:var(--ops-ink-3)}

/* Body and value text that reads as primary on an internal screen. */
.empty,
.note,
.preview-lead,
.ind-card p,
.status-actions span,
.detail-actions span{color:var(--ops-ink-2)}

/* Column headings and field labels: small, uppercase and letter-spaced, which is
   exactly where a weak grey costs the most. */
.data-table th,
.info-list span,
.track-grid span,
.carrier-ref span,
.carrier-likely span,
.status-field{color:var(--ops-ink-2)}

/* Entered values sit at full strength against their labels. */
.data-table td,
.info-list b,
.status-field input,
.status-field select,
.status-field textarea{color:var(--ops-ink)}

/* Lighter than an entered value, still readable. Was #5f89a6 and lighter. */
.status-field input::placeholder,
.status-field textarea::placeholder,
.search::placeholder,
.ctl::placeholder{color:var(--ops-hint);opacity:1}

/* The light mobile workspace (.m-app is #f4f7fa). Its dark header, tab bar and brief
   panel are excluded on purpose — they are white-on-navy and already correct. */
.m-tile small,
.m-note,
.m-empty,
.m-doc span,
.m-event span,
.m-sheet-fine,
.m-h2 small,
.m-track-grid span,
.m-track-route span,
.m-menu button span,
.portal-secondary button{color:var(--ops-ink-3)}

/* A muted tag still has to be readable; #8ba0ad on #eef3f6 was 2.6:1. */
.tag.doc-muted{color:var(--ops-ink-3)}

/* ------------------------------------------------ client portal user admin

   Admin-only card on a customer account. The one-time password block is styled to look
   like what it is: a secret shown once, not a stored field. */
.portal-methods{display:grid;gap:8px;margin-top:8px}
.portal-methods label{display:flex;align-items:flex-start;gap:8px;font:400 12.5px Manrope,sans-serif;
  letter-spacing:0;text-transform:none;color:var(--navy);line-height:1.5}
.portal-methods label.disabled{color:#8ca6b8}
.portal-methods input[type=radio]{margin-top:2px}
.portal-hint{margin:10px 0 0;font-size:12px;line-height:1.6;color:#5d7789}
.portal-actions{white-space:nowrap}
.portal-actions .ghost{padding:6px 10px;font-size:11px;margin-right:6px;
  border-color:#cfe0ea;color:var(--navy);background:#fff}
.portal-actions .ghost:hover{border-color:#087fc4;background:#f4fafe;color:#08355a}
.portal-notice{margin:14px 0;padding:14px 16px;border:1px solid #b7d3e8;border-left:3px solid #087fc4;
  border-radius:11px;background:#eaf4fb;color:var(--navy);font-size:13px;line-height:1.6}
.portal-notice b{display:block;margin-bottom:10px}
.portal-secret{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;
  padding:10px 12px;background:#fff;border:1px dashed #b7d3e8;border-radius:9px}
.portal-secret span{font:10px 'DM Mono';letter-spacing:.08em;color:#476881}
.portal-secret code{font:15px 'DM Mono';letter-spacing:.04em;color:var(--navy)}

/* Lane cards: three across is tight before the 800px single-column collapse. */
@media(max-width:1150px){
  .lane-cards{grid-template-columns:repeat(2,1fr)}
}

/* The tracking result grid carries five facts; three fixed columns overflow a phone. */
@media(max-width:900px){
  .track-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .track-grid{grid-template-columns:1fr;gap:12px}
  .track-card{padding:18px}
  /* Matches the panel's own tightening; the actions already wrap on their own. */
  .carrier-handoff{padding:14px 15px}
  .track-form{flex-wrap:wrap}
  .track-form input{flex:1 1 100%}
  .track-form button{width:100%}
}

/* The header is Back + brand + five links + two actions. Below 980px it wraps to a
   second row rather than overflowing, and the link row scrolls if it still cannot fit. */
@media(max-width:980px){
  .site-nav-inner{flex-wrap:wrap;gap:12px 16px;padding:12px 18px}
  .site-links{
    order:3;
    width:100%;
    margin-left:0;
    gap:20px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .site-links::-webkit-scrollbar{display:none}
  .site-links button{white-space:nowrap;flex:0 0 auto}
  .site-actions{margin-left:auto}
}
@media(max-width:600px){
  .site-nav-inner{padding:10px 14px;gap:10px 12px}
  .site-links{gap:16px}
  .site-links button{font-size:12.5px}
  .site-actions{width:100%;gap:8px}
  .site-actions button{flex:1 1 0;font-size:12.5px;padding:9px 10px}
}

/* Section rhythm on a phone: the checklist and portal panels need room to breathe. */
@media(max-width:620px){
  .readiness-list li{padding:16px 18px 16px 46px;font-size:14px}
  .readiness-list li:before{left:18px;font-size:16px}
  .portal-preview{padding:22px}
  .portal-preview b{font-size:14.5px;padding:11px 0 11px 14px}
  .lane-card{min-height:0;padding:22px}
  .equipment-grid article{min-height:0;padding:18px}
}


/* ----------------------------------------------------------------- settings

   Two columns of panels, with the carrier list spanning both. Read-only blocks look
   settled rather than disabled: an info-list, not a greyed-out form. */
.set-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.set-wide{grid-column:1/-1}
.set-form{display:grid;gap:14px;margin-top:4px}
.set-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.set-form label{display:grid;gap:6px;font-size:12px;font-weight:700;color:#20415a;letter-spacing:.01em}
.set-form input,.set-form select{
  padding:10px 12px;border:1px solid #d3dfe8;border-radius:9px;
  font:inherit;font-size:13.5px;font-weight:500;color:#0b2740;background:#fff;
}
.set-form input:focus,.set-form select:focus{outline:2px solid #087fc4;outline-offset:1px;border-color:#087fc4}
.set-hint{font-size:11px;font-weight:600;color:#64808f;font-style:normal}

/* a switch row: the control, its name, and what flipping it does */
.set-check{display:flex!important;align-items:flex-start;gap:11px;grid-template-columns:none!important;cursor:pointer}
.set-check input{width:17px;height:17px;flex:0 0 auto;margin-top:1px;accent-color:#087fc4;cursor:pointer}
.set-check span{display:grid;gap:3px;font-size:13px;font-weight:700;color:#20415a}
.set-check em{font-size:11.5px;font-weight:500;color:#5d7789;font-style:normal;line-height:1.5}

.set-next{
  background:#f2f8fc;border:1px solid #d7e7f3;border-radius:9px;padding:11px 13px;
  font-size:12px;font-weight:700;color:#20415a;letter-spacing:.01em;
}
.set-next b{font-family:'DM Mono',monospace;color:#0b2740;margin-left:6px}
.set-note{margin:14px 0 0;font-size:12px;line-height:1.65;color:#5d7789}
.set-error{background:#fff1f1;border:1px solid #f3c9c9;border-radius:9px;padding:10px 12px;font-size:12.5px;font-weight:600;color:#98232d}
.set-banner{
  border-radius:10px;padding:12px 15px;margin:0 0 16px;
  font-size:13px;font-weight:700;letter-spacing:.01em;
}
.set-banner.ok{background:#eefaf3;border:1px solid #bce6d0;color:#12603a}

/* carrier connection rows: a status, never a control */
.carrier-list{display:grid;gap:10px}
.carrier-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:#fbfdff;border:1px solid #e1eaf1;border-radius:11px;padding:15px 17px;cursor:default;
}
.carrier-row b{display:block;font-size:14.5px;color:#0b2740}
.carrier-row span{display:block;margin-top:4px;font-size:12px;line-height:1.55;color:#5d7789;max-width:62ch}
.conn-tag{
  flex:0 0 auto;border-radius:20px;padding:5px 12px;
  font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;cursor:default;
}
.conn-tag.off{background:#fdf1e7;border:1px solid #f0d0ae;color:#8a4b12}
.conn-tag.on{background:#eefaf3;border:1px solid #bce6d0;color:#12603a}

/* Administrator carrier diagnostics — which credential is present, never its value. */
.conn-creds{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.conn-cred{
  display:inline-block;margin:0;border-radius:5px;padding:3px 8px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;letter-spacing:.02em;
}
.conn-cred.on{background:#eefaf3;border:1px solid #bce6d0;color:#12603a}
.conn-cred.off{background:#f4f7f9;border:1px solid #dde7ee;color:#6d8797}
.conn-verify{display:block;margin-top:8px;font-size:11.5px;font-style:italic;color:#7d94a4}

@media(max-width:1100px){
  .set-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .set-row{grid-template-columns:1fr}
  .carrier-row{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ------------------------------------------- three-step export quote request

   One card, three steps. The progress bar is the only chrome; everything else is
   label, control and — when something is wrong — a message directly under the field
   that caused it. Navy and blue on white, matching the rest of the public site. */
.quote-wizard{
  background:#fff;
  border:1px solid #e1eaf1;
  border-radius:18px;
  padding:clamp(22px,2.6vw,34px);
  box-shadow:0 20px 60px rgba(8,35,61,.10);
}

/* --- progress --- */
.wiz-track{height:5px;background:#e7eff5;border-radius:4px;overflow:hidden}
.wiz-fill{display:block;height:100%;background:linear-gradient(90deg,#0b6ea8,#4fb3f0);border-radius:4px;transition:width .35s ease}
.wiz-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 0;padding:0}
.wiz-step-btn{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:10px;row-gap:2px;align-items:center;
  width:100%;text-align:left;background:none;border:0;padding:6px 0;cursor:default;
}
li.done .wiz-step-btn{cursor:pointer}
.wiz-num{
  grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:#eef4f9;color:#5d7789;font-size:12.5px;font-weight:800;
}
.wiz-steps li.on .wiz-num{background:#0b6ea8;color:#fff}
.wiz-steps li.done .wiz-num{background:#12603a;color:#fff}
.wiz-step-btn b{font-size:13px;font-weight:800;color:#20415a;letter-spacing:-.01em}
.wiz-steps li.on .wiz-step-btn b{color:#071e33}
.wiz-step-btn em{font-size:11px;font-weight:600;font-style:normal;color:#5d7789;letter-spacing:.04em;text-transform:uppercase}
li.done .wiz-step-btn:hover b{color:#0b6ea8}
.wiz-step-btn:focus-visible{outline:2px solid #087fc4;outline-offset:3px;border-radius:6px}

/* --- fields --- */
.wiz-body{margin-top:26px}
.step-title{margin:0 0 6px;font-size:clamp(20px,2.2vw,27px);line-height:1.2;letter-spacing:-.03em;color:#071e33}
.step-lead{margin:0 0 24px;font-size:14px;line-height:1.65;color:#3d5a6d;max-width:60ch}
.field{margin:0 0 20px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field-label{display:block;margin:0 0 8px;font-size:12.5px;font-weight:800;color:#20415a;letter-spacing:.01em}
.field-label .req{color:#b4232f;font-weight:800}
.ctl{
  width:100%;padding:12px 14px;border:1.5px solid #d3dfe8;border-radius:10px;
  font:inherit;font-size:14px;font-weight:500;color:#0b2740;background:#fff;
}
.ctl::placeholder{color:#8ba3b3}
.ctl:focus{outline:2px solid #087fc4;outline-offset:1px;border-color:#087fc4}
.ctl.invalid{border-color:#c9414d;background:#fffafa}
textarea.ctl{resize:vertical;min-height:96px;line-height:1.6}
.field-hint{display:block;margin-top:7px;font-size:11.5px;font-style:normal;color:#5d7789;line-height:1.55}
.field-error{display:block;margin-top:7px;font-size:12px;font-weight:700;font-style:normal;color:#b4232f}
.field-error::before{content:'! ';font-weight:800}
.dg-field{background:#fff8f1;border:1px solid #f0dcc4;border-radius:12px;padding:16px}

.split{display:grid;grid-template-columns:1fr 96px;gap:10px}
.dims{display:grid;grid-template-columns:1fr auto 1fr auto 1fr 96px;gap:8px;align-items:center}
.dim-x{color:#8ba3b3;font-size:13px;font-weight:700}
.ctl.unit{padding-left:10px;padding-right:8px}

/* --- radio choices: a row of selectable cards, clearly controls --- */
.choice-row{display:flex;flex-wrap:wrap;gap:10px}
.choice{
  display:inline-flex;align-items:center;gap:9px;
  border:1.5px solid #d3dfe8;border-radius:10px;padding:11px 15px;
  font-size:13.5px;font-weight:700;color:#20415a;background:#fff;cursor:pointer;
}
.choice input{width:16px;height:16px;accent-color:#0b6ea8;cursor:pointer;margin:0}
.choice:hover{border-color:#9dc4dd}
.choice.on{border-color:#0b6ea8;background:#f2f8fc;color:#071e33;box-shadow:inset 0 0 0 1px #0b6ea8}
.choice:focus-within{outline:2px solid #087fc4;outline-offset:2px}

/* --- upload --- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.drop-zone{
  display:grid;justify-items:center;gap:6px;text-align:center;
  border:2px dashed #cadbe7;border-radius:14px;padding:30px 20px;background:#fbfdff;
  transition:border-color .15s ease,background .15s ease;
}
.drop-zone.over{border-color:#0b6ea8;background:#eef7fd}
.drop-mark{font-size:26px;line-height:1;color:#0b6ea8}
.drop-zone b{font-size:14.5px;color:#0b2740}
.drop-zone span{font-size:13px;color:#3d5a6d}
.drop-zone em{font-size:11.5px;font-style:normal;color:#64808f}
.booking-intake-form{max-width:1040px}
.booking-intake-form h2{margin:7px 0 12px;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.025em;color:#071e33}
.booking-drop{margin-top:18px;min-height:172px;padding:34px 24px;align-content:center;background:#fcfeff}
.booking-drop .drop-mark{font-size:31px}
.booking-file-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px;padding:12px 14px;border:1px solid #dbe8f0;border-radius:10px;background:#f4f9fc;color:#173a54}
.booking-file-summary.empty{display:block;color:#668092;background:#fbfdff}
.booking-file-summary span{display:grid;gap:3px;min-width:0}
.booking-file-summary b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#0b2740}
.booking-file-summary small{font-size:11.5px;color:#5d7789;font-family:'DM Mono',monospace}
.booking-read-list{margin-top:13px;padding:12px 14px;border-left:3px solid #0b8ad1;background:#eef8fe;color:#37556a;font-size:12.5px;line-height:1.55}
.booking-read-list span{display:block;margin-bottom:2px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#126fa6}
.booking-read-list b{font-weight:650;color:#23455f}
.intake-divider{display:flex;align-items:center;gap:10px;margin:24px 0 16px;color:#6c8290;font-size:10.5px;font-weight:800;letter-spacing:.09em}
.intake-divider:before,.intake-divider:after{content:'';height:1px;flex:1;background:#dce7ee}
.file-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.file-list li{
  display:flex;align-items:center;gap:12px;
  background:#f4f8fb;border:1px solid #dfe9f0;border-radius:10px;padding:11px 13px;
}
.file-name{flex:1;min-width:0;font-size:13px;font-weight:700;color:#20415a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-size{flex:0 0 auto;font-size:11.5px;font-weight:700;color:#5d7789;font-family:'DM Mono',monospace}
.file-remove{flex:0 0 auto;background:none;border:0;padding:4px 6px;font-size:11.5px;font-weight:800;color:#b4232f;cursor:pointer;text-decoration:underline}
.file-remove:hover{color:#8a1a24}
.file-remove:focus-visible{outline:2px solid #087fc4;outline-offset:2px;border-radius:4px}

/* --- review --- */
.review{margin-top:26px;border:1px solid #dfe9f0;border-radius:14px;overflow:hidden;background:#fbfdff}
.review-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 18px;border-bottom:1px solid #dfe9f0;background:#f2f8fc}
.review-head b{font-size:13.5px;color:#071e33}
.review-list{display:grid;grid-template-columns:1fr 1fr;gap:0}
.review-list div{padding:13px 18px;border-bottom:1px solid #eef3f7;cursor:default}
.review-list div:nth-child(odd){border-right:1px solid #eef3f7}
.review-list span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5d7789}
.review-list b{display:block;margin-top:4px;font-size:13.5px;color:#0b2740;font-weight:700;overflow-wrap:anywhere}

/* --- actions --- */
.wiz-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:28px}
.wiz-actions .primary.lg,.wiz-actions .ghost.lg{min-width:150px}
.wiz-fine{margin:16px 0 0;font-size:11.5px;line-height:1.6;color:#64808f;text-align:center}

/* --- confirmation --- */
.wiz-done{text-align:center;padding:22px 10px 12px}
.done-mark{
  display:grid;place-items:center;width:58px;height:58px;margin:0 auto 18px;
  border-radius:50%;background:#eefaf3;border:1px solid #bce6d0;color:#12603a;font-size:26px;
}
.wiz-done h3{margin:0 0 10px;font-size:clamp(21px,2.4vw,29px);letter-spacing:-.03em;color:#071e33}
.wiz-done p{margin:0 auto 12px;max-width:52ch;font-size:14px;line-height:1.7;color:#3d5a6d}
.done-ref{font-size:15px!important;color:#20415a!important}
.done-ref b{font-family:'DM Mono',monospace;font-size:17px;color:#0b6ea8;letter-spacing:.02em}
.done-files{font-size:12.5px!important;color:#5d7789!important}
.done-next{font-size:13px!important}
.wiz-done .wiz-actions{justify-content:center;margin-top:22px}

@media(max-width:820px){
  .wiz-steps{grid-template-columns:1fr;gap:4px}
  .wiz-steps li:not(.on){display:none}
  .field-row,.review-list{grid-template-columns:1fr}
  .review-list div:nth-child(odd){border-right:0}
}
@media(max-width:620px){
  .quote-wizard{padding:20px 16px;border-radius:14px}
  .dims{grid-template-columns:1fr auto 1fr;row-gap:8px}
  .dims .ctl.unit{grid-column:1/-1}
  .wiz-actions{flex-direction:column-reverse}
  .wiz-actions .primary.lg,.wiz-actions .ghost.lg{width:100%}
  .wiz-actions span{display:none}
  .choice{flex:1 1 100%}
}
/* Final mobile hero placement: this intentionally overrides the earlier responsive
   stacking rule. The copy begins at the top of the image, immediately below nav. */
@media(max-width:820px){
  .hero.cinematic{align-items:flex-start}
  .hero.cinematic .hero-inner{align-self:flex-start;justify-content:flex-end;padding:14px 14px 84px 22px}
  .hero.cinematic .hero-copy{margin-left:auto;width:calc(100% - 8px);max-width:none}
}


/* quote requests from the public site, listed for staff on the Quotes screen */
.lead-files{max-width:220px}
.lead-file{
  display:block;font-size:11.5px;font-weight:700;color:#0b6ea8;
  text-decoration:underline;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lead-file:hover{color:#071e33}


/* ============================================ public header + hero top, redesigned

   Three changes, in order of what you see first:

   1. The header is compact and carries no Back control. The logo is the first item
      in the bar with nothing before it, the section links sit to its right, and the
      two actions hold the far right.
   2. The vessel starts immediately under that bar. The old scrim opened on a dark
      band across the top of the photograph, which read as wasted space now that the
      header is a solid bar in its own right; that band is gone.
   3. The empty left of the frame now carries a small route marker, and the sales
      panel sits nearer the top so the two read as one composition. */

/* ---------------------------------------------------------------- 1. header */
/* a compact navy bar with one quiet rule under it */
.site-nav{
  background:rgba(6,23,40,.94);
  border-bottom:1px solid #14395a;
}
.site-nav-inner{
  padding:9px clamp(16px,2.2vw,30px);
  gap:clamp(14px,2vw,28px);
  min-height:0;
}
/* the logo is the first thing in the bar: no leading control, no leading gap */
.site-nav .site-brand{
  margin:0!important;
  margin-right:auto!important;
  padding:0!important;
  flex:0 0 auto;
  line-height:0;
}
.ntxv-logo.site{height:34px}
/* links sit right of the logo, actions hold the far right */
.site-links{margin-left:0;gap:clamp(14px,1.8vw,24px)}
.site-links button{font-size:12.5px;letter-spacing:.005em}
.site-actions{gap:9px;flex:0 0 auto}
.site-actions .ghost,.site-actions .primary{padding:8px 15px;font-size:12.5px}

@media(max-width:980px){
  /* the wrapped layout keeps the logo first and the actions right on its own row */
  .site-nav-inner{padding:9px 16px;gap:10px 14px}
  .site-nav .site-brand{margin-right:auto!important}
  .ntxv-logo.site{height:30px}
}
@media(max-width:600px){
  .ntxv-logo.site{height:27px}
  .site-nav-inner{padding:8px 13px}
}

/* ------------------------------------------------------- 2. hero starts clean */
/* No top band: the header already separates the page from the photograph, so the
   scrim only darkens where the copy panel actually needs contrast. */
.hero-scrim{
  background:
    linear-gradient(100deg,#04121f14 0%,#04121f0a 34%,#04121f2b 54%,#061c2e94 70%,#04121fe0 88%,#04121f 100%),
    linear-gradient(180deg,transparent 0%,transparent 62%,#04121fa6 100%);
}
/* the photograph covers the hero from its very first pixel */
.hero.cinematic{margin-top:0;border-top:0}

/* --------------------------------------- 3. composition: marker left, panel right */
.hero.cinematic .hero-inner{
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  padding-top:clamp(26px,5.5vh,62px);
  padding-bottom:clamp(80px,12vh,120px);
}
.hero-copy{margin-left:auto;margin-top:0}

/* the left marker: a label, a travelling route line, and one line of copy */
.hero-mark{
  flex:0 0 auto;
  align-self:flex-start;
  max-width:min(280px,30vw);
  padding:14px 0 0 clamp(4px,1.4vw,18px);
  /* a statement, not a control */
  cursor:default;
}
.hero-mark-label{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.19em;
  color:#eaf6ff;
  text-shadow:0 1px 14px #04121fcc,0 0 3px #04121f99;
}
.hero-mark-label i{color:#7fd0ff;font-style:normal;font-size:14px;line-height:1}
/* a thin line that runs west to east, the way the cargo does */
.hero-mark-route{
  position:relative;
  height:2px;
  width:clamp(96px,13vw,170px);
  margin:15px 0 13px;
  border-radius:2px;
  background:linear-gradient(90deg,#7fd0ff4d,#7fd0ff1a);
  overflow:hidden;
}
.hero-mark-route span{
  position:absolute;
  top:0;
  left:0;
  width:42%;
  height:100%;
  border-radius:2px;
  background:linear-gradient(90deg,#7fd0ff00,#bfe6ff,#7fd0ff00);
  animation:heroMarkRun 25s linear infinite;
}
@keyframes heroMarkRun{
  0%{transform:translateX(-45%);opacity:0}
  14%{opacity:1}
  86%{opacity:1}
  100%{transform:translateX(240%);opacity:0}
}
.hero-mark-note{
  margin:0;
  font-size:12.5px;
  line-height:1.55;
  font-weight:600;
  color:#d3e7f4;
  text-shadow:0 1px 12px #04121fd9,0 0 3px #04121fb3;
  max-width:26ch;
}

/* the marker is decoration on a photograph; it never competes with the panel */
@media(max-width:1100px){
  .hero-mark{max-width:220px;padding-top:10px}
  .hero-mark-note{font-size:12px}
}
/* below the two-column threshold the panel takes the full frame and the marker goes */
@media(max-width:820px){
  .hero-mark{display:none}
  .hero.cinematic .hero-inner{
    justify-content:flex-end;
    padding-top:clamp(20px,4vh,40px);
  }
}
@media(prefers-reduced-motion:reduce){
  .hero-mark-route span{animation:none!important;opacity:.9;transform:translateX(30%)}
}

/* ------------------------------------------- the export route, woven into the photo

   The route used to be a strip pinned under the photograph, which left a dark band
   across the bottom of the frame. It now runs inside the image itself: a thin line
   from Toronto at the lower left, climbing diagonally toward Europe, with the port
   names riding on it. Past the last label the line carries on behind the sales panel,
   so the composition reads as one picture rather than a photo with a caption bar.

   The whole layer sits in .hero-media (z-index 0-1). .hero-inner is z-index 2, so the
   line passes BEHIND the headline and the buttons and can never sit over them. */
.hero-route{opacity:.72}
.hero-route path{
  /* drawn once on load, then left alone — the movement is the light points */
  animation:routeDraw 5.5s ease-out .5s forwards;
  filter:drop-shadow(0 0 5px #4fb3f080);
}
/* the light points travel forward only: each restarts at Toronto, never reverses */
.route-dot{filter:drop-shadow(0 0 5px #bfe6ffcc)}

.hero-lane{position:absolute;inset:0;z-index:1;pointer-events:none}
.lane-stop{
  position:absolute;
  display:flex;
  align-items:center;
  gap:7px;
  /* the anchor sits ON the line; the label rides just above it */
  transform:translate(-6px,-100%);
  white-space:nowrap;
  cursor:default;
  opacity:0;
  animation:laneStopIn .9s ease-out forwards;
}
.lane-stop i{
  width:5px;height:5px;border-radius:50%;
  background:#bfe6ff;
  box-shadow:0 0 0 3px #4fb3f024,0 0 9px #8fd4ffb3;
  flex:0 0 auto;
}
.lane-stop b{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#dceeff;
  text-shadow:0 1px 10px #04121f,0 0 4px #04121fe6;
}
.lane-stop.start i{width:7px;height:7px;background:#fff;box-shadow:0 0 0 4px #4fb3f033,0 0 12px #bfe6ff}
.lane-stop.start b{color:#fff;letter-spacing:.16em;font-size:11px}
.lane-stop.end b{color:#eaf6ff}
/* each stop fades in along the run, west to east, once */
.lane-stop:nth-child(1){animation-delay:.7s}
.lane-stop:nth-child(2){animation-delay:1.0s}
.lane-stop:nth-child(3){animation-delay:1.3s}
.lane-stop:nth-child(4){animation-delay:1.6s}
.lane-stop:nth-child(5){animation-delay:1.9s}
.lane-stop:nth-child(6){animation-delay:2.2s}
.lane-stop:nth-child(7){animation-delay:2.5s}
@keyframes laneStopIn{from{opacity:0;transform:translate(-14px,-100%)}to{opacity:1;transform:translate(-6px,-100%)}}

/* nothing is pinned to the bottom of the hero any more, so the reserved band goes */
.hero.cinematic .hero-inner{padding-bottom:clamp(48px,7vh,78px)}

/* Keep the complete sales block together near the top of the vessel frame.
   The experience proof stays with its headline, CTAs and service proof. */
.hero.cinematic .hero-inner{
  align-items:flex-start;
  padding-top:18px;
}
.hero.cinematic .hero-copy{margin-top:0}
@media(max-width:820px){
  .hero.cinematic .hero-inner{
    align-self:flex-start;
    justify-content:flex-end;
    padding-top:16px;
  }
}
.lane-strip{display:none!important}

@media(max-width:1200px){
  .lane-stop b{font-size:10px;letter-spacing:.11em}
}
@media(max-width:980px){
  /* fewer stops as the frame narrows, so the labels never collide */
  .lane-stop.lite{display:none}
}
@media(max-width:820px){
  /* on a phone the route is atmosphere behind the content: Toronto and three ports */
  .hero-lane{opacity:.4}
  .hero-route{opacity:.5}
  .lane-stop b{font-size:9px;letter-spacing:.09em}
  .lane-stop i{width:4px;height:4px}
  .lane-stop.start i{width:5px;height:5px}
}
@media(prefers-reduced-motion:reduce){
  .lane-stop{animation:none!important;opacity:1;transform:translate(-6px,-100%)}
  .hero-route path{animation:none!important;stroke-dashoffset:0}
}


/* =============================================== hero timing + mobile safety

   1. The vessel pan is a 55-second cycle. Two copies of the photograph run half a
      cycle apart and crossfade, so the pan is always left-to-right and never rewinds
      — the loop point falls inside the crossfade where it cannot be seen. The delay
      on the second copy must stay at exactly minus half the cycle.
   2. The route lights are a 25-second loop, set on the SVG animateMotion elements.
   3. The mobile hero can no longer clip its own copy. */
.hero-photo{animation:heroSail 55s linear infinite,heroCross 55s linear infinite}
.hero-photo.b{animation-delay:-27.5s,-27.5s}

/* --------------------------------------------------------- mobile: nothing clips

   The hero stacks to a single column at 820px, but min-height:auto only applied from
   760px. In the band between the two the hero was still locked to 88vh with
   overflow:hidden while the copy had already gone full width — so a tall sales block
   (eyebrow, five-word headline, lead, two CTAs, three proof items and the 26-years
   figure) had nowhere to go and was cut off at the fold. The two breakpoints now
   agree, and the hero grows to whatever the copy needs. */
@media(max-width:820px){
  .hero.cinematic{
    min-height:auto;
    /* the photograph is a background layer; the copy sets the height */
    height:auto;
  }
  .hero.cinematic .hero-inner{
    /* room for the whole block, and never wider than the screen */
    min-height:0;
    padding-bottom:44px;
  }
  .hero-copy{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  /* the headline wraps by whole words and is never scaled below a readable size */
  .hero.cinematic h1.hero-title{
    font-size:clamp(30px,8.4vw,44px);
    line-height:1.08;
    overflow-wrap:break-word;
    hyphens:none;
  }
  .hero-title .w{white-space:nowrap}
  .hero.cinematic .hero-lead{font-size:15px;line-height:1.6}
}
@media(max-width:420px){
  .hero.cinematic h1.hero-title{font-size:clamp(27px,8.2vw,34px)}
  .hero.cinematic .hero-inner{padding-left:16px;padding-right:16px}
}


/* ============================================================================
   Login and password-recovery typography
   ============================================================================
   Scoped to .login, which wraps all three screens (sign in, forgot password, set
   new password). Nothing outside those screens is affected -- .field, .submit,
   .back and .eyebrow are shared with the operations shell, so every rule here is
   qualified with .login on purpose.

   Why the text looked soft on Windows
   -----------------------------------
   .login-card-wrap carried backdrop-filter: blur(14px). A backdrop-filter promotes
   the element to its own compositing layer, and text in a composited layer loses
   ClearType subpixel antialiasing -- Windows falls back to greyscale AA, which
   reads as slightly blurry and thin. The blur is removed below and the dimming it
   provided is replaced with a plain translucent background, which needs no layer.

   Font smoothing is pinned to auto rather than 'antialiased'. antialiased thins
   glyphs on macOS and buys nothing on Windows; auto lets each OS render natively.
   ============================================================================ */

.login{
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing:auto;
  -moz-osx-font-smoothing:auto;
  text-rendering:auto;
}
/* Inherit into form controls, which do not inherit font-family by default. */
.login input,
.login button,
.login select,
.login textarea{ font-family:inherit }

/* No compositing layer over the card: this is the blur fix. */
.login .login-card-wrap{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background:rgba(2,14,25,.52);
}
/* Nothing on the card may create a layer or fade text. */
.login .login-card{
  filter:none;
  opacity:1;
  transform:none;
}

/* ------------------------------------------------------------- the card ---- */

.login .login-card h2{
  font-size:30px;
  line-height:1.18;
  font-weight:800;
  letter-spacing:-.02em;
  color:#071a2d;
  margin:18px 0 10px;
}
/* Was #638094 on white -- about 4:1, the "pale blue-grey" problem. #31485c is
   roughly 9:1 and still reads as supporting text rather than a heading. */
.login .login-card p{
  color:#31485c;
  font-size:16px;
  line-height:1.6;
  font-weight:500;
}
/* Labels: larger, heavier, dark navy. Was 12px / #365166. */
.login .field{
  font-size:13.5px;
  font-weight:800;
  letter-spacing:.045em;
  color:#0d2337;
  gap:9px;
  margin:17px 0;
}
/* 16px is also what stops iOS Safari zooming the page on focus. */
.login .field input{
  font-size:16px;
  font-weight:500;
  padding:14px;
  color:#071a2d;
  border:1.5px solid #b8c8d5;
  border-radius:9px;
  background:#fff;
}
.login .field input::placeholder{ color:#5d7286; opacity:1 }
.login .field input:focus{
  border-color:#0a6aa8;
  outline:3px solid #cfe8fa;
  outline-offset:0;
}
.login .submit{
  font-size:16px;
  font-weight:800;
  letter-spacing:.01em;
  padding:15px;
  background:#0a6aa8;
  border-radius:9px;
  margin-top:16px;
}
.login .submit:hover{ background:#095c92 }

/* Helper text. Was 11px and inheriting the pale card colour. */
.login .hint{
  font-size:14px!important;
  line-height:1.55;
  font-weight:600;
  color:#31485c;
  margin:22px 0 0!important;
}
.login .hint a{
  color:#0a5f96;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:2px;
}
.login .hint a:hover{ color:#074a76 }

/* Back sits on the white card, where #087fc4 was only about 3.4:1. */
.login .back,
.login .nav-back{
  font-size:14px;
  font-weight:800;
  color:#0a5f96;
  letter-spacing:.01em;
}
.login .back:hover{ color:#074a76 }

/* Status messages carry real information, so they get body-text size. */
.login .login-error{ font-size:14px; line-height:1.55; color:#8a2626; font-weight:600 }
.login .login-note{ font-size:14px; line-height:1.6; color:#2c4a5e; font-weight:600 }

/* Demo-mode account tiles (demo mode only; absent in Supabase mode). */
.login .demo-actions button{
  font-size:13px;
  font-weight:700;
  color:#24435c;
  padding:10px;
}

/* --------------------------------------------------- the dark left panel ---- */
/* On navy rather than white, so the direction of the fix is lighter, not darker. */
.login .eyebrow{
  font-family:inherit;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.14em;
  color:#7cc7f5;
}
.login-copy p{
  color:#dbe9f3;
  font-size:18px;
  line-height:1.65;
  font-weight:500;
}
.login .network-line{
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  letter-spacing:.09em;
  color:#e3f0f9;
}
.login .brand{ font-weight:800 }

/* ------------------------------------------------------------- responsive --- */

/* Tablet and below: the two columns have already stacked at 900px. */
@media(max-width:900px){
  .login .login-card{ padding:32px 28px }
  .login .login-card h2{ font-size:28px }
}

/* Phones: body copy must not drop below 16px. */
@media(max-width:520px){
  .login .login-card{ padding:26px 22px }
  .login .login-card h2{ font-size:26px; margin-top:14px }
  .login .login-card p,
  .login .hint,
  .login .login-note,
  .login .login-error{ font-size:16px!important; line-height:1.55 }
  .login .field{ font-size:15px }
  .login .field input,
  .login .submit{ font-size:16px }
  .login .back,
  .login .nav-back{ font-size:15px }
  .login-copy p{ font-size:16px }
}


/* ============================================================================
   User management controls
   ============================================================================
   Password inputs pair with a Show/Hide button. The reveal is a convenience for the
   administrator typing a temporary password they are about to pass on -- it never
   reveals a stored password, because Supabase keeps only a hash and the field is
   always empty when an existing user is opened.
   ============================================================================ */

.secret-field{ position:relative; display:block }
.secret-field input{
  width:100%;
  padding-right:74px;                 /* room for the toggle */
  border:1px solid #dce6ed;
  border-radius:8px;
  padding-top:11px; padding-bottom:11px; padding-left:11px;
  color:var(--navy);
  background:#fff;
  font:14px Manrope, sans-serif;
  letter-spacing:.02em;
}
.secret-field input:focus{ outline:2px solid #cfe8fa; border-color:#0a6aa8 }
.secret-toggle{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  border:1px solid #cbd9e3; border-radius:6px; background:#f4f9fc;
  color:#1d4a68; font-size:11px; font-weight:800; letter-spacing:.04em;
  padding:6px 10px;
}
.secret-toggle:hover{ background:#e7f3fa; border-color:#9cd6fa }

.field-hint{
  display:block; margin-top:7px;
  font-size:11.5px; line-height:1.5; font-weight:600;
  color:#41607a;                       /* readable on the white form, not pale grey */
}
.field-hint.weak{ color:#9a5b12 }
.field-hint.strong{ color:#0d6b53 }

.account-actions{
  margin-top:18px; padding-top:16px;
  border-top:1px solid #dbe7ef;
}
.account-actions .eyebrow{ margin-bottom:10px }
.account-actions .status-actions{ flex-wrap:wrap; gap:10px }

/* Destructive action reads as destructive without shouting. */
/* An armed "Sure?" button. Deliberately a different colour from the button that armed
   it: the press that acts must not look like the press that only asked. */
.primary.danger{ background:#a3312b; border-color:#a3312b; color:#fff }
.primary.danger:hover{ background:#8c2924; border-color:#8c2924 }

.back.danger{ color:#a3312b }
.back.danger:hover{ color:#7d211c }

@media(max-width:520px){
  .account-actions .status-actions{ flex-direction:column; align-items:stretch }
  .account-actions .status-actions button{ width:100% }
  .secret-field input{ font-size:16px }   /* stop iOS zooming on focus */
}


/* ============================================================================
   Document centre
   ============================================================================ */

/* Row actions sit inside a clickable row, so they stop propagation in the markup and
   read as controls rather than text. */
.row-actions{ white-space:nowrap; text-align:right }
.row-actions button{
  border:1px solid #cbd9e3; border-radius:6px; background:#fff;
  color:#1d4a68; font-size:11px; font-weight:800;
  padding:6px 10px; margin-left:6px;
}
.row-actions button:hover{ background:#f2f9fd; border-color:#9cd6fa }
.row-actions button.danger{ color:#a3312b; border-color:#e8c9c6 }
.row-actions button.danger:hover{ background:#fff5f4; border-color:#d99f9a }
.row-actions button[disabled]{ opacity:.55; cursor:progress }

/* Upload failures must not read like the neutral informational note. */
.note.upload-error{
  background:#fff1f1;
  border-color:#f0c2c2;
  border-left:3px solid #c0392b;
  color:#8c2f2f;
  font-weight:600;
}

/* File input styled to match the other form controls. */
.status-field input[type="file"]{
  border:1px dashed #b9c9d6; border-radius:8px; padding:10px;
  background:#fbfdfe; color:#31485c; font-size:12.5px;
}
.status-field input[type="file"]:hover{ border-color:#9cd6fa; background:#f6fbfe }

@media(max-width:900px){
  .row-actions{ text-align:left }
  .row-actions button{ margin:4px 6px 0 0 }
}


/* Document preview panel. The frame is sandboxed in markup; this is only layout. */
.preview-panel{ margin-top:16px }
.preview-frame{
  width:100%; height:min(70vh,620px);
  border:1px solid #dbe7ef; border-radius:10px; background:#f7fafc;
}
.preview-image{
  display:block; max-width:100%; max-height:min(70vh,620px);
  margin:0 auto; border:1px solid #dbe7ef; border-radius:10px; background:#f7fafc;
}
@media(max-width:900px){ .preview-frame{ height:56vh } }


/* Customer edit form: contact blocks need visual separation from company fields. */
.contact-row{
  border:1px solid #e2ebf0; border-left:3px solid #9cd6fa;
  border-radius:0 8px 8px 0; padding:12px 14px; margin:10px 0; background:#fbfdfe;
}
.contact-row .status-row{ margin:0 0 8px }
.contact-row .field-hint{ margin-top:4px }
@media(max-width:520px){ .contact-row{ padding:10px } }


/* ============================================================================
   Internal page vertical alignment
   ============================================================================
   Every internal screen was vertically centred on short pages, leaving a large
   empty band above the title. Cause: .content carries margin:auto inside
   .shell{display:grid}, and an auto margin on a grid item absorbs free space on
   ALL FOUR sides — not just left and right. On a page shorter than the viewport
   the leftover height was split above and below the content.

   Fixed by pinning the item to the start of its grid row and restricting the auto
   margin to the horizontal axis, which is all it was ever meant to do (centre the
   1600px column on a wide monitor).

   The public homepage is untouched: it does not use .shell or .content.
   ============================================================================ */

.shell{ align-items:start }
.content{
  margin:0 auto;          /* horizontal centring only */
  align-self:start;       /* sit at the top of the grid row */
  padding-top:30px;       /* the 24-40px gap below the header */
}
/* The customer portal has the same shape and the same problem. */
.portal{ align-items:start }
.portal-main{ margin:0 auto; align-self:start }

/* The Back button strip is the first thing in the column; it should not add a
   second gap on top of the padding above. */
.page-top{ margin-top:0; margin-bottom:14px }

@media(max-width:900px){
  /* Sidebar is hidden on mobile, so content sits directly under the top of the
     viewport — keep the same visual gap, slightly tighter. */
  .content{ padding-top:24px }
  .portal-main{ padding-top:24px }
}


/* ============================================================================
   Prefill from last entry
   ============================================================================
   Informational, not a success or a warning: the operator is being told where the
   values came from and offered a way to drop them. Blue, like the other notes.
   ============================================================================ */
.prefill-note{
  background:#f2f9fd; border:1px solid #cfe4f2; border-left:3px solid #087fc4;
  border-radius:0 8px 8px 0; padding:10px 13px; margin:0 0 14px;
  color:#2c4a5e; font-size:12.5px; font-weight:600; line-height:1.5;
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
}
.prefill-clear{
  border:1px solid #9cd6fa; border-radius:6px; background:#fff;
  color:#0a5f96; font-size:11.5px; font-weight:800; padding:6px 11px;
}
.prefill-clear:hover{ background:#e7f5ff }

/* The field a validation message is talking about. */
.field-invalid{
  border-color:#c0392b !important;
  outline:3px solid #f8d7d3;
  outline-offset:0;
}

@media(max-width:520px){
  .prefill-note{ flex-direction:column; align-items:stretch }
  .prefill-clear{ width:100% }
}

/* --------------------------------------------------- terminals & locations
   The near-match hint under a place field, and the deactivated switch on the
   Terminals screen. Colours come from the internal text scale, so they clear AA
   on every internal surface exactly as --ops-ink-3 does. */
.location-hint{ color:var(--ops-ink-3) }
.location-hint b{ color:var(--ops-ink); font-weight:800 }
.location-hint .prefill-clear{ margin-left:5px }
.filter-toggle{
  display:flex; align-items:center; gap:7px;
  font:11px 'DM Mono'; letter-spacing:.04em; color:var(--ops-ink-2);
  padding:8px 10px; border:1px solid #dce6ed; border-radius:20px; background:white;
}
.filter-toggle input{ accent-color:#087fc4; width:14px; height:14px }

/* The references the email parser would not place. One row per unsettled value: the
   value itself, why it could not be settled, and the fields it could belong to. */
.booking-confirm .confirm-row{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:10px; padding-top:10px; border-top:1px solid #f0d8cf;
}
.booking-confirm code{
  font:12px 'DM Mono'; letter-spacing:.04em; color:var(--ops-ink);
  background:white; border:1px solid #e6cabf; border-radius:6px; padding:6px 9px;
}
.booking-confirm .confirm-row span{ font-size:11.5px; line-height:1.5; color:var(--ops-ink-2) }
.booking-confirm .confirm-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-left:auto }
.booking-confirm .confirm-actions button{
  border:1px solid #cbd9e3; border-radius:7px; background:white;
  color:#1d4a68; font-size:11px; font-weight:800; letter-spacing:.03em; padding:7px 10px;
}
.booking-confirm .confirm-actions button:hover{ background:#e7f3fa; border-color:#9cd6fa }

/* ============================================================================
   Final internal text contrast guard
   ============================================================================
   Keep all operational screens comfortably readable on their light backgrounds.
   This intentionally targets only the internal shell and client portal; the public
   dark website keeps its light-on-navy text treatment.
   ============================================================================ */
.shell,
.portal{ color:var(--ops-ink) }

.shell p,
.portal p,
.shell small,
.portal small,
.shell .muted-cell,
.portal .muted-cell,
.shell .hint,
.portal .hint,
.shell .data-table th,
.portal .data-table th,
.shell .field,
.portal .field,
.shell label,
.portal label{ color:var(--ops-ink-2) }

.shell input,
.shell select,
.shell textarea,
.portal input,
.portal select,
.portal textarea{ color:var(--ops-ink) !important }

.shell input::placeholder,
.shell textarea::placeholder,
.portal input::placeholder,
.portal textarea::placeholder{ color:var(--ops-hint) !important; opacity:1 }


/* =============================================================================
   GLOBAL TEXT VISIBILITY  —  every light surface, desktop and mobile
   -----------------------------------------------------------------------------
   One place, driven by variables, so the contrast cannot drift apart again.

   The rule this block follows: on a LIGHT background nothing may be faint. The
   pale text on the navy sidebar, the dark mobile header and tabs, the dark
   tracking panel and the marketing hero is CORRECT and is deliberately left
   alone — inverting those would make them unreadable instead. Every selector
   below was checked to sit on white, #f4f7fa, #eaf4fb or #deedf8.

   Worst-case ratios across all four light surfaces:
     --ops-ink          12.3:1   headings, table values, typed input text
     --ops-ink-2         7.2:1   body and secondary text
     --ops-ink-3         5.1:1   muted labels, captions, table headers
     --ops-hint          4.7:1   placeholders only
     --ops-link          5.2:1   links and secondary actions
     --ops-link-strong   7.7:1   hover, and text on secondary buttons
     --ops-good          5.0:1   positive status
     --ops-warn          5.2:1   attention status
   ============================================================================= */

:root{
  --ops-link:#0a6699;
  --ops-link-strong:#0c4a7c;
  --ops-good:#26705a;
  --ops-warn:#8a550d;
  --ops-line:#b9cddd;
}

/* ---- muted labels, captions and table headers ---------------------------- */
.card .label,
.card .basis,
.status-field,
.data-table th,
.info-list span,
.section h2 small,
.charge-note,
.charge-note.mono,
.field-hint,
.muted-cell,
.empty-cell,
.activity-time,
.activity-text span,
.milestone p,
.billing-snapshot span,
.billing-snapshot small,
.prototype-note,
.range-note,
.col-label,
.bar-label small,
.chart-empty,
.msg-role,
.msg-time,
.notif-kind,
.notif-body span,
.contact span,
.doc small,
.pod-ref,
.ef-more summary,
.intake-divider,
.booking-file-summary.empty,
.set-hint,
.drop-zone em,
.wiz-fine,
.qf-fine,
.preview-caption,
.preview-list span,
.preview-stats span,
.conn-verify,
.dim-x,
.stage-bar .stage,
.location-hint,
.inv-fine,
.inv-contact,
.inv-table th,
.inv-table td span,
.inv-foot p,
.m-tile small,
.m-empty,
.m-note,
.m-h2 small,
.m-doc span,
.m-event span,
.m-form label,
.m-ship-foot,
.m-sheet-fine,
.m-track-route span,
.m-track-grid span,
.track-grid span,
.ai-sections h4 small,
.ai-provenance,
.ai-signals span,
.ask-chip small{ color:var(--ops-ink-3) }

/* ---- body and secondary prose -------------------------------------------- */
.topbar .date,
.welcome p,
.shipment-card p,
.issue p,
.compliance p,
.note,
.login-card p{ color:var(--ops-ink-2) }

/* ---- labels and values carry a little more weight ------------------------ */
.data-table th{ font-weight:700 }
.data-table td{ color:var(--ops-ink) }
.card .label,
.status-field,
.m-form label{ font-weight:700 }
.info-list b,
.data-table td b{ color:var(--ops-ink) }

/* ---- links and secondary actions ----------------------------------------- */
.back,
.link-id,
.msg-link,
.coming-soon-link,
.unread-dot,
.prefill-clear,
.link-cta,
.m-more,
.m-back,
.m-sheet-mark,
.m-actions button span,
.m-task-actions button,
.ask-chip span,
.portal-secondary button{ color:var(--ops-link) }
.back:hover,
.link-id:hover,
.msg-link:hover,
.prefill-clear:hover,
.link-cta:hover{ color:var(--ops-link-strong) }
/* The one control that sits on the DARK tracking panel keeps its pale treatment;
   its own rule is more specific than this block, so it is untouched. */

/* ---- status colour ------------------------------------------------------- */
.delta{ color:var(--ops-good) }
.delta.orange{ color:var(--ops-warn) }
.stage-bar .stage.done{ color:var(--ops-good) }
.doc:before{ color:var(--ops-good) }
.doc.doc-open:before{ color:var(--ops-warn) }
.readiness-list li:before{ color:var(--ops-link) }

/* ---- inputs: typed text, placeholder, border, focus ---------------------- */
.status-field input,
.status-field select,
.status-field textarea,
.search,
.ctl,
input.search,
select.search{ color:var(--ops-ink); border-color:var(--ops-line) }
.status-field input:focus,
.status-field select:focus,
.status-field textarea:focus,
.search:focus,
.ctl:focus{ outline:2px solid #0a6699; outline-offset:1px; border-color:#0a6699 }
input::placeholder,
textarea::placeholder,
.ctl::placeholder,
.search::placeholder{ color:var(--ops-hint); opacity:1 }
/* A select shows its value, not a placeholder — it must read as strongly as an input. */
select option{ color:var(--ops-ink) }

/* ---- secondary buttons on light surfaces: readable, and clearly active ---
   .ghost is styled for the navy public header (pale text, dark border). On the
   white workspace that rendered as near-invisible grey — this is the Edit and
   Merge problem on Terminals & Locations. */
.content .ghost,
.portal .ghost,
.data-table .ghost,
.filters .ghost,
.detail-actions .ghost{
  color:var(--ops-link-strong);
  border:1px solid #8fb8d6;
  background:#fff;
  font-weight:800;
  padding:7px 12px;
  border-radius:7px;
  font-size:11.5px;
}
.content .ghost:hover,
.portal .ghost:hover,
.data-table .ghost:hover,
.filters .ghost:hover,
.detail-actions .ghost:hover{
  color:var(--ops-link-strong);
  background:#eaf4fb;
  border-color:#0a6699;
}
.content .ghost:focus-visible,
.data-table .ghost:focus-visible{ outline:2px solid #0a6699; outline-offset:2px }

/* Filter chips and the Clear control read as controls, not as hints. */
.filters button{ color:var(--ops-link-strong); border-color:var(--ops-line); font-weight:700 }
.filters button.active{ background:#e7f5ff; border-color:#0a6699; color:var(--ops-link-strong) }
.filter-toggle{ color:var(--ops-ink-2) }

/* A genuinely disabled control stays visibly disabled — and still legible. */
.content button[disabled],
.content .primary[disabled],
.content .ghost[disabled],
.status-actions .primary[disabled]{
  color:var(--ops-ink-3);
  border-color:var(--ops-line);
  background:#f1f5f9;
  opacity:1;
  cursor:not-allowed;
}

/* ---- page eyebrow and status pills ---------------------------------------
   .eyebrow is --blue, which is right on the navy hero and wrong on the white
   workspace (2.1:1). Scoped so the dark surfaces keep the light version.
   The pill text colours all sat between 4.0 and 4.5 against their own tint. */
.content .eyebrow,
.portal .eyebrow,
.status-form .eyebrow,
.section .eyebrow{ color:var(--ops-link) }

.tag.transit,.tag.inv-sent,.tag.qte-new,.tag.acct-prospect,.tag.svc-ocean,
.tag.role-operations,.tag.aud-shipment{ color:#04628f }
.tag.customs,.tag.inv-partial,.tag.qte-preparing,.tag.doc-pending,.tag.hlth-watch,
.tag.svc-trucking,.tag.ven-under-review,.tag.role-sales,.tag.aud-document,
.tag.risk-medium,.tag.sev-medium{ color:#7d4a06 }
.tag.delivered,.tag.acct-inactive,.tag.ven-inactive,.tag.role-customer,
.tag.sev-low{ color:#4a5f6d }
.tag.role-admin,.tag.aud-authentication{ color:#6b23d6 }
.tag.aud-message{ color:#0b606c }

/*
 * Invoice status, read at a glance.
 *
 * The pills were all pale tints of the same weight, so PAID and SENT looked alike from
 * a metre away and the one fact this screen exists to show -- has the money arrived --
 * did not stand out. Paid is now solid green, overdue solid red: the two states an
 * operator scans for. The rest keep their quiet tint, which is what makes the loud two
 * carry meaning.
 */
.tag.inv-paid{ color:#fff; background:#0f7a55; border-color:#0f7a55; font-weight:700 }
.tag.inv-overdue{ color:#fff; background:#b03636; border-color:#b03636; font-weight:700 }
.tag.inv-sent{ color:#04628f; background:#dff1fb; border-color:#a9d7ec; font-weight:600 }
.tag.inv-partial{ color:#7d4a06; background:#fdeed3; border-color:#eccb92; font-weight:600 }

/* .track-msg belongs to the DARK public tracking panel, where pale text is correct.
   Settings reuses it for the carrier-status line on a white card, where it was
   1.7:1. Scoped, so the public panel keeps its own treatment. */
.content .track-msg,
.content .track-status-note,
.content .track-likely,
.content .carrier-note{ color:var(--ops-ink-2) }

/* ---- customer invoice sending list -------------------------------------- */
.send-pick{ display:flex; align-items:center; gap:8px; font:inherit; color:inherit; cursor:pointer }
.send-pick input{ width:15px; height:15px; accent-color:#0a6699 }
.send-bar{
  display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap;
  margin-top:12px; padding:12px; border:1px solid #cfe4f2; border-radius:9px; background:#f8fcfe;
}
.send-total{ display:grid; gap:4px }
.send-total span{ font:10px 'DM Mono'; letter-spacing:.08em; color:var(--ops-ink-3) }
.send-total b{ font-size:13px; color:var(--ops-ink) }
.send-to{ min-width:280px; flex:1 1 280px }
.send-to select{ margin-bottom:6px }
.send-actions{ display:flex; gap:10px; align-items:center; margin-left:auto; flex-wrap:wrap }
.send-history-toggle{ margin-top:10px }
@media(max-width:900px){ .send-bar{ flex-direction:column; align-items:stretch } .send-actions{ margin-left:0 } }

/* =============================================================================
   DOCUMENTS AND PODS ON A PHONE
   Cards instead of a table, from 320px up. Sizes are deliberately larger than the
   desktop equivalents: this is read at arm's length in a yard, often in sunlight.
   ============================================================================= */
.m-doc-filters{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 10px; -webkit-overflow-scrolling:touch }
.m-doc-filters button{
  flex:0 0 auto; border:1px solid var(--ops-line); background:white; color:var(--ops-link-strong);
  font-size:13px; font-weight:800; padding:9px 14px; border-radius:20px; min-height:40px;
}
.m-doc-filters button.active{ background:#0a6699; border-color:#0a6699; color:white }
.m-doc-count{ margin:0 0 10px; font:11px 'DM Mono'; letter-spacing:.06em; color:var(--ops-ink-3) }
.m-search{ display:block; margin-bottom:12px }
.m-search input{
  width:100%; box-sizing:border-box; padding:13px 14px; font-size:16px;
  border:1px solid var(--ops-line); border-radius:10px; color:var(--ops-ink); background:white;
}
.m-search input:focus{ outline:2px solid #0a6699; outline-offset:1px; border-color:#0a6699 }
.m-doc-list{ display:grid; gap:12px }
.m-doc-card{
  display:block; width:100%; box-sizing:border-box; text-align:left;
  background:white; border:1px solid #dce6ed; border-left:3px solid #0a6699; border-radius:12px;
  padding:14px; box-shadow:0 2px 8px #15354c0d; color:var(--ops-ink);
}
.m-doc-card.static{ border-left-color:#9dc0dd }
.m-doc-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px }
.m-doc-top b{ font-size:15px; color:var(--ops-ink) }
.m-doc-cust{ font-size:13.5px; font-weight:700; color:var(--ops-ink-2); margin-bottom:10px }
.m-doc-facts{ display:grid; grid-template-columns:1fr 1fr; gap:9px 12px; margin:0 }
.m-doc-facts.wide{ grid-template-columns:1fr }
.m-doc-facts > div{ min-width:0 }
.m-doc-facts dt{ font:9.5px 'DM Mono'; letter-spacing:.07em; color:var(--ops-ink-3); margin-bottom:2px }
.m-doc-facts dd{ margin:0; font-size:13.5px; font-weight:700; color:var(--ops-ink); overflow-wrap:anywhere }
.m-doc-exception{
  margin:10px 0 0; padding:9px 11px; border-radius:8px;
  background:#fff4ef; color:#8a2f1c; font-size:12.5px; font-weight:700;
}
.m-doc-go{ display:block; margin-top:11px; font-size:12.5px; font-weight:800; color:var(--ops-link) }
.m-doc-upload{ display:flex; gap:10px; margin-bottom:8px; flex-wrap:wrap }
.m-upload-btn{
  flex:1 1 140px; text-align:center; border:1px dashed #8fb8d6; border-radius:10px;
  padding:13px 10px; font-size:13px; font-weight:800; color:var(--ops-link-strong);
  background:#f8fcfe; min-height:46px;
}
.m-upload-btn input{ display:none }
.m-upload-warn{ color:#8a2f1c }
.m-pod-head{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px }
.m-pod-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px }
.m-pod-actions button{ min-height:48px; font-size:14px; font-weight:800; border-radius:10px; padding:12px 10px }
.m-pod-actions .ghost{ border:1px solid #8fb8d6; background:white; color:var(--ops-link-strong) }
.m-pod-block{ background:white; border:1px solid #dce6ed; border-radius:12px; padding:14px; margin-bottom:12px }
.m-pod-block h2{ margin:0 0 10px; font-size:13px; letter-spacing:.04em; color:var(--ops-ink) }
.m-check{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ops-ink-2) }
.m-check input{ width:18px; height:18px; accent-color:#0a6699 }
.m-form-actions{ display:flex; gap:10px; margin-top:12px }
.m-form-actions button{ flex:1; min-height:46px; font-weight:800; border-radius:10px }
/* 320px: two-up fact grids and side-by-side actions stop fitting. */
@media(max-width:359px){
  .m-doc-facts{ grid-template-columns:1fr }
  .m-pod-actions{ grid-template-columns:1fr }
  .m-doc-upload{ flex-direction:column }
}

/* ---- mailbox integrations and booking email intake ----------------------- */
.mbx-cards{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0 14px }
.mbx-card{ border:1px solid #dce6ed; border-radius:11px; padding:14px; background:white }
.mbx-card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px }
.mbx-card-head b{ font-size:14px; color:var(--ops-ink) }
.mbx-account{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid #edf2f5; font-size:12.5px }
.mbx-account span{ color:var(--ops-ink-3) }
.mbx-account b{ color:var(--ops-ink) }
.mbx-actions{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap }
.mbx-schedule{ max-width:340px }
.mbx-strip{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:14px; padding:12px 14px; border-radius:10px; border:1px solid #cfe4f2; background:#f8fcfe;
}
.mbx-strip.off{ border-color:#e6cabf; background:#fff8f4 }
.mbx-strip.mock{ border-color:#d8c9a8; background:#fffdf3 }
.mbx-strip span{ font:10px 'DM Mono'; letter-spacing:.08em; color:var(--ops-ink-3) }
.mbx-strip b{ font-size:13px; color:var(--ops-ink) }
.mbx-strip em{ font-style:normal; font-size:11.5px; color:var(--ops-ink-2) }
.mbx-strip button{ margin-left:auto }
.mail-list{ display:grid; gap:12px }
.mail-item{ border:1px solid #dce6ed; border-left:3px solid #0a6699; border-radius:11px; padding:14px; background:white }
.mail-item.onfile{ border-left-color:#bd7a19 }
.mail-head{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:8px }
.mail-head b{ font-size:14px; color:var(--ops-ink) }
.mail-facts{ margin:6px 0 }
.mail-preview{
  margin:8px 0; padding:10px 12px; border-radius:8px; background:#f6fafd;
  font-size:12.5px; line-height:1.6; color:var(--ops-ink-2);
}
@media(max-width:900px){ .mbx-cards{ grid-template-columns:1fr } .mbx-strip button{ margin-left:0; width:100% } }

/* The reason a wizard step did not advance, shown beside the Next button. The
   per-field messages are above the fold when the visitor is at the button. */
.wiz-summary{
  flex:1 1 100%; margin:8px 0 0; padding:10px 12px; border-radius:8px;
  background:#fff4ef; border:1px solid #e6cabf; color:#7a2b18;
  font-size:12.5px; line-height:1.55;
}
.wiz-summary.info{ background:#f2f9fd; border-color:#cfe4f2; color:var(--ops-ink-2) }
.wiz-summary b{ color:inherit }

/* Booking mailbox: the automatic-check switch and the section header actions. */
.mbx-head-actions{ display:flex; gap:12px; align-items:center }
.mbx-toggle{ display:flex; gap:11px; align-items:flex-start; margin:4px 0 12px; cursor:pointer }
.mbx-toggle input{ width:18px; height:18px; margin-top:2px; accent-color:#0a6699 }
.mbx-toggle span{ display:grid; gap:3px }
.mbx-toggle b{ font-size:13px; color:var(--ops-ink) }
.mbx-toggle em{ font-style:normal; font-size:12px; color:var(--ops-ink-3) }
.mbx-toggle.idle{ cursor:not-allowed }
.mbx-toggle.idle b{ color:var(--ops-ink-2) }

/* =============================================================================
   SIDEBAR: TEXT ONLY
   No icons, no bullet dots, no glyphs. The active page is carried by a blue
   background, a left border and heavier text rather than by a marker.
   ============================================================================= */
.nav .dot{ display:none }
.nav button{
  gap:0;
  padding:11px 12px 11px 14px;
  border-left:3px solid transparent;
  border-radius:0 7px 7px 0;
}
.nav button.active{
  background:#123753;
  border-left-color:#4db5ff;
  color:#fff;
  font-weight:800;
}
.nav button:hover:not(.active){ background:#0f2f47; color:#fff }
/* The mobile tab bar loses its icons too, so the label carries the whole control. */
.m-tabs button{ font-size:11.5px; font-weight:700; padding:14px 4px; gap:0 }
.m-tabs button.active{ font-weight:800 }


/* ------------------------------------------------------- tracking connections
   One card per event source in Settings. Four states, each visually distinct:
   an operator must be able to tell 'Error' (half-configured, wastes hours) from
   'Not connected' (nothing done yet) without reading the text. */
.conn-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:12px; margin:10px 0 14px }
.conn-card{ border:1px solid #d3e2ee; border-left:4px solid #b9cddd; border-radius:10px; padding:13px 15px; background:#fff }
.conn-card.conn-on{ border-left-color:#1a8a55 }
.conn-card.conn-off{ border-left-color:#c07d33 }
.conn-card.conn-err{ border-left-color:#c0392b }
.conn-card.conn-test{ border-left-color:#6b4fc4 }
.conn-card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px }
.conn-card-head b{ display:block; font-size:15.5px; color:#0d2233; font-weight:800 }
.conn-kind{ display:block; font-size:12.5px; color:#4a6377; margin-top:2px }
.conn-detail{ margin:9px 0 0; font-size:13.5px; line-height:1.5; color:#26445c }
.conn-map-note{ margin:8px 0 0; font-size:12.5px; line-height:1.45; color:#6b4a12; background:#fdf6ec; border:1px solid #f0dcbe; border-radius:7px; padding:7px 9px }
.conn-meta{ display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:8px; margin-top:11px; padding-top:10px; border-top:1px solid #e6eef5 }
.conn-meta span{ display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#5a7286; font-weight:700 }
.conn-meta b{ font-size:13px; color:#12314a; font-weight:700 }
.conn-tag.err{ background:#fdecea; border:1px solid #f2c2bc; color:#8e2a1c }
.conn-tag.test{ background:#f1ecfd; border:1px solid #d3c6f4; color:#4a2f9e }
.conn-headline{ margin:4px 0 2px; font-size:14px; font-weight:700; color:#173754 }
.conn-test-strip{ background:#f1ecfd; border:1px solid #d3c6f4; color:#3c2585; border-radius:8px; padding:10px 12px; font-size:13px; line-height:1.5; margin-bottom:10px }
.cn-terminal-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px }
.cn-terminal-links .ghost{ text-decoration:none }

/* The public 'not connected' notice. Deliberately calm rather than alarming: this is
   a normal state for NTXV, not a failure the visitor caused. */
.track-connection-notice{ border:1px solid #cfe0ee; background:#f2f8fd; border-radius:10px; padding:13px 15px; margin:12px 0 }
.track-connection-notice.is-test{ border-color:#d3c6f4; background:#f6f2fe }
.tc-headline{ margin:0 0 8px; font-size:14.5px; font-weight:800; color:#123753 }
.tc-likely, .tc-ref{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px solid #e2edf6; font-size:13.5px }
.tc-likely span, .tc-ref span{ color:#4a6377; font-weight:700 }
.tc-likely b, .tc-ref b{ color:#0d2233; font-weight:800; font-family:ui-monospace,Menlo,Consolas,monospace }
.tc-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:11px }
.tc-actions .ghost{ text-decoration:none }
.tc-note{ margin:10px 0 0; font-size:12.5px; line-height:1.5; color:#42607a }

/* Source labels on the internal timeline. */
.src-line{ display:block; margin-top:3px }
.src-tag{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.04em; padding:1px 7px; border-radius:20px; margin-right:2px }
.src-ntxv{ background:#e8f1f9; border:1px solid #c3d9ec; color:#12456b }
.src-carrier{ background:#eefaf3; border:1px solid #bce6d0; color:#0f5233 }
.src-rail{ background:#fdf3e8; border:1px solid #f0d5b2; color:#7a4510 }


/* --------------------------------------------------- CN rail sync + leg tags */
.conn-restricted{ margin:6px 0 0; font-size:13px; color:#5a7286; font-style:italic }
.conn-sync{ border-top:1px solid #e6eef5; margin-top:14px; padding-top:4px }
.sync-banner{ border-radius:8px; padding:10px 12px; font-size:13.5px; line-height:1.5; margin:8px 0 }
.sync-banner.is-mock{ background:#f1ecfd; border:1px solid #c9b8f0; color:#3c2585 }
.sync-banner.is-live{ background:#eefaf3; border:1px solid #bce6d0; color:#0f5233 }
.sync-conf{ margin:6px 0 10px; font-size:13px; font-weight:600 }
.sync-conf.ok{ color:#0f5233 }
.sync-conf.warn{ color:#8a4b12 }
.src-test{ background:#f1ecfd; border:1px solid #d3c6f4; color:#4a2f9e }
.leg-tag{ display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; padding:1px 7px; border-radius:20px; margin:0 4px 0 2px }
.leg-ocean{ background:#e8f1f9; border:1px solid #bcd6ec; color:#12456b }
.leg-rail{ background:#fdf3e8; border:1px solid #f0d5b2; color:#7a4510 }

/* A field the POD save gate is waiting on. Border only: the alert already names
   every gap, so this is the pointer back to them, not a second message. */
.status-field input.is-missing,
.status-field select.is-missing{
  border-color:#b4433f; border-width:2px; background:#ffe3e0; color:#7d2a27
}
.status-field input.is-missing::placeholder{ color:#a85b57 }
.status-field input.is-missing:focus{ outline-color:#b4433f }

/* The Refresh stamp: quiet, but proof the check ran. */
.conn-checked{ margin-top:10px; font-style:normal; opacity:.85 }


/* ---------------------------------------------------- the suggestion dropdown
   Replaces the native datalist, which always filtered its options down to whatever
   was already typed. The arrow here shows every option. */
[data-suggest] {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}
.suggest-panel {
  position: absolute;
  z-index: 4000;
  max-height: 264px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--line, #d5d8dd);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.16);
}
.suggest-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--line, #eceef1);
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.suggest-option:last-child { border-bottom: 0; }
.suggest-option:hover,
.suggest-option.is-active { background: var(--wash, #eef2f7); }
.suggest-option b { display: block; font-weight: 600; }
.suggest-option span { display: block; font-size: 12px; color: var(--muted, #6b7280); margin-top: 2px; }

/* A disabled action must LOOK disabled. Create invoice sits beside Mark completed
   on an unsigned POD so the operator can see it is coming; without this it looked
   identical to a live button and reads as broken rather than as a next step. */
.detail-actions button[disabled]{opacity:.45;cursor:not-allowed}
.detail-actions button[disabled]:hover{background:inherit;border-color:inherit}

/* ---- denser detail views ------------------------------------------------
   An invoice or POD is a reference sheet an operator scans, not a landing page.
   Row padding of 15-17px plus 20px section padding meant a nine-line invoice
   filled a screen and a half, so the charges and the totals could not be read
   together without scrolling -- which is the one comparison that page exists for.
   Type sizes and colours are untouched; only the empty space between rows.

   Halved a second time on 2026-08-29: the first pass was still leaving an invoice
   spread over more than one screen, and the charges have to be readable against the
   totals without scrolling. */
.section{padding:9px 11px}
.section-head{margin-bottom:4px}
.info-list div{padding:3px 0}
.data-table td{padding:5px 10px}
.data-table th{padding:5px 10px}
.line-items tfoot td{padding:4px 10px}
.detail{gap:8px}
.cards{gap:8px}

/* ==========================================================================
   The phone.

   NTXV is used at a terminal gate as much as at a desk, and the operations
   screens -- not just the purpose-built mobile ones -- get opened there. What
   follows fixes the things that made that painful, each of which was a real
   fault rather than a matter of taste:

   1. The list search boxes were switched off below 900px. `.search` is the
      class on every "Search reference, customer, container..." field, so a
      phone lost the ability to search PODs, bookings, invoices and customers
      entirely -- on the one device where scrolling a long list is worst.
   2. A screen heading and its buttons sat on one row with no wrap, so the
      title was crushed to a couple of characters.
   3. Text-only actions (Edit, Print, Delete) were 12px words with no padding:
      accurate to a mouse, a coin-toss to a thumb. They are given a real
      target here, without changing how they look on a desktop.
   4. Inputs at 14px make iOS zoom the page on focus and leave it zoomed, so
      every form filled in the field ended with a pinch to get back. 16px is
      the threshold that prevents it.
   5. The fixed bottom tab bar covered the last rows of every list.

   Wide tables are NOT reflowed into cards. A POD register is a table, it
   scrolls sideways inside its own frame, and that is legible; turning ten
   columns into stacked cards would lose the comparison the table exists for.
   ========================================================================== */
@media(max-width:760px){
  /* 1. Search comes back. */
  .filters .search{ display:block; width:100%; min-width:0; flex:1 1 100% }

  /* 2. Heading above its actions, both full width. */
  .view-head{ flex-direction:column; align-items:stretch; gap:12px }
  .view-head h1{ font-size:21px }
  .detail-actions{ justify-content:flex-start }

  /* 3. Thumb-sized actions. */
  .detail-actions .back,
  .detail-actions button.back{
    padding:9px 12px; border:1px solid #d7e3ec; border-radius:8px; background:#fff;
    min-height:38px; display:inline-flex; align-items:center
  }
  .detail-actions .primary,
  .detail-actions .back{ flex:0 1 auto }
  .status-actions{ flex-wrap:wrap }
  .status-actions .primary,
  .status-actions .back{ min-height:42px }

  /* 4. No zoom-on-focus. */
  .status-field input,
  .status-field select,
  .status-field textarea,
  .search, .ctl{ font-size:16px }

  /* 5. The tab bar stops covering the last row. */
  .content{ padding:16px 14px 96px }

  /* Long values wrap instead of pushing the label off the screen. */
  .info-list div{ gap:14px; align-items:flex-start }
  .info-list div b{ text-align:right; word-break:break-word; min-width:0 }

  /* One column for the things that were two. */
  .send-bar{ flex-direction:column; align-items:stretch }
  .send-bar .send-actions{ flex-wrap:wrap }
  .send-bar .send-actions button{ flex:1 1 auto; min-height:42px }
  .send-to{ width:100% }

  /* Tables keep their shape and scroll inside their own frame. */
  .table-wrap{ -webkit-overflow-scrolling:touch }

  /* The POD form is already one column here; keep its controls tappable. */
  .pod-form .status-field input,
  .pod-form .status-field select{ padding:11px; font-size:16px }
}