/* b-modules.css: B-only fit for the reused and new module stages inside an Apple chapter (see _spec/b2.md).
   Each module was built as its own full-screen hero; here it is demoted to a stage inside .b-stage
   (max-width 1100px, centred, set by css/b.css). Rules: hide each module's own copy column with display:none
   (module JS still queries those elements, so nothing is removed from the DOM), collapse any grid column that
   copy used to occupy so the stage is the only thing left and it runs the full width of the column, and give
   every stage a sensible height instead of the full-viewport height it was built for. Do not edit module files. */

/* ---------- every stage, on phones ---------- */
/* Each module keeps the .container gutter of its full-screen life. Inside a chapter, which has the page gutter
   again (css/b.css, --b-rhythm), that insets every stage twice on a phone (40 px a side at 390 px); measured at
   360 px it squeezed source names into ellipses, ran the hex codes together and pushed the typed message out of
   its field. On phones a stage keeps the chapter's gutter only, the same width it had before. From 761 px up
   .b-stage is narrower than the chapter and the module gutter is its margin again. */
@media (max-width:760px){
  .b-stage .container{padding-inline:0}
  /* wait-or-answer is a full-width band that carries its own inner gutter (--gutter on its scene and its two
     labels), so on a phone it runs to the screen edges, the band it was built as, instead of a square inset */
  .b-stage > .hero-wait-or-answer{margin-inline:calc(-1 * var(--gutter))}
}

/* ---------- 1. difference: wait-or-answer ---------- */
.hero-wait-or-answer .wa-copy{display:none}
.hero-wait-or-answer .wa-stage{grid-template-rows:minmax(0,1fr);min-height:0}
.hero-wait-or-answer .wa-layer{grid-row:1}
.hero-wait-or-answer .wa-div{grid-row:1}
.hero-wait-or-answer .wa-eye{margin-top:16px}

/* b3 #3: sharper contrast between the two sides. Left dims and desaturates but stays readable;
   right stays full colour with a stronger glow; the label dots carry the same read (grey/green);
   the drag handle grows so "drag" reads at a glance. */
.hero-wait-or-answer .wa-wait{filter:grayscale(1);background-color:#ECECEE}
.hero-wait-or-answer .wa-wait .wa-ledger li,
.hero-wait-or-answer .wa-wait .wa-eye-wait{color:var(--text-3)}
.hero-wait-or-answer .wa-eye-wait::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--line-control);margin-right:7px;vertical-align:1px}
.hero-wait-or-answer .wa-eye-ans::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#1DBF73;margin-right:7px;vertical-align:1px}
.hero-wait-or-answer .wa-ans .wa-chat{box-shadow:0 0 0 1px rgba(36,87,255,.10),0 24px 70px -22px rgba(36,87,255,.42),var(--glass-lift-sm)}
.hero-wait-or-answer .wa-knob{width:56px;height:56px;margin:-28px 0 0 -28px;border:2px solid var(--ink);box-shadow:0 14px 34px -12px rgba(10,10,20,.5)}
@media (max-width:820px){
  .hero-wait-or-answer .wa-knob{width:56px;height:56px;margin:-28px 0 0 -28px}
}

/* ---------- 3. brain: founder-brain ---------- */
/* a sensible height, as for every stage here: its full-screen min-height (520 px) and trailing padding sat on top
   of the chapter rhythm as empty space under the columns (their heights never change during the loop), so the
   brain to brand seam measured 184 px on a phone and 352 px at 1440 where every other seam is 144 and 230 */
.hero-founder-brain .fb-in{min-height:0;padding-bottom:0}

/* ---------- 4. brand: brand-read ---------- */
.hero-brand-read .bt{min-height:0;padding-block:0}
.hero-brand-read .bt-copy{display:none}
.hero-brand-read .bt-in{grid-template-columns:minmax(0,1fr)}

/* ---------- 5. convert: design-build (keep .db-points visible, below the stage) ---------- */
.hero-design-build .bt{min-height:0;padding-block:0}
.hero-design-build .bt-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "points"}
.hero-design-build .bt-copy{display:contents}
.hero-design-build .bt-eyebrow,.hero-design-build .bt-h,.hero-design-build .bt-lead{display:none}
.hero-design-build .bt-stage{grid-area:stage}
.hero-design-build .db-points{grid-area:points;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:clamp(28px,3.4vw,44px) 0 0;counter-reset:bt}
.hero-design-build .db-points li{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;border-top:0;padding:16px 10px;border-radius:16px;background:var(--bg-2)}
.hero-design-build .db-points li::before{margin:0 0 8px}
@media (max-width:760px){
  .hero-design-build .db-points{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- 6. team: handoff ---------- */
.hero-handoff .ho{min-height:0;padding-block:0}
.hero-handoff .ho-copy{display:none}
.hero-handoff .ho-grid{grid-template-columns:minmax(0,1fr)}

/* ---------- 7. night: night-shift ---------- */
.hero-night-shift .ns{padding-block:0}
.hero-night-shift .ns-copy{display:none}
.hero-night-shift .ns-in{grid-template-columns:minmax(0,1fr);min-height:0}
.hero-night-shift .ns-tile,.hero-night-shift .ns-slot{grid-column:1;grid-row:auto}
.hero-night-shift .ns-tile{max-width:720px;margin:0 auto}
.hero-night-shift .ns-slot{max-width:720px;margin:0 auto}

/* ---------- 8. control: owner-phone (keep .op-team, the agent roll) ---------- */
.hero-owner-phone .op{min-height:0;padding-block:0}
.hero-owner-phone .op-in{grid-template-columns:minmax(0,1fr);justify-items:center}
.hero-owner-phone .op-copy{display:contents}
.hero-owner-phone .op-eyebrow,.hero-owner-phone .op-h1,.hero-owner-phone .op-lead,.hero-owner-phone .op-ctas{display:none}
.hero-owner-phone .op-stage{order:1;width:100%;min-height:520px}
.hero-owner-phone .op-team{order:2;margin:clamp(24px,3vw,36px) 0 0;padding-top:18px;text-align:center}
.hero-owner-phone .op-roll{justify-content:center}
@media (max-width:820px){
  .hero-owner-phone .op-stage{min-height:0}
}

/* ---------- the-bell: shown whole with its own copy ---------- */
/* the one exception to "shown whole": its own top padding (20 px on a phone) was all that stood between the last
   work card's caption and the bell's eyebrow, because .b-start-wrap takes no padding (the bell's rings fill the
   wrap edge to edge). Its top padding is the page rhythm instead, so this seam matches every other one. */
.b-start-wrap .hero-the-bell .bl{padding-top:var(--b-rhythm)}

/* night, after review: the card rides on the bottom of the tile, as in the original, in one centred column */
@media (min-width:981px){
  .hero-night-shift .ns-tile,.hero-night-shift .ns-slot{grid-column:1;grid-row:1}
  .hero-night-shift .ns-tile{width:100%;max-width:880px;margin:0 auto;min-height:640px}
  .hero-night-shift .ns-slot{justify-self:center;width:min(880px,100%);max-width:880px;margin:0}
}
.hero-night-shift .ns-rows .mono{color:var(--text-2)}

/* ---------- 4b. photos and film: media-reel ---------- */
/* Built for this page only, so its whole stylesheet lives here instead of in a section.css the head would have
   to link. A bento of five tiles: the film large on the left over two rows, two photographs stacked beside it,
   two wide ones under both. Each tile is a clip box its picture fills (object-fit), so the film's 16:9 sets the
   first two rows (the two beside it land within a pixel of 16:9 themselves) and nothing waits on an image to size
   the grid. Captions are white chips inside the tile: ink, or the accent at 5.4:1, on white over any photograph.
   The video sits over the poster at opacity 0 and is shown only once it is really playing. Phones: the film runs
   the full width, the four photographs follow two by two. */
.mr-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.1vw,14px)}
.mr-tile{position:relative;margin:0;overflow:hidden;border-radius:clamp(16px,1.8vw,22px);background:var(--bg-3)}
.mr-tile picture,.mr-tile img,.mr-video{position:absolute;inset:0;width:100%;height:100%}
.mr-tile img,.mr-video{object-fit:cover}
.mr-film{grid-column:1/5;grid-row:1/3;aspect-ratio:16/9}
.mr-a{grid-column:5/7;grid-row:1}
.mr-b{grid-column:5/7;grid-row:2}
.mr-c{grid-column:1/4;grid-row:3;aspect-ratio:2/1}
.mr-d{grid-column:4/7;grid-row:3;aspect-ratio:2/1}
.mr-a img{object-position:70% 50%}
.mr-c img{object-position:40% 40%}
.mr-video{opacity:0;transition:opacity .6s var(--ease)}
.mr-film.is-playing .mr-video{opacity:1}
.mr-cap{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);padding:5px 11px;border-radius:var(--r-pill);background:#fff;color:var(--ink);font-size:13px;line-height:1.3;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mr-kind{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-right:8px}
.mr-toggle{position:absolute;right:12px;bottom:12px;width:36px;height:36px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink);cursor:pointer}
.mr-toggle svg{width:14px;height:14px;fill:currentColor}
.mr-i-play,.mr-toggle[aria-pressed="true"] .mr-i-pause{display:none}
.mr-toggle[aria-pressed="true"] .mr-i-play{display:block}
@media (max-width:760px){
  .mr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .mr-film{grid-column:1/-1;grid-row:auto}
  .mr-a,.mr-b,.mr-c,.mr-d{grid-column:auto;grid-row:auto;aspect-ratio:4/3}
  .mr-tile{border-radius:14px}
  .mr-cap{left:8px;bottom:8px;max-width:calc(100% - 16px);padding:4px 9px;font-size:12px}
  .mr-kind{font-size:10px;margin-right:6px}
  .mr-toggle{right:8px;bottom:8px}
}
@media (prefers-reduced-motion:reduce){.mr-video{transition:none}}