/* ScoutIQ — section pages (product / athletes / coaches / programs / families / pricing)
   Extends site.css. Nothing here overrides a site.css component; these are the
   blocks that only the interior pages use. Same language: Barlow Condensed
   italic 900 headlines, IBM Plex Mono labels, yard-line rules, lime accent. */

/* active nav item ------------------------------------------------------- */
.nav-links a[aria-current="page"]{color:var(--lime)}

/* page hero -------------------------------------------------------------- */
.page-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(56px,7vw,104px) 0 clamp(48px,6vw,88px);
  background:var(--black);
}
.page-hero-shell{
  position:relative;
  z-index:1;
  display:grid;
  gap:clamp(38px,5vw,72px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
}
.page-hero-copy .kicker{color:var(--lime)}
.page-hero h1{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(60px,8.4vw,132px);
  font-style:italic;
  font-weight:900;
  letter-spacing:-.05em;
  line-height:.8;
  text-transform:uppercase;
}
.page-lead{
  max-width:53ch;
  margin-top:26px;
  color:var(--muted);
  font-size:clamp(16px,1.35vw,19px);
  line-height:1.55;
}
/* site.css sets .hero-cta to flex-direction:column for the homepage stack —
   interior heroes lay the two actions out in a row instead. */
.page-hero .hero-cta{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
  gap:18px 28px;
  margin-top:34px;
}
.page-hero-art{min-width:0}

/* shared svg art --------------------------------------------------------- */
.art{
  width:100%;
  height:auto;
  border-radius:2px;
}
.art .mono{font-family:"IBM Plex Mono",monospace;font-weight:600;letter-spacing:.08em}
.art .cond{font-family:"Barlow Condensed",sans-serif;font-style:italic;font-weight:900;letter-spacing:-.02em}
.art .s10{font-size:10px}.art .s11{font-size:11px}.art .s18{font-size:18px}
.art .s20{font-size:20px}.art .s22{font-size:22px}.art .s26{font-size:26px}
.art .s34{font-size:34px}.art .s46{font-size:46px}

/* generic block ---------------------------------------------------------- */
.block{padding:clamp(64px,7.5vw,118px) 0}
.block .section-index{margin-top:26px}
.block-title{
  margin-top:14px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(42px,5.2vw,86px);
  font-style:italic;
  font-weight:900;
  letter-spacing:-.04em;
  line-height:.86;
  text-transform:uppercase;
}
.block-title span{color:var(--lime)}
.section-paper .block-title span{color:var(--paper-ink)}
.section-paper .section-index.dark{color:var(--paper-ink)}
.section-rule.dark{background:var(--black)}
.block-copy{
  max-width:58ch;
  margin-top:24px;
  font-size:clamp(16px,1.3vw,18px);
  line-height:1.6;
}
.section-paper .block-copy{color:var(--paper-ink)}
.section-dark .block-copy{color:var(--muted)}

/* split: copy + art ------------------------------------------------------ */
.split{
  display:grid;
  gap:clamp(38px,5vw,80px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
}
.split.flip .split-copy{order:2}
.split-art{min-width:0}

/* numbered rule list (matches .audience-block li) ------------------------ */
.marked{
  margin-top:38px;
  list-style:none;
  border-top:2px solid currentColor;
  padding:0;
}
.marked li{
  display:grid;
  min-height:64px;
  grid-template-columns:52px 1fr;
  align-items:center;
  border-bottom:1px solid currentColor;
  font-size:14px;
  font-weight:600;
}
.marked li span{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  opacity:.6;
}
.section-lime .marked li span,.plan-lime .marked li span{opacity:.75}

/* feature grid ----------------------------------------------------------- */
/* --cols is set per block so the item count always fills complete rows —
   auto-fit left an orphan cell and exposed the grid background as a grey void. */
.feature-grid{
  display:grid;
  gap:1px;
  grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
  margin-top:clamp(44px,5vw,72px);
  background:var(--rule);
  border:1px solid var(--rule);
}
@media (max-width:1000px){.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.feature-grid{grid-template-columns:1fr}}
.section-paper .feature-grid{background:rgba(48,53,46,.28);border-color:rgba(48,53,46,.28)}
.feature{padding:34px 30px 38px;background:var(--black)}
.section-paper .feature{background:var(--paper)}
.feature-num{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--lime);
}
.section-paper .feature-num{color:var(--paper-ink)}
.feature h3{
  margin-top:16px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:30px;
  font-style:italic;
  font-weight:900;
  letter-spacing:-.03em;
  line-height:.95;
  text-transform:uppercase;
}
.feature p{margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.section-paper .feature p{color:var(--paper-ink)}

/* pricing plans ---------------------------------------------------------- */
.plan-grid{
  display:grid;
  gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  margin-top:clamp(44px,5vw,72px);
}
.plan{display:flex;flex-direction:column;padding:36px 32px 38px;border-radius:3px}
.plan-lime{background:var(--lime);color:var(--black)}
.plan-dark{background:var(--black);color:var(--chalk);border:1px solid var(--rule)}
.plan-tag{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.08em}
.plan-price{
  margin-top:18px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(52px,5.6vw,78px);
  font-style:italic;
  font-weight:900;
  letter-spacing:-.045em;
  line-height:.85;
  text-transform:uppercase;
}
.plan-price small{
  display:block;
  margin-top:8px;
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  font-style:normal;
  font-weight:600;
  letter-spacing:.08em;
}
.plan-copy{margin-top:20px;font-size:15px;line-height:1.55}
.plan-dark .plan-copy{color:var(--muted)}
.plan .marked{margin-top:26px;flex:1}
.plan .button{margin-top:30px;align-self:flex-start}

/* faq -------------------------------------------------------------------- */
.faq{margin-top:clamp(40px,4.5vw,64px);border-top:2px solid var(--chalk)}
.faq-row{
  display:grid;
  gap:10px 48px;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  padding:28px 0;
  border-bottom:1px solid var(--rule);
}
.faq-row h3{
  font-family:"Barlow Condensed",sans-serif;
  font-size:27px;
  font-style:italic;
  font-weight:900;
  letter-spacing:-.028em;
  line-height:1;
  text-transform:uppercase;
}
.faq-row p{color:var(--muted);font-size:15px;line-height:1.6}

/* legal / long-form document pages --------------------------------------- */
.doc-head{padding:clamp(52px,6vw,90px) 0 clamp(30px,3.5vw,46px);background:var(--black)}
.doc-head .kicker{color:var(--lime)}
.doc-head h1{
  margin-top:16px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(48px,7vw,104px);
  font-style:italic;
  font-weight:900;
  letter-spacing:-.045em;
  line-height:.84;
  text-transform:uppercase;
}
.doc-meta{
  margin-top:20px;
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--muted);
}
.doc-intro{max-width:62ch;margin-top:22px;color:var(--muted);font-size:clamp(16px,1.35vw,19px);line-height:1.6}
.doc-body{padding:0 0 clamp(56px,6vw,96px)}
.doc-sec{max-width:74ch;padding:32px 0;border-top:1px solid var(--rule)}
.doc-sec h2{
  display:grid;
  grid-template-columns:56px 1fr;
  align-items:baseline;
  font-family:"Barlow Condensed",sans-serif;
  font-size:clamp(24px,2.4vw,32px);
  font-style:italic;
  font-weight:900;
  letter-spacing:-.028em;
  line-height:1;
  text-transform:uppercase;
}
.doc-sec h2 span{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  font-style:normal;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--lime);
}
.doc-sec p{margin-top:16px;margin-left:56px;color:var(--muted);font-size:15.5px;line-height:1.68}
.doc-sec p b{color:var(--chalk);font-weight:700}
.doc-sec a{color:var(--lime);text-decoration:underline;text-underline-offset:3px}

/* legal hub grid ---------------------------------------------------------- */
/* explicit columns so the 8 cards always fill complete rows — auto-fit left an
   orphan row that exposed the grid background as a grey void */
.legal-grid{
  display:grid;
  gap:1px;
  grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));
  margin:34px 0 8px;
  background:var(--rule);
  border:1px solid var(--rule);
}
@media (max-width:1080px){.legal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.legal-grid{grid-template-columns:1fr}}
.legal-card{display:block;padding:28px 26px 32px;background:var(--black);transition:background .18s}
.legal-card:hover{background:var(--black-2)}
.legal-card span{
  font-family:"IBM Plex Mono",monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--lime);
}
.legal-card h3{
  margin-top:14px;
  font-family:"Barlow Condensed",sans-serif;
  font-size:27px;
  font-style:italic;
  font-weight:900;
  letter-spacing:-.028em;
  line-height:1;
  text-transform:uppercase;
}
.legal-card p{margin-top:11px;color:var(--muted);font-size:14px;line-height:1.55}

/* footer legal row -------------------------------------------------------- */
.footer-legal{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  margin-top:16px;
  font-size:12.5px;
  color:var(--muted);
}
.footer-legal a{border-bottom:1px solid transparent;padding-bottom:2px}
.footer-legal a:hover{border-bottom-color:var(--lime);color:var(--lime)}

/* responsive ------------------------------------------------------------- */
@media (max-width:920px){
  .page-hero-shell,.split{grid-template-columns:1fr}
  .split.flip .split-copy{order:0}
  .page-hero-art,.split-art{max-width:520px}
  .faq-row{grid-template-columns:1fr;gap:8px}
}
@media (max-width:560px){
  .page-hero{padding-top:40px}
  .marked li,.plan .marked li{grid-template-columns:42px 1fr}
  .doc-sec h2{grid-template-columns:1fr;gap:8px}
  .doc-sec p{margin-left:0}
}

/* respect reduced motion for the reveal system on these pages ------------ */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important}
}