/*
 * Marketing landing — the public face. Dark workshop floor, hi-vis amber, with the live repair
 * pipeline as the hero signature. Shares the app's tokens/fonts (app.css).
 */

.mk {
    background: var(--bs-ink);
    color: #e8ebf0;
    font-family: var(--bs-font-ui);
    overflow-x: hidden;
}

.mk a { color: inherit; }
.mk__wrap { width: min(1120px, 100%); margin: 0 auto; padding: 0 1.5rem; }

/* ---- Nav ---- */
.mk-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(21, 23, 26, 0.86);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.mk-nav__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: 66px;
}

.mk-nav__brand {
    font-family: var(--bs-font-display);
    font-size: 1.85rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
}
.mk-logo { display: block; height: 30px; width: auto; }
.mk-logo--foot { height: 34px; }

.mk-nav__links {
    display: flex;
    gap: 1.5rem;
    margin-inline-start: 1rem;
}

.mk-nav__links a {
    color: #aeb6c2;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
}

.mk-nav__links a:hover { color: #fff; }

.mk-nav__cta {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.mk-btn {
    display: inline-block;
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    border-radius: 10px;
    padding: 0.7rem 1.15rem;
    transition: background-color 0.12s ease, transform 0.04s ease, border-color 0.12s ease;
}

.mk-btn--solid { background: var(--bs-hi-vis); color: var(--bs-ink-2); }
.mk-btn--solid:hover { background: var(--bs-hi-vis-press); }
.mk-btn--solid:active { transform: translateY(1px); }

.mk-btn--ghost { color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.25); }
.mk-btn--ghost:hover { border-color: var(--bs-hi-vis); color: var(--bs-hi-vis); }

.mk-link-quiet { color: #aeb6c2; text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.mk-link-quiet:hover { color: #fff; }

/* ---- Hero ---- */
.mk-hero {
    position: relative;
    padding: 4.5rem 0 3.5rem;
    background:
        radial-gradient(900px 480px at 78% -8%, rgba(0, 222, 145, 0.14), transparent 62%),
        radial-gradient(700px 420px at -8% 10%, rgba(255, 255, 255, 0.05), transparent 55%);
}

.mk-hero__eyebrow { color: var(--bs-hi-vis); }

.mk-hero__title {
    font-family: var(--bs-font-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 0.92;
    font-size: clamp(2.8rem, 8vw, 5.5rem);
    color: #fff;
    margin: 0.6rem 0 1.1rem;
    max-width: 16ch;
}

.mk-hero__title em {
    font-style: normal;
    color: var(--bs-hi-vis);
}

.mk-hero__lead {
    color: #b8c0cc;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    max-width: 52ch;
    margin: 0 0 1.9rem;
}

.mk-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }

/* ---- Signature: the live repair pipeline ---- */
.mk-pipeline {
    margin-top: 3.25rem;
    padding: 1.4rem 1.25rem 1.6rem;
    background: linear-gradient(180deg, var(--bs-steel-2), var(--bs-steel));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}

.mk-pipeline__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
}

.mk-pipeline__live {
    font-family: var(--bs-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #c7ccd6;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.mk-pipeline__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #36d399;
    box-shadow: 0 0 0 4px rgba(54, 211, 153, 0.18);
}

@media (prefers-reduced-motion: no-preference) {
    .mk-pipeline__dot { animation: mk-pulse 1.8s ease-in-out infinite; }
    @keyframes mk-pulse { 50% { box-shadow: 0 0 0 7px rgba(54, 211, 153, 0.05); } }
}

.mk-pipeline__track {
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.mk-stage {
    flex: 1 0 auto;
    min-width: 120px;
    position: relative;
    padding: 0.85rem 0.9rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-inline-end: 1.4rem;
}

.mk-stage:last-child { margin-inline-end: 0; }

/* connector */
.mk-stage:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    inset-inline-end: -1.4rem;
    width: 1.4rem;
    height: 2px;
    background: rgba(255, 255, 255, 0.14);
}

.mk-stage__label {
    font-family: var(--bs-font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8b93a1;
}

.mk-stage__count {
    font-family: var(--bs-font-display);
    font-size: 1.7rem;
    line-height: 1;
    color: #eef1f5;
    margin-top: 0.35rem;
}

.mk-stage--current {
    background: rgba(0, 222, 145, 0.12);
    border-color: rgba(0, 222, 145, 0.55);
}

.mk-stage--current .mk-stage__count { color: var(--bs-hi-vis); }

/* ---- Section scaffolding ---- */
.mk-section { padding: 4.5rem 0; }
.mk-section__eyebrow { color: var(--bs-hi-vis); }
.mk-section__title {
    font-family: var(--bs-font-ui);
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0.5rem 0 0.75rem;
    max-width: 22ch;
}
.mk-section__lead { color: #aab2bf; max-width: 56ch; font-size: 1.05rem; }

/* Contrast band: spreadsheet -> live */
.mk-band {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background:
        repeating-linear-gradient(-45deg, rgba(0, 222, 145, 0.05) 0 14px, transparent 14px 28px);
}

.mk-contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

.mk-contrast__card {
    padding: 1.5rem 1.6rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.mk-contrast__card--old { background: rgba(255, 255, 255, 0.02); }
.mk-contrast__card--new { background: rgba(0, 222, 145, 0.08); border-color: rgba(0, 222, 145, 0.4); }
.mk-contrast__h { font-family: var(--bs-font-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; color: #9aa2b0; margin-bottom: 0.75rem; }
.mk-contrast__card--new .mk-contrast__h { color: var(--bs-hi-vis); }
.mk-contrast ul { margin: 0; padding-inline-start: 1.1rem; color: #c2c9d4; line-height: 1.7; }

/* Features grid */
.mk-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2.25rem; }

.mk-feature {
    padding: 1.4rem 1.4rem 1.5rem;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.mk-feature__tag {
    font-family: var(--bs-font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bs-hi-vis);
}

.mk-feature__h { font-weight: 700; font-size: 1.12rem; color: #fff; margin: 0.55rem 0 0.4rem; }
.mk-feature__p { color: #a7aebb; font-size: 0.95rem; margin: 0; line-height: 1.55; }

/* How it works — a real sequence, so numbered */
.mk-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 2.25rem; counter-reset: step; }
.mk-step { padding-top: 1.1rem; border-top: 2px solid rgba(0, 222, 145, 0.5); }
.mk-step__n { font-family: var(--bs-font-display); font-size: 1.5rem; color: var(--bs-hi-vis); }
.mk-step__h { font-weight: 700; color: #fff; margin: 0.3rem 0 0.35rem; }
.mk-step__p { color: #a7aebb; font-size: 0.92rem; margin: 0; line-height: 1.5; }

/* Final CTA */
.mk-cta { text-align: center; padding: 5rem 0; }
.mk-cta__title { font-family: var(--bs-font-display); text-transform: uppercase; font-size: clamp(2.2rem, 6vw, 3.6rem); color: #fff; line-height: 0.95; margin: 0 0 1.4rem; }

/* ---- Pricing plans ---- */
.mk-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2.25rem; align-items: start; }
.mk-plan {
    padding: 1.6rem 1.5rem 1.75rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.mk-plan--featured { background: rgba(0, 222, 145, 0.08); border-color: rgba(0, 222, 145, 0.45); }
.mk-plan__name { font-family: var(--bs-font-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; color: var(--bs-hi-vis); }
.mk-plan__price { font-family: var(--bs-font-display); font-size: 2.6rem; color: #fff; line-height: 1; margin: 0.6rem 0 0.2rem; }
.mk-plan__per { color: #8b93a1; font-size: 0.85rem; }
.mk-plan__list { list-style: none; padding: 0; margin: 1.1rem 0 1.4rem; color: #c2c9d4; line-height: 1.9; }
/* The bullet is a DRAWN tick, not the character U+2713 — that glyph is in none of the fonts this
   site ships and painted zero pixels, so every plan's feature list rendered as bare indented text
   with no marker at all. On the PUBLIC pricing page, where the whole point is a scannable list of
   what you get. Two borders on a rotated box always resolve to a tick; see
   .cover-option__check in app.css and tests/Browser/glyph-coverage, which measures the ink. */
.mk-plan__list li { position: relative; padding-inline-start: 1.25rem; }
.mk-plan__list li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0.15rem;
    top: 0.62em;
    width: 0.3rem;
    height: 0.58rem;
    border: solid var(--bs-hi-vis);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.mk-plan .mk-btn { display: block; text-align: center; }

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

/* ---- Signup / welcome (centered card) ---- */
.mk-narrow { width: min(560px, 100%); margin: 0 auto; padding: 3.5rem 1.5rem 4.5rem; }

.mk-card {
    background: linear-gradient(180deg, var(--bs-steel-2), var(--bs-steel));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 2.25rem 2rem;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}

.mk-card__title { font-family: var(--bs-font-ui); font-weight: 700; font-size: 1.7rem; color: #fff; margin: 0.4rem 0 0.3rem; }
.mk-card__lead { color: #aab2bf; margin: 0 0 1.5rem; }

.mk-form { display: flex; flex-direction: column; gap: 1rem; }
.mk-form .field label { color: #9aa2b0; }
.mk-form .field input {
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    color: #eef1f5;
}
.mk-form .field input::placeholder { color: #6f7886; }
.mk-form .field input:focus {
    border-color: var(--bs-hi-vis);
    box-shadow: 0 0 0 4px rgba(0, 222, 145, 0.18);
    background: rgba(255, 255, 255, 0.06);
}

.mk-field-suffix { display: flex; align-items: stretch; }
.mk-field-suffix input { border-start-end-radius: 0; border-end-end-radius: 0; flex: 1; }
.mk-field-suffix .mk-suffix {
    display: flex; align-items: center;
    padding: 0 0.8rem;
    font-family: var(--bs-font-mono);
    font-size: 0.8rem;
    color: #8b93a1;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    border-inline-start: none;
    border-start-end-radius: 10px;
    border-end-end-radius: 10px;
}

.mk-form .field textarea {
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    color: #eef1f5;
    resize: vertical;
}
.mk-form .field textarea::placeholder { color: #6f7886; }
.mk-form .field textarea:focus {
    border-color: var(--bs-hi-vis);
    box-shadow: 0 0 0 4px rgba(0, 222, 145, 0.18);
    background: rgba(255, 255, 255, 0.06);
}
.mk-muted { color: var(--bs-muted); font-size: 0.88em; }
.mk-form .mk-btn--solid { margin-top: 0.5rem; text-align: center; }

.signup-error {
    margin: 0 0 1.1rem;
    padding: 0.7rem 0.9rem;
    border-radius: 9px;
    background: rgba(220, 53, 69, 0.12);
    border: 1px solid rgba(220, 53, 69, 0.45);
    color: #ffb3b8;
    font-size: 0.9rem;
}

.mk-url-chip {
    display: inline-block;
    font-family: var(--bs-font-mono);
    font-size: 0.95rem;
    color: var(--bs-hi-vis);
    background: rgba(0, 222, 145, 0.1);
    border: 1px solid rgba(0, 222, 145, 0.4);
    border-radius: 9px;
    padding: 0.6rem 0.9rem;
    margin: 0.5rem 0 1.5rem;
    word-break: break-all;
}

/* Footer */
.mk-footer { border-top: 1px solid rgba(255, 255, 255, 0.07); padding: 2.5rem 0; color: #7e879a; font-size: 0.88rem; }
.mk-footer__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* Responsive */
@media (max-width: 860px) {
    .mk-features { grid-template-columns: 1fr 1fr; }
    .mk-steps { grid-template-columns: 1fr 1fr; }
    .mk-contrast { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .mk-nav__links { display: none; }
    .mk-features { grid-template-columns: 1fr; }
    .mk-steps { grid-template-columns: 1fr; }
}