/*
  Crestmont public pages (landing, sign in, sign up, contact, legal): the same restrained system as the member workspace.
  Loaded after site.css and luxe.css on the public layout only. It replaces the glow, metallic gold text, tilted card, floating call-outs
  and sparkle effect with flat navy surfaces, one quiet gold accent, a sans-serif type scale and compact tiles that look like the product.
  Delete the <link> in _Layout.cshtml to go back to the earlier look.
*/
:root {
  --pb-surface: #0E1420; --pb-raised: #121A29; --pb-line: #1E2738; --pb-line-strong: #2A3550; --pb-quiet: #98A2B5;
  --pb-radius: 12px;
}
body { background: var(--bg); background-attachment: scroll; }
#sparkles { opacity: 1; }

/* ---- type: one sans-serif scale; the serif stays on the wordmark ---- */
.hero h1, .h2, .feature h3, .steps h3, .more h4, .matrix th, .faq-list summary, .statement blockquote, .auth-panel h1, .auth-card h2, .contact-head h1, .contact-info h2, .page-title {
  font-family: var(--sans); font-style: normal; text-transform: none; letter-spacing: -.02em; filter: none; text-shadow: none;
  background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: #F1E7CE;
}
.hero h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.1; font-weight: 650; }
.hero h1 .italic, .final .h2 .italic, .h2 .italic { font-family: var(--sans); font-style: normal; color: var(--gold); -webkit-text-fill-color: var(--gold); background: none; filter: none; }
.h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 650; }
.feature h3 { font-size: clamp(22px, 2.6vw, 28px); font-weight: 650; }
.steps h3 { font-size: 22px; font-weight: 650; }
.more h4 { font-size: 15px; font-weight: 650; }
.matrix th { font-size: 14px; font-weight: 650; }
.faq-list summary { font: 600 16px var(--sans); }
.statement blockquote { font-size: clamp(26px, 4vw, 42px); font-weight: 600; line-height: 1.2; }
.eyebrow, .masthead { background: none; -webkit-text-fill-color: currentColor; color: var(--gold); letter-spacing: .2em; font-size: 11px; font-weight: 600; }
.masthead { color: var(--pb-quiet); }
.brand b { background: none; -webkit-text-fill-color: currentColor; color: var(--gold); }
.lead, .section-lead, .feature p.body, .statement p, .steps p, .more p, .faq-list details p { color: var(--pb-quiet); }

/* ---- bar, hairlines, panels: flat, quiet ---- */
.topbar { background: rgba(8,11,18,.94); border-bottom: 1px solid var(--pb-line); backdrop-filter: blur(8px); }
.topbar::after { display: none; }
.statement::before, .statement::after, .band::before, .band::after { display: none; }
.statement, .band, .trust { background: rgba(14,20,32,.82); border-block: 1px solid var(--pb-line); }
.hero-bg { background-image: none; background: linear-gradient(180deg, rgba(11,16,25,.55), rgba(8,11,18,0)); overflow: visible; }
.hero-bg { position: relative; overflow: hidden; }
.hero-bg::before { content: ""; display: block; position: absolute; right: -6%; top: 50%; width: min(640px, 72vw); aspect-ratio: 1; transform: translateY(-50%); background: url("/img/crest.png") center / contain no-repeat; opacity: .08; pointer-events: none; }
@media (max-width: 880px) { .hero-bg::before { opacity: .05; right: -20%; } }
.panel, .panel.gold { background: var(--pb-surface); border: 1px solid var(--pb-line); border-radius: var(--pb-radius); box-shadow: none; }
.panel::before { display: none; }

/* ---- buttons ---- */
.btn { border-radius: 8px; }
.btn-gold { background: var(--gold); color: #0A1428; text-shadow: none; box-shadow: none; border-color: var(--gold); font-weight: 650; letter-spacing: 0; }
.btn-gold:hover { background: #D4B16C; box-shadow: none; transform: none; filter: none; }
.btn-outline, .btn-ghost { background: transparent; } .btn-outline:hover, .btn-ghost:hover { box-shadow: none; background: rgba(198,161,91,.08); }

/* ---- hero: the product itself, not a tilted illustration ---- */
.hero { align-items: center; }
.proof span { color: var(--pb-quiet); }
.desk-preview { background: var(--pb-surface); border: 1px solid var(--pb-line); border-radius: 14px; padding: 14px; display: grid; gap: 12px; }
.dp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 12px; color: var(--pb-quiet); }
.dp-pill { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px; border-radius: 999px; border: 1px solid rgba(204,138,61,.45); color: var(--wait); font-weight: 600; font-size: 11px; }
.dp-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--wait); }
.dp-bar .tag { margin-left: auto; }
.dp-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dp-tile { background: var(--pb-raised); border: 1px solid var(--pb-line); border-radius: 10px; padding: 12px 12px 10px; }
.dp-tile b { display: block; font: 650 24px/1.1 var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; }
.dp-tile span { display: block; margin-top: 6px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--pb-quiet); }
.brief { transform: none; transition: none; animation: none; box-shadow: none; background: var(--pb-raised); border: 1px solid var(--pb-line); border-radius: 10px; padding: 16px; }
.brief:hover { transform: none; }
.brief::after, .callout, .brief-tiles { display: none; }
.brief-ticker { font-family: var(--sans); letter-spacing: 0; }
.brief-kicker { color: var(--pb-quiet); }
.brief .ma { filter: none; }
.bias { color: var(--pos); font-size: 11px; letter-spacing: .06em; font-weight: 700; }

/* ---- feature cards and mock panels ---- */
.mock, .la-card, .final { background: var(--pb-surface); border: 1px solid var(--pb-line); border-radius: var(--pb-radius); box-shadow: none; }
.la-card::before { display: none; }
.la-head b, .sa-state { font-family: var(--sans); letter-spacing: 0; }
.la-points li::before { box-shadow: none; }
.more { border-top: 1px solid var(--pb-line); }
.more > div { border-left: 1px solid var(--pb-line); }
.steps > div { border-top: 2px solid var(--gold-soft); }
.matrix { border-top: 1px solid var(--pb-line); } .matrix th, .matrix td { border-bottom-color: var(--pb-line); }
.faq-list { border-top: 1px solid var(--pb-line); } .faq-list details { border-bottom-color: var(--pb-line); }
.final { background: var(--pb-raised); border-top: 2px solid var(--gold-soft); }
.final-logo { filter: none; width: 120px; }
.trust-in b { font-family: var(--sans); letter-spacing: 0; color: var(--text); font-weight: 650; }

/* ---- sign in / sign up ---- */
.auth-panel .lockup { filter: none; }
.perk { background: var(--pb-surface); border: 1px solid var(--pb-line); border-radius: var(--pb-radius); transition: none; }
.perk:hover { border-color: var(--pb-line-strong); transform: none; }
.perk-icon { background: var(--pb-raised); border: 1px solid var(--pb-line-strong); box-shadow: none; border-radius: 10px; }
.auth-card { background: var(--pb-surface); border: 1px solid var(--pb-line); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.35); backdrop-filter: none; }
.auth-card::before { display: none; }
.card-crest { filter: none; }
.auth-tabs { background: var(--pb-raised); border: 1px solid var(--pb-line); border-radius: 10px; }
.auth-tabs a { letter-spacing: .08em; font-size: 11px; }
.auth-tabs a.on { background: var(--gold); color: #0A1428; box-shadow: none; }
.auth-card .field label, .plan-pick legend, .contact-form .field label, .contact-info .lbl { color: var(--pb-quiet); letter-spacing: .12em; }
.auth-card .field input:not([type=checkbox]), .contact-form .field input, .contact-form .field textarea { background-color: var(--bg); border: 1px solid var(--pb-line-strong); border-radius: 10px; }
.auth-card .field input:not([type=checkbox]):hover, .contact-form .field input:hover, .contact-form .field textarea:hover { border-color: #3A4868; }
.auth-card .field input:not([type=checkbox]):focus, .contact-form .field input:focus, .contact-form .field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(198,161,91,.16); background-color: var(--bg); }
.auth-card .btn-gold.btn-block { border-radius: 10px; letter-spacing: .04em; }
.auth-card .social { background: var(--pb-raised); border: 1px solid var(--pb-line-strong); border-radius: 10px; } .auth-card .social:hover { border-color: var(--gold); box-shadow: none; }
.plan-body { background: var(--bg); border: 1px solid var(--pb-line-strong); border-radius: 10px; }
.plan-card input:checked + .plan-body { background: var(--pb-raised); border-color: var(--gold); box-shadow: none; }
.auth-trust { border-top-color: var(--pb-line); }

/* ---- contact and legal ---- */
.contact-card { background: var(--pb-surface); border: 1px solid var(--pb-line); border-radius: 16px; box-shadow: none; }
.contact-info .ico { background: var(--pb-raised); border: 1px solid var(--pb-line-strong); }
.contact-thanks .tick { background: var(--gold); box-shadow: none; }

@media (max-width: 760px) { .dp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero h1 { font-size: clamp(32px, 9vw, 42px); } }
@media (prefers-reduced-motion: reduce) { .hero > div:first-child > * { animation: none; } }

/* =================== richer landing =================== */
/* hero: a window with its own menu, plus a sample alert */
.hero-bg { background: radial-gradient(900px 420px at 78% 8%, rgba(198,161,91,.10), transparent 70%), radial-gradient(700px 400px at 8% 90%, rgba(40,70,130,.14), transparent 70%), linear-gradient(180deg, rgba(11,16,25,.5), rgba(8,11,18,0)); }
.dp-wrap { position: relative; }
.desk-preview { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.dp-side { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; background: #0A0F1A; border-right: 1px solid var(--pb-line); }
.dp-side span { padding: 7px 10px; border-radius: 8px; font-size: 11.5px; color: var(--pb-quiet); white-space: nowrap; }
.dp-side span.on { background: #121A29; color: var(--gold); box-shadow: inset 2px 0 0 var(--gold); }
.dp-main { padding: 14px; display: grid; gap: 12px; min-width: 0; }
.dp-toast { position: absolute; left: -26px; bottom: 28px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--pb-raised); border: 1px solid var(--pb-line-strong); border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.5); }
.dp-toast i { width: 8px; height: 8px; border-radius: 50%; background: var(--wait); }
.dp-toast b { display: block; font-size: 12.5px; color: var(--text); } .dp-toast span { display: block; font-size: 11px; color: var(--pb-quiet); }
@media (max-width: 1100px) { .dp-toast { left: 12px; } }
@media (max-width: 760px) { .desk-preview { grid-template-columns: minmax(0, 1fr); } .dp-side { display: none; } .dp-toast { display: none; } }

/* inside the platform: tabs and sample screens */
.lp-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 34px 0 22px; padding: 5px; width: fit-content; max-width: 100%; border: 1px solid var(--pb-line); border-radius: 12px; background: var(--pb-surface); }
.lp-tabs button { background: transparent; border: 0; border-radius: 8px; padding: 10px 18px; color: var(--pb-quiet); font: 600 13px var(--sans); cursor: pointer; }
.lp-tabs button:hover { color: var(--text); } .lp-tabs button.on { background: var(--gold); color: #0A1428; }
.lp-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.lp-panel[hidden] { display: none; }
.lp-copy h3 { font: 650 clamp(22px, 2.6vw, 28px)/1.25 var(--sans); letter-spacing: -.01em; color: #F1E7CE; margin: 0 0 14px; } .lp-copy p { color: var(--pb-quiet); line-height: 1.8; margin: 0; max-width: 440px; }
.lp-shot { background: var(--pb-surface); border: 1px solid var(--pb-line); border-radius: 14px; padding: 18px; min-width: 0; }
@media (max-width: 900px) { .lp-panel { grid-template-columns: minmax(0, 1fr); } }
.pp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } @media (max-width: 760px) { .pp-grid { grid-template-columns: minmax(0, 1fr); } }
.pp-card { background: var(--pb-raised); border: 1px solid var(--pb-line); border-radius: 12px; padding: 14px; display: grid; gap: 10px; min-width: 0; }
.pp-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pp-top > div { min-width: 0; flex: 1; } .pp-top b, .st-head b { display: block; font-size: 13px; color: var(--text); } .pp-top small, .st-head small { display: block; font-size: 11px; color: var(--pb-quiet); }
.pp-top b { white-space: nowrap; }
.pp-badge { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #172036; border: 1px solid var(--pb-line-strong); color: var(--gold); font-weight: 700; }
.pp-px { display: flex; align-items: baseline; gap: 8px; } .pp-px b { font-size: 22px; font-variant-numeric: tabular-nums; } .pp-px .pos { color: var(--pos); } .pp-px .neg { color: var(--neg); font-weight: 600; } .pp-px span { font-size: 12.5px; font-weight: 600; }
.pp-card svg { width: 100%; height: 34px; display: block; }
.pp-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--pb-quiet); border-top: 1px solid var(--pb-line); padding-top: 10px; } .pp-foot b { color: var(--text); font-variant-numeric: tabular-nums; }
.st-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--pb-line); } .st-head > div { flex: 1; min-width: 0; }
.st-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding-top: 14px; } @media (max-width: 640px) { .st-cols { grid-template-columns: minmax(0, 1fr); } }
.st-levels { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .st-levels li { display: flex; justify-content: space-between; padding: 9px 12px; border-radius: 8px; background: var(--pb-raised); font-size: 12.5px; color: var(--pb-quiet); } .st-levels b { font-variant-numeric: tabular-nums; color: var(--text); }
.st-levels .t b { color: var(--pos); } .st-levels .e b { color: var(--gold); } .st-levels .s b { color: var(--neg); }
.mtf { width: 100%; border-collapse: collapse; font-size: 13px; } .mtf th { text-align: left; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--pb-quiet); font-weight: 600; padding: 0 8px 10px; } .mtf td { padding: 10px 8px; border-top: 1px solid var(--pb-line); color: var(--text2); } .mtf .pos { color: var(--pos); font-weight: 600; }
.al-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .al-list li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; background: var(--pb-raised); border: 1px solid var(--pb-line); } .al-list i { flex: none; width: 9px; height: 9px; border-radius: 50%; } .al-list b { display: block; font-size: 13px; color: var(--text); } .al-list small { color: var(--pb-quiet); font-size: 11.5px; }
.al-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .al-chips span { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--pb-line-strong); color: var(--pb-quiet); font-size: 11.5px; } .al-chips .on { border-color: rgba(198,161,91,.5); color: var(--gold); }

/* features as cards with icons */
.more { gap: 16px; border-top: 0; padding-top: 0; margin-top: 72px; }
.more > .fc { padding: 22px; border: 1px solid var(--pb-line); border-left: 1px solid var(--pb-line); border-radius: var(--pb-radius); background: var(--pb-surface); }
.more > .fc:first-child { padding: 22px; border: 1px solid var(--pb-line); }
.fc-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--pb-raised); border: 1px solid var(--pb-line-strong); margin-bottom: 14px; }
.fc-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.more h4 { font-size: 15px; color: var(--text); }

/* pricing cards */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; } @media (max-width: 720px) { .plans { grid-template-columns: minmax(0, 1fr); } }
.plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px; background: var(--pb-surface); border: 1px solid var(--pb-line); border-radius: 14px; }
.plan-hl { background: var(--pb-raised); border-color: rgba(198,161,91,.55); }
.plan-flag { position: absolute; top: -11px; left: 22px; margin: 0; padding: 3px 10px; border-radius: 999px; background: var(--gold); color: #0A1428; font: 700 10px var(--sans); letter-spacing: .12em; }
.plan-name { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--pb-quiet); font-weight: 600; }
.plan-price { margin: 0; } .plan-price b { font: 650 34px/1.1 var(--sans); color: #F1E7CE; }
.plan-note { margin: 0; color: var(--pb-quiet); font-size: 13.5px; }
.plan ul { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; gap: 9px; flex: 1; align-content: start; } .plan li { padding-left: 24px; position: relative; font-size: 13.5px; color: var(--text); }
.plan li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 10px; height: 5px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); }
.matrix { margin-top: 48px; }