/* SAIHM reading pages: the bodies of the converted pages, in the redesign.
   Loaded after redesign.css on converted pages only. Every rule is scoped to main.page,
   so the home, the header, the footer and the Explore dialog are untouched.
   Ported from the legacy site.css, viz.css, video.css and the /pricing inline styles. */

/* ---------- Layout ---------- */
.page { position: relative; isolation: isolate; padding: 136px 0 104px; }
.page::before { content: ""; position: absolute; inset: 0 0 auto; height: 560px; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 60% at 0% 0%, rgba(179, 166, 255, .32), transparent 70%),
              radial-gradient(34% 54% at 100% 0%, rgba(134, 216, 255, .28), transparent 70%); }
.page .container { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.page section { margin: 0 0 28px; }
.page .container > :last-child { margin-bottom: 0; }

/* ---------- Type: a reading scale (the home keeps its display sizes) ---------- */
.page h1 { font-size: clamp(40px, 5.6vw, 64px); line-height: 1.05; margin: 0 0 18px; max-width: 20ch; text-wrap: balance; }
.page h2 { font-size: clamp(26px, 3.2vw, 34px); line-height: 1.15; margin: 0 0 14px; text-wrap: balance; }
.page h3 { font: 600 18px/1.35 var(--f-body); letter-spacing: 0; margin: 24px 0 8px; }
.page h4 { font: 600 16px/1.4 var(--f-body); margin: 18px 0 6px; color: var(--ink); }
.page :is(h2, h3, h4):first-child { margin-top: 0; }
.page p { max-width: 68ch; margin: 0 0 14px; color: var(--ink-2); }
.page :is(li, dd, td) { color: var(--ink-2); }
.page :is(ul, ol) { padding-left: 22px; margin: 0 0 14px; }
.page li { margin-bottom: 6px; }
.page li > :is(ul, ol) { margin: 6px 0 0; }
.page :is(strong, b) { color: var(--ink); font-weight: 600; }
.page hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.page blockquote { margin: 0 0 14px; padding: 2px 0 2px 16px; border-left: 3px solid var(--lav); color: var(--ink-2); }
.page .muted { color: var(--muted); }
.page .mono { font-family: var(--f-mono); font-size: .9em; }
.page .accent-text, .page .savings { color: var(--violet-ink); font-weight: 600; }
.page .hint { font-size: 14px; color: var(--muted); }

/* Links in running text are underlined, not told apart by color alone (WCAG 1.4.1). */
.page :where(p, li, dd, dt, td, th, figcaption, blockquote) a:not(.cta):not(.btn) { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Opening section ---------- */
.page .hero { padding: 0; overflow: visible; isolation: auto; }
.page .hero::before { content: none; }
.page section.hero { margin-bottom: 36px; }
.page figure.hero { margin: 0 0 32px; }
.page .tagline { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 40em; margin: 0 0 24px; }

/* ---------- Cards ---------- */
.page :is(section, aside).card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 28px 30px;
  box-shadow: 0 1px 2px rgba(13, 27, 52, .03), 0 8px 24px rgba(13, 27, 52, .04); }
.page .card p { font-size: 16px; margin: 0 0 14px; color: var(--ink-2); }
.page .card > :last-child { margin-bottom: 0; }
.page .card h3 { margin: 24px 0 8px; }
.page .card > h3:first-child { margin-top: 0; }

/* ---------- Calls to action ---------- */
.page .cta { display: inline-block; padding: 13px 22px; border: 0; border-radius: 999px; background: var(--violet); color: #fff;
  font: 600 15px/1.25 var(--f-body); text-decoration: none; cursor: pointer; box-shadow: 0 6px 18px rgba(91, 75, 234, .32);
  transition: transform .15s, background .15s; }
.page .cta:hover { background: #4c3cdf; color: #fff; text-decoration: none; transform: translateY(-1px); }

/* ---------- Code ---------- */
.page code { font-size: .88em; padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-2); color: var(--ink); overflow-wrap: anywhere; }
.page pre { margin: 0 0 16px; padding: 18px 20px; overflow-x: auto; border-radius: 14px; background: var(--navy); color: #e6ebf5; font-size: 13.5px; line-height: 1.6; }
.page pre code { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; overflow-wrap: normal; }

/* ---------- Tables ---------- */
.page table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 15px; }
.page :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: break-word; }
.page th { background: var(--bg-2); color: var(--ink); font-size: 14px; font-weight: 600; }

/* Every table scrolls inside its own named region, so a wide table never widens the page */
.page .table-wrap { overflow-x: auto; margin: 8px 0 16px; }
.page .table-wrap > table { margin: 0; }
.page :is(.table-wrap, .viz-wrap):focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

/* Comparison and decision tables */
.page .viz-wrap { overflow-x: auto; margin: 10px 0 8px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.page .viz-wrap > .viz-wrap { margin: 0; border: 0; border-radius: 0; } /* legacy markup nests one wrapper in another on /pricing */
.page .viz-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.page .viz-table--wide { min-width: 760px; }
.page .viz-table :is(th, td) { padding: 11px 12px; text-align: center; vertical-align: middle; background: none; overflow-wrap: normal; }
.page .viz-table :is(th, td):first-child { text-align: left; font-weight: 500; color: var(--ink); }
.page .viz-table--wide :is(th, td):first-child { min-width: 264px; } /* only wide grids keep a scroll floor */
.page .viz-table thead th { background: var(--bg-2); color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.page .viz-table .own { background: rgba(91, 75, 234, .06); }
.page .viz-table thead th.own { background: rgba(91, 75, 234, .12); color: var(--violet-ink); }
.page .viz-table tr.phase td { padding: 9px 12px; background: var(--bg-2); color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.page .viz-table tbody tr:last-child td { border-bottom: 0; }
.page .viz-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.page .viz-reuse { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.page .viz-reuse a { color: var(--muted); }

/* Status pills: one vocabulary across every table */
.page .pill { display: inline-block; min-width: 70px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; }
.page .p-yes { background: #eafaf4; color: var(--teal-ink); border: 1px solid #b5e8d6; }
.page .p-var { background: #fff4e6; color: #a15c07; border: 1px solid #f3d5a6; }
.page .p-no { background: var(--bg-2); color: var(--muted); border: 1px solid var(--line); }
.page .p-na { color: var(--muted); font-size: 12px; }

/* ---------- Definition lists ---------- */
.page dl.kv { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 10px 20px; margin: 8px 0 16px; }
.page dl.kv dt { color: var(--muted); font-size: 14.5px; }
.page dl.kv dd { margin: 0; color: var(--ink); font-size: 15px; overflow-wrap: anywhere; }
.page dl.qa { display: block; max-width: none; margin: 0 0 14px; }
.page dl.qa dt { margin: 18px 0 6px; color: var(--ink); font-weight: 600; }
.page dl.qa dt:first-child { margin-top: 4px; }
.page dl.qa dd { margin: 0 0 10px; color: var(--ink-2); }

/* ---------- Figures and media ---------- */
.page figure { margin: 16px 0; }
.page figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
.page img { height: auto; }
.page details { margin: 0 0 14px; padding: 0 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.page summary { padding: 14px 0; font-weight: 600; cursor: pointer; }
.page .video-feature { margin: 8px 0 40px; }
.page .video-feature figure { margin: 0; }
.page .video-player { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line); border-radius: var(--r); }
.page .video-feature figcaption { margin-top: 10px; font-size: 15px; line-height: 1.5; }
.page .video-feature figcaption strong { color: var(--ink); }
.page .transcript p { max-width: 68ch; }
.page .manual-toc { margin: 0 0 12px 1.4em; padding: 0; }
.page .manual-toc li { margin-bottom: 4px; }

/* ---------- Forms ---------- */
.page fieldset { margin: 0 0 16px; padding: 12px 18px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); }
.page legend { padding: 0 6px; color: var(--muted); font-size: 14px; }
.page fieldset label { display: block; margin: 6px 0; color: var(--ink-2); font-size: 15px; }
.page input[type=radio], .page input[type=checkbox] { accent-color: var(--violet); margin-right: 6px; }
.page :is(.input, input[type=text], input[type=email], input[type=url], input[type=password], input[type=number], select, textarea) {
  width: 100%; max-width: 480px; padding: 10px 14px; border: 1px solid #7d8aa3; border-radius: 12px; background: #fff; color: var(--ink); font: 400 15px/1.4 var(--f-body); }
.page :is(.input, input, select, textarea):focus { outline: 2px solid var(--violet); outline-offset: 1px; border-color: var(--violet); }
.page form label { display: inline-block; margin-bottom: 4px; color: var(--ink-2); font-size: 14.5px; }
.page button.cta { font-family: var(--f-body); }
.page .form-status { color: var(--ink-2); font-size: 14.5px; }

/* ---------- Plans (/pricing) ---------- */
.page .tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 20px 0 8px; }
.page .tier { display: flex; flex-direction: column; padding: 22px 22px 24px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; box-shadow: 0 1px 2px rgba(13, 27, 52, .03); }
.page .tier h3 { margin: 0 0 6px; }
.page .tier .price { margin: 0 0 14px; color: var(--ink); font: 500 30px/1.15 var(--f-head); }
.page .tier .price small { display: block; margin-top: 4px; color: var(--muted); font: 400 14px/1.4 var(--f-body); }
.page .tier ul { flex: 1; margin: 0 0 18px; padding: 0; list-style: none; }
.page .tier li { position: relative; margin-bottom: 8px; padding-left: 22px; font-size: 15px; }
.page .tier li::before { content: "\2713"; position: absolute; left: 0; color: var(--teal-ink); font-weight: 700; }
.page .tier .cta { align-self: flex-start; margin-top: auto; }
.page .tier.accent { border-color: var(--violet-2); box-shadow: 0 0 0 1px var(--violet-2), 0 10px 30px rgba(91, 75, 234, .12); }

/* ---------- Join and free start (markup kept byte-exact; skin only) ---------- */
.page .badge { display: inline-block; gap: 0; margin: 0; padding: 2px 9px; border: 0; border-radius: 999px; background: #eafaf4; color: var(--teal-ink); font-size: 12.5px; font-weight: 600; }
.page .badge-warn { background: #fff4e6; color: #a15c07; }
.page .badge-down { background: #fdecec; color: #b42318; }
.page #free-step-done h3 { color: var(--teal-ink); }
.page .paymarks-label { margin: .6em 0 .2em; }
.page .paymarks { display: flex; flex-wrap: wrap; align-items: center; gap: .55em; margin: .2em 0 0; padding: 0; list-style: none; }
.page .paymarks li { display: flex; align-items: center; margin: 0; }
.page .paymarks img { display: block; width: auto; height: 24px; padding: 3px 5px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.page .paymarks img.pm-dark { background: #000; }
.page #checkout { max-width: 480px; margin: 14px auto 0; padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 8px 28px rgba(13, 27, 52, .08); }

/* ---------- Small screens ---------- */
@media (max-width: 720px) {
  .page { padding: 112px 0 80px; }
  .page :is(section, aside).card { padding: 22px 20px; }
  .page .viz-table--wide :is(th, td):first-child { min-width: 180px; }
}
@media (max-width: 560px) {
  .page dl.kv { grid-template-columns: 1fr; gap: 2px; }
  .page dl.kv dd { margin-bottom: 10px; }
  .page .tagline { font-size: 17px; }
}

/* ======================================================================================================
   Design v2 (2026-11-11): sub-page hero band + one visual, "At a glance" cards, section expanders.
   Markup from p2hero.py; behavior from /js/page.js (without it every section stays open).
   ====================================================================================================== */
.page-v2 { padding-top: 0; --aurora:
  radial-gradient(40% 62% at 88% 8%, rgba(160, 144, 255, .95), transparent 70%),
  radial-gradient(34% 56% at 100% 70%, rgba(110, 204, 255, .9), transparent 70%),
  radial-gradient(30% 48% at 62% 0%, rgba(255, 150, 205, .75), transparent 70%),
  radial-gradient(34% 50% at 0% 0%, rgba(255, 196, 130, .6), transparent 70%),
  radial-gradient(30% 44% at 40% 100%, rgba(130, 232, 196, .55), transparent 70%), #fbfcff; }
.page-v2::before { content: none; }
.page-v2[data-family="build"] { --aurora:
  radial-gradient(40% 62% at 90% 10%, rgba(100, 210, 255, .95), transparent 70%),
  radial-gradient(34% 54% at 100% 78%, rgba(120, 236, 196, .85), transparent 70%),
  radial-gradient(32% 50% at 58% 0%, rgba(160, 144, 255, .8), transparent 70%),
  radial-gradient(30% 46% at 0% 0%, rgba(176, 200, 255, .6), transparent 70%), #fbfcff; }
.page-v2[data-family="memory"] { --aurora:
  radial-gradient(42% 64% at 86% 6%, rgba(150, 132, 255, 1), transparent 70%),
  radial-gradient(34% 54% at 100% 74%, rgba(255, 146, 204, .82), transparent 70%),
  radial-gradient(30% 46% at 56% 0%, rgba(104, 206, 255, .78), transparent 70%),
  radial-gradient(30% 46% at 0% 0%, rgba(200, 190, 255, .6), transparent 70%), #fbfcff; }
.page-v2[data-family="for"] { --aurora:
  radial-gradient(40% 62% at 88% 8%, rgba(255, 186, 120, .92), transparent 70%),
  radial-gradient(34% 54% at 100% 76%, rgba(255, 146, 200, .82), transparent 70%),
  radial-gradient(32% 48% at 58% 0%, rgba(150, 236, 200, .78), transparent 70%),
  radial-gradient(30% 46% at 0% 0%, rgba(176, 162, 255, .55), transparent 70%), #fffcf8; }
.page-v2[data-family="trust"] { --aurora:
  radial-gradient(40% 62% at 88% 8%, rgba(112, 226, 196, .92), transparent 70%),
  radial-gradient(34% 54% at 100% 76%, rgba(104, 196, 255, .88), transparent 70%),
  radial-gradient(32% 48% at 58% 0%, rgba(156, 140, 255, .72), transparent 70%),
  radial-gradient(30% 46% at 0% 0%, rgba(176, 236, 220, .6), transparent 70%), #f9fdfc; }
.page-v2[data-family="resources"] { --aurora:
  radial-gradient(40% 62% at 88% 8%, rgba(170, 152, 255, .9), transparent 70%),
  radial-gradient(34% 54% at 100% 76%, rgba(255, 196, 132, .85), transparent 70%),
  radial-gradient(32% 48% at 58% 0%, rgba(112, 210, 255, .72), transparent 70%),
  radial-gradient(30% 46% at 0% 0%, rgba(255, 176, 214, .5), transparent 70%), #fbfcff; }
.page-v2[data-family="standards"], .page-v2[data-family="appendix"] { --aurora:
  radial-gradient(42% 64% at 88% 8%, rgba(140, 128, 255, .9), transparent 70%),
  radial-gradient(34% 54% at 100% 78%, rgba(100, 200, 255, .85), transparent 70%),
  radial-gradient(30% 46% at 58% 0%, rgba(120, 228, 196, .7), transparent 70%),
  radial-gradient(30% 46% at 0% 0%, rgba(190, 200, 255, .55), transparent 70%), #fafbff; }
.page-v2[data-family="blog"] { --aurora:
  radial-gradient(40% 62% at 88% 8%, rgba(255, 160, 206, .9), transparent 70%),
  radial-gradient(34% 54% at 100% 78%, rgba(255, 198, 134, .85), transparent 70%),
  radial-gradient(32% 48% at 56% 0%, rgba(150, 136, 255, .75), transparent 70%),
  radial-gradient(30% 46% at 0% 0%, rgba(120, 214, 255, .5), transparent 70%), #fffbfc; }

/* Hero band: full bleed, under the floating header, fading into the page */
.phero { position: relative; isolation: isolate; overflow: hidden; padding: 132px 0 76px; margin: 0 0 12px; }
.phero::before { content: ""; position: absolute; inset: -6% -4% 0; z-index: -2; background: var(--aurora); }
.phero::after { content: ""; position: absolute; inset: auto 0 0; height: 140px; z-index: -1; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); }
.phero-in { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; align-items: center; }
.phero-solo .phero-in { grid-template-columns: minmax(0, 1fr); }
.phero-solo .phero-copy { max-width: 880px; }
.page .phero-eyebrow { display: inline-block; max-width: none; margin: 0 0 18px; padding: 5px 12px; border: 1px solid rgba(13, 27, 52, .1); border-radius: 999px;
  background: rgba(255, 255, 255, .82); color: var(--violet-ink); font: 600 12px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.page .phero h1 { max-width: 18ch; margin: 0 0 18px; }
.page .phero-post h1 { max-width: 22ch; font-size: clamp(34px, 4.4vw, 54px); }
.page .phero-sub { max-width: 36em; margin: 0 0 14px; color: var(--ink); font: 500 21px/1.4 var(--f-head); }
.page .phero .lead { max-width: 38em; margin: 0 0 26px; color: var(--ink-2); font-size: 18.5px; line-height: 1.6; }
.phero .cta-row { margin: 0 0 18px; }
.page .phero-note { max-width: 46em; margin: 0 0 8px; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.phero-art { position: relative; padding: 34px 6px 66px 0; }
.phero-cover { margin: 0; }
.page .phero-cover img { display: block; width: 100%; border-radius: var(--r); box-shadow: 0 24px 48px rgba(11, 24, 48, .18); }

/* Visuals (decorative; aria-hidden). Design v3 (2026-11-11): one visual per page, made from the page's own words
   (p2hero.py). Classes only; no motion, so prefers-reduced-motion has nothing to stop. */
.phero-art .term { max-width: 520px; margin-left: auto; }
.phero .term-pre { padding: 18px 20px 22px; white-space: pre-wrap; overflow-wrap: anywhere; }
.phero-art .chip-seal { top: 6px; right: -4px; }
.phero-art .chip-share { top: auto; bottom: 6px; left: -14px; }
.phero-art .chip-share small { font-size: 11px; }
.phero-art .chip-note { bottom: 8px; left: -14px; max-width: 300px; }
.phero-art .chip-note small { display: block; margin-bottom: 5px; color: var(--muted); font: 600 11px/1.3 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; }
.phero-art .chip-note b { display: block; color: var(--ink); font: 600 14px/1.35 var(--f-body); }
.phero-art .chip-note b + b { margin-top: 3px; }
.phero-art .chip-dot { display: flex; align-items: center; gap: 10px; }
.phero-art:has(.vbars) { padding-bottom: 118px; }
.phero-art:has(> .term + .chip-note) { padding-bottom: 84px; }  /* the note clears the last terminal line */
.phero-art .vbars ~ .chip-share { left: 28px; right: auto; bottom: 0; }  /* below the card, clear of its legend */
.vcard { position: relative; max-width: 460px; margin-left: auto; padding: 20px 22px; border: 1px solid var(--line); border-radius: 18px;
  background: rgba(255, 255, 255, .96); box-shadow: 0 24px 56px rgba(11, 24, 48, .16); }
.page .vc-title { max-width: none; margin: 0 0 14px; color: var(--muted); font: 600 12px/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.page .vc-foot { max-width: none; margin: 12px 0 0; color: var(--muted); font: 12px/1.4 var(--f-mono); }
.page .vbars .vc-foot { margin: 0; }
/* tokens (pricing): the published benchmark */
.vb-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 92px; gap: 10px; align-items: center; margin: 0 0 10px; color: var(--ink-2); font: 12px/1.2 var(--f-mono); }
.vb-track { display: grid; gap: 4px; }
.vb-track i { display: block; height: 7px; border-radius: 7px; }
.vb-a { background: #c3cbdb; }
.vb-b { background: linear-gradient(90deg, var(--violet), var(--cyan)); }
.vb-r1 .vb-a { width: 8.7%; } .vb-r1 .vb-b { width: 3.2%; }
.vb-r2 .vb-a { width: 32.6%; } .vb-r2 .vb-b { width: 6.8%; }
.vb-r3 .vb-a { width: 70.5%; } .vb-r3 .vb-b { width: 10.8%; }
.vb-r4 .vb-a { width: 100%; } .vb-r4 .vb-b { width: 14.1%; }
.vb-num { color: var(--violet-ink); font-weight: 600; text-align: right; }
.page .vc-legend { display: flex; gap: 14px; max-width: none; margin: 12px 0 4px; color: var(--ink-2); font: 12px/1.2 var(--f-mono); }
.vc-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.vc-legend .lg-a::before { background: #c3cbdb; }
.vc-legend .lg-b::before { background: var(--violet); }
/* share (agent-sharing) */
.vs-flow { display: flex; align-items: center; gap: 10px; margin: 4px 0 16px; }
.vs-node { padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); color: var(--ink); font: 600 13px/1.2 var(--f-mono); white-space: nowrap; }
.vs-to { border-color: rgba(91, 75, 234, .25); background: rgba(91, 75, 234, .08); color: var(--violet-ink); }
.vs-arrow { position: relative; flex: 1; min-width: 24px; height: 2px; background: repeating-linear-gradient(90deg, var(--violet-2) 0 6px, transparent 6px 11px); }
.vs-arrow::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--violet-2); border-right: 0; }
.vc-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font: 13px/1.4 var(--f-mono); }
.vc-kv span { color: var(--muted); }
.vc-kv b { color: var(--ink); font-weight: 600; }
/* rows: one line per item, an optional value and an end mark */
.vl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line);
  color: var(--ink-2); font: 13.5px/1.4 var(--f-body); }
.vc-title + .vl-row, .vl-head + .vl-row, .vtabs + .vl-row, .vtg + .vl-row { border-top: 0; }
.vl-k { min-width: 0; color: var(--ink); font-weight: 600; }
.vl-v { min-width: 0; }
.vl-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 0 0 8px; border-bottom: 1px solid var(--line); color: var(--muted);
  font: 600 11px/1.3 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; }
.vl-ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e2f5ef; color: var(--teal-ink); font: 700 12px/1 var(--f-body); }
.vl-hl { margin-top: 6px; padding: 10px 12px; border: 0; border-radius: 12px; background: #f1f0fd; }
.vpill { justify-self: end; padding: 3px 10px; border-radius: 999px; font: 600 12px/1.35 var(--f-mono); white-space: nowrap; }
.vp-yes { background: #e2f5ef; color: var(--teal-ink); }
.vp-no { background: #fdecea; color: #b42318; }
.vp-part { background: #fff3d6; color: #875400; }
.vp-v { background: #efedff; color: var(--violet-ink); }
.vdoc-i { position: relative; width: 18px; height: 22px; border: 2px solid var(--violet-2); border-radius: 4px; }
.vdoc-i::after { content: ""; position: absolute; left: 3px; right: 3px; top: 5px; height: 2px; background: var(--violet-2); box-shadow: 0 5px 0 var(--violet-2), 0 10px 0 var(--violet-2); }
.vev .vl-row, .vlists .vl-row { grid-template-columns: 18px minmax(0, 1fr) auto; }
.vlists .vl-row { grid-template-columns: 18px minmax(0, 1fr); }
.vref .vl-row, .vrd .vl-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.vref .vl-k, .vrcp .vl-k { font: 600 12.5px/1.4 var(--f-mono); }
.vref .vl-k { color: var(--violet-ink); }
.vtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.vtabs span { padding: 5px 10px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); font: 600 12px/1.2 var(--f-mono); }
.vtabs .on { background: var(--violet); color: #fff; }
.vrd .vl-k { color: var(--muted); font: 500 12.5px/1.4 var(--f-body); }
.vrd .vl-v { color: var(--ink); font: 600 14.5px/1.35 var(--f-body); }
.vrd .vl-hl .vl-v, .vfacts .vl-hl .vl-v { color: var(--violet-ink); }
.vfacts .vl-hl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.vfacts .vl-hl .vl-k { color: var(--muted); font: 500 12.5px/1.4 var(--f-body); }
.vfacts .vl-hl .vl-v { font: 600 15px/1.35 var(--f-body); }
.vsv .vl-row, .vsv .vl-head { grid-template-columns: 116px minmax(0, 1fr); }
.vsv-a { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.vsv-a::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.vsv-yes { color: var(--teal-ink); } .vsv-part { color: #875400; } .vsv-no { color: #b42318; }
.vsys .vl-row { grid-template-columns: 12px minmax(0, 1fr); }
.vsys-d { width: 12px; height: 12px; border: 2px solid var(--violet-2); border-radius: 50%; }
.vroutes .vl-row { grid-template-columns: 24px minmax(0, 1fr); }
.vrt-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #efedff; color: var(--violet-ink); font: 600 12px/1 var(--f-mono); }
.vrt { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: #f3f1ff; }
.vrt-h { display: block; color: var(--muted); font: 600 11px/1.3 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; }
.vrt-a { display: block; margin: 6px 0 8px; color: var(--ink); font: 600 14px/1.3 var(--f-mono); }
.vrt-t { display: flex; flex-wrap: wrap; gap: 6px; }
.vrt-t span { padding: 3px 8px; border-radius: 7px; background: #fff; color: var(--violet-ink); font: 600 12px/1.3 var(--f-mono); }
/* steps (quickstart, public-good) */
.vst { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 0 0 16px; }
.vst:last-child { padding-bottom: 0; }
.vst::before { content: ""; position: absolute; left: 13px; top: 32px; bottom: 4px; width: 2px; background: var(--line); }
.vst:last-child::before { content: none; }
.vst-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--violet); color: #fff; font: 600 13px/1 var(--f-mono); }
.vladder .vst-n { background: var(--teal-ink); }
.vst-b { min-width: 0; padding-top: 3px; }
.vst-t { display: block; color: var(--ink); font: 600 15px/1.35 var(--f-body); }
.vst-s { display: block; margin-top: 4px; color: var(--ink-2); font: 13.5px/1.45 var(--f-body); }
.vst-c { display: block; margin-top: 7px; padding: 8px 10px; border-radius: 9px; background: var(--navy); color: #d7e3ff; font: 12px/1.5 var(--f-mono); overflow-wrap: anywhere; }
/* paths (start) */
.vpa { position: relative; padding: 14px 16px 14px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.vpa + .vpa { margin-top: 10px; }
.vpa::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--violet); }
.vpa-b::before { background: var(--teal); }
.vpa-t { display: block; color: var(--ink); font: 600 16px/1.3 var(--f-body); }
.vpa-s { display: block; margin-top: 4px; color: var(--ink-2); font: 13.5px/1.45 var(--f-body); }
/* chat */
.vch-q { max-width: 86%; margin: 0 0 10px auto; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--violet); color: #fff; font: 500 14px/1.45 var(--f-body); }
.vch-a { max-width: 94%; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: var(--bg-2); color: var(--ink); font: 14px/1.5 var(--f-body); }
/* developer install (developers) */
.phero-art .vdev { max-width: 520px; }
.vdev-tabs { display: flex; gap: 4px; margin-left: auto; }
.phero-art .vdev-tabs span { margin: 0; padding: 4px 8px; border-radius: 6px; color: #9aa7c7; font: 12px/1 var(--f-mono); }
.phero-art .vdev-tabs .on { background: var(--navy-2); color: #e6edff; }
.phero-art .vdev ~ .chip-dot { max-width: 340px; }
/* two columns (enterprise-class, trust) */
.vcl-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vcl { min-width: 0; padding: 14px; border-radius: 14px; }
.vcl-a { background: var(--bg-2); }
.vcl-b { background: #f1effd; }
.vcl-h { display: block; margin-bottom: 4px; font: 600 11.5px/1.35 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; }
.vcl-a .vcl-h { color: var(--muted); }
.vcl-b .vcl-h { color: var(--violet-ink); }
.vcl-i { position: relative; display: block; margin-top: 8px; padding-left: 16px; color: var(--ink-2); font: 13px/1.4 var(--f-body); }
.vcl-i::before { content: ""; position: absolute; left: 1px; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: #aab3c5; }
.vcl-b .vcl-i { color: var(--ink); }
.vcl-b .vcl-i::before { background: var(--violet); }
.vops .vcl-b { background: #e9f7f2; }
.vops .vcl-b .vcl-h { color: var(--teal-ink); }
.vops .vcl-b .vcl-i::before { background: var(--teal); }
/* MCP leaves custody open (mcp-memory) */
.vmc { padding: 14px 16px; border-radius: 14px; }
.vmc + .vmc { margin-top: 10px; }
.vmc-a { background: #ebf8f3; }
.vmc-b { background: #fff6e2; }
.vmc-h { display: block; margin-bottom: 4px; color: var(--ink); font: 600 15px/1.35 var(--f-body); }
.vmc-i { position: relative; display: block; margin-top: 5px; padding-left: 22px; color: var(--ink-2); font: 13px/1.4 var(--f-body); }
.vmc-i::before { position: absolute; left: 2px; top: 0; font: 700 13px/1.4 var(--f-mono); }
.vmc-a .vmc-i::before { content: "\2713"; color: var(--teal-ink); }
.vmc-b .vmc-i::before { content: "?"; color: #875400; }
/* wiring vs shared memory (multi-agent-memory) */
.vw-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vw { min-width: 0; padding: 14px 12px 12px; border-radius: 14px; background: var(--bg-2); text-align: center; }
.vw-b { background: #f1effd; }
.vw svg { display: block; width: 100%; max-width: 170px; height: auto; margin: 0 auto; }
.vw-l { stroke: #aab3c5; stroke-width: 1.6; }
.vw-hl { stroke: var(--violet-2); stroke-width: 2; }
.vw-n { fill: #fff; stroke: var(--violet); stroke-width: 2.4; }
.vw-a .vw-n { stroke: #7d879c; }
.vw-hub { fill: var(--violet); }
.vw-s { display: block; margin-top: 10px; color: var(--muted); font: 12px/1.35 var(--f-body); }
.vw-t { display: block; margin-top: 2px; color: var(--ink); font: 600 14.5px/1.3 var(--f-body); }
.vw-b .vw-t { color: var(--violet-ink); }
/* six things (protocol) */
.vsix-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vsx { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); color: var(--ink); font: 600 14px/1.3 var(--f-body); }
.vsx-n { display: block; margin-bottom: 6px; color: var(--violet-ink); font: 600 12px/1 var(--f-mono); }
/* decision tree */
.vq { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 10px; }
.vq-n { grid-row: span 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--violet); color: #fff; font: 600 12px/1 var(--f-mono); }
.vq-t { color: var(--ink); font: 600 14px/1.35 var(--f-body); }
.vq-x { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; color: var(--ink-2); font: 13px/1.35 var(--f-body); }
.vq-x b { padding: 2px 7px; border-radius: 6px; background: #fdecea; color: #b42318; font: 600 11px/1.3 var(--f-mono); }
.vq-y { margin: 5px 0 5px 11px; padding: 3px 0 3px 21px; border-left: 2px solid var(--violet-2); color: var(--teal-ink); font: 600 11px/1.3 var(--f-mono); }
.vq-more { border-left-style: dashed; }
.vq-end { padding: 12px 14px; border-radius: 14px; background: #f1effd; }
.vq-end b { display: block; color: var(--violet-ink); font: 600 15px/1.3 var(--f-body); }
.vq-end span { display: block; margin-top: 4px; color: var(--ink-2); font: 12px/1.4 var(--f-mono); }
/* comparison grid */
.vg { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; align-items: center; }
.vg > span { min-width: 0; padding: 8px 0; border-top: 1px solid var(--line); color: var(--muted); font: 12.5px/1.3 var(--f-body); }
.vg > .vg-h { padding-top: 0; border-top: 0; color: var(--muted); font: 600 11px/1.3 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; }
.vg > .vg-n { color: var(--ink); font-weight: 600; }
.vg > .vg-us { color: var(--violet-ink); }
.vg > .vg-p { color: #875400; }
.vg .vpill { justify-self: start; }
/* report (compliance-reports) */
.vdoc-top { display: flex; gap: 14px; align-items: center; }
.vdoc-b { flex: none; padding: 18px 10px; border-radius: 10px; background: var(--violet); color: #fff; font: 700 13px/1 var(--f-mono); }
.vdoc-t { color: var(--ink); font: 600 15px/1.4 var(--f-body); }
.vdoc-l { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vdoc-l span { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); color: var(--ink-2); font: 12px/1.3 var(--f-mono); }
.vdoc-s { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--teal-ink); font: 600 12.5px/1.4 var(--f-mono); }
/* tags on a memory (supply-chain, taxonomies, about) */
.vtg { display: flex; flex-wrap: wrap; gap: 8px; }
.vtg span { padding: 6px 11px; border: 1px solid #d9d4fb; border-radius: 10px; background: #f6f5ff; color: var(--violet-ink); font: 600 12.5px/1.3 var(--f-mono); }
.vtg-soft { margin-bottom: 8px; }
.vtg-soft span { border-color: #cdeee3; background: #effaf6; color: var(--teal-ink); }
/* timeline (roadmap, changelog) */
.vln { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 3px 12px; padding: 0 0 14px; }
.vln:last-child { padding-bottom: 0; }
.vln::before { content: ""; position: absolute; left: 6px; top: 18px; bottom: 0; width: 2px; background: var(--line); }
.vln:last-child::before { content: none; }
.vln-d { grid-row: span 2; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; }
.vln-k { color: var(--muted); font: 600 11px/1.4 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; }
.vln-v { color: var(--ink); font: 600 14px/1.4 var(--f-body); }
.vln-done .vln-d { background: var(--teal); }
.vln-next .vln-d { background: var(--violet); box-shadow: 0 0 0 4px rgba(91, 75, 234, .14); }
.vln-later .vln-d { border: 2px solid var(--violet-2); background: #fff; }
.vln-off .vln-d { background: #c3cbdb; }
.vlog .vln-k { letter-spacing: 0; text-transform: none; font-size: 12px; }
/* questions (faq, wallets) */
.vqa-i { padding: 12px 0; border-top: 1px solid var(--line); }
.vqa-i:first-child { padding-top: 0; border-top: 0; }
.vqa-i:last-child { padding-bottom: 0; }
.vqa-q { position: relative; display: block; padding-right: 34px; color: var(--ink); font: 600 14.5px/1.4 var(--f-body); }
.vqa-q::after { content: "+"; position: absolute; right: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: #efedff; color: var(--violet-ink);
  font: 600 15px/22px var(--f-mono); text-align: center; }
.vqa-open .vqa-q::after { content: "\2212"; }
.vqa-a { display: block; margin-top: 8px; color: var(--ink-2); font: 13.5px/1.5 var(--f-body); }
/* manual */
.vbk-cover { display: block; margin: -20px -22px 16px; padding: 20px 22px; border-radius: 17px 17px 0 0; background: #3d2fc4 linear-gradient(140deg, #2a1d8f, var(--violet)); color: #fff; }
.vbk-k { display: inline-block; padding: 3px 8px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 6px; font: 600 11px/1.2 var(--f-mono); }
.vbk-t { display: block; margin-top: 12px; font: 500 22px/1.2 var(--f-head); }
.vbk-s { display: block; margin-top: 6px; font: 13px/1.4 var(--f-body); }
.vbook .vl-row { padding: 7px 0; font-size: 13px; }
.vbook .vl-k { font-weight: 500; color: var(--ink-2); }
/* mail (subscribe) */
.vml-h { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.vml-i { position: relative; grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; background: #efedff; }
.vml-i::before { content: ""; position: absolute; left: 10px; top: 13px; width: 16px; height: 11px; border: 2px solid var(--violet-ink); border-radius: 2px; }
.vml-i::after { content: ""; position: absolute; left: 15px; top: 10px; width: 8px; height: 8px; border: solid var(--violet-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vml-f { color: var(--muted); font: 600 12px/1.3 var(--f-mono); }
.vml-s { color: var(--ink); font: 600 15px/1.35 var(--f-body); }
.vml-h + .vl-row { border-top: 0; }
/* storage layers */
.vly { padding: 14px 16px; border-radius: 14px; }
.vly b { display: block; color: var(--ink); font: 600 15px/1.35 var(--f-body); }
.vly span { display: block; margin-top: 3px; color: var(--ink-2); font: 12.5px/1.4 var(--f-mono); }
.vly-a { background: #f1effd; }
.vly-b { background: var(--bg-2); }
.vly-x { margin: 0 0 0 22px; padding: 12px 0 12px 20px; border-left: 2px dashed var(--violet-2); color: var(--teal-ink); font: 600 12px/1.35 var(--f-mono); }
/* photos and covers */
.vphoto { max-width: 520px; margin-left: auto; overflow: hidden; border-radius: 20px; box-shadow: 0 24px 56px rgba(11, 24, 48, .2); aspect-ratio: 3 / 2; }
.page .vphoto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vcovers { position: relative; height: 330px; }
.page .vcovers img { position: absolute; width: 72%; border: 1px solid rgba(255, 255, 255, .8); border-radius: 14px; box-shadow: 0 18px 40px rgba(11, 24, 48, .18); }
.vcovers img:nth-child(1) { top: 0; right: 0; z-index: 3; }
.vcovers img:nth-child(2) { top: 64px; right: 16%; z-index: 2; }
.vcovers img:nth-child(3) { top: 128px; right: 4%; z-index: 1; }

/* At a glance */
.page .glance { max-width: var(--wrap); margin: 0 auto 44px; padding: 0 24px; }  /* .page section would void the auto margins */
.glance-in { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); gap: 32px; align-items: start; }
.page .glance-h { margin: 8px 0 0; font-size: clamp(24px, 2.6vw, 30px); }
.glance-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.page .glance-cards .gc { position: relative; display: flex; flex-direction: column; margin: 0; padding: 20px 20px 18px; border: 1px solid var(--line); border-radius: var(--r);
  background: #fff; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.gc:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(13, 27, 52, .06), 0 16px 36px rgba(13, 27, 52, .12); }
.gc:focus-within { outline: 2px solid var(--violet); outline-offset: 2px; }
.gc-num { margin-bottom: 14px; color: var(--violet-2); font: 400 30px/1 var(--f-head); }
.page .gc-title { max-width: none; margin: 0 0 8px; color: var(--ink); font: 600 17px/1.35 var(--f-body); }
.page .gc .gc-title a { color: inherit; text-decoration: none; }
.gc-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.gc-title a:focus-visible { outline: none; }
.page .gc-sum { flex: 1; max-width: none; margin: 0 0 14px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.gc-more { margin-top: auto; color: var(--violet-ink); font: 600 13.5px/1 var(--f-body); }

/* Expanders: heading > button (aria-expanded); panel hidden="until-found" once page.js is ready */
.acc-tools { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.acc-all { padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 600 13.5px/1 var(--f-body); cursor: pointer; }
.acc-all:hover { border-color: var(--violet-2); color: var(--violet-ink); }
.acc-all:focus-visible, .acc-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.page .acc { margin: 0 0 12px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; box-shadow: 0 1px 2px rgba(13, 27, 52, .03), 0 8px 24px rgba(13, 27, 52, .04); }
.page .acc-h { margin: 0; font-size: clamp(20px, 2.2vw, 24px); line-height: 1.25; }
.acc-btn { display: flex; align-items: center; gap: 16px; width: 100%; padding: 20px 24px 10px; border: 0; border-radius: var(--r); background: none; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; }
.acc-btn[aria-expanded="false"] { padding-bottom: 8px; }
.acc-title { flex: 1; min-width: 0; }
.acc-icon { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(91, 75, 234, .09); }
.acc-icon::before, .acc-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--violet-ink); transition: transform .2s; }
.acc-icon::after { transform: rotate(90deg); }
.acc-btn[aria-expanded="true"] .acc-icon::after { transform: rotate(0deg); }
.page .acc-sum { display: none; max-width: none; margin: 0; padding: 0 70px 20px 24px; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.js .acc:not(.is-open) .acc-sum { display: block; }
.acc-body { padding: 6px 24px 24px; }
.js .acc-body:not([data-ready]) { display: none; }
.acc-body[hidden]:not([hidden="until-found"]) { display: none; }
.acc-body > :last-child { margin-bottom: 0; }

@media (max-width: 960px) {
  .phero-in { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .phero-art { max-width: 560px; padding-right: 0; }
  .glance-in { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .glance-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .phero { padding: 104px 0 44px; }
  .page .phero .lead { font-size: 17px; }
  .phero-art { padding: 22px 0 54px; }
  .phero-art .chip-seal { right: 0; }
  .phero-art :is(.chip-share, .chip-note) { left: 0; }
  .phero-art .vbars ~ .chip-share { left: 0; right: auto; }
  .vcard, .phero-art .term, .vphoto { margin-left: 0; }
  .acc-btn { padding: 18px 18px 8px; }
  .page .acc-sum { padding: 0 18px 18px; }
  .acc-body { padding: 6px 18px 20px; }
}
@media (max-width: 560px) {
  .phero-art .chip-share { width: 236px; }
  .vb-row { grid-template-columns: 60px minmax(0, 1fr) 80px; font-size: 11px; }
  .glance-cards { grid-template-columns: minmax(0, 1fr); }
  .vcovers { height: 250px; }
  /* visuals on phones: a note chip follows its card instead of covering it */
  .phero-art:has(> :is(.chip-note, .chip-seal)), .phero-art:has(> .term + .chip-note) { padding-bottom: 6px; }
  .phero-art .chip-note { position: relative; left: 0; bottom: auto; width: fit-content; max-width: calc(100% - 20px); margin: -12px 0 0 12px; }
  .phero-art .chip-seal { position: relative; top: auto; right: auto; width: fit-content; max-width: calc(100% - 20px); margin: -12px 12px 0 auto; }
  .vcard { padding: 16px; }
  .vbk-cover { margin: -16px -16px 14px; padding: 18px 16px; }
  .vsix-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vcl-g { grid-template-columns: minmax(0, 1fr); }
  .vsv .vl-row, .vsv .vl-head { grid-template-columns: 96px minmax(0, 1fr); }
  .phero-art .vdev-tabs span:nth-child(n+3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gc, .acc-icon::before, .acc-icon::after { transition: none; }
}
@media print {
  .phero::before, .phero::after, .phero-art, .acc-tools, .acc-icon, .glance { display: none; }
  .acc-body[hidden] { display: block !important; content-visibility: visible; }
  .js .acc:not(.is-open) .acc-sum { display: none; }
}

/* ---------- Lens C round 1 class fixes (2026-11-11) ---------- */
/* C1-08: legacy page CSS (contact.css) reads these names; undefined, they voided its focus rings and borders */
:root { --accent: var(--violet); --border: var(--line); --ink-muted: var(--muted); --ink-primary: var(--ink); --radius: var(--r); --font-mono: var(--f-mono); }  /* C-02: header, skip link and footer need them too */
/* C1-01: long bare URLs in running text wrap instead of widening the page */
.page :is(p, li, dd, blockquote, figcaption) { overflow-wrap: break-word; }
/* C1-04: identifiers in table cells keep their shape; the table scrolls or stacks instead */
.page :is(td, th) code { overflow-wrap: normal; }
/* C1-14: wide grids show an edge shadow while there is more to scroll */
.page :is(.viz-wrap, .table-wrap) { background: linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)), linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) 100% 0,
  radial-gradient(farthest-side at 0 50%, rgba(13, 27, 52, .16), transparent), radial-gradient(farthest-side at 100% 50%, rgba(13, 27, 52, .16), transparent) 100% 0;
  background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; }
/* C1-05: route emails stay on one line where there is room */
@media (min-width: 641px) { .page table.routes a { word-break: normal; white-space: nowrap; } }
/* C1-03: the routes caption follows its stacked table */
@media (max-width: 640px) { .page table.routes caption { display: block; } }
/* C1-07 (the DESIGN note): on phones every simple data table (class "stack", labels from its header row, set by
   p2hero.py) becomes one card per row; only the wide comparison grids still scroll. ARIA roles on the markup keep
   the table semantics when display changes. */
@media (max-width: 560px) {
  .page table.stack, .page table.stack > tbody, .page table.stack > tbody > tr, .page table.stack > tbody > tr > :is(td, th) { display: block; width: 100%; }
  .page table.stack > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .page table.stack > caption { display: block; text-align: left; }
  .page table.stack > tbody > tr { margin: 0 0 12px; padding: 4px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
  .page table.stack > tbody > tr > :is(td, th) { padding: 9px 0; border-bottom: 1px solid var(--line); background: none; text-align: left; }
  .page table.stack > tbody > tr > :is(td, th):last-child { border-bottom: 0; }
  .page table.stack > tbody > tr > :is(td, th)[data-label]::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: 3px; color: var(--muted);
    font: 600 11.5px/1.3 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; }
  .page .table-wrap:has(> table.stack) { overflow: visible; background: none; }
}

/* Design v3: /overview plays its own video in the hero */
.phero-video { padding: 0; }
.phero-video figure { margin: 0; }
.page .phero-video .video-player { border-radius: var(--r); box-shadow: 0 24px 56px rgba(11, 24, 48, .2); }
.page .phero-video figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-2); }

/* Final 3x3 round 1 fixes (2026-11-11) */
.page svg.svg-dark { background: var(--navy); border-radius: 14px; }   /* C-04: legacy dark diagrams keep their contrast */
.acc-body[hidden] { padding-top: 0; padding-bottom: 0; }               /* A-L2: no blank band under a closed section */
.page p > a.cta { margin: 4px 8px 4px 0; }                              /* C LOW: stacked buttons do not touch on phones */