/* ---------------------------------------------------------------------------
   Public homepage. Navy hero and closing band around a white page, with the
   product drawn in HTML (the .app, .kb, .contact, .import and .compose
   blocks) inside browser frames (.mkt-shot).
   ------------------------------------------------------------------------- */

.mkt {
    --ink: #0e1830;
    --muted: #586079;
    --faint: #8a90a6;
    --line: #e6e9f2;
    --surface: #f6f8fc;
    --deep: #060e20;
    --sky: #5ea3ff;
    --good: #16a34a;
    --bad: #dc2626;
    --warn: #d97706;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--ink);
    /* Navy under the sticky header, so its glass reads as navy at the top. */
    background: linear-gradient(var(--fp-navy) 0 120px, #fff 120px);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

.mkt h1, .mkt h2, .mkt h3 {
    font-weight: 800;
    letter-spacing: -0.025em;
    color: inherit;
}

.mkt p {
    line-height: 1.6;
}

.ico {
    width: 1.15em;
    height: 1.15em;
    fill: currentColor;
    flex: none;
    vertical-align: -0.2em;
}

/* ---- Header ------------------------------------------------------------ */

.mkt-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(10, 23, 48, 0.86);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.mkt-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.8rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.mkt-nav {
    display: flex;
    gap: 1.35rem;
    margin-right: auto;
}

.mkt-nav a, .mkt-signin {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.92rem;
    transition: color 0.15s;
}

.mkt-nav a:hover, .mkt-signin:hover {
    color: #fff;
}

.mkt-header-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* ---- Buttons ----------------------------------------------------------- */

.mkt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 1.15rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    color: var(--ink);
    border: 1px solid #d7dbe8;
    background: #fff;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}

.mkt-btn:hover {
    border-color: var(--fp-blue);
    color: var(--fp-blue);
}

.mkt-btn-primary {
    background: linear-gradient(180deg, #2a7bff 0%, var(--fp-blue) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 24px -10px rgba(11, 99, 246, 0.8);
}

.mkt-btn-primary:hover {
    color: #fff;
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 14px 30px -10px rgba(11, 99, 246, 0.9);
}

.mkt-btn-ghost {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.mkt-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.32);
    color: #fff;
}

.mkt-btn-lg {
    padding: 0.85rem 1.5rem;
    font-size: 1.02rem;
}

.mkt-btn-block {
    display: flex;
    width: 100%;
}

/* ---- Hero -------------------------------------------------------------- */

.mkt-hero {
    position: relative;
    color: #fff;
    padding: 5.5rem 1.5rem 0;
    background:
        radial-gradient(900px 480px at 50% -80px, rgba(11, 99, 246, 0.55), transparent 70%),
        radial-gradient(600px 400px at 90% 30%, rgba(94, 163, 255, 0.16), transparent 70%),
        linear-gradient(180deg, var(--fp-navy) 0%, var(--deep) 100%);
    text-align: center;
    isolation: isolate;
}

/* Faint grid, fading out towards the edges. */
.mkt-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%);
}

/* White floor the screenshot overlaps into. */
.mkt-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 18%;
    z-index: -1;
    background: #fff;
}

.mkt-hero-copy {
    max-width: 820px;
    margin: 0 auto;
}

.mkt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1.5rem;
    padding: 0.35rem 0.9rem 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #cfe0ff;
    background: rgba(94, 163, 255, 0.12);
    border: 1px solid rgba(94, 163, 255, 0.28);
}

/* Author and dates under a guide's eyebrow. */
.mkt-byline {
    margin: -0.75rem 0 1.5rem;
    font-size: 0.9rem;
    color: #b9c8e6;
}

.mkt-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.18);
}

.mkt-hero h1 {
    font-size: clamp(2.5rem, 6vw, 4.4rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
    text-wrap: balance;
    /* background-clip: text only paints inside the box, and at this line
       height the descenders of g, p and y hang below it. */
    padding-bottom: 0.12em;
    margin: 0 0 1.2rem;
    background: linear-gradient(180deg, #fff 30%, #b9d3ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mkt-lede {
    font-size: 1.2rem;
    color: rgba(226, 234, 250, 0.78);
    text-wrap: pretty;
    margin: 0 auto 2.25rem;
    max-width: 660px;
}

.mkt-cta-row {
    display: flex;
    gap: 0.85rem;
    justify-content: center;
    flex-wrap: wrap;
}

.mkt-hero-points {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.6rem;
    list-style: none;
    padding: 0;
    margin: 1.6rem 0 0;
    font-size: 0.9rem;
    color: rgba(226, 234, 250, 0.7);
}

.mkt-hero-points .ico {
    color: #4ade80;
}

/* ---- Browser frame ----------------------------------------------------- */

.mkt-shot {
    position: relative;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(15, 30, 70, 0.1);
    box-shadow:
        0 2px 4px rgba(10, 23, 48, 0.04),
        0 24px 60px -20px rgba(10, 23, 48, 0.28);
    overflow: hidden;
    text-align: left;
    font-size: 13px;
    color: var(--ink);
}

.mkt-shot-hero {
    max-width: 1120px;
    margin: 4rem auto 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        0 0 0 6px rgba(255, 255, 255, 0.04),
        0 40px 120px -30px rgba(11, 99, 246, 0.55),
        0 30px 60px -30px rgba(0, 0, 0, 0.6);
    animation: mkt-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both 0.1s;
}

@keyframes mkt-rise {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.98);
    }
}

.shot-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    background: #f1f3f8;
    border-bottom: 1px solid var(--line);
}

.shot-chrome > span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #dde1ea;
}

.shot-chrome > span:nth-child(1) { background: #ff5f57; }
.shot-chrome > span:nth-child(2) { background: #febc2e; }
.shot-chrome > span:nth-child(3) { background: #28c840; }

.shot-url {
    margin: 0 auto;
    padding: 3px 14px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 11.5px;
    display: flex;
    align-items: center;
    gap: 4px;
    transform: translateX(-24px);
}

.shot-url .ico {
    width: 11px;
    height: 11px;
    color: var(--good);
}

/* ---- Shared bits of the drawn app -------------------------------------- */

.app-avatar {
    --c: var(--fp-blue);
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--c);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    flex: none;
}

.app-avatar-sm {
    width: 22px;
    height: 22px;
    font-size: 9.5px;
}

.app-avatar-lg {
    width: 46px;
    height: 46px;
    font-size: 15px;
}

.app-chip {
    --c: var(--fp-blue);
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--c);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    background: #eef1f7;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.tag .ico {
    width: 12px;
    height: 12px;
}

.tag-good { background: #e7f7ec; color: #15803d; }
.tag-info { background: #e8f0ff; color: #1d4ed8; }
.tag-warn { background: #fff4e0; color: #b45309; }

/* ---- Today (hero) ------------------------------------------------------ */

.app-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: var(--fp-navy);
    color: #fff;
    font-size: 13.5px;
}

.app-top img {
    border-radius: 4px;
}

.app-top .app-avatar {
    margin-left: auto;
    width: 24px;
    height: 24px;
    background: #2a4a85;
}

.app-body {
    display: grid;
    grid-template-columns: 190px 1fr;
    background: #f5f6fa;
}

.app-side {
    background: #fff;
    border-right: 1px solid var(--line);
    padding: 10px 0;
}

.app-nav, .app-ws {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    color: #3a4157;
    white-space: nowrap;
}

.app-nav .ico {
    color: #7a8097;
}

.app-nav-active {
    background: #eef3ff;
    color: var(--fp-blue);
    font-weight: 600;
}

.app-nav-active .ico {
    color: var(--fp-blue);
}

.app-nav-sub {
    padding-left: 26px;
    font-size: 12.5px;
}

.app-ws {
    margin-top: 4px;
    font-weight: 500;
}

.app-ws i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--c);
}

.app-main {
    padding: 18px 20px 22px;
    min-width: 0;
}

.app-h1 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.app-muted {
    color: var(--faint);
    font-size: 12px;
    margin-bottom: 14px;
}

.app-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.app-stats > div {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
}

.app-stats small {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--faint);
}

.app-stats strong {
    font-size: 20px;
    font-weight: 700;
    margin: 2px 0;
}

.app-stats span {
    color: var(--faint);
    font-size: 11px;
}

.app-good { color: var(--good); }
.app-bad { color: var(--bad); }

.app-cols {
    display: grid;
    grid-template-columns: 1fr 230px;
    gap: 14px;
}

.app-h2 {
    font-weight: 700;
    margin: 0 0 6px;
}

.app-list {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 12px;
}

.app-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-top: 1px solid #f0f2f7;
}

.app-row:first-child {
    border-top: none;
}

.app-row > div {
    flex: 1;
    min-width: 0;
}

.app-row em {
    font-style: normal;
    color: var(--fp-blue);
    font-size: 11.5px;
}

.app-check {
    width: 14px;
    height: 14px;
    border: 1.5px solid #9aa0b4;
    border-radius: 3px;
    flex: none;
}

.app-date {
    color: var(--muted);
    font-size: 11.5px;
}

.app-wscards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.app-wscard {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 3px solid var(--c);
    border-radius: 8px;
    padding: 11px 13px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.app-wscard span {
    color: var(--muted);
    font-size: 11.5px;
}

.app-meter {
    height: 5px;
    border-radius: 3px;
    background: #eef0f5;
    margin-top: 6px;
    overflow: hidden;
}

.app-meter i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--c);
}

/* ---- "Made for" strip -------------------------------------------------- */

.mkt-for {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3.5rem 1.5rem 1rem;
    text-align: center;
}

.mkt-for p {
    margin: 0 0 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
}

.mkt-for ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mkt-for li {
    padding: 0.5rem 1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: #3a4157;
    font-weight: 500;
    background: var(--surface);
}

.mkt-for em {
    font-style: normal;
    color: var(--fp-blue);
    font-weight: 700;
}

/* ---- Sections ---------------------------------------------------------- */

.mkt-section {
    max-width: 1140px;
    margin: 0 auto;
    padding: 6rem 1.5rem;
    text-align: center;
}

.mkt-kicker {
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fp-blue);
}

.mkt-section h2, .mkt-feature h2 {
    font-size: clamp(1.9rem, 3.6vw, 2.6rem);
    line-height: 1.12;
    margin: 0 0 1rem;
}

.mkt-section-lede {
    color: var(--muted);
    font-size: 1.12rem;
    max-width: 660px;
    margin: 0 auto 3rem;
}

/* Full-bleed background; the padding keeps the content at section width. */
.mkt-section-alt {
    max-width: none;
    padding-left: max(1.5rem, calc((100% - 1080px) / 2));
    padding-right: max(1.5rem, calc((100% - 1080px) / 2));
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

/* ---- Comparison -------------------------------------------------------- */

.mkt-compare {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    text-align: left;
}

.mkt-compare-card {
    padding: 1.75rem;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: var(--surface);
}

.mkt-compare-card h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    margin: 0 0 1.1rem;
    letter-spacing: -0.01em;
}

.mkt-compare-card h3 img {
    border-radius: 5px;
}

.mkt-compare-us {
    background: linear-gradient(160deg, var(--fp-navy) 0%, #0f2a5c 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 30px 60px -30px rgba(11, 99, 246, 0.6);
}

.mkt-cons, .mkt-pros, .mkt-ticks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.mkt-cons li, .mkt-pros li, .mkt-ticks li {
    display: flex;
    gap: 0.6rem;
    line-height: 1.45;
}

.mkt-cons li {
    color: var(--muted);
}

.mkt-cons .ico {
    color: #c2c7d6;
}

.mkt-pros .ico {
    color: #4ade80;
}

/* ---- Feature rows ------------------------------------------------------ */

.mkt-features {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 7rem;
}

.mkt-feature {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
    gap: 4.5rem;
}

.mkt-feature-flip {
    grid-template-columns: 1.15fr 0.85fr;
}

.mkt-feature-flip .mkt-feature-copy {
    order: 2;
}

.mkt-feature h2 {
    font-size: clamp(1.8rem, 3vw, 2.3rem);
}

.mkt-feature-copy > p:not(.mkt-kicker) {
    color: var(--muted);
    font-size: 1.08rem;
    margin: 0 0 1.5rem;
}

.mkt-ticks li {
    font-weight: 500;
}

.mkt-ticks .ico {
    color: #fff;
    background: var(--fp-blue);
    border-radius: 50%;
    padding: 3px;
    width: 20px;
    height: 20px;
}

/* A soft coloured glow behind each drawn screen. */
.mkt-feature .mkt-shot {
    box-shadow:
        0 2px 4px rgba(10, 23, 48, 0.04),
        0 30px 70px -30px rgba(11, 99, 246, 0.35),
        0 0 0 8px rgba(11, 99, 246, 0.04);
}

/* Deals kb */
.kb {
    background: #f5f6fa;
    padding: 14px;
}

.kb-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 16px;
}

.kb-total {
    margin-left: auto;
    white-space: nowrap;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.kb-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    font-size: 12px;
}

.kb-col {
    background: #eceff5;
    border-radius: 9px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.kb-col-head {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 2px 3px;
}

.kb-col-head span {
    color: var(--faint);
    font-weight: 600;
}

.kb-card {
    background: #fff;
    border-radius: 7px;
    padding: 9px 10px;
    box-shadow: 0 1px 2px rgba(10, 23, 48, 0.08);
}

.kb-card:nth-child(2) {
    transform: rotate(-1.5deg) translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(10, 23, 48, 0.3);
}

.kb-card-won {
    border-left: 3px solid var(--good);
}

.kb-card-title {
    font-weight: 600;
    line-height: 1.3;
}

.kb-card-co {
    color: var(--faint);
    font-size: 11.5px;
    margin: 2px 0 8px;
}

.kb-card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Contact page */
.contact {
    padding: 16px;
}

.contact-head {
    display: flex;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.contact-head b {
    display: block;
    font-size: 17px;
}

.contact-head > div > span {
    color: var(--muted);
}

.contact-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 7px;
}

.contact-body {
    display: grid;
    grid-template-columns: 1fr 190px;
    gap: 16px;
    padding-top: 12px;
}

.contact small {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 4px 0 8px;
}

.tl {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    position: relative;
}

.tl > .ico {
    width: 28px;
    height: 28px;
    padding: 6px;
    border-radius: 50%;
    background: #eef3ff;
    color: var(--fp-blue);
}

.tl b {
    display: block;
    font-weight: 600;
}

.tl span {
    color: var(--faint);
    font-size: 11.5px;
}

.contact-side {
    border-left: 1px solid var(--line);
    padding-left: 14px;
}

.contact-deal {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 12px;
}

.contact-deal b, .contact-peer b {
    display: block;
    font-weight: 600;
}

.contact-deal span, .contact-peer div span {
    color: var(--muted);
    font-size: 11.5px;
}

.contact-peer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
}

/* Import */
.import {
    padding: 16px;
}

.import-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.import-file {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.import-file .ico {
    color: var(--good);
}

.import-done {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--good);
    font-weight: 600;
    font-size: 12px;
}

.import-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.import-stats > div {
    padding: 12px;
    border-radius: 9px;
    background: var(--surface);
    border: 1px solid var(--line);
}

.import-stats > div:first-child {
    background: #effaf2;
    border-color: #cdeed7;
}

.import-stats strong {
    display: block;
    font-size: 22px;
    font-weight: 700;
}

.import-stats span {
    color: var(--muted);
    font-size: 11.5px;
}

.import-rows {
    border: 1px solid var(--line);
    border-radius: 9px;
}

.import-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr auto;
    gap: 10px;
    align-items: center;
    padding: 9px 12px;
    border-top: 1px solid #f0f2f7;
}

.import-row:first-child {
    border-top: none;
}

.import-row b {
    font-weight: 600;
}

.import-row > span:not(.tag) {
    color: var(--muted);
}

/* Compose */
.compose {
    padding: 6px 16px 16px;
}

.compose-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
}

.compose-field small {
    width: 52px;
    color: var(--faint);
}

.compose-field .tag {
    margin-left: auto;
}

.compose-tools {
    display: flex;
    gap: 12px;
    padding: 9px 0;
    color: #7a8097;
    border-bottom: 1px solid var(--line);
}

.compose-body {
    padding: 12px 0 4px;
    color: #3a4157;
}

.compose-body p {
    margin: 0 0 10px;
    line-height: 1.55;
}

.compose-body i {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: #eceff5;
    margin-bottom: 9px;
}

.compose-body i.short {
    width: 55%;
}

.compose-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.compose-send {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    background: var(--fp-blue);
    color: #fff;
    font-weight: 600;
}

.compose-note {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--good);
    font-size: 12px;
    font-weight: 600;
}

/* ---- More features grid ------------------------------------------------ */

.mkt-more {
    padding-top: 7rem;
}

.mkt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    text-align: left;
    margin-top: 3rem;
}

.mkt-card {
    padding: 1.6rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.mkt-card:hover {
    border-color: #cfdcf7;
    box-shadow: 0 20px 40px -24px rgba(11, 99, 246, 0.35);
    transform: translateY(-2px);
}

.mkt-card-icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: linear-gradient(160deg, #eaf2ff, #dce8ff);
    color: var(--fp-blue);
    margin-bottom: 1rem;
}

.mkt-card-icon .ico {
    width: 22px;
    height: 22px;
}

.mkt-card h3 {
    font-size: 1.08rem;
    letter-spacing: -0.01em;
    margin: 0 0 0.45rem;
}

.mkt-card h3 a {
    color: inherit;
    text-decoration: none;
}

.mkt-card h3 a:hover {
    color: var(--fp-blue);
}

.mkt-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.96rem;
}

/* ---- How it works ------------------------------------------------------ */

.mkt-how {
    padding-top: 2rem;
}

.mkt-steps {
    list-style: none;
    margin: 3rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    text-align: left;
    position: relative;
}

/* The line joining the three numbers. */
.mkt-steps::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 44px;
    right: 33%;
    border-top: 2px dashed #cfd8ea;
}

.mkt-steps li {
    position: relative;
}

.mkt-step-n {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--fp-navy);
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    margin-bottom: 1.2rem;
    position: relative;
    box-shadow: 0 0 0 6px #fff;
}

.mkt-steps h3 {
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem;
}

.mkt-steps p {
    margin: 0;
    color: var(--muted);
}

/* ---- Pricing ----------------------------------------------------------- */

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

.mkt-plan {
    position: relative;
    padding: 2rem 1.75rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.mkt-plan-featured {
    background: linear-gradient(170deg, var(--fp-navy) 0%, #11306a 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 40px 80px -40px rgba(11, 99, 246, 0.8);
    transform: translateY(-10px);
}

.mkt-plan-badge {
    position: absolute;
    top: 1.9rem;
    right: 1.75rem;
    margin: 0;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #cfe0ff;
    background: rgba(94, 163, 255, 0.18);
    border: 1px solid rgba(94, 163, 255, 0.35);
}

.mkt-plan h3 {
    margin: 0 0 0.3rem;
    font-size: 1.2rem;
    letter-spacing: -0.01em;
}

.mkt-plan-for {
    color: var(--muted);
    font-size: 0.92rem;
    margin: 0 0 1.4rem;
}

.mkt-plan-featured .mkt-plan-for {
    color: rgba(226, 234, 250, 0.7);
}

.mkt-plan-price {
    font-size: 2.8rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 1.4rem;
    line-height: 1;
}

.mkt-plan-price span {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--faint);
}

.mkt-plan-featured .mkt-plan-price span {
    color: rgba(226, 234, 250, 0.6);
}

.mkt-plan ul {
    list-style: none;
    margin: 1.6rem 0 0;
    padding: 1.4rem 0 0;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.mkt-plan-featured ul {
    border-top-color: rgba(255, 255, 255, 0.12);
}

.mkt-plan li {
    display: flex;
    gap: 0.55rem;
    font-size: 0.94rem;
    line-height: 1.4;
}

.mkt-plan li .ico {
    color: var(--fp-blue);
}

.mkt-plan-featured li .ico {
    color: #4ade80;
}

/* ---- FAQ --------------------------------------------------------------- */

.mkt-faq-section {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 4rem;
    text-align: left;
    align-items: start;
}

.mkt-faq-intro {
    position: sticky;
    top: 6rem;
}

.mkt-faq-intro > p:not(.mkt-kicker) {
    color: var(--muted);
    margin: 0;
}

.mkt-faq details {
    border-bottom: 1px solid var(--line);
}

.mkt-faq details:first-child {
    border-top: 1px solid var(--line);
}

.mkt-faq summary {
    position: relative;
    padding: 1.3rem 2.5rem 1.3rem 0;
    font-weight: 600;
    font-size: 1.06rem;
    cursor: pointer;
    list-style: none;
}

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

.mkt-faq summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--fp-blue);
}

.mkt-faq details[open] summary::after {
    content: "\2212";
    background: var(--fp-blue);
    border-color: var(--fp-blue);
    color: #fff;
}

.mkt-faq details p {
    margin: 0 0 1.3rem;
    padding-right: 2.5rem;
    color: var(--muted);
}

/* ---- Closing band ------------------------------------------------------ */

.mkt-final {
    padding: 0 1.5rem 6rem;
}

.mkt-final-inner {
    position: relative;
    max-width: 1140px;
    margin: 0 auto;
    padding: 5rem 1.5rem;
    border-radius: 28px;
    text-align: center;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(700px 360px at 50% 120%, rgba(11, 99, 246, 0.7), transparent 70%),
        linear-gradient(180deg, var(--fp-navy), var(--deep));
}

.mkt-final-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 60% 70% at 50% 100%, #000, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 100%, #000, transparent 75%);
}

.mkt-final h2 {
    font-size: clamp(2rem, 4.2vw, 3rem);
    margin: 0 0 0.9rem;
}

.mkt-final p {
    color: rgba(226, 234, 250, 0.75);
    font-size: 1.15rem;
    margin: 0 0 2rem;
}

/* ---- Footer ------------------------------------------------------------ */

.mkt-footer {
    background: var(--deep);
    color: rgba(226, 234, 250, 0.65);
    padding: 4rem 1.5rem 2rem;
    font-size: 0.92rem;
}

.mkt-footer-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
}

.mkt-footer-brand p {
    margin: 1rem 0 0;
    max-width: 300px;
}

.mkt-footer-badge {
    display: inline-block;
    margin-top: 1.25rem;
}

.mkt-footer-badge img {
    display: block;
    max-width: 150px;
    height: auto;
}

.mkt-footer nav {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mkt-footer nav b {
    color: #fff;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.mkt-footer nav a {
    color: rgba(226, 234, 250, 0.65);
    text-decoration: none;
}

.mkt-footer nav a:hover {
    color: #fff;
}

.mkt-footer-legal {
    max-width: 1140px;
    margin: 3rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.85rem;
}

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 1000px) {
    .mkt-feature {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .mkt-feature-flip .mkt-feature-copy {
        order: 0;
    }

    .mkt-features {
        gap: 5rem;
    }

    .app-cols {
        grid-template-columns: 1fr;
    }

    .app-wscards {
        display: none;
    }

    .mkt-faq-section {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .mkt-faq-intro {
        position: static;
    }
}

@media (max-width: 860px) {
    .mkt-nav {
        display: none;
    }

    .mkt-header-actions {
        margin-left: auto;
    }

    .mkt-compare, .mkt-grid, .mkt-pricing, .mkt-steps {
        grid-template-columns: 1fr;
    }

    .mkt-steps::before {
        display: none;
    }

    .mkt-plan-featured {
        transform: none;
    }

    .mkt-footer-inner {
        grid-template-columns: 1fr 1fr;
    }

    .mkt-footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .mkt-hero {
        padding-top: 3.5rem;
    }

    .mkt-lede {
        font-size: 1.05rem;
    }

    .mkt-cta-row {
        flex-direction: column;
        align-items: stretch;
    }

    .mkt-shot {
        font-size: 12px;
    }

    .mkt-shot-hero {
        margin-top: 2.5rem;
    }

    .app-body {
        grid-template-columns: 1fr;
    }

    .app-side {
        display: none;
    }

    .app-stats strong {
        font-size: 16px;
    }

    .kb-cols {
        grid-template-columns: repeat(2, 1fr);
    }

    .kb-col:nth-child(n + 3) {
        display: none;
    }

    .contact-body {
        grid-template-columns: 1fr;
    }

    .contact-side {
        border-left: none;
        padding-left: 0;
    }

    .import-row {
        grid-template-columns: 1fr auto;
    }

    .import-row > span:not(.tag) {
        display: none;
    }

    .mkt-section {
        padding: 4.5rem 1.25rem;
    }

    .mkt-final-inner {
        padding: 3.5rem 1.25rem;
        border-radius: 20px;
    }

    .mkt-signin {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mkt-shot-hero {
        animation: none;
    }

    .mkt-btn, .mkt-card {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   Lean shell. Marketing pages load no Bootstrap and no MudBlazor, so the few
   resets they relied on are stated here.
   ------------------------------------------------------------------------- */

body {
    margin: 0;
}

.mkt *, .mkt *::before, .mkt *::after,
.legal, .legal *, .legal *::before, .legal *::after {
    box-sizing: border-box;
}

.mkt img, .mkt svg {
    vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   Landers (/crm-for-multiple-businesses, /crm-for-founders): the homepage's
   hero without a product picture, then plain reading sections.
   ------------------------------------------------------------------------- */

.mkt-hero-plain {
    padding-bottom: 5rem;
}

.mkt-hero-plain::after {
    display: none;
}

.mkt-hero-plain .mkt-lede {
    margin-left: auto;
    margin-right: auto;
}

.mkt-hero-plain .mkt-lede + .mkt-lede {
    margin-top: -0.5rem;
}

.mkt-prose {
    max-width: 780px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem;
    text-align: left;
}

.mkt-prose h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.2rem);
    line-height: 1.15;
    margin: 0 0 1.1rem;
}

.mkt-prose p, .mkt-prose li {
    font-size: 1.06rem;
    color: var(--muted);
}

.mkt-prose ul {
    padding-left: 1.2rem;
}

.mkt-prose li {
    margin: 0.4rem 0;
}

.mkt-prose a {
    color: var(--fp-blue);
}

.mkt-prose-alt {
    max-width: none;
    padding-left: max(1.5rem, calc((100% - 780px) / 2));
    padding-right: max(1.5rem, calc((100% - 780px) / 2));
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.mkt-table-wrap {
    overflow-x: auto;
    margin: 1.5rem 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.mkt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.97rem;
}

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

.mkt-table tr:last-child th, .mkt-table tr:last-child td {
    border-bottom: 0;
}

.mkt-table thead th {
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface);
}

.mkt-table tbody th {
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

.mkt-table td {
    color: var(--muted);
}

.mkt-table td:last-child {
    color: var(--ink);
    font-weight: 500;
}

.mkt-faq-list {
    max-width: 780px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem 3rem;
    text-align: left;
}

.mkt-faq-list h2 {
    font-size: clamp(1.7rem, 3.2vw, 2.2rem);
    margin: 0 0 1.5rem;
}

.mkt-faq-list .mkt-faq a {
    color: var(--fp-blue);
}

.mkt-final-links {
    margin: 1.5rem 0 0;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
}

.mkt-final-links a {
    color: #fff;
}

.mkt-steps-plain {
    margin-top: 1.5rem;
}

@media (max-width: 860px) {
    .mkt-prose, .mkt-faq-list {
        padding-top: 3rem;
    }
}

.mkt-for p.mkt-for-more {
    margin: 1.4rem 0 0;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.mkt-for-more a {
    color: var(--fp-blue);
}