/* Coexistence with fine_lead on one page (2026-10-09): every rule is scoped under
   .moonform.fs-root (the simulator's wrapper), so nothing here reaches the lead form and
   the simulator's rules beat fine_lead's .moonform X rules inside the simulator. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');

/* ═══════════════════════════════════════════════════════════════
   MOONFORM - Fine (investment simulator, Webflow replica)
   Identity v2 (Bruno redesign, Webflow, Sept 2026):
   PP Fragment Glare serif (uppercase headings) + Inter body,
   ink #101010, linen #f5f3f0, brand red #e74016, hairline #eee,
   zero radii everywhere except pill buttons (999px).
   Reproduces Bruno's /simulateur widget: his .sim__* rules ported
   1:1 onto fs-* (own names so his hidden embed's unscoped CSS/JS
   cannot reach us). Values in rem kept as his, px where he uses px.
   All rules scoped under .moonform.fs-root.
   ═══════════════════════════════════════════════════════════════ */

/* PP Fragment is served from Fine's own Webflow asset CDN (same file the
   site loads). Licensed to Fine; only load it on Fine-owned pages. */
@font-face {
  font-family: 'PP Fragment';
  src: url('https://cdn.prod.website-files.com/6a3bbc338309efede254e47d/6a3bcefc3a281221db4fca0c_PPFragment-GlareRegular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}

  .moonform.fs-root *, .moonform.fs-root *::before, .moonform.fs-root *::after { box-sizing: border-box; margin: 0; padding: 0; line-height: 1; }
  /* Host-page guards: Bruno's Webflow CSS ships a global `p { font-family: Roboto }`
     and the normalize bolds <label>; element rules beat inheritance from .moonform.fs-root. */
  .moonform.fs-root p, .moonform.fs-root label, .moonform.fs-root a, .moonform.fs-root button, .moonform.fs-root input, .moonform.fs-root span { font-family: var(--sans); }
  .moonform.fs-root p, .moonform.fs-root label { font-weight: 400; margin: 0; }
  .moonform.fs-root h2 { font-weight: 400; margin: 0; }
  .moonform.fs-root button, .moonform.fs-root input, .moonform.fs-root .autocomplete-item { touch-action: manipulation; }

/* ═══ THEME ═════════════════════════════════════════════════════ */
  .moonform.fs-root {
    --ink: #101010;
    --ink-60: rgba(16,16,16,0.6);
    --ink-50: rgba(16,16,16,0.5);
    --ink-40: rgba(16,16,16,0.4);
    --ink-20: rgba(16,16,16,0.2);
    --white: #ffffff;
    --bg: #ffffff;
    --linen: #f5f3f0;
    --linen-deep: #eee7dc;
    --red: #e74016;
    --border: #eeeeee;
    --border-2: #e6e6e6;
    --border-focus: #e74016;
    --focus-ring: #2d62ff;
    --error: #e74016;
    --error-bg: #f8e4e4;
    --radius: 0px;
    --radius-sm: 0px;
    --pill: 999px;
    --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
    --ease-slide: 0.55s cubic-bezier(0.625,0.05,0,1);
    --serif: 'PP Fragment', Georgia, 'Times New Roman', serif;
    --sans: 'Inter', Arial, sans-serif;
    /* phone-widget hooks (_shared/phone-widget.css reads these) */
    --text: #101010;
    --text-muted: rgba(16,16,16,0.6);
    --purple-pale: #f5f3f0;
    font-family: var(--sans);
    color: var(--ink);
    letter-spacing: -0.5px;
  }

/* ═══ STEPS ═════════════════════════════════════════════════════ */
  .moonform.fs-root .step { display: none; animation: moonformFade 0.32s ease forwards; }
  .moonform.fs-root .step.active { display: block; }
  @keyframes moonformFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

  .moonform.fs-root .step-question { display: none; }
  /* Question header = the simulator's subtitle (.sim__sub): Inter 16, 60% ink */
  .moonform.fs-root .form-body .step-hint { font-family: var(--sans); font-size: 16px; font-weight: 400; letter-spacing: -0.5px; color: var(--ink-60); margin: 0 0 24px; line-height: 1.3; }
  .moonform.fs-root .step-hint strong { color: var(--ink); font-weight: 500; }
  .moonform.fs-root .field-block { margin-bottom: 28px; }
  .moonform.fs-root .field-block:last-of-type { margin-bottom: 0; }
  /* Choice-group labels (horizon, situation, créneau) use the same style as the question header */
  .moonform.fs-root .form-body .field-block > .input-label { font-family: var(--sans); font-size: 16px; font-weight: 400; letter-spacing: -0.5px; text-transform: none; color: var(--ink-60); line-height: 1.3; margin-bottom: 12px; }
  .moonform.fs-root .label-optional { font-family: var(--sans); color: var(--ink-50); font-weight: 400; text-transform: none; letter-spacing: -0.5px; font-size: 12px; margin-left: 4px; }

/* ═══ CHOICE CARDS ══════════════════════════════════════════════ */
  .moonform.fs-root .choices { display: flex; flex-direction: column; gap: 8px; }

  .moonform.fs-root .choice-card {
    display: flex; align-items: center; gap: 14px; padding: 15px 16px;
    border: 1px solid var(--border-2); border-radius: 0;
    cursor: pointer; transition: border-color var(--transition), background-color var(--transition);
    background: var(--white); text-align: left; width: 100%; font-family: var(--sans); color: var(--ink);
    letter-spacing: -0.5px;
  }
  .moonform.fs-root .choice-card.compact { padding: 15px 16px; }
  .moonform.fs-root .choice-card:hover { background: var(--linen); }
  .moonform.fs-root .choice-card.selected { border-color: var(--red); background: var(--linen); }
  .moonform.fs-root .choice-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

  .moonform.fs-root .choice-icon { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--ink-50); transition: color var(--transition); }
  .moonform.fs-root .choice-card:hover .choice-icon { color: var(--ink); }
  .moonform.fs-root .choice-card.selected .choice-icon { color: var(--red); }

  .moonform.fs-root .choice-text { flex: 1; }
  .moonform.fs-root .choice-label { font-size: 15px; font-weight: 500; color: var(--ink); display: block; line-height: 1.3; }
  .moonform.fs-root .choice-desc { font-size: 13px; font-weight: 400; color: var(--ink-60); margin-top: 3px; display: block; line-height: 1.3; }

  .moonform.fs-root .choice-check {
    width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border-2);
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    transition: all var(--transition); color: transparent; background: var(--white);
  }
  .moonform.fs-root .choice-card.selected .choice-check { background: var(--red); border-color: var(--red); color: #fff; }



/* ═══ NAVIGATION ════════════════════════════════════════════════ */
  .moonform.fs-root .form-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); gap: 12px; }
  .moonform.fs-root .btn-back { font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: -0.5px; color: var(--ink-60); background: none; border: none; cursor: pointer; padding: 8px 4px; display: flex; align-items: center; gap: 6px; transition: color var(--transition); flex-shrink: 0; }
  .moonform.fs-root .btn-back:hover { color: var(--ink); }
  .moonform.fs-root .btn-back:hover svg { transform: translateX(-3px); }
  .moonform.fs-root .btn-back svg { transition: transform var(--transition); }

  /* Primary CTA = the site's red pill: on hover a white layer slides up
     from the bottom and the label turns red (.sim__cta--red). */
  .moonform.fs-root .btn-next, .moonform.fs-root .btn-submit, .moonform.fs-root .ty-cta {
    position: relative; isolation: isolate; overflow: hidden;
    font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: -0.5px;
    color: #fff; background: var(--red); border: 1px solid var(--red); border-radius: var(--pill);
    height: 48px; padding: 0 24px; cursor: pointer; transition: color 0.3s;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  }
  .moonform.fs-root .btn-next::before, .moonform.fs-root .btn-submit::before, .moonform.fs-root .ty-cta::before {
    content: ''; position: absolute; inset: 0; z-index: -1; background: #fff;
    transform: translateY(100%); transition: transform var(--ease-slide);
  }
  .moonform.fs-root .btn-next:hover:not(:disabled), .moonform.fs-root .btn-submit:hover:not(:disabled), .moonform.fs-root .ty-cta:hover { color: var(--red); }
  .moonform.fs-root .btn-next:hover:not(:disabled)::before, .moonform.fs-root .btn-submit:hover:not(:disabled)::before, .moonform.fs-root .ty-cta:hover::before { transform: translateY(0); }
  .moonform.fs-root .btn-next:hover:not(:disabled) svg, .moonform.fs-root .btn-submit:hover:not(:disabled) svg, .moonform.fs-root .ty-cta:hover svg { transform: translateX(3px); }
  .moonform.fs-root .btn-next svg, .moonform.fs-root .btn-submit svg, .moonform.fs-root .ty-cta svg { transition: transform var(--transition); }
  .moonform.fs-root .btn-next:disabled, .moonform.fs-root .btn-submit:disabled { opacity: 0.35; cursor: not-allowed; }
  .moonform.fs-root .btn-next:focus-visible, .moonform.fs-root .btn-submit:focus-visible, .moonform.fs-root .ty-cta:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }



/* ═══ SIMULATOR (Bruno .sim, ported) ═════════════════════════════ */
  .moonform.fs-root { width: 100%; }
  .moonform.fs-root .fs-sim { display: flex; gap: 1rem; align-items: stretch; width: 100%; }
  .moonform.fs-root .fs-card { background: var(--white); border: 1px solid var(--border); padding: 1.5rem; overflow: hidden; }
  .moonform.fs-root .fs-ttl { font-family: var(--serif); text-transform: uppercase; font-weight: 400; line-height: 1.1; letter-spacing: 0; font-size: 1.125rem; }
  .moonform.fs-root .fs-hd { display: flex; flex-direction: column; gap: .5rem; }
  .moonform.fs-root .fs-sub { font-size: 1rem; line-height: 1.3; letter-spacing: -.5px; color: var(--ink-60); }
  .moonform.fs-root .fs-sub--ink { color: var(--ink); }

  .moonform.fs-root .fs-left { flex: 1 1 0; min-width: 0; background: var(--white); border: 1px solid var(--border); padding: 2.5rem; display: flex; flex-direction: column; gap: 2.5rem; }
  .moonform.fs-root .fs-sliders { display: flex; flex-direction: column; gap: 2.5rem; }
  .moonform.fs-root .fs-sl { display: flex; flex-direction: column; gap: 1rem; }
  .moonform.fs-root .fs-sl-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .moonform.fs-root .fs-sl-label { font-family: var(--serif); text-transform: uppercase; font-size: 1rem; line-height: 1.1; letter-spacing: 0; }
  .moonform.fs-root .fs-pill { display: inline-flex; align-items: baseline; gap: .25rem; background: var(--linen); border-bottom: 1px solid var(--border-2); padding: .5rem .75rem; font-size: .875rem; line-height: 1.5; letter-spacing: -.5px; white-space: nowrap; cursor: text; transition: border-color .2s ease; }
  .moonform.fs-root .fs-pill:focus-within { border-bottom-color: var(--red); }
  .moonform.fs-root .fs-pill-input { font: inherit; font-family: var(--sans); color: inherit; letter-spacing: inherit; line-height: inherit; background: transparent; border: 0; padding: 0; margin: 0; text-align: right; width: 4ch; min-width: 1ch; }
  .moonform.fs-root .fs-pill-input:focus { outline: none; }
  .moonform.fs-root .fs-pill-unit { color: var(--ink-50); }
  .moonform.fs-root .fs-slwrap { position: relative; height: 11px; width: 100%; }
  .moonform.fs-root .fs-track { position: absolute; top: 4.5px; left: 0; right: 0; height: 2px; background: var(--ink-20); }
  .moonform.fs-root .fs-fill { position: absolute; top: 4.5px; left: 0; height: 2px; background: var(--red); width: 0; }
  .moonform.fs-root .fs-handle { position: absolute; top: 0; left: 0; height: 11px; width: 19px; border-radius: 2px; background: var(--red); transform: translateX(-50%); pointer-events: none; }
  .moonform.fs-root .fs-range { position: absolute; inset: 0; width: 100%; height: 11px; margin: 0; opacity: 0; cursor: pointer; }
  .moonform.fs-root .fs-range:focus-visible + .fs-handle, .moonform.fs-root .fs-slwrap:focus-within .fs-handle { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
  .moonform.fs-root .fs-divider { height: 1px; width: 100%; background: var(--border); }
  /* TMI / profil choices (per-objectif panels): square hairline pills, red when selected */
  .moonform.fs-root .fs-pills { display: flex; gap: 8px; flex-wrap: wrap; }
  .moonform.fs-root .fs-pill-opt { flex: 1 1 0; min-width: 5rem; padding: .75rem .5rem; background: var(--white); border: 1px solid var(--border-2); border-radius: 0; font-family: var(--sans); font-size: .875rem; line-height: 1.2; letter-spacing: -.5px; color: var(--ink); cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
  .moonform.fs-root .fs-pill-opt:hover { background: var(--linen); }
  .moonform.fs-root .fs-pill-opt.selected { border-color: var(--red); color: var(--red); background: var(--linen); }
  .moonform.fs-root .fs-pill-opt:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
  .moonform.fs-root #fs-toggle-block { display: flex; flex-direction: column; gap: 2.5rem; }
  .moonform.fs-root .fs-toggle-row { display: flex; align-items: center; gap: 1rem; }
  .moonform.fs-root .fs-toggle { width: 65px; height: 28px; border-radius: 9999px; background: var(--border-2); border: 0; padding: 0; position: relative; cursor: pointer; transition: background .3s ease; flex: none; }
  .moonform.fs-root .fs-toggle.is-on { background: var(--red); }
  .moonform.fs-root .fs-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
  .moonform.fs-root .fs-toggle-knob { position: absolute; top: 2px; left: 2px; width: 39px; height: 24px; border-radius: 9999px; background: #fff; transition: transform .3s ease; }
  .moonform.fs-root .fs-toggle.is-on .fs-toggle-knob { transform: translateX(22px); }
  .moonform.fs-root .fs-note { display: flex; gap: .5rem; align-items: flex-start; font-size: 1rem; line-height: 1.3; letter-spacing: -.5px; color: var(--ink-60); }
  .moonform.fs-root .fs-note span { line-height: 1.3; }
  .moonform.fs-root .fs-note svg { flex: none; margin-top: 2px; }

  /* Flow B: objectif recap under the subtitle, "Modifier" goes back to the router */
  .moonform.fs-root .fs-objectif { display: none; font-size: .875rem; line-height: 1.3; letter-spacing: -.5px; color: var(--ink); margin-top: .25rem; }
  .moonform.fs-root.fs-flow-b .fs-objectif { display: flex; gap: .75rem; align-items: baseline; }
  .moonform.fs-root .fs-link { font-family: var(--sans); font-size: .875rem; letter-spacing: -.5px; color: var(--ink-60); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
  .moonform.fs-root .fs-link:hover { color: var(--red); }
  /* Objectif preset (the host page knows the intent): no "Modifier", the router is never shown */
  .moonform.fs-root.fs-preset .fs-objectif .fs-link { display: none; }

  .moonform.fs-root .fs-right { width: 36.75rem; max-width: 36.75rem; display: flex; flex-direction: column; gap: 1rem; }
  .moonform.fs-root .fs-halves { display: flex; gap: 1rem; width: 100%; flex-wrap: wrap; }
  .moonform.fs-root .fs-card-lbl { font-family: var(--serif); text-transform: uppercase; font-size: 1rem; line-height: 1.1; letter-spacing: 0; }
  .moonform.fs-root .fs-card-val { font-family: var(--serif); text-transform: uppercase; font-size: 2rem; line-height: 1.1; letter-spacing: 0; font-variant-numeric: tabular-nums; }
  .moonform.fs-root .fs-card-sub { font-size: .875rem; line-height: 1.1; letter-spacing: -.5px; color: var(--ink-60); margin-top: .5rem; }
  .moonform.fs-root .fs-big { width: 100%; background: var(--red); border-color: var(--red); color: #fff; height: 200px; display: flex; flex-direction: column; justify-content: space-between; position: relative; }
  .moonform.fs-root .fs-big .fs-card-lbl, .moonform.fs-root .fs-big .fs-card-val { color: #fff; }
  .moonform.fs-root .fs-big .fs-card-lbl { padding-right: 3.5rem; } /* keeps long labels off the clover */
  .moonform.fs-root .fs-big-sub { font-size: .875rem; line-height: 1.5; letter-spacing: -.5px; color: rgba(255,255,255,.6); }
  .moonform.fs-root .fs-big-row { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
  .moonform.fs-root .fs-flower { position: absolute; top: 1.5rem; right: 1.5rem; width: 44px; height: 40px; }
  .moonform.fs-root .fs-half { flex: 1 1 0; min-width: 13rem; height: 200px; display: flex; flex-direction: column; justify-content: space-between; }
  .moonform.fs-root .fs-chart { width: 100%; display: flex; flex-direction: column; gap: 1.25rem; flex-grow: 1; }
  .moonform.fs-root .fs-area { display: block; width: 100%; height: 96px; border-bottom: 1px solid var(--border); }
  .moonform.fs-root .fs-chart-hd { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
  .moonform.fs-root .fs-legend { display: flex; gap: 1rem; }
  .moonform.fs-root .fs-legend span { display: flex; align-items: center; gap: .5rem; font-size: .875rem; line-height: 1.5; letter-spacing: -.5px; }
  .moonform.fs-root .fs-sw { width: 12px; height: 12px; flex: none; }
  .moonform.fs-root .fs-bar-wrap { display: flex; flex-direction: column; gap: .5rem; }
  .moonform.fs-root .fs-bar { display: flex; height: 55px; overflow: hidden; }
  /* bars ease like Bruno's gsap power2.out, 0.6s */
  .moonform.fs-root .fs-bar-cap { background: var(--linen-deep); height: 100%; transition: width .6s cubic-bezier(.33,1,.68,1); }
  .moonform.fs-root .fs-bar-int { background: var(--red); height: 100%; transition: width .6s cubic-bezier(.33,1,.68,1); }
  .moonform.fs-root .fs-bar-lg { display: flex; justify-content: space-between; font-size: .875rem; line-height: 1.5; letter-spacing: -.5px; color: var(--ink-60); }
  .moonform.fs-root .fs-bar-lg span { color: var(--ink-60); }
  .moonform.fs-root .fs-ctas { display: flex; flex-direction: column; gap: .75rem; }
  .moonform.fs-root .fs-cta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; height: 52px; border-radius: var(--pill); font-family: var(--sans); font-weight: 400; font-size: .875rem; letter-spacing: -.5px; text-decoration: none; cursor: pointer; }
  .moonform.fs-root .fs-cta:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
  .moonform.fs-root .fs-cta--out { background: #fff; border: 1px solid var(--border-2); color: var(--ink); transition: background-color .3s ease; }
  .moonform.fs-root .fs-cta--out:hover { background: var(--linen); }
  .moonform.fs-root .fs-cta--red { background: var(--red); color: #fff; border: 1px solid var(--red); }
  .moonform.fs-root .fs-cta-bg { position: absolute; inset: 0; background: #fff; transform: translateY(100%); transition: transform var(--ease-slide); }
  .moonform.fs-root .fs-cta-lbl { position: relative; z-index: 1; transition: color .3s ease; }
  .moonform.fs-root .fs-cta--red:hover .fs-cta-bg { transform: translateY(0%); }
  .moonform.fs-root .fs-cta--red:hover .fs-cta-lbl { color: var(--red); }

/* ═══ ROUTER (flow B, step 1) + BOOKING (step 5) ═════════════════ */
  .moonform.fs-root .fs-router, .moonform.fs-root .fs-booking { padding: 2.5rem; display: flex; flex-direction: column; gap: 2rem; }
  .moonform.fs-root .fs-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  /* Flow B: the router fills the simulator's footprint (min-height set by syncRouterHeight,
     desktop only). The four choices stay compact cards (2×2, 40rem max), centred as a block
     in the frame; icon + serif label + description stacked and centred in each card. */
  .moonform.fs-root { position: relative; }
  .moonform.fs-root .step.fs-measure { display: block; position: absolute; top: 0; left: 0; right: 0; visibility: hidden; pointer-events: none; animation: none; }
  .moonform.fs-root .fs-router .fs-choices { flex: 1 1 auto; align-content: center; width: 100%; max-width: 40rem; margin: 0 auto; gap: 1rem; }
  .moonform.fs-root .fs-router .choice-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .875rem; padding: 1.75rem 1.5rem; min-height: 9.5rem; }
  .moonform.fs-root .fs-router .choice-icon { width: 40px; height: 40px; }
  .moonform.fs-root .fs-router .choice-icon svg { width: 28px; height: 28px; }
  .moonform.fs-root .fs-router .choice-check { position: absolute; top: .75rem; right: .75rem; }
  .moonform.fs-root .fs-router .choice-text { flex: 0 0 auto; }
  .moonform.fs-root .fs-router .choice-label { font-family: var(--serif); text-transform: uppercase; font-weight: 400; font-size: 1.125rem; letter-spacing: 0; line-height: 1.1; }
  .moonform.fs-root .fs-router .choice-desc { font-size: .875rem; letter-spacing: -.5px; margin-top: .5rem; }
  .moonform.fs-root .fs-booking .form-nav { margin-top: 0; }
  .moonform.fs-root .cal-inline-mount { width: 100%; min-height: 580px; overflow: auto; -webkit-overflow-scrolling: touch; }

/* ═══ RESPONSIVE (Bruno stacks at 991px) ═════════════════════════ */
  @media screen and (max-width: 991px) {
    .moonform.fs-root .fs-sim { flex-direction: column; }
    .moonform.fs-root .fs-right { width: 100%; max-width: none; }
  }
  @media (max-width: 599px) {
    .moonform.fs-root .fs-left, .moonform.fs-root .fs-router, .moonform.fs-root .fs-booking { padding: 1.5rem; }
    .moonform.fs-root .fs-choices { grid-template-columns: 1fr; }
    .moonform.fs-root .choice-label { font-size: 14px; }
    .moonform.fs-root .fs-router .choice-card { min-height: 0; padding: 1.25rem; gap: .625rem; }
    .moonform.fs-root .fs-router .choice-label { font-size: 1rem; }
    .moonform.fs-root .cal-inline-mount { min-height: 70vh; }
  }

/* ═══ RAPPORT PDF: GATE (step 3) + RESULT (step 4), 2026-10-22 ═════════════════
   Same field styles as fine_lead (linen fields, serif labels), inside a centred fs-card. */
  .moonform.fs-root .fs-gate { padding: 2.5rem; display: flex; flex-direction: column; gap: 1.5rem; max-width: 40rem; margin: 0 auto; }
  .moonform.fs-root .input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .moonform.fs-root .input-group { margin-bottom: 14px; }
  .moonform.fs-root .input-label { font-family: var(--serif); font-size: 14px; font-weight: 400; color: var(--ink); letter-spacing: 0; text-transform: uppercase; line-height: 1.1; display: block; margin-bottom: 10px; }
  .moonform.fs-root .input-field { width: 100%; padding: 13px 14px; border: 0; border-bottom: 1px solid var(--border-2); border-radius: 0; font-family: var(--sans); letter-spacing: -0.5px; font-size: 15px; font-weight: 500; color: var(--ink); background: var(--linen); outline: none; transition: border-color var(--transition), background-color var(--transition); }
  .moonform.fs-root .input-field:focus { border-bottom-color: var(--red); }
  .moonform.fs-root .input-field::placeholder { color: var(--ink-40); font-weight: 400; }
  .moonform.fs-root .input-field.error { border-bottom-color: var(--error); background: var(--error-bg); }
  .moonform.fs-root .error-msg { font-size: 12px; color: var(--error); margin-top: 6px; display: none; line-height: 1.3; }
  .moonform.fs-root .error-msg.visible { display: block; }
  .moonform.fs-root .consent-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 6px; font-size: 13px; color: var(--ink-60); line-height: 1.4; cursor: pointer; }
  .moonform.fs-root .consent-row input { width: 16px; height: 16px; margin-top: 1px; flex-shrink: 0; accent-color: var(--red); cursor: pointer; }
  .moonform.fs-root .consent-row a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
  .moonform.fs-root .fs-gate .form-nav { margin-top: 0; }
  .moonform.fs-root .spinner { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; opacity: 0.7; border-radius: 50%; animation: moonformSpin 0.7s linear infinite; }
  @keyframes moonformSpin { to { transform: rotate(360deg); } }
  .moonform.fs-root .fs-gate-status, .moonform.fs-root .fs-gate-error { font-size: 13px; line-height: 1.4; letter-spacing: -.5px; display: none; }
  .moonform.fs-root .fs-gate-status { color: var(--ink-60); }
  .moonform.fs-root.fs-generating .fs-gate-status { display: block; }
  .moonform.fs-root .fs-gate-error { color: var(--error); }
  .moonform.fs-root .fs-gate-error.visible { display: block; }
  .moonform.fs-root .fs-done { text-align: center; align-items: center; gap: 1.25rem; }
  .moonform.fs-root .ty-icon { width: 56px; height: 56px; background: var(--linen); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--red); }
  .moonform.fs-root.fs-pdf-error .ty-icon { color: var(--ink-60); }
  .moonform.fs-root h2.ty-title { font-family: var(--serif); font-size: 24px; font-weight: 400; text-transform: uppercase; color: var(--ink); letter-spacing: 0; line-height: 1.1; }
  .moonform.fs-root .ty-text { font-size: 16px; color: var(--ink-60); line-height: 1.4; max-width: 28rem; letter-spacing: -.5px; }
  .moonform.fs-root .ty-text strong { color: var(--ink); font-weight: 500; }
  .moonform.fs-root .fs-done-ctas { display: flex; gap: .75rem; width: 100%; max-width: 28rem; }
  .moonform.fs-root .fs-done-ctas .fs-cta { flex: 1; }
  @media (max-width: 599px) {
    .moonform.fs-root .fs-gate { padding: 1.5rem; }
    .moonform.fs-root .input-row { grid-template-columns: 1fr; }
    .moonform.fs-root .input-field { font-size: 16px; } /* no iOS zoom on focus */
    .moonform.fs-root .fs-done-ctas { flex-direction: column; }
  }