/* HeyMahjong Table Match -- frontend styles, palette ported from the approved mockup. */
.hm-tm-wrap,
.hm-tm-browse {
    --hm-tm-ink: #21372e;
    --hm-tm-muted: #6d746f;
    --hm-tm-gold: #c6a25b;
    --hm-tm-sage: #72836f;
    --hm-tm-paper: #fbfaf7;
    --hm-tm-line: #e8e4dc;
    color: var(--hm-tm-ink);
}

.hm-tm-card-grid {
    display: grid;
    /* auto-fit (not auto-fill) collapses unused tracks to zero width, so a
       short list still spans the full row as balanced columns instead of
       sitting left-packed with reserved-but-empty tracks on the right. */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.hm-tm-card {
    display: block;
    background: #fff;
    border: 1px solid var(--hm-tm-line);
    border-radius: 18px;
    padding: 20px;
    text-decoration: none;
    color: var(--hm-tm-ink);
}

.hm-tm-card h3,
.hm-tm-detail h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
    margin: 8px 0 6px;
}

.hm-tm-badge {
    display: inline-block;
    padding: 6px 9px;
    border-radius: 999px;
    background: #eef2ed;
    color: #4e5e50;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.hm-tm-meta {
    font-size: 14px;
    color: var(--hm-tm-muted);
    margin: 8px 0;
}

.hm-tm-description {
    margin: 16px 0;
}

.hm-tm-description p {
    margin: 0 0 12px;
}

.hm-tm-description p:last-child {
    margin-bottom: 0;
}

.hm-tm-price {
    font-family: Georgia, serif;
    font-size: 22px;
    margin: 6px 0;
}

.hm-tm-price.hm-tm-free {
    font-size: 15px;
    color: var(--hm-tm-sage);
}

.hm-tm-small {
    font-size: 13px;
    color: var(--hm-tm-muted);
}

.hm-tm-full {
    color: #a6453b;
    font-weight: 700;
}

/* Forces the whole "X seats remaining · Y seats total" line to one uniform
   color -- the live theme was rendering the two halves in different colors
   despite this being one plain text node with no nested markup, the same
   class of theme-CSS collision documented elsewhere in this file (see the
   note above .hm-tm-landing-hero). !important wins regardless of which
   theme selector was reaching in here. */
.hm-tm-seats-line {
    color: var(--hm-tm-ink) !important;
}

.hm-tm-btn,
button.hm-tm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 18px;
    margin-top: 10px;
    border-radius: 999px;
    border: 1px solid var(--hm-tm-sage);
    background: var(--hm-tm-sage);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.hm-tm-note {
    padding: 14px 16px;
    border-left: 4px solid var(--hm-tm-gold);
    background: #fffaf0;
    border-radius: 8px;
    color: #5d5b53;
    margin: 16px 0;
}

.hm-tm-note.hm-tm-error {
    border-left-color: #a6453b;
    background: #fdf2f1;
}

.hm-tm-note.hm-tm-success {
    border-left-color: var(--hm-tm-sage);
    background: #f2f5f1;
}

.hm-tm-form {
    max-width: 560px;
    margin-top: 18px;
}

.hm-tm-required {
    color: #a6453b;
}

.hm-tm-required-legend {
    margin: -4px 0 14px;
}

.hm-tm-field {
    margin-bottom: 14px;
}

.hm-tm-field label {
    display: block;
    font-size: 14px;
    margin-bottom: 6px;
}

.hm-tm-field input:not([type="checkbox"]):not([type="radio"]),
.hm-tm-field select,
.hm-tm-field textarea {
    width: 100%;
    padding: 11px;
    border: 1px solid var(--hm-tm-line);
    border-radius: 10px;
    font-size: 15px;
}

.hm-tm-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 14px 0;
    font-size: 14px;
}

.hm-tm-check input {
    margin-top: 4px;
}

.hm-tm-inline-check {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 13px;
    color: var(--hm-tm-muted);
    cursor: pointer;
}

.hm-tm-inline-check input {
    margin: 0;
}

.hm-tm-field input[type="date"]:disabled {
    background: #f1f2ef;
    color: #999;
}

/* Honeypot: off-canvas, not display:none -- kept simple per the locked V1 spam-protection decision. */
.hm-tm-hp-wrap {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

.hm-tm-empty {
    color: var(--hm-tm-muted);
}

/* Compact "Home / TableMatch" breadcrumb (templates/breadcrumb.php),
   shared by all six TableMatch screens. Deliberately left-aligned and
   small -- text-align:left is explicit (not just the default) because
   this sits directly above the theme's now-suppressed page title/
   breadcrumb, whose centered styling could otherwise be inherited. */
.hm-tm-breadcrumb {
    text-align: left;
    font-size: 12px;
    color: var(--hm-tm-muted);
    margin: 0 0 8px;
}

.hm-tm-breadcrumb a {
    color: var(--hm-tm-muted);
}

.hm-tm-breadcrumb a:hover {
    color: var(--hm-tm-ink);
}

.hm-tm-panel {
    background: #fff;
    border: 1px solid var(--hm-tm-line);
    border-radius: 22px;
    padding: 28px;
}

.hm-tm-panel + .hm-tm-panel {
    margin-top: 20px;
}

.hm-tm-eyebrow {
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #9b7838;
    font-weight: 700;
}

.hm-tm-panel h1,
.hm-tm-panel h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
    margin: 10px 0 12px;
}

.hm-tm-panel h1 {
    font-size: 40px;
    line-height: 1.1;
}

.hm-tm-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
    margin-bottom: 20px;
}

.hm-tm-actions-grid:last-child {
    margin-bottom: 0;
}

.hm-tm-action {
    display: block;
    padding: 22px;
    border: 1px solid var(--hm-tm-line);
    border-radius: 18px;
    background: #fff;
    text-align: left;
    text-decoration: none;
    color: var(--hm-tm-ink);
}

.hm-tm-action.hm-tm-primary,
.hm-tm-action.hm-tm-active {
    border-color: var(--hm-tm-gold);
    background: #fffdf7;
}

/* Host vs. Join get visually distinct selected colors (unselected stays the
   default white/neutral .hm-tm-action above); the Community/Academy sub-nav
   cards keep the single gold treatment above unchanged -- only
   templates/primary-nav.php's Host/Join cards carry these modifier classes. */
.hm-tm-action.hm-tm-active-host {
    border-color: var(--hm-tm-gold);
    background: #f7ecd4;
}

.hm-tm-action.hm-tm-active-join {
    border-color: var(--hm-tm-sage);
    background: #e9f1e9;
}

.hm-tm-action strong {
    display: block;
    font-size: 18px;
    margin: 8px 0 4px;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
}

.hm-tm-action:focus-visible {
    outline: 2px solid var(--hm-tm-sage);
    outline-offset: 2px;
}

.hm-tm-two-col {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 800px) {
    .hm-tm-actions-grid,
    .hm-tm-two-col {
        grid-template-columns: 1fr;
    }
}

.hm-tm-panel ul {
    padding-left: 20px;
    margin: 12px 0;
}

.hm-tm-panel li {
    margin-bottom: 8px;
}

/* Best-effort cleanup only, scoped to the 5 TableMatch pages via the
   hm-tm-app-page body class (added by HM_TM_Frontend::add_body_class()).
   The page title itself is removed theme-agnostically via the the_title
   filter, not CSS -- this only targets clearly breadcrumb-specific
   selectors, deliberately never anything as generic as .wp-block-page-list
   (real site navigation, not a breadcrumb) per the approved correction spec. */
body.hm-tm-app-page nav[aria-label="breadcrumb" i]:not(.hm-tm-breadcrumb),
body.hm-tm-app-page nav[aria-label="breadcrumbs" i]:not(.hm-tm-breadcrumb),
body.hm-tm-app-page .breadcrumbs:not(.hm-tm-breadcrumb),
body.hm-tm-app-page .breadcrumb:not(.hm-tm-breadcrumb),
body.hm-tm-app-page .yoast-breadcrumb,
body.hm-tm-app-page .rank-math-breadcrumb,
body.hm-tm-app-page .kadence-breadcrumbs,
body.hm-tm-app-page #kadence-breadcrumbs {
    display: none;
}

/* Reduces the large gap above the TableMatch hero. Verified directly
   against staging's own theme (Twenty Twenty-Five, a WP block theme):
   <main class="wp-block-group"> carries a 70px margin-top, and its direct
   child .wp-block-group.has-global-padding carries a 70px padding-top --
   both from WordPress core's own block-theme global-padding system, not
   theme-specific styling, so this targets real, confirmed selectors
   rather than a guess. assets/frontend.js's reduceThemeTopGap() is the
   fallback for themes that don't use this WP-core structure (a classic
   theme, or padding applied elsewhere). */
body.hm-tm-app-page main.wp-block-group {
    margin-top: 20px !important;
}

body.hm-tm-app-page main.wp-block-group > .wp-block-group.has-global-padding {
    padding-top: 0 !important;
}

/* ---------------------------------------------------------------------
   Table Detail redesign (templates/table-detail.php).
   --------------------------------------------------------------------- */

/* Palette overrides scoped to Table Detail only, matching the approved
   temp-ui mockup's exact hex values -- redefining the shared custom
   properties here (rather than editing the .hm-tm-wrap/.hm-tm-browse
   definitions above) means Landing, Browse Tables, and the Host/Join forms
   keep their own existing palette untouched.

   max-width/margin here fix a real bug, not a style choice: Table Detail
   is injected into a block theme's own <div class="entry-content ...
   is-layout-constrained"> (confirmed directly on the sandbox theme), which
   caps every DIRECT CHILD it doesn't recognize as alignwide/alignfull to
   var(--wp--style--global--content-size) -- 645px on this theme,
   regardless of viewport width. That's what was squeezing the two-column
   layout (and, before the auto-fit fixes above, overflowing the stats/
   facts grids) even in a full-width desktop screenshot. !important because
   the theme's own global-styles rule and this one are comparable
   specificity, and which one loads last isn't something to rely on.
   Scoped to .hm-tm-wrap.hm-tm-detail specifically (not the bare
   .hm-tm-wrap other templates share) so Browse Tables, Landing, and the
   Host/Join forms are unaffected. */
.hm-tm-wrap.hm-tm-detail {
    --hm-tm-ink: #20242d;
    --hm-tm-muted: #66706b;
    --hm-tm-gold: #b98a34;
    --hm-tm-sage: #7f967c;
    --hm-tm-line: #e5ded1;
    --hm-tm-green: #0d4637;
    max-width: 1160px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.hm-tm-detail-hero {
    margin-bottom: 22px;
}

.hm-tm-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    gap: 24px;
    align-items: start;
}

/* .hm-tm-panel + .hm-tm-panel above adds a 20px gap between STACKED panels
   (Browse Tables' hero + card panel, Host Options' stacked cards, etc.) --
   but as an adjacent-sibling selector it doesn't know about layout
   context, so it was also firing here, where main+aside are side-by-side
   grid columns, not a vertical stack. That pushed the form panel 20px
   below the left panel's top edge despite align-items:start on the grid.
   Resets it back to 0 specifically inside the two-column layout, without
   touching the original stacked-panel behavior anywhere else. */
.hm-tm-detail-layout > .hm-tm-panel + .hm-tm-panel {
    margin-top: 0;
}

@media (max-width: 900px) {
    .hm-tm-detail-layout {
        grid-template-columns: 1fr;
    }
}

/* Schedule highlight -- Date and Time on their own lines (the strongest
   visual weight on the left panel, per the approved refinement), City /
   Venue / Host folded into one compact line beneath -- replaces the old
   full-width Date/Time/City/Venue/Host/Experience meta-rows table. */
.hm-tm-schedule {
    padding: 4px 0 16px;
    border-bottom: 1px solid var(--hm-tm-line);
}

.hm-tm-schedule-date {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    line-height: 1.25;
    color: var(--hm-tm-ink);
    margin-bottom: 2px;
}

.hm-tm-schedule-time {
    font-size: 18px;
    font-weight: 700;
    color: var(--hm-tm-green);
    margin-bottom: 4px;
}

.hm-tm-schedule-meta {
    color: var(--hm-tm-muted);
    font-size: 13px;
}

/* Compact Price / Experience / Availability / Capacity row, replacing the
   old large Price/Availability/Table-Capacity cards -- subtle spacing
   instead of boxes, matching the approved refinement's "reduce vertical
   height without reducing information" objective.

   auto-fit/minmax (not the approved reference's fixed repeat(4, 1fr) +
   viewport media queries) responds to the PANEL's actual available width,
   not the browser viewport -- Table Detail renders inside the theme's own
   post-content column, which can be much narrower than the viewport
   regardless of screen size (the same reason the 3-box stats grid in the
   previous mockup round needed the same fix). A fixed 4-column grid here
   squeezed every label/value into an unreadably narrow track on a narrow
   content column even at a wide desktop viewport. Column-gap spacing
   replaces the reference's per-item border-right dividers, since a
   vertical rule's position isn't well-defined once items can wrap to a
   new row -- gap alone still reads as "subtle dividers", not a boxed card. */
.hm-tm-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--hm-tm-line);
}

.hm-tm-fact {
    min-width: 0;
}

.hm-tm-fact-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #7a807c;
    margin-bottom: 4px;
    font-weight: 700;
}

.hm-tm-fact-value {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--hm-tm-green);
}

.hm-tm-fact-value.hm-tm-full {
    color: #a6453b;
}

@media (max-width: 520px) {
    .hm-tm-schedule-date {
        font-size: 21px;
    }

    .hm-tm-schedule-time {
        font-size: 17px;
    }
}

/* One shared section wrapper (About This Class / Class Details / What
   You'll Learn all flow inside it), matching the approved mockup -- only
   ever one top divider, not one per sub-heading. */
.hm-tm-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--hm-tm-line);
}

.hm-tm-section + .hm-tm-section {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.hm-tm-section h2 {
    font-size: 23px;
}

/* Tighter than the default .hm-tm-section spacing -- per the approved
   refinement, "About This Class" should begin noticeably higher than it
   used to, now that the schedule/facts summary above it is far more
   compact. */
.hm-tm-class-description {
    margin-top: 18px;
    padding-top: 18px;
}

/* Class Details / What You'll Learn read as sub-headings within the
   shared section -- real <h3>s (not a font-size override on <h2>), one
   level below "About This Class"'s own <h2>. font-weight is explicit here
   (not inherited) -- h3 isn't covered by .hm-tm-panel h1, h2's shared
   weight:500 rule, so without this it was falling through to an
   unrelated normal(400) default, reading noticeably thinner than every
   other heading on the page. */
.hm-tm-class-description h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    font-weight: 700;
    margin: 20px 0 8px;
    color: var(--hm-tm-ink);
}

/* Section titles ("About This Class" on the left, "Request a Seat" on the
   right) read bolder than the shared .hm-tm-panel h1, h2 weight:500 base
   -- scoped to Table Detail only so Host/Join and the other panels using
   that shared rule are unaffected. */
.hm-tm-detail .hm-tm-panel h2 {
    font-weight: 700;
}

.hm-tm-section p {
    color: #505853;
    margin: 0 0 12px;
}

.hm-tm-section p:last-child {
    margin-bottom: 0;
}

.hm-tm-description-list p {
    margin: 7px 0 !important;
    font-size: 13px;
}

/* Softer, non-alert treatment for the inline private-location note inside
   the description -- distinct from the gold-accented .hm-tm-note used for
   warnings/errors/success elsewhere on this page. */
.hm-tm-privacy-inline {
    background: #f2f5ef;
    border-left: none;
    border-radius: 14px;
    padding: 16px 18px;
    color: #48524c;
    margin-top: 18px;
}

/* Gold-accented footer note in the form panel, matching the approved
   mockup's .notice element -- only shown for private-residence tables. */
.hm-tm-notice {
    margin-top: 20px;
    background: #f5efe2;
    border-left: 3px solid var(--hm-tm-gold);
    padding: 13px 15px;
    border-radius: 8px;
    font-size: 13px;
    color: #565248;
}

/* Sticky on desktop only -- explicitly reverted to static under 900px, and
   treat the top offset as staging-verified rather than final: if the live
   theme's own header overlaps this panel, adjust --hm-tm-sticky-top (or
   drop the position entirely) rather than shipping an overlap just to
   match the mockup literally. */
.hm-tm-form-panel {
    position: sticky;
    top: var(--hm-tm-sticky-top, 20px);
}

@media (max-width: 900px) {
    .hm-tm-form-panel {
        position: static;
    }
}

.hm-tm-form-intro {
    margin-bottom: 18px;
}

.hm-tm-form-intro h2 {
    /* Matches the approved reference's explicit "Request a Seat" size
       (30px) -- left unset before, it was inheriting an unrelated ~32px
       default instead of a value tied to the reference. */
    font-size: 30px;
    margin-top: 10px;
}

/* Matches the mockup's H1 scale (38px) without touching .hm-tm-panel h1
   globally -- Host/Join and other panels keep their existing 40px size.
   font-weight:700 matches every other heading on this page (h2/h3 above)
   -- the mockup never overrides heading weight at all, so h1 through h3
   all share one consistent bold weight there, differing only in size. */
.hm-tm-detail .hm-tm-panel h1 {
    font-size: 38px;
    font-weight: 700;
}

/* Centered footer privacy line under the submit button, per the mockup's
   .privacy element -- scoped to the request form only. */
.hm-tm-privacy-note {
    text-align: center;
    margin-top: 10px;
}

/* Premium success state -- scoped to Table Detail only (.hm-tm-detail
   ancestor), not a global .hm-tm-success override, so the Community/Academy
   forms' existing success boxes are unaffected for now. Trivial to drop the
   .hm-tm-detail scope later if this should apply everywhere. */
.hm-tm-detail .hm-tm-success {
    background: #e8f5e9;
    border: 2px solid #4f7f5b;
    border-left: 6px solid #4f7f5b;
    color: #234d32;
    border-radius: 12px;
    padding: 18px 20px;
    margin: 20px 0;
}

.hm-tm-success-title {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

/* ---------------------------------------------------------------------
   Landing page redesign (templates/landing.php). Everything below is
   scoped under .hm-tm-landing so it can never affect Host Options, the
   Community/Academy forms, Browse Tables, Table Detail, or the rest of
   the Learn site -- landing.php is the only template that ever renders
   an element with this class.
   --------------------------------------------------------------------- */

.hm-tm-landing {
    max-width: 1280px;
    margin: 0 auto;
    /* Approved mockup's body font stack -- applied here so it's inherited
       by every non-heading element (paragraphs, checklist text, tabs,
       supporting copy, the Two Ways footer line, meta text) without
       needing a separate rule per selector. Headings and the primary CTA
       buttons keep their own explicit Georgia serif override below. */
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
    --hm-tm-headline: #252525;
    --hm-tm-gold-dark: #9c792f;
    --hm-tm-gold-soft: #f5ead3;
    --hm-tm-sage-dark: #5f7459;
    --hm-tm-sage-soft: #e8efe5;
    /* Restrained fallback tone for the feature cards -- only visible until
       assets/images/tablematch-feature-1.jpg / -2.jpg exist (see
       assets/images/README.md). Deliberately a soft mid-sage, not the dark
       forest tone the first landing pass used, so a card without a photo
       yet still reads as premium rather than "a green rectangle." */
    --hm-tm-feature-fallback: #a7b89f;
}

/* The site's own theme sets a global `a { color: ... !important; }` rule
   (confirmed against the live site's custom CSS). Any link on this page
   that needs a specific, non-default text color -- especially white text
   on a colored button -- must win against that with its own !important,
   or the theme's rule silently overrides it. Every such rule below is
   annotated with this same reason; it is not decorative use of !important. */

.hm-tm-landing-hero {
    margin-bottom: 34px;
}

.hm-tm-landing-hero h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
    font-size: 44px;
    line-height: 1.1;
    color: var(--hm-tm-headline);
    margin: 8px 0 10px;
}

.hm-tm-landing-hero p {
    font-size: 16px;
    color: var(--hm-tm-muted);
    max-width: 650px;
    margin: 0;
}

.hm-tm-landing-section-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    margin: 0 0 20px;
}

.hm-tm-landing-section-title h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
    font-size: 30px;
    margin: 0 0 4px;
    color: var(--hm-tm-headline);
}

.hm-tm-landing-section-title > div > p {
    margin: 0;
    color: var(--hm-tm-muted);
    font-size: 14px;
}

.hm-tm-landing-view-all {
    font-size: 14px;
    font-weight: 700;
    /* !important: wins against the theme's global a{color:...!important} -- see note above .hm-tm-landing-hero */
    color: var(--hm-tm-ink) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

/* Featured Tables -------------------------------------------------- */

.hm-tm-landing-featured-grid {
    display: grid;
    /* auto-fit, not a fixed 2-column grid -- a single featured table
       (or the section rendering only 1 real card) stretches to fill the
       row cleanly instead of leaving a blank second column. Same
       technique already used by .hm-tm-card-grid on Browse Tables. */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
}

.hm-tm-feature-card {
    position: relative;
    display: block;
    min-height: 258px;
    overflow: hidden;
    border-radius: 18px;
    background-color: var(--hm-tm-feature-fallback); /* restrained sage fallback until assets/images/tablematch-feature-1.jpg / -2.jpg exist -- see assets/images/README.md */
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 28px rgba(30, 40, 35, .10);
    border: 1px solid rgba(30, 45, 38, .08);
    text-decoration: none;
    color: #fff;
}

.hm-tm-feature-card::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Graduated overlay -- a light wash even at the top (keeps the badge/
       pill readable against a bright photo) grading to dark at the bottom,
       behind the text. Still deliberately lighter than a flat tint in the
       middle: the goal is a photographic card, not a green rectangle. */
    background: linear-gradient(
        180deg,
        rgba(20, 30, 25, .34) 0%,
        rgba(20, 30, 25, .40) 32%,
        rgba(20, 30, 25, .58) 62%,
        rgba(16, 24, 20, .92) 100%
    );
}

.hm-tm-feature-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    padding: 6px 10px;
    border-radius: 9px;
    background: rgba(242, 247, 240, .94);
    color: #4f6154;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.hm-tm-feature-seats {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    background: rgba(255, 248, 230, .96);
    color: #5c4c2f;
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.hm-tm-feature-content {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 2;
    color: #fff;
}

.hm-tm-feature-title {
    margin: 0 0 8px;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    line-height: 1.15;
    /* 500, not 600/700 -- matches the approved mockup's own h1/h2/h3 weight. */
    font-weight: 500;
}

.hm-tm-feature-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: rgba(255, 255, 255, .92);
    font-size: 13px;
    font-weight: 500;
}

.hm-tm-feature-chip {
    display: inline-flex;
    margin-top: 12px;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 7px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-size: 12px;
}

/* Zero-table empty state -- same premium champagne/sage language as the
   rest of the page, deliberately not styled like an error/warning notice. */
.hm-tm-landing-empty {
    text-align: center;
    padding: 48px 24px;
    border-radius: 18px;
    background: linear-gradient(180deg, var(--hm-tm-gold-soft), var(--hm-tm-sage-soft));
    border: 1px solid var(--hm-tm-line);
}

.hm-tm-landing-empty-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    color: var(--hm-tm-headline);
    margin: 0 0 6px;
}

.hm-tm-landing-empty p {
    margin: 0 0 18px;
    color: var(--hm-tm-muted);
}

.hm-tm-landing-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--hm-tm-gold);
    /* !important: wins against the theme's global a{color:...!important} -- see note above .hm-tm-landing-hero */
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
}

/* Primary actions ---------------------------------------------------- */

.hm-tm-landing-actions {
    display: grid;
    /* Same column definition as .hm-tm-landing-featured-grid (and the same
       800px collapse-to-1fr override below) so each button's column lines
       up exactly with the card above it -- no separate max-width here. */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    margin: 30px 0 0;
}

.hm-tm-landing-action-block {
    text-align: center;
}

.hm-tm-action-copy {
    /* 13px target (12-14px range) between the button's bottom edge and
       this text -- was 9px, which read as cramped. */
    margin: 13px auto 0;
    max-width: 430px;
    text-align: center;
    color: #656b67;
    font-size: 14px;
    line-height: 1.45;
}

.hm-tm-landing-action-btn {
    /* ~82% of the button's column (which now equals the card's column
       width above it), centered beneath the card -- was a fixed 470px
       that left the button looking detached/narrow under a wider card. */
    width: 82%;
    margin: 0 auto;
    min-height: 60px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    /* !important: wins against the theme's global a{color:...!important} -- this is
       the exact bug from the reported screenshot (CTA text rendering dark green). */
    color: #fff !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    font-weight: 400;
    box-shadow: 0 6px 16px rgba(50, 45, 30, .10);
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.hm-tm-landing-action-icon {
    /* Decorative outline icon -- stroke: currentColor so it always matches
       the button's own white text color, including if that color ever
       changes. Sized within the requested 14-16px range; margin-right
       within the requested 12-14px gap to the label. */
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    margin-right: 13px;
    stroke: currentColor;
}

.hm-tm-landing-action-btn:hover {
    transform: translateY(-1px);
    filter: brightness(.98);
    box-shadow: 0 9px 20px rgba(40, 45, 40, .12);
}

.hm-tm-landing-action-btn:focus-visible {
    outline: 2px solid var(--hm-tm-ink);
    outline-offset: 2px;
}

.hm-tm-landing-action-host {
    background: linear-gradient(90deg, #c79f4d, #d7b875);
}

.hm-tm-landing-action-join {
    background: linear-gradient(90deg, #7d9275, #9dac94);
}

/* Two Ways a Table Can Begin ----------------------------------------- */

.hm-tm-landing-two-ways {
    margin-top: 40px;
}

.hm-tm-landing-two-way-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.hm-tm-landing-two-way-card {
    background: #fff;
    border: 1px solid var(--hm-tm-line);
    border-radius: 16px;
    padding: 22px;
}

.hm-tm-landing-two-way-card h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
    font-size: 22px;
    margin: 10px 0 8px;
    color: var(--hm-tm-headline);
}

.hm-tm-landing-two-way-card p {
    margin: 0;
    font-size: 14px;
    color: #505651;
}

.hm-tm-landing-two-way-footer {
    margin-top: 10px !important;
}

.hm-tm-landing-two-way-host {
    background: linear-gradient(180deg, #fffdf7, #fffaf0);
    border-color: #e4cf9e;
}

.hm-tm-landing-two-way-join {
    background: linear-gradient(180deg, #fbfdf9, #f1f6ef);
    border-color: #cfdacb;
}

/* Integrated Host / Image / Join workspace section -------------------- */

.hm-tm-landing-workspace {
    margin-top: 46px;
    background: #fff;
    border: 1px solid var(--hm-tm-line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(35, 40, 37, .04);
}

.hm-tm-landing-tabs {
    display: flex;
    border-bottom: 1px solid var(--hm-tm-line);
    padding: 0 28px;
    gap: 28px;
}

.hm-tm-landing-tab {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    padding: 18px 6px 14px;
    /* 600, not 700 -- the non-active tab should read a little softer. */
    font-weight: 600;
    font-size: 15px;
    /* !important: wins against the theme's global a{color:...!important} -- see note above .hm-tm-landing-hero */
    color: var(--hm-tm-muted) !important;
    border-bottom: 3px solid transparent;
}

.hm-tm-landing-tab:hover {
    color: var(--hm-tm-ink) !important;
}

.hm-tm-landing-tab-active {
    font-weight: 700;
    /* !important: wins against the theme's global a{color:...!important} -- see note above .hm-tm-landing-hero */
    color: var(--hm-tm-gold-dark) !important;
    border-bottom-color: var(--hm-tm-gold);
}

.hm-tm-landing-workspace-combined {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr) minmax(0, 1fr);
    min-height: 300px;
}

.hm-tm-landing-workspace-copy {
    padding: 30px 28px;
}

.hm-tm-landing-workspace-copy h3 {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
    font-size: 23px;
    margin: 0 0 8px;
    color: var(--hm-tm-headline);
}

.hm-tm-landing-workspace-copy p {
    margin: 0;
    font-size: 14px;
    color: #555b57;
}

.hm-tm-landing-workspace-host {
    background: #fffaf0;
    border-right: 1px solid var(--hm-tm-line);
}

.hm-tm-landing-workspace-join {
    background: #f3f7f1;
    border-left: 1px solid var(--hm-tm-line);
}

.hm-tm-landing-check-list {
    display: grid;
    gap: 8px;
    margin: 16px 0;
}

.hm-tm-landing-check-item {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 14px;
    color: var(--hm-tm-ink);
}

.hm-tm-landing-check-dot {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--hm-tm-gold);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 11px;
    margin-top: 2px;
}

.hm-tm-landing-workspace-join .hm-tm-landing-check-dot {
    background: var(--hm-tm-sage);
}

.hm-tm-landing-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    border-radius: 7px;
    padding: 11px 18px;
    /* !important: wins against the theme's global a{color:...!important} -- see note above .hm-tm-landing-hero */
    color: #fff !important;
    /* 500, not 700 -- was reading heavier than the mockup's lower CTAs. */
    font-weight: 500;
    font-size: 14px;
    margin-top: 8px;
}

.hm-tm-landing-cta-host {
    background: var(--hm-tm-gold);
}

.hm-tm-landing-cta-join {
    background: var(--hm-tm-sage);
}

.hm-tm-landing-workspace-image {
    min-height: 300px;
    background-size: cover;
    /* tablematch-lifestyle.jpg is now the middle crop of the approved
       mockup's own hand/tiles/tea photo (badge and seats-pill corners
       trimmed off, since those were baked into that mockup export as
       pixels, not real card chrome) -- already well-framed, no manual
       offset needed. */
    background-position: center;
    /* landing.php sets background-image inline (the photo URL) -- inline
       styles always win over this stylesheet for that same property, so
       this rule intentionally does NOT also declare background-image
       (it would just be discarded). background-color IS a separate
       property the inline style never touches, so it's the real fallback:
       a flat, on-brand sage tint whenever the photo 404s (i.e. until
       assets/images/tablematch-lifestyle.jpg exists -- see
       assets/images/README.md), and simply hidden behind the photo once
       it loads successfully. */
    background-color: var(--hm-tm-sage-soft);
}

/* Community trust panel ------------------------------------------------ */

.hm-tm-landing-trust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 24px;
    padding: 16px 20px;
    background: #fffdf9;
    border: 1px solid #e8e1d6;
    border-radius: 14px;
}

.hm-tm-landing-trust-copy strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--hm-tm-headline);
}

.hm-tm-landing-trust-copy p {
    margin: 2px 0 0;
    font-size: 13px;
    color: #666b67;
}

.hm-tm-landing-trust-link {
    font-size: 13px;
    /* !important: wins against the theme's global a{color:...!important} -- see note above .hm-tm-landing-hero */
    color: #555b57 !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

/* Responsive -----------------------------------------------------------
   Breakpoints match the conventions already used elsewhere in this file:
   800px is where .hm-tm-actions-grid / .hm-tm-two-col already collapse to
   a single column; 900px matches Table Detail's own two-column collapse. */

@media (max-width: 900px) {
    .hm-tm-landing-workspace-combined {
        grid-template-columns: 1fr;
    }

    .hm-tm-landing-workspace-host,
    .hm-tm-landing-workspace-join {
        border: none;
    }

    .hm-tm-landing-workspace-join {
        border-top: 1px solid var(--hm-tm-line);
    }

    .hm-tm-landing-workspace-image {
        min-height: 200px;
    }
}

@media (max-width: 800px) {
    .hm-tm-landing-featured-grid,
    .hm-tm-landing-actions,
    .hm-tm-landing-two-way-grid {
        grid-template-columns: 1fr;
    }

    .hm-tm-landing-actions {
        gap: 20px;
    }

    .hm-tm-feature-card {
        min-height: 250px;
    }

    .hm-tm-landing-trust {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .hm-tm-landing-trust-link {
        white-space: normal;
    }
}

@media (max-width: 600px) {
    .hm-tm-landing-hero h1 {
        font-size: 34px;
    }

    .hm-tm-feature-title {
        font-size: 22px;
    }

    .hm-tm-landing-action-btn {
        font-size: 20px;
        min-height: 54px;
    }

    .hm-tm-landing-tabs {
        gap: 14px;
        padding: 0 16px;
    }
}

/* Inline note under a form field (e.g. "Only 1 seat is left on this table."). */
.hm-tm-field-note {
    margin: 6px 0 0;
    font-size: 13px;
    color: #6b7671;
}