/* AI Optimized Group: site layer. Fonts, base, header, footer, and the few
   layouts the design system has no component for. Role tokens only; the
   design system's own component styles are in components.css. */

/* Fonts: Inter, self-hosted (SIL Open Font License, see /assets/fonts/OFL-Inter.txt) */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--type-body-font-size);
  line-height: var(--type-body-line-height);
  background: var(--bg);
  color: var(--text-primary);
}
img { max-width: 100%; height: auto; }
h1, h2, h3 { text-wrap: balance; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
main:focus { outline: none; }
.num { font-variant-numeric: tabular-nums; }

/* Placeholder for a missing input: the yellow "pending" tag (Near Black on Yellow, 10.83:1).
   Every one of these is logged in OPEN-ITEMS.md and comes out before launch. */
.tbd { white-space: normal; vertical-align: middle; }

/* Skip link: first stop for keyboard users, hidden until focused */
.skip-link {
  position: absolute; left: var(--gutter); top: var(--space-2); z-index: 10;
  padding: var(--space-2) var(--space-4);
  background: var(--bg); color: var(--text-primary);
  border: 2px solid var(--border-strong); border-radius: var(--radius-sm);
  font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
  transform: translateY(-300%);
}
.skip-link:focus { transform: none; }

/* Header: the hero's top bar, on Near Black (data-theme="dark") */
.site-header { position: relative; background: var(--surface); color: var(--text-primary); padding-top: var(--space-8); }
.site-header__home { display: inline-block; border-radius: var(--radius-sm); }
.site-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); }
.site-nav a:not(.oag-btn) {
  display: inline-block; padding-block: var(--space-2);
  color: var(--text-primary); font-weight: 600; text-decoration: none;
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.site-nav a:not(.oag-btn):hover,
.site-nav a[aria-current="page"]:not(.oag-btn) { text-decoration-line: underline; }
.site-nav .oag-btn { min-height: 44px; }

/* Hero, page part: continues the header's Near Black ground */
/* Padding, not the component's margin, so the gap below the header can't collapse through
   the section and show the page ground between two Near Black blocks. */
.oag-hero--page { padding-top: var(--space-16); border-top-left-radius: 0; border-top-right-radius: 0; }
.oag-hero--page .oag-hero__body, .oag-hero--page .hero-split { margin-top: 0; }
.oag-hero__meta { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.oag-hero__stat { margin: 0; max-width: var(--measure); font-size: var(--type-subtitle-font-size); line-height: var(--type-subtitle-line-height); font-weight: 600; }
.cite { margin: var(--space-2) 0 0; max-width: var(--measure); font-size: var(--type-note-font-size); line-height: var(--type-note-line-height); color: var(--text-secondary); }
.oag-hero__lead + .oag-hero__lead { margin-top: calc(var(--space-2) * -1); }

/* Booking: the filled button, a placeholder tag while the link is to come,
   the email beside it, and (where the copy puts it) the twenty-five-minutes line */
.booking { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-5) var(--space-8); margin-top: var(--space-2); }
.booking__actions { display: grid; justify-items: start; gap: var(--space-3); }
.booking__email { margin: 0; font-size: 0.95rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.booking__note { margin: 0; flex: 1 1 18rem; max-width: 32rem; color: var(--text-secondary); }
.oag-contact__actions .tbd { margin-top: calc(var(--space-2) * -1); }
.oag-contact__email { overflow-wrap: anywhere; }

/* Home hero, variant B: statistic set beside the headline */
.hero-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: start; margin-top: var(--space-16); }
.hero-split .oag-hero__body { margin-top: 0; }
.hero-stat-panel { margin: 0; padding: var(--space-7); background: var(--bg); border: 1px solid var(--border); border-top: 3px solid var(--accent-text); border-radius: var(--radius-xl); }
.hero-stat-panel__text { margin: 0; font-size: 1.6rem; line-height: 1.3; font-weight: 700; text-wrap: balance; }

/* Section additions */
.oag-section--close { padding-block: var(--space-12); }
.oag-section--close p { margin: 0; max-width: var(--measure); }
.section-link { margin: var(--space-8) 0 0; }
.oag-section__head + .oag-phases { margin-top: 0; }
.oag-phases + .oag-offer { margin-top: var(--space-12); }

/* Label and value rows (dl): who does what, case studies, what to expect.
   Same rhythm as the PriceBlock rows: dt in text-primary, dd in text-secondary, border hairlines. */
.rows { margin: 0; display: grid; max-width: 60rem; }
.rows__row { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--space-2) var(--space-8); padding-block: var(--space-5); border-top: 1px solid var(--border); }
.rows__row dt { font-weight: 700; }
.rows__row dd { margin: 0; color: var(--text-secondary); }
.rows__row dd p { margin: 0; }
.rows__row dd > * + * { margin-top: var(--space-2); }
.oag-card .rows__row { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); padding-block: var(--space-4); }

/* Running text in a section: Home, Most firms don't have an AI team */
.prose { max-width: var(--measure); }
.prose p { margin: 0; color: var(--text-secondary); font-size: var(--type-subtitle-font-size); line-height: var(--type-subtitle-line-height); }
.prose p + p { margin-top: var(--space-4); }

/* Lists with a bold lead-in: what we need from you, how we work */
.points { list-style: none; margin: 0; padding: 0; display: grid; max-width: var(--measure); }
.points li { padding-block: var(--space-5); border-top: 1px solid var(--border); color: var(--text-secondary); }
.points strong { color: var(--text-primary); }

/* Questions partners ask */
.faq { display: grid; max-width: var(--measure); }
.faq__item { padding-block: var(--space-6); border-top: 1px solid var(--border); }
.faq__q { margin: 0; font-size: var(--type-h3-font-size); line-height: var(--type-h3-line-height); font-weight: var(--type-h3-font-weight); }
.faq__item p { margin: var(--space-2) 0 0; color: var(--text-secondary); }

/* Offer list with the per-row label always shown (the Getting started page's phase rows) */
.oag-offer--labelled .oag-offer__get-label {
  position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
  display: block; margin-bottom: 2px;
  font-size: var(--type-eyebrow-font-size); font-weight: 700; letter-spacing: var(--type-eyebrow-letter-spacing);
  text-transform: uppercase; color: var(--accent-text);
}
.oag-offer__row .oag-eyebrow + .oag-offer__title { margin-top: 2px; }
.oag-offer__text + .oag-offer__text { margin-top: var(--space-3); }

/* Work page: one full-width card per client example */
.cases { display: grid; gap: var(--space-6); }
.case__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.oag-card .rows { max-width: none; }

/* Work: the three-part summary at the top of a case (Blue 50 panel: Blue 800 labels 4.65:1, Near Black values 14.95:1) */
.case-summary { margin: var(--space-2) 0 var(--space-3); padding: var(--space-5); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-4) var(--space-6); background: var(--panel-blue); border-radius: var(--radius-lg); }
.case-summary__item { display: grid; gap: var(--space-2); align-content: start; }
.case-summary dt { font-size: 0.8rem; line-height: 1.4; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.case-summary dd { margin: 0; font-weight: 600; color: var(--text-primary); }

/* Home: the single client example, set at reading width rather than as a one-card grid */
.example-card { max-width: var(--measure); }

/* Price block without its button: the terms headline carries the column */
.oag-price--no-figures .oag-price__meta { margin-bottom: 0; }

/* Guide: six numbered questions, each with a "Write down" note.
   The number is generated so the heading reads "1. Where does…", as in the copy. */
.byline { margin: 0; font-weight: 600; }
.oag-hero__stat-inline { color: var(--text-primary); font-weight: 600; }
/* Each question is a card (surface, border, radius-xl, as the Card component); two columns from 900px,
   so the page reads 1-2, 3-4, 5-6. Content runs top down; with prompts of different lengths, the panels no longer line up across a row. */
.guide { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); counter-reset: q; }
.guide__item {
  counter-increment: q; display: flex; flex-direction: column;
  padding: var(--space-7); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
}
.guide__q { margin: 0; font-size: var(--type-h2-font-size); line-height: var(--type-h2-line-height); font-weight: var(--type-h2-font-weight); text-wrap: balance; }
.guide__item .guide__write { margin-top: 0; }
.guide__item p:not(.guide__write) { margin-bottom: var(--space-5); }
@media (min-width: 900px) { .guide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guide__q::before { content: counter(q) ". "; color: var(--accent-large); font-variant-numeric: tabular-nums; }
.guide__item p { margin: var(--space-3) 0 0; color: var(--text-secondary); }
.guide__item .guide__write { padding: var(--space-4) var(--space-5); background: var(--panel); border-left: 3px solid var(--accent-text); border-radius: var(--radius-md); color: var(--text-primary); }
.guide__meta { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
/* A prompt to try: a Blue 50 panel inside the card (text-primary 14.95:1), set in Inter, with a
   quiet "Copy prompt" button. The button ships hidden; /assets/js/copy-prompt.js shows it only
   where the browser can copy. [hidden] needs restating because .oag-btn sets display. */
.guide__item .prompt { margin-top: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--panel-blue); border-radius: var(--radius-md); }
.prompt__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.guide__item .prompt p { margin: 0; color: var(--text-primary); }
.guide__item .prompt .prompt__label { flex: 1 1 14rem; font-weight: 700; }
.guide__item .prompt .prompt__text { margin-top: var(--space-3); overflow-wrap: anywhere; }
.prompt__copy { padding: calc(0.5rem - 2px) calc(1rem - 2px); font-size: 0.95rem; }
.prompt__copy[hidden] { display: none; }
.guide__item p.prompt__after { margin-bottom: 0; }

/* Home: the meta line inside the engagement card, and the guide teaser running into the close */
.card-meta { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.oag-section__head + .section-link { margin-top: 0; }
.oag-section--flush-top { padding-top: 0; }

/* Footer: Near Black (data-theme="dark"), the one dark band besides the hero */
.site-footer { background: var(--surface); color: var(--text-secondary); padding-block: var(--space-12); }
.site-footer__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6) var(--space-12); align-items: start; }
.site-footer__about { margin: 0; max-width: var(--measure); font-size: var(--type-body-sm-font-size); }
.site-footer__about strong { color: var(--text-primary); }
.site-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.site-footer__links a { display: inline-block; padding-block: 2px; color: var(--text-primary); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.site-footer__links a:hover { text-decoration-thickness: 2px; }
.site-footer__email { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .hero-split { grid-template-columns: 1fr; gap: var(--space-8); }
  .rows__row, .oag-card .rows__row { grid-template-columns: 1fr; }
  .site-footer__inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .oag-hero--page { padding-top: var(--space-12); }
  .hero-stat-panel__text { font-size: 1.35rem; }
  .oag-card { padding: var(--space-5); }
  .guide__q { font-size: 1.6rem; }
  .guide__item { padding: var(--space-5); }
}

/* Footer legal line: copyright and disclaimer on the left, privacy policy bottom right */
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-3) var(--space-8); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border); font-size: var(--type-body-sm-font-size); }
.site-footer__legal p { margin: 0; max-width: var(--measure); }
.site-footer__legal a { display: inline-block; padding-block: 2px; margin-left: auto; color: var(--text-primary); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.site-footer__legal a:hover { text-decoration-thickness: 2px; }

/* Privacy policy: long-form text at body size, h2 per section */
.policy { max-width: var(--measure); color: var(--text-secondary); }
.policy p, .policy ul { margin: 0; }
.policy p + p, .policy p + ul, .policy ul + p, .policy h2 + p { margin-top: var(--space-4); }
.policy ul { padding-left: var(--space-6); display: grid; gap: var(--space-2); }
.policy strong { color: var(--text-primary); }
.policy h2 { margin-top: var(--space-12); color: var(--text-primary); font-size: var(--type-h3-font-size); font-weight: var(--type-h3-font-weight); line-height: var(--type-h3-line-height); }