/* tool.css — the reg-search tool + results styling, shared by the homepage
   and the inline tool embedded on blog pages. Component classes only (no base,
   nav, body or footer rules), so it is safe to load alongside the blog styles. */
  .plate-wrap {
    background: var(--ink);
    padding: 6px;
    border-radius: 14px;
    box-shadow: 0 14px 40px -10px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.05);
    margin-bottom: 12px;
  }
  .plate {
    background: var(--plate);
    border-radius: 9px;
    display: flex; align-items: stretch;
    overflow: hidden;
    position: relative;
  }
  .plate::before {
    content: "GB";
    background: #003399;
    color: #FFCC00;
    font-family: 'Geist Mono', monospace;
    font-weight: 700;
    font-size: 13px;
    padding: 0 10px;
    display: flex; align-items: center;
    border-right: 2px solid var(--plate-dark, #E5B41E);
  }
  .plate input {
    flex: 1;
    border: 0;
    background: transparent;
    font-family: 'Geist Mono', monospace;
    font-weight: 700;
    font-size: clamp(28px, 8vw, 42px);
    letter-spacing: 0.06em;
    text-align: center;
    color: var(--ink);
    padding: 16px 12px;
    text-transform: uppercase;
    outline: none;
    width: 100%;
    min-width: 0;
  }
  .plate input::placeholder { color: rgba(0,0,0,0.35); }

  /* Smaller display-only plate for the result card */
  .plate-display {
    display: inline-flex;
    align-items: stretch;
    background: var(--ink);
    padding: 3px;
    border-radius: 7px;
    margin-bottom: 12px;
    box-shadow: 0 3px 8px -2px rgba(0,0,0,0.15);
  }
  .plate-display-inner {
    background: var(--plate);
    border-radius: 5px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
  }
  .plate-display-flag {
    background: #003399;
    color: #FFCC00;
    font-family: 'Geist Mono', monospace;
    font-weight: 700;
    font-size: 9px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    border-right: 1.5px solid var(--plate-dark, #E5B41E);
    line-height: 1;
  }
  .plate-display-reg {
    font-family: 'Geist Mono', monospace;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.04em;
    color: var(--ink);
    padding: 6px 14px;
    text-transform: uppercase;
    line-height: 1;
  }

  .check-btn {
    width: 100%;
    background: var(--ink);
    color: var(--cream);
    border: 0;
    padding: 18px;
    font-family: 'Geist', sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.02em;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
    display: flex; align-items: center; justify-content: center; gap: 10px;
  }
  .check-btn:hover { background: #1c1c1c; }
  .check-btn:active { transform: scale(0.985); }
  .check-btn:disabled { opacity: 0.6; cursor: progress; }
  .check-btn .arr {
    transition: transform 0.2s ease;
    font-size: 22px;
    line-height: 1;
    display: inline-block;
  }
  .check-btn:hover .arr { transform: translateX(4px); }

  .small-print {
    font-size: 12px;
    color: var(--soft);
    margin-top: 14px;
    line-height: 1.6;
  }

  /* ── Job dropdown ──────────────────────── */
  .field-label {
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--soft);
    margin-bottom: 8px;
    display: block;
  }
  .job-wrap {
    margin-bottom: 16px;
    position: relative;
  }
  .job-wrap::after {
    content: "▾";
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--cream);
    font-size: 32px;
    line-height: 1;
  }
  .job-select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: var(--ink);
    color: var(--cream);
    border: 0;
    border-radius: 12px;
    padding: 18px 60px 18px 20px;
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    outline: none;
  }
  .job-select option { background: var(--ink); color: var(--cream); }

  /* ── Hero price card (single chosen job) ─ */
  .hero-price {
    background: var(--ink);
    color: var(--cream);
    border-radius: 18px;
    padding: 18px 22px 18px;
    margin-bottom: 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .hero-price::before {
    content: ""; position: absolute;
    top: -40px; right: -40px;
    width: 160px; height: 160px;
    background: var(--plate);
    border-radius: 50%;
    opacity: 0.18;
  }
  .hero-price-label {
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(250, 247, 242, 0.55);
    margin-bottom: 6px;
    position: relative; z-index: 1;
  }
  .hero-price-job {
    font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
    font-weight: 700;
    font-size: 21px;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
    position: relative; z-index: 1;
  }
  .hero-price-amount {
    font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
    font-weight: 900;
    font-size: clamp(38px, 10vw, 54px);
    letter-spacing: -0.04em;
    line-height: 1;
    position: relative; z-index: 1;
    margin-bottom: 10px;
  }
  .hero-price-amount .lo { color: #6FD986; }
  .hero-price-amount .sep { color: rgba(250, 247, 242, 0.4); margin: 0 6px; font-weight: 400; }
  .hero-price-amount .hi { color: #FF6F5A; }
  .hero-price-amount .single { color: #6FD986; }
  .hero-price-note {
    font-size: 14px;
    color: rgba(250, 247, 242, 0.7);
    line-height: 1.5;
    max-width: 360px;
    margin: 0 auto;
    position: relative; z-index: 1;
  }
  .hero-price-note .red { color: #FF6F5A; font-weight: 600; }
  .hero-price-note .green { color: #6FD986; font-weight: 600; }

  .legend {
    display: flex; justify-content: center; gap: 18px;
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--soft);
    margin-bottom: 14px;
  }
  .legend span::before {
    content: "■"; margin-right: 5px;
  }
  .legend .green::before { color: var(--green); }
  .legend .red::before { color: var(--red); }

  /* ── Results ─────────────────────────────── */
  .results {
    max-width: 720px;
    margin: 12px auto 0;
    padding: 0 22px 80px;
    /* Sticky nav covers the top ~60px; offset scrollIntoView so the plate stays visible */
    scroll-margin-top: 80px;
  }
  .vehicle-card {
    background: var(--paper);
    border: 1px solid var(--ink);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
  }
  .vehicle-card::after {
    content: ""; position: absolute; top: 0; right: 0;
    width: 120px; height: 120px;
    background: var(--plate);
    border-radius: 50%;
    transform: translate(40%, -40%);
    opacity: 0.5;
    pointer-events: none;
  }
  .vehicle-make {
    font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
    font-weight: 900;
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
  }
  .vehicle-meta {
    font-family: 'Geist Mono', monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--soft);
    margin-bottom: 12px;
  }
  .stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 14px;
    position: relative;
    z-index: 1;
  }
  .stat-label {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--soft);
  }
  .stat-value {
    font-weight: 600;
    font-size: 15px;
    margin-top: 2px;
  }
  .stat-value.ok { color: var(--green); }
  .stat-value.bad { color: var(--red); }

  .section-title {
    font-family: 'Geist', 'Geist Fallback', system-ui, sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 26px;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
  }
  .section-sub {
    color: var(--soft);
    font-size: 14px;
    margin-bottom: 18px;
  }
  /* Scroll cue under the hero — mono font + bouncing arrow so people know
     there's a full list of prices below, not just the headline figure. */
  .scroll-cue {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Geist Mono', monospace;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 18px;
  }
  .scroll-arrow {
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    color: var(--plate-dark, #C8321F);
    animation: scrollNudge 1.3s ease-in-out infinite;
  }
  @keyframes scrollNudge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .scroll-arrow { animation: none; }
  }

  .price-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px dashed rgba(0,0,0,0.18);
    gap: 12px;
  }
  .price-row:first-of-type { border-top: 2px solid var(--ink); }
  .price-row:last-of-type { border-bottom: 2px solid var(--ink); }
  .price-name {
    font-weight: 500;
    font-size: 15px;
  }
  .price-range {
    font-family: 'Geist Mono', monospace;
    font-weight: 700;
    font-size: 16px;
    white-space: nowrap;
  }
  .price-range .lo { color: var(--green); }
  .price-range .sep { color: var(--soft); margin: 0 4px; font-weight: 400; }
  .price-range .hi { color: var(--red); }
  .price-range .single { color: var(--green); }

  .footnote {
    background: var(--paper);
    border-left: 4px solid var(--plate);
    padding: 16px 18px;
    margin-top: 28px;
    border-radius: 0 10px 10px 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--soft);
  }
  .footnote strong { color: var(--ink); }

  /* ── What's next? - actions after results ───── */
  .next-actions {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--rule);
  }
  .next-actions-title {
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--soft);
    margin-bottom: 16px;
  }
  .next-actions-grid {
    display: grid;
    gap: 10px;
  }
  .next-action {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 16px 18px;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
    background-color: var(--paper);
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    text-align: left;
    font: inherit;
  }
  .next-action:hover {
    transform: translateY(-1px);
    border-color: var(--ink);
    color: var(--ink);
  }
  .next-action-icon {
    font-size: 22px;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
  }
  .next-action-text {
    flex: 1;
    min-width: 0;
  }
  .next-action-title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 2px;
  }
  .next-action-sub {
    font-size: 13px;
    color: var(--soft);
    line-height: 1.4;
  }
  .next-action-arrow {
    color: var(--soft);
    font-size: 20px;
    flex-shrink: 0;
  }
  .next-action:hover .next-action-arrow { color: var(--red); }

  /* Toast for "copied!" feedback */
  .toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: var(--cream);
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .toast.show { opacity: 1; }

  .err {
    background: #FBE8E4;
    border: 1px solid var(--red);
    color: var(--red);
    padding: 14px 16px;
    border-radius: 10px;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 500;
  }

  /* ── States ─────────────────────────────── */
  .hidden { display: none !important; }

  .loading-dots {
    display: inline-flex; gap: 4px;
  }
  .loading-dots span {
    width: 6px; height: 6px; border-radius: 50%; background: currentColor;
    animation: bounce 1.2s ease-in-out infinite;
  }
  .loading-dots span:nth-child(2) { animation-delay: 0.15s; }
  .loading-dots span:nth-child(3) { animation-delay: 0.3s; }
  @keyframes bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
  }

  /* fade-in for results */
  .reveal { animation: rise 0.5s ease-out both; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── Footer ─────────────────────────────── */

  /* ── Inline tool embed (blog pages) ───────── */
  .mrc-embed {
    background: var(--paper);
    border: 1px solid var(--ink);
    border-radius: 16px;
    padding: 22px 20px;
    margin: 34px 0;
  }
  .mrc-embed-head {
    font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
    font-weight: 900; font-size: 23px; line-height: 1.15;
    letter-spacing: -0.02em; margin-bottom: 4px;
  }
  .mrc-embed-sub { color: var(--soft); font-size: 14px; margin-bottom: 16px; }
  .mrc-embed .check-btn { width: 100%; margin-top: 12px; }
  .mrc-embed .results { margin-top: 6px; }