/* ============================================================
   AIFlow public website — day (light) theme, always.
   Loaded by partials/head.php only when a page sets $siteLight = true,
   so the dashboard and admin panel keep their own day/night toggle.

   Palette: Merciglobal orange + indigo on cool porcelain (no charcoal).
   These re-map app.css's variables, so every shared component
   (.btn, .card, .muted, .tag, pricing partial, site footer)
   inherits the light look with no forked markup.

   The [data-theme] selectors are repeated on purpose: app.css's own
   light block would otherwise out-specify :root and win.
   ============================================================ */
/* Every value below is measured against WCAG 2.2 AA on this page's own surfaces
   (--bg #F4F4F9 and --card #FFF), not picked by eye:
     --accent  #AF570B : white label on it        = 5.01  (was #C2620E → 4.16, failed)
     --accent  #AF570B : as text on --bg          = 4.57
     --accent2 #A8520A : as text on --bg / --card = 4.94 / 5.42
     --muted   #565A80 : on --bg / --card         = 6.04 / 6.62
     --muted2  #666A82 : on --bg / --card         = 4.85 / 5.32  (was #83879F → 3.23, failed)
     --ok      #0A7A52 : on --bg / --card         = 4.89 / 5.36  (was #0F9D6E → 3.16, failed)
   Re-check with scratchpad/audit.js after changing any of them. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"]{
  --bg:#F4F4F9; --bg2:#FFFFFF; --card:#FFFFFF; --card2:#F3F3F9;
  --line:#E4E4F0; --txt:#13142C; --muted:#565A80; --muted2:#666A82;
  --accent:#AF570B; --accent2:#A8520A; --accent-soft:#FDEEDC;
  --ok:#0A7A52; --warn:#B45309; --bad:#DC2626; --ink:#0D0D0D;
  --radius:18px;
  --shadow:0 24px 60px -28px rgba(20,20,60,.30);
  --shadow-sm:0 1px 2px rgba(20,20,45,.06);
  --shadow-lg:0 30px 70px -30px rgba(20,20,60,.30);
  --ring:0 0 0 3px rgba(194,98,14,.18);
  --header-bg:rgba(255,255,255,.92);
  --warn-bg:#FEF3C7; --warn-txt:#92400E;
  --indigo:#4338CA; --wash:rgba(19,20,44,.035); --hair:rgba(19,20,44,.07);
  --grid-line:rgba(19,20,44,.05);
}

/* The cookie bar hardcodes dark fallbacks for the case where tokens
   are missing; on the light site those fallbacks must never show. */
#aif-cookie{background:var(--card)!important;border-color:var(--line)!important;
  box-shadow:0 12px 40px rgba(20,20,60,.14)!important}
#aif-cookie span{color:var(--muted)!important}
#aif-cookie a{color:var(--accent)!important}

/* Shared public-site type scale. Kept here (not in app.css) so the
   dashboard's own typography is unaffected. */
.dsp{font-family:'Bricolage Grotesque','Inter',system-ui,sans-serif;
  letter-spacing:-.03em;line-height:1.04;font-weight:800}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:500;font-variant-numeric:tabular-nums}
.eyebrow{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted2);margin:0 0 14px}
.lede{color:var(--muted);font-size:17px;line-height:1.62;max-width:56ch}

/* ---- Auth split-panel (login / register / forgot / reset) ----
   app.css paints .auth-side with a fixed dark gradient, but its text inherits
   --txt. On the light site that renders dark-on-dark — the panel's headline and
   copy effectively disappear. The panel stays a rich brand surface (it is the
   only colour on an otherwise white page) and every child is repainted light.
   Measured on the mid-stop #2E2B6E: white = 12.6:1, the muted white = 9.2:1. */
.auth-side{background:linear-gradient(160deg,#1A1838 0%,#2E2B6E 52%,#8A4409 100%)!important;
  color:#FFFFFF;position:relative;overflow:hidden}
.auth-side:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px 300px at 82% 8%,rgba(245,198,69,.20),transparent 70%)}
.auth-side>*{position:relative;z-index:1}
.auth-side .brand{color:#FFFFFF}
.auth-side .brand .dot{color:#F5C645}          /* brand gold — only legible on this dark panel */
.auth-side h1,.auth-side h2,.auth-side h3{color:#FFFFFF}
.auth-side p,.auth-side li,.auth-side .muted,.auth-side ul{color:rgba(255,255,255,.82)!important}
.auth-side .ac-dot{background:rgba(255,255,255,.34)}
.auth-side .ac-dot.active{background:#F5C645}

/* ============================================================
   Public site nav (partials/site_nav.php) — shared by every page.
   Behaviour: assets/site-nav.js
   ============================================================ */
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.nav2{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s,background .2s}
.nav2.stuck{border-bottom-color:var(--line)}
.nav2 .row{display:flex;align-items:center;gap:12px;height:70px}
.logo2{display:flex;align-items:center;gap:9px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:21px;letter-spacing:-.03em;color:var(--txt);margin-right:auto;min-height:44px}
.logo2 .mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(145deg,var(--accent),#F5A623);
  display:grid;place-items:center;color:#fff;font-size:15px;box-shadow:0 4px 14px -4px rgba(175,87,11,.55);flex:none}
.nlink{font-size:14.5px;font-weight:600;color:var(--muted);padding:8px 12px;border-radius:9px;
  background:none;border:0;font-family:inherit;cursor:pointer;white-space:nowrap}
.nlink:hover{color:var(--txt);background:var(--wash)}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);
  color:var(--muted);display:grid;place-items:center;cursor:pointer;font-size:15px;flex:none}
.icon-btn:hover{color:var(--accent2);border-color:var(--accent)}
.nav-desk{display:flex;align-items:center;gap:2px}
.nav-cta{display:flex;align-items:center;gap:8px}
#navBurger{display:none}

/* Features dropdown */
.has-menu{position:relative}
.menu-btn{display:inline-flex;align-items:center;gap:6px}
.menu-btn .caret{font-size:10px;transition:transform .18s}
.menu-btn[aria-expanded="true"]{color:var(--txt);background:var(--wash)}
.menu-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.menu{position:absolute;top:calc(100% + 10px);left:0;width:340px;background:var(--bg2);
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:8px;
  display:none;flex-direction:column;gap:2px}
.menu.open{display:flex}
/* Hover bridge: the 10px gap above the menu is not part of .has-menu, so moving the
   pointer from the button down to an item would fire mouseleave and close it mid-travel.
   This invisible strip makes the hover area contiguous. */
.menu:before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.menu a{display:block;padding:10px 12px;border-radius:11px}
.menu a:hover,.menu a:focus-visible{background:var(--accent-soft)}
.menu .mi-t{display:block;font-size:14px;font-weight:600;color:var(--txt)}
.menu .mi-d{display:block;font-size:12.5px;color:var(--muted2);margin-top:2px}

@media(max-width:1040px){ .nav-desk{display:none} #navBurger{display:grid} .nav-cta .btn-login{display:none} }
@media(max-width:560px){ .nav2 .row{height:64px} .logo2{font-size:19px} .icon-btn{width:44px;height:44px} }

/* Mobile sheet */
.sheet{position:fixed;inset:0;z-index:70;background:rgba(12,12,30,.55);backdrop-filter:blur(4px);display:none}
.sheet.open{display:block}
.sheet-in{position:absolute;top:0;right:0;bottom:0;width:min(330px,88vw);background:var(--bg2);
  border-left:1px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.sheet-h{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted2);margin:14px 0 4px;padding:0 12px}
.sheet-in a{padding:12px;border-radius:11px;font-weight:600;font-size:14.5px;color:var(--txt);
  min-height:44px;display:flex;align-items:center}
.sheet-in a:hover{background:var(--wash)}

/* Mobile floors: every tap target ≥44px, inputs 16px so iOS never zooms.
   Scoped to the public site — the dashboard sets its own densities. */
@media(max-width:560px){
  .btn,.btn-sm{min-height:44px}
  .ftr-soc{width:44px!important;height:44px!important}
  a.brand{min-height:44px;display:inline-flex!important;align-items:center}
  .input,select,textarea{font-size:16px;min-height:44px}
}