/* Service & industry detail template components.
   Extracted from rb-service-detail.html / rb-industry-detail.html so every
   generated page shares one stylesheet. Load after rb.css. */

.d-hero{padding:var(--s-7) 0 var(--s-9)}
.d-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tr-meta);text-transform:uppercase;padding:4px 11px;border-radius:var(--r-pill);background:var(--signal-50);color:var(--signal-700);margin-bottom:var(--s-5)}
.d-tag.seo{background:var(--cite-100);color:#7A5A00}
.d-hero h1{font-size:var(--t-h1);max-width:26ch;margin-bottom:var(--s-5)}
.d-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-9);align-items:start}
.d-actions{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-6)}
.facts{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.facts > .meta{display:block;padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--rule);background:var(--paper)}
.facts dl{margin:0;padding:var(--s-2) var(--s-5) var(--s-4)}
.facts div{display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);padding:var(--s-3) 0;border-bottom:1px solid var(--rule);align-items:baseline}
.facts div:last-child{border-bottom:0}
.facts dt{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-500);white-space:nowrap}
.facts dd{margin:0;font-size:var(--t-small);color:var(--ink-900);text-align:right}
@media (max-width:960px){.d-grid{grid-template-columns:1fr;gap:var(--s-7)}}

/* FAQ, rendered open, full text in markup. No JS gate. */
.faq{display:grid;gap:0;border-top:1px solid var(--rule)}
.faq-i{padding:var(--s-5) 0;border-bottom:1px solid var(--rule)}
.faq-i h3{font-size:var(--t-h4);margin-bottom:var(--s-3)}
.faq-i p{font-size:var(--t-small);color:var(--ink-700);margin:0;max-width:70ch}

/* Deliverables */
.deliv{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.deliv-i{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);padding:var(--s-5)}
.deliv-i .n{font-family:var(--font-mono);font-size:var(--t-micro);color:var(--signal-600);display:block;margin-bottom:var(--s-3)}
.deliv-i h4{margin-bottom:var(--s-2)}
.deliv-i p{font-size:var(--t-small);color:var(--text-muted);margin:0}
@media (max-width:700px){.deliv{grid-template-columns:1fr}}

/* Process */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:var(--s-5);padding:var(--s-5) 0;border-bottom:1px solid var(--rule)}
.steps li:last-child{border-bottom:0}
.steps li::before{counter-increment:s;content:"0" counter(s);font-family:var(--font-mono);font-size:var(--t-meta);color:var(--ink-300);padding-top:4px}
.steps h4{margin-bottom:var(--s-2)}
.steps p{font-size:var(--t-small);color:var(--text-muted);margin:0;max-width:64ch}

/* Surfaces */
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--rule);border-radius:var(--r-pill);background:var(--surface);font-size:var(--t-small);color:var(--ink-800)}
.chip::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--signal-600);flex-shrink:0}

/* Proof */
.proof{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-4)}
.proof a{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);text-decoration:none;color:inherit}
.proof a:hover{border-color:var(--ink-900);color:inherit}
.proof h4{font-size:var(--t-body)}
.proof p{font-size:var(--t-meta);color:var(--text-muted);margin:0}
@media (max-width:640px){.proof{grid-template-columns:1fr}}

/* Related services */
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.rel a{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);text-decoration:none;color:inherit}
.rel a:hover{border-color:var(--ink-900);color:inherit}
.rel .meta{color:var(--signal-600)}
.rel strong{font-size:var(--t-body);font-weight:var(--w-semibold)}
.rel span.d{font-size:var(--t-meta);color:var(--text-muted)}
@media (max-width:800px){.rel{grid-template-columns:1fr}}

/* Required slot, makes an unfinished page look unfinished */
.req{border:2px dashed var(--cite-500);background:var(--cite-100);border-radius:var(--r-md);padding:var(--s-5);display:grid;gap:var(--s-3)}
.req-hd{display:flex;align-items:center;gap:var(--s-3);font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tr-meta);text-transform:uppercase;color:#7A5A00}
.req-hd::before{content:"!";width:16px;height:16px;border-radius:50%;background:var(--cite-500);color:var(--ink-900);display:grid;place-items:center;font-weight:var(--w-bold);flex-shrink:0}
.req p{margin:0;font-size:var(--t-small);color:#5C4400}
.req ul{margin:0;padding-left:1.1rem;font-size:var(--t-small);color:#5C4400}
.req li{margin-bottom:4px}

/* ── Context band: why this matters now ── */
.ctx{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);margin-top:var(--s-5)}
.ctx > div{border-top:2px solid var(--rule-strong);padding-top:var(--s-4)}
.ctx h4{font-size:var(--t-body);margin-bottom:var(--s-3)}
.ctx p{font-size:var(--t-small);color:var(--text-muted);margin:0}
@media (max-width:820px){.ctx{grid-template-columns:1fr;gap:var(--s-4)}}

/* ── Fit: who it is for, and who it is not for ── */
.fitc{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.fitc > div{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);padding:var(--s-5)}
.fitc > div.no{background:var(--paper-sunk)}
.fitc h4{font-size:var(--t-body);margin-bottom:var(--s-4)}
.fitc ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--s-3)}
.fitc li{font-size:var(--t-small);color:var(--ink-700);display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);align-items:start}
.fitc li::before{content:"";width:14px;height:14px;margin-top:4px;border-radius:var(--r-sm);background:var(--verify-100);border:1px solid var(--verify-600)}
.fitc > div.no li::before{background:transparent;border-color:var(--ink-300)}
@media (max-width:700px){.fitc{grid-template-columns:1fr}}

/* ── Mistake → correction pairs ── */
.gone{display:grid;gap:0;border-top:1px solid var(--rule)}
.gone > div{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);padding:var(--s-5) 0;border-bottom:1px solid var(--rule)}
.gone h4{font-size:var(--t-body);margin:0 0 var(--s-2);display:flex;gap:9px;align-items:baseline}
.gone h4::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-300);flex-shrink:0;transform:translateY(-1px)}
.gone .fix h4::before{background:var(--verify-600)}
.gone p{font-size:var(--t-small);color:var(--text-muted);margin:0;max-width:52ch}
@media (max-width:760px){.gone > div{grid-template-columns:1fr;gap:var(--s-4)}}

/* ── Five-phase list (methodology, mirrored on industry pages) ── */
.steps.ph5 li{padding:var(--s-6) 0}
.st-day{display:block;font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--signal-600);margin:-2px 0 var(--s-3)}
.st-chips{margin-bottom:var(--s-4)}
.st-chips .chip{font-size:var(--t-meta);padding:5px 11px}
.st-del{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--rule);font-size:var(--t-small);color:var(--ink-700)}
.st-del .meta{color:var(--signal-600)}

/* ── 5 Layers: stack diagram ── */
.stack{display:grid;gap:6px;margin:var(--s-7) 0}
.stack a{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:var(--s-5);padding:var(--s-5) var(--s-6);background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);text-decoration:none;color:inherit;transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.stack a:hover{border-color:var(--ink-900);transform:translateX(3px);color:inherit}
.stack .n{font-family:var(--font-mono);font-size:var(--t-meta);color:var(--ink-300)}
.stack .nm{font-size:var(--t-h4);font-weight:var(--w-semibold);letter-spacing:var(--tr-head)}
.stack .nm em{font-style:normal;font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--signal-600);margin-left:var(--s-3)}
.stack .th{font-size:var(--t-small);color:var(--text-muted);text-align:right}
.stack-note{font-size:var(--t-meta);color:var(--ink-500);font-family:var(--font-mono);letter-spacing:var(--tr-meta);text-transform:uppercase}
@media (max-width:760px){.stack a{grid-template-columns:36px 1fr}.stack .th{grid-column:2;text-align:left}}

/* ── 5 Layers: detail blocks ── */
.layer{padding:var(--s-9) 0;border-top:1px solid var(--rule)}
.layer-hd{display:grid;grid-template-columns:auto 1fr;gap:var(--s-5);align-items:baseline;margin-bottom:var(--s-3)}
.layer-hd .n{font-family:var(--font-mono);font-size:var(--t-meta);color:var(--ink-300)}
.layer h2{font-size:var(--t-h2);margin:0}
.layer .theme{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--signal-600);display:block;margin-bottom:var(--s-4)}
.layer .q{font-size:var(--t-lead);color:var(--ink-900);max-width:52ch;margin:0 0 var(--s-6)}
.layer-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8)}
.layer-grid h4{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tr-meta);text-transform:uppercase;color:var(--ink-500);margin-bottom:var(--s-4)}
.layer-grid p{font-size:var(--t-small);color:var(--text-muted);max-width:56ch}
.layer-grid ul{margin:0 0 var(--s-5);padding:0;list-style:none;display:grid;gap:var(--s-3)}
.layer-grid ul li{font-size:var(--t-small);color:var(--ink-700);display:grid;grid-template-columns:auto 1fr;gap:var(--s-3)}
.layer-grid ul li::before{content:"";width:6px;height:6px;margin-top:8px;border-radius:2px;background:var(--signal-600)}
@media (max-width:860px){.layer-grid{grid-template-columns:1fr;gap:var(--s-6)}}