/* ═══════════════════════════════════════════════
   EXACT FIGMA COLOR VALUES
═══════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  /* ── Figma exact colors ─────────────────────────────
     Background gradient: rgb(31,37,38) → rgb(62,78,85)
     Surface/card:        rgb(64,81,90)
     Lighter surface:     rgb(52,66,74)
     Input field bg:      rgb(242,242,242) — but we use a dark tint
     CTA button:          rgb(242,96,71)   — coral/orange-red
     Text:                #FFFFFF
     Text muted:          rgba(255,255,255,0.65)
     Text faint:          rgba(255,255,255,0.35)
     Border:              rgba(255,255,255,0.10)
     Border strong:       rgba(255,255,255,0.18)
  ──────────────────────────────────────────────────── */
  --bg: #1f2526;
  --bg-warm: #253136;
  --bg-gradient-start: #1f2526;
  --bg-gradient-end: #3e4e55;
  --surface: #405159;
  --surface-elev: #344249;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text: #ffffff;
  --text-mid: rgba(255, 255, 255, 0.8);
  --text-muted: rgba(255, 255, 255, 0.55);
  --text-faint: rgba(255, 255, 255, 0.3);
  --lincoln-coral: #f26047;
  --lincoln-coral-dark: #d94f38;
  --champagne: #f26047;
  --champagne-soft: rgba(242, 96, 71, 0.12);
  --success: #5dc48a;
  /* Alias, not a second red: error text and invalid borders resolve to the
     same coral, so there is one value to change. */
  --danger: var(--lincoln-coral);
  --font-body: "Libre Franklin", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: "EB Garamond", "Georgia", serif;
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4),
    0 1px 4px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.3);
  --btn-height: 36px;
}
html,
body {
  height: 100%;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(
      to top,
      rgba(31, 37, 38, 1) 0%,
      rgba(31, 37, 38, 0.85) 12%,
      rgba(31, 37, 38, 0) 28%
    ),
    linear-gradient(
      160deg,
      var(--bg-gradient-start) 0%,
      var(--bg-gradient-end) 85%
    );
  background-attachment: fixed;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════
   MAIN CONTAINER
═══════════════════════════════════════════════ */
.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  min-height: 0;
}
.chat-container {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 clamp(12px, 3vw, 48px);
  scroll-behavior: smooth;
  min-height: 0;
  /* Blink anchors the scroll position to a visible element and then holds it,
     which cancels the scrollToBottom() after each answer — the view stops
     hundreds of px short and the newest question stays in the bottom wash.
     WebKit never implemented overflow-anchor, which is why Safari always
     followed the conversation and Chrome did not. This chat only ever wants to
     follow the end, so anchoring has nothing useful to do here. */
  overflow-anchor: none;
}
.chat-container::-webkit-scrollbar {
  width: 4px;
}
.chat-container::-webkit-scrollbar-track {
  background: transparent;
}
.chat-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.chat-inner {
  width: 100%;
  max-width: none;
  /* Bottom padding must clear the .input-area gradient, whose washed band is
     33% of its height and grows with its content (skip bar, field help,
     wrapped footers). syncChatBottomClearance() keeps the variable in step;
     320px is the floor and the no-JS fallback. */
  padding: clamp(20px, 3vw, 40px) 0 var(--chat-bottom-clearance, 320px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ─── Single column, full width ─── */
@media (min-width: 960px) {
  .chat-inner {
    display: flex;
    flex-direction: column;
  }
}

/* ═══════════════════════════════════════════════
   INTRO HEADER
═══════════════════════════════════════════════ */
.intro-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(24px, 4vw, 48px) 0 clamp(20px, 3vw, 32px);
  gap: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: clamp(24px, 3vw, 40px);
}
.intro-logo {
  color: var(--text);
  margin-bottom: 8px;
}
.intro-logo img,
.intro-logo svg {
  width: clamp(120px, 14vw, 160px);
  height: auto;
  display: block;
  opacity: 0.92;
}
.intro-header h1 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.5vw, 42px);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #ffffff;
  line-height: 1.2;
  max-width: min(640px, 90vw);
}
.intro-header h1 .accent {
  color: #ffffff;
  font-style: italic;
  font-weight: 400;
}
.intro-sub {
  font-size: clamp(13px, 1.5vw, 15px);
  color: var(--text-muted);
  max-width: min(1440px, 90vw);
  line-height: 1.65;
  font-weight: 300;
  letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════════
   CHAT MESSAGES
═══════════════════════════════════════════════ */
.messages {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

#chatMessages {
  width: 100%;
  max-width: 1156px;
  margin-left: auto;
  margin-right: auto;
}

.msg {
  display: flex;
  animation: msgIn 0.35s var(--ease-spring) both;
  width: 100%;
}
.msg.ai {
  justify-content: flex-start;
}
.msg.user {
  justify-content: flex-end;
}

@keyframes msgIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .msg {
    animation: none;
  }
  .progress-strip-fill {
    transition: none;
  }
  .qr-chip,
  .offer-result-card {
    transition: none;
  }
  .stage-row,
  .search-patience {
    animation: none;
  }
}

.msg-bubble {
  max-width: min(80%, 640px);
  padding: clamp(10px, 2vw, 14px) clamp(12px, 2.5vw, 18px);
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.6;
  letter-spacing: 0.01em;
  font-weight: 300;
}
.msg.ai .msg-bubble {
  background: #405159;
  color: #ffffff;
  border-radius: 4px 18px 18px 18px;
  border: 1px solid #2c383e;
  max-width: min(80%, 640px);
  text-align: left;
  padding: clamp(10px, 2vw, 14px) clamp(12px, 2.5vw, 18px);
}
.msg.user .msg-bubble {
  background: #f2f2f2;
  color: #405159;
  border-radius: 18px 18px 4px 18px;
  border: none;
  box-shadow: var(--shadow-sm);
}
.msg-bubble strong {
  font-weight: 600;
  color: inherit;
}
.msg.ai .msg-bubble strong {
  color: #ffffff;
}
.msg.ai .msg-bubble a {
  color: var(--lincoln-coral);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.msg.ai .msg-bubble a strong {
  color: inherit;
  font-weight: 600;
}
.msg.ai .msg-bubble a:hover {
  color: #ffffff;
}
.msg-bubble .highlight {
  color: var(--lincoln-coral);
  font-weight: 600;
}

/* Typing indicator */
.typing-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 6px 0;
}
.typing-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
  animation: dot-bounce 1.2s ease-in-out infinite;
}
.typing-dots span:nth-child(2) {
  animation-delay: 0.15s;
}
.typing-dots span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes dot-bounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  40% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

/* Quick Reply Chips */
.quick-replies {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 4px;
  max-width: min(80%, 640px);
}
.addr-send-btn,
.qr-chip,
.multi-decline-btn,
.multi-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--btn-height);
  padding: 0 12px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.qr-chip {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-mid);
  transition: all 0.2s var(--ease-expo);
  white-space: normal;
  text-align: center;
  max-width: 100%;
}
.qr-chip:hover {
  background: var(--lincoln-coral);
  border-color: var(--lincoln-coral);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(242, 96, 71, 0.35);
}
.qr-chip:active {
  transform: scale(0.97);
}
.qr-chip.selected {
  background: var(--lincoln-coral);
  border-color: var(--lincoln-coral);
  color: #ffffff;
}
.qr-chip:disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ── Certification gate (shown before offers are revealed) ── */
.msg.ai .msg-bubble.cert-bubble {
  animation: msgIn 0.3s ease both;
}
.cert-lead {
  margin-bottom: 12px;
  font-weight: 400;
}
.cert-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  font-size: clamp(13px, 1.7vw, 14px);
  line-height: 1.55;
  color: var(--text-mid);
}
.cert-check input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--lincoln-coral);
  cursor: pointer;
}
.cert-check:has(input:checked) {
  border-color: var(--lincoln-coral);
  background: var(--champagne-soft);
  color: var(--text);
}
.cert-continue-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-height);
  margin-top: 12px;
  margin-left: auto;
  padding: 0 24px;
  border: none;
  border-radius: 4px;
  background: var(--lincoln-coral);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s var(--ease-expo);
}
.cert-continue-btn:hover:not(:disabled) {
  background: var(--lincoln-coral-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(242, 96, 71, 0.35);
}
.cert-continue-btn:active:not(:disabled) {
  transform: scale(0.97);
}
.cert-continue-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.history-locked .skip-inline-link,
.history-locked .multi-skip-link {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
  text-decoration: none;
}
.history-locked input:disabled,
.history-locked select:disabled,
.history-locked textarea:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.ready-prompt-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: min(80%, 640px);
  margin-top: 16px;
}
.affiliation-step {
  width: 100%;
  max-width: min(80%, 640px);
}
.affiliation-step .msg-bubble {
  max-width: 100%;
}
.affiliation-step .quick-replies.affiliation-picker {
  max-width: 100%;
  margin-top: 12px;
}
.affiliation-actions {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: 12px;
}

/* Privacy Card — styled to match .msg.ai .msg-bubble */
.privacy-card {
  background: #405159;
  border: 1px solid #2c383e;
  border-radius: 4px 18px 18px 18px;
  padding: clamp(10px, 2vw, 14px) clamp(12px, 2.5vw, 18px);
  margin-top: 4px;
  max-width: min(80%, 640px);
}
.privacy-card-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #fff;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.privacy-card-title img,
.privacy-card-title svg {
  width: 14px;
  height: 14px;
}
.privacy-point {
  font-size: clamp(14px, 1.8vw, 16px);
  color: #ffffff;
  line-height: 1.6;
  letter-spacing: 0.01em;
  padding: 4px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 300;
}
.privacy-check {
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
  flex-shrink: 0;
  margin-top: 2px;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.privacy-point strong {
  color: #ffffff;
  font-weight: 600;
}

.input-inner .field-help-message:not([hidden]) {
  margin-top: -10px;
  margin-bottom: 12px;
  max-width: 447px;
}
/* Stacked address inputs — Figma node 2664:932 (main-input, no button) */
.addr-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  max-width: 447px;
  margin-top: 16px;
}
.addr-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.msg-hint {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 8px;
}
/* ── Field messages ───────────────────────────────────────────────────────
   Every small line that sits beneath a field shares one size and rhythm:
   help text, validation errors, the character countdown, upload rejections
   and the bot-check failure. A new message surface joins these selector
   lists rather than restating the values — that is what keeps them from
   drifting apart the way 12px/13px/14px once did. */
.field-help-message,
.field-char-count,
.comp-offer-error,
.hcaptcha-error {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  margin: 0;
  padding: 0 4px;
  font-weight: 300;
}

/* Coral is the app's one error colour, so anything the customer has to act on
   reads the same whichever field raised it. Weight steps up to 400 so an error
   outranks the muted text it sits beside or replaces. */
.field-help-message.is-error,
.field-char-count.is-at-limit,
.comp-offer-error,
.hcaptcha-error {
  color: var(--lincoln-coral);
  font-weight: 400;
}

/* Non-error states of the same elements stay muted: informational help, and
   the countdown until the moment it runs out. */
.field-help-message.is-info,
.field-char-count {
  color: var(--text-muted);
}

/* Countdown sits at the right edge so it reads as a meter rather than a
   message — the left-aligned error line stays the thing that looks like one. */
.field-char-count {
  align-self: flex-end;
}
.comp-offer-error {
  margin: -4px 0 0;
}
.addr-field.is-invalid {
  border-color: var(--lincoln-coral);
}
.addr-field {
  width: 100%;
  background: #f2f2f2;
  border: 8px solid #1f2526;
  border-radius: 8px;
  padding: 12px;
  height: 58px;
  display: flex;
  align-items: center;
  transition: border-color 0.15s ease;
}
.addr-field input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 20px;
  color: #40515a;
}
.addr-field input::placeholder {
  color: #9c9c9c;
}
.comp-offer-field {
  height: auto;
  min-height: 58px;
}
.comp-offer-field input[type="file"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: #40515a;
  cursor: pointer;
}
.comp-offer-field input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  background: #40515a;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
}
.comp-offer-caption {
  font-size: 12px;
  color: var(--text-faint);
  font-weight: 300;
  letter-spacing: 0.01em;
  margin: -4px 0 0;
}
.retailer-finder-actions {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: min(80%, 640px);
  margin-top: 16px;
}
.addr-send-btn {
  gap: 8px;
  border: 1px solid transparent;
  background: #f26047;
  color: #ffffff;
  transition: background 0.15s ease;
  white-space: nowrap;
}
.addr-send-btn:hover {
  background: var(--lincoln-coral-dark);
}
.addr-send-btn:disabled {
  background: #9c9c9c;
  cursor: not-allowed;
  pointer-events: none;
}
.addr-send-btn img,
.addr-send-btn svg {
  display: block;
  flex-shrink: 0;
}
.multi-skip-link {
  margin-top: 4px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-faint);
  text-decoration: underline;
  cursor: pointer;
}
.multi-skip-link:hover {
  color: var(--text-muted);
}
.addr-actions {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  margin-top: 4px;
}
.addr-actions .addr-send-btn {
  margin-left: auto;
}
.multi-decline-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-mid);
  transition: all 0.2s var(--ease-expo);
  white-space: nowrap;
}
.multi-decline-btn:hover {
  background: var(--lincoln-coral);
  border-color: var(--lincoln-coral);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(242, 96, 71, 0.35);
}
.multi-decline-btn:active {
  transform: scale(0.97);
}
.multi-decline-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.multi-add-btn {
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-mid);
  transition: all 0.2s var(--ease-expo);
  white-space: nowrap;
}
.multi-add-btn:hover {
  background: var(--lincoln-coral);
  border-color: var(--lincoln-coral);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(242, 96, 71, 0.35);
}
.multi-add-btn:active {
  transform: scale(0.97);
}
.multi-add-btn .plus {
  font-size: 16px;
  line-height: 1;
}
.multi-add-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.skip-inline-link {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 10px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.15);
  text-underline-offset: 3px;
  font-weight: 300;
  letter-spacing: 0.01em;
}
.skip-inline-link:hover {
  color: var(--text-muted);
}

/* Offer Result Card */
/* Offer cards — 3-column row matching Figma node 2474:1384 */
.offer-cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  margin-top: 20px;
}
.offer-result-card {
  background: #f2f2f2;
  border-radius: 8px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.offer-result-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}
.orc-amount {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: #1f2526;
  line-height: 1.2;
  margin-bottom: 8px;
  font-style: normal;
  letter-spacing: 0;
}
.orc-title {
  font-size: 20px;
  font-weight: 400;
  color: #1f2526;
  margin-bottom: 8px;
  letter-spacing: 0;
  line-height: 1.3;
}
.orc-program {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #1f2526;
  opacity: 0.5;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.orc-reason {
  font-size: 16px;
  color: #1f2526;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
  opacity: 0.75;
}
.orc-notice {
  font-size: 16px;
  color: #1f2526;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: 0;
  margin-top: 8px;
}
.orc-footer {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.orc-terms-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start; /* always left-aligned, below the chip(s) */
  gap: 6px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  color: #1f2526;
  opacity: 0.55;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.orc-terms-link:hover {
  opacity: 0.85;
  color: var(--lincoln-coral);
}
/* Purchase-type pill — lower-right of the card, on the details-link row.
   Shape/text per Figma label frames (rounded pill, text/secondary #40515a);
   fill is a dark tint so it reads on the matching #f2f2f2 card surface. */
/* Pills sit together at the lower-right of the card; the group keeps them
   right-aligned (and wrapping together) beside the details link. */
.orc-pill-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}
.orc-type-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 32px;
  background: rgba(31, 37, 38, 0.08);
  color: #40515a;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
}
.orc-caret {
  flex: 0 0 auto;
  transition: transform 0.25s ease;
}
.offer-result-card.expanded .orc-caret {
  transform: rotate(180deg);
}
.orc-details {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.orc-details-inner {
  overflow: hidden;
  min-height: 0;
}
.offer-result-card.expanded .orc-details {
  grid-template-rows: 1fr;
}
.orc-detail-row {
  padding-top: 14px;
}
.orc-detail-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1f2526;
  opacity: 0.5;
  margin-bottom: 3px;
}
.orc-detail-text {
  font-size: 13px;
  color: #1f2526;
  line-height: 1.55;
  opacity: 0.75;
}
.orc-detail-text a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.orc-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1f2526;
  opacity: 0.45;
  margin-bottom: 10px;
}
.offer-cards-empty {
  width: 100%;
  margin-top: 12px;
  padding: 20px 24px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-strong);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-mid);
  font-weight: 300;
}
@media (max-width: 760px) {
  .offer-cards-row {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .offer-cards-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.verified-badge {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
}
.verified-badge-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--success);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.verified-badge-tag img,
.verified-badge-tag svg {
  width: 12px;
  height: 12px;
}
.verified-badge-text {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
  font-weight: 300;
}
.verified-badge-text p {
  margin: 0;
}
.verified-badge-text p + p {
  margin-top: 6px;
}
/* "How to Redeem" / "Combining Offers" section labels */
.verified-badge-text p.verified-badge-heading {
  margin-top: 12px;
  color: var(--text-mid);
  font-weight: 600;
}

/* Loading state for matching */
.result-spinner {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-faint);
  padding: 5px 0;
  font-weight: 300;
  letter-spacing: 0.01em;
}
.spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--lincoln-coral);
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Staged search progress — one line at a time while the live search runs.
   The stage in progress carries the brighter treatment; finished stages step
   back, so the eye lands on what the search is doing right now. */
.stage-row {
  animation: msgIn 0.3s ease both;
  color: var(--text-muted);
}
.result-spinner.is-done {
  color: var(--text-faint);
}
.stage-check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lincoln-coral);
  font-weight: 400;
  line-height: 1;
}
.search-patience {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-faint);
  font-weight: 300;
  letter-spacing: 0.01em;
  animation: msgIn 0.3s ease both;
}

.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.icon-send {
  width: 16px;
  height: 16px;
}
.icon-shield {
  width: 14px;
  height: 14px;
}
.icon-check {
  width: 12px;
  height: 12px;
}

/* ═══════════════════════════════════════════════
   INPUT BAR (PERSISTENT BOTTOM)
═══════════════════════════════════════════════ */
.input-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: clamp(556px, calc(40vw + 256px), 736px) 0 0;
  background: linear-gradient(
    to top,
    rgba(31, 37, 38, 1) 0%,
    rgba(31, 37, 38, 1) 13.2%,
    rgba(31, 37, 38, 0.92) 19.2%,
    rgba(31, 37, 38, 0) 33%
  );
  z-index: 9999;
  pointer-events: none;
}
.input-inner {
  width: 100%;
  max-width: none;
  padding: 0;
  pointer-events: all;
}
.skip-results-bar {
  display: none;
  width: 35%;
  margin: 0 0 10px auto;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 12px;
}
.skip-results-bar.visible {
  display: block;
}
.skip-results-bar:hover {
  border-color: var(--lincoln-coral);
  background: rgba(242, 96, 71, 0.08);
}
.skip-results-bar .skip-main {
  font-weight: 600;
  color: var(--lincoln-coral);
  letter-spacing: 0.04em;
  font-size: 11px;
  text-transform: uppercase;
}
.skip-results-bar .skip-sub {
  color: var(--text-faint);
  font-size: 11px;
  margin-top: 2px;
  font-weight: 300;
}

.composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 8px 8px 8px clamp(12px, 2vw, 20px);
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}
.composer:focus-within {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
}
.composer-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: clamp(14px, 1.8vw, 15px);
  line-height: 1.5;
  padding: clamp(8px, 1.2vw, 10px) 0;
  resize: none;
  max-height: 160px;
  min-height: 28px;
  font-weight: 300;
  min-width: 0;
}
.composer-input::placeholder {
  color: var(--text-faint);
}
.composer-send {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 8px;
  background: var(--lincoln-coral);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s var(--ease-expo);
  flex-shrink: 0;
}
.composer-send:hover:not(:disabled) {
  background: var(--lincoln-coral-dark);
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(242, 96, 71, 0.4);
}
.composer-send:disabled {
  opacity: 0.2;
  cursor: default;
  transform: none;
}
.composer-send svg {
  width: 18px;
  height: 18px;
}

.footer-terms-link {
  display: block;
  margin-top: 8px;
  font-size: clamp(10px, 1.2vw, 11px);
  color: var(--text-muted);
  font-weight: 300;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-terms-link:hover {
  color: var(--lincoln-coral);
}

.input-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-top: 8px;
  font-size: clamp(10px, 1.2vw, 11px);
  color: var(--text-faint);
  font-weight: 300;
  letter-spacing: 0.01em;
  text-align: left;
  flex-wrap: wrap;
}
.input-footer br {
  flex-basis: 100%;
  height: 0;
  content: "";
}
.input-footer .footer-divider {
  opacity: 0.3;
}
.input-footer .footer-brand {
  font-weight: 500;
  color: var(--text-muted);
}
.input-footer .footer-brand .accent {
  color: var(--lincoln-coral);
}

/* Support line — same type as .input-footer, but a plain block: that rule is a
   flex container, which would break the sentence and its link into separate
   flex items (and gets display: contents at the 480–599px grid breakpoint). */
.support-footer {
  margin-top: 8px;
  font-size: clamp(10px, 1.2vw, 11px);
  color: var(--text-faint);
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.6;
  text-align: left;
}
.support-link {
  color: var(--lincoln-coral);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.support-link:hover,
.support-link:focus-visible {
  color: var(--lincoln-coral-dark);
}

/* Progress indicator */
.progress-strip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  z-index: 300;
}
.progress-strip-fill {
  height: 100%;
  background: var(--lincoln-coral);
  width: 0%;
  transition: width 0.5s var(--ease-expo);
}

/* Footer disclaimer */
.legal-footer {
  text-align: left;
  font-size: clamp(9px, 1.2vw, 10px);
  color: var(--text-faint);
  padding: 4px 0 8px;
  letter-spacing: 0.04em;
  font-weight: 300;
  text-transform: uppercase;
  line-height: 1.6;
}

/* Prototype badge */
.proto-badge {
  display: none;
  position: fixed;
  bottom: 14px;
  left: 14px;
  z-index: 200;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(31, 37, 38, 0.92);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  border-radius: 8px;
  font-size: 10px;
  letter-spacing: 0.02em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
  max-width: clamp(200px, 30vw, 300px);
  box-shadow: var(--shadow-md);
}
.proto-badge-icon {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: var(--lincoln-coral);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #ffffff;
  flex-shrink: 0;
}
.proto-badge-title {
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.proto-badge-copy {
  color: var(--text-faint);
  font-size: 10px;
  line-height: 1.4;
  margin-top: 1px;
  font-weight: 300;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE SYSTEM — Mobile-first, 340px → 1440px
═══════════════════════════════════════════════ */

/* ── 340px–479px: Micro mobile ── */
@media (max-width: 479px) {
  .bc-nav {
    display: none;
  }
  .bc-controls {
    padding-right: 4px;
  }
  .bc-url-actions {
    display: none;
  }
  .bc-url-text {
    font-size: 11px;
  }

  .chat-container {
    padding: 0 12px;
  }
  .chat-inner {
    padding: 16px 0 var(--chat-bottom-clearance, 320px);
    gap: 20px;
  }

  .intro-header {
    padding: 20px 0 18px;
    gap: 8px;
  }
  .intro-logo img,
  .intro-logo svg {
    width: 110px;
  }
  .intro-header h1 {
    font-size: 22px;
  }
  .intro-sub {
    font-size: 14px;
  }

  .msg-bubble {
    font-size: 15px;
    max-width: 100%;
  }
  .msg.user .msg-bubble {
    max-width: 88%;
  }

  .qr-chip {
    padding: 0 12px;
  }

  .orc-amount {
    font-size: 26px;
  }
  .offer-result-card {
    padding: 14px 14px;
  }

  .input-inner {
    padding: 0 12px 6px;
  }
  .input-footer {
    font-size: 12px;
    gap: 4px;
  }
  .support-footer {
    font-size: 12px;
  }
  .input-footer .footer-divider {
    display: none;
  }

  .proto-badge {
    max-width: calc(100vw - 28px);
  }
  .proto-badge-copy {
    display: none;
  }

  .legal-footer {
    font-size: 11px;
    padding: 0 0 6px;
  }
}

/* ── 480px–599px: Large mobile ── */
@media (min-width: 480px) and (max-width: 599px) {
  .bc-nav {
    display: none;
  }
  .bc-url-actions {
    display: none;
  }

  .chat-container {
    padding: 0 16px;
  }
  .chat-inner {
    padding: 20px 0 var(--chat-bottom-clearance, 320px);
    gap: 22px;
  }

  .intro-header {
    padding: 24px 0 20px;
  }
  .intro-logo svg {
    width: 128px;
  }
  .intro-header h1 {
    font-size: 26px;
  }

  .msg.user .msg-bubble {
    max-width: 85%;
  }

  .input-inner {
    padding: 0 16px 6px;
  }
}

/* ── Mobile small-text readability boost (both phone ranges) ── */
@media (max-width: 599px) {
  .msg-bubble {
    font-size: 15px;
  }
  .privacy-card-title {
    font-size: 12px;
  }
  .privacy-point {
    font-size: 15px;
  }
  /* Mirrors the shared field-message selector list above — all of it steps up
     together, so an error never ends up a different size from the help text
     it replaced. */
  .field-help-message,
  .field-char-count,
  .comp-offer-error,
  .hcaptcha-error {
    font-size: 14px;
  }
  .msg-hint {
    font-size: 13px;
  }
  .comp-offer-caption {
    font-size: 14px;
  }
  .comp-offer-field input[type="file"]::file-selector-button {
    font-size: 14px;
  }
  .multi-skip-link,
  .skip-inline-link {
    font-size: 14px;
  }
  .result-spinner {
    font-size: 14px;
  }
  .orc-tag {
    font-size: 12px;
  }
  .orc-program {
    font-size: 13px;
  }
  .orc-terms-link {
    font-size: 13px;
  }
  .orc-type-pill {
    font-size: 13px;
    padding: 5px 14px;
  }
  .verified-badge-tag {
    font-size: 12px;
  }
  .verified-badge-text {
    font-size: 14px;
  }
  /* Bottom bar grid: Terms & Secured-by on the left, offers button on
     the right beside them; the disclaimer line drops below full-width */
  .input-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
  }
  .input-inner > * {
    grid-column: 1 / -1;
  }
  .input-inner .footer-terms-link {
    grid-column: 1;
    grid-row: 4;
    align-self: start;
    margin-top: 0;
  }
  .input-footer {
    display: contents;
  }
  /* .input-footer is display: contents above, so its children — not the
     wrapper — are the grid items, and each needs placing. These rules used to
     hang off a .footer-brand element that the markup no longer has, so the
     disclaimer span matched nothing, fell back to auto-placement in row 1, and
     rendered above the offers button on top of the conversation. Target the
     span itself and put it on row 6, just under the button (rows 4-5). */
  .input-footer > span {
    grid-column: 1 / -1;
    grid-row: 6;
    margin-top: 6px;
  }
  .input-inner .support-footer {
    grid-column: 1 / -1;
    grid-row: 7;
    margin-top: 6px;
  }
  .input-inner .legal-footer {
    grid-row: 8;
  }
  /* 15% smaller than the 9px/14px padding + 13px/12px type it had */
  .skip-results-bar {
    grid-column: 2;
    grid-row: 4 / 6;
    align-self: center;
    justify-self: end;
    width: fit-content;
    max-width: 60vw;
    margin: 0;
    padding: 8px 12px;
  }
  .skip-results-bar .skip-main {
    font-size: 11px;
  }
  .skip-results-bar .skip-sub {
    font-size: 10px;
  }
  .footer-terms-link {
    font-size: 12px;
  }
  .input-footer {
    font-size: 12px;
  }
  .support-footer {
    font-size: 12px;
  }
  .legal-footer {
    font-size: 11px;
  }
}

/* ── 600px–767px: Small tablet / large phone landscape ── */
@media (min-width: 600px) and (max-width: 767px) {
  .chat-container {
    padding: 0 20px;
  }
  .chat-inner {
    padding: 24px 0 var(--chat-bottom-clearance, 320px);
  }

  .intro-header h1 {
    font-size: 30px;
  }

  .input-inner {
    padding: 0 20px 8px;
  }
}

/* ── 768px–959px: Tablet ── */
@media (min-width: 768px) and (max-width: 959px) {
  .chat-container {
    padding: 0 28px;
  }
  .chat-inner {
    padding: 28px 0 var(--chat-bottom-clearance, 320px);
  }

  .intro-header h1 {
    font-size: 34px;
  }

  .input-inner {
    padding: 0 28px 8px;
  }
}

/* ── 960px–1199px: Small desktop — two-column activates ── */
@media (min-width: 960px) and (max-width: 1199px) {
  .chat-container {
    padding: 0 36px;
  }

  .input-inner {
    padding: 0 36px 8px;
  }
}

/* ── 1200px–1439px: Standard desktop ── */
@media (min-width: 1200px) and (max-width: 1439px) {
  .chat-container {
    padding: 0 48px;
  }

  .input-inner {
    padding: 0 48px 8px;
  }
}

/* ── 1440px+: Padding locks in, centering handled by margin auto ── */
@media (min-width: 1440px) {
  .chat-container {
    padding: 0 80px;
  }
  .chat-inner {
    padding: 40px 0 var(--chat-bottom-clearance, 320px);
  }
  .input-inner {
    padding: 0 80px 10px;
  }
}

.page-shell {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  position: relative;
}
sup {
  font-size: 0.5em;
  line-height: 0;
  vertical-align: super;
}

/* ═══════════════════════════════════════════════
   TERMS & CONDITIONS PAGE
═══════════════════════════════════════════════ */
.page-terms .chat-inner {
  padding-bottom: clamp(24px, 4vw, 56px);
}

#terms-conditions-content {
  background: #fff;
  color: #333;
  max-width: 820px;
  margin: 8px auto 0;
  padding: clamp(24px, 4vw, 56px);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
}
#terms-conditions-content h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: #1f2526;
  margin: 32px 0 12px;
}
#terms-conditions-content h2:first-child {
  margin-top: 0;
}
#terms-conditions-content p {
  margin: 0 0 16px;
}
#terms-conditions-content p:last-child {
  margin-bottom: 0;
}
#terms-conditions-content ul {
  margin: 0 0 16px;
  padding-left: 22px;
}
#terms-conditions-content li {
  margin: 0 0 10px;
}
#terms-conditions-content .tc-address {
  line-height: 1.5;
}

/* Ghost confirmation button — transparent with a subtle border */
.ghost-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
}
.ghost-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--text-faint);
  color: var(--text-mid);
  box-shadow: none;
  transform: none;
}

/* Honeypot bot filter — off-screen and inert for humans, visible in the DOM for bots */
.hp-wrap {
  position: absolute !important;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* hCaptcha gate shown when the honeypot is tripped */
.hcaptcha-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(31, 37, 38, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.hcaptcha-card {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 28px 32px;
  max-width: 400px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.hcaptcha-title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--text);
  margin-bottom: 8px;
}
.hcaptcha-copy {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 18px;
}
.hcaptcha-widget {
  display: flex;
  justify-content: center;
  min-height: 78px;
}
/* Size and colour come from the shared field-message rules above. */
.hcaptcha-error {
  margin-top: 12px;
}

/* ZIP picker — shown when multiple mailing addresses were entered */
.zip-pick {
  gap: 8px;
}
.zip-pick-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  color: var(--text-mid);
  transition: border-color 0.15s ease;
}
.zip-pick-item:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.zip-pick-item input {
  width: 16px;
  height: 16px;
  accent-color: var(--lincoln-coral);
  cursor: pointer;
}