/* ==========================================================================
   Rentlys marketplace — the public storefront

   THE FOURTH PALETTE WENT FIRST, AND NOW SO HAS THE ALIAS LAYER THAT
   REPLACED IT. This file used to declare its own brand ramp (navy, blue,
   green, teal) plus two gradients and two blue shadows. That became a set
   of --rentlys-* aliases pointing at semantic tokens, which was one
   indirection too many: store.php and unit.php were reading those aliases
   from their own <style> blocks, so a sheet they did not own defined half
   their vocabulary. Every rule now names the semantic token directly.

   WHY THIS SURFACE GETS A DIFFERENT ANSWER TO §1. DESIGN.md §1 says
   "nothing decorative, nothing celebratory, and no visual language that
   implies selling" — and the marketplace is a storefront, so that argument
   is at its weakest here. The line drawn: the marketplace may spend
   generously on SIZE, SPACE and PHOTOGRAPHY, because a person choosing
   where to live is buying with their eyes and the listing photograph is
   the product. It may not spend on COLOUR or MOTION, because those two are
   how the rest of the product says "rent is overdue" and "this repair is
   urgent", and a storefront that borrows them teaches the visitor to
   misread the portal they end up in.

   So what is gone here, with no marketplace exemption:
     • the infinite `pulse` on the live badge and the infinite `heartbeat`
       on the feature pill. §9 is functional motion only; a badge that
       throbs forever is neither functional nor ignorable.
     • every `transition: all` — never right, it animates layout and
       colour together and costs a repaint on properties nobody changed.
     • the two decorative SVG wave layers (hero and CTA), which carried a
       raw hex of their own inside a data URI where no linter could see it.
     • the hover lifts (translateY on cards, buttons, pills, links). Colour
       and border already say "this is interactive".

   Lengths are rem or --space-*; media queries are in em so no raw px
   reaches this file. Durations come from --duration-*.
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg-page);
    color: var(--color-fg-default);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.marketplace-hero {
    background-color: var(--color-bg-sunken);
    padding: var(--space-24) 0 var(--space-48);
}

/* Top bar */
.hero-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-32);
    gap: var(--space-16);
    flex-wrap: wrap;
}

.logo-container { flex-shrink: 0; }

.marketplace-logo {
    height: var(--space-32);
    width: auto;
}

.nav-auth-container {
    display: flex;
    align-items: center;
    gap: var(--space-24);
    flex-wrap: wrap;
}

.quick-nav {
    display: flex;
    gap: var(--space-8);
}

.nav-item,
.btn-auth-login,
.btn-auth-signup {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-16);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    min-height: var(--tap-target);
    transition: background-color var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out),
                color var(--duration-base) var(--ease-out);
}

.nav-item,
.btn-auth-login {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    color: var(--color-fg-default);
}

.nav-item:hover,
.nav-item.active,
.btn-auth-login:hover {
    background-color: var(--color-action-subtle);
    border-color: var(--color-action-default);
    color: var(--color-action-default);
}

.btn-auth-signup {
    background-color: var(--color-action-default);
    border: 1px solid var(--color-action-default);
    color: var(--color-fg-on-action);
}

.btn-auth-signup:hover {
    background-color: var(--color-action-hover);
    border-color: var(--color-action-hover);
    color: var(--color-fg-on-action);
}

.nav-item i { font-size: var(--text-h2); }

.auth-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

/* Hero content */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-4) var(--space-12);
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-full);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--color-fg-muted);
}

/* Was a dot pulsing forever. It is a dot. */
.pulse-dot {
    width: var(--space-8);
    height: var(--space-8);
    background-color: var(--color-status-paid-fg);
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: var(--weight-medium);
    color: var(--color-fg-default);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-h1);
}

/* Was -webkit-background-clip: text over a gradient. */
.gradient-text {
    color: var(--color-action-default);
}

.hero-subtitle {
    font-size: var(--text-h2);
    color: var(--color-fg-muted);
    line-height: var(--leading-body);
    max-width: var(--measure);
}

/* Search */
.search-form-hero {
    display: flex;
    gap: var(--space-12);
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    padding: var(--space-12);
    border-radius: var(--radius-md);
}

.search-input-group {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: 0 var(--space-12);
}

.search-input-group i {
    font-size: var(--text-h2);
    color: var(--color-fg-muted);
}

.search-input-group input {
    flex: 1;
    border: none;
    outline: none;
    font-size: var(--text-body);
    color: var(--color-fg-default);
    background-color: transparent;
    min-height: var(--tap-target);
}

.search-input-group input::placeholder { color: var(--color-fg-muted); }

/* --color-border-default, never --color-border-subtle: this is an input,
   and the decorative hairline on a form control is the one thing §2 bans
   outright. */
.search-select {
    padding: var(--space-8) var(--space-16);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    font-size: var(--text-body);
    color: var(--color-fg-default);
    background-color: var(--color-bg-surface);
    cursor: pointer;
    min-height: var(--tap-target);
    min-width: 9rem;
}

.search-select:focus,
.search-input-group input:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.btn-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-32);
    background-color: var(--color-action-default);
    color: var(--color-fg-on-action);
    border: 1px solid var(--color-action-default);
    border-radius: var(--radius-sm);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    min-height: var(--tap-target);
    cursor: pointer;
    transition: background-color var(--duration-base) var(--ease-out);
}

.btn-search:hover {
    background-color: var(--color-action-hover);
    border-color: var(--color-action-hover);
}

/* Quick stats */
.quick-stats {
    display: flex;
    align-items: center;
    gap: var(--space-24);
    flex-wrap: wrap;
}

.quick-stat {
    font-size: var(--text-body);
    color: var(--color-fg-muted);
}

.quick-stat strong {
    color: var(--color-fg-default);
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
}

/* A hairline, expressed as a border so it reads as one: a bare `width:
   1px` is a spacing decision as far as the token lint is concerned, and
   it is right to ask. */
.stat-divider {
    width: 0;
    height: var(--space-24);
    border-left: 1px solid var(--color-border-default);
}

/* Feature pills */
.feature-pills {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-16);
}

.feature-pill {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-16);
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
}

.feature-pill i {
    font-size: var(--text-h2);
    color: var(--color-fg-muted);
}

.feature-pill span {
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    color: var(--color-fg-default);
}

/* The one pill that is the page's own call to action. Accent fill, no
   heartbeat animation. */
.feature-pill.highlight {
    background-color: var(--color-action-default);
    border-color: var(--color-action-default);
}

.feature-pill.highlight i,
.feature-pill.highlight span { color: var(--color-fg-on-action); }

/* ==========================================================================
   Section headers
   ========================================================================== */

.section-header {
    text-align: center;
    margin-bottom: var(--space-48);
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    margin-bottom: var(--space-16);
    color: var(--color-fg-muted);
}

.section-badge i { font-size: var(--text-h2); }

.section-badge span {
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
}

.section-title {
    font-size: 2rem;
    font-weight: var(--weight-medium);
    color: var(--color-fg-default);
    line-height: var(--leading-heading);
    margin-bottom: var(--space-12);
}

.section-subtitle {
    font-size: var(--text-h2);
    color: var(--color-fg-muted);
    max-width: var(--measure);
    margin: 0 auto;
}

/* ==========================================================================
   Agents
   ========================================================================== */

.agents-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-24);
}

.agent-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-24) var(--space-16);
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color var(--duration-base) var(--ease-out);
}

.agent-card:hover { border-color: var(--color-action-default); }

.agent-avatar {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-16);
    flex-shrink: 0;
}

.agent-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--color-bg-sunken);
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-placeholder i {
    font-size: var(--text-h1);
    color: var(--color-fg-muted);
}

.agent-name {
    font-size: var(--text-body);
    font-weight: var(--weight-medium);
    color: var(--color-fg-default);
    margin-bottom: var(--space-4);
    text-align: center;
}

.agent-listings {
    font-size: var(--text-small);
    color: var(--color-fg-muted);
    margin-bottom: var(--space-8);
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-small);
    /* The one genuinely stateful mark on this surface: a verified listing
       is the all-clear, so it takes the paid token rather than the accent
       everything else that used to be green now takes. */
    color: var(--color-status-paid-fg);
    font-weight: var(--weight-medium);
}

.verified-badge i { font-size: var(--text-body); }

/* ==========================================================================
   Listings
   ========================================================================== */

.listings-section {
    padding: var(--space-64) 0;
    background-color: var(--color-bg-surface);
}

.listings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-32);
}

.listing-card {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: border-color var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

/* An author `display: flex` beats the user agent's `[hidden] {display:none}`,
   so a filtered-out card would stay on screen. store.php's type filter hides
   cards with the native attribute, and this is what makes it take. */
.listing-card[hidden] { display: none; }

/* One shadow step on hover, no lift. Separation comes from spacing and
   border first, shadow last (§6). */
.listing-card:hover {
    border-color: var(--color-action-default);
    box-shadow: var(--shadow-floating);
}

.listing-image-wrapper {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--color-bg-sunken);
}

.listing-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* A listing with no photograph yet. Says so in words on the sunken ground
   rather than fetching a picture of the words from placehold.co — which is
   what store.php used to do, with two raw hexes in the query string. */
.listing-image--none {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    color: var(--color-fg-muted);
    font-size: var(--text-small);
}

.listing-image--none i { font-size: var(--text-h1); }

.listing-badges {
    position: absolute;
    top: var(--space-12);
    left: var(--space-12);
    display: flex;
    gap: var(--space-8);
}

/* Was `color: var(--color-status-due-fg)` immediately overridden by
   `color: white` on the next line, which shipped a white label on a pale
   amber tint — about 1.4:1. The second declaration is deleted, not the
   first. */
.badge-featured,
.badge-type {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-full);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
}

.badge-featured {
    background-color: var(--color-status-due-bg);
    color: var(--color-status-due-fg);
}

.badge-type {
    background-color: var(--color-bg-surface);
    color: var(--color-fg-default);
}

/* The hover overlay is a scrim carrying a label, so it is information, not
   decoration — but it must never be the only way to reach the listing. The
   whole card is the link. */
.listing-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-24);
    background-color: var(--color-bg-overlay);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
}

.listing-card:hover .listing-overlay,
.listing-card:focus-visible .listing-overlay { opacity: 1; }

.view-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    color: var(--color-fg-inverse);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
}

/* Listing content */
.listing-content {
    padding: var(--space-24);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.listing-price {
    font-size: var(--text-h2);
    font-weight: var(--weight-medium);
    color: var(--color-fg-default);
    font-variant-numeric: tabular-nums;
    margin-bottom: var(--space-8);
}

.price-period {
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    color: var(--color-fg-muted);
}

.listing-title {
    font-size: var(--text-h3);
    font-weight: var(--weight-medium);
    color: var(--color-fg-default);
    margin-bottom: var(--space-8);
    line-height: var(--leading-h3);
}

.listing-location {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--text-body);
    color: var(--color-fg-muted);
    margin-bottom: var(--space-16);
}

.listing-location i {
    color: var(--color-fg-muted);
    font-size: var(--text-h3);
}

.listing-meta {
    display: flex;
    gap: var(--space-16);
    padding: var(--space-16) 0;
    border-top: 1px solid var(--color-border-subtle);
    margin-top: auto;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-small);
    color: var(--color-fg-muted);
}

.meta-item i {
    color: var(--color-fg-muted);
    font-size: var(--text-body);
}

.listing-agent {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--text-small);
    color: var(--color-fg-default);
    font-weight: var(--weight-medium);
    padding-top: var(--space-16);
    border-top: 1px solid var(--color-border-subtle);
}

.listing-agent i {
    color: var(--color-fg-muted);
    font-size: var(--text-h3);
}

/* Empty state — its own message, not a shared shrug (§7). */
.empty-state {
    text-align: center;
    padding: var(--space-64) var(--space-32);
}

.empty-icon {
    width: var(--space-64);
    height: var(--space-64);
    margin: 0 auto var(--space-24);
    background-color: var(--color-bg-sunken);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-icon i {
    font-size: var(--text-h1);
    color: var(--color-fg-muted);
}

.empty-state h4 {
    font-size: var(--text-h2);
    font-weight: var(--weight-medium);
    color: var(--color-fg-default);
    margin-bottom: var(--space-8);
}

.empty-state p {
    color: var(--color-fg-muted);
    margin-bottom: var(--space-24);
}

.btn-primary-custom {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-24);
    background-color: var(--color-action-default);
    color: var(--color-fg-on-action);
    border: 1px solid var(--color-action-default);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: var(--weight-medium);
    min-height: var(--tap-target);
    transition: background-color var(--duration-base) var(--ease-out);
}

.btn-primary-custom:hover {
    background-color: var(--color-action-hover);
    border-color: var(--color-action-hover);
    color: var(--color-fg-on-action);
}

/* ==========================================================================
   Closing call to action
   ========================================================================== */

.cta-section {
    padding: var(--space-64) 0;
    background-color: var(--color-action-default);
}

.cta-content {
    text-align: center;
    color: var(--color-fg-on-action);
}

.cta-icon {
    width: var(--space-48);
    height: var(--space-48);
    margin: 0 auto var(--space-24);
    border: 1px solid currentColor;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-icon i {
    font-size: var(--text-h2);
    color: var(--color-fg-on-action);
}

.cta-content h2 {
    font-size: 2rem;
    font-weight: var(--weight-medium);
    line-height: var(--leading-heading);
    margin-bottom: var(--space-16);
}

.cta-content p {
    font-size: var(--text-h2);
    margin-bottom: var(--space-32);
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-16);
    margin-bottom: var(--space-32);
}

.btn-cta-primary,
.btn-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-32);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    min-height: var(--tap-target);
    transition: background-color var(--duration-base) var(--ease-out);
}

.btn-cta-primary {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-bg-surface);
    color: var(--color-action-default);
}

.btn-cta-primary:hover {
    background-color: var(--color-bg-sunken);
    border-color: var(--color-bg-sunken);
    color: var(--color-action-hover);
}

.btn-cta-secondary {
    background-color: transparent;
    color: var(--color-fg-on-action);
    border: 1px solid currentColor;
}

.btn-cta-secondary:hover {
    background-color: var(--color-action-hover);
    color: var(--color-fg-on-action);
}

.cta-features {
    display: flex;
    justify-content: center;
    gap: var(--space-32);
    flex-wrap: wrap;
}

.cta-features span {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--text-body);
}

.cta-features i {
    font-size: var(--text-h2);
    color: var(--color-fg-on-action);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.marketplace-footer {
    background-color: var(--color-fg-default);
    color: var(--color-fg-inverse);
    position: relative;
}

/* Was a three-stop gradient rule across the top edge. One accent hairline
   says the same thing. */
.footer-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    border-top: 3px solid var(--color-action-default);
}

.footer-brand { margin-bottom: var(--space-16); }

.footer-logo {
    height: var(--space-32);
    width: auto;
    filter: brightness(0) invert(1);
}

.footer-description,
.footer-text,
.copyright {
    color: var(--color-fg-inverse);
    opacity: 0.75;
    font-size: var(--text-body);
    line-height: var(--leading-body);
}

.footer-description { margin-bottom: var(--space-24); }
.footer-text { margin-bottom: var(--space-16); }
.copyright { margin: 0; font-size: var(--text-small); }

.footer-social {
    display: flex;
    gap: var(--space-12);
}

.social-link {
    width: var(--tap-target);
    height: var(--tap-target);
    border: 1px solid currentColor;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-fg-inverse);
    text-decoration: none;
    transition: background-color var(--duration-base) var(--ease-out);
}

.social-link:hover {
    background-color: var(--color-action-default);
    border-color: var(--color-action-default);
    color: var(--color-fg-on-action);
}

.social-link i { font-size: var(--text-h2); }

.footer-heading {
    color: var(--color-fg-inverse);
    font-weight: var(--weight-medium);
    font-size: var(--text-h3);
    margin-bottom: var(--space-16);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li { margin-bottom: var(--space-12); }

.footer-links a {
    color: var(--color-fg-inverse);
    opacity: 0.75;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--text-body);
}

.footer-links a:hover,
.footer-links a:focus-visible {
    opacity: 1;
    text-decoration: underline;
}

.btn-footer-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-12) var(--space-24);
    background-color: var(--color-action-default);
    border: 1px solid var(--color-action-default);
    color: var(--color-fg-on-action);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    min-height: var(--tap-target);
    transition: background-color var(--duration-base) var(--ease-out);
}

.btn-footer-cta:hover {
    background-color: var(--color-action-hover);
    border-color: var(--color-action-hover);
    color: var(--color-fg-on-action);
}

.footer-stats {
    display: flex;
    gap: var(--space-24);
    margin-top: var(--space-24);
}

.footer-stat {
    display: flex;
    flex-direction: column;
}

.footer-stat strong {
    font-size: var(--text-h2);
    font-weight: var(--weight-medium);
    color: var(--color-fg-inverse);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-heading);
}

.footer-stat span {
    font-size: var(--text-small);
    color: var(--color-fg-inverse);
    opacity: 0.75;
    margin-top: var(--space-4);
}

.footer-bottom {
    border-top: 1px solid currentColor;
    padding: var(--space-24) 0;
}

.footer-badges {
    display: flex;
    gap: var(--space-16);
    justify-content: flex-end;
}

.footer-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-4) var(--space-16);
    border: 1px solid currentColor;
    border-radius: var(--radius-full);
    font-size: var(--text-small);
    color: var(--color-fg-inverse);
    opacity: 0.8;
}

.footer-badge i { font-size: var(--text-h3); }

/* ==========================================================================
   Responsive — em, so no raw px reaches a media query.
   80em = 1280 (--bp-xl) · 64em = 1024 (--bp-lg) · 48em = 768 (--bp-md)
   · 30em = 480 (--bp-sm)
   ========================================================================== */

@media (max-width: 79.99em) {
    .agents-grid { grid-template-columns: repeat(4, 1fr); }
    .listings-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 63.99em) {
    .hero-title { font-size: 2rem; }

    .search-form-hero {
        flex-direction: column;
    }

    .search-input-group {
        padding: var(--space-12);
        background-color: var(--color-bg-page);
        border-radius: var(--radius-sm);
    }

    .search-select,
    .btn-search { width: 100%; }

    .feature-pills {
        grid-template-columns: 1fr;
        margin-top: var(--space-32);
    }

    .agents-grid { grid-template-columns: repeat(3, 1fr); }

    .section-title { font-size: var(--text-h1); }
}

@media (max-width: 47.99em) {
    .hero-top-bar {
        flex-direction: column;
        gap: var(--space-16);
    }

    .nav-auth-container {
        width: 100%;
        justify-content: center;
    }

    .hero-title { font-size: var(--text-h1); }
    .hero-subtitle { font-size: var(--text-body); }

    .quick-stats {
        flex-direction: column;
        gap: var(--space-8);
        align-items: flex-start;
    }

    .stat-divider { display: none; }

    .agents-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-16);
    }

    .listings-grid { grid-template-columns: 1fr; }

    .cta-content h2 { font-size: var(--text-h1); }

    .cta-buttons { flex-direction: column; }

    .btn-cta-primary,
    .btn-cta-secondary { width: 100%; justify-content: center; }

    .cta-features {
        flex-direction: column;
        gap: var(--space-12);
    }

    .footer-badges {
        justify-content: center;
        margin-top: var(--space-16);
    }

    .footer-stats { justify-content: center; }

    .btn-footer-cta { width: 100%; justify-content: center; }
}

@media (max-width: 29.99em) {
    .marketplace-hero { padding: var(--space-16) 0 var(--space-32); }

    .agent-card { padding: var(--space-16) var(--space-12); }

    .agent-avatar {
        width: var(--space-48);
        height: var(--space-48);
    }

    .listing-content { padding: var(--space-16); }
}