@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-bold.woff2") format("woff2");font-weight:700 900;font-display:swap}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f9fc;color:#173b63;font-family:Inter,system-ui,sans-serif;line-height:1.55}a{color:#1769aa}button{font:inherit} .site-header{background:white;border-bottom:1px solid #cfe0ea;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px max(20px,calc((100% - 1180px)/2));}.site-header img{display:block;max-width:min(320px,55vw);height:auto}.site-header>a:last-child{font-size:14px;font-weight:750}.chart-page{max-width:1220px;margin:0 auto;padding:24px 22px 55px}.breadcrumbs{font-size:13px;display:flex;flex-wrap:wrap;gap:10px;color:#526f84}.chart-page h1{font-size:clamp(30px,4vw,47px);color:#12325b;line-height:1.17;letter-spacing:-.025em;margin:17px 0 10px}.chart-intro{max-width:900px;font-size:17px;color:#294968}.chart-section,.explorer-section{scroll-margin-top:20px}.chart-section{background:white;border:1px solid #d9e5ed;border-radius:21px;padding:25px;margin:25px 0}.chart-section h2,.explorer-section>h2{font-size:clamp(24px,3vw,33px);color:#12325b;margin:0 0 10px}.chart-section>p,.explorer-section>p{margin:5px 0 20px;color:#365875}.chart-card{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,.75fr);gap:25px;align-items:center;border:1px solid #dbe8f0;border-radius:16px;padding:17px}.incoterms-master-figure{margin:0}.incoterms-master-figure img,.incoterms-master-figure picture{display:block;width:100%;height:auto}.incoterms-master-figure img{border:1px solid #dbe8f0;border-radius:9px}.incoterms-master-figure figcaption{margin-top:8px;font-size:12px;color:#526f84}.incoterms-chart-zoom-hint{display:none}.chart-actions{display:grid;gap:11px}.chart-actions h3{font-size:23px;margin:0;color:#12325b}.chart-actions p{margin:0 0 5px;color:#526f84}.action{display:block;text-align:center;padding:13px 15px;border:1px solid #1275db;border-radius:11px;font-size:16px;font-weight:800;text-decoration:none;cursor:pointer}.action.view{background:#0e73e8;color:white}.action.pending{background:#eff3f7;border-color:#d7e0e9;color:#6b7a88;cursor:not-allowed}.explorer-section{margin:30px 0}.incoterms-explorer{background:white;border:1px solid #d9e5ed;border-radius:20px;padding:18px;margin-top:20px;overflow:hidden}.incoterms-explorer .wrap{max-width:1100px;margin:0 auto}.legal-note{font-size:13px;color:#526f84;max-width:1000px;padding:12px 0}@media(max-width:940px){.chart-card{grid-template-columns:1fr}}@media(max-width:600px){.chart-page{padding:18px 12px}.chart-section{padding:15px}.chart-card{padding:10px}.incoterms-explorer{padding:12px 6px}.site-header{padding:12px}}

/* Existing explorer styles scoped to the explorer only. */
@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 900;font-display:swap}
.incoterms-explorer{
  --bg:#FFFFFF; --navy:#12325B; --ink:#173B63; --muted:#44607A; --line:#D4E2EF; --line-soft:#E3EDF6;
  --seller:#1769AA; --seller-bright:#2F88EF; --seller-soft:#EAF5FF; --seller-edge:#8EC7F6;
  --seller-grad:linear-gradient(100deg,#1D72D6,#1769AA);
  --brand-grad:linear-gradient(100deg,#0866DA,#1570E0 45%,#5D47EF);
  --buyer:#E9A714; --buyer-bright:#FFC54F; --buyer-soft:#FFF8E8; --buyer-ink:#8A5A00; --buyer-edge:#F1D781;
  --buyer-grad:linear-gradient(180deg,#FFC54F,#E9A714);
  --buyer-hatch:repeating-linear-gradient(135deg,#FFC54F 0 4px,#FFE7A6 4px 8px);
  --risk:#067A53; --risk-bright:#10B981; --risk-soft:#F1FFF8; --risk-edge:#35D594;
  --neutral-soft:#F4F7FA; --on-fill:#FFFFFF;
  --shadow:0 12px 30px rgba(24,78,126,.08);
  --shadow-sm:0 5px 16px rgba(18,50,91,.05);
  --f-display:"Inter", "Segoe UI", system-ui, sans-serif;
  --f-body:"Inter", "Segoe UI", system-ui, sans-serif;
  color-scheme:light;
}
.incoterms-explorer *{box-sizing:border-box}
.incoterms-explorer{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));padding-block:28px 40px}
.incoterms-explorer .wrap{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.incoterms-explorer h1{font-family:var(--f-display);font-weight:800;font-size:clamp(1.9rem,4.2vw,2.9rem);letter-spacing:-.025em;line-height:1.08;color:var(--navy);margin:10px 0 0;text-wrap:balance}
.incoterms-explorer .eyebrow{display:inline-block;margin:0;font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#0F5A96;background:#FFFFFF;border:1px solid var(--seller-edge);border-radius:999px;padding:6px 14px}
.incoterms-explorer .lede{color:var(--muted);font-weight:500;margin:10px 0 0;max-width:66ch}
.incoterms-explorer .legend{display:flex;flex-wrap:wrap;gap:16px;font-size:.82rem;font-weight:600;color:var(--ink);margin-top:14px}
.incoterms-explorer .legend span{display:inline-flex;align-items:center;gap:7px}
.incoterms-explorer .sw{width:14px;height:14px;border-radius:4px;display:inline-block}
.incoterms-explorer .panel{min-width:0;background:#FFFFFF;border:1px solid var(--line);border-radius:1.2rem;padding:22px;box-shadow:var(--shadow)}
.incoterms-explorer .picker{display:grid;gap:16px}
.incoterms-explorer .mode{display:inline-flex;flex-wrap:wrap;gap:4px;border:1px solid var(--line);border-radius:999px;padding:4px;background:#FFFFFF;justify-self:start}
.incoterms-explorer .mode button{font:700 .86rem var(--f-body);border:0;background:transparent;color:var(--muted);padding:8px 16px;border-radius:999px;cursor:pointer}
.incoterms-explorer .mode button[aria-pressed="true"]{background:var(--brand-grad);color:#FFFFFF;box-shadow:0 6px 14px rgba(8,109,233,.22)}
.incoterms-explorer .groups{display:flex;flex-wrap:wrap;gap:18px 32px}
.incoterms-explorer .group h3{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.incoterms-explorer .chips{display:flex;flex-wrap:wrap;gap:8px}
.incoterms-explorer .term{font:800 .92rem var(--f-display);letter-spacing:.03em;border:1.5px solid #C5D4E2;border-bottom-width:3px;background:#FFFFFF;color:var(--navy);padding:8px 13px;border-radius:.75rem;cursor:pointer;min-width:58px;transition:transform .12s,box-shadow .2s}
.incoterms-explorer .term:hover{border-color:var(--seller-bright);transform:translateY(-1px)}
.incoterms-explorer .term[aria-pressed="true"]{background:var(--brand-grad);border-color:#0B4F98;color:#FFFFFF;box-shadow:0 9px 18px rgba(54,74,224,.2)}
.incoterms-explorer button:focus-visible, .incoterms-explorer input:focus-visible{outline:3px solid var(--seller-bright);outline-offset:2px}
.incoterms-explorer .track-scroll{overflow-x:auto;margin:6px -4px 0;padding:0 4px}
.incoterms-explorer .track{position:relative;min-width:720px;height:320px}
.incoterms-explorer .st{position:absolute;top:0;transform:translateX(-50%);display:grid;justify-items:center;gap:5px;width:110px;text-align:center}
.incoterms-explorer .st svg{width:32px;height:32px;color:#7790A6;transition:color .3s}
.incoterms-explorer .st .lbl{font-size:.75rem;font-weight:600;line-height:1.25;color:var(--muted)}
.incoterms-explorer .st.on svg{color:var(--seller-bright)}
.incoterms-explorer .st.on .lbl{color:var(--navy)}
.incoterms-explorer .rail{position:absolute;left:3%;right:3%;top:118px;height:5px;background:var(--line-soft);border-radius:3px}
.incoterms-explorer .carriage{position:absolute;top:110px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#566F85}
.incoterms-explorer .carriage::before{content:"";position:absolute;inset:8px 0;border-top:2px dashed #C5D4E2;border-bottom:2px dashed #C5D4E2}
.incoterms-explorer .carriage span{position:relative;background:#FFFFFF;padding:0 8px;top:-14px}
.incoterms-explorer .dot{position:absolute;top:113px;width:15px;height:15px;border-radius:50%;background:#FFFFFF;border:3px solid #B9CFDF;transform:translateX(-50%)}
.incoterms-explorer .zone{position:absolute;top:96px;height:92px;border:1.5px dashed var(--seller-edge);border-radius:12px;background:rgba(234,245,255,.45)}
.incoterms-explorer .zone .zl{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:space-between;padding:0 7px;font-size:.66rem;font-weight:600;color:var(--muted)}
.incoterms-explorer .gap{position:absolute;top:107px;height:26px;border-radius:7px;background:repeating-linear-gradient(135deg,#CFE6FF 0 6px,#FFE7A6 6px 12px);border:1.5px dashed var(--buyer);transition:left .45s ease,width .45s ease,opacity .3s}
.incoterms-explorer .gap-note{position:absolute;top:88px;transform:translateX(10px);font-size:.74rem;font-weight:800;color:var(--buyer-ink);white-space:nowrap;transition:left .45s ease,opacity .3s}
.incoterms-explorer .mk{position:absolute;transform:translateX(-50%);transition:left .45s cubic-bezier(.3,.7,.2,1);z-index:2}
.incoterms-explorer .mk-cost{top:74px}
.incoterms-explorer .mk-risk{top:126px}
.incoterms-explorer .flag{display:grid;justify-items:center}
.incoterms-explorer .flag b{font:800 .74rem var(--f-body);color:#FFFFFF;background:var(--seller-grad);padding:4px 10px;border-radius:999px;white-space:nowrap;box-shadow:0 6px 14px rgba(23,105,170,.25)}
.incoterms-explorer .flag i{width:3px;height:16px;background:var(--seller)}
.incoterms-explorer .pin{display:grid;justify-items:center}
.incoterms-explorer .pin i{width:16px;height:16px;background:var(--risk-bright);transform:rotate(45deg);margin-top:-9px;border:2px solid #FFFFFF;box-sizing:content-box;box-shadow:0 0 0 4px rgba(16,185,129,.2)}
.incoterms-explorer .pin b{font:800 .74rem var(--f-body);color:#FFFFFF;background:var(--risk);padding:3px 10px;border-radius:999px;margin-top:7px;white-space:nowrap;box-shadow:0 6px 14px rgba(7,136,93,.22)}
.incoterms-explorer .mk[data-align="left"] b{transform:translateX(42%)}
.incoterms-explorer .mk[data-align="right"] b{transform:translateX(-42%)}
.incoterms-explorer .lanes{position:absolute;left:0;right:0;top:196px;display:grid;gap:12px}
.incoterms-explorer .lane{position:relative;height:28px}
.incoterms-explorer .lane .name{position:absolute;left:3%;top:-2px;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
.incoterms-explorer .bar{position:absolute;left:3%;right:3%;top:14px;height:11px;border-radius:6px;background:var(--buyer-hatch);overflow:hidden}
.incoterms-explorer .bar .fill{position:absolute;left:0;top:0;bottom:0;background:var(--seller-grad);transition:width .45s cubic-bezier(.3,.7,.2,1);border-right:2px solid #FFFFFF}
.incoterms-explorer .lane .who{position:absolute;right:3%;top:-2px;font-size:.7rem;font-weight:500;color:var(--muted)}
.incoterms-explorer .forms{position:relative;height:30px}
.incoterms-explorer .fp{position:absolute;top:0;font-size:.78rem;font-weight:500;color:var(--ink);padding:4px 11px;border-radius:999px;border:1.5px solid var(--line);background:#FFFFFF;transition:background .35s,border-color .35s;white-space:nowrap}
.incoterms-explorer .fp b{font-weight:800}
.incoterms-explorer .fp.s{border-color:var(--seller-edge);background:var(--seller-soft)}
.incoterms-explorer .fp.s b{color:var(--seller)}
.incoterms-explorer .fp.b{border-color:var(--buyer-edge);background:var(--buyer-soft)}
.incoterms-explorer .fp.b b{color:var(--buyer-ink)}
.incoterms-explorer .forms .name{position:absolute;left:50%;transform:translateX(-50%);top:6px;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.incoterms-explorer .slider{margin-top:8px;display:grid;gap:4px}
.incoterms-explorer .slider-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px;font-size:.82rem;font-weight:600;color:var(--muted)}
.incoterms-explorer .slider-head strong{color:var(--navy);font-weight:800}
.incoterms-explorer input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;margin:0;cursor:pointer}
.incoterms-explorer input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:5px;background:linear-gradient(90deg,#FFE7A6,#CFE6FF);border:1px solid var(--line)}
.incoterms-explorer input[type=range]::-moz-range-track{height:10px;border-radius:5px;background:linear-gradient(90deg,#FFE7A6,#CFE6FF);border:1px solid var(--line)}
.incoterms-explorer input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--seller-grad);border:3px solid #FFFFFF;box-shadow:0 0 0 2px #1D4ED8,0 0 0 7px rgba(37,99,235,.14),0 4px 12px rgba(37,99,235,.35);margin-top:-9px}
.incoterms-explorer input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--seller-grad);border:3px solid #FFFFFF;box-shadow:0 0 0 2px #1D4ED8,0 0 0 7px rgba(37,99,235,.14)}
.incoterms-explorer .ticks{position:relative;height:24px}
.incoterms-explorer .tick{position:absolute;transform:translateX(-50%);font:800 .76rem var(--f-display);letter-spacing:.03em;color:#566F85;background:none;border:0;cursor:pointer;padding:2px 4px;white-space:nowrap}
.incoterms-explorer .tick:first-child{transform:translateX(0);text-align:left}
.incoterms-explorer .tick:last-child{transform:translateX(-100%);text-align:right}
.incoterms-explorer .tick.on{color:var(--seller)}
.incoterms-explorer .readout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:22px}
.incoterms-explorer .big{display:grid;gap:10px;align-content:start}
.incoterms-explorer .code{font-family:var(--f-display);font-weight:900;font-size:clamp(3.4rem,8vw,5rem);line-height:.92;letter-spacing:-.035em;color:#086DE9;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;justify-self:start;padding-right:4px}
.incoterms-explorer .fullname{font-family:var(--f-display);font-weight:800;font-size:1.25rem;color:var(--navy);letter-spacing:-.01em}
.incoterms-explorer .quote{font-size:.82rem;font-weight:600;color:var(--muted)}
.incoterms-explorer .quote b{color:#0758BD;font-weight:900;background:linear-gradient(180deg,#F1F7FF,#E8F2FF);padding:2px 7px;border-radius:.45rem;box-shadow:inset 0 -2px 0 #F3B600}
.incoterms-explorer .essence{margin:0;max-width:58ch;color:#294968;font-weight:500}
.incoterms-explorer .facts{display:grid;gap:8px;margin:4px 0 0}
.incoterms-explorer .fact{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:.9rem;color:#294968}
.incoterms-explorer .fact .k{font-weight:800;color:var(--navy);white-space:nowrap}
.incoterms-explorer .fact .k::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;vertical-align:1px}
.incoterms-explorer .fact.r .k::before{background:var(--risk-bright);transform:rotate(45deg)}
.incoterms-explorer .fact.c .k::before{background:var(--seller-grad);border-radius:2px}
.incoterms-explorer .variants{display:grid;gap:8px;margin-top:8px}
.incoterms-explorer .variants h4, .incoterms-explorer .side h4{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0}
.incoterms-explorer .vchips{display:flex;flex-wrap:wrap;gap:8px}
.incoterms-explorer .vchip{font:700 .86rem var(--f-body);color:var(--navy);border:1.5px solid #E9C44A;border-bottom:4px solid var(--buyer);background:linear-gradient(180deg,#FFF8C8,#FFF4A6);padding:8px 14px;border-radius:.8rem;cursor:pointer;transition:transform .12s}
.incoterms-explorer .vchip:hover{transform:translateY(-1px)}
.incoterms-explorer .vchip[aria-pressed="true"]{background:var(--seller-grad);color:#FFFFFF;border-color:#0B4F98;box-shadow:0 8px 16px rgba(23,105,170,.22)}
.incoterms-explorer .vnote{font-size:.8rem;font-weight:500;color:var(--muted);margin:0}
.incoterms-explorer .foot{font-size:.76rem;font-weight:500;color:var(--muted);margin:0}
@media  (prefers-reduced-motion:reduce){.incoterms-explorer *{transition:none!important}}
.incoterms-explorer .track-scroll{max-width:100%;overflow-x:auto;overflow-y:visible;margin:0;padding:0 0 5px}
.incoterms-explorer .track{width:100%;min-width:760px;}
.incoterms-explorer .journey-image{display:none;pointer-events:none;user-select:none}
.incoterms-explorer .track[data-mode="sea"]{height:auto;aspect-ratio:2048/682;min-width:900px;isolation:isolate}
.incoterms-explorer .track[data-mode="sea"] .journey-image{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.incoterms-explorer .track[data-mode="sea"] .rail, .incoterms-explorer .track[data-mode="sea"] #stations{display:none}
.incoterms-explorer .track[data-mode="sea"] .mk-cost{top:calc(71.55% - 61px)}
.incoterms-explorer .track[data-mode="sea"] .mk-risk{top:calc(71.55% + 7px)}
.incoterms-explorer .track[data-mode="sea"] .gap{top:calc(71.55% - 12px);height:24px;z-index:1;opacity:.65}
.incoterms-explorer .track[data-mode="sea"] .gap-note{top:calc(71.55% - 40px);z-index:2}
.incoterms-explorer .track[data-mode="any"]{height:210px}
.incoterms-explorer .track[data-mode="any"] .rail{top:118px}
.incoterms-explorer .track[data-mode="any"] .mk-cost{top:76px}
.incoterms-explorer .track[data-mode="any"] .mk-risk{top:126px}
.incoterms-explorer .track[data-mode="any"] .gap{top:108px}
.incoterms-explorer .track[data-mode="any"] .gap-note{top:88px}
.incoterms-explorer .track[data-mode="any"] .st{top:0}
.incoterms-explorer .track[data-mode="any"] .zone{top:96px}
.incoterms-explorer .lanes{position:relative;top:auto;left:auto;right:auto;display:grid;gap:13px;margin:10px 0 0;min-height:113px}
.incoterms-explorer .lane{height:30px}
.incoterms-explorer .forms{margin-top:3px}
.incoterms-explorer .slider{margin-top:18px}
.incoterms-explorer .explanation-art{position:absolute;width:51%;height:auto;max-height:300px;right:0;top:0;object-fit:contain;object-position:right top;opacity:.97;pointer-events:none;z-index:0}
.incoterms-explorer .big{position:relative;isolation:isolate;min-height:275px}
.incoterms-explorer .big>*:not(.explanation-art){position:relative;z-index:1}
.incoterms-explorer .big .essence{max-width:55%;text-wrap:pretty}
.incoterms-explorer .big .facts{max-width:65%}
.incoterms-explorer .readout{grid-template-columns:minmax(0,1.28fr) minmax(0,0.95fr)}
@media (max-width:820px){.incoterms-explorer .readout{grid-template-columns:1fr}
.incoterms-explorer .big{min-height:250px}
.incoterms-explorer .explanation-art{width:48%}}
@media (max-width:540px){.incoterms-explorer .big .essence, .incoterms-explorer .big .facts{max-width:100%}
.incoterms-explorer .explanation-art{opacity:.15;width:70%;top:25px}
.incoterms-explorer .big{min-height:0}
.incoterms-explorer .lane .who{font-size:.62rem}
.incoterms-explorer .track[data-mode="sea"]{min-width:900px}}
.incoterms-explorer .side{ display:flex; flex-direction:column; gap:12px; min-width:0; align-self:start; }
.incoterms-explorer .side h4{ margin:0; font-size:14px; font-weight:800; letter-spacing:.09em; color:#567595; }
.incoterms-explorer .reference-rule{
  appearance:none; display:flex; flex-flow:row nowrap; align-items:center;
  gap:14px; width:100%; min-width:0; min-height:82px;
  margin:0; padding:12px 16px 12px 15px;
  border:2px solid #d5e6f6; border-radius:18px; background:#fff;
  color:#173b63; text-align:left; font-family:var(--f-body);
  cursor:pointer;
}
.incoterms-explorer .reference-rule .arrow{
  display:flex; align-items:center; justify-content:center;
  flex:0 0 46px; width:46px; height:46px;
  border-radius:50%;
}
.incoterms-explorer .reference-rule.more .arrow{ background:linear-gradient(155deg,#3fa1fb,#0768d4); color:#fff; }
.incoterms-explorer .reference-rule.less .arrow{ background:linear-gradient(155deg,#ffda79,#ffb10d); color:#a86600; }
.incoterms-explorer .reference-rule .arrow svg{ display:block; flex:none; width:27px; height:27px; }
.incoterms-explorer .reference-rule .t{ display:block; flex:1 1 0; min-width:0; font-size:15px; font-weight:400; line-height:1.48; }
.incoterms-explorer .reference-rule .t b{ font-weight:800; color:#12325b; }
.incoterms-explorer .reference-rule .chevron{
  display:flex; align-items:center; justify-content:center;
  flex:0 0 27px; width:27px; height:32px; margin-left:auto;
  color:#527697;
}
.incoterms-explorer .reference-rule .chevron svg{ display:block; flex:none; width:25px; height:25px; }
.incoterms-explorer .reference-watch{
  display:flex; flex-flow:row nowrap; align-items:center; gap:21px;
  min-height:100px; padding:14px 17px 14px 15px;
  background:#fffdf8; color:#173b63; border:2px solid #ffdb8c;
  border-left:9px solid #ffb000; border-radius:18px;
  font-size:15px; line-height:1.52;
}
.incoterms-explorer .reference-watch::before{
  content: "💡";
  display: flex;
  flex: 0 0 44px;
  width: 44px;
  height: 50px;
  align-items: center;
  justify-content: center;
  background: none;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
}
.incoterms-explorer .reference-watch .watch-text{ flex:1 1 0; min-width:0; }
.incoterms-explorer .reference-watch b{ font-weight:800; color:#12325b; }
.incoterms-explorer .obl{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.incoterms-explorer .ob{ position:relative; overflow:hidden; display:grid; align-content:center; gap:7px; min-height:112px; padding:13px 10px 12px 13px; border:1.5px solid var(--line); border-radius:13px; background:#fff; }
.incoterms-explorer .ob::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--line); }
.incoterms-explorer .ob .ob-top{ display:grid; grid-template-columns:36px minmax(0,1fr); align-items:center; gap:8px; }
.incoterms-explorer .ob .ob-icon{ width:32px; height:32px; }
.incoterms-explorer .ob .n{ font-size:12px; font-weight:600; line-height:1.35; color:var(--ink); }
.incoterms-explorer .ob .v{ display:inline-flex; justify-self:start; margin-left:44px; padding:4px 12px; border-radius:999px; font-size:13px; line-height:1.2; font-weight:800; }
.incoterms-explorer .ob .x{ margin-left:44px; font-size:11px; color:var(--muted); }
.incoterms-explorer .ob.S{ border-color:#b5d8fa; }
.incoterms-explorer .ob.S::before{ background:var(--seller-grad); }
.incoterms-explorer .ob.B{ border-color:var(--buyer-edge); }
.incoterms-explorer .ob.B::before{ background:var(--buyer-hatch); }
.incoterms-explorer .ob.N, .incoterms-explorer .ob.K{ border-color:#d9e1e8; }
.incoterms-explorer .ob.N::before, .incoterms-explorer .ob.K::before{ background:#d9e1e8; }
.incoterms-explorer .ob.S .v{ background:#e9f5ff; border:1px solid #a5d3ff; color:#0763bf; }
.incoterms-explorer .ob.B .v{ background:#fff4d7; border:1px solid #ffd47d; color:#9b6200; }
.incoterms-explorer .ob.N .v, .incoterms-explorer .ob.K .v{ background:#eff2f5; border:1px solid #d9e1e8; color:#607386; }
@media (max-width:900px){.incoterms-explorer .obl{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:820px){.incoterms-explorer .readout{grid-template-columns:1fr;}}
@media (max-width:560px){.incoterms-explorer .reference-rule{min-height:80px;gap:11px;padding:12px;border-radius:18px;}
.incoterms-explorer .reference-rule .arrow{flex-basis:44px;width:44px;height:44px;}
.incoterms-explorer .reference-rule .arrow svg{width:25px;height:25px;}
.incoterms-explorer .reference-rule .t{font-size:14px;}
.incoterms-explorer .reference-rule .chevron{flex-basis:20px;width:20px;}
.incoterms-explorer .reference-rule .chevron svg{width:19px;height:19px;}
.incoterms-explorer .reference-watch{min-height:100px;gap:12px;padding:13px;border-radius:18px;font-size:14px;}
.incoterms-explorer .reference-watch::before{flex-basis:42px;width:42px;height:52px;}
.incoterms-explorer .obl{grid-template-columns:repeat(2,minmax(0,1fr));}}
.incoterms-explorer .check{display:grid;gap:16px}
.incoterms-explorer .check-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px}
.incoterms-explorer .check-head h2{margin:0;font-size:1.35rem;font-weight:800;letter-spacing:-.015em;color:var(--navy);text-wrap:balance}
.incoterms-explorer .check-head h2 span{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#0866DA}
.incoterms-explorer .check-head p{margin:4px 0 0;font-size:.9rem;font-weight:500;color:var(--muted)}
.incoterms-explorer .progress{display:grid;gap:6px;min-width:220px}
.incoterms-explorer .progress .lab{display:flex;justify-content:space-between;gap:10px;font-size:.84rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.incoterms-explorer .progress .lab b{color:var(--risk)}
.incoterms-explorer .pbar{height:10px;border-radius:5px;background:var(--line-soft);overflow:hidden}
.incoterms-explorer .pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#34D399,#059669);border-radius:5px;transition:width .35s ease}
.incoterms-explorer .qlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.incoterms-explorer .q{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;align-items:start;border:1.5px solid var(--line);border-radius:1rem;padding:14px 16px;background:#FFFFFF;transition:border-color .2s,background .2s;box-shadow:var(--shadow-sm)}
.incoterms-explorer .q:hover{border-color:var(--seller-edge)}
.incoterms-explorer .qmain{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;cursor:pointer;position:relative}
.incoterms-explorer .q input{position:absolute;opacity:0;width:1px;height:1px}
.incoterms-explorer .q .box{width:26px;height:26px;border-radius:8px;border:2px solid #9DB3C7;background:#FFFFFF;display:grid;place-items:center;transition:background .2s,border-color .2s;margin-top:1px}
.incoterms-explorer .q .box svg{width:16px;height:16px;opacity:0;transition:opacity .15s}
.incoterms-explorer .q input:focus-visible + .box{outline:3px solid var(--seller-bright);outline-offset:2px}
.incoterms-explorer .q .qt{font-size:.95rem;font-weight:700;color:var(--navy);line-height:1.35}
.incoterms-explorer .q .why{display:block;margin-top:3px;font-size:.84rem;font-weight:500;color:var(--muted);line-height:1.45}
.incoterms-explorer .q .tag{display:inline-block;margin-right:8px;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:2px 8px;vertical-align:2px}
.incoterms-explorer .tag.cost{background:var(--seller-soft);color:var(--seller);border:1px solid var(--seller-edge)}
.incoterms-explorer .tag.risk{background:#ECFDF5;color:var(--risk);border:1px solid #A7F3D0}
.incoterms-explorer .tag.customs{background:var(--buyer-soft);color:var(--buyer-ink);border:1px solid var(--buyer-edge)}
.incoterms-explorer .tag.place{background:var(--neutral-soft);color:var(--navy);border:1px solid #C5D4E2}
.incoterms-explorer .q.done{border-color:#A7F3D0;background:linear-gradient(180deg,#FFFFFF,#F4FFF9)}
.incoterms-explorer .q.done .box{background:linear-gradient(135deg,#34D399,#059669);border-color:#059669}
.incoterms-explorer .q.done .box svg{opacity:1}
.incoterms-explorer .q.done .qt{color:var(--ink)}
.incoterms-explorer .basis{display:inline-flex;align-items:center;gap:6px;margin-top:7px;font-size:.74rem;font-weight:700;color:var(--soft-text)}
.incoterms-explorer .basis::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.incoterms-explorer .basis.rule{color:#0F5A96}
.incoterms-explorer .basis.guide{color:#4338CA}
.incoterms-explorer .basis.contract{color:#8A5A00}
.incoterms-explorer .basis.law{color:#B42318}
.incoterms-explorer .na-btn{font-size:.8rem;font-weight:700;color:var(--muted);background:#FFFFFF;border:1.5px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;white-space:nowrap}
.incoterms-explorer .na-btn:hover{border-color:#9DB3C7;color:var(--ink)}
.incoterms-explorer .q.na{background:var(--neutral-soft);border-style:dashed;box-shadow:none}
.incoterms-explorer .q.na .qmain{opacity:.55;cursor:default}
.incoterms-explorer .q.na .na-btn{color:var(--seller);border-color:var(--seller-edge)}
.incoterms-explorer .check-note{margin:0;font-size:.86rem;font-weight:500;color:var(--ink);background:var(--neutral-soft);border-radius:.8rem;padding:10px 14px}
.incoterms-explorer .check-note b{font-weight:800}
@media  (max-width:560px){.incoterms-explorer .q{grid-template-columns:1fr}
.incoterms-explorer .na-btn{justify-self:start;margin-left:40px}}
.incoterms-explorer .check-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.incoterms-explorer .btn{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:800;border-radius:.85rem;padding:10px 16px;cursor:pointer;border:1.5px solid #0B4F98;background:var(--seller-grad);color:#FFFFFF;box-shadow:0 8px 16px rgba(23,105,170,.2)}
.incoterms-explorer .btn.ghost{background:#FFFFFF;color:var(--seller);border-color:var(--seller-edge);box-shadow:none}
.incoterms-explorer .btn svg{width:18px;height:18px}
.incoterms-explorer .copied{font-size:.84rem;font-weight:700;color:var(--risk)}
.incoterms-explorer .copybox{width:100%;min-height:120px;font:500 .84rem/1.5 var(--f);color:var(--ink);border:1.5px solid var(--line);border-radius:.8rem;padding:10px 12px}
@media  (max-width:560px){.incoterms-explorer .check-head{align-items:stretch}
.incoterms-explorer .progress{width:100%}
.incoterms-explorer .q{padding:12px;gap:10px}
.incoterms-explorer .check-head h2{font-size:1.2rem}}
.incoterms-explorer{padding:18px 12px 22px;}


/* Quick links: exact Fuel Surcharge component values and SVG/link structure. */
.chart-page .fuel-hero-quick{display:block;margin-top:.9rem}
.chart-page .fuel-hero-quick__nav{display:flex;width:100%;min-width:0;align-items:stretch;gap:.55rem}
.chart-page .fuel-quick-links__label{display:inline-flex;min-height:3.7rem;flex:0 0 auto;align-items:center;justify-content:center;margin:0;border:2px solid #00a653;border-radius:.7rem;background:linear-gradient(180deg,#10c566,#06994d);padding:.75rem 1.1rem;color:#fff;font-size:.92rem;font-weight:900;line-height:1;letter-spacing:.015em;text-shadow:0 1px 1px rgba(0,75,38,.25);box-shadow:inset 0 3px 0 hsla(0,0%,100%,.15),0 7px 0 #08763f,0 10px 18px rgba(8,118,63,.18)}
.chart-page .fuel-quick-links{display:grid;flex:1 1 0;min-width:0;width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}
.chart-page .fuel-quick-links a{display:flex;min-width:0;min-height:3.7rem;align-items:center;justify-content:flex-start;gap:.7rem;border:2px solid #0d79ff;border-radius:.7rem;background:linear-gradient(180deg,#167dff,#0663ef);padding:.7rem .7rem;color:#fff;font-size:.94rem;font-weight:850;line-height:1.05;text-align:center;text-decoration:none;text-shadow:0 1px 1px rgba(0,49,143,.22);box-shadow:inset 0 3px 0 hsla(0,0%,100%,.14),0 7px 0 #074dcc,0 10px 18px rgba(7,77,204,.18);transition:transform .14s ease,filter .14s ease,box-shadow .14s ease}
.chart-page .fuel-quick-links a:hover{border-color:#0d79ff;background:linear-gradient(180deg,#2588ff,#0b6bf4);color:#fff;filter:saturate(1.06);transform:translateY(-1px);box-shadow:inset 0 3px 0 hsla(0,0%,100%,.17),0 8px 0 #074dcc,0 12px 20px rgba(7,77,204,.22)}
.chart-page .fuel-quick-links a:active{transform:translateY(4px);box-shadow:inset 0 2px 0 hsla(0,0%,100%,.12),0 3px 0 #074dcc,0 6px 12px rgba(7,77,204,.16)}
.chart-page .fuel-quick-links a:focus-visible{outline:3px solid #12325b;outline-offset:3px}
.chart-page .fuel-quick-links svg{width:1.55rem;height:1.55rem;flex:0 0 1.55rem;color:#fff}
.chart-page .fuel-quick-links a>span{display:inline-flex;min-height:1.8rem;align-items:center;border-left:2px solid hsla(0,0%,100%,.72);padding-left:.72rem;white-space:nowrap}
@media(max-width:767px){
.chart-page .fuel-hero-quick{margin-top:.72rem}
.chart-page .fuel-hero-quick__nav{display:grid;grid-template-columns:1fr;gap:.48rem}
.chart-page .fuel-quick-links__label{width:-moz-max-content;width:max-content;min-height:2.25rem;border-radius:.55rem;padding:.48rem .8rem;font-size:.76rem;box-shadow:inset 0 2px 0 hsla(0,0%,100%,.15),0 5px 0 #08763f,0 7px 12px rgba(8,118,63,.17)}
.chart-page .fuel-quick-links{width:100%;gap:.38rem}
.chart-page .fuel-quick-links a{min-height:3.15rem;gap:.36rem;border-radius:.55rem;padding:.52rem .38rem;font-size:.78rem;box-shadow:inset 0 2px 0 hsla(0,0%,100%,.14),0 5px 0 #074dcc,0 7px 12px rgba(7,77,204,.18)}
.chart-page .fuel-quick-links svg{width:1.12rem;height:1.12rem;flex-basis:1.12rem}
.chart-page .fuel-quick-links a>span{min-height:1.45rem;border-left-width:1.5px;padding-left:.38rem}
.chart-page .fuel-quick-links{gap:.28rem}
.chart-page .fuel-quick-links a{gap:.25rem;padding-inline:.24rem;font-size:.72rem}
.chart-page .fuel-quick-links svg{width:1rem;height:1rem;flex-basis:1rem}
.chart-page .fuel-quick-links a>span{padding-left:.28rem}
.chart-page .fuel-quick-links a>span{white-space:normal;}
}

/* Incoterms labels are longer than the Fuel Surcharge labels.
   Preserve the original button treatment without allowing text to spill outside. */
@media (min-width:768px) and (max-width:1100px){
  .chart-page .fuel-hero-quick__nav{display:grid;grid-template-columns:1fr;}
  .chart-page .fuel-quick-links__label{justify-self:start;}
  .chart-page .fuel-quick-links{width:100%;}
}
@media (min-width:768px){
  .chart-page .fuel-quick-links a>span{white-space:normal;overflow-wrap:normal;}
}

/* Rule Finder — Freight Fuel Surcharge design language */


/* Transport selector: match the site's raised, high-contrast action controls. */
.incoterms-explorer .transport-select-label {
  margin: 0 0 -9px;
  color: #12325b;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .09em;
}
.incoterms-explorer .mode {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.incoterms-explorer .mode button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 11px 19px;
  border: 2px solid #1769aa;
  border-bottom: 5px solid #0c5291;
  border-radius: 12px;
  background: #ffffff;
  color: #12325b;
  font: 800 .91rem var(--f-body);
  line-height: 1.25;
  box-shadow: 0 4px 10px rgba(18,50,91,.10);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.incoterms-explorer .mode button:hover {
  border-color: #0663ef;
  border-bottom-color: #074dcc;
  box-shadow: 0 6px 15px rgba(23,105,170,.18);
  transform: translateY(-1px);
}
.incoterms-explorer .mode button[aria-pressed="true"] {
  border: 2px solid #1559d2;
  border-bottom: 5px solid #113ba4;
  background: var(--brand-grad);
  color: #fff;
  box-shadow: 0 6px 14px rgba(8,109,233,.23);
}
.incoterms-explorer .mode button[aria-pressed="true"]::before {
  content: '✓';
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}
.incoterms-explorer .mode button:focus-visible {
  outline: 3px solid #f0ac18;
  outline-offset: 3px;
}
@media (max-width: 540px) {
  .incoterms-explorer .mode { display: grid; grid-template-columns: minmax(0,1fr); }
  .incoterms-explorer .mode button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .incoterms-explorer .mode button { transition: none; }
}


/* DOT Hazmat chart action buttons — replicated from hazmat.css. */
  .hazmat-poster-card {
    display:flex;
    height:100%;
    min-width:0;
    flex-direction:column;
    overflow:hidden;
    border:2px solid #bdd3e4;
    border-radius:1.45rem;
    background:#fff;
    padding:.72rem;
    box-shadow:0 8px 0 rgba(18,50,91,.08),0 18px 32px rgba(15,47,79,.10);
  }

  .hazmat-poster-preview {
    display:block;
    width:100%;
    overflow:hidden;
    border:0;
    border-radius:1.05rem;
    background:#0f3b63;
    padding:0;
    text-align:left;
    cursor:zoom-in;
  }

  .hazmat-poster-preview:focus-visible {
    outline:0;
    box-shadow:0 0 0 4px rgba(46,135,236,.35);
  }

  .hazmat-poster-preview__media {
    position:relative;
    display:block;
    aspect-ratio:1 / 1;
    width:100%;
    overflow:hidden;
    border-radius:1.05rem;
    background:#0f3b63;
  }

  .hazmat-poster-preview__media img {
    display:block;
    height:100%;
    width:100%;
    object-fit:contain;
    object-position:center;
    transition:transform .22s ease,filter .22s ease;
  }

  .hazmat-poster-preview:hover img {
    transform:scale(1.015);
    filter:brightness(.78);
  }

  .hazmat-poster-badge {
    position:absolute;
    top:.8rem;
    right:.8rem;
    z-index:2;
    display:inline-flex;
    align-items:center;
    border:1px solid #d6b10d;
    border-radius:999px;
    background:#fff36a;
    padding:.38rem .62rem;
    color:#173b63;
    font-size:.64rem;
    font-weight:900;
    line-height:1;
    letter-spacing:.055em;
    text-transform:uppercase;
    box-shadow:0 4px 12px rgba(0,0,0,.22);
  }

  .hazmat-poster-overlay {
    position:absolute;
    left:50%;
    bottom:1rem;
    z-index:2;
    display:inline-flex;
    max-width:calc(100% - 2rem);
    align-items:center;
    justify-content:center;
    gap:.55rem;
    transform:translateX(-50%);
    border:1px solid rgba(255,255,255,.78);
    border-radius:.8rem;
    background:rgba(255,255,255,.95);
    padding:.62rem .78rem;
    color:#12325b;
    font-size:.72rem;
    font-weight:900;
    line-height:1.05;
    letter-spacing:.018em;
    text-align:center;
    box-shadow:0 10px 26px rgba(0,0,0,.26);
    backdrop-filter:blur(4px);
    transition:transform .18s ease,box-shadow .18s ease;
  }

  .hazmat-poster-preview:hover .hazmat-poster-overlay {
    transform:translateX(-50%) translateY(-2px);
    box-shadow:0 14px 30px rgba(0,0,0,.32);
  }

  .hazmat-poster-overlay__icon {
    display:inline-flex;
    height:1.45rem;
    width:1.45rem;
    flex:0 0 1.45rem;
    align-items:center;
    justify-content:center;
  }

  .hazmat-poster-overlay__icon svg {
    height:1.28rem;
    width:1.28rem;
  }

  .hazmat-poster-actions {
    margin-top:.72rem;
    display:grid;
    gap:.58rem;
  }

  .hazmat-poster-download {
    display:inline-flex;
    min-height:3rem;
    width:100%;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    border:2px solid #d79a00;
    border-radius:.85rem;
    background:#ffc400;
    padding:.72rem .9rem;
    color:#0f172a;
    font-size:.82rem;
    font-weight:900;
    line-height:1.1;
    text-decoration:none;
    box-shadow:0 5px 0 #b7791f,0 8px 16px rgba(183,121,31,.18);
    transition:transform .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
  }

  .hazmat-poster-download:hover {
    background:#ffcc19;
    border-color:#c88f00;
    transform:translateY(-1px);
    box-shadow:0 6px 0 #a96f18,0 10px 18px rgba(183,121,31,.20);
  }

  .hazmat-poster-download:active {
    transform:translateY(2px);
    box-shadow:0 2px 0 #a96f18;
  }

  .hazmat-poster-download:focus-visible,
  .hazmat-poster-utility:focus-visible {
    outline:0;
    box-shadow:0 0 0 4px rgba(147,197,253,.6);
  }

  .hazmat-poster-download svg {
    height:1.1rem;
    width:1.1rem;
    flex:0 0 1.1rem;
  }

  .hazmat-poster-utilities {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.42rem;
  }

  .hazmat-poster-utility {
    display:inline-flex;
    min-height:2.65rem;
    min-width:0;
    align-items:center;
    justify-content:center;
    gap:.38rem;
    border:1px solid #b7cfe0;
    border-radius:.75rem;
    background:#edf6fc;
    padding:.55rem .4rem;
    color:#12325b;
    font-size:.72rem;
    font-weight:850;
    line-height:1;
    cursor:pointer;
    box-shadow:0 3px 0 #8fb2ca,0 5px 8px rgba(15,47,79,.07);
    transition:transform .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
  }

  .hazmat-poster-utility:hover {
    border-color:#7da8c5;
    background:#e3f1fb;
    transform:translateY(-1px);
    box-shadow:0 4px 0 #789fba,0 7px 10px rgba(15,47,79,.08);
  }

  .hazmat-poster-utility:active {
    transform:translateY(2px);
    box-shadow:0 1px 0 #789fba;
  }

  .hazmat-poster-utility svg {
    height:1rem;
    width:1rem;
    flex:0 0 1rem;
  }

  .hazmat-poster-spec {
    margin:0;
    color:#61788d;
    font-size:.66rem;
    font-weight:700;
    line-height:1.35;
    text-align:center;
  }

  @media (max-width:420px) {
    .hazmat-poster-badge { top:.55rem; right:.55rem; font-size:.58rem; }
    .hazmat-poster-overlay { bottom:.7rem; font-size:.65rem; }
    .hazmat-poster-utility { font-size:.68rem; }
  }

/* Incoterms landscape-specific layout; Hazmat button styles above reproduced exactly. */
.chart-section .chart-card{align-items:start}
.chart-section .incoterms-master-figure{min-width:0}
.chart-section .hazmat-poster-preview__media{aspect-ratio:2400 / 1510;background:#fff}
.chart-section .hazmat-poster-preview__media picture{display:block;width:100%;height:100%}
.chart-section .hazmat-poster-preview__media img{object-fit:contain;border:0;border-radius:0}
.chart-section .hazmat-poster-preview{text-decoration:none}
.chart-section .incoterms-master-figure figcaption{margin-top:12px}
.chart-section .incoterms-png-download{display:inline-flex;min-height:44px;align-items:center;justify-content:center;text-align:center;color:#1769aa;text-decoration:underline;font-size:.83rem;font-weight:800;text-underline-offset:3px}
.chart-section .incoterms-png-download:focus-visible{outline:3px solid #2f88ef;outline-offset:3px}
.chart-section .incoterms-chart-action-status{font-size:.77rem;color:#365875;text-align:center}
.chart-section .chart-actions{align-self:center}
@media(max-width:700px){.chart-section .hazmat-poster-preview__media{aspect-ratio:1200 / 5410}.chart-section .hazmat-poster-overlay{font-size:.65rem}.chart-section .chart-card{grid-template-columns:minmax(0,1fr)}}

/* Restore original Incoterms two-column arrangement: image left, controls right. */
.chart-section .chart-card{grid-template-columns:minmax(0,1.35fr) minmax(260px,.75fr);align-items:center}
.chart-section .chart-actions{min-width:0;align-self:center}
.chart-section .chart-actions .hazmat-poster-actions{margin-top:12px}
.chart-section .hazmat-poster-card{height:auto}
@media(max-width:940px){.chart-section .chart-card{grid-template-columns:minmax(0,1fr)}}

/* Incoterms chart downloads in the right column; Hazmat utilities remain under the preview. */
.chart-section .incoterms-under-chart-actions{margin-top:.7rem;display:grid;gap:.55rem}
.chart-section .incoterms-under-chart-actions .hazmat-poster-utilities{width:100%}
.chart-section .incoterms-download-actions{display:grid;gap:14px;margin-top:14px}
.chart-section .incoterms-download-blue{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;width:100%;min-height:3rem;padding:.78rem .9rem;border:2px solid #0d79ff;border-radius:.85rem;background:linear-gradient(180deg,#167dff,#0663ef);color:#fff;text-align:center;font-size:.88rem;font-weight:900;line-height:1.15;text-decoration:none;box-shadow:0 5px 0 #074dcc,0 8px 16px rgba(7,77,204,.16);transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.chart-section .incoterms-download-blue svg{height:1.1rem;width:1.1rem;flex:none}
.chart-section .incoterms-download-blue:hover{background:linear-gradient(180deg,#2788ff,#086beb);transform:translateY(-1px);box-shadow:0 6px 0 #074dcc,0 10px 18px rgba(7,77,204,.2)}
.chart-section .incoterms-download-blue:active{transform:translateY(2px);box-shadow:0 2px 0 #074dcc}
.chart-section .incoterms-download-blue:focus-visible{outline:3px solid #f59e0b;outline-offset:3px}
.chart-section .incoterms-download-actions .hazmat-poster-download{min-height:3rem;font-size:.88rem}
@media(max-width:420px){.chart-section .incoterms-under-chart-actions .hazmat-poster-utility{font-size:.68rem}}


/* ============================================================
   TYPOGRAPHY ALIGNMENT — Fuel Surcharge site reference
   Uses the site's actual Inter 400 / 500 / 600 / 700 faces.
   Typography only: no chart, button, grid or interaction changes.
   ============================================================ */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-semibold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.chart-page h1,
.chart-section h2,
.explorer-section > h2,
.finder-heading h2 {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.chart-page h1 { font-size: clamp(30px, 3.8vw, 48px); }
.chart-intro {
  max-width: 900px;
  color: #294968;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}
.chart-section h2,
.explorer-section > h2,
.finder-heading h2 { font-size: clamp(24px, 2.65vw, 32px); }
.chart-section > p,
.explorer-section > p,
.finder-heading > p {
  color: #425f78;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}
.chart-actions h3 {
  color: #12325b;
  font-size: clamp(20px, 1.75vw, 24px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.025em;
}
.chart-actions > p {
  color: #425f78;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
}
.finder-top h3,
.finder-question-group legend,
.incoterms-explorer .check-head h2 {
  font-weight: 700;
  line-height: 1.3;
}
.finder-form-intro,
.finder-question-group .finder-help,
.finder-disclaimer,
.incoterms-master-figure figcaption,
.chart-actions .chart-disclaimer {
  line-height: 1.55;
}
.finder-option-copy,
.finder-option-copy strong { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }


/* 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;
}

/* Thicker, directly labelled cost and risk lanes (FOB map treatment).
   All positions remain driven by the existing explorer's rule data. */
.incoterms-explorer .lanes {
  gap: 10px;
  min-height: 0;
}
.incoterms-explorer .lane {
  height: 65px;
}
.incoterms-explorer .lane .name,
.incoterms-explorer .lane .who {
  top: 0;
}
.incoterms-explorer .bar {
  top: 23px;
  height: 36px;
  border-radius: 3px;
  overflow: hidden;
}
.incoterms-explorer .bar .fill {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 0;
  overflow: hidden;
}
.incoterms-explorer .bar .seller-label,
.incoterms-explorer .bar .buyer-label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.incoterms-explorer .bar .seller-label {
  color: #FFFFFF;
}
.incoterms-explorer .bar .buyer-label {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - var(--seller-share, 50%));
  color: #382600;
}
.incoterms-explorer .bar.no-seller-label .seller-label,
.incoterms-explorer .bar.no-buyer-label .buyer-label {
  display: none;
}
@media (max-width: 540px) {
  .incoterms-explorer .bar .seller-label,
  .incoterms-explorer .bar .buyer-label { font-size: 12px; }
}

/* Explorer → Quote A handoff. Scoped; no changes to the approved calculator. */
.incoterms-explorer .explorer-quote-handoff{display:grid;justify-items:start;gap:7px;margin-top:10px;max-width:100%}
.incoterms-explorer .explorer-quote-handoff__button{display:inline-flex;align-items:center;gap:10px;justify-content:center;max-width:100%;padding:11px 17px;border:1.5px solid #145B96;border-bottom:3px solid #0B4F98;border-radius:10px;background:linear-gradient(100deg,#2F88EF,#1769AA);color:#fff;font:800 .91rem Inter,system-ui,sans-serif;line-height:1.3;cursor:pointer;text-align:left}
.incoterms-explorer .explorer-quote-handoff__button:hover{background:linear-gradient(100deg,#1769AA,#0B4F98)}
.incoterms-explorer .explorer-quote-handoff__button:focus-visible{outline:3px solid #E9A714;outline-offset:3px}
.incoterms-explorer .explorer-quote-handoff p{margin:0;font-size:.78rem;color:#526F84}

/* Compact return navigation on small screens only. */
.incoterms-back-to-tools { display: none; }
@media (max-width: 700px) {
  .chart-page .incoterms-back-to-tools {
    display: table;
    width: fit-content;
    max-width: 100%;
    margin: 18px auto 2px;
    padding: 8px 13px;
    border: 1px solid #c6dced;
    border-radius: 999px;
    background: #fff;
    color: #1769aa;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
  }
  .chart-page .incoterms-back-to-tools:focus-visible {
    outline: 3px solid #1769aa;
    outline-offset: 3px;
  }
  .chart-page #incoterms-tools-nav { scroll-margin-top: 12px; }
}

/* Section integration: keep each tool heading and its guidance inside one white card. */
.chart-page > .finder-section,
.chart-page > .explorer-section:not(.explorer-checklist-section) {
  background: #fff;
  border: 1px solid #d9e5ed;
  border-radius: 21px;
  padding: 25px;
  margin: 25px 0;
}

/* The explorer's existing panels remain unchanged; avoid a doubled outer frame. */
.chart-page > .explorer-section:not(.explorer-checklist-section) > .incoterms-explorer {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-top: 20px;
  overflow: visible;
}

/* Treat the Finder's qualifications as readable content within its section. */
.chart-page > .finder-section > .finder-disclaimer {
  max-width: none;
  margin: 20px 0 0;
  padding: 15px 17px;
  background: #f3f9ff;
  border: 1px solid #d4e5f4;
  border-left: 4px solid #1769aa;
  border-radius: 11px;
  color: #173b63;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
}

@media (max-width: 600px) {
  .chart-page > .finder-section,
  .chart-page > .explorer-section:not(.explorer-checklist-section) {
    padding: 15px;
  }
  .chart-page > .finder-section > .finder-disclaimer {
    padding: 13px 14px;
  }
}

/* Legacy quote anchor is retained as a direct referral to the standalone calculator. */
.incoterms-quotes-referral{scroll-margin-top:20px;background:#fff;border:1px solid #d9e5ed;border-radius:21px;padding:25px;margin:25px 0}
.incoterms-quotes-referral h2{color:#12325b;font-size:clamp(24px,3vw,33px);margin:0 0 10px}
.incoterms-quotes-referral p{color:#365875;margin:0 0 15px}
.incoterms-quotes-referral__link{display:inline-block;padding:11px 17px;border-radius:10px;background:#1769aa;color:#fff;font-weight:800;text-decoration:none}
.incoterms-explorer a.explorer-quote-handoff__button{text-decoration:none}
@media(max-width:600px){.incoterms-quotes-referral{padding:15px}}

/* Related resources grid: adapted without changing chart or explorer styles. */
/* FOB Related Shipping Resources: four-card SVG version of approved Incoterms design. */
.chart-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)}
.chart-page .fob-related-grid__heading{display:flex;align-items:center;gap:22px;margin-bottom:22px;min-width:0}
.chart-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)}
.chart-page .fob-related-grid__mark svg{width:43px;height:43px}
.chart-page .fob-related-grid__heading-copy{padding-left:22px;border-left:2px solid #37637e;min-width:0}
.chart-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}
.chart-page .fob-related-grid__heading p{margin:0;color:#283b50;font-size:clamp(15px,1.45vw,18px);line-height:1.4}
.chart-page .fob-related-grid__cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.chart-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}
.chart-page .fob-related-grid__illustration{display:block;width:126px;min-width:0}
.chart-page .fob-related-grid__illustration svg{display:block;width:100%;height:auto}
.chart-page .fob-related-grid__copy{display:flex;flex-direction:column;min-width:0;gap:6px;padding-left:12px;border-left:2px solid #b6d2ed}
.chart-page .fob-related-grid__copy strong{font-size:clamp(18px,1.65vw,22px);line-height:1.25;color:#0a3181;font-weight:800}
.chart-page .fob-related-grid__copy>span:not(.fob-related-grid__action){font-size:15px;line-height:1.45;color:#293848}
.chart-page .fob-related-grid__arrow{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#11784c;color:white;justify-self:end}
.chart-page .fob-related-grid__arrow svg{width:20px;height:20px}
.chart-page .fob-related-grid__action{display:none}
.chart-page .fob-related-grid__card:hover{background:#f3faff;border-color:#3f88cb}
.chart-page .fob-related-grid__card:hover strong{text-decoration:underline;text-underline-offset:3px}
.chart-page .fob-related-grid__card:focus-visible{outline:3px solid #0878dd;outline-offset:3px}
@media(max-width:1050px){.chart-page .fob-related-grid__card{grid-template-columns:98px minmax(0,1fr) 30px;gap:9px;padding:10px}.chart-page .fob-related-grid__illustration{width:98px}.chart-page .fob-related-grid__copy{padding-left:10px}.chart-page .fob-related-grid__copy strong{font-size:18px}.chart-page .fob-related-grid__copy>span:not(.fob-related-grid__action){font-size:14px}}
@media(max-width:760px){.chart-page .fob-related-grid{padding:18px 14px;border-radius:20px}.chart-page .fob-related-grid__cards{grid-template-columns:1fr;gap:10px}.chart-page .fob-related-grid__card{grid-template-columns:104px minmax(0,1fr);min-height:108px;gap:10px;padding:10px}.chart-page .fob-related-grid__illustration{width:104px}.chart-page .fob-related-grid__arrow{display:none}.chart-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}.chart-page .fob-related-grid__heading{gap:13px;margin-bottom:16px}.chart-page .fob-related-grid__mark{width:50px;height:50px;border-radius:11px}.chart-page .fob-related-grid__mark svg{width:33px;height:33px}.chart-page .fob-related-grid__heading-copy{padding-left:13px}.chart-page .fob-related-grid__heading h2{font-size:23px}.chart-page .fob-related-grid__heading p{font-size:14px}}
@media(max-width:390px){.chart-page .fob-related-grid{padding:14px 10px}.chart-page .fob-related-grid__card{grid-template-columns:80px minmax(0,1fr);gap:8px;padding:8px}.chart-page .fob-related-grid__illustration{width:80px}.chart-page .fob-related-grid__copy{padding-left:8px}.chart-page .fob-related-grid__copy strong{font-size:16px}.chart-page .fob-related-grid__copy>span:not(.fob-related-grid__action){font-size:13px}.chart-page .fob-related-grid__heading h2{font-size:20px}}



/* Quote Comparison quick-help system: adapted from approved Fuel Surcharge guides.
   Kept under .chart-page to avoid conflicts with the calculator and site UI. */
.chart-page .iex-help{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.45fr);align-items:center;gap:1rem;border:1px solid #f1d781;border-radius:1rem;background:linear-gradient(100deg,#fffaf0,#fffbea 45%,#fff9df);padding:.95rem 1.15rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.chart-page .iex-help__toggle{display:none}
.chart-page .iex-help__intro{display:grid;grid-template-columns:2.75rem minmax(0,1fr);align-items:center;gap:.75rem;min-width:0;padding-right:1rem;border-right:1px solid #e4dfcc}
.chart-page .iex-help__bulb{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;font-size:2rem;line-height:1}
.chart-page .iex-help__copy{min-width:0}
.chart-page .iex-help__copy strong{display:block;color:#12325b;font-size:1rem;font-weight:800;line-height:1.2}
.chart-page .iex-help__copy>span{display:block;margin-top:.26rem;color:#52677b;font-size:.82rem;font-weight:500;line-height:1.4}
.chart-page .iex-help__mobile-toggle{display:none}
.chart-page .iex-help__actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;min-width:0}
.chart-page .iex-help__actions button{display:flex;min-width:0;min-height:3.7rem;align-items:center;justify-content:center;gap:.55rem;border:1.5px solid #eebd20;border-radius:.85rem;background:linear-gradient(180deg,#fff8c8,#fff4a6);padding:.7rem .6rem;color:#173b63;font-size:.83rem;font-weight:800;line-height:1.2;text-align:center;cursor:pointer;box-shadow:0 4px 0 #e1b20d,0 7px 12px rgba(181,134,0,.08)}
.chart-page .iex-help__actions button:hover{background:linear-gradient(180deg,#fff5ae,#ffe97a)}
.chart-page .iex-help__actions button svg{display:block;width:1.35rem;height:1.35rem;flex:0 0 1.35rem;color:#173b63}
.chart-page .iex-help__actions button:focus-visible{outline:3px solid #1769aa;outline-offset:3px}
.chart-page .iex-guide[popover]{position:fixed;inset:50% auto auto 50%;width:min(49rem,calc(100vw - 2rem));max-height:min(86dvh,54rem);margin:0;overflow:auto;transform:translate(-50%,-50%);border:2px solid #1769aa;border-radius:1rem;background:#fff;padding:1.25rem;color:#173b63;box-shadow:0 28px 80px rgba(15,47,79,.34);font-family:Inter,system-ui,sans-serif}
.chart-page .iex-guide::backdrop{background:rgba(8,27,48,.68)}
.chart-page .iex-guide__head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:start;border-bottom:2px solid #d6e6f2;padding-bottom:.9rem}
.chart-page .iex-guide__head span{display:block;margin-bottom:.3rem;color:#1769aa;font-size:.7rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.chart-page .iex-guide__head h2{margin:0;color:#0f2f4f;font-size:1.5rem;font-weight:900;line-height:1.2}
.chart-page .iex-guide__close{display:flex;width:2.65rem;height:2.65rem;flex:none;align-items:center;justify-content:center;border:2px solid #1769aa;border-radius:.55rem;background:#1769aa;padding:0;color:#fff;font-size:1.8rem;font-weight:900;line-height:1;cursor:pointer}
.chart-page .iex-guide__close:hover{background:#0f568f}
.chart-page .iex-guide__intro{margin:1rem 0 0;color:#52677b;font-size:.91rem;font-weight:650;line-height:1.55}
.chart-page .iex-guide__steps{display:grid;gap:.7rem;margin:1rem 0 0;padding:0;list-style:none}
.chart-page .iex-guide__steps li{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:.75rem;align-items:start;border:1px solid #b9cfdf;border-left:5px solid #1769aa;border-radius:.6rem;background:#f7fbff;padding:.8rem .9rem}
.chart-page .iex-guide__steps li>span{display:flex;width:2.35rem;height:2.35rem;align-items:center;justify-content:center;border-radius:.45rem;background:#1769aa;color:#fff;font-weight:900}
.chart-page .iex-guide__steps strong,.chart-page .iex-guide__checks strong{color:#0f2f4f;font-size:.91rem;font-weight:800}
.chart-page .iex-guide__steps p,.chart-page .iex-guide__checks p{margin:.2rem 0 0;color:#52677b;font-size:.83rem;font-weight:600;line-height:1.5}
.chart-page .iex-guide__note{margin:.9rem 0 0;border:1px solid #e5bd4f;border-left:5px solid #d99a00;border-radius:.55rem;background:#fffaf0;padding:.85rem 1rem;color:#5f5540;font-size:.83rem;font-weight:700;line-height:1.5}
.chart-page .iex-guide__note strong{color:#3f3829;font-weight:900}
.chart-page .iex-flow{display:grid;justify-items:center;gap:.35rem;margin-top:1rem;border:1px solid #b9d7ec;border-radius:.85rem;background:#f5fbff;padding:1rem}
.chart-page .iex-flow__inputs{display:grid;grid-template-columns:minmax(0,1fr) 2rem minmax(0,1fr);align-items:center;gap:.6rem;width:100%}
.chart-page .iex-flow__operator{font-size:2rem;font-weight:900;color:#0f4e85;text-align:center}
.chart-page .iex-flow__box{display:grid;gap:.3rem;align-content:center;text-align:center;border:2px solid;border-radius:.65rem;padding:.8rem .6rem;min-height:5rem}
.chart-page .iex-flow__box small{font-size:.66rem;letter-spacing:.08em;font-weight:900}
.chart-page .iex-flow__box strong{font-size:.96rem;line-height:1.25;font-weight:900}
.chart-page .iex-flow__box--blue{background:#166bad;color:#fff;border-color:#084a83}
.chart-page .iex-flow__box--amber{background:#ffe69a;color:#392700;border-color:#d89b00}
.chart-page .iex-flow__arrow{font-size:1.45rem;line-height:1.2;color:#1769aa;font-weight:900}
.chart-page .iex-flow__box--total{background:#07885d;color:#fff;border-color:#046747;width:min(100%,22rem);box-shadow:0 4px 0 #056744}
.chart-page .iex-flow__branches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;width:100%}
.chart-page .iex-flow__branches>div{display:grid;gap:.3rem;align-content:center;border:2px solid #9bc8e5;border-radius:.55rem;background:#fff;padding:.7rem .45rem;text-align:center}
.chart-page .iex-flow__branches>div:nth-child(1){border-color:#07885d;background:#e8fff4}
.chart-page .iex-flow__branches>div:nth-child(2){border-color:#e7a527;background:#fff6d9}
.chart-page .iex-flow__branches>div:nth-child(3){border-color:#3478b8;background:#eaf5ff}
.chart-page .iex-flow__branches b{font-size:.78rem;color:#12325b;line-height:1.25}
.chart-page .iex-flow__branches span{font-size:.75rem;color:#385774;font-weight:700}
.chart-page .iex-flow__foot{font-size:.78rem;font-weight:700;color:#405d75;text-align:center;margin-top:.5rem}
.chart-page .iex-guide__example{display:grid;gap:.28rem;margin-top:.85rem;border:1px solid #a5cdeb;border-radius:.7rem;background:#eef8ff;padding:.9rem 1rem}
.chart-page .iex-guide__example>span{color:#1769aa;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.chart-page .iex-guide__example>strong{font-size:.92rem;color:#12325b}
.chart-page .iex-guide__example p{color:#52677b;font-size:.82rem;font-weight:600}
.chart-page .iex-guide__info{margin-top:.8rem;border:1px solid #c0d7e9;border-left:5px solid #1769aa;border-radius:.6rem;background:#f7fbff;padding:.8rem 1rem}
.chart-page .iex-guide__info strong{color:#0f2f4f;font-size:.9rem}
.chart-page .iex-guide__info p{margin-top:.3rem;color:#52677b;font-size:.83rem;font-weight:600}
.chart-page .iex-guide__checks{display:grid;gap:.65rem;margin-top:1rem}
.chart-page .iex-guide__checks>div{display:grid;grid-template-columns:2.15rem minmax(0,1fr);gap:.8rem;border:1px solid #b9cfdf;border-left:5px solid #1769aa;border-radius:.6rem;background:#f7fbff;padding:.8rem .9rem}
.chart-page .iex-guide__checks>div>span{display:grid;place-items:center;width:2rem;height:2rem;border-radius:.5rem;background:#07885d;color:#fff;font-weight:900;font-size:1.1rem}
@media(max-width:850px){.chart-page .iex-help{grid-template-columns:1fr;gap:.75rem}.chart-page .iex-help__intro{border-right:0;border-bottom:1px solid #e4dfcc;padding:0 0 .7rem}}
@media(max-width:600px){.chart-page .iex-help{padding:.7rem;gap:.4rem}.chart-page .iex-help__intro{grid-template-columns:2.15rem minmax(0,1fr) auto;gap:.55rem;min-height:3.8rem;border:0;padding:.55rem .3rem}.chart-page .iex-help__bulb{width:2.15rem;height:2.15rem;font-size:1.55rem}.chart-page .iex-help__copy strong{font-size:.9rem}.chart-page .iex-help__copy>span{font-size:.72rem}.chart-page .iex-help__mobile-toggle{display:inline-flex;align-items:center;gap:.3rem;font-size:.69rem;font-weight:900;color:#173b63;cursor:pointer;white-space:nowrap}.chart-page .iex-help__mobile-toggle svg{width:1rem;height:1rem}.chart-page .iex-help__hide{display:none}.chart-page .iex-help__actions{display:none;grid-template-columns:1fr;gap:.55rem}.chart-page .iex-help__toggle:checked~.iex-help__actions{display:grid;margin:.15rem .3rem .5rem}.chart-page .iex-help__toggle:checked~.iex-help__intro .iex-help__show{display:none}.chart-page .iex-help__toggle:checked~.iex-help__intro .iex-help__hide{display:inline}.chart-page .iex-help__actions button{justify-content:flex-start;min-height:3.2rem;padding:.7rem 1rem;font-size:.82rem}.chart-page .iex-guide[popover]{width:calc(100vw - 1rem);max-height:90dvh;padding:.9rem}.chart-page .iex-guide__head h2{font-size:1.2rem}.chart-page .iex-flow{padding:.65rem}.chart-page .iex-flow__inputs{grid-template-columns:minmax(0,1fr) 1.1rem minmax(0,1fr);gap:.3rem}.chart-page .iex-flow__operator{font-size:1.4rem}.chart-page .iex-flow__box{padding:.6rem .35rem}.chart-page .iex-flow__box strong{font-size:.8rem}.chart-page .iex-flow__box small{font-size:.55rem}.chart-page .iex-flow__branches{grid-template-columns:1fr}.chart-page .iex-flow__branches>div{grid-template-columns:1fr 1fr;align-items:center;text-align:left;gap:.5rem}.chart-page .iex-guide__steps li{padding:.7rem;grid-template-columns:2.1rem minmax(0,1fr)}.chart-page .iex-guide__steps li>span{width:2rem;height:2rem}}


/* Explorer guide refinements: approved pale cream raised buttons and stacked mobile CTA. */
.chart-page .iex-help__actions button{background:#fff5db;border:1.5px solid #e5a000;color:#12325b;box-shadow:0 4px 0 #d5a000,0 7px 12px rgba(181,134,0,.10)}
.chart-page .iex-help__actions button:hover{background:#fff0c2}
.chart-page .iex-help__actions button svg{color:#12325b}
.chart-page .iex-guide[popover]{z-index:10020}
.chart-page .iex-journey{margin-top:1rem;border:1px solid #b7d8ec;border-radius:.8rem;background:#f5fbff;padding:1.2rem 1rem 1rem;overflow:hidden}
.chart-page .iex-journey__title{font-size:.72rem;color:#1769aa;font-weight:900;letter-spacing:.06em;text-align:center}
.chart-page .iex-journey__track{position:relative;height:100px;margin:1.5rem .65rem .2rem;border-radius:9px;background:linear-gradient(to right,#ffe1a2,#ffe1a2);background-size:100% 12px;background-position:center;background-repeat:no-repeat}
.chart-page .iex-journey__paid{position:absolute;left:0;top:44px;height:12px;width:84%;background:#3168a9;border-radius:6px}
.chart-page .iex-journey__risk,.chart-page .iex-journey__cost{position:absolute;top:0;display:grid;justify-items:center;gap:4px;transform:translateX(-50%)}
.chart-page .iex-journey__risk{left:23%;color:#087b56}.chart-page .iex-journey__cost{left:84%;color:#3168a9}
.chart-page .iex-journey__risk b,.chart-page .iex-journey__cost b{font-size:.68rem;white-space:nowrap;background:currentColor;border-radius:5px;padding:5px 7px;color:inherit;line-height:1.2}
.chart-page .iex-journey__risk b{background:#087b56;color:white}.chart-page .iex-journey__cost b{background:#3168a9;color:white}
.chart-page .iex-journey__risk i,.chart-page .iex-journey__cost i{height:48px;width:4px;background:currentColor;display:block;position:relative}
.chart-page .iex-journey__risk i:after,.chart-page .iex-journey__cost i:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%,50%);width:15px;height:15px;border:3px solid white;border-radius:50%;background:currentColor;box-shadow:0 0 0 2px currentColor}
.chart-page .iex-journey__ends{display:flex;justify-content:space-between;margin:0 .5rem;color:#12325b;font-size:.8rem;font-weight:800}
.chart-page .iex-journey__key{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1rem;margin-top:.8rem;color:#294968;font-size:.75rem;font-weight:700}
.chart-page .iex-journey__key span{display:inline-flex;align-items:center;gap:.4rem}
.chart-page .iex-journey__key i{display:inline-block;width:12px;height:12px;border-radius:3px;background:#087b56}
.chart-page .iex-journey__key .iex-journey__dot--blue{background:#3168a9}
@media(max-width:600px){
 .chart-page .iex-help__intro{grid-template-columns:2.15rem minmax(0,1fr);gap:.55rem;padding:.55rem .3rem}
 .chart-page .iex-help__mobile-toggle{grid-column:2;justify-self:start;margin-top:.55rem;display:inline-flex;align-items:center;justify-content:center;gap:1rem;min-height:3.7rem;padding:.75rem 1.2rem;border:1px solid #068352;border-bottom:5px solid #006b45;border-radius:1rem;background:linear-gradient(180deg,#11c58d,#058e60);color:#fff;font-size:1rem;font-weight:900;box-shadow:0 8px 16px rgba(7,136,93,.16);white-space:normal}
 .chart-page .iex-help__mobile-toggle svg{width:1.35rem;height:1.35rem}
 .chart-page .iex-help__toggle:checked~.iex-help__actions{margin:.4rem .3rem .5rem}
 .chart-page .iex-journey{padding:.85rem .45rem}
 .chart-page .iex-journey__risk b,.chart-page .iex-journey__cost b{font-size:.57rem;padding:5px 4px}
 .chart-page .iex-journey__risk{left:25%}.chart-page .iex-journey__cost{left:80%}
 .chart-page .iex-journey__paid{width:80%}
}

/* Mobile journey navigation: always-visible range control below the wide illustration. */
.journey-pan-control { display: none; }
@media (max-width: 767px) {
  .journey-pan-control { display: grid; gap: 7px; margin: 7px 0 18px; }
  .journey-pan-control label { color: #12325b; font-size: 14px; font-weight: 800; line-height: 1.35; }
  .journey-pan-control input[type="range"] {
    display: block; width: 100%; height: 34px; margin: 0; padding: 0;
    appearance: none; -webkit-appearance: none; background: transparent; cursor: ew-resize;
  }
  .journey-pan-control input[type="range"]::-webkit-slider-runnable-track {
    height: 10px; border: 1px solid #8bb6d8; border-radius: 8px; background: #d7eaf7;
  }
  .journey-pan-control input[type="range"]::-moz-range-track {
    height: 10px; border: 1px solid #8bb6d8; border-radius: 8px; background: #d7eaf7;
  }
  .journey-pan-control input[type="range"]::-webkit-slider-thumb {
    appearance: none; -webkit-appearance: none; width: 30px; height: 30px;
    margin-top: -11px; border: 3px solid #fff; border-radius: 50%;
    background: #1769aa; box-shadow: 0 0 0 2px #0b5c98;
  }
  .journey-pan-control input[type="range"]::-moz-range-thumb {
    width: 24px; height: 24px; border: 3px solid #fff; border-radius: 50%;
    background: #1769aa; box-shadow: 0 0 0 2px #0b5c98;
  }
  .journey-pan-control input[type="range"]:focus-visible { outline: 3px solid #f0ac18; outline-offset: 3px; }
  .journey-pan-control input[type="range"]:disabled { opacity: .5; cursor: default; }
}


/* Mobile explorer readability: keep the two journey labels separate, and let
   the customs chips and obligation cards use their natural text height. */
@media (max-width: 600px) {
  .incoterms-explorer .lanes { gap: 14px; }
  .incoterms-explorer .lane {
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .incoterms-explorer .lane .name,
  .incoterms-explorer .lane .who {
    position: static;
    inset: auto;
    width: auto;
    max-width: 100%;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  .incoterms-explorer .lane .who { font-size: 12px; }
  .incoterms-explorer .bar {
    position: relative;
    inset: auto;
    width: 100%;
    height: 36px;
  }
  .incoterms-explorer .forms {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 8px;
    height: auto;
    margin-top: 6px;
  }
  .incoterms-explorer .forms .name,
  .incoterms-explorer .forms .fp {
    position: static;
    inset: auto;
    transform: none;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .incoterms-explorer .forms .name { order: -1; line-height: 1.4; }
  .incoterms-explorer .fp { font-size: 13px; }
  .incoterms-explorer .obl { grid-template-columns: minmax(0, 1fr); }
  .incoterms-explorer .ob { min-height: 0; padding: 15px; }
  .incoterms-explorer .ob .n { font-size: 15px; line-height: 1.4; }
  .incoterms-explorer .ob .x { font-size: 13px; line-height: 1.5; }
}


/* Shared explorer behavior: respect the hidden attribute on dynamically updated controls. */
.incoterms-explorer [hidden] { display: none !important; }

/* Integrated V4 mobile explorer. Desktop keeps its established layout. */
.mx-embedded { display: none; }
@media (max-width: 900px) {
  #incoterms-cost-and-risk-chart > :not(.mx-embedded) { display: none !important; }
  .explorer-checklist-section { display: none !important; }
  .mx-embedded { display: block; }
  #incoterms-cost-and-risk-chart { margin-top: 12px; }
  /* The integrated page already supplies the outer gutter. Do not nest the
     desktop section card and standalone prototype gutters around mobile cards. */
  .chart-page > #incoterms-cost-and-risk-chart {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
  .mx-embedded .mx-wrap {
    max-width: 560px;
    margin-inline: auto;
    padding: 0 0 24px;
  }
}

/* -------- Approved standalone mobile prototype V4 (component-scoped) -------- */
/* Incoterms 2020 — mobile explorer PROTOTYPE (iteration 2), in the FreightClassCalculator.tools theme.
   Isolated: every rule is scoped to .mx-page / .mx / .mx-*; nothing here reads or overrides
   incoterms-2020-chart.css, and that file is not loaded by the prototype page. */
@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-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 900;font-display:swap}

.mx-page{
  /* Site palette: navy headings, raised blue actions, green results, yellow help, white rounded cards. */
  --page:#F5F9FC; --card:#FFFFFF; --navy:#0F2547; --ink:#1F3550; --muted:#294968; --label:#173B63;
  --line:#D9E5ED; --line-2:#CFDDEA;
  --blue:#1A5CE8; --blue-ink:#0B48B8; --blue-soft:#EEF5FF; --blue-line:#A9C8F5; --blue-sel:#2563EB;
  --btn-top:#167DFF; --btn-bot:#0663EF; --btn-edge:#074DCC;
  --green:#087A55; --green-ink:#05583C; --green-soft:#ECFBF4; --green-line:#8FDDBA; --mint:#EFFBF5;
  --yellow:#FFC400; --yellow-deep:#D79A00; --cream:#FFFBEA; --cream-line:#F1D781; --help-top:#FFF8C8; --help-bot:#FFF4A6; --help-edge:#E1B20D;
  --buyer-ink:#6B4A00; --buyer-hatch:repeating-linear-gradient(135deg,#FFC400 0 4px,#FFE68A 4px 8px);
  --shadow:0 6px 18px rgba(15,47,79,.06);
  margin:0; background:var(--page); color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:16px; line-height:1.5;
  -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; color-scheme:light;
}
.mx-page *,.mx-page *::before,.mx-page *::after{box-sizing:border-box}
.mx-page [hidden]{display:none!important}
.mx-page button{font-family:inherit}
.mx-page :focus-visible{outline:3px solid var(--blue);outline-offset:2px}

.mx-wrap{max-width:560px;margin:0 auto;padding:12px max(12px,env(safe-area-inset-right)) 40px max(12px,env(safe-area-inset-left))}
.mx-proto{margin:0 0 12px;padding:6px 12px;border-radius:999px;background:#FFF36A;border:1px solid #D6B10D;color:#173B63;font-size:13px;font-weight:800;display:inline-block}
.mx-h1{margin:0;font-size:28px;line-height:1.15;font-weight:800;color:var(--navy);letter-spacing:-.025em;text-wrap:balance}
.mx-intro{margin:8px 0 16px;font-size:16px;color:var(--muted);font-weight:500}
.mx-legal{margin:18px 2px 0;font-size:14px;color:var(--muted)}

.mx{display:grid;gap:14px}
.mx h2{margin:0;font-size:21px;line-height:1.25;font-weight:800;color:var(--navy);letter-spacing:-.015em}
.mx p{margin:0}
.mx-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 14px;box-shadow:var(--shadow);scroll-margin-top:60px}
.mx-sub{margin-top:4px!important;font-size:15px;color:var(--muted)}
.mx-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.mx-help-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:1.5px solid #EEBD20;border-bottom:4px solid var(--help-edge);border-radius:12px;background:linear-gradient(180deg,var(--help-top),var(--help-bot));color:var(--navy);font-size:14px;font-weight:800;cursor:pointer;white-space:nowrap}
.mx-help-btn svg{width:20px;height:20px;color:#B07D00;flex:none}

/* ---------- picker ---------- */
.mx-pick-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mx-cur{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;margin-top:12px;padding:6px 6px 6px 12px;border:2px solid var(--blue-sel);border-radius:14px;background:var(--blue-soft)}
.mx-cur-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-width:0;line-height:1.3}
.mx-cur-l{width:100%;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--label)}
.mx-cur-t b{font-size:20px;font-weight:900;color:var(--blue)}
.mx-cur-n{font-size:15px;font-weight:700;color:var(--navy);min-width:0}
.mx-cur-btn{min-height:44px;padding:0 14px;border:2px solid var(--blue);border-radius:12px;background:#fff;color:var(--blue-ink);font-size:14px;font-weight:800;cursor:pointer;white-space:nowrap}
.mx-pick[data-open="true"] .mx-cur{display:none}
.mx-group{margin-top:14px}
.mx-group h3{margin:0 0 8px;font-size:14px;line-height:1.35;font-weight:800;color:var(--label)}
.mx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mx-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.mx-rule{display:grid;align-content:center;justify-items:center;gap:1px;min-height:58px;padding:6px 4px;border:2px solid var(--line-2);border-radius:12px;background:#fff;color:var(--navy);text-align:center;cursor:pointer}
.mx-rule b{font-size:18px;font-weight:900;letter-spacing:.02em;line-height:1.15}
.mx-rule span{font-size:13px;line-height:1.2;font-weight:600;color:var(--muted)}
.mx-rule[aria-pressed="true"]{border-color:var(--blue-sel);background:#F2F7FF;box-shadow:0 4px 12px rgba(37,99,235,.16)}
.mx-rule[aria-pressed="true"] b{color:var(--blue)}
.mx-gnote{margin-top:6px!important;font-size:14px;color:var(--muted)}

/* ---------- experimental sticky rule bar: 48px tall, buttons 44px ---------- */
.mx-sticky{position:fixed;z-index:30;left:0;right:0;top:0;height:48px;display:grid;grid-template-columns:72px minmax(0,1fr) 72px;align-items:center;gap:6px;padding:2px max(6px,env(safe-area-inset-right)) 2px max(6px,env(safe-area-inset-left));background:#fff;border-bottom:1px solid var(--line);box-shadow:0 4px 14px rgba(15,47,79,.10)}
.mx-st-btn{height:44px;padding:0 4px;font-size:16px;border:2px solid #0D79FF;border-bottom:4px solid var(--btn-edge);border-radius:12px;background:linear-gradient(180deg,var(--btn-top),var(--btn-bot));color:#fff;font-weight:800;cursor:pointer}
.mx-st-prev{grid-column:1}.mx-st-next{grid-column:3}
.mx-st-prev::before{content:"‹ "}.mx-st-next::after{content:" ›"}
.mx-st-cur{grid-column:2;height:44px;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;color:var(--navy);text-decoration:none}
.mx-st-cur b{flex:none;font-size:20px;font-weight:900;color:var(--blue)}
.mx-st-cur span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:700}

/* ---------- summary ---------- */
.mx-sum{padding:0;overflow:hidden}
.mx-sum-top{padding:14px 14px 12px;background:linear-gradient(180deg,var(--mint),#fff);border-bottom:1px solid var(--line)}
.mx-eyebrow{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--label)}
.mx .mx-code{margin-top:6px;font-size:48px;line-height:1.05;font-weight:900;letter-spacing:-.03em;color:var(--blue)}
.mx-name{margin-top:6px!important;font-size:19px;font-weight:800;color:var(--navy);line-height:1.3}
.mx-quote{margin-top:4px!important;font-size:15px;color:var(--muted)}
.mx-quote b{color:var(--navy)}
.mx-sum-body{padding:14px}
.mx-points{display:grid;gap:8px}
.mx-pt{padding:10px 12px;border-radius:12px;border:1.5px solid}
.mx-pt-r{background:var(--green-soft);border-color:var(--green-line)}
.mx-pt-c{background:var(--blue-soft);border-color:var(--blue-line)}
.mx-pt-k{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800}
.mx-pt-r .mx-pt-k{color:var(--green-ink)}
.mx-pt-c .mx-pt-k{color:var(--blue-ink)}
.mx-pt-v{margin-top:2px!important;font-size:15px;color:var(--ink)}
.mx-ic-r{flex:none;width:11px;height:11px;margin:0 2px;background:var(--green);transform:rotate(45deg)}
.mx-ic-c{flex:none;width:12px;height:12px;border-radius:2px;background:var(--blue)}
.mx-split{padding:10px 12px;border-radius:12px;background:var(--cream);border:1.5px solid var(--cream-line);border-left:5px solid var(--yellow);font-size:15px;color:var(--ink)}
.mx-split b{color:var(--navy)}
.mx-same{font-size:15px;color:var(--muted)}
.mx-ess{margin-top:14px!important;font-size:16px}

.mx-var{margin:14px 0 0;padding:0;border:0;display:grid;gap:8px}
.mx-var legend{float:left;width:100%;padding:0;margin-bottom:2px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--label)}
.mx-opt{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 12px;border:2px solid var(--line-2);border-radius:12px;background:#fff;font-size:15px;font-weight:700;color:var(--navy);cursor:pointer}
.mx-opt input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--blue)}
.mx-opt:has(input:checked){border-color:#2F88EF;background:#EAF5FF}
.mx-vnote{font-size:14px;color:var(--muted)}

/* ---------- vertical journey ---------- */
.mx-view{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.mx-view>span{grid-column:1/-1;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--label)}
.mx-view button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border:2px solid var(--line-2);border-radius:12px;background:#fff;color:var(--navy);font-size:15px;font-weight:800;cursor:pointer}
.mx-view button::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:2px solid #9FB3C6;background:#fff}
.mx-view button[aria-pressed="true"]{border-color:#2F88EF;background:#EAF5FF;color:var(--blue-ink)}
.mx-view button[aria-pressed="true"]::before{border:5px solid var(--blue)}
.mx-view button:disabled{color:#35516B;background:#F2F5F8;border-style:dashed;cursor:not-allowed}
.mx-view-note{margin-top:6px!important;font-size:14px;color:var(--muted)}
.mx-legend{display:flex;align-items:center;gap:6px;margin-top:14px!important;font-size:14px;font-weight:700;color:var(--ink)}
.mx-sw{display:inline-block;width:16px;height:16px;border-radius:4px}
.mx-sw.S{background:var(--blue)}
.mx-sw.B{background:var(--buyer-hatch);box-shadow:inset 0 0 0 1px var(--yellow-deep);margin-left:10px}
/* Column labels sit directly above their bars; each has a leader line down into its bar. */
.mx-cols{position:relative;display:grid;gap:2px;margin-top:10px;padding-bottom:12px;font-size:14px;line-height:21px;color:var(--ink)}
.mx-col b{font-weight:800;color:var(--navy)}
.mx-col.r{padding-left:20px}
.mx-cols::before,.mx-cols::after{content:"";position:absolute;bottom:0;width:2px;background:var(--navy)}
.mx-cols::before{left:6px;top:22px}
.mx-cols::after{left:26px;top:45px}

.mx-rows{list-style:none;margin:0;padding:0}
.mx-row{display:grid;grid-template-columns:34px 18px minmax(0,1fr);column-gap:8px;border-radius:10px}
.mx-bars{display:grid;grid-template-columns:14px 14px;gap:6px;align-self:stretch}
.mx-bar{display:grid;grid-template-rows:23px 1fr}
.mx-bar i.S{background:var(--blue)}
.mx-bar i.B{background:var(--buyer-hatch)}
.mx-bar i.N{background:linear-gradient(var(--navy),var(--navy)) center/2px 100% no-repeat}
.mx-row:last-child .mx-bar i:last-child{border-radius:0 0 4px 4px;min-height:10px}
.mx-dot{position:relative}
.mx-dot::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;background:#C9D7E3}
.mx-row:first-child .mx-dot::before{top:23px}
.mx-row:last-child .mx-dot::before{bottom:auto;height:23px}
.mx-dot::after{content:"";position:absolute;left:2px;top:16px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #9FB3C6}
.mx-leg .mx-dot::after{display:none}
.mx-leg .mx-dot::before{background:repeating-linear-gradient(180deg,#9FB3C6 0 5px,transparent 5px 9px)}
.mx-dot.on::after{background:var(--navy);border-color:var(--navy)}
.mx-dot.on.r::after{background:var(--green);border-color:var(--green);border-radius:2px;transform:rotate(45deg);width:12px;height:12px;left:3px;top:17px}
.mx-dot.on.c::after{background:var(--blue);border-color:var(--blue);border-radius:3px}
.mx-row-b{min-width:0;padding:12px 4px 14px 0}
.mx-row-l{font-size:16px;font-weight:800;line-height:1.35;color:var(--navy)}
.mx-row-s{margin-top:2px!important;font-size:14px;line-height:1.4;color:var(--muted)}
.mx-leg .mx-row-l{font-weight:700;color:var(--muted)}
.mx-gap{background:var(--cream);box-shadow:inset 0 0 0 1.5px var(--cream-line)}
.mx-gap-tag{margin-top:6px!important;display:inline-block;padding:4px 10px;border-radius:10px;border:1.5px solid var(--cream-line);border-left:4px solid var(--yellow);background:#fff;font-size:14px;font-weight:800;color:var(--buyer-ink)}
.mx-mk{display:flex;align-items:center;gap:8px;margin-top:8px!important;padding:6px 10px;border-radius:10px;border:1.5px solid;font-size:15px;font-weight:800;line-height:1.3}
.mx-mk i{flex:none;width:10px;height:10px}
.mx-mk-r{background:var(--green-soft);border-color:var(--green-line);color:var(--green-ink)}
.mx-mk-r i{background:var(--green);transform:rotate(45deg);margin:0 1px}
.mx-mk-c{background:var(--blue-soft);border-color:var(--blue-line);color:var(--blue-ink)}
.mx-mk-c i{background:var(--blue);border-radius:2px}
.mx-cu{display:inline-block;margin:8px 6px 0 0!important;padding:4px 10px;border-radius:999px;border:1.5px solid;font-size:14px;line-height:1.35;font-weight:600}
.mx-cu.S{background:var(--blue-soft);border-color:var(--blue-line)}
.mx-cu.S b{color:var(--blue-ink)}
.mx-cu.B{background:var(--cream);border-color:var(--cream-line)}
.mx-cu.B b{color:var(--buyer-ink)}

/* ---------- who handles what ---------- */
.mx-obl{list-style:none;margin:6px 0 0;padding:0}
.mx-ob{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:12px 0;border-top:1px solid var(--line)}
.mx-ob:first-child{border-top:0}
.mx-ob-n{font-size:16px;font-weight:800;color:var(--navy);line-height:1.35}
.mx-badge{padding:4px 12px;border-radius:999px;border:1.5px solid;font-size:14px;font-weight:800;white-space:nowrap}
.mx-badge.S{background:var(--blue-soft);border-color:var(--blue-line);color:var(--blue-ink)}
.mx-badge.B{background:var(--cream);border-color:var(--cream-line);color:var(--buyer-ink)}
.mx-badge.N,.mx-badge.K{background:#EEF2F6;border-color:#C6D2DD;color:#33495E}
.mx-ob-x{grid-column:1/-1;font-size:14px;line-height:1.45;color:var(--muted)}

.mx-watch{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;background:var(--cream);border:1.5px solid var(--cream-line);font-size:16px;box-shadow:none}
.mx-bulb{width:28px;height:28px;color:#B07D00}
.mx-watch b{color:var(--navy)}

.mx-cmp{display:grid;gap:10px;margin-top:10px}
.mx-nb{display:grid;grid-template-columns:minmax(0,1fr) 32px;align-items:center;gap:4px 10px;width:100%;padding:12px;min-height:56px;border:2px solid var(--line-2);border-radius:14px;background:#fff;color:var(--ink);font-size:15px;text-align:left;cursor:pointer}
.mx-nb-dir{grid-column:1/-1;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--label)}
.mx-nb-main{display:grid;gap:2px;min-width:0}
.mx-nb-main b{font-size:19px;font-weight:900;color:var(--blue)}
.mx-chev{display:grid;place-items:center;width:32px;height:32px;border-radius:7px;border:2px solid var(--blue-line);background:#fff;color:var(--blue-ink);font-size:24px;font-weight:900;line-height:1}
.mx-nb:hover{border-color:var(--blue-line)}

/* ---------- checklist ---------- */
.mx-prog{margin-top:12px;font-size:15px;font-weight:700}
.mx-prog b{color:var(--green)}
.mx-pbar{height:10px;margin-top:6px;border-radius:5px;background:#E3EDF6;overflow:hidden}
.mx-pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#10C566,#06994D);transition:width .3s}
.mx-ck-note{margin-top:12px!important;padding:10px 12px;border-radius:12px;background:#F3F9FF;border:1px solid #D4E5F4;font-size:14px}
.mx-qlist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.mx-q{padding:12px;border:1.5px solid var(--line-2);border-radius:14px;background:#fff}
.mx-q-main{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;min-height:44px;cursor:pointer;position:relative}
.mx-q-main input{position:absolute;opacity:0;width:28px;height:28px;margin:0}
.mx-box{width:28px;height:28px;border-radius:8px;border:2px solid #8EA6BB;display:grid;place-items:center;background:#fff}
.mx-box svg{width:17px;height:17px;opacity:0}
.mx-q-main input:focus-visible+.mx-box{outline:3px solid var(--blue);outline-offset:2px}
.mx-q-t{font-size:16px;font-weight:800;line-height:1.35;color:var(--navy)}
.mx-tag{display:inline-block;margin-right:6px;padding:1px 8px;border-radius:999px;border:1px solid;font-size:13px;font-weight:800;vertical-align:1px}
.mx-tag.cost{background:var(--blue-soft);border-color:var(--blue-line);color:var(--blue-ink)}
.mx-tag.risk{background:var(--green-soft);border-color:var(--green-line);color:var(--green-ink)}
.mx-tag.customs{background:var(--cream);border-color:var(--cream-line);color:var(--buyer-ink)}
.mx-tag.place{background:#F3F6FA;border-color:#C6D2DD;color:var(--navy)}
.mx-why{margin:6px 0 0 38px!important;font-size:15px;line-height:1.45;color:var(--muted)}
.mx-q-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:8px 0 0 38px}
.mx-basis{font-size:13px;font-weight:700;flex:1 1 9rem}
.mx-basis.rule,.mx-basis.guide,.mx-basis.contract,.mx-basis.law{color:#173B63}
.mx-na{flex:none;min-height:44px;padding:0 14px;border:1.5px solid var(--line-2);border-radius:999px;background:#fff;color:var(--muted);font-size:14px;font-weight:800;cursor:pointer}
.mx-q.done{border-color:var(--green-line);background:#F4FFF9}
.mx-q.done .mx-box{background:linear-gradient(135deg,#10C566,#06994D);border-color:#06994D}
.mx-q.done .mx-box svg{opacity:1}
.mx-q.na{background:#F5F8FB;border-style:dashed}
.mx-q.na .mx-q-main,.mx-q.na .mx-why,.mx-q.na .mx-basis{opacity:1}
.mx-q.na .mx-na{color:var(--blue-ink);border-color:var(--blue-line)}
.mx-ck-actions{display:grid;gap:10px;margin-top:14px}
.mx-btn{min-height:52px;padding:0 16px;border:2px solid #0D79FF;border-bottom:5px solid var(--btn-edge);border-radius:12px;background:linear-gradient(180deg,var(--btn-top),var(--btn-bot));color:#fff;font-size:16px;font-weight:800;cursor:pointer}
.mx-btn.ghost{min-height:48px;background:#fff;color:var(--blue-ink);border:2px solid var(--blue-line)}
.mx-ck-msg{font-size:15px;font-weight:700;color:var(--green)}
.mx-ck-box{width:100%;min-height:140px;margin-top:8px;padding:10px;border:1.5px solid var(--line-2);border-radius:12px;font:15px/1.5 Inter,system-ui,sans-serif;color:var(--ink)}

/* ---------- guide dialog ---------- */
.mx-guide{width:min(34rem,calc(100vw - 24px));max-height:88dvh;padding:16px;border:2px solid var(--blue);border-radius:18px;color:var(--ink);font-size:16px}
.mx-guide::backdrop{background:rgba(8,27,48,.6)}
.mx-guide p{margin-top:10px!important}
.mx-guide-head{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:12px;align-items:start}
.mx-guide-close{width:44px;height:44px;border:0;border-radius:12px;background:var(--blue);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.mx-guide-note{padding:10px 12px;border-left:5px solid var(--yellow);background:var(--cream);border-radius:10px}

@media (prefers-reduced-motion:reduce){.mx-page *{transition:none!important;scroll-behavior:auto!important}}


/* Cost and Risk Tool: introductory guide link and closing disclaimer. */
.chart-page .incoterms-guide-intro-link {
  margin: 4px 0 22px;
  font-size: 16px;
  line-height: 1.55;
  color: #173B63;
}
.chart-page .incoterms-guide-intro-link strong { font-weight: 800; }
.chart-page .incoterms-guide-intro-link a {
  color: #0759A3;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.chart-page .incoterms-guide-intro-link a:hover { color: #06477F; }
.chart-page .legal-note {
  max-width: none;
  margin: 24px 0 4px;
  padding: 19px 22px;
  background: #FFFCF3;
  border: 1px solid #E8D9A8;
  border-left: 5px solid #D6A42B;
  border-radius: 12px;
  color: #173B63;
  font-size: 15px;
  line-height: 1.6;
}
.chart-page .legal-note h2 {
  margin: 0 0 6px;
  color: #12325B;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 800;
}
.chart-page .legal-note p { margin: 0; }
@media (max-width: 600px) {
  .chart-page .legal-note { padding: 16px; }
}