/* Higher Heights Fitness — shared site stylesheet
   Extracted from the existing homepage (hhfonlinecoaching) so every new page
   matches exactly: same tokens, same components. */

:root{
  --bg: #101010;
  --bg-alt: #161616;
  --bg-card: #1b1b1b;
  --border: #2c2c2c;
  --text: #f5f5f5;
  --text-dim: #a8a8a8;
  --red: #e91d26;
  --red-dark: #a8121a;
  --gray-light: #565656;
  --green: #2fbf71;
  --font-display: "Oswald", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
*{box-sizing:border-box;}
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-display); letter-spacing:0.3px; }

/* ============ HEADER ============ */
header.site-header{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 28px;
  background:rgba(16,16,16,0.92);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
  gap:12px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:46px; width:46px; border-radius:50%; }
.brand-text{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  letter-spacing:0.5px;
  text-transform:uppercase;
}
.brand-text .accent{ color:var(--red); }
.brand-text small{
  display:block;
  font-family:var(--font-body);
  font-size:11px;
  color:var(--text-dim);
  letter-spacing:1.5px;
  font-weight:500;
  text-transform:uppercase;
}
nav.site-nav{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.nav-link{
  padding:10px 18px;
  border-radius:6px;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.5px;
  text-transform:uppercase;
  border:1.5px solid var(--gray-light);
  transition:border-color .15s ease, background .15s ease;
}
.nav-link:hover{ border-color:var(--text-dim); }
.nav-link.primary{ background:var(--red); border-color:var(--red); }
.nav-link.primary:hover{ background:var(--red-dark); border-color:var(--red-dark); }

/* Mobile hamburger toggle — hidden on desktop, shown at <=600px (see media query below) */
.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  background:transparent;
  border:1.5px solid var(--gray-light);
  border-radius:6px;
  color:var(--text);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  transition:border-color .15s ease;
}
.nav-toggle:hover{ border-color:var(--text-dim); }

main{ max-width:1040px; margin:0 auto; padding:0 24px; }
main.narrow{ max-width:640px; }

/* ============ HERO ============ */
.hero{ position:relative; padding:80px 0 70px; text-align:center; overflow:hidden; }
.hero::before{
  content:"";
  position:absolute;
  top:-120px; left:50%;
  transform:translateX(-50%);
  width:900px; height:500px;
  background:radial-gradient(ellipse at center, rgba(233,29,38,0.16) 0%, rgba(233,29,38,0) 68%);
  pointer-events:none;
}
.hero-eyebrow{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:18px;
  position:relative;
}
.hero h1{
  font-size:40px;
  font-weight:700;
  margin:0 0 10px 0;
  line-height:1.2;
  text-transform:uppercase;
  position:relative;
}
.hero h1 .accent{ color:var(--red); }
.hero-subbrand{
  display:block;
  font-size:15px;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--text-dim);
  margin:0 0 20px 0;
  position:relative;
}
.hero p.lead{
  font-family:var(--font-body);
  color:var(--text-dim);
  font-size:17px;
  max-width:600px;
  margin:0 auto 30px auto;
  position:relative;
}
.hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative; }

.btn{
  display:inline-block;
  padding:16px 30px;
  border-radius:8px;
  font-size:14px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
  font-family:var(--font-body);
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--red); color:#fff; }
.btn-primary:hover{ background:var(--red-dark); }
.btn-secondary{ background:transparent; border:1.5px solid var(--gray-light); color:var(--text); }
.btn-secondary:hover{ border-color:var(--text-dim); }
.btn-block{ display:block; width:100%; text-align:center; }
.btn:disabled{ opacity:0.55; cursor:not-allowed; transform:none; }

/* ============ SECTIONS / PANELS ============ */
section.panel{ padding:50px 0; border-top:1px solid var(--border); }
.panel-tag{
  display:block;
  text-align:center;
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:10px;
}
section.panel h2{
  font-size:26px;
  font-weight:600;
  text-transform:uppercase;
  margin:0 0 10px 0;
  text-align:center;
}
section.panel p.sub{
  color:var(--text-dim);
  text-align:center;
  max-width:560px;
  margin:0 auto 34px auto;
  font-size:15px;
}

.feature-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:20px; }
.feature-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-top:3px solid var(--red);
  border-radius:10px;
  padding:22px;
}
.feature-card h3{ margin:0 0 8px 0; font-size:16px; text-transform:uppercase; }
.feature-card p{ margin:0; color:var(--text-dim); font-size:14px; }

.path-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:20px; }
.path-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:26px;
  text-align:center;
  display:flex;
  flex-direction:column;
}
.path-eyebrow{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:10px;
}
.path-card h3{ margin:0 0 10px 0; font-size:20px; text-transform:uppercase; }
.path-card p{ color:var(--text-dim); font-size:14px; margin:0 0 20px 0; flex:1; }
.path-card .btn{ align-self:stretch; }

/* ============ CARDS / GENERIC PANEL BOX (forms live in these) ============ */
.box{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:28px;
}

/* ============ FORMS ============ */
.field{ margin-bottom:18px; text-align:left; }
.field label{
  display:block;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:8px;
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:12px 14px;
  border-radius:8px;
  border:1.5px solid var(--border);
  background:var(--bg-alt);
  color:var(--text);
  font-family:var(--font-body);
  font-size:14px;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--red);
}
.field textarea{ resize:vertical; min-height:90px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }

.form-note{ color:var(--text-dim); font-size:13px; margin-top:10px; text-align:center; }
.form-note a{ color:var(--red); }
.form-note a:hover{ color:var(--red-dark); text-decoration:underline; }
.form-status{ font-size:14px; margin-top:14px; text-align:center; min-height:20px; }
.form-status.success{ color:var(--green); }
.form-status.error{ color:var(--red); }

/* Day tabs for check-in */
.day-tabs{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:24px; }
.day-tab{
  padding:10px 16px;
  border-radius:8px;
  border:1.5px solid var(--gray-light);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  transition:.15s;
}
.day-tab:hover{ border-color:var(--text-dim); }
.day-tab.done{ background:var(--red); border-color:var(--red); color:#fff; }
.day-tab.active{ box-shadow:0 0 0 2px var(--text) inset; }
.day-tab.done.active{ box-shadow:0 0 0 2px #fff inset; }

/* Rating pills (1-5 scale) and adherence pills (Yes/Mostly/No) */
.rating-group{ margin-bottom:20px; }
.rating-group > label{ display:block; margin-bottom:8px; font-size:13px; font-weight:600; color:var(--text); }
.rating-pills{ display:flex; gap:8px; }
.rating-pill{
  flex:1;
  padding:11px 0;
  text-align:center;
  border-radius:8px;
  border:1.5px solid var(--gray-light);
  background:transparent;
  color:var(--text);
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:.15s;
  font-family:var(--font-body);
}
.rating-pill:hover{ border-color:var(--text-dim); }
.rating-pill.selected{ background:var(--red); border-color:var(--red); color:#fff; }
.rating-scale-labels{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--text-dim); margin-top:6px; text-transform:uppercase; letter-spacing:0.3px; }

.adherence-pills{ display:flex; gap:8px; }
.adherence-pill{
  flex:1;
  padding:11px 6px;
  text-align:center;
  border-radius:8px;
  border:1.5px solid var(--gray-light);
  background:transparent;
  color:var(--text);
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  transition:.15s;
  font-family:var(--font-body);
}
.adherence-pill:hover{ border-color:var(--text-dim); }
.adherence-pill.selected{ background:var(--red); border-color:var(--red); color:#fff; }

.weekly-card{ padding-top:8px; }

/* ============ BLOG ============ */

/* Shared category-tag + read-time badge, used on cards and article pages */
.post-cat{
  display:inline-block;
  padding:4px 11px;
  border-radius:20px;
  background:rgba(233,29,38,0.14);
  color:var(--red);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  white-space:nowrap;
}
.post-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.read-time{ color:var(--text-dim); font-size:12px; }

/* Category filter pills (blog hub) */
.cat-pills{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:32px; }
.cat-pill{
  padding:9px 18px;
  border-radius:20px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.4px;
  text-transform:uppercase;
  border:1.5px solid var(--gray-light);
  background:transparent;
  color:var(--text-dim);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
  font-family:var(--font-body);
}
.cat-pill:hover{ border-color:var(--text-dim); color:var(--text); }
.cat-pill.active{ background:var(--red); border-color:var(--red); color:#fff; }

/* Featured articles — larger cards, top of the blog hub */
.featured-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:20px; }
.featured-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-top:3px solid var(--red);
  border-radius:12px;
  padding:26px;
}
.featured-card h3{ margin:2px 0 0 0; font-size:18px; line-height:1.32; }
.featured-card p{ color:var(--text-dim); font-size:14px; margin:0; flex:1; }
.featured-card .read-more{ color:var(--red); font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; margin-top:2px; }

/* Full article grid, grouped/filtered by category */
.post-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:16px; }
.post-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:22px;
}
.post-card h3{ margin:2px 0 0 0; font-size:17px; line-height:1.3; }
.post-card p{ color:var(--text-dim); margin:0; font-size:13.5px; flex:1; }
.post-card .post-date{ color:var(--red); font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.empty-note{ color:var(--text-dim); font-size:13.5px; font-style:italic; text-align:center; padding:20px 0; }

/* Article page — quick-read layout */
article.post h1{ font-size:32px; margin-bottom:14px; }
article.post .post-meta{ margin-bottom:28px; }
article.post p{ margin-bottom:18px; font-size:16px; }
article.post h2{ font-size:22px; margin-top:34px; margin-bottom:12px; }

.takeaways-box{ margin:32px 0; }
.takeaways-box h4{ margin:0 0 16px 0; font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--red); }

.article-sources{ margin-top:48px; padding-top:26px; border-top:1px solid var(--border); }
.article-sources h4{ margin:0 0 14px 0; font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-dim); }
.article-sources ol{ margin:0; padding-left:20px; color:var(--text-dim); font-size:13.5px; line-height:1.8; }
.article-sources a{ color:var(--red); text-decoration:underline; }
.article-sources a:hover{ color:var(--red-dark); }

.article-cta{ margin-top:50px; text-align:center; }
.article-cta h3{ margin:0 0 8px 0; font-size:18px; text-transform:uppercase; }
.article-cta p{ color:var(--text-dim); margin:0 0 20px 0; font-size:14px; }

/* Nervous-system/gut context box — recurring section at the bottom of
   every relevant article, tying that article's topic back to nervous-
   system regulation and gut health (the throughline across Peak
   Performance's content). Uses the existing --green token so it reads
   as its own distinct block rather than competing with the red
   CTA/takeaways boxes above it. */
.nsg-box{ margin:32px 0; border-left:3px solid var(--green); }
.nsg-box h4{ margin:0 0 14px 0; font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--green); }
.nsg-box p{ margin:0 0 14px 0; font-size:14.5px; }
.nsg-box p:last-child{ margin-bottom:0; }

/* Portion-size reference table (carb article, reusable for future
   nutrition content). Collapses to stacked label/value cards on phone
   width instead of a cramped horizontal-scroll table. */
.portion-table{ width:100%; border-collapse:collapse; margin:22px 0; font-size:14px; }
.portion-table th{
  text-align:left;
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--text-dim);
  padding:0 12px 10px 0;
  border-bottom:1px solid var(--border);
}
.portion-table td{ padding:14px 12px 14px 0; border-bottom:1px solid var(--border); vertical-align:top; }
.portion-table tr:last-child td{ border-bottom:none; }
.portion-table .food-name{ font-weight:600; color:var(--text); }
.portion-table .food-name small{ display:block; color:var(--text-dim); font-weight:400; font-size:12px; margin-top:2px; }
.portion-table .carb-grams{ font-family:var(--font-display); font-weight:600; color:var(--red); white-space:nowrap; }
.portion-table .visual-note{ color:var(--text-dim); font-size:13px; }
@media (max-width:600px){
  .portion-table{ display:block; }
  .portion-table thead{ display:none; }
  .portion-table tbody{ display:block; }
  .portion-table tr{ display:block; padding:14px 0; border-bottom:1px solid var(--border); }
  .portion-table td{ display:block; border:none; padding:2px 0 0 0; }
  .portion-table .carb-grams::before{ content:"Carbs: "; color:var(--text-dim); font-weight:400; font-family:var(--font-body); }
  .portion-table .visual-note::before{ content:"Looks like: "; }
}

/* Newsletter signup box — blog hub (and reusable on article pages) */
.newsletter-box{ text-align:center; }
.newsletter-box h3{ margin:0 0 8px 0; font-size:18px; text-transform:uppercase; }
.newsletter-box p{ color:var(--text-dim); margin:0 0 22px 0; font-size:14px; }
.newsletter-form{
  display:flex;
  gap:10px;
  max-width:420px;
  margin:0 auto;
}
.newsletter-form .field{ flex:1; margin-bottom:0; }
.newsletter-form input{
  width:100%;
  padding:12px 14px;
  border-radius:8px;
  border:1.5px solid var(--border);
  background:var(--bg-alt);
  color:var(--text);
  font-family:var(--font-body);
  font-size:14px;
}
.newsletter-form input:focus{ outline:none; border-color:var(--red); }
.newsletter-form .btn{ flex:0 0 auto; white-space:nowrap; }
@media (max-width:480px){
  .newsletter-form{ flex-direction:column; }
}

/* ============ FOOTER ============ */
footer{
  border-top:1px solid var(--border);
  padding:34px 24px;
  text-align:center;
  color:var(--text-dim);
  font-size:13px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.footer-brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); text-transform:uppercase; color:var(--text); font-weight:600; }
.footer-brand img{ height:30px; width:30px; border-radius:50%; }
footer a{ color:var(--red); }
footer .location{ font-size:12px; }
footer .legal-links{ font-size:11.5px; color:var(--text-dim); }
footer .legal-links a{ color:var(--text-dim); text-decoration:underline; }
footer .legal-links a:hover{ color:var(--red); }
.field-check{ display:flex; gap:10px; align-items:flex-start; text-align:left; margin-bottom:14px; }
.field-check input[type="checkbox"]{ width:17px; height:17px; margin-top:2px; flex-shrink:0; accent-color:var(--red); }
.field-check label{ font-size:13.5px; color:var(--text-dim); line-height:1.45; }
.field-check label a{ color:var(--text); text-decoration:underline; }
.field-check label a:hover{ color:var(--red); }

@media (max-width:600px){
  .hero h1{ font-size:30px; }
  section.panel h2{ font-size:22px; }
  header.site-header{
    padding:12px 16px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    text-align:left;
    gap:10px;
  }
  /* Brand shrinks to make room so the toggle stays on the same top row
     next to it (rather than wrapping to its own line below), even when
     the tagline under the logo wraps to two lines. */
  /* flex-basis 0% (not "auto") so the wide brand text doesn't claim the
     whole row during line-wrapping — the toggle still gets counted as
     fitting on line 1, then brand grows to fill the space it's given. */
  .brand{ flex:1 1 0%; min-width:0; }
  .nav-toggle{ display:inline-flex; flex:0 0 auto; }
  /* Forcing the nav to a 100%-wide flex basis always kicks it onto its
     own new line, regardless of how much room brand+toggle leave. */
  nav.site-nav{
    display:none;
    flex-basis:100%;
    width:100%;
    order:3;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  nav.site-nav.nav-open{ display:flex; }
  .nav-link{ padding:10px 14px; font-size:12.5px; letter-spacing:0.3px; text-align:center; }
}

/* ============ PRICING / JOIN ============ */
.price-card{
  background:var(--bg-card);
  border:1.5px solid var(--red);
  border-radius:14px;
  padding:36px 32px;
  max-width:480px;
  margin:0 auto;
  text-align:center;
  box-shadow:0 0 0 1px rgba(233,29,38,0.08), 0 20px 50px rgba(0,0,0,0.35);
}
.price-plan-name{
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:14px;
}
.price-tag{ font-family:var(--font-display); font-weight:700; margin-bottom:4px; }
.price-tag .amount{ font-size:52px; }
.price-tag .cadence{ font-size:16px; color:var(--text-dim); font-weight:500; font-family:var(--font-body); }
.price-note{ color:var(--text-dim); font-size:13px; margin-bottom:26px; }
.check-list{ list-style:none; margin:0 0 28px 0; padding:0; text-align:left; display:flex; flex-direction:column; gap:14px; }
.check-list li{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--text); }
.check-list li::before{
  content:"\2713";
  flex:none;
  width:22px; height:22px;
  border-radius:50%;
  background:var(--red);
  color:#fff;
  font-size:12px;
  font-weight:700;
  display:flex; align-items:center; justify-content:center;
  margin-top:1px;
}
.check-list li strong{ display:block; margin-bottom:2px; }
.check-list li span{ color:var(--text-dim); font-size:13px; }

/* Access-code callout (welcome page) */
.code-box{
  background:var(--bg-alt);
  border:1.5px dashed var(--red);
  border-radius:10px;
  padding:18px 20px;
  text-align:center;
  margin:22px 0;
}
.code-box .code-label{ font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-dim); margin-bottom:8px; }
.code-box .code-value{ font-family:var(--font-display); font-size:28px; letter-spacing:3px; color:var(--text); }

.next-steps-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:18px; margin-top:10px; }

.spinner-dot{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:#fff; margin:0 2px; opacity:0.3; animation:pulseDot 1s infinite ease-in-out;
}
.spinner-dot:nth-child(2){ animation-delay:0.15s; }
.spinner-dot:nth-child(3){ animation-delay:0.3s; }
@keyframes pulseDot{ 0%,80%,100%{opacity:0.3;} 40%{opacity:1;} }

/* ============ MEET YOUR COACH ============ */
.coach-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:40px;
  display:grid;
  grid-template-columns:200px 1fr;
  gap:36px;
  align-items:center;
  max-width:820px;
  margin:0 auto;
}
.coach-photo{
  width:200px;
  height:200px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid var(--red);
  display:block;
  margin:0 auto;
}
.coach-name{ font-family:var(--font-display); font-size:24px; text-transform:uppercase; margin:0 0 4px 0; }
.coach-role{ color:var(--text-dim); font-size:13px; text-transform:uppercase; letter-spacing:0.8px; margin:0 0 16px 0; }
.coach-creds{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.coach-cred-badge{
  display:inline-block;
  padding:5px 12px;
  border-radius:20px;
  border:1px solid var(--red);
  color:var(--red);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.8px;
  text-transform:uppercase;
}
.coach-bio p{ color:var(--text-dim); font-size:14.5px; margin:0 0 12px 0; }
.coach-bio p:last-child{ margin-bottom:0; }
@media (max-width:640px){
  .coach-card{ grid-template-columns:1fr; text-align:center; padding:30px 24px; }
  .coach-creds{ justify-content:center; }
}

/* ============ FAQ ============ */
.faq-list{ display:flex; flex-direction:column; gap:12px; max-width:720px; margin:0 auto; }
details.faq-item{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:4px 22px;
}
details.faq-item summary{
  cursor:pointer;
  padding:16px 0;
  font-weight:600;
  font-size:15px;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
details.faq-item summary::-webkit-details-marker{ display:none; }
details.faq-item summary::after{
  content:"+";
  flex:none;
  font-size:20px;
  color:var(--red);
  font-weight:400;
  line-height:1;
}
details.faq-item[open] summary::after{ content:"\2212"; }
details.faq-item p{ color:var(--text-dim); font-size:14px; margin:0 0 18px 0; }