/* ===============================
   LawnMowerMatch.com — main.css
   Palette 1: Modern Forest + Machinery Orange

   Primary:      #244B3B  (Deep Forest)
   Primary-dk:   #18382C  (Dark Pine / hover)
   Secondary:    #58685E  (Muted Green-Gray)
   Commercial:   #D56A27  (Machinery Orange)
   Commercial-dk:#A94D18  (Burnt Orange / hover)
   Primary-lt:   #F0F5EF  (Pale Sage)
   Accent-lt:    #E5EFE7  (Soft Sage)
   Graphite:     #26312C
   Body bg:      #FAFBF8  (Warm White)
   Text:         #26312C  (Graphite)
   Text-muted:   #58685E  (Muted Green-Gray)
   Border:       #D6E2D9  (Sage Gray)
   Card bg:      #FFFFFF

   Compatibility status colours remain semantic and separate from the
   brand palette (green = verified, amber = conditional, red = incompatible).
================================ */

/* ===============================
   Brand tokens
   Legacy token names are retained to avoid unnecessary selector/code churn.
================================ */

:root {
  --ss-forest: #244B3B;
  --ss-forest-dark: #18382C;
  --ss-cedar: #D56A27;
  --ss-cedar-dark: #A94D18;
  --ss-amber: #58685E;
  --ss-amber-soft: #FFF4EC;
  --ss-sage: #E5EFE7;
  --ss-forest-mist: #F0F5EF;
  --ss-warm-white: #FAFBF8;
  --ss-graphite: #26312C;
  --ss-text: #26312C;
  --ss-muted: #58685E;
  --ss-border: #D6E2D9;
  --ss-shop-border: #E0B18F;
  --ss-shop-bg: #FFF7F1;
  --ss-shop-hover: #FBE9DD;
}

/* ===============================
   Base & Reset
================================ */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #FAFBF8;
  color: #26312C;
}

/* ===============================
   Layout
================================ */

.container {
  max-width: 520px;
  margin: 40px auto;
  padding: 0 20px;
}

main.container {
  margin-top: 20px;
}

/* ===============================
   Header (Highlight-safe)
================================ */

.site-header {
  background: transparent;
  border-bottom: none;
  margin: 0;
  padding: 8px 0;
}

.header-highlight {
  min-height: 0;
  width: 100%;
  margin: 8px 0 0;
}

.footer-highlight {
  width: 100%;
  margin: 0 0 16px;
}

/* Self-contained sizing — deliberately NOT using .container, since
   .site-header .container and .site-footer .container resolve differently
   (header resets margin to 0 auto; footer inherits the base 40px auto). */
.header-highlight__inner,
.footer-highlight__inner {
  max-width: 520px;
  margin: 0 auto;
  padding: 10px 16px;
  background: #F0F5EF;
  border: 1px solid #E1EAE2;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  text-align: center;
}

.highlight-text {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.35; /* explicit — do not omit */
  color: #26312C;
}

@media (max-width: 480px) {
  .highlight-text {
    font-size: 0.8rem;
  }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.header-nav a {
  font-weight: 500;
  text-decoration: none;
}

.site-header img {
  height: 38px;
  width: auto;
  margin-right: 6px;
}

.site-nav a {
  font-weight: 500;
  text-decoration: none;
  opacity: 0.85;
}

.site-nav a:hover {
  text-decoration: underline;
  opacity: 1;
}

.site-nav {
  margin-left: auto;
}

.site-nav a {
  margin-left: 18px;
  font-size: 0.95rem;
  font-weight: 500;
}

/* ===============================
   Header spacing fix
================================ */

.site-header .container {
  margin: 0 auto;
  padding: 0;
}

/* ===============================
   Typography
================================ */

h1 {
  text-align: center;
  font-size: 2rem;
  color: #244B3B;
  margin-bottom: 10px;
}

h2 {
  color: #244B3B;
  margin-top: 40px;
  margin-bottom: 15px;
}

h3 {
  color: #244B3B;
  margin-top: 30px;
}

p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 10px 0;
}

a {
  color: #244B3B;
}

a:hover {
  color: #26312C;
}

.hint {
  margin-top: 8px;
  font-size: 0.85rem;
  color: #58685E;
  text-align: center;
  font-style: italic;
}

.hint a {
  color: #244B3B;
}

.intro {
  text-align: center;
  margin-bottom: 30px;
  color: #58685E;
}

/* ===============================
   Forms & Inputs
================================ */

label {
  display: block;
  margin-bottom: 20px;
  font-weight: 600;
}

input[type="number"],
input[type="date"] {
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  font-size: 1rem;
  border: 1px solid #B9CDBF;
  border-radius: 8px;
  background: #fff;
}

input:focus {
  outline: none;
  border-color: #244B3B;
  box-shadow: 0 0 0 3px rgba(36, 75, 59, 0.16);
}

/* ===============================
   Select (Dropdowns)
================================ */

select {
  width: 100%;
  margin-top: 6px;
  padding: 12px 40px 12px 12px;
  font-size: 1rem;
  font-family: inherit;
  color: #26312C;
  background-color: #fff;
  border: 1px solid #B9CDBF;
  border-radius: 8px;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image:
    linear-gradient(45deg, transparent 50%, #58685E 50%),
    linear-gradient(135deg, #58685E 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 3px),
    calc(100% - 16px) calc(50% - 3px);
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
}

select:focus {
  outline: none;
  border-color: #244B3B;
  box-shadow: 0 0 0 3px rgba(36, 75, 59, 0.16);
}

select:disabled {
  background-color: #EFF3EF;
  color: #58685E;
  cursor: not-allowed;
}

label select {
  margin-top: 6px;
}

/* ===============================
   Hub & Cross-Navigation Links
================================ */

.hub-link {
  margin: 18px 0 28px;
  font-size: 0.95rem;
  color: #58685E;
  text-align: center;
}

.hub-link a {
  font-weight: 600;
  color: #244B3B;
  text-decoration: none;
}

.hub-link a:hover {
  text-decoration: underline;
  color: #26312C;
}

/* Dense variant — used as an ADDITIONAL class alongside .hub-link,
   e.g. <div class="hub-link hub-link--dense">. Every rule here is
   scoped as a descendant of .hub-link--dense specifically, so it can
   never affect the base .hub-link or .hint (both possibly reused
   elsewhere on the site) on pages that don't explicitly opt in.
   Intended for dense site-wide navigation link lists on
   legal/utility pages, to de-emphasize it relative to the page's
   actual content without hiding it. Hover color uses the site's
   existing primary accent. */

.hub-link--dense {
  margin: 14px 0 20px;
}

.hub-link--dense .hint {
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 600;
  color: #58685E;
  margin: 0 0 4px;
}

.hub-link--dense p:not(.hint) {
  font-size: 0.72rem;
  color: #58685E;
  line-height: 1.7;
}

.hub-link--dense a {
  color: #58685E;
  font-weight: 500;
}

.hub-link--dense a:hover {
  color: #26312C;
  text-decoration: underline;
}

/* ===============================
   Results Box
================================ */

.result {
  margin-top: 25px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  font-size: 1.05rem;
}

.result p {
  margin: 8px 0;
}

/* Keep calculator results balanced: the global heading margin otherwise
   stacks on top of the result panel's 20px padding. Applies to every tool. */
.result > h2:first-child,
.result > h3:first-child {
  margin-top: 0;
}

.result > :last-child {
  margin-bottom: 0;
}

/* ===============================
   Tool List (Homepage)
================================ */

.tools {
  margin-top: 40px;
}

.tool-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tool-list li {
  background: #fff;
  border-radius: 10px;
  margin-bottom: 15px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.tool-list a {
  display: block;
  padding: 16px;
  color: inherit;
  text-decoration: none;
}

.tool-list a:hover {
  background: #F0F5EF;
}

.source-card-list strong,
.source-card-description {
  display: block;
}

.source-card-list strong {
  color: #244B3B;
}

.source-card-description {
  margin-top: 5px;
  color: #58685E;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ===============================
   Equipment List (compact catalog)
   Use instead of .tool-list on pages with
   many product/affiliate links (50+).
   Flat rows with inline links instead of cards.
================================ */

.equipment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.equipment-list li {
  padding: 7px 0;
  border-bottom: 1px solid #D6E2D9;
  font-size: 0.95rem;
  line-height: 1.55;
}

.equipment-list li:last-child {
  border-bottom: none;
}

.equipment-list a {
  color: #244B3B;
  text-decoration: none;
  font-weight: 600;
}

.equipment-list a:hover {
  color: #A94D18;
  text-decoration: underline;
}

.equipment-list .eq-desc {
  color: #58685E;
  font-weight: 400;
}

.equipment-list .eq-browse {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 10px;
  background: #F0F5EF;
  border-radius: 5px;
  font-size: 0.9rem;
}

/* ===============================
   Footer
================================ */

.site-footer {
  background: transparent;
  border-top: none;
  margin-top: 40px;
}

.site-footer .container {
  text-align: center;
  padding: 10px 0;
}

.footer-links {
  font-size: 0.8rem;
  color: #58685E;
  margin-bottom: 6px;
  line-height: 1.5;
}

.footer-links a {
  color: #58685E;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-copy {
  font-size: 0.75rem;
  color: #58685E;
  margin: 0;
}

/* ===============================
   Mobile
================================ */

@media (max-width: 400px) {
  .container {
    margin: 25px auto;
    padding: 0 15px;
  }

  h1 {
    font-size: 1.6rem;
  }
}

/* ===============================
   Mobile Header
================================ */

@media (max-width: 480px) {

  .header-inner {
    padding: 6px 0;
  }

  .site-header img {
    height: 32px;
  }
}

/* =========================
   Tool list grouping labels
   ========================= */

.tool-group {
  list-style: none;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
}

.tool-group + li {
  margin-top: 0.25rem;
}

.related-calculators {
  margin-top: 2.5rem;
  font-size: 0.9rem;
  color: #58685E;
}

.related-calculators a {
  font-weight: 500;
}

/* ===============================
   Homepage Enhancements
   =============================== */

.hero {
  margin-bottom: 35px;
}

.hero h1 {
  margin-bottom: 12px;
}

.hero .intro {
  font-size: 1.05rem;
}

/* ===============================
   Category Hub
   =============================== */

.categories {
  margin-top: 40px;
}

.category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.category-card {
  display: block;
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.category-card:hover {
  background: #F0F5EF;
}

.category-card h3 {
  margin-top: 0;
  margin-bottom: 6px;
  font-size: 1.1rem;
}

.category-card p {
  margin: 0;
  font-size: 0.95rem;
  color: #58685E;
}

/* ===============================
   Popular Tools
   =============================== */

.popular-tools {
  margin-top: 45px;
}

.popular-tools .tool-list li {
  margin-bottom: 10px;
}

/* ===============================
   Authority Content
   =============================== */

.authority {
  margin-top: 45px;
  font-size: 0.95rem;
  color: #58685E;
}

.authority p {
  margin-bottom: 12px;
}

.authority a {
  font-weight: 500;
}

/* ===============================
   Supplies / Equipment Callout Box
   =============================== */

.supplies-callout {
  background: #F0F5EF;
  padding: 20px 24px;
  border-radius: 8px;
  margin: 30px 0;
  border-left: 4px solid #244B3B;
}

.supplies-callout h2 {
  margin-top: 0;
  font-size: 1.3rem;
}

.supplies-callout h3 {
  margin-top: 0;
}

.supplies-callout p {
  margin-bottom: 16px;
}

.supplies-callout p:last-child {
  margin-bottom: 0;
}

/* Callout links follow the forest-green and machinery-orange palette. */
.supplies-callout a {
  color: #244B3B;
  font-weight: 600;
}

.supplies-callout a:hover {
  color: #A94D18;
}


/* Button links inside supplies callouts must retain button contrast.
   The generic .supplies-callout a rule is intentionally overridden here. */
.supplies-callout a.button--primary,
.supplies-callout a.button--primary:hover {
  color: #fff;
  text-decoration: none;
}

.supplies-callout a.button--secondary {
  color: #244B3B;
  text-decoration: none;
}

.supplies-callout a.button--secondary:hover {
  color: #26312C;
  text-decoration: none;
}

/* All affiliate links rendered as .button keep button styling and never
   inherit the inline /go/ underline treatment. */
a.button[href^="/go/"],
a.button[href^="/go/"]:hover {
  text-decoration: none;
}

/* ===============================
   FAQ Section
   =============================== */

.faq {
  margin-top: 45px;
}

.faq h3 {
  margin-top: 22px;
  margin-bottom: 6px;
  font-size: 1rem;
}

.faq p {
  margin-top: 0;
  font-size: 0.95rem;
  color: #58685E;
}

/* ===============================
   Comparison Tables (SEO)
================================ */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 0.95rem;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

thead {
  background: #F0F5EF;
}

th,
td {
  padding: 12px 14px;
  text-align: left;
}

th {
  font-weight: 600;
  color: #244B3B;
}

/* Affiliate links in table cells */
td a {
  color: #244B3B;
  font-weight: 600;
  text-decoration: none;
}

td a:hover {
  color: #A94D18;
  text-decoration: underline;
}

tbody tr:not(:last-child) {
  border-bottom: 1px solid #D6E2D9;
}

tbody tr strong {
  color: #26312C;
}

@media (max-width: 480px) {
  table {
    font-size: 0.9rem;
  }
}

/* ===============================
   Tooltip (calculator hints)
================================ */

.tooltip {
  position: relative;
  display: inline-block;
  margin-left: 4px;
  cursor: help;
  font-size: 0.9em;
  opacity: 0.7;
}

.tooltip:hover {
  opacity: 1;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: 125%;
  transform: translateX(-50%);
  min-width: 220px;
  max-width: 280px;
  padding: 8px 10px;
  background: #26312C;
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.4;
  border-radius: 6px;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 10;
}

.tooltip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 115%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #26312C transparent transparent transparent;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.tooltip:hover::after,
.tooltip:hover::before {
  opacity: 1;
}

/* ===============================
   Primary Tool Highlight Box
   =============================== */

.primary-tool {
  margin: 1.75rem 0 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid #D6E2D9;
  border-left: 4px solid #244B3B;
  background-color: #FAFBF8;
  border-radius: 6px;
}

.primary-tool__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #58685E;
  margin-bottom: 0.35rem;
}

.primary-tool__title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  line-height: 1.35;
}

.primary-tool__title a {
  color: #26312C;
  text-decoration: none;
}

.primary-tool__title a:hover {
  text-decoration: underline;
}

.primary-tool__description {
  font-size: 0.9rem;
  color: #58685E;
  margin: 0;
}

.primary-tool + section {
  margin-top: 2.5rem;
}

/* ===============================
   Calculator Teaser
================================ */

.calculator-teaser {
  margin: 40px 0;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.calculator-teaser h2 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: #244B3B;
  text-align: center;
}

.calculator-teaser p {
  text-align: center;
  font-size: 0.95rem;
  color: #58685E;
  margin-bottom: 20px;
}

.calculator-teaser .calculator-form {
  display: grid;
  gap: 16px;
}

.calculator-teaser .calculator-form label {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 0.95rem;
}

.calculator-teaser .calculator-form input[type="number"] {
  padding: 10px 12px;
  font-size: 1rem;
  border: 1px solid #B9CDBF;
  border-radius: 8px;
  width: 100%;
}

.calculator-teaser .teaser-result {
  margin-top: 20px;
  padding: 16px;
  background: #FAFBF8;
  border-radius: 10px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
  font-size: 0.95rem;
}

.calculator-teaser .teaser-result p {
  margin: 6px 0;
  line-height: 1.4;
}

.calculator-teaser .teaser-result strong {
  color: #26312C;
}

@media (max-width: 480px) {
  .calculator-teaser {
    padding: 16px;
  }

  .calculator-teaser h2 {
    font-size: 1.3rem;
  }

  .calculator-teaser p {
    font-size: 0.9rem;
  }

  .calculator-teaser .calculator-form input[type="number"] {
    font-size: 0.95rem;
    padding: 8px 10px;
  }
}

/* ===============================
   Buttons
   Primary = Deep Forest (main action)
   Secondary = Sage-tinted (navigation / lower priority)
================================ */

.btn-primary {
  display: inline-block;
  padding: 12px 22px;
  background-color: #244B3B;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.2s;
}

.btn-primary:hover {
  background-color: #26312C;
  color: #fff;
}

.btn-secondary {
  display: inline-block;
  padding: 10px 20px;
  background-color: #F0F5EF;
  color: #244B3B;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.2s;
}

.btn-secondary:hover {
  background-color: #E1EAE2;
  color: #244B3B;
}

/* ===============================
   Calculator breakdown toggle
================================ */

.calc-toggle {
  border: none;
  cursor: pointer;
}

.calc-breakdown {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #D6E2D9;
  border-radius: 10px;
  background: #FAFBF8;
}

.calc-breakdown .muted {
  color: #58685E;
  font-weight: 500;
  font-size: 0.95rem;
}

/* ===============================
   Call-to-Action Wrappers
=============================== */

.hero-cta {
  text-align: center;
  margin-top: 20px;
}

.calculator-teaser-cta,
.calculator-cta {
  text-align: center;
  margin: 18px 0 28px;
}


.guide-cta {
  text-align: center;
  margin: 18px 0 28px;
  padding: 20px;
  border: 1px solid #D6E2D9;
  border-left: 4px solid #D56A27;
  border-radius: 10px;
  background: #FFF7F1;
}

/* Avoid stacking the global heading margin on top of CTA padding. */
.guide-cta > h2:first-child,
.guide-cta > h3:first-child {
  margin-top: 0;
}

.guide-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.guide-cta-actions .button {
  margin: 0;
}


.faq-cta {
  text-align: center;
  margin: 18px 0 28px;
}

/* ===============================
   Lead Capture / Email Form
================================ */

.lead-capture {
  margin-top: 30px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.lead-capture form {
  display: grid;
  gap: 16px;
}

.lead-capture label {
  font-weight: 600;
  font-size: 0.95rem;
}

.lead-capture input[type="text"],
.lead-capture input[type="email"] {
  padding: 12px;
  font-size: 1rem;
  border: 1px solid #B9CDBF;
  border-radius: 8px;
  width: 100%;
}

.lead-capture button {
  display: inline-block;
  padding: 12px 22px;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  background-color: #244B3B;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.lead-capture button:hover {
  background-color: #26312C;
}

/* ===============================
   Download Report Form Spacing
================================ */

#downloadReportForm label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

#downloadReportForm input {
  display: block;
  width: 100%;
  padding: 12px;
  margin-bottom: 16px;
  font-size: 1rem;
  border: 1px solid #B9CDBF;
  border-radius: 8px;
}

#downloadReportForm button {
  margin-top: 10px;
}

/* ===============================
   Calculator Form (shared)
================================ */

.calculator-form {
  display: grid;
  gap: 16px;
}

.calculator-form label {
  margin: 0;
  font-weight: 600;
  font-size: 0.95rem;
}

.calculator-form input[type="text"],
.calculator-form input[type="email"],
.calculator-form input[type="number"],
.calculator-form input[type="date"] {
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  font-size: 1rem;
  border: 1px solid #B9CDBF;
  border-radius: 8px;
  background: #fff;
}

.calculator-form input:focus,
.calculator-form select:focus {
  outline: none;
  border-color: #244B3B;
  box-shadow: 0 0 0 3px rgba(36, 75, 59, 0.16);
}

/* Result container */
.calculator-result {
  margin-top: 14px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  font-size: 1.05rem;
}

.calculator-result p {
  margin: 8px 0;
}

/* Generic muted helper */
.muted {
  color: #58685E;
  font-weight: 500;
  font-size: 0.95rem;
}

.calculator-form label input[type="checkbox"] {
  margin: 0;
}

/* ===============================
   Quick Start Box
   =============================== */

.quick-start-box {
  margin: 28px 0 35px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #F0F5EF 0%, #E1EAE2 100%);
  border-left: 4px solid #244B3B;
  border-radius: 10px;
}

.quick-start-label {
  margin: 0 0 6px 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #26312C;
}

.quick-start-text {
  margin: 0 0 8px 0;
  font-size: 0.95rem;
  color: #26312C;
  line-height: 1.5;
}

.quick-start-text:last-child {
  margin-bottom: 0;
}

.quick-start-text a {
  color: #244B3B;
  font-weight: 600;
  text-decoration: underline;
}

.quick-start-text a:hover {
  color: #A94D18;
}

/* ===============================
   Section Headers
   =============================== */

.calculators-section {
  margin-top: 45px;
}

.section-heading {
  font-size: 1.5rem;
  color: #244B3B;
  margin: 0 0 6px 0;
  text-align: center;
}

.section-intro {
  text-align: center;
  color: #58685E;
  font-size: 0.95rem;
  margin: 0 0 22px 0;
}

/* ===============================
   Calculator Card Grid
   =============================== */

.calculator-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

@media (min-width: 640px) {
  .calculator-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===============================
   Calculator Cards
   =============================== */

.calc-card {
  display: block;
  background: #fff;
  border: 1px solid #D6E2D9;
  border-radius: 12px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: all 0.2s ease;
  position: relative;
}

.calc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border-color: #244B3B;
}

.calc-card__icon {
  font-size: 2rem;
  margin-bottom: 10px;
  line-height: 1;
}

.calc-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #244B3B;
  margin: 0 0 8px 0;
}

.calc-card__desc {
  font-size: 0.9rem;
  color: #58685E;
  margin: 0;
  line-height: 1.5;
}

.calc-card__tag {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  background: #F0F5EF;
  color: #244B3B;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Primary card variant (advanced calculator, featured) */
.calc-card--primary {
  background: linear-gradient(135deg, #F0F5EF 0%, #E1EAE2 100%);
  border-color: #244B3B;
  border-width: 2px;
}

.calc-card--primary:hover {
  border-color: #26312C;
}

/* Urgent card variant (seasonal, limited) */
.calc-card--urgent {
  background: linear-gradient(135deg, #FFF4EC 0%, #E5EFE7 100%);
  border-color: #A94D18;
  border-width: 2px;
}

.calc-card--urgent:hover {
  border-color: #A94D18;
}

.calc-card__tag--urgent {
  background: #FFF4EC;
  color: #A94D18;
}

/* ===============================
   Tips Section
   =============================== */

.tips-section {
  margin-top: 45px;
}

.tips-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 20px;
}

@media (min-width: 640px) {
  .tips-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.tip-card {
  background: #fff;
  border: 1px solid #D6E2D9;
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.tip-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #244B3B;
  margin: 0 0 8px 0;
}

.tip-card p {
  font-size: 0.9rem;
  color: #58685E;
  margin: 0;
  line-height: 1.5;
}

/* ===============================
   Mobile optimizations
   =============================== */

@media (max-width: 480px) {
  .quick-start-box {
    padding: 14px 16px;
  }

  .section-heading {
    font-size: 1.3rem;
  }

  .calc-card {
    padding: 16px;
  }

  .calc-card__title {
    font-size: 1rem;
  }

  .calc-card__desc {
    font-size: 0.85rem;
  }
}

/* ===============================
   Commercial /go/ link treatment
================================ */

a[href^="/go/"] {
  color: #244B3B;
  font-weight: 600;
  text-decoration: none;
}

a[href^="/go/"]:hover {
  color: #A94D18;
  text-decoration: underline;
}

/* Primary CTA buttons stay Deep Forest. Commercial CTAs remain identifiable through
   their shop treatment/external-arrow cue; machinery orange is reserved for supporting accents. */
.button--shop,
a.button--shop[href^="/go/"] {
  background: var(--ss-forest);
  color: #fff;
  border-color: var(--ss-forest);
  text-decoration: none;
}

.button--shop:hover,
a.button--shop[href^="/go/"]:hover {
  background: var(--ss-forest-dark);
  color: #fff;
  border-color: var(--ss-forest-dark);
  text-decoration: none;
}

/* Legacy /go/ buttons retain button contrast. */
a.btn-primary[href^="/go/"],
a.button--primary[href^="/go/"] {
  color: #fff;
  text-decoration: none;
}

a.btn-primary[href^="/go/"]:hover,
a.button--primary[href^="/go/"]:hover {
  color: #fff;
  text-decoration: none;
}

/* ===============================
   Result formatting helpers
   (used by calculator result blocks)
================================ */

.result-card {
  margin-top: 12px;
}

.result-label {
  margin: 0 0 6px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #26312C;
}

.result-big {
  margin: 0 0 8px;
  font-size: 2.1rem;
  line-height: 1.1;
  font-weight: 800;
  color: #26312C;
}

.result-muted {
  margin: 0;
  font-size: 0.98rem;
  color: rgba(38, 49, 44, 0.75);
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 16px;
  margin-top: 10px;
}

.result-grid > div {
  padding: 6px 0;
  border-top: 1px solid rgba(38, 49, 44, 0.08);
}

.result-subblock {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(38, 49, 44, 0.12);
}

/* ===============================
   Shop Pill & Chip
   Reusable affiliate/result pills and static shortcut chips.
   Existing color variants remain available across the tool system.
================================ */

.ext-arrow {
  font-size: 0.78em;
  opacity: 0.55;
  margin-left: 4px;
  display: inline-block;
  transition: opacity 0.12s ease;
}

a:hover .ext-arrow {
  opacity: 0.9;
}

/* ---- Pill ---- */

.shop-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.shop-pill {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px 9px;
  border-radius: 11px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

a.shop-pill,
a.shop-pill:hover {
  text-decoration: none;
}

.shop-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -6px rgba(38, 49, 44, 0.18);
}

.shop-pill--cool {
  background: #F0F5EF;
  border-color: #E5EFE7;
}

.shop-pill--heat {
  background: #FFF4EC;
  border-color: #E5EFE7;
}

.shop-pill--neutral {
  background: #FAFBF8;
  border-color: #D6E2D9;
}

.shop-pill__name {
  font-weight: 700;
  font-size: 0.92rem;
}

.shop-pill--cool .shop-pill__name { color: #A94D18; }
.shop-pill--heat .shop-pill__name { color: #A94D18; }
.shop-pill--neutral .shop-pill__name { color: #26312C; }

.shop-pill__tag {
  font-size: 0.75rem;
  font-weight: 600;
}

.shop-pill--cool .shop-pill__tag { color: #A94D18; }
.shop-pill--heat .shop-pill__tag { color: #A94D18; }
.shop-pill--neutral .shop-pill__tag { color: #58685E; }

/* ---- Chip ---- */

.shop-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.shop-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  border: 1px solid;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.15s ease;
}

a.shop-chip,
a.shop-chip:hover {
  text-decoration: none;
}

.shop-chip--cool {
  background: #fff;
  border-color: #E5EFE7;
  color: #A94D18;
}
.shop-chip--cool:hover { background: #F0F5EF; }

.shop-chip--heat {
  background: #fff;
  border-color: #E5EFE7;
  color: #A94D18;
}
.shop-chip--heat:hover { background: #FFF4EC; }

.shop-chip--neutral {
  background: #fff;
  border-color: #D6E2D9;
  color: #26312C;
}
.shop-chip--neutral:hover { background: #FAFBF8; }

/* Lock text color against the global a[href^="/go/"]:hover rule —
   same specificity-matching technique as the text-decoration fix above. */
a.shop-chip--cool,
a.shop-chip--cool:hover { color: #A94D18; }

a.shop-chip--heat,
a.shop-chip--heat:hover { color: #A94D18; }

a.shop-chip--neutral,
a.shop-chip--neutral:hover { color: #26312C; }



.shop-chip--commercial {
  background: #fff;
  border-color: var(--ss-shop-border);
  color: var(--ss-cedar-dark);
}

.shop-chip--commercial:hover {
  background: var(--ss-shop-hover);
  border-color: var(--ss-cedar);
  color: var(--ss-cedar-dark);
}

a.shop-chip--commercial,
a.shop-chip--commercial:hover {
  color: var(--ss-cedar-dark);
}

/* Align commercial /go/ links with the centered actions in guide CTAs.
   An affiliate pair stays side by side when space allows and wraps into
   equally sized, centered buttons on smaller screens. Other chip rows,
   including dynamic result cards and header/footer highlights, are unchanged. */
.guide-cta .shop-chip-row {
  justify-content: center;
  align-items: stretch;
  gap: 10px;
  max-width: 560px;
  margin: 14px auto 12px;
}

.guide-cta .shop-chip-row .shop-chip {
  flex: 0 1 270px;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  justify-content: center;
  text-align: center;
  padding: 10px 16px;
}


/* Shopping options follow a completed calculation, not the input form.
   Keep the same chip appearance and centering as the guide CTA. */
.result-offers {
  margin: 12px 0 0;
}

.result-offers[hidden] {
  display: none;
}

.result-offers .shop-chip-row {
  justify-content: center;
  align-items: stretch;
  gap: 10px;
}

.result-offers .shop-chip-row .shop-chip {
  flex: 0 1 250px;
  min-width: 0;
  max-width: 100%;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  padding: 10px 14px;
}

/* Lead-in label that sits above a chip row. */
.shop-chip-label {
  font-weight: 700;
  font-size: 0.85rem;
  color: #26312C;
  margin: 18px 0 8px;
}

.shop-chip-label:first-child {
  margin-top: 0;
}

@media (max-width: 480px) {
  .shop-pill-row,
  .shop-chip-row {
    gap: 10px;
  }
}

/* ===============================
   Shared Homepage / Methodology
================================ */

.home-hero {
  padding: 16px 0 4px;
}

.hero-kicker {
  margin: 0 0 8px;
  text-align: center;
  color: #A94D18;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.home-hero h1 {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.15;
}

.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
}

.button--primary {
  background: #244B3B;
  color: #fff;
  border-color: #244B3B;
}

.button--primary:hover {
  background: #26312C;
  color: #fff;
  border-color: #26312C;
}

.button--secondary {
  background: #fff;
  color: #244B3B;
  border-color: #B9CDBF;
}

.button--secondary:hover {
  background: #F0F5EF;
  color: #26312C;
  border-color: #9AB8A5;
}

.home-paths {
  margin-top: 42px;
}

.category-grid--paths {
  gap: 16px;
}

.category-card--static {
  border: 1px solid #D6E2D9;
  border-top: 4px solid #D56A27;
}

.category-card--static:hover {
  background: #fff;
}

.category-card__eyebrow {
  display: block;
  margin-bottom: 6px;
  color: #A94D18;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.trust-callout {
  margin-top: 30px;
  background: #F0F5EF;
  border-color: #B9CDBF;
  border-left-color: #A94D18;
}

.decision-tools {
  margin-top: 45px;
}

.tool-status-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 20px;
}

.tool-status-card {
  position: relative;
  padding: 18px 18px 18px 54px;
  background: #fff;
  border: 1px solid #D6E2D9;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(38, 49, 44, 0.04);
}

.tool-status-card__number {
  position: absolute;
  left: 16px;
  top: 20px;
  color: #A94D18;
  font-weight: 800;
  font-size: 0.82rem;
}

.tool-status-card h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.tool-status-card p {
  margin: 0;
  color: #58685E;
  font-size: 0.92rem;
}

.home-authority strong {
  color: #26312C;
}

.methodology-hero {
  margin-bottom: 28px;
}

.methodology-summary {
  padding: 18px 20px;
  background: #F0F5EF;
  border-left: 4px solid #244B3B;
  border-radius: 8px;
}

.methodology-summary h2 {
  margin-top: 0;
}

.source-hierarchy {
  padding-left: 0;
  list-style: none;
  counter-reset: source-step;
}

.source-hierarchy li {
  position: relative;
  margin: 0 0 12px;
  padding: 14px 14px 14px 50px;
  background: #fff;
  border: 1px solid #D6E2D9;
  border-radius: 8px;
  counter-increment: source-step;
}

.source-hierarchy li::before {
  content: counter(source-step);
  position: absolute;
  left: 14px;
  top: 14px;
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #244B3B;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

.source-hierarchy strong,
.source-hierarchy span {
  display: block;
}

.source-hierarchy span {
  margin-top: 3px;
  color: #58685E;
  font-size: 0.9rem;
  line-height: 1.45;
}

.methodology-note {
  margin: 20px 0 0;
  padding: 16px 18px;
  background: #FFF4EC;
  border-left: 4px solid #D56A27;
  border-radius: 8px;
}

.methodology-note strong {
  color: #A94D18;
}

.methodology-note p {
  margin-bottom: 0;
}

.status-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.status-item {
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #D6E2D9;
  border-left-width: 4px;
  border-radius: 8px;
}

.status-item h3 {
  margin: 0 0 5px;
  font-size: 0.9rem;
  letter-spacing: 0.015em;
}

.status-item p {
  margin: 0;
  color: #58685E;
  font-size: 0.9rem;
}

.status-item--approved,
.status-item--verified {
  border-left-color: #24654A;
}

.status-item--caution,
.status-item--adapter,
.status-item--specific {
  border-left-color: #A94D18;
}

.status-item--no {
  border-left-color: #9f1239;
}

.status-item--unknown {
  border-left-color: #58685E;
}

.methodology-checklist {
  columns: 2;
  column-gap: 28px;
  padding-left: 20px;
}

.methodology-checklist li {
  break-inside: avoid;
  margin-bottom: 7px;
}

@media (max-width: 480px) {
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .button {
    width: 100%;
  }

  .methodology-checklist {
    columns: 1;
  }
}

/* ===============================
   Electrical Trade Finder
================================ */
.finder-hero {
  margin-bottom: 22px;
}

.finder-tool {
  margin-top: 30px;
}

.finder-form {
  margin-top: 22px;
}

.field-help {
  display: block;
  margin-top: 5px;
  color: #58685E;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.45;
}

.finder-actions,
.finder-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.finder-actions {
  margin-top: 4px;
}

.finder-actions--utility {
  justify-content: space-between;
  gap: 12px 18px;
  padding-top: 2px;
}

.finder-auto-note {
  margin: 0;
  flex: 1 1 360px;
}

.finder-reset {
  appearance: none;
  border: 0;
  padding: 4px 0;
  background: transparent;
  color: #244B3B;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.finder-reset:hover {
  color: #A94D18;
}

.finder-results {
  margin-top: 24px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.finder-results-summary {
  padding: 20px;
  background: #F0F5EF;
  border: 1px solid #B9CDBF;
  border-left: 4px solid #244B3B;
  border-radius: 10px;
}

.finder-results-summary .result-big {
  color: #244B3B;
  font-size: 1.65rem;
}

.finder-warning {
  margin-top: 12px;
  padding: 13px 15px;
  background: #FFF4EC;
  border: 1px solid #E8C7B0;
  border-left: 4px solid #D56A27;
  border-radius: 8px;
  color: #A94D18;
  font-size: 0.92rem;
  line-height: 1.55;
}

.finder-result-list {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.finder-result-card {
  padding: 18px;
  background: #fff;
  border: 1px solid #D6E2D9;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(38, 49, 44, 0.05);
}

.finder-result-card--best {
  border: 2px solid #244B3B;
  box-shadow: 0 5px 16px rgba(36, 75, 59, 0.12);
}

.finder-result-card__topline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

.finder-rank {
  color: #A94D18;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.finder-status {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.finder-status--approved {
  background: #E8F3EC;
  color: #24654A;
  border: 1px solid #B8DAC5;
}

.finder-status--unknown {
  background: #EFF3EF;
  color: #58685E;
  border: 1px solid #B9CDBF;
}

.finder-status--adapter {
  background: #FFF4EC;
  color: #A94D18;
  border: 1px solid #E8C7B0;
}

.finder-status--no {
  background: #fff1f2;
  color: #9f1239;
  border: 1px solid #fecdd3;
}

.finder-result-card h3 {
  margin: 0 0 4px;
  color: #244B3B;
  font-size: 1.15rem;
}

.finder-class {
  margin: 0 0 12px;
  color: #58685E;
  font-size: 0.86rem;
  font-weight: 600;
}

.finder-note {
  margin: 10px 0 0;
  color: #58685E;
  font-size: 0.9rem;
}

.finder-result-actions {
  margin-top: 15px;
}

.finder-result-actions .button {
  min-height: 39px;
  padding: 8px 13px;
  font-size: 0.86rem;
}

.finder-source-link {
  display: inline-flex;
  align-items: center;
  min-height: 39px;
  color: #244B3B;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.finder-source-link:hover {
  color: #26312C;
}

.finder-verification-note {
  margin: 14px 0 0;
  color: #58685E;
  font-size: 0.82rem;
  text-align: center;
}

.finder-empty {
  padding: 20px;
  background: #FFF4EC;
  border: 1px solid #E8C7B0;
  border-left: 4px solid #D56A27;
  border-radius: 10px;
}

.finder-empty .result-big {
  color: #A94D18;
  font-size: 1.45rem;
}

.finder-explanation {
  margin-top: 42px;
}

.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll table {
  min-width: 760px;
}

.source-links li {
  margin-bottom: 10px;
  line-height: 1.55;
}

.source-links a {
  font-weight: 700;
}

.tool-status-card--live {
  border-left: 4px solid #D56A27;
}

.tool-status-card--live h3 a {
  color: #244B3B;
  text-decoration: none;
}

.tool-status-card--live h3 a:hover {
  color: #A94D18;
  text-decoration: underline;
}

.tool-status-card__live-label {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 6px;
  background: #FFF4EC;
  color: #A94D18;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

@media (max-width: 480px) {
  .finder-actions,
  .finder-result-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .finder-result-actions .button {
    width: 100%;
  }

  .finder-actions--utility {
    display: flex;
  }

  .finder-source-link {
    min-height: auto;
    padding: 5px 0;
  }

  .finder-result-card__topline {
    align-items: flex-start;
  }

  .finder-status {
    line-height: 1.3;
  }
}

@media (max-width: 480px) {
  .header-inner {
    gap: 10px;
  }

  .header-nav {
    white-space: nowrap;
    font-size: 0.78rem;
  }
}

.finder-actions button {
  font: inherit;
  cursor: pointer;
}

/* ===============================
   Compatibility Finder Controls
================================ */
.finder-direction {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}

.finder-direction legend {
  margin-bottom: 10px;
  color: #26312C;
  font-weight: 800;
}

.finder-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.finder-mode-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 70px;
  padding: 12px 13px;
  background: #fff;
  border: 1px solid #B9CDBF;
  border-radius: 9px;
  cursor: pointer;
}

.finder-mode-option:hover {
  border-color: #A94D18;
  background: #FAFBF8;
}

.finder-mode-option input {
  width: auto;
  margin: 4px 0 0;
  flex: 0 0 auto;
  accent-color: #244B3B;
}

.finder-mode-option span {
  display: block;
  color: #26312C;
  font-weight: 750;
  line-height: 1.35;
}

.finder-mode-option small {
  display: block;
  margin-top: 3px;
  color: #58685E;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.4;
}

.finder-mode-option:has(input:checked) {
  background: #F0F5EF;
  border-color: #244B3B;
  box-shadow: inset 0 0 0 1px #244B3B;
}

.finder-warning--neutral {
  background: #F0F5EF;
  border-color: #B9CDBF;
  border-left-color: #A94D18;
  color: #26312C;
}

.finder-result-actions--sources {
  margin-top: 10px;
}

.source-separator {
  margin: 0 5px;
  color: #58685E;
}

.category-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}

.category-card__actions .button {
  margin: 0;
}

@media (max-width: 620px) {
  .finder-mode-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .header-inner {
    align-items: flex-start;
  }

  .header-nav {
    max-width: 165px;
    white-space: normal;
    text-align: right;
    font-size: 0.74rem;
    line-height: 1.55;
  }

  .header-nav span {
    margin: 0 1px;
  }

  .category-card__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .category-card__actions .button {
    width: 100%;
  }
}

/* ===============================
   Electrical trade content / model pages
================================ */

.content-hero {
  margin-bottom: 26px;
}

.content-card-grid,
.comparison-card-grid,
.spec-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 20px 0 26px;
}

.content-card,
.comparison-card,
.spec-card {
  background: #fff;
  border: 1px solid #D6E2D9;
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 3px 8px rgba(38, 49, 44, 0.04);
}

/* Prevent long technical labels/values from escaping narrow spec cards. */
.spec-card {
  min-width: 0;
}

.content-card {
  border-top: 3px solid #D56A27;
}

.content-card__eyebrow {
  display: block;
  margin-bottom: 6px;
  color: #A94D18;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.content-card h3,
.comparison-card h3 {
  margin-top: 0;
}

.content-card h3 a {
  color: #244B3B;
  text-decoration: none;
}

.content-card h3 a:hover {
  color: #A94D18;
  text-decoration: underline;
}

.content-card p:last-child,
.comparison-card p:last-child,
.comparison-card ul:last-child,
.spec-card small:last-child {
  margin-bottom: 0;
}

.comparison-card {
  border-left: 4px solid #244B3B;
}

.comparison-card:nth-child(even) {
  border-left-color: #A94D18;
}

.comparison-card ul {
  padding-left: 20px;
}

.comparison-card li {
  margin-bottom: 7px;
}

.spec-card span,
.spec-card strong,
.spec-card small {
  display: block;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.spec-card span {
  color: #58685E;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.spec-card strong {
  margin: 5px 0 6px;
  color: #244B3B;
  font-size: 1.15rem;
}

.spec-card small {
  color: #58685E;
  line-height: 1.45;
}

@media (min-width: 700px) {
  .content-card-grid,
  .comparison-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

/* ===============================
   Compatibility finder / calculator controls
================================ */
.finder-status--caution {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
}

.finder-result-card .finder-result-actions--sources {
  align-items: center;
}

.finder-result-card .finder-result-actions--sources .button {
  margin-left: auto;
}

@media (max-width: 620px) {
  .finder-result-card .finder-result-actions--sources .button {
    margin-left: 0;
  }
}



/* Keep long technical strings contained without splitting normal words
   into awkward fragments. */
.spec-card {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}





/* ===============================
   Horizontal calculator result cards
   Full-width rows prevent manufacturer/model labels from becoming
   narrow vertical columns. Static content spec cards remain 1-up/2-up.
================================ */

.finder-results .spec-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.finder-results .spec-card {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(120px, 0.45fr) minmax(0, 1.65fr);
  align-items: center;
  column-gap: 22px;
  row-gap: 4px;
  padding: 16px 18px;
}

.finder-results .spec-card h3 {
  margin: 0;
  color: var(--ss-forest);
  font-size: 1rem;
  line-height: 1.3;
}

.finder-results .spec-card strong {
  margin: 0;
  white-space: nowrap;
  font-size: 1.15rem;
}

.finder-results .spec-card small {
  margin: 0;
  line-height: 1.45;
}

/* On narrower screens the card remains full width, but its contents stack
   naturally rather than forcing three compressed columns. */
@media (max-width: 760px) {
  .finder-results .spec-card {
    grid-template-columns: 1fr;
    align-items: start;
    row-gap: 5px;
  }

  .finder-results .spec-card strong {
    white-space: normal;
  }
}

/* ===============================
   Selector tool layout
================================ */

.tool-input-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}


.result-matches {
  margin-top: 24px;
}

.result-matches > h2,
.result-matches > h3 {
  text-align: left;
}


@media (max-width: 700px) {
  .tool-input-grid {
    grid-template-columns: 1fr;
  }
}


/* Mower comparison: contain wide tables without widening result cards. */
body[data-tool="compare-mowers"] .calculator-result,
body[data-tool="compare-mowers"] .result-card,
body[data-tool="compare-mowers"] .comparison-table-scroll,
body[data-tool="compare-mowers"] .comparison-card-grid,
body[data-tool="compare-mowers"] .comparison-card {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

body[data-tool="compare-mowers"] .comparison-card-grid {
  width: 100%;
}

.comparison-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 10px;
}

.comparison-scroll-note {
  flex: 1 1 230px;
  margin: 0;
  font-size: 0.86rem;
}

.comparison-print-button {
  flex: 0 0 auto;
}

.comparison-toolbar-actions,
.comparison-view-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.comparison-toolbar-actions {
  justify-content: flex-end;
}

.comparison-view-button[aria-pressed="true"] {
  background: #244B3B;
  color: #fff;
  border-color: #244B3B;
}

.comparison-view-button[aria-pressed="true"]:hover {
  background: #26312C;
  color: #fff;
  border-color: #26312C;
}

.comparison-view-status {
  margin: 0 0 10px;
  font-size: 0.86rem;
}

@media (max-width: 700px) {
  body[data-tool="compare-mowers"] .comparison-table th:first-child,
  body[data-tool="compare-mowers"] .comparison-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
    box-shadow: 1px 0 0 #D6E2D9;
  }

  body[data-tool="compare-mowers"] .comparison-table thead th:first-child {
    z-index: 2;
    background: #F0F5EF;
  }
}

@media (max-width: 520px) {
  .guide-cta-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .guide-cta-actions .button,
  .comparison-print-button {
    width: 100%;
  }

  .comparison-toolbar-actions,
  .comparison-view-toggle {
    width: 100%;
  }

  .comparison-view-toggle .comparison-view-button {
    flex: 1 1 0;
  }
}

@media print {
  body[data-tool="compare-mowers"] #header,
  body[data-tool="compare-mowers"] #footer,
  body[data-tool="compare-mowers"] main.container > .hint,
  body[data-tool="compare-mowers"] main.container > .hero,
  body[data-tool="compare-mowers"] main.container > section:not(.finder-tool),
  body[data-tool="compare-mowers"] .finder-tool > h2,
  body[data-tool="compare-mowers"] .finder-form > .tool-input-grid,
  body[data-tool="compare-mowers"] .finder-actions--utility,
  body[data-tool="compare-mowers"] .comparison-toolbar,
  body[data-tool="compare-mowers"] .finder-result-actions {
    display: none !important;
  }

  body[data-tool="compare-mowers"] main.container {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  body[data-tool="compare-mowers"] .finder-tool,
  body[data-tool="compare-mowers"] .finder-form,
  body[data-tool="compare-mowers"] .finder-results,
  body[data-tool="compare-mowers"] .result-card {
    margin: 0;
    padding: 0;
    box-shadow: none;
  }

  body[data-tool="compare-mowers"] .comparison-table-scroll {
    overflow: visible;
  }

  body[data-tool="compare-mowers"] .comparison-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    font-size: 8.5pt;
  }

  body[data-tool="compare-mowers"] .comparison-table th,
  body[data-tool="compare-mowers"] .comparison-table td {
    padding: 5px;
    overflow-wrap: anywhere;
  }

  body[data-tool="compare-mowers"] .comparison-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body[data-tool="compare-mowers"] .comparison-card {
    break-inside: avoid;
    box-shadow: none;
  }
}


/* ===============================
   Lawn Mower Matcher
   Scoped additions only; shared finder components above remain unchanged.
================================ */
body[data-tool="mower-fit-checker"] .primary-tool {
  overflow: visible;
}

/* Keep the Matcher as a simple top-to-bottom decision flow: one input per row.
   This override is deliberately page-scoped so shared selector grids elsewhere
   retain their existing two-column desktop layout. */
body[data-tool="mower-fit-checker"] .tool-input-grid {
  grid-template-columns: 1fr;
  gap: 14px;
}

body[data-tool="mower-fit-checker"] .tool-input-grid > label {
  display: block;
}

/* Match the two standalone calculators and Compare selector flow to the same
   simple input pattern: one full-width control per row with the label above it.
   This remains deliberately page-scoped so unrelated selector grids keep their
   existing layouts. */
body[data-tool="mower-battery-runtime-calculator"] .tool-input-grid,
body[data-tool="mower-slope-calculator"] .tool-input-grid,
body[data-tool="compare-mowers"] .compare-selector-grid {
  grid-template-columns: 1fr;
  gap: 14px;
}

body[data-tool="mower-battery-runtime-calculator"] .tool-input-grid > label,
body[data-tool="mower-slope-calculator"] .tool-input-grid > label,
body[data-tool="compare-mowers"] .compare-selector-grid > label {
  display: block;
}

.matcher-fieldset {
  margin: 0;
  padding: 18px;
  border: 1px solid #D6E2D9;
  border-radius: 10px;
  background: #FAFBF8;
}

.matcher-fieldset legend {
  padding: 0 8px;
  color: #244B3B;
  font-size: 1rem;
  font-weight: 800;
}

.matcher-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 22px;
  padding: 12px 13px;
  background: #F0F5EF;
  border: 1px solid #D6E2D9;
  border-radius: 8px;
  cursor: pointer;
}

.matcher-checkbox input {
  width: auto;
  margin: 4px 0 0;
  flex: 0 0 auto;
  accent-color: #244B3B;
}

.matcher-checkbox span,
.matcher-checkbox small {
  display: block;
}

.matcher-checkbox small {
  margin-top: 3px;
  color: #58685E;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.45;
}

/* Matcher compact result metrics use the same horizontal inner-card
   treatment as Compare: one full-width row per metric, label left and
   value/details right. This avoids narrow vertical stat cards. */
.matcher-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 16px;
}

.matcher-summary-grid > div {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  background: #fff;
  border: 1px solid #D6E2D9;
  border-radius: 8px;
  text-align: left;
}

.matcher-summary-grid strong,
.matcher-summary-grid span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.matcher-summary-grid strong {
  order: 2;
  color: #244B3B;
  font-size: 1.1rem;
  line-height: 1.2;
  text-align: right;
}

.matcher-summary-grid span {
  order: 1;
  margin-top: 0;
  color: #58685E;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
}

.matcher-score-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 14px 0;
}

.matcher-score-row > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.75fr) minmax(0, 1.65fr);
  min-width: 0;
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
  padding: 9px 11px;
  background: #F0F5EF;
  border: 1px solid #D6E2D9;
  border-radius: 8px;
}

.matcher-score-row span,
.matcher-score-row strong,
.matcher-score-row small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.matcher-score-row span {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  color: #58685E;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.matcher-score-row strong {
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
  color: #244B3B;
  font-size: 1rem;
  line-height: 1.25;
  text-align: right;
}

.matcher-score-row small {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0;
  color: #58685E;
  font-size: 0.73rem;
  line-height: 1.35;
  text-align: right;
}

body[data-tool="mower-fit-checker"] .finder-result-card ul {
  margin-top: 6px;
}

body[data-tool="mower-fit-checker"] .finder-result-card li {
  margin-bottom: 5px;
}

@media (max-width: 480px) {
  .matcher-fieldset {
    padding: 14px;
  }

  .matcher-score-row > div {
    grid-template-columns: minmax(105px, 0.75fr) minmax(0, 1.65fr);
    column-gap: 10px;
  }
}


/* ===============================
   Mower comparison shared table layout
================================ */

.compare-selector-grid select { width: 100%; }
.compare-product-card { min-width: 0; }

.compare-card-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 14px 0;
}
.compare-card-stats > div {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  background: #F0F5EF;
  border: 1px solid #D6E2D9;
  border-radius: 8px;
}
.compare-card-stats span,
.compare-card-stats strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.compare-card-stats span {
  color: #58685E;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}
.compare-card-stats strong {
  color: #244B3B;
  font-size: 0.92rem;
  line-height: 1.2;
  text-align: right;
}

.comparison-model-summaries {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #D6E2D9;
}
.comparison-model-summaries > h3 {
  margin-bottom: 4px;
}
.comparison-model-summaries > .muted {
  margin-top: 0;
}

.comparison-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.comparison-table { min-width: 900px; margin-top: 12px; }
.comparison-table th,
.comparison-table td {
  vertical-align: top;
  min-width: 155px;
  overflow-wrap: anywhere;
}
.comparison-table th:first-child,
.comparison-table td:first-child { min-width: 185px; }
.comparison-table thead th span { color: #58685E; font-size: 0.78rem; font-weight: 700; }
.comparison-group-row th {
  padding-top: 16px;
  padding-bottom: 9px;
  background: #E5EFE7;
  color: #18382C;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.comparison-difference-row td { background: #FFF9F4; }

.matcher-compare-tray {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0 4px;
  padding: 14px 16px;
  background: #F0F5EF;
  border: 1px solid #D6E2D9;
  border-left: 4px solid #D56A27;
  border-radius: 9px;
}
.matcher-compare-tray p { margin: 4px 0 0; }
.matcher-compare-tray__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: flex-end;
}
.matcher-compare-toggle[aria-pressed="true"] {
  border-color: #244B3B;
  background: #E5EFE7;
  color: #18382C;
}
.matcher-compare-toggle:disabled { opacity: 0.55; cursor: not-allowed; }
#matcher-compare-link[aria-disabled="true"] { pointer-events: none; opacity: 0.55; }

@media (max-width: 700px) {
  .matcher-compare-tray { align-items: stretch; flex-direction: column; }
  .matcher-compare-tray__actions { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .matcher-compare-tray__actions .button { width: 100%; }
}



/* ===============================
   3-Point hydraulic calculator — Phase 7
================================ */

body[data-tool="mower-slope-calculator"] .hydraulic-result-grid strong {
  color: #244B3B;
  font-size: 1.08rem;
}

body[data-tool="mower-slope-calculator"] .hydraulic-result-status {
  max-width: 900px;
  font-size: clamp(1.45rem, 3vw, 2.05rem);
}

body[data-tool="mower-slope-calculator"] .result-subblock p {
  overflow-wrap: anywhere;
}

body[data-tool="mower-slope-calculator"] input::placeholder {
  color: #58685E;
  opacity: 1;
}

/* Lawn Mower Match: constrained comparison tables and output text. Existing base palette/layout retained. */
.mower-compare-scroll { overflow-x: auto; max-width: 100%; }
.mower-compare-scroll table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.mower-compare-scroll th, .mower-compare-scroll td { padding: .6rem; border-bottom: 1px solid var(--ss-border); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.mower-compare-scroll th { background: var(--ss-forest-mist); }
.mower-result-meta { font-size: .88rem; line-height: 1.55; }
.mower-result-meta p { margin: .5rem 0; }
.mower-result-card-status { margin-bottom: .5rem; font-size:.78rem; font-weight:700; }
.mower-result-card-status--outside { color: #A12D26; }
.mower-result-card-status--verify { color: #99551A; }
.mower-result-card-status--within { color: #244B3B; }
.mower-source { overflow-wrap:anywhere; font-size:.83rem; }
.mower-two-number { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:10px 0; }
.mower-two-number>div { background:var(--ss-forest-mist); padding:12px; border-radius:8px; }
.mower-two-number strong {display:block;font-size:1.25rem;}
@media(max-width:420px) { .mower-two-number { grid-template-columns:1fr; } }

/* Lawn Mower Match: full-width fields and stacked labels for longer choices.
   Overrides only the mower calculator forms; colours follow Palette 1. */
body[data-tool="homepage"] .calculator-form .tool-input-grid,
body[data-tool="mower-fit-checker"] .calculator-form .tool-input-grid,
body[data-tool="mower-slope-calculator"] .calculator-form .tool-input-grid,
body[data-tool="mower-battery-runtime-calculator"] .calculator-form .tool-input-grid,
body[data-tool="mower-cost-calculator"] .calculator-form .tool-input-grid,
body[data-tool="compare-mowers"] .calculator-form .tool-input-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.calculator-form .tool-input-grid > label {
  display: block;
  min-width: 0;
}

.calculator-form .tool-input-grid input,
.calculator-form .tool-input-grid select {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 6px;
}

.calculator-form .tool-input-grid select {
  white-space: normal;
}

.calculator-form .tool-input-grid .field-help {
  display: block;
  margin-top: 5px;
  font-weight: 400;
  line-height: 1.45;
}

/* Lawn area calculator: preserve full-width vertical inputs from Batch 1. */
body[data-tool="lawn-area-calculator"] .calculator-form .tool-input-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
body[data-tool="lawn-area-calculator"] .calculator-form .tool-input-grid > label {
  display: block;
  min-width: 0;
}
body[data-tool="lawn-area-calculator"] .calculator-form .tool-input-grid input,
body[data-tool="lawn-area-calculator"] .calculator-form .tool-input-grid select {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 6px;
}
.lmm-area-zone {
  min-width: 0;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid #D6E2D9;
  border-radius: 10px;
}
.lmm-area-zone legend { font-weight: 700; padding: 0 5px; }
body[data-tool="lawn-area-calculator"] .lmm-area-zone label[hidden],
body[data-tool="lawn-area-calculator"] .lmm-area-zone .area-remove[hidden] { display: none; }
.lmm-area-zone .area-remove { margin-top: 14px; }
.lmm-area-actions { margin: 14px 0 20px; }
body[data-tool="lawn-area-calculator"] #area-result > .button {
  margin-top: 12px;
  max-width: 100%;
  white-space: normal;
}

/* Batch 3: compact, accessible comparison examples. */
body[data-tool="compare-mowers"] .compare-presets {
  margin: 14px 0 20px;
  padding: 16px;
  background: #F0F5EF;
  border: 1px solid #D6E2D9;
  border-radius: 10px;
}
body[data-tool="compare-mowers"] .compare-presets p {
  margin: 0 0 12px;
}
body[data-tool="compare-mowers"] .compare-preset-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}
body[data-tool="compare-mowers"] .compare-preset-actions .button {
  margin: 0;
  white-space: normal;
  text-align: center;
  line-height: 1.35;
}
@media (max-width: 560px) {
  body[data-tool="compare-mowers"] .compare-preset-actions {
    flex-direction: column;
  }
  body[data-tool="compare-mowers"] .compare-preset-actions .button {
    width: 100%;
  }
}