@font-face {
        font-family: "Inter";
        src: url("fonts/InterVariable.woff2") format("woff2");
        font-style: normal;
        font-weight: 100 900;
        font-display: swap;
      }

      :root {
        color-scheme: dark;
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        background: #111114;
        color: #f7f5f2;
      }

      * {
        box-sizing: border-box;
      }

      body {
        min-width: 320px;
        min-height: 100vh;
        margin: 0;
      }

      main {
        position: relative;
        display: grid;
        min-height: 100svh;
        align-items: start;
        overflow: hidden;
        isolation: isolate;
        padding: clamp(1.5rem, 4vw, 4rem) clamp(1.5rem, 8vw, 8rem) 4rem;
        background: #111114;
      }

      .phones {
        position: absolute;
        z-index: -1;
        inset: 0;
        overflow: hidden;
      }

      .phones::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(90deg, #111114 0%, rgb(17 17 20 / 92%) 25%, rgb(17 17 20 / 12%) 70%),
          linear-gradient(0deg, rgb(17 17 20 / 45%), transparent 45%);
      }

      .phone-photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 65% center;
      }

      .content {
        width: min(100%, 42rem);
        padding: 0;
        animation: arrive 700ms ease-out both;
      }

      .eyebrow {
        margin: 0 0 1.25rem;
        color: #c5c7cc;
        font-size: .78rem;
        font-weight: 650;
        letter-spacing: .16em;
        text-transform: uppercase;
      }

      h1 {
        max-width: 8ch;
        margin: 0;
        font-size: clamp(3.5rem, 9vw, 7.5rem);
        font-weight: 560;
        line-height: .98;
      }

      .availability {
        max-width: 34rem;
        margin: 1.75rem 0 2rem;
        color: #d4d4d8;
        font-size: clamp(1rem, 1.5vw, 1.125rem);
        line-height: 1.7;
        text-wrap: pretty;
      }

      .btn.apple-button {
        display: inline-flex;
        gap: .6rem;
        min-height: 3rem;
        height: auto;
        max-width: 100%;
        padding: .85rem 1.4rem;
        border: 0;
        border-radius: 999px;
        background: #0071e3;
        color: #fff;
        font: inherit;
        font-size: .95rem;
        font-weight: 500;
        white-space: normal;
        text-align: center;
        text-decoration: none;
        transition: background-color 160ms ease;
      }

      .btn.apple-button:hover { background: #0077ed; }
      .btn.apple-button:focus-visible {
        outline: 3px solid #a6d2ff;
        outline-offset: 4px;
      }
      .apple-button svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }

      .accent {
        color: #c5c7cc;
      }

      @keyframes arrive {
        from {
          opacity: 0;
          transform: translateY(1rem);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @media (max-width: 680px) {
        main {
          align-items: start;
          min-height: auto;
          padding: 1.25rem 1.25rem 4.5rem;
        }

        .phones::after {
          background:
            linear-gradient(0deg, #111114 0%, rgb(17 17 20 / 92%) 50%, rgb(17 17 20 / 82%) 100%);
        }

        .phone-photo {
          height: 72svh;
          object-position: 60% center;
        }

        h1 {
          font-size: clamp(2.25rem, 10vw, 3rem);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: .01ms !important;
          animation-iteration-count: 1 !important;
        }
      }

      .site-footer { padding: 2.5rem clamp(1.5rem, 8vw, 8rem); border-top: 1px solid #303034; color: #a1a1aa; font-size: .78rem; line-height: 1.7; }
      .site-footer p { max-width: 70rem; margin: 0 0 1rem; }
      .site-footer a, .legal-content a { color: #a6d2ff; text-decoration: underline; text-underline-offset: .2em; }
      .site-footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
      .product-heading { margin: 1.5rem 0 0; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 650; line-height: 1.2; text-wrap: balance; }
      .legal-content { max-width: 52rem; margin: auto; padding: 4rem 1.5rem; line-height: 1.8; }
      .legal-content h1 { max-width: none; font-size: clamp(2rem, 6vw, 3rem); line-height: 1.2; }
      .legal-content h2 { margin: 2rem 0 .75rem; font-size: 1.25rem; font-weight: 600; }
      .legal-content p { margin: 1rem 0; }

.cookie-dialog {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: none;
  max-height: min(70svh, 32rem);
  overflow: auto;
  margin: 0;
  padding: 1.5rem clamp(1.5rem, 6vw, 6rem);
  border: 0;
  border-top: 1px solid #d2d2d7;
  border-radius: 0;
  background: #f5f5f7;
  color: #1d1d1f;
  color-scheme: light;
  font: inherit;
  box-shadow: 0 -8px 32px rgb(0 0 0 / 12%);
  z-index: 100;
}
.cookie-dialog:not([hidden]) { display: flex; align-items: center; gap: 2rem; }
.cookie-copy { flex: 1; max-width: 52rem; }
.cookie-dialog h2 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 600; letter-spacing: -.02em; }
.cookie-dialog p { margin: 0; font-size: .85rem; line-height: 1.65; color: #515154; }
.cookie-dialog a { color: #0066cc; text-decoration: underline; text-underline-offset: .15em; }
.cookie-actions { display: flex; gap: .75rem; flex-shrink: 0; }
.cookie-actions .cookie-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .7rem 1.3rem;
  border: 1px solid #0071e3; border-radius: 999px;
  background: #0071e3; color: #fff;
  font: inherit; font-size: .85rem; font-weight: 500;
  cursor: pointer; transition: background-color 160ms ease;
}
.cookie-actions .cookie-button:hover { background: #0077ed; }
.cookie-actions .cookie-button:focus-visible, .cookie-dialog a:focus-visible { outline: 3px solid #0066cc; outline-offset: 4px; }
@media (max-width: 900px) {
  .cookie-dialog:not([hidden]) { flex-direction: column; align-items: stretch; gap: 1rem; }
  .cookie-actions { flex-wrap: wrap; }
  .cookie-actions .cookie-button { flex: 1; }
}
.cookie-settings { border: 0; padding: 0; background: transparent; color: #a6d2ff; font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.cookie-settings:focus-visible { outline: 2px solid #a6d2ff; outline-offset: 4px; }

.cookie-actions .cookie-secondary { background: transparent; color: #1d1d1f; border-color: #86868b; }
.cookie-actions .cookie-secondary:hover { background: #e8e8ed; }
.cookie-options { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #d2d2d7; }
.cookie-options[hidden] { display: none; }
.cookie-option { display: flex; gap: .75rem; align-items: flex-start; margin: 1rem 0; font-size: .85rem; line-height: 1.6; }
.cookie-option input { width: 1.1rem; height: 1.1rem; margin-top: .25rem; accent-color: #0071e3; }
.cookie-dialog h2 { display: flex; align-items: center; gap: .5rem; }
.cookie-dialog h2 svg { width: 1.1rem; height: 1.1rem; color: #6e6e73; }
.site-footer .domain-sale { margin: 1.5rem 0 0; font-size: .7rem; color: #a1a1aa; }
.site-footer .domain-sale a { color: inherit; }
.privacy-icon svg { width: 1.75rem; height: 1.75rem; margin-bottom: 1rem; color: #c5c7cc; }

#cookie-banner[hidden] { display: none !important; }

.launch-dates { margin-top: 1.25rem; color: #d4d4d8; font-size: clamp(1rem, 1.8vw, 1.25rem); line-height: 1.65; }
.launch-dates p { margin: 0; }
.launch-source { display: inline-block; margin-top: .5rem; color: #a6d2ff; font-size: .75rem; text-decoration: underline; text-underline-offset: .2em; }

.phones .phone-photo { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease-in-out; }
.phones .phone-photo.is-active { opacity: 1; }
.phones::after { z-index: 1; }
.slideshow-controls { position: absolute; right: clamp(1.5rem, 4vw, 4rem); bottom: 1.5rem; display: flex; gap: .75rem; }
.slideshow-controls button { padding: .6rem .9rem; border: 1px solid rgb(255 255 255 / 25%); border-radius: 999px; background: rgb(17 17 20 / 75%); color: #f5f5f7; font: inherit; font-size: .72rem; cursor: pointer; }
.slideshow-controls button:hover { background: #303034; }
.slideshow-controls button:focus-visible { outline: 2px solid #a6d2ff; outline-offset: 3px; }
@media (max-width: 680px) { .slideshow-controls { bottom: .75rem; right: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .phones .phone-photo { transition: none; } }

.eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.badge.arrival-badge { padding: .3rem .65rem; border: 1px solid rgb(197 199 204 / 35%); border-radius: 999px; background: rgb(197 199 204 / 12%); color: #e5e5e7; font-size: .65rem; font-weight: 600; line-height: 1.2; letter-spacing: .08em; }

.product-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .9rem; }
.btn.duo-more { display: inline-flex; align-items: center; gap: .5rem; height: auto; min-height: 3rem; max-width: 100%; padding: .85rem 1.2rem; border: 1px solid #81858d; border-radius: 999px; background: rgb(17 17 20 / 55%); color: #e5e5e7; font: inherit; font-size: .9rem; white-space: normal; text-align: center; text-decoration: none; }
.btn.duo-more:hover { background: #303034; }
.btn.duo-more:focus-visible { outline: 3px solid #a6d2ff; outline-offset: 4px; }

.product-actions { margin-top: 1.25rem; }
@media (max-width: 680px) {
  .content { width: 100%; }
  .eyebrow { margin-bottom: .75rem; font-size: .8rem; }
  .product-heading { margin-top: .9rem; font-size: clamp(1.65rem, 6.8vw, 2rem); color: #f7f5f2; }
  .product-actions { flex-direction: column; align-items: stretch; gap: .6rem; margin-top: 1rem; }
  .product-actions .btn { width: 100%; justify-content: center; min-height: 48px; font-size: 1rem; padding: .75rem 1rem; }
  .launch-dates { margin-top: 1rem; font-size: 1rem; line-height: 1.55; }
  .launch-source { font-size: .8rem; }
  .availability { margin: .9rem 0 0; font-size: 1rem; line-height: 1.55; }
  .site-footer { padding: 1.75rem 1.25rem; font-size: .85rem; color: #b8b8c0; }
  .cookie-dialog { padding: 1rem 1.25rem max(1rem, env(safe-area-inset-bottom)); }
  .cookie-dialog p { font-size: .85rem; line-height: 1.5; }
  .cookie-actions { gap: .5rem; }
  .cookie-actions .cookie-button { padding: .65rem .8rem; font-size: .85rem; }
}

/* Atalho da FAQ junto ao badge, mantendo o estilo dos botões existentes. */
.btn.duo-more.faq-shortcut { min-height: 44px; padding: .6rem 1rem; font-size: .85rem; font-weight: 500; letter-spacing: normal; text-transform: none; }

/* Destaque do título principal: 50% maior em desktop e mobile. */
h1#hello { font-size: clamp(5.25rem, 13.5vw, 11.25rem); }
@media (max-width: 680px) {
  h1#hello { font-size: clamp(3.375rem, 15vw, 4.5rem); }
}

/* Mantém o nome do produto inteiro na mesma linha. */
h1#hello { max-width: none; white-space: nowrap; font-size: clamp(5.25rem, 12vw, 8.75rem); }
@media (max-width: 680px) {
  h1#hello { font-size: clamp(2.75rem, 13.5vw, 4.5rem); }
}