/* SEO city pages reuse the shared story design; this file owns their variants. */
#main.ai-story-page.seo-city-story .seo-city-proof { background: var(--ai-teal); }
#main.ai-story-page.seo-city-story .seo-city-proof-card > .site-proof { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items: start; overflow: hidden; border: 1px solid #cbd8ce; border-radius: 6px; background: #fffefa; color: var(--ai-navy); }
#main.ai-story-page.seo-city-story .seo-city-proof .website-showcase { display: flex; flex-direction: column; height: auto; margin: 0; border-radius: 0; align-self: start; }
#main.ai-story-page.seo-city-story .seo-city-proof .showcase-viewport { flex: 0 0 320px; min-height: 0; height: 320px; max-height: 320px; aspect-ratio: auto; }
#main.ai-story-page.seo-city-story .seo-city-proof .site-proof-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; color: inherit; text-decoration: none; }
#main.ai-story-page.seo-city-story .seo-city-proof .site-proof-copy > :is(p,h3,strong,small) { margin: 0; }
#main.ai-story-page.seo-city-story .seo-city-proof .client-logo-badge { width: 160px; height: 56px; margin: 0 0 3px; padding: 0; background: transparent; }
#main.ai-story-page.seo-city-story .seo-city-proof .site-proof-copy > .eyebrow { color: var(--ai-deep); font-size: 11px; line-height: 1.5; }
#main.ai-story-page.seo-city-story .seo-city-proof .site-proof-copy > strong { font-size: 42px; line-height: 1.05; font-weight: 900; letter-spacing: -.045em; }
#main.ai-story-page.seo-city-story .seo-city-proof .site-proof-copy > p:not(.eyebrow) { font-size: 16px; line-height: 1.55; }
#main.ai-story-page.seo-city-story .seo-city-proof .site-proof-copy > small, #main.ai-story-page.seo-city-story .seo-city-proof-note { font-size: 14px; line-height: 1.6; color: var(--ai-navy); }
#main.ai-story-page.seo-city-story .seo-city-proof-note { max-width: 90ch; margin: 18px 0 0; }

#main.ai-story-page.seo-city-story .seo-city-reach-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px; }
#main.ai-story-page.seo-city-story .seo-city-reach-panel { min-width: 0; border-top: 2px solid var(--ai-deep); padding-top: 22px; }
#main.ai-story-page.seo-city-story .seo-city-reach-panel h3 { margin-bottom: 12px; font-size: 25px; }
#main.ai-story-page.seo-city-story .seo-city-reach-panel > p { color: var(--ai-copy); font-size: 16px; line-height: 1.7; }
#main.ai-story-page.seo-city-story .seo-city-reach-panel ul { margin: 0; padding-left: 19px; font-size: 15px; line-height: 1.65; }
#main.ai-story-page.seo-city-story .seo-city-reach-panel li + li { margin-top: 8px; }
#main.ai-story-page.seo-city-story .seo-city-reach-note { max-width: 92ch; color: var(--ai-copy); font-size: 14px; line-height: 1.6; margin: 24px 0 0; }
#main.ai-story-page.seo-city-story .seo-city-why .ai-neighbour-people span { color: var(--ai-navy); }

#main.ai-story-page.seo-city-story .seo-city-roadmap-hint { color: #d5dfe2; font-size: 14px; line-height: 1.6; margin: -10px 0 22px; }
#main.ai-story-page.seo-city-story .seo-city-roadmap { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: start; gap: 20px; list-style: none; margin: 0; padding: 0; }
#main.ai-story-page.seo-city-story .seo-city-roadmap > li { min-width: 0; }
#main.ai-story-page.seo-city-story .seo-city-roadmap details { min-width: 0; overflow: hidden; border-top: 3px solid var(--ai-teal); background: #f6f3e9; color: var(--ai-navy); border-radius: 3px; }
#main.ai-story-page.seo-city-story .seo-city-roadmap summary { display: block; list-style: none; }
#main.ai-story-page.seo-city-story .seo-city-roadmap summary::-webkit-details-marker { display: none; }
#main.ai-story-page.seo-city-story .seo-city-step-number { display: inline-flex; grid-column: 1; color: var(--ai-deep); font-size: 12px; font-weight: 850; letter-spacing: .04em; line-height: 1.4; }
#main.ai-story-page.seo-city-story .seo-city-roadmap summary h3 { display: grid; grid-template-columns: minmax(0,1fr) 16px; gap: 14px 12px; align-items: start; min-height: 120px; margin: 0; padding: 20px; font-size: 21px; line-height: 1.25; }
#main.ai-story-page.seo-city-story .seo-city-step-title { grid-column: 1; }
#main.ai-story-page.seo-city-story .seo-city-disclosure { grid-column: 2; grid-row: 1; font-size: 23px; font-weight: 600; line-height: 1; }
#main.ai-story-page.seo-city-story .seo-city-roadmap details[open] .seo-city-disclosure { transform: rotate(45deg); }
#main.ai-story-page.seo-city-story .seo-city-roadmap details > div { padding: 0 20px 22px; }
#main.ai-story-page.seo-city-story .seo-city-roadmap details p { color: var(--ai-copy); font-size: 15px; line-height: 1.65; margin: 0; }
#main.ai-story-page.seo-city-story .seo-city-roadmap summary:focus-visible { outline: 3px solid #00746b; outline-offset: -5px; }

#main.ai-story-page.seo-city-story .ai-local-market-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px; align-items: start; }
#main.ai-story-page.seo-city-story .ai-local-map-frame, #main.ai-story-page.seo-city-story .ai-local-market-copy { min-width: 0; }
#main.ai-story-page.seo-city-story .ai-local-map-frame .market-map { overflow: hidden; border: 1px solid var(--ai-line); border-radius: 6px; background: #fffefa; }
#main.ai-story-page.seo-city-story .ai-local-map-frame .map-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; }
#main.ai-story-page.seo-city-story .ai-local-map-frame .map-heading h3 { margin: 0; font-size: 22px; }
#main.ai-story-page.seo-city-story .ai-local-map-frame .map-heading a { flex: 0 0 auto; min-height: 44px; font-size: 14px; }
#main.ai-story-page.seo-city-story .ai-local-map-frame .map-image-link { display: block; }
#main.ai-story-page.seo-city-story .ai-local-map-frame .city-map-image { display: block; width: 100%; height: 150px; aspect-ratio: auto; object-fit: cover; object-position: 50% 62%; }
#main.ai-story-page.seo-city-story[data-seo-city="auckland"] .ai-local-map-frame .city-map-image { object-position: 50% 72%; }
#main.ai-story-page.seo-city-story .ai-local-map-frame .map-attribution { margin: 0; padding: 8px 14px; color: var(--ai-copy); font-size: 12px; line-height: 1.5; }
#main.ai-story-page.seo-city-story .ai-local-market-copy > p { font-size: 16px; line-height: 1.7; color: var(--ai-copy); }
#main.ai-story-page.seo-city-story .ai-local-city-nav + .ai-local-city-nav { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--ai-line); }
#main.ai-story-page.seo-city-story .ai-local-city-nav h3 { margin: 0 0 10px; }
#main.ai-story-page.seo-city-story .ai-local-city-nav > p { margin: 0 0 12px; color: var(--ai-copy); font-size: 15px; line-height: 1.65; }

@media (max-width: 1100px) {
  #main.ai-story-page.seo-city-story .seo-city-roadmap { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  #main.ai-story-page.seo-city-story .seo-city-proof-card > .site-proof, #main.ai-story-page.seo-city-story .seo-city-reach-grid,
  #main.ai-story-page.seo-city-story .ai-local-market-layout { grid-template-columns: minmax(0,1fr); }
  #main.ai-story-page.seo-city-story .seo-city-proof .showcase-viewport { flex-basis: 240px; height: 240px; max-height: 240px; }
  #main.ai-story-page.seo-city-story .seo-city-proof .site-proof-copy { padding: 20px; }
  #main.ai-story-page.seo-city-story .seo-city-reach-grid, #main.ai-story-page.seo-city-story .ai-local-market-layout { gap: 26px; }
}
@media (max-width: 560px) {
  #main.ai-story-page.seo-city-story .seo-city-roadmap { grid-template-columns: minmax(0,1fr); gap: 12px; }
  #main.ai-story-page.seo-city-story .seo-city-roadmap summary h3 { grid-template-columns: 28px minmax(0,1fr) 16px; gap: 12px; min-height: 76px; align-items: center; padding: 17px 18px; font-size: 20px; }
  #main.ai-story-page.seo-city-story .seo-city-step-number { grid-column: 1; }
  #main.ai-story-page.seo-city-story .seo-city-step-title { grid-column: 2; }
  #main.ai-story-page.seo-city-story .seo-city-disclosure { grid-column: 3; }
  #main.ai-story-page.seo-city-story .seo-city-roadmap details > div { padding-inline: 58px 20px; padding-bottom: 18px; }
  #main.ai-story-page.seo-city-story .seo-city-proof .showcase-viewport { flex-basis: 200px; height: 200px; max-height: 200px; }
}
@media (max-width: 360px) {
  #main.ai-story-page.seo-city-story .ai-local-map-frame .map-heading { align-items: flex-start; flex-direction: column; gap: 0; }
}