/* HOME-PAGE MOLECULE WITH COMPLLY READY (owner, 17 Oct 2026) — mock-up first, then dev-cc-landing-page.
   Risk on top, Complly Ready beneath it, Construct lower down, FRA bottom-left (Risk's old place),
   Inspection bottom-right. The circle positions here and the strand coordinates in index.html are
   ONE set of numbers (desktop viewBox 1000x660, phone 340x560): change them together. */

.strand--ready { stroke: var(--p-ready); }
.haze--ready { stroke: var(--p-ready); }
.capname--ready { color: var(--p-ready); }
.cnode--ready { --c: var(--p-ready); }

/* Desktop: Construct moves down (centre y 518 of 660) and shrinks a touch to 26cqw (r130). */
.stage--ready .hub { top: 78.5%; width: 26cqw; height: 26cqw; }

/* Ready is the smaller bubble between Risk and Construct: 14cqw (r70). */
.stage--ready .cnode--ready { width: 14cqw; height: 14cqw; padding: 1.6cqw; gap: 0.3cqw; }
.stage--ready .cnode--ready .cnode__ico { width: 2.4cqw; height: 2.4cqw; }
.stage--ready .cnode--ready .cnode__name { font-size: 2.1cqw; }
.stage--ready .cnode--ready .cnode__desc { font-size: 1.25cqw; margin-top: 0.3cqw; }

/* Intro order: Construct lands, then Risk → Ready pop in down the middle, then FRA and Inspection,
   then the streams. Without this Ready has no delay and shows before everything else. */
.intro-stage .stage--ready .cnode--risk { animation-delay: 0.72s; }
.intro-stage .stage--ready .cnode--ready { animation-delay: 0.86s; }
.intro-stage .stage--ready .cnode--fra { animation-delay: 1s; }
.intro-stage .stage--ready .cnode--inspect { animation-delay: 1.14s; }
.intro-stage .stage--ready .stage__svg > g { animation-delay: 1.26s; }

/* Phone: Risk, Ready and Construct stack down the middle; FRA and Inspection share the bottom row. */
@media (max-width: 680px) {
  .stage--ready { aspect-ratio: 340 / 560; margin-top: 12px; }
  .stage--ready .hub { top: 57.86%; width: 56cqw; height: 56cqw; }   /* undo the desktop 26cqw above */
  /* Ready now sits above the hub, so the strapline badge goes back INSIDE the circle. */
  /* 3.1cqw ≈ 10px on a 360px phone (2.4cqw was 7.5px — too small to read). */
  .stage--ready .hub__badge { position: static; transform: none; width: auto; max-width: 46cqw;
                              font-size: 3.1cqw; padding: 1.4cqw 2.2cqw; border-radius: 2.4cqw; margin-bottom: 1cqw; }
  .stage--ready .hub__name { font-size: 6.2cqw; }
  .stage--ready .cnode--risk { top: 9.82%; --mx: 50%; }
  .stage--ready .cnode--ready { top: 29.82%; --mx: 50%; width: 25cqw; height: 25cqw; padding: 2.4cqw; }
  .stage--ready .cnode--ready .cnode__ico { width: 5cqw; height: 5cqw; }
  .stage--ready .cnode--ready .cnode__name { font-size: 3.8cqw; }
  .stage--ready .cnode--fra { top: 87.5%; --mx: 20.59%; }
  .stage--ready .cnode--inspect { top: 87.5%; --mx: 79.41%; }
}

/* FIT ON A LAPTOP SCREEN (owner, 17 Oct: "the 13-inch and the 15-inch … don't fit properly"). The stage is
   aspect-ratio 1000/660, so its width sets its height. Cap the width by the screen HEIGHT so the whole molecule
   and the caption under it sit above the fold: ~420px is the banner, nav, headline, lede and caption.
   1440x900 -> ~788px wide; 1280x800 -> ~636px; a 1920x1080 monitor stays at the 1020px cap. Phones keep
   their own portrait layout (max-width 680px block above). */
@media (min-width: 681px) {
  .stagewrap, .stage { max-width: min(1020px, calc((100vh - 420px) * 1.515)); }
}

/* OUR APPS PAGE fits too (owner, 17 Oct: "this one is cropped at the bottom" on the 13-inch). That page sets its own
   920px cap (.astage), which out-ranks the rule above, so it gets its own: the molecule starts ~250px down there and
   Rodney's box sits below it, so the molecule alone must end above the fold. 1280x800 -> ~790px wide (ends ~770). */
@media (min-width: 681px) {
  .astage .stagewrap, .astage .stage { max-width: min(920px, calc((100vh - 280px) * 1.515)); }
}

/* NO SCROLL BAR IN AN APP CARD ON A LAPTOP (owner, 17 Oct 2026). On a 1280x800 screen the card gets ~644px above
   the fold and four of the five cards measured 663-737px, so they scrolled. Shorter screens get a wider card (set
   in appstage.js) and these tighter rules, so every card's natural height fits. */
@media (min-width: 1001px) and (max-height: 959px) {
  .acard__in { padding: 22px 28px; }
  .acard__head { margin-bottom: 10px; }
  .acard h2 { font-size: 22px; margin-bottom: 8px; }
  .acard__lede { font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
  .acard__caps { gap: 8px; margin-bottom: 12px; }
  .acard__caps li { padding: 9px 12px; font-size: 13px; line-height: 1.4; }
  .acard__feeds { margin-bottom: 8px; padding: 8px 12px; font-size: 12.5px; }
  .acard__feeds + .acard__feeds { margin-top: 0; }
  .acard__act { margin-top: 10px; }
}