/* Case study + password-gate pages — Home theme parity (Geist, tokens, slim chrome) */
:root {
  --pr-bg: #09090b;
  --pr-ink: #e6e6e6;
  --pr-muted: #a1a1aa;
  --pr-soft: #71717a;
  --pr-line: #27272a;
  --pr-panel: #141416;
  --pr-accent: #60a5fa;
  --pr-nav: rgba(230, 230, 230, 0.88);
}

html.is-light,
html[data-theme="light"] {
  --pr-bg: #ffffff;
  --pr-ink: #111827;
  --pr-muted: #6b7280;
  --pr-soft: #9ca3af;
  --pr-line: #e5e7eb;
  --pr-panel: #f8fafc;
  --pr-accent: #1d4ed8;
  --pr-nav: rgba(17, 24, 39, 0.82);
}

/* Beat Webflow .body { background:#fff; color:#141414 } — ungated for FOUC */
html,
html body,
html body.body,
body.body {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--pr-bg) !important;
  color: var(--pr-ink) !important;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Ungated: kill white/pastel case shells before JS adds .pr-pc-ready */
.hero-stack,
section.hero-stack,
.flex_idea1,
.problem_flex,
.solution_flex,
.role_contain,
.role_down,
.div-block-196,
.w-layout-hflex.flex_idea1,
.w-layout-vflex.problem_flex,
.w-layout-vflex.solution_flex,
.w-layout-vflex.role_down {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--pr-ink) !important;
}

.head,
.context_head,
.context_desc,
.Context_Head,
.Context_Desc,
.Head,
.heading-8,
.Heading-8,
.Number,
.number {
  color: var(--pr-ink) !important;
}

/* Soft Home-like atmosphere */
html body.body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--pr-ink) 28%, transparent) 1px,
    transparent 1.5px
  );
  background-size: 18px 18px;
}
html.is-light body.body::before,
html[data-theme="light"] body.body::before {
  opacity: 0.24;
}

body.pr-pc-ready > *:not(.pr-pc-nav) {
  position: relative;
  z-index: 1;
}

/* Hide legacy Site Navigation + Site Footer */
body.pr-pc-ready .navigation,
body.pr-pc-ready section.navigation,
body.pr-pc-ready #site-nav,
body.pr-pc-ready .Footer-Subscribe,
body.pr-pc-ready section.Footer-Subscribe,
body.pr-pc-ready .footer-subscribe,
body.pr-pc-ready .Footer.Subscribe,
body.pr-pc-ready .footer-name,
body.pr-pc-ready [class*="footer-name"],
body.pr-pc-ready [class*="Footer Name"] {
  display: none !important;
}

/* Nav: match Home uppercase / tracking */
body.pr-pc-ready .pr-pc-nav {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  padding: 22px 28px;
  border-bottom-color: color-mix(in srgb, var(--pr-line) 80%, transparent);
  background: color-mix(in srgb, var(--pr-bg) 90%, transparent);
}
body.pr-pc-ready .pr-pc-links {
  gap: 20px;
}
body.pr-pc-ready .pr-pc-links a {
  font-size: 11px;
  letter-spacing: 0.14em;
  opacity: 0.72;
}
body.pr-pc-ready .pr-pc-links a.is-active {
  opacity: 1;
  color: var(--pr-ink);
}
body.pr-pc-ready .pr-pc-brand {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  opacity: 1;
}
body.pr-pc-ready .pr-pc-theme {
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- Password / utility gate (401 + protected case studies) ---------- */
body.pr-pc-ready .utility-page-wrap {
  background: var(--pr-bg) !important;
  color: var(--pr-ink) !important;
  min-height: 100vh !important;
  height: auto !important;
  max-height: none !important;
  padding: 4rem 1.5rem 6rem !important;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

body.pr-pc-ready .utility-page-content,
body.pr-pc-ready .utility-page-content.w-password-page,
body.pr-pc-ready .utility-page-content.w-form {
  width: min(420px, 100%) !important;
  margin: 0 auto !important;
  padding: 28px 24px 24px !important;
  border-radius: 16px !important;
  border: 1px solid var(--pr-line) !important;
  background: var(--pr-panel) !important;
  color: var(--pr-ink) !important;
  box-shadow: none !important;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

body.pr-pc-ready .utility-eyebrow {
  color: var(--pr-accent) !important;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  letter-spacing: 0.14em !important;
}

body.pr-pc-ready .utility-title,
body.pr-pc-ready h1.utility-title {
  color: var(--pr-ink) !important;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
}

body.pr-pc-ready .utility-lead {
  color: var(--pr-muted) !important;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

body.pr-pc-ready .utility-label,
body.pr-pc-ready label.utility-label {
  color: var(--pr-ink) !important;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

body.pr-pc-ready .utility-field,
body.pr-pc-ready input.utility-field,
body.pr-pc-ready .w-password-page.w-input {
  color: var(--pr-ink) !important;
  background: color-mix(in srgb, var(--pr-bg) 70%, transparent) !important;
  border: 1px solid var(--pr-line) !important;
  border-radius: 10px !important;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
body.pr-pc-ready .utility-field::placeholder,
body.pr-pc-ready input.utility-field::placeholder {
  color: var(--pr-soft) !important;
}
body.pr-pc-ready .utility-field:focus,
body.pr-pc-ready input.utility-field:focus {
  border-color: var(--pr-accent) !important;
  outline: none !important;
}

body.pr-pc-ready .utility-cta,
body.pr-pc-ready input.utility-cta,
body.pr-pc-ready .w-password-page.w-button {
  background: var(--pr-accent) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 600 !important;
}
body.pr-pc-ready .utility-cta:hover,
body.pr-pc-ready input.utility-cta:hover {
  filter: brightness(1.08);
}

body.pr-pc-ready .utility-page-content a,
body.pr-pc-ready .w-password-page a {
  color: var(--pr-accent) !important;
}

body.pr-pc-ready .utility-error,
body.pr-pc-ready .w-password-page.w-form-fail {
  color: #f87171 !important;
  background: transparent !important;
}

/* ---------- Overview / case content shell ---------- */
body.pr-pc-ready .about-praga,
body.pr-pc-ready section.about-praga,
body.pr-pc-ready .section,
body.pr-pc-ready [class*="Section"],
body.pr-pc-ready .marquee-section {
  background: transparent !important;
  color: var(--pr-ink) !important;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

body.pr-pc-ready .about-praga > .w-container,
body.pr-pc-ready .about-praga .container-77,
body.pr-pc-ready .container-77,
body.pr-pc-ready .w-container {
  max-width: 1120px !important;
}

body.pr-pc-ready .about-eyebrow,
body.pr-pc-ready p.about-eyebrow {
  color: var(--pr-accent) !important;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

body.pr-pc-ready .about-heading-2-dark,
body.pr-pc-ready h1.about-heading-2-dark,
body.pr-pc-ready .about-heading-2,
body.pr-pc-ready .about-heading-2.black,
body.pr-pc-ready h2.about-heading-2,
body.pr-pc-ready h1,
body.pr-pc-ready h2,
body.pr-pc-ready h3,
body.pr-pc-ready h4,
body.pr-pc-ready .Context_Head,
body.pr-pc-ready .context_head,
body.pr-pc-ready .Head,
body.pr-pc-ready .head,
body.pr-pc-ready .Heading-8,
body.pr-pc-ready .heading-8,
body.pr-pc-ready .About-Heading-2-Dark,
body.pr-pc-ready .About-Section-Title,
body.pr-pc-ready .BLACK,
body.pr-pc-ready .Number,
body.pr-pc-ready .number {
  color: var(--pr-ink) !important;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

body.pr-pc-ready .hero_paragraph-dark,
body.pr-pc-ready .hero_paragraph-dark.smaller,
body.pr-pc-ready .head-desc,
body.pr-pc-ready .overview-role-item,
body.pr-pc-ready .Context_Desc,
body.pr-pc-ready .context_desc,
body.pr-pc-ready .paragraph,
body.pr-pc-ready .text-block,
body.pr-pc-ready .work-content-para,
body.pr-pc-ready .case-hero-lead,
body.pr-pc-ready .case-stat-label,
body.pr-pc-ready .content-para,
body.pr-pc-ready p,
body.pr-pc-ready li {
  color: var(--pr-muted) !important;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* Section titles inside cards stay ink (not muted) */
body.pr-pc-ready h3.head,
body.pr-pc-ready h3.context_head,
body.pr-pc-ready h4.context_desc.lead,
body.pr-pc-ready .head,
body.pr-pc-ready .context_head {
  color: var(--pr-ink) !important;
}

body.pr-pc-ready .hero_paragraph-dark strong,
body.pr-pc-ready .head-desc strong,
body.pr-pc-ready strong {
  color: var(--pr-ink) !important;
}

body.pr-pc-ready .overview-cta-wrap {
  background: var(--pr-panel) !important;
  border: 1px solid var(--pr-line) !important;
  color: var(--pr-ink) !important;
}

body.pr-pc-ready .overview-cta-button,
body.pr-pc-ready a.overview-cta-button {
  color: #fff !important;
  background: var(--pr-accent) !important;
  border-radius: 999px !important;
  font-family: Geist, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

body.pr-pc-ready .overview-more-link,
body.pr-pc-ready a.overview-more-link {
  color: var(--pr-ink) !important;
  border-color: var(--pr-line) !important;
  background: transparent !important;
}
body.pr-pc-ready .overview-more-link:hover,
body.pr-pc-ready a.overview-more-link:hover {
  background: var(--pr-panel) !important;
  border-color: var(--pr-accent) !important;
}

body.pr-pc-ready .project-card-tag,
body.pr-pc-ready .overview-tag-wrap,
body.pr-pc-ready .overview-tag-wrap * {
  background: transparent !important;
  color: var(--pr-muted) !important;
  border-color: var(--pr-line) !important;
}

body.pr-pc-ready .overview-cta-lock,
body.pr-pc-ready [class*="Password"] {
  color: var(--pr-soft) !important;
}

/*
 * Root dark-mode contrast bug (same class as About experience cards):
 * Webflow pastel / #fff / #f6f9fc shells + forced --pr-ink light gray = illegible.
 * Flatten to transparent / panel tokens; keep theme ink/muted in both modes.
 */
body.pr-pc-ready .hero-stack,
body.pr-pc-ready section.hero-stack,
body.pr-pc-ready .flex_idea1,
body.pr-pc-ready .w-layout-hflex.flex_idea1,
body.pr-pc-ready .problem_flex,
body.pr-pc-ready .w-layout-vflex.problem_flex,
body.pr-pc-ready .solution_flex,
body.pr-pc-ready .w-layout-vflex.solution_flex,
body.pr-pc-ready .role_contain,
body.pr-pc-ready .role_down,
body.pr-pc-ready .w-layout-vflex.role_down,
body.pr-pc-ready .div-block-196,
body.pr-pc-ready [class*="card"],
body.pr-pc-ready [class*="Card"],
body.pr-pc-ready .w-layout-blockcontainer,
body.pr-pc-ready .w-layout-hflex,
body.pr-pc-ready .w-layout-vflex {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: var(--pr-ink) !important;
}

/* Soft panel rows instead of pastel fills */
body.pr-pc-ready .problem_flex,
body.pr-pc-ready .solution_flex,
body.pr-pc-ready .role_contain,
body.pr-pc-ready .flex_idea1,
body.pr-pc-ready .role_down,
body.pr-pc-ready .div-block-196,
body.pr-pc-ready .faq-question,
body.pr-pc-ready .faq-answer,
body.pr-pc-ready [class*="faq-"],
body.pr-pc-ready .content-para.tag.center {
  border: 1px solid color-mix(in srgb, var(--pr-line) 90%, transparent) !important;
  border-radius: 12px !important;
  padding: 20px 22px !important;
  background: color-mix(in srgb, var(--pr-panel) 55%, transparent) !important;
  color: var(--pr-ink) !important;
}
body.pr-pc-ready .faq-question,
body.pr-pc-ready .faq-answer,
body.pr-pc-ready [class*="faq-"] * {
  color: var(--pr-ink) !important;
  background: transparent !important;
}
body.pr-pc-ready .faq-question {
  background: color-mix(in srgb, var(--pr-panel) 55%, transparent) !important;
}
body.pr-pc-ready .content-para.tag.center {
  color: var(--pr-muted) !important;
}

body.pr-pc-ready .hero-stack,
body.pr-pc-ready section.hero-stack {
  border: 0 !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
}

/* Catch nested light fills that Webflow applies via combo classes */
body.pr-pc-ready .hero-stack [style*="background"],
body.pr-pc-ready .hero-stack [class*="flex"],
body.pr-pc-ready .hero-stack [class*="contain"],
body.pr-pc-ready .hero-stack [class*="block"] {
  color: inherit;
}

body.pr-pc-ready .hero-stack .context_desc,
body.pr-pc-ready .hero-stack .Context_Desc,
body.pr-pc-ready .hero-stack h4.context_desc {
  color: var(--pr-muted) !important;
}
body.pr-pc-ready .hero-stack .head,
body.pr-pc-ready .hero-stack .context_head,
body.pr-pc-ready .hero-stack .Context_Head,
body.pr-pc-ready .hero-stack h3.head,
body.pr-pc-ready .hero-stack h3.context_head {
  color: var(--pr-ink) !important;
}

/* Keep product screenshots readable; only flatten card chrome around them */
body.pr-pc-ready .hero-stack img,
body.pr-pc-ready .hero-stack .w-lightbox,
body.pr-pc-ready .hero-stack [class*="image"] {
  background: transparent !important;
}

body.pr-pc-ready a:not(.pr-pc-links a):not(.pr-pc-brand):not(.pr-site-footer a):not(.pr-site-footer-1 a):not(.overview-cta-button) {
  color: var(--pr-accent);
}

/* Footer: no MESSAGE ME CTA; force token colors in both themes */
body.pr-pc-ready .pr-site-footer__eyebrow,
body.pr-pc-ready .pr-site-footer__cta,
body.pr-pc-ready .pr-site-footer__hint {
  display: none !important;
}

/* TOC navigator on long case studies */
body.pr-pc-ready .navigator,
body.pr-pc-ready .navigator .link-block {
  color: var(--pr-muted) !important;
  border-color: var(--pr-line) !important;
  background: transparent !important;
}
body.pr-pc-ready .navigator .link-block:hover,
body.pr-pc-ready .navigator .link-block.toc-active {
  color: var(--pr-ink) !important;
  border-left-color: var(--pr-accent) !important;
}

@media (max-width: 767px) {
  body.pr-pc-ready .pr-pc-nav {
    padding: 18px 14px;
    letter-spacing: 0.1em;
  }
  body.pr-pc-ready .pr-pc-links {
    gap: 12px;
  }
  body.pr-pc-ready .utility-page-wrap {
    padding: 3rem 1rem 5rem !important;
  }
}