/* Incoterms guide; shared header, palette and typography are in base.css. */
.hero-guide { padding: 46px 0 50px; background: var(--navy); color: #fff; }
.hero-guide .eyebrow { color: #d6dff0; }
.hero-guide p { color: #dbe3f0; max-width: 740px; font-size: 18px; margin: 0; }
.crumb { font-size: 14px; color: #d3dced; margin-bottom: 25px; }
.crumb a { text-decoration: underline; text-underline-offset: 3px; }
.layout { display: grid; grid-template-columns: 220px 1fr; gap: 65px; padding: 48px 0 60px; }
.contents { position: sticky; top: calc(var(--header-height) + 28px); align-self: start; }
.contents strong { display: block; margin-bottom: 12px; }
.contents a { display: block; padding: 10px 0; font-size: 14px; border-bottom: 1px solid var(--line); }
.contents a:hover { color: var(--accent); text-decoration: underline; }
.group { margin-bottom: 42px; }
.layout p { color: var(--muted); }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 25px; }
.jump a { color: var(--accent); border: 1px solid #c4cede; border-radius: 4px; padding: 6px 12px; font-size: 14px; font-weight: 600; }
.jump a:hover { background: var(--trade-bg); border-color: var(--accent); }
.term { padding: 25px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 75px 1fr; gap: 20px; }
.code { color: var(--accent); font-size: 23px; font-weight: 700; }
.term p { margin: 0; }
.notice { background: var(--trade-bg); border-left: 3px solid var(--accent); padding: 21px 24px; margin: 25px 0; }
.notice p { margin: 0; }
.legacy { background: var(--surface); border: 1px solid var(--line); padding: 28px; }
.legacy .term:last-child { padding-bottom: 0; }
.badge { color: var(--muted); display: block; font-size: 13px; margin-bottom: 8px; }
.cta { background: var(--navy); color: #fff; padding: 32px; margin-top: 40px; }
.cta p { color: #dbe3f0; }
.cta .btn { color: var(--accent); background: #fff; border-color: #fff; }
.cta .btn:hover { background: #e7ecf4; }
.sources { margin-top: 28px; }
.sources p { font-size: 14px; }
.sources a { color: var(--accent); text-decoration: underline; }
@media (max-width: 850px) {
    .layout { grid-template-columns: 1fr; gap: 30px; padding-top: 30px; }
    .contents { position: static; }
    .contents a { display: inline-block; margin-right: 16px; }
    .hero-guide { padding: 35px 0 40px; }
    .term { grid-template-columns: 60px 1fr; gap: 15px; }
    .legacy { padding: 22px; }
    .cta { padding: 25px; }
}