/* ==========================================================================
   Mandit Global — Paper theme layer
   Loaded AFTER styles.css. Converts the prototype's dark-glass surfaces into
   the Mandit Timeline 'paper passport' language: warm near-white sheets,
   mandate navy ink (#0A3C82), verified green (#0A7E43), hairline rules and a
   faint blueprint grid. A few 'ink bands' deliberately stay dark so the page
   keeps a hierarchy instead of becoming uniformly flat.
   ========================================================================== */

/* ---------- 1. The blueprint sheet behind everything ---------- */
body {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(10, 60, 130, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 60, 130, 0.035) 1px, transparent 1px);
  background-size: 28px 28px;
  background-attachment: fixed;
}

body::after {
  opacity: 0.022;
  mix-blend-mode: multiply;
}

/* ---------- 2. Chrome that sits on paper ---------- */
.site-header.is-stuck {
  background: rgba(252, 252, 249, 0.86);
  backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: var(--border);
}

.site-header.is-stuck .brand { color: var(--text); }
.site-header.is-stuck .nav__link { color: var(--text-soft); }
.site-header.is-stuck .nav__link:hover,
.site-header.is-stuck .nav__link[aria-current="page"] { color: var(--brand); }

.topbar {
  background: linear-gradient(90deg, rgba(10, 60, 130, 0.06), rgba(124, 58, 237, 0.04) 50%, rgba(10, 126, 67, 0.05));
}

.topbar__slogan { color: var(--text-soft); }
.topbar__links a { color: var(--muted); }
.topbar__links a:hover { color: var(--brand); }

/* the dropdown panel is a sheet, not a void */
.mega {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--shadow-lg);
}

.nav.is-open .mega { background: rgba(255, 255, 255, 0.97); }

/* ---------- 3. Hero ---------- */
.hero__glow {
  background:
    radial-gradient(46% 60% at 18% 34%, rgba(10, 60, 130, 0.10), transparent 70%),
    radial-gradient(40% 55% at 82% 26%, rgba(124, 58, 237, 0.07), transparent 70%),
    radial-gradient(36% 50% at 60% 84%, rgba(10, 126, 67, 0.07), transparent 70%);
  filter: blur(10px);
}

.hero__grid-lines {
  background-image:
    linear-gradient(rgba(10, 60, 130, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 60, 130, 0.06) 1px, transparent 1px);
}

/* the cursor halo was a screen-blend glow; on paper it is a soft tint */
.cursor-glow {
  background: radial-gradient(circle, rgba(10, 60, 130, 0.07), transparent 62%);
  mix-blend-mode: multiply;
}

/* ---------- 4. Sheets that were glass ---------- */
.float-panel {
  background: #ffffff;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(10, 60, 130, 0.05);
}

.float-panel__glow {
  background: linear-gradient(140deg, rgba(10, 60, 130, 0.55), transparent 42%, rgba(10, 126, 67, 0.45));
}

.eyebrow {
  background: linear-gradient(180deg, #ffffff, #f7f7f1);
}

.card,
.svc-card,
.stat,
.step,
.faq__item,
.form-card,
.info-tile,
.post-card,
.tool-card,
.plan-card,
.auth-card,
.lp-card,
.lp-block,
.lp-check,
.it-panel,
.hist-card,
.auth-aside__card {
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(12, 32, 62, 0.04);
}

.svc-card {
  background:
    radial-gradient(110% 90% at 100% 0%, rgba(10, 60, 130, 0.055), transparent 60%),
    #ffffff;
}

.stat { background: linear-gradient(180deg, #ffffff, #f9f9f5); }

.step:hover,
.faq__item.is-open {
  background: linear-gradient(120deg, rgba(10, 60, 130, 0.06), rgba(255, 255, 255, 0.6));
  border-color: rgba(10, 60, 130, 0.4);
}

.mini-stat div { background: #f5f5f1; }
.signal-bar { background: rgba(10, 60, 130, 0.1); }
.viz__bar-track { background: rgba(10, 60, 130, 0.1); }
.quota__track { background: rgba(10, 60, 130, 0.1); }
.ts-bar-mini { background: rgba(10, 60, 130, 0.12); }
.lp-bar__track { background: rgba(10, 60, 130, 0.1); }
.lp-damage__bar { background: rgba(10, 60, 130, 0.1); }
.lp-flow { background: #f5f5f1; }
.pw-meter i { background: rgba(10, 60, 130, 0.14); }
.ts-mask { background: rgba(10, 60, 130, 0.16); }
.it-bar.is-locked i { background: rgba(10, 60, 130, 0.2); }
.lp-heat__cell { background: rgba(10, 60, 130, 0.05); border-color: rgba(10, 60, 130, 0.05); }
.lp-heat__cell.is-closed { background: rgba(10, 60, 130, 0.035); }

/* ---------- 5. Ink bands -> light paper bands ----------
   The Mandit Timeline reference has no dark surfaces at all, so every
   'ink band' here becomes a light sheet with a hairline rule. Navy and
   green stay as ink, never as a background fill. */

.site-footer {
  background: linear-gradient(180deg, #ffffff, #f7f7f1 55%, #f2f2ea);
  border-top-color: rgba(10, 60, 130, 0.28);
  color: var(--text);
}

.site-footer::before {
  background: radial-gradient(50% 50% at 50% 50%, rgba(10, 60, 130, 0.07), transparent 70%);
}

.site-footer .footer__col h4 { color: var(--brand); }
.site-footer .footer__col li,
.site-footer .footer__col a,
.site-footer .footer__col address,
.site-footer .footer__brand p { color: var(--text-soft); }
.site-footer .footer__col a:hover,
.site-footer .footer__legal a:hover { color: var(--brand); }
.site-footer .footer__bottom { color: var(--muted); border-top-color: rgba(10, 60, 130, 0.16); }
.site-footer .socials a { background: #ffffff; color: var(--brand); border-color: rgba(10, 60, 130, 0.22); }
.site-footer .socials a:hover { color: #ffffff; background: var(--grad-brand); border-color: transparent; }
.site-footer .newsletter {
  background: linear-gradient(130deg, rgba(10, 60, 130, 0.07), rgba(10, 126, 67, 0.06));
  border-color: rgba(10, 60, 130, 0.22);
}
.site-footer .newsletter h3 { color: var(--text); }
.site-footer .newsletter p { color: var(--text-soft); }
.site-footer .newsletter input {
  background: #ffffff;
  border-color: rgba(10, 60, 130, 0.3);
  color: var(--text);
}
.site-footer .newsletter input::placeholder { color: var(--muted); }

.cta-band {
  background:
    radial-gradient(80% 120% at 12% 0%, rgba(10, 60, 130, 0.08), transparent 60%),
    radial-gradient(70% 110% at 92% 100%, rgba(10, 126, 67, 0.09), transparent 60%),
    linear-gradient(150deg, #ffffff, #f6f6f0);
  border-color: rgba(10, 60, 130, 0.3);
  box-shadow: var(--shadow-md);
}

.cta-band::after {
  background-image:
    linear-gradient(rgba(10, 60, 130, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 60, 130, 0.05) 1px, transparent 1px);
}

.cta-band h2,
.cta-band h3,
.cta-band p,
.cta-band .lead { color: var(--text); }
.cta-band p { color: var(--text-soft); }
.cta-band .eyebrow { color: var(--brand); }

.engine__scene {
  background:
    radial-gradient(90% 120% at 50% -10%, rgba(10, 60, 130, 0.1), transparent 62%),
    radial-gradient(60% 90% at 92% 112%, rgba(10, 126, 67, 0.09), transparent 66%),
    linear-gradient(160deg, #ffffff, #f2f4f8);
  border-color: rgba(10, 60, 130, 0.28);
}

.engine__label {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(10, 60, 130, 0.28);
  color: var(--text-soft);
  box-shadow: var(--shadow-md);
}

.engine__label.is-active {
  background: #ffffff;
  border-color: rgba(10, 126, 67, 0.6);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(10, 126, 67, 0.25), 0 20px 44px -20px rgba(10, 60, 130, 0.4);
}

.badge-float {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(10, 60, 130, 0.2);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  color: var(--text);
}

.badge-float > svg {
  background: rgba(10, 60, 130, 0.05);
  border-color: rgba(10, 60, 130, 0.18);
}

.viz__tag {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(10, 60, 130, 0.2);
  box-shadow: var(--shadow-md);
  color: var(--text);
}

.to-top {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(10, 60, 130, 0.3);
  color: var(--brand);
  box-shadow: var(--shadow-md);
}

.card-visual {
  background: linear-gradient(140deg, #eef3fb 0%, #ffffff 55%, #eaf6ef 130%);
  border-color: rgba(10, 60, 130, 0.3);
}

.card-visual::after {
  background: radial-gradient(circle, rgba(10, 126, 67, 0.14), transparent 65%);
}

/* ---------- 6. Forms and controls ---------- */
.field input,
.field textarea,
.field select,
.fld__input,
.fld__select,
.pip-chat__input {
  background: #ffffff;
  color: var(--text);
  border-color: var(--border-strong);
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.fld__input:focus,
.fld__select:focus {
  border-color: rgba(10, 60, 130, 0.55);
  box-shadow: 0 0 0 3px rgba(10, 60, 130, 0.12);
}

.field select option,
.fld__select option,
.lp-select option {
  background: #ffffff;
  color: var(--text);
}

.form-status {
  border-color: rgba(10, 126, 67, 0.4);
  background: rgba(10, 126, 67, 0.08);
  color: #075f33;
}

.form-status.is-error {
  border-color: rgba(190, 18, 60, 0.4);
  background: rgba(190, 18, 60, 0.08);
  color: #9f1239;
}

/* ---------- 7. Charts, gates and score rings ---------- */
.viz {
  background: #ffffff;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(10, 60, 130, 0.05);
}

.viz::before {
  background-image:
    linear-gradient(rgba(10, 60, 130, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 60, 130, 0.05) 1px, transparent 1px);
}

.viz__stage { background: #f7f7f1; }

.viz__list .viz__tick {
  background: rgba(10, 126, 67, 0.1);
  border-color: rgba(10, 126, 67, 0.32);
  color: var(--green-ink);
}

.ts-company {
  background: linear-gradient(150deg, rgba(10, 60, 130, 0.06), rgba(124, 58, 237, 0.035) 55%, rgba(10, 126, 67, 0.05));
}

.ts-gate {
  border-color: rgba(124, 58, 237, 0.3);
  background: linear-gradient(120deg, rgba(124, 58, 237, 0.07), rgba(10, 126, 67, 0.04));
}

.ts-intent__score span { background: #ffffff; }

.ts-intent__score {
  background: conic-gradient(#0a7e43 calc(var(--s, 60) * 1%), rgba(10, 60, 130, 0.1) 0);
  color: var(--green-ink);
}

.ts-intent__score span { color: var(--green-ink); }

.it-roles li {
  border-left-color: rgba(10, 60, 130, 0.55);
  background: rgba(10, 60, 130, 0.03);
}

.it-upsell {
  border-color: rgba(124, 58, 237, 0.3);
  background: linear-gradient(150deg, rgba(124, 58, 237, 0.07), rgba(10, 60, 130, 0.035) 55%, rgba(10, 126, 67, 0.035));
}

.plan-now {
  background: linear-gradient(130deg, rgba(10, 60, 130, 0.06), rgba(10, 126, 67, 0.045));
}

.pay-method:has(input:checked) {
  border-color: rgba(10, 60, 130, 0.5);
  background: rgba(10, 60, 130, 0.06);
  color: var(--text);
}

/* ---------- 7b. Chart legibility on paper ----------
   The prototype drew its chart furniture for a near-black canvas: grid
   lines and ring tracks were translucent white, and the plot area relied
   on a dark panel behind it. On paper those strokes vanish, so the axes,
   tracks and bars are re-stated here in navy hairlines with enough
   contrast to actually read as a chart. */

/* Grid lines behind a plot were white-on-dark; on paper they need to be
   navy hairlines. */
.viz__grid line {
  stroke: rgba(10, 60, 130, 0.14);
  stroke-width: 1;
}

/* The ring track was rgba(255,255,255,.09) — invisible on a white card.
   Give it a visible navy rule so the progress arc has something to sit on. */
.viz__ring .viz__ring-track {
  stroke: rgba(10, 60, 130, 0.13);
}

/* The axis/line strokes keep their colour but gain weight and a soft
   halo so they read against the grid. */
.viz__line {
  stroke-width: 3;
  filter: drop-shadow(0 1px 2px rgba(10, 60, 130, 0.18));
}

.viz__dot {
  stroke: #ffffff;
  stroke-width: 2.5;
}

.viz__area {
  opacity: 0.16;
}

/* Bar tracks and the bars themselves. */
.viz__bar-track {
  background: rgba(10, 60, 130, 0.1);
  border: 1px solid rgba(10, 60, 130, 0.12);
}

.viz__bar-track i {
  background: var(--grad-brand);
}

/* The ring progress arc must resolve against the new navy track. */
.viz__ring .viz__ring-prog {
  stroke-width: 10;
  filter: drop-shadow(0 1px 3px rgba(10, 60, 130, 0.2));
}

/* Funnel rows and stage chips sit on a card; give them a visible edge. */
.viz__funnel-row {
  border-color: rgba(10, 60, 130, 0.16);
  background: linear-gradient(150deg, #ffffff, #f7f7f1);
}

.viz__funnel-row b {
  color: #0a3c82;
}

.viz__stages {
  border-top-color: rgba(10, 60, 130, 0.14);
}

.viz__stage {
  border-color: rgba(10, 60, 130, 0.16);
}

/* The "Live" pulse dot was a neon green glow; on paper it becomes a solid
   verified-green dot with a halo. */
.viz__live i {
  background: #0a7e43;
  box-shadow: 0 0 0 3px rgba(10, 126, 67, 0.18);
}

/* Chart labels that were white-on-dark. */
.viz__title,
.viz__bar-label b,
.viz__list b,
.viz__funnel-row span {
  color: var(--text);
}

.viz__live,
.viz__ring-label span,
.viz__stage span {
  color: var(--muted);
}

/* The floating tag sat on a dark pill; keep the pill but make it a white
   document card so it matches everything else. */
.viz__tag {
  background: #ffffff;
  border-color: rgba(10, 60, 130, 0.22);
  color: var(--text);
  box-shadow: 0 12px 28px -18px rgba(12, 32, 62, 0.45);
}

.viz__tag small {
  color: var(--muted);
}

/* Launchpad's own score/viz surfaces. */
.lp-score__ring-track {
  stroke: rgba(10, 60, 130, 0.13);
}

.lp-bar {
  background: rgba(10, 60, 130, 0.1);
  border-color: rgba(10, 60, 130, 0.14);
}

.lp-bar i {
  background: var(--grad-brand);
}

/* ---------- 7c. Dark chrome surfaces lifted to paper ----------
   These panels were drawn as near-black glass for the old dark canvas.
   On the paper theme they are read as white document cards instead. */

/* The floating hero badge. */
.badge-float {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--border-strong);
  box-shadow: 0 24px 60px -32px rgba(12, 32, 62, 0.5);
}

.badge-float b,
.badge-float span {
  color: var(--text);
}

/* The 3D engine's floating labels sit over a light scene. */
.engine__label {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(10, 60, 130, 0.22);
  color: var(--text);
}

.engine__label b {
  color: var(--text);
}

/* The mobile nav overlay. */
.nav.is-open {
  background: rgba(252, 252, 249, 0.98);
}

.nav.is-open .mega {
  background: #ffffff;
  border-color: var(--border);
}

/* Tool-page score dials and signal dots used white halos for a dark bg. */
.ts-intent__score {
  background: conic-gradient(var(--cyan) calc(var(--s, 60) * 1%), rgba(10, 60, 130, 0.12) 0);
}

.it-dot,
.lp-dot {
  box-shadow: 0 0 0 4px rgba(10, 60, 130, 0.07);
}

/* ---------- 8. Launchpad ---------- */
.lp-score {
  background:
    radial-gradient(900px 340px at 8% -20%, rgba(10, 60, 130, 0.07), transparent 60%),
    radial-gradient(700px 300px at 100% 120%, rgba(10, 126, 67, 0.05), transparent 60%),
    #ffffff;
}

.lp-viz {
  background:
    radial-gradient(700px 300px at 12% -10%, rgba(10, 60, 130, 0.07), transparent 62%),
    radial-gradient(600px 280px at 92% 118%, rgba(10, 126, 67, 0.05), transparent 62%),
    #ffffff;
  border-color: rgba(10, 60, 130, 0.2);
}

.lp-viz::after {
  background: linear-gradient(180deg, transparent, rgba(10, 126, 67, 0.10), transparent);
}

.lp-tabs { background: #f5f5f1; }
.lp-tag { background: rgba(10, 60, 130, 0.05); }
.lp-metric { background: #f7f7f1; }
.lp-preview { background: #ffffff; }
.lp-preview__chrome { background: #f7f7f1; }
.lp-preview__client { background: rgba(10, 60, 130, 0.04); color: var(--muted); }
.lp-preview__stage {
  background:
    linear-gradient(180deg, rgba(10, 60, 130, 0.03), rgba(10, 60, 130, 0.06)),
    repeating-linear-gradient(45deg, rgba(10, 60, 130, 0.03) 0 10px, transparent 10px 20px);
}
.lp-preview__viewport.is-dark { background: #101114; }
/* The dark badge sits on the light preview chrome, so it needs dark ink on a
   violet tint. The old dark-theme value (#cfd8ff) was invisible here. */
.lp-preview__badge--dark {
  color: #2b1a5e;
  border-color: rgba(124, 58, 237, 0.42);
  background: rgba(124, 58, 237, 0.16);
}
.lp-preview__viewport.is-dark .lp-preview__from,
.lp-preview__viewport.is-dark .lp-preview__badge { color: var(--text-soft); }
.lp-callout--info {
  border-color: rgba(10, 126, 67, 0.3);
  background: rgba(10, 126, 67, 0.06);
}
.lp-check__fix {
  border-left-color: rgba(10, 126, 67, 0.6);
  background: rgba(10, 126, 67, 0.05);
}
.lp-check__desc code {
  background: rgba(10, 60, 130, 0.07);
  color: #0a3c82;
}
.lp-word { background: #ffffff; }
.lp-switch__track { background: rgba(10, 60, 130, 0.14); }
.lp-chip[aria-pressed="true"] { background: #0a3c82; }
.lp-heat__cell { background: rgba(10, 60, 130, 0.05); }
.lp-preview__badge--w {
  color: var(--green-ink);
  border-color: rgba(10, 126, 67, 0.4);
  background: rgba(10, 126, 67, 0.08);
}
.lp-slot__when { color: var(--text); }
.lp-holiday__date { background: rgba(10, 60, 130, 0.07); color: var(--text); }
.lp-kv dd { color: var(--text); }

/* ---------- 9. Small ink parts ---------- */
.ts-company__logo {
  background: rgba(10, 60, 130, 0.05);
  border-color: rgba(10, 60, 130, 0.18);
  color: var(--brand);
}

.ts-item__logo {
  background: linear-gradient(140deg, rgba(10, 60, 130, 0.16), rgba(10, 126, 67, 0.12));
  color: var(--text);
}

.ts-tag--core {
  border-color: rgba(10, 126, 67, 0.4);
  background: rgba(10, 126, 67, 0.08);
  color: #075f33;
}

.plan-badge--scale {
  border-color: rgba(10, 126, 67, 0.45);
  background: rgba(10, 126, 67, 0.09);
  color: #075f33;
}

.ts-item.is-locked .ts-item__logo { background: rgba(10, 60, 130, 0.06); }

.info-tile__icon {
  background: linear-gradient(150deg, rgba(10, 60, 130, 0.1), rgba(10, 126, 67, 0.06));
  color: var(--green-ink);
}

.mega__icon {
  background: linear-gradient(160deg, rgba(10, 60, 130, 0.12), rgba(10, 126, 67, 0.06));
  color: var(--green-ink);
}

.mock__row { background: #f7f7f1; }
.mock__lines i { background: rgba(10, 60, 130, 0.12); }
.mock__lines i:nth-child(2) { background: rgba(10, 60, 130, 0.08); }
.mock__bar i { background: rgba(10, 60, 130, 0.18); }

.media-frame {
  background: linear-gradient(160deg, rgba(10, 60, 130, 0.07), rgba(10, 126, 67, 0.03));
}

.post-card__media {
  background:
    linear-gradient(rgba(10, 60, 130, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 60, 130, 0.07) 1px, transparent 1px),
    linear-gradient(140deg, #f4f7fc, #eaf0f9);
  border-color: rgba(10, 60, 130, 0.22);
}
.post-card__media .art { color: var(--brand); }

.marquee { background: linear-gradient(90deg, #f7f7f1, #ffffff, #f7f7f1); }
.marquee__item { color: var(--text-soft); }
.marquee__item:hover { color: var(--brand); }

.timeline::before {
  background: linear-gradient(180deg, var(--brand), rgba(10, 126, 67, 0.35), transparent);
}

/* ---------- 10. Contrast guards on the old dark-glass chips ---------- */
.pill { color: var(--text-soft); }
.pill:hover { color: var(--text); }
.pill.is-active { color: #ffffff; }

.lp-tab { color: var(--text-soft); }
.lp-tab:hover { color: var(--text); }
.lp-tab.is-active { color: #ffffff; }
.lp-chip { color: var(--text-soft); }
.lp-chip:hover { color: var(--text); }
.lp-chip.is-active { color: #ffffff; }

.btn--ghost { color: var(--text); }
.btn--ghost:hover {
  background: rgba(10, 60, 130, 0.05);
  border-color: rgba(10, 60, 130, 0.35);
}

.text-link { color: var(--brand); }
.text-link:hover { color: var(--green-ink); }

.brand { color: var(--text); }
.nav__link { color: var(--text-soft); }
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--brand); background: rgba(10, 60, 130, 0.05); }

.footer__col a:hover,
.footer__legal a:hover { color: #7ecaa3; }
.socials a:hover { color: #ffffff; }

.info-tile a,
.info-tile p { color: var(--text-soft); }

.faq__q { color: var(--text); }
.signal-val { color: var(--text); }
.mega__title { color: var(--text); }
.viz__title { color: var(--text); }
.viz__bar-label b,
.viz__list b,
.viz__funnel-row span { color: var(--text); }

strong { color: var(--text); }
h1, h2, h3, h4, h5 { color: var(--text); }

.grad-text,
.grad-brand-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

::selection { background: rgba(10, 60, 130, 0.16); color: #0a3c82; }

::-webkit-scrollbar-track { background: #f0f0ea; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c7d4e8, #a7bce6);
  border: 3px solid #f0f0ea;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #a7bce6, #8fa8e8); }

@media print {
  body { background: #fff; }
}