:root{--green:#0f9f7a;--green-dark:#08765b;--blue:#0b6b87;--ink:#1f2933;--muted:#52606d;--line:#d9e2ec;--soft:#f5f7f6;--card:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--soft);color:var(--ink)}
header{background:linear-gradient(135deg,var(--green),var(--blue));color:white;padding:28px 18px}
.header-inner,main,footer,.nav-inner{max-width:1180px;margin:0 auto}
header h1{margin:0;font-size:34px}
header p{margin:8px 0 0;line-height:1.45}
nav{background:#083d4f}
.nav-inner{display:flex;gap:16px;flex-wrap:wrap;padding:12px 18px}
nav a{color:white;text-decoration:none;font-weight:700;font-size:14px}
main{padding:18px}
.hero,.card,.article,.side-card,.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 20px rgba(20,30,40,.05)}
.hero{padding:28px;margin:18px 0}
.hero h2{font-size:38px;line-height:1.1;margin:8px 0 10px}
.hero p{font-size:17px;line-height:1.55;color:var(--muted);max-width:900px}
.eyebrow{color:var(--green-dark);text-transform:uppercase;font-weight:700;letter-spacing:.06em;font-size:13px;margin:0 0 8px}
.search-wrap{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.search-wrap input{flex:1;min-width:240px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;font-size:16px}
.btn,button{display:inline-block;background:var(--green);color:white;text-decoration:none;border:0;border-radius:10px;padding:10px 12px;font-weight:700;cursor:pointer}
.btn:hover,button:hover{background:var(--green-dark)}
.text-link{display:block;color:var(--green-dark);font-weight:700;text-decoration:none;margin-top:10px;font-size:14px}
.section-head{margin:28px 0 12px}
.section-head h2{margin:0;font-size:28px}
.section-head p{margin:5px 0 0;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.issue{padding:16px;min-height:155px;display:flex;flex-direction:column;justify-content:space-between}
.issue h3{margin:0 0 8px;font-size:20px}
.issue p{color:var(--muted);line-height:1.45;margin:0 0 12px}
.more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.small-issue{background:white;border:1px solid var(--line);border-radius:12px;padding:13px;text-decoration:none;color:var(--ink)}
.small-issue strong{display:block;font-size:15px}
.small-issue span{display:block;color:var(--green-dark);font-weight:700;font-size:13px;margin-top:5px}
.layout{display:grid;grid-template-columns:minmax(0,2fr) 340px;gap:18px;align-items:start}
.article{padding:26px}
.article h1{font-size:36px;margin:6px 0 8px}
.article h2{border-top:1px solid var(--line);padding-top:20px;margin-top:22px}
.article p,.article li{font-size:16px;line-height:1.7;color:#2d3748}
.byline{color:var(--muted);font-size:14px;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:18px}
.quick{background:#e6f7f2;border-left:5px solid var(--green);border-radius:12px;padding:16px;margin:18px 0}
.side-card{padding:18px;margin-bottom:14px}
.side-card h3{margin-top:0}
.side-card a{color:var(--green-dark);font-weight:700;text-decoration:none}
.video{height:130px;border-radius:12px;background:#e6eef3;display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700}
.question{background:#e6f7f2;border-left:5px solid var(--green);border-radius:12px;padding:18px;margin:18px 0}
.question h2{margin:0 0 14px;font-size:26px}
.button-row{display:flex;gap:10px;flex-wrap:wrap}
.secondary{background:#e6eef3;color:var(--ink)}
.result{display:none;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;margin-top:14px}
.no-results{display:none;background:#fff3cd;border:1px solid #ffe08a;border-radius:12px;padding:14px;margin-top:12px}
footer{padding:28px 18px 40px;color:var(--muted);line-height:1.5}
@media(max-width:900px){.grid,.more-grid,.layout{grid-template-columns:1fr}.hero h2{font-size:30px}}


/* Phase 15 - Google Docs HTML article integration */
.google-doc-article {
  padding: 24px;
}

.google-doc-article h1 {
  font-size: 32px;
  line-height: 1.18;
  margin: 4px 0 16px;
}

.google-doc-article h2 {
  font-size: 22px;
  line-height: 1.28;
  margin-top: 22px;
  margin-bottom: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.google-doc-article p {
  font-size: 16px;
  line-height: 1.62;
  margin: 0 0 12px;
}

.google-doc-article ul {
  list-style-type: disc;
  margin: 6px 0 14px 24px;
  padding-left: 18px;
}

.google-doc-article li {
  display: list-item;
  list-style-type: disc;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 5px;
}

.google-doc-article .byline {
  margin: 12px 0 18px;
  padding-bottom: 16px;
}

@media (max-width:900px) {
  .google-doc-article {
    padding: 20px;
  }
  .google-doc-article h1 {
    font-size: 28px;
  }
  .google-doc-article h2 {
    font-size: 20px;
  }
}


/* Phase 16 byline cleanup */

.byline {
  font-size: 15px;
  color: #666;
  margin: 6px 0 18px;
  padding-bottom: 12px;
}

.footer-bio {
  margin-top: 42px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: #777;
  line-height: 1.5;
}


/* Phase 18 About cleanup */

.compact-about {
  font-size: 14px;
  line-height: 1.45;
}

.compact-about p {
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 8px;
}

.compact-about h2 {
  font-size: 18px;
  margin-bottom: 8px;
}



/* Phase 19 smaller About section */

.compact-about {
  font-size: 13px;
  line-height: 1.4;
}

.compact-about h2 {
  font-size: 14px;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.compact-about h3 {
  font-size: 16px;
  margin-bottom: 6px;
}

.compact-about p {
  font-size: 13px;
  line-height: 1.4;
  color: #666;
  margin-bottom: 6px;
}



/* Phase 20 force smaller About section */

.about.compact-about,
.compact-about {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.about.compact-about h2,
.compact-about h2 {
  font-size: 11px !important;
  letter-spacing: 0.8px;
  margin-bottom: 3px !important;
  text-transform: uppercase;
}

.about.compact-about h3,
.compact-about h3 {
  font-size: 14px !important;
  margin-bottom: 4px !important;
}

.about.compact-about p,
.compact-about p {
  font-size: 12px !important;
  line-height: 1.35 !important;
  color: #666;
  margin-bottom: 4px !important;
}



/* Phase 21 About moved into footer */
.footer-about {
  display: block;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin-bottom: 6px;
}


/* =========================
   Phase 22 Production Polish
   ========================= */

/* Homepage spacing */
.hero {
  padding-bottom: 18px;
}

.section-title {
  margin-top: 28px;
  margin-bottom: 14px;
}

.issue-grid {
  gap: 14px;
}

.issue-card {
  border-radius: 14px;
  padding: 16px;
  transition: transform .15s ease;
}

.issue-card:hover {
  transform: translateY(-2px);
}

/* Cleaner article layout */
.article,
.google-doc-article {
  max-width: 820px;
  margin: 0 auto;
}

.google-doc-article h1 {
  margin-bottom: 12px;
}

.google-doc-article h2 {
  margin-top: 26px;
  margin-bottom: 10px;
}

.google-doc-article p {
  margin-bottom: 13px;
}

.google-doc-article ul {
  margin-top: 8px;
  margin-bottom: 16px;
}

/* Subtle article utility boxes */
.callout-box {
  background: #f5f5f5;
  border-left: 4px solid #cfcfcf;
  padding: 14px 16px;
  border-radius: 10px;
  margin: 18px 0;
  font-size: 15px;
  line-height: 1.55;
}

/* Standardized article nav */
.article-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid #ddd;
}

.article-nav a {
  display: inline-block;
  padding: 9px 14px;
  border-radius: 8px;
  background: #f3f3f3;
  text-decoration: none;
  font-size: 14px;
}

.article-nav a:hover {
  background: #e9e9e9;
}

/* Footer cleanup */
footer {
  margin-top: 40px;
  padding-top: 18px;
  font-size: 12px;
  line-height: 1.45;
}

/* Mobile optimization */
@media (max-width: 768px) {

  .issue-grid {
    gap: 10px;
  }

  .issue-card {
    padding: 14px;
  }

  .google-doc-article,
  .article {
    padding: 18px;
  }

  .google-doc-article h1 {
    font-size: 27px;
    line-height: 1.18;
  }

  .google-doc-article h2 {
    font-size: 20px;
  }

  .google-doc-article p,
  .google-doc-article li {
    font-size: 15px;
    line-height: 1.58;
  }

  .article-nav {
    flex-direction: column;
  }

  .article-nav a {
    width: 100%;
    text-align: center;
  }
}



/* Phase 23 Full Website Update */
.anchor-issues > span { position: relative; top: -12px; }
.small-issue span a { color: var(--green-dark); font-weight: 700; text-decoration: none; }
.related-links { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.related-links h2 { border-top: 0; padding-top: 0; margin-top: 0; font-size: 22px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.related-grid a { display: block; background: #f5f7f6; border: 1px solid var(--line); border-radius: 12px; padding: 12px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px; }
.troubleshooter-page .panel { padding: 24px; max-width: 820px; margin: 18px auto; }
.troubleshooter-page ol li { margin-bottom: 12px; line-height: 1.6; }
@media(max-width:900px){.related-grid{grid-template-columns:1fr}}


/* Phase 23B - Working Yes/No troubleshooters */
.troubleshooter-flow {
  max-width: 820px;
  margin: 0 auto;
  padding: 26px;
}
.troubleshooter-flow h1 {
  font-size: 34px;
  margin: 6px 0 8px;
}
.troubleshooter-intro {
  color: var(--muted);
  line-height: 1.6;
}
.flow-step {
  display: none;
  background: #e6f7f2;
  border-left: 5px solid var(--green);
  border-radius: 12px;
  padding: 18px;
  margin: 18px 0;
}
.flow-step.active {
  display: block;
}
.flow-step h2 {
  border-top: 0;
  padding-top: 0;
  margin: 0 0 10px;
  font-size: 22px;
}
.flow-step p {
  font-size: 16px;
  line-height: 1.65;
}
.flow-answer {
  display: none;
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  margin-top: 12px;
}
.flow-answer.show {
  display: block;
}
.flow-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.flow-reset {
  background: #e6eef3;
  color: var(--ink);
}
@media (max-width: 768px) {
  .troubleshooter-flow {
    padding: 18px;
  }
  .troubleshooter-flow h1 {
    font-size: 28px;
  }
  .flow-actions button, .flow-actions a {
    width: 100%;
    text-align: center;
  }
}

/* =========================
   Phase 23D Homepage Hero Size Cleanup
   ========================= */
.hero {
  padding: 18px 22px;
  margin: 14px 0 18px;
}

.hero .eyebrow {
  font-size: 11px;
  letter-spacing: .05em;
  margin-bottom: 5px;
}

.hero h2 {
  font-size: 28px;
  line-height: 1.18;
  margin: 4px 0 8px;
  max-width: 760px;
}

.hero p {
  font-size: 15px;
  line-height: 1.45;
  max-width: 760px;
  margin-top: 0;
}

.search-wrap {
  margin-top: 12px;
}

.search-wrap input {
  padding: 11px 13px;
  font-size: 15px;
}

.hero .btn {
  padding: 9px 11px;
  font-size: 14px;
}

@media (max-width: 900px) {
  .hero {
    padding: 16px;
  }

  .hero h2 {
    font-size: 24px;
    line-height: 1.18;
  }

  .hero p {
    font-size: 14px;
  }
}

/* Phase 24 utility pages */
.site-page { margin-top: 18px; }
footer a { color: var(--green-dark); font-weight: 700; text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* Phase 24B homepage cleanup */
.section-head h2 {
  margin-top: 6px;
  margin-bottom: 10px;
}

/* Phase 24E contact form and Apple icon polish */
.contact-form { display: grid; gap: 10px; margin: 18px 0; }
.contact-form label { font-weight: 700; font-size: 14px; color: var(--ink); }
.contact-form input, .contact-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: #fff; }
.contact-form textarea { resize: vertical; }
.contact-form button { justify-self: start; margin-top: 4px; }
.hidden-field { display: none; }
.form-note { color: var(--muted); font-size: 14px !important; }


/* Phase 24N scenic header update - 30% smaller, non-stretched banner */
.site-header{
  background:#f5f7f6;
  color:#102538;
  padding:8px 18px 4px !important;
}
.site-header .header-inner{
  max-width:1180px;
  margin:0 auto;
  min-height:0;
}
.site-header-image{
  display:block;
  width:70%;
  max-width:826px;
  height:auto;
  margin:0 auto;
  object-fit:contain;
  border-radius:12px;
}
@media(max-width:900px){
  .site-header{padding:6px 12px 3px !important;}
  .site-header-image{width:82%;max-width:100%;border-radius:10px;}
}

/* Phase 24N compact homepage problem finder */
main > .hero {
  padding: 14px 16px;
  margin: 12px 0 18px;
  border-radius: 14px;
}

main > .hero .eyebrow {
  font-size: 11px;
  margin: 0 0 4px;
}

main > .hero h2 {
  font-size: 22px;
  line-height: 1.18;
  margin: 0 0 6px;
}

main > .hero p {
  font-size: 14px;
  line-height: 1.35;
  margin: 0;
  max-width: 820px;
}

main > .hero .search-wrap {
  margin-top: 9px;
  gap: 8px;
  align-items: center;
}

main > .hero .search-wrap input {
  padding: 8px 11px;
  font-size: 14px;
  border-radius: 9px;
  min-height: 38px;
}

main > .hero .btn {
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 9px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
}

main > .hero .no-results {
  margin-top: 8px;
  padding: 10px 12px;
  font-size: 13px;
}

@media (max-width: 768px) {
  main > .hero {
    padding: 12px;
    margin: 10px 0 16px;
  }

  main > .hero h2 {
    font-size: 19px;
  }

  main > .hero p {
    font-size: 13.5px;
  }

  main > .hero .search-wrap input,
  main > .hero .btn {
    width: 100%;
  }
}