/* ================================================================
   CURL MATE — site-v4.css
   Homepage + Contact redesign. Additive & isolated: everything is
   scoped to .cm-v4-* (plus a few .cm-site-nav enhancements). Builds on
   the existing v2/v3 tokens — no token or global changes.
   Mobile-first. prefers-reduced-motion safe. No horizontal overflow.
   ================================================================ */

:root {
  --v4-cream:    #faf7f4;
  --v4-cream-dp: #f3ece4;   /* deeper warm section ground */
  --v4-ink:      #1a1208;
  --v4-ink-mid:  rgba(26,18,8,.62);
  --v4-ink-low:  rgba(26,18,8,.42);
  --v4-teal:     #3d6b65;
  --v4-teal-dp:  #2c534e;
  --v4-amber:    #b87333;
  --v4-amber-lt: #d99a5b;
  --v4-rose:     #c67f6b;   /* restrained warm mauve/terracotta accent */
  --v4-rose-lt:  #e7cabf;
  --v4-line:     rgba(26,18,8,.10);
  --v4-white:    #ffffff;
  --v4-radius:   1.25rem;
  --v4-radius-lg:1.75rem;
  --v4-radius-sm:.75rem;
  --v4-shadow:   0 2px 24px rgba(26,18,8,.07);
  --v4-shadow-lg:0 22px 60px -24px rgba(44,83,78,.34);
  --v4-shadow-sm:0 8px 24px -12px rgba(26,18,8,.24);
  --v4-ring:     0 0 0 1px rgba(26,18,8,.06);
  --v4-ease:     cubic-bezier(.22,1,.36,1);
  --v4-font-body:    'Inter','Segoe UI',sans-serif;
  --v4-font-display: 'DM Serif Display','Playfair Display',Georgia,serif;
}

/* Base scoping — the v4 pages inherit body font + block overflow */
.cm-v4-hero,
.cm-v4-preview,
.cm-v4-how,
.cm-v4-showcase,
.cm-v4-journey,
.cm-v4-benefits,
.cm-v4-corner,
.cm-v4-signup,
.cm-v4-signoff,
.cm-v4-contact {
  font-family: var(--v4-font-body);
  color: var(--v4-ink);
  overflow-x: clip;
}

/* Shared type / helpers ─────────────────────────────────────────── */
.cm-v4-eyebrow {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v4-amber);
  margin: 0 0 .75rem;
}
.cm-v4-h2 {
  font-family: var(--v4-font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  text-wrap: balance;
  margin: 0 0 .6rem;
}
.cm-v4-h3 {
  font-family: var(--v4-font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem);
  line-height: 1.12;
  margin: 0 0 1rem;
}
.cm-v4-lead {
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  line-height: 1.6;
  color: var(--v4-ink-mid);
  max-width: 60ch;
  margin: 0 auto;
}

/* Buttons ───────────────────────────────────────────────────────── */
.cm-v4-btn {
  --btn-bg: var(--v4-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--v4-font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s var(--v4-ease), box-shadow .25s var(--v4-ease), background-color .25s var(--v4-ease);
}
.cm-v4-btn svg { width: 1.1em; height: 1.1em; }
.cm-v4-btn--primary {
  background: linear-gradient(135deg, var(--v4-teal), var(--v4-teal-dp));
  color: #fff;
  box-shadow: 0 12px 30px -12px rgba(44,83,78,.6);
}
.cm-v4-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -14px rgba(44,83,78,.7);
}
.cm-v4-btn--ghost {
  background: transparent;
  color: var(--v4-ink);
  border-color: var(--v4-line);
}
.cm-v4-btn--ghost:hover {
  transform: translateY(-2px);
  border-color: var(--v4-teal);
  color: var(--v4-teal-dp);
  box-shadow: var(--v4-shadow-sm);
}
.cm-v4-btn--block { width: 100%; }
.cm-v4-btn.is-busy { opacity: .75; cursor: progress; }

/* Decorative blobs ──────────────────────────────────────────────── */
.cm-v4-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: .55;
  z-index: 0;
  pointer-events: none;
}
.cm-v4-blob--a { width: 30rem; height: 30rem; background: radial-gradient(circle, rgba(198,127,107,.45), transparent 70%); top: -8rem; right: -6rem; }
.cm-v4-blob--b { width: 26rem; height: 26rem; background: radial-gradient(circle, rgba(61,107,101,.35), transparent 70%); bottom: -10rem; left: -8rem; }

/* ================================================================
   HERO
   ================================================================ */
.cm-v4-hero {
  position: relative;
  background:
    radial-gradient(120% 130% at 90% -20%, rgba(184,115,51,.10), transparent 55%),
    radial-gradient(90% 90% at -10% 110%, rgba(61,107,101,.10), transparent 52%),
    var(--v4-cream);
  padding: 3.5rem 1.25rem 3rem;
  overflow: hidden;
}
.cm-v4-hero__blobs { position: absolute; inset: 0; }
.cm-v4-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 2.5rem;
}
.cm-v4-hero__copy { max-width: 40rem; }
.cm-v4-hero__title {
  font-family: var(--v4-font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 1.5rem + 6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 0 0 1.1rem;
  text-wrap: balance;
}
.cm-v4-hero__title em {
  font-style: italic;
  color: var(--v4-amber);
}
.cm-v4-hero__sub {
  font-size: clamp(1.05rem, 1rem + .4vw, 1.28rem);
  line-height: 1.6;
  color: var(--v4-ink-mid);
  max-width: 46ch;
  margin: 0 0 1.75rem;
}
.cm-v4-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-bottom: 2rem;
}
.cm-v4-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--v4-line);
}
.cm-v4-trust-strip li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--v4-ink-mid);
}
.cm-v4-trust-strip span { font-size: 1.05rem; }

/* Hero visual — layered phone + floating cards */
.cm-v4-hero__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 460px;
  margin-top: .5rem;
}
.cm-v4-phone {
  position: relative;
  width: min(260px, 74vw);
  border-radius: 2.2rem;
  background: #0d0a06;
  padding: .5rem;
  box-shadow: var(--v4-shadow-lg);
}
.cm-v4-phone__notch {
  position: absolute;
  top: .95rem; left: 50%;
  transform: translateX(-50%);
  width: 34%; height: .5rem;
  background: #0d0a06;
  border-radius: 999px;
  z-index: 2;
}
.cm-v4-phone__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.75rem;
}
.cm-v4-phone--hero { z-index: 1; transform: rotate(-2deg); }

.cm-v4-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .6rem;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--v4-line);
  border-radius: .9rem;
  padding: .6rem .8rem;
  box-shadow: var(--v4-shadow);
  z-index: 3;
}
.cm-v4-float strong { display: block; font-size: .82rem; color: var(--v4-ink); }
.cm-v4-float span:not(.cm-v4-float__check) { font-size: .72rem; color: var(--v4-ink-low); }
.cm-v4-float--routine  { top: 8%;  left: -4%; animation: v4-bob 6s ease-in-out infinite; }
.cm-v4-float--match    { bottom: 16%; right: -6%; animation: v4-bob 7s ease-in-out .4s infinite; }
.cm-v4-float--reminder { bottom: -2%; left: 6%; animation: v4-bob 6.5s ease-in-out .8s infinite; }
.cm-v4-float__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem; height: 1.7rem;
  border-radius: 50%;
  background: var(--v4-teal);
  color: #fff;
  flex: none;
}
.cm-v4-float__check svg { width: 1rem; height: 1rem; }
.cm-v4-ring {
  position: relative;
  width: 2.2rem; height: 2.2rem;
  flex: none;
  display: grid;
  place-items: center;
}
.cm-v4-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.cm-v4-ring__track { fill: none; stroke: var(--v4-rose-lt); stroke-width: 4; }
.cm-v4-ring__fill  { fill: none; stroke: var(--v4-amber); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 113; stroke-dashoffset: 28; animation: v4-ring 1.4s var(--v4-ease) forwards; }
.cm-v4-ring span { font-size: .72rem; font-weight: 700; color: var(--v4-teal-dp); }

@keyframes v4-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes v4-ring { from { stroke-dashoffset: 113; } }

/* ================================================================
   INTERACTIVE CURL PREVIEW
   ================================================================ */
.cm-v4-preview {
  padding: 4rem 1.25rem;
  background: var(--v4-white);
}
.cm-v4-preview__head { text-align: center; max-width: 46rem; margin: 0 auto 2.5rem; }
.cm-v4-preview__grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  gap: 1.75rem;
}
.cm-v4-choice-set { border: 0; padding: 0; margin: 0 0 1.5rem; }
.cm-v4-choice-legend {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--v4-ink-mid);
  padding: 0;
  margin-bottom: .7rem;
}
.cm-v4-chip-row { display: flex; flex-wrap: wrap; gap: .55rem; }
.cm-v4-chip {
  appearance: none;
  border: 1.5px solid var(--v4-line);
  background: var(--v4-cream);
  color: var(--v4-ink);
  padding: .6rem 1rem;
  border-radius: 999px;
  font-family: var(--v4-font-body);
  font-size: .92rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform .18s var(--v4-ease), border-color .18s var(--v4-ease), background-color .18s var(--v4-ease), color .18s var(--v4-ease);
}
.cm-v4-chip:hover { transform: translateY(-1px); border-color: var(--v4-teal); }
.cm-v4-chip.is-active {
  background: var(--v4-teal);
  border-color: var(--v4-teal);
  color: #fff;
  box-shadow: var(--v4-shadow-sm);
}
.cm-v4-preview__note { font-size: .82rem; color: var(--v4-ink-low); margin: .5rem 0 0; }

.cm-v4-sample {
  background: linear-gradient(160deg, var(--v4-cream), var(--v4-white));
  border: 1px solid var(--v4-line);
  border-radius: var(--v4-radius-lg);
  padding: 1.75rem;
  box-shadow: var(--v4-shadow);
}
.cm-v4-sample__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.cm-v4-sample__tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.cm-v4-tag {
  font-size: .8rem;
  font-weight: 600;
  background: var(--v4-teal);
  color: #fff;
  padding: .35rem .75rem;
  border-radius: 999px;
}
.cm-v4-tag--goal { background: var(--v4-amber); }
.cm-v4-sample__steps {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: .6rem;
}
.cm-v4-sample__steps li {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: var(--v4-white);
  border: 1px solid var(--v4-line);
  border-radius: .8rem;
  padding: .8rem 1rem;
  font-weight: 500;
}
.cm-v4-sample__steps.is-swap li { animation: v4-rise .45s var(--v4-ease) both; }
.cm-v4-sample__steps.is-swap li:nth-child(2){ animation-delay:.05s; }
.cm-v4-sample__steps.is-swap li:nth-child(3){ animation-delay:.1s; }
.cm-v4-sample__steps.is-swap li:nth-child(4){ animation-delay:.15s; }
.cm-v4-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--v4-teal-lt, rgba(61,107,101,.12));
  background: rgba(61,107,101,.12);
  color: var(--v4-teal-dp);
  font-size: .82rem;
  font-weight: 700;
  flex: none;
}
@keyframes v4-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ================================================================
   HOW IT WORKS
   ================================================================ */
.cm-v4-how {
  padding: 4rem 1.25rem;
  background: var(--v4-cream-dp);
}
.cm-v4-how__head { text-align: center; max-width: 44rem; margin: 0 auto 2.5rem; }
.cm-v4-steps {
  max-width: 1100px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.cm-v4-stepcard {
  position: relative;
  background: var(--v4-white);
  border: 1px solid var(--v4-line);
  border-radius: var(--v4-radius);
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: var(--v4-shadow);
  transition: transform .3s var(--v4-ease), box-shadow .3s var(--v4-ease);
}
.cm-v4-stepcard:hover { transform: translateY(-4px); box-shadow: var(--v4-shadow-lg); }
.cm-v4-stepcard__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--v4-amber), var(--v4-amber-lt));
  color: #fff;
  font-family: var(--v4-font-display);
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.cm-v4-stepcard h3 { font-size: 1.15rem; margin: 0 0 .5rem; }
.cm-v4-stepcard p { font-size: .95rem; line-height: 1.55; color: var(--v4-ink-mid); margin: 0; }

/* ================================================================
   APP SHOWCASE (tabs)
   ================================================================ */
.cm-v4-showcase {
  padding: 4rem 1.25rem;
  background: var(--v4-white);
}
.cm-v4-showcase__head { text-align: center; max-width: 46rem; margin: 0 auto 2.5rem; }
.cm-v4-showcase__grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  gap: 2rem;
}
.cm-v4-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}
.cm-v4-tab {
  appearance: none;
  border: 1.5px solid var(--v4-line);
  background: var(--v4-cream);
  color: var(--v4-ink-mid);
  padding: .65rem 1.15rem;
  border-radius: 999px;
  font-family: var(--v4-font-body);
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .18s var(--v4-ease), border-color .18s var(--v4-ease), background-color .18s var(--v4-ease), color .18s var(--v4-ease);
}
.cm-v4-tab:hover { transform: translateY(-1px); border-color: var(--v4-teal); color: var(--v4-teal-dp); }
.cm-v4-tab.is-active {
  background: var(--v4-teal);
  border-color: var(--v4-teal);
  color: #fff;
  box-shadow: var(--v4-shadow-sm);
}
.cm-v4-showcase__stage {
  display: grid;
  gap: 2rem;
  align-items: center;
  justify-items: center;
  background: linear-gradient(160deg, var(--v4-cream), var(--v4-white));
  border: 1px solid var(--v4-line);
  border-radius: var(--v4-radius-lg);
  padding: 2.25rem 1.5rem;
}
.cm-v4-phone--stage { transform: none; width: min(250px, 66vw); }
.cm-v4-phone__img.is-fading { opacity: 0; transition: opacity .16s ease; }
.cm-v4-phone--stage .cm-v4-phone__img { transition: opacity .16s ease; }
.cm-v4-showcase__copy { text-align: center; max-width: 34rem; }
.cm-v4-showcase__copy h3 { font-family: var(--v4-font-display); font-weight: 400; font-size: clamp(1.4rem,1.1rem+1vw,1.8rem); margin: 0 0 .6rem; }
.cm-v4-showcase__copy p { font-size: 1rem; line-height: 1.6; color: var(--v4-ink-mid); margin: 0; }

/* ================================================================
   JOURNEY (replaces testimonials)
   ================================================================ */
.cm-v4-journey {
  padding: 4rem 1.25rem;
  background: var(--v4-cream-dp);
}
.cm-v4-journey__head { text-align: center; max-width: 46rem; margin: 0 auto 2.5rem; }
.cm-v4-journey__grid {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 1.25rem;
}
.cm-v4-jcard {
  border-radius: var(--v4-radius);
  padding: 1.75rem;
  border: 1px solid var(--v4-line);
}
.cm-v4-jcard h3 {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--v4-font-display);
  font-weight: 400;
  font-size: 1.35rem;
  margin: 0 0 1.1rem;
}
.cm-v4-jcard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.cm-v4-jcard li {
  position: relative;
  padding-left: 1.6rem;
  font-size: .96rem;
  line-height: 1.45;
  color: var(--v4-ink-mid);
}
.cm-v4-jcard--before { background: var(--v4-white); }
.cm-v4-jcard--before li::before {
  content: "";
  position: absolute;
  left: 0; top: .5rem;
  width: .7rem; height: .1rem;
  background: var(--v4-ink-low);
  border-radius: 2px;
}
.cm-v4-jcard--after {
  background: linear-gradient(160deg, rgba(61,107,101,.08), var(--v4-white));
  border-color: rgba(61,107,101,.25);
}
.cm-v4-jcard--after li { color: var(--v4-ink); }
.cm-v4-jcard--after li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  color: var(--v4-teal);
  font-weight: 700;
}

/* ================================================================
   BENEFITS
   ================================================================ */
.cm-v4-benefits {
  padding: 4rem 1.25rem;
  background: var(--v4-white);
}
.cm-v4-benefits__head { text-align: center; max-width: 46rem; margin: 0 auto 2.5rem; }
.cm-v4-benefit-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}
.cm-v4-benefit {
  background: var(--v4-cream);
  border: 1px solid var(--v4-line);
  border-radius: var(--v4-radius);
  padding: 1.5rem;
  transition: transform .3s var(--v4-ease), box-shadow .3s var(--v4-ease);
}
.cm-v4-benefit:hover { transform: translateY(-4px); box-shadow: var(--v4-shadow-lg); }
.cm-v4-benefit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: .9rem;
  background: rgba(184,115,51,.12);
  font-size: 1.5rem;
  margin-bottom: .9rem;
}
.cm-v4-benefit h3 { font-size: 1.1rem; margin: 0 0 .4rem; }
.cm-v4-benefit p { font-size: .93rem; line-height: 1.5; color: var(--v4-ink-mid); margin: 0; }

/* ================================================================
   CORNER / BRAND STORY
   ================================================================ */
.cm-v4-corner {
  padding: 4rem 1.25rem;
  background:
    radial-gradient(90% 120% at 50% -10%, rgba(198,127,107,.14), transparent 60%),
    var(--v4-cream-dp);
}
.cm-v4-corner__inner { max-width: 46rem; margin: 0 auto; text-align: center; }
.cm-v4-corner__lead {
  font-size: clamp(1.02rem,.98rem+.35vw,1.18rem);
  line-height: 1.65;
  color: var(--v4-ink-mid);
  margin: 0 auto 1.75rem;
  max-width: 58ch;
}
.cm-v4-corner__pills { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; }
.cm-v4-corner__pills span {
  background: var(--v4-white);
  border: 1px solid var(--v4-line);
  border-radius: 999px;
  padding: .5rem 1rem;
  font-size: .88rem;
  font-weight: 500;
  color: var(--v4-ink);
}

/* ================================================================
   SIGNUP
   ================================================================ */
.cm-v4-signup {
  padding: 4rem 1.25rem;
  background: var(--v4-white);
}
.cm-v4-signup__card {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  gap: 2rem;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(61,107,101,.12), transparent 55%),
    linear-gradient(160deg, var(--v4-cream), var(--v4-white));
  border: 1px solid var(--v4-line);
  border-radius: var(--v4-radius-lg);
  padding: 2.25rem 1.75rem;
  box-shadow: var(--v4-shadow);
}
.cm-v4-signup__copy .cm-v4-h2 { text-align: left; }
.cm-v4-signup__copy .cm-v4-lead { margin-left: 0; }
.cm-v4-signup__perks {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}
.cm-v4-signup__perks li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .96rem;
  color: var(--v4-ink);
}

/* ================================================================
   FORMS (shared: signup + contact)
   ================================================================ */
.cm-v4-form { display: block; }
.cm-v4-form--card {
  background: var(--v4-white);
  border: 1px solid var(--v4-line);
  border-radius: var(--v4-radius-lg);
  padding: 2rem 1.75rem;
  box-shadow: var(--v4-shadow);
}
.cm-v4-field { margin-bottom: 1.1rem; }
.cm-v4-label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--v4-ink);
  margin-bottom: .45rem;
}
.cm-v4-input-wrap { position: relative; }
.cm-v4-input-icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  width: 1.15rem; height: 1.15rem;
  color: var(--v4-ink-low);
  pointer-events: none;
}
.cm-v4-input {
  width: 100%;
  box-sizing: border-box;
  padding: .95rem 1rem .95rem 2.75rem;
  border: 1.5px solid var(--v4-line);
  border-radius: .85rem;
  background: var(--v4-cream);
  font-family: var(--v4-font-body);
  font-size: 1rem;
  color: var(--v4-ink);
  transition: border-color .18s var(--v4-ease), box-shadow .18s var(--v4-ease), background-color .18s var(--v4-ease);
}
.cm-v4-input::placeholder { color: var(--v4-ink-low); }
.cm-v4-input:focus,
.cm-v4-input:focus-visible {
  outline: none;
  border-color: var(--v4-teal);
  background: var(--v4-white);
  box-shadow: 0 0 0 4px rgba(61,107,101,.14);
}
.cm-v4-textarea {
  padding-left: 1rem;
  min-height: 8rem;
  resize: vertical;
  line-height: 1.55;
}
.cm-v4-input-wrap--select .cm-v4-select { padding-right: 2.75rem; cursor: pointer; appearance: none; -webkit-appearance: none; }
.cm-v4-select-chevron {
  position: absolute;
  top: 50%; right: 1rem;
  transform: translateY(-50%);
  width: 1.1rem; height: 1.1rem;
  color: var(--v4-ink-mid);
  pointer-events: none;
}
.cm-v4-hint { display: block; font-size: .8rem; color: var(--v4-ink-low); margin-top: .4rem; }
.cm-v4-error { display: block; font-size: .82rem; color: #b4402a; margin-top: .35rem; font-weight: 500; }
.cm-v4-field-footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: .4rem; }
.cm-v4-char-count { font-size: .78rem; color: var(--v4-ink-low); font-variant-numeric: tabular-nums; }
.cm-v4-char-count.is-warning { color: var(--v4-amber); }
.cm-v4-footnote { font-size: .82rem; color: var(--v4-ink-low); text-align: center; margin: 1rem 0 0; }

.cm-v4-optional { margin-bottom: 1.1rem; }
.cm-v4-optional > summary {
  cursor: pointer;
  font-size: .88rem;
  font-weight: 600;
  color: var(--v4-teal-dp);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem 0;
}
.cm-v4-optional > summary::-webkit-details-marker { display: none; }
.cm-v4-optional > summary::before { content: "+"; font-size: 1.1rem; line-height: 1; }
.cm-v4-optional[open] > summary::before { content: "–"; }
.cm-v4-field--optional { margin-top: .75rem; margin-bottom: 0; }

.cm-v4-turnstile { margin: 0 0 1.1rem; min-height: 65px; }
.cm-v4-turnstile .cf-turnstile { display: flex; justify-content: center; }

/* Reuse for the ASP.NET model-only validation summary */
.cm-v4-form .cm-form-feedback ul { margin: 0 0 1rem; padding: .85rem 1rem .85rem 2.4rem; background: rgba(180,64,42,.08); border: 1px solid rgba(180,64,42,.25); border-radius: .75rem; color: #b4402a; font-size: .9rem; }
.cm-v4-form .cm-form-feedback:empty { display: none; }

/* ================================================================
   SIGN-OFF LOGO
   ================================================================ */
.cm-v4-signoff {
  text-align: center;
  padding: 3rem 1.25rem 3.5rem;
  background: var(--v4-cream);
}
.cm-v4-signoff__img { height: 46px; width: auto; opacity: .9; }
.cm-v4-signoff p { margin: .75rem 0 0; font-size: .9rem; color: var(--v4-ink-low); font-style: italic; }

/* ================================================================
   CONTACT PAGE
   ================================================================ */
.cm-v4-contact {
  position: relative;
  padding: 3rem 1.25rem 4rem;
  background:
    radial-gradient(90% 90% at 100% -10%, rgba(184,115,51,.10), transparent 55%),
    var(--v4-cream);
  overflow: hidden;
}
.cm-v4-contact__blobs { position: absolute; inset: 0; }
.cm-v4-contact__grid {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 2.25rem;
}
.cm-v4-contact__title { font-size: clamp(2.4rem,1.6rem+4vw,4rem); margin-bottom: 1rem; }
.cm-v4-contact__intro .cm-v4-lead { margin-left: 0; }
.cm-v4-contact__topics {
  list-style: none;
  margin: 1.75rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}
.cm-v4-contact__topics li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .92rem;
  font-weight: 500;
  color: var(--v4-ink);
  background: var(--v4-white);
  border: 1px solid var(--v4-line);
  border-radius: .75rem;
  padding: .6rem .8rem;
  transition: transform .2s var(--v4-ease), border-color .2s var(--v4-ease);
}
.cm-v4-contact__topics li:hover { transform: translateY(-2px); border-color: var(--v4-teal); }
.cm-v4-contact__direct { margin-bottom: 1.75rem; }
.cm-v4-contact__method {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  color: var(--v4-ink);
  background: var(--v4-white);
  border: 1px solid var(--v4-line);
  border-radius: var(--v4-radius);
  padding: .9rem 1.1rem;
  box-shadow: var(--v4-shadow);
  transition: transform .2s var(--v4-ease), box-shadow .2s var(--v4-ease);
}
.cm-v4-contact__method:hover { transform: translateY(-2px); box-shadow: var(--v4-shadow-lg); }
.cm-v4-contact__method-icon { font-size: 1.4rem; }
.cm-v4-contact__method-label { display: block; font-size: .78rem; color: var(--v4-ink-low); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.cm-v4-contact__brand { display: flex; align-items: center; gap: .9rem; opacity: .85; }
.cm-v4-contact__brand img { height: 42px; width: auto; }
.cm-v4-contact__brand p { margin: 0; font-size: .88rem; font-style: italic; color: var(--v4-ink-low); }

/* ================================================================
   SITE NAV enhancements (mobile menu + scrolled state)
   These only extend the existing .cm-site-nav (no override of its base).
   ================================================================ */
.cm-site-nav.is-scrolled { box-shadow: 0 4px 20px -8px rgba(26,18,8,.18); }
.cm-site-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  border: 1px solid var(--v4-line);
  border-radius: .7rem;
  background: var(--v4-white);
  cursor: pointer;
  padding: 0 11px;
}
.cm-site-nav__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--v4-ink);
  border-radius: 2px;
  transition: transform .25s var(--v4-ease), opacity .2s var(--v4-ease);
}
.cm-site-nav.is-open .cm-site-nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cm-site-nav.is-open .cm-site-nav__toggle span:nth-child(2) { opacity: 0; }
.cm-site-nav.is-open .cm-site-nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* Two-column benefits at ≥560px */
@media (min-width: 560px) {
  .cm-v4-benefit-grid { grid-template-columns: 1fr 1fr; }
  .cm-v4-preview__grid { grid-template-columns: 1.1fr .9fr; align-items: start; }
  .cm-v4-steps { grid-template-columns: 1fr 1fr; }
  .cm-v4-journey__grid { grid-template-columns: 1fr 1fr; }
}

/* Desktop hero + larger layouts at ≥820px */
@media (min-width: 820px) {
  .cm-v4-hero { padding: 5rem 2rem 4.5rem; }
  .cm-v4-hero__inner { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 3rem; }
  .cm-v4-hero__visual { min-height: 560px; }
  .cm-v4-phone { width: min(300px, 30vw); }

  .cm-v4-benefit-grid { grid-template-columns: repeat(3, 1fr); }
  .cm-v4-steps { grid-template-columns: repeat(4, 1fr); }

  .cm-v4-showcase__stage { grid-template-columns: auto 1fr; padding: 2.75rem; }
  .cm-v4-showcase__copy { text-align: left; }

  .cm-v4-signup__card { grid-template-columns: 1fr 1fr; align-items: center; padding: 3rem; }

  .cm-v4-contact { padding: 4.5rem 2rem 5rem; }
  .cm-v4-contact__grid { grid-template-columns: 1fr 1fr; align-items: start; gap: 3.5rem; }
}

@media (min-width: 1024px) {
  .cm-v4-preview, .cm-v4-how, .cm-v4-showcase, .cm-v4-journey, .cm-v4-benefits, .cm-v4-corner, .cm-v4-signup { padding-left: 2rem; padding-right: 2rem; }
}

/* Mobile nav: hide inline links, show hamburger, dropdown panel */
@media (max-width: 819px) {
  .cm-site-nav__toggle { display: flex; }
  .cm-site-nav__links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    background: var(--v4-white);
    border-bottom: 1px solid var(--v4-line);
    box-shadow: 0 20px 40px -16px rgba(26,18,8,.28);
    padding: .75rem 1.25rem 1.25rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height .3s var(--v4-ease), opacity .25s var(--v4-ease);
  }
  .cm-site-nav.is-open .cm-site-nav__links {
    max-height: 24rem;
    opacity: 1;
    pointer-events: auto;
  }
  .cm-site-nav__links .cm-site-nav__link { padding: .85rem .25rem; border-bottom: 1px solid var(--v4-line); }
  .cm-site-nav__links .cm-site-nav__cta { margin-top: .6rem; text-align: center; }
}

/* ================================================================
   ACCESSIBILITY — focus + reduced motion
   ================================================================ */
.cm-v4-btn:focus-visible,
.cm-v4-chip:focus-visible,
.cm-v4-tab:focus-visible,
.cm-site-nav__toggle:focus-visible,
.cm-v4-optional summary:focus-visible,
.cm-v4-contact__method:focus-visible {
  outline: 3px solid var(--v4-teal);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cm-v4-float--routine,
  .cm-v4-float--match,
  .cm-v4-float--reminder { animation: none; }
  .cm-v4-ring__fill { animation: none; stroke-dashoffset: 28; }
  .cm-v4-sample__steps.is-swap li { animation: none; }
  .cm-v4-btn, .cm-v4-chip, .cm-v4-tab, .cm-v4-stepcard, .cm-v4-benefit,
  .cm-v4-contact__topics li, .cm-v4-contact__method, .cm-v4-phone__img { transition: none; }
  .cm-v4-phone--hero { transform: none; }
}

/* ================================================================
   DOWNLOAD PAGE (v4)
   ================================================================ */
.cm-v4-download {
  position: relative;
  overflow: hidden;
  padding: 3.5rem 1.25rem 4rem;
  background:
    radial-gradient(120% 130% at 90% -20%, rgba(184,115,51,.10), transparent 55%),
    radial-gradient(90% 90% at -10% 110%, rgba(61,107,101,.10), transparent 52%),
    var(--v4-cream);
}
.cm-v4-download__blobs { position: absolute; inset: 0; }
.cm-v4-download__inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
.cm-v4-download__logo { width: 96px; height: 96px; margin-bottom: 1rem; }
.cm-v4-download__title {
  font-family: var(--v4-font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.6rem + 4vw, 4rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: 0 0 1rem;
}
.cm-v4-download__mark { color: var(--v4-amber); }
.cm-v4-download__tm { font-size: .4em; vertical-align: super; color: var(--v4-ink-low); }
.cm-v4-download__sub {
  font-size: clamp(1.02rem, .98rem + .35vw, 1.18rem);
  line-height: 1.6;
  color: var(--v4-ink-mid);
  max-width: 52ch;
  margin: 0 0 1.75rem;
}
.cm-v4-store-buttons { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 1.75rem; }
.cm-v4-store-btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .8rem 1.3rem;
  border-radius: .9rem;
  background: var(--v4-ink);
  color: #fff;
  text-decoration: none;
  transition: transform .25s var(--v4-ease), box-shadow .25s var(--v4-ease), opacity .25s var(--v4-ease);
  box-shadow: var(--v4-shadow-sm);
}
.cm-v4-store-btn:hover { transform: translateY(-2px); box-shadow: var(--v4-shadow-lg); }
.cm-v4-store-btn__icon { width: 1.6rem; height: 1.6rem; flex: none; }
.cm-v4-store-btn__text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.cm-v4-store-btn__text small { font-size: .68rem; opacity: .8; }
.cm-v4-store-btn__text strong { font-size: 1.05rem; font-weight: 600; }
.cm-v4-store-btn--soon { opacity: .55; cursor: default; pointer-events: none; }
.cm-v4-download__points {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: .65rem;
}
.cm-v4-download__points li {
  position: relative;
  padding-left: 1.7rem;
  font-size: .98rem;
  line-height: 1.45;
  color: var(--v4-ink);
}
.cm-v4-download__points li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  color: var(--v4-teal);
  font-weight: 700;
}
.cm-v4-download__legal { font-size: .8rem; color: var(--v4-ink-low); margin: 0; }
.cm-v4-download__visual { display: flex; justify-content: center; }
.cm-v4-download__img {
  width: min(340px, 82vw);
  height: auto;
  border-radius: var(--v4-radius-lg);
  box-shadow: var(--v4-shadow-lg);
}

@media (min-width: 820px) {
  .cm-v4-download { padding: 5rem 2rem; }
  .cm-v4-download__inner { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; }
}

/* ================================================================
   CONTENT / LEGAL PAGES (Privacy, Terms) (v4)
   Visual shell only — copy is untouched.
   ================================================================ */
.cm-v4-content {
  background: var(--v4-cream);
  padding: 3rem 1.25rem 4rem;
}
.cm-v4-content__inner { max-width: 760px; margin: 0 auto; }
.cm-v4-content__header {
  text-align: center;
  padding-bottom: 1.75rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--v4-line);
}
.cm-v4-content__title {
  font-family: var(--v4-font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
  line-height: 1.08;
  margin: 0 0 .5rem;
}
.cm-v4-content__date { font-size: .92rem; color: var(--v4-ink-low); margin: 0; }
.cm-v4-content__body {
  background: var(--v4-white);
  border: 1px solid var(--v4-line);
  border-radius: var(--v4-radius-lg);
  padding: 2rem 1.75rem;
  box-shadow: var(--v4-shadow);
}
.cm-v4-content__body > p:first-child { margin-top: 0; }
.cm-v4-content__body p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--v4-ink-mid);
  margin: 0 0 1.1rem;
}
.cm-v4-content__body h2 {
  font-family: var(--v4-font-display);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--v4-ink);
  margin: 2rem 0 .75rem;
  scroll-margin-top: 5rem;
}
.cm-v4-content__body h2:first-of-type { margin-top: .5rem; }
.cm-v4-content__body ul { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.cm-v4-content__body li { font-size: 1rem; line-height: 1.6; color: var(--v4-ink-mid); margin-bottom: .5rem; }
.cm-v4-content__body strong { color: var(--v4-ink); }
.cm-v4-content__body a { color: var(--v4-teal-dp); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cm-v4-content__body a:hover { color: var(--v4-amber); }

@media (min-width: 820px) {
  .cm-v4-content { padding: 4rem 2rem 5rem; }
  .cm-v4-content__body { padding: 2.75rem 2.5rem; }
}

/* ================================================================
   MESSAGE / CONFIRMATION CARDS (Success, Error) (v4)
   ================================================================ */
.cm-v4-message {
  position: relative;
  overflow: hidden;
  min-height: 60vh;
  display: grid;
  place-items: center;
  padding: 3rem 1.25rem;
  background:
    radial-gradient(90% 90% at 50% -10%, rgba(198,127,107,.14), transparent 60%),
    var(--v4-cream);
}
.cm-v4-message__blobs { position: absolute; inset: 0; }
.cm-v4-message__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 30rem;
  text-align: center;
  background: var(--v4-white);
  border: 1px solid var(--v4-line);
  border-radius: var(--v4-radius-lg);
  padding: 2.5rem 1.75rem;
  box-shadow: var(--v4-shadow-lg);
}
.cm-v4-message__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem; height: 4rem;
  border-radius: 50%;
  background: rgba(61,107,101,.1);
  font-size: 2rem;
  margin-bottom: 1rem;
}
.cm-v4-message__title {
  font-family: var(--v4-font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
  line-height: 1.1;
  margin: 0 0 .75rem;
}
.cm-v4-message__text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--v4-ink-mid);
  margin: 0 0 1.5rem;
}
.cm-v4-message__text strong { color: var(--v4-ink); }
.cm-v4-message__meta { font-size: .82rem; color: var(--v4-ink-low); margin: 1rem 0 0; }
.cm-v4-message__meta code {
  background: var(--v4-cream);
  border: 1px solid var(--v4-line);
  border-radius: .4rem;
  padding: .1rem .4rem;
  font-size: .8rem;
}
.cm-v4-message .cm-v4-btn { text-decoration: none; }

/* ── Final-scan fixes ─────────────────────────────────────────────── */
/* Anchored sections land below the sticky nav instead of under it. */
#how, #app, #signup { scroll-margin-top: 5.5rem; }

/* Download screenshot sits in the same phone frame as the homepage. */
.cm-v4-download__visual .cm-v4-phone { width: min(300px, 78vw); }

/* Hair-type tip under the sample routine. */
.cm-v4-sample__tip {
  font-size: .88rem;
  line-height: 1.5;
  color: var(--v4-ink-mid);
  background: rgba(184,115,51,.08);
  border-radius: .7rem;
  padding: .75rem .9rem;
  margin: 0 0 1.25rem;
}

/* ================================================================
   INTERACTIVE DEMO — "Build my routine" (the closer)
   ================================================================ */
.cm-v4-demo, .cm-v4-band { font-family: var(--v4-font-body); color: var(--v4-ink); overflow-x: clip; }
#try { scroll-margin-top: 5.5rem; }
.cm-v4-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hero: the demo button is the loud one */
.cm-v4-btn--demo {
  background: linear-gradient(135deg, var(--v4-amber), #c9884a);
  color: #fff;
  box-shadow: 0 12px 30px -12px rgba(184,115,51,.7);
  position: relative;
}
.cm-v4-btn--demo:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(184,115,51,.8); }
.cm-v4-btn--demo svg { width: 1.05em; height: 1.05em; }
.cm-v4-btn__pill {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255,255,255,.22); border-radius: 999px; padding: .28rem .55rem; margin-left: .15rem;
}
.cm-site-nav__link--demo { color: var(--v4-amber); font-weight: 600; }

/* Section shell — visibly different from the rest of the page */
.cm-v4-demo {
  position: relative;
  padding: 4rem 1.25rem;
  background:
    radial-gradient(110% 110% at 100% 0%, rgba(184,115,51,.14), transparent 55%),
    radial-gradient(100% 100% at 0% 100%, rgba(61,107,101,.14), transparent 55%),
    var(--v4-cream-dp);
  overflow: hidden;
}
.cm-v4-demo__blobs { position: absolute; inset: 0; }
.cm-v4-demo__inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; }
.cm-v4-demo__head { text-align: center; margin-bottom: 2rem; }
.cm-v4-demo__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--v4-white); border: 1px solid var(--v4-line); border-radius: 999px;
  padding: .45rem .9rem; font-size: .8rem; font-weight: 600; color: var(--v4-teal-dp);
  margin-bottom: 1rem; box-shadow: var(--v4-shadow);
}
.cm-v4-demo__dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--v4-amber); animation: v4-pulse 1.8s ease-in-out infinite; }
@keyframes v4-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .55; } }

.cm-v4-demo__card {
  position: relative;
  background: var(--v4-white);
  border: 1px solid var(--v4-line);
  border-radius: var(--v4-radius-lg);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--v4-shadow-lg), 0 0 0 8px rgba(184,115,51,.07);
}

/* Progress */
.cm-v4-demo__progress { margin-bottom: 1.5rem; }
.cm-v4-demo__bar { display: block; height: .4rem; background: var(--v4-cream-dp); border-radius: 999px; overflow: hidden; }
.cm-v4-demo__bar-fill { display: block; height: 100%; width: 8%; background: linear-gradient(90deg, var(--v4-teal), var(--v4-amber)); border-radius: 999px; transition: width .6s var(--v4-ease); }
.cm-v4-demo__dots { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; justify-content: space-between; gap: .5rem; }
.cm-v4-demo__dots li { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: var(--v4-ink-low); transition: color .3s; }
.cm-v4-demo__dots li span {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--v4-cream-dp); color: var(--v4-ink-low); font-size: .72rem; transition: background-color .3s, color .3s, transform .3s var(--v4-ease);
}
.cm-v4-demo__dots li.is-active { color: var(--v4-ink); }
.cm-v4-demo__dots li.is-active span { background: var(--v4-teal); color: #fff; transform: scale(1.12); }
.cm-v4-demo__dots li.is-done span { background: var(--v4-amber); color: #fff; }

/* Steps */
.cm-v4-demo__step { display: none; }
.cm-v4-demo__step.is-active { display: block; animation: v4-rise .45s var(--v4-ease) both; }
.cm-v4-demo__q { display: flex; align-items: center; gap: .6rem; font-family: var(--v4-font-display); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); margin: 0 0 1.1rem; }
.cm-v4-demo__qn { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: linear-gradient(135deg, var(--v4-amber), var(--v4-amber-lt)); color: #fff; font-size: 1rem; flex: none; }
.cm-v4-demo__options { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.cm-v4-opt {
  appearance: none; cursor: pointer;
  display: flex; align-items: center; gap: .7rem;
  min-height: 3.5rem; padding: .85rem 1rem;
  background: var(--v4-cream); border: 2px solid var(--v4-line); border-radius: 1rem;
  font-family: var(--v4-font-body); font-size: .98rem; font-weight: 600; color: var(--v4-ink); text-align: left;
  transition: transform .2s var(--v4-ease), border-color .2s, background-color .2s, box-shadow .2s;
}
.cm-v4-opt__icon { font-size: 1.35rem; line-height: 1; flex: none; }
.cm-v4-opt:hover { transform: translateY(-2px); border-color: var(--v4-teal); box-shadow: var(--v4-shadow-sm); }
.cm-v4-opt.is-active { background: var(--v4-teal); border-color: var(--v4-teal); color: #fff; box-shadow: var(--v4-shadow-sm); }
.cm-v4-opt.is-active::after { content: "✓"; margin-left: auto; font-weight: 800; }
.cm-v4-opt.is-pop { animation: v4-pop .35s var(--v4-ease); }
@keyframes v4-pop { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }
.cm-v4-demo__back, .cm-v4-demo__restart {
  appearance: none; background: none; border: 0; cursor: pointer; padding: .5rem 0; margin-top: .9rem;
  font-family: var(--v4-font-body); font-size: .9rem; font-weight: 600; color: var(--v4-teal-dp);
}
.cm-v4-demo__back:hover, .cm-v4-demo__restart:hover { color: var(--v4-amber); }

/* Building */
.cm-v4-demo__building { display: grid; place-items: center; gap: .9rem; padding: 2rem 0; text-align: center; color: var(--v4-ink-mid); font-weight: 500; }
.cm-v4-demo__building[hidden] { display: none; }
.cm-v4-ring--lg { width: 4.5rem; height: 4.5rem; }
.cm-v4-ring--lg span { font-size: 1.6rem; animation: v4-spin 1.1s linear infinite; }
.cm-v4-ring__fill--demo { animation: none; stroke-dashoffset: 113; }
.cm-v4-ring__fill--demo.is-filling { animation: v4-ring .95s var(--v4-ease) forwards; }
@keyframes v4-spin { to { transform: rotate(360deg); } }

/* Result */
.cm-v4-demo__result { position: relative; }
.cm-v4-demo__result[hidden] { display: none; }
.cm-v4-tag--edit { appearance: none; border: 0; cursor: pointer; font-family: var(--v4-font-body); transition: transform .2s var(--v4-ease), box-shadow .2s; }
.cm-v4-tag--edit:hover { transform: translateY(-1px); box-shadow: var(--v4-shadow-sm); }
.cm-v4-sample__steps--demo li { animation: v4-rise .45s var(--v4-ease) both; animation-delay: calc(var(--i, 0) * 160ms); }
.cm-v4-step-body { display: flex; flex-direction: column; line-height: 1.25; }
.cm-v4-step-body small { font-size: .8rem; font-weight: 400; color: var(--v4-ink-low); margin-top: .15rem; }
.cm-v4-sample__steps--demo li.is-done .cm-v4-step-n { background: var(--v4-teal); color: #fff; transform: scale(1.08); }
.cm-v4-step-n { transition: background-color .25s, color .25s, transform .25s var(--v4-ease); }
.cm-v4-demo__actions { display: grid; gap: .25rem; justify-items: center; margin-bottom: .75rem; }
.cm-v4-demo__actions .cm-v4-btn { margin-top: .25rem; }
.cm-v4-btn--glow { animation: v4-glow 1.6s ease-in-out 2; }
@keyframes v4-glow { 0%,100% { box-shadow: 0 12px 30px -12px rgba(44,83,78,.6); } 50% { box-shadow: 0 0 0 10px rgba(61,107,101,.16), 0 12px 30px -12px rgba(44,83,78,.6); } }

/* Sparkles — a one-off burst when the routine lands */
.cm-v4-demo__sparkles { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.cm-v4-demo__sparkles i { position: absolute; top: 12%; left: 50%; width: .55rem; height: .55rem; border-radius: 50%; background: var(--v4-amber); opacity: 0; }
.cm-v4-demo__sparkles i:nth-child(2n) { background: var(--v4-teal); }
.cm-v4-demo__sparkles i:nth-child(3n) { background: var(--v4-rose); width: .4rem; height: .4rem; }
.cm-v4-demo__result.is-celebrate .cm-v4-demo__sparkles i { animation: v4-sparkle .9s var(--v4-ease) forwards; }
.cm-v4-demo__sparkles i:nth-child(1) { --dx: -120px; --dy: -60px; }
.cm-v4-demo__sparkles i:nth-child(2) { --dx:  110px; --dy: -70px; animation-delay: .04s; }
.cm-v4-demo__sparkles i:nth-child(3) { --dx:  -70px; --dy: -110px; animation-delay: .08s; }
.cm-v4-demo__sparkles i:nth-child(4) { --dx:   80px; --dy: -100px; animation-delay: .12s; }
.cm-v4-demo__sparkles i:nth-child(5) { --dx: -160px; --dy: -10px; animation-delay: .06s; }
.cm-v4-demo__sparkles i:nth-child(6) { --dx:  150px; --dy: -20px; animation-delay: .1s; }
.cm-v4-demo__sparkles i:nth-child(7) { --dx:  -40px; --dy: -140px; animation-delay: .14s; }
.cm-v4-demo__sparkles i:nth-child(8) { --dx:   40px; --dy: -130px; animation-delay: .02s; }
@keyframes v4-sparkle {
  0%   { opacity: 0; transform: translate(0,0) scale(.4); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1); }
}

/* Mid-page re-entry band */
.cm-v4-band { padding: 0 1.25rem 3rem; background: var(--v4-cream-dp); }
.cm-v4-band__link {
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: center; gap: 1rem;
  background: linear-gradient(135deg, rgba(61,107,101,.10), rgba(184,115,51,.12));
  border: 1px solid var(--v4-line); border-radius: var(--v4-radius);
  padding: 1rem 1.25rem; text-decoration: none; color: var(--v4-ink);
  transition: transform .25s var(--v4-ease), box-shadow .25s var(--v4-ease);
}
.cm-v4-band__link:hover { transform: translateY(-2px); box-shadow: var(--v4-shadow-lg); }
.cm-v4-band__icon { font-size: 1.6rem; flex: none; }
.cm-v4-band__text { font-size: .98rem; line-height: 1.4; color: var(--v4-ink-mid); }
.cm-v4-band__text strong { display: block; color: var(--v4-ink); }
.cm-v4-band__arrow { margin-left: auto; font-size: 1.4rem; color: var(--v4-teal-dp); transition: transform .25s var(--v4-ease); }
.cm-v4-band__link:hover .cm-v4-band__arrow { transform: translateX(6px); }

@media (min-width: 640px) {
  .cm-v4-demo__card { padding: 2.25rem 2.25rem; }
  .cm-v4-demo__options--6 { grid-template-columns: repeat(3, 1fr); }
  .cm-v4-demo__options { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 820px) {
  .cm-v4-demo { padding: 5rem 2rem; }
  .cm-v4-demo__options { grid-template-columns: repeat(4, 1fr); }
  .cm-v4-demo__options--6 { grid-template-columns: repeat(3, 1fr); }
  .cm-v4-band { padding-bottom: 4rem; }
}
.cm-v4-btn--demo:focus-visible, .cm-v4-opt:focus-visible, .cm-v4-tag--edit:focus-visible,
.cm-v4-demo__back:focus-visible, .cm-v4-demo__restart:focus-visible, .cm-v4-band__link:focus-visible {
  outline: 3px solid var(--v4-teal); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .cm-v4-demo__dot, .cm-v4-ring--lg span, .cm-v4-btn--glow, .cm-v4-opt.is-pop,
  .cm-v4-demo__step.is-active, .cm-v4-sample__steps--demo li { animation: none; }
  .cm-v4-demo__result.is-celebrate .cm-v4-demo__sparkles i { animation: none; opacity: 0; }
  .cm-v4-ring__fill--demo.is-filling { animation: none; stroke-dashoffset: 0; }
  .cm-v4-demo__bar-fill, .cm-v4-opt, .cm-v4-band__link, .cm-v4-band__arrow, .cm-v4-step-n { transition: none; }
}

/* Nav brand: logo only (artwork includes the wordmark) — give it real presence. */
.cm-site-nav__logo { height: 40px; width: auto; }
.cm-site-nav__wordmark { display: none; }
@media (max-width: 480px) { .cm-site-nav__logo { height: 34px; } }