/* ==========================================================================
   CUSTOMER SERVICE USE CASE · V8 (21 Oct 2026)
   Shared hero frame, band and ticks from ec1.css (cs- prefix), the shared chat widget, own sections.
   Generated by tools/cs1/make_css.py: edit own.css or the shared sources, not this file.
   ========================================================================== */
.cs-head { max-width: 1120px; margin-inline: auto; text-align: center; }
.cs-head .lede { margin: 18px auto 0; max-width: 50em; text-wrap: pretty; }
.cs-ticks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.cs-ticks li { position: relative; padding-left: 34px; font: 500 16.5px/1.5 var(--font); color: var(--ink-2); }
.cs-ticks li::before { content: ''; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--green-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.6 8.4 2.9 2.9 5.9-6.4' fill='none' stroke='%23167947' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.cs-hero { overflow: hidden; padding-block: clamp(32px, 4vw, 56px) clamp(64px, 7vw, 104px); }
.cs-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.cs-hero__title { font-size: 48px; line-height: 1.08; letter-spacing: -.04em; text-wrap: balance; }
.cs-hero__lede { margin: 22px 0 0; max-width: 30em; font: 500 clamp(17px, 1.4vw, 20px)/1.55 var(--font); color: var(--ink-2); }
.cs-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cs-pdp { position: relative; padding: 22px; border-radius: 36px; background: radial-gradient(70% 60% at 100% 0%, #FFE1EC 0%, transparent 60%), radial-gradient(60% 60% at 0% 100%, #DDE2FF 0%, transparent 60%), #F1F2FA; }
.cs-pdp__in { position: relative; min-height: 560px; transition: opacity .5s; }
.cs-pdp.is-fade .cs-pdp__in { opacity: 0; }
.cs-pdp__win { position: absolute; left: 0; top: 0; width: 100%; bottom: 70px; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: var(--card-shadow); }
.cs-pdp__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #F4F5F8; }
.cs-pdp__bar i { width: 9px; height: 9px; border-radius: 50%; background: #D9DCE5; }
.cs-pdp__bar span { margin-left: 10px; padding: 5px 12px; border-radius: var(--r-pill); background: #fff; font: 500 11px/1 var(--font); color: var(--muted); }
.cs-pdp__nav { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); font: 500 12px/1 var(--font); color: var(--ink-2); }
.cs-pdp__nav b { margin-right: auto; font: 800 15px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.cs-pdp__cart { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--sand); color: var(--ink); font-size: 17px; }
.cs-pdp__page { display: grid; gap: 10px; width: 38%; padding: 16px 18px; }
.cs-ask { display: flex; align-items: center; gap: 20px; max-width: 900px; margin: clamp(40px, 5vw, 56px) auto 0; padding: clamp(18px, 2.5vw, 26px) clamp(20px, 3vw, 32px); border-radius: var(--card-r); background: #fff; box-shadow: var(--card-shadow); }
.cs-ask__bot { display: block; width: 64px; height: 64px; flex: none; }
.cs-ask__t { flex: 1; margin: 0; font: 700 clamp(20px, 2vw, 25px)/1.25 var(--font); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.cs-ask .btn { flex: none; }
.cs-ticks b { color: var(--ink); }
.cs-ticks a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1000px) {
  .cs-hero__grid, .cs-mg { grid-template-columns: minmax(0, 1fr); }
  .cs-hero__copy, .cs-pdp { max-width: 680px; }
  .cs-hero__grid, .cs-gr, .cs-mg { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .cs-hero__title { font-size: clamp(28px, 7.8vw, 48px); }
  .cs-pdp { padding: 12px; border-radius: 26px; }
  .cs-pdp__in { min-height: 600px; }
  .cs-pdp__win { bottom: auto; height: 150px; }
  .cs-pdp__nav span:not(.cs-pdp__cart) { display: none; }
  .cs-pdp__page { display: none; }
  .cs-ask { flex-direction: column; text-align: center; }
  .cs-ask .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
}
@keyframes csMsg { from { opacity: 0; transform: translateY(10px); } }
.cs-pdp__chat { position: absolute; right: -8px; bottom: -8px; width: 62%; height: 500px; }
@media (max-width: 700px) { .cs-pdp__chat { left: 0; right: 0; bottom: 0; width: auto; height: 500px; } }
.cs-pdp.is-pre [data-w]:not(.is-in) { display: none; }
.cs-pdp [data-w].is-in { animation: csMsg .45s var(--ease-soft) both; }
.cs-pdp.is-fade .cs-pdp__in { opacity: 0; }

/* === WIDGET START (tools/industry/widget.css, shared by every industry hero) === */
.aw { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: var(--card-shadow), 0 0 0 1px rgba(23, 23, 43, .06); }
.aw-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: linear-gradient(180deg, #ECEEFD 0%, #F6F7FE 70%, #fff 100%); border-bottom: 1px solid #EEF0F4; color: var(--ink); }
.aw-av { position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #E3E6FA; }
.aw-av__bot { display: block; width: 34px; height: 34px; }
.aw-av__bot > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.aw-who { min-width: 0; }
.aw-who b { display: block; font: 800 13.5px/1.2 var(--font); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.aw-icons { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--ink-2); }
.aw-icons i { display: grid; place-items: center; }
.aw-icons svg { display: block; width: 18px; height: 18px; }
.aw-icons i:first-child svg { width: 17px; height: 17px; }
.aw-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 14px; overflow: hidden; background: #fff; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 28px); mask-image: linear-gradient(180deg, transparent 0, #000 28px); }
.aw-body > * { flex: none; }
.aw-u { align-self: flex-end; max-width: 84%; margin: 0; padding: 9px 14px; border-radius: 12px; background: #F5F6F8; box-shadow: inset 0 0 0 1px #E3E5EA; font: 500 13.5px/1.4 var(--font); color: var(--ink); }
.aw-a { align-self: flex-start; max-width: 94%; margin: 0; font: 400 13.5px/1.5 var(--font); color: var(--ink); }
.aw-u--voice { display: inline-flex; flex-direction: column; gap: 6px; font-style: italic; }
.aw-wave { display: flex; align-items: center; gap: 3px; height: 16px; }
.aw-wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--accent); animation: awWave .6s ease-in-out infinite alternate; }
.aw-wave i:nth-child(2n) { animation-delay: -.2s; } .aw-wave i:nth-child(3n) { animation-delay: -.4s; }
@keyframes awWave { from { transform: scaleY(.3); } }
.aw-card { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #E3E5EA; }
.aw-card__img { display: grid; place-items: center; height: 78px; border-radius: 10px; overflow: hidden; background: #F2F3F5; }
.aw-card__img img { width: 100%; height: 100%; object-fit: cover; }
.aw-card__img img.is-contain { object-fit: contain; mix-blend-mode: multiply; }
.aw-card__img .aw-mat { width: 62px; height: 34px; margin: 0; }
.aw-card__info { display: grid; gap: 4px; min-width: 0; }
.aw-tag { justify-self: start; padding: 3px 8px; border-radius: 6px; background: var(--green-tint); font: 600 11px/1.3 var(--font); font-style: normal; color: var(--green-ink); }
.aw-card b { font: 700 13px/1.25 var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-price { display: flex; align-items: baseline; gap: 6px; }
.aw-price strong { font: 700 13.5px/1 var(--font); color: var(--accent); }
.aw-price s { font: 500 12px/1 var(--font); color: var(--muted); }
.aw-btn { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 3px; padding: 8px 10px; border-radius: 999px; background: var(--accent); font: 700 12px/1 var(--font); color: #fff; }
.aw-btn::before { content: '+'; font: 600 16px/1 var(--font); }
.aw-chips { align-self: flex-end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.aw-chips i { padding: 8px 12px; border-radius: 12px; background: #F5F6F8; box-shadow: inset 0 0 0 1px #E3E5EA; font: 500 12.5px/1 var(--font); font-style: normal; color: var(--ink); transition: background-color .25s, color .25s, box-shadow .25s, transform .25s; }
.aw-chips i.is-on { background: var(--accent); color: #fff; box-shadow: none; transform: scale(.96); }
.aw-done { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--green-tint); font: 600 12.5px/1.3 var(--font); color: var(--green-ink); }
.aw-done svg { width: 14px; height: 14px; flex: none; }
.aw-typing { display: none; align-self: flex-start; gap: 4px; margin: 0; padding: 6px 0; }
.aw-typing.is-on { display: inline-flex; }
.aw-typing i { width: 7px; height: 7px; border-radius: 50%; background: #B9BFEA; animation: awDot 1s ease-in-out infinite; }
.aw-typing i:nth-child(2) { animation-delay: .15s; } .aw-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes awDot { 50% { transform: translateY(-4px); opacity: .5; } }
.aw-input { display: flex; align-items: center; gap: 8px; margin: 0 12px 12px; padding: 6px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #E3E5EA; }
.aw-input span { flex: 1; min-width: 0; font: 400 12.5px/1 var(--font); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-ib { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px #E3E5EA; font-style: normal; color: var(--ink); }
.aw-ib svg { width: 16px; height: 16px; }
.aw-ib--mic { background: #EEF0FB; box-shadow: none; color: var(--accent); }
@media (max-width: 700px) { .aw-icons { gap: 10px; } .aw-icons svg { width: 16px; height: 16px; } }
@media (prefers-reduced-motion: reduce) { .aw-wave i, .aw-typing i { animation: none; } }
/* === WIDGET END === */

/* ==========================================================================
   CUSTOMER SERVICE USE CASE · own sections (21 Oct 2026)
   ========================================================================== */
.page-cs main .h2 { text-wrap: balance; }

/* Hero: the store's help page behind the widget */
.cs-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cs-pdp__page { display: grid; gap: 10px; width: 40%; padding: 18px; }
.cs-help__h { font: 700 17px/1.2 var(--font); letter-spacing: -.01em; color: var(--ink); }
.cs-help__search { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 15px; color: var(--muted); }
.cs-help__search i, .cs-help__tile i { font: 500 11.5px/1.2 var(--font); font-style: normal; }
.cs-help__tile { display: flex; align-items: center; gap: 9px; padding: 10px 11px; border-radius: 12px; background: var(--sand); font-size: 17px; color: var(--accent); }
.cs-help__tile i { font-weight: 600; color: var(--ink); }

/* The five use cases: copy and picture side by side, sides alternating */
.cs-uc { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.cs-uc--flip { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.cs-uc--flip .cs-uc__copy { order: 2; }
.cs-uc__copy .lede { margin-top: 18px; text-wrap: pretty; }
.cs-uc__vis { display: grid; justify-items: center; }
.cs-uc__vis > * { width: 100%; max-width: 520px; }
.cs-uc__vis.is-pre [data-p]:not(.is-in) { opacity: 0; transform: translateY(10px); }
.cs-uc__vis [data-p] { transition: opacity .45s, transform .5s var(--ease-out); }

/* Shared card and chat lines */
.cs-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--card-r); background: #fff; box-shadow: var(--card-shadow); }
.cs-card__head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cs-bot { display: block; width: 32px; height: 32px; flex: none; }
.cs-bot > svg, .cs-ask__bot > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cs-card__head b { font: 800 13px/1 var(--font); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.cs-card__head small { margin-left: auto; font: 600 11.5px/1 var(--font); color: var(--muted); }
.cs-u { align-self: flex-end; max-width: 84%; margin: 0; padding: 9px 14px; border-radius: 12px; background: #F5F6F8; box-shadow: inset 0 0 0 1px #E3E5EA; font: 500 13.5px/1.4 var(--font); color: var(--ink); }
.cs-a { align-self: flex-start; max-width: 92%; margin: 0; font: 400 13.5px/1.5 var(--font); color: var(--ink); }
.cs-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-pill); font: 700 11.5px/1 var(--font); font-style: normal; white-space: nowrap; }
.cs-tag svg { width: 13px; height: 13px; flex: none; }
.cs-tag .icon { font-size: 14px; }
.cs-tag--lang { background: var(--t-indigo); color: var(--i-indigo); }
.cs-tag--ok { background: var(--green-tint); color: var(--green-ink); }
.cs-tag--now { background: var(--t-sky); color: var(--i-sky); }
.cs-tag--wait { background: #FFF1E3; color: #9A4A12; transition: background-color .4s, color .4s; }
.cs-bk.is-confirmed .cs-tag--wait { background: var(--green-tint); color: var(--green-ink); }

/* Order status */
.cs-ord__top { display: flex; align-items: center; gap: 12px; }
.cs-ord__top img { width: 48px; height: 48px; flex: none; border-radius: 12px; object-fit: cover; }
.cs-ord__top b { display: block; font: 700 15px/1.2 var(--font); color: var(--ink); }
.cs-ord__top small { display: block; margin-top: 2px; font: 500 12.5px/1.3 var(--font); color: var(--muted); }
.cs-ord__top .cs-tag { margin-left: auto; }
.cs-track { list-style: none; margin: 4px 0 6px; padding: 14px 4px 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.cs-track::before { content: ''; position: absolute; left: 10%; right: 10%; top: 21px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) 0 75%, var(--line-2) 75%); }
.cs-track li { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; }
.cs-track i { width: 17px; height: 17px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--line-2); }
.cs-track li.is-done i { background: var(--accent); box-shadow: none; }
.cs-track li.is-now i { background: #fff; box-shadow: inset 0 0 0 4px var(--accent), 0 0 0 5px rgba(72, 87, 194, .18); }
.cs-track b { font: 700 11.5px/1.2 var(--font); color: var(--ink); }
.cs-track li.is-next b { color: var(--muted); }
.cs-track small { font: 500 11px/1 var(--font); color: var(--muted); }
.cs-lock { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; padding: 8px 12px; border-radius: 12px; background: var(--sand); font: 600 12px/1.3 var(--font); color: var(--ink-2); }
.cs-lock .icon { font-size: 16px; color: var(--accent); }

/* Complaints: ticket and the patterns card */
.cs-stack { display: grid; gap: 14px; }
.cs-tk__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cs-tk__head b { font: 700 15px/1.2 var(--font); color: var(--ink); }
.cs-tk__head small { font: 500 12.5px/1.2 var(--font); color: var(--muted); }
.cs-tk__head .cs-tag { margin-left: auto; }
.cs-tk__body { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: var(--sand); }
.cs-tk__photo { width: 54px; height: 54px; flex: none; border-radius: 10px; overflow: hidden; }
.cs-tk__photo img { width: 100%; height: 100%; object-fit: cover; }
.cs-tk__body b { display: block; font: 700 13.5px/1.2 var(--font); color: var(--ink); }
.cs-tk__body small { display: block; margin-top: 3px; font: 500 12px/1.3 var(--font); color: var(--muted); }
.cs-tk__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.cs-tk__steps li { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--font); color: var(--muted); }
.cs-tk__steps i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-2); }
.cs-tk__steps li.is-done { color: var(--green-ink); } .cs-tk__steps li.is-done i { background: #22C08F; box-shadow: none; }
.cs-tk__steps li.is-now { color: var(--i-sky); } .cs-tk__steps li.is-now i { background: var(--c-sky); box-shadow: 0 0 0 3px rgba(11, 110, 153, .18); }
.cs-tk__check { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); }
.cs-tk__check span { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--font); color: var(--ink); white-space: nowrap; }
.cs-tk__check i { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 9px; background: var(--sand); font: 500 12px/1 var(--font); font-style: normal; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-pat__head { display: flex; align-items: baseline; justify-content: space-between; }
.cs-pat__head b { font: 700 14px/1.2 var(--font); color: var(--ink); }
.cs-pat__head small { font: 600 12px/1 var(--font); color: var(--muted); }
.cs-pat__row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 38px; align-items: center; gap: 10px; }
.cs-pat__row i { font: 600 12.5px/1.2 var(--font); font-style: normal; color: var(--ink-2); }
.cs-pat__row em { height: 10px; border-radius: 5px; background: linear-gradient(90deg, #7B5CF0, #4857C2); transform-origin: 0 50%; transform: scaleX(var(--v)); transition: transform .9s var(--ease-out); }
.cs-uc__vis.is-pre .cs-pat:not(.is-in) em { transform: scaleX(0); }
.cs-pat__row b { font: 700 12.5px/1 var(--font); color: var(--ink); text-align: right; }

/* Flags: the conversations list */
.cs-inbox { gap: 6px; }
.cs-inbox__head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px 8px; border-bottom: 1px solid var(--line); }
.cs-inbox__head b { font: 700 15px/1.2 var(--font); color: var(--ink); }
.cs-inbox__head small { font: 700 12px/1 var(--font); color: #B4235A; }
.cs-inbox__row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; }
.cs-inbox__row.is-sel { background: var(--sand); box-shadow: inset 0 0 0 1.5px var(--accent); }
.cs-inbox__av { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--t-indigo); font: 800 13px/1 var(--font); color: var(--i-indigo); }
.cs-inbox__txt { flex: 1; min-width: 0; }
.cs-inbox__txt b { display: block; font: 700 13px/1.2 var(--font); color: var(--ink); }
.cs-inbox__txt small { display: block; margin-top: 2px; font: 500 12px/1.3 var(--font); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-flag { flex: none; padding: 5px 9px; border-radius: var(--r-pill); font: 700 11px/1 var(--font); font-style: normal; white-space: nowrap; }
.cs-flag--person { background: #FFE9F2; color: #B4235A; }
.cs-flag--frus { background: #FFF1E3; color: #9A4A12; }
.cs-flag--sens { background: var(--t-violet); color: var(--i-violet); }
.cs-flag--ok { background: var(--green-tint); color: var(--green-ink); }
.cs-inbox__open { display: grid; gap: 8px; margin-top: 6px; padding: 12px; border-radius: 14px; background: var(--sand); }
.cs-inbox__open span { display: flex; align-items: center; gap: 8px; font: 600 12.5px/1.3 var(--font); color: var(--ink-2); }
.cs-inbox__open .icon { font-size: 16px; color: var(--accent); }
.cs-inbox__by img { width: 22px; height: 22px; flex: none; border-radius: 50%; object-fit: cover; }

/* Bookings: the request card */
.cs-req { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px 12px; align-items: center; padding: 14px; border-radius: 16px; background: var(--sand); }
.cs-req__head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cs-req__head b { font: 700 14px/1.2 var(--font); color: var(--ink); }
.cs-req__cal { display: grid; justify-items: center; padding: 7px 0; border-radius: 12px; background: #fff; box-shadow: 0 8px 18px -12px rgba(23, 23, 43, .4); }
.cs-req__cal small { font: 800 10px/1 var(--font); letter-spacing: .08em; color: var(--accent); }
.cs-req__cal b { font: 800 22px/1.1 var(--font); color: var(--ink); }
.cs-req__cal em { font: 600 10.5px/1 var(--font); font-style: normal; color: var(--muted); }
.cs-req__info b { display: block; font: 700 14px/1.25 var(--font); color: var(--ink); }
.cs-req__info small { display: block; margin-top: 3px; font: 500 12px/1.35 var(--font); color: var(--ink-2); }
.cs-req__ok { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px; border-radius: var(--r-pill); background: var(--green-tint); font: 700 12.5px/1.2 var(--font); color: var(--green-ink); }
.cs-req__ok img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.cs-req__ok svg { width: 14px; height: 14px; flex: none; }

/* Closing band sits below the last use case */
.cs-uc-sec .cs-ask { margin-top: clamp(48px, 6vw, 72px); }

/* Responsive */
@media (max-width: 1000px) {
  .cs-uc { grid-template-columns: minmax(0, 1fr); }
  .cs-uc--flip .cs-uc__copy { order: 0; }
  .cs-uc__copy { max-width: 680px; }
  .cs-uc__vis { justify-items: start; }
}
@media (max-width: 700px) {
  .cs-pdp__page { display: none; }
  .cs-track b { font-size: 10px; }
  .cs-track small { font-size: 9.5px; }
  .cs-pat__row { grid-template-columns: 110px minmax(0, 1fr) 34px; }
  .cs-tk__check { flex-direction: column; align-items: stretch; }
  .cs-ord__top .cs-tag { display: none; }
}