/* Now City marketing: the glass theme (Erik, 2026-10-06). Linked LAST on every public page, after
   brand.css and after the page's own <style>, so it is the one place the look is set: it wins over a
   page's older inline night colors on equal specificity, by order. Same direction as the app. */
/* ===== Glass theme (Erik, 2026-10-06) =====================================================
   The same direction as the app at app.nowcity.ai: cool palettes in both modes, and frosted glass
   surfaces over a background that has something in it to show through. Three parts:
   1. tokens: cool navy at night, cool white by day (accents unchanged);
   2. the backdrop: soft color fields plus a faint plan-view city fabric (media/city-lines.svg),
      fixed behind the page;
   3. glass: translucent surfaces, a blur and lift of what is behind them (the frost), a light top
      edge, and a soft shadow. Text never sits on the art directly; it sits on glass. */
:root{
  --cream:#f3f6fb;--cream2:#e9eef6;--paper:#eef2f8;
  --glass-1:rgba(255,255,255,.72);--glass-2:rgba(255,255,255,.52);--glass-edge:rgba(255,255,255,.85);
  --glass-line:rgba(30,55,90,.11);--glass-shadow:0 22px 48px -30px rgba(30,55,90,.38);
  --art-1:rgba(108,99,255,.16);--art-2:rgba(31,151,176,.14);--art-3:rgba(196,133,47,.08);--art-lines:.55;
}
[data-theme="dark"]{
  --cream:#07101a;--cream2:#0d1926;--paper:#0b1622;--surface:#122233;--surface-2:#0d1926;
  --ink:#e8eef5;--ink-soft:#c2d1de;--ink-mut:#8aa0b4;--ink-deep:#f4f8fc;
  --line:rgba(140,190,225,.16);--line-2:rgba(140,190,225,.08);
  --cyan-tint:#11283a;--cyan:#2c5266;--violet-tint:#1d1f45;--violet-line:#3d3f86;
  --glass-1:rgba(30,52,76,.52);--glass-2:rgba(14,28,44,.42);--glass-edge:rgba(170,210,240,.14);
  --glass-line:rgba(140,190,225,.14);--glass-shadow:0 26px 60px -30px rgba(0,0,0,.75);
  --art-1:rgba(108,99,255,.30);--art-2:rgba(31,151,176,.24);--art-3:rgba(196,133,47,.10);--art-lines:.6;
}
body{background:var(--cream);position:relative;isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vmax 45vmax at 8% 0%,var(--art-1),transparent 62%),
    radial-gradient(55vmax 42vmax at 100% 30%,var(--art-2),transparent 60%),
    radial-gradient(50vmax 35vmax at 45% 108%,var(--art-3),transparent 65%),
    var(--cream)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--art-lines);
  background:url(/media/city-lines.svg) center/cover no-repeat;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 30%,#000 35%,transparent 85%);mask-image:radial-gradient(120% 90% at 50% 30%,#000 35%,transparent 85%)}

/* glass surfaces: every card-like element on the public pages, shared and page-specific */
.card,.step,.vs .col,.shotframe,.uc,.legend,.toc a,.tool,.surf,.stat,.litem,.flow,.mini,.tier,.pc,.lrow,.chain,.app,.dev,.acol,.x,.door,.way,.ad,.licard,.fit,.gets,.pr,.loop span,.wh,.gate,.twin .t,.twin2 .t{
  background:linear-gradient(180deg,var(--glass-1),var(--glass-2));
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-edge),var(--glass-shadow)}
[data-theme="dark"] .card,[data-theme="dark"] .step,[data-theme="dark"] .vs .col,[data-theme="dark"] .shotframe,[data-theme="dark"] .uc,[data-theme="dark"] .legend,[data-theme="dark"] .toc a,[data-theme="dark"] .tool,[data-theme="dark"] .surf,[data-theme="dark"] .stat,[data-theme="dark"] .litem,[data-theme="dark"] .flow,[data-theme="dark"] .mini,[data-theme="dark"] .tier,[data-theme="dark"] .pc,[data-theme="dark"] .lrow,[data-theme="dark"] .chain,[data-theme="dark"] .app,[data-theme="dark"] .acol,[data-theme="dark"] .dev,[data-theme="dark"] .x,[data-theme="dark"] .door,[data-theme="dark"] .way,[data-theme="dark"] .ad,[data-theme="dark"] .licard,[data-theme="dark"] .fit,[data-theme="dark"] .gets,[data-theme="dark"] .pr,[data-theme="dark"] .loop span,[data-theme="dark"] .wh,[data-theme="dark"] .gate,[data-theme="dark"] .twin .t,[data-theme="dark"] .twin2 .t{background:linear-gradient(180deg,var(--glass-1),var(--glass-2));border-color:var(--glass-line)}
.vs .col.them,[data-theme="dark"] .vs .col.them{background:transparent;border-style:dashed;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
/* bands become a thin frost over the art instead of a solid fill */
.alt,[data-theme="dark"] .alt,.trust,[data-theme="dark"] .trust{background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 55%,transparent),color-mix(in srgb,var(--paper) 35%,transparent));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-color:var(--glass-line)}
.closer,[data-theme="dark"] .closer{background:linear-gradient(180deg,rgba(7,16,26,.88),rgba(13,25,38,.94));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* buttons: the app's system: an accent gradient for the one primary, glass for the rest */
.btn.terra,[data-theme="dark"] .btn.terra{background:linear-gradient(180deg,#8f88ff,#6c63ff);color:#fff;border-color:color-mix(in srgb,#6c63ff 70%,#fff 10%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 26px -12px #6c63ff}
.btn.terra:hover,[data-theme="dark"] .btn.terra:hover{filter:brightness(1.07);background:linear-gradient(180deg,#8f88ff,#6c63ff)}
.btn.ghost,[data-theme="dark"] .btn.ghost{background:var(--glass-1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-color:var(--glass-line);color:var(--ink)}
@media (prefers-reduced-transparency:reduce){
  .card,.step,.vs .col,.shotframe,.uc,.legend,.toc a,.app,.dev,.acol,.alt,.trust{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--surface)}
}
[data-theme="dark"] .uc .mc{background:rgba(140,190,225,.08)}
[data-theme="dark"] .uc .ic{background:color-mix(in srgb,var(--terra) 14%,transparent);border-color:color-mix(in srgb,var(--terra) 35%,transparent)}
[data-theme="dark"] .btn.terra{background:linear-gradient(180deg,#8f88ff,#6c63ff)}
/* the one primary per screen uses the accent gradient (the app's button system) */
.btn.primary,[data-theme="dark"] .btn.primary{background:linear-gradient(180deg,#8f88ff,#6c63ff);color:#fff;border-color:color-mix(in srgb,#6c63ff 70%,#fff 10%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 26px -12px #6c63ff}
.btn.primary:hover{filter:brightness(1.07)}
/* real screenshots sit in a dark glass frame in both modes */
.shotframe,.heroshot .shotframe{background:#07101a;border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-edge),0 40px 80px -40px rgba(7,16,26,.6)}
/* glossary: it had no night mode of its own, so its hard-coded text colors are lifted here */
.term{background:linear-gradient(180deg,var(--glass-1),var(--glass-2));border-color:var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-edge)}
.search{background:color-mix(in srgb,var(--cream) 72%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
[data-theme="dark"] .tdef,[data-theme="dark"] .hsub{color:var(--ink-soft)}
[data-theme="dark"] .search .count,[data-theme="dark"] .nohit,[data-theme="dark"] footer,[data-theme="dark"] footer a{color:var(--ink-mut)}
[data-theme="dark"] .search input{background:var(--glass-1);border-color:var(--glass-line);color:var(--ink)}
/* the Upside Explorer agent chips: tinted glass in each role's accent, in both modes */
.fk.a,.fk.c,.fk.p,.fk.g,.fk.pl{background:color-mix(in srgb,var(--fkc) 14%,transparent);border-color:color-mix(in srgb,var(--fkc) 45%,transparent);color:var(--ink)}
.fk.a{--fkc:#c4852f}.fk.c{--fkc:#6c63ff}.fk.p{--fkc:#1f97b0}.fk.g{--fkc:#46b98a}.fk.pl{--fkc:#8aa0b4}
.fk.pl.pl{border-style:dashed;color:var(--ink-mut)}