/* ===== GLOBAL RESET ===== */
:root{
  --bg:#0a1324;
  --panel:#101c33;
  --text:#f4f4f5;
  --muted:#b4b4b8;
  --line:#232326;
  --gold:#c6a85a;
  --gold2:#d8c07a;
  --ok:#77dd77;
  --bad:#ff6b6b;
}

*, *::before, *::after{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  width:100%;
  min-height:100%;
  background: var(--bg);
  overflow-x:hidden;
}

body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: var(--text);
}

    a{color:var(--muted); text-decoration:none}
    a:hover{color:var(--text)}
    .wrap{max-width:1020px; margin:0 auto; padding:18px 18px 32px}
    .nav{
      display:flex; align-items:center; justify-content:space-between;
      gap:14px; flex-wrap:wrap; margin-bottom:12px;
    }
    .brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:2px;
}
.pill{
  font-size:10px;
  letter-spacing:.35px;
  text-transform: uppercase;

  padding:5px 12px;
  border-radius:999px;

  border:1px solid rgba(198,168,90,.28);
  background: rgba(198,168,90,.06);
  color: rgba(198,168,90,.92);

  opacity:.9;

}
    .mark{
  width:58px;
  height:58px;
  border-radius:18px;
  display:grid;
  place-items:center;
  color:#0b0b0c;
  background: linear-gradient(135deg, #c6a85a, #b99745);
  font-weight: 900;
  letter-spacing: .5px;
}
.logo{
  height: 130px;
  width: auto;
  display: block;
}

@media (max-width: 900px){
  .logo{ height: 140px; }
}

@media (max-width: 520px){
  .logo{ height: 135px; } 
}

@media (max-width: 900px){
  .mark{ width:60px; height:60px; border-radius:18px; }
}

@media (max-width: 520px){
  .mark{ width:70px; height:70px; border-radius:20px; }
}

    .name{font-size:18px; font-weight:800; letter-spacing:.2px}
    .tag{font-size:13px; color:var(--muted); margin-top:2px}
    .links{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
    .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(198,168,90,.65);
  background: rgba(15,27,50,.55);  /* navy glass */
  color: var(--text);
}
.btn:hover{
  background: rgba(15,27,50,.75);
}
.form button,
button[type="submit"]{
  padding:14px 18px;
  border-radius:999px; /* match pill input */
  border:1px solid rgba(198,168,90,.75);
  background: rgba(198,168,90,.18);
  color: rgba(216,192,122,.95);
  cursor:pointer;
  font-weight:650;

  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.form button:hover,
button[type="submit"]:hover{
  background: rgba(198,168,90,.28);
}

.form button:active,
button[type="submit"]:active{
  transform: translateY(1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

.hero{
  padding-top:24px;
  padding-bottom:36px;
}
.hero{
  position: relative;
  padding-top: 12px;
  padding-bottom: 28px;
}

.hero::before{
  content:"";
  position:absolute;
  inset:-60px -20px auto -20px;
  height:220px;
  background: radial-gradient(closest-side, rgba(198,168,90,.10), transparent 70%);
  pointer-events:none;
  filter: blur(6px);
  opacity:.9;
}

.hero .subhead{
  margin: 12px 0 10px;
  max-width: 46ch;
  line-height: 1.45;
}

.hero .lede{
  margin: 0 0 20px;
  max-width: 56ch;
  line-height: 1.55;
}

/* 
.hero::after{
 content:"";
 display:block;
 height:1px;
 margin-top:14px;
 background: linear-gradient(
 90deg,
 transparent,
 rgba(198,168,90,.35),
 transparent
 );
}
*/

.hero h1{
  font-size: clamp(24px, 4vw, 42px);
  line-height: 1.18;
  font-weight: 650;     /* THIS is the difference */
  letter-spacing: -0.15px;
  margin: 0 0 20px;
}
  .lede{
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--muted);
  max-width: 62ch;
  margin: 0 0 14px;
}

@media (max-width: 600px){
  .hero h1{ margin: 0 0 16px; }
  .lede{ margin: 0 0 12px; }
  .form{ margin: 16px 0 6px; }
}

    .form{
      display:flex; gap:10px; flex-wrap:wrap;
      margin:24px 0 8px;
    }
 
input{
  flex:1 1 320px;              /* keeps that long pill feel */
  padding:14px 16px;
  border-radius:999px;          /* true pill */
  border:1px solid rgba(198,168,90,.22);
  background: rgba(255,255,255,.03);
  color: var(--text);
  outline:none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

input::placeholder{
  color: rgba(255,255,255,.55);
}

input:focus{
  border-color: rgba(198,168,90,.55);
  background: rgba(255,255,255,.04);
}
/* first line slightly lighter like your screenshot */
.fine{
  font-size:12px;
  color:var(--muted);
  margin:10px 0 0;
  line-height:1.4;
}
.fine.micro{
  opacity:.7;
  margin-top:12px; /* space under the button/input */
}
.microtrust{
  font-size:12px;
  color: rgba(198,168,90,.75);
  letter-spacing: .2px;
  margin:10px 0 0;
  line-height:1.3;
  flex: 1 1 100%;
}

@media (max-width: 520px){
  .microtrust{
    margin-top:8px;
  }
.hero{
  padding-top: 12px;
  padding-bottom: 28px;
}

.hero h1{
  margin-bottom: 12px;
}
}

    .notice{
      display:none;
      margin-top:10px;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.02);
      color: var(--text);
      font-size: 13px;
    }
    .notice.ok{border-color: rgba(119,221,119,.35)}
    .notice.bad{border-color: rgba(255,107,107,.35)}
    .grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap:22px;
      gap:22px;
      margin-top:22px;
    }
   #use-cases .grid{
    margin-top: 8px;
}
    .card{
  background: rgba(16,28,52,.72); /* slightly richer navy */
  backdrop-filter: blur(8px);     /* reduce blur slightly */
  border: 1px solid rgba(198,168,90,.18); /* slightly stronger than .12 */
  border-radius: 16px;            /* tighten radius */
  padding: 18px 20px;             /* slightly tighter */
  box-shadow:
  0 8px 22px rgba(0,0,0,.28),
  inset 0 1px 0 rgba(255,255,255,.04);
}

/* Doctrine section */
#identity{
  margin-bottom: 48px;
}

.doctrine{
  padding: 28px 32px;
  border: 1px solid rgba(198,168,90,.28);
}

.doctrine h2{
  font-size: 20px;
  margin: 0 0 14px;
}

.doctrine p{
  margin: 0 0 14px;
}

.doctrine ul{
  margin: 14px 0 26px;
}

.doctrine{
  line-height: 1.65;
}

.doctrine ul{
  padding-left: 20px; /* a touch less indentation than default */
}

.doctrine ul li{
  margin: 4px 0; /* better breathing */
}

.doctrine .rules{
  margin-top: 18px;
  font-weight: 600;
}

.doctrine p:nth-of-type(3),
.doctrine p:nth-of-type(4),
.doctrine p:nth-of-type(5){
  font-weight: 600;
}

.doctrine p:nth-of-type(3){
  margin-top: 18px;
}

.card p{
  margin: 0 0 14px;
}

.card p strong{
  font-weight: 600;
}

.card ul{
  margin: 14px 0 26px;
}

.card ul li{
  margin-bottom: 6px;
}

.card h2{
  margin: 0 0 12px;
}

/* Give content under the title the same start position */
.card h2 + p,
.card h2 + ul{
  margin-top: 10px;
}
 
.about-card{
  margin-bottom: 26px;              /* spacing before the two cards */
  padding: 28px 32px;               /* stronger internal spacing */
  border: 1px solid rgba(198,168,90,.28);  /* slightly stronger gold edge */
}
.about-card .muted{
  margin: 0;
  max-width: 62ch;
  line-height: 1.75;
}

    .card h2{
  font-size:15px;
  margin:0 0 12px;
  letter-spacing:.2px;
  color: var(--text);
}
    
    .card ul{ color: rgba(255,255,255,.82); }
.section{
  margin-top:44px;
  padding-top:34px;
  border-top:1px solid rgba(198,168,90,.18);
}
.section:first-of-type{
  border-top: none;
  padding-top: 0;
}
    #about.section{
  margin-top:40px;     /* was 40px */
  padding-top:40px;    /* was 32px */

}

    #use-cases.section{
  margin-top:28px;
  padding-top:40px;
}
.two{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:40px;
  margin-top:20px;
  align-items: stretch; /* ✅ equal height cards */
}

.two > *{
  height:100%; /* ✅ forces each card to fill the row height */
}

@media (max-width: 900px){
  .two{
    grid-template-columns: 1fr;
  }
}

    /* FAQ — Apple/Google-ready, clean accordion */
.faq{
  margin-top: 48px;
}

.faq-item{
  background: rgba(16,28,52,.55);
  border: 1px solid rgba(198,168,90,.28);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
  overflow: hidden;
}

.faq-item[open]{
  margin-bottom: 18px;
}

.faq-item summary{
  cursor: pointer;
  font-weight: 700;
  font-size: 15.5px;
  padding: 4px 0;
  list-style: none;
  user-select: none;
}

.faq-item summary::-webkit-details-marker{
  display: none;
}

/* Chevron */
.faq-item summary::after{
  content: "▸";
  float: right;
  opacity: .85;
  transition: transform .18s ease;
}

.faq-item[open] summary::after{
  transform: rotate(90deg);
}

/* Content spacing + tone */
.faq-content{
  margin-top: 10px;
}

.faq-content p{
  margin: 10px 0 0;
  line-height: 1.6;
  color: var(--muted);
}

/* Inline links inside FAQ */
.inline-link{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .95;
}

.inline-link:hover{
  opacity: 1;
}
    footer{
  margin-top:6px;        /* tighten the gap */
  padding-top:8px;       /* reduce internal space */
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
    .foot-links{display:flex; gap:12px; flex-wrap:wrap}
   
    @media (max-width: 900px){
      .grid{grid-template-columns: 1fr;}
      .two{grid-template-columns: 1fr;}
    }
    .sr-only{
      position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
      clip:rect(0,0,0,0);white-space:nowrap;border:0;
    }

.logo{
  height: 130px;
  width: auto;
  display: block;
}
@media (max-width: 900px){ .logo{ height: 140px; } }
@media (max-width: 520px){ .logo{ height: 150px; } }


.links a{
  opacity: .75;
  transition: opacity .2s ease;
}
.links a:hover{ opacity: 1; 
}

/* Refinements: mobile-first readability + nav clarity + rhythm */

.nav .links a{
  color: rgba(255,255,255,.72);
}

.nav .links a:hover{
  color: rgba(255,255,255,.92);
}

/* Back link styling */
.back{
  display:inline-block;
  margin: 0 0 18px;
  color: var(--gold);
  text-decoration: none;
  font-weight: 500; /* not bold */
  letter-spacing: .2px;
  opacity: .95;
}

.back:hover{
  color: var(--gold2);
  text-decoration: underline;
  text-underline-offset: 4px;
  opacity: 1;
}


.doctrine ul{
  padding-left: 22px;
}
.doctrine ul li{
  margin: 8px 0;
}

@media (max-width: 520px){
  .card p, .card li{
    font-size: 16px;
    line-height: 1.65;
  }

  .nav .links a{
    color: rgba(255,255,255,.62);
  }

  .section{
    padding-top: 34px;
    padding-bottom: 34px;
  }

  #waitlist {
    margin-top: 48px;
  }

  /* Add this */
  .form{
    gap:12px;
  }

  .form button{
    width:100%;
  }
}

/* ============================= */
/* Trust reinforcement (ADD HERE) */
/* ============================= */
/* Trust block */
.trust-lock{
  border-top: 1px solid rgba(198,168,90,.30);
  border-bottom: none;
  padding: 26px 0 18px;  /* was huge */
}

@media (max-width: 520px){
  .trust-lock{
    padding: 20px 0 14px;
  }
}

.trust-text{
  text-align: center;
  opacity: .92;
}

.trust-text p{
  margin: 4px 0;
  font-weight: 700;
  letter-spacing: .2px;
}

.brand-seal{
  margin-top: 10px;          /* was 34px, way too big */
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(198,168,90,1);
}

/* --- Force Back-to-Atlas links to match Privacy (override all global link rules) --- */
a.back,
a.back-link,
.legal a.back,
.wrap a.back{
  color: var(--gold) !important;
  font-weight: 500 !important;           /* prevents bold */
  text-decoration: none !important;
  letter-spacing: .2px;
  opacity: .95;
  display: inline-block;
}

a.back:hover,
a.back-link:hover,
.legal a.back:hover,
.wrap a.back:hover{
  color: var(--gold2) !important;
  text-decoration: underline !important;  /* guarantees underline */
  text-underline-offset: 4px;
  opacity: 1;
}
/* ============================= */
/* Legal "Back to Atlas" (match Terms) */
/* ============================= */

a.back{
  display:inline-block;
  margin-bottom:22px;
  color: var(--gold);
  font-size:13px;
  letter-spacing:.2px;
  text-decoration:none;
}

a.back:hover{
  color: var(--gold);
  opacity:.85;
  text-decoration:none;
}

/* Kill any global link hover rules that try to turn it white */
a.back:visited,
a.back:active{
  color: var(--gold);
}

/* ============================= */
/* LEGAL PAGES (Privacy/Terms/Guidelines) */
/* ============================= */

.legal{
  max-width: 820px;
  margin: 0 auto;
  padding: 60px 20px 70px;
  line-height: 1.7;
}

/* If your .wrap already sets width/padding, this keeps it consistent */
.wrap.legal{
  max-width: 820px;
}

/* Back link: match Privacy behaviour */
a.back, a.back-link{
  display:inline-block;
  margin: 0 0 22px;
  color: var(--gold);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: .2px;
  opacity: .95;
}

a.back:hover, a.back-link:hover{
  color: var(--gold2);
  text-decoration: underline;
  text-underline-offset: 4px;
  opacity: 1;
}


.legal h1{
  font-size: 40px;
  margin: 0 0 10px;
}

.legal .muted{ color: var(--muted); }

.legal h2{
  margin: 0 0 10px;
  color: var(--gold);
  font-size: 18px;
}

/* Footer matches Privacy and includes Community Guidelines */
.legal-footer{
  margin-top: 80px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14px;
  color: var(--muted);
}

.legal-footer a{
  color: var(--gold);
  text-decoration: none;
  font-weight: 500;
}

.legal-footer a:hover{
  color: var(--gold2);
  text-decoration: underline;
  text-underline-offset: 4px;
  opacity: 1;
}
/* Ensure legal pages use global card style */
.legal .card{
  background: rgba(16,28,52,.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(198,168,90,.18);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
}
/* --- Legal pages: consistent pill spacing --- */
.legal .card{
  margin: 18px 0 0;          /* space ABOVE each pill */
}

.legal .card:first-of-type{
  margin-top: 24px;          /* a touch more after the header */
}

/* Optional: make inner text breathe the same across pills */
.legal .card p{ margin: 0 0 12px; }
.legal .card p:last-child{ margin-bottom: 0; }

.legal .card ul{ margin: 0; padding-left: 18px; }
.legal .card li{ margin: 6px 0; }

/* Legal pages – pill spacing */
.legal .card{
  margin: 28px 0;   /* vertical spacing between pills */
}

/* Remove any extra section padding that might double space */
.legal .section{
  padding: 0;
}
/* FORCE correct pill stacking on legal pages */
.legal .section{
  padding: 0 !important;
}

.legal .card{
  display: block;
  margin-bottom: 32px !important;
}

.legal .card:last-child{
  margin-bottom: 0 !important;
}
/* =========================
   SUBMITTED (simple layout)
   ========================= */
.submitted{
  min-height:100vh;
  background: linear-gradient(180deg,#071223 0%, #0a1324 55%, #060e1a 100%);
  display:flex;
  align-items:center;
  justify-content:center;
}

.submitted-inner{
  width:100%;
  max-width: 980px;
  padding: 0 28px;
}

.submitted-h1{
  font-size: clamp(28px, 5.5vw, 56px); /* MATCH hero h1 */
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.4px;
  margin: 0 0 20px;
  color: var(--text);
}

.submitted-p1{
  font-size: 22px;
  margin: 0 0 10px;
  color: var(--text);
}

.submitted-p2{
  font-size: 22px;
  margin: 0 0 34px;
  color: rgba(255,255,255,.75);
}

.submitted-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 16px 34px;
  border-radius: 999px;
  border: 1px solid rgba(198,168,90,.7);
  background: rgba(198,168,90,.10);
  color: rgba(198,168,90,.95);
  text-decoration:none;
  font-weight: 650;
}

.submitted-btn:hover{
  background: rgba(198,168,90,.18);
  color: rgba(216,192,122,.95);
}
/* Hero category statement */
.category {
  font-size: 1.15rem;
  font-weight: 500;
  margin-top: 12px;
  margin-bottom: 10px;
  color: #c9a96e;
}
.identity-line{
  text-align:center;
  margin: 18px auto 22px;   /* pulls it tighter to FAQ */
  max-width: 36ch;
  padding: 0 12px;
  font-size: 20px;
  font-weight: 650;
  color: rgba(198,168,90,.92);
}

   @media (min-width: 900px){
   .identity-line{
    margin: 24px auto 28px;
    font-size: 18px;
  }
}
/* =========================
   FINAL SPACING OVERRIDES
   Paste at END of styles.css
   ========================= */

/* tighten overall section rhythm */
.section{
  margin-top: 28px !important;
  padding-top: 26px !important;
}

/* tighten hero + form area slightly */
.hero{
  padding-top: 10px !important;
  padding-bottom: 18px !important;
}
.form{
  margin: 18px 0 8px !important;
}

/* tighten grids (cards) */
.grid{
  margin-top: 16px !important;
  gap: 16px !important;
}
.two{
  gap: 18px !important;
  margin-top: 14px !important;
}

/* fix “Identity scales…” so it doesn’t float */
.identity-line{
  margin: 14px auto 16px !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
}

/* tighten FAQ spacing */
.faq{
  margin-top: 28px !important;
}
.faq-item{
  margin-bottom: 10px !important;
}

/* tighten trust block + remove extra air above footer */
.trust-lock{
  padding: 18px 0 10px !important;
}
.brand-seal{
  margin-top: 8px !important;
}

/* tighten footer spacing */
footer{
  margin-top: 0 !important;
  padding-top: 10px !important;
  gap: 10px !important;
}

/* mobile tighten */
@media (max-width: 520px){
  .wrap{ padding: 16px 16px 22px !important; }

  .section{
    margin-top: 22px !important;
    padding-top: 22px !important;
  }

  .hero{
    padding-bottom: 14px !important;
  }

  .grid{ gap: 14px !important; }
  .identity-line{ margin: 12px auto 14px !important; }

  .trust-lock{ padding: 16px 0 8px !important; }
  footer{ padding-top: 8px !important; }
}