html {
  overflow-x: hidden;
}

.backyard-page {
  --backyard-ink: #102018;
  --backyard-muted: #526173;
  --backyard-green: #166534;
  --backyard-teal: #0f766e;
  --backyard-amber: #b45309;
  --backyard-blue: #2563eb;
  --backyard-line: rgba(51, 65, 85, 0.18);
  --backyard-strong-line: rgba(22, 101, 52, 0.34);
  --backyard-soft: rgba(148, 163, 184, 0.14);
  --backyard-panel: rgba(255, 255, 255, 0.9);
  overflow-x: hidden;
  background:
    linear-gradient(135deg, rgba(248, 250, 252, 0.98), rgba(240, 253, 244, 0.88) 48%, rgba(255, 251, 235, 0.7)),
    #f8fafc;
}

:root[data-theme="dark"] .backyard-page {
  --backyard-ink: #f8fafc;
  --backyard-muted: #cbd5e1;
  --backyard-green: #86efac;
  --backyard-teal: #5eead4;
  --backyard-amber: #fbbf24;
  --backyard-blue: #93c5fd;
  --backyard-line: rgba(203, 213, 225, 0.17);
  --backyard-strong-line: rgba(134, 239, 172, 0.34);
  --backyard-soft: rgba(148, 163, 184, 0.12);
  --backyard-panel: rgba(15, 23, 42, 0.88);
  background:
    linear-gradient(135deg, #020617, #132315 54%, #0f172a),
    #020617;
}

.backyard-page .container {
  width: min(calc(100vw - 2rem), var(--content));
}

.backyard-page .site-header {
  background: rgba(248, 250, 252, 0.92);
  border-bottom-color: var(--backyard-line);
}

:root[data-theme="dark"] .backyard-page .site-header {
  background: rgba(2, 6, 23, 0.86);
}

.backyard-page h1,
.backyard-page h2,
.backyard-page h3,
.backyard-page h4,
.backyard-page .logo {
  letter-spacing: 0;
}

.backyard-page [hidden] {
  display: none !important;
}

.backyard-page .reveal {
  opacity: 1;
  transform: none;
}

.backyard-hero {
  padding: 3.1rem 0 1.7rem;
}

.backyard-hero-grid,
.backyard-calculator-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 0.9fr);
  gap: 1.25rem;
  align-items: start;
}

.backyard-hero-grid > *,
.backyard-calculator-grid > *,
.backyard-info-grid > *,
.backyard-related-grid > *,
.backyard-compare-grid > * {
  min-width: 0;
}

.backyard-eyebrow,
.section-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0.34rem 0.76rem;
  border: 1px solid var(--backyard-line);
  border-radius: 999px;
  background: var(--backyard-soft);
  color: var(--backyard-ink);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.backyard-hero h1 {
  margin: 0.65rem 0 0.45rem;
  text-wrap: balance;
}

.backyard-subtitle,
.backyard-muted,
.backyard-card p,
.backyard-related-card p,
.backyard-compare-card p,
.field-help {
  color: var(--backyard-muted);
}

.backyard-subtitle {
  max-width: 880px;
  margin: 0;
  font-size: 1.08rem;
}

.backyard-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.backyard-stat,
.backyard-tool-panel,
.backyard-results-panel,
.backyard-visual-card,
.backyard-card,
.backyard-related-card,
.backyard-compare-card {
  border: 1px solid var(--backyard-line);
  border-radius: 8px;
  background: var(--backyard-panel);
  box-shadow: var(--shadow-soft);
}

.backyard-stat {
  padding: 0.85rem;
}

.backyard-stat span,
.backyard-result-list span,
.backyard-material-lines span,
.backyard-compare-card span {
  display: block;
  color: var(--backyard-muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.backyard-stat strong {
  display: block;
  margin-top: 0.2rem;
  color: var(--backyard-ink);
  font-family: var(--font-heading);
  font-size: 1.15rem;
}

.backyard-visual-card {
  padding: 1rem;
  color: var(--backyard-ink);
}

.backyard-visual-card svg,
.backyard-yard-visual svg {
  display: block;
  width: 100%;
  height: auto;
}

.section {
  padding: 2rem 0 3rem;
}

.section-heading {
  max-width: 960px;
}

.section-heading h2,
.backyard-tool-head h2,
.backyard-results-panel h3,
.backyard-card h3,
.backyard-related-card h3 {
  margin: 0;
  font-family: var(--font-heading);
}

.section-heading h2 {
  margin: 0.4rem 0 0.55rem;
  font-size: 2.2rem;
  line-height: 1.08;
}

.backyard-tool-panel,
.backyard-results-panel {
  padding: 1rem;
}

.backyard-tool-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.backyard-tool-head h2 {
  font-size: 1.25rem;
}

.backyard-pill {
  flex: 0 0 auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 30px;
  padding: 0.22rem 0.68rem;
  border: 1px solid var(--backyard-strong-line);
  border-radius: 999px;
  background: rgba(22, 101, 52, 0.1);
  color: var(--backyard-green);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.backyard-fieldset {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

.backyard-fieldset legend,
.backyard-label strong {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--backyard-ink);
  font-weight: 900;
}

.backyard-choice-grid,
.backyard-material-grid,
.backyard-install-grid {
  display: grid;
  gap: 0.55rem;
}

.backyard-choice-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.backyard-material-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.backyard-install-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.backyard-choice-grid button,
.backyard-material-grid button,
.backyard-install-grid button {
  min-height: 52px;
  padding: 0.65rem 0.6rem;
  border: 1px solid var(--backyard-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--backyard-ink);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  text-align: left;
}

:root[data-theme="dark"] .backyard-choice-grid button,
:root[data-theme="dark"] .backyard-material-grid button,
:root[data-theme="dark"] .backyard-install-grid button {
  background: rgba(15, 23, 42, 0.74);
}

.backyard-choice-grid button[aria-pressed="true"],
.backyard-material-grid button[aria-pressed="true"],
.backyard-install-grid button[aria-pressed="true"] {
  border-color: var(--backyard-green);
  background: rgba(22, 101, 52, 0.13);
  color: var(--backyard-green);
}

.backyard-input-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.backyard-input-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.backyard-label input,
.backyard-label select {
  width: 100%;
  min-height: 46px;
  padding: 0.68rem 0.72rem;
  border: 1px solid var(--backyard-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--backyard-ink);
  font: inherit;
  font-weight: 750;
}

:root[data-theme="dark"] .backyard-label input,
:root[data-theme="dark"] .backyard-label select {
  background: rgba(2, 6, 23, 0.76);
}

.backyard-check {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  margin-top: 0.7rem;
  color: var(--backyard-muted);
  font-weight: 750;
}

.backyard-check input {
  margin-top: 0.2rem;
}

.backyard-results-panel {
  position: sticky;
  top: 6rem;
}

.backyard-total {
  margin: 0.9rem 0;
  padding: 1rem;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(22, 101, 52, 0.13), rgba(37, 99, 235, 0.1)),
    var(--backyard-soft);
}

.backyard-total span {
  color: var(--backyard-muted);
  font-weight: 900;
  text-transform: uppercase;
}

.backyard-total strong {
  display: block;
  margin-top: 0.22rem;
  color: var(--backyard-ink);
  font-family: var(--font-heading);
  font-size: clamp(1.85rem, 3vw, 3rem);
  line-height: 1;
}

.backyard-result-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0.85rem 0;
}

.backyard-result-list div {
  padding: 0.75rem;
  border: 1px solid var(--backyard-line);
  border-radius: 8px;
  background: var(--backyard-soft);
}

.backyard-result-list strong {
  display: block;
  margin-top: 0.2rem;
  color: var(--backyard-ink);
  font-size: 1.08rem;
}

.backyard-yard-visual {
  overflow: hidden;
  border: 1px solid var(--backyard-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
}

:root[data-theme="dark"] .backyard-yard-visual {
  background: rgba(2, 6, 23, 0.58);
}

.backyard-share {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  margin-top: 0.8rem;
}

.backyard-share-output {
  min-width: 0;
  overflow: hidden;
  padding: 0.68rem 0.72rem;
  border: 1px solid var(--backyard-line);
  border-radius: 8px;
  color: var(--backyard-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backyard-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.65rem 0.9rem;
  border: 0;
  border-radius: 8px;
  background: var(--backyard-green);
  color: #ffffff;
  font-weight: 900;
  cursor: pointer;
  text-decoration: none;
}

.backyard-button.secondary {
  border: 1px solid var(--backyard-line);
  background: var(--backyard-panel);
  color: var(--backyard-ink);
}

.backyard-material-lines,
.backyard-warning-list {
  display: grid;
  gap: 0.58rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.backyard-material-lines li {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) auto;
  gap: 0.25rem 0.75rem;
  align-items: start;
  padding: 0.76rem;
  border: 1px solid var(--backyard-line);
  border-radius: 8px;
  background: var(--backyard-panel);
}

.backyard-material-lines em {
  grid-column: 1 / -1;
  color: var(--backyard-muted);
  font-style: normal;
  font-size: 0.88rem;
}

.backyard-warning-list li {
  padding: 0.78rem;
  border-left: 4px solid var(--backyard-amber);
  border-radius: 8px;
  background: rgba(180, 83, 9, 0.09);
  color: var(--backyard-ink);
  font-weight: 750;
}

.backyard-info-grid,
.backyard-related-grid,
.backyard-compare-grid {
  display: grid;
  gap: 1rem;
}

.backyard-info-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.backyard-related-grid,
.backyard-compare-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.backyard-card,
.backyard-related-card,
.backyard-compare-card {
  padding: 1rem;
}

.backyard-card h3,
.backyard-related-card h3 {
  margin-bottom: 0.45rem;
  font-size: 1.1rem;
}

.backyard-related-card a,
.backyard-compare-card a {
  color: var(--backyard-green);
  font-weight: 900;
  text-decoration: none;
}

.backyard-compare-card.is-active {
  border-color: var(--backyard-green);
  box-shadow: 0 0 0 3px rgba(22, 101, 52, 0.12);
}

.backyard-compare-card strong {
  display: block;
  margin: 0.35rem 0;
  color: var(--backyard-ink);
  font-family: var(--font-heading);
}

.backyard-faq {
  display: grid;
  gap: 0.75rem;
}

.backyard-faq details {
  border: 1px solid var(--backyard-line);
  border-radius: 8px;
  background: var(--backyard-panel);
}

.backyard-faq summary {
  padding: 0.9rem 1rem;
  color: var(--backyard-ink);
  font-weight: 900;
  cursor: pointer;
}

.backyard-faq details > div {
  padding: 0 1rem 1rem;
  color: var(--backyard-muted);
}

@media (max-width: 1040px) {
  .backyard-hero-grid,
  .backyard-calculator-grid,
  .backyard-info-grid,
  .backyard-related-grid,
  .backyard-compare-grid {
    grid-template-columns: 1fr;
  }

  .backyard-results-panel {
    position: static;
  }

  .backyard-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .backyard-hero {
    padding-top: 2.1rem;
  }

  .backyard-choice-grid,
  .backyard-material-grid,
  .backyard-input-grid,
  .backyard-input-grid.two,
  .backyard-install-grid,
  .backyard-result-list,
  .backyard-summary-strip,
  .backyard-share {
    grid-template-columns: 1fr;
  }

  .backyard-choice-grid button,
  .backyard-material-grid button,
  .backyard-install-grid button {
    min-height: 48px;
  }

  .section-heading h2 {
    font-size: 1.7rem;
  }

  .backyard-total strong {
    font-size: 1.8rem;
  }
}