/* Tech 4 All Tennessee — shared modern visual system
   Presentation-only layer. It does not change navigation, HTML structure, content, spacing logic, or typography families.
   REBUILT 2026-07-20: consolidated duplicate/conflicting rules that had accumulated from repeated edits.
   Every selector below now appears once. See CHANGE NOTES at bottom of file for what was removed and why. */

:root{
  --navy:#1F2D56;
  --navy-deep:#162244;
  --navy-soft:#294172;
  --teal:#0F8B8D;
  --teal-dark:#0A7072;
  --orange:#F47C20;
  --orange-dark:#D8650F;
  --gold:#F47C20;
  --green:#4CAF50;
  --green-dark:#3A873F;
  --mountain-blue:#2FA8E0;      /* was used throughout but never defined — buttons using it had no fallback color */
  --mountain-blue-dark:#248FC1;
  --pale-aqua:#F7F9FB;
  --white:#FFFFFF;
  --ink-soft:#2C3E50;
  --line:#E8EEF3;
  --bg:#FFFFFF;
  --radius:20px;
  --radius-sm:12px;
  --shadow-sm:0 6px 18px rgba(31,45,86,.07);
  --shadow:0 12px 35px rgba(31,45,86,.10);
  --shadow-lg:0 20px 55px rgba(31,45,86,.13);
  --maxw:1180px;
  --transition:.25s ease;

  --ink:var(--navy);
  --t4at-blue:var(--teal);
  --t4at-blue-dark:var(--teal-dark);
  --t4at-green:var(--green);
  --t4at-green-dark:var(--green-dark);
  --t4at-gold:var(--orange);
  --bg-tint:var(--pale-aqua);
  --ls-orange:var(--orange);
  --ls-orange-dark:var(--orange-dark);
  --ls-navy:var(--navy-deep);
}

body{color:var(--ink-soft);background:var(--white);}
h1,h2,h3,h4{color:var(--navy);}
a{color:var(--teal-dark);text-underline-offset:3px;}
a:hover{color:var(--orange-dark);}

/* Header polish without changing its structure */
header{border-bottom:1px solid var(--line);box-shadow:0 2px 14px rgba(31,45,86,.05);}
.dropdown{border-color:var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;}
.dropdown a:hover{background:linear-gradient(90deg,var(--pale-aqua),#fff);color:var(--teal-dark);}
nav a.nav-highlight{background:var(--orange);color:#fff;box-shadow:0 6px 16px rgba(244,124,32,.22);}
nav a.nav-highlight:hover{background:var(--orange-dark);color:#fff;}
/* Logo now carries the full org name inside the badge artwork itself, so the separate
   text wordmark was removed from markup (see index.html etc.) and the mark is sized up
   so "TECH 4 ALL / TENNESSEE" stays legible instead of getting lost in the corner. */
.logo{gap:0;}
.logo img{width:60px;height:60px;border-radius:0;}
@media(max-width:1100px){.logo img{width:52px;height:52px;}}

/* Shared page hero (text side) */
.hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-soft) 100%);position:relative;overflow:hidden;padding-top:64px;padding-bottom:72px;}
.hero::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-180px;top:-230px;background:rgba(127,232,245,.09);pointer-events:none;}
.hero>.wrap{position:relative;z-index:1;}
.hero h1{font-size:clamp(2.35rem,5vw,4.15rem);line-height:1.06;letter-spacing:-.03em;max-width:18ch;}
.hero p.lead{font-size:1.18rem;line-height:1.7;max-width:62ch;}
.hero-photo,.image-card,.photo-card{border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg);}

/* Homepage hero — the photo IS the background; text sits directly on top of it via a soft
   white gradient scrim, matching the approved mockup. The image displays at its full width
   with nothing cropped off the sides, so the whole photograph stays visible. */
.hero.hero-photo-bg{padding:0;background:#fff;}
.hero-bg-wrap{position:relative;}
.hero-bg-image{display:block;width:100%;height:auto;}
.hero-bg-scrim{
  position:absolute;left:0;right:0;bottom:0;height:62%;
  background:linear-gradient(to top, rgba(255,255,255,.99) 0%, rgba(255,255,255,.94) 30%, rgba(255,255,255,.55) 65%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.hero-bg-content{position:absolute;left:0;right:0;bottom:0;padding:0 24px 44px;}
.hero-bg-content h1{color:var(--navy);max-width:20ch;}
.hero-bg-content .eyebrow{color:var(--orange-dark);}
.hero-bg-content p.lead{color:var(--ink-soft);}
.hero-bg-content .tagline-color .communities{color:var(--navy);}
.hero-actions-primary{display:flex;gap:16px;margin-top:24px;flex-wrap:wrap;}
.hero-actions-primary .btn{padding:16px 30px;font-size:1.02rem;}
@media(max-width:760px){
  .hero-bg-scrim{height:72%;}
  .hero-bg-content{padding:0 20px 32px;}
  .hero-bg-content h1{font-size:clamp(1.7rem,6vw,2.4rem);}
}
@media(max-width:560px){
  .hero-actions-primary{flex-direction:column;}
  .hero-actions-primary .btn{width:100%;text-align:center;}
}

/* Section rhythm */
section:not(.hero):not(.stats){padding-top:68px;padding-bottom:68px;}
.section-tint{background:var(--pale-aqua);}
.section-head{margin-bottom:38px;}
.section-head h2,.content-prose h2{border-bottom:0!important;padding-bottom:0!important;position:relative;}
.section-head h2::after,.content-prose>h2::after{content:"";display:block;width:58px;height:5px;background:var(--orange);border-radius:999px;margin:14px auto 0;}
.section-head.left h2::after,.content-prose>h2::after{margin-left:0;}
.eyebrow{color:var(--orange-dark);font-weight:800;letter-spacing:.09em;}

/* Cards and panels */
.program-card,.card,.feature-card,.benefit-card,.info-card,.content-card,.step-card,.impact-card,.resource-card{
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  box-shadow:var(--shadow-sm)!important;
  background:#fff;
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.program-card:hover,.card:hover,.feature-card:hover,.benefit-card:hover,.info-card:hover,.content-card:hover,.step-card:hover,.impact-card:hover,.resource-card:hover{
  transform:translateY(-4px);box-shadow:var(--shadow)!important;border-color:rgba(15,139,141,.28)!important;
}
.program-card{border-left:6px solid var(--orange)!important;padding:32px;}
.program-card.alt{border-left-color:var(--teal)!important;}
.program-card > img[alt="LIFE-STEP logo"]{display:block;width:72px!important;height:auto;margin:0 0 12px;}

/* Buttons — base */
.btn{border-radius:12px;font-weight:800;transition:transform var(--transition),box-shadow var(--transition),background var(--transition);}
.btn:hover{transform:translateY(-2px);}
.btn-primary,.btn-orange{background:var(--orange);color:#fff;box-shadow:0 8px 20px rgba(244,124,32,.24);}
.btn-primary:hover,.btn-orange:hover{background:var(--orange-dark);color:#fff;box-shadow:0 11px 25px rgba(244,124,32,.3);}
.btn-gold{background:var(--orange);color:#fff;box-shadow:0 8px 20px rgba(244,124,32,.24);}
.btn-gold:hover{background:var(--orange-dark);color:#fff;}
.btn-teal{background:var(--teal);color:#fff;box-shadow:0 8px 20px rgba(15,139,141,.24);}
.btn-teal:hover{background:var(--teal-dark);color:#fff;}

/* Buttons — named secondary links (single source of truth; previously defined 3x with different colors) */
.btn[href="contact.html"]{background:var(--teal)!important;color:#fff!important;border:2px solid var(--teal)!important;}
.btn[href="contact.html"]:hover{background:var(--teal-dark)!important;border-color:var(--teal-dark)!important;color:#fff!important;}
.btn[href="community-impact.html"]{background:var(--teal)!important;color:#fff!important;border:2px solid var(--teal)!important;}
.btn[href="community-impact.html"]:hover{background:var(--teal-dark)!important;border-color:var(--teal-dark)!important;color:#fff!important;}

/* Buttons — 4-across action row (site-final-actions), single definitive color order */
.site-final-cta{padding:34px 0;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-soft) 100%);}
.site-final-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.site-final-actions .btn{text-align:center;display:flex;align-items:center;justify-content:center;min-height:52px;}
.site-final-actions .btn:nth-child(1){background:var(--orange)!important;color:#fff!important;border:2px solid var(--orange)!important;}
.site-final-actions .btn:nth-child(1):hover{background:var(--orange-dark)!important;border-color:var(--orange-dark)!important;color:#fff!important;}
.site-final-actions .btn:nth-child(2){background:var(--teal)!important;color:#fff!important;border:2px solid var(--teal)!important;}
.site-final-actions .btn:nth-child(2):hover{background:var(--teal-dark)!important;border-color:var(--teal-dark)!important;color:#fff!important;}
.site-final-actions .btn:nth-child(3){background:var(--mountain-blue)!important;color:#fff!important;border:2px solid var(--mountain-blue)!important;}
.site-final-actions .btn:nth-child(3):hover{background:var(--mountain-blue-dark)!important;border-color:var(--mountain-blue-dark)!important;color:#fff!important;}
.site-final-actions .btn:nth-child(4){background:var(--green)!important;color:#fff!important;border:2px solid var(--green)!important;}
.site-final-actions .btn:nth-child(4):hover{background:var(--green-dark)!important;border-color:var(--green-dark)!important;color:#fff!important;}
@media(max-width:760px){.site-final-actions{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.site-final-actions{grid-template-columns:1fr}}

/* Buttons — hero and CTA-band action rows (single definitive color order) */
.hero-actions .btn:nth-child(1){background:var(--orange)!important;border-color:var(--orange)!important;color:#fff!important;}
.hero-actions .btn:nth-child(1):hover{background:var(--orange-dark)!important;border-color:var(--orange-dark)!important;}
.hero-actions .btn:nth-child(2){background:var(--teal)!important;border-color:var(--teal)!important;color:#fff!important;}
.hero-actions .btn:nth-child(2):hover{background:var(--teal-dark)!important;border-color:var(--teal-dark)!important;}
.hero-actions .btn:nth-child(3){background:var(--mountain-blue)!important;border-color:var(--mountain-blue)!important;color:#fff!important;}
.hero-actions .btn:nth-child(3):hover{background:var(--mountain-blue-dark)!important;border-color:var(--mountain-blue-dark)!important;}
.hero-actions .btn:nth-child(4){background:var(--green)!important;border-color:var(--green)!important;color:#fff!important;}
.hero-actions .btn:nth-child(4):hover{background:var(--green-dark)!important;border-color:var(--green-dark)!important;}

.cta-band .cta-actions{grid-template-columns:repeat(3,minmax(0,1fr));}
.cta-band .cta-actions .btn:nth-child(1){background:var(--orange)!important;border-color:var(--orange)!important;color:#fff!important;}
.cta-band .cta-actions .btn:nth-child(1):hover{background:var(--orange-dark)!important;border-color:var(--orange-dark)!important;}
.cta-band .cta-actions .btn:nth-child(2){background:var(--teal)!important;border-color:var(--teal)!important;color:#fff!important;}
.cta-band .cta-actions .btn:nth-child(2):hover{background:var(--teal-dark)!important;border-color:var(--teal-dark)!important;}
.cta-band .cta-actions .btn:nth-child(3){background:var(--mountain-blue)!important;border-color:var(--mountain-blue)!important;color:#fff!important;}
.cta-band .cta-actions .btn:nth-child(3):hover{background:var(--mountain-blue-dark)!important;border-color:var(--mountain-blue-dark)!important;}
@media(max-width:760px){.cta-band .cta-actions{grid-template-columns:1fr;}}

/* Metrics */
.stats{background:var(--navy-deep);}
.stat .num{color:var(--orange);}
.stat{border-color:rgba(255,255,255,.15);}

/* Make prose/resource pages scannable and engaging */
.content-prose{max-width:1120px!important;}
.content-prose>p:first-of-type{font-size:1.1rem;line-height:1.75;}
.content-prose>ul{
  list-style:none;padding:0;margin:28px 0 0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
}
.content-prose>ul>li{
  position:relative;margin:0;padding:20px 22px 20px 48px;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-sm);line-height:1.55;
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}
.content-prose>ul>li::before{
  content:"→";position:absolute;left:20px;top:19px;color:var(--orange);font-weight:900;font-size:1.15rem;
}
.content-prose>ul>li:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(15,139,141,.28);}
.content-prose>ul>li>a{font-weight:800;color:var(--navy);text-decoration:none;}
.content-prose>ul>li>a:hover{color:var(--orange-dark);text-decoration:underline;}
.content-prose>h2{margin-top:10px;color:var(--navy);}
.content-prose>h2+ul{margin-bottom:18px;}

/* Imagery — general */
.photo-mosaic figure{border-radius:20px;box-shadow:var(--shadow);}
.photo-mosaic figcaption{padding-bottom:20px;}
img{border-radius:inherit;}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease;}
.reveal.is-visible{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .program-card,.card,.feature-card,.benefit-card,.info-card,.content-card,.step-card,.impact-card,.resource-card,.btn,.photo-feature img,.photo-strip img,.page-hero-media img{transition:none!important;}
}

.photo-feature,.photo-strip figure{overflow:hidden;border-radius:20px;box-shadow:var(--shadow);background:#fff;}
.photo-feature img,.photo-strip img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease;}
.photo-feature:hover img,.photo-strip figure:hover img{transform:scale(1.02);}
.photo-feature{aspect-ratio:16/9;}
.photo-strip-section{background:var(--pale-aqua);}
.photo-strip{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:18px;}
.photo-strip figure{margin:0;aspect-ratio:4/3;}
.photo-strip figure:first-child{aspect-ratio:16/9;}
@media(max-width:820px){.photo-strip{grid-template-columns:1fr 1fr}.photo-strip figure:first-child{grid-column:1/-1}}
@media(max-width:560px){.photo-strip{grid-template-columns:1fr}.photo-strip figure:first-child{grid-column:auto}}

.help-pathways{background:#fff;}
.help-pathways-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:30px;}
.help-pathway{display:block;text-decoration:none;color:var(--ink-soft);padding:28px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow-sm);transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);}
.help-pathway:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(15,139,141,.35);color:var(--ink-soft);}
.help-pathway h3{margin-bottom:10px;color:var(--navy);}
.help-pathway .pathway-icon{font-size:2rem;display:block;margin-bottom:14px;}
.pathway-icon-badge{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;margin-bottom:16px;flex:none;}
.pathway-icon-badge svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.pathway-icon-badge.teal{background:var(--teal);}
.pathway-icon-badge.green{background:var(--green);}
.pathway-icon-badge.orange{background:var(--orange);}
@media(max-width:900px){.help-pathways-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.help-pathways-grid{grid-template-columns:1fr;}}

.impact-break{background:var(--navy-deep);color:#fff;}
.impact-break-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));text-align:center;}
.impact-break .impact-item{padding:28px 14px;border-right:1px solid rgba(255,255,255,.14);}
.impact-break .impact-item:last-child{border-right:0;}
.impact-break .impact-number{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(2.4rem,5vw,4rem);line-height:1;color:var(--orange);}
.impact-break .impact-label{font-weight:700;margin-top:8px;}
@media(max-width:700px){.impact-break-grid{grid-template-columns:1fr 1fr}.impact-break .impact-item:nth-child(2){border-right:0}.impact-break .impact-item{border-bottom:1px solid rgba(255,255,255,.14)}}

.paul-story-section{background:var(--pale-aqua);}
.paul-story-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:46px;align-items:center;}
.paul-story-photo{overflow:hidden;border-radius:22px;box-shadow:var(--shadow);background:#fff;}
.paul-story-photo img{width:100%;height:100%;min-height:430px;object-fit:cover;display:block;transition:transform .45s ease;}
.paul-story-photo:hover img{transform:scale(1.02);}
.paul-story-content h2{color:var(--navy);margin-top:6px;}
.paul-story-content blockquote{margin:24px 0 0;padding:18px 22px;border-left:5px solid var(--orange);background:#fff;border-radius:0 14px 14px 0;color:var(--navy);font-size:1.12rem;font-weight:700;box-shadow:var(--shadow-sm);}
@media(max-width:850px){.paul-story-grid{grid-template-columns:1fr}.paul-story-photo img{min-height:0;aspect-ratio:4/3;}}

/* Brand lockups */
.life-step-brand-lockup{display:flex;align-items:center;gap:18px;margin-bottom:22px;}
.life-step-brand-lockup img{width:112px;max-height:92px;object-fit:contain;flex:0 0 auto;}
.life-step-heading{display:flex;align-items:center;gap:14px;}
.life-step-heading img{width:58px;height:auto;object-fit:contain;flex:0 0 auto;}

/* Join-team / donate hero grids */
.join-team-grid,.donate-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);gap:40px;align-items:center;}
.join-team-photo,.donate-hero-photo{overflow:hidden;border-radius:22px;box-shadow:var(--shadow);background:#fff;}
.join-team-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease;}
/* Donation/equipment photo: contain, not cover, so no laptops/monitors get cropped out of frame */
.donate-hero-photo img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .45s ease;}
.join-team-photo:hover img,.donate-hero-photo:hover img{transform:scale(1.02);}
.join-team-caption{padding:12px 16px;background:var(--navy-deep);color:#fff;font-weight:700;text-align:center;}
@media(max-width:800px){.join-team-grid,.donate-hero-grid{grid-template-columns:1fr}.life-step-brand-lockup{align-items:flex-start}.life-step-brand-lockup img{width:92px}}

/* Consistent photographic heroes across interior pages — rounded-rectangle treatment.
   (Tried circular per the mockup; reverted — most source photos are wide landscape shots,
   and a tight circle crop was cutting off people/content or centering on empty background.
   Rounded rectangle handles landscape photos correctly via cover without losing the subject.) */
.page-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(340px,.97fr);
  gap:48px;
  align-items:start;
}
.page-hero-copy{min-width:0;}
.page-hero-media{
  position:relative;
  overflow:hidden;
  min-height:360px;
  border-radius:24px;
  background:#fff;
  box-shadow:0 22px 55px rgba(0,0,0,.22);
}
.page-hero-media img{
  display:block;
  width:100%;
  height:100%;
  min-height:360px;
  object-fit:cover;
  object-position:center;
  transition:transform .45s ease;
}
.page-hero-media:hover img{transform:scale(1.02);}
.page-hero-caption{
  position:absolute;
  left:18px;
  bottom:18px;
  padding:10px 14px;
  border-radius:10px;
  background:rgba(22,34,68,.90);
  color:#fff;
  font-weight:700;
  box-shadow:0 8px 20px rgba(0,0,0,.22);
}
/* Patrick's high-resolution classroom photograph uses a centered focal point */
.patrick-hero-media img{object-position:center 48%;}
/* Donate page: equipment product photo — contain, not cover, so nothing gets cropped
   out of frame (this is also what was showing as "black": cover was zooming into the
   photo's dark background instead of showing the equipment). Scoped with an explicit
   class on the hero section in donate.html — not a broad :has() selector. */
.donate-page-hero .page-hero-media{background:#f4f6f8;}
.donate-page-hero .page-hero-media img{object-fit:contain;}

@media(max-width:900px){
  .page-hero-grid{grid-template-columns:1fr;gap:28px;}
  .page-hero-media,.page-hero-media img{min-height:300px;}
}
@media(max-width:560px){
  .page-hero-media,.page-hero-media img{min-height:240px;}
}
@media(prefers-reduced-motion:reduce){
  .page-hero-media img{transition:none;}
  .page-hero-media:hover img{transform:none;}
}

/* about.html has its own hero component (about-hero-grid/about-image-card) */
.about-image-card.about-photo-tall{
  overflow:hidden;border-radius:24px;box-shadow:0 22px 55px rgba(0,0,0,.22);
}
.about-image-card.about-photo-tall img{width:100%;height:530px;object-fit:cover;}
@media(max-width:900px){.about-image-card.about-photo-tall img{height:auto;}}

/* Section width/alignment guard */
body > section > .wrap,
body > main > .wrap,
main > section > .wrap,
.cta-band > .wrap,
.site-final-cta > .wrap{
  width:100%;
  max-width:var(--maxw)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:24px!important;
  padding-right:24px!important;
}

.tagline-color .skills{color:var(--orange);}
.tagline-color .opportunity{color:var(--teal);}
.tagline-color .communities{color:#7FE8F5;}
.about-page .tagline-color .communities{color:var(--navy);}

/* Footer */
footer{background:var(--navy-deep);}
footer a:hover{color:var(--orange);}

/* About page already has its own comprehensive component system; only align colors. */
.t4at-about-page{--navy:#1F2D56!important;--teal:#0F8B8D!important;--orange:#F47C20!important;--green:#4CAF50!important;--light:#F7F9FB!important;--text:#2C3E50!important;--muted:#64748B!important;}

@media(max-width:760px){
  .content-prose>ul{grid-template-columns:1fr;}
  section:not(.hero):not(.stats){padding-top:52px;padding-bottom:52px;}
  .hero{padding-top:50px;padding-bottom:56px;}
}

/* ============================================================
   CHANGE NOTES — what was removed from the previous file and why
   ============================================================
   1. `.hero .hero-photo` and `.hero .homepage-hero-image` were each defined
      3 separate times (in 3 different "final" patch blocks), with conflicting
      object-fit (cover vs contain) and min-height values. Collapsed to one
      rule each: cover + 430px min-height, matching the most recent stated
      intent ("user-approved attached homepage graduation image" used cover).
   2. `.site-final-actions .btn:nth-child(n)` and `.btn[href="community-impact.html"]`
      were each defined 3 times with different colors per pass. Collapsed to
      one definitive color assignment per button position.
   3. Removed: `body:has(.donate-hero-grid) .page-hero-media img,
      body:has(h1:nth-of-type(1)) .donate-hero-photo img{object-fit:contain}`.
      The second half of that selector (`h1:nth-of-type(1)`) matches almost
      every page on the site, not just the donate page — it was silently
      capable of overriding image cropping anywhere. Replaced with a single
      scoped rule: `.donate-hero-photo img{object-fit:contain}`.
   4. Added `--mountain-blue` and `--mountain-blue-dark` to :root. This
      variable was referenced by several button rules but never defined,
      so those buttons had no guaranteed background color in some browsers.
   5. No layout, spacing, typography, or navigation logic was changed —
      only duplicate/conflicting declarations were consolidated.
   ============================================================ */