/* ==================================================================
   AskMAE.ai — Disrupt meeting request form.
   css/disrupt.css   —   THE ONLY STYLESHEET THIS PAGE NEEDS.

   Built by taking style-light.css, nav.css and disrupt.css, keeping
   every rule whose selector actually appears in this page's index
   file, and deleting the rest. Values were not changed, so the page
   renders as it does now. The one intended change is the nav link
   color, marked CHANGED below.

   In the head, replace the three link tags with this one line:
       <link rel="stylesheet" href="css/disrupt.css">
   Keep the Google font link. Keep the script.js tag.

   DELETED, because none of this markup exists on this page:
     hero, hero-two, terminal, os-stack, stack-layer, stack-verticals,
     trust-strip, verticals-grid, v-card, tam-total, accordion and
     acc-*, askmae-accordion-*, team-grid, t-card, cta, contact-grid,
     form-row, contact-info, footer-grid, footer-bottom, to-top,
     data-reveal, eyebrow, section-head, dropdown menu, btn-gold-mae.
   If you ever add any of that here, tell me and I will pull it back in.
   ================================================================== */


/* ==================================================================
   1. TOKENS
   Kept whole. The nav and button rules below read from these, and
   they cost nothing.
   ================================================================== */
:root{
  --mae: #1a0e4b;
  --maeblend: #080718;
  --maelight: #a08fe8;
  --maedark: #0f0a1d;
  --gold-mae: #C9982F;
  --tan: #a0825a;
  --beige: #ccbca6;
  --steel: #dadada;
  --charcoal: #1c1c1c;
  --reiki: #fffdee;
  --sunshine: #fcd581;
  --mae-canvas: #d6d1e6;
  --jesus: #5a3696;
  --lilac: #c7b5ec;
  --turquoise: #00ccff;
  --muted: #c9d0ff;
  --base: #04040d;
  --base-2: #080718;
  --accent: #6041b9;
  --accent-2: #8f7dff;

  --void: #0b062c;
  --purple-deep: #1a0e4b;
  --purple-royal: #5a3696;
  --purple-glow: #a08fe8;
  --lavender-mute: #A493C4;
  --line: rgba(246,242,234,0.10);
  --line-bright: rgba(239,196,99,0.35);

  --font-display: 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'Inter', -apple-system, sans-serif;

  --radius: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ADDED. Used only by the nav rules in section 4, so the pale link
     color and the gold hover are each one line to change. */
  --nav-link: #f6f2ea;
  --nav-link-hover: #efc463;
}


/* ==================================================================
   2. RESET AND PAGE
   ================================================================== */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}

body{
  background:var(--mae-canvas);
  color:var(--charcoal);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}

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


/* ==================================================================
   3. TYPE AND LAYOUT
   ================================================================== */
p,
li,
td{
  color: var(--charcoal) !important;
  font-family: var(--font-body, sans-serif) !important;
  font-size: 20px !important;
  line-height: 1.6 !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

h1{
  color: var(--charcoal) !important;
  font-family: var(--font-body, sans-serif) !important;
  font-size: 48px !important;
  line-height: 1.6 !important;
  overflow-wrap: break-word !important;
  font-weight: 600;
}

h2{
  color: var(--charcoal) !important;
  font-family: var(--font-body, sans-serif) !important;
  font-size: 30px !important;
  line-height: 1.6 !important;
  overflow-wrap: break-word !important;
  font-weight: 600;
  margin-bottom: 18px;
}

h2 em{font-style:italic; color: var(--mae) !important;}

.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

/* This top padding is also what clears the fixed header, since this
   page has no hero block carrying an offset. */
section{padding:110px 0;}
@media (max-width:768px){ section{padding:64px 0;} }

:focus-visible{outline:2px solid var(--mae); outline-offset:3px;}

footer{border-top:0px solid var(--line); padding:30px 0 0px;}


/* ==================================================================
   4. HEADER AND NAVIGATION
   ================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  border-bottom:1px solid var(--line);
  background:var(--void);
  backdrop-filter:blur(14px);
  transition:border-color 0.3s var(--ease);
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; max-width:90%; margin:0 auto;
}

.logo{
  font-family:var(--font-display); font-weight:700; font-size:16px;
  color:var(--nav-link); display:flex; align-items:baseline; gap:6px;
}

.nav-links{display:flex; gap:34px; align-items:center;}

.nav-links a{
  font-family:var(--font-mono); font-size:14px;
  text-transform:uppercase;
  color:var(--nav-link);        /* CHANGED. was var(--jesus), #5a3696, which is
                                   a mid dark purple on the near black bar */
  position:relative; padding-bottom:4px; transition:color 0.25s;
}

.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--nav-link-hover); transition:width 0.3s var(--ease);
}

.nav-links a:hover{color:var(--nav-link-hover);}   /* CHANGED. was var(--ivory),
                                                      which this page never defined */
.nav-links a:hover::after{width:100%;}

.nav-cta{display:flex; align-items:center; color:var(--nav-link); gap:18px;}

.nav-toggle{
  display:none; background:none; border:none;
  color:var(--nav-link); font-size:16px; cursor:pointer;
}

/* Phones. script.js adds .open to .nav-links. */
@media (max-width:920px){
  .nav-links{
    position:fixed; top:64px; left:0; right:0; bottom:0;
    background:var(--void); flex-direction:column; justify-content:flex-start;
    padding:40px 24px; gap:26px; transform:translateX(100%);
    transition:transform 0.4s var(--ease); border-top:1px solid var(--line);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-toggle{display:block;}
  .nav-cta .btn-ghost{display:none;}
}


/* ==================================================================
   5. BUTTONS
   ================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 28px;
  font-family:var(--font-mono);
  font-size:16px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
}

.btn-ghost{ border-color:var(--line-bright); color:var(--charcoal); }
.btn-ghost:hover{ border-color:var(--mae); color:var(--mae); transform:translateY(-2px); }

/* The Investor Access button sits on the dark bar, so it takes the
   pale treatment rather than the charcoal one above. CHANGED. */
.site-header .btn-ghost{ color:var(--nav-link-hover); border-color:var(--line-bright); }
.site-header .btn-ghost:hover{ background:rgba(239,196,99,0.10); border-color:var(--nav-link-hover); color:var(--nav-link-hover); }


/* ==================================================================
   6. THE FORM
   Unchanged from your working disrupt.css. Every rule is scoped to a
   .d- class, so nothing here reaches anything else.
   ================================================================== */

.d-intro { max-width: 640px; margin: 48px 0 32px; }
.d-intro h1 { margin: 8px 0 14px; }
.d-intro p  { max-width: 620px; line-height: 1.65; }

/* ── Form ────────────────────────────────────────────────────── */
.d-form { max-width: 560px; margin: 0 0 64px; }

.d-field { display: block; margin-bottom: 20px; }

.d-field > span {
  display: block;
  margin-bottom: 6px;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.d-field > span b { font-weight: 600; }

.d-field input,
.d-field select,
.d-field textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  border: 1.5px solid rgba(0,0,0,.18);
  border-radius: 4px;
  background: #fff;
  color: inherit;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.d-field select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.d-field textarea { resize: vertical; min-height: 96px; }

.d-field input:focus,
.d-field select:focus,
.d-field textarea:focus {
  outline: 2px solid #a054ff;
  outline-offset: 1px;
  border-color: transparent;
}

/* ── Honeypot: present for bots, gone for people ─────────────── */
.d-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Actions and status ──────────────────────────────────────── */
.d-actions { margin: 28px 0 0; }
.d-actions .btn { min-width: 200px; }
.d-actions .btn[disabled] { opacity: .6; cursor: default; }

.d-status { margin-top: 14px; font-size: .95rem; line-height: 1.5; min-height: 1.4em; }
.d-status.err { color: #96202c; }

.d-fine {
  margin-top: 26px;
  font-size: .84rem;
  line-height: 1.6;
  opacity: .75;
  max-width: 520px;
}

/* ── Thank-you panel ─────────────────────────────────────────── */
.d-sent { max-width: 560px; margin: 40px 0 80px; }
.d-sent h2 { margin: 0 0 12px; }
.d-sent p  { line-height: 1.65; }

/* ── Phones ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .d-intro { margin-top: 32px; }
  .d-actions .btn { width: 100%; }
}