/* Services / white label page */

.svc-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.svc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); margin: 56px 0 0; padding: 28px 0 0; border-top: 1px solid var(--rule); }
.svc-kpi dt { font-family: var(--sans); font-size: clamp(26px, 2.4vw, 38px); font-weight: 600; letter-spacing: -0.02em; color: var(--brand); line-height: 1; margin: 0; }
.svc-kpi dd { font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); margin: 10px 0 0; line-height: 1.45; }

/* Featured white-label block */
.svc-wl { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--gutter); align-items: start; }
.svc-wl-main { border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper); padding: 36px; }
/* .card .card-id in styles.css is scoped to .card — mirror it here (same tokens). */
.svc-wl-main .card-id { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 18px; display: flex; justify-content: space-between; }
.svc-wl-main .card-id .dot { width: 6px; height: 6px; background: var(--brand); border-radius: 50%; display: inline-block; margin-right: 8px; vertical-align: middle; }
.svc-wl-main h3 { font-family: var(--sans); font-size: clamp(22px, 2vw, 30px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 18px 0 14px; }
.svc-wl-main > p { font-family: var(--sans); font-size: 16.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 24px; max-width: 62ch; }
.svc-wl-side { border: 1px solid var(--rule); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--aqua-mist), var(--celeste-mist)); padding: 32px; position: sticky; top: 96px; }
.svc-wl-side p { font-family: var(--sans); font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 14px 0 24px; }

.svc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.svc-list li { position: relative; padding-left: 26px; font-family: var(--sans); font-size: 15.5px; line-height: 1.55; color: var(--ink-2); }
.svc-list li::before { content: ''; position: absolute; left: 6px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }

/* Capability cards */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.svc-card h3 { font-size: 19px; }

/* Process */
.svc-steps { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper); overflow: hidden; }
.svc-step { display: grid; grid-template-columns: 96px 1fr 180px; gap: 24px; align-items: start; padding: 28px 28px; border-bottom: 1px solid var(--rule); }
.svc-step:last-child { border-bottom: none; }
.svc-step-n { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--brand); letter-spacing: 0.06em; padding-top: 3px; }
.svc-step-body h3 { font-family: var(--sans); font-size: 18.5px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 8px; }
.svc-step-body p { font-family: var(--sans); font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 68ch; }
.svc-step-when { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); text-align: right; padding-top: 5px; }

/* Quality */
.svc-quality { display: grid; grid-template-columns: 1fr 1.35fr; gap: var(--gutter); align-items: start; }
.svc-certs { display: grid; gap: 12px; }
.svc-cert { border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.svc-cert-c { font-family: var(--sans); font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; }
.svc-cert-s { font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); }
.svc-cert--ok { border-left: 3px solid var(--brand); }
.svc-cert--wip { border-left: 3px solid var(--warn, oklch(0.65 0.13 70)); }
.svc-cert--wip .svc-cert-s { color: var(--warn, oklch(0.55 0.13 70)); }
.svc-tests { border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper); overflow: hidden; }
.svc-note { font-family: var(--sans); font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 28px 0 0; padding: 18px 22px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); max-width: 96ch; }

/* Quote */
.svc-quote { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--gutter); align-items: start; }
.svc-form { border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper); overflow: hidden; }
.svc-form-head { padding: 18px 28px; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; background: var(--aqua-mist); }
.svc-form-body { padding: 32px; display: grid; gap: 22px; }
.svc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.svc-form-body .label { display: block; margin-bottom: 8px; }
.svc-form-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 4px; }
.svc-err { font-family: var(--mono); font-size: 11px; color: var(--warn); margin-top: 6px; }
.svc-quote-side { border: 1px solid var(--rule); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--aqua-mist), var(--celeste-mist)); padding: 32px; position: sticky; top: 96px; }
.svc-quote-side .svc-list { margin-top: 16px; }
.svc-quote-legal { font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: var(--ink-3); margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--rule); }
.svc-quote-ok { border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 56px 48px; background: linear-gradient(135deg, var(--aqua-mist), var(--celeste-mist)); animation: fadeIn 0.4s ease both; }
.svc-quote-pill { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; background: var(--paper); border-radius: 100px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--aqua-deep); margin-bottom: 20px; font-weight: 600; }
.svc-quote-ok h3 { font-family: var(--sans); font-size: 36px; letter-spacing: -0.025em; font-weight: 600; line-height: 1.05; margin: 0 0 16px; }
.svc-quote-ok p { font-family: var(--sans); font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 52ch; margin: 0 0 28px; }

@media (max-width: 1080px) {
  .svc-wl, .svc-quality, .svc-quote { grid-template-columns: 1fr; }
  .svc-wl-side, .svc-quote-side { position: static; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-kpis { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
}

@media (max-width: 720px) {
  .svc-grid, .svc-form-row { grid-template-columns: 1fr; }
  .svc-step { grid-template-columns: 56px 1fr; row-gap: 10px; padding: 24px 20px; }
  .svc-step-when { grid-column: 2; text-align: left; padding-top: 0; }
  .svc-wl-main, .svc-wl-side, .svc-quote-side, .svc-form-body { padding: 24px; }
  .svc-quote-ok { padding: 36px 24px; }
  .svc-quote-ok h3 { font-size: 28px; }
}

.svc-form :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.svc-form button:disabled { opacity: 0.6; cursor: wait; }
.svc-form-foot .svc-err { width: 100%; }