/* joetennisreviews.com - extracted from SITE_PASTE_READY_R3_WithIDs.html + type-scale normalization */
/* Global Styles */
    html, body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        line-height: 1.6;
        background-color: #f4f4f9;
        color: #333;
    }

    body.no-scroll {
        overflow: hidden; /* Disable scrolling while popup is active */
    }

    header {
        background: #444;
        color: #fff;
        padding: 0.5rem 0; /* Reduce padding */
        text-align: center;
    }

    nav {
        display: flex;
        justify-content: center;
        background: #333;
        padding: 0.5rem 0;
        position: sticky;
        top: 0;
        z-index: 1000;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    nav a {
        color: #fff;
        text-decoration: none;
        margin: 0 1rem;
    }

    nav a:hover {
        text-decoration: underline;
    }

    .container {
        max-width: 100%; /* Expand the container width */
        padding: 0 1rem; /* Add padding for responsiveness */
    }

    /* General Section Styling */
    .section-content {
        margin: 1rem 0;
        padding: 1.5rem;
        border-radius: 5px;
        background: #fff; /* White background for all section content */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    }

    /* Customer Reviews Styling */
    #customer-reviews {
        width: 100%; /* Make sure the section spans the entire width */
        margin: auto;
        padding: 1rem 0;
    }

    #customer-reviews table {
        width: 100%; /* Table spans full width of the parent */
        border-collapse: collapse;
        font-size: 1.2rem;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        /*table-layout: fixed; /* Ensures even column spacing */
    }

    #customer-reviews th, #customer-reviews td {
        padding: 12px 15px;
        border: 1px solid #ddd;
        text-align: left;
        word-wrap: break-word; /* Prevent text overflow */
    }

    #customer-reviews th {
        background-color: #444;
        color: white;
        text-transform: uppercase;
        font-weight: bold;
    }

    #customer-reviews tbody tr:nth-child(even) {
        background-color: #f4f4f9;
    }

    /* Individual Reviews */
    #customer-reviews article {
        margin: 1rem 0; /* Space between reviews */
        padding: 1rem; /* Padding inside each review */
        border-radius: 5px; /* Rounded corners for individual reviews */
        border: 1px solid #ddd; /* Subtle border around reviews */
        background: #fff; /* White background for each review */
    }

    /* Doing Business As Section */
    #known-businesses .section-content {
        background: none; /* Remove the white background */
        box-shadow: none; /* Remove the shadow effect */
    }

    header h1 {
        font-size: 1.8rem; /* Reduce font size */
        font-weight: bold;
        margin: 0;
        padding-bottom: 0.5rem; /* Add spacing below the line */
    }

    header p {
        font-size: 1rem; /* Smaller font for the subheading */
        margin: 0.5rem 0 0; /* Adjust spacing */
    }

    h2 {
        font-size: 1.5rem;
        font-weight: bold;
        border-bottom: 1px solid #ddd;
        padding-bottom: 0.3rem;
    }

    footer {
        background: #444;
        color: #fff;
        text-align: center;
        padding: 1rem 0;
        margin-top: 2rem;
    }

    .hidden {
        display: none; /* Content is hidden by default */
    }

    /* Popup Styling */
    .popup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        z-index: 1000;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    #mandatory-popup {
        display: flex;
    }

    .popup-content {
        background: #fff;
        padding: 20px;
        border-radius: 8px;
        max-width: 90%;
        max-height: 80%;
        overflow-y: auto;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        text-align: left;
    }

    .close-popup {
        display: block;
        margin: 10px auto;
        background: #444;
        color: #fff;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        font-size: 14px;
        border-radius: 5px;
        text-align: center;
    }

    .close-popup:hover {
        background: #333;
    }

    /* Ensure the table is scrollable on mobile devices */
    table {
        width: 100%;
        border-collapse: collapse;
        margin: 1rem 0;
        font-size: 1.2rem;
        text-align: left;
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    thead {
        background-color: #444;
        color: white;
    }

    th, td {
        padding: 12px 15px;
        border: 1px solid #ddd;
    }

    tr:nth-child(even) {
        background-color: #f4f4f9;
    }

    th {
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    /* Adjust for Mobile */
    @media (max-width: 768px) {
        #customer-reviews table {
            display: block;
            overflow-x: auto; /* Enables horizontal scrolling */
            white-space: nowrap; /* Prevents table content wrapping */
        }

        #customer-reviews th, #customer-reviews td {
            font-size: 1rem;
            padding: 8px;
        }
    }

    /* General Table Styling */
    table {
        width: 100%; /* Ensures both tables span the same width */
        border-collapse: collapse;
        margin: 1rem 0;
        font-size: 1.2rem;
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    table th, table td {
        padding: 12px 15px;
        border: 1px solid #ddd;
        text-align: left;
    }

    table th {
        background-color: #444;
        color: white;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 1rem;
    }

    table tbody tr:nth-child(even) {
        background-color: #f4f4f9;
    }

    #reviews-table {
        width: 100%;
        border-collapse: collapse;
        margin: 1rem 0;
        font-size: 1.2rem;
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    #reviews-table th, #reviews-table td {
        padding: 12px 15px;
        border: 1px solid #ddd;
        text-align: left;
    }

    #reviews-table th {
        background-color: #444;
        color: white;
        text-transform: uppercase;
        font-weight: bold;
        font-size: 1rem;
    }

    #reviews-table tbody tr:nth-child(even) {
        background-color: #f4f4f9;
    }

    #pagination-controls {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
        gap: 5px;
    }

    .pagination-button {
        background-color: #444;
        color: white;
        border: none;
        padding: 8px 12px;
        cursor: pointer;
        border-radius: 4px;
        font-size: 1rem;
    }

    .pagination-button.active {
        background-color: #333;
        font-weight: bold;
    }

    .pagination-button:hover {
        background-color: #555;
    }

    /* Remove surrounding cell */
    #customer-reviews .section-content {
        padding: 0; /* Remove padding */
        margin: 0; /* Remove margin */
        background: none; /* Remove background color */
        box-shadow: none; /* Remove box-shadow */
    }

    /* Contact Us Section Styling */
    #contact {
        width: 100%; /* Full width */
        margin: 0 auto; /* Center the section */
        padding: 0rem 0; /* Vertical spacing */
        text-align: left; /* Align content to the left */
    }

    #contact h2 {
        font-size: 1.8rem; /* Consistent header size */
        font-weight: bold;
        margin-bottom: 1rem; /* Space below the header */
        text-align: left; /* Align the header to the left */
    }

    #contact .section-content {
        max-width: 1200px; /* Match other sections */
        margin: 0 auto; /* Center content horizontally */
        padding: 1rem; /* Add spacing inside the container */
        font-size: 1.4rem;
        line-height: 1.5; /* Consistent spacing for readability */
        background: #fff; /* Ensure background color consistency */
        border-radius: 5px; /* Rounded corners for uniformity */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    }

    #contact p {
        margin: 0; /* Remove extra margin */
        text-align: left; /* Align text to the left */
    }

    #contact a {
        color: #007bff; /* Highlight email link */
        text-decoration: none;
    }

    #contact a:hover {
        text-decoration: underline; /* Add hover effect */
    }

    /* Report & Get Help Section Styling */
    #report-and-get-help {
        width: 100%; /* Full width */
        margin: 0 auto; /* Center the section */
        padding: 0rem 0; /* Vertical spacing */
        text-align: left; /* Align content to the left */
    }

    #report-and-get-help h2 {
        font-size: 1.8rem; /* Consistent header size */
        font-weight: bold;
        margin-bottom: 1rem; /* Space below the header */
        text-align: left; /* Align the header to the left */
    }

    #report-and-get-help .section-content {
        max-width: 1200px; /* Match other sections */
        margin: 0 auto; /* Center content horizontally */
        padding: 1rem; /* Add spacing inside the container */
        font-size: 1.4rem;
        line-height: 1.5; /* Consistent spacing for readability */
        background: #fff; /* Ensure background color consistency */
        border-radius: 5px; /* Rounded corners for uniformity */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    }

    #report-and-get-help p {
        margin: 0; /* Remove extra margin */
        text-align: left; /* Align text to the left */
    }

    #report-and-get-help a {
        color: #007bff; /* Highlight email link */
        text-decoration: none;
    }

    #report-and-get-help a:hover {
        text-decoration: underline; /* Add hover effect */
    }


/* ============================================================
   TYPE SCALE NORMALIZATION - added 2026-07-23
   The inherited stylesheet mixed units and sizes: h2 was 1.5rem in most
   sections but 1.8rem under #contact and #report-and-get-help; body prose
   was 1rem in the About sections but 1.4rem in those two; tables were
   1.2rem; .close-popup was the only px value in the file. Result: the lower
   half of the page rendered ~40% larger than the top. One scale below.
   ============================================================ */

/* Root size drives the whole scale below, because every value here is in rem.
   100% = 16px (browser default). 93.75% = 15px, i.e. one standard step down.
   Reduced to 93.75% on 2026-07-23 at Fouad's request - text read too large.
   TO REVERT: set this back to 100%. Nothing else needs touching.
   Using a percentage rather than a px value keeps the user's own browser
   font-size preference working proportionally. */
html { font-size: 93.75%; }
body { font-size: 1rem; line-height: 1.65; }

/* headings */
header h1                                   { font-size: 2rem; line-height: 1.25; }
header p                                    { font-size: 1.0625rem; font-weight: 400; opacity: .92; }
h2,
#contact h2,
#report-and-get-help h2                     { font-size: 1.5rem; line-height: 1.3; }
.popup-content h3                           { font-size: 1.25rem; }
.popup-content h4                           { font-size: 1.0625rem; margin-top: 1.25em; }

/* body prose - one size everywhere */
.section-content,
#contact .section-content,
#report-and-get-help .section-content       { font-size: 1rem; line-height: 1.65; }
.popup-content, .popup-content p,
.popup-content li                           { font-size: 1rem; line-height: 1.6; }

/* prose column width - #contact and #report-and-get-help already used
   max-width:1200px; applying the same value everywhere for consistency.
   Tables are deliberately excluded and stay full width. */
.section-content                            { max-width: 1200px; margin-left: auto; margin-right: auto; }
#known-businesses .section-content,
#customer-reviews .section-content          { max-width: none; }

/* tables */
table, #customer-reviews table              { font-size: 1rem; }
table td, #customer-reviews td              { line-height: 1.6; vertical-align: top; }
table th, #customer-reviews th              { font-size: .8125rem; letter-spacing: .04em; }

/* controls */
.pagination-button                          { font-size: .9375rem; }
.close-popup, #agree-button                 { font-size: .9375rem; }
#agree-button                               { background:#444; color:#fff; border:none;
                                              padding:10px 20px; border-radius:5px; cursor:pointer; }
#agree-button:hover                         { background:#333; }

/* visually hidden but available to screen readers (table captions) */
.sr-only                                    { position: absolute; width: 1px; height: 1px;
                                              padding: 0; margin: -1px; overflow: hidden;
                                              clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- nav ----------
   Sticky again 2026-07-23 at the site owner's request. It was unpinned earlier
   because page content scrolling underneath it read as the bar "covering" text.
   That is inherent to position:sticky, so the treatment below makes the boundary
   unambiguous rather than trying to prevent it: an opaque background, a hard
   bottom edge, and a drop shadow so content clearly passes BEHIND the bar.
   scroll-margin-top keeps anchor-link targets from landing underneath it.
   TO UNPIN AGAIN: change position to static and drop the z-index. */
nav                                         { position: sticky; top: 0; z-index: 1000;
                                              background: #333;
                                              border-bottom: 2px solid #1a1a1a;
                                              box-shadow: 0 3px 10px rgba(0,0,0,.32); }
section[id]                                 { scroll-margin-top: 4.25rem; }
/* the popups sit above everything, including the pinned nav */
.popup                                      { z-index: 2000; }

/* ---------- photographs and AI renderings in About Joe ---------- */
.photo-block                                { margin: 1.6rem 0 0; }
.photo-block h3                             { font-size: 1.125rem; margin: 0 0 .5rem; }
.photo-row                                  { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
/* Fixed COLUMN WIDTH, natural height. A forced height distorted portrait
   images and let the square one render nearly twice as wide as the others. */
.photo-item                                 { margin: 0; flex: 0 0 auto; width: 232px; max-width: 100%; }
.photo-item img                             { display: block; width: 100%; height: auto;
                                              border: 1px solid #ccc; border-radius: 4px; background: #fff; }
.photo-item figcaption                      { font-size: .8125rem; line-height: 1.45; color: #555; margin-top: .4rem; }
.photo-item figcaption em                   { display: block; margin-top: .25rem; color: #333; }

/* The renderings are visually separated so they cannot be mistaken for
   photographs: tinted panel, amber rule, and a tag on every caption. */
.render-block                               { background: #fdf7ec; border: 1px solid #e6d4b0;
                                              border-left: 4px solid #c98a1a; border-radius: 5px;
                                              padding: 1rem 1.1rem; margin-top: 1.8rem; }
.render-block h3                            { color: #7a5209; }
.render-notice                              { font-size: .875rem; line-height: 1.55; margin: 0 0 .6rem; }
.photo-row-4 .photo-item                    { width: 200px; }
.render-block .photo-item img               { border-color: #c98a1a; }
.gen-tag                                    { display: inline-block; background: #c98a1a; color: #fff;
                                              font-size: .625rem; font-weight: 700; text-transform: uppercase;
                                              letter-spacing: .06em; padding: .1rem .35rem; border-radius: 3px;
                                              margin-right: .3rem; vertical-align: 1px; }

@media (max-width: 768px) {
  .photo-item                               { width: 46%; max-width: 46%; }
  .photo-row-4 .photo-item                  { width: 46%; max-width: 46%; }
}

/* ---------- correspondence from the subject ----------
   NOTE: the inherited stylesheet styles <header> globally (dark background,
   white text, centred) for the page banner. These articles use <header> too,
   so every one of those properties has to be undone explicitly or the meta
   line renders dark-grey-on-near-black and is unreadable. */
.corr                                       { background: #fff; border: 1px solid #ddd; border-left: 4px solid #444;
                                              border-radius: 5px; padding: 1rem 1.2rem; margin: 0 0 1.1rem; }
.corr .corr-head                            { background: none; color: inherit; text-align: left;
                                              padding: 0 0 .55rem; margin: 0 0 .65rem;
                                              border-bottom: 1px solid #eee;
                                              display: flex; flex-wrap: wrap; gap: .15rem .9rem;
                                              align-items: baseline; }
.corr .corr-date                            { font-weight: 700; font-size: 1rem; color: #222; }
.corr .corr-meta                            { font-size: .8125rem; color: #5a5a5a; }
.corr code                                  { font-size: .95em; background: #f0f0f0; color: #333;
                                              padding: .05em .3em; border-radius: 3px; }
.corr blockquote                            { margin: 0; padding: 0; border: 0; max-width: none;
                                              font-size: 1rem; line-height: 1.7; color: #222; }
.corr blockquote br + br                    { line-height: 2.2; }
.corr-warning                               { background: #fdf7ec; border-left: 4px solid #c98a1a;
                                              padding: .7rem 1rem; border-radius: 4px;
                                              font-size: .9375rem; line-height: 1.6; max-width: none; }
.corr-note                                  { font-size: .9375rem; line-height: 1.6; max-width: none;
                                              border-top: 1px solid #e5e5e5; padding-top: .9rem; margin-top: 1.3rem; }
#correspondence .section-content > p        { max-width: none; }

/* ---------- Ohio AG complaints ---------- */
.ag-privacy                                 { background: #eef4fa; border-left: 4px solid #3c6e9f;
                                              padding: .7rem 1rem; border-radius: 4px;
                                              font-size: .9375rem; line-height: 1.6; max-width: none; }
.ag-note                                    { font-size: .875rem; line-height: 1.6; color: #444;
                                              max-width: none; background: #f7f7f7; padding: .65rem .9rem;
                                              border-radius: 4px; }
.ag-sub                                     { font-size: .875rem; color: #666; max-width: none; }
#ag-complaints .section-content > p         { max-width: none; }
#ag-complaints h3                           { font-size: 1.125rem; margin: 1.6rem 0 .4rem; }
.agc                                        { background: #fff; border: 1px solid #ddd;
                                              border-left: 4px solid #3c6e9f; border-radius: 5px;
                                              padding: .95rem 1.15rem; margin: 0 0 1rem; }
.agc .agc-head                              { background: none; color: inherit; text-align: left;
                                              padding: 0 0 .5rem; margin: 0 0 .6rem;
                                              border-bottom: 1px solid #eee; display: flex;
                                              flex-wrap: wrap; gap: .15rem .9rem; align-items: baseline; }
.agc .agc-no                                { font-weight: 700; font-size: .9375rem; color: #1f4d75;
                                              font-variant-numeric: tabular-nums; }
.agc .agc-meta                              { font-size: .8125rem; color: #5a5a5a; }
.agc blockquote                             { margin: 0; padding: 0; border: 0; max-width: none;
                                              font-size: 1rem; line-height: 1.7; color: #222; }

/* ---------- direct reports to the site ---------- */
.dr-tier                                    { background: #f4f0fa; border-left: 4px solid #6b4fa0;
                                              padding: .7rem 1rem; border-radius: 4px;
                                              font-size: .9375rem; line-height: 1.6; max-width: none; }
.dr-privacy, .dr-sub                        { font-size: .875rem; color: #555; max-width: none; line-height: 1.6; }
#direct-reports .section-content > p        { max-width: none; }
#direct-reports h3                          { font-size: 1.125rem; margin: 1.6rem 0 .3rem; }
.dr                                         { background: #fff; border: 1px solid #ddd;
                                              border-left: 4px solid #6b4fa0; border-radius: 5px;
                                              padding: .95rem 1.15rem; margin: 0 0 1rem; }
.dr .dr-head                                { background: none; color: inherit; text-align: left;
                                              padding: 0 0 .5rem; margin: 0 0 .6rem;
                                              border-bottom: 1px solid #eee; display: flex;
                                              flex-wrap: wrap; gap: .15rem .9rem; align-items: baseline; }
.dr .dr-who                                 { font-weight: 700; font-size: 1rem; color: #222; }
.dr .dr-meta                                { font-size: .8125rem; color: #5a5a5a; }
.dr blockquote                              { margin: 0; padding: 0; border: 0; max-width: none;
                                              font-size: 1rem; line-height: 1.7; color: #222; }
.dr .dr-note                                { font-size: .8125rem; color: #555; line-height: 1.55;
                                              max-width: none; margin: .7rem 0 0; padding-top: .6rem;
                                              border-top: 1px dashed #e0e0e0; }
.dr-foot                                    { font-size: .9375rem; line-height: 1.6; max-width: none;
                                              border-top: 1px solid #e5e5e5; padding-top: .9rem; margin-top: 1.3rem; }

/* ---------- expandable evidence entries (AG complaints, direct reports) ----
   Each entry collapses to a one-line summary with a text preview, so a reader
   can scan 8 complaints or 7 reports at a glance and open only what they want.
   Full text stays in the DOM (inside <details>), so it is still present in the
   page source for search engines and archivers. */
details.agc, details.dr                     { background: #fff; border: 1px solid #ddd;
                                              border-radius: 5px; margin: 0 0 .5rem; }
details.agc                                 { border-left: 4px solid #3c6e9f; }
details.dr                                  { border-left: 4px solid #6b4fa0; }
details.agc > summary, details.dr > summary { cursor: pointer; padding: .6rem .9rem;
                                              display: block; list-style: none;
                                              font-size: .875rem; line-height: 1.5; }
details.agc > summary::-webkit-details-marker,
details.dr  > summary::-webkit-details-marker { display: none; }
details.agc > summary::before, details.dr > summary::before {
                                              content: '\25B8'; display: inline-block;
                                              margin-right: .5rem; color: #888;
                                              transition: transform .12s ease; }
details[open].agc > summary::before, details[open].dr > summary::before {
                                              transform: rotate(90deg); }
details.agc > summary:hover, details.dr > summary:hover { background: #f7f9fb; }
details.agc .agc-no                         { font-weight: 700; color: #1f4d75;
                                              font-variant-numeric: tabular-nums; margin-right: .6rem; }
details.dr  .dr-who                         { font-weight: 700; color: #222; margin-right: .6rem; }
details.agc .agc-meta, details.dr .dr-meta  { font-size: .8125rem; color: #5a5a5a; margin-right: .6rem; }
.ex-prev                                    { display: block; color: #666; font-size: .8125rem;
                                              margin-top: .2rem; font-style: italic; }
details[open] .ex-prev                      { display: none; }
details.agc blockquote, details.dr blockquote { margin: 0; padding: 0 .9rem .9rem 1.5rem;
                                              border: 0; max-width: none; font-size: 1rem;
                                              line-height: 1.7; color: #222; font-style: normal; }
details.dr .dr-note                         { font-size: .8125rem; color: #555; line-height: 1.55;
                                              max-width: none; margin: 0 .9rem .9rem 1.5rem;
                                              padding-top: .6rem; border-top: 1px dashed #e0e0e0; }
.expand-hint                                { font-size: .8125rem; color: #666; margin: .2rem 0 .7rem; }

/* ---------- unified evidence row ----------------------------------------
   One layout for every kind of documented complaint. Nothing is collapsed:
   the full text of every entry is visible without interaction.
   Header line carries the facts a reader scans for - date, source tier,
   who, which trade name, how much - then the account itself at full width. */
.ev-list                                    { margin: 1rem 0 0; }
.ev                                         { border-top: 1px solid #e3e3e3; padding: 1rem 0 1.1rem; }
.ev:first-child                             { border-top: 2px solid #ccc; }
.ev-head                                    { display: flex; flex-wrap: wrap; align-items: baseline;
                                              gap: .4rem .8rem; margin-bottom: .5rem; }
.ev-date                                    { font-weight: 700; font-size: .9375rem; color: #222;
                                              font-variant-numeric: tabular-nums; min-width: 5.5em; }
.ev-badge                                   { font-size: .6875rem; font-weight: 700; text-transform: uppercase;
                                              letter-spacing: .06em; padding: .12rem .4rem; border-radius: 3px;
                                              color: #fff; white-space: nowrap; }
.ev-direct                                  { background: #6b4fa0; }
.ev-ag                                      { background: #3c6e9f; }
.ev-court                                   { background: #7a1f1f; }
.ev-platform                                { background: #55606b; }
.ev-who                                     { font-weight: 700; font-size: .9375rem; color: #222; }
.ev-biz                                     { font-size: .8125rem; color: #5a5a5a; }
.ev-amt                                     { margin-left: auto; font-weight: 700; font-size: 1rem;
                                              color: #7a1f1f; font-variant-numeric: tabular-nums;
                                              white-space: nowrap; }
.ev-amt.ev-avoided                          { color: #1a7a3c; font-weight: 600; font-size: .875rem; }
.ev-text                                    { margin: 0; font-size: 1rem; line-height: 1.65; color: #222; }
.ev-note                                    { margin: .6rem 0 0; padding-top: .55rem; font-size: .8125rem;
                                              line-height: 1.55; color: #555; border-top: 1px dashed #e0e0e0; }
@media (max-width: 620px) {
  .ev-amt                                   { margin-left: 0; }
  .ev-date                                  { min-width: 0; }
}

/* ---------- review card grid ----------------------------------------------
   Two columns on desktop so long verbatim complaints get real width instead of
   a squeezed table cell; one column on narrow screens. align-items:start keeps
   each card its natural height rather than stretching a short one to match a
   long neighbour. Reading order stays chronological (row-major). */
.ev-grid                                    { display: grid; gap: 0;
                                              grid-template-columns: 1fr;
                                              align-items: start; margin: .8rem 0 0; }
.ev-card                                    { background: #fff; border: 1px solid #ddd;
                                              border-bottom: 0; padding: .55rem .9rem .6rem; }
.ev-card:first-child                        { border-radius: 5px 5px 0 0; }
.ev-card:last-child                         { border-bottom: 1px solid #ddd; border-radius: 0 0 5px 5px; }
.ev-card:nth-child(even)                    { background: #fafafa; }
.ev-card .ev-head                           { display: flex; flex-wrap: wrap; align-items: baseline;
                                              gap: .3rem .7rem; margin-bottom: .3rem;
                                              padding-bottom: 0; border-bottom: 0; }
.ev-card .ev-date                           { font-weight: 700; font-size: .875rem; color: #222;
                                              font-variant-numeric: tabular-nums; }
.ev-card .ev-who                            { font-weight: 700; font-size: .875rem; color: #222; }
.ev-loc                                     { font-size: .75rem; color: #777; }
.ev-card .ev-biz                            { font-size: .75rem; color: #5a5a5a; margin-left: auto;
                                              text-align: right; }
.ev-card .ev-text                           { margin: 0; font-size: .9375rem; line-height: 1.55; color: #222; }
/* the platform badge IS the source link - no separate footer line repeating it */
a.ev-badge                                  { text-decoration: none; }
a.ev-badge:hover, a.ev-badge:focus          { filter: brightness(1.18); text-decoration: underline; }
a.ev-badge:focus-visible                    { outline: 2px solid #222; outline-offset: 2px; }
.ev-flag                                    { font-size: .625rem; font-weight: 700; text-transform: uppercase;
                                              letter-spacing: .05em; color: #8a5a00; background: #fdf0d5;
                                              border: 1px solid #e8cf9a; padding: 0 .3rem; border-radius: 3px; }
/* platform badge colours */
.ev-yelp                                    { background: #a32b28; }
.ev-bbb                                     { background: #1a5a8a; }
.ev-ha                                      { background: #d97706; }
.ev-porch                                   { background: #2f7d5c; }
.ev-birdeye                                 { background: #6b4fa0; }
.ev-other                                   { background: #55606b; }
@media (max-width: 640px) {
  .ev-grid                                  { grid-template-columns: 1fr; }
  .ev-card .ev-biz                          { margin-left: 0; text-align: left; }
}

/* The inherited stylesheet carries a rule on #customer-reviews article setting
   margin 1rem 0 and padding 1rem, left over from the old design. ID+element
   beats a plain class, so every .ev-card rule was being overridden and the
   cards kept a 1rem gap. These selectors match that specificity to undo it. */
#customer-reviews .ev-card                  { margin: 0; padding: .55rem .9rem .6rem;
                                              border: 1px solid #ddd; border-bottom: 0;
                                              border-radius: 0; box-shadow: none; }
#customer-reviews .ev-card:first-child      { border-radius: 5px 5px 0 0; }
#customer-reviews .ev-card:last-child       { border-bottom: 1px solid #ddd; border-radius: 0 0 5px 5px; }
#customer-reviews .ev-card:nth-child(even)  { background: #fafafa; }

/* ---------- court judgments ---------- */
#court-judgments table                      { margin-top: .6rem; }
.cj-note                                    { font-size: .875rem; line-height: 1.6; color: #444;
                                              background: #f7f7f7; padding: .6rem .9rem;
                                              border-radius: 4px; border-left: 3px solid #bbb; }
#court-judgments h3                         { font-size: 1.125rem; margin: 1.8rem 0 .3rem; }
.cj-amt                                     { text-align: right; font-variant-numeric: tabular-nums;
                                              white-space: nowrap; font-weight: 600; }
.cj-no                                      { color: #7a1f1f; font-weight: 700; white-space: nowrap; }
.cj-sub                                     { font-size: .8125rem; color: #666; }
tr.cj-total td                              { background: #f0f0f0; border-top: 2px solid #999; }
tr.cj-total .cj-amt                         { font-size: 1.0625rem; color: #7a1f1f; }

/* ---------- nav: current-section indicator ----------
   site.v*.js adds .is-current to the link whose section is in view. The
   indicator is a bar along the bottom edge of the item plus a lighter
   background, so it reads even where the nav wraps to two lines. */
nav a.is-current                            { background: #4a4a4a; color: #fff;
                                              box-shadow: inset 0 -3px 0 #c98a1a; }
nav a.is-current:hover                      { background: #555; }
@media (prefers-reduced-motion: no-preference) {
  nav a                                     { transition: background-color .12s ease, box-shadow .12s ease; }
}

.dba-alert                                  { background: #fdecea; border-left: 4px solid #a32b28;
                                              padding: .8rem 1.05rem; border-radius: 4px;
                                              font-size: 1.0625rem; line-height: 1.55; color: #222; }
.dba-note                                   { font-size: .9375rem; line-height: 1.6; color: #444;
                                              background: #f7f7f7; padding: .65rem .95rem;
                                              border-radius: 4px; border-left: 3px solid #bbb; }

/* ---------- About This Site ---------- */
.as-key                                     { background: #fdf7ec; border-left: 4px solid #c98a1a;
                                              padding: .75rem 1rem; border-radius: 4px;
                                              font-size: 1rem; line-height: 1.6; }

/* ---------- About Joe ---------- */
.aj-key                                     { background: #fdf7ec; border-left: 4px solid #c98a1a;
                                              padding: .75rem 1rem; border-radius: 4px;
                                              font-size: 1rem; line-height: 1.6; }
.aj-note                                    { background: #f7f7f7; border-left: 3px solid #bbb;
                                              padding: .6rem .9rem; border-radius: 4px;
                                              font-size: .875rem; line-height: 1.6; color: #444; }
.aj-sub                                     { font-size: .875rem; color: #666; line-height: 1.55; }
#about-joe h3                               { font-size: 1.125rem; margin: 1.8rem 0 .3rem; }

/* ---------- about the positive reviews ----------
   Side-by-side comparison. The original 2021 review sits on the left, the
   later fragments on the right, with the shared sentences highlighted so the
   reader can see the match without having to compare the text word by word. */
#positive-reviews h3                        { font-size: 1.125rem; margin: 1.8rem 0 .3rem; }
.pr-quote                                   { margin: .6rem 0 1rem; padding: .8rem 1.1rem;
                                              background: #fff; border: 1px solid #ddd;
                                              border-left: 4px solid #444; border-radius: 5px;
                                              font-size: 1rem; line-height: 1.65; color: #222; }
.pr-sub                                     { font-size: .875rem; color: #666; line-height: 1.55; }
.pr-pair                                    { display: grid; gap: .8rem; margin: .8rem 0 1.1rem;
                                              grid-template-columns: 1fr 1fr; align-items: start; }
.pr-side                                    { background: #fff; border: 1px solid #ddd;
                                              border-radius: 5px; padding: .8rem 1rem; }
.pr-orig                                    { border-left: 4px solid #2f7d5c; }
.pr-copy                                    { border-left: 4px solid #a32b28; }
.pr-head                                    { font-size: .8125rem; color: #555; margin-bottom: .35rem;
                                              padding-bottom: .3rem; border-bottom: 1px solid #eee; }
.pr-head2                                   { margin-top: .9rem; }
.pr-side p                                  { margin: 0; font-size: .9375rem; line-height: 1.6; color: #333; }
.pr-side mark                               { background: #fff3bf; color: #222; padding: 0 .1em; }
.pr-side mark.m2                            { background: #d9ecff; }
.pr-side mark.m3                            { background: #d8f5d8; }
.pr-list li                                 { margin-bottom: .5rem; line-height: 1.6; }
.pr-attrib                                  { display: block; margin-top: .5rem; font-size: .8125rem;
                                              color: #666; font-style: normal; }
.pr-src                                     { font-size: .8125rem; color: #666; line-height: 1.55;
                                              margin: .3rem 0 1rem; }
.pr-note                                    { font-size: .875rem; line-height: 1.6; color: #444;
                                              background: #f7f7f7; padding: .6rem .9rem;
                                              border-radius: 4px; border-left: 3px solid #bbb; }
@media (max-width: 720px) {
  .pr-pair                                  { grid-template-columns: 1fr; }
}

/* ---------- stats strip (inserted after nav by site.v*.js) ---------- */
.stats-strip                                { display: flex; flex-wrap: wrap; gap: 1px;
                                              background: #ddd; border-bottom: 1px solid #ddd; }
.stats-strip .stat                          { flex: 1 1 0; min-width: 140px; background: #fff;
                                              padding: .85rem 1rem; text-align: center; }
.stats-strip .stat-value                    { display: block; font-size: 1.5rem; font-weight: 700;
                                              color: #222; line-height: 1.15; }
.stats-strip .stat-label                    { display: block; font-size: .75rem; text-transform: uppercase;
                                              letter-spacing: .06em; color: #666; margin-top: .2rem; }

/* ---------- pagination ---------- */
#pagination-controls                        { flex-direction: column; gap: .6rem; }
.pagination-count                           { font-size: .8125rem; color: #666; }
.pagination-row                             { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.pagination-button.is-disabled              { opacity: .4; cursor: default; }
.pagination-button.is-disabled:hover        { background-color: #444; }

/* Reviews table: cap the reading measure.
   At full width the Review column ran 150+ characters per line, which is roughly
   double a comfortable measure. Desktop only. table-layout:fixed is required
   because browsers ignore max-width on a td under the default auto layout.
   Percentages are of the 1200px cap, so Review lands ~660px, about 80 chars. */
@media (min-width: 769px) {
  #customer-reviews table                     { max-width: 1200px; margin-left: auto; margin-right: auto;
                                                table-layout: fixed; }
  #customer-reviews th:nth-child(1),
  #customer-reviews td:nth-child(1)           { width: 8%; }   /* date */
  #customer-reviews th:nth-child(2),
  #customer-reviews td:nth-child(2)           { width: 11%; }  /* reviewer */
  #customer-reviews th:nth-child(3),
  #customer-reviews td:nth-child(3)           { width: 11%; }  /* location */
  #customer-reviews th:nth-child(4),
  #customer-reviews td:nth-child(4)           { width: 56%; }  /* review */
  #customer-reviews th:nth-child(5),
  #customer-reviews td:nth-child(5)           { width: 14%; }  /* source */
}

/* ============================================================
   MOBILE: reviews render as CARDS, not as a table.
   The inherited rule set white-space:nowrap with horizontal scroll, which meant
   each review was ONE unbroken line. The longest record is 1,584 characters -
   roughly 11,000px wide on a phone. Effectively unreadable, and most traffic
   for contractor searches is mobile. Cards wrap normally, no sideways scrolling.
   Labels come from the data-label attributes emitted by site.v*.js.
   ============================================================ */
@media (max-width: 768px) {
  body                                      { font-size: 1rem; }
  header h1                                 { font-size: 1.625rem; }
  h2, #contact h2, #report-and-get-help h2  { font-size: 1.3125rem; }
  table, #customer-reviews th, #customer-reviews td { font-size: .9375rem; }

  /* undo the inherited nowrap / horizontal-scroll behaviour */
  #customer-reviews table                   { display: block; white-space: normal; overflow-x: visible;
                                              background: none; box-shadow: none; border-radius: 0;
                                              font-size: .9375rem; }
  #customer-reviews thead                   { position: absolute; width: 1px; height: 1px;
                                              overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #customer-reviews tbody,
  #customer-reviews tr,
  #customer-reviews td                      { display: block; width: auto; }
  #customer-reviews tbody tr:nth-child(even) { background: #fff; }
  #customer-reviews tr                      { background: #fff; border: 1px solid #ddd; border-radius: 6px;
                                              margin: 0 0 .9rem; padding: .8rem 1rem;
                                              box-shadow: 0 2px 5px rgba(0,0,0,.08); }
  #customer-reviews td                      { border: none; padding: .2rem 0; }
  #customer-reviews td[data-label]::before  { content: attr(data-label); display: block;
                                              font-size: .625rem; font-weight: 700; text-transform: uppercase;
                                              letter-spacing: .07em; color: #888; margin-bottom: .1rem; }
  /* the review body needs no label - it is obviously the review */
  #customer-reviews td[data-label="Review"]::before { content: none; }
  #customer-reviews td[data-label="Review"] { padding: .55rem 0; border-top: 1px solid #eee;
                                              border-bottom: 1px solid #eee; margin: .45rem 0; }
  .stats-strip .stat                        { min-width: 45%; padding: .7rem .5rem; }
  .stats-strip .stat-value                  { font-size: 1.25rem; }
}