/* ============================================================
     1. DESIGN TOKENS
     Every color/type/spacing decision on the page traces back
     to one of these variables — change a token here and the
     whole page updates consistently.

     DIRECTION (revised): dark background + glowing teal/violet
     gradient is now what roughly three-quarters of design-led AI
     SaaS sites look like (Linear-purple, Cursor-cyan, and this
     site's own prior look) — no longer a differentiator, closer to
     a default. The considered alternative several trust-signaling
     brands (Anthropic, Notion, PostHog) have converged on instead:
     warm cream, near-black text, restrained color, gradient used
     rarely and small (a logo mark) rather than as a page-wide glow.
     Kept the aurora teal as the one accent color — used with
     intent, not as ambient wash.
     ============================================================ */
  :root {
    /* Colors — twilight blue stays as the dark-mode background
       (still distinctive, not generic near-black), but the
       page-wide gradient glow is gone — see body{} below. Aurora
       teal is now the SINGLE accent used with intent (buttons, one
       highlight per section), rather than paired with violet in a
       glow. Violet remains available for specific savings/success
       moments, not as a co-equal gradient partner. */
    --ink:        #17274A;   /* primary background — twilight blue, not charcoal */
    --ink-raised: #1F3560;   /* slightly lighter panels/cards on ink */
    --aurora:      #4FD8B0;   /* primary accent — aurora teal-green: buttons, highlights */
    --aurora-dim:  #2E8E76;   /* teal at lower emphasis (borders, icons) */
    --aurora-violet:     #8C7EE8;   /* secondary accent — used sparingly now, not in gradients */
    --paper:      #E9EEF5;   /* light surface for contrast sections — cool, not warm */
    --paper-dim:  #B9C2D0;   /* muted text on paper */
    --text-hi:    #EFF3F9;   /* primary text on ink */
    --text-lo:    #9FB0C9;   /* secondary/muted text on ink */

    /* Fixed tokens — deliberately NOT overridden in the light theme
       block below. These exist because some things always need a
       dark color regardless of overall site theme: text sitting on
       the aurora accent buttons/pills (which stay a fixed medium
       brightness in both themes), and the .section-alt "paper" block
       (whose background also doesn't change with the toggle). Using
       the flip-with-theme --ink for these was the bug that made
       button/pill text and the "How it works" section unreadable in
       light mode — --ink means "page background," which is light in
       light mode, so text using it went light-on-light too. */
    --ink-fixed:  #12161F;

    /* Danger/error red — DOES flip, since it's read as text against
       the flipping page/card background, unlike the fixed tokens above. */
    --danger:     #E88;

    /* Nav bar background — a translucent overlay. This DOES need to
       flip with theme (dark blur in dark mode, light blur in light
       mode) — it was hardcoded before, which is why the top nav/tabs
       stayed dark even in light mode and became unreadable against
       light-mode text colors. */
    --nav-overlay: rgba(18, 22, 31, 0.9);

    /* Type */
    --font-display: 'Fraunces', serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    /* Layout */
    --max-w: 1120px;
    --radius: 6px;
  }

  /* ============================================================
     2. BASE / RESET
     ============================================================ */
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background-color: var(--ink);
    color: var(--text-hi);
    font-family: var(--font-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; }
  p { margin: 0; }
  a { color: inherit; }
  .container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 24px;
  }
  /* Visible keyboard focus everywhere — accessibility floor,
     not optional polish. */
  a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--aurora);
    outline-offset: 3px;
  }
  /* Respect reduced-motion preference: kill the ticker animation
     and any transitions for users who've asked for less motion. */
  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
  }

  /* ============================================================
     3. NAV
     ============================================================ */
  header.nav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--nav-overlay);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(79, 216, 176, 0.15);
  }
  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    flex-wrap: wrap;
    gap: 10px;
  }
  .nav-brand {
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .nav-right {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
  }
  .nav-secondary-row {
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(79, 216, 176, 0.1);
    border-bottom: 1px solid rgba(79, 216, 176, 0.1);
  }
  .nav-secondary-row .links {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 22px;
    padding: 10px 0;
  }
  .nav-secondary-row .dash-tab-nav {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 13px;
  }
  .logo {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .logo .dot { color: var(--aurora); }
  .logo-mark { display: block; flex-shrink: 0; }
  nav.links { display: flex; gap: 28px; }
  nav.links a {
    text-decoration: none;
    font-size: 14px;
    color: var(--text-lo);
    transition: color 0.15s ease;
  }
  nav.links a:hover { color: var(--text-hi); }
  @media (max-width: 640px) {
    /* Both marketing nav and app nav hide their inline row on mobile
       now — a real dropdown menu (built dynamically in auth-nav.js)
       replaces both, rather than the app tabs scrolling horizontally.
       A dropdown reads more like a normal mobile nav pattern than a
       sideways-scrolling row of tabs does. */
    nav.links { display: none; }
  }

  /* ============================================================
     4. HERO + SIGNATURE OFFER-TICKER ELEMENT
     ============================================================ */
  .hero-bg {
    background-image:
      linear-gradient(180deg, rgba(23,39,74,0.45) 0%, rgba(23,39,74,0.75) 60%, rgba(23,39,74,0.94) 90%, #17274A 100%),
      url('https://images.unsplash.com/photo-1531366936337-7c912a4589a7?auto=format&fit=crop&w=2400&q=80');
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    /* Fixed regardless of the page's light/dark toggle — a night-sky
       photo doesn't have a "light mode," and without this, text
       using --text-hi/--text-lo would flip to dark colors in light
       mode while still sitting on this dark photo, becoming
       unreadable. Overriding the variables here (rather than every
       individual text selector) means everything inside this
       element inherits the fixed values automatically. */
    --text-hi: #EFF3F9;
    --text-lo: #9FB0C9;
    --ink-raised: #1F3560;
    --aurora: #4FD8B0;
  }
  /* The override above loses to :root[data-theme="light"]'s own
     variable values in light mode, since an attribute selector on
     :root has higher specificity than a plain class regardless of
     source order — found via direct feedback that the headline text
     was going dark-on-dark-photo specifically in light mode. This
     combined selector has higher specificity than either rule alone,
     so it actually wins. */
  :root[data-theme="light"] .hero-bg {
    --text-hi: #EFF3F9;
    --text-lo: #9FB0C9;
    --ink-raised: #1F3560;
    --aurora: #4FD8B0;
  }
  .hero {
    padding: 88px 0 64px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: center;
  }
  @media (max-width: 860px) {
    .hero { grid-template-columns: 1fr; padding: 48px 0 40px; }
  }
  .eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--aurora);
    margin-bottom: 18px;
    display: block;
  }
  .hero h1 {
    font-size: clamp(34px, 5vw, 54px);
    line-height: 1.08;
    letter-spacing: -0.01em;
  }
  .hero h1 em {
    font-style: italic;
    color: var(--aurora);
  }
  .hero p.lede {
    margin-top: 22px;
    font-size: 17px;
    color: var(--text-lo);
    max-width: 46ch;
  }

  /* Waitlist form */
  .waitlist {
    margin-top: 32px;
    display: flex;
    gap: 10px;
    max-width: 440px;
  }
  .waitlist input {
    flex: 1;
    padding: 13px 16px;
    background: var(--ink-raised);
    border: 1px solid rgba(79, 216, 176, 0.3);
    border-radius: var(--radius);
    color: var(--text-hi);
    font-family: var(--font-body);
    font-size: 14px;
  }
  .waitlist input::placeholder { color: var(--text-lo); }
  .waitlist button {
    padding: 13px 22px;
    background: var(--aurora);
    color: var(--ink-fixed);
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease;
    white-space: nowrap;
  }
  .waitlist button:hover { background: #dab566; }
  .waitlist-note {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--text-lo);
  }
  .waitlist-note.success { color: var(--aurora-violet); }

  /* --- The offer ticker: the page's signature element ---
     A "ledger card" that plays out one real negotiation,
     round by round, in a monospace type — like a printout.
     Rounds fade in sequentially and loop. */
  .ticker-card {
    background: var(--ink-raised);
    border: 1px solid rgba(79, 216, 176, 0.25);
    border-radius: 10px;
    padding: 22px 22px 18px;
    /* A soft two-tone glow (teal + violet) behind the card — a quiet
       nod to the aurora without illustrating it literally. */
    box-shadow: 0 0 60px -20px rgba(79, 216, 176, 0.25),
                0 0 80px -30px rgba(140, 126, 232, 0.2);
  }
  .ticker-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
  }
  .ticker-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--text-hi);
  }
  .ticker-head .live {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--aurora-violet);
  }
  .ticker-head .live::before {
    content: '●';
    margin-right: 6px;
    font-size: 9px;
    animation: livePulse 1.8s ease-in-out infinite;
  }
  @keyframes livePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
  }

  /* Big before/after price comparison — the signature catch for
     the eye, sitting above the round-by-round detail. */
  .ticker-compare {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 14px 0 18px;
    font-family: var(--font-mono);
  }
  .ticker-compare .was {
    font-size: 22px;
    color: var(--text-lo);
    text-decoration: line-through;
  }
  .ticker-compare .was small,
  .ticker-compare .now small { font-size: 12px; }
  .ticker-compare .arrow { color: var(--text-lo); font-size: 18px; }
  .ticker-compare .now {
    font-size: 30px;
    font-weight: 600;
    color: var(--aurora);
  }
  .ticker-compare .pct-chip {
    margin-left: 4px;
    background: rgba(79, 216, 176, 0.18);
    color: var(--aurora);
    font-size: 12px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
  }

  .ticker-rounds {
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-family: var(--font-mono);
    font-size: 13.5px;
    /* Fixed height, sized for the fullest state (the thinking row
       plus every round of the scripted negotiation) — this is the
       actual fix for the card resizing as lines appear. The box
       reserves this space from the very first frame, whether it's
       showing the thinking indicator, one row, or all of them. */
    height: 320px;
    overflow: hidden;
  }
  .ticker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 4px;
    background: rgba(255,255,255,0.02);
    opacity: 0;
    transform: translateY(4px);
    animation: rowIn 0.5s ease forwards;
  }
  /* "who" is now a small pill badge instead of plain text — easier
     to scan at a glance which side is talking. */
  .ticker-row .who {
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 999px;
  }
  .ticker-row .who-provider { background: rgba(140, 126, 232, 0.15); color: var(--aurora-violet); }
  .ticker-row .who-zlora { background: rgba(79, 216, 176, 0.15); color: var(--aurora); }
  .ticker-row .amt { color: var(--text-hi); }
  .ticker-row.final .amt { color: var(--aurora); font-weight: 600; }
  /* Dedicated style for reading full conversation threads (History,
     escalation detail) — distinct from .ticker-row above, which is
     built for the homepage's compact preview widget and reads poorly
     for actual paragraph-length message content. Label sits above
     the text rather than squeezed beside it, larger font, generous
     padding — found the compact version genuinely hard to read once
     real message text (not just short dollar amounts) was involved. */
  .thread-row {
    padding: 14px 16px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    margin-bottom: 4px;
  }
  .thread-row .who {
    display: inline-block;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
  }
  .thread-row .who-provider { background: rgba(140, 126, 232, 0.15); color: var(--aurora-violet); }
  .thread-row .who-zlora { background: rgba(79, 216, 176, 0.15); color: var(--aurora); }
  .thread-row .text {
    display: block;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text-hi);
  }
  /* Stagger each row's fade-in via animation-delay set inline per row */
  @keyframes rowIn {
    to { opacity: 1; transform: translateY(0); }
  }
  .ticker-foot {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed rgba(79, 216, 176, 0.25);
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 12.5px;
  }
  .ticker-foot .label { color: var(--text-lo); }
  .ticker-foot .value { color: var(--aurora); font-weight: 500; }

  /* ============================================================
     5. PROBLEM FRAMING
     ============================================================ */
  .section { padding: 72px 0; }
  .section-alt {
    background: var(--paper);
    color: var(--ink-fixed);
  }
  .section-alt .text-lo { color: #5A6B85; }
  .kicker {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--aurora-dim);
    margin-bottom: 12px;
    display: block;
  }
  .section-alt .kicker { color: var(--aurora-violet); }
  h2.section-title {
    font-size: clamp(26px, 3.4vw, 36px);
    max-width: 22ch;
    margin-bottom: 16px;
  }
  .section p.body-copy {
    font-size: 16px;
    color: var(--text-lo);
    max-width: 60ch;
  }

  /* ============================================================
     6. HOW IT WORKS — real 4-step sequence (numbering earned)
     ============================================================ */
  .steps {
    margin-top: 44px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
  }
  @media (max-width: 900px) {
    .steps { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    .steps { grid-template-columns: 1fr; }
  }
  .step .num {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--aurora);
    border: 1px solid var(--aurora-dim);
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
  }
  .step h3 { font-size: 17px; margin-bottom: 8px; }
  .step p { font-size: 14px; color: var(--text-lo); line-height: 1.55; }

  /* ============================================================
     7. TRUST / TRANSPARENCY
     ============================================================ */
  .trust-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  @media (max-width: 800px) { .trust-grid { grid-template-columns: 1fr; } }
  .trust-card {
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--radius);
    padding: 20px;
  }
  .trust-card h3 { font-size: 15px; margin-bottom: 8px; }
  .trust-card p { font-size: 13.5px; color: #5A6B85; line-height: 1.55; }

  /* Real bento layout (size-as-hierarchy, not a uniform card grid) —
     one large anchor tile spanning both rows, a wider tile beneath
     the two smaller ones. Built for this section's dark background;
     see .trust-card above for the equivalent light-section pattern. */
  .compare-grid {
    margin-top: 32px;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
  }
  .compare-tile {
    background: var(--ink-raised);
    border: 1px solid rgba(79,216,176,0.2);
    border-radius: 12px;
    padding: 24px;
  }
  .compare-tile h3 { font-size: 15px; color: var(--text-hi); margin-bottom: 8px; }
  .compare-tile p { font-size: 13.5px; color: var(--text-lo); line-height: 1.55; margin: 0; }
  .compare-tile-large {
    grid-column: 1; grid-row: 1 / 3;
    display: flex; flex-direction: column; justify-content: center;
  }
  .compare-num { font-family: var(--font-mono); font-size: 56px; color: var(--aurora); line-height: 1; margin-bottom: 12px; }
  .compare-tile:nth-of-type(2) { grid-column: 2; grid-row: 1; }
  .compare-tile:nth-of-type(3) { grid-column: 3; grid-row: 1; }
  .compare-tile:nth-of-type(4) { grid-column: 2 / 4; grid-row: 2; }
  @media (max-width: 800px) {
    .compare-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
    .compare-tile-large, .compare-tile:nth-of-type(2), .compare-tile:nth-of-type(3), .compare-tile:nth-of-type(4) {
      grid-column: 1; grid-row: auto;
    }
  }

  /* ============================================================
     8. PRICING
     ============================================================ */
  .pricing-card {
    margin-top: 40px;
    background: var(--ink-raised);
    border: 1px solid rgba(79,216,176,0.25);
    border-radius: 10px;
    padding: 36px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
  }
  @media (max-width: 720px) { .pricing-card { grid-template-columns: 1fr; } }
  .pricing-card .big {
    font-family: var(--font-mono);
    font-size: 42px;
    color: var(--aurora);
  }
  .pricing-card .big + p { margin-top: 6px; color: var(--text-lo); font-size: 14px; }
  .pricing-list { list-style: none; margin: 0; padding: 0; }
  .pricing-list li {
    font-size: 14.5px;
    color: var(--text-lo);
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .pricing-list li:last-child { border-bottom: none; }
  .pricing-list li::before { content: '— '; color: var(--aurora-dim); }

  /* ============================================================
     9. FOOTER
     ============================================================ */
  footer {
    padding: 48px 0 40px;
    border-top: 1px solid rgba(79,216,176,0.15);
  }
  .footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }
  footer .logo { font-size: 16px; }
  footer p { font-size: 12.5px; color: var(--text-lo); }

  /* ============================================================
     10. SHARED NAV / CTA BUTTON (used across all pages)
     ============================================================ */
  .btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    border: none;
  }
  .btn-primary { background: var(--aurora); color: var(--ink-fixed); }
  .btn-primary:hover { background: #6be3c0; }
  .btn:disabled, .btn-primary:disabled, .btn-primary:disabled:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-lo);
    cursor: not-allowed;
    opacity: 0.6;
  }
  .btn-outline {
    background: transparent;
    color: var(--text-hi);
    border: 1px solid rgba(79, 216, 176, 0.4);
  }
  .btn-outline:hover { border-color: var(--aurora); }
  nav.links a.active { color: var(--text-hi); }

  /* ============================================================
     12. SUB-PAGE HEADER (About, Team, Sign in, Dashboard)
     ============================================================ */
  .page-header {
    padding: 56px 0 32px;
    text-align: left;
  }
  .page-header h1 { font-size: clamp(30px, 4vw, 42px); }
  .page-header p { margin-top: 12px; color: var(--text-lo); font-size: 16px; max-width: 60ch; }

  /* Dashboard's own aurora banner — a different photo from the
     homepage hero for variety. Contained rather than full-bleed
     since .page-header already sits inside .container; a simpler
     treatment fits a functional app header better than the
     immersive full-viewport hero treatment anyway. Same
     theme-independence fix as the hero from the start this time,
     rather than finding it after the fact — a night photo doesn't
     have a light-mode version. */
  .page-header-photo {
    background-size: cover;
    background-position: center 40%;
    border-radius: var(--radius);
    padding: 40px 28px 32px;
    --text-hi: #EFF3F9;
    --text-lo: #9FB0C9;
  }
  :root[data-theme="light"] .page-header-photo {
    --text-hi: #EFF3F9;
    --text-lo: #9FB0C9;
  }
  /* True full-bleed variant — Overview/Settings' banner looked
     pasted-on specifically because it was a small boxed rectangle
     constrained by .container; this extends the same photo to both
     screen edges instead, which is what actually reads as an
     integrated banner rather than a sticker. The inner .container
     (holding the actual heading) stays constrained as normal — only
     the photo itself goes edge-to-edge. */
  .full-bleed-banner {
    border-radius: 0;
    padding: 0;
  }
  .full-bleed-banner .page-header {
    padding: 56px 0 40px;
  }
  .page-header-aurora {
    background-image:
      linear-gradient(180deg, rgba(23,39,74,0.5) 0%, rgba(23,39,74,0.85) 100%),
      url('https://images.unsplash.com/photo-1507272931001-fc06c17e4f43?auto=format&fit=crop&w=1600&q=80');
  }
  /* About/Team — a real handshake photo (hands as the focal point,
     not an isolated identifiable face) for the negotiation/mission
     framing both pages share. */
  .page-header-handshake {
    background-image:
      linear-gradient(180deg, rgba(23,39,74,0.5) 0%, rgba(23,39,74,0.85) 100%),
      url('https://images.unsplash.com/photo-1638262052640-82e94d64664a?auto=format&fit=crop&w=1600&q=80');
  }
  /* Careers — a real, wide open-office shot (a group, not one
     isolated close-up face) for the "what it's like here" framing. */
  .page-header-office {
    background-image:
      linear-gradient(180deg, rgba(23,39,74,0.5) 0%, rgba(23,39,74,0.85) 100%),
      url('https://images.unsplash.com/photo-1765371514743-45bd8e6c0a28?auto=format&fit=crop&w=1600&q=80');
  }
  /* Fills a large majority of the initial viewport, not the whole
     page — the job listings below have their own distinct content
     and shouldn't sit on this same photo backdrop, but the header
     itself should be dramatically taller than the small boxed
     version was before. */
  .careers-header-bg {
    min-height: 60vh;
    display: flex;
    align-items: center;
    border-radius: 0;
    padding: 0;
  }
  .careers-header-bg .page-header {
    width: 100%;
  }
  /* Now covers the header AND the job listings below it as one
     continuous backdrop, no gap between them — overrides the
     single-centered-child flex behavior above, which doesn't fit
     two stacked sections. min-height matches Seek Quote's approach:
     fills at least the viewport below the nav, growing taller if
     the actual content needs more room. */
  .careers-full-page-bg {
    display: block;
    min-height: calc(100vh - 178px);
  }
  .careers-full-page-bg .page-header {
    padding-top: 64px;
    padding-bottom: 40px;
  }
  /* About — same technique as careers-full-page-bg above: covers
     the header AND the "Why negotiation" section as one continuous
     backdrop, per direct request, but deliberately stops there —
     "What we believe" further down keeps its own plain background. */
  .about-full-page-bg {
    display: block;
  }
  .about-full-page-bg .page-header {
    padding-top: 64px;
    padding-bottom: 8px;
  }
  .about-full-page-bg .section {
    padding-top: 24px;
    padding-bottom: 56px;
  }

  /* ============================================================
     13. TEAM PAGE
     ============================================================ */
  .team-grid {
    margin-top: 36px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  @media (max-width: 800px) { .team-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }
  .team-card {
    background: var(--ink-raised);
    border: 1px solid rgba(79, 216, 176, 0.15);
    border-radius: 10px;
    padding: 20px;
  }
  .team-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--aurora), var(--aurora-violet));
    margin-bottom: 14px;
    overflow: hidden;
  }
  .team-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .team-card h3 { font-size: 16px; margin-bottom: 2px; }
  .team-card .role { font-family: var(--font-mono); font-size: 12px; color: var(--aurora); margin-bottom: 10px; display: block; }
  .team-card p.bio { font-size: 13.5px; color: var(--text-lo); line-height: 1.55; }
  .team-card.placeholder { border-style: dashed; opacity: 0.7; }

  /* ============================================================
     14. SIGN IN PAGE
     ============================================================ */
  .signin-wrap {
    max-width: 400px;
    margin: 64px auto;
    padding: 32px;
    background: var(--ink-raised);
    border: 1px solid rgba(79, 216, 176, 0.2);
    border-radius: 12px;
  }
  .signin-wrap h1 { font-size: 24px; margin-bottom: 8px; }
  .signin-wrap p.sub { color: var(--text-lo); font-size: 13.5px; margin-bottom: 24px; }
  .field { margin-bottom: 14px; }
  .field label { display: block; font-size: 13px; color: var(--text-lo); margin-bottom: 6px; }
  .field input {
    width: 100%;
    padding: 11px 14px;
    background: var(--ink);
    border: 1px solid rgba(79, 216, 176, 0.25);
    border-radius: var(--radius);
    color: var(--text-hi);
    font-family: var(--font-body);
    font-size: 14px;
  }
  /* Checkboxes need the opposite of the above — the general .field
     input rule was stretching every checkbox into a giant padded
     box (width:100%), which is exactly why they looked shifted away
     from their labels instead of sitting right next to the text. */
  .field input[type="checkbox"] {
    width: auto;
    padding: 0;
    flex-shrink: 0;
  }
  .signin-error { color: var(--danger); font-size: 13px; margin-top: 10px; display: none; }
  .signin-note { margin-top: 16px; font-size: 12.5px; color: var(--text-lo); }

  /* ============================================================
     15. DASHBOARD (post sign-in concept — seek a quote / quotes received)
     ============================================================ */
  .dash-tabs { display: flex; gap: 10px; margin-bottom: 24px; }
  .dash-tab {
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 13.5px;
    font-family: var(--font-body);
    border: 1px solid rgba(79, 216, 176, 0.25);
    background: transparent;
    color: var(--text-lo);
    cursor: pointer;
  }
  .dash-tab.active { background: var(--aurora); color: var(--ink-fixed); border-color: var(--aurora); font-weight: 600; }
  .dash-panel { display: none; }
  .dash-panel.active { display: block; }
  .quote-card {
    background: var(--ink-raised);
    border: 1px solid rgba(79, 216, 176, 0.2);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 12px;
  }
  .quote-card .cat { font-family: var(--font-mono); font-size: 12px; color: var(--text-lo); }
  .quote-card .status { font-size: 14px; color: var(--text-hi); margin-top: 6px; }
  .quote-card .best { color: var(--aurora); font-weight: 600; }
  select {
    width: 100%;
    padding: 11px 14px;
    background: var(--ink);
    border: 1px solid rgba(79, 216, 176, 0.25);
    border-radius: var(--radius);
    color: var(--text-hi);
    font-family: var(--font-body);
    font-size: 14px;
  }
  .demo-note {
    background: rgba(140, 126, 232, 0.15);
    color: var(--aurora-violet);
    font-size: 12.5px;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-weight: 600;
  }

  /* ============================================================
     16. TOP-RIGHT ACCOUNT MENU (Settings/Logout, post sign-in)
     ============================================================ */
  .account-menu { position: relative; }
  #auth-slot { position: relative; }
  .account-trigger {
    display: flex; align-items: center; gap: 8px;
    background: transparent; border: 1px solid rgba(79, 216, 176, 0.3);
    border-radius: 999px; padding: 6px 14px 6px 6px;
    color: var(--text-hi); font-family: var(--font-body); font-size: 13.5px;
    cursor: pointer;
  }
  .account-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, var(--aurora), var(--aurora-violet));
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: var(--ink-fixed);
  }
  .account-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: var(--ink-raised); border: 1px solid rgba(79, 216, 176, 0.25);
    border-radius: 8px; min-width: 160px; padding: 6px;
    display: none; z-index: 20;
  }
  .account-dropdown.open { display: block; }
  .account-dropdown a {
    display: block; padding: 9px 12px; border-radius: 6px;
    color: var(--text-hi); font-size: 13.5px; text-decoration: none;
  }
  .account-dropdown a:hover { background: rgba(79, 216, 176, 0.12); }

  /* ============================================================
     17. SAVINGS CHART (Overview tab) — an SVG polyline that, like
     the mobile app's version, only ever goes up, since it's a
     running cumulative total.
     ============================================================ */
  .savings-summary { margin-bottom: 24px; }
  .savings-summary .label { font-size: 13px; color: var(--text-lo); }
  .savings-summary .value {
    font-family: var(--font-mono); font-size: 40px; font-weight: 600;
    color: var(--aurora); margin: 4px 0 16px;
  }

  /* ============================================================
     18. UPLOAD BILL panel
     ============================================================ */
  .file-drop {
    border: 1px dashed rgba(79, 216, 176, 0.4);
    border-radius: 10px;
    padding: 36px 20px;
    text-align: center;
    color: var(--text-lo);
    font-size: 13.5px;
    margin-bottom: 16px;
  }
  .file-drop input[type="file"] { margin-top: 12px; }

  /* ============================================================
     19. HERO HAPPY-BANNER — small original illustration above
     the offer ticker (replaces the earlier, busier hero
     illustration per feedback — much simpler this time).
     ============================================================ */
  .happy-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 10px 4px;
  }
  .happy-banner span {
    font-size: 14.5px;
    color: var(--text-hi);
    font-weight: 500;
  }

  /* ============================================================
     20. DASHBOARD NAV TABS (Overview/Seek quote/Upload bill/
     Review offers) — styled to match the marketing nav's plain
     text links exactly, since these sit in that same header slot,
     just implemented as buttons because they swap a panel on the
     same page instead of navigating to a new one.
     ============================================================ */
  .dash-tab-nav {
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-lo);
    cursor: pointer;
    padding: 4px 0;
  }
  .dash-tab-nav:hover { color: var(--text-hi); }
  .dash-tab-nav.active {
    color: var(--aurora);
    font-weight: 600;
  }

  /* ============================================================
     21. RANGE SELECTOR (below the savings chart)
     ============================================================ */
  .range-tabs { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
  .range-tab {
    background: transparent;
    border: 1px solid rgba(79, 216, 176, 0.25);
    color: var(--text-lo);
    font-size: 12.5px;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
  }
  .range-tab.active { background: var(--aurora); color: var(--ink-fixed); border-color: var(--aurora); font-weight: 600; }
  .history-filter.active { background: var(--aurora); color: var(--ink-fixed); border-color: var(--aurora); font-weight: 600; }
  #savings-chart text { font-size: 10px; }
  #savings-chart {
    display: block;
    margin: 0 auto;
  }

  /* ============================================================
     22. SEEK QUOTE — two-column layout with category preview
     ============================================================ */
  /* Reusable breakout — makes a child span the full viewport width
     regardless of its parent's max-width constraint, without
     needing to physically move it outside that parent in the HTML
     (which would break the other dashboard tabs sharing the same
     wrapper). Standard technique: -50vw+50% cancels out exactly to
     the viewport edges regardless of the parent's own width. */
  .full-bleed-breakout {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
  }
  /* Fills the available viewport height dynamically (not just
     content height) — 178px accounts for the nav bar; found via
     direct feedback that a content-sized backdrop left visible
     background showing at the edges when the actual form content
     was shorter than the screen. */
  .seek-bg {
    min-height: calc(100vh - 178px);
    padding: 40px 24px 60px;
    background-size: cover;
    background-position: center;
    transition: background-image 0.3s ease;
  }
  .seek-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: start;
    max-width: var(--max-w);
    margin: 0 auto;
  }
  /* Set inline via JS per selected category (see renderCategoryPreview
     in dashboard.js) — a dark overlay + the category's own photo,
     directly behind the form itself rather than confined to the
     small stat card. Inputs/selects already have solid backgrounds
     (see .field input/select above) so they stay legible regardless;
     labels sitting directly on the photo need the fixed colors,
     same reasoning as the hero and page-header banners. */
  .seek-bg.has-category-photo {
    --text-hi: #EFF3F9;
    --text-lo: #9FB0C9;
  }
  :root[data-theme="light"] .seek-bg.has-category-photo {
    --text-hi: #EFF3F9;
    --text-lo: #9FB0C9;
  }
  @media (max-width: 760px) { .seek-grid { grid-template-columns: 1fr; } }
  .stat-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 12px; }
  .category-preview {
    background: var(--ink-raised);
    border: 1px solid rgba(79, 216, 176, 0.2);
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .category-icon { display: flex; justify-content: center; margin-bottom: 12px; }
  .category-preview h3 { font-size: 16px; margin-bottom: 8px; }
  .category-preview .stat { font-size: 13px; color: var(--text-lo); line-height: 1.5; }
  .category-preview .stat strong { color: var(--aurora); }
  /* Compact variant for the 3 additional 2x2-grid cards — same
     visual language as .category-preview. grid-auto-rows above
     already equalizes every card's height to the tallest one in the
     grid; the flex centering here is what keeps a short one-line
     card's text from sitting stuck at the top with empty space below
     once it's stretched to match — found this looked genuinely
     unbalanced without it. */
  .mini-stat-card {
    background: var(--ink-raised);
    border: 1px solid rgba(79, 216, 176, 0.2);
    border-radius: 10px;
    padding: 16px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .mini-stat-card .stat { font-size: 12.5px; color: var(--text-lo); line-height: 1.4; }
  .mini-stat-card .stat strong { color: var(--aurora); display: block; font-size: 20px; margin-bottom: 2px; }
  .mini-spinner {
    display: inline-block;
    width: 16px; height: 16px;
    border: 2px solid rgba(79,216,176,0.25);
    border-top-color: var(--aurora);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 6px;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ============================================================
     23. UPLOAD BILL — past bills table
     ============================================================ */
  .bills-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  .bills-table th {
    text-align: left; color: var(--text-lo); font-weight: 500;
    padding: 8px 12px; border-bottom: 1px solid rgba(79, 216, 176, 0.2);
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  }
  .bills-table td {
    padding: 10px 12px; color: var(--text-hi);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  /* ============================================================
     24. REVIEW OFFERS — expandable category groups
     ============================================================ */
  .offer-group { margin-bottom: 10px; }
  .offer-group-head {
    width: 100%;
    display: flex; justify-content: space-between; align-items: center;
    background: var(--ink-raised);
    border: 1px solid rgba(79, 216, 176, 0.2);
    border-radius: 8px;
    padding: 14px 16px;
    color: var(--text-hi);
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
  }
  .offer-count {
    background: rgba(79, 216, 176, 0.18);
    color: var(--aurora);
    font-size: 12.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
  }
  .offer-group-body { display: none; padding: 10px 4px 0; }
  .offer-group-body.open { display: block; }

  /* ============================================================
     25. LIGHT THEME OVERRIDE
     Dark is the default (no attribute needed — matches the
     existing :root values above). Setting data-theme="light" on
     <html> overrides just the color tokens; every rule elsewhere
     in this file already references these variables, so nothing
     else needs to change for light mode to work throughout the
     whole site. Accent colors are darkened slightly from their
     dark-mode versions since #4FD8B0/#8C7EE8 don't have enough
     contrast against a white background to read as text/icons.
     ============================================================ */
  :root[data-theme="light"] {
    --ink:        #F4F6FA;
    --ink-raised: #FFFFFF;
    --aurora:      #1FAE82;
    --aurora-dim:  #178F6B;
    --aurora-violet: #6C5CE0;
    --text-hi:    #16233F;
    --text-lo:    #5A6B85;
    --danger:     #C23B3B;
    --nav-overlay: rgba(255, 255, 255, 0.85);
  }
  /* A couple of spots use hardcoded rgba(...) tied to the dark
     accent's exact RGB rather than the variable (the ticker card's
     glow, borders using literal rgba values) — those stay as-is in
     light mode; they're subtle enough not to cause a contrast
     problem either way. */

  /* ============================================================
     26. THEME TOGGLE (top-left, next to the logo)
     ============================================================ */
  .theme-toggle {
    background: none;
    border: 1px solid rgba(79, 216, 176, 0.3);
    border-radius: 999px;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 14px;
    margin-right: 4px;
  }

  /* ============================================================
     27. OFFER REVIEW MODAL — accept/decline/rebuttal
     ============================================================ */
  .offer-row { cursor: pointer; transition: background 0.15s ease; }
  .offer-row:hover { background: rgba(79, 216, 176, 0.06); }
  .rating { color: var(--aurora-violet); font-weight: 600; }
  .modal-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    align-items: center; justify-content: center;
    z-index: 50;
  }
  .modal-backdrop.open { display: flex; }
  .modal-card {
    background: var(--ink-raised);
    border: 1px solid rgba(79, 216, 176, 0.25);
    border-radius: 12px;
    padding: 28px;
    max-width: 480px;
    width: 90%;
    position: relative;
  }
  .modal-close {
    position: absolute; top: 14px; right: 16px;
    background: none; border: none; color: var(--text-lo);
    font-size: 20px; cursor: pointer;
  }
  /* A deliberate 2x2 grid for the 4 action buttons — previously
     flex-wrap left Withdraw wrapping awkwardly onto its own row
     below the other three, which read as unintentional rather than
     a real layout choice. */
  .modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }

  /* ============================================================
     28. FAQ PAGE
     ============================================================ */
  .faq-list { display: flex; flex-direction: column; gap: 22px; max-width: 700px; }
  .faq-item h3 { font-size: 16px; margin-bottom: 8px; }
  .faq-item p { font-size: 14.5px; color: var(--text-lo); line-height: 1.6; }

  /* ============================================================
     29. LAUNCH BADGE + WAITLIST FOLLOW-UP
     ============================================================ */
  .launch-badge {
    display: inline-block;
    background: rgba(140, 126, 232, 0.15);
    color: var(--aurora-violet);
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
  }
  .followup-question { font-size: 14px; color: var(--text-hi); margin-bottom: 10px; }
  .followup-actions { display: flex; gap: 10px; }

  /* ============================================================
     30. MODERNIZATION PASS
     Scroll-reveal, card depth, refined button/interactive states.
     Nothing here changes layout — it's meant to make what's
     already there feel a level more contemporary: more depth,
     softer motion, slightly more confident spacing.
     ============================================================ */

  /* Scroll reveal — starts slightly lower + transparent, settles
     into place. The .reveal-pending state is only ever applied by
     JS, so if JavaScript fails for any reason, content is never
     stuck invisible — it just skips the animation. */
  .reveal-pending { opacity: 0; transform: translateY(18px); }
  .reveal-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  /* Card depth — a soft shadow instead of flat fills, the most
     common "dated vs modern" tell for card-heavy layouts. */
  .ticker-card, .trust-card, .team-card, .pricing-card,
  .category-preview, .quote-card, .offer-group-head, .modal-card,
  .signin-wrap {
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.35);
  }
  :root[data-theme="light"] .ticker-card,
  :root[data-theme="light"] .trust-card,
  :root[data-theme="light"] .team-card,
  :root[data-theme="light"] .pricing-card,
  :root[data-theme="light"] .category-preview,
  :root[data-theme="light"] .quote-card,
  :root[data-theme="light"] .offer-group-head,
  :root[data-theme="light"] .modal-card,
  :root[data-theme="light"] .signin-wrap {
    box-shadow: 0 8px 24px -14px rgba(20, 30, 60, 0.18);
  }

  /* Buttons — a small lift + shadow on hover instead of just a
     flat color swap, and a matching press-down on click. */
  .btn { transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(79, 216, 176, 0.5); }
  .btn:active { transform: translateY(0); }
  .offer-group-head { transition: transform 0.15s ease, box-shadow 0.15s ease; }
  .offer-group-head:hover { transform: translateY(-1px); }

  /* ============================================================
     31. "IT'S AN AI PRODUCT" VISUAL SIGNALS
     A few deliberate, recognizable cues rather than generic AI-
     site decoration: a living aurora glow (literal — this IS the
     brand concept made into motion, not just a trendy blob), the
     pulsing "thinking" dots pattern people now associate directly
     with AI chat products, and a gradient-animated treatment on
     the word "AI" itself.
     ============================================================ */

  /* Gradient-animated "AI" — a moving two-color gradient clipped to
     the text itself, the most common visual shorthand right now for
     "this is an AI feature/product." */
  .ai-gradient-text {
    background: linear-gradient(90deg, #4FD8B0, #8C7EE8, #4FD8B0);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: aiGradientShift 4s linear infinite;
    font-weight: 700;
  }
  @keyframes aiGradientShift {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
  }

  /* "Zlora is negotiating..." thinking indicator — the pulsing-dots
     pattern from AI chat products, shown briefly before the ticker's
     rounds appear each cycle. */
  .thinking-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    color: var(--text-lo);
    font-size: 13px;
  }
  .thinking-dots { display: inline-flex; gap: 3px; margin-left: 2px; }
  .thinking-dots span {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--aurora);
    animation: thinkingPulse 1.2s ease-in-out infinite;
  }
  .thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
  .thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
  @keyframes thinkingPulse {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
    40% { opacity: 1; transform: scale(1); }
  }

  /* A subtle animated glow on the ticker card's border — reinforces
     "active/running" without being loud about it. */
  .ticker-card {
    animation: cardGlow 5s ease-in-out infinite;
  }
  @keyframes cardGlow {
    0%, 100% { box-shadow: 0 8px 24px -12px rgba(0,0,0,0.35), 0 0 0 1px rgba(79,216,176,0.15); }
    50% { box-shadow: 0 8px 24px -12px rgba(0,0,0,0.35), 0 0 24px -4px rgba(140,126,232,0.35); }
  }

  /* ============================================================
     32. EXAMPLES ACROSS CATEGORIES SECTION
     ============================================================ */
  .example-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
  .example-pill {
    background: transparent;
    border: 1px solid rgba(79, 216, 176, 0.3);
    color: var(--text-lo);
    font-family: var(--font-body);
    font-size: 13.5px;
    padding: 9px 16px;
    border-radius: 999px;
    cursor: pointer;
  }
  .example-pill.active { background: var(--aurora); color: var(--ink-fixed); border-color: var(--aurora); font-weight: 600; }
  .example-pill:hover:not(.active) { border-color: var(--aurora); color: var(--text-hi); }
  .section-alt .example-pill { color: #5A6B85; }
  .section-alt .example-pill:hover:not(.active) { color: var(--ink-fixed); }

  .example-detail {
    background: var(--ink-raised);
    border: 1px solid rgba(79, 216, 176, 0.2);
    border-radius: 10px;
    padding: 24px;
  }
  .example-detail .compare {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-mono);
    margin-bottom: 10px;
  }
  .example-detail .was { font-size: 20px; color: var(--text-lo); text-decoration: line-through; }
  .example-detail .arrow { color: var(--text-lo); }
  .example-detail .now { font-size: 26px; font-weight: 600; color: var(--aurora); }
  .example-detail .blurb { color: var(--text-lo); font-size: 14px; }

  /* ============================================================
     33. HERO CUMULATIVE SAVINGS (builds up as the ticker cycles
     through each category)
     ============================================================ */
  .ticker-cumulative {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed rgba(79, 216, 176, 0.25);
  }
  .cumulative-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
  }
  .cumulative-total .label { font-size: 12px; color: var(--text-lo); }
  .cumulative-total .value {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 600;
    color: var(--aurora);
  }

  /* ============================================================
     34. HERO SUMMARY SLIDE — reuses the same fixed-height rounds
     box (no added height); each category becomes a labeled row
     with a background bar sized relative to the largest saving.
     ============================================================ */
  .summary-row { overflow: hidden; }
  .summary-bar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: rgba(79, 216, 176, 0.18);
    border-radius: 4px;
    z-index: 0;
    transition: width 0.5s ease;
  }
  .summary-row .who, .summary-row .amt { position: relative; z-index: 1; }

  /* ============================================================
     35. MOBILE MENU (hamburger + dropdown panel)
     Only shown on narrow screens — on wider screens the normal
     horizontal nav.links row already handles this, so the button
     stays hidden there.
     ============================================================ */
  .mobile-menu-btn {
    display: none;
    background: none;
    border: 1px solid rgba(79, 216, 176, 0.3);
    border-radius: 6px;
    color: var(--text-hi);
    font-size: 18px;
    width: 36px;
    height: 36px;
    cursor: pointer;
  }
  .mobile-menu-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ink-raised);
    border-bottom: 1px solid rgba(79, 216, 176, 0.2);
    padding: 12px 24px 16px;
    z-index: 30;
    flex-direction: column;
    gap: 4px;
  }
  .mobile-menu-panel.open { display: flex; }
  .mobile-menu-panel a {
    display: block;
    padding: 10px 4px;
    color: var(--text-hi);
    text-decoration: none;
    font-size: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .mobile-menu-panel a:last-child { border-bottom: none; }

  @media (max-width: 640px) {
    .mobile-menu-btn { display: flex; align-items: center; justify-content: center; }
  }

  /* Field-label hover tooltips (Seek Quote and anywhere else a
     data-tooltip attribute is used) — a lightweight, theme-matched
     alternative to the native browser title tooltip, which can't be
     styled and has an inconsistent, sluggish appearance delay
     across browsers. */
  [data-tooltip] { position: relative; cursor: help; }
  [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 20;
    width: max-content;
    max-width: 260px;
    padding: 8px 12px;
    background: var(--ink-raised);
    border: 1px solid rgba(79,216,176,0.25);
    border-radius: var(--radius);
    color: var(--text-hi);
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
  }
  [data-tooltip]:hover::after { opacity: 1; }