/* lpgdigital.com design pass for the go page, loaded after the compiled Tailwind CSS (colours there are already
   remapped to the dark system by build.py). Same rules as the main site's "Glass and light pass":
   one accent (LPG Blue), DM Sans only, 1px Line hairlines, glows instead of fills.
   Selectors match the class strings the React bundle renders (they still carry the original light colour names;
   only the compiled CSS behind them was remapped). */

:root { color-scheme: dark; }
/* Midnight sits on html only: a background on body would paint over the fixed ambient glow below (z-index -1). */
html { background: #020617; }
body { background: transparent !important; color: #ffffff; }

/* Ambient light: a soft LPG Blue glow pinned to the top of the viewport. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 45% at 50% 0%, rgba(0, 128, 255, 0.20), transparent 72%);
}
@media (max-width: 640px) {
  body::before { background: radial-gradient(90% 32% at 50% 0%, rgba(0, 128, 255, 0.20), transparent 72%); }
}
#root { position: relative; isolation: isolate; }

/* One ground. lpgdigital.com runs every section on Midnight with no fills or hairlines between them, so the page
   wrappers and section bands are transparent over the body (and the ambient glow shows through). */
#root [class*="min-h-screen"][class*="bg-[#F4F4F5]"],
#root [class^="relative py-16 sm:py-20"],
#root [class^="relative pt-8 sm:pt-12"][class*="bg-[#F8F9FA]"],
#root [class^="relative bg-[#050811] pt-14"],
#root [aria-label="Client logos carousel"] {
  background-color: transparent;
}
#root [class^="relative py-16 sm:py-20"],
#root [aria-label="Client logos carousel"] { border-color: transparent; }

/* Hero light: two wide, soft LPG Blue glows behind the headline (the main site's hero glow). */
#root [class^="relative pt-8 sm:pt-12"][class*="bg-[#F8F9FA]"] { isolation: isolate; }
#root [class^="relative pt-8 sm:pt-12"][class*="bg-[#F8F9FA]"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 34% at 50% 14%, rgba(0, 128, 255, 0.30), transparent 72%),
    radial-gradient(30% 26% at 24% 40%, rgba(70, 168, 255, 0.12), transparent 70%);
}
@media (max-width: 640px) {
  #root [class^="relative pt-8 sm:pt-12"][class*="bg-[#F8F9FA]"]::before {
    background: radial-gradient(75% 22% at 50% 10%, rgba(0, 128, 255, 0.30), transparent 72%),
      radial-gradient(50% 18% at 20% 30%, rgba(70, 168, 255, 0.10), transparent 70%);
  }
}

/* Headings: DM Sans 600, tight tracking; the highlighted words take Signal Light, as on lpgdigital.com. */
#root :is(h1, h2, h3) { font-weight: 600; letter-spacing: -0.02em; }
#root :is(h1, h2) [class*="text-[#0080FF]"] { color: #46a8ff; }

/* LPG logo. build.py puts the lpgdigital.com mark (21x24) at both image paths the bundle uses. Brand rule: the mark is
   never boxed, recoloured or rounded and carries no shadow, glow or outline, so the header's rounded-xl and the
   footer's drop-shadow glow are cancelled. The boxes take the main site's lockup size (21x24, 17x20 on phones). */
#root img[src="/logo.png"],
#root img[src*="Systemized.svg.png"] {
  border-radius: 0; border: 0; background: none; box-shadow: none; filter: none;
  object-fit: contain; object-position: center;
  width: 21px; height: 24px; /* lpgdigital.com .logo img, header and footer alike */
}
/* Wordmark next to the mark: the lpgdigital.com nav lockup (.logo span): 15px, 500, 0.6px tracking, white, caps,
   10px from the mark; 13px / 700 / 0.52px and 8px on phones. The footer lockup uses 700 there too. The words are the
   bundle's own ("LPG " + "Digital"); only their case and colour change. */
#root a:has(> img[src="/logo.png"]), #root a:has(> img[src*="Systemized.svg.png"]) { gap: 10px; }
#root :is(img[src="/logo.png"], img[src*="Systemized.svg.png"]) + span {
  font-size: 15px; font-weight: 500; letter-spacing: 0.6px; line-height: 1.2; white-space: nowrap;
  text-transform: uppercase; color: #ffffff;
}
#root :is(img[src="/logo.png"], img[src*="Systemized.svg.png"]) + span span { color: inherit; }
#root footer img[src*="Systemized.svg.png"] + span, #root [class*="bg-[#050811] pt-14"] img[src*="Systemized.svg.png"] + span { font-weight: 700; }
@media (max-width: 640px) {
  #root a:has(> img[src="/logo.png"]), #root a:has(> img[src*="Systemized.svg.png"]) { gap: 8px; }
  #root img[src="/logo.png"], #root img[src*="Systemized.svg.png"] { width: 17px; height: 20px; }
  #root :is(img[src="/logo.png"], img[src*="Systemized.svg.png"]) + span { font-size: 13px; font-weight: 700; letter-spacing: 0.52px; }
}

/* Testimonial result cards (build.py rebuilds the "Businesses We've Scaled" cards with lpgdigital.com's markup):
   the values below are site.css's .result / .chip / .video / .person, including its phone overrides. */
#client-wins .result {
  display: flex; flex-direction: column; padding: 28px; border-radius: 36px; text-align: left;
  background: #071023; border: 1px solid #1a2334; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
#client-wins .result__label { display: flex; align-items: center; gap: 8px; min-height: 21px; }
#client-wins .result__label p { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.4; color: #ffffff; }
#client-wins .chip {
  display: inline-flex; flex: none; padding: 4px 8px; border-radius: 12px; background: #0080ff;
  font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: 0.03em; color: #ffffff;
}
#client-wins .video {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%;
  margin-top: 18px; height: 296px; border-radius: 24px; background: #050811; overflow: hidden;
}
#client-wins .video[data-src] { cursor: pointer; }
#client-wins .video:focus-visible { outline: 2px solid #46a8ff; outline-offset: 3px; }
#client-wins .video img.video__poster { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
#client-wins .video__play { position: relative; width: 60px; height: 60px; transition: transform 0.44s cubic-bezier(0.2, 0.8, 0.2, 1); }
#client-wins .video[data-src]:hover .video__play { transform: scale(1.06); }
#client-wins .video[data-src]:active .video__play { transform: scale(0.94); transition: transform 100ms ease-out; }
#client-wins .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#client-wins .person { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 20px; }
#client-wins .person img { width: 32px; height: 32px; border-radius: 50%; flex: none; }
#client-wins .person img.rot { transform: rotate(-40deg); }
#client-wins .person b { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: #ffffff; }
#client-wins .person small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.4; color: #70737f; }
@media (max-width: 640px) {
  #client-wins .result { padding: 16px 16px 14px; border-radius: 28px; }
  #client-wins .result__label { align-items: flex-start; }
  #client-wins .result__label p { font-size: 14px; }
  #client-wins .video { height: 180px; margin-top: 12px; border-radius: 20px; }
  #client-wins .person { padding-top: 14px; }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  #client-wins .video[data-src]:hover .video__play { transform: none; }
}

/* Client logos: the dark marks are shown in white, the way lpgdigital.com shows its logo wall. */
/* Client logo bar, as on lpgdigital.com: a small spaced caption, three rows of white logos drifting in alternating
   directions (one row on phones), and soft Midnight fades at both edges. build.py renders the markup. */
#root .lpg-logos { padding: 36px 0 44px; }
#root .lpg-logos__cap { padding: 0 20px 36px; text-align: center; font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: #70737f; }
#root .lpg-mq { position: relative; display: flex; flex-direction: column; gap: 50px; overflow: hidden; padding-block: 8px; }
#root .lpg-mq::before, #root .lpg-mq::after { content: ""; position: absolute; top: 0; bottom: 0; width: 112px; z-index: 1; pointer-events: none; }
#root .lpg-mq::before { left: 0; background: linear-gradient(to right, #020617, rgba(2, 6, 23, 0)); }
#root .lpg-mq::after { right: 0; background: linear-gradient(to left, #020617, rgba(2, 6, 23, 0)); }
#root .lpg-mq__row { display: flex; width: max-content; animation: lpg-mq var(--speed, 60s) linear infinite; }
#root .lpg-mq__row--rev { animation-direction: reverse; }
#root .lpg-mq__set { display: flex; align-items: center; gap: var(--gap, 52px); padding-right: var(--gap, 52px); height: 26px; }
#root .lpg-mq__set img { height: 26px; width: auto; max-width: 132px; object-fit: contain; flex: none; filter: brightness(0) invert(1); opacity: 0.82; }
#root .lpg-mq--mobile { display: none; }
#root .lpg-mq__text { flex: none; opacity: 0.8; font-size: 16px; font-weight: 500; line-height: 1.3; color: #96989f; white-space: nowrap; }
@keyframes lpg-mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) {
  #root .lpg-logos { padding: 28px 0 36px; }
  #root .lpg-logos__cap { padding-bottom: 24px; font-size: 11px; }
  #root .lpg-mq--desktop { display: none; }
  #root .lpg-mq--mobile { display: flex; }
  #root .lpg-mq { gap: 40px; }
  #root .lpg-mq::before, #root .lpg-mq::after { width: 48px; }
}
@media (prefers-reduced-motion: reduce) { #root .lpg-mq__row { animation: none; } }

/* Lit primary buttons: LPG Blue lit from above, a top highlight, a soft blue glow. */
:is(a, button)[class*="bg-[#0080FF]"], :is(a, button)[class*="bg-blue-600"], :is(a, button)[class*="bg-blue-500"] {
  background-image: linear-gradient(180deg, #0072e8 0%, #0064ce 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 24px -8px rgba(0, 128, 255, 0.55) !important;
  font-weight: 600 !important;
}
:is(a, button)[class*="bg-[#0080FF]"]:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 30px -8px rgba(0, 128, 255, 0.75) !important;
}

/* Cards: a faint highlight on the top edge (the glass cue without the blur). */
#root :is([class*="bg-white "], [class*="bg-[#FFFFFF]"], [class*="bg-[#071023]"])[class*="rounded-"]:not(input):not(button),
[class*="rounded-[36px]"], [class*="rounded-[28px]"], [class*="rounded-3xl"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Form fields sit a step deeper than the card they're on, so they read as wells. */
#root input[class*="bg-white"], #root [class^="flex items-center rounded-[12px] bg-white border"] { background-color: #050811; }
#root input::placeholder { color: #70737f; }

/* Edge light: one feature card per section gets a 1px border that fades from Signal Light into Line, plus a light
   pool at the top: the qualify quiz, the founder section's guarantee, the booking calendar, the thank-you video and
   the unqualified notice. */
#root :is(
  [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"],
  [class^="mt-10 max-w-[650px] p-6 rounded-[28px] bg-[#050811]"],
  [class^="w-full bg-white rounded-[24px] sm:rounded-[28px]"],
  [class^="w-full max-w-xl mx-auto text-center bg-white"],
  [class^="w-full rounded-[24px] overflow-hidden border border-[#ECECEE] bg-black"]
) {
  position: relative;
  border-width: 0; /* the edge light below is the border; several of these clip overflow, so it is drawn inside */
  box-shadow: 0 40px 90px -50px rgba(0, 128, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
#root :is(
  [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"],
  [class^="mt-10 max-w-[650px] p-6 rounded-[28px] bg-[#050811]"],
  [class^="w-full max-w-xl mx-auto text-center bg-white"]
) {
  background-image: radial-gradient(70% 60% at 50% 0%, rgba(0, 128, 255, 0.10), transparent 62%);
}
#root :is(
  [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"],
  [class^="mt-10 max-w-[650px] p-6 rounded-[28px] bg-[#050811]"],
  [class^="w-full bg-white rounded-[24px] sm:rounded-[28px]"],
  [class^="w-full max-w-xl mx-auto text-center bg-white"],
  [class^="w-full rounded-[24px] overflow-hidden border border-[#ECECEE] bg-black"]
)::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(70, 168, 255, 0.5), #1a2334 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* The thank-you notice was amber; on the dark system it's an LPG Blue note (one accent hue). */
#root [class*="bg-amber-500/10"] { background-color: rgba(0, 128, 255, 0.08); border-color: rgba(70, 168, 255, 0.30); color: #c3cae8; }
#root [class*="bg-amber-500/10"] svg { color: #46a8ff; }

/* Tabular figures for the numbers that used to be set in Geist Mono. */
[class*="font-mono"] { font-family: "DM Sans", system-ui, sans-serif !important; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

@media (prefers-reduced-transparency: reduce) {
  body::before { display: none; }
}

/* Sticky top bar (replaces the floating "See If You Qualify" pill). lpgdigital.com's glass nav: Midnight glass, denser
   toward the bottom edge, an 18px blur and a 1px line drawn as a shadow. Logo lockup left, the lit button right. */
.lpg-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.66), rgba(2, 6, 23, 0.88));
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 #1a2334;
}
.lpg-topbar__in {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1200px; margin: 0 auto; padding: 12px 48px;
}
.lpg-topbar__brand { display: inline-flex; align-items: center; gap: 10px; color: #ffffff; text-decoration: none; }
.lpg-topbar__brand img { width: 21px; height: 24px; object-fit: contain; flex: none; }
.lpg-topbar__brand span { font-size: 15px; font-weight: 500; letter-spacing: 0.6px; line-height: 1.2; text-transform: uppercase; white-space: nowrap; }
.lpg-topbar__cta {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 22px; border: 0; border-radius: 14px; /* the page's own CTA buttons (rounded-[14px]) */
  background: linear-gradient(180deg, #0072e8 0%, #0064ce 100%); color: #ffffff; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 24px -8px rgba(0, 128, 255, 0.55);
  transition: box-shadow 0.44s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.44s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lpg-topbar__cta:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 30px -8px rgba(0, 128, 255, 0.75); }
.lpg-topbar__cta:active { transform: scale(0.97); transition-duration: 100ms; }
.lpg-topbar__cta:focus-visible { outline: 2px solid #46a8ff; outline-offset: 3px; }
/* The bar is 68px tall; jumps to the quiz land below it. */
#survey, #survey-section { scroll-margin-top: 80px; }
@media (max-width: 640px) {
  .lpg-topbar__in { padding: 10px 16px; gap: 12px; }
  .lpg-topbar__brand { gap: 8px; }
  .lpg-topbar__brand img { width: 17px; height: 20px; }
  .lpg-topbar__brand span { font-size: 13px; font-weight: 700; letter-spacing: 0.52px; }
  .lpg-topbar__cta { min-height: 40px; padding: 0 16px; font-size: 13px; gap: 6px; }
  #survey, #survey-section { scroll-margin-top: 72px; }
}
@media (prefers-reduced-transparency: reduce) { .lpg-topbar { background: #020617; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Hero VSL (added 2026-11-03) */
.lpg-vsl{margin-top:28px;margin-bottom:4px;border-radius:16px;overflow:hidden;border:1px solid #1A2334;background:#071023;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 60px -20px rgba(0,128,255,.35)}
.lpg-vsl wistia-player{display:block;width:100%}

/* Mobile hero H1: 3 lines (added 2026-11-03) */
@media (max-width: 640px) {
  #root h1.max-w-4xl { font-size: clamp(27px, 8vw, 36px) !important; }
  #root h1.max-w-4xl > span.block:first-child { white-space: nowrap; }
  #root h1.max-w-4xl > span.block:first-child > span[class*="text-[#0080FF]"] { display: block; font-size: 1.18em; white-space: nowrap; line-height: 1.12; }
}

/* Survey card: white gradient so it stands out on the dark page (added 2026-11-03).
   Scoped to the quiz card; overrides the dark remap of the light Tailwind classes inside it. */
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] {
  --q-ink: #09090B; --q-body: #3F3F46; --q-muted: #52525B; --q-blue: #0066D6; --q-line: #D6DEEB;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 55%, #eaf1ff 100%) !important;
  color: var(--q-ink);
  box-shadow: 0 0 0 1px rgba(255,255,255,.6), 0 30px 80px -30px rgba(0,128,255,.55), 0 0 60px -10px rgba(70,168,255,.25) !important;
  color-scheme: light;
}
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"]::after {
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(0,128,255,.28)) !important;
}
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] :is(h2,h3,label,span,p,div) { --tw-text-opacity: 1; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] [class~="text-[#09090B]"] { color: var(--q-ink) !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] [class~="text-[#3F3F46]"] { color: var(--q-body) !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] :is([class~="text-[#52525B]"],[class~="text-[#71717A]"]) { color: var(--q-muted) !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] [class~="text-[#A1A1AA]"] { color: #6B7280 !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] :is([class~="text-[#0080FF]"],[class~="text-[#0284C7]"]) { color: var(--q-blue) !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] [class~="text-[#EF4444]"] { color: #DC2626 !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] [class~="text-white"] { color: #ffffff !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] :is([class~="hover:text-[#0080FF]"],[class~="hover:text-[#006ee6]"]):hover { color: #0052AD !important; }
/* progress */
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] [class^="w-full h-1.5 bg-[#F4F4F5]"] { background-color: #E3E8F0 !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] :is([class~="bg-[#0080FF]"],[class~="bg-[#10B981]"]) { background-color: #0080FF !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] [class~="bg-[#EF4444]"] { background-color: #EF4444 !important; }
/* answer options + neutral surfaces */
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] :is(button,div,label,input,textarea,select)[class~="bg-white"] { background-color: #ffffff !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] :is([class~="bg-[#F4F4F5]"],[class~="bg-[#F8F9FA]"],[class~="bg-[#F9FAFB]"]) { background-color: #EEF2F8 !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] [class~="bg-[#F0F7FF]"] { background-color: #E6F0FF !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] [class~="bg-[#FEF2F2]"] { background-color: #FEF2F2 !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] [class~="bg-[#E0F2FE]"] { background-color: #E0F2FE !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] :is([class~="border-[#ECECEE]"],[class~="border-[#F4F4F5]"]) { border-color: var(--q-line) !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] [class~="border-[#D4D4D8]"] { border-color: #A9B4C6 !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] [class~="border-[#0080FF]"] { border-color: #0080FF !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] [class~="border-[#EF4444]"] { border-color: #EF4444 !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] button[class~="bg-white"] { box-shadow: 0 1px 2px rgba(15,23,42,.06) !important; }
/* hover / selected */
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] [class~="hover:border-[#0080FF]"]:hover { border-color: #0080FF !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] [class~="hover:border-[#D4D4D8]"]:hover { border-color: #A9B4C6 !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] :is([class~="hover:bg-[#FAFAFA]"],[class~="hover:bg-[#F0F7FF]"],[class~="hover:bg-[#F4F4F5]"]):hover { background-color: #F0F6FF !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] [class~="hover:bg-[#0070E0]"]:hover,
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] [class~="hover:bg-[#006ee6]"]:hover { background-color: #0070E0 !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] .group:hover [class~="group-hover:bg-[#E0F0FF]"] { background-color: #DCEBFF !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] .group:hover [class~="group-hover:text-[#0080FF]"] { color: var(--q-blue) !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] .group:hover [class~="group-hover:border-[#0080FF]"] { border-color: #0080FF !important; }
/* details form fields */
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] input { background-color: #ffffff !important; color: var(--q-ink) !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] input::placeholder { color: #8A909C !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] [class^="flex items-center rounded-[12px] bg-white border"] { background-color: #ffffff !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] :is([class~="focus:border-[#0080FF]"]:focus,[class~="focus-within:border-[#0080FF]"]:focus-within) { border-color: #0080FF !important; box-shadow: 0 0 0 3px rgba(0,128,255,.18) !important; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] svg { color: inherit; }
#root [class^="w-full bg-white rounded-[26px] sm:rounded-[28px]"] [class^="flex items-center justify-between text-xs"] [class~="text-[#09090B]"] { color: var(--q-blue) !important; }