/* Client Hub page (/client-access/). Approved 2026-10-26 from _mockups/client-hub-page-v2. */

/* ===== Hero: always dark, in both themes ===== */
.ch-hero { position: relative; overflow: hidden; background: #141518; color: #EFF0F1; padding: 72px 0 88px; isolation: isolate; }
.ch-hero__glow { position: absolute; z-index: -1; right: -180px; top: -220px; width: 760px; height: 760px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(221,98,38,0.38), rgba(221,98,38,0.10) 55%, transparent 72%); pointer-events: none; }
.ch-hero__rings { position: absolute; z-index: -1; right: 4%; top: 50%; width: 560px; height: 560px; transform: translateY(-50%); pointer-events: none; }
.ch-hero__rings i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(221,98,38,0.28); animation: ch-spin 40s linear infinite; }
.ch-hero__rings i:nth-child(2) { inset: 70px; border-style: dashed; border-color: rgba(255,255,255,0.12); animation-duration: 60s; animation-direction: reverse; }
.ch-hero__rings i:nth-child(3) { inset: 140px; border-color: rgba(221,98,38,0.4); }
.ch-hero__rings i:nth-child(3)::after { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--cta); box-shadow: 0 0 18px 4px rgba(221,98,38,0.7); }
.ch-hero__grid { position: absolute; z-index: -2; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 70%); }
.ch-hero .breadcrumb, .ch-hero .breadcrumb a { color: #a7abb2; }
.ch-hero__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px; }
.ch-hero__copy { flex: 1 1 480px; max-width: 620px; }
.ch-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 0.78rem var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: #f3915f; padding: 6px 12px; border-radius: 999px; background: rgba(221,98,38,0.12); border: 1px solid rgba(221,98,38,0.35); margin-bottom: 18px; }
.ch-hero h1 { color: #fff; font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 18px; }
.ch-hero h1 span { color: var(--cta); }
.ch-hero__lede { font-size: 1.12rem; line-height: 1.6; color: #c9cbce; margin: 0 0 26px; }
.ch-hero .hub-quick { margin-top: 0; }
.ch-hero .hub-quick__chip { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: #fff; backdrop-filter: blur(6px); }
.ch-hero .hub-quick__chip--ok { background: rgba(221,98,38,0.14); border-color: rgba(221,98,38,0.55); color: #fff; }

/* Live support-desk panel */
.ch-desk { flex: 0 1 380px; position: relative; padding: 24px; border-radius: 22px; background: rgba(32,34,38,0.72); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 30px 80px -30px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.06); backdrop-filter: blur(14px); }
.ch-desk::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(221,98,38,0.8), transparent 40%, transparent 70%, rgba(221,98,38,0.4)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.ch-desk__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ch-desk__head b { font: 700 0.8rem var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: #a7abb2; }
.ch-desk__head .material-icons { color: var(--cta); }
.ch-desk .office-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 14px 16px; border-radius: 14px; background: rgba(0,0,0,0.3); font-size: 0.9rem; white-space: normal; color: #EFF0F1; }
.ch-desk .office-status .os-state { color: #ff9a6b; font-size: 1.05rem; }
.ch-desk .office-status.is-open .os-state { color: #f0803f; }
.ch-desk .office-status .os-time, .ch-desk .office-status .os-time * , .ch-desk .office-status .os-when, .ch-desk .office-status .os-emerg { color: #c9cbce; }
.ch-desk .office-status .os-time { margin-left: auto; }
.ch-desk__list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 2px; }
.ch-desk__list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 4px; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.92rem; color: #c9cbce; }
.ch-desk__list li:last-child { border-bottom: 0; }
.ch-desk__list b { color: #fff; font-family: var(--font-display); }
.ch-pri { display: inline-flex; align-items: center; gap: 8px; }
.ch-pri::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #a7abb2; }
.ch-pri--crit::before { background: #DD6226; box-shadow: 0 0 10px #DD6226; }
.ch-pri--high::before { background: #f3915f; }
.ch-pri--norm::before { background: #a7abb2; }
.ch-desk__foot { margin: 14px 0 0; font-size: 0.8rem; color: #a7abb2; }

/* ===== Bento cards ===== */
.ch-cards { padding: 72px 0 48px; }
.ch-cards .section-head { margin-bottom: 28px; }
.client-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.client-grid > .client-card { grid-column: span 2; }
.client-grid > .client-card--feature { grid-column: span 4; grid-row: span 2; }
.client-grid > .client-card--learn { grid-column: span 4; }
.client-card { border-radius: 22px; isolation: isolate; }
.client-card::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(221,98,38,0.10), transparent 45%); opacity: 0; transition: opacity .25s; }
.client-card:hover::after, .client-card:focus-within::after { opacity: 1; }
.client-card:hover, .client-card:focus-within { box-shadow: 0 0 0 1px var(--cta), 0 28px 60px -30px rgba(221,98,38,0.55); }
.client-card .btn .ch-arrow { display: inline-block; transition: transform .2s; }
.client-card:hover .btn .ch-arrow { transform: translateX(4px); }
.client-card__num { font: 800 0.8rem var(--font-display); color: var(--accent); letter-spacing: 0.1em; }

/* Featured portal card */
.client-card--feature { padding: 40px; background: #141518; border-color: #141518; }
.client-card--feature::after { background: radial-gradient(520px circle at var(--mx, 80%) var(--my, 100%), rgba(221,98,38,0.22), transparent 50%); opacity: 1; }
.client-card--feature h3 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.ch-mock { position: relative; z-index: 1; width: 100%; margin: 4px 0 28px; padding: 16px; border-radius: 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); display: grid; gap: 10px; }
.ch-mock__bar { display: flex; gap: 6px; margin-bottom: 4px; }
.ch-mock__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.2); }
.ch-mock__row { display: grid; grid-template-columns: 10px 1fr 64px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.04); }
.ch-mock__row i { width: 10px; height: 10px; border-radius: 50%; }
.ch-mock__row span { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.18); }
.ch-mock__row span + span { height: 18px; border-radius: 999px; }
.ch-mock__row:nth-child(2) i { background: #f3915f; } .ch-mock__row:nth-child(2) span + span { background: rgba(243,145,95,0.35); }
.ch-mock__row:nth-child(3) i { background: #f0803f; } .ch-mock__row:nth-child(3) span:first-of-type { width: 70%; } .ch-mock__row:nth-child(3) span + span { background: rgba(240,128,63,0.3); }
.ch-mock__row:nth-child(4) i { background: #f0803f; } .ch-mock__row:nth-child(4) span:first-of-type { width: 55%; } .ch-mock__row:nth-child(4) span + span { background: rgba(240,128,63,0.3); }
.client-card--feature:hover .ch-mock__row:nth-child(2) { animation: ch-nudge .6s ease; }

/* Learning Center wide card */
.client-card--learn { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.client-card--learn .client-card__top { width: auto; margin: 0; }
.client-card--learn .ch-learn__body { flex: 1 1 260px; }
.client-card--learn .ch-learn__body p { margin: 0; }
.client-card--learn .btn { margin-top: 0; }
.ch-topics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ch-topics span { font-size: 0.78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--bg); color: var(--ink-2); border: 1px solid var(--line); }

/* ===== How getting help works ===== */
.ch-steps { padding: 8px 0 80px; }
.ch-steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: step; position: relative; }
.ch-steps__list::before { content: ""; position: absolute; top: 34px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, var(--cta) 0 8px, transparent 8px 16px); opacity: 0.5; }
.ch-steps__list li { position: relative; text-align: center; padding: 0 12px; }
.ch-steps__num { position: relative; z-index: 1; width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--cta); color: var(--cta); box-shadow: 0 0 0 8px var(--bg); }
.ch-steps__num .material-icons { font-size: 30px; }
.ch-steps__list h3 { margin: 0 0 6px; font-size: 1.15rem; }
.ch-steps__list p { margin: 0 auto; color: var(--ink-2); max-width: 30ch; font-size: 0.95rem; }
.ch-steps__note { text-align: center; margin: 22px 0 0; font-size: 0.85rem; color: var(--ink-2); }

/* Dark mode tweaks */
:root[data-theme="dark"] .client-card--feature { background: #0c0d0f; border-color: #34363b; }
:root[data-theme="dark"] .ch-steps__num { background: #202126; }

@keyframes ch-spin { to { transform: rotate(360deg); } }
@keyframes ch-nudge { 50% { transform: translateX(6px); } }

@media (max-width: 1000px) {
  .client-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-grid > .client-card, .client-grid > .client-card--learn { grid-column: span 1; }
  .client-grid > .client-card--feature, .client-grid > .client-card--learn { grid-column: 1 / -1; grid-row: auto; }
  .ch-hero__rings { opacity: 0.5; right: -200px; }
}
@media (max-width: 700px) {
  .ch-hero { padding: 48px 0 56px; }
  .client-grid { grid-template-columns: 1fr; }
  .client-card--feature { padding: 28px; }
  .ch-steps__list { grid-template-columns: 1fr; gap: 28px; }
  .ch-steps__list::before { display: none; }
  .ch-desk { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-hero__rings i, .client-card--feature:hover .ch-mock__row:nth-child(2) { animation: none; }
  .client-card .btn .ch-arrow { transition: none; }
}

/* Fixes: undo v1's ring decoration on the featured card; centre the steps heading */
.client-card--feature::after { inset: 0; right: 0; bottom: 0; width: auto; height: auto; border: 0; box-shadow: none; border-radius: inherit; }
.ch-steps .section-head { margin-left: auto; margin-right: auto; text-align: center; }
.ch-steps .section-head .eyebrow { justify-content: center; }

/* ===== New hardware & technology card (full width) ===== */
.client-grid > .ch-gear { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: center; gap: 24px 36px; padding: 32px 36px; }
.ch-gear::before { transform: scaleX(1); background: linear-gradient(90deg, var(--cta), transparent 70%); }
.ch-gear__copy { display: flex; gap: 18px; align-items: flex-start; }
.ch-gear__copy h3 { font-size: 1.35rem; }
.ch-gear__copy p { margin: 0; }
.ch-gear__items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ch-gear__items li { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); font-size: 0.86rem; font-weight: 600; color: var(--ink); transition: border-color .2s, transform .2s; }
.ch-gear__items li .material-icons { font-size: 18px; color: var(--cta); }
.ch-gear:hover .ch-gear__items li { border-color: rgba(221,98,38,0.45); }
.ch-gear:hover .ch-gear__items li:nth-child(odd) { transform: translateY(-2px); }
.ch-gear__actions { display: grid; gap: 12px; justify-items: center; }
.ch-gear__actions .btn { margin-top: 0; white-space: nowrap; }
.ch-gear__link { font-weight: 700; font-size: 0.9rem; color: var(--ink); text-decoration: underline; text-decoration-color: var(--cta); text-underline-offset: 4px; }
.ch-gear__link:hover { color: var(--cta-deep, #b84f1c); }
:root[data-theme="dark"] .ch-gear__link:hover { color: #f3915f; }
@media (max-width: 1000px) {
  .client-grid > .ch-gear { grid-template-columns: 1fr; padding: 28px; }
  .ch-gear__actions { justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; }
}
@media (max-width: 560px) {
  .ch-gear__copy { flex-direction: column; }
  .ch-gear__items { grid-template-columns: 1fr 1fr; }
  .ch-gear__actions { grid-auto-flow: row; }
}
@media (prefers-reduced-motion: reduce) { .ch-gear__items li { transition: none; } .ch-gear:hover .ch-gear__items li:nth-child(odd) { transform: none; } }

/* ======================================================================
   THEME FIT — light mode gets a light hero, panel and portal card;
   dark mode keeps the dark versions above.
   ====================================================================== */
:root:not([data-theme="dark"]) .ch-hero { background: var(--surface); color: #1d1f22; border-bottom: 1px solid var(--line); }
:root:not([data-theme="dark"]) .ch-hero__glow { background: radial-gradient(closest-side, rgba(100,106,115,0.14), rgba(100,106,115,0.05) 55%, transparent 72%); }
:root:not([data-theme="dark"]) .ch-hero__grid { background-image: linear-gradient(rgba(29,31,34,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(29,31,34,0.05) 1px, transparent 1px); }
:root:not([data-theme="dark"]) .ch-hero__rings i { border-color: rgba(221,98,38,0.28); }
:root:not([data-theme="dark"]) .ch-hero__rings i:nth-child(2) { border-color: rgba(29,31,34,0.12); }
:root:not([data-theme="dark"]) .ch-hero .breadcrumb, :root:not([data-theme="dark"]) .ch-hero .breadcrumb a { color: #646A73; }
:root:not([data-theme="dark"]) .ch-hero h1 { color: #1d1f22; }
:root:not([data-theme="dark"]) .ch-hero__lede { color: #4a4f57; }
:root:not([data-theme="dark"]) .ch-hero__eyebrow { color: var(--cta); background: var(--surface); border-color: var(--line); }
:root:not([data-theme="dark"]) .ch-hero .hub-quick__chip { background: #fff; border-color: #dcdee1; color: #1d1f22; box-shadow: 0 6px 16px -10px rgba(29,31,34,0.35); }
:root:not([data-theme="dark"]) .ch-hero .hub-quick__chip:hover { border-color: var(--cta); }
:root:not([data-theme="dark"]) .ch-hero .hub-quick__chip--ok { background: #fff; border-color: var(--cta); color: #1d1f22; }

:root:not([data-theme="dark"]) .ch-desk { background: rgba(255,255,255,0.88); border-color: #e2e3e5; box-shadow: 0 30px 70px -36px rgba(29,31,34,0.45); }
:root:not([data-theme="dark"]) .ch-desk__head b { color: #646A73; }
:root:not([data-theme="dark"]) .ch-desk .office-status { background: #f2f3f4; color: #1d1f22; }
:root:not([data-theme="dark"]) .ch-desk .office-status .os-state { color: #b84f1c; }
:root:not([data-theme="dark"]) .ch-desk .office-status.is-open .os-state { color: #DD6226; }
:root:not([data-theme="dark"]) .ch-desk .office-status .os-time,
:root:not([data-theme="dark"]) .ch-desk .office-status .os-time *,
:root:not([data-theme="dark"]) .ch-desk .office-status .os-when,
:root:not([data-theme="dark"]) .ch-desk .office-status .os-emerg { color: #4a4f57; }
:root:not([data-theme="dark"]) .ch-desk__list li { color: #4a4f57; border-bottom-color: rgba(29,31,34,0.08); }
:root:not([data-theme="dark"]) .ch-desk__list b { color: #1d1f22; }
:root:not([data-theme="dark"]) .ch-desk__foot { color: #646A73; }
:root:not([data-theme="dark"]) .ch-pri--crit::before { background: #DD6226; box-shadow: 0 0 8px rgba(221,98,38,0.6); }
:root:not([data-theme="dark"]) .ch-pri--norm::before { background: #646A73; }

/* Portal card: light in light mode */
:root:not([data-theme="dark"]) .client-card--feature { background: var(--surface); border-color: var(--line); color: var(--ink); }
:root:not([data-theme="dark"]) .client-card--feature::after { background: radial-gradient(520px circle at var(--mx, 85%) var(--my, 100%), rgba(221,98,38,0.12), transparent 55%); }
:root:not([data-theme="dark"]) .client-card--feature h3 { color: #1d1f22; }
:root:not([data-theme="dark"]) .client-card--feature p { color: #4a4f57; }
:root:not([data-theme="dark"]) .client-card--feature .client-card__tag { color: var(--cta-deep); border-color: var(--line); background: var(--surface); }
:root:not([data-theme="dark"]) .ch-mock { background: #f6f7f8; border-color: #e2e3e5; }
:root:not([data-theme="dark"]) .ch-mock__bar i { background: #cfd2d6; }
:root:not([data-theme="dark"]) .ch-mock__row { background: #fff; box-shadow: 0 1px 0 #e2e3e5; }
:root:not([data-theme="dark"]) .ch-mock__row span { background: #dcdee1; }
:root:not([data-theme="dark"]) .ch-mock__row:nth-child(2) span + span { background: #f3915f; }
:root:not([data-theme="dark"]) .ch-mock__row:nth-child(3) span + span,
:root:not([data-theme="dark"]) .ch-mock__row:nth-child(4) span + span { background: #f3915f; }
:root:not([data-theme="dark"]) .ch-mock__row:nth-child(2) i { background: var(--cta); }
:root:not([data-theme="dark"]) .ch-mock__row:nth-child(3) i, :root:not([data-theme="dark"]) .ch-mock__row:nth-child(4) i { background: #DD6226; }
:root:not([data-theme="dark"]) .client-card__ghost { color: #1d1f22; border-color: #c9cbce; }
:root:not([data-theme="dark"]) .client-card__ghost:hover { color: #1d1f22; border-color: var(--cta); }

/* Dark mode: keep the bottom "Can't find what you're looking for?" band dark too */
:root[data-theme="dark"] main .section--dark { background: #141518; color: #EFF0F1; border-top: 1px solid #2a2d31; }
:root[data-theme="dark"] main .section--dark h2 { color: #fff; }
:root[data-theme="dark"] main .section--dark .lede--dark, :root[data-theme="dark"] main .section--dark p:not(.lede):not(.eyebrow) { color: #c9cbce; }
:root[data-theme="dark"] main .section--dark .eyebrow { color: #c9cbce; }

/* ===== Status card variants: copy a template from the comment in client-access/index.html ===== */
.st-hero__time { display: block; margin-top: 8px; font-size: 0.8rem; color: var(--ink-2); }
.st-hero--issue { box-shadow: 0 24px 50px -32px rgba(197,106,0,0.5); }
.st-hero--issue::before { background: #DD6226; }
.st-hero--issue .st-hero__ring, .st-hero--issue .st-hero__live { background: #eceef0; color: #b84f1c; }
.st-hero--issue .st-hero__ring::after { border-color: rgba(197,106,0,0.4); }
.st-hero--issue .st-hero__live i { background: #DD6226; }
.st-hero--down { box-shadow: 0 24px 50px -32px rgba(184,79,28,0.5); }
.st-hero--down::before { background: #b84f1c; }
.st-hero--down .st-hero__ring, .st-hero--down .st-hero__live { background: #fdecea; color: #b84f1c; }
.st-hero--down .st-hero__ring::after { border-color: rgba(184,79,28,0.4); }
.st-hero--down .st-hero__live i { background: #b84f1c; }
:root[data-theme="dark"] .st-hero--issue::before { background: #f0a040; }
:root[data-theme="dark"] .st-hero--issue .st-hero__ring, :root[data-theme="dark"] .st-hero--issue .st-hero__live { background: #2e3035; color: #f6b866; }
:root[data-theme="dark"] .st-hero--issue .st-hero__live i { background: #f6b866; }
:root[data-theme="dark"] .st-hero--down::before { background: #f3915f; }
:root[data-theme="dark"] .st-hero--down .st-hero__ring, :root[data-theme="dark"] .st-hero--down .st-hero__live { background: #2e3035; color: #f3915f; }
:root[data-theme="dark"] .st-hero--down .st-hero__live i { background: #f3915f; }

/* ===== "Three steps to fixed" — a looping walk-through of the process.
   js/client-hub.js sets data-stage 0..3 on .ch-flow (stays at 3 with reduced motion or no JS). ===== */
.ch-flow { position: relative; }
.ch-flow .ch-steps__list::before { display: none; }
.ch-flow__bar { position: absolute; z-index: 0; top: 33px; left: calc(100% / 6); right: calc(100% / 6); height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.ch-flow__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--cta-deep, #b84f1c), var(--cta)); box-shadow: 0 0 12px rgba(221,98,38,0.6); transition: width 1s cubic-bezier(.65,0,.35,1); }
.ch-flow[data-stage="2"] .ch-flow__bar i { width: 50%; }
.ch-flow[data-stage="3"] .ch-flow__bar i { width: 100%; }

.ch-flow .ch-steps__num { transition: background .35s, color .35s, transform .35s, box-shadow .35s; }
.ch-flow .ch-steps__list h3 { transition: color .35s; }
/* done + active steps fill orange */
.ch-flow[data-stage="1"] li:nth-child(1) .ch-steps__num,
.ch-flow[data-stage="2"] li:nth-child(-n+2) .ch-steps__num,
.ch-flow[data-stage="3"] li .ch-steps__num { background: var(--cta); color: #fff; }
/* the current step glows and grows */
.ch-flow[data-stage="1"] li:nth-child(1) .ch-steps__num,
.ch-flow[data-stage="2"] li:nth-child(2) .ch-steps__num,
.ch-flow[data-stage="3"] li:nth-child(3) .ch-steps__num { transform: scale(1.12); box-shadow: 0 0 0 8px var(--bg), 0 0 0 14px rgba(221,98,38,0.25), 0 0 30px 8px rgba(221,98,38,0.35); }
.ch-flow[data-stage="1"] li:nth-child(1) h3,
.ch-flow[data-stage="2"] li:nth-child(2) h3,
.ch-flow[data-stage="3"] li:nth-child(3) h3 { color: var(--cta-deep, #b84f1c); }
:root[data-theme="dark"] .ch-flow[data-stage="1"] li:nth-child(1) h3,
:root[data-theme="dark"] .ch-flow[data-stage="2"] li:nth-child(2) h3,
:root[data-theme="dark"] .ch-flow[data-stage="3"] li:nth-child(3) h3 { color: #f3915f; }
.ch-flow[data-stage="1"] li:nth-child(1) .material-icons,
.ch-flow[data-stage="2"] li:nth-child(2) .material-icons,
.ch-flow[data-stage="3"] li:nth-child(3) .material-icons { animation: ch-step-wiggle .6s ease .15s; }

/* Example ticket that follows the same stages */
.ch-ticket { position: relative; max-width: 620px; margin: 36px auto 0; padding: 20px 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 50px -32px rgba(29,31,34,0.45); text-align: left; }
.ch-ticket__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ch-ticket__label { font: 700 0.72rem var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.ch-ticket__status { position: relative; display: inline-grid; }
.ch-ticket__status b { grid-area: 1 / 1; justify-self: end; padding: 4px 12px; border-radius: 999px; font: 700 0.78rem var(--font-display); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.ch-ticket__status .s1 { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.ch-ticket__status .s2 { background: #eceef0; color: var(--cta-deep); }
.ch-ticket__status .s3 { background: #eceef0; color: #DD6226; }
:root[data-theme="dark"] .ch-ticket__status .s2 { color: #f3915f; }
:root[data-theme="dark"] .ch-ticket__status .s3 { background: #2e3035; color: #f0803f; }
.ch-flow[data-stage="1"] .ch-ticket__status .s1, .ch-flow[data-stage="2"] .ch-ticket__status .s2, .ch-flow[data-stage="3"] .ch-ticket__status .s3 { opacity: 1; transform: none; }
.ch-ticket__title { margin: 0 0 14px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.ch-ticket__log { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.ch-ticket__log li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--ink-2); opacity: 0.25; transform: translateX(-6px); transition: opacity .4s, transform .4s; }
.ch-ticket__log .material-icons { font-size: 18px; color: var(--cta); }
.ch-ticket__log .l3 .material-icons { color: #DD6226; }
.ch-flow[data-stage="1"] .l1, .ch-flow[data-stage="2"] .l1, .ch-flow[data-stage="2"] .l2, .ch-flow[data-stage="3"] .ch-ticket__log li { opacity: 1; transform: none; color: var(--ink); }
.ch-ticket__meter { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; }
.ch-ticket__meter i { display: block; height: 100%; width: 0; background: var(--cta); border-radius: inherit; transition: width 1s cubic-bezier(.65,0,.35,1), background .4s; }
.ch-flow[data-stage="1"] .ch-ticket__meter i { width: 18%; }
.ch-flow[data-stage="2"] .ch-ticket__meter i { width: 62%; }
.ch-flow[data-stage="3"] .ch-ticket__meter i { width: 100%; background: #DD6226; }

@keyframes ch-step-wiggle { 0% { transform: rotate(0); } 30% { transform: rotate(-14deg) scale(1.15); } 60% { transform: rotate(10deg); } 100% { transform: rotate(0); } }
@media (max-width: 700px) {
  .ch-flow__bar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-flow *, .ch-flow *::before { transition: none !important; animation: none !important; }
}

/* Client Hub only (main.ch-page): referral card and divider lines */
.ch-refer .ch-gear__items li b { margin-left: auto; color: var(--cta-deep); font-family: var(--font-display); }
:root[data-theme="dark"] .ch-refer .ch-gear__items li b { color: #f0803f; }
@media (max-width: 640px) {
  .ch-refer .ch-gear__items { grid-template-columns: minmax(0, 1fr); }
  .ch-refer .ch-gear__copy, .ch-refer .ch-gear__copy > div { min-width: 0; }
}

/* Divider lines between page sections: gray fading to orange in the middle */
main.ch-page > section + section { border-top: 2px solid transparent; border-image: linear-gradient(90deg, transparent, var(--line) 18%, var(--cta) 50%, var(--line) 82%, transparent) 1; }
:root:not([data-theme="dark"]) .ch-page .ch-hero { border-bottom: 0; }

/* Divider lines between the parts of the wide cards */
.ch-page .client-grid > .ch-gear { column-gap: 28px; }
.ch-page .ch-gear .ch-gear__items, .ch-page .ch-gear .ch-gear__actions { padding-left: 28px; border-left: 1px solid var(--line); }
@media (max-width: 1000px) {
  .ch-page .ch-gear .ch-gear__items, .ch-page .ch-gear .ch-gear__actions { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* Referral card in its own section above "Is it just you?" */
.ch-refer-top { padding: 40px 0; }