/* services.css — components for the services-first homepage (managed IT, NOC, AI consulting).
   Builds on the tokens in style.css; no new colors. */

.hero h1.hero-services { font-size: var(--text-3xl); max-width: 18ch; }
.hero .lede strong { color: var(--color-text); font-weight: 600; }
.hero-caption {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-faint);
  margin-top: var(--space-3); text-align: right;
}

.text-link { color: var(--color-primary); text-decoration: none; font-weight: 600; }
.text-link:hover { text-decoration: underline; }

/* ---------- Three service cards ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); }
.svc-card { padding: var(--space-8); display: flex; flex-direction: column; }
.svc-num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-teal); letter-spacing: 0.12em; }
.svc-card h3 { font-size: var(--text-lg); margin-top: var(--space-3); }
.svc-card > p { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-3); }
.svc-card .check-list { flex: 1; }
.svc-card .text-link { margin-top: var(--space-6); font-size: var(--text-sm); }

.check-list { list-style: none; margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.check-list li {
  position: relative; padding-left: 1.6em; font-size: var(--text-sm); color: var(--color-text-muted); max-width: none;
}
.check-list li::before {
  content: ''; position: absolute; left: 0.15em; top: 0.42em; width: 0.8em; height: 0.42em;
  border-left: 2px solid var(--color-teal); border-bottom: 2px solid var(--color-teal);
  transform: rotate(-45deg);
}

/* ---------- Two-column split ---------- */
.split { display: grid; gap: var(--space-10); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--space-16); } }
.split h2 { font-size: var(--text-xl); margin-top: var(--space-3); }
.split .section-lede { color: var(--color-text-muted); margin-top: var(--space-4); }

/* ---------- Coverage tiles ---------- */
.cover-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.cover-tile { padding: var(--space-5); }
.cover-tile h3 { font-size: var(--text-base); font-weight: 600; }
.cover-tile p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }
.cover-tile .tier { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-teal); letter-spacing: 0.08em; margin-bottom: var(--space-2); }

/* ---------- Numbered steps ---------- */
.steps { list-style: none; display: grid; gap: var(--space-4); counter-reset: step; }
.steps li {
  counter-increment: step; position: relative; padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 3rem);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); max-width: none;
}
.steps li::before {
  content: counter(step); position: absolute; left: var(--space-5); top: var(--space-5);
  width: 2.1rem; height: 2.1rem; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600;
  background: var(--color-primary-highlight); color: var(--color-primary);
}
.steps h3 { font-size: var(--text-base); font-weight: 600; }
.steps p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }
.steps-row { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ---------- Alert path ---------- */
.alert-path { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 900px) { .alert-path { grid-template-columns: repeat(4, 1fr); } }
.alert-step {
  position: relative; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.alert-step .when { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-teal); letter-spacing: 0.08em; text-transform: uppercase; }
.alert-step h3 { font-size: var(--text-base); font-weight: 600; margin-top: var(--space-2); }
.alert-step p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }
@media (min-width: 900px) {
  .alert-step:not(:last-child)::after {
    content: ''; position: absolute; right: calc(var(--space-3) * -1 - 1px); top: 50%;
    width: var(--space-3); height: 2px; background: var(--color-border);
  }
}

/* ---------- Service-level table ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.sla-table { min-width: 760px; font-size: var(--text-sm); }
.sla-table th, .sla-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.sla-table tr:last-child td, .sla-table tr:last-child th { border-bottom: 0; }
.sla-table thead th {
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-faint); font-weight: 500; background: var(--color-surface-2); white-space: nowrap;
}
.sla-table thead th span { display: block; color: var(--color-text); font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-weight: 600; font-size: var(--text-sm); margin-top: 2px; }
.sla-table tbody th { font-weight: 600; color: var(--color-text); min-width: 15rem; }
.sla-table td { color: var(--color-text-muted); }
.sla-table td.fast { color: var(--color-teal); font-weight: 600; }
.table-notes { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: var(--space-5); }
.table-notes p { font-size: var(--text-sm); color: var(--color-text-muted); max-width: none; }
.table-notes strong { color: var(--color-text); }

/* ---------- Plans ---------- */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: var(--space-4); align-items: stretch; }
.plan-card { display: flex; flex-direction: column; padding: var(--space-6); position: relative; }
.plan-card.featured { border-color: var(--color-primary); box-shadow: var(--shadow-glow); }
.plan-card .plan-id { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-teal); letter-spacing: 0.1em; }
.plan-card h3 { font-size: var(--text-lg); margin-top: var(--space-2); }
.plan-card .plan-tag { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); min-height: 2.9em; }
.plan-card .plan-price-row { margin-top: var(--space-4); display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.plan-card .amount { font-family: var(--font-display); font-weight: 650; font-size: var(--text-xl); letter-spacing: -0.02em; }
.plan-card .per { font-size: var(--text-xs); color: var(--color-text-muted); font-family: var(--font-mono); }
.plan-card .plan-adds { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-2); min-height: 4.6em; }
.plan-card .check-list { margin-top: var(--space-4); flex: 1; }
.plan-card .plan-foot {
  margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-divider);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-faint);
}

.typical { display: grid; gap: var(--space-8); grid-template-columns: 1fr; padding: var(--space-8); }
@media (min-width: 900px) { .typical { grid-template-columns: 1fr 1fr; } }
.typical h3 { font-size: var(--text-lg); }
.typical p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }
.typical-rows { display: flex; flex-direction: column; }
.typical-rows div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); font-size: var(--text-sm); }
.typical-rows div:last-child { border-bottom: 0; }
.typical-rows span:first-child { color: var(--color-text-muted); }
.typical-rows span:last-child { font-family: var(--font-mono); font-weight: 600; }

/* ---------- Example conversation ---------- */
.chat-mock { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.chat-mock .chat-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-divider); }
.chat-mock .chat-head strong { font-family: var(--font-display); }
.bubble { border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); font-size: var(--text-sm); max-width: 34rem; }
.bubble .who { display: block; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-faint); margin-bottom: var(--space-1); }
.bubble.user { align-self: flex-end; background: var(--color-primary-highlight); color: var(--color-text); border-bottom-right-radius: var(--radius-sm); }
.bubble.ai { align-self: flex-start; background: var(--color-surface-2); border: 1px solid var(--color-border); border-bottom-left-radius: var(--radius-sm); }
.chat-status { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-faint); }
.chat-status .ok { color: var(--color-warning); }

/* ---------- Stat pair ---------- */
.stat-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin-top: var(--space-8); }
.stat-pair .card { padding: var(--space-5); }
.stat-pair .big { font-family: var(--font-display); font-weight: 650; font-size: var(--text-2xl); letter-spacing: -0.03em; color: var(--color-teal); line-height: 1; }
.stat-pair p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }
.footnote { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-4); max-width: none; }

/* ---------- Two ways to run it ---------- */
.run-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.run-card { padding: var(--space-8); }
.run-card h3 { font-size: var(--text-lg); margin-top: var(--space-2); }
.run-card > p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }

/* ---------- About / proof ---------- */
.proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-4); }
.proof-grid .card { padding: var(--space-5); }
.proof-grid .big { font-family: var(--font-display); font-weight: 650; font-size: var(--text-xl); letter-spacing: -0.02em; }
.proof-grid p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }

/* ---------- Contact ---------- */
.contact-card { padding: clamp(var(--space-6), 5vw, var(--space-12)); display: grid; gap: var(--space-10); grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact-card { grid-template-columns: 1.15fr 1fr; } }
.contact-card h2 { font-size: var(--text-2xl); }
.contact-card .contact-lede { color: var(--color-text-muted); margin-top: var(--space-4); }
.contact-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.contact-lines { display: flex; flex-direction: column; }
.contact-lines a, .contact-lines div {
  display: flex; flex-direction: column; gap: 2px; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-divider);
  text-decoration: none; color: var(--color-text);
}
.contact-lines > :last-child { border-bottom: 0; }
.contact-lines .k { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.contact-lines .v { font-weight: 600; font-size: var(--text-base); overflow-wrap: anywhere; }
.contact-lines a:hover .v { color: var(--color-primary); }

/* ---------- Platform strip ---------- */
.platform-strip { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.platform-strip a { text-decoration: none; color: inherit; padding: var(--space-5); display: block; }
.platform-strip h3 { font-size: var(--text-base); font-weight: 600; }
.platform-strip p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }

.footer-note { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-6); max-width: none; width: 100%; }

@media (max-width: 520px) {
  .site-header .btn-ghost { display: none; }
  .hero h1.hero-services { max-width: none; }
}

/* ---------- Past projects ---------- */
.work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-5); }
.work-card { padding: var(--space-8); display: flex; flex-direction: column; }
.work-kind { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-teal); letter-spacing: 0.1em; text-transform: uppercase; }
.work-card h3 { font-size: var(--text-lg); margin-top: var(--space-3); }
.work-card > p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-3); }
.work-tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.work-tags li {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted);
  border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 2px var(--space-3);
}
.work-card .work-stat { flex: 1; margin-top: var(--space-5); color: var(--color-text-muted); }
.work-card .work-stat strong { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text); margin-right: var(--space-1); }
.work-links {
  margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-divider);
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--text-sm);
}
.proof-grid > div:not(.card) .big { color: var(--color-teal); }

/* ---------- Comparison + case tables (AI consulting page) ---------- */
.cmp-table { min-width: 680px; font-size: var(--text-sm); }
.cmp-table th, .cmp-table td { padding: var(--space-4); text-align: left; border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.cmp-table tr:last-child td, .cmp-table tr:last-child th { border-bottom: 0; }
.cmp-table thead th {
  font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-faint); font-weight: 500; background: var(--color-surface-2);
}
.cmp-table tbody th { font-weight: 600; color: var(--color-text); width: 24%; }
.cmp-table td { color: var(--color-text-muted); }
.cmp-table td.ours { color: var(--color-text); font-weight: 500; }
.cmp-table thead th.ours { color: var(--color-teal); }

.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); }
.tier-card { padding: var(--space-8); }
.tier-card h3 { font-size: var(--text-lg); margin-top: var(--space-2); }
.tier-card .like { font-weight: 600; margin-top: var(--space-3); }
.tier-card p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }
.tier-card p.like { color: var(--color-text); font-size: var(--text-base); }

.timeline { list-style: none; display: grid; gap: 0; border-left: 2px solid var(--color-border); margin-left: var(--space-3); }
.timeline li { position: relative; padding: 0 0 var(--space-6) var(--space-8); max-width: none; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ''; position: absolute; left: -8px; top: 0.3em; width: 14px; height: 14px; border-radius: 50%;
  background: var(--color-surface); border: 2px solid var(--color-text-faint);
}
.timeline li.decision::before { border-color: var(--color-primary); background: var(--color-primary); }
.timeline .when { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-teal); letter-spacing: 0.08em; text-transform: uppercase; }
.timeline h3 { font-size: var(--text-base); font-weight: 600; margin-top: 2px; }
.timeline p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 2px; }
.timeline .tag { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-primary); margin-left: var(--space-2); }

.bio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--space-5); }
.bio-card { padding: var(--space-8); }
.bio-card h3 { font-size: var(--text-lg); }
.bio-card .role { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-teal); letter-spacing: 0.08em; text-transform: uppercase; margin-top: var(--space-1); }

.ask-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-4); }
.ask-grid .card { padding: var(--space-5); }
.ask-grid .who { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-teal); letter-spacing: 0.08em; text-transform: uppercase; }
.ask-grid .q { font-weight: 600; margin-top: var(--space-2); }
.ask-grid .a { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }

/* ---------- Review fixes ---------- */
.btn { text-decoration: none; }
.hero-caption { max-width: none; }
.price-badge { white-space: nowrap; }
.plan-card h3 { min-height: 2.35em; }
.plan-card .plan-tag { min-height: 4.4em; }
.work-card .work-tags { flex: 1; align-content: flex-start; }
.work-card .work-stat { flex: 0; }
.plan-card .plan-tag { min-height: 2.9em; }
.hero-visual.no-fade::after { display: none; }
@media (max-width: 640px) {
  .hero-visual.no-fade, .hero-caption { display: none; }
}

/* ================= Site-wide chrome (2026-10-05): mobile menu, platform sub-nav, services band ================= */
.nav-menu { position: relative; display: block; }
@media (min-width: 860px) { .nav-menu { display: none; } }
.nav-menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-full);
  color: var(--color-text-muted); background: var(--color-surface-2); border: 1px solid var(--color-border);
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu[open] > summary { color: var(--color-text); border-color: var(--color-text-faint); }
.nav-menu-panel {
  position: absolute; right: 0; top: calc(100% + var(--space-3)); z-index: 120; min-width: 15rem;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--space-3); display: flex; flex-direction: column;
}
.nav-menu-panel a { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; font-weight: 500; font-size: var(--text-sm); }
.nav-menu-panel a:hover { background: var(--color-surface-2); }
.nav-menu-panel .sep { height: 1px; background: var(--color-divider); margin: var(--space-2) 0; }
.nav-links a[aria-current="page"] { color: var(--color-text); }

.subnav { border-bottom: 1px solid var(--color-divider); background: var(--color-surface); }
.subnav .wrap { display: flex; align-items: center; gap: var(--space-5); overflow-x: auto; height: 46px; scrollbar-width: none; }
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav .label { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-teal); white-space: nowrap; }
.subnav a { color: var(--color-text-muted); text-decoration: none; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.subnav a:hover, .subnav a[aria-current="page"] { color: var(--color-text); }

.services-band { padding: clamp(var(--space-6), 4vw, var(--space-10)); display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: center; border-color: var(--color-primary); }
@media (min-width: 900px) { .services-band { grid-template-columns: 1.4fr 1fr; } }
.services-band h2 { font-size: var(--text-xl); margin-top: var(--space-3); }
.services-band p { color: var(--color-text-muted); margin-top: var(--space-3); font-size: var(--text-sm); }
.services-band .band-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (min-width: 900px) { .services-band .band-actions { justify-content: flex-end; } }

.footer-contact { font-size: var(--text-sm); color: var(--color-text-muted); width: 100%; max-width: none; }
.footer-contact a { color: var(--color-text); text-decoration: none; font-weight: 600; }

/* ================= Case studies ================= */
.work-card { position: relative; }
.work-card h3 a { color: inherit; text-decoration: none; }
.work-card h3 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.work-card .work-links a { position: relative; z-index: 1; }
.work-card .read-more { margin-top: var(--space-5); font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); }

.case-hero h1 { font-size: var(--text-2xl); max-width: 22ch; }
.crumbs { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-faint); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.crumbs a { color: var(--color-text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--color-text); }
.case-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4); margin-top: var(--space-10); }
.case-meta div { border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.case-meta dt { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-faint); }
.case-meta dd { font-weight: 600; margin-top: var(--space-1); font-size: var(--text-sm); }
.case-meta dd a { color: var(--color-primary); text-decoration: none; }
.case-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.case-stats .card { padding: var(--space-5); }
.case-stats .big { font-family: var(--font-display); font-weight: 650; font-size: var(--text-xl); letter-spacing: -0.02em; color: var(--color-teal); line-height: 1.1; }
.case-stats p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }
.case-figure { margin-top: var(--space-10); }
.case-figure img { width: 100%; display: block; border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); background: var(--color-surface); }
.case-figure figcaption { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-faint); font-family: var(--font-mono); max-width: none; }
.figure-pair { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 860px) { .figure-pair { grid-template-columns: 1fr 1fr; } }
.figure-pair .case-figure { margin-top: 0; }
.built-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--space-4); }
.built-grid .card { padding: var(--space-6); }
.built-grid h3 { font-size: var(--text-base); font-weight: 600; }
.built-grid p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }
.case-prose p { color: var(--color-text-muted); margin-top: var(--space-4); }
.case-prose p:first-of-type { margin-top: var(--space-4); }
.case-flow { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important; }
.case-next { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .case-next { grid-template-columns: 1fr 1fr; } }
.case-next a { display: block; padding: var(--space-6); text-decoration: none; color: inherit; }
.case-next .dir { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-faint); }
.case-next strong { display: block; font-family: var(--font-display); font-size: var(--text-lg); margin-top: var(--space-2); }
.case-next a.next { text-align: right; }

/* ================= Product pages rebuilt in the main system ================= */
.shots { display: flex; gap: var(--space-4); overflow-x: auto; padding: var(--space-2) 0 var(--space-6); }
.shots img { height: 480px; width: auto; max-width: none; border-radius: 22px; border: 6px solid var(--color-surface-offset); box-shadow: var(--shadow-md); }
.pull-quote { border-left: 3px solid var(--color-teal); padding: var(--space-2) var(--space-5); font-style: italic; color: var(--color-text-muted); margin-top: var(--space-8); max-width: 60ch; }
.notice { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--color-text-muted); background: var(--color-surface); display: inline-block; }
.notice a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.hand-note { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px dashed var(--color-border); font-size: var(--text-xs); color: var(--color-text-faint); }
.hero h1.hero-product { font-size: var(--text-3xl); max-width: 20ch; }
.case-figure img { height: auto; }
.case-figure.single { max-width: 920px; }
.built-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.case-flow .alert-step::after { display: none !important; }
@media (min-width: 900px) { .case-flow.n6 { grid-template-columns: repeat(3, 1fr) !important; } .case-flow.n5 { grid-template-columns: repeat(5, 1fr) !important; } }
.shots img { height: 480px; width: auto; }

/* ================= Calculators, comparison, city pages, call bar (2026-10-05, round 3) ================= */
.calc { display: grid; gap: var(--space-8); grid-template-columns: 1fr; padding: var(--space-8); }
@media (min-width: 900px) { .calc { grid-template-columns: 1fr 1fr; gap: var(--space-12); } }
.calc h3 { font-size: var(--text-lg); }
.calc > div > p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }
.calc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.calc-fields .form-field input, .calc-fields .form-field select { font-family: var(--font-mono); font-size: var(--text-base); }
.calc-note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-teal); margin-top: var(--space-5); }
.calc-out { display: flex; flex-direction: column; }
.calc-out .row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); font-size: var(--text-sm); }
.calc-out .row span:first-child { color: var(--color-text-muted); }
.calc-out .row output, .calc-out .row .val { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-base); color: var(--color-text); white-space: nowrap; }
.calc-out .row.lead output { color: var(--color-teal); font-size: var(--text-lg); }
.calc-out .per-month { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-faint); text-align: right; padding-bottom: var(--space-2); }
.calc-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); align-items: center; }

.fit-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.fit-grid .card { padding: var(--space-8); }
.fit-grid h3 { font-size: var(--text-lg); margin-top: var(--space-2); }
.x-list { list-style: none; margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.x-list li { position: relative; padding-left: 1.6em; font-size: var(--text-sm); color: var(--color-text-muted); max-width: none; }
.x-list li::before { content: ''; position: absolute; left: 0.2em; top: 0.62em; width: 0.75em; height: 2px; background: var(--color-text-faint); }

.promise-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.promise-strip .card { padding: var(--space-5); }
.promise-strip .big { font-family: var(--font-display); font-weight: 650; font-size: var(--text-xl); color: var(--color-teal); letter-spacing: -0.02em; line-height: 1.1; }
.promise-strip p { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }

.area-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.area-list li { font-size: var(--text-sm); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: var(--space-1) var(--space-4); color: var(--color-text-muted); background: var(--color-surface); }

.badge-dot a { color: var(--color-primary); text-decoration: none; }
.badge-dot a:hover { text-decoration: underline; }

.ready-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); }
.ready-list label { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--text-sm); cursor: pointer; }
.ready-list input { margin-top: 0.25em; width: 1.05em; height: 1.05em; accent-color: var(--color-primary); flex: none; }
.ready-list li { max-width: none; }

.policy { padding: clamp(var(--space-6), 5vw, var(--space-12)); }
.policy h2 { font-size: var(--text-xl); }
.policy h3 { font-size: var(--text-base); font-weight: 600; margin-top: var(--space-8); }
.policy p, .policy li { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); max-width: 75ch; }
.policy ul { padding-left: 1.2em; }
.policy .fill { background: var(--color-primary-highlight); color: var(--color-text); padding: 0 0.3em; border-radius: 4px; font-family: var(--font-mono); font-size: 0.9em; }

.footer-more { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); width: 100%; font-size: var(--text-xs); }
.footer-more a { color: var(--color-text-faint); text-decoration: none; }
.footer-more a:hover { color: var(--color-text); }

.call-bar { display: none; }
@media (max-width: 640px) {
  .call-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--color-bg) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--color-divider);
  }
  .call-bar .btn { padding: var(--space-3) var(--space-3); }
  body { padding-bottom: 4.25rem; }
}
@media print {
  .site-header, .subnav, .site-footer, .call-bar, .no-print, .hero-glow { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .policy, .policy p, .policy li { color: #000 !important; border: 0; box-shadow: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
}