.beginner-tips-page {
  background: var(--color-paper);
  color: var(--color-asphalt);
}

.beginner-tips-page section { scroll-margin-top: 6rem; }
.beginner-tips-page .container { max-inline-size: 80rem; }
.beginner-tips-page .bt-hero,
.beginner-tips-page .bt-driving-section,
.beginner-tips-page .bt-loop-section,
.beginner-tips-page .bt-related-section,
.beginner-tips-page .bt-cta-section { color: var(--color-mist); }

.bt-hero { padding-block: var(--space-9) var(--space-10); }
.bt-hero__grid,
.bt-city-grid,
.bt-driving-grid,
.bt-missions-grid,
.bt-loop-grid,
.bt-habits-grid,
.bt-cta-grid,
.bt-scope-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.bt-hero__copy,
.bt-hero__visual,
.bt-city-copy,
.bt-city-followup,
.bt-driving-copy,
.bt-driving-followup,
.bt-missions-copy,
.bt-loop-copy,
.bt-guide-index,
.bt-habits-intro,
.bt-cta-copy,
.bt-scope-note { min-inline-size: 0; inline-size: 100%; }
.bt-hero__copy { max-inline-size: 44rem; }
.bt-hero__section-label { margin-block: 0 var(--space-4); color: var(--color-slate); font-family: var(--font-heading); font-size: var(--text-caption); font-weight: 500; }
.bt-hero h1 { max-inline-size: 14ch; margin-block-end: var(--space-5); font-size: clamp(2.625rem, 1.9rem + 4vw, 4rem); line-height: 1; }
.bt-hero__dek { max-inline-size: 40rem; margin-block-end: var(--space-5); font-size: var(--text-lead); font-weight: 500; line-height: var(--leading-lead); }
.bt-hero__visual { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin-block-start: var(--space-6); }
.bt-figure { min-inline-size: 0; margin: 0; }
.bt-figure img { inline-size: 100%; max-inline-size: 100%; object-fit: cover; border-radius: 0; }
.bt-figure figcaption { margin-block-start: var(--space-2); color: var(--color-slate); font-family: var(--font-heading); font-size: var(--text-caption); line-height: var(--leading-caption); }
.bt-figure--hero img { aspect-ratio: 16 / 10; object-position: center 52%; }
.bt-orientation { display: grid; grid-template-columns: minmax(0, 1fr); border-block: 1px solid var(--color-border-dark); }
.bt-orientation a { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-2); min-block-size: 3rem; align-items: center; padding-block: var(--space-2); border-block-end: 1px solid var(--color-border-dark); color: var(--color-mist); font-family: var(--font-heading); font-size: var(--text-caption); font-weight: 500; text-decoration: none; }
.bt-orientation a span { color: var(--color-amber); font-variant-numeric: tabular-nums; }
.bt-orientation a.is-active { border-inline-start: var(--rule-accent); padding-inline-start: var(--space-3); }
.bt-orientation p { margin: var(--space-4) 0 0; color: var(--color-slate); font-size: var(--text-caption); line-height: var(--leading-caption); }

.bt-reading-grid { padding-block: var(--space-9); }
.bt-reading-lane { max-inline-size: 47rem; }
.bt-reading-lane h2,
.bt-city-copy h2,
.bt-driving-copy h2,
.bt-missions-copy h2,
.bt-loop-copy h2,
.bt-habits-intro h2,
.bt-related-heading h2,
.bt-cta-copy h2 { max-inline-size: 17ch; }
.bt-reading-lane .lead { max-inline-size: 46rem; }
.bt-city-list { padding: 0; list-style: none; }
.bt-city-list li { padding-block: var(--space-3); border-block-start: 1px solid var(--color-city-blue); }
.bt-city-list li:last-child { border-block-end: 1px solid var(--color-city-blue); }
.bt-orientation-callout { max-inline-size: 38rem; }

.bt-city-section { padding-block: var(--space-8); }
.bt-city-copy { max-inline-size: 45rem; }
.bt-city-copy h3 { max-inline-size: 22rem; }
.bt-path-link { color: inherit; font-family: var(--font-heading); font-size: var(--text-caption); font-weight: 600; }
.bt-path-link span { color: var(--color-amber); }
.bt-figure--city { margin-block: var(--space-6); }
.bt-figure--city img { aspect-ratio: 3 / 2; object-position: 48% center; }
.bt-city-followup { max-inline-size: 45rem; }
.bt-try-list { margin-block: var(--space-5); border-block: 1px solid var(--color-border-light); }
.bt-try-list p { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); gap: var(--space-3); margin: 0; padding-block: var(--space-3); border-block-end: 1px solid var(--color-border-light); }
.bt-try-list p:last-child { border-block-end: 0; }
.bt-try-list strong { color: var(--color-city-blue); font-family: var(--font-heading); font-size: var(--text-caption); }
.bt-city-caution { max-inline-size: 40rem; }
.bt-city-caution .callout__title { color: var(--color-signal-red); }

.bt-driving-section { padding-block: var(--space-9); }
.bt-driving-copy { max-inline-size: 46rem; }
.bt-figure--road { margin-block: var(--space-6); }
.bt-figure--road img { aspect-ratio: 16 / 10; object-position: left center; }
.bt-driving-quote { max-inline-size: 24rem; margin-block: var(--space-6); background: var(--color-amber-soft); color: var(--color-asphalt); }
.bt-driving-quote p { margin: 0; }
.bt-driving-followup { max-inline-size: 46rem; }

.bt-missions-section { padding-block: var(--space-9); }
.bt-chapter-number { display: none; }
.bt-missions-copy { max-inline-size: 48rem; }
.bt-diagnostic-list { padding: 0; list-style: none; counter-reset: diagnostics; border-block-start: 1px solid var(--color-border-light); }
.bt-diagnostic-list li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-3); border-block-end: 1px solid var(--color-border-light); }
.bt-diagnostic-list li::before { content: counter(diagnostics, decimal-leading-zero); counter-increment: diagnostics; color: var(--color-city-blue); font-family: var(--font-heading); font-size: var(--text-caption); font-weight: 600; }
.bt-route-strip { display: grid; grid-template-columns: minmax(0, 1fr); margin-block-start: var(--space-6); border-block: 1px solid var(--color-border-light); }
.bt-route-strip a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); padding-block: var(--space-3); border-block-end: 1px solid var(--color-border-light); color: var(--color-asphalt); font-family: var(--font-heading); font-size: var(--text-caption); font-weight: 600; text-decoration: none; }
.bt-route-strip a:last-child { border-block-end: 0; }
.bt-route-strip span { color: var(--color-city-blue); font-weight: 500; text-align: end; }

.bt-loop-section { padding-block: var(--space-9); }
.bt-loop-copy { max-inline-size: 46rem; }
.bt-steps { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin-block-start: var(--space-6); }
.bt-steps::before { position: absolute; inset-block: 0; inset-inline-start: 1rem; inline-size: 1px; background: var(--color-border-dark); content: ""; }
.bt-step { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-3); min-inline-size: 0; }
.bt-step__number { position: relative; z-index: 1; display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; margin: 0; border: 1px solid var(--color-border-dark); background: var(--color-ink-raised); color: var(--color-amber); font-family: var(--font-heading); font-size: var(--text-caption); font-weight: 600; font-variant-numeric: tabular-nums; }
.bt-step.is-active .bt-step__number { border-color: var(--color-amber); background: var(--color-amber); color: var(--color-ink); }
.bt-step h3 { margin-block: 0 var(--space-2); }
.bt-step p { margin-block-end: 0; max-inline-size: 40rem; }
.bt-guide-index { display: grid; grid-template-columns: minmax(0, 1fr); margin-block-start: var(--space-7); border-block: 1px solid var(--color-border-dark); }
.bt-guide-index a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); min-block-size: 4.25rem; align-content: center; padding-block: var(--space-3); border-block-end: 1px solid var(--color-border-dark); color: var(--color-mist); text-decoration: none; }
.bt-guide-index a:last-child { border-block-end: 0; }
.bt-guide-index strong { font-family: var(--font-heading); font-size: var(--text-caption); }
.bt-guide-index span { color: var(--color-slate); font-size: var(--text-caption); line-height: var(--leading-caption); }
.bt-guide-index b { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--color-amber); }

.bt-habits-section { padding-block: var(--space-8); }
.bt-habits-intro { max-inline-size: 36rem; }
.bt-habit-items { display: grid; grid-template-columns: minmax(0, 1fr); margin-block-start: var(--space-6); border-block-start: 1px solid var(--color-border-light); }
.bt-habit { min-inline-size: 0; padding-block: var(--space-5); border-block-end: 1px solid var(--color-border-light); }
.bt-habit__label { margin-block: 0 var(--space-2); color: var(--color-amber); font-family: var(--font-heading); font-size: var(--text-utility); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.bt-habit h3 { max-inline-size: 25rem; margin-block-start: 0; }
.bt-habit p:last-child { max-inline-size: 34rem; margin-block-end: 0; }

.bt-related-section { padding-block: var(--space-9); }
.bt-related-heading { max-inline-size: 42rem; }
.bt-related-heading .lead { max-inline-size: 40rem; }
.bt-related-list { display: grid; grid-template-columns: minmax(0, 1fr); margin-block-start: var(--space-7); border-block-start: 1px solid var(--color-border-dark); }
.bt-related-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 1.75rem; gap: var(--space-3); align-items: center; min-inline-size: 0; padding-block: var(--space-5); border-block-end: 1px solid var(--color-border-dark); color: var(--color-mist); text-decoration: none; }
.bt-related-row img { grid-column: 1 / -1; inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.bt-related-category { color: var(--color-city-blue); font-family: var(--font-heading); font-size: var(--text-utility); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.bt-related-category--tasks { color: var(--color-signal-red); }
.bt-related-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); min-inline-size: 0; }
.bt-related-copy strong { font-family: var(--font-heading); font-size: var(--text-h4); line-height: var(--leading-heading); }
.bt-related-copy span { color: var(--color-mist); font-size: var(--text-body); line-height: var(--leading-body); }
.bt-related-row > b { color: var(--color-amber); font-family: var(--font-heading); font-size: 1.25rem; }

.bt-cta-section { padding-block: var(--space-10); border-block-start: 1px solid var(--color-border-dark); }
.bt-cta-copy { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--space-4); max-inline-size: 38rem; }
.bt-cta-copy .eyebrow,
.bt-cta-copy h2,
.bt-cta-copy p { margin: 0; }
.bt-cta-copy p { max-inline-size: 38rem; }
.bt-play-button { min-block-size: 3rem; margin-block-start: var(--space-2); }
.bt-external-note { color: var(--color-slate); font-family: var(--font-heading); font-size: var(--text-caption); line-height: var(--leading-caption); }

.bt-scope-section { padding-block: var(--space-9); }
.bt-scope-note { max-inline-size: 40rem; padding-block-start: var(--space-5); border-block-start: 1px solid var(--color-border-light); }
.bt-scope-label { margin-block: 0 var(--space-2); color: var(--color-city-blue); font-family: var(--font-heading); font-size: var(--text-utility); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.bt-scope-note h2 { max-inline-size: 20rem; margin-block-start: 0; font-size: var(--text-h3); }
.bt-scope-note p:last-child { margin-block-end: 0; font-size: var(--text-caption); line-height: 1.57; }

@media (min-width: 48rem) {
  .bt-hero { padding-block: var(--space-10); }
  .bt-hero__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-6); }
  .bt-hero__copy { grid-column: 1 / span 4; }
  .bt-hero__visual { grid-column: 1 / -1; }
  .bt-reading-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bt-reading-lane { grid-column: 1 / span 5; }
  .bt-city-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-6); }
  .bt-city-copy,.bt-city-followup { grid-column: 1 / -1; }
  .bt-figure--city { grid-column: 1 / -1; margin-block: 0; }
  .bt-driving-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-6); }
  .bt-driving-copy,.bt-driving-followup,.bt-figure--road,.bt-driving-quote { grid-column: 1 / -1; }
  .bt-driving-quote { max-inline-size: 26rem; }
  .bt-missions-grid,.bt-loop-grid,.bt-habits-grid,.bt-cta-grid,.bt-scope-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bt-missions-copy,.bt-loop-copy,.bt-habits-intro,.bt-cta-copy,.bt-scope-note { grid-column: 1 / span 5; }
  .bt-guide-index { grid-column: 1 / -1; }
  .bt-habit-items { grid-column: 1 / -1; }
  .bt-related-row { grid-template-columns: 6rem 5.5rem minmax(0, 1fr) 1.75rem; }
  .bt-related-row img { grid-column: 1; grid-row: 1; inline-size: 6rem; block-size: 6rem; aspect-ratio: 1; }
  .bt-related-row--text { grid-template-columns: 6rem minmax(0, 1fr) 1.75rem; }
}

@media (min-width: 64rem) {
  .bt-hero__grid,.bt-city-grid,.bt-driving-grid,.bt-missions-grid,.bt-loop-grid,.bt-habits-grid,.bt-cta-grid,.bt-scope-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.25rem; }
  .bt-hero__copy { grid-column: 1 / span 7; }
  .bt-hero__visual { grid-column: 8 / span 5; grid-row: 1; margin-block-start: var(--space-7); }
  .bt-reading-lane { grid-column: 2 / span 7; }
  .bt-city-copy { grid-column: 1 / span 7; }
  .bt-figure--city { grid-column: 8 / span 5; grid-row: 1; }
  .bt-city-followup { grid-column: 1 / span 7; }
  .bt-driving-copy { grid-column: 2 / span 7; }
  .bt-figure--road { grid-column: 1 / -1; }
  .bt-driving-quote { grid-column: 9 / span 3; grid-row: 3; align-self: start; margin-block: 0; }
  .bt-driving-followup { grid-column: 2 / span 7; }
  .bt-chapter-number { display: block; grid-column: 1; margin: 0; color: var(--color-city-blue); font-family: var(--font-heading); font-size: 4rem; font-weight: 600; line-height: .9; }
  .bt-missions-copy { grid-column: 2 / span 7; }
  .bt-loop-copy { grid-column: 2 / span 7; }
  .bt-guide-index { grid-column: 2 / span 7; }
  .bt-habits-intro { grid-column: 1 / span 7; }
  .bt-habit-items { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8.333%; }
  .bt-habit { min-inline-size: 0; }
  .bt-cta-copy,.bt-scope-note { grid-column: 2 / span 6; }
  .bt-related-list { max-inline-size: 66rem; }
}

@media (min-width: 80rem) {
  .bt-hero__grid,.bt-city-grid,.bt-driving-grid,.bt-missions-grid,.bt-loop-grid,.bt-habits-grid,.bt-cta-grid,.bt-scope-grid { column-gap: 1.5rem; }
  .bt-guide-index { grid-column: 9 / span 4; grid-row: 1; margin-block-start: var(--space-9); }
}

@media (max-width: 47.99rem) {
  .bt-hero h1 { font-size: 2.625rem; line-height: 1.02; }
  .bt-hero__dek { font-size: 1.125rem; }
  .bt-related-row { padding-block: var(--space-5); }
  .bt-play-button { inline-size: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bt-step.is-active .bt-step__number { transition: none; }
}