/* 2026-09-19 · Daniel's rulings (docs/integration/2026-09-19-hero-nav-texture/rulings.md, then the r2 round in
   docs/integration/2026-09-19-homepage-r2/rulings.md): the desktop hero scale and rhythm, the header Download link (green,
   hidden on phones), the pixel field behind the headline and the Plans block width. Loaded last by the two homepages only. */

/* 1 · Hero scale from 960px (ruled 2026-09-19 r2, then «20 %» rhythm 13:1x): the headline returns to the Afterglow display step,
   60 px at 1440, with every heading in proportion. The extra air over the «30 %» rhythm sits mostly between the header and the
   headline (hero top 96 px, the original value) and a little under the headline (intro 32 px), so that a 1440×900 laptop shows
   the headline, the intro, the actions, «Keep track…», the three step titles and a slice of the scenes. Below 960px the phone
   and tablet values of page-refinements.css and beginner-story.css stay in force. */
@media (min-width:960px) {
  .landing #hero-heading { font-size:clamp(36px,4.2vw,60px); }
  .landing #hero-heading .hero-closing { --hero-entry-x:-48px; }
  .landing .landing-hero { padding-top:var(--space-24); }
  .landing .hero-intro { margin-top:var(--space-8); }
  .landing .hero-ctas { margin-top:var(--space-8); }
  .landing .beginner-story { padding-top:var(--space-12); }
  .landing .beginner-story .bs-introduction { padding:var(--space-12) 0 var(--space-8); }
  .landing .beginner-story .bs-introduction > h2 { font-size:clamp(30px,2.9vw,42px); margin-bottom:var(--space-4); }
  .landing h2 { font-size:clamp(30px,2.7vw,38px); }
  .landing .beginner-story .bs-story-steps > li > h3 { font-size:23px; margin-bottom:20px; }
  /* section titles that carry their own size rules follow the same proportion (44→42, 40→38) */
  .landing #in-action .scene-explanation h2 { font-size:clamp(30px,2.9vw,42px); }
  .landing .mt-copy h2 { font-size:clamp(30px,2.7vw,38px); }
  .landing .ci-comparison .ci-heading h2 { font-size:clamp(30px,2.7vw,38px); }
}

/* 2 · Header Download link: fourth header column from 768px. The phone header keeps its two columns and hides the
   link (a handheld never receives the DMG). Before launch it points at the download section; the launch pack's
   download-buttons step turns it into /download?src=nav. Same green surface and dark label as the CTAs, quieter
   (no sheen, no press flecks): the header is not the place for ceremony. */
.landing .nav-download { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); min-height:40px; padding:var(--space-2) var(--space-4); border:1px solid #A1E567; border-radius:var(--radius-control,5px); background:var(--color-accent); color:#1D2A15; font:600 14px/1.5 var(--font-body); text-decoration:none; white-space:nowrap; justify-self:end; cursor:pointer; transition:background-color 160ms ease-out; }
.landing .nav-download .download-apple { display:block; flex:none; width:16px; height:19px; fill:currentColor; stroke:none; }
.landing .nav-download:hover { background:var(--color-action-hover); color:#1D2A15; text-decoration:none; }
.landing .nav-download:active { background:var(--color-action-pressed); }
.landing .nav-download:focus-visible { outline:2px solid var(--color-focus); outline-offset:3px; }
@media (min-width:768px) { .landing .page-header:has(.nav-download) { grid-template-columns:1fr auto auto auto; } }
@media (min-width:768px) and (max-width:1199px) { .landing .nav-download { grid-column:4; grid-row:1; align-self:start; } }
@media (max-width:767px) { .landing .nav-download { display:none; } }
@media (prefers-reduced-motion:reduce) { .landing .nav-download { transition:none; } }
@media (forced-colors:active) { .landing .nav-download { border-color:ButtonText; } }

/* 3 · Pixel field behind the headline (assets/hero-field.js): one canvas under the hero copy. No layout box, no
   pointer events, hidden when the visitor asks for more contrast or forced colours. */
.landing .landing-hero { position:relative; }
.landing .landing-hero > .page-width { position:relative; }
.landing .hero-field { position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
@media (prefers-contrast:more), (forced-colors:active) { .landing .hero-field { display:none; } }

/* 4 · Plans block (ruled 2026-09-19 r2): the Pro/Free block narrows to 840px, centred, on desktop; phone and tablet unchanged. */
@media (min-width:960px) { .landing .plans-offer .plan-shell { max-width:840px; margin-inline:auto; } }

/* 5 · Section titles (ruled 2026-09-19 14:4x): the demo chapter title is white like every other title, and each section title
   carries one accent word in the brand green (the benefit word), set in the markup as .title-accent; the FAQ title stays plain. */
.landing #in-action .scene-explanation h2 { color:var(--color-text); }
.landing h2 .title-accent { color:var(--color-accent); }