/* TL;DR: the whole guide in one screen, right under the hero */
.tldr { padding-block: 56px 64px; background: var(--dark); color: var(--on-dark-2); }
.tldr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 18px; margin-bottom: 28px; }
.tldr-head .eyebrow { margin: 0; }
.tldr-head h2 { margin: 0; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.15; color: var(--on-dark); text-wrap: balance; }
.tldr-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.tldr-cta .btn, .tldr-cta .btn-glass { padding: 12px 22px; font-size: 16px; }
.tldr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "what start" "need start"; gap: 16px; }
.tldr-what { grid-area: what; } .tldr-need { grid-area: need; } .tldr-start { grid-area: start; }
.tldr-card { min-width: 0; display: grid; align-content: start; gap: 12px; padding: 26px 28px 28px; border-radius: var(--r-l); background: var(--dark-2); }
.tldr-k { margin: 0; font: 500 var(--t-label)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--signal); }
.tldr-card p { margin: 0; font-size: var(--t-lead); line-height: 1.5; text-wrap: pretty; }
.tldr-card b { color: var(--on-dark); font-weight: 650; }
.tldr .prompt { margin-top: 2px; }
.tldr .prompt-top span { text-transform: none; letter-spacing: .02em; font-size: 14px; color: var(--on-dark-2); }
.tldr .prompt pre { padding: 16px 18px; font-size: 16px; }


/* the five steps as one track: a rail with five stops */
.tldr-method .tldr-k { padding-top: 6px; line-height: 1.4; }
.tldr-method { display: block; margin-top: 16px; padding: 26px 28px 28px; border-radius: var(--r-l); background: var(--dark-2); }
.tldr-steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.tldr-steps::before { content: ""; position: absolute; left: 11px; right: 0; top: 11px; height: 1.5px; background: linear-gradient(90deg, var(--signal), var(--dark-line)); }
.tldr-steps li { min-width: 0; }
.tldr-steps a { position: relative; display: grid; gap: 12px; padding-right: 16px; color: var(--on-dark); text-decoration: none; }
.tl-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--signal); color: var(--ink); font: 600 11px/1 var(--mono); box-shadow: 0 0 0 5px var(--dark-2); transition: scale .2s cubic-bezier(0.2, 0, 0, 1); }
.tl-t { font-size: var(--t-body); font-weight: 600; line-height: 1.35; transition: color .2s; }
.tldr-steps a:hover .tl-t { color: var(--signal); }
.tldr-steps a:hover .tl-n { scale: 1.12; }

@media (max-width: 960px) {
  .tldr-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "what need" "start start"; }
  .tldr-method { grid-template-columns: minmax(0, 1fr); }
  .tldr-cta { margin-left: 0; width: 100%; }
}
@media (max-width: 720px) {
  .tldr-steps { grid-template-columns: 1fr; gap: 14px; }
  .tldr-steps::before { left: 11px; right: auto; top: 12px; bottom: 12px; width: 1.5px; height: auto; background: linear-gradient(180deg, var(--signal), var(--dark-line)); }
  .tldr-steps a { grid-template-columns: 24px 1fr; align-items: center; gap: 14px; padding: 0; }
}
@media (max-width: 600px) {
  .tldr { padding-block: 40px 48px; }
  .tldr-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "what" "need" "start"; }
  .tldr-card p { font-size: var(--t-body); }
  .tldr-card, .tldr-method { padding: 20px 20px 22px; }
}
/* selection stays visible on the yellow surfaces (FAQ answers, notes, buttons) */
:is(.faq-dm dd, .bn2-quote, .hvn-card, .v-prompt span, .btn, .rn-you, .copy.is-copied, .tl-n) ::selection,
:is(.faq-dm dd, .bn2-quote, .hvn-card, .v-prompt span, .btn, .rn-you, .copy.is-copied, .tl-n)::selection { background: var(--ink); color: var(--signal); }
.tldr .nw { white-space: nowrap; }
/* film shelf: how long each film took, as a chip above its title */
.fc-took, .ba-took { display: inline-flex; align-items: center; justify-self: start; width: max-content; padding: 4px 10px; border-radius: var(--r-pill); background: var(--signal); color: var(--ink); font: 600 13px/1.2 var(--sans); letter-spacing: 0; white-space: nowrap; }
.fc-info .fc-took { align-self: flex-start; margin-bottom: 6px; }
.fc-stripe .fc-took { font-size: 15px; padding: 5px 12px; }
.ba-took { position: absolute; z-index: 2; top: 34px; left: 8px; padding: 3px 8px; font-size: 11.5px; }
@media (max-width: 600px) { .ba-took { top: 28px; left: 6px; padding: 2px 6px; font-size: 10px; } }