/* AgenticObjects — site stylesheet
   Direction B "Standard". One typeface for everything; JetBrains Mono only
   where the product itself uses monospace: identifiers, addresses, times, costs.
   Palette taken verbatim from resources/logo/agenticobjects-mark.svg. */

:root {
  --navy-900: #0F1B34;
  --navy-700: #1B2A4A;
  --navy-400: #8C97AC;
  --teal-500: #00A896;   /* graphic only on light — 3.0:1 vs white, never text */
  --teal-700: #006F63;   /* the text-safe teal on white — 6.1:1 */
  --teal-300: #00D3B8;   /* 9.0:1 on navy — may carry text on dark */
  --orange-500: #FA6423; /* the model stage. navy on it = 5.6:1; white = 3.0:1 */
  --orange-700: #A83A0C;

  --paper: #FFFFFF;
  --paper-alt: #F4F6FA;
  --rule: #DFE4EE;
  --ink: #0F1B34;
  --ink-mid: #46516E;
  --ink-muted: #5F6B85;

  --hold: #A1620B;
  --reject: #B3372C;

  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
[hidden] { display: none !important; }
img { height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :where(a, button, input, select, textarea, summary):focus-visible { outline-color: var(--teal-300); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--navy-900); color: #fff; padding: 12px 18px; }
.skip:focus { left: 12px; top: 12px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap { max-width: 1220px; margin: 0 auto; padding: 0 32px; }
.narrow { max-width: 800px; }

/* ---------------- Bands ---------------- */
.band { padding: 76px 0; }
.band--alt { background: var(--paper-alt); }
.band--navy { background: var(--navy-900); color: #fff; }
.band--navy p, .band--navy .lede { color: #C7D0E0; }
.band--tight { padding: 52px 0; }
.band__head { margin-bottom: 40px; max-width: 72ch; }

h1 { font-size: clamp(32px, 4vw, 44px); line-height: 1.14; letter-spacing: -.021em; margin-bottom: 20px; }
h2 { font-size: clamp(24px, 2.6vw, 31px); line-height: 1.22; letter-spacing: -.015em; margin-bottom: 14px; }
h3 { font-size: 18px; letter-spacing: -.005em; margin-bottom: 7px; }
.lede { font-size: 18px; line-height: 1.6; color: var(--ink-mid); max-width: 68ch; }
p + p { margin-top: 15px; }

.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--teal-700); margin-bottom: 11px; }
.band--navy .eyebrow { color: var(--teal-300); }

/* A section eyebrow is the page's chapter mark, so it carries a short rule
   above it and sits a size larger than the body it introduces. The rule is
   only as wide as the label because it marks a start, not a divider - the same
   2px-rule-above-a-label idiom the numbered notes already use. Scoped to
   .band__head: the hero's opening line is a sentence, not a label. */
.band__head .eyebrow { display: inline-block; font-size: 15px; letter-spacing: .01em;
  padding-top: 15px; margin-bottom: 15px; border-top: 2px solid var(--teal-500); }
.band--navy .band__head .eyebrow { border-top-color: var(--teal-300); }

/* A section head is usually the first thing in its band, so the band's own
   padding gives the eyebrow's rule room. Where one follows content instead -
   the overview figure on product.html - the rule would otherwise sit flush
   against whatever is above it. */
.band__head:not(:first-child) { margin-top: 54px; }

.meta { font-family: var(--mono); font-size: 12.5px; line-height: 1.65; letter-spacing: .01em; color: var(--ink-muted); }
.on-dark .meta, .band--navy .meta { color: var(--navy-400); }

/* ---------------- Chrome ---------------- */
.util { background: var(--navy-900); color: #C7D0E0; font-size: 13px; }
.util__in { display: flex; align-items: center; gap: 22px; padding-top: 8px; padding-bottom: 8px; }
.util a { color: #C7D0E0; text-decoration: none; }
.util a:hover { color: #fff; text-decoration: underline; }
.util .sp { margin-left: auto; }

/* Language switcher. Every entry keeps the current page's slug, so switching
   language does not throw the reader back to a home page. */
.langbar { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
.langbar a, .langbar span { padding: 3px 8px; border-radius: 3px; font-family: var(--mono);
  font-size: 12px; letter-spacing: .06em; line-height: 1.4; }
.langbar a { color: #8C97AC; text-decoration: none; }
.langbar a:hover { color: #fff; background: rgba(255,255,255,.10); text-decoration: none; }
.langbar span[aria-current] { color: #fff; background: rgba(255,255,255,.14); }
.langbar a:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
@media (max-width: 560px) { .util__in { gap: 14px; } .langbar a, .langbar span { padding: 3px 5px; } }

.hd { border-bottom: 1px solid var(--rule); background: #fff; position: sticky; top: 0; z-index: 30; }
.hd__in { display: flex; align-items: center; gap: 34px; padding-top: 15px; padding-bottom: 15px; }
.hd__logo svg { display: block; height: 36px; width: auto; }
.hd nav { display: flex; gap: 27px; font-size: 15px; font-weight: 500; }
.hd nav a { text-decoration: none; color: var(--navy-900); padding: 20px 0; border-bottom: 3px solid transparent; }
.hd nav a:hover, .hd nav a[aria-current="page"] { border-bottom-color: var(--teal-500); }
.hd__right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.hd__q { font-size: 14.5px; text-decoration: none; color: var(--navy-900); }
.hd__q:hover { text-decoration: underline; }
.hd .btn { padding: 10px 17px; font-size: 15px; }
.hd__burger { display: none; width: 42px; height: 42px; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--rule); border-radius: 4px; cursor: pointer; font-size: 18px; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-block; font-family: var(--sans); font-size: 16px; font-weight: 600; line-height: 1.2;
  padding: 15px 24px; border: 1.5px solid var(--navy-900); border-radius: 4px;
  text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--navy-900); color: #fff; }
.btn--primary:hover { background: var(--navy-700); }
.btn--ghost { background: transparent; color: var(--navy-900); }
.btn--ghost:hover { background: var(--paper-alt); }
.on-dark .btn--primary, .band--navy .btn--primary { background: #fff; color: var(--navy-900); border-color: #fff; }
.on-dark .btn--primary:hover, .band--navy .btn--primary:hover { background: var(--paper-alt); }
.on-dark .btn--ghost, .band--navy .btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.on-dark .btn--ghost:hover, .band--navy .btn--ghost:hover { background: rgba(255,255,255,.08); }

.arrow { font-weight: 600; font-size: 15.5px; text-decoration: none; color: var(--navy-900);
  border-bottom: 1.5px solid var(--teal-500); padding-bottom: 2px; }
.arrow:hover { border-bottom-width: 3px; }
.band--navy .arrow, .on-dark .arrow { color: #fff; border-bottom-color: var(--teal-300); }

.ctarow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }

/* ---------------- Cards ---------------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.cards--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.cards--4 { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.card { background: #fff; border: 1px solid var(--rule); border-radius: 5px; padding: 26px 24px 24px; border-top: 3px solid var(--teal-500); }
.card p { font-size: 15.5px; color: var(--ink-mid); }
.card .meta { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); }
.card--model { border-top-color: var(--orange-500); }
.card--plain { border-top-color: var(--rule); border-top-width: 1px; }

.panel { background: #fff; border: 1px solid var(--rule); border-radius: 5px; padding: 30px; }
.panel--alt { background: var(--paper-alt); }

/* ---------------- Chips ---------------- */
.chip { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .04em;
  padding: 2px 7px; border: 1px solid currentColor; border-radius: 3px; vertical-align: 1px; }
.chip--new { color: #1c7a5e; }
.chip--high { color: var(--hold); }
.chip--ongoing { color: var(--ink-muted); }
.chip--todo { color: var(--navy-700); }
.chip--ship { color: var(--teal-700); }
.chip--next { color: var(--hold); }
.chip--later { color: var(--ink-muted); }

/* ---------------- Accordion ---------------- */
.acc { border-top: 1px solid var(--rule); }
.acc details { border-bottom: 1px solid var(--rule); background: #fff; }
.acc summary { display: grid; grid-template-columns: 44px minmax(0,1fr) 28px; gap: 14px; align-items: baseline;
  padding: 20px 4px; cursor: pointer; list-style: none; font-weight: 600; font-size: 17px; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-family: var(--mono); font-weight: 400; font-size: 20px; color: var(--ink-muted); justify-self: end; }
.acc details[open] summary::after { content: "\2013"; }
.acc summary:hover { background: var(--paper-alt); }
.acc .st { font-family: var(--mono); font-size: 13px; color: var(--ink-muted); font-weight: 400; }
.acc__body { padding: 0 4px 26px 62px; }
.acc__body p { font-size: 15.5px; color: var(--ink-mid); max-width: 66ch; }
.acc details.model { border-left: 4px solid var(--orange-500); }
.acc details.model summary { color: var(--orange-700); padding-left: 14px; }
.acc details.model .st { color: var(--orange-700); }
.acc details.model .acc__body { padding-left: 72px; }
.acc__tag { display: inline-block; margin-bottom: 10px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .05em; color: var(--orange-700); border: 1px solid currentColor; border-radius: 3px; padding: 2px 7px; }

/* ---------------- Tables ---------------- */
.scroller { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15.5px; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 600; }
thead th { font-size: 13px; letter-spacing: .01em; border-bottom: 2px solid var(--navy-900); }
tbody tr:nth-child(even) { background: #FAFBFD; }
.v-pass { color: var(--teal-700); font-weight: 600; font-family: var(--mono); font-size: 13px; }
.v-rej { color: var(--reject); font-weight: 600; font-family: var(--mono); font-size: 13px; }

/* ---------------- Refusal panel ---------------- */
.refusal { background: var(--navy-900); color: #fff; border-radius: 6px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); }
.refusal__head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: baseline; padding: 16px 22px;
  border-bottom: 1px solid rgba(255,255,255,.14); font-family: var(--mono); font-size: 12.5px; color: var(--navy-400); }
.refusal__stamp { margin-left: auto; color: #fff; border: 1.5px solid var(--reject); background: rgba(179,55,44,.28);
  border-radius: 3px; padding: 3px 9px; font-weight: 500; letter-spacing: .06em; }
.refusal pre { margin: 0; padding: 22px; font-family: var(--mono); font-size: 13px; line-height: 1.72;
  color: #E8ECF4; white-space: pre-wrap; overflow-x: auto; }
.refusal pre b { color: #fff; font-weight: 500; }

/* ---------------- Screenshots ---------------- */
figure { margin: 0; }
.shot { border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 2px rgba(15,27,52,.05), 0 8px 24px -12px rgba(15,27,52,.18); }
.shot img { width: 100%; }
.shot--crop { height: 470px; }
.shot--crop img { width: 1440px; max-width: none; }
@media (max-width: 900px) { .shot--crop { height: auto; } .shot--crop img { width: 100%; } }
figcaption { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-muted); }
figcaption .tag { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; border: 1px solid var(--rule);
  border-radius: 3px; padding: 1px 6px; margin-right: 6px; }

/* ---------------- The card after a download ----------------
   Shared by both paper pages, so it lives here. It sits above the mobile
   drawer (z-index 40) because it can be opened from a page that has the
   drawer open. It scrolls inside itself rather than growing past the screen:
   the form is nine controls tall and a phone is not. */
.modal { position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center; padding: 20px; }
.modal__scrim { position: absolute; inset: 0; background: rgba(11, 20, 40, .55); }
/* The card does not scroll; its body does. The close button is a child of the
   card, so keeping the scroll one level in means it stays on screen however
   far down the form the reader has gone - on a phone the whole form is taller
   than the sheet, and a close affordance that scrolls away is a trap. */
.modal__card { position: relative; background: #fff; border-radius: 6px;
  border-top: 3px solid var(--teal-500); box-shadow: 0 18px 50px rgba(11, 20, 40, .22);
  width: 100%; max-width: 520px; max-height: calc(100vh - 40px);
  display: flex; flex-direction: column; overflow: hidden; }
.modal__body { overflow-y: auto; padding: 30px 30px 26px; }
.modal__card:focus { outline: none; }
.modal__x { position: absolute; z-index: 1; top: 10px; right: 12px;
  background: #fff; border-radius: 50%; border: 0;
  font-size: 26px; line-height: 1; color: var(--ink-muted); cursor: pointer; padding: 4px 8px; }
.modal__x:hover { color: var(--navy-900); }
.modal__card h2 { font-size: 24px; letter-spacing: -.01em; }
.modal__lede { font-size: 15.5px; color: var(--ink-mid); margin-top: 8px; }
.modal__ask { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rule); }
.modal__ask h3 { font-size: 17px; }
.modal__ask p { font-size: 15px; color: var(--ink-mid); margin-top: 7px; }
.modal__card form { margin-top: 22px; }
/* Four optional fields, stacked, put the Send button under the fold on a
   laptop. The hint goes back beside its label instead of under it, which is
   both shorter and how it reads: "Name  optional". */
.modal__card .field { margin-bottom: 16px; }
.modal__card .field .hint { display: inline; margin: 0 0 0 7px; font-size: 13px; }
.modal__card .consent { margin-top: 4px; }
.modal__card .consent label { font-weight: 400; margin: 0; }
.modal__act { display: flex; align-items: center; gap: 18px; margin-top: 22px; }
.modal__no { background: none; border: 0; padding: 0; font: inherit;
  color: var(--ink-muted); text-decoration: underline; cursor: pointer; }
.modal__no:hover { color: var(--navy-900); }
.modal__card .formnote { margin-top: 14px; }
.modal__done { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rule); }
.modal__done h3 { font-size: 19px; }
.modal__done h3:focus { outline: none; }
.modal__done p { font-size: 15.5px; color: var(--ink-mid); margin-top: 8px; }

@media (max-width: 560px) {
  .modal { padding: 0; align-items: flex-end; }
  .modal__card { max-width: none; max-height: 92vh;
    border-radius: 6px 6px 0 0; }
  .modal__body { padding: 26px 20px 22px; }
  .modal__card h2 { font-size: 21px; }
}

/* ---------------- Limit callout ---------------- */
/* Shared components. Each of these was defined in one page's own <style>
   while the markup shipped on many, so every other page rendered it bare.
   They live here because more than one page uses them - the rule this file
   exists to keep. */

/* The page header under the nav: a tinted band, a rule under it, and an h1
   held to 20ch so it breaks into short lines rather than one long one. */
.subhero { background: var(--paper-alt); border-bottom: 1px solid var(--rule); padding: 54px 0 46px; }
.subhero h1 { max-width: 20ch; }

/* The kicker above a card's heading: who the card is for, or what it is. */
.card__who { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--ink-muted);
  margin-bottom: 12px; text-transform: uppercase; }
/* A deliberate second line inside a heading. The markup puts no space around
   it, so without this the two sentences run together with no gap at all. */
h1 .l2 { display: block; }

.limit { margin-top: 24px; border-left: 3px solid var(--hold); background: #FDF8F0; padding: 20px 24px; border-radius: 0 5px 5px 0; }
.limit b { display: block; font-size: 13px; font-weight: 600; color: var(--hold); margin-bottom: 6px; }
.limit p { font-size: 15.5px; color: var(--ink-mid); max-width: 68ch; }

/* ---------------- Lists ---------------- */
.numbered { list-style: none; counter-reset: n; }
.numbered li { counter-increment: n; display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 14px;
  padding: 15px 0; border-bottom: 1px solid var(--rule); font-size: 15.5px; line-height: 1.55; }
.numbered li::before { content: counter(n); font-family: var(--mono); font-size: 13px; color: var(--teal-700); padding-top: 3px; }
.numbered li b { display: block; }
.plain { list-style: none; }
.plain li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15.5px; }
.plain li:last-child { border-bottom: 0; }
.plain li b { display: block; }
.fences li { padding: 18px 0; }

/* ---------------- Forms ---------------- */
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.field .hint { display: block; font-weight: 400; color: var(--ink-muted); font-size: 13.5px; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--sans); font-size: 16px; color: var(--ink); background: #fff;
  border: 1.5px solid #C3CCDD; border-radius: 4px; padding: 12px 13px;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy-900); }
.field--error input, .field--error select, .field--error textarea { border-color: var(--reject); background: #FDF6F5; }
.err { display: flex; gap: 7px; align-items: flex-start; margin-top: 7px; font-size: 14px; color: var(--reject); font-weight: 500; }
.err::before { content: "!"; flex: none; width: 17px; height: 17px; margin-top: 2px; border: 1.5px solid currentColor;
  border-radius: 50%; font-family: var(--mono); font-size: 11px; line-height: 14px; text-align: center; font-weight: 600; }
.formnote { font-size: 14px; color: var(--ink-muted); line-height: 1.55; }
/* Honeypot. Off-screen rather than display:none, so a bot that skips hidden
   inputs still fills it, and a screen reader still reads the label. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; }
.consent input { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.alert { border: 1.5px solid var(--reject); border-left-width: 4px; background: #FDF6F5; border-radius: 4px;
  padding: 15px 18px; margin-bottom: 26px; font-size: 15px; }
.alert b { display: block; margin-bottom: 3px; }
.alert ul { margin: 8px 0 0; padding-left: 18px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.formgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 60px; align-items: start; }

/* ---------------- Footer ---------------- */
.ft { background: var(--navy-900); color: #C7D0E0; padding: 58px 0 0; font-size: 14.5px; }
.ft__cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 34px; padding-bottom: 44px; }
/* Footer sutun basliklari gorsel olarak baslik, belge yapisinda degil:
   sayfada onlari tasiyacak bir h2 ve h3 yok, h4 olarak birakmak ana
   basliktan dogrudan h4'e atlayan bir anahat uretiyordu. */
.ft h4, .ft__h { font-size: 13px; font-weight: 600; color: #fff; letter-spacing: .02em; margin-bottom: 13px; }
.ft ul { list-style: none; }
.ft li { margin-bottom: 8px; }
.ft a { color: #C7D0E0; text-decoration: none; }
.ft a:hover { color: #fff; text-decoration: underline; }
.ft__brand svg { height: 30px; width: auto; margin-bottom: 14px; }
.ft__brand p { font-size: 14px; max-width: 30ch; }
.ft__bar { border-top: 1px solid rgba(255,255,255,.14); padding: 18px 0 26px; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13.5px; }
.ft__bar .sp { margin-left: auto; }

/* ---------------- Utility ---------------- */
.prose p { max-width: 72ch; }
.prose p + p { margin-top: 16px; }
.split { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.split .r { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; }
.stack > * + * { margin-top: 22px; }
.kv { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 12px 26px; }
.kv dt { font-weight: 600; font-size: 15px; }
.kv dd { margin: 0; font-size: 15.5px; color: var(--ink-mid); }

@media (max-width: 1040px) {
  .cards, .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .formgrid { grid-template-columns: 1fr; gap: 44px; }
  .hd nav { display: none; }
  .hd__burger { display: flex; }
}
@media (max-width: 700px) {
  .wrap { padding: 0 20px; }
  /* A single long word (German and Azerbaijani compounds) must not widen the page. */
  h1, h2, h3 { overflow-wrap: anywhere; hyphens: auto; }
  .band { padding: 52px 0; }
  .cards, .cards--2, .cards--4 { grid-template-columns: 1fr; }
  .ft__cols { grid-template-columns: 1fr 1fr; gap: 28px; }
  .ft__brand { grid-column: 1 / -1; }
  .acc summary { grid-template-columns: 38px minmax(0,1fr) 24px; font-size: 16px; }
  .acc__body, .acc details.model .acc__body { padding-left: 0; }
  .acc details.model .acc__body { padding-left: 14px; }
  .two, .kv { grid-template-columns: 1fr; }
  .util .sp, .hd__q { display: none; }
  .ft__bar .sp { margin-left: 0; }
  .split .r { margin-left: 0; }
}

/* ---------------- Mobile nav drawer ---------------- */
.drawer { position: fixed; inset: 0; background: #fff; z-index: 40; padding: 22px 20px; display: none; overflow-y: auto; }
.drawer[open] { display: block; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.drawer nav { display: flex; flex-direction: column; }
.drawer nav a { padding: 15px 0; border-bottom: 1px solid var(--rule); text-decoration: none; font-size: 19px; font-weight: 600; }
.drawer .btn { margin-top: 26px; width: 100%; text-align: center; }

@media print {
  .util, .hd, .ft, .ctarow, .drawer { display: none !important; }
  body { font-size: 11pt; }
  .band { padding: 18pt 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ==========================================================================
   The dark layer, added 14 Sept with the new home page.

   Everything below was written for the home page redesign and is
   page-independent, so it lives here rather than in one page's <style>: the
   balanced five-card grid, the header fix for phones, the motion tokens, the
   surface textures, and the dark chrome a page gets by asking build.py for
   chrome="dark". Nothing here changes a page that does not use it.
   ========================================================================== */

:root {
  /* the dark end of the palette. The light end is at the top of this file. */
  --void: #05090F;
  --deep: #0A1120;
  --panel: #0E1729;
  --hair: rgba(150,180,220,.15);
  --hair-2: rgba(150,180,220,.26);
  --live: #00D3B8;   /* 9.0:1 on --void: may carry text */
  --held: #FF7A43;
  --text: #E9EEF8;
  --dim: #94A3BE;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}

/* ---- five cards, no hole ----
   Three across, then two across the same width. A five-item set has no empty
   cell and no orphan at any of the three breakpoints. */
.cards--5 { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 22px; }
.cards--5 > * { grid-column: span 2; }
.cards--5 > :nth-child(4), .cards--5 > :nth-child(5) { grid-column: span 3; }
@media (max-width: 1040px) {
  .cards--5 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cards--5 > *, .cards--5 > :nth-child(4), .cards--5 > :nth-child(5) { grid-column: span 1; }
  .cards--5 > :nth-child(5) { grid-column: span 2; }
}
@media (max-width: 700px) {
  .cards--5 { grid-template-columns: 1fr; }
  .cards--5 > :nth-child(5) { grid-column: span 1; }
}

/* ---- the header CTA on a phone ----
   At 390px "Start a 4-week pilot" wrapped to two lines and pushed itself into
   the utility bar. Compact and on one line between 700 and 480; below 480 it
   steps aside, because the drawer already carries the same call to action at
   full width. */
@media (max-width: 700px) {
  .hd .btn { font-size: 13.5px; padding: 9px 13px; white-space: nowrap; }
  .hd__in { gap: 14px; padding-top: 11px; padding-bottom: 11px; }
  .hd__logo svg { height: 30px; }
}
@media (max-width: 480px) {
  .hd__right .btn { display: none; }
}

/* ---- surfaces ---- */
.gx { display: block; }
.lattice { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* one 120x120 tile, so a grained surface costs no request */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

/* ---- dark chrome ----
   A page whose first band is dark asks build.py for chrome="dark"; the shell
   puts the class on <body> and the light mark in the header. The drawer keeps
   the dark mark, because it opens on white. */
/* only the ground. The text colour belongs to the band, because a page can
   ask for a dark header and still be a light page under it. */
body.chrome-dark { background: var(--void); }
.chrome-dark .util { background: #03070D; }
.chrome-dark .hd { background: rgba(5,9,15,.86); backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--hair); }
.chrome-dark .hd nav a, .chrome-dark .hd__q { color: var(--text); }
.chrome-dark .hd nav a:hover,
.chrome-dark .hd nav a[aria-current="page"] { border-bottom-color: var(--live); }
.chrome-dark .hd .btn--primary { background: var(--live); color: #04121F; border-color: var(--live); }
.chrome-dark .hd .btn--primary:hover { background: #4BE6D2; border-color: #4BE6D2; }
.chrome-dark .hd__burger { border-color: var(--hair-2); color: var(--text); }

/* ==========================================================================
   v3 — the home page's design language, applied to a page of the site.

   The home page was rebuilt on 14 Sept and the rest of the site follows it a
   batch at a time. A converted page carries `class="v3"` on <body>, which is
   what everything below is scoped to, so a page that has not been converted
   yet is untouched and each batch can be looked at on its own. The scoping
   comes off when the last page is through.

   This is a re-skin, not a re-write: it restyles the component vocabulary the
   pages already use — .subhero, .band, .band__head .eyebrow, .card, .panel —
   and the only markup that changes is the class on a <section>. That matters
   for more than tidiness: _build/i18n_blocks.py keys every translation by the
   inner HTML of the block it came from, so editing the markup *inside* a
   paragraph silently throws its four translations away. Editing the band
   around it costs nothing.
   ========================================================================== */

/* ---- the page hero, dark ---- */
.v3 .subhero { position: relative; overflow: hidden; border-bottom: 1px solid var(--hair);
  padding: 58px 0 54px; color: var(--text);
  background: radial-gradient(120% 120% at 50% -30%, #12203C 0%, var(--deep) 48%, var(--void) 100%); }
.v3 .subhero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
.v3 .subhero .wrap { position: relative; }
.v3 .subhero .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
  font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .14em;
  color: var(--live); }
.v3 .subhero .eyebrow::before { content: ""; width: 7px; height: 7px; flex: none;
  background: var(--live); transform: rotate(45deg); }
.v3 .subhero .eyebrow::after { content: ""; height: 1px; flex: 1; max-width: 88px;
  background: var(--hair-2); }
.v3 .subhero h1 { color: #fff; max-width: 22ch; margin-bottom: 18px;
  font-size: clamp(32px, 4.2vw, 50px); line-height: 1.06; letter-spacing: -.032em; }
.v3 .subhero .lede { color: var(--dim); font-size: 18px; max-width: 66ch; }
.v3 .subhero .btn { border-radius: 999px; }
.v3 .subhero .btn--primary { background: var(--live); color: #04121F; border-color: var(--live); }
.v3 .subhero .btn--primary:hover { background: #4BE6D2; border-color: #4BE6D2; }

/* ---- reading bands ---- */
.v3 .band { background: #fff; color: var(--ink); }
.v3 .band--alt { background: #F6F8FC; color: var(--ink); }

/* a chapter mark: a node, a word, a hairline. It marks a start, so the rule
   runs after the label rather than over the whole column. */
.v3 .band__head .eyebrow { display: flex; align-items: center; gap: 10px;
  border-top: 0; padding-top: 0; margin-bottom: 16px;
  font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .14em;
  color: var(--teal-700); }
.v3 .band__head .eyebrow::before { content: ""; width: 7px; height: 7px; flex: none;
  background: var(--teal-500); transform: rotate(45deg); }
.v3 .band__head .eyebrow::after { content: ""; height: 1px; flex: 1; max-width: 88px;
  background: #C9D3E4; }
.v3 .band--navy .band__head .eyebrow, .v3 .band--dark .band__head .eyebrow { color: var(--live); }
.v3 .band--navy .band__head .eyebrow::before,
.v3 .band--dark .band__head .eyebrow::before { background: var(--live); }
.v3 .band--navy .band__head .eyebrow::after,
.v3 .band--dark .band__head .eyebrow::after { background: var(--hair-2); }

.v3 h2 { font-size: clamp(24px, 2.9vw, 34px); line-height: 1.16; letter-spacing: -.02em; }
.v3 h3 { font-size: 17.5px; letter-spacing: -.01em; }

/* ---- a dark statement band ---- */
.v3 .band--dark, .v3 .band--navy { background: var(--void); color: var(--text); }
.v3 .band--dark h2, .v3 .band--navy h2,
.v3 .band--dark h3, .v3 .band--navy h3 { color: #fff; }
.v3 .band--dark p, .v3 .band--dark .lede,
.v3 .band--navy p, .v3 .band--navy .lede { color: var(--dim); }
.v3 .band--dark .meta, .v3 .band--navy .meta { color: #7E8CA6; }
.v3 .band--navy .btn, .v3 .band--dark .btn { border-radius: 999px; }
.v3 .band--navy .btn--primary, .v3 .band--dark .btn--primary {
  background: var(--live); color: #04121F; border-color: var(--live); }
.v3 .band--navy .btn--primary:hover, .v3 .band--dark .btn--primary:hover {
  background: #4BE6D2; border-color: #4BE6D2; }
.v3 .band--navy .btn--ghost, .v3 .band--dark .btn--ghost {
  color: #fff; border-color: var(--hair-2); }
.v3 .band--navy .btn--ghost:hover, .v3 .band--dark .btn--ghost:hover {
  border-color: #fff; background: rgba(255,255,255,.06); }

/* ---- cards: a cut corner, because the object is sealed ---- */
.v3 .card { position: relative; overflow: hidden; background: #fff;
  border: 1px solid #DFE5EF; border-top: 1px solid #DFE5EF; border-radius: 10px;
  padding: 26px 24px 28px;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.v3 .card--model { border-color: rgba(250,100,35,.45); }
.v3 .card--plain { border-color: #E7ECF4; }
.v3 .band--navy .card, .v3 .band--dark .card {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border-color: var(--hair); }
.v3 .band--navy .card p, .v3 .band--dark .card p { color: var(--dim); }
.v3 .card__who { color: var(--teal-700); letter-spacing: .1em; }
.v3 .band--navy .card__who, .v3 .band--dark .card__who { color: var(--live); }

/* ---- what a dark band does to the components inside it ----
   The pages carry tables, panels, key lists and links, and a band that goes
   dark has to answer for all of them. Anything that is a document in its own
   right - the sample record, a product screenshot - stays on paper; the
   band's dark theme is held at its edge, because a document on a dark desk
   still reads as a document. */
.v3 .band--dark a, .v3 .band--navy a { color: #fff; }
.v3 .band--dark .arrow, .v3 .band--navy .arrow {
  color: #fff; border-bottom-color: var(--live); }
.v3 .band--dark .lede, .v3 .band--navy .lede { color: var(--dim); }
.v3 .band--dark li, .v3 .band--navy li { color: var(--dim); }
.v3 .band--dark strong, .v3 .band--dark b,
.v3 .band--navy strong, .v3 .band--navy b { color: #fff; }

.v3 .band--dark th, .v3 .band--navy th { color: #fff; border-bottom-color: var(--hair-2); }
.v3 .band--dark td, .v3 .band--navy td { color: var(--dim); border-bottom-color: var(--hair); }
.v3 .band--dark tbody tr:nth-child(even),
.v3 .band--navy tbody tr:nth-child(even) { background: rgba(255,255,255,.025); }
.v3 .band--dark table, .v3 .band--navy table { border-color: var(--hair); }

.v3 .band--dark .panel, .v3 .band--navy .panel {
  background: rgba(255,255,255,.035); border-color: var(--hair); }
.v3 .band--dark .panel--alt, .v3 .band--navy .panel--alt { background: rgba(255,255,255,.05); }
.v3 .band--dark .panel p, .v3 .band--navy .panel p { color: var(--dim); }

.v3 .band--dark figcaption, .v3 .band--navy figcaption { color: #7E8CA6; }
.v3 .band--dark .chip, .v3 .band--navy .chip { border-color: var(--hair-2); }
.v3 .band--dark .kv dt, .v3 .band--navy .kv dt { color: #fff; }
.v3 .band--dark .kv dd, .v3 .band--navy .kv dd { color: var(--dim); }

/* a document keeps its paper */
.v3 .band--dark .rcard, .v3 .band--navy .rcard { color: var(--ink); }
.v3 .band--dark .rcard p, .v3 .band--navy .rcard p,
.v3 .band--dark .rcard td, .v3 .band--navy .rcard td { color: var(--ink-mid); }
.v3 .band--dark .rcard b, .v3 .band--navy .rcard b { color: var(--navy-900); }

/* ---- "also on this site": an invitation, not a footnote ----
   It was a grey panel at the foot of a white column, which is where a reader
   stops looking. It is now the page's closing band: the offer on the left, a
   photograph on the right with the mark's own geometry laid over it - the same
   hairline frame and two teal ticks the photographic direction used. */
.v3 .also { padding: 64px 0; }
.v3 .also .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: 64px; align-items: center; }
.also__say h3 { color: #fff; max-width: 16ch;
  font-size: clamp(24px, 2.8vw, 35px); line-height: 1.12; letter-spacing: -.024em; }
.also__p { margin-top: 20px; max-width: 46ch; font-size: 16.5px; line-height: 1.6;
  color: var(--dim); }
.v3 .also .also__p .arrow { display: inline-block; margin-bottom: 10px; font-size: 20px;
  line-height: 1.3; color: #fff; border-bottom-color: var(--live); }
.also__shot { position: relative; margin: 0; overflow: hidden; border-radius: 10px;
  aspect-ratio: 16 / 11; background: #0B1226; }
.also__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.also__frame { position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,.22);
  pointer-events: none; }
.also__frame::before, .also__frame::after { content: ""; position: absolute;
  width: 20px; height: 20px; }
.also__frame::before { top: -1px; left: -1px;
  border-top: 2px solid var(--live); border-left: 2px solid var(--live); }
.also__frame::after { bottom: -1px; right: -1px;
  border-bottom: 2px solid var(--live); border-right: 2px solid var(--live); }
@media (max-width: 900px) {
  .v3 .also .wrap { grid-template-columns: 1fr; gap: 32px; }
  .also__shot { aspect-ratio: 16 / 10; }
}

/* ---- a page that opens straight into a band ----
   The thank-you pages and 404 have no .subhero: their first band is the hero.
   It gets the hero's type and the hero's chapter mark, and it is dark, because
   a page that is the end of a path should read as a considered stop rather
   than as a blank. */
.v3 .band--hero { padding-bottom: 84px; }
.v3 .band--hero .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
  font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .14em;
  color: var(--live); }
.v3 .band--hero .eyebrow::before { content: ""; width: 7px; height: 7px; flex: none;
  background: var(--live); transform: rotate(45deg); }
.v3 .band--hero .eyebrow::after { content: ""; height: 1px; flex: 1; max-width: 88px;
  background: var(--hair-2); }
.v3 .band--hero h1 { color: #fff; max-width: 22ch; margin-bottom: 18px;
  font-size: clamp(30px, 3.8vw, 45px); line-height: 1.08; letter-spacing: -.03em; }
.v3 .band--hero .lede { color: var(--dim); font-size: 18px; max-width: 64ch; }
.v3 .band--hero .plain li { color: var(--dim); }
.v3 .band--hero .plain a { color: #fff; }

/* ==========================================================================
   The Solutions mega menu — added 22 Sept.

   One header entry opens a full-width panel under the header with three
   regions: by industry, by department, and a narrow column carrying the
   illustrative-data sentence and the pilot call to action. The owner's
   decision supersedes the brief's "no mega menu" anti-goal for this entry
   only; every other header entry stays a plain link. Site tokens only:
   navy on white, one typeface, no icons. Rendered by _build/solutions.py.
   ========================================================================== */

/* the trigger reads exactly like the links beside it */
.mm { display: contents; }
.mm__t { font: inherit; font-weight: 500; color: var(--navy-900); background: none; border: 0;
  padding: 20px 0; margin: 0; cursor: pointer; border-bottom: 3px solid transparent; }
.mm__t:hover, .mm__t[aria-current="page"], .mm.is-open .mm__t { border-bottom-color: var(--teal-500); }
.chrome-dark .mm__t { color: var(--text); }
.chrome-dark .mm__t:hover, .chrome-dark .mm__t[aria-current="page"],
.chrome-dark .mm.is-open .mm__t { border-bottom-color: var(--live); }

/* the panel hangs from the header, which is the positioned ancestor.
   Everything inside is written with the `.hd nav .mm__p` prefix on purpose:
   `.hd nav a` and the dark-chrome rules would otherwise reach in and paint
   the panel's links white with the header's underline. */
.mm__p { position: absolute; left: 0; right: 0; top: 100%; z-index: 31;
  background: #fff; color: var(--ink); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  box-shadow: 0 28px 40px -28px rgba(15,27,52,.38); }
.mm__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, .8fr);
  gap: 0 44px; padding: 30px 32px 34px; }
.mm__h { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink-muted);
  margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.mm__col ul { list-style: none; }
.hd nav .mm__p a, .chrome-dark .hd nav .mm__p a { color: var(--navy-900); }
.hd nav .mm__p a { padding: 0; border-bottom: 0; }
.hd nav .mm__p .mm__i { display: block; padding: 9px 10px; margin: 0 -10px; border-radius: 4px; text-decoration: none;
  line-height: 1.35; }
.mm__i b { display: block; font-weight: 600; font-size: 15.5px; }
.mm__i span { display: block; font-size: 13.5px; color: var(--ink-muted); margin-top: 2px; }
.hd nav .mm__p a.mm__i:hover, .hd nav .mm__p a.mm__i:focus-visible { background: var(--paper-alt); }
.hd nav .mm__p a.mm__i:hover b { text-decoration: underline; text-decoration-color: var(--teal-500); text-underline-offset: 3px; }
/* an entry whose page is not live yet: plain text, nothing to press */
.mm__i--text { color: var(--ink-mid); cursor: default; }
.mm__i--text b { font-weight: 500; }
.hd nav .mm__p a.mm__all { display: inline-block; margin-top: 12px; font-size: 14.5px; font-weight: 600; text-decoration: none;
  border-bottom: 1.5px solid var(--teal-500); padding-bottom: 1px; }
.hd nav .mm__p a.mm__all:hover { border-bottom-width: 3px; }
.mm__aside { border-left: 1px solid var(--rule); padding-left: 36px; padding-top: 4px; }
.mm__aside p { font-size: 14.5px; line-height: 1.55; color: var(--ink-mid); max-width: 30ch; }
.hd nav .mm__p a.btn--primary, .chrome-dark .hd nav .mm__p a.btn--primary { display: inline-block; margin-top: 18px;
  padding: 11px 18px; font-size: 15px; background: var(--navy-900); color: #fff; border: 1.5px solid var(--navy-900); border-radius: 4px; }
.hd nav .mm__p a.btn--primary:hover, .chrome-dark .hd nav .mm__p a.btn--primary:hover { background: var(--navy-700); border-color: var(--navy-700); }
@media (max-width: 1040px) { .mm { display: none; } }
/* the entry is the longest label in the header; between 1040 and 1200 the
   row tightens rather than wrapping, and the 12-questions link steps aside
   (it is in the drawer, the footer and the solutions pages) */
.hd nav a, .mm__t { white-space: nowrap; }
@media (max-width: 1200px) {
  .hd nav { gap: 18px; font-size: 14.5px; }
  .hd__in { gap: 22px; }
  .hd__q { display: none; }
}
@media (max-width: 1160px) { .mm__in { gap: 0 30px; } .mm__aside { padding-left: 26px; } }

/* the same three regions inside the mobile drawer, as an accordion */
.drawer nav details { border-bottom: 1px solid var(--rule); }
.drawer nav summary { list-style: none; cursor: pointer; padding: 15px 0; font-size: 19px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; }
.drawer nav summary::-webkit-details-marker { display: none; }
.drawer nav summary::after { content: "+"; font-family: var(--mono); font-weight: 400; font-size: 20px; color: var(--ink-muted); }
.drawer nav details[open] > summary::after { content: "\2013"; }
.drawer nav .dr__grp { border-bottom: 0; border-top: 1px solid var(--rule); margin-left: 14px; }
.drawer nav .dr__grp summary { font-size: 15px; font-weight: 600; padding: 12px 0; }
.dr__list { padding: 0 0 12px; }
.dr__list a, .dr__list > span { display: block; padding: 9px 0; border-bottom: 0; text-decoration: none;
  font-size: 15px; font-weight: 500; line-height: 1.35; }
.drawer nav .dr__list a { padding: 9px 0; border-bottom: 0; font-size: 15px; font-weight: 500; }
.dr__list b { display: block; font-weight: 600; }
.dr__list > span { color: var(--ink-mid); }
.dr__list > span b { font-weight: 500; }
.dr__list a span, .dr__list > span span { display: block; font-size: 13px; color: var(--ink-muted); font-weight: 400; }
.drawer nav a.dr__all { display: inline-block; margin-top: 6px; padding: 4px 0; font-size: 14.5px; font-weight: 600;
  border-bottom: 1.5px solid var(--teal-500); }
.dr__note { padding: 14px 0 18px 14px; }
.dr__note p { font-size: 14px; color: var(--ink-mid); margin-bottom: 12px; }
.drawer nav .dr__note .arrow { padding: 0; border-bottom: 1.5px solid var(--teal-500); font-size: 15px; }

/* ---- the /solutions/ index: two columns of cards ---- */
.sol__note { margin-bottom: 44px; }
.sol__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; align-items: start; }
.sol__h { font-size: 22px; margin-bottom: 18px; }
.sol__cards { display: grid; gap: 16px; }
.sol__card h3 { font-size: 18px; }
.sol__card h3 a { text-decoration: none; }
.sol__card h3 a:hover { text-decoration: underline; text-decoration-color: var(--teal-500); text-underline-offset: 3px; }
.sol__card p { margin-top: 8px; }
.sol__card .sol__personas { font-size: 14px; color: var(--ink-muted); margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--rule); }
.sol__card--text h3 { color: var(--ink-mid); font-weight: 500; }
.sol__else { margin-top: 44px; font-size: 17px; }
@media (max-width: 900px) { .sol__cols { grid-template-columns: minmax(0, 1fr); gap: 36px; } .sol__cols h2 { overflow-wrap: anywhere; hyphens: auto; } }
@media print { .mm__p { display: none !important; } }

/* ==========================================================================
   Solutions pages and the example-set frame — added 22 Sept.

   A set is the product's own output shape (persona -> run -> findings ->
   recommendations -> brief -> what the run could not see) on synthetic data.
   Its frame has to be unmistakably NOT a product capture: a labelled border
   in the hold colour, the word Illustrative in the header, no product
   chrome, no shadow. Numbers inside it are plain text, never monospace.
   ========================================================================== */

.sol__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }
.sol__p { font-size: 16px; color: var(--ink-mid); max-width: 62ch; }
.sol__hint { font-size: 14px; color: var(--ink-muted); margin-bottom: 10px; max-width: 58ch; }
.sol__lens { margin-top: 22px; font-size: 15.5px; color: var(--ink-mid); max-width: 72ch; }
.sol__cannot li { color: var(--ink-mid); }
.sol__cannot li em:first-child { color: var(--ink); font-style: italic; }
.v3 .sol__two h3 { margin-bottom: 12px; }
@media (max-width: 900px) { .sol__two { grid-template-columns: minmax(0, 1fr); gap: 36px; } }

/* the minimum semantic model: measures are identifiers, so they may sit in
   the mono face; the dimension list is prose */
.model { margin: 0; }
.model__row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 12px 0;
  border-top: 1px solid var(--rule); }
.model__row:last-child { border-bottom: 1px solid var(--rule); }
.model dt { font-weight: 600; font-size: 14.5px; }
.model dd { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-mid); }

/* the KPI table: a real table with a caption naming the source tags */
.kpi caption { caption-side: bottom; text-align: left; padding: 14px 4px 0; font-size: 13.5px;
  line-height: 1.55; color: var(--ink-muted); }
.kpi th[scope="row"] { font-weight: 600; white-space: nowrap; }
.kpi td { font-size: 14.5px; color: var(--ink-mid); }
.kpi__src { font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; color: var(--ink-muted);
  white-space: nowrap; }

/* ---- the set frame ---- */
.sets > * + * { margin-top: 18px; }
.set { border: 1.5px solid var(--hold); border-radius: 6px; background: #fff; overflow: hidden; }
.set__sum { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 20px;
  background: #FDF8F0; cursor: pointer; list-style: none; line-height: 1.4; }
.set__sum::-webkit-details-marker { display: none; }
.set__sum::after { content: "+"; margin-left: auto; font-family: var(--mono); font-size: 20px; color: var(--hold); }
.set[open] > .set__sum::after { content: "\2013"; }
.set__badge { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--hold); border-radius: 3px; padding: 3px 8px; }
.set__n { font-size: 13.5px; font-weight: 600; color: var(--hold); }
.set__name { font-size: 17.5px; font-weight: 600; }
.set__lbl { flex-basis: 100%; font-size: 13.5px; color: var(--hold); }
@media (min-width: 900px) { .set__lbl { flex-basis: auto; margin-left: 4px; } }
.set__body { padding: 8px 20px 24px; }

/* the persona strip and the run header */
.set__persona { margin: 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px 20px;
  padding: 16px 0; border-bottom: 1px solid var(--rule); }
.set__persona dt { font-weight: 600; font-size: 14px; }
.set__persona dd { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-mid); }
.set__run { padding: 14px 0 16px; border-bottom: 1px solid var(--rule); }
.set__runlbl { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 8px; }
.set__run ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.set__run li { font-size: 13.5px; line-height: 1.45; color: var(--ink-mid); background: var(--paper-alt);
  border: 1px solid var(--rule); border-radius: 4px; padding: 5px 10px; }

/* one record */
.rec { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 16px; padding: 22px 0;
  border-bottom: 1px solid var(--rule); }
.rec__t { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--navy-700); padding-top: 5px; }
.rec__c h4 { font-size: 16.5px; line-height: 1.4; font-weight: 600; margin-bottom: 10px; letter-spacing: -.005em; }
.rec__c p { font-size: 15px; line-height: 1.65; color: var(--ink-mid); max-width: 80ch; }
.rec__c p + p { margin-top: 10px; }
.rec__meta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-bottom: 12px; }
.rec__meta--text { font-size: 13.5px; color: var(--ink-muted); }
.rec__meta--text a { color: var(--navy-900); }
.rec__bd { font-size: 13px; color: var(--ink-muted); }
.rec__bd b { font-weight: 600; color: var(--ink-mid); }
.rec--state .rec__t { color: var(--ink-muted); }
.rec--state .rec__c p { font-size: 14.5px; }
.rec--brief .rec__t { color: var(--teal-700); }
.rec__run { font-size: 13.5px !important; color: var(--ink-muted) !important; margin-top: 14px !important;
  padding-top: 12px; border-top: 1px dashed var(--rule); }
.tok { font-style: italic; }

/* the chips a finding carries: its meta line as badges */
.chip--sev-low { color: var(--ink-muted); }
.chip--sev-medium { color: var(--navy-700); }
.chip--sev-high { color: var(--hold); }
.chip--sev-critical { color: var(--reject); }
.chip--dir { color: var(--ink-muted); }
.chip--nov-new { color: #1c7a5e; }
.chip--nov-ongoing { color: var(--ink-muted); }
.chip--nov-repeat { color: var(--ink-muted); }
.chip--trust { color: var(--navy-700); }
.chip--interp { color: var(--orange-700); }

/* the assumptions strip: read before the numbers, cannot be switched off */
.set__strip { background: var(--paper-alt); border-left: 3px solid var(--navy-900); padding: 12px 16px;
  margin-bottom: 14px; border-radius: 0 4px 4px 0; }
.set__striplbl { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--navy-700) !important; margin-bottom: 4px !important; }
.set__strip p { font-size: 14.5px !important; }

.set__blind { margin-top: 18px; padding: 16px 18px; background: #FDF8F0; border-radius: 4px; }
.set__blind b { display: block; font-size: 13px; color: var(--hold); margin-bottom: 4px; }
.set__blind p { font-size: 14.5px; line-height: 1.6; color: var(--ink-mid); }

@media (max-width: 700px) {
  .set__body { padding: 4px 14px 18px; }
  .set__persona { grid-template-columns: 1fr; gap: 4px 0; }
  .set__persona dd { margin-bottom: 8px; }
  .rec { grid-template-columns: 1fr; gap: 6px; }
  .model__row { grid-template-columns: 1fr; gap: 4px; }
}
@media print {
  .set { break-inside: auto; }
  .set__sum::after { display: none; }
}

/* ---- the solutions call to action, and the collapsed appendix ---- */
.sol__cta-in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.sol__cta-act { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.sol__cta-act .btn { width: 100%; max-width: 380px; text-align: center; }
@media (max-width: 900px) { .sol__cta-in { grid-template-columns: 1fr; gap: 28px; } }
/* the appendix accordion holds a table and a definition list, which need
   the full column, not the indented body a paragraph gets */
.acc--wide .acc__body { padding-left: 4px; }
.acc--wide .acc__body p { max-width: 72ch; }
.acc--wide summary > span:last-child { font-size: 16.5px; }

/* ---- inside a set: the brief first, then recommendations as an accordion
   with the findings each rests on nested beneath ---- */
.rec--acc { display: block; padding: 0; }
.rec--acc > summary { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 16px; padding: 22px 0;
  cursor: pointer; list-style: none; }
.rec--acc > summary::-webkit-details-marker { display: none; }
.rec--acc > summary .rec__c { position: relative; padding-right: 32px; }
.rec--acc > summary .rec__c::after { content: "+"; position: absolute; right: 0; top: -2px;
  font-family: var(--mono); font-size: 20px; color: var(--ink-muted); }
.rec--acc[open] > summary .rec__c::after { content: "\2013"; }
.rec--acc > summary .rec__meta { margin-bottom: 0; }
.rec--acc > summary:hover .rec__c h4 { text-decoration: underline; text-decoration-color: var(--teal-500); text-underline-offset: 3px; }
.rec__open { padding: 0 0 22px 134px; }
.rec__open > p { font-size: 15px; line-height: 1.65; color: var(--ink-mid); max-width: 80ch; }
.rec__open > p + p { margin-top: 10px; }
.rec__nest, .rec__rest { margin-top: 18px; border-left: 2px solid var(--rule); padding-left: 18px; }
.rec__rest { margin-top: 22px; border-left: 0; padding-left: 0; }
.rec__nestlbl { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-muted) !important; margin: 0 0 4px !important; }
.rec__nest .rec { grid-template-columns: 96px minmax(0, 1fr); padding: 18px 0; }
.rec__nest .rec:last-child { border-bottom: 0; padding-bottom: 4px; }
.rec__rest .rec:first-of-type { border-top: 1px solid var(--rule); }
.rec--brief { border-bottom: 2px solid var(--navy-900); }
@media (max-width: 700px) {
  .rec--acc > summary { grid-template-columns: 1fr; gap: 6px; }
  .rec__open { padding-left: 0; }
  .rec__nest .rec { grid-template-columns: 1fr; }
}

/* what the product adds to a record: three short columns above the sets */
.sol__product { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-bottom: 34px;
  padding: 24px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.sol__product h3 { font-size: 15.5px; margin-bottom: 6px; }
.sol__product p { font-size: 14.5px; line-height: 1.6; color: var(--ink-mid); }
@media (max-width: 900px) { .sol__product { grid-template-columns: 1fr; gap: 18px; } }

/* the frame's badge stays as a quiet word; the disclaimer sits once at the
   foot of the page (owner, 22 Sept) */
.set__badge { color: var(--hold); background: transparent; border: 1px solid var(--hold); }
.sol__disclaimer { margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--rule);
  font-size: 13px; line-height: 1.55; color: var(--ink-muted); max-width: 80ch; }

/* ---- open/close marks on the left (solutions pages, owner 22 Sept) ---- */
/* the set frame */
.set__sum::after { content: none; }
.set__sum::before { content: "+"; font-family: var(--mono); font-size: 20px; line-height: 1; color: var(--hold); width: 16px; }
.set[open] > .set__sum::before { content: "\2013"; }
/* a recommendation: the mark sits in the tag column, before the word */
.rec--acc > summary .rec__c { padding-right: 0; }
.rec--acc > summary .rec__c::after { content: none; }
.rec--acc > summary .rec__t::before { content: "+"; display: inline-block; width: 16px; font-size: 15px; line-height: 1; color: var(--ink-muted); }
.rec--acc[open] > summary .rec__t::before { content: "\2013"; }
/* the site accordion, left-marked: FAQ and the appendix */
.acc--left summary { grid-template-columns: 24px 44px minmax(0,1fr); }
.acc--left summary::after { content: none; }
.acc--left summary::before { content: "+"; font-family: var(--mono); font-weight: 400; font-size: 20px; line-height: 1; color: var(--ink-muted); }
.acc--left details[open] summary::before { content: "\2013"; }
.acc--left .acc__body { padding-left: 82px; }
.acc--wide.acc--left .acc__body { padding-left: 4px; }
@media (max-width: 700px) {
  .acc--left summary { grid-template-columns: 22px 34px minmax(0,1fr); }
  .acc--left .acc__body { padding-left: 0; }
}
/* the open-state rules above outrank the plain reset, so the right-hand
   mark has to be cancelled in the open state too; and the tag column grows
   so "RECOMMENDATION 1" with its mark stays on one line */
.set[open] > .set__sum::after, .rec--acc[open] > summary .rec__c::after { content: none; }
.rec, .rec--acc > summary { grid-template-columns: 140px minmax(0, 1fr); }
.rec__open { padding-left: 156px; }
@media (max-width: 700px) { .rec, .rec--acc > summary { grid-template-columns: 1fr; } .rec__open { padding-left: 0; } }

/* "agents for the topics you choose": the panel under the persona cards */
.sol__build { margin-top: 30px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center;
  padding: 24px 28px; background: #fff; border: 1px solid var(--rule); border-left: 3px solid var(--teal-500); border-radius: 0 6px 6px 0; }
.sol__build h3 { font-size: 17px; margin-bottom: 6px; }
.sol__build p { font-size: 15px; line-height: 1.6; color: var(--ink-mid); max-width: 70ch; }
.sol__build .btn { white-space: nowrap; }
@media (max-width: 900px) { .sol__build { grid-template-columns: minmax(0, 1fr); gap: 16px; } .sol__build .btn { justify-self: start; white-space: normal; text-align: center; } }

/* ---- glyphs and the hero schematic (solutions) ---- */
.glyph { flex: none; vertical-align: -4px; }
.hd nav .mm__p .mm__i { display: flex; gap: 12px; align-items: flex-start; }
.glyph--mm { margin-top: 3px; color: var(--teal-700); }
.mm__i--text .glyph--mm { color: var(--ink-muted); }
.mm__txt { display: block; min-width: 0; }
.glyph--card { margin-right: 10px; color: var(--teal-700); }
.sol__card--text .glyph--card { color: var(--ink-muted); }
.v3 .subhero .eyebrow .glyph--hero { color: var(--live); margin-right: 2px; }
.v3 .subhero .eyebrow .glyph--hero + * { margin-left: 0; }
.subhero--art .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.subhero__art { justify-self: end; width: 100%; max-width: 560px; }
.hero-art { display: block; width: 100%; height: auto; }
@media (max-width: 1000px) { .subhero--art .wrap { grid-template-columns: 1fr; } .subhero__art { display: none; } }
.hd nav .mm__p a { white-space: normal; }

/* the agent mark */
.glyph--agent { color: var(--navy-900); }
.glyph--agentcard { display: block; margin-bottom: 12px; }
.set__sum .glyph--agent { margin-right: -4px; }
.sol__product { margin: 34px 0 0; border-bottom: 0; padding-bottom: 0; }
.sol__product a { font-weight: 600; text-decoration: none; border-bottom: 1.5px solid var(--teal-500); }
/* the site rule for an open accordion outranks the left-mark reset above */
.acc--left details[open] summary::after { content: none; }
.hd nav .mm__p a.mm__pilot { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600;
  border-bottom: 1.5px solid var(--teal-500); padding-bottom: 1px; }
.mm__aside p { max-width: 32ch; }
.sol__first { margin: 0 0 44px; }
/* a bold word inside the opening callout stays inline: only the label is a block */
.sol__first p b { display: inline; font-size: inherit; color: inherit; margin: 0; }
.subhero--art .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.subhero__art { max-width: 620px; }
/* Spanish labels run longest: the header row tightens and the 12-questions
   link steps aside earlier than in the other languages */
html[lang="es"] .hd nav { gap: 18px; }
html[lang="es"] .hd .btn { white-space: nowrap; }
@media (max-width: 1500px) { html[lang="es"] .hd__q { display: none; } }