/* =========================================================
   ShipIn Logistics — Design System
   Direction: "Manifest" — shipping paperwork made confident.
   Ink navy + signal orange, stencil data bands, monospace figures.
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Colour */
  --ink:        #0B2A3F;   /* hull navy — headings, dark sections */
  --ink-soft:   #143C56;   /* hover / secondary dark */
  --signal:     #E8590C;   /* container stencil orange — accent, CTA */
  --signal-dk:  #C4490A;
  --paper:      #F5F6F4;   /* manifest paper — page bg */
  --paper-2:    #FFFFFF;
  --steel:      #5B6B78;   /* body secondary */
  --line:       #D6DCE0;
  --line-soft:  #E7ECEF;
  --verify:     #0F7B5F;   /* verified / cleared */
  --warn-bg:    #FFF4E8;

  /* Type */
  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Archivo', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Scale */
  --t-xs:  0.75rem;
  --t-sm:  0.875rem;
  --t-base:1rem;
  --t-lg:  1.125rem;
  --t-xl:  1.375rem;
  --t-2xl: 1.75rem;
  --t-3xl: 2.25rem;
  --t-4xl: 3rem;
  --t-5xl: 4rem;

  /* Space */
  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4rem;
  --s9: 6rem;   --s10: 8rem;

  --wrap: 1200px;
  --wrap-narrow: 780px;
  --radius: 3px;         /* almost none — this is paperwork, not a SaaS card */
  --shadow: 0 1px 2px rgba(11,42,63,.06), 0 8px 24px rgba(11,42,63,.06);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  font-size:var(--t-base);
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--display);line-height:1.1;letter-spacing:-.02em;font-weight:800}
p{margin:0 0 var(--s4)}
ul{margin:0;padding:0;list-style:none}

/* Accessibility floor */
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s4);top:var(--s4);z-index:999;background:var(--ink);color:#fff;padding:var(--s3) var(--s4)}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- 3. LAYOUT ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s5)}
.wrap-narrow{max-width:var(--wrap-narrow)}
.section{padding-block:var(--s9)}
.section--tight{padding-block:var(--s7)}
.section--dark{background:var(--ink);color:#fff}
.section--dark h2,.section--dark h3{color:#fff}
.section--paper2{background:var(--paper-2)}

.grid{display:grid;gap:var(--s5)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- 4. TYPE UTILITIES ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:var(--t-xs);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--signal);
  font-weight:500;
  display:flex;align-items:center;gap:var(--s3);
  margin-bottom:var(--s3);
}
.eyebrow::before{
  content:"";width:22px;height:2px;background:var(--signal);flex:none;
}
.section--dark .eyebrow{color:#FF8A4C}
.section--dark .eyebrow::before{background:#FF8A4C}

h1,.h1{font-size:clamp(2.25rem,5.4vw,var(--t-5xl))}
h2,.h2{font-size:clamp(1.75rem,3.6vw,var(--t-3xl));margin-bottom:var(--s4)}
h3,.h3{font-size:var(--t-xl);font-weight:700}
.lede{font-size:clamp(1.05rem,1.6vw,var(--t-lg));color:var(--steel);max-width:60ch}
.section--dark .lede{color:#B9C7D1}
.muted{color:var(--steel)}
.small{font-size:var(--t-sm)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ---------- 5. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:.85rem 1.5rem;
  font-weight:700;font-size:var(--t-sm);
  letter-spacing:.01em;
  border:2px solid transparent;border-radius:var(--radius);
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--signal);color:#fff;border-color:var(--signal)}
.btn--primary:hover{background:var(--signal-dk);border-color:var(--signal-dk)}
.btn--dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--dark:hover{background:var(--ink-soft);border-color:var(--ink-soft)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink);background:var(--paper-2)}
.section--dark .btn--ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.section--dark .btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--wa{background:#1FA855;color:#fff;border-color:#1FA855}
.btn--wa:hover{background:#178A45;border-color:#178A45}
.btn--lg{padding:1.05rem 1.9rem;font-size:var(--t-base)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* ---------- 6. HEADER ---------- */
.topbar{
  background:var(--ink);color:#B9C7D1;
  font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.05em;
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);min-height:34px}
.topbar a{color:#fff;white-space:nowrap}
.topbar-note{display:flex;gap:var(--s4);flex-wrap:wrap;min-width:0}
.topbar-note span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:760px){.topbar-note span:nth-child(n+2){display:none}}
/* Below this the strapline and the number cannot both sit on one line.
   The number wins — it is the only actionable thing in the bar. */
@media(max-width:430px){.topbar-note{display:none}.topbar .wrap{justify-content:flex-end}}

.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(245,246,244,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;gap:var(--s5);min-height:70px}

.logo{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.03em;color:var(--ink)}
.logo-mark{
  width:34px;height:34px;flex:none;border-radius:2px;
  background:var(--ink);color:#fff;
  display:grid;place-items:center;
  font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:-.04em;
  border-bottom:3px solid var(--signal);
}
.logo span.tail{color:var(--steel);font-weight:500}

.nav{display:flex;align-items:center;gap:var(--s5);margin-left:auto}
.nav a{font-size:var(--t-sm);font-weight:600;color:var(--ink);padding-block:.4rem;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--signal)}
.nav-cta{display:flex;gap:var(--s2);align-items:center}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:2px;padding:.5rem .7rem;margin-left:auto}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0}

@media(max-width:1000px){
  /* --nav-top is measured from the header's real rendered bottom edge in
     main.js. The header is sticky and the topbar above it scrolls away, so
     a fixed offset drifts the moment the page is scrolled. */
  .nav{
    position:fixed;inset:var(--nav-top,104px) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper-2);border-bottom:1px solid var(--line);
    padding:var(--s4) var(--s5) var(--s6);
    transform:translateY(-120%);transition:transform .25s ease;
    max-height:calc(100dvh - var(--nav-top,104px));overflow:auto;
    visibility:hidden;
  }
  .nav[data-open="true"]{transform:translateY(0);visibility:visible}
  .nav a{padding:.85rem 0;border-bottom:1px solid var(--line-soft)}
  .nav-cta{margin-top:var(--s4);flex-direction:column;align-items:stretch}
  .nav-cta .btn{justify-content:center}
  .nav-toggle{display:block}
  /* Stop the page scrolling behind an open menu. */
  body.nav-open{overflow:hidden}
}

/* ---------- 7. SIGNATURE: MANIFEST BAND ---------- */
/* Stencilled data strip drawn from container markings. Used under the hero
   and as a section divider. This is the page's memorable element. */
.manifest{
  background:var(--ink);
  border-top:2px solid var(--signal);
  overflow:hidden;
}
.manifest-track{
  display:flex;align-items:center;gap:var(--s6);
  font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.14em;text-transform:uppercase;
  color:#8FA6B5;
  padding:.85rem 0;
  white-space:nowrap;
}
.manifest .wrap{overflow:hidden}
.manifest-track b{color:#fff;font-weight:500}
.manifest-track em{color:var(--signal);font-style:normal}
.manifest-track .sep{color:#3A5A70}

/* The scroll distance is exactly one copy of the content plus one gap,
   measured in main.js. Animating a fixed percentage would drift, because
   duplicating N flex items yields 2N-1 gaps, not 2(N-1). */
@keyframes manifest-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-1 * var(--manifest-distance,0px)))}
}
.manifest-track.is-scrolling{
  animation:manifest-scroll var(--manifest-duration,30s) linear infinite;
  will-change:transform;
}
.manifest:hover .manifest-track.is-scrolling{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .manifest-track.is-scrolling{animation:none!important;transform:none!important}
  .manifest .wrap{overflow-x:auto}
}

/* ---------- 8. HERO ---------- */
.hero{
  position:relative;
  background:
    linear-gradient(180deg,rgba(245,246,244,0) 60%,var(--paper) 100%),
    repeating-linear-gradient(0deg,transparent 0 39px,var(--line-soft) 39px 40px),
    repeating-linear-gradient(90deg,transparent 0 39px,var(--line-soft) 39px 40px),
    var(--paper);
  padding-block:var(--s9) var(--s7);
  border-bottom:1px solid var(--line);
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s8);align-items:start}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:var(--s6)}}
.hero h1{margin-bottom:var(--s4)}
.hero h1 em{font-style:normal;color:var(--signal)}
.hero .lede{margin-bottom:var(--s5)}
.hero-actions{margin-bottom:var(--s5)}
.hero-proof{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.05em;
  color:var(--steel);text-transform:uppercase;
  padding-top:var(--s4);border-top:1px solid var(--line);
}
.hero-proof li{display:flex;align-items:center;gap:.4rem}
.hero-proof li::before{content:"✓";color:var(--verify);font-weight:700}

/* Hero side card — a route card styled like a bill of lading extract */
.route-card{
  background:var(--paper-2);border:1px solid var(--line);
  border-top:3px solid var(--signal);
  box-shadow:var(--shadow);
}
.route-card-head{
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--line-soft);
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
}
.route-card-head strong{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--steel);font-weight:500}
.route-card-body{padding:var(--s5)}
.route-leg{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.route-leg .port{flex:1}
.route-leg .port b{display:block;font-size:var(--t-lg);font-family:var(--display);font-weight:800;letter-spacing:-.02em}
.route-leg .port span{font-family:var(--mono);font-size:var(--t-xs);color:var(--steel);letter-spacing:.08em}
.route-leg .arrow{color:var(--signal);font-size:1.3rem;flex:none}
.route-rows{border-top:1px solid var(--line-soft);margin-top:var(--s4)}
.route-rows div{
  display:flex;justify-content:space-between;gap:var(--s3);
  padding:.6rem 0;border-bottom:1px solid var(--line-soft);
  font-size:var(--t-sm);
}
.route-rows dt,.route-rows span:first-child{color:var(--steel)}
.route-rows span:last-child{font-family:var(--mono);font-weight:500}

/* ---------- 9. CARDS ---------- */
.card{
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--s5);
  transition:border-color .16s ease,transform .16s ease;
  height:100%;
}
a.card:hover{border-color:var(--ink);transform:translateY(-2px)}
.card h3{margin-bottom:var(--s2)}
.card p{color:var(--steel);font-size:var(--t-sm);margin-bottom:0}
.card-tag{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--signal);display:block;margin-bottom:var(--s3);
}
.card-link{
  display:inline-block;margin-top:var(--s3);font-size:var(--t-sm);
  font-weight:700;color:var(--ink);border-bottom:2px solid var(--signal);
}

/* ---------- 10. PROCESS (numbered — real sequence) ---------- */
.steps{counter-reset:step;display:grid;gap:0}
.step{
  counter-increment:step;
  display:grid;grid-template-columns:76px 1fr;gap:var(--s5);
  padding:var(--s5) 0;border-top:1px solid var(--line);
}
.step:last-child{border-bottom:1px solid var(--line)}
.step::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--mono);font-size:var(--t-2xl);font-weight:500;
  color:var(--line);line-height:1;
}
.step[data-highlight="true"]::before{color:var(--signal)}
.step h3{margin-bottom:var(--s2)}
.step p{color:var(--steel);margin-bottom:0;max-width:62ch}
.step-tag{
  display:inline-block;margin-top:var(--s3);
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  background:var(--warn-bg);color:var(--signal-dk);padding:.3rem .6rem;border-radius:2px;
}
@media(max-width:620px){.step{grid-template-columns:48px 1fr;gap:var(--s4)}.step::before{font-size:var(--t-lg)}}

/* ---------- 11. TABLES ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:var(--t-sm);background:var(--paper-2)}
.tbl th,.tbl td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid var(--line-soft)}
.tbl thead th{
  background:var(--ink);color:#fff;font-family:var(--mono);
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;font-weight:500;
}
.tbl tbody tr:nth-child(even){background:#FAFBFA}
.tbl td.num,.tbl th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.tbl-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}

/* ---------- 12. FAQ ---------- */
.faq details{border-bottom:1px solid var(--line);padding:var(--s4) 0}
.faq summary{
  cursor:pointer;font-weight:700;font-size:var(--t-lg);list-style:none;
  display:flex;justify-content:space-between;gap:var(--s4);align-items:start;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--signal);font-size:1.4rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:var(--s3) 0 0;color:var(--steel);max-width:70ch}

/* ---------- 13. STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat b{display:block;font-family:var(--mono);font-size:var(--t-3xl);font-weight:500;letter-spacing:-.03em;color:var(--signal)}
.stat span{font-size:var(--t-sm);color:#B9C7D1;display:block;margin-top:var(--s1)}

/* ---------- 14. FORMS ---------- */
.field{margin-bottom:var(--s4)}
.field label{
  display:block;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;color:var(--steel);
  margin-bottom:.4rem;font-weight:500;
}
.field input,.field select,.field textarea{
  width:100%;padding:.7rem .8rem;font:inherit;font-size:var(--t-sm);
  background:var(--paper-2);color:var(--ink);
  border:1px solid var(--line);border-radius:2px;
}
.field input:focus,.field select:focus{border-color:var(--ink)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.field-hint{font-size:var(--t-xs);color:var(--steel);margin-top:.3rem;display:block}
@media(max-width:560px){.field-row{grid-template-columns:1fr}}

/* ---------- 15. FOOTER ---------- */
.site-footer{background:var(--ink);color:#B9C7D1;padding-block:var(--s8) var(--s5);font-size:var(--t-sm)}
.site-footer h4{color:#fff;font-size:var(--t-xs);font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin-bottom:var(--s4)}
.site-footer a{color:#B9C7D1}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.3fr;gap:var(--s6)}
@media(max-width:1080px){.footer-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}
.site-footer li{margin-bottom:.55rem}
.footer-legal{
  margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);justify-content:space-between;
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.06em;color:#7B92A2;
}

/* ---------- 16. FLOATING ACTIONS (mobile) ---------- */
.float-bar{display:none}
@media(max-width:760px){
  .float-bar{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:var(--line);border-top:1px solid var(--line);
  }
  .float-bar a{
    display:flex;align-items:center;justify-content:center;gap:.4rem;
    padding:.9rem;font-weight:700;font-size:var(--t-sm);
  }
  .float-bar .fb-call{background:var(--ink);color:#fff}
  .float-bar .fb-wa{background:#1FA855;color:#fff}
  body{padding-bottom:56px}
}

/* ---------- 17. MISC ---------- */
.divider-rule{height:1px;background:var(--line);border:0;margin:0}
.badge-verify{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.08em;
  color:var(--verify);text-transform:uppercase;font-weight:500;
}
.note{
  background:var(--warn-bg);border-left:3px solid var(--signal);
  padding:var(--s4) var(--s5);font-size:var(--t-sm);
}
.note strong{display:block;margin-bottom:.25rem}
.breadcrumb{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.08em;color:var(--steel);padding-block:var(--s4);text-transform:uppercase}
.breadcrumb a:hover{color:var(--signal)}
.page-head{padding-block:var(--s7) var(--s6);border-bottom:1px solid var(--line);background:var(--paper-2)}
.prose h2{margin-top:var(--s7)}
.prose h3{margin-top:var(--s5);margin-bottom:var(--s2)}
.prose ul{margin:0 0 var(--s4);padding-left:0}
.prose ul li{padding-left:1.4rem;position:relative;margin-bottom:.5rem;color:var(--steel)}
.prose ul li::before{content:"▸";position:absolute;left:0;color:var(--signal)}
.prose ol{margin:0 0 var(--s4);padding-left:1.4rem;color:var(--steel)}
.prose ol li{margin-bottom:.5rem}
.prose p{color:var(--steel)}
.prose > h2:first-child,.prose > h3:first-child{margin-top:0}
.prose a{color:var(--ink);border-bottom:1px solid var(--signal);font-weight:600}
.prose a:hover{color:var(--signal)}

/* ---------- 18. FORM VALIDATION + STATUS ---------- */
.field-error{
  display:block;margin-top:.35rem;
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.04em;
  color:var(--signal-dk);
}
.field.has-error input,.field.has-error select,.field.has-error textarea{
  border-color:var(--signal);background:var(--warn-bg);
}
.field textarea{min-height:120px;resize:vertical;line-height:1.6}
.field .req{color:var(--signal)}
.form-status{
  margin:var(--s4) 0 0;font-size:var(--t-sm);font-family:var(--mono);
  letter-spacing:.03em;min-height:1.4em;
}
.form-status[data-kind="ok"]{color:var(--verify)}
.form-status[data-kind="error"]{color:var(--signal-dk)}
.form-status[data-kind="info"]{color:var(--steel)}

/* ---------- 19. CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s7);align-items:start}
@media(max-width:940px){.contact-grid{grid-template-columns:1fr}}
.contact-block{border-top:1px solid var(--line);padding-top:var(--s4);margin-bottom:var(--s5)}
.contact-block h3{font-size:var(--t-base);margin-bottom:var(--s2)}
.contact-block p{color:var(--steel);font-size:var(--t-sm);margin-bottom:var(--s2)}
.contact-block .big{
  font-family:var(--mono);font-size:var(--t-xl);font-weight:500;
  letter-spacing:-.02em;color:var(--ink);display:block;
}

/* ---------- 20. COMPARISON TABLE ---------- */
/* Two honest columns side by side. Used on import-without-iec. */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
@media(max-width:760px){.compare{grid-template-columns:1fr}}
.compare-col{background:var(--paper-2);border:1px solid var(--line);padding:var(--s5)}
.compare-col--ours{border-top:3px solid var(--signal)}
.compare-col--theirs{border-top:3px solid var(--steel)}
.compare-col h3{margin-bottom:var(--s4)}
.compare-list li{
  padding-left:1.5rem;position:relative;margin-bottom:.6rem;
  font-size:var(--t-sm);color:var(--steel);
}
.compare-list li::before{position:absolute;left:0;font-weight:700}
.compare-list li[data-good]::before{content:"+";color:var(--verify)}
.compare-list li[data-bad]::before{content:"−";color:var(--signal)}
.compare-head{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel);
  margin:var(--s5) 0 var(--s3);padding-top:var(--s4);
  border-top:1px solid var(--line-soft);display:block;
}

/* ---------- 21. SMALL PARTS ---------- */
.pill{
  display:inline-block;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);padding:.25rem .55rem;border-radius:2px;
  color:var(--steel);margin:0 .3rem .3rem 0;
}
.checklist li{
  padding-left:1.6rem;position:relative;margin-bottom:.55rem;color:var(--steel);
}
.checklist li::before{content:"✓";position:absolute;left:0;color:var(--verify);font-weight:700}
.kv{border-top:1px solid var(--line)}
.kv div{
  display:flex;justify-content:space-between;gap:var(--s4);
  padding:.7rem 0;border-bottom:1px solid var(--line-soft);font-size:var(--t-sm);
}
.kv div span:first-child{color:var(--steel)}
.kv div span:last-child{font-family:var(--mono);font-weight:500;text-align:right}
.lead-in{font-size:var(--t-lg);color:var(--ink);font-weight:500;max-width:62ch}

/* ---------- 22. 404 ---------- */
.err-page{min-height:52vh;display:grid;place-items:center;text-align:center;padding-block:var(--s9)}
.err-code{
  font-family:var(--mono);font-size:clamp(4rem,14vw,8rem);line-height:1;
  color:var(--line);letter-spacing:-.04em;margin-bottom:var(--s4);
}

/* ---------- 23. PRINT ---------- */
/* An importer will print or PDF the cost estimate to show a partner. */
@media print{
  .topbar,.site-header,.float-bar,.manifest,.site-footer,
  .btn,.lc-cta,.breadcrumb,.skip{display:none!important}
  body{background:#fff;color:#000;padding-bottom:0;font-size:11pt}
  .section{padding-block:var(--s4)}
  .lc-grid{grid-template-columns:1fr!important;gap:var(--s4)!important}
  .lc-panel{border:1px solid #999;break-inside:avoid}
  .lc-result{position:static!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .note{border:1px solid #999;background:#fff}
}

/* =========================================================
   24. LANDED COST CALCULATOR
   Moved out of the page's inline <style> when the site became
   WordPress — the markup now comes from [shipin_calculator].
   ========================================================= */
.lc-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:start}
@media(max-width:940px){.lc-grid{grid-template-columns:1fr}}

.lc-panel{background:var(--paper-2);border:1px solid var(--line);border-top:3px solid var(--ink)}
.lc-panel-head{
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--line-soft);
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
}
.lc-panel-head strong{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);font-weight:500;
}
.lc-panel-body{padding:var(--s5)}

.lc-result{position:sticky;top:96px;border-top-color:var(--signal)}
@media(max-width:940px){.lc-result{position:static}}

.lc-empty{color:var(--steel);font-size:var(--t-sm);margin:0;padding:var(--s5) 0;text-align:center}

.lc-headline{padding-bottom:var(--s4);border-bottom:1px solid var(--line);margin-bottom:var(--s4)}
.lc-headline-label{
  display:block;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--steel);
}
.lc-headline-value{
  display:block;font-family:var(--mono);font-weight:500;
  font-size:clamp(2rem,5vw,2.75rem);letter-spacing:-.04em;color:var(--ink);line-height:1.1;margin:.25rem 0;
}
.lc-headline-meta{display:block;font-size:var(--t-sm);color:var(--steel)}

.lc-table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.lc-table td{padding:.55rem 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.lc-table td.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.lc-table tr.lc-total td{background:#F2F5F6;font-weight:700;padding-inline:.5rem}
.lc-hint{display:block;font-size:var(--t-xs);color:var(--steel);margin-top:.1rem}

.lc-note-line{font-size:var(--t-sm);color:var(--steel);margin:var(--s4) 0 0;padding-top:var(--s4);border-top:1px solid var(--line-soft)}

/* Caveats the estimate cannot resolve on its own. */
.lc-warn{background:var(--warn-bg);border-left:3px solid var(--signal);padding:var(--s3) var(--s4);margin-bottom:var(--s4)}
.lc-warn p{margin:0 0 .4rem;font-size:var(--t-sm);color:var(--signal-dk)}
.lc-warn p:last-child{margin-bottom:0}

.lc-cta{margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--line)}
.lc-cta p{font-size:var(--t-sm);color:var(--steel)}
.lc-fieldset{border:0;padding:0;margin:0 0 var(--s5)}
.lc-fieldset legend{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--signal);font-weight:500;padding:0;margin-bottom:var(--s4);
  display:block;width:100%;border-bottom:1px solid var(--line-soft);padding-bottom:.5rem;
}

/* =========================================================
   25. WORDPRESS
   Only what WordPress itself introduces. Nothing here changes
   the design — it keeps admin chrome and editor output from
   breaking it.
   ========================================================= */

/* Footer legal row: a menu renders as links, the design wants
   them separated by a middot on one line. */
.footer-legal-links a + a::before{content:" · ";color:#7B92A2}

/* Footer link columns come from wp_nav_menu, which wraps in <ul>. */
.site-footer .menu{margin:0;padding:0;list-style:none}

/* The admin bar is fixed at the top for logged-in users and would sit
   over the sticky header. */
.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){
  .admin-bar .site-header{top:46px}
}

/* Block editor escape hatches, so a pasted image or embed cannot
   blow out the layout. */
.wp-block-image img{height:auto}
.alignwide,.alignfull{max-width:100%}
.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Pagination on archive views. */
.pagination{margin-top:var(--s6);display:flex;gap:var(--s2);flex-wrap:wrap;font-family:var(--mono);font-size:var(--t-sm)}
.pagination .page-numbers{padding:.5rem .8rem;border:1px solid var(--line);background:var(--paper-2)}
.pagination .current{background:var(--ink);color:#fff;border-color:var(--ink)}