/* Report-style site: every page except the home is one chapter of the SAFE SQUARE service guide, or its front page
   (/help/, which also carries the contents). Each chapter opens on a night cover like the home: the question it
   answers, typed by the AI and approved by the expert, its reviewed answer, and figure 1 drawn as that answer. The
   chapter sits on paper across the home's 1264px wrap with numbered sections, and ends with the guide as a track and
   the previous and next chapters. About carries the co-writing scene; Contact keeps the one contact action.
   Markup comes from scripts/dossier.mjs; loaded after site.css on every page except the home. */

:root {
  --desk: #ECEEF0;
  --sheet: #FFFFFF;
  --sheet-max: 1120px;
  --sheet-pad: 64px;
  --rail: 76px;
  --box: var(--ink-950);
  --cell: var(--ink-150);
}

html:lang(ko) { --doc-page-word: "쪽"; }

.doc-code { color: var(--cyan-500); font: 500 12.5px/1.4 var(--font-mono); letter-spacing: .02em; white-space: nowrap; }

/* Figure 1 on a plate (the v2 cover resets the frame and draws it in light on the night). */
.doc-plate {
  align-self: start; margin-top: 44px; padding: 24px 24px 18px; border: 1px solid var(--cell); border-radius: 2px;
  background-color: var(--sheet);
  background-image: radial-gradient(rgba(11, 12, 14, .065) 1px, transparent 1.2px); background-size: 22px 22px;
}
.doc-plate svg { max-width: 420px; margin-inline: auto; }
.doc-plate figcaption { margin: 18px -24px -18px; padding: 12px 24px 14px; border-top: 1px solid var(--cell); background: var(--sheet); color: var(--ink-600); font-size: 13.5px; line-height: 1.65; }

/* Figure numbers run through the chapter: 그림 1, 그림 2 … */
.core-plate .core-map-caption::before {
  counter-increment: fig; content: var(--doc-fig) counter(fig);
  margin-right: .75em; color: var(--ink-950); font-weight: 600;
}

/* Research: the five core areas around people and AI, a numbered plate drawn in ink.
   Markup comes from scripts/home-diagrams/templates/hero.html via {{fn:heroFigure}}. */
.core-plate {
  padding: 20px 20px 0; border: 1px solid var(--cell); border-radius: 2px; background-color: var(--sheet);
  background-image: radial-gradient(rgba(11, 12, 14, .065) 1px, transparent 1.2px); background-size: 22px 22px;
}
.core-plate .scene-core-areas { margin: 0; }
.core-plate .figure-art { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 12px 0 0; container-type: inline-size; }
.core-plate .core-map { position: relative; width: min(100%, 640px); margin-inline: auto; aspect-ratio: 600 / 560; flex-shrink: 0; container-type: inline-size; }
.core-plate .core-map::before { content: ''; position: absolute; inset: 16% 12%; background: radial-gradient(ellipse, rgba(46, 140, 140, .08), transparent 68%); pointer-events: none; }
.core-plate .core-connections { position: absolute; inset: 0; width: 100%; height: 100%; }
.core-plate .core-connections > circle:first-child { stroke: var(--ink-300); }
.core-plate .core-connections g[stroke] { stroke: var(--ink-400); }
.core-plate .core-connections g[fill] { fill: var(--cyan-500); }
.core-plate .core-area { position: absolute; padding: 2.2cqw; text-align: left; }
.core-plate .core-area::before { content: ''; display: block; width: 22px; height: 1px; margin-bottom: 10px; background: var(--cyan-500); }
.core-plate .core-area-name { display: block; margin-bottom: 7px; color: var(--cyan-600); font: 500 3.3cqw/1.2 var(--font-mono); letter-spacing: .07em; }
.core-plate .core-area-title { display: block; color: var(--ink-950); font: 500 2.25cqw/1.4 var(--font-sans); }
.core-plate .core-area p { margin: 7px 0 0; color: var(--ink-500); font: 400 2.15cqw/1.6 var(--font-sans); word-break: normal; overflow-wrap: anywhere; }
html:lang(ko) .core-plate .core-area p { word-break: keep-all; }
.core-plate .core-collab { left: 33.333%; top: 2.143%; width: 33.333%; height: 25%; text-align: center; }
.core-plate .core-collab::before { margin-inline: auto; }
.core-plate .core-intel { left: 68.667%; top: 29.643%; width: 30.333%; height: 30%; }
.core-plate .core-knowhow { left: 54%; top: 70.357%; width: 35%; height: 28%; }
.core-plate .core-exploit { left: 11%; top: 70.357%; width: 35%; height: 28%; }
.core-plate .core-agent { left: 1%; top: 29.643%; width: 30.333%; height: 30%; }
.core-plate .core-users { position: absolute; left: 36%; top: 35%; width: 28%; height: 30%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5cqw; color: var(--ink-950); text-align: center; }
.core-plate .core-user-name { font: 500 3.5cqw/1.3 var(--font-mono); letter-spacing: .06em; }
.core-plate .core-plus { display: block; margin-block: 5px; color: var(--cyan-500); }
.core-plate .core-map-caption {
  margin: 8px -20px 0; padding: 12px 20px 14px; border-top: 1px solid var(--cell); background: var(--sheet);
  color: var(--ink-600); font: 400 13.5px/1.6 var(--font-sans); letter-spacing: 0; text-align: left;
}
@media (prefers-reduced-motion: reduce) { .core-plate .dgm-pulse { display: none; } }

/* ---------- Review grammar: the AI proposes in cyan, the expert decides in ink ---------- */
/* Presence in the cover's running header: who is on this document. The state shows only while they act. */
.cw-people { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; color: var(--ink-700); font-size: 13px; }
.cw-person { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; transition: opacity .25s; }
.cw-dot { font-size: 9px; line-height: 1; }
.cw-person--human .cw-dot { color: var(--ink-950); }
.cw-person--ai, .cw-person--ai .cw-dot { color: var(--cyan-600); }
.cw-state { display: none; color: var(--ink-500); }
.is-live .cw-person { opacity: .45; }
.is-live .cw-person.is-active { opacity: 1; }
.is-live .cw-person.is-active .cw-state { display: inline; }
.is-live .cw-person.is-active .cw-dot { animation: cw-beat 1s ease-in-out infinite; }
@keyframes cw-beat { 50% { opacity: .3; } }

/* The expert's review mark on a chapter's question. */

.doc-review { color: var(--ink-700); font-size: 12px; white-space: nowrap; }
.doc-review span { font-size: 9px; vertical-align: 1px; }

/* Typed letters and carets, shared by the cover scene and the chapter question. */
.cw-ch { transition: color .35s, background-color .35s, text-decoration-color .35s; }
.cw-ch.is-off { opacity: 0; }
.cw-ch.is-sug {
  color: var(--cyan-600); background: var(--cyan-50);
  text-decoration: underline 2px var(--cyan-400); text-underline-offset: .14em; text-decoration-skip-ink: none;
}
.cw-ch.is-del { color: var(--cyan-600); text-decoration: line-through 2px var(--cyan-500); }
.cw-ch.is-rej { color: var(--ink-400); background: transparent; text-decoration: line-through 2px var(--ink-400); }
.cw-caret {
  --c: var(--ink-950);
  position: absolute; left: 0; top: 0; z-index: 2; width: 2px; height: 1em; border-radius: 1px;
  background: var(--c); pointer-events: none;
  transition: transform .34s cubic-bezier(.2, .7, .2, 1), height .2s, opacity .25s;
}
.cw-caret--ai { --c: var(--cyan-500); }
.cw-caret.is-hidden { opacity: 0; }
.cw-caret.is-jump { transition: opacity .25s; }
.cw-flag {
  position: absolute; left: 0; bottom: 100%; margin-bottom: 3px; padding: 2px 6px 3px;
  border-radius: 3px 3px 3px 0; background: var(--c); color: var(--paper);
  font: 600 11.5px/1.2 var(--font-sans); letter-spacing: 0; white-space: nowrap; transition: opacity .2s;
}
.cw-caret.is-quiet .cw-flag { opacity: 0; }
.is-waiting { visibility: hidden; }

/* Before site.js prepares the chapter moment, keep the question and figure from flashing; appear anyway if it never runs. */
.boot .doc-qa :is(.doc-qa-text, .doc-review, .doc-qa-a), .boot .doc-plate :is(svg, figcaption) { visibility: hidden; animation: boot-failsafe 0s 2.4s forwards; }
@media (prefers-reduced-motion: reduce) {
  .boot .doc-qa :is(.doc-qa-text, .doc-review, .doc-qa-a), .boot .doc-plate :is(svg, figcaption) { visibility: visible; animation: none; }
  .is-live .cw-person.is-active .cw-dot { animation: none; }
}

/* ---------- About: the value line is written in the document ---------- */
/* h1 and its sub, then the co-written line across the sheet; below it the body text and document details on the
   left, the review record and figure 1 on the right. Without script or with reduced motion the finished page shows. */
.hero--cowrite .hero-in {
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  grid-template-areas: "crumbs crumbs" "head head" "after side";
  column-gap: 64px; row-gap: 0; align-items: start;
}
.hero--cowrite .crumbs { grid-area: crumbs; }
.hero--cowrite .cw-head { grid-area: head; margin-bottom: 40px; }
.hero--cowrite .cw-stage { position: relative; margin-top: 28px; }
.hero--cowrite .hero-value.cw-title {
  margin-top: 0; max-width: none; color: var(--ink-950);
  font: 500 clamp(24px, 2.45vw, 34px)/1.38 var(--font-display); letter-spacing: -.02em;
}
html:lang(ja) .hero--cowrite .hero-value.cw-title { font-size: clamp(22px, 2.25vw, 31px); line-height: 1.5; letter-spacing: 0; }
.hero--cowrite .cw-after { grid-area: after; min-width: 0; transition: opacity .6s cubic-bezier(.2, .7, .2, 1), filter .6s; }
.hero--cowrite .cw-after .hero-text { margin-top: 0; }
/* While the line is being written, the rest of the opening reads as a faded draft; it settles to ink when the line is done. */
.hero--cowrite .cw-after.is-waiting { visibility: visible; opacity: .4; filter: grayscale(1); }
.hero--cowrite .cw-side { grid-area: side; min-width: 0; display: grid; gap: 28px; }
.hero--cowrite .cw-side .doc-plate { margin-top: 0; }
.cw-ins { display: inline-block; vertical-align: top; white-space: pre; }
.cw-ins[hidden] { display: none; }

/* The review record: the page's revision table, ruled like the document details. */
.doc-record { border: 1px solid var(--box); border-radius: 2px; background: var(--sheet); }
.doc-record-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 37px; padding: 0 6px 0 14px; border-bottom: 1px solid var(--box); }
.doc-record-title { color: var(--ink-950); font: 600 12.5px/1.4 var(--font-display); }
.cw-replay {
  min-height: 27px; padding: 0 10px; border: 1px solid var(--ink-150); border-radius: 3px;
  background: var(--sheet); color: var(--ink-700); font: 500 12.5px/1 var(--font-sans); cursor: pointer; transition: border-color .15s, color .15s;
}
.cw-replay:hover { border-color: var(--ink-500); color: var(--ink-950); }
.doc-record-table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.5; }
.doc-record-table th { padding: 8px 12px 7px 14px; border-bottom: 1px solid var(--cell); color: var(--ink-500); font-size: 12px; font-weight: 400; text-align: left; }
.doc-record-table td { padding: 10px 12px 11px 14px; border-top: 1px solid var(--cell); color: var(--ink-600); vertical-align: top; }
.doc-record-table th + th, .doc-record-table td + td { padding-left: 12px; border-left: 1px solid var(--cell); }
.doc-record-table th:first-child, .doc-record-table td:first-child { width: 7.2em; white-space: nowrap; }
.doc-record-table th:nth-child(2), .doc-record-table td:nth-child(2) { width: 4.6em; white-space: nowrap; }
html:lang(en) .doc-record-table :is(th, td):nth-child(2) { width: 6.4em; }
.doc-record-table tbody tr:first-child td { border-top: 0; }
.doc-record-table td:first-child, .doc-record-table td:nth-child(2) { color: var(--ink-950); font-weight: 500; }
.cw-mark { display: inline-block; width: 1.35em; font-size: 10px; vertical-align: 1px; }
.cw-entry--ai td:first-child, .cw-entry--ai td:nth-child(2), .cw-entry--ai .cw-mark { color: var(--cyan-600); }
.cw-entry--ok .cw-mark { color: var(--ink-950); }
.cw-entry--no .cw-mark, .cw-entry--no td:nth-child(2) { color: var(--ink-500); }
.doc-record-note { padding: 10px 14px 12px; border-top: 1px solid var(--box); color: var(--ink-500); font-size: 13px; line-height: 1.6; }

/* Before site.js prepares the scene, keep the finished text from flashing; appear anyway if it never runs. */
.boot [data-cowrite] :is(.cw-title, .cw-after, .cw-entry) { visibility: hidden; animation: boot-failsafe 0s 2.4s forwards; }
@media (prefers-reduced-motion: reduce) {
  .boot [data-cowrite] :is(.cw-title, .cw-after, .cw-entry) { visibility: visible; animation: none; }
}

/* ---------- Contents on /help/ ---------- */
.toc { display: grid; gap: 40px; max-width: 52em; }
.toc--compact { gap: 28px; }
.toc--compact .toc-list a { padding-block: 10px 11px; }
.toc-group-title { padding-bottom: 10px; border-bottom: 1.5px solid var(--ink-950); font: 600 15px/1.4 var(--font-display); }
.toc-list a {
  display: grid; grid-template-columns: 8.4em minmax(0, max-content) minmax(24px, 1fr) 2.2em;
  grid-template-areas: "code name leader page" ". q q .";
  column-gap: 14px; align-items: baseline; padding: 13px 0 14px; border-bottom: 1px solid var(--ink-100);
  color: inherit; text-decoration: none;
}
.toc-code { grid-area: code; color: var(--cyan-500); font: 500 12.5px/1.5 var(--font-mono); letter-spacing: .02em; }
.toc-name { grid-area: name; font: 500 16.5px/1.45 var(--font-display); letter-spacing: -.005em; }
.toc-leader { grid-area: leader; align-self: end; margin-bottom: .45em; border-bottom: 1.5px dotted var(--ink-300); }
.toc-page { grid-area: page; text-align: right; font: 600 15px/1.45 var(--font-display); font-variant-numeric: tabular-nums; }
.toc-q { grid-area: q; margin-top: 3px; color: var(--ink-500); font-size: 14px; line-height: 1.6; }
.toc-item--sub .toc-name { padding-left: 1.2em; color: var(--ink-700); font-weight: 400; font-size: 15.5px; }
.toc-item--sub .toc-code { color: color-mix(in srgb, var(--cyan-500) 75%, var(--ink-400)); }
.toc-list a:hover .toc-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.toc-list a:hover .toc-leader { border-bottom-color: var(--ink-600); }
.toc-list a:focus-visible { outline-offset: 2px; }

/* ---------- Narrower screens ---------- */

@media (max-width: 1080px) {
  :root { --sheet-pad: 44px; --rail: 60px; }
  .doc-plate { margin-top: 0; max-width: 620px; }
  .hero--cowrite .hero-in { grid-template-areas: "crumbs" "head" "after" "side"; }
  .hero--cowrite .cw-head { margin-bottom: 32px; }
  .hero--cowrite .cw-side { margin-top: 44px; max-width: 620px; }
}
@media (max-width: 760px) {
  :root { --sheet-pad: 20px; --rail: 0px; }
  .doc-plate { padding: 16px 16px 14px; }
  .doc-plate figcaption { margin: 14px -16px -14px; padding: 10px 16px 12px; }
  .toc-list a { grid-template-columns: minmax(0, 1fr) 2.2em; grid-template-areas: "code page" "name page" "q q"; row-gap: 2px; }
  .toc-leader { display: none; }
  .toc-item--sub .toc-name { padding-left: 0; }
  .toc-item--sub a { padding-left: 14px; }
  .sec .fig--scroll figcaption::before { content: none; counter-increment: none; }
  .core-plate { padding: 12px 16px 0; }
  .core-plate .core-map-caption { margin-inline: -16px; padding-inline: 16px; }
  .doc-record-table td, .doc-record-table th { padding-inline: 10px; }
  .doc-record-table th:first-child, .doc-record-table td:first-child { width: 6.4em; padding-left: 12px; }
}
@media (max-width: 640px) {
  .core-plate .figure-art { gap: 22px; }
  .core-plate .core-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; aspect-ratio: auto; }
  .core-plate .core-map::before, .core-plate .core-connections { display: none; }
  .core-plate .core-users, .core-plate .core-area { position: relative; inset: auto; width: auto; height: auto; padding: 0; }
  .core-plate .core-users { grid-column: 1 / -1; padding: 30px 12px; margin-bottom: 6px; border-block: 1px solid var(--cell); }
  .core-plate .core-area, .core-plate .core-collab { text-align: left; }
  .core-plate .core-collab::before { margin-inline: 0; }
  .core-plate .core-user-name { font-size: 20px; }
  .core-plate .core-plus { display: inline; margin-inline: 8px; }
  .core-plate .core-area-name { font-size: 18px; }
  .core-plate .core-area-title { font-size: 13px; }
  .core-plate .core-area p { font-size: 12px; }
  .core-plate .core-agent { grid-column: 1 / -1; }
}

/* ---------- Print: an A4 appendix. The running header and footer move into the page margins. ---------- */
@page {
  size: A4; margin: 20mm 16mm 20mm;
  @top-left { font: 8.5pt "Space Grotesk", "Pretendard", sans-serif; color: #2E8C8C; }
  @top-center { font: 8.5pt "Space Grotesk", "Pretendard", sans-serif; color: #565B65; }
  @top-right { font: 8.5pt "Space Grotesk", "Pretendard", sans-serif; color: #236E6F; }
  @bottom-left { font: 8.5pt "Space Grotesk", "Pretendard", sans-serif; color: #565B65; }
  @bottom-center { font: 8.5pt "Space Grotesk", "Pretendard", sans-serif; color: #565B65; }
  @bottom-right { font: 8.5pt "Space Grotesk", "Pretendard", sans-serif; color: #0B0C0E; }
}
@media print {
  :root { --sheet-pad: 0px; --rail: 44px; }
  body { background: #fff; font-size: 10.5pt; }
  .site-head, .site-foot, .skip-link, .actions, .closing-actions .btn, .m-menu { display: none !important; }
  .sec-head h2 { break-after: avoid; }
  .row, .toc-list li, .fig, .cols > *, .pair > *, .plan, .flow > li { break-inside: avoid; }
  .sec .fig--scroll svg { display: block !important; }
  .sec .fig--scroll { padding: 16px; border: 1px solid var(--cell); }
  a { text-decoration: none; }
  .boot .hero-visual { visibility: visible; animation: none; }
  .doc-plate, .core-plate, .doc-record { break-inside: avoid; }
  .core-plate .core-area p { display: none; }
  .cw-caret, .cw-replay { display: none !important; }
}

/* =====================================================================================================================
   Chapter v2: the wide chapter style. Enabled per path prefix by "v2" in src/dossier.json; scripts/dossier.mjs then
   marks the page <body class="doc-v2">, the main element .doc-chapter and the hero .hero--chapter. Everything below is
   scoped to body.doc-v2, so sheet-style chapters are untouched.
   The idea: the home's night opens the chapter (a full-bleed dark cover with the page's figure drawn in light), then
   the chapter itself sits on paper across the same 1264px wrap as the home. The document devices (chapter code, the
   classification stamp, section numbers, the review mark, the page count) stay, as precise accents rather than a frame.
   ===================================================================================================================== */
body.doc-v2 { background: var(--paper); }
.doc-v2 .site-head.is-light::before { background: color-mix(in srgb, var(--paper) 94%, transparent); }
.doc-v2 .site-head.is-light { border-bottom-color: var(--ink-100); }
.doc-v2 .doc-chapter { counter-reset: sec fig; }
.doc-v2 .doc-chapter .doc-code { color: var(--cyan-600); }

/* ---------- The night cover ---------- */
.doc-v2 .hero--chapter { overflow: hidden; background: var(--ink-1000); color: var(--ink-150); border-bottom: 0; }
/* the home's night canvas, as a still: a fine dot field that thickens toward the figure, and a low cyan glow */
.doc-v2 .hero--chapter::before {
  background-image: radial-gradient(rgba(255, 255, 255, .085) 1px, transparent 1.3px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 78% 55%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 90% at 78% 55%, #000 10%, transparent 75%);
}
.doc-v2 .hero--chapter::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 38% 46% at 76% 56%, rgba(127, 227, 222, .09), transparent 70%);
}
.doc-v2 .hero--chapter .hero-in {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr;
  gap: 0 72px; align-items: center; min-height: calc(88vh - 64px); min-height: calc(88svh - 64px); padding-block: 64px 88px;
}
.doc-v2 .hero--chapter .hero-in > div:not(.doc-plate) { grid-row: 3; align-self: center; }

.doc-v2 .hero--chapter .crumbs { grid-row: 2; margin-bottom: 36px; color: var(--ink-500); font-size: 12.5px; }
.doc-v2 .hero--chapter .hero-title { color: var(--paper); font-size: clamp(38px, 4.6vw, 72px); line-height: 1.06; letter-spacing: -.03em; }
html:lang(ko) .doc-v2 .hero--chapter .hero-title, html:lang(ja) .doc-v2 .hero--chapter .hero-title { line-height: 1.16; letter-spacing: -.02em; }
html:lang(ja) .doc-v2 .hero--chapter .hero-title { font-size: clamp(34px, 4vw, 62px); word-break: auto-phrase; }
.doc-v2 .hero--chapter .hero-sub { margin-top: 18px; color: var(--ink-400); font-size: 17px; }
.doc-v2 .hero--chapter .hero-value { margin-top: 40px; max-width: 26em; color: var(--ink-50); font: 500 clamp(20px, 1.7vw, 24px)/1.5 var(--font-display); letter-spacing: -.012em; }
.doc-v2 .hero--chapter .hero-text { margin-top: 16px; max-width: 36em; color: var(--ink-300); font-size: 17px; line-height: 1.8; }

/* Question and answer: the question the chapter answers, typed by the AI and approved by the expert (● 검토), then its
   reviewed answer under a cyan rule. Figure 1 on the right draws itself as that answer. */
.doc-v2 .hero--chapter .doc-qa { margin-top: 44px; max-width: 40em; }
.doc-v2 .hero--chapter .doc-qa-q { display: grid; grid-template-columns: 26px minmax(0, max-content) auto; justify-content: start; align-items: baseline; margin: 0; }
.doc-v2 .hero--chapter .doc-qa-mark { color: var(--cyan-glow); font: 500 15px/1 var(--font-mono); }
.doc-v2 .hero--chapter .doc-qa-text {
  position: relative; display: block; color: var(--paper);
  font: 500 clamp(19px, 1.45vw, 21px)/1.45 var(--font-display); letter-spacing: -.01em; text-wrap: pretty;
}
.doc-v2 .hero--chapter .doc-review { margin-left: 18px; color: var(--ink-300); font-size: 12.5px; }
.doc-v2 .hero--chapter .doc-qa-a {
  margin: 14px 0 0 26px; padding: 2px 0 2px 16px; max-width: 34em;
  border-left: 2px solid color-mix(in srgb, var(--cyan-glow) 60%, transparent);
  color: var(--ink-100); font-size: 16.5px; line-height: 1.7; text-wrap: pretty;
}
html:lang(ja) .doc-v2 .hero--chapter :is(.doc-qa-text, .doc-qa-a) { word-break: auto-phrase; }
.doc-v2 .hero--chapter .cw-ch.is-sug { color: var(--cyan-glow); background: rgba(127, 227, 222, .12); text-decoration-color: var(--cyan-glow); }
.doc-v2 .hero--chapter .cw-caret--ai { --c: var(--cyan-glow); }
.doc-v2 .hero--chapter .cw-flag { color: var(--ink-1000); }

/* In this chapter: the chapter's own sections as an index row, each with its number, linking to its heading. */
.doc-v2 .hero--chapter .doc-toc { margin-top: 44px; max-width: 44em; }
.doc-v2 .hero--chapter .doc-toc-title { margin: 0 0 12px; color: var(--ink-400); font-size: 13px; }
.doc-v2 .hero--chapter .doc-toc ol { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.doc-v2 .hero--chapter .doc-toc a {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 12px 0 4px;
  border-top: 1px solid var(--ink-700); color: var(--ink-150); text-decoration: none;
  transition: border-color .2s, color .2s;
}
.doc-v2 .hero--chapter .doc-toc-n { color: var(--cyan-glow); font: 500 12.5px/1.2 var(--font-mono); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.doc-v2 .hero--chapter .doc-toc-name { font-size: 15px; line-height: 1.45; text-wrap: balance; }
.doc-v2 .hero--chapter .doc-toc a:hover { border-top-color: var(--cyan-glow); color: var(--paper); }
.doc-v2 .hero--chapter .doc-toc a:focus-visible { outline: 2px solid var(--cyan-glow); outline-offset: 4px; border-radius: 2px; }

/* Figure 1: drawn light on the night, large, with its caption under a hairline. */
.doc-v2 .hero--chapter .doc-plate {
  grid-column: 2; grid-row: 3; align-self: center; margin: 0; padding: 0; border: 0; background: none; max-width: none;
}
.doc-v2 .hero--chapter .doc-plate .fig { max-width: none; }
/* the drawings keep empty margins inside their viewBox, so the SVG runs past the column to fill it with the drawing */
.doc-v2 .hero--chapter .doc-plate svg { width: calc(100% + 120px); max-width: none; margin-inline: -60px; }
.doc-v2 .hero--chapter .doc-plate figcaption {
  margin: 28px 0 0; padding: 14px 0 0; border-top: 1px solid var(--ink-800); background: none;
  color: var(--ink-400); font-size: 14px; line-height: 1.65;
}
.doc-v2 .doc-chapter .fig figcaption::before {
  counter-increment: fig; content: var(--doc-fig) counter(fig); margin-right: .75em; color: var(--ink-950); font-weight: 600;
}
.doc-v2 .hero--chapter .fig figcaption::before { color: var(--ink-150); }

/* the fade on sideways-scrolling figures (phones) animates this length */
@property --edge { syntax: '<length>'; inherits: false; initial-value: 44px; }

/* ---------- The chapter on paper ---------- */
.doc-v2 .doc-chapter .sec { padding-block: 112px; border-top: 1px solid var(--ink-100); background: var(--paper); counter-increment: sec; }
.doc-v2 .doc-chapter .hero + .sec { border-top: 0; }
.doc-v2 .doc-chapter .sec-in { gap: 48px 32px; }
.doc-v2 .doc-chapter .sec-head h2 { font-size: clamp(28px, 2.5vw, 36px); line-height: 1.24; letter-spacing: -.022em; }
.doc-v2 .doc-chapter .sec-head h2::before {
  content: var(--doc-ch) counter(sec); display: block; margin-bottom: 16px;
  color: var(--cyan-600); font: 500 13px/1.4 var(--font-mono); letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.doc-v2 .doc-chapter .sec-intro { margin-top: 18px; max-width: 32em; color: var(--ink-600); font-size: 16.5px; line-height: 1.8; }
.doc-v2 .doc-chapter .sec-body > * + * { margin-top: 40px; }
.doc-v2 .doc-chapter .sec-body > .lead + p, .doc-v2 .doc-chapter .sec-body > p + p { margin-top: 18px; }
.doc-v2 .doc-chapter .lead { max-width: 30em; color: var(--ink-950); font-size: clamp(20px, 1.8vw, 24px); line-height: 1.55; }
.doc-v2 .doc-chapter .sec-body > p:not(.lead):not(.note) { max-width: 42em; color: var(--ink-700); font-size: 17px; line-height: 1.85; }
.doc-v2 .doc-chapter .note { max-width: 50em; padding-left: 18px; border-left-color: var(--ink-300); color: var(--ink-600); font-size: 15px; line-height: 1.8; }

/* Rows: a ruled list that sits on the page grid. In the side column they split 3 : 5, across the page 4 : 8. */
.doc-v2 .doc-chapter .rows { border-top: 1.5px solid var(--ink-950); }
.doc-v2 .doc-chapter .row {
  grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 32px; row-gap: 8px;
  padding: 26px 0 28px; border-bottom: 1px solid var(--ink-100);
}
.doc-v2 .doc-chapter .row-term { grid-column: span 3; gap: 6px; }
.doc-v2 .doc-chapter .row-text { grid-column: span 5; }
.doc-v2 .doc-chapter .sec--stack .row { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.doc-v2 .doc-chapter .sec--stack .row-term { grid-column: span 4; }
.doc-v2 .doc-chapter .sec--stack .row-text { grid-column: span 8; }
.doc-v2 .doc-chapter .row .code { color: var(--cyan-600); font-size: 12.5px; letter-spacing: .06em; }
.doc-v2 .doc-chapter .row-name { color: var(--ink-950); font-size: 18px; }
.doc-v2 .doc-chapter .row-text { color: var(--ink-700); font-size: 16.5px; line-height: 1.8; }
.doc-v2 .doc-chapter a.row .row-name::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 10px; border-top: 1.5px solid var(--ink-400); border-right: 1.5px solid var(--ink-400); transform: rotate(45deg) translateY(-2px); transition: border-color .15s, transform .15s; }
.doc-v2 .doc-chapter a.row:hover .row-name::after { border-color: var(--ink-950); transform: rotate(45deg) translate(2px, -4px); }

/* Section figures: one wide plate across the page, the drawing scaled up so its labels read. */
.doc-v2 .doc-chapter .sec .fig {
  padding: clamp(28px, 4.2vw, 64px); border: 1px solid var(--ink-100); border-radius: 6px;
  background-color: var(--paper); background-image: radial-gradient(rgba(11, 12, 14, .06) 1px, transparent 1.2px); background-size: 24px 24px;
}
.doc-v2 .doc-chapter .sec .fig svg { max-width: min(100%, 940px); }
.doc-v2 .doc-chapter .sec .fig figcaption { margin: 28px 0 -6px; max-width: 52em; color: var(--ink-600); font-size: 14.5px; }

/* Care plans: four cards across the page; Enterprise keeps its cyan rule. */
.doc-v2 .doc-chapter .plans { border-radius: 6px; background: var(--ink-150); border-color: var(--ink-150); }
.doc-v2 .doc-chapter .plan { padding: 34px 30px 38px; gap: 10px; }
.doc-v2 .doc-chapter .plan-name { font-size: 30px; }
.doc-v2 .doc-chapter .plan-tag { color: var(--ink-500); font-size: 12.5px; }
.doc-v2 .doc-chapter .plan-text { margin-top: 18px; color: var(--ink-700); font-size: 16px; line-height: 1.75; }
.doc-v2 .doc-chapter .plan { display: flex; flex-direction: column; }
/* when each plan fits: the same weight for all four, pinned to the card's foot */
.doc-v2 .doc-chapter .plan-fit { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--ink-100); color: var(--ink-800); font-size: 14.5px; line-height: 1.65; text-wrap: pretty; }
.doc-v2 .doc-chapter .plan-text + .plan-fit { margin-top: 22px; }
.doc-v2 .doc-chapter .plan-fit span { display: block; margin-bottom: 6px; color: var(--cyan-600); font-size: 12.5px; font-weight: 600; }
.doc-v2 .doc-chapter .sec--stack .cols { max-width: 52em; }
.doc-v2 .doc-chapter .cols > * { padding-top: 22px; border-top-color: var(--ink-200); }
.doc-v2 .doc-chapter .cols h3 { font-size: 19px; }
.doc-v2 .doc-chapter .cols p { color: var(--ink-700); font-size: 16.5px; }

/* ---------- The end of the chapter ---------- */
/* A closing statement (Sovereign Security AI, Pay It Forward): the chapter's last word, set large on paper after a
   short cyan rule, with its one quiet link below. It carries no buttons: contact lives on its own page. */
.doc-v2 .doc-chapter .closing { padding-block: 128px 136px; border-top: 1px solid var(--ink-100); background: var(--paper); }
.doc-v2 .doc-chapter .closing-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 32px; align-items: start; }
.doc-v2 .doc-chapter .closing-in > div:first-child { grid-column: 1 / span 9; }
.doc-v2 .doc-chapter .closing h2 { max-width: 20em; color: var(--ink-950); font-size: clamp(30px, 3.3vw, 48px); line-height: 1.22; letter-spacing: -.025em; text-wrap: balance; }
html:lang(ja) .doc-v2 .doc-chapter .closing h2 { word-break: auto-phrase; line-height: 1.34; letter-spacing: -.01em; }
.doc-v2 .doc-chapter .closing h2::before { content: ''; display: block; width: 44px; height: 2px; margin-bottom: 32px; background: var(--cyan-500); }
.doc-v2 .doc-chapter .closing p { margin-top: 28px; max-width: 40em; color: var(--ink-700); font-size: 17px; line-height: 1.85; }
.doc-v2 .doc-chapter .closing-actions { grid-column: 1 / -1; justify-content: flex-start; margin-top: 36px; }
.doc-v2 .doc-chapter .closing-actions .text-link { font-size: 16px; }

/* a small index mark: three rules of falling length, like the lines of a contents page */
.doc-v2 .doc-run-toc-icon { position: relative; width: 14px; height: 11px; flex-shrink: 0;
  background: linear-gradient(currentColor, currentColor) 0 0 / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) 0 50% / 72% 1.5px no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 86% 1.5px no-repeat; }

/* Hangul and kana are not tracked out: the small mono labels switch to the sans in Korean and Japanese. */
html:is(:lang(ko), :lang(ja)) .doc-v2 .hero--chapter .crumbs { font-family: var(--font-sans); letter-spacing: 0; font-size: 13px; }

/* ---------- Narrower screens ---------- */
@media (max-width: 1180px) {
  .doc-v2 .hero--chapter .hero-in { column-gap: 48px; }
}
@media (max-width: 1080px) {
  .doc-v2 .hero--chapter .hero-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; min-height: 0; padding-block: 48px 72px; }
  .doc-v2 .hero--chapter .hero-in > div:not(.doc-plate) { grid-row: auto; }
  /* one column: the breadcrumb leads again (on desktop it sits in the second grid row) */
  .doc-v2 .hero--chapter .crumbs { grid-row: auto; }
  .doc-v2 .hero--chapter .doc-plate { grid-column: 1; grid-row: auto; margin-top: 56px; max-width: 560px; }
  .doc-v2 .hero--chapter .doc-plate svg { width: calc(100% + 80px); margin-inline: -40px; }
  .doc-v2 .doc-chapter .sec { padding-block: 88px; }
  .doc-v2 .doc-chapter .row, .doc-v2 .doc-chapter .sec--stack .row { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .doc-v2 .doc-chapter .row-term, .doc-v2 .doc-chapter .sec--stack .row-term { grid-column: span 4; }
  .doc-v2 .doc-chapter .row-text, .doc-v2 .doc-chapter .sec--stack .row-text { grid-column: span 8; }
  .doc-v2 .doc-chapter .closing-actions { align-items: flex-start; }
}
@media (max-width: 760px) {
  .doc-v2 .hero--chapter .hero-in { padding-top: 32px; }
  .doc-v2 .hero--chapter .crumbs { margin-bottom: 24px; }
  .doc-v2 .hero--chapter .hero-value { margin-top: 28px; }
  .doc-v2 .hero--chapter .hero-text { font-size: 16px; }
  .doc-v2 .hero--chapter .doc-qa { margin-top: 32px; }
  .doc-v2 .hero--chapter .doc-qa-q { grid-template-columns: 22px minmax(0, 1fr); }
  .doc-v2 .hero--chapter .doc-qa-text { font-size: 18px; }
  .doc-v2 .hero--chapter .doc-review { grid-column: 2; margin: 8px 0 0; }
  .doc-v2 .hero--chapter .doc-qa-a { margin-left: 22px; font-size: 16px; }
  .doc-v2 .hero--chapter .doc-toc { margin-top: 32px; }
  .doc-v2 .hero--chapter .doc-toc ol { grid-template-columns: minmax(0, 1fr); }
  .doc-v2 .hero--chapter .doc-toc a { flex-direction: row; align-items: baseline; gap: 14px; padding: 11px 0; }
  .doc-v2 .hero--chapter .doc-toc li:last-child a { border-bottom: 1px solid var(--ink-700); }
  .doc-v2 .hero--chapter .doc-plate { margin-top: 44px; }
  .doc-v2 .hero--chapter .doc-plate svg { width: calc(100% + 40px); margin-inline: -20px; }
  .doc-v2 .doc-chapter .sec { padding-block: 64px 72px; }
  .doc-v2 .doc-chapter .sec-in { gap: 28px; }
  .doc-v2 .doc-chapter .row, .doc-v2 .doc-chapter .sec--stack .row { grid-template-columns: minmax(0, 1fr); padding-block: 20px 22px; }
  .doc-v2 .doc-chapter .row-term, .doc-v2 .doc-chapter .row-text, .doc-v2 .doc-chapter .sec--stack .row-term, .doc-v2 .doc-chapter .sec--stack .row-text { grid-column: 1 / -1; }
  .doc-v2 .doc-chapter .row-text { font-size: 16px; }
  .doc-v2 .doc-chapter .sec-body > p:not(.lead):not(.note) { font-size: 16px; }
  .doc-v2 .doc-chapter .plan { padding: 26px 22px 28px; }
  /* Wide diagrams stay on phones at a readable size; the plate scrolls sideways instead of hiding the drawing. */
  .doc-v2 .doc-chapter .sec .fig--scroll { overflow-x: auto; overscroll-behavior-x: contain; padding: 20px 20px 18px; -webkit-overflow-scrolling: touch; }
  .doc-v2 .doc-chapter .sec .fig--scroll svg { display: block; width: var(--fig-min, 560px); max-width: none; margin: 0; }
  .doc-v2 .doc-chapter .sec .fig--scroll figcaption { position: sticky; left: 0; max-width: calc(100vw - 80px); margin-top: 16px; font-size: 14px; }
  .doc-v2 .doc-chapter .sec .fig--scroll figcaption::before { content: var(--doc-fig) counter(fig); counter-increment: fig; }
  /* more drawing lies to the right: the plate's right edge fades, and where scroll-driven animation is supported the
     fade lifts once the drawing has been scrolled to its end */
  .doc-v2 .doc-chapter .sec .fig--scroll {
    --edge: 44px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--edge)), rgba(0, 0, 0, .18));
    mask-image: linear-gradient(to right, #000 calc(100% - var(--edge)), rgba(0, 0, 0, .18));
  }
  @supports (animation-timeline: scroll()) {
    .doc-v2 .doc-chapter .sec .fig--scroll { animation: fig-edge linear both; animation-timeline: scroll(self inline); }
    @keyframes fig-edge { 0%, 85% { --edge: 44px; } 100% { --edge: 0px; } }
  }
  .doc-v2 .doc-chapter .closing { padding-block: 64px 72px; }
}

/* ---------- Print: the chapter as a clean document page ---------- */
@media print {
  .doc-v2 .hero--chapter { background: none; color: var(--ink-950); }
  .doc-v2 .hero--chapter::before, .doc-v2 .hero--chapter::after { display: none !important; }
  .doc-v2 .hero--chapter .hero-in { min-height: 0; padding-block: 0 24px; gap: 0 28px; }
  .doc-v2 .hero--chapter :is(.hero-title, .hero-value, .hero-sub, .hero-text) { color: var(--ink-950); }
  .doc-v2 .hero--chapter .hero-title { font-size: 30pt; }
  .doc-v2 .hero--chapter .crumbs, .doc-v2 .doc-chapter a.row .row-name::after { display: none; }
  .doc-v2 .hero--chapter .hero-in { display: block; }
  .doc-v2 .hero--chapter .doc-plate { margin-top: 20px; break-inside: avoid; }
  .doc-v2 .hero--chapter .doc-plate svg { width: 62%; margin-inline: auto; }
  .doc-v2 .hero--chapter .fig {
    --f-ink: var(--ink-950); --f-strong: var(--ink-700); --f-line: var(--ink-300); --f-faint: var(--ink-150);
    --f-muted: var(--ink-500); --f-fill: var(--paper); --f-soft: var(--ink-25);
    --f-accent: var(--cyan-500); --f-accent-text: var(--cyan-600); --f-accent-soft: rgba(46, 140, 140, .07); --f-tick: var(--cyan-400);
  }
  .doc-v2 .hero--chapter .doc-plate figcaption, .doc-v2 .hero--chapter .fig figcaption::before { color: var(--ink-700); }
  .doc-v2 .doc-chapter .sec { padding-block: 20px 24px; }
  .doc-v2 .doc-chapter .closing { display: block; padding-block: 24px; break-inside: avoid; }
  .doc-v2 .doc-chapter .sec-head { break-inside: avoid; break-after: avoid; }
  .doc-v2 .doc-chapter .sec-head h2::before { break-after: avoid; }
  .doc-v2 .doc-chapter .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); break-inside: avoid; }
  .doc-v2 .doc-chapter .plan { padding: 16px 14px 18px; }
  .doc-v2 .doc-chapter .plan-name { font-size: 16pt; }
  .doc-v2 .doc-chapter .plan-text { margin-top: 8px; font-size: 9.5pt; }
}

/* ---------- v2 chapter end: the guide as a track, then the previous and next chapters ---------- */
.doc-v2 .doc-end { background: var(--ink-25); border-top: 1px solid var(--ink-100); padding-block: 56px 0; }
.doc-v2 .doc-end-in { max-width: 1264px; margin: 0 auto; padding-inline: 32px; }
.doc-v2 .doc-end-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.doc-v2 .doc-end-where { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0; }
.doc-v2 .doc-end-guide { color: var(--ink-950); font: 600 17px/1.4 var(--font-display); letter-spacing: -.01em; }
.doc-v2 .doc-end-page { color: var(--ink-500); font-size: 14px; font-variant-numeric: tabular-nums; }
.doc-v2 .doc-end-toc {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 18px; border: 1px solid var(--ink-200); border-radius: 999px;
  background: var(--paper); color: var(--ink-900); font: 500 14px/1 var(--font-sans); text-decoration: none; transition: border-color .15s, background-color .15s, color .15s;
}
.doc-v2 .doc-end-toc:hover { border-color: var(--ink-950); background: var(--ink-950); color: var(--paper); }
.doc-v2 .doc-end-toc:focus-visible, .doc-v2 .doc-end-link:focus-visible { outline: 2px solid var(--cyan-400); outline-offset: 3px; }

/* the track: one tick per chapter, grouped; group names sit above their span */
.doc-v2 .doc-track { display: flex; gap: 14px; margin-top: 36px; }
/* a group is never narrower than its name, so short groups with long names (コラボレーション) are not cut */
.doc-v2 .doc-track-group { flex-basis: 0; min-width: min-content; }
.doc-v2 .doc-track-name { display: block; margin-bottom: 12px; color: var(--ink-400); font-size: 12.5px; line-height: 1.3; white-space: nowrap; }
.doc-v2 .doc-track-group.is-here .doc-track-name { color: var(--ink-950); font-weight: 600; }
.doc-v2 .doc-track-ticks { display: flex; height: 40px; border-bottom: 1px solid var(--ink-200); }
/* each chapter owns an equal slot (the hover target); its mark is a thin rule, like the graduations of a ruler */
.doc-v2 .doc-track-tick { position: relative; flex: 1 1 0; min-width: 6px; height: 100%; }
.doc-v2 .doc-track-tick::before {
  content: ''; position: absolute; left: 50%; bottom: 0; width: 1.5px; height: 12px; margin-left: -.75px;
  background: var(--ink-200); transition: height .18s, background-color .18s;
}
.doc-v2 .doc-track-tick.is-past::before { background: var(--ink-500); height: 16px; }
.doc-v2 .doc-track-tick.is-here::before { width: 2px; margin-left: -1px; height: 40px; background: var(--cyan-500); }
.doc-v2 .doc-track-tick.is-here::after {
  content: ''; position: absolute; left: 50%; top: -4px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
  background: var(--cyan-500); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan-500) 18%, transparent);
}
.doc-v2 .doc-track-tick:hover::before { height: 26px; background: var(--ink-950); }
.doc-v2 .doc-track-tick.is-here:hover::before { height: 40px; background: var(--cyan-600); }
.doc-v2 .doc-track-tip {
  position: absolute; bottom: calc(100% + 10px); left: 50%; z-index: 2; display: flex; align-items: baseline; gap: 10px; padding: 8px 12px;
  background: var(--ink-950); color: var(--paper); border-radius: 8px; font: 500 13.5px/1.3 var(--font-sans); white-space: nowrap;
  opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity .15s, transform .15s;
}
.doc-v2 .doc-track-tip .doc-code { color: var(--cyan-glow); font-size: 12px; }
.doc-v2 .doc-track-tick:not(.tip-end) .doc-track-tip { left: calc(50% - 14px); transform: translate(0, 4px); }
.doc-v2 .doc-track-tick.tip-end .doc-track-tip { left: auto; right: calc(50% - 14px); transform: translate(0, 4px); }
.doc-v2 .doc-track-tick:hover .doc-track-tip { opacity: 1; transform: translate(0, 0); }

/* previous and next: two large links, split by a hairline */
.doc-v2 .doc-end-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 44px; border-top: 1px solid var(--ink-100); }
.doc-v2 .doc-end-link { display: grid; gap: 6px; padding: 36px 0 48px; color: var(--ink-950); text-decoration: none; }
.doc-v2 .doc-end-link--prev { padding-right: 40px; }
.doc-v2 .doc-end-link--next { padding-left: 40px; border-left: 1px solid var(--ink-100); text-align: right; justify-items: end; }
.doc-v2 .doc-end-dir { color: var(--ink-500); font-size: 13px; font-weight: 600; }
.doc-v2 .doc-end-code { margin-top: 10px; color: var(--cyan-500); font: 500 13px/1.3 var(--font-mono); letter-spacing: .04em; }
.doc-v2 .doc-end-title { font: 600 clamp(24px, 2.6vw, 34px)/1.2 var(--font-display); letter-spacing: -.02em; text-wrap: balance;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 8px; transition: text-decoration-color .15s; }
.doc-v2 .doc-end-link:hover .doc-end-title { text-decoration-color: currentColor; }
.doc-v2 .doc-end-link.is-empty { pointer-events: none; }
html:lang(ja) .doc-v2 .doc-end-title { word-break: auto-phrase; }

@media (max-width: 760px) {
  .doc-v2 .doc-end { padding-top: 40px; }
  .doc-v2 .doc-end-in { padding-inline: 20px; }
  .doc-v2 .doc-track { gap: 6px; margin-top: 28px; }
  .doc-v2 .doc-track-name { display: none; }
  .doc-v2 .doc-track-group { min-width: 0; }
  .doc-v2 .doc-track { margin-top: 36px; }
  .doc-v2 .doc-track-ticks { height: 30px; }
  .doc-v2 .doc-track-tick { min-width: 0; }
  .doc-v2 .doc-track-tick.is-here::before, .doc-v2 .doc-track-tick.is-here:hover::before { height: 30px; }
  .doc-v2 .doc-track-tip { display: none; }
  .doc-v2 .doc-end-links { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .doc-v2 .doc-end-link { padding: 26px 0 30px; }
  .doc-v2 .doc-end-link--prev { padding-right: 0; }
  .doc-v2 .doc-end-link--next { order: -1; padding-left: 0; border-left: 0; border-bottom: 1px solid var(--ink-100); text-align: left; justify-items: start; }
  .doc-v2 .doc-end-link.is-empty { display: none; }
}
@media print { .doc-v2 .doc-end { display: none !important; } }

/* =====================================================================================================================
   v2 page types: the chapters whose content has its own shape.
   ===================================================================================================================== */

/* ---------- About: the co-writing scene on the night cover ----------
   Left: crumbs, title, the editors' presence, the line being written, the text and the chapter index.
   Right: the review record, then figure 1 with the chapter's answer as its caption. */
.doc-v2 .hero--chapter.hero--cowrite .hero-in {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr;
  grid-template-areas: "crumbs side" "head side" "after side"; align-items: start;
}
.doc-v2 .hero--chapter.hero--cowrite .hero-in > nav.crumbs { grid-area: crumbs; }
.doc-v2 .hero--chapter.hero--cowrite .hero-in > div.cw-head { grid-area: head; grid-row: 2; margin-bottom: 0; }
.doc-v2 .hero--chapter.hero--cowrite .hero-in > div.cw-after { grid-area: after; grid-row: 3; align-self: start; }
.doc-v2 .hero--chapter.hero--cowrite .hero-in > div.cw-side { grid-area: side; grid-row: 1 / span 3; align-self: center; gap: 36px; }
.doc-v2 .hero--cowrite .cw-presence { margin-top: 36px; }
.doc-v2 .hero--cowrite .cw-people { color: var(--ink-300); font-size: 13.5px; }
.doc-v2 .hero--cowrite .cw-person--human .cw-dot { color: var(--paper); }
.doc-v2 .hero--cowrite .cw-person--ai, .doc-v2 .hero--cowrite .cw-person--ai .cw-dot { color: var(--cyan-glow); }
.doc-v2 .hero--cowrite .cw-state { color: var(--ink-400); }
.doc-v2 .hero--cowrite .cw-stage { margin-top: 18px; }
.doc-v2 .hero--cowrite .hero-value.cw-title {
  margin-top: 0; max-width: 17em; color: var(--paper);
  font: 500 clamp(28px, 2.9vw, 42px)/1.3 var(--font-display); letter-spacing: -.022em;
}
html:lang(ja) .doc-v2 .hero--cowrite .hero-value.cw-title { max-width: 18em; font-size: clamp(25px, 2.5vw, 36px); line-height: 1.45; letter-spacing: 0; }
.doc-v2 .hero--cowrite .cw-after { margin-top: 28px; }
.doc-v2 .hero--cowrite .cw-after .hero-text { margin-top: 0; }
.doc-v2 .hero--cowrite .cw-after.is-waiting { opacity: .35; }
.doc-v2 .hero--chapter .cw-caret { --c: var(--paper); }
.doc-v2 .hero--chapter .cw-caret--ai { --c: var(--cyan-glow); }
.doc-v2 .hero--chapter .cw-ch.is-rej { color: var(--ink-500); text-decoration-color: var(--ink-500); }
/* the review record, ruled in light on the night */
.doc-v2 .hero--cowrite .doc-record { border-color: var(--ink-700); background: color-mix(in srgb, var(--ink-900) 70%, transparent); }
.doc-v2 .hero--cowrite .doc-record-head { border-bottom-color: var(--ink-700); }
.doc-v2 .hero--cowrite .doc-record-title { color: var(--paper); }
.doc-v2 .hero--cowrite .doc-record-table th { color: var(--ink-400); border-bottom-color: var(--ink-800); }
.doc-v2 .hero--cowrite .doc-record-table td { color: var(--ink-300); border-top-color: var(--ink-800); }
.doc-v2 .hero--cowrite .doc-record-table th + th, .doc-v2 .hero--cowrite .doc-record-table td + td { border-left-color: var(--ink-800); }
.doc-v2 .hero--cowrite .doc-record-table td:first-child, .doc-v2 .hero--cowrite .doc-record-table td:nth-child(2) { color: var(--paper); }
.doc-v2 .hero--cowrite .cw-entry--ai td:first-child, .doc-v2 .hero--cowrite .cw-entry--ai td:nth-child(2), .doc-v2 .hero--cowrite .cw-entry--ai .cw-mark { color: var(--cyan-glow); }
.doc-v2 .hero--cowrite .cw-entry--ok .cw-mark { color: var(--paper); }
.doc-v2 .hero--cowrite .cw-entry--no .cw-mark, .doc-v2 .hero--cowrite .cw-entry--no td:nth-child(2) { color: var(--ink-400); }
.doc-v2 .hero--cowrite .doc-record-note { border-top-color: var(--ink-700); color: var(--ink-400); }
.doc-v2 .hero--cowrite .cw-replay { border-color: var(--ink-600); background: transparent; color: var(--ink-200); }
.doc-v2 .hero--cowrite .cw-replay:hover { border-color: var(--ink-300); color: var(--paper); }
.doc-v2 .hero--cowrite .cw-replay:focus-visible { outline: 2px solid var(--cyan-glow); outline-offset: 2px; }
.doc-v2 .hero--cowrite .cw-side { grid-template-columns: minmax(0, 1fr); }
.doc-v2 .hero--chapter.hero--cowrite .cw-side .doc-plate { grid-column: 1; grid-row: auto; }
.doc-v2 .hero--cowrite .cw-side .doc-plate svg { width: calc(100% + 40px); max-width: none; margin-inline: -20px; }
.doc-v2 .hero--cowrite .cw-side .doc-plate figcaption { margin-top: 18px; }

/* ---------- Contact: the inquiry types, the one list on the site that starts an email ----------
   Each row: the kind of inquiry, when to choose it, and the email it opens (address and subject). */
.doc-v2 #types .rows { border-top: 1.5px solid var(--ink-950); }
.doc-v2 #types .row {
  grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; padding: 30px 20px 32px; margin-inline: -20px;
  border-radius: 6px; border-bottom: 1px solid var(--ink-100); transition: background-color .15s;
}
.doc-v2 #types .row-term { grid-column: span 4; }
.doc-v2 #types .row-text { grid-column: span 5; }
.doc-v2 #types .row-name { font-size: 20px; }
.doc-v2 #types a.row .row-name::after { content: none; }
.doc-v2 #types .row-mail {
  grid-column: span 3; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: baseline;
  justify-self: end; min-width: 0; text-align: left;
}
.doc-v2 #types .row-mail-icon { grid-row: 1 / span 2; width: 20px; height: 14px; margin-top: 3px; fill: none; stroke: var(--ink-400); stroke-width: 1.4; stroke-linejoin: round; transition: stroke .15s; }
.doc-v2 #types .row-mail-to { color: var(--ink-500); font: 500 12.5px/1.4 var(--font-mono); letter-spacing: .02em; }
.doc-v2 #types .row-mail-subject { color: var(--ink-950); font-size: 15px; line-height: 1.45; text-decoration: underline; text-decoration-color: var(--ink-200); text-underline-offset: 4px; transition: text-decoration-color .15s; }
.doc-v2 #types a.row:hover { background: var(--ink-25); }
.doc-v2 #types a.row:hover .row-mail-icon { stroke: var(--cyan-500); }
.doc-v2 #types a.row:hover .row-mail-subject { text-decoration-color: currentColor; }
.doc-v2 #types a.row:focus-visible { outline: 2px solid var(--cyan-400); outline-offset: 2px; }
.doc-v2 .hero--chapter .doc-qa + .actions { margin-top: 32px; }
.doc-v2 .hero--chapter .actions .btn-solid { min-height: 50px; padding-inline: 26px; background: var(--paper); color: var(--ink-1000); font-size: 16px; }
.doc-v2 .hero--chapter .actions .btn-solid:hover { background: var(--ink-100); }
.doc-v2 .hero--chapter .actions + .doc-toc { margin-top: 48px; }

/* ---------- The guide's contents on /help/, across the page ----------
   Each part of the guide on one band: its name large in the left columns, its chapters on the right with code, name,
   the question a service answers, dot leaders and the chapter number. */
.doc-v2 #contents .toc { display: block; max-width: none; }
.doc-v2 #contents .toc-group { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; padding-block: 36px 40px; border-top: 1px solid var(--ink-150); }
.doc-v2 #contents .toc-group:first-child { border-top: 1.5px solid var(--ink-950); }
.doc-v2 #contents .toc-group-title { grid-column: span 3; padding: 16px 0 0; border: 0; color: var(--ink-950); font: 600 clamp(20px, 1.8vw, 24px)/1.3 var(--font-display); letter-spacing: -.015em; }
.doc-v2 #contents .toc-list { grid-column: 4 / -1; }
.doc-v2 #contents .toc-list a { grid-template-columns: 9.5em minmax(0, max-content) minmax(32px, 1fr) 3em; column-gap: 18px; padding: 17px 0 18px; }
.doc-v2 #contents .toc-list li:last-child a { border-bottom: 0; }
.doc-v2 #contents .toc-code { color: var(--cyan-600); font-size: 13px; }
.doc-v2 #contents .toc-name { color: var(--ink-950); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.doc-v2 #contents .toc-q { margin-top: 5px; color: var(--ink-500); font-size: 15px; }
.doc-v2 #contents .toc-page { color: var(--ink-950); font-size: 17px; font-weight: 500; }
.doc-v2 #contents .toc-item--sub a { padding-block: 13px 14px; }
.doc-v2 #contents .toc-item--sub .toc-name { padding-left: 1.4em; color: var(--ink-700); font-size: 16.5px; font-weight: 500; }
.doc-v2 #contents .toc-item--sub .toc-code { color: var(--ink-400); }
.doc-v2 #contents .toc-list a:hover .toc-name { text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.doc-v2 #contents .toc-list a:focus-visible { outline: 2px solid var(--cyan-400); outline-offset: 2px; }

/* ---------- Research: the five core areas, a full-width ink plate ---------- */
.doc-v2 .core-plate { padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 56px) 0; border-color: var(--ink-100); border-radius: 6px; background-size: 24px 24px; }
/* size queries only on the map itself: container-type on the wrapper would also contain counters, and the figure
   number would restart at 1 */
.doc-v2 .core-plate .figure-art { container-type: normal; }
.doc-v2 .core-plate .core-map { width: min(100%, 820px); }
.doc-v2 .core-plate .core-map-caption { margin: 24px calc(-1 * clamp(20px, 4vw, 56px)) 0; padding: 16px clamp(20px, 4vw, 56px) 18px; border-top-color: var(--ink-100); color: var(--ink-600); font-size: 14.5px; }
.doc-v2 .core-plate .core-map-caption::before { color: var(--ink-950); }
.doc-v2 #core .core-plate + .rows { margin-top: 56px; }

@media (max-width: 1080px) {
  .doc-v2 .hero--chapter.hero--cowrite .hero-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "crumbs" "head" "after" "side"; }
  .doc-v2 .hero--chapter.hero--cowrite .hero-in > div.cw-head, .doc-v2 .hero--chapter.hero--cowrite .hero-in > div.cw-after { grid-row: auto; }
  .doc-v2 .hero--chapter.hero--cowrite .hero-in > div.cw-side { grid-row: auto; margin-top: 56px; max-width: 560px; }
  .doc-v2 #contents .toc-group-title { grid-column: 1 / -1; padding: 0 0 8px; }
  .doc-v2 #contents .toc-list { grid-column: 1 / -1; }
  .doc-v2 #types .row-term { grid-column: span 5; }
  .doc-v2 #types .row-text { grid-column: span 7; }
  .doc-v2 #types .row-mail { grid-column: 6 / -1; justify-self: start; margin-top: 10px; }
  .doc-v2 .doc-chapter .closing-in > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .doc-v2 .hero--cowrite .cw-presence { margin-top: 28px; }
  .doc-v2 .hero--cowrite .hero-value.cw-title { font-size: clamp(24px, 6.6vw, 30px); }
  html:lang(ja) .doc-v2 .hero--cowrite .hero-value.cw-title { font-size: clamp(22px, 5.8vw, 26px); }
  .doc-v2 .hero--chapter.hero--cowrite .hero-in > div.cw-side { margin-top: 44px; }
  .doc-v2 .hero--cowrite .doc-record-table { font-size: 13px; }
  .doc-v2 #types .row { padding: 24px 16px 26px; margin-inline: -16px; }
  .doc-v2 #types .row-term, .doc-v2 #types .row-text, .doc-v2 #types .row-mail { grid-column: 1 / -1; }
  .doc-v2 #types .row-name { font-size: 18px; }
  .doc-v2 #types .row-mail { margin-top: 12px; }
  .doc-v2 #contents .toc-group { padding-block: 28px 30px; }
  .doc-v2 #contents .toc-list a { grid-template-columns: minmax(0, 1fr) 2.4em; padding: 14px 0 15px; }
  .doc-v2 #contents .toc-name { font-size: 17px; }
  .doc-v2 #contents .toc-item--sub .toc-name { padding-left: 0; font-size: 16px; }
  .doc-v2 #contents .toc-q { font-size: 14px; }
  .doc-v2 .doc-chapter .closing { padding-block: 80px 88px; }
  .doc-v2 .doc-chapter .closing h2::before { margin-bottom: 24px; }
  .doc-v2 .doc-chapter .closing p { font-size: 16px; }
  .doc-v2 .core-plate { padding: 16px 12px 0; }
  .doc-v2 .core-plate .core-map-caption { margin-inline: -12px; padding-inline: 12px; }
}

/* ---------- help!: the guide's front page ----------
   Cover: what to tell us (three prompts), the question and its answer, one way to reach us. Then concerns in the
   customer's own words, each with the chapter that answers it; purposes built from several services; the contents. */
.doc-v2 .hero--front .help-prompts { margin-top: 36px; max-width: 40em; padding: 0; list-style: none; border-top: 1px solid var(--ink-700); }
.doc-v2 .hero--front .help-prompts li {
  display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 1fr); gap: 4px 20px; align-items: baseline;
  padding: 13px 0 14px; border-bottom: 1px solid var(--ink-800);
}
.doc-v2 .hero--front .help-prompt-q { color: var(--paper); font: 500 15.5px/1.45 var(--font-display); }
.doc-v2 .hero--front .help-prompt-ex { color: var(--ink-400); font-size: 14.5px; line-height: 1.55; }
html:lang(ja) .doc-v2 .hero--front :is(.help-prompt-q, .help-prompt-ex) { word-break: auto-phrase; }
.doc-v2 .hero--front .help-prompts + .actions { margin-top: 36px; }

.doc-v2 .help-rows { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--ink-950); }
.doc-v2 .help-row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start;
  padding: 30px 0 32px; border-bottom: 1px solid var(--ink-100);
}
.doc-v2 .help-concern { grid-column: span 5; margin: 0; color: var(--ink-950); font: 500 clamp(18px, 1.55vw, 21px)/1.5 var(--font-display); letter-spacing: -.01em; text-wrap: pretty; }
.doc-v2 .help-answer { grid-column: span 7; min-width: 0; }
.doc-v2 .help-svcs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 32px; margin: 0; }
.doc-v2 .help-svc { display: inline-flex; flex-direction: column; gap: 3px; color: var(--ink-950); text-decoration: none; }
.doc-v2 .help-svc-name {
  font: 600 18px/1.35 var(--font-display); letter-spacing: -.01em;
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--ink-200); text-underline-offset: 5px; transition: text-decoration-color .15s;
}
.doc-v2 .help-svc-name::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 10px; border-top: 1.5px solid var(--ink-400); border-right: 1.5px solid var(--ink-400); transform: rotate(45deg) translateY(-2px); transition: border-color .15s, transform .15s; }
.doc-v2 .help-svc:hover .help-svc-name { text-decoration-color: currentColor; }
.doc-v2 .help-svc:hover .help-svc-name::after { border-color: var(--ink-950); transform: rotate(45deg) translate(2px, -4px); }
.doc-v2 .help-svc:focus-visible { outline: 2px solid var(--cyan-400); outline-offset: 4px; border-radius: 2px; }
.doc-v2 .help-svc-en { color: var(--ink-500); font-size: 13px; line-height: 1.4; }
.doc-v2 .help-or { flex-basis: 100%; margin-top: 6px; color: var(--ink-500); font-size: 14px; line-height: 1.5; }
.doc-v2 .help-why { margin-top: 12px; max-width: 40em; color: var(--ink-700); font-size: 16px; line-height: 1.75; }
/* a second, conditional recommendation under the first one's reason (e.g. VAPT, or TLPT when a framework applies) */
.doc-v2 .help-alt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin: 18px 0 0; padding-top: 16px; border-top: 1px dashed var(--ink-150); }
.doc-v2 .help-alt .help-or { flex-basis: 100%; margin: 0; }
html:lang(ja) .doc-v2 :is(.help-concern, .help-why) { word-break: auto-phrase; }


/* the way into the guide: its first chapter */
.doc-v2 .doc-end--front { padding-top: 0; }
.doc-v2 .doc-end--front .doc-end-links { margin-top: 0; border-top: 0; }

@media (max-width: 1080px) {
  .doc-v2 .help-concern { grid-column: 1 / -1; }
  .doc-v2 .help-answer { grid-column: 1 / -1; margin-top: 14px; }
}
@media (max-width: 760px) {
  .doc-v2 .hero--front .help-prompts li { grid-template-columns: minmax(0, 1fr); }
  .doc-v2 .help-row { padding: 24px 0 26px; }
  .doc-v2 .help-concern { font-size: 18px; }
  .doc-v2 .help-svcs { flex-direction: column; gap: 14px; }
}
@media print { .doc-v2 .hero--front .actions { display: none; } }

/* Print: the cover's night colours become ink on paper. */
@media print {
  .doc-v2 .hero--chapter .doc-qa-mark { color: var(--cyan-600); }
  .doc-v2 .hero--chapter .doc-qa-text { color: var(--ink-950); }
  .doc-v2 .hero--chapter .doc-review { color: var(--ink-600); }
  .doc-v2 .hero--chapter .doc-qa-a { color: var(--ink-700); border-left-color: var(--cyan-500); }
  .doc-v2 .hero--chapter .doc-toc { display: none; }
  .doc-v2 .hero--front .help-prompts { border-top-color: var(--ink-300); }
  .doc-v2 .hero--front .help-prompts li { border-bottom-color: var(--ink-150); }
  .doc-v2 .hero--front .help-prompt-q { color: var(--ink-950); }
  .doc-v2 .hero--front .help-prompt-ex { color: var(--ink-600); }
  .doc-v2 .hero--cowrite .hero-value.cw-title { color: var(--ink-950); }
  .doc-v2 .hero--cowrite .cw-people, .doc-v2 .hero--cowrite .cw-person--human .cw-dot { color: var(--ink-700); }
  .doc-v2 .hero--cowrite .cw-person--ai, .doc-v2 .hero--cowrite .cw-person--ai .cw-dot { color: var(--cyan-600); }
  .doc-v2 .hero--cowrite .doc-record { border-color: var(--ink-950); background: none; }
  .doc-v2 .hero--cowrite :is(.doc-record-head, .doc-record-note) { border-color: var(--ink-950); }
  .doc-v2 .hero--cowrite .doc-record-title, .doc-v2 .hero--cowrite .doc-record-table td:first-child, .doc-v2 .hero--cowrite .doc-record-table td:nth-child(2), .doc-v2 .hero--cowrite .cw-entry--ok .cw-mark { color: var(--ink-950); }
  .doc-v2 .hero--cowrite .doc-record-table :is(th, td) { color: var(--ink-600); border-color: var(--ink-150); }
  .doc-v2 .hero--cowrite .cw-entry--ai :is(td:first-child, td:nth-child(2), .cw-mark) { color: var(--cyan-600); }
  .doc-v2 .hero--cowrite .doc-record-note { color: var(--ink-600); }
}