/* llm.css — "AI Reference" / LLM Info page (pageStyle: llm).
   Self-contained design tokens so it doesn't depend on the service/index token sets. */
:root {
    --navy: #0B1F3A;
    --accent: #2E6BC4;
    --accent-light: #4A8FD8;
    --btn: #2E6BC4;
    --white: #FFFFFF;
    --off-white: #F4F6F9;
    --grey-light: #E8ECF2;
    --grey-dark: #4A5A6B;
    --radius: 6px;
    --font-head: 'Barlow Condensed', sans-serif;
}

body { background: var(--white); }

.llm-hero { background: var(--navy); padding: 120px 24px 64px; position: relative; }
.llm-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.llm-hero-inner { max-width: 900px; margin: 0 auto; }
.llm-badge { display: inline-flex; align-items: center; gap: 9px; background: rgba(46,107,196,0.18); border: 1px solid rgba(74,143,216,0.45); border-radius: 100px; padding: 7px 18px; font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; margin-bottom: 26px; }
.llm-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-light); }
.llm-hero h1 { font-family: var(--font-head); font-size: clamp(36px, 5vw, 58px); font-weight: 800; line-height: 1.04; color: var(--white); letter-spacing: -0.01em; margin-bottom: 20px; }
.llm-hero p { font-size: 18px; line-height: 1.7; color: rgba(255,255,255,0.72); max-width: 760px; }

.llm-body { max-width: 900px; margin: 0 auto; padding: 72px 24px 96px; }
.llm-sec { margin-bottom: 64px; scroll-margin-top: 110px; }
.llm-sec h2 { font-family: var(--font-head); font-size: 30px; font-weight: 800; color: var(--navy); letter-spacing: 0.01em; line-height: 1.1; padding-bottom: 14px; border-bottom: 2px solid var(--grey-light); margin-bottom: 28px; }
.llm-sec h3 { font-family: var(--font-head); font-size: 19px; font-weight: 700; color: var(--btn); margin: 28px 0 10px; }
.llm-sec p { font-size: 16px; line-height: 1.75; color: var(--grey-dark); margin-bottom: 16px; }
.llm-sec a { color: #1e6fc5; }
.llm-sec a:hover { color: #4aa3e8; }

.llm-dl { display: grid; grid-template-columns: 220px 1fr; gap: 0; }
.llm-dl dt { font-family: var(--font-head); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); padding: 13px 0; border-top: 1px solid var(--grey-light); }
.llm-dl dd { margin: 0; font-size: 16px; line-height: 1.6; color: var(--grey-dark); padding: 13px 0; border-top: 1px solid var(--grey-light); }
.llm-dl dt:first-child, .llm-dl dt:first-child + dd { border-top: none; }

.llm-svc { border-left: 3px solid var(--accent); padding: 4px 0 4px 20px; margin-bottom: 26px; }
.llm-svc h3 { margin: 0 0 7px; }
.llm-svc p { margin: 0; font-size: 15px; }

.llm-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.llm-person { border: 1px solid var(--grey-light); border-radius: var(--radius); padding: 22px; }
.llm-person-name { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--navy); }
.llm-person-role { font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--btn); margin: 4px 0 10px; }
.llm-person p { font-size: 14px; margin: 0; line-height: 1.6; }

.llm-facts { list-style: none; padding: 0; margin: 0; }
.llm-facts li { position: relative; padding: 0 0 0 30px; margin-bottom: 14px; font-size: 16px; line-height: 1.7; color: var(--grey-dark); }
.llm-facts li::before { content: ''; position: absolute; left: 0; top: 9px; width: 11px; height: 11px; border-radius: 50%; border: 3px solid var(--accent); }

.llm-instr { border: 1px solid var(--grey-light); border-radius: var(--radius); overflow: hidden; }
.llm-instr-row { display: grid; grid-template-columns: 1fr 1.45fr; gap: 0; border-top: 1px solid var(--grey-light); }
.llm-instr-row:first-child { border-top: none; }
.llm-instr-q { background: var(--off-white); padding: 18px 22px; font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--navy); line-height: 1.4; }
.llm-instr-a { padding: 18px 22px; font-size: 15px; line-height: 1.7; color: var(--grey-dark); }

.llm-callout { background: var(--navy); border-radius: var(--radius); padding: 34px 36px; color: #fff; }
.llm-callout .llm-callout-label { font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-light); margin-bottom: 12px; }
.llm-callout p { color: rgba(255,255,255,0.85); font-size: 17px; line-height: 1.75; margin: 0; }

.llm-quotes { display: grid; gap: 16px; }
.llm-quote { background: var(--off-white); border-radius: var(--radius); padding: 22px 24px; }
.llm-quote p { font-size: 15px; font-style: italic; color: var(--navy); margin: 0 0 10px; line-height: 1.7; }
.llm-quote-who { font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-dark); }
.llm-updated { margin-top: 14px; font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-dark); }