/* Delivery page: truck selector + compare table */
.dl-avatar { background: var(--blue-deep); }
.trucks .sec-head { max-width: 860px; }
.trucks .sec-head .lead { max-width: 720px; }

/* tabs */
.tsel-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.ttab { --p: 0; position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "n fit" "ico ico" "name name"; gap: 10px 12px; align-items: center; padding: 18px 20px 20px; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--navy); overflow: hidden; transition: background .3s, color .3s, border-color .3s, transform .35s var(--ease), box-shadow .35s; }
.ttab:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: 0 18px 36px -26px rgba(11,37,50,.6); }
.ttab-n { grid-area: n; font-family: var(--font-head); font-weight: 700; font-size: 16px; letter-spacing: .08em; color: var(--blue-deep); }
.ttab-fit { grid-area: fit; justify-self: end; font-family: var(--font-head); font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: var(--blue-soft); color: var(--navy); white-space: nowrap; }
.ttab-ico { grid-area: ico; width: 88px; height: 55px; color: var(--blue-deep); transition: color .3s, transform .5s var(--ease); }
.ttab-name { grid-area: name; font-family: var(--font-head); font-weight: 600; font-size: clamp(22px, 2vw, 27px); line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.ttab::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--blue); transform-origin: left; transform: scaleX(0); }
.tsel.is-live .ttab[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); transform: none; box-shadow: 0 22px 40px -26px rgba(11,37,50,.9); }
.tsel.is-live .ttab[aria-selected="true"] .ttab-n { color: var(--blue); }
.tsel.is-live .ttab[aria-selected="true"] .ttab-ico { color: var(--blue); transform: translateX(6px); }
.tsel.is-live .ttab[aria-selected="true"] .ttab-fit { background: var(--blue); color: var(--ink); }
.tsel.is-live .ttab[aria-selected="true"]::after { transform: scaleX(max(var(--p), .04)); transition: transform .25s linear; }

/* panels */
.tsel-panels { display: grid; gap: 18px; }
.tpanel { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-areas: "media copy" "meta copy"; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--white); box-shadow: var(--shadow); scroll-margin-top: 120px; }
.tpanel[hidden] { display: none; }
.tpanel > * { min-width: 0; }
.tpanel:focus { outline: none; }
.tpanel-media { grid-area: media; position: relative; background: var(--paper); }
.tpanel-meta { grid-area: meta; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 18px 20px; border-top: 1px solid var(--line); background: var(--white); }
.tpanel-copy { grid-area: copy; border-left: 1px solid var(--line); }
.tpanel-media video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--paper); }
.tplay { position: absolute; right: 16px; top: 16px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--navy); color: var(--white); display: grid; place-items: center; box-shadow: 0 10px 24px -12px rgba(4,7,7,.6); transition: background .25s, transform .3s var(--ease); }
.tplay:hover { background: var(--blue-deep); transform: scale(1.06); }
.tplay svg { width: 18px; height: 18px; grid-area: 1 / 1; }
.tplay .i-pause { display: none; }
.tplay.is-playing .i-pause { display: block; }
.tplay.is-playing .i-play { display: none; }

.tpanel-copy { padding: clamp(26px, 3vw, 40px); display: grid; align-content: center; gap: 14px; }
.tpanel-n { font-family: var(--font-head); font-weight: 600; font-size: 15px; letter-spacing: .14em; color: var(--blue-deep); }
.tpanel-copy h3 { display: grid; gap: 8px; color: var(--navy); }
.t-name { font-size: clamp(34px, 3.4vw, 46px); line-height: .95; }
.t-tag { font-family: var(--font-body); font-weight: 600; font-size: 17px; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--blue-deep); }
.tpanel-copy > p:not(.tpanel-n) { color: var(--muted); font-size: 15.5px; line-height: 1.6; }
.tfit { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: baseline; padding: 16px 18px; border-radius: 10px; background: var(--blue-soft); border-left: 4px solid var(--blue); }
.tfit-label { font-family: var(--font-head); font-weight: 700; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); white-space: nowrap; }
.tfit-body { font-weight: 600; color: var(--navy); font-size: 15px; line-height: 1.45; }
.tpanel-photo { margin: 0; position: relative; width: 150px; }
.tpanel-photo img { width: 150px; height: 100px; object-fit: cover; border-radius: 8px; }
.tpanel-photo figcaption { position: absolute; left: 6px; bottom: 6px; right: 6px; font-size: 11px; line-height: 1.25; font-weight: 600; color: var(--white); background: rgba(11,37,50,.82); padding: 3px 6px; border-radius: 4px; }

/* panel entrance when switching (JS mode only) */
@media (prefers-reduced-motion: no-preference) {
  .tsel.is-live .tpanel:not([hidden]) .tpanel-copy > * { animation: tIn .55s var(--ease) both; }
  .tsel.is-live .tpanel:not([hidden]) .tpanel-copy > *:nth-child(2) { animation-delay: .05s; }
  .tsel.is-live .tpanel:not([hidden]) .tpanel-copy > *:nth-child(3) { animation-delay: .1s; }
  .tsel.is-live .tpanel:not([hidden]) .tpanel-copy > *:nth-child(n+4) { animation-delay: .15s; }
  .tsel.is-live .tpanel:not([hidden]) .tpanel-media { animation: tFade .5s ease both; }
}
@keyframes tIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tFade { from { opacity: .2; } to { opacity: 1; } }

/* super tilt diagram (no artwork in the Figma yet) */
.tdiag { position: relative; width: 100%; aspect-ratio: 16 / 9; display: grid; align-content: end; background: linear-gradient(180deg, var(--paper) 0%, #ececec 86%, #dcdcdc 86%); }
.tdiag-art { width: 84%; margin: 0 auto 7%; color: var(--navy); }
.tdiag-art .tdiag-ground { stroke: #b9c1c6; }
.tdiag-cap { position: absolute; left: 0; right: 0; bottom: 3.6%; text-align: center; font-family: var(--font-body); font-weight: 600; font-size: clamp(11px, 1vw, 14px); letter-spacing: .22em; text-transform: uppercase; color: #6b7378; }

/* compare table */
.tcompare { margin-top: clamp(48px, 6vw, 72px); }
.tcompare-title { font-size: clamp(26px, 2.6vw, 32px); color: var(--navy); margin-bottom: 18px; }
.tcompare table.data td:nth-child(3) { white-space: nowrap; }

@media (max-width: 1000px) {
  .tpanel { grid-template-columns: 1fr; grid-template-areas: "media" "copy" "meta"; grid-template-rows: auto; }
  .tpanel-copy { border-left: 0; }
}
@media (max-width: 640px) {
  .tcompare .table-wrap { border: 0; background: none; overflow: visible; }
  .tcompare table.data { min-width: 0; }
  .tcompare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tcompare table.data, .tcompare tbody, .tcompare tr, .tcompare th, .tcompare td { display: block; }
  .tcompare tbody { display: grid; gap: 10px; }
  .tcompare tbody tr { border: 1px solid var(--line); border-radius: 12px; background: var(--white) !important; padding: 6px 16px 10px; }
  .tcompare table.data tbody th { padding: 6px 0 4px; border-bottom: 1px solid var(--line); font-family: var(--font-head); font-size: 20px; text-transform: uppercase; }
  .tcompare table.data td { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 6px 0; border: 0; font-size: 15px; white-space: normal !important; }
  .tcompare table.data td::before { content: attr(data-label); font-weight: 600; font-size: 13px; color: var(--navy); }
}
@media (max-width: 760px) {
  .tsel-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ttab { padding: 14px; grid-template-areas: "n fit" "name name"; }
  .ttab-ico { display: none; }
  .ttab-name { font-size: 21px; }
  .ttab-fit { font-size: 13px; padding: 2px 8px; }
  .tplay { right: 10px; top: 10px; }
  .tfit { grid-template-columns: 1fr; }
  .tpanel-meta { grid-template-columns: 1fr; }
  .tpanel-photo, .tpanel-photo img { width: 100%; height: auto; }
  .tpanel-photo img { aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
  .ttab, .ttab-ico, .tplay { transition: none; }
  .tsel.is-live .ttab[aria-selected="true"]::after { display: none; }
}
.tcompare tbody th a { display: inline-flex; align-items: center; min-height: 44px; }