/*
    Mt2Guru marketing site — "Client Slate".

    The palette, type and panel construction are the app's own, transcribed from
    design/README.md the same way src/Mt2Guru.App/Theme/Tokens.xaml transcribes them.
    When the design moves, this file and Tokens.xaml are the two places that change.
*/

:root {
    --panel-frame: linear-gradient(180deg, #242b29, #161b1a);
    --panel-inner: linear-gradient(180deg, #1a201f, #111514);
    --card: linear-gradient(180deg, #1c2221, #121716);
    --hard: #060808;

    --hair: rgba(150, 165, 150, .18);
    --hair-mid: rgba(150, 165, 150, .28);
    --hair-strong: rgba(150, 165, 150, .5);

    --text: #e8e2c8;
    --body: #d9d3b8;
    --secondary: #b8b294;
    --muted: #8d8871;
    --faint: #5a5646;
    --fainter: #4a463a;

    --accent: #9fd0b8;
    --accent-deep: #3f6b5a;
    --accent-grad: linear-gradient(135deg, #9fd0b8, #3f6b5a);
    --yellow: #f2d24b;
    --green: #7fae6b;
    /* The HP bar's red, lifted enough to read as text on the slate ground. */
    --ember: #d2694f;

    /* Accent-variant slots. A card sets these three and the shared rules do the rest. */
    --hue: var(--accent);
    --hue-grad: var(--accent-grad);
    --hue-glow: rgba(159, 208, 184, .14);

    --ui: Tahoma, Verdana, "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", Consolas, "Courier New", monospace;

    --shadow-card: 0 5px 16px rgba(0, 0, 0, .7);
    --shadow-chip: 0 3px 10px rgba(0, 0, 0, .6);

    --max: 1080px;
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--ui);
    font-size: 14px;
    line-height: 1.65;
    color: var(--body);
    background: #060808;
    background-image: radial-gradient(ellipse 1200px 700px at 50% -10%, #161c1b, #060808 70%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { color: var(--text); line-height: 1.25; margin: 0; }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 22px; }

.skip {
    position: absolute; left: -9999px; top: 0;
    background: var(--card); color: var(--text);
    padding: 10px 14px; border: 1px solid var(--hair-mid); border-radius: 4px;
}
.skip:focus { left: 12px; top: 12px; z-index: 100; }

/* ==================== Diamond motif ==================== */
/* A square rotated 45 degrees, accent gradient fill: brand mark, bullet, alert dot. */
.dia {
    display: inline-block;
    width: 9px; height: 9px;
    background: var(--accent-grad);
    transform: rotate(45deg);
    flex: 0 0 auto;
}
.dia-pulse { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 rgba(159, 208, 184, 0); }
    50% { opacity: .55; box-shadow: 0 0 10px rgba(159, 208, 184, .9); }
}
@media (prefers-reduced-motion: reduce) {
    .dia-pulse { animation: none; }
    html { scroll-behavior: auto; }
}

/* ==================== Labels ==================== */
.label {
    font-family: var(--mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--muted);
}
.mono { font-family: var(--mono); }

/* ==================== Beta strip ==================== */
.beta-strip {
    background: linear-gradient(180deg, #1d2422, #141918);
    border-bottom: 1px solid var(--hard);
    box-shadow: inset 0 1px 0 rgba(159, 208, 184, .12);
}
.beta-strip .wrap {
    display: flex; align-items: center; gap: 10px;
    padding-top: 7px; padding-bottom: 7px;
    font-family: var(--mono); font-size: 10.5px;
    letter-spacing: .06em; color: var(--secondary);
}
.beta-strip b { color: var(--accent); font-weight: 700; letter-spacing: .14em; }

/* ==================== Header ==================== */
.site-head {
    position: sticky; top: 0; z-index: 50;
    background: linear-gradient(180deg, rgba(26, 32, 31, .96), rgba(17, 21, 20, .96));
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--hard);
    box-shadow: inset 0 1px 0 rgba(159, 208, 184, .18), 0 4px 14px rgba(0, 0, 0, .5);
}
.site-head .wrap {
    display: flex; align-items: center; gap: 18px;
    padding-top: 12px; padding-bottom: 12px;
}
.brand {
    display: flex; align-items: center; gap: 9px;
    color: var(--text); font-weight: 800; font-size: 16px;
    letter-spacing: .02em; text-decoration: none;
}
.brand:hover { text-decoration: none; color: var(--text); }
.brand img { width: 22px; height: 22px; display: block; filter: drop-shadow(0 0 7px rgba(159, 208, 184, .35)); }
/* Two-tone wordmark: the product half in tan, the name half in the accent. */
.brand .wm-b { color: var(--accent); }
.brand-beta {
    font-family: var(--mono); font-size: 8.5px; font-weight: 700;
    letter-spacing: .18em; color: var(--accent);
    border: 1px solid rgba(159, 208, 184, .4);
    border-radius: 3px; padding: 2px 5px; margin-left: 2px;
    background: rgba(159, 208, 184, .08);
}
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav a {
    display: block; padding: 6px 11px; border-radius: 4px;
    color: var(--secondary); font-size: 13px; text-decoration: none;
    border: 1px solid transparent;
}
.nav a:hover { color: var(--text); background: rgba(255, 255, 255, .04); text-decoration: none; }
.nav a[aria-current="page"] {
    color: var(--text); background: var(--card);
    border-color: var(--hair-mid);
}

/* ==================== Buttons ==================== */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 4px;
    font-family: var(--ui); font-size: 13px; font-weight: 700;
    border: 1px solid var(--hard); cursor: pointer; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary {
    background: var(--accent-grad); color: #0d1211;
    box-shadow: var(--shadow-chip), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-primary:hover { filter: brightness(1.08); color: #0d1211; }
.btn-ghost {
    background: var(--card); color: var(--text);
    border-color: var(--hair-mid); box-shadow: var(--shadow-chip);
}
.btn-ghost:hover { border-color: var(--hair-strong); color: var(--text); }
.btn-inert {
    background: rgba(255, 255, 255, .02); color: var(--faint);
    border-color: var(--hair); cursor: not-allowed; box-shadow: none;
}

/* ==================== Panels ==================== */
/* 2px outer frame with a top highlight, wrapping an inner panel on a khaki hairline. */
.panel {
    background: var(--panel-frame);
    border: 1px solid var(--hard);
    border-radius: 5px;
    padding: 2px;
    box-shadow: inset 0 1px 0 rgba(159, 208, 184, .35), var(--shadow-card);
}
.panel-inner {
    background: var(--panel-inner);
    border: 1px solid var(--hair);
    border-radius: 3px;
    padding: 22px 24px;
}
.card {
    background: var(--card);
    border: 1px solid var(--hard);
    outline: 1px solid var(--hair);
    outline-offset: -3px;
    border-radius: 4px;
    padding: 18px 20px;
    box-shadow: var(--shadow-card);
}

/* ==================== Sections ==================== */
section { padding: 44px 0; }
.section-head { margin-bottom: 22px; }
.section-head .label { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.section-head h2 { font-size: 22px; font-weight: 800; }
.section-head p { color: var(--secondary); max-width: 62ch; margin-top: 8px; }

/* ==================== Hero ==================== */
.hero { padding: 66px 0 40px; }
.hero h1 {
    font-size: 40px; font-weight: 800; letter-spacing: -.01em;
    max-width: 17ch; margin-bottom: 16px;
}
.hero .lede { font-size: 16px; color: var(--body); max-width: 58ch; }
.hero .lede strong { color: var(--text); }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.hero-note {
    margin-top: 18px; font-family: var(--mono); font-size: 10.5px;
    color: var(--faint); letter-spacing: .04em;
}

/* ==================== Grids ==================== */
.grid { display: grid; gap: 14px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.card h3 { font-size: 15px; font-weight: 700; margin-bottom: 7px; }
.card p { font-size: 13px; color: var(--secondary); }
.card .label { display: block; margin-bottom: 10px; }

/* Feature row with a diamond bullet. */
.flist { list-style: none; margin: 0; padding: 0; }
.flist li {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 9px 0; border-bottom: 1px solid var(--hair);
    font-size: 13px; color: var(--body);
}
.flist li:last-child { border-bottom: 0; }
.flist li .dia { margin-top: 6px; }
.flist b { color: var(--text); font-weight: 700; }

/* ==================== Badges ==================== */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: 9px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .14em;
    padding: 3px 8px; border-radius: 3px; white-space: nowrap;
}
.badge-live { color: var(--green); border: 1px solid rgba(127, 174, 107, .35); background: rgba(127, 174, 107, .08); }
.badge-beta { color: var(--accent); border: 1px solid rgba(159, 208, 184, .35); background: rgba(159, 208, 184, .08); }
.badge-soon { color: var(--yellow); border: 1px solid rgba(242, 210, 75, .3); background: rgba(242, 210, 75, .07); }
.badge-off { color: var(--muted); border: 1px solid var(--hair); background: rgba(255, 255, 255, .02); }

/* ==================== Plans ==================== */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
@media (max-width: 940px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .plans { grid-template-columns: 1fr; } }

.plan { display: flex; flex-direction: column; padding: 0; }
.plan-head { padding: 18px 20px 16px; border-bottom: 1px solid var(--hair); }
.plan-name { font-size: 17px; font-weight: 800; color: var(--text); margin: 9px 0 2px; }
.plan-price { margin-top: 10px; }
.plan-price .amount {
    font-family: var(--mono); font-size: 20px; font-weight: 600;
    color: var(--text); letter-spacing: -.01em;
}
.plan-price .per { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.plan-price .alt {
    display: block; margin-top: 4px;
    font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: .04em;
}
.plan-price .tba {
    font-family: var(--mono); font-size: 11px; color: var(--muted);
    letter-spacing: .06em; display: block; padding: 6px 0 5px;
}
.plan-body { padding: 16px 20px; flex: 1 1 auto; }
.plan-body > p { font-size: 13px; color: var(--secondary); }
.plan-foot { padding: 0 20px 18px; }
.plan-foot .btn { width: 100%; justify-content: center; }
.plan-foot .foot-note {
    display: block; margin-top: 9px; text-align: center;
    font-family: var(--mono); font-size: 9.5px; color: var(--faint); letter-spacing: .05em;
}

.plan-upcoming .plan-name { color: var(--secondary); }
.plan-upcoming .plan-body { min-height: 128px; display: flex; align-items: center; justify-content: center; text-align: center; }
.plan-upcoming .plan-body p { color: var(--faint); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; }

.plan-featured { box-shadow: var(--shadow-card), 0 0 22px rgba(159, 208, 184, .12); }
.plan-featured .plan-head { background: linear-gradient(180deg, rgba(159, 208, 184, .07), transparent); }

/* ==================== Notice panel ==================== */
.notice {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px; border-radius: 4px;
    background: rgba(242, 210, 75, .05);
    border: 1px solid rgba(242, 210, 75, .22);
    font-size: 13px; color: var(--body);
}
.notice .dia { background: linear-gradient(135deg, #f2d24b, #8a761f); margin-top: 5px; }
.notice b { color: var(--yellow); }

.wip { text-align: center; padding: 52px 26px; }
.wip .dia { margin: 0 auto 18px; display: block; width: 14px; height: 14px; }
.wip h2 { font-size: 24px; font-weight: 800; margin-bottom: 10px; }
.wip p { color: var(--secondary); max-width: 54ch; margin-left: auto; margin-right: auto; }

/* ==================== Contact ==================== */
.mail {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 16px; font-weight: 500;
    color: var(--yellow); word-break: break-all;
}
.mail:hover { color: var(--yellow); }

/* ==================== Steps / roadmap ==================== */
.steps { list-style: none; margin: 0; padding: 0; }
.steps li {
    display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: start;
    padding: 12px 0; border-bottom: 1px solid var(--hair);
}
.steps li:last-child { border-bottom: 0; }
.steps .n { font-family: var(--mono); font-size: 11px; color: var(--faint); padding-top: 2px; }
.steps h3 { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.steps p { font-size: 13px; color: var(--secondary); margin: 0; }
@media (max-width: 560px) {
    .steps li { grid-template-columns: 22px 1fr; }
    .steps li .badge { grid-column: 2; justify-self: start; }
}

/* ==================== Footer ==================== */
.site-foot {
    margin-top: 30px;
    border-top: 1px solid var(--hard);
    box-shadow: inset 0 1px 0 rgba(159, 208, 184, .12);
    background: linear-gradient(180deg, #121716, #0b0f0e);
    padding: 26px 0 34px;
}
.site-foot .wrap { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.foot-brand { display: flex; align-items: center; gap: 9px; color: var(--secondary); font-weight: 700; font-size: 13px; }
.foot-nav { margin-left: auto; display: flex; gap: 16px; flex-wrap: wrap; }
.foot-nav a { color: var(--muted); font-size: 12.5px; }
.foot-nav a:hover { color: var(--text); }
.foot-fine {
    width: 100%; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair);
    font-family: var(--mono); font-size: 10px; color: var(--fainter); letter-spacing: .05em;
    line-height: 1.8;
}
.foot-fine a { color: var(--faint); }

/* ==================== Colour ====================
   The slate stays the ground; colour arrives as light on it. Every hue below is already a
   token of the app's theme — the teal accent, the item yellow, the success green and the
   HP red — so the site gains colour without inventing a second palette. */

/* Hero: two coloured glows behind the type, teal from the left and gold from the right. */
.hero { position: relative; }
.hero::before {
    content: ""; position: absolute; inset: -60px 0 -20px;
    background:
        radial-gradient(620px 320px at 12% 32%, rgba(159, 208, 184, .16), transparent 68%),
        radial-gradient(520px 300px at 88% 12%, rgba(242, 210, 75, .09), transparent 66%);
    pointer-events: none; z-index: 0;
}
.hero .wrap { position: relative; z-index: 1; }

.hero h1 .accentuate {
    background: linear-gradient(100deg, #d8f3e6 10%, #9fd0b8 45%, #f2d24b 95%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--accent);
}

/* A card can take a hue: coloured top edge, coloured label, coloured bullet. */
.a-teal  { --hue: #9fd0b8; --hue-grad: linear-gradient(90deg, #9fd0b8, #3f6b5a); --hue-glow: rgba(159, 208, 184, .13); }
.a-gold  { --hue: #f2d24b; --hue-grad: linear-gradient(90deg, #f2d24b, #8a761f); --hue-glow: rgba(242, 210, 75, .11); }
.a-green { --hue: #7fae6b; --hue-grad: linear-gradient(90deg, #9ccf85, #47693a); --hue-glow: rgba(127, 174, 107, .12); }
.a-ember { --hue: #d2694f; --hue-grad: linear-gradient(90deg, #d2694f, #7c1408); --hue-glow: rgba(210, 105, 79, .11); }

.card[class*="a-"] {
    position: relative; overflow: hidden;
    box-shadow: var(--shadow-card), inset 0 0 34px -18px var(--hue);
}
.card[class*="a-"]::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--hue-grad);
}
.card[class*="a-"] > .label { color: var(--hue); opacity: .95; }
.card[class*="a-"] .dia { background: var(--hue-grad); }
.card[class*="a-"]:hover { box-shadow: var(--shadow-card), 0 0 26px -6px var(--hue-glow); }

/* Section headers: the leading diamond picks up the section's hue. */
.section-head.a-teal .dia,
.section-head.a-gold .dia,
.section-head.a-green .dia,
.section-head.a-ember .dia { background: var(--hue-grad); }
.section-head[class*="a-"] .label { color: var(--hue); }

/* Plans: one hue per tier, so the ladder reads as a ladder. */
.plan.a-green  .plan-head { background: linear-gradient(180deg, rgba(127, 174, 107, .10), transparent); }
.plan.a-teal   .plan-head { background: linear-gradient(180deg, rgba(159, 208, 184, .12), transparent); }
.plan.a-gold   .plan-head { background: linear-gradient(180deg, rgba(242, 210, 75, .08), transparent); }
.plan.a-ember  .plan-head { background: linear-gradient(180deg, rgba(210, 105, 79, .08), transparent); }
.plan[class*="a-"] .plan-price .amount { color: var(--hue); }
.plan[class*="a-"] .plan-price .alt { color: var(--hue); opacity: .8; }
.plan-featured { box-shadow: var(--shadow-card), 0 0 30px -8px var(--hue-glow); }

/* Buttons in a hued context follow the hue. */
.btn-primary.a-gold { background: linear-gradient(135deg, #f2d24b, #a9871d); }

/* Footer: a thin spectrum of the four hues, so the page closes on colour. */
.site-foot { position: relative; }
.site-foot::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, #9fd0b8, #7fae6b 34%, #f2d24b 68%, #d2694f);
    opacity: .55;
}
.foot-brand img { width: 17px; height: 17px; display: block; }

/* The beta strip earns a colour edge too. */
.beta-strip { border-top: 2px solid transparent; border-image: linear-gradient(90deg, #9fd0b8, #f2d24b 60%, #d2694f) 1; }

@media (max-width: 620px) {
    .hero { padding: 40px 0 30px; }
    .hero h1 { font-size: 30px; }
    .site-head .wrap { flex-wrap: wrap; gap: 10px; }
    .nav { margin-left: 0; width: 100%; }
}