/*
 * Service Page Styles — Red Cedar Software
 * Loaded only on pages using the "Service Page" template.
 *
 * Sections:
 *   1. Hero
 *   2. Problem
 *   3. Differentiators (Feature Blocks)
 *   4. Process Steps
 *   5. What's Included (Checklist)
 *   6. Local Proof
 *   7. FAQ Accordion
 *   8. Shared Utilities
 */


/* ============================================================
   1. HERO
   ============================================================ */

.svc-hero {
  padding: var(--sp-10) 0 var(--sp-9);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.svc-hero-inner {
  max-width: 780px;
}

.svc-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--sp-5);
}

.svc-eyebrow span[aria-hidden] {
  color: var(--accent);
}

.svc-hero-title {
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 var(--sp-6);
}

.svc-hero-title-accent {
  color: var(--accent);
}

.svc-hero-paragraph {
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.65;
  color: var(--fg-muted);
  max-width: 640px;
  margin-bottom: var(--sp-7);
}

.svc-hero-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.svc-hero-secondary-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--fg-muted);
  text-decoration: none;
  transition: color 160ms ease;
}

.svc-hero-secondary-link:hover {
  color: var(--accent);
}

.svc-hero-subtext {
  font-size: 13px;
  color: var(--fg-subtle);
  margin: 0;
}


/* ============================================================
   2. THE PROBLEM
   ============================================================ */

.svc-problem {
  padding: var(--sp-9) 0;
  background: var(--bg-sunk);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.svc-problem-inner {
  max-width: 740px;
}

.svc-problem-title {
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.022em;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 var(--sp-6);
}

/* Shared prose container — problem & local sections */
.svc-prose p {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.7;
  color: var(--fg-muted);
  margin-bottom: var(--sp-5);
}

.svc-prose p:last-child {
  margin-bottom: 0;
}


/* ============================================================
   3. DIFFERENTIATORS — FEATURE BLOCKS
   ============================================================ */

.svc-diff {
  padding: var(--sp-10) 0;
  background: var(--bg);
}

.svc-diff-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-8);
}

@media (max-width: 720px) {
  .svc-diff-grid {
    grid-template-columns: 1fr;
  }
}

.svc-diff-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-7) var(--sp-6);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.svc-diff-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.svc-diff-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}

.svc-diff-card h3 {
  font-size: 19px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin-bottom: var(--sp-4);
}

/* Shared card prose — diff & process */
.svc-card-prose p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-muted);
  margin-bottom: var(--sp-4);
}

.svc-card-prose p:last-child {
  margin-bottom: 0;
}


/* ============================================================
   4. PROCESS STEPS
   ============================================================ */

.svc-process {
  padding: var(--sp-10) 0;
  background: var(--bg-sunk);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.svc-steps {
  list-style: none;
  margin: var(--sp-8) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.svc-step {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--sp-6);
  padding: var(--sp-7) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.svc-step:last-child {
  border-bottom: none;
}

.svc-step-num {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  color: var(--line-strong);
  letter-spacing: -0.04em;
  line-height: 1;
  padding-top: 4px;
  user-select: none;
}

.svc-step-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-3);
}

.svc-step-content h3 {
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin-bottom: var(--sp-4);
}

@media (max-width: 640px) {
  .svc-step {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }

  .svc-step-num {
    font-size: 22px;
  }
}


/* ============================================================
   5. WHAT'S INCLUDED — CHECKLIST
   ============================================================ */

.svc-included {
  padding: var(--sp-10) 0;
  background: var(--bg);
}

.svc-included-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-9) var(--sp-10);
  align-items: start;
}

@media (max-width: 900px) {
  .svc-included-inner {
    grid-template-columns: 1fr;
  }
}

.svc-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.svc-checklist-item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg);
}

.svc-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  margin-top: 2px;
}

.svc-check-label strong {
  font-weight: 600;
  color: var(--fg);
}

.svc-check-note {
  color: var(--fg-muted);
  font-size: 13.5px;
}


/* ============================================================
   6. LOCAL PROOF
   ============================================================ */

.svc-local {
  padding: var(--sp-10) 0;
  background: var(--bg-sunk);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.svc-local-inner {
  max-width: 740px;
}

.svc-local .fp-section-title {
  margin-bottom: var(--sp-6);
}


/* ============================================================
   7. FAQ — ACCORDION
   ============================================================ */

.svc-faq {
  padding: var(--sp-10) 0;
  background: var(--bg);
}

.svc-faq-list {
  max-width: 740px;
  margin: var(--sp-8) auto 0;
}

.svc-faq-item {
  border-bottom: 1px solid var(--line);
}

.svc-faq-item:first-child {
  border-top: 1px solid var(--line);
}

.svc-faq-q {
  width: 100%;
  background: none;
  border: none;
  padding: var(--sp-5) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.4;
  transition: color 160ms ease;
}

.svc-faq-q:hover {
  color: var(--accent);
}

.svc-faq-q:hover .svc-faq-icon {
  color: var(--accent);
}

.svc-faq-icon {
  flex-shrink: 0;
  color: var(--fg-muted);
  transition: transform 240ms ease, color 160ms ease;
}

/* Rotate the vertical stroke away when open */
.svc-faq-q[aria-expanded="true"] .faq-plus-v {
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 240ms ease;
}

.svc-faq-q[aria-expanded="true"] .svc-faq-icon {
  color: var(--accent);
}

.faq-plus-v {
  transition: transform 240ms ease;
}

.svc-faq-a {
  overflow: hidden;
}

/* JS removes [hidden] and adds this */
.svc-faq-a:not([hidden]) {
  display: block;
}

.svc-faq-a-inner {
  padding: 0 0 var(--sp-6);
}

.svc-faq-a-inner p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-muted);
  margin-bottom: var(--sp-4);
}

.svc-faq-a-inner p:last-child {
  margin-bottom: 0;
}


/* ============================================================
   8. SHARED UTILITIES
   ============================================================ */

/* Section headers re-used across service page sections */
.svc-page .fp-section-header {
  max-width: 640px;
  margin-bottom: 0;
}

.svc-page .fp-section-header--center {
  max-width: 100%;
  text-align: center;
}

/* Dark mode tweaks */
[data-theme="dark"] .svc-diff-card,
.dark-mode .svc-diff-card {
  background: var(--bg-elev);
}

[data-theme="dark"] .svc-check,
.dark-mode .svc-check {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .svc-faq-q,
  .svc-faq-icon,
  .faq-plus-v,
  .svc-diff-card {
    transition: none;
  }
}