:root {
  --signal-cyan: #8fe9ff;
  --signal-violet: #b79cff;
}

.hero-signup {
  min-height: 82vh;
  padding-top: clamp(82px, 9vw, 118px);
  padding-bottom: clamp(72px, 8vw, 104px);
}

.hero-signup .hero-grid-signup {
  grid-template-columns: minmax(0, .92fr) minmax(420px, .78fr);
  gap: clamp(36px, 6vw, 82px);
}

.hero-signup h1,
.hero-vegas h1 {
  max-width: 820px;
  font-size: clamp(3.25rem, 7.4vw, 6.7rem);
  line-height: .91;
  letter-spacing: -.06em;
}

.hero-copy-tight {
  max-width: 650px;
  font-size: clamp(1.06rem, 1.65vw, 1.32rem);
}

.trust-rail-tight {
  margin-top: 28px;
}

.quiet-route {
  display: inline-flex;
  margin-top: 24px;
  color: rgba(247, 247, 248, .7);
  font-size: .85rem;
  font-weight: 800;
  text-decoration: none;
  transition: color .22s var(--ease), transform .22s var(--ease);
}

.quiet-route:hover,
.quiet-route:focus-visible {
  color: var(--accent-2);
  transform: translateX(3px);
}

.hero-spectral-field {
  position: absolute;
  z-index: -1;
  inset: 7% -8% 3%;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent 2%, #000 22%, #000 78%, transparent 98%);
}

.hero-spectral-field::before,
.hero-spectral-field::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: .18;
}

.hero-spectral-field::before {
  width: 34rem;
  height: 34rem;
  right: 4%;
  top: 8%;
  background: var(--accent);
  animation: spectral-drift-a 16s ease-in-out infinite;
}

.hero-spectral-field::after {
  width: 26rem;
  height: 26rem;
  left: 8%;
  bottom: 6%;
  background: var(--signal-violet);
  opacity: .08;
  animation: spectral-drift-b 20s ease-in-out infinite;
}

.hero-spectral-field span {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), rgba(255,92,124,.26), rgba(255,255,255,.06), transparent);
  box-shadow: 0 0 24px rgba(255, 92, 124, .08);
  opacity: .3;
  animation: signal-sweep 12s ease-in-out infinite;
}

.hero-spectral-field span:nth-child(1) { top: 26%; }
.hero-spectral-field span:nth-child(2) { top: 51%; animation-delay: -4s; }
.hero-spectral-field span:nth-child(3) { top: 74%; animation-delay: -8s; }

.hero-signup-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(24px, 3.2vw, 34px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 30px;
  background:
    radial-gradient(circle at 88% 5%, rgba(255, 92, 124, .16), transparent 18rem),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018) 46%, rgba(9,9,10,.82)),
    rgba(13, 13, 16, .88);
  box-shadow:
    0 36px 100px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(24px) saturate(135%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
}

.hero-signup-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -45%;
  background: conic-gradient(from 160deg, transparent 0 24%, rgba(255,92,124,.17) 31%, transparent 39% 68%, rgba(143,233,255,.08) 74%, transparent 82%);
  animation: premium-orbit 22s linear infinite;
}

.hero-signup-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 12%;
  width: 76%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  opacity: .28;
  animation: edge-breathe 5.5s ease-in-out infinite;
}

.signup-card-glow {
  position: absolute;
  z-index: -1;
  width: 18rem;
  aspect-ratio: 1;
  right: -7rem;
  top: -7rem;
  border-radius: 50%;
  background: rgba(255, 92, 124, .15);
  filter: blur(58px);
  animation: signup-glow 8s ease-in-out infinite;
  pointer-events: none;
}

.signup-signal {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(247,247,248,.42);
  font-size: .57rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.signup-signal strong {
  color: var(--accent-2);
  font-weight: 900;
}

.signup-signal strong::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(255, 92, 124, .55);
  animation: status-pulse 3.4s ease-in-out infinite;
}

.signup-mark {
  position: absolute;
  z-index: 0;
  right: -32px;
  top: 52px;
  opacity: .045;
  transform: rotate(8deg);
  pointer-events: none;
}

.signup-mark img {
  display: block;
  width: 210px;
  height: auto;
}

.signup-copy,
.hero-signup-card form {
  position: relative;
  z-index: 2;
}

.signup-copy h2 {
  max-width: 430px;
  margin: 9px 0 9px;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.signup-copy > p:last-child {
  max-width: 470px;
  margin: 0 0 22px;
  color: var(--muted);
  font-size: .96rem;
}

.waitlist-form-compact {
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.compact-choice-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 7px;
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}

.compact-choice-group legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.compact-choice-group label {
  min-height: 40px;
  justify-content: center;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.02);
}

.compact-choice-group label:has(input:checked) {
  border-color: rgba(255, 92, 124, .28);
  background: rgba(255, 92, 124, .09);
  color: var(--text);
}

.compact-check {
  min-height: auto;
  padding: 7px 4px;
}

.compact-legal {
  font-size: .76rem;
  opacity: .88;
}

.waitlist-form-compact .submit-button {
  min-height: 56px;
  position: relative;
  overflow: hidden;
  letter-spacing: .02em;
}

.waitlist-form-compact .submit-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 22%, rgba(255,255,255,.26) 48%, transparent 74%);
  transform: translateX(-130%);
  transition: transform .75s var(--ease);
  pointer-events: none;
}

.waitlist-form-compact .submit-button:hover::after,
.waitlist-form-compact .submit-button:focus-visible::after {
  transform: translateX(130%);
}

.proof-compact,
.privacy-manifesto-compact {
  padding-top: 76px;
  padding-bottom: 76px;
}

.section-heading-compact {
  max-width: 760px;
}

.section-heading-compact h2 {
  font-size: clamp(2.2rem, 4.7vw, 4.1rem);
}

.proof-grid-compact {
  gap: 12px;
  margin-top: 34px;
}

.proof-grid-compact .proof-card {
  min-height: 210px;
  padding: 24px;
}

.proof-grid-compact .proof-card h3 {
  font-size: clamp(1.35rem, 2.5vw, 1.95rem);
}

.privacy-manifesto-compact .manifesto-copy h2 {
  font-size: clamp(2.35rem, 5vw, 4.8rem);
}

.privacy-manifesto-compact .manifesto-points {
  margin-top: 22px;
}

.launch-strip-compact {
  margin-bottom: 48px !important;
}

.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(18px) scale(.992);
  transition:
    opacity .72s var(--ease),
    transform .72s var(--ease);
}

.motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.motion-ready .proof-grid [data-reveal]:nth-child(2) { transition-delay: 70ms; }
.motion-ready .proof-grid [data-reveal]:nth-child(3) { transition-delay: 140ms; }
.motion-ready .proof-grid [data-reveal]:nth-child(4) { transition-delay: 210ms; }

@keyframes spectral-drift-a {
  0%, 100% { transform: translate3d(0,0,0) scale(.94); opacity: .12; }
  50% { transform: translate3d(-5%, 8%, 0) scale(1.07); opacity: .21; }
}

@keyframes spectral-drift-b {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(9%, -7%, 0) scale(.9); }
}

@keyframes signal-sweep {
  0%, 100% { transform: translateX(-6%) scaleX(.92); opacity: .12; }
  50% { transform: translateX(6%) scaleX(1.05); opacity: .42; }
}

@keyframes premium-orbit {
  to { transform: rotate(360deg); }
}

@keyframes edge-breathe {
  0%, 100% { opacity: .16; transform: scaleX(.84); }
  50% { opacity: .5; transform: scaleX(1); }
}

@keyframes signup-glow {
  0%, 100% { transform: translate(0,0) scale(.92); opacity: .55; }
  50% { transform: translate(-24px, 24px) scale(1.08); opacity: .86; }
}

@media (max-width: 980px) {
  .hero-signup .hero-grid-signup {
    grid-template-columns: 1fr;
  }

  .hero-signup-card {
    max-width: 680px;
  }
}

@media (max-width: 680px) {
  .hero-signup h1,
  .hero-vegas h1 {
    font-size: clamp(3.05rem, 16vw, 5.2rem);
  }

  .hero-signup-card {
    padding: 22px;
    border-radius: 24px;
  }

  .signup-signal {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .signup-mark {
    right: -72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-spectral-field::before,
  .hero-spectral-field::after,
  .hero-spectral-field span,
  .hero-signup-card::before,
  .hero-signup-card::after,
  .signup-card-glow,
  .signup-signal strong::before {
    animation: none !important;
  }

  .motion-ready [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* PASS 4: SIGNUP-FIRST EXPERIENCE */
.hero-v4 {
  min-height: auto;
  padding: clamp(86px, 9vw, 122px) 0 76px;
  overflow: clip;
  text-align: center;
}

.hero-v4-intro {
  position: relative;
  z-index: 3;
  width: min(840px, 100%);
  margin: 0 auto 30px;
}

.hero-v4 .eyebrow {
  justify-content: center;
}

.hero-v4 h1 {
  margin: 18px auto 16px;
  max-width: 900px;
  font-size: clamp(3.35rem, 8vw, 7.15rem);
  line-height: .86;
  letter-spacing: -.067em;
}

.hero-v4 h1 span {
  position: relative;
  display: inline-block;
  color: var(--accent);
  text-shadow: 0 0 36px rgba(255,92,124,.16);
}

.hero-v4-copy {
  max-width: 720px;
  margin: 0 auto;
  color: #c6c6cd;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.55;
}

.v4-grid {
  position: absolute;
  z-index: -4;
  inset: 2% -12% 10%;
  background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 12%, rgba(0,0,0,.85) 48%, transparent 78%);
  transform: perspective(900px) rotateX(64deg) translateY(18%);
  transform-origin: center bottom;
  animation: v4-grid-shift 20s linear infinite;
  pointer-events: none;
}

.v4-aurora {
  position: absolute;
  z-index: -3;
  width: clamp(24rem, 44vw, 42rem);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(96px);
  pointer-events: none;
  opacity: .16;
}

.v4-aurora-a { top: 7%; left: -13%; background: var(--accent); animation: v4-aurora-a 15s ease-in-out infinite; }
.v4-aurora-b { right: -15%; top: 22%; background: #735cff; opacity: .08; animation: v4-aurora-b 19s ease-in-out infinite; }

.v4-scan {
  position: absolute;
  z-index: -2;
  left: 5%;
  right: 5%;
  top: 18%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), rgba(255,92,124,.4), rgba(255,255,255,.06), transparent);
  box-shadow: 0 0 38px rgba(255,92,124,.13);
  opacity: .36;
  animation: v4-scan 10s ease-in-out infinite;
  pointer-events: none;
}

.capture-stage {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  z-index: 4;
  width: min(760px, 100%);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 38px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 32px;
  background: radial-gradient(circle at 50% -30%, rgba(255,92,124,.18), transparent 48%), linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.018) 46%, rgba(7,7,9,.92)), rgba(12,12,15,.92);
  box-shadow: 0 44px 120px rgba(0,0,0,.46), 0 0 0 1px rgba(255,92,124,.035), inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter: blur(28px) saturate(145%);
  -webkit-backdrop-filter: blur(28px) saturate(145%);
  transform: perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}

.capture-stage:hover {
  border-color: rgba(255,92,124,.25);
  box-shadow: 0 48px 130px rgba(0,0,0,.5), 0 0 50px rgba(255,92,124,.055), inset 0 1px 0 rgba(255,255,255,.11);
}

.capture-stage::before {
  content: "";
  position: absolute;
  inset: -55%;
  background: conic-gradient(from 130deg, transparent 0 25%, rgba(255,92,124,.11) 31%, transparent 39% 64%, rgba(143,233,255,.055) 73%, transparent 80%);
  animation: premium-orbit 28s linear infinite;
  pointer-events: none;
}

.capture-stage::after {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
  opacity: .38;
  animation: edge-breathe 5s ease-in-out infinite;
}

.capture-stage > *:not(.capture-orbit) { position: relative; z-index: 2; }
.capture-orbit { position: absolute; z-index: 1; border: 1px solid rgba(255,92,124,.12); border-radius: 50%; pointer-events: none; }
.capture-orbit-a { width: 420px; height: 420px; right: -230px; top: -250px; animation: orbit-pulse 8s ease-in-out infinite; }
.capture-orbit-b { width: 320px; height: 320px; left: -210px; bottom: -220px; border-color: rgba(143,233,255,.08); animation: orbit-pulse 9s 1.3s ease-in-out infinite reverse; }

.capture-topline {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 13px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(247,247,248,.42);
  font-size: .57rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.capture-topline strong { color: var(--accent-2); font-weight: 900; }
.capture-topline strong::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px rgba(255,92,124,.55); animation: status-pulse 3s ease-in-out infinite; }

.capture-heading { text-align: center; }
.capture-heading h2 { margin: 7px 0 7px; font-size: clamp(2.15rem, 4vw, 3.4rem); line-height: .96; letter-spacing: -.05em; }
.capture-heading > p:last-child { margin: 0 0 20px; color: var(--muted); font-size: .94rem; }

.waitlist-form-v4 { gap: 12px; padding: 0; border: 0; background: transparent; box-shadow: none; text-align: left; }
.capture-methods { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; padding: 6px; border-radius: 14px; background: rgba(255,255,255,.025); }
.capture-methods legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.capture-methods label { min-height: 40px; justify-content: center; align-items: center; border: 1px solid transparent; background: rgba(255,255,255,.02); }
.capture-methods label:has(input:checked) { border-color: rgba(255,92,124,.3); background: rgba(255,92,124,.1); color: var(--text); box-shadow: 0 0 22px rgba(255,92,124,.045); }

.capture-input-row { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: end; }
.capture-input-row .field { min-width: 0; }
.capture-submit { min-width: 220px; min-height: 52px; border: 0; position: relative; overflow: hidden; }
.capture-submit::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.3) 48%, transparent 76%); transform: translateX(-140%); transition: transform .75s var(--ease); }
.capture-submit:hover::after, .capture-submit:focus-visible::after { transform: translateX(140%); }
.capture-options { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; align-items: start; }
.capture-options .check { min-height: auto; padding: 6px 2px; }
.capture-verification { margin-top: -2px; }

.capture-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.07); }
.capture-trust span { padding: 7px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(255,255,255,.018); color: rgba(247,247,248,.58); font-size: .62rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.vegas-route { position: relative; z-index: 4; display: inline-flex; gap: 8px; margin-top: 21px; color: rgba(247,247,248,.62); font-size: .84rem; font-weight: 800; text-decoration: none; }
.vegas-route:hover, .vegas-route:focus-visible { color: var(--accent-2); }

.v4-principles { padding: 74px 0; }
.v4-section-head { text-align: center; max-width: 760px; margin: 0 auto; }
.v4-section-head h2 { margin: 10px 0 0; font-size: clamp(2.3rem, 5vw, 4.6rem); line-height: .94; letter-spacing: -.055em; }
.v4-principle-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 36px; }
.v4-principle-grid article { min-height: 190px; padding: 23px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.034), rgba(255,255,255,.012)); transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.v4-principle-grid article:hover { transform: translateY(-5px); border-color: rgba(255,92,124,.23); box-shadow: 0 22px 48px rgba(0,0,0,.2); }
.v4-principle-grid article > span { color: var(--accent); font-size: .64rem; font-weight: 900; letter-spacing: .13em; }
.v4-principle-grid h3 { margin: 24px 0 8px; font-size: 1.25rem; letter-spacing: -.025em; }
.v4-principle-grid p { margin: 0; color: var(--muted); font-size: .9rem; }

.v4-privacy-callout { margin: 28px 0 48px; padding: clamp(34px, 6vw, 68px); border: 1px solid rgba(255,92,124,.2); border-radius: 32px; background: radial-gradient(circle at 88% 20%, rgba(255,92,124,.16), transparent 22rem), linear-gradient(145deg, rgba(255,92,124,.05), rgba(255,255,255,.012)), var(--surface); box-shadow: var(--shadow); }
.v4-privacy-callout h2 { max-width: 940px; margin: 12px 0 15px; font-size: clamp(2.5rem, 5.6vw, 5.2rem); line-height: .94; letter-spacing: -.058em; }
.v4-privacy-callout > p:not(.kicker) { max-width: 720px; color: var(--muted); }
.v4-privacy-callout > a { display: inline-flex; margin-top: 12px; color: var(--accent-2); font-weight: 800; text-decoration: none; }

.hero-vegas-v4 { display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,.72fr); gap: clamp(40px,7vw,92px); align-items: center; text-align: left; }
.hero-vegas-v4 .eyebrow { justify-content: flex-start; }
.hero-vegas-v4 h1 { margin-left: 0; font-size: clamp(3.5rem,8vw,7rem); }
.vegas-v4-intro > p:not(.eyebrow) { max-width: 680px; color: #c7c7ce; font-size: clamp(1.05rem,1.6vw,1.25rem); }
.vegas-v4-intro .button { margin-top: 20px; }
.vegas-signal-card { --tilt-x:0deg; --tilt-y:0deg; position: relative; min-height: 440px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 30px; background: radial-gradient(circle at 50% 45%, rgba(255,92,124,.13), transparent 44%), rgba(13,13,16,.76); box-shadow: 0 36px 100px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06); transform: perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition: transform .28s var(--ease); }
.vegas-signal-card picture, .vegas-signal-card img { position: relative; z-index: 2; display: block; width: min(75%,320px); height: auto; filter: drop-shadow(0 0 32px rgba(255,92,124,.12)); }
.vegas-signal-copy { position: absolute; top: 20px; left: 22px; right: 22px; z-index: 3; display: flex; justify-content: space-between; gap: 12px; color: rgba(247,247,248,.45); font-size: .56rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.vegas-signal-copy strong { color: var(--accent-2); }
.vegas-signal-stats { position: absolute; z-index: 3; left: 20px; right: 20px; bottom: 18px; display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.vegas-signal-stats span { padding: 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: rgba(9,9,10,.54); color: rgba(247,247,248,.55); font-size: .5rem; font-weight: 800; letter-spacing: .08em; text-align: center; }
.vegas-signal-stats b { display: block; margin-top: 2px; color: #f5f5f7; }
.vegas-v4-why { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 50px; padding: 78px 0; }
.vegas-v4-why h2 { margin: 12px 0 14px; font-size: clamp(2.5rem,5vw,4.6rem); line-height: .96; letter-spacing: -.05em; }
.vegas-v4-why > div > p:last-child { color: var(--muted); }
.vegas-v4-steps { display: grid; gap: 10px; }
.vegas-v4-steps article { display: grid; grid-template-columns: 42px 1fr; column-gap: 14px; padding: 19px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.018); }
.vegas-v4-steps article > span { grid-row: 1 / span 2; color: var(--accent); font-size: .67rem; font-weight: 900; }
.vegas-v4-steps p { margin: 3px 0 0; color: var(--muted); font-size: .86rem; }
.waitlist-vegas-v4 { padding-top: 78px; }

@keyframes v4-grid-shift { to { background-position: 48px 48px, 48px 48px; } }
@keyframes v4-aurora-a { 0%,100% { transform: translate3d(0,0,0) scale(.95); } 50% { transform: translate3d(18%,12%,0) scale(1.08); } }
@keyframes v4-aurora-b { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-16%,-8%,0) scale(.9); } }
@keyframes v4-scan { 0%,100% { transform: translateY(-40px); opacity:.16; } 50% { transform: translateY(340px); opacity:.52; } }

@media (max-width: 980px) {
  .v4-principle-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero-vegas-v4, .vegas-v4-why { grid-template-columns: 1fr; }
  .hero-vegas-v4 { text-align: center; }
  .hero-vegas-v4 .eyebrow { justify-content: center; }
  .hero-vegas-v4 h1 { margin-inline: auto; }
  .vegas-v4-intro > p:not(.eyebrow) { margin-inline: auto; }
  .vegas-signal-card { max-width: 620px; width: 100%; margin-inline: auto; }
}

@media (max-width: 680px) {
  .hero-v4 { padding-top: 72px; }
  .hero-v4 h1 { font-size: clamp(3.05rem,18vw,5rem); }
  .capture-stage { border-radius: 24px; padding: 22px 18px; }
  .capture-input-row { grid-template-columns: 1fr; }
  .capture-submit { width: 100%; min-width: 0; }
  .capture-options { grid-template-columns: 1fr; gap: 2px; }
  .v4-principle-grid { grid-template-columns: 1fr; }
  .v4-principle-grid article { min-height: 0; }
  .v4-privacy-callout { padding: 30px 22px; border-radius: 24px; }
  .vegas-signal-stats { grid-template-columns: 1fr; }
  .vegas-signal-stats span:nth-child(2), .vegas-signal-stats span:nth-child(3) { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .v4-grid, .v4-aurora, .v4-scan, .capture-stage::before, .capture-stage::after, .capture-topline strong::before { animation: none !important; }
  .capture-stage, .vegas-signal-card { transform: none !important; }
}


/* PASS 5: VISUAL RHYTHM AND CANONICAL CAPTURE */
/* PASS 5: visual rhythm and canonical capture layout */

.capture-stage {
  padding: clamp(32px, 4.8vw, 48px);
}

.v4-privacy-callout {
  padding-inline: clamp(42px, 6vw, 76px);
}

.capture-input-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.capture-submit {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  margin-top: 1px;
}

.capture-options {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.capture-option-row {
  width: 100%;
  min-height: 44px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 12px;
  background: rgba(255, 255, 255, .018);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.capture-option-row:has(input:checked) {
  border-color: rgba(255, 92, 124, .22);
  background: rgba(255, 92, 124, .045);
}

.vegas-route {
  display: flex;
  width: fit-content;
  justify-content: center;
  margin: 24px auto 0;
  text-align: center;
}

.capture-stage,
#why,
#why-vegas {
  scroll-margin-top: 112px;
}

.vegas-v4-why + .capture-stage {
  margin-top: 8px;
  margin-bottom: 72px;
}

@media (max-width: 680px) {
  .capture-stage {
    padding: 26px 22px;
  }

  .v4-privacy-callout {
    padding-inline: 28px;
  }

  .capture-option-row {
    padding: 10px !important;
  }
}


/* PASS 6: EXPLICIT INTERIOR BREATHING ROOM */
/* PASS 6: explicit interior breathing room and launch-reference cleanup */

/*
 * styles.css contains `section:not(.hero) { padding: 92px 0; }`, which has
 * higher selector specificity than the class-only padding rules used in the
 * prior passes. Target the actual section elements here so the intended
 * interior padding wins in the generated public bundle.
 */
main section.capture-stage {
  padding: clamp(42px, 5.2vw, 58px) clamp(38px, 5.4vw, 60px) clamp(32px, 4.2vw, 46px);
}

main > section.v4-privacy-callout {
  padding: clamp(48px, 6vw, 70px) clamp(44px, 6.4vw, 82px);
}

main section.capture-stage section.verification-step,
main section.capture-stage section.share-step {
  padding: 18px 28px;
}

main section.capture-stage .form-status:empty {
  display: none;
}

main section.capture-stage .form-status[data-state="error"],
main section.capture-stage .form-status[data-state="success"] {
  width: min(100%, 640px);
  min-height: 0;
  margin: 4px auto 0;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  background: rgba(13,13,16,.94);
  color: #f7f7f8;
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.55;
  text-align: left;
  box-shadow: 0 18px 54px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.045);
  scroll-margin-block: 120px;
}

main section.capture-stage .form-status[data-state="error"] {
  border-color: rgba(255,92,124,.52);
  background: linear-gradient(145deg, rgba(255,92,124,.12), rgba(13,13,16,.95));
  color: #ffd7df;
}

main section.capture-stage .form-status[data-state="success"] {
  border-color: rgba(123,231,165,.42);
  background: linear-gradient(145deg, rgba(123,231,165,.1), rgba(13,13,16,.95));
  color: #baf2cc;
}

main section.capture-stage .form-status:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,92,124,.1), 0 18px 54px rgba(0,0,0,.3);
}

main section.capture-stage[data-state="notice"] .capture-heading {
  display: none;
}

main section.capture-stage[data-state="notice"] .waitlist-form {
  margin-top: 8px;
}

main section.capture-stage .waitlist-form[data-state="notice"] > :not(.form-status) {
  display: none !important;
}

main section.capture-stage[data-state="notice"] .form-status {
  width: min(100%, 640px);
  margin-inline: auto;
  padding: clamp(24px, 5vw, 34px) clamp(20px, 4vw, 30px);
  font-size: clamp(1rem, 2.4vw, 1.12rem);
  text-align: center;
}

/*
 * Recovery is an editable correction state, never a terminal notice. Keep the
 * email and consent controls visible even if a validation/status transition
 * occurs while handling an expired magic-link attempt.
 */
main section.capture-stage[data-state="recovery"] .waitlist-form[data-state="recovery"] > .capture-input-row,
main section.capture-stage[data-state="recovery"] .waitlist-form[data-state="recovery"] > .capture-options {
  display: grid !important;
  visibility: visible;
  opacity: 1;
}

main section.capture-stage .capture-topline,
main section.capture-stage .capture-heading,
main section.capture-stage .waitlist-form-v4,
main section.capture-stage .capture-trust {
  width: 100%;
}

main > section.v4-privacy-callout > * {
  max-width: 940px;
}

.v4-privacy-callout {
  margin-bottom: 72px;
}

@media (max-width: 680px) {
  main section.capture-stage {
    padding: 30px 24px 22px;
  }

  main section.capture-stage section.verification-step,
  main section.capture-stage section.share-step {
    padding: 16px 20px;
  }

  main section.capture-stage .form-status[data-state="error"],
  main section.capture-stage .form-status[data-state="success"] {
    padding: 15px 16px;
    scroll-margin-block: 96px;
  }

  main > section.v4-privacy-callout {
    padding: 36px 28px;
  }
}

/* PASS 6.2: hard-stop flex/grid stretch and keep the capture card intrinsic. */
main section.capture-stage {
  height: fit-content !important;
  min-height: 0 !important;
  max-height: none !important;
  block-size: fit-content;
  min-block-size: 0;
  align-self: center;
  flex: 0 0 auto;
  padding-bottom: 20px !important;
}

main section.capture-stage .capture-trust {
  margin-top: 10px;
  padding-top: 10px;
  margin-bottom: 0;
}

main section.capture-stage .form-status[data-state="error"],
main section.capture-stage .form-status[data-state="success"] {
  margin-top: 2px;
}

@media (max-width: 680px) {
  main section.capture-stage {
    height: fit-content !important;
    min-height: 0 !important;
    padding-bottom: 18px !important;
  }

  main section.capture-stage .capture-trust {
    margin-top: 9px;
    padding-top: 9px;
  }
}

/* PASS 6.3 / P1 R13: make the accepted bundle itself authoritative.
 * Do not rely on a separate P1-only stylesheet for the card geometry. This
 * selector wins against the generic section padding and any parent stretch.
 */
main .hero-v4 > section.capture-stage {
  box-sizing: border-box !important;
  display: block !important;
  width: min(760px, 100%) !important;
  height: max-content !important;
  min-height: 0 !important;
  max-height: none !important;
  block-size: max-content !important;
  min-block-size: 0 !important;
  max-block-size: none !important;
  flex: none !important;
  align-self: center !important;
  padding: clamp(36px, 4.6vw, 50px) clamp(34px, 5vw, 56px) 16px !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  overflow-anchor: none !important;
}

main .hero-v4 > section.capture-stage .waitlist-form,
main .hero-v4 > section.capture-stage .turnstile-slot,
main .hero-v4 > section.capture-stage .form-status,
main .hero-v4 > section.capture-stage .capture-trust {
  overflow-anchor: none !important;
}

main .hero-v4 > section.capture-stage .verification-step[hidden],
main .hero-v4 > section.capture-stage .verification-recovery-step[hidden],
main .hero-v4 > section.capture-stage .share-step[hidden] {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

main .hero-v4 > section.capture-stage .capture-trust {
  margin: 9px 0 0 !important;
  padding: 9px 0 0 !important;
}

@media (max-width: 680px) {
  main .hero-v4 > section.capture-stage {
    padding: 26px 22px 14px !important;
  }

  main .hero-v4 > section.capture-stage .capture-trust {
    margin-top: 8px !important;
    padding-top: 8px !important;
  }
}


/* P1 R14: STRUCTURAL CAPTURE CARD GUARD */
/* P1 R14: structural capture-card layout guard.
 * The generated home page changes the nested capture shell from <section> to
 * <div>, so the generic page-section spacing rule can no longer inflate it.
 */
.hero-v4 {
  justify-content: flex-start !important;
  align-items: center !important;
}

.hero-v4 > .capture-stage {
  box-sizing: border-box !important;
  display: block !important;
  width: min(760px, 100%) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  block-size: auto !important;
  min-block-size: 0 !important;
  max-block-size: none !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  margin: 0 auto !important;
  padding: clamp(34px, 4.4vw, 46px) clamp(32px, 4.8vw, 52px) 14px !important;
  overflow: hidden !important;
  overflow-anchor: none !important;
}

.hero-v4 > .capture-stage .waitlist-form,
.hero-v4 > .capture-stage .turnstile-slot,
.hero-v4 > .capture-stage .form-status,
.hero-v4 > .capture-stage .capture-trust {
  overflow-anchor: none !important;
}

.hero-v4 > .capture-stage .capture-trust {
  margin: 8px 0 0 !important;
  padding: 8px 0 0 !important;
}

.hero-v4 > .capture-stage .verification-step[hidden],
.hero-v4 > .capture-stage .verification-recovery-step[hidden],
.hero-v4 > .capture-stage .share-step[hidden] {
  display: none !important;
}

@media (max-width: 680px) {
  .hero-v4 > .capture-stage {
    padding: 24px 20px 12px !important;
  }

  .hero-v4 > .capture-stage .capture-trust {
    margin-top: 7px !important;
    padding-top: 7px !important;
  }
}


/* P1 R15: SEAMLESS LANDING COMPOSITION */
/* P1 R15: seamless landing composition outside the signup card.
 * Replace hard horizontal section dividers and boxed supporting panels with
 * ambient gradient fields that flow into the existing hero background.
 */

main > section.v4-principles,
main > section.v4-privacy-callout {
  border-top: 0 !important;
}

.v4-principles {
  position: relative;
  isolation: isolate;
  margin-top: -1px;
  padding: clamp(82px, 9vw, 126px) 0 clamp(86px, 10vw, 138px) !important;
  background:
    radial-gradient(ellipse 72% 34% at 50% 2%, rgba(255, 92, 124, .10), transparent 68%),
    radial-gradient(ellipse 46% 42% at 88% 56%, rgba(115, 92, 255, .075), transparent 72%),
    linear-gradient(180deg, rgba(9, 9, 11, 0) 0%, rgba(11, 10, 14, .42) 42%, rgba(9, 9, 11, 0) 100%);
}

.v4-principles::before,
.v4-principles::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(52px);
}

.v4-principles::before {
  width: min(46vw, 620px);
  aspect-ratio: 1.35;
  left: -8%;
  top: 20%;
  background: radial-gradient(circle, rgba(255, 92, 124, .075), transparent 70%);
}

.v4-principles::after {
  width: min(40vw, 520px);
  aspect-ratio: 1.2;
  right: -7%;
  bottom: 8%;
  background: radial-gradient(circle, rgba(143, 233, 255, .05), transparent 72%);
}

.v4-section-head {
  position: relative;
  z-index: 1;
}

.v4-principle-grid {
  position: relative;
  z-index: 1;
  gap: clamp(20px, 3vw, 42px);
  margin-top: clamp(42px, 5vw, 66px);
}

.v4-principle-grid article {
  position: relative;
  min-height: 180px;
  padding: 24px 18px 30px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: transform .32s var(--ease), filter .32s var(--ease);
}

.v4-principle-grid article::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 180px;
  height: 150px;
  left: -18px;
  top: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 92, 124, .09), rgba(255, 92, 124, .025) 42%, transparent 72%);
  filter: blur(10px);
  opacity: .72;
  pointer-events: none;
  transition: opacity .32s var(--ease), transform .32s var(--ease);
}

.v4-principle-grid article:nth-child(even)::before {
  background: radial-gradient(circle, rgba(115, 92, 255, .075), rgba(115, 92, 255, .02) 42%, transparent 72%);
}

.v4-principle-grid article:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: none;
  filter: brightness(1.06);
}

.v4-principle-grid article:hover::before {
  opacity: 1;
  transform: scale(1.08);
}

.v4-principle-grid article > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.12), rgba(255,92,124,.08) 48%, rgba(255,92,124,.025));
  box-shadow: 0 0 34px rgba(255, 92, 124, .08);
}

.v4-principle-grid h3 {
  margin-top: 18px;
}

main > section.v4-privacy-callout {
  position: relative;
  isolation: isolate;
  margin: 0 0 clamp(56px, 8vw, 96px);
  padding: clamp(82px, 10vw, 132px) clamp(22px, 5vw, 70px) !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

main > section.v4-privacy-callout::before,
main > section.v4-privacy-callout::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

main > section.v4-privacy-callout::before {
  inset: 4% -9% -6%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 58% 62% at 22% 50%, rgba(255, 92, 124, .12), transparent 70%),
    radial-gradient(ellipse 46% 52% at 82% 42%, rgba(115, 92, 255, .07), transparent 74%);
  filter: blur(34px);
}

main > section.v4-privacy-callout::after {
  width: 340px;
  height: 340px;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 233, 255, .045), transparent 70%);
  filter: blur(16px);
}

.site-footer-v4 {
  position: relative;
  border-top: 0 !important;
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(255, 92, 124, .045), transparent 72%);
}

.site-footer-v4::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -60px -8vw 0;
  background: linear-gradient(180deg, transparent, rgba(7, 7, 9, .34) 52%, rgba(7, 7, 9, .72));
  pointer-events: none;
}

@media (max-width: 980px) {
  .v4-principle-grid {
    gap: 18px 28px;
  }
}

@media (max-width: 680px) {
  .v4-principles {
    padding: 70px 0 82px !important;
  }

  .v4-principle-grid {
    gap: 10px;
    margin-top: 34px;
  }

  .v4-principle-grid article {
    padding: 22px 10px 26px;
  }

  main > section.v4-privacy-callout {
    padding: 72px 12px 82px !important;
    margin-bottom: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v4-principle-grid article,
  .v4-principle-grid article::before {
    transition: none !important;
  }
}


/* P1 R16: SIGNAL FIELD + VIEWPORT CONSOLE */
/* R16: FRISKD signal-field landing composition + viewport-native interaction UI.
 * The signup card remains intentionally intact. Everything around it becomes
 * a continuous animated field instead of a stack of bordered rectangles.
 */

:root {
  scrollbar-gutter: stable;
}

body {
  background:
    radial-gradient(ellipse 70% 42% at 18% 22%, rgba(255, 92, 124, .10), transparent 72%),
    radial-gradient(ellipse 62% 44% at 86% 44%, rgba(103, 80, 255, .075), transparent 74%),
    radial-gradient(ellipse 58% 36% at 48% 82%, rgba(143, 233, 255, .035), transparent 76%),
    #070709;
}

main {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

main::before,
main::after {
  content: "";
  position: absolute;
  z-index: -8;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(72px);
  opacity: .65;
}

main::before {
  width: min(74vw, 980px);
  aspect-ratio: 1.45;
  left: -30%;
  top: 20%;
  background: conic-gradient(from 35deg, rgba(255,92,124,.11), rgba(115,92,255,.045), rgba(255,92,124,.02), rgba(255,92,124,.11));
  animation: friskd-signal-drift-a 18s ease-in-out infinite alternate;
}

main::after {
  width: min(64vw, 860px);
  aspect-ratio: 1.2;
  right: -28%;
  top: 48%;
  background: conic-gradient(from 210deg, rgba(143,233,255,.04), rgba(115,92,255,.07), rgba(255,92,124,.065), rgba(143,233,255,.04));
  animation: friskd-signal-drift-b 22s ease-in-out infinite alternate;
}

.site-header {
  border: 0 !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255,92,124,.08), transparent 42%),
    linear-gradient(180deg, rgba(14,14,18,.82), rgba(8,8,11,.68)) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.045) !important;
  backdrop-filter: blur(22px) saturate(128%);
}

.site-header::after {
  height: 18px !important;
  right: 8% !important;
  bottom: -10px !important;
  left: 8% !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse at center, rgba(255,92,124,.18), transparent 68%) !important;
  filter: blur(12px);
  opacity: .52 !important;
}

.hero-v4 {
  position: relative;
}

.hero-v4::before,
.hero-v4::after {
  content: "";
  position: absolute;
  z-index: -2;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(52px);
}

.hero-v4::before {
  width: min(58vw, 760px);
  aspect-ratio: 1.55;
  left: 50%;
  top: 8%;
  transform: translateX(-50%) rotate(-7deg);
  background: radial-gradient(ellipse, rgba(255,92,124,.105), rgba(255,92,124,.025) 48%, transparent 72%);
  animation: friskd-signal-breathe-centered 11s ease-in-out infinite;
}

.hero-v4::after {
  width: min(46vw, 620px);
  aspect-ratio: 1.6;
  right: -9%;
  top: 34%;
  background: radial-gradient(ellipse, rgba(115,92,255,.07), transparent 70%);
  animation: friskd-signal-float 15s ease-in-out infinite alternate;
}

main > section.v4-principles,
main > section.v4-privacy-callout {
  border: 0 !important;
}

.v4-principles {
  position: relative;
  isolation: isolate;
  background: transparent !important;
}

.v4-principles::before {
  width: min(78vw, 1040px) !important;
  height: auto !important;
  aspect-ratio: 1.65;
  left: 50% !important;
  top: 42% !important;
  transform: translate(-50%, -50%);
  border-radius: 50% !important;
  background:
    conic-gradient(from 120deg,
      rgba(255,92,124,.075),
      rgba(115,92,255,.045),
      rgba(143,233,255,.025),
      rgba(255,92,124,.075)) !important;
  filter: blur(64px) !important;
  opacity: .7 !important;
  animation: friskd-signal-orbit 24s linear infinite;
}

.v4-principles::after {
  width: min(52vw, 680px) !important;
  aspect-ratio: 1.35 !important;
  right: -18% !important;
  bottom: 0 !important;
  background: radial-gradient(ellipse, rgba(255,92,124,.065), transparent 72%) !important;
  filter: blur(58px) !important;
  animation: friskd-signal-float 16s ease-in-out infinite alternate-reverse;
}

.v4-principle-grid {
  gap: clamp(18px, 3vw, 46px) !important;
}

.v4-principle-grid article {
  position: relative;
  isolation: isolate;
  min-height: 190px !important;
  padding: clamp(26px, 3vw, 38px) clamp(18px, 2.4vw, 32px) !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateZ(0);
  transition: transform .42s var(--ease), filter .42s var(--ease) !important;
}

.v4-principle-grid article::before,
.v4-principle-grid article::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.v4-principle-grid article::before {
  inset: 6% 2% 4%;
  border-radius: 58% 42% 64% 36% / 46% 60% 40% 54%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.07), transparent 22%),
    radial-gradient(ellipse at 44% 48%, rgba(255,92,124,.12), rgba(255,92,124,.025) 54%, transparent 74%);
  filter: blur(10px);
  opacity: .72;
  transform: rotate(-2deg) scale(.96);
  animation: friskd-island-morph 12s ease-in-out infinite alternate;
  transition: opacity .42s var(--ease), transform .42s var(--ease);
}

.v4-principle-grid article:nth-child(2n)::before {
  border-radius: 42% 58% 38% 62% / 58% 42% 60% 40%;
  background:
    radial-gradient(circle at 68% 28%, rgba(255,255,255,.055), transparent 20%),
    radial-gradient(ellipse at 56% 52%, rgba(115,92,255,.11), rgba(115,92,255,.02) 54%, transparent 74%);
  animation-delay: -4s;
}

.v4-principle-grid article:nth-child(3n)::before {
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.055), transparent 20%),
    radial-gradient(ellipse at 54% 54%, rgba(143,233,255,.065), rgba(255,92,124,.03) 52%, transparent 74%);
  animation-delay: -8s;
}

.v4-principle-grid article::after {
  width: 42%;
  aspect-ratio: 1;
  right: 4%;
  bottom: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,92,124,.08), transparent 68%);
  filter: blur(18px);
  opacity: .35;
  animation: friskd-signal-breathe 9s ease-in-out infinite;
}

.v4-principle-grid article:hover {
  transform: translateY(-7px) scale(1.012) !important;
  filter: brightness(1.09) saturate(1.05) !important;
}

.v4-principle-grid article:hover::before {
  opacity: 1;
  transform: rotate(1deg) scale(1.04);
}

.v4-principle-grid article > span {
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.18), rgba(255,92,124,.12) 42%, rgba(255,92,124,.025) 72%) !important;
  box-shadow: 0 0 38px rgba(255,92,124,.11) !important;
}

main > section.v4-privacy-callout {
  position: relative;
  isolation: isolate;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

main > section.v4-privacy-callout::before {
  inset: -8% -14% !important;
  border-radius: 50% !important;
  background:
    conic-gradient(from 245deg,
      rgba(255,92,124,.11),
      rgba(115,92,255,.045),
      rgba(143,233,255,.028),
      rgba(255,92,124,.11)) !important;
  filter: blur(76px) !important;
  opacity: .74;
  transform-origin: 50% 50%;
  animation: friskd-signal-spin-local 28s linear infinite reverse;
}

main > section.v4-privacy-callout::after {
  width: min(48vw, 640px) !important;
  height: auto !important;
  aspect-ratio: 1.4;
  right: -10% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse, rgba(255,92,124,.075), rgba(115,92,255,.035) 48%, transparent 74%) !important;
  filter: blur(48px) !important;
  animation: friskd-signal-float-y 14s ease-in-out infinite alternate;
}

.site-footer-v4 {
  position: relative;
  border: 0 !important;
  background:
    radial-gradient(ellipse 58% 90% at 50% 0%, rgba(255,92,124,.06), transparent 72%),
    transparent !important;
}

.site-footer-v4::before {
  inset: -90px -12vw -30px !important;
  border-radius: 50% 50% 0 0 !important;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(115,92,255,.045), transparent 62%),
    linear-gradient(180deg, transparent, rgba(5,5,8,.54) 68%, rgba(5,5,8,.88)) !important;
  filter: blur(10px);
}

/* Viewport-native feedback: nobody should hunt for an error or progress state. */
.form-status:not(:empty) {
  position: fixed !important;
  z-index: 4600 !important;
  left: 50% !important;
  bottom: max(22px, env(safe-area-inset-bottom)) !important;
  width: min(92vw, 620px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  transform: translateX(-50%) !important;
  border: 0 !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.07), transparent 34%),
    rgba(13,13,18,.91) !important;
  box-shadow: 0 20px 70px rgba(0,0,0,.42), 0 0 42px rgba(255,92,124,.06) !important;
  backdrop-filter: blur(20px) saturate(128%);
  color: #f4f4f7 !important;
  font-size: .9rem !important;
  font-weight: 760 !important;
  text-align: center !important;
  pointer-events: none;
  animation: friskd-feedback-in .24s var(--ease) both;
}

.form-status[data-state="error"]:not(:empty) {
  background:
    radial-gradient(circle at 18% 20%, rgba(255,92,124,.12), transparent 36%),
    rgba(18,11,16,.94) !important;
  color: #ffdbe3 !important;
}

/* Verification and completion are compact viewport consoles, not content a
 * person has to discover below the fold. */
html.friskd-modal-open,
html.friskd-modal-open body {
  overflow: hidden !important;
}

html.friskd-modal-open body::before {
  content: "";
  position: fixed;
  z-index: 4490;
  inset: 0;
  background:
    radial-gradient(ellipse 54% 42% at 50% 42%, rgba(255,92,124,.11), transparent 70%),
    rgba(3,3,6,.78);
  backdrop-filter: blur(18px) saturate(118%);
  animation: friskd-modal-backdrop-in .22s ease both;
}

.verification-step:not([hidden]),
.share-step:not([hidden]) {
  position: fixed !important;
  z-index: 4510 !important;
  top: 50% !important;
  left: 50% !important;
  width: min(92vw, 560px) !important;
  max-height: min(88svh, 720px) !important;
  margin: 0 !important;
  padding: clamp(24px, 5vw, 38px) !important;
  overflow: auto !important;
  transform: translate(-50%, -50%) !important;
  border: 0 !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,92,124,.13), transparent 34%),
    radial-gradient(circle at 92% 80%, rgba(115,92,255,.08), transparent 42%),
    linear-gradient(145deg, rgba(24,20,26,.96), rgba(10,10,14,.96)) !important;
  box-shadow:
    0 42px 140px rgba(0,0,0,.62),
    0 0 80px rgba(255,92,124,.09),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(28px) saturate(132%);
  text-align: center;
  animation: friskd-console-in .34s var(--ease) both;
  isolation: isolate;
}

.verification-step:not([hidden])::before,
.share-step:not([hidden])::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 210px;
  aspect-ratio: 1;
  right: -54px;
  top: -72px;
  border-radius: 44% 56% 62% 38% / 48% 40% 60% 52%;
  background: conic-gradient(from 60deg, rgba(255,92,124,.16), rgba(115,92,255,.08), rgba(255,92,124,.025), rgba(255,92,124,.16));
  filter: blur(28px);
  animation: friskd-island-morph 9s ease-in-out infinite alternate;
}

.verification-step h3,
.share-step h3 {
  margin: 0 0 10px !important;
  font-size: clamp(1.75rem, 5vw, 2.8rem) !important;
  letter-spacing: -.04em;
}

.verification-step > p,
.share-step > p {
  max-width: 430px;
  margin-inline: auto;
}

.verification-code-field {
  max-width: 360px;
  margin: 22px auto 0 !important;
  text-align: left;
}

.verification-code {
  height: 64px !important;
  padding: 0 14px !important;
  border-color: rgba(255,92,124,.24) !important;
  background: rgba(3,3,6,.72) !important;
  box-shadow: inset 0 0 28px rgba(255,92,124,.035), 0 0 34px rgba(255,92,124,.035) !important;
  font-size: clamp(1.45rem, 7vw, 2.25rem) !important;
  font-weight: 900 !important;
  letter-spacing: .36em !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums;
}

.verification-expiry {
  margin: 12px 0 0 !important;
  color: rgba(247,247,248,.62) !important;
}

.verification-actions,
.share-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px !important;
  margin-top: 22px !important;
}

.verification-actions .button,
.share-actions .button {
  min-height: 50px;
}

@keyframes friskd-signal-drift-a {
  0% { transform: translate3d(-4%, -2%, 0) rotate(-5deg) scale(.94); }
  100% { transform: translate3d(18%, 9%, 0) rotate(11deg) scale(1.08); }
}

@keyframes friskd-signal-drift-b {
  0% { transform: translate3d(4%, 0, 0) rotate(6deg) scale(1.02); }
  100% { transform: translate3d(-16%, -9%, 0) rotate(-9deg) scale(.9); }
}

@keyframes friskd-signal-breathe {
  0%, 100% { opacity: .52; transform: scale(.94); }
  50% { opacity: .9; transform: scale(1.07); }
}

@keyframes friskd-signal-breathe-centered {
  0%, 100% { opacity: .52; transform: translateX(-50%) rotate(-7deg) scale(.94); }
  50% { opacity: .9; transform: translateX(-50%) rotate(-4deg) scale(1.07); }
}

@keyframes friskd-signal-float {
  0% { transform: translate3d(0, -3%, 0) rotate(-3deg); }
  100% { transform: translate3d(-8%, 8%, 0) rotate(7deg); }
}

@keyframes friskd-signal-float-y {
  0% { transform: translate3d(0, -53%, 0) rotate(-3deg); }
  100% { transform: translate3d(-8%, -42%, 0) rotate(7deg); }
}

@keyframes friskd-signal-orbit {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes friskd-signal-spin-local {
  to { transform: rotate(360deg); }
}

@keyframes friskd-island-morph {
  0% { border-radius: 58% 42% 64% 36% / 46% 60% 40% 54%; transform: rotate(-2deg) scale(.96); }
  100% { border-radius: 44% 56% 38% 62% / 58% 42% 61% 39%; transform: rotate(2deg) scale(1.035); }
}

@keyframes friskd-feedback-in {
  from { opacity: 0; transform: translate(-50%, 10px) scale(.98); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes friskd-modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes friskd-console-in {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.95); filter: blur(4px); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
}

@media (max-width: 720px) {
  main::before { left: -56%; width: 124vw; }
  main::after { right: -62%; width: 112vw; }

  .v4-principle-grid article {
    min-height: 150px !important;
    padding: 22px 14px 28px !important;
  }

  .verification-step:not([hidden]),
  .share-step:not([hidden]) {
    top: auto !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    left: 10px !important;
    width: auto !important;
    max-height: min(88svh, 680px) !important;
    padding: 24px 18px 20px !important;
    transform: none !important;
    border-radius: 28px !important;
    animation-name: friskd-console-up;
  }

  .verification-actions,
  .share-actions {
    grid-template-columns: 1fr !important;
  }

  .form-status:not(:empty) {
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: calc(100vw - 24px) !important;
    border-radius: 22px !important;
  }
}

@keyframes friskd-console-up {
  from { opacity: 0; transform: translateY(22px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  main::before,
  main::after,
  .hero-v4::before,
  .hero-v4::after,
  .v4-principles::before,
  .v4-principles::after,
  .v4-principle-grid article::before,
  .v4-principle-grid article::after,
  main > section.v4-privacy-callout::before,
  main > section.v4-privacy-callout::after,
  .verification-step:not([hidden]),
  .share-step:not([hidden]),
  .form-status:not(:empty),
  html.friskd-modal-open body::before {
    animation: none !important;
    transition: none !important;
  }
}


/* P1 R17: BODY-LEVEL FLOW PORTAL */
/* R17: viewport portal + calm feedback layer.
 * Verification/completion UI is rendered at document-body level so the
 * transformed signup card can never become its containing block or clip it.
 */

.friskd-flow-portal { position: relative; z-index: 4700; }
html.friskd-modal-open body::before { content: none !important; }

.friskd-flow-portal::before {
  content: "";
  position: fixed;
  z-index: 4490;
  inset: 0;
  background:
    radial-gradient(ellipse 58% 46% at 50% 44%, rgba(255,92,124,.11), transparent 68%),
    radial-gradient(ellipse 44% 34% at 76% 68%, rgba(115,92,255,.07), transparent 72%),
    rgba(3,3,6,.84);
  backdrop-filter: blur(18px) saturate(118%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}

html.friskd-modal-open .friskd-flow-portal::before {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.friskd-flow-portal > .verification-step:not([hidden]),
.friskd-flow-portal > .share-step:not([hidden]) {
  position: fixed !important;
  z-index: 4710 !important;
  top: 50% !important;
  left: 50% !important;
  width: min(92vw, 560px) !important;
  max-height: min(88svh, 720px) !important;
  margin: 0 !important;
  padding: clamp(26px, 5vw, 40px) !important;
  overflow: auto !important;
  transform: translate(-50%, -50%) !important;
  border: 0 !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,92,124,.16), transparent 34%),
    radial-gradient(circle at 88% 78%, rgba(115,92,255,.10), transparent 44%),
    linear-gradient(145deg, rgba(25,20,28,.985), rgba(8,8,12,.985)) !important;
  box-shadow:
    0 42px 140px rgba(0,0,0,.68),
    0 0 90px rgba(255,92,124,.10),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
  backdrop-filter: blur(30px) saturate(136%);
  color: #f7f7f8;
  text-align: center;
  isolation: isolate;
  animation: friskd-r17-console-in .3s cubic-bezier(.18,.82,.22,1.08) both !important;
}

.friskd-flow-portal > .verification-step:not([hidden])::after,
.friskd-flow-portal > .share-step:not([hidden])::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 72%;
  height: 110px;
  left: 14%;
  bottom: -52px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,92,124,.11), transparent 68%);
  filter: blur(24px);
  animation: friskd-r17-console-pulse 5.5s ease-in-out infinite;
  pointer-events: none;
}

.friskd-flow-portal > .verification-step:not([hidden]) > *,
.friskd-flow-portal > .share-step:not([hidden]) > * {
  position: relative;
  z-index: 1;
}

.form-status.is-suppressed { display: none !important; }

html.friskd-submitting .capture-submit {
  cursor: progress;
  padding-left: 46px !important;
}

html.friskd-submitting .capture-submit::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid rgba(6,6,8,.28);
  border-top-color: rgba(6,6,8,.88);
  border-radius: 50%;
  animation: friskd-r17-spin .72s linear infinite;
}

.friskd-flow-portal > .form-status:not(:empty):not(.is-suppressed) {
  position: fixed !important;
  z-index: 4740 !important;
  top: max(92px, calc(env(safe-area-inset-top) + 16px)) !important;
  bottom: auto !important;
  left: 50% !important;
  width: min(calc(100vw - 28px), 640px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 13px 18px !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 18px !important;
  background: rgba(11,11,16,.97) !important;
  box-shadow: 0 18px 68px rgba(0,0,0,.52), 0 0 36px rgba(255,92,124,.05) !important;
  backdrop-filter: blur(18px) saturate(120%);
  color: #f4f4f7 !important;
  font-size: .88rem !important;
  font-weight: 780 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  pointer-events: none;
  animation: friskd-r17-toast-in .2s ease-out both !important;
}

.friskd-flow-portal > .form-status[data-state="error"]:not(:empty):not(.is-suppressed) {
  border-color: rgba(255,92,124,.16) !important;
  background:
    radial-gradient(circle at 14% 10%, rgba(255,92,124,.13), transparent 38%),
    rgba(17,10,15,.98) !important;
  color: #ffdce4 !important;
}

@keyframes friskd-r17-console-in {
  from { opacity: 0; transform: translate(-50%, -47%) scale(.965); filter: blur(3px); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
}
@keyframes friskd-r17-console-pulse {
  0%, 100% { opacity: .45; transform: scale(.9); }
  50% { opacity: .9; transform: scale(1.08); }
}
@keyframes friskd-r17-toast-in {
  from { opacity: 0; transform: translate(-50%, -8px) scale(.985); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes friskd-r17-spin { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
  .friskd-flow-portal > .verification-step:not([hidden]),
  .friskd-flow-portal > .share-step:not([hidden]) {
    top: auto !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    left: 10px !important;
    width: auto !important;
    max-height: min(90svh, 700px) !important;
    padding: 24px 18px 20px !important;
    transform: none !important;
    border-radius: 28px !important;
    animation: friskd-r17-sheet-in .28s cubic-bezier(.18,.82,.22,1.04) both !important;
  }
  .friskd-flow-portal > .form-status:not(:empty):not(.is-suppressed) {
    top: max(76px, calc(env(safe-area-inset-top) + 10px)) !important;
    width: calc(100vw - 20px) !important;
    border-radius: 16px !important;
  }
}

@keyframes friskd-r17-sheet-in {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .friskd-flow-portal::before,
  .friskd-flow-portal > .verification-step:not([hidden]),
  .friskd-flow-portal > .share-step:not([hidden]),
  .friskd-flow-portal > .form-status:not(:empty):not(.is-suppressed),
  html.friskd-submitting .capture-submit::before {
    animation: none !important;
    transition: none !important;
  }
}


/* P1 R18: VERIFICATION CONSOLE POLISH */
/* R18: verification-console polish.
 * Keeps the R17 body-level flow portal while removing visible scrollbars,
 * making resend a subordinate text action, and adding close/reopen affordances.
 */

.friskd-flow-portal > .verification-step:not([hidden]),
.friskd-flow-portal > .share-step:not([hidden]) {
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.friskd-flow-portal > .verification-step:not([hidden])::-webkit-scrollbar,
.friskd-flow-portal > .share-step:not([hidden])::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.friskd-flow-portal .verification-code-field label {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

.friskd-flow-portal .verification-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 7px !important;
  margin-top: 22px !important;
}

.friskd-flow-portal #verify-button {
  width: 100% !important;
  min-height: 52px !important;
}

/* Keep the expiry countdown exactly where it is. Resend is deliberately a
 * smaller secondary action beneath the primary Verify & Join button. */
.friskd-flow-portal #restart-verification-button {
  justify-self: center !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 5px 9px !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: rgba(247,247,248,.64) !important;
  font-size: .69rem !important;
  background: transparent !important;
  font-weight: 760 !important;
  letter-spacing: .025em !important;
  line-height: 1.25 !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.friskd-flow-portal #restart-verification-button:hover:not(:disabled),
.friskd-flow-portal #restart-verification-button:focus-visible:not(:disabled) {
  color: #fff !important;
  background: rgba(255,255,255,.035) !important;
}

.friskd-flow-portal #restart-verification-button:disabled {
  opacity: .48 !important;
  color: rgba(247,247,248,.54) !important;
  text-decoration: none;
  cursor: default;
}

.friskd-flow-close {
  position: absolute !important;
  z-index: 8 !important;
  top: 14px !important;
  right: 14px !important;
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.045) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055) !important;
  color: rgba(247,247,248,.72) !important;
  font: 500 1.45rem/1 system-ui, sans-serif !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.friskd-flow-close:hover,
.friskd-flow-close:focus-visible {
  background: rgba(255,92,124,.12) !important;
  color: #fff !important;
  transform: scale(1.04);
}

.friskd-flow-reopen[hidden] { display: none !important; }

.friskd-flow-reopen {
  position: fixed;
  z-index: 4720;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(255,92,124,.16);
  border-radius: 999px;
  background: rgba(12,12,17,.94);
  box-shadow: 0 18px 54px rgba(0,0,0,.38), 0 0 34px rgba(255,92,124,.07);
  backdrop-filter: blur(18px) saturate(120%);
  color: #f7f7f8;
  font-size: .74rem;
  font-weight: 820;
  letter-spacing: .035em;
  cursor: pointer;
}

@media (max-width: 720px) {
  .friskd-flow-close {
    top: 10px !important;
    right: 10px !important;
  }

  .friskd-flow-reopen {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    max-width: calc(100vw - 24px);
  }
}


/* P1 R19: FINAL VERIFICATION ALIGNMENT */
/* R19: final verification-console alignment polish.
 * Keeps R18 interaction behavior intact while tightening visual symmetry.
 */

/* The expiry line should read as part of the centered verification stack. */
.friskd-flow-portal .verification-expiry {
  display: block !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Match the breathing room below the expiry line with the breathing room
 * between the primary Verify & Join action and the subordinate resend link. */
.friskd-flow-portal .verification-actions {
  row-gap: 22px !important;
}

/* Draw the close glyph geometrically instead of relying on the font baseline,
 * so the X stays perfectly centered inside its circular hit target. */
.friskd-flow-close {
  position: absolute !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

.friskd-flow-close::before,
.friskd-flow-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  border-radius: 999px;
  background: rgba(247,247,248,.76);
  pointer-events: none;
  transform-origin: center;
}

.friskd-flow-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.friskd-flow-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.friskd-flow-close:hover::before,
.friskd-flow-close:hover::after,
.friskd-flow-close:focus-visible::before,
.friskd-flow-close:focus-visible::after {
  background: #fff;
}


/* P1 R20: CONVERSION CLARITY + WHY FRISKD */
/* R20: conversion clarity + Why FRISKD signal constellation.
 * Keeps the accepted R19 verification console while making resend progressive
 * instead of presenting a disabled-looking control, and gives Why FRISKD a
 * stronger six-signal product story without returning to boxed cards.
 */

/* Resend stays out of sight during the anti-abuse cooldown. Once live-flow
 * reveals it, it enters as a quiet text action rather than a second CTA. */
.friskd-flow-portal #restart-verification-button[hidden] {
  display: none !important;
}

.friskd-flow-portal #restart-verification-button:not([hidden]) {
  animation: friskd-resend-reveal .28s var(--ease) both;
}

@keyframes friskd-resend-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Give the Why FRISKD section a clear promise first, then let six open signal
 * nodes orbit beneath it. These are deliberately not cards or bordered boxes. */
.v4-section-head .why-friskd-copy {
  max-width: 680px;
  margin: 18px auto 0;
  color: rgba(247,247,248,.68);
  font-size: clamp(.98rem, 1.5vw, 1.08rem);
  line-height: 1.65;
  text-wrap: balance;
}

.v4-principles #why-title {
  background: linear-gradient(100deg, #fff 12%, #fff 42%, #ff5c7c 72%, #8f7cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
}

.v4-principle-grid {
  max-width: 1120px;
  margin: clamp(42px, 6vw, 68px) auto 0 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(22px, 3.6vw, 54px) clamp(18px, 3.2vw, 46px) !important;
}

.v4-principle-grid article {
  min-height: 214px !important;
  padding: clamp(28px, 3vw, 40px) clamp(18px, 2.5vw, 34px) !important;
}

.v4-principle-grid article > span {
  display: inline-grid !important;
  place-items: center !important;
  font-variant-numeric: tabular-nums;
}

.v4-principle-grid h3 {
  margin-top: 20px !important;
  font-size: clamp(1.24rem, 2vw, 1.5rem) !important;
  letter-spacing: -.035em !important;
}

.v4-principle-grid p {
  max-width: 34ch;
  font-size: .94rem !important;
  line-height: 1.62 !important;
}

/* Stagger the constellation very slightly on wide screens so six signals feel
 * composed rather than like a rigid 3x2 dashboard. */
@media (min-width: 1040px) {
  .v4-principle-grid article:nth-child(2),
  .v4-principle-grid article:nth-child(5) {
    transform: translateY(18px);
  }

  .v4-principle-grid article:nth-child(2):hover,
  .v4-principle-grid article:nth-child(5):hover {
    transform: translateY(10px) scale(1.012) !important;
  }
}

@media (max-width: 980px) {
  .v4-principle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .v4-section-head .why-friskd-copy {
    margin-top: 14px;
    font-size: .94rem;
  }

  .v4-principle-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .v4-principle-grid article {
    min-height: 0 !important;
    padding: 24px 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .friskd-flow-portal #restart-verification-button:not([hidden]) {
    animation: none;
  }
}