/* Shared example-guide layout: lead with the live map, then explain the reusable setup. */
.example-guide-page { --story-shadow:#20251f; display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(1.25rem,2.5vw,2rem); max-width:1180px; margin-inline:auto; padding-block:clamp(1rem,2.5vw,2rem) clamp(2.5rem,5vw,4.5rem); color:var(--color-text); }
.interactive-example { display:grid; max-width:none!important; margin:0!important; }
.interactive-example-frame { overflow:hidden; border:1px solid var(--color-border); border-radius:24px; background:#f4f0dc; box-shadow:0 24px 60px color-mix(in srgb,var(--story-shadow) 9%,transparent); }
.interactive-example-frame iframe { display:block; width:100%; height:clamp(600px,78vw,920px); border:0; background:#f4f0dc; }
.example-setup { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(1.25rem,3vw,2.5rem); align-items:center; padding:clamp(1.1rem,2.5vw,1.6rem); border:1px solid var(--color-border); border-radius:18px; background:linear-gradient(135deg,#eef5ef 0%,#f8f4de 100%); }
.example-setup-copy { min-width:0; }
.example-setup .eyebrow { margin:0 0 .25rem; font-size:.72rem; }
.example-setup h2 { margin:0; font-size:clamp(1.2rem,2vw,1.55rem); letter-spacing:-.025em; }
.example-setup h2 + p { margin:.35rem 0 .9rem; color:#59615b; font-size:.92rem; line-height:1.45; }
.example-setup-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem 1.25rem; margin:0; }
.example-setup-grid div { min-width:0; }
.example-setup-grid dt { color:#6b726d; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.example-setup-grid dd { margin:.15rem 0 0; font-size:.86rem; font-weight:650; line-height:1.35; }
.example-setup-features { margin:.8rem 0 0; color:#59615b; font-size:.82rem; line-height:1.4; }
.example-setup-features strong { color:var(--color-text); }
.example-setup-actions { display:grid; gap:.7rem; justify-items:center; min-width:max-content; }
.example-customize { white-space:nowrap; }
.example-back { color:#59615b; font-size:.8rem; text-decoration:none; }
.example-story-tip { display:grid; grid-template-columns:auto minmax(0,1fr); gap:.75rem 1rem; align-items:start; max-width:72ch; margin:0; padding:1rem 1.1rem; border-left:3px solid var(--color-accent); background:color-mix(in srgb,var(--color-accent) 5%,transparent); }
.example-tip-label { margin:.12rem 0 0; color:var(--color-accent); font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.example-story-tip > p:last-child { margin:0; font-size:.95rem; line-height:1.55; }
.example-guide-page > section:not(.interactive-example):not(.example-setup) { max-width:72ch; margin-left:0; padding-top:1.6rem; border-top:1px solid var(--color-border); line-height:1.65; }
.example-guide-page > section:not(.interactive-example):not(.example-setup) h2 { margin:0 0 .85rem; font-size:1.25rem; letter-spacing:-.02em; }
.example-section-intro { margin:-.35rem 0 .85rem; color:#59615b; font-size:.9rem; }
.example-guide-page li + li { margin-top:.55rem; }
.example-guide-page a { overflow-wrap:anywhere; }
@media(max-width:900px) {
  .example-setup { grid-template-columns:minmax(0,1fr); align-items:start; }
  .example-setup-actions { min-width:0; display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; }
  .example-setup-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:720px) {
  .example-guide-page { gap:1.25rem; }
  .interactive-example-frame { border-radius:16px; }
  .interactive-example-frame iframe { height:72vh; min-height:520px; }
  .example-setup { border-radius:14px; }
  .example-setup-grid { grid-template-columns:1fr; }
  .example-story-tip { grid-template-columns:1fr; gap:.35rem; }
  .example-tip-label { margin:0; }
}

.example-guide-page > *, .interactive-example-frame { min-width:0; }