/* DTC structured detail page (2026-07 template) — tokens reuse site.css brand vars.
   All selectors are scoped under .dtc-page — never touch global tags (*, body, a, img). */
.dtc-page{ --ok:#1a7f4b; --warn:#b06f00; --danger:var(--brand-red,#c8102e); --bg-grey:#f5f5f7; --line2:#e5e5ea; }
.dtc-wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
.dtc-crumb{ font-size:13px; color:var(--ink-3,#86868b); padding:96px 0 0; }
.dtc-crumb a:hover{ color:var(--brand-red,#c8102e); }
.dtc-crumb b{ color:var(--ink,#1d1d1f); font-weight:600; }

.dtc-shell{ display:grid; grid-template-columns:1fr 252px; gap:48px; padding:18px 0 80px; align-items:start; }
@media(max-width:980px){ .dtc-shell{ grid-template-columns:1fr; gap:0; } }

.dtc-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-red,#c8102e); margin:22px 0 10px; }
.dtc-eyebrow::before{ content:''; width:26px; height:2px; background:var(--brand-red,#c8102e); }
.dtc-head h1{ font-size:clamp(30px,4.4vw,46px); line-height:1.07; letter-spacing:-.02em; font-weight:800; margin:0; }
.dtc-num{ color:var(--brand-red,#c8102e); }
.dtc-oneline{ font-size:20px; color:var(--ink-2,#6e6e73); margin-top:16px; max-width:46ch; line-height:1.5; }
.dtc-byline{ display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; font-size:13px; color:var(--ink-3,#86868b); margin-top:20px; padding-top:18px; border-top:1px solid var(--line2); }
.dtc-dot{ width:3px; height:3px; border-radius:50%; background:var(--ink-3,#86868b); display:inline-block; }
.dtc-byline b{ color:var(--ink-2,#6e6e73); font-weight:600; }

.dtc-qr{ margin:34px 0 8px; border:1px solid var(--line2); border-radius:18px; overflow:hidden; background:linear-gradient(180deg,#fff,#fcfcfd); }
.dtc-qr-head{ display:flex; align-items:center; gap:10px; padding:13px 20px; background:#111114; color:#fff; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; }
.dtc-live{ width:8px; height:8px; border-radius:50%; background:#33d17a; box-shadow:0 0 0 0 rgba(51,209,122,.6); animation:dtcPulse 2s infinite; display:inline-block; }
@keyframes dtcPulse{ 0%{box-shadow:0 0 0 0 rgba(51,209,122,.5)} 70%{box-shadow:0 0 0 7px rgba(51,209,122,0)} 100%{box-shadow:0 0 0 0 rgba(51,209,122,0)} }
.dtc-qr-grid{ display:grid; grid-template-columns:repeat(6,1fr); }
.dtc-qr-cell{ padding:18px 20px; border-right:1px solid var(--line2); border-top:1px solid var(--line2); }
.dtc-qr-cell:nth-child(6n){ border-right:none; }
.dtc-qr-label{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3,#86868b); font-weight:700; }
.dtc-qr-val{ font-size:19px; font-weight:700; margin-top:7px; display:flex; align-items:center; gap:7px; }
.dtc-pill{ display:inline-block; padding:3px 11px; border-radius:999px; font-size:13px; font-weight:700; }
.dtc-pill-warn{ background:#fff3df; color:var(--warn); }
.dtc-pill-ok{ background:#e7f6ee; color:var(--ok); }
.dtc-pill-danger{ background:#fdeaed; color:var(--danger); }
.dtc-tl{ display:inline-flex; align-items:center; gap:6px; font-size:16px; font-weight:700; }
.dtc-tl::before{ content:''; width:11px; height:11px; border-radius:50%; }
.dtc-tl-amber::before{ background:var(--warn); }
.dtc-tl-green::before{ background:var(--ok); }
.dtc-tl-red::before{ background:var(--danger); }
@media(max-width:760px){ .dtc-qr-grid{ grid-template-columns:repeat(2,1fr); } .dtc-qr-cell:nth-child(6n){ border-right:1px solid var(--line2); } .dtc-qr-cell:nth-child(2n){ border-right:none; } }
.dtc-costnote{ font-size:13px; color:var(--ink-3,#86868b); margin:10px 2px 0; }

.dtc-page section{ padding:40px 0; border-bottom:1px solid var(--line2); }
.dtc-kicker{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3,#86868b); }
.dtc-page h2{ font-size:27px; letter-spacing:-.01em; font-weight:800; margin:8px 0 18px; }
.dtc-page h3{ font-size:18px; font-weight:700; margin:0 0 4px; }
.dtc-page p{ color:#33333a; margin-bottom:14px; }
.dtc-note{ font-size:13px; color:var(--ink-3,#86868b); margin-top:14px; }

.dtc-cause{ display:grid; grid-template-columns:42px 1fr auto; gap:16px; align-items:start; padding:16px 0; border-top:1px solid var(--line2); }
.dtc-cause:first-of-type{ border-top:none; }
.dtc-rank{ width:34px; height:34px; border-radius:9px; background:var(--ink,#1d1d1f); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; }
.dtc-cause:nth-of-type(1) .dtc-rank{ background:var(--brand-red,#c8102e); }
.dtc-freq{ font-size:12px; font-weight:700; color:var(--ink-3,#86868b); white-space:nowrap; padding-top:8px; }
.dtc-cause p{ margin:4px 0 0; font-size:15px; color:var(--ink-2,#6e6e73); }

.dtc-sym{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; list-style:none; padding:0; margin:0; }
@media(max-width:680px){ .dtc-sym{ grid-template-columns:1fr; } }
.dtc-sym li{ display:flex; gap:11px; align-items:flex-start; padding:14px 16px; background:var(--bg-grey); border-radius:12px; font-size:15px; }
.dtc-sym i{ color:var(--brand-red,#c8102e); flex:none; margin-top:2px; font-size:18px; }

.dtc-step{ display:grid; grid-template-columns:34px 1fr; gap:16px; padding:16px 0; border-top:1px solid var(--line2); }
.dtc-step:first-of-type{ border-top:none; }
.dtc-n{ width:34px; height:34px; border-radius:50%; border:2px solid var(--ink,#1d1d1f); font-weight:800; display:flex; align-items:center; justify-content:center; font-size:14px; }
.dtc-tool{ display:inline-block; margin-top:7px; font-size:12px; font-weight:700; color:var(--brand-red,#c8102e); background:#fdeaed; padding:3px 10px; border-radius:6px; }
.dtc-step p{ font-size:15px; color:var(--ink-2,#6e6e73); margin:5px 0 0; }

.dtc-cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:820px){ .dtc-cases{ grid-template-columns:1fr; } }
.dtc-case{ border:1px solid var(--line2); border-radius:14px; padding:18px; background:#fff; transition:.2s; }
.dtc-case:hover{ box-shadow:0 8px 24px rgba(0,0,0,.06); transform:translateY(-2px); }
.dtc-veh{ font-size:13px; font-weight:700; color:var(--brand-red,#c8102e); letter-spacing:.02em; }
.dtc-case h3{ font-size:15px; margin:8px 0 6px; }
.dtc-case p{ font-size:13.5px; color:var(--ink-2,#6e6e73); margin:0; }

.dtc-cost{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line2); border-radius:14px; overflow:hidden; }
@media(max-width:680px){ .dtc-cost{ grid-template-columns:1fr; } }
.dtc-cost > div{ padding:20px; border-right:1px solid var(--line2); }
.dtc-cost > div:last-child{ border-right:none; }
.dtc-part{ font-size:14px; color:var(--ink-2,#6e6e73); }
.dtc-amt{ font-size:26px; font-weight:800; margin-top:6px; }
.dtc-costsub{ font-size:12px; color:var(--ink-3,#86868b); margin-top:4px; }

.dtc-prod{ display:grid; grid-template-columns:150px 1fr auto; gap:26px; align-items:center; background:linear-gradient(135deg,#111114,#26262b); color:#fff; border-radius:20px; padding:30px; }
@media(max-width:760px){ .dtc-prod{ grid-template-columns:1fr; text-align:center; gap:16px; } }
.dtc-shot{ aspect-ratio:1; background:#3a3a40; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#8a8a92; font-size:12px; text-align:center; overflow:hidden; }
.dtc-shot img{ width:100%; height:100%; object-fit:cover; }
.dtc-prod h3{ color:#fff; font-size:22px; }
.dtc-why{ color:#c9c9d0; font-size:14.5px; margin-top:8px; max-width:48ch; }
.dtc-feat{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
@media(max-width:760px){ .dtc-feat{ justify-content:center; } }
.dtc-feat span{ font-size:12px; background:rgba(255,255,255,.12); padding:5px 11px; border-radius:7px; }
.dtc-btn{ display:inline-flex; align-items:center; gap:8px; background:var(--brand-red,#c8102e); color:#fff; font-weight:700; font-size:15px; padding:13px 24px; border-radius:11px; border:none; cursor:pointer; white-space:nowrap; transition:.2s; text-decoration:none; }
.dtc-btn:hover{ background:var(--brand-red-dark,#8c0a1f); transform:translateY(-1px); }
.dtc-btn-ghost{ background:transparent; border:1.5px solid rgba(255,255,255,.4); color:#fff; }
.dtc-btn-ghost:hover{ background:rgba(255,255,255,.12); }

.dtc-ai{ position:relative; border:1.5px dashed #c7c7cf; border-radius:20px; padding:32px; text-align:center; background:#fbfbfd; overflow:hidden; }
.dtc-soon{ position:absolute; top:16px; right:16px; font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--ink-3,#86868b); background:#fff; border:1px solid var(--line2); padding:5px 11px; border-radius:999px; }
.dtc-ico{ width:48px; height:48px; margin:0 auto 14px; border-radius:14px; background:linear-gradient(135deg,var(--brand-red,#c8102e),var(--brand-red-dark,#8c0a1f)); display:flex; align-items:center; justify-content:center; }
.dtc-ico i{ font-size:24px; color:#fff; }
.dtc-ai h3{ font-size:21px; }
.dtc-ai p{ max-width:50ch; margin:8px auto 18px; color:var(--ink-2,#6e6e73); }
.dtc-ai .dtc-btn{ opacity:.55; pointer-events:none; }

.dtc-related{ display:flex; flex-wrap:wrap; gap:10px; }
.dtc-related a{ display:flex; flex-direction:column; border:1px solid var(--line2); border-radius:11px; padding:12px 16px; min-width:150px; transition:.18s; text-decoration:none; }
.dtc-related a:hover{ border-color:var(--brand-red,#c8102e); background:#fff; }
.dtc-rc{ font-weight:800; font-size:15px; color:var(--brand-red,#c8102e); }
.dtc-rd{ font-size:12.5px; color:var(--ink-2,#6e6e73); margin-top:2px; }

.dtc-faq dt{ font-weight:700; font-size:16px; padding:18px 0 6px; border-top:1px solid var(--line2); cursor:pointer; display:flex; justify-content:space-between; gap:16px; }
.dtc-faq dt:first-of-type{ border-top:none; }
.dtc-faq dt::after{ content:'+'; color:var(--brand-red,#c8102e); font-weight:700; font-size:20px; }
.dtc-faq dd{ font-size:15px; color:var(--ink-2,#6e6e73); padding-bottom:16px; max-width:62ch; }

.dtc-aside{ position:sticky; top:74px; }
@media(max-width:980px){ .dtc-aside{ display:none; } }
.dtc-toc-l{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3,#86868b); margin-bottom:14px; }
.dtc-toc a{ display:block; font-size:14px; color:var(--ink-2,#6e6e73); padding:7px 0 7px 14px; border-left:2px solid var(--line2); transition:.15s; text-decoration:none; }
.dtc-toc a:hover{ color:var(--ink,#1d1d1f); border-color:var(--ink-3,#86868b); }
.dtc-toc a.active{ color:var(--brand-red,#c8102e); border-color:var(--brand-red,#c8102e); font-weight:600; }