/* Extra sections used by the big versions of the funnel pages (b2, c2, d2, e2, f2).
   Prefixed blk- so they never clash with a page's own classes. Tokens from /shared/tokens.css. */

.blk { padding: var(--space-8) 0; }
.blk--surface { background: var(--color-surface); }
.blk--stone { background: var(--color-stone); }
.blk--dark { background: var(--color-inverse); color: var(--color-inverse-ink); }
.blk h2 { font-size: var(--t-h2); max-width: 24ch; }
.blk__intro { margin-top: var(--space-3); font-size: var(--t-lead); line-height: 1.5; max-width: 54ch; }
.blk__body { margin-top: var(--space-6); }

/* Numbered steps on one line (desktop) */
.blk-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.blk-steps li { display: grid; gap: var(--space-2); align-content: start; padding-top: var(--space-4); border-top: 2px solid currentColor; }
.blk-steps .n { font: 400 2rem/1 var(--font-display); color: var(--color-accent); }
.blk-steps h3 { font-size: var(--t-h3); }
@media (min-width: 640px) { .blk-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .blk-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .blk-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Short points with a square marker */
.blk-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); max-width: 820px; }
.blk-points li { padding-left: 22px; position: relative; }
.blk-points li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 9px; height: 9px; border-radius: 2px; background: var(--color-accent); }

/* About me: photo + paragraphs */
.blk-about { display: grid; gap: var(--space-5); }
.blk-about__photo { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
.blk-about__text { display: grid; gap: var(--space-4); max-width: 60ch; font-size: 1.0625rem; line-height: 1.65; }
@media (min-width: 1024px) {
  .blk-about { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); align-items: start; }
  .blk-about__photo { grid-column: 1 / span 5; }
  .blk-about__text { grid-column: 7 / span 6; }
}

/* Proof: before/after jobs and reviews */
.blk-jobs { display: grid; gap: var(--space-5); }
.blk-job { margin: 0; display: grid; gap: var(--space-3); }
.blk-job__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.blk-job__pair .ph-photo { aspect-ratio: 4 / 3; padding: var(--space-3); }
.blk-job figcaption { font-size: 0.9375rem; color: var(--color-inverse-muted); }
.blk-reviews { display: grid; gap: var(--space-5); margin-top: var(--space-7); }
.blk-review { margin: 0; padding-top: var(--space-5); border-top: 1px solid var(--color-inverse-line); display: grid; gap: var(--space-3); }
.blk-review p { font: 400 var(--t-h3)/1.35 var(--font-display); }
.blk-review footer { font-size: 0.9375rem; color: var(--color-inverse-muted); }
@media (min-width: 1024px) { .blk-jobs, .blk-reviews { grid-template-columns: 1fr 1fr; column-gap: var(--space-5); } }

/* Comparison table (stacks on phones) */
.blk-table-wrap { overflow-x: auto; }
.blk-table { width: 100%; border-collapse: collapse; }
.blk-table th, .blk-table td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--color-line); }
.blk-table thead th { font: 400 var(--t-h3)/1.2 var(--font-display); }
.blk-table tbody th { font-weight: 600; }
@media (max-width: 639px) {
  .blk-table thead { display: none; }
  .blk-table tr { display: grid; gap: 4px; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line); }
  .blk-table th, .blk-table td { border: 0; padding: 0; }
  .blk-table td::before { content: attr(data-label); display: block; font-size: var(--t-label); font-weight: 600; color: var(--color-muted); }
}

/* FAQ list (uses .qa from the page's own styles when present) */
.blk-faq { display: grid; max-width: 820px; }
.blk-faq .qa { border-bottom: 1px solid var(--color-line); }
.blk-faq .qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; min-height: 56px; font-weight: 500; font-size: 1.0625rem; }
.blk-faq .qa summary::-webkit-details-marker { display: none; }
.blk-faq .qa summary::after { content: "+"; font: 400 1.5rem/1 var(--font-display); color: var(--color-accent); }
.blk-faq .qa[open] summary::after { content: "\2212"; }
.blk-faq .qa p { padding: 0 0 var(--space-5); max-width: 62ch; }

/* Service area */
.blk-area { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-5); max-width: 640px; font-size: 1.0625rem; }
.blk-area li { padding-left: 18px; position: relative; }
.blk-area li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border: 1.5px solid var(--color-accent); border-radius: 50%; }
@media (min-width: 640px) { .blk-area { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Closing call to action */
.blk-close { display: grid; gap: var(--space-5); align-items: end; }
.blk-close h2 { max-width: 20ch; }
.blk-close .btn { justify-self: start; }
@media (min-width: 1024px) { .blk-close { grid-template-columns: 1fr auto; } .blk-close .btn { justify-self: end; } }