/* ==========================================================================
   Service / consultant landing pages — shared page-specific layout for all
   9 service pages (AEO Services, SaaS Link Building, and the 7 consultant
   pages). Requires site-chrome.css (tokens, nav, footer, buttons, tags,
   kicker, .wrap, .rule, .card, reviews, base elements) to be enqueued
   first — this file only adds the sections unique to a service page.
   ========================================================================== */

/* — breadcrumb — */
.crumb { font-size: 13px; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin: calc(1.5 * var(--leading)) 0 0; }
.crumb a { color: inherit; }
.crumb a:hover { color: var(--color-accent); }

/* — hero — */
.hero { padding: var(--half) 0 calc(2.5 * var(--leading)); }
body.aeo-blank-canvas .hero .display {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 5vw, 62px); line-height: clamp(39px, 5.6vw, 68px);
  letter-spacing: -0.015em; margin: 0; max-width: 18ch;
}
body.aeo-blank-canvas .hero .sub {
  font-size: 17px; line-height: var(--leading); max-width: var(--measure);
  margin: calc(1.25 * var(--leading)) 0 0; color: color-mix(in srgb, var(--color-text) 88%, transparent);
}
.hero .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); align-items: center; }
.hero .row .btn {
  font-size: 16px; font-weight: 600; padding: 15px 30px; min-height: 52px;
}
.hero .row .btn-primary { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.hero .row .btn-primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.hero .row .btn-ghost { border-width: 2px; }
.hero .fineprint { font-size: 13px; margin-top: var(--space-4); color: color-mix(in srgb, var(--color-text) 55%, transparent); }
@media (max-width: 560px) {
  .hero .row { flex-direction: column; align-items: stretch; }
  .hero .row .btn { width: 100%; }
}

/* — platform row — */
.platforms { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: calc(2 * var(--leading)); }

/* — stat band — */
.stats {
  background: radial-gradient(900px 420px at 85% -40%, color-mix(in srgb, var(--color-section-glow) 70%, transparent), transparent 64%), var(--color-section);
  padding: calc(2.2 * var(--leading)) 0;
}
.stats .grid { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: calc(1.5 * var(--leading)) var(--leading); }
body.aeo-blank-canvas .stat-num {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(30px, 3vw, 42px); line-height: calc(1.7 * var(--leading));
  color: var(--color-text); margin: 0;
}
body.aeo-blank-canvas .stat-label {
  font-size: 12px; line-height: var(--half); letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 64%, transparent); margin: var(--half) 0 0;
}
@media (max-width: 720px) { .stats .grid { grid-template-columns: repeat(2, 1fr); justify-content: start; } }

/* — section shell — */
.section { padding: calc(3 * var(--leading)) 0; }
.section-head { max-width: 62ch; margin-bottom: calc(1.75 * var(--leading)); }
body.aeo-blank-canvas .section-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(24px, 2.6vw, 32px); line-height: calc(1.4 * var(--leading)); letter-spacing: -0.012em; margin: 0;
}
body.aeo-blank-canvas .section-sub {
  font-size: 15.5px; line-height: var(--leading); margin: calc(var(--leading) - 1cap) 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent); max-width: 56ch;
}

/* — problem grid — */
.problem-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (max-width: 720px) { .problem-grid { grid-template-columns: 1fr; } }

/* — services: numbered feature rows — */
.feature {
  display: grid; grid-template-columns: minmax(56px, 96px) minmax(0, 320px) minmax(0, 1fr);
  gap: var(--leading) clamp(20px, 4vw, 56px); align-items: baseline; padding: calc(1.4 * var(--leading)) 0; position: relative;
}
.feature + .feature::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--color-neutral-700) 48px calc(100% - 48px), transparent);
}
body.aeo-blank-canvas .f-num { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: var(--leading); color: var(--color-accent); margin: 0; }
body.aeo-blank-canvas .f-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 21px; line-height: var(--leading); letter-spacing: -0.01em; margin: 0; }
body.aeo-blank-canvas .f-title a { color: var(--color-text); text-decoration: none; }
body.aeo-blank-canvas .f-title a:hover { color: var(--color-accent); text-decoration: underline; }
body.aeo-blank-canvas .f-copy { font-size: 15px; line-height: var(--leading); margin: 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); max-width: 52ch; }
@media (max-width: 880px) { .feature { grid-template-columns: 1fr; gap: var(--half); } .f-copy { max-width: var(--measure); } }

/* — process steps — */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.step { padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface); }
body.aeo-blank-canvas .step-num { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 13px; color: var(--color-accent); margin: 0 0 var(--space-2); }
body.aeo-blank-canvas .step-title { font-size: 16px; margin: 0 0 var(--space-2); color: var(--color-text); }
body.aeo-blank-canvas .step-copy { font-size: 13.5px; line-height: 1.5; margin: 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); }

/* — FAQ — */
.faq-list { display: flex; flex-direction: column; gap: var(--space-3); max-width: 74ch; }
.faq-item { border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; }
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4); font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15.5px; color: var(--color-text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--color-accent); font-size: 20px; line-height: 1; flex: none; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover { color: var(--color-accent); }
body.aeo-blank-canvas .faq-item .faq-body { padding: 0 var(--space-4) var(--space-4); margin: 0; font-size: 14.5px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 78%, transparent); max-width: 62ch; }

/* — related guides (internal linking) — */
.related-guides { padding: calc(2 * var(--leading)) 0 calc(1 * var(--leading)); }
.related-guides .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.related-guides .card { text-decoration: none; color: inherit; display: block; }
@media (max-width: 880px) { .related-guides .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .related-guides .grid { grid-template-columns: 1fr; } }

/* — close / calendly — */
.close { padding: calc(2.5 * var(--leading)) 0 calc(2 * var(--leading)); }
.close-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: calc(2 * var(--leading)); align-items: start; }
body.aeo-blank-canvas .close h2 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(26px, 2.8vw, 36px); line-height: calc(1.4 * var(--leading)); margin: 0; max-width: 20ch; }
body.aeo-blank-canvas .close .sub { font-size: 15.5px; line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 78%, transparent); margin: calc(var(--leading) - 1cap) 0 0; max-width: 46ch; }
.close .row { margin-top: var(--leading); }
.close .row .btn-primary {
  background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent);
  font-size: 16px; font-weight: 600; padding: 15px 30px; min-height: 52px;
}
.close .row .btn-primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.close-widget { border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-md); overflow: hidden; padding: var(--space-3); }
@media (max-width: 880px) { .close-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .close .row .btn-primary { width: 100%; } }