/* detail.css — /programs/[id] page. Pairs with directory.css for tokens. */

.dt-wrap { max-width: 1280px; margin: 0 auto; padding: 24px 28px 96px; }

.dt-crumbs { display: flex; gap: 6px; align-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--ink-50); margin-bottom: 22px; }
.dt-crumbs a { color: var(--ink-70); text-decoration: none; }
.dt-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.dt-crumb-curr { color: var(--ink); }
.dt-crumb-sep { color: var(--ink-30); }

/* ───────── Hero ───────── */
.dt-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; padding-bottom: 26px; border-bottom: 1px solid var(--border-soft); }
.dt-hero-l { display: flex; gap: 20px; align-items: flex-start; min-width: 0; flex-wrap: wrap; }
/* Preview gallery — top of the right sidebar. Screenshots stack vertically
   so the main column's description is visible without scrolling. With one
   screenshot the card is compact; additional screenshots (dashboard, landing
   pages) stack underneath. */
.dt-preview-side {
    display: flex; flex-direction: column; gap: 10px;
    /* Stays visible while reading the long description on its left. */
    position: sticky; top: 78px;
    align-self: start;
}
/* Mobile: stop stickying + collapse 3-col grid + shrink screenshots so they
   don't dominate the viewport. Also reset grid-row spans set at the 1100px
   breakpoint so preview + sidebar STACK below the main column instead of
   running in parallel. */
@media (max-width: 720px) {
    .dt-preview-side {
        position: static;
        max-width: 100%;
    }
    .dt-preview-img {
        aspect-ratio: 16 / 9;
        max-height: 200px;
    }
    .dt-preview-side .dt-preview-fig:nth-child(n+2) { display: none; }
    .dt-grid.dt-grid--3col .dt-side {
        grid-row: auto;
        grid-column: 1;
        position: static;
    }

    /* Section reorder + full-width fixes now live in their own
       @media (max-width: 1100px) block further down so they apply across
       tablet sizes too (between 720px and 1100px), not just narrow mobile. */
    /* Compress the hero on mobile — favicon, title, meta, breadcrumb all
       shrink so the user reaches the body content with less scrolling. */
    .dt-wrap { padding: 16px 16px 64px; }
    .dt-crumbs { font-size: 10.5px; margin-bottom: 12px; }
    .dt-hero { gap: 14px; padding-bottom: 16px; }
    .dt-hero-l { gap: 12px; }
    .dt-favi { width: 48px; height: 48px; border-radius: 10px; }
    .dt-favi-img { padding: 5px; }
    .dt-favi-letter { font-size: 22px; }
    .dt-meta { font-size: 10.5px; gap: 4px; margin-bottom: 4px; flex-wrap: nowrap; overflow: hidden; }
    /* Hide "Verified " / " ago" / "First seen " on mobile — the heat pill
       provides verified context, and the date alone reads clearly. */
    .dt-meta-long { display: none; }
    .dt-title { font-size: 24px; line-height: 1.1; margin: 2px 0 4px; }
    .dt-sub { font-size: 12px; }
    .dt-hero-r { gap: 6px; }
    .dt-hero-r .dt-share, .dt-hero-r .dt-bookmark, .dt-hero-r .dt-add-compare,
    .dt-hero-r .dt-visit, .dt-hero-r .dt-apply, .dt-hero-r .dt-sub {
        padding: 7px 10px; font-size: 12px;
    }
    .dt-net-picker { gap: 8px; padding: 8px 10px; margin: 12px 0 4px; }
    .dt-stats { gap: 8px; margin: 14px 0; }
    .dt-stat { padding: 10px 12px; }
    .dt-stat-big { font-size: 22px; }
}
.dt-preview-fig { margin: 0; }
.dt-preview-link { display: block; text-decoration: none; color: inherit; }
.dt-preview-link:hover .dt-preview-img { box-shadow: 0 4px 16px rgba(10,23,48,0.12); border-color: var(--ink-15); }
.dt-preview-link:hover .dt-preview-cap { color: var(--ink); }
.dt-preview-img {
    width: 100%; aspect-ratio: 16 / 10;
    object-fit: cover; object-position: top center;
    border-radius: 10px;
    background: var(--ink-04);
    border: 1px solid var(--border-soft);
    box-shadow: 0 2px 8px rgba(10,23,48,0.05);
    display: block;
}
.dt-preview-cap {
    font-family: var(--font-mono); font-size: 10.5px;
    color: var(--ink-50); margin-top: 4px;
    letter-spacing: 0.02em;
}
.dt-preview-hint {
    font-family: var(--font-mono); font-size: 10px;
    color: var(--ink-40); letter-spacing: 0.04em;
    text-align: right; margin-top: -2px;
}

.dt-net-picker {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin: 18px 0 6px;
    padding: 12px 16px;
    background: var(--bg-tint); border: 1px solid var(--border-soft); border-radius: 10px;
}
.dt-net-picker-lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; color: var(--ink-50); font-weight: 600; }
.dt-net-picker-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.dt-net-tab {
    padding: 6px 12px; border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-elev);
    color: var(--ink-70);
    font-size: 13px; font-weight: 500; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    transition: background 80ms, border-color 80ms;
}
.dt-net-tab:hover { background: var(--ink-04); color: var(--ink); }
.dt-net-tab.is-active { background: var(--ink); color: var(--bg-elev); border-color: var(--ink); }
.dt-net-tab-tag {
    font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
    background: var(--accent-soft); color: var(--accent-ink);
    padding: 1px 5px; border-radius: 8px; letter-spacing: 0.04em;
}
.dt-net-tab.is-active .dt-net-tab-tag { background: rgba(255,255,255,0.18); color: var(--bg-elev); }
.dt-net-picker-hint { font-size: 12px; color: var(--ink-50); margin-left: auto; }
@media (max-width: 720px) { .dt-net-picker-hint { display: none; } }
.dt-net-signup { margin-left: auto; }
@media (max-width: 720px) { .dt-net-signup { width: 100%; justify-content: center; margin-left: 0; margin-top: 8px; } }
.dt-fact-v .is-active-net { font-weight: 600; color: var(--accent-ink); }
/* Favi now sits inline with the title (.dt-title-row) instead of as a
   left-of-text block. Shrunk from 72px → 56px so it visually balances the
   36px title beside it without dwarfing it. Mobile rules later in this file
   tighten it further. */
.dt-favi { width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, var(--ink-08), var(--ink-15)); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; flex-shrink: 0; }
.dt-title-row { display: flex; align-items: center; gap: 16px; margin: 2px 0 6px; }
.dt-favi-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; padding: 10px;
    background: var(--bg-elev);
    z-index: 1;
}
.dt-favi-letter { font-weight: 700; font-size: 26px; color: var(--ink-70); letter-spacing: -0.02em; }
.dt-favi .heat-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 2; }

.dt-hero-text { min-width: 0; }
.dt-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-50); display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.dt-meta-sep { color: var(--ink-30); }
.dt-heat-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 11px; font-weight: 600; }
.dt-heat-pill-dot { width: 6px; height: 6px; border-radius: 50%; }
.dt-heat-new       { background: color-mix(in oklab, var(--heat-new), white 80%);      color: color-mix(in oklab, var(--heat-new), black 40%); }
.dt-heat-new       .dt-heat-pill-dot { background: var(--heat-new); }
.dt-heat-trending  { background: color-mix(in oklab, var(--heat-trend), white 80%);    color: color-mix(in oklab, var(--heat-trend), black 40%); }
.dt-heat-trending  .dt-heat-pill-dot { background: var(--heat-trend); }
.dt-heat-verified  { background: color-mix(in oklab, var(--heat-verified), white 85%); color: color-mix(in oklab, var(--heat-verified), black 40%); }
.dt-heat-verified  .dt-heat-pill-dot { background: var(--heat-verified); }
.dt-heat-watch     { background: color-mix(in oklab, var(--heat-watch), white 80%);    color: color-mix(in oklab, var(--heat-watch), black 40%); }
.dt-heat-watch     .dt-heat-pill-dot { background: var(--heat-watch); }
.dt-heat-established { background: var(--ink-04); color: var(--ink-70); }
.dt-heat-established .dt-heat-pill-dot { background: var(--heat-est); }

.dt-title { font-size: 36px; font-weight: 600; letter-spacing: -0.025em; margin: 0 0 4px; line-height: 1.05; word-wrap: break-word; }
.dt-sub { font-family: var(--font-mono); font-size: 13px; color: var(--ink-50); }
.dt-sub a { color: inherit; text-decoration: none; }
.dt-sub a:hover { color: var(--ink); text-decoration: underline; }

.dt-hero-r { display: flex; gap: 8px; align-items: center; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.dt-share, .dt-bookmark { display: inline-flex; gap: 6px; align-items: center; background: var(--bg-elev); border: 1px solid var(--border); color: var(--ink); padding: 8px 12px; border-radius: 7px; font-size: 13px; font-weight: 500; cursor: pointer; }
.dt-share:hover, .dt-bookmark:hover { background: var(--ink-04); }
.dt-bookmark.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.dt-apply { display: inline-flex; gap: 6px; align-items: center; padding: 9px 16px; font-size: 13px; }

/* ───────── Stats strip ───────── */
.dt-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0 4px; }
.dt-stat { padding: 16px 18px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 10px; position: relative; }
.dt-stat.is-accent { border-color: var(--accent); background: var(--accent-soft); }
.dt-stat-lbl { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-50); margin-bottom: 8px; }
.dt-stat.is-accent .dt-stat-lbl { color: var(--accent-ink); }
.dt-stat-big { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.dt-stat.is-accent .dt-stat-big { color: var(--accent-ink); }
.dt-stat-big .mu { color: var(--ink-50); font-size: 18px; }
.dt-stat.is-accent .dt-stat-big .mu { color: var(--accent-ink); opacity: .7; }
.dt-stat-sub { font-family: var(--font-mono); font-size: 11px; color: var(--ink-50); margin-top: 8px; }
.dt-stat.is-accent .dt-stat-sub { color: var(--accent-ink); opacity: .8; }
.dt-stat-tag { display: inline-block; padding: 1px 5px; border-radius: 3px; background: var(--ink-08); font-size: 9px; color: var(--ink-70); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; vertical-align: 3px; margin-left: 6px; }

/* ───────── Body grid ───────── */
.dt-grid { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; margin-top: 32px; }
/* Three-column layout: main (description) | preview (screenshots, vertical
   stack) | at-a-glance sidebar. Preview is narrower than the sidebar so the
   description still gets the largest reading column. */
.dt-grid--3col { grid-template-columns: minmax(0, 1fr) 240px 300px; }
@media (max-width: 1100px) {
    .dt-grid--3col { grid-template-columns: minmax(0, 1fr) 280px; }
    .dt-grid--3col .dt-preview-side { order: 2; }
    .dt-grid--3col .dt-side { order: 3; grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 720px) {
    /* Note: display flips to flex via the .dt-grid.dt-grid--3col rule in the
       1100px block below, and section ordering is handled there too.
       Leaving grid-template-columns here as a fallback if any environment
       resolves to grid display — it's inert under flex. */
    .dt-grid--3col { grid-template-columns: 1fr; }
}

/* ───── Tablet + mobile single-column flow + section reorder ─────
   Applies anywhere narrower than the 3-col desktop breakpoint. Flattens the
   grid to a single flex column so every section/card spans full width, and
   re-sequences them by usefulness for someone evaluating a program.

   Ordering rationale (top = most useful first):
     1  About this program  — narrative pitch
     2  At a glance         — comprehensive structured facts
     3  Preview screenshots — visual context
     4  Reviews             — social proof / trust signal
     5  Restrictions        — qualification check (dealbreaker if violated)
     6  Commission trend    — is this stable / improving?
     7  Q&A                 — community knowledge
     8  Verified proofs     — supporting evidence
     9  Activity            — timeline (least urgent)
    10  Related programs    — alternatives (after they've decided)
*/
@media (max-width: 1100px) {
    /* .dt-grid.dt-grid--3col specificity (0,2,0) beats the unmedia-queried
       .dt-grid { display: grid } above (0,1,0) regardless of source order. */
    .dt-grid.dt-grid--3col { display: flex; flex-direction: column; gap: 18px; }
    .dt-grid.dt-grid--3col .dt-main,
    .dt-grid.dt-grid--3col .dt-side { display: contents; }
    .dt-grid.dt-grid--3col .dt-sect-about    { order: 1; }
    .dt-grid.dt-grid--3col .dt-card-glance   { order: 2; }
    .dt-grid.dt-grid--3col .dt-preview-side  { order: 3; }
    .dt-grid.dt-grid--3col #dt-reviews       { order: 4; }
    .dt-grid.dt-grid--3col .dt-sect-restrict { order: 5; }
    .dt-grid.dt-grid--3col .dt-card-trend    { order: 6; }
    .dt-grid.dt-grid--3col #dt-qa            { order: 7; }
    .dt-grid.dt-grid--3col .dt-sect-proofs   { order: 8; }
    .dt-grid.dt-grid--3col .dt-card-activity { order: 9; }
    .dt-grid.dt-grid--3col .dt-sect-related  { order: 10; }
    /* With .dt-side / .dt-preview-side at display:contents, their children
       become flex children of the grid and default to shrink-wrap. Stretch
       them to the column's full width. */
    .dt-grid.dt-grid--3col .dt-card,
    .dt-grid.dt-grid--3col .dt-preview-side { width: 100%; }
}
.dt-main { min-width: 0; }

.dt-sect { padding: 28px 0; border-top: 1px solid var(--border-soft); }
.dt-sect:first-child { border-top: 0; padding-top: 8px; }
.dt-sect-hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; gap: 12px; }
.dt-sect-ttl { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.dt-sect-sub { font-family: var(--font-mono); font-size: 11px; color: var(--ink-50); flex-shrink: 0; }

/* Description */
.dt-desc { font-size: 15px; line-height: 1.65; color: var(--ink-70); max-width: 64ch; }
.dt-desc p { margin: 0 0 14px; }
.dt-desc p:last-child { margin-bottom: 0; }
.dt-desc strong { color: var(--ink); font-weight: 600; }

/* Restrictions callout */
.dt-rules { background: var(--bg-tint); border: 1px solid var(--border-soft); border-left: 3px solid var(--accent); border-radius: 8px; padding: 16px 20px; }
.dt-rules-row { display: grid; grid-template-columns: 180px 1fr; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); align-items: center; }
.dt-rules-row:last-child { border-bottom: 0; padding-bottom: 0; }
.dt-rules-row:first-child { padding-top: 0; }
.dt-rules-l { font-family: var(--font-mono); font-size: 11px; color: var(--ink-50); text-transform: uppercase; letter-spacing: 0.05em; }
.dt-rules-r { display: flex; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--ink); align-items: center; }
.dt-rules-x { color: var(--ink-50); font-size: 12px; }
.dt-rules-x::before { content: '✕'; margin-right: 6px; color: var(--ink-30); font-size: 10px; }
.dt-rules-yes { color: var(--ink); font-size: 12px; font-weight: 500; }
.dt-rules-yes::before { content: '✓'; margin-right: 6px; color: var(--heat-verified); font-weight: 700; }

/* Payment proofs */
.dt-proofs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dt-proof { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 10px; overflow: hidden; transition: border-color 100ms, transform 100ms; }
.dt-proof:hover { border-color: var(--ink-30); transform: translateY(-1px); }
.dt-proof-img { aspect-ratio: 5/3; background: linear-gradient(135deg, var(--ink-04), var(--ink-08)); position: relative; }
.dt-proof-img svg { width: 100%; height: 100%; display: block; }
.dt-proof-body { padding: 12px 14px 14px; }
.dt-proof-amount { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--ink); line-height: 1; }
.dt-proof-who { font-family: var(--font-mono); font-size: 11px; color: var(--ink-50); margin: 4px 0 8px; }
.dt-proof-note { font-size: 12px; color: var(--ink-70); line-height: 1.5; }
.dt-proofs-foot { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; }
.dt-proofs-cta { background: none; border: 0; color: var(--accent); cursor: pointer; font-size: 13px; font-weight: 500; padding: 0; }
.dt-proofs-cta:hover { text-decoration: underline; }
.dt-proofs-disclaimer { font-family: var(--font-mono); font-size: 10px; color: var(--ink-50); }

/* Related programs */
.dt-related { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.dt-rel { display: flex; gap: 12px; padding: 14px 16px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 10px; text-decoration: none; color: var(--ink); align-items: center; position: relative; transition: border-color 100ms, transform 100ms; }
.dt-rel:hover { border-color: var(--ink-30); transform: translateY(-1px); }
.dt-rel .heat-bar { position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; }
.dt-rel-text { flex: 1; min-width: 0; padding-left: 8px; }
.dt-rel-name { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.dt-rel-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-50); margin-top: 2px; }
.dt-rel-r { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--ink); white-space: nowrap; }

/* Q&A */
.dt-qa { display: flex; flex-direction: column; gap: 0; }
.dt-qa-item { padding: 14px 0; border-bottom: 1px solid var(--border-soft); display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: flex-start; }
.dt-qa-item:last-child { border-bottom: 0; padding-bottom: 4px; }
.dt-qa-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--ink-08), var(--ink-15)); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; color: var(--ink-70); font-weight: 600; flex-shrink: 0; }
.dt-qa-meta { display: flex; gap: 8px; align-items: baseline; font-size: 12px; margin-bottom: 4px; }
.dt-qa-who { font-weight: 600; color: var(--ink); }
.dt-qa-when { font-family: var(--font-mono); color: var(--ink-50); font-size: 11px; }
.dt-qa-q { font-size: 14px; color: var(--ink); font-weight: 500; margin-bottom: 6px; line-height: 1.5; }
.dt-qa-a { font-size: 13px; color: var(--ink-70); line-height: 1.55; padding-left: 12px; border-left: 2px solid var(--border-soft); }
.dt-qa-a-who { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-50); margin-bottom: 4px; }
.dt-qa-empty { padding: 24px 0; text-align: center; }
.dt-qa-empty-p { font-size: 13px; color: var(--ink-50); margin-bottom: 12px; }
.dt-qa-ask { background: none; border: 1px solid var(--border); border-radius: 7px; padding: 8px 14px; font-size: 13px; cursor: pointer; color: var(--ink); font-weight: 500; }
.dt-qa-ask:hover { background: var(--ink-04); border-color: var(--ink-50); }

/* ───────── Sidebar ───────── */
.dt-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 78px; }

.dt-card { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 10px; padding: 16px 18px; }
.dt-card-hd { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-50); margin-bottom: 12px; font-weight: 600; }

/* At-a-glance facts list */
.dt-facts { display: flex; flex-direction: column; gap: 0; }
.dt-fact { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); align-items: baseline; }
.dt-fact:last-child { border-bottom: 0; }
.dt-fact-l { font-size: 12px; color: var(--ink-50); }
.dt-fact-v { font-family: var(--font-mono); font-size: 13px; color: var(--ink); font-weight: 500; text-align: right; }
.dt-fact-v.is-big { font-size: 15px; font-weight: 600; }
.dt-fact-v a { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--ink-30); }
.dt-fact-v a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Full sparkline / trend chart */
.dt-trend { padding: 12px 0 0; }
.dt-trend-hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 11px; color: var(--ink-50); }
.dt-trend-curr { font-family: var(--font-mono); font-size: 14px; color: var(--ink); font-weight: 600; }
.dt-trend-curr.is-up   { color: var(--heat-trend); }
.dt-trend-curr.is-down { color: var(--heat-watch); }
.dt-trend-chart { background: var(--bg-tint); border-radius: 6px; padding: 12px 8px 8px; position: relative; }
.dt-trend-axes { font-family: var(--font-mono); font-size: 9px; color: var(--ink-40); display: flex; justify-content: space-between; padding: 4px 4px 0; }

/* Timeline of activity */
.dt-timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.dt-timeline li { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; position: relative; }
.dt-timeline li:not(:last-child)::after { content: ''; position: absolute; left: 4px; top: 14px; bottom: -10px; width: 1px; background: var(--border-soft); }
.dt-tl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-30); margin-top: 4px; flex-shrink: 0; z-index: 1; }
.dt-tl-verified { background: var(--heat-verified); }
.dt-tl-watch    { background: var(--heat-watch); }
.dt-tl-new      { background: var(--heat-new); }
.dt-timeline li b { font-weight: 600; color: var(--ink); display: block; line-height: 1.3; }
.dt-timeline li span { color: var(--ink-50); font-family: var(--font-mono); font-size: 11px; display: block; margin-top: 1px; }

/* Add-to-compare button */
.dt-add-compare { display: inline-flex; gap: 6px; align-items: center; padding: 8px 12px; background: transparent; border: 1px solid var(--border); border-radius: 7px; color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 500; }
.dt-add-compare:hover { background: var(--ink-04); border-color: var(--ink-50); }
.dt-add-compare.is-active { background: var(--ink); color: var(--bg-elev); border-color: var(--ink); }

/* Compare tray fixed below — reuses .cmp from directory.css */
/* (no extra styling needed) */

/* ───────── Responsive ───────── */
@media (max-width: 1080px) {
  .dt-grid { grid-template-columns: 1fr; }
  .dt-side { position: static; flex-direction: row; flex-wrap: wrap; }
  .dt-card { flex: 1 1 280px; }
  .dt-related { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .dt-wrap { padding: 16px 14px 96px; }
  .dt-hero { flex-direction: column; gap: 16px; }
  .dt-hero-r { width: 100%; flex-wrap: wrap; justify-content: stretch; }
  .dt-hero-r .dt-apply { flex: 1; justify-content: center; }
  .dt-hero-l { gap: 14px; align-items: center; }
  .dt-favi { width: 44px; height: 44px; border-radius: 10px; }
  .dt-favi > span { font-size: 20px; }
  .dt-title { font-size: 24px; }
  .dt-title-row { gap: 12px; }
  .dt-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dt-stat { padding: 12px 14px; }
  .dt-stat-big { font-size: 24px; }
  .dt-proofs { grid-template-columns: 1fr; }
  .dt-rules-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
  .dt-side { flex-direction: column; }
}

/* ───────── Ratings: stars + chip + summary ───────── */
.rt-stars { display: inline-flex; gap: 2px; vertical-align: middle; color: var(--accent-warm, #FFB400); --rt-star-empty: rgba(0,0,0,0.10); }
.rt-stars svg { display: block; }

.rt-chip {
    display: inline-flex; align-items: center; gap: 6px;
    text-decoration: none; color: var(--ink); padding: 2px 4px;
    border-radius: 6px; transition: background 80ms;
    font-size: 13px;
}
.rt-chip:hover { background: var(--ink-04); }
.rt-chip-num { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.rt-chip-num b { font-weight: 600; }
.rt-chip-count { font-family: var(--font-mono); font-size: 12px; color: var(--ink-50); }
.rt-chip-empty { color: var(--ink-50); }
.rt-chip-empty:hover { color: var(--ink); }
.rt-chip-empty-l { font-size: 12px; }

.dt-sub-sep { color: var(--ink-30); margin: 0 4px; }

/* ───────── Reviews section ───────── */
.rt-summary {
    display: grid; grid-template-columns: 220px 1fr; gap: 28px;
    align-items: center;
    padding: 18px 20px; margin: 4px 0 18px;
    background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 10px;
}
.rt-summary-l { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; border-right: 1px solid var(--border-soft); padding-right: 24px; }
.rt-summary-avg { font-size: 44px; line-height: 1; font-weight: 600; color: var(--ink); }
.rt-summary-count { font-size: 12px; color: var(--ink-50); font-family: var(--font-mono); }
.rt-summary-r { display: flex; flex-direction: column; gap: 4px; }
.rt-bar-row { display: grid; grid-template-columns: 36px 1fr 32px; gap: 10px; align-items: center; font-size: 12px; color: var(--ink-70); }
.rt-bar-l { display: inline-flex; align-items: center; gap: 3px; color: var(--accent-warm, #FFB400); font-family: var(--font-mono); }
.rt-bar { display: block; background: var(--ink-04); height: 8px; border-radius: 4px; overflow: hidden; }
.rt-bar-fill { display: block; height: 100%; background: var(--accent-warm, #FFB400); border-radius: 4px; transition: width 200ms; }
.rt-bar-n { color: var(--ink-50); text-align: right; font-size: 11px; }

.rt-list { display: flex; flex-direction: column; gap: 4px; }
.rt-item { padding: 16px 0; border-bottom: 1px solid var(--border-soft); }
.rt-item:last-child { border-bottom: 0; }
.rt-item-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.rt-item-who { display: flex; align-items: center; gap: 10px; }
.rt-avatar {
    width: 32px; height: 32px; border-radius: 16px;
    background: var(--accent-soft); color: var(--accent-ink);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
    flex-shrink: 0;
}
.rt-item-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.rt-item-when { font-size: 11px; color: var(--ink-50); font-family: var(--font-mono); }
.rt-item-ttl { font-size: 15px; font-weight: 600; color: var(--ink); margin: 6px 0 4px; }
.rt-item-body { font-size: 14px; line-height: 1.55; color: var(--ink-70); margin: 0; }
.rt-pending { background: rgba(124,58,237,0.04); margin: 0 -12px; padding: 16px 12px; border-radius: 8px; border-bottom-color: var(--accent-soft); }
.rt-empty { padding: 28px 16px; text-align: center; color: var(--ink-50); font-size: 14px; }

/* "Write a review" button + form */
.rt-form-wrap { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.rt-write {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 8px;
    background: var(--accent); color: white; border: 0;
    font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background 80ms;
}
.rt-write:hover { background: var(--accent-ink); }
.rt-form { display: flex; flex-direction: column; gap: 10px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 10px; padding: 16px; }

/* The "Rate or review" button leads with a star icon (rating-first framing,
   review is now optional within the same form). */
.rt-write svg:first-child { color: var(--accent-warm, #FFB400); }

/* ───────── Mobile sticky CTA bar ─────────
   Fixed at the bottom of the viewport on small screens so Visit + Apply stay
   accessible while scrolling through reviews / Q&A / proofs. Hidden on
   desktop (≥721px). Respects iPhone home-indicator safe-area. */
.dt-sticky-cta {
    display: none; /* desktop default */
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) 14px;
    background: var(--bg);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(10, 23, 48, 0.06);
    gap: 8px;
}
.dt-sticky-cta-btn {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 12px 14px; border-radius: 10px;
    font-family: inherit; font-size: 14px; font-weight: 600;
    text-decoration: none; white-space: nowrap; min-width: 0;
    transition: filter 80ms, background 80ms;
}
.dt-sticky-cta-visit {
    background: var(--bg-elev); color: var(--ink); border: 1px solid var(--border);
    overflow: hidden; text-overflow: ellipsis;
}
.dt-sticky-cta-visit:hover { background: var(--ink-04); }
.dt-sticky-cta-apply {
    background: var(--accent); color: white; border: 0;
}
.dt-sticky-cta-apply:hover { filter: brightness(0.95); }
@media (max-width: 720px) {
    .dt-sticky-cta { display: flex; }
    /* Add bottom padding to the main wrap so the sticky bar doesn't cover
       the last bit of content (footer, Q&A form, etc.). 68px = bar height +
       padding; safe-area-inset-bottom is already applied in the bar itself. */
    .dt-wrap { padding-bottom: 84px; }
    /* Lift the compare tray above the sticky CTA bar. The tray defaults to
       bottom: 8px on mobile, but the CTA bar occupies the lower ~68px +
       safe-area, so it'd be hidden underneath. Use the same safe-area calc
       the CTA bar uses to stay consistent on iPhone home-indicator devices. */
    .cmp { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
.rt-form-lbl { font-size: 12px; font-weight: 500; color: var(--ink-70); text-transform: uppercase; letter-spacing: 0.04em; }
.rt-form-opt { color: var(--ink-50); text-transform: none; font-weight: 400; }
.rt-form-stars { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.rt-picker { display: flex; gap: 4px; color: var(--ink-15); }
.rt-picker-lbl { cursor: pointer; padding: 4px; border-radius: 4px; transition: color 80ms, transform 80ms; }
.rt-picker-lbl:hover, .rt-picker-lbl:has(input:checked), .rt-picker-lbl:has(input:checked) ~ .rt-picker-lbl { color: inherit; }
.rt-picker-lbl input { position: absolute; opacity: 0; pointer-events: none; }
/* Hover/checked cascade: the FIRST star to the LAST hovered/checked star fills.
   Stars come in 1→5 order, so we color [1..hovered] gold using :has() lookups
   that walk LEFT (general sibling reversed via flex). With flex row, default
   star color is muted; we re-color by adding .is-on via JS, OR we use this
   pure-CSS trick: */
.rt-picker { color: var(--ink-15); }
.rt-picker:hover .rt-picker-lbl { color: var(--accent-warm, #FFB400); }
.rt-picker .rt-picker-lbl:hover ~ .rt-picker-lbl { color: var(--ink-15); }
.rt-picker .rt-picker-lbl:has(input:checked),
.rt-picker .rt-picker-lbl:has(input:checked) ~ .rt-picker-lbl { color: var(--ink-15); }
.rt-picker:not(:hover) .rt-picker-lbl:has(input:checked),
.rt-picker:not(:hover) .rt-picker-lbl:has(input:checked) ~ .rt-picker-lbl { color: var(--accent-warm, #FFB400); }

.rt-form-input, .rt-form-ta {
    width: 100%; padding: 8px 10px; font-family: inherit; font-size: 14px;
    color: var(--ink); background: var(--bg); border: 1px solid var(--border);
    border-radius: 6px; box-sizing: border-box;
}
.rt-form-input:focus, .rt-form-ta:focus { outline: 0; border-color: var(--accent); }
.rt-form-ta { resize: vertical; min-height: 96px; }
.rt-form-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.rt-form-hint { font-size: 11.5px; color: var(--ink-50); max-width: 380px; line-height: 1.4; }
.rt-form-btns { display: flex; gap: 8px; }
.rt-form-cancel, .dt-qa-form-cancel { background: transparent; border: 1px solid var(--border); color: var(--ink-70); padding: 7px 14px; border-radius: 7px; font-family: inherit; font-size: 13px; cursor: pointer; }
.rt-form-cancel:hover, .dt-qa-form-cancel:hover { color: var(--ink); border-color: var(--ink-15); }
.rt-form-submit, .dt-qa-form-submit { background: var(--accent); color: white; border: 0; padding: 8px 16px; border-radius: 7px; font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.rt-form-submit:hover, .dt-qa-form-submit:hover { background: var(--accent-ink); }

/* ───────── Q&A submission form ───────── */
.dt-qa-form-wrap { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.dt-qa-ask {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 8px;
    background: var(--accent); color: white; text-decoration: none; border: 0;
    font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background 80ms;
}
.dt-qa-ask:hover { background: var(--accent-ink); }
.dt-qa-form { display: flex; flex-direction: column; gap: 10px; background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: 10px; padding: 16px; }
.dt-qa-form-lbl { font-size: 12px; font-weight: 500; color: var(--ink-70); text-transform: uppercase; letter-spacing: 0.04em; }
.dt-qa-form-ta {
    width: 100%; padding: 8px 10px; font-family: inherit; font-size: 14px;
    color: var(--ink); background: var(--bg); border: 1px solid var(--border);
    border-radius: 6px; box-sizing: border-box; resize: vertical; min-height: 72px;
}
.dt-qa-form-ta:focus { outline: 0; border-color: var(--accent); }
.dt-qa-form-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.dt-qa-form-hint { font-size: 11.5px; color: var(--ink-50); max-width: 380px; line-height: 1.4; }
.dt-qa-form-btns { display: flex; gap: 8px; }

.dt-qa-pending { background: rgba(124,58,237,0.04); margin: 0 -12px; padding: 14px 12px; border-radius: 8px; }
.dt-qa-pending-tag { font-size: 10.5px; color: var(--accent-ink); background: var(--accent-soft); padding: 1px 6px; border-radius: 4px; margin-left: 6px; }
.dt-qa-a-empty { font-size: 13px; color: var(--ink-50); font-style: italic; margin-top: 6px; }

/* Mobile tightening for review summary + form */
@media (max-width: 720px) {
    .rt-summary { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
    .rt-summary-l { border-right: 0; border-bottom: 1px solid var(--border-soft); padding: 0 0 12px; padding-right: 0; }
    .rt-summary-avg { font-size: 38px; }
    .rt-form-foot, .dt-qa-form-foot { flex-direction: column; }
    .rt-form-btns, .dt-qa-form-btns { width: 100%; justify-content: flex-end; }
    .rt-pending, .dt-qa-pending { margin: 0 -6px; padding: 12px 8px; }
}