/* Temporary design-review variants. The rest of the landing page is unchanged. */
.hero-options-switcher { display: none; }
html[data-hero] .hero-options-switcher { position: fixed; z-index: 30; top: 110px; right: 32px; display: flex; align-items: center; gap: 5px; padding: 6px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(21,39,67,.9); box-shadow: 0 12px 28px rgba(8,19,38,.18); backdrop-filter: blur(14px); font: 12px/1 var(--sans); }
.hero-options-switcher span { padding: 8px 9px 8px 13px; color: rgba(255,255,255,.65); }
.hero-options-switcher a { padding: 9px 12px; border-radius: 999px; color: rgba(255,255,255,.8); }
.hero-options-switcher a:hover, .hero-options-switcher a[aria-current="page"] { background: #fff; color: #1d3557; }
html[data-hero] .hero { min-height: 830px; }
html[data-hero] .hero h1 { color: #fff; }
html[data-hero] .hero-copy > p { max-width: 580px; margin-bottom: 0; color: rgba(255,255,255,.82); }
html[data-hero] .hero-download { margin-top: 52px; }
html[data-hero] .hero .download-heading { margin-bottom: 16px; }
html[data-hero] .hero .download-heading > span:first-child { display: none; }
html[data-hero] .hero .featured-badge { height: 62px; width: 130px; }
html[data-hero] .hero .featured-laurels { width: 130px; height: 62px; }
html[data-hero] .hero .store-links { gap: 13px; }
html[data-hero] .hero .store-wrap { display: none; }
html[data-hero] .hero .store-button { height: 58px; min-width: 195px; border-radius: 15px; }
html[data-hero] .hero .store-apple { background: #fff; color: #1d3557; }
html[data-hero] .hero .qr-button { min-width: 174px; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.06); }
html[data-hero] .hero .qr-button strong { font-size: 18px; }
html[data-hero] .hero .qr-image { width: 42px; height: 42px; }

/* 01: quiet, direct, recognizably Relly. */
html[data-hero="clarity"] .hero { grid-template-columns: minmax(0,1.45fr) minmax(0,.75fr); gap: 75px; height: 840px; }
html[data-hero="clarity"] .hero-copy { position: relative; padding-top: 105px; }
html[data-hero="clarity"] .hero h1 { max-width: 700px; font: 700 66px/1.1 var(--serif); letter-spacing: -.038em; margin-bottom: 30px; }
html[data-hero="clarity"] .hero-copy > p { font: 18px/1.58 var(--sans); }
html[data-hero="clarity"] .hero .download-heading { position: absolute; top: 0; left: 0; }
html[data-hero="clarity"] .hero-phone { transform: translateY(22px); }

/* 02: more white space and a lighter, centered serif. */
html[data-hero="centered"] .hero { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 1120px; height: auto; padding-top: 75px; gap: 0; }
html[data-hero="centered"] .hero-copy { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0; text-align: center; }
html[data-hero="centered"] .hero h1 { max-width: 1050px; font: 400 80px/1.08 var(--serif); letter-spacing: -.046em; margin-bottom: 25px; }
html[data-hero="centered"] .hero-copy > p { max-width: 650px; font: 18px/1.55 var(--sans); }
html[data-hero="centered"] .hero-download { margin-top: 26px; }
html[data-hero="centered"] .hero .download-heading, html[data-hero="centered"] .hero .store-links { justify-content: center; }
html[data-hero="centered"] .hero-phone { margin-top: 50px; transform: scale(.86); transform-origin: center top; }

/* 03: a smaller headline and a much stronger product silhouette. */
html[data-hero="product"] .hero { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 25px; height: 890px; }
html[data-hero="product"] .hero::before { content: ''; position: absolute; z-index: -1; right: 25px; top: 112px; width: 590px; height: 590px; border-radius: 50%; background: radial-gradient(circle,rgba(138,163,215,.23),rgba(83,126,181,.08) 52%,transparent 72%); }
html[data-hero="product"] .hero-copy { position: relative; padding-top: 96px; }
html[data-hero="product"] .hero h1 { max-width: 590px; font: 700 58px/1.1 var(--serif); letter-spacing: -.035em; margin-bottom: 30px; }
html[data-hero="product"] .hero-copy > p { max-width: 485px; font: 18px/1.6 var(--sans); }
html[data-hero="product"] .hero .download-heading { position: absolute; top: 0; left: 0; }
html[data-hero="product"] .hero-phone { transform: scale(1.08) translateY(15px); filter: drop-shadow(0 32px 42px rgba(2,12,30,.36)); }
html[data-hero="product"] .hero::after { content: 'A quick voice note becomes a memory you can keep.'; position: absolute; right: 68px; bottom: 60px; max-width: 330px; padding: 17px 20px; border: 1px solid rgba(255,255,255,.25); border-radius: 14px; background: rgba(31,55,91,.82); color: #fff; font: italic 18px/1.3 var(--serif); text-align: center; }

@media (max-width: 767px) {
  html[data-hero] .hero-options-switcher { top: auto; bottom: 16px; left: 50%; right: auto; width: max-content; max-width: calc(100vw - 20px); transform: translateX(-50%); font-size: 10px; }
  .hero-options-switcher span { display: none; }
  .hero-options-switcher a { padding: 9px 8px; }
  html[data-hero] .hero { display: flex; flex-direction: column; gap: 25px; height: auto; min-height: 0; padding: 80px 0 65px; }
  html[data-hero] .hero h1 { font-size: clamp(40px,10vw,57px); }
  html[data-hero] .hero-copy > p { font-size: 15px; }
  html[data-hero] .hero .qr-button { display: none; }
  html[data-hero] .hero .store-links { justify-content: flex-start; }
  html[data-hero] .hero-phone { margin-top: 20px; transform: none; }
  html[data-hero="clarity"] .hero-copy, html[data-hero="product"] .hero-copy { padding-top: 82px; }
  html[data-hero="product"] .hero::before, html[data-hero="product"] .hero::after { display: none; }
  html[data-hero="centered"] .hero { padding-top: 95px; }
  html[data-hero="centered"] .hero h1 { font-size: clamp(42px,10vw,58px); }
  html[data-hero="centered"] .hero-copy { text-align: center; }
  html[data-hero="centered"] .hero .store-links { justify-content: center; }
  html[data-hero="centered"] .hero-phone { transform: none; margin-top: 30px; }
}