/* Layout of the four black-section animations on the Websites page, after Amy's review (09/11/2026). New CSS.
   The canvas of each animation belongs to its whole black section (see wide-stage.js); the holders below are plain,
   empty elements in the page flow that only reserve the space of the main picture. No box, frame, border or panel. */
.black-section>canvas.wide-canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.tpl-black>.grid{position:relative;z-index:1}
.tpl-anim__stage{position:relative;width:100%;pointer-events:none}
/* Block 2: opening animation. The height is set by chain script from the width (the device is drawn 1.5 times its old size); this is the fallback */
.tpl-anim--open{width:100%}
@media(max-width:900px){.tpl-anim--open{padding-top:28px}.tpl-anim--how{padding-top:44px}}   /* the device keeps clear air above it on narrow screens, as on wide ones */
.tpl-anim--open>.tpl-anim__stage{aspect-ratio:13 / 8}
.tpl-black--above .tpl-anim--open{margin-bottom:var(--sp-8)}
/* Block 4: how it works. */
.tpl-anim--how{width:min(100%,calc(72vh * 16 / 9))}
.tpl-anim--how>.tpl-anim__stage{aspect-ratio:16 / 9}
/* Block 6: price. */
.tpl-anim--price{width:min(100%,calc(72vh * 16 / 9))}
.tpl-anim--price>.tpl-anim__stage{aspect-ratio:16 / 9}
/* Block 8: sphere. */
.tpl-anim--who{width:min(100%,440px)}
.tpl-anim--who>.tpl-anim__stage{aspect-ratio:1 / 1}
@media (max-width:600px){
  .tpl-anim--how>.tpl-anim__stage{aspect-ratio:1 / 1.12}
  .tpl-anim--price>.tpl-anim__stage{aspect-ratio:1 / 1.05}
}

/* ---------- L19 (11/11/2026, Amy's review): Websites only ----------
   Hero: the sheet's lead and buttons a step smaller, so the sheet reads as a smaller foreground card over the animation. */
.l17-sheet .hero-lead{font-size:var(--type-body-size);line-height:1.5;max-width:30em}
.l17-sheet .button--large{font-size:var(--type-ui-size);padding:var(--sp-3) var(--sp-5)}
.l17-sheet .text-link{font-size:var(--type-ui-size)}
.l17-sheet .actions{margin-top:0}
.l17-sheet .paper-sheet__body{row-gap:var(--sp-5)}
/* the H1 sits over the top of the animation, which reads as background */
.l17-hero__title{position:relative;z-index:3}
/* Section 2: "How it works" on the black, above the follow-along */
.tpl-follow__intro{margin-bottom:var(--sp-8)}
/* Hand over, A as a thin quiet band across the full width, tucked under the top of the next sheet.
   No box or frame (the copied .g-frame look is switched off here), dimmed so it is a subtle accent. */
.black-section.tpl-black--band{padding-block:0;margin-top:-150px;margin-bottom:-44px}
.tpl-black--band+.paper-sheet{position:relative;z-index:2}
.tpl-anim--handover{width:100vw;max-width:none;margin-left:calc(50% - 50vw);opacity:.42}
.tpl-anim--handover .g-frame{border:0;border-radius:0;background:transparent;box-shadow:none;outline:0}
.tpl-anim--handover .g-frame.band{width:100%;height:150px}
@media (max-width:600px){.tpl-anim--handover .g-frame.band{height:110px}.black-section.tpl-black--band{margin-top:-90px;margin-bottom:-30px}}

/* ---------- L19.1 (11/11/2026, Amy's second review) ----------
   The hero has no sheet (hero-sheet: none): the lead and buttons sit centred on the black under the H1, then the animation.
   The button is paper with dark text (paper-components.css already gives .black-section .button that look); the link stays light. */
.l17-hero__intro{display:flex;flex-direction:column;align-items:center;gap:var(--sp-5);margin-top:var(--sp-5);max-width:36em;text-align:center;color:var(--color-on-black)}
.l17-hero__intro>.col,.l17-hero__intro>.text-block{width:100%;margin:0}
.l17-hero__intro .hero-lead{font-size:var(--type-body-size);line-height:1.55;max-width:none;margin-inline:auto;color:var(--color-on-black)}
.l17-hero__intro .actions{justify-content:center;margin-top:0}
.l17-hero__intro .text-link{color:var(--color-on-black)}
/* the price animation's title, centred above it on the black */
.tpl-anim-title{text-align:center}
.tpl-anim-title .section-title{color:var(--color-on-black);margin:0 0 var(--sp-5)}
.l17-hero__intro .button--large{font-size:var(--type-ui-size);padding:var(--sp-3) var(--sp-5)}
/* "How it works" sheet: only a modest gap, clear of its grey layers, before the six steps on black */
.paper-sheet.tpl-join-below{margin-bottom:calc(var(--grey-below) + var(--sp-5))}