/* Surgerly marketing site styles.
   All colours come from palette.css — only alpha variants and layout-specific
   values live here. Scoped under .mkt-* so they don't bleed into org pages. */

.mkt-body {
    background: var(--surgerly-white);
    color: var(--surgerly-text);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    min-height: 100vh;
}

/* --- Navbar --- */
.mkt-navbar {
    background-color: var(--surgerly-primary);
    border-bottom: 1px solid rgba(var(--surgerly-text-rgb), 0.08);
}
.mkt-navbar .nav-link {
    color: var(--surgerly-black);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.5rem 0.9rem !important;
    opacity: 0.78;
    transition: opacity 0.2s;
}
.mkt-navbar .nav-link:hover { opacity: 1; }
.mkt-navbar .nav-link.active { opacity: 1; font-weight: 700; }
.mkt-navbar .navbar-toggler { color: var(--surgerly-black); }

/* On the gold navbar the default gold CTA disappears — give it a dark
   variant so the primary action stays the loudest thing in the bar. */
.mkt-navbar .btn-mkt-primary {
    background: var(--surgerly-black);
    border-color: var(--surgerly-black);
    color: var(--surgerly-white);
}
.mkt-navbar .btn-mkt-primary:hover {
    background: var(--surgerly-text);
    border-color: var(--surgerly-text);
    color: var(--surgerly-white);
    transform: translateY(-1px);
}

/* --- Buttons --- */
.btn-mkt-primary {
    background: var(--surgerly-cta);
    color: var(--surgerly-text);
    border: 1px solid var(--surgerly-cta);
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-mkt-primary:hover {
    background: var(--surgerly-black);
    border-color: var(--surgerly-black);
    color: var(--surgerly-white);
    transform: translateY(-1px);
}
.btn-mkt-outline {
    background: transparent;
    color: var(--surgerly-black);
    border: 1px solid var(--surgerly-black);
    font-weight: 600;
}
.btn-mkt-outline:hover {
    background: var(--surgerly-black);
    color: var(--surgerly-white);
}

/* --- Sections --- */
.mkt-section { padding: 5rem 0; }
@media (max-width: 768px) { .mkt-section { padding: 3.5rem 0; } }
.mkt-section-tint { background: var(--surgerly-background); }
.mkt-section-dark { background: var(--surgerly-black); color: var(--surgerly-white); }

/* --- Type --- */
.mkt-eyebrow,
.mkt-eyebrow-dark {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--surgerly-primary);
    margin: 0;
}
.mkt-h1 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(2.25rem, 4.2vw, 3.75rem);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--surgerly-white);
}
.mkt-h2 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.75rem, 2.8vw, 2.5rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--surgerly-text);
}
.mkt-section-dark .mkt-h2 { color: var(--surgerly-white); }

.mkt-lead {
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    max-width: 38rem;
}
.mkt-lead-dark {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.6;
    color: rgba(var(--surgerly-text-rgb), 0.72);
}

.mkt-muted { color: rgba(var(--surgerly-text-rgb), 0.55); }
.mkt-muted-light { color: rgba(255, 255, 255, 0.65); }

.mkt-link-light {
    color: var(--surgerly-primary);
    text-decoration: none;
    font-weight: 500;
}
.mkt-link-light:hover { color: var(--surgerly-white); }
.mkt-link-dark {
    color: var(--surgerly-primary);
    text-decoration: none;
    font-weight: 600;
}
.mkt-link-dark:hover { color: var(--surgerly-black); }

/* --- Hero --- */
.mkt-hero {
    background:
        radial-gradient(ellipse at top right, rgba(var(--surgerly-primary-rgb), 0.45), transparent 52%),
        radial-gradient(ellipse at bottom left, rgba(var(--surgerly-primary-rgb), 0.16), transparent 58%),
        var(--surgerly-black);
    color: var(--surgerly-white);
    padding: 9rem 0 5rem;
    position: relative;
    overflow: hidden;
}
/* Subtle dot grid for atmospheric depth — gold dots on near-black,
   barely there but adds texture once the eye notices. */
.mkt-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(var(--surgerly-primary-rgb), 0.09) 1px, transparent 0);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}
.mkt-hero > .container { position: relative; z-index: 1; }
@media (max-width: 768px) { .mkt-hero { padding: 7rem 0 4rem; } }

.mkt-patient-hint {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Hero browser mockup */
.mkt-hero-mock {
    background: var(--surgerly-white);
    border-radius: 0.9rem;
    overflow: hidden;
    color: var(--surgerly-text);
    /*transform: rotate(0.5deg);*/
}
.mkt-hero-mock-bar {
    background: var(--surgerly-light-gray);
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    color: rgba(var(--surgerly-text-rgb), 0.55);
    border-bottom: 1px solid var(--surgerly-border);
}
.mkt-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    background: rgba(var(--surgerly-text-rgb), 0.32);
    border-radius: 50%;
    margin-right: 0.35rem;
}
.mkt-hero-mock-body { padding: 1.25rem; }

/* --- Mock product surface --- */
/* Register --mock-accent as an animatable colour so all the gold-accented
   elements (nav bar, icons, progress, card tint, etc.) cycle through each
   brand's palette in lock-step. Without @property the variable would
   step-change at each keyframe; with it, the value interpolates smoothly. */
@property --mock-accent {
    syntax: '<color>';
    inherits: true;
    initial-value: #be9b5a;
}

/* Single driver for every themed element inside the mock. */
.mkt-hero-mock {
    --mock-accent: var(--surgerly-primary);
    animation: mktMockAccentCycle 16s infinite ease-in-out;
}

@keyframes mktMockAccentCycle {
    0%,  20%  { --mock-accent: #be9b5a; }   /* Surgerly */
    25%, 45%  { --mock-accent: #1c3a46; }   /* La Belle Forme */
    50%, 70%  { --mock-accent: #e50f72; }   /* Transform */
    75%, 95%  { --mock-accent: #0d2a3a; }   /* Electiva */
    100%      { --mock-accent: #be9b5a; }
}

/* Full-bleed brand bar between the URL chrome and the body. */
.mkt-mock-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1.25rem;
    background-color: var(--mock-accent);
    /* Force a stable compositor layer so the background-color change
       repaints without nudging the surrounding pixel grid. */
    will-change: background-color;
    transform: translateZ(0);
}

/* Rotator slot: all four logos sit absolutely positioned in here.
   All four render in white so they read against any brand bar colour. */
.mkt-mock-brand {
    position: relative;
    height: 1.9rem;
    width: 8rem;
    flex: 0 0 auto;
}
.mkt-mock-logo {
    /* Fill the rotator container exactly so centering happens at integer
       pixels via object-fit, not via transform-based half-pixel offsets. */
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: left center;
    opacity: 0;
    animation: mktMockBrandCycle 16s infinite ease-in-out;
    will-change: opacity;
    backface-visibility: hidden;
}
/* Surgerly & Electiva already ship white-on-transparent — leave alone.
   LBF & Transform are coloured originals — flatten to black then invert
   to white so they all read uniformly on the coloured bar.
   Transform's 7:1 aspect lets object-fit cap it naturally inside the
   1.9rem × 8rem slot, so no max-height needed (and adding one fights
   the inset:0 / height:100% sizing).
   Delays are staggered so each brand's 0-5% fade-in window lands inside
   the previous brand's 25-30% fade-out window, producing a true 0.8s
   cross-fade at every handoff. Surgerly uses a -0.8s delay so it's fully
   visible at page load (5% of its cycle), and its loop fade-in at the
   end of cycle 1 lines up perfectly with Electiva's fade-out. */
.mkt-mock-logo--surgerly  { animation-delay: -0.8s; }
.mkt-mock-logo--lbf       { animation-delay: 3.2s;  filter: brightness(0) invert(1); }
.mkt-mock-logo--transform { animation-delay: 7.2s;  filter: brightness(0) invert(1); }
.mkt-mock-logo--electiva  { animation-delay: 11.2s; }

/* Fade-in 0-5% (~0.8s), hold 5-25% (~3.2s), fade-out 25-30% (~0.8s),
   hidden the rest. Cross-fades cleanly at every handoff. */
@keyframes mktMockBrandCycle {
    0%        { opacity: 0; }
    5%, 25%   { opacity: 0.95; }
    30%, 100% { opacity: 0; }
}

/* Avatar: white pill, dark text — readable on every brand bar colour. */
.mkt-mock-avatar {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--surgerly-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    flex: 0 0 auto;
}

.mkt-mock-welcome {
    margin: 0 0 0.15rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--surgerly-text);
}
.mkt-mock-sub {
    margin: 0 0 0.9rem;
    font-size: 0.8rem;
    color: rgba(var(--surgerly-text-rgb), 0.6);
}

.mkt-mock-card {
    background: var(--surgerly-background);
    border: 1px solid var(--surgerly-border);
    border-radius: 0.65rem;
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
}
/* Card tint derives from the active brand: 15% accent over white gives the
   familiar cream during Surgerly, a soft pink during Transform, etc. */
.mkt-mock-card-primary {
    background: color-mix(in srgb, var(--mock-accent) 15%, white);
    border-color: color-mix(in srgb, var(--mock-accent) 40%, transparent);
}
.mkt-mock-card-label {
    margin: 0;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(var(--surgerly-text-rgb), 0.55);
}
.mkt-mock-card-title {
    margin: 0.2rem 0 0;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--surgerly-text);
}
.mkt-mock-card-meta {
    margin: 0.15rem 0 0;
    font-size: 0.75rem;
    color: rgba(var(--surgerly-text-rgb), 0.68);
}
.mkt-mock-card-icon {
    font-size: 1.5rem;
    color: var(--mock-accent);
    flex: 0 0 auto;
}

.mkt-mock-pathway { margin-bottom: 0.85rem; }
.mkt-mock-pathway-label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--surgerly-text);
}
.mkt-mock-pathway-progress {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--mock-accent);
}
.mkt-mock-steps {
    display: flex;
    gap: 0.35rem;
}
.mkt-mock-step {
    flex: 1;
    height: 0.3rem;
    border-radius: 0.15rem;
    background: var(--surgerly-light-gray);
}
.mkt-mock-step.done { background: var(--mock-accent); }

.mkt-mock-tile {
    background: var(--surgerly-background);
    border: 1px solid var(--surgerly-border);
    border-radius: 0.6rem;
    padding: 0.65rem 0.8rem;
}
.mkt-mock-tile .material-symbols-outlined {
    color: var(--mock-accent);
    font-size: 1.1rem;
}
.mkt-mock-tile-label {
    margin: 0.2rem 0 0;
    font-size: 0.68rem;
    color: rgba(var(--surgerly-text-rgb), 0.6);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.mkt-mock-tile-value {
    margin: 0;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--surgerly-text);
}

/* --- Social proof --- */
.mkt-proof { padding: 3rem 0; background: var(--surgerly-white); }
.mkt-logo-placeholder {
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surgerly-background);
    border: 1px dashed var(--surgerly-border);
    border-radius: 0.4rem;
    color: var(--surgerly-dark-gray);
    font-weight: 600;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
}

/* Real brand logos: render as uniform dark silhouettes so colour-mismatched
   originals (e.g. Electiva ships only a white-on-dark version) all look like
   one consistent "trusted by" strip. Base opacity is dim; the per-brand
   cycle below lifts each logo to full opacity for its 3-second slot,
   synced with the rotating mock above. */
.mkt-brand-logo {
    max-height: 2.5rem;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    filter: brightness(0);
    opacity: 0.4;
}
/* For logos that ship as white-on-transparent — invert before flattening to
   black, otherwise brightness(0) leaves them invisible. */
.mkt-brand-logo-invert {
    filter: invert(1) brightness(0);
}

/* Per-brand height caps to balance optical weight, plus the active-highlight
   animation. Delays match the mock's 16s cycle exactly so each strip logo
   brightens while its branded portal is on stage above. Surgerly's slot
   (0-3.2s) lights up the heading instead, since Surgerly isn't a customer
   in this strip. */
.mkt-brand-logo--transform { max-height: 1.5rem; }
.mkt-brand-logo--lbf       { max-height: 2.75rem; }
.mkt-brand-logo--electiva  { max-height: 2.5rem; }
/* Scope the rotating active-highlight to the trusted-by strip only so the
   same modifier classes can be reused (for their per-brand height caps) in
   contexts where the rotation doesn't make sense (e.g. the Our Brands cards). */
.mkt-proof .mkt-brand-logo--lbf,
.mkt-proof .mkt-brand-logo--transform,
.mkt-proof .mkt-brand-logo--electiva {
    animation: mktTrustedActive 16s infinite ease-in-out;
}
.mkt-proof .mkt-brand-logo--lbf       { animation-delay: 3.2s; }
.mkt-proof .mkt-brand-logo--transform { animation-delay: 7.2s; }
.mkt-proof .mkt-brand-logo--electiva  { animation-delay: 11.2s; }

/* Our Brands cards: reuse .mkt-brand-logo for the height-cap modifiers and
   the silhouette filter, but boost opacity since these are the focal point
   rather than a subtle trusted-by hint. */
.mkt-brand-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--surgerly-white);
    border: 1px solid var(--surgerly-border);
    border-radius: 0.9rem;
    padding: 2rem 1.5rem 1.75rem;
    height: 100%;
    text-decoration: none;
    color: var(--surgerly-text);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.mkt-brand-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(var(--surgerly-text-rgb), 0.08);
    border-color: rgba(var(--surgerly-primary-rgb), 0.45);
    color: var(--surgerly-text);
}
.mkt-brand-card-logo-wrap {
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}
.mkt-brand-card .mkt-brand-logo {
    opacity: 0.9;
    max-height: 3.2rem;
}
.mkt-brand-card .mkt-brand-logo--transform { max-height: 1.9rem; }
.mkt-brand-card .mkt-brand-logo--lbf       { max-height: 3.4rem; }
.mkt-brand-card .mkt-brand-logo--electiva  { max-height: 3rem; }
.mkt-brand-card:hover .mkt-brand-logo { opacity: 1; }
.mkt-brand-card-name {
    font-weight: 700;
    font-size: 1rem;
    margin: 0 0 0.35rem;
    color: var(--surgerly-text);
}
.mkt-brand-card-tag {
    font-size: 0.85rem;
    color: rgba(var(--surgerly-text-rgb), 0.62);
    margin: 0;
    line-height: 1.45;
}

/* Same shape as the mock logo cycle: fade in 0-5%, hold 5-25%, fade out
   25-30%. Resting opacity is 0.4 (the dimmed silhouette colour) and the
   bright peak is 1. */
@keyframes mktTrustedActive {
    0%        { opacity: 0.4; }
    5%, 25%   { opacity: 1; }
    30%, 100% { opacity: 0.4; }
}

/* Trusted-by heading: lights up gold during the Surgerly slot of the mock
   rotation, then drops back to the muted dark used elsewhere. Transitions
   align with Surgerly's fade-out at the start (20-25% = 3.2-4s) and the
   loop fade-in at the end (95-100% = 15.2-16s). */
.mkt-proof-heading {
    animation: mktProofHeadingCycle 16s infinite ease-in-out;
}
@keyframes mktProofHeadingCycle {
    0%, 20%   { color: var(--surgerly-primary); }
    25%, 95%  { color: rgba(var(--surgerly-text-rgb), 0.55); }
    100%      { color: var(--surgerly-primary); }
}


/* --- Problem cards --- */
.mkt-problem-card {
    background: var(--surgerly-white);
    border: 1px solid var(--surgerly-border);
    border-radius: 0.9rem;
    padding: 1.75rem;
    transition: transform 0.2s, box-shadow 0.2s;
}
.mkt-problem-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(var(--surgerly-text-rgb), 0.07);
}
.mkt-problem-icon { font-size: 2rem; color: var(--surgerly-primary); }

/* --- Resolution (outcome cards mirroring the problem-card grid) ---
   Identical card chrome to .mkt-problem-card so the section reads as a single
   problem → outcome rhythm rather than two separate components. */
.mkt-resolve-headline {
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    font-weight: 600;
    color: var(--surgerly-text);
    max-width: 44rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}
.mkt-resolve-card {
    background: var(--surgerly-white);
    border: 1px solid var(--surgerly-border);
    border-radius: 0.9rem;
    padding: 1.75rem;
    transition: transform 0.2s, box-shadow 0.2s;
}
.mkt-resolve-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(var(--surgerly-text-rgb), 0.07);
}
.mkt-resolve-icon { font-size: 2rem; color: var(--surgerly-primary); }

/* --- Feature cards --- */
.mkt-feature {
    background: var(--surgerly-white);
    border: 1px solid var(--surgerly-border);
    border-radius: 0.9rem;
    padding: 1.5rem;
    height: 100%;
    position: relative;
}
.mkt-feature-icon { font-size: 1.75rem; color: var(--surgerly-primary); }

/* Module availability badges — shown on each module card. Three states:
   Live (green), Beta (gold), Roadmap (muted grey). Top-right of the card. */
.mkt-module-status {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}
.mkt-module-status--price {
    background: rgba(var(--surgerly-primary-rgb), 0.12);
    color: var(--surgerly-primary);
    letter-spacing: 0.02em;
}

/* Tag chips (used on the 'Built for' audience cards) */
.mkt-tag {
    display: inline-block;
    background: var(--surgerly-secondary);
    color: var(--surgerly-text);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0.15rem 0.15rem 0 0;
    white-space: nowrap;
}

/* --- Checklist --- */
.mkt-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.4rem 0;
    color: rgba(var(--surgerly-text-rgb), 0.82);
}
.mkt-checklist li code {
    background: var(--surgerly-background);
    color: var(--surgerly-text);
    padding: 0.05rem 0.4rem;
    border-radius: 0.3rem;
    font-size: 0.9em;
}
.mkt-checklist li .material-symbols-outlined {
    color: var(--surgerly-primary);
    font-size: 1.2rem;
    margin-top: 0.15rem;
    flex: 0 0 auto;
}

/* --- Comparison mocks --- */
.mkt-compare {
    border: 1px solid var(--surgerly-border);
    border-radius: 0.75rem;
    padding: 1rem;
    background: var(--surgerly-white);
    height: 100%;
}
.mkt-compare-mock {
    background: var(--surgerly-background);
    border-radius: 0.5rem;
    padding: 0.85rem;
}
.mkt-compare-bar {
    height: 0.5rem;
    width: 60%;
    border-radius: 0.25rem;
}
/* "Your Surgerly" tile: warm cream tint pulled from palette --surgerly-secondary */
.mkt-compare-you {
    border-color: var(--surgerly-primary);
    background: var(--surgerly-secondary);
    box-shadow: 0 0 0 3px rgba(var(--surgerly-primary-rgb), 0.12);
}
.mkt-compare-you .mkt-compare-mock {
    background: var(--surgerly-white);
}

/* --- Business impact (stats + outcome cards) --- */
.mkt-stat {
    background: var(--surgerly-white);
    border: 1px solid var(--surgerly-border);
    border-radius: 0.9rem;
    padding: 1.25rem 1rem;
    text-align: center;
    height: 100%;
}
.mkt-stat-value {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--surgerly-primary);
    margin-bottom: 0.4rem;
}
/* Trend icons (used in the Bottom Line stat cards): visually punchier than
   numeric stats so they still carry the eye without faux-precision figures. */
.mkt-stat-trend {
    font-size: 2.5rem;
    color: var(--surgerly-primary);
    line-height: 1;
    font-variation-settings: 'wght' 700;
}
.mkt-stat-label {
    font-size: 0.78rem;
    color: rgba(var(--surgerly-text-rgb), 0.65);
    line-height: 1.35;
}
.mkt-impact-card {
    background: var(--surgerly-white);
    border: 1px solid var(--surgerly-border);
    border-radius: 0.9rem;
    padding: 1.75rem;
    transition: transform 0.2s, box-shadow 0.2s;
}
.mkt-impact-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(var(--surgerly-text-rgb), 0.07);
}
.mkt-impact-icon { font-size: 2rem; color: var(--surgerly-primary); }

/* --- Built for healthcare badges --- */
.mkt-badge {
    background: var(--surgerly-white);
    border: 1px solid var(--surgerly-border);
    border-radius: 0.75rem;
    padding: 1.25rem;
    text-align: center;
}
.mkt-badge-icon { font-size: 1.75rem; color: var(--surgerly-primary); }

/* --- Customer quote --- */
.mkt-quote-mark {
    font-size: 3rem;
    color: var(--surgerly-primary);
    opacity: 0.6;
}
.mkt-quote {
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.45;
    font-weight: 400;
    color: var(--surgerly-white);
    font-style: italic;
    max-width: 48rem;
    margin: 0 auto;
}

/* --- Book a chat --- */
.mkt-chat { background: var(--surgerly-background); }
.mkt-chat-form {
    background: var(--surgerly-white);
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--surgerly-border);
}
.mkt-chat-form iframe { display: block; }

/* --- Sub-hero (pricing / security) --- */
.mkt-subhero {
    background:
        radial-gradient(ellipse at top right, rgba(var(--surgerly-primary-rgb), 0.3), transparent 55%),
        var(--surgerly-black);
    color: var(--surgerly-white);
    padding: 8rem 0 4rem;
}
@media (max-width: 768px) { .mkt-subhero { padding: 6rem 0 3rem; } }
.mkt-h1-light {
    font-size: clamp(2rem, 3.4vw, 3rem);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--surgerly-white);
}
.mkt-lead-on-dark {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    max-width: 42rem;
    margin: 0 auto;
}

/* --- Pricing tiers --- */
.mkt-tier {
    background: var(--surgerly-white);
    border: 1px solid var(--surgerly-border);
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    position: relative;
}
.mkt-tier-featured {
    border-color: var(--surgerly-primary);
    background: linear-gradient(180deg, var(--surgerly-secondary) 0%, var(--surgerly-white) 35%);
    box-shadow: 0 18px 48px rgba(var(--surgerly-primary-rgb), 0.18);
}
.mkt-tier-flag {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surgerly-cta);
    color: var(--surgerly-text);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    margin: 0;
}
.mkt-tier-name {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--surgerly-primary);
    margin: 0 0 0.5rem;
}
.mkt-tier-blurb {
    color: rgba(var(--surgerly-text-rgb), 0.7);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    min-height: 3rem;
}
.mkt-tier-price { margin: 0; line-height: 1; }
.mkt-tier-price span {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--surgerly-text);
}
.mkt-tier-price small {
    font-size: 0.95rem;
    color: rgba(var(--surgerly-text-rgb), 0.6);
    margin-left: 0.25rem;
}
.mkt-tier-foot {
    font-size: 0.8rem;
    color: rgba(var(--surgerly-text-rgb), 0.55);
    margin: 0.5rem 0 0;
}
.mkt-tier-list { margin: 0; padding: 0; }
.mkt-tier-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.4rem 0;
    font-size: 0.95rem;
    color: rgba(var(--surgerly-text-rgb), 0.85);
}
.mkt-tier-list li .material-symbols-outlined {
    color: var(--surgerly-primary);
    font-size: 1.15rem;
    margin-top: 0.1rem;
    flex: 0 0 auto;
}

/* --- Module pricing table (pricing page) --- */
.mkt-modules-table {
    background: var(--surgerly-white);
    border: 1px solid var(--surgerly-border);
    border-radius: 1rem;
    overflow: hidden;
}
.mkt-module-row {
    display: grid;
    grid-template-columns: 3rem 1fr auto;
    align-items: center;
    gap: 1.25rem;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--surgerly-border);
}
.mkt-module-row:last-child { border-bottom: 0; }
.mkt-module-row-included {
    background: var(--surgerly-background);
}
.mkt-module-icon .material-symbols-outlined {
    font-size: 1.5rem;
    color: var(--surgerly-primary);
}
.mkt-module-name {
    font-weight: 600;
    margin: 0 0 0.15rem;
    color: var(--surgerly-text);
}
.mkt-module-desc {
    margin: 0;
    color: rgba(var(--surgerly-text-rgb), 0.65);
    font-size: 0.9rem;
}
.mkt-module-price {
    text-align: right;
    white-space: nowrap;
}
.mkt-module-price strong {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--surgerly-text);
}
.mkt-module-price small {
    font-size: 0.8rem;
    color: rgba(var(--surgerly-text-rgb), 0.6);
    margin-left: 0.15rem;
}
.mkt-module-included {
    display: inline-block;
    background: var(--surgerly-secondary);
    color: var(--surgerly-text);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
@media (max-width: 575px) {
    .mkt-module-row {
        grid-template-columns: 2.5rem 1fr;
        grid-template-rows: auto auto;
        gap: 0.5rem 1rem;
    }
    .mkt-module-icon { grid-row: 1; grid-column: 1; }
    .mkt-module-text { grid-row: 1; grid-column: 2; }
    .mkt-module-price { grid-row: 2; grid-column: 1 / -1; text-align: left; }
}

/* Headings used to separate per-seat vs per-org module tables */
.mkt-modules-heading {
    color: var(--surgerly-text);
    margin-top: 0;
    letter-spacing: -0.01em;
}

/* Per-organisation tiered module table — reuses .mkt-modules-table chrome
   but the price column is replaced with a 4-cell tier-price strip and a
   header row showing the tier labels above. */
.mkt-modules-table-tiered .mkt-module-row {
    grid-template-columns: 3rem 1fr auto;
    align-items: center;
    gap: 1.25rem;
}
.mkt-tier-prices {
    display: grid;
    grid-template-columns: repeat(4, minmax(4.5rem, auto));
    gap: 0.5rem 1.25rem;
    text-align: right;
}
.mkt-tier-prices > span {
    line-height: 1.2;
    white-space: nowrap;
}
.mkt-tier-prices strong {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--surgerly-text);
}

/* Tier header row — same chrome as a module row but a quiet visual tone
   so the labels read as column headings, not data. */
.mkt-module-row-header {
    background: var(--surgerly-background);
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
}
.mkt-module-row-header .mkt-tier-prices > span {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(var(--surgerly-text-rgb), 0.55);
}

@media (max-width: 767px) {
    .mkt-tier-prices {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem 0.75rem;
    }
}

/* --- FAQ accordion --- */
.mkt-faq .accordion-item {
    background: var(--surgerly-white);
    border: 1px solid var(--surgerly-border);
    border-radius: 0.6rem !important;
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.mkt-faq .accordion-button {
    font-weight: 600;
    color: var(--surgerly-text);
    background: var(--surgerly-white);
    box-shadow: none;
}
.mkt-faq .accordion-button:not(.collapsed) {
    color: var(--surgerly-primary);
    background: var(--surgerly-background);
    box-shadow: none;
}
.mkt-faq .accordion-body {
    color: rgba(var(--surgerly-text-rgb), 0.78);
    font-size: 0.95rem;
}

/* --- Security detail headings --- */
.mkt-detail-heading {
    color: var(--surgerly-text);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
    position: sticky;
    top: 6rem;
}
@media (max-width: 991px) {
    .mkt-detail-heading {
        position: static;
        margin-bottom: 0.5rem;
    }
}

/* --- Footer --- */
.mkt-footer {
    background: var(--surgerly-black);
    color: var(--surgerly-white);
    padding: 4rem 0 2rem;
}
.mkt-footer-heading {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 1rem;
}
.mkt-footer-list li { margin-bottom: 0.5rem; }
.mkt-footer-list a {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.15s;
}
.mkt-footer-list a:hover { color: var(--surgerly-primary); }
.mkt-footer-rule {
    border-color: rgba(255, 255, 255, 0.12);
    opacity: 1;
}