:root{
  --teal:#004d40;
  --teal-tint:#eef4f2;
  --paper:#ffffff;
  --ink:#14231e;
  --ink-soft:#57665f;
  --brass:#a97c43;
  --brass-deep:#85602f;
  --line:#e2e8e5;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  font-size:16px;
}
h1,h2,.logo-text{font-family:'Sora',system-ui,sans-serif;}
a{color:var(--teal);}
.wrap{max-width:780px;margin:0 auto;padding:0 24px;}

/* Topbar — white, so the teal logo actually reads */
.topbar{background:var(--paper);padding:16px 0;border-bottom:1px solid var(--line);}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.logo-link{display:flex;align-items:center;flex:none;}
.logo{height:30px;width:auto;display:block;}
.topbar-nav{display:flex;gap:22px;flex:1;justify-content:center;}
.topbar-nav a{color:var(--ink-soft);font-size:0.88rem;text-decoration:none;font-weight:500;}
.topbar-nav a:hover{color:var(--teal);}
.topbar-actions{display:flex;gap:10px;align-items:center;flex:none;}
.btn-ghost{color:var(--teal);border:1px solid var(--teal);padding:7px 14px;border-radius:5px;text-decoration:none;font-size:0.84rem;white-space:nowrap;}
.btn-ghost:hover{opacity:0.75;}
.btn-fill{background:var(--teal);color:var(--paper);padding:8px 16px;border-radius:5px;text-decoration:none;font-weight:700;font-size:0.84rem;white-space:nowrap;}
.btn-fill:hover{opacity:0.88;}
@media (max-width:760px){
  .topbar-nav{display:none;}
  .btn-ghost{display:none;}
}

/* Hero — light, airy, not a dark block */
.hero{position:relative;background:var(--teal-tint);padding:60px 0 40px;overflow:hidden;}
.hero-motif{position:absolute;top:-30px;right:-60px;width:340px;height:auto;opacity:0.3;pointer-events:none;}
.hero .wrap{position:relative;z-index:1;}
.hero h1{
  font-size:2.3rem;
  line-height:1.18;
  margin:0 0 16px;
  font-weight:800;
  max-width:15ch;
  letter-spacing:-0.01em;
  color:var(--teal);
}
.hero p{color:var(--ink-soft);font-size:1.05rem;max-width:52ch;margin:0 0 32px;}
.stat-row{display:flex;gap:0;flex-wrap:wrap;border-top:1px solid var(--line);}
.stat{
  display:flex;flex-direction:column;
  padding:18px 26px 0 0;
  margin-right:26px;
  border-right:1px solid var(--line);
}
.stat:last-child{border-right:none;margin-right:0;}
.stat b{font-family:'Sora',sans-serif;font-size:1.6rem;font-weight:700;color:var(--brass);}
.stat span{font-size:0.8rem;color:var(--ink-soft);margin-top:2px;}

/* Category nav */
.cat-nav{
  position:sticky;top:0;z-index:5;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  overflow-x:auto;
  white-space:nowrap;
}
.cat-nav .wrap{display:flex;gap:26px;}
.cat-nav a{
  flex:none;
  display:inline-block;
  padding:14px 0 12px;
  color:var(--ink-soft);
  text-decoration:none;
  font-size:0.86rem;
  font-weight:600;
  border-bottom:2px solid transparent;
}
.cat-nav a:hover{color:var(--teal);border-bottom-color:var(--brass);}

/* Category sections — alternating white / faint tint, never dark */
.faq-category{padding:52px 0 12px;scroll-margin-top:54px;counter-reset:q;background:var(--paper);}
.faq-category:nth-of-type(even){background:var(--teal-tint);}
.cat-eyebrow{color:var(--brass-deep);font-weight:700;font-size:0.8rem;letter-spacing:0.02em;margin:0 0 8px;}
.faq-category h2{
  font-size:1.5rem;
  font-weight:700;
  margin:0 0 14px;
  padding-bottom:14px;
  border-bottom:3px solid var(--brass);
  display:inline-block;
  color:var(--ink);
}
.cat-intro{color:var(--ink-soft);margin:0 0 28px;max-width:60ch;font-size:0.98rem;}

.faq-item{border-bottom:1px solid var(--line);padding:18px 0;}
.faq-item summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::before{
  counter-increment:q;
  content:counter(q,decimal-leading-zero);
  font-family:'Sora',sans-serif;
  font-weight:700;
  font-size:0.8rem;
  color:var(--brass);
  flex:none;
  width:2.4ch;
  padding-top:4px;
}
.faq-item summary span:nth-of-type(1){
  flex:1;
  font-weight:600;
  font-size:1.03rem;
  color:var(--ink);
}
.faq-item summary .icon{
  flex:none;
  font-family:'Sora',sans-serif;
  font-weight:600;
  font-size:1.2rem;
  color:var(--brass-deep);
  line-height:1;
  transform:rotate(0deg);
  transition:transform 0.2s ease;
}
.faq-item summary .icon::before{content:"+";}
.faq-item[open] summary .icon{transform:rotate(135deg);}
.faq-item[open] summary span:nth-of-type(1){color:var(--teal);}
.faq-answer{padding:14px 0 2px 2.4ch;color:var(--ink-soft);}
.faq-answer p{margin:0 0 12px;}
.faq-answer .cta-line{color:var(--teal);font-weight:500;border-left:2px solid var(--brass);padding-left:12px;}
.faq-answer a{color:var(--brass-deep);font-weight:600;text-decoration:none;border-bottom:1px solid var(--brass);}
.faq-answer a:hover{color:var(--teal);border-color:var(--teal);}

/* Final CTA — light, not a dark banner */
.final-cta{background:var(--teal-tint);color:var(--ink);padding:56px 0;text-align:center;border-top:1px solid var(--line);}
.final-cta h2{margin:0 0 12px;font-size:1.7rem;font-weight:800;color:var(--teal);}
.final-cta p{margin:0 0 26px;max-width:50ch;margin-left:auto;margin-right:auto;color:var(--ink-soft);}
.cta-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.btn{display:inline-block;padding:13px 24px;border-radius:6px;font-weight:700;text-decoration:none;font-size:0.95rem;}
.btn-primary{background:var(--brass);color:var(--paper);}
.btn-primary:hover{opacity:0.9;}
.btn-secondary{background:transparent;color:var(--teal);border:1px solid var(--teal);}
.btn-secondary:hover{opacity:0.75;}

/* Footer — white, hairline top border, teal used only as text/link color */
footer{background:var(--paper);color:var(--ink-soft);padding:32px 0;font-size:0.82rem;border-top:1px solid var(--line);}
footer p{margin:0 0 8px;}
footer a{color:var(--teal);}
.footer-tag{color:var(--teal);font-weight:700;font-size:0.95rem;font-family:'Sora',sans-serif;}
.footer-links{display:flex;gap:16px;flex-wrap:wrap;margin:12px 0;}
.footer-links a{font-size:0.82rem;}

@media (max-width:600px){
  .hero{padding:44px 0 28px;}
  .hero h1{font-size:1.7rem;max-width:none;}
  .hero-motif{width:220px;top:-10px;right:-70px;}
  .stat{padding-right:16px;margin-right:16px;}
  .faq-category h2{font-size:1.3rem;}
}

/* ===== Interactive layer additions ===== */

html{scroll-behavior:smooth;}

/* Focus states — accessible and on-brand */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:2px;
  border-radius:4px;
}

/* Finder: search + category cards */
.finder{padding:36px 0 8px;background:var(--paper);}
.search-box{
  position:relative;
  display:flex;
  align-items:center;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:10px;
  padding:2px 16px;
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-box:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,77,64,0.08);}
.search-icon{width:18px;height:18px;color:var(--ink-soft);flex:none;margin-right:10px;}
#faqSearch{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  padding:13px 0;
  font-family:'Inter',sans-serif;
  font-size:0.98rem;
  color:var(--ink);
}
#faqSearch::placeholder{color:#93a19b;}
.search-count{font-size:0.82rem;color:var(--ink-soft);margin:10px 2px 26px;}

.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.cat-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  padding:20px 18px;
  text-decoration:none;
  transition:transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.cat-card:hover{
  transform:translateY(-3px);
  border-color:var(--brass);
  box-shadow:0 10px 24px -14px rgba(0,77,64,0.35);
}
.cat-card-num{font-family:'Sora',sans-serif;font-weight:700;font-size:0.8rem;color:var(--brass);margin-bottom:10px;}
.cat-card h3{font-family:'Sora',sans-serif;font-size:1rem;font-weight:700;color:var(--ink);margin:0 0 8px;}
.cat-card p{font-size:0.86rem;color:var(--ink-soft);margin:0 0 14px;line-height:1.5;}
.cat-card-count{margin-top:auto;font-size:0.76rem;font-weight:600;color:var(--teal);}

@media (max-width:760px){
  .cat-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:520px){
  .cat-grid{grid-template-columns:1fr;}
}

/* Sticky nav active state */
.cat-nav a.active{color:var(--teal);border-bottom-color:var(--brass);}

/* Category head row + expand/collapse-all */
.cat-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.toggle-all{
  flex:none;
  background:transparent;
  border:1px solid var(--teal);
  color:var(--teal);
  font-size:0.8rem;
  font-weight:600;
  padding:7px 14px;
  border-radius:6px;
  cursor:pointer;
  margin-bottom:14px;
  transition:background 0.15s ease, color 0.15s ease;
}
.toggle-all:hover{background:var(--teal);color:var(--paper);}

/* Copy-link control inside each summary */
.faq-item summary{position:relative;padding-right:26px;}
.copy-link{
  flex:none;
  background:none;
  border:none;
  cursor:pointer;
  font-size:0.85rem;
  color:var(--ink-soft);
  opacity:0;
  padding:2px 4px;
  border-radius:4px;
  transition:opacity 0.15s ease, color 0.15s ease;
}
.faq-item:hover .copy-link, .copy-link:focus-visible{opacity:0.7;}
.copy-link:hover{opacity:1;color:var(--teal);}
.copy-link.copied{opacity:1;color:var(--brass-deep);font-size:0.72rem;font-weight:600;}

/* Button polish (topbar / final CTA / cards) */
.btn, .btn-fill, .btn-ghost, .btn-secondary, .btn-primary{
  transition:transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
.btn:hover, .btn-fill:hover, .btn-secondary:hover{transform:translateY(-1px);}
.btn:active, .btn-fill:active, .btn-secondary:active, .btn-ghost:active{transform:translateY(0);}
.btn-primary{box-shadow:0 8px 18px -10px rgba(169,124,67,0.6);}
.btn-primary:hover{box-shadow:0 10px 22px -10px rgba(169,124,67,0.75);}

/* Smooth accordion reveal for the answer content */
.faq-answer{animation:faqIn 0.18s ease;}
@keyframes faqIn{from{opacity:0;transform:translateY(-2px);}to{opacity:1;transform:translateY(0);}}

/* Back to top */
.back-to-top{
  position:fixed;
  right:20px;
  bottom:26px;
  width:44px;height:44px;
  border-radius:50%;
  background:var(--teal);
  color:var(--paper);
  border:none;
  font-size:1.1rem;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity 0.2s ease, transform 0.2s ease;
  box-shadow:0 10px 22px -8px rgba(0,0,0,0.3);
  z-index:20;
}
.back-to-top.visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.back-to-top:hover{opacity:0.88;}

/* Mobile sticky action bar — mirrors the app's bottom tab bar */
.mobile-cta-bar{
  display:none;
  position:fixed;
  left:0;right:0;bottom:0;
  background:var(--paper);
  border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  gap:10px;
  z-index:20;
  box-shadow:0 -8px 20px -14px rgba(0,0,0,0.25);
}
.mobile-cta-bar .btn-fill{flex:1;text-align:center;}
.btn-ghost-mobile{
  flex:1;
  text-align:center;
  border:1px solid var(--teal);
  color:var(--teal);
  padding:10px 14px;
  border-radius:6px;
  text-decoration:none;
  font-weight:700;
  font-size:0.86rem;
}
@media (max-width:760px){
  .mobile-cta-bar{display:flex;}
  body{padding-bottom:64px;}
  .back-to-top{bottom:78px;}
}