/* ============================================================
   BEAVER HUB — SUB-PAGES v2 (landing-matched, bone/navy/orange)
   Restyles the existing .sp-* content components to the LANDING
   design language. Loads AFTER styles.css + landing.css, so the
   --bh-* tokens, pill .nav and .bh-foot all come from landing.css.
   The old dark "cosmos / starfield" theme is fully superseded.
   ============================================================ */

/* ---------- page canvas ---------- */
html, body{ overflow-x:clip; }        /* contain any residual side overflow (mobile) */
body{
  background:var(--bh-bone);
  color:var(--bh-ink);
  font-family:var(--bh-sans);
  max-width:100%;
}
::selection{ background:var(--bh-orange); color:#fff; }

.sp{ position:relative; overflow-x:clip; }
/* responsive media — never let an asset push the page wider than the viewport */
.sp img, .sp video, .sp iframe{ max-width:100%; }
.sp-wrap,
.sp-section,
.sp-hero__inner{
  width:min(1180px, calc(100% - clamp(2rem,6vw,7rem)));
  margin-inline:auto;
}

/* ---------- shared subpage nav bits (pill nav from landing.css) ---------- */
.nav__back{
  font-family:var(--bh-mono); font-size:.68rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.7); white-space:nowrap; transition:color .25s;
}
.nav__back:hover{ color:#fff; }
.sp-nav2 .sp-menu{ margin-right:auto; }   /* quick-menu hugs the brand */

/* ---------- sections & type ---------- */
.sp-section{ padding-block:clamp(3.5rem,10vh,7.5rem); position:relative; }
.sp-eyebrow{
  font-family:var(--bh-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bh-orange);
  margin-bottom:.9rem; display:inline-flex; align-items:center; gap:.5rem;
}
.sp-title{
  font-family:"Space Grotesk", var(--bh-sans);
  font-weight:500; letter-spacing:-.03em; line-height:1.08;
  font-size:clamp(1.8rem,3.6vw,2.9rem); color:var(--bh-ink);
  margin:0 0 1.2rem; max-width:22ch;
}
.sp-body{
  color:var(--bh-gray); font-size:clamp(1rem,1.15vw,1.08rem);
  line-height:1.72; max-width:66ch; margin:0 0 1.1rem;
}
.sp-body:last-child{ margin-bottom:0; }

/* ---------- HERO ---------- */
.sp-hero{
  padding-top:clamp(7.5rem,17vh,11rem);
  padding-bottom:clamp(2.5rem,7vh,4.5rem);
  position:relative;
}
.sp-hero__inner--split{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.sp-hero__inner--center{ max-width:66ch; text-align:center; }
.sp-hero__inner--center .sp-kicker{ justify-content:center; }
.sp-hero__inner--center .sp-hero__sub{ margin-inline:auto; }
.sp-hero__inner--center .sp-actions{ justify-content:center; }

.sp-kicker{
  font-family:var(--bh-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--bh-dim);
  display:flex; align-items:center; gap:.55rem; margin-bottom:1.2rem;
}
.sp-kicker .dot{
  width:7px; height:7px; border-radius:50%; background:var(--bh-orange);
  box-shadow:0 0 12px 2px rgba(255,93,0,.7);
}
.sp-hero__title{
  font-family:"Space Grotesk", var(--bh-sans);
  font-weight:500; letter-spacing:-.035em; line-height:1.03;
  font-size:clamp(2.4rem,5.6vw,4.3rem); color:var(--bh-ink); margin:0;
}
.sp-hero__title em,
.sp-hero__title span{ font-style:normal; color:var(--bh-orange); }
.sp-hero__sub{
  color:var(--bh-gray); font-size:clamp(1.08rem,1.5vw,1.28rem);
  line-height:1.62; max-width:52ch; margin:1.4rem 0 0;
}
.sp-actions{ display:flex; gap:1rem; margin-top:2.1rem; flex-wrap:wrap; }

/* hero media (split = .sp-logo, center = .sp-frame) */
.sp-logo, .sp-frame{
  border-radius:16px; overflow:hidden; background:#fff;
  border:1px solid var(--bh-line);
  box-shadow:0 24px 60px rgba(4,32,59,.12);
  -webkit-clip-path:polygon(0 0,100% 0,100% 100%,20px 100%,0 calc(100% - 20px));
  clip-path:polygon(0 0,100% 0,100% 100%,20px 100%,0 calc(100% - 20px));
}
.sp-frame{ margin-top:clamp(2.4rem,6vh,4rem); }
.sp-logo img, .sp-frame img{ display:block; width:100%; height:auto; }

/* ---------- STATS (hairline grid) ---------- */
.sp-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; background:var(--bh-line);
  border:1px solid var(--bh-line); border-radius:14px; overflow:hidden;
}
.sp-stat{
  background:var(--bh-bone); padding:clamp(1.3rem,2.5vw,2rem) 1.4rem;
  display:flex; flex-direction:column; gap:.5rem;
}
.sp-stat__num{
  font-family:"Space Grotesk", var(--bh-sans); font-weight:600;
  font-size:clamp(1.6rem,3vw,2.4rem); letter-spacing:-.02em; color:var(--bh-ink);
}
.sp-stat__label{
  font-family:var(--bh-mono); font-size:.66rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--bh-dim); line-height:1.4;
}

/* ---------- STORY (two columns) ---------- */
.sp-story{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}

/* ---------- CARDS ---------- */
.sp-cards{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(.8rem,1.4vw,1.15rem); margin-top:clamp(1.6rem,3vh,2.4rem);
}
.sp-card{
  position:relative; background:#fff; border:1px solid var(--bh-line);
  border-radius:14px; padding:1.5rem 1.4rem;
  transition:border-color .3s var(--bh-ease), transform .3s var(--bh-ease), box-shadow .3s var(--bh-ease);
}
.sp-card:hover{
  border-color:var(--bh-orange); transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(4,32,59,.09);
}
.sp-card__icon{
  display:inline-flex; font-size:1.5rem; line-height:1; margin-bottom:1rem;
  filter:saturate(.9);
}
.sp-card__name{
  font-family:"Space Grotesk", var(--bh-sans); font-weight:600;
  font-size:1.05rem; letter-spacing:-.01em; color:var(--bh-ink); margin-bottom:.5rem;
}
.sp-card__desc{ color:var(--bh-gray); font-size:.92rem; line-height:1.62; }

/* ---------- PHASES (numbered rule) ---------- */
.sp-phases{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,2.4vw,2rem); margin-top:clamp(1.6rem,3vh,2.4rem);
}
.sp-phase{ border-top:2px solid var(--bh-ink); padding-top:1.1rem; }
.sp-phase__num{
  font-family:var(--bh-mono); font-size:.82rem; font-weight:600;
  letter-spacing:.06em; color:var(--bh-orange);
}
.sp-phase__title{
  font-family:"Space Grotesk", var(--bh-sans); font-weight:600;
  font-size:1.08rem; color:var(--bh-ink); margin:.6rem 0 .5rem;
}
.sp-phase__desc{ color:var(--bh-gray); font-size:.9rem; line-height:1.6; }

/* ---------- CATEGORIES (app groups) ---------- */
.sp-cats{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(1rem,2vw,1.3rem); margin-top:clamp(1.6rem,3vh,2.4rem);
}
.sp-cat{
  background:#fff; border:1px solid var(--bh-line);
  border-radius:14px; padding:1.6rem 1.5rem;
}
.sp-cat__head{
  font-family:"Space Grotesk", var(--bh-sans); font-weight:600;
  font-size:1.15rem; letter-spacing:-.01em; color:var(--bh-ink);
}
.sp-cat__sub{ color:var(--bh-gray); font-size:.92rem; line-height:1.6; margin:.45rem 0 1.1rem; }
.sp-cat__apps{ display:flex; flex-wrap:wrap; gap:.5rem; }
.sp-app-tag{
  font-family:var(--bh-mono); font-size:.66rem; letter-spacing:.05em;
  color:var(--bh-gray); background:var(--bh-bone-2);
  border:1px solid var(--bh-line); padding:.42rem .7rem; border-radius:999px;
}

/* ---------- POSITIONS / list ---------- */
.sp-pos{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:.8rem 1.4rem; margin-top:clamp(1.6rem,3vh,2.4rem);
}
.sp-pos--4{ grid-template-columns:repeat(4,1fr); }
.sp-pos__item{
  border-left:2px solid var(--bh-orange); padding:.35rem 0 .35rem 1rem;
  color:var(--bh-ink); font-weight:500; font-size:1rem; line-height:1.4;
}

/* ---------- QUOTES (navy card) ---------- */
.sp-quotes{ display:grid; gap:1.2rem; margin-top:clamp(1.6rem,3vh,2.4rem); }
.sp-quote{
  background:var(--bh-ink); color:#fff; border-radius:18px;
  padding:clamp(2rem,4vw,3.2rem);
  display:grid; gap:clamp(1.4rem,3vw,2.4rem); align-items:center;
}
.sp-quote__media{ border-radius:12px; overflow:hidden; }
.sp-quote__media img{ display:block; width:100%; height:auto; }
.sp-quote__text, .sp-quote__body{
  font-family:"Space Grotesk", var(--bh-sans); font-weight:500;
  font-size:clamp(1.3rem,2.4vw,1.9rem); line-height:1.32; letter-spacing:-.02em;
}
.sp-quote__who, .sp-quote__name{ font-weight:600; margin-top:1.3rem; }
.sp-quote__role{ color:rgba(255,255,255,.55); font-size:.9rem; margin-top:.25rem; }

/* ---------- VIDEO ---------- */
.sp-video{
  position:relative; aspect-ratio:16/9; margin-top:clamp(1.6rem,3vh,2.4rem);
  border:1px solid var(--bh-line); border-radius:16px; overflow:hidden; background:#000;
  box-shadow:0 24px 60px rgba(4,32,59,.12);
}
.sp-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- CTA (navy card) ---------- */
.sp-cta{
  position:relative; overflow:hidden; text-align:center;
  width:min(1180px, calc(100% - clamp(2rem,6vw,7rem)));
  margin:clamp(3rem,8vh,6rem) auto clamp(4rem,10vh,7rem);
  background:var(--bh-ink); color:#fff; border-radius:22px;
  padding:clamp(3rem,8vh,5.5rem) 1.5rem;
}
.sp-cta::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 80% at 50% 0%, rgba(255,93,0,.18), transparent 60%);
}
.sp-cta__title{
  position:relative; font-family:"Space Grotesk", var(--bh-sans);
  font-weight:500; letter-spacing:-.025em; line-height:1.12;
  font-size:clamp(1.7rem,3.4vw,2.7rem); color:#fff;
  max-width:22ch; margin:0 auto 1.9rem;
}
.sp-cta .btn{ position:relative; }

/* ---------- buttons on bone (override styles.css dark theme) ---------- */
.sp .btn, .sp-cta .btn{
  font-family:var(--bh-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  padding:1rem 1.7rem; border-radius:9px; transition:filter .25s, border-color .25s, color .25s;
}
.sp .btn--primary, .sp-cta .btn--primary{ background:var(--bh-orange); color:#fff; border:0; }
.sp .btn--primary:hover, .sp-cta .btn--primary:hover{ filter:brightness(1.08); }
.sp .btn--ghost{ background:transparent; color:var(--bh-ink); border:1px solid var(--bh-line); }
.sp .btn--ghost:hover{ border-color:var(--bh-ink); }
/* ghost button sitting on the navy CTA card is on dark → light it */
.sp-cta .btn--ghost{ color:#fff; border:1px solid rgba(255,255,255,.28); }
.sp-cta .btn--ghost:hover{ border-color:#fff; }

/* ============================================================
   DECOR — animated circuit traces, flicker crosses, faint grid
   (borrows the landing's .bh-paths/.bh-pulse/.bh-cross; the SVG
   routes + crosses are injected at varied spots by js/sp-decor.js)
   ============================================================ */
/* circuit artwork lives ONLY in measured empty zones (blank side of a
   section, hero side-margins, dark CTA) — js/sp-decor.js keeps it clear
   of every text box. Content is lifted above the decor layer. */
.sp-hero, .sp-section, .sp-cta{ position:relative; }
.sp .bh-paths.sp-decor{ position:absolute; z-index:0; }
.sp-hero > :not(.bh-paths):not(.sp-cross),
.sp-section > :not(.bh-paths):not(.sp-cross),
.sp-cta > :not(.bh-paths):not(.sp-cross){ position:relative; z-index:1; }
.sp-cta::before{ z-index:0; }
.sp-cross{ opacity:.4; }

/* card accent line grows on hover */
.sp-card{ overflow:hidden; }
.sp-card::after{
  content:""; position:absolute; left:0; top:0; height:2px; width:0;
  background:var(--bh-orange); transition:width .35s var(--bh-ease);
}
.sp-card:hover::after{ width:42%; }

/* no spare room on phones → keep them completely clean */
@media (max-width:760px){ .sp .sp-decor, .sp .sp-cross{ display:none; } }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .sp-hero__inner--split{ grid-template-columns:1fr; gap:2rem; }
  .sp-story{ grid-template-columns:1fr; gap:1.6rem; }
  .sp-stats{ grid-template-columns:repeat(2,1fr); }
  .sp-phases{ grid-template-columns:repeat(2,1fr); }
  .sp-pos--4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .nav__back{ display:none; }
  .nav__pill-btn--demo{ display:none; }
  .sp-stats{ grid-template-columns:1fr 1fr; }
  .sp-phases{ grid-template-columns:1fr; }
  .sp-pos, .sp-pos--4{ grid-template-columns:1fr; }
}