/* ==========================================================================
   Public landing page

   Standalone from the app shell (no sidebar, no auth chrome) but built on the
   same design tokens, so brand colour, spacing and dark mode all follow the
   rest of the product rather than drifting into a separate look.
   ========================================================================== */

@import url('variables.css');

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

body.lp {
    font-family: var(--font-family);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background: var(--color-card-bg);
    -webkit-font-smoothing: antialiased;
    /* Nothing on this page should ever scroll sideways, whatever the width. */
    overflow-x: hidden;
}

.lp-wrap {
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

/* ==========================================================================
   Header
   ========================================================================== */

.lp-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--color-card-bg) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: var(--space-px) solid var(--color-border);
}

.lp-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    height: 4.25rem;
}

.lp-logo { display: flex; align-items: center; }
.lp-logo img { height: var(--space-9); width: auto; }
.lp-logo-dark { display: none; }
[data-theme="dark"] .lp-logo-light { display: none; }
[data-theme="dark"] .lp-logo-dark { display: block; }

.lp-nav {
    display: flex;
    align-items: center;
    gap: var(--space-7);
}

.lp-nav a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}
.lp-nav a:hover { color: var(--color-teal); }

.lp-header-actions { display: flex; align-items: center; gap: var(--space-3); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-input);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    border: var(--space-px) solid transparent;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    white-space: nowrap;
}

.lp-btn-primary { background: var(--color-teal); color: #FFFFFF; }
.lp-btn-primary:hover { background: var(--color-teal-hover); }

.lp-btn-ghost { color: var(--color-text); border-color: var(--color-border-strong); background: transparent; }
.lp-btn-ghost:hover { border-color: var(--color-teal); color: var(--color-teal); }

.lp-btn-lg { padding: var(--space-4) var(--space-6); font-size: var(--text-base); }

.lp-btn-on-teal { background: #FFFFFF; color: var(--color-teal); }
.lp-btn-on-teal:hover { background: rgba(255,255,255,0.9); }

.lp-btn-outline-light { border-color: rgba(255,255,255,0.45); color: #FFFFFF; }
.lp-btn-outline-light:hover { border-color: #FFFFFF; background: rgba(255,255,255,0.08); }

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

.lp-hero {
    position: relative;
    padding: var(--space-16) 0 var(--space-14);
    /* The photograph is the hero itself rather than an image placed beside the
       copy, so it runs full-bleed behind the whole section. */
    background-image: url('../../images/marketing/hero-analytics.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Painted behind the photograph so the band keeps its brand colour while
       the file loads, and stays readable if it never arrives. */
    background-color: var(--color-teal-active);
    color: #FFFFFF;
}

/* Brand-tinted scrim, weighted towards the left where the copy sits, so the
   text holds contrast while the chart detail on the right stays visible. */
.lp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(0,42,47,0.92) 0%, rgba(0,42,47,0.78) 42%, rgba(0,64,71,0.55) 100%);
    pointer-events: none;
}

/* Lifts the copy above the scrim. */
.lp-hero-inner { position: relative; z-index: 1; }

/* Without a second column the copy would otherwise run the full 72rem. */
.lp-hero-copy { max-width: 40rem; }

/* The eyebrow pill loses its pale teal fill against the photograph. */
.lp-hero .lp-eyebrow { background: rgba(255,255,255,0.16); color: #FFFFFF; }}

.lp-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
    align-items: center;
}

.lp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    background: var(--color-teal-ring);
    color: var(--color-teal);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
    margin-bottom: var(--space-5);
}

.lp-hero h1 {
    font-size: clamp(2.125rem, 4vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-5);
}

.lp-hero-lede {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: rgba(255,255,255,0.90);
    margin-bottom: var(--space-7);
    max-width: 34rem;
}

.lp-hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }

.lp-hero-note { font-size: var(--text-sm); color: rgba(255,255,255,0.72); }

/* Screenshot-style framing for the photograph. */
.lp-hero-media {
    position: relative;
    border-radius: var(--radius-card);
    overflow: hidden;
    border: var(--space-px) solid var(--color-border);
    box-shadow: var(--shadow-card);
    aspect-ratio: 16 / 10;
    background: var(--color-page-bg);
}

.lp-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* A light teal veil ties the stock photo to the brand palette without
   obscuring the chart detail that makes it relevant. */
.lp-hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(0,124,137,0.20), rgba(0,124,137,0.02) 60%);
    pointer-events: none;
}

/* ==========================================================================
   Stat strip
   ========================================================================== */

.lp-stats {
    border-top: var(--space-px) solid var(--color-border);
    border-bottom: var(--space-px) solid var(--color-border);
    background: var(--color-page-bg);
    padding: var(--space-8) 0;
}

.lp-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    text-align: center;
}

.lp-stat-value {
    font-size: var(--text-2xl);
    font-weight: var(--weight-semibold);
    color: var(--color-teal);
    letter-spacing: -0.02em;
}

.lp-stat-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

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

.lp-section { padding: var(--space-12) 0; }
.lp-section--muted { background: var(--color-page-bg); }

/* The header is sticky, so jumping to #features / #how / #deliverability
   would otherwise park the section heading underneath it. Offset by a little
   more than the header's own height. */
.lp-section[id],
.lp-stats[id] { scroll-margin-top: 5.5rem; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

.lp-section-head { max-width: 40rem; margin: 0 auto var(--space-10); text-align: center; }

.lp-section-head h2 {
    font-size: clamp(1.625rem, 2.6vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-3);
}

.lp-section-head p {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
}

/* ---- Feature grid ---- */
.lp-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.lp-feature {
    background: var(--color-card-bg);
    border: var(--space-px) solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-7);
}

.lp-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-11);
    height: var(--space-11);
    border-radius: var(--radius-input);
    background: var(--color-teal-ring);
    color: var(--color-teal);
    margin-bottom: var(--space-4);
}
.lp-feature-icon .material-symbols-rounded { font-size: 24px; }

.lp-feature h3 {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-2);
}

.lp-feature p {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
}

/* ---- Steps ---- */
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }

.lp-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-9);
    height: var(--space-9);
    border-radius: 999px;
    background: var(--color-teal);
    color: #FFFFFF;
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

.lp-step h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.lp-step p { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-text-muted); }

/* ==========================================================================
   CTA band
   ========================================================================== */

.lp-cta {
    background: linear-gradient(135deg, var(--color-teal-active), var(--color-teal));
    color: #FFFFFF;
    padding: var(--space-12) 0;
    text-align: center;
}

.lp-cta h2 {
    font-size: clamp(1.625rem, 2.6vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-3);
}

.lp-cta p {
    font-size: var(--text-base);
    color: rgba(255,255,255,0.88);
    max-width: 36rem;
    margin: 0 auto var(--space-7);
    line-height: var(--leading-relaxed);
}

.lp-cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

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

.lp-footer {
    background: var(--color-card-bg);
    border-top: var(--space-px) solid var(--color-border);
    padding: var(--space-10) 0 var(--space-8);
}

.lp-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

.lp-footer h4 {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-3);
}

.lp-footer-contact,
.lp-footer-links a {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
    text-decoration: none;
    display: block;
}
.lp-footer-links a:hover { color: var(--color-teal); }

.lp-footer-bottom {
    border-top: var(--space-px) solid var(--color-border);
    padding-top: var(--space-5);
    font-size: var(--text-xs);
    color: var(--color-text-disabled);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 62rem) {
    .lp-hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }

    /* The copy runs the full width at this size, so the scrim can no longer
       fade out to the right — there is text over that side of the photograph
       too, and the chart detail underneath is pale enough to swallow it. */
    .lp-hero::before { background: linear-gradient(180deg, rgba(0,42,47,0.90), rgba(0,42,47,0.80)); }
    .lp-hero-copy { max-width: none; }
    .lp-features { grid-template-columns: repeat(2, 1fr); }
    .lp-steps { grid-template-columns: 1fr; gap: var(--space-7); }
    .lp-footer-grid { grid-template-columns: 1fr 1fr; }
    .lp-nav { display: none; }
}

@media (max-width: 40rem) {
    .lp-features { grid-template-columns: 1fr; }
    .lp-stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-7); }
    .lp-footer-grid { grid-template-columns: 1fr; }
    .lp-hero { padding: var(--space-10) 0 var(--space-9); }
    .lp-section { padding: var(--space-10) 0; }
    .lp-hero-cta .lp-btn { flex: 1 1 100%; }

    /* Logo plus two buttons overflows a 390px viewport by a few pixels, which
       is enough to make the whole page scroll sideways. The header keeps only
       "Log in" — the primary call to action is the full-width button in the
       hero directly below, so nothing is lost. */
    .lp-header-actions .lp-btn-primary { display: none; }
    .lp-header-actions .lp-btn { padding: var(--space-2) var(--space-4); }
    .lp-wrap { padding: 0 var(--space-5); }
}