body {
    font-family: "arial", sans-serif;
    background: url('/images/gradient_background.gif') fixed;
}
td {
    font-family: "arial", sans-serif;
}
.link {
    font-family: "arial", sans-serif;
    color: FFFFFF;
}
a:link, a:visited, a:active {
    font-family: "arial", sans-serif;
}
body, table, input, select {
    font-family: "arial", sans-serif;
    font-size: 3.5mm;
    font-weight: normal;
}
.head_left {
    color: 000000;
}
.head_right {
    color: 000000;
}
.big_button {
    background-color: dddd00;
}
.table_head {
    background-color: cccccc;
}
.control1 {
    width:200px;

}
.control2 {
    width:100px;

}
.Text {
    font-family: Arial,Helvetica,sans-serif;
    color: 000000;
}
.YourState {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
}
.ChooseStateLink {
    font-family: Arial;
    font-size: 11px;
}
.navLink {
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    color: #E4E4FE;
}
.navLinkSelected {
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    color: #FFFFFF;
}
.navLink:hover {
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    color: #FFFFFF;
}

/* =====================================================================
   2026-04-29 Visual Refresh — Airy Blue (AJet-inspired)
   Cool icy-blue background, royal blue accents, pill-rounded buttons,
   Inter typography throughout. Append-only — to roll back, delete
   this entire block.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --cr-primary: #1E5BC6;          /* royal blue */
    --cr-primary-hover: #1547A1;    /* deeper royal blue on hover */
    --cr-primary-soft: rgba(30, 91, 198, 0.10);
    --cr-dark: #0F172A;             /* dark navy text */
    --cr-text-soft: #475569;        /* secondary text */
    --cr-bg: #EAF2FB;               /* icy blue page background */
    --cr-bg-soft: #F4F8FD;          /* lighter blue accent fill */
    --cr-bg-deeper: #DCE7F5;        /* table-head fill */
    --cr-card: #FFFFFF;
    --cr-border: rgba(15, 23, 42, 0.08);
    --cr-font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --cr-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --cr-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
}

/* ---- Page background + body type ---- */
body {
    background: var(--cr-bg) !important;
    background-image: none !important;  /* override the 2007 gradient gif */
    font-family: var(--cr-font-body) !important;
    color: var(--cr-dark) !important;
    font-size: 14px !important;  /* override 3.5mm */
}
body, table, td, input, select, textarea, .Text {
    font-family: var(--cr-font-body) !important;
    color: var(--cr-dark);
}

/* ---- Headings: bold sans-serif, no serif ---- */
h1, h2, h3, h4 {
    font-family: var(--cr-font-body) !important;
    font-weight: 700 !important;
    color: var(--cr-dark) !important;
    letter-spacing: -0.01em;
    margin-top: 0.6em;
}
h1 { font-size: 1.85rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }

/* ---- Links ---- */
a:link, a:visited, a:active {
    color: var(--cr-primary);
    text-decoration: none;
    transition: color 0.15s;
}
a:hover {
    color: var(--cr-primary-hover);
    text-decoration: underline;
}

/* ---- Override the dated inline HTML bgcolors ---- */
/* Top nav band (was navy #33348E) → white */
td[bgcolor="#33348E"] {
    background-color: var(--cr-card) !important;
    border-bottom: 1px solid var(--cr-border);
}
/* Sub-nav band (was red #CB2229) → royal blue */
td[bgcolor="#CB2229"] {
    background-color: var(--cr-primary) !important;
}
/* Page heading red banner (was #CC0000) → royal blue */
td[bgcolor="#CC0000"], table[bgcolor="#CC0000"] td {
    background-color: var(--cr-primary) !important;
}
/* Search results blue banner (was #0000CC) → royal blue */
td[bgcolor="#0000CC"] {
    background-color: var(--cr-primary) !important;
}
/* Pink action cells (was #FFCCCC) → soft blue tint */
td[bgcolor="#FFCCCC"] {
    background-color: var(--cr-bg-soft) !important;
}
/* Periwinkle (was #CCCCFF) → soft blue tint */
td[bgcolor="#CCCCFF"] {
    background-color: var(--cr-bg-soft) !important;
}
/* Pale yellow (was #FFFFCC) → soft blue tint */
td[bgcolor="#FFFFCC"] {
    background-color: var(--cr-bg-soft) !important;
}
/* Light grey rows (was #CCCCCC) → deeper blue tint */
tr[bgcolor="#CCCCCC"] > td,
td[bgcolor="#CCCCCC"] {
    background-color: var(--cr-bg-deeper) !important;
}
/* Darker grey table head (was #DDDDDD) */
th[bgcolor="#DDDDDD"], td[bgcolor="#DDDDDD"] {
    background-color: var(--cr-bg-deeper) !important;
}
/* White-on-banner text legibility */
td[bgcolor="#0000CC"] font[color="white"],
td[bgcolor="#CC0000"] font[color="white"],
td[bgcolor="#33348E"] font[color="white"],
td[bgcolor="#CB2229"] font[color="white"] {
    color: #fff !important;
}
/* But the top nav is now WHITE, so any white text inside it needs to flip to dark */
td[bgcolor="#33348E"] font[color="white"],
td[bgcolor="#33348E"] font[color="#FFFFFF"] {
    color: var(--cr-dark) !important;
}

/* ---- Table head class ---- */
.table_head {
    background-color: var(--cr-bg-deeper) !important;
    font-family: var(--cr-font-body) !important;
    font-weight: 600;
    color: var(--cr-dark);
    padding: 10px 8px;
    font-size: 13px;
}
.table_head a {
    color: var(--cr-dark) !important;
    text-decoration: none;
    font-weight: 600;
}
.table_head a:hover {
    color: var(--cr-primary) !important;
}

/* ---- Hide leftover corner GIFs from the original navy/red nav frame ---- */
img[src*="nav_top_left"],
img[src*="nav_top_right"],
img[src*="nav_bottom_left"],
img[src*="nav_bottom_right"] {
    display: none !important;
}

/* ---- Nav links: top bar (white bg, dark text) ---- */
.navLink {
    font-family: var(--cr-font-body) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--cr-dark) !important;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    text-decoration: none;
    transition: color 0.15s, background-color 0.15s;
    display: inline-block;
    white-space: nowrap;
}
/* Selected state: bold + primary blue, no background pill */
.navLinkSelected {
    font-family: var(--cr-font-body) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--cr-primary) !important;
    background-color: transparent !important;
    padding: 0.4rem 0.5rem;
    text-decoration: none;
    display: inline-block;
    white-space: nowrap;
    position: relative;
}
.navLink:hover {
    font-size: 13px !important;
    background-color: transparent !important;
    color: var(--cr-primary) !important;
}

/* ---- Nav links: sub-nav (blue bg, white text) ---- */
td[bgcolor="#CB2229"] {
    padding: 4px 0 !important;
}
td[bgcolor="#CB2229"] .navLink {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500 !important;
}
td[bgcolor="#CB2229"] .navLinkSelected {
    color: #fff !important;
    font-weight: 700 !important;
    background-color: transparent !important;
}
td[bgcolor="#CB2229"] .navLink:hover {
    color: #fff !important;
    background-color: transparent !important;
}

/* ---- Page-state widget (top-right "Your state is UT (Change)") ---- */
.YourState {
    font-family: var(--cr-font-body) !important;
    font-size: 13px !important;
    font-weight: 500;
    color: var(--cr-text-soft);
    letter-spacing: 0;
}
.ChooseStateLink {
    font-family: var(--cr-font-body) !important;
    font-size: 12px !important;
    color: var(--cr-primary) !important;
    text-decoration: underline;
}

/* ---- Form controls: rounded inputs with soft focus ring ---- */
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="tel"], input[type="number"],
select, textarea {
    border: 1px solid var(--cr-border) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-family: var(--cr-font-body) !important;
    font-size: 14px;
    background-color: #fff;
    color: var(--cr-dark);
    transition: border-color 0.15s, box-shadow 0.15s;
}
input[type="text"]:focus, input[type="search"]:focus,
input[type="email"]:focus, input[type="password"]:focus,
select:focus, textarea:focus {
    outline: none;
    border-color: var(--cr-primary) !important;
    box-shadow: 0 0 0 3px rgba(30, 91, 198, 0.15) !important;
}

/* ---- Buttons: pill-shaped capsules ---- */
input[type="submit"], input[type="button"], button {
    background-color: var(--cr-primary) !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 28px !important;
    font-family: var(--cr-font-body) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    letter-spacing: 0;
    text-transform: none;
    border-radius: 999px !important;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(30, 91, 198, 0.20);
    transition: background-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover {
    background-color: var(--cr-primary-hover) !important;
    box-shadow: 0 4px 14px rgba(30, 91, 198, 0.30);
}
input[type="submit"]:active, input[type="button"]:active, button:active {
    transform: translateY(1px);
}

/* ---- big_button class (legacy) ---- */
.big_button {
    background-color: var(--cr-primary) !important;
    color: #fff !important;
    font-family: var(--cr-font-body);
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    padding: 10px 24px;
    box-shadow: 0 2px 8px rgba(30, 91, 198, 0.20);
}

/* ---- Result row hover (search results / rankings) ---- */
tr[bgcolor="#CCCCCC"] > td {
    transition: background-color 0.15s;
}
tr[bgcolor="#CCCCCC"]:hover > td {
    background-color: #CFE0F2 !important;
}
/* Company name link inside result rows — bolder, blue, underline on hover */
tr[bgcolor="#CCCCCC"] a {
    color: var(--cr-primary) !important;
    font-weight: 600;
    transition: color 0.15s;
}
tr[bgcolor="#CCCCCC"] a:hover {
    color: var(--cr-primary-hover) !important;
    text-decoration: underline;
}

/* ---- Score cells (Price/Quality/Service/Overall) — center, mono-tabular ---- */
tr[bgcolor="#CCCCCC"] > td[align="center"] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--cr-dark);
}

/* ---- "Rate Me" cell — give it room and a subtle hover ---- */
tr[bgcolor="#CCCCCC"] > td[bgcolor="#FFCCCC"] {
    padding: 6px 8px;
}
tr[bgcolor="#CCCCCC"] > td[bgcolor="#FFCCCC"] a img {
    transition: transform 0.15s, opacity 0.15s;
    border-radius: 4px;
}
tr[bgcolor="#CCCCCC"] > td[bgcolor="#FFCCCC"] a:hover img {
    transform: scale(1.05);
    opacity: 0.9;
}

/* ---- Search results title banner ("Search Results" red bar) ---- */
table[bgcolor="#CC0000"] {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--cr-shadow-sm);
    margin: 16px 0 8px 0;
}
table[bgcolor="#CC0000"] td {
    padding: 12px 18px !important;
}
table[bgcolor="#CC0000"] font {
    font-family: var(--cr-font-body) !important;
    font-weight: 700 !important;
    letter-spacing: 0;
}

/* ---- Generic "white card" treatment for content sections ---- */
/* The 820px outer table doesn't get this — but main content tables do */
table[width="100%"][cellpadding="2"] {
    background-color: var(--cr-card);
    border-radius: 12px;
    box-shadow: var(--cr-shadow-sm);
    overflow: hidden;
}

/* ---- Form labels and helper text ---- */
b, strong {
    font-weight: 600;
    color: var(--cr-dark);
}

/* ---- Italics in result info (city names) — softer color ---- */
i, em {
    color: var(--cr-text-soft);
    font-style: normal;
    font-weight: 500;
    font-size: 0.9em;
}

/* ---- Bullets / inline glyphs cleanup ---- */
font[face="Times, serif"] {
    color: var(--cr-text-soft) !important;
    margin: 0 4px;
}

/* ---- Default font cleanup for legacy <font> tags ---- */
font {
    font-family: var(--cr-font-body) !important;
}

/* ===== Homepage search section: red → dark navy card ===== */

/* The center rectangle (set via #id in search.css) */
#keyword_section_wrapper {
    background-color: var(--cr-primary) !important;
    border-radius: 12px;
    box-shadow: var(--cr-shadow-md);
    height: 200px !important;  /* slightly taller for balanced spacing */
}

/* Hide the red GIF wedges that flank the center rectangle */
img[src*="new_arrow_smaller.gif"],
img[src*="new_arrow_smaller_left.gif"],
img[src*="new_arrow.gif"] {
    display: none !important;
}

/* Re-balance the absolutely-positioned children so spacing is even */
#county_selector_wrapper {
    background-image: none !important;
    background-color: transparent !important;
    top: 18px !important;
    left: 18px !important;
    right: 18px !important;
    width: auto !important;
    height: auto !important;
}
#county_selector {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
}
#keyword_search_section_wrapper {
    top: 70px !important;
    left: 18px !important;
    right: 18px !important;
    width: auto !important;
}
#keyword_search_section_title {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 6px;
}
#keyword_search_field {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 15px !important;  /* less giant than the original 20px */
    font-weight: 500 !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
}
#keyword_search_button {
    font-size: 13px !important;
    padding: 8px 22px !important;
}
#advanced_search_link_wrapper {
    margin-top: 14px !important;
}
#advanced_search_link {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 12px !important;
    text-decoration: underline;
}
#advanced_search_link:hover {
    color: #fff !important;
}

/* Advanced search red cells (HTML uses bgcolor=cc0000 lowercase, no #) */
td[bgcolor="cc0000" i],
td[bgcolor="#cc0000" i] {
    background-color: var(--cr-primary) !important;
}

/* Inline broken style="background-color:cc0000" on the topic selects */
select[style*="cc0000"] {
    background-color: var(--cr-primary) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Red <font color=cc0000> text (e.g., "(optional)" labels) */
font[color="cc0000" i],
font[color="#cc0000" i],
font[color="#CC0000"] {
    color: var(--cr-primary) !important;
    font-weight: 500;
}

/* =====================================================================
   Mobile-light optimizations (best we can do without viewport meta)
   The page is fundamentally 820px fixed width — phones will see it
   zoomed-out. These styles improve what's visible.
   ===================================================================== */

@media (max-width: 600px) {
    body {
        font-size: 15px !important;
    }
    body, table, td, input, select, textarea, .Text {
        font-size: 15px;
    }
    /* Bigger tap targets */
    .navLink, .navLinkSelected {
        padding: 0.6rem 1rem !important;
        font-size: 15px !important;
    }
    input[type="submit"], input[type="button"], button {
        padding: 12px 32px !important;
        font-size: 15px !important;
    }
    input[type="text"], input[type="search"], input[type="email"],
    input[type="password"], select, textarea {
        padding: 12px 16px !important;
        font-size: 16px;  /* prevent iOS zoom-on-focus */
    }
    /* Result row spacing */
    tr[bgcolor="#CCCCCC"] > td {
        padding: 8px 6px !important;
    }
    /* Headings smaller on mobile */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.05rem; }
}

/* =====================================================================
   2026-04-30 — Edge-to-edge layout
   The outermost wrapper is <table width="820" align="center"> directly
   under <body> (header.inc.php:61). The body rows below the nav span
   the full table via colspan="3", so widening the outer table cascades
   to the content area. CSS-only — does not touch PHP.
   ===================================================================== */

body > table[width="820"][align="center"] {
    width: 100% !important;
    max-width: 1320px !important;  /* keeps lines readable on huge monitors */
    margin: 0 auto !important;
}

/* Side breathing room so content doesn't kiss the viewport edges */
body {
    padding: 0 24px;
    box-sizing: border-box;
}
@media (max-width: 600px) {
    body {
        padding: 0 8px;
    }
}

/* Inner content tables that hardcode width="100%" already stretch.
   Some legacy result tables hardcode width="820" or width="780" — let
   those grow too, but cap at the wrapper's max so they don't overflow. */
body table[width="820"]:not([align="center"]),
body table[width="780"],
body table[width="800"] {
    width: 100% !important;
    max-width: 100% !important;
}

/* The 559px nav band stays its native size on the right of the logo —
   it's a hardcoded grid of 5 nav buttons. On screens wider than 820
   the new free space appears between the logo and the nav band, which
   visually balances the new wide layout. No further override needed. */

/* ===== end 2026-04-30 edge-to-edge layout ===== */

/* =====================================================================
   2026-04-30 — Popular Categories panel: light gray → royal blue card
   Matches the keyword search box styling so the homepage reads as two
   coordinated blue cards instead of a blue card next to a dated gray
   block. CSS-only — overrides search.css (#popular_categories).
   ===================================================================== */

#popular_categories {
    background-color: var(--cr-primary) !important;
    border-radius: 12px !important;
    box-shadow: var(--cr-shadow-md);
    padding: 20px 24px !important;
    color: #fff;
}

#popular_categories h3 {
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
    margin-top: 4px;
    margin-bottom: 16px !important;
    padding-bottom: 8px !important;
    font-size: 1.15rem;
}

/* Top-level category links: white, semibold */
#popular_categories .top a,
#popular_categories .top a:link,
#popular_categories .top a:visited {
    color: #fff !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.15s, text-decoration 0.15s;
}
#popular_categories .top a:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

/* Sub-category links: lighter, smaller, comma-separated lists */
#popular_categories .subs {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9em;
}
#popular_categories .subs a,
#popular_categories .subs a:link,
#popular_categories .subs a:visited {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
    transition: color 0.15s, text-decoration 0.15s;
}
#popular_categories .subs a:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

/* The county selector floats top-right inside the panel — keep it
   readable on the blue background by leaving the global select styles
   (white bg + dark text) intact. Just give it a soft white outline. */
#popular_categories #category_county_selector {
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* ===== end 2026-04-30 popular categories blue card ===== */

/* =====================================================================
   2026-04-30 — Light-gray (#F5F5F5) → royal blue, sitewide
   Catches the Advanced Search step labels in index.php and search.php
   ("1.", "Select a Topic", "Narrow your Topic", etc.). Adjacent control
   cells are already blue (was #cc0000), so each step row now reads as
   a single coordinated blue band instead of gray-and-red stripes.
   ===================================================================== */

td[bgcolor="#F5F5F5" i] {
    background-color: var(--cr-primary) !important;
    color: #fff !important;
}
td[bgcolor="#F5F5F5" i] b,
td[bgcolor="#F5F5F5" i] strong {
    color: #fff !important;
    font-weight: 600;
}
/* "(optional)" hint inside the label cell was red (#cc0000) — already
   remapped to royal blue by an earlier rule, but on a blue cell it
   would disappear. Lift it to translucent white so it's still legible. */
td[bgcolor="#F5F5F5" i] font[color="cc0000" i],
td[bgcolor="#F5F5F5" i] font[color="#cc0000" i] {
    color: rgba(255, 255, 255, 0.80) !important;
    font-weight: 500;
}

/* ===== end 2026-04-30 light-gray → blue sitewide ===== */

/* =====================================================================
   2026-04-30 — Hide the per-row View Map button (CSS only)
   The button is rendered at display.inc.php:521 as
     <td bgcolor=#FFCCCC><a href=".../map.php..."><img src=".../view_map.gif"></a></td>
   Removing it via PHP edit crashed the site on 2026-04-28, so we hide
   the entire <td> via :has() and let the colspan=2 "..." header above
   collapse to one column. view_map.gif is unique to this spot, so the
   selector cannot match anything else.
   ===================================================================== */

td:has(> a > img[src*="view_map.gif"]) {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Belt-and-suspenders: if a browser doesn't support :has(), hide just
   the image so the button is at least invisible (cell would remain). */
a > img[src*="view_map.gif"] {
    display: none !important;
}

/* ===== end 2026-04-30 hide view map button ===== */

/* =====================================================================
   2026-04-30 — Fill homepage content cards + real mobile stack
   The outer wrapper is now edge-to-edge, but the keyword search box
   (363px) and Popular Categories panel (440px) have hardcoded widths
   in includes/css/search.css that leave huge empty space on the right.
   Stretch them to fill, cap the keyword card so it doesn't get absurdly
   wide on big monitors, and on mobile drop the 200px float so cards
   fill the full viewport.
   ===================================================================== */

/* The keyword search column has margin-left:200px to clear the floated
   "Get Paid" sidebar. Let its inner card stretch to fill the rest. */
#keyword_search {
    margin-right: 0;
}
#keyword_search_inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
#keyword_search_inner > form > table {
    width: 100% !important;
}
#keyword_section_wrapper {
    width: 100% !important;
    max-width: 720px !important;
    /* keep height balanced with content */
    height: 200px !important;
}

/* Popular Categories: fill the available width to the right edge */
#popular_categories {
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box;
    margin-right: 0 !important;
}

/* The two-column layout inside Popular Categories used a fixed 230px
   left column. Let it grow proportionally so categories don't bunch. */
#popular_categories > table[align="center"] {
    width: 100% !important;
}
#popular_categories > table[align="center"] > tbody > tr > td[width="230"] {
    width: 50% !important;
}
#popular_categories > table[align="center"] > tbody > tr > td:not([width]) {
    width: 50% !important;
}

/* ---- Mobile breakpoint: stack the Get Paid sidebar above content ---- */
@media (max-width: 720px) {
    /* The "Get Paid for Your Opinion" sidebar floats left at 200px.
       On mobile, drop the float and let it sit centered above. */
    body div[style*="float: left"][style*="width: 200px"] {
        float: none !important;
        width: 100% !important;
        text-align: center;
        padding-top: 16px !important;
        padding-bottom: 8px !important;
    }
    /* Now that the float is gone, drop the 200px left offset on the
       keyword search and categories so they fill the viewport. */
    #keyword_search,
    #popular_categories {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #popular_categories {
        margin-top: 24px !important;
        padding: 16px !important;
    }
    /* Categories stack to one column on small screens */
    #popular_categories > table[align="center"] > tbody > tr {
        display: block;
    }
    #popular_categories > table[align="center"] > tbody > tr > td {
        display: block !important;
        width: 100% !important;
    }
    /* The keyword search box also gets shorter padding */
    #keyword_section_wrapper {
        max-width: 100% !important;
    }
}

/* ===== end 2026-04-30 fill homepage cards + mobile stack ===== */

/* =====================================================================
   2026-04-30 — Real-mobile header layout
   With the viewport meta tag now in header.inc.php, phones render at
   actual device width (~390px). The header table's hardcoded widths
   (245 logo + 16 spacer + 559 nav = 820) would overflow. Stack the
   logo on top and let the nav band scale to viewport width below it.
   ===================================================================== */

@media (max-width: 720px) {
    /* Stack the top row: logo above, nav band below */
    body > table[width="820"] > tbody > tr:first-child > td {
        display: block !important;
        width: 100% !important;
        text-align: center;
        padding: 4px 0;
    }
    /* Hide the 16px spacer cell — vertical stack doesn't need it */
    body > table[width="820"] > tbody > tr:first-child > td[width="16"] {
        display: none !important;
    }
    /* Logo: shrink + center */
    body > table[width="820"] img[src*="2007_companyrank_logo"] {
        width: 200px !important;
        height: auto !important;
    }
    /* Inner nav table (width=559) fills viewport */
    body > table[width="820"] table[width="559"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    body > table[width="820"] table[width="559"] td[width="541"] {
        width: auto !important;
    }
    /* The 9px corner cells already have GIFs hidden; collapse them too */
    body > table[width="820"] table[width="559"] td[width="9"] {
        display: none !important;
    }
    /* Nav links: allow wrapping if the 5 buttons don't all fit */
    body > table[width="820"] .menuLink td {
        padding: 0 4px !important;
    }
}

/* Allow horizontal scroll if a result table is wider than viewport
   instead of clipping. Result tables (search, ranking) have many
   columns and will exceed mobile width regardless. */
body {
    overflow-x: auto;
}

/* ===== end 2026-04-30 real-mobile header layout ===== */

/* =====================================================================
   2026-04-30 polish round 2 — post-deploy refinements
   - Bring up Get Paid image (Marie 2026-04-30)
   - Center "Rate local companies" tagline
   - Fix Search button overlapping the keyword card's rounded corner
   - Make nav cells distribute evenly across the band (end-to-end)
   ===================================================================== */

/* Bring up the "Get paid for your opinion" image. The inline style is
   padding-top:50px; on desktop and our earlier mobile rule was 16px.
   Tighten both. */
body div[style*="float: left"][style*="width: 200px"] {
    padding-top: 16px !important;
}
@media (max-width: 720px) {
    body div[style*="float: left"][style*="width: 200px"] {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
}

/* Center the homepage tagline */
#keyword_search_inner > h3,
#advanced_search > h3 {
    text-align: center !important;
}

/* Search button was clipping past the bottom-right rounded corner of
   the keyword card. The card's absolutely-positioned children need
   more vertical room — switch height to a min-height with auto growth. */
#keyword_section_wrapper {
    height: auto !important;
    min-height: 230px !important;
}

/* Nav buttons stretch end-to-end. Both the top nav (5 items) and the
   sub-nav (1-3 items) use class="menuLink"; with table-layout: fixed
   and width: 100%, every cell gets an equal share of the band. */
body > table[width="820"] table.menuLink {
    table-layout: fixed !important;
    width: 100% !important;
}

/* ===== end 2026-04-30 polish round 2 ===== */

/* =====================================================================
   2026-04-30 polish round 3 — screenshot fixes
   - Keyword search box should match the Popular Categories width
   - Emery County dropdown was clipping outside the panel on mobile
   - Nav buttons overlap when 5 labels don't fit at small widths
   ===================================================================== */

/* ---- Keyword search width parity with Popular Categories ----
   The wrapper sat inside <table>...<td><img arrow></td><td>card</td>
   <td><img arrow></td>... with cellpadding/spacing 0. Hiding the arrow
   imgs left two empty <td>s that still influenced layout, holding the
   middle cell narrower than the parent. Force every container to fill
   100% and collapse the empty arrow cells entirely. */
#keyword_search,
#keyword_search_inner,
#keyword_search_inner > form {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
#keyword_search_inner > form > table {
    width: 100% !important;
    table-layout: fixed !important;
}
#keyword_search_inner > form > table > tbody > tr > td:first-child,
#keyword_search_inner > form > table > tbody > tr > td:last-child {
    display: none !important;
    width: 0 !important;
}
#keyword_section_wrapper {
    /* drop the 720px cap so the card stretches to match the categories
       panel's natural width inside the same column */
    max-width: 100% !important;
}

/* ---- County selector inside Popular Categories: don't float on mobile.
   The float:right from search.css was misbehaving inside the block-level
   mobile panel and clipping past the panel's left edge. Switch it to a
   non-floated right-aligned block above the heading. */
@media (max-width: 720px) {
    #popular_categories #category_county_selector_wrapper {
        float: none !important;
        text-align: right;
        width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 10px;
    }
    #popular_categories #category_county_selector {
        max-width: 100%;
        display: inline-block;
    }
}

/* ---- Nav text fit: with table-layout:fixed each of the 5 top-nav
   cells gets 20% of the band — at narrow widths "Ranking Rewards"
   and "Local Web Links" can't fit, causing overlap. Shrink the font
   and allow wrapping to two lines on small screens. */
@media (max-width: 720px) {
    body > table[width="820"] .menuLink .navLink,
    body > table[width="820"] .menuLink .navLinkSelected {
        font-size: 12px !important;
        padding: 6px 2px !important;
        white-space: normal !important;
        line-height: 1.2;
        word-break: keep-all;
        hyphens: none;
    }
    body > table[width="820"] .menuLink td {
        padding: 4px 0 !important;
        vertical-align: middle;
    }
}
@media (max-width: 420px) {
    body > table[width="820"] .menuLink .navLink,
    body > table[width="820"] .menuLink .navLinkSelected {
        font-size: 10px !important;
        padding: 4px 1px !important;
    }
}

/* ===== end 2026-04-30 polish round 3 ===== */

/* =====================================================================
   2026-04-30 polish round 4 — kill mobile horizontal overflow
   Several legacy pages (rankingRewards.php, search forms, result rows)
   sprinkle <th nowrap> and <td nowrap> on content cells. Combined they
   force minimum table widths that exceed mobile viewport — the page
   renders wider than the screen, looks "zoomed in" on every nav, and
   the user has to pinch-zoom-out manually each time. Drop nowrap on
   mobile so cells wrap to fit. Long descriptions also get break-word.
   ===================================================================== */

@media (max-width: 720px) {
    /* Legacy nowrap attribute → allow wrapping on mobile */
    body td[nowrap],
    body th[nowrap] {
        white-space: normal !important;
    }
    /* Long descriptions / URLs break instead of overflow */
    body table td,
    body table th {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* ===== end 2026-04-30 polish round 4 ===== */

/* =====================================================================
   2026-04-30 polish round 5 — generic mobile fit rules
   Earlier rules caught specific hardcoded widths (780/800/820). Sweep
   broader to catch any legacy page with a numeric width attribute or
   inline-style fixed-px width that would overflow mobile viewport.
   Affected pages found in repo: buyerBenefits.php, privacyPolicy.php,
   sellerBenefits.php (width=600 tables); Advanced Search form on
   index.php and search.php (175px selects + 99px arrow gif).
   ===================================================================== */

@media (max-width: 720px) {
    /* Any table with a numeric width attribute (not %) shrinks to fit.
       Catches width=600/700/780/800/820/etc. The :not()s skip the tiny
       spacer cells in the header nav which we want kept tight. */
    body table[width]:not([width$="%"]):not([width="9"]):not([width="16"]) {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Inline-style fixed-px widths on form controls (175px Advanced
       Search selects, etc.) capped to container so two-up pairs don't
       overflow. The original 175px applies when there's room. */
    body select[style*="width:"],
    body input[type="text"][style*="width:"],
    body input[type="submit"][style*="width:"] {
        max-width: 100% !important;
    }

    /* Images: cap at viewport width, preserve aspect via height:auto.
       Doesn't shrink small icons since max-width only constrains up. */
    body img {
        max-width: 100%;
        height: auto;
    }
}

/* ===== end 2026-04-30 polish round 5 ===== */

/* =====================================================================
   2026-05-18 Round 2 — Marie bundle (Candidates 1, 2, 5, 7, 8, 9)
   All CSS-only, append-only. To roll back the entire Round 2,
   delete from here to the matching end marker below.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Candidate 1 — Hover states + transitions on nav links
   Smooth 200ms color + underline transitions on the top nav and the
   secondary "Ranking / Online Coupons" bar. Adds an :active press
   state. Round 1 already sets the resting + hover colors; this layer
   only adds motion so the change feels intentional instead of snapping.
   --------------------------------------------------------------------- */
.navLink,
.navLinkSelected {
    transition: color 0.18s ease, background-color 0.18s ease,
                border-color 0.18s ease, transform 0.12s ease !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 4px 4px 0 0;
}
.navLink:hover {
    border-bottom-color: var(--cr-primary) !important;
}
td[bgcolor="#CB2229"] .navLink:hover {
    border-bottom-color: rgba(255, 255, 255, 0.85) !important;
}
.navLink:active,
.navLinkSelected:active {
    transform: translateY(1px);
}

/* ---------------------------------------------------------------------
   Candidate 2 — Sticky header on scroll (logo + nav + state row)
   Two sticky rows in the outer wrapper:
     Row 1 — logo + nav band (tr:first-child)
     Row 2 — "Your state is X (Change)" line (tr:nth-child(2))
   The state row sticks just below the nav so the user always sees
   what state context they're searching against. position: sticky on
   <td> works in Chrome/Firefox/Safari/Edge as of 2024+.
   --------------------------------------------------------------------- */
body > table[width="820"] > tbody > tr:first-child > td {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: var(--cr-bg-soft);
}
body > table[width="820"] > tbody > tr:first-child {
    box-shadow: 0 2px 8px rgba(51, 52, 142, 0.08);
}
/* State row: stick just below the nav row. The nav row is one <tr>
   with cells holding a 60px logo + dual-band nav (~25px+~25px). Sticky
   top must match the actual rendered height of that row — overshoot
   causes the state row to "jump down" once you start scrolling,
   covering the content below it. 78px lines up with the rendered
   bottom edge of the nav. */
body > table[width="820"] > tbody > tr:nth-child(2) > td {
    position: sticky;
    top: 78px;
    z-index: 49;
    background-color: var(--cr-bg-soft);
    padding: 2px 12px !important;
    line-height: 1.2;
}
@media (max-width: 720px) {
    /* Mobile nav is taller (the 5-link top nav wraps to two lines via
       the existing rule at style.css:952). Bump the offset up enough
       to clear it. */
    body > table[width="820"] > tbody > tr:nth-child(2) > td {
        top: 96px;
    }
}
/* Reduce sticky on very short viewports where it would cover the page */
@media (max-height: 500px) {
    body > table[width="820"] > tbody > tr:first-child > td,
    body > table[width="820"] > tbody > tr:nth-child(2) > td {
        position: static;
    }
}

/* ---------------------------------------------------------------------
   Candidate 5 — Footer polish
   The existing footer is a bare <hr> + centered copyright + bullet +
   "Company Search" link, inside the outer 820-table. No markup to
   add — restyle the <hr> + the centering div + the surviving link to
   read like a finished band instead of a 2006 afterthought.
   --------------------------------------------------------------------- */
body > table[width="820"] hr[color="#CCCCCC"],
body > table[width="820"] hr[size="1"] {
    border: none !important;
    height: 1px !important;
    background: linear-gradient(
        to right,
        transparent,
        rgba(51, 52, 142, 0.25) 20%,
        rgba(51, 52, 142, 0.25) 80%,
        transparent
    ) !important;
    margin: 32px 0 0 0 !important;
}
/* The copyright + Company Search line — it's the last <div align="center">
   directly inside the outer wrapper cell. Style it as a clean band. */
body > table[width="820"] > tbody > tr:last-child div[align="center"]:last-of-type,
body > table[width="820"] td > div[align="center"]:last-child {
    font-family: var(--cr-font-body) !important;
    font-size: 12px !important;
    color: rgba(51, 52, 142, 0.65) !important;
    padding: 18px 16px 14px 16px !important;
    letter-spacing: 0.02em;
}
body > table[width="820"] > tbody > tr:last-child div[align="center"] a,
body > table[width="820"] td > div[align="center"]:last-child a {
    color: var(--cr-primary) !important;
    text-decoration: none !important;
    font-weight: 600;
    transition: color 0.18s ease, border-bottom-color 0.18s ease;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
}
body > table[width="820"] > tbody > tr:last-child div[align="center"] a:hover,
body > table[width="820"] td > div[align="center"]:last-child a:hover {
    border-bottom-color: var(--cr-primary) !important;
}

/* ---------------------------------------------------------------------
   Candidate 7 — Loading micro-animations
   Lightweight perceived-performance polish:
   - Fade-in for ranking results table on render
   - Subtle pulse on the homepage Search submit button while idle
   - Slide-in for top header band on initial paint
   All pure CSS @keyframes — no JS, no markup change.
   --------------------------------------------------------------------- */
@keyframes cr-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes cr-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes cr-search-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(51, 52, 142, 0.0); }
    50%      { box-shadow: 0 0 0 6px rgba(51, 52, 142, 0.12); }
}
@keyframes cr-slide-down {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Ranking results table fade-up — targets the search-result rows
   (tr[bgcolor="#CCCCCC"]) and lets the cascade animate in. */
tr[bgcolor="#CCCCCC"] {
    animation: cr-fade-up 0.32s ease-out both;
}
/* Stagger isn't possible without :nth-child variations — but a single
   eased entry already reads as "loaded" instead of "popped in". */

/* Top header band slide-down on first paint */
body > table[width="820"] > tbody > tr:first-child {
    animation: cr-slide-down 0.4s ease-out both;
}

/* Homepage Search button idle pulse. The submit lives in #keyword_search_inner;
   tag it directly via type="submit" inside that container. */
#keyword_search_inner input[type="submit"],
#keyword_search_inner button[type="submit"] {
    animation: cr-search-pulse 2.6s ease-in-out infinite;
    animation-delay: 1.2s;  /* let the page settle before pulsing */
}
#keyword_search_inner input[type="submit"]:hover,
#keyword_search_inner input[type="submit"]:focus,
#keyword_search_inner button[type="submit"]:hover,
#keyword_search_inner button[type="submit"]:focus {
    animation: none;  /* stop pulsing once the user engages */
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    tr[bgcolor="#CCCCCC"],
    body > table[width="820"] > tbody > tr:first-child,
    #keyword_search_inner input[type="submit"],
    #keyword_search_inner button[type="submit"] {
        animation: none !important;
    }
}

/* ---------------------------------------------------------------------
   Candidate 8 — Spacer-GIF cleanup via CSS
   Layout-spacer GIFs (spacer.gif, nav_top_*.gif, etc.) are still in
   the HTML even after Round 1 hid the visible-content red arrows.
   Collapse them so they stop loading + stop confusing accessibility
   tools. The DOM elements stay; only their visual + a11y impact dies.
   --------------------------------------------------------------------- */
img[src*="spacer.gif"],
img[src*="/spacer."],
img[alt=" "][width="16"],
img[alt=" "][width="9"] {
    display: none !important;
}
/* The decorative nav_top_left/right + nav_bottom_left/right images
   were already hidden in Round 1 (lines 204-208). No-op here, but
   listing them keeps the cleanup centralized for future audits. */

/* ---------------------------------------------------------------------
   Candidate 9 — Rate Me button shrinks on phone
   Root cause: Round 1 polish round 5 added `body img { max-width: 100% }`
   for mobile overflow safety (line 1033). When the .FFCCCC cell narrows
   on phones, rate_me.gif (natural 46x16) is squeezed below tap-target
   minimums. Restore natural size + give the cell enough room to host
   a >=44px tap target.
   --------------------------------------------------------------------- */
tr[bgcolor="#CCCCCC"] > td[bgcolor="#FFCCCC"] a img[src*="rate_me"] {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    min-width: 46px;  /* natural width — never shrink below */
}
@media (max-width: 720px) {
    /* Cell padding bumps the effective tap target to >=44px even though
       the image itself is 46x16. The whole <a> becomes the hit area. */
    tr[bgcolor="#CCCCCC"] > td[bgcolor="#FFCCCC"] {
        min-width: 60px;
        padding: 14px 8px !important;
    }
    tr[bgcolor="#CCCCCC"] > td[bgcolor="#FFCCCC"] a {
        display: inline-block;
        min-height: 44px;
        min-width: 56px;
        padding: 4px 0;
        line-height: 0;  /* keep img centered without baseline gap */
    }
}

/* ---------------------------------------------------------------------
   Candidate 10 — Keyword Search + Popular Categories same width,
   same left edge, stacked vertically with even spacing.

   index.php renders the Get Paid sidebar (float: left, 200px wide) +
   #keyword_search + #popular_category_form as stacked siblings.
   Above 1100px viewports we give BOTH outer wrappers identical fixed
   widths + identical margin-left so their visible blue cards line up
   in a clean column past the sidebar.

   Why a fixed width instead of calc(50% - 130px): the keyword search
   card lives inside #keyword_search > #keyword_search_inner > <form>
   > <table> > middle <td> > #keyword_section_wrapper. search.css
   line 5-6 sets `margin: auto` on #keyword_search_inner — Round 1
   line 725 overrides with !important, but the nested table-cell
   layout still introduces width-vs-margin ambiguity. Pinning both
   outer wrappers to the same explicit width sidesteps the whole
   chain. The visible blue cards then inherit 100% of that width.

   Note on !important: Round 1 polish-round-3 (line 907) hardcoded
   `display: block !important; width: 100% !important` on
   #keyword_search. Candidate 10 has to outrank those flags.
   --------------------------------------------------------------------- */
@media (min-width: 1100px) {
    /* Both outer wrappers — identical width, horizontally centered in
       the parent content cell. Stack vertically because float: none.
       The Get Paid sidebar still float: lefts at x=0; the centered
       cards sit in the middle with clearance on the right and a
       reasonable gap from the sidebar on the left. */
    #keyword_search,
    #popular_category_form {
        display: block !important;
        float: none !important;
        clear: none !important;
        width: 700px !important;
        max-width: calc(100% - 32px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }
    /* Even vertical spacing between the two stacked cards. */
    #popular_category_form {
        margin-top: 28px !important;
    }
    /* Inner keyword_search_inner: cancel search.css auto-centering and
       let it fill the outer wrapper exactly. */
    #keyword_search_inner {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    /* search.css gives #popular_categories its own margin-left: 200px
       (legacy single-column flow). Cancel it — the form wrapper now
       handles all horizontal positioning. */
    #popular_categories {
        margin-left: 0 !important;
        margin-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ---------------------------------------------------------------------

/* ===== end 2026-05-18 Round 2 bundle ===== */

/* ===== end 2026-04-29 visual refresh ===== */

/* ======================================================================
     2026-05-30 Round 3 — Mobile stacked-card layout for search results
     Desktop view is unchanged (all rules guarded by @media max-width: 720px).
     Each company row becomes a self-contained card on phones:
       [coupon-badge] Company Name (City)
       [Price] [Quality] [Service] [Overall]
       [Rate Me button]
     Selectors scoped to inner results table via
  table[width="100%"]:has(td.table_head)
     to avoid the :has() ancestor-walk trap that broke Round 2 Candidate 11.
     ====================================================================== */

  @media (max-width: 720px) {

      /* (1) Top banner cleanup */
      body > table[width="820"] > tbody > tr:nth-child(2) > td {
          position: static !important;
          text-align: left !important;
          padding: 6px 12px !important;
      }
      table[bgcolor="#CC0000"] {
          margin-top: 0 !important;
      }
      td[colspan="8"][bgcolor="#FFFFCC"] > img[src*="s_results_instructions"] {
          display: none !important;
      }
      td[colspan="8"][bgcolor="#FFFFCC"] {
          background: #FFF8DC !important;
          padding: 8px 12px !important;
          text-align: center !important;
          font-size: 12px;
          color: #6B4E00;
          font-style: italic;
      }
      td[colspan="8"][bgcolor="#FFFFCC"]::after {
          content: "Tap a company name to view ratings and contact info";
      }

      /* (2) Convert results table to block layout (scoped to inner width=100%
  table) */
      table[width="100%"]:has(td.table_head),
      table[width="100%"]:has(td.table_head) > tbody {
          display: block !important;
          width: 100% !important;
      }
      table[width="100%"]:has(td.table_head) > tbody > tr {
          display: block !important;
          width: 100% !important;
          box-sizing: border-box;
      }
      table[width="100%"]:has(td.table_head) > tbody > tr:has(td.table_head) {
          display: none !important;
      }
      table[width="100%"]:has(td.table_head) > tbody > tr >
  td[colspan="8"][bgcolor="#0000CC"] {
          display: block !important;
          width: 100% !important;
          padding: 12px 14px !important;
          font-size: 15px !important;
          font-weight: 600;
          margin-top: 14px;
          margin-bottom: 4px;
          border-radius: 4px;
      }
      table[width="100%"]:has(td.table_head) > tbody > tr > td[colspan="8"] >
  table,
      table[width="100%"]:has(td.table_head) > tbody > tr > td[colspan="8"] >
  table > tbody,
      table[width="100%"]:has(td.table_head) > tbody > tr > td[colspan="8"] >
  table > tbody > tr,
      table[width="100%"]:has(td.table_head) > tbody > tr > td[colspan="8"] >
  table > tbody > tr > td {
          display: block !important;
          width: auto !important;
          text-align: left !important;
          padding: 0 !important;
          background: transparent !important;
      }

      /* (3) Each data row → flex card */
      table[width="100%"]:has(td.table_head) > tbody > tr[bgcolor="#CCCCCC"] {
          background: #F0F4FB !important;
          border: 1px solid #D1DCEE !important;
          border-radius: 8px !important;
          margin: 6px 6px !important;
          padding: 10px 12px !important;
          display: flex !important;
          flex-wrap: wrap !important;
          align-items: center;
          gap: 6px 6px;
          box-shadow: 0 1px 2px rgba(51,52,142,0.06);
      }
      table[width="100%"]:has(td.table_head) > tbody > tr[bgcolor="#CCCCCC"] >
  td {
          display: block !important;
          background: transparent !important;
          padding: 0 !important;
          text-align: left !important;
          font-size: 14px;
          line-height: 1.35;
          box-sizing: border-box;
          white-space: normal !important;
      }

      /* Coupon badge — order 1 */
      table[width="100%"]:has(td.table_head) > tbody > tr[bgcolor="#CCCCCC"] >
  td[bgcolor="#FFFFCC"] {
          order: 1;
          flex: 0 0 auto;
      }
      table[width="100%"]:has(td.table_head) > tbody > tr[bgcolor="#CCCCCC"] >
  td[bgcolor="#FFFFCC"]:empty {
          display: none !important;
      }
      table[width="100%"]:has(td.table_head) > tbody > tr[bgcolor="#CCCCCC"] >
  td[bgcolor="#FFFFCC"] img {
          width: 42px !important;
          height: 18px !important;
          max-width: none !important;
          min-width: 0 !important;
          display: block;
      }

      /* Company name — order 2 (takes most of row 1) */
      table[width="100%"]:has(td.table_head) > tbody > tr[bgcolor="#CCCCCC"] >
  td[bgcolor="#CCCCFF"]:not([align="center"]) {
          order: 2;
          flex: 1 1 auto;
          min-width: calc(100% - 60px);
          font-size: 16px;
          font-weight: 600;
      }
      table[width="100%"]:has(td.table_head) > tbody > tr[bgcolor="#CCCCCC"] >
  td[bgcolor="#CCCCFF"]:not([align="center"]) a {
          color: #33348E !important;
          text-decoration: none;
          word-break: break-word;
      }
      table[width="100%"]:has(td.table_head) > tbody > tr[bgcolor="#CCCCCC"] >
  td[bgcolor="#CCCCFF"]:not([align="center"]) font[size="-1"] {
          font-size: 12px;
          color: #6B7A99;
          font-weight: 500;
      }
      table[width="100%"]:has(td.table_head) > tbody > tr[bgcolor="#CCCCCC"] >
  td[bgcolor="#CCCCFF"]:not([align="center"]) font[face*="Times"] {
          display: none !important;
      }

      /* The 4 rating cells (last 4 TDs) — order 3 */
      table[width="100%"]:has(td.table_head) > tbody > tr[bgcolor="#CCCCCC"] >
  td:nth-last-child(-n+4) {
          order: 3;
          flex: 1 1 calc(25% - 6px);
          min-width: 60px;
          text-align: center !important;
          padding: 6px 4px !important;
          background: #FFFFFF !important;
          border-radius: 6px;
          font-size: 14px;
          font-weight: 600;
          line-height: 1.2;
      }
      table[width="100%"]:has(td.table_head) > tbody > tr[bgcolor="#CCCCCC"] >
  td:nth-last-child(1) {
          background: #FFF4E6 !important;
      }
      table[width="100%"]:has(td.table_head) > tbody > tr[bgcolor="#CCCCCC"] >
  td:nth-last-child(1):has(img) {
          display: none !important;
      }
      table[width="100%"]:has(td.table_head) > tbody > tr[bgcolor="#CCCCCC"] >
  td:nth-last-child(-n+4)::before {
          display: block;
          font-size: 9px;
          color: #6B7A99;
          font-weight: 500;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          margin-bottom: 2px;
      }
      table[width="100%"]:has(td.table_head) > tbody > tr[bgcolor="#CCCCCC"] >
  td:nth-last-child(4)::before { content: "Price"; }
      table[width="100%"]:has(td.table_head) > tbody > tr[bgcolor="#CCCCCC"] >
  td:nth-last-child(3)::before { content: "Quality"; }
      table[width="100%"]:has(td.table_head) > tbody > tr[bgcolor="#CCCCCC"] >
  td:nth-last-child(2)::before { content: "Service"; }
      table[width="100%"]:has(td.table_head) > tbody > tr[bgcolor="#CCCCCC"] >
  td:nth-last-child(1)::before { content: "Overall"; }

      /* Rate Me button — order 99 (forced to bottom, full width) */
      table[width="100%"]:has(td.table_head) > tbody > tr[bgcolor="#CCCCCC"] >
  td[bgcolor="#FFCCCC"][colspan="2"] {
          order: 99;
          flex: 0 0 100%;
          text-align: center !important;
          padding: 2px 0 0 0 !important;
          background: transparent !important;
      }
      table[width="100%"]:has(td.table_head) > tbody > tr[bgcolor="#CCCCCC"] >
  td[bgcolor="#FFCCCC"][colspan="2"] a {
          display: inline-block;
          padding: 6px 14px !important;
          min-height: 0 !important;
          min-width: 0 !important;
          line-height: 0;
      }
      table[width="100%"]:has(td.table_head) > tbody > tr[bgcolor="#CCCCCC"] >
  td[bgcolor="#FFCCCC"][colspan="2"] img {
          width: 46px !important;
          height: 16px !important;
          max-width: none !important;
          min-width: 0 !important;
      }
  }

  /* ===== end 2026-05-30 Round 3 mobile cards ===== */