/* Bardstar — calm layer. Loaded last on every page.
   Keeps the existing layout, but takes the colour down to Cluely-style restraint:
   one plain blue sky in the hero, white page, black ink, grey cards, black buttons.
   No purple/orange blobs, no per-app tints, no gradient text, no aurora behind the page. */

/* page background: plain, no aurora or grain */
body::before, body::after { background: none !important; animation: none !important; }
body { background: var(--cl-bg, #fff); }

/* hero sky: one clean blue gradient, no coloured blobs */
.cl-sky, .skin .hero::before {
  background: linear-gradient(180deg, #0a1633 0%, #1d3a7a 45%, #6f8fcf 80%, var(--cl-bg) 100%) !important;
}
.cl-sky i, .cl-sky::after, .skin .hero::after { display: none !important; }

/* headlines: solid colour, no gradient ink */
.cl-h1 em, .skin .hero .grad-hero, .grad-hero, .grad-text, .cl-h2 em, .cl-grad {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  color: inherit !important; -webkit-text-fill-color: currentColor !important;
}
.cl-rule { display: none; }

/* buttons: black (white in dark mode), no glow or shine */
.cl-btn-glow, .btn-primary, .co-go, .co-confirm-actions .cl-plan-btn, .co-steps li.on span, .cg-tag {
  background: #111 !important; color: #fff !important; box-shadow: none !important;
}
:root[data-theme="dark"] .cl-btn-glow, :root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .co-go,
:root[data-theme="dark"] .co-confirm-actions .cl-plan-btn, :root[data-theme="dark"] .co-steps li.on span, :root[data-theme="dark"] .cg-tag {
  background: #f2f3f7 !important; color: #0b0c10 !important;
}
.cl-hero .cl-btn-glow { background: #fff !important; color: #111 !important; }
.cl-shine { display: none !important; }

/* accent colour everywhere else: neutral ink */
:root, :root[data-theme="dark"], .theme-yapstar, .theme-recap, .theme-tally, .theme-flick, .theme-cue {
  --accent: var(--cl-ink, #19191d); --accent-2: var(--cl-ink, #19191d); --accent-3: var(--cl-ink, #19191d);
  --accent-soft: var(--cl-line, rgba(25, 25, 40, .08));
}

/* app cards: no coloured tint or glow; the icon is the only colour */
.st-card { --acc: 120, 120, 130 !important; }
.st-card:hover { box-shadow: 0 0 0 1px var(--cl-line) inset, 0 24px 48px -28px rgba(0, 0, 0, .25) !important; }
.st-art, .cl-art-recap, .cl-art-tally, .cl-art-flick { background: var(--cl-soft) !important; }
.st-art-yap { background: #1d3a7a !important; }
.st-art-bl { background: #050508 !important; }
.st-bl b { text-shadow: none !important; }
.cl-hours i { background: var(--cl-ink) !important; opacity: .7; }
.cl-screen { background: #222 !important; }
.st-status.live, .st-status.dev, .st-status.soon,
:root[data-theme="dark"] .st-status.live, :root[data-theme="dark"] .st-status.dev {
  color: var(--cl-ink-2, var(--cl-ink)) !important; background: var(--cl-bg) !important; box-shadow: 0 0 0 1px var(--cl-line) inset !important;
}

/* big coloured panels become plain dark or plain grey */
.st-launch, .skin .final-cta, .cl-plan-pro, .final-cta { background: #111 !important; box-shadow: none !important; }
.cl-card-blue { background: #1d3a7a !important; }
.cl-page .footer::before { background: var(--cl-line) !important; height: 1px !important; }
.bs-wl-count i span { background: var(--cl-muted) !important; }

/* coloured bars and meters */
.cl-compare i, .bs-race-bars i, .bs-race-bars i.yap { background: var(--cl-ink) !important; }
.cl-range::-webkit-slider-runnable-track { background: var(--cl-soft-2, var(--cl-soft)) !important; }

/* remaining purple bits: progress bar, scroll-to-top ring, dots, focus rings, checkout, changelog */
.cl-progress, .cl-progress i, [class*="progress"] > i { background: var(--cl-ink) !important; }
.cl-top .p { stroke: var(--cl-ink) !important; }
.bs-dots a.on, .co-dots i { background: var(--cl-ink) !important; }
.bs-toc a.on { border-left-color: var(--cl-ink) !important; }
.st-vote[aria-pressed="true"] { background: var(--cl-ink) !important; color: var(--cl-bg) !important; }
.st-quiz-step button:hover { box-shadow: 0 0 0 1.5px var(--cl-ink) inset !important; }
.cl-compare-all td:last-child, .cl-compare-all thead th:last-child { background: var(--cl-soft) !important; }
.st-see:hover .st-see-arrow { color: #111 !important; }
.co-plan input:checked + .co-plan-body, .skin-doc .co-steps li.on { box-shadow: 0 0 0 2px var(--cl-ink) inset !important; }
.co-otp input:focus { box-shadow: 0 0 0 2px var(--cl-ink) inset !important; }
.co-check input { accent-color: var(--cl-ink) !important; }
.co-input:focus, .wp-card input:focus, .bs-race textarea:focus, .bs-faq-search input:focus, .bs-seg button:focus-visible { outline-color: var(--cl-ink) !important; }
.co-mail-icon { background: var(--cl-ink) !important; color: var(--cl-bg) !important; }
.cg::before { background: var(--cl-line) !important; }
.cg-rel::before { box-shadow: 0 0 0 3px var(--cl-ink) !important; }
.wp-card .key { background: var(--cl-soft) !important; box-shadow: 0 0 0 1px var(--cl-line) inset !important; }
.wp-card .actions .btn, .wp-card form .btn { background: #111 !important; color: #fff !important; }
.cl-plan-pro .cl-plan-btn { background: #fff !important; color: #111 !important; box-shadow: none !important; }

/* download buttons: white on the sky, plain outline for the second one */
.dl-mac, .dl-win, .dl-chip.dl-mac, .dl-chip.dl-win { box-shadow: none !important; }
.dl-mac, .dl-chip.dl-mac { background: #fff !important; color: #111 !important; }
.dl-win, .dl-chip.dl-win { background: rgba(255, 255, 255, .08) !important; color: #fff !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset !important; }
.nav.scrolled .dl-chip.dl-mac, .dl-chip.dl-mac { background: #111 !important; color: #fff !important; }
.nav.scrolled .dl-chip.dl-win, .dl-chip.dl-win { background: transparent !important; color: var(--cl-ink) !important; box-shadow: 0 0 0 1px var(--cl-line) inset !important; }
.dl-btn::after { display: none !important; }
.dl-caption svg, .skin .hero .dl-caption svg { color: currentColor !important; }

/* hero: plain light, no sky */
.cl-sky { display: none !important; }
.cl-hero { color: var(--cl-ink); }
.cl-hero .cl-h1, .cl-hero .st-icons span { color: var(--cl-ink) !important; text-shadow: none !important; }
.cl-hero { padding-bottom: 32px; }
/* home: light hero, so the nav is ink from the start */
body[data-product="hub"] .nav:not(.scrolled) .brand svg.logotype,
body[data-product="hub"] .nav:not(.scrolled) .nav-links a:not(.btn),
body[data-product="hub"] .nav:not(.scrolled) .theme-toggle { color: var(--cl-ink); background: transparent; border-color: transparent; }
body[data-product="hub"] .nav:not(.scrolled) .btn-dark { background: #111; color: #fff; }

/* ================= home: proper =================
   One serif for the two headlines, one sans for everything else, hairlines instead of shadows,
   one consistent fade-and-rise. Scoped to the home page. */
body[data-product="hub"] { font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif); }

/* 1. type and space */
body[data-product="hub"] .cl-hero { padding: clamp(120px, 16vw, 188px) 24px clamp(40px, 6vw, 72px); }
body[data-product="hub"] .st-hero { padding-bottom: clamp(40px, 6vw, 72px); }
body[data-product="hub"] .cl-h1 { max-width: none; font-size: clamp(48px, 8vw, 88px); line-height: 1.02; letter-spacing: -.025em; }
body[data-product="hub"] .cl-h2 { font-family: var(--cl-serif); font-weight: 500; font-size: clamp(30px, 3.6vw, 40px); letter-spacing: -.015em; }
body[data-product="hub"] .cl-head { margin-bottom: clamp(28px, 4vw, 44px); text-align: left; }
body[data-product="hub"] .cl-wrap { max-width: 1080px; }
body[data-product="hub"] .st-grid { gap: clamp(20px, 3vw, 40px); }

/* 2. quiet product plates */
body[data-product="hub"] .st-card {
  background: var(--cl-bg); border-radius: 24px; box-shadow: 0 0 0 1px var(--cl-line) inset; overflow: hidden;
  transition: transform .25s var(--cl-out), box-shadow .25s;
}
body[data-product="hub"] .st-card:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cl-ink) 22%, transparent) inset; }
body[data-product="hub"] .st-card:focus-visible { outline: 2px solid var(--cl-ink); outline-offset: 3px; }
body[data-product="hub"] .st-body { gap: 6px; padding: 26px 28px 28px; }
body[data-product="hub"] .st-card h3 { font-family: inherit; font-size: 22px; font-weight: 600; letter-spacing: -.015em; }
body[data-product="hub"] .st-card p { font-size: 16px; line-height: 1.55; color: var(--cl-muted); }
body[data-product="hub"] .st-card p.st-state { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--cl-ink-2); }
body[data-product="hub"] .st-state i { width: 7px; height: 7px; border-radius: 50%; background: #2cb463; }
body[data-product="hub"] .st-state.dev i { background: #d9a21b; }
body[data-product="hub"] .st-go { padding-top: 14px; font-size: 15px; font-weight: 600; color: var(--cl-ink); }

/* 3. three plates in a row on desktop; sQuit plate shows its hold overlay */
@media (min-width: 1001px) {
  body[data-product="hub"] .st-grid .st-card.st-big { grid-column: span 2; }
  body[data-product="hub"] .st-bl b { font-size: clamp(26px, 2.7vw, 34px); }
  body[data-product="hub"] .st-bl small { font-size: 10px; letter-spacing: .14em; }
}
.st-art-sq { background: #b3232f !important; }
.st-sq { display: flex; align-items: center; gap: 14px; width: min(86%, 320px); padding: 14px 16px; border-radius: 18px; color: #fff; background: rgba(20, 20, 24, .88); box-shadow: 0 20px 40px -16px rgba(40, 0, 8, .6); }
.st-sq img { flex: none; }
.st-sq-hud { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.st-sq-hud b { font-size: 14.5px; font-weight: 600; }
.st-sq-bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.st-sq-bar i { display: block; width: 40%; height: 100%; border-radius: inherit; background: #2cb463; }
.st-sq-hud small { font-size: 12px; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
.st-art-xt { background: linear-gradient(160deg, #4f8bff, #2a38d6) !important; }
.st-xt { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 18px; background: rgba(20, 22, 40, .55); box-shadow: 0 20px 40px -16px rgba(8, 12, 60, .6); }
.st-xt i { display: block; width: 62px; height: 46px; border-radius: 8px; background: rgba(255, 255, 255, .55); }
.st-xt i:nth-child(2) { background: #fff; box-shadow: 0 0 0 3px #7fb0ff; }

/* 4. one motion: fade and rise, once */
body[data-product="hub"] .reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--cl-out), transform .5s var(--cl-out); transition-delay: 0s; }
body[data-product="hub"] .reveal.in { opacity: 1; transform: none; }
body[data-product="hub"] .cl-h1 .w > span { animation-duration: .5s; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body[data-product="hub"] .reveal { opacity: 1; transform: none; transition: none; }
  body[data-product="hub"] .st-card { transition: none; }
}
body[data-product="hub"] .nav { transition: border-color .3s, background .3s; border-bottom: 1px solid transparent; }
body[data-product="hub"] .nav.scrolled { border-bottom-color: var(--cl-line); }

/* 5. footer: brand, two columns, one legal line */
body[data-product="hub"] .footer { margin-top: 0; padding: 56px 0 40px; border-top: 1px solid var(--cl-line); }
body[data-product="hub"] .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
body[data-product="hub"] .footer h4 { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cl-muted); }
body[data-product="hub"] .footer .faint { display: none; }
body[data-product="hub"] .footer-bottom { margin-top: 40px; padding-top: 0; border-top: 0; font-size: 13.5px; color: var(--cl-muted); }
@media (max-width: 640px) { body[data-product="hub"] .footer-grid { grid-template-columns: 1fr 1fr; } body[data-product="hub"] .footer-grid > :first-child { grid-column: 1 / -1; } }
body[data-product="hub"] :focus-visible { outline: 2px solid var(--cl-ink); outline-offset: 3px; border-radius: 6px; }
body[data-product="hub"] .cl-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
body[data-product="hub"] .cl-hero { padding-bottom: clamp(32px, 5vw, 56px); }
/* home: no status pill, shortcut hints, share/display buttons or back-to-top */
body[data-product="hub"] .bs-status, body[data-product="hub"] .bs-k-hint, body[data-product="hub"] .cl-top { display: none !important; }
body[data-product="hub"] .footer { background: transparent; }
body[data-product="hub"] .nav.scrolled { background: color-mix(in srgb, var(--cl-bg) 88%, transparent); }

/* support: quick-answer links readable in both themes */
.prose ul.support-links a { color: var(--text, var(--cl-ink)); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
.prose ul.support-links a:hover { text-decoration-color: currentColor; }