/* =====================================================================
   Miraj Coffee House - Coming Soon
   Moody, warm, dark, minimal. One full screen, no scrolling.
   ===================================================================== */

/* ---------- Design tokens (colors) ----------
   Change these in one place to re-skin the whole site. */
:root {
  --color-bg:        #0E0B08;  /* near-black warm base, also the vaporize target color */
  --color-bg-2:      #1A1410;  /* slightly lifted warm dark */
  --color-text:      #EDE6DA;  /* warm off-white */
  --color-text-dim:  #9C9387;  /* muted warm grey for secondary text */
  --color-accent:    #C8A06A;  /* warm brass/amber, echoes the backlit glow */
  --color-gold-deep: #A8814E;  /* deeper, darker gold for the serif headline */

  /* --vh is set by JavaScript as a last-resort fallback for old browsers
     that don't understand dvh/svh. 1vh = 1% of the *real* window height. */
  --vh: 1vh;
}

/* ---------- The "Orange Avenue" display serif (self-hosted) ----------
   An elegant ligature serif used only for the headline. Self-hosted so it
   loads fast. LICENSED 2026-10-07: desktop + webfont, up to 10,000 page
   views per month. If traffic grows past that, upgrade the license.
   These two files were repackaged from the licensed OrangeAvenue-Regular.ttf,
   because the web fonts in the download were missing the looped "st" ligature. */
@font-face {
  font-family: 'Orange Avenue';
  /* woff2 is the small modern format; woff is the fallback for older browsers */
  src: url('/assets/fonts/orangeavenue-regular-full.woff2') format('woff2'),
       url('/assets/fonts/orangeavenue-regular-full.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset-ish basics ---------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Lock the page to exactly one screen: no scrolling, no rubber-band bounce. */
html,
body {
  overflow: hidden;
  height: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Jost', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Stop iOS from highlighting things blue when tapped */
  -webkit-tap-highlight-color: transparent;
}

/* ---------- The full-screen hero sizing ----------
   We apply the same robust height rules to every full-screen layer.
   Order matters: later rules win if the browser understands them.
     1) var(--vh) * 100  -> JS fallback for very old browsers
     2) 100svh           -> "small viewport height" (address bar showing)
     3) 100dvh           -> "dynamic viewport height" (best, modern browsers)
*/
.hero-video,
.hero-canvas,
.grade-overlay,
.hero-content {
  position: fixed;
  inset: 0;
  width: 100vw;
  width: 100dvw;
  height: calc(var(--vh, 1vh) * 100);
  height: 100svh;
  height: 100dvh;
}

/* ---------- The hidden video ----------
   Normally invisible (Three.js paints it onto the canvas instead).
   object-fit: cover means it fills the screen and crops, never stretches. */
.hero-video {
  /* Show the WHOLE logo, scaled to fit and centered (never cropped). */
  object-fit: contain;
  object-position: center;
  z-index: 0;
  /* Hidden by default. JS makes it visible only in fallback mode. */
  opacity: 0;
  pointer-events: none;
}

/* When JS decides we must fall back (no WebGL / reduced motion),
   it adds this class to <html> and the video becomes the visible hero. */
.no-webgl .hero-video {
  opacity: 1;
  /* Feather the rectangle edges into the background so it blends like the
     WebGL version (a soft oval mask fading to transparent at the edges). */
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at center 46%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 62% at center 46%, #000 30%, transparent 100%);
}
.no-webgl .hero-canvas {
  display: none;
}

/* ---------- The WebGL canvas (the mirage) ---------- */
.hero-canvas {
  z-index: 1;
  display: block;
  /* The canvas itself receives the pointer events for the effect. */
  touch-action: none; /* stop the browser scrolling/zooming when dragging on it */
}

/* ---------- Dark vignette + grade over the video ----------
   A radial gradient darkens the edges (vignette) and a flat tint
   deepens the whole thing so warm text reads comfortably. */
.grade-overlay {
  z-index: 2;
  pointer-events: none; /* clicks pass straight through to the canvas/form */
  background:
    /* Bottom scrim: darkens the lower third so the headline + form sit in their
       own quiet band, cleanly separated from the logo above. */
    linear-gradient(
      to top,
      rgba(14, 11, 8, 0.92) 0%,
      rgba(14, 11, 8, 0.7) 16%,
      rgba(14, 11, 8, 0.3) 30%,
      rgba(14, 11, 8, 0) 44%
    ),
    /* Vignette: darken the edges. */
    radial-gradient(
      ellipse at center,
      rgba(14, 11, 8, 0) 35%,
      rgba(14, 11, 8, 0.55) 100%
    ),
    /* Flat overall grade so warm white text reads comfortably. */
    linear-gradient(rgba(14, 11, 8, 0.28), rgba(14, 11, 8, 0.28));
}

/* ---------- Content layer (headline + form) ---------- */
.hero-content {
  z-index: 3;
  display: flex;
  align-items: center;
  /* Anchor the content to the lower third so it sits BELOW the logo in the
     video, never covering it. The logo stays the clear focal point. */
  justify-content: flex-end;
  flex-direction: column;
  /* The content layer must let pointer events fall through to the canvas,
     EXCEPT on the actual form. We turn pointer-events back on for the form. */
  pointer-events: none;
  padding: 24px;
  /* Breathing room above the bottom edge (and respect the iPhone home bar). */
  padding-bottom: max(3vh, env(safe-area-inset-bottom));
  padding-top: max(24px, env(safe-area-inset-top));
}

.content-inner {
  text-align: center;
  max-width: 540px;
}

/* =====================================================================
   PAGE LOAD FADE-IN
   Everything starts invisible and fades in, one layer after another:
     1) the glowing logo (the mirage canvas) rises out of the dark
     2) then the headline, subtext, form and legal links follow in turn
   The whole sequence finishes in about 3 seconds.
   To make it faster or slower, change the durations (1.4s, 2.2s) and the
   delays (the second number on each animation line).
   ===================================================================== */

/* 1) The logo: a slow fade up from black */
.hero-canvas,
.no-webgl .hero-video {
  animation: fade-in 2.2s ease-out 0.2s both;
}

/* 2) The text and form, each one starting a beat after the last */
.content-inner .headline    { animation: rise-in 1.4s ease-out 0.9s both; }
.content-inner .location    { animation: rise-in 1.4s ease-out 1.1s both; }
.content-inner .subtext     { animation: rise-in 1.4s ease-out 1.3s both; }
.content-inner .signup-form { animation: rise-in 1.4s ease-out 1.5s both; }
.content-inner .legal-links { animation: rise-in 1.4s ease-out 1.8s both; }

/* Plain fade (no movement) */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Fade while drifting up a few pixels */
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* People who turn on "reduce motion" in their phone settings get the
   same fade, just without the upward drift. */
@media (prefers-reduced-motion: reduce) {
  .content-inner .headline,
  .content-inner .location,
  .content-inner .subtext,
  .content-inner .signup-form,
  .content-inner .legal-links {
    animation-name: fade-in;
  }
}

/* ---------- Typography ---------- */

/* The elegant display-serif headline (the teaser line) */
.headline {
  font-family: 'Orange Avenue', 'Cormorant Garamond', serif;
  font-weight: 400;
  /* Smaller + restrained, so it reads as a quiet caption under the logo. */
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: 0.05em;
  /* Deeper gold, a touch darker than the accent. */
  color: var(--color-gold-deep);
  /* Layered shadow: a tight dark edge for legibility + a soft halo for depth,
     so the dark-gold text stays readable even over the bright backlit glow. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 2px 26px rgba(0, 0, 0, 0.7);
  /* Turn on the font's elegant ligatures. */
  font-feature-settings: 'liga' 1, 'dlig' 1, 'calt' 1;
}

/* "Coming Soon to Orland Park, IL": small, wide-spaced brass capitals under the headline */
.location {
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
  /* same soft dark halo as the headline so it stays readable over the glow */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 2px 18px rgba(0, 0, 0, 0.7);
  margin-top: 0.6rem;
  /* the wide letter spacing adds a gap after the last letter; this re-centers the line */
  padding-left: 0.28em;
}

/* Muted one-liner under the headline */
.subtext {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--color-text-dim);
  margin-top: 0.5rem;
  margin-bottom: 0.9rem;
}

/* ---------- The email + SMS form (stacked pills) ---------- */
.signup-form {
  /* Turn pointer events back ON here so people can use the form,
     and so our JS knows "pointer is over the form -> don't ripple". */
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
}

/* A single sleek PILL: the input and button live inside one rounded capsule. */
.field-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(237, 230, 218, 0.05);
  border: 1px solid rgba(237, 230, 218, 0.18);
  border-radius: 999px; /* full pill */
  padding: 5px 5px 5px 6px;
  transition: border-color 0.25s ease, background 0.25s ease;
  backdrop-filter: blur(4px); /* subtle frosted-glass feel over the moody scene */
  -webkit-backdrop-filter: blur(4px);
}

/* Glow the whole pill when the user is typing in it */
.field-row:focus-within {
  border-color: var(--color-accent);
  background: rgba(237, 230, 218, 0.08);
}

/* The input sits transparent inside the pill (no border of its own) */
.signup-form input[type='email'],
.signup-form input[type='tel'] {
  flex: 1 1 auto;
  min-width: 0; /* lets the input shrink on small screens instead of overflowing */
  background: transparent;
  border: none;
  /* Strip the browser's native field styling (iOS adds a white inset box). */
  -webkit-appearance: none;
  appearance: none;
  border-radius: 999px;
  color: var(--color-text);
  font-family: 'Jost', sans-serif;
  font-size: 16px; /* 16px stops iOS from zooming in when the field is focused */
  letter-spacing: 0.04em;
  padding: 11px 18px;
  outline: none;
}

/* Kill the browser autofill white/yellow box: keep the pill transparent and the
   text warm. The 9999s transition defers the autofill background so it never shows. */
.signup-form input[type='email']:-webkit-autofill,
.signup-form input[type='email']:-webkit-autofill:hover,
.signup-form input[type='email']:-webkit-autofill:focus,
.signup-form input[type='email']:autofill,
.signup-form input[type='tel']:-webkit-autofill,
.signup-form input[type='tel']:-webkit-autofill:hover,
.signup-form input[type='tel']:-webkit-autofill:focus,
.signup-form input[type='tel']:autofill {
  -webkit-text-fill-color: var(--color-text);
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 9999s ease-in-out 0s;
  caret-color: var(--color-accent);
}

.signup-form input[type='email']::placeholder,
.signup-form input[type='tel']::placeholder {
  color: var(--color-text-dim);
  opacity: 0.7;
}

/* SMS consent: its own row, checkbox + the legal label, never pre-checked. */
.sms-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  padding: 2px 8px 2px 10px;
}
.sms-consent input[type='checkbox'] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--color-accent);
  cursor: pointer;
}
.sms-consent input[type='checkbox']:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.sms-consent label {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 0.68rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--color-text-dim);
  cursor: pointer;
}

/* Terms + Privacy links inside the text-message disclosure */
.sms-consent label a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Before a full mobile number is typed, the checkbox is switched off and dimmed.
   Only the BOX dims: the disclosure text stays fully readable at all times,
   because carriers require the wording to be clear and visible. */
.sms-consent.is-disabled input[type='checkbox'] {
  opacity: 0.35;
  cursor: not-allowed;
}
.sms-consent.is-disabled label {
  cursor: default;
}

/* One quiet line under the button saying what the email signup means */
.email-disclosure {
  margin-top: 10px;
  text-align: center;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 0.66rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-text-dim);
}

/* The submit button: a solid gold pill, uppercase wide-spaced sans */
.signup-form button {
  flex: 0 0 auto;
  background: var(--color-accent);
  border: none;
  border-radius: 999px; /* full pill */
  color: var(--color-bg);
  font-family: 'Jost', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.68rem;
  font-weight: 500;
  padding: 13px 24px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s ease, transform 0.15s ease;
}

/* On its own line now (the form stacks), so it spans the full width. */
.signup-form .submit-btn {
  width: 100%;
  padding: 15px 24px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  margin-top: 2px;
}

.signup-form button:hover {
  background: #DCB683; /* slightly brighter gold on hover */
}
.signup-form button:active {
  transform: scale(0.97);
}

/* Clear, visible focus ring for keyboard users (accessibility) */
.signup-form button:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}
.field-row:focus-within {
  outline: none;
}

/* The status line (success / error message) */
.form-status {
  font-family: 'Jost', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  margin-top: 1rem;
  min-height: 1.2em; /* reserve space so layout doesn't jump when a message appears */
  color: var(--color-text-dim);
}
.form-status.is-success {
  color: var(--color-accent);
}
.form-status.is-error {
  color: #d98a6a; /* a warm-leaning red so it fits the palette */
}

/* When the form succeeds, JS adds this class to fade the form fields away
   and leave only the success message. */
.signup-form.is-done .field-row,
.signup-form.is-done .subtext {
  display: none;
}

/* ---------- Accessibility helper: hide visually but keep for screen readers ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The honeypot field: hidden from real users entirely */
.hidden-field {
  display: none;
}

/* ---------- Small screens: keep the pill, just tighten the button ---------- */
@media (max-width: 380px) {
  .signup-form input[type='email'] {
    padding-left: 14px;
  }
  .signup-form button {
    padding: 13px 16px;
    letter-spacing: 0.12em;
  }
}

/* ---------- Footer legal links (small, dim, centered under the form) ---------- */
.legal-links {
  margin-top: 0.9rem;
  /* Re-enable clicks here (the content layer is pointer-events: none). */
  pointer-events: auto;
  font-family: 'Jost', sans-serif;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}
.legal-links a {
  color: var(--color-text-dim);
  text-decoration: none;
  transition: color 0.2s ease;
}
.legal-links a:hover {
  color: var(--color-accent);
}
.legal-links .sep {
  margin: 0 0.6em;
  opacity: 0.5;
}

/* =====================================================================
   Legal pages (privacy.html, terms.html) - normal scrollable documents
   ===================================================================== */
/* The home page locks scrolling globally (overflow: hidden on html, body).
   Legal pages put a .legal-page class on <html> to UNLOCK scrolling here. */
html.legal-page,
html.legal-page body {
  overflow: visible;    /* release the global scroll lock */
  overflow-y: auto;     /* allow vertical scroll */
  height: auto;         /* let the page grow taller than one screen */
  min-height: 100%;
}
html.legal-page body {
  background: var(--color-bg);
}
.legal {
  max-width: 740px;
  margin: 0 auto;
  padding: 72px 24px 96px;
}
.legal h1 {
  font-family: 'Orange Avenue', 'Cormorant Garamond', serif;
  font-weight: 400;
  color: var(--color-gold-deep);
  font-size: clamp(2rem, 5vw, 2.8rem);
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}
.legal .updated {
  font-family: 'Jost', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: 2.6rem;
}
.legal h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  color: var(--color-text);
  font-size: 1.45rem;
  letter-spacing: 0.01em;
  margin: 2.2rem 0 0.6rem;
}
.legal p,
.legal li {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.7;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.legal p {
  margin-bottom: 1rem;
}
.legal ul {
  margin: 0 0 1rem 1.2rem;
}
.legal li {
  margin-bottom: 0.4rem;
}
.legal a {
  color: var(--color-accent);
}
.legal .back {
  display: inline-block;
  margin-top: 3rem;
  font-family: 'Jost', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  color: var(--color-accent);
  text-decoration: none;
  border: 1px solid var(--color-accent);
  padding: 12px 24px;
  border-radius: 999px;
  transition: background 0.25s ease, color 0.25s ease;
}
.legal .back:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* =====================================================================
   Thank-you overlay (after a successful signup)
   Cappuccino foam fills the screen, the cocoa "A" dusts in, then the
   message and a Home button.
   ===================================================================== */
.thankyou {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  height: 100svh;
  height: 100dvh;
  background: var(--color-bg);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}
.thankyou.is-active {
  opacity: 1;
  visibility: visible;
}

/* Foam video fills the screen. Cropping foam is fine, so one video covers all
   sizes. Scaled up a touch so the latte art reads bigger, and slightly under
   full opacity so it blends into the dark page more naturally. */
.foam-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  opacity: 0.9;
  z-index: 0;
}

/* Centered content group sitting over the foam */
.thankyou-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  pointer-events: none; /* only the Home button should catch clicks */
}

/* The cocoa "A": begins soft and slightly large, then settles sharp, like
   powder drifting down and landing on the foam. */
.cocoa-a {
  width: auto;
  height: clamp(190px, 42vh, 460px);
  opacity: 0;
  transform: scale(1.08);
  filter: blur(10px);
  transition: opacity 1s ease-out, transform 1.1s ease-out, filter 1.1s ease-out;
}

/* The message, in the same Orange Avenue display serif as "A Portal You Can Taste".
   This screen is LIGHT foam, so it is a dark espresso tone (the opposite of the
   hero) with a soft cream halo to lift it off the busy foam. */
.thankyou-text {
  font-family: 'Orange Avenue', 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 4.6vw, 2.5rem);
  letter-spacing: 0.04em;
  color: #2a1d13; /* dark espresso, reads on cream foam */
  margin-top: 1.4rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  text-shadow: 0 1px 18px rgba(250, 244, 235, 0.7), 0 1px 2px rgba(250, 244, 235, 0.6);
  font-feature-settings: 'liga' 1, 'dlig' 1, 'calt' 1;
}

/* Back button: a frosted dark pill with gold text, so it reads on the foam. */
.home-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 1.9rem;
  background: rgba(20, 15, 11, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(200, 160, 106, 0.65);
  border-radius: 999px;
  color: var(--color-accent);
  font-family: 'Jost', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 13px 32px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s ease-out, background 0.25s ease, color 0.25s ease;
}
.home-btn__arrow {
  font-size: 1.15em;
  letter-spacing: 0;
  line-height: 1;
}
.home-btn:hover {
  background: var(--color-accent);
  color: #1a1410;
  border-color: var(--color-accent);
}

/* Legal links at the bottom of the thank-you page (dark, for the light foam) */
.thankyou-legal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 2;
  pointer-events: auto;
  text-align: center;
  font-family: 'Jost', sans-serif;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5a4636;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.thankyou-legal a {
  color: #3a2c1f;
  text-decoration: none;
  transition: color 0.2s ease;
  text-shadow: 0 1px 10px rgba(250, 244, 235, 0.6);
}
.thankyou-legal a:hover {
  color: #1a1410;
}
.thankyou-legal .sep {
  margin: 0 0.6em;
  opacity: 0.6;
}
.thankyou.show-content .thankyou-legal {
  opacity: 1;
  transition-delay: 1.25s;
}
.home-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Staggered reveal once the foam has settled */
.thankyou.show-content .cocoa-a {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}
.thankyou.show-content .thankyou-text {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.45s;
}
.thankyou.show-content .home-btn {
  opacity: 1;
  transition-delay: 0.95s;
}

/* Respect reduced motion: no blur/scale/slide, just a gentle fade */
@media (prefers-reduced-motion: reduce) {
  .cocoa-a {
    transform: none;
    filter: none;
    transition: opacity 0.5s ease;
  }
  .thankyou-text {
    transform: none;
    transition: opacity 0.5s ease;
  }
}

/* =====================================================================
   Streamlined, compact signup form on phones (keeps inputs at 16px so
   iOS does not zoom in on focus; everything else tightens up).
   ===================================================================== */
@media (max-width: 600px) {
  .signup-form {
    gap: 6px;
    max-width: 300px; /* noticeably narrower = sleeker */
  }
  /* Thin the pills right down. The field-row added its own padding for the old
     inline button; with a single input we strip that back to almost nothing. */
  .field-row {
    padding: 0;
  }
  .signup-form input[type='email'],
  .signup-form input[type='tel'] {
    padding: 9px 16px; /* thin pill. font stays 16px so iOS never zooms on focus */
  }
  .sms-consent {
    gap: 7px;
    padding: 0 2px 0 4px;
  }
  .sms-consent input[type='checkbox'] {
    width: 15px;
    height: 15px;
    margin-top: 1px;
  }
  .sms-consent label {
    font-size: 0.58rem;
    line-height: 1.4;
    letter-spacing: 0.01em;
  }
  .signup-form .submit-btn {
    padding: 10px 22px;
    font-size: 0.64rem;
    margin-top: 0;
  }
  /* tighten the lines above the form too, so the whole cluster reads compact */
  .location {
    font-size: 0.64rem;
    letter-spacing: 0.24em;
    padding-left: 0.24em;
    margin-top: 0.45rem;
  }
  .subtext {
    font-size: 0.82rem;
    margin-top: 0.35rem;
    margin-bottom: 0.6rem;
  }
  /* the email line matches the text-message wording above it */
  .email-disclosure {
    margin-top: 2px;
    font-size: 0.56rem;
    line-height: 1.4;
  }
  .form-status {
    margin-top: 0.4rem;
  }
}

/* Short phones (iPhone SE size and smaller): the longer legal wording makes the
   form taller, so we drop the bottom Privacy / Terms row here to keep the
   headline from bumping into the logo. Both pages are still linked right
   inside the text-message checkbox wording. */
@media (max-width: 600px) and (max-height: 700px) {
  .legal-links {
    display: none;
  }
  .subtext {
    margin-bottom: 0.4rem;
  }
}

/* =====================================================================
   BREATHING ROOM ON PHONES
   Normal-height phones have spare room now that the logo sits higher, so
   we open up the gaps between the headline, the two small lines, and the
   form. Very short phones (under 620px of screen height) keep the compact
   spacing above so everything still fits on one screen.
   To make it airier or tighter, change the numbers in this block only.
   ===================================================================== */
@media (max-width: 600px) and (min-height: 620px) {
  .location {
    margin-top: 0.9rem;   /* gap under "A Portal You Can Taste" */
  }
  .subtext {
    margin-top: 0.8rem;   /* gap under "Coming Soon to Orland Park, IL" */
    margin-bottom: 1.4rem; /* gap above the email field */
  }
  .signup-form {
    gap: 12px;            /* gap between email, mobile, checkbox text, and button */
  }
  .signup-form input[type='email'],
  .signup-form input[type='tel'] {
    padding: 11px 16px;   /* slightly taller fields */
  }
  .sms-consent label {
    line-height: 1.5;
  }
  .signup-form .submit-btn {
    padding: 12px 22px;
    margin-top: 2px;
  }
  .email-disclosure {
    margin-top: 6px;
  }
  .legal-links {
    display: block;       /* keep Privacy / Terms visible at this height */
    margin-top: 1.1rem;
  }
}