/* ============================================================
   Be The AI Answer — site styles
   Palette: indigo "night sky" + warm paper + violet/amber
   Type: Sora (display) / Inter (body) / IBM Plex Mono (labels)
   ============================================================ */
:root{
  --ink:#14102A; --ink-2:#1E1840; --ink-3:#262056;
  --violet:#6A4FB6; --violet-2:#7C63CE; --violet-soft:#B9A8E8;
  --amber:#F0A23C; --amber-deep:#D9852A; --orange:#FF7A39;
  --paper:#FBFAF7; --paper-2:#F2EFE9;
  --text:#1C1733; --text-soft:#5A5470;
  --on-dark:#EDE9FB; --on-dark-soft:#B3A9D6; --on-dark-bright:#D8CFF2;
  --line:rgba(20,16,42,.12); --line-dark:rgba(237,233,251,.16);
  --font-display:'Archivo',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'Space Mono','SFMono-Regular',monospace;
  --wrap:1140px; --radius:16px; --radius-sm:10px;
  --shadow:0 18px 50px -28px rgba(20,16,42,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--font-body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:24px}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:800; line-height:1.08; letter-spacing:-.02em; margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.2vw,3.5rem); font-weight:900; letter-spacing:-.03em}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
h3{font-size:1.22rem; letter-spacing:-.01em}
p{margin:0 0 1.1em}
a{color:var(--violet); text-decoration:none}
a:hover{text-decoration:underline}
strong{font-weight:700}
img{max-width:100%; display:block}
::selection{background:var(--amber); color:#2A1B05}
:focus-visible{outline:3px solid var(--amber); outline-offset:2px; border-radius:4px}

/* eyebrow / mono label */
.eyebrow{font-family:var(--font-mono); font-size:.74rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--violet); margin:0 0 .9em; font-weight:700}
.on-dark .eyebrow{color:var(--amber)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-display);
  font-weight:700; font-size:.96rem; padding:.74em 1.25em; border-radius:12px;
  border:1px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s; text-decoration:none}
.btn:hover{text-decoration:none; transform:translateY(-2px)}
.btn-amber{background:var(--amber); color:#2A1B05; box-shadow:0 10px 24px -12px rgba(240,162,60,.8)}
.btn-amber:hover{background:#f5ad52}
.btn-violet{background:var(--violet); color:#fff}
.btn-violet:hover{background:var(--violet-2)}
.btn-ghost{background:transparent; color:var(--on-dark); border-color:var(--line-dark)}
.on-light .btn-ghost{color:var(--text); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--violet-soft)}

/* ---------- header ---------- */
header.site{position:sticky; top:0; z-index:50; background:rgba(20,16,42,.86);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line-dark)}
header.site .bar{display:flex; align-items:center; gap:1.4rem; min-height:64px}
.brand{display:flex; align-items:center; gap:.6em; font-family:var(--font-display);
  font-weight:700; color:var(--on-dark); letter-spacing:-.01em; font-size:1.02rem}
.brand:hover{text-decoration:none}
.brand::after{content:"."; color:var(--orange); font-weight:900; margin-left:1px}
.diamond{width:13px; height:13px; background:var(--amber); transform:rotate(45deg);
  border-radius:2px; box-shadow:0 0 14px rgba(240,162,60,.7)}
header.site nav{display:flex; gap:1.15rem; margin-left:auto; flex-wrap:wrap}
header.site nav a{color:var(--on-dark-soft); font-size:.93rem; font-weight:500}
header.site nav a:hover{color:#fff; text-decoration:none}
header.site nav a[aria-current="page"]{color:#fff; text-decoration:underline;
  text-decoration-color:var(--amber); text-decoration-thickness:2px; text-underline-offset:6px}
header.site .btn-amber{padding:.55em 1.05em; font-size:.9rem}
.menu-toggle{display:none; margin-left:auto; background:none; border:1px solid var(--line-dark);
  color:var(--on-dark); border-radius:8px; padding:.4em .6em; font-family:var(--font-mono); cursor:pointer}

/* ---------- hero ---------- */
.hero{padding-block:0; background:
   radial-gradient(900px 500px at 78% -8%, rgba(124,99,206,.40), transparent 60%),
   radial-gradient(700px 500px at 5% 110%, rgba(240,162,60,.14), transparent 55%),
   var(--ink);
  color:var(--on-dark); position:relative; overflow:hidden}
.hero::after{content:""; position:absolute; inset:0; background-image:
  radial-gradient(1.4px 1.4px at 20% 30%, rgba(255,255,255,.55) 50%, transparent),
  radial-gradient(1.4px 1.4px at 67% 18%, rgba(255,255,255,.4) 50%, transparent),
  radial-gradient(1.2px 1.2px at 85% 60%, rgba(255,255,255,.45) 50%, transparent),
  radial-gradient(1.2px 1.2px at 40% 78%, rgba(255,255,255,.35) 50%, transparent),
  radial-gradient(1.6px 1.6px at 12% 70%, rgba(240,162,60,.6) 50%, transparent);
  pointer-events:none; opacity:.8}
.hero .wrap{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr;
  gap:48px; align-items:start; padding-block:clamp(28px,3.5vw,44px)}
.hero h1{color:#fff}
.hero h1 .cite{color:var(--amber)}
.hero .lede{font-size:1.18rem; color:var(--on-dark-soft); max-width:34ch; margin-bottom:1.6em}
.hero .cta-row{display:flex; gap:.8rem; flex-wrap:wrap}
.hero .micro{margin-top:1.5em; font-family:var(--font-mono); font-size:.78rem;
  color:var(--on-dark-soft); letter-spacing:.02em}
.kicker{font-family:var(--font-mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-dark-soft); display:flex; align-items:center; gap:.7em; margin:0 0 1.2em}
.kicker .diamond{width:9px; height:9px; flex:none}

/* answer card signature */
.answer{background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid var(--line-dark); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow); backdrop-filter:blur(4px)}
.answer .prompt{font-family:var(--font-mono); font-size:.82rem; color:var(--on-dark-soft);
  border:1px solid var(--line-dark); border-radius:10px; padding:.7em .9em; margin-bottom:1em;
  display:flex; gap:.6em; align-items:flex-start}
.answer .prompt .car{color:var(--amber)}
.answer .prompt .caret{display:inline-block; width:.55ch; height:1.05em; background:var(--amber);
  margin-left:2px; vertical-align:-2px; animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.answer .prompt .caret{animation:none}}
.answer .ans-label{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--violet-soft); margin-bottom:.7em}
.answer .line{opacity:0; transform:translateY(6px); animation:rise .5s ease forwards;
  margin-bottom:.55em; color:var(--on-dark); font-size:.98rem}
.answer .line:nth-child(3){animation-delay:.15s} .answer .line:nth-child(4){animation-delay:.5s}
.answer .line:nth-child(5){animation-delay:.85s} .answer .line:nth-child(6){animation-delay:1.2s}
.answer .biz{display:flex; align-items:center; gap:.6em; padding:.55em .7em; border-radius:8px; margin-bottom:.4em;
  background:rgba(255,255,255,.04); border:1px solid transparent}
.answer .biz.you{background:rgba(240,162,60,.14); border-color:rgba(240,162,60,.5)}
.answer .biz .dot{width:8px;height:8px;border-radius:50%;background:var(--violet-soft);flex:none}
.answer .biz.you .dot{background:var(--amber)}
.answer .tag{margin-left:auto; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--amber); border:1px solid rgba(240,162,60,.5); border-radius:999px; padding:.15em .6em}
@keyframes rise{to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.answer .line{animation:none; opacity:1; transform:none}}

/* ---------- sections ---------- */
section{padding-block:clamp(52px,7vw,92px)}
.section-head{max-width:60ch; margin-bottom:2.4rem}
.section-head.center{margin-inline:auto; text-align:center}
.lede-2{font-size:1.12rem; color:var(--text-soft)}
.band{background:var(--ink); color:var(--on-dark)}
.band h2{color:#fff} .band .lede-2{color:var(--on-dark-soft)}
.band-soft{background:var(--paper-2)}

/* pillars / cards grid */
.grid{display:grid; gap:20px}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; transition:transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.band .card{background:var(--ink-2); border-color:var(--line-dark); color:var(--on-dark)}
.band .card h3{color:#fff}
.card .num{font-family:var(--font-mono); font-size:.8rem; color:var(--amber); letter-spacing:.12em; display:block; margin-bottom:.7em}
.card p:last-child{margin-bottom:0}
.card .muted{color:var(--text-soft); font-size:.96rem}
.band .card .muted{color:var(--on-dark-soft)}

/* trust strip */
.trust{display:flex; flex-wrap:wrap; gap:.8rem 2rem; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.04em; color:var(--text-soft)}
.trust span{display:inline-flex; align-items:center; gap:.5em}
.trust .d{width:6px;height:6px;background:var(--violet);transform:rotate(45deg);flex:none}

/* TRACE list */
.trace{display:grid; gap:14px; counter-reset:none}
.trace .row{display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px}
.trace .k{font-family:var(--font-display); font-weight:900; font-size:2rem; line-height:1; color:var(--violet);
  width:1.3em; text-align:center; margin-top:-1px}
.trace .row h3{margin-bottom:.25em; font-size:1.05rem}
.trace .row p{margin:0; color:var(--text-soft); font-size:.97rem}

/* prose */
.prose{max-width:72ch}
.prose h2{margin-top:1.8em} .prose h3{margin-top:1.5em}
.prose ul,.prose ol{padding-left:1.2em; margin:0 0 1.2em}
.prose li{margin-bottom:.5em}
.prose .key{background:var(--paper-2); border-left:3px solid var(--amber);
  padding:14px 18px; border-radius:0 10px 10px 0; margin:1.4em 0}
.prose .key p:last-child{margin-bottom:0}
.callout{background:var(--ink); color:var(--on-dark); border-radius:var(--radius);
  padding:28px 26px; margin:2em 0}
.callout h3{color:#fff}
.callout p:last-child{margin-bottom:0}

/* FAQ */
.faq{display:grid; gap:12px; max-width:80ch}
.faq details{background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:2px 20px}
.faq summary{font-family:var(--font-display); font-weight:600; font-size:1.05rem; cursor:pointer;
  padding:18px 0; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--font-mono); color:var(--violet); font-size:1.3rem; flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .a{padding:14px 0 18px; color:var(--text-soft)}
.faq .a p:last-child{margin-bottom:0}

/* email capture */
.capture{background:linear-gradient(160deg,var(--ink),var(--ink-3)); color:var(--on-dark);
  border-radius:20px; padding:clamp(28px,4vw,48px); text-align:center}
.capture h2{color:#fff}
.capture form{display:flex; gap:.6rem; max-width:460px; margin:1.4em auto 0; flex-wrap:wrap}
.capture input[type=email]{flex:1; min-width:220px; padding:.85em 1em; border-radius:999px;
  border:1px solid var(--line-dark); background:rgba(255,255,255,.06); color:#fff; font-size:1rem; font-family:var(--font-body)}
.capture input::placeholder{color:var(--on-dark-soft)}
.capture .fineprint{font-family:var(--font-mono); font-size:.72rem; color:var(--on-dark-bright); margin-top:1em}
.capture > p{color:var(--on-dark-bright)}

/* article list */
.posts{display:grid; gap:18px}
.post-row{display:grid; grid-template-columns:140px 1fr; gap:22px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); padding:22px; transition:transform .15s, box-shadow .15s}
.post-row:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.post-row .meta{font-family:var(--font-mono); font-size:.74rem; color:var(--text-soft); letter-spacing:.04em}
.post-row h3{margin:.2em 0 .35em}
.post-row p{margin:0; color:var(--text-soft); font-size:.97rem}

/* breadcrumb */
.crumb{font-family:var(--font-mono); font-size:.76rem; color:var(--text-soft); padding-top:26px; letter-spacing:.03em}
.crumb a{color:var(--text-soft)} .crumb a:hover{color:var(--violet)}

/* CTA mini */
.cta-band{background:var(--ink); color:var(--on-dark); text-align:center; border-radius:0}
.cta-band h2{color:#fff} .cta-band .cta-row{justify-content:center; display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.4em}

/* footer */
footer.site{background:#0E0B1E; color:var(--on-dark-soft); padding-block:54px 30px; border-top:1px solid var(--line-dark)}
footer.site .cols{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:30px; margin-bottom:36px}
footer.site h4{color:#fff; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; font-family:var(--font-mono); font-weight:700; margin-bottom:1em}
footer.site a{color:var(--on-dark-soft); display:block; margin-bottom:.55em; font-size:.93rem}
footer.site a:hover{color:#fff; text-decoration:none}
footer.site .tagline{color:var(--on-dark); max-width:34ch; font-size:.95rem}
footer.site .legal{border-top:1px solid var(--line-dark); padding-top:22px; display:flex;
  justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.8rem; font-family:var(--font-mono); letter-spacing:.02em}

/* utilities */
.center{text-align:center}
.mt0{margin-top:0}
.lead-answer{background:var(--paper-2); border-left:3px solid var(--violet); padding:16px 20px;
  border-radius:0 10px 10px 0; font-size:1.06rem; margin-bottom:1.6em}
.lead-answer strong{color:var(--text)}

/* responsive */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; gap:34px}
  .grid.cols-4{grid-template-columns:1fr 1fr}
  .grid.cols-3{grid-template-columns:1fr}
  footer.site .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  header.site nav{display:none; position:absolute; top:64px; left:0; right:0; background:var(--ink);
    flex-direction:column; gap:0; padding:8px 24px 18px; border-bottom:1px solid var(--line-dark)}
  header.site nav.open{display:flex}
  header.site nav a{padding:.7em 0; border-bottom:1px solid var(--line-dark)}
  .menu-toggle{display:inline-block}
  header.site .bar .btn-amber{display:none}
  .grid.cols-4,.grid.cols-2{grid-template-columns:1fr}
  .post-row{grid-template-columns:1fr; gap:10px}
  footer.site .cols{grid-template-columns:1fr}
  body{font-size:16px}
}

/* ---- Services / paid offers (added for monetisation) ---- */
.offers-grid{align-items:stretch}
.offer{position:relative;display:flex;flex-direction:column;height:100%}
.offer.is-featured{background:var(--ink);border-color:var(--ink);color:var(--on-dark);
  box-shadow:0 0 0 2px var(--amber), var(--shadow)}
.offer.is-featured h3{color:#fff}
.offer.is-featured .offer-tag,.offer.is-featured .muted,.offer.is-featured .provide li{color:var(--on-dark-soft)}
.offer.is-featured .price{color:var(--amber)}
.offer.is-featured .price small{color:var(--on-dark-soft)}
.offer.is-featured .provide-h{color:var(--violet-soft)}
.offer .badge{position:absolute;top:-12px;left:22px;background:var(--amber);color:#2A1B00;
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.04em;
  padding:.3em .8em;border-radius:999px;text-transform:uppercase}
.offer h3{margin:.2em 0 .15em}
.offer .offer-tag{color:var(--text-soft);font-size:.95rem;margin:0 0 .8em}
.offer .price{font-family:var(--font-mono);font-weight:700;font-size:1.55rem;color:var(--violet);margin:.1em 0 .7em;line-height:1.1;letter-spacing:-.02em}
.offer .price small{display:block;font-family:var(--font-mono);font-size:.72rem;font-weight:400;color:var(--text-soft);letter-spacing:.02em;margin-top:.4em}
.offer .provide-h{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--violet);margin:.4em 0 .4em}
.offer .provide{list-style:none;margin:0 0 1.2em;padding:0;display:grid;gap:.4em}
.offer .provide li{position:relative;padding-left:1.3em;font-size:.92rem;color:var(--text-soft)}
.offer .provide li::before{content:"+";position:absolute;left:0;color:var(--amber-deep);font-weight:700}
.offer .buy{margin-top:auto}
.offer .buy .btn{width:100%;justify-content:center;text-align:center}
.offer.is-soon{opacity:.72}
.btn.is-disabled{pointer-events:none;opacity:.6}

/* ---- Guard: band-soft is always a light section, even if combined with .band ---- */
.band-soft{background:var(--paper-2); color:var(--text)}
.band-soft h2{color:var(--ink)}
.band-soft .lede-2{color:var(--text-soft)}
.band-soft .eyebrow{color:var(--violet)}
.band-soft .card{background:#fff; border-color:var(--line); color:var(--text)}
.band-soft .card h3{color:var(--ink)}
.band-soft .card .muted{color:var(--text-soft)}
/* featured offer stays the deliberate dark panel, with light text restored */
.band-soft .offer.is-featured{background:var(--ink); border-color:var(--ink); color:var(--on-dark)}
.band-soft .offer.is-featured h3{color:#fff}
.band-soft .offer.is-featured .offer-tag,
.band-soft .offer.is-featured .muted,
.band-soft .offer.is-featured .provide li{color:var(--on-dark-soft)}
.band-soft .offer.is-featured .price{color:var(--amber)}
.band-soft .offer.is-featured .price small{color:var(--on-dark-soft)}
.band-soft .offer.is-featured .provide-h{color:var(--violet-soft)}

/* ---- Guard: readable text and buttons on every dark surface ---- */
.band .eyebrow, .cta-band .eyebrow, .capture .eyebrow, .callout .eyebrow{color:var(--amber)}
.on-dark .btn-ghost, .band .btn-ghost, .cta-band .btn-ghost, .capture .btn-ghost, .hero .btn-ghost{
  color:var(--on-dark); border-color:var(--line-dark)}
.on-dark .btn-ghost:hover, .band .btn-ghost:hover, .cta-band .btn-ghost:hover,
.capture .btn-ghost:hover, .hero .btn-ghost:hover{border-color:var(--violet-soft); color:#fff}


/* ---- Home hooks carousel (slim rotating strip) ---- */
.hooks{background:linear-gradient(90deg, var(--violet) 0%, #5a3fa0 45%, var(--ink) 100%);
  border-top:2px solid var(--amber); border-bottom:2px solid var(--amber); overflow:hidden;
  box-shadow:inset 0 0 40px rgba(0,0,0,.25)}
.hooks .wrap{display:flex; align-items:center; gap:1.1rem; min-height:58px; padding-block:13px}
.hooks .hk-label{font-family:var(--font-mono); font-size:.74rem; letter-spacing:.12em; color:#fff;
  text-transform:uppercase; flex:none; display:flex; align-items:center; line-height:1.3; margin:0;
  font-weight:700; text-shadow:0 1px 4px rgba(0,0,0,.4)}
.hooks .hk-items{position:relative; flex:1; min-height:1.4em; display:flex; align-items:center}
.hooks .hk{position:absolute; inset:0; display:flex; align-items:center; gap:.6em; opacity:0; line-height:1.35; margin:0;
  transition:opacity .5s ease; font-size:1.02rem; color:#f3eeff}
.hooks .hk.on{opacity:1}
.hooks .hk b{color:#fff; font-family:var(--font-display); font-weight:800}
.hooks .hk span{color:rgba(255,255,255,.82)}
.hooks .hk span{color:var(--on-dark-soft); font-family:var(--font-mono); font-size:.8rem}
@media (max-width:640px){.hooks .hk span{display:none}}

/* ---- MailerLite embedded form inherits site fonts ---- */
/* ---- Newsletter / toolkit signup form ---- */
.signup-form{max-width:440px;margin:1.4rem auto 0;text-align:left}
.signup-form .row{display:flex;gap:.6rem}
.signup-form .row .field{flex:1}
.signup-form .field{margin-bottom:.6rem}
.signup-form label{display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--on-dark-soft);margin-bottom:.3rem}
.signup-form input{width:100%;padding:.7rem .85rem;border-radius:10px;border:1px solid var(--line-dark);
  background:rgba(255,255,255,.06);color:#fff;font-family:var(--font-body);font-size:.98rem}
.signup-form input::placeholder{color:rgba(237,233,251,.5)}
.signup-form input:focus{outline:none;border-color:var(--amber);background:rgba(255,255,255,.1)}
.signup-form button{width:100%;margin-top:.4rem;cursor:pointer;border:none}
.signup-form .success{display:none;text-align:center;padding:1rem;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid var(--line-dark);border-radius:10px}
.signup-form.sent .form-body{display:none}
.signup-form.sent .success{display:block}
.on-light .signup-form input{background:#fff;border-color:var(--line);color:var(--text)}
.on-light .signup-form label{color:var(--text-soft)}