/* ==========================================================================
   beta.css — LumaTake beta / early-access landing page.
   Layers on top of styles.css (tokens, base body, buttons, .mono, reveal).
   Hero composition mirrors the supplied centered reference with LumaTake
   colors while using the main site navbar system.
   ========================================================================== */

:root {
  --beta-shell: 1180px;
}

body.beta {
  /* ===== ACCENT UNDER TEST — swap these 6 lines to test a color ===== */
  --accent: #0A84FF;          /* Apple System Blue */
  --accent-rgb: 10 132 255;   /* same color as channels — drives every glow/tint */
  --accent-pressed: #0a6fd6;  /* ~12% darker, used on :active */
  --accent-bright: #3d9bff;   /* lighter top of the button gradient + hovers */
  --accent-text: #6cb4ff;     /* light tint: pill text, kickers, card icons */
  --accent-pill: #cfe4ff;     /* very light tint: highlighted-word pill background */
  /* ================================================================== */

  /* derived — leave alone */
  --hero-blue: var(--accent-pill);
  --hero-blue-text: var(--accent);
  --beta-accent-soft: rgb(var(--accent-rgb) / 0.15);
  --beta-accent-line: rgb(var(--accent-rgb) / 0.36);
  --beta-accent-text: var(--accent-text);

  background:
    radial-gradient(120% 78% at 50% -6%, rgb(var(--accent-rgb) / 0.08), transparent 58%),
    linear-gradient(180deg, rgba(18, 18, 18, 0.9) 0, rgba(0, 0, 0, 0) 720px),
    #000;
}

body.beta .nav-download:hover {
  background: var(--accent-bright);
}

body.beta::before,
body.beta::after {
  display: none;
}

/* Keep every button on the beta page pill-shaped, including the shared site-header CTA. */
body.beta .nav-download,
body.beta .mobile-menu-download {
  border-radius: 999px;
}

/* Pill-shaped hover/active background on the nav links too. */
body.beta .nav-links a {
  border-radius: 999px;
}

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

.beta-hero {
  position: relative;
  overflow: hidden;
  padding: 152px 20px 0;
}

/* .beta-hero-glow {
  position: absolute;
  top: -140px;
  left: 50%;
  z-index: 0;
  width: min(1600px, 132vw);
  height: 1180px;
  pointer-events: none;
  transform: translateX(-50%);
  background:
    radial-gradient(39% 42% at 50% 40%, rgba(73, 184, 224, 0.5), transparent 66%),
    radial-gradient(30% 34% at 26% 52%, rgba(98, 200, 238, 0.3), transparent 68%),
    radial-gradient(32% 38% at 76% 56%, rgba(255, 255, 255, 0.28), transparent 68%),
    radial-gradient(64% 52% at 50% 16%, rgba(59, 161, 201, 0.16), transparent 70%);
  filter: blur(36px) saturate(122%);
  opacity: 0.95;
  animation: betaGlowDrift 15s ease-in-out infinite alternate;
} */

/* faint sheen across the top, so the dark canvas reads as "screen" not "void" */
.beta-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 720px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.06), transparent 80%);
}

.beta-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1390px;
  margin: 0 auto;
  text-align: center;
}

/* Version / beta announcement pill */
.beta-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 43px;
  padding: 0 16px 0 7px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  background: #252525;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 4px rgba(255, 255, 255, 0.015),
    0 8px 22px rgba(0, 0, 0, 0.34);
  color: #ffffff;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: border-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.beta-badge:hover {
  border-color: var(--beta-accent-line);
  transform: translateY(-1px);
}

.beta-badge-tag {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--hero-blue);
  color: var(--hero-blue-text);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.beta-badge svg {
  width: 17px;
  height: 17px;
  color: #b6b6b6;
}

.beta-title {
  display: grid;
  justify-items: center;
  gap: 16px;
  margin: 40px 0 0;
  color: #ffffff;
  font-size: clamp(40px, 5.05vw, 96px);
  font-weight: 720;
  letter-spacing: -0.04em;
  line-height: 0.94;
}

.beta-title-line {
  display: block;
  white-space: nowrap;
}

.beta-title-line-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.24em;
}

.beta-title-tail {
  display: inline-flex;
  align-items: center;
  gap: 0.22em;
  white-space: nowrap;
}

/* Highlighted word — the "recorder" pill from the reference, recoloured. */
.beta-mark {
  display: inline-flex;
  align-items: center;
  min-height: 1.06em;
  padding: 0 0.36em 0.07em;
  border-radius: 0.51em;
  background: var(--hero-blue);
  color: var(--hero-blue-text);
  letter-spacing: -0.054em;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.16);
}

.beta-os {
  display: inline-flex;
  align-items: center;
  gap: 0.23em;
  white-space: nowrap;
}

.beta-finder {
  width: 1.08em;
  height: 1.08em;
  flex: none;
  margin: -0.02em -0.03em -0.04em 0;
  border-radius: 0.16em;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.44));
  transform: rotate(7.5deg);
  transform-origin: 50% 54%;
}

.beta-subhead {
  max-width: 720px;
  margin: 28px auto 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(16px, 1.18vw, 20px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.5;
  text-wrap: pretty;
}

.beta-subhead strong {
  color: var(--text-1);
  font-weight: 640;
}

.beta-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 84px;
}

.beta-hero-actions .button {
  justify-content: center;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 15px;
}

.beta-hero-actions .button-primary {
  background: linear-gradient(180deg, var(--accent-bright), var(--accent));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 0 4px rgb(var(--accent-rgb) / 0.13),
    0 18px 44px rgb(var(--accent-rgb) / 0.26);
}

.beta-hero-actions .button-secondary {
  min-width: 244px;
  background: rgba(37, 37, 37, 0.92);
}

/* Social-proof row (gradient avatar stand-ins — swap for real tester photos) */
.beta-proof {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding: 7px 16px 7px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(18, 18, 18, 0.5);
}

.beta-avatars {
  display: inline-flex;
}

.beta-avatars span {
  width: 30px;
  height: 30px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  background: var(--g, linear-gradient(140deg, #3d9bff, #0a6fd6));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.beta-avatars span:first-child {
  margin-left: 0;
}

.beta-avatars span:nth-child(2) {
  --g: linear-gradient(140deg, #303030, #1a1a1a);
}

.beta-avatars span:nth-child(3) {
  --g: linear-gradient(140deg, #303030, #1a1a1a);
}

.beta-avatars span:nth-child(4) {
  --g: linear-gradient(140deg, #303030, #1a1a1a);
}

.beta-avatars span:nth-child(5) {
  --g: linear-gradient(140deg, #303030, #1a1a1a);
}

.beta-proof p {
  margin: 0;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.35;
  text-align: left;
}

.beta-proof strong {
  color: var(--text-1);
  font-weight: 650;
}

/* ---------- Tilted product shot ---------- */

.beta-shot {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 64px auto -2px;
  padding: 0 8px;
  perspective: 2000px;
}

/* Ambient brand-colored light the dark editor sits inside (Linear/Raycast move). */
.beta-shot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -10%;
  z-index: -1;
  width: 96%;
  height: 84%;
  pointer-events: none;
  transform: translateX(-50%);
  background:
    radial-gradient(56% 58% at 50% 26%, rgb(var(--accent-rgb) / 0.42), transparent 66%),
    radial-gradient(40% 50% at 78% 40%, rgba(255, 255, 255, 0.05), transparent 70%);
  filter: blur(52px);
}

.beta-shot-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 26px 26px 0 0;
  background: var(--surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgb(var(--accent-rgb) / 0.18),
    0 24px 70px rgb(var(--accent-rgb) / 0.16),
    0 50px 130px rgba(0, 0, 0, 0.62),
    0 8px 30px rgba(0, 0, 0, 0.45);
  transform: none;
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 66%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 66%, transparent 100%);
}

/* top-edge highlight so the frame catches the light */
.beta-shot-frame::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
}

.beta-shot-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-up);
}

.beta-shot-bar .traffic {
  display: inline-flex;
  gap: 7px;
}

.beta-shot-bar .traffic i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #3a3a3a;
}

.beta-shot-bar .traffic i:nth-child(1) {
  background: #ec6a5e;
}

.beta-shot-bar .traffic i:nth-child(2) {
  background: #777;
}

.beta-shot-bar .traffic i:nth-child(3) {
  background: #555;
}

.beta-shot-bar .title {
  flex: 1;
  color: var(--text-3);
  font-size: 12px;
  text-align: center;
}

.beta-shot-bar .rec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--record);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.05em;
}

.beta-shot-bar .rec i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--record);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
  animation: betaPulse 2.4s var(--ease-out) infinite;
}

.beta-shot-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Shared section scaffolding ---------- */

.beta-section {
  position: relative;
  z-index: 1;
  width: min(var(--beta-shell), 100%);
  margin: 0 auto;
  padding: 96px 20px;
}

.beta-section-head {
  max-width: 660px;
  margin: 0 auto 48px;
  text-align: center;
}

.beta-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 680;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.beta-section-head h2 {
  margin: 0 0 14px;
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 720;
  letter-spacing: -0.018em;
  line-height: 1.06;
  text-wrap: balance;
}

.beta-section-head p {
  margin: 0;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.6;
}

/* ---------- "What you get" cards ---------- */

.beta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.beta-card {
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 60%),
    var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 240ms var(--ease-out), transform 240ms var(--ease-out);
}

.beta-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-3px);
}

.beta-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border: 1px solid var(--beta-accent-line);
  border-radius: 11px;
  background: var(--beta-accent-soft);
  color: var(--beta-accent-text);
}

.beta-card-icon svg {
  width: 20px;
  height: 20px;
}

.beta-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 660;
  letter-spacing: -0.01em;
}

.beta-card p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.58;
}

/* ---------- "How it works" steps ---------- */

.beta-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  counter-reset: step;
}

.beta-step {
  position: relative;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--surface);
}

.beta-step .num {
  display: block;
  margin-bottom: 16px;
  color: var(--beta-accent-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.beta-step h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 650;
}

.beta-step p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.58;
}

/* ---------- Request form ---------- */

.beta-request {
  position: relative;
  z-index: 1;
  width: min(var(--beta-shell), 100%);
  margin: 0 auto;
  padding: 40px 20px 110px;
}

.beta-request-card {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  background: var(--surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 40px 120px rgba(0, 0, 0, 0.5);
}

.beta-request-pitch {
  position: relative;
  padding: 44px 40px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgb(var(--accent-rgb) / 0.16), transparent 56%),
    linear-gradient(180deg, var(--surface-up), var(--surface));
  border-right: 1px solid var(--border);
}

.beta-request-pitch h2 {
  margin: 16px 0 12px;
  font-size: 28px;
  font-weight: 720;
  letter-spacing: -0.018em;
  line-height: 1.08;
}

.beta-request-pitch>p {
  margin: 0 0 26px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.6;
}

.beta-assurances {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.beta-assurances li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: var(--text-1);
  font-size: 14px;
  line-height: 1.45;
}

.beta-assurances svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--green-track);
}

.beta-assurances span {
  color: var(--text-2);
}

/* form side */
.beta-form-side {
  padding: 40px;
}

.beta-form {
  display: grid;
  gap: 16px;
}

.beta-field {
  display: grid;
  gap: 7px;
}

.beta-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.beta-lbl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}

.beta-lbl .opt {
  color: var(--text-3);
  font-weight: 500;
}

.beta-input,
.beta-select {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-m);
  background: var(--bg);
  color: var(--text-1);
  font: inherit;
  font-size: 14px;
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
  appearance: none;
}

.beta-input::placeholder {
  color: var(--text-3);
}

.beta-input:focus,
.beta-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.20);
}

.beta-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2370737a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px;
  padding-right: 38px;
  cursor: pointer;
}

.beta-select option {
  color: #111;
}

/* Segmented radio (Mac chip) */
.beta-segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.beta-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 560;
  cursor: pointer;
  transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}

.beta-chip input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.beta-chip:hover {
  border-color: var(--text-3);
  color: var(--text-1);
}

.beta-chip:has(input:checked) {
  border-color: var(--accent);
  background: var(--beta-accent-soft);
  color: var(--beta-accent-text);
}

.beta-chip:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.20);
}

.beta-submit {
  width: 100%;
  min-height: 50px;
  margin-top: 4px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--text-1);
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 200ms var(--ease-out), transform 120ms var(--ease-out);
}

.beta-submit:hover {
  background: var(--accent-bright);
}

.beta-submit:active {
  background: var(--accent-pressed);
  transform: translateY(1px);
}

.beta-submit:disabled {
  opacity: 0.65;
  cursor: progress;
}

.beta-fineprint {
  margin: 2px 0 0;
  color: var(--text-3);
  font-size: 11.5px;
  line-height: 1.5;
  text-align: center;
}

.beta-form-error {
  margin: 0;
  padding: 11px 13px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: var(--radius-m);
  background: rgba(239, 68, 68, 0.08);
  color: #f5a3a3;
  font-size: 13px;
}

/* success state — [hidden] must win over the flex display below */
.beta-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 20px;
  text-align: center;
}

.beta-success[hidden],
[data-lf-form-wrap][hidden] {
  display: none !important;
}

.beta-success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--beta-accent-soft);
  box-shadow: inset 0 0 0 1px var(--beta-accent-line);
  color: var(--beta-accent-text);
}

.beta-success-mark svg {
  width: 26px;
  height: 26px;
  stroke-width: 2;
}

.beta-success h3 {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 700;
}

.beta-success p {
  max-width: 320px;
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- FAQ ---------- */

.beta-faq {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.beta-faq article {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--surface);
}

.beta-faq h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 650;
}

.beta-faq p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}

.beta-faq code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-high);
  font-size: 0.86em;
}

/* ---------- Footer ---------- */

.beta-footer {
  position: relative;
  z-index: 1;
  width: min(var(--beta-shell), 100%);
  margin: 0 auto;
  padding: 36px 20px 64px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.beta-footer .footer-brand {
  font-size: 13px;
}

.beta-footer p {
  margin: 0;
  color: var(--text-3);
  font-size: 12.5px;
}

.beta-footer nav {
  display: inline-flex;
  gap: 18px;
}

.beta-footer nav a {
  color: var(--text-2);
  font-size: 12.5px;
  transition: color 200ms var(--ease-out);
}

.beta-footer nav a:hover {
  color: var(--text-1);
}

/* ---------- Motion ---------- */

@keyframes betaPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

@keyframes betaGlowDrift {
  0% {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 0.82;
  }

  100% {
    transform: translateX(-50%) translateY(16px) scale(1.05);
    opacity: 1;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 920px) {

  .beta-grid,
  .beta-steps {
    grid-template-columns: 1fr;
  }

  .beta-request-card {
    grid-template-columns: 1fr;
  }

  .beta-request-pitch {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 720px) {
  .beta-hero {
    padding-top: 124px;
  }

  .beta-title {
    gap: 10px;
    font-size: clamp(38px, 9.5vw, 62px);
    line-height: 0.95;
  }

  .beta-title-line {
    white-space: normal;
  }

  .beta-title-line-bottom {
    flex-wrap: wrap;
    row-gap: 0.16em;
  }

  .beta-title-tail {
    justify-content: center;
  }

  .beta-faq {
    grid-template-columns: 1fr;
  }

  .beta-shot-frame {
    transform: rotateX(4deg);
  }
}

@media (max-width: 560px) {
  .beta-hero {
    padding-top: 86px;
  }

  .beta-title {
    gap: 8px;
    font-size: clamp(32px, 8.5vw, 42px);
  }

  .beta-title-line-bottom {
    display: grid;
    justify-items: center;
  }

  .beta-title-tail {
    gap: 0.18em;
    max-width: 100%;
  }

  .beta-mark {
    min-height: 1.03em;
    padding: 0 0.34em 0.07em;
  }

  .beta-badge {
    max-width: calc(100vw - 40px);
    min-height: 40px;
    height: auto;
    gap: 10px;
    padding: 5px 12px 5px 6px;
    font-size: 15px;
  }

  .beta-badge-tag {
    height: 28px;
    padding: 0 10px;
    font-size: 15px;
  }

  .beta-badge svg {
    width: 15px;
    height: 15px;
  }

  .beta-subhead {
    margin-top: 28px;
    font-size: 18px;
  }

  .beta-hero-actions {
    flex-direction: column;
    margin-top: 42px;
  }

  .beta-hero-actions .button {
    width: 100%;
  }

  .beta-field-row {
    grid-template-columns: 1fr;
  }

  .beta-request-pitch,
  .beta-form-side {
    padding: 30px 24px;
  }

  .beta-proof {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .beta-proof p {
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {

  .beta-badge-tag i,
  .beta-shot-bar .rec i,
  .beta-hero-glow {
    animation: none;
  }

  .beta-card:hover {
    transform: none;
  }
}