/* ==========================================================================
   Reconyo – Coming Soon
   ========================================================================== */

:root {
  --bg: #060708;
  --text: #f4f4f2;
  --text-muted: #a7aaaf;
  --text-faint: #6e7277;
  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.32);
  --field: rgba(255, 255, 255, 0.04);
  --success: #9fd8b0;
  --error: #f0a3a3;
  --radius: 3px;
  --gutter: clamp(16px, 4vw, 56px);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-mask: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
}

img,
svg {
  display: block;
}

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

:focus-visible {
  outline: 1px solid var(--text);
  outline-offset: 4px;
}

/* ---------- Hintergrund ---------- */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("../img/background-1400.jpg");
  background-size: cover;
  background-position: 62% center;
}

.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(6, 7, 8, 0.25) 0%, rgba(6, 7, 8, 0.78) 80%),
    linear-gradient(to bottom, rgba(6, 7, 8, 0.6) 0%, rgba(6, 7, 8, 0.2) 40%, rgba(6, 7, 8, 0.9) 100%);
}

@media (min-width: 1400px) {
  .backdrop {
    background-image: url("../img/background-2400.jpg");
  }
}

/* Hintergrundvideo: schwarz/weiß und abgedunkelt, blendet weich ein.
   Solange es lädt, bleibt der Hintergrund schwarz statt das Foto zu zeigen. */
.backdrop.has-video {
  background-image: none;
}

.backdrop-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1) brightness(0.55) contrast(1.1);
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

.backdrop-video.is-active {
  opacity: 1;
}

/* ---------- Layout ---------- */

.page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  overflow: clip; /* schneidet die Blur-Ebene am Seitenende ab, ohne Scrollbalken */
}

/* ---------- Navigation ---------- */

.site-header {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px var(--gutter);
}

.logo {
  display: block;
  width: fit-content;
  color: var(--text);
  text-decoration: none;
}

.logo svg {
  display: block;
  width: 92px;
  height: auto;
  overflow: visible; /* Buchstaben reichen bis an den viewBox-Rand – sonst wird auf dem Handy die untere Kante abgeschnitten */
  fill: currentColor;
}

.site-nav {
  display: flex;
  gap: 32px;
}

.site-nav a {
  position: relative;
  padding: 4px 0;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-faint);
  transition: color 0.2s;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}

.site-nav a[aria-current="page"] {
  color: var(--text-muted);
}

@media (hover: hover) {
  .site-nav a:hover {
    color: var(--text);
  }

  .site-nav a:hover::after {
    transform: scaleX(1);
  }
}

/* ---------- Burger-Menü (nur mobil) ---------- */

.menu-toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  margin: -10px -10px -10px 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
}

.menu-toggle span {
  position: absolute;
  left: 10px;
  width: 20px;
  height: 1px;
  background: currentColor;
  transition: transform 0.45s var(--ease-mask);
}

.menu-toggle span:nth-child(1) { transform: translateY(-3.5px); }
.menu-toggle span:nth-child(2) { transform: translateY(3.5px); }

.menu-open .menu-toggle span:nth-child(1) { transform: rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  padding: 120px var(--gutter) 40px;
  background: rgba(0, 0, 0, 0.94);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-out), visibility 0s linear 0.5s;
}

.menu-open .mobile-menu {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s var(--ease-out), visibility 0s;
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-menu nav a {
  font-size: 2.25rem;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: var(--text-muted);
  text-decoration: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), color 0.2s;
}

.mobile-menu nav a[aria-current="page"] {
  color: var(--text);
}

.menu-open .mobile-menu nav a {
  opacity: 1;
  transform: none;
}

.menu-open .mobile-menu nav a:nth-child(1) { transition-delay: 0.1s, 0.1s, 0s; }
.menu-open .mobile-menu nav a:nth-child(2) { transition-delay: 0.17s, 0.17s, 0s; }
.menu-open .mobile-menu nav a:nth-child(3) { transition-delay: 0.24s, 0.24s, 0s; }

.mobile-menu .brand-tagline {
  margin: 0;
}

html.menu-open {
  overflow: hidden;
}

/* ---------- Hero ---------- */

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 72px var(--gutter) 88px;
}

/* ---------- Inhalt: Text links | Newsletter rechts ---------- */

.content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  text-align: left;
}

/* Senkrechte Linie zwischen Text und Newsletter */
.content {
  position: relative;
}

/* Hinter dem Text wird das Video weichgezeichnet – oben scharf, nach unten
   zunehmend unscharf. Die Ebene läuft über die volle Fensterbreite und
   scrollt mit dem Inhalt mit. Nach unten reicht sie bis unter den Footer
   (auch auf hohen Bildschirmen), .page schneidet sie am Seitenende ab. */
.content::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -200px;
  bottom: -100vh;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: rgba(6, 7, 8, 0.25);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 240px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 240px);
  pointer-events: none;
}

.content::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--line);
  transform-origin: top;
}

.content-text {
  padding-right: clamp(40px, 6vw, 80px);
}

.content .newsletter {
  padding-left: clamp(40px, 6vw, 80px);
}

.hero h1 {
  margin: 0 0 18px;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero h1 em {
  font-style: normal;
  color: var(--text-muted);
}

/* Jede Zeile ist eine Maske, aus der der Text nach oben herausfährt */
h1 .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

h1 .line > * {
  display: block;
}

.launch-date {
  margin: 0 0 32px;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.launch-date time {
  color: var(--text);
}

/* ---------- Countdown ---------- */

/* Spalten so breit wie ihr Inhalt, gleicher Abstand links und rechts jeder
   Trennlinie – egal ob 3 Ziffern (Tage) oder 2 */
.countdown {
  --cell-space: clamp(14px, 4vw, 56px);
  display: flex;
  justify-content: center;
  max-width: 100%;
  margin: 0 0 168px;
  padding: 0;
  list-style: none;
}

.countdown li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 4px var(--cell-space);
}

.countdown li:first-child {
  padding-left: 0;
}

.countdown li:last-child {
  padding-right: 0;
}

.countdown li {
  position: relative;
}

.countdown li + li::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--line);
}

.countdown .value {
  font-size: clamp(2.6rem, 11vw, 7.5rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.countdown .label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.countdown-done {
  margin: 0 0 168px;
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 0.04em;
}

/* ---------- Info ---------- */

.intro {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.75;
  text-wrap: pretty;
}

.intro p {
  margin: 0 0 14px;
}

.intro p:last-child {
  margin-bottom: 0;
}

.intro strong {
  color: var(--text);
  font-weight: 500;
}

/* ---------- Newsletter ---------- */

.newsletter {
  margin: 0;
}

.section-label {
  margin: 0 0 12px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.newsletter h2 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: -0.01em;
}

.newsletter-text {
  margin: 0 0 22px;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.field-row {
  display: flex;
  max-width: 420px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field);
  transition: border-color 0.2s;
}

.field-row:focus-within {
  border-color: var(--line-strong);
}

.field-row.is-invalid {
  border-color: var(--error);
}

.field-row input[type="email"] {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 20px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
}

.field-row input[type="email"]::placeholder {
  color: var(--text-faint);
}

.field-row input[type="email"]:focus {
  outline: none;
}

.btn {
  flex-shrink: 0;
  margin: 4px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font: inherit;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.15s var(--ease-out);
}

@media (hover: hover) {
  .btn:hover {
    background: #ffffff;
  }
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 18px;
  padding-left: 4px;
  text-align: left;
  color: var(--text-faint);
  font-size: 0.72rem;
  line-height: 1.55;
  cursor: pointer;
}

.consent input {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  accent-color: var(--text);
  cursor: pointer;
}

.consent a {
  color: var(--text-muted);
}

.honeypot {
  position: absolute;
  left: -9999px;
}

.form-status {
  margin: 16px 0 0;
  font-size: 0.88rem;
}

.form-status:empty {
  display: none;
}

.form-status.is-success {
  color: var(--success);
}

.form-status.is-error {
  color: var(--error);
}

/* ---------- Footer ----------
   Eine Zeile, vertikal mittig:
   Logo + Tagline   |   © Copyright   |   Impressum | Datenschutz
   ---------------------------------------------- */

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "brand copy nav";
  align-items: center;
  gap: 24px 32px;
  padding: 28px var(--gutter);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: #0c0d0f;
}

.footer-brand {
  grid-area: brand;
}

.footer-logo {
  display: block;
  width: fit-content;
  color: var(--text);
}

.footer-logo svg {
  display: block;
  width: 88px;
  height: auto;
  overflow: visible;
  fill: currentColor;
}

.brand-tagline {
  margin: 8px 0 0;
  white-space: nowrap;
  font-size: 0.56rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.footer-nav {
  grid-area: nav;
  display: flex;
  justify-self: end;
  font-size: 0.78rem;
  line-height: 1;
}

.footer-nav a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-nav a + a {
  margin-left: 18px;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.footer-nav a[aria-current="page"] {
  color: var(--text);
}

.footer-copy {
  grid-area: copy;
  justify-self: center;
  margin: 0;
  font-size: 0.72rem;
  line-height: 1;
  color: var(--text-faint);
}

@media (hover: hover) {
  .footer-nav a:hover {
    color: var(--text);
  }
}

/* ---------- Unterseiten (Impressum / Datenschutz) ----------
   Eyebrow + große Headline, darunter zwei Spalten:
   Inhaltsverzeichnis (sticky) | Inhalt
   ---------------------------------------------------------- */

.legal-page {
  background: #000;
}

.legal {
  flex: 1;
  width: 100%;
  padding: 72px var(--gutter) 120px;
}

.legal-head {
  margin-bottom: 88px;
}

.legal-eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 28px;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.legal-eyebrow::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--line-strong);
}

.legal h1 {
  margin: 0;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  hyphens: auto;
}

.legal-body {
  display: grid;
  grid-template-columns: minmax(200px, 5fr) 7fr;
  gap: 48px;
  align-items: start;
}

.legal-content {
  max-width: 720px;
}

.legal-toc {
  position: sticky;
  top: 32px;
}

.legal-toc ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-toc a {
  font-size: 0.9rem;
  color: var(--text-faint);
  text-decoration: none;
  transition: color 0.2s;
}

.legal-toc a.is-active {
  color: var(--text);
}

@media (hover: hover) {
  .legal-toc a:hover {
    color: var(--text);
  }
}

.legal-content section {
  scroll-margin-top: 32px;
}

.legal-content section + section {
  margin-top: 72px;
}

.legal h2 {
  margin: 0 0 24px;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.legal h3 {
  margin: 32px 0 10px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.legal p,
.legal li {
  color: var(--text-muted);
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.legal p {
  margin: 0 0 14px;
}

.legal-content ul {
  margin: 0 0 14px;
  padding-left: 18px;
}

.legal-content li + li {
  margin-top: 4px;
}

.legal strong {
  color: var(--text);
  font-weight: 500;
}

.legal-content a {
  color: var(--text);
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.legal-date {
  margin-top: 72px !important;
  font-size: 0.8rem;
  color: var(--text-faint) !important;
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.legal-page) {
    scroll-behavior: smooth;
  }
}

/* ---------- 404 ---------- */

.not-found-text {
  max-width: 520px;
  margin: 0 0 32px;
  color: var(--text-muted);
}

.btn-link {
  display: inline-flex;
  align-items: center;
  height: 44px;
  margin: 0;
  text-decoration: none;
}

/* ---------- Animationen ----------
   Ruhig und einmalig beim Laden. Nur transform/opacity (+ etwas Blur),
   bei „Bewegung reduzieren“ komplett aus.
   ------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  /* Startseite: Hintergrund zoomt langsam ein */
  .backdrop {
    animation: backdrop-in 2.6s var(--ease-out) both;
  }

  .site-header {
    animation: fade-in 1.2s var(--ease-out) 0.1s both;
  }

  /* Countdown: Ziffern werden aus leichter Unschärfe scharf */
  .countdown li {
    animation: rise-blur 1s var(--ease-out) both;
  }

  .countdown li:nth-child(1) { animation-delay: 0.25s; }
  .countdown li:nth-child(2) { animation-delay: 0.33s; }
  .countdown li:nth-child(3) { animation-delay: 0.41s; }
  .countdown li:nth-child(4) { animation-delay: 0.49s; }

  /* Trennlinien wachsen aus der Mitte */
  .countdown li + li::before {
    animation: grow-y 1s var(--ease-out) 0.6s both;
  }

  /* Wechselnde Ziffer rutscht sanft ein */
  .countdown .value.tick {
    animation: tick 0.9s var(--ease-out);
  }

  .launch-date {
    animation: fade-in 1.2s var(--ease-out) 0.1s both;
  }

  /* Headline: Zeile für Zeile aus der Maske */
  h1 .line > * {
    animation: line-up 1.2s var(--ease-mask) both;
  }

  .hero h1 .line:nth-child(1) > * { animation-delay: 0.6s; }
  .hero h1 .line:nth-child(2) > * { animation-delay: 0.7s; }

  .intro {
    animation: fade-up 1s var(--ease-out) 0.85s both;
  }

  .content::after {
    animation: fade-in 1.6s var(--ease-out) 0.6s both;
  }

  /* Spaltenlinie zieht sich von oben nach unten */
  .content::before {
    animation: grow-y 1.4s var(--ease-mask) 0.75s both;
  }

  .content .newsletter {
    animation: fade-up 1s var(--ease-out) 0.95s both;
  }

  .form-status:not(:empty) {
    animation: fade-up 0.5s var(--ease-out);
  }

  /* Rechtsseiten */
  .legal-eyebrow {
    animation: fade-in 1s var(--ease-out) 0.15s both;
  }

  .legal-eyebrow::before {
    transform-origin: left;
    animation: grow-x 1s var(--ease-mask) 0.15s both;
  }

  .legal h1 .line > * {
    animation-delay: 0.25s;
  }

  .legal-toc {
    animation: fade-in 1s var(--ease-out) 0.6s both;
  }

  /* Abschnitte blenden beim Scrollen ein (Klasse kommt aus main.js) */
  .js .legal-content section {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  }

  .js .legal-content section.is-visible {
    opacity: 1;
    transform: none;
  }

  @keyframes fade-in {
    from { opacity: 0; }
  }

  @keyframes fade-up {
    from { opacity: 0; transform: translateY(16px); }
  }

  @keyframes rise-blur {
    from { opacity: 0; transform: translateY(14px); filter: blur(8px); }
  }

  @keyframes line-up {
    from { transform: translateY(110%); }
  }

  @keyframes grow-y {
    from { transform: scaleY(0); }
  }

  @keyframes grow-x {
    from { transform: scaleX(0); }
  }

  @keyframes backdrop-in {
    from { opacity: 0; transform: scale(1.08); }
  }

  @keyframes tick {
    from { opacity: 0.35; }
  }
}

/* ---------- Tablet ---------- */

@media (max-width: 860px) {
  .content {
    grid-template-columns: 1fr;
  }

  .content::before {
    display: none;
  }

  .content-text {
    padding-right: 0;
  }

  .content .newsletter {
    margin-top: 56px;
    padding-top: 48px;
    padding-left: 0;
    border-top: 1px solid var(--line);
  }

  .site-footer {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand nav"
      "copy copy";
    gap: 20px 24px;
  }

  .footer-copy {
    justify-self: start;
  }
}

@media (max-width: 860px) {
  .legal-head {
    margin-bottom: 56px;
  }

  .legal-body {
    grid-template-columns: 1fr;
  }

  .legal-toc {
    display: none;
  }

  .legal-content section + section {
    margin-top: 56px;
  }
}

/* ---------- Mobil ---------- */

@media (max-width: 600px) {
  .site-nav {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .mobile-menu {
    display: flex;
  }

  /* Footer untereinander: Logo, darunter Impressum/Datenschutz, dann © */
  .site-footer {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "nav"
      "copy";
    gap: 0;
  }

  .brand-tagline {
    letter-spacing: 0.22em;
  }

  .footer-nav {
    justify-self: start;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 32px;
    font-size: 0.74rem;
  }

  .footer-copy {
    margin-top: 28px;
  }

  .footer-nav a + a {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }

  .site-header {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .logo svg {
    width: 84px;
  }

  .hero {
    padding-top: 104px;
    padding-bottom: 56px;
  }

  .launch-date {
    margin-bottom: 24px;
  }

  .countdown,
  .countdown-done {
    margin-bottom: 144px;
  }

  .content::after {
    top: -140px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 180px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 180px);
  }

  .legal {
    padding-top: 56px;
    padding-bottom: 80px;
  }

  .countdown li {
    gap: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .countdown .label {
    font-size: 0.56rem;
    letter-spacing: 0.14em;
  }

  .field-row,
  .field-row:focus-within,
  .field-row.is-invalid {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    border: 0;
    background: none;
  }

  .field-row input[type="email"] {
    flex: none;
    width: 100%;
    max-width: 300px;
    height: 40px;
    padding: 0 18px;
    font-size: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--field);
    transition: border-color 0.2s;
  }

  .field-row input[type="email"]:focus {
    border-color: var(--line-strong);
  }

  .field-row.is-invalid input[type="email"] {
    border-color: var(--error);
  }

  .field-row {
    max-width: none;
  }

  .btn {
    height: 36px;
    margin: 0;
    padding: 0 22px;
  }
}