/* Public marketing site — harbor navy + kiwi green; platform theme stays on auth forms */
@font-face {
    font-family: "SyneDisplay";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("https://cdn.jsdelivr.net/gh/derekbackus/kiwidock-marketing-assets@6dac458add5881ba1c30bb66f7eebd6a0405ffdc/fonts/Syne-latin.woff2") format("woff2");
}

.mkt {
    --mkt-ink: #2E2E2E;
    --mkt-muted: #5A6B73;
    --mkt-navy: #17384D;
    --mkt-navy-deep: #102838;
    --mkt-accent: #5BA83B;
    --mkt-accent-deep: #3F7D2A;
    --mkt-pith: #A8D355;
    --mkt-track: #CDD8DE;
    --mkt-surface: #F3F6F7;
    --mkt-panel: rgba(255, 255, 255, 0.78);
    --mkt-line: color-mix(in srgb, var(--mkt-navy) 14%, transparent);
    --mkt-font: "Outfit", "Segoe UI", sans-serif;
    --mkt-display: "SyneDisplay", "Outfit", sans-serif;
    font-feature-settings: "ss04" 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--mkt-ink);
    background:
        radial-gradient(110% 70% at 8% -8%, rgba(91, 168, 59, 0.12), transparent 52%),
        radial-gradient(80% 60% at 100% 0%, rgba(23, 56, 77, 0.10), transparent 48%),
        linear-gradient(180deg, #eef3f5 0%, var(--mkt-surface) 40%, #e8eef1 100%);
    font-family: var(--mkt-font);
}

.mkt a {
    color: inherit !important;
    text-decoration: none !important;
}

.mkt h1,
.mkt h2,
.mkt h3,
.mkt h4,
.mkt h5,
.mkt h6 {
    line-height: 1.35;
    color: var(--mkt-navy);
}

.mkt-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem clamp(1.25rem, 4vw, 3rem);
    backdrop-filter: blur(12px);
    background: color-mix(in srgb, var(--mkt-surface) 82%, transparent);
    border-bottom: 1px solid var(--mkt-line);
}

.mkt-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--mkt-display);
    font-weight: 700;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    letter-spacing: -0.03em;
    color: var(--mkt-navy) !important;
}

.mkt-brand::before {
    content: "";
    width: 1em;
    height: 1em;
    flex: 0 0 1em;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20width%3D%22512%22%20height%3D%22512%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22fg%22%20cx%3D%2250%25%22%20cy%3D%2245%25%22%20r%3D%2262%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23F1F7DE%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23D3E7A6%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M110.48%2C14.64%20Q144.03%2C14.69%20187.01%2C59.43%20L184.12%2C82.12%20L168.88%2C67.88%20Q134.86%2C32.47%20110.48%2C14.64%20Z%22%20fill%3D%22%2317384D%22%2F%3E%3Cpath%20d%3D%22M184.42%2C83.59%20Q194.74%2C115.51%20165.47%2C170.21%20L143.00%2C174.48%20L151.83%2C155.58%20Q175.00%2C112.28%20184.42%2C83.59%20Z%22%20fill%3D%22%2317384D%22%2F%3E%3Cpath%20d%3D%22M141.69%2C175.22%20Q114.52%2C194.90%2053.46%2C183.96%20L42.45%2C163.91%20L63.15%2C166.47%20Q111.50%2C175.13%20141.69%2C175.22%20Z%22%20fill%3D%22%2317384D%22%2F%3E%3Cpath%20d%3D%22M41.35%2C162.90%20Q14.24%2C143.13%205.76%2C81.68%20L21.44%2C65.02%20L25.40%2C85.50%20Q32.10%2C134.15%2041.35%2C162.90%20Z%22%20fill%3D%22%2317384D%22%2F%3E%3Cpath%20d%3D%22M22.06%2C63.65%20Q32.47%2C31.76%2088.30%2C4.72%20L108.99%2C14.47%20L90.74%2C24.57%20Q46.54%2C45.98%2022.06%2C63.65%20Z%22%20fill%3D%22%2317384D%22%2F%3E%3Cg%20transform%3D%22translate%28100%20100%29%20scale%280.54%29%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%22100%22%20fill%3D%22url%28%23fg%29%22%20stroke%3D%22%23B9D667%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M0%2C-9.5%20Q4.6%2C-3.2%205.4%2C1.6%20A5.6%2C5.6%200%201%201%20-5.4%2C1.6%20Q-4.6%2C-3.2%200%2C-9.5%20Z%22%20fill%3D%22%232E2E2E%22%20transform%3D%22translate%280.00%20-60.00%29%20rotate%280.00%29%20scale%281.45%29%22%2F%3E%3Cpath%20d%3D%22M0%2C-9.5%20Q4.6%2C-3.2%205.4%2C1.6%20A5.6%2C5.6%200%201%201%20-5.4%2C1.6%20Q-4.6%2C-3.2%200%2C-9.5%20Z%22%20fill%3D%22%232E2E2E%22%20transform%3D%22translate%2851.96%20-30.00%29%20rotate%2860.00%29%20scale%281.45%29%22%2F%3E%3Cpath%20d%3D%22M0%2C-9.5%20Q4.6%2C-3.2%205.4%2C1.6%20A5.6%2C5.6%200%201%201%20-5.4%2C1.6%20Q-4.6%2C-3.2%200%2C-9.5%20Z%22%20fill%3D%22%232E2E2E%22%20transform%3D%22translate%2851.96%2030.00%29%20rotate%28120.00%29%20scale%281.45%29%22%2F%3E%3Cpath%20d%3D%22M0%2C-9.5%20Q4.6%2C-3.2%205.4%2C1.6%20A5.6%2C5.6%200%201%201%20-5.4%2C1.6%20Q-4.6%2C-3.2%200%2C-9.5%20Z%22%20fill%3D%22%232E2E2E%22%20transform%3D%22translate%280.00%2060.00%29%20rotate%28180.00%29%20scale%281.45%29%22%2F%3E%3Cpath%20d%3D%22M0%2C-9.5%20Q4.6%2C-3.2%205.4%2C1.6%20A5.6%2C5.6%200%201%201%20-5.4%2C1.6%20Q-4.6%2C-3.2%200%2C-9.5%20Z%22%20fill%3D%22%232E2E2E%22%20transform%3D%22translate%28-51.96%2030.00%29%20rotate%28240.00%29%20scale%281.45%29%22%2F%3E%3Cpath%20d%3D%22M0%2C-9.5%20Q4.6%2C-3.2%205.4%2C1.6%20A5.6%2C5.6%200%201%201%20-5.4%2C1.6%20Q-4.6%2C-3.2%200%2C-9.5%20Z%22%20fill%3D%22%232E2E2E%22%20transform%3D%22translate%28-51.96%20-30.00%29%20rotate%28300.00%29%20scale%281.45%29%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2235%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2231%22%20fill%3D%22%23DFE264%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.mkt-nav-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.85rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 500;
}

.mkt-nav-login {
    color: var(--mkt-muted) !important;
}

.mkt-nav-cta,
.mkt-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.05rem;
    border-radius: 0.5rem;
    background: var(--mkt-navy);
    color: #ffffff !important;
    font-weight: 600;
    transition: transform 180ms ease, background 180ms ease;
}

.mkt-nav-cta:hover,
.mkt-btn-primary:hover {
    background: var(--mkt-navy-deep);
    transform: translateY(-1px);
}

.mkt-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.05rem;
    border-radius: 0.5rem;
    border: 1px solid var(--mkt-line);
    background: transparent;
    font-weight: 600;
    transition: border-color 180ms ease, transform 180ms ease;
}

.mkt-btn-secondary:hover {
    border-color: color-mix(in srgb, var(--mkt-ink) 35%, transparent);
    transform: translateY(-1px);
}

.mkt-main { flex: 1; }

.mkt-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding: 1.5rem clamp(1.25rem, 4vw, 3rem) 2rem;
    border-top: 1px solid var(--mkt-line);
    color: var(--mkt-muted);
    font-size: 0.9rem;
}

.mkt-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--mkt-display);
    color: var(--mkt-navy);
    font-weight: 700;
}

.mkt-footer-brand::before {
    content: "";
    width: 1em;
    height: 1em;
    flex: 0 0 1em;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20width%3D%22512%22%20height%3D%22512%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22fg%22%20cx%3D%2250%25%22%20cy%3D%2245%25%22%20r%3D%2262%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23F1F7DE%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23D3E7A6%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M110.48%2C14.64%20Q144.03%2C14.69%20187.01%2C59.43%20L184.12%2C82.12%20L168.88%2C67.88%20Q134.86%2C32.47%20110.48%2C14.64%20Z%22%20fill%3D%22%2317384D%22%2F%3E%3Cpath%20d%3D%22M184.42%2C83.59%20Q194.74%2C115.51%20165.47%2C170.21%20L143.00%2C174.48%20L151.83%2C155.58%20Q175.00%2C112.28%20184.42%2C83.59%20Z%22%20fill%3D%22%2317384D%22%2F%3E%3Cpath%20d%3D%22M141.69%2C175.22%20Q114.52%2C194.90%2053.46%2C183.96%20L42.45%2C163.91%20L63.15%2C166.47%20Q111.50%2C175.13%20141.69%2C175.22%20Z%22%20fill%3D%22%2317384D%22%2F%3E%3Cpath%20d%3D%22M41.35%2C162.90%20Q14.24%2C143.13%205.76%2C81.68%20L21.44%2C65.02%20L25.40%2C85.50%20Q32.10%2C134.15%2041.35%2C162.90%20Z%22%20fill%3D%22%2317384D%22%2F%3E%3Cpath%20d%3D%22M22.06%2C63.65%20Q32.47%2C31.76%2088.30%2C4.72%20L108.99%2C14.47%20L90.74%2C24.57%20Q46.54%2C45.98%2022.06%2C63.65%20Z%22%20fill%3D%22%2317384D%22%2F%3E%3Cg%20transform%3D%22translate%28100%20100%29%20scale%280.54%29%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%22100%22%20fill%3D%22url%28%23fg%29%22%20stroke%3D%22%23B9D667%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M0%2C-9.5%20Q4.6%2C-3.2%205.4%2C1.6%20A5.6%2C5.6%200%201%201%20-5.4%2C1.6%20Q-4.6%2C-3.2%200%2C-9.5%20Z%22%20fill%3D%22%232E2E2E%22%20transform%3D%22translate%280.00%20-60.00%29%20rotate%280.00%29%20scale%281.45%29%22%2F%3E%3Cpath%20d%3D%22M0%2C-9.5%20Q4.6%2C-3.2%205.4%2C1.6%20A5.6%2C5.6%200%201%201%20-5.4%2C1.6%20Q-4.6%2C-3.2%200%2C-9.5%20Z%22%20fill%3D%22%232E2E2E%22%20transform%3D%22translate%2851.96%20-30.00%29%20rotate%2860.00%29%20scale%281.45%29%22%2F%3E%3Cpath%20d%3D%22M0%2C-9.5%20Q4.6%2C-3.2%205.4%2C1.6%20A5.6%2C5.6%200%201%201%20-5.4%2C1.6%20Q-4.6%2C-3.2%200%2C-9.5%20Z%22%20fill%3D%22%232E2E2E%22%20transform%3D%22translate%2851.96%2030.00%29%20rotate%28120.00%29%20scale%281.45%29%22%2F%3E%3Cpath%20d%3D%22M0%2C-9.5%20Q4.6%2C-3.2%205.4%2C1.6%20A5.6%2C5.6%200%201%201%20-5.4%2C1.6%20Q-4.6%2C-3.2%200%2C-9.5%20Z%22%20fill%3D%22%232E2E2E%22%20transform%3D%22translate%280.00%2060.00%29%20rotate%28180.00%29%20scale%281.45%29%22%2F%3E%3Cpath%20d%3D%22M0%2C-9.5%20Q4.6%2C-3.2%205.4%2C1.6%20A5.6%2C5.6%200%201%201%20-5.4%2C1.6%20Q-4.6%2C-3.2%200%2C-9.5%20Z%22%20fill%3D%22%232E2E2E%22%20transform%3D%22translate%28-51.96%2030.00%29%20rotate%28240.00%29%20scale%281.45%29%22%2F%3E%3Cpath%20d%3D%22M0%2C-9.5%20Q4.6%2C-3.2%205.4%2C1.6%20A5.6%2C5.6%200%201%201%20-5.4%2C1.6%20Q-4.6%2C-3.2%200%2C-9.5%20Z%22%20fill%3D%22%232E2E2E%22%20transform%3D%22translate%28-51.96%20-30.00%29%20rotate%28300.00%29%20scale%281.45%29%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2235%22%20fill%3D%22%23FFFFFF%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2231%22%20fill%3D%22%23DFE264%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.mkt-footer-domain { color: var(--mkt-muted); font-size: 0.85rem; }
.mkt-footer-links { display: flex; gap: 1.25rem; margin-left: auto; }
.mkt-footer-note { width: 100%; margin-top: 0.5rem; font-size: 0.85rem; color: var(--mkt-muted); }
.mkt-footer-note a { color: var(--mkt-accent-deep) !important; text-decoration: underline !important; }

.mkt-hero {
    position: relative;
    min-height: 0;
    display: grid;
    align-items: end;
    padding: clamp(2rem, 5vh, 3.25rem) clamp(1.25rem, 4vw, 3rem) clamp(1.75rem, 4vh, 2.75rem);
    overflow: hidden;
    isolation: isolate;
}

.mkt-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(115deg, rgba(16, 40, 56, 0.72) 0%, rgba(16, 40, 56, 0.28) 48%, transparent 72%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 85% 75% at 72% 38%, #2a5a73 0%, #17384D 42%, #102838 100%);
    animation: mkt-hero-drift 18s ease-in-out infinite alternate;
}

.mkt-hero::after {
    content: "";
    position: absolute;
    inset: auto -10% -30% 35%;
    z-index: -1;
    height: 70%;
    background: radial-gradient(closest-side, rgba(91, 168, 59, 0.38), transparent 70%);
    animation: mkt-glow 12s ease-in-out infinite alternate;
}

.mkt-hero-inner { max-width: 40rem; color: #F7FAF8; animation: mkt-rise 700ms ease-out both; }
.mkt-hero-brand {
    font-family: var(--mkt-display);
    font-size: clamp(1.85rem, 3vw, 2.35rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.035em;
    margin: 0 0 1rem;
}
.mkt-hero-lead {
    font-size: clamp(1.05rem, 2.2vw, 1.25rem);
    line-height: 1.45;
    max-width: 32rem;
    color: rgba(247, 250, 248, 0.88);
    margin: 0 0 1.75rem;
}
.mkt-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.mkt-hero .mkt-btn-primary { background: #F7FAF8; color: var(--mkt-navy) !important; }
.mkt-hero .mkt-btn-primary:hover { background: #ffffff; }
.mkt-hero .mkt-btn-secondary { border-color: rgba(247, 250, 248, 0.35); color: #F7FAF8; }
.mkt-hero .mkt-btn-secondary:hover { border-color: rgba(247, 250, 248, 0.7); }

.mkt-section {
    padding: clamp(3.5rem, 10vh, 5.5rem) clamp(1.25rem, 4vw, 3rem);
    max-width: 68rem;
    margin: 0 auto;
}
.mkt-section h2 {
    font-family: var(--mkt-display);
    font-size: clamp(1.4rem, 2vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.35;
    margin: 0 0 0.75rem;
}
.mkt-section > p { color: var(--mkt-muted); font-size: 1.05rem; line-height: 1.55; max-width: 36rem; margin: 0; }

.mkt-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; list-style: none; padding: 0; }
.mkt-flow li { padding: 1rem 0 0; border-top: 2px solid var(--mkt-accent); font-weight: 600; animation: mkt-rise 600ms ease-out both; }
.mkt-flow li:nth-child(2) { animation-delay: 80ms; }
.mkt-flow li:nth-child(3) { animation-delay: 160ms; }
.mkt-flow li:nth-child(4) { animation-delay: 240ms; }
.mkt-flow span { display: block; margin-top: 0.35rem; font-weight: 400; font-size: 0.92rem; color: var(--mkt-muted); }

.mkt-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; margin-top: 2rem; }
.mkt-features h3 { font-family: var(--mkt-display); font-size: 1.2rem; font-weight: 700; line-height: 1.35; margin: 0 0 0.35rem; }
.mkt-features p { margin: 0; color: var(--mkt-muted); line-height: 1.5; }
.mkt-cta-band { text-align: center; padding-bottom: 4rem; }
.mkt-cta-band .mkt-hero-actions { justify-content: center; margin-top: 1.5rem; }

.mkt-pricing-head { text-align: center; max-width: 40rem; margin: 0 auto 2.5rem; }
.mkt-pricing-head p { margin-left: auto; margin-right: auto; }
.mkt-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.mkt-plan { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 1.35rem 1.25rem 1.25rem; border: 1px solid var(--mkt-line); border-radius: 0.85rem; background: var(--mkt-panel); backdrop-filter: blur(8px); }
.mkt-plan-featured { border-color: color-mix(in srgb, var(--mkt-accent) 55%, var(--mkt-line)); box-shadow: 0 18px 40px rgba(23, 56, 77, 0.12); transform: translateY(-4px); }
.mkt-plan-badge { position: absolute; top: -0.65rem; left: 1rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.25rem 0.55rem; border-radius: 0.35rem; background: var(--mkt-accent); color: #ffffff; }
.mkt-plan h3 { font-family: var(--mkt-display); font-size: 1.35rem; line-height: 1.35; margin: 0; }
.mkt-plan-price { font-size: 1.85rem; font-weight: 700; letter-spacing: -0.02em; }
.mkt-plan-price small { font-size: 0.85rem; font-weight: 500; color: var(--mkt-muted); }
.mkt-plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; font-size: 0.92rem; color: var(--mkt-muted); flex: 1; }
.mkt-plan li::before { content: "·"; margin-right: 0.4rem; color: var(--mkt-accent); font-weight: 700; }
.mkt-plan .mkt-btn-primary, .mkt-plan .mkt-btn-secondary { width: 100%; }
.mkt-pricing-note { margin-top: 2rem; text-align: center; color: var(--mkt-muted); font-size: 0.9rem; }

.mkt-blog-kicker { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mkt-accent-deep); margin: 0 0 0.65rem; }
.mkt-blog-kicker a { color: inherit !important; }
.mkt-blog-index-head { max-width: 36rem; margin-bottom: 2.5rem; animation: mkt-rise 600ms ease-out both; }
.mkt-blog-index-head h1 { font-family: var(--mkt-display); font-size: clamp(1.65rem, 2.4vw, 2.05rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.35; margin: 0 0 0.65rem; }
.mkt-blog-index-head p { color: var(--mkt-muted); font-size: 1.05rem; line-height: 1.5; margin: 0; }
.mkt-blog-muted { color: var(--mkt-muted); }
.mkt-blog-list { display: grid; gap: 0; border-top: 1px solid var(--mkt-line); }
.mkt-blog-row { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.25rem 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--mkt-line); animation: mkt-rise 650ms ease-out both; }
.mkt-blog-row:nth-child(2) { animation-delay: 60ms; }
.mkt-blog-row:nth-child(3) { animation-delay: 120ms; }
.mkt-blog-row:nth-child(4) { animation-delay: 180ms; }
.mkt-blog-row:not(:has(.mkt-blog-thumb)) { grid-template-columns: 1fr; }
.mkt-blog-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0.35rem; }
.mkt-blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 320ms ease; }
.mkt-blog-row:hover .mkt-blog-thumb img { transform: scale(1.04); }
.mkt-blog-row-body time, .mkt-blog-byline { display: inline-block; font-size: 0.85rem; color: var(--mkt-muted); }
.mkt-blog-row-body h2 { font-family: var(--mkt-display); font-size: clamp(1.25rem, 2.4vw, 1.55rem); font-weight: 700; letter-spacing: -0.02em; margin: 0.35rem 0 0.5rem; line-height: 1.35; }
.mkt-blog-row-body h2 a:hover { color: var(--mkt-accent-deep) !important; }
.mkt-blog-row-body p { margin: 0 0 0.5rem; color: var(--mkt-muted); line-height: 1.5; max-width: 40rem; }
.mkt-blog-post { max-width: 44rem; }
.mkt-blog-post-head { margin-bottom: 2rem; animation: mkt-rise 650ms ease-out both; }
.mkt-blog-post-head h1 { font-family: var(--mkt-display); font-size: clamp(1.65rem, 2.4vw, 2.1rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.35; margin: 0 0 0.85rem; }
.mkt-blog-post-meta { color: var(--mkt-muted); font-size: 0.95rem; margin-bottom: 1.5rem; }
.mkt-blog-feature { width: 100%; max-height: 22rem; object-fit: cover; border-radius: 0.35rem; display: block; }

.mkt-blog-body,
.mkt-page-view {
    line-height: 1.65;
    font-size: 1.05rem;
    animation: mkt-rise 700ms ease-out 80ms both;
}
.mkt-blog-body :first-child, .mkt-page-view :first-child { margin-top: 0; }
.mkt-page-view h1 {
    font-family: var(--mkt-display);
    font-size: clamp(1.65rem, 2.4vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.35;
    margin: 0 0 0.85rem;
}
.mkt-blog-body h2, .mkt-blog-body h3, .mkt-page-view h2, .mkt-page-view h3 {
    font-family: var(--mkt-display);
    letter-spacing: -0.02em;
    line-height: 1.35;
    margin: 1.75rem 0 0.65rem;
}
.mkt-blog-body p, .mkt-page-view p { margin: 0.85rem 0; }
.mkt-blog-body img, .mkt-page-view img { max-width: 100%; height: auto; border-radius: 0.35rem; }
.mkt-blog-body blockquote, .mkt-page-view blockquote { margin: 1.25rem 0; padding: 0.15rem 1.25rem; border-left: 3px solid var(--mkt-accent); color: var(--mkt-muted); font-style: italic; }
.mkt-blog-body a, .mkt-page-view a { color: var(--mkt-accent-deep) !important; text-decoration: underline !important; text-underline-offset: 2px; }
.mkt-blog-body ul, .mkt-blog-body ol, .mkt-page-view ul, .mkt-page-view ol { padding-left: 1.25rem; }
.mkt-blog-tags { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--mkt-line); color: var(--mkt-muted); font-size: 0.85rem; }
.mkt-blog-tags span::before { content: "#"; opacity: 0.55; }

.mkt-legal { max-width: 46rem; }
.mkt-legal-head { margin-bottom: 1.75rem; }
.mkt-legal-head h1 { font-family: var(--mkt-display); font-size: clamp(1.55rem, 2.2vw, 1.95rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.35; margin: 0.35rem 0 0.65rem; }
.mkt-legal-meta { margin: 0; color: var(--mkt-muted); font-size: 0.92rem; }
.mkt-legal-notice { padding: 0.9rem 1rem; border-left: 3px solid var(--mkt-accent); background: color-mix(in srgb, var(--mkt-panel) 88%, transparent); border-radius: 0 0.5rem 0.5rem 0; color: var(--mkt-muted); font-size: 0.98rem; }
.mkt-legal-body { line-height: 1.65; font-size: 1.02rem; }
.mkt-legal-body h2 { font-family: var(--mkt-display); font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.35; margin: 1.85rem 0 0.55rem; }
.mkt-legal-body h3 { font-family: var(--mkt-display); font-size: 1.05rem; line-height: 1.35; margin: 1.25rem 0 0.4rem; }
.mkt-legal-body p { margin: 0.75rem 0; }
.mkt-legal-body ul { margin: 0.5rem 0 0.85rem; padding-left: 1.25rem; }
.mkt-legal-body a { color: var(--mkt-accent-deep) !important; text-decoration: underline !important; text-underline-offset: 2px; }

.mkt-page-view { max-width: 52rem; }
.mkt-blog-body h2, .mkt-page-view h2 { font-size: clamp(1.2rem, 1.8vw, 1.4rem); font-weight: 700; }
.mkt-blog-body h3, .mkt-page-view h3 { font-size: 1.08rem; font-weight: 700; }

.mkt-pipeline { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.65rem; list-style: none; padding: 0; margin: 1.5rem 0 0.25rem; }
.mkt-pipeline li { padding: 0.7rem 0.7rem 0.85rem; border-top: 2px solid var(--mkt-accent); background: var(--mkt-panel); border-radius: 0 0 0.45rem 0.45rem; }
.mkt-pipeline i { display: block; font-style: normal; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--mkt-accent-deep); }
.mkt-pipeline strong { display: block; font-family: var(--mkt-display); font-size: 0.98rem; margin: 0.2rem 0 0.3rem; }
.mkt-pipeline span { display: block; font-size: 0.82rem; line-height: 1.4; color: var(--mkt-muted); font-weight: 400; }

.mkt-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; list-style: none; padding: 0; margin: 1.25rem 0 0; }
.mkt-compare li { padding: 0.9rem 1rem; border: 1px solid var(--mkt-line); border-radius: 0.5rem; background: var(--mkt-panel); }
.mkt-compare li strong { display: block; font-family: var(--mkt-display); margin-bottom: 0.35rem; }
.mkt-compare li span { display: block; font-size: 0.9rem; color: var(--mkt-muted); }
.mkt-compare .mkt-compare-on { border-color: color-mix(in srgb, var(--mkt-accent) 55%, var(--mkt-line)); }

.mkt-shot { margin: 1.35rem 0 1.6rem; }
.mkt-shot img { width: 100%; height: auto; border: 1px solid var(--mkt-line); border-radius: 0.35rem; display: block; }
.mkt-caption { font-size: 0.85rem; color: var(--mkt-muted); margin: 0.45rem 0 0; }

@media (max-width: 960px) {
    .mkt-pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mkt-compare { grid-template-columns: 1fr; }
    .mkt-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mkt-plan-featured { transform: none; }
    .mkt-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .mkt-pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mkt-plans, .mkt-flow, .mkt-features { grid-template-columns: 1fr; }
    .mkt-blog-row { grid-template-columns: 1fr; }
    .mkt-blog-thumb { max-width: 12rem; }
    .mkt-hero { min-height: 0; align-items: center; }
}

@keyframes mkt-rise { from { opacity: 0; } to { opacity: 1; } }
@keyframes mkt-hero-drift { from { background-position: 0% 0%, 0 0, 72% 38%; } to { background-position: 0% 0%, 0 0, 64% 46%; } }
@keyframes mkt-glow { from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; } to { transform: translate3d(-4%, -3%, 0) scale(1.08); opacity: 1; } }

.mkt-page-view { max-width: 58rem; }

.mkt-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mkt-accent-deep);
    margin: 0 0 0.55rem;
}

.mkt-lead {
    font-size: 1.08rem;
    line-height: 1.55;
    max-width: 40rem;
}

.mkt-shots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.35rem 0 1.6rem;
}
.mkt-shots .mkt-shot { margin: 0; }

.mkt-faq { margin: 1.15rem 0 0.25rem; }
.mkt-faq h3 {
    font-family: var(--mkt-font);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: 0;
    margin: 0.95rem 0 0.3rem;
}
.mkt-faq h3:first-child { margin-top: 0; }
.mkt-faq p {
    margin: 0.25rem 0 0.55rem;
    color: var(--mkt-muted);
    max-width: 40rem;
}

.mkt-note {
    font-size: 0.92rem;
    color: var(--mkt-muted);
}

@media (max-width: 640px) {
    .mkt-shots { grid-template-columns: 1fr; }
}

/* CTA contrast: page/body link color was winning over button text */
.mkt a.mkt-nav-cta,
.mkt a.mkt-btn-primary,
.mkt-page-view a.mkt-nav-cta,
.mkt-page-view a.mkt-btn-primary,
.mkt-blog-body a.mkt-nav-cta,
.mkt-blog-body a.mkt-btn-primary {
    color: #ffffff !important;
    text-decoration: none !important;
    background: var(--mkt-navy);
}
.mkt a.mkt-nav-cta:hover,
.mkt a.mkt-btn-primary:hover,
.mkt-page-view a.mkt-nav-cta:hover,
.mkt-page-view a.mkt-btn-primary:hover,
.mkt-blog-body a.mkt-nav-cta:hover,
.mkt-blog-body a.mkt-btn-primary:hover {
    color: #ffffff !important;
    text-decoration: none !important;
    background: var(--mkt-navy-deep);
}

.mkt-shot video,
.mkt-blog-body video,
.mkt-page-view video {
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--mkt-line);
    border-radius: 0.35rem;
    display: block;
    background: #17384D;
}

/* Footer: eight links were one non-wrapping row */
.mkt-footer-links {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem 1.15rem;
}
.mkt-footer-links a {
    white-space: nowrap;
}

@media (max-width: 800px) {
    .mkt-footer {
        align-items: flex-start;
        gap: 0.85rem 1rem;
    }
    .mkt-footer-links {
        flex-basis: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }
    .mkt-footer-note {
        margin-top: 0.1rem;
        line-height: 1.55;
    }
}

@media (max-width: 640px) {
    .mkt-footer {
        padding-top: 1.75rem;
        padding-bottom: 1.75rem;
    }
    .mkt-footer-links a[href="/Account/Login"],
    .mkt-footer-links a[href="/Account/Register"] {
        display: none;
    }
}

/* Phone header: pin login + CTA to the brand row. They are not siblings of
   .mkt-brand in the markup, so flex wrapping cannot line them up. */
@media (max-width: 640px) {
    .mkt-nav {
        display: block;
        position: relative;
        padding: 0.7rem 1rem 0.65rem;
    }

    .mkt-brand {
        display: flex;
        align-items: center;
        height: 2.4rem;
        line-height: 1;
        max-width: calc(100% - 12.75rem);
    }

    .mkt-nav-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.35rem 0.85rem;
        margin-top: 0.55rem;
        padding-top: 0.55rem;
        border-top: 1px solid var(--mkt-line);
        font-size: 0.86rem;
    }

    .mkt-nav-links::before,
    .mkt-nav::after {
        content: none;
        display: none;
    }

    .mkt-nav-login,
    .mkt-nav-cta {
        position: absolute;
        top: 0.7rem;
        left: auto;
        height: 2.4rem;
        display: flex;
        align-items: center;
        margin: 0;
    }

    .mkt-nav-cta {
        right: 1rem;
        width: max-content;
        padding: 0.4rem 0.7rem;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .mkt-nav-login {
        right: 9.35rem;
        width: max-content;
    }

    .mkt-nav-links a:not(.mkt-nav-login):not(.mkt-nav-cta) {
        color: var(--mkt-muted) !important;
    }
}

/* Pricing page */
.mkt-page-view:has(.mkt-plans),
.mkt-page-view:has(.mkt-price-table) {
    max-width: 68rem;
}

.mkt-page-view .mkt-compare,
.mkt-page-view .mkt-plans {
    padding-left: 0;
    list-style: none;
}

.mkt-compare.mkt-compare-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mkt-price-table-wrap {
    overflow-x: auto;
    margin: 1.25rem 0 1.75rem;
    border: 1px solid var(--mkt-line);
    border-radius: 0.75rem;
    background: var(--mkt-panel);
}

.mkt-price-table {
    width: 100%;
    min-width: 36rem;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.mkt-price-table th,
.mkt-price-table td {
    padding: 0.7rem 0.85rem;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--mkt-line);
}

.mkt-price-table th:first-child,
.mkt-price-table td:first-child {
    text-align: left;
    font-weight: 600;
    color: var(--mkt-navy);
    white-space: nowrap;
}

.mkt-price-table thead th {
    font-family: var(--mkt-display);
    font-size: 0.95rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--mkt-navy) 6%, transparent);
}

.mkt-price-table .mkt-col-featured {
    background: color-mix(in srgb, var(--mkt-accent) 9%, transparent);
}

.mkt-price-table thead .mkt-col-featured {
    color: var(--mkt-accent-deep);
}

.mkt-price-table tbody tr:last-child td {
    border-bottom: none;
}

.mkt-yes {
    color: var(--mkt-accent-deep);
    font-weight: 700;
}

.mkt-no {
    color: color-mix(in srgb, var(--mkt-muted) 55%, transparent);
}

@media (max-width: 960px) {
    .mkt-compare.mkt-compare-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .mkt-compare.mkt-compare-4 {
        grid-template-columns: 1fr;
    }
}

/* Plan cards on marketing pages (wrappers, not the flat {plans} dump) */
.mkt-page-view .mkt-plans {
    margin: 1.75rem 0 0;
}

.mkt-page-view .mkt-plan h3 {
    font-family: var(--mkt-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

.mkt-page-view .mkt-plan p {
    margin: 0;
}

.mkt-page-view .mkt-plan ul {
    padding-left: 0;
    list-style: none;
}

.mkt-plan-tagline {
    color: var(--mkt-muted);
    font-size: 0.92rem;
    line-height: 1.4;
    flex: 1;
}

.mkt-page-view .mkt-plan a.mkt-btn-primary,
.mkt-page-view .mkt-plan a.mkt-btn-secondary {
    text-decoration: none !important;
}

.mkt-page-view .mkt-plan a.mkt-btn-secondary {
    color: var(--mkt-navy) !important;
}

.mkt-page-view .mkt-plan a.mkt-btn-secondary:hover {
    color: var(--mkt-navy) !important;
}

/* If {plans} renders a flat list (no .mkt-plan wrappers), stack each tier in a column */
.mkt-plans:not(:has(.mkt-plan)) {
    grid-template-rows: auto auto auto auto auto;
    row-gap: 0;
    column-gap: 1rem;
    padding-top: 0.65rem;
}

.mkt-plans:not(:has(.mkt-plan)) > h3:nth-of-type(1),
.mkt-plans:not(:has(.mkt-plan)) > h3:nth-of-type(1) ~ * { grid-column: 1; }
.mkt-plans:not(:has(.mkt-plan)) > h3:nth-of-type(2),
.mkt-plans:not(:has(.mkt-plan)) > h3:nth-of-type(2) ~ * { grid-column: 2; }
.mkt-plans:not(:has(.mkt-plan)) > h3:nth-of-type(3),
.mkt-plans:not(:has(.mkt-plan)) > h3:nth-of-type(3) ~ * { grid-column: 3; }
.mkt-plans:not(:has(.mkt-plan)) > h3:nth-of-type(4),
.mkt-plans:not(:has(.mkt-plan)) > h3:nth-of-type(4) ~ * { grid-column: 4; }

.mkt-plans:not(:has(.mkt-plan)) > .mkt-plan-badge {
    grid-row: 1;
    position: relative;
    top: auto;
    left: auto;
    justify-self: start;
    margin: 0 0 0.4rem 0.85rem;
}

.mkt-plans:not(:has(.mkt-plan)) > h3 {
    grid-row: 2;
    margin: 0;
    padding: 1.15rem 1.15rem 0.25rem;
    border: 1px solid var(--mkt-line);
    border-bottom: 0;
    border-radius: 0.85rem 0.85rem 0 0;
    background: var(--mkt-panel);
    font-size: 1.35rem;
}

.mkt-plans:not(:has(.mkt-plan)) > .mkt-plan-tagline {
    grid-row: 3;
    margin: 0;
    padding: 0 1.15rem 0.5rem;
    border-left: 1px solid var(--mkt-line);
    border-right: 1px solid var(--mkt-line);
    background: var(--mkt-panel);
}

.mkt-plans:not(:has(.mkt-plan)) > .mkt-plan-price {
    grid-row: 4;
    margin: 0;
    padding: 0 1.15rem 0.85rem;
    border-left: 1px solid var(--mkt-line);
    border-right: 1px solid var(--mkt-line);
    background: var(--mkt-panel);
}

.mkt-plans:not(:has(.mkt-plan)) > a {
    grid-row: 5;
    width: auto;
    margin: 0 1.15rem 1.15rem;
    border-radius: 0.5rem;
    box-shadow:
        -1.15rem 0 0 var(--mkt-panel),
        1.15rem 0 0 var(--mkt-panel),
        -1.15rem 1.15rem 0 var(--mkt-panel),
        1.15rem 1.15rem 0 var(--mkt-panel),
        0 1.15rem 0 var(--mkt-panel);
}

/* Blazor FocusOnNavigate focuses the first heading. Chrome/Safari treat
   that as :focus-visible, so hide heading outlines entirely. Keep a ring
   on links and buttons for keyboard users. */
.mkt h1:focus,
.mkt h2:focus,
.mkt h3:focus,
.mkt .mkt-main:focus,
.mkt .mkt-page-view:focus,
.mkt .mkt-section:focus {
    outline: none;
}

.mkt a:focus-visible,
.mkt button:focus-visible {
    outline: 2px solid var(--mkt-accent);
    outline-offset: 3px;
}

.mkt a.mkt-nav-cta:focus-visible,
.mkt a.mkt-btn-primary:focus-visible {
    outline-color: #ffffff;
}
