/* =============================================================
   2OA v2.0.0 — Redesign stylesheet
   =============================================================
   Loaded AFTER styles.css so v2 rules win on cascade order.
   Each section below carries the CSS for one screen, extracted
   from its mockup in mockups/redesign/screen-X.html (which
   remain in place as historical references). Class names are
   prefixed per-screen (e.g. dash-v2-, veh-v2-, prem-v2-) so
   they never collide with live v1 classes — the v1 CSS in
   styles.css is intentionally left in place as dead code for
   now; a follow-up cleanup release will prune it.
   ============================================================= */

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

/* Page surface. In dark mode (default) this is a near-black with
   a barely-visible vertical gradient to lift the top of the screen
   slightly. In light mode it's a warm off-white. */
.dash-v2 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary, #0e0e10);
  color: var(--text-primary, #f5f3ef);
}
[data-theme="light"] .dash-v2 {
  background: var(--bg-primary, #f7f5f2);
}

/* Top header. Greeting on the left, UPGRADE pill on the right
   (auto-injected by app.js in the live build). Tight padding,
   no decorative borders — matches the references' minimal
   title-bar treatment. */
.dash-v2-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.95rem 1.1rem 0.6rem;
  background: var(--bg-primary, #0e0e10);
}
[data-theme="light"] .dash-v2-header {
  background: var(--bg-primary, #f7f5f2);
}
.dash-v2-greet {
  font-family: 'Outfit', sans-serif;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--text-primary, #f5f3ef);
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - 7rem); /* leave room for upgrade pill */
}
.dash-v2-greet-sub {
  display: block;
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary, #a4a3a0);
  letter-spacing: 0;
  margin-top: 0.15rem;
}

/* Scrollable body wrapper. Generous side padding, vertical rhythm
   controlled per-section to allow some sections to sit tighter
   than others. */
.dash-v2-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.3rem 1.1rem 1.3rem;
  -webkit-overflow-scrolling: touch;
}

/* Section labels. Small uppercase Sora, very light letter
   spacing, dim color. Acts as the visual divider between
   grouped feature cards. */
.dash-v2-section-label {
  font-family: 'Sora', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
  margin: 1.1rem 0.25rem 0.55rem;
}
.dash-v2-section-label:first-child {
  margin-top: 0.3rem;
}

/* ===== Hero: Ask card =====
   The dashboard's primary surface. Replaces the orange "quick-ask"
   bubble but keeps the same content: label, textarea, popular
   question chips, Ask Now button, Subscribe upsell.
   Visual: no border, no tinted fill — the surface blends with the
   page background. Differentiation comes from the eyebrow accent
   label, typography, and the orange Ask Now button at the bottom. */
.dash-v2-hero {
  position: relative;
  background: transparent;
  border: none;
  border-radius: 16px;
  padding: 0.4rem 0.25rem 0.6rem;
  box-shadow: none;
}
[data-theme="light"] .dash-v2-hero {
  background: transparent;
  box-shadow: none;
}
.dash-v2-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Sora', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent, #e8650a);
  margin-bottom: 0.4rem;
}
.dash-v2-hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--accent, #e8650a);
  box-shadow: 0 0 0 3px rgba(232, 101, 10, 0.25);
}
.dash-v2-hero-headline {
  font-family: 'Outfit', sans-serif;
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--text-primary, #f5f3ef);
  margin: 0 0 0.25rem;
}
.dash-v2-hero-sub {
  font-size: 0.85rem;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.4;
  margin: 0 0 0.85rem;
}
/* v2.7.4 — Educational prompts list replacing the old Ask-an-Expert
   headline + sub. Three short questions with orange checkmarks, then
   the dash-v2-hero-sub below acts as the unified answer line. */
.dash-v2-hero-prompts {
  list-style: none;
  margin: 0 0 0.65rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.dash-v2-hero-prompts li {
  position: relative;
  padding-left: 1.4rem;
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-primary, #f5f3ef);
}
.dash-v2-hero-prompts li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0.1em;
  color: var(--orange, #f57c00);
  font-weight: 800;
  font-size: 0.95em;
}
.dash-v2-hero-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 88px;
  padding: 0.7rem 0.85rem;
  background: #fff;
  border: none;
  border-radius: 10px;
  color: #1a1a1a;
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  line-height: 1.45;
  resize: vertical;
  transition: box-shadow 0.15s ease, background 0.15s ease;
}
[data-theme="light"] .dash-v2-hero-textarea {
  background: #fff;
  color: #1a1a1a;
}
.dash-v2-hero-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(232, 101, 10, 0.32);
}
.dash-v2-hero-textarea::placeholder {
  color: #8a8a8a;
  opacity: 1;
}

/* Chip scroller below the textarea. Same horizontal-scroll
   pattern as the existing .home-quick-prompts-chips but
   restyled to sit cleaner inside the hero card. */
.dash-v2-hero-chips {
  margin: 0.7rem -0.25rem 0;
  padding: 0.15rem 0.25rem 0.4rem;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0.25rem;
  scrollbar-width: none;
}
.dash-v2-hero-chips::-webkit-scrollbar { display: none; }
.dash-v2-hero-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  white-space: nowrap;
  padding: 0.4rem 0.85rem;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 999px;
  color: var(--text-primary, #f5f3ef);
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}
[data-theme="light"] .dash-v2-hero-chip {
  background: rgba(0, 0, 0, 0.05);
}
.dash-v2-hero-chip:hover {
  background: rgba(232, 101, 10, 0.14);
}

/* Upload Invoice — alternative input affordance inside the hero card.
   Dashed orange border signals "drop zone / attach" without competing
   with the solid-orange Ask Now CTA below. Same handler routes through
   the advisor's existing attach flow + paid-plan gate. */
.dash-v2-hero-upload {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.7rem;
  padding: 0.7rem 0.9rem;
  background: rgba(232, 101, 10, 0.06);
  border: 1px dashed rgba(232, 101, 10, 0.45);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
[data-theme="light"] .dash-v2-hero-upload {
  background: rgba(232, 101, 10, 0.04);
}
.dash-v2-hero-upload:hover {
  background: rgba(232, 101, 10, 0.12);
  border-color: rgba(232, 101, 10, 0.7);
}
.dash-v2-hero-upload:active {
  transform: scale(0.99);
}
.dash-v2-hero-upload-icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
  color: var(--accent, #e8650a);
}
.dash-v2-hero-upload-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.dash-v2-hero-upload-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary, #f5f3ef);
}
.dash-v2-hero-upload-sub {
  font-size: 0.74rem;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.35;
}
.dash-v2-hero-upload-arrow {
  color: var(--accent, #e8650a);
  font-size: 1.3rem;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}

.dash-v2-hero-cta {
  display: block;
  width: 100%;
  margin-top: 0.7rem;
  padding: 0.85rem 1rem;
  background: var(--accent, #e8650a);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 12px rgba(232, 101, 10, 0.32);
  transition: filter 0.12s ease, transform 0.1s ease;
}
.dash-v2-hero-cta:hover {
  filter: brightness(1.06);
}
.dash-v2-hero-cta:active {
  transform: scale(0.99);
}

/* Subscribe upsell sub-card inside the hero. Sits below the
   Ask Now button. Borderless, ambient surface — reads as a
   gentle handoff to the upgrade flow rather than a hard CTA. */
.dash-v2-hero-upsell {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  margin-top: 0.8rem;
  padding: 0.7rem 0.1rem;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.dash-v2-hero-upsell-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.dash-v2-hero-upsell-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary, #f5f3ef);
}
.dash-v2-hero-upsell-sub {
  font-size: 0.74rem;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.35;
}
.dash-v2-hero-upsell-arrow {
  color: var(--accent, #e8650a);
  font-size: 1.3rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ===== Feature cards =====
   Each card uses the icon-disc-top-left + heading + body layout
   from the reference designs. All-orange icon discs by default
   (brand coherence > confetti coloring). Status accents (red /
   yellow / green) can override the disc per-card when the
   underlying data warrants it (e.g. open recalls = red). */
.dash-v2-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.dash-v2-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.85rem 0.9rem 0.9rem;
  background: transparent;
  /* v2.23.24 — Subtle 1px border so the tile reads as a defined
     surface rather than a borderless card. Light-mode override below. */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: var(--text-primary, #f5f3ef);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s ease, transform 0.1s ease;
}
.dash-v2-card:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}
[data-theme="light"] .dash-v2-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .dash-v2-card:hover {
  background: rgba(0, 0, 0, 0.04);
}
.dash-v2-card:active { transform: translateY(0); }

.dash-v2-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 12px;
  font-size: 1.1rem;
  line-height: 1;
  background: rgba(232, 101, 10, 0.16);
  color: var(--accent, #e8650a);
  box-shadow: inset 0 0 0 1px rgba(232, 101, 10, 0.30);
}
.dash-v2-card-icon--green {
  background: rgba(60, 179, 113, 0.18);
  box-shadow: inset 0 0 0 1px rgba(60, 179, 113, 0.34);
  color: var(--green, #3cb371);
}
.dash-v2-card-icon--yellow {
  background: rgba(240, 185, 74, 0.18);
  box-shadow: inset 0 0 0 1px rgba(240, 185, 74, 0.36);
  color: var(--yellow, #f0b94a);
}
.dash-v2-card-icon--red {
  background: rgba(224, 85, 85, 0.18);
  box-shadow: inset 0 0 0 1px rgba(224, 85, 85, 0.36);
  color: var(--red, #e05555);
}
.dash-v2-card-icon--blue {
  background: rgba(59, 130, 246, 0.18);
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.36);
  color: #3b82f6;
}

.dash-v2-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.97rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-primary, #f5f3ef);
}
.dash-v2-card-sub {
  font-size: 0.78rem;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.35;
}

/* Status pill option (e.g. "3 open" on Recalls). Sits in the
   top-right corner of the card so it's the first thing the eye
   lands on after the icon. */
.dash-v2-card-pill {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  padding: 0.18rem 0.55rem;
  font-family: 'Sora', sans-serif;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(224, 85, 85, 0.16);
  color: var(--red, #e05555);
  box-shadow: inset 0 0 0 1px rgba(224, 85, 85, 0.32);
}
.dash-v2-card-pill.is-ok {
  background: rgba(60, 179, 113, 0.16);
  color: var(--green, #3cb371);
  box-shadow: inset 0 0 0 1px rgba(60, 179, 113, 0.32);
}
.dash-v2-card-pill.is-warn {
  background: rgba(240, 185, 74, 0.16);
  color: var(--yellow, #f0b94a);
  box-shadow: inset 0 0 0 1px rgba(240, 185, 74, 0.32);
}
.dash-v2-card-pill.hidden { display: none; }

/* Community link — a single full-width feature card with a
   chevron on the right. Borderless, ambient — matches the rest
   of the feature card family. */
.dash-v2-community {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.9rem 0.6rem 0.9rem 0.4rem;
  background: transparent;
  /* v2.23.24 — Match the standard-tile border treatment so the
     community row reads as the same surface family. */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: var(--text-primary, #f5f3ef);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s ease, transform 0.1s ease;
}
.dash-v2-community:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}
[data-theme="light"] .dash-v2-community {
  border: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .dash-v2-community:hover {
  background: rgba(0, 0, 0, 0.04);
}
.dash-v2-community-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.dash-v2-community-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.97rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary, #f5f3ef);
}
.dash-v2-community-sub {
  font-size: 0.76rem;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.35;
}
.dash-v2-community-arrow {
  color: var(--accent, #e8650a);
  font-size: 1.3rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ===== Upgrade region =====
   Two-card row that visually pairs as a single CTA group. The
   primary card is solid green with a glossy bubble treatment
   (carried over from v1.125.5); the secondary is solid black
   with a matching gloss. Section label above. */
.dash-v2-upgrade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}
.dash-v2-upgrade-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.95rem 0.7rem 0.95rem;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: transform 0.12s ease, filter 0.12s ease;
  border: 1px solid transparent;
}
.dash-v2-upgrade-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60%;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 0%,
    rgba(255, 255, 255, 0.40) 0%,
    rgba(255, 255, 255, 0.10) 45%,
    rgba(255, 255, 255, 0) 80%);
}
.dash-v2-upgrade-card:hover { filter: brightness(1.04); }
.dash-v2-upgrade-card:active { transform: scale(0.99); }
.dash-v2-upgrade-card--primary {
  background: var(--green, #3cb371);
  border-color: var(--green, #3cb371);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -10px 18px rgba(0, 0, 0, 0.18),
    0 0 18px 3px rgba(60, 179, 113, 0.34),
    0 6px 16px rgba(60, 179, 113, 0.30);
}
.dash-v2-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 6px 16px rgba(0, 0, 0, 0.28);
}
.dash-v2-upgrade-icon {
  font-size: 1.15rem;
  line-height: 1;
  margin-bottom: 0.15rem;
}
.dash-v2-upgrade-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: inherit;
}
.dash-v2-upgrade-card--primary .dash-v2-upgrade-title { color: #000; }
.dash-v2-upgrade-sub {
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.3;
  color: inherit;
  opacity: 0.85;
}
.dash-v2-upgrade-card--primary .dash-v2-upgrade-sub { color: rgba(0, 0, 0, 0.72); }

/* ===== Support row =====
   Two small cards. The danger card has a subtle red tint to
   differentiate it from the neutral Feedback card without
   being alarming. */
.dash-v2-support {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}
.dash-v2-support-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.75rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: 12px;
  color: var(--text-secondary, #a4a3a0);
  font-family: 'Sora', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.dash-v2-support-btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary, #f5f3ef);
}
[data-theme="light"] .dash-v2-support-btn:hover {
  background: rgba(0, 0, 0, 0.04);
}
.dash-v2-support-btn--danger {
  color: var(--red, #e05555);
}
.dash-v2-support-btn--danger:hover {
  color: var(--red, #e05555);
  background: rgba(224, 85, 85, 0.08);
}
.dash-v2-support-icon {
  font-size: 0.95rem;
  line-height: 1;
}

/* ===== Suggestion banner (shown only when a rule fires) =====
   Borderless. The yellow accent lives on the icon and a thin
   left bar — the rest blends with the page so it reads as an
   inline note, not a punched-out colored region. */
.dash-v2-suggestion {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.7rem 0.9rem 0.7rem 0.7rem;
  background: transparent;
  border: none;
  border-left: 3px solid var(--yellow, #f0b94a);
  border-radius: 0;
  cursor: pointer;
  margin-bottom: 0.8rem;
  font-family: inherit;
  text-align: left;
  color: var(--text-primary, #f5f3ef);
}
.dash-v2-suggestion-icon {
  font-size: 1.15rem;
  line-height: 1;
  color: var(--yellow, #f0b94a);
  flex-shrink: 0;
}
.dash-v2-suggestion-body {
  flex: 1 1 auto;
  font-size: 0.82rem;
  line-height: 1.35;
}
.dash-v2-suggestion-arrow {
  color: var(--yellow, #f0b94a);
  font-size: 1.2rem;
  font-weight: 700;
  flex-shrink: 0;
}
.dash-v2-suggestion.hidden { display: none; }

/* ---------- Header upgrade pill (mock of the auto-injected one) ---------- */
/* In the live app this is injected by ensureHeaderUpgradePills(). The
   mockup mirrors its visual so the header reads correctly. Carries
   the existing brand-green palette + glow. */
.dash-v2-upgrade-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.4rem 0.85rem;
  background: var(--green, #3cb371);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 3px 8px rgba(60, 179, 113, 0.36);
}
.dash-v2-upgrade-pill-icon {
  font-size: 1em;
  line-height: 1;
  position: relative;
  top: -1px;
}

.dash-v2-upgrade-pill.hidden { display: none; }

/* v2.23.39 — Paid-tier "Premium" pill on the dashboard. Same shape
   and footprint as the Upgrade pill so the header layout doesn't
   shift between free and paid users, but visually distinct — a
   more subdued, confident treatment rather than the bright
   conversion-focused Upgrade pill. Pill links to the Free vs
   Premium comparison page so consumers can reference what their
   plan includes. */
.dash-v2-premium-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.42rem 0.85rem 0.42rem 0.7rem;
  background: linear-gradient(135deg,
    rgba(232, 101, 10, 0.18) 0%,
    rgba(232, 101, 10, 0.08) 100%);
  border: 1.5px solid rgba(232, 101, 10, 0.55);
  border-radius: 999px;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
  white-space: nowrap;
}

.dash-v2-premium-pill:hover {
  background: linear-gradient(135deg,
    rgba(232, 101, 10, 0.24) 0%,
    rgba(232, 101, 10, 0.12) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(232, 101, 10, 0.18);
}

.dash-v2-premium-pill:active { transform: translateY(0); }

.dash-v2-premium-pill.hidden { display: none; }

.dash-v2-premium-pill-icon {
  font-size: 0.95rem;
  line-height: 1;
  margin-top: -1px;
}

.dash-v2-premium-pill-label {
  line-height: 1;
}

[data-theme="light"] .dash-v2-premium-pill {
  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.65);
}

/* =============================================================
   SCREEN-VEHICLE
   ============================================================= */

.veh-v2 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary, #0e0e10);
  color: var(--text-primary, #f5f3ef);
}
[data-theme="light"] .veh-v2 {
  background: var(--bg-primary, #f7f5f2);
}

/* Top header — minimal title bar. */
.veh-v2-header {
  display: grid;
  grid-template-columns: 2.5rem 1fr 2.5rem;
  align-items: center;
  gap: 0.4rem;
  padding: 0.9rem 1rem 0.6rem;
  background: var(--bg-primary, #0e0e10);
}
[data-theme="light"] .veh-v2-header { background: var(--bg-primary, #f7f5f2); }
.veh-v2-back, .veh-v2-add {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--text-primary, #f5f3ef);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.veh-v2-back:hover, .veh-v2-add:hover {
  background: rgba(255, 255, 255, 0.05);
}
[data-theme="light"] .veh-v2-back:hover,
[data-theme="light"] .veh-v2-add:hover {
  background: rgba(0, 0, 0, 0.05);
}
.veh-v2-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.005em;
  color: var(--text-primary, #f5f3ef);
  margin: 0;
}
.veh-v2-add.hidden { visibility: hidden; }

.veh-v2-switcher {
  display: flex;
  gap: 0.3rem;
  /* v2.10.2 — bumped top padding from 0.2rem to 0.85rem so the tabs
     aren't crammed against the page top edge as the user scrolls. Sticky
     positioning + a solid background keeps them pinned cleanly so body
     content scrolls under them with a visible buffer above the pills. */
  padding: 0.85rem 1rem 0.7rem;
  overflow-x: auto;
  scrollbar-width: none;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-primary, #0e0e10);
}
[data-theme="light"] .veh-v2-switcher {
  background: var(--bg-primary, #f7f5f2);
}
.veh-v2-switcher::-webkit-scrollbar { display: none; }
.veh-v2-switcher-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  /* v2.10.3 — bumped vertical padding from 0.42rem to 0.55rem and pinned
     line-height to 1 so the active-state pill background fully wraps the
     text (including descenders in "Honda"/"y"/"g") instead of clipping
     above them. */
  padding: 0.55rem 0.95rem;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--text-secondary, #a4a3a0);
  font-family: 'Sora', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.veh-v2-switcher-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary, #f5f3ef);
}
[data-theme="light"] .veh-v2-switcher-tab:hover {
  background: rgba(0, 0, 0, 0.05);
}
.veh-v2-switcher-tab.is-active {
  background: rgba(232, 101, 10, 0.15);
  color: var(--accent, #e8650a);
}

/* Scrollable content area */
.veh-v2-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 1.1rem 1.5rem;
  -webkit-overflow-scrolling: touch;
}

/* ===== HERO: Vehicle identity ===== */
.veh-v2-hero {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 0.4rem 0 0.85rem;
}
.veh-v2-hero-photo {
  flex-shrink: 0;
  width: 5.2rem;
  height: 5.2rem;
  border-radius: 16px;
  background: rgba(232, 101, 10, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.3rem;
  color: var(--accent, #e8650a);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
}
.veh-v2-hero-photo:hover {
  background: rgba(232, 101, 10, 0.18);
}
.veh-v2-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.veh-v2-hero-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.veh-v2-hero-name {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--text-primary, #f5f3ef);
}
.veh-v2-hero-trim {
  font-family: 'Sora', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary, #a4a3a0);
  letter-spacing: 0;
}
.veh-v2-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.15rem;
}
.veh-v2-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  font-family: 'Sora', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary, #a4a3a0);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
[data-theme="light"] .veh-v2-hero-chip {
  background: rgba(0, 0, 0, 0.05);
}
.veh-v2-hero-chip-icon {
  font-size: 0.85em;
  line-height: 1;
  opacity: 0.7;
}

/* ===== QUICK ACTIONS row ===== */
.veh-v2-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.3rem 0 0.6rem;
}
.veh-v2-quick {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.7rem 0.4rem;
  background: transparent;
  border: none;
  color: var(--text-primary, #f5f3ef);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
  border-radius: 12px;
}
.veh-v2-quick:hover { background: rgba(255, 255, 255, 0.04); }
[data-theme="light"] .veh-v2-quick:hover { background: rgba(0, 0, 0, 0.04); }
.veh-v2-quick-icon {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  background: rgba(232, 101, 10, 0.16);
  color: var(--accent, #e8650a);
  box-shadow: inset 0 0 0 1px rgba(232, 101, 10, 0.30);
}
.veh-v2-quick-icon--green {
  background: rgba(60, 179, 113, 0.18);
  color: var(--green, #3cb371);
  box-shadow: inset 0 0 0 1px rgba(60, 179, 113, 0.34);
}
.veh-v2-quick-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.veh-v2-quick-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary, #f5f3ef);
}
.veh-v2-quick-sub {
  font-size: 0.76rem;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.3;
}
.veh-v2-quick-arrow {
  color: var(--text-secondary, #a4a3a0);
  font-size: 1.2rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* ===== TAB BAR ===== */
.veh-v2-tabs {
  display: flex;
  gap: 0;
  margin: 0.5rem -1.1rem 0.9rem;
  padding: 0 1.1rem;
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
}
.veh-v2-tabs::-webkit-scrollbar { display: none; }
.veh-v2-tabs::after {
  content: '';
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 0;
  height: 1px;
  background: var(--border-color, rgba(255, 255, 255, 0.08));
  opacity: 0.6;
}
.veh-v2-tab {
  flex: 0 0 auto;
  position: relative;
  padding: 0.65rem 0.9rem 0.7rem;
  background: transparent;
  border: none;
  color: var(--text-secondary, #a4a3a0);
  font-family: 'Sora', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.veh-v2-tab:hover { color: var(--text-primary, #f5f3ef); }
.veh-v2-tab.is-active {
  color: var(--accent, #e8650a);
  font-weight: 700;
}
.veh-v2-tab.is-active::after {
  content: '';
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: -1px;
  height: 2px;
  background: var(--accent, #e8650a);
  border-radius: 2px;
  z-index: 1;
}

/* ===== TAB CONTENT cards ===== */
.veh-v2-tab-content {
  display: none;
}
.veh-v2-tab-content.is-active {
  display: block;
}
.veh-v2-section-lead {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.25rem 0 0.85rem;
}
.veh-v2-section-lead-icon {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  background: rgba(232, 101, 10, 0.16);
  color: var(--accent, #e8650a);
  box-shadow: inset 0 0 0 1px rgba(232, 101, 10, 0.30);
  flex-shrink: 0;
}
.veh-v2-section-lead-icon--blue {
  background: rgba(59, 130, 246, 0.18);
  color: #3b82f6;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.36);
}
.veh-v2-section-lead-icon--green {
  background: rgba(60, 179, 113, 0.18);
  color: var(--green, #3cb371);
  box-shadow: inset 0 0 0 1px rgba(60, 179, 113, 0.34);
}
.veh-v2-section-lead-icon--yellow {
  background: rgba(240, 185, 74, 0.18);
  color: var(--yellow, #f0b94a);
  box-shadow: inset 0 0 0 1px rgba(240, 185, 74, 0.36);
}
.veh-v2-section-lead-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.veh-v2-section-lead-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary, #f5f3ef);
}
.veh-v2-section-lead-sub {
  font-size: 0.76rem;
  color: var(--text-secondary, #a4a3a0);
}

/* Form fields. */
.veh-v2-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}
.veh-v2-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
}
.veh-v2-field-row .veh-v2-field { margin-bottom: 0; }
.veh-v2-label {
  font-family: 'Sora', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary, #a4a3a0);
  letter-spacing: 0.02em;
}
.veh-v2-label-optional {
  font-weight: 500;
  color: var(--text-secondary, #a4a3a0);
  opacity: 0.7;
}
.veh-v2-input,
.veh-v2-select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.85rem;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 10px;
  color: var(--text-primary, #f5f3ef);
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  transition: box-shadow 0.15s ease, background 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
[data-theme="light"] .veh-v2-input,
[data-theme="light"] .veh-v2-select {
  background: rgba(0, 0, 0, 0.05);
}
.veh-v2-input:focus,
.veh-v2-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(232, 101, 10, 0.32);
}
.veh-v2-input::placeholder {
  color: var(--text-secondary, #a4a3a0);
  opacity: 0.55;
}
.veh-v2-field-hint {
  font-size: 0.72rem;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.35;
  margin-top: 0.1rem;
}
.veh-v2-input-prefix {
  position: relative;
  display: flex;
  align-items: center;
}
.veh-v2-input-prefix-symbol {
  position: absolute;
  left: 0.85rem;
  color: var(--text-secondary, #a4a3a0);
  font-size: 0.9rem;
  pointer-events: none;
}
.veh-v2-input-prefix .veh-v2-input {
  padding-left: 1.8rem;
}

/* Photo uploader */
.veh-v2-photo-uploader {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 0.9rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}
[data-theme="light"] .veh-v2-photo-uploader {
  background: rgba(0, 0, 0, 0.04);
}
.veh-v2-photo-uploader:hover {
  background: rgba(232, 101, 10, 0.08);
}
.veh-v2-photo-uploader-icon {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  background: rgba(232, 101, 10, 0.16);
  color: var(--accent, #e8650a);
  box-shadow: inset 0 0 0 1px rgba(232, 101, 10, 0.30);
}
.veh-v2-photo-uploader-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.veh-v2-photo-uploader-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary, #f5f3ef);
}
.veh-v2-photo-uploader-sub {
  font-size: 0.73rem;
  color: var(--text-secondary, #a4a3a0);
}

/* Submit + delete actions */
.veh-v2-actions {
  margin-top: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.veh-v2-save {
  width: 100%;
  padding: 0.95rem 1rem;
  background: var(--accent, #e8650a);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 12px rgba(232, 101, 10, 0.32);
  transition: filter 0.12s ease, transform 0.1s ease;
}
.veh-v2-save:hover { filter: brightness(1.06); }
.veh-v2-save:active { transform: scale(0.99); }
.veh-v2-delete {
  width: 100%;
  padding: 0.7rem 1rem;
  background: transparent;
  border: none;
  color: var(--red, #e05555);
  font-family: 'Sora', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
  border-radius: 10px;
}
.veh-v2-delete:hover {
  background: rgba(224, 85, 85, 0.08);
}

/* MPG result block */
.veh-v2-mpg-result {
  margin-top: 0.85rem;
  padding: 0.95rem 0.4rem;
  background: transparent;
}
.veh-v2-mpg-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.veh-v2-mpg-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.veh-v2-mpg-stat-value {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--accent, #e8650a);
  font-variant-numeric: tabular-nums;
}
.veh-v2-mpg-stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary, #a4a3a0);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.veh-v2-mpg-clear {
  display: block;
  margin: 0.7rem auto 0;
  background: transparent;
  border: none;
  color: var(--text-secondary, #a4a3a0);
  font-family: 'Sora', sans-serif;
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
}
.veh-v2-calc-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  background: transparent;
  border: 1.5px solid var(--accent, #e8650a);
  border-radius: 12px;
  color: var(--accent, #e8650a);
  font-family: 'Sora', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.veh-v2-calc-btn:hover {
  background: rgba(232, 101, 10, 0.10);
}

.veh-v2-section-hint {
  font-size: 0.78rem;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.45;
  margin: 0 0 0.85rem;
}

/* Header upgrade pill */
.veh-v2-upgrade-pill {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.4rem 0.85rem;
  background: var(--green, #3cb371);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 3px 8px rgba(60, 179, 113, 0.36);
  z-index: 11;
}
.veh-v2-upgrade-pill-icon { font-size: 1em; line-height: 1; }

/* =============================================================
   SCREEN-GARAGE
   ============================================================= */

.gar-v2 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary, #0e0e10);
  color: var(--text-primary, #f5f3ef);
}
[data-theme="light"] .gar-v2 {
  background: var(--bg-primary, #f7f5f2);
}

.gar-v2-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1rem 0.6rem;
  background: var(--bg-primary, #0e0e10);
}
[data-theme="light"] .gar-v2-header {
  background: var(--bg-primary, #f7f5f2);
}
.gar-v2-back {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--text-primary, #f5f3ef);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.gar-v2-back:hover { background: rgba(255, 255, 255, 0.05); }
[data-theme="light"] .gar-v2-back:hover { background: rgba(0, 0, 0, 0.05); }
.gar-v2-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary, #f5f3ef);
  margin: 0;
}
.gar-v2-upgrade-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.4rem 0.85rem;
  background: var(--green, #3cb371);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 3px 8px rgba(60, 179, 113, 0.36);
}
.gar-v2-upgrade-pill-icon { font-size: 1em; line-height: 1; position: relative; top: -1px; }

.gar-v2-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.2rem 1.1rem 1.5rem;
  -webkit-overflow-scrolling: touch;
}

.gar-v2-hero {
  padding: 0.1rem 0.1rem 0.8rem;
}
.gar-v2-hero-tagline {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-secondary, #a4a3a0);
}

.gar-v2-section-label {
  font-family: 'Sora', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
  margin: 0.6rem 0.25rem 0.5rem;
}
.gar-v2-section-label:first-child { margin-top: 0.2rem; }

.gar-v2-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.9rem;
}
.gar-v2-vehicle-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.75rem 0.4rem;
  background: transparent;
  border: none;
  border-radius: 14px;
  color: var(--text-primary, #f5f3ef);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.gar-v2-vehicle-card:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}
[data-theme="light"] .gar-v2-vehicle-card:hover {
  background: rgba(0, 0, 0, 0.04);
}
.gar-v2-vehicle-card:active { transform: translateY(0); }
.gar-v2-vehicle-icon {
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: rgba(232, 101, 10, 0.16);
  color: var(--accent, #e8650a);
  box-shadow: inset 0 0 0 1px rgba(232, 101, 10, 0.30);
}
.gar-v2-vehicle-icon--green {
  background: rgba(60, 179, 113, 0.18);
  color: var(--green, #3cb371);
  box-shadow: inset 0 0 0 1px rgba(60, 179, 113, 0.34);
}
.gar-v2-vehicle-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.gar-v2-vehicle-name {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--text-primary, #f5f3ef);
}
.gar-v2-vehicle-trim {
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.25;
}
.gar-v2-vehicle-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.15rem;
}
.gar-v2-vehicle-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  font-family: 'Sora', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-secondary, #a4a3a0);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
[data-theme="light"] .gar-v2-vehicle-chip {
  background: rgba(0, 0, 0, 0.05);
}
.gar-v2-vehicle-chip-icon {
  font-size: 0.8em;
  line-height: 1;
  opacity: 0.7;
}
.gar-v2-vehicle-arrow {
  color: var(--text-secondary, #a4a3a0);
  font-size: 1.3rem;
  font-weight: 600;
  flex-shrink: 0;
  padding-right: 0.15rem;
}

.gar-v2-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.2rem;
  padding: 0.95rem 1rem;
  background: var(--accent, #e8650a);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 12px rgba(232, 101, 10, 0.32);
  transition: filter 0.12s ease, transform 0.1s ease;
}
.gar-v2-add-btn:hover { filter: brightness(1.06); }
.gar-v2-add-btn:active { transform: scale(0.99); }
.gar-v2-add-icon {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
}

.gar-v2-tools {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.gar-v2-tool-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.85rem 0.9rem;
  background: radial-gradient(ellipse 120% 120% at 50% 30%,
    rgba(232, 101, 10, 0.18) 0%,
    rgba(232, 101, 10, 0.06) 50%,
    transparent 95%);
  border: none;
  border-radius: 22px;
  box-shadow: none;
  color: var(--text-primary, #f5f3ef);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
[data-theme="light"] .gar-v2-tool-link {
  background: radial-gradient(ellipse 120% 120% at 50% 30%,
    rgba(232, 101, 10, 0.14) 0%,
    rgba(232, 101, 10, 0.04) 50%,
    transparent 95%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}
.gar-v2-tool-link:hover {
  background: radial-gradient(ellipse 120% 120% at 50% 30%,
    rgba(232, 101, 10, 0.28) 0%,
    rgba(232, 101, 10, 0.10) 50%,
    transparent 95%);
  transform: translateY(-1px);
}
[data-theme="light"] .gar-v2-tool-link:hover {
  background: radial-gradient(ellipse 120% 120% at 50% 30%,
    rgba(232, 101, 10, 0.22) 0%,
    rgba(232, 101, 10, 0.07) 50%,
    transparent 95%);
}
.gar-v2-tool-icon {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  background: rgba(232, 101, 10, 0.16);
  color: var(--accent, #e8650a);
  box-shadow: inset 0 0 0 1px rgba(232, 101, 10, 0.30);
}
.gar-v2-tool-icon--blue {
  background: rgba(59, 130, 246, 0.18);
  color: #3b82f6;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.36);
}
.gar-v2-tool-icon--green {
  background: rgba(60, 179, 113, 0.18);
  color: var(--green, #3cb371);
  box-shadow: inset 0 0 0 1px rgba(60, 179, 113, 0.34);
}

/* =============================================================
   v2.6.0 — Maintenance Schedule screen
   =============================================================
   Renders the App.Maintenance.getStatusReport() output as a status-
   colored list. Each row shows the service name, interval, and a
   colored status pill (due-now red / due-soon yellow / on-schedule
   green / no-history gray). */
.maint-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-secondary, #a4a3a0);
  font-size: 0.92rem;
  line-height: 1.5;
}
.maint-empty-cta {
  display: inline-block;
  margin-top: 0.8rem;
  padding: 0.6rem 1.2rem;
  background: var(--orange, #f57c00);
  color: #fff;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.maint-vehicle-summary {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  background: radial-gradient(ellipse 120% 120% at 50% 30%,
    rgba(232, 101, 10, 0.18) 0%,
    rgba(232, 101, 10, 0.06) 50%,
    transparent 95%);
  border-radius: 14px;
}
.maint-generic-banner {
  margin: -0.4rem 0 1rem;
  padding: 0.85rem 1rem;
  background: rgba(240, 185, 74, 0.10);
  border-left: 3px solid var(--yellow, #f0b94a);
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-primary);
}
.maint-generic-banner p {
  margin: 0 0 0.55rem;
}
.maint-generic-banner p:last-child {
  margin-bottom: 0;
}
.maint-generic-banner .maint-empty-cta {
  margin-top: 0;
  padding: 0.45rem 0.95rem;
  font-size: 0.78rem;
}
[data-theme="light"] .maint-vehicle-summary {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}
.maint-vehicle-name {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 0.15rem;
  color: var(--text-primary);
}
.maint-vehicle-meta {
  font-size: 0.8rem;
  color: var(--text-secondary, #a4a3a0);
}
.maint-group {
  margin-bottom: 1.2rem;
}
.maint-group-title {
  font-family: 'Sora', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
  margin: 0 0 0.55rem;
}
.maint-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.maint-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 0.95rem;
  background: radial-gradient(ellipse 120% 120% at 50% 30%,
    rgba(232, 101, 10, 0.10) 0%,
    rgba(232, 101, 10, 0.03) 50%,
    transparent 95%);
  border-radius: 14px;
  border-left: 3px solid var(--maint-accent, var(--text-secondary, #888));
}
[data-theme="light"] .maint-item {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.maint-item--due-now    { --maint-accent: var(--red, #e05555); }
.maint-item--due-soon   { --maint-accent: var(--yellow, #f0b94a); }
.maint-item--on-schedule { --maint-accent: var(--green, #3cb371); }
.maint-item--no-history { --maint-accent: rgba(255, 255, 255, 0.32); }
[data-theme="light"] .maint-item--no-history { --maint-accent: rgba(0, 0, 0, 0.22); }

.maint-item-body {
  flex: 1 1 auto;
  min-width: 0;
}
.maint-item-name {
  font-family: 'Outfit', sans-serif;
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.18rem;
}
.maint-item-meta {
  font-size: 0.78rem;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.4;
}
.maint-item-meta-detail {
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--text-primary);
  line-height: 1.4;
}
.maint-pill {
  flex-shrink: 0;
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  align-self: center;
}
.maint-pill--due-now    { background: var(--red, #e05555); color: #fff; }
.maint-pill--due-soon   { background: var(--yellow, #f0b94a); color: #1a1a1a; }
.maint-pill--on-schedule { background: var(--green, #3cb371); color: #fff; }
.maint-pill--no-history { background: rgba(160, 160, 160, 0.25); color: var(--text-primary); }
.maint-pill--not-applicable { background: rgba(160, 160, 160, 0.18); color: var(--text-secondary, #a4a3a0); }

/* v2.6.7 — Maintenance Schedule rendered as a chart (table).
   5-column CSS grid: Service / Every / Last / Next / Status.
   On narrow screens (< 540px) the Every and Last columns collapse to
   keep mobile readable; the user can always tap into the Advisor for
   full detail. Each data row carries a colored left-border accent
   matching its status (red / yellow / green / gray). */
.maint-chart {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) auto;
  border-radius: 14px;
  overflow: hidden;
  background: radial-gradient(ellipse 120% 120% at 50% 30%,
    rgba(232, 101, 10, 0.08) 0%,
    rgba(232, 101, 10, 0.02) 50%,
    transparent 95%);
}
[data-theme="light"] .maint-chart {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.maint-chart-row {
  display: contents;
}
.maint-chart-cell {
  padding: 0.65rem 0.55rem;
  font-size: 0.78rem;
  line-height: 1.35;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .maint-chart-cell {
  border-bottom-color: rgba(0, 0, 0, 0.07);
}
.maint-chart-head .maint-chart-cell {
  font-family: 'Sora', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
  background: rgba(232, 101, 10, 0.08);
  border-bottom: 1px solid rgba(232, 101, 10, 0.18);
}
.maint-chart-cell-service {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  color: var(--text-primary);
  padding-left: 0.85rem;
  border-left: 3px solid var(--maint-accent, transparent);
}
.maint-chart-head .maint-chart-cell-service {
  border-left: 3px solid transparent;
  padding-left: 0.85rem;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
}
.maint-chart-cell-status {
  justify-content: flex-end;
  padding-right: 0.85rem;
}

/* Status accents — colored left-border on the first cell per row. */
.maint-chart-row--due-now      .maint-chart-cell-service { --maint-accent: var(--red, #e05555); }
.maint-chart-row--due-soon     .maint-chart-cell-service { --maint-accent: var(--yellow, #f0b94a); }
.maint-chart-row--on-schedule  .maint-chart-cell-service { --maint-accent: var(--green, #3cb371); }
.maint-chart-row--no-history   .maint-chart-cell-service { --maint-accent: rgba(255, 255, 255, 0.18); }
[data-theme="light"] .maint-chart-row--no-history .maint-chart-cell-service { --maint-accent: rgba(0, 0, 0, 0.18); }
.maint-chart-row--not-applicable .maint-chart-cell-service { --maint-accent: rgba(160, 160, 160, 0.18); color: var(--text-secondary, #a4a3a0); }

/* Last row: drop the bottom border so the chart bottoms cleanly. */
.maint-chart-row:last-child .maint-chart-cell {
  border-bottom: none;
}

/* Clickable rows: every data row opens the per-service edit modal. */
.maint-chart-row--clickable {
  cursor: pointer;
  transition: background 0.12s ease;
}
.maint-chart-row--clickable:hover .maint-chart-cell {
  background: rgba(232, 101, 10, 0.06);
}
[data-theme="light"] .maint-chart-row--clickable:hover .maint-chart-cell {
  background: rgba(232, 101, 10, 0.10);
}

/* Manual-entry dot — small orange marker on the Last column showing the
   value came from a user-set manual entry rather than the auto-mapped
   maintenance log. */
.maint-chart-manual-dot {
  display: inline-block;
  margin-left: 0.3rem;
  color: var(--orange, #f57c00);
  font-size: 0.6rem;
  vertical-align: middle;
}

/* Always-open variant of the advisor-cost-card (used on the Premium
   Features page above the comparison chart). The base v1 CSS targets
   <details>/<summary> for the collapse UI; this variant just needs
   matching top padding since there's no summary header to absorb it. */
.advisor-cost-card--open {
  padding-top: 0.9rem;
}
.advisor-cost-card--open .advisor-cost-intro {
  margin-top: 0;
}

/* v2.8.6 — Repair vs Replace insight rows. Each insight gets its own
   grey panel so the list reads as discrete results instead of
   continuous text floating on the card's orange-tinted background.
   Status-colored left border keeps the good / warn / info cue from
   the existing rr-insight-{cls} class. */
.rr-insight {
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  border-left: 3px solid var(--rr-insight-accent, rgba(160, 160, 160, 0.35));
}
.rr-insight-good { --rr-insight-accent: var(--green, #3cb371); }
.rr-insight-warn { --rr-insight-accent: var(--yellow, #f0b94a); }
.rr-insight-info { --rr-insight-accent: var(--orange, #f57c00); }
.rr-insight-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  line-height: 1.25;
}
.rr-insight-text {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-secondary, #a4a3a0);
}
[data-theme="light"] .rr-insight {
  background: rgba(0, 0, 0, 0.06);
}

/* v2.15.0 — Repair vs Replace intro step. Shown to first-time users
   when they open the calculator (anyone whose state.repairReplaceLast is
   empty). Frames the decision, sets time expectations, and on free
   plans names the paywall upfront so the wall at the end doesn't feel
   like a rug-pull. The wizard progress bar + Back/Continue nav are
   hidden on this step (see _rrUpdateProgress / _rrUpdateNav); the
   intro has its own embedded "Get Started" CTA. */
.rr-intro-step {
  padding: 0.25rem 0 0.5rem;
}
.rr-intro-step .rr-step-q {
  margin-top: 0;
}
.rr-intro-body {
  margin: 0 0 0.85rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-primary);
}
.rr-intro-actions {
  margin-top: 1.4rem;
  display: flex;
  justify-content: flex-end;
}
.rr-intro-actions .btn-primary {
  min-width: 12rem;
}

/* v2.16.0 — Step 2 market-value lookup buttons. Outlined accent-colored
   external links to KBB + NADA so the user can pull a Private Party Value
   from either source and enter it into the calculator. Stacks on phones,
   side-by-side on tablets+. */
.rr-lookup-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.85rem 0 0.5rem;
}
@media (min-width: 480px) {
  .rr-lookup-row {
    flex-direction: row;
  }
  .rr-lookup-row .rr-lookup-btn {
    flex: 1;
  }
}
.rr-lookup-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 1rem;
  border: 1.5px solid var(--accent, #e8650a);
  border-radius: 8px;
  color: var(--accent, #e8650a);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  background: transparent;
  transition: background 0.15s ease;
}
.rr-lookup-btn:hover,
.rr-lookup-btn:focus-visible {
  background: rgba(232, 101, 10, 0.10);
  text-decoration: none;
}
.rr-lookup-btn-icon {
  font-size: 1.1em;
  line-height: 1;
}
.rr-lookup-hint {
  font-size: 0.85rem;
  color: var(--text-secondary, #999);
  margin: 0 0 1rem;
  text-align: center;
  font-style: italic;
}

/* v2.9.0 — Repair vs Replace paywall step. Shown to free users at the
   end of the wizard in place of the actual verdict + analysis. */
.rr-paywall {
  padding: 1.25rem 0.5rem 0.5rem;
}
.rr-paywall-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.8rem 1.4rem;
  background: radial-gradient(ellipse 120% 120% at 50% 0%,
    rgba(232, 101, 10, 0.22) 0%,
    rgba(232, 101, 10, 0.06) 55%,
    transparent 100%);
  border: 1px solid rgba(232, 101, 10, 0.28);
  border-radius: 18px;
}
[data-theme="light"] .rr-paywall-card {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
.rr-paywall-icon {
  width: 3.4rem;
  height: 3.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  background: rgba(240, 185, 74, 0.20);
  color: var(--yellow, #f0b94a);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(240, 185, 74, 0.36);
  margin-bottom: 0.85rem;
}
.rr-paywall-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}
.rr-paywall-sub {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text-secondary, #a4a3a0);
  margin: 0 0 1rem;
  max-width: 28rem;
}
.rr-paywall-benefits {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  max-width: 28rem;
}
.rr-paywall-benefits li {
  position: relative;
  padding: 0.6rem 0.85rem 0.6rem 2.1rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.35;
  text-align: left;
  color: var(--text-primary);
}
[data-theme="light"] .rr-paywall-benefits li {
  background: rgba(0, 0, 0, 0.06);
}
.rr-paywall-benefits li::before {
  content: '\2713';
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--orange, #f57c00);
  font-weight: 800;
}
.rr-paywall-cta {
  margin-bottom: 0.4rem;
}
.rr-paywall-cancel {
  background: transparent;
  border: none;
  color: var(--text-secondary, #a4a3a0);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.5rem 0.85rem;
}
.rr-paywall-cancel:hover {
  color: var(--text-primary);
}

/* Mobile: collapse Every + Last columns, keep Service / Next / Status. */
@media (max-width: 540px) {
  .maint-chart {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.4fr) auto;
  }
  .maint-chart-cell-interval,
  .maint-chart-cell-last {
    display: none;
  }
}
.gar-v2-tool-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.gar-v2-tool-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary, #f5f3ef);
}
.gar-v2-tool-sub {
  font-size: 0.74rem;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.3;
}
.gar-v2-tool-arrow {
  color: var(--text-secondary, #a4a3a0);
  font-size: 1.2rem;
  font-weight: 600;
  flex-shrink: 0;
}

.gar-v2-benefits {
  margin-top: 0.6rem;
  padding: 0.25rem 0.1rem 0.4rem;
  /* Strip the v1 .garage-benefits card surface (background + border)
     so the contents sit directly on the page. The v1 rule lives in
     styles.css and isn't reachable for direct edit here without
     touching legacy, so override via the v2 selector. */
  background: transparent;
  border: none;
}

/* Advisor "Describe it → We analyze it → You get clarity" flow:
   strip the legacy card surface so the three-step row sits directly
   on the page background. Same treatment as .gar-v2-benefits above. */
.advisor-flow {
  background: transparent;
  border: none;
}

/* Advisor attach button reuses the dashboard's `.dash-v2-hero-upload`
   classes so the two attach affordances look identical (single-row
   layout, dashed orange border, soft orange-bubble surface, orange
   chevron). This wrapper just controls vertical spacing between the
   advisor textarea above and the submit button below. */
.advisor-input-actions-inline {
  margin: 0.6rem 0 0.7rem;
}
/* Suppress the v1 .garage-benefits-list li::before checkmark + left
   padding so the v2 explicit <span class="gar-v2-benefit-check"> is the
   only check drawn. Without this we render TWO checkmarks per row
   (orange ::before + boxed v2 span) because the markup carries both
   the legacy and v2 classes. */
.gar-v2-benefits-list.garage-benefits-list > li {
  padding-left: 0;
  position: static;
}
.gar-v2-benefits-list.garage-benefits-list > li::before { content: none; }
.gar-v2-benefits-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary, #f5f3ef);
  margin: 0 0 0.7rem;
  text-align: center;
}
.gar-v2-benefits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.gar-v2-benefit-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text-secondary, #a4a3a0);
}
.gar-v2-benefit-check {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.4rem;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  background: transparent;
  color: var(--accent, #e8650a);
  box-shadow: none;
  margin-top: 0.1rem;
}

/* =============================================================
   SCREEN-ADVISOR
   ============================================================= */

.adv-v2 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary, #0e0e10);
  color: var(--text-primary, #f5f3ef);
}
[data-theme="light"] .adv-v2 {
  background: var(--bg-primary, #f7f5f2);
}

.adv-v2-header {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.9rem 1rem 0.55rem;
  background: var(--bg-primary, #0e0e10);
  z-index: 10;
}
[data-theme="light"] .adv-v2-header { background: var(--bg-primary, #f7f5f2); }
.adv-v2-back {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--text-primary, #f5f3ef);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.adv-v2-back:hover { background: rgba(255, 255, 255, 0.05); }
[data-theme="light"] .adv-v2-back:hover { background: rgba(0, 0, 0, 0.05); }
.adv-v2-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text-primary, #f5f3ef);
  margin: 0;
  text-align: center;
}
.adv-v2-title-eyebrow {
  display: block;
  font-family: 'Sora', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, #e8650a);
  margin-bottom: 0.1rem;
}
.adv-v2-upgrade-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.4rem 0.85rem;
  background: var(--green, #3cb371);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 3px 8px rgba(60, 179, 113, 0.36);
}
.adv-v2-upgrade-pill-icon { font-size: 1em; line-height: 1; }

.adv-v2-context {
  display: flex;
  justify-content: center;
  padding: 0 1rem 0.55rem;
}
.adv-v2-context-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.8rem;
  background: rgba(232, 101, 10, 0.12);
  border: none;
  border-radius: 999px;
  color: var(--accent, #e8650a);
  font-family: 'Sora', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease;
}
.adv-v2-context-chip:hover {
  background: rgba(232, 101, 10, 0.18);
}
.adv-v2-context-chip-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.62rem;
  opacity: 0.85;
}
.adv-v2-context-chip-vehicle {
  color: var(--text-primary, #f5f3ef);
  font-weight: 600;
}
.adv-v2-context-chip-arrow {
  font-size: 0.85rem;
  opacity: 0.7;
}

.adv-v2-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.4rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  -webkit-overflow-scrolling: touch;
}

/* Initial-input state container (the textarea / "Get My Second Opinion"
   button / cost card / attach card / "How it works" flow block).
   - Side padding so children stop touching the screen edges.
   - flex: 1 1 auto + min-height: 0 + overflow-y: auto so the body
     scrolls when content exceeds the viewport. Without this, .screen's
     overflow: hidden clips the bottom of the page and the user can't
     reach the "How it works" footer copy. The conversation/thread
     state already has its own scrollable .adv-v2-thread; this rule
     does the equivalent for the initial-input state. */
.adv-v2 > #advisor-input {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.4rem 1rem 1.6rem;
}
/* Conversation wrapper — keep zero side padding; the thread + composer
   inside it manage their own gutters. Same flex sizing so the wrapper
   fills the screen and lets the thread scroll. */
.adv-v2 > #advisor-conversation {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.adv-v2-day {
  align-self: center;
  font-family: 'Sora', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
  opacity: 0.7;
  padding: 0.2rem 0;
}

.adv-v2-bubble {
  max-width: 86%;
  padding: 0.7rem 0.85rem 0.75rem;
  border-radius: 16px;
  font-family: 'Sora', sans-serif;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-primary, #f5f3ef);
  word-wrap: break-word;
}
.adv-v2-bubble--user {
  align-self: flex-end;
  background: var(--accent, #e8650a);
  color: #fff;
  border-bottom-right-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 3px 10px rgba(232, 101, 10, 0.25);
}
.adv-v2-bubble--assistant {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary, #f5f3ef);
  border-bottom-left-radius: 6px;
  padding: 0;
  overflow: hidden;
}
[data-theme="light"] .adv-v2-bubble--assistant {
  background: rgba(0, 0, 0, 0.05);
}

.adv-v2-bubble-byline {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Sora', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
  margin: 0 0.3rem 0.2rem;
}
.adv-v2-bubble-byline--user {
  align-self: flex-end;
}
.adv-v2-bubble-byline--assistant {
  align-self: flex-start;
}
.adv-v2-bubble-byline-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--accent, #e8650a);
}
.adv-v2-bubble-byline--user .adv-v2-bubble-byline-dot {
  background: var(--accent, #e8650a);
}
.adv-v2-bubble-byline--assistant .adv-v2-bubble-byline-dot {
  background: var(--green, #3cb371);
}

.adv-v2-verdict {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.85rem;
  background: rgba(60, 179, 113, 0.14);
  border-bottom: 1px solid rgba(60, 179, 113, 0.25);
}
.adv-v2-verdict--watch {
  background: rgba(240, 185, 74, 0.14);
  border-bottom-color: rgba(240, 185, 74, 0.28);
}
.adv-v2-verdict--act {
  background: rgba(224, 85, 85, 0.14);
  border-bottom-color: rgba(224, 85, 85, 0.28);
}
.adv-v2-verdict-icon {
  width: 1.7rem;
  height: 1.7rem;
  flex-shrink: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  background: rgba(60, 179, 113, 0.22);
  color: var(--green, #3cb371);
  box-shadow: inset 0 0 0 1px rgba(60, 179, 113, 0.36);
}
.adv-v2-verdict--watch .adv-v2-verdict-icon {
  background: rgba(240, 185, 74, 0.22);
  color: var(--yellow, #f0b94a);
  box-shadow: inset 0 0 0 1px rgba(240, 185, 74, 0.38);
}
.adv-v2-verdict--act .adv-v2-verdict-icon {
  background: rgba(224, 85, 85, 0.22);
  color: var(--red, #e05555);
  box-shadow: inset 0 0 0 1px rgba(224, 85, 85, 0.38);
}
.adv-v2-verdict-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}
.adv-v2-verdict-label {
  font-family: 'Sora', sans-serif;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--green, #3cb371);
  opacity: 0.85;
}
.adv-v2-verdict--watch .adv-v2-verdict-label { color: var(--yellow, #f0b94a); }
.adv-v2-verdict--act .adv-v2-verdict-label { color: var(--red, #e05555); }
.adv-v2-verdict-headline {
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary, #f5f3ef);
  line-height: 1.2;
}

.adv-v2-response-body {
  padding: 0.75rem 0.85rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.adv-v2-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.adv-v2-section-label {
  font-family: 'Sora', sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent, #e8650a);
}
.adv-v2-section-body {
  font-family: 'Sora', sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-primary, #f5f3ef);
}
.adv-v2-section-body p { margin: 0 0 0.3rem; }
.adv-v2-section-body p:last-child { margin-bottom: 0; }
.adv-v2-section-body ol,
.adv-v2-section-body ul {
  margin: 0;
  padding-left: 1.1rem;
}
.adv-v2-section-body li { margin-bottom: 0.2rem; }

.adv-v2-response-footer {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding: 0 0.85rem 0.8rem;
}
.adv-v2-response-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.32rem 0.65rem;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 999px;
  color: var(--text-secondary, #a4a3a0);
  font-family: 'Sora', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
[data-theme="light"] .adv-v2-response-action {
  background: rgba(0, 0, 0, 0.05);
}
.adv-v2-response-action:hover {
  background: rgba(232, 101, 10, 0.14);
  color: var(--accent, #e8650a);
}

.adv-v2-typing {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.65rem 0.85rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  border-bottom-left-radius: 6px;
}
[data-theme="light"] .adv-v2-typing { background: rgba(0, 0, 0, 0.05); }
.adv-v2-typing-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--text-secondary, #a4a3a0);
  opacity: 0.5;
  animation: adv-v2-pulse 1.2s ease-in-out infinite;
}
.adv-v2-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.adv-v2-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes adv-v2-pulse {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

.adv-v2-composer {
  flex-shrink: 0;
  padding: 0.65rem 0.85rem 0.95rem;
  background: var(--bg-primary, #0e0e10);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
[data-theme="light"] .adv-v2-composer {
  background: var(--bg-primary, #f7f5f2);
  border-top-color: rgba(0, 0, 0, 0.05);
}
.adv-v2-composer-fresh {
  display: flex;
  justify-content: center;
  margin-bottom: 0.45rem;
}
.adv-v2-fresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  background: transparent;
  border: none;
  color: var(--text-secondary, #a4a3a0);
  font-family: 'Sora', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}
.adv-v2-fresh-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary, #f5f3ef);
}
[data-theme="light"] .adv-v2-fresh-btn:hover { background: rgba(0, 0, 0, 0.04); }
.adv-v2-fresh-icon { font-size: 0.85rem; }

.adv-v2-composer-bar {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 18px;
  padding: 0.4rem 0.4rem 0.4rem 0.55rem;
  transition: box-shadow 0.15s ease;
}
[data-theme="light"] .adv-v2-composer-bar {
  background: rgba(0, 0, 0, 0.05);
}
.adv-v2-composer-bar:focus-within {
  box-shadow: 0 0 0 2px rgba(232, 101, 10, 0.32);
}
.adv-v2-composer-textarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 1.6rem;
  max-height: 8rem;
  padding: 0.5rem 0.3rem;
  background: transparent;
  border: none;
  color: var(--text-primary, #f5f3ef);
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  resize: none;
  outline: none;
}
.adv-v2-composer-textarea::placeholder {
  color: var(--text-secondary, #a4a3a0);
  opacity: 0.65;
}
.adv-v2-attach-btn {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-secondary, #a4a3a0);
  font-size: 1.05rem;
  cursor: pointer;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}
.adv-v2-attach-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent, #e8650a);
}
[data-theme="light"] .adv-v2-attach-btn:hover { background: rgba(0, 0, 0, 0.06); }
.adv-v2-send-btn {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent, #e8650a);
  border: none;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 3px 8px rgba(232, 101, 10, 0.36);
  transition: filter 0.12s ease, transform 0.1s ease;
}
.adv-v2-send-btn:hover { filter: brightness(1.06); }
.adv-v2-send-btn:active { transform: scale(0.96); }
.adv-v2-send-icon {
  display: inline-block;
  transform: translateX(1px);
  line-height: 1;
}

.adv-v2-attach-badge {
  position: absolute;
  top: -0.4rem;
  right: -0.3rem;
  font-family: 'Sora', sans-serif;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.1rem 0.35rem;
  background: var(--green, #3cb371);
  color: #fff;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
}
.adv-v2-attach-wrap { position: relative; }

.adv-v2-initial { display: none; }

/* =============================================================
   SCREEN-RESULTS
   ============================================================= */

.res-v2 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary, #0e0e10);
  color: var(--text-primary, #f5f3ef);
}
[data-theme="light"] .res-v2 {
  background: var(--bg-primary, #f7f5f2);
}

.res-v2-header {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem 1fr 2.5rem;
  align-items: center;
  gap: 0.4rem;
  padding: 0.9rem 1rem 0.6rem;
  background: var(--bg-primary, #0e0e10);
}
[data-theme="light"] .res-v2-header {
  background: var(--bg-primary, #f7f5f2);
}
.res-v2-back {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--text-primary, #f5f3ef);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.res-v2-back:hover {
  background: rgba(255, 255, 255, 0.05);
}
[data-theme="light"] .res-v2-back:hover {
  background: rgba(0, 0, 0, 0.05);
}
.res-v2-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.005em;
  color: var(--text-primary, #f5f3ef);
  margin: 0;
}
.res-v2-header-spacer { width: 2.4rem; }

.res-v2-upgrade-pill {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.4rem 0.85rem;
  background: var(--green, #3cb371);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 3px 8px rgba(60, 179, 113, 0.36);
  z-index: 11;
}
.res-v2-upgrade-pill-icon { font-size: 1em; line-height: 1; }

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

.res-v2-verdict-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  box-sizing: border-box;
  margin: 0.5rem 0 0.9rem;
  padding: 1rem 1rem 1.05rem;
  border-radius: 14px;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
  line-height: 1.2;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 6px 18px rgba(0, 0, 0, 0.25);
}
.res-v2-verdict-chip--approve {
  background: var(--green, #3cb371);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 6px 18px rgba(60, 179, 113, 0.28);
}
.res-v2-verdict-chip--quote {
  background: var(--yellow, #f0b94a);
  color: #1a1a1a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.50),
    0 6px 18px rgba(240, 185, 74, 0.32);
}
.res-v2-verdict-chip--decline {
  background: var(--red, #e05555);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 6px 18px rgba(224, 85, 85, 0.28);
}
.res-v2-verdict-chip--investigate {
  background: #3b82f6;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 6px 18px rgba(59, 130, 246, 0.30);
}
.res-v2-verdict-chip-icon {
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: 0.15rem;
}
.res-v2-verdict-chip-headline {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.07em;
}
.res-v2-verdict-chip-sub {
  font-family: 'Sora', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  opacity: 0.9;
  margin-top: 0.15rem;
}
.res-v2-verdict-chip--quote .res-v2-verdict-chip-sub { opacity: 0.75; }

.res-v2-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0.1rem 0.85rem;
}
.res-v2-context-label {
  font-family: 'Sora', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
}
.res-v2-context-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.6rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  font-family: 'Sora', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-primary, #f5f3ef);
  letter-spacing: 0.01em;
}
[data-theme="light"] .res-v2-context-chip {
  background: rgba(0, 0, 0, 0.05);
}
.res-v2-context-chip-icon {
  font-size: 0.85em;
  line-height: 1;
  opacity: 0.7;
}

.res-v2-question {
  display: flex;
  gap: 0.7rem;
  padding: 0.5rem 0.6rem 0.5rem 0.85rem;
  margin: 0 0 1.1rem;
  border-left: 3px solid var(--accent, #e8650a);
  background: transparent;
}
.res-v2-question-body {
  flex: 1 1 auto;
  min-width: 0;
}
.res-v2-question-eyebrow {
  font-family: 'Sora', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent, #e8650a);
  margin: 0 0 0.2rem;
}
.res-v2-question-text {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text-primary, #f5f3ef);
  margin: 0;
}

.res-v2-section {
  padding: 0 0 0.8rem;
}
.res-v2-section + .res-v2-section {
  margin-top: 0.4rem;
}
.res-v2-section-lead {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.2rem 0 0.6rem;
}
.res-v2-section-icon {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  background: rgba(232, 101, 10, 0.16);
  color: var(--accent, #e8650a);
  box-shadow: inset 0 0 0 1px rgba(232, 101, 10, 0.30);
}
.res-v2-section-icon--blue {
  background: rgba(59, 130, 246, 0.18);
  color: #3b82f6;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.36);
}
.res-v2-section-icon--yellow {
  background: rgba(240, 185, 74, 0.18);
  color: var(--yellow, #f0b94a);
  box-shadow: inset 0 0 0 1px rgba(240, 185, 74, 0.36);
}
.res-v2-section-icon--green {
  background: rgba(60, 179, 113, 0.18);
  color: var(--green, #3cb371);
  box-shadow: inset 0 0 0 1px rgba(60, 179, 113, 0.34);
}
.res-v2-section-icon--red {
  background: rgba(224, 85, 85, 0.18);
  color: var(--red, #e05555);
  box-shadow: inset 0 0 0 1px rgba(224, 85, 85, 0.36);
}
.res-v2-section-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
  margin: 0;
}
.res-v2-section-body {
  font-family: 'Sora', sans-serif;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--text-primary, #f5f3ef);
}
.res-v2-section-body p {
  margin: 0 0 0.65rem;
}
.res-v2-section-body p:last-child {
  margin-bottom: 0;
}
.res-v2-section-body ul,
.res-v2-section-body ol {
  margin: 0 0 0.65rem;
  padding-left: 1.2rem;
}
.res-v2-section-body li {
  margin-bottom: 0.35rem;
  line-height: 1.5;
}
.res-v2-section-body strong {
  color: var(--text-primary, #f5f3ef);
  font-weight: 700;
}

.res-v2-conversation {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .res-v2-conversation {
  border-top-color: rgba(0, 0, 0, 0.08);
}
.res-v2-conversation-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.6rem 0.4rem;
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text-primary, #f5f3ef);
  font-family: inherit;
  transition: background 0.15s ease;
}
.res-v2-conversation-toggle:hover {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme="light"] .res-v2-conversation-toggle:hover {
  background: rgba(0, 0, 0, 0.04);
}
.res-v2-conversation-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'Sora', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
}
.res-v2-conversation-icon {
  font-size: 1rem;
  line-height: 1;
  color: var(--accent, #e8650a);
}
.res-v2-conversation-chevron {
  color: var(--text-secondary, #a4a3a0);
  font-size: 0.72rem;
}

.res-v2-followup {
  margin: 1rem 0 0.3rem;
}
.res-v2-followup-text {
  width: 100%;
  box-sizing: border-box;
  min-height: 78px;
  padding: 0.7rem 0.85rem;
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.05));
  border: none;
  border-radius: 12px;
  color: var(--text-primary, #f5f3ef);
  font-family: 'Sora', sans-serif;
  font-size: 0.92rem;
  line-height: 1.45;
  resize: vertical;
  transition: box-shadow 0.15s ease, background 0.15s ease;
}
[data-theme="light"] .res-v2-followup-text {
  background: rgba(0, 0, 0, 0.05);
}
.res-v2-followup-text:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(232, 101, 10, 0.32);
}
.res-v2-followup-text::placeholder {
  color: var(--text-secondary, #a4a3a0);
  opacity: 0.65;
}
.res-v2-followup-hint {
  margin: 0.35rem 0.4rem 0;
  font-size: 0.7rem;
  color: var(--text-secondary, #a4a3a0);
}

.res-v2-actions {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 0.4rem;
}
.res-v2-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.res-v2-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.75rem 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  border-radius: 12px;
  color: var(--text-primary, #f5f3ef);
  font-family: 'Sora', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
[data-theme="light"] .res-v2-action {
  background: rgba(0, 0, 0, 0.04);
}
.res-v2-action:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}
[data-theme="light"] .res-v2-action:hover {
  background: rgba(0, 0, 0, 0.08);
}
.res-v2-action-icon {
  font-size: 1rem;
  line-height: 1;
  color: var(--accent, #e8650a);
}
.res-v2-action-primary {
  width: 100%;
  padding: 0.95rem 1rem;
  background: var(--accent, #e8650a);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 12px rgba(232, 101, 10, 0.32);
  transition: filter 0.12s ease, transform 0.1s ease;
}
.res-v2-action-primary:hover { filter: brightness(1.06); }
.res-v2-action-primary:active { transform: scale(0.99); }
.res-v2-action-secondary {
  width: 100%;
  padding: 0.8rem 1rem;
  background: transparent;
  border: 1.5px solid var(--accent, #e8650a);
  border-radius: 12px;
  color: var(--accent, #e8650a);
  font-family: 'Sora', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.res-v2-action-secondary:hover {
  background: rgba(232, 101, 10, 0.10);
}

/* =============================================================
   SCREEN-SESSIONS
   ============================================================= */

.ses-v2 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary, #0e0e10);
  color: var(--text-primary, #f5f3ef);
}
[data-theme="light"] .ses-v2 {
  background: var(--bg-primary, #f7f5f2);
}

.ses-v2-header {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.9rem 1rem 0.55rem;
  background: var(--bg-primary, #0e0e10);
}
[data-theme="light"] .ses-v2-header { background: var(--bg-primary, #f7f5f2); }

.ses-v2-back {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--text-primary, #f5f3ef);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ses-v2-back:hover { background: rgba(255, 255, 255, 0.05); }
[data-theme="light"] .ses-v2-back:hover { background: rgba(0, 0, 0, 0.05); }

.ses-v2-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--text-primary, #f5f3ef);
  margin: 0;
}

.ses-v2-upgrade-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.4rem 0.85rem;
  background: var(--green, #3cb371);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 3px 8px rgba(60, 179, 113, 0.36);
}
.ses-v2-upgrade-pill-icon { font-size: 1em; line-height: 1; position: relative; top: -1px; }

.ses-v2-filter {
  display: flex;
  gap: 0.35rem;
  padding: 0.15rem 1rem 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.ses-v2-filter::-webkit-scrollbar { display: none; }
.ses-v2-filter-pill {
  flex: 0 0 auto;
  padding: 0.42rem 0.9rem;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--text-secondary, #a4a3a0);
  font-family: 'Sora', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.ses-v2-filter-pill:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary, #f5f3ef);
}
[data-theme="light"] .ses-v2-filter-pill:hover { background: rgba(0, 0, 0, 0.05); }
.ses-v2-filter-pill.is-active {
  background: rgba(232, 101, 10, 0.15);
  color: var(--accent, #e8650a);
}

.ses-v2-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.2rem 1.1rem 1.4rem;
  -webkit-overflow-scrolling: touch;
}

.ses-v2-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Sora', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
  margin: 0.6rem 0.25rem 0.55rem;
}
.ses-v2-section-label-action {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-secondary, #a4a3a0);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.2rem 0.3rem;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}
.ses-v2-section-label-action:hover {
  color: var(--red, #e05555);
  background: rgba(224, 85, 85, 0.08);
}

.ses-v2-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.ses-v2-card {
  position: relative;
  display: grid;
  grid-template-columns: 2.2rem 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 0.85rem;
  row-gap: 0.35rem;
  align-items: start;
  width: 100%;
  padding: 0.8rem 0.5rem 0.85rem 0.4rem;
  background: transparent;
  border: none;
  border-radius: 14px;
  color: var(--text-primary, #f5f3ef);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.ses-v2-card:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}
[data-theme="light"] .ses-v2-card:hover { background: rgba(0, 0, 0, 0.04); }
.ses-v2-card:active { transform: translateY(0); }

.ses-v2-card + .ses-v2-card::before {
  content: '';
  position: absolute;
  top: -0.1rem;
  left: 3.45rem;
  right: 0.5rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
[data-theme="light"] .ses-v2-card + .ses-v2-card::before {
  background: rgba(0, 0, 0, 0.06);
}

.ses-v2-card-icon {
  grid-row: 1 / span 2;
  align-self: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  background: rgba(232, 101, 10, 0.16);
  color: var(--accent, #e8650a);
  box-shadow: inset 0 0 0 1px rgba(232, 101, 10, 0.30);
  flex-shrink: 0;
}
.ses-v2-card-icon--green {
  background: rgba(60, 179, 113, 0.18);
  color: var(--green, #3cb371);
  box-shadow: inset 0 0 0 1px rgba(60, 179, 113, 0.34);
}
.ses-v2-card-icon--yellow {
  background: rgba(240, 185, 74, 0.18);
  color: var(--yellow, #f0b94a);
  box-shadow: inset 0 0 0 1px rgba(240, 185, 74, 0.36);
}
.ses-v2-card-icon--red {
  background: rgba(224, 85, 85, 0.18);
  color: var(--red, #e05555);
  box-shadow: inset 0 0 0 1px rgba(224, 85, 85, 0.36);
}
.ses-v2-card-icon--blue {
  background: rgba(59, 130, 246, 0.18);
  color: #3b82f6;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.36);
}

.ses-v2-card-head {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 0;
}
.ses-v2-card-q {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.93rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--text-primary, #f5f3ef);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ses-v2-card-time {
  flex-shrink: 0;
  font-family: 'Sora', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-secondary, #a4a3a0);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  margin-top: 0.1rem;
}

.ses-v2-card-meta {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-width: 0;
}
.ses-v2-card-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.18rem 0.55rem;
  font-family: 'Sora', sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary, #a4a3a0);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  line-height: 1.15;
}
[data-theme="light"] .ses-v2-card-chip {
  background: rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.ses-v2-card-chip--decline {
  background: rgba(224, 85, 85, 0.16);
  color: var(--red, #e05555);
  box-shadow: inset 0 0 0 1px rgba(224, 85, 85, 0.32);
}
.ses-v2-card-chip--second {
  background: rgba(240, 185, 74, 0.16);
  color: var(--yellow, #f0b94a);
  box-shadow: inset 0 0 0 1px rgba(240, 185, 74, 0.32);
}
.ses-v2-card-chip--proceed {
  background: rgba(60, 179, 113, 0.16);
  color: var(--green, #3cb371);
  box-shadow: inset 0 0 0 1px rgba(60, 179, 113, 0.32);
}
.ses-v2-card-chip--info {
  background: rgba(59, 130, 246, 0.14);
  color: #3b82f6;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.30);
}
.ses-v2-card-vehicle {
  font-family: 'Sora', sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text-secondary, #a4a3a0);
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.ses-v2-card-vehicle::before {
  content: '\2022';
  margin-right: 0.45rem;
  opacity: 0.55;
}

.ses-v2-card-arrow {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--text-secondary, #a4a3a0);
  font-size: 1.2rem;
  font-weight: 600;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.ses-v2-card:hover .ses-v2-card-arrow {
  opacity: 1;
  color: var(--accent, #e8650a);
  transform: translateX(2px);
}

.ses-v2-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 3.5rem 1.5rem 2rem;
  text-align: center;
}
.ses-v2-empty.hidden { display: none; }
.ses-v2-empty-icon {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: rgba(232, 101, 10, 0.14);
  color: var(--accent, #e8650a);
  box-shadow: inset 0 0 0 1px rgba(232, 101, 10, 0.28);
  margin-bottom: 0.2rem;
}
.ses-v2-empty-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary, #f5f3ef);
  margin: 0;
}
.ses-v2-empty-sub {
  font-family: 'Sora', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.45;
  max-width: 18rem;
  margin: 0;
}
.ses-v2-empty-cta {
  margin-top: 0.55rem;
  padding: 0.75rem 1.2rem;
  background: var(--accent, #e8650a);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 12px rgba(232, 101, 10, 0.32);
  transition: filter 0.12s ease, transform 0.1s ease;
}
.ses-v2-empty-cta:hover { filter: brightness(1.06); }
.ses-v2-empty-cta:active { transform: scale(0.99); }

/* =============================================================
   SCREEN-PREMIUM-FEATURES
   ============================================================= */

.prem-v2 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary, #0e0e10);
  color: var(--text-primary, #f5f3ef);
}
[data-theme="light"] .prem-v2 {
  background: var(--bg-primary, #f7f5f2);
}

.prem-v2-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1rem 0.6rem;
  background: var(--bg-primary, #0e0e10);
}
[data-theme="light"] .prem-v2-header { background: var(--bg-primary, #f7f5f2); }
.prem-v2-back {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--text-primary, #f5f3ef);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.prem-v2-back:hover { background: rgba(255, 255, 255, 0.05); }
[data-theme="light"] .prem-v2-back:hover { background: rgba(0, 0, 0, 0.05); }
.prem-v2-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.005em;
  color: var(--text-primary, #f5f3ef);
  margin: 0;
}
.prem-v2-upgrade-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.4rem 0.85rem;
  background: var(--green, #3cb371);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: 'Sora', sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 3px 8px rgba(60, 179, 113, 0.36);
}
.prem-v2-upgrade-pill-icon { font-size: 1em; line-height: 1; }

.prem-v2-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.3rem 1.1rem 1.5rem;
  -webkit-overflow-scrolling: touch;
}

.prem-v2-section-label {
  font-family: 'Sora', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
  margin: 1.4rem 0.1rem 0.65rem;
}

.prem-v2-hero {
  padding: 0.6rem 0.1rem 0.4rem;
}
.prem-v2-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Sora', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent, #e8650a);
  margin-bottom: 0.5rem;
}
.prem-v2-hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--accent, #e8650a);
  box-shadow: 0 0 0 3px rgba(232, 101, 10, 0.25);
}
.prem-v2-hero-headline {
  font-family: 'Outfit', sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.13;
  color: var(--text-primary, #f5f3ef);
  margin: 0 0 0.45rem;
}
.prem-v2-hero-sub {
  font-family: 'Sora', sans-serif;
  font-size: 0.88rem;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.45;
  margin: 0;
}
.prem-v2-hero-sub .prem-v2-hl {
  color: var(--accent, #e8650a);
  font-weight: 600;
}

.prem-v2-jump {
  display: block;
  text-align: center;
  margin: 0.9rem 0 0.2rem;
  font-family: 'Sora', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent, #e8650a);
  text-decoration: none;
  padding: 0.5rem;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.prem-v2-jump:hover {
  background: rgba(232, 101, 10, 0.08);
}

.prem-v2-plans {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.prem-v2-plan {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "badge       arrow"
    "name        arrow"
    "price       arrow"
    "tag         arrow";
  align-items: center;
  column-gap: 0.8rem;
  row-gap: 0.18rem;
  width: 100%;
  padding: 1rem 1rem 1.05rem;
  background: rgba(255, 255, 255, 0.035);
  border: none;
  border-radius: 16px;
  color: var(--text-primary, #f5f3ef);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s ease, transform 0.1s ease;
}
[data-theme="light"] .prem-v2-plan {
  background: rgba(0, 0, 0, 0.035);
}
.prem-v2-plan:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}
[data-theme="light"] .prem-v2-plan:hover {
  background: rgba(0, 0, 0, 0.06);
}
.prem-v2-plan:active { transform: translateY(0); }
.prem-v2-plan--popular {
  background: rgba(232, 101, 10, 0.10);
}
[data-theme="light"] .prem-v2-plan--popular {
  background: rgba(232, 101, 10, 0.10);
}
.prem-v2-plan--popular:hover {
  background: rgba(232, 101, 10, 0.15);
}
[data-theme="light"] .prem-v2-plan--popular:hover {
  background: rgba(232, 101, 10, 0.15);
}
.prem-v2-plan-badge {
  grid-area: badge;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary, #a4a3a0);
  font-family: 'Sora', sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
[data-theme="light"] .prem-v2-plan-badge {
  background: rgba(0, 0, 0, 0.07);
}
.prem-v2-plan-badge--popular {
  background: rgba(232, 101, 10, 0.20);
  color: var(--accent, #e8650a);
  box-shadow: inset 0 0 0 1px rgba(232, 101, 10, 0.40);
}
.prem-v2-plan-badge--best {
  background: rgba(60, 179, 113, 0.18);
  color: var(--green, #3cb371);
  box-shadow: inset 0 0 0 1px rgba(60, 179, 113, 0.36);
}
.prem-v2-plan-name {
  grid-area: name;
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
}
.prem-v2-plan-price {
  grid-area: price;
  font-family: 'Outfit', sans-serif;
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--text-primary, #f5f3ef);
  font-variant-numeric: tabular-nums;
}
.prem-v2-plan-period {
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary, #a4a3a0);
  margin-left: 0.25rem;
  letter-spacing: 0;
}
.prem-v2-plan-tag {
  grid-area: tag;
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.35;
  margin: 0.3rem 0 0;
}
.prem-v2-plan-arrow {
  grid-area: arrow;
  align-self: center;
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(232, 101, 10, 0.16);
  color: var(--accent, #e8650a);
  box-shadow: inset 0 0 0 1px rgba(232, 101, 10, 0.30);
  font-size: 1.25rem;
  font-weight: 700;
}
.prem-v2-plan-arrow--green {
  background: rgba(60, 179, 113, 0.18);
  color: var(--green, #3cb371);
  box-shadow: inset 0 0 0 1px rgba(60, 179, 113, 0.34);
}

.prem-v2-compare-head {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 0.7fr 0.7fr;
  gap: 0.2rem;
  padding: 0.5rem 0.1rem 0.5rem;
  align-items: end;
  margin-bottom: 0.2rem;
}
.prem-v2-compare-head-feat {
  font-family: 'Sora', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
}
.prem-v2-compare-head-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  text-align: center;
}
.prem-v2-compare-head-name {
  font-family: 'Sora', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
}
.prem-v2-compare-head-price {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-primary, #f5f3ef);
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.prem-v2-compare-head-price-btn {
  background: transparent;
  border: none;
  padding: 0.1rem 0.2rem;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text-primary, #f5f3ef);
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.prem-v2-compare-head-price-btn:hover {
  background: rgba(232, 101, 10, 0.10);
  color: var(--accent, #e8650a);
}
.prem-v2-compare-head-price-btn--alt {
  font-size: 0.7rem;
  color: var(--text-secondary, #a4a3a0);
  font-weight: 600;
  margin-top: 0.1rem;
}
.prem-v2-compare-head-col--prem .prem-v2-compare-head-name {
  color: var(--accent, #e8650a);
}
.prem-v2-compare-head-clickable {
  cursor: pointer;
  border-radius: 8px;
  padding: 0.2rem;
  transition: background 0.15s ease;
}
.prem-v2-compare-head-clickable:hover {
  background: rgba(232, 101, 10, 0.08);
}

.prem-v2-compare-rows {
  display: flex;
  flex-direction: column;
}
.prem-v2-compare-row {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 0.7fr 0.7fr;
  gap: 0.2rem;
  padding: 0.75rem 0.1rem;
  align-items: center;
  border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
}
[data-theme="light"] .prem-v2-compare-row {
  border-top-color: rgba(0, 0, 0, 0.07);
}
.prem-v2-compare-row:first-child { border-top: none; }

.prem-v2-feat-name {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text-primary, #f5f3ef);
  line-height: 1.2;
  margin-bottom: 0.15rem;
}
.prem-v2-feat-snippet {
  display: block;
  font-family: 'Sora', sans-serif;
  font-size: 0.7rem;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.35;
}

.prem-v2-compare-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Sora', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.2;
}
.prem-v2-check {
  font-size: 0.95rem;
  color: var(--green, #3cb371);
  font-weight: 800;
  line-height: 1;
}
.prem-v2-dash {
  font-size: 1rem;
  color: var(--text-secondary, #a4a3a0);
  opacity: 0.4;
  line-height: 1;
}
.prem-v2-limited {
  display: inline-flex;
  padding: 0.16rem 0.45rem;
  border-radius: 999px;
  background: rgba(240, 185, 74, 0.16);
  color: var(--yellow, #f0b94a);
  box-shadow: inset 0 0 0 1px rgba(240, 185, 74, 0.32);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.prem-v2-cell-prem {
  color: var(--text-primary, #f5f3ef);
}

.prem-v2-emo-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-primary, #f5f3ef);
  margin: 0 0 0.55rem;
  text-align: center;
}
.prem-v2-plan-tag-emo {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--text-primary, #f5f3ef);
  opacity: 0.85;
}

.prem-v2-realcost {
  margin-top: 0.6rem;
}
.prem-v2-realcost-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-primary, #f5f3ef);
  margin: 0 0 0.35rem;
}
.prem-v2-realcost-sub {
  font-family: 'Sora', sans-serif;
  font-size: 0.85rem;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.45;
  margin: 0 0 1rem;
}
.prem-v2-realcost-bucket {
  display: flex;
  gap: 0.7rem;
  padding: 0.7rem 0.2rem 0.9rem;
  border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
}
[data-theme="light"] .prem-v2-realcost-bucket {
  border-top-color: rgba(0, 0, 0, 0.07);
}
.prem-v2-realcost-bucket-icon {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  background: rgba(240, 185, 74, 0.18);
  color: var(--yellow, #f0b94a);
  box-shadow: inset 0 0 0 1px rgba(240, 185, 74, 0.36);
}
.prem-v2-realcost-bucket-icon--red {
  background: rgba(224, 85, 85, 0.18);
  color: var(--red, #e05555);
  box-shadow: inset 0 0 0 1px rgba(224, 85, 85, 0.36);
}
.prem-v2-realcost-bucket-body {
  flex: 1;
}
.prem-v2-realcost-bucket-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.97rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--text-primary, #f5f3ef);
  margin: 0 0 0.3rem;
}
.prem-v2-realcost-bucket-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.prem-v2-realcost-bucket-list li {
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.4;
  padding-left: 0.85rem;
  position: relative;
}
.prem-v2-realcost-bucket-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 999px;
  background: var(--accent, #e8650a);
  opacity: 0.6;
}

.prem-v2-realcost-compare {
  padding: 0.6rem 0.1rem 0.4rem;
}
.prem-v2-realcost-compare-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--text-primary, #f5f3ef);
  margin: 0 0 0.5rem;
}
.prem-v2-realcost-compare-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 0.4rem;
  padding: 0.55rem 0.1rem;
  align-items: center;
  border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
}
[data-theme="light"] .prem-v2-realcost-compare-row {
  border-top-color: rgba(0, 0, 0, 0.07);
}
.prem-v2-realcost-compare-row--head {
  border-top: none;
  padding: 0.3rem 0.1rem 0.4rem;
}
.prem-v2-realcost-compare-head-feat {
  font-family: 'Sora', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
}
.prem-v2-realcost-compare-head-other,
.prem-v2-realcost-compare-head-app {
  font-family: 'Sora', sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}
.prem-v2-realcost-compare-head-other { color: var(--red, #e05555); }
.prem-v2-realcost-compare-head-app { color: var(--green, #3cb371); }

.prem-v2-realcost-feat {
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary, #f5f3ef);
  letter-spacing: -0.005em;
}
.prem-v2-realcost-other,
.prem-v2-realcost-app {
  font-family: 'Sora', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.prem-v2-realcost-other { color: var(--red, #e05555); }
.prem-v2-realcost-app { color: var(--green, #3cb371); }
.prem-v2-realcost-total .prem-v2-realcost-feat,
.prem-v2-realcost-total .prem-v2-realcost-other,
.prem-v2-realcost-total .prem-v2-realcost-app {
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
}

.prem-v2-realcost-anchor {
  margin-top: 1rem;
  padding: 1rem 0.2rem;
  text-align: center;
}
.prem-v2-realcost-anchor-eyebrow {
  font-family: 'Sora', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent, #e8650a);
  margin-bottom: 0.45rem;
}
.prem-v2-realcost-anchor-headline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.prem-v2-realcost-anchor-was {
  font-size: 1.2rem;
  color: var(--red, #e05555);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  opacity: 0.85;
}
.prem-v2-realcost-anchor-vs {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary, #a4a3a0);
  text-transform: lowercase;
  letter-spacing: 0;
}
.prem-v2-realcost-anchor-plans {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: flex-start;
}
.prem-v2-realcost-anchor-plan {
  font-size: 0.95rem;
  color: var(--green, #3cb371);
  font-variant-numeric: tabular-nums;
}
.prem-v2-realcost-anchor-plan-unit {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary, #a4a3a0);
  letter-spacing: 0;
  margin-left: 0.15rem;
}

.prem-v2-insight {
  margin-top: 0.5rem;
  padding: 0.85rem 0.9rem 0.85rem 0.85rem;
  border: none;
  border-left: 3px solid var(--yellow, #f0b94a);
  background: transparent;
  border-radius: 0;
}
.prem-v2-insight-badge {
  display: inline-flex;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(240, 185, 74, 0.16);
  color: var(--yellow, #f0b94a);
  box-shadow: inset 0 0 0 1px rgba(240, 185, 74, 0.32);
  font-family: 'Sora', sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.prem-v2-insight-text {
  font-family: 'Sora', sans-serif;
  font-size: 0.8rem;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.45;
  margin: 0 0 0.4rem;
}
.prem-v2-insight-text:last-child { margin-bottom: 0; }
.prem-v2-insight-text strong { color: var(--text-primary, #f5f3ef); font-weight: 700; }

.prem-v2-faqs {
  display: flex;
  flex-direction: column;
}
.prem-v2-faq {
  border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
}
[data-theme="light"] .prem-v2-faq {
  border-top-color: rgba(0, 0, 0, 0.07);
}
.prem-v2-faq:first-child { border-top: none; }
.prem-v2-faq[open] > .prem-v2-faq-summary .prem-v2-faq-chev {
  transform: rotate(90deg);
  color: var(--accent, #e8650a);
}
.prem-v2-faq-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 0.2rem;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text-primary, #f5f3ef);
}
.prem-v2-faq-summary::-webkit-details-marker { display: none; }
.prem-v2-faq-q-icon {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(232, 101, 10, 0.16);
  color: var(--accent, #e8650a);
  box-shadow: inset 0 0 0 1px rgba(232, 101, 10, 0.30);
  font-size: 1rem;
}
.prem-v2-faq-q-text {
  flex: 1;
  line-height: 1.3;
}
.prem-v2-faq-chev {
  color: var(--text-secondary, #a4a3a0);
  font-size: 1.15rem;
  transition: transform 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.prem-v2-faq-a {
  padding: 0 0.2rem 1rem 3rem;
  font-family: 'Sora', sans-serif;
  font-size: 0.82rem;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.5;
}
.prem-v2-faq-a p { margin: 0 0 0.4rem; }
.prem-v2-faq-a p:last-child { margin-bottom: 0; }
.prem-v2-faq-a strong { color: var(--text-primary, #f5f3ef); font-weight: 700; }
.prem-v2-faq-a ul {
  margin: 0;
  padding: 0 0 0 1.1rem;
}
.prem-v2-faq-a li {
  margin-bottom: 0.4rem;
}
.prem-v2-faq-a a {
  color: var(--accent, #e8650a);
  text-decoration: underline;
}

.prem-v2-reassure {
  margin: 1rem 0 0.4rem;
  text-align: center;
  font-family: 'Sora', sans-serif;
  font-size: 0.8rem;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.45;
}

/* =============================================================
   SCREEN-COMMUNITY
   ============================================================= */

.comm-v2 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary, #0e0e10);
  color: var(--text-primary, #f5f3ef);
}
[data-theme="light"] .comm-v2 {
  background: var(--bg-primary, #f7f5f2);
}

.comm-v2-header {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.9rem 1rem 0.5rem;
  background: var(--bg-primary, #0e0e10);
}
[data-theme="light"] .comm-v2-header {
  background: var(--bg-primary, #f7f5f2);
}
.comm-v2-back {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--text-primary, #f5f3ef);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.comm-v2-back:hover { background: rgba(255, 255, 255, 0.05); }
[data-theme="light"] .comm-v2-back:hover { background: rgba(0, 0, 0, 0.05); }
.comm-v2-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary, #f5f3ef);
  margin: 0;
}
.comm-v2-upgrade-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.4rem 0.85rem;
  background: var(--green, #3cb371);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 3px 8px rgba(60, 179, 113, 0.36);
}
.comm-v2-upgrade-pill-icon { font-size: 1em; line-height: 1; position: relative; top: -1px; }

.comm-v2-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.4rem 1.1rem 1.5rem;
  -webkit-overflow-scrolling: touch;
}

.comm-v2-intro {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.6rem 0 1rem;
}
.comm-v2-intro-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  font-size: 1.15rem;
  line-height: 1;
  background: rgba(232, 101, 10, 0.16);
  color: var(--accent, #e8650a);
  box-shadow: inset 0 0 0 1px rgba(232, 101, 10, 0.30);
}
.comm-v2-intro-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.comm-v2-intro-headline {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--text-primary, #f5f3ef);
  margin: 0;
}
.comm-v2-intro-sub {
  font-size: 0.8rem;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.4;
  margin: 0;
}

.comm-v2-category {
  margin: 0 0 0.4rem;
}
.comm-v2-category-label {
  font-family: 'Sora', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
  margin: 1.1rem 0.25rem 0.5rem;
}

.comm-v2-questions {
  display: flex;
  flex-direction: column;
}

.comm-v2-question {
  display: block;
  position: relative;
  width: 100%;
  /* Right padding reserves a chevron column: 2.8rem from the right
     edge for the chevron + divider + breathing space. The button
     itself contains only plain text — the chevron is drawn by the
     v1 .community-question::after pseudo-element, and the v2.5.21
     ::before below adds the vertical divider just to its left. */
  padding: 0.85rem 2.8rem 0.85rem 0.4rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  color: var(--text-primary, #f5f3ef);
  font-family: 'Sora', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
/* Vertical divider line between the question text and the chevron
   on the right. Sits just to the left of the .community-question
   ::after chevron (positioned at right: 0.95rem with a ~1.35rem
   font-size, so the divider lands at right: 2.1rem to leave room
   for the chevron column. */
.comm-v2-question::before {
  content: '';
  position: absolute;
  right: 2.1rem;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: rgba(255, 255, 255, 0.22);
  pointer-events: none;
}
[data-theme="light"] .comm-v2-question::before {
  background: rgba(0, 0, 0, 0.22);
}
[data-theme="light"] .comm-v2-question {
  border-bottom-color: rgba(0, 0, 0, 0.07);
}
.comm-v2-question:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--accent, #e8650a);
}
[data-theme="light"] .comm-v2-question:hover {
  background: rgba(0, 0, 0, 0.03);
}
.comm-v2-question.is-expanded {
  color: var(--accent, #e8650a);
  border-bottom-color: transparent;
}
.comm-v2-question.is-expanded .comm-v2-question-chevron {
  transform: rotate(90deg);
  color: var(--accent, #e8650a);
}

.comm-v2-answer {
  padding: 0 0.4rem 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .comm-v2-answer {
  border-bottom-color: rgba(0, 0, 0, 0.07);
}
.comm-v2-answer.hidden { display: none; }

.comm-v2-answer-verdict {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  font-family: 'Sora', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(224, 85, 85, 0.16);
  color: var(--red, #e05555);
  box-shadow: inset 0 0 0 1px rgba(224, 85, 85, 0.32);
  margin-bottom: 0.7rem;
}
.comm-v2-answer-verdict.is-proceed {
  background: rgba(60, 179, 113, 0.16);
  color: var(--green, #3cb371);
  box-shadow: inset 0 0 0 1px rgba(60, 179, 113, 0.32);
}
.comm-v2-answer-verdict.is-caution {
  background: rgba(240, 185, 74, 0.16);
  color: var(--yellow, #f0b94a);
  box-shadow: inset 0 0 0 1px rgba(240, 185, 74, 0.32);
}
.comm-v2-answer-section {
  margin-bottom: 0.8rem;
}
.comm-v2-answer-section:last-child { margin-bottom: 0; }
.comm-v2-answer-section-label {
  font-family: 'Sora', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
  margin: 0 0 0.3rem;
}
.comm-v2-answer-section p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-primary, #f5f3ef);
  margin: 0 0 0.45rem;
}
.comm-v2-answer-section p:last-child { margin-bottom: 0; }
.comm-v2-answer-section ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.comm-v2-answer-section li {
  position: relative;
  padding-left: 1.05rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-primary, #f5f3ef);
}
.comm-v2-answer-section li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.55rem;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 999px;
  background: var(--accent, #e8650a);
}

.comm-v2-footnote {
  margin: 1.6rem 0.25rem 0.4rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--text-secondary, #a4a3a0);
  text-align: center;
}

/* =============================================================
   SCREEN-SHOP-FINDER
   ============================================================= */

.shop-v2 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary, #0e0e10);
  color: var(--text-primary, #f5f3ef);
}
[data-theme="light"] .shop-v2 {
  background: var(--bg-primary, #f7f5f2);
}
.shop-v2-header {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem 1fr 2.5rem;
  align-items: center;
  gap: 0.4rem;
  padding: 0.9rem 1rem 0.6rem;
  background: var(--bg-primary, #0e0e10);
}
[data-theme="light"] .shop-v2-header { background: var(--bg-primary, #f7f5f2); }
.shop-v2-back {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--text-primary, #f5f3ef);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.shop-v2-back:hover { background: rgba(255, 255, 255, 0.05); }
[data-theme="light"] .shop-v2-back:hover { background: rgba(0, 0, 0, 0.05); }
.shop-v2-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.005em;
  color: var(--text-primary, #f5f3ef);
  margin: 0;
}
.shop-v2-upgrade-pill {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.4rem 0.85rem;
  background: var(--green, #3cb371);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 3px 8px rgba(60, 179, 113, 0.36);
  z-index: 11;
}
.shop-v2-upgrade-pill-icon { font-size: 1em; line-height: 1; }
.shop-v2-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.25rem 1.1rem 1.4rem;
  -webkit-overflow-scrolling: touch;
}
.shop-v2-hero {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.3rem 0 0.7rem;
}
.shop-v2-hero-icon {
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: rgba(60, 179, 113, 0.18);
  color: var(--green, #3cb371);
  box-shadow: inset 0 0 0 1px rgba(60, 179, 113, 0.34);
}
.shop-v2-hero-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.shop-v2-hero-eyebrow {
  font-family: 'Sora', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--green, #3cb371);
}
.shop-v2-hero-headline {
  font-family: 'Outfit', sans-serif;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--text-primary, #f5f3ef);
  margin: 0;
}
.shop-v2-hero-sub {
  font-size: 0.82rem;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.4;
  margin: 0;
}
.shop-v2-section-label {
  font-family: 'Sora', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
  margin: 0.85rem 0.1rem 0.5rem;
}
.shop-v2-section-label:first-child { margin-top: 0.4rem; }
.shop-v2-controls {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.15rem 0 0.2rem;
}
.shop-v2-radius-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}
.shop-v2-radius-label {
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary, #a4a3a0);
  letter-spacing: 0.01em;
}
.shop-v2-radius-value {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.65rem;
  background: rgba(232, 101, 10, 0.14);
  border-radius: 999px;
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent, #e8650a);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.shop-v2-radius {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  outline: none;
  margin: 0.05rem 0 0.1rem;
  cursor: pointer;
}
[data-theme="light"] .shop-v2-radius {
  background: rgba(0, 0, 0, 0.10);
}
.shop-v2-radius::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent, #e8650a);
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 2px 6px rgba(232, 101, 10, 0.4);
  cursor: pointer;
}
.shop-v2-radius::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent, #e8650a);
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 2px 6px rgba(232, 101, 10, 0.4);
  cursor: pointer;
}
.shop-v2-location-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.shop-v2-location-icon {
  position: absolute;
  left: 0.95rem;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--text-secondary, #a4a3a0);
  pointer-events: none;
}
/* Higher-specificity `input.shop-v2-location` selector to override the
   competing v1 `.shop-location-input` rule in styles.css that was
   stripping the left padding and letting the location-pin icon overlap
   the placeholder text. The legacy class is preserved on the markup for
   any JS hooks, so we have to win on cascade order + specificity. */
input.shop-v2-location {
  width: 100%;
  box-sizing: border-box;
  padding: 0.78rem 0.9rem;
  padding-left: 2.6rem;
  margin: 0;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 999px;
  color: var(--text-primary, #f5f3ef);
  font-family: 'Sora', sans-serif;
  font-size: 0.92rem;
  transition: box-shadow 0.15s ease, background 0.15s ease;
}
[data-theme="light"] input.shop-v2-location { background: rgba(0, 0, 0, 0.05); }
input.shop-v2-location:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(232, 101, 10, 0.32);
  border: none;
}
input.shop-v2-location::placeholder {
  color: var(--text-secondary, #a4a3a0);
  opacity: 0.6;
}
.shop-v2-search-btn {
  display: block;
  width: 100%;
  margin-top: 0.1rem;
  padding: 0.85rem 1rem;
  background: var(--accent, #e8650a);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 12px rgba(232, 101, 10, 0.32);
  transition: filter 0.12s ease, transform 0.1s ease;
}
.shop-v2-search-btn:hover { filter: brightness(1.06); }
.shop-v2-search-btn:active { transform: scale(0.99); }
.shop-v2-status {
  margin: 0.7rem 0.1rem 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-secondary, #a4a3a0);
}
.shop-v2-expander {
  background: transparent;
  border: none;
  border-radius: 12px;
  padding: 0;
  margin: 0.4rem 0 0;
}
.shop-v2-expander > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.4rem;
  cursor: pointer;
  border-radius: 12px;
  transition: background 0.15s ease;
}
.shop-v2-expander > summary::-webkit-details-marker { display: none; }
.shop-v2-expander > summary::marker { content: ''; }

/* Suppress the v1 .shop-finder-tips > summary::after chevron so we don't
   render two arrows on the same row (v1 ::after + v2 explicit
   <span class="shop-v2-expander-chevron">). */
.shop-v2-expander.shop-finder-tips > summary::after,
.shop-v2-expander.shop-finder-versus > summary::after { content: none; }

.shop-v2-expander > summary:hover { background: rgba(255, 255, 255, 0.04); }
[data-theme="light"] .shop-v2-expander > summary:hover { background: rgba(0, 0, 0, 0.04); }
.shop-v2-expander-icon {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  background: rgba(240, 185, 74, 0.18);
  color: var(--yellow, #f0b94a);
  box-shadow: inset 0 0 0 1px rgba(240, 185, 74, 0.36);
}
.shop-v2-expander-icon--blue {
  background: rgba(59, 130, 246, 0.18);
  color: #3b82f6;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.36);
}
.shop-v2-expander-label {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary, #f5f3ef);
}
.shop-v2-expander-chevron {
  flex-shrink: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-secondary, #a4a3a0);
  transition: transform 0.18s ease;
}
.shop-v2-expander[open] > summary .shop-v2-expander-chevron {
  transform: rotate(90deg);
}
.shop-v2-expander-body {
  padding: 0.35rem 0.5rem 0.7rem 1rem;
  margin: 0.1rem 0 0 1.05rem;
  border-left: 2px solid rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .shop-v2-expander-body {
  border-left-color: rgba(0, 0, 0, 0.08);
}
.shop-v2-expander-headline {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--accent, #e8650a);
  margin: 0.15rem 0 0.45rem;
  line-height: 1.25;
}
.shop-v2-expander-body p {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-primary, #f5f3ef);
  margin: 0 0 0.6rem;
}
.shop-v2-expander-body p.is-sub {
  color: var(--text-secondary, #a4a3a0);
}
.shop-v2-expander-list {
  list-style: none;
  padding: 0;
  margin: 0.2rem 0 0;
}
.shop-v2-expander-list li {
  position: relative;
  padding: 0.15rem 0 0.5rem 1rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-primary, #f5f3ef);
}
.shop-v2-expander-list li::before {
  content: '';
  position: absolute;
  left: 0.05rem;
  top: 0.65rem;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  background: var(--accent, #e8650a);
  opacity: 0.7;
}
.shop-v2-versus-col {
  margin-top: 0.7rem;
}
.shop-v2-versus-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary, #f5f3ef);
  margin: 0 0 0.3rem;
}
.shop-v2-versus-label {
  font-family: 'Sora', sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin: 0.5rem 0 0.25rem;
}
.shop-v2-versus-label.is-pros { color: var(--green, #3cb371); }
.shop-v2-versus-label.is-cons { color: var(--red, #e05555); }
.shop-v2-map {
  width: 100%;
  height: 220px;
  margin: 0.8rem 0 0;
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(135deg,
      rgba(60, 179, 113, 0.10) 0%,
      rgba(59, 130, 246, 0.10) 50%,
      rgba(232, 101, 10, 0.10) 100%),
    var(--bg-secondary, rgba(255, 255, 255, 0.04));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-theme="light"] .shop-v2-map {
  background:
    linear-gradient(135deg,
      rgba(60, 179, 113, 0.10) 0%,
      rgba(59, 130, 246, 0.10) 50%,
      rgba(232, 101, 10, 0.10) 100%),
    rgba(0, 0, 0, 0.04);
}
.shop-v2-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 0.4rem;
}
.shop-v2-result {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.5rem;
  background: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  text-align: left;
  font-family: inherit;
  color: var(--text-primary, #f5f3ef);
  width: 100%;
}
.shop-v2-result:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}
[data-theme="light"] .shop-v2-result:hover { background: rgba(0, 0, 0, 0.04); }
.shop-v2-result-icon {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  background: rgba(232, 101, 10, 0.16);
  color: var(--accent, #e8650a);
  box-shadow: inset 0 0 0 1px rgba(232, 101, 10, 0.30);
}
.shop-v2-result-icon--green {
  background: rgba(60, 179, 113, 0.18);
  color: var(--green, #3cb371);
  box-shadow: inset 0 0 0 1px rgba(60, 179, 113, 0.34);
}
.shop-v2-result-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.shop-v2-result-name {
  font-family: 'Outfit', sans-serif;
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary, #f5f3ef);
  line-height: 1.2;
}
.shop-v2-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  font-size: 0.76rem;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.35;
}
.shop-v2-result-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--yellow, #f0b94a);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.shop-v2-result-dot {
  width: 0.22rem;
  height: 0.22rem;
  border-radius: 999px;
  background: var(--text-secondary, #a4a3a0);
  opacity: 0.6;
}
.shop-v2-result-address {
  font-size: 0.76rem;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.35;
}
.shop-v2-result-chevron {
  flex-shrink: 0;
  color: var(--text-secondary, #a4a3a0);
  font-size: 1.15rem;
  font-weight: 600;
  align-self: center;
}

/* =============================================================
   SCREEN-CALCULATORS
   ============================================================= */

.calc-v2 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary, #0e0e10);
  color: var(--text-primary, #f5f3ef);
}
[data-theme="light"] .calc-v2 { background: var(--bg-primary, #f7f5f2); }
.calc-v2-header {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem 1fr 2.5rem;
  align-items: center;
  gap: 0.4rem;
  padding: 0.9rem 1rem 0.5rem;
  background: var(--bg-primary, #0e0e10);
}
[data-theme="light"] .calc-v2-header { background: var(--bg-primary, #f7f5f2); }
.calc-v2-back {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--text-primary, #f5f3ef);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.calc-v2-back:hover { background: rgba(255, 255, 255, 0.05); }
[data-theme="light"] .calc-v2-back:hover { background: rgba(0, 0, 0, 0.05); }
.calc-v2-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.005em;
  color: var(--text-primary, #f5f3ef);
  margin: 0;
}
.calc-v2-upgrade-pill {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.4rem 0.85rem;
  background: var(--green, #3cb371);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: 'Sora', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 3px 8px rgba(60, 179, 113, 0.36);
}
.calc-v2-upgrade-pill-icon { font-size: 1em; line-height: 1; }
.calc-v2-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.2rem 1.1rem 1.4rem;
  -webkit-overflow-scrolling: touch;
}
.calc-v2-intro {
  font-family: 'Sora', sans-serif;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-secondary, #a4a3a0);
  margin: 0.35rem 0.25rem 0.8rem;
}
.calc-v2-section-label {
  font-family: 'Sora', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
  margin: 1.05rem 0.25rem 0.45rem;
}
.calc-v2-section-label:first-child { margin-top: 0.4rem; }
.calc-v2-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* v2.6.2 — Calculators screen: 1/3-width tiles, fully centered.
   With only 3 calculators (one per section) the previous 3-column grid
   left each card sitting in the LEFT column with empty space to its
   right. v2.6.4 keeps the 1/3-width footprint per card but centers
   each one horizontally in its own row. Section labels span full
   width and are also center-aligned. */
#screen-calculators .calc-v2-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
  justify-items: center;
  text-align: center;
}
#screen-calculators .calc-v2-section-label {
  width: 100%;
  text-align: center;
  margin-top: 0.8rem;
  margin-bottom: 0.15rem;
}
#screen-calculators .calc-v2-section-label:first-child {
  margin-top: 0.4rem;
}
#screen-calculators .calc-v2-card {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 0.4rem;
  padding: 0.85rem 0.45rem;
  min-height: 0;
  width: 33%;
  min-width: 11rem;
}
#screen-calculators .calc-v2-card-icon {
  width: 1.9rem;
  height: 1.9rem;
  font-size: 0.95rem;
  border-radius: 10px;
}
#screen-calculators .calc-v2-card-body {
  flex: 0 0 auto;
  width: 100%;
  align-items: center;
  text-align: center;
  gap: 0.25rem;
}
#screen-calculators .calc-v2-card-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  line-height: 1.2;
}
#screen-calculators .calc-v2-card-sub {
  font-size: 0.68rem;
  line-height: 1.3;
}
#screen-calculators .calc-v2-card-arrow {
  display: none;
}
#screen-calculators .calc-v2-card-tag {
  margin-left: 0;
  font-size: 0.55rem;
  padding: 0.1rem 0.45rem;
}
.calc-v2-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.85rem 0.55rem 0.85rem 0.4rem;
  background: transparent;
  border: none;
  border-radius: 14px;
  color: var(--text-primary, #f5f3ef);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.calc-v2-card:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}
[data-theme="light"] .calc-v2-card:hover { background: rgba(0, 0, 0, 0.04); }
.calc-v2-card:active { transform: translateY(0); }
.calc-v2-card[disabled],
.calc-v2-card[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}
.calc-v2-card[disabled]:hover,
.calc-v2-card[aria-disabled="true"]:hover {
  background: transparent;
  transform: none;
}
.calc-v2-card-icon {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  background: rgba(232, 101, 10, 0.16);
  color: var(--accent, #e8650a);
  box-shadow: inset 0 0 0 1px rgba(232, 101, 10, 0.30);
}
.calc-v2-card-icon--green { background: rgba(60, 179, 113, 0.18); color: var(--green, #3cb371); box-shadow: inset 0 0 0 1px rgba(60, 179, 113, 0.34); }
.calc-v2-card-icon--yellow { background: rgba(240, 185, 74, 0.18); color: var(--yellow, #f0b94a); box-shadow: inset 0 0 0 1px rgba(240, 185, 74, 0.36); }
.calc-v2-card-icon--red { background: rgba(224, 85, 85, 0.18); color: var(--red, #e05555); box-shadow: inset 0 0 0 1px rgba(224, 85, 85, 0.36); }
.calc-v2-card-icon--blue { background: rgba(59, 130, 246, 0.18); color: #3b82f6; box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.36); }
.calc-v2-card-icon--neutral { background: rgba(164, 163, 160, 0.14); color: var(--text-secondary, #a4a3a0); box-shadow: inset 0 0 0 1px rgba(164, 163, 160, 0.26); }
.calc-v2-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.calc-v2-card-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.97rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-primary, #f5f3ef);
}
.calc-v2-card-sub {
  font-size: 0.78rem;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.35;
}
.calc-v2-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.45rem;
  padding: 0.12rem 0.5rem;
  font-family: 'Sora', sans-serif;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}
.calc-v2-card-tag--premium { background: rgba(240, 185, 74, 0.16); color: var(--yellow, #f0b94a); box-shadow: inset 0 0 0 1px rgba(240, 185, 74, 0.32); }
.calc-v2-card-tag--soon { background: rgba(164, 163, 160, 0.14); color: var(--text-secondary, #a4a3a0); box-shadow: inset 0 0 0 1px rgba(164, 163, 160, 0.26); }
.calc-v2-card-arrow {
  color: var(--text-secondary, #a4a3a0);
  font-size: 1.25rem;
  font-weight: 600;
  flex-shrink: 0;
  transition: color 0.15s ease, transform 0.15s ease;
}
.calc-v2-card:hover .calc-v2-card-arrow {
  color: var(--accent, #e8650a);
  transform: translateX(2px);
}
.calc-v2-card[disabled] .calc-v2-card-arrow,
.calc-v2-card[aria-disabled="true"] .calc-v2-card-arrow {
  display: none;
}
.calc-v2-upgrade-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  margin-top: 1.2rem;
  padding: 0.95rem 0.95rem;
  background: var(--green, #3cb371);
  border: 1px solid var(--green, #3cb371);
  border-radius: 14px;
  color: #000;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -10px 18px rgba(0, 0, 0, 0.18),
    0 0 18px 3px rgba(60, 179, 113, 0.30),
    0 6px 16px rgba(60, 179, 113, 0.26);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.calc-v2-upgrade-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60%;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 0%,
    rgba(255, 255, 255, 0.40) 0%,
    rgba(255, 255, 255, 0.10) 45%,
    rgba(255, 255, 255, 0) 80%);
}
.calc-v2-upgrade-cta:hover { filter: brightness(1.04); }
.calc-v2-upgrade-cta:active { transform: scale(0.99); }
.calc-v2-upgrade-cta-icon {
  position: relative;
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  background: rgba(0, 0, 0, 0.18);
  color: #000;
}
.calc-v2-upgrade-cta-text {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.calc-v2-upgrade-cta-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #000;
}
.calc-v2-upgrade-cta-sub {
  font-size: 0.74rem;
  color: rgba(0, 0, 0, 0.72);
  line-height: 1.35;
}
.calc-v2-upgrade-cta-arrow {
  position: relative;
  color: #000;
  font-size: 1.3rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* =============================================================
   GENERIC V2 SHELL (shared by remaining ported screens)
   -------------------------------------------------------------
   Provides the v2 visual identity (header pattern + body
   scroll/padding) for screens whose v2 mockup uses screen-
   specific class prefixes but whose interior content stays
   mostly v1 for now. Each prefix family below ports just the
   shell so the v2 look is consistent app-wide; the interior
   detail (forms, lists) inherits the v1 styles already
   in styles.css and lifts cleanly into the v2 surface.
   ============================================================= */

.v2-screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary, #0e0e10);
  color: var(--text-primary, #f5f3ef);
}
[data-theme="light"] .v2-screen { background: var(--bg-primary, #f7f5f2); }

.v2-screen-header {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem 1fr 2.5rem;
  align-items: center;
  gap: 0.4rem;
  padding: 0.9rem 1rem 0.6rem;
  background: var(--bg-primary, #0e0e10);
}
[data-theme="light"] .v2-screen-header { background: var(--bg-primary, #f7f5f2); }
.v2-screen-back {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--text-primary, #f5f3ef);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.v2-screen-back:hover { background: rgba(255, 255, 255, 0.05); }
[data-theme="light"] .v2-screen-back:hover { background: rgba(0, 0, 0, 0.05); }
.v2-screen-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.005em;
  color: var(--text-primary, #f5f3ef);
  margin: 0;
}
.v2-screen-upgrade-pill {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.4rem 0.85rem;
  background: var(--green, #3cb371);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: 'Sora', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 3px 8px rgba(60, 179, 113, 0.36);
}
.v2-screen-upgrade-pill-icon { font-size: 1em; line-height: 1; }
.v2-screen-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.25rem 1.1rem 1.4rem;
  -webkit-overflow-scrolling: touch;
}
.v2-screen-section-label {
  font-family: 'Sora', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
  margin: 0.85rem 0.1rem 0.5rem;
}
.v2-screen-section-label:first-child { margin-top: 0.4rem; }
.v2-screen-hero {
  padding: 0.4rem 0.1rem 0.7rem;
}
.v2-screen-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Sora', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent, #e8650a);
  margin-bottom: 0.45rem;
}
.v2-screen-hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--accent, #e8650a);
  box-shadow: 0 0 0 3px rgba(232, 101, 10, 0.25);
}
.v2-screen-hero-headline {
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--text-primary, #f5f3ef);
  margin: 0 0 0.35rem;
}
.v2-screen-hero-sub {
  font-family: 'Sora', sans-serif;
  font-size: 0.85rem;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.45;
  margin: 0;
}

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

.wel-v2 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary, #0e0e10);
  color: var(--text-primary, #f5f3ef);
}
[data-theme="light"] .wel-v2 {
  background: var(--bg-primary, #f7f5f2);
}
.wel-v2-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.4rem 1.5rem;
  -webkit-overflow-scrolling: touch;
}
.wel-v2-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.95rem;
  padding-top: 0.6rem;
}
.wel-v2-brand-mark {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
  background: rgba(232, 101, 10, 0.16);
  color: var(--accent, #e8650a);
  box-shadow:
    inset 0 0 0 1px rgba(232, 101, 10, 0.30),
    0 4px 18px rgba(232, 101, 10, 0.22);
}
.wel-v2-brand-mark-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.wel-v2-wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  line-height: 1;
}
.wel-v2-wordmark-pre {
  font-family: 'Sora', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
}
.wel-v2-wordmark-main {
  font-family: 'Outfit', sans-serif;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent, #e8650a);
}
.wel-v2-powered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.2rem;
}
.wel-v2-powered-label {
  font-family: 'Sora', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
  opacity: 0.75;
}
.wel-v2-powered img {
  width: 96px;
  max-width: 30vw;
  height: auto;
  opacity: 0.92;
}
.wel-v2-tagline {
  text-align: center;
  margin: 1.6rem auto 0;
  max-width: 22rem;
}
.wel-v2-tagline-headline {
  font-family: 'Outfit', sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-primary, #f5f3ef);
  margin: 0 0 0.5rem;
}
.wel-v2-tagline-sub {
  font-family: 'Sora', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-secondary, #a4a3a0);
  margin: 0;
}
.wel-v2-greeting {
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent, #e8650a);
  margin: 0.9rem 0 0;
}
.wel-v2-greeting.hidden { display: none; }
.wel-v2-name-capture {
  margin: 1rem auto 0;
  max-width: 22rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.wel-v2-name-capture.hidden { display: none; }
.wel-v2-name-label {
  font-family: 'Sora', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
  padding-left: 0.25rem;
}
.wel-v2-name-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.8rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 999px;
  color: var(--text-primary, #f5f3ef);
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  transition: box-shadow 0.15s ease;
}
[data-theme="light"] .wel-v2-name-input {
  background: rgba(0, 0, 0, 0.05);
}
.wel-v2-name-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(232, 101, 10, 0.32);
}
.wel-v2-name-input::placeholder {
  color: var(--text-secondary, #a4a3a0);
  opacity: 0.55;
}
.wel-v2-helps {
  margin: 2rem 0 1.2rem;
}
.wel-v2-section-label {
  font-family: 'Sora', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
  margin: 0 0.25rem 0.65rem;
}
.wel-v2-helps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.wel-v2-helps-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.25rem;
  background: transparent;
  border: none;
  border-radius: 10px;
}
.wel-v2-helps-icon {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  background: rgba(232, 101, 10, 0.16);
  color: var(--accent, #e8650a);
  box-shadow: inset 0 0 0 1px rgba(232, 101, 10, 0.30);
}
.wel-v2-helps-icon--green { background: rgba(60, 179, 113, 0.18); color: var(--green, #3cb371); box-shadow: inset 0 0 0 1px rgba(60, 179, 113, 0.34); }
.wel-v2-helps-icon--yellow { background: rgba(240, 185, 74, 0.18); color: var(--yellow, #f0b94a); box-shadow: inset 0 0 0 1px rgba(240, 185, 74, 0.36); }
.wel-v2-helps-icon--blue { background: rgba(59, 130, 246, 0.18); color: #3b82f6; box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.36); }
.wel-v2-helps-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Sora', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-primary, #f5f3ef);
}
.wel-v2-ctas {
  margin-top: auto;
  padding-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.wel-v2-cta-primary {
  display: block;
  width: 100%;
  padding: 1rem 1rem;
  background: var(--accent, #e8650a);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 14px rgba(232, 101, 10, 0.34);
  transition: filter 0.12s ease, transform 0.1s ease;
}
.wel-v2-cta-primary:hover { filter: brightness(1.06); }
.wel-v2-cta-primary:active { transform: scale(0.99); }
.wel-v2-cta-secondary {
  display: block;
  width: 100%;
  padding: 0.7rem;
  background: transparent;
  border: none;
  color: var(--text-secondary, #a4a3a0);
  font-family: 'Sora', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: color 0.15s ease;
}
.wel-v2-cta-secondary:hover {
  color: var(--text-primary, #f5f3ef);
}
.wel-v2-cta-secondary strong {
  color: var(--accent, #e8650a);
  font-weight: 700;
  margin-left: 0.25rem;
}

/* =============================================================
   SCREEN-LOGIN
   ============================================================= */

.lgn-v2 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary, #0e0e10);
  color: var(--text-primary, #f5f3ef);
}
[data-theme="light"] .lgn-v2 {
  background: var(--bg-primary, #f7f5f2);
}
.lgn-v2-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.6rem 1.4rem 1.4rem;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
.lgn-v2-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin: 0.8rem 0 1.8rem;
  text-align: center;
}
.lgn-v2-brand-mark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.lgn-v2-brand-sub {
  font-family: 'Sora', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
  margin-bottom: 0.25rem;
  padding-left: 0.32em;
}
.lgn-v2-brand-accent {
  font-family: 'Outfit', sans-serif;
  font-size: 2.85rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--accent, #e8650a);
  line-height: 1;
}
.lgn-v2-brand-credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.6rem;
}
.lgn-v2-brand-credit-label {
  font-family: 'Sora', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
  opacity: 0.75;
}
.lgn-v2-brand-credit-name {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-primary, #f5f3ef);
}
.lgn-v2-brand-tagline {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--text-secondary, #a4a3a0);
  margin-top: 0.75rem;
  line-height: 1.35;
  max-width: 22ch;
}
.lgn-v2-brand-tagline u {
  text-decoration-color: var(--accent, #e8650a);
  text-underline-offset: 2px;
  color: var(--text-primary, #f5f3ef);
}

.lgn-v2-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0 0 1.1rem;
  position: relative;
}
.lgn-v2-tabs::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--border-color, rgba(255, 255, 255, 0.08));
  opacity: 0.6;
}
.lgn-v2-tab {
  position: relative;
  padding: 0.7rem 0.5rem 0.8rem;
  background: transparent;
  border: none;
  color: var(--text-secondary, #a4a3a0);
  font-family: 'Sora', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease;
  text-align: center;
}
.lgn-v2-tab:hover { color: var(--text-primary, #f5f3ef); }
.lgn-v2-tab.active {
  color: var(--accent, #e8650a);
  font-weight: 700;
}
.lgn-v2-tab.active::after {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: -1px;
  height: 2px;
  background: var(--accent, #e8650a);
  border-radius: 2px;
  z-index: 1;
}

.lgn-v2-form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 0.4rem;
}
.lgn-v2-form-group { display: block; }
.lgn-v2-form-group.hidden { display: none; }
.lgn-v2-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.95rem 1.05rem;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 12px;
  color: var(--text-primary, #f5f3ef);
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  transition: box-shadow 0.15s ease, background 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
[data-theme="light"] .lgn-v2-input {
  background: rgba(0, 0, 0, 0.05);
}
.lgn-v2-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(232, 101, 10, 0.32);
}
.lgn-v2-input::placeholder {
  color: var(--text-secondary, #a4a3a0);
  opacity: 0.65;
}
.lgn-v2-error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  background: rgba(224, 85, 85, 0.10);
  border-left: 3px solid var(--red, #e05555);
  border-radius: 0;
  color: var(--red, #e05555);
  font-family: 'Sora', sans-serif;
  font-size: 0.82rem;
  line-height: 1.35;
  margin-top: 0.25rem;
}
.lgn-v2-error.hidden { display: none; }
.lgn-v2-error::before {
  content: '\26A0';
  flex-shrink: 0;
  font-size: 0.95rem;
  line-height: 1.25;
}
.lgn-v2-submit {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.95rem 1rem;
  background: var(--accent, #e8650a);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 12px rgba(232, 101, 10, 0.32);
  transition: filter 0.12s ease, transform 0.1s ease;
}
.lgn-v2-submit:hover { filter: brightness(1.06); }
.lgn-v2-submit:active { transform: scale(0.99); }
.lgn-v2-forgot {
  display: block;
  margin: 0.85rem auto 0;
  background: transparent;
  border: none;
  color: var(--text-secondary, #a4a3a0);
  font-family: 'Sora', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.lgn-v2-forgot:hover { color: var(--text-primary, #f5f3ef); }
.lgn-v2-divider {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1.4rem 0 1rem;
}
.lgn-v2-divider::before,
.lgn-v2-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-color, rgba(255, 255, 255, 0.08));
  opacity: 0.6;
}
.lgn-v2-divider-text {
  font-family: 'Sora', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
}
.lgn-v2-oauth {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.lgn-v2-oauth-btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: 12px;
  color: var(--text-primary, #f5f3ef);
  font-family: 'Sora', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
[data-theme="light"] .lgn-v2-oauth-btn {
  background: rgba(0, 0, 0, 0.05);
}
.lgn-v2-oauth-btn:hover {
  background: rgba(232, 101, 10, 0.10);
  transform: translateY(-1px);
}
.lgn-v2-oauth-btn:active { transform: translateY(0); }
.lgn-v2-oauth-icon {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lgn-v2-oauth-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.lgn-v2-oauth-label {
  flex: 1 1 auto;
  text-align: center;
  padding-right: 1.4rem;
}
[data-theme="light"] .lgn-v2-oauth-icon--apple svg path {
  fill: #000;
}
.lgn-v2-oauth-icon--apple svg path {
  fill: #f5f3ef;
}
.lgn-v2-footer {
  margin-top: auto;
  padding-top: 1.4rem;
  text-align: center;
}
.lgn-v2-footer-prompt {
  font-family: 'Sora', sans-serif;
  font-size: 0.85rem;
  color: var(--text-secondary, #a4a3a0);
  margin-bottom: 0.9rem;
}
.lgn-v2-footer-link {
  background: transparent;
  border: none;
  color: var(--accent, #e8650a);
  font-family: 'Sora', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0 0.15rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lgn-v2-footer-link:hover { filter: brightness(1.1); }
.lgn-v2-legal {
  font-family: 'Sora', sans-serif;
  font-size: 0.7rem;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.5;
  opacity: 0.85;
  max-width: 30ch;
  margin: 0 auto;
}
.lgn-v2-legal a {
  color: var(--accent, #e8650a);
  text-decoration: none;
}
.lgn-v2-legal a:hover { text-decoration: underline; }

/* =============================================================
   SCREEN-ONBOARDING
   ============================================================= */

.onb-v2 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary, #0e0e10);
  color: var(--text-primary, #f5f3ef);
}
[data-theme="light"] .onb-v2 {
  background: var(--bg-primary, #f7f5f2);
}
.onb-v2-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 2.5rem 1fr 2.5rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1rem 0.8rem;
  background: var(--bg-primary, #0e0e10);
}
[data-theme="light"] .onb-v2-header {
  background: var(--bg-primary, #f7f5f2);
}
.onb-v2-back {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--text-primary, #f5f3ef);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.onb-v2-back:hover { background: rgba(255, 255, 255, 0.05); }
[data-theme="light"] .onb-v2-back:hover { background: rgba(0, 0, 0, 0.05); }
.onb-v2-back.onboarding-back-hidden { visibility: hidden; }
.onb-v2-progress-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.onb-v2-progress-track {
  width: 9rem;
  max-width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
[data-theme="light"] .onb-v2-progress-track { background: rgba(0, 0, 0, 0.08); }
.onb-v2-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent, #e8650a);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.onb-v2-progress-label {
  font-family: 'Sora', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary, #a4a3a0);
}
.onb-v2-progress-label strong {
  color: var(--accent, #e8650a);
  font-weight: 800;
}
.onb-v2-header-right { visibility: hidden; }
.onb-v2-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.4rem 1.25rem 1rem;
  -webkit-overflow-scrolling: touch;
}
.onb-v2-question {
  font-family: 'Outfit', sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.18;
  color: var(--text-primary, #f5f3ef);
  margin: 0.8rem 0 0.4rem;
}
.onb-v2-answers {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.onb-v2-answer {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.85rem 0.9rem;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  border-radius: 14px;
  color: var(--text-primary, #f5f3ef);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
[data-theme="light"] .onb-v2-answer { background: rgba(0, 0, 0, 0.04); }
.onb-v2-answer:hover {
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-1px);
}
[data-theme="light"] .onb-v2-answer:hover { background: rgba(0, 0, 0, 0.07); }
.onb-v2-answer:active { transform: translateY(0); }
.onb-v2-answer.is-selected {
  background: rgba(232, 101, 10, 0.10);
  box-shadow: inset 0 0 0 1px rgba(232, 101, 10, 0.40);
}
[data-theme="light"] .onb-v2-answer.is-selected { background: rgba(232, 101, 10, 0.10); }
.onb-v2-answer-icon {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  background: rgba(232, 101, 10, 0.16);
  color: var(--accent, #e8650a);
  box-shadow: inset 0 0 0 1px rgba(232, 101, 10, 0.30);
}
.onb-v2-answer-icon--green { background: rgba(60, 179, 113, 0.18); color: var(--green, #3cb371); box-shadow: inset 0 0 0 1px rgba(60, 179, 113, 0.34); }
.onb-v2-answer-icon--yellow { background: rgba(240, 185, 74, 0.18); color: var(--yellow, #f0b94a); box-shadow: inset 0 0 0 1px rgba(240, 185, 74, 0.36); }
.onb-v2-answer-icon--red { background: rgba(224, 85, 85, 0.18); color: var(--red, #e05555); box-shadow: inset 0 0 0 1px rgba(224, 85, 85, 0.36); }
.onb-v2-answer-icon--blue { background: rgba(59, 130, 246, 0.18); color: #3b82f6; box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.36); }
.onb-v2-answer-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.onb-v2-answer-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-primary, #f5f3ef);
}
.onb-v2-answer-sub {
  font-size: 0.76rem;
  color: var(--text-secondary, #a4a3a0);
  line-height: 1.35;
}
.onb-v2-answer-radio {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18);
  position: relative;
  transition: box-shadow 0.15s ease, background 0.15s ease;
}
[data-theme="light"] .onb-v2-answer-radio { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.18); }
.onb-v2-answer.is-selected .onb-v2-answer-radio {
  background: var(--accent, #e8650a);
  box-shadow: inset 0 0 0 2px var(--accent, #e8650a);
}
.onb-v2-answer.is-selected .onb-v2-answer-radio::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #fff;
}
.onb-v2-footer {
  padding: 0.4rem 1.25rem 1.25rem;
  background: var(--bg-primary, #0e0e10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}
[data-theme="light"] .onb-v2-footer { background: var(--bg-primary, #f7f5f2); }
.onb-v2-continue {
  display: block;
  width: 100%;
  padding: 0.95rem 1rem;
  background: var(--accent, #e8650a);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 12px rgba(232, 101, 10, 0.32);
  transition: filter 0.12s ease, transform 0.1s ease;
}
.onb-v2-continue:hover { filter: brightness(1.06); }
.onb-v2-continue:active { transform: scale(0.99); }
.onb-v2-continue.hidden { display: none; }

/* =============================================================
   v2.4.0 — Universal orange-bubble treatment
   =============================================================
   Applies the dashboard mockup's radial-gradient bubble look to
   every navigation card / menu button across the v2 redesign.
   Each surface uses a soft orange radial gradient that's tinted
   at center and fades to fully transparent at the perimeter —
   no border, no box-shadow ring, just a spotlight that dissolves
   into the page.

   Specifically NOT included (kept loud / distinct on purpose):
   - Primary action buttons (Ask Now, Save, Submit, Send, Continue)
   - Solid-green Upgrade-to-Premium card
   - Solid-orange Ask Now CTA
   - Dashed Upload Invoice (already has its own affordance)
   - Premium plan-row conversion cards (.prem-v2-plan)
   - Tab bars
   - Form inputs (textareas, selects, text inputs)
   - Header back buttons
   - Login submit + OAuth use a different visual family
   ============================================================= */

.dash-v2-card,
.dash-v2-community,
.dash-v2-hero-upsell,
.dash-v2-support-btn,
.dash-v2-upgrade-card--learn,
.veh-v2-quick,
.ses-v2-card,
.calc-v2-card,
.shop-v2-result,
.shop-v2-expander > summary,
.comm-v2-question,
.faq-v2-item > summary {
  background: radial-gradient(ellipse 120% 120% at 50% 30%,
    rgba(232, 101, 10, 0.18) 0%,
    rgba(232, 101, 10, 0.06) 50%,
    transparent 95%);
  border: none;
  border-radius: 22px;
  box-shadow: none;
}
[data-theme="light"] .dash-v2-card,
[data-theme="light"] .dash-v2-community,
[data-theme="light"] .dash-v2-hero-upsell,
[data-theme="light"] .dash-v2-support-btn,
[data-theme="light"] .dash-v2-upgrade-card--learn,
[data-theme="light"] .veh-v2-quick,
[data-theme="light"] .ses-v2-card,
[data-theme="light"] .calc-v2-card,
[data-theme="light"] .shop-v2-result,
[data-theme="light"] .shop-v2-expander > summary,
[data-theme="light"] .comm-v2-question,
[data-theme="light"] .faq-v2-item > summary {
  background: radial-gradient(ellipse 120% 120% at 50% 30%,
    rgba(232, 101, 10, 0.14) 0%,
    rgba(232, 101, 10, 0.04) 50%,
    transparent 95%);
}

/* Hover — same gradient at ~1.5× center opacity for press feedback. */
.dash-v2-card:hover,
.dash-v2-community:hover,
.dash-v2-hero-upsell:hover,
.dash-v2-support-btn:hover,
.dash-v2-upgrade-card--learn:hover,
.veh-v2-quick:hover,
.ses-v2-card:hover,
.calc-v2-card:hover,
.shop-v2-result:hover,
.shop-v2-expander > summary:hover,
.comm-v2-question:hover,
.faq-v2-item > summary:hover {
  background: radial-gradient(ellipse 120% 120% at 50% 30%,
    rgba(232, 101, 10, 0.28) 0%,
    rgba(232, 101, 10, 0.10) 50%,
    transparent 95%);
}
[data-theme="light"] .dash-v2-card:hover,
[data-theme="light"] .dash-v2-community:hover,
[data-theme="light"] .dash-v2-hero-upsell:hover,
[data-theme="light"] .dash-v2-support-btn:hover,
[data-theme="light"] .dash-v2-upgrade-card--learn:hover,
[data-theme="light"] .veh-v2-quick:hover,
[data-theme="light"] .ses-v2-card:hover,
[data-theme="light"] .calc-v2-card:hover,
[data-theme="light"] .shop-v2-result:hover,
[data-theme="light"] .shop-v2-expander > summary:hover,
[data-theme="light"] .comm-v2-question:hover,
[data-theme="light"] .faq-v2-item > summary:hover {
  background: radial-gradient(ellipse 120% 120% at 50% 30%,
    rgba(232, 101, 10, 0.22) 0%,
    rgba(232, 101, 10, 0.07) 50%,
    transparent 95%);
}

/* Dashboard feature tiles — center icon + text. Status pill stays
   in the top-right corner. */
.dash-v2-card {
  align-items: center;
  text-align: center;
}
.dash-v2-card .dash-v2-card-pill {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
}

/* Support row buttons stay fully pill-shaped. */
.dash-v2-support-btn {
  border-radius: 999px;
}

/* Danger variant keeps its red tint instead of orange so the
   "warning" semantic is preserved on Report a Problem. */
.dash-v2-support-btn--danger {
  background: radial-gradient(ellipse 130% 200% at 50% 50%,
    rgba(224, 85, 85, 0.16) 0%,
    rgba(224, 85, 85, 0.05) 55%,
    transparent 95%);
}
[data-theme="light"] .dash-v2-support-btn--danger {
  background: radial-gradient(ellipse 130% 200% at 50% 50%,
    rgba(224, 85, 85, 0.13) 0%,
    rgba(224, 85, 85, 0.04) 55%,
    transparent 95%);
}
.dash-v2-support-btn--danger:hover {
  background: radial-gradient(ellipse 130% 200% at 50% 50%,
    rgba(224, 85, 85, 0.24) 0%,
    rgba(224, 85, 85, 0.08) 55%,
    transparent 95%);
}

/* Learn More upgrade card — drop the v1.125.5 ::before gloss and
   restore normal text colors so it sits in the orange-bubble
   family. The green Upgrade-to-Premium card stays loud. */
.dash-v2-upgrade-card--learn::before { display: none; }
.dash-v2-upgrade-card--learn,
.dash-v2-upgrade-card--learn .dash-v2-upgrade-title { color: var(--text-primary, #f5f3ef); }
[data-theme="light"] .dash-v2-upgrade-card--learn,
[data-theme="light"] .dash-v2-upgrade-card--learn .dash-v2-upgrade-title { color: var(--text-primary, #1a1a1a); }
.dash-v2-upgrade-card--learn .dash-v2-upgrade-sub { color: var(--text-secondary, #a4a3a0); opacity: 1; }

/* Garage benefit check — orange glyph, no boxed background (set in
   v2.2.8 already; restated here so the rule wins against any
   styles-v2 changes that came later). */
.gar-v2-benefit-check {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* Subscribe-upsell + Community buttons — center the title + sub-line
   within the text column. The icon disc + chevron stay in their
   flex positions on either side; only the middle text block is
   centered. */
.dash-v2-hero-upsell-text,
.dash-v2-community-text {
  text-align: center;
}

/* Recent activity feed — give it room to breathe between the
   Upgrade-row CTA above and the Support row below. */
.dash-v2-body > #home-activity {
  margin-top: 1.25rem;
  margin-bottom: 0.35rem;
}

/* Upgrade-row pair height balance — the green card had an all-around
   glow halo that made it visually taller than the Learn More card,
   which lost its box-shadow in v2.4.0 when it joined the orange-bubble
   family. Trim the green's halo and give Learn More a matching black
   drop shadow so both cards have the same visual footprint. */
.dash-v2-upgrade-card--primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -10px 18px rgba(0, 0, 0, 0.18),
    0 6px 16px rgba(60, 179, 113, 0.30);
}
.dash-v2-upgrade-card--learn {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

/* =============================================================
   v2.4.5 — Global page background
   =============================================================
   Soft orange radial-gradient glow anchored just above the viewport
   top, fading to the page-primary base color downward. The same
   visual idiom (orange center → transparent perimeter) used on the
   bubble buttons, scaled up to fill the page. Works in both light
   and dark mode via [data-theme="light"] override.

   The gradient lives on the body. All v2 screen wrappers go
   transparent so the gradient shows through. Sticky headers keep
   their own opaque backgrounds (so scrolling content doesn't show
   through them).
   ============================================================= */
body {
  background:
    radial-gradient(ellipse 140% 70% at 50% -8%,
      rgba(232, 101, 10, 0.11) 0%,
      rgba(232, 101, 10, 0.03) 35%,
      rgba(232, 101, 10, 0) 60%),
    var(--bg-primary, #0e0e10);
  min-height: 100vh;
}
[data-theme="light"] body {
  background:
    radial-gradient(ellipse 140% 70% at 50% -8%,
      rgba(232, 101, 10, 0.07) 0%,
      rgba(232, 101, 10, 0.02) 35%,
      rgba(232, 101, 10, 0) 60%),
    var(--bg-primary, #f7f5f2);
}

/* v2 screen wrappers go transparent so the body's gradient shows
   through. Per-screen sticky headers and content (cards, buttons,
   inputs) keep their own backgrounds. */
.dash-v2,
.veh-v2,
.gar-v2,
.adv-v2,
.res-v2,
.ses-v2,
.prem-v2,
.comm-v2,
.shop-v2,
.calc-v2,
.mlog-v2,
.flog-v2,
.flogv-v2,
.vin-v2,
.wlc-v2,
.qlog-v2,
.addv-v2,
.vlog-v2,
.acct-v2,
.bug-v2,
.feed-v2,
.faq-v2,
.clog-v2,
.rt-v2,
.wel-v2,
.lgn-v2,
.onb-v2,
.abt-v2,
.priv-v2,
.tos-v2,
.v2-screen {
  background: transparent;
}
[data-theme="light"] .dash-v2,
[data-theme="light"] .veh-v2,
[data-theme="light"] .gar-v2,
[data-theme="light"] .adv-v2,
[data-theme="light"] .res-v2,
[data-theme="light"] .ses-v2,
[data-theme="light"] .prem-v2,
[data-theme="light"] .comm-v2,
[data-theme="light"] .shop-v2,
[data-theme="light"] .calc-v2,
[data-theme="light"] .mlog-v2,
[data-theme="light"] .flog-v2,
[data-theme="light"] .flogv-v2,
[data-theme="light"] .vin-v2,
[data-theme="light"] .wlc-v2,
[data-theme="light"] .qlog-v2,
[data-theme="light"] .addv-v2,
[data-theme="light"] .vlog-v2,
[data-theme="light"] .acct-v2,
[data-theme="light"] .bug-v2,
[data-theme="light"] .feed-v2,
[data-theme="light"] .faq-v2,
[data-theme="light"] .clog-v2,
[data-theme="light"] .rt-v2,
[data-theme="light"] .wel-v2,
[data-theme="light"] .lgn-v2,
[data-theme="light"] .onb-v2,
[data-theme="light"] .abt-v2,
[data-theme="light"] .priv-v2,
[data-theme="light"] .tos-v2,
[data-theme="light"] .v2-screen {
  background: transparent;
}

/* =============================================================
   v2.4.6 — Modal backgrounds
   =============================================================
   Dark mode: silver/charcoal vertical gradient with a faint inner
   top highlight for a metallic feel.
   Light mode: warm orange gradient that fades from a soft peach at
   the top to almost-white at the bottom — matches the page's orange
   accent without overwhelming the content below.
   Both modes keep the existing orange top-border accent.
   ============================================================= */
.modal-content {
  background: linear-gradient(180deg, #3a3a3f 0%, #1c1c1f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
[data-theme="light"] .modal-content {
  background: linear-gradient(180deg,
    #ffd9b8 0%,
    #ffeedc 35%,
    #fff7ee 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* =============================================================
   v2.4.8 — Premium-features plan cards: +15% inner content size
   =============================================================
   Bumps font-sizes on every text element inside the three .pf-plan
   cards (badge, name, price, period, tag, CTA) so the cards read
   bigger and feel more confident as conversion targets.
   IMPORTANT: scoped to #screen-premium-features only — the
   .pf-plans class is ALSO used inside the premium-promo modal
   (line 2596 of index.html), which has its own longer taglines
   that mustn't be clipped by the fixed tag height below. */
#screen-premium-features .pf-plans .pf-plan .pf-plan-name {
  font-size: 1.09rem;
}
#screen-premium-features .pf-plans .pf-plan .pf-plan-price {
  font-size: 1.73rem;
}
#screen-premium-features .pf-plans .pf-plan .pf-plan-period {
  font-size: 0.8rem;
}
#screen-premium-features .pf-plans .pf-plan .pf-plan-tag {
  font-size: 0.8rem;
  line-height: 1.35;
  margin-top: 0.4rem;
  margin-bottom: 0.2rem;
  /* Natural height — with the v2.4.15 staircase layout each card
     lives in its own grid row, so the height-matching gymnastics
     from earlier versions (fixed height + overflow hidden) aren't
     needed anymore. Tags now size to fit their text. */
}
#screen-premium-features .pf-plans .pf-plan .pf-plan-cta {
  font-size: 0.86rem;
  padding: 0.65rem 0.6rem;
}
#screen-premium-features .pf-plans .pf-plan .pf-plan-badge {
  font-size: 0.69rem;
  padding: 0.22rem 0.7rem;
}

/* =============================================================
   v2.4.10 — Legacy .screen-header title sizing fix
   =============================================================
   The v1 rule `.screen-header h2 { max-width: calc(100% - 9rem) }`
   was meant to leave room on either side for the back button and
   the absolutely-positioned upgrade pill, but the parent is a CSS
   Grid `1fr auto 1fr` and the h2 sits in the `auto` column. That
   created a circular constraint: the auto column sizes to fit the
   h2's content, but the h2's max-width is computed relative to the
   column. Browsers collapse this to the smallest text width — a
   single character ("C") with ellipsis on the premium-features
   screen ("Choose Your Access").
   Switching the reference to `100vw` breaks the circularity. The
   viewport width is a stable, externally-known size; the 9rem
   reservation still keeps the title clear of the back button and
   upgrade pill on every screen that uses the legacy header. */
.screen-header h2 {
  max-width: calc(100vw - 9rem);
}

/* =============================================================
   v2.4.11 — Plan-card alignment
   =============================================================
   Three sources of unevenness on the .pf-plans row:
     1. Grid template was `1fr 1.15fr 1fr` — Monthly intentionally
        wider, but it amplified the visual mismatch.
     2. .pf-plan-prem had `transform: scale(1.04)` for visual
        emphasis. The scale rendered Monthly's bounding box 4%
        bigger and its content reflowed differently than the
        siblings, making CTAs land at different y-positions.
     3. The .pf-plan-prem outer glow extends ~36px past the card's
        border. The Annual card sat at the right edge of the screen
        so the glow bleed (plus Annual's own shadow) got clipped.
   Fixes:
     - Equal-width grid (`1fr 1fr 1fr`). Monthly's visual emphasis
       still comes from its filled orange background + glow.
     - Drop the scale(1.04) on Monthly so all three cards render at
       the same scale. Hover keeps a small translateY for press
       feedback.
     - Add horizontal padding to .pf-plans so the outer glows have
       breathing room and aren't clipped at the screen edges.
     - Drop the `min-height: 230px` on .pf-plan and let content
       drive natural height; the .pf-plan-tag min-height set in
       v2.4.9 already keeps the tag-row equal across cards. */
/* =============================================================
   v2.5.0 — Premium-features plan cards: fanned-stack overlap
   =============================================================
   Replaces the staircase grid with a fanned deck of three cards
   stacked in the same horizontal band, overlapping. Interaction:
     - First tap on a back card: rotates it upright, lifts it,
       brings it to z-index top, highlights with an orange ring.
     - Second tap (on the already-active card): activates the plan
       (opens the checkout flow via selectPlan()).
   Two-tap select prevents accidental purchases when the user is
   just exploring the deck and reduces the visual noise of three
   competing CTAs to one focused front-of-deck card.
   Tap routing lives in App.handlePlanCardTap() (app.js).
   IMPORTANT: scoped to .pf-plans-stack — keeps the premium-promo
   modal's .pf-plans grid layout (in [[premium-promo-modal]])
   untouched. */
#screen-premium-features .pf-plans.pf-plans-stack {
  display: block;
  position: relative;
  /* v2.7.3 trimmed height from 340px → 250px and bottom padding from
     0.5rem → 0 so the fanned deck doesn't reserve ~140px of empty
     space below the visible cards before the next section starts. */
  height: 250px;
  padding: 1.5rem 0 0;
  margin: 0 -0.25rem;
  /* Reset grid from base .pf-plans rule */
  grid-template-columns: none;
  grid-template-rows: none;
  gap: 0;
}

#screen-premium-features .pf-plans-stack .pf-plan {
  position: absolute;
  top: 1.5rem;
  width: 58%;
  min-height: 0;
  transform-origin: center 70%;
  cursor: pointer;
  transition:
    transform 320ms cubic-bezier(.2,.75,.25,1),
    opacity 240ms ease,
    box-shadow 260ms ease,
    filter 240ms ease;
  /* z-index is animated via discrete steps so the active card
     pops to the top immediately on tap without a fade through. */
}

/* Resting (non-active) positions — fanned left to right, slight
   downward tilt on the outer cards, all visually recessed. */
#screen-premium-features .pf-plans-stack .pf-plan-single {
  left: 0%;
  transform: rotate(-7deg) translateY(6px) scale(0.92);
  opacity: 0.82;
  z-index: 1;
  filter: brightness(0.94);
}
#screen-premium-features .pf-plans-stack .pf-plan-prem {
  left: 21%;
  transform: rotate(0deg) translateY(2px) scale(0.94);
  opacity: 0.9;
  z-index: 2;
  filter: brightness(0.97);
}
#screen-premium-features .pf-plans-stack .pf-plan-yearly {
  left: 42%;
  transform: rotate(7deg) translateY(6px) scale(0.92);
  opacity: 0.82;
  z-index: 1;
  filter: brightness(0.94);
}

/* Active card: lifts, straightens, scales up, full opacity,
   z-index top, bright orange highlight ring + drop shadow. */
#screen-premium-features .pf-plans-stack .pf-plan.is-active {
  transform: translateY(-14px) rotate(0deg) scale(1.06);
  opacity: 1;
  z-index: 10;
  filter: brightness(1);
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.38),
    0 0 0 2px var(--orange, #f57c00),
    0 0 28px rgba(245, 124, 0, 0.45);
}

/* Make the "tap me again" affordance clear on the active card. */
#screen-premium-features .pf-plans-stack .pf-plan.is-active .pf-plan-cta {
  animation: pf-plan-cta-pulse 1.8s ease-in-out infinite;
}
@keyframes pf-plan-cta-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* Press feedback — small dip on tap, regardless of active state. */
#screen-premium-features .pf-plans-stack .pf-plan:active {
  transition-duration: 80ms;
  filter: brightness(0.9);
}

/* On narrow screens (< 360px), compress horizontal spread so the
   right edge of Annual doesn't clip off the viewport. */
@media (max-width: 360px) {
  #screen-premium-features .pf-plans-stack .pf-plan {
    width: 62%;
  }
  #screen-premium-features .pf-plans-stack .pf-plan-single {
    left: 0%;
  }
  #screen-premium-features .pf-plans-stack .pf-plan-prem {
    left: 19%;
  }
  #screen-premium-features .pf-plans-stack .pf-plan-yearly {
    left: 38%;
  }
}

/* =============================================================
   v2.5.3 — Premium-features FAQ
   =============================================================
   Native <details>/<summary> accordions. Soft borderless cards
   matching the v2 aesthetic — translucent surface, orange tint on
   open, no harsh borders. The +/- toggle is a single span whose
   content switches via the [open] state (no extra markup needed).
   Scoped to #screen-premium-features so this doesn't bleed into
   any other place that might want to reuse <details> later. */
.pf-section-title-faq {
  margin-top: 1.6rem;
}

#screen-premium-features .pf-faq {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.4rem 0 1rem;
  padding: 0 0.25rem;
}

#screen-premium-features .pf-faq-item {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.02));
  border-radius: 0.85rem;
  padding: 0 1rem;
  transition: background 220ms ease, box-shadow 220ms ease;
}

#screen-premium-features .pf-faq-item[open] {
  background: radial-gradient(120% 140% at 0% 0%,
    rgba(245, 124, 0, 0.16),
    rgba(245, 124, 0, 0.04) 55%,
    rgba(255, 255, 255, 0.02) 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* Light-mode surface: a hair more contrast so the cards register
   on the orange page background. */
body.light-mode #screen-premium-features .pf-faq-item {
  background: linear-gradient(135deg,
    rgba(0, 0, 0, 0.035),
    rgba(0, 0, 0, 0.015));
}
body.light-mode #screen-premium-features .pf-faq-item[open] {
  background: radial-gradient(120% 140% at 0% 0%,
    rgba(245, 124, 0, 0.22),
    rgba(245, 124, 0, 0.06) 55%,
    rgba(0, 0, 0, 0.02) 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

#screen-premium-features .pf-faq-q {
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 0;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text-color, inherit);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  user-select: none;
}

/* Hide default disclosure marker (WebKit + Firefox). */
#screen-premium-features .pf-faq-q::-webkit-details-marker {
  display: none;
}
#screen-premium-features .pf-faq-q::marker {
  content: '';
}

#screen-premium-features .pf-faq-icon {
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: rgba(245, 124, 0, 0.18);
  color: var(--orange, #f57c00);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 220ms ease, background 220ms ease;
}

#screen-premium-features .pf-faq-item[open] .pf-faq-icon {
  background: var(--orange, #f57c00);
  color: #fff;
  transform: rotate(45deg); /* + becomes × */
}

#screen-premium-features .pf-faq-a {
  padding: 0 0 0.95rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-muted, rgba(255, 255, 255, 0.78));
}
body.light-mode #screen-premium-features .pf-faq-a {
  color: rgba(0, 0, 0, 0.72);
}

/* =============================================================
   v2.5.4 — Premium-features bottom CTA cards
   =============================================================
   Three full-width stacked CTA cards under the FAQ. Two layouts:
     - Trial + Annual: orange-bordered dark surface with the CTA
       button on the left and price on the right. Pill badge sits
       above on the same side as the button.
     - Monthly: solid orange-gradient fill with white "Subscribe
       Today!" button on the right and Monthly + price on the left.
       The "Most Popular" pill flips to the right.
   Each card calls App.selectPlan() directly (single tap, not the
   two-tap deck at the top — the deck is for exploration, these
   bottom cards are for users who scrolled all the way through and
   are ready to commit). */
.pf-section-title-cta {
  margin-top: 1.8rem;
  text-align: center;
}

#screen-premium-features .pf-cta-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.3rem 0 0.8rem;
  padding: 0 0.25rem;
}

/* v2.5.18 — reverted to full-width stacked cards (the popup CTA's
   .plan-row layout). The staircase 50% stagger from v2.5.16 is gone;
   cards are flush left+right and read as a clean vertical column. */

/* Cards are shrunk 33% from their original size by setting the card's
   own font-size to 0.67rem and using em units for every internal
   measurement. v2.5.16 also bumps vertical padding and the inter-row
   gap by ~15% so the cards read taller without changing widths or
   horizontal proportions. */
#screen-premium-features .pf-cta-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  /* Extra top padding to give the absolutely-positioned pill (which
     overlaps the card's top edge) breathing room before the name row. */
  padding: 1.85em 1.2em 1.38em;
  background: #fff;
  color: #1a1a1a;
  border: 0.125em solid var(--orange, #f57c00);
  border-radius: 1.1em;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 0 1.75em rgba(245, 124, 0, 0.18);
  transition: transform 200ms ease, box-shadow 200ms ease;
  /* Set the card's base font to 67% of root — every em inside now
     resolves to 67% of its full-size pixel value. */
  font-size: 0.67rem;
  /* <button> elements don't inherit font-family from body by default,
     so they were rendering in the browser's UI font. Force Sora here
     and on every descendant. */
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
}
#screen-premium-features .pf-cta-card * {
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
}
#screen-premium-features .pf-cta-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 2.25em rgba(245, 124, 0, 0.32);
}
#screen-premium-features .pf-cta-card:active {
  transform: translateY(0);
}

/* Monthly = solid orange fill */
#screen-premium-features .pf-cta-card.pf-cta-prem {
  background: linear-gradient(135deg, #ff8a1a 0%, #f57c00 55%, #e06e00 100%);
  border-color: transparent;
  box-shadow: 0 0 2.375em rgba(245, 124, 0, 0.42);
}

#screen-premium-features .pf-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85em;
}
/* Head row contains only the plan name (pill is absolute-positioned
   at a corner). Anchor the name on the side opposite the pill so the
   two read as a balanced top row: Trial/Annual pill-left → name-right,
   Monthly pill-right → name-left. */
#screen-premium-features .pf-cta-row-head {
  justify-content: flex-end;
}
#screen-premium-features .pf-cta-card.pf-cta-prem .pf-cta-row-head {
  justify-content: flex-start;
}

/* Pill badge — absolutely positioned at a top corner of each card,
   overlapping the top edge so it reads as a "feature tag" hanging off
   the corner (matches the popup CTA's .plan-row-badge pattern). Trial
   and Annual sit top-left; Monthly is flipped to top-right so the pill
   sits on the opposite side from the plan name. 50% larger than the
   pre-v2.5.17 inline version. */
#screen-premium-features .pf-cta-badge {
  position: absolute;
  top: -0.85em;
  left: 1.2em;
  display: inline-flex;
  align-items: center;
  background: var(--orange, #f57c00);
  color: #fff;
  font-size: 1.05em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.48em 1.35em;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 0.25em 0.6em rgba(0, 0, 0, 0.28);
  z-index: 2;
}
#screen-premium-features .pf-cta-card.pf-cta-prem .pf-cta-badge {
  background: #fff;
  color: var(--orange, #f57c00);
  left: auto;
  right: 1.2em;
}

/* Plan name */
#screen-premium-features .pf-cta-name {
  font-size: 1.3em;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1;
}
#screen-premium-features .pf-cta-card.pf-cta-prem .pf-cta-name {
  color: #fff;
}

/* Price block (stacked price + period) */
#screen-premium-features .pf-cta-price-block {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
}
#screen-premium-features .pf-cta-price-block-right {
  align-items: flex-end;
  text-align: right;
}
#screen-premium-features .pf-cta-price-block-left {
  align-items: flex-start;
  text-align: left;
}
#screen-premium-features .pf-cta-price {
  font-size: 2.48em;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1;
}
#screen-premium-features .pf-cta-period {
  font-size: 0.78em;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.65);
  margin-top: 0.3em;
}
#screen-premium-features .pf-cta-card.pf-cta-prem .pf-cta-price,
#screen-premium-features .pf-cta-card.pf-cta-prem .pf-cta-period {
  color: #fff;
}

/* CTA button — v2.5.19 bumped 75% larger so it reads as the primary
   action on each full-width card. */
#screen-premium-features .pf-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  background: var(--orange, #f57c00);
  color: #fff;
  font-size: 1.44em;
  font-weight: 700;
  padding: 1.14em 1.58em;
  border-radius: 0.6em;
  white-space: nowrap;
  box-shadow: 0 0.375em 0.875em rgba(245, 124, 0, 0.35);
}
#screen-premium-features .pf-cta-btn-white {
  background: #fff;
  color: var(--orange, #f57c00);
  box-shadow: 0 0.375em 0.875em rgba(0, 0, 0, 0.18);
}

/* Description (centered tagline) */
#screen-premium-features .pf-cta-desc {
  margin: 0;
  font-size: 0.9em;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.7);
  text-align: center;
}
#screen-premium-features .pf-cta-card.pf-cta-prem .pf-cta-desc {
  color: rgba(255, 255, 255, 0.96);
}

/* =============================================================
   v2.5.8 — Comparison-chart gradient treatment
   =============================================================
   Brings the three-column compare table into the v2 gradient
   design language (matching the FAQ, the CTA cards, and the page
   background) while keeping its existing orange-scale tier
   identity:
     - Free    : alpha 0.10 → 0.22 (lightest)
     - 7-Day Trial : alpha 0.25 → 0.42 (medium)
     - Premium : alpha 0.42 → 0.65 (deepest)
   Each tier's body cells now use a vertical gradient within its
   own orange-alpha family (top brighter, bottom deeper) so the
   chart reads with depth and "shine" instead of flat fills.
   The wrapper picks up a soft radial orange wash like the v2
   bubble surfaces. Headers gain a top-light sheen on top of
   their existing solid tier colors so they look like glossy caps.
   Scoped to #screen-premium-features so the same .pf-compare
   class used elsewhere isn't affected. */
#screen-premium-features .pf-compare {
  background:
    radial-gradient(140% 110% at 0% 0%,
      rgba(245, 124, 0, 0.10),
      rgba(245, 124, 0, 0.02) 55%,
      rgba(0, 0, 0, 0) 100%),
    var(--card-bg, #1a1a1a);
  border: 1px solid rgba(245, 124, 0, 0.22);
  box-shadow:
    0 2px 14px rgba(0, 0, 0, 0.22),
    0 0 28px rgba(245, 124, 0, 0.12);
}

/* Body-cell column gradients — vertical fade within each tier's
   own orange-alpha family. Uses :not(.pf-compare-head) so the
   header row keeps its solid tier colors with sheen overlay. */
#screen-premium-features .pf-compare-row:not(.pf-compare-head) .pf-compare-free {
  background: linear-gradient(180deg,
    rgba(232, 101, 10, 0.10) 0%,
    rgba(232, 101, 10, 0.22) 100%);
}
#screen-premium-features .pf-compare-row:not(.pf-compare-head) .pf-compare-single {
  background: linear-gradient(180deg,
    rgba(232, 101, 10, 0.25) 0%,
    rgba(232, 101, 10, 0.42) 100%);
}
#screen-premium-features .pf-compare-row:not(.pf-compare-head) .pf-compare-prem {
  background: linear-gradient(180deg,
    rgba(232, 101, 10, 0.42) 0%,
    rgba(232, 101, 10, 0.65) 100%);
}

/* Header sheen — top-light gradient layered on top of each tier's
   existing solid color so the header row reads as a glossy cap on
   the column without losing its color identity. */
#screen-premium-features .pf-compare-head .pf-compare-free {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0) 60%),
    #dd7a2d;
}
#screen-premium-features .pf-compare-head .pf-compare-single {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0) 60%),
    var(--orange, #f57c00);
}
#screen-premium-features .pf-compare-head .pf-compare-prem {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0) 60%),
    #b04a08;
}

/* Soften the row separators from solid black to a translucent dark
   line so the column gradients feel continuous instead of chopped. */
#screen-premium-features .pf-compare-row {
  border-bottom-color: rgba(0, 0, 0, 0.35);
}

/* Light-mode wrapper adjustments — brighter base surface, slightly
   stronger orange tint and border so the chart still has presence
   on a light page background. */
[data-theme="light"] #screen-premium-features .pf-compare {
  background:
    radial-gradient(140% 110% at 0% 0%,
      rgba(245, 124, 0, 0.16),
      rgba(245, 124, 0, 0.04) 55%,
      rgba(0, 0, 0, 0) 100%),
    #fff;
  border-color: rgba(245, 124, 0, 0.3);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.08),
    0 0 22px rgba(245, 124, 0, 0.14);
}

/* =============================================================
   v2.5.9 — Light-mode shadow parity for orange-bubble cards
   =============================================================
   On a pale page background, the soft orange-bubble gradient
   alone reads as flat — cards have no visible separation from
   the page (see screenshot: "Trouble Codes" and "Calculators"
   look stuck to the surface while "Learn More" sits visibly
   above it). The Learn More upgrade card already has a
   `0 6px 16px rgba(0,0,0,0.28)` drop shadow from v2.4.0 to
   match the green Upgrade-to-Premium card's visual footprint.
   Mirror that exact shadow onto every other orange-bubble
   card in light mode so they all have the same lifted feel.
   Dark mode is unchanged — the gradient reads fine there
   against the dark page without the drop shadow. */
[data-theme="light"] .dash-v2-card,
[data-theme="light"] .dash-v2-community,
[data-theme="light"] .dash-v2-hero-upsell,
[data-theme="light"] .dash-v2-support-btn,
[data-theme="light"] .veh-v2-quick,
[data-theme="light"] .ses-v2-card,
[data-theme="light"] .calc-v2-card,
[data-theme="light"] .shop-v2-result,
[data-theme="light"] .shop-v2-expander > summary,
[data-theme="light"] .comm-v2-question,
[data-theme="light"] .faq-v2-item > summary {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

/* =============================================================
   v2.12.0 — dash-v2-cards layout modifiers
   =============================================================
   --single: collapse the default 2-column grid into a single
   full-width tile (used by the Make a Call section's flagship
   Repair vs Replace card, and by Discover after the RvR tile
   moved out).
   --flagship: accent border + slightly larger title to give the
   peer-flagship card visual lift against neighbouring tiles.
   Placed AFTER the v2.4.0 universal-bubble selector block so
   the accent border wins the `border: none` reset there. */
.dash-v2-cards.dash-v2-cards--single {
  grid-template-columns: 1fr;
}
.dash-v2-card.dash-v2-card--flagship {
  /* v2.23.24 — Hero tile treatment. Thicker border, soft outer glow,
     subtle inner gradient so the tile reads as a co-hero with the
     Advisor entry point above it on the dashboard. */
  border: 3px solid var(--accent, #e8650a);
  background: linear-gradient(180deg,
    rgba(232, 101, 10, 0.10) 0%,
    rgba(232, 101, 10, 0.02) 100%
  );
  box-shadow:
    0 0 24px rgba(232, 101, 10, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.25);
  padding: 1rem 1.05rem 1.05rem;
}

.dash-v2-card.dash-v2-card--flagship:hover {
  background: linear-gradient(180deg,
    rgba(232, 101, 10, 0.14) 0%,
    rgba(232, 101, 10, 0.04) 100%
  );
  box-shadow:
    0 0 32px rgba(232, 101, 10, 0.26),
    0 6px 16px rgba(0, 0, 0, 0.30);
  transform: translateY(-2px);
}

.dash-v2-card.dash-v2-card--flagship .dash-v2-card-title {
  font-size: 1.18em;
  color: #ffffff;
}

.dash-v2-card.dash-v2-card--flagship .dash-v2-card-sub {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.85rem;
}

.dash-v2-card.dash-v2-card--flagship .dash-v2-card-icon {
  background: rgba(232, 101, 10, 0.28);
  box-shadow: inset 0 0 0 1px rgba(232, 101, 10, 0.55);
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.25rem;
}

[data-theme="light"] .dash-v2-card.dash-v2-card--flagship {
  background: linear-gradient(180deg,
    rgba(232, 101, 10, 0.08) 0%,
    rgba(232, 101, 10, 0.02) 100%
  );
  box-shadow:
    0 0 24px rgba(232, 101, 10, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.10);
}

[data-theme="light"] .dash-v2-card.dash-v2-card--flagship .dash-v2-card-title {
  color: var(--text-primary);
}

[data-theme="light"] .dash-v2-card.dash-v2-card--flagship .dash-v2-card-sub {
  color: var(--text-secondary);
}

/* =============================================================
   v2.14.0 — Community answer paywall (free-tier preview)
   =============================================================
   Within each section of a community answer, free users see the
   header + first sentence normally, and the rest of the section
   is wrapped in .comm-paywall-blur: blur filter, user-select +
   pointer-events disabled, and a soft fade-to-bg gradient at the
   bottom so the teaser dissolves visually into the upgrade CTA
   that follows. Right-click + copy event handlers on the wrapper
   element are blocked inline (oncontextmenu/oncopy = return false)
   so the standard "select all → copy" / "right-click → copy"
   paths produce nothing useful. A determined user can still
   bypass via DevTools — accepted limitation for a content
   paywall; the bypass effort outweighs the content value. */
.comm-paywall-blur {
  position: relative;
  display: block;
  margin-top: 0.5rem;
  max-height: 8rem;
  overflow: hidden;
  filter: blur(6px);
  opacity: 0.78;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
  -webkit-touch-callout: none;
}
.comm-paywall-blur::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60%;
  background: linear-gradient(180deg,
    rgba(14, 14, 16, 0) 0%,
    var(--bg-primary, #0e0e10) 95%);
  pointer-events: none;
}
[data-theme="light"] .comm-paywall-blur::after {
  background: linear-gradient(180deg,
    rgba(247, 245, 242, 0) 0%,
    var(--bg-primary, #f7f5f2) 95%);
}

.comm-paywall-cta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  margin: 0.85rem 0 0.4rem;
  padding: 0.9rem 1rem;
  background: radial-gradient(ellipse 140% 140% at 50% 0%,
    rgba(232, 101, 10, 0.22) 0%,
    rgba(232, 101, 10, 0.08) 55%,
    transparent 100%);
  border: 2px solid var(--orange, #f57c00);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  font-family: inherit;
  transition: transform 0.12s ease, box-shadow 0.18s ease;
}
[data-theme="light"] .comm-paywall-cta {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
}
.comm-paywall-cta:hover {
  transform: translateY(-1px);
}
.comm-paywall-cta-icon {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 1.05rem;
  background: rgba(240, 185, 74, 0.18);
  color: var(--yellow, #f0b94a);
  box-shadow: inset 0 0 0 1px rgba(240, 185, 74, 0.36);
}
.comm-paywall-cta-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.comm-paywall-cta-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text-primary);
}
.comm-paywall-cta-sub {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-secondary, #a4a3a0);
}
.comm-paywall-cta-arrow {
  flex-shrink: 0;
  color: var(--orange, #f57c00);
  font-size: 1.25rem;
  font-weight: 600;
}

/* =============================================================
   v2.23.2 — iOS safe-area-inset for v2 top-edge containers
   =============================================================
   The v1 layer already pads .screen-header / .onboarding-header /
   .welcome-container with env(safe-area-inset-top), and .bottom-nav
   pads safe-area-inset-bottom. The v2 redesign introduced new
   per-screen namespaced headers (.dash-v2-header, .gar-v2-header,
   etc.) that bypass the v1 selectors, so on iPhone the dashboard
   greeting + Upgrade pill rendered behind the status bar.

   max(<existing baseline>, env(safe-area-inset-top, 0)) preserves
   the original visual on non-notched devices (Android, desktop, older
   iPhones) and pushes content below the notch on iPhone X+. Goes at
   end-of-file so it overrides each header's `padding` shorthand
   declared earlier in this file via cascade order. The v1 sets are
   unchanged.
   ============================================================= */

.dash-v2-header {
  padding-top: max(0.95rem, env(safe-area-inset-top, 0));
}

.veh-v2-header,
.gar-v2-header,
.adv-v2-header,
.res-v2-header,
.ses-v2-header,
.prem-v2-header,
.comm-v2-header,
.shop-v2-header,
.calc-v2-header {
  padding-top: max(0.9rem, env(safe-area-inset-top, 0));
}

.wel-v2-body {
  padding-top: max(2rem, env(safe-area-inset-top, 0));
}

.lgn-v2-body {
  padding-top: max(1.6rem, env(safe-area-inset-top, 0));
}