/* ═══════════════════════════════════════════════════════════
   GHAI AI — SITE DESIGN CANON v1.0
   One stylesheet. Every page. Change a color here, it changes
   everywhere. Palette taken from the live /assessment page.
   ═══════════════════════════════════════════════════════════ */

:root{
  --navy:#0D1B2A; --navy-2:#12233a; --navy-3:#182c47;
  --gold:#C9A84C; --gold-soft:#dfc27a; --sage:#6E8B74; --ivory:#F6F2E8;
  --ink:rgba(246,242,232,.82); --ink-dim:rgba(246,242,232,.55);
  --line:rgba(201,168,76,.2); --line-soft:rgba(246,242,232,.07);
  --danger:#c96a5a; --ok:#7fae7a;
  --font-display:'Cormorant Garamond',serif;
  --font-body:'Jost',sans-serif;
  --font-mono:'Space Mono',monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--navy);color:var(--ink);font-family:var(--font-body);
  font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased}
.page-section{max-width:100vw !important;width:100vw !important}
a{color:var(--gold);text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 24px}

h1,h2,h3,h4{font-family:var(--font-display);color:var(--ivory);font-weight:600;line-height:1.15}
h2{font-size:clamp(1.9rem,4vw,2.8rem);margin-bottom:16px}
h3{font-size:1.35rem}
h1 em,h2 em,h3 em{color:var(--gold-soft);font-style:italic}
p+p{margin-top:14px}
strong{color:var(--ivory);font-weight:500}

.eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.section{padding:96px 0;position:relative}
.section.alt{background:var(--navy-2)}
.section.tight{padding:64px 0}
.lead{font-size:1.15rem;color:var(--ink);max-width:720px}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn{display:inline-block;padding:15px 34px;border-radius:2px;
  font-family:var(--font-mono);font-size:.85rem;letter-spacing:.08em;transition:all .25s}
.btn-gold{background:var(--gold);color:var(--navy);font-weight:700}
.btn-gold:hover{background:var(--gold-soft)}
.btn-line{border:1px solid rgba(201,168,76,.5);color:var(--gold)}
.btn-line:hover{border-color:var(--gold);background:rgba(201,168,76,.08)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
.btn-row.center{justify-content:center}

/* ── NAV ─────────────────────────────────────────────────── */
nav{position:sticky;top:0;z-index:50;background:rgba(13,27,42,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid rgba(201,168,76,.18)}
.nav-in{max-width:1100px;margin:0 auto;padding:18px 24px;
  display:flex;justify-content:space-between;align-items:center}
.logo{font-family:var(--font-mono);font-weight:700;letter-spacing:.28em;
  color:var(--ivory);font-size:.95rem}
.logo span{color:var(--gold)}
.nav-links{display:flex;gap:26px;align-items:center;font-size:.82rem;letter-spacing:.06em}
.nav-links a{color:var(--ink)}
.nav-links a:hover,.nav-links a.here{color:var(--gold)}
.nav-links a.cta{border:1px solid var(--gold);padding:8px 16px;color:var(--gold)}
@media(max-width:900px){.nav-links{display:none}}

/* ── HERO ────────────────────────────────────────────────── */
.hero{padding:120px 0 90px;text-align:center;
  background:radial-gradient(ellipse at 50% -20%,rgba(201,168,76,.13),transparent 60%)}
.hero h1{font-size:clamp(2.6rem,6vw,4.4rem);max-width:900px;margin:0 auto 22px}
.hero p.lead{margin:0 auto 40px}
.hero .kicker{font-family:var(--font-mono);color:var(--gold);font-size:1rem;
  letter-spacing:.15em;margin-bottom:36px}

/* ── STATS STRIP ─────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:rgba(201,168,76,.18);border:1px solid rgba(201,168,76,.18);
  max-width:1000px;margin:70px auto 0}
.stat{background:var(--navy);padding:28px 14px;text-align:center}
.stat b{display:block;font-family:var(--font-display);font-size:2rem;
  color:var(--gold);font-weight:600}
.stat span{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}

/* ── GRIDS & CARDS ───────────────────────────────────────── */
.grid{display:grid;gap:20px;margin-top:44px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-6{grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:900px){.grid-3,.grid-4,.grid-6{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4,.grid-6{grid-template-columns:1fr}}

.card{background:var(--navy-2);border:1px solid var(--line);padding:30px 26px;
  display:flex;flex-direction:column}
.section.alt .card{background:var(--navy-3)}
.card.topline{border-top:3px solid var(--gold)}
.card.feature{border-color:var(--gold);
  background:linear-gradient(160deg,rgba(201,168,76,.1),var(--navy-2))}
.card h3{margin-bottom:8px}
.card p{font-size:.92rem;color:var(--ink-dim);flex-grow:1}
.card .num{font-family:var(--font-mono);color:var(--gold);font-size:.75rem;
  letter-spacing:.2em;margin-bottom:10px}
.card .price{font-family:var(--font-mono);color:var(--gold);font-size:1.05rem;margin-bottom:14px}
.card .tag{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sage);margin-top:16px}
.card ul{list-style:none;font-size:.9rem;color:var(--ink-dim);margin-top:6px}
.card ul li{padding:6px 0;border-bottom:1px solid var(--line-soft)}
.card ul li:last-child{border:none}
.card .btn{margin-top:18px;text-align:center}

.metric-card{text-align:center;padding:18px 12px}
.metric-card .mk{font-family:var(--font-mono);color:var(--gold);font-size:.8rem;letter-spacing:.12em}
.metric-card .mv{font-family:var(--font-display);font-size:1.8rem;color:var(--ivory)}
.metric-card .ml{font-size:.72rem;color:var(--ink-dim)}

/* ── HIGHLIGHT BLOCKS ────────────────────────────────────── */
.panel{border:1px solid rgba(201,168,76,.4);
  background:linear-gradient(135deg,rgba(201,168,76,.07),transparent);
  padding:44px;text-align:center;max-width:900px;margin:0 auto}
.panel h3{font-size:1.7rem;margin-bottom:12px}
.note{margin-top:40px;border-left:3px solid var(--gold);
  background:rgba(201,168,76,.06);padding:24px 28px;font-size:1rem}
.note b{color:var(--gold-soft)}

/* ── SCORE FLOW ──────────────────────────────────────────── */
.score-flow{display:flex;align-items:center;gap:24px;justify-content:center;
  flex-wrap:wrap;margin:40px 0}
.score-box{text-align:center;padding:26px 38px;border:1px solid var(--line)}
.score-box.before{border-color:rgba(201,106,90,.5);background:rgba(201,106,90,.07)}
.score-box.after{border-color:rgba(127,174,122,.5);background:rgba(127,174,122,.07)}
.score-box b{display:block;font-family:var(--font-display);font-size:2.8rem;color:var(--ivory)}
.score-box span{font-size:.78rem;letter-spacing:.08em;color:var(--ink-dim)}
.arrow{font-size:1.6rem;color:var(--gold)}

/* ── BANDS ───────────────────────────────────────────────── */
.band{border:1px solid var(--line);border-left:3px solid var(--gold);
  background:var(--navy-2);padding:20px 24px;margin-bottom:12px}
.band .bs{font-family:var(--font-mono);color:var(--gold);font-size:.9rem;letter-spacing:.1em}
.band p{font-size:.92rem;color:var(--ink-dim);margin-top:6px}
.band .proto{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;
  color:var(--sage);margin-top:8px;text-transform:uppercase}

/* ── LISTS ───────────────────────────────────────────────── */
.check-list{list-style:none;margin-top:20px}
.check-list li{padding:12px 0 12px 34px;position:relative;border-bottom:1px solid var(--line-soft)}
.check-list li::before{content:"✦";position:absolute;left:0;color:var(--gold)}
.plain-list{list-style:none}
.plain-list li{padding:8px 0;border-bottom:1px solid var(--line-soft);
  font-size:.92rem;color:var(--ink-dim)}

/* ── TWO COLUMN ──────────────────────────────────────────── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
@media(max-width:820px){.two-col{grid-template-columns:1fr;gap:36px}}

/* ── TABLE ───────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;margin-top:30px;font-size:.9rem}
th,td{padding:14px 12px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-soft)}
th{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--line)}
td{color:var(--ink-dim)}
td strong{color:var(--ivory)}

/* ── QUOTE ───────────────────────────────────────────────── */
.quote-block{max-width:820px;margin:0 auto;text-align:center}
.quote-block blockquote{font-family:var(--font-display);
  font-size:clamp(1.5rem,3vw,2.1rem);font-style:italic;color:var(--ivory);line-height:1.4}
.quote-block cite{display:block;margin-top:20px;font-family:var(--font-mono);
  font-style:normal;font-size:.78rem;letter-spacing:.15em;color:var(--ink-dim)}
.pull-quote{border-left:3px solid var(--gold);padding:6px 0 6px 24px;
  font-family:var(--font-display);font-style:italic;font-size:1.15rem;
  color:var(--ink);margin:28px 0}
.pull-quote cite{display:block;margin-top:10px;font-family:var(--font-mono);
  font-style:normal;font-size:.72rem;letter-spacing:.12em;color:var(--ink-dim)}

/* ── FORMS ───────────────────────────────────────────────── */
label{display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);margin:18px 0 6px}
input,select,textarea{width:100%;padding:13px 14px;background:var(--navy);
  border:1px solid var(--line);color:var(--ivory);font-family:var(--font-body);
  font-size:.95rem;border-radius:2px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold)}
textarea{min-height:96px;resize:vertical}
.inline-form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.inline-form input{max-width:320px;flex:1}
.inline-form button{white-space:nowrap;border:none;cursor:pointer}
.form-note{font-size:.8rem;color:var(--ink-dim);margin-top:14px}
.form-error{color:var(--danger);font-size:.85rem;margin-top:10px;min-height:1.2em}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}

/* ── FAQ ─────────────────────────────────────────────────── */
details{background:var(--navy-2);border:1px solid var(--line);
  padding:18px 22px;margin-bottom:12px}
.section.alt details{background:var(--navy-3)}
summary{cursor:pointer;color:var(--ivory);font-weight:400;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"+ ";color:var(--gold);font-family:var(--font-mono)}
details[open] summary::before{content:"− "}
details p{margin-top:12px;font-size:.92rem;color:var(--ink-dim)}

/* ── FINAL CTA + FOOTER ──────────────────────────────────── */
.final-cta{text-align:center;padding:110px 0;
  background:radial-gradient(ellipse at 50% 120%,rgba(201,168,76,.12),transparent 60%)}
footer{border-top:1px solid rgba(201,168,76,.18);padding:56px 0 40px;
  font-size:.82rem;color:var(--ink-dim)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
footer h4{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:14px}
footer ul{list-style:none}
footer li{margin-bottom:9px}
footer li a{color:var(--ink-dim)}
footer li a:hover{color:var(--gold)}
.foot-legal{border-top:1px solid var(--line-soft);margin-top:44px;padding-top:26px;
  text-align:center;line-height:1.9;font-size:.76rem}
.gr{font-family:var(--font-display);font-style:italic;color:var(--gold-soft);
  font-size:1.05rem;margin-top:14px}