/* ============================================================
   THE TONE DOCTRINE — pages.css
   Loaded AFTER styles.css, on internal pages only (service pages,
   answer pages, privacy.html). Never edit styles.css for this —
   see the build notes for why.
   ============================================================ */

/* ---------- Solid header for pages without a hero video ---------- */
.site-header--solid{
  position:sticky;
  top:0;
  background:var(--cream);
  border-bottom:1px solid var(--line);
}
.site-header--solid .wordmark,
.site-header--solid .nav a{color:var(--ink)}
.site-header--solid .nav a.header-book{background:var(--ink);color:var(--on-dark)}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{padding-block:18px 0}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.breadcrumbs li{display:flex;align-items:center;gap:6px;font-size:.8125rem;color:var(--text-muted)}
.breadcrumbs a{color:var(--text-muted);text-decoration:underline;text-underline-offset:3px}
.breadcrumbs a:hover{color:var(--accent)}
.breadcrumbs li[aria-current]{color:var(--text)}

/* ---------- Service page hero (title band, no video) ---------- */
.svc-hero{padding-block:clamp(32px,5vw,56px) clamp(40px,5vw,64px)}
.svc-hero--tight{padding-bottom:0}
.svc-hero__grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,48px);align-items:center}
.svc-hero__eyebrow{margin-bottom:.6rem}
.svc-hero h1{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.1rem,1.5rem + 2.6vw,3.2rem);
  line-height:1.08;letter-spacing:-0.02em;color:var(--ink);margin:0 0 1rem;
  font-variation-settings:"opsz" 60,"SOFT" 0,"WONK" 1;
}
.svc-hero h1 em{font-style:italic}
.svc-hero__sub{font-size:clamp(1rem,.95rem + .3vw,1.125rem);color:var(--text);max-width:52ch;margin:0 0 1.6rem}
.svc-hero__ctas{display:flex;flex-wrap:wrap;gap:12px}
.svc-hero__media{border-radius:8px;overflow:hidden;box-shadow:var(--shadow-soft)}
.svc-hero__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.svc-hero__price{
  display:inline-block;margin:0 0 1.2rem;
  font-family:var(--font-body);font-weight:600;font-size:.8125rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
}

/* ---------- Article content sections ---------- */
.svc-section{padding-block:clamp(40px,5vw,64px)}
.svc-section + .svc-section{border-top:1px solid var(--line)}
.svc-section__inner{max-width:760px}
.svc-section h2{margin-bottom:1.1rem}
.svc-section p{margin:0 0 1.1rem;color:var(--text)}
.svc-section p:last-child{margin-bottom:0}
.svc-section ul,.svc-section ol{margin:0 0 1.1rem;padding-left:1.4em;list-style:disc;color:var(--text)}
.svc-section ol{list-style:decimal}
.svc-section li{margin-bottom:.5em}
.svc-section li:last-child{margin-bottom:0}
.svc-section li::marker{color:var(--accent)}

/* Honest-boundary callout */
.svc-boundary{
  background:var(--cream-panel);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:8px;padding:clamp(22px,3vw,30px);
}
.svc-boundary h2{margin-bottom:.8rem}
.svc-boundary p:last-child{margin-bottom:0}

/* Process steps */
.svc-steps{margin:0;padding:0;list-style:none;counter-reset:step}
.svc-steps li{
  position:relative;padding-left:52px;margin-bottom:1.6rem;counter-increment:step;color:var(--text);
}
.svc-steps li:last-child{margin-bottom:0}
.svc-steps li::before{
  content:counter(step);position:absolute;left:0;top:-.1rem;
  width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--on-dark);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:1rem;
}
.svc-steps strong{display:block;color:var(--ink);font-weight:600;margin-bottom:.2rem}

/* Price detail table (reuses pricing token shapes) */
.svc-price-table{margin:0 0 1.1rem}
.svc-price-row{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.svc-price-row:last-child{border-bottom:none}
.svc-price-row__name{color:var(--ink)}
.svc-price-row__value{color:var(--ink);font-weight:600;white-space:nowrap}

/* ---------- CTA band ---------- */
.svc-cta{text-align:center}
.svc-cta .h2{margin-bottom:.8rem}
.svc-cta p{color:var(--on-dark-dim);max-width:48ch;margin:0 auto 1.6rem}

/* ---------- Cross-links ---------- */
.svc-links{display:grid;grid-template-columns:1fr;gap:16px}
.svc-link-card{
  display:block;border:1px solid var(--line);border-radius:8px;padding:22px 24px;
  transition:border-color .2s ease,transform .2s ease;
}
.svc-link-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.svc-link-card .meta{display:block;margin-bottom:.4rem}
.svc-link-card h3{margin-bottom:.3rem}
.svc-link-card p{margin:0;font-size:.875rem;color:var(--text)}

/* ---------- Placeholder photo (no real asset yet) ---------- */
.svc-placeholder{
  aspect-ratio:4/3;border-radius:8px;background:
    linear-gradient(135deg, var(--placeholder) 0%, var(--cream-tint) 100%);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-family:var(--font-display);font-style:italic;font-size:1rem;
}

/* TODO markers stay invisible in production but easy to grep */
[data-todo]{ }

@media (min-width:769px){
  .svc-hero__grid{grid-template-columns:1.1fr 1fr}
  .svc-links{grid-template-columns:1fr 1fr}
}