.login-link{font-size:11px;color:#b6c2d9}.header-actions>.login-link{white-space:nowrap}
/* The original decorative rings exceed narrow viewports; clip only horizontal paint. */
html,body{overflow-x:clip}
@media(max-width:400px){.header-actions{gap:10px}.header-actions .button.sm{padding:9px 10px}.header-inner{gap:8px}.brand{gap:7px}}
@media(max-width:650px){.header-actions>.login-link{display:none}.pricing-option small{white-space:normal;max-width:70px;flex-shrink:0;text-align:right}.pricing-option p{min-width:0}}
/* Mask the image itself, not the letterboxed area of an object-fit container. */
.hero-content{position:static}
.hero-content>:not(.hero-art){position:relative;z-index:3}
.hero-art{
  height:auto;
  top:calc(447.5px - 20.829vw);
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 76%,transparent),linear-gradient(to right,transparent,#000 26%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 76%,transparent),linear-gradient(to right,transparent,#000 26%);
  mask-composite:intersect;
}
/* Keep the logo clear of device cutouts without changing the normal header spacing. */
.site-header{padding-top:env(safe-area-inset-top,0px)}
.brand svg{overflow:visible;flex-shrink:0}
@media(min-width:1550px){.hero-art{top:calc(480px - 20.829vw)}}
@media(min-width:851px) and (max-width:1100px){.hero-art{top:calc(440px - 20.829vw)}}
@media(min-width:601px) and (max-width:850px){.hero-art{top:calc(490px - 20.829vw)}}
@media(max-width:600px){
  /* Let actual text height place the artwork: no overlap with buttons or notes. */
  .hero{min-height:0;padding-top:calc(131px + env(safe-area-inset-top,0px));padding-bottom:24px}
  .hero-art{position:relative;display:block;top:auto;left:auto;width:152vw;max-width:none;height:auto;margin:28px 0 0 calc(-52vw - 23px)}
  .hero-bottom{margin-top:28px}
}

.hero h1{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:500}