/**
 * Landing page styles.
 *
 * design-system.css (loaded before this file) defines the shared
 * deep-charcoal/brass/ivory palette used across the app, admin, and
 * marketing pages. This file is intentionally the ONLY place new
 * marketing-specific tokens/rules live (--lux-accent-rgb, --font-mono,
 * the dark-hero/announcement-bar/hero-visual system below) — it's only
 * loaded by index.html and pricing.html, so nothing here ever reaches
 * the app or admin screens, and design-system.css itself stays
 * untouched by this redesign.
 */

:root {
    /* Deeper shadows and sharper corners than the shared app default —
       intentional for this page's more editorial, less data-dense feel. */
    --shadow-sm: 0 1px 2px rgba(10, 10, 11, 0.05);
    --shadow-md: 0 8px 20px -6px rgba(10, 10, 11, 0.12);
    --shadow-lg: 0 20px 40px -12px rgba(10, 10, 11, 0.22);
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;
    --radius-xl: 6px;

    --lux-line-dark: rgba(246, 243, 236, 0.12);
    --lux-line-dark-faint: rgba(246, 243, 236, 0.07);

    /* Same color as --lux-accent (#b68a4e), as a bare "r, g, b" triplet
       so canvas/rgba() contexts (the hero's cursor-reactive light bands,
       drawn in landing.js) and the CSS band fallback below can both
       build translucent fills from it. Keep in sync with
       design-system.css's --lux-accent by hand — there's no way to
       derive one token from the other in plain CSS. */
    --lux-accent-rgb: 182, 138, 78;

    /* System monospace only — no font request, no new network cost.
       Used sparingly (ticker labels, timestamps, capability chips) for
       a "data terminal" texture against the sans-serif headline type. */
    --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

body {
    overflow-x: hidden;
    background: var(--lux-ivory);
}

html {
    scroll-behavior: smooth;
}

/* ---- Small uppercase eyebrow label, reused above every section heading ---- */

.eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    /* One step darker than --lux-accent-text: at 12px on the ivory
       background that token is 4.33:1, just under AA. Dark-section
       eyebrows (.hero, .statement) override this to --lux-accent-text
       itself, which is the correct, already-proven-legible weight
       against near-black (see the hero's existing use of it). */
    color: #82612e;
    margin-bottom: 1.25rem;
}

/* ---- Scroll reveal: subtle fade + rise, no bounce. Elements start
   hidden via .reveal and get .in-view added by an IntersectionObserver
   in landing.js. Falls back to fully visible if JS never runs or the
   visitor prefers reduced motion. ---- */

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ===================== Announcement bar ===================== */

.announcement-bar {
    background: var(--lux-black);
    border-bottom: 1px solid var(--lux-line-dark);
    text-align: center;
    padding: 0.625rem 1.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: rgba(246, 243, 236, 0.72);
}

.announcement-bar a {
    color: var(--lux-accent-text);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(143, 108, 58, 0.5);
}

.announcement-bar a:hover {
    border-bottom-color: var(--lux-accent-text);
}

/* ===================== Site header (dark, wraps the nav) ===================== */

.site-header {
    background: var(--lux-black);
}

.landing-nav {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem;
}

.landing-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 800;
    font-size: 1.0625rem;
    letter-spacing: -0.01em;
    color: var(--lux-ivory);
    white-space: nowrap;
}

.landing-brand-icon {
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--lux-accent);
    border-radius: var(--radius-sm);
    padding: 0.3125rem;
    color: var(--lux-accent-text);
    flex-shrink: 0;
}

.landing-nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: rgba(246, 243, 236, 0.65);
}

.landing-nav-links a {
    transition: color 0.2s ease;
    /* Every link (and "Trust & Security" in particular, the longest
       one) must stay on one line -- see the nav's own media query
       below for why this alone isn't enough down to mobile widths. */
    white-space: nowrap;
}

.landing-nav-links a:hover {
    color: var(--lux-ivory);
}

.nav-current {
    color: var(--lux-ivory);
    font-weight: 700;
}

.nav-client-login {
    padding: 0.5rem 1rem;
    border: 1px solid var(--lux-line-dark);
    border-radius: var(--radius-sm);
    color: rgba(246, 243, 236, 0.85) !important;
}

.nav-client-login:hover {
    border-color: var(--lux-accent);
    color: var(--lux-ivory) !important;
}

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

.hero {
    position: relative;
    overflow: hidden;
    background: var(--lux-black);
    padding: 5.5rem 1.5rem 6rem;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero-glow {
    position: absolute;
    top: -18rem;
    left: 50%;
    transform: translateX(-50%);
    width: 70rem;
    height: 44rem;
    background: radial-gradient(ellipse at center, rgba(var(--lux-accent-rgb), 0.20), transparent 68%);
}

/* Static CSS fallback for the cursor-reactive light bands below —
   present unconditionally (progressive enhancement: this is what a
   visitor sees if JS never runs at all), and left as the permanent
   appearance on touch devices and under prefers-reduced-motion, where
   landing.js deliberately never activates the canvas. Faded out on the
   left ~45% of the hero's width so it never sits directly behind the
   headline text (see .hero-inner-split) -- "must not... make text
   harder to read" from the brief, enforced here rather than trusted to
   opacity alone. */
.hero-bands {
    position: absolute;
    inset: 0;
    opacity: 0.55;
    background-image: repeating-linear-gradient(
        90deg,
        rgba(var(--lux-accent-rgb), 0.10) 0px,
        rgba(var(--lux-accent-rgb), 0.10) 2px,
        transparent 2px,
        transparent 92px
    );
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, black 48%, black 100%);
    mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, black 48%, black 100%);
    transition: opacity 0.6s ease;
}

/* Canvas takes over from .hero-bands once landing.js decides this
   visitor gets the animated version (pointer:fine, no reduced-motion) —
   see the JS for exactly when .js-canvas-active gets added to .hero.
   Same left-side mask as the static fallback, for the same reason. */
.hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, black 48%, black 100%);
    mask-image: linear-gradient(90deg, transparent 0%, transparent 30%, black 48%, black 100%);
    transition: opacity 0.8s ease;
}

.hero.js-canvas-active .hero-bands {
    opacity: 0;
}

.hero.js-canvas-active .hero-canvas {
    opacity: 1;
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
}

.hero-inner-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 3.5rem;
    text-align: left;
}

.hero .eyebrow {
    color: var(--lux-accent-text);
}

.hero h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(2.75rem, 5.2vw, 4.5rem);
    letter-spacing: -0.045em;
    line-height: 1.02;
    color: var(--lux-ivory);
    margin: 0 0 1.5rem;
}

.hero h1 .accent {
    color: var(--lux-accent-text);
}

.hero-subhead {
    font-size: 1.1875rem;
    color: rgba(246, 243, 236, 0.7);
    max-width: 520px;
    margin: 0 0 2.25rem;
    line-height: 1.6;
    font-weight: 400;
}

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

.hero-cta-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.hero-cta {
    padding: 0.875rem 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.hero-cta-secondary {
    background: transparent;
    color: var(--lux-ivory);
    border: 1px solid var(--lux-line-dark);
}

.hero-cta-secondary:hover {
    border-color: var(--lux-accent);
    color: var(--lux-ivory);
}

/* ===================== Hero visual: Deal Mismatch Report card ===================== */

.hero-visual {
    position: relative;
}

.deal-card {
    /* No backdrop-filter here on purpose: this card sits directly over
       the continuously-animating canvas (.hero-canvas), and
       backdrop-filter forces a full blur recompute of everything behind
       it on every single repaint -- at 60fps that's a real, measurable
       jank source, not a micro-optimization. A solid-enough background
       color reads the same at this opacity without that cost. */
    position: relative;
    background: rgba(20, 20, 23, 0.88);
    border: 1px solid var(--lux-line-dark);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.875rem 2rem 1.625rem;
}

.deal-card-tag {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(246, 243, 236, 0.45);
    margin-bottom: 1.5rem;
}

.deal-card-ticker {
    display: flex;
    align-items: flex-end;
    gap: 1.125rem;
    margin-bottom: 1.5rem;
}

.deal-card-number {
    font-family: 'Inter', sans-serif;
    font-weight: 200;
    font-size: clamp(2.5rem, 4.2vw, 3.5rem);
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--lux-ivory);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.deal-card-ticker-label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--lux-accent-text);
    padding-bottom: 0.3125rem;
}

.deal-card-rows {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1.375rem;
    border-top: 1px solid var(--lux-line-dark);
}

.deal-card-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.deal-card-row-unit {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: rgba(246, 243, 236, 0.4);
}

.deal-card-row-desc {
    flex-grow: 1;
    color: rgba(246, 243, 236, 0.72);
}

.deal-card-row-impact {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--lux-ivory);
    font-variant-numeric: tabular-nums;
}

.deal-card-more {
    margin-top: 0.875rem;
    font-size: 0.75rem;
    color: rgba(246, 243, 236, 0.4);
}

.deal-card-timestamp {
    margin-top: 1.375rem;
    padding-top: 1.125rem;
    border-top: 1px solid var(--lux-line-dark);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(246, 243, 236, 0.35);
}

/* ===================== Shared section heading ===================== */

.section-heading {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 4rem;
}

.section-heading h2 {
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: var(--text-dark);
    margin-bottom: 0.875rem;
}

.section-heading p {
    color: var(--text-medium);
    font-size: 1.0625rem;
    line-height: 1.6;
}

/* ===================== Problem section (real sample report) ===================== */

.problem {
    max-width: 900px;
    margin: 0 auto;
    padding: 7rem 1.5rem 0;
}

.sample-report {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.sample-report-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.875rem;
    padding: 1.125rem 1.5rem;
    background: var(--background, #faf9f5);
    border-bottom: 1px solid var(--border-color);
}

.sample-report-tag {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--warning-color);
    border: 1px solid var(--warning-color);
    border-radius: var(--radius-full);
    padding: 0.1875rem 0.5rem;
}

.sample-report-unit {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-dark);
}

.sample-report-meta {
    font-size: 0.8125rem;
    color: var(--text-light);
}

.sample-disc-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
}

.sample-disc-card {
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--severity-low);
    border-radius: var(--radius-md);
    padding: 1.125rem 1.25rem;
    background: var(--white);
}

.sample-disc-high { border-left-color: var(--severity-high); }
.sample-disc-medium { border-left-color: var(--severity-medium); }

.sample-disc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
}

.sample-sev {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.1875rem 0.5rem;
    border-radius: var(--radius-full);
}

.sample-sev-high { color: var(--severity-high); background: var(--severity-high-bg); }
.sample-sev-medium { color: var(--severity-medium); background: var(--severity-medium-bg); }

.sample-disc-type {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-medium);
}

.sample-impact-chip {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-dark);
    background: var(--background, #faf9f5);
    border: 1px solid var(--border-color);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
}

.sample-disc-message {
    font-size: 0.9375rem;
    color: var(--text-dark);
    line-height: 1.55;
}

.sample-disc-message strong {
    font-weight: 700;
}

.sample-disc-citation {
    margin-top: 0.625rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--border-color);
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--text-medium);
    line-height: 1.5;
}

.sample-report-foot {
    padding: 1.125rem 1.5rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.875rem;
    color: var(--text-medium);
    line-height: 1.55;
}

.sample-report-foot a {
    color: var(--lux-accent-text, var(--lux-accent));
    font-weight: 600;
}

/* ===================== How It Works (3-step flow) ===================== */

.how-it-works {
    max-width: 1200px;
    margin: 0 auto;
    padding: 7rem 1.5rem 0;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.step-card {
    text-align: center;
    padding: 0 1rem;
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto 1.25rem;
    border-radius: var(--radius-full);
    background: var(--lux-accent);
    color: var(--white);
    font-size: 1.125rem;
    font-weight: 800;
}

.step-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-dark);
    margin-bottom: 0.625rem;
}

.step-card p {
    font-size: 0.9375rem;
    color: var(--text-medium);
    line-height: 1.55;
}

/* "See a sample report" link, used as a plain text link in some states
   (kept for reuse even though the hero itself now uses the secondary
   button variant instead). */
.hero-sample-link {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--lux-accent-text, var(--lux-accent));
    text-decoration: none;
}

.hero-sample-link:hover {
    text-decoration: underline;
}

/* ===================== Built for multifamily ===================== */

.differentiator {
    max-width: 1100px;
    margin: 0 auto;
    padding: 7rem 1.5rem 0;
}

.differentiator-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 3rem;
}

.differentiator-card {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--lux-accent);
    padding: 1.5rem 1.625rem;
}

.differentiator-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.differentiator-card p {
    font-size: 0.9375rem;
    color: var(--text-medium);
    line-height: 1.55;
}

/* A condensed capability strip replacing the old 3-column Platform
   section's long prose -- same real facts (OCR, PMS imports, T12
   cross-check, citations), compressed to short data-forward chips.
   Monospace ties it visually to the hero ticker/timestamp treatment. */
.capability-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
}

.capability-chip {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--text-medium);
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: 0.4375rem 0.875rem;
}

/* ===================== Three trust pillars ===================== */

.trust {
    max-width: 1100px;
    margin: 0 auto;
    padding: 7rem 1.5rem;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.trust-item {
    padding: 2rem 1.75rem;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.trust-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 1.25rem;
    border-radius: var(--radius-sm);
    background: var(--primary-light);
    color: var(--lux-accent-text);
}

.trust-item-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.trust-item h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.trust-item p {
    font-size: 0.9375rem;
    color: var(--text-medium);
    line-height: 1.6;
}

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

.pricing-preview {
    max-width: 1100px;
    margin: 0 auto;
    padding: 7rem 1.5rem;
}

.pricing-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.pricing-preview-card {
    text-align: center;
    padding: 2rem 1.5rem;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.pricing-preview-card-featured {
    border-color: var(--lux-accent);
    box-shadow: var(--shadow-md);
}

.pricing-preview-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}

.pricing-preview-price {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-dark);
}

.pricing-preview-price span {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-medium);
}

.pricing-preview-cta-wrap {
    text-align: center;
}

/* ===================== FAQ ===================== */

.faq {
    max-width: 800px;
    margin: 0 auto;
    padding: 6rem 1.5rem;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.faq-item {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
}

.faq-item summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-dark);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    flex-shrink: 0;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--lux-accent-text);
    transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
    transform: rotate(45deg);
}

.faq-item p {
    margin-top: 1rem;
    font-size: 0.9375rem;
    color: var(--text-medium);
    line-height: 1.65;
}

/* ===================== Dark statement section (final CTA) ===================== */

.statement {
    background: var(--lux-black);
    padding: 8rem 1.5rem;
}

.statement-inner {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.statement .eyebrow {
    color: var(--lux-accent-text);
}

.statement h2 {
    font-weight: 800;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    letter-spacing: -0.03em;
    line-height: 1.12;
    color: var(--lux-ivory);
    margin-bottom: 2.5rem;
}

.statement-cta {
    display: inline-block;
    padding: 0.875rem 2rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius-sm);
}

/* ===================== Book a Demo ===================== */

.book-demo {
    max-width: 640px;
    margin: 0 auto;
    padding: 7rem 1.5rem;
}

.demo-form-wrap {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 2rem;
}

.demo-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.demo-form-field {
    margin-bottom: 1.25rem;
}

.demo-form-field-full {
    grid-column: 1 / -1;
}

.demo-form-field label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.demo-form-optional {
    font-weight: 400;
    color: var(--text-light);
}

.demo-form-field input,
.demo-form-field textarea {
    width: 100%;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    font-family: inherit;
    background: var(--background);
    color: var(--text-dark);
}

.demo-form-field textarea {
    resize: vertical;
}

.demo-form-field input:focus,
.demo-form-field textarea:focus {
    outline: none;
    border-color: var(--lux-accent);
    background: var(--white);
}

/* Honeypot: off-screen (not display:none, which some bots skip),
   unreachable by keyboard (tabindex="-1" in the markup), and removed
   from the accessibility tree entirely (aria-hidden on the wrapper in
   the markup) -- so a real, sighted or screen-reader visitor never
   perceives it, but a bot filling every field it can find still
   populates it. See landing.js and backend/app/api.py's honeypot check. */
.demo-form-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    left: -9999px;
}

.demo-form-submit {
    width: 100%;
    padding: 0.875rem 1.75rem;
    font-size: 0.875rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.demo-form-error {
    font-size: 0.8125rem;
    color: var(--error-color);
    margin-top: 0.875rem;
    display: none;
}

.demo-form-error.show {
    display: block;
}

/* ---- Confirmation state (shown in place of the form after submit) ---- */

.demo-form-confirm {
    display: none;
    align-items: center;
    gap: 0.75rem;
    padding: 1.125rem 1.5rem;
    border: 1px solid var(--lux-accent);
    border-radius: var(--radius-sm);
    background: var(--primary-light);
    color: var(--text-dark);
    font-weight: 500;
    font-size: 0.9375rem;
    text-align: left;
}

.demo-form-confirm.show {
    display: flex;
}

.demo-form-confirm svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: var(--lux-accent-text);
}

.demo-form-wrap.submitted .demo-form {
    display: none;
}

/* ===================== Footer (dark) ===================== */

.landing-footer {
    background: var(--lux-black);
    padding: 3.5rem 1.5rem 2.5rem;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--lux-line-dark-faint);
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--lux-ivory);
    font-size: 0.9375rem;
}

.footer-links {
    display: flex;
    gap: 1.75rem;
    font-size: 0.875rem;
    color: rgba(246, 243, 236, 0.6);
}

.footer-links a:hover {
    color: var(--lux-ivory);
}

/* ---- Contact: understated, a single small line, not a form ---- */

.footer-contact {
    font-size: 0.8125rem;
    color: rgba(246, 243, 236, 0.55);
    letter-spacing: 0.01em;
}

.footer-contact a {
    color: rgba(246, 243, 236, 0.75);
}

.footer-contact a:hover {
    color: var(--lux-ivory);
    text-decoration: underline;
}

.footer-copy {
    font-size: 0.8125rem;
    color: rgba(246, 243, 236, 0.4);
    margin-top: 0.75rem;
}

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

.pricing-header {
    max-width: 820px;
    margin: 0 auto;
    padding: 5.5rem 1.5rem 2rem;
}

.pricing-h1 {
    font-size: clamp(2.25rem, 4.5vw, 3.5rem) !important;
    letter-spacing: -0.03em !important;
    line-height: 1.08 !important;
}

.pricing-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem 7rem;
}

.pricing-placeholder-note {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    max-width: 700px;
    margin: 0 auto 3rem;
    padding: 0.875rem 1.125rem;
    background-color: var(--warning-light);
    /* --warning-color on --warning-light is 3.3:1 — under AA for this
       body-size note. A darker amber on the same tint clears 4.5:1
       while staying in the warning family. */
    color: #7c561a;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    line-height: 1.55;
}

.pricing-placeholder-note svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.0625rem;
}

/* A segmented Monthly/Annual control -- two buttons sharing one pill
   track, aria-pressed marks the active side. No existing toggle/switch
   component in this codebase to match, so this introduces one small new
   pattern built from tokens already in use elsewhere (--lux-accent,
   --radius-full, --border-color). */
.pricing-toggle {
    display: inline-flex;
    margin: 0 auto 2.5rem;
    padding: 0.25rem;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
}

.pricing-toggle-btn {
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-medium);
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    padding: 0.5rem 1.25rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pricing-toggle-btn[aria-pressed="true"] {
    background: var(--lux-accent-text);
    color: var(--white);
}

.pricing-toggle-btn:not([aria-pressed="true"]):hover {
    color: var(--text-dark);
}

.pricing-feature-includes {
    font-weight: 700;
    color: var(--text-dark);
    padding-left: 0 !important;
}

.pricing-feature-includes::before {
    content: none !important;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    align-items: stretch;
    width: 100%;
}

.pricing-card {
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2rem 1.75rem;
}

.pricing-card-featured {
    border-color: var(--lux-accent);
    box-shadow: var(--shadow-md);
}

.pricing-badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--lux-accent);
    color: var(--white);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.3125rem 0.875rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.pricing-tier-name {
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.pricing-tier-desc {
    font-size: 0.875rem;
    color: var(--text-medium);
    line-height: 1.5;
    min-height: 2.6em;
}

.pricing-tier-price {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-dark);
    margin: 1.25rem 0 0.375rem;
}

.pricing-tier-price span {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-medium);
}

.pricing-tier-price-custom {
    color: var(--lux-accent-text);
}

.pricing-annual-note {
    font-size: 0.8125rem;
    color: var(--text-light);
    margin-bottom: 1.5rem;
}

.pricing-feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
    flex-grow: 1;
}

.pricing-feature-list li {
    position: relative;
    padding-left: 1.375rem;
    font-size: 0.875rem;
    color: var(--text-medium);
    line-height: 1.5;
}

/* A filled checkmark, not a hollow ring -- an empty circle next to
   "what's included" reads ambiguously (could as easily mean an
   unchecked box), where a checkmark is unambiguous at a glance. */
.pricing-feature-list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0.125rem;
    width: 0.875rem;
    height: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--lux-accent);
    color: var(--white);
    font-size: 0.5625rem;
    line-height: 1;
}

.pricing-cta {
    text-align: center;
    text-decoration: none;
}

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

/* Nav has grown to 6 links + Client Login as sections were added, and
   with white-space: nowrap on every link (so no single link ever
   breaks mid-phrase), the full row needs ~930-940px to fit next to the
   brand without anything shrinking below its content width. Below
   that, and above the 860px breakpoint every OTHER section on this
   page still comfortably fits at, was a dead zone: too narrow for one
   row, but not yet caught by the page's general mobile breakpoint --
   flex items were forced to shrink and their text wrapped mid-word
   ("Trust & Security" splitting across two lines) instead of the whole
   nav switching to the stacked mobile layout. Giving the nav its own,
   wider breakpoint (1040px, with margin above the ~935px measured
   minimum for different fonts/zoom levels) closes that gap; it's
   intentionally separate from the 860px block below so unrelated
   sections that still fit fine down to 860px aren't stacked early. */
@media (max-width: 1040px) {
    /* Wrapping the whole nav (brand included) onto its own line, with
       links wrapping and centering below it, keeps every link reachable
       without introducing a hamburger-menu component this page didn't
       have before. */
    .landing-nav {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .landing-nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem 1.25rem;
    }

    .hero-inner-split {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-subhead {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-cta-wrap {
        justify-content: center;
    }

    .hero-visual {
        max-width: 480px;
        margin: 3rem auto 0;
        width: 100%;
    }
}

@media (max-width: 860px) {
    .differentiator-grid {
        grid-template-columns: 1fr;
    }

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

    .pricing-preview-grid {
        grid-template-columns: 1fr;
    }

    .sample-report-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .pricing-grid {
        /* 3 tiers don't split evenly into 2 columns -- single column
           below this breakpoint, same as every other section here. */
        grid-template-columns: 1fr;
    }

    .steps-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        max-width: 420px;
        margin: 0 auto;
    }

    .demo-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (max-width: 480px) {
    .deal-card {
        padding: 1.5rem 1.375rem 1.25rem;
    }

    .deal-card-ticker {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}