/*
 * The Codex look: type, buttons, the header and footer, and the black bands. Ported on 1 Oct 2026
 * from the local design preview the owner chose it in, unchanged, so the live site renders what was
 * approved there. header.php puts data-theme="codex" on <html>, and every rule here is scoped to it,
 * which is also the specificity these overrides were tuned at; functions.php prints this sheet before
 * shared.css, the order they were approved in. fx.js headerTone() sets .topbar.is-on-dark.
 */
html[data-theme^="codex"] { --font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
html[data-theme^="codex"] [class*="elementor-kit-"] { --e-global-typography-primary-font-family: 'Geist'; --e-global-typography-secondary-font-family: 'Geist'; --e-global-typography-text-font-family: 'Geist'; --e-global-typography-accent-font-family: 'Geist'; }
html[data-theme^="codex"] :is(h1, h2, h3, .jr-h, .section-head h2) { font-weight: 500; letter-spacing: -.035em; }
html[data-theme^="codex"] .hz h1 { font-weight: 500; letter-spacing: -.045em; }
html[data-theme^="codex"] .btn { border-radius: 999px; font-weight: 500; min-height: 40px; padding: 0 20px; border-color: transparent; }
html[data-theme^="codex"] .btn--lg { min-height: 48px; padding: 0 26px; font-size: 15px; }
html[data-theme^="codex"] .btn--primary { background: var(--btn, #0D0D0F); color: #fff; }
html[data-theme^="codex"] .btn--primary:hover { background: var(--btn-hover, #2B2B33); transform: none; box-shadow: none; }
html[data-theme^="codex"] .btn--ghost { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
html[data-theme^="codex"] .btn--ghost:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); }
html[data-theme^="codex"] .eyebrow { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 500; color: var(--muted); }
html[data-theme^="codex"] .hz__kicker b { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 12px; }
html[data-theme^="codex"] .hz__glow { display: none; }
html[data-theme^="codex"] .hz__chip { border-radius: 18px; border-color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .82); backdrop-filter: blur(10px); }
html[data-theme^="codex"] .jr-panel { border-radius: 26px; }
html[data-theme^="codex"] :is(.card, .price-card, .rev) { border-radius: 20px; border-color: var(--line); }
html[data-theme^="codex"] .pill { font-weight: 500; }

/* ---------- the header, as on the Codex site: logo with small links beside it, two compact pills on the
   right, no bar of its own. It sits on the hero (the home hero runs up behind it) and frosts once the page
   scrolls, because unlike Codex our sections would otherwise run into the links. */
html[data-theme^="codex"] { --ann-h: 48px; --hdr-h: 64px; }
/* The affiliate line is its own object, as OpenAI shows announcements: a pill floating above the header
   rather than a strip that reads as part of it. The .wrap becomes the pill; one line, never wrapping,
   because the home hero is pulled up by exactly --ann-h. */
html[data-theme^="codex"] .ann { position: relative; z-index: 51; box-sizing: border-box; height: var(--ann-h); padding-top: 12px; background: transparent; color: var(--body); }
html[data-theme^="codex"] .ann .wrap {
  width: fit-content; max-width: calc(100% - 32px); min-height: 0; margin: 0 auto; padding: 4px 14px 4px 4px; gap: 10px; flex-wrap: nowrap;
  border-radius: 999px; background: rgba(255, 255, 255, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent), 0 6px 18px -12px color-mix(in srgb, var(--ink) 30%, transparent);
  font-size: 13px; line-height: 1.4; white-space: nowrap;
}
html[data-theme^="codex"] .ann span { overflow: hidden; text-overflow: ellipsis; }
html[data-theme^="codex"] .ann b { padding: 3px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 500; font-size: 12px; }
html[data-theme^="codex"] .ann a { color: var(--ink); font-weight: 500; }
html[data-theme^="codex"] .ann a:hover { text-decoration: underline; text-underline-offset: 3px; }
html[data-theme^="codex"] .topbar { background: transparent; border-bottom-color: transparent; box-shadow: none; }
html[data-theme^="codex"] .topbar.is-stuck {
  background: color-mix(in srgb, var(--canvas, #fff) 78%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: none;
}
html[data-theme^="codex"] .nav { min-height: var(--hdr-h); padding-block: 0; gap: 0; justify-content: flex-start; }
/* Over the footer and dark bands the header turns light-on-dark, as Codex's does (header.js sets the class). */
html[data-theme^="codex"] .topbar { transition: background-color .3s ease, border-color .3s ease; }
/* Near-black and blurred rather than transparent: content scrolls under the header, and on a dark band
   a clear bar let the page's own links show through the nav. */
html[data-theme^="codex"] .topbar.is-on-dark { background: rgba(0, 0, 0, .82); border-bottom-color: rgba(255, 255, 255, .06); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
html[data-theme^="codex"] .topbar.is-on-dark .nav__links:not(.is-open) a { color: #fff; }
html[data-theme^="codex"] .topbar.is-on-dark .nav__links:not(.is-open) a:hover { background: rgba(255, 255, 255, .1); }
html[data-theme^="codex"] .topbar.is-on-dark :is(.btn--ghost, .nav__toggle) { background: rgba(255, 255, 255, .14); color: #fff; }
html[data-theme^="codex"] .topbar.is-on-dark :is(.btn--ghost, .nav__toggle):hover { background: rgba(255, 255, 255, .22); }
html[data-theme^="codex"] .topbar.is-on-dark .btn--primary { background: #fff; color: #000; }
html[data-theme^="codex"] .topbar.is-on-dark .btn--primary:hover { background: rgba(255, 255, 255, .85); }
html[data-theme^="codex"] .topbar.is-on-dark .brand-mark { content: url(/wp-content/themes/quicksync/design/assets/quicksync-mark-dark.svg); }
html[data-theme^="codex"] .topbar.is-on-dark .brand-word { content: url(/wp-content/themes/quicksync/design/assets/quicksync-wordmark-dark.svg); }
html[data-theme^="codex"] .nav__brand { margin-right: 26px; }
html[data-theme^="codex"] .nav__links { gap: 2px; font-size: 13px; font-weight: 500; }
html[data-theme^="codex"] .nav__links a { padding: 7px 11px; border-radius: 999px; color: var(--ink); transition: background-color .15s ease, color .15s ease; }
html[data-theme^="codex"] .nav__links a:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
html[data-theme^="codex"] .nav__links a::after { display: none; }
html[data-theme^="codex"] .nav .btn-row { margin-left: auto; gap: 8px; flex-wrap: nowrap; }
html[data-theme^="codex"] .topbar .btn { min-height: 36px; padding: 0 18px; font-size: 14px; white-space: nowrap; }
html[data-theme^="codex"] .nav__toggle { width: 36px; min-height: 36px; padding: 0; border-radius: 999px; background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
/* .topbar .btn's 18px padding outranks the rule above; it left the bars no width and drew them off-centre. */
html[data-theme^="codex"] .topbar .nav__toggle { padding: 0; }
/* +1px: the topbar keeps shared.css's transparent 1px bottom border. */
html[data-theme^="codex"] .hz { margin-top: calc(-1 * (var(--ann-h) + var(--hdr-h) + 1px)); padding-top: calc(var(--s-6) + var(--ann-h) + var(--hdr-h) + 1px); }
@media (max-width: 860px) {
  html[data-theme^="codex"] .nav .btn-row { order: 2; }
  html[data-theme^="codex"] .nav__toggle { order: 3; margin-left: 8px; }
  html[data-theme^="codex"] .nav__links.is-open { order: 4; padding: 6px var(--s-5) var(--s-4); background: var(--canvas, #fff); border-bottom: 1px solid var(--line); box-shadow: none; }
  html[data-theme^="codex"] .nav__links.is-open a { min-height: 48px; padding: 0 12px; border-radius: 12px; font-size: 17px; font-weight: 500; }
}
@media (max-width: 720px) { html[data-theme^="codex"] { --ann-h: 0px; } }
@media (max-width: 560px) { html[data-theme^="codex"] { --hdr-h: 56px; } }
@media (max-width: 400px) { html[data-theme^="codex"] .topbar .btn--primary { padding: 0 14px; } }
@media (max-width: 340px) { html[data-theme^="codex"] .topbar > .wrap { padding-inline: 16px; } }

/* ---------- the feature rows sit on black, as Codex's do; neutral greys rather than the slate on-dark */
html[data-theme="codex"] .section--ink:is(.dives-section, .cov-section, .setup-section, .pricing-section, .reviews-section, .faq-section) { background: #000; }
html[data-theme^="codex"] :is(.dives-section, .cov-section) :is(.lede, .dive__copy p), html[data-theme^="codex"] .faq-section .faq p { color: rgba(255, 255, 255, .62); }
html[data-theme^="codex"] .cov-section .pairs h3 { color: rgba(255, 255, 255, .5); }
html[data-theme^="codex"] .cov-section .pairs__list a { color: rgba(255, 255, 255, .78); }

/* ---------- breadcrumbs stay for search (the visible trail plus BreadcrumbList); here they are a quiet 13px line */
html[data-theme^="codex"] .crumb { gap: 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
html[data-theme^="codex"] .crumb li { gap: 6px; }
html[data-theme^="codex"] .crumb li + li::before { color: color-mix(in srgb, var(--ink) 22%, transparent); }
html[data-theme^="codex"] .crumb [aria-current] { color: var(--ink); font-weight: 500; }
html[data-theme^="codex"] .crumb a:hover { color: var(--ink); text-decoration: none; }

/* ---------- the footer, as on the Codex site: black, small grey group labels over white 13px links, lots of
   air and no rules. The legal lines stay, quieter. Variants keep their own near-black via --foot-bg. */
/* A full screen tall, like Codex's black ending: shorter, the header could never reach it to invert. */
html[data-theme^="codex"] .foot { display: flex; flex-direction: column; min-height: 100svh; background: var(--foot-bg, #000); color: rgba(255, 255, 255, .6); padding: 88px 0 36px; font-size: 13px; font-weight: 500; }
html[data-theme^="codex"] .foot > .wrap { display: flex; flex-direction: column; flex: 1; width: 100%; }
html[data-theme^="codex"] .foot__cols { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px 24px; }
html[data-theme^="codex"] .foot .small { max-width: 30ch; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .6); }
html[data-theme^="codex"] .foot .small a { color: #fff; }
html[data-theme^="codex"] .foot__h { margin-bottom: 14px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .6); }
html[data-theme^="codex"] .foot__list { gap: 14px; }
html[data-theme^="codex"] .foot__list a { color: #fff; line-height: 20px; }
html[data-theme^="codex"] .foot a { transition: opacity .15s ease; }
html[data-theme^="codex"] .foot a:hover { color: inherit; opacity: .65; }
html[data-theme^="codex"] .foot__bar { margin-top: auto; padding-top: 80px; border-top: 0; align-items: center; font-size: 13px; }
html[data-theme^="codex"] .foot__bar > span:first-child { color: #fff; }
html[data-theme^="codex"] .foot__bar > span:last-child { color: rgba(255, 255, 255, .3); }
html[data-theme^="codex"] .foot__bar a { color: rgba(255, 255, 255, .6); }
html[data-theme^="codex"] .foot__legal { margin-top: 28px; max-width: 920px; font-size: 11px; font-weight: 400; line-height: 1.6; color: rgba(255, 255, 255, .38); }
@media (max-width: 780px) {
  html[data-theme^="codex"] .foot { padding-top: 64px; }
  html[data-theme^="codex"] .foot__cols { grid-template-columns: 1fr 1fr; }
  html[data-theme^="codex"] .foot__cols > :first-child { grid-column: 1 / -1; }
  html[data-theme^="codex"] .foot__bar { padding-top: 56px; }
}

/* ---------- the first take: lavender wash across the hero, gradient second line, indigo band */
html[data-theme="codex"] {
  --ink: #0D0D0F; --body: #3F3F46; --muted: #6B6B76;
  --line: #ECECF0; --line-strong: #DCDCE3; --surface: #F6F6F8; --canvas: #FFFFFF;
  --accent: #4B57EE; --accent-hover: #3A45D4; --accent-tint: #EEF0FF; --accent-on-dark: #A9B3FF;
  --fx-violet: #8C7BF5;
  --r-md: 20px;
  --shadow-md: 0 1px 2px rgba(15, 15, 30, .04), 0 10px 28px -16px rgba(30, 30, 80, .18);
  --shadow-lg: 0 2px 6px rgba(15, 15, 30, .04), 0 36px 70px -34px rgba(40, 40, 110, .32);
}
html[data-theme="codex"] :is(.hz h1 em, .jr > .jr-ch .jr-h span, .jr-band--with .jr-h span) {
  background: linear-gradient(92deg, #4B57EE 0%, #7C6CF6 55%, #B07CF7 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* The journey opener's second line is the same gradient drawn twice as wide, with a pale glint past
   its end, so it can flow in (journey.css) and settle on exactly the colours above. */
html[data-theme="codex"] .jr > .jr-ch--intro .jr-h span {
  background-image: linear-gradient(92deg, #4B57EE 0%, #7C6CF6 27.5%, #B07CF7 50%, #E9E4FF 60%, #B07CF7 70%, #7C6CF6 100%);
  background-size: 200% 100%;
}
html[data-theme="codex"] .hz {
  background:
    radial-gradient(55% 45% at 18% 22%, rgba(199, 210, 254, .75), transparent 70%),
    radial-gradient(45% 50% at 82% 14%, rgba(221, 214, 254, .8), transparent 70%),
    radial-gradient(60% 50% at 70% 78%, rgba(191, 219, 254, .7), transparent 72%),
    radial-gradient(50% 40% at 30% 85%, rgba(233, 213, 255, .55), transparent 70%),
    linear-gradient(180deg, #F3F1FF 0%, #F7F7FF 55%, #FFFFFF 100%);
}
/* Every dark band is the same black; the rewind keeps a soft glow at its top so the moment still lands. */
html[data-theme="codex"] :is(.section--ink, .jr-band--switch) { background: radial-gradient(70% 55% at 50% 0%, rgba(75, 87, 238, .3), transparent 70%), #000; }
/* Not the bare panel on the dark switch band: its ∞ comet and flash are drawn to glow on black, and
   over this lilac they read as a smear. Without the :not() this rule outranks .jr-panel--bare. */
html[data-theme="codex"] .jr-panel:not(.jr-panel--bare) { border-color: #E6E4FA; background: radial-gradient(70% 55% at 85% 8%, rgba(199, 210, 254, .7), transparent 70%), radial-gradient(70% 55% at 10% 95%, rgba(233, 213, 255, .6), transparent 70%), #F7F6FF; }