/* "See what AI can do" detail pages: one per service, workflow and package (13 Oct 2026, packages
   added 19 Oct 2026). Built from the design.md tokens only. Service pages use the hand-off flow
   from design.md section 9: Steel for what comes in, Consulting Blue for what AI does, a Charcoal
   outline for the person who signs it off. The index page is the AI Systems Finder, styled in
   assets/finder/finder.css, controls.css and results.css.
   Text sizes for intro, body and small print live in the site-wide text scale at the end of
   assets/bl-visual.css. */

.lib-page { background: #FAFAF8; color: #232A31; }
.lib-page main *, .lib-page main *::before, .lib-page main *::after { box-sizing: border-box; }
.lib-wrap { max-width: 1200px; margin: 0 auto; padding-inline: 24px; }
@media (max-width: 600px) { .lib-wrap { padding-inline: 16px; } }

.lib-h1 { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: clamp(30px, 2.2vw + 8px, 40px); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 16px; text-wrap: balance; color: #232A31; }
.lib-h2 { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: clamp(26px, 1.5vw + 12px, 34px); line-height: 1.18; letter-spacing: -0.01em; margin: 0 0 12px; text-wrap: balance; color: #232A31; }
.lib-h3 { font-family: "Source Sans 3", system-ui, sans-serif; font-weight: 600; font-size: 20px; margin: 40px 0 8px; color: #232A31; }
.lib-intro { margin: 0 0 24px; max-width: 62ch; }
.lib-small { margin: 0 0 16px; max-width: 70ch; }

.lib-preview-bar { margin: 72px 0 0; padding: 10px 16px; text-align: center; font: 600 15px "Source Sans 3", system-ui, sans-serif; background: #232A31; color: #FAFAF8; }

/* Hero */
.lib-hero { position: relative; padding-block: 56px 24px; overflow: hidden; }
.lib-hero::before { content: ''; position: absolute; right: -160px; top: -120px; width: 620px; height: 620px; border-radius: 50%; background: rgba(175, 196, 221, 0.28); pointer-events: none; }
.lib-hero__inner { position: relative; }
.lib-hero__inner--single { max-width: 820px; margin-inline: 0; }
@media (max-width: 900px) {
  .lib-hero { padding-block: 32px 16px; }
  .lib-hero::before { width: 420px; height: 420px; right: -200px; top: -160px; }
}

/* Cards */
.lib-grid { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1024px) { .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lib-grid { grid-template-columns: minmax(0, 1fr); } }
.lib-card { min-width: 0; }
.lib-card__link { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 24px; color: inherit; text-decoration: none; }
.lib-card__link:focus-visible { outline: 2px solid #1B3A5B; outline-offset: -2px; border-radius: 18px; }
.lib-card__title { margin: 0; font: 600 20px/1.25 "Fraunces", Georgia, serif; color: #232A31; text-wrap: balance; }
.lib-card .lib-card__problem { margin: 0; }
.lib-card .lib-card__meta { margin: auto 0 0; padding-top: 6px; }
.lib-card .lib-card__for { margin: 0; }
@media (hover: hover) and (pointer: fine) {
  .lib-card.bl-lift:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -28px rgba(27, 58, 91, 0.5); }
  .lib-card.bl-lift:hover::before { transform: scaleX(1); }
}
.lib-card[hidden] { display: none !important; }

/* Closing call to action */
.lib-cta { padding-block: 16px 88px; }
.lib-cta__inner { display: grid; justify-items: start; }
.lib-cta__inner > * { max-width: 760px; }
.lib-cta .lib-h2 { margin-bottom: 8px; }

/* Detail page */
.lib-detail-hero { position: relative; padding-block: 32px 64px; overflow: hidden; }
.lib-detail-hero::before { content: ''; position: absolute; right: -200px; top: -180px; width: 560px; height: 560px; border-radius: 50%; background: rgba(175, 196, 221, 0.28); pointer-events: none; }
.lib-back { position: relative; margin: 0 0 12px; font: 600 15px "Source Sans 3", system-ui, sans-serif; }
/* Links on these pages are 44px tap targets on a phone (review, 19 Oct 2026). */
.lib-back a, .lib-parts__part a { display: inline-flex; align-items: center; min-height: 44px; }
.lib-back a { color: #1B3A5B; text-decoration: underline; text-decoration-color: #AFC4DD; text-underline-offset: 4px; }
.lib-back a::before { content: '\2190\00a0'; }
.lib-detail-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 56px; align-items: center; }
.lib-detail-hero__text { min-width: 0; }
.lib-problem { margin: 0; padding: 28px 32px 32px; border-radius: 22px; background: #232A31; color: #FAFAF8; }
.lib-problem__label { margin: 0 0 10px; font: 600 14px "Source Sans 3", system-ui, sans-serif; color: #AFC4DD; }
.lib-problem__text { margin: 0; font: 500 24px/1.35 "Fraunces", Georgia, serif; color: #FAFAF8; }
@media (max-width: 900px) { .lib-detail-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; } }

.lib-how { padding-block: 56px; }
.lib-flow { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.lib-flow__step { position: relative; min-width: 0; padding: 22px; border-radius: 18px; background: #FAFAF8; }
.lib-flow__step h3 { margin: 0 0 10px; font: 600 18px "Source Sans 3", system-ui, sans-serif; color: #232A31; }
.lib-flow__step ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.lib-flow__step p { margin: 0; }
.lib-flow__step + .lib-flow__step::before { content: ''; position: absolute; left: -24px; top: 50%; width: 20px; height: 1.5px; background: #586069; }
.lib-flow__step + .lib-flow__step::after { content: ''; position: absolute; left: -10px; top: calc(50% - 4.25px); border: 5px solid transparent; border-left: 6px solid #586069; border-right: 0; }
.lib-flow__step--in, .lib-flow__step--out { border: 1.5px solid #586069; }
.lib-flow__step--ai { background: #1B3A5B; border: 1.5px solid #1B3A5B; }
html body main .lib-flow__step--ai h3, html body main .lib-flow__step--ai p { color: #FAFAF8 !important; }
.lib-flow__step--you { border: 2px solid #232A31; }
@media (max-width: 1024px) {
  .lib-flow { grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 640px; }
  .lib-flow__step + .lib-flow__step::before { left: 32px; top: -24px; width: 1.5px; height: 24px; }
  .lib-flow__step + .lib-flow__step::after { left: 28px; top: -9px; border: 5px solid transparent; border-top: 6px solid #586069; border-bottom: 0; }
}

.lib-steps { list-style: none; counter-reset: lib-step; margin: 24px 0; padding: 0; display: grid; gap: 14px; max-width: 820px; }
.lib-steps__step { position: relative; padding: 18px 20px 18px 64px; border-radius: 16px; border: 1px solid rgba(35, 42, 49, 0.12); background: #FAFAF8; }
.lib-steps__step::before { counter-increment: lib-step; content: counter(lib-step); position: absolute; left: 18px; top: 18px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #1B3A5B; color: #FAFAF8; font: 500 14px "IBM Plex Mono", ui-monospace, monospace; }
.lib-steps__title { margin: 0 0 6px; font: 600 18px/1.35 "Source Sans 3", system-ui, sans-serif; }
.lib-steps__title a { color: #1B3A5B; text-decoration: underline; text-decoration-color: #AFC4DD; text-underline-offset: 4px; }
.lib-steps__info, .lib-steps__human { margin: 0 0 4px; }
.lib-steps__human { color: #586069; }
.lib-more-line { max-width: 820px; margin: -8px 0 20px; color: #586069; }
.lib-steps__end { max-width: 820px; margin: 0 0 10px; font: 400 17px/1.55 "Source Sans 3", system-ui, sans-serif; color: #232A31; }

/* Package pages: the public parts, workflows tagged as whole processes. */
.lib-parts { list-style: none; margin: 24px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 980px; }
.lib-parts__part { display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; gap: 6px 12px; min-height: 60px; padding: 8px 18px; border-radius: 16px; background: #FAFAF8; border: 1px solid rgba(35, 42, 49, 0.12); font: 600 17px/1.4 "Source Sans 3", system-ui, sans-serif; }
.lib-parts__part a { color: #1B3A5B; text-decoration: underline; text-decoration-color: #AFC4DD; text-underline-offset: 4px; }
.lib-parts__part[data-kind="workflow"] { border: 1.5px solid #1B3A5B; }
.lib-parts__tag { padding: 1px 8px; border-radius: 6px; background: rgba(175, 196, 221, 0.45); color: #1B3A5B; font: 600 14px "Source Sans 3", system-ui, sans-serif; }
@media (max-width: 800px) { .lib-parts { grid-template-columns: minmax(0, 1fr); } }

/* Preview only: the wording has not been approved yet. */
.lib-draft { display: inline-block; margin: 0 0 12px; padding: 2px 10px; border: 1px dashed #1B3A5B; border-radius: 6px; color: #1B3A5B; font: 600 14px "Source Sans 3", system-ui, sans-serif; }

.lib-fit { padding-block: 24px 56px; }
.lib-fit__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 48px; padding: 36px; border-radius: 28px; background: rgba(175, 196, 221, 0.18); }
.lib-fit .lib-h2 { font-size: clamp(22px, 1vw + 14px, 28px); }
.lib-list { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 6px; }
@media (max-width: 800px) { .lib-fit__inner { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; } }

.lib-related { padding-block: 24px 56px; }

@media (prefers-reduced-motion: reduce) {
  .lib-card.bl-lift { transition: none; }
}