:root {
  --green-950: #0b2e25;
  --green-900: #103c30;
  --green-800: #174c3c;
  --green-700: #1f654f;
  --green-600: #287960;
  --gold-700: #9a7436;
  --gold-600: #b58945;
  --gold-500: #c7a45d;
  --cream-50: #fffdf8;
  --cream-100: #fbf4e9;
  --cream-200: #f0e3cf;
  --ink: #30433e;
  --muted: #7a7f78;
  --danger: #a53e3e;
  --success: #227459;
  --shadow-soft: 0 24px 70px rgba(59, 42, 17, .12);
  --shadow-card: 0 18px 45px rgba(54, 41, 22, .09);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 80% 10%, rgba(199,164,93,.13), transparent 28%),
    linear-gradient(125deg, #fffaf1 0%, #fffdf9 48%, #f8f0e4 100%);
  font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .17;
  background-image:
    linear-gradient(30deg, rgba(23,76,60,.08) 12%, transparent 12.5%, transparent 87%, rgba(23,76,60,.08) 87.5%),
    linear-gradient(150deg, rgba(23,76,60,.08) 12%, transparent 12.5%, transparent 87%, rgba(23,76,60,.08) 87.5%);
  background-size: 58px 102px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 70%);
  z-index: -3;
}
img { max-width: 100%; display: block; }
button, input { font: inherit; }
button { border: 0; }

.skip-link {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1000;
  transform: translateY(-140%);
  background: var(--green-900);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .2s;
}
.skip-link:focus { transform: translateY(0); }

.page-shell { position: relative; z-index: 1; }
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(470px, .82fr) minmax(650px, 1.18fr);
  direction: ltr;
}
.hero__visual,
.hero__content { direction: rtl; }
.hero__visual {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 68%, #fffaf1 99%);
  pointer-events: none;
  z-index: 4;
}
.hero__image-wrap {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .8s var(--ease);
  will-change: transform;
}
.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(.93) contrast(.98);
}
.hero__image-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 55% 28%, rgba(255,250,233,.12), transparent 35%);
  mix-blend-mode: screen;
}
.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  z-index: 5;
  opacity: .45;
  box-shadow: inset 0 0 25px rgba(255,255,255,.48), 0 20px 50px rgba(23,76,60,.18);
}
.hero__orb--one {
  width: 72px;
  height: 72px;
  right: 13%;
  top: 17%;
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(199,164,93,.15));
  animation: float-orb 7s ease-in-out infinite;
}
.hero__orb--two {
  width: 30px;
  height: 30px;
  left: 13%;
  top: 54%;
  background: rgba(23,76,60,.13);
  animation: float-orb 5s ease-in-out infinite reverse;
}

.hero__content {
  position: relative;
  padding: 48px clamp(36px, 4vw, 84px) 40px clamp(30px, 3vw, 62px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  margin-bottom: 16px;
}
.brand__mark { width: 58px; height: 58px; }
.brand__latin {
  font-family: system-ui, sans-serif;
  font-size: clamp(28px, 2.25vw, 43px);
  color: var(--green-800);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
}
.brand__tagline { color: #6e6f69; font-size: 14px; margin-top: 8px; }

.intro { text-align: center; max-width: 760px; margin-inline: auto; }
.eyebrow {
  color: var(--gold-600);
  /* Clearance below keeps the headline's tashkeel marks from touching this line. */
  margin: 0 0 16px;
  font-size: clamp(18px, 1.5vw, 26px);
  font-weight: 700;
}
h1 {
  margin: 0;
  color: var(--green-800);
  font-family: "Noto Kufi Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: clamp(62px, 6vw, 112px);
  line-height: 1.28;
  letter-spacing: -.055em;
  text-shadow: 0 10px 25px rgba(23,76,60,.07);
}
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--gold-500);
  margin: 2px auto 12px;
}
.ornament span { display: block; width: 120px; height: 1px; background: linear-gradient(90deg, transparent, rgba(154,116,54,.55)); }
.ornament span:last-child { transform: scaleX(-1); }
.ornament b { font-size: 20px; }
.intro__copy {
  max-width: 670px;
  margin: 0 auto 20px;
  font-size: clamp(18px, 1.3vw, 24px);
  line-height: 1.95;
  color: #40524d;
}

.experience-grid {
  width: min(100%, 960px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(210px, .55fr) minmax(520px, 1.45fr);
  gap: 24px;
  align-items: stretch;
  direction: ltr;
}
.experience-grid > * { direction: rtl; }
.glass-card {
  position: relative;
  background: linear-gradient(145deg, rgba(255,253,248,.9), rgba(250,241,226,.82));
  border: 1px solid rgba(176,141,76,.26);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
}
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.7), transparent 32%);
}
.advisor-card {
  border-radius: var(--radius-lg);
  padding: 25px 22px 20px;
  text-align: center;
  transform-style: preserve-3d;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.advisor-card:hover { box-shadow: 0 26px 65px rgba(44, 53, 38, .16); }
.advisor-card__kicker {
  margin: 0 0 14px;
  color: var(--green-800);
  font-weight: 800;
  line-height: 1.65;
  font-family: "Noto Kufi Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}
.advisor-card__portrait-wrap {
  width: 142px;
  aspect-ratio: 1;
  margin: 0 auto;
  position: relative;
  display: grid;
  place-items: center;
}
.advisor-card__portrait {
  width: 128px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.95);
  outline: 2px solid rgba(199,164,93,.8);
  position: relative;
  z-index: 2;
  box-shadow: 0 14px 28px rgba(30,54,43,.18);
}
.advisor-card__halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(199,164,93,.35);
  animation: halo 3.5s ease-in-out infinite;
}
.advisor-card__heart { display: inline-block; color: var(--gold-600); margin-top: 10px; }
.advisor-card h2 { margin: 4px 0 5px; font-size: 20px; color: #243f36; }
.advisor-card p:last-child { margin: 0; color: #70736f; font-size: 12px; line-height: 1.8; }
.advisor-card__spark {
  position: absolute;
  border-radius: 50%;
  background: var(--gold-500);
  opacity: .24;
  filter: blur(.3px);
}
.advisor-card__spark--one { width: 8px; height: 8px; top: 34px; right: 26px; animation: sparkle 2.5s infinite; }
.advisor-card__spark--two { width: 5px; height: 5px; bottom: 40px; left: 20px; animation: sparkle 2.5s .8s infinite; }

.notify-card {
  border-radius: var(--radius-xl);
  padding: 28px;
  isolation: isolate;
}
.notify-card__beam {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  top: -130px;
  left: -70px;
  background: radial-gradient(circle, rgba(199,164,93,.19), transparent 70%);
  animation: breathe 6s ease-in-out infinite;
  z-index: -1;
}
.notify-card__head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.notify-card__label { margin: 0 0 2px; color: var(--gold-700); font-size: 12px; font-weight: 700; }
.notify-card h2 { margin: 0; font-size: clamp(18px, 1.5vw, 24px); color: var(--green-900); }
.smart-pulse { width: 42px; height: 42px; position: relative; flex: 0 0 auto; }
.smart-pulse i { position: absolute; inset: 0; border: 1px solid rgba(40,121,96,.4); border-radius: 50%; animation: smart-pulse 2.6s var(--ease) infinite; }
.smart-pulse i:nth-child(2) { animation-delay: .55s; }
.smart-pulse i:nth-child(3) { animation-delay: 1.1s; }
.smart-pulse::after { content: "✦"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--green-700); font-size: 17px; }

.channel-switch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  background: rgba(245,236,221,.72);
  border: 1px solid rgba(176,141,76,.18);
  padding: 7px;
  border-radius: 20px;
}
.channel-option {
  min-height: 48px;
  padding: 8px 12px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #66716d;
  background: transparent;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s;
}
.channel-option img { width: 20px; height: 20px; opacity: .78; }
.channel-option:hover { transform: translateY(-2px); color: var(--green-800); }
.channel-option.is-active {
  background: linear-gradient(135deg, var(--green-700), var(--green-900));
  color: #fff;
  box-shadow: 0 10px 26px rgba(23,76,60,.22);
}
.channel-option.is-active img { filter: brightness(0) invert(1); opacity: 1; }
.channel-option__check { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; }
.channel-explainer { color: #767d79; text-align: center; font-size: 13px; min-height: 25px; margin: 12px 0 12px; }
.fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { min-width: 0; transition: opacity .28s, transform .28s, max-width .35s; }
.field.is-hidden { display: none; }
.field label { display: block; color: var(--green-900); font-size: 12px; font-weight: 700; margin: 0 6px 6px; }
.field__control { position: relative; }
.field__control > img { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 20px; color: var(--gold-700); opacity: .72; pointer-events: none; }
.field input {
  width: 100%;
  min-height: 54px;
  border: 1px solid rgba(137,110,65,.32);
  background: rgba(255,253,248,.78);
  color: var(--green-950);
  border-radius: 16px;
  padding: 12px 47px 12px 42px;
  outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.field input::placeholder { color: #a3a19b; }
.field input:focus { border-color: var(--gold-500); background: #fffdfa; box-shadow: 0 0 0 4px rgba(199,164,93,.13); }
.field__state { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: #d8c9ae; transition: background .2s, box-shadow .2s; }
.field.is-valid .field__state { background: var(--success); box-shadow: 0 0 0 4px rgba(34,116,89,.12); }
.field.is-invalid .field__state { background: var(--danger); box-shadow: 0 0 0 4px rgba(165,62,62,.12); }
.field.is-invalid input { border-color: rgba(165,62,62,.55); }
.field__message { display: block; min-height: 18px; color: var(--danger); font-size: 11px; margin: 4px 6px 0; }

.submit-button {
  width: 100%;
  min-height: 56px;
  margin-top: 12px;
  border-radius: 17px;
  color: #fff8e7;
  background: linear-gradient(110deg, var(--green-900), var(--green-700), var(--green-900));
  background-size: 220% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 800;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(23,76,60,.24);
  transition: transform .2s var(--ease), box-shadow .25s, opacity .25s;
  animation: gradient-flow 8s linear infinite;
}
.submit-button img { width: 22px; filter: brightness(0) invert(1); }
.submit-button:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(23,76,60,.29); }
.submit-button:active { transform: translateY(0) scale(.99); }
.submit-button:disabled { opacity: .65; cursor: wait; }
.submit-button__shine { position: absolute; top: -40%; left: -20%; width: 24%; height: 180%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); transform: rotate(18deg); animation: shine 4.5s ease-in-out infinite; }
.privacy-note { display: flex; justify-content: center; align-items: center; gap: 7px; color: #8a8b85; font-size: 11px; margin-top: 12px; }
.privacy-note img { width: 17px; opacity: .75; }

/* Anti-spam honeypot: visually removed, skipped by keyboard and screen readers. */
.hp-field { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; }

.values {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 26px max(6vw, 45px);
  color: #fffaf0;
  background:
    radial-gradient(circle at 15% 0%, rgba(199,164,93,.17), transparent 30%),
    linear-gradient(115deg, #113c30, #174c3c 55%, #0e392d);
  box-shadow: 0 -16px 48px rgba(13,55,44,.12);
  overflow: hidden;
}
.values::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .14;
  background-image: radial-gradient(circle at 1px 1px, #d9bc7d 1px, transparent 0);
  background-size: 30px 30px;
  pointer-events: none;
}
.value-item {
  z-index: 1;
  min-height: 102px;
  padding: 10px 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border-inline-start: 1px solid rgba(236,213,169,.21);
}
.value-item:first-child { border-inline-start: 0; }
.value-item__icon {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border: 1px solid rgba(230,199,136,.68);
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #dfbd78;
  font-size: 27px;
  transform: rotate(2deg);
  transition: transform .35s var(--ease), background .35s;
}
.value-item:hover .value-item__icon { transform: rotate(-5deg) translateY(-4px); background: rgba(255,255,255,.06); }
.value-item h2 { margin: 0 0 5px; font-size: 16px; color: #f4d99d; }
.value-item p { margin: 0; font-size: 12px; line-height: 1.8; color: rgba(255,255,255,.8); }

.ambient-network { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; }
.network-node { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: rgba(40,121,96,.32); box-shadow: 0 0 18px rgba(40,121,96,.35); animation: network-float linear infinite; }
.network-node::after { content: ""; position: absolute; width: var(--link, 80px); height: 1px; top: 2px; right: 2px; transform-origin: right center; transform: rotate(var(--angle, 35deg)); background: linear-gradient(90deg, rgba(40,121,96,.2), transparent); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.toast {
  position: fixed;
  left: 28px;
  bottom: 28px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(390px, calc(100vw - 32px));
  padding: 15px 17px;
  border-radius: 18px;
  color: #fff;
  background: rgba(16,60,48,.94);
  border: 1px solid rgba(231,203,147,.3);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 55px rgba(16,60,48,.3);
  transform: translateY(150%);
  opacity: 0;
  transition: transform .55s var(--ease), opacity .55s;
}
.toast.is-open { transform: translateY(0); opacity: 1; }
.toast__icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #c7a45d; color: #103c30; font-weight: 900; }
.toast--error { background: rgba(96,34,34,.94); border-color: rgba(220,150,150,.35); box-shadow: 0 24px 55px rgba(96,34,34,.3); }
.toast--error .toast__icon { background: #d9a3a3; color: #5d1f1f; }
.toast strong, .toast span { display: block; }
.toast strong { font-size: 14px; }
.toast span { font-size: 11px; opacity: .8; margin-top: 3px; }

@keyframes float-orb { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes halo { 0%,100% { transform: scale(.92); opacity: .25; } 50% { transform: scale(1.08); opacity: .72; } }
@keyframes sparkle { 0%,100% { transform: scale(.5); opacity: .15; } 50% { transform: scale(1.3); opacity: .65; } }
@keyframes breathe { 0%,100% { transform: scale(.9); opacity: .55; } 50% { transform: scale(1.15); opacity: .9; } }
@keyframes smart-pulse { 0% { transform: scale(.35); opacity: 0; } 35% { opacity: 1; } 100% { transform: scale(1.15); opacity: 0; } }
@keyframes gradient-flow { to { background-position: -220% 0; } }
@keyframes shine { 0%,70% { transform: translateX(-300%) rotate(18deg); } 100% { transform: translateX(700%) rotate(18deg); } }
@keyframes network-float { from { transform: translate3d(0, 20px, 0) scale(.8); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { transform: translate3d(var(--drift, 40px), -110vh, 0) scale(1.2); opacity: 0; } }

@media (max-width: 1250px) {
  .hero { grid-template-columns: minmax(390px, .72fr) minmax(590px, 1.28fr); }
  .experience-grid { grid-template-columns: 205px 1fr; }
  .hero__content { padding-inline: 34px; }
  .values { grid-template-columns: repeat(2, 1fr); }
  .value-item:nth-child(3) { border-inline-start: 0; }
}

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero__visual { min-height: 520px; order: 2; }
  .hero__visual::after { background: linear-gradient(180deg, #fffaf1 0%, transparent 22%); }
  .hero__content { order: 1; padding: 34px 24px 40px; }
  .brand { align-self: center; }
  .experience-grid { grid-template-columns: minmax(190px, .55fr) minmax(460px, 1.45fr); }
}

@media (max-width: 760px) {
  .hero__visual { min-height: 410px; }
  .hero__image { object-position: 46% top; }
  .experience-grid { grid-template-columns: 1fr; }
  .advisor-card { display: grid; grid-template-columns: 92px 1fr; grid-template-areas: "portrait kicker" "portrait title" "portrait copy"; text-align: right; align-items: center; gap: 0 15px; }
  .advisor-card__portrait-wrap { grid-area: portrait; width: 88px; }
  .advisor-card__portrait { width: 78px; }
  .advisor-card__kicker { grid-area: kicker; margin: 0; }
  .advisor-card h2 { grid-area: title; }
  .advisor-card p:last-child { grid-area: copy; }
  .advisor-card__heart { display: none; }
  .fields-grid { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; padding-inline: 24px; }
  .value-item { border-inline-start: 0; border-top: 1px solid rgba(236,213,169,.18); justify-content: flex-start; }
  .value-item:first-child { border-top: 0; }
}

@media (max-width: 520px) {
  .hero__content { padding-inline: 16px; }
  h1 { font-size: clamp(55px, 22vw, 82px); }
  .intro__copy { font-size: 16px; }
  .notify-card { padding: 20px 15px; border-radius: 24px; }
  .channel-switch { grid-template-columns: 1fr; }
  .channel-option { min-height: 44px; }
  .advisor-card { padding-inline: 16px; }
  .brand__mark { width: 49px; height: 49px; }
  .brand__latin { font-size: 27px; }
  .toast { left: 16px; bottom: 16px; }
}

/* ------------------------------------------------------------------
   Height-aware desktop tiers.
   The hero column's natural content height exceeds short desktop
   viewports (768–1080px), which used to leave the CTA sliced at the
   fold. Each tier tightens vertical rhythm so the composition ends at
   the hero/values boundary instead of mid-element.
   ------------------------------------------------------------------ */

/* Tier 1 — moderately short desktops (≈1081–1180px tall). */
@media (min-width: 981px) and (max-height: 1180px) {
  .hero__content { padding-top: 32px; padding-bottom: 28px; }
  .brand { margin-bottom: 12px; }
  .eyebrow { line-height: 1.4; }
  h1 { font-size: clamp(56px, 5vw, 92px); line-height: 1.22; }
  .ornament { line-height: 1; margin-bottom: 10px; }
  .intro__copy { margin-bottom: 16px; line-height: 1.85; }
  .notify-card { padding: 24px; }
  .notify-card__head { margin-bottom: 14px; }
  .channel-explainer { margin: 9px 0; min-height: 20px; }
  .field input { min-height: 50px; }
  .submit-button { min-height: 54px; margin-top: 10px; }
  .privacy-note { margin-top: 10px; }
  .advisor-card__portrait-wrap { width: 128px; }
  .advisor-card__portrait { width: 114px; }
}

/* Tier 2 — common laptop/desktop heights (≤1080px: 1080, 900, 864, 768).
   Matches the density of the approved design reference. */
@media (min-width: 981px) and (max-height: 1080px) {
  .hero__content { padding-top: 24px; padding-bottom: 20px; }
  .brand { margin-bottom: 6px; }
  .brand__mark { width: 48px; height: 48px; }
  .brand__latin { font-size: clamp(26px, 1.9vw, 34px); }
  .eyebrow { font-size: clamp(16px, 1.2vw, 20px); }
  h1 { font-size: clamp(44px, 5.2vw, 84px); line-height: 1.26; }
  .ornament { margin: 2px auto 6px; }
  .ornament span { width: 90px; }
  .intro__copy { font-size: clamp(16px, 1vw, 18px); line-height: 1.75; margin-bottom: 8px; }
  .experience-grid { gap: 18px; }
  .advisor-card { padding: 18px 16px 14px; }
  .advisor-card__kicker { margin-bottom: 8px; }
  .advisor-card__portrait-wrap { width: 108px; }
  .advisor-card__portrait { width: 96px; }
  .advisor-card__heart { margin-top: 4px; }
  .advisor-card h2 { font-size: 18px; }
  .notify-card { padding: 20px; }
  .notify-card__head { margin-bottom: 8px; }
  .notify-card__label { font-size: 11px; }
  .notify-card h2 { font-size: clamp(16px, 1.15vw, 20px); }
  .smart-pulse { width: 36px; height: 36px; }
  .channel-switch { padding: 5px; }
  .channel-option { min-height: 42px; }
  .channel-explainer { margin: 8px 0; min-height: 18px; font-size: 12.5px; }
  .field label { margin-bottom: 4px; font-size: 11.5px; }
  .field input { min-height: 47px; padding-top: 10px; padding-bottom: 10px; }
  .field__message { min-height: 12px; font-size: 10.5px; }
  .submit-button { min-height: 52px; margin-top: 8px; }
  .privacy-note { margin-top: 8px; }
}

/* Narrower desktops: keep the channel labels on one line and the
   WhatsApp example fully visible inside the tighter inputs. */
@media (min-width: 981px) and (max-width: 1450px) {
  .channel-option { font-size: 13.5px; padding-inline: 8px; gap: 6px; }
  .field input::placeholder { font-size: 13px; }
}

/* Wide desktops with enough height: hero + values strip compose to
   exactly one viewport, as in the approved design reference.
   154px = values strip height (102px item + 2 × 26px padding). */
@media (min-width: 1250px) and (min-height: 881px) {
  .hero { min-height: calc(100vh - 154px); min-height: calc(100svh - 154px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .ambient-network { display: none; }
}