/* ============================================================
   OGC homepage — hero map, subscribe band, listing rail
   Loaded after styles.css; uses its tokens.
   ============================================================ */

/* ---------- dark palette ----------
   Sections used to be black on black with an orange wash reading as brown. This is a
   deliberate gray ladder instead: each band is a step, and orange is reserved for data. */
:root{
  --g900:#141618;   /* deepest — coverage band, footer */
  --g800:#1B1E21;   /* header */
  --g700:#23272A;   /* hero ground */
  --g600:#2B2F33;   /* cards on dark */
  --g500:#383D41;   /* card borders */
  --g300:#8B9196;   /* muted type on dark */
}

/* ---------- hero ---------- */
.home-hero{position:relative;color:#fff;overflow:hidden;
  background:linear-gradient(165deg,#4A5158 0%,#3B4147 52%,#2F3439 100%)}
.home-hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(290px,392px) 1fr;
  gap:40px;align-items:center;padding-top:52px;padding-bottom:40px}
.home-hero h1{color:#fff;font-size:clamp(34px,4.4vw,54px)}
.home-hero h1 .o{color:var(--orange)}
.home-hero .lead{color:#cdd0d3;font-size:18px;margin-top:16px;max-width:44ch}
.home-hero .actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px;
  border-top:1px solid #35383a;padding-top:22px}
.hero-stats .n{font-size:27px;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1}
.hero-stats .l{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:#8e9194;margin-top:6px;line-height:1.3}

/* ---------- map ---------- */
.map-wrap{position:relative}
.map-wrap svg{width:100%;height:auto;display:block;overflow:visible}
.map-wrap .st{fill:#2a2c2e;stroke:#3d4042;stroke-width:.7;stroke-linejoin:round}
.dot{cursor:pointer}
.dot-m{fill:#f3f4f5;fill-opacity:.72}
.dot-f{fill:var(--orange);stroke:#fff;stroke-width:1.1}
.dot:hover{fill-opacity:1}
.dot-f:hover{stroke-width:2}
.map-pulse{fill:none;stroke:var(--orange);stroke-width:1.4;opacity:0}
.map-legend{display:flex!important;flex-direction:row!important;gap:26px;justify-content:center;
  margin-top:12px;font-size:12.5px;color:#9a9da0;flex-wrap:wrap;border:0!important;padding:0}
.map-legend span{white-space:nowrap;display:inline-flex;align-items:center}
.map-legend b{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:middle}
.map-legend .m b{background:#f3f4f5;opacity:.75}
.map-legend .f b{background:var(--orange)}

/* tooltip */
#map-tip{position:absolute;z-index:20;pointer-events:none;opacity:0;transition:opacity .12s;
  background:#fff;color:var(--ink);border-radius:12px;box-shadow:var(--shadow-lg);
  padding:12px 14px;min-width:180px;max-width:250px;font-size:13px;line-height:1.45}
#map-tip.on{opacity:1}
#map-tip img{width:100%;height:104px;object-fit:cover;border-radius:8px;margin:-2px 0 9px}
#map-tip .t{font-weight:800;color:var(--black);font-size:14px;letter-spacing:-.01em}
#map-tip .loc{color:var(--gray);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
#map-tip .row{display:flex;justify-content:space-between;gap:14px;padding:3px 0}
#map-tip .row span:first-child{color:var(--gray)}
#map-tip .row span:last-child{font-weight:700;color:var(--black);text-align:right}
#map-tip .badge{display:inline-block;background:var(--orange);color:#fff;font-size:10px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:5px;margin-bottom:7px}

/* ---------- subscribe band ---------- */
.sub-band{background:var(--orange);color:#fff}
.sub-band .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;
  padding-top:44px;padding-bottom:44px}
.sub-band h2{color:#fff;font-size:clamp(24px,3vw,34px)}
.sub-band p{color:rgba(255,255,255,.92);font-size:16px;margin-top:12px;max-width:52ch}
.sub-band .fine{font-size:13px;color:rgba(255,255,255,.72);margin-top:14px}
.sub-embed{background:#fff;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-lg)}
.sub-embed iframe{width:100%!important;border:0;background:#fff}
.sub-embed .cover{display:flex;gap:13px;align-items:center;margin-bottom:14px}
.sub-embed .cover .ic{width:42px;height:42px;border-radius:9px;background:var(--black);color:var(--orange);
  display:grid;place-items:center;font-size:19px;flex:none}
.sub-embed .cover b{display:block;color:var(--black);font-size:14px;line-height:1.3}
.sub-embed .cover span{font-size:12px;color:var(--gray)}

/* ---------- listing rail ---------- */
.rail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 18px;scrollbar-width:thin}
.rail::-webkit-scrollbar{height:7px}
.rail::-webkit-scrollbar-thumb{background:var(--silver);border-radius:4px}
.rail-card{flex:0 0 292px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.16s}
.rail-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.rail-card .ph{height:186px;background:var(--light) center/cover no-repeat;position:relative}
.rail-card .ph .tag{position:absolute;left:11px;top:11px;background:var(--orange);color:#fff;
  font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:4px 8px;border-radius:5px}
.rail-card .b{padding:15px 16px 17px}
.rail-card .price{font-weight:800;color:var(--black);font-size:17px;letter-spacing:-.01em}
.rail-card .nm{font-weight:700;margin-top:3px;font-size:15px;line-height:1.3;color:var(--black)}
.rail-card .lo{color:var(--gray);font-size:13px;margin-top:3px}
.rail-nav{display:flex;gap:8px}
.rail-nav button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;
  cursor:pointer;font-size:16px;color:var(--charcoal);transition:.15s}
.rail-nav button:hover{border-color:var(--black);color:var(--black)}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .home-hero .wrap{grid-template-columns:1fr;gap:26px;padding-top:40px}
  .sub-band .wrap{grid-template-columns:1fr;gap:26px}
  .hero-stats{gap:12px}
  .hero-stats .n{font-size:23px}
}
@media(max-width:560px){
  #map-tip{max-width:196px}
  .rail-card{flex-basis:242px}
}

/* ============================================================
   v2 — hero leads with the price-per-SF finding, map demoted
   ============================================================ */
.home-hero .wrap.v2{grid-template-columns:minmax(300px,1fr) minmax(340px,1fr);align-items:center}
.home-hero .kicker{font-size:19px;color:#cdd0d3;margin-top:18px;max-width:46ch;line-height:1.55}
.home-hero .kicker b{color:#fff;font-weight:700}

/* price/SF bar chart */
.psf{position:relative;background:var(--g600);border:1px solid var(--g500);
  border-radius:var(--radius);padding:22px 22px 16px}
.psf h3{color:#fff;font-size:15px;font-weight:700;letter-spacing:-.01em}
.psf .sub{color:var(--g300);font-size:12px;margin-top:3px;margin-bottom:16px}
.psf .row{display:grid;grid-template-columns:30px 1fr 52px;align-items:center;gap:10px;margin-bottom:5px}
.psf .ab{font-size:12px;font-weight:800;color:#9a9da0;letter-spacing:.04em}
.psf .track{display:block;height:15px;background:#41464a;border-radius:4px;overflow:hidden}
.psf .bar{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#C8551A,#F2701A);
  transition:width .85s cubic-bezier(.22,1,.36,1)}
.psf .row.hi .bar{background:linear-gradient(90deg,#F2701A,#ff9a4d)}
.psf .val{font-size:12.5px;font-weight:800;color:#fff;text-align:right;font-variant-numeric:tabular-nums}
.psf .foot{color:#8B9196;font-size:11px;margin-top:13px;padding-top:11px;
  border-top:1px solid var(--g500);line-height:1.55}

/* stat strip */
.stat-strip{background:var(--black);border-top:1px solid #2f3234}
.stat-strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:26px;padding-bottom:26px}
.stat-strip .n{font-size:30px;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1}
.stat-strip .l{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8e9194;margin-top:7px}

/* inline subscribe inside the hero */
.hero-sub{margin-top:26px;background:var(--g600);border:1px solid var(--g500);
  border-radius:var(--radius);padding:16px 18px}
.hero-sub b{color:#fff;font-size:14px;display:block}
.hero-sub span{color:var(--g300);font-size:12.5px;display:block;margin-top:2px;margin-bottom:10px}
.sub-pts{list-style:none;margin:10px 0 14px;padding:0;display:grid;gap:6px}
.sub-pts li{position:relative;padding-left:20px;font-size:13.5px;line-height:1.4;color:#dfe1e3}
.sub-pts li::before{content:"\2713";position:absolute;left:0;top:-1px;color:var(--orange);font-weight:800}
.hero-sub iframe{display:block;width:100%;max-width:480px;height:320px;background:#fff;border-radius:8px}

/* coverage map section (light) */
.coverage{background:var(--light)}
.coverage .map-wrap svg .st{fill:#dcdee0;stroke:#c8cacd}
.coverage .dot-c{fill:var(--orange);fill-opacity:.62;cursor:pointer}
.coverage .dot-c:hover{fill-opacity:1}
.coverage .map-legend{color:var(--gray)}

@media(max-width:980px){
  .home-hero .wrap.v2{grid-template-columns:1fr}
  .stat-strip .wrap{grid-template-columns:repeat(2,1fr);gap:22px}
}

/* ---------- rotating state maps (replaces the stat strip) ---------- */
.states{background:var(--g900);color:#fff}
.states .wrap{padding-top:34px;padding-bottom:34px;display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(330px,440px);gap:44px;align-items:center}
.states h2{color:#fff;font-size:clamp(23px,2.6vw,31px)}
.states .lede{color:#aeb3b7;font-size:15.5px;margin-top:11px;max-width:46ch}
.state-figs{display:grid;grid-template-columns:repeat(2,auto);gap:34px;margin-top:24px;
  justify-content:start;border-top:1px solid #2B2F33;padding-top:20px}
.state-figs .n{font-size:25px;font-weight:800;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.state-figs .l{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--g300);margin-top:6px}
.state-stage{position:relative;background:var(--g700);border:1px solid #33383c;
  border-radius:var(--radius);padding:16px}
.state-stage svg{width:100%;height:auto;display:block}
.state-stage .st{fill:#343A3E;stroke:#4E5559;stroke-width:.8;stroke-linejoin:round}
.state-stage circle{fill:var(--orange);fill-opacity:.62;mix-blend-mode:screen}
.state-stage .cap{margin-top:12px;padding-top:12px;border-top:1px solid #3A4044}
.state-stage .cap b{color:#fff;font-size:17px;font-weight:800;letter-spacing:-.01em}
.state-stage .cap span{color:var(--g300);font-size:12px;font-weight:600}
.state-fade{animation:sfade .5s ease}
@keyframes sfade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:980px){
  .states .wrap{grid-template-columns:1fr;gap:26px}
  .state-figs{gap:18px}
}

/* one derived sentence per state, under the caption */
.state-stage .snote{background:none;border:0;padding:0;color:#b9bec2;
  font-size:13px;line-height:1.55;margin-top:7px;min-height:60px}

/* OGC mark on anything screenshot-worthy, so a snipped image still carries the source */
.wm{position:absolute;top:14px;right:16px;width:104px;opacity:.5;pointer-events:none;
  filter:saturate(.9)}
.state-stage .wm{top:12px;right:14px;width:92px}
@media(max-width:560px){.wm{width:78px;opacity:.42}}

/* ---------- v3: maps lead the hero, price chart moves to its own snapshot band ---------- */
.home-hero .wrap.v2{grid-template-columns:minmax(300px,1fr) minmax(360px,540px);
  align-items:start;row-gap:28px}
.hero-top{grid-column:1 / -1}
.hero-top h1{margin-top:10px;max-width:22ch}
.home-hero .wrap.v2 .kicker{margin-top:0}
.hero-stage{padding:18px;background:var(--g600);border-color:#3E4448}
/* In the hero the card sits on the same grey as the section, so it vanished. Invert the
   map instead: a dark state shape cut out of a lighter card, orange dots on top. */
.hero-stage .st{fill:#1C2023;stroke:#454B50;stroke-width:.9}
.hero-stage circle{fill-opacity:.72}
.hero-stage .cap{border-top-color:#3E4448}
.hero-stage .cap b{font-size:19px}
.hero-stage .snote{font-size:13.5px;min-height:76px}
.hero-stage .wm{width:100px;top:14px;right:16px}

.snapshot{background:var(--g900);color:#fff}
.snapshot .wrap{display:grid;grid-template-columns:minmax(280px,1fr) minmax(340px,1fr);
  gap:48px;align-items:center;padding-top:64px;padding-bottom:64px}
.snapshot h2{color:#fff;font-size:clamp(25px,3vw,36px);margin-top:8px}
.snapshot h2 .o{color:var(--orange)}
.snapshot .lede{color:#aeb3b7;font-size:16px;margin-top:14px;max-width:44ch}

@media(max-width:980px){
  .snapshot .wrap{grid-template-columns:1fr;gap:28px;padding-top:44px;padding-bottom:44px}
  .hero-stage .snote{min-height:0}
}

/* link from the homepage signup to the page that actually sells the weekly report */
.hero-sub-more{display:inline-block;margin-top:2px;font-size:13.5px;font-weight:800;
  color:var(--orange);text-decoration:none}
.hero-sub-more:hover{text-decoration:underline}

/* The v2 grid is re-declared below the earlier 860px block, so it has to be
   collapsed again here or the map column keeps its track on a phone. */
@media(max-width:860px){
  .home-hero .wrap.v2{grid-template-columns:1fr;row-gap:24px}
  .hero-top h1{max-width:none}
}


/* ============================================================
   Hero v3 — the left column sells what a visitor gets; the map
   and the database count are supporting evidence on the right.
   ============================================================ */
.home-hero .wrap.v3{display:grid;grid-template-columns:minmax(320px,1fr) minmax(300px,380px);
  gap:48px;align-items:start;padding-top:52px;padding-bottom:44px}
.home-hero .wrap.v3 h1{font-size:clamp(32px,3.8vw,46px);margin-top:10px;max-width:21ch}
.home-hero .wrap.v3 .kicker{font-size:17px;margin-top:16px;max-width:46ch}

.hero-val{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:14px}
/* Card 1 carries a washed-out photo across the whole box; 2 and 3 are plain.
   position:relative so the image can sit behind the content. */
.hero-val li{position:relative;background:rgba(26,29,32,.55);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius);display:grid;grid-template-columns:auto 1fr;
  align-items:stretch;min-height:124px;overflow:hidden;
  transition:border-color .15s,background .15s}
.hero-val .hv-n{display:block;align-self:center;margin:0;padding:0 2px 0 26px;
  font-size:52px;font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--orange);
  font-variant-numeric:tabular-nums}
.hero-val li:hover{border-color:rgba(255,255,255,.3);background:rgba(26,29,32,.45)}
.hv-copy{padding:18px 22px;align-self:center}
/* Full-bleed and faded, so the copy stays the thing you read. */
.hv-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  object-position:50% 62%;opacity:.62;filter:saturate(.85);z-index:0;pointer-events:none}
/* the charts are transparent PNGs, so only the bars and labels ghost in */
.hv-chart{object-position:50% 50%;opacity:.5;filter:none}
.hero-val li:has(.hv-chart)::after{
  background:linear-gradient(90deg,rgba(22,25,28,.74) 0%,rgba(22,25,28,.44) 46%,rgba(22,25,28,.12) 100%)}
.hero-val li:has(.hv-img){background:rgba(26,29,32,.42)}
/* scrim: heavier on the left where the number and copy sit */
.hero-val li:has(.hv-img)::after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,rgba(22,25,28,.82) 0%,rgba(22,25,28,.62) 42%,rgba(22,25,28,.34) 100%);
  pointer-events:none}
.hero-val .hv-n,.hv-copy{position:relative;z-index:1}
.hero-val b{display:block;color:#fff;font-size:16px;letter-spacing:-.01em}
.hero-val span{display:block;color:#CBD0D4;font-size:14px;line-height:1.5;margin-top:4px}
.hero-val a{display:inline-block;margin-top:9px;color:var(--orange);font-size:13.5px;
  font-weight:800}
.hero-val a:hover{text-decoration:underline}

.hero-right{display:grid;gap:16px}
.home-hero .wrap.v3 .hero-stage{padding:14px}
.home-hero .wrap.v3 .hero-stage .cap b{font-size:16px}
.home-hero .wrap.v3 .hero-stage .snote{font-size:12.5px;min-height:56px;line-height:1.5}
.home-hero .wrap.v3 .hero-stage .wm{width:78px;top:11px;right:13px}
.home-hero .wrap.v3 .hero-sub{margin-top:0}
.home-hero .wrap.v3 .hero-sub iframe{height:150px}
.home-hero .wrap.v3 .sub-pts{margin:8px 0 12px;gap:4px}
.home-hero .wrap.v3 .sub-pts li{font-size:13px}

@media(max-width:900px){
  .home-hero .wrap.v3{grid-template-columns:1fr;gap:28px}
  .home-hero .wrap.v3 h1{max-width:none}
}
@media(max-width:560px){
  .hero-val li{min-height:104px}
  .hero-val .hv-n{font-size:40px;padding-left:18px}
  .hv-copy{padding:16px 18px}
}