/* =====================================================================
   LINTAS — customs.html only. Shared components live in site.css; this
   file holds page-unique pieces: the hero declaration stack (stamped
   once), the document checklist, estimator details, assessment lanes and
   hold-up cards. Motion: transform / opacity / clip-path / dashoffset.
   ===================================================================== */

/* ── Hero: declaration stack. Sheets fan out, fields fill, status steps
   light up, then the CLEARED stamp lands (plays once, on reveal) ────── */
.cus-grid { align-items: center; }
.phero-media.cus-media { aspect-ratio: auto; }
.cus-stack { position: relative; padding-top: 84px; }
.cus-sheet { position: absolute; top: var(--top); left: var(--x); right: 2%; height: 62%; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 16px; background: var(--card) repeating-linear-gradient(180deg, transparent 0 52px, var(--line) 52px 53px); border: 1px solid var(--line-2); border-radius: 4px; font: 500 10.5px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--steel); transform-origin: 50% 100%; rotate: var(--r); box-shadow: 0 12px 24px -18px rgba(11, 21, 38, .4); }
.cus-sheet b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.cus-sheet span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cus-sheet.s3 { --top: 0px; --x: 11%; --r: 1.4deg; --fy: 84px; --k: 2; }
.cus-sheet.s2 { --top: 27px; --x: 6%; --r: -.9deg; --fy: 57px; --k: 1; }
.cus-sheet.s1 { --top: 54px; --x: 1%; --r: .4deg; --fy: 30px; --k: 0; }
.cus-decl { position: relative; z-index: 3; margin-left: 3%; padding: 18px 20px 16px; background: var(--card); border: 1.5px solid var(--ink); border-radius: 4px; box-shadow: var(--shadow); }
.cd-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--line-2); }
.cd-title { display: grid; gap: 5px; font: 500 11px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--steel); }
.cd-title b { font: 700 1.2rem/1.1 var(--sans); letter-spacing: -.02em; text-transform: none; color: var(--ink); }
.cd-ref { flex: none; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 3px; font: 600 11px/1 var(--mono); letter-spacing: .04em; }
.cd-rows { display: grid; }
.cd-rows > div { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); }
.cd-rows dt { font: 500 10.5px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--steel); }
.cd-rows dd { min-width: 0; font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-rows dd.mono { font-size: 14px; font-variant-numeric: tabular-nums; }
.cd-rows dd span { display: inline-block; }
.cd-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px; }
.cd-status li { position: relative; display: grid; gap: 2px; padding: 18px 8px 0 0; background: linear-gradient(var(--line-2), var(--line-2)) 12px 5px / 100% 1.5px no-repeat; font-size: 13px; font-weight: 600; }
.cd-status li:last-child { background: none; }
.cd-status li::before { content: ""; position: absolute; left: 0; top: 0; z-index: 1; width: 11px; height: 11px; border-radius: 2px; background: var(--signal); border: 1.5px solid var(--signal); }
.cd-status li:last-child::before { background: var(--ok); border-color: var(--ok); }
.cd-status li:not(:last-child)::after { content: ""; position: absolute; left: 11px; right: 0; top: 5px; height: 1.5px; background: var(--signal); transform-origin: 0 0; }
.cd-status small { font: 500 11px/1.2 var(--mono); color: var(--steel); }
.cd-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-2); font: 500 11px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--steel); }
.cd-foot b { color: var(--ok); font-weight: 600; }
.cd-stamp { position: absolute; right: 26px; top: 226px; z-index: 4; display: grid; justify-items: center; gap: 4px; padding: 9px 16px 8px; border: 2.5px solid var(--ok); outline: 1px solid var(--ok); outline-offset: 3px; border-radius: 4px; color: var(--ok); background: rgba(220, 239, 230, .35); rotate: -9deg; opacity: .94; mix-blend-mode: multiply; pointer-events: none; }
.cd-stamp b { font: 700 27px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.cd-stamp small { font: 600 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }

/* choreography (JS on, before the reveal): everything waits in its "before" state */
.js .cus-stack .cus-sheet { transition: translate .7s var(--ease-out), rotate .7s var(--ease-out); transition-delay: calc(.12s + var(--k) * .07s); }
.js .cus-stack:not(.is-in) .cus-sheet { translate: 0 var(--fy); rotate: 0deg; }
.js .cus-stack .cus-decl { transition: translate .7s var(--ease-out) .05s; }
.js .cus-stack:not(.is-in) .cus-decl { translate: 0 14px; }
.js .cus-stack .cd-rows dd span { transition: clip-path .32s var(--ease-out); transition-delay: calc(.7s + var(--i) * .12s); }
.js .cus-stack:not(.is-in) .cd-rows dd span { clip-path: inset(0 100% 0 0); }
.js .cus-stack .cd-status li::before { transition: background-color .18s ease, border-color .18s ease; transition-delay: calc(1.75s + var(--i) * .24s); }
.js .cus-stack:not(.is-in) .cd-status li::before { background: var(--card); border-color: var(--line-2); }
.js .cus-stack .cd-status li::after { transition: scale .24s linear; transition-delay: calc(1.76s + var(--i) * .24s); }
.js .cus-stack:not(.is-in) .cd-status li::after { scale: 0 1; }
.js .cus-stack .cd-status li > * { transition: color .18s ease; transition-delay: calc(1.75s + var(--i) * .24s); }
.js .cus-stack:not(.is-in) .cd-status li > span { color: var(--steel); }
.js .cus-stack .cd-foot b { transition: opacity .3s ease 2.7s; }
.js .cus-stack:not(.is-in) .cd-foot b { opacity: 0; }
.js .cus-stack .cd-stamp { transition: opacity .08s linear 2.72s, scale .34s var(--ease-out) 2.72s, rotate .34s var(--ease-out) 2.72s; }
.js .cus-stack:not(.is-in) .cd-stamp { opacity: 0; scale: 1.5; rotate: -17deg; }

@media (max-width: 899.98px) { .cus-stack { max-width: 560px; } }
@media (max-width: 599.98px) {
  .cus-stack { padding-top: 66px; }
  .cus-sheet { padding: 8px 12px; font-size: 9.5px; }
  .cus-sheet span { display: none; }
  .cus-sheet.s3 { --top: 0px; --fy: 66px; }
  .cus-sheet.s2 { --top: 21px; --fy: 45px; }
  .cus-sheet.s1 { --top: 42px; --fy: 24px; }
  .cus-decl { margin-left: 0; padding: 16px 14px 14px; }
  .cd-ref { display: none; }
  .cd-rows > div { grid-template-columns: 104px minmax(0, 1fr); gap: 8px; }
  .cd-rows dd, .cd-rows dd.mono { font-size: 13px; }
  .cd-status li { font-size: 12px; }
  .cd-stamp { right: 8px; top: 10px; padding: 6px 10px 5px; }
  .cd-stamp b { font-size: 18px; }
  .cd-stamp small { font-size: 8.5px; }
}

/* ── Document checklist ────────────────────────────────────────────── */
.chk { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); border: 1px solid var(--line); border-radius: var(--r); background: var(--card); overflow: hidden; }
.chk-in { display: grid; gap: 24px; align-content: start; padding: clamp(22px, 3.4vw, 40px); border-right: 1px solid var(--line); }
.chk-goods { display: grid; grid-template-columns: minmax(0, 1fr); }
.chk-goods .chip span { width: 100%; min-height: 46px; }
.chk-goods .chip span::after { margin-left: auto; }
.chk-out { display: flex; flex-direction: column; gap: 6px; padding: clamp(22px, 3.4vw, 40px); background: var(--paper); }
.chk-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; padding-bottom: 14px; border-bottom: 1.5px solid var(--ink); }
.chk-head .kv span { color: var(--signal); }
.chk-sum { font-size: 14px; color: var(--ink-2); }
.chk-sum b { margin-right: 2px; font: 700 1.6rem/1 var(--sans); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.chk-list { display: grid; }
.chk-i { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 13px 0; border-bottom: 1px dashed var(--line-2); }
.chk-box { width: 22px; height: 22px; margin-top: 1px; display: grid; place-items: center; border: 1.5px solid var(--signal); border-radius: 3px; background: var(--signal); }
.chk-box svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: square; }
.chk-box path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.chk-i.is-opt .chk-box { background: var(--card); border: 1.5px dashed var(--line-2); }
.chk-i.is-opt .chk-box path { stroke-dashoffset: 1; }
.chk-t { min-width: 0; }
.chk-t b { display: block; font-weight: 600; line-height: 1.3; }
.chk-t b em { display: inline-block; margin-left: 8px; padding: 3px 6px; border: 1px dashed var(--line-2); border-radius: 3px; font: 600 10px/1 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); vertical-align: 2px; }
.chk-t > span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--steel); }
.chk-i code { padding-top: 4px; font: 600 11px/1 var(--mono); letter-spacing: .06em; color: var(--signal); }
.chk-cta { margin-top: 18px; }
/* entrance + tick-off: rows rise (50 ms apart), then the boxes tick in order */
.chk-i { --d: calc(.12s + var(--i, 0) * .05s); --t: calc(.42s + var(--i, 0) * .06s); transition: opacity .32s var(--ease-out) var(--d), translate .42s var(--ease-out) var(--d); }
.chk-box { transition: background-color .16s ease var(--t), border-color .16s ease var(--t); }
.chk-box path { transition: stroke-dashoffset .24s var(--ease-out) var(--t); }
.js .chk:not(.is-in) .chk-i, .chk-list.is-pre .chk-i { opacity: 0; translate: 0 10px; }
.js .chk:not(.is-in) .chk-box, .chk-list.is-pre .chk-box { background: var(--card); border-color: var(--line-2); }
.js .chk:not(.is-in) .chk-box path, .chk-list.is-pre .chk-box path { stroke-dashoffset: 1; }
.chk-list.is-pre .chk-i, .chk-list.is-pre .chk-box, .chk-list.is-pre .chk-box path { transition: none; }
@media (max-width: 899.98px) { .chk { grid-template-columns: minmax(0, 1fr); } .chk-in { border-right: 0; border-bottom: 1px solid var(--line); } }
@media (max-width: 419.98px) { .chk-i { grid-template-columns: 24px minmax(0, 1fr); } .chk-i code { display: none; } }

/* ── Duty & tax estimator details (shell = .calc in site.css) ──────── */
.money { position: relative; }
.money > span { position: absolute; left: 14px; top: 50%; translate: 0 -50%; font: 600 11.5px/1 var(--mono); letter-spacing: .06em; color: var(--steel); pointer-events: none; }
.money .inp { padding-left: 52px; font-variant-numeric: tabular-nums; }
.dt-rate { display: grid; grid-template-columns: 1fr 84px; gap: 16px; align-items: center; }
.dt-out { justify-self: end; min-width: 84px; padding: 9px 10px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--paper); font-size: 1.05rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.calc-big .dt-cur { color: var(--on-navy-2); font-weight: 600; }
.calc-rows .dt-landed { border-bottom: 0; padding-top: 16px; }
.calc-rows .dt-landed dt { color: var(--on-navy); font-weight: 600; }
.calc-rows .dt-landed dd { font-size: 18px; color: var(--signal-hi); white-space: nowrap; }
.calc-rows .dt-landed dt small { display: block; margin-top: 4px; font: 500 11px/1.2 var(--mono); letter-spacing: .04em; color: var(--on-navy-2); }
.calc-note b { color: var(--on-navy); font-weight: 600; }
[data-basis][hidden] { display: none; }
@media (max-width: 599.98px) { .dt-fob { grid-template-columns: 1fr; } }

/* ── Assessment lanes (dark): bars grow to their relative time ─────── */
.cus-lanes { margin-top: clamp(48px, 6vw, 80px); padding-top: 28px; border-top: 1px solid var(--navy-line); }
.cus-lanes ul { display: grid; gap: 16px; margin: 20px 0 18px; }
.cus-lanes li { display: grid; grid-template-columns: minmax(190px, .8fr) minmax(0, 2fr) minmax(170px, .8fr); gap: 22px; align-items: center; }
.cl-k { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.cl-dot { width: 10px; height: 10px; flex: none; border-radius: 2px; }
.cl-dot.is-ok { background: #4fd88b; } .cl-dot.is-warn { background: #f2b14a; } .cl-dot.is-bad { background: #ff8f8f; }
.cl-bar { position: relative; height: 10px; border-radius: 2px; background: rgba(232, 236, 243, .08); overflow: hidden; }
.cl-bar i { position: absolute; inset: 0; border-radius: 2px; background: var(--signal-hi); transform-origin: 0 0; scale: var(--w) 1; transition: scale .9s var(--ease-io); transition-delay: calc(.25s + var(--i, 0) * .12s); }
.cus-lanes li:nth-child(1) .cl-bar i { background: #4fd88b; }
.cus-lanes li:nth-child(2) .cl-bar i { background: #f2b14a; }
.cus-lanes li:nth-child(3) .cl-bar i { background: #ff8f8f; }
.js .cus-lanes:not(.is-in) .cl-bar i { scale: 0 1; }
.cl-v { font: 500 13px/1.35 var(--mono); color: var(--on-navy-2); text-align: right; }
.cus-lanes .hint { color: var(--on-navy-2); }
@media (max-width: 767.98px) {
  .cus-lanes ul { gap: 20px; }
  .cus-lanes li { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cl-v { text-align: left; font-size: 12px; }
}

/* ── Hold-up cards + "already held?" strip ─────────────────────────── */
.card.hold .card-top { margin-bottom: 2px; }
.card .hold-fix { display: flex; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line-2); font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.hold-fix .i { width: 18px; height: 18px; margin-top: 2px; color: var(--signal); stroke-width: 2; }
.cus-stuck { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 22px; align-items: center; margin-top: 28px; padding: 22px 24px; border: 1.5px solid var(--ink); border-radius: var(--r); background: var(--card); }
.cus-stuck > .i { width: 26px; height: 26px; color: var(--signal); }
.cus-stuck p { color: var(--ink-2); max-width: 62ch; }
.cus-stuck p b { color: var(--ink); }
@media (max-width: 991.98px) { .cus-stuck { grid-template-columns: auto minmax(0, 1fr); } .cus-stuck .btn-row { grid-column: 1 / -1; } }

/* ── Reduced motion: final states, no staged choreography ──────────── */
@media (prefers-reduced-motion: reduce) {
  .js .cus-stack .cus-sheet, .js .cus-stack .cus-decl, .js .cus-stack .cd-rows dd span, .js .cus-stack .cd-status li::before, .js .cus-stack .cd-status li::after, .js .cus-stack .cd-status li > *, .js .cus-stack .cd-foot b, .js .cus-stack .cd-stamp, .chk-i, .chk-box, .chk-box path, .cl-bar i { transition: none !important; }
  .js .cus-stack:not(.is-in) .cus-sheet { translate: none; rotate: var(--r); }
  .js .cus-stack:not(.is-in) .cus-decl { translate: none; }
  .js .cus-stack:not(.is-in) .cd-rows dd span { clip-path: none; }
  .js .cus-stack:not(.is-in) .cd-status li::before { background: var(--signal); border-color: var(--signal); }
  .js .cus-stack:not(.is-in) .cd-status li:last-child::before { background: var(--ok); border-color: var(--ok); }
  .js .cus-stack:not(.is-in) .cd-status li::after { scale: 1 1; }
  .js .cus-stack:not(.is-in) .cd-status li > span { color: inherit; }
  .js .cus-stack:not(.is-in) .cd-foot b { opacity: 1; }
  .js .cus-stack:not(.is-in) .cd-stamp { opacity: .94; scale: 1; rotate: -9deg; }
  .js .chk:not(.is-in) .chk-i { opacity: 1; translate: none; }
  .js .chk:not(.is-in) .chk-i:not(.is-opt) .chk-box { background: var(--signal); border-color: var(--signal); }
  .js .chk:not(.is-in) .chk-i:not(.is-opt) .chk-box path { stroke-dashoffset: 0; }
  .js .cus-lanes:not(.is-in) .cl-bar i { scale: var(--w) 1; }
}