/* the hero keeps its two buttons on one line */
.hero-cta { flex-wrap: nowrap; }
@media (max-width: 380px) { .hero-cta { flex-wrap: wrap; } }

/* the Skill section's close: two lines and a link to the kit */
.rt-more { padding: 8px 0 clamp(56px, 6vw, 88px); }
.rt-more .rt-total:first-child { margin-top: 0; }
.rt-total a { color: var(--signal); text-underline-offset: 3px; }

/* the method header sits right above the pinned steps, which already leave their own room */
main > section#method { padding-bottom: 8px; }

/* Before and now: the changing line under the camera roll ends on the headline's last line
   ("Now you tell the AI.") and runs the full width of its column */
@media (min-width: 900px) {
  .bn2.is-live .bn2-say p { align-self: end; max-width: none; text-wrap: pretty; }
}
.bn2-why { text-wrap: pretty; }

/* paragraphs fill their lines to the edge of their box; only headings balance.
   (Balanced or width-capped paragraphs stop short of the column and read as a layout error.) */
main :is(p, li, dd, figcaption, small, .fc-note):not(.eyebrow), .th-story { text-wrap: pretty !important; }
@media (min-width: 900px) and (max-width: 1099px) {
  .bn2.is-live .bn2-head { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
}

/* wide screens: the headline column keeps its own width after the left margin grows
   (it used to be capped at 860px in total, so at 2560px only 180px were left for the words) */
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .hero-top { --hl: max(40px, calc((100vw - 1280px) / 2 + 40px)); width: calc(var(--hl) + min(42vw, 680px)); padding-left: var(--hl); }
}
.hero-cta > * { flex: none; white-space: nowrap; }

/* phones: the hero buttons at a phone's size, not a desktop's */
@media (max-width: 620px) {
  .hero-cta { gap: 10px; }
  .hero-cta > .btn, .hero-cta > .btn-glass { min-height: 44px; padding: 0 18px; font-size: 15px; }
  .hero-cta > .btn-glass svg { width: 11px; height: 11px; }
}
/* phones: the race bars are too thin to carry their icons, so the icon legend has nothing to point at */
@media (max-width: 760px) { .rc-legend { display: none; } }

/* the steps rise under the method header by the room above the film; that strip of the steps is see-through */
#steps.pj-on { margin-top: calc(-1 * var(--pj-lift, 0px)); background: linear-gradient(to bottom, transparent var(--pj-lift, 0px), var(--dark) var(--pj-lift, 0px)); }