/* BUYCONTAINERS.NOW — corporate maritime system.
   Ink #1D2833 · Sea #3D5A6C · Mist #F5F5F3 · Slate #5F6E79 · Sand #B9A488 */

:root{
  --navy:#152B3D;
  --navy-2:#1D3A52;
  --navy-3:#264A66;
  --blue:#20618F;
  --blue-d:#1A5079;
  --cyan:#6E9BB8;
  --ink:#1B2B38;
  --slate:#5C6B76;
  --mist:#F4F2ED;
  --white:#FFFFFF;
  --line:#E4E1DA;
  --line-d:#2C4759;
  --ok:#33704F;
  --rust:#A8562F;
  --sand:#C29A5B;
  --maxw:1160px;
  --r:12px;
  --shadow:0 1px 2px rgba(25,35,45,.04),0 8px 24px rgba(25,35,45,.05);
  --shadow-lg:0 1px 3px rgba(25,35,45,.05),0 16px 40px rgba(25,35,45,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:light only;background:#FFFFFF}
body{overflow-x:hidden}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Inter",sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace}

h1,h2,h3,h4{font-weight:700;letter-spacing:-.022em;line-height:1.14;color:var(--navy)}
h1{font-size:clamp(2.2rem,4.8vw,3.55rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
h3{font-size:1.14rem;letter-spacing:-.01em}
.eyebrow{
  display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rust);margin-bottom:16px;
}
.sub{color:var(--slate);max-width:58ch;font-size:1.05rem}
.center{text-align:center}
.center .sub{margin-left:auto;margin-right:auto}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--blue);color:#fff;text-decoration:none;
  font-weight:600;font-size:.95rem;padding:13px 26px;border:none;border-radius:980px;
  cursor:pointer;white-space:nowrap;letter-spacing:-.01em;
  transition:opacity .15s ease;
}
.btn:hover{opacity:.9;background:var(--blue-d)}
.btn.lg{padding:16px 32px;font-size:1rem}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid #AEB2AD;font-weight:600}
.btn.ghost:hover{border-color:var(--ink);background:transparent;opacity:1}
.btn.onDark.ghost{border-color:rgba(255,255,255,.32);color:#fff}
.btn.onDark.ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}

/* header */
.utility{
  background:var(--navy);color:#B9C7D2;font-size:.74rem;letter-spacing:.02em;
  text-align:center;padding:7px 14px;
}
.utility strong{color:#fff;font-weight:600}
.utility a{color:#fff;text-decoration:none;font-weight:600}
.utility a:hover{text-decoration:underline}
header.site{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.navbar{display:flex;align-items:center;gap:26px;height:58px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand .mark{width:30px;height:30px;flex:none;display:block}
.brand .word{font-weight:700;letter-spacing:-.02em;font-size:1.05rem;color:var(--ink)}
.brand .word em{font-style:normal;color:var(--slate)}
nav.main{display:flex;gap:28px;margin-left:auto;align-items:center}
nav.main a{color:#41505B;text-decoration:none;font-size:.88rem;font-weight:500;transition:color .12s}
nav.main a:hover{color:var(--navy)}
nav.main a.used{color:var(--slate);font-size:.85rem;font-weight:500;border-left:1px solid var(--line);padding-left:26px}
nav.main a.btn{padding:9px 18px;font-size:.84rem;color:#fff}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);color:var(--navy);border-radius:8px;padding:8px 13px;font-size:1.05rem;cursor:pointer}

/* hero */
.hero{
  position:relative;overflow:hidden;color:var(--ink);
  background:linear-gradient(180deg,#FFFFFF 0%,#F4F2ED 100%);
  padding:84px 0 92px;
}
.hero .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center;position:relative;z-index:1}
.hero h1{color:var(--ink)}
.hero .sub{color:var(--slate);margin:22px 0 34px;font-size:1.12rem}
.heroCtas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero .kicker{display:none}
.heroFacts{display:flex;gap:38px;margin-top:44px;flex-wrap:wrap}
.hf .v{font-weight:700;font-size:1.25rem;color:var(--ink);letter-spacing:-.02em}
.hf .k{font-size:.78rem;color:var(--slate);font-weight:500;margin-top:2px}

/* hero illustration */
.heroArt{position:relative}
.heroArt .photo{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--shadow-lg)}
.heroArt .photo img{width:100%;max-width:440px;margin:0 auto;height:auto;display:block}
.cardPhoto{background:#fff;border-radius:10px;margin:2px 0 20px;border:1px solid var(--line);padding:10px}
.cardPhoto img{width:100%;height:170px;max-width:340px;margin:0 auto;object-fit:contain;display:block}
.heroArt .glass{
  position:absolute;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:12px 16px;color:var(--ink);
}
.glass .t{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.glass .v{font-weight:600;font-size:.92rem;color:var(--ink);letter-spacing:-.01em}
.glass.g1{top:6%;right:-2%}
.glass.g2{bottom:10%;left:-4%}

/* trust bar */
.trustbar{background:var(--white);border-bottom:1px solid var(--line)}
.trustbar .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.tb{display:flex;gap:14px;align-items:flex-start;padding:26px 26px 26px 0;border-left:1px solid var(--line);padding-left:26px}
.tb:first-child{border-left:none;padding-left:0}
.tb svg{width:26px;height:26px;flex:none;stroke:var(--blue);margin-top:2px}
.tb b{display:block;font-size:.92rem;color:var(--navy);letter-spacing:-.01em}
.tb span{font-size:.8rem;color:var(--slate);line-height:1.45;display:block;margin-top:2px}

/* sections */
section{padding:96px 0;background:var(--white)}
section.tight{padding:76px 0}
section.mistbg{background:var(--mist)}
.mistbg{background:var(--mist)}
.navybg{background:linear-gradient(165deg,#152B3D,#1D3A52);color:#fff}
.navybg h2{color:#fff}
.navybg .sub{color:#AEB9C0}
.navybg .eyebrow{color:#D9A183}

/* product cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:30px 28px 26px;display:flex;flex-direction:column;
  text-decoration:none;color:var(--ink);position:relative;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#CFD2CE}
.card .code{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.72rem;color:var(--slate);letter-spacing:.06em}
.card h3{font-size:1.42rem;margin:10px 0 2px}
.card .dims{font-weight:600;font-size:.9rem;color:var(--slate);margin-bottom:20px}
.card .art{margin:2px 0 20px;background:var(--mist);border-radius:10px;padding:18px 16px}
.card ul{list-style:none;border-top:1px solid var(--line)}
.card li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.87rem}
.card li span:first-child{color:var(--slate)}
.card li span:last-child{font-weight:700;color:var(--navy);text-align:right}
.card .go{margin-top:20px;font-weight:700;color:var(--blue);font-size:.93rem;display:flex;align-items:center;gap:6px}
.card .flag{
  position:absolute;top:22px;right:22px;font-size:.66rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;background:var(--navy);color:#fff;border-radius:999px;padding:5px 12px;
}

/* first-trip panel */
.tripPanel{
  border-radius:22px;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;
  background:linear-gradient(140deg,#1A5079,#20618F 60%,#2B6F9E);color:#fff;
  box-shadow:var(--shadow-lg);
}
.tripCopy{padding:64px 58px}
.tripCopy h2{color:#fff}
.tripCopy .sub{color:#D6E4EF;margin-top:16px;max-width:none;font-size:1.08rem}
.tripNote{margin-top:26px;font-size:.85rem;color:#CFE0ED;border-left:2px solid var(--sand);padding-left:16px;line-height:1.55}
.tripSteps{background:rgba(9,32,52,.35);padding:48px 46px;display:flex;flex-direction:column;justify-content:center}
.tstep{display:flex;gap:18px;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.10)}
.tstep:last-child{border-bottom:none}
.tstep .n{
  width:32px;height:32px;flex:none;border-radius:50%;background:#fff;
  color:#1A5079;font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center;
}
.tstep b{display:block;color:#fff;font-size:.98rem;letter-spacing:-.01em}
.tstep p{font-size:.87rem;color:#C4D6E4;margin-top:2px}

/* process timeline */
.timeline{position:relative;margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:44px 34px}
.pstep{position:relative;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:26px 24px;box-shadow:var(--shadow)}
.pstep .n{
  font-weight:800;font-size:.76rem;letter-spacing:.1em;color:var(--blue);
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
}
.pstep .n::after{content:"";height:1px;flex:1;background:var(--line)}
.pstep h3{font-size:1.02rem;margin-bottom:8px}
.pstep p{font-size:.87rem;color:var(--slate)}

/* pricing */
.priceRow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:0;align-items:stretch;margin-top:52px}
.pricePart{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:30px 28px;box-shadow:var(--shadow)}
.pricePart .ic{width:34px;height:34px;stroke:var(--blue);margin-bottom:16px}
.pricePart h3{margin-bottom:8px}
.pricePart p{font-size:.88rem;color:var(--slate)}
.plus{display:flex;align-items:center;justify-content:center;font-size:1.7rem;color:#B7C6D6;padding:0 18px;font-weight:300}
.priceFoot{
  margin-top:30px;font-size:.94rem;color:var(--navy);font-weight:600;
  background:var(--mist);border:1px solid var(--line);border-radius:12px;padding:18px 22px;
}

/* trust grid */
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.plate{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:28px 26px;box-shadow:var(--shadow)}
.plate svg{width:30px;height:30px;stroke:var(--blue);margin-bottom:16px}
.plate h3{font-size:1rem;margin-bottom:8px}
.plate p{font-size:.88rem;color:var(--slate)}
.plate p + p{margin-top:8px}
.plate .mono{font-size:.78rem;color:#7A8CA0}
.standards{
  margin-top:44px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;
}
.standards span{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.74rem;font-weight:600;color:var(--slate);
  border:1px solid var(--line);border-radius:999px;padding:8px 18px;background:var(--white);
}

/* spec tables (detail pages) */
.dHero{background:linear-gradient(180deg,#FFFFFF 0%,#F1EEE8 100%);padding:60px 0 64px;border-bottom:1px solid #E0DCD3;position:relative}
.dHero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--rust),var(--blue) 55%,transparent 85%)}
.dHero .photo{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--shadow-lg)}
.dHero .photo img{width:100%;max-width:460px;margin:0 auto;height:auto;display:block}
.dHero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.crumb{font-size:.82rem;color:var(--slate);margin-bottom:24px;font-weight:500}
.crumb a{color:var(--blue);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.dHero .iso{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;color:var(--blue);font-size:.8rem;letter-spacing:.08em;margin-bottom:14px;font-weight:600}
.keyFacts{display:grid;grid-template-columns:repeat(4,auto);gap:14px;margin-top:34px}
.kf{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:14px 18px;box-shadow:var(--shadow)}
.kf .v{font-weight:800;font-size:1.18rem;color:var(--navy);letter-spacing:-.02em}
.kf .k{font-size:.7rem;color:var(--slate);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.dArt{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:var(--shadow)}

.specGrid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:52px}
.specTable{background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.specTable .tt{
  font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:var(--navy);color:#fff;padding:13px 22px;
}
.specTable table{width:100%;border-collapse:collapse}
.specTable td{padding:12px 22px;font-size:.9rem;border-top:1px solid var(--line);vertical-align:top}
.specTable tr:first-child td{border-top:none}
.specTable td:first-child{color:var(--slate);width:46%;font-weight:500}
.specTable td:last-child{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.84rem;font-weight:600;color:var(--navy)}
.specNote{font-size:.82rem;color:var(--slate);margin-top:18px}

/* included lists */
.twoCol{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:8px}
.tick{list-style:none;margin-top:22px}
.tick li{padding:12px 0 12px 34px;border-bottom:1px solid var(--line);position:relative;font-size:.94rem}
.tick li::before{
  content:"";position:absolute;left:0;top:15px;width:19px;height:19px;border-radius:50%;
  background:#E7F2EC;
}
.tick li::after{
  content:"";position:absolute;left:5px;top:20px;width:9px;height:5px;
  border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg);
}

/* quote form */
.quoteShell{
  display:grid;grid-template-columns:.9fr 1.35fr;gap:0;margin-top:52px;
  border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);
}
.quoteSide{background:linear-gradient(165deg,#152B3D,#1D3A52);color:#fff;padding:46px 42px}
.quoteSide h3{color:#fff;font-size:1.3rem;margin-bottom:10px}
.quoteSide p{color:#AEB9C0;font-size:.9rem}
.qnext{list-style:none;margin-top:30px}
.qnext li{display:flex;gap:16px;padding:14px 0;border-top:1px solid rgba(255,255,255,.10);font-size:.88rem;color:#C6CFD5}
.qnext .n{width:26px;height:26px;flex:none;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid #5F6E79;color:#C6CFD5;font-weight:700;font-size:.76rem;display:flex;align-items:center;justify-content:center;margin-top:-1px}
.qnext b{color:#fff}
.quoteSide .sig{margin-top:34px;font-size:.78rem;color:#8994A0;border-top:1px solid rgba(255,255,255,.10);padding-top:20px}
form.quote{background:var(--white);padding:46px 44px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:.78rem;font-weight:700;color:var(--navy);letter-spacing:.01em}
.field{min-width:0}
.frow>*{min-width:0}
.quoteShell,.quoteSide,form.quote{min-width:0}
.qnext li>div{min-width:0}
.field input,.field select,.field textarea{
  width:100%;max-width:100%;min-width:0;
  font-family:inherit;font-size:.95rem;color:var(--ink);
  border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;background:#FBFCFE;
  transition:border-color .12s ease,box-shadow .12s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(61,90,108,.12);
}
form.quote .btn{width:100%;margin-top:28px;justify-content:center;padding:16px;font-size:1rem}
.formFoot{text-align:center;font-size:.8rem;color:var(--slate);margin-top:14px}
.sent{display:none;background:#EAF5EF;border:1.5px solid var(--ok);color:var(--ok);border-radius:10px;padding:14px 18px;margin-top:20px;font-size:.92rem;font-weight:600}

/* faq */
.faq{max-width:840px;margin:44px auto 0}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;font-weight:700;padding:19px 24px;font-size:.98rem;color:var(--navy);list-style:none;display:flex;justify-content:space-between;gap:16px;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blue);font-weight:500;font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 24px 20px;font-size:.9rem;color:var(--slate)}

/* CTA band */
.ctaBand{text-align:center}
.ctaBand h2{margin-bottom:14px}

/* footer */
footer{background:#152B3D;color:#8FA2B2;padding:70px 0 44px;font-size:.87rem}
.fGrid{display:grid;grid-template-columns:2.1fr 1fr 1fr 1fr;gap:48px}
footer .brand .word{color:#fff}
footer .fAbout{margin-top:16px;line-height:1.65;max-width:34ch}
footer h4{font-size:.74rem;font-weight:600;letter-spacing:.14em;color:#C6CFD5;margin-bottom:16px;text-transform:uppercase}
footer a{color:#93A0A9;text-decoration:none;display:block;padding:4px 0;transition:color .12s}
footer a:hover{color:#fff}
.fLegal{border-top:1px solid #2A455C;margin-top:52px;padding-top:24px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.77rem;color:#7A8791}

/* responsive */
@media (max-width:1080px){
  .hero .wrap,.dHero .wrap,.tripPanel,.quoteShell,.twoCol,.specGrid{grid-template-columns:1fr}
  .cards,.plates,.timeline{grid-template-columns:1fr 1fr}
  .trustbar .wrap{grid-template-columns:1fr 1fr}
  .tb{border-left:none;padding-left:0;border-top:1px solid var(--line)}
  .tb:nth-child(-n+2){border-top:none}
  .priceRow{grid-template-columns:1fr}
  .plus{padding:10px 0}
  .fGrid{grid-template-columns:1fr 1fr}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:20px 28px 28px;gap:18px;border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg)}
  nav.main.open{display:flex}
  nav.main a.used{border-left:none;padding-left:0}
  .burger{display:block}
  .heroArt{max-width:520px;margin:0 auto;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
  .heroArt svg{width:100%}
  .heroArt .glass{position:static}
  .keyFacts{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .btn{white-space:normal;text-align:center;line-height:1.35}
  .card .flag{position:static;display:inline-block;margin:0 0 12px;align-self:flex-start}
  .msBar{flex-direction:column;height:auto}
  .msBar .m1,.msBar .m2{padding:14px;font-size:.92rem}
  .keyFacts{grid-template-columns:1fr 1fr}
  .specTable td{padding:10px 14px;font-size:.85rem}
  .specTable td:first-child{width:40%}
  .cards,.plates,.timeline,.frow,.fGrid,.trustbar .wrap{grid-template-columns:1fr}
  .tb{border-top:1px solid var(--line)}
  .tb:first-child{border-top:none}
  section{padding:68px 0}
  .hero{padding:72px 0 84px}
  .tripCopy,.tripSteps,.quoteSide,form.quote{padding:36px 26px}
}

/* ===== additions: pages, person card, network, milestones, lang ===== */
select.lang{
  font-family:inherit;font-size:.82rem;font-weight:600;color:#33475C;
  border:1.5px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff;cursor:pointer;
}
.hero select.lang{display:none}

.pageHero{background:linear-gradient(180deg,#FFFFFF 0%,#F1EEE8 100%);padding:66px 0 58px;border-bottom:1px solid #E0DCD3;position:relative}
.pageHero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--rust),var(--blue) 55%,transparent 85%)}
.pageHero h1{font-size:clamp(2rem,4vw,2.9rem)}
.pageHero .sub{margin-top:16px}

.navyHero{background:linear-gradient(165deg,#13293D,#1B3B55);color:#fff;padding:72px 0 80px}
.navyHero h1{color:#fff;font-size:clamp(2rem,4.2vw,3.1rem)}
.navyHero .sub{color:#AEB9C0;margin-top:18px}

.vtl{margin-top:52px;position:relative;padding-left:34px}
.vtl::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:var(--line)}
.vstep{position:relative;padding:0 0 38px 26px}
.vstep:last-child{padding-bottom:0}
.vstep::before{
  content:"";position:absolute;left:-27px;top:4px;width:16px;height:16px;border-radius:50%;
  background:#fff;border:4px solid var(--blue);
}
.vstep h3{margin-bottom:8px}
.vstep p{font-size:.93rem;color:var(--slate);max-width:64ch}
.vstep .docs{
  margin-top:14px;background:var(--mist);border:1px solid var(--line);border-radius:10px;
  padding:13px 17px;font-size:.84rem;color:var(--navy);
}
.vstep .docs b{color:var(--blue);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:4px}

.milestones{margin-top:40px;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:30px;box-shadow:var(--shadow)}
.msBar{display:flex;border-radius:10px;overflow:hidden;margin:18px 0 10px;height:52px}
.msBar .m1{background:#3D5A6C;flex:7;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}
.msBar .m2{background:#1B2833;flex:3;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}
.msLegend{display:flex;justify-content:space-between;font-size:.84rem;color:var(--slate);gap:16px;flex-wrap:wrap}
.msNote{font-size:.8rem;color:var(--slate);margin-top:14px}

.person{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:30px;box-shadow:var(--shadow)}
.avatar{width:96px;height:96px;border-radius:50%;background:linear-gradient(140deg,var(--blue),var(--navy));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:2rem;letter-spacing:.02em}
.person h3{font-size:1.25rem}
.person .role{color:var(--slate);font-size:.9rem;margin:2px 0 12px}
.person .pc{display:flex;gap:22px;flex-wrap:wrap;font-size:.9rem}
.person .pc a{color:var(--blue);text-decoration:none;font-weight:700}
.person .pc a:hover{text-decoration:underline}
.phNote{font-size:.76rem;color:#9AA9B8;margin-top:10px}

.factCard{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--shadow)}
.factCard h3{margin-bottom:14px}
.factCard table{width:100%;border-collapse:collapse}
.factCard td{padding:10px 0;font-size:.9rem;border-top:1px solid var(--line);vertical-align:top}
.factCard tr:first-child td{border-top:none}
.factCard td:first-child{color:var(--slate);width:40%}
.factCard td:last-child{font-weight:700;color:var(--navy)}
.factCard td .mono{font-weight:500;font-size:.82rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:44px}

.netStats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px}
.ns{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:24px 22px;box-shadow:var(--shadow);text-align:center}
.ns .v{font-weight:800;font-size:1.7rem;color:var(--navy);letter-spacing:-.02em}
.ns .k{font-size:.78rem;color:var(--slate);font-weight:600;margin-top:4px}
.netList{margin-top:36px}

.routeDiag{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:0;align-items:center;margin-top:44px}
.rNode{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:20px 18px;text-align:center;box-shadow:var(--shadow)}
.rNode b{display:block;color:var(--navy);font-size:.95rem}
.rNode span{font-size:.78rem;color:var(--slate)}
.rArrow{color:var(--blue);font-size:1.3rem;padding:0 12px;font-weight:700}

.split{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:44px}
.inclCard{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--shadow)}
.inclCard.head-ok h3{color:var(--ok)}
.inclCard.head-no h3{color:var(--slate)}
.xlist{list-style:none;margin-top:14px}
.xlist li{padding:10px 0 10px 30px;border-bottom:1px solid var(--line);position:relative;font-size:.9rem;color:var(--slate)}
.xlist li::before{content:"—";position:absolute;left:2px;color:#B7C6D6;font-weight:700}

.honest{margin-top:44px;border-left:4px solid var(--blue);background:var(--mist);border-radius:0 14px 14px 0;padding:26px 30px}
.honest h3{margin-bottom:10px}
.honest p{font-size:.92rem;color:var(--slate)}
.honest p + p{margin-top:10px}
.honest b{color:var(--navy)}

.stack{margin:0 auto}

@media (max-width:1080px){
  .grid2,.split{grid-template-columns:1fr}
  .netStats{grid-template-columns:1fr 1fr}
  .routeDiag{grid-template-columns:1fr;gap:8px}
  .rArrow{transform:rotate(90deg);text-align:center;padding:2px 0}
}
@media (max-width:640px){
  .btn{white-space:normal;text-align:center;line-height:1.35}
  .card .flag{position:static;display:inline-block;margin:0 0 12px;align-self:flex-start}
  .msBar{flex-direction:column;height:auto}
  .msBar .m1,.msBar .m2{padding:14px;font-size:.92rem}
  .keyFacts{grid-template-columns:1fr 1fr}
  .specTable td{padding:10px 14px;font-size:.85rem}
  .specTable td:first-child{width:40%}
  .netStats{grid-template-columns:1fr 1fr}
  .person{grid-template-columns:1fr;text-align:left}
}

.fSilknet{text-align:center;margin-top:20px;font-size:.82rem;color:#A9BCCB}
.fSilknet a{color:#D6E4EF;text-decoration:none;font-weight:600}
.fSilknet a:hover{text-decoration:underline}

/* ===== motion & card polish ===== */
@keyframes riseIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes chipIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes sheen{0%{transform:translateX(-120%) skewX(-18deg)}100%{transform:translateX(320%) skewX(-18deg)}}
.hero .wrap>div:first-child>*{animation:riseIn .8s cubic-bezier(.16,.84,.3,1) both}
.hero .wrap>div:first-child>*:nth-child(1){animation-delay:.05s}
.hero .wrap>div:first-child>*:nth-child(2){animation-delay:.15s}
.hero .wrap>div:first-child>*:nth-child(3){animation-delay:.25s}
.hero .wrap>div:first-child>*:nth-child(4){animation-delay:.35s}
.heroArt{animation:riseIn .9s .2s cubic-bezier(.16,.84,.3,1) both}


.card{overflow:hidden}
.cardPhoto{overflow:hidden}
.cardPhoto img{transition:transform .5s cubic-bezier(.16,.84,.3,1)}
.card:hover .cardPhoto img{transform:scale(1.06)}
.card .go{transition:transform .25s ease}
.card:hover .go{transform:translateX(5px)}



.btn{transition:transform .18s ease,opacity .15s ease,box-shadow .18s ease}
.btn:hover{transform:none;box-shadow:none}
.faq details{transition:transform .2s ease}
.faq details[open]{transform:none;box-shadow:var(--shadow-lg)}
@media (prefers-reduced-motion:reduce){
  .hero .wrap>div:first-child>*,.heroArt,.heroArt .photo,.heroArt .glass{animation:none}
  .tripPanel::after{animation:none;display:none}
  .cardPhoto img,.card .go,.plate,.ns,.pstep,.inclCard,.btn{transition:none}
}

/* ===== how-it-works: steps as cards ===== */
.vtl{padding-left:38px}
.vtl::before{left:16px;background:linear-gradient(180deg,var(--blue),#B9D2E6)}
.vstep{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 30px;margin-bottom:26px;box-shadow:var(--shadow)}
.vstep:last-child{margin-bottom:0}
.vstep::before{left:-31px;top:30px;border-color:var(--blue)}


/* ===== comparison (responsive cards) ===== */
.cmp{margin-top:48px;display:flex;flex-direction:column;gap:14px}
.cmpHead{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:14px}
.cmpHead>div{font-size:.82rem;font-weight:700;color:var(--navy);padding:14px 18px;background:var(--mist);border:1px solid var(--line);border-radius:12px}
.cmpHead>div span{display:block;font-weight:500;color:var(--slate);font-size:.76rem}
.cmpHead .us{background:var(--blue);color:#fff;border-color:var(--blue)}
.cmpHead .us span{color:#CFE2F0}
.cmpRow{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:14px}
.cmpRow .crit{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--rust);grid-column:1/-1;margin:8px 2px 0}
.cmpRow>div:not(.crit){background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 18px;font-size:.87rem;color:var(--slate)}
.cmpRow .lbl{display:none;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9AA5AD;margin-bottom:4px}
.cmpRow .us{background:#EEF4F8;border-color:#C8DAE7;color:var(--navy);font-weight:600}
.cmpFoot{background:var(--mist);border:1px solid var(--line);border-radius:12px;padding:16px 20px;font-size:.85rem;color:var(--slate)}
@media (max-width:900px){
  .cmpHead{display:none}
  .cmpRow{grid-template-columns:1fr}
  .cmpRow .lbl{display:block}
}

@media (max-width:400px){
  .wrap{padding:0 18px}
  h1{font-size:1.9rem}
  h2{font-size:1.45rem}
  .heroFacts{gap:20px}
  .keyFacts{grid-template-columns:1fr 1fr;gap:10px}
  .kf{padding:11px 13px}
  .tripCopy,.tripSteps,.quoteSide,form.quote{padding:30px 20px}
  .plates{grid-template-columns:1fr !important}
}
@media (min-width:641px) and (max-width:1080px){
  .timeline{grid-template-columns:1fr 1fr}
  .plates{grid-template-columns:1fr 1fr !important}
}

.timeline.steps4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1080px){.timeline.steps4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.timeline.steps4{grid-template-columns:1fr}}

.heroArt img.heroCut{width:100%;height:auto;max-width:600px;margin:0 auto;display:block;filter:drop-shadow(0 22px 34px rgba(20,30,40,.16))}

/* ===== nav dropdown ===== */
.navDrop{position:relative;display:flex;align-items:center}
.navDrop>a .caret{font-size:.7em;opacity:.55;margin-left:2px}
.dropMenu{position:absolute;top:calc(100% + 4px);left:-16px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:8px;min-width:230px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:60}
.navDrop::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.navDrop:hover .dropMenu,.navDrop:focus-within .dropMenu{opacity:1;visibility:visible;transform:none}
.dropMenu a{display:block;padding:10px 14px;border-radius:8px;font-size:.9rem;color:var(--ink) !important;text-decoration:none;font-weight:500}
.dropMenu a:hover{background:var(--mist)}
.dropMenu .dropAll{border-top:1px solid var(--line);border-radius:0 0 8px 8px;margin-top:4px;color:var(--blue) !important;font-weight:600}
/* The desktop nav row carries seven items once Depot Stock is in it, and the
   German and French labels are the longest. Between 1081px and 1280px that row
   overflows, so the burger treatment — which is otherwise the <=1080px rule
   below — is extended up to 1280px rather than shrinking the type. Same rules,
   wider window; the two blocks are kept separate so the original breakpoint
   stays readable. */
@media (min-width:1081px) and (max-width:1280px){
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:20px 28px 28px;gap:18px;border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg)}
  nav.main.open{display:flex}
  nav.main a.used{border-left:none;padding-left:0}
  .burger{display:block}
  .navDrop{flex-direction:column;align-items:flex-start}
  .dropMenu{position:static;opacity:1;visibility:visible;transform:none;border:none;box-shadow:none;padding:2px 0 4px 16px;min-width:0;display:flex;flex-direction:column;gap:2px}
  .dropMenu a{padding:7px 0}
  .dropMenu .dropAll{border-top:none;margin-top:0}
  .navDrop::after{display:none}
}

@media (max-width:1080px){
  .navDrop{flex-direction:column;align-items:flex-start}
  .dropMenu{position:static;opacity:1;visibility:visible;transform:none;border:none;box-shadow:none;padding:2px 0 4px 16px;min-width:0;display:flex;flex-direction:column;gap:2px}
  .dropMenu a{padding:7px 0}
  .dropMenu .dropAll{border-top:none;margin-top:0}
  .navDrop::after{display:none}
}

/* ===== product photo gallery ===== */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:0}
.shot{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 16px 14px;text-align:center;box-shadow:var(--shadow)}
.shot img{width:100%;height:190px;object-fit:contain;display:block}
.shot span{display:block;margin-top:10px;font-size:.8rem;color:var(--slate);font-weight:600;letter-spacing:.02em}
@media (max-width:820px){.shots{grid-template-columns:1fr}.shot img{height:220px}}


/* ===== week-2 additions (live tokens only) ===== */
a.plate{display:block;text-decoration:none;color:var(--ink)}
a.plate:hover{box-shadow:var(--shadow-lg);border-color:#CFD2CE}
.priceTag{font-weight:800;font-size:2rem;color:var(--navy);letter-spacing:-.02em}
.priceTag small{font-size:.85rem;font-weight:600;color:var(--slate)}
.pillOk{display:inline-block;font-size:.78rem;font-weight:700;color:var(--ok);background:#E7F2EC;border:1px solid #CBE2D5;border-radius:999px;padding:5px 13px;margin-right:8px}
.pillMut{display:inline-block;font-size:.78rem;font-weight:600;color:var(--slate);border:1px solid var(--line);border-radius:999px;padding:5px 13px;background:#fff}
.phSlot{background:var(--mist);border-radius:10px;height:170px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--slate);font-size:.78rem;font-weight:600;padding:0 14px;line-height:1.5}
.depotGrid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:52px}
@media(max-width:900px){.depotGrid{grid-template-columns:1fr}}
.stageRow{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;margin-top:26px}
@media(max-width:900px){.stageRow{grid-template-columns:1fr}}

.utility{text-align:left}
.uwrap{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.uwrap a.umail{color:#fff;text-decoration:none;font-weight:600}
.uwrap a.umail:hover{text-decoration:underline}
.gFeature{display:grid;grid-template-columns:1.4fr 1fr;gap:34px;align-items:center}
@media(max-width:900px){.gFeature{grid-template-columns:1fr}}
.gGroup{margin-top:56px}
.gGroup .plates{margin-top:24px}
.termTable td:first-child{font-weight:800;color:var(--navy);width:30%}

/* rhythm & alignment pass */
section{padding:88px 0}
section.tight{padding:64px 0}
@media(max-width:640px){section{padding:56px 0}section.tight{padding:44px 0}.pageHero{padding:52px 0 46px}}
.sub{line-height:1.65}
.plate,.factCard{padding:28px}
@media(max-width:640px){.plate,.factCard{padding:22px 20px}}
/* images: never squeezed */
.shots{grid-template-columns:repeat(var(--cols,3),1fr)}
@media(max-width:860px){.shots{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.shots{grid-template-columns:1fr}}
.shot img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.shot.render img{object-fit:contain;background:var(--mist)}
.stageRow img{width:100%;height:auto}
.teaserGrid{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center}
.teaserGrid img{width:100%;height:auto}
@media(max-width:860px){.teaserGrid{grid-template-columns:1fr}.teaserGrid img{order:-1}}
.gFeature img{width:100%;height:auto}
/* inviting hover on guide cards */
a.plate{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
a.plate:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#CFD2CE}
a.plate h3{transition:color .15s ease}
a.plate:hover h3{color:var(--blue)}
a.plate p{color:var(--slate)}
/* terminology: term on its own line, own color */
.term{padding:22px 0;border-bottom:1px solid var(--line)}
.term:last-child{border-bottom:none;padding-bottom:6px}
.term .tname{display:block;color:var(--blue);font-weight:800;font-size:1.06rem;letter-spacing:-.01em;margin-bottom:8px}
.term p{color:var(--ink);font-size:.95rem;line-height:1.68;max-width:72ch}

.vtl{padding-bottom:8px}
.vstep:last-child{padding-bottom:14px}
.stageRow{align-items:center}
.stageRow p{margin:0;align-self:center}
.stageRow .shots{margin:0;align-self:center}
.pIcon{width:30px;height:30px;stroke:var(--blue);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px;display:block}
.feeDiag{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:30px;box-shadow:var(--shadow);margin-top:40px}
.priceImg{width:100%;max-width:300px;margin:0 0 14px;height:auto}

.feeDiag{max-width:720px;margin-left:auto;margin-right:auto}

.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
.faq summary{padding:18px 22px;font-weight:700;color:var(--navy);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:.98rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--blue);font-size:1.25rem;font-weight:500;flex:none;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 22px 20px;color:var(--slate);font-size:.93rem;line-height:1.65}
.faq details p a{color:var(--blue);font-weight:700;text-decoration:none}
.faq .fsec{margin:34px 0 16px}
.faq .fsec:first-child{margin-top:0}



/* --- form wiring (generated) --------------------------------------------- */
.hp{display:none!important}
.ferr{display:none;background:#FBEDE7;border:1.5px solid var(--rust);color:var(--rust);
  border-radius:10px;padding:14px 18px;margin-top:20px;font-size:.92rem;font-weight:600}
form.quote .btn[disabled]{opacity:.55;cursor:default}

[dir="rtl"] .dropMenu{left:auto;right:-16px}
[dir="rtl"] nav.main{margin-left:0;margin-right:auto}
[dir="rtl"] .navDrop>a .caret{margin-left:0;margin-right:2px}
[dir="rtl"] .sub{margin-left:0}
[dir="rtl"] .center .sub{margin-left:auto;margin-right:auto}

/* Latin-script technical values — 40' x 8' x 9'6", 12.192 m, 22G1 — are
   bidi-neutral apart from their quote marks, so an RTL paragraph direction
   reorders them into nonsense. Lay them out left-to-right, still flush to the
   RTL edge. */
[dir="rtl"] .dims,[dir="rtl"] .code,[dir="rtl"] .kf .v,
[dir="rtl"] .hf .v,[dir="rtl"] .ns .v,[dir="rtl"] .card ul li span:last-child,
[dir="rtl"] .specTable td+td,[dir="rtl"] .standards span,
[dir="rtl"] .priceTag,[dir="rtl"] .term .tname{direction:ltr;text-align:right}
/* .iso and .crumb are translated prose with Latin codes embedded: keep the
   paragraph RTL and isolate the Latin runs rather than flipping the whole line. */
[dir="rtl"] .iso,[dir="rtl"] .crumb{unicode-bidi:isolate}
[dir="rtl"] .crumb a{unicode-bidi:isolate}

/* --- market report exhibits (generated) ---------------------------------- */
/* The monthly report's exhibits are wide comparison tables rather than the
   two-column fact tables the rest of the site uses, so they carry their own
   header row and scroll inside their card instead of squeezing the page. */
.exhibit{overflow-x:auto;-webkit-overflow-scrolling:touch}
.exhibit table{width:100%;min-width:560px;border-collapse:collapse}
.exhibit th{text-align:left;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--slate);padding:0 16px 10px 0;
  border-bottom:1px solid var(--line);vertical-align:bottom}
.exhibit td{padding:10px 16px 10px 0;font-size:.9rem;border-top:1px solid var(--line);
  vertical-align:top;width:auto;color:var(--navy);font-weight:600}
.exhibit td:first-child{width:auto;color:var(--ink);font-weight:700}
.exhibit th:last-child,.exhibit td:last-child{padding-right:0}


/* ===== depot stock (additive, ships as assets/css/stock.css) ===== */
.pillSoon{display:inline-block;font-size:.78rem;font-weight:700;color:#8A5A12;background:#FBF1E0;border:1px solid #EAD3A8;border-radius:999px;padding:5px 13px;margin-right:8px}
.pillGate{display:inline-block;font-size:.78rem;font-weight:700;color:var(--blue);background:#E8F0F6;border:1px solid #C9DAE8;border-radius:999px;padding:5px 13px;margin-right:8px}
.stockBar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:36px 0 18px}
.stockBar select{font-family:inherit;font-size:.9rem;color:var(--ink);border:1.5px solid var(--line);border-radius:10px;padding:10px 36px 10px 14px;background:#FBFCFE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235C6B76' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;appearance:none}
.stockBar .count{margin-left:auto;font-size:.85rem;color:var(--slate);font-weight:600}
.stockTable{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.stockTable .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.stockTable table{width:100%;min-width:820px;border-collapse:collapse}
.stockTable th{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);text-align:left;padding:14px 16px;background:var(--mist);border-bottom:1px solid var(--line);white-space:nowrap}
.stockTable td{padding:13px 16px;border-top:1px solid var(--line);font-size:.9rem;vertical-align:middle;color:var(--ink)}
.stockTable tbody tr:first-child td{border-top:none}
.stockTable td.num,.stockTable th.num{text-align:right;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-weight:700;color:var(--navy)}
.stockTable td.port b{color:var(--navy)}
.stockTable td.port small{display:block;color:var(--slate);font-size:.78rem;font-weight:500}
.stockTable td .code{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.8rem;color:var(--slate);display:block}
.stockTable td .fit{font-size:.78rem;color:var(--slate)}
.stockTable td .note{display:block;font-size:.76rem;color:var(--slate);margin-top:5px;white-space:nowrap}
.stockTable td .pillOk,.stockTable td .pillSoon,.stockTable td .pillGate{margin-right:0;white-space:nowrap}
.stockTable td .col{white-space:nowrap}
.stockTable td a.req{color:var(--blue);font-weight:700;text-decoration:none;white-space:nowrap}
.stockTable td a.req:hover{text-decoration:underline}
.stockTable tr.hide{display:none}
.stockTable .empty{padding:26px 20px;color:var(--slate);font-size:.9rem}
.swatch{display:inline-block;width:12px;height:12px;border-radius:3px;border:1px solid rgba(0,0,0,.15);vertical-align:-2px;margin-right:7px}
.priceBasis{font-size:.82rem;color:var(--slate);margin-top:14px}
.portGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}
a.portTile{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
a.portTile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#CFD2CE}
a.portTile b{display:block;color:var(--navy);font-size:1rem}
a.portTile small{display:block;color:var(--slate);font-size:.78rem;margin-bottom:8px}
a.portTile .c{display:flex;gap:6px;flex-wrap:wrap}
a.portTile .c span{font-size:.72rem;font-weight:700;border-radius:999px;padding:3px 9px}
a.portTile .c .d{color:var(--ok);background:#E7F2EC}
a.portTile .c .a{color:#8A5A12;background:#FBF1E0}
a.portTile .c .g{color:var(--blue);background:#E8F0F6}
a.portTile .c .z{color:var(--slate);background:var(--mist)}
.stockSum{background:var(--mist);border-left:3px solid var(--blue);border-radius:0 14px 14px 0;padding:22px 26px;margin-top:30px;font-size:1rem;color:var(--ink);line-height:1.65}
.legendGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px}
.legendGrid .plate table{width:100%;border-collapse:collapse}
.legendGrid .plate td{padding:8px 0;font-size:.86rem;border-top:1px solid var(--line);vertical-align:top}
.legendGrid .plate tr:first-child td{border-top:none}
.legendGrid .plate td:first-child{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-weight:700;color:var(--navy);width:38%;font-size:.8rem}
.stockH2{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:6px}
.stockNote{color:var(--slate);font-size:.9rem;margin-bottom:22px}
.adminShell{max-width:980px;margin:0 auto}
.adminCard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--shadow);margin-bottom:24px}
.adminCard h2{font-size:1.15rem;margin-bottom:6px}
.adminCard textarea{width:100%;min-height:180px;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.8rem;border:1.5px solid var(--line);border-radius:10px;padding:14px;background:#FBFCFE}
.adminRow{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:16px}
.drop{border:2px dashed #C9CFCB;border-radius:12px;padding:26px;text-align:center;color:var(--slate);font-size:.9rem;background:#FBFCFE;margin-top:14px}
.warnBox{background:#FBF1E0;border:1px solid #EAD3A8;color:#8A5A12;border-radius:10px;padding:12px 16px;font-size:.88rem;margin-top:14px}
.okBox{background:#E7F2EC;border:1px solid #CBE2D5;color:var(--ok);border-radius:10px;padding:12px 16px;font-size:.88rem;font-weight:600;margin-top:14px}
.hist{list-style:none}
.hist li{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--line);font-size:.88rem}
.hist li:first-child{border-top:none}
@media(max-width:700px){
.stockTable table{min-width:0}.stockTable thead{display:none}
.stockTable tbody tr{display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:16px 18px;border-top:1px solid var(--line)}
.stockTable tbody tr:first-child{border-top:none}
.stockTable td{display:block;padding:0;border-top:none;font-size:.88rem}
.stockTable td.port{grid-column:1/-1}
.stockTable td[data-l]::before{content:attr(data-l);display:block;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-top:6px}
.stockTable td.num{text-align:left}.stockTable td.act{grid-column:1/-1;margin-top:6px}
.stockTable td .note{white-space:normal}}
@media(max-width:1000px){.portGrid{grid-template-columns:repeat(3,1fr)}.legendGrid{grid-template-columns:1fr}}
@media(max-width:640px){.portGrid{grid-template-columns:1fr 1fr}.stockBar .count{margin-left:0;width:100%}}


/* ===== index/used/quote additions (additive) ===== */
.cmp4 .cmpHead,.cmp4 .cmpRow{grid-template-columns:1fr 1fr 1.05fr 1.15fr}
.cmpHead .us2{background:var(--navy);color:#fff;border-color:var(--navy)}
.cmpHead .us2 span{color:#B9C7D2}
.cmpRow .us2{background:#F1EEE8;border-color:#DED8CC;color:var(--navy);font-weight:600}
@media(max-width:860px){.cmp4 .cmpHead{display:none}.cmp4 .cmpRow{grid-template-columns:1fr}.cmp4 .cmpRow .lbl{display:block}}
.depotGrid .factCard .top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.depotGrid .factCard .top .eyebrow{margin-bottom:8px}
.portMini{list-style:none;margin:16px 0 0;border-top:1px solid var(--line)}
.portMini li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.87rem}
.portMini li span:first-child{color:var(--navy);font-weight:600}
.portMini li span:last-child{color:var(--slate);font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.8rem}
.regionSwitch{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.regionSwitch a,.regionSwitch div{display:block;border:1px solid var(--line);border-radius:14px;padding:16px 18px;text-decoration:none;color:var(--ink);background:#fff;box-shadow:var(--shadow)}
.regionSwitch .here{background:var(--mist);border-color:#D9D4C8}
.regionSwitch b{display:block;color:var(--navy)}
.regionSwitch small{display:block;color:var(--slate);font-size:.8rem;margin-top:2px}
.regionSwitch a:hover{border-color:#CFD2CE;box-shadow:var(--shadow-lg)}
@media(max-width:640px){.regionSwitch{grid-template-columns:1fr}}
.reqCard{background:#fff;border:1px solid #C8DAE7;border-left:4px solid var(--blue);border-radius:12px;padding:18px 20px;margin-bottom:22px;box-shadow:var(--shadow)}
.reqCard .eyebrow{margin-bottom:6px}
.reqCard .line{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.9rem;color:var(--ink);margin-top:6px}
.reqCard .line b{color:var(--navy)}
.reqCard .line .code{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.8rem;color:var(--slate)}
.reqCard .change{font-size:.8rem;color:var(--slate);margin-top:8px}
.reqCard .change a{color:var(--blue);font-weight:700;text-decoration:none}

/* --- the tender desk, /manage ---------------------------------------------
   Appended after _additions.css by _gen/build.py::build_css(). New class
   names only, on top of the admin cards in _stock.css (.adminShell,
   .adminCard, .adminRow, .okBox, .warnBox, .hist), and only the site's own
   tokens. Must hold at 320px: the tabs wrap, the cards stack, and nothing
   scrolls sideways except the run table inside its own box. */
.manageShell{max-width:1040px}
.manageShell .btn{white-space:normal;text-align:center;padding:10px 18px;font-size:.88rem}
.manageShell .adminCard{padding:22px;min-width:0}
.manageShell [hidden]{display:none!important}
.manageErr{display:block}

.manageBar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:22px}
.manageTabs{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.manageTabs button,.manageTabs a{font-family:inherit;font-size:.88rem;font-weight:600;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:980px;padding:8px 16px;cursor:pointer;text-decoration:none;line-height:1.3}
.manageTabs button[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.manageTabs a{color:var(--blue)}
.manageLogout{margin:0}

.tabPanel{min-width:0}
.tabPanel>.warnBox{margin:0 0 18px}
.manageHeadline{font-weight:700;color:var(--navy);margin-bottom:14px;overflow-wrap:anywhere}
.manageH2{font-size:1.1rem;margin:30px 0 12px}
.manageH3{font-size:.95rem;margin:16px 0 6px;color:var(--navy)}
.manageFilters{display:flex;flex-wrap:wrap;gap:10px 18px;margin:0 0 18px;font-size:.85rem;font-weight:700;color:var(--navy)}
.manageFilters select{margin-left:6px;font-family:inherit;border:1.5px solid var(--line);border-radius:8px;padding:7px 8px;max-width:100%}
.manageFilters label{min-width:0;max-width:100%}

.manageLabel{display:block;font-size:.8rem;font-weight:700;color:var(--navy);margin:14px 0 6px}
.manageInput,.manageText{display:block;width:100%;max-width:100%;min-width:0;font-family:inherit;font-size:.92rem;color:var(--ink);border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;background:#FBFCFE}
.manageText{min-height:90px;resize:vertical}
/* .adminCard textarea in _stock.css makes every admin textarea monospace, which
   suits a pasted stock list and an offer body, not a sentence of settings. */
.manageShell textarea.manageText{font-family:inherit;font-size:.92rem;min-height:90px}
.manageShell textarea.manageText.mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.78rem}
.manageInput:focus,.manageText:focus,.draftBody:focus{border-color:var(--blue);outline:none}
.manageCheck{display:flex;gap:8px;align-items:center;font-size:.88rem;font-weight:600;color:var(--navy);margin:14px 0 4px}
.mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.78rem;overflow-wrap:anywhere}

.tenderCard{border-left:4px solid var(--line)}
.tenderCard[data-fit="fits"]{border-left-color:var(--ok)}
.tenderCard[data-fit="borderline"]{border-left-color:#C9962E}
.tenderHead{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.tenderTitle{font-weight:700;color:var(--navy);font-size:1.02rem;line-height:1.4;min-width:0;overflow-wrap:anywhere}
.tenderTitle a{color:var(--navy)}
.fitBadge{flex:none;display:inline-block;font-size:.75rem;font-weight:700;border-radius:980px;padding:4px 10px;border:1px solid var(--line);background:#F1F1EE;color:var(--slate);white-space:nowrap}
.fitBadge.fits{background:#E7F2EC;border-color:#CBE2D5;color:var(--ok)}
.fitBadge.borderline{background:#FBF1E0;border-color:#EAD3A8;color:#8A5A12}
.fitReason{font-size:.9rem;color:var(--ink);margin-top:10px;overflow-wrap:anywhere;white-space:pre-wrap}
.deadlineSoon{color:var(--rust);font-weight:700}

.kvGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 18px;margin:0}
.kvGrid>div{min-width:0}
.kvGrid dt{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--slate)}
.kvGrid dd{margin:2px 0 0;font-size:.9rem;color:var(--ink);overflow-wrap:anywhere}

.askBox{margin-top:12px}
.draftRow summary{cursor:pointer;line-height:1.5;overflow-wrap:anywhere}
.draftBody{display:block;width:100%;max-width:100%;min-height:420px;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.82rem;line-height:1.5;border:1.5px solid var(--line);border-radius:10px;padding:14px;background:#FBFCFE;resize:vertical}
.manageEdit{margin-top:12px}
.manageEdit summary{cursor:pointer;font-size:.88rem;font-weight:600;color:var(--blue)}
.floorGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0 14px}

.runScroll{overflow-x:auto;max-width:100%;margin-top:10px}
.runTable{border-collapse:collapse;width:100%;font-size:.82rem;min-width:640px}
.runTable th,.runTable td{text-align:left;padding:7px 8px;border-top:1px solid var(--line);vertical-align:top}
.runTable th{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);border-top:none}

@media(max-width:640px){
  .manageShell .adminCard{padding:16px}
  .tenderHead{flex-direction:column;gap:6px}
  .kvGrid{grid-template-columns:1fr}
  .manageBar{align-items:flex-start}
}



/* --- corrections to the reference blocks (generated) ---------------------- */

/* The type filter sizes itself to its longest option -- "20FT Double Door
   (20GP/DD)" out of a 21-entry map -- which is 334px of select in a 284px box
   at a 320px viewport, and 32px of horizontal page scroll with it.

   max-width alone does not fix this. .stockBar is a flex container, and a flex
   item's automatic minimum size is its content's intrinsic width, so the select
   refuses to shrink below the width of that option however narrow the box gets.
   min-width:0 is what lets it, and max-width is what then holds it in. Both are
   needed; either alone leaves the overflow.

   Arrived with the North America hub in TASK 8. The gate rendered 1280 and 390
   and passed honestly at both; 320 was not a width anything looked at. It is
   now -- see WIDTHS in _gen/verify/layout.py and SHOTS in _gen/verify/qa.mjs. */
.stockBar>*{min-width:0;max-width:100%}

/* The citation line carries a bare URL, which has no break opportunity in it,
   so at 320 and 393 it pushed the document 78px and 5px wider than the
   viewport. anywhere rather than break-word because this is a URL: it is meant
   to break mid-token, and unlike break-word it is also honoured when the line
   is measured for intrinsic width. */
.sub.cite{overflow-wrap:anywhere}