/* ============================================================
   Saurus City — one-page site
   Canvas reference: 4500 x 8063 (original layered PSD)
   All hero-stack children are positioned as % of that canvas,
   so the whole composition scales fluidly at every width.
   ============================================================ */

:root{
  --gold: #fdc11e;
  --cream: #f6ead0;
  --white: #ffffff;
  --bg-dark: #19140f;
  --max-w: 1700px;
  --body-font: "gill-sans-nova", "Gill Sans", "Gill Sans MT", Arial, sans-serif;
  --headline-font: "arno-pro-small-text", "Arno Pro", Georgia, serif;
  --display-font: "arno-pro-subhead", "Arno Pro", Georgia, serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg-dark);
  color: var(--white);
  font-family: var(--body-font);
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; }

.skip-link{
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--gold);
  color: #19140f;
  padding: 0.75em 1em;
  z-index: 999;
}
.skip-link:focus{ left: 0; }

.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------- Header ---------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.25rem;
  background: rgba(16, 12, 9, 0.88);
  backdrop-filter: blur(6px);
}
.header-logo{ height: clamp(34px, 5vw, 48px); width: auto; }
.header-logo-link{ display: flex; align-items: center; }

/* Wraps logo + header social icons as one flex item so the header's
   own space-between (logo-side vs. nav/hamburger-side) is unaffected
   by adding the icons. */
.header-start{
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 2.4vw, 1.4rem);
  min-width: 0;
}
.header-social{
  display: flex;
  align-items: center;
  gap: clamp(0.55rem, 2.2vw, 1.1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-social a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(24px, 4.2vw, 40px);
  height: clamp(24px, 4.2vw, 40px);
  border-radius: 50%;
  border: 1px solid rgba(253, 193, 30, 0.55);
  color: var(--gold);
}
.header-social a.social-pending{ opacity: 0.4; pointer-events: none; }
.header-social svg{
  width: 48%;
  height: 48%;
  fill: var(--gold);
}

/* Hamburger: kept in the header at every width now (per Nate — for
   future needs), rather than only appearing below 720px. It no
   longer has a horizontal desktop counterpart (that duplicated the
   in-art/footer nav links), so .site-nav is always the same
   toggle-open dropdown, on both mobile and desktop. */
.nav-toggle{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span{
  display: block;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
}

.site-nav{
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  background: rgba(16, 12, 9, 0.97);
  padding: 1rem 1.5rem 1.5rem;
  gap: 1rem;
  font-size: clamp(0.85rem, 1.3vw, 1rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.site-nav a{ text-decoration: none; white-space: nowrap; }
.site-nav a:hover{ color: var(--gold); }
.site-nav.open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ---------------- Hero composition ---------------- */
.hero{
  max-width: var(--max-w);
  margin: 0 auto;
}
.hero-stack{
  position: relative;
  width: 100%;
  /* Truncated to just the hero + cast region of the original 4500x8063
     canvas (through y=3950, just past the cast-strip). The world/
     handmade-copy/signup regions below that line are their own
     sections further down the page (see .world-wrap / .signup),
     each with their own background art, so nothing is ever a flat
     plain-background block and nothing has to fight for the same
     vertical space. */
  aspect-ratio: 4500 / 4150;
  overflow: hidden;
}

.layer{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.layer-aura{ z-index: 1; }
.layer-characters{
  z-index: 2;
  width: 63.0%;
  height: 73.6%;
  left: 37.71%;
  top: 0;
  object-fit: contain;
  object-position: top right;
}
.layer-bg{ z-index: 3; }
.layer-logo{
  z-index: 5;
  width: 39.1%;
  height: auto;
  left: 4.3%;
  top: 1.98%;
  object-fit: contain;
}

.hero-copy{
  position: absolute;
  z-index: 4;
  left: 4.5%;
  top: 29.95%;
  width: 46%;
}
.eyebrow{
  margin: 0;
  font-family: var(--headline-font);
  font-weight: 700;
  color: var(--gold);
  font-size: clamp(1.05rem, 2.5vw, 2.1rem);
  line-height: 1.18;
}
.gold-rule{
  display: block;
  width: clamp(90px, 20vw, 230px);
  margin: 0.6em 0 0.7em;
}
.gold-rule img{ width: 100%; }
.hero-blurb{
  margin: 0;
  font-size: clamp(0.78rem, 1.55vw, 1.2rem);
  line-height: 1.45;
  max-width: 34em;
}

/* ---------------- Cast strip ---------------- */
.cast-strip{
  position: absolute;
  z-index: 4;
  left: 6.9%;
  top: 79.88%;
  width: 84.3%;
  display: flex;
  justify-content: space-between;
  gap: 1%;
}
.cast-strip figure{
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}
.cast-strip img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
}
.cast-strip figcaption{
  margin-top: 0.35em;
  font-size: clamp(0.56rem, 1vw, 0.85rem);
  letter-spacing: 0.02em;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.15;
}

/* ---------------- World / handmade copy ----------------
   A standalone section, sized by its own text content (never
   fixed-height), with the matching scenery crop from the PSD
   (the "A World Like You've Never Seen Before" art, including
   the dinosaur carrying the village) as a true cover background
   — the background always fills however tall the text makes the
   section, so copy can never overlap its neighbors. */
.world-wrap{
  position: relative;
  overflow: hidden;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4.5rem) 6% clamp(2.5rem, 7vw, 5rem);
}
.world-wrap{ background: #241c13; }
.world-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
  z-index: 1;
}
.world-wrap-copy{
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
}
.world-wrap-copy{ margin-top: 1.4em; }
.world-copy{ margin-bottom: 1.6em; }
.handmade-copy{ margin-left: auto; max-width: 760px; }
.world-copy p, .handmade-copy p{
  margin: 0;
  font-size: clamp(0.92rem, 1.5vw, 1.15rem);
  line-height: 1.6;
  text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}

/* ---------------- Signup / bottom banner ---------------- */
.signup{
  position: relative;
  overflow: hidden;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 3.5rem) 8%;
}
.signup-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.signup-copy{
  position: relative;
  z-index: 2;
  max-width: 640px;
}
.signup-heading{
  font-family: var(--display-font);
  font-weight: 700;
  color: var(--gold);
  font-size: clamp(1.1rem, 3vw, 2.6rem);
  margin: 0 0 0.3em;
}
.signup-blurb{
  margin: 0 0 0.9em;
  font-size: clamp(0.74rem, 1.3vw, 1rem);
  line-height: 1.45;
  max-width: 28em;
}
.signup-form{
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
}
.signup-form input[type="email"]{
  flex: 1 1 220px;
  min-width: 140px;
  padding: 0.7em 1em;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.35);
  color: var(--white);
  font-family: var(--body-font);
  font-size: clamp(0.72rem, 1.2vw, 0.95rem);
}
.signup-form input[type="email"]::placeholder{ color: rgba(255,255,255,0.7); }
.signup-form button{
  padding: 0.7em 1.4em;
  border-radius: 999px;
  border: none;
  background: var(--gold);
  color: #221a0e;
  font-family: var(--body-font);
  font-weight: bold;
  font-size: clamp(0.7rem, 1.1vw, 0.9rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
}
.signup-form button:hover{ background: var(--cream); }
.signup-note{
  margin: 0.6em 0 0;
  font-size: 0.85rem;
  color: var(--gold);
  min-height: 1.2em;
}

/* ---------------- Footer ---------------- */
.site-footer{
  background: var(--bg-dark);
  text-align: center;
  padding: 2.2rem 1.25rem 2.5rem;
}
.social-row{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.9rem, 3vw, 1.4rem);
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
}
.social-row a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(253, 193, 30, 0.35);
  color: var(--gold);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.social-row a:hover{
  background: rgba(253, 193, 30, 0.12);
  border-color: var(--gold);
}
.social-row svg{
  width: 20px;
  height: 20px;
  fill: var(--gold);
}
.social-row a.social-pending{
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.footer-nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem 1.6rem;
  font-size: clamp(0.72rem, 1.3vw, 0.9rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.footer-nav a{ text-decoration: none; }
.footer-nav a:hover{ color: var(--gold); }
.copyright{
  margin: 0;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.65);
}

/* ---------------- Mobile vs desktop composition switch ----------------
   The desktop sections above are the untouched approved master.
   Below 760px they're swapped for .mobile-mega, built directly from
   Nate's approved Saurus_City_MOBILE_Layout.psd (see mobile-mega
   block further down). */
.mobile-only{ display: none; }

@media (max-width: 760px){
  .desktop-only{ display: none; }
  .mobile-only{ display: block; }
}

@media (min-width: 1700px){
  body{ background: var(--bg-dark); }
}

/* ============================================================
   MOBILE MEGA — built from Nate's superseding, condensed PSD
   (Saurus_City_MOBILE_Layout_Condenced.psd).
   Canvas reference: 1875 x 7500. All noninteractive typography and
   artwork (hero, cast, synopsis, world copy, handcrafted section,
   BTS photos, signup banner, Watch Trailer and Sign Up button
   graphics) is flattened into one image — none of it is recreated
   here. The nav/footer-nav/legal/copyright text still exists as
   separate, un-flattened type layers in that PSD, so it's rendered
   below as real HTML text at that PSD's own exact coordinates, font,
   size, color and tracking. Interactive overlays (email input, Sign
   Up button, Watch Trailer button) are positioned at the PSD's exact
   pixel bounds for the graphics already baked into the art. All
   coordinates expressed as % of this block's own box so everything
   scales together at every phone width.
   ============================================================ */
.mobile-mega{
  position: relative;
  width: 100%;
  aspect-ratio: 1875 / 7500;
  overflow: hidden;
  background: var(--bg-dark);
}
.mm-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 1;
}
.mm-anchor{
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  z-index: 0;
}
.mm-trailer-btn{
  position: absolute;
  z-index: 3;
  left: 24.533%;
  top: 34.867%;
  width: 51.2%;
  height: 2.333%;
  display: block;
}

/* In-art nav text (PSD type layers, top of canvas) */
.mm-nav{ position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.mm-nav-link{
  position: absolute;
  display: block;
  color: var(--white);
  font-family: var(--body-font);
  letter-spacing: 0.06em;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  font-size: 3.073vw;
  pointer-events: auto;
}
.mm-nav-link:hover,
.mm-nav-link:focus-visible{ color: var(--gold); }
.mm-nav-trailer{ left: 11.680%; top: 1.280%; width: 9.547%; }
.mm-nav-gallery{ left: 34.453%; top: 1.280%; width: 9.973%; }
.mm-nav-cast{ left: 57.867%; top: 1.267%; width: 6.133%; }
.mm-nav-contact{ left: 77.227%; top: 1.267%; width: 11.147%; }

/* Footer — nav, social icons, and copyright as one cohesive block
   immediately beneath the mobile-mega image (same dark background,
   no visible section break). Even, real-pixel spacing per Nate's
   correction pass; typography/colors/icon styling unchanged from
   the PSD's text layers and the previous build's icon treatment. */
.mm-footer{
  background: var(--bg-dark);
  flex-direction: column;
  align-items: center;
  padding: 1.1rem 1rem 1rem;
  gap: 18px;
}
/* display:flex lives inside the breakpoint (rather than on the base
   rule) so the plain `.mobile-only{ display:none }` rule keeps full
   control at desktop widths — two equal-specificity, unscoped rules
   for the same property would otherwise just resolve by source
   order and risk showing this on desktop regardless of the
   .mobile-only class. See the same fix pattern used for .mm-nav/.mm-footer-nav. */
@media (max-width: 760px){
  .mm-footer{ display: flex; }
}
.mm-footer-nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.6rem 1.1rem;
  width: 100%;
}
.mm-footer-nav a{
  color: var(--white);
  font-family: var(--body-font);
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  font-size: clamp(0.68rem, 2.3vw, 0.82rem);
}
.mm-footer-nav a:hover,
.mm-footer-nav a:focus-visible{ color: var(--gold); }
.mm-social-row{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: clamp(0.6rem, 2.6vw, 1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.mm-social-row a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(32px, 9vw, 40px);
  height: clamp(32px, 9vw, 40px);
  border-radius: 50%;
  border: 1px solid rgba(253, 193, 30, 0.55);
  color: var(--gold);
}
.mm-social-row a.social-pending{ opacity: 0.4; pointer-events: none; }
.mm-social-row svg{
  width: 48%;
  height: 48%;
  fill: var(--gold);
}
.mm-ftr-copyright{
  margin: 0;
  color: rgba(255,255,255,0.7);
  font-family: var(--body-font);
  letter-spacing: 0.03em;
  text-align: center;
  font-size: 0.72rem;
}

/* Email input + Sign Up button — transparent overlays matching the
   exact pixel bounds of the dark input box / button graphic already
   baked into the artwork (measured directly from the flattened PSD
   composite, not estimated by eye). */
.mm-signup-form{
  position: absolute;
  inset: 0;
  z-index: 3;
}
.mm-signup-form input[type="email"]{
  position: absolute;
  left: 56.693%;
  top: 95.173%;
  width: 21.067%;
  height: 1.187%;
  min-height: 18px;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline-offset: 2px;
  color: var(--white);
  font-family: var(--body-font);
  font-size: clamp(0.5rem, 1.9vw, 0.68rem);
  text-align: center;
  padding: 0;
  padding-top: 0.65em;
  line-height: 1;
}
.mm-signup-form input[type="email"]::placeholder{
  color: rgba(255,255,255,0.75);
  text-align: center;
}
/* Typed text only (placeholder keeps the size/position above) — a
   modest reduction so a normal-length address ("nate@sauruscity.com")
   sits centered and fully visible; a long one still won't fit a
   readable size without scrolling, so it keeps the left-aligned
   scroll behavior below rather than shrinking further. */
.mm-signup-form input[type="email"]:not(:placeholder-shown){
  font-size: clamp(0.43rem, 1.6vw, 0.56rem);
  text-indent: 0.95em;
}
/* While typing, if the address grows wider than the box, drop back
   to left-aligned text so the browser's normal caret-follow
   scrolling keeps the cursor and the characters around it visible,
   instead of the clipped look centered text produces once it
   overflows. Toggled by script.js comparing scrollWidth/clientWidth. */
.mm-signup-form input[type="email"].mm-overflowing{
  text-align: left;
}
.mm-signup-form input[type="email"]:-webkit-autofill{
  -webkit-text-fill-color: var(--white);
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 9999s ease-in-out 0s;
}
.mm-signup-form button{
  position: absolute;
  left: 78.293%;
  top: 95.173%;
  width: 12.8%;
  height: 1.187%;
  min-height: 20px;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: transparent;
}
.mm-signup-note{
  text-align: center;
  padding: 1em 8% 0;
  background: var(--bg-dark);
  margin: 0;
}

/* ============================================================
   DESKTOP MEGA — built from Nate's superseding, condensed PSD
   (Saurus_City_Website_Layout_Condenced_1.psd).
   Canvas reference: 4500 x 8063. All noninteractive typography and
   artwork (hero, cast, synopsis, world copy, handcrafted/BTS
   section, signup banner, Watch Trailer and Sign Up button
   graphics, and the footer copyright line) is flattened into one
   image — none of it is recreated here. The header nav and footer
   nav/legal text still exist as separate, un-flattened type layers
   in that PSD, so they're rendered below as real HTML text at that
   PSD's own exact coordinates, font, size, color and tracking.
   Interactive overlays (email input, Sign Up button, Watch Trailer
   button) sit at the PSD's exact pixel bounds for the graphics
   already baked into the art. Same technique as .mobile-mega above,
   same coordinate-as-%-of-own-box approach. */
.dm-mega{
  position: relative;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  aspect-ratio: 4500 / 8063;
  overflow: hidden;
  background: var(--bg-dark);
}
.dm-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 1;
}
.dm-anchor{
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  z-index: 0;
}
.dm-trailer-btn{
  position: absolute;
  z-index: 3;
  left: 30.778%;
  top: 29.455%;
  width: 32.556%;
  height: 3.412%;
  display: block;
}

/* In-art header nav text (PSD type layers, top-right of canvas —
   a vertical stack, not a row, matching the PSD's own layout). */
.dm-nav{ position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.dm-nav-link{
  position: absolute;
  display: block;
  color: var(--white);
  font-family: var(--body-font);
  letter-spacing: 0.06em;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  font-size: 1.9213vw;
  pointer-events: auto;
}
.dm-nav-link:hover,
.dm-nav-link:focus-visible{ color: var(--gold); }
.dm-nav-trailer{ left: 84.978%; top: 1.277%; width: 12.467%; }
.dm-nav-gallery{ left: 91.111%; top: 3.064%; width: 6.222%; }
.dm-nav-cast{ left: 93.489%; top: 5.085%; width: 3.844%; }
.dm-nav-contact{ left: 90.511%; top: 6.895%; width: 6.933%; }

/* Footer nav text (PSD type layers, bottom of canvas) overlaid
   directly on the baked vine-footer art, same technique as the
   header nav above. This PSD's own footer area has enough open
   room above its baked copyright line to hold this plus the social
   icon row below, unlike the mobile condensed PSD (which didn't,
   hence that build's separate .mm-footer block instead). */
.dm-footer-nav{ position: absolute; inset: 0; z-index: 2; }
.dm-footer-link{
  position: absolute;
  display: block;
  color: var(--white);
  font-family: var(--body-font);
  letter-spacing: 0.06em;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  font-size: 1.221vw;
  line-height: 1;
  pointer-events: auto;
}
.dm-footer-link:hover,
.dm-footer-link:focus-visible{ color: var(--gold); }
.dm-footer-trailer{ left: 23.156%; top: 97.197%; width: 7.911%; }
.dm-footer-cast{ left: 33.711%; top: 97.197%; width: 2.444%; }
.dm-footer-gallery{ left: 38.822%; top: 97.197%; width: 3.956%; }
.dm-footer-privacy{ left: 45.533%; top: 97.197%; width: 7.622%; }
.dm-footer-terms{ left: 55.956%; top: 97.197%; width: 12.444%; }
.dm-footer-contact{ left: 71.222%; top: 97.209%; width: 4.422%; }

/* Social icons: not in this PSD either (same gap as the mobile
   one) — reused from the previous build, same gold circular
   treatment. Moved off the image into their own row at the very
   bottom of the page per Nate's correction (they were crowding the
   footer nav text and copyright when overlaid on the art), left-
   aligned and given more room to breathe. */
.dm-footer-icons{
  max-width: var(--max-w);
  margin: 0 auto;
  background: var(--bg-dark);
  padding: 1.4rem clamp(1rem, 4%, 2.5rem) 1.8rem;
}
.dm-social-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.8rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.dm-social-row a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(30px, 3.4vw, 46px);
  height: clamp(30px, 3.4vw, 46px);
  border-radius: 50%;
  border: 1px solid rgba(253, 193, 30, 0.55);
  color: var(--gold);
}
.dm-social-row a.social-pending{ opacity: 0.4; pointer-events: none; }
.dm-social-row svg{
  width: 48%;
  height: 48%;
  fill: var(--gold);
}

/* Email input + Sign Up button — transparent overlays matching the
   exact pixel bounds of the dark input box / button graphic already
   baked into the artwork (measured directly from the flattened PSD
   composite, not estimated by eye). Same centering technique already
   tuned and approved on the mobile build (padding-top nudge on the
   placeholder, smaller + text-indent-nudged font once text is
   typed, with overflow-aware fallback to left-aligned scrolling). */
.dm-signup-form{
  position: absolute;
  inset: 0;
  z-index: 3;
}
.dm-signup-form input[type="email"]{
  position: absolute;
  left: 56.956%;
  top: 90.289%;
  width: 19.311%;
  height: 2.294%;
  min-height: 18px;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline-offset: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-family: var(--body-font);
  font-size: clamp(1.15rem, 2.43vw, 1.82rem);
  text-align: center;
  padding: 0;
  line-height: 1;
}
.dm-signup-form input[type="email"]::placeholder{
  color: rgba(255,255,255,0.75);
  text-align: center;
}
.dm-signup-form input[type="email"]:not(:placeholder-shown){
  font-size: clamp(0.97rem, 2.03vw, 1.49rem);
}
.dm-signup-form input[type="email"]:-webkit-autofill{
  -webkit-text-fill-color: var(--white);
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 9999s ease-in-out 0s;
}
.dm-signup-form button{
  position: absolute;
  left: 76.444%;
  top: 90.264%;
  width: 11.222%;
  height: 2.319%;
  min-height: 20px;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: transparent;
}
.dm-signup-note{
  text-align: center;
  padding: 1em 8% 0;
  background: var(--bg-dark);
  margin: 0;
}