/* ============================================================================
   NIMMERSATT — Insurance funnel (Markel Pro Media, Berufshaftpflicht)
   A quote/apply chat inside "Auf die Liste", in both page languages.
   Reuses the flat liquid-glass frame of the chat / lead blocks: one accent
   (black), no colour, no gradients, no drop shadow — only glass edge lights.
   ========================================================================== */

.funnel {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  max-width: 680px;
  border-radius: 22px;
  isolation: isolate;
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  overflow: hidden;
}

/* Header — same avatar chip + title/sub as the lead block */
.funnel__head {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.9rem 1.05rem;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 7%, transparent);
  background: color-mix(in srgb, var(--bg) 40%, transparent);
}
.funnel__mark {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--bg); background: var(--fg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 6px rgba(5, 5, 5, 0.22);
}
.funnel__mark svg { display: block; width: 19px; height: 19px; }
.funnel__headtext { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.funnel__title { font-size: 0.82rem; font-weight: 700; color: var(--fg); line-height: 1.1; }
.funnel__sub { font-size: var(--text-label); letter-spacing: 0.02em; color: var(--muted); }

/* Step progress — three dotted labels */
.funnel__steps {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem clamp(1rem, 2.4vw, 1.4rem);
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 7%, transparent);
}
.funnel__step {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--text-label); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.funnel__step-num {
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0;
  border: 1px solid color-mix(in srgb, var(--fg) 22%, transparent);
  color: var(--muted); background: transparent;
  transition: background var(--dur-ui) var(--ease-spring), color var(--dur-ui) var(--ease-spring), border-color var(--dur-ui) var(--ease-spring);
}
.funnel__step-line { flex: 1 1 auto; height: 1px; background: color-mix(in srgb, var(--fg) 12%, transparent); min-width: 8px; }
.funnel__step-label { display: none; }
@media (min-width: 520px) { .funnel__step-label { display: inline; } }
.funnel__step.is-active { color: var(--fg); }
.funnel__step.is-active .funnel__step-num { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.funnel__step.is-done .funnel__step-num { background: color-mix(in srgb, var(--fg) 16%, transparent); color: var(--fg); border-color: transparent; }

.funnel__body { padding: clamp(1rem, 2.4vw, 1.4rem); display: flex; flex-direction: column; gap: 1.1rem; }

/* A wizard panel — only the active one is shown */
.funnel__panel { display: none; flex-direction: column; gap: 1.05rem; }
.funnel__panel.is-active { display: flex; animation: funnelIn 0.32s var(--ease-out-expo) both; }
@keyframes funnelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.funnel__q { display: flex; flex-direction: column; gap: 0.5rem; }
.funnel__q-title { font-size: 0.9rem; font-weight: 700; color: var(--fg); line-height: 1.35; }
.funnel__q-help { font-size: 0.78rem; line-height: 1.5; color: var(--muted); margin-top: -0.15rem; }

.funnel__label {
  font-size: var(--text-label); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); padding-inline: 0.15rem;
}

/* Option cards — radio buttons rendered as selectable rows */
.funnel__opts { display: grid; gap: 0.5rem; }
.funnel__opts--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .funnel__opts--2 { grid-template-columns: 1fr; } }
.funnel__opt { position: relative; }
.funnel__opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.funnel__opt span {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.7rem 0.9rem; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  font-size: 0.9rem; font-weight: 600; color: var(--fg); line-height: 1.35;
  transition: border-color var(--dur-ui) var(--ease-spring), background var(--dur-ui) var(--ease-spring);
}
.funnel__opt small { font-size: 0.74rem; font-weight: 500; color: var(--muted); }
.funnel__opt input:hover + span { border-color: color-mix(in srgb, var(--fg) 26%, transparent); }
.funnel__opt input:checked + span {
  border-color: var(--fg);
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  box-shadow: inset 0 0 0 1px var(--fg);
}
.funnel__opt input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 12%, transparent); }

/* Inputs / selects / textareas — pill inputs like the lead block */
.funnel__field { display: flex; flex-direction: column; gap: 0.32rem; }
.funnel__row { display: flex; gap: 0.6rem; }
.funnel__row > .funnel__field { flex: 1; min-width: 0; }
@media (max-width: 520px) { .funnel__row { flex-direction: column; } }
.funnel__input, .funnel__select {
  appearance: none; width: 100%;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  border-radius: 999px; padding: 0.72rem 1.05rem;
  font: inherit; font-size: 0.92rem; font-weight: 500;
  transition: border-color var(--dur-ui) var(--ease-spring), box-shadow var(--dur-ui) var(--ease-spring);
}
.funnel__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050505' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 16px;
  padding-right: 2.6rem; cursor: pointer;
}
.funnel__textarea {
  appearance: none; width: 100%; resize: vertical; min-height: 84px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  border-radius: 16px; padding: 0.7rem 0.95rem;
  font: inherit; font-size: 0.9rem; font-weight: 500; line-height: 1.55;
  transition: border-color var(--dur-ui) var(--ease-spring), box-shadow var(--dur-ui) var(--ease-spring);
}
.funnel__input::placeholder, .funnel__textarea::placeholder { color: color-mix(in srgb, var(--fg) 42%, transparent); }
.funnel__input:focus, .funnel__select:focus, .funnel__textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--fg) 32%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 8%, transparent);
}

/* Modules — checkbox chips (explicit indicator; native input hidden but covers
   the whole card for the click target) */
.funnel__modules { display: grid; gap: 0.5rem; }
.funnel__module { position: relative; display: block; }
.funnel__module input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  appearance: none; -webkit-appearance: none; margin: 0; opacity: 0; cursor: pointer;
}
.funnel__module-card {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.7rem 0.9rem; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  transition: border-color var(--dur-ui) var(--ease-spring), background var(--dur-ui) var(--ease-spring);
}
.funnel__module-check {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--fg) 30%, transparent);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  transition: background var(--dur-ui) var(--ease-spring), border-color var(--dur-ui) var(--ease-spring);
}
.funnel__module-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.funnel__module-name { font-size: 0.88rem; font-weight: 600; color: var(--fg); line-height: 1.35; }
.funnel__module-desc { font-size: 0.74rem; font-weight: 500; color: var(--muted); line-height: 1.5; }
.funnel__module-price { flex: 0 0 auto; font-size: 0.76rem; font-weight: 600; color: var(--muted); white-space: nowrap; margin-top: 1px; }
.funnel__module input:checked + .funnel__module-card { border-color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.funnel__module input:checked + .funnel__module-card .funnel__module-check {
  background: var(--fg); border-color: var(--fg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 13px;
}
.funnel__module input:focus-visible + .funnel__module-card { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 12%, transparent); }

/* Conditional detail block (revealed on "Ja") */
.funnel__detail { display: none; flex-direction: column; gap: 0.5rem; padding-left: 0.15rem; }
.funnel__detail.is-open { display: flex; }

/* Live estimate panel */
.funnel__result {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0.95rem 1.05rem; border-radius: 16px;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
}
.funnel__result-tag {
  font-size: var(--text-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.funnel__price { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.funnel__price-main { font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 700; color: var(--fg); letter-spacing: -0.01em; line-height: 1; }
.funnel__price-per { font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.funnel__price-alt { font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.funnel__price--empty .funnel__price-main { font-size: 1rem; font-weight: 600; color: var(--muted); }
.funnel__result-basis { font-size: 0.74rem; line-height: 1.5; color: var(--muted); }

/* Note / disclaimer */
.funnel__note-box {
  margin: 0; font-size: 0.72rem; line-height: 1.55; color: var(--muted);
  padding: 0.7rem 0.85rem; border-radius: 12px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 6%, transparent);
}

/* Consent checkboxes */
.funnel__consents { display: flex; flex-direction: column; gap: 0.55rem; }
.funnel__consent { display: grid; grid-template-columns: 20px 1fr; gap: 0.6rem; align-items: start; cursor: pointer; }
.funnel__consent input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.funnel__consent-box {
  width: 18px; height: 18px; margin-top: 2px; border-radius: 6px; flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--fg) 30%, transparent);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  transition: background var(--dur-ui) var(--ease-spring), border-color var(--dur-ui) var(--ease-spring);
}
.funnel__consent input:checked + .funnel__consent-box {
  background: var(--fg); border-color: var(--fg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 13px;
}
.funnel__consent input:focus-visible + .funnel__consent-box { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 12%, transparent); }
.funnel__consent-text { font-size: 0.78rem; line-height: 1.5; color: var(--fg); }

/* Review summary on the final step */
.funnel__review {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 0.9rem 1.05rem; border-radius: 16px;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
}
.funnel__review-row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8rem; }
.funnel__review-row dt { color: var(--muted); }
.funnel__review-row dd { color: var(--fg); font-weight: 600; text-align: right; margin: 0; }

/* Nav — back / next / submit */
.funnel__nav { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.funnel__btn {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.72rem 1.3rem; border-radius: 999px;
  font: inherit; font-weight: 600; font-size: 0.92rem;
  transition: transform var(--dur-ui) var(--ease-spring), opacity var(--dur-ui) var(--ease-spring), border-color var(--dur-ui) var(--ease-spring), color var(--dur-ui) var(--ease-spring);
}
.funnel__btn--primary {
  background: var(--fg); color: var(--bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 12px -4px rgba(5, 5, 5, 0.5);
}
.funnel__btn--primary:hover { transform: translateY(-1px); }
.funnel__btn--primary:active { transform: translateY(0) scale(0.98); }
.funnel__btn--ghost {
  background: transparent; color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
}
.funnel__btn--ghost:hover { color: var(--fg); border-color: var(--fg); }
.funnel__btn[disabled] { opacity: 0.5; cursor: default; transform: none; }
.funnel__nav-spacer { flex: 1 1 auto; }

.funnel__note { margin: 0; font-size: 0.82rem; color: var(--muted); min-height: 1em; }
.funnel__note--error { color: var(--fg); }

/* Done state */
.funnel__done { display: none; flex-direction: column; gap: 0.5rem; }
.funnel.is-sent .funnel__steps,
.funnel.is-sent .funnel__body > *:not(.funnel__done) { display: none; }
.funnel.is-sent .funnel__done { display: flex; }
.funnel__done strong { font-weight: 700; font-size: 0.95rem; color: var(--fg); }
.funnel__done p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--fg); }
.funnel__done-ref { font-size: 0.78rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .funnel__panel.is-active { animation: none; }
  .funnel__btn--primary:hover { transform: none; }
}

/* ============================================================================
   Chat-funnel controls. The shell reuses .chat / .chat__* (pitch.css); these
   are the in-conversation controls the bot renders: choice chips, module
   checklist, the Haftpflicht document card, the live price + review bubbles
   and the consents. One accent (black), no colour, no gradients.
   ========================================================================== */

/* Hidden text-input row (shown only during free-text prompts) — .chat__form
   sets display:flex, which beats the [hidden] UA style, so force it. */
.ifunnel__form[hidden] { display: none; }
.ifunnel__window { gap: 0.7rem; }
/* This chat sits in a card inside the shell, so it is a good deal narrower
   than the contract chat — and since 2026-08-23 its bot lines are whole facts,
   not one-line questions. Give them the width instead of letting long German
   compounds break mid-syllable. */
.ifunnel__window .chat__msg { max-width: 96%; }
@media (max-width: 520px) {
  .ifunnel__window .chat__msg p { font-size: 0.88rem; }
}

/* A removable block of controls pinned under the latest message. */
.ictrl { display: flex; flex-direction: column; gap: 0.55rem; align-self: stretch; }

/* Choice chips */
.ichips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ichip {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.86rem; font-weight: 600;
  color: var(--fg); background: color-mix(in srgb, var(--bg) 66%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 16%, transparent);
  border-radius: 999px; padding: 0.5rem 0.95rem; line-height: 1.2;
  transition: border-color var(--dur-ui) var(--ease-spring),
              background var(--dur-ui) var(--ease-spring),
              transform var(--dur-ui) var(--ease-spring);
}
.ichip:hover { border-color: var(--fg); }
.ichip:active { transform: scale(0.97); }
.ichip--primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
/* An info topic the visitor has already read: still tappable, no longer loud. */
.ichip.is-done { color: var(--muted); border-color: color-mix(in srgb, var(--fg) 9%, transparent); }
.ichip.is-done:hover { color: var(--fg); border-color: var(--fg); }
.ichip--primary:hover { transform: translateY(-1px); }
.ichip--ghost { background: transparent; color: var(--muted); }
.ichip--ghost:hover { color: var(--fg); border-color: var(--fg); }
/* The short door: leave name and mail instead of answering the funnel. Louder
   than a topic chip, quieter than the primary action. The palette is
   monochrome, so that difference is border weight, not hue. */
.ichip--signup { background: var(--bg); border-color: color-mix(in srgb, var(--fg) 52%, transparent); }
.ichip--signup:hover { border-color: var(--fg); }
/* The mailto fallback is an <a>, not a <button>: give it the chip box model. */
a.ichip { text-decoration: none; display: inline-block; }
.ichip[disabled] { opacity: 0.5; cursor: default; transform: none; }
.ichip:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 14%, transparent); }

/* Module checklist (multi-select) */
.imods { display: grid; gap: 0.4rem; }
.imod {
  position: relative; display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.6rem 0.8rem; border-radius: 14px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  transition: border-color var(--dur-ui) var(--ease-spring), background var(--dur-ui) var(--ease-spring);
}
.imod input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.imod__check {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--fg) 30%, transparent);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  transition: background var(--dur-ui) var(--ease-spring), border-color var(--dur-ui) var(--ease-spring);
}
.imod.is-on { border-color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.imod.is-on .imod__check {
  background: var(--fg); border-color: var(--fg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 13px;
}
.imod__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.imod__name { font-size: 0.86rem; font-weight: 600; color: var(--fg); line-height: 1.3; }
.imod__desc { font-size: 0.73rem; color: var(--muted); line-height: 1.45; }
.imod__price { flex: 0 0 auto; font-size: 0.73rem; font-weight: 600; color: var(--muted); white-space: nowrap; margin-top: 1px; }
.imod:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 12%, transparent); }

/* Haftpflicht document card, in-conversation */
.idoc {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem 0.8rem; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent);
  background: color-mix(in srgb, var(--bg) 62%, transparent);
}
.idoc__icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 9px;
  display: grid; place-items: center; font-family: var(--font-mono);
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--bg); background: var(--fg);
}
.idoc__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.12rem; }
.idoc__title { font-size: 0.86rem; font-weight: 600; color: var(--fg); line-height: 1.3; }
.idoc__meta { font-size: var(--text-label); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.idoc__actions { flex: 0 0 auto; display: flex; gap: 0.35rem; }
.idoc__btn {
  font-size: 0.76rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  padding: 0.42rem 0.75rem; border-radius: 999px;
  background: var(--fg); color: var(--bg); border: 1px solid var(--fg);
  transition: transform var(--dur-ui) var(--ease-spring);
}
.idoc__btn:active { transform: scale(0.97); }
.idoc__btn--ghost { background: transparent; color: var(--muted); border-color: color-mix(in srgb, var(--fg) 16%, transparent); }
.idoc__btn--ghost:hover { color: var(--fg); border-color: var(--fg); }
@media (max-width: 440px) {
  .idoc { flex-wrap: wrap; }
  .idoc__actions { width: 100%; }
  .idoc__btn { flex: 1 1 auto; text-align: center; }
}

/* Live price + review bubbles */
.iprice, .ireview {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 0.85rem 1rem; border-radius: 16px;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
}
.iprice__tag { font-size: var(--text-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.iprice__main { font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 700; color: var(--fg); line-height: 1; letter-spacing: -0.01em; }
.iprice__per { font-size: 0.82rem; font-weight: 600; color: var(--muted); }
/* Two instalment figures: they wrap as whole units on a narrow phone. */
.iprice__alt { display: flex; flex-wrap: wrap; column-gap: 0.9rem; row-gap: 0.15rem; font-size: 0.82rem; font-weight: 600; line-height: 1.45; color: var(--muted); }
.iprice__alt span { white-space: nowrap; }
.iprice__basis { font-size: 0.72rem; line-height: 1.5; color: var(--muted); margin-top: 0.15rem; }
.ireview dl { margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.ireview__row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.82rem; }
.ireview__row dt { color: var(--muted); }
.ireview__row dd { color: var(--fg); font-weight: 600; text-align: right; margin: 0; }

/* Consents (reuses .funnel__consent* checkbox visuals above) */
.iconsents { display: flex; flex-direction: column; gap: 0.55rem; }

/* Inline validation / send error */
.ichat__err { margin: 0.1rem 0 0; font-size: 0.8rem; color: var(--fg); font-weight: 600; }

/* The funnel fills the card on its own since the sign-up form above it was
   removed (2026-08-23): eyebrow, heading, the Germany hint, one intro line,
   then the chat. No dropdown — the chat answers the whole product itself
   (topics() in js/funnel.js). The hairline and the grey tint that separated it
   from the form are gone with the form; as the only child they would have put
   a stray line across the top of the card. */
.ifunnel-slot {
  margin-top: 0;
  padding: clamp(1rem, 2.4vw, 1.4rem);
}
.ifunnel-slot__eyebrow {
  margin: 0 0 0.45rem;
  font-size: var(--text-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Was the <summary> row of the dropdown; now a plain heading, same mono face.
   One long unbreakable word: the size follows the viewport down instead of
   holding a floor, or it runs out of the card on small phones. Without the
   chevron next to it there is more room than the old summary row had. */
.ifunnel-slot__title {
  margin: 0.15rem 0 0.35rem;
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 4vw, 1.55rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--fg);
}
.ifunnel-slot__hint {
  margin: 0 0 0.7rem;
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.ifunnel-slot__lead {
  margin: 0;
  font-size: 0.9rem;
  line-height: var(--lh-read);
  color: var(--muted);
}
/* Glass inside glass turns to mud: the chat keeps its frame but drops the
   blur once it sits in the card. */
.ifunnel-slot .ifunnel.chat {
  margin-top: clamp(1rem, 2.4vw, 1.4rem);
  max-width: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}

/* ============================================================================
   The one-time Germany note. There is no dropdown around the chat any more:
   js/funnel.js raises this on the first tap inside the conversation, because
   Markel Pro Media can only be quoted for a German billing address.
   ========================================================================== */
/* The note itself — same glass panel language as the chat frame. */
.inote {
  width: min(30rem, calc(100vw - 2 * var(--pad-edge)));
  /* The global reset zeroes every margin, which also kills the UA's
     `margin: auto` on an open modal dialog — without this it sticks to the
     top-left corner instead of centring. */
  inset: 0;
  margin: auto;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
  color: var(--fg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 30px 60px -40px rgba(5, 5, 5, 0.5);
}
.inote::backdrop { background: color-mix(in srgb, var(--fg) 42%, transparent); }
/* Browsers without <dialog>: js/funnel.js adds this class and centres it. */
.inote--fallback {
  position: fixed; z-index: 60;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: block;
}
.inote__inner {
  display: flex; flex-direction: column; gap: 0.7rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.inote__eyebrow {
  margin: 0;
  font-size: var(--text-label); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
}
.inote__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.25;
  text-transform: uppercase;
}
.inote__text { margin: 0; font-size: 0.86rem; line-height: var(--lh-read); color: var(--muted); }
.inote__ok {
  align-self: flex-start;
  margin-top: 0.35rem;
  appearance: none; cursor: pointer; font: inherit;
  font-size: 0.86rem; font-weight: 600;
  min-height: 44px; padding: 0.6rem 1.3rem; border-radius: 999px;
  background: var(--fg); color: var(--bg); border: 1px solid var(--fg);
  transition: transform var(--dur-ui) var(--ease-spring);
}
.inote__ok:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .inote__ok:active { transform: none; }
}

/* ---------------------------------------------------------------------------
   Phones: the chips ARE the interface in this chat, so they get the same 44px
   floor as every other tap target on the page (see the mobile block in
   pitch.css). At 0.5rem of padding they were 35px, and the two document
   buttons 36px.
   ------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .ichip,
  .idoc__btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}