/* 2026-09-28 City-deep: live per-city content ported into the gen6 city hub shell.
   Gen6 tokens only. Sections reuse .g6-hub-band / .g6-hub-mist / .g6-body-wrap /
   .g6-hub-split / .g6-eyebrow / .g6-text-link; only the new blocks live here. */
.g6-citydeep h2 { font:500 clamp(32px,3.3vw,46px)/1.08 var(--g6-display); letter-spacing:-.025em; margin:0 0 18px; }
.g6-citydeep h3 { margin:0 0 8px; font:600 20px/1.3 var(--g6-ui); letter-spacing:0; color:var(--g6-ink); }
.g6-citydeep p { margin:0 0 14px; font:400 16px/1.65 var(--g6-ui); color:var(--g6-ink); }
.g6-citydeep-lead { color:var(--g6-slate); font:400 17px/1.65 var(--g6-ui); max-width:62ch; margin:0 0 26px; }
.g6-citydeep-note { font:400 12.5px/1.6 var(--g6-ui) !important; color:var(--g6-slate); margin-top:18px; }

/* card grids: 3 cols desktop, 2 cols tablet, 1 col phone */
.g6-citydeep-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.g6-citydeep-grid--two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.g6-citydeep-card { display:flex; flex-direction:column; gap:8px; margin:0; padding:22px 20px; border:1px solid var(--g6-line); border-radius:var(--g6-radius); background:var(--g6-paper); min-width:0; }
.g6-citydeep-kicker { font:600 11px/1.4 var(--g6-ui); letter-spacing:.09em; text-transform:uppercase; color:var(--g6-channel); }
.g6-citydeep-card p { margin:0; color:var(--g6-slate); font:400 15.5px/1.6 var(--g6-ui); }
.g6-citydeep-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:10px; }
.g6-citydeep-tags span { border:1px solid var(--g6-line); border-radius:999px; padding:5px 10px; font:600 11.5px/1 var(--g6-ui); color:var(--g6-slate); }

/* fast facts / definition list used by the living-here split */
.g6-citydeep-facts { list-style:none; margin:0; padding:0; border-top:1px solid var(--g6-line); }
.g6-citydeep-facts li { padding:18px 0; border-bottom:1px solid var(--g6-line); }
.g6-citydeep-facts strong { display:block; margin-bottom:6px; font:600 16px/1.4 var(--g6-ui); color:var(--g6-ink); }
.g6-citydeep-facts p { margin:0; color:var(--g6-slate); font:400 15.5px/1.6 var(--g6-ui); }
.g6-citydeep-facts .g6-citydeep-kicker { display:block; margin-bottom:8px; }

/* FAQ accordions */
.g6-citydeep-faq { border-top:1px solid var(--g6-line); margin-top:8px; }
.g6-citydeep-faq details { border-bottom:1px solid var(--g6-line); }
.g6-citydeep-faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; padding:20px 0; min-height:44px; font:600 17px/1.45 var(--g6-ui); color:var(--g6-ink); }
.g6-citydeep-faq summary::-webkit-details-marker { display:none; }
.g6-citydeep-faq summary::after { content:'+'; font:300 24px/1 var(--g6-ui); color:var(--g6-channel); flex:none; transition:transform var(--g6-motion,180ms); }
.g6-citydeep-faq details[open] summary::after { transform:rotate(45deg); }
.g6-citydeep-faq p { margin:0 0 20px; max-width:70ch; color:var(--g6-slate); font:400 16px/1.65 var(--g6-ui); }

/* link columns (related reads, guides) */
.g6-citydeep-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.g6-citydeep-links a { display:block; border-top:1px solid var(--g6-line); padding:18px 0 6px; text-decoration:none; color:var(--g6-ink); }
.g6-citydeep-links a:hover strong { color:var(--g6-channel); }
.g6-citydeep-links strong { display:block; margin-bottom:6px; font:500 19px/1.25 var(--g6-display); }
.g6-citydeep-links span { display:block; color:var(--g6-slate); font:400 14.5px/1.55 var(--g6-ui); }
.g6-citydeep-linkrow { display:flex; flex-wrap:wrap; gap:6px 26px; margin-top:10px; }
.g6-citydeep-linkrow .g6-text-link { font-size:14px; }

/* popular-search pills */
.g6-citydeep-searches { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.g6-citydeep-searches a { display:inline-flex; align-items:center; min-height:44px; padding:10px 16px; border:1px solid var(--g6-line); border-radius:999px; font:600 14px/1 var(--g6-ui); color:var(--g6-ink); text-decoration:none; }
.g6-citydeep-searches a:hover,.g6-citydeep-searches a:focus-visible { border-color:var(--g6-channel); color:var(--g6-channel); }

/* checklist bullets + closing CTA */
.g6-citydeep-bullets { list-style:none; margin:0 0 20px; padding:0; }
.g6-citydeep-bullets li { position:relative; padding:14px 0 14px 30px; border-bottom:1px solid var(--g6-line); font:600 15.5px/1.55 var(--g6-ui); color:var(--g6-ink); }
.g6-citydeep-bullets li::before { content:'✓'; position:absolute; left:2px; top:14px; color:var(--g6-channel); font-weight:700; }
.g6-citydeep-cta { display:grid; gap:14px; justify-items:start; margin-top:20px; }
.g6-citydeep-cta .g6-citydeep-note { margin:0; }

/* local take / quote block */
.g6-citydeep-quote { margin:0; padding:0 0 0 22px; border-left:2px solid var(--g6-channel); }
.g6-citydeep-quote p { font:400 17px/1.7 var(--g6-ui); color:var(--g6-ink); }
.g6-citydeep-quote cite { display:block; margin-top:12px; font:600 14px/1.5 var(--g6-ui); font-style:normal; color:var(--g6-slate); }

@media (max-width:900px) {
 .g6-citydeep-grid,.g6-citydeep-grid--two,.g6-citydeep-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px) {
 .g6-citydeep h2 { font-size:30px; }
 .g6-citydeep-grid,.g6-citydeep-grid--two,.g6-citydeep-links { grid-template-columns:1fr; }
 .g6-citydeep-card { padding:18px 16px; }
 .g6-citydeep-faq summary { font-size:16px; padding:18px 0; }
}
@media print {
 .g6-citydeep-grid,.g6-citydeep-grid--two,.g6-citydeep-links { grid-template-columns:1fr 1fr; }
 .g6-citydeep-faq details { break-inside:avoid; }
 .g6-citydeep-faq details[open] summary::after,.g6-citydeep-faq summary::after { content:''; }
}

/* hero fact strip: the live page's own defining fact(s) for the city */
.g6-citydeep-herofacts { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:6px 0 24px; padding:0; }
.g6-citydeep-herofacts li { border-top:1px solid var(--g6-line); padding-top:14px; min-width:0; }
.g6-citydeep-herofacts strong { display:block; font:500 22px/1.25 var(--g6-display); color:var(--g6-ink); margin-bottom:6px; }
.g6-citydeep-heronote { display:block; color:var(--g6-slate); font:400 15px/1.55 var(--g6-ui); }
@media (max-width:900px) { .g6-citydeep-herofacts { grid-template-columns:1fr 1fr; gap:18px; } }
@media (max-width:600px) { .g6-citydeep-herofacts { grid-template-columns:1fr; gap:14px; } }

/* v3nb (2026-09-29): /cape-coral/ neighborhood grid + all-guides disclosure.
   Designed stat tiles carrying live subdivision/ZIP counts; the full guide
   list lives in the compact disclosure below the grid. */
.g6-hood-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:22px 0 8px; }
.g6-hood-tile { position:relative; display:flex; flex-direction:column; gap:4px; padding:18px 18px 20px; border:1px solid var(--g6-line); border-radius:var(--g6-radius,16px); background:var(--g6-paper,#fff); text-decoration:none; color:var(--g6-ink); min-width:0; transition:border-color .18s, transform .18s, box-shadow .18s; }
.g6-hood-tile:hover { border-color:var(--g6-channel,#2b80bb); transform:translateY(-2px); box-shadow:0 10px 26px rgba(22,40,62,.08); }
.g6-hood-tile__top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.g6-hood-tile__top strong { font:600 19px/1.2 var(--g6-display,'Cormorant Garamond',Georgia,serif); letter-spacing:0; }
.g6-hood-tile__dot { width:8px; height:8px; flex:none; border-radius:50%; background:#0FA3B1; box-shadow:0 0 0 3px rgba(15,163,177,.22); }
.g6-hood-tile__count { font:700 14px/1.3 var(--g6-ui,'Manrope',sans-serif); color:var(--g6-ink); font-variant-numeric:tabular-nums; }
.g6-hood-tile__count--plain { color:var(--g6-slate,#53677A); font-weight:600; }
.g6-hood-tile__sub { font:400 12.5px/1.45 var(--g6-ui,'Manrope',sans-serif); color:var(--g6-slate,#53677A); }
.g6-hood-tile__go { position:absolute; right:14px; bottom:12px; color:var(--g6-channel,#2b80bb); font-size:14px; }
@media (max-width:1100px) { .g6-hood-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:820px) { .g6-hood-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:420px) { .g6-hood-grid { grid-template-columns:1fr 1fr; gap:10px; } .g6-hood-tile { padding:14px 13px 26px; } .g6-hood-tile__top strong { font-size:17px; } }
.g6-hood-all { margin-top:20px; border:1px solid var(--g6-line); border-radius:var(--g6-radius,16px); background:transparent; }
.g6-hood-all summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:14px 18px; font:600 15px/1.3 var(--g6-ui,'Manrope',sans-serif); color:var(--g6-ink); }
.g6-hood-all summary::-webkit-details-marker { display:none; }
.g6-hood-all summary::after { content:'+'; font:300 22px/1 var(--g6-ui,'Manrope',sans-serif); color:var(--g6-channel,#2b80bb); }
.g6-hood-all[open] summary::after { content:'−'; }
.g6-hood-all summary:focus-visible { outline:2px solid var(--g6-channel,#2b80bb); outline-offset:-2px; }
.g6-hood-all[open] summary { border-bottom:1px solid var(--g6-line); }
.g6-hood-all .g6-deep-links { padding:8px 18px 18px; }

/* v7cc: /cape-coral/ hero address field (GET -> /waterway-map/?address=, the same lookup the flood-zones hero uses). */
.g6-hero-address { margin:0 0 18px; max-width:560px; }
.g6-hero-address label { display:block; margin:0 0 8px; font:700 12px/1.4 var(--g6-ui,'Manrope',sans-serif); letter-spacing:.12em; text-transform:uppercase; color:var(--g6-slate,#53677A); }
.g6-hero-address__row { display:flex; gap:10px; }
.g6-hero-address input { flex:1 1 auto; min-width:0; min-height:52px; box-sizing:border-box; padding:12px 16px; border:1px solid var(--g6-line,#cfd9e3); border-radius:14px; background:#fff; color:#095e93; font:500 16px/1.3 var(--g6-ui,'Manrope',sans-serif); }
.g6-hero-address input:focus { outline:3px solid #5bb8e8; outline-offset:2px; }
.g6-hero-address .g6-city-button { flex:none; min-height:52px; white-space:nowrap; }
@media (max-width:600px){ .g6-hero-address__row{flex-direction:column} .g6-hero-address .g6-city-button{width:100%;justify-content:center} }

/* ---------------------------------------------------------------------------
   2026-10-12 city spine (director SPEC_CITY_COUNTY.md).
   1) One kicker and one italic display line per city hub page. The single keeper opts in
      with .g6-kicker-one / .g6-em-one; every other kicker and every other heading emphasis
      renders plain. Heading wording is never changed, only emphasis.
   2) "What makes buying here different" beside the cityplate atlas frame.
   3) The place film at large, 16:9.
   4) "Places nearby, from OpenStreetMap": the hero place rail moved into a disclosure, with
      the county explorer's own row styles restated for its new home.
   House tokens only. */
.g6-hub-page .g6-eyebrow,
.g6-hub-page .g6-citydeep-kicker { display: none; }
/* The hub body stylesheet (css/gen6-hub-shared.css, linked later in the body) sets
   .g6s-head/.g6s-journey/.g6s-problem/.g6s-film h2 em italic. The hub class is repeated so
   this cap wins on specificity instead of stacking !important (the hub class is repeated three
   times for weight), and the single keeper is re enabled just after it. Only the emphasis changes; colour and wording stay. */
.g6-hub-page.g6-hub-page.g6-hub-page :is(h2,h3) em { font-style: normal; }
.g6-hub-page.g6-hub-page.g6-hub-page .g6-em-one :is(h2,h3) em { font-style: italic; }
.g6-hub-page .g6-kicker-one { display: inline-block; }

/* Chapter: What makes buying here different */
.g6-hub-diff { background: var(--g6-paper); }
.g6-diff-facts { border-top: 1px solid var(--g6-line); }
.g6-diff-facts li { padding: 16px 0; }
.g6-diff-facts strong { display: block; margin-bottom: 6px; font: 600 18px/1.35 var(--g6-ui); color: var(--g6-ink); }
.g6-diff-facts p { margin: 0; color: var(--g6-slate); font: 400 15.5px/1.6 var(--g6-ui); }
.g6-diff-source { display: block; margin-top: 8px; font: 500 12px/1.5 var(--g6-ui); color: var(--g6-steel); }
.g6-diff-plate { margin: 0; border: 1px solid var(--g6-line); border-radius: var(--g6-radius,16px); overflow: hidden; background: var(--g6-paper); }
.g6-diff-plate__link { position: relative; display: block; text-decoration: none; }
.g6-diff-plate img { display: block; width: 100%; height: auto; }
.g6-diff-plate__cta { position: absolute; left: 14px; bottom: 14px; padding: 10px 16px; border-radius: 999px; background: rgba(9,94,147,.9); color: #FAFBFC; font: 700 13px/1 var(--g6-ui); }
.g6-diff-plate__link:hover .g6-diff-plate__cta { background: var(--g6-channel); }
.g6-diff-plate figcaption { padding: 12px 16px; border-top: 1px solid var(--g6-line); font: 500 12.5px/1.5 var(--g6-ui); color: var(--g6-steel); }

/* Chapter: the place's film at large, 16:9 */
.g6-hub-film-chapter .g6-body-wrap { max-width: 1080px; }
.g6-film-large { margin: 0; }
.g6-film-large__play { position: relative; display: block; border-radius: var(--g6-radius,16px); overflow: hidden; line-height: 0; background: var(--g6-ink); }
.g6-film-large__play img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.g6-film-large__btn { position: absolute; inset: 0; display: grid; place-items: center; }
.g6-film-large__btn::before { content: '▷'; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: rgba(250,251,252,.92); color: var(--g6-ink); font-size: 30px; }
.g6-film-large__play:hover .g6-film-large__btn::before { background: #FAFBFC; color: var(--g6-channel); }
.g6-film-large figcaption { margin-top: 12px; font: 600 15px/1.5 var(--g6-ui); color: var(--g6-ink); }
.g6-film-large figcaption span { font-weight: 500; color: var(--g6-steel); }

/* Chapter: Places nearby, from OpenStreetMap (the hero rail, relocated) */
.g6-nearby-points { border-top: 1px solid var(--g6-line); }
.g6-nearby-points > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; list-style: none; cursor: pointer; }
.g6-nearby-points > summary::-webkit-details-marker { display: none; }
.g6-nearby-points > summary::after { content: '+'; font: 300 26px/1 var(--g6-ui); color: var(--g6-channel); }
.g6-nearby-points[open] > summary::after { content: '−'; }
.g6-nearby-points > summary h2 { margin: 0; }
.g6-nearby-points > summary:focus-visible { outline: 2px solid var(--g6-channel); outline-offset: -2px; }
.g6-county-rail-panel { padding: 4px 0 8px; --beach:#2E6FA3; --marina:#16283E; --hospital:#53677A; --school:#324B67; --park:#087681; --shopping:#466A78; }
.g6-county-rail-panel .g6-county-controls { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px 8px; margin: 0 0 18px; }
.g6-county-rail-panel .g6-county-controls button { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; min-height: 58px; padding: 0; border: 0; background: none; color: var(--g6-ink); font: 600 11px/1.25 var(--g6-ui); cursor: pointer; }
.g6-county-rail-panel .g6-county-controls button:disabled { color: var(--g6-slate); cursor: default; }
.g6-county-rail-panel .g6-county-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid rgba(22,40,62,.18); border-radius: 50%; background: var(--g6-paper); color: var(--g6-slate); font: 700 16px/1 var(--g6-ui); }
.g6-county-rail-panel .g6-county-controls [aria-pressed="true"] .g6-county-icon { background: var(--poi-color); color: var(--poi-ink); box-shadow: 0 0 0 2px var(--g6-paper), 0 0 0 3px var(--g6-channel); }
.g6-county-rail-panel .g6-county-list-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--g6-line); }
.g6-county-rail-panel .g6-county-list-head h3 { margin: 0; font: 500 22px/1.15 var(--g6-display); letter-spacing: -.015em; }
.g6-county-rail-panel .g6-county-list-head button { min-height: 44px; padding: 4px 6px; border: 0; background: none; color: var(--g6-channel); font: 600 12px var(--g6-ui); cursor: pointer; }
.g6-county-rail-panel .g6-county-rail-list { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.g6-county-rail-panel .g6-poi-group { padding: 12px 0 4px; }
.g6-county-rail-panel .g6-poi-group h3 { margin: 0 0 3px; font: 700 14px/1.3 var(--g6-ui); }
.g6-county-rail-panel .g6-poi-group-source { margin: 0 0 8px; font: 400 11px/1.4 var(--g6-ui); color: var(--g6-steel); }
.g6-county-rail-panel .g6-poi-row { display: grid; grid-template-columns: 28px minmax(0,1fr) 14px; gap: 10px; align-items: center; width: 100%; min-height: 68px; padding: 10px 6px; border: 0; border-bottom: 1px solid var(--g6-line); background: none; text-align: left; color: var(--g6-ink); font-family: var(--g6-ui); cursor: pointer; }
.g6-county-rail-panel .g6-poi-row:hover, .g6-county-rail-panel .g6-poi-row.is-selected { background: var(--g6-mist); box-shadow: inset 3px 0 var(--g6-channel); }
.g6-county-rail-panel .g6-poi-row strong { display: block; font-size: 13px; line-height: 1.4; font-weight: 650; }
.g6-county-rail-panel .g6-poi-row small { display: block; padding-top: 3px; color: var(--g6-slate); font-size: 10px; line-height: 1.4; }
.g6-county-rail-panel .g6-poi-row-icon { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid rgba(22,40,62,.2); border-radius: 50%; background: var(--poi-color); color: var(--poi-ink); font-size: 12px; font-weight: 700; }
.g6-county-rail-panel .g6-poi-row-arrow { font-size: 14px; color: var(--g6-channel); }
.g6-county-rail-panel .g6-county-source-note { margin: 8px 0 0; padding: 10px 0 0; border-top: 1px solid var(--g6-line); font: 400 11px/1.5 var(--g6-ui); color: var(--g6-steel); }
.g6-county-rail-panel .g6-rail-empty { padding: 20px 4px; font: 400 14px/1.5 var(--g6-ui); }
@media (max-width:600px) { .g6-county-rail-panel .g6-county-controls { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (min-width:800px) { .g6-hub-diff .g6-hub-split { align-items: start; } }
@media print { .g6-nearby-points > summary::after { content: ''; } }

/* 2026-10-12 spine chapter 1: the opening keeps one place lede and the two opening actions.
   The lede stays visible on phones even though the generic rail line is hidden there. */
.g6-county-explorer .g6-county-rail-heading > p.g6-hub-hero-lede { display: block; margin: 0 0 20px; max-width: 34ch; font: 400 16px/1.6 var(--g6-ui); color: var(--g6-ink); }
.g6-hub-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.g6-hub-hero-cta .g6-action { min-height: 48px; }
.g6-hub-hero-ghost { display: inline-flex; align-items: center; min-height: 44px; color: var(--g6-ink); font: 600 14px/1.3 var(--g6-ui); text-decoration: none; border-bottom: 1.5px solid var(--g6-line); }
.g6-hub-hero-ghost:hover { border-bottom-color: var(--g6-channel); color: var(--g6-channel); }
@media (max-width:600px) { .g6-hub-hero-lede { font-size: 14px; margin-bottom: 12px; } .g6-hub-hero-cta .g6-action { min-height: 44px; } }

/* 2026-10-12 spine reuse: the same chapter renders on the county pages, where gen6-hubs.css is
   not loaded and no cityplate poster exists. These carry the layout, and match the city hub
   values so the city chapter keeps the look the director accepted. */
.g6-diff-chapter { padding: 64px 0; }
.g6-diff-split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 36px; align-items: start; }
.g6-diff-split > div { min-width: 0; }
.g6-body-wrap.g6-diff-split.g6-diff-split--single { grid-template-columns: minmax(0,1fr); }
/* Without a cityplate poster the facts run the full band, so hold them to a readable measure. */
.g6-diff-split--single > .g6-citydeep-col { max-width: 760px; }
@media (max-width:600px) { .g6-diff-chapter { padding: 40px 0; } .g6-diff-split { grid-template-columns: 1fr; gap: 28px; } }