/* /customer-service/ pages: "<Company> customer service number" template (Claude Design
   "Customer Service Template", 2026-10-28; claude.ai/design project aba4aedc-dd12-414e-8a8b-241afb869679). Built by
   scripts/bake-customer-service.py — edit the data or the bake, never a page. Tokens only. */

.cs { max-width: 1312px; margin: 0 auto; padding: var(--space-24) clamp(16px, 4.45vw, 64px) 0; box-sizing: border-box; color: var(--ink); font-family: var(--font-sans); display: flex; flex-direction: column; gap: clamp(48px, 6.67vw, 96px); }
.cs a { color: var(--accent); }
.cs h1, .cs h2 { font-family: var(--font-sans); color: var(--ink); margin: 0; }
.cs-crumbs { display: flex; flex-wrap: wrap; gap: var(--space-8); font-size: 13px; color: var(--ink-3); }
.cs-crumbs a { color: var(--ink-3); text-decoration: none; }
.cs-crumbs span[aria-hidden] { color: var(--accent-2); }
.cs-crumbs [aria-current] { color: var(--ink); font-weight: 600; }

.cs-head { display: flex; flex-direction: column; gap: var(--space-12); max-width: 1040px; }
.cs-head h1 { font-size: clamp(28px, 3.9vw, 56px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.06; text-wrap: balance; }
.cs-em { font-family: var(--font-serif); font-style: italic; font-weight: 600; color: var(--accent); letter-spacing: -0.01em; }
.cs-tested { display: flex; align-items: center; gap: var(--space-8); font-size: 13.5px; color: var(--ink-3); margin: 0; }
.cs-tested svg { stroke: var(--good); flex-shrink: 0; }
.cs-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.cs-answer-wrap { display: flex; flex-direction: column; gap: clamp(16px, 1.67vw, 24px); }
.cs-answer { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 20px clamp(24px, 4.45vw, 64px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-10); padding: clamp(20px, 2.23vw, 32px); box-shadow: var(--shadow); }
.cs-label { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.cs-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cs a.cs-call { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
.cs-call__btn { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; background: var(--fill); box-shadow: var(--shadow-cta); display: flex; align-items: center; justify-content: center; color: var(--on-fill); }
.cs-call__btn .cs-ico { width: 22px; height: 22px; }
.cs-call__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-call__num { font-size: clamp(30px, 3vw, 44px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-call__hint { font-size: 13px; color: var(--ink-3); }
.cs-fast { font-size: 15px; font-weight: 700; margin: 0; }

.cs-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 6px; }
.cs-steps > li { display: flex; align-items: flex-start; gap: 6px; }
.cs-step { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cs-chip { display: flex; align-items: center; gap: var(--space-8); height: 44px; box-sizing: border-box; padding: 0 6px 0 14px; border-radius: var(--radius-pill); background: var(--surface-2); font-size: 15px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.cs-chip--wait { padding: 0 14px 0 12px; }
.cs-chip .cs-ico { stroke: var(--accent); }
.cs-key { width: 32px; height: 32px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.cs-say { height: 32px; display: flex; align-items: center; padding: 0 12px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-sm); font-weight: 700; color: var(--ink); }
.cs-chip b { color: var(--ink); }
.cs-cap { font-size: 11.5px; line-height: 1.25; color: var(--ink-3); text-align: center; max-width: 120px; }
.cs-arrow { height: 44px; display: flex; align-items: center; color: var(--accent-2); }
.cs-arrow .cs-ico { width: 14px; height: 14px; }
.cs-steps > li.cs-person, .cs-person { display: flex; align-items: center; gap: var(--space-8); height: 44px; box-sizing: border-box; padding: 0 16px 0 12px; border-radius: var(--radius-pill); background: var(--good-tint); border: 1px solid var(--good-line); color: var(--good); font-size: 15px; font-weight: 700; white-space: nowrap; }
.cs-direct { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-8); background: var(--good-tint); border: 1px solid var(--good-line); }
.cs-direct__dot { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--good); color: var(--on-solid); display: flex; align-items: center; justify-content: center; }
.cs-direct b { display: block; font-size: 16px; color: var(--good); }
.cs-direct span { font-size: 14px; color: var(--ink-2); }

.cs-facts { grid-column: 1 / -1; list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 14px; color: var(--ink-2); }
.cs-facts li { display: flex; align-items: center; gap: var(--space-8); }
.cs-facts .cs-ico { stroke: var(--accent); }
.cs-facts strong { color: var(--ink); }

.cs-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 14px clamp(16px, 1.67vw, 24px); border-radius: var(--radius-9); background: var(--accent-tint); border: 1px solid var(--accent-line); }
.cs-cta__msg { display: flex; align-items: center; gap: 14px; flex: 1 1 420px; min-width: 0; margin: 0; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.cs-cta__msg img { width: 40px; height: 40px; border-radius: var(--radius-4); flex-shrink: 0; }
.cs-cta__msg b { color: var(--ink); }
.cs-badges { display: flex; flex-wrap: wrap; gap: var(--space-8); }

.cs-cols { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(48px, 4.45vw, 64px); }
.cs-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: clamp(48px, 4.45vw, 64px); }
.cs-side { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: clamp(48px, 4.45vw, 56px); }
.cs-sec { display: flex; flex-direction: column; gap: var(--space-16); }
.cs-sec h2 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.cs-side h2 { font-size: clamp(22px, 1.67vw, 24px); }
.cs-sub { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }

.cs-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-tag { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 9px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 600; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2); }
.cs-tag .cs-ico { width: 13px; height: 13px; }
.cs-tag--path { background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent); }
.cs-tag--path i { width: 14px; height: 14px; border-radius: 50%; background: var(--fill); }
.cs-tag--person { background: var(--good-tint); border-color: var(--good-line); color: var(--good); }
.cs-tag--hangup { background: var(--bad-tint); border-color: var(--bad-line); color: var(--bad); }

.cs-tree { display: flex; flex-direction: column; gap: 4px; padding: var(--space-8); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-9); box-shadow: var(--shadow-sm); }
.cs-tree ul { list-style: none; margin: 0; padding: 0 0 0 clamp(20px, 3vw, 40px); display: flex; flex-direction: column; gap: 4px; }
.cs-tree > ul { padding: 0; }
.cs-tree li { list-style: none; }
.cs-tree details > summary { list-style: none; cursor: pointer; }
.cs-tree details > summary::-webkit-details-marker { display: none; }
.cs-row { display: flex; align-items: flex-start; gap: var(--space-12); min-height: 52px; box-sizing: border-box; padding: 10px 12px; border-radius: var(--radius-7); border: 1px solid transparent; }
.cs-row--path { background: var(--accent-tint); border-color: var(--accent-line); }
.cs-row .cs-key { flex-shrink: 0; font-size: 15px; }
.cs-row--path .cs-key { background: var(--fill); box-shadow: none; }
.cs-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 5px; }
.cs-row__label { font-size: 15.5px; font-weight: 500; line-height: 1.3; color: var(--ink); }
.cs-row--path .cs-row__label { font-weight: 700; }
.cs-row__note { font-size: 13.5px; line-height: 1.4; color: var(--ink-3); }
.cs-row .cs-tag { align-self: flex-start; height: 26px; }
.cs-row__more { display: flex; align-items: center; gap: 6px; padding-top: 6px; font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.cs-row__more .cs-ico { width: 18px; height: 18px; stroke: var(--accent-2); transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1); }
.cs-tree details[open] > summary .cs-row__more .cs-ico { transform: rotate(90deg); }

.cs-faq { display: flex; flex-direction: column; gap: var(--space-8); }
.cs-faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-8); }
.cs-faq summary { display: flex; align-items: center; gap: var(--space-12); min-height: 56px; padding: 14px 18px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
.cs-faq summary::-webkit-details-marker { display: none; }
.cs-faq summary span { flex: 1; }
.cs-faq summary .cs-ico { width: 18px; height: 18px; stroke: var(--accent-2); transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1); }
.cs-faq details[open] summary .cs-ico { transform: rotate(180deg); }
.cs-faq p { margin: 0; padding: 0 18px 18px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

.cs-other { display: flex; flex-direction: column; padding: 4px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-9); }
.cs-other__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding: 14px 0; }
.cs-other__row + .cs-other__row { border-top: 1px solid var(--line); }
.cs-other__row b { display: block; font-size: 15px; }
.cs-other__row small { font-size: 13px; color: var(--ink-3); }
.cs-other__row a { font-size: 15px; font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; min-height: 44px; display: flex; align-items: center; }

.cs-similar__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); }
.cs-similar__head a { font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: var(--space-8); }
.cs a.cs-card { display: flex; flex-direction: column; gap: var(--space-8); padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-8); text-decoration: none; color: var(--ink); transition: transform .6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow .6s cubic-bezier(0.23, 1, 0.32, 1); }
.cs a.cs-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.cs-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); }
.cs-card__top b { font-size: 16px; letter-spacing: -0.01em; line-height: 1.25; }
.cs-card__top span { font-size: 13.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; }
.cs-mini .cs-key, .cs-mini .cs-say { width: auto; min-width: 24px; height: 24px; font-size: 12px; box-shadow: none; background: var(--surface-2); padding: 0 6px; box-sizing: border-box; }
.cs-mini .cs-say { padding: 0 9px; }
.cs-mini i { font-style: normal; color: var(--accent-2); }
.cs-mini em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--good); }
.cs-card__date { font-size: 12.5px; color: var(--ink-3); }

.cs-trust { display: flex; align-items: flex-start; gap: var(--space-12); padding-top: 20px; border-top: 1px solid var(--line); max-width: 820px; margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }
.cs-trust .cs-ico { width: 18px; height: 18px; margin-top: 1px; }

/* Hub */
.cs-hub-head { display: flex; flex-direction: column; gap: var(--space-12); max-width: 900px; }
.cs-hub-head p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.cs-country { display: flex; flex-direction: column; gap: var(--space-16); }
.cs-country h2 { font-size: clamp(22px, 2vw, 28px); font-weight: 700; letter-spacing: -0.03em; }

/* Badges under the H1: derived from the call-tested data (bake `stats`). */
.cs-badges-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cs-badge { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.cs-badge b { color: var(--ink); font-weight: 700; }
.cs-badge .cs-ico { width: 14px; height: 14px; stroke: var(--accent); }
.cs-badge--good { background: var(--good-tint); border-color: var(--good-line); color: var(--good); }
.cs-badge--good b, .cs-badge--good .cs-ico { color: var(--good); stroke: var(--good); }
.cs-badge--mid { background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent); }
.cs-badge--mid b { color: var(--accent); }
.cs-badge--bad { background: var(--bad-tint); border-color: var(--bad-line); color: var(--bad); }
.cs-badge--bad b { color: var(--bad); }

/* "Let OsmO call <company>" section */
.cs-osmo { padding: clamp(20px, 2.23vw, 32px); border-radius: var(--radius-10); background: var(--bg-2); border: 1px solid var(--line); }
.cs-osmo__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--space-24); align-items: center; }
.cs-osmo__img { width: 100%; height: auto; border-radius: var(--radius-8); display: block; }
.cs-osmo .k-demo { margin: 0; }
.cs-osmo__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--space-12) var(--space-24); }
.cs-osmo__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.cs-osmo__list .cs-ico { width: 20px; height: 20px; stroke: var(--accent); margin-top: 1px; }
.cs-osmo__list b { color: var(--ink); }

/* Copy button next to a number (cs.js shows it only when the clipboard API exists). */
.cs-copy { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 36px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--btn2-line); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.cs-copy[hidden] { display: none; }
.cs-copy .cs-ico { stroke: var(--accent); }
.cs-copy.is-copied { background: var(--good-tint); border-color: var(--good-line); color: var(--good); }
.cs-copy.is-copied .cs-ico { stroke: var(--good); }
.cs-col > .cs-copy { margin-left: 66px; }
.cs-other__num { display: flex; align-items: center; gap: var(--space-8); }
.cs-other__num .cs-copy { height: 32px; padding: 0 10px; font-size: 13px; }