/* =============================================================================
   Marketing site — public landing / website / blog
   -----------------------------------------------------------------------------
   Consumes tokens from tokens.css ONLY (no hard-coded hex/px). Scoped under
   .mkt-* so it never collides with the in-app cockpit primitives in style.css.
   Loaded only by views/marketing/layout.pug.
   ========================================================================== */

/* Reset within the marketing shell ----------------------------------------- */
.mkt {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    color: var(--color-text);
    background: var(--color-bg);
    overflow-x: hidden;
    /* Marketing runs on a warm off-white canvas (--color-bg #f5f3ee), where the
       app's default muted gray only reaches ~4.36:1. Nudge it darker here so
       every lead/sub/caption clears WCAG AA (4.5:1) without touching the app. */
    --color-text-muted: #565d6b;
    /* The app's subtle gray (#9ca3af) is only ~2.54:1 on white — far below AA.
       Darken it for marketing labels/meta/trust text; still reads lighter than
       --color-text-muted so the type hierarchy is preserved. */
    --color-text-subtle: #646b78;
    /* Brand orange (#ff6a3d) and green (#10b981) are vivid but only reach
       ~2.5–2.85:1 as TEXT on light surfaces. These deepened variants keep the
       brand hue while clearing AA — use them whenever orange/green is the text
       or icon color (fills, large display & icons-on-dark keep the bright hue). */
    --color-primary-text: #ad3c0a;
    --color-primary-text-hover: #8a3208;
    --color-success-text: #047857;
}

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

.mkt-wrap {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding-inline: var(--space-lg);
}

.mkt-wrap--narrow {
    max-width: 760px;
}

/* Typography ---------------------------------------------------------------- */
.mkt h1,
.mkt h2,
.mkt h3,
.mkt h4 {
    font-family: var(--font-display);
    color: var(--color-text);
    line-height: var(--line-height-tight);
    margin: 0;
    letter-spacing: -0.01em;
}

.mkt p {
    margin: 0;
    line-height: 1.6;
}

.mkt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    /* Deep terracotta keeps the brand-orange feel while clearing WCAG AA on the
       peach wash (--color-primary-wash). The bright --color-primary only hits
       ~2.46:1 against it. */
    color: #ad3c0a;
    background: var(--color-primary-wash);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-pill);
}

.mkt-section {
    padding-block: var(--space-4xl);
}

.mkt-section--tight {
    padding-block: var(--space-3xl);
}

.mkt-section__head {
    max-width: 720px;
    margin: 0 auto var(--space-2xl);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.mkt-section__title {
    font-size: var(--font-size-mkt-display);
}

.mkt-section__lead {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    letter-spacing: -0.005em;
}

.mkt-gradient-text {
    display: inline-block;
    /* room for gradient-clipped descenders (g, y, j, p, q) */
    padding-bottom: 0.1em;
    background: var(--gradient-hero);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Buttons ------------------------------------------------------------------- */
.mkt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    line-height: 1;
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition:
        transform var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out),
        background var(--duration-base) var(--ease-out),
        color var(--duration-base) var(--ease-out);
}

.mkt-btn--primary {
    background: var(--gradient-primary);
    color: var(--color-on-primary);
    box-shadow: var(--shadow-glow-primary);
}

.mkt-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-primary-strong);
    color: var(--color-on-primary);
}

.mkt-btn--ghost {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
    box-shadow: var(--shadow-card);
}

.mkt-btn--ghost:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary-soft);
    color: var(--color-primary);
}

.mkt-btn--on-dark {
    background: var(--color-surface);
    color: var(--color-text);
}

.mkt-btn--on-dark:hover {
    transform: translateY(-2px);
    color: var(--color-primary);
}

.mkt-btn--lg {
    font-size: var(--font-size-lg);
    padding: var(--space-md) var(--space-2xl);
}

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

.mkt-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-text);
    text-decoration: none;
    /* Taller hit area for comfortable tapping on touch screens (the text itself
       is only ~18px tall). Negative inline offset keeps the visual left edge
       aligned with surrounding content. */
    padding-block: var(--space-xs);
}

.mkt-link-arrow i {
    transition: transform var(--duration-base) var(--ease-out);
}

.mkt-link-arrow:hover {
    color: var(--color-primary-text-hover);
}

.mkt-link-arrow:hover i {
    transform: translateX(4px);
}

/* =============================================================================
   Header / Nav
   ========================================================================== */
.mkt-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-glass-surface);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--color-border-soft);
}

.mkt-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: var(--space-lg);
}

.mkt-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    color: var(--color-text);
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-2xl);
}

.mkt-brand img {
    height: 34px;
    width: auto;
}

.mkt-nav {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.mkt-nav__link {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-pill);
    text-decoration: none;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    letter-spacing: -0.01em;
    transition:
        color var(--duration-base) var(--ease-out),
        background var(--duration-base) var(--ease-out);
}

.mkt-nav__link:hover,
.mkt-nav__link.is-active {
    color: var(--color-text);
    background: var(--color-surface-alt);
}

.mkt-header__cta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.mkt-header__signin {
    text-decoration: none;
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-sm) var(--space-md);
}

.mkt-header__signin:hover {
    color: var(--color-primary);
}

.mkt-burger {
    display: none;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    width: 44px;
    height: 44px;
    font-size: var(--font-size-xl);
    color: var(--color-text);
    align-items: center;
    justify-content: center;
}

/* =============================================================================
   Hero
   ========================================================================== */
.mkt-hero {
    position: relative;
    padding-block: var(--space-4xl) var(--space-3xl);
    overflow: hidden;
}

.mkt-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 50% at 12% 0%, var(--color-primary-wash) 0%, transparent 60%),
        radial-gradient(50% 50% at 90% 10%, var(--color-tertiary-soft) 0%, transparent 55%);
    opacity: 0.9;
    pointer-events: none;
    z-index: 0;
}

.mkt-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-2xl);
    align-items: center;
}

.mkt-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
}

.mkt-hero__title {
    font-size: var(--font-size-mkt-hero);
}

.mkt-hero__sub {
    font-size: var(--font-size-xl);
    color: var(--color-text-muted);
    max-width: 34ch;
}

.mkt-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
}

.mkt-hero__reassure {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-lg);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.mkt-hero__reassure span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.mkt-hero__reassure i {
    color: var(--color-success);
}

/* Hero product mock --------------------------------------------------------- */
.mkt-hero__media {
    position: relative;
}

.mkt-mock {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-mkt-float);
    padding: var(--space-md);
    transform: perspective(1600px) rotateY(-6deg) rotateX(2deg);
}

.mkt-mock__bar {
    display: flex;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm) var(--space-md);
}

.mkt-mock__dot {
    width: 11px;
    height: 11px;
    border-radius: var(--radius-circle);
    background: var(--color-border);
}

.mkt-mock__screen {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.mkt-stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm);
}

.mkt-stat-chip {
    min-width: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    box-shadow: var(--shadow-card);
}

.mkt-stat-chip__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-subtle);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mkt-stat-chip__value {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
}

.mkt-stat-chip__value--good {
    color: var(--color-success);
}

.mkt-stat-chip__value--accent {
    color: var(--color-primary);
}

.mkt-mock__line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
}

.mkt-mock__line span:first-child {
    font-weight: var(--font-weight-semibold);
}

.mkt-bar {
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--color-border-soft);
    overflow: hidden;
    flex: 1;
    margin-inline: var(--space-md);
}

.mkt-bar__fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--gradient-primary);
}

.mkt-badge-float {
    position: absolute;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-mkt-card);
    padding: var(--space-sm) var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
}

.mkt-badge-float i {
    color: var(--color-success);
    font-size: var(--font-size-lg);
}

.mkt-badge-float--tl {
    top: calc(-1 * var(--space-md));
    left: calc(-1 * var(--space-lg));
}

.mkt-badge-float--br {
    bottom: var(--space-lg);
    right: calc(-1 * var(--space-lg));
}

/* =============================================================================
   Logo / trust strip
   ========================================================================== */
.mkt-trust {
    padding-block: var(--space-2xl);
    border-block: 1px solid var(--color-border-soft);
    background: var(--color-surface);
}

.mkt-trust__label {
    text-align: center;
    color: var(--color-text-subtle);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: var(--space-2xl);
}

.mkt-trust__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl) var(--space-2xl);
    color: var(--color-text-subtle);
}

.mkt-trust__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
    opacity: 0.75;
}

/* =============================================================================
   Stat band
   ========================================================================== */
.mkt-band {
    background: var(--color-black);
    color: var(--color-on-primary);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    position: relative;
    overflow: hidden;
}

.mkt-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-aurora);
    opacity: 0.16;
}

.mkt-band__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
    text-align: center;
}

.mkt-band__value {
    font-family: var(--font-display);
    font-size: var(--font-size-mkt-display);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    background: var(--gradient-warm);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* room for gradient-clipped descenders */
    padding-bottom: 0.08em;
}

.mkt-band__label {
    margin-top: var(--space-sm);
    color: var(--color-surface);
    opacity: 0.82;
    font-weight: var(--font-weight-semibold);
}

/* =============================================================================
   Feature rows (alternating)
   ========================================================================== */
.mkt-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
    padding-block: var(--space-3xl);
}

.mkt-feature + .mkt-feature {
    border-top: 1px solid var(--color-border-soft);
}

.mkt-feature__media {
    order: 2;
}

.mkt-feature--reverse .mkt-feature__copy {
    order: 2;
}

.mkt-feature--reverse .mkt-feature__media {
    order: 1;
}

.mkt-feature__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
}

.mkt-feature__title {
    font-size: var(--font-size-4xl);
}

.mkt-feature__text {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
}

.mkt-checklist {
    list-style: none;
    padding: 0;
    margin: var(--space-sm) 0 0;
    display: grid;
    gap: var(--space-sm);
}

.mkt-checklist li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-weight: var(--font-weight-semibold);
}

.mkt-checklist i {
    color: var(--color-secondary);
    margin-top: 3px;
}

.mkt-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-mkt-card);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.mkt-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.mkt-panel__title {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
}

.mkt-tag {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-pill);
}

.mkt-tag--good {
    color: var(--color-success-text);
    background: var(--color-success-soft);
}

.mkt-tag--warn {
    color: var(--color-warning-strong);
    background: var(--color-warning-soft);
}

.mkt-tag--accent {
    color: var(--color-primary-text);
    background: var(--color-primary-wash);
}

.mkt-costline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) 0;
    border-bottom: 1px dashed var(--color-border);
    font-size: var(--font-size-md);
}

.mkt-costline:last-child {
    border-bottom: 0;
}

.mkt-costline strong {
    font-family: var(--font-display);
}

/* =============================================================================
   Feature cards grid (icon tiles)
   ========================================================================== */
.mkt-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.mkt-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    transition:
        transform var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out);
}

.mkt-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.mkt-card__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xl);
    color: var(--color-on-primary);
    background: var(--gradient-primary);
}

.mkt-card__icon--secondary {
    background: var(--gradient-secondary);
}

.mkt-card__icon--tertiary {
    background: var(--gradient-tertiary);
}

.mkt-card__icon--warm {
    background: var(--gradient-warm);
}

.mkt-card__icon--cool {
    background: var(--gradient-cool);
}

.mkt-card__icon--success {
    background: var(--gradient-success);
}

.mkt-card__title {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.mkt-card__text {
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* =============================================================================
   Steps / how it works
   ========================================================================== */
.mkt-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    counter-reset: step;
}

.mkt-step {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-card);
    position: relative;
}

.mkt-step__num {
    counter-increment: step;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-circle);
    background: var(--color-primary-wash);
    color: var(--color-primary);
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
}

.mkt-step__num::before {
    content: counter(step);
}

.mkt-step__title {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-xs);
}

.mkt-step__text {
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
}

/* =============================================================================
   ROI calculator
   ========================================================================== */
.mkt-roi {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-2xl);
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-mkt-card);
    padding: var(--space-2xl);
}

.mkt-roi__controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.mkt-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.mkt-field label {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
}

.mkt-field__row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.mkt-field input[type='range'] {
    flex: 1;
    accent-color: var(--color-primary);
}

.mkt-field__val {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
    min-width: 5ch;
    text-align: right;
    color: var(--color-primary-text);
}

.mkt-roi__result {
    background: var(--color-black);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    color: var(--color-surface);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.mkt-roi__result::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-aurora);
    opacity: 0.18;
}

.mkt-roi__result > * {
    position: relative;
}

.mkt-roi__label {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    opacity: 0.8;
}

.mkt-roi__big {
    font-family: var(--font-display);
    font-size: var(--font-size-mkt-hero);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    background: var(--gradient-warm);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* room for gradient-clipped descenders */
    padding-bottom: 0.08em;
    margin-block: var(--space-sm);
}

.mkt-roi__fine {
    font-size: var(--font-size-sm);
    opacity: 0.78;
    margin-top: var(--space-md);
}

/* =============================================================================
   Testimonial / mission quote
   ========================================================================== */
.mkt-quote {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
}

.mkt-quote__mark {
    font-family: var(--font-display);
    font-size: var(--font-size-mkt-hero);
    /* Decorative "ghost" quotation mark (aria-hidden in markup). A touch deeper
       than --color-primary-soft so it reads as an intentional flourish rather
       than an accidental smudge, while staying soft behind the quote. */
    color: var(--color-primary-muted);
    line-height: 0.5;
}

.mkt-quote__text {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    line-height: 1.4;
}

.mkt-quote__by {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
}

.mkt-quote__avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-circle);
    background: var(--gradient-hero);
    color: var(--color-on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
}

/* =============================================================================
   Comparison table
   ========================================================================== */
.mkt-compare {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.mkt-compare th,
.mkt-compare td {
    padding: var(--space-md) var(--space-lg);
    text-align: left;
    border-bottom: 1px solid var(--color-border-soft);
}

.mkt-compare thead th {
    font-family: var(--font-display);
    font-size: var(--font-size-md);
    background: var(--color-surface-alt);
}

.mkt-compare thead th:last-child {
    color: var(--color-primary-text);
}

.mkt-compare tbody tr:last-child td {
    border-bottom: 0;
}

.mkt-compare td:not(:first-child),
.mkt-compare th:not(:first-child) {
    text-align: center;
}

.mkt-compare .yes {
    color: var(--color-success-text);
}

.mkt-compare .no {
    color: var(--color-text-subtle);
}

/* =============================================================================
   Pricing
   ========================================================================== */
.mkt-price-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    max-width: 900px;
    margin: 0 auto;
    align-items: stretch;
}

/* Four-tier pricing layout. Collapses responsively below. */
.mkt-price-grid--four {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1200px;
    gap: var(--space-md);
}

/* Monthly / annual billing toggle. */
.mkt-billing-toggle {
    display: flex;
    width: fit-content;
    gap: 4px;
    padding: 4px;
    margin: 0 auto var(--space-xl);
    background: var(--color-surface-muted, #f1f1f3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
}

.mkt-billing-toggle__btn {
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-xs) var(--space-lg);
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.mkt-billing-toggle__btn.is-active {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-card);
}

.mkt-billing-toggle__save {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mkt-plan__billed {
    margin-top: calc(-1 * var(--space-xs));
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.mkt-plan {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.mkt-plan--featured {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow-primary);
    position: relative;
}

.mkt-plan__flag {
    position: absolute;
    top: calc(-1 * var(--space-sm));
    right: var(--space-lg);
    background: var(--gradient-primary);
    color: var(--color-on-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-pill);
}

.mkt-plan__name {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.mkt-plan__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
}

.mkt-plan__amount {
    font-family: var(--font-display);
    font-size: var(--font-size-mkt-display);
    font-weight: var(--font-weight-bold);
}

.mkt-plan__per {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
}

.mkt-plan__desc {
    color: var(--color-text-muted);
}

.mkt-plan__list {
    list-style: none;
    padding: 0;
    margin: var(--space-sm) 0;
    display: grid;
    gap: var(--space-sm);
    flex: 1;
}

.mkt-plan__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

.mkt-plan__list i {
    color: var(--color-secondary);
    margin-top: 3px;
}

/* =============================================================================
   FAQ
   ========================================================================== */
.mkt-faq {
    max-width: 820px;
    margin: 0 auto;
    display: grid;
    gap: var(--space-md);
}

.mkt-faq__item {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.mkt-faq__item summary {
    cursor: pointer;
    list-style: none;
    padding: var(--space-lg) var(--space-xl);
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

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

.mkt-faq__item summary i {
    color: var(--color-primary);
    transition: transform var(--duration-base) var(--ease-out);
}

.mkt-faq__item[open] summary i {
    transform: rotate(45deg);
}

.mkt-faq__answer {
    padding: 0 var(--space-xl) var(--space-lg);
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* =============================================================================
   CTA banner
   ========================================================================== */
.mkt-cta {
    background: var(--color-black);
    border-radius: var(--radius-xl);
    padding: var(--space-3xl);
    text-align: center;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
}

.mkt-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-aurora);
    opacity: 0.2;
}

.mkt-cta > * {
    position: relative;
}

.mkt-cta .mkt-cta__title {
    font-size: var(--font-size-mkt-display);
    color: var(--color-surface);
    max-width: 18ch;
}

.mkt-cta__sub {
    color: var(--color-surface);
    opacity: 0.85;
    font-size: var(--font-size-lg);
    max-width: 48ch;
}

/* =============================================================================
   Footer
   ========================================================================== */
.mkt-footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border-soft);
    padding-block: var(--space-3xl) var(--space-xl);
}

.mkt-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: var(--space-2xl);
}

.mkt-footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 30ch;
}

.mkt-footer__brand .mkt-brand {
    font-size: var(--font-size-xl);
}

.mkt-footer__tagline {
    color: var(--color-text-muted);
}

.mkt-footer__col h4 {
    font-family: var(--font-display);
    font-size: var(--font-size-md);
    margin-bottom: var(--space-md);
}

.mkt-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-sm);
}

.mkt-footer__col a {
    text-decoration: none;
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
}

.mkt-footer__col a:hover {
    color: var(--color-primary);
}

.mkt-footer__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: var(--space-2xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border-soft);
    color: var(--color-text-subtle);
    font-size: var(--font-size-sm);
}

.mkt-footer__legal {
    display: flex;
    gap: var(--space-md);
}

.mkt-footer__legal a {
    color: var(--color-text-subtle);
    text-decoration: none;
}

.mkt-footer__legal a:hover {
    color: var(--color-primary);
}

/* =============================================================================
   Blog
   ========================================================================== */
.mkt-blog-hero {
    padding-block: var(--space-3xl) var(--space-xl);
    text-align: center;
}

.mkt-postgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.mkt-post-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition:
        transform var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out);
}

.mkt-post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    color: inherit;
}

.mkt-post-card__cover {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--gradient-hero);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-on-primary);
    font-size: var(--font-size-4xl);
}

/* Drop-in cover image: sits behind the tag chip, covers the gradient. */
.mkt-post-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mkt-post-card__cover .mkt-tag {
    position: relative;
    z-index: 1;
}

.mkt-post-card__cover--c2 {
    background: var(--gradient-secondary);
}

.mkt-post-card__cover--c3 {
    background: var(--gradient-tertiary);
}

.mkt-post-card__cover--c4 {
    background: var(--gradient-warm);
}

.mkt-post-card__cover--c5 {
    background: var(--gradient-cool);
}

.mkt-post-card__cover--c6 {
    background: var(--gradient-success);
}

.mkt-post-card__body {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    flex: 1;
}

.mkt-post-card__meta {
    display: flex;
    gap: var(--space-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-subtle);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mkt-post-card__title {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.mkt-post-card__excerpt {
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
    flex: 1;
}

/* Blog article -------------------------------------------------------------- */
.mkt-article {
    padding-block: var(--space-2xl) var(--space-3xl);
}

.mkt-article__head {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

.mkt-article__title {
    font-size: var(--font-size-mkt-display);
    max-width: 20ch;
}

.mkt-article__meta {
    color: var(--color-text-subtle);
    font-weight: var(--font-weight-semibold);
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

.mkt-article__cover {
    margin: var(--space-xl) 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.mkt-article__cover img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.mkt-prose {
    font-size: var(--font-size-lg);
    line-height: 1.75;
    color: var(--color-text);
}

.mkt-prose h2 {
    font-size: var(--font-size-3xl);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-md);
}

.mkt-prose h3 {
    font-size: var(--font-size-xl);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-sm);
}

.mkt-prose p {
    margin-bottom: var(--space-lg);
}

.mkt-prose ul,
.mkt-prose ol {
    margin: 0 0 var(--space-lg);
    padding-left: var(--space-xl);
    display: grid;
    gap: var(--space-sm);
}

.mkt-prose blockquote {
    margin: var(--space-xl) 0;
    padding: var(--space-md) var(--space-xl);
    border-left: 4px solid var(--color-primary);
    background: var(--color-primary-wash);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
}

.mkt-callout {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-lg) var(--space-xl);
    margin: var(--space-xl) 0;
    box-shadow: var(--shadow-card);
}

.mkt-callout strong {
    font-family: var(--font-display);
}

.mkt-disclaimer {
    color: var(--color-text-subtle);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    border-top: 1px solid var(--color-border-soft);
    padding-top: var(--space-md);
    margin-top: var(--space-xl);
}

/* =============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
    .mkt-hero__grid,
    .mkt-feature,
    .mkt-roi,
    .mkt-footer__grid {
        grid-template-columns: 1fr;
    }

    .mkt-feature__media,
    .mkt-feature--reverse .mkt-feature__copy,
    .mkt-feature--reverse .mkt-feature__media {
        order: 0;
    }

    .mkt-band__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }

    .mkt-cards,
    .mkt-steps,
    .mkt-postgrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mkt-price-grid--four {
        grid-template-columns: repeat(2, 1fr);
        max-width: 720px;
    }

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

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

    .mkt-hero__title {
        font-size: var(--font-size-mkt-display);
    }

    .mkt-section__title,
    .mkt-cta__title,
    .mkt-article__title {
        font-size: var(--font-size-4xl);
    }
}

@media (max-width: 640px) {
    .mkt-nav,
    .mkt-header__cta .mkt-header__signin {
        display: none;
    }

    .mkt-burger {
        display: inline-flex;
    }

    .mkt-cards,
    .mkt-steps,
    .mkt-postgrid,
    .mkt-band__grid,
    .mkt-footer__grid {
        grid-template-columns: 1fr;
    }

    .mkt-price-grid--four {
        grid-template-columns: 1fr;
    }

    .mkt-mock {
        transform: none;
    }

    .mkt-roi {
        padding: var(--space-lg);
        gap: var(--space-lg);
    }

    .mkt-roi__result {
        padding: var(--space-lg);
    }

    .mkt-stat-chip {
        padding: var(--space-sm);
    }

    .mkt-stat-chip__value {
        font-size: var(--font-size-xl);
    }

    .mkt-badge-float--tl {
        left: var(--space-xs);
    }

    .mkt-badge-float--br {
        right: var(--space-xs);
    }

    .mkt-footer__bar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Mobile nav drawer --------------------------------------------------------- */
.mkt-drawer {
    display: none;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-soft);
}

.mkt-drawer.is-open {
    display: flex;
}

.mkt-drawer a {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.mkt-drawer a:hover {
    background: var(--color-surface-alt);
    color: var(--color-primary);
}