/* 1.0.12 · this sheet sits right after the first one, so it applies from the first paint. Until 1.0.11 the 1.0.9 and 1.0.10 rules came last in a
   1 MB page, and a slow connection painted the hero before reaching them (the hero button showed as a black pill for half a second). Every selector
   carries a leading `html` so it still wins over the sheets after it exactly as it did when it came last; the finished page is unchanged. */

/* 1.0.9 · buttons: indigo with 6 px corners at every width (his pick, 26 Oct 2026). The phone already drew its calls to action this way; desktop
   now matches, the header's Contact us included. Outline buttons keep their outline, now squared. */
html .btn { border-radius: 6px; }
html .btn:not(.ghost), html header.nav .btn.sm, html header.nav.m-ondark .btn.sm, html header.nav.d-pin.d-dark .btn.sm { background: #3D3BF3; color: #FAFAFA; box-shadow: none; }
html .btn:not(.ghost):hover, html header.nav .btn.sm:hover, html header.nav.m-ondark .btn.sm:hover, html header.nav.d-pin.d-dark .btn.sm:hover { background: #2F2DD9; }

/* 1.0.10 · the first screen fits where the browser shows less (his pick, 26 Oct 2026). Chrome on an iPhone shows about 668 px of page between its
   two bars, where the hero needs about 718, so the case card's foot sat under Chrome's toolbar. The 1.0.10 script measures what the browser really
   shows and, only when the card would end less than 16 px above the bottom, sets --m-cut to the missing height. The top space and the three gaps give
   it back in proportion (.55 / .10 / .15 / .20); no word, size or picture changes. Where everything fits (Safari, desktop) nothing moves. */
@media (max-width: 700px) {
  html .mf .m-hero { padding-top: max(8px, calc(clamp(28px, 6.5svh, 56px) - var(--m-cut, 0px) * .55)) !important; }
  html .mf .m-hero .m-lede { margin-top: max(10px, calc(clamp(16px, 2.8svh, 24px) - var(--m-cut, 0px) * .10)); }
  html .mf .m-hero .m-acts { margin-top: max(14px, calc(clamp(20px, 3.8svh, 32px) - var(--m-cut, 0px) * .15)); }
  html .mf .m-hero .m-stage { margin-top: max(16px, calc(clamp(24px, 4.7svh, 40px) - var(--m-cut, 0px) * .20)); }
}

/* 1.0.12 · the phone's first screen holds still (layout shift 0.25 → 0). Until the 2.174 script moves the case workspace into the phone hero's stage,
   the stage showed the older phone case card, 108 px taller; the swap moved the whole centred block. Where scripts run, the card stays hidden and the
   stage holds the picture's exact box (full width at 1,240 × 760, the picture's corners and shadow) until the picture arrives; without scripts the card
   shows as before. */
@media (max-width: 700px) and (scripting: enabled) {
  html .mf .m-hero .m-stage > .m-case { display: none; }
  html .mf .m-hero .m-stage:not(:has(> .crop))::before { content: ""; display: block; aspect-ratio: 1240 / 760; border-radius: 6px; background: #FAFAFA; box-shadow: 0 0 0 1px rgba(10,10,10,.1), 0 18px 40px -24px rgba(10,10,10,.28); }
}