/*
 * SIMPLAI public design system
 * Müller-Brockmann-inspired 12-column grid and 8px baseline.
 * Brand colors remain owned by each existing page.
 */

:root {
  --mb-columns: 12;
  --mb-baseline: 8px;
  --mb-leading: 24px;
  --mb-gutter: 24px;
  --mb-max: 1296px;
  --mb-edge: 32px;
  --mb-rule: var(--border, var(--bor, rgba(148, 163, 184, .24)));
}

html {
  scroll-padding-top: 88px;
}

body {
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-numeric: tabular-nums;
}

a,
button,
input,
select,
textarea {
  outline-offset: 4px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--violet, var(--blue, #1A56DB));
}

/* Shared public pages ----------------------------------------------------- */

.container,
.container-sm {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--mb-edge);
}

.container {
  max-width: calc(var(--mb-max) + (2 * var(--mb-edge)));
  display: grid;
  grid-template-columns: repeat(var(--mb-columns), minmax(0, 1fr));
  column-gap: var(--mb-gutter);
}

.container > * {
  grid-column: 1 / -1;
  min-width: 0;
}

.container-sm {
  max-width: 824px;
}

.section {
  padding: 96px 0;
}

.section-sm {
  padding: 72px 0;
}

.grid-2,
.grid-3,
.grid-4 {
  gap: var(--mb-gutter);
}

.eyebrow,
.section-eyebrow,
.hero-chip {
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .11em;
}

.page-title,
.section-title,
.cta-title,
.feat-h {
  text-wrap: balance;
}

.page-title {
  font-size: 56px;
  line-height: 64px;
}

.section-title {
  font-size: 40px;
  line-height: 48px;
}

.lead,
.card-desc,
.page-hero p,
.cta-desc {
  line-height: var(--mb-leading);
}

.card,
.p-card,
.contact-card,
.faq-item3,
.blog-card,
.sec-card,
.feat-panel,
.mock-window,
.pc,
.roi-vis,
.roi-item {
  border-radius: 8px;
  box-shadow: none;
}

.card:hover,
.p-card:hover,
.blog-card:hover,
.pc:hover {
  transform: translateY(-2px);
}

.btn-primary,
.btn-outline,
.btn-ghost,
.pub-nav-login,
.pub-nav-btn,
.pbtn {
  min-height: 48px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
}

.pub-nav {
  height: 72px;
}

.pub-nav-inner {
  max-width: calc(var(--mb-max) + (2 * var(--mb-edge)));
  padding-inline: var(--mb-edge);
}

.pub-logo {
  margin-right: 48px;
}

.pub-nav-links {
  gap: 8px;
}

.pub-nav-link {
  position: relative;
  padding: 8px 4px;
  margin-inline: 8px;
  border-radius: 0;
}

.pub-nav-link:hover,
.pub-nav-link.current {
  background: transparent;
}

.pub-nav-link.current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -17px;
  height: 3px;
  background: var(--purple, var(--blue));
}

.pub-nav-drawer {
  inset-block-start: 72px;
}

.page-hero {
  padding: 96px 0 88px;
  text-align: left;
}

.page-hero::before {
  width: min(100%, var(--mb-max));
  height: 100%;
  background:
    linear-gradient(90deg, transparent 0 66.666%, rgba(255, 255, 255, .04) 66.666% 66.75%, transparent 66.75%),
    radial-gradient(ellipse at 28% 50%, rgba(26, 86, 219, .16) 0%, transparent 62%);
}

.page-hero-inner {
  width: 100%;
  max-width: calc(var(--mb-max) + (2 * var(--mb-edge)));
  padding-inline: var(--mb-edge);
  display: grid;
  grid-template-columns: repeat(var(--mb-columns), minmax(0, 1fr));
  column-gap: var(--mb-gutter);
  align-items: start;
}

.page-hero-inner > * {
  min-width: 0;
}

.page-hero .hero-chip {
  grid-column: 2 / 6;
  justify-self: start;
  margin-bottom: 24px;
}

.page-hero h1 {
  grid-column: 2 / 11;
  font-size: 64px;
  line-height: 72px;
  margin-bottom: 24px;
}

.page-hero p {
  grid-column: 2 / 8;
  max-width: none;
  margin: 0 0 32px;
}

.page-hero .hero-btns {
  grid-column: 2 / 9;
  justify-content: flex-start;
  margin-bottom: 40px;
}

.page-hero .hero-anchors {
  grid-column: 2 / -1;
  justify-content: flex-start;
}

.hero-anchor {
  border-radius: 4px;
}

.cta-section {
  padding: 96px 0;
  text-align: left;
}

.cta-inner {
  width: 100%;
  max-width: calc(var(--mb-max) + (2 * var(--mb-edge)));
  padding-inline: var(--mb-edge);
  display: grid;
  grid-template-columns: repeat(var(--mb-columns), minmax(0, 1fr));
  column-gap: var(--mb-gutter);
}

.cta-inner > * {
  grid-column: 2 / 9;
}

.cta-inner .cta-btns,
.cta-inner .cta-trust {
  justify-content: flex-start;
}

.pub-footer {
  padding: 72px 0 32px;
}

.pub-footer-inner {
  max-width: calc(var(--mb-max) + (2 * var(--mb-edge)));
  padding-inline: var(--mb-edge);
}

.pub-footer-grid {
  grid-template-columns: repeat(var(--mb-columns), minmax(0, 1fr));
  gap: var(--mb-gutter);
  margin-bottom: 56px;
}

.pub-footer-grid > :nth-child(1) { grid-column: 1 / 5; }
.pub-footer-grid > :nth-child(2) { grid-column: 5 / 7; }
.pub-footer-grid > :nth-child(3) { grid-column: 7 / 9; }
.pub-footer-grid > :nth-child(4) { grid-column: 9 / 11; }
.pub-footer-grid > :nth-child(5) { grid-column: 11 / 13; }

.pub-footer-col-title,
.footer-col-title {
  letter-spacing: .12em;
}

/* Landing page ----------------------------------------------------------- */

.navbar {
  height: 72px;
  padding-inline: max(24px, calc((100vw - var(--mb-max)) / 2));
}

.navbar .nav-center {
  gap: 8px;
}

.navbar .nav-center a {
  border-radius: 0;
  padding: 8px 4px;
  margin-inline: 6px;
}

.hero {
  min-height: auto;
  padding: 72px max(24px, calc((100vw - var(--mb-max)) / 2)) 64px;
  display: grid;
  grid-template-columns: repeat(var(--mb-columns), minmax(0, 1fr));
  column-gap: var(--mb-gutter);
  align-items: center;
}

.hero-left {
  grid-column: 1 / 7;
  max-width: none;
  padding: 80px 0;
}

.hero-right {
  grid-column: 7 / 13;
  max-width: none;
  padding-bottom: 0;
}

.hero-title {
  font-size: 56px;
  line-height: 64px;
  letter-spacing: -.045em;
  text-wrap: balance;
  margin-bottom: 24px;
}

.hero-subtitle {
  font-size: 16px;
  line-height: 24px;
  max-width: 560px;
  margin-bottom: 32px;
}

.badge {
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 24px;
}

.btn-primary,
.btn-secondary,
.btn-white,
.btn-ghost {
  min-height: 48px;
  border-radius: 8px;
}

.trust-band {
  padding: 16px 0;
}

.trust-item {
  min-height: 48px;
  padding-inline: 32px;
}

.stats-section,
.bilingual-section,
.cta-section,
.footer {
  padding-inline: max(24px, calc((100vw - var(--mb-max)) / 2));
}

.stats-section {
  padding-block: 96px;
  text-align: left;
}

.stats-title,
.stats-sub,
.stats-grid {
  max-width: var(--mb-max);
  margin-inline: auto;
}

.stats-title {
  font-size: 40px;
  line-height: 48px;
  margin-bottom: 8px;
}

.stats-sub {
  line-height: 24px;
  margin-bottom: 48px;
}

.stats-grid {
  grid-template-columns: repeat(var(--mb-columns), minmax(0, 1fr));
  gap: var(--mb-gutter);
}

.stat-item {
  grid-column: span 3;
  min-width: 0;
  padding: 24px 0 0;
  text-align: left;
  border-top: 1px solid rgba(255, 255, 255, .18);
}

.stat-number {
  font-size: 48px;
  line-height: 56px;
}

.section.section-center {
  text-align: left;
  padding-inline: max(24px, calc((100vw - var(--mb-max)) / 2));
}

.section-eyebrow {
  margin-bottom: 16px;
}

.section.section-center > .section-title,
.section.section-center > .section-sub,
.section.section-center > .section-eyebrow {
  margin-left: 0;
  margin-right: 0;
}

.section.section-center > .section-sub {
  max-width: 640px;
  margin-bottom: 64px;
}

.steps-row,
.features-grid,
.forwhom-grid,
.security-grid,
.bilingual-inner,
.footer-grid,
.footer-bottom {
  max-width: var(--mb-max);
}

.steps-row,
.features-grid,
.forwhom-grid,
.security-grid {
  grid-template-columns: repeat(var(--mb-columns), minmax(0, 1fr));
  gap: var(--mb-gutter);
}

.steps-row::before {
  display: none;
}

.step-card {
  grid-column: span 3;
  align-items: flex-start;
  min-width: 0;
  padding: 24px 0 0;
  text-align: left;
  border-top: 1px solid var(--mb-rule);
}

.step-num {
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
  border-radius: 8px;
  box-shadow: none;
  font-size: 20px;
}

.step-title,
.feat-title,
.fw-title,
.sec-title {
  line-height: 24px;
}

.step-desc,
.feat-desc,
.fw-desc,
.sec-desc {
  line-height: 24px;
}

.feat-card {
  grid-column: span 4;
  min-width: 0;
  padding: 32px;
  border-radius: 8px;
  box-shadow: none;
  text-align: left;
}

.feat-icon {
  border-radius: 8px;
  box-shadow: none;
}

.forwhom-grid .fw-card {
  grid-column: span 3;
  min-width: 0;
  border-radius: 8px;
  text-align: left;
}

.security-grid .sec-card {
  grid-column: span 4;
  min-width: 0;
  border-radius: 8px;
  box-shadow: none;
}

.bilingual-section {
  padding-block: 96px;
}

.bilingual-inner {
  grid-template-columns: repeat(var(--mb-columns), minmax(0, 1fr));
  gap: var(--mb-gutter);
}

.bil-left {
  grid-column: 1 / 6;
}

.bil-right {
  grid-column: 7 / 13;
  border-radius: 8px;
  padding: 40px;
}

.footer {
  padding-block: 72px 32px;
}

.footer-grid {
  grid-template-columns: repeat(var(--mb-columns), minmax(0, 1fr));
  gap: var(--mb-gutter);
}

.footer-grid > :nth-child(1) { grid-column: 1 / 6; }
.footer-grid > :nth-child(2) { grid-column: 7 / 9; }
.footer-grid > :nth-child(3) { grid-column: 9 / 11; }
.footer-grid > :nth-child(4) { grid-column: 11 / 13; }

.footer-logo,
.footer-col-title {
  margin-bottom: 16px;
}

/* Pricing page ----------------------------------------------------------- */

.pricing-hero {
  padding: 96px 0 88px;
  text-align: left;
}

.ph-inner2 {
  width: 100%;
  max-width: calc(var(--mb-max) + (2 * var(--mb-edge)));
  padding-inline: var(--mb-edge);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(var(--mb-columns), minmax(0, 1fr));
  column-gap: var(--mb-gutter);
}

.ph-inner2 > * {
  grid-column: 2 / 10;
  justify-self: start;
  min-width: 0;
}

.ph-inner2 .hp-reas {
  justify-content: flex-start;
}

.plans-grid {
  grid-template-columns: repeat(var(--mb-columns), minmax(0, 1fr));
  gap: var(--mb-gutter);
}

.plans-grid > .pc {
  grid-column: span 3;
  min-width: 0;
}

.roi-wrap {
  grid-template-columns: repeat(var(--mb-columns), minmax(0, 1fr));
  gap: var(--mb-gutter);
}

.roi-wrap > :first-child { grid-column: 1 / 7; }
.roi-wrap > :last-child { grid-column: 8 / 13; }

/* Responsive grid -------------------------------------------------------- */

@media (max-width: 1180px) {
  :root {
    --mb-edge: 24px;
  }

  .pub-logo {
    margin-right: 24px;
  }

  .hero-title {
    font-size: 48px;
    line-height: 56px;
  }

  .page-hero h1 {
    font-size: 56px;
    line-height: 64px;
  }

  .plans-grid > .pc {
    grid-column: span 6;
  }
}

@media (max-width: 900px) {
  :root {
    --mb-columns: 6;
  }

  .page-title,
  .section-title,
  .stats-title {
    font-size: 40px;
    line-height: 48px;
  }

  .pub-nav-link.current::after {
    display: none;
  }

  .page-hero,
  .pricing-hero {
    padding-block: 72px 64px;
  }

  .page-hero .hero-chip,
  .page-hero h1,
  .page-hero p,
  .page-hero .hero-btns,
  .page-hero .hero-anchors,
  .ph-inner2 > *,
  .cta-inner > * {
    grid-column: 1 / -1;
  }

  .page-hero h1 {
    font-size: 48px;
    line-height: 56px;
  }

  .hero {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding-top: 72px;
  }

  .hero-left,
  .hero-right {
    grid-column: 1 / -1;
  }

  .hero-left {
    padding: 56px 0 16px;
  }

  .hero-right {
    min-height: 480px;
  }

  .step-card,
  .feat-card,
  .forwhom-grid .fw-card,
  .security-grid .sec-card,
  .stat-item {
    grid-column: span 3;
  }

  .bil-left,
  .bil-right,
  .roi-wrap > :first-child,
  .roi-wrap > :last-child {
    grid-column: 1 / -1;
  }

  .pub-footer-grid,
  .footer-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .pub-footer-grid > :nth-child(1),
  .footer-grid > :nth-child(1) {
    grid-column: 1 / -1;
  }

  .pub-footer-grid > :nth-child(n+2),
  .footer-grid > :nth-child(n+2) {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  :root {
    --mb-columns: 4;
    --mb-gutter: 16px;
    --mb-edge: 20px;
  }

  .section,
  .section-sm,
  .stats-section,
  .bilingual-section,
  .cta-section {
    padding-block: 64px;
  }

  .page-title,
  .section-title,
  .stats-title,
  .page-hero h1,
  .hero-title {
    font-size: 32px;
    line-height: 40px;
  }

  .hero {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hero-left {
    padding-top: 40px;
  }

  .step-card,
  .feat-card,
  .forwhom-grid .fw-card,
  .security-grid .sec-card,
  .stat-item,
  .plans-grid > .pc {
    grid-column: 1 / -1;
  }

  .pub-footer-grid,
  .footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pub-footer-grid > :nth-child(n),
  .footer-grid > :nth-child(n) {
    grid-column: span 2;
  }

  .pub-footer-grid > :nth-child(1),
  .footer-grid > :nth-child(1) {
    grid-column: 1 / -1;
  }

  .bil-right {
    padding: 32px 24px;
  }

  .hero-cta,
  .cta-btns {
    align-items: stretch;
  }

  .hero-cta > a,
  .cta-btns > a {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .pub-footer-grid > :nth-child(n),
  .footer-grid > :nth-child(n) {
    grid-column: 1 / -1;
  }
}

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