/* =====================================================================
   Public site, dashboard skin.
   Loaded after site.css and the Branding palette so the public pages share
   the dashboard's look: dark green header band, gold accent, white rounded
   cards on a cool grey page, gold gradient buttons, bold sans headings.
   Colours still come from the Branding variables.
   ===================================================================== */
:root {
  --ff-display: "Manrope", "Segoe UI", Helvetica, Arial, sans-serif;
  --radius: 20px;
  --dash-btn: linear-gradient(90deg, color-mix(in srgb, var(--green) 38%, #fff), var(--green));
  --dash-btn-text: #07104d;
  --dash-shadow: 0 10px 30px -12px rgba(16, 24, 40, .14);
}
body { background: var(--paper); }
body::before { display: none; }

/* headings: bold sans, like "Welcome, ..." on the dashboard */
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; }
.hero h1 { font-variation-settings: normal; line-height: 1.04; letter-spacing: -0.035em; }
em.accent, .hero h1 em { font-style: normal; color: var(--accent-soft); font-variation-settings: normal; }
.section:not(.dark) em.accent { color: var(--green); }
.wordmark { font-family: "Fraunces", "Iowan Old Style", serif; }
.eyebrow { font-family: var(--ff-body); font-weight: 700; font-size: 12px; letter-spacing: .12em; color: var(--green-deep); }
.eyebrow::before { width: 18px; height: 2px; border-radius: 2px; }
.plan .rate, .stat .num, .big-num { font-family: var(--ff-display); font-weight: 800; }
.mono { font-family: var(--ff-body); }

/* buttons: gold gradient pill, dark navy label */
.btn.green, .btn:not(.ghost):not(.green) {
  background: var(--dash-btn); color: var(--dash-btn-text); border-color: transparent; font-weight: 700;
}
.btn.green:hover, .btn:not(.ghost):not(.green):hover {
  background: var(--dash-btn); filter: brightness(1.04); box-shadow: 0 14px 28px -14px var(--green-glow);
}
.btn.ghost { border-width: 1.5px; font-weight: 700; }
.plan.hot .btn { --bg: transparent; background: var(--dash-btn); color: var(--dash-btn-text); }
.link-arrow { color: var(--green-deep); font-weight: 700; }

/* header: pill nav like the dashboard */
.site-header.scrolled { background: rgba(var(--forest-rgb), .92); color: #fff; border-bottom-color: rgba(255, 255, 255, .08); }
.site-header.scrolled .wordmark { color: #fff; }
.site-header.scrolled .brand img { filter: brightness(0) invert(1); }
.nav-menu > li > a, .nav-menu > li > button { font-weight: 600; opacity: .8; }
.nav-menu > li > a:hover, .nav-menu > li > button:hover, .nav-menu > li.open > button,
.site-header.scrolled .nav-menu > li > a:hover, .site-header.scrolled .nav-menu > li > button:hover {
  opacity: 1; background: rgba(255, 255, 255, .1);
}
.site-header:not(.on-dark):not(.scrolled) .nav-menu > li > a:hover,
.site-header:not(.on-dark):not(.scrolled) .nav-menu > li > button:hover { background: rgba(var(--ink-rgb), .06); }
.mega { border-radius: 18px; border: 0; box-shadow: 0 24px 60px -20px rgba(16, 24, 40, .35); background: #fff; }
.mega a:hover { background: var(--paper); }
.mega a .i { color: var(--green); }

/* hero: dark band with a rounded bottom edge, as on the dashboard */
.hero { overflow: hidden; }
.hero:not(:has(+ .marquee)) { border-radius: 0 0 clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px); }
.marquee { border-block: 0; border-radius: 0 0 clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px); }
.marquee-track li { font-family: var(--ff-body); font-weight: 600; letter-spacing: .08em; }
.hero-pill { border-radius: 999px; background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); }
.hero-pill .dot { background: var(--green); }

/* cards: white, rounded, soft shadow, no hard border */
.plan, .service, .card, .post {
  background: #fff; border: 1px solid #edf0f3; border-radius: var(--radius); box-shadow: var(--dash-shadow);
}
.plan:hover, .service:hover, .card:hover, .post:hover { border-color: #e3e8ec; box-shadow: 0 22px 44px -22px rgba(16, 24, 40, .28); }
.plan.hot, .service.feature { background: var(--forest); color: #fff; border-color: transparent; }
.icon-badge { background: color-mix(in srgb, var(--green) 14%, #fff); color: var(--green-deep); border-radius: 14px; }
.dark .icon-badge, .icon-badge.dark { background: rgba(255, 255, 255, .1); color: var(--accent-soft); }

/* sections: grey page, white bands, dark bands unchanged */
.section.white { background: #fff; }
.section.paper-2 { background: var(--paper-2); }
.section.dark { background: var(--forest); }
.section.dark + .section, .section + .section.dark { margin-top: 0; }

/* footer matches the dark band */
.site-footer { background: var(--forest); }
.site-footer a:hover { color: var(--accent-soft); }

/* forms on public pages */
input, select, textarea { font-family: var(--ff-body); }
:is(.field input, .field select, .field textarea, form input[type=text], form input[type=email], form input[type=tel], form select, form textarea) {
  border-radius: 12px; border: 1.5px solid #dfe5ea; background: #fff;
}
:is(.field input, .field select, .field textarea, form input, form select, form textarea):focus {
  outline: 0; border-color: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 18%, transparent);
}

/* numerals and mono labels: upright sans */
.step-num, .steps .num, [class*="step"] .n, .rail-num { font-style: normal; font-family: var(--ff-display); font-weight: 800; }

.hero h1 em { font-weight: 800; }
.page-hero { border-radius: 0 0 clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px); overflow: hidden; }
.eyebrow, .mono, .mega .mega-title, .plan .name, .breadcrumb, .crumbs { font-family: var(--ff-body); }

/* Hero visual: one simple dashboard-style card */
.hero-visual { display: flex; justify-content: center; align-items: center; }
.hero-visual .dash-card {
  width: 100%; max-width: 400px; padding: 24px; border-radius: 22px;
  background: #fff; color: var(--ink); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
}
.dc-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: #6b7782; }
.dc-live { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; background: #e9f7f0; color: #12915c; font-size: 12px; }
.dc-live .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #12915c; }
.dc-bal { margin-top: 14px; font-size: 38px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.dc-sub { margin-top: 4px; font-size: 13.5px; color: #8b96a0; }
.up { color: #12915c; font-weight: 700; }
.dc-spark { width: 100%; height: 64px; margin: 14px 0 8px; color: var(--green); }
.dc-list { list-style: none; margin: 0; padding: 0; }
.dc-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #eef1f4; font-size: 14px; }
.dc-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, var(--green) 14%, #fff); color: var(--green-deep); }
.dc-ico .i { width: 18px; height: 18px; }
.dc-name { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.dc-name b { font-weight: 700; }
.dc-name small { font-size: 12.5px; color: #8b96a0; }
.dc-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px solid #eef1f4; font-size: 12.5px; color: #8b96a0; }
.dc-foot .i { width: 15px; height: 15px; color: var(--green); }

/* small screens: keep the logo whole, slim the header button and the pill */
.brand { flex: none; }
.brand .wordmark, .brand img { flex: none; }
@media (max-width: 560px) {
  .nav-bar { gap: 10px; height: 68px; }
  .wordmark { font-size: 21px; }
  .nav-cta { margin-left: auto; gap: 6px; }
  .nav-cta .btn { min-height: 38px; padding: 0 14px; font-size: 13px; }
  .nav-cta .btn .i { display: none; }
  .hero-pill { padding: 6px 14px 6px 6px; font-size: 13px; margin-bottom: 22px; white-space: nowrap; }
  .hero-grid { padding-block: 40px 40px; }
}

/* sticky side panels must not float over the content once the layout stacks */
@media (max-width: 900px) {
  .faq-aside, .service-aside, .side-sticky, aside.sticky, [class*="-aside"] { position: static; top: auto; }
}
.faq-aside .card { background: var(--green-soft); box-shadow: none; border: 0; }

/* grouped cells keep the original shared container, not individual cards */
.values { background: #fff; border-color: #edf0f3; box-shadow: var(--dash-shadow); }
.value { background: transparent; box-shadow: none; border-radius: 0; }
@media (max-width: 900px) { .value { border-right: 0; border-bottom: 1px solid var(--line); } .value:last-child { border-bottom: 0; } }

/* Auth shell (registration complete): same centred card as the login page */
body.auth-body { background: var(--forest, #0b1d18); min-height: 100vh; }
.auth-simple { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 56px 16px 32px; position: relative; }
.auth-simple .auth-back { position: absolute; top: 24px; right: 24px; padding: 8px 20px; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; }
.auth-simple .auth-logo { margin-bottom: 28px; }
.auth-simple .auth-logo img { height: 38px; width: auto; filter: brightness(0) invert(1); }
.auth-simple .auth-main { width: 100%; max-width: 520px; display: block; padding: 0; background: none; min-height: 0; }
.auth-simple .auth-card { background: #fff; border-radius: 24px; padding: 36px 32px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.5); max-width: none; width: 100%; }
.auth-simple .auth-foot { text-align: center; color: rgba(255,255,255,.75); font-size: 12px; margin-top: 28px; }
.auth-simple .auth-foot a { color: inherit; }
.auth-simple .success-panel h1 { font-size: 26px; }
.auth-simple .success-panel .lede { font-size: 16px; }
.auth-simple .success-panel .btn.green { background: var(--dash-btn); color: var(--dash-btn-text); }
@media (max-width: 560px) { .auth-simple .auth-card { padding: 28px 20px; } .auth-simple .auth-back { top: 14px; right: 14px; } }
.auth-simple .url-check { flex-wrap: wrap; justify-content: center; text-align: center; }
@media (max-width: 560px) { .auth-simple { padding-top: 72px; } .auth-simple .auth-back { top: 16px; } }