/* ══════════════════════════════════════════════════════
   PAGE — Design Systems service / pricing
   Side-by-side tier comparison + add-ons + process.
   Built on shared tokens; reuses .section-* and button
   classes from home.css / components.css.
══════════════════════════════════════════════════════ */

/* ── Intro lead paragraphs ──────────────────────────── */
.ds-lead {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--p-weight);
  line-height: var(--lh-loose);
  color: var(--text-secondary);
  max-width: none;       /* match the full-width .section-h */
}
.ds-lead + .ds-lead { margin-top: var(--sp-4); }

/* ── Section spacing rhythm on the page ─────────────── */
.ds-section { margin-top: var(--sp-20); }   /* 80px between major blocks */

.ds-section-h {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);          /* ~35px */
  font-weight: var(--h-weight);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-snug);
  color: var(--text-primary);
  margin-bottom: var(--sp-3);
}
.ds-section-sub {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--p-weight);
  line-height: var(--lh-loose);
  color: var(--text-secondary);
  max-width: var(--container-prose);
  margin-bottom: var(--sp-8);
}

/* ══════════════════════════════════════════════════════
   PRICING — three columns, side by side
══════════════════════════════════════════════════════ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);                  /* 20px */
  align-items: start;                /* columns size to their own content */
}

.pricing-col {
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);              /* 32px */
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  height: 100%;
}

/* Featured (middle) tier — solid taupe fill, inverted white text */
.pricing-col.featured {
  border-color: var(--c-taupe);
  background: var(--c-taupe);
}

/* Inverted text on the taupe column */
.pricing-col.featured .pricing-tier,
.pricing-col.featured .pricing-price,
.pricing-col.featured .pricing-list li strong {
  color: var(--c-white);
}
.pricing-col.featured .pricing-tagline { color: rgba(255, 255, 255, 0.9); }
.pricing-col.featured .pricing-list li,
.pricing-col.featured .pricing-note   { color: rgba(255, 255, 255, 0.82); }
.pricing-col.featured .pricing-price small,
.pricing-col.featured .pricing-turnaround,
.pricing-col.featured .pricing-block-label { color: rgba(255, 255, 255, 0.6); }

/* Divider lines */
.pricing-col.featured .pricing-col-head,
.pricing-col.featured .pricing-col-foot { border-color: rgba(255, 255, 255, 0.2); }

/* Badge */
.pricing-col.featured .pricing-badge {
  color: var(--c-white);
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.35);
}

/* Markers — white check, faint dash */
.pricing-col.featured .pricing-list.included li::before { background: var(--c-white); }
.pricing-col.featured .pricing-list.excluded li         { color: rgba(255, 255, 255, 0.5); }
.pricing-col.featured .pricing-list.excluded li strong  { color: rgba(255, 255, 255, 0.72); }
.pricing-col.featured .pricing-list.excluded li::before { background: rgba(255, 255, 255, 0.4); }

/* CTA — white button stands out against the taupe fill */
.pricing-col.featured .pricing-col-foot .btn {
  background: var(--c-white);
  color: var(--c-black);
  border-color: var(--c-white);
}
.pricing-col.featured .pricing-col-foot .btn:hover {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.88);
  color: var(--c-black);
}

.pricing-col-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
}

.pricing-badge {
  align-self: flex-start;
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--c-taupe);
  background: var(--accent-faint);
  border: 1px solid var(--accent-border);
  border-radius: var(--btn-radius);
  padding: 4px 10px;
  margin-bottom: var(--sp-1);
}

.pricing-tier {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);          /* 1.6rem */
  font-weight: var(--h-weight);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

.pricing-price {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);          /* 1.5rem */
  font-weight: 600;
  color: var(--c-taupe);
}
.pricing-price small {
  font-size: var(--fs-sm);
  font-weight: var(--p-weight);
  color: var(--text-tertiary);
}

.pricing-turnaround {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--p-weight);
  letter-spacing: var(--ls-wide);
  color: var(--text-tertiary);
}

.pricing-tagline {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--p-weight);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

/* ── Included / excluded lists ──────────────────────── */
.pricing-block-label {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-3);
}

.pricing-list {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.pricing-list:last-child { margin-bottom: 0; }

.pricing-list li {
  position: relative;
  padding-left: var(--sp-6);         /* room for the marker */
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--p-weight);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}
.pricing-list li strong {
  font-weight: 500;
  color: var(--text-primary);
}

/* Check marker for included items */
.pricing-list.included li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 14px;
  height: 14px;
  background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Dash marker for excluded items */
.pricing-list.excluded li {
  color: var(--text-tertiary);
}
.pricing-list.excluded li strong { color: var(--text-secondary); }
.pricing-list.excluded li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 11px;
  height: 2px;
  border-radius: 1px;
  background: var(--border-strong);
}

/* Push the CTA to the bottom so buttons align across columns */
.pricing-col-foot {
  margin-top: auto;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.pricing-col-foot .btn { width: 100%; justify-content: center; }

.pricing-note {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--p-weight);
  font-style: italic;
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

/* ══════════════════════════════════════════════════════
   ADD-ONS — compact card grid
══════════════════════════════════════════════════════ */
.ds-addons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ds-addons-grid > li {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
}
.ds-addon-title {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--h-weight);
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
}
.ds-addon-desc {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--p-weight);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

/* Price — pushed to the bottom so cells line up across the row */
.ds-addon-price {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--c-taupe);
  line-height: var(--lh-snug);
}
.ds-addon-price small {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--p-weight);
  color: var(--text-tertiary);
  letter-spacing: var(--ls-wide);
}
.ds-addon-price-add {
  display: block;
  margin-top: var(--sp-1);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--p-weight);
  color: var(--text-tertiary);
  letter-spacing: var(--ls-wide);
}

/* Icon badge — colored per cell below */
.ds-addon-icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
}
.ds-addon-icon svg { width: 23px; height: 23px; }

/* Per-cell color themes — warm peach, green, taupe, sand.
   Subtle top-corner wash + matching icon badge. */
.ds-addons-grid > li:nth-child(1) {            /* App icon design — peach */
  background: linear-gradient(158deg, rgba(255, 233, 214, 0.55) 0%, var(--c-white) 68%);
  border-color: rgba(225, 158, 0, 0.28);
}
.ds-addons-grid > li:nth-child(1) .ds-addon-icon {
  background: rgba(255, 233, 214, 0.95);
  color: #a04c03;                      /* warm amber — reads on peach */
}

.ds-addons-grid > li:nth-child(2) {            /* Codebase integration — green */
  background: linear-gradient(158deg, rgba(46, 125, 50, 0.08) 0%, var(--c-white) 68%);
  border-color: rgba(46, 125, 50, 0.20);
}
.ds-addons-grid > li:nth-child(2) .ds-addon-icon {
  background: rgba(46, 125, 50, 0.13);
  color: var(--green);
}

.ds-addons-grid > li:nth-child(3) {            /* Additional platforms — taupe */
  background: linear-gradient(158deg, rgba(117, 114, 99, 0.13) 0%, var(--c-white) 68%);
  border-color: rgba(117, 114, 99, 0.26);
}
.ds-addons-grid > li:nth-child(3) .ds-addon-icon {
  background: rgba(117, 114, 99, 0.16);
  color: var(--c-taupe);
}

.ds-addons-grid > li:nth-child(4) {            /* Extra revision rounds — warm sand */
  background: linear-gradient(158deg, rgba(255, 233, 214, 0.32) 0%, var(--c-white) 68%);
  border-color: rgba(117, 114, 99, 0.18);
}
.ds-addons-grid > li:nth-child(4) .ds-addon-icon {
  background: rgba(255, 233, 214, 0.7);
  color: var(--c-taupe);
}

/* ══════════════════════════════════════════════════════
   PARTNERSHIP — single accent panel
══════════════════════════════════════════════════════ */
.ds-partnership {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 88% 12%, rgba(255, 233, 214, 0.75) 0%, transparent 58%),
    linear-gradient(135deg, rgba(117, 114, 99, 0.10) 0%, rgba(238, 237, 235, 0.55) 100%);
  border: 1px solid rgba(117, 114, 99, 0.22);
  border-radius: var(--r-xl);
  padding: var(--sp-10);
  display: flex;
  gap: var(--sp-6);
  align-items: flex-start;
}
.ds-partnership-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-lg);
  background: var(--c-taupe);
  color: var(--c-white);
}
.ds-partnership-icon svg { width: 28px; height: 28px; }
.ds-partnership-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.ds-partnership .pricing-price { font-size: var(--fs-xl); }

/* ══════════════════════════════════════════════════════
   PROCESS — numbered steps
══════════════════════════════════════════════════════ */
.ds-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-6);
  counter-reset: ds-step;
}
.ds-steps > li {
  counter-increment: ds-step;
  position: relative;
  padding-left: var(--sp-16);        /* room for the number */
}
.ds-steps > li::before {
  content: counter(ds-step);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--sp-10);
  height: var(--sp-10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--c-taupe);
  background: var(--accent-faint);
  border: 1px solid var(--accent-border);
  border-radius: 50%;
}
.ds-step-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--h-weight);
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
  min-height: var(--sp-10);
  display: flex;
  align-items: center;
}
.ds-step-body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--p-weight);
  line-height: var(--lh-loose);
  color: var(--text-secondary);
  max-width: var(--container-prose);
}

/* ══════════════════════════════════════════════════════
   COLOR — warm tints across the tiers and headings
══════════════════════════════════════════════════════ */
/* Foundation (first) — soft peach wash */
.pricing-grid > .pricing-col:first-child {
  background: linear-gradient(165deg, rgba(255, 233, 214, 0.5) 0%, rgba(255, 233, 214, 0) 58%), var(--c-white);
  border-color: rgba(225, 158, 0, 0.22);
}
/* Comprehensive (last) — cool taupe/sand wash */
.pricing-grid > .pricing-col:last-child {
  background: linear-gradient(165deg, rgba(117, 114, 99, 0.13) 0%, rgba(117, 114, 99, 0) 58%), var(--c-white);
  border-color: rgba(117, 114, 99, 0.24);
}

/* Section headings get a short colored accent bar */
.ds-section-h {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.ds-section-h::before {
  content: '';
  flex-shrink: 0;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--c-taupe);
}

/* Warm the process number badges with a peach tint */
.ds-steps > li::before {
  background: rgba(255, 233, 214, 0.55);
  border-color: rgba(225, 158, 0, 0.30);
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .pricing-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .pricing-col { height: auto; }
  .pricing-col-foot { margin-top: var(--sp-2); }
}
@media (max-width: 760px) {
  .ds-addons-grid { grid-template-columns: 1fr; }
  .ds-section { margin-top: var(--sp-16); }
  .ds-steps > li { padding-left: var(--sp-12); }
  .ds-steps > li::before { width: var(--sp-8); height: var(--sp-8); font-size: var(--fs-base); }
  .ds-partnership { flex-direction: column; gap: var(--sp-4); }
}