/* Builtie city report design system.
   Extracted verbatim from h1-2026-gta.html so the city reports are visual
   siblings of the GTA report rather than a lookalike that drifts. Sections
   specific to the GTA page (Toronto neighbourhood map, events calendar,
   collaboration bridges) are not carried over. City-specific additions are
   at the bottom under 'CITY REPORT ADDITIONS'.
   Generated by scripts/generate-city-reports.mjs consumers; edit here. */

  :root{
    --bg:#0A0A0F; --bg2:#101018; --panel:#13131c; --line:rgba(232,232,240,.10);
    --line2:rgba(232,232,240,.18); --ink:#E8E8F0; --muted:#8C8CA6; --dim:#62627a;
    --lime:#BFFF1A; --limeDim:rgba(191,255,26,.14); --limeLine:rgba(191,255,26,.32);
    --cyan:#5EC8FF; --amber:#F4A93C; --violet:#A78BFA; --slate:#5b6072; --rose:#FF6B7A;
    --heading:'Sora','Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    --disp:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--disp);
    font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;letter-spacing:.1px}
  ::selection{background:var(--lime);color:#000}
  a{color:inherit}
  .wrap{max-width:1120px;margin:0 auto;padding:0 28px}
  .mono{font-family:var(--mono)}
  .lime{color:var(--lime)}
  .muted{color:var(--muted)}

  /* top bar */
  .topbar{position:sticky;top:0;z-index:50;background:rgba(10,10,15,.82);
    backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .topbar .wrap{display:flex;align-items:center;gap:22px;height:56px}
  .brand{font-weight:700;letter-spacing:.5px;font-size:15px;white-space:nowrap}
  .brand .dot{color:var(--lime)}
  .navlinks{display:flex;gap:18px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
  .navlinks::-webkit-scrollbar{display:none}
  .navlinks a{font-family:var(--mono);font-size:11.5px;color:var(--muted);text-decoration:none;
    text-transform:uppercase;letter-spacing:1px;white-space:nowrap;padding:4px 0;border-bottom:1px solid transparent}
  .navlinks a:hover{color:var(--lime);border-color:var(--limeLine)}
  /* Hide in-page section links until the report is unlocked */
  body:not(.is-unlocked) .navlinks a.section-link{display:none}
  /* ...and drop the pre-gate teaser once it is. The teaser sits outside #gated-wrap
     so it survives the unlock, which left a blurred "Unlock to see it" panel sitting
     directly above the full Loyalty Matrix it was teasing. */
  body.is-unlocked #loyalty-teaser-section{display:none}

  /* hero */
  .hero{padding:0 0 30px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
  .hero:before{content:"";position:absolute;inset:0;background:
    radial-gradient(900px 380px at 88% -10%, rgba(191,255,26,.10), transparent 60%);
    pointer-events:none}
  .heroimg{position:relative;width:100%;height:clamp(320px,58vw,620px);margin:0 0 8px;overflow:hidden;border-bottom:1px solid var(--line)}
  .heroimg img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.15) contrast(1.15)}
  .heroimg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,15,0) 40%,rgba(10,10,15,.85) 92%,var(--bg) 100%)}
  .heroimg .credit{position:absolute;right:14px;bottom:10px;font-family:var(--mono);font-size:10px;letter-spacing:1px;color:rgba(255,255,255,.55);z-index:2}
  .heroimg .credit a{color:inherit;text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.35)}
  .heroimg .hero-title{position:absolute;left:0;right:0;bottom:0;padding:0 clamp(20px,6vw,80px) clamp(28px,5vw,56px);z-index:2;pointer-events:none}
  .heroimg .hero-title .kicker{font-family:var(--mono);font-size:clamp(11px,1.1vw,14px);letter-spacing:4px;color:var(--lime);margin-bottom:14px;text-transform:uppercase}
  .heroimg .hero-title h1{font-family:var(--heading);font-weight:400;color:#fff;font-size:clamp(38px,6vw,88px);line-height:1;letter-spacing:-2px;margin:0}
  .heroimg .hero-title h1 .thin{display:block;color:rgba(255,255,255,.72);font-style:italic;margin-top:6px}
  .kicker{font-family:var(--mono);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--lime)}
  h1{font-family:var(--heading);font-size:clamp(38px,7vw,82px);line-height:.98;font-weight:700;margin:18px 0 0;letter-spacing:-1.5px}
  h1 .thin{color:var(--muted);font-weight:400}
  .thesis{max-width:680px;color:#cfcfe0;font-size:18px;margin:22px 0 0}
  .herometa{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:26px;font-family:var(--mono);font-size:12px;color:var(--dim)}
  .herometa b{color:var(--ink);font-weight:500}

  /* headline stats */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line);margin:38px 0 0}
  .stat{background:var(--bg);padding:24px 22px}
  .stat .n{font-family:var(--mono);font-size:clamp(26px,3.4vw,38px);font-weight:700;letter-spacing:-1px;line-height:1}
  .stat .l{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-top:10px}
  .stat .s{font-size:12.5px;color:var(--dim);margin-top:6px}
  .stat.accent .n{color:var(--lime)}

  /* sections */
  section{padding:64px 0;border-bottom:1px solid var(--line)}
  .eyebrow{display:flex;align-items:baseline;gap:14px;font-family:var(--mono);font-size:12px;
    letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
  .eyebrow .num{color:var(--lime)}
  .eyebrow .rule{flex:1;height:1px;background:var(--line)}
  h2{font-size:clamp(26px,3.6vw,40px);font-weight:600;letter-spacing:-.8px;margin:0 0 14px;line-height:1.05}
  .lede{max-width:760px;color:#c4c4d6;font-size:17px;margin:0 0 28px}
  h3{font-size:19px;font-weight:600;letter-spacing:-.3px;margin:34px 0 14px}

  /* generic panels + grid */
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
  .panel h4{margin:0 0 4px;font-size:14px;font-weight:600;letter-spacing:.2px}
  .panel .cap{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
  .chartbox{position:relative;width:100%}

  /* callout */
  .callout{border:1px solid var(--limeLine);background:var(--limeDim);border-radius:14px;padding:20px 22px;margin:26px 0 0}
  .callout .tag{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--lime);margin-bottom:8px}
  .callout p{margin:0;color:#e9f5cf;font-size:15.5px}
  .callout p+p{margin-top:10px}

  /* tables */
  .tbl{width:100%;border-collapse:collapse;font-size:14px}
  .tbl th{font-family:var(--mono);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);
    text-align:left;padding:10px 12px;border-bottom:1px solid var(--line2);position:sticky;top:0}
  .tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
  .tbl tr:hover td{background:rgba(191,255,26,.04)}
  .tbl td.num,.tbl th.num{text-align:right;font-family:var(--mono)}
  .rank{font-family:var(--mono);color:var(--lime);font-weight:700;width:30px}
  .firm{font-weight:600}
  .tag-pill{font-family:var(--mono);font-size:10px;letter-spacing:.5px;padding:2px 7px;border-radius:999px;
    border:1px solid var(--line2);color:var(--muted);text-transform:uppercase}
  .tag-pill.pub{color:var(--cyan);border-color:rgba(94,200,255,.35)}
  .tag-pill.priv{color:var(--lime);border-color:var(--limeLine)}
  .tag-pill.uc{color:var(--amber);border-color:rgba(244,169,60,.4)}
  .tag-pill.pre{color:var(--violet);border-color:rgba(167,139,250,.4)}
  .scroller{overflow:auto;border:1px solid var(--line);border-radius:14px}
  .scroller .tbl th{background:var(--bg2)}

  /* mini bar inside cells */
  .mbar{height:6px;border-radius:4px;background:var(--lime);display:inline-block;vertical-align:middle;min-width:2px}
  .mbar.sl{background:var(--slate)}

  /* ---- interactive tooltip ---- */
  .tip-host{cursor:help}
  #tooltip{position:fixed;z-index:200;max-width:300px;background:#15151f;border:1px solid var(--limeLine);
    border-radius:10px;padding:11px 13px;font-size:12.5px;line-height:1.5;color:#e9f5cf;
    box-shadow:0 14px 38px rgba(0,0,0,.6);pointer-events:none;opacity:0;transition:opacity .12s;font-family:var(--disp)}
  #tooltip .th{font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--lime);margin-bottom:5px}
  .hint{font-family:var(--mono);font-size:11px;color:var(--dim);margin:0 0 22px;display:flex;align-items:center;gap:7px}
  .hint b{color:var(--lime);font-weight:500}

  /* ---- association header cards ---- */
  .acards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .acard{background:linear-gradient(180deg,#0e0e16,#0a0a0f);border:1px solid var(--line2);border-radius:16px;padding:22px 24px;position:relative;overflow:hidden}
  .acard:after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border-radius:50%;
    background:radial-gradient(circle,rgba(191,255,26,.10),transparent 70%);pointer-events:none}
  .acard .ttl{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .acard .ttl b{font-size:24px;font-weight:700;letter-spacing:-.5px}
  .acard .ttl .sub{font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
  .acard .big{font-family:var(--mono);font-size:42px;font-weight:700;color:var(--lime);line-height:1;margin:16px 0 2px}
  .acard .biglbl{font-family:var(--mono);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
  .acard .row2{display:flex;gap:26px;margin-top:18px;flex-wrap:wrap}
  .acard .row2 .k{font-family:var(--mono);font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--dim)}
  .acard .row2 .v{color:var(--ink);font-size:19px;font-weight:600;font-family:var(--mono)}

  /* ---- BILD category bars ---- */
  .catbar{display:flex;flex-direction:column;gap:9px;margin-top:4px}
  .catrow{display:grid;grid-template-columns:175px 1fr 64px;align-items:center;gap:14px;font-size:13.5px}
  .catrow .track2{height:18px;background:rgba(255,255,255,.05);border-radius:5px;overflow:hidden}
  .catrow .bar{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--lime),rgba(191,255,26,.32))}
  .catrow .ads{font-family:var(--mono);font-size:11px;color:var(--amber);text-align:right}

  /* ---- event calendar ---- */
  .evcal{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .evrow{display:grid;grid-template-columns:1fr 120px 150px 110px;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);font-size:14px}
  .evrow.head{background:var(--bg2);font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
  .evrow:last-child{border-bottom:0}
  .evrow:not(.head):hover{background:rgba(191,255,26,.04)}
  .evrow .en{font-weight:600}
  .evrow .en small{display:block;font-family:var(--mono);font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px;margin-top:3px}
  .evrow .rnum{font-family:var(--mono);text-align:right}
  .st{font-family:var(--mono);font-size:10px;letter-spacing:.5px;padding:3px 10px;border-radius:999px;border:1px solid;display:inline-block}
  .st.live{color:var(--lime);border-color:var(--limeLine);background:var(--limeDim)}
  .st.target{color:var(--muted);border-color:var(--line2)}

  /* COLLABORATION BRIDGES (signature) */
  .bridges{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#0d0d14,#0a0a0f)}
  .bridge{display:grid;grid-template-columns:1fr 132px 1fr;align-items:center;gap:0;padding:14px 18px;border-bottom:1px solid var(--line)}
  .bridge:last-child{border-bottom:0}
  .bridge:hover{background:rgba(191,255,26,.04)}
  .bridge .dev{font-weight:600;font-size:15px}
  .bridge .dev small{display:block;font-family:var(--mono);font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-top:2px}
  .bridge .arc{text-align:right;font-weight:600;font-size:15px}
  .bridge .arc small{display:block;font-family:var(--mono);font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-top:2px}
  .link{position:relative;height:46px;display:flex;align-items:center;justify-content:center}
  .link .line{position:absolute;left:6px;right:6px;top:50%;height:2px;background:linear-gradient(90deg,transparent,var(--lime),transparent);opacity:.55}
  .link .cnt{position:relative;font-family:var(--mono);font-weight:700;font-size:13px;color:#000;background:var(--lime);
    border-radius:999px;padding:3px 9px;box-shadow:0 0 0 4px var(--bg)}
  .link .cnt small{font-weight:400;font-size:9px}

  /* SKYLINE (signature) */
  .skyline{display:flex;align-items:flex-end;gap:6px;height:360px;padding:18px 4px 0;border-bottom:1px solid var(--line2);overflow-x:auto;overflow-y:hidden}
  .tower{flex:1 0 58px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:58px}
  .tower .col{width:100%;max-width:40px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--lime),rgba(191,255,26,.25));
    position:relative;transition:filter .2s}
  .tower.uc .col{background:linear-gradient(180deg,var(--amber),rgba(244,169,60,.22))}
  .tower:hover .col{filter:brightness(1.2)}
  .tower .sv{font-family:var(--mono);font-weight:700;font-size:13px;margin-bottom:6px}
  .tower .nm{font-size:10.5px;color:var(--muted);text-align:center;margin-top:8px;line-height:1.15;height:42px;overflow:hidden}
  .legend{display:flex;gap:18px;font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:14px;flex-wrap:wrap}
  .legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:middle}

  /* scorecard */
  .scard{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .asset{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
  .asset .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
  .asset .top .nm{font-weight:600;font-size:15px}
  .asset .top .big{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--lime)}
  .meter{margin:9px 0}
  .meter .row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--muted);margin-bottom:4px}
  .track{height:7px;background:rgba(255,255,255,.06);border-radius:5px;overflow:hidden}
  .fill{height:100%;background:var(--lime);border-radius:5px}
  .fill.lo{background:var(--rose)}
  .fill.md{background:var(--amber)}

  /* recommendations */
  .recs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .rec{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--lime);border-radius:0 12px 12px 0;padding:18px 20px}
  .rec .n{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--lime);text-transform:uppercase}
  .rec h4{margin:8px 0 6px;font-size:16px}
  .rec p{margin:0;font-size:14px;color:#b9b9cc}
  .rec .impact{margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--dim)}
  .rec .impact b{color:var(--lime);font-weight:500}

  footer{padding:48px 0 70px}
  .foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-end}
  .foot .big{font-size:24px;font-weight:600;letter-spacing:-.4px;max-width:520px}
  .foot .meta{font-family:var(--mono);font-size:11px;color:var(--dim);line-height:1.9}
  .src{font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:8px}

  @media(max-width:820px){
    .stats{grid-template-columns:1fr 1fr}
    .grid2,.grid3,.scard,.recs,.acards{grid-template-columns:1fr}
    .catrow{grid-template-columns:120px 1fr 50px;gap:8px;font-size:12px}
    .evrow{grid-template-columns:1fr 60px 70px;font-size:12.5px}
    .evrow .hide-m{display:none}
    .bridge{grid-template-columns:1fr 96px 1fr}
    .navlinks{display:none}
    .thesis{font-size:16px}
  }
  @media(max-width:640px){
    html,body{overflow-x:hidden;max-width:100vw}
    .wrap{padding:0 16px}
    .hero h1{font-size:clamp(34px,10vw,52px);line-height:1.05;word-break:break-word}
    .hero .kicker{font-size:12px!important;letter-spacing:2px!important}
    .stats{grid-template-columns:1fr;gap:12px}
    .herometa{gap:8px}
    .herometa span{font-size:10px}
    .scroller{overflow-x:auto;-webkit-overflow-scrolling:touch}
    .tbl{min-width:560px}
    .foot{flex-direction:column;align-items:flex-start}
    .foot .big{font-size:20px}
    .voice-player{padding:12px;gap:10px}
    .vp-dl{display:none}
  }
  /* ensure any table without .scroller still scrolls horizontally */
  .tbl{display:table}
  .tbl-wrap,.scroller{overflow-x:auto}

/* --- gate (lead capture), from the same source --- */
#gated-wrap.is-gated{position:relative;max-height:900px;overflow:hidden}
#gated-wrap.is-gated > *:not(.gate-overlay){filter:blur(18px);pointer-events:none;user-select:none;-webkit-user-select:none}
#gated-wrap.is-gated::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, rgba(15,14,12,.85) 0%, rgba(15,14,12,.95) 45%, #0F0E0C 85%);pointer-events:none;z-index:5}
#gated-wrap{transition:filter .5s ease}
.gate-overlay{position:absolute;top:40px;left:0;right:0;z-index:20;display:flex;justify-content:center;padding:0 16px}
.gate-card{width:100%;max-width:560px;background:#0A0A0F;border:1px solid #262626;border-radius:16px;padding:28px;color:#E8E8F0;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.gate-card h2{font-family:'Space Grotesk',sans-serif;font-size:26px;line-height:1.15;margin:0 0 10px;color:#E8E8F0;letter-spacing:-.01em}
.gate-card .gsub{color:#B8B8C0;font-size:14.5px;line-height:1.5;margin:0 0 22px}
.gate-card label{display:block;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#8A8A94;margin:0 0 6px;font-family:'JetBrains Mono',ui-monospace,monospace}
.gate-card .field{margin-bottom:14px}
.gate-card input,.gate-card select{width:100%;background:#141419;border:1px solid #262626;border-radius:10px;padding:12px 14px;color:#E8E8F0;font-size:15px;font-family:inherit;box-sizing:border-box;transition:border-color .15s}
.gate-card input:focus,.gate-card select:focus{outline:none;border-color:#BFFF1A}
.gate-card .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gate-card .honey{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.gate-check{display:flex;gap:10px;align-items:flex-start;margin:12px 0;padding:12px;background:#111116;border:1px solid #1F1F26;border-radius:10px;cursor:pointer}
.gate-check input{width:18px;height:18px;margin-top:2px;accent-color:#BFFF1A;flex:none}
.gate-check .ctext{font-size:14px;color:#E8E8F0;line-height:1.35}
.gate-check .chelp{font-size:12.5px;color:#8A8A94;margin-top:3px;line-height:1.4}
.gate-submit{width:100%;margin-top:16px;background:#BFFF1A;color:#0A0A0F;border:none;border-radius:10px;padding:14px 16px;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:transform .15s,filter .15s}
.gate-submit:hover:not(:disabled){filter:brightness(1.05)}
.gate-submit:disabled{opacity:.7;cursor:wait}
.gate-spinner{width:16px;height:16px;border:2px solid rgba(10,10,15,.3);border-top-color:#0A0A0F;border-radius:50%;animation:gspin .8s linear infinite;display:none}
.gate-submit.is-loading .gate-spinner{display:inline-block}
@keyframes gspin{to{transform:rotate(360deg)}}
.gate-err{margin-top:12px;padding:10px 12px;background:rgba(255,80,80,.08);border:1px solid rgba(255,80,80,.35);border-radius:8px;color:#FFB0B0;font-size:13.5px;display:none}
.gate-err.is-shown{display:block}
.gate-legal{margin-top:14px;font-size:11.5px;color:#6E6E78;line-height:1.5}
.gate-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#0A0A0F;border:1px solid #BFFF1A;color:#E8E8F0;padding:14px 18px;border-radius:12px;font-size:14px;box-shadow:0 20px 48px rgba(0,0,0,.6);opacity:0;transition:opacity .3s,transform .3s;z-index:9999;pointer-events:none;max-width:90vw;text-align:center}
.gate-toast.is-shown{opacity:1;transform:translateX(-50%) translateY(0)}
.gate-splash{position:fixed;inset:0;z-index:10000;background:rgba(10,10,15,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .3s}
.gate-splash.is-shown{display:flex;opacity:1}
.gate-splash .sp-card{max-width:440px;text-align:center;background:#0A0A0F;border:1px solid #BFFF1A;border-radius:16px;padding:36px 28px;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.gate-splash .sp-check{width:56px;height:56px;border-radius:50%;background:#BFFF1A;color:#0A0A0F;display:inline-flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;margin-bottom:16px}
.gate-splash h3{font-family:'Space Grotesk',sans-serif;color:#E8E8F0;font-size:22px;margin:0 0 8px;letter-spacing:-.01em}
.gate-splash p{color:#B8B8C0;font-size:14.5px;line-height:1.5;margin:0 0 16px}
.gate-splash .sp-hint{color:#8A8A94;font-size:12.5px;font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:1px;text-transform:uppercase}
@media (max-width:560px){.gate-card{padding:22px}.gate-card h2{font-size:22px}.gate-card .row{grid-template-columns:1fr}#gated-wrap.is-gated{max-height:1050px}}

/* loyalty / approval / h2 sections */
.loyalty-tabs{display:flex;gap:8px;margin:8px 0 18px;border-bottom:1px solid var(--line)}
.loyalty-tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);font-family:var(--mono);font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;padding:10px 4px;cursor:pointer;transition:.15s}
.loyalty-tabs button.on{color:var(--lime);border-bottom-color:var(--lime)}
.loyalty-badge{font-family:var(--mono);font-size:10.5px;padding:2px 8px;border-radius:999px;background:var(--limeDim);color:var(--lime);border:1px solid var(--limeLine)}
.loyalty-teaser{position:relative;margin:6px 0 22px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.loyalty-teaser .teaser-tbl{filter:blur(1.5px);mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,.35) 100%);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,.35) 100%)}
.loyalty-teaser .tcap{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;background:linear-gradient(to bottom,transparent,#0A0A0F 70%);font-family:var(--mono);font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--lime);text-align:center}
.clock-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:12px}
.clock-cell{background:var(--bg);padding:22px 20px}
.clock-cell .cn{font-family:var(--mono);font-size:36px;font-weight:700;color:var(--lime);letter-spacing:-1px;line-height:1}
.clock-cell .cl{font-family:var(--mono);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-top:8px}
.clock-cell .cs{font-size:12.5px;color:var(--dim);margin-top:4px}
.h2gun{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items:center;margin-top:8px}
.h2gun .hero-n{font-family:var(--mono);font-size:clamp(56px,9vw,110px);font-weight:700;color:var(--lime);line-height:.9;letter-spacing:-2px}
.h2gun .hero-l{font-family:var(--mono);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-top:10px;max-width:340px}
.h2gun .supports{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.h2gun .supports .cell{background:var(--bg);padding:20px}
.h2gun .supports .n{font-family:var(--mono);font-size:28px;font-weight:700;color:var(--ink);letter-spacing:-.5px;line-height:1}
.h2gun .supports .l{font-family:var(--mono);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-top:8px}
@media(max-width:720px){.h2gun{grid-template-columns:1fr}.clock-row{grid-template-columns:1fr}}

/* ===================== CITY REPORT ADDITIONS ===================== */

/* Hero. The GTA report opens on a photograph of Toronto. There is no honest
   equivalent for eight other cities in this repo, and a stock skyline of the
   wrong city is worse than no photograph, so the hero art here is the city's
   own eighteen-month permit series drawn as a sparkline. */
.heroplot{position:relative;width:100%;height:clamp(300px,42vw,460px);overflow:hidden;
  border-bottom:1px solid var(--line);background:
  radial-gradient(1100px 460px at 82% -20%, rgba(191,255,26,.13), transparent 62%),
  linear-gradient(180deg,#10101a 0%,#0a0a0f 100%)}
.heroplot svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.heroplot:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,15,0) 30%,rgba(10,10,15,.72) 88%,var(--bg) 100%)}
.heroplot .hero-title{position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  padding:0 clamp(20px,6vw,80px) clamp(26px,4vw,48px)}
.heroplot .hero-title .kicker{font-family:var(--mono);font-size:clamp(11px,1.1vw,14px);
  letter-spacing:4px;color:var(--lime);margin-bottom:14px;text-transform:uppercase}
.heroplot .hero-title h1{font-family:var(--heading);font-weight:400;color:#fff;
  font-size:clamp(34px,5.4vw,78px);line-height:1;letter-spacing:-2px;margin:0}
.heroplot .hero-title h1 .thin{display:block;color:rgba(255,255,255,.72);font-style:italic;
  margin-top:8px;font-size:.62em;line-height:1.1}
.heroplot .plotnote{position:absolute;right:14px;top:12px;z-index:2;font-family:var(--mono);
  font-size:10px;letter-spacing:1px;color:var(--dim);text-transform:uppercase}

/* Density map */
.mapwrap{position:relative;height:560px;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;margin:8px 0 30px;background:#0A0A0F}
.cityMap{position:absolute;inset:0;background:#0A0A0F}
.leaflet-container{background:#0A0A0F;font-family:var(--disp)}
.leaflet-control-attribution{background:rgba(10,10,15,.7)!important;color:#62627a!important;font-size:10px}
.leaflet-control-attribution a{color:#8C8CA6!important}
.leaflet-bar a{background:#13131c;color:#E8E8F0;border-color:var(--line)}
.leaflet-bar a:hover{background:#1c1c28}
.mapui{position:absolute;z-index:600}
.mapui-tl{top:14px;left:14px} .mapui-bl{bottom:14px;left:14px} .mapui-br{bottom:14px;right:14px}
.mtoggle{display:flex;gap:6px;background:rgba(13,13,20,.92);backdrop-filter:blur(10px);
  border:1px solid var(--line2);border-radius:10px;padding:4px}
.mtoggle button{font-family:var(--mono);font-size:11px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);background:transparent;border:0;border-radius:7px;padding:8px 11px;cursor:pointer;transition:.15s}
.mtoggle button.on{background:var(--lime);color:#000;font-weight:700}
.mbadge{font-family:var(--mono);font-size:9.5px;color:var(--dim);background:rgba(10,10,15,.66);
  border:1px solid var(--line);padding:6px 9px;border-radius:8px;max-width:300px;text-align:right;line-height:1.5}
.mbadge b{color:var(--lime);font-weight:500}
.cell-tip .leaflet-popup-content-wrapper,.cell-tip .leaflet-popup-tip{background:#15151f;color:#e9f5cf;
  box-shadow:0 16px 40px rgba(0,0,0,.6);border:1px solid var(--limeLine)}
.cell-tip .leaflet-popup-content{margin:0}
.celltt{padding:10px 12px;min-width:160px}
.celltt .tn{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:1px;color:var(--lime);margin-bottom:6px}
.celltt .tr{display:flex;justify-content:space-between;gap:16px;font-size:12px;margin:3px 0}
.celltt .tr .k{color:#a9a9c0} .celltt .tr .v{font-family:var(--mono);color:#fff;font-weight:600}
@media(max-width:760px){.mapwrap{height:420px}}

/* A section we deliberately cannot render. Saying which field is missing and
   how thin it is beats an empty panel or, worse, a chart of 1.6% of a city. */
.gapnote{border:1px solid var(--line2);background:rgba(232,232,240,.03);border-radius:14px;
  padding:20px 22px;margin:8px 0 0}
.gapnote .tag{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--amber);margin-bottom:8px}
.gapnote p{margin:0;color:#b9b9cc;font-size:14.5px}
.gapnote p + p{margin-top:10px}

/* Cross-market comparison */
.cmp .me{background:rgba(191,255,26,.07)}
.cmp .me td{color:#fff}
.cmp td.name{font-weight:600}
.cmp .flag{font-family:var(--mono);font-size:10px;color:var(--dim);margin-left:6px}

/* Work mix bars */
.mixrow{display:grid;grid-template-columns:130px 1fr 92px;align-items:center;gap:12px;margin:11px 0}
.mixrow .k{font-size:13.5px;color:#c4c4d6}
.mixrow .bar{height:10px;border-radius:5px;background:rgba(255,255,255,.06);overflow:hidden}
.mixrow .bar i{display:block;height:100%;border-radius:5px;background:var(--lime)}
.mixrow.new .bar i{background:var(--lime)}
.mixrow.reno .bar i{background:var(--cyan)}
.mixrow.demo .bar i{background:var(--rose)}
.mixrow.other .bar i{background:var(--slate)}
.mixrow .v{font-family:var(--mono);font-size:12.5px;text-align:right;color:var(--muted)}

/* Methodology */
.method dt{font-weight:600;font-size:14.5px;margin-top:18px}
.method dt:first-child{margin-top:0}
.method dd{margin:6px 0 0;color:#b9b9cc;font-size:14px}
.method code{font-family:var(--mono);font-size:12.5px;color:var(--lime)}