/* ============================================================================
   DropShot — shared site stylesheet
   ----------------------------------------------------------------------------
   Every page except index.html loads this file.

   Design source of truth: the landing page HERO, not its light sections.
   The sub-pages never leave the deep navy environment — one continuous
   ink → ink-2 gradient from nav to footer, restrained blue glow, white
   headings, mist body copy, mono accents, hairline rules, generous space.
   No pale page backgrounds. No white cards.

   To add a page (Pricing, Contact, Terms, Privacy Policy):
     1. Copy any existing page (privacy.html is the simplest).
     2. Change <title>, the page-head block, and the body content.
     3. Add one <a> to the .navlinks block in EVERY page's nav.
     4. Set class="active" on the nav link for the current page.
   Nothing else needs to change.
   ========================================================================== */

/* --- Tokens: identical to the landing page ------------------------------- */
:root{
  --ink:#0A1628;
  --ink-2:#0F2138;
  --paper:#F7F9FB;
  --paper-2:#EDF1F5;
  --drop:#0089FF;
  --drop-deep:#006ECC;
  --mist:#8FA3B8;
  --mist-dark:#4C6178;
  --gold:#E8A94D;
  --gold-deep:#C6822B;
  --line:rgba(255,255,255,0.09);
  --line-dark:rgba(10,22,40,0.1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  background:var(--ink);
  color:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:'Space Grotesk', sans-serif; letter-spacing:-0.02em;}
a{color:inherit;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}

/* --- Nav (identical to the landing page) --------------------------------- */
nav{
  position:sticky; top:0; z-index:50;
  background:rgba(10,22,40,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:72px;}
.brand{
  display:flex; align-items:center; gap:8px; color:#fff;
  font-family:'Space Grotesk'; font-weight:700; font-size:34px;
  text-decoration:none;
}
.brand-icon{height:23.5px; width:auto; display:block; flex-shrink:0;}
.brand .drop{color:var(--drop);}
.brand .shot{color:#fff;}

.navlinks{display:flex; align-items:center; gap:36px; font-size:14px; color:var(--mist);}
.navlinks a{text-decoration:none; transition:color .2s; white-space:nowrap;}
.navlinks a:hover{color:#fff;}
.navlinks a.active{color:#fff;}

.nav-toggle{
  display:none; background:none; border:1px solid var(--line); border-radius:7px;
  width:38px; height:38px; cursor:pointer; padding:0;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.nav-toggle span{display:block; width:16px; height:1.5px; background:var(--mist); transition:background .2s;}
.nav-toggle:hover span{background:#fff;}

/* --- Page head -----------------------------------------------------------
   Same gradient, eyebrow and accent headline as the hero. The soft blue bloom
   stands in for the glow the logo tile throws across the home page.
   -------------------------------------------------------------------------- */
.page-head{
  background:linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color:#fff;
  padding:88px 0 78px;
  position:relative;
  overflow:hidden;
}
.page-head::after{
  content:'';
  position:absolute; top:-180px; right:-120px;
  width:620px; height:620px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,137,255,0.13) 0%, rgba(0,137,255,0) 68%);
  pointer-events:none;
}
.page-head .wrap{position:relative; z-index:1;}
.eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:12.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--drop);
  display:flex; align-items:center; gap:10px; margin-bottom:22px;
}
.eyebrow::before{
  content:''; width:7px; height:7px; border-radius:50%; background:var(--drop);
  box-shadow:0 0 0 4px rgba(0,137,255,0.18);
}
.page-head h1{font-size:52px; line-height:1.06; font-weight:700; margin-bottom:22px; max-width:760px;}
.page-head h1 .accent{
  background:linear-gradient(120deg, var(--drop), #7ec2ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.page-head p.lede{font-size:18px; line-height:1.6; color:var(--mist); max-width:620px;}

/* --- Body ----------------------------------------------------------------
   Continues the gradient instead of cutting to a pale slab, so the page reads
   as one environment from nav to footer.
   -------------------------------------------------------------------------- */
.page-body{
  padding:16px 0 96px;
  background:linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
}

/* --- Privacy Promise -----------------------------------------------------
   Editorial, not cards. A mono index sits in a narrow left rail; the statement
   sits in the reading column; hairlines set the rhythm. The lead statement is
   lit the way the logo tile is lit — the hero's exact 40px blue bloom.
   -------------------------------------------------------------------------- */
.promise{counter-reset:promise; max-width:940px;}

.promise-block{
  counter-increment:promise;
  display:grid;
  grid-template-columns:72px 1fr;
  gap:0 32px;
  padding:52px 0;
  border-top:1px solid var(--line);
}
.promise-block::before{
  content:counter(promise, decimal-leading-zero);
  grid-column:1; grid-row:1;
  font-family:'JetBrains Mono', monospace;
  font-size:13px; font-weight:600;
  color:var(--drop);
  letter-spacing:0.06em;
  padding-top:7px;
}
/* Every real child (h2, p) sits in the reading column; only the counter uses
   the rail. Without this, the grid would drop paragraphs into the 72px rail. */
.promise-block > *{grid-column:2;}
.promise-block h2{
  font-size:26px; line-height:1.3; color:#fff; margin-bottom:16px; font-weight:700;
}
.promise-block p{
  font-size:17px; line-height:1.72; color:var(--mist); max-width:600px;
}
.promise-block p + p{margin-top:14px;}
.promise-block b{color:#fff; font-weight:600;}

.promise-block:first-child{
  border-top:none;
  margin-top:44px;
  padding:44px 44px 46px;
  border-radius:20px;
  background:linear-gradient(150deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border:1px solid rgba(0,137,255,0.28);
  box-shadow:0 0 40px rgba(0,123,254,0.10), inset 0 1px 0 rgba(255,255,255,0.05);
}
.promise-block:first-child h2{font-size:32px; margin-bottom:18px;}
.promise-block:first-child p{font-size:18.5px;}
.promise-block:nth-child(2){border-top:none;}

/* --- FAQ -----------------------------------------------------------------
   Hairline rows in the dark, not stacked cards. Opening a row lifts it gently
   out of the background and lights a blue rule down its left edge.
   -------------------------------------------------------------------------- */
.faq{counter-reset:faq; max-width:940px; margin-top:44px;}

.faq-item{
  counter-increment:faq;
  border-top:1px solid var(--line);
  border-left:2px solid transparent;
  border-radius:0 10px 10px 0;
  background:transparent;
  transition:background .25s ease, border-left-color .25s ease, box-shadow .25s ease;
}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-item:hover{background:rgba(255,255,255,0.02);}
.faq-item[open]{
  background:linear-gradient(150deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  border-left-color:var(--drop);
  box-shadow:0 0 34px rgba(0,123,254,0.08);
}

.faq-item summary{
  list-style:none; cursor:pointer;
  display:grid;
  grid-template-columns:72px 1fr 24px;
  align-items:center;
  gap:0 32px;
  padding:26px 26px 26px 0;
  font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:20px;
  color:#fff;
  transition:color .2s;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::before{
  content:counter(faq, decimal-leading-zero);
  font-family:'JetBrains Mono', monospace;
  font-size:13px; font-weight:600;
  color:var(--drop);
  letter-spacing:0.06em;
  padding-left:28px;
}
.faq-item summary:hover{color:var(--drop);}
.faq-item[open] summary{color:#fff;}
.faq-item summary:focus-visible{outline:2px solid var(--drop); outline-offset:-4px;}

.faq-icon{
  width:20px; height:20px; position:relative;
  transition:transform .25s ease;
}
.faq-icon::before,
.faq-icon::after{
  content:''; position:absolute; background:var(--drop); border-radius:1px;
}
.faq-icon::before{top:9px; left:2px; width:16px; height:2px;}
.faq-icon::after{top:2px; left:9px; width:2px; height:16px; transition:opacity .25s ease;}
.faq-item[open] .faq-icon{transform:rotate(90deg);}
.faq-item[open] .faq-icon::after{opacity:0;}

.faq-answer{
  padding:0 26px 30px 132px;
  font-size:16.5px; line-height:1.72; color:var(--mist);
  max-width:760px;
}
.faq-answer p + p{margin-top:14px;}
.faq-answer b{color:#fff; font-weight:600;}
.faq-answer a{color:var(--drop); text-decoration:none; border-bottom:1px solid rgba(0,137,255,0.35);}
.faq-answer a:hover{border-bottom-color:var(--drop);}

/* --- Closing band --------------------------------------------------------
   The landing page's waitlist band, separated by a hairline rather than a
   colour change, since the page is already dark.
   -------------------------------------------------------------------------- */
.page-close{
  background:var(--ink);
  border-top:1px solid var(--line);
  color:#fff; padding:84px 0; text-align:center;
}
.page-close h2{font-size:32px; margin-bottom:14px;}
.page-close p{color:var(--mist); font-size:16px; margin-bottom:32px;}
.page-close .btn-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

.btn{
  padding:13px 24px; border-radius:8px; font-size:15px; font-weight:600; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; transition:all .2s; cursor:pointer; border:none;
}
.btn-primary{background:var(--drop); color:#fff;}
.btn-primary:hover{background:var(--drop-deep); transform:translateY(-1px);}
.btn-ghost{background:transparent; color:#fff; border:1px solid var(--line);}
.btn-ghost:hover{border-color:rgba(255,255,255,0.3);}

/* --- Footer (identical to the landing page) ------------------------------ */
footer{background:var(--ink); border-top:1px solid var(--line); padding:28px 0; text-align:center;}
footer p{font-size:13px; color:var(--mist-dark); font-family:'JetBrains Mono', monospace;}
footer p span{color:var(--mist);}
footer .foot-links{
  display:flex; gap:22px; justify-content:center; flex-wrap:wrap;
  margin-bottom:14px; font-size:13px; font-family:'JetBrains Mono', monospace;
}
footer .foot-links a{color:var(--mist); text-decoration:none; transition:color .2s;}
footer .foot-links a:hover{color:#fff;}

/* --- Responsive ----------------------------------------------------------
   The left index rail collapses and the number sits above the statement, so
   the reading column keeps full width. Nothing shrinks below a comfortable
   reading size.
   -------------------------------------------------------------------------- */
@media (max-width:860px){
  .wrap{padding:0 22px;}

  .nav-toggle{display:flex;}
  .navlinks{
    display:none;
    position:absolute; top:72px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(10,22,40,0.98);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    padding:6px 22px 14px;
  }
  .navlinks.open{display:flex;}
  .navlinks a{padding:14px 0; font-size:15px; border-top:1px solid var(--line);}

  .page-head{padding:56px 0 52px;}
  .page-head::after{width:420px; height:420px; top:-140px; right:-140px;}
  .page-head h1{font-size:34px;}
  .page-head p.lede{font-size:16.5px;}

  .page-body{padding:8px 0 64px;}

  .promise{max-width:none;}
  .promise-block{
    grid-template-columns:1fr;
    gap:0;
    padding:38px 0;
  }
  .promise-block::before{padding-top:0; margin-bottom:14px; grid-column:1; grid-row:auto;}
  .promise-block > *{grid-column:1;}
  .promise-block h2{font-size:22px; margin-bottom:12px;}
  .promise-block p{font-size:16px;}
  .promise-block:first-child{
    margin-top:34px;
    padding:32px 24px 34px;
    border-radius:16px;
  }
  .promise-block:first-child h2{font-size:26px;}
  .promise-block:first-child p{font-size:17px;}

  .faq{margin-top:34px;}
  .faq-item summary{
    grid-template-columns:44px 1fr 20px;
    gap:0 12px;
    padding:22px 18px 22px 0;
    font-size:17px;
  }
  .faq-item summary::before{padding-left:16px; font-size:12px;}
  .faq-answer{padding:0 18px 24px 60px; font-size:15.5px;}

  .page-close{padding:60px 0;}
  .page-close h2{font-size:26px;}
  .page-close .btn-row{flex-direction:column;}
  .page-close .btn{justify-content:center;}
}

*:focus-visible{outline:2px solid var(--drop); outline-offset:2px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important; animation:none !important;}
}