:root {
    --ink: #17191c;
    --muted: #5d6570;
    --line: #d9dde3;
    --paper: #fbfbf8;
    --white: #ffffff;
    --green: #35a66a;
    --gold: #f4b942;
    --red: #e35d5b;
    --blue: #2c6fbb;
    --shadow: 0 22px 60px rgba(24, 29, 35, 0.14);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: inherit; text-decoration: none; }

.marketing-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 84px;
    padding: 14px clamp(18px, 4vw, 56px);
    border-bottom: 1px solid rgba(23, 25, 28, 0.08);
    background: rgba(251, 251, 248, 0.94);
    backdrop-filter: blur(18px);
}

.brand img {
    display: block;
    width: clamp(210px, 18vw, 290px);
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.brand {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 14px;
    background: var(--white);
    box-shadow: 0 10px 28px rgba(24, 29, 35, 0.08);
}

.marketing-nav nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    justify-content: center;
}

.marketing-nav nav a,
.login-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 8px;
    color: #343942;
    font-size: 14px;
    font-weight: 700;
}

.marketing-nav nav a.active,
.marketing-nav nav a:hover,
.login-link {
    background: var(--ink);
    color: var(--white);
}

.hero {
    min-height: calc(100vh - 72px);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    align-items: center;
    gap: clamp(28px, 5vw, 72px);
    padding: clamp(44px, 7vw, 92px) clamp(18px, 5vw, 72px);
}

.hero-copy { max-width: 760px; }

.hero-logo {
    display: block;
    width: min(360px, 78vw);
    height: auto;
    margin: 0 0 24px;
    filter: drop-shadow(0 14px 24px rgba(24, 29, 35, 0.12));
}

.eyebrow {
    margin: 0 0 14px;
    color: var(--green);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
    font-size: 13px;
}

h1, h2, h3, p { letter-spacing: 0; }

h1 {
    margin: 0;
    font-size: clamp(44px, 7vw, 86px);
    line-height: 0.95;
}

.hero-text,
.page-hero p {
    color: var(--muted);
    font-size: 20px;
    line-height: 1.55;
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    font-weight: 900;
    cursor: pointer;
}

.button.primary { background: var(--green); color: var(--white); }
.button.secondary { background: var(--white); border: 1px solid var(--line); }

.hero-visual {
    position: relative;
    min-height: 560px;
    border-radius: 8px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(23,25,28,0.84), rgba(23,25,28,0.2)),
        repeating-linear-gradient(110deg, #111 0 22px, #f7f7f0 22px 42px);
    box-shadow: var(--shadow);
}

.officials-collage-hero {
    background:
        linear-gradient(90deg, rgba(23, 25, 28, 0.78), rgba(23, 25, 28, 0.08) 58%),
        url("/assets/zebrahq/officials-collage-hero.png") center / cover no-repeat;
}

.stripe-field {
    position: absolute;
    inset: auto 28px 28px 28px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.stripe-field span {
    height: 98px;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(255,255,255,0.38);
}

.scoreboard {
    position: absolute;
    top: 34px;
    left: 34px;
    right: 34px;
    padding: 24px;
    border-radius: 8px;
    color: var(--white);
    background: rgba(23, 25, 28, 0.82);
    border: 1px solid rgba(255,255,255,0.18);
}

.board-label { color: var(--gold); font-weight: 900; text-transform: uppercase; font-size: 12px; }
.board-grid { display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; margin-top: 18px; align-items: baseline; }
.board-grid strong { font-size: 42px; line-height: 1; }
.board-grid span { color: #d8dde2; }

.section {
    padding: clamp(46px, 7vw, 86px) clamp(18px, 5vw, 72px);
}

.section.compact { padding-top: 0; }

.section-heading { max-width: 760px; margin-bottom: 28px; }
.section-heading h2,
.page-hero h1 {
    margin: 0;
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1;
}

.metric-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--line);
    background: var(--white);
    box-shadow: var(--shadow);
}

.metric-strip div { padding: 24px; border-right: 1px solid var(--line); }
.metric-strip div:last-child { border-right: 0; }
.metric-strip strong { display: block; font-size: 30px; }
.metric-strip span { color: var(--muted); }

.feature-grid,
.pricing-grid,
.operations-grid,
.feature-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.feature-card,
.feature-list article,
.operations-grid article,
.price-card {
    display: block;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    box-shadow: 0 10px 28px rgba(24, 29, 35, 0.07);
}

.feature-card h2,
.feature-card h3,
.feature-list h2,
.operations-grid h2,
.price-card h2 { margin: 12px 0 10px; font-size: 22px; }

.feature-card p,
.feature-list p,
.operations-grid p,
.price-card p,
.contact-aside p { color: var(--muted); line-height: 1.55; }

.screenshot-showcase {
    background:
        radial-gradient(circle at 10% 10%, rgba(53, 166, 106, 0.14), transparent 32%),
        radial-gradient(circle at 86% 24%, rgba(244, 185, 66, 0.18), transparent 30%);
}

.screenshot-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.screenshot-card {
    margin: 0;
    padding: 12px;
    border: 1px solid rgba(23, 25, 28, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow);
}

.screenshot-card.large {
    grid-column: span 2;
}

.screenshot-card.feature-shot {
    padding: 10px;
}

.screenshot-card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.screenshot-card figcaption {
    padding: 10px 4px 2px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 800;
}

.icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ink);
    color: var(--gold);
    font-weight: 900;
}

.page-hero {
    padding: clamp(62px, 9vw, 118px) clamp(18px, 5vw, 72px) clamp(42px, 6vw, 78px);
    background:
        linear-gradient(90deg, rgba(251,251,248,0.98), rgba(251,251,248,0.72)),
        repeating-linear-gradient(120deg, #17191c 0 20px, #ffffff 20px 40px);
}

.scheduling-hero { border-bottom: 8px solid var(--green); }
.officials-hero { border-bottom: 8px solid var(--blue); }
.billing-hero { border-bottom: 8px solid var(--gold); }
.operations-hero { border-bottom: 8px solid var(--red); }
.pricing-hero { border-bottom: 8px solid var(--ink); }
.contact-hero { border-bottom: 8px solid var(--green); }

.page-hero p { max-width: 820px; }

.split,
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
    gap: clamp(24px, 5vw, 68px);
    align-items: center;
}

.check-list {
    padding: 0;
    margin: 22px 0 0;
    list-style: none;
}

.check-list li {
    padding: 11px 0 11px 34px;
    position: relative;
    border-bottom: 1px solid var(--line);
}

.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--green);
}

.visual-panel,
.invoice-visual,
.contact-form,
.contact-aside {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    box-shadow: var(--shadow);
}

.timeline-card,
.invoice-visual div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 12px;
}

.timeline-card.active { border-color: var(--green); box-shadow: inset 4px 0 0 var(--green); }
.timeline-card span, .timeline-card em, .invoice-visual span { color: var(--muted); font-style: normal; }
.invoice-visual img { width: 180px; margin-bottom: 20px; }
.invoice-visual strong { font-size: 24px; }

.price { font-size: 44px; font-weight: 900; color: var(--green); margin: 14px 0; }
.price-card.highlighted { border-color: var(--green); transform: translateY(-8px); }

.contact-form {
    display: grid;
    gap: 16px;
}

.contact-form label {
    display: grid;
    gap: 8px;
    font-weight: 800;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 13px 14px;
    font: inherit;
}

.contact-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-status {
    padding: 12px 14px;
    border-radius: 8px;
    font-weight: 800;
}
.form-status.success { background: #e6f5ed; color: #19613b; }
.form-status.error { background: #fdebea; color: #a53531; }

.marketing-footer {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 42px clamp(18px, 5vw, 72px);
    background: var(--ink);
    color: var(--white);
}

.marketing-footer img {
    display: block;
    width: min(260px, 70vw);
    max-width: 100%;
    height: auto;
    object-fit: contain;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--white);
}
.marketing-footer p { color: #cbd2d8; }
.footer-brand-block {
    display: grid;
    gap: 10px;
}
.copyright {
    margin: 4px 0 0;
    font-size: 13px;
}
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

@media (max-width: 980px) {
    .marketing-nav { align-items: flex-start; flex-direction: column; position: static; }
    .marketing-nav nav { justify-content: flex-start; overflow-x: auto; width: 100%; }
    .hero,
    .split,
    .contact-layout { grid-template-columns: 1fr; }
    .hero { min-height: auto; }
    .hero-visual { min-height: 420px; order: 2; }
    .feature-grid,
    .pricing-grid,
    .operations-grid,
    .feature-list,
    .screenshot-grid,
    .metric-strip { grid-template-columns: 1fr 1fr; }
    .screenshot-card.large { grid-column: span 2; }
}

@media (max-width: 620px) {
    .feature-grid,
    .pricing-grid,
    .operations-grid,
    .feature-list,
    .screenshot-grid,
    .metric-strip { grid-template-columns: 1fr; }
    .screenshot-card.large { grid-column: span 1; }
    .metric-strip div { border-right: 0; border-bottom: 1px solid var(--line); }
    h1 { font-size: 42px; }
    .hero-logo { width: min(280px, 82vw); }
    .hero-visual { min-height: 340px; }
    .marketing-footer { flex-direction: column; }
}