:root {
      --ink: #111;
      --ink-soft: #555;
      --line: #111;
      --line-soft: #bbb;
      --bg: #fdfdfa;
      --accent: #c93;
      --warn: #c63;
      /* Single sans-serif for body + chrome. Both --fam and --fam-sans resolve
         to Raleway so we can swap back with one variable change if needed. */
      --fam:       "Raleway", -apple-system, "Segoe UI", system-ui, sans-serif;
      --fam-sans:  "Raleway", -apple-system, "Segoe UI", system-ui, sans-serif;
      /* Narrow font for dense number listings. */
      --fam-narrow: "Roboto Condensed", "Helvetica Neue Condensed", "Arial Narrow", Arial, sans-serif;
    }
    * { box-sizing: border-box; }
    html, body {
      margin: 0;
      padding: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: var(--fam);
      font-size: 17px;
      line-height: 1.55;
    }
    .container {
      max-width: 880px;
      margin: 0 auto;
      padding: 40px 24px 80px;
    }
    /* =====================================================================
     * Helptip — small underlined "?" that reveals an explanation on hover
     * OR click (tap on mobile). Reusable anywhere: just drop in
     *   <span class="helptip" data-tip="explanation text here">?</span>
     * ===================================================================== */
    .helptip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      line-height: 1;
      font-family: var(--fam-sans);
      font-size: 11px;
      font-weight: 700;
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
      opacity: 0.70;
      cursor: help;
      margin-left: 6px;
      margin-right: 2px;
      vertical-align: baseline;
      position: relative;
      user-select: none;
      background: transparent;
      border: none;
      padding: 0;
    }
    .helptip:hover,
    .helptip:focus,
    .helptip.open { opacity: 1; outline: none; }

    /* The tooltip itself — appears below the ? on hover/click */
    .helptip::after {
      content: attr(data-tip);
      position: absolute;
      top: calc(100% + 10px);
      left: 50%;
      transform: translateX(-50%) translateY(4px);
      width: 280px;
      max-width: calc(100vw - 40px);
      background: #111;
      color: #fff;
      padding: 10px 13px;
      border-radius: 10px;
      font-family: var(--fam-sans);
      font-size: 12.5px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0;
      text-decoration: none;
      text-transform: none;
      text-align: left;
      box-shadow: 0 10px 24px rgba(0,0,0,0.22), 0 3px 8px rgba(0,0,0,0.12);
      z-index: 100;
      white-space: normal;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.14s ease, transform 0.14s ease;
    }
    /* Small arrow pointing up to the ? */
    .helptip::before {
      content: "";
      position: absolute;
      top: calc(100% + 4px);
      left: 50%;
      transform: translateX(-50%) scale(0.6) translateY(4px);
      width: 0;
      height: 0;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-bottom: 7px solid #111;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.14s ease, transform 0.14s ease;
      z-index: 101;
    }
    .helptip:hover::after, .helptip:focus::after, .helptip.open::after,
    .helptip:hover::before, .helptip:focus::before, .helptip.open::before {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
    .helptip:hover::before, .helptip:focus::before, .helptip.open::before {
      transform: translateX(-50%) scale(1) translateY(0);
    }

    /* ---- Sister-domain icon + popover (used in TF + local exact-match boxes)
       Validated tier:  matching .com is a real-business listing
                        (icons/transparent-image.png).
       Registered tier: matching .com is registered but not validated
                        (icons/com-transparent-image.png) — dimmed.
    ---------------------------------------------------------------- */
    .dm-wrap {
      position: relative;
      display: inline-block;
      margin-left: 8px;
      vertical-align: middle;
    }
    .dm-icon {
      background: none; border: 0; cursor: pointer;
      vertical-align: middle; line-height: 1;
      /* Padding turns this into a ~44x44 tap target on mobile while the
         visible image stays clean inside it. Negative-margin compensates
         in the inline flow so we don't push the row description over. */
      padding: 7px;
      margin: -7px 0;
    }
    .dm-icon img {
      width: 30px; height: 30px;
      display: block; vertical-align: middle;
      transition: transform 0.12s ease, opacity 0.12s ease;
    }
    .dm-icon:hover img,
    .dm-icon:focus img { transform: scale(1.10); opacity: 1; }
    .dm-icon-registered img { opacity: 0.65; filter: grayscale(0.20); }
    .dm-icon-registered:hover img { opacity: 1; filter: none; }
    @media (max-width: 480px) {
      .dm-icon img { width: 28px; height: 28px; }
    }

    .dm-popover {
      position: absolute;
      left: 0; top: calc(100% + 6px);
      z-index: 60;
      background: #fff;
      border: 1px solid #d8d8d8;
      border-radius: 10px;
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
      padding: 12px 12px 10px;
      width: 280px;
      max-width: min(280px, calc(100vw - 24px));
      font-family: var(--fam-sans);
      font-size: 13px;
      line-height: 1.4;
      color: var(--ink);
      text-align: left;
    }
    /* JS adds data-side="right" when the popover would clip the right edge
       of the viewport — anchor to the icon's right side instead so the
       popover grows leftward into the row. */
    .dm-popover[data-side="right"] { left: auto; right: 0; }
    /* JS adds data-vside="up" for icons near the bottom of the viewport
       (the 833/844/855 toll-free rows often hit this) so the popover
       pops UP from the icon instead of dropping below and getting
       clipped under the results card. */
    .dm-popover[data-vside="up"] {
      top: auto;
      bottom: calc(100% + 6px);
    }
    .dm-popover .dm-screenshot-link {
      display: block;
      margin-bottom: 8px;
      border-radius: 5px;
      overflow: hidden;
      transition: box-shadow 0.15s ease;
    }
    .dm-popover .dm-screenshot-link:hover {
      box-shadow: 0 0 0 2px var(--accent, #ff6a00);
    }
    .dm-popover .dm-screenshot {
      width: 100%; height: auto;
      display: block;
      border-radius: 5px;
      border: 1px solid #eee;
    }
    .dm-popover .dm-screenshot-link .dm-screenshot { border: 0; border-radius: 0; }
    /* Fallback when the sister-site screenshot is missing/unreachable.
       JS adds .dm-screenshot-missing to the parent anchor; CSS draws a
       neutral placeholder with a small icon so the popover doesn't show
       a broken-image symbol. */
    .dm-popover .dm-screenshot-link.dm-screenshot-missing {
      display: flex; align-items: center; justify-content: center;
      height: 140px;
      background: linear-gradient(135deg, #f5f5f5, #ececec);
      color: #888; font-size: 12px;
      letter-spacing: 0.04em; text-transform: uppercase;
    }
    .dm-popover .dm-screenshot-link.dm-screenshot-missing::before {
      content: "preview unavailable";
    }
    .dm-popover .dm-biz {
      display: block; font-weight: 700;
      margin-bottom: 2px;
    }
    .dm-popover .dm-domain {
      display: block;
      font-family: var(--fam-mono, monospace);
      font-size: 12px;
      color: var(--ink-soft);
      margin-bottom: 8px;
      word-break: break-all;
    }
    .dm-popover .dm-cta {
      display: inline-block;
      padding: 6px 12px;
      background: var(--accent, #ff6a00);
      color: #fff;
      font-weight: 600;
      text-decoration: none;
      border-radius: 5px;
      font-size: 12px;
    }
    .dm-popover .dm-cta:hover { filter: brightness(1.05); }
    .dm-popover .dm-close {
      float: right;
      background: none; border: 0; cursor: pointer;
      font-size: 18px; line-height: 1; color: #888;
      padding: 0 0 0 8px;
    }
    .dm-popover .dm-close:hover { color: #222; }

    /* CSS-only hover on devices that have hover. Touch devices use the JS
       click toggle instead — `hidden` attribute stays the source of truth. */
    @media (hover: hover) {
      .dm-wrap:hover .dm-popover[hidden] { display: block; }
    }
    @media (max-width: 480px) {
      .dm-popover { width: 240px; padding: 10px 10px 8px; }
      .dm-popover .dm-screenshot { margin-bottom: 6px; }
    }

    /* ---- "Real businesses already on this vanity" cards row -------- */
    .example-cards {
      max-width: 1180px;
      margin: 24px auto 8px;
      padding: 0 16px;
    }
    .example-cards h3 {
      font-family: var(--fam-sans);
      font-size: 15px;
      font-weight: 600;
      color: var(--ink-soft);
      margin: 0 0 10px;
      letter-spacing: 0.01em;
    }
    .example-cards-cat { color: var(--accent, #ff6a00); }
    .example-cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .example-card {
      display: block;
      background: #fff;
      border: 1px solid #e2e2e2;
      border-radius: 8px;
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .example-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0,0,0,0.10);
    }
    .example-card-shot {
      display: block;
      aspect-ratio: 16 / 9;
      background: #f5f5f5;
      overflow: hidden;
    }
    .example-card-shot img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: top center;
      display: block;
    }
    .example-card-shot.example-card-shot-missing {
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, #f5f5f5, #ececec);
      color: #888; font-size: 11px;
      letter-spacing: 0.04em; text-transform: uppercase;
    }
    .example-card-shot.example-card-shot-missing::before {
      content: "preview unavailable";
    }
    .example-card-meta {
      display: block;
      padding: 10px 12px 12px;
      font-family: var(--fam-sans);
    }
    .example-card-domain {
      display: block;
      font-family: var(--fam-mono, "Menlo", "Consolas", monospace);
      font-size: 16px;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -0.01em;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .example-card-biz {
      display: block;
      font-size: 11.5px;
      color: var(--ink-soft);
      margin-top: 2px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .example-card-source {
      display: block;
      font-size: 10.5px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--accent, #ff6a00);
      margin-top: 6px;
    }
    @media (max-width: 480px) {
      .example-card-domain { font-size: 15px; }
    }
    /* Punch line under the 3 cards — the catalog-size signal. */
    .example-cards-punch {
      margin: 12px 0 0;
      font-family: var(--fam-sans);
      font-size: 14px;
      line-height: 1.45;
      color: var(--ink);
      text-align: center;
    }
    .example-cards-punch strong {
      color: var(--accent, #ff6a00);
      font-weight: 700;
    }
    .example-cards-punch a {
      color: var(--ink);
      text-decoration: underline;
      text-decoration-color: rgba(0,0,0,0.25);
      text-underline-offset: 2px;
    }
    .example-cards-punch a:hover {
      text-decoration-color: var(--accent, #ff6a00);
    }
    @media (max-width: 760px) {
      .example-cards-grid { grid-template-columns: 1fr; gap: 10px; }
      .example-card-shot { aspect-ratio: 16 / 9; }
      /* On phones, show ONE card. The first card already wins our ranking
         chain (same category + same state) so it's the most relevant; a
         second and third would just push the rest of the page down. */
      .example-cards-grid .example-card:nth-child(n+2) { display: none; }
    }

    /* Group-button helptips open UPWARD so they don't cover the columns
       below. Arrow points down toward the ?. Same pattern applies to any
       tooltip whose parent has .helptip-above. */
    .group-btn .helptip::after,
    .helptip-above::after {
      top: auto;
      bottom: calc(100% + 10px);
      transform: translateX(-50%) translateY(-4px);
    }
    .group-btn .helptip::before,
    .helptip-above::before {
      top: auto;
      bottom: calc(100% + 4px);
      border-top: 7px solid #111;
      border-bottom: none;
      transform: translateX(-50%) scale(0.6) translateY(-4px);
    }
    .group-btn .helptip:hover::after,
    .group-btn .helptip:focus::after,
    .group-btn .helptip.open::after,
    .helptip-above:hover::after,
    .helptip-above:focus::after,
    .helptip-above.open::after {
      transform: translateX(-50%) translateY(0);
    }
    .group-btn .helptip:hover::before,
    .group-btn .helptip:focus::before,
    .group-btn .helptip.open::before,
    .helptip-above:hover::before,
    .helptip-above:focus::before,
    .helptip-above.open::before {
      transform: translateX(-50%) scale(1) translateY(0);
    }

    /* Columns have overflow:hidden; helptips inside column headers need to
       be able to escape so the tooltip is readable. */
    .premium-col-header { overflow: visible; }

    /* =====================================================================
     * Site chrome — header with logo + search, icon nav, orange footer.
     * Matches the homepage so the site feels unified across pages.
     * ===================================================================== */

    .site-header {
      display: flex;
      align-items: center;
      gap: 28px;
      padding: 14px 0 16px;
      margin-bottom: 18px;
      border-bottom: 1px solid #e8e4dc;
    }
    .site-logo {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      line-height: 1;
      text-decoration: none;
      user-select: none;
    }
    .site-logo .logo-text {
      font-family: "Nanum Pen Script", cursive;
      font-size: 44px;
      color: #f38e1c;
      letter-spacing: -0.02em;
      line-height: 0.95;
    }
    .site-logo .logo-sub {
      font-family: var(--fam-sans);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--ink-soft);
      margin-top: 2px;
      text-align: center;
    }
    .site-header form.lookup {
      flex: 1 1 auto;
      margin: 0;
    }
    @media (max-width: 700px) {
      .site-header { flex-direction: column; align-items: stretch; gap: 14px; }
      .site-logo { align-self: center; }
    }
    /* On phones the 44px logo eats ~23% of the first screen. Shrink to
       30px so the search box + first result row are above the fold on
       a typical iPhone (812px tall). The sub-line shrinks proportionally. */
    @media (max-width: 600px) {
      .site-logo .logo-text { font-size: 30px; }
      .site-logo .logo-sub  { font-size: 9px; letter-spacing: 0.10em; }
      .site-header { padding: 10px 0 12px; gap: 10px; }
    }

    /* Icon nav shortcuts — lives at the bottom of the page, between the
       carousel and the marquee. 9 items: 800Game + 8 existing. */
    .site-nav {
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      gap: 10px;
      max-width: 840px;
      margin: 50px auto 20px;
    }
    .site-nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      text-decoration: none;
      color: var(--ink);
      font-family: var(--fam-sans);
      font-size: 11px;
      font-weight: 600;
      text-align: center;
      line-height: 1.2;
    }
    .site-nav-icon {
      width: 56px; height: 56px;
      border-radius: 50%;
      border: 2px solid #f38e1c;
      background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
      box-shadow: 0 4px 10px -3px rgba(243,142,28,0.35),
                  inset 0 1px 0 rgba(255,255,255,0.6);
      padding: 8px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.15s, box-shadow 0.2s;
    }
    .site-nav-icon object {
      width: 100%; height: 100%;
      pointer-events: none;
    }
    .site-nav-item:hover .site-nav-icon {
      transform: translateY(-2px);
      box-shadow: 0 8px 14px -3px rgba(243,142,28,0.50),
                  inset 0 1px 0 rgba(255,255,255,0.7);
    }
    .site-nav-item:hover { color: #ea580c; }

    @media (max-width: 720px) {
      .site-nav { grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 420px; }
    }
    @media (max-width: 420px) {
      .site-nav-icon { width: 50px; height: 50px; padding: 7px; }
    }

    /* Marquee bar — full-bleed, matches homepage */
    .marquee-bar {
      background: #111;
      color: #fff;
      overflow: hidden;
      padding: 10px 0;
      margin-top: 60px;
      border-top: 1px solid #222;
    }
    .marquee-inner {
      display: flex;
      gap: 44px;
      white-space: nowrap;
      animation: marquee 60s linear infinite;
      font-family: var(--fam-sans);
      font-size: 13px;
    }
    .marquee-inner:hover { animation-play-state: paused; }
    .marquee-inner .live-tag {
      color: #f38e1c;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      padding-left: 20px;
      font-weight: 700;
    }
    @keyframes marquee {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    /* Orange footer — full-bleed, matches homepage */
    .site-footer {
      background: #f38e1c;
      color: #fff;
      padding: 14px 24px;
    }
    .site-footer-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      font-family: var(--fam-sans);
      font-size: 12px;
    }
    .site-footer-inner a {
      color: #fff;
      text-decoration: none;
      margin-left: 18px;
    }
    .site-footer-inner a:hover { color: #111; }

    /* Search bar — matches the homepage: rounded pill input with orange-tinted
       shadow lift, gap, then orange gradient pill button. Focus-within turns
       the input border brand-orange. */
    form.lookup {
      display: flex;
      gap: 12px;
      margin: 24px 0 8px;
      background: transparent;
      border: none;
    }
    form.lookup input[type=text] {
      flex: 1;
      min-width: 0;
      border: 1px solid #e5e5e5;
      border-radius: 999px;
      outline: none;
      padding: 14px 24px;
      /* Roboto Condensed matches the vanity result labels so typing reads as
         continuous with the result row styling. */
      font-family: var(--fam-narrow);
      font-size: 20px;
      letter-spacing: 0.01em;
      background: #fff;
      color: var(--ink);
      /* Vanity numbers are conventionally written in caps (CARDIAC, PLUMBER,
         JUNK-CARS) — match that. text-transform handles the visual; the
         oninput handler on the element forces the actual value uppercase
         too so what we send to the server is consistent regardless of
         platform/keyboard. */
      text-transform: uppercase;
      box-shadow: 0 4px 14px -2px rgba(243,142,28,0.18),
                  0 2px 4px  -2px rgba(0,0,0,0.06);
      transition: box-shadow 0.2s, border-color 0.2s;
    }
    /* Keep the placeholder readable in normal case — text-transform on the
       input would make the placeholder uppercase too, which looks shouty. */
    form.lookup input[type=text]::placeholder { text-transform: none; }
    form.lookup input[type=text]:hover {
      box-shadow: 0 8px 22px -4px rgba(243,142,28,0.30),
                  0 4px 8px  -2px rgba(0,0,0,0.08);
    }
    form.lookup input[type=text]:focus {
      border-color: #f38e1c;
      box-shadow: 0 8px 22px -4px rgba(243,142,28,0.35),
                  0 4px 8px  -2px rgba(0,0,0,0.10);
    }
    form.lookup select {
      /* Unused in current markup but kept in case older pages render it */
      border: 1px solid #e5e5e5;
      border-radius: 999px;
      outline: none;
      padding: 10px 18px;
      font-family: var(--fam);
      font-size: 17px;
      background: #fff;
      color: var(--ink);
      cursor: pointer;
    }
    form.lookup button {
      border: none;
      background: linear-gradient(180deg, #f59c2e 0%, #f38e1c 60%, #e07b0a 100%);
      color: #fff;
      font-family: var(--fam-sans);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      padding: 0 30px;
      cursor: pointer;
      white-space: nowrap;
      border-radius: 999px;
      box-shadow: 0 4px 14px -2px rgba(243,142,28,0.45),
                  inset 0 1px 0 rgba(255,255,255,0.25);
      transition: transform 0.15s, box-shadow 0.2s;
    }
    form.lookup button:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 20px -4px rgba(243,142,28,0.55),
                  inset 0 1px 0 rgba(255,255,255,0.30);
    }
    form.lookup button:active {
      transform: translateY(0);
      box-shadow: 0 2px 8px -2px rgba(243,142,28,0.40),
                  inset 0 2px 4px rgba(0,0,0,0.10);
    }

    /* As-you-type vanity suggestion dropdown — Algolia-style. The wrapper
       sits inline-flex inside form.lookup so the dropdown floats below
       the text input, matching its width. Suggestions are top-100K by
       blended_score from master_vanity, prefix-matched server-side. */
    .lookup-input-wrap {
      position: relative;
      flex: 1;
      min-width: 0;
      display: flex;
    }
    .lookup-input-wrap input[type=text] { flex: 1; min-width: 0; }
    .suggest-dropdown {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      background: #fff;
      border: 1px solid #e5e5e5;
      border-radius: 14px;
      box-shadow: 0 18px 40px -10px rgba(0,0,0,0.18),
                  0 4px 10px -2px rgba(0,0,0,0.06);
      max-height: 360px;
      overflow-y: auto;
      z-index: 30;
      display: none;
      font-family: var(--fam);
    }
    .suggest-dropdown.open { display: block; }
    .suggest-item {
      display: flex;
      align-items: baseline;
      gap: 12px;
      padding: 9px 18px;
      cursor: pointer;
      border-bottom: 1px solid #f4f4f4;
    }
    .suggest-item:last-child { border-bottom: none; }
    .suggest-item:hover, .suggest-item.active { background: #fff7ec; }
    .suggest-word {
      font-family: var(--fam-narrow);
      font-size: 18px;
      font-weight: 600;
      color: var(--ink);
      flex: 0 0 auto;
    }
    .suggest-word .matched { color: #c9862a; }
    .suggest-cat {
      flex: 1 1 auto;
      text-align: right;
      font-size: 12px;
      color: var(--ink-soft);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .hint {
      font-family: var(--fam-sans);
      font-size: 12px;
      color: var(--ink-soft);
      text-align: center;
      letter-spacing: 0.03em;
      margin-bottom: 28px;
    }

    /* Main results card — rounded & shadowed like the carousel columns.
       Narrower than the 880px content container so it reads as a distinct
       element. Default header blue (Local group); .results-card-tf flips
       header to green for Toll Free; .results-card-premium would flip purple. */
    .results-card {
      max-width: 780px;
      margin: 24px auto 0;
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 6px 20px -4px rgba(0,0,0,0.10),
                  0 2px 6px  -2px rgba(0,0,0,0.06),
                  inset 0 1px 0 rgba(255,255,255,0.6);
    }
    .results-card + .results-card { margin-top: 16px; } /* tighter stacking */
    .results-card-header {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 10px 18px;
      background: var(--col-blue);   /* default: Local */
      color: #fff;
      border-top-left-radius: 18px;
      border-top-right-radius: 18px;
      font-family: var(--fam-sans);
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      flex-wrap: wrap;
    }
    .results-card.results-card-tf      .results-card-header { background: var(--col-green); }
    .results-card.results-card-premium .results-card-header { background: var(--col-purple); }
    .results-label {
      font-weight: 800;
      font-size: 13px;
      letter-spacing: 0.18em;
      margin-right: 4px;
      border-right: 1px solid rgba(255,255,255,0.3);
      padding-right: 14px;
    }
    .results-meta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .results-meta strong { font-weight: 700; }
    /* State switcher styled to sit cleanly on the blue header */
    .state-switcher {
      font-family: var(--fam-sans);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #fff;
      background: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.3);
      border-radius: 999px;
      padding: 3px 12px;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s;
    }
    .state-switcher:hover {
      background: rgba(255,255,255,0.25);
      border-color: rgba(255,255,255,0.55);
    }
    .state-switcher option { color: #111; background: #fff; }

    /* Mobile-only short prefix ("23 NPAs ·") that replaces the verbose
       "23 area codes in" desktop phrasing when the local card header is
       tight. Hidden by default; shown at <=600px. */
    .meta-prefix-mobile { display: none; }

    /* Generic responsive-vocabulary helpers. Wrap any inline span you
       want hidden / shown only on phones. Use sparingly — preferable to
       restructure markup if used in more than a few places. */
    .show-on-mobile { display: none; }
    @media (max-width: 600px) {
      .hide-on-mobile { display: none !important; }
      .show-on-mobile { display: inline; }
    }
    @media (max-width: 600px) {
      .results-card .results-card-header { padding: 8px 14px; gap: 8px; }
      .results-card .results-card-header .results-label {
        font-size: 12px;
        padding-right: 8px;
      }
      .results-card .results-meta { font-size: 11px; gap: 6px; }
      /* Hide everything in the meta strip except the state switcher —
         on mobile we don't have horizontal space for the area-code count
         or the unassigned tally, and the Nationwide pill carries the
         action affordance on its own. */
      .results-card .meta-prefix { display: none; }
      .results-card .meta-prefix-mobile { display: none; }
      .results-card .meta-unassigned { display: none; }
      /* Compact state switcher so it doesn't dominate the header. */
      .state-switcher {
        font-size: 12px;
        padding: 4px 10px;
        max-width: 130px;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }

    /* Nationwide toggle — sits at the right edge of the local results-card
       header. Same pill family as .state-switcher so it visually belongs
       to that header bar; inverts on hover. */
    .nationwide-btn {
      margin-left: auto;
      font-family: var(--fam-sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-decoration: none;
      color: #fff;
      background: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.45);
      border-radius: 999px;
      padding: 3px 14px;
      white-space: nowrap;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .nationwide-btn:hover {
      background: #fff;
      color: var(--col-blue);
      border-color: #fff;
    }
    .nationwide-btn.is-on {
      background: #fff;
      color: var(--col-blue);
      border-color: #fff;
    }
    .nationwide-btn.is-on:hover {
      background: rgba(255,255,255,0.85);
    }

    /* Section dividers inside the nationwide-mode results list. Lightweight
       bands that split "Available to Buy" from "Just Given Out". */
    .results-section-label {
      list-style: none;
      font-family: var(--fam-sans);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink-soft);
      padding: 12px 4px 4px;
      margin: 4px 0 2px;
      border-bottom: 1px solid #ece6d8;
    }
    .results-section-label.hot {
      color: #c0392b;
      border-bottom-color: #efc8c2;
    }
    .results-empty-row {
      list-style: none;
      padding: 28px 14px;
      text-align: center;
      font-family: var(--fam-sans);
      font-size: 13px;
      color: var(--ink-soft);
    }

    /* TF card toggle pills — Prefix / More / * — same shape as the
       Nationwide pill but tinted to read against the green TF header. */
    .tf-toggle-btn {
      margin-left: 6px;
      font-family: var(--fam-sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-decoration: none;
      color: #fff;
      background: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.45);
      border-radius: 999px;
      padding: 3px 14px;
      white-space: nowrap;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .tf-toggle-btn:first-of-type { margin-left: auto; }
    .tf-toggle-btn:hover {
      background: #fff;
      color: var(--col-green);
      border-color: #fff;
    }
    .tf-toggle-btn.is-on {
      background: #fff;
      color: var(--col-green);
      border-color: #fff;
    }
    .tf-toggle-btn.is-on:hover { background: rgba(255,255,255,0.85); }
    .tf-asterisk-btn {
      font-size: 14px;
      padding: 1px 10px;
      letter-spacing: 0;
      line-height: 1;
    }

    /* Banner that appears when prefix mode auto-fired because the term is
       too short to have an exact 7-digit match. */
    .tf-aux-note {
      padding: 8px 18px;
      background: #fffaeb;
      border-bottom: 1px solid #f0e3c7;
      font-family: var(--fam-sans);
      font-size: 12px;
      color: #6e5a1f;
      font-style: italic;
    }
    .tf-aux-empty {
      padding: 18px;
      text-align: center;
      font-family: var(--fam-sans);
      font-size: 13px;
      color: var(--ink-soft);
    }

    ul.results {
      list-style: none;
      margin: 0;
      padding: 6px 18px 10px;
      max-height: 440px;
      overflow-y: auto;
      overflow-x: hidden;
      border-bottom-left-radius: 18px;
      border-bottom-right-radius: 18px;
    }

    /* =================================================================
     * Status vocabulary — each row's status has its own color scheme.
     * Used on BOTH the TF card rows AND (eventually) the local card rows
     * once the real data layer remaps unassigned -> AVAILABLE, etc.
     * ================================================================= */
    .results-card-tf ul.results,
    .results-card-tf ul.results li {
      font-family: var(--fam-narrow);
    }
    .results-card-tf ul.results {
      padding: 10px 14px;
    }
    .results-card-tf ul.results li {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 14px;
      margin: 6px 0;
      border: none;
      border-radius: 10px;
      font-size: 15px;
      letter-spacing: 0.01em;
      line-height: 1.3;
    }
    .results-card-tf ul.results .num {
      font-weight: 700;
      flex: 0 0 auto;
    }
    .results-card-tf ul.results .row-description {
      flex: 1 1 auto;
      color: rgba(0,0,0,0.75);
    }
    .results-card-tf ul.results .row-description a {
      color: inherit;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 2px;
    }
    .results-card-tf ul.results .row-badges {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 5px;
      flex: 0 0 auto;
    }
    /* Status row backgrounds + prefix colors. The status key maps 1:1 to the
       CSS class suffix and badge class (status-inquire, badge-inquire, etc.) */
    .results-card-tf li.status-unavailable { background: #fbe0e0; }
    .results-card-tf li.status-unavailable .num { color: #b14141; }
    .results-card-tf li.status-inquire     { background: #dce8ff; }
    .results-card-tf li.status-inquire     .num { color: #1f3f80; }
    .results-card-tf li.status-available   { background: #cfeccc; }
    .results-card-tf li.status-available   .num { color: #1e5c22; }
    .results-card-tf li.status-backorder   { background: #fce8a8; }
    .results-card-tf li.status-backorder   .num { color: #8a5800; }
    .results-card-tf li.status-premium     { background: #e8d0ef; }
    .results-card-tf li.status-premium     .num { color: #641775; }
    .results-card-tf li.status-true800     { background: #ddcfe8; }
    .results-card-tf li.status-true800     .num { color: #3f0a55; }
    /* Limbo — 833 numbers held by Somos's BR833 admin code since the 2021
       auction. Distinct from regular UNAVAIL because they're a story
       (and a notify-list signup) unto themselves. Cream/amber palette
       so they read as "ambiguous, not red, not green." */
    .results-card-tf li.status-limbo       { background: #fff5e0; }
    .results-card-tf li.status-limbo       .num { color: #6b3a08; }

    /* Pill badges (status, NEWEST, NEW, Notify) */
    .badge-pill {
      display: inline-block;
      padding: 3px 11px;
      border-radius: 999px;
      font-family: var(--fam-sans);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #fff;
      white-space: nowrap;
      line-height: 1;
    }
    /* Orange Notify CTA pill — sits next to status pills */
    .badge-notify {
      background: #f38e1c;
      cursor: pointer;
      border: none;
      padding: 4px 13px;
      transition: background 0.15s;
    }
    .badge-notify:hover { background: #ea580c; }
    /* When Notify is rendered as <a> (limbo rows linking to the 833-request
       page), kill the link defaults so it looks like the <button> form. The
       ul.results selector outranks the generic `ul.results a` color rule. */
    ul.results a.badge-notify-link,
    a.badge-notify-link {
      text-decoration: none;
      color: #fff;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    ul.results a.badge-notify-link:hover,
    a.badge-notify-link:hover {
      color: #fff;
      background: #ea580c;
    }

    /* TF card row layout — applies to both the .tf-notify-row exact-match
       rows AND the prefix-cascade rows (which don't have .tf-notify-row
       because they're not notifyable). Keying off .tf-notify-head directly
       means both row variants get the same flex layout. */
    .tf-notify-head {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
    }
    .tf-notify-head .row-description { flex: 1 1 auto; }
    .tf-notify-head .row-badges { margin-left: auto; flex: 0 0 auto; }
    .tf-notify-row .tf-notify-form {
      display: none;
      gap: 6px;
      margin-top: 8px;
      /* Allow the form to wrap so the Subscribe button doesn't get pushed
         off-screen on narrow viewports. The desktop layout still keeps
         everything on one line because the inputs won't fill, but on a
         phone the inputs go full-width and the button stacks below. */
      flex-wrap: wrap;
    }
    .tf-notify-row .tf-notify-done {
      display: none;
      color: #2e7d32;
      font-family: var(--fam-sans);
      font-size: 12px;
      font-weight: 600;
      padding: 4px 0 0;
    }
    .tf-notify-row .tf-notify-form input {
      flex: 1 1 auto;
      min-width: 80px;
      padding: 6px 12px;
      border: 1px solid rgba(0,0,0,0.15);
      border-radius: 999px;
      font-size: 12px;
      font-family: var(--fam-sans);
    }
    .tf-notify-row .tf-notify-form input[name=first_name] { flex: 0 0 110px; }
    .tf-notify-row .tf-notify-form button {
      background: #f38e1c;
      color: #fff;
      border: none;
      border-radius: 999px;
      padding: 6px 16px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      cursor: pointer;
    }
    .tf-notify-row .tf-notify-form button:hover { background: #ea580c; }
    /* States */
    .tf-notify-row.open .tf-notify-trigger { display: none; }
    .tf-notify-row.open .tf-notify-form    { display: flex; }
    .tf-notify-row.done .tf-notify-trigger { display: none; }
    .tf-notify-row.done .tf-notify-form    { display: none; }
    .tf-notify-row.done .tf-notify-done    { display: block; }
    .badge-date         { background: #7a3030; opacity: 0.85; }
    .badge-newest       { background: #9d6630; }
    .badge-new          { background: #b14141; }
    .badge-unavailable  { background: #c05a5a; }
    .badge-inquire      { background: #2c5aa0; }
    .badge-available    { background: #2e7d32; }
    .badge-backorder    { background: #c9862a; }
    .badge-premium      { background: #7b2d8e; }
    .badge-true800      { background: #5a1a6e; }
    .badge-for-sale     { background: #1f7a4e; }
    /* Requestable pill — VNFS-listed numbers. Same blue as the row's
       status-inquire palette so the pill reads as part of the row's
       visual identity rather than a separate badge. */
    .badge-requestable  { background: #2c5aa0; }
    /* Limbo pill — uses the same brand orange as the Notify pill so the
       STUCK action visually parallels Notify (both "click here for more
       info" CTAs). Easy white-on-orange read; ~3:1 large-text contrast
       which is fine for a pill of this size. */
    .badge-limbo        { background: #f38e1c; }
    /* Limbo badge rendered as <a> — keep the pill chrome but strip the
       link defaults so it reads like the other badge pills. Hover gets a
       small lift to signal it's clickable. The selector uses ul.results
       to outrank the generic `ul.results a { color: var(--ink) }` rule
       elsewhere in this file. */
    ul.results a.badge-limbo-link,
    a.badge-limbo-link {
      text-decoration: none;
      color: #fff;
      cursor: pointer;
      transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
    }
    ul.results a.badge-limbo-link:hover,
    a.badge-limbo-link:hover {
      background: #ea580c;
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 3px 8px rgba(0,0,0,0.18);
    }
    /* Requestable badge rendered as <a> — links to the VanityNumbersForSales
       request form. Same hover-lift treatment as the limbo link, same
       specificity boost so the global ul.results a rule doesn't grey it. */
    ul.results a.badge-requestable-link,
    a.badge-requestable-link {
      text-decoration: none;
      color: #fff;
      cursor: pointer;
      transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
    }
    ul.results a.badge-requestable-link:hover,
    a.badge-requestable-link:hover {
      background: #3973c8;
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 3px 8px rgba(0,0,0,0.18);
    }
    /* On mobile, suppress the redundant "Request from 3rd party vendor"
       row-description for VNFS rows. The Requestable badge alone carries
       the action — same pattern as the STUCK badge for limbo rows. */
    @media (max-width: 600px) {
      .results-card-tf .tf-row-vnfs .row-description { display: none; }
    }
    /* Status pill rendered as <a> — used for Available + Backorder
       (DISCONN/TRANSIT). Same destination as the row-description text,
       same hover-lift treatment as limbo/requestable links. No background
       change on hover because each status_class carries its own color
       and a single hover color would clash with one or the other. */
    ul.results a.badge-status-link,
    a.badge-status-link {
      text-decoration: none;
      color: #fff;
      cursor: pointer;
      transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
    }
    ul.results a.badge-status-link:hover,
    a.badge-status-link:hover {
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 3px 8px rgba(0,0,0,0.18);
      filter: brightness(1.05);
    }
    /* 1-800 HISTORY icon at the right edge of every TF row — links to the
       per-number history page on Resporgs.com. Sized to match the row's
       badge pills; subtle hover lift signals it's clickable. */
    .results-card-tf .tf-history-link {
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
      margin-left: 4px;
      transition: transform 0.12s ease;
    }
    .results-card-tf .tf-history-link img {
      height: 28px;
      width: auto;
      display: block;
    }
    .results-card-tf .tf-history-link:hover { transform: translateY(-1px); }
    /* Description-as-link inside a TF row — use the same color the row's
       .num already has so the link blends with the status palette. */
    .results-card-tf ul.results .row-description a {
      color: inherit;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 2px;
    }
    .results-card-tf ul.results .row-description a:hover {
      text-decoration-thickness: 2px;
    }
    ul.results li {
      padding: 10px 0;
      border-bottom: 1px dashed var(--line-soft);
      font-size: 19px;
      line-height: 1.5;
    }
    ul.results li:last-child { border-bottom: none; }
    ul.results li.unassigned {
      background: #fdf7e8;
      margin: 0 -12px;
      padding-left: 12px;
      padding-right: 12px;
      border-left: 3px solid var(--accent);
    }
    ul.results .carrier-info {
      font-size: 16px;
    }
    /* The carrier name in each result row links to the matching
       NewLocalNumbers.com tier page (HOT / WARM / COLD), color-coded by age
       so the visitor can see at a glance which numbers are worth chasing. */
    ul.results a.carrier-link {
      font-weight: 600;
      text-decoration: none;
      border-bottom: 2px solid transparent;
      padding-bottom: 1px;
      transition: border-color 0.15s, color 0.15s;
    }
    ul.results a.carrier-link.tier-hot     { color: #c0392b; border-bottom-color: #c0392b; }
    ul.results a.carrier-link.tier-warm    { color: #b87a14; border-bottom-color: #f0c977; }
    ul.results a.carrier-link.tier-cold    { color: #5b6573; border-bottom-color: #c8cdd5; }
    ul.results a.carrier-link.tier-unknown { color: #1657c8; border-bottom-color: #b7c9e8; }
    ul.results a.carrier-link:hover { border-bottom-style: solid; border-bottom-width: 2px; opacity: 0.85; }
    ul.results li.exact-match {
      background: #e8f5e9;
      margin: 0 -12px;
      padding-left: 12px;
      padding-right: 12px;
      border-left: 3px solid #2e7d32;
    }
    ul.results li.exact-match .num {
      color: #2e7d32;
    }
    ul.results li.exact-match a {
      color: #2e7d32;
    }
    ul.results li.recent {
      color: #c00;
      text-transform: uppercase;
      font-weight: 600;
      letter-spacing: 0.02em;
    }
    ul.results li.recent a {
      color: #c00;
      text-decoration-color: #c00;
    }
    ul.results li.recent a:hover {
      color: #900;
    }
    ul.results li.recent .digits {
      color: #c00;
      opacity: 0.75;
    }
    ul.results .num {
      font-family: var(--fam-narrow);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.03em;
    }
    /* Letters the user typed that don't fit in the 7-digit dialable window.
       Rendered lowercase + lighter so they read as "extra context, not dialable." */
    ul.results .num-tail {
      font-weight: 400;
      color: var(--ink-soft);
      letter-spacing: 0;
      text-transform: lowercase;
    }
    ul.results .digits {
      color: var(--ink-soft);
      font-size: 14px;
      font-variant-numeric: tabular-nums;
      margin-left: 2px;
    }
    ul.results a {
      color: var(--ink);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 2px;
    }
    ul.results a:hover {
      color: var(--accent);
    }
    ul.results .legacy {
      color: var(--ink-soft);
      font-style: italic;
      font-size: 13px;
    }
    ul.results .tag-unassigned {
      display: inline-block;
      background: var(--accent);
      color: #fff;
      font-family: var(--fam-sans);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 2px 8px;
      border-radius: 2px;
      margin: 0 4px;
      vertical-align: 2px;
    }
    ul.results .scope-note {
      color: var(--ink-soft);
      font-size: 13px;
      font-style: italic;
    }
    ul.results .notify-wrap {
      display: inline-block;
      margin-left: 8px;
      vertical-align: middle;
    }
    ul.results .notify {
      display: inline-block;
      font-family: var(--fam-sans);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--accent);
      text-decoration: none;
      border: 1px solid var(--accent);
      padding: 4px 10px;
      border-radius: 2px;
      white-space: nowrap;
    }
    ul.results .notify:hover {
      background: var(--accent);
      color: #fff;
    }
    ul.results .notify-form {
      display: none;
      gap: 0;
      align-items: stretch;
      border: 1px solid var(--accent);
      border-radius: 2px;
      overflow: hidden;
      vertical-align: middle;
    }
    ul.results .notify-wrap.active .notify-trigger { display: none; }
    ul.results .notify-wrap.active .notify-form { display: inline-flex; }
    ul.results .notify-form input[type=email] {
      border: none;
      outline: none;
      padding: 4px 8px;
      font-family: var(--fam-sans);
      font-size: 13px;
      background: #fff;
      width: 200px;
    }
    ul.results .notify-form button {
      border: none;
      border-left: 1px solid var(--accent);
      background: var(--accent);
      color: #fff;
      font-family: var(--fam-sans);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      padding: 4px 10px;
      cursor: pointer;
    }
    ul.results .notify-form button:hover {
      background: #b57f1a;
    }
    ul.results .notify-scope {
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding: 5px 8px;
      background: #faf8f2;
      border-top: 1px solid rgba(204,153,51,0.3);
    }
    ul.results .notify-scope label {
      font-family: var(--fam-sans);
      font-size: 11px;
      color: var(--ink);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    ul.results .notify-scope input[type=radio] {
      margin: 0;
    }
    ul.results .notify-result {
      display: inline-block;
      font-family: var(--fam-sans);
      font-size: 12px;
      color: var(--good);
      margin-left: 6px;
    }
    ul.results .notify-result.err { color: var(--warn); }

    /* Line-type icons */
    .line-type {
      display: inline-block;
      width: 18px;
      height: 18px;
      vertical-align: -3px;
      margin-right: 5px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      opacity: 0.65;
    }
    /* Rotary phone silhouette — sourced from Bill's small rotary phone icon,
       post-processed to use the standard #555 gray with transparent background
       so it sits cleanly alongside the other .line-type.* icons at 0.65 opacity.
       Reference/editable copy: app/static/icons/phone-rotary.png */
    .line-type.landline {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAASCAYAAAC0EpUuAAACI0lEQVR42o3UO8wOWxQG4Ge+b/wux3EJhUaQiEZOohSFBIVGqCYiGkR0iOYUJyInpxOd6Cg0CplEIlqXRqIkIpFI3OJayB8E/+H7v2807zCGwm72njVrvWutd797FVVVFSgx9n012YvOeYBJx976/WQvYxzHocAG7MNfGMZW4ku+hxgF6CEu4EYHfFCiqet6UlXVEBexFe+SaE4cyySdJMkk36uwE4+wse2sgABexTpMp5qFuIW5nVbHCRxhEz6kwkHs61CU4XQ/1uNVQP5MFZMOzy2/XR7vJ9FnrMBpHBkk4F98wgJMpf0GB/A/XuAZXubfyXRzG4tDzyccQlEG9CZWYwbzcS2g2wM2m8BZvMe2VHoda0PHNJ7WdT1pQff8Qjb7sSWtNbgbSpbgD5zAfzintwYd2bSXsRUfEzBCjZXYEZkdxzwcjN/hTryqqopBB7y9iDPh8Ase4xj24kG4P49LoepJkjf9Sicd3e3CsrRcprVh9hH+xhqcTbVjvE2yH0CbiLzAKbzJeRZL8/8jFuX8Mvb24mZwNMm/gUqrVS5hlOBR+GrC5WVsjv2fgA171ZZ1XTdFVVXtMLmX7DPR6mxe1WvsxvPI7Xxe07v4j7KvjP8P02lhuJwbx6kIfznuREYfUtV0ZwBJAa2Kvol/ELAiVMzrjcH3nZkwzv+pnMvOoGnQtKATXIlj/xH0Z2xbYdHzXdw6lp2gQ73BUfT19xurgK//m66+sXXPvQAAAABJRU5ErkJggg==");
    }
    .line-type.wireless {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M634.9 154.9C457.7-8.1 182.3-8.1 5.1 154.9c-6.8 6.3-7 16.9-.4 23.5l33.9 35.5c6.3 6.6 16.7 6.8 23.3.5 152-141.4 387.2-141.4 539.2 0 6.6 6.3 17 6.1 23.3-.5l33.9-35.5c6.6-6.6 6.4-17.2-.4-23.5zm-256.6 192c-52.8-45.4-131.8-45.4-184.6 0-6.9 5.9-7.2 16.4-1 22.8l86.7 91.5c6.3 6.6 16.7 6.6 23 0l86.7-91.5c6.2-6.4 5.9-16.9-1-22.8zm-128.3-96c88.4-75.2 216.8-75.2 305.2 0 7 6 7.3 16.5.8 22.9l-34.3 35.1c-6.2 6.3-16.3 6.6-22.8.7-66.6-56.8-165-56.8-231.6 0-6.5 5.9-16.6 5.6-22.8-.7l-34.3-35.1c-6.5-6.4-6.2-16.9.8-22.9z' fill='%23555'/%3E%3C/svg%3E");
    }
    .line-type.voip {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-176.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C5.1 367.5-.7 379.1 1.9 390.4l24 104C28.5 505 38.1 512 48 512c256.1 0 464-207.5 464-464 0-9.8-7-19.4-18.6-23.4z' fill='%23555'/%3E%3Ccircle cx='410' cy='80' r='12' fill='%23555'/%3E%3Cpath d='M370 40c22.1 0 42.1 9 56.6 23.4' stroke='%23555' stroke-width='14' fill='none' stroke-linecap='round'/%3E%3Cpath d='M340 10c35.3 0 67.4 14.3 90.5 37.5S468 104.7 468 140' stroke='%23555' stroke-width='14' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    }
    .line-type.pager {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Crect x='32' y='96' width='448' height='320' rx='40' fill='none' stroke='%23555' stroke-width='32'/%3E%3Crect x='72' y='150' width='240' height='100' rx='8' fill='%23555'/%3E%3Ccircle cx='400' cy='200' r='24' fill='%23555'/%3E%3Ccircle cx='400' cy='280' r='24' fill='%23555'/%3E%3Ccircle cx='400' cy='360' r='24' fill='%23555'/%3E%3C/svg%3E");
    }
    .line-type-label {
      font-family: var(--fam-sans);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--ink-soft);
      vertical-align: 1px;
      margin-right: 3px;
    }
    li.recent .line-type-label {
      color: #c00;
    }
    .ac-cities {
      font-family: var(--fam-sans);
      font-size: 12px;
      color: #999;
      font-style: italic;
      margin-top: 2px;
      letter-spacing: 0.01em;
    }
    li.recent .ac-cities {
      color: #c66;
    }

    /* For-sale row — when a result in the Local card matches our orderable
       inventory (or the carousel's source), the row hides the carrier
       attribution entirely and shows a green "Order this number from us →"
       link plus an ORDERABLE pill on the right. The customer should buy
       from us, not back-channel the issuing carrier. Parallels .recent
       (red) styling and the toll-free card's REQUESTABLE pill. */
    li.for-sale {
      background: #e8f5e2;
      border-color: #3a7d2c;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    li.for-sale .num { color: #1e5c22; }
    li.for-sale .for-sale-cta {
      flex: 1 1 auto;
      font-family: var(--fam-sans);
      font-size: 14px;
      font-weight: 600;
      color: #1e5c22;
      text-decoration: underline;
      margin-left: 6px;
    }
    li.for-sale .for-sale-cta:hover { color: #0f3a0f; }
    /* Orderable pill — matches the Requestable pill pattern on the
       toll-free card, but green. Sits at the right edge of the row. */
    .badge-orderable {
      background: #1f7a4e;
      flex: 0 0 auto;
      margin-left: auto;
    }

    .error {
      border: 2px solid var(--warn);
      background: #fff;
      color: var(--warn);
      padding: 16px 20px;
      font-family: var(--fam-sans);
      font-size: 14px;
    }
    .empty {
      text-align: center;
      padding: 30px 20px;
      color: var(--ink-soft);
      font-style: italic;
    }

    /* Three-column layout (Local / Toll Free / Backorder) */
    .columns-wrap {
      margin-top: 32px;
    }
    .columns-title {
      font-family: var(--fam-sans);
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--ink-soft);
      margin-bottom: 10px;
      text-align: center;
    }
    .columns-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 0;
      border: 2px solid var(--line);
      background: #fff;
    }
    .col { border-right: 1px solid var(--line-soft); }
    .col:last-child { border-right: none; }
    .col-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 14px;
      color: #fff;
    }
    .col-header h3 {
      margin: 0;
      font-family: var(--fam-sans);
      font-size: 13px;
      font-weight: 700;
    }
    .col-price {
      font-family: var(--fam-sans);
      font-size: 13px;
      font-weight: 600;
      opacity: 0.9;
    }
    .col-header-local { background: #2c5aa0; }
    .col-header-tf { background: #2c5aa0; }
    .col-header-bo { background: #d48c2e; }
    .col-own {
      font-family: var(--fam-sans);
      font-size: 10px;
      color: var(--ink-soft);
      padding: 4px 14px 6px;
      border-bottom: 1px solid var(--line-soft);
      letter-spacing: 0.02em;
    }
    .col-body {
      max-height: 500px;
      overflow-y: auto;
    }
    .col-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 14px;
      border-bottom: 1px dashed #e8e4dc;
      font-size: 14px;
    }
    .col-row:last-child { border-bottom: none; }
    .col-row:hover { background: #faf8f2; }
    .col-vanity {
      font-weight: 600;
      letter-spacing: 0.01em;
    }
    .col-ac {
      color: var(--ink-soft);
      font-family: var(--fam-sans);
      font-size: 11px;
    }
    .col-bo-price {
      font-family: var(--fam-sans);
      font-size: 12px;
      font-weight: 600;
      color: var(--accent);
    }
    .col-empty {
      padding: 18px 14px;
      color: var(--ink-soft);
      font-size: 13px;
      font-style: italic;
    }
    @media (max-width: 700px) {
      .columns-grid { grid-template-columns: 1fr; }
      .col { border-right: none; border-bottom: 1px solid var(--line-soft); }
      .col:last-child { border-bottom: none; }
    }
    /* =========================================================================
     * Category carousel — rebuilt as floating cards with peek effect.
     *
     * Three groups (Local / Toll Free / Premium) with distinct color systems.
     * Group-jump buttons below animate the carousel one column at a time.
     * Off-screen adjacent columns peek in at reduced scale/opacity so the
     * carousel mechanic is visually apparent, not just an arrow hint.
     * ========================================================================= */

    /* Group color tokens */
    :root {
      --col-green:       #2e7d32;   /* Request from Carrier */
      --col-green-soft:  #e8f5e9;
      --col-yellow:      #f59e0b;   /* Notify me + Backorder */
      --col-yellow-soft: #fef3c7;
      --col-blue:        #2c5aa0;   /* Local/Toll Free For Sale */
      --col-blue-soft:   #e0e9f5;
      --col-lime:        #4caf50;   /* Email-only list */
      --col-lime-soft:   #e8f5e9;
      --col-purple:      #7b2d8e;   /* Premium tiers (all) */
      --col-purple-soft: #f3e8f5;

      --card-radius:     18px;
      --card-shadow:     0 6px 20px -4px rgba(0,0,0,0.10),
                         0 2px 6px  -2px rgba(0,0,0,0.06),
                         inset 0 1px 0 rgba(255,255,255,0.6);
      --card-shadow-hi:  0 12px 28px -6px rgba(0,0,0,0.16),
                         0 4px 10px -3px rgba(0,0,0,0.08),
                         inset 0 1px 0 rgba(255,255,255,0.7);
    }

    .premium-wrap { margin-top: 32px; }
    .premium-title {
      font-family: var(--fam-sans);
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--ink-soft);
      margin-bottom: 14px;
    }

    /* Carousel (and its title + group buttons) breaks out of the 880px
       content container on wider screens — enough to fit 3 columns snugly
       without excessive width that pushes inline buttons away from the text
       they belong to. Rest of the page stays at 880px. */
    @media (min-width: 960px) {
      .columns-wrap {
        width: min(940px, calc(100vw - 40px));
        position: relative;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    @media (min-width: 1280px) {
      .columns-wrap { width: min(1020px, calc(100vw - 40px)); }
    }

    .carousel-outer { position: relative; padding: 6px 0 4px; }
    .carousel-viewport {
      overflow: hidden;
      background: transparent;
      /* generous vertical padding so shadows aren't clipped */
      padding: 8px 0 14px;
    }
    .carousel-track {
      display: flex;
      gap: 16px;
      /* smooth column-to-column transition */
      transition: transform 0.32s cubic-bezier(0.33, 1, 0.68, 1);
    }

    .premium-col {
      /* 3 columns visible + ~12% peek split on each edge */
      flex: 0 0 calc((100% - 48px) / 3);
      min-width: 0;
      background: #fff;
      border-radius: var(--card-radius);
      box-shadow: var(--card-shadow);
      /* overflow:visible so helptip tooltips can extend past column edges;
         individual radii below clip the header / scrolling body as needed. */
      display: flex;
      flex-direction: column;
      transition: transform 0.32s cubic-bezier(0.33, 1, 0.68, 1),
                  opacity   0.32s ease,
                  box-shadow 0.32s ease;
      transform-origin: center center;
    }
    /* Adjacent/off-screen columns render at reduced size + opacity so they
       read as "peeking" — there's more content to scroll to.
       JS toggles `.col-active` on columns currently centered in the viewport. */
    .premium-col:not(.col-active) {
      transform: scale(0.88);
      opacity: 0.60;
      box-shadow: 0 2px 10px -3px rgba(0,0,0,0.08);
    }
    .premium-col.col-active {
      transform: scale(1);
      opacity: 1;
      box-shadow: var(--card-shadow-hi);
    }

    /* Header bars — rounded top corners, colored per group */
    .premium-col-header {
      padding: 10px 14px;
      font-family: var(--fam-sans);
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      letter-spacing: 0.5px;
      border-top-left-radius: var(--card-radius);
      border-top-right-radius: var(--card-radius);
    }
    .premium-col-header .stars { letter-spacing: 1px; }
    .premium-col-header .price {
      font-size: 11px;
      opacity: 0.92;
      white-space: nowrap;
    }
    /* Color system — applied via data-col-type so we stop needing inline styles */
    /* Group-based color system: all Local cols blue, all Toll Free cols green,
       all Premium cols purple. Headers use the same color within a group so
       "group membership" reads instantly. Column titles disambiguate which
       one is which (Request vs Notify vs For Sale, etc.). */
    .premium-col[data-col-type="request"]   .premium-col-header { background: var(--col-blue); }
    .premium-col[data-col-type="notify"]    .premium-col-header { background: var(--col-blue); }
    .premium-col[data-col-type="local"]     .premium-col-header { background: var(--col-blue); }
    .premium-col[data-col-type="tf"]        .premium-col-header { background: var(--col-green); }
    .premium-col[data-col-type="backorder"] .premium-col-header { background: var(--col-green); }
    .premium-col[data-col-type="email"]     .premium-col-header { background: var(--col-green); }
    /* 1800AVAILABLE column — ONE column with stacked category sections inside.
       Each section has its own header, top 5 numbers, and CTA. Visually marks
       the "this is the curated available pool" lane vs notify/etc. */
    .premium-col[data-col-type="avail"] .premium-col-header { background: var(--col-green); }

    .avail-col-body { gap: 0; }
    .avail-section {
      padding: 6px 0;
    }
    .avail-section + .avail-section {
      border-top: 1px dashed #c4cad6;
      margin-top: 6px;
      padding-top: 8px;
    }
    .avail-section-header {
      font-size: 11px;
      color: var(--muted, #5b6573);
      margin-bottom: 4px;
      padding: 2px 6px;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }
    .avail-section-header strong {
      color: #143062;
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0;
      font-size: 12px;
    }
    .avail-section-count {
      font-variant-numeric: tabular-nums;
      color: #c0392b;
      font-weight: 600;
    }
    .premium-row.avail-row {
      padding: 4px 8px;
      border-bottom: 1px solid rgba(0,0,0,0.04);
    }
    .premium-row.avail-row:last-of-type { border-bottom: none; }
    .premium-num.avail-num {
      font-family: var(--fam-mono, Consolas, Menlo, monospace);
      font-weight: 700;
      color: var(--ink, #143062);
      text-decoration: none;
      letter-spacing: 0.3px;
      font-size: 13px;
    }
    .premium-num.avail-num:hover { color: var(--accent, #c0392b); text-decoration: underline; }
    .avail-col-cta {
      display: block;
      margin-top: 6px;
      padding: 6px 8px;
      background: #fff7e6;
      border: 1px solid #f0c977;
      border-radius: 4px;
      color: #815c0d;
      font-size: 11.5px;
      font-weight: 600;
      text-decoration: none;
      text-align: center;
      line-height: 1.35;
    }
    .avail-col-cta:hover { background: #ffeec9; color: #5a3e07; }
    .avail-col-explain {
      margin-top: 10px;
      padding: 6px 8px;
      border-top: 1px solid #e3e7ee;
      font-size: 10.5px;
      color: var(--muted, #5b6573);
      line-height: 1.4;
    }
    /* All premium tiers use purple */
    .star-4 .premium-col-header,
    .star-3 .premium-col-header,
    .star-2 .premium-col-header,
    .star-1 .premium-col-header,
    .star-0 .premium-col-header { background: var(--col-purple); }

    .premium-col-body {
      max-height: 400px;
      overflow-y: auto;
      flex: 1 1 auto;
      border-bottom-left-radius: var(--card-radius);
      border-bottom-right-radius: var(--card-radius);
    }
    .premium-row {
      padding: 6px 14px;
      border-bottom: 1px dashed #e8e4dc;
      font-family: var(--fam-narrow);
      font-size: 15px;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.02em;
    }
    .premium-row:last-child { border-bottom: none; }
    .premium-row:hover { background: #faf8f2; }
    a.premium-num {
      font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--ink);
      text-decoration: none;
    }
    a.premium-num:hover {
      color: var(--accent);
      text-decoration: underline;
    }
    .star-4 a.premium-num,
    .star-3 a.premium-num,
    .star-2 a.premium-num,
    .star-1 a.premium-num,
    .star-0 a.premium-num { color: var(--col-purple); }
    .star-4 a.premium-num:hover,
    .star-3 a.premium-num:hover,
    .star-2 a.premium-num:hover,
    .star-1 a.premium-num:hover,
    .star-0 a.premium-num:hover { color: #5a1a6e; }

    /* Notify-column rows — inline email reveal pattern (no browser prompt) */
    .cat-notify-row {
      padding: 6px 12px;
    }
    .cat-notify-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }
    .cat-notify-word {
      font-family: var(--fam-narrow);
      font-weight: 600;
      letter-spacing: 0.02em;
      font-size: 15px;
    }
    /* Notify action button — brand orange. CTAs across the site are orange so
       the user learns "orange = actionable" regardless of which column. */
    .notify-btn {
      font-family: var(--fam-sans);
      font-size: 10px;
      font-weight: 600;
      padding: 3px 10px;
      border: 1px solid #f38e1c;
      background: #fff7ed;
      color: #9a5a0c;
      border-radius: 999px;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.15s, color 0.15s;
    }
    .notify-btn:hover {
      background: #f38e1c;
      color: #fff;
    }
    /* Hidden inline email form — shown when the Notify button is clicked */
    .cat-notify-form {
      display: none;
      gap: 4px;
      margin-top: 6px;
    }
    .cat-notify-form input {
      flex: 1 1 auto;
      min-width: 0;
      padding: 5px 9px;
      font-size: 12px;
      border: 1px solid var(--line-soft);
      border-radius: 999px;
    }
    .cat-notify-form button {
      background: #f38e1c;
      color: #fff;
      border: none;
      border-radius: 999px;
      padding: 5px 11px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      cursor: pointer;
    }
    .cat-notify-form button:hover { background: #ea580c; }
    .cat-notify-done {
      display: none;
      color: var(--col-green);
      font-size: 12px;
      font-weight: 600;
      padding: 2px 0;
    }
    /* Active states */
    .cat-notify-row.open .cat-notify-trigger { display: none; }
    .cat-notify-row.open .cat-notify-form    { display: flex; }
    .cat-notify-row.done .cat-notify-head    { display: none; }
    .cat-notify-row.done .cat-notify-form    { display: none; }
    .cat-notify-row.done .cat-notify-done    { display: block; }

    /* Email-only column content */
    .email-col-body { padding: 14px; text-align: center; }
    .email-col-count {
      font-family: var(--fam); font-size: 32px; font-weight: 700;
      color: var(--col-green); line-height: 1; margin-bottom: 4px;
    }
    .email-col-count-label {
      font-family: var(--fam-sans); font-size: 11px;
      text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--ink-soft); margin-bottom: 12px;
    }
    .email-col-teaser {
      margin: 10px 0; text-align: left;
    }
    .email-col-teaser .teaser-row {
      padding: 3px 8px; font-size: 14px; font-weight: 600;
      color: #777; letter-spacing: 0.04em;
      font-variant-numeric: tabular-nums;
      font-family: var(--fam);
    }
    .email-col-explain {
      font-size: 11.5px; line-height: 1.5;
      color: var(--ink-soft); margin: 10px 4px;
    }
    .email-col-form { display: flex; gap: 6px; margin-top: 8px; }
    .email-col-form input {
      flex: 1; min-width: 0;
      padding: 7px 10px;
      font-size: 12px;
      border: 1px solid var(--line-soft);
      border-radius: 999px;
    }
    .email-col-form button {
      background: #f38e1c;
      color: #fff;
      border: none;
      border-radius: 999px;
      padding: 7px 14px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      cursor: pointer;
    }
    .email-col-form button:hover { background: #ea580c; }

    /* Wildcard result status colors (unchanged behavior) */
    .wc-spare { background: #e8f5e9; }
    .wc-spare a { color: #2e7d32; }
    .wc-disconn { background: #fff8e1; }
    .wc-disconn a { color: #f57f17; }
    .wc-transit { background: #fff8e1; }
    .wc-transit a { color: #f57f17; }
    .wc-col-header { background: #3a6b35; }
    .wc-status {
      font-family: var(--fam-sans);
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      opacity: 0.7;
      margin-left: 4px;
    }
    .wc-hint { border-bottom: 1px dotted var(--accent); }

    /* Carousel arrows — rounded pill buttons, brand orange */
    .carousel-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 42px; height: 42px;
      border-radius: 50%;
      border: none;
      background: #fff;
      color: var(--ink);
      font-size: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3;
      box-shadow: 0 4px 12px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.06);
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .carousel-arrow:hover {
      transform: translateY(-50%) scale(1.06);
      box-shadow: 0 6px 16px rgba(243,142,28,0.25), 0 2px 4px rgba(0,0,0,0.08);
    }
    .carousel-arrow.hidden { display: none; }
    .carousel-arrow-left  { left: -14px; }
    .carousel-arrow-right { right: -14px; }

    /* On touch screens, arrows are still useful as an explicit affordance,
       but most users will swipe — bump tap target above the 44px minimum
       and add a small "swipe" hint underneath the carousel. */
    @media (max-width: 600px) {
      .carousel-arrow { width: 48px; height: 48px; font-size: 22px; }
      .carousel-arrow-left  { left: 4px; }
      .carousel-arrow-right { right: 4px; }
      .carousel-swipe-hint {
        text-align: center;
        font-family: var(--fam-sans);
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-soft);
        margin-top: 4px;
        opacity: 0.7;
      }
    }
    .carousel-swipe-hint { display: none; }
    @media (max-width: 600px) {
      .carousel-swipe-hint { display: block; }
    }

    /* Group-jump buttons beneath the carousel */
    .group-buttons {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 14px;
      flex-wrap: wrap;
    }
    .group-btn {
      font-family: var(--fam-sans);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 10px 22px;
      border-radius: 999px;
      border: 2px solid transparent;
      background: #fff;
      color: var(--ink);
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.2s, background 0.2s, color 0.2s;
      box-shadow: 0 3px 10px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.7);
    }
    .group-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 14px rgba(0,0,0,0.12);
    }
    .group-btn:active { transform: translateY(0); }

    /* Mobile layout for the group-jump buttons. Three equal columns so
       Local / Toll Free / Premium fit on a single row at 375px instead of
       wrapping to two asymmetric rows. The helptip "?" inside each button
       is hidden — the carousel itself plus the column titles already
       explain what's there, and the helptip's hover-only tooltip eats
       precious horizontal space at narrow widths. */
    @media (max-width: 600px) {
      .group-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 6px;
        flex-wrap: nowrap;
      }
      .group-btn {
        font-size: 11px;
        padding: 11px 6px;
        letter-spacing: 0.03em;
        min-height: 44px;
      }
      .group-btn .helptip { display: none; }
      .group-btn .group-btn-suffix { display: none; }
    }
    .group-btn.group-local    { border-color: var(--col-blue);   color: var(--col-blue);   }
    .group-btn.group-tollfree { border-color: var(--col-green);  color: var(--col-green);  }
    .group-btn.group-premium  { border-color: var(--col-purple); color: var(--col-purple); }
    .group-btn.group-local.is-active    { background: var(--col-blue);   color: #fff; }
    .group-btn.group-tollfree.is-active { background: var(--col-green);  color: #fff; }
    .group-btn.group-premium.is-active  { background: var(--col-purple); color: #fff; }

    /* Carousel dots — tap targets for jumping directly to a column */
    .carousel-dots {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-top: 18px;
    }
    .carousel-dot {
      width: 14px; height: 14px;
      border-radius: 50%;
      /* Background set inline by JS based on column group color
         (blue for Local, green for TF, purple for Premium). */
      background: var(--line-soft);
      cursor: pointer;
      border: none;
      padding: 0;
      opacity: 0.40;
      transition: opacity 0.18s, transform 0.18s;
    }
    .carousel-dot:hover {
      opacity: 0.75;
      transform: scale(1.15);
    }
    .carousel-dot.active {
      opacity: 1;
      transform: scale(1.15);
    }

    @media (max-width: 780px) {
      .premium-col { flex: 0 0 calc((100% - 16px) / 2); }
      .premium-col:not(.col-active) { transform: scale(0.92); opacity: 0.7; }
    }
    @media (max-width: 540px) {
      .premium-col { flex: 0 0 82%; }
      .premium-col:not(.col-active) { transform: scale(0.94); opacity: 0.8; }
    }

    footer {
      text-align: center;
      font-family: var(--fam-sans);
      font-size: 11px;
      color: var(--ink-soft);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-top: 60px;
      padding-top: 20px;
      border-top: 1px solid var(--line-soft);
    }
    @media (max-width: 600px) {
      form.lookup { gap: 8px; }
      form.lookup input[type=text] { font-size: 18px; padding: 12px 16px; }
      form.lookup button { padding: 10px 14px; font-size: 12px; letter-spacing: 0.1em; }
    }

    /* ---- Status badge icon swap ----
       Long status labels ("Unavailable") get an icon alternative on mobile
       to free up space against the carrier name. The same .badge-pill keeps
       its background color so the row's status is still color-coded; only
       the contents change. */
    .badge-pill .badge-icon {
      display: none;
      width: 40px;
      height: 40px;
      vertical-align: middle;
    }
    @media (max-width: 600px) {
      .badge-can-iconize .badge-text { display: none; }
      .badge-can-iconize .badge-icon { display: inline-block; }
      /* Drop the pill's background since the icon's red triangle carries
         the "unavailable" signal; an additional pill background reads as
         visual noise next to it. */
      .badge-can-iconize {
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none;
      }
    }

    /* ---- Notify-button icon swap ----
       Desktop: text label ("Notify"). Mobile: a small envelope/alert icon
       in place of the text — same button, more compact, less competition for
       horizontal space against the row-description. */
    .badge-notify .notify-icon {
      display: none;
      width: 18px;
      height: 18px;
      vertical-align: middle;
    }

    /* ---- Notify form (mobile) ----
       Stack inputs full-width with Subscribe filling the row below. Without
       this the inline-flex form (110px first-name + email + button + gaps)
       overflows past the right edge of a 375px viewport and the user can't
       reach the Subscribe button. */
    @media (max-width: 600px) {
      .tf-notify-row .tf-notify-form {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }
      .tf-notify-row .tf-notify-form input,
      .tf-notify-row .tf-notify-form input[name=first_name] {
        flex: 1 1 100%;
        min-width: 0;
        padding: 10px 14px;
        font-size: 14px;
      }
      .tf-notify-row .tf-notify-form button {
        flex: 1 1 100%;
        padding: 12px 16px;
        font-size: 13px;
        min-height: 44px;
      }

      /* Helptip "?" — keep the visible glyph small but extend the tap
         target via padding. Pseudo-element sizing stays the same since
         the absolute-positioned ::after/::before don't depend on the
         tip's box. */
      .helptip {
        width: 26px;
        height: 26px;
        font-size: 14px;
        margin-left: 4px;
        margin-right: 0;
      }

      /* TF row tap targets — Notify icon button + history icon link
         need to be at least 44px in their tap dimension. */
      .results-card-tf ul.results .badge-notify {
        min-width: 44px;
        min-height: 44px;
        padding: 8px 10px;
      }
      .results-card-tf ul.results .badge-notify .notify-icon {
        width: 22px;
        height: 22px;
      }
      .results-card-tf ul.results .tf-history-link {
        min-width: 36px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
      }
      .results-card-tf ul.results .tf-history-link img {
        max-height: 32px;
        width: auto;
      }
      /* Tighten the row-badges gap so the icons sit close to each other
         and the row-description gets maximum width. */
      .results-card-tf ul.results .row-badges {
        gap: 2px;
      }
    }

    /* ---- Row description on the toll-free card ----
       Above ~600px the prefix ("In use with " / "Reserved for a customer of")
       reads naturally. Below it eats too much horizontal space against the
       carrier name; drop it and let the carrier carry the meaning. The
       Notify button collapses to icon-only at the same breakpoint. */
    @media (max-width: 600px) {
      .results-card-tf ul.results .row-prefix { display: none; }
      .results-card-tf ul.results .row-main { font-weight: 600; }
      .badge-notify .notify-text { display: none; }
      .badge-notify .notify-icon { display: inline-block; }
      .badge-notify {
        /* Tighten padding so the icon button isn't oversized for its glyph */
        padding: 4px 8px;
        line-height: 0;
      }
    }