/* ====================================================================
   SERVICES PAGE STYLES — assets/css/services.css   v2 · 2026-07
   --------------------------------------------------------------------
   Page-specific components for services.html ONLY. Loads AFTER
   assets/css/styles.css and uses ONLY its brand tokens (read the
   design-system header first). Components:

     .svc-hero   page hero (paper, typographic — rides on .page-top)
     .cmp-*      plan comparison table — horizontal-scroll on small
                 screens (keyboard-reachable region), featured column
     .cap-*      "what this means for you" pain→outcome cards
     .faq-*      accordion on native <details>/<summary> — zero JS
     .cta-row    lets a .cta-band (or section) hold two buttons

   Everything degrades gracefully: the table scrolls instead of
   breaking, the FAQ opens without JS, and all decorative motion dies
   under prefers-reduced-motion.
   ==================================================================== */

/* ---------- 1 · PAGE HERO ---------- */
.svc-hero h1{max-width:19ch}

/* ---------- 2 · COMPARISON TABLE ----------
   Real <table> for real semantics. Column 3 = featured (All-in-One),
   tinted mint. */
.cmp-scroll{position:relative; /* containing block for the cells' absolute .sr-only spans */
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.cmp{width:100%;border-collapse:collapse;min-width:660px;font-size:.95rem}
.cmp th,.cmp td{padding:15px 20px;border-top:1px solid var(--line-soft);text-align:center;vertical-align:middle}
.cmp thead th{border-top:0;padding-block:22px 18px;vertical-align:bottom;font-weight:600}
.cmp thead .cmp-what{font-family:var(--font-m);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);font-weight:400}
.cmp-plan{display:block;font-family:var(--font-d);font-weight:700;font-size:1.25rem;letter-spacing:-.02em;margin-top:10px;color:var(--ink)}
.cmp thead small{display:block;font-weight:400;color:var(--slate);font-size:.76rem;margin-top:4px}
.cmp tbody th{text-align:left;font-weight:600;color:var(--ink);line-height:1.35}
.cmp tbody th small{display:block;color:var(--slate);font-weight:400;font-size:.8rem;margin-top:3px}
.cmp tr>*:first-child{text-align:left;width:50%}
/* featured (All-in-One) column tint */
.cmp tr>*:nth-child(3){background:var(--mint)}
/* included: check in a mint ring */
.cmp-yes{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--card);border:1px solid var(--mint-brd);vertical-align:middle}
.cmp-yes::before{content:"";width:15px;height:15px;background:var(--current-dark);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/15px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/15px no-repeat}
.cmp-no{color:var(--faded);opacity:.7;font-size:1.05rem}
.cmp tfoot td{padding-block:24px}
.cmp tfoot .note{max-width:34ch}
.cmp-hint{display:none;margin-top:12px;text-align:center}
@media(max-width:720px){.cmp-hint{display:block}}

/* ---------- 3 · CAPABILITY CARDS (pain → outcome) ---------- */
.cap-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cap-wide{grid-column:1/-1}
.cap h3{font-size:1.25rem}
.cap-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
.cap-pain,.cap-gain{margin-top:14px;font-size:.93rem;line-height:1.6}
.cap-pain{color:var(--slate)}
.cap-gain{color:var(--body)}
.cap-pain span,.cap-gain span{display:block;font-family:var(--font-m);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:5px}
.cap-pain span{color:var(--faded)}
.cap-gain span{color:var(--current-dark)}

/* ---------- 4 · FAQ (native <details> accordion) ---------- */
.faq{max-width:840px;display:grid;gap:14px}
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:var(--r);transition:border-color .25s}
.faq-item[open]{border-color:var(--input)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 24px;font-family:var(--font-d);font-weight:700;font-size:1.05rem;line-height:1.3;border-radius:var(--r)}
.faq-item summary::-webkit-details-marker{display:none}
/* plus→minus toggle, drawn in CSS */
.faq-x{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--current-dark);position:relative}
.faq-x::before,.faq-x::after{content:"";position:absolute;background:currentColor;border-radius:2px}
.faq-x::before{width:12px;height:2px}
.faq-x::after{width:2px;height:12px;transition:transform .25s var(--ease)}
.faq-item[open] .faq-x::after{transform:rotate(90deg)}
.faq-a{padding:0 24px 22px;color:var(--body);font-size:.95rem;line-height:1.65;max-width:72ch}
.faq-a p+p{margin-top:10px}

/* ---------- 5 · CTA ROW (two buttons, centered) ---------- */
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.cta-row .btn{margin-top:0}

/* ---------- 6 · RESPONSIVE + REDUCED MOTION ---------- */
@media(max-width:860px){
  .cap-grid,.cap-cols{grid-template-columns:1fr}
  .cmp tr>*:first-child{width:56%}
}
@media(prefers-reduced-motion:reduce){
  .faq-item,.faq-x::after{transition:none}
}