/* Speedmax "Container stencil": FAQ page tools. Loaded on faq.html only, after site.css.
   Same world: corrugated steel, container red, galvanised reading panels, CSC plates, strapping. */

/* ---------- JS gate: tools exist only when faq.js runs ---------- */
.ftool, .tool-index, .grp-toggle { display: none; }
.js .ftool, .js .tool-index { display: block; }
.js .grp-toggle { display: inline-flex; }
.no-spd .ftool, .no-spd .tool-index, .no-tools .ftool, .no-tools .tool-index { display: none !important; }
.faq-body.is-searching .ftool { display: none; }

/* ---------- layout: FAQ first, tools beside their groups ---------- */
.faq-flow { display: block; }
.faq-group, .faq-empty { max-width: 960px; }
.faq-group__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 20px; margin-bottom: .45em; }
.faq-group__head h2 { margin: 0; }
.acc__item, .ftool { scroll-margin-top: calc(var(--head-h) + 200px); }
@media (max-width: 860px) { .acc__item, .ftool { scroll-margin-top: calc(var(--head-h) + 16px); } }

/* tools index: compact steel strip of jump links */
.tool-index { margin: 0 0 clamp(36px, 5vw, 56px); padding: 14px 16px; background: var(--steel); color: #fff; border-radius: 4px; --focus: #FFD54A;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25); }
.js .tool-index { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.tool-index__h { font: 700 .9375rem/1.3 var(--sans); margin: 0 !important; color: #fff; }
.tool-index ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.tool-index a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px; border-radius: 3px; color: #fff; text-decoration: none; font-weight: 600; font-size: .9375rem;
  background: rgba(0, 0, 0, .22); box-shadow: inset 0 -3px 0 transparent; transition: background-color 180ms, box-shadow 220ms var(--ease); }
.tool-index a .ico { width: 18px; height: 18px; flex: none; }
.tool-index a:hover { background: var(--red-deep); box-shadow: inset 0 -3px 0 #FFD54A; }

/* each tool: locking-bar divider above, own visual language below */
.ftool { position: relative; margin: clamp(8px, 2vw, 20px) 0 clamp(56px, 7vw, 88px); padding-top: 34px; }
.ftool::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, transparent 0 96px, #5D666C 96px 100px, #9AA3A8 100px 112px, #5D666C 112px 116px) center / 100% 16px no-repeat,
    linear-gradient(180deg, #6E777D, #E6EAEC 45%, #A6AEB3 70%, #69727A) center / 100% 7px no-repeat; }
.ftool__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.ftool__ico { width: 34px; height: 34px; flex: none; padding: 6px; border-radius: 3px; background: var(--red-deep); color: #fff; }
.ftool__title { font-size: clamp(1.55rem, 2.6vw, 2.1rem); line-height: 1.08; margin: 0 !important; color: var(--steel-deep); }
.ftool__intro { max-width: 68ch; color: var(--ink-2); margin-bottom: 20px; }

/* ---------- accordion upgrades ---------- */
.grp-toggle { align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border: 2px solid var(--steel); border-radius: 3px; background: transparent;
  font-weight: 700; font-size: .875rem; color: var(--ink); cursor: pointer; transition: background-color 180ms, color 180ms, border-color 180ms; }
.grp-toggle:hover { border-color: var(--red-deep); color: var(--red-ink); }
.grp-toggle svg path { transition: transform 300ms var(--ease); transform-box: fill-box; transform-origin: center; }
.grp-toggle[aria-expanded="true"] .gt-a { transform: translateY(7px) rotate(180deg); }
.grp-toggle[aria-expanded="true"] .gt-b { transform: translateY(-7px) rotate(180deg); }
.acc__answer { max-width: 68ch; }
.acc__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 4px; }
.copy-link { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 10px; border: 1.5px solid var(--line); border-radius: 3px; background: #fff;
  font-size: .875rem; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: border-color 180ms, color 180ms, background-color 180ms; }
.copy-link:hover { border-color: var(--steel); color: var(--ink); }
.copy-link .cl-tick { opacity: 0; stroke-dasharray: 24; stroke-dashoffset: 24; }
.copy-link.is-copied { border-color: #1E6B34; color: #1E6B34; background: #EEF6F0; }
.copy-link.is-copied .cl-link { opacity: 0; }
.copy-link.is-copied .cl-tick { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 320ms var(--ease); }
.copy-status { font-size: .875rem; font-weight: 700; color: #1E6B34; }
.copy-status:not(:empty) { animation: pop-in 220ms var(--ease); }
@keyframes pop-in { from { opacity: 0; transform: translateX(-6px); } }
.acc__item.is-target { animation: target 1800ms var(--ease); }
@keyframes target { 0%, 35% { box-shadow: inset 6px 0 0 var(--red); background: #FFF6E0; } 100% { box-shadow: inset 6px 0 0 transparent; background: transparent; } }

/* reading progress strap on the group index */
.faq-index .chip--link { overflow: hidden; }
.faq-index .chip--link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--red);
  transform: scaleX(var(--read, 0)); transform-origin: 0 50%; transition: transform 160ms linear; }
.faq-index .chip--link.is-current::after { background: #FFD54A; }

/* glossary terms inside answers */
.gterm { display: inline; padding: 0 1px; margin: 0; border: 0; border-bottom: 2px dotted var(--red-ink); border-radius: 0; background: none;
  font: inherit; color: inherit; line-height: inherit; cursor: help; transition: background-color 160ms; }
.gterm:hover, .gterm[aria-expanded="true"] { background: #FBE3E4; }
.gpop { position: absolute; z-index: 60; width: min(340px, calc(100vw - 20px)); padding: 20px 22px 14px !important; transform-origin: var(--ox, 20px) 0;
  opacity: 0; transform: translateY(-6px) scale(.96); transition: opacity 180ms var(--ease), transform 240ms var(--ease); }
.gpop.is-above { transform-origin: var(--ox, 20px) 100%; }
.gpop.is-open { opacity: 1; transform: none; }
.gpop:focus { outline: none; }
.gpop:focus-visible { outline: 3px solid var(--focus); }
.gpop .rivet { width: 11px; height: 11px; }
.gpop__t { font-size: 1.4rem; margin: 0 0 4px; color: var(--steel-deep); }
.gpop__d { margin: 0 0 10px; font-size: .975rem; line-height: 1.5; }
.gpop__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; }
.gpop__go { font-size: .9rem; }
.gpop__x { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid #79838A; border-radius: 3px; background: rgba(255, 255, 255, .5); cursor: pointer; }
.gpop__x .ico { width: 18px; height: 18px; }

/* glossary filter + highlight */
.gl-filter { max-width: 480px; margin-bottom: 18px; }
.gl-row.is-hidden { display: none; }
.gl-row.is-flash { animation: gl-flash 1800ms var(--ease); }
.gl-row:focus { outline: none; }
@keyframes gl-flash { 0%, 30% { background: #FFE08A; box-shadow: inset 6px 0 0 var(--red); } 100% { box-shadow: inset 6px 0 0 transparent; } }

/* ---------- shared bits ---------- */
.tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 3px; font-weight: 700; font-size: .8125rem; }
.tag--sea { background: var(--steel); color: #fff; }
.tag--any { border: 2px solid var(--steel); color: var(--ink); }
.ct__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; }
.ct__note { margin: 0; font-size: .9rem; color: var(--ink-2); }
.unit-in { display: flex; }
.unit-in__u { display: inline-flex; align-items: center; padding: 0 10px; min-width: 50px; justify-content: center; background: var(--steel); color: #fff; font-weight: 700; font-size: .875rem; border-radius: 3px 0 0 3px; }
.unit-in input { border-radius: 0 3px 3px 0; min-width: 0; }
.fld__hint .text-link { font-weight: 600; }

/* ======================================================================
   1. Journey
   ====================================================================== */
.jr__strip { border-radius: 4px 4px 0 0; background-color: var(--steel); background-image: var(--ribs-shade), var(--ribs); color: #fff; padding: 14px 0 10px; --focus: #FFD54A;
  box-shadow: inset 0 8px 0 -2px rgba(0, 0, 0, .18); }
.jr__scroll { overflow-x: auto; scrollbar-width: thin; padding: 4px 0 6px; }
.jr__track { position: relative; min-width: 760px; padding: 0 10px; --at: 0; --n: 9; }
.jr__legs { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 0 6px; min-height: 36px; }
.jr__leg { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 2px 6px; border-radius: 3px; background: rgba(0, 0, 0, .3); font-size: .8125rem; font-weight: 700; line-height: 1.1; text-align: center;
  transition: background-color 300ms; }
.jr__leg .ico { width: 18px; height: 18px; flex: none; }
.jr__leg.is-on { background: var(--red-deep); }
.jr__lane { position: relative; height: 78px; }
.jr__mover { position: absolute; bottom: 8px; width: 112px; height: 66px; margin-left: -56px; left: calc((var(--at) + .5) / var(--n) * 100%);
  transition: left 800ms var(--ease); --deck: 18px; }
.jr__mover[data-mode="ship"] { --deck: 26px; }
.jr__mover[data-mode="port"] { --deck: 13px; }
.jr__veh { position: absolute; left: 0; bottom: 0; width: 112px; height: 38px; opacity: 0; transform: translateY(8px); transition: opacity 260ms, transform 360ms var(--ease); }
.jr__mover[data-mode="truck"] .jr__veh--truck, .jr__mover[data-mode="ship"] .jr__veh--ship, .jr__mover[data-mode="port"] .jr__veh--port { opacity: 1; transform: none; transition-delay: 200ms; }
.jr__box { position: absolute; left: 14px; bottom: var(--deck); width: 76px; height: 32px; z-index: 2; transition: bottom 420ms var(--ease); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.jr__mover.is-hop .jr__box { animation: hop 760ms var(--ease); }
@keyframes hop { 0% { transform: none; } 35% { transform: translateY(-22px); } 70% { transform: translateY(-14px); } 100% { transform: none; } }
.jr__hook { position: absolute; left: 51px; top: -40px; width: 2px; height: calc(66px - var(--deck) - 32px + 40px); background: #C9CFD2; opacity: 0; transition: opacity 300ms, height 420ms var(--ease); }
.jr__hook::after { content: ""; position: absolute; left: -16px; bottom: 0; width: 34px; height: 4px; background: #E7EAEA; border-radius: 1px; }
.jr__mover[data-mode="port"] .jr__hook { opacity: 1; }
.b-body { fill: var(--red); } .b-rib { stroke: rgba(0, 0, 0, .28); stroke-width: 2; } .b-rod { stroke: #D9DEE1; stroke-width: 1.6; } .b-edge { fill: none; stroke: #6B080C; stroke-width: 2; }
.v-steel { fill: #9BA4A9; } .v-cab { fill: #E7EAEA; stroke: #262C31; stroke-width: 1.5; } .v-glass { fill: #6E8796; }
.v-wheel { fill: #14181B; } .v-hub { fill: #C9CFD2; }
.v-hull { fill: #14181B; } .v-deck { stroke: #C9CFD2; stroke-width: 2; } .v-stripe { stroke: var(--red); stroke-width: 3; } .v-wave { fill: none; stroke: #8FB3C7; stroke-width: 2; }
.v-quay { fill: #8A9399; } .v-edge { stroke: #E7EAEA; stroke-width: 2; } .v-hatch { stroke: #FFD54A; stroke-width: 2.5; } .v-bollard { fill: #262C31; }
.jr__line { position: relative; height: 6px; margin: 0 calc(100% / var(--n) / 2); background: rgba(0, 0, 0, .35); border-radius: 3px; }
.jr__done { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--at) / (var(--n) - 1) * 100%); background: var(--strap); border-radius: 3px;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 3px, transparent 3px 10px); transition: width 800ms var(--ease); }
.jr__stops { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--n), 1fr); margin-top: -23px; }
.jr__stop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 3px 4px; border: 0; background: none; color: #fff; cursor: pointer; font: inherit; text-align: center; }
.jr__num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 4px; background: var(--galv); color: var(--steel-deep); font-size: 1.25rem; border: 3px solid var(--steel-deep);
  transition: background-color 220ms, color 220ms, transform 300ms var(--ease); }
.jr__stop.is-past .jr__num { background: #D3D8DA; }
.jr__stop[aria-selected="true"] .jr__num { background: var(--red-deep); color: #fff; border-color: #fff; transform: scale(1.12); }
.jr__name { font-size: .8125rem; font-weight: 600; line-height: 1.25; color: #EEF1F2; max-width: 14ch; }
.jr__stop[aria-selected="true"] .jr__name { color: #fff; text-decoration: underline; text-decoration-color: #FFD54A; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.jr__stop:hover .jr__num { transform: translateY(-2px); }
.jr__stop[aria-selected="true"]:hover .jr__num { transform: scale(1.12); }
.jr__stop:focus-visible { outline-offset: 0; }
.jr__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: start; padding: clamp(20px, 3vw, 32px); background: var(--galv); border-radius: 0 0 4px 4px; border-top: 5px solid var(--red); }
.jr__panel { min-height: 210px; max-width: 70ch; }
.jr__panel:focus-visible { outline-offset: 6px; }
.jr__panel > * { transition: opacity 170ms var(--ease), transform 260ms var(--ease); }
.jr__panel.is-out > * { opacity: 0; transform: translateY(6px); }
.jr__title { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0 0 2px !important; color: var(--steel-deep); }
.jr__meta { font-size: .875rem; font-weight: 700; color: var(--red-ink); margin-bottom: 10px; }
.jr__what { font-size: 1.0625rem; }
.jr__you, .jr__docs { margin-top: 12px; padding: 12px 14px; background: #fff; border-radius: 3px; border-left: 4px solid var(--steel); }
.jr__you h4, .jr__docs h4 { margin: 0 0 4px; font-size: .875rem; font-weight: 700; color: var(--ink-2); }
.jr__you p { margin: 0; }
.jr__docs ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.jr__docs li { padding: 4px 10px; background: var(--galv); border: 1.5px solid #9AA3A8; border-radius: 3px; font-weight: 600; font-size: .9rem; }
.jr__ctrl { display: grid; gap: 10px; min-width: 170px; }
.jr__ctrl .btn[disabled] { opacity: .45; cursor: not-allowed; }
.jr__play { border: 2px solid var(--steel); }
.jr__play .ico-pause { display: none; }
.jr__play[aria-pressed="true"] .ico-play { display: none; }
.jr__play[aria-pressed="true"] .ico-pause { display: block; }
@media (max-width: 760px) {
  .jr__body { grid-template-columns: 1fr; }
  .jr__ctrl { grid-template-columns: 1fr 1fr; min-width: 0; }
  .jr__play { grid-column: 1 / -1; }
  .jr__ctrl .btn { padding-inline: .6em; }
}

/* ======================================================================
   2. Incoterms explorer
   ====================================================================== */
.ix__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ix__chip { min-width: 66px; min-height: 48px; padding: 0 12px; border: 2px solid var(--steel); border-radius: 3px; background: #fff; color: var(--ink); cursor: pointer;
  font-size: 1.3rem; transition: background-color 200ms, color 200ms, border-color 200ms, transform 160ms var(--ease); }
.ix__chip:hover { border-color: var(--red-deep); color: var(--red-ink); }
.ix__chip:active { transform: translateY(2px); }
.ix__chip[aria-pressed="true"] { background: var(--red-deep); border-color: var(--red-deep); color: #fff; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25); }
.ix__board { padding: 16px; background: var(--steel-deep); border-radius: 4px; color: #fff; }
.ix__key { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; font-size: .875rem; font-weight: 600; }
.ix__key li { display: inline-flex; align-items: center; gap: 8px; }
.sw { width: 18px; height: 18px; border-radius: 2px; border: 1.5px solid rgba(255, 255, 255, .6); }
.sw--s { background: var(--red-deep); } .sw--b { background: #5D666C; }
.sw--r { background: var(--galv); border-color: var(--galv); box-shadow: inset 0 -5px 0 #FFD54A; }
.sw-buckle { width: 22px; height: 18px; fill: #C3CACD; stroke: #3A0507; stroke-width: 1.5; }
.ix__rail { position: relative; --risk: 4; }
.ix__stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; perspective: 900px; }
.ix__stage { --d: 0ms; }
.ix__door { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 164px; padding: 8px 7px 10px; border-radius: 3px;
  background-color: #5D666C; background-image: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .14)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 6px, rgba(0, 0, 0, .2) 6px 8px, rgba(0, 0, 0, .06) 8px 14px, rgba(255, 255, 255, .12) 14px 16px);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .25); transform-origin: 0 50%; transition: background-color 1ms linear calc(var(--d) + 180ms); }
.ix__stage.is-seller .ix__door { background-color: var(--red-deep); }
.ix__stage.is-swing .ix__door { animation: swing 420ms var(--ease) var(--d) both; }
@keyframes swing { 0% { transform: none; } 45% { transform: rotateY(-72deg); } 100% { transform: none; } }
.ix__n { font-size: 1.15rem; line-height: 1; }
.ix__name { flex: 1; padding: 6px 6px; background: var(--galv); color: var(--ink); border-radius: 2px; font-size: .8125rem; font-weight: 600; line-height: 1.3; }
.ix__who { font-size: .8125rem; font-weight: 700; }
.ix__stage.is-risk-buyer .ix__name { box-shadow: inset 0 -4px 0 #FFD54A; }
.ix__strap { position: relative; height: 10px; margin-top: 18px; border-radius: 2px; background: #5D666C; }
.ix__strap::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--risk) / 8 * 100%); background: var(--strap);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 3px, transparent 3px 10px); border-radius: 2px; transition: width 640ms var(--ease); }
.ix__buckle { position: absolute; top: 50%; left: calc(var(--risk) / 8 * 100%); width: 30px; height: 22px; margin: -11px 0 0 -15px; transition: left 640ms var(--ease); }
.ix__buckle svg { width: 30px; height: 22px; fill: #C3CACD; stroke: #3A0507; stroke-width: 2; }
.ix__info { margin-top: 18px; padding: clamp(18px, 3vw, 28px); background: var(--galv); border-radius: 4px; border-left: 6px solid var(--red-deep); max-width: 820px; }
.ix__info.is-in { animation: fade-up 300ms var(--ease); }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }
.ix__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 8px; }
.ix__code { font-size: 2.2rem; margin: 0 !important; color: var(--red-ink); }
.ix__full { margin: 0; font-weight: 700; font-size: 1.15rem; }
.ix__risk { font-weight: 600; padding-left: 12px; border-left: 4px solid #FFD54A; }
.ix__ins, .ix__count { color: var(--ink-2); }
.ix__chart { margin-top: 16px; max-width: 820px; }
.ix__chart summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--red-ink); }
.ix__chart figure { margin: 8px 0 0; }
.ix__chart img { border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.ix__chart figcaption { font-size: .9rem; color: var(--ink-2); margin-top: 6px; }
@media (max-width: 760px) {
  .ix__rail { padding-left: 34px; }
  .ix__stages { grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 5px; }
  .ix__door { flex-direction: row; align-items: center; min-height: 56px; padding: 6px 8px; }
  .ix__n { width: 22px; flex: none; }
  .ix__who { flex: none; width: 52px; text-align: right; font-size: .75rem; }
  .ix__strap { position: absolute; left: 8px; top: 0; bottom: 0; width: 10px; height: auto; margin: 0; }
  .ix__strap::before { width: auto; right: 0; height: calc(var(--risk) / 8 * 100%); transition: height 640ms var(--ease); }
  .ix__buckle { left: 50%; top: calc(var(--risk) / 8 * 100%); transform: rotate(90deg); transition: top 640ms var(--ease); }
}

/* ======================================================================
   3. Cargo calculator plate (tabs)
   ====================================================================== */
.ct { max-width: 1040px; }
.ct__tabs { position: relative; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; padding-bottom: 8px; border-bottom: 3px solid var(--steel); }
.ct__tab { min-height: 44px; padding: 0 16px; border: 2px solid var(--steel); border-radius: 3px; background: rgba(255, 255, 255, .55); color: var(--ink); font-weight: 700; cursor: pointer;
  transition: background-color 200ms, color 200ms, border-color 200ms; }
.ct__tab:hover { border-color: var(--red-deep); color: var(--red-ink); }
.ct__tab[aria-selected="true"] { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }
.ct__panel { position: relative; }
.ct__panel.is-in { animation: fade-up 260ms var(--ease); }
.ct__panel:focus-visible { outline-offset: 6px; }

/* a. boxes */
.bx__head, .bx__set { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) 44px; gap: 8px; align-items: end; }
.bx__head { font-size: .8125rem; font-weight: 700; color: var(--ink-2); margin-bottom: 4px; }
.bx__rows { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.bx__set { margin: 0; }
.bx__f { display: grid; gap: 4px; min-width: 0; }
.bx__lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bx__f input { min-height: 44px; padding: 8px 10px; font-variant-numeric: tabular-nums; }
.bx__rm { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--steel); border-radius: 3px; background: rgba(255, 255, 255, .55); cursor: pointer; color: var(--ink); transition: background-color 180ms, color 180ms; }
.bx__rm:hover:not([disabled]) { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }
.bx__rm[disabled] { opacity: .35; cursor: not-allowed; }
.bx__row.is-entering { animation: row-in 320ms var(--ease); }
.bx__row.is-leaving { animation: row-out 240ms var(--ease) forwards; pointer-events: none; }
@keyframes row-in { from { opacity: 0; transform: translateX(-24px); } }
@keyframes row-out { to { opacity: 0; transform: translateX(24px); } }
.bx__readout { margin-top: 18px; }
.wbars { padding: 14px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(58, 66, 73, .3); border-radius: 3px; }
.wbar { display: grid; grid-template-columns: 200px minmax(0, 1fr) 104px; gap: 10px; align-items: center; margin-bottom: 8px; }
.wbar__lab { font-weight: 600; font-size: .9375rem; }
.wbar__track { position: relative; height: 24px; background: rgba(58, 66, 73, .14); border-radius: 2px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); overflow: hidden; }
.wbar__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--steel); transition: width 650ms var(--ease), background-color 250ms;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .1) 0 6px, rgba(0, 0, 0, .12) 6px 8px); }
.wbar.is-win .wbar__fill { background-color: var(--red-deep); }
.wbar__val { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.wbar.is-win .wbar__lab::after { content: "charged"; margin-left: 8px; padding: 1px 6px; border-radius: 2px; background: var(--red-deep); color: #fff; font-size: .75rem; font-weight: 700; vertical-align: 1px; }
.wbars__chg { margin: 6px 0 0; font-size: 1.05rem; }
.wbars__chg strong { font-variant-numeric: tabular-nums; }
.wbars__why { color: var(--ink-2); font-size: .9375rem; }
@media (max-width: 640px) {
  .bx__head { display: none; }
  .bx__set { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 10px; border: 1.5px dashed rgba(58, 66, 73, .5); border-radius: 4px; }
  .bx__lab { position: static; width: auto; height: auto; clip: auto; font-size: .8125rem; font-weight: 600; color: var(--ink-2); white-space: normal; }
  .bx__rm { align-self: end; }
  .wbar { grid-template-columns: minmax(0, 1fr) auto; }
  .wbar__track { grid-column: 1 / -1; grid-row: 2; }
}

/* b. container fill */
.cv__in { max-width: 320px; }
.cv { display: grid; gap: 18px; margin: 6px 0 14px; }
.cv__box { margin: 0; width: 100%; }
.cv__svg { display: block; width: calc(var(--w) * .92 + 8%); max-width: 100%; height: auto; overflow: visible; }
.cv__shell { fill: #262C31; }
.cv__rib { stroke: rgba(255, 255, 255, .07); stroke-width: 5; }
.cv__rail, .cv__post { fill: #A30F15; stroke: #6B080C; stroke-width: 1; }
.cv__leaf { fill: var(--red); stroke: #6B080C; stroke-width: 1.5; }
.cv__rod { stroke: #D9DEE1; stroke-width: 2.5; }
.cv__c rect { fill: #C9A06A; stroke: #8C6A3E; stroke-width: 1; }
.cv__c path { stroke: #E9D3A8; stroke-width: 2; }
.cv__c { opacity: 0; transform: translateY(-10px); transition: opacity 200ms, transform 320ms var(--ease); }
.cv__c.is-on { opacity: 1; transform: none; }
.cv__box figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 6px; }
.cv__name { font-size: .9375rem; }
.cv__name span { color: var(--ink-2); }
.cv__pct { font-family: var(--stencil); font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--steel-deep); }
.cv__tag:empty { display: none; }
.cv__tag { padding: 2px 8px; border-radius: 2px; background: var(--steel); color: #fff; font-size: .8125rem; font-weight: 700; }
.cv__box.is-pick .cv__tag { background: var(--red-deep); }
.cv__box.is-pick .cv__pct { color: var(--red-ink); }
.cv__box.is-over .cv__tag { background: #fff; color: var(--red-ink); border: 2px solid var(--red-ink); }
.cv__advice, .lf__advice { padding: 12px 14px; background: #fff; border-left: 5px solid var(--red-deep); border-radius: 3px; font-weight: 600; max-width: 68ch; }

/* c. LCL or FCL slider */
.lf .fld__lab { display: block; font-size: 1.05rem; margin-bottom: 6px; }
.lf .fld__lab output { font-family: var(--stencil); font-size: 1.6rem; color: var(--red-ink); font-variant-numeric: tabular-nums; }
.lf__scale { position: relative; padding: 18px 0 4px; }
.lf__band { position: absolute; top: 12px; height: 42px; border-radius: 3px; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(200, 20, 27, .2) 0 6px, rgba(200, 20, 27, .06) 6px 12px); box-shadow: inset 0 0 0 2px rgba(163, 15, 21, .5); transition: box-shadow 250ms, background-color 250ms; }
.lf__band span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 22px; white-space: nowrap; font-size: .75rem; font-weight: 700; color: var(--red-ink); }
.lf__band.is-hit { box-shadow: inset 0 0 0 3px var(--red-deep), 0 0 0 4px rgba(255, 213, 74, .7); }
.lf__band.is-past { box-shadow: inset 0 0 0 2px rgba(58, 66, 73, .4); }
.lf__band.is-cross { animation: band-pulse 520ms var(--ease); }
@keyframes band-pulse { 40% { transform: scaleY(1.25); } }
.lf input[type=range] { position: relative; width: 100%; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; --pos: 10%; }
.lf input[type=range]::-webkit-slider-runnable-track { height: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--steel) var(--pos), #B8BFC3 var(--pos)); }
.lf input[type=range]::-moz-range-track { height: 10px; border-radius: 3px; background: #B8BFC3; }
.lf input[type=range]::-moz-range-progress { height: 10px; border-radius: 3px; background: var(--steel); }
.lf input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 46px; height: 28px; margin-top: -9px; border: 0; border-radius: 2px; cursor: grab;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 28'%3E%3Crect x='1' y='1' width='44' height='26' rx='2' fill='%23C8141B' stroke='%236B080C' stroke-width='2'/%3E%3Cpath d='M8 4v20M14 4v20M20 4v20M26 4v20M32 4v20' stroke='rgba(0,0,0,.3)' stroke-width='2'/%3E%3Cpath d='M38 3v22M42 3v22' stroke='%23D9DEE1' stroke-width='1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.lf input[type=range]::-moz-range-thumb { width: 46px; height: 28px; border: 0; border-radius: 2px; cursor: grab;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 28'%3E%3Crect x='1' y='1' width='44' height='26' rx='2' fill='%23C8141B' stroke='%236B080C' stroke-width='2'/%3E%3Cpath d='M8 4v20M14 4v20M20 4v20M26 4v20M32 4v20' stroke='rgba(0,0,0,.3)' stroke-width='2'/%3E%3Cpath d='M38 3v22M42 3v22' stroke='%23D9DEE1' stroke-width='1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.lf input[type=range]:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.lf__ticks { display: flex; justify-content: space-between; margin-top: 28px; font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
.lf__boxes { display: grid; gap: 10px; margin: 16px 0 14px; }
.lf__row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 110px; gap: 10px; align-items: center; font-size: .9375rem; }
.lf__name { font-weight: 700; }
.lf__bar { position: relative; display: block; width: var(--w); height: 26px; border-radius: 2px; overflow: hidden; background-color: #262C31;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 6px, rgba(0, 0, 0, .25) 6px 8px); box-shadow: inset 0 0 0 2px #A30F15; }
.lf__fill { position: absolute; left: 2px; top: 2px; bottom: 2px; width: 0; max-width: calc(100% - 4px); background: #C9A06A;
  background-image: repeating-linear-gradient(90deg, transparent 0 14px, #8C6A3E 14px 15.5px), repeating-linear-gradient(180deg, transparent 0 10px, #8C6A3E 10px 11px); transition: width 300ms var(--ease); }
.lf__row.is-over .lf__fill { background-color: var(--red-deep); }
.lf__val { font-weight: 700; font-variant-numeric: tabular-nums; }
.lf__row.is-over .lf__val { color: var(--red-ink); }
@media (max-width: 640px) {
  .lf__row { grid-template-columns: minmax(0, 1fr) auto; }
  .lf__bar { grid-column: 1 / -1; grid-row: 2; }
}

/* ======================================================================
   4. Quiz
   ====================================================================== */
.qz { max-width: 1040px; overflow: hidden; }
.qz__strap { position: relative; height: 12px; margin: 4px 6px 22px; border-radius: 3px; background: rgba(58, 66, 73, .22); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); --p: 0; }
.qz__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); border-radius: 3px; background: var(--strap);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 3px, transparent 3px 10px); transition: width 520ms var(--ease); }
.qz__buckle { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 22px; height: 18px; margin: -9px 0 0 -11px; border-radius: 3px; background: #C3CACD; border: 2px solid #3A0507; transition: left 520ms var(--ease); }
.qz__strap.is-cinch { animation: cinch 420ms var(--ease); }
@keyframes cinch { 30% { transform: scaleY(.6); } 60% { transform: scaleY(1.15); } }
.qz__stage { position: relative; }
.qz__h { font: 700 clamp(1.3rem, 2.2vw, 1.6rem)/1.3 var(--sans); margin: 0 0 16px !important; color: var(--steel-deep); }
.qz__h:focus { outline: none; }
.qz__opts { display: flex; flex-wrap: wrap; gap: 10px; }
.qz__opt { flex: 1 1 220px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 76px; padding: 14px 18px; text-align: left;
  border: 2px solid var(--steel); border-radius: 4px; background: #fff; color: var(--ink); cursor: pointer;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .08); transition: border-color 180ms, background-color 180ms, color 180ms, transform 200ms var(--ease); }
.qz__opt:hover { border-color: var(--red-deep); transform: translateY(-2px); }
.qz__opt:active { transform: translateY(2px); }
.qz__opt.is-chosen { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }
.qz__main { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.1; }
.qz__sub { font-size: .9rem; line-height: 1.35; color: var(--ink-2); }
.qz__opt.is-chosen .qz__sub { color: #fff; }
.qz__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 16px; }
.qz__count { margin: 0; font-weight: 700; color: var(--ink-2); font-size: .9375rem; }
.qz__back { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border: 0; background: none; color: var(--red-ink); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.qz__back .ico { width: 18px; height: 18px; }
.qz__q.is-in { animation: q-in 280ms var(--ease); }
.qz__q.is-in-l { animation: q-in-l 280ms var(--ease); }
.qz__q.is-out, .qz__q.is-out-r { position: absolute; inset: 0 0 auto 0; pointer-events: none; animation: q-out 200ms var(--ease) forwards; }
.qz__q.is-out-r { animation-name: q-out-r; }
@keyframes q-in { from { opacity: 0; transform: translateX(32px); } }
@keyframes q-in-l { from { opacity: 0; transform: translateX(-32px); } }
@keyframes q-out { to { opacity: 0; transform: translateX(-32px); } }
@keyframes q-out-r { to { opacity: 0; transform: translateX(32px); } }
.qz__result:focus { outline: none; }
.qz__res { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 28px; align-items: center; }
.qz__reveal { position: relative; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 4px; background: #14181B; perspective: 1200px; box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .3); }
.qz__reveal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1100ms var(--ease); }
.qz__doors { position: absolute; inset: 0; display: flex; z-index: 2; }
.qz__doors .door { transition-duration: 800ms; box-shadow: inset 0 0 0 6px #A9121A, inset 0 0 0 7px rgba(0, 0, 0, .3); }
.qz__doors.is-open .door--l { transform: rotateY(-106deg); }
.qz__doors.is-open .door--r { transform: rotateY(106deg); }
.qz__doors.is-open ~ img, .qz__reveal:has(.is-open) img { transform: none; }
.qz__doors.is-gone { display: none; }
.qz__title { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin: 0 0 10px !important; color: var(--steel-deep); }
.qz__note { font-size: .9375rem; color: var(--ink-2); }
.qz__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.qz__acts .btn .ico { width: 18px; height: 18px; }
.qz__text { animation: fade-up 420ms var(--ease) 280ms both; }
@media (max-width: 760px) { .qz__res { grid-template-columns: 1fr; } }

/* ======================================================================
   5. Documents checklist
   ====================================================================== */
.dc { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); gap: clamp(18px, 3vw, 32px); align-items: start; }
.dc__form { padding: clamp(18px, 2.6vw, 26px); background: var(--galv); border-radius: 4px; }
.dc__form .chips-field { margin-bottom: 16px; }
.dc__form .chips { gap: 6px; }
.chip--check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chip--check span { padding-left: 34px !important; position: relative; }
.chip--check span::before { content: ""; position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: 2px solid currentColor; border-radius: 2px; }
.chip--check input:checked + span::after { content: ""; position: absolute; left: 15px; top: 50%; width: 5px; height: 10px; margin-top: -7px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.chip--check input:checked + span { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }
.chip--check input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.dc__extra { display: grid; gap: 8px; }
.tick { display: flex; align-items: flex-start; gap: 10px; min-height: 40px; font-weight: 600; cursor: pointer; }
.tick input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--red-deep); }
.dc__sheet { background: #fff; border-radius: 4px; box-shadow: 0 0 0 1px var(--line), 0 10px 24px rgba(0, 0, 0, .08); overflow: hidden; }
.dc__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: var(--steel); color: #fff; --focus: #FFD54A; }
.dc__title { font-size: 1.5rem; margin: 0 !important; }
.dc__print { --b: #fff; --t: var(--ink); }
.dc__print .ico { width: 18px; height: 18px; }
.dc__sum { margin: 0; padding: 10px 16px; font-weight: 700; border-bottom: 3px solid var(--steel); background: #F1F3F3; }
.dc__list { list-style: none; overflow: hidden; }
.dc__row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fff; }
.dc__row:nth-child(even) { background: #F7F8F8; }
.dc__box { width: 24px; height: 24px; margin-top: 1px; fill: none; stroke: var(--steel); stroke-width: 2; }
.dc__box path { stroke: var(--red-deep); stroke-width: 2.6; }
.dc__doc { display: grid; gap: 2px; }
.dc__doc strong { font-size: 1.02rem; }
.dc__why { font-size: .9375rem; color: var(--ink-2); line-height: 1.45; }
.dc__tag { padding: 3px 8px; border-radius: 2px; font-size: .8125rem; font-weight: 700; white-space: nowrap; }
.dc__row--always .dc__tag { background: var(--steel-deep); color: #fff; }
.dc__row--usually .dc__tag { background: var(--galv); color: var(--ink); border: 1.5px solid #79838A; }
.dc__row--if .dc__tag { background: #fff; color: var(--red-ink); border: 1.5px dashed var(--red-ink); }
.dc__row.is-entering { animation: load-in 460ms var(--ease) var(--d, 0ms) both; }
.dc__row.is-leaving { animation: load-out 340ms var(--ease) forwards; pointer-events: none; }
@keyframes load-in { from { opacity: 0; transform: translateX(-48px); } }
@keyframes load-out { 0% { max-height: 200px; } 60% { opacity: 0; transform: translateX(48px); max-height: 200px; } 100% { opacity: 0; transform: translateX(48px); max-height: 0; padding-block: 0; border-width: 0; } }
.dc__note { margin: 0; padding: 12px 16px; font-weight: 600; background: var(--galv); border-top: 3px solid var(--steel); }
@media (max-width: 860px) { .dc { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .dc__row { grid-template-columns: 22px minmax(0, 1fr); }
  .dc__tag { grid-column: 2; justify-self: start; }
}

/* ======================================================================
   6. Duty and VAT
   ====================================================================== */
.dt { max-width: 1040px; }
.dt__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px clamp(20px, 3vw, 36px); align-items: start; }
.dt__in .fld { margin-bottom: 12px; }
.dt__in .fld__hint { margin: 0; font-size: .85rem; }
.dt__out { position: relative; padding: 16px; background: rgba(255, 255, 255, .6); border: 1px solid rgba(58, 66, 73, .3); border-radius: 3px; min-height: 100%; }
.dbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; margin-bottom: 14px; transition: opacity 300ms; }
.dbar__lab { font-weight: 700; }
.dbar__val { font-weight: 700; font-variant-numeric: tabular-nums; }
.dbar__track { grid-column: 1 / -1; position: relative; height: 18px; border-radius: 2px; background: rgba(58, 66, 73, .14); overflow: hidden; }
.dbar__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--steel); transition: width 700ms var(--ease);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .1) 0 6px, rgba(0, 0, 0, .14) 6px 8px); }
.dbar--duty .dbar__fill { background-color: var(--red-deep); }
.dbar--vat .dbar__fill { background-color: #7A0B10; }
.dbar--total .dbar__fill { background-color: var(--steel-deep); }
.dbar__sub { grid-column: 1 / -1; font-size: .8125rem; color: var(--ink-2); }
.dbar--total { padding-top: 10px; border-top: 2px solid var(--steel); }
.dt__total { margin: 4px 0 0; font-size: 1.1rem; font-weight: 700; }
.dt.is-exempt .dbar { opacity: .3; }
.dt.is-exempt .dt__total { padding: 10px 12px; background: #EEF6F0; border-left: 5px solid #1E6B34; color: #14451F; font-weight: 600; font-size: 1rem; }
.dt__stamp { right: 16px; top: 14px; bottom: auto; }
.dt__stamp span { color: #1E6B34; border-color: #1E6B34; font-size: clamp(1.8rem, 4vw, 2.6rem); background: rgba(255, 255, 255, .7); }
.dt.is-stamped .dt__stamp { animation: stamp 700ms var(--ease) forwards; }
.dt__disc { margin: 16px 0 0; padding: 10px 12px; font-size: .9rem; background: rgba(255, 255, 255, .55); border-left: 4px solid var(--steel); border-radius: 2px; }
@media (max-width: 860px) { .dt__grid { grid-template-columns: 1fr; } }

/* ======================================================================
   7. Dangerous goods
   ====================================================================== */
.dg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: start; }
.dg__pick { padding: clamp(18px, 2.6vw, 26px); background: var(--galv); border-radius: 4px; }
.dg__pick .search__box input { padding-left: 12px; }
.dg__chips { gap: 6px; margin-top: 6px; }
.dg__chip { min-height: 40px; font-size: .9rem; background: #fff; }
.dg__chip[hidden] { display: none; }
.dg__verdict { perspective: 1000px; }
.dg__card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: start; padding: clamp(18px, 2.6vw, 26px); background: #fff; border-radius: 4px;
  box-shadow: 0 0 0 1px var(--line), 0 10px 24px rgba(0, 0, 0, .08); border-top: 6px solid var(--steel); }
.dg__card--dg { border-top-color: var(--red-deep); }
.dg__card--maybe { border-top-color: #C98A00; }
.dg__card--ok { border-top-color: #1E6B34; }
.dg__plac { width: 120px; height: 120px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .2)); }
.dg__card.is-flip .dg__plac { animation: flip 520ms var(--ease); }
.dg__card.is-flip .dg__text { animation: fade-up 360ms var(--ease) 120ms both; }
@keyframes flip { from { transform: rotateY(-90deg); opacity: .2; } }
.pl-dg { fill: var(--red-deep); }
.pl-maybe { fill: #F2B321; }
.pl-ok { fill: #EEF1F2; stroke: var(--steel); stroke-width: 3; }
.pl-line { fill: none; stroke: #fff; stroke-width: 3; }
.pl-line-d { fill: none; stroke: var(--steel-deep); stroke-width: 2.5; }
.pl-mark { fill: #fff; }
.pl-mark-d { fill: var(--steel-deep); }
.pl-q { fill: none; stroke: var(--steel-deep); stroke-width: 9; stroke-linecap: round; }
.pl-tick { fill: none; stroke: #1E6B34; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.dg__item { font: 700 1.3rem/1.25 var(--sans); margin: 0 0 4px !important; }
.dg__level { font-size: 1.35rem; margin: 0 0 8px; }
.dg__card--dg .dg__level { color: var(--red-ink); }
.dg__card--maybe .dg__level { color: #7A5300; }
.dg__card--ok .dg__level { color: #1E6B34; }
.dg__why { font-weight: 600; }
.dg__more { color: var(--ink-2); }
.dg__link { margin: 0; }
@media (max-width: 860px) { .dg { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .dg__card { grid-template-columns: 1fr; }
  .dg__plac { width: 96px; height: 96px; }
}

/* ---------- reduced motion: instant state, no travel ---------- */
@media (prefers-reduced-motion: reduce) {
  .jr__mover, .jr__done, .ix__buckle, .ix__strap::before, .qz__fill, .qz__buckle { transition: none !important; }
  .cv__c { transform: none !important; }
  .qz__doors { display: none !important; }
  .qz__reveal img { transform: none !important; }
}

/* ---------- print ---------- */
@media print {
  .site-head, .site-foot, .doors, .faq-tools, .tool-index, .ftool, .cta-band, .strap, .gpop, .grp-toggle, .acc__meta, .gl-filter, .skip { display: none !important; }
  .ph__inside { min-height: 0; } .ph__photo { display: none; } .ph__inside::before { display: none; } .ph__text { color: #000; padding: 0 0 12px; }
  .acc__panel { grid-template-rows: 1fr !important; } .acc__clip { visibility: visible !important; } .acc__chev { display: none; }
  .gterm { border: 0; }
  .panel { padding-block: 16px; }
  html.print-docs main > *:not(.faq-body) { display: none !important; }
  html.print-docs .faq-body .tool-index, html.print-docs .faq-group, html.print-docs .faq-empty, html.print-docs .ftool:not(.ftool--docs) { display: none !important; }
  html.print-docs .ftool--docs { display: block !important; margin: 0; padding: 0; }
  html.print-docs .ftool--docs::before, html.print-docs .dc__form, html.print-docs .dc__print, html.print-docs .ftool__ico { display: none !important; }
  html.print-docs .dc { display: block; }
  html.print-docs .dc__sheet { box-shadow: none; border: 1px solid #000; }
  html.print-docs .dc__top { background: none; color: #000; border-bottom: 2px solid #000; }
  html.print-docs .dc__row { animation: none !important; opacity: 1 !important; transform: none !important; break-inside: avoid; }
  html.print-docs .dc__row.is-leaving { display: none; }
}

/* ---------- late fixes: bar row order, link contrast on brushed plates ---------- */
.dbar__lab { grid-column: 1; grid-row: 1; }
.dbar__val { grid-column: 2; grid-row: 1; }
.dbar__track { grid-row: 2; }
.dbar__sub { grid-row: 3; }
.plate .text-link { color: #8A0D13; }
.lf__band span { color: var(--steel-deep); }
/* de minimis: no stale figures, just the stamp and the rule */
.dt.is-exempt .dbars { display: none; }
.dt.is-exempt .dt__out { padding-top: 104px; min-height: 0; }