/* -----------------------------------------------------------------------
   Shared styles for the public site pages (home, features, pricing, demo,
   faq, contact). Loaded alongside styles.css, which supplies :root tokens,
   the base body reset, and the splash-screen hero — this file is everything
   past the splash.
----------------------------------------------------------------------- */

body.site{ background:var(--night); }

/* ── NAV ── */
.site-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:18px 40px;
  background:rgba(10,14,18,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--wall-line);
}

.site-nav .brand{
  font-family:'Oswald',sans-serif;
  font-weight:700;
  font-size:19px;
  letter-spacing:.3px;
  color:var(--chalk);
  text-decoration:none;
  display:flex; align-items:center; gap:8px;
}
.site-nav .brand .dot{ color:var(--floodlight); }

.site-nav .nav-links{
  display:flex; align-items:center; justify-content:center; flex:1;
  gap:30px;
  list-style:none;
}
.site-nav .nav-links a{
  font-family:'DM Sans',sans-serif;
  font-size:14.5px;
  font-weight:500;
  color:rgba(243,239,228,0.72);
  text-decoration:none;
  transition:color .15s ease;
}
.site-nav .nav-links a:hover{ color:var(--chalk); }
.site-nav .nav-links a.active{ color:var(--floodlight); }

.site-nav .nav-cta{
  background:var(--floodlight);
  color:var(--night);
  font-weight:700;
  font-size:13.5px;
  padding:10px 20px;
  border-radius:8px;
  text-decoration:none;
  white-space:nowrap;
}

.nav-actions{ display:flex; align-items:center; gap:18px; }

.nav-toggle{
  display:none;
  background:transparent;
  border:1px solid var(--wall-line);
  border-radius:8px;
  width:40px; height:40px;
  color:var(--chalk);
  font-size:18px;
  cursor:pointer;
}

@media (max-width:860px){
  .site-nav{ padding:16px 20px; }
  .site-nav .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:0;
    background:rgba(10,14,18,0.97);
    border-bottom:1px solid var(--wall-line);
    max-height:0; overflow:hidden;
    transition:max-height .25s ease;
  }
  .site-nav .nav-links.open{ max-height:360px; }
  .site-nav .nav-links a{
    width:100%; padding:16px 20px;
    border-top:1px solid var(--wall-line);
  }
  .nav-toggle{ display:block; }
}

/* Narrow phones: brand + CTA + toggle get tight below ~430px. Scale the
   nav row down so the CTA keeps comfortable spacing on small handsets. */
@media (max-width:430px){
  .site-nav{ padding:14px 14px; gap:10px; }
  .site-nav .brand{ font-size:17px; }
  .site-nav .nav-cta{ font-size:12px; padding:9px 12px; }
  .nav-actions{ gap:10px; }
  .nav-toggle{ width:36px; height:36px; font-size:16px; flex:0 0 auto; }
}

/* ── PAGE SHELL ── */
.page-hero{
  padding:76px 40px 56px;
  text-align:center;
  background:
    radial-gradient(ellipse 700px 360px at 50% -10%, rgba(255,216,115,0.07), transparent 65%),
    linear-gradient(180deg, var(--night) 0%, var(--turf) 220%);
}
.page-hero .eyebrow-tag{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--floodlight);
  margin-bottom:16px;
}
.page-hero h1{
  font-family:'Oswald',sans-serif;
  font-weight:700;
  font-size:clamp(30px,5vw,46px);
  line-height:1.12;
  max-width:820px;
  margin:0 auto;
}
.page-hero h1 span{ color:var(--floodlight); }
.page-hero p.lede{
  margin:18px auto 0;
  max-width:600px;
  font-size:16px;
  font-weight:300;
  line-height:1.65;
  color:rgba(243,239,228,0.72);
}
.page-hero .hero-ctas{
  margin-top:28px;
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
}

.section{ padding:64px 40px; max-width:1080px; margin:0 auto; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 44px; }
.section-head .kicker{
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--floodlight);
}
.section-head h2{
  font-family:'Oswald',sans-serif;
  font-weight:700;
  font-size:clamp(24px,3.4vw,32px);
  margin-top:10px;
}
.section-head p{
  margin-top:12px;
  font-size:15px;
  color:rgba(243,239,228,0.68);
  line-height:1.6;
}

/* ── BUTTONS ── */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:14px;
  padding:13px 26px;
  border-radius:8px;
  text-decoration:none;
  letter-spacing:.3px;
  border:1px solid transparent;
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
}
.btn-primary{ background:var(--floodlight); color:var(--night); }
.btn-ghost{
  background:transparent; color:var(--chalk);
  border-color:rgba(243,239,228,0.25);
}
.btn-ghost:hover{ border-color:var(--floodlight); color:var(--floodlight); }

/* ── FEATURE / CARD GRID ── */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:20px;
}
.card{
  background:var(--wall);
  border:1px solid var(--wall-line);
  border-radius:14px;
  padding:26px 24px;
}
.card .icon{
  width:42px; height:42px;
  border-radius:10px;
  background:var(--floodlight-dim);
  color:var(--floodlight);
  display:flex; align-items:center; justify-content:center;
  font-size:19px;
  margin-bottom:16px;
}
.card h3{
  font-family:'Oswald',sans-serif;
  font-size:17px;
  font-weight:600;
  margin-bottom:8px;
}
.card p{
  font-size:14px;
  line-height:1.6;
  color:rgba(243,239,228,0.65);
}

.feature-block{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  padding:28px 0;
  border-bottom:1px solid var(--wall-line);
}
.feature-block:last-child{ border-bottom:none; }
.feature-block h3{
  font-family:'Oswald',sans-serif;
  font-size:19px;
  font-weight:600;
  display:flex; align-items:center; gap:10px;
}
.feature-block h3 .tag{
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--floodlight);
  background:var(--floodlight-dim);
  padding:4px 9px;
  border-radius:5px;
}
.feature-block ul{
  margin-top:6px;
  padding-left:20px;
  color:rgba(243,239,228,0.7);
  font-size:14.5px;
  line-height:1.9;
}

.roadmap-strip{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center;
}
.roadmap-strip span{
  font-size:13px;
  padding:8px 14px;
  border-radius:20px;
  border:1px solid rgba(243,239,228,0.18);
  color:rgba(243,239,228,0.6);
}

/* ── PRICING ── */
.pricing-note{
  max-width:640px; margin:0 auto 36px;
  text-align:center;
  font-size:13.5px;
  color:var(--floodlight);
  background:var(--floodlight-dim);
  border:1px solid rgba(255,216,115,0.25);
  border-radius:10px;
  padding:12px 18px;
}
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  align-items:stretch;
}
@media (max-width:900px){
  .pricing-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:640px){
  .pricing-grid{ grid-template-columns:1fr; }
}
.price-card{
  position:relative;
  background:var(--wall);
  border:1px solid var(--wall-line);
  border-radius:16px;
  padding:30px 24px;
  display:flex; flex-direction:column;
}
.price-card.featured{
  border-color:var(--floodlight);
  box-shadow:0 0 0 1px rgba(255,216,115,0.25), 0 20px 40px rgba(0,0,0,0.35);
}

/* "Most Popular" ribbon on the highlighted plan (driven by `badge` in
   pricing-config.js, not by plan name). */
.price-card .plan-badge{
  position:absolute; top:-11px; left:24px;
  font-family:'Oswald',sans-serif;
  font-size:10.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--night);
  background:var(--floodlight);
  padding:5px 11px;
  border-radius:20px;
}

/* Ground allowance — called out separately from the feature list so the
   limit is unmissable. */
.price-card .plan-allowance{
  font-family:'JetBrains Mono',monospace;
  font-size:11.5px; font-weight:500;
  letter-spacing:-.2px;
  color:var(--floodlight);
  background:var(--floodlight-dim);
  border:1px solid rgba(255,216,115,0.22);
  border-radius:8px;
  padding:0 10px;
  text-align:center;
  margin-bottom:4px;
  /* Fixed height + centering keeps every pill on one line and aligned. */
  min-height:36px;
  display:flex; align-items:center; justify-content:center;
}
.price-card .plan-name{
  font-family:'Oswald',sans-serif;
  font-size:19px; font-weight:600;
}
.price-card .plan-tag{
  font-size:12.5px;
  line-height:1.45;
  color:rgba(243,239,228,0.55);
  margin-top:4px;
  /* Two-line reserve keeps price rows aligned when a tagline wraps. */
  min-height:36px;
}
.price-card .plan-price{
  margin:20px 0 4px;
  font-family:'Oswald',sans-serif;
  font-size:31px; font-weight:700;
  color:var(--floodlight);
}
.price-card .plan-price sub{
  font-size:12.5px; font-weight:400;
  color:rgba(243,239,228,0.55);
  bottom:0;
}
.price-card .plan-price-note{
  font-size:12px;
  color:rgba(243,239,228,0.45);
  margin-bottom:18px;
}
.price-card ul{
  list-style:none;
  flex:1;
  margin:10px 0 24px;
}
.price-card ul li{
  font-size:13.5px;
  padding:7px 0;
  color:rgba(243,239,228,0.75);
  display:flex; gap:9px; align-items:flex-start;
}
.price-card ul li::before{
  content:'✓';
  color:var(--floodlight);
  font-weight:700;
}

.pricing-footnote{
  max-width:640px;
  margin:30px auto 0;
  text-align:center;
  font-size:12.5px;
  color:rgba(243,239,228,0.45);
}

/* ── FAQ ── */
.faq-list{ max-width:760px; margin:0 auto; }
.faq-item{
  border-bottom:1px solid var(--wall-line);
}
.faq-item button.faq-q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  background:none; border:none;
  text-align:left;
  padding:20px 4px;
  font-family:'DM Sans',sans-serif;
  font-size:16px; font-weight:500;
  color:var(--chalk);
  cursor:pointer;
}
.faq-item .faq-q .icon{
  font-family:'JetBrains Mono',monospace;
  color:var(--floodlight);
  font-size:18px;
  flex-shrink:0;
  transition:transform .2s ease;
}
.faq-item.open .faq-q .icon{ transform:rotate(45deg); }
.faq-item .faq-a{
  max-height:0; overflow:hidden;
  transition:max-height .25s ease;
}
.faq-item.open .faq-a{ max-height:400px; }
.faq-item .faq-a p{
  padding:0 4px 20px;
  font-size:14.5px; line-height:1.7;
  color:rgba(243,239,228,0.68);
}

/* ── FORMS ── */
.form-shell{
  max-width:600px; margin:0 auto;
  background:var(--wall);
  border:1px solid var(--wall-line);
  border-radius:16px;
  padding:36px;
}
.form-row{ margin-bottom:18px; }
.form-row.two-col{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.form-row label{
  display:block;
  font-size:12.5px;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:rgba(243,239,228,0.55);
  margin-bottom:7px;
}
.form-row input,
.form-row select,
.form-row textarea{
  width:100%;
  background:var(--night);
  border:1px solid var(--wall-line);
  border-radius:8px;
  padding:12px 14px;
  font-family:'DM Sans',sans-serif;
  font-size:14.5px;
  color:var(--chalk);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  outline:none;
  border-color:var(--floodlight);
}
.form-row textarea{ resize:vertical; min-height:96px; }
.form-row .field-error{
  display:none;
  margin-top:6px;
  font-size:12.5px;
  color:var(--rust);
}
.form-row.invalid input,
.form-row.invalid select,
.form-row.invalid textarea{ border-color:var(--rust); }
.form-row.invalid .field-error{ display:block; }

.form-note{
  font-size:12.5px;
  color:rgba(243,239,228,0.45);
  margin-top:4px;
}

.form-submit{
  width:100%;
  justify-content:center;
  margin-top:6px;
}

.form-success{
  display:none;
  text-align:center;
  padding:20px 4px 4px;
}
.form-success .icon{
  width:52px; height:52px;
  margin:0 auto 16px;
  border-radius:50%;
  background:var(--floodlight-dim);
  color:var(--floodlight);
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
}
.form-success h3{
  font-family:'Oswald',sans-serif;
  font-size:19px; margin-bottom:8px;
}
.form-success p{
  font-size:14px;
  color:rgba(243,239,228,0.65);
  line-height:1.6;
}
.form-shell.submitted form{ display:none; }
.form-shell.submitted .form-success{ display:block; }

@media (max-width:600px){
  .form-row.two-col{ grid-template-columns:1fr; }
  .form-shell{ padding:26px 20px; }
}

/* ── CTA BAND ── */
.cta-band{
  margin:0 40px 64px;
  padding:48px 40px;
  border-radius:20px;
  text-align:center;
  background:
    radial-gradient(ellipse 600px 260px at 50% 0%, rgba(255,216,115,0.10), transparent 70%),
    var(--turf);
  border:1px solid var(--wall-line);
}
.cta-band h2{
  font-family:'Oswald',sans-serif;
  font-size:clamp(22px,3vw,30px);
  font-weight:700;
}
.cta-band p{
  margin:12px auto 26px;
  max-width:480px;
  font-size:14.5px;
  color:rgba(243,239,228,0.68);
}

/* ── FOOTER ── */
.site-footer{
  border-top:1px solid var(--wall-line);
  padding:44px 40px 30px;
}
.site-footer .footer-grid{
  max-width:1080px; margin:0 auto;
  display:flex; flex-wrap:wrap;
  justify-content:space-between;
  gap:32px;
}
.site-footer .footer-brand{
  max-width:280px;
}
.site-footer .footer-brand .brand{
  font-family:'Oswald',sans-serif;
  font-weight:700; font-size:18px;
  color:var(--chalk);
  text-decoration:none;
}
.site-footer .footer-brand p{
  margin-top:10px;
  font-size:13.5px;
  line-height:1.6;
  color:rgba(243,239,228,0.55);
}
.site-footer .footer-links{
  display:flex; gap:56px; flex-wrap:wrap;
}
.site-footer .footer-links h4{
  font-family:'JetBrains Mono',monospace;
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:rgba(243,239,228,0.4);
  margin-bottom:14px;
}
.site-footer .footer-links ul{ list-style:none; }
.site-footer .footer-links li{ margin-bottom:10px; }
.site-footer .footer-links a{
  font-size:14px;
  color:rgba(243,239,228,0.7);
  text-decoration:none;
}
.site-footer .footer-links a:hover{ color:var(--floodlight); }
.site-footer .footer-bottom{
  max-width:1080px; margin:36px auto 0;
  padding-top:24px;
  border-top:1px solid var(--wall-line);
  font-size:12.5px;
  color:rgba(243,239,228,0.4);
  text-align:center;
}

@media (max-width:700px){
  .section{ padding:48px 22px; }
  .page-hero{ padding:56px 22px 44px; }
  .cta-band{ margin:0 20px 48px; padding:36px 24px; }
  .site-footer{ padding:36px 22px 24px; }
}