/* =================================================================
   ARKLIGHT — site shell for product.html
   Topbar, footer, arrow glyph. Consumes tokens from colors_and_type.css.
   ================================================================= */

/* ===== TOPBAR ===== */
.topbar{
  position:fixed;top:0;left:0;right:0;height:64px;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;
  background:linear-gradient(180deg, rgba(11,10,8,.82) 0%, rgba(11,10,8,.5) 100%);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,250,235,.06);
}
.topbar .brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.topbar .brand-mark{
  width:22px;height:22px;border:1px solid rgba(200,217,228,.45);border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(110,142,168,.12);
  position:relative;
}
.topbar .brand-mark::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--violet-100);
  box-shadow:0 0 10px rgba(200,217,228,.7);
}
.topbar .brand-word{
  font-family:var(--font-display);font-weight:600;font-size:14px;
  letter-spacing:.12em;color:var(--text-0);text-transform:uppercase;
}
.topbar .nav{display:flex;gap:28px;align-items:center;}
.topbar .nav a{
  font-family:var(--font-body);font-size:13px;font-weight:500;
  color:var(--text-2);text-decoration:none;
  transition:color 160ms var(--ease-quick);
  position:relative;padding:6px 0;
}
.topbar .nav a:hover,
.topbar .nav a.active,
.topbar .nav a[aria-current="page"]{color:var(--text-0);}
.topbar .nav a.active::after,
.topbar .nav a[aria-current="page"]::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--violet-200);
}
.topbar .top-meta{display:flex;align-items:center;gap:14px;}
.topbar .loc{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;
  color:var(--text-3);text-transform:uppercase;
}

@media (max-width:900px){
  .topbar{padding:0 20px;}
  .topbar .nav{display:none;}
  .topbar .loc{display:none;}
}

/* Arrow glyph used inside buttons */
.arrow{display:inline-flex;}
.arrow::before{content:'→';font-size:14px;line-height:1;}

/* ===== SITE FOOTER (product.html structure) ===== */
.site-footer{
  position:relative;border-top:1px solid var(--border-0);
  padding:80px 40px 56px;
  background:var(--canvas-0);
}
.site-footer .footer-grid{
  max-width:1440px;margin:0 auto;
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;
}
.site-footer .footer-col{display:flex;flex-direction:column;gap:14px;}
.site-footer .footer-col .brand{display:flex;align-items:center;gap:10px;}
.site-footer .footer-col .brand-mark{
  width:22px;height:22px;border:1px solid rgba(200,217,228,.45);border-radius:3px;
  background:rgba(110,142,168,.12);display:flex;align-items:center;justify-content:center;position:relative;
}
.site-footer .footer-col .brand-mark::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--violet-100);box-shadow:0 0 10px rgba(200,217,228,.7);
}
.site-footer .footer-col .brand-word{
  font-family:var(--font-display);font-weight:600;font-size:14px;
  letter-spacing:.12em;color:var(--text-0);text-transform:uppercase;
}
.site-footer .footer-col p{
  font-size:14px;line-height:1.6;color:var(--text-1);max-width:340px;margin:0;
}
.site-footer .footer-col h5{
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--text-3);
  margin:0 0 10px;
}
.site-footer .footer-col a{
  display:block;
  font-size:14px;color:var(--text-1);text-decoration:none;
  padding:4px 0;
  transition:color 160ms var(--ease-quick);
}
.site-footer .footer-col a:hover{color:var(--text-0);}

.site-footer .footer-bar{
  max-width:1440px;margin:64px auto 0;padding-top:24px;
  border-top:1px solid var(--border-0);
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);
}
.site-footer .footer-bar strong{color:var(--text-0);font-weight:500;}

@media (max-width:900px){
  .site-footer{padding:56px 24px 40px;}
  .site-footer .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
}
@media (max-width:560px){
  .site-footer .footer-grid{grid-template-columns:1fr;}
}

/* =================================================================
   MOBILE & TABLET AUDIT FIXES — 2026-04-22
   Addresses: 901-1100 tablet gap + sub-560 phone issues
   ================================================================= */

/* ---- Topbar: hide primary CTA on narrow phones so brand + nav fit ---- */
@media (max-width:400px){
  .topbar .top-meta .ark-btn{display:none;}
}

/* ---- Tablet gap (901-1100): collapse heavy 3/4-col grids ---- */
@media (max-width:1100px) and (min-width:901px){
  /* Product page */
  .ts-problem-grid{grid-template-columns:1fr;}
  .ts-problem-grid .card{border-right:0;border-bottom:1px solid rgba(200,217,228,.08);}
  .ts-problem-grid .card:last-child{border-bottom:0;}

  .ts-why-grid{grid-template-columns:1fr;}
  .ts-why-grid .p{border-right:0;border-bottom:1px solid rgba(200,217,228,.08);}
  .ts-why-grid .p:last-child{border-bottom:0;}

  .ts-benefits{grid-template-columns:1fr;}

  .ts-pipe-track{grid-template-columns:repeat(2,1fr);}
  .ts-pipe-track::before{display:none;}
  .ts-pipe-node{border-right:0;}
  .ts-pipe-node:nth-child(2n){border-right:0;}
  .ts-pipe-node:nth-child(1),
  .ts-pipe-node:nth-child(2){border-bottom:1px solid rgba(200,217,228,.08);}
}

/* ---- ≤1024: hide hero specs panel to avoid H1 overlap on iPad ---- */
@media (max-width:1024px){
  .hm-hero-specs{display:none;}
}

/* ---- Hero content anchoring on mobile/tablet ----
   Default desktop uses `justify-content:flex-end` which pushes content to the
   bottom of the 100vh hero — tall H1 + eyebrow clipped the topbar on mobile.
   Solution: `justify-content:center` so content sits vertically centered in
   the 100vh hero, with balanced whitespace above and below. Keeps the
   cinematic video full-height and the composition feels full — not laggy. */
@media (max-width:900px){
  .hm-hero,
  .ts-hero{
    justify-content:center;
    padding:96px 24px 64px;
    min-height:100vh;
    height:100vh;
    max-height:none;
  }
}

/* ---- Phone type: shrink the H1 harder so long statements don't swallow the viewport ---- */
@media (max-width:560px){
  .hm-hero h1,
  .ts-hero h1{
    font-size:44px;
    line-height:1.02;
    letter-spacing:-.03em;
    margin-bottom:22px;
  }
  .hm-hero .lead,
  .ts-hero .lead{
    font-size:15px;
    line-height:1.5;
    margin-bottom:28px;
  }
  .hm-hero-eyebrow,
  .ts-hero-eyebrow{
    font-size:10px;
    letter-spacing:.22em;
    padding:5px 10px;
    margin-bottom:16px;
  }
  /* Shrink hero CTAs so the title dominates */
  .hm-hero .ark-btn-lg,
  .ts-hero .ark-btn-lg,
  .hm-hero-ctas .ark-btn-lg,
  .ts-hero-ctas .ark-btn-lg{
    height:42px;
    padding:12px 18px;
    font-size:13px;
  }
}

@media (max-width:380px){
  .hm-hero h1,
  .ts-hero h1{font-size:36px;}
}

/* ===== MOBILE NAV TOGGLE + MENU ===== */
.nav-toggle{
  display:none;
  width:40px;height:40px;padding:0;
  background:transparent;border:1px solid rgba(200,217,228,.2);border-radius:4px;
  cursor:pointer;position:relative;z-index:82;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:border-color 160ms var(--ease-quick), background 160ms var(--ease-quick);
}
.nav-toggle:hover{border-color:rgba(200,217,228,.45);background:rgba(255,255,255,.04);}
.nav-toggle span{
  display:block;width:18px;height:1.5px;background:var(--text-0);border-radius:1px;
  transition:transform 220ms var(--ease-out), opacity 160ms var(--ease-out);
  transform-origin:center;
}
.nav-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.mobile-menu{
  position:fixed;top:64px;left:0;right:0;z-index:79;
  display:flex;flex-direction:column;
  background:rgba(11,10,8,.96);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(255,250,235,.08);
  padding:12px 24px 28px;
  gap:4px;
  transform:translateY(-110%);
  opacity:0;
  pointer-events:none;
  transition:transform 320ms var(--ease-out), opacity 240ms var(--ease-out);
}
.mobile-menu.open{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.mobile-menu a{
  display:block;
  font-family:var(--font-display);
  font-size:20px;font-weight:500;letter-spacing:-.01em;
  color:var(--text-1);
  padding:18px 4px;
  border-bottom:1px solid rgba(255,250,235,.06);
  text-decoration:none;
  transition:color 160ms var(--ease-quick), padding-left 220ms var(--ease-out);
}
.mobile-menu a:last-of-type{border-bottom:0;}
.mobile-menu a:hover,
.mobile-menu a:focus-visible,
.mobile-menu a.active{color:var(--text-0);padding-left:10px;}
.mobile-menu a.active{border-left:1px solid var(--violet-200);padding-left:12px;}
.mobile-menu .mobile-menu-cta{
  margin-top:16px;padding:14px 18px;
  background:linear-gradient(180deg,#FFFFFF 0%,#F8F9FB 50%,#EBEEF2 100%);
  color:#0A0B0D;
  border:1px solid rgba(12,20,32,.15);
  border-radius:4px;
  text-align:center;
  font-family:var(--font-body);font-size:14px;font-weight:500;letter-spacing:0;
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.9),0 4px 12px -4px rgba(0,0,0,.35);
}
.mobile-menu .mobile-menu-cta:hover{padding-left:18px;}

body.no-scroll{overflow:hidden;}

@media (max-width:900px){
  .nav-toggle{display:flex;}
  /* Hide the topbar CTA on ≤900 — it's now in the menu instead */
  .topbar .top-meta .ark-btn{display:none;}
  .topbar .top-meta{display:none;}
}
@media (min-width:901px){
  .mobile-menu{display:none;}
}

/* ---- Comparison table — horizontal scroll on mobile/tablet ---- */
@media (max-width:900px){
  .ts-compare-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}
  .ts-compare-table th,
  .ts-compare-table td{padding:14px 14px;font-size:12px;white-space:normal;min-width:160px;}
  .ts-compare-table td.rl{min-width:120px;}
}

/* ---- ≤560 phone: collapse telemetry strips ---- */
@media (max-width:560px){
  .hm-telemetry,
  .ts-telemetry{grid-template-columns:1fr;}
  .hm-telemetry .cell,
  .ts-telemetry .cell{border-right:0;border-bottom:1px solid rgba(200,217,228,.08);padding:28px 20px;}
  .hm-telemetry .cell:last-child,
  .ts-telemetry .cell:last-child{border-bottom:0;}
  .hm-telemetry .v{font-size:32px;}
  .ts-telemetry .v{font-size:34px;}

  /* Section chrome */
  .hm-sec,
  .ts-sec{padding:72px 20px;}
  .hm-sec-head h2,
  .ts-sec-head h2{font-size:34px;letter-spacing:-.025em;}
  .hm-sec-head,
  .ts-sec-head{margin-bottom:48px;}

  /* Founder letter */
  .hm-letter{padding:36px 20px;}
  .hm-letter p{font-size:17px;}
  .hm-letter p.hl{font-size:20px;padding:16px 18px;}
  .hm-letter .qmark{font-size:96px;left:12px;}

  /* Problem quote (product) */
  .ts-pq{padding:36px 20px 28px;margin-top:40px;}
  .ts-pq::before{font-size:96px;left:12px;}
  .ts-pq blockquote{font-size:18px;}

  /* Outcome (product) */
  .ts-outcome h2{font-size:42px;}
  .ts-outcome .sub{font-size:20px;margin-bottom:48px;}
  .ts-outcome-kicker{margin-bottom:20px;}

  /* Lineage tiles */
  .ts-lineage-grid .tile{padding:20px 12px 14px;gap:12px;}
  .ts-lineage-grid .tile .logo{height:56px;}

  /* Pipeline node padding */
  .ts-pipe-node{padding:32px 20px 28px;}

  /* ACI card restructure — score wraps below name, bars go full-width stack */
  .ts-aci-card{padding:28px 20px;}
  .ts-aci-head{grid-template-columns:1fr;gap:20px;}
  .ts-aci-score{text-align:left;}
  .ts-aci-score .sv{font-size:56px;}
  .ts-aci-bar{grid-template-columns:1fr auto;gap:6px 12px;}
  .ts-aci-bar .lbl{grid-column:1/2;grid-row:1;}
  .ts-aci-bar .vl{grid-column:2/3;grid-row:1;}
  .ts-aci-bar .track{grid-column:1/3;grid-row:2;}

  /* Engage form chrome */
  .engage-meta{grid-template-columns:1fr;gap:16px;}
  .engage-points li{grid-template-columns:28px 1fr;gap:12px;}
  .form-foot{flex-direction:column;align-items:stretch;gap:12px;}
  .form-foot .ark-btn{width:100%;justify-content:center;}
}