/* Self-hosted fonts */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/inter-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/source-serif-4-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/source-serif-4-latin-700-normal.woff2") format("woff2")}
/* ============================================================
   Keystone Strategy AI — Clinical Trust design system
   Palette: white / mist / deep navy ink / teal accent
   ============================================================ */
:root{
  --ink:#0B2239;            /* deep navy — headings, footer */
  --ink-2:#12314F;
  --body:#33475C;           /* body text */
  --slate:#5E7183;          /* secondary text */
  --slate-lt:#8AA0B4;
  --teal:#0E7C74;           /* primary accent */
  --teal-deep:#0A5F59;
  --teal-tint:#E7F4F2;      /* light teal wash */
  --teal-tint-2:#D2EAE7;
  --mist:#F4F8FA;           /* section alt background */
  --white:#FFFFFF;
  --line:#DEE8EE;
  --amber:#C77D1E;          /* sparing warm accent (numbers, marks) */
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,Menlo,monospace;
  --measure:46rem;
  --r:14px;
  --shadow:0 20px 45px -24px rgba(11,34,57,.22);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--body);background:var(--white);line-height:1.65;font-size:17.5px;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.14;letter-spacing:-.012em;color:var(--ink)}
p{margin:0 0 1.1rem}
a{color:inherit}
strong{font-weight:600;color:var(--ink)}
img{max-width:100%}
.wrap{max-width:74rem;margin:0 auto;padding:0 1.5rem}
.measure{max-width:var(--measure)}
.eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--teal)}
section{padding:5.5rem 0}
@media(max-width:640px){section{padding:3.8rem 0}body{font-size:16.5px}}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.7rem;padding-bottom:.7rem}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--serif);font-weight:600;font-size:1.02rem;text-decoration:none;color:var(--ink);white-space:nowrap}
.brand img{height:34px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:1.4rem;font-size:.95rem}
.nav-links a{text-decoration:none;color:var(--body);font-weight:500}
.nav-links a:hover{color:var(--teal-deep)}
.nav-links a.active{color:var(--teal-deep);font-weight:600}
@media(max-width:840px){.nav-links a:not(.btn){display:none}}
.btn{display:inline-block;background:var(--teal);color:#fff;font-family:var(--sans);font-weight:600;font-size:1rem;text-decoration:none;padding:.85rem 1.45rem;border-radius:10px;border:0;cursor:pointer;transition:background .15s ease,transform .08s ease;line-height:1.2}
.btn:hover{background:var(--teal-deep);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink-2)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.nav .btn{padding:.6rem 1.05rem;font-size:.92rem}
@media(max-width:560px){.nav .btn{display:none}}

/* ---------- hero ---------- */
.hero{padding-top:4.6rem;padding-bottom:4.2rem;background:linear-gradient(180deg,var(--mist) 0%,var(--white) 82%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3.2rem;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:2.2rem}}
.hero h1{font-size:clamp(2.15rem,5vw,3.4rem);margin:.95rem 0 1.3rem;max-width:21ch}
.hero h1 .hl{color:var(--teal-deep)}
.hero .sub{font-size:1.14rem;color:var(--body);max-width:38rem;margin-bottom:1rem}
.hero .sub.lead{color:var(--ink);font-weight:500}
.cta-row{margin-top:1.9rem;display:flex;flex-wrap:wrap;gap:.7rem 1rem;align-items:center}
.cta-note{font-size:.9rem;color:var(--slate);max-width:24rem}

/* ---------- image frames (Nano Banana slots) ---------- */
.frame{position:relative;border-radius:var(--r);overflow:hidden;background:linear-gradient(150deg,var(--teal-tint) 0%,var(--teal-tint-2) 55%,#c3dfdb 100%);box-shadow:var(--shadow);border:1px solid var(--line)}
.frame::before{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:1.4rem;color:var(--teal-deep);font-size:.86rem;font-weight:600;letter-spacing:.04em;opacity:.85}
.frame img{position:relative;z-index:2;display:block;width:100%;height:100%;object-fit:cover}
.frame-hero{aspect-ratio:4/3.4}
.frame-wide{aspect-ratio:16/7;margin-top:2.4rem}
.frame-tall{aspect-ratio:3/4}

/* ---------- stat strip ---------- */
.strip{background:var(--ink);color:#DCE8F2;padding:2.1rem 0}
.strip .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
@media(max-width:760px){.strip .wrap{grid-template-columns:1fr;gap:1.1rem}}
.strip .stat b{display:block;font-family:var(--serif);font-size:1.75rem;color:#fff;line-height:1.15}
.strip .stat b span{color:#6FC7BE}
.strip .stat i{font-style:normal;font-size:.94rem;color:#A9BFD2}
.strip .stat a{color:#A9BFD2}

/* ---------- generic sections ---------- */
.lbl-row{margin-bottom:1.05rem}
h2.big{font-size:clamp(1.7rem,3.9vw,2.5rem);max-width:26ch;margin:.5rem 0 1.5rem}
.body-prose{font-size:1.07rem;color:var(--body)}
.body-prose p{margin-bottom:1.2rem}
.alt{background:var(--mist)}
.pull{border-left:4px solid var(--teal);background:var(--white);border-radius:0 12px 12px 0;padding:1.1rem 1.4rem;margin:1.7rem 0;font-size:1.1rem;color:var(--ink-2);font-family:var(--serif)}
.pull .attr{display:block;margin-top:.55rem;font-family:var(--sans);font-size:.85rem;color:var(--slate)}
.num-list{list-style:none;counter-reset:n;margin:1.4rem 0 0}
.num-list li{counter-increment:n;position:relative;padding:0 0 1.4rem 3.4rem;max-width:var(--measure)}
.num-list li::before{content:counter(n);position:absolute;left:0;top:-.1rem;width:2.4rem;height:2.4rem;border-radius:9px;background:var(--teal-tint);color:var(--teal-deep);font-family:var(--serif);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:1.12rem}
.num-list li strong{display:block;margin-bottom:.2rem;font-size:1.08rem}

/* ---------- system panels ---------- */
.panels{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2rem}
@media(max-width:760px){.panels{grid-template-columns:1fr}}
.panel{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:1.6rem 1.6rem 1.7rem;box-shadow:0 10px 30px -24px rgba(11,34,57,.25)}
.alt .panel{background:var(--white)}
.panel .pn{font-family:var(--serif);font-weight:700;font-size:.92rem;color:var(--teal-deep);letter-spacing:.05em}
.panel h3{font-size:1.28rem;margin:.35rem 0 .65rem}
.panel p{font-size:1.01rem;color:var(--body);margin:0}
.panel .note{display:block;margin-top:.7rem;font-size:.93rem;color:var(--slate);font-style:italic}
.deliverable{margin-top:2rem;background:var(--ink);color:#DCE8F2;border-radius:16px;padding:1.5rem 1.7rem;max-width:var(--measure);font-size:1.05rem}
.deliverable b{color:#fff}
.deliverable a{color:#8FD4CC}

/* ---------- options / choices ---------- */
.options{display:grid;gap:1rem;margin:1.6rem 0 0;max-width:var(--measure)}
.opt{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:1.05rem 1.3rem}
.opt b{color:var(--ink)}
.opt .tick{color:var(--teal-deep);font-weight:700;margin-right:.5rem}

/* ---------- dark math / demo section ---------- */
.darksec{background:var(--ink);color:#D9E5EF}
.darksec .eyebrow{color:#6FC7BE}
.darksec h2{color:#fff}
.darksec .body-prose{color:#B9CBDB}
.darksec .body-prose strong{color:#fff}
.stat-list{display:grid;gap:.9rem;margin:1.6rem 0 1.4rem;max-width:var(--measure)}
.dstat{display:flex;gap:1rem;align-items:flex-start;background:#0A1C30;border:1px solid #1D3A57;border-radius:12px;padding:1.05rem 1.2rem}
.dstat .big{font-family:var(--serif);font-weight:700;color:#6FC7BE;font-size:1.45rem;line-height:1.15;white-space:nowrap;min-width:5.2rem}
.dstat .t{color:#C7D7E5;font-size:1.01rem}
.dstat .t strong{color:#fff}

/* ---------- compliance card ---------- */
.card-callout{max-width:var(--measure);background:var(--white);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:12px;padding:1.6rem 1.8rem}
.card-callout h2{font-size:clamp(1.45rem,3.1vw,1.9rem);margin-bottom:1rem}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:230px 1fr;gap:2.4rem;align-items:start}
@media(max-width:680px){.about-grid{grid-template-columns:1fr;gap:1.4rem}}
.about-grid .portrait{width:100%;max-width:230px;border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow)}

/* ---------- engagement / pricing ---------- */
.terms-card{max-width:44rem;margin:1.4rem auto 0;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:2.2rem 2.1rem;box-shadow:var(--shadow)}
.terms-card .name{font-family:var(--serif);font-size:1.32rem;font-weight:700;color:var(--ink)}
.terms-card ul{list-style:none;margin:1.2rem 0 1.5rem;text-align:left}
.terms-card ul li{position:relative;padding:.42rem 0 .42rem 2rem;color:var(--body);font-size:1.03rem}
.terms-card ul li::before{content:"✓";position:absolute;left:.1rem;color:var(--teal);font-weight:700}
.terms-card .credit{font-size:.96rem;color:var(--slate);margin-top:1.2rem}

/* ---------- faq ---------- */
.faq h2{margin-bottom:1.8rem}
details{border-bottom:1px solid var(--line);padding:1.05rem 0;max-width:54rem}
details summary{font-family:var(--serif);font-weight:600;font-size:1.16rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;color:var(--ink)}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--teal-deep);font-size:1.5rem;line-height:1;font-family:var(--sans);transition:transform .2s;flex-shrink:0}
details[open] summary::after{transform:rotate(45deg)}
details .a{margin-top:.85rem;color:var(--body);font-size:1.03rem}
details .a p:last-child{margin-bottom:0}

/* ---------- final cta ---------- */
.final{background:linear-gradient(160deg,var(--ink) 0%,#0A1C30 100%);color:#fff;text-align:center}
.final h2{color:#fff;font-size:clamp(1.8rem,4.2vw,2.6rem);max-width:22ch;margin:0 auto 1rem}
.final .terms{color:#AFC4D6;font-size:1.08rem;margin-bottom:1.8rem;max-width:38rem;margin-left:auto;margin-right:auto}
.final .micro{margin-top:1.7rem;color:#8FA6BA;font-size:.98rem;max-width:40rem;margin-left:auto;margin-right:auto}
.final .micro a{color:#8FD4CC}

/* ---------- footer ---------- */
footer{background:#081627;color:#8AA0B4;font-size:.94rem;padding:2.6rem 0}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center}
footer .nap b{color:#DCE8F2;font-family:var(--serif)}
footer a{color:#AFC4D6;text-decoration:none}
footer nav{display:flex;gap:1.2rem;flex-wrap:wrap}