/* Block Blast Online v6.18.26 — canonical shared design system.
 * Loaded after page bundles on purpose: page bundles own unique layouts/gameplay,
 * while this file owns site-wide geometry, spacing, controls, shared cards,
 * header/footer and responsive rhythm. Keep page-specific patches out of here.
 */

:root {
  --bbo-shell: 1140px;
  --bbo-reading: 720px;
  --bbo-gutter: 16px;

  --bbo-space-1: 4px;
  --bbo-space-2: 8px;
  --bbo-space-3: 12px;
  --bbo-space-4: 16px;
  --bbo-space-5: 24px;
  --bbo-space-6: 32px;
  --bbo-space-7: 48px;
  --bbo-space-8: 64px;

  --bbo-radius-control: 10px;
  --bbo-radius-card: 12px;
  --bbo-radius-panel: 16px;
  --bbo-radius-pill: 999px;

  --bbo-control-height: 44px;
  --bbo-border: #dce3eb;
  --bbo-page-bg: #f2f4f7;
  --bbo-panel-bg: #ffffff;
  --bbo-dark-panel: #101f3b;
  --bbo-dark-panel-border: #2d9fe8;
  --bbo-shadow-card: 0 8px 24px rgba(24,39,65,.06);

  /* Backward-compatible aliases used by the runtime bundles. */
  --shell: var(--bbo-shell);
  --site-content-rail: var(--bbo-shell);
  --site-frame-radius: var(--bbo-radius-card);
  --site-frame-border: var(--bbo-border);
  --site-page-bg: var(--bbo-page-bg);
  --site-dark-panel: var(--bbo-dark-panel);
  --site-dark-panel-border: var(--bbo-dark-panel-border);
  --home-shell: var(--bbo-shell);
  --home-frame-radius: var(--bbo-radius-card);
  --home-frame-border: var(--bbo-border);
}

/* Global alignment ------------------------------------------------------- */
.shell,
.site-header .shell,
.site-footer .shell {
  width: min(calc(100% - (var(--bbo-gutter) * 2)), var(--bbo-shell));
  max-width: var(--bbo-shell);
  margin-inline: auto;
}

.content-layout,
.article-shell,
.guide-shell,
.solver-hero > .shell,
.solver-workspace-section > .shell,
.solver-info-section > .shell,
.solver-related-section > .shell,
.solver-main > .home-section > .shell {
  width: min(calc(100% - (var(--bbo-gutter) * 2)), var(--bbo-shell));
  max-width: var(--bbo-shell);
  margin-inline: auto;
}

/* Header ---------------------------------------------------------------- */
.site-header__inner,
.home .site-header__inner {
  min-height: 60px;
  gap: var(--bbo-space-4);
}
.custom-logo-link { display: inline-flex; align-items: center; min-width: 0; }
.site-header .custom-logo { display: block; width: auto; max-width: min(280px,45vw); max-height: 34px; }
.brand__link { gap: var(--bbo-space-2); }
.site-nav__list { gap: var(--bbo-space-5); }
.nav-toggle { min-height: var(--bbo-control-height); border-radius: var(--bbo-radius-control); }

/* Shared controls -------------------------------------------------------- */
.button {
  min-height: var(--bbo-control-height);
  padding: 9px var(--bbo-space-4);
  border-radius: var(--bbo-radius-control);
}
.leaderboard-toolbar select,
.leaderboard-toolbar input,
.leaderboard-date input,
.shape-db-toolbar input,
.solver-strategy-field select,
.data-tool input,
.game-leaderboard-submit input,
.player-identity-edit input {
  min-height: var(--bbo-control-height);
  border-radius: var(--bbo-radius-control);
}
.leaderboard-mode-tabs,
.leaderboard-period-tabs,
.practice-mode-tabs button,
.shape-db-filters button,
.leaderboard-season-tabs button {
  border-radius: var(--bbo-radius-control);
}
.leaderboard-season-tabs button { border-radius: var(--bbo-radius-pill); }

/* Shared page rhythm ----------------------------------------------------- */
.content-main:not(.home-main),
.guide-main,
.solver-main,
.traffic-main {
  background: var(--bbo-page-bg);
}
.content-main:not(.home-main) { padding: var(--bbo-space-6) 0 var(--bbo-space-8); }
.home-main .home-section { padding: var(--bbo-space-7) 0; }
.home-main .home-section--tight { padding: var(--bbo-space-4) 0 var(--bbo-space-2); }
.home-main .section-heading,
.section-heading { margin-bottom: var(--bbo-space-5); }
.home-main .content-grid { gap: var(--bbo-space-5); }
.home-main .tip-grid,
.home-main .guide-link-grid,
.home-main .post-grid--home { gap: var(--bbo-space-3); }
.traffic-hero { padding: var(--bbo-space-7) 0 var(--bbo-space-6); }
.traffic-hero__inner { gap: var(--bbo-space-6); }
.traffic-hero h1 { margin: var(--bbo-space-1) 0 var(--bbo-space-3); }
.traffic-actions { gap: var(--bbo-space-2); margin-top: var(--bbo-space-4); }
.traffic-section { padding: var(--bbo-space-7) 0; }
.traffic-content-grid,
.analyzer-layout,
.daily-dashboard,
.practice-layout { gap: var(--bbo-space-5); }
.leaderboard-shell,
.data-shell { gap: var(--bbo-space-5); }

/* Breadcrumbs always follow the same outer rail and vertical rhythm. */
.breadcrumbs,
.content-main:not(.home-main) .breadcrumbs,
.solver-main .breadcrumbs,
.solver-hero__breadcrumbs .breadcrumbs {
  margin: 0 0 var(--bbo-space-4);
  font-size: 12px;
  line-height: 1.45;
}
.breadcrumbs ol,
.breadcrumbs li { gap: var(--bbo-space-2); }

/* Shared surfaces -------------------------------------------------------- */
.content-card,
.post-card,
.guide-link-card,
.traffic-card,
.traffic-tool-card,
.analyzer-editor-card,
.analyzer-results-card,
.daily-today-card,
.daily-history-card,
.leaderboard-card,
.practice-game-card,
.practice-coach-card,
.data-tool,
.data-stat,
.solver-panel,
.solver-results,
.solver-placeholder {
  border-radius: var(--bbo-radius-panel);
  border-color: var(--bbo-border);
}
.content-card,
.traffic-card,
.traffic-tool-card,
.analyzer-editor-card,
.analyzer-results-card,
.daily-today-card,
.daily-history-card,
.leaderboard-card,
.practice-game-card,
.practice-coach-card,
.data-tool,
.solver-panel,
.solver-results {
  box-shadow: var(--bbo-shadow-card);
}

.content-card,
.traffic-card,
.traffic-tool-card,
.analyzer-editor-card,
.analyzer-results-card,
.daily-today-card,
.daily-history-card,
.leaderboard-card,
.practice-game-card,
.practice-coach-card,
.data-tool {
  padding: var(--bbo-space-5);
}

.post-card,
.guide-link-card { border-radius: var(--bbo-radius-card); }
.content-layout .post-card__body,
.post-grid--related .post-card__body { padding: var(--bbo-space-4); }

/* Major page headers share one geometry; reading copy stays intentionally narrow. */
.archive-header,
.archive-header--guides,
.solver-hero__inner {
  border-radius: var(--bbo-radius-panel);
}
.archive-header,
.archive-header--guides {
  margin-bottom: var(--bbo-space-5);
  padding: var(--bbo-space-5);
}
.article,
.guide-article {
  width: 100%;
  border-radius: var(--bbo-radius-panel);
  border-color: var(--bbo-border);
  padding: var(--bbo-space-5) var(--bbo-space-5) var(--bbo-space-6);
}
.article__header,
.guide-hero {
  margin: calc(var(--bbo-space-5) * -1) calc(var(--bbo-space-5) * -1) var(--bbo-space-5);
  padding: var(--bbo-space-5);
  border-radius: var(--bbo-radius-panel) var(--bbo-radius-panel) 0 0;
}
.article__content,
.article-nav,
.related-guides,
.article-back,
.guide-summary,
.strategy-grid,
.guide-content,
.guide-custom-content,
.guide-cta { max-width: var(--bbo-reading); margin-inline: auto; }
.article__content > :where(p,ul,ol,blockquote),
.guide-content > :where(p,ul,ol,blockquote),
.guide-custom-content > :where(p,ul,ol,blockquote) { margin-bottom: var(--bbo-space-4); }
.article__content > h2,
.guide-content > h2,
.guide-custom-content > h2 { margin-top: var(--bbo-space-7); margin-bottom: var(--bbo-space-4); }
.article__content > h3,
.guide-content > h3,
.guide-custom-content > h3 { margin-top: var(--bbo-space-6); margin-bottom: var(--bbo-space-3); }
.related-guides { margin-top: var(--bbo-space-6); }
.article-back { margin-top: var(--bbo-space-5); }

/* Home components -------------------------------------------------------- */
/* Localized-home completeness: these grids previously had spacing only,
 * so translated pages fell back to ordinary block flow. Keep them as
 * first-class components in the shared design system. */
.home-feature-grid,
.quick-step-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--bbo-space-4);
  margin-top: var(--bbo-space-5);
}
.home-feature-grid article,
.quick-step-grid article {
  min-width: 0;
  height: 100%;
  padding: var(--bbo-space-4);
  border: 1px solid var(--bbo-border);
  border-radius: var(--bbo-radius-card);
  background: #f8fafc;
}
.home-feature-grid h3,
.quick-step-grid h3 { margin:0 0 var(--bbo-space-2); font-size:18px; line-height:1.3; }
.home-feature-grid p,
.quick-step-grid p { margin:0; color:var(--muted); line-height:1.6; }
.quick-step-grid article > span {
  display:inline-grid;
  place-items:center;
  min-width:34px;
  height:34px;
  margin-bottom:var(--bbo-space-3);
  padding-inline:8px;
  border-radius:var(--bbo-radius-control);
  background:#e8f4fd;
  color:#126ebc;
  font-size:12px;
  font-weight:900;
}

/* The main localized overview/how-to panels use the same visual hierarchy
 * as English instead of a single wide slab of text. */
.home-main .localized-home-panel {
  gap: var(--bbo-space-5);
  padding: var(--bbo-space-5);
  border: 1px solid var(--bbo-border);
  border-radius: var(--bbo-radius-panel);
  background: var(--bbo-panel-bg);
  box-shadow: var(--bbo-shadow-card);
}
.home-main .localized-home-panel .section-copy { min-width:0; }
.home-main .localized-home-panel .section-copy h2 { max-width:16ch; }
.home-main .localized-home-panel .section-copy p:not(.eyebrow) { max-width:66ch; }
.home-main .localized-home-panel .home-side-panel {
  padding:var(--bbo-space-4);
  border:1px solid var(--bbo-border);
  border-radius:var(--bbo-radius-card);
  background:#f8fafc;
}
.home-main .localized-home-features .home-value-grid--three {
  grid-template-columns:1fr;
  gap:var(--bbo-space-3);
  border:0;
}
.home-main .localized-home-features .home-value-grid--three li,
.home-main .localized-home-features .home-value-grid--three li:nth-child(odd) {
  display:grid;
  gap:var(--bbo-space-1);
  padding:var(--bbo-space-4);
  border:1px solid var(--bbo-border);
  border-radius:var(--bbo-radius-card);
  background:#fff;
}
.home-main .localized-home-features .home-value-grid--three strong { font-size:16px; }
.home-main .localized-home-features .home-value-grid--three span { font-size:13.5px; line-height:1.55; }
.home-main .localized-home-panel .steps-card--home li,
.home-main .localized-home-panel .steps-card--home li:last-child {
  margin:0 0 var(--bbo-space-3);
  padding:var(--bbo-space-4);
  border:1px solid var(--bbo-border);
  border-radius:var(--bbo-radius-card);
  background:#fff;
}
.home-main .localized-home-panel .steps-card--home li:last-child { margin-bottom:0; }
.home-main .localized-home-panel .steps-card--home li > span,
.home-main .localized-home-panel .steps-card--home li:nth-child(2) > span,
.home-main .localized-home-panel .steps-card--home li:nth-child(3) > span {
  width:38px;
  height:38px;
  border-radius:var(--bbo-radius-control);
  background:#e8f4fd;
  color:#126ebc;
}

.localized-guides-panel {
  padding:var(--bbo-space-5);
  border:1px solid var(--bbo-border);
  border-radius:var(--bbo-radius-panel);
  background:#fff;
  box-shadow:var(--bbo-shadow-card);
}
.localized-guides-panel__head { align-items:flex-end; gap:var(--bbo-space-5); }
.localized-guides-panel__head > div { max-width:760px; }
.localized-guides-panel__intro { margin:var(--bbo-space-3) 0 0; color:var(--muted); line-height:1.65; }
.localized-guide-links { margin-top:0; }
.localized-guide-links .guide-link-card { min-height:100%; }
.localized-guide-links .guide-link-card small {
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}

/* Small completeness fixes found by the template/class audit. */
.breadcrumbs__sep { color:#94a3b8; }
.content-card--wide { width:100%; }
.content-card { padding: clamp(24px,4vw,32px); }
.home-section--traffic-tools .traffic-tool-grid { grid-template-columns: repeat(12,minmax(0,1fr)); gap: var(--bbo-space-4); }
.home-section--traffic-tools .traffic-tool-card { grid-column: span 3; min-height: 100%; display: flex; flex-direction: column; }
.home-section--traffic-tools .traffic-tool-card:nth-child(n+5) { grid-column: span 4; }
.home-section--traffic-tools .traffic-tool-card > strong { margin-top: auto; padding-top: var(--bbo-space-3); }
.home-section--traffic-tools .traffic-tool-card__icon { margin-bottom: var(--bbo-space-3); border-radius: var(--bbo-radius-card); }
.home-main .steps-card { padding: var(--bbo-space-2) var(--bbo-space-4); border-radius: var(--bbo-radius-panel); }
.home-main .steps-card li { gap: var(--bbo-space-4); padding: var(--bbo-space-4) 0; }
.home-main .solver-banner { padding: var(--bbo-space-5); border-radius: var(--bbo-radius-panel); }

/* Solver components ------------------------------------------------------ */
.solver-hero { padding: var(--bbo-space-6) 0 var(--bbo-space-3); }
.solver-hero__inner { padding: var(--bbo-space-5); }
.solver-workspace-section { padding: var(--bbo-space-4) 0 var(--bbo-space-2); }
.solver-app { gap: var(--bbo-space-4); }
.solver-panel,
.solver-results { padding: var(--bbo-space-5); }
.solver-panel__heading { gap: var(--bbo-space-3); margin-bottom: var(--bbo-space-4); }
.solver-steps,
.solver-board-wrap,
.solver-piece-slot,
.solver-piece-library,
.solver-screenshot-import,
.solver-result-card,
.solver-final-board,
.solver-strategy select { border-radius: var(--bbo-radius-card); }
.solver-piece-library-wrap {
  margin-top: var(--bbo-space-4);
  padding: var(--bbo-space-4);
  border: 1px solid var(--bbo-border);
  border-radius: var(--bbo-radius-panel);
  background: #f8fbff;
}
.solver-piece-library-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--bbo-space-3); margin-bottom:var(--bbo-space-3); }
.solver-piece-library-head strong { font-size:.92rem; color:var(--text,#122b59); }
.solver-piece-library-head span { color:var(--muted,#60759a); font-size:.78rem; line-height:1.4; text-align:right; }
.solver-strategy-field {
  display:grid;
  grid-template-columns:minmax(120px,.55fr) minmax(180px,1fr);
  gap:var(--bbo-space-3);
  align-items:center;
  margin-top:var(--bbo-space-4);
  padding:var(--bbo-space-4);
  border:1px solid var(--bbo-border);
  border-radius:var(--bbo-radius-panel);
  background:#fff;
}
.solver-strategy-field label { font-size:.84rem; font-weight:800; color:var(--text,#122b59); }

/* Traffic / retention ---------------------------------------------------- */
.traffic-main,.leaderboard-main,.practice-main,.data-main,.season-page,.shape-database-main { min-width:0; max-width:100%; }
.traffic-main .shell,.leaderboard-main .shell,.practice-main .shell,.data-main .shell,.season-page .shell { min-width:0; }
.traffic-score-card { padding:var(--bbo-space-5); border-radius:var(--bbo-radius-panel); }
.leaderboard-table-wrap { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--bbo-radius-card); }
.leaderboard-card__head { gap:var(--bbo-space-4); margin-bottom:var(--bbo-space-4); }
.practice-mode-tabs { gap:var(--bbo-space-2); margin-bottom:var(--bbo-space-4); }
.practice-hud { gap:var(--bbo-space-2); margin-bottom:var(--bbo-space-4); }
.practice-hud > div,
.practice-coach-metrics > div,
.analyzer-metrics > div,
.daily-today-stats > div,
.data-percentile-result article,
.data-calc-result > div { border-radius:var(--bbo-radius-card); }
.practice-objective,
.practice-piece,
.daily-day,
.daily-mission,
.daily-perfect-badge,
.analyzer-insight,
.analyzer-danger-item { border-radius:var(--bbo-radius-card); }
.player-badge-card,.player-season-card { background:linear-gradient(180deg,#fff,#f8fbff); }
.player-badge-card { border-color:#e6d9a6; }
.player-season-card { border-color:#cfe4f8; }
.season-page .season-switch .button { white-space:nowrap; }
.shape-database-main .guide-article { min-width:0; }

/* Footer ---------------------------------------------------------------- */
.site-footer {
  margin-top: var(--bbo-space-7);
  padding: 0;
  border-top: 1px solid #1e3550;
  background: linear-gradient(180deg,#081525 0%,#0b1a2d 100%);
  color:#fff;
}
.site-footer__main {
  display:grid;
  grid-template-columns:minmax(260px,330px) minmax(0,1fr);
  gap:var(--bbo-space-7);
  align-items:start;
  padding:var(--bbo-space-6) 0 var(--bbo-space-5);
}
.site-footer__brand-block { min-width:0; }
.footer-brand { display:inline-flex; align-items:center; gap:var(--bbo-space-3); color:#fff; font-size:24px; font-weight:850; line-height:1.1; text-decoration:none; }
.footer-brand__mark { border-radius:var(--bbo-radius-control); }
.site-footer .custom-logo-link { display:inline-flex; align-items:center; max-width:100%; }
.site-footer .custom-logo { display:block; width:auto; max-width:min(280px,100%); max-height:36px; }
.site-footer__tagline { max-width:32rem; margin:var(--bbo-space-3) 0 0; color:#a8bad1; font-size:14px; line-height:1.65; }
.site-footer__links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--bbo-space-5); align-items:start; }
.footer-group { min-width:0; }
.footer-group h2 { margin:0 0 var(--bbo-space-3); color:#eef5fc; font-size:12px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.footer-group ul { display:grid; gap:var(--bbo-space-2); margin:0; padding:0; list-style:none; }
.footer-group li { margin:0; }
.footer-group a { display:inline-block; color:#b6c7d8; font-size:13px; font-weight:650; line-height:1.45; text-decoration:none; }
.footer-group a:hover,.footer-group a:focus-visible { color:#fff; }
.site-footer__language {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--bbo-space-5);
  margin-top:0;
  padding:var(--bbo-space-4) 0;
  border-top:1px solid #1d3249;
  border-bottom:1px solid #1d3249;
  background:transparent;
}
.site-footer__language-copy { display:grid; gap:var(--bbo-space-1); align-items:start; min-width:0; }
.site-footer__language-kicker { color:#87a0bc; font-size:11px; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.site-footer__language-copy strong { color:#f1f7ff; font-size:15px; font-weight:800; line-height:1.2; }
.site-footer__language-copy p { margin:0; max-width:44rem; color:#9eb2cb; font-size:13px; line-height:1.55; }
.site-footer__language .language-switcher { display:flex; align-items:center; gap:var(--bbo-space-2); margin:0; min-width:0; }
.site-footer__language .language-switcher__field { position:relative; display:block; min-width:240px; }
.site-footer__language .language-switcher select {
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-height:var(--bbo-control-height);
  padding:9px 40px 9px 12px;
  border:1px solid #355171;
  border-radius:var(--bbo-radius-control);
  background:#10243e;
  color:#f0f6fc;
  font-size:13px;
  font-weight:750;
  line-height:1.2;
  cursor:pointer;
}
.site-footer__language .language-switcher select:hover { border-color:#55799e; background:#142b49; }
.site-footer__language .language-switcher select:focus-visible { outline:3px solid rgba(80,155,230,.22); outline-offset:2px; border-color:#5b8abd; }
.site-footer__language .language-switcher__chevron { position:absolute; right:14px; top:50%; width:8px; height:8px; margin-top:-6px; border-right:2px solid #8eaccb; border-bottom:2px solid #8eaccb; transform:rotate(45deg); pointer-events:none; }
.site-footer__language .language-switcher__submit { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-footer__note { padding:var(--bbo-space-3) 0; border:0; }
.site-footer__note p { max-width:none; margin:0; color:#7f95af; font-size:12px; line-height:1.55; }
.site-footer__bottom { display:flex; align-items:center; justify-content:space-between; gap:var(--bbo-space-4); margin:0; padding:var(--bbo-space-3) 0 max(var(--bbo-space-4),env(safe-area-inset-bottom)); border-top:1px solid #1d3249; color:#91a6bf; font-size:12px; }
.site-footer__copyright { white-space:nowrap; }
.site-footer__legal { display:flex; align-items:center; justify-content:flex-end; gap:var(--bbo-space-3); flex-wrap:wrap; }
.site-footer__legal a { color:#b9cae0; text-decoration:none; }
.site-footer__legal a:hover,.site-footer__legal a:focus-visible { color:#fff; }

/* RTL + motion/performance safeguards ----------------------------------- */
.bbo-rtl #bbo-board,.bbo-rtl #bbo-pieces,.bbo-rtl .game-board,.bbo-rtl .piece-tray { direction:ltr; }
.bbo-rtl .content-card,.bbo-rtl .tip-card,.bbo-rtl .faq-wrap,.bbo-rtl .game-heading { text-align:right; }
.bbo-rtl .faq-wrap summary { padding-right:0; padding-left:30px; }
.bbo-rtl .faq-wrap summary::after { right:auto; left:0; }
.bbo-rtl .site-footer__language .language-switcher select { padding-right:12px; padding-left:40px; }
.bbo-rtl .site-footer__language .language-switcher__chevron { right:auto; left:14px; }

.traffic-tool-card,.guide-link-card,.post-card,.content-card,.traffic-card { transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease; }
.traffic-tool-card:focus-visible,.guide-link-card:focus-visible { outline:3px solid rgba(22,143,231,.28); outline-offset:3px; }
@media (hover:hover) { .traffic-card:hover,.content-card:hover { border-color:#c9dced; } }
.arcade-topbar { justify-content:flex-end; }
.arcade-controls { margin-left:auto; }
.arcade-power-button--restart .arcade-power-button__disc { color:#7047de; }

@supports (content-visibility:auto) {
  .site-footer { content-visibility:auto; contain-intrinsic-size:auto 420px; }
}

@media (max-width:1020px) {
  .home-section--traffic-tools .traffic-tool-card,
  .home-section--traffic-tools .traffic-tool-card:nth-child(n+5) { grid-column:span 6; }
}

@media (max-width:980px) {
  .site-footer__main { grid-template-columns:1fr; gap:var(--bbo-space-5); }
  .site-footer__language { grid-template-columns:1fr; align-items:start; }
}

@media (max-width:760px) {
  :root { --bbo-gutter:12px; }
  .site-header { -webkit-backdrop-filter:none; backdrop-filter:none; }
  .site-header__inner,.home .site-header__inner { min-height:58px; gap:var(--bbo-space-3); }
  .site-header .custom-logo { max-height:32px; max-width:min(230px,58vw); }
  .site-nav { left:var(--bbo-gutter); right:var(--bbo-gutter); border-radius:var(--bbo-radius-card); }
  .site-nav__list a { padding:var(--bbo-space-3); }

  .content-main:not(.home-main) { padding:20px 0 var(--bbo-space-7); }
  .home-main .home-section { padding:var(--bbo-space-6) 0; }
  .home-main .home-section--tight { padding:var(--bbo-space-3) 0 var(--bbo-space-1); }
  .traffic-hero { padding:var(--bbo-space-6) 0 var(--bbo-space-5); }
  .traffic-hero__inner { gap:var(--bbo-space-5); }
  .traffic-section { padding:var(--bbo-space-6) 0; }
  .home-main .content-grid,
  .traffic-content-grid,
  .analyzer-layout,
  .daily-dashboard,
  .practice-layout { gap:var(--bbo-space-4); }

  .content-card,
  .traffic-card,
  .traffic-tool-card,
  .analyzer-editor-card,
  .analyzer-results-card,
  .daily-today-card,
  .daily-history-card,
  .leaderboard-card,
  .practice-game-card,
  .practice-coach-card,
  .data-tool,
  .solver-panel,
  .solver-results { padding:var(--bbo-space-4); border-radius:var(--bbo-radius-panel); }

  .article,.guide-article { margin:0; padding:var(--bbo-space-4) var(--bbo-space-4) var(--bbo-space-5); border-radius:var(--bbo-radius-panel); }
  .article__header,.guide-hero { margin:calc(var(--bbo-space-4) * -1) calc(var(--bbo-space-4) * -1) var(--bbo-space-5); padding:var(--bbo-space-4); border-radius:var(--bbo-radius-panel) var(--bbo-radius-panel) 0 0; }
  .archive-header,.archive-header--guides,.solver-hero__inner { padding:var(--bbo-space-4); border-radius:var(--bbo-radius-panel); }
  .article__content > h2,.guide-content > h2,.guide-custom-content > h2 { margin-top:var(--bbo-space-6); }

  .home-feature-grid,.quick-step-grid { grid-template-columns:1fr; }
  .home-main .localized-home-panel { padding:var(--bbo-space-4); gap:var(--bbo-space-4); }
  .home-main .localized-home-panel .section-copy h2,
  .home-main .localized-home-panel .section-copy p:not(.eyebrow) { max-width:none; }
  .localized-guides-panel { padding:var(--bbo-space-4); }
  .localized-guides-panel__head { align-items:flex-start; }
  .solver-piece-library-head { display:block; }
  .solver-piece-library-head span { display:block; margin-top:var(--bbo-space-1); text-align:left; }
  .solver-strategy-field { grid-template-columns:1fr; }
  .solver-hero { padding:var(--bbo-space-5) 0 var(--bbo-space-2); }
  .solver-panel,.solver-results { padding:var(--bbo-space-4); }

  .site-footer { margin-top:var(--bbo-space-6); }
  .site-footer__main { gap:var(--bbo-space-5); padding:var(--bbo-space-5) 0 var(--bbo-space-4); }
  .site-footer .custom-logo { max-height:34px; }
  .footer-brand { font-size:21px; }
  .site-footer__tagline { font-size:13px; line-height:1.6; }
  .site-footer__links { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--bbo-space-5) var(--bbo-space-4); }
  .site-footer__language { gap:var(--bbo-space-3); padding:var(--bbo-space-4) 0; }
  .site-footer__language .language-switcher,.site-footer__language .language-switcher__field { width:100%; min-width:0; }
  .site-footer__bottom { flex-direction:column; align-items:flex-start; gap:var(--bbo-space-2); }
  .site-footer__legal { justify-content:flex-start; }
}

@media (max-width:620px) {
  .home-section--traffic-tools .traffic-tool-card,
  .home-section--traffic-tools .traffic-tool-card:nth-child(n+5) { grid-column:1/-1; }
  .home-section--traffic-tools .traffic-tool-grid { gap:var(--bbo-space-3); }
  .leaderboard-toolbar { max-width:100%; }
  .leaderboard-toolbar > * { min-width:0; }
}

@media (max-width:460px) {
  .site-footer__links { grid-template-columns:1fr; gap:var(--bbo-space-4); }
  .site-footer__language-copy strong { font-size:14px; }
  .site-footer__language-copy p { font-size:12px; }
  .site-footer__note p,.site-footer__bottom { font-size:12px; }
}

@media (prefers-reduced-motion:reduce) {
  .traffic-tool-card,.guide-link-card,.post-card,.content-card,.traffic-card { transition:none; }
}

/* Intentional width exception: the site rail stays 1140px, but the interactive
 * game surface remains compact enough for comfortable pointer/touch travel. */
.game-section--arcade > .game-shell,
.traffic-game-page .game-shell {
  width: min(calc(100% - (var(--bbo-gutter) * 2)), 840px);
  max-width: 840px;
  margin-inline: auto;
}
@media (max-width:760px) {
  .game-section--arcade > .game-shell,
  .traffic-game-page .game-shell { width:100%; max-width:none; }
}


/* Mobile containment contract ------------------------------------------
 * v6.18.1: keep every public surface inside the viewport without masking
 * component bugs. Wide data tables remain horizontally scrollable inside
 * their own wrappers; ordinary content, controls and translated labels wrap.
 */
html,
body {
  max-width: 100%;
}

:where(
  main, section, article, aside, header, footer, nav, form, fieldset, figure,
  .shell, .content-layout, .article-shell, .guide-shell,
  .content-grid, .post-grid, .guide-link-grid, .tip-grid,
  .traffic-content-grid, .traffic-tool-grid, .analyzer-layout,
  .daily-dashboard, .leaderboard-shell, .practice-layout,
  .player-dashboard, .season-grid, .shape-db-layout,
  .data-shell, .data-grid-two, .data-stat-grid,
  .solver-app, .solver-panel, .solver-results, .solver-piece-library-wrap,
  .content-card, .traffic-card, .traffic-tool-card, .leaderboard-card,
  .practice-game-card, .practice-coach-card, .daily-today-card,
  .daily-history-card, .analyzer-editor-card, .analyzer-results-card,
  .data-tool, .post-card, .guide-link-card,
  .site-header__inner, .site-footer__main, .site-footer__language,
  .site-footer__bottom, .footer-group,
  .section-heading, .leaderboard-toolbar, .leaderboard-card__head,
  .data-section-head, .related-guides__head, .related-questions__head,
  .guide-pathways__head, .traffic-actions, .player-identity-card__head,
  .practice-objective, .challenge-target
) {
  min-width: 0;
  max-width: 100%;
}

:where(img, video, canvas, iframe, embed, object) {
  max-width: 100%;
}
iframe,
embed,
object { width: 100%; }

:where(input, textarea, select, button) {
  min-width: 0;
  max-width: 100%;
}

:where(
  .article__content, .guide-content, .guide-custom-content,
  .archive-header, .archive-header--guides, .solver-hero__inner,
  .content-card, .traffic-card, .traffic-tool-card,
  .leaderboard-card, .practice-game-card, .practice-coach-card,
  .daily-today-card, .daily-history-card, .analyzer-editor-card,
  .analyzer-results-card, .data-tool, .post-card__body,
  .guide-link-card, .localized-home-panel, .localized-guides-panel,
  .site-footer
) :where(h1, h2, h3, h4, p, li, a, strong, small, code, span) {
  overflow-wrap: anywhere;
}

:where(.entry-content, .article__content, .guide-content, .guide-custom-content) pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
:where(.entry-content, .article__content, .guide-content, .guide-custom-content) :not(pre) > code {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Wide tables are allowed to be wider than the phone, but only inside an
 * explicit scroll container so they never enlarge the page itself. */
:where(.leaderboard-table-wrap, .guide-table-wrap, .comparison-table-wrap, .data-sim-table) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
:where(.leaderboard-table-wrap, .guide-table-wrap, .comparison-table-wrap, .data-sim-table) table {
  max-width: none;
}

.player-id-line code {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  /* Translated labels must be allowed to wrap instead of forcing a wider
   * grid/flex track. */
  .button,
  .traffic-actions .button,
  .home-panel-actions .button,
  .guide-hero__actions .button,
  .guide-cta__actions .button,
  .practice-actions .button,
  .player-share-actions .button,
  .season-switch .button,
  .game-dialog__actions .button {
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .section-heading,
  .leaderboard-card__head,
  .data-section-head,
  .related-guides__head,
  .player-identity-card__head,
  .practice-objective {
    flex-wrap: wrap;
  }

  .leaderboard-toolbar {
    width: 100%;
    align-items: stretch;
  }
  .leaderboard-toolbar > *,
  .leaderboard-scope,
  .leaderboard-date {
    min-width: 0;
    max-width: 100%;
  }
  .leaderboard-scope,
  .leaderboard-date,
  .player-country-rank {
    flex-wrap: wrap;
  }
  .leaderboard-scope select,
  .leaderboard-date input {
    width: 100%;
  }

  .leaderboard-mode-tabs,
  .leaderboard-period-tabs,
  .leaderboard-season-tabs,
  .shape-db-filters,
  .season-switch {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .practice-objective > strong,
  .daily-mission b,
  .season-page .season-switch .button,
  .footer-group a,
  .site-footer__copyright {
    white-space: normal;
  }

  .game-toolbar,
  .game-toolbar > *,
  .game-mode-bar,
  .game-mode-switch,
  .challenge-target,
  .game-dialog__actions,
  .game-dialog__stats {
    min-width: 0;
    max-width: 100%;
  }
  .game-toolbar .button,
  .game-mode-button {
    min-width: 0;
    max-width: 100%;
  }
  .game-mode-button,
  .related-guides__head .text-link {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .solver-board-toolbar,
  .solver-screenshot-toolbar,
  .solver-screenshot-actions,
  .solver-strategy-field,
  .solver-piece-library,
  .solver-result-card,
  .solver-final-board {
    min-width: 0;
    max-width: 100%;
  }

  .site-footer__language .language-switcher,
  .site-footer__language .language-switcher__field,
  .site-footer__language select {
    max-width: 100%;
  }
}

@media (max-width: 620px) {
  /* Two footer columns become cramped in longer locales; one column keeps the
   * footer readable and removes the most common translated-link overflow. */
  .site-footer__links { grid-template-columns: 1fr; gap: var(--bbo-space-4); }
  .footer-group {
    grid-template-columns: minmax(0,1fr);
    gap: var(--bbo-space-2);
  }
  .footer-group ul { gap: var(--bbo-space-2) var(--bbo-space-3); }

  .leaderboard-card__head,
  .data-section-head,
  .related-guides__head {
    align-items: flex-start;
  }
}


/* v6.18.3 — editorial authority + contextual internal links ---------------- */
.content-review-bar,
.article-trust-panel,
.context-links,
.authority-check-grid {
  max-width: var(--bbo-reading);
  margin-inline: auto;
}
.content-review-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bbo-space-4);
  margin-top: calc(var(--bbo-space-2) * -1);
  margin-bottom: var(--bbo-space-5);
  padding: var(--bbo-space-3) var(--bbo-space-4);
  border: 1px solid var(--bbo-border);
  border-radius: var(--bbo-radius-control);
  background: var(--surface, #fff);
}
.content-review-bar__main { min-width:0; display:flex; flex-wrap:wrap; gap:var(--bbo-space-1) var(--bbo-space-3); align-items:baseline; }
.content-review-bar__main strong { font-size:14px; }
.content-review-bar__main span { color:var(--muted); font-size:14px; line-height:1.5; }
.content-review-bar > a { flex:0 0 auto; font-weight:700; text-decoration:none; }

.article-trust-panel {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--bbo-space-5);
  align-items:center;
  margin-top:var(--bbo-space-6);
  padding:var(--bbo-space-5);
  border:1px solid var(--bbo-border);
  border-radius:var(--bbo-radius-card);
  background:#f8fafc;
}
.article-trust-panel h2 { margin:0 0 var(--bbo-space-2); font-size:20px; }
.article-trust-panel p:last-child { margin:0; color:var(--muted); }

.context-links { margin-top:var(--bbo-space-6); }
.context-links__head { margin-bottom:var(--bbo-space-3); }
.context-links__head h2 { margin:0; font-size:22px; }
.context-links__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--bbo-space-3); }
.context-links__grid a {
  min-width:0;
  padding:var(--bbo-space-4);
  border:1px solid var(--bbo-border);
  border-radius:var(--bbo-radius-card);
  background:var(--surface,#fff);
  text-decoration:none;
}
.context-links__grid strong,
.context-links__grid span { display:block; }
.context-links__grid strong { margin-bottom:var(--bbo-space-2); }
.context-links__grid span { color:var(--muted); font-size:14px; line-height:1.5; }
.context-links__grid a:hover { border-color:var(--primary,#2c8fcb); }

.authority-content { max-width:var(--bbo-reading); }
.authority-check-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--bbo-space-3); margin-top:var(--bbo-space-4); margin-bottom:var(--bbo-space-6); }
.authority-check-grid section { min-width:0; padding:var(--bbo-space-4); border:1px solid var(--bbo-border); border-radius:var(--bbo-radius-card); background:#f8fafc; }
.authority-check-grid section > strong { display:inline-block; margin-bottom:var(--bbo-space-2); font-size:13px; }
.authority-check-grid h3 { margin:0 0 var(--bbo-space-2); font-size:18px; }
.authority-check-grid p { margin:0; color:var(--muted); }

@media (max-width:760px) {
  .content-review-bar { align-items:flex-start; flex-direction:column; margin-top:0; }
  .content-review-bar > a { white-space:normal; }
  .article-trust-panel { grid-template-columns:1fr; gap:var(--bbo-space-4); }
  .article-trust-panel .button { width:100%; }
  .context-links__grid,
  .authority-check-grid { grid-template-columns:1fr; }
}


/* v6.18.4 — SEO content cluster hub */
.content-clusters { margin:var(--bbo-space-6) 0 var(--bbo-space-7); }
.content-clusters__head { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,420px); gap:var(--bbo-space-5); align-items:end; margin-bottom:var(--bbo-space-4); }
.content-clusters__head h2 { margin:0; }
.content-clusters__head > p { margin:0; color:var(--muted); line-height:1.6; }
.content-clusters__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--bbo-space-3); }
.content-cluster-card { min-width:0; padding:var(--bbo-space-4); border:1px solid var(--border); border-radius:var(--bbo-radius-panel); background:var(--surface,#fff); scroll-margin-top:90px; }
.content-cluster-card__head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--bbo-space-3); }
.content-cluster-card__head h3 { margin:0; font-size:20px; }
.content-cluster-card__head span { flex:0 0 auto; color:var(--muted); font-size:12px; font-weight:700; }
.content-cluster-card > p { margin:var(--bbo-space-2) 0 var(--bbo-space-3); color:var(--muted); line-height:1.55; }
.content-cluster-card ul { display:grid; gap:1px; margin:0; padding:0; list-style:none; border-top:1px solid var(--border); }
.content-cluster-card li { min-width:0; border-bottom:1px solid var(--border); }
.content-cluster-card li:last-child { border-bottom:0; }
.content-cluster-card li a { display:grid; gap:2px; padding:11px 0; color:inherit; text-decoration:none; }
.content-cluster-card li a:hover strong { text-decoration:underline; }
.content-cluster-card li strong,.content-cluster-card li span { min-width:0; overflow-wrap:anywhere; }
.content-cluster-card li span { color:var(--muted); font-size:13px; line-height:1.45; }
.article-topic { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:8px 0 0; font-size:13px; }
.article-topic span { color:var(--muted); }
.article-topic a { font-weight:800; text-decoration:none; }
.article-topic a:hover { text-decoration:underline; }
@media (max-width:760px) {
  .content-clusters { margin:var(--bbo-space-5) 0 var(--bbo-space-6); }
  .content-clusters__head,.content-clusters__grid { grid-template-columns:1fr; }
  .content-clusters__head { gap:var(--bbo-space-2); align-items:start; }
  .content-cluster-card { padding:var(--bbo-space-3); }
  .content-cluster-card__head { align-items:flex-start; }
  .content-cluster-card__head span { white-space:normal; text-align:right; }
}
@media (max-width:420px) {
  .content-cluster-card__head { display:block; }
  .content-cluster-card__head span { display:block; margin-top:4px; text-align:left; }
}

/* v6.18.7 — search-intent answer blocks and question hub ---------------- */
.search-intent-answer {
  max-width: var(--bbo-reading);
  margin: var(--bbo-space-5) 0 var(--bbo-space-6);
  padding: var(--bbo-space-4) 0 var(--bbo-space-4) var(--bbo-space-4);
  border-left: 3px solid var(--brand);
}
.search-intent-answer .eyebrow { margin-bottom: var(--bbo-space-1); }
.search-intent-answer h2 { margin: 0 0 var(--bbo-space-2); font-size: clamp(20px,2.2vw,26px); line-height: 1.25; }
.search-intent-answer p:last-child { margin: 0; color: var(--muted); line-height: 1.68; }
.traffic-main > .search-intent-section,
.solver-main > .search-intent-section { padding: 0; }
.search-intent-section .search-intent-answer { margin-top: var(--bbo-space-5); }

.search-question-hub { margin: var(--bbo-space-6) 0 var(--bbo-space-7); }
.search-question-hub__head {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(260px,420px);
  gap: var(--bbo-space-5);
  align-items: end;
  margin-bottom: var(--bbo-space-4);
}
.search-question-hub__head h2 { margin: 0; }
.search-question-hub__head > p { margin: 0; color: var(--muted); line-height: 1.6; }
.search-question-hub__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--bbo-space-3); }
.search-question-hub__grid a {
  min-width: 0;
  padding: var(--bbo-space-4);
  border: 1px solid var(--border);
  border-radius: var(--bbo-radius-card);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}
.search-question-hub__grid a:hover strong { text-decoration: underline; }
.search-question-hub__grid strong,
.search-question-hub__grid span { display: block; min-width: 0; overflow-wrap: anywhere; }
.search-question-hub__grid strong { margin-bottom: var(--bbo-space-2); font-size: 17px; line-height: 1.35; }
.search-question-hub__grid span { color: var(--muted); font-size: 14px; line-height: 1.55; }

@media (max-width: 760px) {
  .search-intent-answer { margin: var(--bbo-space-4) 0 var(--bbo-space-5); padding-left: var(--bbo-space-3); }
  .search-question-hub { margin: var(--bbo-space-5) 0 var(--bbo-space-6); }
  .search-question-hub__head,
  .search-question-hub__grid { grid-template-columns: 1fr; }
  .search-question-hub__head { gap: var(--bbo-space-2); align-items: start; }
  .search-question-hub__grid { gap: var(--bbo-space-2); }
  .search-question-hub__grid a { padding: var(--bbo-space-3); }
}

/* v6.18.26 — canonical guide support components --------------------------
 * These selectors used to be copied into front-page.css, content.css and
 * solver.css. Keeping them here prevents page-bundle cascade drift.
 */
.related-guides {
  width: 100%;
  max-width: var(--bbo-reading);
  margin: var(--bbo-space-6) auto 0;
  padding-top: var(--bbo-space-5);
  border-top: 1px solid var(--bbo-border);
}
.related-guides__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--bbo-space-4);
  margin-bottom: var(--bbo-space-4);
}
.related-guides__head > div { min-width: 0; }
.related-guides__head .eyebrow { margin-bottom: var(--bbo-space-1); }
.related-guides__head h2 { margin: 0; font-size: 22px; line-height: 1.3; }
.related-guides__head .text-link {
  flex: 0 0 auto;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.related-guides__grid { margin-top: 0; }

.related-questions {
  width: 100%;
  max-width: var(--bbo-reading);
  margin: var(--bbo-space-6) auto 0;
}
.related-questions__head {
  display: block;
  margin: 0 0 var(--bbo-space-3);
  text-align: left;
}
.related-questions__head .eyebrow { margin: 0 0 var(--bbo-space-1); }
.related-questions__head h2 {
  margin: 0;
  font-size: clamp(22px,2.4vw,30px);
  line-height: 1.25;
  text-align: left;
}
.related-questions__list {
  overflow: clip;
  border: 1px solid var(--bbo-border);
  border-radius: var(--bbo-radius-card);
  background: var(--bbo-panel-bg);
}
.related-questions__list details {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--bbo-border);
  background: transparent;
}
.related-questions__list details:last-child { border-bottom: 0; }
.related-questions__list summary {
  position: relative;
  min-width: 0;
  padding: 15px 46px 15px var(--bbo-space-4);
  cursor: pointer;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.45;
  list-style: none;
  overflow-wrap: anywhere;
}
.related-questions__list summary::-webkit-details-marker { display: none; }
.related-questions__list summary::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: var(--bbo-space-4);
  transform: translateY(-50%);
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
}
.related-questions__list details[open] summary::after { content: '–'; }
.related-questions__list details p {
  margin: 0;
  padding: 0 46px var(--bbo-space-4) var(--bbo-space-4);
  color: var(--muted);
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.related-questions__list summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -3px;
}
.related-questions-section { padding: var(--bbo-space-6) 0; }
.related-questions-section .related-questions {
  max-width: 860px;
  margin-top: 0;
}

.guide-pathways {
  width: 100%;
  margin: var(--bbo-space-6) 0 var(--bbo-space-7);
}
.guide-pathways__head {
  display: block;
  margin: 0 0 var(--bbo-space-4);
  text-align: left;
}
.guide-pathways__head .eyebrow { margin: 0 0 var(--bbo-space-1); }
.guide-pathways__head h2 { margin: 0; line-height: 1.3; }
.guide-pathways__grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--bbo-space-3);
}
.guide-pathway-card {
  min-width: 0;
  padding: var(--bbo-space-4);
  border: 1px solid var(--bbo-border);
  border-radius: var(--bbo-radius-card);
  background: var(--bbo-panel-bg);
}
.guide-pathway-card h3 { margin: 0 0 var(--bbo-space-2); font-size: 19px; line-height: 1.35; }
.guide-pathway-card > p { margin: 0 0 var(--bbo-space-3); color: var(--muted); line-height: 1.55; }
.guide-pathway-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--bbo-space-2); }
.guide-pathway-card li { min-width: 0; }
.guide-pathway-card a { color: var(--brand-dark); font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.guide-pathway-card a:hover,.guide-pathway-card a:focus-visible { text-decoration: underline; }

/* Shared mobile wrap fixes. These replace legacy nowrap rules rather than
 * hiding overflow at the document level. */

@supports (content-visibility:auto) {
  .related-guides { content-visibility:auto; contain-intrinsic-size:auto 560px; }
}

@media (max-width:760px) {
  .site-nav__list a,
  .footer-group a,
  .site-footer__copyright {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .related-guides { margin-top: var(--bbo-space-5); padding-top: var(--bbo-space-4); }
  .related-guides__head { align-items: flex-start; flex-wrap: wrap; gap: var(--bbo-space-2) var(--bbo-space-4); }
  .related-guides__head h2 { font-size: 20px; }
  .related-guides__head .text-link { flex-basis: auto; }
  .related-questions { margin-top: var(--bbo-space-5); }
  .related-questions-section { padding: var(--bbo-space-5) 0; }
  .related-questions__list summary { padding: 14px 42px 14px 14px; }
  .related-questions__list summary::after { right: 14px; }
  .related-questions__list details p { padding: 0 14px 14px; }
  .guide-pathways { margin: var(--bbo-space-5) 0 var(--bbo-space-6); }
  .guide-pathways__grid { grid-template-columns: 1fr; gap: var(--bbo-space-2); }
  .guide-pathway-card { padding: var(--bbo-space-4); }
}

@media (max-width:420px) {
  .related-guides__head .text-link { width: 100%; }
  .guide-pathway-card { padding: var(--bbo-space-3); }
}