:root {
  --enterprise-ink: #172b3a;
  --enterprise-muted: #5e6f7d;
  --enterprise-brand: #087b70;
  --enterprise-brand-dark: #06665e;
  --enterprise-accent: #d9e9a3;
  --enterprise-surface: #f4f7f9;
  --enterprise-border: #dce5eb;
  --enterprise-hero-background: #123d39;
  --enterprise-radius: 12px;
  --enterprise-shadow: 0 12px 32px rgba(23, 43, 58, .07);
}

html {
  scroll-behavior: smooth;
}

body.grafieks-page {
  background: #f7f9fb;
  color: var(--enterprise-ink);
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  line-height: 1.65;
}

body.grafieks-page main {
  color: var(--enterprise-ink);
  font-family: "Manrope", sans-serif;
}

body.grafieks-page main p {
  color: var(--enterprise-muted);
  font-family: "Manrope", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
}

body.grafieks-page main :is(h1, h2, h3, h4, h5, h6) {
  /* color: var(--enterprise-ink); */
  font-family: "Manrope", sans-serif;
  letter-spacing: -.04em;
  line-height: 1.18;
}

body.grafieks-page main h1 {
  font-size: clamp(2.6rem, 4.5vw, 4.25rem);
  font-weight: 700;
}

body.grafieks-page main h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  font-weight: 650;
}

body.grafieks-page main h3 {
  font-size: clamp(1.12rem, 1.7vw, 1.4rem);
  font-weight: 650;
}

body.grafieks-page main :is(.section-heading, .section-head, .section__header, .platform-cards-heading) {
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}

body.grafieks-page main :is(.section-heading, .section-head, .section__header, .platform-cards-heading) h2 {
  max-width: 860px;
  margin-right: auto;
  margin-left: auto;
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  text-align: center;
}

body.grafieks-page main :is(.section-heading, .section-head, .section__header, .platform-cards-heading) > p,
body.grafieks-page main :is(.section-heading, .section-head, .section__header, .platform-cards-heading) > div > p {
  width: min(100%, 760px);
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
  font-size: 1.05rem;
  line-height: 1.7;
  text-align: center;
}

body.grafieks-page main .faq-list {
  width: 100%;
  margin-inline: auto;
}

body.grafieks-page main .faq-list summary {
  padding-inline: clamp(1rem, 3vw, 1.5rem);
  line-height: 1.5;
}

body.grafieks-page main .faq-list p {
  padding-right: clamp(1rem, 3vw, 1.5rem);
  padding-left: clamp(1rem, 3vw, 1.5rem);
}

body.grafieks-page main .bi-guides__panel details {
  border-bottom: 1px solid var(--enterprise-border);
}

body.grafieks-page main .bi-guides__panel details summary {
  padding: 1rem clamp(1rem, 3vw, 1.5rem);
  line-height: 1.5;
}

body.grafieks-page main .bi-guides__panel details p {
  padding: 0 clamp(1rem, 3vw, 1.5rem) 1rem;
}

body.grafieks-page main [class*="eyebrow"] {
  font-family: "DM Mono", monospace;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
}

body.grafieks-page main :is(.eyebrow, .solution-eyebrow, .section__eyebrow) {
  color: var(--enterprise-brand);
  letter-spacing: .1em;
}

body.grafieks-page main :is(.hero-copy, .lead) {
  font-family: "Manrope", sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.05rem);
  line-height: 1.7;
}

body.grafieks-page .button,
body.grafieks-page main .button {
  min-height: 46px;
  padding: .8rem 1.25rem;
  border: 1px solid var(--enterprise-brand);
  border-radius: 8px;
  background: var(--enterprise-brand);
  box-shadow: 0 4px 12px rgba(8, 123, 112, .14);
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

body.grafieks-page .button:hover,
body.grafieks-page main .button:hover {
  transform: translateY(-1px);
  border-color: var(--enterprise-brand-dark);
  background: var(--enterprise-brand-dark);
  box-shadow: 0 7px 18px rgba(8, 123, 112, .18);
  color: #fff;
}

body.grafieks-page :is(.button--outline, main .button--outline) {
  border-color: var(--enterprise-border);
  background: #fff;
  box-shadow: none;
  color: var(--enterprise-ink);
}

body.grafieks-page :is(.button--outline:hover, main .button--outline:hover) {
  border-color: var(--enterprise-brand);
  background: #f5faf9;
  color: var(--enterprise-brand-dark);
}

body.grafieks-page main > :is(.product-hero, .pricing-hero, .contact-hero, .about-hero, .hero--grafieks) {
  position: relative;
  overflow: hidden;
  border: 0;
  background: var(--enterprise-hero-background);
  color: #fff;
}

body.grafieks-page main > :is(.product-hero, .pricing-hero, .contact-hero, .about-hero, .hero--grafieks) :is(p, .hero-copy) {
  color: #d1d8d1;
}

body.grafieks-page main > :is(.product-hero, .pricing-hero, .contact-hero, .about-hero, .hero--grafieks) :is(h1, h2, h3, p) {
  color: #fff;
}


body.grafieks-page main > :is(.product-hero, .pricing-hero, .contact-hero, .about-hero, .hero--grafieks) :is(.eyebrow, .solution-eyebrow) {
  color: var(--enterprise-accent);
}

body.grafieks-page main > :is(.pricing-hero, .hero--grafieks) {
  text-align: center;
}

body.grafieks-page main > .hero--grafieks .hero-inner {
  max-width: 1200px;
}

body.grafieks-page main > .hero--grafieks h1 {
  max-width: 900px;
  margin: 0 auto 1.25rem;
}

body.grafieks-page main > .hero--grafieks .lead {
  max-width: 850px;
  margin: 0 auto;
}

body.grafieks-page main > .hero--grafieks .hero-actions {
  margin: 1.75rem 0 2.5rem;
}

body.grafieks-page main > .hero--grafieks .btn-light {
  border-color: var(--enterprise-accent);
  background: var(--enterprise-accent);
  color: var(--enterprise-ink);
}

body.grafieks-page main > .hero--grafieks .btn-light-outline {
  border-color: rgba(255, 255, 255, .5);
  background: transparent;
  color: #fff;
}

body.grafieks-page main > .hero--grafieks .hero-visual img {
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--enterprise-radius);
  box-shadow: 0 20px 50px rgba(3, 17, 26, .2);
}

body.grafieks-page main > .decision-home .ontology,
body.grafieks-page main > .decision-home .final-cta {
  background: var(--enterprise-hero-background);
}

body.grafieks-page main > .decision-home > .hero {
  background: var(--enterprise-hero-background);
}

body.grafieks-page main > .decision-home .ontology :is(h2, h3, p) {
  color: #fff;
}

body.grafieks-page main > .decision-home .ontology-card {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
}

body.grafieks-page main > .decision-home .ontology .section-head p,
body.grafieks-page main > .decision-home .final-cta p {
  color: #d2dfe5;
}

body.grafieks-page main > .decision-home .ontology .eyebrow,
body.grafieks-page main > .decision-home .final-cta .eyebrow {
  color: var(--enterprise-accent) !important;
}

body.grafieks-page main > .section,
body.grafieks-page main > section.section {
  scroll-margin-top: 96px;
}

body.grafieks-page main > section:not([class*="hero"]) {
  padding-block: clamp(2.5rem, 4vw, 4rem);
}

body.grafieks-page main.decision-home > .trust-strip {
  padding-block: 12px;
}

body.grafieks-page main :is(.price-card, .platform-card, .problem-card, .journey-card, .usecase, .ontology-card, .faq-list details, .faq-item, .value-grid article, .trust-grid1 article, .trust-grid article, .workflow-grid article, .card, .bi-guides__panel, .contact-hero #crmWebToEntityForm) {
  border-color: var(--enterprise-border);
  border-radius: var(--enterprise-radius);
  /* box-shadow: 0 8px 26px rgba(23, 43, 58, .055); */
}

body.grafieks-page main .agent-mode-grid {
  gap: 1rem;
  border: 0;
  background: transparent;
}

body.grafieks-page main .notebook-work-grid {
  gap: 1rem;
  border: 0;
  background: transparent;
}

body.grafieks-page main .agent-mode {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--enterprise-border);
  border-radius: var(--enterprise-radius);
  background: #fff;
}

body.grafieks-page main .notebook-work-grid article {
  min-width: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--enterprise-border);
  border-radius: var(--enterprise-radius);
  background: #fff;
}

body.grafieks-page main .agent-mode--featured {
  border-color: rgba(8, 123, 112, .24);
  background: #f2f8f7;
}

body.grafieks-page main .notebook-work-grid article:nth-child(2) {
  border-color: rgba(8, 123, 112, .24);
  background: #f2f8f7;
}

body.grafieks-page main .agent-mode > span {
  color: var(--enterprise-brand);
}

body.grafieks-page main .notebook-work-grid article > span {
  color: var(--enterprise-brand);
}

body.grafieks-page main .agent-mode h3 {
  margin: 1.25rem 0 .65rem;
}

body.grafieks-page main .notebook-work-grid h3 {
  margin: 1.25rem 0 .65rem;
}

body.grafieks-page main .agent-mode p {
  margin: 0;
}

body.grafieks-page main .notebook-work-grid p {
  margin: 0;
}

body.grafieks-page main .section.notebook-security {
  padding-block: clamp(2.5rem, 4vw, 4rem);
  background: var(--enterprise-surface);
}

body.grafieks-page main .notebook-security .notebook-security__layout {
  width: min(100%, 1200px);
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem);
}

body.grafieks-page main .notebook-security__layout > div:first-child {
  max-width: 470px;
}

body.grafieks-page main .notebook-security__layout h2 {
  max-width: 450px;
  margin-top: .75rem;
  font-size: clamp(2rem, 3.2vw, 2.8rem);
}

body.grafieks-page main .notebook-security__layout > div:first-child p {
  max-width: 440px;
  margin-top: 1rem;
}

body.grafieks-page main .security-stack {
  display: grid;
  gap: .75rem;
}

body.grafieks-page main .security-stack > div {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--enterprise-border);
  border-radius: var(--enterprise-radius);
  background: #fff;
}

body.grafieks-page main .security-stack b {
  flex: 0 0 auto;
  color: var(--enterprise-ink);
  font-weight: 700;
}

body.grafieks-page main .security-stack span {
  color: var(--enterprise-muted);
}

body.grafieks-page main :is(.price-card, .platform-card, .problem-card, .journey-card, .usecase, .value-grid article, .trust-grid1 article, .trust-grid article, .workflow-grid article, .faq-list details, .faq-item, .bi-guides__panel) {
  background-color: #fff;
}

body.grafieks-page main :is(.price-card, .platform-content, .problem-card, .journey-card, .usecase, .value-grid article, .trust-grid1 article, .trust-grid article, .faq-list details, .faq-item) :is(h2, h3, h4, p) {
  text-align: left;
}

body.grafieks-page main :is(.platform-card, .platform-art, .journey-media, .hero-image-placeholder, .workflow-media, .notebook-showcase__media) {
  overflow: hidden;
  border-radius: var(--enterprise-radius);
}

body.grafieks-page main :is(.platform-card, .journey-card, .price-card, .usecase, .value-grid article, .trust-grid1 article, .faq-list details, .faq-item) {
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

body.grafieks-page main :is(.platform-card, .journey-card, .price-card, .usecase, .value-grid article, .trust-grid1 article, .faq-list details, .faq-item):hover {
  transform: translateY(-2px);
  border-color: #c4d5dc;
  box-shadow: 0 14px 32px rgba(23, 43, 58, .09);
}

body.grafieks-page main :is(.platform-art, .journey-media, .workflow-media, .notebook-showcase__media) {
  background: #f1f5f7;
}

body.grafieks-page main .cta-section,
body.grafieks-page .site-footer {
  background: var(--enterprise-hero-background);
  color: #fff;
}

body.grafieks-page main .cta-section h2,
body.grafieks-page main .cta-section p {
  color: #fff;
}

body.grafieks-page main .cta-section p {
  max-width: 680px;
}

body.grafieks-page main .about-cta {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

body.grafieks-page main .about-cta h2 {
  max-width: 780px;
  margin: 0 auto 1rem;
}

body.grafieks-page main .about-cta p {
  margin: 0 auto 1.75rem;
}

body.grafieks-page main .contact-hero #crmWebToEntityForm .contact-form__heading h2 {
  color: var(--enterprise-ink);
}

body.grafieks-page main .contact-hero #crmWebToEntityForm .contact-form__heading p {
  color: var(--enterprise-muted);
}

body.grafieks-page .site-footer {
  border-top: 1px solid rgba(255, 255, 255, .1);
}

body.grafieks-page .site-footer :is(h4, p, a, .footer-bottom) {
  color: #d4e0e6;
}

body.grafieks-page .site-footer h4 {
  font-family: "Manrope", sans-serif;
  font-size: .85rem;
  font-weight: 700;
}

body.grafieks-page .site-footer a:hover {
  color: var(--enterprise-accent);
}

body.grafieks-page main :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 44px;
  border: 1px solid var(--enterprise-border);
  border-radius: 8px;
  background: #fff;
  color: var(--enterprise-ink);
  font: inherit;
}

body.grafieks-page main textarea {
  min-height: 120px;
}

body.grafieks-page main :is(input, select, textarea):focus {
  border-color: var(--enterprise-brand);
  outline: 3px solid rgba(8, 123, 112, .14);
}

body.grafieks-page main :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid rgba(8, 123, 112, .35);
  outline-offset: 3px;
}

body.grafieks-page main .bi-guides__tabs [role="tab"][aria-selected="true"] {
  border-radius: 8px;
  background: var(--enterprise-brand);
}

body.grafieks-page main .bi-guides__tabs [role="tab"]:hover,
body.grafieks-page main .bi-guides__tabs [role="tab"]:focus-visible {
  outline-color: var(--enterprise-brand);
}

@media (max-width: 680px) {
  body.grafieks-page main > section:not([class*="hero"]),
  body.grafieks-page main .section.notebook-security {
    padding-block: 3rem;
  }

  body.grafieks-page main .notebook-security .notebook-security__layout {
    grid-template-columns: 1fr;
  }

  body.grafieks-page main .security-stack > div {
    align-items: flex-start;
    flex-direction: column;
    gap: .2rem;
  }

  body.grafieks-page main .agent-mode-grid {
    grid-template-columns: 1fr;
  }

  body.grafieks-page main .notebook-work-grid {
    grid-template-columns: 1fr;
  }

  body.grafieks-page main h1 {
    font-size: clamp(2.25rem, 9vw, 3.25rem);
  }

  body.grafieks-page main h2 {
    font-size: clamp(1.75rem, 7vw, 2.3rem);
  }

  body.grafieks-page main p {
    font-size: .98rem;
  }

  body.grafieks-page .site-footer {
    gap: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.grafieks-page *,
  body.grafieks-page *::before,
  body.grafieks-page *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}