/* ============================================================================
   Shield & Shred — the home page (index.html). Page-only CSS: everything
   reusable lives in /style.css. Sections, top to bottom:
    1. Hero (Diamond sky, wordmark, store button, five titans on the hills)
    2. How a fight works (steps, specials, ULTIMATE scale, LOOT bar)
    3. Six boards (inline SVG silhouettes)
    4. Titans (CSS-only element filter, card grid) + the element wheel
    5. Town  6. Boss Rush  7. Leagues  8. Card packs + fair play
    9. Screenshots  10. FAQ  11. Final call to action
   ============================================================================ */

/* shared helpers ---------------------------------------------------------- */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.shot { margin: 0 auto; width: 100%; max-width: min(290px, 74vw); }
.shot .phone { max-width: none; }
.home .section-head h2 { overflow-wrap: normal; }
/* no lone last words under the centred headings */
.home .section-head .lede, .final-lede { text-wrap: balance; }
/* a line that is only true with JS (the head chrome adds .js to <html>) */
html:not(.js) .js-only { display: none; }
/* sticky phone beside a tall column (desktop) */
@media (min-width: 900px) {
  .fight-aside, .boards-aside, .town-aside, .boss-aside { position: sticky; top: calc(var(--header-h) + 28px); }
}


/* ---------------------------------------------------------------------------
   1. Hero
   --------------------------------------------------------------------------- */
.hero { position: relative; padding-top: clamp(20px, 3.6vw, 48px); text-align: center; }
.hero-copy { position: relative; z-index: 2; }
.hero-title { margin: 14px auto 0; line-height: 0; font-size: 1rem; }
.hero-title .wordmark { width: min(100%, 680px); margin-inline: auto; }
.hero-tag {
  max-width: 36rem;
  margin: 14px auto 0;
  font: 600 clamp(1.25rem, 1.02rem + 1.05vw, 1.75rem)/1.32 var(--font-display);
  letter-spacing: .01em;
  color: var(--ink);
  text-wrap: balance;
}
.hero-tag mark {
  padding: 0 .32em;
  border-radius: 10px;
  background: var(--highlight);
  box-shadow: inset 0 0 0 2px var(--highlight-border), 0 3px 0 rgba(242, 169, 0, .45);
  color: var(--ink);
  white-space: nowrap;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero-cta { margin-top: clamp(18px, 2.4vw, 26px); }

/* the stage: hills + grass drawn like the store's feature graphic, the cast
   standing on the grass. --s is SUNTRUNK's height; the others scale off it. */
.hero-stage {
  --s: clamp(104px, 34vw, 300px);
  position: relative;
  padding-top: calc(var(--s) * .14);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'%3E%3Cellipse cx='230' cy='300' rx='620' ry='190' fill='%235EC24A' fill-opacity='.5'/%3E%3Cellipse cx='1230' cy='312' rx='620' ry='200' fill='%235EC24A' fill-opacity='.42'/%3E%3Cellipse cx='720' cy='390' rx='540' ry='300' fill='%235EC24A'/%3E%3Cpath d='M0 300C300 276 520 268 720 272S1180 284 1440 298V400H0Z' fill='%238BE06A'/%3E%3Cellipse cx='720' cy='292' rx='420' ry='26' fill='%2399E67A' fill-opacity='.7'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
.hero-cast {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0 var(--gutter) calc(var(--s) * .1);
}
.hero-titan { position: relative; flex: none; }
.hero-titan + .hero-titan { margin-left: calc(var(--s) * -.045); }
.hero-titan img {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: none;
  height: calc(var(--s) * var(--k));
  filter: drop-shadow(0 2px 0 rgba(43, 47, 74, .08));
}
/* soft ground shadow under each titan */
.hero-titan::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 6%;
  right: 6%;
  bottom: calc(var(--s) * -.04);
  height: calc(var(--s) * .09);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 70, 30, .36), rgba(40, 70, 30, 0));
}
.ht-emberkit { --k: .56; z-index: 3; }
.ht-aquolotl { --k: .66; z-index: 2; }
.ht-suntrunk { --k: 1;   z-index: 1; }
.ht-nimbeak  { --k: .64; z-index: 2; }
.ht-pebblin  { --k: .58; z-index: 3; }
@media (min-width: 700px) {
  .hero-titan + .hero-titan { margin-left: calc(var(--s) * .04); }
}
/* the grass band the titans stand on, with the numbers */
.hero-grass { padding: 6px 0 clamp(36px, 5vw, 56px); }
.home-stats { --stat-cols: 5; }
@media (max-width: 719.98px) {
  .home-stats.stats { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
  .home-stats.stats > li { grid-column: span 2; padding-inline: 4px; }
  .home-stats .stat-label { font-size: .8125rem; letter-spacing: .02em; }
  .home-stats.stats > li:nth-child(n+4) { grid-column: span 3; }
}
.home-stats .stat-label { color: var(--muted); }


/* ---------------------------------------------------------------------------
   2. How a fight works
   --------------------------------------------------------------------------- */
.fight-split { align-items: start; }
@media (min-width: 900px) {
  .fight-split, .boards-split { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); }
}
.fight-steps { display: grid; gap: clamp(18px, 2.4vw, 26px); margin: 0; padding: 0; list-style: none; }
.fight-step > * + * { margin-top: 14px; }
.step-title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem);
  text-transform: uppercase;
}
.step-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(var(--btn-green-top), var(--btn-green-bottom));   /* white digits: the deeper button green */
  box-shadow: 0 3px 0 var(--btn-green-lip), 0 0 0 3px var(--keyline);
  color: #fff;
  font: 600 1.375rem/1 var(--font-display);
  text-shadow: 0 2px 0 var(--btn-green-lip);
}
.tile-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tile-row img { width: clamp(40px, 10vw, 54px); height: auto; filter: drop-shadow(0 3px 0 rgba(43, 47, 74, .14)); }
/* specials: one row each on phones, three across from 520px */
.specials { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.specials li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  padding: 10px 14px 10px 10px;
  border-radius: var(--radius);
  background: var(--well);
}
.tile-stack { position: relative; grid-row: span 2; width: 52px; height: 52px; }
.tile-stack img { position: absolute; inset: 0; width: 100%; height: 100%; }
.special-name { align-self: end; font: 600 1.0625rem/1.15 var(--font-display); letter-spacing: .04em; }
.special-what { align-self: start; font-size: 1rem; line-height: 1.35; color: var(--muted); }
@media (min-width: 520px) {
  .specials { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .specials li { grid-template-columns: 1fr; grid-template-rows: none; justify-items: center; gap: 4px; padding: 14px 10px; text-align: center; }
  .tile-stack { grid-row: auto; margin-bottom: 4px; }
}
/* ULTIMATE strength by level: a gold bar with three marks */
.ult-scale { position: relative; height: 96px; margin: 22px 8px 0; padding: 0; list-style: none; }
.ult-scale::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #FFE39A, #FFC93C 34%, #FF9A3C 72%, #FF7A2F);
  box-shadow: 0 0 0 3px var(--keyline), 0 4px 0 3px rgba(43, 111, 216, .28);
}
.ult-scale li {
  position: absolute;
  top: 0;
  left: var(--at);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  white-space: nowrap;
}
.ult-scale li::before {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 6px var(--coin), 0 0 0 2px var(--coin-shade);
}
.ult-scale li:first-child { transform: translateX(-8px); align-items: flex-start; }
.ult-scale li:last-child { transform: translateX(calc(-100% + 8px)); align-items: flex-end; }
.ult-scale b { margin-top: 8px; font: 600 1.625rem/1 var(--font-display); }
.ult-scale span { margin-top: 4px; font: 600 .875rem/1.2 var(--font-display); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
/* LOOT bar: 0 → 150%, ticks at 50% and 100%; fills when it scrolls in */
.loot-bar {
  position: relative;
  height: 36px;
  margin-top: 18px;
  border-radius: var(--radius-pill);
  background: var(--well);
  box-shadow: inset 0 3px 0 rgba(43, 47, 74, .08), 0 0 0 3px var(--keyline), 0 4px 0 3px rgba(43, 111, 216, .28);
  overflow: hidden;
}
.loot-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 85.3%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 14px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, var(--primary-top), var(--primary-bottom));
  box-shadow: inset 0 -3px 0 var(--primary-lip);
  transition: width 1.1s cubic-bezier(.2, .8, .3, 1) .3s;
}
.rv-on .fight-step:not(.in) .loot-fill { width: 8%; }
/* 16px on the game green: ink (4.6:1+), white would be under 3:1 */
.loot-read { font: 600 1rem/1 var(--font-display); letter-spacing: .04em; color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .35); white-space: nowrap; }
.loot-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--at);
  z-index: 1;
  width: 3px;
  margin-left: -1.5px;
  background: linear-gradient(rgba(255, 255, 255, .9) 0 9px, transparent 9px calc(100% - 9px), rgba(255, 255, 255, .9) calc(100% - 9px));
}
.loot-bar + .loot-marks { margin-top: 20px; }
.loot-marks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.loot-marks li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--well);
  line-height: 1.4;
}
.loot-marks b { min-width: 3.3em; font: 600 1.125rem/1 var(--font-display); }
.lm-name {
  padding: .35em .75em;
  border-radius: var(--radius-pill);
  background: var(--highlight);
  box-shadow: inset 0 0 0 2px var(--highlight-border);
  font: 600 .875rem/1 var(--font-display);
  letter-spacing: .05em;
}


/* ---------------------------------------------------------------------------
   3. Six boards
   --------------------------------------------------------------------------- */
.boards-split { align-items: start; }
.board-grid { display: grid; gap: 16px; }
.board-card { display: flex; align-items: center; gap: 16px; --pad: 16px; }
.board-fig {
  flex: none;
  display: grid;
  place-items: center;
  width: 104px;
  padding: 8px;
  border-radius: var(--radius);
  background: var(--board-plate);
  box-shadow: inset 0 0 0 2px var(--well-border);
}
.board-svg { width: 100%; height: auto; overflow: visible; }
.board-txt h3 { text-transform: uppercase; letter-spacing: .03em; }
.board-txt p { margin-top: 4px; }
@media (min-width: 600px) {
  .board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .board-card { flex-direction: column; align-items: stretch; --pad: 20px; }
  .board-fig { width: auto; padding: 14px; }
  .board-svg { width: 150px; }
}


/* ---------------------------------------------------------------------------
   4. Titans: a CSS-only element filter (radios + :has; with no :has support
   the filter hides and all 20 show), then the card grid
   --------------------------------------------------------------------------- */
.titan-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  margin: 0 0 clamp(20px, 3vw, 30px);
  padding: 0;
  border: 0;
}
.titan-filter label {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 44px;
  padding: 6px 16px 6px 9px;
  border-radius: var(--radius-pill);
  background: var(--panel);
  box-shadow: inset 0 0 0 2px var(--panel-border), 0 3px 0 var(--panel-shadow);
  color: var(--ink);
  font: 600 1rem/1 var(--font-display);
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background-color .12s ease;
}
.titan-filter label img { width: 28px; height: 28px; }
.titan-filter label:hover { transform: translateY(-1px); }
.titan-filter label:active { transform: scale(.96); }
.titan-filter input:checked + label {
  background: var(--el-top, var(--highlight));
  box-shadow: inset 0 0 0 3px var(--keyline), 0 3px 0 var(--panel-shadow), 0 0 0 3px var(--panel-shadow);
}
.titan-filter input:focus-visible + label { outline: 3px solid var(--ink); outline-offset: 4px; }
@supports not selector(:has(*)) {
  .titan-filter { display: none; }
}
.titan-browser:has(#tf-fire:checked) .titan-card:not(.el-fire),
.titan-browser:has(#tf-water:checked) .titan-card:not(.el-water),
.titan-browser:has(#tf-air:checked) .titan-card:not(.el-air),
.titan-browser:has(#tf-earth:checked) .titan-card:not(.el-earth),
.titan-browser:has(#tf-toxic:checked) .titan-card:not(.el-toxic) { display: none; }

/* equal-width cards that stay the same size when filtered (centred rows) */
.titan-grid, .boss-grid {
  --cols: 2;
  --gap: clamp(12px, 2vw, 22px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}
.titan-grid > *, .boss-grid > * { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }
@media (min-width: 560px) { .titan-grid, .boss-grid { --cols: 3; } }
@media (min-width: 860px) { .titan-grid { --cols: 4; } }
@media (min-width: 1040px) { .titan-grid, .boss-grid { --cols: 5; } }
.titan-card { cursor: pointer; }
/* faces swap only once the hype image has loaded (js/home.js adds .hype-ready) */
.titan-grid .titan-card:not(.hype-ready) .titan-art > .hype { opacity: 0; }
.titan-grid .titan-card:not(.hype-ready):hover .titan-art > .idle,
.titan-grid .titan-card:not(.hype-ready):focus-within .titan-art > .idle,
.titan-grid .titan-card.is-hype:not(.hype-ready) .titan-art > .idle { opacity: 1; }
/* a tapped card (touch) follows .is-hype only: touch browsers keep :hover on it and
   refocus it after the tap, so without this a second tap could not bring back the
   idle face. Keyboard focus (:focus-visible) still shows the hype face. */
.titan-grid .titan-card.tapped.hype-ready:not(.is-hype):not(:focus-visible) .titan-art > .hype { opacity: 0; }
.titan-grid .titan-card.tapped.hype-ready:not(.is-hype):not(:focus-visible) .titan-art > .idle { opacity: 1; }
.titan-ult { line-height: 1.3; }
.titan-ult-k { display: block; font: 600 .8125rem/1.2 var(--font-display); letter-spacing: .08em; }
@media (max-width: 559.98px) {
  .titan-grid .titan-name, .boss-grid .titan-name { font-size: min(1rem, 4.1vw); letter-spacing: .01em; }
  .titan-grid .pill { padding: .3em .6em; font-size: .8125rem; letter-spacing: .03em; }
  .titan-grid .titan-cap { padding: 9px 6px 12px; gap: 7px; }
  .titan-grid .titan-meta { gap: 6px; }
  .titan-grid .chip-el { padding: .3em .4em; }
  .titan-grid .chip-el img { margin: 0; }
  .titan-grid .chip-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.titan-note { max-width: 46rem; margin: clamp(22px, 3vw, 32px) auto 0; text-align: center; }
.titan-note a { white-space: nowrap; }

/* the element wheel */
.wheel-panel { margin-top: clamp(44px, 6vw, 76px); }
.wheel-grid { display: grid; gap: 24px; align-items: center; }
@media (min-width: 820px) {
  .wheel-grid { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 52px; }
}
.wheel-fig { width: 100%; max-width: 340px; margin-inline: auto; }
.wheel-svg { width: 100%; height: auto; }
.wheel-list { display: grid; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.wheel-list li { display: flex; align-items: center; gap: 12px; font: 500 1.1875rem/1.3 var(--font-display); }
.wheel-list b { font-weight: 600; }
.wheel-list img { flex: none; width: 40px; height: 40px; }
.wheel-txt > p + p { margin-top: 16px; }


/* ---------------------------------------------------------------------------
   5. Town
   --------------------------------------------------------------------------- */
.town-split { align-items: start; }
@media (min-width: 900px) {
  .town-split { grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); }
  .boss-split { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); }
}
.town-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.town-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px 10px 10px;
  border: 2px solid var(--panel-border);
  border-radius: 20px;
  background: var(--panel);
  box-shadow: 0 4px 0 var(--panel-shadow);
}
.town-row .building-art { flex: none; width: clamp(96px, 24vw, 150px); border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 2px var(--panel-border); }
.town-txt { min-width: 0; }
.town-txt p { margin-top: 4px; line-height: 1.45; }


.town-grass { padding: 4px 0 clamp(36px, 5vw, 52px); }
.town-grass .cluster { --gap: 14px 22px; text-align: center; }
.town-grass p { font-weight: 600; }


/* ---------------------------------------------------------------------------
   6. Boss Rush
   --------------------------------------------------------------------------- */
.boss-split { align-items: start; }
.boss-facts .checks > li + li { margin-top: 14px; }
.boss-row-title { margin: clamp(44px, 6vw, 68px) 0 20px; text-align: center; text-transform: uppercase; }
.boss-what { font-size: 1rem; color: var(--muted); }
.boss-grid .titan-cap { gap: 6px; }


/* ---------------------------------------------------------------------------
   7. Leagues: a ladder (a climbing row from 1000px)
   --------------------------------------------------------------------------- */
.never-fall {
  display: inline-block;
  margin-bottom: 4px;
  padding: .15em .55em;
  border-radius: 10px;
  background: var(--highlight);
  box-shadow: inset 0 0 0 2px var(--highlight-border);
  font-family: var(--font-display);
  font-weight: 600;
}
/* below 1000px: centred rows of 4 (3 under 380px, 6 from 560px), so the last
   row, which ends at LEGEND, sits in the middle */
.league-climb {
  --cols: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 6px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.league-climb .league { flex: 0 0 calc((100% - (var(--cols) - 1) * 6px) / var(--cols)); min-width: 0; }
.league-climb .league img { width: 54px; }
@media (max-width: 379.98px) {
  .league-climb { --cols: 3; }
}
.league-climb .league-name { overflow-wrap: normal; hyphens: manual; }
.league-top {
  padding: .3em .6em;
  border-radius: var(--radius-pill);
  background: var(--panel);
  box-shadow: inset 0 0 0 2px var(--highlight-border);
  font: 600 .8125rem/1 var(--font-display);
  letter-spacing: .05em;
  text-transform: uppercase;
}
@media (min-width: 560px) {
  .league-climb { --cols: 6; }
  .league-climb .league img { width: 64px; }
}
/* from 1000px: one climbing row. Every name box is two lines tall and LEGEND's
   TOP 50 chip hangs in its bottom margin, so each shield steps up exactly 8px. */
@media (min-width: 1000px) {
  .league-climb { flex-wrap: nowrap; align-items: flex-end; justify-content: space-between; gap: 6px; }
  .league-climb .league { position: relative; flex: 1 1 0; margin-bottom: calc(var(--i) * 8px); }
  .league-climb .league img { width: 70px; }
  .league-climb .league-name { min-height: 2.3em; }
  .league-climb .league-top { position: absolute; top: 100%; margin-top: 4px; }
}
.stars-title { margin: clamp(40px, 6vw, 60px) 0 18px; text-align: center; text-transform: uppercase; }
.star-card { text-align: center; }
.star-card .icon-disc { margin-inline: auto; }
.star-card .icon-disc img { width: 46px; height: 46px; object-fit: contain; }
.star-card h4 { text-transform: uppercase; letter-spacing: .03em; }
.star-card h4 + p { margin-top: 6px; }
.legend-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: fit-content;
  max-width: 100%;
  margin: clamp(26px, 4vw, 36px) auto 0;
  padding: 10px 22px 10px 14px;
  border: 2px solid var(--highlight-border);
  border-radius: 20px;
  background: var(--highlight);
  box-shadow: 0 4px 0 var(--highlight-border);
  font: 500 1.125rem/1.35 var(--font-display);
}
.legend-line img { flex: none; width: 42px; height: auto; }


/* ---------------------------------------------------------------------------
   8. Card packs + fair play
   --------------------------------------------------------------------------- */
.fair-grid { align-items: stretch; }
.fair-card .checks > li + li { margin-top: 14px; }
.pack-tiers { display: grid; gap: 10px; margin: 16px 0; padding: 0; list-style: none; }
@media (min-width: 480px) { .pack-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pack-tiers li { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: var(--radius); background: var(--well); }
.pk-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 80px;
  height: 48px;
  padding: 0 4px;
  border: 2px solid var(--keyline);
  border-radius: 12px;
  background: var(--pk);
  box-shadow: 0 3px 0 rgba(43, 47, 74, .22);
  color: var(--ink);
  font: 600 1.25rem/1 var(--font-display);
}
.pk-1 { --pk: var(--r-normal); }
.pk-10 { --pk: var(--r-rare); }
.pk-100 { --pk: #BB7AFF; }
.pk-1000 { --pk: var(--r-mythic); border-color: transparent; background: linear-gradient(var(--r-mythic), var(--r-mythic)) padding-box, var(--rainbow-line) border-box; }
.pk-cards { font-size: 1rem; line-height: 1.3; font-weight: 600; }


/* ---------------------------------------------------------------------------
   9. Screenshots
   --------------------------------------------------------------------------- */
.shots-gallery { --item: min(64vw, 250px); }
.shots-gallery > .shot { max-width: none; margin: 0; }


/* ---------------------------------------------------------------------------
   10-11. FAQ, final call to action
   --------------------------------------------------------------------------- */

.final-cta { padding-bottom: 0; }
.final-stage { --s: clamp(104px, 31vw, 230px); margin-top: clamp(20px, 4vw, 40px); }
.final-stage .ht-emberkit { --k: .8; }
.final-stage .ht-aquolotl { --k: .9; }
.final-stage .ht-nimbeak { --k: .88; }
.final-stage .ht-pebblin { --k: .8; }
.final-lede { max-width: 34rem; margin: 12px auto 0; }
.final-btn { display: flex; justify-content: center; margin-top: 24px; }

/* the narrowest phones: smaller pictures beside the text */
@media (max-width: 379.98px) {
  .board-fig { width: 84px; padding: 6px; }
  .town-row { gap: 12px; padding-right: 12px; }
  .town-row .building-art { width: 84px; }
}