/* energyguideusa.com — this site's own styles, loaded after paper.css.
   assets/site/ belongs to the site: a Starting Point update never touches it.

   1. The guides       the few utility classes the guide bodies carry
   2. Imported pages   the ShoutFast classes the six pages carry
   3. The home page    its inline-styled sections, made to fold on a phone
   4. The state hubs   /states/ and /states/{state}/
   5. The quote form
   6. The solar cost calculator
*/

/* ---------------------------------------------------------------- 0 ---- */
/* The accent's companions. Admin → The look sets --accent alone, so its hover,
   its soft tint and its dark-mode partner stayed Starting Point's blue: every
   link turned blue under the pointer, and in dark mode the green was dark on
   dark. Set here to match the site's green. */
:root { --accent-hover: #3d6120; --accent-soft: #eef4e6; --accent-ink: #2f4a18; }
:root[data-theme="dark"] { --accent: #98c965; --accent-hover: #b4da8c; --accent-soft: #1d2a12; --accent-ink: #cfe7b5; --on-accent: #10131a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent: #98c965; --accent-hover: #b4da8c; --accent-soft: #1d2a12; --accent-ink: #cfe7b5; --on-accent: #10131a; }
}

/* ---------------------------------------------------------------- 1 ---- */
/* The guides were written with Tailwind class names (border, px-4, py-2,
   bg-gray-100, space-y-4…). Paper Air already styles tables in .prose; this
   only gives the classes their meaning, and lets a wide cost table scroll
   sideways on a phone instead of pushing the page wider. */
.prose table.min-w-full { min-width: 100%; }
.prose .border { border: 1px solid var(--paper-line); }
.prose thead.bg-gray-100 th, .prose .bg-gray-100 { background: var(--paper-sunk); }
.prose .bg-white { background: var(--paper); }
.prose td.border, .prose th.border { padding: .55rem .9rem; }
.prose .text-left { text-align: left; }
.prose .font-bold { font-weight: 700; }
.prose .text-lg { font-size: 1.125rem; }
.prose .text-xl { font-size: 1.25rem; }
.prose .mb-2 { margin-bottom: .5rem; }
.prose .my-6 { margin-block: 1.5rem; }
.prose .space-y-4 > * + * { margin-top: 1rem; }
.prose .space-y-6 > * + * { margin-top: 1.5rem; }
.prose .space-y-4 h3, .prose .space-y-6 h3 { margin-top: 0; }
@media (max-width: 760px) {
  .prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------------------------------------------------------------- 2 ---- */
.shoutfast-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); }
.shoutfast-container.shoutfast-homepage { max-width: none; padding: 0; }
.sf-page-title { padding-block: clamp(var(--space-6), 5vw, var(--space-8)) var(--space-5); }
.sf-page-title-inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); }
.sf-page-title h1 { margin-bottom: .75rem; max-width: 900px; }
.sf-page-title .meta { color: var(--ink-muted); font-size: var(--fs-sm); margin-bottom: .5rem; }
.sf-page-title .standfirst { color: var(--ink-soft); font-size: var(--fs-lead); max-width: 720px; }
.shoutfast-content-full { max-width: var(--measure-wide, 760px); margin-inline: auto; padding-bottom: var(--space-8); }
.shoutfast-content-full h2 { margin-top: var(--space-6); }
.shoutfast-content-full p, .shoutfast-content-full ul { margin-bottom: 1rem; }
.shoutfast-content-split { display: grid; grid-template-columns: 60fr 40fr; gap: var(--space-7); align-items: start; padding-bottom: var(--space-8); }
.shoutfast-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: 12px 22px;
  border-radius: var(--radius-pill); border: 2px solid transparent; font-weight: 600; text-decoration: none; cursor: pointer; font: inherit; }
.shoutfast-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent) !important; }
.shoutfast-btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
@media (max-width: 860px) {
  .shoutfast-content-split { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ---------------------------------------------------------------- 3 ---- */
/* The home page is the old site's own markup, styled inline. Its grids are
   fixed at four and three columns, which on a phone squeezes each column to
   a few letters wide. These fold them — on the calculator too. */
@media (max-width: 900px) {
  .shoutfast-container [style*="repeat(4"],
  .shoutfast-container [style*="repeat(5"] { grid-template-columns: repeat(2, 1fr) !important; }
  .shoutfast-container [style*="1fr 1fr 1fr"],
  .shoutfast-container [style*="repeat(3"] { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .shoutfast-container [style*="grid-template-columns: 1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
  .shoutfast-container [style*="repeat(2"] { grid-template-columns: 1fr !important; }
  .shoutfast-container input, .shoutfast-container select { max-width: 100%; }
}
@media (max-width: 600px) {
  .shoutfast-container section { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .shoutfast-homepage h1 { font-size: 2.2rem !important; }
  .shoutfast-homepage h2 { font-size: 1.7rem !important; }
}

/* ---------------------------------------------------------------- 4 ---- */
.egu-band { background: #404952; color: #fff; padding-block: var(--space-7) var(--space-6); }
.egu-band h1 { color: #fff; margin-bottom: .5rem; }
.egu-band-lead { color: rgba(255,255,255,.88); font-size: var(--fs-lead); margin: 0; }
.egu-band-small { color: rgba(255,255,255,.75); font-size: var(--fs-sm); margin-top: 1rem; }
.egu-crumbs { font-size: var(--fs-sm); color: rgba(255,255,255,.7); margin-bottom: var(--space-4); }
.egu-crumbs a { color: #fff; }
.egu-crumbs span[aria-hidden] { margin-inline: .4rem; opacity: .6; }
.egu-search { position: relative; max-width: 420px; margin: var(--space-5) auto 0; }
.egu-search input { width: 100%; padding: .8rem 1rem .8rem 2.75rem; border-radius: var(--radius-pill); border: 2px solid rgba(255,255,255,.4);
  background: #fff; color: #2d3436; font: inherit; }
.egu-search .icon { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); color: #4f7a2a; pointer-events: none; }
.egu-states-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.egu-state-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 84px;
  padding: 1.1rem .75rem; border: 2px solid var(--paper-line); border-radius: var(--radius); background: var(--paper-raised);
  color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
a.egu-state-card:hover { border-color: #98c965; transform: translateY(-2px); }
.egu-state-card.is-empty { opacity: .45; }
.egu-state-card[hidden] { display: none; }
.egu-state-name { font-weight: 700; }
.egu-state-count { font-size: var(--fs-sm); color: var(--accent); font-weight: 600; margin-top: .2rem; }
.egu-no-results { grid-column: 1 / -1; text-align: center; color: var(--ink-muted); }
.egu-section { margin-bottom: var(--space-7); }
.egu-section > h2 { padding-bottom: .6rem; border-bottom: 3px solid #98c965; margin-bottom: var(--space-5); }
.egu-overview { display: block; padding: var(--space-6); border: 2px solid #98c965; border-radius: var(--radius-lg);
  background: var(--paper-raised); color: var(--ink); text-decoration: none; }
.egu-overview h2 { color: var(--accent); margin-bottom: .6rem; }
.egu-overview p { color: var(--ink-soft); }
.egu-more { color: var(--accent); font-weight: 700; }
.egu-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.egu-link { display: block; padding: var(--space-5); border: 2px solid var(--paper-line); border-radius: var(--radius);
  background: var(--paper-raised); color: var(--ink); text-decoration: none; }
.egu-link:hover, .egu-overview:hover { border-color: #98c965; }
.egu-link h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.egu-link p { font-size: var(--fs-sm); color: var(--ink-muted); margin: 0; }
.egu-cities { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.egu-city { display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; font-weight: 600;
  border: 2px solid var(--paper-line); border-radius: var(--radius); background: var(--paper-raised); color: var(--ink); text-decoration: none; }
.egu-city:hover { border-color: #98c965; }
@media (max-width: 900px) { .egu-states-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) {
  .egu-states-grid, .egu-cities { grid-template-columns: repeat(2, 1fr); }
  .egu-links { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- 5 ---- */
.shoutfast-form-container { background: var(--paper-raised); border: 1px solid var(--paper-line); border-radius: var(--radius-lg); padding: var(--space-6); }
.shoutfast-form-header { margin-bottom: var(--space-5); }
.shoutfast-form-title { font-size: 1.5rem; margin-bottom: .3rem; }
.shoutfast-form-description { color: var(--ink-muted); margin: 0; }
.shoutfast-form-field { margin-bottom: 1.1rem; }
.shoutfast-form-field label { display: block; font-weight: 600; margin-bottom: .35rem; }
.shoutfast-sub-field label { font-weight: 400; font-size: var(--fs-sm); color: var(--ink-muted); }
.shoutfast-form-field input, .shoutfast-form-field select, .shoutfast-form-field textarea {
  width: 100%; padding: .7rem .85rem; border: 1px solid var(--edge-ctl, var(--paper-edge)); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink); font: inherit; }
.shoutfast-form-field textarea { min-height: 140px; resize: vertical; }
.shoutfast-compound-field { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.shoutfast-form-submit { margin-top: var(--space-5); }
.shoutfast-form-submit .shoutfast-btn { width: 100%; }

/* ---------------------------------------------------------------- 6 ---- */
/* The solar cost calculator (/solar-calculator/, v1.0.1). */
.egu-calc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); padding: var(--space-8) 0; align-items: start; }
.egu-calc h2 { font-size: 1.6rem; margin-bottom: var(--space-5); }
.egu-calc-field { margin-bottom: 1.25rem; }
.egu-calc-field label { display: block; font-weight: 600; margin-bottom: .4rem; }
.egu-calc-field input, .egu-calc-field select { width: 100%; padding: .75rem .9rem; border: 2px solid #98c965; border-radius: 8px;
  background: var(--paper); color: var(--ink); font: inherit; }
.egu-calc-field input:focus, .egu-calc-field select:focus { outline: 3px solid var(--focus, #4f7a2a); outline-offset: 1px; }
.egu-calc-help { font-size: var(--fs-sm); color: var(--ink-muted); margin: .35rem 0 0; }
.egu-calc-more { margin-bottom: 1.25rem; }
.egu-calc-more summary { cursor: pointer; font-weight: 600; color: var(--accent); margin-bottom: .75rem; }
.egu-calc-go { width: 100%; padding: 1rem; border: 0; border-radius: 8px; background: var(--accent); color: var(--on-accent);
  font: inherit; font-size: 1.1rem; font-weight: 700; cursor: pointer; }
.egu-calc-go:hover { background: var(--accent-hover); }
.egu-calc-error { color: var(--red); font-weight: 600; margin-top: .75rem; }
.egu-calc-placeholder { display: grid; place-items: center; min-height: 260px; text-align: center; color: var(--ink-muted);
  border: 2px dashed var(--paper-line); border-radius: var(--radius-lg); padding: var(--space-6); }
.egu-calc-basis { color: var(--ink-muted); font-size: var(--fs-sm); margin-top: -.75rem; margin-bottom: var(--space-4); }
.egu-calc-card { background: #eaeddd; color: #2d3436; border-radius: 8px; padding: 1.1rem 1.25rem; margin-bottom: .75rem; }
.egu-calc-card.is-plain { background: #fff; border: 1px solid #e0e0e0; }
.egu-calc-note a { color: #3d6120; }
.egu-calc-card.is-accent { background: #4f7a2a; color: #fff; }
.egu-calc-card.is-accent .egu-calc-label, .egu-calc-card.is-accent .egu-calc-note { color: rgba(255,255,255,.9); }
.egu-calc-label { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5b5f67; margin: 0 0 .2rem; }
.egu-calc-value { font-size: 1.5rem; font-weight: 700; margin: 0 0 .15rem; line-height: 1.25; }
.egu-calc-value.is-small { font-size: 1.1rem; }
.egu-calc-note { font-size: .88rem; color: #5b5f67; margin: 0; }
.egu-calc-note a { font-weight: 600; }
.egu-calc-card.is-accent .egu-calc-note a { color: #fff; }
.egu-calc-small { font-size: var(--fs-sm); color: var(--ink-muted); margin-top: var(--space-4); }
.egu-calc-cta { display: inline-block; padding: .9rem 2rem; border-radius: 50px; background: #404952; color: #fff !important;
  font-weight: 600; text-decoration: none; }
@media (max-width: 860px) { .egu-calc { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-6) 0; } }

/* ---------------------------------------------------------------- 7 ---- */
/* v1.1.0 — the home page, the free guides, the tile map, photographs. */
.egu-wrap { max-width: 1140px; margin-inline: auto; padding-inline: 1.5rem; }
.egu-center { text-align: center; }
.egu-ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -4px; flex-shrink: 0; }
.egu-ico-lg { width: 40px; height: 40px; stroke-width: 1.5; color: #4f7a2a; }
.egu-ico-sm { width: 16px; height: 16px; vertical-align: -3px; }
.egu-btn { display: inline-block; padding: .9rem 2.1rem; border-radius: 50px; font-weight: 600; text-decoration: none !important; line-height: 1.2; }
.egu-btn-light { background: #fff; color: #404952 !important; }
.egu-btn-green { background: #98c965; color: #1d2a12 !important; }
.egu-btn-dark { background: #404952; color: #fff !important; }
.egu-btn:hover { filter: brightness(.95); }
.egu-eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #4f7a2a; margin-bottom: .5rem; }
.egu-section { padding-block: clamp(3rem, 7vw, 5rem); }
.egu-section-head { text-align: center; max-width: 680px; margin: 0 auto 2.5rem; }
.egu-section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin-bottom: .6rem; }
.egu-section-head p { color: var(--ink-soft); font-size: 1.08rem; margin: 0; }

/* hero */
.egu-hero { position: relative; color: #fff; text-align: center; overflow: hidden; background: #404952; }
.egu-hero-bg, .egu-hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.egu-hero-bg img { object-fit: cover; object-position: center 70%; }
.egu-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40,48,56,.62) 0%, rgba(40,48,56,.38) 45%, rgba(40,48,56,.8) 100%); }
.egu-hero-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: clamp(4rem, 10vw, 7.5rem) 1.5rem clamp(3rem, 7vw, 5rem); }
.egu-hero-kicker { display: inline-block; padding: .45rem 1.2rem; border: 1px solid rgba(255,255,255,.45); border-radius: 50px; font-size: .9rem; margin-bottom: 1.6rem; }
.egu-hero h1 { color: #fff; font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1.12; margin-bottom: 1.2rem; }
.egu-hero h1 span { color: #b4da8c; }
.egu-hero-lead { font-size: clamp(1.05rem, 2.2vw, 1.25rem); max-width: 700px; margin: 0 auto 2.4rem; line-height: 1.65; color: rgba(255,255,255,.92); }
.egu-hero-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 3rem; }
.egu-stats { list-style: none; padding: 0; margin: 0 auto; max-width: 780px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.egu-stats li { display: flex; flex-direction: column; gap: .2rem; }
.egu-stats strong { font-size: 1.75rem; line-height: 1.1; }
.egu-stats span { font-size: .85rem; color: rgba(255,255,255,.82); }

/* free guides */
.egu-guides-promo { background: #f5f6f0; }
.egu-guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
.egu-guide-card { display: flex; gap: 1rem; background: #fff; border: 1px solid #e3e6d8; border-radius: 12px; padding: 1rem; color: #2d3436; }
.egu-guide-cover img { width: 96px; height: auto; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,.12); display: block; }
.egu-guide-body h3 { font-size: 1.05rem; margin: 0 0 .35rem; line-height: 1.3; }
.egu-guide-body h3 a { color: #2d3436; text-decoration: none; }
.egu-guide-body h3 a:hover { color: #3d6120; }
.egu-guide-body p { font-size: .9rem; color: #5b5f67; margin: 0 0 .6rem; }
.egu-guide-actions { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-weight: 600; }
.egu-guide-actions a { color: #3d6120; }
.egu-dl { white-space: nowrap; }
.egu-guide-grid-hub { margin-block: 2rem; }

/* what we cover, tools, trust */
.egu-two { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.egu-topic { border: 1px solid var(--paper-line); border-radius: 14px; overflow: hidden; background: var(--paper-raised); }
.egu-topic img { width: 100%; height: 240px; object-fit: cover; display: block; }
.egu-topic-body { padding: 1.5rem 1.6rem 1.2rem; }
.egu-topic-body h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.35rem; margin-bottom: .5rem; }
.egu-topic-body h3 .egu-ico { color: #4f7a2a; }
.egu-states-home { background: #f5f6f0; }
.egu-state-links { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; }
.egu-state-links a { display: block; padding: .7rem .5rem; text-align: center; border-radius: 8px; background: #fff; border: 1px solid #e3e6d8;
  color: #2d3436; font-weight: 600; font-size: .95rem; text-decoration: none; }
.egu-state-links a:hover { border-color: #98c965; color: #3d6120; }
.egu-tool { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.6rem; border: 1px solid var(--paper-line); border-radius: 14px;
  background: var(--paper-raised); color: var(--ink); text-decoration: none; }
.egu-tool:hover { border-color: #98c965; }
.egu-tool strong { display: block; font-size: 1.2rem; margin-bottom: .3rem; color: var(--ink); }
.egu-tool span { color: var(--ink-soft); }
.egu-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; text-align: center; }
.egu-step-n { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 2px solid #98c965; color: #4f7a2a;
  font-weight: 700; font-size: 1.3rem; margin-bottom: 1rem; }
.egu-steps h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.egu-steps p { color: var(--ink-soft); max-width: 300px; margin-inline: auto; }
.egu-trust { background: #f5f6f0; }
.egu-trust-inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; }
.egu-trust img { width: 100%; height: auto; border-radius: 14px; display: block; }
.egu-trust h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.egu-trust p { color: #4a4f46; }
.egu-trust a { color: #3d6120; font-weight: 600; }
.egu-final { background: #404952; color: #fff; text-align: center; padding-block: clamp(3.5rem, 8vw, 5rem); }
.egu-final h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.3rem); }
.egu-final p { color: rgba(255,255,255,.88); font-size: 1.12rem; max-width: 600px; margin: 0 auto 2rem; }

/* guide pages */
.egu-page-lead, .guide-lead { font-size: 1.15rem; line-height: 1.6; color: var(--ink); border-left: 4px solid #98c965; padding-left: 1rem; margin-bottom: 1.6rem; }
.egu-download { display: flex; gap: 1.3rem; align-items: center; background: #f3f7ec; border: 1px solid #cfe1b6; border-radius: 12px; padding: 1.2rem 1.4rem; margin: 0 0 2rem; color: #2d3436; }
.egu-download img { width: 100px; height: auto; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.egu-download p { margin: 0 0 .5rem; }
.egu-download-title { font-weight: 700; font-size: 1.1rem; }
.prose .egu-download .egu-btn, .egu-download .egu-btn { padding: .65rem 1.5rem; }
.guide-note { background: #f3f7ec; border: 1px solid #cfe1b6; border-radius: 10px; padding: 1rem 1.2rem; margin: 1.2rem 0 1.6rem; color: #2d3436; }
.guide-note p:last-child { margin-bottom: 0; }
.guide-example { background: var(--paper-raised); border: 1px solid var(--paper-line); border-radius: 10px; padding: 1rem 1.2rem .4rem; margin: 1.2rem 0 1.6rem; }
.guide-example h3 { margin-top: 0; }
ul.checklist { list-style: none; padding-left: 0; }
ul.checklist li { position: relative; padding-left: 2rem; margin-bottom: .6rem; }
ul.checklist li::before { content: ''; position: absolute; left: 0; top: .3em; width: 1.05rem; height: 1.05rem; border: 2px solid #4f7a2a; border-radius: 3px; }
.egu-more-guides { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--paper-line); }
.egu-reviewed { font-size: .88rem; color: var(--ink-muted); }
.egu-page-photo { width: 100%; height: auto; border-radius: 12px; margin: 0 0 1.5rem; display: block; }
.egu-guide-box { display: flex; gap: 1.2rem; align-items: flex-start; margin-top: 2.5rem; padding: 1.3rem; border: 1px solid #cfe1b6; border-radius: 12px; background: #f3f7ec; color: #2d3436; }
.egu-guide-box img { width: 84px; height: auto; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.egu-guide-box p { margin: 0 0 .4rem; font-size: .95rem; }
.egu-guide-box a { color: #3d6120; font-weight: 600; }
.egu-guide-box-kicker { font-size: .75rem !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #4f7a2a; }
.egu-guide-box-title { font-size: 1.1rem !important; font-weight: 700; }

/* state hubs: photo band and tile map */
.egu-band-photo { background: linear-gradient(rgba(40,48,56,.78), rgba(40,48,56,.82)), url('/assets/site/img/city-golden-hour-1280.webp') center 60% / cover no-repeat, #404952; }
@media (min-width: 1300px) { .egu-band-photo { background-image: linear-gradient(rgba(40,48,56,.78), rgba(40,48,56,.82)), url('/assets/site/img/city-golden-hour-1920.webp'); } }
@media (max-width: 800px) { .egu-band-photo { background-image: linear-gradient(rgba(40,48,56,.78), rgba(40,48,56,.82)), url('/assets/site/img/city-golden-hour-768.webp'); } }
.egu-map-title { font-size: 1.3rem; margin: 0 0 1rem; }
.egu-tilemap { display: grid; grid-template-columns: repeat(11, 1fr); gap: 5px; max-width: 760px; margin: 0 auto 3rem; }
.egu-tilemap a, .egu-tilemap span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 6px; font-weight: 700; font-size: clamp(.62rem, 1.6vw, .95rem); text-decoration: none; }
.egu-tilemap a { background: #98c965; color: #1d2a12; }
.egu-tilemap a:hover, .egu-tilemap a:focus-visible { background: #4f7a2a; color: #fff; }
.egu-tilemap abbr { text-decoration: none; cursor: inherit; }
.egu-tilemap span { background: var(--paper-sunk); color: var(--ink-faint); }

@media (max-width: 900px) {
  .egu-guide-grid { grid-template-columns: 1fr 1fr; }
  .egu-state-links { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .egu-two, .egu-trust-inner, .egu-steps, .egu-guide-grid { grid-template-columns: 1fr; }
  .egu-stats { grid-template-columns: repeat(2, 1fr); row-gap: 1.4rem; }
  .egu-state-links { grid-template-columns: repeat(2, 1fr); }
  .egu-download { flex-direction: column; align-items: flex-start; }
  .egu-tilemap { gap: 3px; }
  .egu-tilemap a, .egu-tilemap span { border-radius: 4px; }
}
/* Boxes and tables inside a page or guide sit on the same column as the words. */
.prose > .egu-download, .prose > .guide-note, .prose > .guide-example, .prose > .egu-guide-box,
.prose > .egu-more-guides, .prose > table, .prose > .egu-guide-grid, .prose > .egu-reviewed { max-width: var(--measure-wide); margin-inline: auto; }
.prose > .egu-guide-grid { max-width: none; }