/* service.css — the /services/:slug template (2026-10-03, brand sheet
 * step 4). 38 pages render through it (store management has its own body).
 *
 * Loaded after store-mgmt.css (the .smp tokens, type, buttons, track, FAQ,
 * reviews) and core-pages.css (.cp-pr-top, the headline-left / ask-right
 * top Alwaz liked on /pricing). This file adds the section grounds and the
 * shapes only service pages have: the included-items cards, the what/why
 * pair, the long guide, and the related and reading lists. No :root,
 * reset or body{}.
 *
 * Rhythm: cream top with the cards, white, cream, white..., one dark band
 * at the end. No dark band mid-page (Alwaz, /pricing: hard to read after
 * the white).
 */

/* ── Grounds ────────────────────────────────────────────────────────── */
.smp #sv-hero { background: var(--sm-cream); padding: 8.5rem 0 6rem; overflow: hidden; }
.smp #sv-process,
.smp #sv-faq,
.smp #sv-more { background: var(--sm-cream); }
.smp #sv-cta { background: var(--sm-dark); color: #F5F2ED; }
.smp #sv-guide { padding-top: 5rem; padding-bottom: 5rem; }

.smp .sm-kick a { color: inherit; text-decoration: none; }
.smp .sm-kick a:hover { color: var(--sm-ink); text-decoration: underline; text-underline-offset: 3px; }
.smp .sv-h1 { max-width: 13em; }

/* ── What's included: raised cards in the top section ──────────────── */
.smp .sv-inc-label {
  margin: 64px 0 18px;
  font: 600 13px/1.3 'DM Sans', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sm-accent);
}
.smp .sv-includes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.smp .sv-include {
  padding: 28px 28px 26px;
  border: 1.5px solid #D8D1C5;
  border-radius: 16px;
  background: var(--sm-paper);
  box-shadow: 0 26px 56px -32px rgba(22, 19, 15, .35);
  min-width: 0;
}
.smp .sv-include-n { display: block; font: 600 1.05rem/1 'Sora', sans-serif; color: var(--sm-accent); }
.smp .sv-include-h { margin: 14px 0 10px; font: 600 1.18rem/1.3 'Sora', sans-serif; letter-spacing: -0.02em; color: var(--sm-ink); }
.smp .sv-include p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--sm-body); }
/* Four or eight items read better in fours. */
.smp .sv-includes:has(> li:nth-child(4):last-child),
.smp .sv-includes:has(> li:nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── What it is, and why it matters ─────────────────────────────────── */
.smp .sv-what { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.smp .sv-what-text > p { margin: 0; font-size: 18px; line-height: 1.7; color: var(--sm-ink); max-width: 38em; }
.smp .sv-why { margin-top: 30px; padding: 24px 0 0; border-top: 1px solid var(--sm-line); }
.smp .sv-why-label { margin: 0 0 10px; font: 600 15px/1.3 'DM Sans', sans-serif; color: var(--sm-accent); }
.smp .sv-why p:last-child { margin: 0; font-size: 16.5px; line-height: 1.7; color: var(--sm-body); max-width: 38em; }

/* ── How we do it: the track takes 4 or 5 steps ─────────────────────── */
.smp .sm-track.sv-track-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
.smp .sm-track.sv-track-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── The long guide ─────────────────────────────────────────────────── */
.smp .sv-guide { max-width: 760px; }
.smp .sv-guide .service-deep-dive-eyebrow {
  display: block;
  margin-bottom: 12px;
  font: 500 13px/1.3 'DM Sans', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sm-accent);
}
.smp .sv-guide .service-deep-dive-intro { font-size: 19px; line-height: 1.6; color: var(--sm-ink); }
.smp .sv-guide h2 {
  margin: 48px 0 14px;
  font: 400 clamp(1.6rem, 2.6vw, 2.1rem)/1.2 'Sora', sans-serif;
  letter-spacing: -0.03em;
  color: var(--sm-ink);
}
.smp .sv-guide h2:first-child { margin-top: 0; }
.smp .sv-guide h3 { margin: 30px 0 10px; font: 500 1.15rem/1.35 'Sora', sans-serif; letter-spacing: -0.015em; color: var(--sm-ink); }
.smp .sv-guide p { margin: 0 0 16px; font-size: 17px; line-height: 1.75; color: var(--sm-body); }
.smp .sv-guide ul { margin: 0 0 18px; padding-left: 1.2em; }
.smp .sv-guide li { margin: 6px 0; font-size: 17px; line-height: 1.65; color: var(--sm-body); }
.smp .sv-guide li::marker { color: var(--sm-accent); }
.smp .sv-guide strong { color: var(--sm-ink); font-weight: 600; }
.smp .sv-guide a { color: var(--sm-ink); text-decoration: underline; text-decoration-color: var(--sm-accent); text-underline-offset: 3px; }
.smp .sv-guide a:hover { color: var(--sm-accent); }

/* ── Related services and further reading ───────────────────────────── */
.smp .sv-more { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.smp .sv-more:has(> div:only-child) { grid-template-columns: minmax(0, 760px); }
.smp .sv-links { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid #D8D1C5; }
.smp .sv-links li { border-bottom: 1px solid #D8D1C5; }
.smp .sv-links a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  min-height: 44px;
  padding: 14px 0;
  color: var(--sm-ink);
  font: 500 16.5px/1.4 'DM Sans', sans-serif;
  text-decoration: none;
}
.smp .sv-links a:hover span:first-child { color: var(--sm-accent); text-decoration: underline; text-underline-offset: 3px; }
.smp .sv-links a > span:last-child { flex: none; color: var(--sm-muted); }
.smp .sv-reading-min { font-size: 14px; }

/* The reviews block opens its own section here (on store management it
   follows the stores, with a rule and a gap above it). */
.smp #sv-reviews .sm-reviews-head { margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 1100px) {
  .smp .sv-includes,
  .smp .sv-includes:has(> li:nth-child(4):last-child),
  .smp .sv-includes:has(> li:nth-child(8):last-child) { grid-template-columns: 1fr 1fr; }
  .smp .sm-track.sv-track-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .smp .sv-what,
  .smp .sv-more { grid-template-columns: 1fr; gap: 28px; }
  .smp .sm-track.sv-track-5,
  .smp .sm-track.sv-track-3 { grid-template-columns: 1fr 1fr; }
}

/* ── Phone ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .smp #sv-hero { padding-top: 6.5rem !important; padding-bottom: 2.75rem !important; }
  .smp #sv-guide { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
  /* The sticky bar is the phone's call to action. */
  .smp #sv-hero .sm-split { display: none; }
  .smp #sv-hero .sm-cta { margin-top: 16px; }
  /* home.css's blanket phone h2 size; this one is a small label. */
  .smp .sv-inc-label { margin: 30px 0 12px; font-size: 13px !important; }
  /* Included items become the site's snap row. */
  .smp .sv-includes,
  .smp .sv-includes:has(> li:nth-child(4):last-child),
  .smp .sv-includes:has(> li:nth-child(8):last-child) {
    display: flex;
    gap: 12px;
    margin: 0 -20px;
    padding: 0 20px 26px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
  }
  .smp .sv-includes::-webkit-scrollbar { display: none; }
  .smp .sv-include { flex: 0 0 calc(100vw - 60px); scroll-snap-align: start; padding: 20px 18px; }
  .smp .sv-include-h { margin: 10px 0 6px; font-size: 1.05rem; }
  .smp .sv-include p { font-size: 14.5px; }
  .smp .sv-what-text > p { font-size: 16.5px; line-height: 1.65; }
  .smp .sv-why { margin-top: 20px; padding-top: 18px; }
  .smp .sv-why p:last-child { font-size: 15.5px; }
  .smp .sm-track.sv-track-5,
  .smp .sm-track.sv-track-3 { grid-template-columns: none; }
  .smp .sv-guide h2 { font-size: 1.45rem !important; margin-top: 32px; }
  .smp .sv-guide p,
  .smp .sv-guide li { font-size: 16px; }
  .smp .sv-links a { font-size: 15.5px; padding: 12px 0; }
}