/* The footer stays in normal flow, above the held About section. */
@media screen{
  body.figma-v2{background-color:var(--footer-page-background,#fff)}
  .figma-v2 .footer{
    position:relative;z-index:2;background:#181818;
    border:2px solid #e3e2e236;border-radius:32px;
    /* Equal viewport gutters frame the final panel; longer content can grow. */
    --footer-frame-gap:64px;
    --footer-outline-inset:24px;
    min-height:calc(100vh - 2 * var(--footer-frame-gap));
    min-height:calc(var(--visible-viewport-height,100dvh) - 2 * var(--footer-frame-gap));
    margin-bottom:var(--footer-frame-gap);
    display:grid;
    grid-template-rows:repeat(4,auto);
    align-content:center;
    align-items:stretch;
    padding-bottom:32px;
  }
  /* Keep the content together instead of stretching a blank row around the logo. */
  .figma-v2 .footer .footer-top{min-height:0;padding-bottom:32px}
  .figma-v2 .footer .footer-email{min-height:0;padding-block:22px}
  .figma-v2 .footer .footer-brand{align-self:center;line-height:1;padding-block:28px}
  .figma-v2 .footer .footer-bottom{border-top:1px solid #ffffff26;padding-block:20px 0}
  .figma-v2 .footer .footer-email-note{
    background:var(--red);border-color:var(--red);color:#fff;font-weight:600;
    min-height:44px;padding:12px 22px;
  }
  .figma-v2 .footer .footer-email-note:hover{background:#e51f32;border-color:#e51f32}
  .figma-v2 .footer.has-wave-outline{border-color:transparent}
  .footer .footer-outline-frame{
    position:absolute;inset:var(--footer-outline-inset) 0;
    pointer-events:none;z-index:1;
  }
  .footer .footer-outline-frame>.hero-border-outline{
    position:absolute;left:0;right:auto;top:0;bottom:auto;
    width:100%;
    pointer-events:none;overflow:visible;
    opacity:var(--footer-outline-opacity,1);
  }
}
@media screen and (max-width:700px){
  .figma-v2 .footer{--footer-frame-gap:40px;border-radius:var(--surface-radius)}
  .figma-v2 .footer .footer-top{padding-bottom:24px}
  .figma-v2 .footer .footer-email{padding-block:18px}
  .figma-v2 .footer .footer-brand{padding-block:24px}
}
@media screen and (prefers-reduced-motion:no-preference){
  .figma-v2 .about.footer-held{
    position:relative;
    z-index:1;
    translate:0 var(--footer-overlap,0px);
    scale:var(--footer-scale,1);
    transform-origin:50% 100%;
    opacity:var(--footer-opacity,1);
  }
  .figma-v2 .about.footer-covered{visibility:hidden;pointer-events:none}
  .figma-v2 .footer{position:relative;z-index:2}
}

/* Keep the opaque footer on its own layer during native tablet/touch scrolling. */
@media screen and (max-width:1150px){
  .figma-v2 .footer{
    --footer-outline-inset:16px;
    isolation:isolate;
    transform:translateZ(0);
    backface-visibility:hidden;
    background:#181818;
  }
}
@media screen and (max-width:1150px) and (prefers-reduced-motion:no-preference){
  .figma-v2 .footer-reveal-stage{position:relative;display:flow-root;isolation:isolate}
  .figma-v2 .footer-reveal-stage>.about{width:100%;max-width:none;margin-inline:0}
  .figma-v2 .footer-reveal-stage>.footer{width:100%;margin-inline:0}
  .figma-v2 .footer-reveal-stage>.about.footer-native-about{
    position:sticky;
    top:calc(100svh - var(--footer-about-height));
    z-index:1;
    translate:none;
    scale:none;
    transform:scale(var(--footer-scale,1));
    transform-origin:50% 100%;
    opacity:var(--footer-opacity,1);
    backface-visibility:hidden;
  }
}