/* =========================================================================
   ChoreoSync marketing site — DARK MODE
   Loaded AFTER cs-theme.css, which is itself loaded after style.css +
   responsive.css. Nothing above this file is edited: OLMO ships a light
   template and every surface in it is painted white somewhere in the 158 KB
   of style.css, so the whole dark pass lives here as one repaintable layer.

   The canvas is the APP's canvas, not a new one. base #050409 + the five
   blooms are the values approved for cdn/css/choreosync.css, copied here so
   the site and the product read as the same surface. Darkening means
   dropping the base, never dimming the blooms.
   ========================================================================= */

:root {
    /* Canvas */
    --cs-canvas: #050409;

    /* Panels. Cards are a translucent lift off the canvas rather than a
       solid fill, so the blooms behind them stay visible through the page. */
    --cs-panel:      rgba(255, 255, 255, .035);
    --cs-panel-2:    rgba(255, 255, 255, .055);   /* hover / raised */
    --cs-panel-hard: #100d1b;                     /* opaque: popups, menus */
    --cs-line:       rgba(255, 255, 255, .09);
    --cs-line-2:     rgba(255, 255, 255, .16);

    /* Ink */
    --cs-ink:        #eceaf5;   /* headings */
    --cs-body:       #a9a3bd;   /* paragraphs */
    --cs-muted:      #7d7794;   /* captions, footnotes */
}

/* ---------- The canvas ------------------------------------------------
   Blooms live on html, not body: body is not guaranteed to be as tall as
   the document, and a gradient on a short body paints only the first
   viewport, leaving everything below the fold flat. Positioned in rem, not
   %, so a long page and a short one light the same way. Never
   background-attachment:fixed — iOS Safari repaint trap. */
html {
    background-color: var(--cs-canvas);
    background-image:
        radial-gradient(70rem 42rem at 50%   1rem, rgba(112, 70, 214, .22) 0%, transparent 68%),
        radial-gradient(50rem 34rem at  4%  20rem, rgba(126, 82, 224, .13) 0%, transparent 70%),
        radial-gradient(54rem 36rem at 98%  44rem, rgba( 98, 62, 202, .15) 0%, transparent 70%),
        radial-gradient(76rem 46rem at 34%  78rem, rgba(114, 70, 208, .11) 0%, transparent 72%),
        radial-gradient(62rem 40rem at 88% 112rem, rgba(104, 66, 198, .09) 0%, transparent 72%);
    background-repeat: no-repeat;
    background-attachment: scroll;
}
body {
    background: transparent;
    color: var(--cs-body);
}

/* ---------- Type ---------- */
h1, h2, h3, h4, h5, h6 { color: var(--cs-ink); }
p, li, .p-sm, .p-md, .p-lg, .p-xl { color: var(--cs-body); }
.txt-block h5, .cta-box h5, .question h5 { color: var(--cs-ink); }
a { color: var(--cs-body); }
hr { border-color: var(--cs-line); opacity: 1; }
.text-secondary { color: var(--cs-muted) !important; }

/* Section eyebrows keep the brand purple but need lifting off the dark. */
.section-id, .section-title .section-id { color: #a98cff; }

/* ---------- Section surfaces ------------------------------------------
   The light site alternates white / snow bands. On dark the same rhythm is
   a barely-there wash so the canvas and its blooms still show through. */
.bg-snow, .bg-lightgrey, .bg-whitesmoke { background-color: rgba(255, 255, 255, .022) !important; }
.bg-whitesmoke-gradient {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 100%);
}

/* .bg-white is only ever a CARD in this site (the how-it-works steps and the
   legal index tiles), never a section, so it becomes the panel fill. */
.bg-white { background-color: var(--cs-panel) !important; }

/* Hero: the canvas already carries the top bloom, so the hero only clears
   the white it was painted in cs-theme.css. */
#hero-16 {
    background-color: transparent;
    background-image: none;
}
.hero-16-img img { box-shadow: 0 30px 70px rgba(0, 0, 0, .55); }
.advantages li, .advantages li:after { color: var(--cs-muted); }

/* Lit bands (Studio Sound, the closing CTA) stay lit, deepened so they read
   as a glow inside the page instead of a white-hot slab on top of it. */
.cs-band {
    background-image: linear-gradient(135deg, #1a0f3d 0%, #4a27a8 55%, #6C3FE3 100%);
}
.bg-purple-gradient {
    background-image: linear-gradient(135deg, #2c1466 0%, #5730c9 55%, #7a52e8 100%) !important;
}

/* ---------- Header / navigation ---------------------------------------
   Two header classes ship on this site: `tra-menu` (the home page) and
   `white-menu` (every inner page). Both resolve to #fff on scroll in
   style.css, so both are repainted here.

   ⚠ NEITHER ONE PAINTS AT REST. Carlos, 2026-08-26: "the header on the website
   should never be black unless scrolled." `.white-menu .wsmainfull` used to be
   in this selector list WITHOUT `.scroll`, which is what made the bar solid
   black from the first pixel on every page except the home page — the pages
   sit on the same dark canvas, so a black slab across the top read as a
   separate surface bolted over the design rather than part of it.

   Now ONLY the `.scroll` states paint. custom.js adds that class past 80px, so
   the bar fades in as you leave the top of any page and fades out when you come
   back. The nav text is already var(--cs-ink) and the canvas behind it is dark,
   so it stays legible with nothing behind it.

   ⚠ DO NOT "FIX" AN INNER PAGE BY RE-ADDING `.white-menu .wsmainfull` HERE.
   If a page's own first section is too light to read white nav against, that
   section is the thing to change. */

/* ⚠ TRANSPARENT HAS TO BE STATED, NOT MERELY LEFT UNSAID. Dropping the dark
   paint from the at-rest selector did not leave the bar clear — it exposed
   style.css:2346, `.white-menu .wsmainfull { background-color: #fff!important }`,
   and the header came back WHITE on every inner page. The template's default is
   an opaque white bar with a light box-shadow; there is no state in it that
   means "no bar". So the resting state is declared here, with !important to beat
   the template's own, and the shadow and border cleared with it — a shadow under
   an invisible bar draws a grey seam across the top of the page. */
.tra-menu .wsmainfull,
.white-menu .wsmainfull {
    background-color: transparent !important;
    border-bottom: 0;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: background-color .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}

.tra-menu .wsmainfull.scroll,
.white-menu .wsmainfull.scroll {
    background-color: rgba(5, 4, 9, .82) !important;
    border-bottom: 1px solid var(--cs-line);
    box-shadow: 0 2px 24px rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
}

.white-menu .wsmenu > .wsmenu-list > li > a,
.tra-menu.navbar-light .scroll .wsmenu > .wsmenu-list > li a,
.wsmenu > .wsmenu-list > li > a { color: var(--cs-ink) !important; }

.white-menu .wsmenu > .wsmenu-list > li:hover > a,
.wsmenu > .wsmenu-list > li:hover > a { color: #fff !important; }

/* The Sign In pill is a button, not a link — leave it to .btn-purple. */
.wsmenu > .wsmenu-list > li > a.btn,
.wsmenu > .wsmenu-list > li > a.btn:hover { color: #fff !important; }

/* Dropdowns */
.wsmenu > .wsmenu-list > li > ul.sub-menu,
.wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu {
    background-color: var(--cs-panel-hard) !important;
    border: 1px solid var(--cs-line) !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .6);
}
.wsmenu > .wsmenu-list > li > ul.sub-menu > li > a { color: var(--cs-body) !important; }
.wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover { background-color: rgba(255, 255, 255, .05); }

/* Mobile: the drawer and the fixed 54px bar are their own white surfaces. */
/* ⚠ TRANSPARENT UNTIL SCROLLED — ON EVERY PAGE (Carlos, 2026-08-26: "the header
   on the website should never be black unless scrolled"). This block used to
   exempt `white-menu`, keeping the mobile bar solid on every inner page; it now
   matches the desktop rule above, so both surfaces behave the same way.

   ⚠ .scroll IS ON A SIBLING. custom.js adds it to .wsmainfull past 80px, and
   .wsmobileheader is the element BEFORE it in .header-wrapper — no combinator
   reaches backwards, so the state is read off the shared parent with :has().
   A sibling selector here silently matches nothing.

   ⚠ SOLID WHENEVER THE DRAWER IS OPEN. custom.js puts .wsactive on <body>; a
   transparent bar behind an open menu shows the page sliding under the logo.
   That case is checked first, so it wins regardless of scroll position. */
.tra-menu .wsmobileheader,
.white-menu .wsmobileheader {
    background-color: transparent !important;
    box-shadow: none;
    transition: background-color .25s ease, box-shadow .25s ease;
}
body.wsactive .wsmobileheader,
.header-wrapper:has(.wsmainfull.scroll) .wsmobileheader {
    background-color: rgba(5, 4, 9, .82) !important;
    box-shadow: 0 2px 24px rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
}

/* ⚠ FALLBACK for anything without :has(). Without this the bar would stay
   transparent the whole way down the page rather than merely not animating —
   a solid bar is the safe end state, so non-supporting browsers get that. */
@supports not selector(:has(*)) {
    .tra-menu .wsmobileheader,
    .white-menu .wsmobileheader { background-color: var(--cs-canvas) !important; }
}
.wsmenu > .wsmenu-list { background: var(--cs-panel-hard) !important; }
.wsmenu > .wsmenu-list > li > a { border-bottom-color: var(--cs-line) !important; }
.wsanimated-arrow span,
.wsanimated-arrow span:before,
.wsanimated-arrow span:after { background: var(--cs-ink); }
.wsactive .wsanimated-arrow span { background-color: transparent; }
.overlapblackbg { background-color: rgba(0, 0, 0, .7); }

/* Logos: the brand art ships in two inks — `-dark` (black wordmark, for light
   backgrounds) and `-light` (white wordmark). The dark site wears `-light`,
   named in the markup, so nothing is filtered or recolored here. */

/* ---------- Cards & panels --------------------------------------------
   One panel treatment, applied to every card shape the site actually uses:
   the how-it-works steps (.cta-box), the contact and plan cards
   (.cs-form-card), the feature tiles and the PWA popup. */
.cta-box,
.cs-form-card,
.cs-pwa-popup,
.fbox-img,
.pricing-2-table {
    background-color: var(--cs-panel) !important;
    border: 1px solid var(--cs-line) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.cta-box:hover,
.pricing-2-table:hover { background-color: var(--cs-panel-2) !important; }
.pricing-2-table:hover { box-shadow: 0 24px 48px rgba(0, 0, 0, .55); }

.cs-plan-list li { color: var(--cs-body); }
.cs-plan-featured {
    border-color: rgba(var(--cs-primary-rgb), .55) !important;
    box-shadow: 0 24px 60px rgba(var(--cs-primary-rgb), .22);
}
.cs-plan-featured h2 { color: #a98cff; }
.pricing-plan.highlight { border-color: rgba(var(--cs-primary-rgb), .55); }

/* Feature icon chips and contact-method circles. */
.cs-contact-method .cs-cm-ico { background: rgba(var(--cs-primary-rgb), .16); color: #a98cff; }
.cs-contact-method a { color: #a98cff; }
.fbox-ico span, .fbox-ico-center.purple-color span, .purple-color { color: #a98cff !important; }

/* ---------- Get the app ---------- */
.getapp-card {
    background:
        radial-gradient(120% 120% at 50% -10%, rgba(var(--cs-primary-rgb), .30) 0%, rgba(var(--cs-primary-rgb), 0) 55%),
        linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .015) 100%);
    border: 1px solid var(--cs-line);
    box-shadow: 0 34px 80px rgba(0, 0, 0, .5);
}
.getapp-card > p.p-lg { color: var(--cs-body); }
.getapp-eyebrow { color: #b79dff; background: rgba(var(--cs-primary-rgb), .2); }
.getapp-foot { color: var(--cs-muted); }
/* The store badges were near-black on white; on the dark canvas they need
   an edge or they dissolve into the card. */
.cs-store-badge { background: rgba(255, 255, 255, .06); border-color: var(--cs-line-2); }
.cs-store-badge:hover { background: rgba(255, 255, 255, .12); }

/* ---------- PWA popup / magnific ---------- */
.cs-pwa-popup { background: var(--cs-panel-hard) !important; }
.cs-pwa-steps li { color: var(--cs-body); }
.cs-step-ico { border-color: var(--cs-line-2); }
.mfp-bg { background: #000; opacity: .8; }

/* ---------- FAQ accordion ---------- */
.accordion-item { border-bottom-color: var(--cs-line); }
.accordion-thumb h5 { color: var(--cs-ink); }
.accordion-item .accordion-thumb:after,
.accordion-item.is-active .accordion-thumb:after { color: #a98cff; }
.accordion-panel p { color: var(--cs-body); }

/* ---------- Forms ---------- */
.form-control,
.form-select,
.contact-form .form-control,
.contact-form .form-select {
    background-color: rgba(255, 255, 255, .04);
    border: 1px solid var(--cs-line-2);
    color: var(--cs-ink);
}
.form-control:focus,
.form-select:focus,
.contact-form .form-control:focus,
.contact-form .form-select:focus {
    background-color: rgba(255, 255, 255, .06);
    color: var(--cs-ink);
}
.form-control::placeholder { color: var(--cs-muted); }
.form-select {
    /* Bootstrap's caret is a dark SVG data-URI; recolored to the body ink. */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a9a3bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-select option { background-color: var(--cs-panel-hard); color: var(--cs-ink); }
.contact-form .form-label, .form-label { color: var(--cs-ink); }
.cs-legal-body, .cs-legal-text, .cs-legal-text li, .cs-legal-text p { color: var(--cs-body); }

/* ---------- Alerts ---------- */
.alert-success { background-color: rgba(15, 188, 73, .12); border-color: rgba(15, 188, 73, .35); color: #7ee2a0; }
.alert-danger  { background-color: rgba(246, 65, 45, .12); border-color: rgba(246, 65, 45, .35); color: #ff9d92; }
.alert-warning { background-color: rgba(255, 179, 12, .12); border-color: rgba(255, 179, 12, .35); color: #ffd68a; }

/* ---------- Buttons ---------------------------------------------------
   The outline buttons were black-on-white ("See How It Works", the grey
   secondary). Purple and white buttons already work on dark. */
.btn-tra-black, .white-color .btn-tra-black,
.btn-tra-grey,  .white-color .btn-tra-grey {
    color: var(--cs-ink) !important;
    border-color: var(--cs-line-2) !important;
    background-color: transparent !important;
}
.btn-tra-black:hover, .btn-tra-grey:hover,
.grey-hover:hover, .tra-grey-hover:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, .08) !important;
    border-color: var(--cs-line-2) !important;
}
.btn-tra-black:focus, .btn.btn-tra-grey:focus { color: var(--cs-ink) !important; }
.tra-white-hover:hover { color: #fff !important; background-color: rgba(255, 255, 255, .12) !important; border-color: rgba(255, 255, 255, .35) !important; }

/* ---------- Footer ---------- */
.footer {
    background-color: rgba(0, 0, 0, .35);
    border-top: 1px solid var(--cs-line);
}
.footer h6, .footer h5 { color: var(--cs-ink); }
.footer a, .footer-links li a, .bottom-footer-list a { color: var(--cs-body); }
.footer a:hover, .footer-links li a:hover, .bottom-footer-list a:hover { color: #fff; }
.footer-socials a span { color: var(--cs-body); }
.footer-socials a:hover span { color: #a98cff; }
.footer-copyright p { color: var(--cs-muted); }
.footer hr { border-color: var(--cs-line); }

/* ---------- Preloader ---------------------------------------------------
   #loading is a full-screen white sheet in style.css: leaving it light
   means every page flashes white before the canvas paints. */
#loading { background-color: var(--cs-canvas) !important; }

/* ---------- Scrollbar & selection ---------- */
::selection { background: rgba(var(--cs-primary-rgb), .45); color: #fff; }
html { color-scheme: dark; }

/* ---------- Stragglers ------------------------------------------------
   Template rules that are more specific (or !important) than the blocks
   above and would otherwise punch a white hole in the page. */

/* The little notch drawn above an open dropdown. */
.wsmenu > .wsmenu-list > li > ul.sub-menu:before { background-color: var(--cs-panel-hard) !important; }

/* Mobile drawer: the slide-down submenu and its pressed state. */
.wsmenu > .wsmenu-list > li > ul.sub-menu li:hover > a,
.wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a:hover {
    background-color: rgba(255, 255, 255, .06) !important;
    color: #fff !important;
}

/* The header Sign In pill: on scroll the template forces near-black text
   and border on hover, which is invisible on the dark bar. */
.scroll .tra-white-hover:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, .12) !important;
    border-color: rgba(255, 255, 255, .35) !important;
}

/* Contact form field labels are rendered as <p> inside #contacts-2. */
#contacts-2 .contact-form p { color: var(--cs-ink); }