/* ==========================================================================
   VEHIO — Mesa Color System & Retro Drift Canvas
   Palette derived from vehio-mesa-color-system-4.html
   ========================================================================== */

/* Vehio Sans: a Latin subset of Pretendard, renamed as the SIL Open Font
   License requires for modified versions (see fonts/OFL.txt) */
@font-face {
  font-family: 'Vehio Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/vehio-sans-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Vehio Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/vehio-sans-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Vehio Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/vehio-sans-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Vehio Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/vehio-sans-700.woff2') format('woff2');
}

:root {
  /* Canvas & Base (Deep Black Background as requested) */
  --bg-color: #050508;
  
  /* Mesa Color Tokens */
  --canvas: #FAF6ED;
  --surface: #FFFFFF;
  --surface-sand: #F5EBD4;
  --sand-strong: #EDDCB2;
  --border: #E6DDC9;
  --border-input: #998B6C;

  /* Mesa Ink */
  --ink: #211D18;
  --ink-2: #5A5347;
  --ink-3: #756B5B;

  /* Mesa Terracotta (Action & Brand · The system's only red) */
  --verm: #B13E24;
  --verm-graphic: #C9472A;
  --verm-text: #9D371F;
  --verm-press: #8C301B;
  --dk-verm: #E36C4A;
  --dk-verm-text: #F5A288;

  /* Mesa Teal (Trust & Data) */
  --teal: #0E6F64;
  --teal-deep: #095A51;
  --teal-tint: #DDEBE6;
  --dk-teal: #3FB3A0;
  --dk-teal-text: #5BCBB8;
  --track: #E9E1D0;

  /* Dark Theme Tokens */
  --dk-canvas: #201C24;
  --dk-surface: #2A2530;
  --dk-ink: #F3EEE4;
  --dk-ink-2: #D5CFC2;
  --dk-track: #3A3440;

  /* Typography */
  --font-logo: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  /* Text (everything except the logo): Vehio Sans (Pretendard subset), self-hosted from fonts/ */
  --font-sans: 'Vehio Sans', 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  height: 100dvh; /* tracks the visible area as mobile browser toolbars show/hide */
  overflow: hidden;
  background-color: var(--bg-color);
  color: var(--dk-ink);
  font-family: var(--font-sans);
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Canvas (Full Screen)
   ========================================================================== */
#driftCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
}

.vignette-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9;
  background: radial-gradient(circle at center, transparent 35%, rgba(5, 5, 8, 0.85) 100%);
}

/* ==========================================================================
   Central Circular Hub (Wheel-Cap Inspired Track Center)
   ========================================================================== */
.hero-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
  /* The hub must fit the screen in both directions and leave room for the car
     to drift past above and below it (portrait phones). */
  --hub-size: min(540px, 94vw, calc(100vh - 140px));
  width: var(--hub-size);
  aspect-ratio: 1 / 1;
  pointer-events: auto;
  /* Lets the hub's content size itself in cqw (% of the hub's width). */
  container-type: inline-size;
  container-name: hub;
}

@supports (height: 100dvh) {
  .hero-container {
    --hub-size: min(540px, 94vw, calc(100dvh - 140px));
  }
}

/* Landscape phones: the car drifts around the sides instead, so the hub can
   use almost the full height. */
@media (orientation: landscape) and (max-height: 500px) {
  .hero-container {
    --hub-size: min(540px, 80vw, calc(100vh - 16px));
  }
  @supports (height: 100dvh) {
    .hero-container {
      --hub-size: min(540px, 80vw, calc(100dvh - 16px));
    }
  }
}

.circular-hub {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(42, 37, 48, 0.94) 0%, rgba(32, 28, 36, 0.96) 65%, rgba(18, 15, 22, 0.98) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px solid rgba(153, 139, 108, 0.35); /* Mesa border-input */
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.9),
              0 0 50px rgba(177, 62, 36, 0.12),
              inset 0 0 45px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* Top/bottom padding place the eyebrow and car buttons one ring-width inside
     the dashed ring. main.js (fitHubToRing) measures and sets these exactly;
     the fallbacks are close for a 540px hub. */
  padding: var(--hub-pt, 13cqw) 38px var(--hub-pb, 16.5cqw);
  /* How far inside the dashed ring the car buttons sit, in ring-widths
     (read by main.js and tools/check-layout.js). Phones use less, so the
     thank-you line under the form gets more room. */
  --fit-bottom: 1;
  text-align: center;
  overflow: hidden;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.circular-hub:hover {
  border-color: rgba(177, 62, 36, 0.5);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.95),
              0 0 60px rgba(177, 62, 36, 0.2);
}

/* Flexible gaps between the hub's groups. They share the spare height in the
   ratio 0.8 : 1.6 : 1 (below the eyebrow : brand-to-sign-up : above the car
   buttons), never shrinking below their minimums. */
.hub-space {
  flex: 1 1 0;
  width: 100%;
}

.hub-space--drop {
  flex-grow: 0.8;
  min-height: 26px;
}

.hub-space--split {
  flex-grow: 1.6;
  min-height: 18px;
}

/* Desktop-size hubs: Vehio and the tagline sit lower, further from the
   eyebrow (phones keep the 0.8 share). */
@container hub (min-width: 441px) {
  .hub-space--drop {
    flex-grow: 1.4;
  }
}

.hub-space--controls {
  flex-grow: 1;
  min-height: 22px; /* room for the one-line thank-you message */
}

/* Subtle Wheel-Inspired Concentric Rings */
.hub-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.hub-ring-outer {
  inset: 10px;
  border: 1px solid rgba(230, 221, 201, 0.1);
}

.hub-ring-inner {
  inset: 24px;
  border: 1px dashed rgba(153, 139, 108, 0.14);
}

.card-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 320px;
  background: radial-gradient(circle at center, rgba(177, 62, 36, 0.14), transparent 70%);
  pointer-events: none;
  filter: blur(35px);
}

/* ==========================================================================
   Authentic Vehio Logo (Matching Wheel Center Cap)
   ========================================================================== */
.logo-title {
  font-family: var(--font-logo);
  font-size: clamp(44px, 7.5vw, 62px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--dk-ink); /* Cream white #F3EEE4 */
  margin: 0;
  position: relative;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
}

/* Tagline */
.tagline {
  font-family: var(--font-sans);
  font-size: clamp(12.5px, 2.1vw, 15px);
  font-weight: 700;              /* bold, tight headline (BMW-style) */
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: var(--dk-ink); /* #F3EEE4 */
  white-space: nowrap;
  margin: 18px auto 0;
  position: relative;
}

/* Each sentence stays whole; the icon stays with the second sentence. */
.tagline-part {
  white-space: nowrap;
}

.tagline-icon {
  display: inline-block;
  color: var(--dk-ink); /* bright cream, same as the logo */
  width: 1.2em;
  height: 1.2em;
  margin-left: 0.4em;
  vertical-align: -0.24em;
}

.tagline-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Coming Soon eyebrow: "— ● COMING SOON —" in terracotta, like an engraved
   label on the wheel cap */
.coming-soon-wrapper {
  display: flex;
  justify-content: center;
  margin: 0;
  position: relative;
}

.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.coming-soon-badge::before,
.coming-soon-badge::after {
  content: '';
  width: 26px;
  height: 1px;
  background: rgba(227, 108, 74, 0.55); /* Mesa dark-mode terracotta */
}

.pulse-beacon {
  width: 6px;
  height: 6px;
  background-color: var(--verm);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--verm);
  animation: pulse-beacon 1.8s infinite ease-in-out;
}

@keyframes pulse-beacon {
  0%, 100% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
}

.coming-soon-text {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--dk-verm-text); /* #F5A288 */
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ==========================================================================
   Waitlist Form (Mesa Terracotta & Border Input Tokens)
   ========================================================================== */
.waitlist-form {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  position: relative;
}

.input-group {
  display: flex;
  align-items: center;
  background: rgba(32, 28, 36, 0.95);
  border: 1.5px solid var(--border-input);
  border-radius: 999px;
  padding: 4px 6px 4px 18px;
  transition: all 0.2s ease;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

.input-group:focus-within {
  border-color: var(--dk-teal);
  box-shadow: 0 0 16px rgba(63, 179, 160, 0.25), inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

#emailInput {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--dk-ink);
  font-family: var(--font-sans);
  font-size: 13.5px;
  padding: 8px 6px 8px 0;
  user-select: text;
  -webkit-user-select: text;
}

#emailInput::placeholder {
  color: var(--ink-3);
}

.submit-btn {
  background: var(--verm); /* #B13E24 Mesa CTA fill */
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  margin-right: 4px; /* Shifted inward to the left so it fits inside the capsule */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.submit-btn:hover {
  background: var(--verm-press); /* #8C301B */
  transform: translateY(-1px);
}

.submit-btn:active {
  transform: translateY(1px);
}

/* Audience Left/Right Toggle Switch (Positioned Above Email Bubble) */
.audience-toggle-wrapper {
  display: flex;
  justify-content: center;
  margin: 0 0 18px;
  position: relative;
}

.audience-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(22, 19, 26, 0.95);
  border: 1px solid var(--border-input); /* #998B6C */
  border-radius: 999px;
  padding: 3px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);
}

.audience-btn {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 4px 13px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--dk-ink-2); /* #D5CFC2 */
  position: relative;
  cursor: pointer;
  transition: all 0.22s ease;
  white-space: nowrap;
  letter-spacing: -0.005em;
}

/* Invisible extension of the tap area above and below the (slim) pill */
.audience-btn::after {
  content: '';
  position: absolute;
  inset: -5px 0;
}

.audience-btn:hover:not(.active) {
  color: var(--dk-ink);
}

.audience-btn.active {
  background: var(--teal); /* #0E6F64 Mesa Teal selection token */
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(14, 111, 100, 0.35);
}

.form-feedback {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.25;
  transition: opacity 0.3s;
}

.form-feedback.success {
  color: var(--dk-teal-text); /* #5BCBB8 */
}

.form-feedback.error {
  color: var(--dk-verm-text); /* #F5A288 */
}

/* ==========================================================================
   Interactivity Controls (Bottom of Hub)
   ========================================================================== */
.interactivity-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
}

.hud-btn {
  background: none;
  border: 1px solid transparent; /* quiet: the outline appears on hover */
  color: var(--dk-ink-2);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.hud-btn:hover {
  border-color: rgba(153, 139, 108, 0.45);
  color: var(--dk-ink);
}

.manual-drive-btn {
  background: none;
  border: 1px solid transparent;
  position: relative;
  color: var(--dk-teal-text); /* #5BCBB8 */
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.manual-drive-btn .btn-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dk-teal);
  box-shadow: 0 0 6px var(--dk-teal);
}

/* Thin divider between the two car buttons */
.manual-drive-btn::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 28%;
  bottom: 28%;
  width: 1px;
  background: rgba(153, 139, 108, 0.4);
}

.manual-drive-btn:hover {
  border-color: rgba(14, 111, 100, 0.7);
}

.manual-drive-btn.active {
  background: var(--teal);
  border-color: var(--teal);
  color: #FFFFFF;
}

/* ==========================================================================
   Mobile Touch Controls
   ========================================================================== */
.touch-controls {
  position: fixed;
  bottom: calc(54px + env(safe-area-inset-bottom));
  left: 0;
  width: 100%;
  padding: 0 24px;
  display: none;
  justify-content: space-between;
  z-index: 30;
  pointer-events: none;
}

.touch-left, .touch-right {
  display: flex;
  gap: 12px;
  pointer-events: auto;
}

.touch-btn {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(32, 28, 36, 0.85);
  backdrop-filter: blur(10px);
  border: 1.5px solid var(--border-input);
  color: var(--dk-ink);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  user-select: none;
  touch-action: manipulation;
}

.touch-btn:active {
  background: var(--teal);
  color: #fff;
  transform: scale(0.95);
}

.touch-gas {
  background: rgba(14, 111, 100, 0.25);
  border-color: var(--teal);
  font-size: 11px;
  color: var(--dk-teal-text);
}

.touch-brake {
  background: rgba(177, 62, 36, 0.25);
  border-color: var(--verm);
  font-size: 11px;
  color: var(--dk-verm-text);
}

@media (pointer: coarse) and (max-width: 900px) {
  body.manual-mode .touch-controls {
    display: flex;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.hud-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 14px 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--ink-3);
  background: linear-gradient(to top, rgba(5, 5, 8, 0.95) 0%, rgba(5, 5, 8, 0) 100%);
  pointer-events: none;
}

.footer-left {
  pointer-events: auto;
}


/* ==========================================================================
   Short / Long Labels (swapped on small hubs)
   ========================================================================== */
.label-short {
  display: none;
}

/* ==========================================================================
   Touch Devices: comfortable tap targets
   ========================================================================== */
@media (pointer: coarse) {
  .audience-btn {
    min-height: 32px;
    padding: 0 15px;
    font-size: 12px;
  }

  .input-group {
    padding: 4px 4px 4px 18px;
  }

  #emailInput {
    font-size: 16px; /* 16px+ stops iOS Safari zooming in on focus */
    min-height: 40px;
  }

  .submit-btn {
    min-height: 40px;
    padding: 0 16px;
    margin-right: 0;
  }

  .hud-btn,
  .manual-drive-btn {
    min-height: 36px;
  }
}

/* ==========================================================================
   Compact Hub (phones): everything scales with the hub's own width, so the
   content always stays inside the circle. 1cqw = 1% of the hub's diameter.
   ========================================================================== */
@container hub (max-width: 440px) {
  .circular-hub {
    padding: var(--hub-pt, 12cqw) 9cqw var(--hub-pb, 10cqw);
    --fit-bottom: 0.4;
  }

  .hub-space--drop { min-height: 5.2cqw; }
  .hub-space--split { min-height: 4cqw; }
  .hub-space--controls { min-height: 30px; } /* thank-you line + breathing room */

  .hub-ring-outer { inset: 1.6cqw; }
  .hub-ring-inner { inset: 3.6cqw; }

  .card-glow {
    width: 60cqw;
    height: 60cqw;
  }

  .logo-title {
    font-size: 10cqw;
    line-height: 1;
  }

  .tagline {
    letter-spacing: -0.01em; /* a little looser than desktop at small sizes */
    font-size: max(10.5px, 3.05cqw);
    line-height: 1.22;
    white-space: normal;
    text-wrap: balance;
    max-width: 74cqw;
    margin: 3cqw auto 0;
  }

  .coming-soon-badge {
    gap: 6px;
  }

  .coming-soon-badge::before,
  .coming-soon-badge::after {
    width: 3cqw;
  }

  .coming-soon-text {
    font-size: 9.5px;
    letter-spacing: 2.4px;
  }

  /* Slim pill toggle, with a clear step down to the email field */
  .audience-toggle-wrapper {
    margin: 0 0 3.4cqw;
  }

  .audience-toggle {
    padding: 2px;
  }

  .audience-btn {
    min-height: 30px;
    padding: 0 3.2cqw;
    font-size: 11.5px;
  }

  /* Stacked form: full-width email field, full-width button below it */
  .waitlist-form {
    max-width: 66cqw;
    margin: 0 auto;
  }

  .input-group {
    flex-direction: column;
    align-items: stretch;
    gap: 1.6cqw;
    background: none;
    border: none;
    padding: 0;
    box-shadow: none;
  }

  .input-group:focus-within {
    box-shadow: none;
  }

  #emailInput {
    flex: none;
    width: 100%;
    min-height: max(36px, 10.2cqw);
    padding: 0 16px;
    text-align: center;
    font-size: 16px; /* stops iOS Safari zooming in on focus */
    background: rgba(32, 28, 36, 0.95);
    border: 1.5px solid var(--border-input);
    border-radius: 999px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  #emailInput:focus {
    border-color: var(--dk-teal);
    box-shadow: 0 0 16px rgba(63, 179, 160, 0.25), inset 0 2px 6px rgba(0, 0, 0, 0.5);
  }

  .submit-btn {
    width: 100%;
    min-height: max(36px, 10.2cqw);
    margin: 0;
    padding: 0 16px;
    justify-content: center;
    font-size: 12px;
  }

  /* Feedback floats in the gap above the controls instead of pushing them
     out of the circle. */
  .form-feedback {
    left: -6cqw;
    right: -6cqw;
    margin-top: 1cqw;
    font-size: 10.5px;
    line-height: 1.2;
  }

  .hud-btn,
  .manual-drive-btn {
    min-height: max(26px, 7cqw);
    padding: 0 2.3cqw;
    font-size: max(9px, 2.6cqw);
    letter-spacing: 0.02em;
    gap: 4px;
  }

  .hud-btn .btn-icon {
    font-size: 0.9em;
  }

  .manual-drive-btn .btn-dot {
    width: 5px;
    height: 5px;
  }

  .label-long { display: none; }
  .label-short { display: inline; }
}

/* Narrow phones (hub 360px or less, e.g. iPhone SE 3rd gen, Galaxy S24):
   same rhythm, smaller minimum gaps so everything still fits the ring. */
@container hub (max-width: 360px) {
  .hub-space--drop { min-height: 3.2cqw; }
  .hub-space--split { min-height: 2.6cqw; }
  .hub-space--controls { min-height: 28px; }
  .tagline { margin-top: 2cqw; }
}

/* Legacy 320px phones (original iPhone SE): ease a few sizes slightly. */
@container hub (max-width: 310px) {
  .logo-title { font-size: 9cqw; }
  .tagline { margin-top: 1.2cqw; line-height: 1.15; }
  .hub-space--drop { min-height: 1.6cqw; }
  .hub-space--split { min-height: 2.2cqw; }
  .hub-space--controls { min-height: 18px; }
  .audience-toggle-wrapper { margin-bottom: 2.4cqw; }
  .input-group { gap: 1.2cqw; }
  #emailInput,
  .submit-btn { min-height: 34px; }
}

/* Landscape phones: drop the eyebrow (and its gap) so the rest fits the
   shorter circle. */
@media (orientation: landscape) and (max-height: 500px) {
  .coming-soon-wrapper,
  .hub-space--drop {
    display: none;
  }
}

/* ==========================================================================
   Footer placement on small screens
   ========================================================================== */
@media (max-width: 600px) {
  .hud-bottom {
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    font-size: 10px;
  }
}

/* Short landscape screens: tuck the footer into the corner, clear of the hub */
@media (orientation: landscape) and (max-height: 500px) {
  .hud-bottom {
    justify-content: flex-start;
    background: none;
    padding: 8px calc(16px + env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom));
    font-size: 10px;
  }
}

/* Spam-trap field: kept out of sight and out of the layout */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.submit-btn:disabled {
  opacity: 0.7;
  cursor: progress;
  transform: none;
}