/* Hallmark · brand: Complize.IDN · selected prototype sections · v2.0.0 */
/* Hallmark · selected layout preserves the original hero, client logos, and closing CTA. */
:root {
  --prototype-paper: #f7f5f0;
  --prototype-dark: #08192b;
  --prototype-ink: #142d4e;
  --prototype-white: #fffefa;
  --prototype-teal: #176d6a;
  --prototype-line: #c4d3d1;
  --prototype-soft: #e6eeeb;
}

.services-section { background: var(--prototype-paper); }
.services-section .section-heading,.pricing-heading,.usp-heading,.comparison-heading,.problem-heading { max-width: 100%; margin-inline: auto; text-align: center; }
.services-section .section-heading h2,.pricing-heading h2,.usp-heading h2,.comparison-heading h2,.problem-heading h2 { max-width: 20ch; margin-inline: auto; text-align: center; }
.services-section .section-heading .lead,.pricing-heading .lead,.usp-heading .lead,.comparison-heading .lead,.problem-heading .lead { margin-inline: auto; text-align: center; white-space: normal; }
.service-rows { gap: 0; border-top: 1px solid var(--prototype-line); }
.service-row { grid-template-columns: minmax(56px,.22fr) minmax(0,1fr) minmax(0,1.2fr); gap: var(--space-xl); padding: var(--space-xl) 0; border: 0; border-bottom: 1px solid var(--prototype-line); border-radius: 0; background: transparent; }
.service-number { font-size: var(--text-lg); line-height: 1.3; font-variant-numeric: tabular-nums; }
.service-row h3 { align-self: start; text-align: left; }
.service-points { grid-column: auto; gap: var(--space-sm); }
.service-points li { font-size: var(--text-md); }
.pricing-section { background: var(--prototype-soft); }
.pricing-stage { padding: 0; background: none; border-radius: 0; }
.plan-grid { gap: var(--space-md); }
.plan { padding: var(--space-xl); border-radius: var(--radius-card); }
.plan-featured { background: var(--prototype-ink); }
.plan-price { font-variant-numeric: tabular-nums; }
.usp-section { background: var(--prototype-paper); }
.usp-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 var(--space-xl); border-top: 1px solid var(--prototype-line); }
.usp-card { min-height: 0; padding: var(--space-lg) 0; border: 0; border-bottom: 1px solid var(--prototype-line); border-radius: 0; background: none; }
.usp-index { display: none; }
.usp-card h3 { margin-top: 0; }
.comparison-heading,.problem-heading { margin-bottom: var(--space-content); }
.problem-section { background: var(--prototype-dark); }
.problem-list { gap: var(--space-md); }
.problem-row { min-height: 0; align-items: flex-start; padding: clamp(24px, 2.5vw, 32px); border: 1px solid color-mix(in srgb, var(--prototype-teal) 55%, transparent); border-radius: var(--radius-card); background: color-mix(in srgb, var(--color-board-type) 5%, var(--prototype-dark)); text-align: left; }
.problem-row p { margin-inline: 0; text-align: left; }
.problem-icon { width: 30px; height: 30px; margin-bottom: var(--space-md); background: none; }
.problem-tags { max-width: 100%; justify-content: center; margin-inline: auto; }
.flexibility-layout { grid-template-columns: minmax(0,1fr); text-align: center; }
.flexibility-layout h2 { margin-inline: auto; text-align: center; }
.flexibility-copy { grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(28px, 5vw, 64px); }
.flexibility-point { grid-template-columns: 48px minmax(0,1fr); grid-template-rows: auto; align-items: center; justify-items: start; text-align: left; }
.flexibility-icon { width: 48px; height: 48px; }
.flexibility-point p { max-width: none; text-align: left; }

.faq-layout { grid-template-columns: minmax(0,1fr); row-gap: var(--space-content); }
.faq-layout > div:first-child { text-align: center; }
.faq-layout h2 { max-width: 20ch; margin-inline: auto; text-align: center; }
.faq-list { width: min(100%, 900px); margin-inline: auto; }

.closing-layout { grid-template-columns: minmax(0,1fr); gap: var(--space-content); }
.closing-copy { text-align: center; }
.closing-layout h2 { max-width: 20ch; margin-inline: auto; text-align: center; }
.closing-copy .button { justify-self: center; }
.closing-cta { width: min(100%, 900px); margin-inline: auto; }

@media (max-width: 640px) {
  .usp-section,.problem-section,.services-section,.comparison-section,.pricing-section { min-height: 0; }
  .services-section .section-heading h2,.pricing-heading h2,.usp-heading h2,.comparison-heading h2,.problem-heading h2,.flexibility-layout h2,.faq-layout h2,.closing-layout h2 { margin-inline: auto; text-align: center; }
  .services-section .section-heading .lead,.pricing-heading .lead,.usp-heading .lead,.comparison-heading .lead,.problem-heading .lead { margin-inline: auto; text-align: center; }
  .service-row { grid-template-columns: 40px minmax(0,1fr); gap: var(--space-sm); padding: var(--space-lg) 0; }
  .service-number { font-size: var(--text-md); }
  .service-points { grid-column: 2; padding: 0; }
  .usp-grid { grid-template-columns: minmax(0,1fr); }
  .usp-card { padding: var(--space-lg) 0; }
  .problem-row,.problem-row:last-child { display: block; padding: var(--mobile-card-pad); }
  .problem-icon { width: 44px; height: 44px; margin-bottom: var(--space-sm); background: var(--color-night); }
  .problem-tags { justify-content: flex-start; }
  .flexibility-copy { grid-template-columns: minmax(0,1fr); }
  .problem-row p { margin-top: var(--space-xs); }
  .comparison-table tbody th { align-self: center; margin-inline: auto; text-align: center; }
  .usp-card { display: grid; grid-template-columns: 32px minmax(0,1fr); column-gap: var(--space-sm); row-gap: var(--space-xs); }
  .usp-index { display: inline-grid; grid-row: 1 / 3; align-self: start; }
  .usp-card h3, .usp-card p { grid-column: 2; }
  .problem-row, .problem-row:last-child { text-align: center; }
  .problem-row h3, .problem-row p { margin-inline: auto; text-align: center; }
  .problem-icon { margin-inline: auto; }
  .problem-tags { justify-content: center; }
  .flexibility-copy { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-md); }
  .flexibility-point { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto; justify-items: center; gap: var(--space-sm); text-align: center; }
  .flexibility-point p { margin-inline: 0; text-align: center; }
  .flexibility-layout,.faq-layout,.closing-layout { grid-template-columns: minmax(0,1fr); }
}