/* ==========================================================================
   Gid Intent Asset pages (2026-09-23, mandate P30)
   ==========================================================================
   Pages: every English page that links this file (the list lives in
   public/README.md, "Intent Asset pages", and in the discovery assertion of
   tests/marketing_site_consistency.test.cjs). 2026-09-23 P33 added three:
   restaurant-opening-closing-checklists.html, restaurant-employee-onboarding.html
   and restaurant-team-communication.html, on the same template; their only new
   blocks are .gx-cards-2 and .gx-checklist below. The /guides hub (same day)
   loads this file too and adds the .gx-guide* rows; it is not an Intent page.
   Source: the `gx-*` blocks (sections 9 and 10) of the shared shell of the
   2026-09-22 Intent Asset mockups; reference renders of those mockups and of
   these pages are in _handoff/P30_INTENT_PAGES_2026-09-23/.

   Load order: styles.css, then home-v2.css, then this file LAST. The pages
   carry `body.home-v2`, so every token (--hv-*), the nav and footer retint,
   and the shared primitives (.hv-kicker, .hv-h1, .hv-h2, .hv-btn, .hv-shot,
   .hv-faq-*, .hv-final-*) come from home-v2.css and are NOT repeated here.
   Only the intent-asset blocks live in this file, built from those tokens:
   no new colour.

   Not carried over from the mockup shell, on purpose (no caller today):
   .gx-slot*, .gx-video*, .gx-play and .gx-panel-accent. The founder removed
   the video section and the placeholder capture on 2026-09-22 (mockup tuning
   pass). When a real walkthrough video exists, reintroduce .gx-video and
   .gx-play together with the page that uses them.
   ========================================================================== */

/* --- Page gutter ----------------------------------------------------------
   home-v2.css section 13 pins --hv-gutter to 40px below 1280px for the
   homepage. The reviewed Intent Asset plates (375 and 1440) were drawn on the
   base token, 20px on a phone; these pages keep it so the dense cards and the
   comparison table read at a glance on a 375px screen. */
@media (max-width: 1279px) {
    body.home-v2 {
        --hv-gutter: clamp(20px, 5vw, 64px);
    }
}

/* --- Nav bottom (language switcher + "Open My Gid") -----------------------
   MIRROR of the inline nav <style> block of public/index.html (and
   public/hi/index.html), which is where the homepage keeps these rules today;
   home-v2.css section 19 then retints the switcher for the dark v2 pages.
   Same markup, same result, so a visitor who comes from the homepage sees the
   same nav. tests/marketing_site_consistency.test.cjs refuses a drift between
   this block and the homepage one. Moving both into home-v2.css is a separate
   change to the homepage. */
.mobile-nav-bottom {
    display: contents;
}
.language-switcher {
    display: flex;
    align-items: center;
    background: #f8fafc;
    padding: 4px;
    border-radius: 12px;
    gap: 4px;
    border: 1px solid #e2e8f0;
}
.language-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    color: #64748b;
}
.language-link.active {
    background: white;
    color: #0f172a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.language-link:not(.active):hover {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.5);
}
@media (max-width: 768px) {
    .mobile-nav-bottom {
        display: flex;
        flex-direction: column;
        margin-top: 2rem;
        width: 100%;
        padding-top: 2rem;
        border-top: 1px solid #f1f5f9;
    }
    .language-switcher {
        margin-left: 0;
        width: 100%;
        margin-bottom: 2rem;
        justify-content: space-between;
        padding: 6px;
    }
    .language-link {
        flex: 1;
        padding: 1rem 1rem;
        font-size: 1rem;
    }
}

/* --- Hero ---------------------------------------------------------------- */
body.home-v2 .gx-hero {
    position: relative;
    overflow: hidden;
    padding-top: calc(var(--hv-nav-h) + clamp(20px, 4vw, 48px));
    padding-bottom: clamp(36px, 5vw, 90px);
    background-image: radial-gradient(ellipse 90% 60% at 70% -10%, rgba(249, 115, 22, 0.16), rgba(249, 115, 22, 0) 60%);
}
body.home-v2 .gx-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    column-gap: clamp(32px, 5vw, 80px);
    row-gap: clamp(20px, 3vw, 34px);
    align-items: center;
}
body.home-v2 .gx-hero-copy { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 24px); min-width: 0; }
body.home-v2 .gx-hero-sub {
    font-size: var(--hv-sub);
    line-height: 1.5;
    font-weight: 500;
    color: var(--hv-text-2);
    max-width: 560px;
    margin: 0;
}
body.home-v2 .gx-ctas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* Real glass: translucent fill + blur over the orange radial backdrop. */
body.home-v2 .gx-glass {
    background: rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--hv-border-3);
    border-radius: var(--hv-r-card);
}

/* --- Price card ---------------------------------------------------------- */
body.home-v2 .gx-price-card {
    padding: clamp(22px, 2.6vw, 34px);
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.4vw, 18px);
    border-color: var(--hv-accent-border-strong);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 70px var(--hv-accent-glow-s);
}
body.home-v2 .gx-price-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
body.home-v2 .gx-price-name { font-size: clamp(20px, 2vw, 26px); font-weight: 800; margin: 0; }
body.home-v2 .gx-pill {
    font-size: clamp(10px, 0.9vw, 12px);
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--hv-accent);
    border: 1.5px solid var(--hv-accent-border);
    border-radius: var(--hv-r-pill);
    padding: 6px 12px;
    white-space: nowrap;
}
body.home-v2 .gx-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
body.home-v2 .gx-price-now { font-size: clamp(38px, 4.4vw, 56px); font-weight: 800; line-height: 1; color: var(--hv-text); }
body.home-v2 .gx-price-was {
    font-size: clamp(16px, 1.6vw, 20px);
    font-weight: 700;
    color: var(--hv-text-3);
    text-decoration: line-through;
}
body.home-v2 .gx-price-unit { font-size: clamp(12px, 1.1vw, 14px); font-weight: 700; color: var(--hv-text-2); }
body.home-v2 .gx-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
body.home-v2 .gx-list li {
    display: flex;
    gap: 10px;
    font-size: clamp(13px, 1.25vw, 16px);
    font-weight: 500;
    line-height: 1.5;
    color: var(--hv-text-2);
}
body.home-v2 .gx-check { color: var(--hv-accent); font-weight: 800; flex: none; }
/* Each li is flex: its text lives in ONE <span> after the check, otherwise every
   <strong> or <a> inside it becomes its own column (seen on the mockup's
   "Limits of Gid today" panel, 2026-09-23). */

/* In-copy links: the homepage treatment (.hv-founders-card a). The browser
   default link blue measures 2.0:1 on this ground (visited purple 1.7:1),
   which would break the published WCAG 2.1 AA claim (public/README.md rule 9);
   the accent measures 6.7:1 on a card. */
body.home-v2 .gx-card a,
body.home-v2 .gx-panel a {
    color: var(--hv-accent);
    font-weight: 700;
}

/* --- Cards ---------------------------------------------------------------- */
body.home-v2 .gx-body { display: flex; flex-direction: column; gap: clamp(24px, 3.2vw, 46px); }
body.home-v2 .gx-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(16px, 2.2vw, 28px);
}
/* Explicit columns per breakpoint, never auto-fit: a 2/3/4/6-card group must
   always land balanced (2, 3, 4, 2+2 or 1; never a 3+1 / 3+2 hole). Add the
   matching gx-cards-N modifier class alongside gx-cards on each grid.
   gx-cards-2 (2026-09-23, P33) carries the long checklist cards of the resource
   pages: two readable columns from 768px, never four narrow ones. */
@media (min-width: 768px) {
    body.home-v2 .gx-cards-2, body.home-v2 .gx-cards-4, body.home-v2 .gx-cards-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    body.home-v2 .gx-cards-3 { grid-template-columns: repeat(3, 1fr); }
    body.home-v2 .gx-cards-4 { grid-template-columns: repeat(4, 1fr); }
    body.home-v2 .gx-cards-6 { grid-template-columns: repeat(3, 1fr); }
}
body.home-v2 .gx-card {
    border: 1px solid var(--hv-border-2);
    border-radius: clamp(18px, 1.8vw, 24px);
    background: var(--hv-card);
    padding: clamp(20px, 2.4vw, 30px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body.home-v2 .gx-card h3 { font-size: clamp(17px, 1.7vw, 21px); font-weight: 800; margin: 0; color: var(--hv-text); }
body.home-v2 .gx-card p, body.home-v2 .gx-card li {
    font-size: clamp(14px, 1.3vw, 16px);
    line-height: 1.55;
    font-weight: 500;
    color: var(--hv-text-2);
    margin: 0;
}
body.home-v2 .gx-num {
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--hv-accent);
    text-transform: uppercase;
}

/* --- Copyable checklists (2026-09-23, P33 resource pages) -----------------
   A plain <ul> a manager can select and copy as it is. The empty box is drawn
   by CSS, so the copied text stays clean; it is neutral on purpose (an
   unticked box is not a selection, so it never takes the accent). */
body.home-v2 .gx-checklist {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body.home-v2 .gx-card .gx-checklist li {
    position: relative;
    padding-left: 28px;
    line-height: 1.5;
}
body.home-v2 .gx-checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--hv-border-4);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.03);
}

/* --- Comparison table ----------------------------------------------------- */
body.home-v2 .gx-table-wrap {
    border: 1px solid var(--hv-border-2);
    border-radius: var(--hv-r-card);
    overflow: hidden;
    background: var(--hv-card);
}
body.home-v2 .gx-table { width: 100%; border-collapse: collapse; }
body.home-v2 .gx-table th, body.home-v2 .gx-table td {
    padding: clamp(14px, 1.5vw, 20px);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--hv-border-2);
    font-size: clamp(13px, 1.2vw, 15.5px);
    line-height: 1.55;
}
body.home-v2 .gx-table thead th {
    font-size: clamp(11px, 1vw, 13px);
    letter-spacing: 1.8px;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--hv-text-3);
    background: rgba(255, 255, 255, 0.025);
}
body.home-v2 .gx-table thead th.gx-col-gid { color: var(--hv-accent); }
body.home-v2 .gx-table tbody th { font-weight: 800; color: var(--hv-text); width: 24%; }
body.home-v2 .gx-table td { color: var(--hv-text-2); font-weight: 500; }
body.home-v2 .gx-table .gx-cell-gid { background: rgba(249, 115, 22, 0.05); color: var(--hv-text-strong); }
body.home-v2 .gx-table tbody tr:last-child th,
body.home-v2 .gx-table tbody tr:last-child td { border-bottom: none; }
body.home-v2 .gx-todo { color: var(--hv-text-3); font-style: italic; }
body.home-v2 .gx-verified {
    font-size: clamp(12px, 1.05vw, 14px);
    line-height: 1.6;
    font-weight: 500;
    color: var(--hv-text-3);
    margin: 0;
    max-width: 900px;
}
body.home-v2 .gx-verified strong { color: var(--hv-text-2); font-weight: 800; }
body.home-v2 .gx-verified a { color: var(--hv-text-2); }
body.home-v2 .gx-verified a:hover { color: var(--hv-accent); }
body.home-v2 .gx-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- App captures --------------------------------------------------------- */
body.home-v2 .gx-shots {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(16px, 2.4vw, 32px);
    align-items: start;
}
@media (min-width: 1024px) {
    body.home-v2 .gx-shots { grid-template-columns: repeat(3, 1fr); }
}
body.home-v2 .gx-shot-item { display: flex; flex-direction: column; gap: 12px; margin: 0; }
body.home-v2 .gx-shot-item figcaption {
    font-size: clamp(12px, 1.1vw, 14.5px);
    font-weight: 600;
    color: var(--hv-text-3);
    line-height: 1.5;
}

/* --- Two-column honesty blocks, steps, dates ------------------------------ */
body.home-v2 .gx-duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.6vw, 32px); align-items: start; }
body.home-v2 .gx-panel {
    border: 1px solid var(--hv-border-2);
    border-radius: var(--hv-r-card);
    background: var(--hv-card);
    padding: clamp(22px, 2.6vw, 34px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}
body.home-v2 .gx-panel h3 { font-size: clamp(19px, 2vw, 25px); font-weight: 800; margin: 0; }
body.home-v2 .gx-panel p { font-size: clamp(14px, 1.3vw, 16px); line-height: 1.55; font-weight: 500; color: var(--hv-text-2); margin: 0; }
body.home-v2 .gx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.6vw, 34px); align-items: start; }
body.home-v2 .gx-step { display: flex; flex-direction: column; gap: 14px; }
body.home-v2 .gx-step-copy { display: flex; flex-direction: column; gap: 8px; }
body.home-v2 .gx-step h3 { font-size: clamp(18px, 1.8vw, 22px); font-weight: 800; margin: 0; }
body.home-v2 .gx-step p { font-size: clamp(14px, 1.3vw, 16px); line-height: 1.55; font-weight: 500; color: var(--hv-text-2); margin: 0; }
body.home-v2 .gx-shot-phone { max-width: 320px; width: 100%; margin-inline: auto; }
body.home-v2 .gx-updated {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--hv-text-3);
}
body.home-v2 .gx-dotmark { width: 7px; height: 7px; border-radius: 50%; background: var(--hv-success); flex: none; }

/* --- Final CTA pair ----------------------------------------------------------
   The homepage final CTA has ONE button; these pages carry two. The pair keeps
   the hero rhythm (18px). On a phone home-v2.css section 14 already makes each
   .hv-final-inner .hv-btn full width, so the pair stacks with the same gap. */
body.home-v2 .gx-final-ctas {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
}

/* --- Shared "stack you have today" component (every Intent Asset page) ----
   One component, identical on every Intent Asset page and on the /guides hub
   (the gate compares the markup). Six separate, muted app tiles on the left,
   one glass Gid card on the right carrying the same six categories, the price
   from pricing.json and the page's primary CTA: six apps against one, at a
   glance. Tokens only, one accent, no new colour. */
body.home-v2 .gx-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(18px, 2.4vw, 32px);
}
body.home-v2 .gx-stack-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
body.home-v2 .gx-stack-tally {
    margin: 0;
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--hv-text-3);
}
body.home-v2 .gx-stack-tally-gid { color: var(--hv-accent); }
/* Six equal rows, stretched to the height of the Gid card beside them. */
body.home-v2 .gx-stack-tools {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-auto-rows: 1fr;
    gap: 10px;
    flex: 1;
}
body.home-v2 .gx-stack-tool {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: clamp(12px, 1.3vw, 16px) clamp(14px, 1.6vw, 18px);
    border: 1px solid var(--hv-border-2);
    border-radius: 16px;
    background: var(--hv-card);
}
body.home-v2 .gx-stack-icon {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--hv-border-3);
    background: rgba(255, 255, 255, 0.03);
    color: var(--hv-text-3);
    display: flex;
    align-items: center;
    justify-content: center;
}
body.home-v2 .gx-stack-icon svg { width: 19px; height: 19px; }
body.home-v2 .gx-stack-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.home-v2 .gx-stack-copy strong {
    font-size: clamp(14px, 1.3vw, 16px);
    font-weight: 800;
    line-height: 1.3;
    color: var(--hv-text-2);
}
body.home-v2 .gx-stack-copy span {
    font-size: clamp(12.5px, 1.1vw, 14px);
    font-weight: 500;
    line-height: 1.45;
    color: var(--hv-text-3);
}
body.home-v2 .gx-stack-vs {
    align-self: center;
    justify-self: center;
    width: clamp(40px, 4vw, 48px);
    height: clamp(40px, 4vw, 48px);
    border-radius: 50%;
    border: 1.5px solid var(--hv-accent-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--hv-accent);
    background: rgba(249, 115, 22, 0.06);
}
body.home-v2 .gx-stack-gid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: clamp(22px, 2.6vw, 32px);
    border-color: var(--hv-accent-border-strong);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 70px var(--hv-accent-glow-s);
}
body.home-v2 .gx-stack-gid-head { display: flex; align-items: center; gap: 14px; }
body.home-v2 .gx-stack-mark {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    box-shadow: 0 10px 30px var(--hv-accent-glow-m);
}
body.home-v2 .gx-stack-gid-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.home-v2 .gx-stack-gid-title h3 {
    margin: 0;
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 800;
    line-height: 1.15;
    color: var(--hv-text);
}
body.home-v2 .gx-stack-gid-title p {
    margin: 0;
    font-size: clamp(13px, 1.15vw, 15px);
    font-weight: 600;
    color: var(--hv-text-2);
}
body.home-v2 .gx-stack-included li { color: var(--hv-text-strong); font-weight: 600; }
/* 2026-09-23 (P33 commit C): the Google reviews line says what Gid does beyond
   replying, in one muted line under its name: the same two levels (name, then
   a quiet line) as the tiles on the left, never a badge or a second colour. */
body.home-v2 .gx-stack-more {
    display: block;
    margin-top: 2px;
    font-size: clamp(12.5px, 1.1vw, 14px);
    font-weight: 500;
    line-height: 1.45;
    color: var(--hv-text-3);
    text-wrap: balance;
}
body.home-v2 .gx-stack-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--hv-border-2);
}
body.home-v2 .gx-stack-price .gx-price-row { margin: 0; flex-wrap: nowrap; align-items: center; gap: 14px; }
/* The unit reads as a two-line label beside the figure, never under it. */
body.home-v2 .gx-stack-unit { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
body.home-v2 .gx-stack-unit > span:last-child { color: var(--hv-text-3); font-weight: 600; }
body.home-v2 .gx-stack-cta { width: 100%; margin-top: auto; }

/* --- Guides hub (/guides, 2026-09-23, P33) --------------------------------
   One panel per group, one row per guide: a new Intent page is ONE
   <li class="gx-guide"> in its group, never a new layout. The hero has no price
   card, so its copy keeps a reading width instead of the two-column grid. */
body.home-v2 .gx-hero-solo { max-width: 780px; }
/* The list follows the hero closely: the page IS the list. */
body.home-v2 .gx-hero--hub { padding-bottom: clamp(8px, 1.6vw, 20px); }
body.home-v2 .gx-hub-section { padding-top: clamp(8px, 1.6vw, 20px); }
body.home-v2 .gx-panel .gx-guide-group-title {
    font-size: clamp(19px, 2vw, 25px);
    font-weight: 800;
    margin: 0;
    color: var(--hv-text);
}
body.home-v2 .gx-guide-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body.home-v2 .gx-panel .gx-guide a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--hv-border-2);
    border-radius: 16px;
    background: var(--hv-card);
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}
body.home-v2 .gx-panel .gx-guide a:hover,
body.home-v2 .gx-panel .gx-guide a:focus-visible {
    border-color: var(--hv-accent-border);
    background: var(--hv-card-hover);
}
body.home-v2 .gx-guide-title {
    font-size: clamp(15px, 1.4vw, 17px);
    font-weight: 800;
    line-height: 1.3;
    color: var(--hv-text);
}
body.home-v2 .gx-guide-line {
    font-size: clamp(13px, 1.2vw, 15px);
    font-weight: 500;
    line-height: 1.5;
    color: var(--hv-text-2);
}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 1023px) {
    body.home-v2 .gx-hero-grid { grid-template-columns: minmax(0, 1fr); }
    body.home-v2 .gx-price-card { max-width: 520px; }
    body.home-v2 .gx-steps { grid-template-columns: 1fr; }
    body.home-v2 .gx-duo { grid-template-columns: 1fr; }
    /* The component stacks: tiles, then "vs", then the Gid card. */
    body.home-v2 .gx-stack { grid-template-columns: minmax(0, 1fr); }
    body.home-v2 .gx-stack-tools { grid-auto-rows: auto; }
}
@media (max-width: 767px) {
    body.home-v2 .gx-hero { padding-top: calc(var(--hv-nav-h) + 20px); padding-bottom: 36px; }
    body.home-v2 .gx-ctas .hv-btn { width: 100%; }
    body.home-v2 .gx-shot-phone { max-width: 280px; }

    /* The table becomes one readable block per row. No horizontal scroll. */
    body.home-v2 .gx-table, body.home-v2 .gx-table tbody,
    body.home-v2 .gx-table tr, body.home-v2 .gx-table td { display: block; width: auto; }
    body.home-v2 .gx-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    body.home-v2 .gx-table tbody th {
        display: block;
        width: auto;
        border-bottom: none;
        padding-bottom: 6px;
        font-size: 15px;
    }
    body.home-v2 .gx-table tbody tr { border-bottom: 1px solid var(--hv-border-2); padding-bottom: 8px; }
    body.home-v2 .gx-table tbody tr:last-child { border-bottom: none; }
    body.home-v2 .gx-table td { border-bottom: none; padding-top: 4px; padding-bottom: 10px; }
    body.home-v2 .gx-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.6px;
        text-transform: uppercase;
        color: var(--hv-text-3);
        margin-bottom: 4px;
    }
    body.home-v2 .gx-table td.gx-cell-gid::before { color: var(--hv-accent); }
    body.home-v2 .gx-table .gx-cell-gid { border-radius: 12px; }

}
/* prefers-reduced-motion is owned by home-v2.css for every body.home-v2 page. */