/* ============================================================
   Website Monitor - landing page
   ============================================================

   The site's own palette, from WebsiteTemplate/assets/css/style.css:
   #58bae4 accent, #3f89a9 beneath it, #44475a and #212529 for text,
   #b6b4b4 borders, 15px radius. This is a marketing page and it
   should still look like part of A2Z Tools rather than a template
   bought from somewhere else.

   BOTH THEMES, like every other page here: theme-dark is set on the
   body from a cookie and style-dark.css repaints the site, so every
   colour is a token with a dark override rather than a fixed value.
   ============================================================ */

:root {
    --wm-accent:        #58bae4;
    --wm-accent-strong: #3f89a9;
    --wm-accent-tint:   #e4e8f6;

    --wm-ink:   #212529;
    --wm-ink-2: #44475a;
    --wm-ink-3: #6c757d;

    --wm-surface:   #ffffff;
    --wm-surface-2: #f9f9f9;

    --wm-border:        #d3d3d4;
    --wm-border-strong: #b6b4b4;

    --wm-ok: #1b6b45;
    --wm-no: #9aa0a6;

    --wm-shadow: 0 10px 29px 0 rgba(68, 88, 144, .10);
}

.theme-dark {
    --wm-accent-tint: #22333c;

    --wm-ink:   #ffffff;
    --wm-ink-2: #e9e9ea;
    --wm-ink-3: #b1b1b1;

    --wm-surface:   #282424;
    --wm-surface-2: #1e1c1c;

    --wm-border:        #4a4646;
    --wm-border-strong: #6f6a6a;

    --wm-ok: #7ee2a8;
    --wm-no: #7d7a7a;

    --wm-shadow: 0 10px 29px 0 rgba(0, 0, 0, .45);
}

.wm { color: var(--wm-ink); }

.wm-band { margin-bottom: 46px; }

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

.wm-hero { text-align: center; padding: 44px 0 34px; }

.wm-hero h1 {
    font-size: clamp(28px, 5vw, 42px);
    line-height: 1.2;
    max-width: 760px;
    margin: 0 auto 14px;
    color: var(--wm-ink);
}

.wm-lede {
    max-width: 640px;
    margin: 0 auto 22px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--wm-ink-2);
}

.wm-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.wm-btn {
    display: inline-block;
    padding: 12px 24px;
    border: 1px solid var(--wm-border-strong);
    border-radius: 10px;
    background: var(--wm-surface);
    color: var(--wm-ink-2);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.wm-btn:hover { border-color: var(--wm-accent); color: var(--wm-ink); text-decoration: none; }

.wm-btn-primary {
    background: var(--wm-accent);
    border-color: var(--wm-accent);
    color: #fff;
}

.wm-btn-primary:hover {
    background: var(--wm-accent-strong);
    border-color: var(--wm-accent-strong);
    color: #fff;
}

.wm-note {
    margin-top: 16px;
    font-size: 13.5px;
    color: var(--wm-ink-3);
    text-align: center;
}

/* Features ---------------------------------------------------- */

.wm-h2 {
    font-size: 24px;
    margin: 0 0 20px;
    text-align: center;
    color: var(--wm-ink);
}

/* THREE ACROSS on a wide screen, not four. There are six features,
   and four columns leaves the second row half empty with a hole
   beside it. 340px is wide enough that the container fits exactly
   three, giving two even rows. */
.wm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 18px;
}

.wm-feature {
    background: var(--wm-surface);
    border: 1px solid var(--wm-border-strong);
    border-radius: 15px;
    padding: 22px;
    box-shadow: var(--wm-shadow);
}

.wm-feature h2 { font-size: 17px; margin: 0 0 8px; color: var(--wm-ink); }
.wm-feature p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--wm-ink-2); }

/* Steps ------------------------------------------------------- */

.wm-steps {
    max-width: 720px;
    margin: 0 auto;
    padding-left: 22px;
}

.wm-steps li {
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--wm-ink-2);
}

.wm-steps li::marker { color: var(--wm-accent-strong); font-weight: 700; }
.wm-steps strong { color: var(--wm-ink); }

/* Plans ------------------------------------------------------- */

.wm-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.wm-plan {
    background: var(--wm-surface);
    border: 1px solid var(--wm-border-strong);
    border-radius: 15px;
    padding: 22px;
    box-shadow: var(--wm-shadow);
}

.wm-plan h3 {
    font-size: 18px;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--wm-border);
    color: var(--wm-ink);
}

.wm-plan ul { list-style: none; padding: 0; margin: 0; }

.wm-plan li {
    padding: 7px 0 7px 24px;
    position: relative;
    font-size: 14.5px;
    color: var(--wm-ink-2);
}

/* A tick or a dash, and the colour is never the only signal - the
   dash is a different character, so the difference survives being
   read by somebody who cannot distinguish the two colours. */
.wm-plan li.yes::before,
.wm-plan li.no::before {
    position: absolute;
    left: 0;
    font-weight: 700;
}

.wm-plan li.yes::before { content: "\2713"; color: var(--wm-ok); }
.wm-plan li.no::before  { content: "\2014"; color: var(--wm-no); }
.wm-plan li.no { color: var(--wm-ink-3); }

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

.wm-faq { max-width: 760px; margin: 0 auto; }
.wm-faq h3 { font-size: 16.5px; margin: 22px 0 6px; color: var(--wm-ink); }
.wm-faq h3:first-child { margin-top: 0; }
.wm-faq p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--wm-ink-2); }

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

.wm-final {
    text-align: center;
    background: var(--wm-accent-tint);
    border: 1px solid var(--wm-accent);
    border-radius: 15px;
    padding: 34px 22px;
}

.wm-final h2 { font-size: 24px; margin: 0 0 8px; color: var(--wm-ink); }
.wm-final p { margin: 0 0 18px; color: var(--wm-ink-2); }

@media (max-width: 575px) {
    .wm-feature, .wm-plan { padding: 16px; }
    .wm-hero { padding: 28px 0 22px; }
}

/* The price line. "Not on sale yet" is a legitimate value here, so it
   is styled to read as a statement rather than as a missing number -
   quieter and smaller than a real price, but not an error. */
.wm-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--wm-accent-strong);
    margin: -6px 0 12px;
}

.wm-plan li strong { color: var(--wm-ink); }