/* MC Plus look: the app's own colours, corners, buttons and labels (webapp/src/app.css, "design 3").
   Loaded last on every page, so it only restyles; the pages and wording are unchanged. */
:root{
 --navy:#0F1B33;--navy2:#1B2A55;--deep:#0B1326;
 --accent:#2DD4BF;--on-accent:#06242A;--accent-d:#176664;--mint:#2DD4BF;--accent-soft:#E0F8F4;
 --ink:#0F1B33;--muted:#5E6A82;--tint:#F3F5F9;--line:#E8ECF2;--line2:#EDF0F5;
 --r:20px;--rb:14px;
 --shadow:0 1px 2px rgba(15,27,51,.05),0 10px 28px rgba(15,27,51,.07);
 --lift:0 24px 60px -12px rgba(15,27,51,.28)
}
body{color:var(--ink);background:#fff}
h1,h2,h3{letter-spacing:-.028em}
h2{font-weight:700;color:var(--ink)}
h3{color:var(--ink)}
.lbl{color:var(--accent-d);letter-spacing:1.6px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* buttons: mint with dark text, like the app's main buttons */
.btn{background:var(--accent);color:var(--on-accent);border-radius:var(--rb);font-weight:700;box-shadow:none;border:1px solid var(--accent)}
.btn:hover{background:var(--accent);filter:brightness(1.05);transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:#F7F9FC;border-color:color-mix(in srgb,var(--ink) 22%,transparent);filter:none}
.btn.light,.btn.dark{background:#fff;color:var(--ink);border-color:#fff}
.btn.out{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.32)}
.btn.out:hover{background:rgba(255,255,255,.08);filter:none}
.nav .navcta{background:var(--accent);color:var(--on-accent)}

/* header and logo: the app's navy "MC" tile */
header.site{background:rgba(255,255,255,.92);border-bottom-color:var(--line2)}
.mark{background:var(--navy);border-radius:12px;color:#fff}
.brand b{color:var(--ink)}
.brand small{color:var(--accent-d)}
.nav a{color:var(--ink);font-weight:600;border-radius:999px}
.nav a:hover{background:var(--tint)}
.nav a.on{color:var(--ink);background:var(--accent-soft);box-shadow:none;border-radius:999px}
.topbar{background:var(--navy)}
.burger{border-radius:var(--rb);border-color:var(--line)}

/* heroes: the app's deep navy with a soft mint glow */
.hero,.phero{background:radial-gradient(900px 420px at 85% 0%,rgba(45,212,191,.22),transparent 70%),linear-gradient(180deg,var(--deep) 0%,var(--navy) 100%)}
.hero h1 em,.phero h1 em,.phero .lbl{color:var(--accent)}
.pill{border-radius:999px;border-color:rgba(255,255,255,.18)}
.pill:before{background:var(--accent)}
.browser{border-radius:var(--r);box-shadow:var(--lift)}

/* surfaces: white cards with the app's soft shadow and 20px corners */
.sec-tint,.trust{background:var(--tint)}
.card,.step,.pkg,.tier,.ex figure,.kv div,.cbox,.card-form{border:1px solid var(--line2);border-radius:var(--r);box-shadow:var(--shadow)}
a.card:hover,.card.hov:hover,.tier:hover{border-color:var(--line2);box-shadow:var(--lift)}
.card .ic{background:var(--accent-soft);color:var(--accent-d);border-radius:14px}
.card .more,.prose a{color:var(--accent-d)}
.step .n{background:var(--navy);color:#fff}
.checks li:before,.pkg li:before,.tier li::before{border-color:var(--accent-d)}
.callout{background:var(--accent-soft);border:0;border-radius:16px;color:var(--ink)}

/* labels and chips: the app's pill labels */
.pkg .tag,.badge{background:var(--accent);color:var(--on-accent);border-radius:999px;letter-spacing:1px}
.pkg.pop{border:2px solid var(--accent)}
.chip{border-radius:999px;border-color:var(--line);font-weight:600;color:var(--ink)}
a.chip:hover{border-color:var(--ink);color:var(--ink)}
.tier .rank{color:var(--accent-d)}
.tier.top{background:linear-gradient(170deg,var(--navy) 0%,var(--navy2) 100%)}
.tier.top .rank,.tier.top li::before{color:var(--accent);border-color:var(--accent)}
.seg{border-radius:999px}
.seg button[aria-pressed="true"]{background:#fff;color:var(--ink)}

/* dark panels and bands */
.panel{background:var(--navy);border-radius:var(--r)}
.panel li:before{color:var(--accent)}
.band{background:linear-gradient(135deg,var(--navy),var(--navy2))}
.contact{background:linear-gradient(180deg,var(--navy) 0%,var(--deep) 100%)}

/* forms: the app's input style */
.f input,.f textarea,.f select{border:1px solid var(--line);border-radius:12px;background:#fff}
.f input:focus,.f textarea:focus,.f select:focus{outline:2px solid var(--accent);border-color:transparent}
.f label{color:var(--ink);font-weight:600}

/* footer and phone call bar */
footer.sf{background:var(--deep)}
.callbar{background:var(--navy)}
.callbar a+a{background:var(--accent);color:var(--on-accent)}

/* the company logo (header and footer) */
.brand img.logo{display:block;height:44px;width:auto}
footer.sf .fb img.logo{display:block;height:40px;width:auto;margin-bottom:6px}
@media(max-width:520px){.brand img.logo{height:38px}}

/* the real-site screenshots are links */
a.browser{text-decoration:none;color:inherit}