/* The "Explore more" tag cloud and the big accent footer, shared by the front page
   (public/landing.html) and every standalone public page (lib/model-pages.js shell()).
   The markup for both is generated in lib/landing.js from lib/site-pages.js SITEMAP, so one
   stylesheet keeps the two surfaces identical. Tokens (--accent, --surface-2, --ease…) come
   from the page's own sheet plus studio-modern.css, which both surfaces load. */

/* ---------- tag cloud ---------- */
#explore{text-align:center;padding:96px 0 80px}
#explore .sec-h,#explore .mp-h2{margin:0 auto;text-transform:uppercase;letter-spacing:-.02em}
.cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:1120px;margin:30px auto 0}
.cloud a{font-size:13px;font-weight:600;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:8px 13px;transition:color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.cloud a:hover{color:var(--text);border-color:var(--accent);transform:translateY(-1px)}

/* ---------- big footer: a full-width accent block with the wordmark, the sitemap columns and a bottom bar ---------- */
footer.bigfoot{border-top:0;padding:64px 0 28px;color:#04101c;font-size:14px;
  background:linear-gradient(120deg,var(--accent) 0%,var(--accent-3) 55%,var(--accent-2) 100%)}
footer.bigfoot a{color:inherit}
:root[data-mode="light"] footer.bigfoot{color:#fff}
/* standalone pages have no .wrap of their own; the front page keeps its .wrap */
.bf-wrap{max-width:83rem;margin:0 auto;padding:0 24px}
.bf-grid{display:grid;grid-template-columns:1.2fr 3fr;gap:36px 28px;align-items:start}
.bf-mark{font-family:var(--disp);font-weight:800;font-size:clamp(34px,3.6vw,48px);line-height:1;letter-spacing:-.03em;text-transform:uppercase;margin:0}
.bf-mark small{display:block;font-size:.62em;letter-spacing:.02em;margin-top:8px}
.bf-tag{margin:16px 0 0;font-weight:600;opacity:.85;max-width:300px}
.bf-co{margin-top:22px;font-size:12.5px;opacity:.82;line-height:1.75}
.bf-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 22px}
.bf-col{display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-weight:600;line-height:1.35}
.bf-h{font-size:12.5px;font-weight:700;opacity:.62;margin-bottom:2px}
.bf-h-sub{margin-top:14px}
.bf-off{opacity:.5;cursor:default}
footer.bigfoot .bf-col a:hover{text-decoration:underline}
.bf-bar{margin-top:48px;padding-top:18px;border-top:1px solid rgba(4,16,28,.28);display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;font-size:12.5px}
:root[data-mode="light"] .bf-bar{border-color:rgba(255,255,255,.4)}
.bf-legal{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.bf-lang{background:rgba(4,16,28,.16);border:1px solid rgba(4,16,28,.3);color:inherit;border-radius:8px;padding:6px 8px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
:root[data-mode="light"] .bf-lang{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45)}
.bf-lang option{color:#0f1729;background:#fff}
footer.bigfoot a:focus-visible,.bf-lang:focus-visible{outline:2px solid currentColor;outline-offset:2px}
/* the price/trademark note the standalone pages carry under the bar */
.bf-note{margin:18px 0 0;font-size:12px;opacity:.78;max-width:760px;line-height:1.55}

@media(max-width:1180px){.bf-cols{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1000px){.bf-grid{grid-template-columns:1fr}}
@media(max-width:560px){
  .bf-wrap{padding:0 16px}
  .bf-cols{grid-template-columns:1fr 1fr;gap:24px 14px}
  #explore{padding:64px 0 56px}
}
@media(prefers-reduced-motion:reduce){
  .cloud a,.cloud a:hover{transition:none;transform:none}
}