/* Geography pilot: one ad, two places, one bounded allocation. */
.geo-nav button:focus-visible, .geo-method summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.geo-lab { background: linear-gradient(180deg, var(--canvas), #f0f1f7 72%, var(--canvas)); scroll-margin-top: 72px; }
.geo-intro { display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.geo-intro h1, .geo-intro h2 { max-width: 17ch; }
.geo-intro .lede { max-width: 62ch; }
.geo-intro__links { display: grid; justify-items: end; gap: 9px; flex: none; }
.geo-concept-link { color: var(--accent-ink); font-size: 13px; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.geo-concept-link span { margin-left: 4px; }
.geo-concept-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.geo-story { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 44px; }
.geo-scene, .geo-beats { grid-area: 1 / 1; }
.geo-scene {
  position: sticky; top: 72px; z-index: 2; display: grid; grid-template-rows: 52px minmax(0, 1fr) 36px;
  height: calc(100svh - 72px); min-height: 630px; max-height: 850px; background: var(--canvas);
}
.geo-scene__head { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 20px; padding: 0 5px 8px; border-bottom: 1px solid var(--line); }
.geo-scene__identity { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.geo-scene__identity svg { width: 27px; height: 27px; padding: 4px; border-radius: var(--r-xs); background: var(--accent-soft); color: var(--accent-ink); }
.geo-nav { display: flex; align-items: center; gap: 5px; }
.geo-nav button { border: 0; border-radius: var(--r-pill); padding: 7px 9px; background: transparent; color: var(--ink-2); font: 700 12px var(--font); cursor: pointer; transition: background .2s, color .2s; }
.geo-nav button:hover, .geo-nav button[aria-current] { background: var(--accent-soft); color: var(--accent-ink); }
.geo-counter, .geo-scene__foot { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.geo-counter { font-weight: 700; }
.geo-scene__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 5px; border-top: 1px solid var(--line); }
.geo-scene__foot span:first-child { color: var(--accent-ink); font-weight: 800; }
.geo-stage { position: relative; min-height: 0; isolation: isolate; }

/* The question: a complete ad, suspended between two map silhouettes. */
.geo-question, .geo-run, .geo-result {
  position: absolute; inset: 0; visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .34s var(--ease), transform .52s var(--ease), visibility 0s .52s;
}
.geo-question { display: grid; grid-template-columns: minmax(0, 1fr) 290px minmax(0, 1fr); align-items: start; gap: 14px; padding-top: 117px; transform: scale(.97); }
.geo-story[data-phase="0"] .geo-question { visibility: visible; opacity: 1; pointer-events: auto; transform: none; transition-delay: 0s; }
.geo-place { display: grid; justify-items: center; align-content: center; min-width: 0; margin: 112px 0 0; }
.geo-place img { display: block; width: min(100%, 245px); height: auto; border: 1px solid #d2dfe8; border-radius: 12px; box-shadow: 0 8px 20px rgba(30, 32, 56, .08); }
.geo-place figcaption { display: grid; gap: 3px; justify-items: center; margin-top: 3px; text-align: center; }
.geo-place figcaption strong { color: var(--ink); font-size: 15px; line-height: 1.25; }
.geo-place figcaption span { color: var(--ink-3); font-size: 12px; }

/* The feed-ad component is reused at full and compact scales. */
.geo-ad { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-float); }
.geo-ad--hero { width: 280px; justify-self: center; }
.geo-ad__account { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.geo-ad__account > span:nth-child(2) { display: grid; gap: 2px; font-size: 11px; line-height: 1.1; }
.geo-ad__account small { color: var(--ink-3); font-size: 10px; }
.geo-ad__account > svg { width: 17px; height: 17px; margin-left: auto; color: var(--ink-3); }
.geo-ad__avatar { display: grid; place-items: center; flex: none; width: 27px; height: 27px; border-radius: 50%; background: #5c463c; color: #fff; font-size: 13px; font-weight: 700; }
.geo-ad__copy { margin: 0; padding: 0 12px 10px; font-size: 12px; line-height: 1.42; }
.geo-ad img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #dacbbb; }
.geo-ad__link { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 10px 12px; background: #f2f2f3; }
.geo-ad__link > span:first-child { display: grid; gap: 3px; min-width: 0; }
.geo-ad__link small { color: #525b6a; font-size: 9px; white-space: nowrap; }
.geo-ad__link strong { font-size: 11px; line-height: 1.2; }
.geo-ad__link > span:last-child { flex: none; padding: 7px 9px; border-radius: 5px; background: #dce7fb; color: #2457a6; font-size: 10px; font-weight: 800; }
.geo-ad__social { display: flex; justify-content: space-between; gap: 5px; padding: 8px 12px; border-top: 1px solid var(--hair); color: var(--ink-2); font-size: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.geo-ad__social > span:first-child::before { content: "♥"; margin-right: 4px; color: #db7185; }
.geo-ad__social > span:last-child::before { content: "◌"; margin-right: 4px; color: var(--accent-ink); font-size: 12px; }
.geo-ad__social strong { color: var(--ink); }
.geo-ad--mini { width: 158px; justify-self: end; align-self: center; box-shadow: var(--shadow-rest); }
.geo-ad--mini .geo-ad__account { gap: 5px; padding: 6px; }
.geo-ad--mini .geo-ad__avatar { width: 20px; height: 20px; font-size: 10px; }
.geo-ad--mini .geo-ad__account > span:nth-child(2) { font-size: 8px; }
.geo-ad--mini .geo-ad__account small { font-size: 7px; }
.geo-ad--mini .geo-ad__link { gap: 4px; padding: 7px; }
.geo-ad--mini .geo-ad__link strong { font-size: 9px; }
.geo-ad--mini .geo-ad__link > span:last-child { padding: 5px; font-size: 8px; white-space: nowrap; }
.geo-ad--mini .geo-ad__social { display: grid; justify-content: stretch; gap: 2px; padding: 6px 8px; font-size: 9px; }
.geo-ad--mini .geo-ad__social > span::before { margin-right: 2px; }

/* The setup and monitoring view: each ad attaches to its city map. */
.geo-run { display: grid; grid-template-columns: minmax(0, 1fr) 196px minmax(0, 1fr); align-items: center; gap: 8px; transform: translateY(18px) scale(.98); }
.geo-story[data-phase="1"] .geo-run, .geo-story[data-phase="2"] .geo-run, .geo-story[data-phase="3"] .geo-run, .geo-story[data-phase="4"] .geo-run { visibility: visible; opacity: 1; pointer-events: auto; transform: none; transition-delay: 0s; }
.geo-market { --market: var(--warn); --market-soft: var(--warn-soft); display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-width: 0; min-height: 430px; padding: 16px; border: 1px solid #e2d6c9; border-radius: var(--r-lg); background: linear-gradient(160deg, #fff 74%, #fefaf5); box-shadow: var(--shadow-float); }
.geo-market--ny { grid-column: 1; }
.geo-market--miami { --market: var(--accent-ink); --market-soft: var(--accent-soft); grid-column: 3; border-color: #ded9f2; background: linear-gradient(160deg, #fff 74%, #faf9ff); }
.geo-market__heading { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.geo-market__heading strong { min-width: 0; font-size: 14px; line-height: 1.25; }
.geo-market__heading small { margin-left: auto; color: var(--ink-3); font-size: 10px; white-space: nowrap; }
.geo-market__visual, .geo-result__visual { display: grid; grid-template-columns: minmax(0, 1fr) 158px; align-items: center; gap: 8px; min-width: 0; }
.geo-map { display: grid; justify-items: center; align-content: center; min-width: 0; margin: 0; }
.geo-map img { display: block; width: 100%; max-width: 255px; height: auto; border: 1px solid #d2dfe8; border-radius: 10px; }
.geo-metrics { display: grid; grid-template-columns: .95fr .75fr 1.25fr; gap: 4px; padding-top: 11px; border-top: 1px solid var(--hair); }
.geo-metrics > div { display: grid; gap: 5px; min-width: 0; padding: 8px 5px; border-radius: var(--r-xs); transition: background .2s; }
.geo-metrics span, .geo-result__metrics span { color: var(--ink-3); font-size: 11px; white-space: nowrap; }
.geo-metrics strong, .geo-result__metrics strong { font-size: clamp(13px, 1.3vw, 17px); font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.geo-metrics .is-geo-compare { background: var(--market-soft); }
.geo-metrics .is-geo-compare strong { color: var(--market); }
.geo-story[data-phase="0"] .geo-market--ny .geo-ad--mini { opacity: 0; transform: translateX(130px) scale(1.08); }
.geo-story[data-phase="0"] .geo-market--miami .geo-ad--mini { opacity: 0; transform: translateX(-130px) scale(1.08); }
.geo-run .geo-ad--mini { transition: opacity .45s var(--ease), transform .55s var(--ease); }

/* The decision: New York leaves the stage; the selected market gets the space. */
.geo-result { display: grid; align-content: center; gap: 15px; width: min(620px, 58%); height: max-content; max-height: 90%; margin: auto; padding: 23px 26px 21px; border: 1px solid #d9d3f4; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-panel); transform: translateX(110px) scale(.93); }
.geo-story[data-phase="5"] .geo-result { visibility: visible; opacity: 1; pointer-events: auto; transform: none; transition-delay: 0s; }
.geo-result__heading > span { display: inline-flex; padding: 6px 10px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: 11px; font-weight: 800; }
.geo-result__heading h3 { margin: 10px 0 0; font-size: clamp(1.55rem, 2.3vw, 2.1rem); line-height: 1.14; letter-spacing: -.025em; }
.geo-result__visual { grid-template-columns: minmax(0, 1fr) 168px; gap: 18px; }
.geo-result__visual .geo-map img { max-width: 290px; }
.geo-result__visual .geo-ad--mini { width: 168px; }
.geo-result__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 13px; border-top: 1px solid var(--hair); }
.geo-result__metrics > div { display: grid; gap: 4px; }
.geo-result__metrics strong { font-size: 18px; }
.geo-result__metrics > div:last-child strong { color: var(--accent-ink); }
.geo-result > p { margin: 0; color: var(--accent-ink); font-size: 13px; font-weight: 750; }

/* Reuse the creative experiment's message card, avatar, and typography. */
.geo-agent { width: 196px; transition: top .52s var(--ease), left .52s var(--ease), width .52s var(--ease), transform .52s var(--ease); }
.geo-story[data-phase="0"] .geo-agent { top: 57px; left: 50%; width: 260px; transform: translate(-50%, -50%); }
.geo-story[data-phase="5"] .geo-agent { top: 50%; left: calc(50% + 320px); width: 205px; transform: translateY(-50%); }
.geo-story[data-phase="2"] .geo-agent .creative-agent__avatar, .geo-story[data-phase="3"] .geo-agent .creative-agent__avatar, .geo-story[data-phase="4"] .geo-agent .creative-agent__avatar { box-shadow: 0 0 0 3px var(--accent-soft); }

.geo-beats { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.geo-beats li { min-height: 78svh; }
.geo-beats li > div { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.geo-beats li span { color: var(--accent-ink); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.geo-beats h3 { margin: 6px 0; font-size: 17px; line-height: 1.25; }
.geo-beats p { margin: 0; color: var(--ink-2); font-size: 12px; line-height: 1.45; }

/* The written readout keeps the comparison and evidence available after the scene. */
.geo-mobile-timeline, .geo-method { display: none; }
.geo-readout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); margin-top: 35px; padding: clamp(24px, 4vw, 48px); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-float); scroll-margin-top: 105px; }
.geo-readout__badge { display: inline-flex; padding: 7px 11px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 750; }
.geo-readout h3 { max-width: 14ch; margin: 18px 0 14px; font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.1; letter-spacing: -.025em; }
.geo-readout__lead > p { max-width: 56ch; color: var(--ink-2); line-height: 1.6; }
.geo-readout__lead strong { color: var(--ink); }
.geo-readout__lead > .geo-readout__limit { margin-top: 24px; padding-top: 15px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; }
.geo-readout__checks h4 { margin: 5px 0 18px; font-size: 16px; }
.geo-readout__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.geo-readout__table th, .geo-readout__table td { padding: 11px 7px; border-top: 1px solid var(--hair); font-size: 13px; line-height: 1.4; text-align: right; vertical-align: top; }
.geo-readout__table th:first-child { width: 45%; padding-left: 0; color: var(--ink-2); text-align: left; font-weight: 600; }
.geo-readout__table thead th { color: var(--ink-2); font-size: 12px; font-weight: 700; }
.geo-readout__table abbr { text-decoration: none; }
.geo-readout__table tbody td:last-child { color: var(--accent-ink); font-weight: 750; }
.geo-readout__checks > p { margin: 17px 0 0; color: var(--ink-3); font-size: 12px; line-height: 1.55; }

@media (max-width: 1100px) and (min-width: 1001px) {
  .geo-question { grid-template-columns: minmax(0, 1fr) 255px minmax(0, 1fr); }
  .geo-ad--hero { width: 255px; }
  .geo-run { grid-template-columns: minmax(0, 1fr) 178px minmax(0, 1fr); }
  .geo-market { min-height: 425px; padding: 12px; }
  .geo-market__visual { grid-template-columns: minmax(0, 1fr) 140px; }
  .geo-ad--mini { width: 140px; }
  .geo-metrics strong { font-size: 13px; }
  .geo-result { width: 540px; }
  .geo-story[data-phase="5"] .geo-agent { left: calc(50% + 286px); width: 170px; }
}
@media (max-height: 820px) and (min-width: 1001px) {
  .geo-scene { min-height: 0; }
  .geo-question { padding-top: 105px; }
  .geo-ad--hero { width: 240px; }
  .geo-place { margin-top: 100px; }
  .geo-story[data-phase="0"] .geo-agent { top: 49px; }
  .geo-market { min-height: 395px; }
  .geo-result { gap: 9px; padding-block: 15px; }
  .geo-result__visual .geo-map img { max-width: 230px; }
  .geo-result__visual .geo-ad--mini { width: 136px; }
}
@media (max-width: 1000px) {
  .geo-story { display: block; margin-top: 30px; }
  .geo-scene { position: relative; top: auto; display: block; height: auto; min-height: 0; max-height: none; }
  .geo-scene__head { grid-template-columns: 1fr auto; min-height: 48px; }
  .geo-nav { display: none; }
  .geo-stage { display: grid; gap: 20px; padding: 20px 0; }
  .geo-question, .geo-run { position: relative; inset: auto; visibility: visible; opacity: 1; pointer-events: auto; transform: none; transition: none; }
  .geo-question { display: block; padding: 0; }
  .geo-place { display: none; }
  .geo-ad--hero { width: min(100%, 330px); margin: 0 auto; }
  .geo-run { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .geo-market--ny, .geo-market--miami { grid-column: auto; }
  .geo-market { min-height: 0; }
  .geo-market__visual { grid-template-columns: minmax(0, 1fr) 135px; }
  .geo-ad--mini { width: 135px; }
  .geo-result { display: none; }
  .geo-agent, .geo-story[data-phase="0"] .geo-agent, .geo-story[data-phase="5"] .geo-agent { position: relative; top: auto; left: auto; width: auto; max-width: none; margin: 0; transform: none; transition: none; pointer-events: auto; }
  .geo-scene__foot { min-height: 36px; }
  .geo-beats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 20px; pointer-events: auto; }
  .geo-beats li { min-height: 0; }
  .geo-beats li > div { position: static; width: auto; height: 100%; overflow: visible; clip-path: none; white-space: normal; padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
  .geo-mobile-timeline { display: block; margin-top: 30px; }
  .geo-mobile-timeline h3 { font-size: 17px; }
  .geo-mobile-table { overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
  .geo-mobile-table > div { display: grid; grid-template-columns: 60px 115px 1fr 1fr; gap: 10px; min-width: 550px; padding: 11px 15px; border-bottom: 1px solid var(--hair); font-size: 12px; font-variant-numeric: tabular-nums; }
  .geo-mobile-table > div:first-child { background: var(--accent-soft); color: var(--accent-ink); }
  .geo-mobile-table > div:last-child { border-bottom: 0; }
  .geo-method { display: block; margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
  .geo-method summary { color: var(--accent-ink); font-size: 13px; font-weight: 750; cursor: pointer; }
  .geo-method p { max-width: 70ch; margin: 12px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.55; }
  .geo-readout { grid-template-columns: 1fr; }
}
@media (max-width: 740px) {
  .geo-intro { display: block; }
  .geo-intro__links { justify-items: start; margin-top: 14px; }
  .geo-run, .geo-beats { grid-template-columns: 1fr; }
  .geo-market__visual { grid-template-columns: minmax(0, 1fr) 138px; }
  .geo-ad--mini { width: 138px; }
  .geo-scene__foot { flex-wrap: wrap; padding-block: 9px; }
  .geo-mobile-table > div { min-width: 0; grid-template-columns: 26px 71px minmax(0, 1fr) minmax(0, 1fr); gap: 5px; padding: 10px 8px; font-size: 11px; }
}
@media (max-width: 430px) {
  .geo-market { padding: 12px; }
  .geo-market__visual { grid-template-columns: minmax(0, 1fr) 118px; }
  .geo-ad--mini { width: 118px; }
  .geo-metrics strong { font-size: 13px; }
  .geo-metrics span { font-size: 10px; }
  .geo-readout h3 { max-width: 20ch; }
}
.geo-story:not(.has-geo-js) .geo-scene { position: relative; top: auto; display: block; height: auto; max-height: none; }
.geo-story:not(.has-geo-js) .geo-stage { display: grid; gap: 20px; padding: 20px 0; }
.geo-story:not(.has-geo-js) .geo-question, .geo-story:not(.has-geo-js) .geo-run { position: relative; inset: auto; visibility: visible; opacity: 1; pointer-events: auto; transform: none; }
.geo-story:not(.has-geo-js) .geo-question { display: none; }
.geo-story:not(.has-geo-js) .geo-run { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.geo-story:not(.has-geo-js) .geo-market { grid-column: auto; }
.geo-story:not(.has-geo-js) .geo-agent { position: relative; top: auto; left: auto; width: auto; transform: none; }
.geo-story:not(.has-geo-js) .geo-beats { display: block; grid-area: auto; }
.geo-story:not(.has-geo-js) .geo-beats li { min-height: 0; }
.geo-story:not(.has-geo-js) .geo-beats li > div { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; padding: 15px 0; }
@media (max-width: 680px) { .geo-story:not(.has-geo-js) .geo-run { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .geo-question, .geo-run, .geo-result, .geo-agent, .geo-run .geo-ad--mini { transition: opacity .12s linear, visibility 0s; }
  .geo-story[data-phase="0"] .geo-market--ny .geo-ad--mini, .geo-story[data-phase="0"] .geo-market--miami .geo-ad--mini { transform: none; }
}