/* ==========================================================================
   CoverMe landing (dionis.online) — "night poster" direction.

   Palette and type come from the app store design (Figma: CMCA/CMICA):
   deep purple #1F0035, magenta #E539E7, cream #F4DDB5, Josefin Sans + Ubuntu.

   Signature device: the UFO beam. The app's key visual is money pulled up in a
   cone of light, so the beam runs through the page — lighting the hero, becoming
   the vertical track the four steps hang from, and closing the final poster.

   Loaded after bootstrap.min.css: this file owns the palette and the sections,
   Bootstrap owns the grid, the navbar and the accordion mechanics.
   ========================================================================== */

@font-face {
  font-family: 'Josefin Sans';
  src: url('../fonts/josefin-sans-var.woff2') format('woff2-variations'),
       url('../fonts/josefin-sans-var.woff2') format('woff2');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('../fonts/ubuntu-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('../fonts/ubuntu-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('../fonts/ubuntu-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* --- palette ----------------------------------------------------------- */
  --ink-bg: #12001F;
  --surface: #1F0035;
  --surface-2: #2A0947;
  --line: #3D1A5C;

  --text: #E8DDF0;
  --text-dim: #B9A6C9;
  --heading: #FFFFFF;

  --magenta: #E539E7;
  --magenta-soft: #F58AF6;
  --magenta-glow: rgba(229, 57, 231, .35);
  --cream: #F4DDB5;

  /* Neon buttons carry DARK text: white on magenta is 3.46:1, this is 5.47:1 */
  --on-magenta: #17002B;

  /* --- type -------------------------------------------------------------- */
  --font-body: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-head: 'Josefin Sans', var(--font-body);

  /* --- shape ------------------------------------------------------------- */
  --radius: 10px;
  --radius-lg: 24px;
  --radius-pill: 100px;
  --section-y: 72px;
  --btn-height: 56px;
  --cta-width: 230px;
  --shadow-card: 0 2px 14px rgba(0, 0, 0, .35);
  --shadow-neon: 0 8px 30px var(--magenta-glow);

  /* --- hand the palette to Bootstrap ------------------------------------- */
  --bs-body-bg: var(--ink-bg);
  --bs-body-color: var(--text);
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: 17px;
  --bs-body-line-height: 1.65;
  --bs-heading-color: var(--heading);
  --bs-emphasis-color: var(--heading);
  --bs-border-color: var(--line);
  --bs-border-radius: var(--radius);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-link-color: var(--magenta-soft);
  --bs-link-hover-color: var(--magenta);
  /* Bootstrap 5.3 colours links from the RGB triplet, not the hex variable */
  --bs-link-color-rgb: 245, 138, 246;
  --bs-link-hover-color-rgb: 229, 57, 231;
  --bs-primary: var(--magenta);
  --bs-primary-rgb: 229, 57, 231;
}

/* ---------------------------------------------------------------- base -- */

body { -webkit-font-smoothing: antialiased; }

/* width/height attributes reserve space against CLS, but without this the height
   attribute wins when CSS scales the width. Bootstrap's Reboot does not set it. */
img { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--heading);
}
h1 { font-size: clamp(40px, 6.2vw, 74px); }
h2 { font-size: clamp(30px, 4.6vw, 50px); }
h3 { font-size: clamp(20px, 3vw, 26px); }

.lede { font-size: clamp(17px, 2.3vw, 20px); color: var(--text); }

/* Links inside running text are underlined, so colour is never the only cue */
main p a, main li a, .legal a { text-decoration: underline; text-underline-offset: 2px; }
.navbar a, .btn, .badge-store, .footer-nav a, .logo { text-decoration: none; }

.section { padding-block: var(--section-y); }
.section--surface { background: var(--surface); }

/* Section headings are left-aligned and oversized — poster, not brochure */
.section-head { max-width: 780px; margin-bottom: 44px; }
.section-head p { color: var(--text-dim); font-size: 18px; margin-bottom: 0; }

/* Eyebrow reads as a printed caption line, not a pill */
.eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--magenta-soft);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.eyebrow::before { content: '— '; color: var(--magenta); }

.accent { color: var(--magenta-soft); }
.cream { color: var(--cream); }

/* -------------------------------------------------------------- buttons -- */

.btn {
  --bs-btn-padding-y: 14px;
  --bs-btn-padding-x: 30px;
  --bs-btn-font-size: 17px;
  --bs-btn-font-weight: 700;
  --bs-btn-border-radius: var(--radius);
  min-height: var(--btn-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-neon {
  --bs-btn-color: var(--on-magenta);
  --bs-btn-bg: var(--magenta);
  --bs-btn-border-color: var(--magenta);
  --bs-btn-hover-color: var(--on-magenta);
  --bs-btn-hover-bg: var(--magenta-soft);
  --bs-btn-hover-border-color: var(--magenta-soft);
  --bs-btn-active-bg: var(--magenta-soft);
  box-shadow: var(--shadow-neon);
}

.cta-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.cta-stack--center { align-items: center; }
.cta-stack .btn { width: var(--cta-width); }
.cta-stack .badge-store img { width: var(--cta-width); height: auto; }

.badge-store { display: inline-block; line-height: 0; }
.badge-store:hover { opacity: .88; }

/* --------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(18, 0, 31, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .navbar { --bs-navbar-padding-y: .7rem; }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--heading);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 22px;
}
.logo:hover { color: var(--heading); }
.logo img { width: 38px; height: 38px; border-radius: 10px; }

/* Header carries the mark alone — no wordmark next to it */
.logo--mark { gap: 0; margin-right: 0; }
.logo--mark img { width: 44px; height: 44px; border-radius: 12px; }

.site-header .nav-link {
  --bs-nav-link-color: var(--text-dim);
  --bs-nav-link-hover-color: var(--magenta-soft);
  font-weight: 500;
}
.header-cta { width: 100%; }

@media (min-width: 992px) {
  .site-header .navbar-nav { gap: 1.5rem; }
  .header-cta { width: auto; }
}

/* ============================================================ THE BEAM ==== */
/* The signature device: a cone of light, borrowed from the app's abduction
   visual. Used in the hero and the closing poster. */

.beam {
  position: absolute;
  top: -8%;
  left: 50%;
  width: min(120vw, 900px);
  height: 130%;
  transform: translateX(-50%);
  pointer-events: none;
  background: conic-gradient(
    from 180deg at 50% 0%,
    transparent 0deg,
    transparent 168deg,
    rgba(229, 57, 231, .30) 172deg,
    rgba(245, 138, 246, .55) 180deg,
    rgba(229, 57, 231, .30) 188deg,
    transparent 196deg,
    transparent 360deg
  );
  filter: blur(10px);
  mix-blend-mode: screen;
}

/* ----------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: 56px 64px;
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(122, 61, 214, .28) 0%, transparent 60%),
    var(--ink-bg);
}
.hero > .container { position: relative; z-index: 2; }

.hero h1 { margin-bottom: 20px; text-wrap: balance; }
.hero__lede { max-width: 42ch; }

.hero__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  color: var(--text-dim);
  font-size: 15px;
}
.hero__note .icon { width: 20px; height: 20px; color: var(--magenta-soft); }

/* The phone hangs in the beam */
.hero__art { position: relative; display: flex; justify-content: center; }
.hero__art img {
  position: relative;
  z-index: 2;
  width: min(100%, 300px);
  border-radius: 26px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6), 0 0 0 1px var(--line), 0 0 60px var(--magenta-glow);
}

@media (min-width: 992px) {
  .hero { padding-block: 84px 96px; }
  .hero__art img { width: min(100%, 330px); }
}

/* --------------------------------------------------------------- ticker -- */
/* Replaces the usual three trust cards: the claims scroll past like a marquee
   on a storefront. Duplicated track so the loop has no visible seam. */

.ticker {
  overflow: hidden;
  padding-block: 18px;
  background: var(--magenta);
  border-block: 1px solid var(--magenta-soft);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker 38s linear infinite;
}
.ticker__group {
  display: flex;
  align-items: center;
  gap: 40px;
  padding-right: 40px;
}
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--on-magenta);
  font-family: var(--font-head);
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}
.ticker__item::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--on-magenta);
}

@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .ticker { overflow-x: auto; }
}

/* ----------------------------------------------------------- steps track -- */
/* The beam becomes a vertical track. Numbering is kept because these steps are
   a real sequence — you cannot get the money before you ask for it. */

.track { position: relative; max-width: 900px; margin-inline: auto; }
.track::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--magenta) 0%, rgba(229, 57, 231, .15) 100%);
}

.track__step {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 20px;
  padding-bottom: 40px;
}
.track__step:last-child { padding-bottom: 0; }

.track__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink-bg);
  border: 2px solid var(--magenta);
  color: var(--magenta-soft);
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  box-shadow: 0 0 18px var(--magenta-glow);
}
.section--surface .track__num { background: var(--surface); }

.track__title { margin-bottom: 6px; }
.track__text { margin: 0; color: var(--text-dim); }

@media (min-width: 768px) {
  .track__step { grid-template-columns: 56px 1fr; gap: 28px; padding-bottom: 48px; }
  .track::before { left: 27px; }
  .track__num { width: 56px; height: 56px; font-size: 20px; }
}

/* ------------------------------------------------------------- benefits -- */
/* An editorial list instead of a card grid: each benefit is a line of the
   argument, with a rule between lines and the neon only on hover. */

.stanza-list { border-top: 1px solid var(--line); }

.stanza {
  display: grid;
  gap: 6px 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  transition: background-color .2s ease;
}
.stanza:hover { background: rgba(229, 57, 231, .06); }

.stanza__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: clamp(22px, 3.4vw, 30px);
}
.stanza__title .icon { width: 26px; height: 26px; flex: none; color: var(--magenta-soft); }
.stanza__text { margin: 0; color: var(--text-dim); }

@media (min-width: 768px) {
  .stanza { grid-template-columns: 1fr 1fr; align-items: baseline; padding: 30px 0; }
}

/* ------------------------------------------------------------ film strip -- */
/* Screens run off the edge of the page like a strip of film, scrollable on
   touch — closer to flipping through the app than a static mockup trio. */

.strip {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  /* First shot lines up with the container, the rest run off the right edge */
  padding: 8px max(12px, calc((100vw - 1320px) / 2 + 12px)) 24px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }

.strip__shot {
  flex: 0 0 auto;
  width: 210px;
  scroll-snap-align: center;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 0 0 1px var(--line);
  transition: transform .25s ease, box-shadow .25s ease;
}
.strip__shot:nth-child(even) { transform: translateY(18px); }
.strip__shot:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(0, 0, 0, .6), 0 0 40px var(--magenta-glow); }
.strip__shot:nth-child(even):hover { transform: translateY(10px); }
.strip__shot img { display: block; width: 100%; }

@media (min-width: 992px) {
  .strip { gap: 22px; }
  .strip__shot { width: 240px; }
}

/* ------------------------------------------------------- contrast table -- */
/* Two columns that argue with each other: what we do vs what we never do.
   The structure itself carries the meaning. */

.ledger {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ledger__col { padding: 28px 24px; }
.ledger__col + .ledger__col { border-top: 1px solid var(--line); }
.ledger__col--do { background: rgba(229, 57, 231, .07); }
.ledger__col--dont { background: var(--surface); }

.ledger__head {
  margin-bottom: 20px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.ledger__col--do .ledger__head { color: var(--magenta-soft); }
.ledger__col--dont .ledger__head { color: var(--cream); }

.ledger ul { margin: 0; padding: 0; list-style: none; }
.ledger li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(61, 26, 92, .8);
  color: var(--text);
  font-size: 16px;
}
.ledger li:last-child { border-bottom: 0; padding-bottom: 0; }
.ledger li .icon { width: 22px; height: 22px; margin-top: 2px; }
.ledger__col--do .icon { color: var(--magenta-soft); }
.ledger__col--dont .icon { color: var(--cream); }

@media (min-width: 768px) {
  .ledger { grid-template-columns: 1fr 1fr; }
  .ledger__col + .ledger__col { border-top: 0; border-left: 1px solid var(--line); }
  .ledger__col { padding: 34px 30px; }
}

/* ------------------------------------------------------------------ faq -- */

.faq {
  --bs-accordion-bg: transparent;
  --bs-accordion-color: var(--text);
  --bs-accordion-border-color: var(--line);
  --bs-accordion-border-width: 0 0 1px 0;
  --bs-accordion-border-radius: 0;
  --bs-accordion-btn-padding-x: 0;
  --bs-accordion-btn-padding-y: 22px;
  --bs-accordion-btn-color: var(--heading);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: var(--magenta-soft);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-body-padding-x: 0;

  max-width: 880px;
  border-top: 1px solid var(--line);
}
.faq .accordion-item { background: transparent; }
.faq .accordion-button {
  font-family: var(--font-head);
  font-size: clamp(19px, 2.6vw, 24px);
  font-weight: 700;
  box-shadow: none;
  padding-left: 0;
}
/* Open question gets a neon edge — the only decoration in this section */
.faq .accordion-button:not(.collapsed) { box-shadow: inset 3px 0 0 var(--magenta); padding-left: 18px; }
.faq .accordion-collapse .accordion-body { padding-bottom: 24px; color: var(--text-dim); font-size: 16px; }
.faq .accordion-button:not(.collapsed) + .accordion-collapse .accordion-body { padding-left: 18px; }

/* ------------------------------------------------------- closing poster -- */

.poster {
  position: relative;
  overflow: hidden;
  padding-block: 80px;
  text-align: center;
  background: var(--ink-bg);
  border-top: 1px solid var(--line);
}
.poster > .container { position: relative; z-index: 2; }
.poster h2 { margin-bottom: 18px; }
.poster p { max-width: 620px; margin-inline: auto; color: var(--text); }

/* --------------------------------------------------------------- footer -- */

.site-footer {
  padding-block: 56px 32px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.footer-top { padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.footer-tagline { margin: 16px 0 20px; max-width: 400px; color: var(--text-dim); font-size: 15px; }
.site-footer .badge-store img { width: 180px; height: auto; }

.footer-title {
  margin-bottom: 14px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--heading);
}
.footer-nav ul { margin: 0; padding: 0; list-style: none; }
.footer-nav li { margin-bottom: 10px; }
.footer-nav a { color: var(--text-dim); font-size: 15px; }
.footer-nav a:hover { color: var(--magenta-soft); }

.legal { padding-top: 28px; color: var(--text-dim); font-size: 13px; line-height: 1.7; }
.legal p { margin-bottom: 12px; }

/* ---------------------------------------------------------- inner pages -- */

.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: 56px 36px;
  background:
    radial-gradient(100% 120% at 70% -20%, rgba(229, 57, 231, .22) 0%, transparent 60%),
    var(--surface);
}
.page-hero p { max-width: 740px; color: var(--text-dim); }

.prose { max-width: 800px; }
.prose h2 { margin-top: 44px; font-size: clamp(24px, 3.6vw, 32px); }
.prose h3 { margin-top: 28px; font-size: 20px; }
.prose p, .prose li { color: var(--text-dim); }
.prose__meta {
  display: inline-block;
  margin-bottom: 24px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-dim);
  font-size: 14px;
}

.contact-card {
  height: 100%;
  padding: 24px;
  background: var(--surface-2);
  border-radius: var(--radius-lg);
}
.contact-card h3 { font-size: 19px; margin-bottom: 8px; }
.contact-card p { margin: 0; }

/* ----------------------------------------------------------- apply page -- */

.apply-layout { padding-block: 36px 72px; }

.apply-aside {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.apply-aside h2 { font-size: 21px; margin-bottom: 16px; }
.apply-aside ul { margin: 0 0 24px; padding: 0; list-style: none; }
.apply-aside li { display: flex; gap: 10px; margin-bottom: 14px; color: var(--text-dim); font-size: 15px; }
.apply-aside .icon { width: 20px; height: 20px; flex: none; color: var(--magenta-soft); }

/* ==================================================== partner form theme ==
   The Phonexa OM35 embed renders into the page (no iframe), shipping its own
   light styles. These rules re-skin every step to the site palette. Selectors
   are scoped to .form-shell so nothing leaks into the rest of the page.
   ========================================================================= */

.form-shell {
  min-height: 340px;
  padding: 24px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  color: var(--text);
}

@media (min-width: 992px) {
  .form-shell { padding: 36px 32px; }
}

/* --- layout wrappers ---
   The embed ships max-width: 540px on the form and 350px on the step wrapper,
   which leaves the card mostly empty. Widen both and re-centre. */
.form-shell .omForm,
.form-shell .omForm-wrapper,
.form-shell .om-main-wrapper,
.form-shell .omForm-style-default {
  background: transparent !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  box-shadow: none !important;
  border: 0 !important;
}

.form-shell .omForm-style-default { margin-top: 0 !important; }
.form-shell .omForm-wrapper { max-width: 100% !important; margin: 0 !important; }
.form-shell .om-main-wrapper { max-width: 560px !important; margin: 0 auto !important; }

/* --- text colour ---
   The embed prints step questions into unclassed <div>/<span> elements, so the
   colour has to be set broadly. Controls below re-assert their own colours. */
.form-shell,
.form-shell div,
.form-shell span,
.form-shell p,
.form-shell strong,
.form-shell b,
.form-shell em,
.form-shell label,
.form-shell legend,
.form-shell h1,
.form-shell h2,
.form-shell h3,
.form-shell h4 {
  color: var(--text) !important;
}

/* --- step headings ---
   The question is printed into an unclassed <div> (with a <strong> inside).
   Targeting :first-child would hit the progress bar instead, so match the
   class-less div specifically. */
.form-shell h1,
.form-shell h2,
.form-shell h3,
.form-shell legend,
.form-shell .om-main-wrapper > div:not([class]),
.form-shell .om-main-wrapper > div:not([class]) strong {
  color: var(--heading) !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: clamp(20px, 3vw, 26px) !important;
  line-height: 1.25 !important;
}
.form-shell .om-main-wrapper > div:not([class]) { margin-bottom: 14px !important; }

.form-shell small { color: var(--text-dim) !important; }

/* --- amount chips --- */
.form-shell .div-select {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px !important;
}
.form-shell .div-select__item {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;   /* the embed ships a narrow fixed width */
  max-width: none !important;
  margin: 0 !important;
  min-height: 60px;
  padding: 12px 16px !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  color: var(--heading) !important;
  font-family: var(--font-head) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.form-shell .div-select__item:hover,
.form-shell .div-select__item:focus-visible {
  background: rgba(229, 57, 231, .12) !important;
  border-color: var(--magenta) !important;
  transform: translateY(-1px);
}
.form-shell .div-select__item.active,
.form-shell .div-select__item.selected,
.form-shell .div-select__item.active span,
.form-shell .div-select__item.selected span {
  background: var(--magenta) !important;
  border-color: var(--magenta) !important;
  color: var(--on-magenta) !important;
}
/* chips carry their own colour over the broad text rule */
.form-shell .div-select__item,
.form-shell .div-select__item span { color: var(--heading) !important; }

@media (min-width: 480px) {
  .form-shell .div-select { grid-template-columns: repeat(3, 1fr); }
}

/* --- text inputs, selects, textareas --- */
.form-shell input[type="text"],
.form-shell input[type="email"],
.form-shell input[type="tel"],
.form-shell input[type="number"],
.form-shell input[type="password"],
.form-shell input[type="date"],
.form-shell select,
.form-shell textarea,
.form-shell .om-input,
.form-shell .omInputText {
  width: 100%;
  min-height: 54px;
  padding: 12px 16px !important;
  background: var(--ink-bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  color: var(--heading) !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  box-shadow: none !important;
}
.form-shell input::placeholder,
.form-shell textarea::placeholder { color: var(--text-dim) !important; opacity: 1; }

.form-shell input:focus,
.form-shell select:focus,
.form-shell textarea:focus,
.form-shell .om-input:focus {
  border-color: var(--magenta) !important;
  outline: 2px solid var(--magenta-soft);
  outline-offset: 1px;
}

/* Native dropdown list is drawn by the OS — force a readable pairing */
.form-shell select option { background: var(--surface); color: var(--heading); }

.form-shell .om-input__container { margin-bottom: 14px; }

/* --- checkboxes and radios --- */
.form-shell input[type="checkbox"],
.form-shell input[type="radio"] {
  width: 20px;
  min-height: 20px;
  height: 20px;
  accent-color: var(--magenta);
}

/* --- navigation buttons --- */
/* background-COLOR, not the background shorthand: the embed draws its arrows
   with background-image, and the shorthand would wipe them out. */
.form-shell button,
.form-shell .om-navigation__next,
.form-shell input[type="submit"] {
  min-height: 54px;
  padding: 14px 30px !important;
  background-color: var(--magenta) !important;
  border: 1px solid var(--magenta) !important;
  border-radius: var(--radius) !important;
  color: var(--on-magenta) !important;
  font-family: var(--font-body) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  box-shadow: var(--shadow-neon);
  cursor: pointer;
  transition: background-color .16s ease, transform .16s ease;
}
.form-shell button:hover,
.form-shell .om-navigation__next:hover { background-color: var(--magenta-soft) !important; transform: translateY(-1px); }

/* button labels sit above the broad text rule */
.form-shell button,
.form-shell button span,
.form-shell .om-navigation__next,
.form-shell .om-navigation__next span { color: var(--on-magenta) !important; }

/* Back button is secondary — outline, not a second neon slab.
   It ships no label and no icon of its own, so draw a chevron here. */
.form-shell .om-navigation__prev {
  position: relative;
  min-width: 62px;
  background-color: transparent !important;
  /* their arrow is a black SVG built for a light theme — invisible here */
  background-image: none !important;
  border: 1px solid var(--line) !important;
  color: var(--text-dim) !important;
  box-shadow: none !important;
}
.form-shell .om-navigation__prev:hover { border-color: var(--magenta) !important; }
.form-shell .om-navigation__prev::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 11px;
  height: 11px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(1px, -1px);
}
.form-shell .om-navigation__prev,
.form-shell .om-navigation__prev span { color: var(--text-dim) !important; }
.form-shell .om-navigation__prev:hover,
.form-shell .om-navigation__prev:hover span {
  background: var(--surface-2) !important;
  color: var(--heading) !important;
}

.form-shell .om-navigation {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

/* --- progress bar --- */
.form-shell .om-progress-bar { margin-bottom: 22px; }
.form-shell .om-progress-bar__line {
  height: 8px !important;
  background: var(--surface-2) !important;
  border-radius: var(--radius-pill) !important;
  overflow: hidden;
}
.form-shell .om-progress-bar__complete-line {
  height: 100% !important;
  background: linear-gradient(90deg, var(--magenta) 0%, var(--magenta-soft) 100%) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: 0 0 14px var(--magenta-glow);
}
.form-shell .om-progress-bar__percent {
  color: var(--magenta-soft) !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
}

/* --- loader dots --- */
.form-shell .bubblingG span { background: var(--magenta) !important; }

/* --- validation --- */
.form-shell [class*="error"],
.form-shell .invalid-feedback { color: #FF9BD2 !important; }
.form-shell input[class*="error"],
.form-shell .om-input[class*="error"] { border-color: #FF6BB5 !important; }

/* --------------------------------------------------------- accessibility -- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1080;
  padding: 12px 20px;
  background: var(--magenta);
  color: var(--on-magenta);
  font-weight: 700;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--magenta-soft);
  outline-offset: 2px;
  border-radius: 4px;
}

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}