/* ===== 2nd Opinion Auto Advisor - Styles ===== */

:root {
  /* Semantic theme colors (dark, default) */
  --bg-primary: #1a1a1a;
  --bg-secondary: #242424;
  --bg-tertiary: #2a2a2a;
  --text-primary: #f5f3ef;
  --text-secondary: #888888;
  --text-muted: #555555;
  --border-color: #2a2a2a;
  --border-light: #333333;
  --bubble-border: rgba(245, 243, 239, 0.55);

  /* 3D elevation / glow — dark theme. Layered shadows give surfaces a subtle
     lift off the page; *-hover variants intensify on interaction. */
  --elev-shadow: 0 2px 4px rgba(0, 0, 0, 0.45), 0 8px 20px rgba(0, 0, 0, 0.38);
  --elev-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.55), 0 14px 32px rgba(0, 0, 0, 0.45);
  --accent-glow: 0 1px 2px rgba(232, 101, 10, 0.25), 0 6px 14px rgba(232, 101, 10, 0.32), 0 14px 28px rgba(232, 101, 10, 0.20);
  --accent-glow-hover: 0 2px 4px rgba(232, 101, 10, 0.32), 0 10px 22px rgba(232, 101, 10, 0.42), 0 20px 38px rgba(232, 101, 10, 0.28);
  --pill-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.22);
  --card-bg: #242424;
  --nav-bg: #1a1a1a;
  --header-bg: #1a1a1a;
  --upgrade-banner-bg: #1a1a1a;
  --input-bg: #2a2a2a;
  --accent: #e8650a;
  --accent-light: #ff7a1a;
  --free-badge-bg: #2a2a2a;
  --free-badge-text: #888888;

  /* Legacy aliases — existing rules use these names. They resolve to the
     current theme's semantic colors, so swapping themes updates everything. */
  --charcoal: var(--bg-primary);
  --charcoal-light: var(--card-bg);
  --charcoal-lighter: var(--border-color);
  --orange: var(--accent);
  --orange-hover: var(--accent-light);
  --orange-dim: rgba(232, 101, 10, 0.15);
  --white: var(--text-primary);
  --white-dim: rgba(245, 243, 239, 0.6);
  --white-muted: rgba(245, 243, 239, 0.35);
  --green: #3cb371;
  --gold: #d4af37;
  --red: #e05555;
  --yellow: #f0b94a;
  --green-dim: rgba(60, 179, 113, 0.15);
  --yellow-dim: rgba(240, 185, 74, 0.15);
  --red-dim: rgba(224, 85, 85, 0.14);

  --nav-height: 70px;
  --header-height: 56px;
}

[data-theme="light"] {
  --bg-primary: #f7f5f2;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f0ece6;
  --text-primary: #1a1a1a;
  --text-secondary: #999999;
  --text-muted: #bbbbbb;
  --border-color: #e8e4de;
  --border-light: #ede9e3;
  --bubble-border: #000000;

  /* 3D elevation / glow — light theme overrides. Softer, lighter shadows
     suited to the cream/white surfaces. Accent glow stays the same orange. */
  --elev-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 8px 20px rgba(0, 0, 0, 0.08);
  --elev-shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.10), 0 14px 32px rgba(0, 0, 0, 0.12);
  --pill-shadow: 0 1px 2px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.08);
  --card-bg: #ffffff;
  --nav-bg: #ffffff;
  --header-bg: #ffffff;
  --upgrade-banner-bg: #fff5ee;
  --input-bg: #ffffff;
  --accent: #e8650a;
  --accent-light: #ff7a1a;
  --free-badge-bg: #f0ece6;
  --free-badge-text: #999999;

  /* Flip dim/muted text colors so overlays on light backgrounds stay legible */
  --white-dim: rgba(26, 26, 26, 0.65);
  --white-muted: rgba(26, 26, 26, 0.4);
}

/* Smooth theme transitions */
* {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ===== SETTINGS PANEL ===== */

.settings-panel {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease;
}

.settings-panel.hidden {
  display: none;
}

.settings-sheet {
  width: 100%;
  max-width: 480px;
  max-height: 90dvh;
  overflow-y: auto;
  background: var(--bg-secondary);
  border-top: 2px solid var(--border-color);
  border-radius: 16px 16px 0 0;
  padding: 0.5rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0));
  animation: settingsSlideUp 0.25s ease;
}

@keyframes settingsSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.settings-handle {
  width: 44px;
  height: 4px;
  background: var(--text-muted);
  border-radius: 999px;
  margin: 0.25rem auto 0.75rem;
  opacity: 0.6;
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.settings-header h3 {
  font-size: 1.05rem;
  color: var(--text-primary);
}

.settings-section {
  padding: 0.75rem 0;
  border-top: 2px solid var(--border-color);
}

/* SETTINGS MENU — bottom-sheet overlay that slides up from above the
   bottom-nav when the footer Settings button is tapped, and slides back
   down when the same button is tapped again (toggle behavior). The
   sheet's bottom edge sits flush with the top of the bottom-nav so the
   nav stays visible and the user can re-tap the Settings button to
   close. The backdrop captures taps anywhere outside the sheet. */
.settings-menu {
  /* position: absolute (anchored to #app which is position: relative)
     keeps the overlay constrained to the app's 480px max-width column
     instead of spanning the full browser viewport on desktop. */
  position: absolute;
  inset: 0;
  z-index: 49; /* below bottom-nav (z-index 50) so the nav stays tappable */
  pointer-events: none;
}
.settings-menu.hidden {
  display: none;
}
.settings-menu.open {
  pointer-events: auto;
}

.settings-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  transition: opacity 0.22s ease-out;
}
.settings-menu.open .settings-menu-backdrop {
  opacity: 1;
}

.settings-menu-sheet {
  position: absolute;
  left: 0;
  right: 0;
  /* Sit flush with the top of the bottom-nav so the nav (and its
     Settings button, used to toggle this menu) is always visible. */
  bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0));
  background: var(--charcoal);
  border-top: 2px solid var(--charcoal-lighter);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 24px -6px rgba(0, 0, 0, 0.35);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
}
.settings-menu.open .settings-menu-sheet {
  transform: translateY(0);
}

.settings-menu-header {
  position: relative;
  flex-shrink: 0;
  padding: 0.5rem 1rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-menu-handle {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 4px;
  border-radius: 2px;
  background: var(--text-secondary);
  opacity: 0.35;
}

.settings-menu-title {
  margin: 0.5rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.settings-menu-close {
  position: absolute;
  top: 50%;
  right: 0.65rem;
  transform: translateY(-50%);
  appearance: none;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
  border-radius: 999px;
}
.settings-menu-close:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.06); }

.settings-menu-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 1rem 1rem;
}

/* While the menu is open, mark the footer Settings button as "active"
   so the user has visual feedback that the toggle state is on. */
.bottom-nav .nav-btn.menu-open {
  color: var(--orange);
}
.bottom-nav .nav-btn.menu-open .nav-icon {
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.4));
}

.settings-section:first-of-type {
  border-top: none;
}

.settings-section-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: 0.65rem;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0;
}

.settings-row-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--text-primary);
  font-family: 'Sora', sans-serif;
}

.settings-row-value {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-family: 'Sora', sans-serif;
  text-align: right;
  word-break: break-word;
}

.settings-theme-icon {
  font-size: 1.1rem;
}

.settings-row-disabled .settings-row-label {
  color: var(--text-secondary);
}

.settings-coming-soon {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-left: 0.25rem;
}

/* Toggle switch */
.theme-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
}

.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-switch-track {
  position: absolute;
  inset: 0;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.theme-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--text-primary);
  border-radius: 50%;
  transition: transform 0.22s ease, background 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.theme-switch input:checked + .theme-switch-track {
  background: var(--accent);
  border-color: var(--accent);
}

.theme-switch input:checked + .theme-switch-track .theme-switch-knob {
  transform: translateX(20px);
  background: #ffffff;
}

.theme-switch.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Segmented (Units) */
.settings-seg {
  display: inline-flex;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  padding: 2px;
  gap: 2px;
}

.settings-seg-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.settings-seg-btn.active {
  background: var(--accent);
  color: #ffffff;
}

/* Link buttons */
.settings-link-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-primary);
  font-family: 'Sora', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.75rem 0;
  cursor: pointer;
  border-top: 2px solid var(--border-color);
}

.settings-section .settings-link-btn:first-child {
  border-top: none;
}

.settings-link-btn:hover {
  color: var(--accent);
}

.settings-link-btn.settings-danger {
  color: var(--red);
}

.settings-link-btn.settings-danger:hover {
  color: var(--red);
  opacity: 0.85;
}

/* v2.23.12 + v2.23.14 — RvR history list in Settings → Account.
   Card-style rows: vehicle + verdict + date in the main tap area,
   small × in the top-right for delete. Tapping the body opens the
   full result screen the user originally saw (App.openRrHistoryDetail).
   Reuses existing tokens; no new design variables. */
.acct-rr-history {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.25rem;
}
.acct-rr-card {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
}
[data-theme="light"] .acct-rr-card {
  background: rgba(0, 0, 0, 0.03);
}
.acct-rr-card-body {
  width: 100%;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0.75rem 2.4rem 0.75rem 0.9rem; /* right pad clears the delete X */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
}
.acct-rr-card-body:hover {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="light"] .acct-rr-card-body:hover {
  background: rgba(0, 0, 0, 0.04);
}
.acct-rr-card-body:active {
  transform: scale(0.998);
}
.acct-rr-card-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}
.acct-rr-vehicle {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
}
.acct-rr-verdict {
  font-size: 0.85rem;
  color: var(--accent, #e8650a);
  font-weight: 600;
  line-height: 1.3;
}
.acct-rr-card-date {
  font-size: 0.78rem;
  color: var(--text-secondary);
  flex-shrink: 0;
  white-space: nowrap;
}
.acct-rr-card-delete {
  position: absolute;
  top: 0.35rem;
  right: 0.4rem;
  width: 1.85rem;
  height: 1.85rem;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.acct-rr-card-delete:hover {
  opacity: 1;
  color: var(--red);
  background: rgba(224, 85, 85, 0.10);
}
.acct-rr-card-delete:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.settings-footer {
  padding-top: 0.75rem;
  text-align: center;
}

.settings-version {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.75rem;
  color: var(--text-muted);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--charcoal);
  color: var(--white);
  /* Viewport-locked layout: body fills exactly the visible viewport and
     never scrolls itself. Scrolling happens inside .screen-content. This
     guarantees the bottom nav stays put on every device, including iOS
     Safari where position:fixed + dynamic-toolbar viewport changes can
     glitch. */
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ===== TYPOGRAPHY ===== */

h1, h2, h3, h4 {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sub-text {
  font-family: 'Lora', serif;
  font-style: italic;
  color: var(--white-dim);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ===== LAYOUT ===== */

#app {
  max-width: 480px;
  margin: 0 auto;
  /* Fixed viewport height + flex column = bottom nav anchored to the
     bottom edge of the screen forever, regardless of content size. */
  height: 100dvh;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Lock the app to vertical-only panning. Without this, iOS Safari
     responds to horizontal swipes with rubber-band bounce or back-swipe
     navigation gestures that make the whole app feel like it slides
     left/right. `pinch-zoom` is preserved for accessibility. Children
     that genuinely need horizontal scroll (vehicle-switcher, log
     vehicle switcher) override this with `touch-action: pan-x`. */
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-x: none;
}

.screen {
  display: none;
  /* When active, the screen fills the remaining space inside #app
     (whatever's left after the bottom nav). min-height: 0 lets the
     screen-content's overflow-y: auto kick in instead of expanding the
     screen itself. */
  flex: 1;
  min-height: 0;
  overflow: hidden;
  flex-direction: column;
}

.screen.active {
  display: flex;
}

.screen.active.screen-anim-forward {
  animation: screen-slide-in-right 0.1s ease-out;
}

.screen.active.screen-anim-back {
  animation: screen-slide-in-left 0.1s ease-out;
}

@keyframes screen-slide-in-right {
  from { transform: translateX(100%); opacity: 0.85; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes screen-slide-in-left {
  from { transform: translateX(-100%); opacity: 0.85; }
  to { transform: translateX(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .screen.active.screen-anim-forward,
  .screen.active.screen-anim-back {
    animation: none;
  }
}

.screen-header {
  position: sticky;
  top: 0;
  z-index: 10;
  /* flex-shrink: 0 — never let the header collapse below its 56px height
     when the viewport is short (the .screen flex column will shrink children
     by default). */
  flex-shrink: 0;
  /* 3-column grid: left action (or empty), centered title, right action
     (or empty). Centers the h2 by giving it the auto-width middle column
     between two equal 1fr side columns — works whether the header has
     just a back button, a back + actions, or only a title. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  height: var(--header-height);
  padding: 0 0.5rem;
  background: var(--charcoal);
  border-bottom: 2px solid var(--charcoal-lighter);
}

.screen-header h2 {
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Cap the title's middle grid column so it can't grow into the
     absolutely-positioned .header-upgrade-pill on the right or the back
     button on the left. The reserved space (~2rem for back, ~7rem for
     pill) keeps long titles like "Trouble Code Database" ellipsizing
     instead of bleeding under the green pill. */
  max-width: calc(100% - 9rem);
  /* Explicit vertical centering so the title sits on the mid-line of
     the header on every screen, regardless of whether the row has a
     back button, header actions, or auto-injected pills around it. The
     parent .screen-header is display: grid; align-items: center, but
     belt-and-suspenders self-alignment + a fixed line-height keeps the
     baseline predictable across themes and browser default styles. */
  align-self: center;
  line-height: 1.2;
}

/* Anchor the back button to the left edge and any right-side actions /
   spacer to the right edge. Without these, grid items center inside their
   columns and the back button would float weirdly. */
.screen-header > .btn-back { justify-self: start; }
.screen-header > .header-actions,
.screen-header > .header-spacer,
.screen-header > .btn-icon { justify-self: end; }

/* Header upgrade pill — auto-injected into every .screen-header by
   ensureHeaderUpgradePills() in app.js. Solid brand green so it reads as
   an actionable CTA, not a status indicator. The parent .screen-header is
   position: sticky which establishes the containing block for this
   absolutely-positioned child. Self-hides via `.hidden` for users on a
   recurring (monthly / yearly) subscription — only free / 3-Day Trial /
   extension users see the pill. */
.header-upgrade-pill {
  position: absolute;
  top: 50%;
  right: 10px;
  /* translateY(-50%) vertically centers the pill in the sticky header
     regardless of header height. Hover / active states extend the same
     transform with a scale step so the centering doesn't get clobbered. */
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  padding: 0.42rem 0.9rem;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: 'Sora', sans-serif;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  z-index: 12;
  line-height: 1;
  box-shadow: 0 3px 7px rgba(60, 179, 113, 0.32);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.12s ease;
}
.header-upgrade-pill:hover {
  transform: translateY(-50%) scale(1.04);
  box-shadow: 0 5px 12px rgba(60, 179, 113, 0.42);
  filter: brightness(1.05);
}
.header-upgrade-pill:active {
  transform: translateY(-50%) scale(0.97);
  filter: brightness(0.95);
}
.header-upgrade-pill.hidden { display: none; }
/* Icon + label spans inside the pill. Both are inline-flex with
   align-items: center so each one's content sits on the visual midline
   of the pill regardless of font metrics. Crown emoji gets a tiny
   negative top offset to counteract emoji glyphs sitting slightly
   below the cap-height of surrounding all-caps text. */
.header-upgrade-pill-icon,
.header-upgrade-pill-label {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.header-upgrade-pill-icon {
  position: relative;
  top: -1px;
  font-size: 1.05em;
}

.screen-content {
  /* The actual scroll container. Bottom nav is now a sibling that lives
     below this in the flex layout, so we no longer need a giant
     padding-bottom to clear a fixed nav — the nav can't overlap because
     it's not overlapping anything. */
  flex: 1;
  min-height: 0;
  padding: 1rem;
  overflow-y: auto;
}

/* ===== BUTTONS ===== */

.btn-primary {
  background: var(--orange);
  color: var(--white);
  border: none;
  border-radius: 12px;
  padding: 0.875rem 1.5rem;
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.18s ease, box-shadow 0.18s ease;
  width: 100%;
  box-shadow: var(--accent-glow);
}

.btn-primary:hover {
  background: var(--orange-hover);
  transform: translateY(-1px);
  box-shadow: var(--accent-glow-hover);
}

.btn-primary:active {
  transform: scale(0.98);
  box-shadow: var(--accent-glow);
}

.btn-secondary {
  background: transparent;
  color: var(--orange);
  border: 2px solid var(--orange);
  border-radius: 12px;
  padding: 0.8rem 1.5rem;
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.18s ease, box-shadow 0.18s ease;
  width: 100%;
  box-shadow: var(--elev-shadow);
}

.btn-secondary:hover {
  background: var(--orange-dim);
  transform: translateY(-1px);
  box-shadow: var(--elev-shadow-hover);
}

.btn-secondary:active {
  transform: translateY(0);
  box-shadow: var(--elev-shadow);
}

.btn-accent {
  background: var(--orange);
  color: var(--white);
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-family: 'Sora', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: var(--accent-glow);
}

.btn-accent:hover {
  background: var(--orange-hover);
  transform: translateY(-1px);
  box-shadow: var(--accent-glow-hover);
}

.btn-accent:active {
  transform: translateY(0);
  box-shadow: var(--accent-glow);
}

.btn-accent:hover {
  background: var(--orange-hover);
}

.btn-small {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

.btn-large {
  padding: 1rem;
  font-size: 1.05rem;
}

.btn-back {
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  line-height: 1;
}

.btn-icon {
  background: none;
  border: none;
  color: var(--orange);
  font-size: 1.8rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  font-weight: 300;
  line-height: 1;
}

.btn-text {
  background: none;
  border: none;
  color: var(--orange);
  font-family: 'Sora', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

.btn-close {
  background: none;
  border: none;
  color: var(--white-dim);
  font-size: 2.1rem;
  font-weight: 300;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.btn-danger {
  background: none;
  border: none;
  color: var(--red);
  font-family: 'Sora', sans-serif;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  opacity: 0.7;
}

.btn-danger:hover {
  opacity: 1;
}

.header-spacer {
  width: 40px;
}

/* ===== ONBOARDING ===== */

.onboarding-screen {
  /* The parent #app already enforces full-viewport height via the base
     .screen rule (flex: 1; min-height: 0; overflow: hidden). The previous
     `min-height: 100dvh` here OVERRODE that constraint, forcing the screen
     to be *at least* full-viewport tall and pushing the footer button
     below the visible area when content was long. Stripped — let normal
     flex sizing apply so the header + footer stay pinned and the content
     area scrolls inside its own bounds. */
  background: var(--charcoal);
  padding: 0;
}

.onboarding-screen.active {
  display: flex;
}

.onboarding-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem 0.4rem;
  flex-shrink: 0;
}

.onboarding-nav-btn {
  background: none;
  border: none;
  color: var(--white-dim);
  font-family: 'Sora', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 0.25rem;
  cursor: pointer;
  min-width: 48px;
  text-align: left;
  transition: color 0.15s;
}

.onboarding-nav-btn:hover {
  color: var(--white);
}

.onboarding-nav-btn:last-child {
  text-align: right;
}

.onboarding-nav-btn.onboarding-back-hidden {
  visibility: hidden;
  pointer-events: none;
}

.onboarding-progress-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.onboarding-progress-track {
  width: 100%;
  height: 4px;
  background: var(--charcoal-lighter);
  border-radius: 999px;
  overflow: hidden;
}

.onboarding-progress-fill {
  height: 100%;
  background: var(--orange);
  width: 14%;
  transition: width 0.35s ease;
  border-radius: 999px;
}

.onboarding-progress-label {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.7rem;
  color: var(--white-muted);
  letter-spacing: 0.04em;
}

.onboarding-content {
  flex: 1;
  /* min-height: 0 lets this column flex item actually shrink and scroll
     instead of expanding to fit content. Without it, overflow-y: auto
     can't engage in some browsers because the flex item refuses to
     shrink below its content height. */
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem 1.25rem 0.75rem;
  overflow-y: auto;
}

.onboarding-slide {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.onboarding-slide.slide-out {
  opacity: 0;
  transform: translateX(-16px);
}

.onboarding-slide.slide-in {
  animation: slideInFromRight 0.28s ease;
}

@keyframes slideInFromRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.onboarding-question {
  font-family: 'Sora', sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--white);
  text-align: center;
  padding: 0 0.25rem;
}

/* Animated welcome step — staggered fade-in. The page is blank for ~0.5s, then
   each line (and each segment within a line) fades in at its own animation-delay
   set inline by renderOnboardingWelcomeStep(). The closing line + brand tagline
   land last, then the Let's Begin button fades in. */
.onboarding-welcome-anim {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 0.75rem 0.25rem;
  font-family: 'Sora', sans-serif;
}

.onboarding-welcome-anim .welcome-line,
.onboarding-welcome-anim .welcome-final,
.onboarding-welcome-anim .welcome-tagline {
  margin: 0;
  line-height: 1.5;
  text-align: center;
}

.onboarding-welcome-anim .welcome-line {
  font-size: 1.02rem;
  color: var(--white-dim);
  letter-spacing: 0.005em;
}

/* Lead line ("Have you ever…") frames the sequence — bigger, white, with a
   small bottom margin so the scenario lines feel like its consequences. */
.onboarding-welcome-anim .welcome-line:first-child {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}

.onboarding-welcome-anim .welcome-final {
  margin-top: 1.1rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: -0.005em;
}

/* Brand tagline — the moment lands here. Larger, orange, branded. */
.onboarding-welcome-anim .welcome-tagline {
  margin-top: 0.35rem;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--orange);
  letter-spacing: 0.01em;
  text-transform: none;
}

.onboarding-welcome-anim .welcome-seg {
  opacity: 0;
  display: inline-block;
  animation: onboardingWelcomeFadeIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes onboardingWelcomeFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Let's Begin button fades in after the welcome animation lands. The
   `welcome-fade-in` class is added by renderOnboardingWelcomeStep at the end of
   the sequence and cleared by renderOnboardingPage on every other step. */
.onboarding-footer .btn-primary.welcome-fade-in {
  animation: onboardingWelcomeFadeIn 0.7s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-welcome-anim .welcome-seg,
  .onboarding-footer .btn-primary.welcome-fade-in {
    animation-duration: 0.001s;
    transform: none;
  }
}

.onboarding-answers {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.onboarding-answer-card {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: var(--charcoal-light);
  border: 2px solid var(--charcoal-lighter);
  border-radius: 12px;
  color: var(--white);
  cursor: pointer;
  text-align: left;
  font-family: 'Sora', sans-serif;
  font-size: 0.9rem;
  line-height: 1.35;
  transition: border-color 0.15s, background 0.15s, transform 0.08s;
}

.onboarding-answer-card:hover {
  border-color: rgba(232, 101, 10, 0.5);
}

.onboarding-answer-card:active {
  transform: scale(0.99);
}

.onboarding-answer-card.selected {
  border-color: var(--orange);
  background: var(--orange-dim);
}

.onboarding-answer-letter {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--charcoal-lighter);
  color: var(--white-dim);
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
  transition: background 0.15s, color 0.15s;
}

.onboarding-answer-card.selected .onboarding-answer-letter {
  background: var(--orange);
  color: var(--white);
}

.onboarding-answer-text {
  flex: 1;
  padding-top: 0.1rem;
}

.onboarding-footer {
  padding: 0.65rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom, 0));
  background: linear-gradient(to bottom, transparent, var(--charcoal) 35%);
  flex-shrink: 0;
}

.onboarding-footer .btn-primary.hidden {
  display: none;
}

.onboarding-nav-btn.onboarding-skip-hidden {
  visibility: hidden;
  pointer-events: none;
}

.onboarding-subtext {
  font-family: 'Sora', sans-serif;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--white-dim);
  text-align: center;
  margin: -0.5rem 0 0;
  padding: 0 0.25rem;
}

.onboarding-vehicle-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.onboarding-name-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.5rem;
}

.onb-form-group {
  display: flex;
  flex-direction: column;
}

.onb-form-group label {
  font-family: 'Sora', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--white-dim);
  margin-bottom: 0.25rem;
  letter-spacing: 0.02em;
}

.onb-form-group select,
.onb-form-group input {
  width: 100%;
}

.onb-manual-input.hidden {
  display: none;
}

.onb-field-hint {
  margin: 0.4rem 0 0;
  font-family: 'Sora', sans-serif;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--white-muted);
}

.onb-optional-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.25rem 0 0;
  color: var(--white-muted);
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.onb-optional-divider::before,
.onb-optional-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--charcoal-lighter);
}

.home-footer-links {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}

.mpg-result {
  margin-top: 1rem;
  padding: 0.9rem;
  background: var(--charcoal);
  border: 2px solid var(--charcoal-lighter);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mpg-result.hidden {
  display: none;
}

.mpg-stats {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 0.75rem;
}

.mpg-stat {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: center;
}

.mpg-stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--white-muted);
}

.mpg-stat-value {
  font-family: 'Sora', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--orange);
}

.mpg-clear {
  align-self: center;
}

.btn-link-subtle {
  background: none;
  border: none;
  color: var(--white-muted);
  font-family: 'Sora', sans-serif;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  letter-spacing: 0.02em;
  transition: color 0.15s;
}

.btn-link-subtle:hover {
  color: var(--orange);
}

/* ===== WELCOME SCREEN ===== */

.welcome-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* Cap to exactly one viewport so the safety-net scroll (below) can kick
     in only when content genuinely doesn't fit. On a typical phone (700px+)
     the compact sizing means nothing overflows and no scroll appears. */
  min-height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.75rem 1.25rem 0.5rem;
  text-align: center;
}

.welcome-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* margin-top: auto pushes the helps + button block to the bottom of the
   flex column when there's free space (tall viewport → hero look). On
   short viewports there's no free space, the auto margin collapses, and
   the container's overflow-y: auto handles overflow. */
.welcome-bottom {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 0.25rem;
  margin-top: auto;
}

.welcome-logo {
  margin-bottom: 0.4rem;
}

/* Welcome splash logo. Large, no aggressive crop \u2014 image renders at its natural
   aspect ratio (2501x1153, ~2.17:1) so no intended content is clipped. */
.logo-icon {
  width: 300px;
  max-width: 80vw;
  margin: 0 auto 0.75rem;
  display: block;
}

.logo-icon img {
  display: block;
  width: 100%;
  height: auto;
}

[data-theme="light"] .logo-icon {
  background: #1a1a1a;
  padding: 10px 14px;
  border-radius: 14px;
  box-sizing: border-box;
}

.app-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.title-accent {
  color: var(--orange);
}

.tagline {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--white-dim);
  margin-bottom: 0.5rem;
  line-height: 1.35;
}

.welcome-greeting {
  font-family: 'Sora', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--white);
  text-align: center;
  margin: 0 0 0.4rem 0;
  letter-spacing: -0.01em;
}

.welcome-greeting.hidden {
  display: none;
}

.welcome-name-capture {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 340px;
  margin-bottom: 1.25rem;
  text-align: left;
}

.welcome-name-capture.hidden {
  display: none;
}

.welcome-name-capture label {
  font-family: 'Sora', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--white-dim);
  margin-bottom: 0.4rem;
  letter-spacing: 0.02em;
}

.welcome-name-capture input {
  width: 100%;
}

#welcome-get-started[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.welcome-helps {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.4rem;
  margin-bottom: 0.75rem;
  width: 100%;
  max-width: 340px;
  text-align: left;
}

.welcome-helps-title {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--white);
  letter-spacing: 0.01em;
  margin: 0 0 0.35rem 0;
}

.welcome-helps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.welcome-helps-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--white-dim);
}

.welcome-helps-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--orange);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.3;
}


/* ===== FORMS ===== */

.form-container {
  padding-bottom: 2rem;
}

.form-section {
  margin-bottom: 1.5rem;
}

.form-section h3 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-primary);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--charcoal-lighter);
}

.form-section.collapsible h3 {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  user-select: none;
  margin-bottom: 0;
  padding-bottom: 0.75rem;
}

.form-section.collapsible .section-title {
  flex: 1;
  min-width: 0;
}

.section-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange-dim);
  color: var(--accent);
  border-radius: 9px;
  font-size: 0.95rem;
  line-height: 1;
}

.section-chevron {
  font-size: 0.65rem;
  transition: transform 0.2s;
  color: var(--white-muted);
  flex-shrink: 0;
}

.form-section.collapsible.open .section-chevron {
  transform: rotate(180deg);
}

.form-section.collapsible .form-section-body {
  display: none;
  padding-top: 1rem;
}

.form-section.collapsible.open .form-section-body {
  display: block;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--white-dim);
  margin-bottom: 0.375rem;
  letter-spacing: 0.02em;
}

.form-section-hint {
  margin: -0.5rem 0 1rem;
  font-size: 0.8rem;
}

.field-hint {
  margin-top: 0.375rem;
  font-size: 0.75rem;
  font-style: normal;
  font-family: 'Sora', sans-serif;
  color: var(--white-muted);
}

/* ===== VEHICLE PHOTO UPLOADER ===== */

.vehicle-photo-uploader {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--charcoal-light);
  border: 2px dashed var(--charcoal-lighter);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s;
}

.vehicle-photo-uploader:hover {
  border-color: var(--orange);
}

.vehicle-photo-uploader.empty {
  border-style: dashed;
}

.vehicle-photo-uploader:not(.empty) {
  border-style: solid;
  cursor: default;
}

.vehicle-photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: var(--white-muted);
  text-align: center;
  padding: 1rem;
}

.vehicle-photo-uploader:not(.empty) .vehicle-photo-placeholder {
  display: none;
}

.vehicle-photo-icon {
  font-size: 2rem;
  opacity: 0.7;
}

.vehicle-photo-hint {
  font-size: 0.85rem;
  font-weight: 500;
}

.vehicle-photo-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vehicle-photo-preview.hidden {
  display: none;
}

.vehicle-photo-actions {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  display: flex;
  gap: 0.25rem;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 8px;
  padding: 0.15rem;
  backdrop-filter: blur(4px);
}

.vehicle-photo-actions.hidden {
  display: none;
}

.vehicle-photo-actions .btn-text,
.vehicle-photo-actions .btn-danger {
  font-size: 0.75rem;
  padding: 0.3rem 0.55rem;
}

.insurance-card-pdf {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--white-dim);
  text-align: center;
  padding: 1rem;
  background: var(--charcoal-light);
}

.insurance-card-pdf.hidden {
  display: none;
}

.insurance-card-pdf .pdf-icon {
  font-size: 2.5rem;
  opacity: 0.7;
  line-height: 1;
}

.insurance-card-pdf span:not(.pdf-icon) {
  font-size: 0.9rem;
  font-weight: 500;
}

.input-with-prefix {
  position: relative;
  display: flex;
  align-items: center;
}

.input-prefix {
  position: absolute;
  left: 0.875rem;
  color: var(--white-muted);
  font-size: 0.95rem;
  font-weight: 500;
  pointer-events: none;
  z-index: 1;
}

/* Use [type] attribute selector to outrank the base `input[type="number"]`
   rule (defined later in the file with a `padding` shorthand). Without this
   bump the shorthand wins on equal specificity and zeros out our left
   padding, causing the value to render directly under the "$" prefix. */
.input-with-prefix input[type] {
  padding-left: 1.75rem;
}

.form-row {
  display: flex;
  gap: 0.75rem;
}

.form-row.two-col > .form-group {
  flex: 1;
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="search"],
input[type="email"],
input[type="password"],
textarea,
select {
  width: 100%;
  background: var(--charcoal-light);
  border: 2px solid var(--charcoal-lighter);
  border-radius: 10px;
  color: var(--white);
  font-family: 'Sora', sans-serif;
  /* v2.21.1 — 16px floor on form inputs prevents iOS Safari auto-zoom
     on focus. Previously 0.95rem (~15.2px), which triggered the zoom
     and was the original reason user-scalable=no was added. With
     user-scalable removed for WCAG compliance, this MUST stay >= 16px. */
  font-size: 1rem;
  padding: 0.75rem 0.875rem;
  transition: border-color 0.2s;
  appearance: none;
  -webkit-appearance: none;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--orange);
}

input::placeholder, textarea::placeholder {
  color: var(--white-muted);
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.5rem;
}

select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== NHTSA CASCADE ===== */

.vehicle-cascade {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}

.vehicle-cascade.hidden {
  display: none;
}

.vehicle-cascade .form-group {
  margin-bottom: 0;
}

.cascade-field {
  position: relative;
}

.cascade-field.hidden {
  display: none;
}

.cascade-fallback {
  margin-top: 0.4rem;
}

.cascade-fallback.hidden {
  display: none;
}

.select-spinner {
  position: absolute;
  right: 2.4rem;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid var(--charcoal-lighter);
  border-top-color: var(--orange);
  border-radius: 50%;
  transform: translateY(-50%);
  animation: spin 0.8s linear infinite;
  pointer-events: none;
}

.select-spinner.hidden {
  display: none;
}

@keyframes spin {
  to { transform: translateY(-50%) rotate(360deg); }
}

.cascade-summary {
  background: var(--orange-dim);
  border: 2px solid var(--orange);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cascade-summary.hidden {
  display: none;
}

.cascade-summary-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--orange);
}

.cascade-summary strong {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
}

.vehicle-current-summary {
  margin-bottom: 1rem;
}

.vehicle-current-summary.hidden {
  display: none;
}

.vehicle-current-card {
  background: var(--charcoal-light);
  border: 2px solid var(--charcoal-lighter);
  border-radius: 14px;
  padding: 1rem 1.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
}

.vehicle-current-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange-dim);
  color: var(--accent);
  border-radius: 12px;
  font-size: 1.5rem;
  line-height: 1;
}

.vehicle-current-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.vehicle-current-value {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vehicle-current-mileage {
  font-family: 'Sora', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--white-dim);
}

.vehicle-current-edit {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: transparent;
  border: 2px solid var(--border-color);
  color: var(--accent);
  font-family: 'Sora', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.vehicle-current-edit:hover {
  background: var(--orange-dim);
  border-color: var(--accent);
}

.vehicle-current-edit-icon {
  font-size: 0.85rem;
  line-height: 1;
}

.vehicle-current-lock {
  flex-shrink: 0;
  font-size: 0.95rem;
  color: var(--white-muted);
  line-height: 1;
  margin-left: 0.5rem;
}

.vehicle-log-cta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 14px;
  color: var(--text-primary);
  cursor: pointer;
  font-family: 'Sora', sans-serif;
  text-align: left;
  margin-bottom: 1rem;
  transition: border-color 0.15s, transform 0.08s, background 0.15s;
}

.vehicle-log-cta:hover {
  border-color: var(--accent);
}

.vehicle-log-cta:active {
  transform: scale(0.99);
}

.vehicle-log-cta.hidden {
  display: none;
}

.vehicle-log-cta-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.vehicle-log-cta-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.vehicle-log-cta-label {
  font-size: 0.95rem;
  font-weight: 600;
}

.vehicle-log-cta-sub {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.vehicle-log-cta-arrow {
  flex-shrink: 0;
  font-size: 1.4rem;
  color: var(--text-secondary);
  font-weight: 300;
}

.vehicle-delete-wrap {
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
}

.vehicle-delete-wrap.hidden {
  display: none;
}

.btn-delete-vehicle {
  background: none;
  border: 2px solid transparent;
  color: var(--red);
  font-family: 'Sora', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn-delete-vehicle:hover {
  background: rgba(224, 85, 85, 0.08);
  border-color: rgba(224, 85, 85, 0.4);
}

.toggle-group {
  display: flex;
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--charcoal-lighter);
}

.toggle-btn {
  flex: 1;
  padding: 0.625rem;
  background: var(--charcoal-light);
  color: var(--white-dim);
  border: none;
  font-family: 'Sora', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.toggle-btn.active {
  background: var(--orange);
  color: var(--white);
}

.toggle-btn + .toggle-btn {
  border-left: 2px solid var(--charcoal-lighter);
}

/* ===== VEHICLE SWITCHER ===== */

.vehicle-switcher {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--charcoal-lighter);
  overflow-x: auto;
  /* Override the app-level pan-y lock for this horizontal-scroll strip. */
  touch-action: pan-x;
}

.vehicle-tabs {
  display: flex;
  gap: 0.5rem;
  flex: 1;
}

/* Garage list (main garage screen) */
.garage-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.garage-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  padding: 0.875rem;
  background: var(--charcoal-light);
  border: 2px solid var(--charcoal-lighter);
  border-radius: 14px;
  color: var(--white);
  text-align: left;
  cursor: pointer;
  font-family: 'Sora', sans-serif;
  transition: border-color 0.15s, background 0.15s, transform 0.08s;
}

.garage-card:hover {
  border-color: rgba(232, 101, 10, 0.5);
}

.garage-card:active {
  transform: scale(0.995);
}

.garage-card-photo {
  flex-shrink: 0;
  width: 64px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--charcoal);
}

.garage-card-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--white-muted);
}

.garage-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.garage-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
}

.garage-card-meta {
  font-size: 0.8rem;
  margin: 0;
}

.garage-card-chevron {
  flex-shrink: 0;
  font-size: 1.5rem;
  color: var(--white-muted);
  line-height: 1;
}

.garage-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.garage-add-icon {
  font-size: 1.3rem;
  line-height: 1;
}

.add-vehicle-intro {
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

.add-vehicle-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.garage-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 2.5rem 1rem;
  text-align: center;
}

.garage-empty-icon {
  font-size: 3rem;
  opacity: 0.6;
  margin-bottom: 0.5rem;
}

.garage-empty-text {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--white);
  margin: 0;
}

.garage-empty-sub {
  margin: 0;
  max-width: 360px;
}

.garage-tool-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-primary);
  font-family: 'Sora', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  text-align: left;
}

.garage-tool-link:hover {
  border-color: var(--accent);
  background: var(--orange-dim);
}

.garage-tool-link:active {
  transform: scale(0.99);
}

.garage-tool-link-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.garage-tool-link-label {
  flex: 1;
}

.garage-tool-link-arrow {
  color: var(--text-secondary);
  font-size: 1.2rem;
  line-height: 1;
}

.quick-log-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.log-form-vehicle {
  margin: 0 0 0.5rem;
  padding: 0.45rem 0.7rem;
  background: var(--orange-dim);
  border: 2px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
}

.log-entry-vehicle {
  color: var(--text-secondary);
  font-weight: 600;
}

.quick-log-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 1rem;
  background: var(--card-bg);
  border: 2px dashed var(--border-color);
  border-radius: 14px;
  text-align: center;
  margin-top: 1rem;
}

.quick-log-placeholder-icon {
  font-size: 2rem;
  line-height: 1;
  opacity: 0.7;
}

.quick-log-placeholder-text {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 360px;
}

.garage-benefits {
  margin: 1rem 0 0;
  padding: 1rem 1.1rem;
  background: var(--charcoal-light);
  border: 2px solid var(--charcoal-lighter);
  border-radius: 14px;
}

.garage-benefits-title {
  font-family: 'Sora', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--orange);
  margin: 0 0 0.75rem 0;
}

.garage-benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.garage-benefits-list li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--white-dim);
}

.garage-benefits-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--orange);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.45;
}

.vehicle-tab {
  padding: 0.5rem 1rem;
  background: var(--charcoal-light);
  border: 2px solid var(--charcoal-lighter);
  border-radius: 8px;
  color: var(--white-dim);
  font-family: 'Sora', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.vehicle-tab.active {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--orange-dim);
}

/* ===== HOME SCREEN ===== */

/* The home header is reconfigured for a left-aligned personalized
   greeting in the #screen-home-scoped block further down. The body
   greet block (microcopy + status pill) was removed in v1.109.5;
   recall + next-service signals now surface via the Recalls / Garage
   tiles and the smart-suggestion banner. */

.home-title {
  font-size: 0.9rem;
  font-weight: 500;
}

.plan-badge {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--white-muted);
  background: var(--charcoal-lighter);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--bubble-border);
  box-shadow: var(--pill-shadow);
}

.plan-badge.paid {
  color: var(--orange);
  background: var(--orange-dim);
}

/* Monthly cost summary */

.cost-summary {
  background: var(--charcoal-light);
  border: 2px solid var(--charcoal-lighter);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.25rem;
}

.cost-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.625rem;
}

.cost-summary-header h4 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--white-dim);
}

.cost-total {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--orange);
}

.cost-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.cost-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--white-muted);
}

.cost-row span:last-child {
  color: var(--white-dim);
  font-weight: 500;
}

.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

/* Home chat-style advisor input — vertically and horizontally centered on the home screen */
#screen-home .screen-content {
  display: flex;
  flex-direction: column;
}

.home-chat {
  margin: auto;
  width: 100%;
  max-width: 640px;
}

.home-chat-prompt {
  margin: 0 0 0.875rem 0;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.home-chat-box {
  position: relative;
  display: block;
  padding: 0.875rem 3.25rem 0.875rem 1rem;
  border: 2px solid var(--border-color);
  border-radius: 16px;
  background: var(--card-bg);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.home-chat-box:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(232, 101, 10, 0.15);
}

.home-chat-textarea {
  width: 100%;
  min-height: 4rem;
  max-height: 10rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  resize: none;
  outline: none;
}

.home-chat-textarea::placeholder {
  color: var(--text-secondary);
  opacity: 0.75;
}

.home-chat-send {
  position: absolute;
  right: 0.625rem;
  bottom: 0.625rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.08s;
}

.home-chat-send:hover {
  background: var(--orange-hover, #ff7a1a);
}

.home-chat-send:active {
  transform: scale(0.95);
}

.home-chat-hint {
  margin: 0.625rem 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.home-chat-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin: 0.875rem 0 0;
}

.home-prompt-chip {
  font-family: 'Sora', sans-serif;
  font-size: 0.8rem;
  line-height: 1.3;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: var(--charcoal-light);
  border: 2px solid var(--charcoal-lighter);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.08s;
}

.home-prompt-chip:hover {
  border-color: var(--orange);
  background: var(--orange-dim);
}

.home-prompt-chip:active {
  transform: scale(0.98);
}

/* Expand-your-garage CTA (on the vehicle form) and option cards (in both the CTA and the cap-hit modal) */
.expand-garage-cta {
  margin: 1.25rem 0 1rem;
  padding: 1rem 1.1rem 1.1rem;
  border: 2px solid var(--border-color);
  border-radius: 14px;
  background: var(--card-bg);
}

.expand-garage-cta.hidden {
  display: none;
}

.expand-garage-title {
  margin: 0 0 0.35rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.expand-garage-sub {
  margin: 0 0 0.85rem 0;
}

.expand-garage-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  margin-top: 0.25rem;
}

.expand-garage-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0.85rem 0.9rem;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s, transform 0.08s;
}

.expand-garage-option:hover {
  border-color: var(--orange);
}

.expand-garage-option:active {
  transform: scale(0.98);
}

.expand-garage-option-premium {
  border-color: var(--orange);
  background: rgba(232, 101, 10, 0.08);
}

.expand-garage-option-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.expand-garage-option-premium .expand-garage-option-label {
  color: var(--orange);
}

.expand-garage-option-price {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.expand-garage-option-note {
  margin: 0.1rem 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
}

@media (max-width: 380px) {
  .expand-garage-options {
    grid-template-columns: 1fr;
  }
}

.expand-garage-option-wide {
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.expand-garage-option-wide .expand-garage-option-price {
  margin-left: auto;
}

/* Three-row plan selector used inside CTAs (promo popup, expand-garage card, garage-full modal) */
.plan-rows-heading {
  margin: 1rem 0 0.5rem 0;
  font-size: 0.82rem;
}

.plan-rows {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0.5rem 0 0.25rem 0;
}

.plan-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 1.85rem 0.9rem;
  border: 2px solid #000;
  border-radius: 12px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
  /* Layered shadows: a tight near-shadow for the edge, a broader ambient
     shadow for depth. Together they lift the card off the surface. */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.10),
    0 6px 14px rgba(0, 0, 0, 0.14),
    0 14px 28px rgba(0, 0, 0, 0.10);
  transition:
    border-color 0.15s,
    background 0.15s,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.plan-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
}

.plan-row:hover {
  border-color: var(--orange);
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.12),
    0 10px 22px rgba(0, 0, 0, 0.20),
    0 22px 42px rgba(0, 0, 0, 0.16);
}

.plan-row:active {
  transform: translateY(0);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.14),
    0 2px 6px rgba(0, 0, 0, 0.16);
}

.plan-row-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

.plan-row-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  line-height: 1.2;
}

.plan-row-price {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
}

.plan-row-period {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-left: 0.1em;
}

.plan-row-detail {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.plan-row-compare {
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.3rem;
  display: block;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  color: var(--accent);
  line-height: 1.4;
  margin-top: 0;
  padding-top: 0.3rem;
  border-top: 2px dashed rgba(232, 101, 10, 0.25);
  text-align: center;
}

/* Bubble overlay — soft circular highlights stacked over the solid
   variant color. Same pattern across all three variants; only the base
   color underneath changes. Defined here once and reused via a CSS
   custom property so each variant just sets --plan-row-base. */
.plan-row-popular,
.plan-row-featured,
.plan-row-single-best {
  background:
    radial-gradient(circle 70px at 18% 22%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle 90px at 82% 68%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle 40px at 60% 15%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle 50px at 28% 85%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle 28px at 90% 18%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 70%),
    var(--plan-row-base, var(--bg-tertiary));
}

/* ----- Annual / Featured (orange solid + bubbles) ----- */
.plan-row-featured {
  --plan-row-base: var(--orange);
  border-color: #000;
  box-shadow:
    0 1px 2px rgba(232, 101, 10, 0.20),
    0 6px 16px rgba(232, 101, 10, 0.28),
    0 14px 32px rgba(232, 101, 10, 0.22);
}

.plan-row-featured:hover {
  box-shadow:
    0 2px 4px rgba(232, 101, 10, 0.24),
    0 10px 24px rgba(232, 101, 10, 0.36),
    0 22px 46px rgba(232, 101, 10, 0.30);
}

.plan-row-featured .plan-row-name,
.plan-row-featured .plan-row-price,
.plan-row-featured .plan-row-period {
  color: #ffffff;
}

.plan-row-featured .plan-row-detail {
  color: rgba(255, 255, 255, 0.85);
}

.plan-row-featured .plan-row-compare {
  color: #ffffff;
  border-top-color: rgba(255, 255, 255, 0.45);
}

.plan-row-featured .plan-row-badge {
  background: #ffffff;
  color: var(--orange);
}

/* ----- Monthly / Popular (green solid + bubbles) ----- */
.plan-row-popular {
  --plan-row-base: var(--green);
  border-color: #000;
  box-shadow:
    0 1px 2px rgba(60, 179, 113, 0.20),
    0 6px 16px rgba(60, 179, 113, 0.28),
    0 14px 32px rgba(60, 179, 113, 0.22);
}

.plan-row-popular:hover {
  box-shadow:
    0 2px 4px rgba(60, 179, 113, 0.24),
    0 10px 24px rgba(60, 179, 113, 0.36),
    0 22px 46px rgba(60, 179, 113, 0.30);
}

.plan-row-popular .plan-row-name,
.plan-row-popular .plan-row-price,
.plan-row-popular .plan-row-period {
  color: #ffffff;
}

.plan-row-popular .plan-row-detail {
  color: rgba(255, 255, 255, 0.85);
}

.plan-row-popular .plan-row-compare {
  color: #ffffff;
  border-top-color: rgba(255, 255, 255, 0.45);
}

.plan-row-popular .plan-row-badge {
  background: #ffffff;
  color: var(--green);
}

/* ----- Single Visit / Best Value (gold solid + bubbles) ----- */
.plan-row-single-best {
  --plan-row-base: var(--gold);
  border-color: #000;
  box-shadow:
    0 1px 2px rgba(212, 175, 55, 0.24),
    0 6px 16px rgba(212, 175, 55, 0.34),
    0 14px 32px rgba(212, 175, 55, 0.28);
}

.plan-row-single-best:hover {
  box-shadow:
    0 2px 4px rgba(212, 175, 55, 0.30),
    0 10px 24px rgba(212, 175, 55, 0.42),
    0 22px 46px rgba(212, 175, 55, 0.34);
}

.plan-row-single-best .plan-row-name,
.plan-row-single-best .plan-row-price,
.plan-row-single-best .plan-row-period {
  color: #1a1a1a;
}

.plan-row-single-best .plan-row-detail {
  color: rgba(0, 0, 0, 0.78);
}

.plan-row-single-best .plan-row-compare {
  color: #1a1a1a;
  border-top-color: rgba(0, 0, 0, 0.32);
}

.plan-row-single-best .plan-row-badge {
  background: #1a1a1a;
  color: var(--gold);
}

.plan-row-badge {
  position: absolute;
  top: -0.8rem;
  left: 0.8rem;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--bubble-border);
  box-shadow: var(--pill-shadow);
}

/* Premium promo popup (fires on every app open for free-plan users) */
.premium-promo-content {
  position: relative;
  max-width: 380px;
  padding-top: 2.25rem;
}

#premium-promo-modal:not(.hidden) {
  animation: premium-promo-fade-in 0.3s ease-out;
}

@keyframes premium-promo-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.premium-promo-close {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: none;
  color: var(--white-dim);
  font-size: 2.1rem;
  font-weight: 300;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.4s ease;
}

/* CTA close-button delay — applied to .paywall-close / .premium-promo-close
   when a CTA is first opened; JS removes the class after 4s so the button
   fades in. opacity:0 alone would still steal clicks, so we also lock
   pointer-events out while pending. */
.cta-close-pending {
  opacity: 0;
  pointer-events: none;
}

.premium-promo-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.premium-promo-badge {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  border: 1px solid var(--bubble-border);
  box-shadow: var(--pill-shadow);
}

.premium-promo-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  text-align: left;
  flex: 1;
}

.premium-promo-sub {
  margin: 0 0 0.875rem 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-secondary);
  text-align: center;
}

/* Shared upgrade-CTA benefits list — appears above plan pricing in every upgrade surface */
.cta-benefits {
  list-style: none;
  margin: 0 0 1rem 0;
  padding: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-primary);
  text-align: left;
}

.cta-benefits li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.4rem;
}

.cta-benefits li:last-child {
  margin-bottom: 0;
}

.cta-benefits li::before {
  content: '\2014';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--orange);
  font-weight: 700;
}

.cta-benefits:empty {
  display: none;
  margin: 0;
}

/* App-capability benefits shown BELOW the plan pricing in every upgrade CTA */
.cta-features-label {
  margin: 0.85rem 0 -0.2rem 0;
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-align: center;
  position: relative;
  z-index: 1;
}

.cta-features-label + .cta-app-benefits {
  margin-top: 0.4rem;
}

.cta-app-benefits {
  list-style: none;
  margin: 0.85rem 0 0 0;
  padding: 0.7rem 0.9rem 0.75rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-primary);
  text-align: left;
  background: var(--bg-tertiary);
  border-radius: 10px;
}

.cta-app-benefits li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.25rem;
}

.cta-app-benefits li:last-child {
  margin-bottom: 0;
}

.cta-app-benefits li::before {
  content: '+';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--orange);
  font-weight: 700;
}

.cta-app-benefits:empty {
  display: none;
  margin: 0;
  padding: 0;
}

/* Extras start hidden; the Show more toggle flips .cta-app-expanded to reveal them */
.cta-app-benefits .cta-app-extra {
  display: none;
}

.cta-app-benefits.cta-app-expanded .cta-app-extra {
  display: list-item;
}

.cta-app-benefits-toggle {
  display: block;
  margin: 0.4rem auto 0;
  padding: 0.3rem 0.75rem;
  background: none;
  border: none;
  color: var(--orange);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.cta-app-benefits-toggle:hover {
  text-decoration: underline;
}

.cta-app-benefits-toggle[hidden] {
  display: none;
}

.premium-promo-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
}

.premium-promo-actions .btn-link-subtle {
  align-self: center;
}

/* Add-Vehicle prompt + Delete-Vehicle confirmation modal action stacks */
.add-vehicle-actions,
.delete-vehicle-actions,
.feedback-prompt-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
  align-items: stretch;
}

.add-vehicle-actions .btn-link-subtle,
.delete-vehicle-actions .btn-link-subtle,
.feedback-prompt-actions .btn-link-subtle {
  align-self: center;
}

/* Auto-prompt feedback popup (fires once at 5 unique screens) */
.feedback-prompt-textarea {
  width: 100%;
  margin-top: 0.85rem;
  padding: 0.75rem 0.85rem;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  resize: vertical;
  min-height: 5rem;
}
.feedback-prompt-textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(232, 101, 10, 0.15);
}
.feedback-prompt-error {
  margin-top: 0.5rem;
  color: var(--red);
  font-size: 0.85rem;
  text-align: center;
}

.home-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.125rem;
  background: var(--charcoal-light);
  border: 2px solid var(--charcoal-lighter);
  border-radius: 14px;
  color: var(--white);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.1s;
  text-align: left;
}

.home-tile:hover {
  border-color: var(--orange);
}

.home-tile:active {
  transform: scale(0.97);
}

.tile-icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.tile-label {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.tile-sub {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.75rem;
  color: var(--white-muted);
}

.upgrade-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, var(--charcoal-light), var(--charcoal-lighter));
  border: 2px solid var(--orange);
  border-radius: 14px;
  padding: 1rem;
}

.upgrade-banner.hidden {
  display: none;
}

.upgrade-content {
  flex: 1;
}

.upgrade-content h4 {
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}

/* ===== EMPTY STATE ===== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1rem;
  gap: 0.5rem;
}

.empty-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  opacity: 0.5;
}

.empty-state p {
  font-size: 1rem;
  font-weight: 500;
}

.empty-state .btn-primary {
  width: auto;
  margin-top: 1rem;
}

.log-preview {
  width: 100%;
  max-width: 420px;
  margin: 1.5rem auto 0;
  text-align: left;
}

.log-preview-label {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--orange);
  background: var(--orange-dim);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.6rem;
}

.log-entry-preview {
  cursor: default;
  border-style: dashed;
  border-color: var(--charcoal-lighter);
  opacity: 0.9;
}

.log-entry-preview .log-entry-header {
  cursor: default;
}

.log-entry-preview .log-entry-header:hover {
  background: transparent;
}

.log-preview-hint {
  margin-top: 0.75rem;
  text-align: left;
}

/* ===== MAINTENANCE LOG ===== */

.log-vehicle-switcher {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--charcoal-lighter);
  overflow-x: auto;
  /* Override the app-level pan-y lock for this horizontal-scroll strip. */
  touch-action: pan-x;
}

.log-vehicle-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--white-dim);
}

.log-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.log-entry {
  background: var(--charcoal-light);
  border: 2px solid var(--charcoal-lighter);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.log-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  cursor: pointer;
}

.log-entry-header:hover {
  background: var(--charcoal-lighter);
}

.log-entry-main {
  flex: 1;
}

.log-entry-title {
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.log-entry-meta {
  font-size: 0.75rem;
  color: var(--white-muted);
}

.log-entry-expand {
  font-size: 0.9rem;
  color: var(--white-muted);
  margin-left: 0.5rem;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.log-entry.expanded .log-entry-expand {
  transform: rotate(180deg);
}

.log-entry-details {
  display: none;
  padding: 0 1rem 1rem;
  border-top: 2px solid var(--charcoal-lighter);
}

.log-entry.expanded .log-entry-details {
  display: block;
}

.log-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  font-size: 0.8rem;
}

.log-detail-label {
  color: var(--white-muted);
}

.log-detail-value {
  text-align: right;
  max-width: 60%;
}

.log-entry-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
  padding-top: 0.5rem;
  border-top: 2px solid var(--charcoal-lighter);
  margin-top: 0.5rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.spending-summary {
  background: var(--charcoal-light);
  border: 2px solid var(--charcoal-lighter);
  border-radius: 12px;
  padding: 0.875rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.spending-summary.hidden {
  display: none;
}

.spending-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.spending-label {
  font-size: 0.8rem;
  color: var(--white-dim);
}

.spending-row:first-child .spending-label {
  font-weight: 600;
  color: var(--white);
}

.spending-value {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--orange);
}

.spending-row:not(:first-child) .spending-value {
  font-size: 0.85rem;
  color: var(--white-dim);
}

.log-receipt-btn {
  background: none;
  border: none;
  font-size: 1rem;
  padding: 0.2rem 0.35rem;
  margin-left: 0.25rem;
  cursor: pointer;
  color: var(--orange);
  flex-shrink: 0;
  line-height: 1;
}

/* ===== Fuel Mileage Log ===== */

.flog-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 0.875rem 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--elev-shadow);
}

.flog-stats.hidden {
  display: none;
}

.flog-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
}

.flog-stat-label {
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.flog-stat-value {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--orange);
}

/* Radio-pill option groups (fuel type, commute, weather, etc.) */
.flog-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

.flog-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.flog-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.flog-option span {
  display: inline-block;
  padding: 0.45rem 0.85rem;
  border: 2px solid var(--border-color);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-secondary);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.18s ease, transform 0.18s ease;
  user-select: none;
}

.flog-option:hover input:not(:disabled) + span {
  border-color: var(--orange);
}

.flog-option input:checked + span {
  border-color: var(--orange);
  background: var(--orange);
  color: #ffffff;
  box-shadow: var(--accent-glow);
}

.flog-option input:focus-visible + span {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.flog-option:has(input:disabled) {
  cursor: not-allowed;
}

.flog-option input:disabled + span {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Premium-only conditions section. Locked state for free users greys it
   out and shows a small banner pointing at upgrade. */
.flog-premium-section {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 2px dashed var(--border-color);
}

.flog-premium-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.flog-premium-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.flog-premium-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--orange);
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--bubble-border);
  box-shadow: var(--pill-shadow);
}

.flog-premium-tag.hidden {
  display: none;
}

.flog-premium-blurb {
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.8rem;
  background: var(--orange-dim);
  border-left: 2px solid var(--orange);
  border-radius: 6px;
  font-size: 0.82rem;
  line-height: 1.4;
}

.flog-premium-blurb.hidden {
  display: none;
}

.flog-premium-blurb a {
  color: var(--orange);
  font-weight: 600;
  text-decoration: underline;
}

.flog-premium-locked .form-group label {
  opacity: 0.6;
}

/* Quick-log card on the Fuel Mileage Log hub: replaces the old header "+"
   button with an inline form (miles + gallons + Log) for fast entry. */
.flog-quicklog {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0.95rem 0.95rem 0.85rem;
  margin: 0 0 1.1rem;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}

[data-theme="light"] .flog-quicklog {
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

.flog-quicklog.hidden {
  display: none;
}

.flog-quicklog-title {
  margin: 0 0 0.7rem;
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.flog-quicklog-btn {
  width: 100%;
  margin-top: 0.25rem;
}

.flog-quicklog-more {
  display: block;
  margin: 0.55rem auto 0;
  background: none;
  border: none;
  padding: 0.25rem 0.5rem;
  color: var(--text-secondary);
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
}

.flog-quicklog-more:hover {
  color: var(--accent);
}

/* Mileage Insights — AI-generated 3-5 sentence summary at the very bottom
   of the Fuel Mileage Log hub. Stays hidden until at least one vehicle has
   FLOG_INSIGHTS_MIN_ENTRIES fill-ups logged. */
.flog-insights {
  margin-top: 1.5rem;
  padding: 0.95rem 0.95rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}

[data-theme="light"] .flog-insights {
  border-color: rgba(0, 0, 0, 0.08);
  border-left-color: var(--accent);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

.flog-insights.hidden {
  display: none;
}

.flog-insights-title {
  margin: 0 0 0.45rem;
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.flog-insights-body p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-primary);
}

.flog-insights-loading {
  font-style: italic;
  opacity: 0.8;
}

.flog-insights-error {
  color: var(--text-secondary);
  font-size: 0.88rem;
}

/* Free-plan CTA variant of the insights card. The wrapper gets
   `.flog-insights-cta` from JS so the title can be longer and the body
   carries an upgrade pitch + plan buttons. The .plan-row buttons reuse
   the existing pricing-card styling from the upgrade modal. */
.flog-insights-cta .flog-insights-title {
  font-size: 1.0rem;
  line-height: 1.3;
  margin-bottom: 0.55rem;
}

.flog-insights-cta-blurb {
  margin: 0 0 2rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-primary);
}

.flog-insights-cta-plans {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-bottom: 1.4rem;
}

/* Compact override for the upgrade modal's .plan-row component when it
   appears inside the free-plan insights CTA. Trims the heavy padding,
   shadow, font sizes, and badge so the two buttons sit comfortably in
   a small card without dominating it. The badge overhang is also
   tightened (top: -0.55rem) to match the smaller badge size — the
   default -0.8rem overhang was colliding with the blurb above and the
   adjacent button below. */
.flog-insights-cta-plans .plan-row {
  padding: 0.95rem 0.85rem;
  font-size: 0.85rem;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 4px 10px rgba(0, 0, 0, 0.10);
}

.flog-insights-cta-plans .plan-row-name {
  font-size: 1rem;
}

.flog-insights-cta-plans .plan-row-price {
  font-size: 1.05rem;
}

.flog-insights-cta-plans .plan-row-period {
  font-size: 0.78rem;
}

.flog-insights-cta-plans .plan-row-detail {
  font-size: 0.78rem;
}

.flog-insights-cta-plans .plan-row-badge {
  top: -0.55rem;
  font-size: 0.62rem;
  padding: 0.18rem 0.5rem;
}

.flog-insights-cta-link {
  display: block;
  margin: 0 auto;
  background: none;
  border: none;
  padding: 0.3rem 0.5rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
}

.flog-insights-cta-link:hover {
  color: var(--accent);
}

/* ============================================================
   STRIPE ELEMENTS CHECKOUT — inline card form inside the
   upgrade modal. Three view states (plan, checkout, success);
   visibility toggled via the .hidden class from JS.
   ============================================================ */

.upgrade-checkout-step,
.upgrade-success-step {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  text-align: center;
}

.upgrade-checkout-step.hidden,
.upgrade-success-step.hidden,
#upgrade-plan-step.hidden {
  display: none;
}

.upgrade-checkout-back {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0.3rem 0.5rem;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

.upgrade-checkout-back:hover {
  color: var(--accent);
}

.upgrade-checkout-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0.4rem 0 0;
  color: var(--text-primary);
}

.upgrade-checkout-summary {
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--orange-dim);
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  margin: 0;
}

.upgrade-payment-element-wrap {
  position: relative;
  min-height: 60px;
  text-align: left;
  margin: 0.4rem 0 0.2rem;
}

#upgrade-payment-element {
  /* Stripe Elements injects an iframe here. */
}

.upgrade-payment-loading {
  margin: 0.5rem 0;
  text-align: center;
  font-style: italic;
}

.upgrade-payment-loading.hidden {
  display: none;
}

.upgrade-checkout-error {
  background: rgba(229, 62, 62, 0.1);
  border-left: 3px solid #e53e3e;
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  color: #e53e3e;
  font-size: 0.88rem;
  text-align: left;
  line-height: 1.4;
  margin: 0;
}

/* ============================================================
   24-HOUR EXTENSION UPSELL POPUP
   Distinct from the upgrade modal — focused, time-pressure feel,
   live HH:MM:SS countdown front and center.
   ============================================================ */

.sv-upsell-content {
  max-width: 380px;
  text-align: center;
  padding: 1.5rem 1.25rem 1.4rem;
}

.sv-upsell-emoji {
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 0.4rem;
}

.sv-upsell-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
  color: var(--text-primary);
  line-height: 1.2;
}

.sv-upsell-body {
  margin: 0 0 0.4rem;
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.sv-upsell-countdown {
  font-family: 'Outfit', sans-serif;
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin: 0.25rem 0 0.85rem;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.sv-upsell-pitch {
  margin: 0 0 1.1rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text-primary);
}

.sv-upsell-pitch strong {
  color: var(--accent);
}

.sv-upsell-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sv-upsell-yes {
  width: 100%;
}

.sv-upsell-no {
  align-self: center;
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
}

/* Coupon code section in the checkout step. Collapsed by default — the
   "Have a coupon code?" link expands to show input + Apply. */
.upgrade-coupon {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.2rem 0 0.1rem;
}

.upgrade-coupon-toggle {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0.25rem 0;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

.upgrade-coupon-toggle:hover {
  color: var(--accent);
}

.upgrade-coupon-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

.upgrade-coupon-row.hidden {
  display: none;
}

.upgrade-coupon-input {
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.upgrade-coupon-apply {
  flex: 0 0 auto;
  padding: 0 1rem;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.upgrade-coupon-apply:hover {
  border-color: var(--accent);
}

.upgrade-coupon-apply:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.upgrade-coupon-status {
  font-size: 0.85rem;
  text-align: left;
  line-height: 1.35;
  margin: 0;
}

.upgrade-coupon-status.hidden {
  display: none;
}

.upgrade-coupon-status-ok {
  color: #2f855a;
}

[data-theme="dark"] .upgrade-coupon-status-ok {
  color: #68d391;
}

.upgrade-coupon-status-err {
  color: #e53e3e;
}

.upgrade-checkout-error.hidden {
  display: none;
}

.upgrade-pay-btn {
  width: 100%;
  margin-top: 0.3rem;
}

.upgrade-pay-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.upgrade-checkout-fineprint {
  margin: 0;
  font-size: 0.8rem;
  text-align: center;
  color: var(--text-secondary);
}

/* Success step */
.upgrade-success-step {
  align-items: center;
  text-align: center;
  padding: 0.5rem 0 0.25rem;
}

.upgrade-success-emoji {
  font-size: 2.6rem;
  line-height: 1;
}

.upgrade-success-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0;
  color: var(--text-primary);
}

.upgrade-success-body {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
  max-width: 28rem;
}

.upgrade-success-step .btn-primary {
  width: 100%;
  margin-top: 0.4rem;
}

/* Lifetime Averages — bottom-of-page summary, one pill per vehicle. */
.flog-lifetime {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 2px dashed var(--border-color);
}

.flog-lifetime.hidden {
  display: none;
}

.flog-lifetime-title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.flog-lifetime-hint {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  line-height: 1.4;
}

.flog-lifetime-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.flog-lifetime-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: var(--bg-secondary);
  border: 1px solid var(--bubble-border);
  box-shadow: var(--pill-shadow);
  font-size: 0.82rem;
  max-width: 100%;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.flog-lifetime-pill:hover {
  border-color: var(--orange);
  box-shadow: var(--elev-shadow-hover);
  transform: translateY(-1px);
}

.flog-lifetime-pill:active {
  transform: translateY(0);
  box-shadow: var(--pill-shadow);
}

.flog-lifetime-vehicle {
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flog-lifetime-mpg {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  color: var(--orange);
  flex-shrink: 0;
}

.flog-lifetime-mpg.flog-lifetime-pending {
  color: var(--text-muted);
  font-weight: 500;
  font-style: italic;
}

.flog-lifetime-chevron {
  font-size: 1.05rem;
  color: var(--text-muted);
  flex-shrink: 0;
  line-height: 1;
}

.log-form-banner {
  background: var(--orange-dim);
  border-left: 2px solid var(--orange);
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-family: 'Sora', sans-serif;
  font-style: normal;
  color: var(--white);
  font-size: 0.8rem;
  line-height: 1.4;
}

.log-form-banner.hidden {
  display: none;
}

/* ===== INVOICE IMPORT / VIEWER ===== */

.invoice-loading-content {
  text-align: center;
  padding: 2.5rem 1.5rem;
}

.invoice-loading-content .loading-spinner {
  margin: 0 auto 1rem;
}

.invoice-loading-content .loading-text {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.invoice-viewer-content {
  max-height: 100dvh;
  height: 100dvh;
  border-radius: 0;
  border-top: none;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.invoice-viewer-content .modal-header {
  padding: 1rem 1.25rem;
  border-bottom: 2px solid var(--charcoal-lighter);
  margin-bottom: 0;
}

.invoice-viewer-body {
  flex: 1;
  overflow: auto;
  padding: 1rem;
  background: var(--bg-primary);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.invoice-image {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.invoice-pdf-placeholder {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--white-dim);
}

.invoice-pdf-placeholder .pdf-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: 0.75rem;
  opacity: 0.6;
}

.invoice-pdf-placeholder p {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.invoice-viewer-actions {
  display: flex;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border-top: 2px solid var(--charcoal-lighter);
  background: var(--charcoal);
}

.invoice-viewer-actions .btn-secondary,
.invoice-viewer-actions .btn-primary {
  flex: 1;
}

/* ===== MODAL ===== */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: var(--charcoal);
  border-top: 2px solid var(--orange);
  border-radius: 20px 20px 0 0;
  padding: 1.5rem;
  width: 100%;
  max-width: 480px;
  max-height: 90dvh;
  overflow-y: auto;
  /* Sits above .modal-overlay so clicks on the content don't bubble
     up to the overlay's dismiss handler. */
  position: relative;
  z-index: 2;
}

/* v2.23.18 — Click-outside-to-dismiss layer used by .modal blocks
   that include a <div class="modal-overlay">. Fills the modal's
   viewport behind the .modal-content so clicks on the dim backdrop
   land here. Older modals that don't use a .modal-overlay are
   unaffected — the rule only matches if the element exists. */
.modal-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}

/* v2.23.18 — Beta access gate modal. */
.beta-lock-content {
  max-width: 420px;
  padding: 2rem 1.6rem 1.6rem;
  text-align: center;
}

.beta-lock-icon {
  font-size: 2.6rem;
  margin-bottom: 0.6rem;
  line-height: 1;
}

.beta-lock-content h2 {
  margin: 0 0 0.8rem;
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: 1.4rem;
  color: var(--text-primary, #fff);
}

.beta-lock-lead {
  margin: 0 0 1rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.45;
}

.beta-lock-content p {
  margin: 0 0 0.7rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  line-height: 1.45;
}

.beta-lock-email {
  margin: 0.6rem 0 1rem !important;
  padding: 0.7rem 0.9rem;
  background: rgba(232, 101, 10, 0.10);
  border: 1px solid rgba(232, 101, 10, 0.35);
  border-radius: 8px;
  color: #fff !important;
  font-size: 1rem !important;
  word-break: break-all;
}

.beta-lock-hint {
  font-size: 0.85rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-style: italic;
}

.beta-lock-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1.2rem;
}

.beta-lock-email-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.2rem;
}

/* v2.23.46 — Light-mode contrast fix for the Beta Access Required
   modal. The base rules hardcode white-alpha colors for body text,
   which becomes invisible against the light cream modal background
   when [data-theme="light"] is active. Override to dark text on
   light backgrounds. Dark mode is unaffected. */

[data-theme="light"] .beta-lock-content h2 {
  color: #1a1a1a;
}

[data-theme="light"] .beta-lock-lead {
  color: rgba(0, 0, 0, 0.85);
}

[data-theme="light"] .beta-lock-content p {
  color: rgba(0, 0, 0, 0.75);
}

[data-theme="light"] .beta-lock-email {
  color: #1a1a1a !important;
  background: rgba(232, 101, 10, 0.12);
  border-color: rgba(232, 101, 10, 0.50);
}

[data-theme="light"] .beta-lock-hint {
  color: rgba(0, 0, 0, 0.55) !important;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}

.modal-header h3 {
  font-size: 1.1rem;
}

/* ===== UPGRADE MODAL ===== */

.upgrade-intro {
  margin-bottom: 1.25rem;
}

.plan-options {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 1rem;
}

.plan-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--charcoal-light);
  border: 2px solid var(--charcoal-lighter);
  border-radius: 12px;
  color: var(--white);
  cursor: pointer;
  transition: border-color 0.2s;
  text-align: left;
  position: relative;
}

.plan-card:hover {
  border-color: var(--orange);
}

.plan-card.featured {
  border-color: var(--orange);
}

.plan-card.popular {
  border-color: var(--green);
  background: rgba(60, 179, 113, 0.08);
}

.plan-card.single-best {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.08);
}

.plan-badge-tag {
  position: absolute;
  top: -0.85rem;
  right: 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--orange);
  color: var(--white);
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
  white-space: nowrap;
}

.plan-card.popular .plan-badge-tag {
  background: var(--green);
}

.plan-card.single-best .plan-badge-tag {
  background: var(--gold);
  color: #1a1a1a;
}

.plan-name {
  font-weight: 600;
  font-size: 0.95rem;
  width: 80px;
}

.plan-price {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--orange);
  flex: 1;
}

.plan-period {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--white-dim);
}

.plan-detail {
  font-size: 0.75rem;
  color: var(--white-muted);
}

.upgrade-note {
  font-size: 0.75rem;
}

/* ===== AI ADVISOR ===== */

.advisor-vehicle-context {
  background: var(--charcoal-light);
  border-radius: 8px;
  padding: 0.625rem 0.875rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: var(--white-dim);
}

.advisor-hint {
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

.advisor-sublabel {
  margin: -0.25rem 0 0.5rem;
  line-height: 1.4;
}

/* ===== SHOP FINDER ===== */

.shop-finder-controls {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.25rem 0 0.5rem;
}

.shop-radius-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.shop-radius-label #shop-radius-value {
  color: var(--accent);
  font-weight: 600;
}

.shop-finder-controls input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.shop-location-input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: var(--input-bg);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.shop-location-input:focus {
  outline: none;
  border-color: var(--accent);
}

.shop-finder-status {
  margin: 0.5rem 0;
  line-height: 1.4;
}

/* Collapsible "How to pick a good shop" tips card. Sits between the
   status line and the map. Closed by default — opens on tap. Soft
   orange-tinted card so it reads as actionable guidance, with the 4.6-
   star headline in accent color and supporting tips below. */
.shop-finder-tips {
  background:
    linear-gradient(135deg, rgba(232, 101, 10, 0.14) 0%, rgba(232, 101, 10, 0.03) 100%),
    var(--card-bg);
  border: 1px solid rgba(232, 101, 10, 0.34);
  border-radius: 12px;
  margin: 0.5rem 0 0.75rem;
  overflow: hidden;
}
[data-theme="light"] .shop-finder-tips {
  background:
    linear-gradient(135deg, rgba(232, 101, 10, 0.08) 0%, rgba(232, 101, 10, 0.02) 100%),
    var(--card-bg);
  border-color: rgba(232, 101, 10, 0.24);
}
.shop-finder-tips > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.7rem 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  user-select: none;
}
.shop-finder-tips > summary::-webkit-details-marker { display: none; }
.shop-finder-tips > summary::after {
  content: '\25B8';
  margin-left: auto;
  color: var(--accent);
  font-size: 0.9em;
  transition: transform 0.15s;
}
.shop-finder-tips[open] > summary::after { transform: rotate(90deg); }
.shop-finder-tips-icon {
  font-size: 1.05rem;
  line-height: 1;
}
.shop-finder-tips-headline {
  margin: 0;
  padding: 0 0.95rem 0.1rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--accent);
  line-height: 1.3;
}
.shop-finder-tips-body {
  margin: 0.35rem 0 0.6rem;
  padding: 0 0.95rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-primary);
}
.shop-finder-tips-list {
  margin: 0 0 0.85rem;
  padding: 0 0.95rem 0 1.85rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-primary);
}
.shop-finder-tips-list li { margin-bottom: 0.5rem; }
.shop-finder-tips-list li:last-child { margin-bottom: 0; }

/* Dealership vs. Independent collapsible — reuses .shop-finder-tips for
   the outer card treatment. The inner layout is two stacked columns
   (dealer on top, indie below) each with Pros and Cons sections so the
   tradeoff reads cleanly at any screen width. */
.shop-finder-versus-intro {
  font-style: italic;
  color: var(--text-secondary);
  margin-top: 0.2rem !important;
}
.shop-finder-versus-col {
  padding: 0 0.95rem 0.85rem;
}
.shop-finder-versus-col + .shop-finder-versus-col {
  border-top: 1px solid rgba(232, 101, 10, 0.22);
  padding-top: 0.85rem;
  margin-top: 0.4rem;
}
.shop-finder-versus-title {
  margin: 0 0 0.45rem;
  font-family: 'Outfit', sans-serif;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.shop-finder-versus-label {
  margin: 0.5rem 0 0.3rem;
  font-family: 'Sora', sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.shop-finder-versus-label-pros { color: var(--green); }
.shop-finder-versus-label-cons { color: var(--red); }
/* Inside the versus card, the .shop-finder-tips-list paddings inherit
   from .shop-finder-tips above — but the outer padding moves to the
   column wrapper, so the list itself needs only inner indent. */
.shop-finder-versus .shop-finder-tips-list {
  padding-left: 1.1rem;
  padding-right: 0;
  margin-bottom: 0.2rem;
}

.shop-finder-map {
  width: 100%;
  height: 260px;
  border-radius: 12px;
  background: var(--bg-tertiary);
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.shop-finder-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.shop-list-fallback {
  margin: 0 0 0.25rem;
  color: var(--text-secondary);
}

.shop-card {
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
}

.shop-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.shop-card-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.3;
}

.shop-card-rating {
  font-size: 0.85rem;
  color: var(--accent);
  white-space: nowrap;
  font-weight: 600;
}

.shop-card-reviews {
  color: var(--text-secondary);
  font-weight: 400;
}

.shop-card-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.2rem;
  line-height: 1.35;
}

.shop-card-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.shop-card-actions a {
  font-size: 0.85rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.shop-card-actions a:hover {
  text-decoration: underline;
}

/* ===== CALCULATORS ===== */

.calculators-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.calc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.1rem 0.75rem;
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.10);
}

.calc-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 8px 18px rgba(0, 0, 0, 0.16);
}

.calc-card:active {
  transform: translateY(0);
}

/* "Coming Soon" disabled state for calc cards (e.g. Roadtrip Log).
   Card stays in the grid for discoverability but its content is dimmed
   and a diagonal banner sits across it. The native `disabled` attribute
   on the <button> is what actually blocks the click. */
.calc-card-coming-soon {
  position: relative;
  overflow: hidden;
  cursor: not-allowed;
}

.calc-card-coming-soon:hover,
.calc-card-coming-soon:active {
  border-color: var(--border-color);
  transform: none;
  box-shadow: none;
}

.calc-card-coming-soon .calc-card-icon,
.calc-card-coming-soon .calc-card-label,
.calc-card-coming-soon .calc-card-sub {
  opacity: 0.4;
}

.calc-card-coming-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  background: var(--accent);
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.35rem 1.1rem;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  white-space: nowrap;
}

.calc-card-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.calc-card-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.calc-card-sub {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.25;
}

.calc-card-premium {
  position: relative;
}

.calc-card-badge {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  background: var(--orange-dim);
  color: var(--accent);
  border: 2px solid var(--accent);
  line-height: 1.2;
  white-space: nowrap;
}

.calc-card-badge.hidden {
  display: none;
}

/* MPG modal result + history */
.mpg-result {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-left: 2px solid var(--accent);
  border-radius: 10px;
}

.mpg-result-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}

.mpg-result-meta {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0.25rem 0 0.75rem;
  line-height: 1.4;
}

.mpg-history {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 2px dashed var(--border-color);
}

.mpg-history-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem;
}

.mpg-history-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.35rem 0;
  border-bottom: 2px solid var(--border-color);
  font-size: 0.82rem;
}

.mpg-history-row:last-child {
  border-bottom: none;
}

.mpg-history-date {
  color: var(--text-secondary);
}

.mpg-history-mpg {
  color: var(--accent);
  font-weight: 600;
  text-align: right;
}

.mpg-history-detail {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

/* "How Much Car Can I Afford?" — forward auto-loan result panel:
   monthly payment as a brand-orange headline card, then a five-row
   breakdown table (loan amount, sales tax, total of loan, total interest
   paid, total cost of vehicle). */
.aff-result {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.aff-result-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(232, 101, 10, 0.22) 0%, rgba(232, 101, 10, 0.06) 100%),
    var(--card-bg);
  border: 1.5px solid rgba(232, 101, 10, 0.45);
  box-shadow:
    0 2px 8px rgba(232, 101, 10, 0.18),
    0 8px 22px rgba(232, 101, 10, 0.10);
}
[data-theme="light"] .aff-result-headline {
  background:
    linear-gradient(135deg, rgba(232, 101, 10, 0.14) 0%, rgba(232, 101, 10, 0.03) 100%),
    var(--card-bg);
  border-color: rgba(232, 101, 10, 0.34);
  box-shadow:
    0 2px 8px rgba(232, 101, 10, 0.10),
    0 8px 22px rgba(232, 101, 10, 0.06);
}
.aff-result-headline-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.aff-result-headline-value {
  font-family: 'Outfit', sans-serif;
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.aff-breakdown {
  margin: 0;
  padding: 0.4rem 0.95rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}
.aff-breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.9rem;
}
.aff-breakdown-row:last-child { border-bottom: none; }
.aff-breakdown-row dt {
  color: var(--text-primary);
  font-weight: 500;
  margin: 0;
}
.aff-breakdown-row dd {
  margin: 0;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.aff-breakdown-row-total {
  border-top: 1px solid var(--accent);
  padding-top: 0.65rem;
  margin-top: 0.1rem;
}
.aff-breakdown-row-total dt {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
}
.aff-breakdown-row-total dd {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--accent);
}

.aff-result-note {
  margin: 0.4rem 0 0;
  line-height: 1.5;
}

/* Repair vs Replace — two stat rows + a verdict callout */
.rr-result {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rr-result-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 10px;
}

.rr-result-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.rr-result-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.rr-verdict {
  margin-top: 0.25rem;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  border: 2px solid var(--border-color);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-primary);
}

.rr-verdict.rr-verdict-repair {
  border-left: 2px solid #22c55e;
  background: rgba(34, 197, 94, 0.08);
}

.rr-verdict.rr-verdict-borderline {
  border-left: 2px solid #f59e0b;
  background: rgba(245, 158, 11, 0.08);
}

.rr-verdict.rr-verdict-replace {
  border-left: 2px solid #ea580c;
  background: rgba(234, 88, 12, 0.08);
}

/* ===== Fix or Replace wizard ===== */

/* Hide number-input spinner controls — they were covering the right edge
   of dollar-amount inputs in the Fix or Replace wizard. */
.rr-step input[type="number"]::-webkit-outer-spin-button,
.rr-step input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.rr-step input[type="number"] {
  -moz-appearance: textfield;
}

/* v2.23.31 — Calculator modals render as centered popups rather than
   the bottom-sheet treatment used by the base .modal rule. Bottom
   sheets work for short notices and confirmations; they crowd the
   bottom edge on phones when the content is a multi-step wizard.
   Centered gives the wizard breathing room top and bottom on iPhone.
   Applies to all four calculators (Repair vs Replace, MPG,
   Affordability, Refinance) since they share .calc-modal. Other
   modals (toasts, beta lock, etc.) are unaffected. */

.modal.calc-modal {
  align-items: center;
  padding: 1rem;
}

.modal.calc-modal .modal-content {
  /* Replace bottom-sheet styling (top-only radius + top-only border)
     with a full popup treatment: rounded all sides, accent border
     all around, slightly tighter max-height so the popup sits
     comfortably away from the screen edges and the home indicator. */
  border-radius: 20px;
  border: 2px solid var(--orange);
  max-height: min(85dvh, 720px);
}

.rr-modal-content {
  max-width: 560px;
}

.rr-progress {
  margin-bottom: 1.1rem;
}

.rr-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}

.rr-progress-track {
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: 2px;
  overflow: hidden;
}

.rr-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 2px;
  transition: width 0.4s ease;
}

.rr-step {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.rr-step.hidden {
  display: none;
}

.rr-step-q {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  color: var(--text-primary);
}

.rr-step-sub {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
}

.rr-tip {
  margin: 0.4rem 0 0;
  padding: 0.7rem 0.85rem;
  background: var(--bg-tertiary);
  border-left: 2px solid var(--accent);
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-primary);
}

.rr-options {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.rr-options.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.rr-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-primary);
  font-family: 'Sora', sans-serif;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.rr-option:hover {
  border-color: var(--accent);
  background: var(--orange-dim);
}

.rr-option:active {
  transform: scale(0.99);
}

.rr-option.selected {
  border-color: var(--accent);
  background: var(--orange-dim);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.rr-option-title {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.25;
}

.rr-option-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

.rr-option-wide {
  grid-column: 1 / -1;
}

.rr-conditional {
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  border-top: 2px dashed var(--border-light);
}

.rr-blurb-good {
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 2px solid rgba(60, 179, 113, 0.35);
  background: rgba(60, 179, 113, 0.1);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-primary);
}

.rr-blurb-good.hidden,
.rr-conditional.hidden {
  display: none;
}

.rr-nav {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.rr-nav .btn-secondary,
.rr-nav .btn-primary {
  flex: 1;
}

.rr-nav .btn-secondary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Result step */
.rr-verdict-banner {
  padding: 1rem 1rem 1.1rem;
  border-radius: 14px;
  border: 2px solid var(--border-color);
  background: var(--bg-tertiary);
  text-align: center;
}

.rr-verdict-emoji {
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 0.3rem;
}

.rr-verdict-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: 0.25rem;
}

.rr-verdict-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

/* v2.23.15 — Advisor handoff CTA below the verdict copy. Visually
   separated from the verdict by a subtle top border so it reads as
   a follow-up action rather than part of the assessment. */
.rr-verdict-advisor-block {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}

.rr-verdict-advisor-prompt {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.92rem;
  font-style: italic;
  text-align: center;
}

.rr-verdict-advisor-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--brand-orange, #e8650a);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 0.85rem 1.6rem;
  font-family: var(--font-display, 'Sora', sans-serif);
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 10px rgba(232, 101, 10, 0.25);
}

.rr-verdict-advisor-cta:hover {
  background: #d65906;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(232, 101, 10, 0.35);
}

.rr-verdict-advisor-cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(232, 101, 10, 0.25);
}

.rr-verdict-sub {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* v2.23.34 — Reality Check panel on RvR verdict page. Surfaces the
   2026 used-car market math when the consumer's monthly budget
   can't realistically support a meaningful replacement. Visible
   only when verdict is gray/replace AND budget < $600/mo. */
.rr-reality-check {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem 1.1rem;
  background: linear-gradient(180deg,
    rgba(232, 101, 10, 0.10) 0%,
    rgba(232, 101, 10, 0.03) 100%);
  border: 1.5px solid rgba(232, 101, 10, 0.45);
  border-radius: 12px;
  display: block;
}

.rr-reality-check.hidden {
  display: none;
}

.rr-reality-check-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.7rem;
}

.rr-reality-check-body p {
  margin: 0 0 0.55rem;
  font-size: 0.92rem;
  line-height: 1.5;
}

.rr-reality-check-body p:last-child {
  margin-bottom: 0;
}

.rr-reality-check-fig {
  font-weight: 700;
  color: var(--text-primary);
}

/* v2.23.35 — RvR considerations: dynamic pros/cons surfaced on the
   verdict page. Two columns on tablet+, stacked on phones. */
.rr-considerations {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin-top: 1.25rem;
}

@media (min-width: 600px) {
  .rr-considerations {
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
  }
}

.rr-considerations.hidden { display: none; }

.rr-considerations-col {
  padding: 0.95rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.rr-considerations-primary {
  border-color: rgba(232, 101, 10, 0.40);
  background: linear-gradient(180deg, rgba(232, 101, 10, 0.06), rgba(232, 101, 10, 0.01));
}

[data-theme="light"] .rr-considerations-col {
  background: rgba(0, 0, 0, 0.025);
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .rr-considerations-primary {
  border-color: rgba(232, 101, 10, 0.50);
  background: linear-gradient(180deg, rgba(232, 101, 10, 0.07), rgba(232, 101, 10, 0.015));
}

.rr-considerations-title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 0.65rem;
}

.rr-considerations-primary .rr-considerations-title {
  color: var(--accent);
}

.rr-considerations-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rr-considerations-list li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.25rem;
  font-size: 0.9rem;
  line-height: 1.45;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.rr-considerations-list li:last-child { border-bottom: none; }

.rr-considerations-list li::before {
  content: '•';
  position: absolute;
  left: 0.3rem;
  top: 0.45rem;
  color: var(--text-secondary);
  font-weight: 700;
}

.rr-considerations-primary .rr-considerations-list li::before {
  color: var(--accent);
}

[data-theme="light"] .rr-considerations-list li {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

.rr-mc-section {
  margin-top: 1rem;
}

.rr-mc-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}

.rr-mc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.rr-mc-card {
  padding: 0.65rem 0.7rem;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  text-align: center;
}

.rr-mc-card.rr-mc-good { border-left: 2px solid #22c55e; }
.rr-mc-card.rr-mc-mid  { border-left: 2px solid #f59e0b; }
.rr-mc-card.rr-mc-bad  { border-left: 2px solid #ea580c; }

.rr-mc-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rr-mc-value {
  margin: 0.25rem 0 0.15rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.rr-mc-foot {
  font-size: 0.7rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

.rr-mc-summary {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-primary);
}

.rr-insights {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rr-insights:empty {
  display: none;
}

.rr-result-actions {
  margin-top: 1rem;
}

@media (max-width: 480px) {
  .rr-mc-grid {
    grid-template-columns: 1fr;
  }
  .rr-options.two-col {
    grid-template-columns: 1fr;
  }
}

/* Refinance Savings — side-by-side current vs new + savings callout */
.rf-result {
  margin-top: 1rem;
}

.rf-result-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.rf-result-col {
  padding: 0.7rem 0.85rem;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 10px;
}

.rf-result-col-new {
  border-left: 2px solid var(--accent);
  background: rgba(232, 101, 10, 0.06);
}

.rf-result-col-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}

.rf-result-col-pay {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.rf-result-col-new .rf-result-col-pay {
  color: var(--accent);
}

.rf-result-col-total {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 0.2rem;
}

.rf-savings {
  margin-top: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  border: 2px solid var(--border-color);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-primary);
}

.rf-savings.rf-savings-good {
  border-left: 2px solid #22c55e;
  background: rgba(34, 197, 94, 0.08);
}

.rf-savings.rf-savings-mixed {
  border-left: 2px solid #f59e0b;
  background: rgba(245, 158, 11, 0.08);
}

.rf-savings.rf-savings-bad {
  border-left: 2px solid #ea580c;
  background: rgba(234, 88, 12, 0.08);
}

/* CTA placement under the calculators grid (spacing only — visual style
   reuses .dashboard-card-upgrade from the dashboard). */
.calculators-upgrade-cta {
  margin-top: 1.25rem;
  width: 100%;
}

/* ===== VIN CHECK ===== */

.vincheck-input-card {
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.vincheck-benefits {
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
}

.vincheck-benefits-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.6rem;
}

.vincheck-benefits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.vincheck-benefits-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.45;
}

.vincheck-benefits-list strong {
  color: var(--text-primary);
  font-weight: 600;
}

.vincheck-benefit-icon {
  flex-shrink: 0;
  width: 1.4rem;
  font-size: 1rem;
  text-align: center;
  line-height: 1.45;
}

.vincheck-subhead {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.4rem;
}

.vincheck-helper {
  margin: 0 0 0.85rem;
  line-height: 1.4;
}

.vincheck-input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--input-bg);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: 'Sora', monospace, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vincheck-input:focus {
  outline: none;
  border-color: var(--accent);
}

.vincheck-counter {
  text-align: right;
  margin: 0.35rem 0 0.75rem;
}

.vincheck-garage-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0 0 0.85rem;
}

.vincheck-garage-label {
  margin: 0;
}

.vincheck-garage-select {
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: var(--input-bg);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
}

.vincheck-garage-select:focus {
  outline: none;
  border-color: var(--accent);
}

.vincheck-hint-toggle {
  width: 100%;
  margin-top: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.85rem;
  padding: 0.4rem 0;
  cursor: pointer;
}

.vincheck-hint-content {
  margin-top: 0.4rem;
  padding: 0.6rem 0.85rem;
  background: var(--bg-tertiary);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.vincheck-hint-content ul {
  margin: 0.35rem 0 0.25rem;
  padding-left: 1.15rem;
}

.vincheck-hint-content li {
  margin: 0.15rem 0;
}

.vincheck-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem;
}

.vincheck-loading .loading-text {
  margin-top: 0.75rem;
  color: var(--text-secondary);
}

.vincheck-error {
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.vincheck-error .error-text {
  margin: 0 0 0.75rem;
  color: var(--text-primary);
}

.vincheck-results {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.vincheck-vehicle-card {
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 0.85rem 1rem;
}

.vincheck-vehicle-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.vincheck-vehicle-match {
  font-size: 0.82rem;
  color: #22c55e;
}

.vincheck-recall-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.vincheck-recall-alert {
  display: flex;
  flex-direction: column;
}

.vincheck-alert-banner {
  font-weight: 700;
  color: #ea580c;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.vincheck-recall-card {
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-left: 2px solid #ea580c;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.vincheck-inv-card {
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-left: 2px solid #f59e0b;
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.vincheck-recall-id {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
}

.vincheck-recall-component {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.vincheck-recall-body {
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 0.4rem;
}

.vincheck-risk-label {
  font-weight: 700;
  color: #ea580c;
}

.vincheck-fix-label {
  font-weight: 700;
  color: #22c55e;
}

.vincheck-recall-date {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.vincheck-recall-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.vincheck-recall-link:hover {
  text-decoration: underline;
}

.vincheck-recall-note {
  margin-top: 0.75rem;
}

.vincheck-no-recall {
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-left: 2px solid #22c55e;
  border-radius: 12px;
  padding: 0.85rem 1rem;
}

.vincheck-no-recall-banner {
  color: #22c55e;
  font-weight: 700;
  font-size: 0.95rem;
}

.vincheck-investigation-section {
  background: transparent;
}

.vincheck-inv-header {
  font-weight: 700;
  color: #f59e0b;
  margin-bottom: 0.25rem;
}

.vincheck-warranty-section {
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 0.4rem 0.85rem;
}

.vincheck-warranty-btn {
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  padding: 0.55rem 0;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.vincheck-warranty-content {
  padding: 0.4rem 0 0.6rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.vincheck-warranty-content p {
  margin: 0.4rem 0;
}

.vincheck-warranty-content ul {
  margin: 0.35rem 0;
  padding-left: 1.15rem;
}

.vincheck-warranty-content a {
  color: var(--accent);
  text-decoration: none;
}

.vincheck-input-header {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
  margin-bottom: 0.85rem;
}

.vincheck-input-header-text {
  flex: 1 1 auto;
  min-width: 0;
}

.vincheck-input-header-text .vincheck-subhead,
.vincheck-input-header-text .vincheck-helper {
  margin-bottom: 0;
}

.vincheck-input-header-text .vincheck-subhead {
  margin-bottom: 0.3rem;
}

.vincheck-alerts-cta {
  flex: 0 0 auto;
  width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 0.5rem 0.75rem;
  background: var(--orange);
  color: var(--white);
  border: none;
  border-radius: 14px;
  font-family: 'Sora', sans-serif;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(232, 101, 10, 0.22);
}

.vincheck-alerts-cta:hover {
  background: var(--orange-hover);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.10), 0 6px 16px rgba(232, 101, 10, 0.28);
}

.vincheck-alerts-cta:active {
  transform: scale(0.98);
}

.vincheck-alerts-cta.hidden {
  display: none;
}

.vincheck-alerts-cta-icon {
  font-size: 1.35rem;
  line-height: 1;
}

.vincheck-alerts-cta-label {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.005em;
}

.vincheck-alerts-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: var(--white);
  color: var(--orange);
  line-height: 1;
  white-space: nowrap;
  border: 1px solid var(--bubble-border);
  box-shadow: var(--pill-shadow);
}

.vincheck-notify-prompt {
  margin: 0;
}

.vincheck-notify-card {
  position: relative;
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

.vincheck-notify-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  background: var(--orange-dim);
  color: var(--accent);
  border: 2px solid var(--accent);
  line-height: 1.2;
  white-space: nowrap;
}

.vincheck-notify-icon {
  font-size: 1.4rem;
}

.vincheck-notify-heading {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.95rem;
}

.vincheck-notify-body {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.vincheck-notify-enabled {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(34, 197, 94, 0.08);
  border: 2px solid #22c55e;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  color: #22c55e;
  font-size: 0.85rem;
  font-weight: 600;
}

.btn-text-small {
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
}

.btn-text-small:hover {
  text-decoration: underline;
}

.vincheck-add-garage {
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

.vincheck-add-garage p {
  margin: 0;
  color: var(--text-primary);
  font-size: 0.9rem;
}

.context-toggles {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 1.25rem;
}

.context-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--white-dim);
  line-height: 1.4;
}

.context-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  background: var(--charcoal-light);
  border: 2px solid var(--charcoal-lighter);
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  margin-top: 1px;
  transition: all 0.2s;
}

.context-toggle input[type="checkbox"]:checked {
  background: var(--orange);
  border-color: var(--orange);
}

.context-toggle input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
}

/* Conversation view */

.advisor-conversation {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--header-height) - var(--nav-height) - 2rem);
}

.conversation-thread {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-bottom: 1rem;
}

.chat-bubble {
  border-radius: 14px;
  padding: 0.875rem 1rem;
  max-width: 92%;
}

.chat-bubble-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.375rem;
}

.chat-user {
  background: var(--charcoal-lighter);
  align-self: flex-end;
}

.chat-user .chat-bubble-label {
  color: var(--white-muted);
}

.chat-user .chat-bubble-text {
  font-size: 0.9rem;
  color: var(--white-dim);
  line-height: 1.5;
}

.chat-assistant {
  background: var(--charcoal-light);
  border: 2px solid var(--charcoal-lighter);
  align-self: flex-start;
}

.chat-assistant .chat-bubble-label {
  color: var(--orange);
}

.chat-assistant .chat-bubble-text {
  font-size: 0.9rem;
  color: var(--white-dim);
  line-height: 1.6;
}

.chat-assistant .chat-bubble-text p {
  margin-bottom: 0.5rem;
}

.chat-assistant .chat-bubble-text p:last-child {
  margin-bottom: 0;
}

/* v2.23.49 — Markdown-emitted headers + horizontal rules inside
   advisor responses. Scaled DOWN from default browser sizing
   because they appear inside a chat bubble where giant headers
   would feel jarring. */
.chat-bubble-text .advisor-md-h {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin: 0.85rem 0 0.35rem;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}

.chat-bubble-text h3.advisor-md-h { font-size: 1.05rem; }
.chat-bubble-text h4.advisor-md-h { font-size: 0.95rem; }

.chat-bubble-text .advisor-md-h:first-child {
  margin-top: 0;
}

.chat-bubble-text .advisor-md-hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  margin: 0.85rem 0;
}

[data-theme="light"] .chat-bubble-text .advisor-md-hr {
  border-top-color: rgba(0, 0, 0, 0.10);
}

/* Verdict chip — full-width, filled, white-text banner that sits at the
   TOP of an assistant bubble when the advisor has emitted a [VERDICT:]
   token. Gives the at-the-counter consumer a one-glance recommendation
   before the structured analysis. Color carries most of the meaning;
   the uppercase label confirms it. Yellow uses dark text because white
   on yellow fails contrast. Blue is inline (no app-wide blue brand
   variable exists yet) — used only for the INVESTIGATE state which
   doesn't map to an existing semantic color. */
.advisor-verdict-chip {
  display: block;
  width: 100%;
  margin: 0 0 0.7rem;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
  line-height: 1.2;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.advisor-verdict-chip--approve { background: var(--green); }
.advisor-verdict-chip--quote {
  background: var(--yellow);
  color: #1a1a1a;
}
.advisor-verdict-chip--decline { background: var(--red); }
.advisor-verdict-chip--investigate { background: #3b82f6; }

/* Thinking-status placeholder shown inside an assistant bubble while the
   model's response is buffered server-side. Replaces the prior token-by-
   token streaming UX with a rotating Claude.ai-style summary of what the
   advisor is doing ("Looking up P0420 in our database", "Cross-checking
   against known patterns", etc.). Status text fades briefly when it
   updates to communicate "new step arrived." */
/* Value-gap upsell card — appears below a free-tier assistant response
   when the consumer's question would clearly benefit from personalized
   analysis. Bullets are AI-generated from the user's actual question so
   they're specific (e.g. "Whether $1,800 is fair for cat replacement on
   a 2018 Civic in your area"). Tapping the CTA opens the standard
   premium-promo modal. */
.value-gap-card {
  margin: 1rem 0 0;
  padding: 1.1rem 1.25rem 1.15rem;
  background: linear-gradient(135deg, rgba(232, 101, 10, 0.10) 0%, rgba(232, 101, 10, 0.04) 100%);
  border: 1px solid rgba(232, 101, 10, 0.45);
  border-left: 4px solid var(--orange);
  border-radius: 12px;
  animation: value-gap-fade-in 0.45s ease-out;
}

@keyframes value-gap-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.value-gap-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.value-gap-card-icon {
  font-size: 1.05rem;
  color: var(--orange);
}

.value-gap-card-title {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--white);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.value-gap-card-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 0.95rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.value-gap-card-bullets li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--white-dim);
}

.value-gap-card-bullets li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--orange);
  font-weight: 700;
  font-size: 0.95rem;
}

.value-gap-card-cta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.78rem 1rem;
  background: var(--orange);
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 6px rgba(232, 101, 10, 0.3);
}

.value-gap-card-cta:hover {
  background: #d65a09;
  box-shadow: 0 4px 10px rgba(232, 101, 10, 0.4);
}

.value-gap-card-cta:active {
  transform: scale(0.98);
}

.value-gap-card-cta-label {
  letter-spacing: -0.01em;
}

.value-gap-card-cta-price {
  font-weight: 600;
  opacity: 0.9;
  font-size: 0.84rem;
  padding-left: 0.4rem;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
}

[data-theme="light"] .value-gap-card {
  background: linear-gradient(135deg, rgba(232, 101, 10, 0.12) 0%, rgba(232, 101, 10, 0.05) 100%);
  border-color: rgba(232, 101, 10, 0.55);
}

[data-theme="light"] .value-gap-card-title {
  color: #1a1a1a;
}

[data-theme="light"] .value-gap-card-bullets li {
  color: #2a2a2a;
}

.chat-bubble-thinking .chat-bubble-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 2px 0;
}

/* Loading spinner shown next to the rotating status text — reinforces that
   the system is actively working on the user's question. Orange leading
   edge spins on a neutral track, theme-agnostic via rgba border. */
.chat-bubble-status-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(128, 128, 128, 0.3);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: chat-bubble-status-spin 0.85s linear infinite;
  flex-shrink: 0;
}

@keyframes chat-bubble-status-spin {
  to { transform: rotate(360deg); }
}

.chat-bubble-status-text {
  font-family: 'Sora', sans-serif;
  font-style: italic;
  font-size: 0.88rem;
  color: var(--white-dim);
  line-height: 1.35;
  transition: opacity 0.18s ease;
}

.chat-bubble-status-chevron {
  color: var(--orange);
  font-weight: 700;
  font-size: 1rem;
  opacity: 0.7;
  flex-shrink: 0;
}

.advisor-reply-box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 2px solid var(--charcoal-lighter);
}

.advisor-reply-box textarea {
  resize: none;
  width: 100%;
}

.advisor-reply-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

.advisor-reply-actions .btn-primary {
  width: auto;
  padding: 0.75rem 1.25rem;
  flex-shrink: 0;
}

/* ===== ADVISOR ATTACHMENTS ===== */

.advisor-input-actions {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 0.75rem;
}

.btn-attach {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--card-bg);
  border: 2px dashed var(--border-color);
  color: var(--text-secondary);
  font-family: 'Sora', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.5rem 0.85rem;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.btn-attach:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-attach-icon {
  font-size: 1rem;
  line-height: 1;
}

.btn-attach-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  width: 100%;
  padding: 1rem 1rem;
  border: 2px dashed var(--border-color);
  border-radius: 14px;
  text-align: center;
}

/* Premium-feature indicator on the attach-photo dropzone. Mirrors the
   header upgrade pill's visual treatment (solid brand-green + white
   Sora 800 + soft green glow) so users see a consistent "green pill =
   premium" cue across the app. Scaled down to fit the corner of the
   dropzone without overpowering the rest of the button. */
.btn-attach-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-family: 'Sora', sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  border: none;
  line-height: 1;
  white-space: nowrap;
  box-shadow:
    0 2px 5px rgba(60, 179, 113, 0.30),
    0 0 10px 1px rgba(60, 179, 113, 0.22);
}

.btn-attach-badge.hidden {
  display: none;
}

.btn-attach-dropzone:hover {
  border-color: var(--accent);
  background: var(--orange-dim);
  color: var(--accent);
}

.btn-attach-icon-large {
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 0.12rem;
}

.btn-attach-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.btn-attach-dropzone:hover .btn-attach-label {
  color: var(--accent);
}

.btn-attach-sub {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.78rem;
  color: var(--white-muted);
}

.advisor-flow-block {
  margin: 1rem 0 0.75rem;
}

.advisor-flow-heading {
  margin: 0 0 0.5rem;
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: center;
}

.advisor-flow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  padding: 1rem 0.75rem;
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 12px;
}

.advisor-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
}

.advisor-flow-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange-dim);
  color: var(--accent);
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.advisor-flow-label {
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

.advisor-flow-desc {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.35;
  text-wrap: balance;
}

.advisor-flow-arrow {
  font-size: 0.95rem;
  color: var(--white-muted);
  flex-shrink: 0;
  margin-top: 12px;
}

.advisor-flow-footnote {
  margin: 0.6rem 0 0;
  text-align: center;
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.78rem;
  color: var(--white-muted);
  line-height: 1.4;
}

/* Collapsible "What an in-person 2nd opinion really costs" card on the
   advisor entry screen. Closed by default; expanded reveals a line-item
   cost breakdown of the alternative (driving to another shop) plus a
   2-column comparison block contrasting that with Auto Advisor. Orange-
   tinted treatment matches the rest of the dashboard's premium-adjacent
   surfaces (quick-ask card, popup banner, shop-finder tips). */
.advisor-cost-card {
  margin: 1rem 0 0.5rem;
  background:
    linear-gradient(135deg, rgba(232, 101, 10, 0.14) 0%, rgba(232, 101, 10, 0.03) 100%),
    var(--card-bg);
  border: 1px solid rgba(232, 101, 10, 0.34);
  border-radius: 12px;
  overflow: hidden;
}
[data-theme="light"] .advisor-cost-card {
  background:
    linear-gradient(135deg, rgba(232, 101, 10, 0.08) 0%, rgba(232, 101, 10, 0.02) 100%),
    var(--card-bg);
  border-color: rgba(232, 101, 10, 0.24);
}
.advisor-cost-card > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.7rem 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  user-select: none;
}
.advisor-cost-card > summary::-webkit-details-marker { display: none; }
.advisor-cost-card > summary::after {
  content: '\25B8';
  margin-left: auto;
  color: var(--accent);
  font-size: 0.9em;
  transition: transform 0.15s;
}
.advisor-cost-card[open] > summary::after { transform: rotate(90deg); }
.advisor-cost-icon { font-size: 1.05rem; line-height: 1; }
.advisor-cost-intro {
  margin: 0 0 0.65rem;
  padding: 0 0.95rem;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-primary);
}
.advisor-cost-grid {
  margin: 0 0.95rem 0.85rem;
  border-top: 1px solid rgba(232, 101, 10, 0.20);
  border-bottom: 1px solid rgba(232, 101, 10, 0.20);
}
.advisor-cost-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(232, 101, 10, 0.10);
  font-size: 0.85rem;
  line-height: 1.35;
}
.advisor-cost-row:last-child { border-bottom: none; }
.advisor-cost-item {
  flex: 1;
  color: var(--text-primary);
}
.advisor-cost-amount {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--accent);
  white-space: nowrap;
}
.advisor-cost-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin: 0 0.95rem 0.85rem;
}
.advisor-cost-compare-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.6rem 0.4rem 0.65rem;
  border-radius: 10px;
  text-align: center;
}
.advisor-cost-compare-other {
  background: rgba(232, 101, 10, 0.10);
  border: 1px solid rgba(232, 101, 10, 0.25);
}
.advisor-cost-compare-app {
  background: linear-gradient(135deg, rgba(60, 179, 113, 0.22) 0%, rgba(60, 179, 113, 0.06) 100%);
  border: 1px solid rgba(60, 179, 113, 0.45);
  box-shadow:
    0 0 12px 1px rgba(60, 179, 113, 0.20),
    0 0 24px 4px rgba(60, 179, 113, 0.10);
}
[data-theme="light"] .advisor-cost-compare-app {
  background: linear-gradient(135deg, rgba(60, 179, 113, 0.14) 0%, rgba(60, 179, 113, 0.03) 100%);
  border-color: rgba(60, 179, 113, 0.34);
  box-shadow:
    0 0 12px 1px rgba(60, 179, 113, 0.12),
    0 0 24px 4px rgba(60, 179, 113, 0.06);
}
.advisor-cost-compare-label {
  font-family: 'Sora', sans-serif;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.advisor-cost-compare-other .advisor-cost-compare-amount {
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.advisor-cost-compare-app .advisor-cost-compare-amount {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--green);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.advisor-cost-footnote {
  margin: 0;
  padding: 0 0.95rem 0.9rem;
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-secondary);
  text-align: center;
}

.advisor-reassurance {
  margin: 0 0 1.25rem;
  text-align: center;
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.8rem;
  color: var(--white-muted);
  line-height: 1.5;
}

.btn-attach-compact {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  border-radius: 10px;
  margin-right: auto;
}

.advisor-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.advisor-attachments.hidden {
  display: none;
}

.advisor-attachment {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 999px;
  padding: 0.3rem 0.3rem 0.3rem 0.6rem;
  font-size: 0.8rem;
  color: var(--text-primary);
  max-width: 100%;
}

.advisor-attachment-icon {
  font-size: 0.95rem;
  line-height: 1;
  flex-shrink: 0;
}

.advisor-attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

.advisor-attachment-remove {
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.advisor-attachment-remove:hover {
  background: var(--border-color);
  color: var(--text-primary);
}

.chat-bubble-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.chat-bubble-attachment {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
}

.chat-user .chat-bubble-attachment {
  background: rgba(0, 0, 0, 0.2);
}

/* Locked / Paywall */

.advisor-locked {
  position: relative;
}

.locked-preview {
  position: relative;
}

.locked-sample {
  padding: 1rem;
  background: var(--charcoal-light);
  border-radius: 12px;
}

.locked-sample h4 {
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  color: var(--white-dim);
}

.blurred-content {
  filter: blur(4px);
  user-select: none;
  pointer-events: none;
}

.blurred-content p {
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
  color: var(--white-dim);
}

.locked-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: var(--card-bg);
  padding: 2rem;
  border-radius: 16px;
  border: 2px solid var(--charcoal-lighter);
  width: 90%;
  max-width: 320px;
}

.lock-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.locked-overlay h3 {
  font-size: 1.1rem;
  margin-bottom: 0.375rem;
}

.locked-overlay p {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--white-dim);
  margin-bottom: 1rem;
}

.locked-overlay .btn-primary {
  width: auto;
  padding: 0.75rem 1.5rem;
}

/* Loading */

.advisor-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1rem;
  gap: 0.75rem;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 2px solid var(--charcoal-lighter);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  font-size: 1rem;
  font-weight: 500;
}

.loading-dots::after {
  content: '';
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}

/* Error */

.advisor-error {
  text-align: center;
  padding: 2rem 1rem;
}

.error-text {
  color: var(--red);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

/* ===== RESULTS ===== */

.saved-match-banner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.25rem;
  background: var(--orange-dim);
  border: 2px dashed var(--orange);
  border-radius: 12px;
}

.saved-match-banner-text {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-primary);
}

.saved-match-fresh {
  align-self: flex-start;
  background: transparent;
  border: 2px solid var(--orange);
  color: var(--orange);
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-family: 'Sora', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.saved-match-fresh:hover {
  background: var(--orange);
  color: #fff;
}

/* Free-tier preview response — no structured sections, just the body text. */
.result-preview-section {
  padding: 1.125rem;
}

.result-preview-text {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-primary);
  white-space: pre-wrap;
}

.result-preview-text p {
  margin: 0 0 0.75rem 0;
}

.result-preview-text p:last-child {
  margin-bottom: 0;
}

.results-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.result-section {
  background: var(--charcoal-light);
  border: 2px solid var(--charcoal-lighter);
  border-radius: 14px;
  padding: 1.125rem;
}

details.result-section > summary.result-section-label {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

details.result-section > summary.result-section-label::-webkit-details-marker {
  display: none;
}

details.result-section[open] > summary.result-section-label {
  margin-bottom: 0.75rem;
}

.result-section-label {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--orange);
}

.result-section-label-text {
  flex: 1;
  min-width: 0;
}

/* Sub-collapsibles used inside "Everything Explained" */
.result-subsections {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.result-subsection {
  background: var(--charcoal);
  border: 2px solid var(--charcoal-lighter);
  border-radius: 10px;
  padding: 0.85rem 1rem;
}

details.result-subsection > summary.result-subsection-label {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--white);
}

details.result-subsection > summary.result-subsection-label::-webkit-details-marker {
  display: none;
}

details.result-subsection[open] > summary.result-subsection-label {
  margin-bottom: 0.6rem;
}

.result-subsection-body {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--white-dim);
}

.result-subsection-body p { margin-bottom: 0.5rem; }
.result-subsection-body p:last-child { margin-bottom: 0; }
.result-subsection-body ul { margin: 0.25rem 0 0.5rem 1.25rem; padding: 0; }
.result-subsection-body ul li { margin-bottom: 0.375rem; line-height: 1.6; }

.result-section-body {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--white-dim);
}

.result-section-body p {
  margin-bottom: 0.5rem;
}

.result-section-body p:last-child {
  margin-bottom: 0;
}

.result-section-body ul {
  margin: 0.25rem 0 0.5rem 1.25rem;
  padding: 0;
}

.result-section-body ul li {
  margin-bottom: 0.375rem;
  line-height: 1.6;
}

.result-section.verdict {
  border-color: var(--orange);
  background: linear-gradient(135deg, rgba(232, 101, 10, 0.08), var(--charcoal-light));
}

.result-section.verdict .result-section-body {
  font-size: 1rem;
  font-weight: 500;
  color: var(--white);
}

/* Question cards */

.question-cards {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.question-card {
  background: var(--charcoal);
  border: 2px solid var(--charcoal-lighter);
  border-radius: 10px;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--white);
}

details.question-card,
details.verdict-card {
  padding: 0;
}

details.question-card > summary,
details.verdict-card > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.875rem 1rem;
  user-select: none;
}

details.question-card > summary::-webkit-details-marker,
details.verdict-card > summary::-webkit-details-marker {
  display: none;
}

.question-card-title,
.verdict-card-title {
  font-weight: 500;
  margin-bottom: 0;
}

.question-card-title-text,
.verdict-card-title-text {
  flex: 1;
  min-width: 0;
}

.collapse-chevron {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--white-muted);
  transition: transform 0.2s;
  margin-top: 0.2rem;
}

details[open] > summary .collapse-chevron {
  transform: rotate(180deg);
}

.question-card-details {
  margin: 0;
  padding: 0.75rem 1rem 0.9rem;
  border-top: 2px solid var(--charcoal-lighter);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.verdict-cards {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.verdict-card {
  background: var(--charcoal);
  border: 2px solid var(--charcoal-lighter);
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--white);
}

.verdict-card.verdict-card-simple {
  padding: 0.875rem 1rem;
}

.verdict-card-body {
  padding: 0.75rem 1rem 0.9rem;
  border-top: 2px solid var(--charcoal-lighter);
  color: var(--white-dim);
  font-size: 0.875rem;
  line-height: 1.6;
}

.verdict-card-body p { margin-bottom: 0.5rem; }
.verdict-card-body p:last-child { margin-bottom: 0; }

.qa-good, .qa-bad, .qa-detail {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--white-dim);
}

.qa-good {
  color: #6fcf97;
}

.qa-bad {
  color: #e07070;
}

.question-card-number {
  color: var(--orange);
  font-weight: 700;
  margin-right: 0.25rem;
}

/* Disclaimer */

.result-disclaimer {
  font-size: 0.75rem;
  color: var(--white-muted);
  line-height: 1.6;
  padding: 1rem;
  border-top: 2px solid var(--charcoal-lighter);
  margin-top: 0.5rem;
}

.results-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.results-followup {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 1.25rem 0;
  padding: 0.9rem;
  background: var(--charcoal-light);
  border: 2px solid var(--charcoal-lighter);
  border-radius: 14px;
}

.results-followup-text {
  width: 100%;
  resize: vertical;
  min-height: 72px;
  background: transparent;
  border: none;
  padding: 0.25rem;
  color: var(--white);
  font-family: 'Sora', sans-serif;
  font-size: 0.95rem;
  line-height: 1.45;
}

.results-followup-text:focus {
  outline: none;
}

.results-followup-hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--white-muted);
  text-align: center;
}

.results-conversation {
  margin: 1.5rem 0 1rem;
}

.results-conversation.hidden {
  display: none;
}

.results-conversation-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  color: var(--text-primary);
  font-family: 'Sora', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.85rem 1.125rem;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.results-conversation-toggle:hover {
  border-color: var(--accent);
}

.results-conversation-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.results-conversation-icon {
  font-size: 1.05rem;
  line-height: 1;
  color: var(--accent);
}

.results-conversation-chevron {
  font-size: 0.7rem;
  color: var(--white-muted);
  transition: transform 0.2s;
}

.results-conversation-thread {
  margin-top: 0.75rem;
  padding: 1rem;
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  max-height: 60vh;
  overflow-y: auto;
}

.results-conversation-thread.hidden {
  display: none;
}

/* Results Paywall */

.blurred-body {
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
  opacity: 0.5;
}

.paywall-fixed-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

.paywall-fixed-overlay.hidden {
  display: none;
}

.paywall-teaser {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 59;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  animation: paywall-teaser-fade-in 0.2s ease-out;
}

.paywall-teaser.hidden {
  display: none;
}

.paywall-teaser-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 1.5rem 1.25rem 1.35rem;
  background: var(--charcoal);
  border: 2px solid var(--orange);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(232, 101, 10, 0.25);
  text-align: center;
  animation: paywall-teaser-pop-in 0.25s ease-out;
}

.paywall-teaser-close {
  position: absolute;
  top: 0.3rem;
  right: 0.4rem;
  width: 2.5rem;
  height: 2.5rem;
  background: none;
  border: none;
  color: var(--white-dim);
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.paywall-teaser-cta {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0.95rem 1rem;
  background: var(--orange);
  color: var(--white);
  border: none;
  border-radius: 12px;
  font-family: 'Sora', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  letter-spacing: 0.01em;
  animation: paywall-teaser-pulse 1.6s ease-in-out infinite;
}

.paywall-teaser-cta u {
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.paywall-teaser-cta:hover,
.paywall-teaser-cta:focus-visible {
  filter: brightness(1.06);
  outline: none;
}

@keyframes paywall-teaser-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes paywall-teaser-pop-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes paywall-teaser-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 101, 10, 0.55); }
  50%      { box-shadow: 0 0 0 10px rgba(232, 101, 10, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .paywall-teaser,
  .paywall-teaser-card,
  .paywall-teaser-cta {
    animation: none;
  }
}

.paywall-card {
  position: relative;
  background: var(--charcoal);
  border: 2px solid var(--orange);
  border-radius: 18px;
  padding: 1.75rem 1.25rem;
  text-align: center;
  width: 92%;
  max-width: 480px;
  max-height: 90dvh;
  overflow-y: auto;
  box-shadow: 0 8px 50px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(232, 101, 10, 0.2);
}

.paywall-close {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: none;
  color: var(--white-dim);
  font-size: 2.1rem;
  font-weight: 300;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease;
  cursor: pointer;
  padding: 0;
}

.paywall-close:hover {
  color: var(--white);
}

.paywall-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.375rem;
}

.paywall-card .sub-text {
  margin-bottom: 1.25rem;
}

.paywall-card .plan-options {
  text-align: left;
}

.paywall-card .upgrade-note {
  margin-top: 0.75rem;
}

/* ===== SAVED SESSIONS ===== */

.sessions-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.session-entry {
  background: var(--charcoal-light);
  border: 2px solid var(--charcoal-lighter);
  border-radius: 12px;
  overflow: hidden;
}

.session-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  cursor: pointer;
}

.session-entry-header:hover {
  background: var(--charcoal-lighter);
}

.session-entry-main {
  flex: 1;
}

.session-entry-date {
  font-size: 0.75rem;
  color: var(--white-muted);
  margin-bottom: 0.2rem;
}

.session-free-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  margin-left: 0.3rem;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Default (free plan): hero (2fr) + 2 rows of action cards (1fr each) +
     upgrade CTA (1fr — exactly half the hero's height). */
  grid-template-rows: 2fr 1fr 1fr 1fr;
  gap: 0.75rem;
  flex: 1;
  min-height: 0;
}

/* Paid users — hide the upgrade CTA and revert to the original 3-row
   layout so the action cards still fill the screen evenly. */
.dashboard-cards.no-cta {
  grid-template-rows: 1.25fr 1fr 1fr;
}

.dashboard-card {
  background: var(--card-bg);
  border: 2px solid #000;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  cursor: pointer;
  min-height: 0;
  box-shadow: var(--elev-shadow);
  transition: box-shadow 0.18s ease, transform 0.18s ease, background 0.2s ease;
}

.dashboard-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--elev-shadow-hover);
}

.dashboard-card:active {
  background: var(--bg-tertiary);
  transform: translateY(0);
}

.dashboard-card-label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
}

.dashboard-card-hero {
  grid-column: 1 / -1;
  background: var(--accent);
  border-color: var(--accent);
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.25rem 1rem;
  box-shadow: var(--accent-glow);
  transition: box-shadow 0.18s ease, transform 0.18s ease, background 0.2s ease;
}

.dashboard-card-hero:hover {
  transform: translateY(-2px);
  box-shadow: var(--accent-glow-hover);
}

.dashboard-card-hero:active {
  background: var(--accent-light);
  transform: translateY(0);
}

.dashboard-card-hero .dashboard-card-label {
  font-size: 1.45rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
}

/* ----- Upgrade-to-premium CTA card (free-plan dashboard only) ----- */
.dashboard-card-upgrade {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border: 2px solid #000;
  background:
    radial-gradient(circle 50px at 18% 25%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle 70px at 82% 70%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle 28px at 60% 18%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle 36px at 30% 82%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 70%),
    var(--accent);
  color: #ffffff;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(232, 101, 10, 0.22),
    0 6px 14px rgba(232, 101, 10, 0.28),
    0 14px 28px rgba(232, 101, 10, 0.18);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.dashboard-card-upgrade:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(232, 101, 10, 0.28),
    0 10px 22px rgba(232, 101, 10, 0.34),
    0 20px 38px rgba(232, 101, 10, 0.24);
}

.dashboard-card-upgrade:active {
  transform: translateY(0);
  box-shadow:
    0 1px 2px rgba(232, 101, 10, 0.22),
    0 2px 6px rgba(232, 101, 10, 0.20);
}

.dashboard-card-upgrade-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}

.dashboard-card-upgrade-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.15rem;
  min-width: 0;
}

.dashboard-card-upgrade-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-align: center;
}

.dashboard-card-upgrade-sub {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}

.dashboard-card-upgrade-arrow {
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
  margin-left: 0.25rem;
}

/* ===== HOME DASHBOARD (v1.98.0 redesign) =====
   Stacked layout: greeting + (optional) suggestion + hero + tile grid +
   activity feed + (free-only) upgrade CTA. Each section reads from the
   user's own data so the dashboard feels like it knows them. */

.home-content {
  gap: 1rem;
  padding-bottom: 1rem;
}

/* Smart suggestion banner */
.suggestion {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--yellow-dim);
  border-left: 3px solid var(--yellow);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s;
}
.suggestion:hover { background: rgba(240, 185, 74, 0.22); }
.suggestion-icon { font-size: 1.1rem; flex-shrink: 0; }
.suggestion-body { flex: 1; line-height: 1.35; color: var(--white-dim); }
.suggestion-body strong { color: var(--text-primary); }
.suggestion-arrow { color: var(--yellow); font-size: 1.15rem; flex-shrink: 0; }

/* Hero advisor card with quick-start chips */
/* Data-rich tile grid */
.tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}
.tile {
  /* Grid layout — three rows: a fixed-height icon row (always tall enough
     for icon + optional status pill so labels align across every card),
     an auto label row, and a 1fr data row. The 1fr slot centers its
     content vertically so a one-line tile-data (e.g., "MPG, fuel cost,
     affordability") and a two-line tile-data (e.g., "1 vehicle · last
     service Apr 12") both look balanced inside the same card height. */
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0.6rem 0.65rem 0.65rem;
  cursor: pointer;
  display: grid;
  grid-template-rows: 2.2rem auto 1fr;
  justify-items: center;
  text-align: center;
  gap: 0.2rem;
  min-height: 100px;
  box-shadow: var(--elev-shadow);
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.tile:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--elev-shadow-hover); }
.tile:active { transform: translateY(0); }
/* Stack icon + (optional) status pill vertically and centered.
   column-reverse keeps the existing HTML order (icon first, status second)
   while visually placing the status pill ABOVE the icon. justify-content:
   flex-start in column-reverse anchors the visual content to the BOTTOM of
   the row, so the icon sits at the same y whether or not a status pill is
   present — that's what keeps the .tile-label below it aligned across
   every card. */
.tile-icon-row {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 0.3rem;
}
.tile-icon { font-size: 1.4rem; line-height: 1; }
.tile-status {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 99px;
  white-space: nowrap;
}
.tile-status.ok { background: var(--green-dim); color: var(--green); }
.tile-status.warn { background: var(--yellow-dim); color: var(--yellow); }
.tile-status.bad { background: var(--red-dim); color: var(--red); }
.tile-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-top: 0.15rem;
}
.tile-data {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.35;
  align-self: center;
}
.tile-data strong { color: var(--text-primary); font-weight: 600; }

/* Recent activity feed */
.activity {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  box-shadow: var(--elev-shadow);
}
.activity-title {
  font-family: 'Manrope', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 0.55rem;
}
.activity-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  transition: opacity 0.15s;
  background: transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.activity-row:hover { opacity: 0.8; }
.activity-row:last-child { border-bottom: none; padding-bottom: 0; }
.activity-icon { font-size: 1rem; opacity: 0.7; flex-shrink: 0; }
.activity-text {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.35;
}
.activity-text-when {
  color: var(--white-dim);
  font-size: 0.78rem;
  margin-top: 0.1rem;
}
.activity-arrow { color: var(--white-dim); font-size: 1rem; flex-shrink: 0; }

/* Bottom-of-dashboard support shortcuts. Two equal-width buttons side by
   side: red "Report a Problem" (high-urgency) + neutral "Feedback". */
.home-support-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-top: 0.25rem;
}
.home-support-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--elev-shadow);
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.home-support-btn:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--elev-shadow-hover); }
.home-support-btn:active { transform: translateY(0); }
.home-support-btn-icon { font-size: 1rem; line-height: 1; }
.home-support-btn-danger {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.home-support-btn-danger:hover { border-color: var(--red); background: #d04545; }

/* Dashboard upgrade row — two side-by-side half-width cards near the
   bottom of the home screen.
     LEFT  = .home-upgrade-card--primary, the orange "Upgrade to Premium"
             CTA. Opens the Premium Promo popup so the user can pick a
             plan without leaving the dashboard. Self-hides for
             monthly/yearly subscribers via renderHome().
     RIGHT = .home-upgrade-card--learn, neutral "Learn More" card that
             routes to the full Premium Features page.
   Replaced the single full-width green .upgrade-ribbon in v1.112.4. */
.home-upgrade-row {
  /* Green-tinted wrapper bubble so the two upgrade cards read as a single
     grouped CTA region instead of two loose tiles. Mirrors the orange
     .home-quick-ask treatment but in the upgrade-green palette, so users
     parse green = upgrade across the dashboard. Tint stays subtle so it
     doesn't compete with the brighter green glow on the primary card. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin: 0.35rem 0 0.5rem;
  padding: 0.55rem;
  background:
    linear-gradient(135deg, rgba(60, 179, 113, 0.16) 0%, rgba(60, 179, 113, 0.04) 100%),
    var(--card-bg);
  border: 1.5px solid rgba(60, 179, 113, 0.35);
  border-radius: 14px;
  box-shadow:
    0 2px 8px rgba(60, 179, 113, 0.12),
    0 8px 22px rgba(60, 179, 113, 0.08);
}
[data-theme="light"] .home-upgrade-row {
  background:
    linear-gradient(135deg, rgba(60, 179, 113, 0.10) 0%, rgba(60, 179, 113, 0.02) 100%),
    var(--card-bg);
  border-color: rgba(60, 179, 113, 0.28);
  box-shadow:
    0 2px 8px rgba(60, 179, 113, 0.08),
    0 8px 22px rgba(60, 179, 113, 0.05);
}
.home-upgrade-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.7rem 0.6rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--elev-shadow);
  transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s, filter 0.12s;
  /* Position + overflow set up the ::before curved-gloss overlay that
     gives the card a "lit from above" bubble reflection. The pseudo
     element stacks below card text/icons by default so no z-index
     bookkeeping is needed on the children. */
  position: relative;
  overflow: hidden;
}
.home-upgrade-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: radial-gradient(120% 100% at 50% 0%,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.12) 45%,
    rgba(255, 255, 255, 0) 80%);
  pointer-events: none;
}
.home-upgrade-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--elev-shadow-hover);
}
.home-upgrade-card:active { transform: translateY(0); }
.home-upgrade-card.hidden { display: none; }
.home-upgrade-card-icon {
  font-size: 1.2rem;
  line-height: 1;
  margin-bottom: 0.1rem;
}
.home-upgrade-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.home-upgrade-card-sub {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* Primary — solid brand-green Upgrade CTA with black text. Most saturated
   surface in the upgrade region; the surrounding green bubble framing
   reads as a softer halo around it. Multi-layer green glow keeps the
   "pulse" the previous gradient version had so the CTA still leads
   the eye over the inverted black Learn More card next to it. */
.home-upgrade-card--primary {
  background: var(--green);
  border-color: var(--green);
  box-shadow:
    /* Bubble inner-highlights: sharp top sheen line + soft bottom
       darkening for depth. Layered ABOVE the outer green glow. */
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -10px 18px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(60, 179, 113, 0.35),
    0 0 14px 2px rgba(60, 179, 113, 0.32),
    0 0 32px 6px rgba(60, 179, 113, 0.18),
    0 3px 10px rgba(60, 179, 113, 0.28),
    0 10px 24px rgba(60, 179, 113, 0.16);
}
.home-upgrade-card--primary:hover {
  border-color: var(--green);
  filter: brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -10px 18px rgba(0, 0, 0, 0.20),
    0 0 0 1px rgba(60, 179, 113, 0.50),
    0 0 18px 3px rgba(60, 179, 113, 0.42),
    0 0 42px 10px rgba(60, 179, 113, 0.24),
    0 5px 14px rgba(60, 179, 113, 0.38),
    0 14px 30px rgba(60, 179, 113, 0.22);
}
.home-upgrade-card--primary .home-upgrade-card-title { color: #000; }
.home-upgrade-card--primary .home-upgrade-card-sub { color: rgba(0, 0, 0, 0.72); }

/* Learn More — solid black surface with white text. Inverted from the
   green primary so the two cards visually pair as "the loud upgrade" +
   "the calm informational alternative" while remaining equally
   prominent. Universal across light/dark mode because pure black + pure
   white is theme-agnostic. */
.home-upgrade-card--learn {
  background: linear-gradient(180deg, #1f1f1f 0%, #000 70%);
  border-color: #000;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -10px 20px rgba(0, 0, 0, 0.55),
    0 3px 10px rgba(0, 0, 0, 0.28),
    0 10px 24px rgba(0, 0, 0, 0.18);
}
.home-upgrade-card--learn:hover {
  border-color: var(--accent);
  filter: brightness(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -10px 20px rgba(0, 0, 0, 0.55),
    0 4px 14px rgba(0, 0, 0, 0.35),
    0 12px 28px rgba(0, 0, 0, 0.22);
}
.home-upgrade-card--learn .home-upgrade-card-title { color: #fff; }
.home-upgrade-card--learn .home-upgrade-card-sub { color: rgba(255, 255, 255, 0.72); }

/* Quick-ask card on the dashboard. As of v1.109.4 this is the dashboard's
   primary path into the AI Advisor — the prior orange .hero-advisor card
   was removed. App.dashboardQuickAsk() pre-fills the advisor textarea,
   navigates to /advisor, and submits, so this card is a real one-tap
   entry point into the full advisor flow (knowledge base, web search,
   topic tagging, all of it). */
.home-quick-ask {
  /* Brand-orange wash + tinted border + soft orange glow so this card
     reads as the dashboard's primary interactive surface in both themes.
     Layers a subtle orange gradient on top of --card-bg so the underlying
     surface still adapts to light / dark mode automatically. */
  margin: 0.9rem 0 0.9rem;
  padding: 0.95rem 1rem 1.05rem;
  background:
    linear-gradient(135deg, rgba(232, 101, 10, 0.22) 0%, rgba(232, 101, 10, 0.06) 100%),
    var(--card-bg);
  border: 1.5px solid rgba(232, 101, 10, 0.40);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  box-shadow:
    0 2px 8px rgba(232, 101, 10, 0.16),
    0 8px 22px rgba(232, 101, 10, 0.10);
}
[data-theme="light"] .home-quick-ask {
  /* Lighter orange wash and a slightly softer border in light mode so the
     card still reads as elevated against a near-white surface without
     looking heavy or saturated. */
  background:
    linear-gradient(135deg, rgba(232, 101, 10, 0.14) 0%, rgba(232, 101, 10, 0.03) 100%),
    var(--card-bg);
  border-color: rgba(232, 101, 10, 0.32);
  box-shadow:
    0 2px 8px rgba(232, 101, 10, 0.10),
    0 8px 22px rgba(232, 101, 10, 0.06);
}
.home-quick-ask-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin: 0;
}
.home-quick-ask-text {
  width: 100%;
  resize: vertical;
  min-height: 8rem;
  padding: 0.7rem 0.75rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  box-sizing: border-box;
}
.home-quick-ask-text:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(232, 101, 10, 0.18);
}
.home-quick-ask-btn {
  align-self: stretch;
  margin: 0;
}

/* Subscribe CTA underneath the Ask Now button on the home dashboard.
   Sits directly below the free entry point so the user sees the upgrade
   hook in the same view. Subtle orange-accent card; tap opens the
   unified premium-promo-modal. */
.home-subscribe-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  width: 100%;
  margin: 0.85rem 0 0;
  padding: 0.75rem 1rem 0.35rem;
  background: linear-gradient(135deg, rgba(232, 101, 10, 0.10) 0%, rgba(232, 101, 10, 0.04) 100%);
  border: 1px solid rgba(232, 101, 10, 0.45);
  border-left: 4px solid var(--orange);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.home-subscribe-cta:hover {
  background: linear-gradient(135deg, rgba(232, 101, 10, 0.16) 0%, rgba(232, 101, 10, 0.08) 100%);
  box-shadow: 0 2px 8px rgba(232, 101, 10, 0.18);
}

.home-subscribe-cta:active {
  transform: scale(0.99);
}

.home-subscribe-cta-headline {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--white);
  letter-spacing: -0.01em;
}

/* Two explicit columns sitting at opposite edges of the card via
   justify-content: space-between. Gives the right column a visible
   push toward the right edge rather than the auto-balanced narrow
   center gap CSS columns produced. */
.home-subscribe-cta-columns {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0.3rem;
}

.home-subscribe-cta-col {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.home-subscribe-cta-col li {
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--white-dim);
  padding-left: 0.85rem;
  position: relative;
}

.home-subscribe-cta-col li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--orange);
  font-weight: 700;
  font-size: 0.85rem;
}

/* "And More" footer — sits below the two-column category list, centered.
   Italic + orange accent so it reads as a closer to the list rather than
   another bulleted item. */
.home-subscribe-cta-categories-more {
  display: block;
  text-align: center;
  margin-top: 0.1rem;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-style: italic;
  font-size: 0.82rem;
  color: var(--orange);
  letter-spacing: 0.01em;
}

/* Down-facing chevron at the bottom of the card. The character is the
   same right-pointing chevron used elsewhere in the app; rotating 90deg
   keeps the typography consistent without introducing a new glyph. The
   negative top margin pulls the chevron up under "And More" so the two
   read as one closer, instead of an island floating below a gap. */
.home-subscribe-cta-arrow {
  align-self: center;
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--orange);
  line-height: 1;
  margin-top: -0.15rem;
  transform: rotate(90deg);
  transform-origin: center;
}

[data-theme="light"] .home-subscribe-cta {
  background: linear-gradient(135deg, rgba(232, 101, 10, 0.12) 0%, rgba(232, 101, 10, 0.05) 100%);
  border-color: rgba(232, 101, 10, 0.55);
}

[data-theme="light"] .home-subscribe-cta-headline {
  color: #1a1a1a;
}

[data-theme="light"] .home-subscribe-cta-col li {
  color: #2f2f2f;
}

/* Popular-questions chips inside the home quick-ask card. Show 6 commonly-
   asked questions as pill buttons; tapping one fills the textarea so the
   user can edit or send. Wraps naturally on narrow screens. */
.home-quick-prompts {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0.1rem 0 0.1rem;
  width: 100%;
}

.home-quick-prompts-chips {
  /* Horizontal scroller. Negative side margins + matching scroll-padding
     let the row extend to the card's edges so the rightmost chip clips
     into a "peek" instead of stopping flush. Snap points keep each chip
     aligned after a swipe. Scrollbar is hidden visually but the row
     remains keyboard- and touch-scrollable, and a pointer drag handler
     wired up in app.js gives mouse users click-and-drag panning too. */
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 -1rem;
  padding: 0.15rem 1rem 0.35rem;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}

.home-quick-prompts-chips.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.home-quick-prompts-chips::-webkit-scrollbar {
  display: none;
}

.home-quick-prompt-chip {
  display: inline-block;
  flex: 0 0 auto;
  scroll-snap-align: start;
  white-space: nowrap;
  font-family: 'Sora', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--charcoal-lighter);
  background: var(--charcoal);
  color: var(--white);
  cursor: pointer;
  line-height: 1.3;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.home-quick-prompt-chip:hover {
  background: var(--charcoal-lighter);
  border-color: var(--orange);
}

.home-quick-prompt-chip:active {
  transform: scale(0.97);
}

[data-theme="light"] .home-quick-prompt-chip {
  background: #f5f5f7;
  border-color: #d6d6d9;
  color: #1a1a1a;
}

[data-theme="light"] .home-quick-prompt-chip:hover {
  background: #ebebed;
  border-color: var(--orange);
}

/* Dashboard header greeting. The screen-header base layout is a 3-column
   grid (1fr auto 1fr) that centers a short static title like "Dashboard"
   and ellipsizes anything longer. That's the wrong fit for a personalized
   greeting that can be as long as "Good afternoon, Christopher." — so we
   reconfigure only the dashboard's header (`#screen-home`-scoped) to a
   left-aligned single-column layout that lets the greeting fill the
   available width and wrap to a second line for very long names instead
   of being clipped. The right padding reserves clearance for the green
   .header-upgrade-pill that lives in the top-right corner of every
   header. Other screens are unaffected. */
#screen-home .screen-header {
  grid-template-columns: 1fr;
  justify-items: start;
  height: auto;
  min-height: var(--header-height);
  padding: 0.35rem 7.2rem 0.35rem 0.85rem;
}
#screen-home .screen-header > .header-spacer {
  display: none;
}
#screen-home .home-header-greet {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(0.95rem, 4vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: left;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: 100%;
  margin: 0;
  padding: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.advisor-sessions-btn {
  display: block;
  margin: 1.2rem auto 0.5rem;
  padding: 0.45rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 2px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.advisor-sessions-btn:active {
  background: var(--bg-card);
}

.session-entry-summary {
  font-size: 0.9rem;
  font-weight: 500;
}

.session-entry-expand {
  font-size: 0.9rem;
  color: var(--white-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.session-entry.expanded .session-entry-expand {
  transform: rotate(180deg);
}

.session-entry-details {
  display: none;
  padding: 0 1rem 1rem;
  border-top: 2px solid var(--charcoal-lighter);
}

.session-entry.expanded .session-entry-details {
  display: block;
}

.session-query {
  font-size: 0.85rem;
  color: var(--white-dim);
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  background: var(--charcoal);
  border-radius: 8px;
  font-family: 'Lora', serif;
  font-style: italic;
}

.session-response {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--white-dim);
}

.session-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
  border-top: 2px solid var(--charcoal-lighter);
}

/* ===== BOTTOM NAV ===== */

.bottom-nav {
  /* Flex child of #app. The `order: 999` ensures it renders LAST in the
     flex column even though it lives in the middle of the DOM (between
     screen blocks). flex-shrink: 0 keeps it at its natural height — the
     active screen takes whatever's left. */
  order: 999;
  flex-shrink: 0;
  width: 100%;
  /* Total box height = content area (--nav-height) + safe-area inset for the
     iOS home indicator. The previous `height: var(--nav-height)` with
     `padding-bottom: safe-area` had safe-area eating INTO the content area,
     which left ~30px usable on iPhones with a home indicator — too tight
     for icon + label, so the icons poked above the top of the nav. */
  height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0));
  padding-bottom: env(safe-area-inset-bottom, 0);
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--charcoal);
  border-top: 2px solid var(--charcoal-lighter);
  z-index: 50;
}

.bottom-nav.hidden {
  display: none;
}

.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  background: none;
  border: none;
  color: var(--white-muted);
  cursor: pointer;
  padding: 0.375rem 0.625rem;
  transition: color 0.2s;
  font-family: 'Sora', sans-serif;
}

.nav-btn.active {
  color: var(--orange);
}

.nav-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.nav-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ===== UTILITIES ===== */

.hidden {
  display: none !important;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ===== TOAST NOTIFICATION ===== */

.toast {
  position: fixed;
  bottom: calc(var(--nav-height) + 1rem);
  left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  border-radius: 10px;
  font-family: 'Sora', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  z-index: 200;
  animation: toastIn 0.3s ease, toastOut 0.3s ease 2.2s forwards;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(1rem); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to { opacity: 0; transform: translateX(-50%) translateY(1rem); }
}

.home-tile-wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1.125rem;
}

.home-tile-wide .tile-icon {
  margin-bottom: 0;
  font-size: 1.35rem;
}

.home-tile-wide .tile-label {
  margin-bottom: 0.1rem;
}

/* Bottom nav density tweaks for 6 items */
.bottom-nav .nav-btn {
  padding: 0.375rem 0.4rem;
}

/* ===== RESPONSIVE / DESKTOP ===== */

@media (min-width: 520px) {
  #app {
    border-left: 2px solid var(--charcoal-lighter);
    border-right: 2px solid var(--charcoal-lighter);
  }

  body {
    background: var(--bg-primary);
  }

  .modal-content {
    border-radius: 20px;
    margin-bottom: 2rem;
  }

  .modal {
    align-items: center;
  }
}

/* ===== PWA / SAFE AREAS / TAP TARGETS =====
   iOS apple-mobile-web-app-status-bar-style is set to "black-translucent",
   which means the app draws under the status bar. Any element that sits at
   the very top of the viewport needs top safe-area padding, and the bottom
   fixed chrome needs bottom safe-area padding (partly already handled). */

html, body {
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

/* Sticky / fixed top chrome: pad for the notch + status bar. */
.screen-header {
  padding-top: env(safe-area-inset-top, 0);
  height: calc(var(--header-height) + env(safe-area-inset-top, 0));
}

.onboarding-header {
  padding-top: calc(1rem + env(safe-area-inset-top, 0));
}

/* Welcome screen is a hero layout, so pad for both top notch and bottom
   home indicator when shown as a standalone PWA. Kept tight on top so the
   whole hero (logo + tagline + helps list + Get Started button) fits a
   typical mobile viewport without scrolling. */
.welcome-container {
  padding-top: calc(0.75rem + env(safe-area-inset-top, 0));
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0));
}

/* Bottom nav already respects safe-area-inset-bottom. Anything else with
   fixed bottom chrome (toasts, etc.) should stay clear of the home bar. */
.toast {
  bottom: calc(var(--nav-height) + 1rem + env(safe-area-inset-bottom, 0));
}

/* Tap-target minimums: 44x44 (Apple HIG) / 48x48 (Material). Header icon
   buttons (.btn-icon) and back arrow (.btn-back) stay at 44 so they don't
   balloon the compact header. Modal close X buttons (.btn-close) bumped to
   48 — they sit alone in the top-right of modals where a generous tap
   target matters more than visual compactness. */
.btn-icon,
.btn-back {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-close {
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-btn {
  min-height: 48px;
}

.onboarding-nav-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.btn-primary,
.btn-secondary,
.btn-accent {
  min-height: 44px;
}

/* Prevent iOS Safari from auto-zooming on focus when the input font-size
   drops below 16px. Our default is 0.9–0.95rem which triggers zoom. */
input, textarea, select {
  font-size: 16px;
}

/* ===== 2ND OPINION ESTIMATE ===== */

.btn-estimate-trigger {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
  font-family: 'Sora', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.9rem 1.25rem;
  border-radius: 12px;
  cursor: pointer;
  margin: 1.25rem 0 0.75rem;
  transition: background 0.15s;
}

.btn-estimate-trigger:hover {
  background: var(--orange-dim);
}

.btn-estimate-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.estimate-trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-weight: 700;
  font-size: 0.85rem;
}

.estimate-card {
  background: var(--charcoal-light);
  border: 2px solid var(--charcoal-lighter);
  border-left: 2px solid var(--accent);
  border-radius: 12px;
  padding: 1.25rem 1.25rem 1rem;
  margin: 0 0 1rem;
  color: var(--white);
}

.estimate-card.hidden {
  display: none;
}

.estimate-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}

.estimate-card-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
}

.estimate-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
}

.estimate-refresh-btn {
  background: transparent;
  border: 2px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.estimate-refresh-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.estimate-card-subhead {
  margin-bottom: 0.9rem;
  font-size: 0.78rem;
}

.estimate-loading {
  padding: 1rem 0;
  font-size: 0.9rem;
  color: var(--white-dim);
}

.estimate-error {
  padding: 0.5rem 0;
}

.estimate-error p {
  margin-bottom: 0.75rem;
  color: var(--white-dim);
  font-size: 0.9rem;
}

.estimate-error .btn-primary {
  width: auto;
  padding: 0.6rem 1.2rem;
}

.estimate-rows {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.25rem 0 0.5rem;
}

.estimate-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.92rem;
}

.estimate-row-label {
  color: var(--white-dim);
  font-weight: 500;
}

.estimate-row-value {
  color: var(--white);
  font-weight: 600;
  font-family: 'Sora', sans-serif;
}

.estimate-row-total {
  margin-top: 0.3rem;
  padding-top: 0.55rem;
  border-top: 2px solid var(--charcoal-lighter);
}

.estimate-row-total .estimate-row-label {
  color: var(--white);
  font-weight: 700;
}

.estimate-row-total .estimate-row-value {
  color: var(--accent);
  font-weight: 700;
  font-size: 1rem;
}

.estimate-affects {
  margin: 0.75rem 0 0.25rem;
  font-size: 0.82rem;
  line-height: 1.5;
}

.estimate-disclaimer {
  margin: 0.5rem 0 0.25rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--white-muted);
}

.estimate-raw {
  font-size: 0.88rem;
  color: var(--white-dim);
  line-height: 1.5;
}

.estimate-raw p { margin-bottom: 0.5rem; }

.estimate-footnote {
  margin-top: 0.75rem;
  font-size: 0.7rem;
  color: var(--white-muted);
  text-align: center;
}

/* Zip modal */
.estimate-zip-modal-content {
  max-width: 420px;
}

.estimate-zip-modal-content .form-group {
  margin: 0.5rem 0 0.75rem;
}

.estimate-zip-modal-content input[type="text"] {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 2px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: 'Sora', sans-serif;
  letter-spacing: 0.1em;
  text-align: center;
  font-size: 18px;
}

.estimate-zip-error {
  margin: 0.5rem 0 0;
  color: #e07070;
  font-size: 0.8rem;
  font-family: 'Sora', sans-serif;
  text-align: center;
}

.estimate-zip-modal-content input.input-error {
  border-color: #e07070;
}

/* Repair selection chips */
.estimate-repair-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.estimate-repair-chip {
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  color: var(--text-primary);
  font-family: 'Sora', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.estimate-repair-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.estimate-repair-chip-all {
  border-style: dashed;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* ===== BUG REPORT ===== */

.settings-link-icon {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.settings-link-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--orange-dim);
  font-size: 0.95rem;
  line-height: 1;
  flex-shrink: 0;
}

.bug-report-subtitle {
  margin: -0.25rem 0 1.25rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.bug-report-form {
  padding-bottom: 1.5rem;
}

.bug-required {
  color: var(--accent);
  font-weight: 700;
  margin-left: 0.15rem;
}

.form-optional {
  color: var(--text-secondary);
  font-weight: 400;
  font-size: 0.78rem;
  font-style: italic;
  margin-left: 0.25rem;
}

.bug-textarea-large,
.bug-textarea-small {
  width: 100%;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font-family: 'Sora', sans-serif;
  line-height: 1.5;
  resize: vertical;
}

.bug-textarea-large {
  min-height: 140px;
}

.bug-textarea-small {
  min-height: 80px;
}

.bug-report-form input[type="text"],
.bug-report-form input[type="email"] {
  width: 100%;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font-family: 'Sora', sans-serif;
}

.bug-report-disclaimer {
  margin: 1rem 0 1.25rem;
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--white-muted);
}

.bug-report-form .btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--border-color);
  color: var(--text-secondary);
}

[data-theme="light"] .bug-report-form .btn-primary:disabled {
  background: var(--border-color);
  color: var(--text-secondary);
}

.bug-report-error {
  margin-top: 0.85rem;
  padding: 0.75rem 1rem;
  background: rgba(224, 112, 112, 0.08);
  border: 2px solid rgba(224, 112, 112, 0.35);
  border-radius: 10px;
  color: #e07070;
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
}

.bug-report-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1rem 2rem;
  gap: 0.75rem;
}

.bug-report-success.hidden {
  display: none;
}

.bug-success-check {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--orange-dim);
  color: var(--accent);
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.bug-report-success h3 {
  font-family: 'Sora', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.bug-report-success .btn-primary {
  width: auto;
  margin-top: 1rem;
  padding: 0.75rem 2rem;
}

/* ===== GLOBAL POLISH ===== */

/* +8px padding across card-like surfaces */
.home-tile { padding: 1.625rem; }
.home-tile-wide { padding: 1.375rem 1.625rem; }
.vehicle-log-cta { padding: 1.375rem 1.5rem; }
.vehicle-current-card { padding: 1.5rem 1.625rem; }
.upgrade-banner { padding: 1.5rem; }
.cost-summary { padding: 1.5rem 1.5rem 1rem; }
.log-entry { padding: 1.375rem 1.5rem; }
.advisor-vehicle-context { padding: 1.125rem 1.375rem; }
.advisor-flow { padding: 1.4rem 1.25rem; }
.session-entry-header { padding: 1.375rem 1.5rem; }
.plan-card { padding: 1.625rem 1.375rem; }

/* Card titles — 16px (1rem) minimum */
.tile-label,
.home-tile-wide .tile-label,
.cost-summary-header h4,
.upgrade-content h4,
.log-entry-title,
.vehicle-log-cta-label {
  font-size: 1rem;
}

/* Primary action buttons in the 'btn-large' size → 56px tall */
.btn-primary.btn-large {
  min-height: 56px;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 1.05rem;
}

/* Subtle divider above the bottom navigation bar */
.bottom-nav {
  border-top: 2px solid var(--border-color);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15), 0 -8px 16px -8px rgba(0, 0, 0, 0.18);
}

[data-theme="light"] .bottom-nav {
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04), 0 -8px 16px -8px rgba(0, 0, 0, 0.06);
}

/* ===== Privacy Policy ===== */
.privacy-content {
  max-width: 680px;
  margin: 0 auto;
  padding: 0.5rem 0.25rem 3rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-primary);
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

/* Hero / title block */
.privacy-hero {
  padding: 1.5rem 0 1.75rem;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: 2rem;
}

.privacy-title {
  margin: 0 0 0.25rem 0;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.15;
}

/* "A product of 2nd Opinion Automotive, LLC" — sits directly under the
   product name in the About hero so the relationship between the
   user-facing brand (Auto Advisor) and the parent company is unmistakable
   on every visit to the About screen. */
.privacy-byline {
  margin: 0 0 0.6rem 0;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--text-secondary);
  letter-spacing: 0.005em;
}
.privacy-byline strong {
  font-style: normal;
  color: var(--text-primary);
  font-weight: 700;
}

.privacy-updated {
  margin: 0 0 1.25rem 0;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

.privacy-intro {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Table of contents */
.privacy-toc {
  margin: 0 0 2.5rem 0;
  padding: 1.1rem 1.25rem 1.25rem;
  border: 2px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-tertiary);
}

.privacy-toc-title {
  margin: 0 0 0.75rem 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.privacy-toc-list {
  list-style: decimal inside;
  margin: 0;
  padding: 0;
  color: var(--text-secondary);
}

.privacy-toc-list li {
  padding: 0.25rem 0;
  font-size: 0.9375rem;
}

.privacy-toc-list a {
  color: var(--accent);
  text-decoration: none;
}

.privacy-toc-list a:hover,
.privacy-toc-list a:focus {
  text-decoration: underline;
}

/* Sections */
.privacy-section {
  margin: 0 0 2.75rem 0;
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

.privacy-section:last-child {
  margin-bottom: 0;
}

.privacy-h2 {
  margin: 0 0 0.85rem 0;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--accent);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

.privacy-h3 {
  margin: 1.75rem 0 0.55rem 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}

.privacy-section > .privacy-h3:first-of-type {
  margin-top: 0.5rem;
}

.privacy-content p {
  margin: 0 0 0.95rem 0;
}

.privacy-content p:last-child {
  margin-bottom: 0;
}

.privacy-list {
  margin: 0 0 1rem 1.4rem;
  padding: 0;
}

.privacy-list li {
  margin-bottom: 0.55rem;
}

.privacy-list li:last-child {
  margin-bottom: 0;
}

.privacy-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.privacy-content a:hover,
.privacy-content a:focus {
  text-decoration-thickness: 2px;
}

.privacy-content code {
  padding: 0.08em 0.4em;
  border-radius: 4px;
  background: var(--bg-tertiary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
}

.privacy-content em {
  font-style: italic;
  color: var(--text-secondary);
}

.privacy-content strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* ============================================================
   LOGIN / SIGNUP SCREEN
   ============================================================ */

.login-screen-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1.5rem;
  gap: 1.25rem;
}

.login-brand {
  text-align: center;
  margin-bottom: 0.5rem;
}

.login-powered-by {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
}

.login-logo {
  display: block;
  margin: 0 auto 0.75rem;
  width: 194px;
  max-width: 194px;
  height: auto;
  background: transparent;
}

[data-theme="light"] .login-logo {
  background: #1a1a1a;
  padding: 10px 14px;
  border-radius: 14px;
  box-sizing: border-box;
}

.login-title {
  text-align: center;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.login-title-sub {
  font-family: 'Manrope', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: var(--text-secondary);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.login-title-accent {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 2.2rem;
  color: var(--accent);
}

.login-tagline {
  font-size: 0.875rem;
  color: var(--accent);
  max-width: 280px;
  margin: 0 auto;
  line-height: 1.4;
  font-weight: 600;
}

.login-tabs {
  display: flex;
  background: var(--bg-tertiary);
  border-radius: 10px;
  padding: 3px;
  width: 100%;
  max-width: 340px;
}

.login-tab {
  flex: 1;
  padding: 0.6rem;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.login-tab.active {
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.login-form {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.auth-error {
  color: #e53e3e;
  font-size: 0.85rem;
  text-align: center;
  padding: 0.5rem;
  background: rgba(229, 62, 62, 0.1);
  border-radius: 8px;
}

.btn-full {
  width: 100%;
}

.btn-text-small {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  text-align: center;
  padding: 0.25rem;
}

.btn-text-small:hover {
  color: var(--accent);
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 340px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 340px;
  padding: 0.85rem 1rem;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-google:hover {
  border-color: var(--accent);
  background: var(--bg-tertiary);
}

.login-legal {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  max-width: 280px;
  line-height: 1.4;
}

.login-legal a {
  color: var(--accent);
  text-decoration: none;
}

/* Sign Out row in Settings — uses the destructive red accent. */
.settings-row-signout {
  cursor: pointer;
}

.settings-signout-label {
  color: #e53e3e;
}

/* Section hint copy under the Privacy & Data buttons. */
.settings-section-hint {
  margin: 0.55rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
}

/* Destructive button styling on settings-link-btn (used by Delete my
   account). Keeps the same shape as other settings buttons but colored
   red so users can't miss what it does. */
.settings-link-btn.settings-danger {
  color: #e53e3e;
}

.settings-link-btn.settings-danger:hover {
  background: rgba(229, 62, 62, 0.1);
}

/* ============================================================
   DELETE ACCOUNT CONFIRMATION MODAL
   ============================================================ */

.delete-account-content {
  max-width: 420px;
  text-align: left;
  padding: 1.5rem 1.4rem 1.4rem;
}

.delete-account-emoji {
  font-size: 2rem;
  line-height: 1;
  text-align: center;
  margin-bottom: 0.4rem;
}

.delete-account-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
  text-align: center;
  color: var(--text-primary);
}

.delete-account-body {
  margin: 0 0 0.85rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: center;
}

.delete-account-list {
  margin: 0 0 1.1rem;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-primary);
}

.delete-account-list li {
  margin-bottom: 0.35rem;
}

.delete-account-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.delete-account-confirm {
  width: 100%;
  background: #e53e3e;
  font-size: 0.95rem;
}

.delete-account-confirm:hover:not(:disabled) {
  background: #c53030;
  box-shadow: 0 2px 6px rgba(229, 62, 62, 0.35);
}

.delete-account-confirm:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================================
   PREMIUM FEATURES PAGE — Free vs Premium comparison/glorify
   Reached from the dashboard "Upgrade to Premium" card.
   ============================================================ */

.pf-hero {
  text-align: center;
  padding: 1.5rem 0.25rem 1rem;
}

.pf-hero-badge {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.85rem;
  box-shadow: var(--accent-glow);
}

.pf-hero-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
  color: var(--text-primary);
}

.pf-hero-sub {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 auto;
  max-width: 36rem;
}

/* Plan cards — 3-across grid sitting ABOVE the comparison table on the
   Premium page. Each card is a tall portrait-oriented button. Monthly is
   visually hero'd (filled orange gradient + slight scale). */
.pf-plans {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 0.55rem;
  align-items: stretch;
  margin: 1.5rem 0 1rem;
}

.pf-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  width: 100%;
  min-height: 230px;
  padding: 1.4rem 0.6rem 0.85rem;
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 14px;
  color: var(--text-primary);
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.pf-plan:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.pf-plan:active { transform: translateY(0); }

.pf-plan-name {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.pf-plan-price {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
}

.pf-plan-period {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0;
}

.pf-plan-tag {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--text-secondary);
  padding: 0 0.1rem;
}

/* Add-on price line on the Trial card. */
.pf-plan-extra {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.3;
}

.pf-plan-cta {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.55rem 0.5rem;
  background: var(--orange);
  color: #fff;
  border-radius: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  white-space: nowrap;
}

.pf-plan-badge {
  position: absolute;
  top: -0.55rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--text-secondary);
  color: var(--card-bg);
  font-family: 'Manrope', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Hook question on the Trial card — replaces the small uppercase badge
   with a longer, more conversational line that asks the user directly
   if they need help right now. Sits at the top of the card; the
   underlined "now" gives it the urgency emphasis. */
.pf-plan-hook {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.78rem;
  line-height: 1.25;
  color: var(--accent);
  text-align: center;
  padding: 0 0.15rem;
  margin-bottom: 0.1rem;
}
.pf-plan-hook u {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  font-weight: 700;
}

/* ----- Per-tier treatments ----- */

/* 3-Day Trial — left column, neutral with orange accent border */
.pf-plan-single {
  border-color: var(--accent);
}
.pf-plan-single .pf-plan-badge {
  background: var(--accent);
  color: #fff;
}

/* Monthly (HERO) — center column, filled orange gradient, scaled
   slightly larger so the eye lands here first. White text throughout. */
.pf-plan-prem {
  background:
    radial-gradient(circle 90px at 22% 20%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle 130px at 78% 78%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(135deg, #ff7a1a 0%, var(--accent) 100%);
  background-clip: border-box;
  /* Border replaced by a seamless box-shadow ring + brighter outer glow.
     The previous `border: 2px solid var(--accent)` was orange-on-orange
     but didn't match the lighter `#ff7a1a` start of the gradient and,
     combined with the transform: scale(1.04), produced a 1-2 px subpixel
     gap that read as a dark line at the card's edges. Box-shadow rings
     can't produce that gap because they render outside the box, not at
     a crossing of background + border. */
  border: none;
  color: #fff;
  box-shadow:
    0 0 0 2px rgba(255, 178, 110, 0.92),
    0 0 16px 3px rgba(255, 138, 50, 0.55),
    0 0 36px 8px rgba(232, 101, 10, 0.35),
    0 4px 10px rgba(232, 101, 10, 0.42),
    0 12px 28px rgba(232, 101, 10, 0.36),
    0 24px 48px rgba(232, 101, 10, 0.22);
  /* Scale + z-index so the hero card sits visually forward of the
     siblings on either side. */
  transform: scale(1.04);
  z-index: 1;
}
.pf-plan-prem:hover {
  transform: scale(1.04) translateY(-2px);
  box-shadow:
    0 0 0 2px rgba(255, 200, 140, 0.95),
    0 0 22px 5px rgba(255, 138, 50, 0.65),
    0 0 48px 12px rgba(232, 101, 10, 0.40),
    0 6px 14px rgba(232, 101, 10, 0.52),
    0 16px 34px rgba(232, 101, 10, 0.46),
    0 30px 58px rgba(232, 101, 10, 0.26);
}
.pf-plan-prem:active { transform: scale(1.04) translateY(0); }
.pf-plan-prem .pf-plan-name,
.pf-plan-prem .pf-plan-price,
.pf-plan-prem .pf-plan-period,
.pf-plan-prem .pf-plan-tag { color: #fff; }
.pf-plan-prem .pf-plan-period { opacity: 0.9; }
.pf-plan-prem .pf-plan-tag { opacity: 0.95; }
.pf-plan-prem .pf-plan-cta {
  background: #fff;
  color: var(--accent);
}
.pf-plan-prem .pf-plan-badge-popular {
  background: #fff;
  color: var(--accent);
}

/* Annual — right column, subtle orange tint to nod at "best value" */
.pf-plan-yearly {
  background:
    radial-gradient(circle 90px at 50% 0%, rgba(232, 101, 10, 0.14) 0%, rgba(232, 101, 10, 0) 70%),
    var(--card-bg);
  border-color: var(--accent);
}
.pf-plan-yearly .pf-plan-badge-best {
  background: var(--accent);
  color: #fff;
}


.pf-compare {
  margin: 1.5rem 0 0.5rem;
  border-radius: 14px;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

[data-theme="light"] .pf-compare {
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.pf-compare-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  /* Black separator lines for high visibility against the new colored
     column tints. */
  border-bottom: 1px solid #000;
}

/* 4-column variant: feature label + Free + 24-Hour + Premium. Bumped
   price-column widths so dollar amounts read clearly without clipping;
   Premium gets slightly more since it stacks monthly + annual prices. */
.pf-compare-3 .pf-compare-row {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr) minmax(0, 0.95fr) minmax(0, 1.1fr);
}

.pf-compare-3 .pf-compare-cell {
  padding: 0.65rem 0.4rem;
  font-size: 0.82rem;
}

.pf-compare-3 .pf-compare-head .pf-compare-cell {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  padding: 0.7rem 0.35rem;
}

/* v2.23.41 — Equal-width tier columns with visible separators.
   Feature column carries most of the width; Free and Premium
   columns are equal so their cells line up directly under the
   column headers. Borders replace the old grid gap so columns
   read as distinct without adding empty space. */
.pf-compare-2 .pf-compare-row {
  display: grid;
  grid-template-columns: 1.1fr 0.85fr 0.85fr;
  gap: 0;
  align-items: stretch;
}

.pf-compare-2 .pf-compare-cell {
  padding: 0.85rem 0.7rem;
  font-size: 0.92rem;
  line-height: 1.4;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pf-compare-2 .pf-compare-cell:last-child {
  border-right: none;
}

[data-theme="light"] .pf-compare-2 .pf-compare-cell {
  border-right-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .pf-compare-2 .pf-compare-cell:last-child {
  border-right: none;
}

.pf-compare-2 .pf-compare-head .pf-compare-cell {
  text-align: center;
  align-items: center;
  gap: 0.15rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.pf-compare-2 .pf-compare-head .pf-compare-feat {
  text-align: left;
  align-items: flex-start;
}

.pf-compare-2 .pf-compare-feat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: flex-start;
}

.pf-compare-2 .pf-compare-free,
.pf-compare-2 .pf-compare-prem {
  text-align: center;
  align-items: center;
  font-weight: 600;
}

.pf-compare-2 .pf-compare-prem {
  color: var(--accent);
}

/* New 3-line Premium header — adds the "Starting at" lead so the
   column fits the same width as Free without wrapping. */
.pf-compare-head-price-lead {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
  line-height: 1.1;
  margin-top: 0.1rem;
}

.pf-compare-head-price {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.1;
}

/* Section header row — spans full width, no per-tier cells */
.pf-compare-2 .pf-compare-section-row {
  display: block;
  border-top: none !important;
  padding: 0;
}

.pf-compare-2 .pf-compare-section-row .pf-compare-section {
  border-right: none !important;
}

.pf-compare-section {
  padding: 1.4rem 0.55rem 0.55rem !important;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid rgba(232, 101, 10, 0.30);
}

[data-theme="light"] .pf-compare-section {
  color: var(--accent);
  border-bottom-color: rgba(232, 101, 10, 0.40);
}

/* First section header gets less top padding (visually adjacent to the table head) */
.pf-compare-2 .pf-compare-head + .pf-compare-section-row .pf-compare-section {
  padding-top: 1rem !important;
}

/* Narrow screens: tighten paddings so 3 columns still fit */
@media (max-width: 480px) {
  .pf-compare-2 .pf-compare-row {
    grid-template-columns: 1.0fr 0.82fr 0.82fr;
  }
  .pf-compare-2 .pf-compare-cell {
    padding: 0.7rem 0.45rem;
    font-size: 0.88rem;
  }
  .pf-compare-head-price-lead {
    font-size: 0.65rem;
  }
  .pf-compare-head-price {
    font-size: 0.88rem;
  }
}

/* Generic header cell — base styling shared by all tier columns.
   IMPORTANT: this rule must come BEFORE tier-specific header overrides
   below (Free / 24-Hour / Premium), or `background: transparent` will
   win the cascade tie and erase the colored headers. */
.pf-compare-head .pf-compare-cell {
  font-family: 'Manrope', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
}

/* Tier-name span (FREE / 24-HOUR / PREMIUM) — bumped above the wrapper's
   default 0.68rem so the tier names read at a glance. */
.pf-compare-head-name {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

[data-theme="light"] .pf-compare-row {
  border-bottom-color: #000;
}

.pf-compare-row:last-child {
  border-bottom: none;
}

.pf-compare-cell {
  padding: 0.75rem 0.65rem;
  font-size: 0.92rem;
  line-height: 1.3;
  display: flex;
  align-items: center;
  color: var(--text-primary);
}

.pf-compare-feat {
  /* Stack feature name + descriptive snippet vertically. */
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Bold feature title — sits on its own line above the snippet. */
.pf-feat-name {
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.25;
  color: var(--text-primary);
}

/* Small descriptive sub-text under each feature name explaining what the
   feature actually does — so users can compare tiers without already
   knowing the product. */
.pf-feat-snippet {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* "Limited" badge — white text on a bright yellow pill. Matches the all-
   white text treatment used across the rest of the premium page. */
.pf-limited {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--yellow);
  padding: 0.2rem 0.5rem;
  border-radius: 99px;
  white-space: nowrap;
}

/* Free column — lightest end of the orange scale. Pale orange wash
   on body cells, lighter orange on the header. The progression Free
   → Trial → Premium reads as orange-getting-deeper-and-more-vibrant
   left to right, so the eye travels naturally toward the most-
   saturated tier (Premium). White text + bold weight on body cells. */
.pf-compare-free {
  background: rgba(232, 101, 10, 0.18);
  color: #fff;
  font-weight: 700;
  justify-content: center;
  text-align: center;
}

.pf-compare-head .pf-compare-free {
  background: #dd7a2d;
  color: #fff;
}

/* Trial column — middle of the orange scale. Body cells use a
   medium orange alpha; text is hard-set to white (not theme-aware)
   so it matches Free and Premium body cells regardless of light/dark
   mode. Must sit AFTER `.pf-compare-cell` in source order or the
   cell rule's `color: var(--text-primary)` wins via cascade-order
   tiebreak (same specificity). Header is the standard --orange —
   the visual "anchor" of the three-column scale. */
.pf-compare-single {
  background: rgba(232, 101, 10, 0.35);
  color: #fff;
  font-weight: 700;
  justify-content: center;
  text-align: center;
}

.pf-compare-head .pf-compare-single {
  background: var(--orange);
  color: #fff;
}

/* Premium column — most vibrant end of the orange scale. Deepest
   orange wash on body cells, deepest saturated orange on the header.
   The richer, darker hue gives Premium the strongest visual weight
   so it reads as the recommended/destination tier without needing a
   different color family. White text + bold weight for parity. */
.pf-compare-prem {
  background: rgba(232, 101, 10, 0.55);
  color: #fff;
  font-weight: 700;
  justify-content: center;
  text-align: center;
}

.pf-compare-head .pf-compare-prem {
  background: #b04a08;
  color: #fff;
}

/* Plain-text price line (used in the Free + Trial column headers). White
   on every column tint — all three column headers use orange-scale
   backgrounds saturated enough that white is the most legible text
   color across the full scale (light → standard → deep). */
.pf-compare-head-price {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #fff;
  white-space: nowrap;
  line-height: 1.15;
}

/* Clickable price-link button used in the 24-Hour and Premium headers.
   Each tier's price is a real button that routes to the matching
   selectPlan() flow. Sized to look like the static price line, with a
   subtle underline + hover lift so it reads as tappable. */
.pf-compare-head-price-btn {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #fff;
  white-space: nowrap;
  line-height: 1.15;
  background: transparent;
  border: none;
  padding: 0.15rem 0.3rem;
  margin: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, 0.55);
  transition: text-decoration-color 0.15s, transform 0.1s;
}
.pf-compare-head-price-btn:hover { text-decoration-color: #fff; transform: translateY(-1px); }
.pf-compare-head-price-btn:active { transform: translateY(0); }

/* Secondary annual price button — same visual size as the monthly button
   so both options read as peers, but tighter padding/letter-spacing keeps
   the slightly longer "or $119.99/yr" inside the column without growing
   the cell. */
.pf-compare-head-price-btn-alt {
  font-size: 0.95rem;
  font-weight: 800;
  opacity: 1;
  padding: 0.1rem 0.15rem;
  letter-spacing: -0.02em;
}

/* "$" glyph wrapper — kept as a structural span (some legacy markup
   still references it) but inherits color/weight from its parent so the
   currency reads as part of the price, not a separate element. */
.pf-curr {
  color: inherit;
  font-weight: inherit;
}

/* Header price colors — Free header uses solid red, both 24-Hour and
   Premium headers use solid orange/green respectively. White text reads
   on all three. */
.pf-compare-head .pf-compare-free .pf-compare-head-price {
  color: #fff;
}

/* Whole-cell clickable indicator (used on 24-Hour header). */
.pf-compare-head-clickable {
  cursor: pointer;
  transition: filter 0.15s;
}
.pf-compare-head-clickable:hover { filter: brightness(1.08); }
.pf-compare-head-clickable:active { filter: brightness(0.96); }

.pf-check {
  /* Green, theme-stable (hardcoded via --green) so the glyph reads as
     "yes / included" on every column tint in both light and dark mode. */
  color: var(--green);
  font-size: 1.25rem;
  font-weight: 800;
}

/* Tiny superscript marker (e.g. "+*") sitting after a value in a
   compare cell. Drives attention to the matching footnote below. */
.pf-footnote-marker {
  font-size: 0.7em;
  font-weight: 700;
  color: var(--accent);
  margin-left: 0.05em;
  letter-spacing: 0.02em;
}

/* Footnote line that lives right under the comparison table. */
.pf-footnote {
  margin: 0.7rem 0 0;
  padding: 0.65rem 0.85rem;
  background: var(--orange-dim);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: left;
}

.pf-footnote sup {
  font-size: 0.85em;
  color: var(--accent);
  font-weight: 700;
  margin-right: 0.15em;
}

.pf-dash {
  /* Red, theme-stable (hardcoded via --red) so the glyph reads as "no /
     not included" on every column tint in both light and dark mode. */
  color: var(--red);
  font-size: 1.25rem;
  font-weight: 700;
}

/* "What changes" benefit cards */
.pf-section-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 2rem 0 0.85rem;
  color: var(--text-primary);
  /* Allow an inline secondary link (e.g. "See Plan Comparison Chart →")
     to sit alongside the title text and wrap to a new line on narrow
     viewports without breaking layout. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.85rem;
}

/* Inline secondary link inside a section title (e.g. anchor jump from
   "Pick your plan" → comparison chart). Smaller, accent-colored. */
.pf-section-link {
  font-family: 'Sora', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.pf-section-link:hover { opacity: 0.75; }
.pf-section-link:active { opacity: 0.6; }

.pf-feels-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

@media (min-width: 540px) {
  .pf-feels-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.pf-feels-card {
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 0.95rem 0.95rem 1rem;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}

[data-theme="light"] .pf-feels-card {
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

.pf-feels-icon {
  font-size: 1.4rem;
  margin-bottom: 0.35rem;
}

.pf-feels-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 0.3rem;
  color: var(--text-primary);
}

.pf-feels-body {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0;
}

/* Emotional CTAs — three feeling-based, full-width cards under the
   comparison chart. Each routes to its matching selectPlan() flow.
   Color treatment mirrors the comparison column tints: orange for
   Trial, green for Monthly + Annual. Inside each card the price is
   the visual hero — large + heavy weight — with a small uppercase
   plan label on its left and a pill-style qualifier on its right. */
.pf-emo-ctas {
  margin: 1.6rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.pf-emo-ctas-title {
  font-family: 'Sora', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  text-align: center;
  color: var(--text-primary);
  margin: 0 0 0.55rem;
  letter-spacing: -0.01em;
}

/* Three-card zigzag stack at the bottom of the comparison page —
   same visual design as the premium-promo popup but inline (each
   card has an explicit min-height instead of flex:1, and the section
   sits in the page flow rather than a full-viewport overlay). The
   original Lora-italic emotional phrases are preserved as the
   .pf-plan-tag blurb on each card. */
.pf-emo-cards {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.5vw, 0.85rem);
  align-items: stretch;
}

.pf-emo-cards .pf-plan {
  width: 80%;
  min-height: clamp(150px, 22vw, 185px);
  padding: clamp(0.7rem, 2vw, 1.1rem) clamp(0.75rem, 2vw, 1.15rem);
  gap: clamp(0.2rem, 0.7vw, 0.45rem);
  overflow: hidden;
}

/* Zigzag stagger of cards + opposite-side shift of internal content
   so the absolute CTA can sit in the dead space without colliding. */
.pf-emo-cards .pf-plan:nth-child(odd) {
  align-self: flex-start;
  align-items: flex-end;
}
.pf-emo-cards .pf-plan:nth-child(even) {
  align-self: flex-end;
  align-items: flex-start;
}

/* Badge inside the card top edge, anchored to the outer side. */
.pf-emo-cards .pf-plan-badge {
  top: clamp(0.4rem, 1.2vw, 0.6rem);
  z-index: 5;
}
.pf-emo-cards .pf-plan:nth-child(odd) .pf-plan-badge {
  left: clamp(0.7rem, 2.5vw, 1.1rem);
  right: auto;
  transform: none;
}
.pf-emo-cards .pf-plan:nth-child(even) .pf-plan-badge {
  right: clamp(0.7rem, 2.5vw, 1.1rem);
  left: auto;
  transform: none;
}

.pf-emo-cards .pf-plan-price {
  font-size: clamp(1.4rem, 5vw, 1.95rem);
}
.pf-emo-cards .pf-plan-period {
  font-size: clamp(0.7rem, 2.2vw, 0.85rem);
}

/* Blurb takes the original Lora italic emotional treatment so the
   feeling-based hook reads as a quote rather than feature copy. */
.pf-emo-cards .pf-plan-tag {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: clamp(0.72rem, 2.3vw, 0.85rem);
  line-height: 1.32;
  margin: 0;
  max-width: 95%;
}

/* CTA pulled out of flex into the card's dead-space side, vertically
   centered between the badge (top) and the blurb (bottom). */
.pf-emo-cards .pf-plan-cta {
  position: absolute;
  top: calc(50% - 0.75rem);
  transform: translateY(-50%);
  width: auto;
  margin: 0;
  padding: clamp(0.55rem, 1.8vw, 0.85rem) clamp(0.95rem, 3vw, 1.5rem);
  font-size: clamp(0.78rem, 2.7vw, 0.92rem);
}
.pf-emo-cards .pf-plan:nth-child(odd) .pf-plan-cta {
  left: clamp(0.7rem, 2.5vw, 1.15rem);
}
.pf-emo-cards .pf-plan:nth-child(even) .pf-plan-cta {
  right: clamp(0.7rem, 2.5vw, 1.15rem);
}

/* ============================================================
   PREMIUM PAGE — "What a second-shop opinion actually costs"
   Deep-dive education section appended below the bottom emotional
   CTAs. Stacked layout: title + intro → Time bucket → comparison
   table (dollars side-by-side) → Mental load bucket → closing
   anchor ($1,500+ vs $9.99) → "Did you know?" warranty insight.
   Uses the orange-scale palette already in play across the page.
   ============================================================ */

/* Secondary in-page link sitting just below the "See Plan
   Comparison Chart →" link — points to #real-cost-title for
   smooth-scroll. Right-aligned and slightly negative-margin so
   it tucks visually under the chart link as a related action. */
.pf-section-sublink-row {
  margin: 0.4rem 0 1rem;
  text-align: center;
}

/* FAQs block on the Premium page — sits between the comparison chart
   and the emotional CTAs. Reuses the .faqs-item accordion styles from
   the dedicated FAQs page; this block just controls outer spacing so
   the section breathes inside the page's vertical rhythm. */
.pf-faq-title {
  margin-top: 1.5rem;
}
.pf-faqs {
  margin: 0.4rem 0 1.5rem;
}
/* Variant for the bottom-of-page jump-link — slightly more breathing
   room above so it doesn't crowd the reassurance line. */
.pf-section-sublink-row-bottom {
  margin: 1rem 0 0.4rem;
}

.real-cost {
  margin: 1.5rem 0 0;
  padding: 0;
}

.real-cost-title {
  font-family: 'Sora', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--text-primary);
  margin: 0 0 0.4rem;
  line-height: 1.2;
}

.real-cost-sub {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.9rem;
  text-align: center;
  color: var(--text-secondary);
  margin: 0 auto 1.1rem;
  line-height: 1.4;
  max-width: 90%;
}

.real-cost-buckets {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.real-cost-bucket {
  background: rgba(232, 101, 10, 0.18);
  border-left: 3px solid var(--orange);
  border-radius: 10px;
  padding: 0.85rem 1rem;
}

.real-cost-bucket-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.45rem;
}
.real-cost-bucket-icon {
  font-size: 1.2rem;
  line-height: 1;
}
.real-cost-bucket-title {
  font-family: 'Sora', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.005em;
}

.real-cost-bucket-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}
.real-cost-bucket-list li {
  font-size: 0.83rem;
  line-height: 1.4;
  color: var(--text-primary);
  padding-left: 1rem;
  position: relative;
}
.real-cost-bucket-list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--orange);
  font-weight: 800;
}
.real-cost-bucket-list li strong {
  color: var(--text-primary);
  font-weight: 800;
  white-space: nowrap;
}

/* Side-by-side dollar comparison: feature / At another shop /
   Auto Advisor. Right column uses deepest orange so it reads as
   the destination tier (matches the live comparison-chart palette). */
.real-cost-compare {
  margin: 0;
  background: var(--card-bg);
  border-radius: 12px;
  padding: 0.85rem 0.6rem 0.7rem;
  border: 1px solid var(--border-color);
}
.real-cost-compare-title {
  font-family: 'Sora', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  text-align: center;
  color: var(--text-primary);
  margin: 0 0 0.65rem;
  letter-spacing: -0.005em;
}
.real-cost-compare-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
}
.real-cost-compare-cell {
  padding: 0.55rem 0.55rem;
  font-size: 0.78rem;
  line-height: 1.25;
  background: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-primary);
}
.real-cost-compare-feat {
  justify-content: flex-start;
  text-align: left;
  font-weight: 600;
}
.real-cost-compare-other {
  background: rgba(232, 101, 10, 0.20);
  font-weight: 700;
  color: #fff;
}
.real-cost-compare-app {
  background: rgba(232, 101, 10, 0.55);
  font-weight: 800;
  color: #fff;
}

/* Light-mode override: body-cell text in the orange-tinted comparison
   tables (Premium plan-chart + cost-compare table) flips from white to
   black so it reads on the lighter peach-over-white surface. Header
   rows (which have deeper, fully-opaque orange backgrounds like #b04a08
   and #dd7a2d) stay white-on-orange in both themes — the
   `.pf-compare-row:not(.pf-compare-head)` scope keeps the body-only
   selectivity. The .pf-limited "Limited" badge on yellow also flips so
   it doesn't end up white-on-yellow in light mode. */
[data-theme="light"] .pf-compare-row:not(.pf-compare-head) > .pf-compare-free,
[data-theme="light"] .pf-compare-row:not(.pf-compare-head) > .pf-compare-single,
[data-theme="light"] .pf-compare-row:not(.pf-compare-head) > .pf-compare-prem,
[data-theme="light"] .real-cost-compare-other,
[data-theme="light"] .real-cost-compare-app,
[data-theme="light"] .pf-limited {
  color: #000;
}
.real-cost-compare-h-other,
.real-cost-compare-h-app {
  font-family: 'Sora', sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #fff;
  padding: 0.45rem 0.4rem;
}
.real-cost-compare-h-other { background: #c25908; }
.real-cost-compare-h-app { background: #b04a08; }
.real-cost-compare-h-feat { background: var(--card-bg); }
.real-cost-compare-total-label {
  font-weight: 800;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
}
.real-cost-compare-total {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* "Did you know?" misdiagnosis-warranty callout — amber to
   contrast with the surrounding orange scale and signal "this
   is the part most drivers don't realize." */
.real-cost-insight {
  margin: 1rem 0 0;
  padding: 1rem 1.1rem;
  background: rgba(245, 158, 11, 0.12);
  border: 1.5px solid rgba(245, 158, 11, 0.55);
  border-radius: 12px;
}
.real-cost-insight-badge {
  display: inline-block;
  font-family: 'Sora', sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.22);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  margin-bottom: 0.55rem;
}
.real-cost-insight-text {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-primary);
  margin: 0 0 0.55rem;
}
.real-cost-insight-text:last-child { margin-bottom: 0; }
.real-cost-insight-text strong {
  color: #fbbf24;
  font-weight: 800;
}

/* Closing anchor — deep-orange gradient with big "vs" headline.
   Drives the "$1,500+ vs $9.99" punch home. */
.real-cost-bottom {
  margin: 1.1rem 0 0;
  padding: 1.1rem 1rem;
  background: linear-gradient(135deg, var(--orange) 0%, #b04a08 100%);
  border-radius: 14px;
  text-align: center;
  color: #fff;
  /* Multi-layer orange glow — tight inner ring, soft halo, outer bloom,
     plus the original depth shadow. Stacks to give the card a "lit-from-
     within" feel so it stands out as the closing pitch of the section. */
  box-shadow:
    0 0 0 1.5px rgba(255, 178, 110, 0.55),
    0 0 20px 4px rgba(232, 101, 10, 0.55),
    0 0 48px 12px rgba(232, 101, 10, 0.30),
    0 6px 18px rgba(176, 74, 8, 0.45);
}
[data-theme="light"] .real-cost-bottom {
  /* Lighter alphas in light mode so the glow reads as a halo on a
     near-white surface without going neon. */
  box-shadow:
    0 0 0 1.5px rgba(255, 178, 110, 0.5),
    0 0 20px 4px rgba(232, 101, 10, 0.32),
    0 0 48px 12px rgba(232, 101, 10, 0.16),
    0 6px 18px rgba(176, 74, 8, 0.22);
}
.real-cost-bottom-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 0.55rem;
  line-height: 1.2;
}
.real-cost-bottom-headline {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  /* Numbers row sits slightly right-of-center to make visual room for
     the larger eyebrow above. Extra left padding pushes the centered
     flex content rightward within the card. */
  padding-left: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.real-cost-bottom-headline .real-cost-bottom-vs {
  font-size: 0.85rem;
  font-weight: 700;
  opacity: 0.85;
  align-self: center;
}
.real-cost-bottom-headline .real-cost-bottom-was {
  font-size: 1.85rem;
  font-weight: 900;
  opacity: 0.85;
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.6);
  line-height: 1;
}
.real-cost-bottom-plans {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  font-weight: 900;
}
.real-cost-bottom-plan {
  font-size: 1.2rem;
  line-height: 1.15;
  white-space: nowrap;
}
.real-cost-bottom-plan-unit {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0;
  opacity: 0.9;
  margin-left: 0.1rem;
}

.pf-emo-cta {
  appearance: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  padding: 1.05rem 1.15rem 1.1rem;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.1s, box-shadow 0.15s, filter 0.15s;
}

.pf-emo-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22); filter: brightness(1.05); }
.pf-emo-cta:active { transform: translateY(0); filter: brightness(0.97); }

.pf-emo-cta-line {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Bottom strip: PLAN  ·  $PRICE  ·  qualifier-pill — laid out as a
   baseline-aligned flex row so the big price drops down between the
   short plan label and the pill without any hard pixel math. */
.pf-emo-cta-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.45rem 0.7rem;
}

.pf-emo-cta-plan {
  font-family: 'Sora', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.92);
}

.pf-emo-cta-price {
  font-family: 'Outfit', sans-serif;
  font-size: 1.65rem;
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}

/* "/mo" or "/yr" suffix inside the price — sized down so the dollar
   amount stays the visual anchor. */
.pf-emo-cta-period {
  font-size: 0.58em;
  font-weight: 700;
  opacity: 0.9;
  margin-left: 0.08em;
  letter-spacing: 0;
}

.pf-emo-cta-qual {
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  text-transform: lowercase;
  white-space: nowrap;
  align-self: center;
}

/* "save 50%" pill on the Annual card — gold/amber to scream value
   against the deep-green background. */
.pf-emo-cta-qual-save {
  background: #fde68a;
  color: #7c2d12;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 900;
}

/* Trial — orange, matches 3-Day column tint */
.pf-emo-cta-trial {
  background: linear-gradient(135deg, #f59e0b 0%, #ea7c0a 100%);
}

/* Monthly — green, matches Premium column tint (slightly brighter) */
.pf-emo-cta-monthly {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* Annual — deeper green, signals best value */
.pf-emo-cta-annual {
  background: linear-gradient(135deg, #059669 0%, #065f46 100%);
}

.pf-reassure {
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 1.6rem 0 0.8rem;
}

.pf-cta {
  margin: 0.5rem 0 1.5rem;
}

.pf-cta .btn-primary {
  width: 100%;
}

/* ============================================================
   PREMIUM PROMO POPUP — alternate three-card layout
   The live #premium-promo-modal hosts this design now (the
   previous single-CTA layout is preserved only as a mockup
   in mockups/pages/modal-premium-promo.html and is no longer
   triggered in the app).

   Structure:
     #premium-promo-modal.modal.alt-promo-modal     (full-vp overlay)
       .alt-promo                                   (full-bleed panel)
         .alt-promo-eyebrow / -title / -sub         (header)
         .pf-plans.pf-plans-3                       (cards container)
           .pf-plan.pf-plan-single   (Trial,   left)
           .pf-plan.pf-plan-prem     (Monthly, right, hero)
           .pf-plan.pf-plan-yearly   (Annual,  left)
         .alt-promo-fineprint                       (asterisk note)
         .alt-promo-skip                            (Maybe later)

   Cards zigzag-stagger left/right (align-self) and shift their
   internal content to the OPPOSITE side (align-items) — so the
   absolute-positioned CTA can sit centered in each card's
   "dead space" without colliding with the content.
   ============================================================ */

/* Adapt the generic .modal flex layout for the full-bleed three-card
   panel. Two key overrides vs the default .modal:
     - position: absolute (anchored to #app, which is position: relative
       and max-width: 480px) instead of position: fixed (browser
       viewport). Without this the modal spills the full browser width
       on desktop, ignoring the phone-shaped app column.
     - align-items / justify-content: stretch so the panel fills the
       app column (vs the default sheet-from-bottom layout).
   Also: dark plain backdrop and tight padding so the panel reads
   almost-edge-to-edge. */
.modal.alt-promo-modal {
  position: absolute;
  inset: 0;
  align-items: stretch;
  justify-content: stretch;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: none;
  padding: clamp(0.4rem, 1.5vw, 0.85rem);
}

.alt-promo {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--charcoal);
  border-radius: clamp(12px, 3vw, 18px);
  padding: clamp(0.7rem, 2vw, 1.1rem) clamp(0.55rem, 1.8vw, 0.85rem) clamp(0.5rem, 1.6vw, 0.85rem);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: alt-pop-in 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes alt-pop-in {
  from { transform: translateY(16px) scale(0.97); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.alt-promo-close {
  position: absolute;
  top: clamp(0.3rem, 1vw, 0.55rem);
  right: clamp(0.3rem, 1vw, 0.55rem);
  appearance: none;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--text-secondary);
  font-size: clamp(1rem, 3.5vw, 1.3rem);
  line-height: 1;
  width: clamp(26px, 7vw, 32px);
  height: clamp(26px, 7vw, 32px);
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.alt-promo-close:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-primary);
}

.alt-promo-eyebrow {
  font-family: 'Sora', sans-serif;
  font-size: clamp(0.6rem, 1.9vw, 0.7rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--orange);
  text-align: center;
  margin: 0 0 clamp(0.15rem, 0.7vw, 0.3rem);
  flex-shrink: 0;
}

.alt-promo-title {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1rem, 4.2vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--text-primary);
  margin: 0 0 clamp(0.2rem, 0.9vw, 0.4rem);
  line-height: 1.2;
  flex-shrink: 0;
}
.alt-promo-title u {
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.alt-promo-sub {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: clamp(0.74rem, 2.4vw, 0.9rem);
  text-align: center;
  color: var(--text-secondary);
  margin: 0 0 clamp(0.4rem, 1.4vw, 0.85rem);
  line-height: 1.35;
  flex-shrink: 0;
}

/* "All plans intended to save you money, time, anxiety" tagline that
   sits below the .alt-promo-sub. Slightly smaller and lighter than the
   subtitle so it reads as supporting copy. The three benefit words are
   wrapped in .alt-promo-hl for orange-accent emphasis. */
.alt-promo-tagline {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(0.7rem, 2.1vw, 0.82rem);
  text-align: center;
  color: var(--text-secondary);
  margin: 0 0 clamp(0.4rem, 1.4vw, 0.85rem);
  line-height: 1.35;
  flex-shrink: 0;
}
.alt-promo-hl {
  /* Switched to Outfit 900 (already loaded for the app's display
     headlines) because Manrope's bold weight is subtle and didn't read
     as visually emphasized against the surrounding tagline. Outfit at
     900 is a true black weight that pops clearly. */
  font-family: 'Outfit', sans-serif;
  color: var(--accent);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.08em;
}

/* Cards container takes leftover vertical space between the header and
   the footer; cards inside share that space equally via flex:1. */
.alt-promo .pf-plans {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 1.3vw, 0.65rem);
  margin: 0;
  align-items: stretch;
}

.alt-promo .pf-plan {
  flex: 1;
  min-height: 0;
  width: 80%;
  padding: clamp(0.6rem, 2vw, 1.1rem) clamp(0.7rem, 2vw, 1.15rem);
  gap: clamp(0.2rem, 0.7vw, 0.45rem);
  /* No overflow: hidden — the .alt-promo-more pill needs to sit outside
     the card's right (odd children) or left (even children) edge, in the
     20% dead-space that the zigzag layout leaves on each row. */
}

/* Zigzag stagger of the cards themselves + opposite-side shift of
   their internal content so the absolute CTA can sit in the dead
   space without colliding with the name/price/blurb stack. */
.alt-promo .pf-plan:nth-child(odd) {
  align-self: flex-start;
  align-items: flex-end;
}
.alt-promo .pf-plan:nth-child(even) {
  align-self: flex-end;
  align-items: flex-start;
}

/* Badge sits inside the card's top edge (overrides the live default
   of top: -0.55rem which would be clipped by overflow: hidden) and
   anchors to the OUTER side of each card (matches the card's zigzag). */
.alt-promo .pf-plan-badge {
  top: clamp(0.35rem, 1.2vw, 0.55rem);
  z-index: 5;
}
.alt-promo .pf-plan:nth-child(odd) .pf-plan-badge {
  left: clamp(0.7rem, 2.5vw, 1.1rem);
  right: auto;
  transform: none;
}
.alt-promo .pf-plan:nth-child(even) .pf-plan-badge {
  right: clamp(0.7rem, 2.5vw, 1.1rem);
  left: auto;
  transform: none;
}

.alt-promo .pf-plan-name {
  font-size: clamp(0.85rem, 3vw, 1.05rem);
}
.alt-promo .pf-plan-price {
  font-size: clamp(1.4rem, 5.4vw, 1.95rem);
}
.alt-promo .pf-plan-period {
  font-size: clamp(0.7rem, 2.3vw, 0.85rem);
}
.alt-promo .pf-plan-tag {
  font-size: clamp(0.62rem, 2vw, 0.74rem);
  line-height: 1.32;
  margin: 0;
  max-width: 95%;
}

/* CTA — pulled out of the flex column via position: absolute so it
   floats in the card's dead space (the side opposite to where the
   content was shifted via align-items). Vertically centered between
   the badge (~1.5rem from top) and the blurb (~3rem from bottom),
   which sits at calc(50% - 0.75rem) — slightly above geometric
   center to compensate for the asymmetric obstacles. */
.alt-promo .pf-plan-cta {
  position: absolute;
  top: calc(50% - 0.75rem);
  transform: translateY(-50%);
  width: auto;
  margin: 0;
  padding: clamp(0.55rem, 1.8vw, 0.85rem) clamp(0.95rem, 3vw, 1.5rem);
  font-size: clamp(0.78rem, 2.7vw, 0.92rem);
}
.alt-promo .pf-plan:nth-child(odd) .pf-plan-cta {
  left: clamp(0.7rem, 2.5vw, 1.15rem);
}
.alt-promo .pf-plan:nth-child(even) .pf-plan-cta {
  right: clamp(0.7rem, 2.5vw, 1.15rem);
}

/* Inline "More info" link inside the popup's subtitle paragraph. Styled
   as a tap-friendly text link (button element so click semantics are
   real, but visually plain) — closes the promo and navigates to the
   full Premium Features page so users can read more before committing. */
.alt-promo-more-link {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.alt-promo-more-link:hover { color: var(--accent-light, #ff7a1a); }
.alt-promo-more-link:active { color: var(--accent); opacity: 0.85; }

.alt-promo-fineprint {
  text-align: center;
  font-size: clamp(0.62rem, 2vw, 0.72rem);
  color: var(--text-secondary);
  margin: clamp(0.25rem, 0.9vw, 0.45rem) 0 clamp(0.25rem, 0.9vw, 0.5rem);
  line-height: 1.35;
  flex-shrink: 0;
}

.alt-promo-skip {
  display: block;
  width: 100%;
  appearance: none;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: 'Sora', sans-serif;
  font-size: clamp(0.7rem, 2.4vw, 0.78rem);
  font-weight: 600;
  padding: clamp(0.3rem, 1vw, 0.5rem) 0 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}
.alt-promo-skip:hover {
  color: var(--text-primary);
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

/* ============================================================
   FAQs PAGE — opened from Settings → FAQs
   ============================================================ */

.faqs-hero {
  text-align: center;
  padding: 0.75rem 0 1rem;
}
.faqs-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 0.4rem;
  line-height: 1.2;
}
.faqs-intro {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

.faqs-item {
  background:
    linear-gradient(135deg, rgba(232, 101, 10, 0.10) 0%, rgba(232, 101, 10, 0.02) 100%),
    var(--card-bg);
  border: 1px solid rgba(232, 101, 10, 0.28);
  border-radius: 12px;
  margin: 0 0 0.6rem;
  overflow: hidden;
}
[data-theme="light"] .faqs-item {
  background:
    linear-gradient(135deg, rgba(232, 101, 10, 0.06) 0%, rgba(232, 101, 10, 0.015) 100%),
    var(--card-bg);
  border-color: rgba(232, 101, 10, 0.20);
}
.faqs-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  user-select: none;
}
.faqs-item > summary::-webkit-details-marker { display: none; }
.faqs-item > summary::after {
  content: '\25B8';
  margin-left: auto;
  color: var(--accent);
  font-size: 0.95em;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.faqs-item[open] > summary::after { transform: rotate(90deg); }
.faqs-q-icon {
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
}
.faqs-q-text {
  flex: 1;
  font-family: 'Outfit', sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}
.faqs-a {
  padding: 0 0.95rem 0.95rem;
  border-top: 1px solid rgba(232, 101, 10, 0.18);
  margin-top: 0.1rem;
}
.faqs-a p {
  margin: 0.7rem 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-primary);
}
.faqs-a p:first-child { margin-top: 0.75rem; }
.faqs-list {
  margin: 0.7rem 0 0;
  padding-left: 1.4rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-primary);
}
.faqs-list li { margin-bottom: 0.35rem; }
.faqs-list li:last-child { margin-bottom: 0; }

.faqs-cta-line {
  margin: 1.25rem 0 0.5rem;
  text-align: center;
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.4;
}
.faqs-cta-line a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Inline link inside a FAQ answer body — accent-colored, underlined,
   bold so it reads as a real call-to-action embedded in the text. */
.faqs-inline-link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.faqs-inline-link:hover { opacity: 0.78; }
.faqs-inline-link:active { opacity: 0.6; }

/* ============================================================
   WARNING LIGHT CODES PAGE — OBD-II P-code reference
   ============================================================ */

.wlc-intro {
  background:
    linear-gradient(135deg, rgba(232, 101, 10, 0.14) 0%, rgba(232, 101, 10, 0.03) 100%),
    var(--card-bg);
  border: 1px solid rgba(232, 101, 10, 0.30);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  margin: 0.5rem 0 1rem;
}
.wlc-intro p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--text-primary);
}
.wlc-intro p + p { margin-top: 0.5rem; }
.wlc-intro-sub {
  font-size: 0.82rem !important;
  color: var(--text-secondary) !important;
  font-style: italic;
}

.wlc-search-wrap {
  margin: 0 0 0.9rem;
  position: relative;
}
.wlc-search {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  box-sizing: border-box;
}
.wlc-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(232, 101, 10, 0.18);
}

.wlc-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wlc-section,
.wlc-subsection {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--elev-shadow);
}
.wlc-section.hidden,
.wlc-subsection.hidden { display: none; }

.wlc-section > summary,
.wlc-subsection > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  user-select: none;
  transition: background 0.12s;
}
.wlc-section > summary::-webkit-details-marker,
.wlc-subsection > summary::-webkit-details-marker { display: none; }
.wlc-section > summary::before {
  content: '\25B8';
  display: inline-block;
  font-size: 0.85em;
  color: var(--accent);
  width: 0.85em;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.wlc-section[open] > summary::before { transform: rotate(90deg); }
.wlc-section > summary:hover { background: rgba(232, 101, 10, 0.06); }

.wlc-subsection {
  border-radius: 10px;
  margin: 0.35rem 0.85rem 0.35rem;
  box-shadow: none;
}
.wlc-subsection > summary {
  padding: 0.65rem 0.85rem;
  font-size: 0.92rem;
  font-weight: 700;
}
.wlc-subsection > summary::before {
  content: '\25B8';
  display: inline-block;
  font-size: 0.8em;
  color: var(--text-secondary);
  width: 0.85em;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.wlc-subsection[open] > summary::before { transform: rotate(90deg); }

.wlc-section-title-text { flex: 1; }
.wlc-count {
  font-family: 'Sora', sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  flex-shrink: 0;
}
[data-theme="light"] .wlc-count {
  background: rgba(0, 0, 0, 0.04);
}

.wlc-section-intro {
  margin: 0 1rem 0.4rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.4;
}

.wlc-codes {
  display: flex;
  flex-direction: column;
  padding: 0 0.5rem 0.5rem;
}

.wlc-code,
.wlc-code-range {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.7rem;
  background: transparent;
  border: none;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-primary);
  transition: background 0.1s, transform 0.08s;
}
.wlc-code:hover {
  background: rgba(232, 101, 10, 0.10);
}
.wlc-code:active { transform: scale(0.99); }
.wlc-code.hidden { display: none; }

.wlc-code-range {
  cursor: default;
  opacity: 0.78;
}
.wlc-code-range:hover { background: transparent; }

.wlc-code-num {
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--accent);
  background: rgba(232, 101, 10, 0.12);
  border: 1px solid rgba(232, 101, 10, 0.32);
  padding: 0.28rem 0.5rem;
  border-radius: 6px;
  flex-shrink: 0;
  min-width: 4.6rem;
  text-align: center;
  white-space: nowrap;
}
.wlc-code-range .wlc-code-num {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-color);
}
[data-theme="light"] .wlc-code-range .wlc-code-num {
  background: rgba(0, 0, 0, 0.03);
}

.wlc-code-desc {
  flex: 1;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--text-primary);
}
.wlc-code-range .wlc-code-desc {
  color: var(--text-secondary);
  font-style: italic;
}

.wlc-code-arrow {
  color: var(--text-secondary);
  opacity: 0.6;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Lock indicator — rendered into every row but hidden by default. Shown
   in place of the chevron when the parent list has .wlc-list-free, i.e.,
   the user is on the free plan. Tapping a locked row still fires
   App.askAboutCode(code), which detects the free plan and routes the user
   to the premium promo popup instead of the Advisor. */
.wlc-code-lock {
  display: none;
  font-size: 0.95rem;
  flex-shrink: 0;
  opacity: 0.7;
}
.wlc-list-free .wlc-code-arrow { display: none; }
.wlc-list-free .wlc-code-lock { display: inline; }
/* Free-plan rows read as informational rather than actionable: hover is
   a touch lighter and there's no scale-on-press, so the row doesn't feel
   like a primary tap target. The whole row is still a button (the lock
   icon + tap-to-upgrade is the conversion surface) but visually quieter. */
.wlc-list-free .wlc-code:hover {
  background: rgba(232, 101, 10, 0.06);
}
.wlc-list-free .wlc-code:active { transform: none; }

/* v2.21.0 — Inline info panel for OBD-II codes. Tapping a code row
   expands a panel beneath it with "Likely causes" + "What to check
   first" and an "Ask Auto Advisor" CTA. Static content — zero tokens
   unless the user explicitly taps the CTA. */
.wlc-code-row {
  display: block;
}
.wlc-code-row.hidden { display: none; }
.wlc-code-row.expanded .wlc-code-arrow {
  transform: rotate(90deg);
  opacity: 0.95;
  transition: transform 0.18s ease;
}
.wlc-code-arrow {
  transition: transform 0.18s ease;
}
.wlc-code-panel {
  margin: 0.4rem 0 0.75rem;
  padding: 0.9rem 1rem;
  background: rgba(232, 101, 10, 0.06);
  border-left: 3px solid var(--accent, #e8650a);
  border-radius: 0 10px 10px 0;
  animation: wlcPanelIn 0.18s ease-out;
}
.wlc-code-panel.hidden { display: none; }
[data-theme="light"] .wlc-code-panel {
  background: rgba(232, 101, 10, 0.08);
}
@keyframes wlcPanelIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wlc-code-panel-section + .wlc-code-panel-section {
  margin-top: 0.85rem;
}
.wlc-code-panel-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent, #e8650a);
  margin-bottom: 0.35rem;
}
.wlc-code-panel-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--text-primary);
  font-size: 0.92rem;
  line-height: 1.5;
}
.wlc-code-panel-list li { margin-bottom: 0.35rem; }
.wlc-code-panel-list li:last-child { margin-bottom: 0; }
.wlc-code-panel-fallback {
  margin: 0;
  color: var(--text-primary);
  font-size: 0.92rem;
  line-height: 1.5;
}
.wlc-code-panel-cta-wrap {
  margin-top: 1rem;
  display: flex;
  justify-content: stretch;
}
.wlc-code-panel-cta {
  width: 100%;
  font-size: 0.95rem;
  padding: 0.75rem 1rem;
}

.wlc-footnote {
  margin-top: 1rem;
  padding: 0.75rem 0.9rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-style: italic;
}

/* =============================================================
   COMMUNITY SCREEN
   ============================================================= */

/* Dashboard entry-point link card. Discreet rectangle between the
   orange quick-ask surface and the top tile grid; routes the user to
   #screen-community where curated example questions live. Mirrors
   the .home-subscribe-cta card geometry so the dashboard's vertical
   rhythm stays consistent. */
.home-community-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  margin: 0.45rem 0 0.6rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text-primary);
  box-shadow: var(--elev-shadow);
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.home-community-link:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--elev-shadow-hover);
}
.home-community-link:active {
  transform: translateY(0);
}
.home-community-link-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  line-height: 1;
}
.home-community-link-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1 1 auto;
  min-width: 0;
}
.home-community-link-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.home-community-link-sub {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.3;
}
.home-community-link-arrow {
  font-size: 1.3rem;
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}

/* Intro block at the top of the Community screen. */
.community-intro {
  margin: 0 0 1rem;
}
.community-intro-headline {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 0.3rem;
}
.community-intro-sub {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

/* Each category gets a small all-caps header above its question list,
   matching the dashboard's "POPULAR QUESTIONS" / tile-section rhythm
   so the screen feels like part of the same app, not a new design. */
.community-category {
  margin-bottom: 1.3rem;
}
.community-category:last-of-type {
  margin-bottom: 0.6rem;
}
.community-category-title {
  font-family: 'Sora', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 0.55rem;
}
.community-questions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Tappable question card. Left-aligned full-width button with a
   right-side chevron that rotates 90° to point DOWN when the matching
   answer is expanded — communicates the toggle state without needing
   text. Sits visually paired with its .community-answer slot below it
   in the DOM. */
.community-question {
  display: block;
  position: relative;
  width: 100%;
  padding: 0.85rem 2.4rem 0.85rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  color: var(--text-primary);
  font-family: 'Sora', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--elev-shadow);
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s, background 0.15s;
}
.community-question::after {
  content: '\203A';
  position: absolute;
  right: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.18s ease;
}
.community-question:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--elev-shadow-hover);
}
.community-question:active {
  transform: translateY(0);
}
.community-question--expanded {
  border-color: var(--accent);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}
.community-question--expanded::after {
  transform: translateY(-50%) rotate(90deg);
}

/* Expanded answer slot. Visually attaches to the question above by
   matching border + losing the top radius. Rendered content is the
   verdict chip (when present), the structured body, and the "Ask my
   version" CTA — all inside this single container. */
.community-answer {
  position: relative;
  margin-top: -1px; /* pull the answer flush against the question's bottom */
  padding: 0.9rem 1rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--accent);
  border-top: 1px dashed var(--border-color);
  border-radius: 0 0 12px 12px;
  box-shadow: var(--elev-shadow);
  animation: communityAnswerIn 0.18s ease-out;
}
@keyframes communityAnswerIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.community-answer.hidden { display: none; }

.community-answer-loading,
.community-answer-error {
  padding: 0.4rem 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-style: italic;
}
.community-answer-error {
  color: var(--red);
  font-style: normal;
}

/* Answer prose. Mirrors the assistant chat-bubble's typography so the
   community example reads as the same Advisor voice users would see in
   a live response — same paragraph spacing, same heading weight via
   the **bold** markdown that the structured response uses for section
   headers. */
.community-answer-body {
  font-size: 0.9rem;
  color: var(--text-primary);
  line-height: 1.6;
}
.community-answer-body p {
  margin: 0 0 0.7rem;
}
.community-answer-body p:last-child {
  margin-bottom: 0;
}
.community-answer-body strong {
  display: inline;
  font-weight: 700;
  color: var(--text-primary);
}
.community-answer-body ul {
  margin: 0 0 0.7rem;
  padding-left: 1.2rem;
}
.community-answer-body li {
  margin-bottom: 0.35rem;
}

/* Reuse the .advisor-verdict-chip styling for the chip inside an
   expanded community answer. The renderer emits the same class, so no
   override needed — just tighten the bottom margin so the chip sits
   closer to the structured body that follows. */
.community-answer .advisor-verdict-chip {
  margin-bottom: 0.8rem;
}

/* CTA at the bottom of each expanded answer — gives the user a path
   to the live Advisor with this question as the starting prompt. */
.community-answer-cta {
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--border-color);
}
.community-answer-ask-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.95rem;
  background: var(--accent);
  border: none;
  border-radius: 999px;
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: filter 0.12s ease, transform 0.1s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 6px rgba(232, 101, 10, 0.28);
}
.community-answer-ask-btn:hover {
  filter: brightness(1.06);
  box-shadow: 0 4px 10px rgba(232, 101, 10, 0.36);
}
.community-answer-ask-btn:active {
  transform: scale(0.98);
}
.community-answer-ask-arrow {
  font-size: 1.05em;
  line-height: 1;
}

.community-footnote {
  margin: 1.2rem 0 0;
  padding: 0.7rem 0.9rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.4;
  background: var(--card-bg);
  border: 1px dashed var(--border-color);
  border-radius: 10px;
  font-style: italic;
}