/* AI Forward Advisors - one stylesheet for the marketing pages.
   The only one of the set that is built from soft shapes: a pale orchid ground
   with white cards lifted off it, generous radii, and a display face (Syne) with
   enough character to carry a heading on its own. The motif is the chevron -
   one angle bracket, pointing the way the name does, used as the section marker
   and as the bullet.

   Orchid #731386 clears 8.9:1 on white, so it is safe for small text and for
   the button; the pale ground it sits on is a 95% tint of the same hue rather
   than a grey, which is what keeps the page from reading as neutral with a
   purple button dropped on it. */
:root{
  --field:#F9F4FA; --card:#FFFFFF; --orchid:#731386; --orchid-deep:#5E106E;
  --ink:#1F1424; --copy:#4A3D50; --hush:#7A6C80; --on-orchid:#FFFFFF;
  --edge:#E9DEEC; --edge-firm:#D6C3DB; --lift:0 1px 2px rgba(31,20,36,.05),0 10px 30px rgba(31,20,36,.06);
  --display:"Syne","Segoe UI",system-ui,-apple-system,sans-serif;
  --text:"Spline Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --run:1100px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --field:#17111A; --card:#201826; --orchid:#D79AE6; --orchid-deep:#E7BDF2;
    --ink:#F2EAF5; --copy:#C8BCCE; --hush:#95879B; --on-orchid:#17111A;
    --edge:#2E2434; --edge-firm:#42344A; --lift:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.28);
  }
}
:root[data-theme="dark"]{
  --field:#17111A; --card:#201826; --orchid:#D79AE6; --orchid-deep:#E7BDF2;
  --ink:#F2EAF5; --copy:#C8BCCE; --hush:#95879B; --on-orchid:#17111A;
  --edge:#2E2434; --edge-firm:#42344A; --lift:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--field);color:var(--copy);
  font-family:var(--text);font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);color:var(--ink);margin:0;font-weight:700;
  text-wrap:balance;letter-spacing:-.022em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--orchid);outline-offset:3px;border-radius:6px}

.shell{width:100%;max-width:var(--run);margin:0 auto;padding-inline:30px}

/* ---- the chevron --------------------------------------------------------- */
.chev{display:inline-block;width:9px;height:9px;border-right:2px solid currentColor;
  border-top:2px solid currentColor;transform:rotate(45deg);flex:none}

/* ---- topline (header) ---------------------------------------------------- */
.topline{background:var(--field);border-bottom:1px solid var(--edge)}
.topline .inner{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:20px 0}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.03em}
.logo .chev{color:var(--orchid)}
.links{display:flex;align-items:center;gap:24px;font-size:15px;flex-wrap:wrap}
.links a{text-decoration:none;color:var(--copy)}
.links a:hover{color:var(--orchid)}
.links .cta{background:var(--orchid);color:var(--on-orchid);padding:10px 20px;
  border-radius:999px;font-weight:600}
.links .cta:hover{background:var(--orchid-deep);color:var(--on-orchid)}

/* ---- hero ---------------------------------------------------------------- */
.hero{padding:70px 0 58px}
.hero h1{font-size:clamp(33px,5vw,55px);line-height:1.06;max-width:17ch}
.deck{font-size:clamp(17px,1.5vw,19.5px);line-height:1.6;max-width:57ch;margin:20px 0 0}
.launch{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:32px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--orchid);
  color:var(--on-orchid);text-decoration:none;font-family:var(--display);font-weight:700;
  font-size:16px;padding:14px 28px;border-radius:999px}
.btn:hover{background:var(--orchid-deep);color:var(--on-orchid)}
.quiet{color:var(--hush);font-size:14.5px}

/* ---- blocks -------------------------------------------------------------- */
.block{padding:50px 0}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--orchid);margin:0 0 12px}
.block h2{font-size:clamp(24px,3vw,33px);line-height:1.14;max-width:23ch}
.under{margin:13px 0 0;max-width:62ch}

.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:30px}
.cards article{background:var(--card);border:1px solid var(--edge);border-radius:16px;
  padding:24px 26px 26px;box-shadow:var(--lift)}
.cards h3{font-size:18px;margin-bottom:7px;letter-spacing:-.015em}
.cards p{font-size:16px;line-height:1.6}

.flow{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:14px}
.flow li{background:var(--card);border:1px solid var(--edge);border-radius:16px;
  padding:22px 26px;display:grid;grid-template-columns:auto 1fr;gap:16px;
  box-shadow:var(--lift)}
.flow .mark{display:inline-flex;align-items:center;justify-content:center;width:30px;
  height:30px;border-radius:999px;background:var(--orchid);color:var(--on-orchid);
  font-family:var(--display);font-weight:700;font-size:14px;margin-top:2px}
.flow h3{font-size:18px;margin-bottom:5px}
.flow p{font-size:16px;margin:0}

.plainly{background:var(--card);border:1px solid var(--edge);border-radius:18px;
  padding:28px 30px;margin-top:30px;box-shadow:var(--lift)}
.plainly ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.plainly li{display:flex;gap:13px;font-size:16px;line-height:1.6;align-items:flex-start}
.plainly .chev{color:var(--orchid);margin-top:.5em}

.faq{margin-top:28px;display:grid;gap:10px}
.faq details{background:var(--card);border:1px solid var(--edge);border-radius:14px;
  padding:0 22px}
.faq summary{cursor:pointer;list-style:none;padding:17px 30px 17px 0;position:relative;
  font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:2px;top:24px;width:9px;height:9px;
  border-right:2px solid var(--orchid);border-bottom:2px solid var(--orchid);
  transform:rotate(45deg);transition:transform .18s}
.faq details[open] summary::after{transform:rotate(225deg);top:27px}
.faq .reply{padding:0 0 18px;max-width:70ch;font-size:16px}

.onto{margin-top:22px;font-size:15.5px}
.onto a{color:var(--orchid);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.onto a:hover{color:var(--ink)}

.speak{display:grid;grid-template-columns:1fr 300px;gap:36px;margin-top:28px;align-items:start}
.speak dl{margin:0;background:var(--card);border:1px solid var(--edge);border-radius:16px;
  padding:22px 24px;font-size:16px;box-shadow:var(--lift)}
.speak dt{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orchid);margin-top:16px}
.speak dt:first-child{margin-top:0}
.speak dd{margin:4px 0 0;color:var(--ink)}

/* ---- prose pages --------------------------------------------------------- */
.lead{padding:52px 0 4px}
.lead h1{font-size:clamp(29px,3.9vw,43px);line-height:1.1;max-width:20ch}
.lead .deck{margin-top:16px}
.words{padding:26px 0 70px;max-width:73ch}
.words h2{font-size:22px;margin:38px 0 10px}
.words h3{font-size:17.5px;margin:25px 0 6px}
.words ul,.words ol{margin:0 0 1.05em;padding-left:22px}
.words li{margin-bottom:8px}
.words .asof{font-size:14.5px;color:var(--hush);margin-bottom:28px}
.words .heads-up{background:var(--card);border:1px solid var(--edge);border-radius:14px;
  padding:18px 22px;margin:24px 0;font-size:16px}

/* ---- footer -------------------------------------------------------------- */
footer{border-top:1px solid var(--edge);padding:34px 0 44px;font-size:14.5px;color:var(--hush)}
footer a{color:var(--copy);text-decoration:none}
footer a:hover{color:var(--orchid);text-decoration:underline}
.base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.base nav{display:flex;gap:22px;flex-wrap:wrap}
.legalese{margin:20px 0 0;max-width:92ch;line-height:1.6}

@media (max-width:880px){
  .cards{grid-template-columns:1fr}
  .speak{grid-template-columns:1fr;gap:24px}
  .hero{padding:48px 0 44px}
  .block{padding:40px 0}
}
@media (max-width:560px){
  .shell{padding-inline:20px}
  .topline .inner{flex-wrap:wrap;row-gap:14px}
  .links{width:100%;gap:16px;font-size:14.5px}
  .logo{font-size:17.5px}
  .flow li{grid-template-columns:1fr;gap:10px}
}