/* ==========================================================================
   Rentlys landing page

   THE THIRD PALETTE IS GONE. This file used to declare six colours of the
   Tailwind default ramp — an indigo, an emerald, two slates, a red and a
   violet — which the original audit named as one of the app's competing
   colour systems. Not one of them appears anywhere else in the product. Every
   value here now comes from css/rl/tokens.semantic.css, which index.php
   loads ahead of this file.

   WHAT THIS SURFACE IS ALLOWED THAT THE CONSOLE IS NOT. DESIGN.md §1 wants
   "nothing decorative, nothing celebratory, and no visual language that
   implies selling", and this page exists to sell. The concession taken is
   SCALE, not colour or motion: bigger type, more air, photographs at size,
   one loud call to action per screenful. What went with the palette is the
   part that was ornament rather than information — four infinite animations
   (float, shimmer, pulse-icon, pulse-badge), six decorative gradients, the
   gradient-clipped headline text, and a scattered rotated photo collage that
   needed six hard-coded z-indexes to hold itself up.

   ONE DECLARED EXCEPTION, not an oversight: .hero-title is 2.5rem, above
   --text-h1. DESIGN.md §3 says "no display size, this product has no hero"
   — and that is true of the console, which is the product. This page is the
   advertisement for it, and it does have a hero. The exception is exactly
   one selector on exactly one surface; every other size on this page comes
   from the type scale.

   Lengths are rem or --space-*; media queries are in em so a raw px never
   appears. Durations come from --duration-*; "transition: all" is never
   right and is gone everywhere (§9).
   ========================================================================== */

body {
    overflow-x: hidden;
}

/* ==========================================================================
   Navbar
   ========================================================================== */

/* sticky, not fixed. Fixed took the navbar out of flow, so the banner below
   it carried a hard-coded top offset and the hero a hard-coded top padding
   — magic numbers that had to agree with the navbar's height at every
   breakpoint, and did not. Sticky is in flow, so all three are deleted. */
.navbar-modern {
    position: sticky;
    top: 0;
    background-color: var(--color-bg-surface);
    border-bottom: 1px solid var(--color-border-subtle);
    padding: var(--space-12) 0;
    z-index: var(--z-sticky);
}

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

.nav-link-modern {
    color: var(--color-fg-muted);
    font-weight: var(--weight-medium);
    padding: var(--space-8) var(--space-16);
    border-radius: var(--radius-sm);
}

.nav-link-modern:hover,
.nav-link-modern:focus-visible {
    color: var(--color-fg-default);
    background-color: var(--color-bg-sunken);
}

.btn-tenant,
.btn-landlord {
    border-radius: var(--radius-sm);
    font-weight: var(--weight-medium);
    padding: var(--space-8) var(--space-16);
}

/* Secondary and primary, not two brand colours. Two portals is a routing
   choice, not two products, and the accent is for actions only (§7). */
.btn-tenant {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    color: var(--color-fg-default);
}

.btn-tenant:hover {
    background-color: var(--color-bg-sunken);
    color: var(--color-fg-default);
}

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

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

/* ==========================================================================
   Marketplace strip

   Was a fixed, gradient, shimmering bar with a pulsing "NEW" badge. It is
   now one line of ink on the sunken ground with a link — it says the same
   thing and stops competing with the hero for the first look.
   ========================================================================== */

.marketplace-banner {
    background-color: var(--color-bg-sunken);
    border-bottom: 1px solid var(--color-border-subtle);
    padding: var(--space-12) 0;
}

.banner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-16);
    flex-wrap: wrap;
}

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

.banner-text {
    color: var(--color-fg-default);
    font-size: var(--text-body);
}

.banner-text .highlight {
    font-weight: var(--weight-medium);
}

.banner-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-16);
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    color: var(--color-fg-default);
    text-decoration: none;
    font-weight: var(--weight-medium);
    min-height: var(--tap-target);
}

.banner-cta:hover {
    background-color: var(--color-action-subtle);
    color: var(--color-fg-default);
}

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

.hero-modern {
    background-color: var(--color-bg-page);
    padding: var(--space-48) 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);
    margin-bottom: var(--space-24);
}

/* Was gradient-clipped text. Background-clip text cannot be selected by a
   screen reader's highlight, fails in forced-colours mode, and put a second
   accent on the one line of the page that needs to be legible. */
.hero-title .highlight {
    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);
    margin-bottom: var(--space-32);
}

.hero-cta {
    display: flex;
    gap: var(--space-12);
    flex-wrap: wrap;
}

.hero-stats h3 {
    color: var(--color-fg-default);
    font-variant-numeric: tabular-nums;
}

.btn-cta-primary,
.btn-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-24);
    border-radius: var(--radius-sm);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    min-height: var(--tap-target);
}

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

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

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

.btn-cta-secondary:hover {
    background-color: var(--color-bg-sunken);
    color: var(--color-fg-default);
}

/* ==========================================================================
   Photo grid

   Was six absolutely positioned, rotated, hover-scaled tiles stacked with
   z-index 2 through 100. A grid shows the same six photographs, reflows on
   its own at every width, and needs no stacking context at all.
   ========================================================================== */

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

.collage-item {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border-subtle);
    aspect-ratio: 4 / 3;
}

.collage-main {
    grid-column: span 2;
    grid-row: span 2;
}

.collage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Trust marks. Static, in flow, below the photographs — they used to float
   over them on a never-ending loop. */
.trust-marks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
    margin-top: var(--space-16);
}

.trust-mark {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--text-small);
    color: var(--color-fg-muted);
}

.trust-mark i {
    color: var(--color-fg-default);
    font-size: var(--text-h3);
}

/* ==========================================================================
   Sections
   ========================================================================== */

.section-features {
    background-color: var(--color-bg-surface);
}

.section-heading {
    color: var(--color-fg-default);
    font-weight: var(--weight-medium);
}

.section-subheading {
    max-width: var(--measure);
}

.feature-card-modern {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-24);
    height: 100%;
}

.feature-icon-modern {
    width: var(--space-48);
    height: var(--space-48);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-sunken);
    color: var(--color-fg-default);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-h2);
    margin-bottom: var(--space-16);
}

.feature-card-modern h4 {
    color: var(--color-fg-default);
    font-size: var(--text-h3);
    font-weight: var(--weight-medium);
    margin-bottom: var(--space-8);
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.section-testimonials {
    background-color: var(--color-bg-page);
}

.testimonial-modern {
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-24);
    height: 100%;
}

.avatar-circle {
    width: var(--space-48);
    height: var(--space-48);
    border-radius: var(--radius-full);
    background-color: var(--color-bg-sunken);
    color: var(--color-fg-default);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--weight-medium);
    flex-shrink: 0;
}

/* ==========================================================================
   Pricing
   ========================================================================== */

.section-pricing {
    background-color: var(--color-bg-surface);
}

.plan-price {
    font-size: var(--text-h1);
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
}

.plan-capacity {
    color: var(--color-fg-muted);
    font-size: var(--text-small);
}

/* The "most popular" plan is marked by a border and a label, not by a fill.
   A filled card would be the loudest thing on the page and the actual
   primary action is the button inside it. */
.plan-card--popular {
    border-color: var(--color-action-default);
}

.plan-flag {
    display: inline-block;
    padding: var(--space-4) var(--space-12);
    border-radius: var(--radius-full);
    background-color: var(--color-action-subtle);
    color: var(--color-action-default);
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
}

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

.section-cta {
    background-color: var(--color-action-default);
}

.section-cta,
.section-cta h2,
.section-cta p {
    color: var(--color-fg-on-action);
}

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

.site-footer {
    background-color: var(--color-fg-default);
    color: var(--color-fg-inverse);
}

.site-footer h6 {
    color: var(--color-fg-inverse);
}

/* app.css gives <hr> the decorative hairline, which is a light value and
   disappears on this ground. currentColor keeps it visible without adding
   a token for one rule. */
.site-footer hr {
    border-top-color: currentColor;
    opacity: 0.25;
}

.footer-logo {
    height: var(--space-32);
    width: auto;
    margin-bottom: var(--space-16);
}

.footer-lede {
    color: var(--color-fg-inverse);
    opacity: 0.75;
}

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

.footer-links a,
.site-footer .copyright {
    color: var(--color-fg-inverse);
    opacity: 0.75;
    text-decoration: none;
}

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

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

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

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

@media (max-width: 63.99em) {
    .hero-modern {
        padding: var(--space-32) 0;
    }

    .collage-container {
        margin-top: var(--space-32);
    }
}

@media (max-width: 47.99em) {
    .hero-title {
        font-size: var(--text-h1);
    }

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

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

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

    .collage-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .collage-main {
        grid-column: span 2;
        grid-row: auto;
    }
}