/* ============================================================================
   CURL MATE — V3 POLISH LAYER
   Motion + depth on top of the existing v2 markup. Additive only: no v2 rule
   is removed. Uses the existing brand tokens (--v2-cream / teal / amber / ink).
   Everything degrades gracefully and respects prefers-reduced-motion.
   ========================================================================== */

:root {
  --v3-teal:    #3d6b65;
  --v3-teal-dp: #2c534e;
  --v3-amber:   #b87333;
  --v3-amber-lt:#d99a5b;
  --v3-cream:   #faf7f4;
  --v3-ink:     #1a1208;
  --v3-elev:    #ffffff;
  --v3-lift:    0 18px 50px -18px rgba(44, 83, 78, .28);
  --v3-lift-sm: 0 8px 24px -10px rgba(26, 18, 8, .22);
  --v3-ring:    0 0 0 1px rgba(26, 18, 8, .06);
  --v3-ease:    cubic-bezier(.22, 1, .36, 1);
}

/* ── Page-load reveal: staged, from a VISIBLE resting state ──────────────
   Elements start faintly offset and settle in. Because the still frame must
   read on load, we only travel a few px and never park at opacity:0 for long
   — the whole sequence completes in < 900ms. */
@keyframes v3-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes v3-float {
  0%,100% { transform: translate(0, 0) scale(1); }
  50%     { transform: translate(0, -22px) scale(1.04); }
}
@keyframes v3-drift {
  0%,100% { transform: translate(0,0); }
  33%     { transform: translate(24px, -18px); }
  66%     { transform: translate(-16px, 12px); }
}
@keyframes v3-sheen {
  from { background-position: -140% 0; }
  to   { background-position: 240% 0; }
}
@keyframes v3-pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(184,115,51,.34); }
  70%  { box-shadow: 0 0 0 14px rgba(184,115,51,0); }
  100% { box-shadow: 0 0 0 0 rgba(184,115,51,0); }
}

/* ============================================================================
   HERO — ambient atmosphere + staged entrance
   ========================================================================== */
.cm-v2-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 120% at 88% -10%, rgba(61,107,101,.10), transparent 55%),
    radial-gradient(90% 90% at -8% 108%, rgba(184,115,51,.12), transparent 50%),
    var(--v3-cream);
}

/* Soft floating colour fields behind the hero content */
.cm-v2-hero::before,
.cm-v2-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
  pointer-events: none;
}
.cm-v2-hero::before {
  width: 30rem; height: 30rem;
  top: -8rem; right: -6rem;
  background: radial-gradient(circle at 30% 30%, rgba(61,107,101,.5), transparent 70%);
  animation: v3-float 13s var(--v3-ease) infinite;
}
.cm-v2-hero::after {
  width: 26rem; height: 26rem;
  bottom: -9rem; left: -7rem;
  background: radial-gradient(circle at 60% 40%, rgba(184,115,51,.45), transparent 70%);
  animation: v3-drift 17s var(--v3-ease) infinite;
}

/* Fine grain so the flat cream reads as a considered surface, not a fill */
.cm-v2-hero__inner { position: relative; z-index: 1; }

/* Staged entrance for hero copy children */
.cm-v2-hero__copy > * { animation: v3-rise .7s var(--v3-ease) both; }
.cm-v2-hero__copy > .cm-v2-eyebrow   { animation-delay: .05s; }
.cm-v2-hero__copy > .cm-v2-hero__title { animation-delay: .14s; }
.cm-v2-hero__copy > .cm-v2-hero__sub   { animation-delay: .24s; }
.cm-v2-hero__copy > .cm-v2-cta-group   { animation-delay: .34s; }
.cm-v2-hero__copy > .cm-v2-stats       { animation-delay: .44s; }

.cm-v2-hero__title { letter-spacing: -.01em; text-wrap: balance; }
.cm-v2-hero__title em {
  font-style: italic;
  background: linear-gradient(105deg, var(--v3-amber), var(--v3-teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hero image: settle in with a gentle scale, add a warm halo + slow bob */
.cm-v2-hero__visual { position: relative; }
.cm-v2-hero__img {
  animation: v3-rise .9s var(--v3-ease) .3s both, v3-float 9s var(--v3-ease) 1.2s infinite;
  will-change: transform;
  filter: drop-shadow(0 24px 40px rgba(44,83,78,.18));
}

/* ── Stats: give the figures a lift and a subtle shimmering underline ──── */
.cm-v2-stats { position: relative; }
.cm-v2-stat dt {
  background: linear-gradient(100deg, var(--v3-teal-dp), var(--v3-amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================================
   BUTTONS — animated gradient primary, magnetic hover
   ========================================================================== */
.cm-v2-btn { transition: transform .35s var(--v3-ease), box-shadow .35s var(--v3-ease), filter .35s var(--v3-ease); }

.cm-v2-btn--primary {
  position: relative;
  background: linear-gradient(120deg, var(--v3-amber) 0%, var(--v3-teal) 52%, var(--v3-amber) 100%);
  background-size: 220% 100%;
  background-position: 0% 0;
  box-shadow: 0 10px 24px -10px rgba(184,115,51,.6);
  transition: background-position .6s var(--v3-ease), transform .35s var(--v3-ease), box-shadow .35s var(--v3-ease);
}
.cm-v2-btn--primary:hover {
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -12px rgba(44,83,78,.55);
}
.cm-v2-btn--primary:active { transform: translateY(0); }

.cm-v2-btn--outline {
  transition: transform .35s var(--v3-ease), background-color .3s ease, border-color .3s ease, color .3s ease;
}
.cm-v2-btn--outline:hover {
  transform: translateY(-2px);
  border-color: var(--v3-teal);
  color: var(--v3-teal-dp);
  background: rgba(61,107,101,.06);
}

/* ============================================================================
   FEATURE CARDS — elevate, lift on hover, animate the emoji marker
   ========================================================================== */
.cm-v2-feature-card {
  position: relative;
  background: var(--v3-elev);
  box-shadow: var(--v3-ring), var(--v3-lift-sm);
  transition: transform .4s var(--v3-ease), box-shadow .4s var(--v3-ease);
  overflow: hidden;
}
/* top accent that grows on hover — spent only on cards, by role */
.cm-v2-feature-card::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 3px; width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--v3-amber), var(--v3-teal));
  transition: transform .45s var(--v3-ease);
}
.cm-v2-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--v3-ring), var(--v3-lift);
}
.cm-v2-feature-card:hover::after { transform: scaleX(1); }

.cm-v2-feature-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: .85rem;
  background: linear-gradient(150deg, rgba(184,115,51,.14), rgba(61,107,101,.12));
  box-shadow: inset 0 0 0 1px rgba(26,18,8,.05);
  transition: transform .4s var(--v3-ease);
}
.cm-v2-feature-card:hover .cm-v2-feature-icon { transform: scale(1.08) rotate(-4deg); }

/* ============================================================================
   REVIEW CARDS — glassy, gentle lift, quote flourish
   ========================================================================== */
.cm-v2-review-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.72));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--v3-ring), var(--v3-lift-sm);
  transition: transform .4s var(--v3-ease), box-shadow .4s var(--v3-ease);
}
.cm-v2-review-card:hover {
  transform: translateY(-5px) rotate(-.4deg);
  box-shadow: var(--v3-ring), var(--v3-lift);
}
.cm-v2-review-card blockquote { position: relative; }
.cm-v2-review-card blockquote::before {
  content: "\201C";
  position: absolute;
  top: -1.6rem; left: -.4rem;
  font-family: var(--v2-font-display);
  font-size: 4rem;
  line-height: 1;
  color: rgba(184,115,51,.22);
  pointer-events: none;
}
.cm-v2-review-img {
  transition: transform .4s var(--v3-ease);
}
.cm-v2-review-card:hover .cm-v2-review-img { transform: scale(1.05); }

/* ============================================================================
   SIGNUP — make the conversion moment feel special
   ========================================================================== */
.cm-v2-signup {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cm-v2-signup::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 34rem; height: 34rem;
  border-radius: 50%;
  top: 50%; right: -12rem;
  transform: translateY(-50%);
  background: radial-gradient(circle at 50% 50%, rgba(61,107,101,.12), transparent 68%);
  filter: blur(30px);
  animation: v3-float 15s var(--v3-ease) infinite;
  pointer-events: none;
}

.cm-v2-form-card {
  position: relative;
  background: var(--v3-elev);
  box-shadow: var(--v3-ring), var(--v3-lift);
  transition: box-shadow .4s var(--v3-ease);
}
/* gradient hairline frame on the form card — signals "this is the action" */
.cm-v2-form-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(184,115,51,.5), rgba(61,107,101,.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .0;
  transition: opacity .4s var(--v3-ease);
}
.cm-v2-form-card:focus-within::before { opacity: 1; }

/* Intent toggle — pill slider feel */
.cm-intent-btn { transition: color .3s ease, background-color .3s ease, box-shadow .3s ease; }
.cm-intent-btn.is-active { box-shadow: var(--v3-lift-sm); }

/* Inputs — softer focus glow in brand teal */
.cm-v2-input {
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.cm-v2-input:focus {
  border-color: var(--v3-teal);
  box-shadow: 0 0 0 4px rgba(61,107,101,.14);
}

/* Submit — gradient + attention pulse when the form is ready */
.cm-v2-submit {
  position: relative;
  background: linear-gradient(120deg, var(--v3-teal) 0%, var(--v3-teal-dp) 100%);
  background-size: 180% 100%;
  transition: background-position .5s var(--v3-ease), transform .3s var(--v3-ease), box-shadow .3s var(--v3-ease);
  box-shadow: 0 10px 24px -12px rgba(44,83,78,.6);
}
.cm-v2-submit:hover {
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px rgba(44,83,78,.55);
}
.cm-v2-submit:not(:disabled):focus-visible { animation: v3-pulse-ring 1.6s ease-out; }

/* ── Video card polish ─────────────────────────────────────────────── */
.cm-v2-video-card {
  box-shadow: var(--v3-ring), var(--v3-lift-sm);
  transition: box-shadow .4s var(--v3-ease), transform .4s var(--v3-ease);
}
.cm-v2-video-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--v3-ring), var(--v3-lift);
}
.cm-v2-video-frame { overflow: hidden; }
.cm-v2-video-frame video { transition: transform .6s var(--v3-ease); }
.cm-v2-video-card:hover .cm-v2-video-frame video { transform: scale(1.03); }

/* ============================================================================
   SECTION HEADERS — animated eyebrow + balanced titles
   ========================================================================== */
.cm-v2-eyebrow {
  position: relative;
  display: inline-block;
}
.cm-v2-eyebrow::after {
  content: "";
  display: inline-block;
  width: 2rem; height: 2px;
  margin-left: .6rem;
  vertical-align: middle;
  background: linear-gradient(90deg, var(--v3-amber), transparent);
  border-radius: 2px;
}
.cm-v2-section-title { text-wrap: balance; letter-spacing: -.01em; }

/* ============================================================================
   NAV — subtle shrink + link underline sweep
   ========================================================================== */
.cm-site-nav__link {
  position: relative;
  transition: color .25s ease;
}
.cm-site-nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--v3-amber), var(--v3-teal));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--v3-ease);
  border-radius: 2px;
}
.cm-site-nav__link:hover { color: var(--v3-teal-dp); }
.cm-site-nav__link:hover::after { transform: scaleX(1); }

/* Logo bar breathing */
.cm-v2-logo-bar__img { transition: transform .5s var(--v3-ease), opacity .3s ease; opacity: .8; }
.cm-v2-logo-bar__img:hover { transform: scale(1.06); opacity: 1; }

/* ============================================================================
   SCROLL-REVEAL — richer choreography for the .js-reveal hook already wired
   The homepage JS toggles .is-visible; give it a nicer resting + settle.
   Elements without the hook stay fully visible (still-frame safe).
   ========================================================================== */
.js-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--v3-ease), transform .7s var(--v3-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================================
   DOWNLOAD PAGE — store buttons + points polish
   ========================================================================== */
.cm-v2-store-btn {
  transition: transform .35s var(--v3-ease), box-shadow .35s var(--v3-ease);
}
.cm-v2-store-btn:not(.cm-v2-store-btn--soon):hover {
  transform: translateY(-3px);
  box-shadow: var(--v3-lift);
}
.cm-v2-download__logo { animation: v3-float 8s var(--v3-ease) infinite; }

/* ============================================================================
   REDUCED MOTION — honor the user's setting: kill ambient/scroll motion,
   keep instant, legible states.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .cm-v2-hero::before,
  .cm-v2-hero::after,
  .cm-v2-signup::before,
  .cm-v2-hero__img,
  .cm-v2-download__logo {
    animation: none !important;
  }
  .cm-v2-hero__copy > *,
  .cm-v2-hero__img {
    animation: v3-rise .001s linear both !important;
  }
  .js-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .cm-v2-btn--primary,
  .cm-v2-submit { background-position: 0 0 !important; }
  * { scroll-behavior: auto !important; }
}

/* ============================================================================
   APP SHOWCASE — "See it in action" phone mockups (real screenshots)
   ========================================================================== */
.cm-v3-showcase {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 5rem 1.5rem 5.5rem;
  background:
    radial-gradient(80% 90% at 50% -10%, rgba(61,107,101,.08), transparent 60%),
    var(--v3-cream);
}
.cm-v3-showcase::before {
  content: "";
  position: absolute; z-index: -1;
  width: 40rem; height: 40rem; border-radius: 50%;
  top: 40%; left: 50%; transform: translate(-50%, -30%);
  background: radial-gradient(circle at 50% 50%, rgba(184,115,51,.10), transparent 66%);
  filter: blur(40px);
  animation: v3-float 18s var(--v3-ease) infinite;
  pointer-events: none;
}
.cm-v3-showcase__head {
  max-width: 720px;
  margin: 0 auto 3.25rem;
  text-align: center;
}
.cm-v3-showcase__title {
  font-family: var(--v2-font-display);
  font-size: clamp(1.9rem, 4.5vw, 2.9rem);
  color: var(--v3-ink);
  letter-spacing: -.01em;
  text-wrap: balance;
  margin: .35rem 0 .6rem;
}
.cm-v3-showcase__sub {
  color: var(--v2-ink-mid);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 auto;
  text-wrap: pretty;
}

/* Stage: lead phone centered, supporters flanking. On wide screens they
   overlap slightly and tilt; on narrow they become a scroll strip. */
.cm-v3-stage {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.4rem);
}

/* ── Phone mockup ─────────────────────────────────────────────────────── */
.cm-v3-phone {
  position: relative;
  flex: 0 0 auto;
  width: clamp(180px, 22vw, 244px);
  border-radius: 2.6rem;
  padding: .5rem;
  background: linear-gradient(160deg, #2a2018, #120c07);
  box-shadow:
    0 30px 60px -22px rgba(44,83,78,.5),
    0 6px 14px -6px rgba(26,18,8,.35),
    inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .5s var(--v3-ease), box-shadow .5s var(--v3-ease);
}
.cm-v3-phone__screen {
  display: block;
  width: 100%;
  border-radius: 2.15rem;
  overflow: hidden;
  background: var(--v3-cream);
}
.cm-v3-phone__screen img {
  display: block;
  width: 100%;
  height: auto;
}
/* dynamic-island notch */
.cm-v3-phone::before {
  content: "";
  position: absolute;
  top: 1rem; left: 50%;
  transform: translateX(-50%);
  width: 32%; height: .62rem;
  background: #0c0805;
  border-radius: 1rem;
  z-index: 2;
  pointer-events: none;
}
.cm-v3-phone__cap {
  position: absolute;
  left: 0; right: 0; bottom: -2.35rem;
  text-align: center;
  font-family: var(--v2-font-body);
  font-size: .82rem;
  font-weight: 500;
  color: var(--v2-ink-mid);
  letter-spacing: .01em;
  padding: 0 .25rem;
}

/* Lead phone — bigger, front, warm halo */
.cm-v3-phone--lead {
  width: clamp(210px, 26vw, 288px);
  z-index: 3;
  transform: translateY(-8px);
}
.cm-v3-phone--lead::after {
  content: "";
  position: absolute; inset: -14%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(184,115,51,.28), transparent 62%);
  filter: blur(24px);
}
/* Side phones — tucked lower and tilted for depth */
.cm-v3-phone--l { transform: translateY(26px) rotate(-5deg); z-index: 1; }
.cm-v3-phone--r { transform: translateY(26px) rotate(5deg);  z-index: 1; }

/* Hover: bring any phone forward */
.cm-v3-phone:hover {
  transform: translateY(-12px) rotate(0deg) scale(1.03);
  z-index: 5;
  box-shadow: 0 40px 70px -20px rgba(44,83,78,.55), 0 8px 18px -6px rgba(26,18,8,.4);
}

/* Secondary strip — the remaining screens below, in a row */
.cm-v3-strip {
  max-width: 1000px;
  margin: 4rem auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.cm-v3-strip .cm-v3-phone {
  width: 100%;
  transform: none;
}
.cm-v3-strip .cm-v3-phone::after { display: none; }
.cm-v3-strip .cm-v3-phone:hover { transform: translateY(-8px) scale(1.02); }

/* ── Responsive: become a horizontal scroll strip on small screens ─────── */
@media (max-width: 860px) {
  .cm-v3-stage {
    justify-content: flex-start;
    overflow-x: auto;
    padding: 1.5rem .25rem 3.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .cm-v3-stage::-webkit-scrollbar { height: 0; }
  .cm-v3-phone,
  .cm-v3-phone--lead,
  .cm-v3-phone--l,
  .cm-v3-phone--r {
    transform: none;
    scroll-snap-align: center;
    width: min(62vw, 240px);
  }
  .cm-v3-phone--lead { width: min(70vw, 260px); }
  .cm-v3-phone--lead::after { display: none; }
  .cm-v3-strip { grid-template-columns: 1fr; max-width: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-v3-showcase::before { animation: none !important; }
}

/* ============================================================================
   FORMS — structured, modern, icon-led inputs + themed Turnstile
   Applies to the waitlist signup and the contact form (shared classes).
   ========================================================================== */

/* Grid: Name + Email pair, everything else full-width. Cleaner than the old
   3-across grid that left Phone stranded. */
.cm-v2-form-fields {
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.25rem;
}
.cm-v2-field { gap: .4rem; }
.cm-v2-field--full { grid-column: 1 / -1; }

/* Label hierarchy */
.cm-v2-label {
  font-size: .82rem;
  letter-spacing: .015em;
  color: var(--v3-ink);
  margin-bottom: .1rem;
}

/* Input wrapper holds a leading icon */
.cm-v3-input-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.cm-v3-input-icon {
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  color: var(--v2-ink-low);
  pointer-events: none;
  transition: color .2s var(--v3-ease), transform .2s var(--v3-ease);
  z-index: 1;
}

/* Elevated input styling — taller, softer, icon padding, richer focus */
.cm-v3-input.cm-v2-input,
.cm-v2-textarea.cm-v2-input {
  padding: .95rem 1rem;
  font-size: .98rem;
  border: 1.5px solid var(--v2-border);
  border-radius: .8rem;
  background: #fffdfb;
  box-shadow: inset 0 1px 2px rgba(26,18,8,.03);
  transition: border-color .2s var(--v3-ease), box-shadow .2s var(--v3-ease), background-color .2s var(--v3-ease);
}
.cm-v3-input.cm-v2-input { padding-left: 2.65rem; }   /* room for the icon */

.cm-v3-input.cm-v2-input:hover,
.cm-v2-textarea.cm-v2-input:hover {
  border-color: rgba(61,107,101,.4);
  background: #ffffff;
}
.cm-v3-input.cm-v2-input:focus,
.cm-v2-textarea.cm-v2-input:focus {
  border-color: var(--v3-teal);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(61,107,101,.14), inset 0 1px 2px rgba(26,18,8,.02);
}
/* icon lights up in brand teal when the field is focused */
.cm-v3-input-wrap:focus-within .cm-v3-input-icon {
  color: var(--v3-teal);
  transform: translateY(-50%) scale(1.06);
}
/* valid, non-empty input gets a subtle teal edge */
.cm-v3-input.cm-v2-input:valid:not(:placeholder-shown) {
  border-color: rgba(61,107,101,.45);
}

.cm-v2-textarea.cm-v2-input {
  min-height: 140px;
  line-height: 1.55;
}

/* Hints a touch calmer, error clearer */
.cm-v2-hint { font-size: .8rem; line-height: 1.5; color: var(--v2-ink-mid); }
.cm-v2-error { color: #b23b2e; font-size: .82rem; font-weight: 500; }
.cm-v2-char-count { font-size: .78rem; color: var(--v2-ink-low); font-variant-numeric: tabular-nums; }

/* ── Cloudflare Turnstile — wrapped so it reads as part of the form ─────── */
.cm-v3-turnstile-wrap {
  margin: 1.25rem 0 0;
  padding: .9rem 1rem 1rem;
  border: 1.5px solid var(--v2-border);
  border-radius: .9rem;
  background: linear-gradient(180deg, rgba(61,107,101,.04), rgba(184,115,51,.03));
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.cm-v3-turnstile-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--v2-font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--v3-teal-dp);
  text-transform: uppercase;
}
.cm-v3-turnstile-label svg {
  width: .95rem; height: .95rem;
  color: var(--v3-teal);
}
/* the widget itself: left-aligned, no jarring dark box against the cream */
.cm-v3-turnstile-wrap .cf-turnstile { min-height: 65px; }
.cm-v3-turnstile-wrap iframe { border-radius: .5rem; }

/* Submit spacing after the framed turnstile */
.cm-v3-turnstile-wrap + .cm-v2-submit { margin-top: 1.1rem; }

/* Form card breathes a bit more */
.cm-v2-form-card { padding-top: 2rem; }

@media (max-width: 560px) {
  .cm-v2-form-fields { grid-template-columns: 1fr; }
}