:root {
  --po-ink: #14161A;
  --po-paper: #FFFFFF;
  --po-sheet: #F1F2F4;
  --po-pixel: #2E3BF2;
  --po-pixelDeep: #1F28C2;
  --po-pixelPale: #E8EAFE;
  --po-oak: #B98A4E;
  --po-oakPale: #EFE5D5;
  --po-fumed: #211A15;
  --po-muted: #555A64;
  --po-line: #D8DBE1;
  --po-primary: #2E3BF2;
  --po-primaryHover: #1F28C2;
  --po-pale: #E8EAFE;
  --po-white: #FFFFFF;
}
/* Pixel & Oak: one visual system for the React homepage, the generated pages and the 404.
   Ink on white, one screen colour ("pixel") for anything you can click or anything
   measured live, oak for structure. Archivo expanded for headlines, Archivo for
   reading, Martian Mono for labels, prices and measurements. */

/* Metric-matched fallbacks so text does not jump when the webfonts arrive. */
/* Measured against Archivo in Chrome (2026-10-08): body text 0.94× Arial's width,
   the expanded 720-weight headline 1.26× Arial Bold's. */
@font-face { font-family: 'Archivo Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 100 549; size-adjust: 98%; ascent-override: 89.6%; descent-override: 21.4%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 550 900; size-adjust: 95%; ascent-override: 92.4%; descent-override: 22.1%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo Wide Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 100 900; size-adjust: 126%; ascent-override: 69.7%; descent-override: 16.7%; line-gap-override: 0%; }

:root {
  --po-body: 'Archivo', 'Archivo Fallback', system-ui, sans-serif;
  --po-display: 'Archivo', 'Archivo Wide Fallback', system-ui, sans-serif;
  --po-mono: 'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --po-radius: 4px;
}

html { scroll-padding-top: 0; -webkit-text-size-adjust: 100%; }
body { font-family: var(--po-body); font-size: 16px; line-height: 1.6; color: var(--po-ink); background: var(--po-paper); overflow-x: clip; -webkit-font-smoothing: antialiased; }
::selection { background: var(--po-pixel); color: #fff; }
*, *::before, *::after { box-sizing: border-box; }
:where(a,button,input,select,textarea,summary):focus-visible { outline: 2px solid var(--po-pixel); outline-offset: 3px; }
:where(input,select,textarea,button) { font: inherit; }
:where(h1,h2,h3) { text-wrap: balance; }
:where(p) { text-wrap: pretty; }
:where(section[id],main[id]) { scroll-margin-top: 84px; }
.font-display { font-family: var(--po-display); font-stretch: 112%; }
.po-container { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }
.po-label { display: block; font-family: var(--po-mono); font-size: 11.5px; font-weight: 500; line-height: 1.5; color: var(--po-muted); }

/* ── Header and mega menu ─────────────────────────────────────────────
   Each top-level item is a native <details>, so the menus open without
   JavaScript; public/site-navigation.js adds hover intent on desktop, one menu
   at a time, Escape and outside-click dismissal. */
:root { --po-header-h: 69px; }
.po-header-mount { display: contents; }
.po-header { position: sticky; top: 0; z-index: 60; background: var(--po-paper); border-bottom: 1px solid var(--po-line); }
.po-header::after { content: ''; position: fixed; left: 0; right: 0; top: var(--po-header-h); bottom: 0; z-index: -1; background: rgba(20,22,26,.34); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.po-header:has(.po-mega[open])::after { opacity: 1; visibility: visible; }
.po-header-row { min-height: 68px; display: flex; align-items: center; gap: 20px; }
.po-logo { display: inline-flex; align-items: center; gap: 11px; color: var(--po-ink); text-decoration: none; flex-shrink: 0; }
.po-mark { width: 21px; height: 25px; color: var(--po-ink); --mark-cap: var(--po-pixel); flex-shrink: 0; }
.po-wordmark { font-family: var(--po-display); font-stretch: 125%; font-weight: 760; font-size: 18px; letter-spacing: -.012em; line-height: 1; white-space: nowrap; }
.po-amp { color: var(--po-pixel); font-weight: 500; }
summary { cursor: pointer; }
:is(.po-mega,.po-mobile-menu,.po-drawer-group,.po-directory,.po-review-full) > summary { list-style: none; }
:is(.po-mega,.po-mobile-menu,.po-drawer-group,.po-directory,.po-review-full) > summary::-webkit-details-marker { display: none; }
.po-desktop-nav { display: flex; align-self: stretch; margin-left: auto; }
.po-nav-list { display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0; }
.po-nav-item, .po-mega { display: flex; align-items: stretch; }
.po-nav-trigger { position: relative; display: flex; align-items: center; padding: 0 13px; font-size: 15px; font-weight: 500; color: var(--po-ink); text-decoration: none; white-space: nowrap; }
.po-nav-trigger::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: -1px; height: 2px; background: var(--po-pixel); transform: scaleX(0); transform-origin: left; transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.po-nav-trigger:hover, .po-mega[open] > .po-nav-trigger, .po-nav-trigger.is-current { color: var(--po-pixel); }
.po-mega[open] > .po-nav-trigger::after, .po-nav-trigger.is-current::after { transform: scaleX(1); }
.po-caret { display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
:is(.po-mega,.po-drawer-group)[open] > summary .po-caret { transform: translateY(2px) rotate(225deg); }

.po-mega-panel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - var(--po-header-h)); overflow-y: auto; background: var(--po-paper); border-top: 1px solid var(--po-line); border-bottom: 1px solid var(--po-ink); box-shadow: 0 40px 60px -30px rgba(20,22,26,.35); }
.po-mega[open] > .po-mega-panel { animation: po-drop .22s cubic-bezier(.2,.8,.2,1); }
@keyframes po-drop { from { opacity: 0; transform: translateY(-8px); } }
.po-mega-grid { display: grid; padding-block: 30px 32px; }
.po-mega-grid-work { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); }
.po-mega-grid-services { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.05fr); }
.po-mega-grid-directory { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .9fr); }
.po-mega-grid-free { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); }
.po-mega-col { min-width: 0; padding: 0 30px; border-left: 1px solid var(--po-line); }
.po-mega-col:first-child { padding-left: 0; border-left: 0; }
.po-mega-label { margin: 0 0 12px; font-family: var(--po-mono); font-size: 11px; line-height: 1.5; color: var(--po-muted); }
.po-mega-links { list-style: none; margin: 0; padding: 0; }
.po-mega-links a { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 6px 0; font-size: 15px; line-height: 1.35; color: var(--po-ink); text-decoration: none; }
.po-mega-links a::before { content: ''; position: absolute; left: -13px; top: 50%; width: 6px; height: 6px; background: var(--po-pixel); transform: translateY(-50%) scale(0); transition: transform .16s cubic-bezier(.2,.8,.2,1); }
.po-mega-links a:hover, .po-mega-links a:focus-visible { color: var(--po-pixel); }
.po-mega-links a:hover::before, .po-mega-links a:focus-visible::before { transform: translateY(-50%) scale(1); }
.po-mega-links small { flex-shrink: 0; font-family: var(--po-mono); font-size: 11px; color: var(--po-muted); white-space: nowrap; }
.po-mega-priced small { font-size: 12.5px; color: var(--po-ink); }
.po-mega-noted a { flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 0; }
.po-mega-noted small { font-size: 10.5px; }
.po-mega-compact { columns: 2; column-gap: 22px; }
.po-mega-compact li { break-inside: avoid; }
.po-mega-compact a { padding: 5px 0; font-size: 14px; }
.po-mega-more { display: inline-flex; gap: 8px; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--po-pixel); text-decoration: underline; text-underline-offset: 4px; }
.po-mega-more::after { content: '→'; display: inline-block; transition: transform .15s; }
.po-mega-more:hover::after { transform: translateX(3px); }
.po-mega-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.po-mega-card { display: grid; gap: 10px; color: var(--po-ink); text-decoration: none; }
.po-mega-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: top; border: 1px solid var(--po-ink); border-radius: var(--po-radius); transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s cubic-bezier(.2,.8,.2,1); }
.po-mega-card:hover img { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--po-pixel); }
.po-mega-card b { font-size: 15px; font-weight: 650; }
.po-mega-card:hover b { color: var(--po-pixel); }
.po-mega-card small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--po-muted); }
.po-mega-feature { align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-left: 10px; padding: 24px; background: var(--po-fumed); color: #E2D7C8; border-radius: var(--po-radius); }
.po-mega-acorn { width: 26px; height: 31px; color: var(--po-oakPale); --mark-cap: #8F96FF; }
.po-mega-feature b { font-family: var(--po-display); font-stretch: 125%; font-weight: 720; font-size: 21px; line-height: 1.1; letter-spacing: -.015em; color: #fff; }
.po-mega-feature p { margin: 0 0 6px; font-size: 14px; line-height: 1.55; }
.po-mega-feature .po-button { margin-top: 6px; }
.po-mega-title { display: block; font-family: var(--po-display); font-stretch: 118%; font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -.015em; color: var(--po-ink); text-decoration: none; }
.po-mega-title:hover { color: var(--po-pixel); }
.po-mega-intro p:not(.po-mega-label) { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--po-muted); }
.po-mega-foot { padding: 11px 0; background: var(--po-sheet); border-top: 1px solid var(--po-line); font-family: var(--po-mono); font-size: 11px; color: var(--po-muted); }
.po-mega-foot a { color: var(--po-ink); }
.po-mobile-menu { display: none; }
.po-skip { position: fixed; left: 20px; top: -100px; padding: 12px 18px; background: var(--po-paper); color: var(--po-ink); border: 2px solid var(--po-pixel); z-index: 200; }
.po-skip:focus { top: 10px; }
@media (max-width: 1180px) {
  .po-nav-trigger { padding: 0 9px; font-size: 14.5px; }
  .po-nav-trigger::after { left: 9px; right: 9px; }
  .po-mega-col { padding: 0 22px; }
  .po-mega-grid-services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .po-mega-feature { display: none; }
}

/* ── Buttons and links ──────────────────────────────────────────────── */
.po-button { display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 48px; padding: 12px 20px; background: var(--po-pixel); color: #fff; border: 1px solid var(--po-pixel); border-radius: var(--po-radius); font-family: var(--po-body); font-size: 15px; font-weight: 600; line-height: 1.25; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.po-button:hover { background: var(--po-pixelDeep); border-color: var(--po-pixelDeep); color: #fff; }
.po-button:disabled { cursor: wait; opacity: .6; }
.po-button-quiet { background: transparent; color: var(--po-ink); border-color: var(--po-ink); }
.po-button-quiet:hover { background: var(--po-ink); border-color: var(--po-ink); color: #fff; }
.po-header-cta { min-height: 40px; padding: 9px 16px; font-size: 14px; }
/* The underline is drawn under the words only, never under the arrow. */
.po-text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--po-pixel); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(50% + .78em) / calc(100% - 1.45em) 1px no-repeat; }
.po-text-link::after { content: '→'; display: inline-block; transition: transform .15s; }
.po-text-link:hover { color: var(--po-pixelDeep); background-size: calc(100% - 1.45em) 2px; }
.po-text-link:hover::after { transform: translateX(3px); }
.po-text-link-quiet { color: var(--po-ink); background-size: 100% 1px; }
.po-text-link-quiet:hover { color: var(--po-pixel); background-size: 100% 2px; }
.po-text-link-quiet::after { content: none; }

/* ── Hero and Fig. 1 ────────────────────────────────────────────────── */
/* No overflow:hidden on the hero: it would stop the figure from sticking. */
.po-hero { padding-block: 48px 24px; border-bottom: 1px solid var(--po-line); }
.po-hero-title { font-family: var(--po-display); font-stretch: 125%; font-weight: 720; font-size: clamp(36px, 5.2vw, 74px); line-height: 1.01; letter-spacing: -.03em; max-width: 15em; margin: 0; }
.po-hero-grid { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); grid-template-rows: auto 1fr; column-gap: 44px; margin-top: 30px; }
.po-hero-intro { grid-column: 1; grid-row: 1; padding-top: 8px; }
.po-hero-steps { grid-column: 1; grid-row: 2; padding-bottom: 18vh; }
.po-hero-figure { grid-column: 2; grid-row: 1 / 3; }
.po-hero-sticky { position: sticky; top: calc(var(--po-header-h) + max(16px, (100vh - var(--po-header-h) - 610px) / 2)); }
.po-hero-sticky .po-fig { max-width: calc((100vh - var(--po-header-h) - 130px) * 1.404); margin-left: auto; }

/* The scroll story: steps dim until they reach the middle of the screen. */
.po-step { transition: opacity .35s ease; }
.js .po-step:not(.is-active) { opacity: .24; }
.po-hero-steps .po-step { padding-block: 36px; }
.js .po-hero-steps .po-step { display: flex; flex-direction: column; justify-content: center; min-height: 66vh; }
.po-step-eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--po-mono); font-size: 11.5px; color: var(--po-pixel); }
.po-step-eyebrow::before { content: ''; width: 8px; height: 8px; background: currentColor; }
.po-step h2 { margin: 12px 0 0; font-family: var(--po-display); font-stretch: 125%; font-weight: 720; font-size: clamp(26px, 2.7vw, 40px); line-height: 1.05; letter-spacing: -.026em; }
.po-step-outro h2 { font-size: clamp(30px, 3.5vw, 50px); }
.po-hero-steps .po-step > p { margin: 14px 0 0; max-width: 30em; font-size: 17.5px; line-height: 1.6; }
.po-step .po-step-reading { display: grid; gap: 3px; margin-top: 22px; padding: 12px 14px; max-width: 30em; background: var(--po-sheet); border-left: 3px solid var(--po-pixel); }
.po-step-reading span { font-family: var(--po-mono); font-size: 11px; color: var(--po-muted); }
.po-step-reading b { font-family: var(--po-mono); font-size: 13px; font-weight: 500; line-height: 1.5; }
.po-step-reading b.is-live { color: var(--po-pixel); }
.po-step-outro .po-hero-actions { margin-top: 26px; }
.po-rail { display: flex; flex-wrap: wrap; gap: 2px 20px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--po-line); }
.po-rail button { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0; background: none; border: 0; font-family: var(--po-mono); font-size: 11.5px; color: var(--po-muted); cursor: pointer; }
.po-rail i { width: 9px; height: 9px; border: 1px solid currentColor; transition: background-color .2s; }
.po-rail button:hover, .po-rail button.is-active { color: var(--po-pixel); }
.po-rail button.is-active i { background: var(--po-pixel); border-color: var(--po-pixel); }
.po-plate { transition: opacity .35s ease; }
.po-plate.is-dim { opacity: .34; }
.po-plate.is-active .po-plate-top { stroke: var(--po-pixel); stroke-width: 2; }
.po-callouts { transition: opacity .3s ease, visibility .3s; }
.po-fig.is-story .po-callouts { opacity: 0; visibility: hidden; }
.po-x-leader { transition: opacity .3s ease; }
.po-fig.is-story .po-x-leader { opacity: 0; }
.po-lede { font-size: 19px; line-height: 1.6; max-width: 29em; margin: 0; }
.po-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin-top: 28px; }
.po-offer-note { margin-top: 12px; font-family: var(--po-mono); font-size: 11.5px; line-height: 1.6; color: var(--po-muted); }

.po-fig { margin: 0; }
.po-fig-stage { position: relative; width: 100%; }
.po-fig-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.po-fig figcaption { display: flex; gap: 10px; align-items: baseline; margin-top: 10px; font-family: var(--po-mono); font-size: 11.5px; line-height: 1.6; color: var(--po-muted); }
.po-live { flex-shrink: 0; width: 8px; height: 8px; background: var(--po-pixel); transform: translateY(-1px); animation: po-blink 1.1s steps(2, jump-none) infinite; }
.po-live.is-done { animation: none; }
@keyframes po-blink { 50% { opacity: .15; } }

.po-x-edge { stroke: var(--po-ink); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke .2s; }
.po-x-pixel { fill: var(--po-pixel); }
.po-x-pixel-soft { fill: var(--po-pixel); opacity: .4; }
.po-x-ink { fill: var(--po-ink); }
.po-x-outline { fill: none; stroke: var(--po-pixel); stroke-width: 1; vector-effect: non-scaling-stroke; }
.po-x-code text { font-family: var(--po-mono); font-size: 9.5px; fill: var(--po-ink); }
.po-x-rule { fill: none; stroke: var(--po-ink); stroke-width: 1; opacity: .5; vector-effect: non-scaling-stroke; }
.po-x-lcp { fill: none; stroke: var(--po-pixel); stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.po-x-tag { font-family: var(--po-mono); font-size: 8px; fill: #fff; }
.po-x-node { fill: var(--po-paper); stroke: var(--po-ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.po-x-grain :is(path,ellipse) { fill: none; stroke: #7E5730; stroke-width: 1; opacity: .55; vector-effect: non-scaling-stroke; }
.po-x-leader { fill: none; stroke: var(--po-ink); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.po-plate-body { transition: transform .25s cubic-bezier(.2,.8,.2,1); }

.po-callouts { list-style: none; margin: 0; padding: 0; }
.po-callout { display: grid; gap: 2px; }
.po-callout-name { font-size: 14px; font-weight: 650; line-height: 1.3; }
.po-callout-value { font-family: var(--po-mono); font-size: 11.5px; line-height: 1.45; color: var(--po-muted); }
.po-callout-value.is-live { color: var(--po-pixel); }

@media (min-width: 901px) {
  .po-callout { position: absolute; left: 70.6%; right: -6px; top: var(--top); transition: transform .25s; }
  .po-plate:hover .po-plate-body { transform: translateY(-7px); }
  .po-plate:hover .po-plate-top { stroke: var(--po-pixel); }
  .po-fig:has(.po-callout[data-layer=surface]:hover) .po-plate[data-layer=surface] .po-plate-body,
  .po-fig:has(.po-callout[data-layer=structure]:hover) .po-plate[data-layer=structure] .po-plate-body,
  .po-fig:has(.po-callout[data-layer=speed]:hover) .po-plate[data-layer=speed] .po-plate-body,
  .po-fig:has(.po-callout[data-layer=answers]:hover) .po-plate[data-layer=answers] .po-plate-body,
  .po-fig:has(.po-callout[data-layer=oak]:hover) .po-plate[data-layer=oak] .po-plate-body { transform: translateY(-7px); }
  .po-fig:has(.po-plate[data-layer=surface]:hover) .po-callout[data-layer=surface],
  .po-fig:has(.po-plate[data-layer=structure]:hover) .po-callout[data-layer=structure],
  .po-fig:has(.po-plate[data-layer=speed]:hover) .po-callout[data-layer=speed],
  .po-fig:has(.po-plate[data-layer=answers]:hover) .po-callout[data-layer=answers],
  .po-fig:has(.po-plate[data-layer=oak]:hover) .po-callout[data-layer=oak] { transform: translateX(4px); }
}
/* Narrow desktops: the measured values move into the scroll steps; the figure keeps just the labels. */
@media (min-width: 901px) and (max-width: 1240px) {
  .po-callout-value { display: none; }
  .po-callout-name { font-size: 13px; }
}
@media (prefers-reduced-motion: no-preference) {
  .po-plate { animation: po-explode 1.05s cubic-bezier(.16,.84,.24,1) both; animation-delay: calc(240ms + var(--i) * 35ms); }
  .po-callout { animation: po-arrive .45s ease-out both; animation-delay: calc(820ms + var(--i) * 90ms); }
}
@keyframes po-explode { from { transform: translateY(var(--from)); } to { transform: translateY(0); } }
@keyframes po-arrive { from { opacity: 0; translate: -6px 0; } to { opacity: 1; translate: 0 0; } }

/* ── Sections ───────────────────────────────────────────────────────── */
.po-section { padding-block: 96px; border-bottom: 1px solid var(--po-line); }
.po-section-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; align-items: end; margin-bottom: 52px; }
.po-section-head h2, .po-about-copy h2, .po-contact h2 { font-family: var(--po-display); font-stretch: 125%; font-weight: 720; font-size: clamp(30px, 3.7vw, 52px); line-height: 1.03; letter-spacing: -.028em; margin: 0; }
.po-section-head p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--po-muted); max-width: 32em; }

/* Review */
.po-review { background: var(--po-sheet); border-bottom: 1px solid var(--po-line); }
.po-review-grid { display: grid; grid-template-columns: 170px minmax(0, 1fr) 270px; gap: 20px 44px; padding-block: 46px; align-items: start; }
.po-review-grid > .po-label { margin: 7px 0 0; }
.po-review-quote { margin: 0; }
.po-review-quote p { margin: 0; font-family: var(--po-display); font-stretch: 112%; font-weight: 600; font-size: clamp(21px, 2.15vw, 29px); line-height: 1.28; letter-spacing: -.014em; }
.po-review-meta { display: grid; gap: 3px; font-size: 14px; line-height: 1.5; color: var(--po-muted); padding-top: 4px; }
.po-review-meta b { color: var(--po-ink); }
.po-stars { color: var(--po-oak); letter-spacing: 3px; font-size: 15px; }
.po-review-full { grid-column: 2 / 4; border-top: 1px solid var(--po-line); }
.po-review-full summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; color: var(--po-pixel); }
.po-review-full summary::after { content: '+'; font-family: var(--po-mono); font-size: 16px; }
.po-review-full[open] summary::after { content: '−'; }
.po-review-full > div { columns: 2 320px; column-gap: 44px; padding-bottom: 8px; }
.po-review-full p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.6; break-inside: avoid; }
.po-testimonials { grid-column: 2 / 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; margin-top: 8px; }
.po-testimonial { margin: 0; padding-top: 20px; border-top: 1px solid var(--po-ink); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.po-testimonial blockquote { margin: 0; }
.po-testimonial blockquote p { margin: 0; font-size: 16px; line-height: 1.62; }
.po-testimonial figcaption { display: grid; gap: 3px; }
.po-testimonial figcaption b { font-size: 15px; font-weight: 650; }
.po-testimonial figcaption span { font-family: var(--po-mono); font-size: 11.5px; line-height: 1.6; color: var(--po-muted); }
.po-testimonial figcaption a { color: var(--po-muted); text-decoration: underline; text-underline-offset: 3px; }
.po-testimonial figcaption a:hover { color: var(--po-pixel); }

/* Work */
.po-work-list { display: grid; }
.po-work { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 52px; padding-block: 44px; border-top: 1px solid var(--po-line); align-items: start; }
.po-work:first-child { border-top: 0; padding-top: 0; }
.po-shot { display: block; border: 1px solid var(--po-ink); border-radius: var(--po-radius); overflow: hidden; background: var(--po-sheet); color: var(--po-ink); text-decoration: none; transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s cubic-bezier(.2,.8,.2,1); }
.po-shot:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--po-pixel); }
.po-shot-bar { display: flex; justify-content: space-between; align-items: center; padding: 9px 13px; font-family: var(--po-mono); font-size: 11.5px; border-bottom: 1px solid var(--po-ink); background: var(--po-paper); }
.po-shot img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: top; }
.po-work-copy { padding-top: 6px; }
.po-work-copy h3 { font-family: var(--po-display); font-stretch: 112%; font-weight: 700; font-size: 30px; line-height: 1.1; letter-spacing: -.018em; margin: 8px 0 14px; }
.po-work-copy > p { margin: 0; font-size: 16.5px; line-height: 1.6; }
.po-facts { margin: 22px 0 0; border-top: 1px solid var(--po-ink); }
.po-facts > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--po-line); font-size: 14.5px; line-height: 1.45; }
.po-facts dt { font-family: var(--po-mono); font-size: 11px; color: var(--po-muted); padding-top: 2px; }
.po-facts dd { margin: 0; }
.po-work-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 26px; margin-top: 12px; }
.po-work-note { font-family: var(--po-mono); font-size: 11.5px; color: var(--po-muted); padding-block: 12px; }
.po-work-more { margin: 8px 0 0; padding-top: 22px; border-top: 1px solid var(--po-ink); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; font-size: 15.5px; color: var(--po-muted); }
.po-parity { display: grid; gap: 12px; padding: 26px 28px 24px; border: 1px solid var(--po-ink); border-radius: var(--po-radius); background: var(--po-paper); }
.po-parity-title { font-family: var(--po-mono); font-size: 11.5px; color: var(--po-muted); margin-bottom: 6px; }
.po-parity-row { display: grid; grid-template-columns: 148px minmax(0, 1fr) 70px; align-items: center; gap: 14px; font-size: 14.5px; }
.po-parity-row i { height: 16px; background: var(--po-ink); }
.po-parity-row:last-of-type i { background: var(--po-pixel); }
.po-parity-row b { font-family: var(--po-mono); font-size: 11.5px; font-weight: 500; text-align: right; }
.po-parity-note { margin-top: 8px; font-size: 14px; color: var(--po-muted); }

/* Prices */
.po-prices { background: var(--po-sheet); }
.po-price-table { width: 100%; border-collapse: collapse; }
.po-price-table thead th { padding: 0 20px 12px 0; text-align: left; font-family: var(--po-mono); font-size: 11.5px; font-weight: 500; color: var(--po-muted); border-bottom: 1px solid var(--po-ink); }
.po-price-table tbody :is(th,td) { padding: 21px 20px 21px 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--po-line); }
.po-price-table tbody th { width: 25%; font-size: 19px; font-weight: 650; letter-spacing: -.005em; }
.po-price-table tbody th a { color: var(--po-ink); text-decoration: none; background: linear-gradient(var(--po-pixel), var(--po-pixel)) 0 100% / 0 2px no-repeat; transition: background-size .2s; }
.po-price-table tbody tr:hover th a, .po-price-table tbody th a:focus-visible { background-size: 100% 2px; color: var(--po-pixel); }
.po-price-table td { font-size: 15.5px; color: var(--po-muted); }
.po-price-table td.po-price { width: 14%; font-family: var(--po-mono); font-size: 16px; font-weight: 500; color: var(--po-ink); white-space: nowrap; }
.po-price span { font-size: 11.5px; color: var(--po-muted); }
.po-price-table td.po-time { width: 14%; font-family: var(--po-mono); font-size: 12.5px; white-space: nowrap; padding-right: 0; }
.po-prices-foot { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 18px; }

/* Process */
.po-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--po-ink); }
.po-timeline li { position: relative; padding: 24px 22px 0 0; }
.po-timeline li::before { content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--po-pixel); }
.po-when { display: block; font-family: var(--po-mono); font-size: 11.5px; color: var(--po-pixel); }
.po-timeline h3 { margin: 10px 0 6px; font-size: 17px; font-weight: 650; line-height: 1.3; }
.po-timeline p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--po-muted); }

/* About */
.po-about-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: start; }
.po-about-copy h2 { margin-bottom: 26px; }
.po-about-copy p { margin: 16px 0 0; font-size: 18px; line-height: 1.65; max-width: 35em; }
.po-about-links { display: flex; flex-wrap: wrap; gap: 0 26px; margin-top: 14px; }
.po-spec { margin: 6px 0 0; border-top: 1px solid var(--po-ink); }
.po-spec > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--po-line); }
.po-spec dt { font-family: var(--po-mono); font-size: 11.5px; line-height: 1.6; color: var(--po-muted); }
.po-spec dd { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.45; }

/* Workshop */
.po-workshop { background: var(--po-sheet); }
.po-workshop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
.po-shelf { display: flex; flex-direction: column; padding: 28px; background: var(--po-paper); border: 1px solid var(--po-line); border-radius: var(--po-radius); }
.po-shelf h3 { margin: 0; font-family: var(--po-display); font-stretch: 112%; font-weight: 700; font-size: 23px; letter-spacing: -.015em; }
.po-shelf h3 a { color: inherit; text-decoration: none; }
.po-shelf h3 a:hover { color: var(--po-pixel); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.po-shelf > p { margin: 6px 0 18px; font-size: 15px; line-height: 1.55; color: var(--po-muted); }
.po-shelf ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--po-ink); }
.po-shelf li a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--po-line); color: var(--po-ink); text-decoration: none; font-size: 15px; }
.po-shelf li b { font-weight: 600; }
.po-shelf li span { font-family: var(--po-mono); font-size: 11px; color: var(--po-muted); text-align: right; }
.po-shelf li a:hover b { color: var(--po-pixel); text-decoration: underline; text-underline-offset: 4px; }
.po-demo-row { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 22px; padding: 18px 0 0; border-top: 1px solid var(--po-line); }
.po-demo-row p { margin: 0; font-size: 15.5px; color: var(--po-muted); max-width: 46em; }
.po-demo-row b { color: var(--po-ink); }
.po-loading { padding-top: 24px; font-family: var(--po-mono); font-size: 12px; color: var(--po-muted); }

/* Contact */
.po-contact { padding-block: 96px; }
.po-contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.po-contact-copy p { margin: 18px 0 0; font-size: 18px; line-height: 1.6; max-width: 26em; }
.po-contact-direct { display: grid; gap: 8px; margin-top: 28px; font-family: var(--po-mono); font-size: 13.5px; }
.po-contact-direct a { width: fit-content; color: var(--po-ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--po-line); }
.po-contact-direct a:hover { color: var(--po-pixel); text-decoration-color: currentColor; }
.po-contact form { padding: 32px; background: var(--po-paper); border: 1px solid var(--po-ink); border-radius: var(--po-radius); box-shadow: 10px 10px 0 var(--po-pixelPale); }
.po-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.po-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin-bottom: 18px; font-size: 14px; font-weight: 600; }
.po-field input, .po-field select, .po-field textarea { display: block; width: 100%; min-height: 48px; padding: 11px 12px; background: #fff; color: var(--po-ink); border: 1px solid #A3A8B2; border-radius: 3px; font-size: 16px; font-weight: 400; line-height: 1.4; }
.po-field :is(input,select,textarea):focus-visible { border-color: var(--po-pixel); outline-offset: 0; }
.po-field input::placeholder, .po-field textarea::placeholder { color: #6E737D; }
.po-field textarea { resize: vertical; min-height: 110px; }
.po-contact .po-button { margin-top: 4px; }
.po-form-note { margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--po-muted); }
.po-form-note a { color: inherit; text-decoration: underline; }
.po-form-message { margin: 0 0 18px; padding: 13px 14px; font-size: 14.5px; line-height: 1.55; background: var(--po-pixelPale); border-left: 3px solid var(--po-pixel); }
.po-form-error { background: #FCEDEC; border-left-color: #B3261E; color: #7D1B15; }
.po-form-honey { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.po-footer { background: var(--po-fumed); color: #CDBFAE; padding-block: 68px 24px; font-size: 14.5px; }
.po-footer .po-logo { color: var(--po-oakPale); }
.po-footer .po-mark { color: var(--po-oakPale); --mark-cap: #8F96FF; }
.po-footer-grid { display: grid; grid-template-columns: 1.45fr 1fr 1fr 1.25fr; gap: 44px; }
.po-footer-brand > p { margin: 24px 0 10px; font-family: var(--po-display); font-stretch: 125%; font-weight: 700; font-size: 27px; line-height: 1.08; letter-spacing: -.02em; color: #fff; }
.po-footer-brand > span { display: block; max-width: 22em; font-size: 14px; line-height: 1.6; color: #B6A796; }
.po-footer h2 { margin: 0 0 14px; font-family: var(--po-mono); font-size: 11.5px; font-weight: 500; color: #A39380; }
.po-footer ul { list-style: none; margin: 0; padding: 0; }
.po-footer li { margin-block: 4px; }
.po-footer a { display: inline-flex; padding-block: 4px; color: #EDE3D6; text-decoration: none; }
.po-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.po-footer-contact > a { display: flex; width: fit-content; overflow-wrap: anywhere; }
.po-footer-contact p { margin-top: 12px; max-width: 240px; font-size: 13px; line-height: 1.7; color: #B6A796; }
.po-socials { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 12px; }
.po-directory { margin-top: 48px; border-top: 1px solid #ffffff26; border-bottom: 1px solid #ffffff26; }
.po-directory summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 60px; font-size: 14px; color: #EDE3D6; }
.po-directory summary > span { font-family: var(--po-mono); font-size: 18px; transition: transform .2s; }
.po-directory[open] summary > span { transform: rotate(45deg); }
.po-directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 16px 0 40px; }
.po-directory-grid a { font-size: 13.5px; }
.po-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding-top: 20px; padding-right: 72px; font-family: var(--po-mono); font-size: 11px; color: #A39380; }
.po-footer :where(a,summary):focus-visible { outline-color: #A9AEFF; }

/* ── Chat ───────────────────────────────────────────────────────────── */
.po-chat-trigger { position: fixed; right: 20px; bottom: 20px; z-index: 70; width: 52px; height: 52px; display: grid; place-items: center; background: var(--po-ink); color: #fff; border: 0; border-radius: var(--po-radius); box-shadow: 4px 4px 0 var(--po-pixel); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.po-chat-trigger:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--po-pixel); }
.po-chat-window { position: fixed; right: 20px; bottom: 86px; width: min(380px, calc(100vw - 32px)); height: min(520px, calc(100dvh - 110px)); z-index: 80; }

/* ── Generated pages ────────────────────────────────────────────────────
   The ~100 static pages are written with Tailwind utilities by
   scripts/generate-pages.mjs. These rules bring their shared patterns into the
   same system without touching each template: the pill eyebrow becomes a mono
   label, headlines go wide, numbered squares become pixels, cards lose their
   soft shadows. */
.po-inner .site-content { padding-bottom: 88px; }
.po-inner .site-content > .max-w-6xl, .po-inner .site-content > section.max-w-6xl { width: min(1240px, calc(100% - 64px)); max-width: none; padding-inline: 0; }
.po-inner .site-content > header { padding-top: 64px; padding-bottom: 8px; }
.po-inner .site-content > header > span:first-child, .po-inner .site-content > header > nav + span { display: inline-block; padding: 0; background: none; border-radius: 0; font-family: var(--po-mono); font-size: 11.5px; font-weight: 500; color: var(--po-muted); }
.po-inner .site-content > header h1 { max-width: 15em; font-family: var(--po-display); font-stretch: 125%; font-weight: 720; font-size: clamp(34px, 4.4vw, 62px); line-height: 1.04; letter-spacing: -.028em; }
.po-inner .site-content > header > p { max-width: 40em; font-size: 18.5px; line-height: 1.6; color: var(--po-ink); }
.po-inner .site-content > header.grid h1 { font-size: clamp(30px, 3.3vw, 46px); }
.po-inner .site-content h2.font-display:is(.text-2xl,.text-3xl) { font-stretch: 125%; font-weight: 700; font-size: clamp(25px, 2.5vw, 35px); line-height: 1.12; letter-spacing: -.022em; }
.po-inner .site-content h2.font-display.text-lg { font-stretch: 108%; font-weight: 650; letter-spacing: -.01em; }
.po-inner .site-content h3.font-display, .po-inner .site-content h4.font-display { font-stretch: 108%; font-weight: 650; letter-spacing: -.01em; }
.po-inner .site-content :is(h2,h3) { overflow-wrap: anywhere; }
.po-inner .site-content :is(table,pre) { max-width: 100%; }
.po-inner .site-content .rounded-full:is(.bg-brand-sky,.bg-brand-mist) { border-radius: 3px; }
.po-inner .site-content span.rounded-full.bg-brand-sky { font-family: var(--po-mono); font-weight: 500; letter-spacing: 0; }
.po-inner .site-content :is(.w-6.h-6,.w-7.h-7,.w-9.h-9).rounded-md, .po-inner .site-content :is(.w-6.h-6,.w-7.h-7,.w-9.h-9).rounded-lg { border-radius: 0; font-family: var(--po-mono); font-weight: 500; }
.po-inner .site-content span:is(.w-2\.5.h-2\.5,.w-3.h-3).rounded-full:is(.bg-red-400,.bg-amber-400,.bg-emerald-400) { display: none; }
.po-inner .site-content figure.rounded-2xl > div.bg-slate-50 { background: var(--po-paper); border-bottom-color: var(--po-ink); }
.po-inner .site-content figure.rounded-2xl { border-color: var(--po-ink); }
.po-inner .site-content .bg-brand-navy { background-color: var(--po-fumed); }
.po-inner .site-content .bg-brand-navy :is(.text-slate-200,.text-slate-300) { color: #D9CDBE; }
.po-inner .site-content :is(a.bg-brand-blue, a.bg-white, a[class*="bg-white/10"]) { border-radius: var(--po-radius); }
.po-inner .site-content .border-slate-200 { border-color: var(--po-line); }
.po-inner .site-content .hover\:border-brand-blue\/40:hover { border-color: var(--po-ink); box-shadow: 6px 6px 0 var(--po-pixelPale); }
.po-inner .site-content table thead th { font-family: var(--po-mono); font-size: 11.5px; font-weight: 500; }
.po-inner .site-content .uppercase { text-transform: none; letter-spacing: 0; }
.po-inner .site-content .tracking-tight { letter-spacing: -.012em; }
.po-inner .site-content nav[aria-label="Breadcrumb"], .po-inner .site-content nav[aria-label="breadcrumb"] { font-family: var(--po-mono); font-size: 11.5px; }
.prose-post { color: var(--po-ink); }
.prose-post a { color: var(--po-pixel); }

/* ── Directory (/answering-services/) ───────────────────────────────── */
.po-dir .site-content > section { margin-top: 56px; }
.po-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; font-family: var(--po-mono); font-size: 11.5px; color: var(--po-muted); }
.po-crumbs a { color: var(--po-muted); text-decoration: underline; text-underline-offset: 3px; }
.po-crumbs a:hover { color: var(--po-pixel); }
.po-dir-head { padding-top: 56px; }
.po-dir-head h1 { margin: 10px 0 0; max-width: 16em; font-family: var(--po-display); font-stretch: 125%; font-weight: 720; font-size: clamp(32px, 4.2vw, 58px); line-height: 1.04; letter-spacing: -.028em; }
.po-dir-head > p { margin: 20px 0 0; max-width: 42em; font-size: 18px; line-height: 1.6; }
.po-dir-head > p a { color: var(--po-pixel); text-decoration: underline; text-underline-offset: 3px; }
.po-dir-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 34px 0 0; border-top: 1px solid var(--po-ink); }
.po-dir-stats div { padding: 14px 20px 0 0; }
.po-dir-stats dt { font-family: var(--po-mono); font-size: 11px; color: var(--po-muted); }
.po-dir-stats dd { margin: 4px 0 0; font-size: 19px; font-weight: 650; }
.po-dir-h2, .po-dir .site-content section > h2 { margin: 0 0 18px; font-family: var(--po-display); font-stretch: 118%; font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -.02em; }
.po-dir-calc { display: grid; gap: 10px; padding: 20px 22px; margin-bottom: 18px; background: var(--po-sheet); border: 1px solid var(--po-line); border-radius: var(--po-radius); }
.po-dir-calc-intro { margin: 0; font-size: 15px; color: var(--po-muted); }
.po-dir-calc-fields { display: flex; flex-wrap: wrap; align-items: end; gap: 14px 22px; }
.po-dir-calc-fields > label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.po-dir-calc-fields input[type=number] { width: 132px; min-height: 44px; padding: 9px 11px; border: 1px solid #A3A8B2; border-radius: 3px; background: #fff; font-family: var(--po-mono); font-size: 15px; }
.po-dir-calc fieldset { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; }
.po-dir-calc legend { width: 100%; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.po-chip { position: relative; }
.po-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.po-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--po-ink); border-radius: 3px; background: #fff; font-size: 14px; font-weight: 600; }
.po-chip input:checked + span { background: var(--po-ink); color: #fff; }
.po-chip input:focus-visible + span { outline: 2px solid var(--po-pixel); outline-offset: 2px; }
.po-dir-table-wrap { overflow-x: auto; border-top: 1px solid var(--po-ink); }
.po-dir-table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 14.5px; }
.po-dir-table thead th { position: sticky; top: 0; padding: 12px 14px 10px 0; text-align: left; font-family: var(--po-mono); font-size: 11px; font-weight: 500; color: var(--po-muted); background: var(--po-paper); border-bottom: 1px solid var(--po-line); white-space: nowrap; }
.po-dir-table tbody :is(th,td) { padding: 13px 14px 13px 0; text-align: left; border-bottom: 1px solid var(--po-line); vertical-align: baseline; }
.po-dir-table tbody th { font-size: 15.5px; font-weight: 650; }
.po-dir-table tbody th a { color: var(--po-ink); text-decoration: none; }
.po-dir-table tbody tr:hover th a { color: var(--po-pixel); text-decoration: underline; text-underline-offset: 3px; }
.po-num { font-family: var(--po-mono); font-size: 13.5px; white-space: nowrap; }
.po-num span { font-size: 11px; color: var(--po-muted); }
.po-num .po-free { display: block; margin-top: 2px; font-size: 10.5px; color: var(--po-pixel); }
td[data-dir-cost] { color: var(--po-pixel); font-weight: 500; }
.po-type { display: inline-block; padding: 2px 7px; font-family: var(--po-mono); font-size: 11px; border: 1px solid currentColor; border-radius: 2px; }
.po-type-ai { color: var(--po-pixel); }
.po-type-live { color: #6B4A22; }
.po-type-hybrid { color: var(--po-ink); }
.po-dir-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.po-dir-facts { margin: 0; border-top: 1px solid var(--po-ink); }
.po-dir-facts div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--po-line); }
.po-dir-facts dt { font-family: var(--po-mono); font-size: 11.5px; color: var(--po-muted); padding-top: 2px; }
.po-dir-facts dd { margin: 0; font-size: 15px; }
.po-dir-plans { width: 100%; border-collapse: collapse; font-size: 14.5px; border-top: 1px solid var(--po-ink); }
.po-dir-plans thead th { padding: 10px 12px 8px 0; text-align: left; font-family: var(--po-mono); font-size: 11px; font-weight: 500; color: var(--po-muted); border-bottom: 1px solid var(--po-line); }
.po-dir-plans tbody :is(th,td) { padding: 11px 12px 11px 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--po-line); }
.po-dir-plans tbody th { font-weight: 650; }
.po-dir-plans tbody th span { display: block; font-family: var(--po-mono); font-size: 11px; font-weight: 400; color: var(--po-muted); }
.po-dir-grid h2 { margin: 0 0 12px; font-size: 18px; font-weight: 650; letter-spacing: -.005em; }
.po-dir-grid h2:not(:first-child) { margin-top: 26px; }
.po-dir-sep th { padding: 18px 0 8px !important; font-family: var(--po-mono); font-size: 11.5px !important; font-weight: 500 !important; color: var(--po-muted); border-bottom: 1px solid var(--po-ink) !important; }
.po-dir-note { margin: 16px 0 0; padding: 12px 14px; font-size: 14.5px; line-height: 1.55; background: var(--po-oakPale); border-left: 3px solid var(--po-oak); }
.po-dir-empty { font-size: 14.5px; color: var(--po-muted); }
@media (max-width: 700px) {
  .po-dir-table-wrap { overflow: visible; }
  .po-dir-table, .po-dir-table tbody { display: block; min-width: 0; }
  .po-dir-table thead, .po-dir-plans thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .po-dir-table tr.po-dir-sep { display: block; }
  .po-dir-table tr.po-dir-sep th { display: block; }
  .po-dir-table tr[data-dir-row] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 10px; padding: 14px 0 12px; border-bottom: 1px solid var(--po-line); }
  .po-dir-table tr[data-dir-row][hidden] { display: none; }
  .po-dir-table tbody tr[data-dir-row] :is(th, td) { padding: 0; border: 0; }
  .po-dir-table tbody tr[data-dir-row] th { grid-column: 1 / 4; grid-row: 1; align-self: end; font-size: 16px; }
  .po-dir-table td[data-dir-cost] { grid-column: 4 / 5; grid-row: 1 / 3; justify-self: end; align-self: center; text-align: right; font-size: 16px; white-space: normal; }
  .po-dir-table td[data-dir-cost]::before { content: attr(data-label); display: block; margin-bottom: 3px; font-size: 10px; font-weight: 400; color: var(--po-muted); white-space: nowrap; }
  .po-dir-table .po-dir-type { grid-column: 1 / 2; grid-row: 2; margin-top: 6px; }
  .po-dir-table .po-dir-from { grid-column: 2 / 4; grid-row: 2; margin-top: 6px; align-self: center; }
  .po-dir-table .po-dir-from::before { content: attr(data-label) ' '; font-size: 11px; color: var(--po-muted); }
  .po-dir-table .po-dir-from .po-free { display: inline; margin-left: 6px; }
  .po-dir-table .po-dir-feat { grid-row: 3; margin-top: 12px; font-size: 13px; line-height: 1.3; }
  .po-dir-table .po-dir-feat::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--po-mono); font-size: 10px; color: var(--po-muted); }
  .po-dir-plans, .po-dir-plans tbody { display: block; }
  .po-dir-plans tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--po-line); }
  .po-dir-plans tbody :is(th, td) { padding: 0; border: 0; }
  .po-dir-plans tbody td.po-num { grid-column: 2; grid-row: 1; text-align: right; font-size: 15px; }
  .po-dir-plans tbody td[data-label] { grid-column: 1 / 3; font-size: 14px; }
  .po-dir-plans tbody td[data-label]::before { content: attr(data-label) ' '; font-family: var(--po-mono); font-size: 10.5px; color: var(--po-muted); margin-right: 4px; }
}
.po-dir-checks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--po-ink); }
.po-dir-checks li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--po-line); font-size: 15px; }
.po-dir-checks li b { font-family: var(--po-mono); font-size: 11.5px; font-weight: 500; color: var(--po-muted); }
.po-dir-checks .is-yes span { color: var(--po-pixel); }
.po-dir-checks .is-yes b { color: var(--po-ink); }
.po-dir-checks .is-unknown span { color: var(--po-muted); }
.po-dir-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 26px; padding: 0; }
.po-dir-tags li { padding: 5px 10px; font-size: 13.5px; background: var(--po-sheet); border: 1px solid var(--po-line); border-radius: 3px; }
.po-dir-tags a { color: var(--po-ink); }
.po-dir-sources p { max-width: 46em; font-size: 15px; line-height: 1.6; color: var(--po-muted); }
.po-dir-sources a { color: var(--po-pixel); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.po-dir-sources ul { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--po-line); }
.po-dir-sources li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--po-line); font-size: 13.5px; }
.po-dir-sources li span { font-family: var(--po-mono); font-size: 11px; color: var(--po-muted); text-transform: capitalize; }
.po-dir-similar ul, .po-dir-industries ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.po-dir-industries ul { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.po-dir-similar a, .po-dir-industries a { display: grid; gap: 3px; height: 100%; padding: 14px 16px; border: 1px solid var(--po-line); border-radius: var(--po-radius); color: var(--po-ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.po-dir-similar a:hover, .po-dir-industries a:hover { border-color: var(--po-ink); box-shadow: 5px 5px 0 var(--po-pixelPale); }
.po-dir-similar b, .po-dir-industries b { font-weight: 650; font-size: 15.5px; }
.po-dir-similar span, .po-dir-industries span { font-family: var(--po-mono); font-size: 11px; color: var(--po-muted); }
.po-dir-checklist ol { list-style: none; margin: 0; padding: 0; counter-reset: check; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--po-ink); }
.po-dir-checklist li { display: grid; align-content: start; gap: 4px; padding: 16px 0 16px 34px; position: relative; border-bottom: 1px solid var(--po-line); counter-increment: check; }
.po-dir-checklist li::before { content: counter(check); position: absolute; left: 0; top: 17px; width: 20px; height: 20px; display: grid; place-items: center; background: var(--po-pixel); color: #fff; font-family: var(--po-mono); font-size: 11px; }
.po-dir-checklist b { font-size: 16px; font-weight: 650; }
.po-dir-checklist span { font-size: 15px; line-height: 1.55; color: var(--po-muted); }
.po-dir-more { margin-top: 18px; }
.po-dir-more summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--po-pixel); }
.po-dir-faq details { border-top: 1px solid var(--po-line); }
.po-dir-faq details:last-child { border-bottom: 1px solid var(--po-line); }
.po-dir-faq summary { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; font-size: 17px; font-weight: 650; list-style: none; }
.po-dir-faq summary::-webkit-details-marker { display: none; }
.po-dir-faq summary::after { content: '+'; font-family: var(--po-mono); color: var(--po-pixel); }
.po-dir-faq details[open] summary::after { content: '−'; }
.po-dir-faq details p { margin: 0 0 18px; max-width: 46em; font-size: 16px; line-height: 1.65; color: var(--po-muted); }
.po-dir-cta { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 56px; align-items: end; margin-top: 72px !important; padding: 40px; background: var(--po-fumed); color: #E9DFD2; border-radius: var(--po-radius); }
.po-dir-cta .po-label { color: #A39380; }
.po-dir-cta h2 { margin: 8px 0 12px; font-family: var(--po-display); font-stretch: 125%; font-weight: 720; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.022em; color: #fff; }
.po-dir-cta p { margin: 0; font-size: 16px; line-height: 1.6; max-width: 36em; }
.po-dir-cta-actions { display: grid; justify-items: start; gap: 4px; }
.po-dir-cta .po-text-link { color: #B9BEFF; }
.po-dir-cta .po-text-link:hover { color: #fff; }
@media (max-width: 900px) {
  .po-dir-stats { grid-template-columns: 1fr 1fr; row-gap: 14px; }
  .po-dir-grid, .po-dir-cta { grid-template-columns: 1fr; }
  .po-dir-similar ul { grid-template-columns: 1fr 1fr; }
  .po-dir-industries ul { grid-template-columns: 1fr 1fr; }
  .po-dir-checklist ol { grid-template-columns: 1fr; }
  .po-dir-cta { padding: 28px 22px; }
}
@media (max-width: 520px) {
  .po-dir-facts div, .po-dir-sources li { grid-template-columns: 1fr; gap: 2px; }
  .po-dir-industries ul, .po-dir-similar ul { grid-template-columns: 1fr; }
}

/* The local-AI VRAM calculator keeps its own dark instrument panel. */
.po-vram { --sans: 'Archivo', system-ui, sans-serif; --mono: 'Martian Mono', ui-monospace, monospace; --ground: #15130F; --panel: #211C16; --panel-2: #2B241C; --rule: #463B2E; --ink: #F1EADF; --slate: #C9BBA8; --slate-dim: #A6977F; }
.po-vram .wrap { max-width: 1240px; }
.po-vram h1 { font-family: var(--po-display); font-stretch: 125%; font-weight: 720; letter-spacing: -.028em; }
.po-vram .hl { color: inherit; }
.po-static-tool .po-footer { margin-top: 0; }

/* ── 404 ────────────────────────────────────────────────────────────── */
.po-404 { padding-block: 110px; min-height: 62vh; }
.po-404 h1 { font-family: var(--po-display); font-stretch: 125%; font-weight: 720; font-size: clamp(36px, 5vw, 64px); line-height: 1.04; letter-spacing: -.028em; max-width: 13em; }
.po-404 p { margin-block: 18px 28px; font-size: 18px; color: var(--po-muted); max-width: 32em; }
.po-404 .po-button + .po-button { margin-left: 10px; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .po-container { width: calc(100% - 56px); }
  .po-inner .site-content > .max-w-6xl, .po-inner .site-content > section.max-w-6xl { width: calc(100% - 56px); }
  .po-header-row { gap: 20px; }
  .po-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 32px; }
  .po-review-grid { grid-template-columns: minmax(0, 1fr) 240px; }
  .po-review-grid > .po-label { grid-column: 1 / -1; }
  .po-review-full, .po-testimonials { grid-column: 1 / -1; }
  .po-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; border-top: 0; }
  .po-timeline li { border-top: 1px solid var(--po-ink); }
  .po-about-grid, .po-contact-grid { gap: 48px; }
  .po-footer-grid { gap: 32px; }
}
@media (max-width: 900px) {
  .po-desktop-nav { display: none; }
  .po-header-cta { margin-left: auto; }
  .po-mobile-menu { display: block; }
  .po-mobile-menu > summary { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--po-ink); border-radius: var(--po-radius); font-size: 14px; font-weight: 600; }
  .po-mobile-menu[open] > summary { background: var(--po-ink); color: #fff; }
  .po-burger { width: 14px; height: 10px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; position: relative; }
  .po-burger::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid currentColor; transform: translateY(-50%); }
  body:has(.po-mobile-menu[open]) { overflow: hidden; }
  .po-drawer { position: fixed; left: 0; right: 0; top: var(--po-header-h); bottom: 0; z-index: 61; display: flex; flex-direction: column; padding: 4px 20px 40px; overflow-y: auto; overscroll-behavior: contain; background: var(--po-paper); animation: po-drop .2s cubic-bezier(.2,.8,.2,1); }
  .po-drawer-group { border-bottom: 1px solid var(--po-line); }
  .po-drawer-group > summary, .po-drawer-link { display: flex; justify-content: space-between; align-items: center; min-height: 58px; font-family: var(--po-display); font-stretch: 115%; font-weight: 680; font-size: 21px; letter-spacing: -.012em; color: var(--po-ink); text-decoration: none; }
  .po-drawer-link { border-bottom: 1px solid var(--po-line); }
  .po-drawer-group[open] > summary { color: var(--po-pixel); }
  .po-drawer ul { list-style: none; margin: 0 0 14px; padding: 0; }
  .po-drawer li a { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 16px; color: var(--po-ink); text-decoration: none; }
  .po-drawer li small { font-family: var(--po-mono); font-size: 11.5px; color: var(--po-muted); }
  .po-drawer > .po-button { margin-top: 22px; }
  .po-drawer-contact { display: grid; gap: 6px; margin: 18px 0 0; font-family: var(--po-mono); font-size: 13px; }
  .po-drawer-contact a { color: var(--po-ink); }
  .po-hero { padding-block: 36px 12px; }
  .po-hero-grid { display: block; margin-top: 22px; }
  .po-hero-figure { position: sticky; top: var(--po-header-h); z-index: 5; margin: 26px -28px 0; padding: 8px 28px 6px; background: var(--po-paper); border-bottom: 1px solid var(--po-line); }
  .po-hero-sticky { position: static; }
  .po-hero-sticky .po-fig { max-width: min(100%, calc((100svh - var(--po-header-h)) * .44)); margin-inline: auto; }
  .po-hero-figure .po-callouts, .po-hero-figure figcaption { display: none; }
  .po-rail { flex-wrap: nowrap; justify-content: safe center; gap: 6px; margin-top: 4px; padding-top: 4px; overflow-x: auto; }
  .po-rail button { gap: 4px; }
  .po-rail button { font-size: 10px; min-height: 30px; }
  .js .po-hero-steps .po-step { min-height: 62svh; }
  .po-step h2 { font-size: clamp(26px, 7vw, 34px); }
  .po-hero-steps .po-step > p { font-size: 16.5px; }
  /* The stack fills the width; the empty callout column on the right is cropped
     and the callouts become a list under the drawing. */
  .po-fig-stage { aspect-ratio: auto !important; overflow: hidden; }
  .po-fig-svg { position: static; display: block; width: 142%; height: auto; }
  .po-x-leader { display: none; }
  .po-callouts { margin-top: 12px; border-top: 1px solid var(--po-ink); }
  .po-callout { grid-template-columns: 14px minmax(0, 1fr); column-gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--po-line); }
  .po-callout::before { content: ''; grid-row: 1 / 3; width: 10px; height: 10px; margin-top: 5px; border: 1px solid var(--po-ink); background: var(--po-paper); }
  .po-callout[data-layer=surface]::before { background: var(--po-pixel); border-color: var(--po-pixel); }
  .po-callout[data-layer=oak]::before { background: #D9BD90; }
  .po-section, .po-contact { padding-block: 64px; }
  .po-section-head { grid-template-columns: 1fr; margin-bottom: 36px; }
  .po-review-grid { grid-template-columns: 1fr; padding-block: 36px; }
  .po-review-full > div { columns: 1; }
  .po-testimonials { grid-template-columns: 1fr; gap: 28px; }
  .po-work { grid-template-columns: 1fr; gap: 24px; padding-block: 36px; }
  .po-price-table thead { display: none; }
  .po-price-table, .po-price-table tbody, .po-price-table tr { display: block; }
  .po-price-table tbody tr { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--po-line); }
  .po-price-table tbody :is(th,td) { display: block; padding: 0; border: 0; width: auto !important; }
  .po-price-table tbody th { grid-column: 1; }
  .po-price-table td:nth-of-type(1) { grid-column: 1 / -1; grid-row: 2; margin-top: 6px; font-size: 15px; }
  .po-price-table td.po-price { grid-column: 2; grid-row: 1; text-align: right; }
  .po-price-table td.po-time { grid-column: 1 / -1; grid-row: 3; margin-top: 4px; }
  .po-about-grid, .po-contact-grid { grid-template-columns: 1fr; }
  .po-workshop-grid { grid-template-columns: 1fr; }
  .po-demo-row { flex-direction: column; align-items: flex-start; }
  .po-footer-grid { grid-template-columns: 1fr 1fr; }
  .po-footer-brand, .po-footer-contact { grid-column: 1 / -1; }
  .po-directory-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .po-container { width: calc(100% - 32px); }
  .po-inner .site-content > .max-w-6xl, .po-inner .site-content > section.max-w-6xl { width: calc(100% - 32px); }
  .po-inner .site-content > header { padding-top: 40px; }
  .po-inner .site-content > header > p { font-size: 17px; }
  .po-inner .site-content { padding-bottom: 56px; }
  :root { --po-header-h: 61px; }
  .po-header-row { min-height: 60px; gap: 12px; }
  .po-header-cta { display: none; }
  .po-mobile-menu { margin-left: auto; }
  .po-wordmark { font-size: 17px; }
  .po-hero-title { font-size: clamp(34px, 10.4vw, 52px); line-height: 1.02; }
  .po-hero-figure { margin-inline: -16px; padding-inline: 16px; }
  .po-lede { font-size: 17.5px; }
  .po-hero-actions .po-button { width: 100%; }
  .po-timeline { grid-template-columns: 1fr; row-gap: 0; }
  .po-timeline li { border-top: 0; border-left: 1px solid var(--po-ink); padding: 0 0 26px 22px; }
  .po-timeline li::before { top: 2px; left: -5px; }
  .po-parity { padding: 20px; }
  .po-parity-row { grid-template-columns: 112px minmax(0, 1fr) 64px; gap: 10px; font-size: 13px; }
  .po-contact form { padding: 22px; box-shadow: 6px 6px 0 var(--po-pixelPale); }
  .po-contact .po-button { width: 100%; }
  .po-footer-bottom { flex-direction: column; align-items: flex-start; padding-right: 0; padding-bottom: 64px; }
  .po-chat-trigger { right: 14px; bottom: 14px; width: 48px; height: 48px; }
  .po-chat-window { right: 14px; bottom: 74px; }
}
@media (max-width: 420px) {
  .po-form-row { grid-template-columns: 1fr; gap: 0; }
  .po-facts > div { grid-template-columns: 1fr; gap: 2px; }
  .po-directory-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .po-live { animation: none; }
}