/* =========================================================================
   <DiscoveryFlow /> — §1 of /contact  (replaces the old ContactHero)
   Build Packet 22 — Section 3 (v2, dark 3-step flow)
   Deep Navy. Two-column Step 1 (video + what-to-expect + intake form),
   Step 2 (booking), Step 3 (confirmation). Midnight Operator palette only.
   ========================================================================= */

.co-disc {
  position: relative;
  background: var(--color-primary);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* Same backdrop vocabulary as the hero this replaces. */
.co-disc::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 460px at 50% -10%, rgba(232,180,0,0.10), transparent 70%),
    radial-gradient(700px 380px at 8% 110%, rgba(255,255,255,0.03), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.co-disc::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 56px);
  mask-image: radial-gradient(85% 70% at 50% 30%, #000 30%, transparent 82%);
  pointer-events: none;
  z-index: 0;
}

.co-disc__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 120px var(--container-pad) 96px;
}

/* =========================================================================
   Stepper
   ========================================================================= */
.co-disc__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 56px;
  padding: 14px 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 50px -30px rgba(0,0,0,0.7);
  list-style: none;
}
.co-disc__step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.co-disc__step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  border: 1.5px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.55);
  background: transparent;
  transition: background 220ms var(--ease-out-soft), color 220ms var(--ease-out-soft), border-color 220ms var(--ease-out-soft);
}
.co-disc__step-num::after { content: attr(data-num); }
.co-disc__step-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.55);
  transition: color 220ms var(--ease-out-soft);
}
.co-disc__step-line {
  width: clamp(28px, 6vw, 92px);
  height: 1.5px;
  margin: 0 14px;
  border-radius: 2px;
  background: rgba(255,255,255,0.15);
  background-image: linear-gradient(90deg, var(--color-accent), var(--color-accent));
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 360ms var(--ease-out-soft);
}

/* active step */
.co-disc__step.is-active .co-disc__step-num {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
}
.co-disc__step.is-active .co-disc__step-label { color: #fff; }
/* completed step */
.co-disc__step.is-complete .co-disc__step-num {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
  font-size: 0;
}
.co-disc__step.is-complete .co-disc__step-num::after { content: "\2713"; font-size: 13px; }
.co-disc__step.is-complete .co-disc__step-label { color: rgba(255,255,255,0.82); }
/* connector fills when the step BEFORE it is complete */
.co-disc__step-line.is-filled { background-size: 100% 100%; }

/* =========================================================================
   Header
   ========================================================================= */
.co-disc__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.co-disc__title {
  margin: 0 0 20px;
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(36px, 5.2vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}
.co-disc__title .dot { color: var(--color-accent); }
.co-disc__sub {
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: #94A3B8;
  max-width: 660px;
  text-wrap: pretty;
}

/* =========================================================================
   Panels
   ========================================================================= */
.co-disc__panel { position: relative; }
.co-disc__panel[hidden] { display: none; }
.co-disc__panel { animation: co-disc-fade 380ms var(--ease-out-soft) both; }
@keyframes co-disc-fade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================================
   Step 1 — two-column grid
   ========================================================================= */
.co-disc__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

/* ---------- Left column ------------------------------------------------- */
.co-disc__aside { min-width: 0; }

.co-disc__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    radial-gradient(120% 100% at 50% 0%, #16294F 0%, #0B1C42 60%, #081633 100%);
  box-shadow: 0 24px 60px -34px rgba(0,0,0,0.8);
  cursor: pointer;
}
.co-disc__video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* show the full frame so the name + captions aren't clipped */
  background: transparent;
  border: 0;
  z-index: 1;
  display: block;
}
/* Once playing: native controls, hide the decorative overlay + grid */
.co-disc__video.is-playing .co-disc__play,
.co-disc__video.is-playing .co-disc__video-tag,
.co-disc__video.is-playing .co-disc__video-label,
.co-disc__video.is-playing::after { opacity: 0; pointer-events: none; }
.co-disc__video.is-playing { cursor: default; }
.co-disc__video::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 40px);
  mask-image: radial-gradient(80% 80% at 50% 40%, #000 20%, transparent 85%);
  pointer-events: none;
}
.co-disc__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 0;
  background: var(--color-accent);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 0 8px rgba(232,180,0,0.14), 0 16px 36px -12px rgba(232,180,0,0.5);
  transition: transform 220ms var(--ease-out-soft), box-shadow 220ms var(--ease-out-soft);
  z-index: 2;
}
.co-disc__play svg { width: 22px; height: 22px; margin-left: 3px; }
.co-disc__video:hover .co-disc__play,
.co-disc__play:hover {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 0 0 10px rgba(232,180,0,0.18), 0 20px 44px -12px rgba(232,180,0,0.6);
}
.co-disc__video-label {
  position: absolute;
  left: 16px; bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.co-disc__video-tag {
  position: absolute;
  right: 14px; top: 14px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(8,16,34,0.6);
  border: 1px solid rgba(255,255,255,0.14);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}

.co-disc__expect-title {
  margin: 28px 0 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: balance;
}
.co-disc__expect {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.co-disc__expect li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: start;
}
.co-disc__expect-num {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(232,180,0,0.14);
  border: 1px solid rgba(232,180,0,0.35);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}
.co-disc__expect-h {
  margin: 3px 0 4px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: #fff;
}
.co-disc__expect-p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.62);
}

/* ---------- Right column — the form card -------------------------------- */
.co-disc__form {
  min-width: 0;
  padding: clamp(26px, 3vw, 40px);
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 30px 70px -40px rgba(0,0,0,0.8);
}

.co-disc__field { margin: 0 0 26px; }
.co-disc__field:last-child { margin-bottom: 0; }

.co-disc__label {
  display: block;
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.005em;
  color: #fff;
}
.co-disc__req { color: var(--color-accent); margin-left: 3px; }
.co-disc__help {
  display: block;
  margin: -2px 0 12px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.5);
}

/* Underline-style text inputs (First name / Work Email / Phone) */
.co-disc__input {
  width: 100%;
  font: inherit;
  font-family: var(--font-body);
  font-size: 16px;
  color: #fff;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  border-radius: 0;
  padding: 10px 2px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.co-disc__input::placeholder { color: rgba(255,255,255,0.34); }
.co-disc__input:hover { border-bottom-color: rgba(255,255,255,0.34); }
.co-disc__input:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
  box-shadow: 0 1px 0 0 var(--color-accent);
}
/* autofill on dark */
.co-disc__input:-webkit-autofill,
.co-disc__input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  transition: background-color 9999s ease-out 0s;
}

/* Textarea — bordered dark box */
.co-disc__textarea {
  width: 100%;
  font: inherit;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 14px 14px;
  min-height: 110px;
  resize: vertical;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.co-disc__textarea::placeholder { color: rgba(255,255,255,0.34); }
.co-disc__textarea:hover { border-color: rgba(255,255,255,0.26); }
.co-disc__textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

/* ---------- Single-select option rows ----------------------------------- */
.co-disc__options {
  display: grid;
  gap: 10px;
}
.co-disc__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  min-height: 52px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  background: rgba(255,255,255,0.025);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.co-disc__option input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.co-disc__option-ic {
  flex-shrink: 0;
  width: 22px; height: 22px;
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.co-disc__option-ic svg { width: 20px; height: 20px; }
.co-disc__option-txt {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
}
.co-disc__option-check {
  margin-left: auto;
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  transition: background 180ms ease, border-color 180ms ease;
}
.co-disc__option-check svg { width: 12px; height: 12px; opacity: 0; transition: opacity 160ms ease; }
.co-disc__option:hover { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.04); }
.co-disc__option.is-checked {
  border-color: var(--color-accent);
  background: rgba(232,180,0,0.08);
  box-shadow: 0 0 0 1px rgba(232,180,0,0.35);
}
.co-disc__option.is-checked .co-disc__option-check {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.co-disc__option.is-checked .co-disc__option-check svg { opacity: 1; }
.co-disc__option:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ---------- Multi-select chips ------------------------------------------ */
.co-disc__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.co-disc__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  min-height: 49px;                 /* survives zoom:0.9 -> ~44px touch target */
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,0.86);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.co-disc__chip:hover { border-color: rgba(255,255,255,0.34); background: rgba(255,255,255,0.04); }
.co-disc__chip[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-primary);
  font-weight: 600;
  box-shadow: 0 8px 22px -10px rgba(232,180,0,0.5);
}
.co-disc__chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ---------- Field-level error ------------------------------------------- */
.co-disc__error {
  display: none;
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: #FCA5A5;
}
.co-disc__field.has-error .co-disc__error { display: block; }
.co-disc__field.has-error .co-disc__input {
  border-bottom-color: #F87171;
  box-shadow: 0 1px 0 0 #F87171;
}
.co-disc__field.has-error .co-disc__textarea { border-color: #F87171; box-shadow: 0 0 0 1px #F87171; }
.co-disc__field.has-error .co-disc__options,
.co-disc__field.has-error .co-disc__chips {
  box-shadow: 0 0 0 1px rgba(248,113,113,0.6);
  border-radius: 12px;
  padding: 8px;
  margin-left: -8px;
  margin-right: -8px;
}

/* ---------- Divider + Submit -------------------------------------------- */
.co-disc__rule {
  height: 1px;
  margin: 30px 0 24px;
  background: rgba(255,255,255,0.10);
  border: 0;
}
.co-disc__submit {
  width: 100%;
  min-height: 54px;
  padding: 16px 28px;
  background: var(--color-accent);
  color: var(--color-primary);
  border: 0;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 220ms var(--ease-out-soft), transform 220ms var(--ease-out-soft), box-shadow 220ms var(--ease-out-soft);
}
.co-disc__submit:hover {
  background: var(--color-accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 16px 40px -12px rgba(232,180,0,0.55);
}
.co-disc__submit:active { transform: translateY(0); }
.co-disc__submit:disabled {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.45);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.co-disc__submit .arrow { transition: transform 200ms ease; }
.co-disc__submit:hover:not(:disabled) .arrow { transform: translateX(4px); }
.co-disc__footnote {
  margin: 16px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.45);
  text-align: center;
}

/* =========================================================================
   Step 2 — booking (dark overrides for the embedded co-booking markup)
   ========================================================================= */
.co-disc__booking { max-width: 760px; margin: 0 auto; }
.co-disc__booking .co-booking {
  background: transparent;
  border-top: 0;
  color: #fff;
}
.co-disc__booking .co-booking__inner { padding: 0; max-width: none; }
.co-disc__booking .co-booking__head { margin-bottom: 32px; }
.co-disc__booking .co-booking__eyebrow { color: var(--color-accent); }
.co-disc__booking .co-booking__title { color: #fff; }
/* .co-booking__title em inherits the solid navy-on-yellow highlight from
   co-booking.css — high contrast on this dark background too, so no override. */
/* keep the Calendly frame + founder row as bright elevated cards on the dark bg */

.co-disc__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 28px 0 0;
}
.co-disc__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 12px 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: color 180ms ease;
}
.co-disc__back:hover { color: #fff; }
.co-disc__back .arrow { transition: transform 200ms ease; }
.co-disc__back:hover .arrow { transform: translateX(-3px); }
.co-disc__continue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  min-height: 50px;
  background: var(--color-accent);
  color: var(--color-primary);
  border: 0;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background 220ms var(--ease-out-soft), transform 220ms var(--ease-out-soft), box-shadow 220ms var(--ease-out-soft);
}
.co-disc__continue:hover {
  background: var(--color-accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 16px 40px -12px rgba(232,180,0,0.55);
}
.co-disc__continue .arrow { transition: transform 200ms ease; }
.co-disc__continue:hover .arrow { transform: translateX(4px); }

/* =========================================================================
   Step 3 — confirmation
   ========================================================================= */
.co-disc__confirm {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  padding: 24px 8px 8px;
}
.co-disc__confirm-icon {
  width: 64px; height: 64px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: rgba(232,180,0,0.16);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 8px rgba(232,180,0,0.07);
}
.co-disc__confirm-icon svg { width: 30px; height: 30px; }
.co-disc__confirm-title {
  margin: 0 0 12px;
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.02em;
  color: #fff;
}
.co-disc__confirm-body {
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
  max-width: 46ch;
}
.co-disc__confirm-body strong { color: #fff; font-weight: 600; }
.co-disc__confirm-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 0;
  padding: 8px 16px 8px 12px;
  border: 1px solid rgba(232,180,0,0.30);
  background: rgba(232,180,0,0.06);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-accent);
}
.co-disc__confirm-meta::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(232,180,0,0.18);
}
.co-disc__confirm-meta strong { color: #fff; font-weight: 700; }

/* Small uppercase "Submitted successfully" eyebrow above the title. */
.co-disc__confirm-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.co-disc__confirm-kicker::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(232, 180, 0, 0.16);
}

/* ---- Celebratory reveal (plays when the success panel un-hides) ---------- */
.co-disc__confirm-icon {
  animation: co-disc-pop 520ms var(--ease-out-soft) both;
}
/* The success ring gently pulses outward once. */
.co-disc__confirm-icon::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(232, 180, 0, 0.5);
  animation: co-disc-ring 900ms var(--ease-out-soft) 120ms both;
  pointer-events: none;
}
.co-disc__confirm-icon { position: relative; }
/* Draw the checkmark stroke in. */
.co-disc__confirm-icon svg path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: co-disc-check 480ms var(--ease-out-soft) 260ms both;
}
.co-disc__confirm-kicker { animation: co-disc-rise 460ms var(--ease-out-soft) 180ms both; }
.co-disc__confirm-title  { animation: co-disc-rise 460ms var(--ease-out-soft) 240ms both; }
.co-disc__confirm-body   { animation: co-disc-rise 460ms var(--ease-out-soft) 320ms both; }

@keyframes co-disc-pop {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes co-disc-ring {
  0%   { opacity: 0.9; transform: scale(0.85); }
  100% { opacity: 0;   transform: scale(1.5); }
}
@keyframes co-disc-check {
  to { stroke-dashoffset: 0; }
}
@keyframes co-disc-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 900px) {
  .co-disc__inner { padding: 104px 22px 80px; }
  .co-disc__grid { grid-template-columns: 1fr; gap: 36px; }
  .co-disc__aside { order: 2; }
  .co-disc__form  { order: 1; }
  .co-disc__head { margin-bottom: 40px; }
}

@media (max-width: 640px) {
  .co-disc__steps {
    width: 100%;
    justify-content: space-between;
    padding: 12px 14px;
    gap: 0;
  }
  .co-disc__step-label { display: none; }
  .co-disc__step-line { flex: 1; margin: 0 8px; width: auto; }
  .co-disc__chips { gap: 7px; }
  .co-disc__nav { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
  .co-disc__continue { justify-content: center; }
  .co-disc__back { justify-content: center; }
}

/* =========================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .co-disc__panel { animation: none; }
  .co-disc__step-line { transition: none; }
  .co-disc__submit, .co-disc__continue, .co-disc__play,
  .co-disc__submit .arrow, .co-disc__continue .arrow { transition: none; }
}

/* =========================================================================
   Conversion scaffolding (Build Packet — Booking page elevation)
   Eyebrow pill · trust bar · aside quote · good-to-know · risk reversal ·
   what-happens-next timeline · logo strip · confirmation extras · sticky CTA.
   All on the navy hero unless noted. Authored at 1.0 (main is zoom:0.9 desktop).
   ========================================================================= */

/* ---------- Eyebrow pill (live booking status) -------------------------- */
.co-disc__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(232, 180, 0, 0.08);
  border: 1px solid rgba(232, 180, 0, 0.32);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--color-accent);
}
.co-disc__eyebrow-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}
.co-disc__eyebrow-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-accent);
  animation: co-disc-ping 2.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes co-disc-ping {
  0%        { transform: scale(1);   opacity: 0.7; }
  75%, 100% { transform: scale(2.8); opacity: 0;   }
}

/* ---------- Trust bar (micro social proof under the sub) ---------------- */
.co-trust {
  margin: 34px auto 0;
  max-width: 760px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 26px;
}
.co-trust__faces { display: inline-flex; align-items: center; }
.co-trust__face {
  width: 40px;
  height: 40px;
  margin-left: -12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(60% 60% at 50% 30%, #233358 0%, #0A1A3F 100%);
  border: 2px solid var(--color-primary);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.55);
}
.co-trust__face:first-child { margin-left: 0; }
.co-trust__face svg { width: 20px; height: 20px; }
.co-trust__face--count {
  background: var(--color-accent);
  color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px rgba(232, 180, 0, 0.4);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
}
.co-trust__rating { display: inline-flex; align-items: center; gap: 10px; }
.co-trust__stars { display: inline-flex; gap: 2px; color: var(--color-accent); }
.co-trust__stars svg { width: 16px; height: 16px; }
.co-trust__rating-txt {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
}
.co-trust__rating-txt strong { color: #fff; font-weight: 600; }

.co-trust__stats {
  flex-basis: 100%;
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
}
.co-trust__stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}
.co-trust__stat svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-accent); }
.co-trust__stat strong { color: #fff; font-weight: 700; }

/* ---------- Aside testimonial (micro-proof beside the form) -------------- */
.co-disc__quote {
  margin: 26px 0 0;
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-left: 3px solid var(--color-accent);
  border-radius: 12px;
}
.co-disc__quote-mark { display: block; width: 26px; height: 26px; margin-bottom: 8px; color: rgba(232, 180, 0, 0.65); }
.co-disc__quote-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}
.co-disc__quote-text em {
  font-style: normal;
  font-weight: 600;
  color: #fff;
  box-shadow: inset 0 -0.5em 0 rgba(232, 180, 0, 0.2);
}
.co-disc__quote-by { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; }
.co-disc__quote-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(60% 60% at 50% 30%, #233358 0%, #0A1A3F 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.5);
}
.co-disc__quote-avatar svg { width: 20px; height: 20px; }
.co-disc__quote-meta { display: flex; flex-direction: column; font-family: var(--font-body); }
.co-disc__quote-meta strong { font-size: 14px; font-weight: 700; color: #fff; }
.co-disc__quote-meta span { font-size: 12.5px; color: rgba(255, 255, 255, 0.55); }

/* ---------- "Good to know" objection block (inside the form card) -------- */
.co-disc__gtk {
  position: relative;
  margin: 0;
  padding: 20px 22px 22px;
  background:
    linear-gradient(180deg, rgba(232, 180, 0, 0.06) 0%, rgba(232, 180, 0, 0.025) 100%);
  border: 1px solid rgba(232, 180, 0, 0.22);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 18px 40px -34px rgba(0, 0, 0, 0.85);
}
.co-disc__gtk-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.co-disc__gtk-title-ic { width: 16px; height: 16px; flex: 0 0 auto; color: var(--color-accent); }

.co-disc__gtk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.co-disc__gtk-list li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  padding: 13px 0;
  font-family: var(--font-body);
}
.co-disc__gtk-list li + li { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.co-disc__gtk-list li:first-child { padding-top: 2px; }
.co-disc__gtk-list li:last-child { padding-bottom: 0; }

/* Accent icon badge — echoes the .co-disc__next-num treatment */
.co-disc__gtk-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  border-radius: 9px;
  background: rgba(232, 180, 0, 0.12);
  border: 1px solid rgba(232, 180, 0, 0.24);
  color: var(--color-accent);
  box-shadow: 0 6px 18px -10px rgba(232, 180, 0, 0.5);
  transition: background 220ms var(--ease-out-soft),
              border-color 220ms var(--ease-out-soft),
              box-shadow 220ms var(--ease-out-soft);
}
.co-disc__gtk-ic svg { width: 16px; height: 16px; }
.co-disc__gtk-list li:hover .co-disc__gtk-ic {
  background: rgba(232, 180, 0, 0.18);
  border-color: rgba(232, 180, 0, 0.4);
  box-shadow: 0 8px 22px -10px rgba(232, 180, 0, 0.6);
}

.co-disc__gtk-txt {
  min-width: 0;
  align-self: center;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}
.co-disc__gtk-txt strong { color: #fff; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .co-disc__gtk-ic { transition: none; }
}

/* ---------- Risk-reversal cluster (under submit) ------------------------- */
.co-disc__assure {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
}
.co-disc__assure li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}
.co-disc__assure svg { width: 16px; height: 16px; color: var(--color-accent); }

/* =========================================================================
   "How it works" journey band — promoted to the top of Step 1 (replaces the
   old thin progress stepper). Sets expectations, then social proof, before
   the form. Premium gold-accented card on the navy surface.
   ========================================================================= */
.co-disc__journey {
  margin: 0 auto 60px;
  max-width: 920px;
  animation: coJourneyIn 600ms var(--ease-out-soft) both;
}

/* Eyebrow micro-label — frames the band, echoes the logo-strip label. */
.co-disc__next-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 20px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}
.co-disc__next-label-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(232, 180, 0, 0.16);
}

.co-disc__next {
  list-style: none;
  margin: 0 auto;
  max-width: 920px;
  padding: 38px 42px;
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 26px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 34px 80px -44px rgba(0, 0, 0, 0.85);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
/* Gold top hairline — ties the band to the brand accent. */
.co-disc__next::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 30px;
  right: 30px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  opacity: 0.85;
}

.co-disc__next-step {
  position: relative;
  padding: 0 24px;
  opacity: 0;
  translate: 0 12px;
  animation: coNextStepIn 460ms var(--ease-out-soft) forwards;
  animation-delay: calc(var(--i, 0) * 90ms + 160ms);
  transition: transform 220ms var(--ease-out-soft);
}
.co-disc__next-step:first-child { padding-left: 6px; }
.co-disc__next-step:last-child  { padding-right: 6px; }
.co-disc__next-step:hover { transform: translateY(-3px); }

.co-disc__next-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  background: linear-gradient(180deg, var(--color-accent-hi), var(--color-accent));
  color: var(--color-primary);
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 13px;
  box-shadow:
    0 0 0 5px rgba(232, 180, 0, 0.12),
    0 10px 26px -10px rgba(232, 180, 0, 0.55);
}
.co-disc__next-h {
  margin: 0 0 7px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: #fff;
}
.co-disc__next-p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}
/* Animated gold connector that draws between steps on entrance. */
@media (min-width: 781px) {
  .co-disc__next-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 14px;
    left: 62px;
    right: -14px;
    height: 2px;
    border-radius: 2px;
    background-image:
      linear-gradient(90deg, var(--color-accent), var(--color-accent)),
      linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14));
    background-repeat: no-repeat;
    background-size: 0% 100%, 100% 100%;
    animation: coNextDraw 620ms var(--ease-out-soft) forwards;
    animation-delay: calc(var(--i, 0) * 90ms + 460ms);
  }
}

@keyframes coJourneyIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes coNextStepIn {
  to { opacity: 1; translate: 0 0; }
}
@keyframes coNextDraw {
  to { background-size: 100% 100%, 100% 100%; }
}

/* ---------- Logo strip (placeholder — swap in real, permissioned logos) --
   Now sits directly under the journey card as one trust unit. */
.co-disc__logos {
  margin: 34px auto 0;
  padding: 30px 0 0;
  max-width: 920px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.co-disc__logos-label {
  margin: 0 0 20px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.co-disc__logos-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.co-disc__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.4);
  transition: color 220ms var(--ease-out-soft), border-color 220ms var(--ease-out-soft), background 220ms var(--ease-out-soft);
}
.co-disc__logo:hover {
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.045);
}
.co-disc__logo svg { width: 18px; height: 18px; opacity: 0.7; }

/* ---------- Confirmation extras (step 3) -------------------------------- */
.co-disc__confirm-extras {
  margin: 32px auto 0;
  max-width: 460px;
  text-align: left;
  display: grid;
  gap: 18px;
}
.co-disc__confirm-who {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.co-disc__confirm-avatar {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(60% 60% at 50% 30%, #233358 0%, #0A1A3F 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 2px var(--color-accent);
  color: rgba(255, 255, 255, 0.5);
}
.co-disc__confirm-avatar svg { width: 26px; height: 26px; }
.co-disc__confirm-who-text { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-body); }
.co-disc__confirm-who-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-accent);
}
.co-disc__confirm-who-text strong { font-family: var(--font-display); font-size: 16px; color: #fff; }
.co-disc__confirm-who-text span:last-child { font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.co-disc__confirm-prep-title { margin: 0 0 10px; font-family: var(--font-body); font-weight: 700; font-size: 13px; color: #fff; }
.co-disc__confirm-prep ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.co-disc__confirm-prep li {
  position: relative;
  padding-left: 22px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.68);
}
.co-disc__confirm-prep li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
.co-disc__confirm-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; }
/* Primary next-step — gold fill so the success screen still has one clear CTA. */
.co-disc__confirm-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--color-accent-hi), var(--color-accent));
  border: 1px solid var(--color-accent);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 10px 26px -12px rgba(232, 180, 0, 0.6);
  transition: transform 220ms var(--ease-out-soft), box-shadow 220ms var(--ease-out-soft), background 220ms var(--ease-out-soft);
}
.co-disc__confirm-cta:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-dark));
  box-shadow: 0 16px 36px -12px rgba(232, 180, 0, 0.6);
}
.co-disc__confirm-cta:active { transform: translateY(0) scale(0.985); }
.co-disc__confirm-cta svg { width: 18px; height: 18px; transition: transform 220ms var(--ease-out-soft); }
.co-disc__confirm-cta:hover svg { transform: translateX(4px); }
.co-disc__confirm-secondary {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 180ms ease;
}
.co-disc__confirm-secondary:hover { color: #fff; }

/* ---------- Sticky mobile CTA (progressive; auto-hidden when form in view) */
.co-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;                 /* shown only on mobile (below) */
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 26, 63, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  /* Default = visible, so it still works with JS disabled. JS adds .is-hidden
     while the form is on screen to avoid a double CTA. */
  transform: translateY(0);
  transition: transform 280ms var(--ease-out-soft), visibility 0s;
}
.co-sticky.is-hidden {
  transform: translateY(120%);
  visibility: hidden;            /* drop it from the focus/a11y tree once parked */
  transition: transform 280ms var(--ease-out-soft), visibility 0s 280ms;
}
.co-sticky__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 12px 30px -10px rgba(232, 180, 0, 0.55);
}
.co-sticky__btn svg { width: 18px; height: 18px; }
@media (max-width: 767px) {
  .co-sticky { display: block; }
}

/* ---------- Responsive (new scaffolding) -------------------------------- */
@media (max-width: 600px) {
  .co-disc__journey { margin-bottom: 44px; }
  .co-disc__next { grid-template-columns: 1fr; gap: 24px; padding: 24px 22px; border-radius: 20px; }
  .co-disc__next-step, .co-disc__next-step:first-child, .co-disc__next-step:last-child { padding: 0; }
  .co-disc__next-label { letter-spacing: 0.12em; }
  .co-trust { gap: 14px 18px; }
  .co-disc__logos { margin-top: 28px; padding-top: 26px; }
  .co-disc__logo { height: 44px; padding: 0 16px; }
}

/* ---------- Reduced motion (new scaffolding) ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  .co-disc__eyebrow-dot::after { animation: none; }
  .co-disc__journey,
  .co-disc__next-step { animation: none !important; opacity: 1 !important; translate: none !important; }
  .co-disc__next-step { transition: none; }
  .co-disc__next-step:not(:last-child)::after {
    animation: none !important;
    background-size: 100% 100%, 100% 100% !important;
  }
  .co-disc__logo,
  .co-disc__confirm-cta,
  .co-disc__confirm-secondary,
  .co-sticky { transition: none; }
  .co-disc__confirm-icon,
  .co-disc__confirm-icon svg path,
  .co-disc__confirm-kicker { animation: none !important; }
  .co-disc__confirm-icon svg path { stroke-dashoffset: 0 !important; }
}

/* =========================================================================
   Build Packet 22 · §3 — Duplicate-request guard styling + premium polish
   Additive only. Reuses existing tokens, surfaces and co-disc-* keyframes so
   the "already pending" panel reads as a sibling of the success panel, plus
   two small, layout-safe lifts on the form card and submit button.
   ========================================================================= */

/* ---- "Already pending" panel (Step 4) ----------------------------------- */
/* The clock glyph should sit solid immediately — the check-stroke draw used on
   the success tick would look broken on a clock face. Keep pop + ring though. */
.co-disc__confirm--pending .co-disc__confirm-icon svg path {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: none;
}
/* A whisper-cooler halo so the two gold states are subtly distinguishable. */
.co-disc__confirm--pending .co-disc__confirm-icon::after {
  border-color: rgba(232, 180, 0, 0.42);
}

/* "Forgot to mention something?" card — matches the form-card surface. */
.co-disc__confirm-note {
  margin: 18px auto 0;
  max-width: 46ch;
  padding: 16px 18px 17px;
  text-align: left;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
              0 18px 40px -34px rgba(0, 0, 0, 0.85);
  animation: co-disc-rise 460ms var(--ease-out-soft) 380ms both;
}
.co-disc__confirm-note-title {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.co-disc__confirm-note-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
}
.co-disc__confirm-note-body strong { color: var(--color-accent); font-weight: 600; }

/* ---- Premium lift: form-card top hairline -------------------------------- */
/* A faint gold filament along the card's top edge — pure decoration, no layout
   impact, sits on the existing border line. */
.co-disc__form { position: relative; }
.co-disc__form::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(20px, 8%, 40px);
  right: clamp(20px, 8%, 40px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(232, 180, 0, 0.55), transparent);
  pointer-events: none;
}

/* ---- Premium lift: single-pass sheen across the submit on hover ---------- */
.co-disc__submit { position: relative; overflow: hidden; }
.co-disc__submit::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 42%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: translateX(-180%) skewX(-12deg);
  transition: transform 650ms var(--ease-out-soft);
  pointer-events: none;
}
.co-disc__submit:hover:not(:disabled)::after { transform: translateX(360%) skewX(-12deg); }
/* Keep the button label and arrow above the sheen. */
.co-disc__submit > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .co-disc__confirm-note { animation: none !important; }
  .co-disc__submit::after { display: none; }
}