/* =========================================================================
   dfm — dynamic form modal
   A multi-step lead qualifier, built 1:1 from the Figma component set
   "Agent Chat Components" (file upJOoH3XMPNsbf5z4Q3Vtt, node 20223-18246).

   Everything a brand needs to move is a --dfm-* custom property declared on
   .dfm-root, in the LEVERS block below. Everything else is structure taken
   from the design and is deliberately NOT a lever.

   A site adopts the component by writing ONE .dfm-root{} block at the bottom
   of its own css/site.css, mapping its palette onto these names. This file is
   never edited per site — it gets overwritten on update.

   Namespace: .dfm-* classes, --dfm-* tokens. Nothing here touches the host.
   ========================================================================= */

/* ===================== 1. LEVERS ========================================
   name | default | what it moves
   ---------------------------------------------------------------------- */
.dfm-root{
  /* --- frame ------------------------------------------------------- */
  --dfm-color-scheme: light;          /* native caret, scrollbar, autofill plate */
  --dfm-max-w: 1112px;                /* desktop panel width  (Figma measure) */
  --dfm-max-h: 520px;                 /* desktop panel height (Figma measure) */
  --dfm-rail-w: 282px;                /* the desktop agent rail */

  /* --- surfaces ---------------------------------------------------- */
  --dfm-surface: #ffffff;             /* panel, kicker bar, footer bar */
  --dfm-surface-2: #f1f1f2;           /* agent rail + bubble, progress track, hover wash */
  --dfm-chip: var(--dfm-surface);     /* the pill behind a card's check disc */
  --dfm-badge: rgba(32,40,51,.95);    /* dark disc behind an option row's glyph */
  --dfm-badge-fg: #ffffff;            /* that glyph */

  /* --- ink --------------------------------------------------------- */
  --dfm-ink: #202833;                 /* question, agent name, option labels */
  --dfm-ink-muted: #4d5865;           /* role, counters, hints, placeholders, terms */
  --dfm-ink-on-media: #ffffff;        /* card title over a photo */
  --dfm-ink-on-media-2: rgba(231,231,231,.8);   /* card subtitle over a photo */

  /* --- accent ------------------------------------------------------ */
  --dfm-accent: #fe2a3e;              /* NEXT circle, checked fill, progress, kicker icon, CTA */
  --dfm-on-accent: #ffffff;           /* ink ON the accent. Flip dark for gold/mint/yellow */
  --dfm-icon-on-accent: rgba(255,255,255,.8);  /* the caret inside NEXT, the CTA arrow */
  --dfm-accent-hover: #e81a2b;        /* CTA / NEXT hover */
  --dfm-accent-wash: rgba(254,42,62,.08);      /* hover tint on an unselected option row */
  --dfm-ring: var(--dfm-accent);      /* the selected-card ring (split: ring gold, fill blue) */
  --dfm-ring-w: 4px;                  /* 1px turns a glow language into a hairline language */
  --dfm-focus: var(--dfm-accent);     /* focus ring; separate — a pale accent fails as one */
  --dfm-danger: #c8102e;              /* validation. NOT the accent: a gold "error" reads as a badge,
                                         and an accent picked for a button rarely passes 4.5:1 as text */

  /* --- lines ------------------------------------------------------- */
  --dfm-line: rgba(32,40,51,.10);     /* bar rules, progress track, option row border */
  --dfm-line-strong: rgba(32,40,51,.20);  /* field underline, BACK circle, unchecked disc */
  --dfm-line-w: 1px;

  /* --- scrim ------------------------------------------------------- */
  --dfm-scrim: rgba(12,20,31,.62);    /* the page overlay */
  --dfm-scrim-blur: 0px;              /* 8px reads expensive, 0 reads editorial */
  --dfm-on-scrim: #ffffff;            /* the close X, which sits outside the panel */

  /* --- shape ------------------------------------------------------- */
  --dfm-radius-scale: 1;              /* THE shape lever. Every radius below scales by it */
  --dfm-radius-modal:  calc(24px  * var(--dfm-radius-scale));
  --dfm-radius-card:   calc(12px  * var(--dfm-radius-scale));
  --dfm-radius-pill:   calc(999px * var(--dfm-radius-scale));
  --dfm-radius-circle: calc(999px * var(--dfm-radius-scale));
  --dfm-radius-cta:    calc(40px  * var(--dfm-radius-scale));
  --dfm-radius-field: 0;              /* already 0 — the field is an underline, not a box */
  --dfm-radius-dot: 999px;            /* NOT scaled: a square status dot reads as a bug */

  /* --- type -------------------------------------------------------- */
  --dfm-font-display: inherit;        /* the question and the greeting */
  --dfm-font-ui: inherit;             /* labels, fields, buttons, counters */
  --dfm-font-card: var(--dfm-font-ui);/* card titles (a Didone brand sets its serif here alone) */
  --dfm-type-scale: 1;                /* one multiplier over the whole ramp */
  --dfm-q-size: calc(26px * var(--dfm-type-scale));  /* desktop anchor; 24/20 below */
  --dfm-q-weight: 500;
  --dfm-q-tracking: -.03em;
  --dfm-q-style: normal;              /* italic is a real voice for a Bodoni brand */
  --dfm-q-align: left;                /* center for editorial */
  --dfm-q-leading: 1.2;
  --dfm-body-weight: 400;
  --dfm-caps-transform: uppercase;    /* the small-caps register: kicker, counters, buttons */
  --dfm-caps-tracking: .08em;
  --dfm-caps-weight: 500;

  /* --- elevation --------------------------------------------------- */
  --dfm-shadow-modal: 0 40px 120px -40px rgba(0,0,0,.45);
  --dfm-border-modal: 0;              /* a flat brand's alternative to a shadow: a hairline */
  --dfm-shadow-hover: 8px 6px 20px 0 rgba(0,0,0,.15);
  --dfm-shadow-select: 8px 6px 30px 0 rgba(0,0,0,.08);
  --dfm-shadow-cta: none;

  /* --- imagery ----------------------------------------------------- */
  --dfm-media-scrim-top: rgba(0,0,0,.2);
  --dfm-media-scrim-bottom: rgba(0,0,0,.8);   /* do not drop below ~.6 — white titles stop passing */
  --dfm-media-filter: none;           /* grayscale(1), saturate(.7) — joins photos to the brand */
  --dfm-media-filter-sel: var(--dfm-media-filter);  /* selection can RETURN colour */
  --dfm-media-zoom: 1;                /* hover scale. 1.03 glossy, 1 editorial */

  /* --- motion ------------------------------------------------------ */
  --dfm-ease: cubic-bezier(.4,0,.2,1);
  --dfm-dur: 160ms;                   /* colour / border / opacity */
  --dfm-dur-step: 320ms;              /* step transition and progress-fill width */
  --dfm-shift: 12px;                  /* how far a step slides on advance; 0 = crossfade */

  /* --- semantic, not brand ----------------------------------------- */
  --dfm-presence: #3cca52;            /* "the agent is online" */
}

/* Derived: a brand sets two colours and gets six. Literal first, mix second —
   an unsupported color-mix() inside a custom property computes the CONSUMING
   property to `unset`, and every hairline would vanish at once. */
@supports (color: color-mix(in srgb, red, blue)){
  .dfm-root{
    --dfm-surface-2:    color-mix(in srgb, var(--dfm-ink) 7%,  var(--dfm-surface));
    /* 72%, not 62%: at 62% the derived muted ink computes to 4.34:1 on white,
       and it carries the hint, the counter, the terms and every placeholder. */
    --dfm-ink-muted:    color-mix(in srgb, var(--dfm-ink) 72%, var(--dfm-surface));
    --dfm-line:         color-mix(in srgb, var(--dfm-ink) 10%, transparent);
    --dfm-line-strong:  color-mix(in srgb, var(--dfm-ink) 20%, transparent);
    --dfm-accent-hover: color-mix(in srgb, var(--dfm-accent) 92%, #000);
    --dfm-accent-wash:  color-mix(in srgb, var(--dfm-accent) 8%,  transparent);
  }
}

/* ===================== 2. SCOPED RESET ==================================
   Host pages are hand-authored and inconsistent: emirex zeroes fieldset,
   first-dream does not; emirex ships [hidden]{display:none!important},
   first-dream does not; emirex sets svg{width:1em;fill:currentColor} which
   would shrink and blob every icon in here. Never rely on a host rule
   existing, and never style a bare tag — always a class.
   ---------------------------------------------------------------------- */
/* :where() keeps the reset at one-class specificity: high enough to beat a
   host's bare `p{}` / `button{}` rule, low enough that any .dfm-* rule later
   in this file still wins. Without it `.dfm-root button{background:none}`
   silently erases `.dfm-cta{background:var(--dfm-accent)}`. */
.dfm-root, .dfm-root *, .dfm-root *::before, .dfm-root *::after{ box-sizing: border-box; }
.dfm-root :where(p, h2, h3, ul, li, figure, fieldset, legend, form, label, span){
  margin: 0; padding: 0; border: 0; list-style: none;
}
.dfm-root [hidden]{ display: none !important; }
/* padding and min-width belong here too: a host `input{padding:12px}` silently
   inflates every field, and a host `button{min-width:180px}` pushes NEXT off
   the footer. Zero them, then let the component's own classes put them back. */
.dfm-root :where(button, input, select, textarea){
  font: inherit; color: inherit; background: none; border: 0; margin: 0;
  padding: 0; min-width: 0; max-width: none; min-height: 0; border-radius: 0;
  text-align: inherit; letter-spacing: inherit; box-shadow: none; appearance: none;
}
.dfm-root :where(button){ cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dfm-root :where(a){ color: inherit; }
/* Only font-family is ever inherited from the host. text-transform, font-style
   and text-align are the three that travel silently from a host's `h2{}` or
   `body{}` and wreck a line of copy — so they are neutralised here and set
   back explicitly, from tokens, by the rules that want them. */
.dfm-root :where(*){
  text-transform: none; font-style: normal; text-align: inherit; text-indent: 0;
  font-variant: normal; word-spacing: normal;
}
.dfm-root .dfm-i{                       /* every icon in the component */
  display: block; flex: none; fill: none; width: 20px; height: 20px;
}
.dfm-root :focus-visible{               /* 0,2,0 — beats a bare host :focus-visible */
  outline: 2px solid var(--dfm-focus); outline-offset: 2px; border-radius: 2px;
}
.dfm-root .dfm-sr{
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* The native inputs stay in the tab order — clip-path, never display:none.
   That is what buys arrow-key roving, :checked, and form semantics. */
.dfm-root .dfm-in{
  position: absolute; width: 1px; height: 1px; margin: -1px;
  opacity: 0; clip-path: inset(50%); pointer-events: none;
}

/* ===================== 3. DIALOG + SCRIM ================================ */
/* inset:0 on a fixed element, never 100vw/100vh: vw INCLUDES the classic
   scrollbar gutter, which left a 15px strip of the live page outside the scrim
   and pushed the panel off-centre by the same amount. */
.dfm-root{
  position: fixed; inset: 0;
  width: auto; height: auto;
  max-width: none; max-height: 100dvh;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: var(--dfm-scrim);
  -webkit-backdrop-filter: blur(var(--dfm-scrim-blur));
  backdrop-filter: blur(var(--dfm-scrim-blur));
  display: grid; align-items: center; justify-items: center;
  color-scheme: var(--dfm-color-scheme);
  color: var(--dfm-ink);
  font-family: var(--dfm-font-ui);
  font-weight: var(--dfm-body-weight);
  line-height: 1.5; letter-spacing: normal; text-transform: none; text-align: left;
}
.dfm-root:not([open]){ display: none; }
.dfm-root::backdrop{ background: transparent; }

/* the sized box. overflow stays visible so the close X can sit outside it */
.dfm-frame{
  position: relative;
  /* `size`, not `inline-size`: the short-viewport rules in §17 need the height
     axis too. Safe here because the frame's own width and height are explicit
     and never derived from its contents. */
  container-type: size; container-name: dfm;
  width: min(var(--dfm-max-w), 100% - 64px);
  height: min(var(--dfm-max-h), 100% - 64px);
  border-radius: var(--dfm-radius-modal);
  box-shadow: var(--dfm-shadow-modal);
  animation: dfm-rise var(--dfm-dur-step) var(--dfm-ease) both;
}
.dfm-panel{
  position: relative; height: 100%; width: 100%;
  overflow: hidden;
  background: var(--dfm-surface);
  border: var(--dfm-border-modal);
  border-radius: inherit;
  display: grid;
}
@keyframes dfm-rise{ from{ opacity:0; transform: translateY(14px) scale(.985) } }
.dfm-root[open]{ animation: dfm-fade var(--dfm-dur) var(--dfm-ease) both; }
@keyframes dfm-fade{ from{ opacity: 0 } }

/* ===================== 4. THE GRID ======================================
   One DOM, three layouts. The agent block and the progress meter genuinely
   change position between sizes; they move between grid AREAS rather than
   being re-parented by matchMedia, which is the thing that breaks silently
   at a width nobody tested.

   Every switch is @container, never @media: the panel is ~1000px inside a
   1600px window and --dfm-max-w is a lever, so the viewport is the wrong box.
   ---------------------------------------------------------------------- */

/* --- mobile (base): agent in the header, meter as a full-bleed 4px band -- */
.dfm-panel{
  grid-template-columns: minmax(0,1fr) auto;
  grid-template-rows: auto auto auto minmax(0,1fr) auto;
  grid-template-areas:
    "agent kick"
    "meter meter"
    "q     q"
    "slot  slot"
    "nav   nav";
}
/* --- tablet: agent inline under the question, meter back in the footer --- */
@container dfm (min-width: 520px){
  .dfm-panel{
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-rows: auto auto auto minmax(0,1fr) auto;
    grid-template-areas:
      "kick  kick"
      "q     q"
      "agent agent"
      "slot  slot"
      "meter nav";
  }
}
/* --- desktop: the agent becomes the full-height right rail -------------- */
@container dfm (min-width: 900px){
  .dfm-panel{
    grid-template-columns: minmax(0,1fr) auto var(--dfm-rail-w);
    grid-template-rows: auto auto minmax(0,1fr) auto;
    grid-template-areas:
      "kick  kick  agent"
      "q     q     agent"
      "slot  slot  agent"
      "meter nav   agent";
  }
}

/* a step with no question (type:message) drops the agent block and the
   question row — the step draws its own, larger agent */
.dfm-panel[data-type="message"] .dfm-agent,
.dfm-panel[data-type="message"] .dfm-q{ display: none; }
/* …and the rail column goes with it, or the kicker rule and the footer rule
   stop 282px short of the panel edge and the greeting sits off-centre. */
.dfm-panel[data-type="message"]{ --dfm-rail-w: 0px; }

/* ===================== 5. KICKER BAR ==================================== */
.dfm-kick{
  grid-area: kick;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px 12px 0;            /* mobile: icon only, top-right of the header */
  background: var(--dfm-surface);
  align-self: start;
}
.dfm-kick .dfm-i{ width: 20px; height: 20px; color: var(--dfm-accent); }
.dfm-kick__label{
  display: none;                        /* the kicker sentence is deleted on mobile */
  flex: 1; min-width: 0;
  font-size: 10px; line-height: 1.8;
  font-weight: var(--dfm-caps-weight);
  letter-spacing: .06em;
  text-transform: var(--dfm-caps-transform);
  color: var(--dfm-ink);
  overflow-wrap: break-word;
}
@container dfm (min-width: 520px){
  .dfm-kick{
    /* 20/19 + the 1px rule = the Figma bar's 60px, not 61 */
    padding: 20px 34px 19px; align-self: auto;
    border-bottom: var(--dfm-line-w) solid var(--dfm-line);
  }
  .dfm-kick__label{ display: block; }
}

/* ===================== 6. AGENT BLOCK ===================================
   mobile   : avatar 44 + name/role, no bubble
   tablet   : avatar 58 left, name/role + bubble right
   desktop  : a 282px rail — avatar/name/role, then the bubble with a pointer
   ---------------------------------------------------------------------- */
.dfm-agent{
  grid-area: agent;
  display: grid; grid-template-columns: auto minmax(0,1fr);
  grid-template-areas: "av id";
  align-items: center; gap: 0 10px;
  padding: 12px 8px 12px 20px;
  min-width: 0;
}
.dfm-agent__av{
  grid-area: av; position: relative; flex: none;
  width: 44px; height: 44px; border-radius: var(--dfm-radius-dot);
  background: var(--dfm-surface-2); overflow: visible;
}
.dfm-agent__av img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit; display: block;
}
.dfm-agent__ini{                        /* fallback when no avatar is configured */
  position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: inherit; background: var(--dfm-accent); color: var(--dfm-on-accent);
  font-size: 15px; font-weight: 600; letter-spacing: .02em;
}
.dfm-agent__dot{
  position: absolute; right: .5px; bottom: 1px;
  width: 12px; height: 12px; border-radius: var(--dfm-radius-dot);
  background: var(--dfm-presence);
  border: 2px solid var(--dfm-surface-2);
}
/* Name and role share one 25px row from tablet up, as in Figma — stacking them
   costs 28px of the step area, which is exactly what a short panel cannot spare. */
.dfm-agent__id{ grid-area: id; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
@container dfm (min-width: 520px){
  .dfm-agent__id{ flex-direction: row; align-items: baseline; gap: 6px; }
}
@container dfm (min-width: 900px){
  .dfm-agent__id{ flex-direction: column; align-items: flex-start; gap: 0; }
}
.dfm-agent__name{
  font-size: 14px; line-height: 1.8; font-weight: 700; color: var(--dfm-ink);
  letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dfm-agent__role{
  font-size: 12px; line-height: 1.5; font-weight: var(--dfm-body-weight);
  color: var(--dfm-ink-muted); letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dfm-agent__bubble{ display: none; }
.dfm-agent__from{
  font-size: 10px; line-height: 2; opacity: .8; color: var(--dfm-ink-muted);
  letter-spacing: 0; margin-bottom: 4px;
}
.dfm-agent__msg{
  font-size: 14px; line-height: 1.6; letter-spacing: -.02em;
  font-weight: var(--dfm-caps-weight); color: var(--dfm-ink);
  overflow-wrap: break-word;
}

@container dfm (min-width: 520px){
  .dfm-agent{
    grid-template-areas: "av id" "av bubble";
    grid-template-rows: auto auto;
    align-items: start; gap: 4px 12px;
    padding: 20px 34px 0;
  }
  .dfm-agent__av{ width: 58px; height: 58px; }
  .dfm-agent__dot{ border-color: var(--dfm-surface); }
  .dfm-agent__role{ line-height: 2; }
  .dfm-agent__bubble{
    grid-area: bubble; display: block; position: relative;
    background: var(--dfm-surface-2); border-radius: var(--dfm-radius-card);
    padding: 12px 16px; margin-top: 4px;
  }
  .dfm-agent__from{ display: none; }
  .dfm-agent__msg{ font-size: 12px; line-height: 2; letter-spacing: 0; font-weight: var(--dfm-body-weight); }
}

@container dfm (min-width: 900px){
  .dfm-agent{
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: "av" "id" "bubble";
    grid-template-rows: auto auto 1fr;
    align-content: start; gap: 0;
    padding: 26px 16px;
    background: var(--dfm-surface-2);
    width: var(--dfm-rail-w);
  }
  .dfm-agent__av{ margin-bottom: 12px; }
  .dfm-agent__dot{ border-color: var(--dfm-surface-2); }
  .dfm-agent__id{ margin-bottom: 12px; }
  .dfm-agent__bubble{
    background: var(--dfm-line); margin-top: 0; padding: 16px 20px;
    align-self: start;
  }
  .dfm-agent__bubble::before{           /* the pointer arrow, desktop only */
    content: ""; position: absolute; left: 20px; top: -9px;
    width: 0; height: 0;
    border-left: 9px solid transparent; border-right: 9px solid transparent;
    border-bottom: 10px solid var(--dfm-line);
  }
  .dfm-agent__from{ display: block; }
}

/* ===================== 7. QUESTION ====================================== */
.dfm-q{
  grid-area: q;
  padding: 24px 20px 0;
  font-family: var(--dfm-font-display);
  font-size: calc(20px * var(--dfm-type-scale));
  font-weight: var(--dfm-q-weight);
  font-style: var(--dfm-q-style);
  line-height: var(--dfm-q-leading);
  letter-spacing: var(--dfm-q-tracking);
  text-align: var(--dfm-q-align);
  color: var(--dfm-ink);
  overflow-wrap: break-word;
  outline-offset: 4px;
}
@container dfm (min-width: 520px){
  .dfm-q{ padding: 24px 34px 0; font-size: calc(24px * var(--dfm-type-scale)); }
}
@container dfm (min-width: 900px){
  .dfm-q{ font-size: var(--dfm-q-size); }
}

/* ===================== 8. THE SLOT ======================================
   The step renders here. The 2px rail on its right is the scroll indicator
   from the design — it only appears when the step actually overflows.
   ---------------------------------------------------------------------- */
.dfm-slot{
  grid-area: slot; min-height: 0; min-width: 0;
  display: flex; gap: 10px; align-items: stretch;
  /* No bottom padding at any size: in the design the step area runs right up to
     the footer rule, and the content scrolls under it. */
  padding: 16px 20px 0;
}
@container dfm (min-width: 520px){
  .dfm-slot{ padding: 20px 34px 0; }
}
.dfm-scroll{
  flex: 1; min-width: 0; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.dfm-scroll::-webkit-scrollbar{ width: 0; height: 0; }
.dfm-rail{
  flex: none; width: 2px; align-self: stretch; max-height: 260px;
  background: var(--dfm-line); overflow: hidden; opacity: 0;
  transition: opacity var(--dfm-dur) var(--dfm-ease);
}
.dfm-rail[data-on]{ opacity: 1; }
.dfm-rail__thumb{
  display: block; width: 100%; min-height: 24px; background: var(--dfm-accent);
  transform: translateY(0);
}
@container dfm (max-width: 519px){ .dfm-rail{ max-height: none; } }

.dfm-step{ animation: dfm-in var(--dfm-dur-step) var(--dfm-ease) both; }
@keyframes dfm-in{ from{ opacity: 0; transform: translateX(var(--dfm-shift)) } }
.dfm-step[data-dir="back"]{ animation-name: dfm-in-back; }
@keyframes dfm-in-back{ from{ opacity: 0; transform: translateX(calc(-1 * var(--dfm-shift))) } }

/* ===================== 9. CARDS =========================================
   CARD/MODAL-OPTION. Fractional values (33.6 / 74 / 24.401 / 8.401) are the
   design's own; rounding them changes the card height.
   ---------------------------------------------------------------------- */
.dfm-grid{
  --dfm-cols: 1;
  display: grid; column-gap: 10px; row-gap: 8px;
  grid-template-columns: repeat(var(--dfm-cols), minmax(0,1fr));
  justify-content: start;
}
@container dfm (min-width: 520px){ .dfm-grid{ --dfm-cols: var(--dfm-cols-t, 2); } }
@container dfm (min-width: 900px){
  .dfm-grid{ --dfm-cols: var(--dfm-cols-d, 3); }
  /* Cap the GRID, not the card. Capping the card inside a 1fr track leaves the
     leftover width inside the track, so a two-option step drew its cards 134px
     apart instead of 10. Capping the grid keeps 3-up at 246 with the design's
     trailing slack and lets 4-up shrink to 199, which is what Figma shows. */
  .dfm-grid{
    max-width: calc(var(--dfm-cols) * 246px + (var(--dfm-cols) - 1) * 10px);
  }
}

.dfm-card{
  --dfm-pad: 16px; --dfm-inner: 26px;
  position: relative; isolation: isolate; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  gap: var(--dfm-inner); padding: var(--dfm-pad);
  border-radius: var(--dfm-radius-card);
  background: var(--dfm-surface-2);
  overflow: hidden;
  transition: box-shadow var(--dfm-dur) var(--dfm-ease);
}
@container dfm (min-width: 900px){
  .dfm-card{ --dfm-pad: 24px; --dfm-inner: 64px; }
}
.dfm-card__img{
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  border-radius: inherit; pointer-events: none;
  filter: var(--dfm-media-filter);
  transition: transform var(--dfm-dur-step) var(--dfm-ease), filter var(--dfm-dur) var(--dfm-ease);
}
.dfm-card__scrim{
  position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--dfm-media-scrim-top) 0%, var(--dfm-media-scrim-bottom) 100%);
}
/* no photo: a typographic plate, never a hole */
.dfm-card[data-plate] .dfm-card__scrim{ background: none; }
.dfm-card[data-plate] .dfm-card__title{ color: var(--dfm-ink); }
.dfm-card[data-plate] .dfm-card__sub{ color: var(--dfm-ink-muted); }
.dfm-card[data-plate]{ box-shadow: inset 0 0 0 var(--dfm-line-w) var(--dfm-line); }

.dfm-card__ring{
  position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 var(--dfm-ring-w) var(--dfm-ring);
  opacity: 0; transition: opacity var(--dfm-dur) var(--dfm-ease);
}
.dfm-card__tick{
  position: relative; z-index: 2; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 32.401px; height: 33.6px; padding: 4px;
  background: var(--dfm-chip); border-radius: var(--dfm-radius-circle);
}
.dfm-card__disc{
  display: flex; align-items: center; justify-content: center;
  width: 24.401px; height: 25.6px; border-radius: var(--dfm-radius-circle);
  border: 1px solid var(--dfm-line-strong); background: transparent;
  color: transparent;                   /* the check is present but invisible by default */
  transition: background-color var(--dfm-dur) var(--dfm-ease),
              border-color var(--dfm-dur) var(--dfm-ease), color var(--dfm-dur) var(--dfm-ease);
}
.dfm-card__disc .dfm-i{ width: 9.70122px; height: 6.9px; }
.dfm-card__text{
  position: relative; z-index: 2;
  width: 100%; min-height: 74px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  text-align: left; overflow-wrap: break-word;
}
.dfm-card__title{
  font-family: var(--dfm-font-card);
  font-size: 10px; line-height: 1.8; font-weight: 700;
  letter-spacing: .06em; text-transform: var(--dfm-caps-transform);
  color: var(--dfm-ink-on-media);
}
.dfm-card__sub{
  font-size: 12px; line-height: 2; font-weight: var(--dfm-body-weight);
  letter-spacing: 0; color: var(--dfm-ink-on-media-2);
}
@container dfm (min-width: 900px){
  .dfm-card__title{
    font-size: 16px; line-height: 1.4; font-weight: var(--dfm-caps-weight);
    letter-spacing: -.02em; text-transform: none;
  }
}
/* states */
.dfm-card:hover{ box-shadow: var(--dfm-shadow-hover); }
.dfm-card:hover .dfm-card__disc{ color: var(--dfm-line-strong); }
.dfm-card:hover .dfm-card__img{ transform: scale(var(--dfm-media-zoom)); }
.dfm-card:has(.dfm-in:focus-visible){ box-shadow: var(--dfm-shadow-hover); outline: 2px solid var(--dfm-focus); outline-offset: 2px; }
.dfm-card:has(.dfm-in:focus-visible) .dfm-card__disc{ color: var(--dfm-line-strong); }
.dfm-card:has(.dfm-in:checked), .dfm-card[data-on]{ box-shadow: var(--dfm-shadow-select); }
.dfm-card:has(.dfm-in:checked) .dfm-card__ring, .dfm-card[data-on] .dfm-card__ring{ opacity: 1; }
.dfm-card:has(.dfm-in:checked) .dfm-card__disc, .dfm-card[data-on] .dfm-card__disc{
  background: var(--dfm-accent); border-color: var(--dfm-accent); color: var(--dfm-on-accent);
}
.dfm-card:has(.dfm-in:checked) .dfm-card__img, .dfm-card[data-on] .dfm-card__img{
  filter: var(--dfm-media-filter-sel);
}

/* ===================== 10. OPTION ROWS ==================================
   INPUT/Select Option Text. 48px pill, radio dot on the right, optional dark
   glyph badge on the left. Padding is 9/11 + a 1px border so the row lands on
   exactly 48 — Figma draws strokes inside, CSS draws them outside.
   ---------------------------------------------------------------------- */
.dfm-list{
  display: grid; column-gap: 16px; row-gap: 10px;
  grid-template-columns: minmax(0,1fr);
  justify-content: start;
}
@container dfm (min-width: 560px){ .dfm-list{ grid-template-columns: repeat(2, minmax(0,367px)); } }

.dfm-opt{
  position: relative; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 9px 11px;
  border: var(--dfm-line-w) solid var(--dfm-line);
  border-radius: var(--dfm-radius-pill);
  background: transparent; color: var(--dfm-ink);
  transition: background-color var(--dfm-dur) var(--dfm-ease),
              border-color var(--dfm-dur) var(--dfm-ease), color var(--dfm-dur) var(--dfm-ease);
}
.dfm-opt__badge{
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--dfm-radius-dot);
  background: var(--dfm-badge); color: var(--dfm-badge-fg);
}
.dfm-opt__badge .dfm-i{ width: 12px; height: 12px; }
.dfm-opt__badge[data-brand="whatsapp"]{ background: #43C455; }  /* WhatsApp's own mark — not a lever */
.dfm-opt__label{
  flex: 1; min-width: 0; padding-left: 8px;
  font-size: 14px; line-height: 1.8; font-weight: var(--dfm-body-weight);
  letter-spacing: 0; text-align: left; overflow-wrap: break-word;
}
.dfm-opt__mark{
  flex: none; display: grid; place-items: center;
  width: 24.401px; height: 25.6px; border-radius: var(--dfm-radius-circle);
  border: 1px solid var(--dfm-line-strong); background: transparent;
  color: transparent;
  transition: background-color var(--dfm-dur) var(--dfm-ease),
              border-color var(--dfm-dur) var(--dfm-ease), color var(--dfm-dur) var(--dfm-ease);
}
.dfm-opt__mark .dfm-i{ width: 9.70122px; height: 6.9px; }

.dfm-opt:hover:not(:has(.dfm-in:checked)):not([data-on]){
  background: var(--dfm-accent-wash); border-color: var(--dfm-line-strong);
}
.dfm-opt:hover:not(:has(.dfm-in:checked)):not([data-on]) .dfm-opt__mark{ color: var(--dfm-line-strong); }
.dfm-opt:has(.dfm-in:focus-visible){ outline: 2px solid var(--dfm-focus); outline-offset: 2px; }
.dfm-opt:has(.dfm-in:checked), .dfm-opt[data-on]{
  background: var(--dfm-accent); border-color: var(--dfm-accent); color: var(--dfm-on-accent);
}
.dfm-opt:has(.dfm-in:checked) .dfm-opt__mark, .dfm-opt[data-on] .dfm-opt__mark{
  background: var(--dfm-on-accent); border-color: var(--dfm-accent); color: var(--dfm-accent);
}
.dfm-opt:has(.dfm-in:checked):has(.dfm-in:focus-visible){ outline-color: var(--dfm-ink); }

/* ===================== 11. FIELDS =======================================
   Underline fields, never boxed — that treatment carries the whole modal.
   ---------------------------------------------------------------------- */
.dfm-form{ display: flex; flex-direction: column; gap: 26px; }
.dfm-form__row{ display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.dfm-form__set{ display: flex; flex-direction: column; gap: 16px; width: 100%; min-width: 0; }
@container dfm (min-width: 768px){
  .dfm-form__row{ flex-direction: row; gap: 10px; align-items: flex-end; }
  .dfm-form__set{ flex: 1; }
  /* Desktop puts the terms 4px under the form row, not 26 — and those 22px
     are exactly what makes three fields plus the legal line fit the panel
     without the terms falling below the fold. */
  .dfm-form{ gap: 4px; }
}
.dfm-field{ display: flex; flex-direction: column; gap: 4px; min-width: 200px; width: 100%; }
.dfm-field__label{
  font-size: 15px; line-height: 1.8; font-weight: var(--dfm-body-weight);
  color: var(--dfm-ink); letter-spacing: 0;
  overflow: hidden; text-overflow: ellipsis;
}
.dfm-field__rule{
  display: flex; align-items: center; gap: 8px;
  /* 7 + the 1px rule = the design's 8: Figma draws strokes inside the box */
  padding: 0 4px 7px;
  border-bottom: var(--dfm-line-w) solid var(--dfm-line-strong);
  border-radius: var(--dfm-radius-field);
  transition: border-color var(--dfm-dur) var(--dfm-ease);
}
.dfm-field__rule:hover, .dfm-field__rule:focus-within{ border-bottom-color: var(--dfm-ink-muted); }
.dfm-field__icon{ flex: none; color: var(--dfm-ink-muted); }
.dfm-field__icon .dfm-i{ width: 20px; height: 20px; }
.dfm-field__input{
  flex: 1; min-width: 0; width: 100%;
  font-size: 15px; line-height: 1.8; font-weight: var(--dfm-body-weight);
  color: var(--dfm-ink); letter-spacing: 0;
  background: none; border: 0; outline-offset: 4px;
}
/* No extra opacity on top of an already-muted ink: the design's .70 is applied
   to a token that is itself only a step off the body colour, not to ours. */
.dfm-field__input::placeholder{ color: var(--dfm-ink-muted); opacity: 1; }
/* NOT reserved. Reserving 22px per field is what the design avoids by hiding
   its supporting-text slot, and doing it anyway pushed the legal line below the
   fold on desktop — a worse defect than the one it fixed. The shift on error
   lands BELOW the field that focus just moved to, never under it. */
.dfm-field__help{
  min-height: 0; font-size: 12px; line-height: 1.5;
  color: var(--dfm-ink-muted); letter-spacing: 0;
}
/* An empty <p> is still a flex item, and the column gap around it was adding
   4px to a field the spec puts at exactly 66 */
.dfm-field__help:empty{ display: none; }
.dfm-field[data-invalid] .dfm-field__rule{ border-bottom-color: var(--dfm-danger); }
.dfm-field[data-invalid] .dfm-field__help{ color: var(--dfm-danger); }
/* Chrome's autofill plate is otherwise unstoppable and fatal on a dark theme */
.dfm-root input:-webkit-autofill,
.dfm-root input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--dfm-ink);
  box-shadow: inset 0 0 0 100px var(--dfm-surface);
  caret-color: var(--dfm-ink);
}
.dfm-dial{
  flex: none; display: flex; align-items: center; gap: 4px;
  padding: 0 8px 0 4px; border-right: var(--dfm-line-w) solid var(--dfm-line-strong);
  color: var(--dfm-ink-muted); font-size: 14px; line-height: 1.8; white-space: nowrap;
}
.dfm-dial .dfm-i{ width: 16px; height: 16px; border-radius: var(--dfm-radius-dot); }
.dfm-terms{
  font-size: 12px; line-height: 2; letter-spacing: 0;
  color: var(--dfm-ink-muted); text-align: left;
}
@container dfm (min-width: 768px){ .dfm-terms{ text-align: center; } }
.dfm-terms a{
  text-decoration: underline; text-decoration-thickness: from-font;
  text-underline-position: from-font; text-decoration-skip-ink: none;
}

/* ===================== 12. CTA ========================================== */
.dfm-cta{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  flex: none; min-height: 42px; padding: 12px 24px;
  border-radius: var(--dfm-radius-cta);
  background: var(--dfm-accent); color: var(--dfm-on-accent);
  box-shadow: var(--dfm-shadow-cta);
  font-size: 12px; line-height: 1.4; font-weight: var(--dfm-caps-weight);
  letter-spacing: var(--dfm-caps-tracking); text-transform: var(--dfm-caps-transform);
  white-space: nowrap;
  transition: background-color var(--dfm-dur) var(--dfm-ease), box-shadow var(--dfm-dur) var(--dfm-ease);
}
.dfm-cta .dfm-i{ width: 18px; height: 18px; color: var(--dfm-icon-on-accent); }
.dfm-cta:hover{ background: var(--dfm-accent-hover); }
.dfm-cta:active{ transform: translateY(1px); }
.dfm-cta[aria-disabled="true"]{ opacity: .4; }

/* ===================== 13. MESSAGE STEP ================================= */
.dfm-msg{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; text-align: center; height: 100%; padding: 8px 0;
}
.dfm-msg__who{ display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* 120px at every size — Figma does not resize this one, and it is the whole
   composition of the greeting screen */
.dfm-msg__av{
  position: relative; width: 120px; height: 120px; flex: none;
  border-radius: var(--dfm-radius-cta); background: var(--dfm-surface-2);
}
.dfm-msg__av img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit; display: block;
}
.dfm-msg__av .dfm-agent__ini{ font-size: 30px; }
.dfm-msg__av .dfm-agent__dot{ right: 3.5px; bottom: 3px; border-width: 3px; border-color: var(--dfm-surface); }
.dfm-msg__id{ display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.dfm-msg__id .dfm-agent__name{ font-size: 14px; }
.dfm-msg__id .dfm-agent__role{ font-size: 15px; line-height: 1.8; }
.dfm-msg__sep{ width: 4px; height: 4px; border-radius: var(--dfm-radius-dot); background: var(--dfm-ink-muted); opacity: .4; flex: none; }
.dfm-msg__body{
  max-width: 640px;
  font-family: var(--dfm-font-display);
  font-size: calc(16px * var(--dfm-type-scale));
  font-weight: var(--dfm-q-weight); font-style: var(--dfm-q-style);
  line-height: 1.4; letter-spacing: var(--dfm-q-tracking);
  color: var(--dfm-ink); overflow-wrap: break-word;
}
@container dfm (min-width: 520px){ .dfm-msg__body{ font-size: calc(20px * var(--dfm-type-scale)); } }
@container dfm (min-width: 900px){ .dfm-msg__body{ font-size: calc(24px * var(--dfm-type-scale)); } }
.dfm-msg .dfm-cta{ align-self: center; }

/* ===================== 14. METER ======================================== */
.dfm-meter{
  grid-area: meter;
  display: flex; flex-direction: column; gap: 8px; justify-content: center;
  min-width: 0;
}
.dfm-meter__row{ display: none; align-items: center; gap: 8px; min-width: 0; }
.dfm-meter__count{
  flex: none; font-size: 12px; line-height: 1.8; font-weight: var(--dfm-caps-weight);
  letter-spacing: var(--dfm-caps-tracking); text-transform: var(--dfm-caps-transform);
  color: var(--dfm-ink-muted);
}
.dfm-meter__hint{
  flex: 1; min-width: 0; font-size: 14px; line-height: 1.8; letter-spacing: 0;
  color: var(--dfm-ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dfm-meter__pct{
  flex: none; font-size: 14px; line-height: 1.8; font-weight: 700; letter-spacing: 0;
  color: var(--dfm-ink-muted);
}
.dfm-meter__track{
  position: relative; height: 3.81px; border-radius: var(--dfm-radius-card);
  background: var(--dfm-line); overflow: hidden;
}
.dfm-meter__fill{
  display: block; height: 100%; width: 0;
  background: var(--dfm-accent); border-radius: inherit;
  transition: width var(--dfm-dur-step) var(--dfm-ease);
}
@container dfm (min-width: 520px){
  .dfm-meter{ padding: 20px 0 20px 34px; border-top: var(--dfm-line-w) solid var(--dfm-line); }
  .dfm-meter__row{ display: flex; }
}

/* ===================== 15. NAV ========================================== */
.dfm-nav{
  grid-area: nav;
  display: flex; align-items: center; gap: 20px;
  padding: 12px 20px 20px;
}
@container dfm (min-width: 520px){
  .dfm-nav{ padding: 20px; justify-content: center; border-top: var(--dfm-line-w) solid var(--dfm-line); }
}
.dfm-nav__spacer{ flex: 1; }
.dfm-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 2px; border-radius: 16px;
  color: var(--dfm-ink-muted);
  font-size: 12px; line-height: 1.8; font-weight: var(--dfm-caps-weight);
  letter-spacing: var(--dfm-caps-tracking); text-transform: var(--dfm-caps-transform);
  white-space: nowrap;
  transition: color var(--dfm-dur) var(--dfm-ease), opacity var(--dfm-dur) var(--dfm-ease);
}
.dfm-btn:hover{ color: var(--dfm-ink); }
.dfm-btn:active .dfm-btn__o{ transform: scale(.97); }
.dfm-btn__o{
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: var(--dfm-radius-circle);
  border: var(--dfm-line-w) solid var(--dfm-line-strong);
  color: var(--dfm-ink);
  transition: transform 120ms var(--dfm-ease), background-color var(--dfm-dur) var(--dfm-ease),
              border-color var(--dfm-dur) var(--dfm-ease);
}
/* The blanket normaliser above also blocks text-transform from INHERITING
   into a label span, so the two nested labels opt back in explicitly. */
.dfm-btn__t, .dfm-cta > span{
  text-transform: var(--dfm-caps-transform); letter-spacing: var(--dfm-caps-tracking);
}
.dfm-btn__o .dfm-i{ width: 18px; height: 18px; }
/* BACK rides with NEXT on the right; only the mobile CLOSE stays far left */
.dfm-btn--back{ margin-left: auto; }
.dfm-btn--next .dfm-btn__o{
  background: var(--dfm-accent); border-color: var(--dfm-accent); color: var(--dfm-icon-on-accent);
}
.dfm-btn--next:hover .dfm-btn__o{ background: var(--dfm-accent-hover); border-color: var(--dfm-accent-hover); }
/* Dim the disc, never the label. The button stays focusable and actionable —
   it announces why it cannot advance — so its text has to stay readable;
   fading the whole thing to .4 put it at 1.65:1. */
.dfm-btn[aria-disabled="true"] .dfm-btn__o{ opacity: .45; }
.dfm-btn--back[hidden] + .dfm-btn--next{ margin-left: auto; }
.dfm-btn--close{ display: inline-flex; }           /* mobile only */
.dfm-btn--back{ min-width: 44px; }                 /* the label alone measures 38 */
.dfm-btn--back .dfm-btn__o{ display: none; }       /* the circle is removed on mobile */
@container dfm (min-width: 520px){
  .dfm-btn--close{ display: none; }
  .dfm-btn--back .dfm-btn__o{ display: grid; }
}
/* The close affordance switches on the VIEWPORT, not the container, because the
   thing it depends on is whether the panel is a full-bleed sheet — and that is a
   @media decision (§17). Keyed to the container, 520-699px wide got the overlay
   X positioned outside a sheet that fills the screen, and the footer CLOSE
   switched off: no way out of the modal at all. */
@media (max-width: 699px){ .dfm-btn--close{ display: inline-flex; } }
/* On a submit step the form draws its own CTA, so the footer NEXT would be a
   second, competing way to send the same lead. Drop it only where the form lays
   out as a row and that CTA is guaranteed on screen — stacked, the CTA falls
   below the fold and the footer button is the only visible way to submit. */
@container dfm (min-width: 768px){
  .dfm-panel[data-submit] .dfm-btn--next{ display: none; }
}

/* ===================== 16. CLOSE X ====================================== */
.dfm-x{
  position: absolute; left: 100%; top: -17px;
  display: none; place-items: center;
  width: 44px; height: 44px; margin-left: -13px;
  color: var(--dfm-on-scrim);
  transition: opacity var(--dfm-dur) var(--dfm-ease);
}
.dfm-x .dfm-i{ width: 18px; height: 18px; }
.dfm-x:hover{ opacity: .7; }
@container dfm (min-width: 520px){ .dfm-x{ display: grid; } }

/* ===================== 17. FULL-BLEED MOBILE SHEET ====================== */
@media (max-width: 1175px){
  .dfm-frame{ width: min(644px, 100% - 48px); height: min(var(--dfm-max-h), 100% - 48px); }
}
@media (max-width: 699px){
  .dfm-frame{
    width: 100%; height: 100%;
    border-radius: 0; box-shadow: none;
  }
  .dfm-panel{ border-radius: 0; }
  /* The overlay X sits OUTSIDE the panel corner. On a full-bleed sheet that is
     off-screen, so the footer CLOSE label takes over — see §15. */
  .dfm-x{ display: none; }
  .dfm-terms{ font-size: 10px; line-height: 2; }   /* the Figma mobile size */
}

/* A short viewport — a phone in landscape, a half-height window — squeezes the
   auto rows until the 1fr step row computes to 0 and the visitor sees no options
   at all. The agent block is the one thing here that is continuity rather than
   function, so it is what goes. */
@container dfm (max-height: 440px){
  .dfm-agent__bubble{ display: none; }
  .dfm-q{ padding-top: 16px; }
}
@container dfm (max-height: 360px){
  .dfm-agent{ display: none; }
  .dfm-kick{ padding-block: 12px; }
}
.dfm-scroll{ min-height: 64px; }

/* ===================== 18. ENVIRONMENT ================================== */
@media (prefers-reduced-motion: reduce){
  .dfm-root, .dfm-root *{
    --dfm-dur: 1ms; --dfm-dur-step: 1ms; --dfm-shift: 0px;
    animation-duration: 1ms !important; transition-duration: 1ms !important;
  }
}
@media print{ .dfm-root{ display: none !important; } }

/* box-shadows disappear in forced-colors mode, and the shadow IS the
   selected state — restore it with something the mode keeps. */
@media (forced-colors: active){
  .dfm-card__scrim{ background: none; }
  .dfm-card__title, .dfm-card__sub{ background: Canvas; color: CanvasText; }
  .dfm-card:has(.dfm-in:checked), .dfm-card[data-on],
  .dfm-opt:has(.dfm-in:checked), .dfm-opt[data-on]{ outline: 3px solid Highlight; outline-offset: -3px; }
  .dfm-meter__fill, .dfm-btn--next .dfm-btn__o{ forced-color-adjust: none; background: Highlight; }
  /* The tick is normally hidden by `color: transparent`, and forced-colors
     overrides colour — so every option came out already ticked. Hide the glyph
     itself, and reveal it only where the input is actually checked. */
  .dfm-card__disc .dfm-i, .dfm-opt__mark .dfm-i{ visibility: hidden; }
  .dfm-card:has(.dfm-in:checked) .dfm-i, .dfm-card[data-on] .dfm-i,
  .dfm-opt:has(.dfm-in:checked) .dfm-i, .dfm-opt[data-on] .dfm-i{ visibility: visible; }
}