:root {
  --site-page-background: var(--mw-canvas);
  --site-container-background: var(--mw-panel);
  --site-container-raised: var(--mw-panel-raised);
  --site-accent: var(--mw-gold);
  --site-text: var(--mw-text);
  --site-muted: var(--mw-muted);
  --site-border: var(--mw-line);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { min-height: 100vh; margin: 0; background: var(--site-page-background); color: var(--site-text); }
.public-site-main {
  width: min(1040px, calc(100% - 2rem));
  min-height: calc(100vh - var(--mw-header-height));
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) 0 6rem;
}

.public-panel,
.public-link-grid > a { border: 1px solid var(--site-border); border-radius: var(--mw-radius); background: var(--site-container-background); }
.public-feature { margin-top: 0.8rem; }
.public-feature { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding: clamp(1.4rem, 4vw, 2.5rem); }
.public-feature h2 { margin: 0 0 0.6rem; font-size: clamp(1.4rem, 3vw, 2rem); }
.public-feature p, .public-centered-panel p { max-width: 580px; margin: 0; color: var(--site-muted); line-height: 1.65; }

.public-link-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-top: 0.8rem; }
.public-link-grid > a { min-height: 180px; padding: 1.25rem; color: var(--site-text); text-decoration: none; transition: border-color 140ms ease, background-color 140ms ease; }
.public-link-grid > a:hover, .public-link-grid > a:focus-visible { border-color: var(--mw-line-strong); background: var(--site-container-raised); }
.public-link-grid span, .public-link-grid small { display: block; color: var(--site-muted); }
.public-link-grid span { margin-bottom: 2.5rem; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.public-link-grid strong { display: block; margin-bottom: 0.5rem; font-size: 1.15rem; }
.public-link-grid small { line-height: 1.5; }
.public-link-grid--content { grid-template-columns: repeat(2, 1fr); }
.public-centered-panel { max-width: 680px; padding: 2rem; }
.public-centered-panel h1 { margin: 0 0 0.65rem; font-size: 1.35rem; letter-spacing: -0.015em; }
.public-centered-panel .site-action { margin-top: 1.25rem; }

.home-build-browser { margin-top: 0.8rem; padding: clamp(1.4rem, 4vw, 2.5rem); cursor: pointer; }
.home-build-browser-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.25rem; }
.home-build-browser-heading span { display: block; margin-bottom: 0.35rem; color: var(--site-muted); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.home-build-browser-heading h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); }
.home-build-browser-heading a { color: var(--mw-gold); font-size: 0.82rem; text-decoration: none; white-space: nowrap; }
.home-build-browser-heading a:hover, .home-build-browser-heading a:focus-visible { text-decoration: underline; }
.home-build-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; min-height: 3rem; }
.home-build-cards .social-card { cursor: pointer; }

@media (max-width: 700px) {
  .public-site-main { padding-top: 1.5rem; }
  .public-feature { align-items: flex-start; flex-direction: column; }
  .public-link-grid, .public-link-grid--content { grid-template-columns: 1fr; }
  .home-build-browser-heading { align-items: flex-start; flex-direction: column; gap: 0.7rem; }
  .home-build-cards { grid-template-columns: 1fr; }
}