/* Company brain page. Builds on base.css (tokens, nav, steps, button, the "more" drawer) and
   kit.css (the crayon drawings' frames, the kicker, the generic Par card). The drawings are
   transparent images from the image model; the pale blue panel behind them is CSS, shorter than
   the drawing, so heads and feet break out of it. The two app screens are generated prints, with
   every word inside the picture and repeated in the alt. */

/* ── Opening ─────────────────────────────────────────────────── */
.cb-three { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 4px 28px; font: 400 clamp(22px, 2.4vw, 30px)/1.25 var(--font-display); color: var(--text-muted); }
.cb-three-art { display: none; }
.cb-hero-art { margin-top: clamp(24px, 3.4vw, 44px); }
.cb-yc { font-size: clamp(16px, 1.4vw, 18px); color: var(--text-muted); max-width: 52ch; }
.cb-map-link { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: clamp(16px, 1.4vw, 18px); }
.cb-map-link a { text-underline-offset: 3px; }
.cb-map-link a::after { content: "\00a0\2192"; }

/* ── A block: the request's own words, the line, the drawing, three steps ── */
.cb-block { margin-top: clamp(84px, 11vw, 156px); scroll-margin-top: 24px; }
.cb-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.cb-quote { flex-basis: 100%; margin: 0; }
.cb-quote a, .cb-said-cite { color: inherit; text-decoration: none; }
.cb-quote a:hover, .cb-quote a:focus-visible, .cb-said-cite:hover, .cb-said-cite:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.cb-cite { font: 13px var(--font-mono); font-style: normal; color: var(--text-muted); }
.cb-top .par-section-link { margin-left: auto; }
.cb-block h2 { margin-top: clamp(14px, 1.6vw, 22px); font-size: clamp(34px, 4.8vw, 62px); line-height: 1.04; max-width: 20ch; }
.cb-block h2:focus:not(:focus-visible) { outline: none; }
/* The keyword gets its own line, as in the reference cards. */
.cb-block h2 .pil-key { display: block; }
.cb-block h2 + .pil-art { margin-top: clamp(8px, 1.4vw, 20px); }
.cb-block .hp-steps { margin-top: 4px; }
.cb-block .hp-n { margin-top: 0; }

/* the two screens: Tuesday night on her laptop, Wednesday morning on his phone */
.cb-screens { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 2.25fr) minmax(0, 1fr); gap: clamp(16px, 2.6vw, 36px); align-items: end; }
.cb-screen img { width: 100%; border: 1px solid var(--border-strong); box-shadow: var(--shot-shadow); }
.cb-screen--laptop img { border-radius: 14px; }
.cb-screen--phone img { border-radius: clamp(20px, 2.6vw, 34px); }
.cb-screen figcaption { margin-top: 12px; font: 400 clamp(17px, 1.5vw, 19px)/1.3 var(--font-display); color: var(--text-muted); text-wrap: balance; }
.cb-more { margin-top: 24px; }
.cb-more > summary { min-height: 44px; display: flex; align-items: center; padding: 0; }
.cb-said-cite { display: block; margin-top: 6px; font: 13px var(--font-mono); color: var(--text-muted); }

/* who decided, and when: the generic Par card, a door to the map */
.cb-why { margin-top: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 28px clamp(28px, 5vw, 72px); align-items: center; }
.cb-why-line { margin: 0; font: 400 clamp(28px, 3.4vw, 44px)/1.08 var(--font-display); letter-spacing: -0.015em; max-width: 16ch; }
.cb-why-line .pil-key { display: block; }
.cb-decision { display: grid; gap: 12px; padding: 18px 20px 20px; text-decoration: none; transition: transform var(--par-dur) var(--par-ease); }
.cb-decision:hover, .cb-decision:focus-visible { transform: translate(-2px, -2px); box-shadow: 8px 9px 0 var(--pil-ink); }
.cb-decision-top { display: flex; align-items: center; gap: 12px; }
.cb-decision-faces { display: flex; flex: none; }
.cb-decision-faces img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--pil-ink); background: var(--pil-paper); object-fit: cover; object-position: 50% 0; }
.cb-decision-faces img + img { margin-left: -10px; }
.cb-decision-what { font: 400 26px/1.1 var(--pil-display); letter-spacing: -0.01em; }
.cb-decision-what em { font-style: italic; font-weight: 700; }
.cb-decision-who { font: 13px var(--font-mono); color: var(--text-muted); }
.cb-decision-why { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border: 2px solid var(--pil-ink); border-radius: 16px; background: var(--pil-yellow-soft); font-size: 15px; line-height: 1.35; }
.cb-decision-why img { width: 40px; }
.cb-decision-go { font: 600 15px/1 var(--pil-body); text-decoration: underline; text-underline-offset: 3px; }
.cb-decision-go::after { content: "\00a0\2192"; }
@media (prefers-reduced-motion: reduce) { .cb-decision { transition: none; } .cb-decision:hover { transform: none; } }


/* ── What investors are writing: two voices between the blocks ── */
.cb-voices { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; margin-top: clamp(72px, 9vw, 120px); padding: 24px 0 4px; border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); }
.cb-voices-k { font: 13px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.cb-voices-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px clamp(28px, 4.4vw, 64px); }
.cb-voice { margin: 0; font: italic 400 clamp(21px, 2vw, 27px)/1.25 var(--font-display); }
.cb-voice a { color: inherit; text-decoration: none; }
.cb-voice a:hover, .cb-voice a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.cb-voices .cb-cite { display: block; margin-top: 8px; }
.cb-voices-more { margin: 18px 0 20px; font-size: 15px; }
.cb-voices-more a { text-underline-offset: 3px; }
.cb-voices-more a::after { content: "\00a0\2192"; }

/* the team's know-how: the command in Bea's AI next to the skill as a page in Par */
.cb-screens--skill { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; }
.cb-skill-wrap { align-self: center; }
.cb-skill .pil-ui-top h3 em { font-style: italic; font-weight: 700; }
.cb-skill-steps { margin: 12px 0 8px; padding: 0 18px 0 44px; display: grid; gap: 10px; font-size: 16px; line-height: 1.4; }
.cb-skill-steps li::marker { font: 600 14px var(--pil-body); }

/* who sees what */
.cb-rules { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 36px); }
.cb-rules li { padding-top: 14px; border-top: 1px solid var(--border-strong); font: 400 clamp(21px, 2vw, 26px)/1.22 var(--font-display); }

/* the doors to the other pages */
.cb-doors { margin-top: clamp(84px, 11vw, 156px); }
.cb-doors h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; max-width: 26ch; }
.cb-doors-list { list-style: none; margin: clamp(24px, 3vw, 36px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
.cb-doors-list a { display: grid; gap: 8px; text-decoration: none; color: var(--text); }
.cb-doors-list img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--pil-panel); border-radius: clamp(16px, 2vw, 24px); }
.cb-doors-list span { font: 400 clamp(17px, 1.5vw, 20px)/1.2 var(--font-display); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cb-doors-list a:hover span, .cb-doors-list a:focus-visible span { text-decoration-thickness: 2px; }

.cb-now { margin-top: 16px; max-width: 46ch; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; color: var(--text-muted); }
.hp-start h2 .pil-key { display: inline; }

/* ── Phone ───────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* The tall diagram beside the three lines: team works, AIs remember, Par makes the apps. */
  .cb-three-wrap { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; }
  .cb-three-art { display: block; margin-left: calc(-1 * var(--gutter)); padding: 10px 6px 10px 10px; background: var(--pil-panel); border-radius: 0 var(--pil-panel-r) var(--pil-panel-r) 0; }
  .cb-three-art img { width: 100%; }
  .cb-three-wrap .cb-three { margin-top: 0; padding-left: 14px; display: grid; grid-template-rows: repeat(3, 1fr); align-items: center; color: var(--text); font-size: 22px; }
  .cb-top .par-section-link { margin-left: 0; }
  /* Text-only steps on a phone: the number beside the sentence, close together. */
  .cb-block .hp-steps { gap: 16px; }
  .cb-block .hp-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
  .cb-block .hp-n { margin-top: 2px; }
  .cb-block .hp-say { margin-top: 0; font-size: 21px; }
  .cb-screens { grid-template-columns: 1fr; }
  /* On a phone each screen is cropped to the part that tells the story, so its words stay readable. */
  .cb-screen--laptop img, .cb-screen--phone img { border-radius: 18px; }
  .cb-why { grid-template-columns: 1fr; }
  .cb-voices-list, .cb-rules, .cb-screens--skill { grid-template-columns: 1fr; }
  .cb-doors-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cb-doors-list li:last-child { grid-column: 1 / -1; }
  .cb-doors-list li:last-child img { aspect-ratio: 2 / 1; }
}

/* faces in the generic Par card are round stickers, as in the kit */
.cb-skill .pil-ui-faces img { border-radius: 50%; border: 2px solid var(--pil-ink); background: var(--pil-paper); object-fit: cover; object-position: 50% 0; }

.external-mark{display:inline-block;font:400 12px var(--font-body);vertical-align:top;margin-left:5px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.position-framing{margin:24px 0 0;padding:19px 0;border-block:1px solid var(--border-strong);font:400 27px/1.2 var(--font-display)}.position-note{font-size:14px;color:var(--text-muted);margin:0 0 14px}@media(max-width:760px){.position-framing{font-size:25px}}

/* The home page’s leaf-green band, with its paper foreground. */
:root { --leaf: #1c4b30; --on-leaf: #f7f0e1; }
.hp-start { background: var(--leaf); color: var(--on-leaf); width: 100%; margin-inline: 0; padding: clamp(48px, 6.5vw, 96px) max(var(--gutter), calc((100vw - var(--wrap)) / 2)); border-top: 0; }
.hp-start h2 { color: inherit; }
.hp-start .pil-key { color: inherit; }
.hp-start .cb-now, .hp-start .pg-close-copy { color: inherit; max-width: 44ch; margin-top: 20px; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.45; }
.hp-start :focus-visible { outline-color: var(--on-leaf); }
.hp-start .pg-back { color: inherit; }

.cb-example { max-width: 48ch; margin-top: 24px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; }