/* =============================================================================
   /index2 standalone theme — dark surface with a green band under the hero.
   Loaded ONLY on the /index2 route (see Routes.php extra_css).
   Overrides the light .ym2-* rules from youmonit.css — cascade order handles it.
   Base structure (grid, layout, chrome, forms, cards) stays inherited; this
   file just re-skins the colours/backgrounds.
   ============================================================================= */

/* -------- Page background: light canvas — sections alternate below. -------- */
body { background: #ffffff; }

/* Top marketing nav intentionally NOT re-skinned here — /index2 keeps the
   standard white nav from the shared marketing-nav partial to stay
   consistent with the rest of the marketing site. */

/* -------- HERO — brand green canvas with subtle depth --------
   Dark forest green at the top-left, fading down/right to the primary
   mint green. Feeds naturally into the mint trust band below without
   a hard horizontal seam. */
.ym2-hero {
    background:
        radial-gradient(60% 60% at 8% 0%,
            rgba(6, 78, 59, .55) 0%, transparent 60%),
        radial-gradient(45% 55% at 100% 20%,
            rgba(134, 239, 172, .22) 0%, transparent 65%),
        linear-gradient(155deg,
            #0f5132 0%,
            var(--ym-primary-dark, #15803D) 35%,
            var(--ym-primary, #4CAF87) 100%);
    color: #f0fdf4;
}
.ym2-eyebrow {
    color: #052e16;
    background: rgba(255, 255, 255, .82);
}
.ym2-h1 { color: #ffffff; }
.ym2-h1-accent { color: #ecfeff; text-shadow: 0 1px 0 rgba(0,0,0,.08); }
.ym2-hero-props { color: rgba(255, 255, 255, .92); }
.ym2-hero-lead {
    color: rgba(255, 255, 255, .92);
    font-size: 1.15rem;
    line-height: 1.6;
    margin: 0 0 1.75rem;
    max-width: 560px;
}
@media (max-width: 767px) {
    .ym2-hero-lead { font-size: 1.02rem; }
}
.ym2-check {
    background: rgba(255, 255, 255, .20);
    color: #ffffff;
}
/* Muted text on green — use a translucent white so it stays legible
   without pumping full grey (which would clash with the green). */
.ym2-hero p.text-muted,
.ym2-hero .text-muted { color: rgba(255, 255, 255, .75) !important; }
.ym2-hero a { color: #ecfeff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); }
.ym2-hero a:hover { color: #ffffff; text-decoration-color: #ffffff; }

/* Form retains its light card look on dark bg for contrast (like uptime
   dashboards, the "type your URL" pill needs to POP). */
.ym2-hero-form {
    background: #ffffff;
    border-color: rgba(76, 175, 135, .35);
    box-shadow:
        0 25px 55px -25px rgba(76, 175, 135, .55),
        0 8px 20px  -8px rgba(0, 0, 0, .45);
}
.ym2-hero-form-icon { color: #64748b; }
.ym2-hero-form-input { color: #0f172a; }

/* Glow behind the dashboard shot — soft white halo instead of mint
   (mint would disappear against the green hero background). */
.ym2-hero-glow {
    background: radial-gradient(55% 55% at 60% 45%,
        rgba(255, 255, 255, .35) 0%,
        rgba(236, 254, 255, .18) 45%,
        transparent 75%);
    filter: blur(32px);
    opacity: .9;
}

/* Screenshot chrome stays light. Hairline white outline + deep shadow
   so the panel lifts off the green background cleanly. */
.ym2-shot {
    border-color: rgba(255, 255, 255, .28);
    box-shadow:
        0 60px 110px -35px rgba(6, 78, 59, .55),
        0 40px 70px  -25px rgba(0, 0, 0, .40),
        0 12px 24px  -10px rgba(0, 0, 0, .30);
}

/* Floating cards: darker card with mint edge so they read on the dark
   hero background without borrowing the light hero card scheme. */
.ym2-float {
    background: #111827;
    border-color: rgba(76, 175, 135, .28);
    color: #e2e8f0;
    box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .5);
}
.ym2-float-title { color: #f8fafc; }
.ym2-float-meta  { color: #94a3b8; }
.ym2-float-mini-label { color: #94a3b8; }
.ym2-float-mini-value { color: #f8fafc; }
.ym2-float-mini-pct   { color: #94a3b8; }

/* -------- TRUST BAND — light neutral slab.
   Hero is now green; a second green section would blur the visual rhythm.
   Switching this to off-white gives a clean palette cleanser between the
   green hero above and the dark splits below. */
.ym2-trust {
    background: #ffffff;
    border-top: 0;
    border-bottom: 1px solid #eef2f7;
    color: #0f172a;
}
.ym2-trust-lead { color: #0f172a; }
.ym2-trust .small.text-muted { color: #64748b !important; }
.ym2-trust-metric-num  { color: var(--ym-primary-dark, #15803D); }
.ym2-trust-metric-label { color: #64748b; }

/* -------- SPLIT sections — alternating white / very-light mint.
   Order down the page: hero (green) → trust (white) → split #1 (mint) →
   split #2 (white) → CTA (mint). Keeps a clean, calm rhythm without
   any dark bands. */

/* Split #1 — very light mint wash. #f4faf6 is close to white but tinted
   just enough to feel brand-adjacent. */
.ym2-split {
    background:
        radial-gradient(60% 40% at 50% 0%,
            rgba(76, 175, 135, .07) 0%, transparent 60%),
        #f4faf6;
    color: #334155;
}
/* Split #2 — plain white so the rhythm alternates. */
.ym2-split-alt {
    background: #ffffff;
}
.ym2-h2 { color: #0f172a; }
.ym2-split .lead.text-muted { color: #64748b !important; }
.ym2-fine { color: #334155; }
.ym2-fine li::before {
    border-left-color: var(--ym-primary, #4CAF87);
    border-bottom-color: var(--ym-primary, #4CAF87);
}
.ym2-shot-side {
    border-color: rgba(15, 23, 42, .08);
    box-shadow:
        0 40px 80px -40px rgba(76, 175, 135, .30),
        0 25px 45px -22px rgba(15, 23, 42, .18);
}

/* -------- FINAL CTA — light mint slab, closes the alternation cleanly.
   Text + buttons flip to dark palette because .btn-light / .btn-outline-light
   from the template would disappear on this background. */
.ym2-cta {
    background:
        radial-gradient(55% 60% at 50% 100%,
            rgba(76, 175, 135, .18) 0%, transparent 60%),
        #f4faf6;
    color: #0f172a;
}
.ym2-h2-white { color: #0f172a; }
.ym2-cta-lead { color: #475569; }
/* Template ships `btn-light` (white on dark) and `btn-outline-light` (white
   outline). On a light bg both vanish — override to a green primary +
   dark outline pair. */
.ym2-cta .btn-light {
    background: var(--ym-primary, #4CAF87);
    color: #ffffff;
    border-color: var(--ym-primary, #4CAF87);
}
.ym2-cta .btn-light:hover {
    background: var(--ym-primary-dark, #15803D);
    border-color: var(--ym-primary-dark, #15803D);
    color: #ffffff;
}
.ym2-cta .btn-outline-light {
    color: #0f172a;
    border-color: rgba(15, 23, 42, .25);
    background: transparent;
}
.ym2-cta .btn-outline-light:hover {
    background: #ffffff;
    color: #0f172a;
    border-color: rgba(15, 23, 42, .5);
}

/* -------- FEATURES GRID -------- */
.ym2-features {
    padding: 5rem 0;
    background:
        radial-gradient(45% 40% at 50% 0%, rgba(76, 175, 135, .06) 0%, transparent 60%),
        #ffffff;
}
/* Feature tile switched to a media-object layout — icon left, copy right.
   The icon square doesn't wrap when the title breaks to a second line;
   copy column grows to fill the rest of the card. */
.ym2-feature {
    height: 100%;
    padding: 1.5rem 1.35rem;
    background: #ffffff;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ym2-feature:hover {
    transform: translateY(-3px);
    border-color: rgba(76, 175, 135, .35);
    box-shadow: 0 20px 35px -20px rgba(76, 175, 135, .35),
                0 8px 18px -10px rgba(15, 23, 42, .18);
}
.ym2-feature-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    flex: 0 0 auto;      /* keep the icon square from shrinking */
    border-radius: 12px;
    background: rgba(76, 175, 135, .12);
    color: var(--ym-primary-dark, #15803D);
}
.ym2-feature-copy { min-width: 0; flex: 1 1 auto; }
.ym2-feature-title { color: #0f172a; font-size: 1.15rem; font-weight: 700; }
.ym2-feature-body  { color: #475569; font-size: .95rem; line-height: 1.55; }
@media (max-width: 767px) {
    .ym2-features { padding: 2.5rem 0; }
    .ym2-feature  { padding: 1.35rem 1.15rem; }
}

/* -------- WHY YOU NEED IT (variant of .ym2-split) -------- */
.ym2-split-why { background: #f4faf6; }
.ym2-why-list {
    list-style: none; padding: 0; margin: 0;
}
.ym2-why-list li {
    padding: 1rem 0 1rem 2.6rem;
    position: relative;
    color: #334155;
    line-height: 1.6;
    border-bottom: 1px solid rgba(15, 23, 42, .06);
}
.ym2-why-list li:last-child { border-bottom: 0; }
.ym2-why-list li::before {
    content: "";
    position: absolute; left: 0; top: 1.25rem;
    width: 24px; height: 24px; border-radius: 50%;
    background-color: rgba(76, 175, 135, .18);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 12.5 10 16.5 18 8'/%3E%3C/svg%3E");
    background-size: 16px 16px;
    background-position: center;
    background-repeat: no-repeat;
}
.ym2-why-list li strong { color: #0f172a; display: block; margin-bottom: 3px; }

/* -------- FAQ -------- */
/* White section for contrast against the mint `why` above.
   Adds a dotted-pattern watermark on the left so the section
   doesn't read as an empty white void. */
.ym2-faq {
    padding: 5rem 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}
.ym2-faq::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(76, 175, 135, .18) 1px, transparent 1.2px);
    background-size: 22px 22px;
    background-position: 0 0;
    mask-image: radial-gradient(60% 55% at 15% 30%, #000 0%, transparent 60%),
                radial-gradient(45% 45% at 90% 80%, #000 0%, transparent 60%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
    opacity: .55;
    pointer-events: none;
}
.ym2-faq > .container-xl { position: relative; z-index: 1; }
.ym2-faq-head { text-align: center; margin-bottom: 2.75rem; }
.ym2-faq-head .lead { max-width: 620px; margin: .75rem auto 0; color: #64748b; }
.ym2-accordion { max-width: 820px; margin: 0 auto; }
.ym2-accordion .accordion-item {
    background: #ffffff;
    border: 1px solid #eef2f7;
    border-radius: 14px !important;
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    transition: box-shadow .2s, border-color .2s;
}
.ym2-accordion .accordion-item:hover {
    border-color: rgba(76, 175, 135, .35);
    box-shadow: 0 12px 24px -14px rgba(76, 175, 135, .28),
                0 4px 10px -6px rgba(15, 23, 42, .10);
}
.ym2-accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: rgba(76, 175, 135, .55);
    box-shadow: 0 18px 32px -18px rgba(76, 175, 135, .35),
                0 6px 14px -8px rgba(15, 23, 42, .12);
}
.ym2-accordion .accordion-button {
    font-weight: 600;
    font-size: 1.02rem;
    color: #0f172a;
    background: #ffffff;
    padding: 1.25rem 1.5rem 1.25rem 1.5rem;
    box-shadow: none;
    gap: .9rem;
    align-items: center;
}
.ym2-accordion .accordion-button:not(.collapsed) {
    background: #ffffff;
    color: var(--ym-primary-dark, #15803D);
    box-shadow: none;
}
.ym2-accordion .accordion-button:focus { box-shadow: none; outline: none; }
.ym2-accordion .accordion-button:focus-visible {
    box-shadow: 0 0 0 3px rgba(76, 175, 135, .28);
    outline: none;
}
/* Numbered pill in front of each question. Populated by --n. */
.ym2-accordion .accordion-button::before {
    content: counter(faq-counter, decimal-leading-zero);
    counter-increment: faq-counter;
    display: inline-flex;
    align-items: center; justify-content: center;
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: rgba(76, 175, 135, .12);
    color: var(--ym-primary-dark, #15803D);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    transition: background .2s, color .2s;
}
.ym2-accordion .accordion-button:not(.collapsed)::before {
    background: var(--ym-primary, #4CAF87);
    color: #ffffff;
}
/* Replace Bootstrap's chevron with a clean +/- toggle. */
.ym2-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    background-size: 20px 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(76, 175, 135, .10);
    width: 32px; height: 32px;
    border-radius: 10px;
    transform: none;
    transition: background-color .2s, transform .3s;
}
.ym2-accordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
    background-color: var(--ym-primary, #4CAF87);
    transform: rotate(180deg);
}
.ym2-accordion { counter-reset: faq-counter; }
.ym2-accordion .accordion-body {
    padding: 0 1.5rem 1.4rem calc(1.5rem + 34px + .9rem);
    color: #475569;
    line-height: 1.65;
    font-size: .98rem;
}
.ym2-accordion code {
    background: rgba(76, 175, 135, .10);
    color: var(--ym-primary-dark);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .85em;
}
.ym2-faq-foot {
    text-align: center;
    margin-top: 2.5rem;
    color: #64748b;
}
.ym2-faq-foot a {
    color: var(--ym-primary-dark, #15803D);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed rgba(76, 175, 135, .5);
}
.ym2-faq-foot a:hover { border-bottom-style: solid; }
@media (max-width: 767px) {
    .ym2-faq { padding: 3rem 0; }
    .ym2-accordion .accordion-button {
        padding: 1rem 1.15rem;
        font-size: .96rem;
        gap: .6rem;
    }
    .ym2-accordion .accordion-button::before {
        width: 28px; height: 28px; font-size: .75rem;
    }
    .ym2-accordion .accordion-button::after {
        width: 26px; height: 26px;
        background-size: 16px 16px;
    }
    .ym2-accordion .accordion-body {
        padding: 0 1.15rem 1.15rem calc(1.15rem + 28px + .6rem);
    }
}

/* ================= /index3 overrides — flagship-three story ================= */

/* Rotating accent on the H1: "Monitor your [web, AI agents & servers]" */
.ym3-h1-rot {
    color: #ecfeff;
    background: linear-gradient(120deg, #ecfeff 0%, #86efac 45%, #4CAF87 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: .1em;   /* prevent last-letter clip on some browsers */
}

/* Domain chip row — the "three flagship types" surfaced above the URL input.
   Semi-transparent white on the green hero so they read as pills, not links. */
.ym3-domain-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}
.ym3-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    background: rgba(255, 255, 255, .12);
    color: #ecfeff;
    font-size: .82rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    text-decoration: none;
    transition: background .18s, border-color .18s, transform .18s, color .18s;
    position: relative;
}
.ym3-chip:hover, .ym3-chip:focus {
    background: rgba(255, 255, 255, .22);
    border-color: #ffffff;
    color: #ffffff;
    transform: translateY(-1px);
    text-decoration: none;
}
.ym3-chip-ico { font-size: 1rem; line-height: 1; }
.ym3-chip-badge {
    background: #ffffff;
    color: var(--ym-primary-dark, #15803D);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .05em;
    padding: 2px 6px;
    border-radius: 999px;
    margin-left: 3px;
    text-transform: uppercase;
}
.ym3-chip.is-new {
    background: rgba(76, 175, 135, .22);
    border-color: rgba(255, 255, 255, .50);
}

/* ================= /index3 hero big CTA + start-now strip ================= */

/* Big inviting hero CTA — emerald pill with a glossy top highlight, a soft
   pulsing halo, a rocket glyph on the left and an arrow that slides right on
   hover. No badges/sub-labels above or on the button. */
.ym3-hero-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: 1.05rem 1.9rem 1.05rem 1.55rem;
    background:
        linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 42%),
        linear-gradient(135deg, #34d399 0%, #16a34a 55%, #15803D 100%);
    color: #ffffff !important;
    border-radius: 999px;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.005em;
    text-decoration: none !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .22) inset,
        0 -2px 0   rgba(0, 0, 0, .12) inset,
        0 22px 44px -18px rgba(15, 128, 61, .70),
        0 10px 20px -8px  rgba(0, 0, 0, .35);
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
    isolation: isolate;
    overflow: hidden;
    max-width: 100%;
}
/* Pulsing halo ring sitting behind the pill — softer than the button itself
   so the button reads clean while the halo does the "come click me" work. */
.ym3-hero-cta::before {
    content: "";
    position: absolute;
    inset: -8px;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(closest-side, rgba(34,197,94,.55) 0%, rgba(34,197,94,0) 70%);
    filter: blur(6px);
    animation: ym3-cta-halo 2.6s ease-in-out infinite;
    pointer-events: none;
}
/* Diagonal shine that sweeps once per cycle — very subtle, never distracting. */
.ym3-hero-cta::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -40%;
    width: 30%;
    background: linear-gradient(115deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.35) 50%,
        rgba(255,255,255,0) 100%);
    transform: skewX(-18deg);
    animation: ym3-cta-shine 3.6s ease-in-out infinite;
    pointer-events: none;
}
.ym3-hero-cta-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    background: rgba(255,255,255,.18);
    border-radius: 50%;
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(255,255,255,.32) inset;
}
.ym3-hero-cta-ico svg {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
}
.ym3-hero-cta-arrow {
    display: inline-block;
    font-size: 1.25rem;
    line-height: 1;
    transition: transform .22s ease;
}
.ym3-hero-cta:hover,
.ym3-hero-cta:focus {
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.06) saturate(1.05);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .32) inset,
        0 -2px 0   rgba(0, 0, 0, .14) inset,
        0 28px 60px -18px rgba(15, 128, 61, .85),
        0 14px 26px -10px rgba(0, 0, 0, .40);
}
.ym3-hero-cta:hover .ym3-hero-cta-arrow,
.ym3-hero-cta:focus .ym3-hero-cta-arrow {
    transform: translateX(4px);
}
.ym3-hero-cta:hover::before,
.ym3-hero-cta:focus::before { animation-duration: 1.8s; }
@keyframes ym3-cta-halo {
    0%, 100% { opacity: .55; transform: scale(1);    }
    50%      { opacity: .95; transform: scale(1.04); }
}
@keyframes ym3-cta-shine {
    0%       { left: -40%; }
    55%      { left: 130%; }
    100%     { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
    .ym3-hero-cta::before,
    .ym3-hero-cta::after { animation: none; }
}

/* Start-now band under the hero — white on the mint-adjacent trust color so
   it reads as a fresh section rather than an extension of the green hero. */
.ym3-start-strip {
    background:
        radial-gradient(70% 100% at 100% 50%, rgba(76, 175, 135, .10) 0%, transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #f4faf6 100%);
    padding: 2.75rem 0;
    border-bottom: 1px solid rgba(76, 175, 135, .18);
}
.ym3-start-strip-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    max-width: 1080px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.ym3-start-strip-copy { flex: 1 1 320px; min-width: 0; }
.ym3-start-strip-eyebrow {
    display: inline-block;
    background: rgba(76, 175, 135, .15);
    color: var(--ym-primary-dark, #15803D);
    font-size: .7rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .5rem;
}
.ym3-start-strip-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.01em;
    margin: 0 0 .35rem;
}
.ym3-start-strip-sub {
    color: #475569;
    font-size: .92rem;
    margin: 0;
    line-height: 1.5;
}
.ym3-start-strip-form {
    flex: 1 1 420px;
    max-width: 560px;
}

@media (max-width: 767px) {
    .ym3-hero-cta { font-size: 1.05rem; padding: .95rem 1.5rem; width: 100%; }
    .ym3-start-strip-inner { gap: 1.25rem; }
    .ym3-start-strip-title  { font-size: 1.2rem; }
}

/* Uptime float card readability fix. The 99.9% value was landing on a
   pale-mint pocket of the hero gradient with insufficient contrast — bump
   the card background opacity, force the value colour, and lift z-index so
   it stays above the screenshot even when the shot bleeds 118% on desktop. */
.ym2-float-uptime {
    background: #0b1220 !important;
    border: 1px solid rgba(76, 175, 135, .45) !important;
    box-shadow: 0 20px 36px -18px rgba(0, 0, 0, .55),
                0 8px 18px -8px rgba(0, 0, 0, .35);
    z-index: 3;
}
.ym2-float-uptime .ym2-float-mini-label { color: #cbd5e1 !important; }
.ym2-float-uptime .ym2-float-mini-value {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.ym2-float-uptime .ym2-float-mini-pct   { color: #86efac !important; }

/* ==================================================================
   /index4 — comparison + flagship grid
   Simple, uptime.com-style layout: 4 competitor "gap" tiles on top,
   4 YouMonit checkmark cards below, separated by a small divider row.
   Flagship features become 4 large clickable cards.
   ================================================================== */

.ym4-compare {
    padding: 5rem 0 4rem;
    background:
        radial-gradient(60% 60% at 50% 0%, rgba(34, 197, 94, .08) 0%, transparent 65%),
        #ffffff;
}
.ym4-vs-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2.25rem;
}
.ym4-vs-item {
    text-align: center;
    padding: 1.5rem 1rem 1.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    position: relative;
    transition: transform .18s ease, box-shadow .18s ease;
}
.ym4-vs-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -12px rgba(15, 23, 42, .18);
}
.ym4-vs-brand {
    font-weight: 700;
    font-size: 1rem;
    color: #475569;
    letter-spacing: -.01em;
    margin-bottom: 1rem;
}
.ym4-vs-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: rgba(220, 38, 38, .10);
    color: #dc2626;
    border-radius: 50%;
    font-size: 1.15rem;
    font-weight: 900;
    margin-bottom: .75rem;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, .18) inset;
}
.ym4-vs-gap {
    color: #64748b;
    font-size: .92rem;
    line-height: 1.35;
}

.ym4-vs-divider {
    position: relative;
    text-align: center;
    margin: 0 auto 2rem;
    max-width: 640px;
}
.ym4-vs-divider::before {
    content: "";
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #cbd5e1 20%, #cbd5e1 80%, transparent);
}
.ym4-vs-divider span {
    position: relative;
    display: inline-block;
    padding: .35rem 1.1rem;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: .95rem;
    letter-spacing: .02em;
    border-radius: 999px;
    box-shadow: 0 6px 16px -6px rgba(22, 163, 74, .55);
}

.ym4-us-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.ym4-us-card {
    background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    padding: 1.5rem 1.15rem 1.4rem;
    text-align: center;
    box-shadow: 0 4px 14px -6px rgba(22, 163, 74, .15);
    transition: transform .18s ease, box-shadow .18s ease;
}
.ym4-us-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -10px rgba(22, 163, 74, .30);
}
.ym4-us-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #ffffff;
    border-radius: 50%;
    font-size: 1.3rem;
    font-weight: 900;
    margin-bottom: .85rem;
    box-shadow: 0 6px 14px -4px rgba(22, 163, 74, .55);
}
.ym4-us-title {
    font-weight: 800;
    font-size: 1.02rem;
    color: #0f172a;
    margin-bottom: .5rem;
    letter-spacing: -.01em;
}
.ym4-us-body {
    color: #475569;
    font-size: .92rem;
    line-height: 1.45;
    margin: 0;
}

@media (max-width: 991px) {
    .ym4-vs-row,
    .ym4-us-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .ym4-vs-row,
    .ym4-us-row { grid-template-columns: 1fr; }
}

/* ---- Flagship features (4 large clickable cards) ---- */
.ym4-flagship {
    padding: 4rem 0 5rem;
    background: #f8fafc;
}
.ym4-flagship-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.15rem;
}
.ym4-flagship-card {
    display: flow-root;     /* contain floated icon */
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.5rem 1.25rem 1.4rem;
    text-decoration: none !important;
    color: inherit !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ym4-flagship-card:hover {
    transform: translateY(-3px);
    border-color: #86efac;
    box-shadow: 0 14px 30px -10px rgba(15, 23, 42, .16);
}
.ym4-flagship-icon {
    float: left;
    margin: 0 0.85rem 0.4rem 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #15803d;
    border-radius: 10px;
}
.ym4-flagship-title {
    font-weight: 800;
    font-size: 1.08rem;
    color: #0f172a;
    margin: 0 0 .5rem;
    letter-spacing: -.01em;
}
.ym4-flagship-body {
    color: #475569;
    font-size: .93rem;
    line-height: 1.45;
}
.ym4-flagship-more {
    display: inline-block;
    margin-top: .9rem;
    color: #16a34a;
    font-weight: 700;
    font-size: .9rem;
}
.ym4-flagship-card:hover .ym4-flagship-more { color: #15803d; }

@media (max-width: 991px) { .ym4-flagship-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ym4-flagship-grid { grid-template-columns: 1fr; } }

/* ==================================================================
   /index4 — See it in action + FAQ / Why-you-need-it
   ================================================================== */

.ym4-showcase {
    padding: 5rem 0 4rem;
    background: #ffffff;
}
.ym4-shot {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px -12px rgba(15, 23, 42, .12);
    transition: transform .2s ease, box-shadow .2s ease;
}
.ym4-shot:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 48px -14px rgba(15, 23, 42, .20);
}
.ym4-shot-bar {
    display: flex; align-items: center; gap: .35rem;
    padding: .55rem .9rem;
    background: #ffffff;
    border-bottom: 1px solid #eef2f7;
}
.ym4-shot-bar > span {
    width: 10px; height: 10px; border-radius: 50%;
    background: #e2e8f0;
}
.ym4-shot-bar > span:nth-child(1) { background: #f87171; }
.ym4-shot-bar > span:nth-child(2) { background: #fbbf24; }
.ym4-shot-bar > span:nth-child(3) { background: #34d399; }
.ym4-shot-url {
    margin-left: .5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .8rem;
    color: #64748b;
}
.ym4-shot img {
    display: block;
    width: 100%;
    height: auto;
}

.ym4-faqwhy {
    padding: 4rem 0 5rem;
    background: #f8fafc;
    border-top: 1px solid #eef2f7;
}
.ym4-faqwhy .accordion-item {
    border: 1px solid #e2e8f0;
    border-radius: 10px !important;
    margin-bottom: .5rem;
    background: #ffffff;
    overflow: hidden;
}
.ym4-faqwhy .accordion-button {
    font-weight: 700;
    color: #0f172a;
    padding: .95rem 1.1rem;
    background: #ffffff;
    box-shadow: none;
}
.ym4-faqwhy .accordion-button:not(.collapsed) {
    background: #f0fdf4;
    color: #15803d;
}
.ym4-faqwhy .accordion-button:focus {
    box-shadow: 0 0 0 .18rem rgba(22, 163, 74, .18);
}
.ym4-faqwhy .accordion-body {
    padding: .9rem 1.1rem 1.1rem;
    line-height: 1.55;
}
.ym4-why-list li {
    padding: .5rem 0 .55rem;
    border-bottom: 1px dashed #e2e8f0;
    color: #475569;
    line-height: 1.5;
}
.ym4-why-list li:last-child { border-bottom: none; }
.ym4-why-list li strong {
    display: block;
    color: #0f172a;
    margin-bottom: .1rem;
    font-weight: 700;
}