/* Shared page styling for the three commercial pages:
   /ai-workshops-for-libraries-and-community-groups/, /ai-consulting/ and
   /ai-readiness-assessment/. The site chrome (header, footer, audience
   directory) is injected separately by tools/build-chrome.mjs. */

:root{--navy:#1B3A5B;--navyd:#12283F;--cream:#F4F8FC;--ink:#1F2A36;--grey:#5A6B7B;--accent:#8F5E17;--gold:#C8862B}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased}

main{max-width:1100px;margin:0 auto;padding:56px 24px 24px}
section{max-width:1100px;margin:0 auto;padding:0 0 8px}
.narrow{max-width:66ch}

h1{font-family:Georgia,serif;color:var(--navy);font-size:clamp(30px,4.4vw,44px);margin-bottom:18px;letter-spacing:-0.01em;line-height:1.15}
h2{font-family:Georgia,serif;color:var(--navy);font-size:clamp(22px,2.6vw,29px);margin:52px 0 14px;letter-spacing:-0.005em}
h3{font-family:Georgia,serif;color:var(--navy);font-size:20px;margin-bottom:6px}
p{margin-bottom:14px;max-width:66ch}
a{color:var(--accent)}

/* The direct answer: the first thing a reader and an answer engine both take
   from the page, so it is plain and factual on purpose. */
.answer{font-size:clamp(18px,1.7vw,20px);line-height:1.6;color:var(--ink);max-width:62ch;
  border-left:4px solid var(--gold);padding-left:20px;margin:0 0 30px}
.answer b{color:var(--navy)}

.eyebrow{font-family:system-ui,sans-serif;font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:12px}

ul.ticks{list-style:none;margin:0 0 18px;padding:0;max-width:66ch}
ul.ticks li{position:relative;padding-left:30px;margin-bottom:11px}
ul.ticks li::before{content:"";position:absolute;left:6px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--gold)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px;margin-top:26px}
.card{background:#fff;border:1px solid #d7e3ee;border-radius:12px;padding:24px 22px;
  box-shadow:0 1px 2px rgba(18,40,63,.04),0 6px 20px rgba(18,40,63,.05)}
.card p{font-size:16px;color:#2c3a47;margin-bottom:0}
.card h3{margin-bottom:8px}

.steps{counter-reset:s;list-style:none;margin:26px 0 0;padding:0;max-width:70ch}
.steps li{counter-increment:s;position:relative;padding-left:52px;margin-bottom:22px}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;font-family:Georgia,serif;
  font-size:27px;font-weight:700;color:var(--gold);line-height:1.2}
.steps b{display:block;color:var(--navy);font-family:Georgia,serif;font-size:19px;margin-bottom:2px}

.faq{max-width:70ch;margin-top:22px;border-top:1px solid #d7e3ee}
.faq details{border-bottom:1px solid #d7e3ee}
.faq summary{cursor:pointer;padding:17px 0;font-weight:600;color:var(--navy);font-size:17.5px;
  list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-family:Georgia,serif;font-size:23px;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"\2013"}
.faq .a{padding:0 0 20px;color:#2c3a47;max-width:64ch}
.faq .a p{margin-bottom:10px}
.faq .a p:last-child{margin-bottom:0}

.cta{background:#12283F;color:#fff;border-radius:14px;padding:38px 34px;margin:56px 0 8px;max-width:1100px}
.cta h2{color:#fff;margin:0 0 10px}
.cta p{color:#cfe0f0;max-width:58ch}
.cta .btn{margin-top:12px}
.btn{display:inline-block;background:var(--gold);color:#12283F;font-weight:700;font-size:17px;
  padding:14px 30px;border:0;border-radius:10px;cursor:pointer;text-decoration:none;letter-spacing:.2px;
  box-shadow:0 1px 2px rgba(200,134,43,.28),0 6px 16px rgba(200,134,43,.22);
  transition:transform .16s cubic-bezier(0.23,1,0.32,1)}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .btn:hover{transform:translateY(-1px)} }
@media (prefers-reduced-motion:reduce){ .btn{transition:none} }

.fine{font-size:15px;color:var(--grey);max-width:64ch}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:3px}

/* Marks a claim that still needs Naomi's confirmation. Visible on purpose:
   it must be impossible to publish one of these by accident. */
[data-confirm]{background:#FFF4DC;box-shadow:0 0 0 2px #E8B54B;border-radius:3px}