/* =========================================================
   CARGO MANIFEST DESIGN SYSTEM
   Dropship Tools — shared styles
   Palette:
     --ink:      #142524  (deep teal-black, text/bg)
     --paper:    #F6F3EA  (manifest paper)
     --teal:     #0F3D3E  (primary brand)
     --mustard:  #E8A33D  (accent / stamps)
     --rust:     #C1440E  (alerts / CTA)
     --line:     #D8D2C0  (hairlines on paper)
   Type:
     Display: 'Oswald' (condensed, stencil-like industrial feel)
     Body:    'Inter'
     Mono/Data: 'IBM Plex Mono' (numbers, calculators)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink:#142524;
  --paper:#F6F3EA;
  --paper-2:#EFEADC;
  --teal:#0F3D3E;
  --teal-2:#164F50;
  --mustard:#E8A33D;
  --rust:#C1440E;
  --line:#D8D2C0;
  --radius:2px;
  --max:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.03em;
  color:var(--teal);
  margin:0 0 .5em;
  line-height:1.15;
}
h1{font-size:clamp(2rem,4.5vw,3.4rem);}
h2{font-size:clamp(1.4rem,2.6vw,2rem);}
h3{font-size:1.15rem;}
p{margin:0 0 1em;}
a{color:var(--teal);text-decoration:none;}
a:hover{color:var(--rust);}
.container{max-width:var(--max);margin:0 auto;padding:0 24px;}
.mono{font-family:'IBM Plex Mono',monospace;}
img{max-width:100%;display:block;}
button, input, select{font-family:inherit;}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:3px solid var(--mustard);
  outline-offset:2px;
}

/* ============ SKIP LINK ============ */
.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--mustard); color:var(--ink); padding:10px 16px; z-index:200;
}
.skip-link:focus{left:16px; top:16px;}

/* ============ HEADER / NAV ============ */
.site-header{
  background:var(--ink);
  border-bottom:3px solid var(--mustard);
  position:sticky; top:0; z-index:100;
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; max-width:var(--max); margin:0 auto;
}
.logo{
  font-family:'Oswald',sans-serif;
  font-size:1.35rem; font-weight:700; color:var(--paper);
  text-transform:uppercase; letter-spacing:.04em;
  display:flex; align-items:center; gap:8px;
}
.logo span{color:var(--mustard);}
.logo .tag-mark{
  display:inline-block;width:10px;height:10px;background:var(--mustard);
  transform:rotate(45deg);
}
nav.main-nav{display:flex; align-items:center;}
.main-nav ul{list-style:none; display:flex; gap:6px; margin:0; padding:0;}
.main-nav > ul > li{position:relative;}
.main-nav a{
  color:var(--paper); font-size:.92rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.03em;
  padding:10px 14px; display:block; border-radius:var(--radius);
}
.main-nav > ul > li > a:hover, .main-nav > ul > li > a[aria-expanded="true"]{
  background:var(--teal-2); color:var(--mustard);
}
.has-submenu > a::after{content:" ▾"; font-size:.7em;}
.submenu{
  list-style:none; margin:0; padding:8px; position:absolute; top:100%; left:0;
  background:var(--paper); border:1px solid var(--line); border-top:3px solid var(--mustard);
  min-width:260px; box-shadow:0 12px 24px rgba(0,0,0,.18);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.submenu li a{
  color:var(--ink); font-weight:500; text-transform:none; letter-spacing:0;
  padding:9px 10px; font-size:.92rem;
}
.submenu li a:hover{background:var(--paper-2); color:var(--rust);}
.submenu .sub-desc{display:block; font-size:.76rem; color:#6b6252; font-weight:400;}

.nav-toggle{
  display:none; background:none; border:2px solid var(--paper); color:var(--paper);
  padding:8px 10px; font-size:1.1rem; cursor:pointer; border-radius:var(--radius);
}

@media (max-width:920px){
  .nav-toggle{display:block;}
  nav.main-nav{
    position:absolute; top:100%; left:0; right:0; background:var(--ink);
    border-top:1px solid var(--teal-2); max-height:0; overflow:hidden;
    transition:max-height .25s ease;
  }
  nav.main-nav.open{max-height:1200px;}
  .main-nav ul{flex-direction:column; gap:0; padding:10px 24px 20px;}
  .submenu{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    display:none; border-top:1px solid var(--line); margin-top:4px;
  }
  .has-submenu.open .submenu{display:block;}
  .has-submenu > a::after{float:right;}
}

/* ============ HERO ============ */
.hero{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 18px),
    linear-gradient(180deg, var(--teal), var(--ink));
  color:var(--paper);
  padding:80px 24px 70px;
  border-bottom:6px solid var(--mustard);
}
.hero-inner{max-width:var(--max); margin:0 auto;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono',monospace; font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mustard); border:1px solid var(--mustard);
  padding:5px 10px; margin-bottom:18px;
}
.hero h1{color:var(--paper); max-width:820px;}
.hero .lede{max-width:640px; font-size:1.1rem; color:#D9E4E1;}
.hero-ctas{display:flex; gap:14px; margin-top:26px; flex-wrap:wrap;}

.btn{
  display:inline-block; padding:13px 24px; font-weight:700; font-size:.92rem;
  text-transform:uppercase; letter-spacing:.04em; border-radius:var(--radius);
  border:2px solid transparent; cursor:pointer;
}
.btn-primary{background:var(--mustard); color:var(--ink);}
.btn-primary:hover{background:#f0b559; color:var(--ink);}
.btn-outline{background:transparent; color:var(--paper); border-color:var(--paper);}
.btn-outline:hover{background:var(--paper); color:var(--ink);}

/* ============ SECTIONS ============ */
section{padding:64px 24px;}
.section-head{max-width:680px; margin-bottom:36px;}
.section-head .eyebrow{color:var(--rust); border-color:var(--rust);}

/* ============ TOOL CARD GRID ============ */
.tool-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:20px;
  max-width:var(--max); margin:0 auto;
}
.tool-card{
  background:var(--paper); border:1px solid var(--line); position:relative;
  padding:22px 20px 20px; transition:transform .15s ease, box-shadow .15s ease;
}
.tool-card::before{
  content:""; position:absolute; top:10px; right:10px; width:12px; height:12px;
  border:2px solid var(--line); border-radius:50%;
}
.tool-card:hover{transform:translateY(-3px); box-shadow:0 10px 22px rgba(20,37,36,.14); border-color:var(--mustard);}
.tool-card .tag-no{
  font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--rust);
  letter-spacing:.08em; margin-bottom:10px; display:block;
}
.tool-card h3{margin-bottom:8px;}
.tool-card p{font-size:.92rem; color:#3c463f; margin-bottom:14px;}
.tool-card .btn{padding:9px 16px; font-size:.8rem;}

/* ============ TOOL WORKSPACE (inside tool pages) ============ */
.tool-workspace{
  background:var(--ink); color:var(--paper);
  padding:44px 24px; border-top:4px solid var(--mustard); border-bottom:4px solid var(--mustard);
}
.workspace-inner{max-width:900px; margin:0 auto; background:var(--teal); padding:28px; border:1px solid var(--teal-2);}
.workspace-inner h2{color:var(--paper);}
.field-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:18px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; color:var(--mustard); font-weight:600;}
.field input, .field select, .field textarea{
  background:var(--paper); border:1px solid var(--line); padding:10px 12px;
  font-family:'IBM Plex Mono',monospace; font-size:.95rem; color:var(--ink); border-radius:var(--radius);
}
.results{
  margin-top:22px; background:var(--ink); padding:20px; border-left:4px solid var(--mustard);
}
.results .result-row{
  display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--teal-2);
  font-family:'IBM Plex Mono',monospace; font-size:.95rem;
}
.results .result-row:last-child{border-bottom:none;}
.results .result-row .val{color:var(--mustard); font-weight:600;}
.results .result-row.highlight .val{color:#8FE3A0;}
.results .result-row.warn .val{color:#f08a6c;}
.tool-note{font-size:.82rem; color:#c9d3ce; margin-top:14px;}

/* ============ BREADCRUMB ============ */
.breadcrumb{
  font-family:'IBM Plex Mono',monospace; font-size:.8rem; color:#6b6252;
  padding:14px 24px; border-bottom:1px solid var(--line); background:var(--paper-2);
}
.breadcrumb .container{padding:0;}
.breadcrumb a{color:var(--teal);}

/* ============ FAQ ============ */
.faq-item{border-bottom:1px solid var(--line); padding:16px 0;}
.faq-item h3{margin-bottom:6px; font-size:1rem; text-transform:none; letter-spacing:0; color:var(--ink); font-family:'Inter'; font-weight:700;}
.faq-item p{color:#3c463f; font-size:.95rem; margin:0;}

/* ============ GENERIC CONTENT BLOCKS ============ */
.content-block{max-width:780px; margin:0 auto;}
.content-block h2{margin-top:1.4em;}
.content-block ul, .content-block ol{padding-left:1.3em;}
.callout{
  background:var(--paper-2); border-left:4px solid var(--rust); padding:16px 18px; margin:22px 0;
  font-size:.94rem;
}
.related-tools{
  max-width:var(--max); margin:0 auto; display:flex; gap:14px; flex-wrap:wrap;
}
.related-tools a{
  border:1px solid var(--line); padding:8px 14px; font-size:.85rem; font-weight:600;
  background:var(--paper);
}
.related-tools a:hover{border-color:var(--mustard); color:var(--rust);}

/* ============ ABOUT / CONTACT ============ */
.split{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; max-width:var(--max); margin:0 auto; align-items:start;}
@media (max-width:800px){.split{grid-template-columns:1fr;}}
.contact-form{display:flex; flex-direction:column; gap:14px; background:var(--paper-2); padding:26px; border:1px solid var(--line);}
.contact-form label{font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; font-weight:600;}
.contact-form input, .contact-form textarea{
  padding:11px 12px; border:1px solid var(--line); font-family:'Inter'; border-radius:var(--radius);
}
.stat-row{display:flex; gap:30px; flex-wrap:wrap; margin:26px 0;}
.stat{font-family:'IBM Plex Mono',monospace;}
.stat .num{font-size:2rem; color:var(--rust); font-weight:600; display:block;}
.stat .label{font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:#6b6252;}

/* ============ FOOTER ============ */
.site-footer{background:var(--ink); color:#c9d3ce; padding:50px 24px 26px; margin-top:40px;}
.footer-grid{
  max-width:var(--max); margin:0 auto; display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; padding-bottom:30px; border-bottom:1px solid var(--teal-2);
}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-grid h4{color:var(--mustard); font-size:.85rem; letter-spacing:.06em;}
.footer-grid ul{list-style:none; margin:0; padding:0;}
.footer-grid li{margin-bottom:8px;}
.footer-grid a{color:#c9d3ce; font-size:.9rem;}
.footer-grid a:hover{color:var(--mustard);}
.footer-bottom{
  max-width:var(--max); margin:18px auto 0; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:10px; font-size:.8rem; color:#8b9691;
}