/* Homepage sections after the hero: how it works, result states,
   pilot scope, security summary, closing CTA, and FAQ.
   Light surfaces, 1px borders, restrained spacing. */

.sec-head{margin-bottom:2.25rem;max-width:44rem}
.sec-head p{
  font-size:1rem;line-height:1.65;color:var(--muted-foreground);
  margin-top:.85rem;max-width:40rem;
}

/* ── how it works: stage rail (accessible tabs) ───────────────── */
.stg{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;
  border-top:1px solid var(--border-strong);
  margin-bottom:2.25rem;
}
.stg-tab{
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;
  padding:1.35rem 0 .25rem;
  text-align:left;
  color:var(--muted-foreground);
  cursor:pointer;
  transition:color .15s;
}
/* stronger rail treatment over the active stage */
.stg-tab::before{
  content:"";position:absolute;top:-2px;left:0;right:-2.5rem;height:3px;
  background:transparent;transition:background-color .15s;
}
.stg-tab:last-child::before{right:0}
.stg-tab[aria-selected="true"]::before{background:var(--foreground)}
.stg-node{
  position:absolute;top:-6px;left:0;
  width:11px;height:11px;border-radius:50%;
  background:var(--background);
  border:1.5px solid var(--border-strong);
  transition:transform .15s,background-color .15s,border-color .15s;
}
.stg-tab:hover,.stg-tab:focus-visible{color:var(--foreground)}
.stg-tab:hover .stg-node,.stg-tab:focus-visible .stg-node{
  transform:scale(1.3);border-color:var(--foreground);
}
.stg-hint{
  font-size:.8125rem;font-weight:500;margin-top:.3rem;
  color:var(--foreground);
}
.stg-hint-shown{display:none;color:var(--muted-foreground)}
.stg-tab[aria-selected="true"] .stg-hint-view{display:none}
.stg-tab[aria-selected="true"] .stg-hint-shown{display:inline}
@media(prefers-reduced-motion:reduce){
  .stg-tab,.stg-tab::before,.stg-node{transition:none}
  .stg-tab:hover .stg-node,.stg-tab:focus-visible .stg-node{transform:none}
}
.stg-head{
  display:flex;align-items:baseline;gap:.5rem;
  font-size:1rem;font-weight:600;letter-spacing:-.01em;
}
.stg-num{font-size:.8125rem;font-weight:500;color:var(--muted-foreground)}
.stg-desc{font-size:.875rem;line-height:1.6;font-weight:400;max-width:24rem}
.stg-tab:hover{color:var(--foreground)}
.stg-tab[aria-selected="true"]{color:var(--foreground)}
.stg-tab[aria-selected="true"] .stg-node{
  background:var(--foreground);border-color:var(--foreground);
}
.stg-tab[aria-selected="true"] .stg-desc{color:var(--muted-foreground)}
/* mobile: conventional tabs with a visible active underline */
@media(max-width:767.98px){
  .stg{gap:0;margin-bottom:1.5rem;border-top:0;
    border-bottom:1px solid var(--border)}
  .stg-desc,.stg-hint,.stg-node,.stg-num{display:none}
  .stg-head{font-size:.9375rem}
  .stg-tab{
    align-items:center;justify-content:center;text-align:center;
    padding:.7rem .25rem .8rem;min-height:2.75rem;
  }
  .stg-tab::before{top:auto;bottom:-1px;left:0;right:0;height:2px}
}

/* ── review outcomes: full-width dark band ────────────────────── */
.out-sec{background:var(--foreground);color:var(--primary-foreground)}
.out-sec .eyebrow{color:hsl(0 0% 60%)}
.out-sec .h-2{color:var(--primary-foreground)}
.out-sec .sec-head p{color:hsl(0 0% 68%)}
.out-grid{
  display:grid;grid-template-columns:1fr;margin:0;
  border-top:1px solid hsl(0 0% 24%);
}
@media(min-width:768px){.out-grid{grid-template-columns:1fr 1fr}}
.out-cell{
  padding:1.85rem 0 2rem;
  border-bottom:1px solid hsl(0 0% 24%);
}
@media(min-width:768px){
  .out-cell:nth-child(odd){padding-right:3.5rem}
  .out-cell:nth-child(even){
    padding-left:3.5rem;
    border-left:1px solid hsl(0 0% 24%);
  }
}
.out-name{
  display:flex;align-items:center;gap:.65rem;
  font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;
  color:var(--primary-foreground);margin-bottom:.5rem;
}
.out-dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}
.out-dot-agree{background:var(--status-green)}
.out-dot-disagree{background:var(--status-red)}
.out-dot-missing{background:var(--status-amber)}
.out-dot-neutral{background:hsl(0 0% 55%)}
.out-desc{margin:0;font-size:.9375rem;line-height:1.6;color:hsl(0 0% 68%)}

/* ── current pilot summary ────────────────────────────────────── */
.pilot-grid{display:grid;grid-template-columns:1fr;gap:2.25rem}
@media(min-width:900px){
  .pilot-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:5rem}
}
.pilot-desc{
  font-size:1rem;line-height:1.65;color:var(--muted-foreground);
  margin-top:.85rem;max-width:34rem;
}
.cap-list{margin:0;display:flex;flex-direction:column}
.cap{
  display:grid;grid-template-columns:1fr;gap:.2rem .75rem;
  padding:1.1rem 0;
  border-top:1px solid var(--border);
}
.cap:last-child{border-bottom:1px solid var(--border)}
@media(min-width:640px){
  .cap{grid-template-columns:minmax(11rem,.8fr) minmax(0,1.2fr)}
}
.cap dt{font-size:.9375rem;font-weight:600;color:var(--foreground)}
.cap dd{margin:0;font-size:.9375rem;line-height:1.55;color:var(--muted-foreground)}

/* ── pilot boundaries: light neutral ledger ───────────────────── */
.bnd-sec{
  background:var(--secondary);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.bnd-grid{display:grid;grid-template-columns:1fr;gap:2.25rem}
@media(min-width:900px){
  .bnd-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:5rem}
}
.bnd-desc{
  font-size:1rem;line-height:1.65;color:var(--muted-foreground);
  margin-top:.85rem;max-width:34rem;
}
.bnd-list{margin:0;display:flex;flex-direction:column}
.bnd{
  display:grid;grid-template-columns:1fr;gap:.2rem .75rem;
  padding:1rem 0;
  border-top:1px solid var(--border-strong);
}
.bnd:last-child{border-bottom:1px solid var(--border-strong)}
@media(min-width:640px){
  .bnd{grid-template-columns:minmax(12rem,.7fr) minmax(0,1.3fr)}
}
.bnd dt{font-size:.9375rem;font-weight:600;color:var(--foreground)}
.bnd dd{margin:0;font-size:.9375rem;line-height:1.55;color:var(--foreground)}

/* ── homepage use cases: editorial three columns ──────────────── */
.uc-grid{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:768px){.uc-grid{grid-template-columns:repeat(3,1fr);gap:3rem}}
.uc{border-top:2px solid var(--foreground);padding-top:1.25rem}
.uc-h{
  font-family:var(--font-display);
  font-size:1.0625rem;font-weight:600;letter-spacing:-.015em;
  color:var(--foreground);margin-bottom:.6rem;
}
.uc-p{font-size:.9375rem;line-height:1.65;color:var(--muted-foreground)}
.uc-more{margin-top:2.25rem}
.uc-more a{
  font-size:.9375rem;font-weight:600;color:var(--foreground);
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--border-strong);
}
.uc-more a:hover{text-decoration-color:var(--foreground)}

/* ── closing CTA ──────────────────────────────────────────────── */
.cta-band{
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  background:var(--card);
  padding:3rem 1.5rem;
  text-align:center;
}
@media(min-width:768px){.cta-band{padding:3.75rem 4rem}}
.cta-h{
  font-family:var(--font-display);
  font-size:clamp(1.75rem,3.2vw,2.375rem);
  font-weight:700;letter-spacing:-.03em;line-height:1.12;
  color:var(--foreground);margin-bottom:1rem;
  max-width:26ch;margin-left:auto;margin-right:auto;text-wrap:balance;
}
.cta-p{
  font-size:1rem;line-height:1.65;color:var(--muted-foreground);
  max-width:36rem;margin:0 auto 1.75rem;
}
.cta-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}
.cta-audience{
  margin-top:1.6rem;
  font-size:.8125rem;color:var(--muted-foreground);
  max-width:44rem;margin-left:auto;margin-right:auto;line-height:1.6;
}

/* ── FAQ: category sidebar + rounded accordion ────────────────── */
.faq-head{margin-bottom:2.5rem;max-width:44rem}
.faq-lede{
  font-size:1rem;line-height:1.65;color:var(--muted-foreground);
  margin-top:.85rem;max-width:36rem;
}
.faq-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;
  align-items:start}
@media(min-width:900px){
  .faq-grid{grid-template-columns:minmax(15rem,.36fr) minmax(0,1fr);
    gap:2.5rem}
}
.faq-cats{display:flex;flex-direction:column;gap:.75rem}
.faq-cat{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1rem 1.25rem;min-height:3.25rem;
  border:1px solid var(--border);border-radius:var(--radius);
  background:var(--card);
  font-size:.9375rem;font-weight:600;letter-spacing:-.01em;
  color:var(--foreground);text-align:left;cursor:pointer;
  transition:border-color .15s,background-color .15s,color .15s;
}
.faq-cat::after{
  content:"";flex-shrink:0;width:.5rem;height:.5rem;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg);
  transition:transform .15s;
}
.faq-cat:hover{border-color:var(--border-strong)}
.faq-cat[aria-selected="true"]{
  background:var(--foreground);color:var(--primary-foreground);
  border-color:var(--foreground);
}
.faq-cat[aria-selected="true"]::after{transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){
  .faq-cat,.faq-cat::after{transition:none}
}
.faq-panel{
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--card);overflow:hidden;
}
.faq-panel[hidden]{display:none}
.faq details + details{border-top:1px solid var(--border)}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.2rem 1.5rem;
  font-family:var(--font-display);
  font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;
  color:var(--foreground);
  min-height:2.75rem;
}
.faq summary:hover{color:var(--muted-foreground)}
.faq summary:focus-visible{
  outline:2px solid var(--foreground);outline-offset:-3px;
  border-radius:4px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex-shrink:0;
  width:1rem;height:1rem;
  background-image:
    linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor);
  background-size:.85rem 1.5px, 1.5px .85rem;
  background-position:center center, center center;
  background-repeat:no-repeat, no-repeat;
  color:var(--muted-foreground);
  transition:transform .2s ease-out;
}
.faq details[open] summary::after{transform:rotate(45deg)}
@media(prefers-reduced-motion:reduce){
  .faq summary::after{transition:none}
}
.faq-body{
  margin:0;padding:1.1rem 1.5rem 1.25rem;
  background:var(--secondary);
  border-top:1px solid var(--border);
  font-size:.9375rem;line-height:1.65;color:var(--muted-foreground);
}

/* section pacing */
.section-home{padding:4.5rem 0}
@media(min-width:768px){.section-home{padding:5.5rem 0}}
.section-home-tight{padding:3rem 0}
@media(min-width:768px){.section-home-tight{padding:3.5rem 0}}

/* ── homepage sample finding (.smp-*) ───────────────────────────── */
.smp-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
@media(min-width:900px){.smp-grid{grid-template-columns:1fr 1.1fr;gap:4rem}}
.smp-desc{
  font-size:1rem;line-height:1.65;color:var(--muted-foreground);
  max-width:34rem;margin:0 0 1.5rem;
}
.smp-more{margin:0}
.smp-card{
  border:1px solid var(--border-strong);
  border-left:3px solid var(--status-red);
  border-radius:var(--radius);background:var(--card);
  padding:1.5rem 1.6rem;
}
.smp-card-h{
  font-family:var(--font-display);
  font-size:1.125rem;font-weight:600;letter-spacing:-.015em;
  line-height:1.35;margin:0 0 1.15rem;color:var(--foreground);
}
.smp-vals{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:.9rem 0;margin-bottom:.9rem;
}
.smp-val{display:flex;flex-direction:column;gap:.2rem}
.smp-val-k{
  font-size:.6875rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted-foreground);
}
.smp-val-v{
  font-family:var(--font-mono);font-size:1rem;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--foreground);
}
.smp-diff{color:var(--status-red)}
.smp-src{font-size:.8125rem;color:var(--muted-foreground);margin:0 0 .4rem}
.smp-fict{font-size:.75rem;color:var(--muted-foreground);margin:0}
@media(max-width:560px){.smp-vals{grid-template-columns:1fr;gap:.75rem}}

/* trust section: link list under the lede (reuses the .bnd-* band) */
.bnd-more{
  list-style:none;margin:1.25rem 0 0;padding:0;
  display:flex;flex-direction:column;gap:.5rem;
}
.bnd-more a{
  font-size:.9375rem;color:var(--foreground);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--border-strong);
}
.bnd-more a:hover{text-decoration-color:var(--foreground)}

/* four use cases: 2×2 at tablet, one row wide */
@media(min-width:768px){.uc-grid-4{grid-template-columns:repeat(2,1fr);gap:2.5rem 3rem}}
@media(min-width:1100px){.uc-grid-4{grid-template-columns:repeat(4,1fr);gap:3rem 2.5rem}}