/* ═══════════════════════════════════════════════════════════════════════════
   marketing-theme.css — Apple-style design system for the hoaph.site
   marketing pages.

   HOW THIS LOADS, AND WHY IT MATTERS
   Each marketing page carries a large inline <style> block. This file is
   linked AFTER it, so equal-specificity rules here win on source order — no
   specificity arms race, no !important except where the inline block already
   used it (the hero and FAQ backgrounds, marked below).

   WHAT IT DELIBERATELY DOES NOT TOUCH
   That same inline block also styles the SaaS app UI that js/saas_app.js
   renders into #saas-app — .dash-*, .saas-*, .property-usage-bar,
   #saas-cookie-banner. Those are product surfaces, not marketing, so this
   file introduces its own --mk-* tokens instead of redefining the page's
   --primary/--text/--bg. Redefining those would silently re-skin the
   customer dashboard too. Do not "simplify" this by overwriting :root.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Neutrals — near-black ink on white, with one warm grey band. */
    --mk-ink: #1d1d1f;
    --mk-ink-2: #6e6e73;
    --mk-ink-3: #86868b;
    --mk-bg: #ffffff;
    --mk-band: #f5f5f7;
    --mk-line: rgba(0, 0, 0, 0.09);

    /* Brand green, kept — only brightened enough to pass AA on white. */
    --mk-accent: #0a7256;
    --mk-accent-deep: #042b20;

    --mk-radius: 22px;
    --mk-radius-lg: 28px;

    /* Type stack: real SF on Apple hardware, Segoe on this project's Windows
       authoring machines, system-ui elsewhere. */
    --mk-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
        "Segoe UI Variable Display", "Segoe UI", system-ui, "Helvetica Neue",
        Arial, sans-serif;
}

body {
    font-family: var(--mk-sans);
    color: var(--mk-ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
}

/* ── Rhythm ─────────────────────────────────────────────────────────────── */

/* Apple pages breathe. The old 5rem bands read as cramped next to this type
   scale. */
section {
    padding: 7.5rem 0;
}

/* Explicit band, replacing positional zebra striping on index.html (whose own
   unqualified `section:nth-child(even)` rule is commented out in that file).

   This file deliberately does NOT neutralise nth-child striping globally. An
   earlier revision did, with `section:nth-child(even) { background:
   transparent }`. That is specificity (0,1,1) and loads after each page's
   inline <style>, so it also beat pricing.html's own
   `section.pricing-hero { background: var(--gradient-1) }` — same (0,1,1),
   earlier in the cascade. The hero lost its gradient, kept its `color:
   white`, and rendered white-on-white. The sibling pages already qualify
   their own striping with `:not([class*="hero"]):not(.footer-panel)`, so
   theirs is left alone.

   Qualified with `section` so it outranks any (0,1,1) striping rule that
   would otherwise repaint it. */
section.mk-band {
    background: var(--mk-band);
}

/* ── Section headers ───────────────────────────────────────────────────── */

.section-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mk-accent);
    margin-bottom: 0.9rem;
}

.section-title {
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.06;
    color: var(--mk-ink);
    text-wrap: balance;
}

.section-subtitle {
    font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
    font-weight: 400;
    line-height: 1.5;
    color: var(--mk-ink-2);
    max-width: 44ch;
    letter-spacing: -0.014em;
}

/* ── Nav ────────────────────────────────────────────────────────────────── */

.nav-sticky {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--mk-line);
    box-shadow: none;
    padding: 0.55rem 0;
}

.nav-sticky strong {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.nav-sticky a {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--mk-ink);
    opacity: 0.85;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    transition: opacity 0.18s ease;
}

.nav-sticky a:hover {
    opacity: 1;
    background: transparent;
    color: var(--mk-ink);
}

/* Pill auth buttons, Apple's "Get Started" treatment. */
.nav-auth-btns .btn {
    border-radius: 980px;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.4rem 1rem;
    letter-spacing: -0.01em;
}

/* Written as `.nav-sticky a.btn-primary` to match the specificity (0,2,1) of
   the page's own rule, which hardcodes a #2563eb blue that predates the green
   brand. A `.nav-auth-btns .btn-primary` (0,2,0) loses to it and the CTA
   stays blue. */
.nav-sticky a.btn-primary,
.nav-auth-btns .btn-primary {
    background: var(--mk-accent);
    background-color: var(--mk-accent);
    border-color: var(--mk-accent);
    color: #fff;
}

.nav-sticky a.btn-primary:hover {
    background-color: #085f48;
    border-color: #085f48;
}

.nav-auth-btns .btn-outline-secondary {
    border-color: var(--mk-line);
    color: var(--mk-ink);
}

.site-mobile-nav {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

/* White, centred, and very large — the page's own rule carries !important, so
   this has to as well. The dark band immediately below it (the carousel rail)
   is what gives the page its light/dark rhythm. */
.hero {
    background: var(--mk-bg) !important;
    color: var(--mk-ink);
    padding: 7rem 0 5.5rem;
    text-align: center;
}

/* The decorative translucent circles belonged to the gradient hero. */
.hero::before,
.hero::after {
    display: none;
}

.hero h1 {
    font-size: clamp(2.5rem, 6.4vw, 4.75rem);
    font-weight: 700;
    letter-spacing: -0.042em;
    line-height: 1.04;
    color: var(--mk-ink);
    margin: 0 auto 1.35rem;
    max-width: 18ch;
    text-wrap: balance;
}

.hero .lead {
    font-size: clamp(1.0625rem, 1.65vw, 1.4rem);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -0.016em;
    color: var(--mk-ink-2);
    opacity: 1;
    max-width: 62ch;
    margin-inline: auto;
}

.hero-badge {
    background: var(--mk-band);
    border: 1px solid var(--mk-line);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--mk-ink-2);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    padding: 0.35rem 0.9rem;
    border-radius: 980px;
}

.hero .d-flex {
    justify-content: center;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn-primary-custom,
.btn-outline-custom {
    border-radius: 980px;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.014em;
    padding: 0.8rem 1.55rem;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.btn-primary-custom {
    background: var(--mk-accent);
    border: 1px solid var(--mk-accent);
    color: #fff;
}

.btn-primary-custom:hover {
    background: #085f48;
    border-color: #085f48;
    color: #fff;
    transform: none;
}

.btn-outline-custom {
    background: transparent;
    border: 1px solid var(--mk-line);
    color: var(--mk-ink);
}

.btn-outline-custom:hover {
    background: var(--mk-band);
    border-color: var(--mk-line);
    color: var(--mk-ink);
}

/* ── Hero stats ─────────────────────────────────────────────────────────── */

/* Boxed tiles read as chrome. Apple sets figures as plain type on the page,
   separated by space. The inline background on the markup is neutralised. */
/* Constrained so the four figures read as one group rather than drifting to
   the container edges on a wide screen. */
.mk-hero-stats {
    max-width: 760px;
    margin-inline: auto;
    margin-top: 3.25rem;
}

.hero-stat {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0.75rem 0.5rem;
}

.hero-stat .number {
    display: block;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--mk-accent);
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.4rem;
}

.hero-stat .label {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mk-ink-3);
    opacity: 1;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */

/* Borderless on a tinted ground, generous radius, no lift on hover — the
   whole vocabulary Apple uses for feature tiles. */
.feature-card,
.pricing-card,
.testimonial-card {
    background: var(--mk-band);
    border: 0 !important;
    border-radius: var(--mk-radius);
    box-shadow: none;
    padding: 2rem;
    height: 100%;
    transition: background 0.2s ease;
}

.feature-card:hover,
.pricing-card:hover,
.testimonial-card:hover {
    transform: none;
    box-shadow: none;
    background: #eeeef1;
    border: 0 !important;
}

/* On a tinted band the tiles invert to white so they stay distinct. */
.mk-band .feature-card,
.mk-band .pricing-card {
    background: var(--mk-bg);
}

.mk-band .feature-card:hover,
.mk-band .pricing-card:hover {
    background: var(--mk-bg);
}

.feature-card .icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--mk-bg);
    color: var(--mk-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 1.1rem;
    box-shadow: inset 0 0 0 1px var(--mk-line);
}

.mk-band .feature-card .icon-wrap {
    background: var(--mk-band);
}

.feature-card h5 {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.022em;
    color: var(--mk-ink);
    margin-bottom: 0.5rem;
}

.feature-card p,
.feature-card ul li {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--mk-ink-2);
    letter-spacing: -0.01em;
}

.badge-module {
    background: var(--mk-bg);
    color: var(--mk-accent);
    border-radius: 980px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.25rem 0.7rem;
    box-shadow: inset 0 0 0 1px var(--mk-line);
}

/* ── Problem tiles ──────────────────────────────────────────────────────── */

/* Paired with the emoji-to-icon swap in the markup: emoji never reads as
   product design, and renders differently on every platform. */
.mk-problem {
    text-align: center;
    padding: 1rem 1.25rem;
}

.mk-problem .mk-problem-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--mk-bg);
    color: var(--mk-accent);
    font-size: 1.5rem;
    margin-bottom: 1.15rem;
    box-shadow: inset 0 0 0 1px var(--mk-line);
}

.mk-problem h5 {
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: -0.024em;
    margin-bottom: 0.55rem;
    color: var(--mk-ink);
}

.mk-problem p {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--mk-ink-2);
    letter-spacing: -0.01em;
    max-width: 38ch;
    margin-inline: auto;
}

/* ── Bootstrap utility corrections ─────────────────────────────────────── */

/* Bootstrap's .text-primary is its default blue, which the markup uses in a
   few places (the "Time Saved Per Month" figures, for one) and which clashes
   with the green brand. Scoped to `section` so it cannot reach the SaaS app
   UI that saas_app.js renders into #saas-app — that div is a sibling of the
   marketing sections, never a descendant. */
section .text-primary {
    color: var(--mk-accent) !important;
}

/* ── Portal cards ───────────────────────────────────────────────────────── */

/* Replaces three display-3 emoji (🏢 🏠 🛡️) and their inline green/blue/orange
   top borders. Emoji render differently on every platform and never read as
   product design; the borders were two-thirds off-brand. */
.mk-portal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 17px;
    background: var(--mk-band);
    color: var(--mk-accent);
    font-size: 1.6rem;
    margin-bottom: 1.25rem;
    box-shadow: inset 0 0 0 1px var(--mk-line);
}

/* careers.html's .perk-icon and mission.html's .mv-icon held emoji too and
   were sized/coloured for them. Same tile treatment, so every icon on the
   marketing site now reads as one set. */
.perk-icon,
.mv-card .mv-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--mk-band);
    color: var(--mk-accent) !important;
    font-size: 1.45rem !important;
    box-shadow: inset 0 0 0 1px var(--mk-line);
}

/* ── Automation steps ──────────────────────────────────────────────────── */

.automation-step {
    background: var(--mk-bg);
    border: 0;
    border-radius: var(--mk-radius);
    padding: 1.5rem 1.6rem;
    box-shadow: none;
}

.step-number,
.step-badge {
    background: var(--mk-accent);
    color: #fff;
    border-radius: 980px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.step-content h6 {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--mk-ink);
}

.step-content p {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--mk-ink-2);
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.faq-section {
    background: var(--mk-bg) !important;
}

.faq-section .accordion-item {
    border: 0;
    border-bottom: 1px solid var(--mk-line);
    background: transparent;
    border-radius: 0;
}

.faq-section .accordion-button {
    background: transparent;
    box-shadow: none;
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--mk-ink);
    padding: 1.35rem 0;
}

.faq-section .accordion-button:not(.collapsed) {
    color: var(--mk-ink);
    background: transparent;
    box-shadow: none;
}

.faq-section .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.faq-section .accordion-body {
    font-size: 0.9688rem;
    line-height: 1.6;
    color: var(--mk-ink-2);
    padding: 0 0 1.5rem;
}

/* ── Dark CTA band ─────────────────────────────────────────────────────── */

.cta-section {
    background: linear-gradient(135deg, var(--mk-accent-deep) 0%, #064e3b 100%) !important;
    color: #fff;
}

.cta-section h2 {
    font-size: clamp(1.875rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.07;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */

.compare-table {
    border-radius: var(--mk-radius);
    overflow: hidden;
}

.compare-table thead th {
    background: var(--mk-band);
    color: var(--mk-ink);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 0;
}

.compare-table tbody td {
    border-color: var(--mk-line);
    font-size: 0.9375rem;
    color: var(--mk-ink-2);
}

.compare-table tbody tr:nth-child(even) {
    background: transparent;
}

/* ── Pricing ────────────────────────────────────────────────────────────── */

.price-amount {
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--mk-ink);
    font-variant-numeric: tabular-nums;
}

.price-period {
    color: var(--mk-ink-3);
    font-size: 0.9375rem;
    font-weight: 400;
}

.pricing-card.featured {
    background: var(--mk-bg);
    box-shadow: 0 0 0 2px var(--mk-accent) inset;
}

.guarantee-badge {
    background: var(--mk-band);
    color: var(--mk-ink-2);
    border: 1px solid var(--mk-line);
    border-radius: 980px;
    font-size: 0.8125rem;
    font-weight: 500;
}

/* ── Page hero on the sibling pages ────────────────────────────────────── */

/* Nine sibling pages open with a DARK .page-hero and carry hardcoded
   white-on-dark inline styles inside it — .btn-light, .btn-outline-light,
   rgba(255,255,255,.25) badge pills, white .hero-check rows. So this band
   stays dark and only its type and rhythm are modernised. Forcing it white
   (as an earlier pass did) leaves white text and white buttons on a white
   ground — invisible. It also pairs with the dark carousel rail.

   Qualified with `section` so it outranks the neutralised nth-child rule. */
section.page-hero {
    background: linear-gradient(135deg, #04231a 0%, #064e3b 55%, #0a7256 100%);
    color: #fff;
    padding: 6.5rem 0 5rem !important;
}

section.page-hero h1 {
    font-size: clamp(2.25rem, 5.2vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.05;
    color: #fff;
    margin-bottom: 1.15rem;
    text-wrap: balance;
}

section.page-hero .lead,
section.page-hero > .container > p {
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.016em;
    color: rgba(255, 255, 255, 0.78);
    opacity: 1;
    max-width: 62ch;
}

.hero-check {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
    opacity: 1;
}

.hero-check .bi {
    color: #6ee7b7;
}

/* The dark hero's own CTAs: pill them to match the rest of the system. */
section.page-hero .btn {
    border-radius: 980px !important;
    font-weight: 500 !important;
    letter-spacing: -0.014em;
    padding: 0.75rem 1.5rem !important;
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    section { padding: 5rem 0; }
    .hero { padding: 4.5rem 0 3.5rem; }
}

@media (max-width: 575.98px) {
    section { padding: 4rem 0; }
    .hero { padding: 3.5rem 0 2.75rem; }
    .feature-card,
    .pricing-card,
    .testimonial-card { padding: 1.5rem; }
    .hero h1 { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .btn-primary-custom,
    .btn-outline-custom,
    .feature-card,
    .pricing-card,
    .nav-sticky a { transition: none; }
}