/* Incoterms 2010 vs 2020 — site editorial layout.
   Palette and typography follow FreightClassCalculator.tools Fuel Surcharge page.
   No SaaS-style cards, pill navigation, or raised quick-link buttons. */
@font-face { font-family: Inter; src: url('/assets/fonts/inter-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url('/assets/fonts/inter-medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Inter; src: url('/assets/fonts/inter-semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Inter; src: url('/assets/fonts/inter-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
:root { --text: #222222; --heading: #173b63; --link: #1769aa; --border: #d8dfe5; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--text); font: 400 16px/1.65 Inter, system-ui, sans-serif; }
a { color: var(--link); }
a:hover { color: #075b9a; }
a:focus-visible, button:focus-visible { outline: 3px solid #2f88ef; outline-offset: 2px; }
button { font-family: inherit; }
[hidden] { display: none !important; }
.comparison-page { max-width: 1280px; margin: 0 auto; padding: 25px 16px 64px; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 13px; }
.breadcrumbs a { color: #526f84; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--heading); font-weight: 600; }
.comparison-page h1, .comparison-page h2, .comparison-page h3 { color: var(--heading); line-height: 1.25; letter-spacing: -.02em; }
.comparison-page h1 { font-size: clamp(30px, 4vw, 43px); font-weight: 700; margin: 0 0 17px; }
.comparison-page h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 700; margin: 0 0 13px; }
.comparison-page h3 { font-size: 19px; font-weight: 700; margin: 24px 0 9px; }
.comparison-page p { margin: 0 0 16px; }
.hero { padding: 10px 0 21px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #1769aa; margin: 0 0 11px; }
.lede { max-width: 940px; font-size: 18px; line-height: 1.65; color: var(--text); }
.comparison-toc { padding: 18px 0 20px; margin: 8px 0 37px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.comparison-toc .comparison-toc__title { margin: 0 0 12px; font-size: 20px; letter-spacing: 0; }
.comparison-toc ol { margin: 0; padding-left: 24px; columns: 2; column-gap: 44px; }
.comparison-toc li { break-inside: avoid; margin: 0 0 8px; padding-left: 3px; }
.comparison-toc a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.section { margin: 0 0 44px; scroll-margin-top: 20px; }
.section + .section { padding-top: 31px; border-top: 1px solid var(--border); }
.section-intro { max-width: none; color: var(--text); }
.callout { margin: 19px 0; padding: 12px 16px; border-left: 4px solid #1485d5; background: #fff; }
.callout strong { color: var(--heading); }
/* Readable reference tables: white rows, black copy, original site blue headers. */
.table-frame { width: 100%; margin: 18px 0 14px; overflow-x: auto; background: #fff; border: 1px solid #d8dfe5; border-radius: 14px 14px 0 0; }
.comparison-page table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; table-layout: auto; font-size: 16px; line-height: 1.55; color: #222; background: #fff; }
.comparison-page th, .comparison-page td { padding: 14px 16px; text-align: left; vertical-align: top; border-right: 1px solid #d8dfe5; border-bottom: 1px solid #d8dfe5; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.comparison-page tr > :last-child { border-right: 0; }
.comparison-page tbody tr:last-child > * { border-bottom: 0; }
.comparison-page thead th { background: linear-gradient(180deg,#1689fa 0%,#086ddd 100%); color: #fff; font-size: 16px; font-weight: 700; line-height: 1.3; padding: 16px; }
.comparison-page tbody tr, .comparison-page tbody tr:nth-child(even), .comparison-page tbody tr:nth-child(odd) { background: #fff; }
.comparison-page tbody td { background: #fff; color: #222; font-weight: 400; }
.comparison-page tbody td:first-child { font-weight: 600; color: #222; }
.table-tall { min-width: 1220px !important; }
.table-tall th:nth-child(1), .table-tall th:nth-child(2) { width: 16%; }
.table-tall th:nth-child(3) { width: 10%; }
.table-tall th:nth-child(4) { width: 29%; }
.table-tall th:nth-child(5) { width: 29%; }
.seven-table { min-width: 1220px !important; }
.seven-table th:nth-child(1), .seven-table th:nth-child(5) { width: 6%; }
.seven-table th:nth-child(2) { width: 18%; }
.seven-table th:nth-child(3) { width: 32%; }
.seven-table th:nth-child(4) { width: 38%; }
.table-note, .smallprint { font-size: 13px; color: #526f84; }
.contracts, .sources { padding-left: 23px; }
.contracts li, .sources li { margin-bottom: 10px; }
.sources { font-size: 14px; }
.related { display: block; margin: 12px 0; }
.related a { display: block; padding: 10px 0; border-bottom: 1px solid var(--border); font-weight: 700; text-decoration: underline; }
.related a span { display: block; font-size: 13px; font-weight: 400; color: #526f84; text-decoration: none; }
@media (max-width: 700px) {
  .comparison-page { padding: 18px 16px 45px; }
  .comparison-toc ol { columns: 1; }
  .comparison-page table { font-size: 15px; }
  .comparison-page th, .comparison-page td { padding: 12px; }
}
@media print {
  .gs-nav, .fcc-footer, .comparison-toc, .related { display: none !important; }
  .comparison-page { max-width: none; padding: 0; }
  .table-frame { overflow: visible; }
  .comparison-page table { min-width: 0; font-size: 10px; }
  tr { break-inside: avoid; }
}

/* Freight site navigation & footer — adapted from the Fuel Surcharge page. */
.fcc-site-nav{background:#fff;border-bottom:1px solid #cfe0ea;color:#294968;font-family:Inter,system-ui,sans-serif}
.fcc-site-nav__container{max-width:1280px;margin:auto;padding:0 16px}
.fcc-site-nav__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0}
.fcc-site-nav__row>a{display:inline-flex;min-width:0;align-items:center}
.fcc-site-nav__row>a img{width:275px;max-width:100%;height:auto;display:block}
.fcc-site-nav__desktop{display:flex;align-items:center;gap:20px;font-size:14px;font-weight:600}
.fcc-site-nav__desktop>a,.fcc-site-nav__desktop button{text-decoration:none;color:#334155;white-space:nowrap}
.fcc-site-nav__desktop>a:hover,.fcc-site-nav__desktop button:hover{color:#1769aa}
.fcc-site-nav__desktop>div{position:relative}
.fcc-site-nav #moreCalculatorsButton{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;font-weight:600;cursor:pointer;padding:10px 2px}
.fcc-site-nav #moreCalculatorsButton svg{height:16px;width:16px;transition:transform .2s}
.fcc-site-nav #moreCalculatorsButton svg.rotate-180{transform:rotate(180deg)}
.fcc-site-nav__dropdown{position:absolute;right:0;top:100%;z-index:50;width:320px;max-height:min(75vh,640px);overflow-y:auto;background:#fff;border:1px solid #cfe0ea;border-radius:16px;padding:8px;box-shadow:0 16px 28px rgba(15,23,42,.16)}
.fcc-site-nav__dropdown[hidden],.fcc-site-nav__mobile[hidden],.freight-mobile-group__links[hidden]{display:none!important}
.fcc-site-nav__dropdown-item{padding:8px 12px;border-radius:12px}
.fcc-site-nav__dropdown-item:hover{background:#eef7fb}
.fcc-site-nav__dropdown-item a{display:block;text-decoration:none;font-size:14px;font-weight:700;color:#173b63}
.fcc-site-nav__dropdown-item a:hover{color:#1769aa}
.fcc-site-nav__dropdown-item p{font-size:12px;line-height:1.55;font-weight:600;color:#61788d;margin:4px 0 0}
.fcc-site-nav #mobileMenuButton{display:none;width:44px;height:44px;flex:none;align-items:center;justify-content:center;border:1px solid #bcd4e2;border-radius:12px;background:#f4f9fc;color:#1769aa;cursor:pointer}
.fcc-site-nav #mobileMenuButton svg{width:24px;height:24px}
.fcc-site-nav__mobile{border-top:1px solid #d5e4ec;padding:12px 0}
.fcc-site-nav__mobile>div{display:grid;gap:8px;font-size:14px;font-weight:700}
.fcc-site-nav__mobile .freight-mobile-group__toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:10px 14px;border:1px solid #cfe0ea;border-radius:12px;background:#f4f9fc;color:#173b63;text-align:left;cursor:pointer;font-weight:700}
.fcc-site-nav__mobile .freight-mobile-group__chevron{width:20px;height:20px;transition:transform .2s}
.fcc-site-nav__mobile [aria-expanded="true"] .freight-mobile-group__chevron{transform:rotate(180deg)}
.fcc-site-nav__mobile .freight-mobile-group__links{display:grid;padding:5px 10px}
.fcc-site-nav__mobile .freight-mobile-group__links a,.fcc-site-nav__mobile .freight-mobile-lookup{display:block;padding:12px 14px;min-height:44px;text-decoration:none;color:#294968;border-radius:8px}
.fcc-site-nav__mobile .freight-mobile-group__links a:hover,.fcc-site-nav__mobile .freight-mobile-lookup:hover{background:#eef7fb;color:#1769aa}
.fcc-site-nav button:focus-visible,.fcc-site-nav a:focus-visible,.fcc-footer a:focus-visible{outline:3px solid #2f88ef;outline-offset:3px}
.fcc-footer{margin-top:32px;width:100%;border-top:1px solid #dbe8f0;background:#fff;padding:48px 16px 40px;color:#526f84;font-family:Inter,system-ui,sans-serif;text-align:center}
.fcc-footer>div{max-width:1152px;margin:auto}
.fcc-footer .flex.justify-center{display:flex;justify-content:center}
.fcc-footer img{height:64px;width:64px;object-fit:cover;border-radius:16px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.fcc-footer .text-center>p:nth-of-type(1){margin:20px 0 0;font-size:18px;font-weight:700;color:#173b63}
.fcc-footer .text-center>p:nth-of-type(2){margin:12px auto 0;max-width:768px;font-size:14px;font-weight:600;line-height:1.5}
.fcc-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 28px}
.fcc-footer .text-center>nav{margin-top:28px}
.fcc-footer nav a{font-size:14px;font-weight:700;text-decoration:none;color:#526f84}
.fcc-footer nav a:hover{color:#1769aa}
.fcc-footer>div>div:last-child{margin-top:32px;display:flex;flex-direction:column;align-items:center;gap:20px;border-top:1px solid #e4edf2;padding-top:24px}
.fcc-footer>div>div:last-child p{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.fcc-footer>div>div:last-child p a{font-weight:700;text-decoration:underline;color:#173b63}
.fcc-footer>div>div:last-child nav a{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#61788d}
@media(min-width:640px){.fcc-site-nav__container{padding:0 24px}.fcc-site-nav__row>a img{width:360px}}
@media(min-width:1024px){.fcc-site-nav__container{padding:0 32px}}
@media(max-width:767px){.fcc-site-nav__desktop{display:none}.fcc-site-nav #mobileMenuButton{display:inline-flex}}

/* Footer legal row — match Fuel Surcharge typography.
   More specific than the introductory .text-center paragraph rule. */
.fcc-footer > div > div:last-child.text-center > p:first-of-type {
  margin: 0;
  color: #526f84;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.fcc-footer > div > div:last-child.text-center > p:first-of-type a {
  color: #173b63;
  font-size: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.fcc-footer > div > div:last-child.text-center > nav a {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #61788d;
  text-transform: uppercase;
}


/* Comparison tables: visible section subheadings, accessible nonvisual captions. */
.comparison-page .comparison-table-heading {
  margin: 26px 0 12px;
  color: #173b63;
  font-size: clamp(20px, 2vw, 23px);
  line-height: 1.3;
  font-weight: 700;
}
.comparison-page .visually-hidden-caption {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}
/* Match the established bulb-card pattern used on the Incoterms meaning article. */
.comparison-page .comparison-bulb-card {
  display: flex; align-items: flex-start; gap: 16px;
  margin: 22px 0; padding: 19px 21px;
  border: 1px solid #e4bd54; border-left: 5px solid #e2a91f;
  border-radius: 13px; background: #fefaef; color: #222222;
}
.comparison-page .comparison-bulb-icon { flex: none; font-size: 26px; line-height: 1.2; }
.comparison-page .comparison-bulb-body { min-width: 0; }
.comparison-page .comparison-bulb-card h3 {
  margin: 0 0 7px; color: #173b63; font-size: 18px;
  font-weight: 700; line-height: 1.4;
}
.comparison-page .comparison-bulb-card p { margin: 0; line-height: 1.7; color: #222222; }
@media (max-width:600px) {
 .comparison-page .comparison-bulb-card { gap: 10px; padding: 15px 13px; }
 .comparison-page .comparison-bulb-card h3 { font-size: 16px; }
}

/* Match the site header and article gutters at every viewport width. */
@media (min-width: 640px) {
  .comparison-page { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1024px) {
  .comparison-page { padding-left: 32px; padding-right: 32px; }
}

/* Readable notes beneath comparison sections. */
.comparison-page .comparison-helper {
    margin: 12px 0 16px;
    color: #222;
    font-size: 15px;
    line-height: 1.6;
}

/* Keep the registered mark proportional in page headings. */
.comparison-page h1 .registered-mark,
.comparison-page h2 .registered-mark,
.comparison-page h3 .registered-mark {
    font-size: 0.46em;
    font-weight: 500;
    line-height: 0;
    vertical-align: super;
}


/* Related resources grid: adapted without changing chart or explorer styles. */
/* FOB Related Shipping Resources: four-card SVG version of approved Incoterms design. */
.comparison-page .fob-related-grid{margin:32px 0 28px;padding:24px;border:1px solid #d8e5f1;border-radius:26px;background:linear-gradient(125deg,#fff 0%,#f7fbff 58%,#eaf5fc 100%);box-shadow:0 6px 16px rgba(18,63,107,.08)}
.comparison-page .fob-related-grid__heading{display:flex;align-items:center;gap:22px;margin-bottom:22px;min-width:0}
.comparison-page .fob-related-grid__mark{display:grid;place-items:center;width:66px;height:66px;flex:none;border-radius:14px;background:linear-gradient(145deg,#2a8c63,#00613d)}
.comparison-page .fob-related-grid__mark svg{width:43px;height:43px}
.comparison-page .fob-related-grid__heading-copy{padding-left:22px;border-left:2px solid #37637e;min-width:0}
.comparison-page .fob-related-grid__heading h2{margin:0 0 6px;color:#092935;font-size:clamp(25px,2.65vw,34px);font-weight:800;line-height:1.15}
.comparison-page .fob-related-grid__heading p{margin:0;color:#283b50;font-size:clamp(15px,1.45vw,18px);line-height:1.4}
.comparison-page .fob-related-grid__cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.comparison-page .fob-related-grid__card{display:grid;grid-template-columns:126px minmax(0,1fr) 34px;align-items:center;gap:13px;min-width:0;min-height:132px;padding:13px;border:1.5px solid #adcaf0;border-radius:17px;background:linear-gradient(115deg,#fff,#eff8fe);text-decoration:none;color:#293848}
.comparison-page .fob-related-grid__illustration{display:block;width:126px;min-width:0}
.comparison-page .fob-related-grid__illustration svg{display:block;width:100%;height:auto}
.comparison-page .fob-related-grid__copy{display:flex;flex-direction:column;min-width:0;gap:6px;padding-left:12px;border-left:2px solid #b6d2ed}
.comparison-page .fob-related-grid__copy strong{font-size:clamp(18px,1.65vw,22px);line-height:1.25;color:#0a3181;font-weight:800}
.comparison-page .fob-related-grid__copy>span:not(.fob-related-grid__action){font-size:15px;line-height:1.45;color:#293848}
.comparison-page .fob-related-grid__arrow{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#11784c;color:white;justify-self:end}
.comparison-page .fob-related-grid__arrow svg{width:20px;height:20px}
.comparison-page .fob-related-grid__action{display:none}
.comparison-page .fob-related-grid__card:hover{background:#f3faff;border-color:#3f88cb}
.comparison-page .fob-related-grid__card:hover strong{text-decoration:underline;text-underline-offset:3px}
.comparison-page .fob-related-grid__card:focus-visible{outline:3px solid #0878dd;outline-offset:3px}
@media(max-width:1050px){.comparison-page .fob-related-grid__card{grid-template-columns:98px minmax(0,1fr) 30px;gap:9px;padding:10px}.comparison-page .fob-related-grid__illustration{width:98px}.comparison-page .fob-related-grid__copy{padding-left:10px}.comparison-page .fob-related-grid__copy strong{font-size:18px}.comparison-page .fob-related-grid__copy>span:not(.fob-related-grid__action){font-size:14px}}
@media(max-width:760px){.comparison-page .fob-related-grid{padding:18px 14px;border-radius:20px}.comparison-page .fob-related-grid__cards{grid-template-columns:1fr;gap:10px}.comparison-page .fob-related-grid__card{grid-template-columns:104px minmax(0,1fr);min-height:108px;gap:10px;padding:10px}.comparison-page .fob-related-grid__illustration{width:104px}.comparison-page .fob-related-grid__arrow{display:none}.comparison-page .fob-related-grid__action{display:inline-flex;align-self:flex-start;gap:8px;margin-top:3px;padding:6px 12px;border-radius:8px;background:#11784c;color:#fff;font-size:12px;font-weight:800;line-height:1.2}.comparison-page .fob-related-grid__heading{gap:13px;margin-bottom:16px}.comparison-page .fob-related-grid__mark{width:50px;height:50px;border-radius:11px}.comparison-page .fob-related-grid__mark svg{width:33px;height:33px}.comparison-page .fob-related-grid__heading-copy{padding-left:13px}.comparison-page .fob-related-grid__heading h2{font-size:23px}.comparison-page .fob-related-grid__heading p{font-size:14px}}
@media(max-width:390px){.comparison-page .fob-related-grid{padding:14px 10px}.comparison-page .fob-related-grid__card{grid-template-columns:80px minmax(0,1fr);gap:8px;padding:8px}.comparison-page .fob-related-grid__illustration{width:80px}.comparison-page .fob-related-grid__copy{padding-left:8px}.comparison-page .fob-related-grid__copy strong{font-size:16px}.comparison-page .fob-related-grid__copy>span:not(.fob-related-grid__action){font-size:13px}.comparison-page .fob-related-grid__heading h2{font-size:20px}}

/* Contextual editorial links added to the 2010 vs 2020 comparison. */
.comparison-page #rule-comparison .section-intro a[href="/incoterms-2020#chart"],
.comparison-page #rule-comparison .comparison-bulb-card a[href="/incoterms-2020-cost-and-risk-tool#incoterms-cost-and-risk-chart"] {
  color: #0759a3;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}